forked from neos/neos-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
cssVariables.css
76 lines (74 loc) · 3.07 KB
/
cssVariables.css
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
/**
* see https://github.com/neos/neos-ui/pull/3438 as to why we have in NeosUi 7.3 - 8.2 two declarations of the same set of css variables.
*/
/** Global CSS variables for Neos.Ui */
/**
* They are compiled into the source code via our buildstack, and additionally exposed on the Host, to be consumed at runtime by plugins
*
* We currently dont use runtime variables in the NeosUi see: https://github.com/neos/neos-ui/issues/3201
* This approach would work for the Host frame, but we inject some rendered html and css (the inline toolbar) into the guest frame where we also rely on css variables.
* To not collide with consumer css variables in the iframe, we keep them compiled.
*
* While we do make sure that plugins are working who use the variable names, they are not marked as @api but only available for unplanned extensibility.
* In the future we plan to transform the names to lowercase and might get rid of some unused/odd variables (like all the --zIndex- ones).
*/
:root {
--spacing-GoldenUnit: 40px;
--spacing-Full: 16px;
--spacing-Half: 8px;
--spacing-Quarter: 4px;
--size-SidebarWidth: 320px;
--transition-Fast: .1s;
--transition-Default: .25s;
--transition-Slow: .5s;
--zIndex-SecondaryToolbar-LinkIconButtonFlyout: 1;
--zIndex-FlashMessageContainer: 70;
--zIndex-LoadingIndicatorContainer: 50;
--zIndex-SecondaryInspector-Context: 1;
--zIndex-SecondaryInspector-Iframe: 2;
--zIndex-SecondaryInspector-Close: 3;
--zIndex-SecondaryInspectorElevated: 60;
--zIndex-SecondaryInspectorElevated-DropDownContents: 70;
--zIndex-Dialog: 55;
--zIndex-FullScreenClose-Context: 1;
--zIndex-Drawer: 45;
--zIndex-Bar-Context: 1;
--zIndex-PrimaryToolbar: 40;
--zIndex-CheckboxInput-Context: 1;
--zIndex-DropdownContents-Context: 1;
--zIndex-SelectBoxContents: 55;
--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: 55;
--zIndex-NodeToolBar: 2147483646;
--fontSize-Base: 14px;
--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: #141414;
--colors-ContrastDarker: #222;
--colors-ContrastDark: #3f3f3f;
--colors-ContrastNeutral: #323232;
--colors-ContrastBright: #999;
--colors-ContrastBrighter: #adadad;
--colors-ContrastBrightest: #FFF;
--colors-Success: #00a338;
--colors-SuccessHover: #0bb344;
--colors-Warn: #ff8700;
--colors-WarnHover: #fda23d;
--colors-Error: #ff460d;
--colors-ErrorHover: #ff6a3c;
--colors-UncheckedCheckboxTick: #5B5B5B;
}