@medyll/cssfabric 0.0.16 → 0.1.12

package/src/cssfabric/modules/scale/_scale-build.scss

@@ -2,25 +2,24 @@
 @use '../../_utils';
 @use "sass:math";
 
-$scale-config: scale-vars.$scale-config;
 $_cfg: utils.get_fabric_conf();
-$cssProps: map-get($scale-config, cssProps);
 
 // read variables
 $_has_dimensions_strict: map-get($_cfg, has_dimensions_strict);
 $_has_dimensions_min: true; // map-get($_cfg, has_dimensions_min);
 $_has_dimensions_max: true; // map-get($_cfg, has_dimensions_max);
 
-$scale-defined-steps: map-get($scale-config, defined-steps);
-$scale-defined-step-unit: map-get($scale-config, defined-step-unit);
-$scale-defined-step-size: map-get($scale-config, defined-step-size);
-$scale-grid-ratios-config: map-get($scale-config, grid-ratios-config);
+$scale-defined-steps: scale-vars.$scale-defined-steps;
+$scale-defined-step-unit: scale-vars.$scale-defined-step-unit;
+$scale-defined-step-size: scale-vars.$scale-defined-step-size;
+$scale-grid-ratios-config: scale-vars.$scale-grid-ratios-config;
 
-$scale-sizes: map-get($cssProps, size);
-$scale-content: map-get($cssProps, content);
+$scale-sizes: scale-vars.$scale-sizes-config;
+$scale-content: scale-vars.$scale-content-config;
 
-$weight-config: map-get($scale-config, weight-config)!default;
-$unit-tag-config: map-get($scale-config, unit-tag-config)!default;
+$weight-config: scale-vars.$scale-font-weight-config ;
+$unit-tag-config: scale-vars.$scale-shorthands;
+$scale-sizes-preset-config: scale-vars.$scale-sizes-preset-config;
 
 /// css dimensions rules builder
 @mixin scale-classname-builder($scale_prop, $size_code, $size_value, $media_query_code) {
@@ -67,10 +66,10 @@ $unit-tag-config: map-get($scale-config, unit-tag-config)!default;
   }
 }
 
-// loop on dimensions
+// content-max-min
 @mixin play_dimensions_loop($scale_prop, $mq_size_key) {
   // loop on dimensions
-  @each $scale_css_key , $scale_css_value in $scale-content {
+  @each $scale_css_key, $scale_css_value in $scale-content {
     @include scale-classname-builder($scale_prop, $scale_css_key, $scale_css_value, $mq_size_key);
   }
 }
@@ -96,6 +95,7 @@ $unit-tag-config: map-get($scale-config, unit-tag-config)!default;
     );
   }
 }
+$--var-oi: yt;
 
 // loop on ratio dimensions
 @mixin play_ratio_dimensions_loop($scale_prop, $mq_size_key) {
@@ -112,14 +112,27 @@ $unit-tag-config: map-get($scale-config, unit-tag-config)!default;
   }
 }
 
