@medyll/cssfabric 0.0.14 → 0.1.0

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@medyll/cssfabric",
-  "version": "0.0.14",
+  "version": "0.1.0",
   "private": false,
-  "main": "./lib",
-  "repository": "https://github.com/medyll/cssfabric",
+  "bin": {
+    "@medyll/cssfabric": "./bin/index.js"
+  },
+  "repository": {
+    "type" : "git",
+    "url": "https://github.com/medyll/cssfabric.git"
+  },
   "scripts": {
     "dev": "tsc -w || exit 1",
     "build": "",
@@ -17,13 +22,13 @@
   },
   "dependencies": {
     "chokidar": "^3.5.1",
+    "fs-extra": "^10.0.1",
     "gulp-filelist": "^2.0.5",
-    "gulp-sass-json": "^1.0.1",
+    "gulp-jsbeautifier": "^3.0.1",
     "gulp-sort": "^2.0.0",
     "JSON": "^1.0.0",
     "node-sass": "^6.0.0",
-    "sass": "^1.32.12",
-    "unescape-js": "^1.1.4"
+    "sass": "^1.32.12"
   },
   "devDependencies": {
     "clean-css": "^5.1.2",
@@ -41,13 +46,11 @@
     "gulp-ignore": "^3.0.0",
     "gulp-json-modify": "^1.0.2",
     "gulp-json-transform": "^0.4.7",
-    "gulp-merge-json": "^2.1.1",
     "gulp-minify-css": "^1.2.4",
     "gulp-modify-file": "^1.0.1",
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^4.1.0",
     "gulp-sass-export": "0.0.3",
-    "gulp-sass-vars-to-js": "^0.1.2",
     "gulp-util": "^3.0.8",
     "json-to-scss": "^1.6.2",
     "json2md": "^1.10.0",
@@ -55,13 +58,12 @@
     "npm-run-all": "^4.1.5",
     "sass-json-export": "^2.0.1",
     "sass-loader": "^11.0.1",
-    "sass-parser": "^0.1.2",
     "sassdoc": "^2.7.3",
+    "scss-to-json": "^2.0.0",
     "style-loader": "^2.0.0",
     "terminal": "^0.1.4",
     "through2": "^4.0.2",
     "tsconfig-paths": "^3.9.0",
-    "webpack": "^5.36.2",
-    "scss-to-json": "^2.0.0"
+    "webpack": "^5.36.2"
   }
 }

package/src/_generated/export.variables.json

@@ -43,6 +43,120 @@
                 "_docs": []
             }
 
