@medyll/cssfabric 0.2.0 → 0.2.3

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

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

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

@@ -0,0 +1,80 @@
+@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

@@ -0,0 +1,23 @@
+
+@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

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

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

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

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

@@ -0,0 +1,150 @@
+// 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

@@ -0,0 +1,84 @@
+@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

@@ -0,0 +1,25 @@
+
+
+// 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

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

package/src/cssfabric/modules/grid/_grid-build.scss

@@ -0,0 +1,84 @@
+// load scss config file
+@use '../../_utils';
+@use '../cssfabric-config';
+@use 'grid-vars';
+
+$grid-config: grid-vars.$grid-config;
+$cssfabric-config: cssfabric-config.$cssfabric-config;
+
+$sep: map-get($cssfabric-config, sep);
+// read variables
+$grid-code: map-get($grid-config, moduleNameShort);
+$grid-h: map-get($grid-config, horCode);
+$grid-v: map-get($grid-config, vertCode);
+
+$cssProps: map-get($grid-config, cssProps);
+$cssItemsProps: map-get($grid-config, cssItemsProps);
+
+$gridFullWidth: map-get($grid-config, gridFullWidth);
+
+$grow-shrink-steps: map-get($grid-config, grow-shrink-steps);
+
+$grid-max-cols: map-get($grid-config, grid-max-cols);
+$grid-max-rows: map-get($grid-config, grid-max-rows);
+
+$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};
+
+  .#{$grid-code} {
+    display: grid;
+    &-auto-flow-cols {
+      grid-auto-flow: column;
+    }
+    &-auto-cols-auto {
+      grid-auto-columns: auto;
+    }
+    &-auto-cols-min	 {
+      grid-auto-columns: min-content;
+    }
+    &-auto-cols-max {
+      grid-auto-columns: max-content;
+    }
+    &-auto-cols {
+      grid-auto-columns: minmax(0, 1fr);
+    }
+
+    &-auto-flow-rows {
+      grid-auto-flow: row;
+    }
+    &-auto-rows-auto {
+      grid-auto-rows: auto;
+    }
+    &-auto-rows-min	 {
+      grid-auto-rows: min-content;
+    }
+    &-auto-rows-max {
+      grid-auto-rows: max-content;
+    }
+    &-auto-rows {
+      grid-auto-rows: minmax(0, 1fr);
+    }
+
+
+  }
+
+  .#{$grid-code-sep}inline {
+    display: inline-grid;
+  }
+  /* template-columns */
+  @for $col-row from 1 through $grid-max-cols {
+    .#{$grid-code}-cols-#{$col-row} {
+      grid-template-columns: repeat(#{$col-row}, minmax(0, 1fr));
+    }
+  }
+  /* template-rows */
+  @for $col-row from 1 through $grid-max-rows {
+    .#{$grid-code}-rows-#{$col-row} {
+      grid-template-rows: repeat(#{$col-row}, minmax(0, 1fr));
+    }
+  }
+}