@medyll/cssfabric 0.0.10

package/src/_generated/export.variables.md

@@ -0,0 +1,240 @@
+# Welcome to cssfabric
+
+
+Willing to bring my utility-first 2011 css framework to a more decent life !
+
+
+This is also a learning point about gulp, webpack, packages and friends.
+
+> yaocf !
+
+
+<br/>
+
+## Incoming features
+
+
+<br/>
+
+| modules |     |
+| ------- | --- |
+| cssfabric | cssfabric global config variables
+animation | cssfabric simplest animation module
+box | cssfabric box module to set heights, paddings, margins and shadows on all html elements
+base | cssfabric base config variables
+color | cssfabric color system: its about colors
+grid | cssfabric flex grid system module
+menu | cssfabric menu module to set menu style
+overflow | cssfabric overflow module to set overflow styles on all html elements
+scale | cssfabric scale module to set dimensions and ratios on all html elements
+table | cssfabric table module to set different table styles
+text | cssfabric text module to set text style on all html elements
+theme | 
+zindex | cssfabric zindex module to set z-index on all html elements |
+
+
+<br/>
+
+
+
+
+<br/>
+
+### More details
+
+---
+
+#### <strong>module box</strong>
+
+#### [padding]
+
+
+- padding properties for html elements
+
+
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  pad
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: _&nbsp;&nbsp;t&nbsp;&nbsp;b&nbsp;&nbsp;l&nbsp;&nbsp;r&nbsp;&nbsp;all&nbsp;&nbsp;u&nbsp;&nbsp;ii&nbsp;&nbsp;tb
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>level keys</b></span>:<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _</span>: _&nbsp;&nbsp;&nbsp;&nbsp;1&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;5&nbsp;&nbsp;&nbsp;&nbsp;6&nbsp;&nbsp;&nbsp;&nbsp;7&nbsp;&nbsp;&nbsp;&nbsp;8
+
+#### [margin]
+
+
+- margin properties for html elements
+
+
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  marg
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: _&nbsp;&nbsp;t&nbsp;&nbsp;b&nbsp;&nbsp;l&nbsp;&nbsp;r&nbsp;&nbsp;all&nbsp;&nbsp;u&nbsp;&nbsp;ii&nbsp;&nbsp;tb
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>level keys</b></span>:<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _</span>: _&nbsp;&nbsp;&nbsp;&nbsp;1&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;5&nbsp;&nbsp;&nbsp;&nbsp;6&nbsp;&nbsp;&nbsp;&nbsp;7&nbsp;&nbsp;&nbsp;&nbsp;8
+
+#### [border]
+
+
+- border properties for html elements
+
+
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  border
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: _&nbsp;&nbsp;t&nbsp;&nbsp;b&nbsp;&nbsp;l&nbsp;&nbsp;r&nbsp;&nbsp;all&nbsp;&nbsp;u&nbsp;&nbsp;ii&nbsp;&nbsp;tb
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>level keys</b></span>:<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _</span>: _&nbsp;&nbsp;&nbsp;&nbsp;1&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;5
+
+#### [shadow]
+
+
+- applying shadows give depth and levels to your design
+
+
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  shad
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>level keys</b></span>:<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _</span>: 2&nbsp;&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;8&nbsp;&nbsp;&nbsp;&nbsp;16&nbsp;&nbsp;&nbsp;&nbsp;32&nbsp;&nbsp;&nbsp;&nbsp;64&nbsp;&nbsp;&nbsp;&nbsp;128&nbsp;&nbsp;&nbsp;&nbsp;256
+
+---
+
+#### <strong>module color</strong>
+
+#### [color]
+
+
+- color for text level html elements
+
+
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  color
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: scheme&nbsp;&nbsp;palette&nbsp;&nbsp;gray
+
+#### [background-color]
+
+
+- background colors
+
+
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  bg
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: scheme&nbsp;&nbsp;palette&nbsp;&nbsp;gray
+
+#### [background-themed]
+
+
+- same as background-color, but with added contrasted color to text
+
+
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  bg-themed
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: scheme&nbsp;&nbsp;palette&nbsp;&nbsp;gray
+
+#### [border-color]
+
+
+- border colors are slightly darker to maximize surrounding effect
+
+
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  border-color
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: palette&nbsp;&nbsp;gray
+
+---
+
+#### <strong>module grid</strong>
+
+#### [grid]
+
+
+- a classic grid system, and hey, it gets height !
+
+
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  grid
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: v&nbsp;&nbsp;h
+
+#### [self]
+
+
+- grid children specific classnames
+
+
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  self
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: start&nbsp;&nbsp;end&nbsp;&nbsp;stretch
+
+---
+
+#### <strong>module menu</strong>
+
+#### [menu]
+
+
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  menu
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: h&nbsp;&nbsp;v
+
+---
+
+#### <strong>module overflow</strong>
+
+#### [overflow]
+
+
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  flow
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: visible&nbsp;&nbsp;hidden&nbsp;&nbsp;clip&nbsp;&nbsp;scroll&nbsp;&nbsp;auto
+
+#### [overflowX]
+
+
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  flowX
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: visible&nbsp;&nbsp;hidden&nbsp;&nbsp;clip&nbsp;&nbsp;scroll&nbsp;&nbsp;auto
+
+#### [overflowY]
+
+
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  flowY
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: visible&nbsp;&nbsp;hidden&nbsp;&nbsp;clip&nbsp;&nbsp;scroll&nbsp;&nbsp;auto
+
+---
+
+#### <strong>module scale</strong>
+
+#### [scale]
+
+
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  scale
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: w&nbsp;&nbsp;h
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>level keys</b></span>:<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _size</span>: full&nbsp;&nbsp;&nbsp;&nbsp;mid&nbsp;&nbsp;&nbsp;&nbsp;quarter&nbsp;&nbsp;&nbsp;&nbsp;tiers<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _content</span>: content-max&nbsp;&nbsp;&nbsp;&nbsp;content-min<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _defined-steps</span>: 1&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;8&nbsp;&nbsp;&nbsp;&nbsp;16&nbsp;&nbsp;&nbsp;&nbsp;24&nbsp;&nbsp;&nbsp;&nbsp;32&nbsp;&nbsp;&nbsp;&nbsp;48&nbsp;&nbsp;&nbsp;&nbsp;64<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _grid-5</span>: 1-5&nbsp;&nbsp;&nbsp;&nbsp;2-5&nbsp;&nbsp;&nbsp;&nbsp;3-5&nbsp;&nbsp;&nbsp;&nbsp;4-5&nbsp;&nbsp;&nbsp;&nbsp;5-5<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _grid-12</span>: 1-12&nbsp;&nbsp;&nbsp;&nbsp;2-12&nbsp;&nbsp;&nbsp;&nbsp;3-12&nbsp;&nbsp;&nbsp;&nbsp;4-12&nbsp;&nbsp;&nbsp;&nbsp;5-12&nbsp;&nbsp;&nbsp;&nbsp;6-12&nbsp;&nbsp;&nbsp;&nbsp;7-12&nbsp;&nbsp;&nbsp;&nbsp;8-12&nbsp;&nbsp;&nbsp;&nbsp;9-12&nbsp;&nbsp;&nbsp;&nbsp;10-12&nbsp;&nbsp;&nbsp;&nbsp;11-12&nbsp;&nbsp;&nbsp;&nbsp;12-12
+
+---
+
+#### <strong>module table</strong>
+
+#### [table]
+
+
+- is a table
+
+
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  table
+
+---
+
+#### <strong>module text</strong>
+
+#### [text-transform]
+
+
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  text
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: cap&nbsp;&nbsp;up&nbsp;&nbsp;low&nbsp;&nbsp;none&nbsp;&nbsp;full
+
+#### [font-weight]
+
+
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  text
+
+#### [text-align]
+
+
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  text
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: l&nbsp;&nbsp;r&nbsp;&nbsp;center&nbsp;&nbsp;justify
+
+#### [text-shadow]
+
+
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  text-shad
+
+---
+
+#### <strong>module theme</strong>
+
+#### [theme]
+
+
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  theme
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: text&nbsp;&nbsp;bg&nbsp;&nbsp;border
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>level keys</b></span>:<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- primary</span>: _&nbsp;&nbsp;&nbsp;&nbsp;light&nbsp;&nbsp;&nbsp;&nbsp;lighter&nbsp;&nbsp;&nbsp;&nbsp;dark&nbsp;&nbsp;&nbsp;&nbsp;darker&nbsp;&nbsp;&nbsp;&nbsp;complement&nbsp;&nbsp;&nbsp;&nbsp;invert<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- secondary</span>: _&nbsp;&nbsp;&nbsp;&nbsp;light&nbsp;&nbsp;&nbsp;&nbsp;lighter&nbsp;&nbsp;&nbsp;&nbsp;dark&nbsp;&nbsp;&nbsp;&nbsp;darker&nbsp;&nbsp;&nbsp;&nbsp;complement&nbsp;&nbsp;&nbsp;&nbsp;invert<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- tertiary</span>: _&nbsp;&nbsp;&nbsp;&nbsp;light&nbsp;&nbsp;&nbsp;&nbsp;lighter&nbsp;&nbsp;&nbsp;&nbsp;dark&nbsp;&nbsp;&nbsp;&nbsp;darker&nbsp;&nbsp;&nbsp;&nbsp;complement&nbsp;&nbsp;&nbsp;&nbsp;invert

