@onereach/styles 0.1.1

package/src/utils/mixins/_height-vh.scss

@@ -0,0 +1,19 @@
+@mixin heightVh($value: 100) {
+  height: #{$value * 1vh};
+  height: calc(var(--vh, 1vh) * #{$value});
+}
+
+@mixin heightVhStatic($value: 100) {
+  height: #{$value * 1vh};
+  height: calc(var(--vh-static, 1vh) * #{$value});
+}
+
+@mixin minHeightVh($value: 100) {
+  min-height: #{$value * 1vh};
+  min-height: calc(var(--vh, 1vh) * #{$value});
+}
+
+@mixin minHeightVhStatic($value: 100) {
+  min-height: #{$value * 1vh};
+  min-height: calc(var(--vh-static, 1vh) * #{$value});
+}

package/src/utils/mixins/_hover.scss

@@ -0,0 +1,17 @@
+@mixin hover {
+  @media (hover: hover) and (pointer: fine) {
+    &:not(&:disabled, &.is-loading) {
+      &:hover {
+        @content;
+      }
+    }
+  }
+
+  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    &:not(&:disabled, &.is-loading) {
+      &:hover {
+        @content;
+      }
+    }
+  }
+}

package/src/utils/mixins/_visual-hidden.scss

@@ -0,0 +1,10 @@
+@mixin visuallyHidden() {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px);
+  clip: rect(1px, 1px, 1px, 1px);
+  border: 0 !important;
+}

package/src/utils/mixins/index.scss

@@ -0,0 +1,8 @@
+@forward "absolute-stretch";
+@forward "extra-click-area";
+@forward "height-vh";
+@forward "visual-hidden";
+@forward "hover";
+@forward "active";
+@forward "focus";
+@forward "breakpont";

package/src/variables/_css-vars.scss

@@ -0,0 +1,26 @@
+@use 'sass:map';
+
+@each $name, $theme in map.get($design-tokens, themes) {
+  @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%)};
+      }
+    }
+  }
+
+  @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%)};
+      }
+    }
+  }
+}

package/src/variables/index.scss

@@ -0,0 +1,2 @@
+@import "tokens/design-tokens";
+@import "css-vars";

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

@@ -0,0 +1,74 @@
+$design-tokens: (
+  spacings: (
+    level-0: 0,
+    level-1: 2,
+    level-2: 4,
+    level-3: 8,
+    level-4: 16,
+    level-5: 24,
+    level-6: 32,
+    level-7: 48,
+    level-8: 64,
+    level-9: 128
+  ),
+  typography: (
+    font-sizes: (
+      level-0: 12,
+      level-1: 14,
+      level-2: 18,
+      level-3: 22
+    ),
+    font-weights: (
+      level-0: 400,
+      level-1: 600,
+      level-2: 800
+    ),
+    line-heights: (
+      level-0: 18,
+      level-1: 21,
+      level-2: 26
+    )
+  ),
+  transition: (
+    function: cubic-bezier(0.12, 0.39, 0.5, 0.93),
+    time: 0.25s
+  ),
+  themes: (
+    light: (
+      primary: #178ae7,
+      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
+    ),
+    dark: (
+      primary: #178ae7,
+      error: #da1e28,
+      warning: #f0d10d,
+      success: #4ec00f,
+      grey: #91969d,
+      c-text: #1e232b,
+      c-body-bg: #fff,
+      white: #fff,
+      black: #000,
+      neutral-6: #fff,
+      neutral-5: #f6f6f6,
+      neutral-4: #dfdfdf,
+      neutral-3: #c6c6c6,
+      neutral-2: #91969d,
+      neutral-1: #6c747d,
+      neutral-0: #1e232b
+    )
+  )
+);