@medyll/cssfabric 0.0.11 → 0.0.15

package/src/cssfabric/modules/flex/_flex-vars.scss

@@ -1,7 +1,7 @@
 @use '../../utils';
 
 
-$_grow-shrink-steps: 4;
+$_grow-shrink-steps: 2;
 
 
 $_grid-align: (top middle bottom left right center middle-center stretch);
@@ -72,16 +72,13 @@ $flex-docs: (// add align-middle non generated className // grow + shrink
                         classNames: (
                                 align: $_grid-align,
                                 grid:utils.getObjectKeys(map-get($_cssProps, flexWrap)), // add inline !
-                          //items: utils.getObjectKeys(map-get($_cssProps, grid-items)),
-                          //content:utils.getObjectKeys(map-get($_cssProps, grid-content)),
-                          //justify:utils.getObjectKeys(map-get($_cssProps, grid-justify))
                         ),
-                        about: "a classic grid system, and hey, it gets height !"
+                        about: "a classic flex grid system, and hey, it gets height !"
                 ),
                 self:(
                         tag: self,
                         keys: utils.getObjectKeys(map-get($_cssItemsProps, self)),
-                        about: "grid children specific classnames"
+                        about: "flex children specific classnames"
                 )
         )
 );

package/src/cssfabric/modules/grid/_grid-build.scss

@@ -19,6 +19,9 @@ $gridFullWidth: map-get($grid-config, gridFullWidth);
 
 $grow-shrink-steps: map-get($grid-config, grow-shrink-steps);
 
+$grid-max-cols: map-get($grid-config, grid-max-cols);
+$grid-max-rows: map-get($grid-config, grid-max-rows);
+
 $grid-code-sep: #{$grid-code}#{$sep};
 
 @mixin makeGrid($mqKey) {
@@ -26,66 +29,56 @@ $grid-code-sep: #{$grid-code}#{$sep};
   $h_prop: #{$prefix}#{$sep}#{$grid-h};
   $v_prop: #{$prefix}#{$sep}#{$grid-v};
 
-  %flex {
-    display: grid; 
-  }
-
-  .#{$h_prop} {
+  .#{$grid-code} {
     display: grid;
-    flex-direction: row;
-
-    & > .#{$grid-code-sep}#{$gridFullWidth} {
-      flex: 1 1 0;
+    &-auto-flow-cols {
+      grid-auto-flow: column;
     }
-
-
-  }
-
-  .#{$v_prop} {
-    display: grid;
-    flex-direction: column;
-
-    & > .#{$grid-code-sep}#{$gridFullWidth} {
-      flex: 1 1 0;
-      max-height: 100%;
+    &-auto-cols-auto {
+      grid-auto-columns: auto;
     }
-
-    &.align-middle, &.#{$grid-code-sep}align-middle {
-      justify-content: center;
+    &-auto-cols-min	 {
+      grid-auto-columns: min-content;
     }
-
-  }
-
-  .#{$h_prop},
-  .#{$v_prop} {
-
-    & > *:not(.#{$grid-code-sep}#{$gridFullWidth}) {
-      flex: 0 0 auto;
+    &-auto-cols-max {
+      grid-auto-columns: max-content;
+    }
+    &-auto-cols {
+      grid-auto-columns: minmax(0, 1fr);
     }
 
-    &.#{$grid-code-sep}inline {
-      display: inline-grid;
+    &-auto-flow-rows {
+      grid-auto-flow: row;
+    }
+    &-auto-rows-auto {
+      grid-auto-rows: auto;
+    }
+    &-auto-rows-min	 {
+      grid-auto-rows: min-content;
+    }
+    &-auto-rows-max {
+      grid-auto-rows: max-content;
+    }
+    &-auto-rows {
+      grid-auto-rows: minmax(0, 1fr);
     }
 
+
   }
 
-  /** raw css properties distribution */
-  .#{$h_prop},
-  .#{$v_prop} {
-    // wrap rules
-    &.#{$grid-code} {
-      @each $fabricRule, $value in map-get($cssProps, flexWrap) {
-        @include utils.fabricAttributes('&'+$sep, $fabricRule, 'flex-wrap', $value);
-      }
+  .#{$grid-code-sep}inline {
+    display: inline-grid;
+  }
+  /* template-columns */
+  @for $col-row from 1 through $grid-max-cols {
+    .#{$grid-code}-cols-#{$col-row} {
+      grid-template-columns: repeat(#{$col-row}, minmax(0, 1fr));
     }
-
-    // align-self rules for children */
-    & .self {
-      @each $fabricRule, $value in map-get($cssItemsProps, self) {
-        @include utils.fabricAttributes('&-', $fabricRule, 'align-self', $value);
-      }
+  }
+  /* template-rows */
+  @for $col-row from 1 through $grid-max-rows {
+    .#{$grid-code}-rows-#{$col-row} {
+      grid-template-rows: repeat(#{$col-row}, minmax(0, 1fr));
     }
   }
-
-
 }

package/src/cssfabric/modules/grid/_grid-vars.scss

@@ -3,6 +3,8 @@
 
 $_grow-shrink-steps: 4;
 
+$grid-max-cols: 12;
+$grid-max-rows: 8;
 
 $_grid-align: (top middle bottom left right center middle-center stretch);
 
