forked from neos/neos-development-collection
-
Notifications
You must be signed in to change notification settings - Fork 0
/
_CSSVariables.scss
108 lines (98 loc) · 3.38 KB
/
_CSSVariables.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
:root {
// Neos backend variables
--base-font-size: #{$baseFontSize};
/* Color palette */
--grayDarker: #{$grayDarker};
--grayDark: #{$grayDark};
--grayMedium: #{$grayMedium};
--grayLight: #{$grayLight};
--grayLighter: #{$grayLighter};
--textOnWhite: #{$textOnWhite};
--textContrast: #{$textContrast};
--textOnGray: #{$textOnGray};
--textSubtle: #{$textSubtle};
--textSubtleLight: #{$textSubtleLight};
--blue: #{$blue};
--blueLight: #{$blueLight};
--blueDark: #{$blueDark};
--green: #{$green};
--warning: #{$warning};
--orange: #{$orange};
/* Sizes & margins */
--unit: #{$unit};
--defaultMargin: #{$defaultMargin};
--relatedMargin: #{$relatedMargin};
--tightMargin: #{$tightMargin};
--wideMargin: #{$wideMargin};
/* Components */
--inspectorWidth: #{$inspectorWidth};
--navigatePanelWidth: #{$navigatePanelWidth};
--menuWidth: #{$menuWidth};
--editPreviewPanelHeight: #{$editPreviewPanelHeight};
--menuButtonWidth: #{$menuButtonWidth};
--generalFontSize: #{$generalFontSize};
--zindexTooltip: #{$zindexTooltip};
--errorText: #{$errorText};
--successText: #{$successText};
--warningText: #{$warningText};
--infoText: #{$infoText};
// Variables from Neos UI for usage in standalone react components
--spacing-GoldenUnit: #{$unit};
--spacing-Full: #{$defaultMargin};
--spacing-Half: #{$relatedMargin};
--spacing-Quarter: #{$tightMargin};
--size-SidebarWidth: #{$navigatePanelWidth};
--transition-Fast: 0.1s;
--transition-Default: 0.25s;
--transition-Slow: 0.5s;
--zIndex-SecondaryToolbar-LinkIconButtonFlyout: 1;
--zIndex-FlashMessageContainer: 60;
--zIndex-LoadingIndicatorContainer: 50;
--zIndex-SecondaryInspector-Context: 1;
--zIndex-SecondaryInspector-Iframe: 2;
--zIndex-SecondaryInspector-Close: 3;
--zIndex-SecondaryInspectorElevated-Context: 1;
--zIndex-SecondaryInspectorElevated-DropdownContents: 2;
--zIndex-Dialog-Context: 1;
--zIndex-FullScreenClose-Context: 1;
--zIndex-Drawer: 45;
--zIndex-Bar-Context: 1;
--zIndex-PrimaryToolbar: 40;
--zIndex-CheckboxInput-Context: 1;
--zIndex-DropdownContents-Context: 1;
--zIndex-SelectBoxContents: 40;
--zIndex-NotInlineEditableOverlay-Context: 1;
--zIndex-CalendarFakeInputMirror-Context: 1;
--zIndex-RdtPicker-Context: 1;
--zIndex-SideBar-DropTargetBefore: 1;
--zIndex-SideBar-DropTargetAfter: 2;
--zIndex-WrapperDropdown-Context: 1;
--zIndex-UnappliedChangesOverlay-Context: 1;
--zIndex-NodeToolBar: 2147483646;
--fontSize-Base: #{$generalFontSize};
--fontSize-Small: 12px;
--fontsHeadings-Family: Noto Sans;
--fontsHeadings-Style: Regular;
--fontsHeadings-CssWeight: 400;
--fontsCopy-Family: Noto Sans;
--fontsCopy-Style: Regular;
--fontsCopy-CssWeight: 400;
--colors-PrimaryViolet: #26224c;
--colors-PrimaryVioletHover: #342f5f;
--colors-PrimaryBlue: #00adee;
--colors-PrimaryBlueHover: #35c3f8;
--colors-ContrastDarkest: #{$grayDarker};
--colors-ContrastDarker: #{$grayDark};
--colors-ContrastDark: #{$grayLight};
--colors-ContrastNeutral: #{$grayMedium};
--colors-ContrastBright: #999;
--colors-ContrastBrighter: #{$textSubtleLight};
--colors-ContrastBrightest: #{$textOnGray};
--colors-Success: #{$green};
--colors-SuccessHover: #0bb344;
--colors-Warn: #{$orange};
--colors-WarnHover: #fda23d;
--colors-Error: #{$warning};
--colors-ErrorHover: #ff6a3c;
--colors-UncheckedCheckboxTick: #5b5b5b;
}