@onereach/styles 0.1.2 → 0.1.4

package/src/components/base/_radio-group.scss

@@ -1,8 +1,9 @@
-@import "../../utils";
+@use "../../utils" as *;
+@use "../../variables/initial";
 
-$radio-group-prefix: base !default;
-$radio-group-column-mb: get-spacing(4) !default;
-$radio-group-row-mr: get-spacing(4) !default;
+$radio-group-prefix: initial.$base-prefix !default;
+$radio-group-column-mb: var(--s-4) !default;
+$radio-group-row-mr: var(--s-4) !default;
 
 .#{$radio-group-prefix}-radio-group {
   &.is-column {

package/src/components/base/_radio.scss

@@ -1,13 +1,12 @@
-@import "../../utils";
+@use "../../utils" as *;
+@use "../../variables/initial";
 
-$radio-prefix: base !default;
+$radio-prefix: initial.$base-prefix !default;
 $radio-icon-size: px-to-rem(16) !default;
 
 $radio-dot-size: $radio-icon-size - px-to-rem(12) !default;
 $radio-dot-bg: var(--c-white) !default;
 
-$radio-icon-radius: 9999px;
-
 $radio-icon-border-width: px-to-rem(1) !default;
 $radio-icon-border-color: var(--c-neutral-2) !default;
 $radio-icon-border-color-hover: var(--c-neutral-2-darken-3) !default;
@@ -18,12 +17,10 @@ $radio-icon-bg-hover: var(--c-white-darken-3) !default;
 $radio-icon-bg-active: var(--c-white-darken-5) !default;
 $radio-icon-bg-checked: var(--c-primary) !default;
 
+$radio-content-spacing: var(--s-3) !default;
 $radio-content-color: var(--c-neutral-6) !default;
 $radio-content-color-disabled: var(--c-neutral-4) !default;
 
-$radio-transition-func: get-transition-func() !default;
-$radio-transition-time: get-transition-time() !default;
-
 @mixin is-checked() {
   &.is-checked {
     .#{$radio-prefix}-radio {
@@ -54,13 +51,12 @@ $radio-transition-time: get-transition-time() !default;
     min-width: $radio-icon-size;
     height: $radio-icon-size;
     min-height: $radio-icon-size;
-    margin-right: get-spacing(3);
+    margin-right: $radio-content-spacing;
     background-color: $radio-icon-bg;
     border: $radio-icon-border-width solid $radio-icon-border-color;
-    border-radius: $radio-icon-radius;
-    transition-timing-function: $radio-transition-func;
-    transition-duration: $radio-transition-time;
-    transition-property: border-color, background-color, opacity;
+    border-radius: initial.$round;
+
+    @include transition(border-color, background-color, opacity);
 
     &::after {
       position: absolute;
@@ -72,18 +68,16 @@ $radio-transition-time: get-transition-time() !default;
       background-color: $radio-dot-bg;
       border-radius: inherit;
       transition-delay: 0.15s;
-      transition-timing-function: $radio-transition-func;
-      transition-duration: $radio-transition-time;
-      transition-property: transform;
       transform: translate(-50%, -50%) scale(0);
+
+      @include transition(transform);
     }
   }
 
   &--content {
     color: $radio-content-color;
-    transition-timing-function: $radio-transition-func;
-    transition-duration: $radio-transition-time;
-    transition-property: color;
+
+    @include transition(color);
   }
 
   @include is-checked;

package/src/components/base/_switch.scss

@@ -1,14 +1,12 @@
-@import "../../utils";
+@use "../../utils" as *;
+@use "../../variables/initial";
 
 // base
-$switch-prefix: base !default;
-$switch-transition-func: get-transition-func() !default;
-$switch-transition-time: get-transition-time() !default;
+$switch-prefix: initial.$base-prefix !default;
 
 // layer
 $switch-layer-width: px-to-rem(34) !default;
 $switch-layer-height: px-to-rem(14) !default;
-$switch-layer-border-radius: 9999px !default;
 
 $switch-layer-bg: var(--c-neutral-2) !default;
 $switch-layer-bg-hover: var(--c-neutral-2-darken-3) !default;
@@ -31,6 +29,10 @@ $switch-knob-border-color: var(--c-neutral-1) !default;
 $switch-loader-size: calc(#{$switch-knob-size} - #{px-to-rem(5)});
 $switch-loader-color: var(--c-primary) !default;
 
+$switch-content-spacing: var(--s-3) !default;
+$switch-content-color: var(--c-neutral-6) !default;
+$switch-content-color-disabled: var(--c-neutral-4) !default;
+
 @mixin is-checked() {
   &.is-checked {
     .#{$switch-prefix}-switch {
@@ -62,24 +64,29 @@ $switch-loader-color: var(--c-primary) !default;
 }
 
 .#{$switch-prefix}-switch {
-  position: relative;
   display: inline-flex;
+  align-items: center;
   cursor: pointer;
 
   &--input {
     @include visually-hidden;
   }
 
+  &--switcher {
+    position: relative;
+    display: inline-flex;
+    margin-right: $switch-content-spacing;
+  }
+
   &--layer {
     width: $switch-layer-width;
     min-width: $switch-layer-width;
     height: $switch-layer-height;
     min-height: $switch-layer-height;
     background-color: $switch-layer-bg;
-    border-radius: $switch-layer-border-radius;
-    transition-timing-function: $switch-transition-func;
-    transition-duration: $switch-transition-time;
-    transition-property: background-color, opacity;
+    border-radius: initial.$round;
+
+    @include transition(background-color, opacity);
   }
 
   &--knob {
@@ -98,10 +105,15 @@ $switch-loader-color: var(--c-primary) !default;
     border-width: $switch-knob-border-width solid $switch-knob-border-color;
     border-radius: 9999px;
     box-shadow: $switch-knob-box-shadow;
-    transition-timing-function: $switch-transition-func;
-    transition-duration: $switch-transition-time;
-    transition-property: transform, box-shadow;
     transform: translate(-3px, -50%);
+
+    @include transition(transform, box-shadow);
+  }
+
+  &--content {
+    color: $switch-content-color;
+
+    @include transition(color);
   }
 
   &--loader {
@@ -138,11 +150,16 @@ $switch-loader-color: var(--c-primary) !default;
         opacity: 0.5;
       }
 
-      &-knob {
+      &--knob {
         box-shadow: $switch-knob-box-shadow-disabled;
       }
+
+      &--content {
+        color: $switch-content-color-disabled;
+      }
     }
   }
 
   @include is-checked;
+  @include loading;
 }

package/src/components/base/_textbox.scss

@@ -0,0 +1,242 @@
+@use "sass:list";
+@use "../../utils" as *;
+@use "../../variables/initial";
+
+$textbox-prefix: initial.$base-prefix !default;
+
+$textbox-border-width: 1px !default;
+
+$textbox-placeholder-color: var(--c-neutral-4) !default;
+
+$textbox-color-error: var(--c-error) !default;
+
+$textbox-bg: var(--c-neutral-1) !default;
+$textbox-bg-hover: var(--c-white) !default;
+$textbox-bg-focus: var(--c-white) !default;
+$textbox-bg-disabled: var(--c-neutral-2) !default;
+
+$textbox-border-color: var(--c-neutral-2) !default;
+$textbox-border-color-hover: var(--c-neutral-2-darken-3) !default;
+$textbox-border-color-focus: var(--c-primary) !default;
+$textbox-border-color-active: var(--c-neutral-2-darken-5) !default;
+$textbox-border-color-disabled: var(--c-neutral-2) !default;
+
+$textbox-border-color-error: var(--c-error) !default;
+$textbox-border-color-error-hover: var(--c-error-darken-3) !default;
+$textbox-border-color-error-focus: var(--c-error-darken-5) !default;
+$textbox-border-color-error-disabled: var(--c-error) !default;
+
+$textbox-border-radius: px-to-rem(4) !default;
+
+$textbox-height: px-to-rem(36) !default;
+$textbox-min-width: px-to-rem(114) !default;
+
+$textbox-padding: px-to-rem(10) !default;
+
+$textbox-font-size: var(--fs-1) !default;
+
+$textbox-label-margin: 0 0 px-to-rem(4) !default;
+$textbox-label-color: var(--c-neutral-4) !default;
+
+.#{$textbox-prefix}-textbox {
+  display: flex;
+  flex-direction: column;
+
+  &--content {
+    width: 100%;
+  }
+
+  &--label {
+    margin: $textbox-label-margin;
+    color: $textbox-label-color;
+
+    .material-icons {
+      font-size: var(--fs-1);
+    }
+  }
+
+  &--append,
+  &--prepend {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    min-height: $textbox-height;
+  }
+
+  &--append {
+    margin-left: px-to-rem(10);
+  }
+
+  &--prepend {
+    margin-right: px-to-rem(10);
+  }
+
+  &--input {
+    display: block;
+    width: 100%;
+    min-width: $textbox-min-width;
+    height: $textbox-height;
+    padding: $textbox-padding;
+    font-family: inherit;
+    font-size: $textbox-font-size;
+    background-color: $textbox-bg;
+    border: $textbox-border-width solid $textbox-border-color;
+    border-radius: $textbox-border-radius;
+    outline: none;
+
+    @include transition(border-color, background-color);
+
+    &[type="password"],
+    &[type="search"] {
+      padding-right: calc(#{$textbox-padding} + #{px-to-rem(26)});
+    }
+
+    &-wr {
+      position: relative;
+      display: flex;
+      width: 100%;
+    }
+
+    &-toggle-btn {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      z-index: 1;
+      transform: translate(-#{list.nth($textbox-padding, 1)}, -50%);
+    }
+
+    &::placeholder {
+      color: $textbox-placeholder-color;
+
+      @include transition(opacity);
+    }
+
+    @include hover {
+      background-color: $textbox-bg-hover;
+      border-color: $textbox-border-color-hover;
+    }
+
+    @include active {
+      border-color: $textbox-border-color-active;
+    }
+
+    @include focus {
+      background-color: $textbox-bg-focus;
+      border-color: $textbox-border-color-focus;
+
+      &::placeholder {
+        opacity: 0;
+      }
+    }
+
+    @include disabled {
+      background-color: $textbox-bg-disabled;
+      border-color: $textbox-border-color-disabled;
+    }
+  }
+
+  &--textarea {
+    @extend .#{$textbox-prefix}-textbox--input;
+
+    min-height: px-to-rem(79);
+    max-height: px-to-rem(142);
+    overflow-x: hidden;
+    overflow-y: auto;
+    resize: none;
+  }
+
+  &--info {
+    width: 100%;
+    margin: 0;
+
+    @include transition(height, opacity);
+  }
+
+  &--counter {
+    flex-shrink: 0;
+    margin-left: auto;
+    font-size: var(--fs-0);
+    line-height: px-to-rem(14);
+    color: var(--c-neutral-4);
+  }
+
+  &--hint,
+  &-error {
+    flex-shrink: 1;
+
+    @include transition(height, opacity);
+  }
+
+  &.is-small {
+    .#{$textbox-prefix}-textbox {
+      &--input {
+        padding: px-to-rem(8) px-to-rem(10);
+        font-size: var(--fs-0);
+
+        &[type="password"],
+        &[type="search"] {
+          padding-right: calc(#{px-to-rem(10)} + #{px-to-rem(12) * 2});
+        }
+
+        &-toggle-btn {
+          .material-icons {
+            font-size: var(--fs-1);
+          }
+        }
+      }
+    }
+  }
+
+  &.has-slot {
+    flex-direction: row;
+    align-items: flex-end;
+  }
+
+  &.has-counter {
+    .#{$textbox-prefix}-textbox {
+      &--hint,
+      &--error {
+        padding-right: px-to-rem(15);
+      }
+    }
+  }
+
+  &.is-show-info {
+    .#{$textbox-prefix}-textbox {
+      &--info {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        padding-top: px-to-rem(4);
+      }
+    }
+  }
+
+  @include disabled {
+    .#{$textbox-prefix}-textbox {
+      &--input-toggle-btn {
+        pointer-events: none;
+      }
+    }
+  }
+
+  @include has-error {
+    .#{$textbox-prefix}-textbox {
+      &--input {
+        border-color: $textbox-border-color-error;
+
+        @include hover {
+          border-color: $textbox-border-color-error-hover;
+        }
+
+        @include focus {
+          border-color: $textbox-border-color-error-focus;
+        }
+
+        @include disabled {
+          border-color: $textbox-border-color-error-disabled;
+        }
+      }
+    }
+  }
+}

