@ws-serenity/sass-styling 1.1.4 → 1.3.0

package/lib/generator/colors/functions/regenerateColor.scss

@@ -1,58 +1,58 @@
-// https://github.com/KittyGiraudel/SassyJSON/tree/master/stylesheets/decode/helpers/color
-
-@function hex-to-dec($string) {
-  $hex: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 'a' 'b' 'c' 'd' 'e' 'f';
-  $string: to-lower-case($string);
-  $length: str-length($string);
-  $dec: 0;
-
-  @for $i from 1 through $length {
-    $factor: 1 + (15 * ($length - $i));
-    $index: index($hex, str-slice($string, $i, $i));
-    $dec: $dec + $factor * ($index - 1);
-  }
-
-  @return $dec;
-}
-
-@function regenerateColor($string) {
-  @if type-of($string) == 'color' {
-    @return $string;
-  }
-
-  $string-lower: to-lower-case($string);
-  $r: '';
-  $g: '';
-  $b: '';
-  $hex: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 'a' 'b' 'c' 'd' 'e' 'f';
-  $length: str-length($string);
-  $max: if($length == 4, 1, 2);
-
-  @if $length != 4 and $length != 7 {
-    @return $string;
-  }
-
-  @for $i from 2 through $length {
-    $c: str-slice($string-lower, $i, $i);
-
-    @if index($hex, $c) == null {
-      @return $string;
-    }
-
-    @if str-length($r) < $max {
-      $r: $r + $c;
-    } @else if str-length($g) < $max {
-      $g: $g + $c;
-    } @else if str-length($b) < $max {
-      $b: $b + $c;
-    }
-  }
-
-  @if $length == 4 {
-    $r: $r + $r;
-    $g: $g + $g;
-    $b: $b + $b;
-  }
-
-  @return rgb(hex-to-dec($r), hex-to-dec($g), hex-to-dec($b));
-}
+// https://github.com/KittyGiraudel/SassyJSON/tree/master/stylesheets/decode/helpers/color
+
+@function hex-to-dec($string) {
+  $hex: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 'a' 'b' 'c' 'd' 'e' 'f';
+  $string: to-lower-case($string);
+  $length: str-length($string);
+  $dec: 0;
+
+  @for $i from 1 through $length {
+    $factor: 1 + (15 * ($length - $i));
+    $index: index($hex, str-slice($string, $i, $i));
+    $dec: $dec + $factor * ($index - 1);
+  }
+
+  @return $dec;
+}
+
+@function regenerateColor($string) {
+  @if type-of($string) == 'color' {
+    @return $string;
+  }
+
+  $string-lower: to-lower-case($string);
+  $r: '';
+  $g: '';
+  $b: '';
+  $hex: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 'a' 'b' 'c' 'd' 'e' 'f';
+  $length: str-length($string);
+  $max: if($length == 4, 1, 2);
+
+  @if $length != 4 and $length != 7 {
+    @return $string;
+  }
+
+  @for $i from 2 through $length {
+    $c: str-slice($string-lower, $i, $i);
+
+    @if index($hex, $c) == null {
+      @return $string;
+    }
+
+    @if str-length($r) < $max {
+      $r: $r + $c;
+    } @else if str-length($g) < $max {
+      $g: $g + $c;
+    } @else if str-length($b) < $max {
+      $b: $b + $c;
+    }
+  }
+
+  @if $length == 4 {
+    $r: $r + $r;
+    $g: $g + $g;
+    $b: $b + $b;
+  }
+
+  @return rgb(hex-to-dec($r), hex-to-dec($g), hex-to-dec($b));
+}

package/lib/generator/colors/functions/strReplace.scss

@@ -1,9 +1,9 @@
-@function str-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
-
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-  }
-
-  @return $string;
-}
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}

package/lib/generator/colors/index.scss

