WIP: use css standard css variables

packages/build-essentials/src/Variables.css

@@ -0,0 +1,60 @@
+: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: 6;
+    --zIndex-LoadingIndicatorContainer: 5;
+    --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-Context: 1;
+    --zIndex-Bar-Context: 1;
+    --zIndex-PrimaryToolbar: 4;
+    --zIndex-CheckboxInput-Context: 1;
+    --zIndex-DropdownContents-Context: 1;
+    --zIndex-SelectBoxContents: 4;
+    --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: 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;
+}

packages/build-essentials/src/postcss.config.js

@@ -1,14 +1,8 @@
-const styles = require('./styles/styleConstants');
-const styleVars = styles.generateCssVarsObject(styles.config);
-
 module.exports = {
     plugins: [
-        require('autoprefixer'),
-        require('postcss-css-variables')({
-            variables: Object.assign(styleVars)
-        }),
         require('postcss-import')(),
         require('postcss-nested')(),
-        require('postcss-hexrgba')()
+        require('postcss-hexrgba')(),
+        require('autoprefixer'),
     ]
 };

packages/neos-ui/src/index.js

@@ -21,6 +21,8 @@ import Root from './Containers/Root';
 import apiExposureMap from './apiExposureMap';
 import DelegatingReducer from './DelegatingReducer';
 
+import '@neos-project/build-essentials/src/Variables.css'
+
 const devToolsArePresent = typeof window === 'object' && typeof window.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined';
 const devToolsStoreEnhancer = () => devToolsArePresent ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f;
 const sagaMiddleWare = createSagaMiddleware();