docs: utilities (#37)

Author: KostaD02

scss/utilities/_background-colors.scss

@@ -2,6 +2,7 @@
 
 @each $property, $value in $color-variations {
   .bg-#{"" + $property} {
-    background-color: var(--#{$prefix}bg-color-#{$property});
+    color: var(--#{$prefix}#{$property}-text-color);
+    background-color: var(--#{$prefix}#{$property}-bg-color);
   }
 }

scss/utilities/_border.scss

@@ -22,8 +22,8 @@ $border-properties: "border", "border-top", "border-right", "border-bottom", "bo
   }
 }
 
-@each $property, $value in $base-colors {
+@each $property, $value in $color-variations {
   .border-color-#{"" + $property} {
-    border-color: var(--#{$prefix}color-#{$property}-100);
+    border-color: var(--#{$prefix}#{$property}-bg-color);
   }
 }

scss/utilities/_flex.scss

@@ -1,10 +1,10 @@
 @use "../functions/apply-utility" as *;
 
 $wrap-values: nowrap, wrap, wrap-reverse;
-@include apply-utility-classes("flex-wrap", "flex-wrap", $wrap-values);
+@include apply-utility-classes("flex", "flex-wrap", $wrap-values);
 
 $direction-values: row, row-reverse, column, column-reverse;
-@include apply-utility-classes("flex-direction", "flex-direction", $direction-values);
+@include apply-utility-classes("flex", "flex-direction", $direction-values);
 
 $justify-content-values: flex-start, flex-end, center, space-between, space-around,
   space-evenly;
@@ -31,3 +31,7 @@ $grow-values: 0, 1;
 
 $shrink-values: 0, 1;
 @include apply-utility-classes("flex-shrink", "flex-shrink", $shrink-values);
+
+.flex-fill {
+  flex: 1 1 auto;
+}

scss/utilities/_index.scss

@@ -12,5 +12,6 @@
 @use "_image";
 @use "_radius";
 @use "_background-colors";
+@use "_interactions";
 @use "_flex";
 @use "_grid";

scss/utilities/_interactions.scss

@@ -0,0 +1,12 @@
+@use "../functions/apply-utility" as *;
+
+$cursor-values: pointer, default, none, move, text, wait, help, progress, not-allowed,
+  all-scroll, col-resize, row-resize, n-resize, e-resize, s-resize, w-resize, ne-resize,
+  nw-resize, se-resize, sw-resize;
+@include apply-utility-classes("cursor", "cursor", $cursor-values);
+
+$pointer-events-values: auto, none;
+@include apply-utility-classes("pe", "pointer-events", $pointer-events-values);
+
+$user-select-values: none, auto, text, all;
+@include apply-utility-classes("user-select", "user-select", $user-select-values);

scss/utilities/_text.scss

@@ -1,15 +1,14 @@
+@use "sass:map";
+@use "sass:list";
+
 @use "../variables/global" as *;
 @use "../functions/apply-utility" as *;
 
-$text-align-values: left, right, center, justify;
+$text-align-values: start, end, center, justify;
 @include apply-utility-classes("text", "text-align", $text-align-values);
 
-$text-transform-values: none, uppercase, lowercase, capitalize;
-@include apply-utility-classes(
-  "text-transform",
-  "text-transform",
-  $text-transform-values
-);
+$text-transform-values: uppercase, lowercase, capitalize;
+@include apply-utility-classes("text", "text-transform", $text-transform-values);
 
 $text-decoration-values: none, underline, overline, line-through;
 @include apply-utility-classes(
@@ -48,9 +47,17 @@ $font-style-values: normal, italic, oblique;
 $font-weight-values: 100, 200, 300, 400, 500, 600, 700, 800, 900;
 @include apply-utility-classes("fw", "font-weight", $font-weight-values, true);
 
-@each $property, $value in $font-sizes {
-  .fs-#{$property} {
-    font-size: var(--#{$prefix}font-size-#{$property});
+@for $i from 1 through list.length(map.keys($font-sizes)) {
+  $key: list.nth(map.keys($font-sizes), $i);
+
+  .fs-#{$i} {
+    font-size: var(--#{$prefix}font-size-#{$key});
+  }
+}
+
+@each $property, $value in $line-heights {
+  .lh-#{$property} {
+    line-height: var(--#{$prefix}line-height-#{$property});
   }
 }
 
@@ -59,3 +66,17 @@ $font-weight-values: 100, 200, 300, 400, 500, 600, 700, 800, 900;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.text-reset {
+  color: inherit !important;
+}
+
+@each $property, $value in $color-variations {
+  .text-#{"" + $property} {
+    color: var(--#{$prefix}#{$property}-bg-color);
+  }
+
+  .text-#{"" + $property}-bg {
+    color: var(--#{$prefix}#{$property}-text-color);
+  }
+}

scss/variables/_global.scss

@@ -6,13 +6,20 @@ $transitions-duration: 0.3s !default;
 $transitions: ease-in-out, ease-in, ease-out, linear !default;
 
 $font-sizes: (
-  sm: 0.75,
-  md: 1,
-  lg: 1.25,
-  xl: 1.5,
-  xxl: 2,
   xxxl: 3,
-);
+  xxl: 2,
+  xl: 1.5,
+  lg: 1.25,
+  md: 1,
+  sm: 0.75,
+) !default;
+
+$line-heights: (
+  1: 1,
+  sm: 1.25,
+  base: 1.5,
+  lg: 2,
+) !default;
 
 $container-padding-x: 1.5rem !default;
 

scss/variables/_root.scss

@@ -37,6 +37,10 @@
     --#{$prefix}font-size-#{$property}: #{$value}em;
   }
 
+  @each $property, $value in $line-heights {
+    --#{$prefix}line-height-#{$property}: #{$value};
+  }
+
   @each $property, $value in $border-vars {
     --#{$prefix}border-#{$property}: #{$value};
   }

stories/shared/consts/index.ts

@@ -0,0 +1,2 @@
+export * from "./placements";
+export * from "./variations";

stories/shared/consts/placements.ts

@@ -0,0 +1,3 @@
+import { Placement } from "../interfaces";
+
+export const PLACEMENTS: Placement[] = ["top", "bottom", "left", "right"];