@medyll/cssfabric 0.0.14 → 0.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medyll/cssfabric",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "private": false,
   "main": "./lib",
   "repository": "https://github.com/medyll/cssfabric",

package/src/_generated/export.variables.json

@@ -183,120 +183,6 @@
                 }
             }
 
-            ,
-            "color": {
-                "_data": {
-                    "gray-config": {
-                        "start": "#f4f4f4", "end": "#999", "steps": 8
-                    }
-
-                    ,
-                    "color-types-config": ["color",
-                    "bg",
-                    "bg-themed",
-                    "border-color"],
-                    "theme": {
-                        "primary": "#0288d1", "secondary": "#0288d1", "tertiary": "#0288d1", "foreground": "#282230", "background": "#f1f1f1"
-                    }
-
-                    ,
-                    "scheme": {
-                        "discrete": "#ccc", "success": "green", "info": "#ffdd57", "warning": "#e6b905", "alert": "#ff7300", "error": "red"
-                    }
-
-                    ,
-                    "palette": {
-                        "yellow": "#ffb900", "orange": "#d83b01", "red": "#d13438", "magenta": "#b4009e", "purple": "#5c2d91", "green": "#107c10", "teal": "#008272", "blue": "#0078d4", "dark": "#323232"
-                    }
-
-                    ,
-                    "gray": "getGraySteps(8, #f4f4f4, #999)"
-                }
-
-                ,
-                "_metadata": {
-                    "title": "color", "title_tag": "its about colors", "description": "cssfabric color system: its about colors"
-                }
-
-                ,
-                "_docs": {
-                    "attributes": {
-                        "color": {
-
-                            "tag": "color",
-                            "keys": ["scheme",
-                            "palette",
-                            "gray"],
-                            "levelsLinked": {
-                                "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"], "gray": ["getGraySteps(8, #f4f4f4, #999)"]
-                            }
-
-                            ,
-                            "levelsDeclin": {
-                                "palette": ["_", "lighter", "light", "dark", "darker", "complement"]
-                            }
-
-                            ,
-                            "about": "color for text level html elements"
-                        }
-
-                        ,
-                        "background-color": {
-
-                            "tag": "bg",
-                            "keys": ["scheme",
-                            "palette",
-                            "gray"],
-                            "levelsLinked": {
-                                "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"], "gray": ["getGraySteps(8, #f4f4f4, #999)"]
-                            }
-
-                            ,
-                            "levelsDeclin": {
-                                "palette": ["_", "lighter", "light", "dark", "darker", "complement"]
-                            }
-
-                            ,
-                            "about": "background colors"
-                        }
-
-                        ,
-                        "background-themed": {
-
-                            "tag": "bg-themed",
-                            "keys": ["scheme",
-                            "palette",
-                            "gray"],
-                            "levelsLinked": {
-                                "gray": ["getGraySteps(8, #f4f4f4, #999)"], "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"]
-                            }
-
-                            ,
-                            "levelsDeclin": {
-                                "palette": ["_", "lighter", "light", "dark", "darker", "complement"]
-                            }
-
-                            ,
-                            "about": "same as background-color, but with added contrasted color to text"
-                        }
-
-                        ,
-                        "border-color": {
-
-                            "tag": "border-color",
-                            "keys": ["palette",
-                            "gray"],
-                            "levelsLinked": {
-                                "gray": ["getGraySteps(8, #f4f4f4, #999)"], "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"]
-                            }
-
-                            ,
-                            "about": "border colors are slightly darker to maximize surrounding effect"
-                        }
-                    }
-                }
-            }
-
             ,
             "flex": {
                 "_data": {
@@ -306,7 +192,7 @@
                     "horCode": "h",
                     "vertCode": "v",
                     "gridFullWidth": "main",
-                    "grow-shrink-steps": 4,
+                    "grow-shrink-steps": 2,
                     "cssProps": {
                         "flexWrap": {
                             "wrap": "wrap", "wrap-reverse": "wrap-reverse"
@@ -354,12 +240,12 @@
                             }
 
                             ,
-                            "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": ["start", "end", "stretch"], "about": "grid children specific classnames"
+                            "tag": "self", "keys": ["start", "end", "stretch"], "about": "flex children specific classnames"
                         }
                     }
                 }
@@ -402,6 +288,10 @@
                             "start": "flex-start", "end": "flex-end", "stretch": "stretch"
                         }
                     }
+
+                    ,
+                    "grid-max-rows": 8,
+                    "grid-max-cols": 12
                 }
 
                 ,
@@ -422,7 +312,7 @@
                             }
 
                             ,
-                            "about": "a classic grid system, and hey, it gets height !"
+                            "about": "a classic grid system"
                         }
 
                         ,