@@ -1,101 +1,101 @@
-@use 'sass:list';
-@use 'sass:string';
-@import './functions/strReplace';
-@import './functions/regenerateColor';
-
-@function get-color($color-name, $theme, $theme-colors, $group-name) {
-  @if string.index($color-name, '%') == 1 {
-    $group: map-get($theme, $group-name);
-    @return map-get($group, str-replace($color-name, '%'));
-  }
-  @return map-get($theme-colors, str-replace($color-name, '@', $group-name));
-}
-
-@function generate-theme-colors($theme, $theme-config) {
-  $theme-colors: ();
-
-  // Main
-  @each $group-name, $group in $theme-config {
-    $group-type: map-get($group, 'type');
-    $group-colors: map-get($group, 'colors');
-    @if $group-type == 'single' {
-      @each $shade-name, $shade-layers in $group-colors {
-        $color-rest: black;
-        $color-hover: black;
-        $color-active: black;
-        @for $i from 1 through list.length($shade-layers) {
-          $layer-config: list.nth($shade-layers, -$i);
-          $layer-color-name: list.nth($layer-config, 1);
-          $layer-color: get-color($layer-color-name, $theme, $theme-colors, $group-name);
-          $layer-color-state-modifiers: list.nth($layer-config, 2);
-          $rest-modifier: list.nth($layer-color-state-modifiers, 1);
-          $hover-modifier: $rest-modifier;
-          @if list.length($layer-color-state-modifiers) >= 2 {
-            $hover-modifier: list.nth($layer-color-state-modifiers, 2);
-          }
-          $active-modifier: $hover-modifier;
-          @if list.length($layer-color-state-modifiers) >= 3 {
-            $active-modifier: list.nth($layer-color-state-modifiers, 3);
-          }
-          $color-rest: mix($layer-color, $color-rest, $rest-modifier);
-          $color-hover: mix($layer-color, $color-hover, $hover-modifier);
-          $color-active: mix($layer-color, $color-active, $active-modifier);
-        }
-        $theme-colors: map-merge($theme-colors, (
-                '#{$group-name}-#{$shade-name}': $color-rest,
-                '#{$group-name}-#{$shade-name}-hover': $color-hover,
-                '#{$group-name}-#{$shade-name}-active': $color-active
-        ));
-      }
-    }
-    @if $group-type == 'foreach' {
-      @each $color-name, $_ in map-get($theme, $group-name) {
-        @each $shade-name, $shade-layers in $group-colors {
-          $color-rest: black;
-          $color-hover: black;
-          $color-active: black;
-          @for $i from 1 through list.length($shade-layers) {
-            $layer-config: list.nth($shade-layers, -$i);
-            $layer-color-name: list.nth($layer-config, 1);
-            $layer-color: get-color(
-                            str-replace(
-                                            str-replace($layer-color-name, '%', '%#{$color-name}'),
-                                            '@',
-                                            '@#{$color-name}'
-                            ),
-                            $theme,
-                            $theme-colors,
-                            $group-name
-            );
-            $layer-color-state-modifiers: list.nth($layer-config, 2);
-            $rest-modifier: list.nth($layer-color-state-modifiers, 1);
-            $hover-modifier: $rest-modifier;
-            @if list.length($layer-color-state-modifiers) >= 2 {
-              $hover-modifier: list.nth($layer-color-state-modifiers, 2);
-            }
-            $active-modifier: $hover-modifier;
-            @if list.length($layer-color-state-modifiers) >= 3 {
-              $active-modifier: list.nth($layer-color-state-modifiers, 3);
-            }
-            $color-rest: mix($layer-color, $color-rest, $rest-modifier);
-            $color-hover: mix($layer-color, $color-hover, $hover-modifier);
-            $color-active: mix($layer-color, $color-active, $active-modifier);
-          }
-          $theme-colors: map-merge($theme-colors, (
-                  '#{$group-name}#{$color-name}-#{$shade-name}': $color-rest,
-                  '#{$group-name}#{$color-name}-#{$shade-name}-hover': $color-hover,
-                  '#{$group-name}#{$color-name}-#{$shade-name}-active': $color-active
-          ));
-        }
-      }
-    }
-  }
-
-  // Overrides
-  $overrides: map-get($theme, 'overrides');
-  @each $color-name, $color-value in $overrides {
-    $theme-colors: map-merge($theme-colors, ($color-name: $color-value));
-  }
-
-  @return $theme-colors;
-}
+@use 'sass:list';
+@use 'sass:string';
+@import './functions/strReplace';
+@import './functions/regenerateColor';
+
+@function get-color($color-name, $theme, $theme-colors, $group-name) {
+  @if string.index($color-name, '%') == 1 {
+    $group: map-get($theme, $group-name);
+    @return map-get($group, str-replace($color-name, '%'));
+  }
+  @return map-get($theme-colors, str-replace($color-name, '@', $group-name));
+}
+
+@function generate-theme-colors($theme, $theme-config) {
+  $theme-colors: ();
+
+  // Main
+  @each $group-name, $group in $theme-config {
+    $group-type: map-get($group, 'type');
+    $group-colors: map-get($group, 'colors');
+    @if $group-type == 'single' {
+      @each $shade-name, $shade-layers in $group-colors {
+        $color-rest: black;
+        $color-hover: black;
+        $color-active: black;
+        @for $i from 1 through list.length($shade-layers) {
+          $layer-config: list.nth($shade-layers, -$i);
+          $layer-color-name: list.nth($layer-config, 1);
+          $layer-color: get-color($layer-color-name, $theme, $theme-colors, $group-name);
+          $layer-color-state-modifiers: list.nth($layer-config, 2);
+          $rest-modifier: list.nth($layer-color-state-modifiers, 1);
+          $hover-modifier: $rest-modifier;
+          @if list.length($layer-color-state-modifiers) >= 2 {
+            $hover-modifier: list.nth($layer-color-state-modifiers, 2);
+          }
+          $active-modifier: $hover-modifier;
+          @if list.length($layer-color-state-modifiers) >= 3 {
+            $active-modifier: list.nth($layer-color-state-modifiers, 3);
+          }
+          $color-rest: mix($layer-color, $color-rest, $rest-modifier);
+          $color-hover: mix($layer-color, $color-hover, $hover-modifier);
+          $color-active: mix($layer-color, $color-active, $active-modifier);
+        }
+        $theme-colors: map-merge($theme-colors, (
+                '#{$group-name}-#{$shade-name}': $color-rest,
+                '#{$group-name}-#{$shade-name}-hover': $color-hover,
+                '#{$group-name}-#{$shade-name}-active': $color-active
+        ));
+      }
+    }
+    @if $group-type == 'foreach' {
+      @each $color-name, $_ in map-get($theme, $group-name) {
+        @each $shade-name, $shade-layers in $group-colors {
+          $color-rest: black;
+          $color-hover: black;
+          $color-active: black;
+          @for $i from 1 through list.length($shade-layers) {
+            $layer-config: list.nth($shade-layers, -$i);
+            $layer-color-name: list.nth($layer-config, 1);
+            $layer-color: get-color(
+                            str-replace(
+                                            str-replace($layer-color-name, '%', '%#{$color-name}'),
+                                            '@',
+                                            '@#{$color-name}'
+                            ),
+                            $theme,
+                            $theme-colors,
+                            $group-name
+            );
+            $layer-color-state-modifiers: list.nth($layer-config, 2);
+            $rest-modifier: list.nth($layer-color-state-modifiers, 1);
+            $hover-modifier: $rest-modifier;
+            @if list.length($layer-color-state-modifiers) >= 2 {
+              $hover-modifier: list.nth($layer-color-state-modifiers, 2);
+            }
+            $active-modifier: $hover-modifier;
+            @if list.length($layer-color-state-modifiers) >= 3 {
+              $active-modifier: list.nth($layer-color-state-modifiers, 3);
+            }
+            $color-rest: mix($layer-color, $color-rest, $rest-modifier);
+            $color-hover: mix($layer-color, $color-hover, $hover-modifier);
+            $color-active: mix($layer-color, $color-active, $active-modifier);
+          }
+          $theme-colors: map-merge($theme-colors, (
+                  '#{$group-name}#{$color-name}-#{$shade-name}': $color-rest,
+                  '#{$group-name}#{$color-name}-#{$shade-name}-hover': $color-hover,
+                  '#{$group-name}#{$color-name}-#{$shade-name}-active': $color-active
+          ));
+        }
+      }
+    }
+  }
+
+  // Overrides
+  $overrides: map-get($theme, 'overrides');
+  @each $color-name, $color-value in $overrides {
+    $theme-colors: map-merge($theme-colors, ($color-name: $color-value));
+  }
+
+  @return $theme-colors;
+}

