mirror base config variables as css custom property, set aliases for some plattte colors

Author: haschek

src/components/Application/_colors.scss

@@ -2,6 +2,7 @@
 @use "sass:list";
 
 :root {
+    // creating css custom properties from palette colors
     @each $palette-group-name, $palette-group-tints in $eccgui-color-palette-light {
         @each $palette-tint-name, $palette-tint-colors in $palette-group-tints {
             @for $i from 1 through list.length($palette-tint-colors) {
@@ -12,4 +13,18 @@
             }
         }
     }
+
+    // set aliases for base colors
+    --#{$eccgui}-color-primary: #{$eccgui-color-primary};
+    --#{$eccgui}-color-primary-contrast: #{$eccgui-color-primary-contrast};
+    --#{$eccgui}-color-accent: #{$eccgui-color-accent};
+    --#{$eccgui}-color-accent-contrast: #{$eccgui-color-accent-contrast};
+    --#{$eccgui}-color-success-foreground: #{$eccgui-color-success-text};
+    --#{$eccgui}-color-success-background: #{$eccgui-color-success-background};
+    --#{$eccgui}-color-info-foreground: #{$eccgui-color-info-text};
+    --#{$eccgui}-color-info-background: #{$eccgui-color-info-background};
+    --#{$eccgui}-color-warning-foreground: #{$eccgui-color-warning-text};
+    --#{$eccgui}-color-warning-background: #{$eccgui-color-warning-background};
+    --#{$eccgui}-color-danger-foreground: #{$eccgui-color-danger-text};
+    --#{$eccgui}-color-danger-background: #{$eccgui-color-danger-background};
 }

src/configuration/_customproperties.scss

@@ -0,0 +1,38 @@
+/**
+ * We mirror our SCSS variables here to improve availability in inline styles
+ * and module styles without included SCSS config stack.
+ * Colors are set in `src/components/Application/_colors.scss`.
+ */
+
+:root {
+    --eccgui-size-typo-caption: #{$eccgui-size-typo-caption};
+    --eccgui-size-typo-caption-lineheight: #{$eccgui-size-typo-caption-lineheight};
+    --eccgui-size-typo-text: #{$eccgui-size-typo-text};
+    --eccgui-size-typo-text-lineheight: #{$eccgui-size-typo-text-lineheight};
+    --eccgui-size-typo-subtitle: #{$eccgui-size-typo-subtitle};
+    --eccgui-size-typo-subtitle-lineheight: #{$eccgui-size-typo-subtitle-lineheight};
+    --eccgui-size-typo-title: #{$eccgui-size-typo-title};
+    --eccgui-size-typo-title-lineheight: #{$eccgui-size-typo-title-lineheight};
+    --eccgui-size-typo-headline: #{$eccgui-size-typo-headline};
+    --eccgui-size-typo-headline-lineheight: #{$eccgui-size-typo-headline-lineheight};
+    --eccgui-size-typo-display-1: #{$eccgui-size-typo-display-1};
+    --eccgui-size-typo-display-1-lineheight: #{$eccgui-size-typo-display-1-lineheight};
+    --eccgui-size-typo-display-2: #{$eccgui-size-typo-display-2};
+    --eccgui-size-typo-display-2-lineheight: #{$eccgui-size-typo-display-2-lineheight};
+    --eccgui-size-typo-display-3: #{$eccgui-size-typo-display-3};
+    --eccgui-size-typo-display-3-lineheight: #{$eccgui-size-typo-display-3-lineheight};
+    --eccgui-font-weight-light: #{$eccgui-font-weight-light};
+    --eccgui-font-weight-regular: #{$eccgui-font-weight-regular};
+    --eccgui-font-weight-bold: #{$eccgui-font-weight-bold};
+    --eccgui-font-spacing-condensed: #{$eccgui-font-spacing-condensed};
+    --eccgui-font-spacing-regular: #{$eccgui-font-spacing-regular};
+    --eccgui-font-spacing-wide: #{$eccgui-font-spacing-wide};
+    --eccgui-size-block-whitespace: #{$eccgui-size-block-whitespace};
+    --eccgui-size-inline-whitespace: #{$eccgui-size-inline-whitespace};
+    --eccgui-opacity-regular: #{$eccgui-opacity-regular};
+    --eccgui-opacity-narrow: #{$eccgui-opacity-narrow};
+    --eccgui-opacity-muted: #{$eccgui-opacity-muted};
+    --eccgui-opacity-disabled: #{$eccgui-opacity-disabled};
+    --eccgui-opacity-ghostly: #{$eccgui-opacity-ghostly};
+    --eccgui-opacity-invisible: #{$eccgui-opacity-invisible};
+}

src/index.scss

@@ -9,6 +9,7 @@
 // == load default configuration ===============================================
 
 @import "./configuration/variables";
+@import "./configuration/customproperties"; // mirror config as custom properties
 
 // == Necessary imports from libraries =========================================