@medyll/cssfabric 0.1.0 → 0.2.0

package/src/cssfabric/_utils.scss

@@ -1,193 +0,0 @@
-@use "sass:string";
-@use "sass:map";
-@use "sass:math";
-// 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: 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)};
-    }
-  }
-}
-
-@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,
-                          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/src/cssfabric/index.d.ts

@@ -1,3 +0,0 @@
-declare const module;
-
-export default module;

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

@@ -1,93 +0,0 @@
-@use "sass:map";
-@use "sass:math";
-
-$cssfabric-metadata: (
-        title: "cssfabric",
-        tag: "cssfabric",
-        description: "cssfabric global config variables"
-);
-
-$cssfabric-config: (
-        cfg-has-dimension-strict: true,
-        CFG_HAS_DIMENSION_MIN: true,
-        CFG_HAS_DIMENSION_MAX: true,
-        size_step: 0.5rem,
-        sep: "-",
-        sizes: (
-                tiny: 32,
-                small: 64,
-                medium: 128,
-                large: 256,
-                full: 100%
-        ),
-        media_quey_sizes: (
-                xxl: 1300,
-                xl: 1200,
-                lg: 960,
-                md: 760,
-                sm: 0
-        ),
-        themes:(
-                light:(
-                        foreground: #282230,
-                        background: #f1f1f1,
-                        paper: #ededed
-                ),
-                dark:(
-                        foreground: #f1f1f1,
-                        background: #27323a,
-                        paper: #3a3b3b
-                ),
-        ),
-        theme: (
-                primary: #0288d1,
-                secondary: #D14B02,
-                tertiary: #88D102,
-                foreground: #282230,
-                background: #f1f1f1,
-        ),
-        scheme: (
-                discrete: #ccc,
-                success: green,
-                info: hsl(48, 100%, 67%),
-                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(8, #f4f4f4, #999),
-        gray-config: (
-                start: #f4f4f4,
-                end: #999,
-                steps: 8
-        )
-);
-
-@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);
-  }
-  @debug $gray-schemes;
-
-  @return $gray-schemes;
-}
-
-$cssfabric-docs: ();

package/src/cssfabric/modules/_mixins.scss

@@ -1 +0,0 @@
-  

package/src/cssfabric/modules/animation/_animation-vars.scss

@@ -1,17 +0,0 @@
-$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/src/cssfabric/modules/animation/animation.scss

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

package/src/cssfabric/modules/base/_base-vars.scss

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

@@ -1,80 +0,0 @@
-@use "sass:map";
-@use '../../../vendor/normalize/normalize.min.css';
-
-
-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;
-}
-
-
-
-
-label, .label {
-  padding: 0.125rem 0.5rem;
-  border: 1px solid #ccc;
-  display: inline-block;
-  border-radius: 4px;
-  background-color: #ededed;
-  text-shadow: white;
-}
-
-.box-content {
-  padding: 0.25rem;
-  margin: 0.25rem 0;
-}
-
-.cell-padding {
-  & > *  {
-    padding: 0.25em;
-  }
-}
-
-.cell-spacing {
-  & > *  {
-    margin: 0.25em;
-  }
-}
-
-code {
-  padding: 0.25em;
-  border: 1px solid #cccccc;
-  background-color: #ededed;
-  border-radius: 5px;
-}

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

