@ws-serenity/sass-styling 0.0.1

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

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

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

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

package/lib/generator/colors/index.scss

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

package/lib/generator/fonts/index.scss

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

package/lib/sass/adaptive.scss

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

@@ -0,0 +1,28 @@
+%__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;
+}

package/lib/sass/styling.scss

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

package/lib/sass/svgUtils.scss

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

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

package/lib/side-effect/reset.scss

@@ -0,0 +1,77 @@
+* {
+  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;
+}

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@ws-serenity/sass-styling",
+  "version": "0.0.1",
+  "description": "",
+  "directories": {
+    "lib": "lib"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "peerDependencies": {
+    "sass": "1.55.0"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

package/readme.md

@@ -0,0 +1,78 @@
+## About
+
+Библиотека базовых sass-стилей
+
+## Sass
+
+Папка не обладает сайд-эффектами, ее можно импортировать сколько угодно
+
+## 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;
+  }
+}
+```