@onereach/styles 25.3.6 → 25.3.7-beta.5824.0

package/src/variables/_colors.scss

@@ -1,70 +0,0 @@
-@use 'sass:map';
-@use './initial';
-
-$c-primary: var(--c-primary);
-$c-primary-darken-3: var(--c-primary-darken-3);
-$c-primary-darken-5: var(--c-primary-darken-5);
-$c-primary-darken-45: var(--c-primary-darken-45);
-$c-primary-lighten-20: var(--c-primary-lighten-20);
-$c-primary-lighten-45: var(--c-primary-lighten-45);
-
-$c-error: var(--c-error);
-$c-error-darken-3: var(--c-error-darken-3);
-$c-error-darken-5: var(--c-error-darken-5);
-$c-error-darken-45: var(--c-error-darken-45);
-$c-error-lighten-20: var(--c-error-lighten-20);
-$c-error-lighten-45: var(--c-error-lighten-45);
-
-$c-warning: var(--c-warning);
-$c-warning-darken-3: var(--c-warning-darken-3);
-$c-warning-darken-5: var(--c-warning-darken-5);
-$c-warning-darken-45: var(--c-warning-darken-45);
-$c-warning-lighten-20: var(--c-warning-lighten-20);
-$c-warning-lighten-45: var(--c-warning-lighten-45);
-
-$c-success: var(--c-success);
-$c-success-darken-3: var(--c-success-darken-3);
-$c-success-darken-5: var(--c-success-darken-5);
-$c-success-darken-45: var(--c-success-darken-45);
-$c-success-lighten-20: var(--c-success-lighten-20);
-$c-success-lighten-45: var(--c-success-lighten-45);
-
-$c-neutral-0: var(--c-neutral-0);
-$c-neutral-0-darken-3: var(--c-neutral-0-darken-3);
-$c-neutral-0-darken-5: var(--c-neutral-0-darken-5);
-$c-neutral-0-lighten-20: var(--c-neutral-0-lighten-20);
-
-$c-neutral-1: var(--c-neutral-1);
-$c-neutral-1-darken-3: var(--c-neutral-1-darken-3);
-$c-neutral-1-darken-5: var(--c-neutral-1-darken-5);
-$c-neutral-1-lighten-20: var(--c-neutral-1-lighten-20);
-
-$c-neutral-2: var(--c-neutral-2);
-$c-neutral-2-darken-3: var(--c-neutral-2-darken-3);
-$c-neutral-2-darken-5: var(--c-neutral-2-darken-5);
-$c-neutral-2-lighten-20: var(--c-neutral-2-lighten-20);
-
-$c-neutral-3: var(--c-neutral-3);
-$c-neutral-3-darken-3: var(--c-neutral-3-darken-3);
-$c-neutral-3-darken-5: var(--c-neutral-3-darken-5);
-$c-neutral-3-lighten-20: var(--c-neutral-3-lighten-20);
-
-$c-neutral-4: var(--c-neutral-4);
-$c-neutral-4-darken-3: var(--c-neutral-4-darken-3);
-$c-neutral-4-darken-5: var(--c-neutral-4-darken-5);
-$c-neutral-4-lighten-20: var(--c-neutral-4-lighten-20);
-
-$c-neutral-5: var(--c-neutral-5);
-$c-neutral-5-darken-3: var(--c-neutral-5-darken-3);
-$c-neutral-5-darken-5: var(--c-neutral-5-darken-5);
-$c-neutral-5-lighten-20: var(--c-neutral-5-lighten-20);
-
-$c-neutral-6: var(--c-neutral-6);
-$c-neutral-6-darken-3: var(--c-neutral-6-darken-3);
-$c-neutral-6-darken-5: var(--c-neutral-6-darken-5);
-$c-neutral-6-lighten-20: var(--c-neutral-6-lighten-20);
-
-$c-body-bg: var(--c-body-bg);
-
-$c-white: var(--c-white);
-$c-black: var(--c-black);

package/src/variables/_css-vars.scss

@@ -1,91 +0,0 @@
-@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";
-
-// generate themes vars
-@each $name, $theme in initial.$themesList {
-  @if ($name == light) {
-    :root,
-    [data-theme=#{quote($name)}] {
-      @each $color-key, $color-value in $theme {
-        @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)}-darken-20: #{darken($color-value, 20%)};
-          --c-#{quote($color-key)}-darken-25: #{darken($color-value, 25%)};
-          --c-#{quote($color-key)}-darken-45: #{darken($color-value, 45%)};
-          --c-#{quote($color-key)}-lighten-20: #{lighten($color-value, 20%)};
-        }
-
-        @if ($color-key == primary or $color-key == warning or $color-key == success or $color-key == error) {
-          --c-#{quote($color-key)}-lighten-45: #{lighten($color-value, 45%)};
-        }
-      }
-    }
-  }
-
-  @else {
-    [data-theme=#{quote($name)}] {
-      @each $color-key, $color-value in $theme {
-        @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)}-darken-20: #{darken($color-value, 20%)};
-          --c-#{quote($color-key)}-darken-25: #{darken($color-value, 25%)};
-          --c-#{quote($color-key)}-darken-45: #{darken($color-value, 45%)};
-          --c-#{quote($color-key)}-lighten-20: #{lighten($color-value, 20%)};
-        }
-
-        @if ($color-key == primary or $color-key == warning or $color-key == success or $color-key == error) {
-          --c-#{quote($color-key)}-lighten-45: #{lighten($color-value, 45%)};
-        }
-      }
-    }
-  }
-}
-
-: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

