@medyll/cssfabric 0.1.0 → 0.2.0

package/src/cssfabric/modules/scale/scale.scss

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

package/src/cssfabric/modules/table/_table-build.scss

@@ -1,134 +0,0 @@
-@use 'table-vars';
-@use '../../_utils';
-
-$table-config: table-vars.$table-config;
-
-$TABLE_PREFIX: map-get($table-config, table_class_name);
-$TABLE_PREFIX_SHORT: map-get($table-config, table_class_name_short);
-
-$table_bg_color_head: map-get($table-config, table-bg-color-head);
-$table_bg_color_strip_main: map-get($table-config, table-bg-color-strip-main);
-$table_bg_color_strip_second: map-get($table-config, table-bg-color-strip-second);
-
-$table_border_color_header: map-get($table-config, table-border-color-header);
-$table_border_color_main: map-get($table-config, table-border-color-main);
-$table_border_color_second: map-get($table-config, table-border-color-second);
-
-//  .table-bg-strip-2
-@mixin bg-strip($prefix_short,$nb_strips) {
-  &.#{$prefix_short}-bg-strip-#{$nb_strips} {
-    @for $nb_strip from 1 through $nb_strips {
-      tr:nth-child(#{$nb_strips}n + #{$nb_strip}) td {
-        @if ($nb_strip==$nb_strips) {
-          background-color: #{$table_bg_color_strip_main};
-        }
-
-        @if ($nb_strips%2==1 and $nb_strip%2==0 and $nb_strips > 2 and $nb_strip !=$nb_strips) {
-          // border-bottom: 10px solid black;
-        }
-      }
-    }
-  }
-}
-
-// .table-sticky
-@mixin sticky($table_prefix_short) {
-  &.#{$table_prefix_short}-sticky {
-    position: relative;
-
-    thead tr,
-    .thead .tr {
-      position: static;
-
-      th,
-      .th {
-        background-color: #ededed;
-        position: sticky;
-        top: 0;
-      }
-    }
-  }
-}
-// -layout -h-line -v-line border
-@mixin fabric_table($mq_size_key: null) {
-  /** cssfabric : #{$TABLE_PREFIX_SHORT}*/
-  $prefix_short: if($mq_size_key, #{$TABLE_PREFIX_SHORT}-#{$mq_size_key}, $TABLE_PREFIX_SHORT);
-
-  .#{$TABLE_PREFIX} {
-    border-collapse: collapse;
-    border-spacing: 0;
-
-    thead,
-    .thead {
-      position: relative;
-      margin-bottom:2rem;
-    }
-
-    &.#{$prefix_short}-head thead tr th {
-      background-color: #{table_bg_color_head};
-    }
-
-    thead tr th,
-    .thead .tr .th {
-      padding: 0.5rem 0.25rem;
-      font-weight: normal;
-    }
-
-    tbody tr td,
-    .tbody .tr .td {
-      padding: 0.25em;
-    }
-
-    &.#{$prefix_short}-layout {
-      table-layout: fixed;
-    }
-
-    &.#{$prefix_short}-h-line {
-
-      th,
-      td,
-      .th,
-      .td {
-        border-bottom: 1px solid #{$table_border_color_main};
-      }
-
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-
-    &.#{$prefix_short}-v-line tr th,
-    &.#{$prefix_short}-v-line tr td {
-      border-right: 1px solid #{$table_border_color_main};
-
-      &:last-child {
-        border-right: none;
-      }
-    }
-
-    &.#{$prefix_short}-border {
-      border: 1px solid #{$table_border_color_main};
-    }
-
-    &.#{$prefix_short}-shad {
-      thead tr th {
-        box-shadow: 4px 4px 8px #ccc;
-        z-index: 11;
-
-        &:last-child {
-          box-shadow: 4px 4px 8px #ccc;
-          z-index: -1;
-        }
-      }
-    }
-
-    @include bg-strip($prefix_short, 2);
-    @include bg-strip($prefix_short, 5);
-
-    @include sticky($prefix_short);
-  }
-}
-
-@mixin buildTable($mq_size_key: null) {
-  @include fabric_table($mq_size_key);
-}

package/src/cssfabric/modules/table/_table-vars.scss