+            ,
+            "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"
+                        }
+                    }
+                }
+            }
+
             ,
             "box": {
                 "_data": {
@@ -53,7 +167,7 @@
                     "unit-border-size-config": 1,
                     "sizes-config": 32,
                     "border-sizes-px-config": 5,
-                    "shadows-steps": 10,
+                    "shadows-steps": 5,
                     "shadows_step_multiplier": 2,
                     "position-shorthand-config": "pos",
                     "display-shorthand-config": "dsp",
@@ -184,125 +298,11 @@
             }
 
             ,
-            "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": {
+            "grid": {
                 "_data": {
 
-                    "moduleName": "flex",
-                    "moduleNameShort": "flex",
+                    "moduleName": "grid",
+                    "moduleNameShort": "grid",
                     "horCode": "h",
                     "vertCode": "v",
                     "gridFullWidth": "main",
@@ -334,11 +334,15 @@
                             "start": "flex-start", "end": "flex-end", "stretch": "stretch"
                         }
                     }
+
+                    ,
+                    "grid-max-rows": 8,
+                    "grid-max-cols": 12
                 }
 
                 ,
                 "_metadata": {
-                    "title": "flex", "tag": "flex", "description": "cssfabric flex system module"
+                    "title": "grid", "tag": "grid", "description": "cssfabric flex grid system module"
                 }
 
                 ,
@@ -346,7 +350,7 @@
                     "attributes": {
                         "grid": {
 
-                            "tag": "flex",
+                            "tag": "grid",
                             "keys": ["v",
                             "h"],
                             "classNames": {
@@ -354,7 +358,7 @@
                             }
 
                             ,
-                            "about": "a classic grid system, and hey, it gets height !"
+                            "about": "a classic grid system"
                         }
 
                         ,
@@ -366,15 +370,50 @@
             }
 
             ,
-            "grid": {
+            "menu": {
                 "_data": {
 
-                    "moduleName": "grid",
-                    "moduleNameShort": "grid",
+                    "menu_class_name": "menu",
+                    "menu_class_name_short": "ul",
+                    "orientations": {
+                        "v": "vertical", "h": "horizontal"
+                    }
+
+                    ,
+                    "menu_item_class_name": "menu-item",
+                    "menu_item_class_name_short": "li",
+                    "menu_item_disabled_tag": "disabled",
+                    "menu_item_selected_tag": "selected",
+                    "menu_dropdown_tag": "drop",
+                    "menu_dropdown_open": "open",
+                    "menu_dropdown_close": "close"
+                }
+
+                ,
+                "_metadata": {
+                    "title": "menu", "tag": "ul", "description": "cssfabric menu module to set menu style"
+                }
+
+                ,
+                "_docs": {
+                    "attributes": {
+                        "menu": {
+                            "tag": "menu", "keys": ["h", "v"]
+                        }
+                    }
+                }
+            }
+
+            ,
+            "flex": {
+                "_data": {
+
+                    "moduleName": "flex",
+                    "moduleNameShort": "flex",
                     "horCode": "h",
                     "vertCode": "v",
                     "gridFullWidth": "main",
-                    "grow-shrink-steps": 4,
+                    "grow-shrink-steps": 2,
                     "cssProps": {
                         "flexWrap": {
                             "wrap": "wrap", "wrap-reverse": "wrap-reverse"
@@ -406,7 +445,7 @@
 
                 ,
                 "_metadata": {
-                    "title": "grid", "tag": "grid", "description": "cssfabric flex grid system module"
+                    "title": "flex", "tag": "flex", "description": "cssfabric flex system module"
                 }
 
                 ,
@@ -414,7 +453,7 @@
                     "attributes": {
                         "grid": {
 
-                            "tag": "grid",
+                            "tag": "flex",
                             "keys": ["v",
                             "h"],
                             "classNames": {
@@ -422,47 +461,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"
-                        }
-                    }
-                }
-            }
-
-            ,
-            "menu": {
-                "_data": {
-
-                    "menu_class_name": "menu",
-                    "menu_class_name_short": "ul",
-                    "orientations": {
-                        "v": "vertical", "h": "horizontal"
-                    }
-
-                    ,
-                    "menu_item_class_name": "menu-item",
-                    "menu_item_class_name_short": "li",
-                    "menu_item_disabled_tag": "disabled",
-                    "menu_item_selected_tag": "selected",
-                    "menu_dropdown_tag": "drop",
-                    "menu_dropdown_open": "open",
-                    "menu_dropdown_close": "close"
-                }
-
-                ,
-                "_metadata": {
-                    "title": "menu", "tag": "ul", "description": "cssfabric menu module to set menu style"
-                }
-
-                ,
-                "_docs": {
-                    "attributes": {
-                        "menu": {
-                            "tag": "menu", "keys": ["h", "v"]
+                            "tag": "self", "keys": ["start", "end", "stretch"], "about": "flex children specific classnames"
                         }
                     }
                 }
@@ -692,7 +696,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 +713,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 +742,7 @@
             ,
             "zindex": {
                 "_data": {
-                    "z_groups": ["a", "b", "c", "d", "e", "f", "g"]
+                    "z_groups": ["a", "z"]
                 }
 
                 ,

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:(
@@ -66,6 +65,9 @@ $cssfabric-config: (
                 blue: #0078d4,
                 dark: #323232,
         ),
+        border-radius:(
+                tiny:4px, small:8px, medium:16px
+        ),
         gray: getGraySteps(8, #f4f4f4, #999),
         gray-config: (
                 start: #f4f4f4,

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

@@ -1,9 +1,10 @@
 @use "sass:map";
 @use "sass:math";
 @use '../../_utils';
-@use "../cssfabric-config";
+@use "../cssfabric-config" as fabricConfig;
 @use "box-vars" as box;
 
+$fabric-config: fabricConfig.$cssfabric-config;
 $box-config: box.$box-config;
 $box-docs: box.$box-docs;
 
@@ -30,6 +31,8 @@ $box-margin-shorthand-config: map-get($box-config, margin-shorthand-config) !def
 $box-shadows-steps: map-get($box-config, shadows-steps) !default;
 $box-shadows-step-multiplier: map-get($box-config, shadows-step_multiplier) !default;
 
+$box-radius: map-get($fabric-config, border-radius);
+
 $css-shorthands: (
         border: $box-border-shorthand-config,
         padding: $box-padding-shorthand-config,
@@ -57,7 +60,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
@@ -70,9 +73,9 @@ $css-shorthands: (
 
 @mixin pmbCssVars() {
   $iterator: $box-sizes-config;
-  @for $grid_size_value from 1 through $iterator {
+  @for $grid_size_value from 0 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};
   }
 }
 
@@ -132,6 +135,54 @@ $css-shorthands: (
   }
 }
 
+// radius
+@mixin radius($mq_key) {
+  $shorthand: if($mq_key, radius-#{$mq_key}, radius);
+
+  @debug $box-radius;
+  /*radius*/
+  @each $radius, $value in $box-radius {
+    .#{$shorthand}-#{$radius} {
+      border-radius: #{$value};
+
+      &-t {
+        border-top-left-radius: #{$value};
+        border-top-right-radius: #{$value}
+      }
+
+      &-b {
+        border-bottom-left-radius: #{$value};
+        border-bottom-right-radius: #{$value}
+      }
+
+      &-l {
+        border-top-left-radius: #{$value};
+        border-bottom-left-radius: #{$value}
+      }
+
+      &-r {
+        border-top-right-radius: #{$value};
+        border-bottom-right-radius: #{$value}
+      }
+    }
+  }
+}
+
+// placement property -- top-0/8
+@mixin placement($mq_key) {
+  $shorthand: if($mq_key, #{$mq_key}-, '');
+  $places: (top, right, bottom, left);
+
+  /*placement*/
+  @each $place in $places {
+    @for $size from 0 through 8 {
+      .#{$place}-#{$shorthand}#{$size} {
+        #{$place}: var(--box-unit-#{$size});
+      }
+    }
+  }
+}
+
 // display property
 @mixin display($mq_key) {
 
@@ -211,5 +262,7 @@ $css-shorthands: (
   @include padding-margin-border($mq_key);
   @include display($mq_key);
   @include position($mq_key);
+  @include placement($mq_key);
+  @include radius($mq_key);
   @include shadows($mq_key);
 }

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

@@ -8,7 +8,7 @@ $_unit-border-size-config: 1;
 $_sizes-config: 32;
 $_sizes-border-config: 5;
 
-$_shadows-steps: 10;
+$_shadows-steps: 5;
 $_shadows-step-multiplier: 2;
 
 $_shadows-v_fact: 2.4;