@@ -692,7 +582,7 @@
                     "moduleName": "theme",
                     "moduleNameShort": "theme",
                     "color-default-config": {
-                        "primary": "#0288d1", "secondary": "#0288d1", "tertiary": "#0288d1", "foreground": "#282230", "background": "#f1f1f1"
+                        "primary": "#0288d1", "secondary": "#D14B02", "tertiary": "#88D102", "foreground": "#282230", "background": "#f1f1f1"
                     }
 
                     ,
@@ -709,7 +599,7 @@
                     "bg",
                     "border"],
                     "color": {
-                        "primary": "#0288d1", "primary-light": "#23b0fd", "primary-lighter": "#6ecbfe", "primary-dark": "#02679e", "primary-darker": "#01466c", "primary-complement": "#d14b02", "primary-invert": "#fd772e", "secondary": "#0288d1", "secondary-light": "#23b0fd", "secondary-lighter": "#6ecbfe", "secondary-dark": "#02679e", "secondary-darker": "#01466c", "secondary-complement": "#d14b02", "secondary-invert": "#fd772e", "tertiary": "#0288d1", "tertiary-light": "#23b0fd", "tertiary-lighter": "#6ecbfe", "tertiary-dark": "#02679e", "tertiary-darker": "#01466c", "tertiary-complement": "#d14b02", "tertiary-invert": "#fd772e"
+                        "primary": "#0288d1", "primary-light": "#23b0fd", "primary-lighter": "#6ecbfe", "primary-dark": "#02679e", "primary-darker": "#01466c", "primary-complement": "#d14b02", "primary-invert": "#fd772e", "secondary": "#D14B02", "secondary-light": "#fd7023", "secondary-lighter": "#fea16e", "secondary-dark": "#9e3902", "secondary-darker": "#6c2701", "secondary-complement": "#0288d1", "secondary-invert": "#2eb4fd", "tertiary": "#88D102", "tertiary-light": "#b0fd23", "tertiary-lighter": "#cbfe6e", "tertiary-dark": "#679e02", "tertiary-darker": "#466c01", "tertiary-complement": "#4b02d1", "tertiary-invert": "#772efd"
                     }
                 }
 
@@ -738,7 +628,7 @@
             ,
             "zindex": {
                 "_data": {
-                    "z_groups": ["a", "b", "c", "d", "e", "f", "g"]
+                    "z_groups": ["a", "z"]
                 }
 
                 ,
@@ -751,6 +641,120 @@
                     "z_groups": "_"
                 }
             }
+
+            ,
+            "color": {
+                "_data": {
+                    "gray-config": {
+                        "start": "#f4f4f4", "end": "#999", "steps": 8
+                    }
+
+                    ,
+                    "color-types-config": ["color",
+                    "bg",
+                    "bg-themed",
+                    "border-color"],
+                    "theme": {
+                        "primary": "#0288d1", "secondary": "#D14B02", "tertiary": "#88D102", "foreground": "#282230", "background": "#f1f1f1"
+                    }
+
+                    ,
+                    "scheme": {
+                        "discrete": "#ccc", "success": "green", "info": "#ffdd57", "warning": "#e6b905", "alert": "#ff7300", "error": "red"
+                    }
+
+                    ,
+                    "palette": {
+                        "yellow": "#ffb900", "orange": "#d83b01", "red": "#d13438", "magenta": "#b4009e", "purple": "#5c2d91", "green": "#107c10", "teal": "#008272", "blue": "#0078d4", "dark": "#323232"
+                    }
+
+                    ,
+                    "gray": "getGraySteps(8, #f4f4f4, #999)"
+                }
+
+                ,
+                "_metadata": {
+                    "title": "color", "title_tag": "its about colors", "description": "cssfabric color system: its about colors"
+                }
+
+                ,
+                "_docs": {
+                    "attributes": {
+                        "color": {
+
+                            "tag": "color",
+                            "keys": ["scheme",
+                            "palette",
+                            "gray"],
+                            "levelsLinked": {
+                                "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"], "gray": ["getGraySteps(8, #f4f4f4, #999)"]
+                            }
+
+                            ,
+                            "levelsDeclin": {
+                                "palette": ["_", "lighter", "light", "dark", "darker", "complement"]
+                            }
+
+                            ,
+                            "about": "color for text level html elements"
+                        }
+
+                        ,
+                        "background-color": {
+
+                            "tag": "bg",
+                            "keys": ["scheme",
+                            "palette",
+                            "gray"],
+                            "levelsLinked": {
+                                "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"], "gray": ["getGraySteps(8, #f4f4f4, #999)"]
+                            }
+
+                            ,
+                            "levelsDeclin": {
+                                "palette": ["_", "lighter", "light", "dark", "darker", "complement"]
+                            }
+
+                            ,
+                            "about": "background colors"
+                        }
+
+                        ,
+                        "background-themed": {
+
+                            "tag": "bg-themed",
+                            "keys": ["scheme",
+                            "palette",
+                            "gray"],
+                            "levelsLinked": {
+                                "gray": ["getGraySteps(8, #f4f4f4, #999)"], "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"]
+                            }
+
+                            ,
+                            "levelsDeclin": {
+                                "palette": ["_", "lighter", "light", "dark", "darker", "complement"]
+                            }
+
+                            ,
+                            "about": "same as background-color, but with added contrasted color to text"
+                        }
+
+                        ,
+                        "border-color": {
+
+                            "tag": "border-color",
+                            "keys": ["palette",
+                            "gray"],
+                            "levelsLinked": {
+                                "gray": ["getGraySteps(8, #f4f4f4, #999)"], "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"]
+                            }
+
+                            ,
+                            "about": "border colors are slightly darker to maximize surrounding effect"
+                        }
+                    }
+                }
+            }
         }
     }
 }

