@medyll/cssfabric 0.2.0 → 0.2.1-beta.2

package/{scripts → dist/scripts}/utils.js

@@ -1,38 +1,38 @@
-const utils = {
-    isArrayOfTypes: (arr) => {
-        let ret = '';
-        if (!Array.isArray(arr)) {
-            return false;
-        }
-        if (arr.every(x => Array.isArray(x)))
-            ret = 'arrays';
-        if (arr.every(x => typeof x === 'number' || typeof x === 'string'))
-            ret = 'strings';
-        if (arr.every(x => typeof x === 'string'))
-            ret = 'strings';
-        if (arr.every(x => typeof x === 'number'))
-            ret = 'numbers';
-        if (arr.every(x => typeof x === 'object' && !Array.isArray(x)))
-            ret = 'objects';
-        return ret;
-    },
-    isObjectOfTypes: (arr) => {
-        if (Array.isArray(arr)) {
-            return false;
-        }
-        let ret = '';
-        let arrValues = Object.values(arr);
-        if (arrValues.every(x => typeof x === 'number' || typeof x === 'string'))
-            ret = 'strings';
-        if (arrValues.every(x => Array.isArray(x)))
-            ret = 'arrays';
-        if (arrValues.every(x => typeof x === 'string'))
-            ret = 'strings';
-        if (arrValues.every(x => typeof x === 'number'))
-            ret = 'numbers';
-        if (arrValues.every(x => typeof x === 'object' && !Array.isArray(x)))
-            ret = 'objects';
-        return ret;
-    }
-};
-export default utils;
+const utils = {
+    isArrayOfTypes: (arr) => {
+        let ret = '';
+        if (!Array.isArray(arr)) {
+            return false;
+        }
+        if (arr.every(x => Array.isArray(x)))
+            ret = 'arrays';
+        if (arr.every(x => typeof x === 'number' || typeof x === 'string'))
+            ret = 'strings';
+        if (arr.every(x => typeof x === 'string'))
+            ret = 'strings';
+        if (arr.every(x => typeof x === 'number'))
+            ret = 'numbers';
+        if (arr.every(x => typeof x === 'object' && !Array.isArray(x)))
+            ret = 'objects';
+        return ret;
+    },
+    isObjectOfTypes: (arr) => {
+        if (Array.isArray(arr)) {
+            return false;
+        }
+        let ret = '';
+        let arrValues = Object.values(arr);
+        if (arrValues.every(x => typeof x === 'number' || typeof x === 'string'))
+            ret = 'strings';
+        if (arrValues.every(x => Array.isArray(x)))
+            ret = 'arrays';
+        if (arrValues.every(x => typeof x === 'string'))
+            ret = 'strings';
+        if (arrValues.every(x => typeof x === 'number'))
+            ret = 'numbers';
+        if (arrValues.every(x => typeof x === 'object' && !Array.isArray(x)))
+            ret = 'objects';
+        return ret;
+    }
+};
+export default utils;

package/dist/scss/_utils.scss