@@ -61,7 +63,9 @@ $grid-config: (
         gridFullWidth: main,
         grow-shrink-steps:$_grow-shrink-steps,
         cssProps: $_cssProps,
-        cssItemsProps: $_cssItemsProps
+        cssItemsProps: $_cssItemsProps,
+        grid-max-rows: $grid-max-rows,
+        grid-max-cols: $grid-max-cols
 );
 
 $grid-docs: (// add align-middle non generated className // grow + shrink
@@ -72,11 +76,8 @@ $grid-docs: (// add align-middle non generated className // grow + shrink
                         classNames: (
                                 align: $_grid-align,
                                 grid:utils.getObjectKeys(map-get($_cssProps, flexWrap)), // add inline !
-                          //items: utils.getObjectKeys(map-get($_cssProps, grid-items)),
-                          //content:utils.getObjectKeys(map-get($_cssProps, grid-content)),
-                          //justify:utils.getObjectKeys(map-get($_cssProps, grid-justify))
                         ),
-                        about: "a classic grid system, and hey, it gets height !"
+                        about: "a classic grid system"
                 ),
                 self:(
                         tag: self,

package/src/cssfabric/modules/grid/grid.scss

@@ -1,3 +1,6 @@
+
+// load _build
 @use '_grid-build' as build;
 
-@include build.makeGrid(null);
+
+@include build.makeGrid(null);

package/src/cssfabric/modules/menu/menu.scss

@@ -1,3 +1,6 @@
-@use 'menu-build' as build;
 
-@include build.buildMenu(null);
+// load scss config file
+@use 'menu-build' as build; 
+
+
+@include build.buildMenu(null)

package/src/cssfabric/modules/overflow/overflow.scss

@@ -1,3 +1,5 @@
+
+// load scss config file
 @use '_overflow-build' as build;
 
 @include build.buildOverflow();

package/src/cssfabric/modules/scale/_scale-build.scss

@@ -32,7 +32,7 @@ $unit-tag-config: map-get($scale-config, unit-tag-config)!default;
                   #{$scale_prop_short}-#{$media_query_code}-#{$size_code},
                   #{$scale_prop_short}-#{$size_code}
   );
-  .#{$tag}, .scale-#{$tag} {
+  .#{$tag} { // , .scale-#{$tag}
     #{$scale_prop}: $size_value;
 
     @if ($_has_dimensions_max) {

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

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

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

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

package/src/cssfabric/modules/text/text.scss

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

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

@@ -13,16 +13,14 @@ $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: complement($color-primary);
-$color-tertiary: complement(invert($color-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 {
-    $switch-color-grad: utils.themeDeclinationColors($color-grade, $color-primary);
-
 
     @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});
@@ -73,5 +71,6 @@ $declinations-config: map-get($theme-config, declinations-config);
 }
 
 @mixin buildTheme($mq_size_key: null) {
-  @include fabric_theme($mq_size_key);
+    
+    @include fabric_theme($mq_size_key);
 }

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

@@ -6,11 +6,16 @@ $config: cssfabric-config.$cssfabric-config;
 
 $theme: map-get($config, theme);
 
-$_color-primary: map-get($theme, primary) !default;
+$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);
 
@@ -28,14 +33,17 @@ $theme-config: (
         moduleName: theme,
         moduleNameShort: theme,
         color-default-config: (
-                primary: $_color-primary,
+                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,
-        color: utils.getThemeLevels($_declinations-config, $_color-primary)
+        // primary secondary tertiary
+        color: utils.getThemeLevels($themeii, $color-primary)
 );
 
 $theme-docs: (attributes:(

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

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

package/src/cssfabric/modules/vars.scss

@@ -7,6 +7,7 @@
 @use "../../cssfabric/modules/theme/theme-build" as themeBuild;
 @use "../../cssfabric/modules/text/text-build" as textBuild;
 
+
 $config: cssfabric-config.$cssfabric-config;
 /* cssFabric vars */
 
@@ -49,11 +50,8 @@ $box-shadow-shorthand-config: map-get($box-config, shadow-shorthand-config) !def
   --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: '';
-
-
-
+  --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 {
@@ -112,8 +110,8 @@ $box-shadow-shorthand-config: map-get($box-config, shadow-shorthand-config) !def
   --theme-color-background: #{map-get($theme-dark, background)};
   --theme-color-paper: #{map-get($theme-dark, paper)};
 
-  --theme-color-border: var(--theme-color-primary-alpha-mid);
-  --theme-color-overlay: '';
+  --theme-color-border: rgba(255, 255, 255, 0.2);
+  --theme-color-overlay: rgba(255,255,255,0.1);
 }
 
 

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

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

package/src/cssfabric/modules/zindex/zindex.scss

@@ -5,14 +5,11 @@ $zindex-config: zindex-vars.$zindex-config;
 @use '../../_utils';
 
 // read variables
-$z_groups: map-get($zindex-config, z_groups); 
- 
+$z_groups: map-get($zindex-config, z_groups);
 
-@each $z_group in $z_groups {
-  $i: index($z_groups, $z-group);
-  @for $z_value from 0 through 9 {
-    .zI-#{$z_group}-#{$z_value} {
-      z-index: ($i * 100) + (($z_value + 1) * 10);
-    }
+
+@for $z_value from 0 through 10 {
+  .zI-#{$z_value} {
+    z-index: (($z_value) * 100);
   }
-}
+}

package/src/scripts/index.d.ts

@@ -0,0 +1,2 @@
+declare function buildReadme(): void;
+export default buildReadme;

package/src/scripts/index.ts

@@ -0,0 +1,8 @@
+
+
+function buildReadme(vars: string){
+ return "readme"
+}
+
+
+export default buildReadme;

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
-  </state>
-</component>