@medyll/cssfabric 0.2.0 → 0.2.1-beta.2

package/dist/scss/modules/table/table-responsive.scss

@@ -0,0 +1,24 @@
+
+// load scss config file
+@use '../../_utils';
+@use '_table-build' as build; 
+@use "../cssfabric-config";
+// load general config variables
+$config: cssfabric-config.$cssfabric-config;
+
+// load general config variables
+// media queries sizes, in rem
+$_media_quey_sizes: map-get($config, media_quey_sizes);
+
+// builder responsive  
+$min_value: 0;
+
+@each $mq_size_key,
+$mq_size_value in $_media_quey_sizes {
+    
+    @include utils.fabricResponsiveEncloser($mq_size_value,$min_value) {
+        @include build.buildTable($mq_size_key);
+    }
+    $min_value: $mq_size_value; 
+}
+    

package/dist/scss/modules/table/table.scss

@@ -0,0 +1,8 @@
+
+
+// load scss config file
+@use '../../_utils';
+@use '_table-build' as build; 
+
+
+@include build.buildTable(null); 

package/dist/scss/modules/text/_text-build.scss

@@ -0,0 +1,166 @@
+@use 'text-vars';
+@use "../cssfabric-config";
+@use '../../_utils';
+@use "sass:math";
+
+// load general config variables
+$cssfabric-config: cssfabric-config.$cssfabric-config;
+$sep: map-get($cssfabric-config, sep);
+
+$text-config: text-vars.$text-config;
+$moduleName: map-get($text-config, moduleName);
+$moduleNameShort: map-get($text-config, moduleNameShort);
+
+$cssProps: map-get($text-config, cssProps);
+$color-schemes: map-get($text-config, scheme);
+$color-palette-props: map-get($text-config, palette);
+
+$gray-list: map-get($text-config, gray);
+
+$textTransform: map-get($cssProps, textTransform);
+$fontWeight: map-get($cssProps, fontWeight);
+$textAlign: map-get($cssProps, textAlign);
+
+$font-size-unit-config: map-get($text-config, font-size-unit-config) !default;
+$font-size-h-steps: map-get($text-config, title-size-declination-config) !default;
+$font-size-h-max-config: map-get($text-config, font-sizes-h1-rem-config) !default;
+$font-size-h-min-config: map-get($text-config, font-size-h-min-rem-config) !default;
+
+$size-diff: $font-size-h-max-config - $font-size-h-min-config;
+$steps: $font-size-h-steps - 1;
+
+$step-size: math.div($size-diff, $steps);
+
+@mixin fabric_text($tag_short) {
+
+  $acc: 1 - $step-size ;
+
+  .#{$tag_short}-ellipsis {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  @for $size-index from 1 through $font-size-h-steps {
+    //
+    $acc: (( $font-size-h-steps - $size-index) * $step-size) + 1;
+
+    .h#{$size-index},
+    h#{$size-index} {
+      font-size: var(--font-size-h#{$size-index});
+      line-height: 1.2;
+      font-weight: 400;
+    }
+  }
+
+
+}
+
+@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}));
+    }
+  }
+}
+
+@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}));
+    }
+  }
+}
+
+@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}));
+    }
+  }
+}
+
+@mixin textCssVars() {
+  /*Hs*/
+  @for $size-index from 1 through $font-size-h-steps {
+    $acc: (( $font-size-h-steps - $size-index) * $step-size) + 1;
+    --font-size-h#{$size-index}: #{$acc + $font-size-unit-config};
+  }
+  /*weight*/
+  @each $fabricRule, $value in $fontWeight {
+    --font-weight-#{$fabricRule}: #{$value};
+  }
+  /*text shadows color_schemes*/
+  @each $fabricRule, $value in $color-schemes {
+    $cast-value: 0 0 0.125em #{$value};
+    --text-shadow-#{$fabricRule}: #{$cast-value};
+  }
+  /*text-shadows color_palette */
+  @each $fabricRule, $value in $color-palette-props {
+    $cast-value: 0 0 0.125em #{$value};
+    --text-shadow-#{$fabricRule}: #{$cast-value};
+  }
+}
+
+
+@mixin buildText($mq_size_key: null) {
+
+  $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/dist/scss/modules/text/_text-vars.scss

@@ -0,0 +1,87 @@
+@use '../../_utils';
+
+$cssProps: (
+        text-transform: (
+                cap: capitalize,
+                up: uppercase,
+                low: lowercase,
+                none: none,
+                full: full-width
+        ),
+        font-weight: (
+                50: 50,
+                100: 100,
+                300: 400,
+                500: 500,
+                900: 900,
+                light: lighter,
+                cap: normal,
+                bold: bold,
+                bolder: bolder
+        ),
+        text-align: (
+                l: left,
+                r: right,
+                center: center,
+                justify: justify
+        ),
+        text-shadow: (
+                palette:(primary, secondary)
+        )
+);
+
+$text-metadata: (
+        title: text,
+        tag: text,
+        description: "cssfabric text module to set text style on all html elements"
+);
+
+$text-config: (
+        moduleName: text,
+        moduleNameShort: text,
+        title-size-declination-config: 6,
+        font-size-unit-config: rem,
+        font-sizes-h1-rem-config: 3.1,
+        font-size-h-min-rem-config: 1,
+        text-ellipsis-tag-config: ellipsis,
+        cssProps: (
+                textTransform: (
+                        cap: capitalize,
+                        up: uppercase,
+                        low: lowercase,
+                        none: none,
+                        full: full-width
+                ),
+                fontWeight: map-get($cssProps, "font-weight"),
+                textAlign: map-get($cssProps, "text-align")
+        ),
+        scheme: utils.get_fabric_conf(scheme),
+        palette: utils.get_fabric_conf(palette),
+        gray: utils.get_fabric_conf(gray)
+);
+
+$text-docs: (
+        attributes: (
+                text-transform: (
+                        tag: text,
+                        keys: utils.getObjectKeys(map-get($cssProps, text-transform))
+                ),
+                font-weight: (
+                        tag: text,
+                        keys: utils.getObjectKeys(map-get($cssProps, font-weight))
+                ),
+                text-align: (
+                        tag: text,
+                        keys: utils.getObjectKeys(map-get($cssProps, text-align))
+                ),
+                text-shadow: (
+                        tag: text-shad,
+                        keys: utils.getObjectKeys(map-get($cssProps, text-shadow))
+                )
+        ),
+        classNames: (
+                "_": (
+                      et:  "ellipsis"
+                )
+        )
+);

package/dist/scss/modules/text/text-responsive.scss

@@ -0,0 +1,26 @@
+
+@use "sass:map";
+// load scss config file
+@use '../../_utils'; 
+@use '_text-build' as build;
+@use "../cssfabric-config";
+// load general config variables
+$config: cssfabric-config.$cssfabric-config;
+
+// load general config variables
+// media queries sizes, in rem
+$_media_quey_sizes: map-get($config, media_quey_sizes);
+
+// builder responsive  
+$min_value: 0;
+
+@each $mq_size_key,
+$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/dist/scss/modules/text/text.scss

@@ -0,0 +1,6 @@
+ 
+@use '_text-build' as build; 
+
+@include build.buildText(null);
+
+

package/dist/scss/modules/theme/_theme-build.scss

@@ -0,0 +1,128 @@
+@use "../../_utils";
+@use "sass:color";
+@use "theme-vars";
+
+@import "theme-vars";
+@import "../cssfabric-config";
+
+// COLOR THEME
+$moduleNameShort: map-get($theme-config, moduleNameShort);
+// 
+$theme-levels: map-get($theme-config, theme-level-config);
+$theme-properties-apply-config: map-get($theme-config, theme-properties-apply-config);
+
+
+$declinations-config: map-get($theme-config, declinations-config);
+
+@mixin fabric_theme($mq_size_key: null) {
+  // 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});
+
+          @include utils.fabricAttributes("&-", $theme-level, #{$switch-tag-type}, $newColor);
+        }
+      }
+    }
+  }
+  .theme-text-color, .theme-foreground-color {
+    color: var(--theme-color-text);
+  }
+
+  .theme-foreground-color-alpha {
+    color: var(--theme-color-foreground-alpha);
+  }
+  .theme-foreground-color-alpha-low {
+    color: var(--theme-color-foreground-alpha-low);
+  }
+  .theme-foreground-color-alpha-high {
+    color: var(--theme-color-foreground-alpha-high);
+  }
+
+  .theme-bg{
+    background-color: var(--theme-color-background);
+  }
+  .theme-bg-alpha{
+    background-color: var(--theme-color-background-alpha);
+  }
+  .theme-bg-alpha-low{
+    background-color: var(--theme-color-background-alpha-low);
+  }
+  .theme-bg-alpha-high{
+    background-color: var(--theme-color-background-alpha-high);
+  }
+
+  .theme-bg-paper{
+    background-color: var(--theme-color-paper);
+  }
+
+  .theme-bg-paper-alpha{
+    background-color: var(--theme-color-paper-alpha);
+  }
+
+  .theme-bg-paper-alpha-low{
+    background-color: var(--theme-color-paper-alpha-low);
+  }
+
+  .theme-bg-paper-alpha-high{
+    background-color: var(--theme-color-paper-alpha-high);
+  }
+}
+
+@mixin themeBaseVars($theme-color-foreground,$theme-color-background,$theme-color-paper) {
+  /* theme base colors*/
+  --theme-color-text: #{$theme-color-foreground};
+  --theme-color-foreground: #{$theme-color-foreground};
+
+  @include utils.alphaTize(--theme-color-foreground, $theme-color-foreground);
+  --theme-color-background: #{$theme-color-background};
+  @include utils.alphaTize(--theme-color-background, $theme-color-background);
+  --theme-color-paper: #{$theme-color-paper};
+  @include utils.alphaTize(--theme-color-paper, $theme-color-paper);
+}
+
+ /* primary,secondary with alphas */
+@mixin themeCssVars($theme-color-primary,$theme-color-secondary,$theme-color-tertiary) {
+
+  /* theme primary colors*/
+  --theme-color-primary: #{$theme-color-primary};
+  @each $theme-level in $theme-levels {
+    --theme-color-primary-#{$theme-level}: #{utils.applyColorEffect($theme-level,$theme-color-primary)};
+  }
+
+  --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: #{$theme-color-secondary};
+  @each $theme-level in $theme-levels {
+    --theme-color-secondary-#{$theme-level}: #{utils.applyColorEffect($theme-level,$theme-color-secondary)};
+  }
+  --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: #{$theme-color-tertiary};
+  @each $theme-level in $theme-levels {
+    --theme-color-tertiary-#{$theme-level}: #{utils.applyColorEffect($theme-level,$theme-color-tertiary)};
+  }
+  --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);
+}