package/src/cssfabric/_utils.scss

@@ -26,7 +26,7 @@
   $width: if($mq_size_value==180 , $mq_min_size_value , $mq_size_value);
 
   // @debug  (#{$type-width}-width: $width + rem) ;
-  @media only screen and (#{$type-width}-width: $width + rem) {
+  @media only screen and (#{$type-width}-width: $width + px) {
     @content;
   }
 }

package/src/cssfabric/modules/_cssfabric-config.scss

@@ -21,12 +21,11 @@ $cssfabric-config: (
                 full: 100%
         ),
         media_quey_sizes: (
-                xxxl: 180,
-                xxl: 120,
-                xl: 90,
-                lg: 64,
-                md: 48,
-                sm: 35.7
+                xxl: 1300,
+                xl: 1200,
+                lg: 960,
+                md: 760,
+                sm: 0
         ),
         themes:(
                 light:(

package/src/cssfabric/modules/animation/animation.scss

@@ -1,3 +1,3 @@
-@use 'animation-build' as build;
+// @use 'animation-build' as build;
 
-@include build.buildAnimation();
+// @include build.buildAnimation();

package/src/cssfabric/modules/box/_box-build.scss

@@ -57,7 +57,7 @@ $css-shorthands: (
 
   //
   @if ($css_prop== "padding" or $css_prop== "margin") {
-    $computed_value: var(--box-sp-#{$grid_size_value});
+    $computed_value: var(--box-unit-#{$grid_size_value});
   }
 
   // complex write method: 1px value
@@ -72,7 +72,7 @@ $css-shorthands: (
   $iterator: $box-sizes-config;
   @for $grid_size_value from 1 through $iterator {
     $css_size_value: ($grid_size_value * $box-unit-size-config) + $box-unit-config;
-    --box-sp-#{$grid_size_value} : #{$css_size_value};
+    --box-unit-#{$grid_size_value} : #{$css_size_value};
   }
 }
 

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

@@ -7,11 +7,11 @@ $config: cssfabric-config.$cssfabric-config;
 
 $_media_quey_sizes: map-get($config, media_quey_sizes);
 
-// builder responsive
+// responsive builder here
 $min_value: 0;
 
 @each $mq_size_key, $mq_size_value in $_media_quey_sizes {
-  @include utils.responsive_encloser($mq_size_value, $min_value) {
+  @include utils.fabricResponsiveEncloser($mq_size_value, $min_value) {
     @include build.buildBox($mq_size_key);
   }
   $min_value: $mq_size_value;

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

@@ -16,7 +16,7 @@ $min_value: 0;
 
 @each $mq_size_key,
 $mq_size_value in $_media_quey_sizes {
-    @include utils.responsive_encloser($mq_size_value,$min_value) {
+    @include utils.fabricResponsiveEncloser($mq_size_value,$min_value) {
         @include build.buildColor($mq_size_key);
     }
     $min_value: $mq_size_value;

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

@@ -21,7 +21,7 @@ $grow-shrink-steps: map-get($flex-config, grow-shrink-steps);
 
 $grid-code-sep: #{$grid-code}#{$sep};
 
-@mixin makeGrid($mqKey) { 
+@mixin makeGrid($mqKey) {
   $prefix: if($mqKey, #{$grid-code}-#{$mqKey}, #{$grid-code});
   $h_prop: #{$prefix}#{$sep}#{$grid-h};
   $v_prop: #{$prefix}#{$sep}#{$grid-v};
@@ -30,6 +30,7 @@ $grid-code-sep: #{$grid-code}#{$sep};
     display: flex;
   }
 
+  .#{$grid-code},
   .#{$h_prop} {
     display: flex;
     flex-direction: row;
@@ -38,39 +39,37 @@ $grid-code-sep: #{$grid-code}#{$sep};
       flex: 1 1 0;
     }
 
-    &.align-middle, &.#{$grid-code-sep}align-middle {
+    &.#{$grid-code-sep}align-middle {
       align-items: center;
     }
 
-    &.align-top, &.#{$grid-code-sep}align-top {
+    &.#{$grid-code-sep}align-top {
       align-items: flex-start;
     }
 
-    &.align-left, &.#{$grid-code-sep}align-left {
-      // justify-content: flex-start;
+    &.#{$grid-code-sep}align-left {
       align-items: flex-start;
     }
 
-    &.align-right, &.#{$grid-code-sep}align-right {
+    &.#{$grid-code-sep}align-right {
       justify-content: flex-end;
-      // align-items: end;
     }
 
-    &.align-bottom, &.#{$grid-code-sep}align-bottom {
+    &.#{$grid-code-sep}align-bottom {
       align-items: flex-end;
     }
 
-    &.align-center, &.#{$grid-code-sep}align-center {
+    &.#{$grid-code-sep}align-center {
       justify-content: center;
     }
 
-    &.align-middle-center, &.#{$grid-code-sep}align-middle-center {
+    &.#{$grid-code-sep}align-middle-center {
       justify-content: center;
       align-content: center;
       align-items: center;
     }
 
-    &.align-stretch , &.#{$grid-code-sep}align-stretch {
+    &.#{$grid-code-sep}align-stretch {
       color: blue;
       align-items: stretch;
     }
@@ -85,85 +84,67 @@ $grid-code-sep: #{$grid-code}#{$sep};
       max-height: 100%;
     }
 
-    &.align-middle, &.#{$grid-code-sep}align-middle {
+    &.#{$grid-code-sep}align-middle {
       justify-content: center;
     }
 