+@mixin play_preset_loop($scale_prop, $mq_size_key) {
+
+  @each $preset, $value in $scale-sizes-preset-config {
+    @include scale-classname-builder(
+                    $scale_prop,
+                    $preset,
+                    $value + #{$scale-defined-step-unit},
+                    $mq_size_key
+    );
+  }
+}
+
 @mixin buildScale($mq_size_key:null) {
   @each $scale_prop, $scale_prop_short in $unit-tag-config {
-    // loop on shorthands
+    // loop on shorthands   mid tiers ...
     @include play_shorthand_loop($scale_prop, $mq_size_key);
 
     // loop on dimensions
     @include play_dimensions_loop($scale_prop, $mq_size_key);
 
+    @include play_preset_loop($scale_prop, $mq_size_key);
     // loop on defined dimensions
     @include play_defined_dimensions_loop($scale_prop, $mq_size_key);
 

package/src/cssfabric/modules/scale/_scale-vars.scss

@@ -1,28 +1,48 @@
 @use '../../utils';
+@use "../cssfabric-config";
 
+$scale-sizes-config: (
+        full: 100%,
+        mid: 50%,
+        quarter: 25%,
+        tiers: 33%
+);
+$scale-content-config: (
+        content-max: max-content,
+        content-min: min-content
+);
+
+$scale-sizes-preset-config: (
+        tiny: 2,
+        small: 4,
+        medium: 8,
+        large: 16,
+        wide: 32,
+);
+
+$scale-grid-ratios-config: (16);
+
+$scale-defined-steps: (
+        1,
+        2,
+        4,
+        8,
+        16,
+        24,
+        32,
+        48,
+        64
+);
+
+$scale-shorthands: (
+        width: cssfabric-config.$scale-tag-width-shorthand,
+        height: cssfabric-config.$scale-tag-height-shorthand
+);
 
 $_cssProps: (
-        size: (
-                full: 100%,
-                mid: 50%,
-                quarter: 25%,
-                tiers: 33%
-        ),
-        content:(
-                content-max: max-content,
-                content-min: min-content
-        ),
-        defined-steps: (
-                1,
-                2,
-                4,
-                8,
-                16,
-                24,
-                32,
-                48,
-                64
-        )
+        size: $scale-sizes-config,
+        content:$scale-content-config,
+        defined-steps: $scale-defined-steps
 );
 
 $scale-metadata: (
@@ -31,44 +51,33 @@ $scale-metadata: (
         description: "cssfabric scale module to set dimensions and ratios on all html elements"
 );
 
+$scale-font-weight-config: 1em;
+$scale-defined-step-size: 2;
+$scale-defined-step-unit: rem;
+
 $scale-config: (
-        weight-config: 1em,
+        weight-config: $scale-font-weight-config,
         unit-tag-config: (
                 width: w,
                 height: h
         ),
-        grid-ratios-config: (
-                5,
-                12
-        ),
-        defined-step-size: 2,
-        defined-step-unit: rem,
-        defined-steps: (
-                1,
-                2,
-                4,
-                8,
-                16,
-                24,
-                32,
-                48,
-                64
-        ),
+        grid-ratios-config: $scale-grid-ratios-config,
+        defined-step-size: $scale-defined-step-size,
+        defined-step-unit: $scale-defined-step-unit,
+        defined-steps: $scale-defined-steps,
         cssProps:$_cssProps
 );
 
-
 $scale-docs: (
         attributes:(
                 scale: (
                         tag: scale,
                         keys: (w, h),
                         levels:(
-                                _size : utils.getObjectKeys(map-get($_cssProps, size)),
-                                _content: utils.getObjectKeys(map-get($_cssProps, content)),
-                                _defined-steps: utils.getObjectKeys(map-get($_cssProps, defined-steps)),
-                                _grid-5: utils.getObjectKeys(utils.cssDimensionPropertyBuilder(h, 5)),
-                                _grid-12: utils.getObjectKeys(utils.cssDimensionPropertyBuilder(h, 12))
+                                _size : utils.getObjectKeys($scale-sizes-config),
+                                _content: utils.getObjectKeys($scale-content-config),
+                                _defined-steps: utils.getObjectKeys($scale-defined-steps),
+                                _grid-16: utils.getObjectKeys(utils.cssDimensionPropertyBuilder(h, 16)),
                         )
                 )
         )

package/src/cssfabric/modules/text/_text-build.scss

@@ -53,25 +53,45 @@ $step-size: math.div($size-diff, $steps);
     }
   }
 
+
+}
+
+@mixin textBuildTransform($tag_short) {
   .#{$tag_short} {
     @each $fabricRule, $value in $textTransform {
       @include utils.fabricAttributes("&" + $sep, $fabricRule, "text-transform", $value);
     }
+  }
+}
 
+@mixin textBuildAlign($tag_short) {
+  .#{$tag_short} {
     @each $fabricRule, $value in $textAlign {
       @include utils.fabricAttributes("&" + $sep, $fabricRule, "text-align", $value);
     }
+  }
+}
 
