cssVariables.css

/**
 * 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;
}