@medyll/cssfabric 0.2.4 → 0.2.6

package/bin/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "cssfabric-install",
+  "version": "0.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "@medyll/cssfabric": "0.2.5"
+  },
+  "author": "",
+  "license": "ISC",
+  "type":"module"
+}

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@medyll/cssfabric",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "private": false,
-  "bin": {
-    "@medyll/cssfabric": "./bin/index.js"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/medyll/cssfabric.git"
   },
+  "main": "bin/index.js",
+  "bin": {
+    "@medyll/cssfabric": "bin/index.js"
+  },
   "scripts": {
     "dev": "svelte-kit dev",
     "build": "svelte-kit build",
@@ -24,11 +25,14 @@
     "css-build": "sass   src/cssfabric/modules/vars.scss css/mystyles.css"
   },
   "dependencies": {
+    "@colors/colors": "^1.5.0",
     "@lukeed/uuid": "^2.0.0",
     "cookie": "^0.4.1",
+    "fs-extra": "^10.1.0",
     "gulp-concat-util": "^0.5.5",
     "gulp-filelist": "^2.0.5",
     "JSON": "^1.0.0",
+    "prompt": "^1.3.0",
     "sass": "^1.32.12",
     "svelte2tsx": "^0.5.9"
   },

package/src/cssfabric/_utils.scss

@@ -71,9 +71,9 @@
 @mixin alphaTize($key,$color,$ranges: (_:0.3,low:0.8,high:0.1)) {
   @each $range, $val in $ranges {
     $rg: if($range==_,'',-#{$range});
-    #{$key}-alpha#{$rg} : #{color.change($color,$alpha:$val)};
+    #{$key}-alpha#{$rg} : rgba($color,$val); // #{color.change($color,$alpha:$val)};
   }
-}
+} 
 
 @function getGraySteps($steps, $gray-start, $gray-end) {
   $gray-schemes: ();

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

@@ -101,10 +101,15 @@ $cssfabric-config: (
                 full: 100%
         ),
         media_quey_sizes: (
-                xxl: 1300,
+                sm:640,
+                md:768,
+                lg:1024,
+                xl:1280,
+                xxl:1540
+                /* xxl: 1300,
                 xl: 1200,
                 lg: 960,
-                md: 760
+                md: 760 */
         ),
         densities-ratios: $densities-ratios,
         themes:(

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

@@ -29,7 +29,7 @@ $grid-code-sep: #{$grid-code}#{$sep};
   $h_prop: #{$prefix}#{$sep}#{$grid-h};
   $v_prop: #{$prefix}#{$sep}#{$grid-v};
 
-  .#{$grid-code} {
+  .#{$prefix} {
     display: grid;
     &-auto-flow-cols {
       grid-auto-flow: column;
@@ -69,15 +69,17 @@ $grid-code-sep: #{$grid-code}#{$sep};
   .#{$grid-code-sep}inline {
     display: inline-grid;
   }
+
+
   /* template-columns */
   @for $col-row from 1 through $grid-max-cols {
-    .#{$grid-code}-cols-#{$col-row} {
+    .#{$prefix}-cols-#{$col-row} {
       grid-template-columns: repeat(#{$col-row}, minmax(0, 1fr));
     }
   }
   /* template-rows */
   @for $col-row from 1 through $grid-max-rows {
-    .#{$grid-code}-rows-#{$col-row} {
+    .#{$prefix}-rows-#{$col-row} {
       grid-template-rows: repeat(#{$col-row}, minmax(0, 1fr));
     }
   }

package/src/cssfabric/modules/vars.scss

@@ -8,7 +8,9 @@
 
 @import "cssfabric-config";
 
-/* cssFabric vars */
+/* 
+cssFabric vars
+*/
 :root {
   /* --theme-color-primary|*-alpha-|* */
   @include themeBuild.themeCssVars($theme-color-primary, $theme-color-secondary, $theme-color-tertiary);
@@ -20,16 +22,16 @@
   @include textBuild.textCssVars();
   /* shadows */
   @include boxBuild.shadowsCssVars();
-  /* themes */
-  @include themeBuild.themeBaseVars($theme-color-foreground, $theme-color-background, $theme-color-paper);
+  
+  // @include themeBuild.themeBaseVars($theme-color-foreground, $theme-color-background, $theme-color-paper);
 
-  --theme-color-border: #{color.change($theme-color-foreground, $alpha: 0.2)};
+  
   &,
   [data-theme="light"] {
     @include themeBuild.themeBaseVars($theme-color-foreground, $theme-color-background, $theme-color-paper);
 
     --theme-color-border: #{color.change($theme-color-foreground, $alpha: 0.2)};
-    --theme-color-overlay: rgba(208, 191, 151, 0.2);
+    --theme-color-overlay: rgba($theme-color-foreground, 0.4);
   }
 
   [data-theme="dark"] {
@@ -40,6 +42,6 @@
     );
 
     --theme-color-border: #{color.change($theme-dark-color-foreground, $alpha: 0.3)};
-    --theme-color-overlay: rgba(255, 255, 255, 0.1);
+    --theme-color-overlay: rgba($theme-dark-color-background, 0.4);
   }
 }