@medyll/cssfabric 0.1.0 → 0.2.0

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

@@ -1,119 +0,0 @@
-@use '../../utils';
-
-$_unit-config: rem;
-$_border-unit-config: px;
-$_unit-size-config: 0.5;
-$_unit-border-size-config: 1;
-
-$_sizes-config: 32;
-$_sizes-border-config: 5;
-
-$_shadows-steps: 5;
-$_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,
-);
-
-$_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
-);
-
-$_position-props: (
-        abs: absolute,
-        rel: relative,
-        stat: static,
-        fix: fixed,
-        sticky: sticky
-);
-
-$_display-props: (
-        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: $_unit-config,
-        border-unit-config: $_border-unit-config,
-        unit-size-config: $_unit-size-config,
-        unit-border-size-config: $_unit-border-size-config,
-        sizes-config: $_sizes-config,
-        border-sizes-px-config: 5,
-        shadows-steps: $_shadows-steps,
-        shadows_step_multiplier: $_shadows-step-multiplier,
-  //
-        position-shorthand-config: pos,
-        display-shorthand-config: dsp,
-        shadow-shorthand-config: shad,
-        border-shorthand-config: border,
-        padding-shorthand-config: pad,
-        margin-shorthand-config: marg,
-        cssProps:(
-                borderShorthands: $_border-shorthands,
-                positionProps: $_position-props,
-                displayProps: $_display-props
-        )
-);
-
-
-$box-docs: (
-        attributes:(
-                padding: (
-                        tag: map-get($box-config, padding-shorthand-config),
-                        keys: utils.getObjectKeys($_border-shorthands),
-                        values: utils.getBoxIterator($_sizes-config, $_unit-config, $_unit-size-config),
-                        levels: ("_":utils.getObjectKeys(utils.getBoxIterator($_sizes-config, $_unit-config, $_unit-size-config))),
-                        about: "padding properties for html elements"
-                ),
-                margin: (
-                        tag: map-get($box-config, margin-shorthand-config),
-                        keys: utils.getObjectKeys($_border-shorthands),
-                        values: utils.getBoxIterator($_sizes-config, $_unit-config, $_unit-size-config),
-                        levels: ("_":utils.getObjectKeys(utils.getBoxIterator($_sizes-config, $_unit-config, $_unit-size-config))),
-                        about: "margin properties for html elements"
-                ),
-                border: (
-                        tag: map-get($box-config, border-shorthand-config),
-                        keys: utils.getObjectKeys($_border-shorthands),
-                        values: utils.getBoxIterator($_sizes-border-config, $_border-unit-config, $_unit-border-size-config),
-                        levels: ("_":utils.getObjectKeys(utils.getBoxIterator($_sizes-border-config, $_border-unit-config, $_unit-border-size-config))),
-                        about: "border properties for html elements"
-                ),
-                shadow: (
-                        tag: map-get($box-config, shadow-shorthand-config),
-                        values: utils.getShadowIterator($shadow-factors, 8),
-                        levels:("_": utils.getObjectKeys(utils.getShadowIterator($shadow-factors, 8))
-                        ),
-                        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,108 +0,0 @@
-@use "sass:map";
-// load scss config file
-@use '../../_utils';
-@use 'color-vars';
-@use "sass:math";
-
-$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);
-
-// COLOR PALETTE
-$color-palette: map-get($color-config, palette);
-
-// COLOR THEME 
-$color-theme: map-get($color-config, theme);
-
-// GRAYS
-$gray-config: map-get($color-config, gray-config) !default;
-$color-gray-start: map-get($gray-config, start) !default;
-$color-gray-end: map-get($gray-config, end) !default;
-$color-gray-steps: map-get($gray-config, 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 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}, "");
-  /**
-  #{$color-type-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==color { // nope for gray
-          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) {
-  @each $color-type-key in $color-types-config {
-    @include fabricColors("palette", $color-palette, $color-type-key, $mq_size_key, true);
-    @include fabricColors("scheme", $color-schemes, $color-type-key, $mq_size_key);
-    @include fabricColors("grey", $gray-schemes, $color-type-key, $mq_size_key);
-  }
-}

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

@@ -1,80 +0,0 @@
-@use '../../_utils';
-
-$_color-types-config: (color bg bg-themed border-color);
-$_color-tint: (_ lighter light dark darker complement); // invert
-
-$color-metadata: (
-        title: color,
-        title_tag: "its about colors",
-        description: "cssfabric color system: its about colors"
-);
-$color-config: (
-        gray-config: utils.get_fabric_conf(gray-config),
-        color-types-config: $_color-types-config,
-        theme: utils.get_fabric_conf(theme),
-        scheme: utils.get_fabric_conf(scheme),
-        palette: utils.get_fabric_conf(palette),
-        gray: utils.get_fabric_conf(gray)
-);
-
-$color-docs: (
-        attributes: (
-                color: (
-                        tag: color,
-                        keys: (
-                                scheme palette gray
-                        ),
-                        levelsLinked: (
-                                scheme: utils.getObjectKeys(utils.get_fabric_conf(scheme)),
-                                palette: utils.getObjectKeys(utils.get_fabric_conf(palette)),
-                                gray: utils.getObjectKeys(utils.get_fabric_conf(gray))
-                        ),
-                        levelsDeclin: (
-                                palette: $_color-tint
-                        ),
-                        about: "color for text level html elements"
-                ),
-                background-color: (
-                        tag: bg,
-                        keys: (
-                                scheme palette gray
-                        ),
-                        levelsLinked: (
-                                scheme: utils.getObjectKeys(utils.get_fabric_conf(scheme)),
-                                palette: utils.getObjectKeys(utils.get_fabric_conf(palette)),
-                                gray: utils.getObjectKeys(utils.get_fabric_conf(gray)) // prefix with gray
-                        ),
-                        levelsDeclin: (
-                                palette: $_color-tint
-                        ),
-                        about: "background colors"
-                ),
-                background-themed: (
-                        tag: "bg-themed",
-                        keys: (
-                                scheme palette gray
-                        ),
-                        levelsLinked: (
-                                gray: utils.getObjectKeys(utils.get_fabric_conf(gray)),
-                                scheme: utils.getObjectKeys(utils.get_fabric_conf(scheme)),
-                                palette: utils.getObjectKeys(utils.get_fabric_conf(palette))
-                        ),
-                        levelsDeclin: (
-                                palette: $_color-tint
-                        ),
-                        about: "same as background-color, but with added contrasted color to text"
-                ),
-                border-color: (
-                        tag: border-color,
-                        keys: (
-                                palette gray
-                        ), 
-                        levelsLinked: (
-                                gray: utils.getObjectKeys(utils.get_fabric_conf(gray)),
-                                scheme: utils.getObjectKeys(utils.get_fabric_conf(scheme)),
-                                palette: utils.getObjectKeys(utils.get_fabric_conf(palette))
-                        ),
-                        about: "border colors are slightly darker to maximize surrounding effect"
-                )
-        )
-);

package/src/cssfabric/modules/color/color-responsive.scss

@@ -1,23 +0,0 @@
-
-@use "sass:map";
-// load scss config file
-@use '../../_utils'; 
-@use 'color-build' as build; 
-@use "../cssfabric-config";
-// load general config variables
-$config: cssfabric-config.$cssfabric-config;
-
-// load general config variables
-// media queries sizes, in rem
-$_media_quey_sizes: map-get($config, media_quey_sizes);
-
-// builder responsive  
-$min_value: 0;
-
-@each $mq_size_key,
-$mq_size_value in $_media_quey_sizes {
-    @include utils.fabricResponsiveEncloser($mq_size_value,$min_value) {
-        @include build.buildColor($mq_size_key);
-    }
-    $min_value: $mq_size_value;
-} 

package/src/cssfabric/modules/color/color.scss

@@ -1,9 +0,0 @@
-
-
- @use '../../_utils';
- @use '_color-build' as build; 
- 
-
-@include build.buildColor(null); 
-
- 

package/src/cssfabric/modules/css-fabric.scss

@@ -1,2 +0,0 @@
-@use '../../../src/vendor/normalize/normalize.min.css';
- 

package/src/cssfabric/modules/flex/_flex-build.scss

@@ -1,150 +0,0 @@
-// load scss config file
-@use '../../_utils';
-@use '../cssfabric-config' as cssfabric-vars;
-@use 'flex-vars';
-
-$flex-config: flex-vars.$flex-config;
-$cssfabric-config: cssfabric-vars.$cssfabric-config;
-
-$sep: map-get($cssfabric-config, sep);
-// read variables
-$grid-code: map-get($flex-config, moduleNameShort);
-$grid-h: map-get($flex-config, horCode);
-$grid-v: map-get($flex-config, vertCode);
-
-$cssProps: map-get($flex-config, cssProps);
-$cssItemsProps: map-get($flex-config, cssItemsProps);
-
-$gridFullWidth: map-get($flex-config, gridFullWidth);
-
-$grow-shrink-steps: map-get($flex-config, grow-shrink-steps);
-
-$grid-code-sep: #{$grid-code}#{$sep};
-
-@mixin makeGrid($mqKey) {
-  $prefix: if($mqKey, #{$grid-code}-#{$mqKey}, #{$grid-code});
-  $h_prop: #{$prefix}#{$sep}#{$grid-h};
-  $v_prop: #{$prefix}#{$sep}#{$grid-v};
-
-  %flex {
-    display: flex;
-  }
-
-  .#{$grid-code},
-  .#{$h_prop} {
-    display: flex;
-    flex-direction: row;
-
-    & > .#{$grid-code-sep}#{$gridFullWidth} {
-      flex: 1 1 0;
-    }
-
-    &.#{$grid-code-sep}align-middle {
-      align-items: center;
-    }
-
-    &.#{$grid-code-sep}align-top {
-      align-items: flex-start;
-    }
-
-    &.#{$grid-code-sep}align-left {
-      align-items: flex-start;
-    }
-
-    &.#{$grid-code-sep}align-right {
-      justify-content: flex-end;
-    }
-
-    &.#{$grid-code-sep}align-bottom {
-      align-items: flex-end;
-    }
-
-    &.#{$grid-code-sep}align-center {
-      justify-content: center;
-    }
-
-    &.#{$grid-code-sep}align-middle-center {
-      justify-content: center;
-      align-content: center;
-      align-items: center;
-    }
-
-    &.#{$grid-code-sep}align-stretch {
-      color: blue;
-      align-items: stretch;
-    }
-  }
-
-  .#{$v_prop} {
-    display: flex;
-    flex-direction: column;
-
-    & > .#{$grid-code-sep}#{$gridFullWidth} {
-      flex: 1 1 0;
-      max-height: 100%;
-    }
-
-    &.#{$grid-code-sep}align-middle {
-      justify-content: center;
-    }
-
-    &.#{$grid-code-sep}align-top {
-      justify-content: flex-start;
-    }
-
-    &.#{$grid-code-sep}align-left {
-      align-items: flex-start;
-    }
-
-    &.#{$grid-code-sep}align-right {
-      align-items: flex-end;
-    }
-
-    &.#{$grid-code-sep}align-bottom {
-      justify-content: flex-end;
-    }
-
-    &.#{$grid-code-sep}align-center {
-      align-items: center;
-    }
-
-    &.#{$grid-code-sep}align-middle-center {
-      align-items: center;
-      justify-content: center;
-    }
-
-    &.#{$grid-code-sep}align-stretch {
-      color: red;
-      align-items: stretch;
-    }
-  }
-
-
-  .#{$grid-code-sep}inline {
-    display: inline-flex;
-  }
-
-  // wrap rules
-  .#{$grid-code} {
-    @each $fabricRule, $value in map-get($cssProps, flexWrap) {
-      @include utils.fabricAttributes('&'+$sep, $fabricRule, 'flex-wrap', $value);
-    }
-  }
-
-  // align-self rules for children */
-  .self {
-    @each $fabricRule, $value in map-get($cssItemsProps, self) {
-      @include utils.fabricAttributes('&-', $fabricRule, 'align-self', $value);
-    }
-  }
-  @for $i from 0 through $grow-shrink-steps {
-    .#{$grid-code-sep}grow#{$sep}#{$i} {
-      flex-grow: #{$i};
-    }
-
-    .#{$grid-code-sep}shrink#{$sep}#{$i} {
-      flex-shrink: $i;
-    }
-  }
-
-}