@@ -1,30 +0,0 @@
-$table-metadata: (
-        title: table,
-        tag: table,
-        description: "cssfabric table module to set different table styles"
-);
-$table-config: (
-        className: table,
-        classNameShort: tbl,
-        table_class_name: table,
-        table_class_name_short: tbl,
-        table-bg-color-head: #f4f4f4,
-        table-bg-color-strip-main: #ededed,
-        table-bg-color-strip-second: #f5f5f5,
-        table-border-color-header: #ccc,
-        table-border-color-main: #ededed,
-        table-border-color-second: #f5f5f5
-);
-
-$table-docs: (
-        attributes:(
-                table: (
-                        tag: table,
-                        classNames:(
-                                "_": (bg-strip-2 bg-strip-5),
-                                "_pos": (sticky layout),
-                                "_deco": (h-line v-line border),
-                        ),
-                        about: "is a table"
-                )
-        ));

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

@@ -1,24 +0,0 @@
-
-// 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/src/cssfabric/modules/table/table.scss

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

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

@@ -1,109 +0,0 @@
-@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;
-    }
-  }
-
-  .#{$tag_short} {
-    @each $fabricRule, $value in $textTransform {
-      @include utils.fabricAttributes("&" + $sep, $fabricRule, "text-transform", $value);
-    }
-
-    @each $fabricRule, $value in $textAlign {
-      @include utils.fabricAttributes("&" + $sep, $fabricRule, "text-align", $value);
-    }
-
-    @each $fabricRule, $value in $fontWeight {
-      @include utils.fabricAttributes("&" + $sep, $fabricRule, "font-weight", var(--font-weight-#{$fabricRule}));
-    }
-
-    // text shadows color_schemes
-    @each $fabricRule, $value in $color-schemes {
-      @include utils.fabricAttributes("&" + $sep + shad + $sep, $fabricRule, "text-shadow",  var(--text-shadow-#{$fabricRule}));
-    }
-
-    // text shadows color_palette_props
-    @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);
-}

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

@@ -1,87 +0,0 @@
-@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/src/cssfabric/modules/text/text-responsive.scss

@@ -1,25 +0,0 @@
-
-@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/src/cssfabric/modules/text/text.scss

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

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

@@ -1,76 +0,0 @@
-@use "theme-vars";
-@use "../cssfabric-config";
-@use "../../_utils";
-@use "sass:color";
-
-$theme-config: theme-vars.$theme-config;
-
-// COLOR THEME
-$moduleNameShort: map-get($theme-config, moduleNameShort);
-//
-$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);
-
-@mixin fabric_theme($mq_size_key: null) {
-  // loop on each color grades
-  @each $color-grade in $declinations-config {
-
-    @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});
-
-      $switch-tag-type: utils.getColorPropertyType($text-or-bg-or-border);
-
-      .#{$moduleNameShort}-#{$property_key}-#{$color-grade} {
-        #{$switch-tag-type}: var(--theme-color-#{$color-grade});
-
-        @each $theme-level in $theme-levels {
-          $newColor: var(--theme-color-#{$color-grade}-#{$theme-level});
-
-          @include utils.fabricAttributes("&-", $theme-level, #{$switch-tag-type}, $newColor);
-        }
-      }
-    }
-  }
-}
-
-@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-high: #{color.change($color-primary,$alpha:0.1)};
-
-  /* theme secondary colors*/
-  --theme-color-secondary: #{$color-secondary};
-  @each $theme-level in $theme-levels {
-    --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-high: #{color.change($color-secondary,$alpha:0.1)};
-
-  /* theme tertiary colors*/
-  --theme-color-tertiary: #{$color-tertiary};
-  @each $theme-level in $theme-levels {
-    --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-high: #{color.change($color-tertiary,$alpha:0.1)};
-
-}
-
-@mixin buildTheme($mq_size_key: null) {
-    
-    @include fabric_theme($mq_size_key);
-}

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

@@ -1,55 +0,0 @@
-@use '../../utils' as utils;
-@use "../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);
-
-$_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: $color-primary,
-                secondary: $color-secondary,
-                tertiary: $color-tertiary,
-                foreground: $_foreground,
-                background: $_background
-        ),
-        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)
-);
-
-$theme-docs: (attributes:(
-        theme:(
-                tag: theme,
-                keys: $_theme-properties-apply,
-                levels: $_declinations-config-object
-        )
-));

package/src/cssfabric/modules/theme/theme.scss

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

package/src/cssfabric/modules/vars.scss

@@ -1,118 +0,0 @@
-@use "../_utils";
-@use "sass:color";
-@use 'cssfabric-config';
-@use '../../cssfabric/modules/color/color-vars';
-@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;
-
-
-$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;
-
-: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();
-  /* boxes */
-  @include boxBuild.pmbCssVars();
-  /* text */
-  @include textBuild.textCssVars();
-
-}
-
-/*[data-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: var(--theme-color-primary-alpha-mid);
-  --theme-color-overlay: '';
-}*/
-
-[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);
-}
-
-
-