@medyll/cssfabric 0.2.0 → 0.2.1-beta.2

package/dist/scss/modules/box/_box-build.scss

@@ -0,0 +1,305 @@
+@use "sass:map";
+@use "sass:math";
+@use '../../_utils';
+@use "../cssfabric-config";
+@use "box-vars" as box;
+
+$fabric-config: cssfabric-config.$cssfabric-config;
+$box-config: box.$box-config;
+$box-docs: box.$box-docs;
+
+$box-border-shorthands: box.$box-border-shorthands;
+$box-position-props: box.$box-position-shorthands;
+$box-display-props: box.$box-display-shorthands;
+
+$box-unit-config: box.$box-unit-config;
+$box-border-unit-config: box.$box-border-unit-config;
+$box-unit-size-config: box.$box-unit-size-config;
+$box-unit-border-size-config: box.$box-unit-border-size-config;
+$box-sizes-config: box.$box-sizes-config;
+$box-border-sizes-px-config: box.$box-sizes-border-config;
+
+$box-position-shorthand-config: cssfabric-config.$box-position-shorthand !default;
+$box-display-shorthand-config: cssfabric-config.$box-display-shorthand !default;
+$box-shadow-shorthand-config: cssfabric-config.$box-shadow-shorthand !default;
+
+$box-border-shorthand-config: cssfabric-config.$box-border-shorthand !default;
+$box-padding-shorthand-config: cssfabric-config.$box-padding-shorthand !default;
+$box-margin-shorthand-config: cssfabric-config.$box-margin-shorthand !default;
+
+$box-gap-shorthand: cssfabric-config.$box-gap-shorthand !default;
+
+$box-shadows-steps: box.$box-shadows-steps !default;
+$box-shadows-step-multiplier: box.$box-shadows-step-multiplier !default;
+
+$box-radius: cssfabric-config.$box-radius; //
+$box-unit-presets: cssfabric-config.$box-unit-presets;
+
+$densities-ratios : cssfabric-config.$densities-ratios;
+
+// adding {border}-{r} shorthand css rule for .{border}-{r}-1
+@function raw_size_tag_rule($condition) {
+  @if ($condition==1) {
+    @return "&,";
+  } @else {
+    @return "";
+  }
+}
+
+// support ratios, set densities 
+// for paddings margins positions
+@mixin pmbCssVars() {
+  $iterator: $box-sizes-config;
+  @for $grid_size_value from 0 through $iterator {
+    $css_size_value: ($grid_size_value * $box-unit-size-config) + $box-unit-config;
+    --box-density-#{$grid_size_value} : #{$css_size_value};
+  }
+
+  // presets
+  @each $preset, $preset-value in $box-unit-presets{
+    // $value: ($preset-value * $box-unit-size-config) + $box-unit-config;
+    $value: $preset-value + $box-unit-config;
+    --box-density-preset-#{$preset}: #{$value};
+  }
+
+  // radius
+  @each $radius, $value in $box-radius{
+    --radius-#{$radius}: #{$value};
+  }
+
+  // $ratios: tiny small medium large full
+  @each $ratio, $val in $densities-ratios {
+    [density=#{$ratio}] {
+      @for $grid_size_value from 0 through $iterator {
+        $css_size_value: (($grid_size_value * $box-unit-size-config)*$val) + $box-unit-config;
+        --box-density-#{$grid_size_value} : #{$css_size_value};
+      }
+      // presets
+      @each $preset, $preset-value in $box-unit-presets{
+        $value: (($preset-value * $box-unit-size-config)*$val) + $box-unit-config;
+        --box-density-preset-#{$preset}: #{$value};
+      }
+    }
+  }
+}
+
+//  border
+@mixin fabric-pmb($fabric_box_position_prop, $fabric_box_position_prop_short) {
+  @each $fabric_box_pmb_side_shorthand, $rule in $box-border-shorthands {
+
+    // remove _ if present
+    $shorthand: if($fabric_box_pmb_side_shorthand== "_", "", -#{$fabric_box_pmb_side_shorthand});
+
+    .#{$fabric_box_position_prop_short}#{$shorthand} {
+
+      @for $grid_size_value from 1 through $box-border-sizes-px-config {
+        $css_size_value: ($grid_size_value * $box-unit-border-size-config) + $box-border-unit-config;
+        // css property name is aggregated with size value $i
+
+        $computed_value: $css_size_value + " solid var(--theme-color-border)";
+
+        #{raw_size_tag_rule($grid_size_value)} &-#{$grid_size_value} {
+          @if length($rule) == 4 {
+            #{$fabric_box_position_prop}: #{$computed_value};
+          } @else {
+
+            @each $rule_value in $rule {
+              #{$fabric_box_position_prop}-#{$rule_value}: #{$computed_value};
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// prop : ... margin | padding
+@mixin fabric-pm($fabric_box_position_prop, $fabric_box_position_prop_short) {
+  @each $fabric_box_pmb_side_shorthand, $rule in $box-border-shorthands {
+
+    $shorthand: if($fabric_box_pmb_side_shorthand== "_", "", -#{$fabric_box_pmb_side_shorthand});
+
+    .#{$fabric_box_position_prop_short}#{$shorthand} {
+
+      // presets
+      @each $preset, $preset-value in $box-unit-presets{
+        .#{$fabric_box_position_prop_short}#{$shorthand}-#{$preset}{
+          #{$fabric_box_position_prop}: var(--box-density-preset-#{$preset});
+        }
+      }
+
+      @for $grid_size_value from 1 through $box-sizes-config {
+        $css_size_value: ($grid_size_value * $box-unit-size-config) + $box-unit-config;
+        // css property name is aggregated with size value $i
+
+        $computed_value: var(--box-density-#{$grid_size_value});
+
+        #{raw_size_tag_rule($grid_size_value)} &-#{$grid_size_value} {
+          @if length($rule) == 4 {
+            #{$fabric_box_position_prop}: #{$computed_value};
+          } @else {
+            @each $rule_value in $rule {
+              #{$fabric_box_position_prop}-#{$rule_value}: #{$computed_value};
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin box-gap($mq_key) {
+  $shorthand: if($mq_key, #{$box-gap-shorthand}-#{$mq_key}, #{$box-gap-shorthand});
+  // presets
+  @each $preset, $preset-value in $box-unit-presets{
+    .#{$shorthand}-#{$preset}{
+      #{$shorthand}: var(--box-density-preset-#{$preset});
+    }
+  }
+}
+// pmb as padding margin border property
+// padding-tiny padding-small padding
+@mixin padding-margin-border($mq_key) {
+
+  $shorthand: if($mq_key, #{$box-margin-shorthand-config}-#{$mq_key}, #{$box-margin-shorthand-config});
+  @include fabric-pm(margin, $shorthand);
+
+  $shorthand: if($mq_key, #{$box-padding-shorthand-config}-#{$mq_key}, #{$box-padding-shorthand-config});
+  @include fabric-pm(padding, $shorthand);
+
+  $shorthand: if($mq_key, #{$box-border-shorthand-config}-#{$mq_key}, #{$box-border-shorthand-config});
+  @include fabric-pmb(border, $shorthand);
+
+}
+
+// radius
+@mixin radius($mq_key) {
+  $shorthand: if($mq_key, radius-#{$mq_key}, 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-density-#{$size});
+      }
+    }
+  }
+}
+
+// display property
+@mixin display($mq_key) {
+
+  $shorthand: if($mq_key, #{$box-display-shorthand-config}-#{$mq_key}, #{$box-display-shorthand-config});
+
+  @each $css-shorthand, $css-value in $box-display-props {
+    // css property
+    $prop_re: #{$shorthand}-#{$css-shorthand};
+
+    .#{$prop_re} {
+      display: $css-value;
+    }
+  }
+}
+
+// position property
+@mixin position($mq_key) {
+  $shorthand: if($mq_key, #{$box-position-shorthand-config}-#{$mq_key}, #{$box-position-shorthand-config});
+
+  @each $css-shorthand, $css-value in $box-position-props {
+    // css property
+    $prop_re: #{$shorthand}-#{$css-shorthand};
+
+    .#{$prop_re} {
+      position: $css-value;
+      // if sticky
+      @if sticky == $css-value {
+        top: 0;
+        margin-top: 0;
+      }
+    }
+  }
+}
+
+@function buildShadowsValues($shadows_step:0,$shadow-color: null) {
+  $v_fact: 2.4;
+  $h_fact: 1.16;
+
+  $v_fact_2: 13.1;
+  $h_fact_2: 4.3;
+
+  $acc: 1;
+
+  $acc: $acc * $shadows_step * 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);
+
+  @return 0 #{$v_val}px #{$h_val}px 0 rgb(0 0 0 / 15%), 0 #{$v_val_2}px #{$h_val_2}px 0 rgb(0 0 0 / 10%);
+}
+
+@mixin shadows($mq_key) {
+  $shorthand: if($mq_key, #{$box-shadow-shorthand-config}-#{$mq_key}, #{$box-shadow-shorthand-config});
+
+  @for $shadows_step from 1 through $box-shadows-steps {
+
+    .#{$shorthand}-#{$shadows_step} {
+      box-shadow: var(--box-#{$shorthand}-#{$shadows_step});
+    }
+  }
+}
+
+// css vars rendered in :root
+@mixin shadowsCssVars($mq_key:null) {
+  $shorthand: if($mq_key, #{$box-shadow-shorthand-config}-#{$mq_key}, #{$box-shadow-shorthand-config});
+
+  @for $shadows_step from 1 through $box-shadows-steps {
+    --box-#{$shorthand}-#{$shadows_step}: #{buildShadowsValues($shadows_step)};
+  }
+}
+
+@mixin buildBox($mq_key: null) {
+  @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);
+  @include box-gap($mq_key);
+}

package/dist/scss/modules/box/_box-vars.scss

@@ -0,0 +1,121 @@
+@use '../../utils';
+@use "../cssfabric-config";
+
+$box-unit-config: rem;
+$box-border-unit-config: px;
+$box-unit-size-config: 0.5;
+$box-unit-border-size-config: 1;
+
+$box-sizes-config: 12;
+$box-sizes-border-config: 3;
+
+$box-shadows-steps: 5;
+$box-shadows-step-multiplier: 2;
+
+$_shadows-v_fact: 2.4;
+$_shadows-h_fact: 1.16;
+
+$_shadows-v_fact_2: 13.1;
+$_shadows-h_fact_2: 4.3;
+
+$shadow-factors: (
+        v_fact:$_shadows-v_fact,
+        h_fact:$_shadows-h_fact,
+        v_fact_2:$_shadows-v_fact_2,
+        h_fact_2:$_shadows-h_fact_2,
+)!default;
+
+$box-border-shorthands: (
+        _: top bottom left right,
+        t: top,
+        b: bottom,
+        l: left,
+        r: right,
+        all: top bottom left right,
+        u: bottom left right,
+        ii: left right,
+        tb: top bottom
+)!default;
+
+$box-position-shorthands: (
+        abs: absolute,
+        rel: relative,
+        stat: static,
+        fix: fixed,
+        sticky: sticky
+)!default;
+
+$box-display-shorthands: (
+        block: block,
+        none: none,
+        inline: inline,
+        block-inline: inline-block,
+        flex-inline: inline-flex,
+        tbl: table,
+        tbl-row: table-row,
+        tbl-cell: table-cell,
+        tbl-column: table-column
+);
+
+$box-metadata: (
+        title: "box",
+        tag: "box",
+        description: "cssfabric box module to set heights, paddings, margins and shadows on all html elements"
+);
+
+$box-config: (
+        unit-config: $box-unit-config,
+        border-unit-config: $box-border-unit-config,
+        unit-size-config: $box-unit-size-config,
+        unit-border-size-config: $box-unit-border-size-config,
+        sizes-config: $box-sizes-config,
+        border-sizes-px-config: $box-sizes-border-config,
+        shadows-steps: $box-shadows-steps,
+        shadows_step_multiplier: $box-shadows-step-multiplier,
+  //
+        position-shorthand-config: cssfabric-config.$box-position-shorthand,
+        display-shorthand-config: cssfabric-config.$box-display-shorthand,
+        shadow-shorthand-config:cssfabric-config.$box-shadow-shorthand,
+        border-shorthand-config: cssfabric-config.$box-border-shorthand,
+        padding-shorthand-config: cssfabric-config.$box-padding-shorthand,
+        margin-shorthand-config: cssfabric-config.$box-margin-shorthand,
+
+        cssProps:(
+                borderShorthands: $box-border-shorthands,
+                positionProps: $box-position-shorthands,
+                displayProps: $box-display-shorthands
+        )
+);
+
+$box-docs: (
+        attributes:(
+                padding: (
+                        tag:  cssfabric-config.$box-padding-shorthand,
+                        keys: utils.getObjectKeys($box-border-shorthands),
+                        values: utils.getBoxIterator($box-sizes-config, $box-unit-config, $box-unit-size-config),
+                        levels: ("_":utils.getObjectKeys(utils.getBoxIterator($box-sizes-config, $box-unit-config, $box-unit-size-config))),
+                        about: "padding properties for html elements"
+                ),
+                margin: (
+                        tag: cssfabric-config.$box-margin-shorthand,
+                        keys: utils.getObjectKeys($box-border-shorthands),
+                        values: utils.getBoxIterator($box-sizes-config, $box-unit-config, $box-unit-size-config),
+                        levels: ("_":utils.getObjectKeys(utils.getBoxIterator($box-sizes-config, $box-unit-config, $box-unit-size-config))),
+                        about: "margin properties for html elements"
+                ),
+                border: (
+                        tag: cssfabric-config.$box-border-shorthand,
+                        keys: utils.getObjectKeys($box-border-shorthands),
+                        values: utils.getBoxIterator($box-sizes-border-config, $box-border-unit-config, $box-unit-border-size-config),
+                        levels: ("_":utils.getObjectKeys(utils.getBoxIterator($box-sizes-border-config, $box-border-unit-config, $box-unit-border-size-config))),
+                        about: "border properties for html elements"
+                ),
+                radius : (tag: radiusGuy),
+                shadow: (
+                        tag: cssfabric-config.$box-shadow-shorthand,
+                        values: utils.getShadowIterator($shadow-factors, $box-shadows-steps),
+                        levels:("_": utils.getObjectKeys(utils.getShadowIterator($shadow-factors, $box-shadows-steps))
+                        ),
+                        about: "applying shadows give depth and levels to your design"
+                )
+        ));

package/dist/scss/modules/box/box-responsive.scss

@@ -0,0 +1,18 @@
+
+@use '../../_utils';
+@use "_box-build" as build; 
+@use "../cssfabric-config";
+// load general config variables
+$config: cssfabric-config.$cssfabric-config;
+
+$_media_quey_sizes: map-get($config, media_quey_sizes);
+
+// responsive builder here
+$min_value: 0;
+
+@each $mq_size_key, $mq_size_value in $_media_quey_sizes {
+  @include utils.fabricResponsiveEncloser($mq_size_value, $min_value) {
+    @include build.buildBox($mq_size_key);
+  }
+  $min_value: $mq_size_value;
+}

package/dist/scss/modules/box/box.scss

@@ -0,0 +1,3 @@
+@use "_box-build" as build; 
+//
+@include build.buildBox(); 

package/dist/scss/modules/color/_color-build.scss

@@ -0,0 +1,196 @@
+@use "sass:map";
+@use 'color-vars';
+@use "sass:math";
+// load scss config file
+@use '../../_utils';
+@use '../cssfabric-config';
+
+$color-config: color-vars.$color-config;
+
+// COLOR TYPES
+$color-types-config: map-get($color-config, color-types-config);
+// COLOR SCHEMES
+$color-schemes: map-get($color-config, scheme) !default;
+// COLOR PALETTE
+$color-palette: map-get($color-config, palette) !default;
+// COLOR THEME 
+$color-theme: map-get($color-config, theme) !default;
+
+
+// GRAYS
+$color-gray-start: cssfabric-config.$gray-start !default;
+$color-gray-end: cssfabric-config.$gray-end !default;
+$color-gray-steps: cssfabric-config.$gray-steps !default;
+$gray-schemes: utils.getGraySteps($color-gray-steps, $color-gray-start, $color-gray-end);
+
+
+
+
+
+@function text-contrast($n) {
+  $color-brightness: round((red($n) * 299) + (green($n) * 587) +  math.div(blue(#ffffff) * 114, 1000));
+  $light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + math.div(blue(#ffffff) * 114, 1000));
+  $color: black;
+
+  @if abs($color-brightness) < math.div($light-color,2) {
+    $color: white;
+  }
+
+  @return $color;
+}
+
+@mixin buildColorCssVars() {
+
+  /* color-scheme primary secondary tertiary */
+  @each $type-key, $type-prop in $color-schemes {
+    --color-scheme-#{$type-key} : #{$type-prop};
+    --color-scheme-#{$type-key}-light: #{utils.applyColorEffect('light',$type-prop)};
+    --color-scheme-#{$type-key}-dark: #{utils.applyColorEffect('dark',$type-prop)};
+    @include utils.alphaTize(--color-scheme-#{$type-key}, $type-prop);
+  }
+
+  /* color-palette */
+  @each $type-key, $type-prop in $color-palette {
+    --color-palette-#{$type-key} : #{$type-prop};
+    @include utils.alphaTize(--color-palette-#{$type-key}, $type-prop);
+
+    --color-palette-#{$type-key}-lighter: #{utils.applyColorEffect('lighter',$type-prop)};
+    --color-palette-#{$type-key}-light: #{utils.applyColorEffect('light',$type-prop)};
+    --color-palette-#{$type-key}-dark: #{utils.applyColorEffect('dark',$type-prop)};
+    --color-palette-#{$type-key}-darker: #{utils.applyColorEffect('darker',$type-prop)};
+
+    --color-palette-#{$type-key}-complement: #{utils.applyColorEffect('complement',$type-prop)};
+    @include utils.alphaTize(--color-palette-#{$type-key}-complement, utils.applyColorEffect('complement', $type-prop));
+
+    --color-palette-#{$type-key}-invert: #{utils.applyColorEffect('invert',$type-prop)};
+    @include utils.alphaTize(--color-palette-#{$type-key}-invert, utils.applyColorEffect('invert', $type-prop));
+    // backdrop-filter: blur(5px);
+  }
+
+  /* grays */
+  @each $type-key, $type-prop in $gray-schemes {
+    --color-gray-#{$type-key} : #{$type-prop};
+    @include utils.alphaTize(--color-gray-#{$type-key}, $type-prop);
+  }
+}
+
+@mixin colorFactory($tag_short, $color_prop) {
+  $switch-tag_short: utils.getColorPropertyType($tag_short);
+
+  @each $colorTint in (light lighter dark darker complement invert) {
+
+    $newColor: utils.applyColorEffect($colorTint, $color_prop);
+
+    &-#{$colorTint} {
+      @if $tag_short== "bg-themed" {
+        color: text-contrast($newColor);
+      }
+      #{$switch-tag_short}: $newColor;
+    }
+  }
+}
+
+@mixin fabricColors($color-type,$color-type-list, $color-type-key, $mq-key, $has-color-factory:null) {
+
+  $switch-tag_short: utils.getColorPropertyType($color-type-key);
+
+  $prop: "";
+
+  $property_key: #{$color-type-key}-#{$color-type} + if($mq-key, -#{$mq-key}, "");
+
+
+  .#{$property_key} {
+    @each $type-key, $type-prop in $color-type-list {
+      &#{"-" + $type-key} {
+
+        // border-color: ;
+        @if $color-type-key==border-color {
+          border-color: utils.applyColorEffect('dark', $type-prop) !important;
+        }
+
+        @if $color-type-key==foreground {
+          color: $type-prop;
+          @if $has-color-factory {
+            @include colorFactory($color-type-key, $type-prop);
+          }
+        }
+
+        @if $color-type-key==bg {
+          background-color: $type-prop;
+          @if $has-color-factory {
+            @include colorFactory($color-type-key, $type-prop);
+          }
+        }
+
+        @if $color-type-key == "bg-themed" {
+          color: text-contrast($type-prop);
+          text-shadow: 0 0 0.125rem utils.applyColorEffect("dark", $type-prop);
+          background-color: $type-prop;
+          @if $has-color-factory {
+            @include colorFactory($color-type-key, $type-prop);
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin buildColor($mq_size_key:null) {
+  // "foreground"  ,
+  // "bg",
+  // "bg-themed",
+  // "border-color"
+
+  // $has-color-palette
+  @if ((cssfabric-config.$has-color-palette==true) or ($mq_size_key!=null and cssfabric-config.$has-color-palette-responsive==true)) {
+    // $has-color-foreground
+    @if (cssfabric-config.$has-color-foreground) {
+      @include fabricColors("palette", $color-palette, foreground, $mq_size_key, true);
+    }
+    // $has-color-bg
+    @if (cssfabric-config.$has-color-bg) {
+      @include fabricColors("palette", $color-palette, bg, $mq_size_key, true);
+    }
+    // $has-color-bg-themed
+    @if (cssfabric-config.$has-color-bg-themed) {
+      @include fabricColors("palette", $color-palette, bg-themed, $mq_size_key, true);
+    }
+    // $has-color-border
+    @if (cssfabric-config.$has-color-border) {
+      @include fabricColors("palette", $color-palette, border-color, $mq_size_key, true);
+    }
+  }
+
+  // $has-color-scheme
+  @if ((cssfabric-config.$has-color-scheme==true) or ($mq_size_key!=null and cssfabric-config.$has-color-scheme-responsive==true)) {
+    @if (cssfabric-config.$has-color-foreground) {
+      @include fabricColors("scheme", $color-schemes, foreground, $mq_size_key, true);
+    }
+    @if (cssfabric-config.$has-color-bg) {
+      @include fabricColors("scheme", $color-schemes, bg, $mq_size_key, true);
+    }
+    @if (cssfabric-config.$has-color-bg-themed) {
+      @include fabricColors("palette", $color-schemes, bg-themed, $mq_size_key, true);
+    }
+    @if (cssfabric-config.$has-color-border) {
+      @include fabricColors("scheme", $color-schemes, border-color, $mq_size_key);
+    }
+  }
+
+  // $has-color-gray
+  @if ((cssfabric-config.$has-color-gray==true) or ($mq_size_key!=null and cssfabric-config.$has-color-gray-responsive==true)) {
+    @if (cssfabric-config.$has-color-foreground) {
+      @include fabricColors("grey", $gray-schemes, foreground, $mq_size_key, true);
+    }
+    @if (cssfabric-config.$has-color-bg) {
+      @include fabricColors("grey", $gray-schemes, bg, $mq_size_key, true);
+    }
+    @if (cssfabric-config.$has-color-bg-themed) {
+      @include fabricColors("palette", $gray-schemes, bg-themed, $mq_size_key, true);
+    }
+    @if (cssfabric-config.$has-color-border) {
+      @include fabricColors("grey", $gray-schemes, border-color, $mq_size_key);
+    }
+  }
+
+}