@@ -1,25 +0,0 @@
-@use "sass:map";
-@use "sass:color";
-@use "tokens/design-tokens" as *;
-
-$themesList: map.get($design-tokens, themes);
-$spacingList: map.get($design-tokens, spacings);
-$fontSizeList: map.get($design-tokens, typography, font-sizes);
-$fontWeightList: map.get($design-tokens, typography, font-weights);
-$lineHeightList: map.get($design-tokens, typography, line-heights);
-
-// list of values
-$spacingsValues: map.values($spacingList);
-$fontSizeValues: map.values($fontSizeList);
-$fontWeightValues: map.values($fontWeightList);
-$lineHeightValues: map.values($lineHeightList);
-
-// generic
-$round: 9999px;
-$overlay-bg-color: color.adjust(
-  map.get($themesList, light, neutral-6),
-  $alpha: -0.2
-);
-
-$transition-function: var(--t-func);
-$transition-duration: var(--t-duration);

package/src/variables/_spacings.scss

@@ -1,11 +0,0 @@
-// spacings
-$s-0: var(--s-0);
-$s-1: var(--s-1);
-$s-2: var(--s-2);
-$s-3: var(--s-3);
-$s-4: var(--s-4);
-$s-5: var(--s-5);
-$s-6: var(--s-6);
-$s-7: var(--s-7);
-$s-8: var(--s-8);
-$s-9: var(--s-9);

package/src/variables/_typography.scss

@@ -1,15 +0,0 @@
-// font-sizes
-$fs-0: var(--fs-0);
-$fs-1: var(--fs-1);
-$fs-2: var(--fs-2);
-$fs-3: var(--fs-3);
-
-// font-weights
-$fw-0: var(--fw-0);
-$fw-1: var(--fw-1);
-$fw-2: var(--fw-2);
-
-// line-heights
-$lh-0: var(--lh-0);
-$lh-1: var(--lh-1);
-$lh-2: var(--lh-2);

package/src/variables/_z-index.scss

@@ -1,5 +0,0 @@
-$select-dropdown: 10;
-$overlay-z-index: 25;
-$modal: 50;
-$header-popup: $modal - 5;
-$header-loader: $header-popup - 5;

package/src/variables/index.scss

@@ -1,7 +0,0 @@
-@forward "tokens/design-tokens";
-@forward "css-vars";
-@forward "initial";
-@forward "colors";
-@forward "typography";
-@forward "spacings";
-@forward "z-index";

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

@@ -1,86 +0,0 @@
-$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: 700
-    ),
-    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: #fcbc05,
-      success: #4ec00f,
-      neutral-0: #fff,
-      neutral-1: #f6f6f6,
-      neutral-2: #dfdfdf,
-      neutral-3: #c6c6c6,
-      neutral-4: #91969d,
-      neutral-5: #6c747d,
-      neutral-6: #1e232b,
-      body-bg: #fff,
-      white: #fff,
-      black: #000
-    ),
-    dark: (
-      primary: #A4C8FF,
-      error: #FFB4A9,
-      warning: #FBBC0C,
-      success: #6CE036,
-      neutral-0: #1B1B1D,
-      neutral-1: #222428,
-      neutral-2: #26292F,
-      neutral-3: #2A2E36,
-      neutral-4: #E1EAF6,
-      neutral-5: #DFE8F6,
-      neutral-6: #E3E2E6,
-      c-body-bg: #1B1B1D,
-      white: #222428,
-      black: #fff
-    ),
-    custom: (
-      primary: rgb(236, 0, 140),
-      error: rgb(232, 17, 35),
-      warning: rgb(255, 241, 0),
-      success: rgb(186, 216, 10),
-      neutral-0: rgb(255, 140, 0),
-      neutral-1: rgb(236, 0, 140),
-      neutral-2: rgb(104, 33, 122),
-      neutral-3: rgb(0, 24, 143),
-      neutral-4: rgb(0, 188, 242),
-      neutral-5: rgb(0, 178, 148),
-      neutral-6: rgb(0, 158, 73),
-      c-body-bg: #fff,
-      white: #fff,
-      black: #000
-    )
-  )
-);