@@ -1,268 +0,0 @@
-@use "sass:map";
-@use "sass:math";
-@use '../../_utils';
-@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;
-
-$cssProps: map-get($box-config, cssProps);
-$box-border-shorthands: map-get($cssProps, borderShorthands);
-$box-position-props: map-get($cssProps, positionProps);
-$box-display-props: map-get($cssProps, displayProps);
-
-$box-unit-config: map-get($box-config, unit-config);
-$box-border-unit-config: map-get($box-config, border-unit-config);
-$box-unit-size-config: map-get($box-config, unit-size-config);
-$box-unit-border-size-config: map-get($box-config, unit-border-size-config);
-$box-sizes-config: map-get($box-config, sizes-config);
-$box-border-sizes-px-config: map-get($box-config, border-sizes-px-config);
-
-$box-position-shorthand-config: map-get($box-config, position-shorthand-config) !default;
-$box-display-shorthand-config: map-get($box-config, display-shorthand-config) !default;
-$box-shadow-shorthand-config: map-get($box-config, shadow-shorthand-config) !default;
-
-$box-border-shorthand-config: map-get($box-config, border-shorthand-config) !default;
-$box-padding-shorthand-config: map-get($box-config, padding-shorthand-config) !default;
-$box-margin-shorthand-config: map-get($box-config, margin-shorthand-config) !default;
-
-$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,
-        margin: $box-margin-shorthand-config
-);
-
-
-// adding {border}-{r} shorthand css rule for .{border}-{r}-1
-@function raw_size_tag_rule($condition) {
-  @if ($condition==1) {
-    @return "&,";
-  } @else {
-    @return "";
-  }
-}
-
-@function write-box-rule($_args) {
-  $rule_value: map-get($_args, rule_value);
-  $rule_type: map-get($_args, rule_type);
-  $css_prop: map-get($_args, css_prop);
-  $grid_size_value: map-get($_args, grid_size_value);
-
-  $computed_value: "";
-
-
-  //
-  @if ($css_prop== "padding" or $css_prop== "margin") {
-    $computed_value: var(--box-unit-#{$grid_size_value});
-  }
-
-  // complex write method: 1px value
-  @if ($css_prop== "border") {
-    $computed_value: $rule_value + " solid #ccc";
-  }
-
-  @return $computed_value;
-}
-
-@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-unit-#{$grid_size_value} : #{$css_size_value};
-  }
-}
-
-// prop : ...top bottom for  border | margin | padding
-@mixin fabric-pmb($fabric_box_position_prop, $fabric_box_position_prop_short) {
-  @each $fabric_box_pmb_side_shorthand, $rule in $box-border-shorthands {
-    $iterator: if($fabric_box_position_prop== border, $box-border-sizes-px-config, $box-sizes-config);
-    $unit: if($fabric_box_position_prop== border, $box-border-unit-config, $box-unit-config);
-    // box_unit_border_size
-    $unit_size: if($fabric_box_position_prop== border, $box-unit-border-size-config, $box-unit-size-config);
-
-    // css property name
-    // remove _ is present
-    $shorthand: if($fabric_box_pmb_side_shorthand== "_", "", -#{$fabric_box_pmb_side_shorthand});
-
-    .#{$fabric_box_position_prop_short}#{$shorthand} {
-      // todo use utils.getBoxIterator
-      @for $grid_size_value from 1 through $iterator {
-        $css_size_value: ($grid_size_value * $unit_size) + $unit;
-        // css property name is aggregated with size value $i
-        #{raw_size_tag_rule($grid_size_value)} &-#{$grid_size_value} {
-          @if length($rule) ==4 {
-            $_args: (
-                    rule_value: $css_size_value,
-                    rule_type: "pmb",
-                    css_prop: $fabric_box_position_prop,
-                    grid_size_value: $grid_size_value
-            );
-
-            #{$fabric_box_position_prop}: write-box-rule($_args);
-          } @else {
-
-            @each $rule_value in $rule {
-              $_args: (
-                      rule_value: $css_size_value,
-                      rule_type: "pmb",
-                      css_prop: $fabric_box_position_prop,
-                      grid_size_value: $grid_size_value
-              );
-
-              #{$fabric_box_position_prop}-#{$rule_value}: write-box-rule($_args);
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// stupid, make three calls
-// pmb as padding margin border property
-@mixin padding-margin-border($mq_key) {
-  @each $box_pmb_shorthand_value, $box_pmb_shorthand in $css-shorthands {
-    $shorthand: if($mq_key, #{$box_pmb_shorthand}-#{$mq_key}, #{$box_pmb_shorthand});
-
-    @include fabric-pmb($box_pmb_shorthand_value, $shorthand);
-  }
-}
-
-// 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) {
-
-  $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);
-}