package/lib/generator/fonts/commonWeights.scss

@@ -1,12 +1,12 @@
-// https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping
-$weight-name-to-value-map: (
-  thin: 100,
-  extra-light: 200,
-  light: 300,
-  regular: 400,
-  medium: 500,
-  semi-bold: 600,
-  bold: 700,
-  extra-bold: 800,
-  heavy: 900,
-);
+// https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping
+$weight-name-to-value-map: (
+  thin: 100,
+  extra-light: 200,
+  light: 300,
+  regular: 400,
+  medium: 500,
+  semi-bold: 600,
+  bold: 700,
+  extra-bold: 800,
+  heavy: 900,
+);

package/lib/generator/fonts/cssVarsConveyor.scss

@@ -1,60 +1,60 @@
-@use 'sass:list';
-@use 'sass:map';
-
-@mixin use-css-vars-conveyor(
-  $key-vars-tuples,
-  $conveyor,
-  $defaults: (),
-  $aliases: (),
-  $default-markers: [ d, def, null ]
-) {
-  // Если в конвейере есть ключ, существующий в дефолтсах
-  // То помечаем ключ, как override-friendly
-  $override-friendly-props: [];
-  @each $key in $conveyor {
-    @if map.get($defaults, $key) != null {
-      $override-friendly-props: append($override-friendly-props, $key);
-    }
-  }
-
-  // Если в дефолтсах есть ключ, не существующий в конвейере
-  // То помещаем его в конец конвейера
-  @each $key, $_ in $defaults {
-    @if index($conveyor, $key) == null {
-      $conveyor: append($conveyor, $key);
-    }
-  }
-
-  @each $key, $vars in $key-vars-tuples {
-    @for $i from 1 through length($conveyor) {
-      $prop: nth($conveyor, $i);
-      $var: null;
-
-      // Находим raw значение
-      @if map.get($defaults, $prop) != null {
-        @if $i <= length($vars) and index($override-friendly-props, $prop) != null {
-          $var: nth($vars, $i);
-
-          @if index($default-markers, $var) != null {
-            $var: map.get($defaults, $prop);
-          }
-        } @else {
-          $var: map.get($defaults, $prop);
-        }
-      } @else {
-        $var: nth($vars, $i);
-      }
-
-      // Находим и применяем алиасы
-      $prop-aliases: map.get($aliases, $prop);
-      @if $prop-aliases != null {
-        $var-aliased-value: map.get($prop-aliases, $var);
-        @if $var-aliased-value != null {
-          $var: $var-aliased-value;
-        }
-      }
-
-      --#{$key}-#{$prop}: #{$var};
-    }
-  }
-}
+@use 'sass:list';
+@use 'sass:map';
+
+@mixin use-css-vars-conveyor(
+  $key-vars-tuples,
+  $conveyor,
+  $defaults: (),
+  $aliases: (),
+  $default-markers: [ d, def, null ]
+) {
+  // Если в конвейере есть ключ, существующий в дефолтсах
+  // То помечаем ключ, как override-friendly
+  $override-friendly-props: [];
+  @each $key in $conveyor {
+    @if map.get($defaults, $key) != null {
+      $override-friendly-props: append($override-friendly-props, $key);
+    }
+  }
+
+  // Если в дефолтсах есть ключ, не существующий в конвейере
+  // То помещаем его в конец конвейера
+  @each $key, $_ in $defaults {
+    @if index($conveyor, $key) == null {
+      $conveyor: append($conveyor, $key);
+    }
+  }
+
+  @each $key, $vars in $key-vars-tuples {
+    @for $i from 1 through length($conveyor) {
+      $prop: nth($conveyor, $i);
+      $var: null;
+
+      // Находим raw значение
+      @if map.get($defaults, $prop) != null {
+        @if $i <= length($vars) and index($override-friendly-props, $prop) != null {
+          $var: nth($vars, $i);
+
+          @if index($default-markers, $var) != null {
+            $var: map.get($defaults, $prop);
+          }
+        } @else {
+          $var: map.get($defaults, $prop);
+        }
+      } @else {
+        $var: nth($vars, $i);
+      }
+
+      // Находим и применяем алиасы
+      $prop-aliases: map.get($aliases, $prop);
+      @if $prop-aliases != null {
+        $var-aliased-value: map.get($prop-aliases, $var);
+        @if $var-aliased-value != null {
+          $var: $var-aliased-value;
+        }
+      }
+
+      --#{$key}-#{$prop}: #{$var};
+    }
+  }
+}

