@medyll/cssfabric 0.1.12 → 0.2.0

package/src/cssfabric/_utils.scss

@@ -1,203 +0,0 @@
-@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: 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} : #{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/src/cssfabric/index.d.ts

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

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

@@ -1,163 +0,0 @@
-@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;
-
-$theme-color-foreground: #282230 !default;
-$theme-color-background: #ffffff !default;
-$theme-color-paper: #f1f1f1 !default;
-
-$theme-dark-color-foreground: #f1f1f1 !default;
-$theme-dark-color-background: #27323a !default;
-$theme-dark-color-paper: #3a3b3b !default;
-
-$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-unit-presets: (tiny:0.5, small:1, medium:3, large:4) !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;
-
-$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: (
-                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/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;
-}