@medyll/cssfabric 0.1.0 → 0.1.1

package/src/cssfabric/modules/box/_box-build.scss

@@ -1,44 +1,39 @@
 @use "sass:map";
 @use "sass:math";
 @use '../../_utils';
-@use "../cssfabric-config" as fabricConfig;
+@use "../cssfabric-config";
 @use "box-vars" as box;
 
-$fabric-config: fabricConfig.$cssfabric-config;
+$fabric-config: cssfabric-config.$cssfabric-config;
 $box-config: box.$box-config;
 $box-docs: box.$box-docs;
 
-$cssProps: map-get($box-config, cssProps);
-$box-border-shorthands: map-get($cssProps, borderShorthands);
-$box-position-props: map-get($cssProps, positionProps);
-$box-display-props: map-get($cssProps, displayProps);
+$box-border-shorthands: box.$box-border-shorthands;
+$box-position-props: box.$box-position-shorthands;
+$box-display-props: box.$box-display-shorthands;
 
-$box-unit-config: map-get($box-config, unit-config);
-$box-border-unit-config: map-get($box-config, border-unit-config);
-$box-unit-size-config: map-get($box-config, unit-size-config);
-$box-unit-border-size-config: map-get($box-config, unit-border-size-config);
-$box-sizes-config: map-get($box-config, sizes-config);
-$box-border-sizes-px-config: map-get($box-config, border-sizes-px-config);
+$box-unit-config: box.$box-unit-config;
+$box-border-unit-config: box.$box-border-unit-config;
+$box-unit-size-config: box.$box-unit-size-config;
+$box-unit-border-size-config: box.$box-unit-border-size-config;
+$box-sizes-config: box.$box-sizes-config;
+$box-border-sizes-px-config: box.$box-sizes-border-config;
 
-$box-position-shorthand-config: map-get($box-config, position-shorthand-config) !default;
-$box-display-shorthand-config: map-get($box-config, display-shorthand-config) !default;
-$box-shadow-shorthand-config: map-get($box-config, shadow-shorthand-config) !default;
+$box-position-shorthand-config: cssfabric-config.$box-position-shorthand !default;
+$box-display-shorthand-config: cssfabric-config.$box-display-shorthand !default;
+$box-shadow-shorthand-config: cssfabric-config.$box-shadow-shorthand !default;
 
-$box-border-shorthand-config: map-get($box-config, border-shorthand-config) !default;
-$box-padding-shorthand-config: map-get($box-config, padding-shorthand-config) !default;
-$box-margin-shorthand-config: map-get($box-config, margin-shorthand-config) !default;
+$box-border-shorthand-config: cssfabric-config.$box-border-shorthand !default;
+$box-padding-shorthand-config: cssfabric-config.$box-padding-shorthand !default;
+$box-margin-shorthand-config: cssfabric-config.$box-margin-shorthand !default;
 
-$box-shadows-steps: map-get($box-config, shadows-steps) !default;
-$box-shadows-step-multiplier: map-get($box-config, shadows-step_multiplier) !default;
+$box-shadows-steps: box.$box-shadows-steps !default;
+$box-shadows-step-multiplier: box.$box-shadows-step-multiplier !default;
 
-$box-radius: map-get($fabric-config, border-radius);
-
-$css-shorthands: (
-        border: $box-border-shorthand-config,
-        padding: $box-padding-shorthand-config,
-        margin: $box-margin-shorthand-config
-);
+$box-radius: cssfabric-config.$box-radius;
+$box-unit-presets: cssfabric-config.$box-unit-presets;
 
+$densities-ratios : cssfabric-config.$densities-ratios;
 
 // adding {border}-{r} shorthand css rule for .{border}-{r}-1
 @function raw_size_tag_rule($condition) {
@@ -49,74 +44,94 @@ $css-shorthands: (
   }
 }
 