package/src/_generated/index.d.ts

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

package/src/cssfabric/_utils.scss

@@ -0,0 +1,205 @@
+@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 + rem) {
+    @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 themeDeclinationColors($theme-color: primary, $theme-color-primary) {
+  $switch-theme-color: map-get(
+                  (
+                          primary: $theme-color-primary,
+                          secondary: complement($theme-color-primary),
+                          tertiary: complement(complement($theme-color-primary))
+                  ),
+                  $theme-color
+  );
+
+  @return $switch-theme-color;
+}
+
+@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: ();
+  @each $color-grade in $declinations-config {
+    $color: themeDeclinationColors($color-grade, $color_primary);
+    $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

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

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

@@ -0,0 +1,89 @@
+@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: (
+                xxxl: 180,
+                xxl: 120,
+                xl: 90,
+                lg: 64,
+                md: 48,
+                sm: 35.7
+        ),
+        themes:(
+                light:(
+                        foreground: #282230,
+                        background: #f1f1f1,
+                        paper: #ededed
+                ),
+                dark:(
+                        foreground: #f1f1f1,
+                        background: #27323a,
+                        paper: #3a3b3b
+                ),
+        ),
+        theme: (
+                primary: #0288d1,
+                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,
+        ),
+        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

@@ -0,0 +1 @@
+  

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

@@ -0,0 +1,121 @@
+@use 'animation-vars';
+
+$animation-config: animation-vars.$animation-config;
+
+// load scss config file
+@use '../../_utils' as utils;
+
+$fabric_attention_props: map-get($animation-config, attention_props);
+$fabric_in_out_props: map-get($animation-config, in_out_props);
+
+$vectorDirections: (up right bottom left);
+
+
+// up down right left
+@function getVectorPropertyObject($vectorDirection) {
+
+  $move: '';
+  $direction: '';
+
+  $model: (up:(translation:translateY, direction: '-'),
+          bottom:(translation:translateY, direction: '+'),
+          right:(translation:translateX, direction: '+'),
+          left:(translation:translateX, direction: '-'));
+
+  $test: map-get($model, $vectorDirection);
+
+  @return (translation:map-get($test, translation), direction:map-get($test, direction));
+
+}
+
+@function draw ($vectorMove, $vectorDirection, $vectorValue) {
+
+  @return (#{$vectorMove}(#{$vectorDirection}#{$vectorValue}));
+}
+
+//
+@mixin debug($family, $vector, $corner) {
+
+  $vectorMove: null;
+  $cornerMove: null;
+
+  $vectorProperty: getVectorPropertyObject($vector);
+
+  $vectorMove: map-get($vectorProperty, translation); // 'translate' XY
+  $vectorDirection: map-get($vectorProperty, direction); // + || -
+
+  $val: draw($vectorMove, $vectorDirection, '10px');
+
+  @if $corner {
+    $cornerProperty: getVectorPropertyObject($corner);
+
+    $cornerMove: map-get($cornerProperty, translation); // 'translate' XY
+    $cornerDirection: map-get($cornerProperty, direction); // + || -
+
+    $val: #{$val} draw($cornerMove, $cornerDirection, '10px');;
+  }
+
+  $fabricClassName: 'animate-'+$family+'-'+$vector+if($corner, '-'+$corner, null);
+
+  @if $vectorMove !=$cornerMove {
+
+    @keyframes #{$fabricClassName} {
+
+      0% {
+        transform: scale(1);
+        opacity: 1;
+      }
+
+      30% {
+        transform: #{$val} scale(0.7);
+        opacity: 0.7;
+      }
+
+      100% {
+        transform: #{$val} scale(0.7);
+        opacity: 0.5;
+      }
+    }
+
+    .#{$fabricClassName} {
+      animation-name: #{$val};
+    }
+  }
+}
+
+
+@mixin fabric_animation() {
+  // left right down up #{$anim_dir_more}
+  @each $animate_style in $fabric_in_out_props {
+
+    $treatedDirections: ();
+
+    @each $inOut in (In Out) {
+
+      @each $vectorDirection in $vectorDirections {
+
+        $treatedDirections: append($treatedDirections, $vectorDirection);
+        //
+        @include debug($animate_style+$inOut, $vectorDirection, null);
+
+        @each $vectorCornerDirection in $vectorDirections {
+
+          $alreadyDone: index($treatedDirections, $vectorCornerDirection);
+
+          @if $vectorCornerDirection !=$vectorDirection and not $alreadyDone {
+
+            @if $vectorDirection !=$vectorCornerDirection {
+              //
+              @include debug($animate_style+$inOut, $vectorDirection, $vectorCornerDirection);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+@mixin buildAnimation() {
+  //  @include fabric_animation();
+}

package/src/cssfabric/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/src/cssfabric/modules/animation/animation.scss

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