package/lib/generator/fonts/index.scss

@@ -1,35 +1,35 @@
-@import './commonWeights';
-
-$default-line-height-multiplier: 1.25;
-
-// todo: cssVarsConveyor can be reused
-@mixin set-font-css-vars(
-  $name,
-  $size,
-  $weight: regular,
-  $line-height: $size * $default-line-height-multiplier,
-  $letter-spacing: 0
-) {
-  --#{$name}-font-size: #{$size}px;
-  --#{$name}-line-height: #{$line-height};
-  --#{$name}-letter-spacing: #{$letter-spacing};
-
-  @if type-of($weight) == string {
-    --#{$name}-font-weight: #{map-get($weight-name-to-value-map, $weight)};
-  } @else {
-    --#{$name}-font-weight: #{$weight};
-  }
-}
-
-@mixin set-fonts-css-vars-by-map($map) {
-  @each $name, $size, $weight, $line-height, $letter-spacing in $map {
-    @include set-font-css-vars($name, $size, $weight, $line-height, $letter-spacing);
-  }
-}
-
-@mixin use-css-vars-based-font($name) {
-  font-size: var(--#{$name}-font-size);
-  line-height: var(--#{$name}-line-height);
-  letter-spacing: var(--#{$name}-letter-spacing);
-  font-weight: var(--#{$name}-font-weight);
-}
+@import './commonWeights';
+
+$default-line-height-multiplier: 1.25;
+
+// todo: cssVarsConveyor can be reused
+@mixin set-font-css-vars(
+  $name,
+  $size,
+  $weight: regular,
+  $line-height: $size * $default-line-height-multiplier,
+  $letter-spacing: 0
+) {
+  --#{$name}-font-size: #{$size}px;
+  --#{$name}-line-height: #{$line-height};
+  --#{$name}-letter-spacing: #{$letter-spacing};
+
+  @if type-of($weight) == string {
+    --#{$name}-font-weight: #{map-get($weight-name-to-value-map, $weight)};
+  } @else {
+    --#{$name}-font-weight: #{$weight};
+  }
+}
+
+@mixin set-fonts-css-vars-by-map($map) {
+  @each $name, $size, $weight, $line-height, $letter-spacing in $map {
+    @include set-font-css-vars($name, $size, $weight, $line-height, $letter-spacing);
+  }
+}
+
+@mixin use-css-vars-based-font($name) {
+  font-size: var(--#{$name}-font-size);
+  line-height: var(--#{$name}-line-height);
+  letter-spacing: var(--#{$name}-letter-spacing);
+  font-weight: var(--#{$name}-font-weight);
+}

package/lib/sass/adaptive.scss

@@ -1,11 +1,55 @@
-@mixin max-width($resolution) {
-  @media (max-width: #{$resolution}px) {
-    @content;
-  }
-}
-
-@mixin min-width($resolution) {
-  @media (min-width: #{$resolution}px) {
-    @content;
-  }
-}
+@mixin max-width($resolution) {
+  @media (max-width: #{$resolution}px) {
+    @content;
+  }
+}
+
+@mixin min-width($resolution) {
+  @media (min-width: #{$resolution}px) {
+    @content;
+  }
+}
+
+/**
+ * при использовании основного механизма ввода можно без труда навести указатель на элемент
+ * e.g. desktop
+ */
+@mixin device-with-hover {
+  @media (hover: hover) {
+    @content;
+  }
+}
+
+/**
+ * основной механизм ввода не позволяет навести указатель на элемент, или позволяет, но это не очень-то просто
+ * (например — для имитации наведения указателя на элемент используется длительное касание экрана)
+ * e.g. tablet, mobile
+ */
+@mixin device-without-hover {
+  @media (hover: none) {
+    @content;
+  }
+}
+
+/**
+ * стили для пользователей, включивших в системе параметр
+ * минимизации движения или анимаций (accessibility)
+ */
+@mixin prefers-reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}
+
+/**
+ * touch-devices-friendly hover
+ * примененный hover-стиль будет работать только для устройств,
+ * которые полноценно поддерживают hover (e.g. desktop)
+ */
+@mixin hover-friendly {
+  @include device-with-hover {
+    &:hover {
+      @content;
+    }
+  }
+}