package/src/layout/_display.scss

@@ -0,0 +1,29 @@
+.d {
+  &-inline {
+    display: inline;
+  }
+
+  &-inline-block {
+    display: inline-block;
+  }
+
+  &-flex {
+    display: flex;
+  }
+
+  &-inline-flex {
+    display: inline-flex;
+  }
+
+  &-block {
+    display: block;
+  }
+
+  &-grid {
+    display: grid;
+  }
+
+  &-inline-grid {
+    display: inline-grid;
+  }
+}

package/src/layout/_flexbox.scss

@@ -0,0 +1,79 @@
+.align {
+  &-baseline {
+    align-items: baseline;
+  }
+
+  &-start {
+    align-items: start;
+  }
+
+  &-end {
+    align-items: end;
+  }
+
+  &-self-start {
+    align-items: self-start;
+  }
+
+  &-self-end {
+    align-items: self-end;
+  }
+
+  &-flex-start {
+    align-items: flex-start;
+  }
+
+  &-flex-end {
+    align-items: flex-end;
+  }
+
+  &-stretch {
+    align-items: stretch;
+  }
+
+  &-center {
+    align-items: center;
+  }
+}
+
+.justify {
+  &-start {
+    justify-content: start;
+  }
+
+  &-end {
+    justify-content: end;
+  }
+
+  &-left {
+    justify-content: left;
+  }
+
+  &-right {
+    justify-content: right;
+  }
+
+  &-flex-start {
+    justify-content: flex-start;
+  }
+
+  &-flex-end {
+    justify-content: flex-end;
+  }
+
+  &-space-between {
+    justify-content: space-between;
+  }
+
+  &-space-around {
+    justify-content: space-around;
+  }
+
+  &-sapce-evenly {
+    justify-content: space-evenly;
+  }
+
+  &-center {
+    justify-content: center;
+  }
+}

