@ws-serenity/sass-styling 1.0.2 → 1.1.1

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/index.scss

@@ -1,38 +1,38 @@
-$weight-name-to-value-map: (
-        regular: 400,
-        semi-bold: 600,
-        bold: 700, // TODO DEAL WITH ME
-);
-
-$default-line-height-multiplier: 1.25;
-
-@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);
-}
+$weight-name-to-value-map: (
+        regular: 400,
+        semi-bold: 600,
+        bold: 700, // TODO DEAL WITH ME
+);
+
+$default-line-height-multiplier: 1.25;
+
+@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,11 @@
-@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;
+  }
+}

package/lib/sass/alignment.scss

@@ -1,36 +1,66 @@
-%__flex {
-  display: flex;
-}
-
-%__flex-column {
-  flex-direction: column;
-}
-
-@mixin flex-column($gap:null) {
-  @extend %__flex;
-  @extend %__flex-column;
-
-  @if ($gap != null) {
-    row-gap: $gap;
-  }
-}
-
-@mixin flex($gap:null) {
-  @extend %__flex;
-
-  @if ($gap != null) {
-    column-gap: $gap;
-  }
-}
-
-%margin-center {
-  margin: 0 auto;
-}
-
-%absolute-stretch {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
+@use 'sass:string';
+@use 'sass:list';
+
+%__flex {
+  display: flex;
+}
+
+%__flex-column {
+  flex-direction: column;
+}
+
+@mixin flex-column($gap:null) {
+  @extend %__flex;
+  @extend %__flex-column;
+
+  @if ($gap != null) {
+    row-gap: $gap;
+  }
+}
+
+@mixin flex($gap:null) {
+  @extend %__flex;
+
+  @if ($gap != null) {
+    column-gap: $gap;
+  }
+}
+
+%margin-center {
+  margin: 0 auto;
+}
+
+%absolute-stretch {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+@mixin grid-areas($grid-template-areas, $isGlobal:false) {
+  display: grid;
+  grid-template-areas: $grid-template-areas;
+  // чтобы не дублировать стили храним массив созданных классов
+  $used: ();
+
+  @each $areaLine in $grid-template-areas {
+    $areas: string.split($areaLine, ' ');
+
+    @each $a in $areas {
+      @if not list.index($used, $a) {
+        @if ($isGlobal) {
+          :global(.#{$a}) {
+            grid-area: string.unquote($a);
+          }
+        } @else {
+          .#{$a} {
+            grid-area: string.unquote($a);
+          }
+        }
+
+        $used: list.append($used, $a);
+      }
+    }
+  }
+}

package/lib/sass/functions.scss

@@ -1,3 +1,3 @@
-@function hex-to-rgba($hex, $alpha) {
-  @return rgba(red($hex), green($hex), blue($hex), $alpha);
-}
+@function hex-to-rgba($hex, $alpha) {
+  @return rgba(red($hex), green($hex), blue($hex), $alpha);
+}

package/lib/sass/index.scss

@@ -1,6 +1,6 @@
-@import './adaptive';
-@import './alignment';
-@import './functions';
-@import './styling';
-@import './svgUtils';
-@import './textUtils';
+@import './adaptive';
+@import './alignment';
+@import './functions';
+@import './styling';
+@import './svgUtils';
+@import './textUtils';

package/lib/sass/keyframes.scss

@@ -1,23 +1,23 @@
-@mixin shake-animation($color, $animation-duration, $animation-curve) {
-  animation: shake $animation-duration $animation-curve;
-
-  // @formatter:off
-  @keyframes shake {
-    // allow pass color
-    5%, 45% { transform: translate3d(-1px, 0, 0); }
-    10%, 40% { transform: translate3d(2px, 0, 0); }
-    20%, 80% { color: $color; }
-    15%, 25%, 35% { transform: translate3d(-4px, 0, 0); }
-    20%, 30% { transform: translate3d(4px, 0, 0); }
-  }
-  // @formatter:on
-}
-
-
-// @formatter:off
-@keyframes oscillating {
-  0% { opacity: 100%; }
-  50% { opacity: 50%; }
-  100% { opacity: 100%; }
-}
-// @formatter:on
+@mixin shake-animation($color, $animation-duration, $animation-curve) {
+  animation: shake $animation-duration $animation-curve;
+
+  // @formatter:off
+  @keyframes shake {
+    // allow pass color
+    5%, 45% { transform: translate3d(-1px, 0, 0); }
+    10%, 40% { transform: translate3d(2px, 0, 0); }
+    20%, 80% { color: $color; }
+    15%, 25%, 35% { transform: translate3d(-4px, 0, 0); }
+    20%, 30% { transform: translate3d(4px, 0, 0); }
+  }
+  // @formatter:on
+}
+
+
+// @formatter:off
+@keyframes oscillating {
+  0% { opacity: 100%; }
+  50% { opacity: 50%; }
+  100% { opacity: 100%; }
+}
+// @formatter:on

package/lib/sass/styling.scss

@@ -1,24 +1,24 @@
-%__background-alpha {
-  &::before {
-    content: '';
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    z-index: -1;
-  }
-}
-
-@mixin background-alpha($color, $alpha) {
-  @extend %__background-alpha;
-
-  &::before {
-    background-color: $color;
-    opacity: $alpha;
-  }
-}
-
-%border-radius-max {
-  // таким образом получается добиться максимального радиуса скругления, а не круглого элемента
-  border-radius: 9999px;
-}
+%__background-alpha {
+  &::before {
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    z-index: -1;
+  }
+}
+
+@mixin background-alpha($color, $alpha) {
+  @extend %__background-alpha;
+
+  &::before {
+    background-color: $color;
+    opacity: $alpha;
+  }
+}
+
+%border-radius-max {
+  // таким образом получается добиться максимального радиуса скругления, а не круглого элемента
+  border-radius: 9999px;
+}

package/lib/sass/svgUtils.scss

@@ -1,14 +1,14 @@
-@mixin color-svg($color) {
-  color: $color;
-
-  svg {
-    fill: $color;
-  }
-}
-
-@mixin size-svg($height, $width: $height) {
-  svg {
-    height: $height;
-    width: $width;
-  }
-}
+@mixin color-svg($color) {
+  color: $color;
+
+  svg {
+    fill: $color;
+  }
+}
+
+@mixin size-svg($height, $width: $height) {
+  svg {
+    height: $height;
+    width: $width;
+  }
+}

package/lib/sass/textUtils.scss

@@ -1,19 +1,19 @@
-%__multiline-ellipsis-overflow {
-  display: -webkit-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-box-orient: vertical;
-}
-
-@mixin multiline-ellipsis-overflow($lines-amount) {
-  @extend %__multiline-ellipsis-overflow;
-
-  -webkit-line-clamp: $lines-amount;
-  line-clamp: $lines-amount;
-}
-
-%text-overflow-ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+%__multiline-ellipsis-overflow {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+}
+
+@mixin multiline-ellipsis-overflow($lines-amount) {
+  @extend %__multiline-ellipsis-overflow;
+
+  -webkit-line-clamp: $lines-amount;
+  line-clamp: $lines-amount;
+}
+
+%text-overflow-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/lib/side-effect/reset.scss

@@ -1,77 +1,74 @@
-* {
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-
-:focus, :active {
-  outline: none;
-}
-
-a,
-a:visited,
-a:hover {
-  text-decoration: none;
-  color: unset;
-}
-
-a:focus, a:active {
-  outline: none;
-}
-
-nav, footer, header, aside {
-  display: block;
-}
-
-html, body, #root {
-  overflow-x: hidden;
-  height: 100%;
-  width: 100%;
-  line-height: 1;
-  font-size: 14px;
-  text-size-adjust: 100%;
-  -webkit-tap-highlight-color: transparent;
-  scroll-behavior: smooth;
-  overscroll-behavior: none;
-}
-
-input, button, textarea {
-  font-family: inherit;
-  outline: none !important;
-  box-shadow: none;
-}
-
-input {
-  color: inherit;
-
-  &::-ms-clear {
-    display: none;
-  }
-}
-
-button::-moz-focus-inner {
-  padding: 0;
-  border: 0;
-}
-
-ul li {
-  list-style: none;
-}
-
-img {
-  vertical-align: top;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-size: inherit;
-  font-weight: 400;
-}
-
-button {
-  background-color: inherit;
-  cursor: pointer;
-}
+* {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+:focus, :active {
+  outline: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:focus, a:active {
+  outline: none;
+}
+
+nav, footer, header, aside {
+  display: block;
+}
+
+html, body, #root {
+  overflow-x: hidden;
+  height: 100%;
+  width: 100%;
+  line-height: 1;
+  font-size: 14px;
+  text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+  scroll-behavior: smooth;
+  overscroll-behavior: none;
+}
+
+input, button, textarea {
+  font-family: inherit;
+  outline: none !important;
+  box-shadow: none;
+}
+
+input {
+  color: inherit;
+
+  &::-ms-clear {
+    display: none;
+  }
+}
+
+button::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+
+ul li {
+  list-style: none;
+}
+
+img {
+  vertical-align: top;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-size: inherit;
+  font-weight: 400;
+}
+
+button {
+  background-color: inherit;
+  cursor: pointer;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ws-serenity/sass-styling",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "description": "",
   "directories": {
     "lib": "lib"
@@ -9,7 +9,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "peerDependencies": {
-    "sass": "^1.66.1"
+    "sass": "^1.69.3"
   },
   "keywords": [],
   "author": "",

package/readme.md

@@ -1,92 +1,92 @@
-## About
-
-Библиотека базовых sass-стилей
-
-## Sass
-
-Папка не обладает сайд-эффектами, ее можно импортировать сколько угодно. 
-
-Общий импорт:
-```scss
-@import '@ws-serenity/sass-styling/lib/sass';
-```
-
-### Содержимое
-- `adaptive` - миксины для адаптива
-- `alignment` - размещение элементов (flex, margin-center,...)
-- `functions` - полезные sass-функции
-- `keyframes` - анимации
-- `styling` - внешний вид (максимальное скругление, background-alpha)
-- `svgUtils` - цвет и размер svg
-- `textUtils` - оверфлоу текста
-
-## Side-effect
-
-Импортировать эти файлы необходимо единожды! Иначе возникнет дублирование стилей
-
-## Generator
-
-### Палитры
-```scss
-@import '@ws-serenity/sass-styling/lib/generator/colors';
-
-// for $themes and $themes-config declaration check storybook
-
-@mixin create-css-themes-root() {
-  @each $theme-name, $theme in $themes {
-    $theme-colors: generate-theme-colors($theme, $theme-config);
-
-    &.#{$theme-name}-theme {
-      @each $color-name, $color-value in $theme-colors {
-        --#{$color-name}: #{$color-value}
-      }
-    }
-  }
-}
-```
-
-### Шрифтов
-
-```scss
-@import '@ws-serenity/sass-styling/lib/generator/fonts';
-
-// for full example check storybook
-
-:root {
-  // 1. declare css-vars
-  @include set-fonts-css-vars-by-map((
-    // @formatter:off
-          heading-1   50 bold      140% -0.03em,
-          body-1      18 regular   140% -0.03em,
-    // @formatter:on
-  ));
-
-  // 2. declare font and use in as placeholder, combined with mixin
-  %font-family-roboto {
-    font-family: 'Roboto', sans-serif;
-  }
-  @mixin use-font($name) {
-    @extend %font-family-roboto;
-    // 2.5 call special mixin from library, to set css-vars
-    @include use-css-vars-based-font($name);
-  }
-
-  // 3. declare placeholders and just use mixin above
-  %heading-1 {
-    @include use-font(heading-1);
-  }
-
-  %body-1 {
-    @include use-font(body-1);
-  }
-
-  // 4. declare the styles
-  .body-1 {
-    @extend %body-1;
-  }
-
-  .heading-1 {
-    @extend %heading-1;
-  }
-}
-```
+## About
+
+Библиотека базовых sass-стилей
+
+## Sass
+
+Папка не обладает сайд-эффектами, ее можно импортировать сколько угодно. 
+
+Общий импорт:
+```scss
+@import '@ws-serenity/sass-styling/lib/sass';
+```
+
+### Содержимое
+- `adaptive` - миксины для адаптива
+- `alignment` - размещение элементов (flex, margin-center,...)
+- `functions` - полезные sass-функции
+- `keyframes` - анимации
+- `styling` - внешний вид (максимальное скругление, background-alpha)
+- `svgUtils` - цвет и размер svg
+- `textUtils` - оверфлоу текста
+
+## Side-effect
+
+Импортировать эти файлы необходимо единожды! Иначе возникнет дублирование стилей
+
+## Generator
+
+### Палитры
+```scss
+@import '@ws-serenity/sass-styling/lib/generator/colors';
+
+// for $themes and $themes-config declaration check storybook
+
+@mixin create-css-themes-root() {
+  @each $theme-name, $theme in $themes {
+    $theme-colors: generate-theme-colors($theme, $theme-config);
+
+    &.#{$theme-name}-theme {
+      @each $color-name, $color-value in $theme-colors {
+        --#{$color-name}: #{$color-value}
+      }
+    }
+  }
+}
+```
+
+### Шрифтов
+
+```scss
+@import '@ws-serenity/sass-styling/lib/generator/fonts';
+
+// for full example check storybook
+
+:root {
+  // 1. declare css-vars
+  @include set-fonts-css-vars-by-map((
+    // @formatter:off
+          heading-1   50 bold      140% -0.03em,
+          body-1      18 regular   140% -0.03em,
+    // @formatter:on
+  ));
+
+  // 2. declare font and use in as placeholder, combined with mixin
+  %font-family-roboto {
+    font-family: 'Roboto', sans-serif;
+  }
+  @mixin use-font($name) {
+    @extend %font-family-roboto;
+    // 2.5 call special mixin from library, to set css-vars
+    @include use-css-vars-based-font($name);
+  }
+
+  // 3. declare placeholders and just use mixin above
+  %heading-1 {
+    @include use-font(heading-1);
+  }
+
+  %body-1 {
+    @include use-font(body-1);
+  }
+
+  // 4. declare the styles
+  .body-1 {
+    @extend %body-1;
+  }
+
+  .heading-1 {
+    @extend %heading-1;
+  }
+}
+```