@medyll/cssfabric 0.1.0 → 0.1.1

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,31 +51,11 @@ $scale-metadata: (
         description: "cssfabric scale module to set dimensions and ratios on all html elements"
 );
 
-$scale-config: (
-        weight-config: 1em,
-        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
-        ),
-        cssProps:$_cssProps
-);
+$scale-font-weight-config: 1em;
+$scale-grid-ratios-config: $scale-grid-ratios-config;
+$scale-defined-step-size: 2;
+$scale-defined-step-unit: rem;
+$scale-grid-ratios-config: $scale-grid-ratios-config;
 
 
 $scale-docs: (
@@ -64,11 +64,10 @@ $scale-docs: (
                         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

@@ -3,6 +3,7 @@
 @use "../../_utils";
 @use "sass:color";
 
+$config: cssfabric-config.$cssfabric-config;
 $theme-config: theme-vars.$theme-config;
 
 // COLOR THEME
@@ -18,18 +19,22 @@ $color-tertiary: map-get($color-themes, tertiary);
 
 $declinations-config: map-get($theme-config, declinations-config);
 
+$themes: map-get($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,14 +45,27 @@ $declinations-config: map-get($theme-config, declinations-config);
   }
 }
 
+@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 primary colors*/
   --theme-color-primary: #{$color-primary};
   @each $theme-level in $theme-levels {
     --theme-color-primary-#{$theme-level}: #{utils.applyColorEffect($theme-level,$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: #{color.change($color-primary,$alpha:0.3)};
   --theme-color-primary-alpha-high: #{color.change($color-primary,$alpha:0.1)};
 
   /* theme secondary colors*/
@@ -56,7 +74,7 @@ $declinations-config: map-get($theme-config, declinations-config);
     --theme-color-secondary-#{$theme-level}: #{utils.applyColorEffect($theme-level,$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: #{color.change($color-secondary,$alpha:0.3)};
   --theme-color-secondary-alpha-high: #{color.change($color-secondary,$alpha:0.1)};
 
   /* theme tertiary colors*/
@@ -65,12 +83,11 @@ $declinations-config: map-get($theme-config, declinations-config);
     --theme-color-tertiary-#{$theme-level}: #{utils.applyColorEffect($theme-level,$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: #{color.change($color-tertiary,$alpha:0.3)};
   --theme-color-tertiary-alpha-high: #{color.change($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/vars.scss

@@ -2,6 +2,7 @@
 @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;
@@ -9,110 +10,42 @@
 
 
 $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;
 $theme-light: map-get($themes, light) !default;
 $theme-dark: map-get($themes, dark) !default;
 
-// GREYS
-$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 */
 :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 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);
-}