@medyll/cssfabric 0.1.12 → 0.2.0

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

@@ -1,287 +0,0 @@
-@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-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
-// 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;
-    --box-density-preset-#{$preset}: #{$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 #ededed";
-
-        #{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}: --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};
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// 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) {
-  $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);
-}

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

@@ -1,121 +0,0 @@
-@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"
-                ),
-                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/src/cssfabric/modules/box/box-responsive.scss

@@ -1,18 +0,0 @@
-
-@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/src/cssfabric/modules/box/box.scss

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

package/src/cssfabric/modules/color/_color-build.scss

@@ -1,196 +0,0 @@
-@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);
-    }
-  }
-
-}