@onereach/styles 0.1.3 → 0.1.6

package/src/variables/_css-vars.scss

@@ -1,14 +1,25 @@
 @use 'sass:map';
+@use "../utils/functions/px-to-rem" as *;
+@use "../utils/functions/get-transition-func" as *;
+@use "../utils/functions/get-transition-time" as *;
+@use "initial";
 
-@each $name, $theme in map.get($design-tokens, themes) {
+// generate themes vars
+@each $name, $theme in initial.$themesList {
   @if ($name == light) {
     :root,
     [data-theme=#{quote($name)}] {
       @each $color-key, $color-value in $theme {
-        --c-#{$color-key + ""}: #{$color-value};
-        --c-#{$color-key + ""}-lighten-20: #{lighten($color-value, 20%)};
-        --c-#{$color-key + ""}-darken-3: #{darken($color-value, 3%)};
-        --c-#{$color-key + ""}-darken-5: #{darken($color-value, 5%)};
+        @if ($color-key == white or $color-key == black or $color-key == body-bg) {
+          --c-#{$color-key + ""}: #{$color-value};
+        }
+
+        @else {
+          --c-#{quote($color-key)}: #{$color-value};
+          --c-#{quote($color-key)}-darken-3: #{darken($color-value, 3%)};
+          --c-#{quote($color-key)}-darken-5: #{darken($color-value, 5%)};
+          --c-#{quote($color-key)}-lighten-20: #{lighten($color-value, 20%)};
+        }
       }
     }
   }
@@ -16,11 +27,51 @@
   @else {
     [data-theme=#{quote($name)}] {
       @each $color-key, $color-value in $theme {
-        --c-#{$color-key + ""}: #{$color-value};
-        --c-#{$color-key + ""}-lighten-20: #{lighten($color-value, 20%)};
-        --c-#{$color-key + ""}-darken-3: #{darken($color-value, 3%)};
-        --c-#{$color-key + ""}-darken-5: #{darken($color-value, 5%)};
+        @if ($color-key == white or $color-key == black) {
+          --c-#{$color-key + ""}: #{$color-value};
+        }
+
+        @else {
+          --c-#{quote($color-key)}: #{$color-value};
+          --c-#{quote($color-key)}-darken-3: #{darken($color-value, 3%)};
+          --c-#{quote($color-key)}-darken-5: #{darken($color-value, 5%)};
+          --c-#{quote($color-key)}-lighten-20: #{lighten($color-value, 20%)};
+        }
       }
     }
   }
 }
+
+:root {
+  // spacings
+  @each $value in initial.$spacingsValues {
+
+    $i: index(initial.$spacingsValues, $value) - 1;
+
+    --s-#{$i}: #{px-to-rem($value)};
+  }
+
+  --t-func: #{get-transition-func()};
+  --t-duration: #{get-transition-time()};
+
+  // font-sizes
+  @each $value in initial.$fontSizeValues {
+    $i: index(initial.$fontSizeValues, $value) - 1;
+
+    --fs-#{$i}: #{px-to-rem($value)};
+  }
+
+  // font-weights
+  @each $value in initial.$fontWeightValues {
+    $i: index(initial.$fontWeightValues, $value) - 1;
+
+    --fw-#{$i}: #{$value};
+  }
+
+  // line-heights
+  @each $value in initial.$lineHeightValues {
+    $i: index(initial.$lineHeightValues, $value) - 1;
+
+    --lh-#{$i}: #{px-to-rem($value)};
+  }
+}

package/src/variables/_initial.scss

@@ -0,0 +1,40 @@
+@use "sass:map";
+@use "tokens/design-tokens" as *;
+
+$themesList: map.get($design-tokens, themes) !default;
+$spacingList: map.get($design-tokens, spacings) !default;
+$fontSizeList: map.get($design-tokens, typography, font-sizes) !default;
+$fontWeightList: map.get($design-tokens, typography, font-weights) !default;
+$lineHeightList: map.get($design-tokens, typography, line-heights) !default;
+//$colorsList: (primary, error, warning, success, neutral-0, neutral-1, neutral-2, neutral-3, neutral-4, neutral-5, neutral-6);
+
+// list of values
+$spacingsValues: map.values($spacingList);
+$fontSizeValues: map.values($fontSizeList);
+$fontWeightValues: map.values($fontWeightList);
+$lineHeightValues: map.values($lineHeightList);
+
+// typo
+$body-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !default;
+$body-font-size: var(--fs-1) !default;
+$body-font-weight: var(--fw-0) !default;
+$body-line-height: var(--lh-1) !default;
+
+$caption-font-size: var(--fs-0) !default;
+$caption-font-weight: var(--fw-0) !default;
+$caption-line-height: var(--lh-0) !default;
+
+$subheading-font-size: var(--fs-2) !default;
+$subheading-font-weight: var(--fw-2) !default;
+$subheading-line-height: var(--lh-1) !default;
+
+$heading-font-size: var(--fs-3) !default;
+$heading-font-weight: var(--fw-2) !default;
+$heading-line-height: var(--lh-2) !default;
+
+// generic
+$base-prefix: quote(base) !default;
+$round: 9999px !default;
+
+$transition-function: var(--t-func) !default;
+$transition-duration: var(--t-duration) !default;

package/src/variables/index.scss

@@ -1,2 +1,3 @@
-@import "tokens/design-tokens";
-@import "css-vars";
+@forward "tokens/design-tokens";
+@forward "css-vars";
+@forward "initial";

package/src/variables/tokens/design-tokens.scss

@@ -39,36 +39,32 @@ $design-tokens: (
       error: #da1e28,
       warning: #f0d10d,
       success: #4ec00f,
-      grey: #91969d,
-      text: #1e232b,
-      body-bg: #fff,
-      white: #fff,
-      black: #000,
       neutral-0: #fff,
       neutral-1: #f6f6f6,
       neutral-2: #dfdfdf,
       neutral-3: #c6c6c6,
       neutral-4: #91969d,
       neutral-5: #6c747d,
-      neutral-6: #1e232b
+      neutral-6: #1e232b,
+      body-bg: #fff,
+      white: #fff,
+      black: #000
     ),
     dark: (
       primary: #178ae7,
       error: #da1e28,
       warning: #f0d10d,
       success: #4ec00f,
-      grey: #91969d,
-      c-text: #1e232b,
-      c-body-bg: #fff,
-      white: #fff,
-      black: #000,
       neutral-0: #fff,
       neutral-1: #f6f6f6,
       neutral-2: #dfdfdf,
       neutral-3: #c6c6c6,
       neutral-4: #91969d,
       neutral-5: #6c747d,
-      neutral-6: #1e232b
+      neutral-6: #1e232b,
+      c-body-bg: #fff,
+      white: #fff,
+      black: #000
     )
   )
 );