@@ -0,0 +1,203 @@
+@use "sass:string";
+@use "sass:map";
+@use "sass:math";
+@use "sass:color";
+
+// load main fabric vars
+@use 'modules/cssfabric-config' as cssfabric-config;
+
+// link to fabric conf scss file, which often move ;)
+@function get_fabric_conf($prop: null,$val: null) {
+  @if not $prop {
+    @return cssfabric-config.$cssfabric-config;
+  }
+  @if $prop and not $val {
+    @return map-get(cssfabric-config.$cssfabric-config, $prop);
+  }
+  @if $val {
+    $in: map-get(cssfabric-config.$cssfabric-config, $prop);
+    @return map-get($in, $prop, $val);
+  }
+}
+
+// css dimensions rules builder responsive
+@mixin fabricResponsiveEncloser($mq_size_value, $mq_min_size_value: null) { 
+  // and (min-width: $mq_min_size_value + rem)
+  // @debug $mq_size_value $mq_min_size_value;
+  $type-width: "min"; // if($mq_size_value==180, max, max);
+  $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 + px) {
+    @content;
+  }
+}
+
+@mixin fabricAttributes($sep, $frag, $property, $value) {
+  #{$sep + $frag} {
+    #{$property}: #{$value};
+  }
+}
+
+@mixin scssVarsToCssVars($module, $module-config) {
+  /** 
+  * cssfabric generated file
+  * css vars for #{$module} 
+  */
+  @each $red, $rt in $module-config {
+    // list map string
+    @if (type_of($rt) == "string") {
+      $key: #{$module}-#{$red};
+      --cssfabric-#{$key}: #{$rt};
+    }
+    @if (type_of($rt) == "map") {
+      @each $rtkey, $rtval in $rt {
+        $type: type_of($rtval);
+        $key: #{$module}-#{$red}-#{$rtkey};
+        $compval: is-map; // #{string.slice(#{#ss($rtval)}, 4)};
+
+        $comp: if($type== map or $type == list, #{$compval}, #{$rtval});
+
+        --cssfabric-#{$key}: #{$comp};
+      }
+    }
+    @if (type_of($rt) == "list") {
+      $key: #{$module}-#{$red};
+      --cssfabric-#{$key}: #{string.slice(#{#ss($rt)}, 4)};
+    }
+  }
+}
+
+@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} : rgba($color,$val); // #{color.change($color,$alpha:$val)};
+  }
+} 
+
+@function getGraySteps($steps, $gray-start, $gray-end) {
+  $gray-schemes: ();
+
+  @for $i from 0 through $steps {
+
+    $color: mix($gray-end, $gray-start, math.div($i , $steps) * 100%);
+
+    $gray-schemes: map.set($gray-schemes, #{($i+1) * 100}, $color);
+  }
+
+  @return $gray-schemes;
+}
+
+@function applyColorEffect($theme-level, $color) {
+  $switch-named: map-get(
+                  (
+                          light: lighten($color, 15%),
+                          lighter: lighten($color, 30%),
+                          dark: darken($color, 10%),
+                          darker: darken($color, 20%),
+                          complement: complement($color),
+                          invert: invert($color)
+                  ),
+                  $theme-level
+  );
+
+  @return $switch-named;
+}
+
+@function getColorPropertyType($fabric-tag) {
+  /** get property for #{$fabric-tag} */
+  @return map-get(
+                  (
+                          color: color,
+                          text: color,
+                          foreground: color,
+                          bg: background-color,
+                          bg-themed: background-color,
+                          border: border-color
+                  ),
+                  $fabric-tag
+  );
+}
+
+@function getThemeLevels($declinations-config, $color_primary) {
+  $out: ();
+  // primary secondary tertiary
+  @each $color-grade, $color-value in $declinations-config {
+    $color: $color-value;
+    $out: map.set($out, $color-grade, $color);
+    @each $theme-level in (light lighter dark darker complement invert) {
+      $new-theme-level: #{$color-grade}-#{$theme-level};
+      $newColor: applyColorEffect($theme-level, $color);
+      $out: map.set($out, $new-theme-level, $newColor);
+    }
+  }
+
+  @return $out;
+}
+
+@function getBoxIterator($iterator, $unit-config,$_unit-size-config) {
+  $out: ("_": "_");
+
+  @for $grid_size_value from 1 through $iterator {
+    $css_size_value: ($grid_size_value * $_unit-size-config) + $unit-config;
+    $out: map.set($out, $grid_size_value, $css_size_value);
+  }
+  @return $out
+}
+
+@function getShadowIterator($factors,$box-shadows-steps) {
+  $out: ();
+
+  $v_fact: map-get($factors, v_fact);
+  $h_fact: map-get($factors, h_fact);
+
+  $v_fact_2: map-get($factors, v_fact_2);
+  $h_fact_2: map-get($factors, h_fact_2);
+
+  $acc: 1;
+
+  @for $shadows_step from 1 through $box-shadows-steps {
+    $acc: $acc * 2;
+    $v: $shadows_step * 2;
+
+    $v_val: math.div($acc, $v_fact);
+    $h_val: math.div($acc, $h_fact);
+
+    $v_val_2: math.div($acc, $v_fact_2);
+    $h_val_2: math.div($acc, $h_fact_2);
+
+    $out: map.set($out, $acc, #{$v_val} + #{$h_val});
+  }
+
+  @return $out;
+}
+
+@function cssDimensionPropertyBuilder($scale_prop,$dimensions_grid_ratio) {
+  $out: ();
+
+  @for $z_value from 1 through $dimensions_grid_ratio {
+    $key: $z_value + "-" + $dimensions_grid_ratio;
+    $val: (math.div($z_value , $dimensions_grid_ratio) * 100) + #{"%"};
+
+    $out: map.set($out, $key, $val);
+  }
+
+  @return $out
+}
+
+@function getObjectKeys($object) {
+  $out: ();
+  @each $key, $value in $object {
+    $out: append($out, $key);
+  }
+
+  @return $out;
+}
+
+@function getObjectValues($object) {
+  @return $object;
+}
+
+@function getObjectKeyValues($object) {
+  @return $object;
+}

package/dist/scss/modules/_cssfabric-config.scss

@@ -0,0 +1,178 @@
+@use "sass:map";
+@use "sass:math";
+
+
+// prefix ?
+// scoped ?
+
+// dimensions
+
+// grays
+$has-color-gray: true;
+$has-color-gray-responsive: true;
+// text - done conditionals
+$has-text-transform: true;
+$has-text-transform-responsive: false;
+$has-text-align: true;
+$has-text-align-responsive: false;
+$has-text-font: true;
+$has-text-font-responsive: false;
+$has-text-shadow-color-scheme: true;
+$has-text-shadow-color-scheme-responsive: false;
+$has-text-shadow-color-palette: true;
+$has-text-shadow-color-palette-responsive: false;
+
+// colors
+$has-color-palette: true;
+$has-color-palette-responsive: false;
+$has-color-scheme: true;
+$has-color-scheme-responsive: false;
+$has-color-gray: true;
+$has-color-gray-responsive: false;
+
+$has-color-foreground: true;
+$has-color-bg: true;
+$has-color-bg-themed: true;
+$has-color-border: true;
+
+
+$theme-color-primary: rgb(32, 23, 0) !default;
+$theme-color-secondary: #D14B02 !default;
+$theme-color-tertiary: #88D102 !default;
+//light theme
+$theme-color-foreground: #282230 !default;
+$theme-color-background: #ffffff !default;
+$theme-color-paper: #f1f1f1 !default;
+
+$theme-color-shadow: green !default;
+// dark theme
+$theme-dark-color-foreground: #f1f1f1 !default;
+$theme-dark-color-background: #27323a !default;
+$theme-dark-color-paper: #3a3b3b !default;
+
+$theme-dark-color-shadow: black !default;
+
+// grays
+$gray-start: #f4f4f4 !default;
+$gray-end: #999 !default;
+$gray-steps: 5 !default;
+
+$densities-ratios: (small:0.5, default:1, large:1.75);
+
+$box-position-shorthand: pos !default;
+$box-display-shorthand: dsp !default;
+$box-shadow-shorthand: shad !default;
+$box-border-shorthand: border !default;
+$box-padding-shorthand: pad !default;
+$box-margin-shorthand: marg !default;
+$box-gap-shorthand: gap !default;
+
+$box-unit-presets: (tight:0.25,tiny:0.25, small:0.5, default: 1,medium:1.5, large:3) !default;
+$box-radius: (tiny:4px, small:8px, medium:16px) !default;
+
+$scale-tag-width-shorthand: w !default;
+$scale-tag-height-shorthand: h !default;
+
+$cssfabric-metadata: (
+        title: "cssfabric",
+        tag: "cssfabric",
+        description: "cssfabric global config variables"
+);
+
+// vars
+$vars-box-density: --box-density !default;
+$vars-box-density-preset: --box-density-preset !default;
+
+$vars-theme-color-shadow: --theme-color-shadow !default;
+$vars-theme-dark-color-shadow: --theme-dark-color-shadow !default;
+
+$cssfabric-config: (
+        cfg-has-dimension-strict: true,
+        CFG_HAS_DIMENSION_MIN: true,
+        CFG_HAS_DIMENSION_MAX: true,
+        size_step: 0.5rem,
+        size-step-unit: rem,
+        sep: "-",
+        sizes: (
+                tiny: 32,
+                small: 64,
+                medium: 128,
+                large: 256,
+                full: 100%
+        ),
+        media_quey_sizes: (
+                sm:640,
+                md:768,
+                lg:1024,
+                xl:1280,
+                xxl:1540
+                /* xxl: 1300,
+                xl: 1200,
+                lg: 960,
+                md: 760 */
+        ),
+        densities-ratios: $densities-ratios,
+        themes:(
+                light:(
+                        foreground: $theme-color-foreground,
+                        background: $theme-color-background,
+                        paper: $theme-color-paper,
+                ),
+                dark:(
+                        foreground: $theme-dark-color-foreground,
+                        background: $theme-dark-color-background,
+                        paper: $theme-dark-color-paper
+                ),
+        ),
+        theme: (
+                primary: $theme-color-primary,
+                secondary: $theme-color-secondary,
+                tertiary: $theme-color-tertiary,
+                foreground: $theme-color-foreground,
+                background: $theme-color-background,
+                paper: $theme-color-paper,
+        ),
+        scheme: (
+                discrete: #ccc,
+                success: green,
+                info: #FFDD57FF,
+                warning: hsl(48, 96%, 46%),
+                alert: hsl(27, 100%, 50%),
+                error: red
+        ),
+        palette: (
+                'yellow': #ffb900,
+                'orange': #d83b01,
+                'red': #d13438,
+                'magenta': #b4009e,
+                'purple': #5c2d91,
+                'green': #107c10,
+                'teal': #008272,
+                'blue': #0078d4,
+                'dark': #323232,
+        ),
+        border-radius:(
+                tiny:4px, small:8px, medium:16px
+        ),
+        gray: getGraySteps($gray-steps, $gray-start, $gray-end),
+        gray-config: (
+                start: $gray-start,
+                end: $gray-end,
+                steps: $gray-steps
+        )
+);
+
+@function getGraySteps($steps, $gray-start, $gray-end) {
+  $gray-schemes: ();
+
+  @for $i from 0 through $steps {
+
+    $color: mix($gray-end, $gray-start, math.div($i , $steps) * 100%);
+
+    $gray-schemes: map.set($gray-schemes, #{($i+1) * 100}, $color);
+  }
+
+  @return $gray-schemes;
+}
+
+$cssfabric-docs: ();

package/dist/scss/modules/_mixins.scss

@@ -0,0 +1 @@
+  

package/dist/scss/modules/animation/_animation-vars.scss

@@ -0,0 +1,17 @@
+$animation-metadata: (
+        title: "animation",
+        description: "cssfabric simplest animation module"
+);
+$animation-config: (
+        attention_props: (),
+        in_out_props: (
+                back: () /* bounce: (),
+        slide: (),
+        fade: (),
+        zoom: () */
+        )
+);
+$animation-docs: (
+        attention_props: "",
+        in_out_props: ""
+);

package/dist/scss/modules/animation/animation.scss

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

package/dist/scss/modules/base/_base-vars.scss

@@ -0,0 +1,19 @@
+ 
+@use '../../_utils';
+ 
+$base-metadata: (
+    title: "base",
+    tag: "base",
+    description: "cssfabric base config variables"
+);
+
+$base-config: (
+    cfg-has-dimension-strict: true,
+    CFG_HAS_DIMENSION_MIN: true,
+    CFG_HAS_DIMENSION_MAX: true,
+    size_step: 0.5rem,
+    sizes: utils.get_fabric_conf(sizes)
+);
+
+$base-docs: ( 
+);

package/dist/scss/modules/base/base.scss

@@ -0,0 +1,58 @@
+@use "sass:map";
+
+p {
+  margin: auto;
+}
+
+.hover-parent {
+  .hover-show {
+    display: none;
+  }
+
+  .hover-hide {
+    display: initial;
+  }
+
+  &:hover {
+    .hover-show {
+      display: initial;
+    }
+
+    .hover-hide {
+      display: none;
+    }
+  }
+}
+
+.block:not(:last-child) {
+  margin-bottom: 1.5rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-block-start: 0 !important;
+  margin-block-end: 0 !important;
+  margin-inline-start: 0 !important;
+  margin-inline-end: 0 !important;
+}
+
+.box-content {
+  padding: 0.25rem;
+  margin: 0.25rem 0;
+}
+
+.cell-padding {
+  & > * {
+    padding: 0.25em;
+  }
+}
+
+.cell-spacing {
+  & > * {
+    margin: 0.25em;
+  }
+}