+@mixin textBuildFontWeight($tag_short) {
+  .#{$tag_short} {
     @each $fabricRule, $value in $fontWeight {
       @include utils.fabricAttributes("&" + $sep, $fabricRule, "font-weight", var(--font-weight-#{$fabricRule}));
     }
+  }
+}
 
-    // text shadows color_schemes
+@mixin textBuildShadowColorScheme($tag_short) {
+  // text shadows color_schemes
+  .#{$tag_short} {
     @each $fabricRule, $value in $color-schemes {
-      @include utils.fabricAttributes("&" + $sep + shad + $sep, $fabricRule, "text-shadow",  var(--text-shadow-#{$fabricRule}));
+      @include utils.fabricAttributes("&" + $sep + shad + $sep, $fabricRule, "text-shadow", var(--text-shadow-#{$fabricRule}));
     }
+  }
+}
 
-    // text shadows color_palette_props
+@mixin textBuildShadowPalette($tag_short) {
+  // text shadows color_palette_props
+  .#{$tag_short} {
     @each $fabricRule, $value in $color-palette-props {
       @include utils.fabricAttributes("&" + $sep+ shad + $sep, $fabricRule, "text-shadow", var(--text-shadow-#{$fabricRule}));
     }
@@ -106,4 +126,41 @@ $step-size: math.div($size-diff, $steps);
   $property_key: if($mq_size_key, #{$moduleNameShort}-#{$mq_size_key}, #{$moduleNameShort});
 
   @include fabric_text($property_key);
+
+  @if ($mq_size_key == null) {
+    @if (cssfabric-config.$has-text-transform) {
+      @include textBuildTransform($property_key)
+    }
+    @if (cssfabric-config.$has-text-align) {
+      @include textBuildAlign($property_key)
+    }
+    @if (cssfabric-config.$has-text-font) {
+      @include textBuildFontWeight($property_key)
+    }
+    @if (cssfabric-config.$has-text-shadow-color-scheme) {
+      @include textBuildShadowColorScheme($property_key)
+    }
+    @if (cssfabric-config.$has-text-shadow-color-palette) {
+      @include textBuildShadowPalette($property_key)
+    }
+  }
+
+  @if ($mq_size_key != null) {
+    @if (cssfabric-config.$has-text-transform-responsive) {
+      @include textBuildTransform($property_key)
+    }
+    @if (cssfabric-config.$has-text-align-responsive) {
+      @include textBuildAlign($property_key)
+    }
+    @if (cssfabric-config.$has-text-font-responsive) {
+      @include textBuildFontWeight($property_key)
+    }
+    @if (cssfabric-config.$has-text-shadow-color-scheme-responsive) {
+      @include textBuildShadowColorScheme($property_key)
+    }
+    @if (cssfabric-config.$has-text-shadow-color-palette-responsive) {
+      @include textBuildShadowPalette($property_key)
+    }
+  }
+
 }

package/src/cssfabric/modules/text/text-responsive.scss

@@ -20,6 +20,7 @@ $mq_size_value in $_media_quey_sizes {
     @include utils.fabricResponsiveEncloser($mq_size_value,$min_value) {
         @include build.buildText($mq_size_key);
     }
+
     $min_value: $mq_size_value;
 } 
  

package/src/cssfabric/modules/theme/_theme-build.scss

@@ -1,9 +1,9 @@
-@use "theme-vars";
-@use "../cssfabric-config";
 @use "../../_utils";
 @use "sass:color";
+@use "theme-vars";
 
-$theme-config: theme-vars.$theme-config;
+@import "theme-vars";
+@import "../cssfabric-config";
 
 // COLOR THEME
 $moduleNameShort: map-get($theme-config, moduleNameShort);
@@ -12,24 +12,25 @@ $color-themes: map-get($theme-config, color-default-config);
 $theme-levels: map-get($theme-config, theme-level-config);
 $theme-properties-apply-config: map-get($theme-config, theme-properties-apply-config);
 
-$color-primary: map-get($color-themes, primary);
-$color-secondary: map-get($color-themes, secondary);
-$color-tertiary: map-get($color-themes, tertiary);
 
 $declinations-config: map-get($theme-config, declinations-config);
 
+$themes: map-get($cssfabric-config, themes) !default;
+$theme-light: map-get($themes, light) !default;
+$theme-dark: map-get($themes, dark) !default;
+
 @mixin fabric_theme($mq_size_key: null) {
-  // loop on each color grades
+  // loop on each color grades primary secondary tertiary
   @each $color-grade in $declinations-config {
-
+    // text, bg, border
     @each $text-or-bg-or-border in $theme-properties-apply-config {
       $property_key: if($mq_size_key, #{$text-or-bg-or-border}-#{$mq_size_key}, #{$text-or-bg-or-border});
-
+      // font-size border-color background-color
       $switch-tag-type: utils.getColorPropertyType($text-or-bg-or-border);
 
       .#{$moduleNameShort}-#{$property_key}-#{$color-grade} {
         #{$switch-tag-type}: var(--theme-color-#{$color-grade});
-
+        //  light lighter dark ...
         @each $theme-level in $theme-levels {
           $newColor: var(--theme-color-#{$color-grade}-#{$theme-level});
 
@@ -40,37 +41,50 @@ $declinations-config: map-get($theme-config, declinations-config);
   }
 }
 
-@mixin themeCssVars() {
+@mixin themeBaseVars($theme:$theme-light) {
+  /* theme base colors*/
+  --theme-color-text: #{map-get($theme, foreground)};
+  --theme-color-foreground: #{map-get($theme, foreground)};
+  @include utils.alphaTize(--theme-color-foreground, map-get($theme, foreground));
+  --theme-color-background: #{map-get($theme, background)};
+  @include utils.alphaTize(--theme-color-background, map-get($theme, foreground));
+  --theme-color-paper: #{map-get($theme-light, paper)};
+  @include utils.alphaTize(--theme-color-paper, map-get($theme, paper));
+}
+
+
+@mixin themeCssVars($theme-color-primary,$theme-color-secondary,$theme-color-tertiary) {
+
   /* theme primary colors*/
-  --theme-color-primary: #{$color-primary};
+  --theme-color-primary: #{$theme-color-primary};
   @each $theme-level in $theme-levels {
-    --theme-color-primary-#{$theme-level}: #{utils.applyColorEffect($theme-level,$color-primary)};
+    --theme-color-primary-#{$theme-level}: #{utils.applyColorEffect($theme-level,$theme-color-primary)};
   }
-  --theme-color-primary-alpha-low: #{color.change($color-primary,$alpha:0.8)};
-  --theme-color-primary-alpha-mid: #{color.change($color-primary,$alpha:0.3)};
-  --theme-color-primary-alpha-high: #{color.change($color-primary,$alpha:0.1)};
+
+  --theme-color-primary-alpha-low: #{color.change($theme-color-primary,$alpha:0.8)};
+  --theme-color-primary-alpha: #{color.change($theme-color-primary,$alpha:0.3)};
+  --theme-color-primary-alpha-high: #{color.change($theme-color-primary,$alpha:0.1)};
 
   /* theme secondary colors*/
-  --theme-color-secondary: #{$color-secondary};
+  --theme-color-secondary: #{$theme-color-secondary};
   @each $theme-level in $theme-levels {
-    --theme-color-secondary-#{$theme-level}: #{utils.applyColorEffect($theme-level,$color-secondary)};
+    --theme-color-secondary-#{$theme-level}: #{utils.applyColorEffect($theme-level,$theme-color-secondary)};
   }
-  --theme-color-secondary-alpha-low: #{color.change($color-secondary,$alpha:0.8)};
-  --theme-color-secondary-alpha-mid: #{color.change($color-secondary,$alpha:0.3)};
-  --theme-color-secondary-alpha-high: #{color.change($color-secondary,$alpha:0.1)};
+  --theme-color-secondary-alpha-low: #{color.change($theme-color-secondary,$alpha:0.8)};
+  --theme-color-secondary-alpha: #{color.change($theme-color-secondary,$alpha:0.3)};
+  --theme-color-secondary-alpha-high: #{color.change($theme-color-secondary,$alpha:0.1)};
 
   /* theme tertiary colors*/
-  --theme-color-tertiary: #{$color-tertiary};
+  --theme-color-tertiary: #{$theme-color-tertiary};
   @each $theme-level in $theme-levels {
-    --theme-color-tertiary-#{$theme-level}: #{utils.applyColorEffect($theme-level,$color-tertiary)};
+    --theme-color-tertiary-#{$theme-level}: #{utils.applyColorEffect($theme-level,$theme-color-tertiary)};
   }
-  --theme-color-tertiary-alpha-low: #{color.change($color-tertiary,$alpha:0.8)};
-  --theme-color-tertiary-alpha-mid: #{color.change($color-tertiary,$alpha:0.3)};
-  --theme-color-tertiary-alpha-high: #{color.change($color-tertiary,$alpha:0.1)};
-
+  --theme-color-tertiary-alpha-low: #{color.change($theme-color-tertiary,$alpha:0.8)};
+  --theme-color-tertiary-alpha: #{color.change($theme-color-tertiary,$alpha:0.3)};
+  --theme-color-tertiary-alpha-high: #{color.change($theme-color-tertiary,$alpha:0.1)};
 }
 
 @mixin buildTheme($mq_size_key: null) {
-    
-    @include fabric_theme($mq_size_key);
+
+  @include fabric_theme($mq_size_key);
 }

package/src/cssfabric/modules/theme/_theme-vars.scss

@@ -1,20 +1,10 @@
 @use '../../utils' as utils;
-@use "../cssfabric-config";
+@import "../cssfabric-config";
 
 
-$config: cssfabric-config.$cssfabric-config;
-
-$theme: map-get($config, theme);
-
-$color-primary: map-get($theme, primary) !default;
-$color-secondary: map-get($theme, secondary) !default;
-$color-tertiary: map-get($theme, tertiary) !default;
-
-$_foreground: map-get($theme, foreground) !default;
-$_background: map-get($theme, background) !default;
 
 $_declinations-config: (primary, secondary, tertiary);
-$themeii: (primary: $color-primary, secondary:$color-secondary, tertiary:$color-tertiary);
+$themeii : (primary: $theme-color-primary, secondary:$theme-color-secondary, tertiary:$theme-color-tertiary);
 
 $_theme-levels: (light lighter dark darker complement invert);
 $_theme-properties-apply: (text, bg, border);
@@ -33,17 +23,18 @@ $theme-config: (
         moduleName: theme,
         moduleNameShort: theme,
         color-default-config: (
-                primary: $color-primary,
-                secondary: $color-secondary,
-                tertiary: $color-tertiary,
-                foreground: $_foreground,
-                background: $_background
+                primary: $theme-color-primary,
+                secondary: $theme-color-secondary,
+                tertiary: $theme-color-tertiary,
+                foreground: $theme-color-foreground,
+                background: $theme-color-background,
+                paper: $theme-color-paper,
         ),
         declinations-config:$_declinations-config,
         theme-level-config:$_theme-levels,
         theme-properties-apply-config:$_theme-properties-apply,
         // primary secondary tertiary
-        color: utils.getThemeLevels($themeii, $color-primary)
+        color: utils.getThemeLevels($themeii, $theme-color-primary)
 );
 
 $theme-docs: (attributes:(

package/src/cssfabric/modules/vars.scss

@@ -1,118 +1,49 @@
 @use "../_utils";
 @use "sass:color";
-@use 'cssfabric-config';
 @use '../../cssfabric/modules/color/color-vars';
+@use '../../cssfabric/modules/color/color-build'  as colorBuild;
 @use "../../cssfabric/modules/box/box-vars" as box;
 @use "../../cssfabric/modules/box/box-build" as boxBuild;
 @use "../../cssfabric/modules/theme/theme-build" as themeBuild;
 @use "../../cssfabric/modules/text/text-build" as textBuild;
 
+@import 'cssfabric-config';
 
-$config: cssfabric-config.$cssfabric-config;
-/* cssFabric vars */
-
-$tru: utils.get_fabric_conf('themes','light');
-
-// COLOR config
-$color-config: color-vars.$color-config;
-// COLOR SCHEMES
-$color-schemes: map-get($color-config, scheme);
-// COLOR PALETTE
-$color-palette: map-get($color-config, palette);
-// COLOR TYPES
-$color-types-config: map-get($color-config, color-types-config);
-
-$themes: map-get($config, themes) !default;
+$themes: map-get($cssfabric-config, themes) !default;
 $theme-light: map-get($themes, light) !default;
 $theme-dark: map-get($themes, dark) !default;
 
-// GRAYS
-$gray-config: map-get($color-config, gray-config) !default;
-$color-gray-start: map-get($gray-config, start) !default;
-$color-gray-end: map-get($gray-config, end) !default;
-$color-gray-steps: map-get($gray-config, steps) !default;
-$gray-schemes: utils.getGraySteps($color-gray-steps, $color-gray-start, $color-gray-end);
-
-
-// BOX config
-$box-config: box.$box-config;
-
-$box-shadows-steps: map-get($box-config, shadows-steps) !default;
-$box-shadows-step-multiplier: map-get($box-config, shadows-step_multiplier) !default;
-$box-shadow-shorthand-config: map-get($box-config, shadow-shorthand-config) !default;
-
+/* cssFabric vars yes */
 :root {
-
-  @include themeBuild.themeCssVars();
-
-  --theme-color-foreground: #{map-get($theme-light, foreground)};
-  --theme-color-text: #{map-get($theme-light, foreground)};
-  --theme-color-background: #{map-get($theme-light, background)};
-  --theme-color-paper: #{map-get($theme-light, paper)};
-
-  --theme-color-border: rgba(208, 191, 151, 0.3);
-  --theme-color-overlay: rgba(208, 191, 151, 0.2);
-
-  /* color-scheme */
-  @each $type-key, $type-prop in $color-schemes {
-    --color-scheme-#{$type-key} : #{$type-prop};
-    --color-scheme-#{$type-key}-light: #{utils.applyColorEffect('light',$type-prop)};
-    --color-scheme-#{$type-key}-dark: #{utils.applyColorEffect('dark',$type-prop)};
-  }
-
-  /* color-palette */
-  @each $type-key, $type-prop in $color-palette {
-    /* color-palette #{$type-key} */
-    --color-palette-#{$type-key} : #{$type-prop};
-
-    --color-palette-#{$type-key}-lighter: #{utils.applyColorEffect('lighter',$type-prop)};
-    --color-palette-#{$type-key}-light: #{utils.applyColorEffect('light',$type-prop)};
-    --color-palette-#{$type-key}-dark: #{utils.applyColorEffect('dark',$type-prop)};
-    --color-palette-#{$type-key}-darker: #{utils.applyColorEffect('darker',$type-prop)};
-    --color-palette-#{$type-key}-complement: #{utils.applyColorEffect('complement',$type-prop)};
-    --color-palette-#{$type-key}-invert: #{utils.applyColorEffect('invert',$type-prop)};
-
-    --color-palette-#{$type-key}-alpha-low: #{color.change($type-prop,$alpha:0.8)};
-    --color-palette-#{$type-key}-alpha-mid: #{color.change($type-prop,$alpha:0.3)};
-    --color-palette-#{$type-key}-alpha-high: #{color.change($type-prop,$alpha:0.1)};
-  }
-
-  /* grays */
-  @each $type-key, $type-prop in $gray-schemes {
-    --color-gray-#{$type-key} : #{$type-prop};
-    --color-gray-#{$type-key}-alpha-low: #{color.change($type-prop,$alpha:0.8)};
-  }
-
-  /* shadows */
-  @include boxBuild.shadowsCssVars();
+  @include themeBuild.themeCssVars($theme-color-primary,$theme-color-secondary,$theme-color-tertiary);
+  @include colorBuild.buildColorCssVars();
   /* boxes */
   @include boxBuild.pmbCssVars();
   /* text */
   @include textBuild.textCssVars();
 
-}
+  /* shadows */
+  @include boxBuild.shadowsCssVars();
+  /* themes */
+  @include themeBuild.themeBaseVars($theme-light);
 
-/*[data-theme="light"] {
+  &,[data-theme="light"] {
+    @include themeBuild.themeBaseVars($theme-light);
 
-  --theme-color-foreground: #{map-get($theme-light, foreground)};
-  --theme-color-text: #{map-get($theme-light, foreground)};
-  --theme-color-background: #{map-get($theme-light, background)};
-  --theme-color-paper: #{map-get($theme-light, paper)};
+    --theme-color-border:  #{color.change(map-get($theme-light, paper),$alpha:0.2)};
+    --theme-color-overlay: rgba(208, 191, 151, 0.2);
+  }
 
-  --theme-color-border: var(--theme-color-primary-alpha-mid);
-  --theme-color-overlay: '';
-}*/
+  [data-theme="dark"] {
+    @include themeBuild.themeBaseVars($theme-dark);
+
+    --theme-color-border:  #{color.change(map-get($theme-dark, paper),$alpha:0.2)};
+    --theme-color-overlay: rgba(255, 255, 255, 0.1);
+  }
+}
 
-[data-theme="dark"] {
 
-  --theme-color-foreground: #{map-get($theme-dark, foreground)};
-  --theme-color-text: #{map-get($theme-dark, foreground)};
-  --theme-color-background: #{map-get($theme-dark, background)};
-  --theme-color-paper: #{map-get($theme-dark, paper)};
 
-  --theme-color-border: rgba(255, 255, 255, 0.2);
-  --theme-color-overlay: rgba(255,255,255,0.1);
-}
 
 
 

package/webpack.config.js

@@ -25,6 +25,7 @@ module.exports = {
             loader: "sass-loader",
             options: {
               sourceMap: isDevelopment,
+              sassOptions: { quietDeps: true },
             },
           },
         ],
@@ -39,6 +40,7 @@ module.exports = {
             loader: "sass-loader",
             options: {
               sourceMap: isDevelopment,
+              sassOptions: { quietDeps: true },
             },
           },
         ],