package/src/layout/_spacings.scss

@@ -0,0 +1,29 @@
+@use "sass:string";
+@use "../variables/initial";
+@use "../utils/functions/px-to-rem" as *;
+
+$directions: (top, right, bottom, left);
+$margin-prefix: m !default;
+$padding-prefix: p !default;
+
+.#{$margin-prefix}-0 {
+  margin: 0;
+}
+
+.#{$padding-prefix}-0 {
+  padding: 0;
+}
+
+@each $value in initial.$spacingsValues {
+  $i: index(initial.$spacingsValues, $value) - 1;
+
+  @each $direction in $directions {
+    .#{$margin-prefix + string.slice($direction, 1, 1)}-#{$i} {
+      margin-#{$direction}: px-to-rem($value);
+    }
+
+    .#{$padding-prefix + string.slice($direction, 1, 1)}-#{$i} {
+      padding-#{$direction}: px-to-rem($value);
+    }
+  }
+}

package/src/layout/index.scss

@@ -0,0 +1,3 @@
+@forward "display";
+@forward "flexbox";
+@forward "spacings";

package/src/main.scss

@@ -1,3 +1,4 @@
-@import "variables";
-@import "utils";
-@import "base";
+@forward "variables";
+@forward "utils";
+@forward "base";
+@forward "layout";

package/src/utils/mixins/_absolute-center.scss

@@ -0,0 +1,6 @@
+@mixin absolute-center() {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

package/src/utils/mixins/_has-error.scss

@@ -0,0 +1,5 @@
+@mixin has-error {
+  &.has-error {
+    @content;
+  }
+}

package/src/utils/mixins/_transition.scss

@@ -0,0 +1,7 @@
+@use "../../variables/initial" as *;
+
+@mixin transition($transition-props...) {
+  transition-timing-function: $transition-function;
+  transition-duration: $transition-duration;
+  transition-property: $transition-props;
+}

package/src/utils/mixins/index.scss

@@ -9,3 +9,6 @@
 @forward "loading";
 @forward "breakpont";
 @forward "overflow-touch";
+@forward "absolute-center";
+@forward "has-error";
+@forward "transition";

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