@medyll/cssfabric 0.1.12 → 0.2.0

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,166 +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;
-    }
-  }
-
-
-}
-
-@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/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,26 +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,90 +0,0 @@
-@use "../../_utils";
-@use "sass:color";
-@use "theme-vars";
-
-@import "theme-vars";
-@import "../cssfabric-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);
-
-
-$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 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);
-        }
-      }
-    }
-  }
-}
-
-@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: #{$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/src/cssfabric/modules/theme/_theme-vars.scss

@@ -1,46 +0,0 @@
-@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/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,49 +0,0 @@
-@use "../_utils";
-@use "sass:color";
-@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';
-
-$themes: map-get($cssfabric-config, themes) !default;
-$theme-light: map-get($themes, light) !default;
-$theme-dark: map-get($themes, dark) !default;
-
-/* cssFabric vars yes */
-:root {
-  @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"] {
-    @include themeBuild.themeBaseVars($theme-light);
-
-    --theme-color-border:  #{color.change(map-get($theme-light, paper),$alpha:0.2)};
-    --theme-color-overlay: rgba(208, 191, 151, 0.2);
-  }
-
-  [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);
-  }
-}
-
-
-
-
-
-

package/src/cssfabric/modules/zindex/_zindex-vars.scss

@@ -1,14 +0,0 @@
-$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/src/cssfabric/modules/zindex/zindex.scss

@@ -1,15 +0,0 @@
-
-@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);
-  }
-}

package/src/index.d.ts

@@ -1,3 +0,0 @@
-declare const cssfabric;
-
-export default cssfabric;

package/src/index.ts

@@ -1,4 +0,0 @@
-
-import cssfabric from "./scripts/cssfabric"
-
-export default cssfabric

package/src/scripts/cssfabric.ts

@@ -1,54 +0,0 @@
-import jsonConfig              from "../_generated/export.variables.json" ;
-import cssfabricClassNames from "./cssfabricClassNames";
-
-export type IFabricConfModulePart = Record<string, any>;
-export type IFabricConfModuleDataPart = Record<string, any>;
-export type IFabricConfModuleMetaDataPart = Record<string, any>;
-export type IFabricConfModuleDocsPart = Record<string, any>;
-export type TFabricConfModuleDocsAttributesPart = Record<string, any>;
-
-//
-const getModuleList = (): Record<string, any> => {
-    return jsonConfig["cssfabric"]?.["modules"] || {};
-};
-
-const getModuleConfig = (module?: string): IFabricConfModulePart => {
-    if (module) return jsonConfig["cssfabric"]?.["modules"]?.[module] || {};
-    return jsonConfig;
-};
-
-const getModuleData = (module?: string): IFabricConfModuleDataPart => {
-    if (module) return jsonConfig["cssfabric"]?.["modules"]?.[module]?.["_data"] || {};
-    return jsonConfig;
-};
-
-const getModuleMetaData = (module?: string): IFabricConfModuleMetaDataPart => {
-    if (module)
-        return jsonConfig["cssfabric"]?.["modules"]?.[module]?.["_metadata"] || {};
-    return jsonConfig;
-};
-
-const getModuleDocs = (module?: string): IFabricConfModuleDocsPart => {
-    if (module)
-        return jsonConfig["cssfabric"]?.["modules"]?.[module]?.["_docs"] || {};
-    return jsonConfig;
-};
-
-const getModuleDocsAttributes = (module?: string): TFabricConfModuleDocsAttributesPart => {
-    if (module)
-        return jsonConfig["cssfabric"]?.["modules"]?.[module]?.["_docs"]?.["attributes"] || {};
-    return jsonConfig;
-};
-
-export default {
-    getModuleList,
-    getModuleConfig,
-    getModuleData,
-    getModuleMetaData,
-    getModuleDocs,
-    getModuleDocsAttributes,
-    getClassNames: cssfabricClassNames,
-    getModuleClassNames: cssfabricClassNames,
-    getModuleTagClassNames: cssfabricClassNames.getModuleTagClassNames,
-    getModuleTagDebug: cssfabricClassNames.getModuleTagDebug,
-};