TASK: Define runtime CSS variables for plugins

cssVariables.css

@@ -0,0 +1,85 @@
+/**
+ * Hi, sorry yes i know this is confusing.
+ *
+ * This file currently is not the actual source of the used css variables in the UI, as we have packages/build-essentials/src/styles/styleConstants.js
+ * So why do i say currently? can i look into the future? As a matter of fact yes.
+ * We are currently in the Neos Ui branch 7.3 8.0 8.1 or 8.2,
+ * beginning with Neos 8.3 we will start to use this file here as actual source of truth (see https://github.com/neos/neos-ui/pull/3366)
+ *
+ * So you are still wondering why we introduced it into 7.3? Let me explain...
+ * In the 7.3 to 8.2 time the webpack neos-ui-extensibility plugin bundler actually replaces all the css variables as into the bundled plugincode,
+ * but starting with Neos 8.3 the webpack adapter doesnt do this anymore (because of overhead) and also because this would require that we have a separate esbuild extensibility plugin to do the same.
+ * As you might now we dont even have an esbuild plugin, you can just rely on the alias map of the neos-ui-extensibility and might even be able to use it in rollup of webpack5.
+ * So to provide an easy migration, we expose the css variables as real runtime variables, that way they can also be consumed as such.
+ * The reason we backported the runtime variables to Neos 7.3 is to reduce overhead for plugin authors, so they can use the new 8.3 extensibility bundlers but their plugins are compatible with Neos 7.3 too
+ */
+
+/** 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.
+ */
+: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: 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: 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/neos-ui/src/styleHostOnly.css

@@ -1,4 +1,5 @@
 @import 'normalize.css';
+@import '../../../cssVariables.css';
 
 @font-face {
     font-family: 'Noto Sans';