package/dist/scss/modules/theme/_theme-vars.scss

@@ -0,0 +1,46 @@
+@use '../../utils' as utils;
+@import "../cssfabric-config";
+
+
+
+$_declinations-config: (primary, secondary, 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);
+
+
+$theme-metadata: (
+        "title": "theme",
+        "description": ""
+);
+
+$_theme-levels-obj: (_ light lighter dark darker complement invert);
+$_declinations-config-object: (primary:$_theme-levels-obj, secondary:$_theme-levels-obj, tertiary:$_theme-levels-obj);
+
+
+$theme-config: (
+        moduleName: theme,
+        moduleNameShort: theme,
+        color-default-config: (
+                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, $theme-color-primary)
+);
+
+$theme-docs: (attributes:(
+        theme:(
+                tag: theme,
+                keys: $_theme-properties-apply,
+                levels: $_declinations-config-object
+        )
+));

package/dist/scss/modules/theme/theme.scss

@@ -0,0 +1,6 @@
+ 
+@use '_theme-build' as build; 
+
+@include build.buildTheme(null);
+
+

package/dist/scss/modules/vars.scss

@@ -0,0 +1,46 @@
+@use "../_utils";
+@use "sass:color";
+@use "./color/color-vars";
+@use "./color/color-build" as colorBuild;
+@use "./box/box-build" as boxBuild;
+@use "./theme/theme-build" as themeBuild;
+@use "./text/text-build" as textBuild;
+
+@import "cssfabric-config";
+
+/* 
+cssFabric vars
+*/
+:root {
+  /* --theme-color-primary|*-alpha-|*  */
+  @include themeBuild.themeCssVars($theme-color-primary, $theme-color-secondary, $theme-color-tertiary);
+
+  @include colorBuild.buildColorCssVars();
+  /* text */
+  @include textBuild.textCssVars();
+  /* boxes */
+  @include boxBuild.pmbCssVars();
+  /* shadows */
+  @include boxBuild.shadowsCssVars();
+
+  // @include themeBuild.themeBaseVars($theme-color-foreground, $theme-color-background, $theme-color-paper);
+
+  &,
+  [data-theme="light"] {
+    @include themeBuild.themeBaseVars($theme-color-foreground, $theme-color-background, $theme-color-paper);
+
+    --theme-color-border: #{color.change($theme-color-foreground, $alpha: 0.2)};
+    --theme-color-overlay: rgba($theme-color-foreground, 0.4);
+  }
+
+  [data-theme="dark"] {
+    @include themeBuild.themeBaseVars(
+      $theme-dark-color-foreground,
+      $theme-dark-color-background,
+      $theme-dark-color-paper
+    );
+
+    --theme-color-border: #{color.change($theme-dark-color-foreground, $alpha: 0.3)};
+    --theme-color-overlay: rgba($theme-dark-color-background, 0.4);
+  }
+}

package/dist/scss/modules/zindex/_zindex-vars.scss

@@ -0,0 +1,14 @@
+$zindex-metadata: (
+        title: zindex,
+        tag: zI,
+        description: "cssfabric zindex module to set z-index on all html elements",
+);
+$zindex-config: (
+        z_groups: (
+                a,
+                z
+        ),
+);
+$zindex-docs: (
+        z_groups: _,
+);

package/dist/scss/modules/zindex/zindex.scss

@@ -0,0 +1,15 @@
+
+@use 'zindex-vars';
+$zindex-config: zindex-vars.$zindex-config;
+// load scss config file
+@use '../../_utils';
+
+// read variables
+$z_groups: map-get($zindex-config, z_groups);
+
+
+@for $z_value from 0 through 10 {
+  .zI-#{$z_value} {
+    z-index: (($z_value) * 100);
+  }
+}