-    &.align-top, &.#{$grid-code-sep}align-top {
+    &.#{$grid-code-sep}align-top {
       justify-content: flex-start;
     }
 
-    &.align-left, &.#{$grid-code-sep}align-left {
+    &.#{$grid-code-sep}align-left {
       align-items: flex-start;
     }
 
-    &.align-right, &.#{$grid-code-sep}align-right {
+    &.#{$grid-code-sep}align-right {
       align-items: flex-end;
     }
 
-    &.align-bottom, &.#{$grid-code-sep}align-bottom {
+    &.#{$grid-code-sep}align-bottom {
       justify-content: flex-end;
     }
 
-    &.align-center, &.#{$grid-code-sep}align-center {
+    &.#{$grid-code-sep}align-center {
       align-items: center;
     }
 
-    &.align-middle-center, &.#{$grid-code-sep}align-middle-center {
+    &.#{$grid-code-sep}align-middle-center {
       align-items: center;
       justify-content: center;
     }
 
-    &.align-stretch, &.#{$grid-code-sep}align-stretch {
+    &.#{$grid-code-sep}align-stretch {
       color: red;
       align-items: stretch;
     }
   }
 
-  .#{$h_prop},
-  .#{$v_prop} {
-    box-sizing: border-box;
-
-    & > * {
-      box-sizing: border-box;
-    }
 
-    & > *:not(.#{$grid-code-sep}#{$gridFullWidth}) {
-      flex: 0 0 auto;
-    }
+  .#{$grid-code-sep}inline {
+    display: inline-flex;
+  }
 
-    &.#{$grid-code-sep}inline {
-      display: inline-flex;
+  // wrap rules
+  .#{$grid-code} {
+    @each $fabricRule, $value in map-get($cssProps, flexWrap) {
+      @include utils.fabricAttributes('&'+$sep, $fabricRule, 'flex-wrap', $value);
     }
+  }
 
-    @for $i from 1 through $grow-shrink-steps {
-      & .#{$grid-code-sep}grow#{$sep}#{$i} {
-        flex-grow: $i;
-      }
-
-      & .#{$grid-code-sep}shrink#{$sep}#{$i} {
-        flex-shrink: $i;
-      }
+  // align-self rules for children */
+  .self {
+    @each $fabricRule, $value in map-get($cssItemsProps, self) {
+      @include utils.fabricAttributes('&-', $fabricRule, 'align-self', $value);
     }
   }
-
-  /** 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);
-      }
+  @for $i from 0 through $grow-shrink-steps {
+    .#{$grid-code-sep}grow#{$sep}#{$i} {
+      flex-grow: #{$i};
     }
 
-    // align-self rules for children */
-    & .self {
-      @each $fabricRule, $value in map-get($cssItemsProps, self) {
-        @include utils.fabricAttributes('&-', $fabricRule, 'align-self', $value);
-      }
+    .#{$grid-code-sep}shrink#{$sep}#{$i} {
+      flex-shrink: $i;
     }
   }
 
-
 }

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"
                 )
         )
 );