package/src/cssfabric/modules/flex/_flex-vars.scss

@@ -1,84 +0,0 @@
-@use '../../utils';
-
-
-$_grow-shrink-steps: 2;
-
-
-$_grid-align: (top middle bottom left right center middle-center stretch);
-
-$_classNames: (
-        wrap: wrap,
-        wrap-reverse: wrap-reverse
-);
-
-$_cssProps: (
-        flexWrap: (
-                wrap: wrap,
-                wrap-reverse: wrap-reverse
-        ),
-        grid-justify: (
-                start: flex-start,
-                end: flex-end,
-                between: space-between,
-                stretch: stretch,
-                center: flex-center
-        ),
-        grid-items: (
-                baseline: baseline,
-                stretch: stretch,
-                start: flex-start,
-                center: center,
-                end: flex-end
-        ),
-        grid-content: (
-                start: flex-start,
-                center: center,
-                end: flex-end,
-                between: space-between,
-                equal: space-evenly
-        )
-); 
-
-$_cssItemsProps: (
-        self: (
-                start: flex-start,
-                end: flex-end,
-                stretch: stretch
-        )
-);
-
-$flex-metadata: (
-        title: "flex",
-        tag: "flex",
-        description: "cssfabric flex system module"
-);
-
-$flex-config: (
-        moduleName: flex,
-        moduleNameShort: flex,
-        horCode: h,
-        vertCode: v,
-        gridFullWidth: main,
-        grow-shrink-steps:$_grow-shrink-steps,
-        cssProps: $_cssProps,
-        cssItemsProps: $_cssItemsProps
-);
-
-$flex-docs: (// add align-middle non generated className // grow + shrink
-        attributes:(
-                grid:(
-                        tag: flex,
-                        keys: (v, h),
-                        classNames: (
-                                align: $_grid-align,
-                                grid:utils.getObjectKeys(map-get($_cssProps, flexWrap)), // add inline !
-                        ),
-                        about: "a classic flex grid system, and hey, it gets height !"
-                ),
-                self:(
-                        tag: self,
-                        keys: utils.getObjectKeys(map-get($_cssItemsProps, self)),
-                        about: "flex children specific classnames"
-                )
-        )
-);

package/src/cssfabric/modules/flex/flex-responsive.scss

@@ -1,25 +0,0 @@
-
-
-// load scss config file
-@use '../../_utils';
-@use '_flex-build' as build;
-@use "../cssfabric-config";
-// load general config variables
-$config: cssfabric-config.$cssfabric-config;
-
-// load general config variables
-// media queries sizes, in rem
-$_media_quey_sizes: map-get($config, media_quey_sizes);
- 
- 
-// builder responsive  
-$min_value: 0;
-
-@each $mq_size_key,
-$mq_size_value in $_media_quey_sizes {
-  @include utils.fabricResponsiveEncloser($mq_size_value,$min_value) {
-    @include build.makeGrid($mq_size_key);
-  }
-  $min_value: $mq_size_value;
-} 
- 

package/src/cssfabric/modules/flex/flex.scss

@@ -1,3 +0,0 @@
-@use '_flex-build' as build;
-
-@include build.makeGrid(null);