-@function write-box-rule($_args) {
-  $rule_value: map-get($_args, rule_value);
-  $rule_type: map-get($_args, rule_type);
-  $css_prop: map-get($_args, css_prop);
-  $grid_size_value: map-get($_args, grid_size_value);
-
-  $computed_value: "";
-
-
-  //
-  @if ($css_prop== "padding" or $css_prop== "margin") {
-    $computed_value: var(--box-unit-#{$grid_size_value});
-  }
-
-  // complex write method: 1px value
-  @if ($css_prop== "border") {
-    $computed_value: $rule_value + " solid #ccc";
-  }
-
-  @return $computed_value;
-}
-
+// support ratios
+// for paddings margins positions
 @mixin pmbCssVars() {
   $iterator: $box-sizes-config;
   @for $grid_size_value from 0 through $iterator {
     $css_size_value: ($grid_size_value * $box-unit-size-config) + $box-unit-config;
-    --box-unit-#{$grid_size_value} : #{$css_size_value};
+    --box-density-#{$grid_size_value} : #{$css_size_value};
+  }
+
+  // presets
+  @each $preset, $preset-value in $box-unit-presets{
+    $value: ($preset-value * $box-unit-size-config) + $box-unit-config;
+    --box-density-preset-#{$preset}: #{$value};
+  }
+
+  // $ratios: tiny small medium large full
+  @each $ratio, $val in $densities-ratios {
+    [density=#{$ratio}] {
+      @for $grid_size_value from 0 through $iterator {
+        $css_size_value: (($grid_size_value * $box-unit-size-config)*$val) + $box-unit-config;
+        --box-density-#{$grid_size_value} : #{$css_size_value};
+      }
+      // presets
+      @each $preset, $preset-value in $box-unit-presets{
+        $value: (($preset-value * $box-unit-size-config)*$val) + $box-unit-config;
+        --box-density-preset-#{$preset}: #{$value};
+      }
+    }
   }
 }
 
-// prop : ...top bottom for  border | margin | padding
+//  border
 @mixin fabric-pmb($fabric_box_position_prop, $fabric_box_position_prop_short) {
   @each $fabric_box_pmb_side_shorthand, $rule in $box-border-shorthands {
-    $iterator: if($fabric_box_position_prop== border, $box-border-sizes-px-config, $box-sizes-config);
-    $unit: if($fabric_box_position_prop== border, $box-border-unit-config, $box-unit-config);
-    // box_unit_border_size
-    $unit_size: if($fabric_box_position_prop== border, $box-unit-border-size-config, $box-unit-size-config);
 
-    // css property name
-    // remove _ is present
+    // remove _ if present
     $shorthand: if($fabric_box_pmb_side_shorthand== "_", "", -#{$fabric_box_pmb_side_shorthand});
 
     .#{$fabric_box_position_prop_short}#{$shorthand} {
-      // todo use utils.getBoxIterator
-      @for $grid_size_value from 1 through $iterator {
-        $css_size_value: ($grid_size_value * $unit_size) + $unit;
+
+      @for $grid_size_value from 1 through $box-border-sizes-px-config {
+        $css_size_value: ($grid_size_value * $box-unit-border-size-config) + $box-border-unit-config;
         // css property name is aggregated with size value $i
+
+        $computed_value: $css_size_value + " solid #ededed";
+
         #{raw_size_tag_rule($grid_size_value)} &-#{$grid_size_value} {
-          @if length($rule) ==4 {
-            $_args: (
-                    rule_value: $css_size_value,
-                    rule_type: "pmb",
-                    css_prop: $fabric_box_position_prop,
-                    grid_size_value: $grid_size_value
-            );
-
-            #{$fabric_box_position_prop}: write-box-rule($_args);
+          @if length($rule) == 4 {
+            #{$fabric_box_position_prop}: #{$computed_value};
           } @else {
 
             @each $rule_value in $rule {
-              $_args: (
-                      rule_value: $css_size_value,
-                      rule_type: "pmb",
-                      css_prop: $fabric_box_position_prop,
-                      grid_size_value: $grid_size_value
-              );
-
-              #{$fabric_box_position_prop}-#{$rule_value}: write-box-rule($_args);
+              #{$fabric_box_position_prop}-#{$rule_value}: #{$computed_value};
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// prop : ... margin | padding
+@mixin fabric-pm($fabric_box_position_prop, $fabric_box_position_prop_short) {
+  @each $fabric_box_pmb_side_shorthand, $rule in $box-border-shorthands {
+
+    $shorthand: if($fabric_box_pmb_side_shorthand== "_", "", -#{$fabric_box_pmb_side_shorthand});
+
+    .#{$fabric_box_position_prop_short}#{$shorthand} {
+
+      // presets
+      @each $preset, $preset-value in $box-unit-presets{
+        .#{$fabric_box_position_prop_short}#{$shorthand}-#{$preset}{
+          #{$fabric_box_position_prop}: --box-density-preset-#{$preset};
+        }
+      }
+
+      @for $grid_size_value from 1 through $box-sizes-config {
+        $css_size_value: ($grid_size_value * $box-unit-size-config) + $box-unit-config;
+        // css property name is aggregated with size value $i
+
+        $computed_value: var(--box-density-#{$grid_size_value});
+
+        #{raw_size_tag_rule($grid_size_value)} &-#{$grid_size_value} {
+          @if length($rule) == 4 {
+            #{$fabric_box_position_prop}: #{$computed_value};
+          } @else {
+            @each $rule_value in $rule {
+              #{$fabric_box_position_prop}-#{$rule_value}: #{$computed_value};
             }
           }
         }
@@ -125,21 +140,25 @@ $css-shorthands: (
   }
 }
 
-// stupid, make three calls
 // pmb as padding margin border property
+// padding-tiny padding-small padding
 @mixin padding-margin-border($mq_key) {
-  @each $box_pmb_shorthand_value, $box_pmb_shorthand in $css-shorthands {
-    $shorthand: if($mq_key, #{$box_pmb_shorthand}-#{$mq_key}, #{$box_pmb_shorthand});
 
-    @include fabric-pmb($box_pmb_shorthand_value, $shorthand);
-  }
+  $shorthand: if($mq_key, #{$box-margin-shorthand-config}-#{$mq_key}, #{$box-margin-shorthand-config});
+  @include fabric-pm(margin, $shorthand);
+
+  $shorthand: if($mq_key, #{$box-padding-shorthand-config}-#{$mq_key}, #{$box-padding-shorthand-config});
+  @include fabric-pm(padding, $shorthand);
+
+  $shorthand: if($mq_key, #{$box-border-shorthand-config}-#{$mq_key}, #{$box-border-shorthand-config});
+  @include fabric-pmb(border, $shorthand);
+
 }
 
 // radius
 @mixin radius($mq_key) {
   $shorthand: if($mq_key, radius-#{$mq_key}, radius);
 
-  @debug $box-radius;
   /*radius*/
   @each $radius, $value in $box-radius {
     .#{$shorthand}-#{$radius} {
@@ -177,7 +196,7 @@ $css-shorthands: (
   @each $place in $places {
     @for $size from 0 through 8 {
       .#{$place}-#{$shorthand}#{$size} {
-        #{$place}: var(--box-unit-#{$size});
+        #{$place}: var(--box-density-#{$size});
       }
     }
   }

package/src/cssfabric/modules/box/_box-vars.scss

@@ -1,15 +1,16 @@
 @use '../../utils';
+@use "../cssfabric-config";
 
-$_unit-config: rem;
-$_border-unit-config: px;
-$_unit-size-config: 0.5;
-$_unit-border-size-config: 1;
+$box-unit-config: rem;
+$box-border-unit-config: px;
+$box-unit-size-config: 0.5;
+$box-unit-border-size-config: 1;
 
-$_sizes-config: 32;
-$_sizes-border-config: 5;
+$box-sizes-config: 12;
+$box-sizes-border-config: 3;
 
-$_shadows-steps: 5;
-$_shadows-step-multiplier: 2;
+$box-shadows-steps: 5;
+$box-shadows-step-multiplier: 2;
 
 $_shadows-v_fact: 2.4;
 $_shadows-h_fact: 1.16;
@@ -22,9 +23,9 @@ $shadow-factors: (
         h_fact:$_shadows-h_fact,
         v_fact_2:$_shadows-v_fact_2,
         h_fact_2:$_shadows-h_fact_2,
-);
+)!default;
 
-$_border-shorthands: (
+$box-border-shorthands: (
         _: top bottom left right,
         t: top,
         b: bottom,
@@ -34,17 +35,17 @@ $_border-shorthands: (
         u: bottom left right,
         ii: left right,
         tb: top bottom
-);
+)!default;
 
-$_position-props: (
+$box-position-shorthands: (
         abs: absolute,
         rel: relative,
         stat: static,
         fix: fixed,
         sticky: sticky
-);
+)!default;
 
-$_display-props: (
+$box-display-shorthands: (
         block: block,
         none: none,
         inline: inline,
@@ -63,25 +64,26 @@ $box-metadata: (
 );
 
 $box-config: (
-        unit-config: $_unit-config,
-        border-unit-config: $_border-unit-config,
-        unit-size-config: $_unit-size-config,
-        unit-border-size-config: $_unit-border-size-config,
-        sizes-config: $_sizes-config,
-        border-sizes-px-config: 5,
-        shadows-steps: $_shadows-steps,
-        shadows_step_multiplier: $_shadows-step-multiplier,
+        unit-config: $box-unit-config,
+        border-unit-config: $box-border-unit-config,
+        unit-size-config: $box-unit-size-config,
+        unit-border-size-config: $box-unit-border-size-config,
+        sizes-config: $box-sizes-config,
+        border-sizes-px-config: $box-sizes-border-config,
+        shadows-steps: $box-shadows-steps,
+        shadows_step_multiplier: $box-shadows-step-multiplier,
   //
-        position-shorthand-config: pos,
-        display-shorthand-config: dsp,
-        shadow-shorthand-config: shad,
-        border-shorthand-config: border,
-        padding-shorthand-config: pad,
-        margin-shorthand-config: marg,
+        position-shorthand-config: cssfabric-config.$box-position-shorthand,
+        display-shorthand-config: cssfabric-config.$box-display-shorthand,
+        shadow-shorthand-config:cssfabric-config.$box-shadow-shorthand,
+        border-shorthand-config: cssfabric-config.$box-border-shorthand,
+        padding-shorthand-config: cssfabric-config.$box-padding-shorthand,
+        margin-shorthand-config: cssfabric-config.$box-margin-shorthand,
+
         cssProps:(
-                borderShorthands: $_border-shorthands,
-                positionProps: $_position-props,
-                displayProps: $_display-props
+                borderShorthands: $box-border-shorthands,
+                positionProps: $box-position-shorthands,
+                displayProps: $box-display-shorthands
         )
 );
 
@@ -89,30 +91,30 @@ $box-config: (
 $box-docs: (
         attributes:(
                 padding: (
-                        tag: map-get($box-config, padding-shorthand-config),
-                        keys: utils.getObjectKeys($_border-shorthands),
-                        values: utils.getBoxIterator($_sizes-config, $_unit-config, $_unit-size-config),
-                        levels: ("_":utils.getObjectKeys(utils.getBoxIterator($_sizes-config, $_unit-config, $_unit-size-config))),
+                        tag:  cssfabric-config.$box-padding-shorthand,
+                        keys: utils.getObjectKeys($box-border-shorthands),
+                        values: utils.getBoxIterator($box-sizes-config, $box-unit-config, $box-unit-size-config),
+                        levels: ("_":utils.getObjectKeys(utils.getBoxIterator($box-sizes-config, $box-unit-config, $box-unit-size-config))),
                         about: "padding properties for html elements"
                 ),
                 margin: (
-                        tag: map-get($box-config, margin-shorthand-config),
-                        keys: utils.getObjectKeys($_border-shorthands),
-                        values: utils.getBoxIterator($_sizes-config, $_unit-config, $_unit-size-config),
-                        levels: ("_":utils.getObjectKeys(utils.getBoxIterator($_sizes-config, $_unit-config, $_unit-size-config))),
+                        tag: cssfabric-config.$box-margin-shorthand,
+                        keys: utils.getObjectKeys($box-border-shorthands),
+                        values: utils.getBoxIterator($box-sizes-config, $box-unit-config, $box-unit-size-config),
+                        levels: ("_":utils.getObjectKeys(utils.getBoxIterator($box-sizes-config, $box-unit-config, $box-unit-size-config))),
                         about: "margin properties for html elements"
                 ),
                 border: (
-                        tag: map-get($box-config, border-shorthand-config),
-                        keys: utils.getObjectKeys($_border-shorthands),
-                        values: utils.getBoxIterator($_sizes-border-config, $_border-unit-config, $_unit-border-size-config),
-                        levels: ("_":utils.getObjectKeys(utils.getBoxIterator($_sizes-border-config, $_border-unit-config, $_unit-border-size-config))),
+                        tag: cssfabric-config.$box-border-shorthand,
+                        keys: utils.getObjectKeys($box-border-shorthands),
+                        values: utils.getBoxIterator($box-sizes-border-config, $box-border-unit-config, $box-unit-border-size-config),
+                        levels: ("_":utils.getObjectKeys(utils.getBoxIterator($box-sizes-border-config, $box-border-unit-config, $box-unit-border-size-config))),
                         about: "border properties for html elements"
                 ),
                 shadow: (
-                        tag: map-get($box-config, shadow-shorthand-config),
-                        values: utils.getShadowIterator($shadow-factors, 8),
-                        levels:("_": utils.getObjectKeys(utils.getShadowIterator($shadow-factors, 8))
+                        tag: cssfabric-config.$box-shadow-shorthand,
+                        values: utils.getShadowIterator($shadow-factors, $box-shadows-steps),
+                        levels:("_": utils.getObjectKeys(utils.getShadowIterator($shadow-factors, $box-shadows-steps))
                         ),
                         about: "applying shadows give depth and levels to your design"
                 )

package/src/cssfabric/modules/color/_color-build.scss

@@ -1,28 +1,26 @@
 @use "sass:map";
-// load scss config file
-@use '../../_utils';
 @use 'color-vars';
 @use "sass:math";
+// load scss config file
+@use '../../_utils';
+@use '../cssfabric-config';
 
 $color-config: color-vars.$color-config;
 
 // COLOR TYPES
 $color-types-config: map-get($color-config, color-types-config);
-
 // COLOR SCHEMES
-$color-schemes: map-get($color-config, scheme);
-
+$color-schemes: map-get($color-config, scheme) !default;
 // COLOR PALETTE
-$color-palette: map-get($color-config, palette);
-
+$color-palette: map-get($color-config, palette) !default;
 // COLOR THEME 
-$color-theme: map-get($color-config, theme);
+$color-theme: map-get($color-config, theme) !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;
+$color-gray-start: cssfabric-config.$gray-start !default;
+$color-gray-end: cssfabric-config.$gray-end !default;
+$color-gray-steps: cssfabric-config.$gray-steps !default;
 $gray-schemes: utils.getGraySteps($color-gray-steps, $color-gray-start, $color-gray-end);
 
 @function text-contrast($n) {
@@ -37,6 +35,41 @@ $gray-schemes: utils.getGraySteps($color-gray-steps, $color-gray-start, $color-g
   @return $color;
 }
 
+@mixin buildColorCssVars() {
+
+  /* color-scheme primary secondary tertiary */
+  @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)};
+    @include utils.alphaTize(--color-scheme-#{$type-key}, $type-prop);
+  }
+
+  /* color-palette */
+  @each $type-key, $type-prop in $color-palette {
+    --color-palette-#{$type-key} : #{$type-prop};
+    @include utils.alphaTize(--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)};
+    @include utils.alphaTize(--color-palette-#{$type-key}-complement, utils.applyColorEffect('complement', $type-prop));
+
+    --color-palette-#{$type-key}-invert: #{utils.applyColorEffect('invert',$type-prop)};
+    @include utils.alphaTize(--color-palette-#{$type-key}-invert, utils.applyColorEffect('invert', $type-prop));
+    // backdrop-filter: blur(5px);
+  }
+
+  /* grays */
+  @each $type-key, $type-prop in $gray-schemes {
+    --color-gray-#{$type-key} : #{$type-prop};
+    @include utils.alphaTize(--color-gray-#{$type-key}, $type-prop);
+  }
+}
+
 @mixin colorFactory($tag_short, $color_prop) {
   $switch-tag_short: utils.getColorPropertyType($tag_short);
 
@@ -60,19 +93,18 @@ $gray-schemes: utils.getGraySteps($color-gray-steps, $color-gray-start, $color-g
   $prop: "";
 
   $property_key: #{$color-type-key}-#{$color-type} + if($mq-key, -#{$mq-key}, "");
-  /**
-  #{$color-type-key} ?
-   */
+
+
   .#{$property_key} {
-    @each $type-key, $type-prop in $color-type-list { 
+    @each $type-key, $type-prop in $color-type-list {
       &#{"-" + $type-key} {
 
         // border-color: ;
-        @if $color-type-key==border-color { 
-            border-color: utils.applyColorEffect('dark',$type-prop)!important;
+        @if $color-type-key==border-color {
+          border-color: utils.applyColorEffect('dark', $type-prop) !important;
         }
 
-        @if $color-type-key==color { // nope for gray
+        @if $color-type-key==foreground {
           color: $type-prop;
           @if $has-color-factory {
             @include colorFactory($color-type-key, $type-prop);
@@ -84,7 +116,7 @@ $gray-schemes: utils.getGraySteps($color-gray-steps, $color-gray-start, $color-g
           @if $has-color-factory {
             @include colorFactory($color-type-key, $type-prop);
           }
-        } 
+        }
 
         @if $color-type-key == "bg-themed" {
           color: text-contrast($type-prop);
@@ -100,9 +132,61 @@ $gray-schemes: utils.getGraySteps($color-gray-steps, $color-gray-start, $color-g
 }
 
 @mixin buildColor($mq_size_key:null) {
-  @each $color-type-key in $color-types-config {
-    @include fabricColors("palette", $color-palette, $color-type-key, $mq_size_key, true);
-    @include fabricColors("scheme", $color-schemes, $color-type-key, $mq_size_key);
-    @include fabricColors("grey", $gray-schemes, $color-type-key, $mq_size_key);
+  // "foreground"  ,
+  // "bg",
+  // "bg-themed",
+  // "border-color"
+
+  // $has-color-palette
+  @if ((cssfabric-config.$has-color-palette==true) or ($mq_size_key!=null and cssfabric-config.$has-color-palette-responsive==true)) {
+    // $has-color-foreground
+    @if (cssfabric-config.$has-color-foreground) {
+      @include fabricColors("palette", $color-palette, foreground, $mq_size_key, true);
+    }
+    // $has-color-bg
+    @if (cssfabric-config.$has-color-bg) {
+      @include fabricColors("palette", $color-palette, bg, $mq_size_key, true);
+    }
+    // $has-color-bg-themed
+    @if (cssfabric-config.$has-color-bg-themed) {
+      @include fabricColors("palette", $color-palette, bg-themed, $mq_size_key, true);
+    }
+    // $has-color-border
+    @if (cssfabric-config.$has-color-border) {
+      @include fabricColors("palette", $color-palette, border-color, $mq_size_key, true);
+    }
   }
+
+  // $has-color-scheme
+  @if ((cssfabric-config.$has-color-scheme==true) or ($mq_size_key!=null and cssfabric-config.$has-color-scheme-responsive==true)) {
+    @if (cssfabric-config.$has-color-foreground) {
+      @include fabricColors("scheme", $color-schemes, foreground, $mq_size_key, true);
+    }
+    @if (cssfabric-config.$has-color-bg) {
+      @include fabricColors("scheme", $color-schemes, bg, $mq_size_key, true);
+    }
+    @if (cssfabric-config.$has-color-bg-themed) {
+      @include fabricColors("palette", $color-schemes, bg-themed, $mq_size_key, true);
+    }
+    @if (cssfabric-config.$has-color-border) {
+      @include fabricColors("scheme", $color-schemes, border-color, $mq_size_key);
+    }
+  }
+
+  // $has-color-gray
+  @if ((cssfabric-config.$has-color-gray==true) or ($mq_size_key!=null and cssfabric-config.$has-color-gray-responsive==true)) {
+    @if (cssfabric-config.$has-color-foreground) {
+      @include fabricColors("grey", $gray-schemes, foreground, $mq_size_key, true);
+    }
+    @if (cssfabric-config.$has-color-bg) {
+      @include fabricColors("grey", $gray-schemes, bg, $mq_size_key, true);
+    }
+    @if (cssfabric-config.$has-color-bg-themed) {
+      @include fabricColors("palette", $gray-schemes, bg-themed, $mq_size_key, true);
+    }
+    @if (cssfabric-config.$has-color-border) {
+      @include fabricColors("grey", $gray-schemes, border-color, $mq_size_key);
+    }
+  }
+
 }

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);