@onereach/styles 0.1.1

package/src/components/base/_button.scss

@@ -0,0 +1,290 @@
+@import "../../utils";
+
+$btn-min-width: px-to-rem(96) !default;
+$btn-padding: get-spacing(2) get-spacing(4) !default;
+$btn-cursor: pointer !default;
+
+$btn-font-size: get-font-size(1) !default;
+$btn-font-weight: get-font-weight(1) !default;
+$btn-line-height: px-to-rem(22) !default;
+
+$btn-border-width: px-to-rem(1) !default;
+$btn-border-style: solid !default;
+$btn-border-radius: px-to-rem(4) !default;
+
+$btn-letter-spacing: px-to-rem(-0.15) !default;
+
+$btn-transition-func: get-transition-func() !default;
+$btn-transition-time: get-transition-time() !default;
+
+$btn-box-shadow: 0 px-to-rem(1) px-to-rem(2) 0 hsla(0, 0%, 0%, 20%) !default;
+$btn-box-shadow-second: 0 px-to-rem(1) px-to-rem(2) 0 hsla(0, 0%, 0%, 10%) !default;
+
+$btn-icon-font-size: calc(#{$btn-font-size} + #{px-to-rem(6)});
+
+$list-of-colors: (primary, error, "grey");
+$btn-types: (outline, text, icon);
+
+@mixin default-color-mixin() {
+  @each $key in $list-of-colors {
+    &.is-#{$key}-color {
+      --btn-#{$key}-color: var(--c-white);
+      --btn-#{$key}-bg-color: var(--c-#{$key});
+      --btn-#{$key}-darken-3: var(--c-#{$key}-darken-3);
+      --btn-#{$key}-darken-5: var(--c-#{$key}-darken-5);
+      --btn-#{$key}-lighten-20: var(--c-#{$key}-lighten-20);
+
+      color: var(--btn-#{$key}-color);
+      background-color: var(--btn-#{$key}-bg-color);
+      border-color: var(--c-#{$key});
+
+      .base-button {
+        &--loader {
+          &::after {
+            border-color: var(--btn-#{$key}-color);
+          }
+        }
+      }
+
+      @include hover {
+        background-color: var(--btn-#{$key}-darken-3);
+        border-color: var(--btn-#{$key}-darken-3);
+      }
+
+      @include active {
+        background-color: var(--btn-#{$key}-darken-5);
+        border-color: var(--btn-#{$key}-darken-5);
+      }
+
+      &:disabled,
+      &.is-loading {
+        background-color: var(--btn-#{$key}-lighten-20);
+        border-color: var(--btn-#{$key}-lighten-20);
+      }
+    }
+  }
+}
+
+@mixin outline-type() {
+  &.outline-type {
+    background-color: transparent;
+    box-shadow: none;
+
+    .base-button {
+      &--loader {
+        &::after {
+          border-color: inherit;
+        }
+      }
+    }
+
+    @each $key in $list-of-colors {
+      &.is-#{$key}-color {
+        --btn-#{$key}-color: var(--c-#{$key});
+        --btn-#{$key}-darken-3: var(--c-#{$key}-darken-3);
+        --btn-#{$key}-darken-5: var(--c-#{$key}-darken-5);
+        --btn-#{$key}-lighten-20: var(--c-#{$key}-lighten-20);
+
+        color: var(--btn-#{$key}-color);
+        border-color: var(--btn-#{$key}-color);
+
+        .base-button {
+          &--loader {
+            &::after {
+              border-color: var(--btn-#{$key}-lighten-20);
+            }
+          }
+        }
+
+        @include hover {
+          color: var(--c-white);
+          background-color: var(--btn-#{$key}-darken-3);
+          border-color: var(--btn-#{$key}-darken-3);
+        }
+
+        @include active {
+          color: var(--c-white);
+          background-color: var(--btn-#{$key}-darken-5);
+          border-color: var(--btn-#{$key}-darken-5);
+        }
+
+        &:disabled,
+        &.is-loading {
+          color: var(--btn-#{$key}-lighten-20);
+          background-color: transparent;
+          border-color: var(--btn-#{$key}-lighten-20);
+        }
+      }
+    }
+
+    // states
+    @include hover {
+      box-shadow: $btn-box-shadow;
+    }
+
+    @include active {
+      box-shadow: $btn-box-shadow-second;
+    }
+
+    &.is-loading {
+      box-shadow: $btn-box-shadow-second;
+    }
+  }
+}
+
+@mixin text-type() {
+  &.text-type {
+    min-width: auto;
+    padding: 0;
+    background-color: transparent;
+    border: 1px solid transparent;
+    box-shadow: none;
+
+    @each $key in $list-of-colors {
+      &.is-#{$key}-color {
+        --btn-#{$key}-color: var(--c-#{$key});
+        --btn-#{$key}-darken-3: var(--c-#{$key}-darken-3);
+        --btn-#{$key}-darken-5: var(--c-#{$key}-darken-5);
+        --btn-#{$key}-lighten-20: var(--c-#{$key}-lighten-20);
+
+        color: var(--btn-#{$key}-color);
+        background-color: transparent;
+        border-color: transparent;
+
+        @include hover {
+          color: var(--btn-#{$key}-darken-3);
+          background-color: transparent;
+          border-color: transparent;
+        }
+
+        @include active {
+          color: var(--btn-#{$key}-darken-5);
+          background-color: transparent;
+          border-color: transparent;
+        }
+
+        &:disabled,
+        &.is-loading {
+          color: var(--btn-#{$key}-lighten-20);
+          background-color: transparent;
+          border-color: transparent;
+        }
+      }
+    }
+  }
+}
+
+@mixin is-loading() {
+  &.is-loading {
+    cursor: progress !important;
+
+    .base-button {
+      &--loader {
+        visibility: visible;
+        opacity: 1;
+
+        &::after {
+          animation-play-state: running;
+        }
+      }
+
+      &--content {
+        opacity: 0;
+      }
+    }
+  }
+}
+
+@mixin is-fullwidth() {
+  &.is-fullwidth {
+    width: 100%;
+  }
+}
+
+.base-button {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: $btn-min-width;
+  padding: $btn-padding;
+  font-family: inherit;
+  font-size: $btn-font-size;
+  font-weight: $btn-font-weight;
+  line-height: $btn-line-height;
+  letter-spacing: $btn-letter-spacing;
+  cursor: $btn-cursor;
+  border: $btn-border-width $btn-border-style;
+  border-radius: $btn-border-radius;
+  box-shadow: $btn-box-shadow;
+  transition-timing-function: $btn-transition-func;
+  transition-duration: $btn-transition-time;
+  transition-property: color, background-color, box-shadow, border-color;
+
+  .base-icon {
+    font-size: $btn-icon-font-size;
+  }
+
+  &--loader {
+    position: absolute !important;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity $btn-transition-time $btn-transition-func;
+
+    &::after {
+      border-color: inherit;
+      animation-play-state: paused;
+    }
+  }
+
+  &--content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity $btn-transition-time $btn-transition-func;
+
+    &-prepend,
+    &-append {
+      display: inline-flex;
+    }
+
+    &-prepend {
+      margin-right: px-to-rem(8);
+    }
+
+    &-append {
+      margin-left: px-to-rem(8);
+    }
+  }
+
+  // sizes
+  &.is-small {
+    font-size: calc(#{$btn-font-size} - #{px-to-rem(2)});
+    line-height: 1;
+
+    .base-icon {
+      font-size: $btn-icon-font-size;
+    }
+  }
+
+  @include default-color-mixin;
+  @include outline-type;
+  @include text-type;
+  @include is-loading;
+  @include is-fullwidth;
+
+  // disabled styles for all btn-types
+  &:disabled {
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+}

package/src/components/base/_icon.scss

@@ -0,0 +1,11 @@
+@use "../../utils/functions" as *;
+@use "../../utils/mixins" as *;
+
+$icon-size: px-to-rem(20) !default;
+$icon-color: inherit !default;
+
+.base-icon {
+  display: inline-flex;
+  font-size: $icon-size;
+  color: $icon-color;
+}

package/src/components/base/_loader.scss

@@ -0,0 +1,51 @@
+@use "../../utils/functions" as *;
+@use "../../utils/mixins" as *;
+@use "../../base/animation" as *;
+
+$loader-width: px-to-rem(24) !default;
+$loader-height: $loader-width !default;
+$loader-border-width: 2px !default;
+$loader-border-color: inherit;
+
+// loader types mixins
+@mixin default-type() {
+  &.is-default {
+    &::after {
+      width: $loader-width;
+      height: $loader-height;
+      content: '';
+      border-color: $loader-border-color;
+      border-top: $loader-border-width solid;
+      border-right: $loader-border-width solid;
+      border-bottom: $loader-border-width solid transparent !important;
+      border-left: $loader-border-width solid;
+      border-radius: 50%;
+      animation: spinAround 0.7s linear infinite;
+    }
+  }
+}
+
+@mixin text-type() {
+  &.is-text {
+    > span {
+      display: inline-flex;
+    }
+
+    @for $i from 0 through 3 {
+      .base-loader--dot:nth-child(#{$i}) {
+        animation: fade 1s ease-out $i * 0.2s infinite;
+      }
+    }
+  }
+}
+
+.base-loader {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  // types
+  @include default-type;
+  @include text-type;
+}

package/src/components/modern/_button.scss

@@ -0,0 +1,6 @@
+$btn-min-width: 300px;
+$btn-padding: 20px 20px;
+$btn-border-radius: 9999px;
+$btn-font-size: 20px;
+
+@import "../base/button";

package/src/main.scss

@@ -0,0 +1,3 @@
+@import "variables";
+@import "utils";
+@import "base";

package/src/utils/functions/_breakpoint.scss

@@ -0,0 +1,33 @@
+@function breakpoint($key: "sm") {
+  @return map-get($breakpoints, $key);
+}
+
+@function breakpoint-next(
+  $name,
+  $breakpoints: $breakpoints,
+  $breakpoint-names: map-keys($breakpoints)
+) {
+  $n: index($breakpoint-names, $name);
+
+  @return if(
+    $n != null and $n < length($breakpoint-names),
+    nth($breakpoint-names, $n + 1),
+    null
+  );
+}
+
+@function breakpoint-min($name, $breakpoints: $breakpoints) {
+  $min: map-get($breakpoints, $name);
+
+  @return if($min != 0, $min, null);
+}
+
+@function breakpoint-max($name, $breakpoints: $breakpoints) {
+  $next: breakpoint-next($name, $breakpoints);
+
+  @return if($next, breakpoint-min($next, $breakpoints) - 0.02, null);
+}
+
+@function breakpoint-infix($name, $breakpoints: $breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}

package/src/utils/functions/_get-font-size.scss

@@ -0,0 +1,19 @@
+@use "../../variables/tokens/design-tokens" as *;
+@use "sass:string";
+@use "sass:map";
+@use "px-to-rem" as *;
+
+@function get-font-size($levelIndex: 0, $unit: rem) {
+  $value: map.get($design-tokens, typography, font-sizes, string.quote(level-#{$levelIndex}));
+  $defaultValue: map.get($design-tokens, typography, line-heights, string.quote(level-0));
+
+  @if $value and $unit == rem {
+    @return px-to-rem($value);
+  }
+
+  @else if $value and $unit != rem {
+    @return #{$value + $unit};
+  }
+
+  @return $defaultValue or 0;
+}

package/src/utils/functions/_get-font-weight.scss

@@ -0,0 +1,14 @@
+@use "../../variables/tokens/design-tokens" as *;
+@use "sass:string";
+@use "sass:map";
+
+@function get-font-weight($levelIndex: 0) {
+  $value: map.get($design-tokens, typography, font-weights, string.quote(level-#{$levelIndex}));
+  $defaultValue: map.get($design-tokens, typography, font-weights, string.quote(level-0));
+
+  @if $value {
+    @return $value;
+  }
+
+  @return $defaultValue or normal;
+}

package/src/utils/functions/_get-line-height.scss

@@ -0,0 +1,19 @@
+@use "../../variables/tokens/design-tokens" as *;
+@use "sass:string";
+@use "sass:map";
+@use "px-to-rem" as *;
+
+@function get-line-height($levelIndex: 0, $unit: rem) {
+  $value: map.get($design-tokens, typography, line-heights, string.quote(level-#{$levelIndex}));
+  $defaultValue: map.get($design-tokens, typography, line-heights, string.quote(level-0));
+
+  @if $value and $unit == rem {
+    @return px-to-rem($value);
+  }
+
+  @else if $value and $unit != rem {
+    @return #{$value + $unit};
+  }
+
+  @return $defaultValue or 1;
+}

package/src/utils/functions/_get-spacing.scss

@@ -0,0 +1,18 @@
+@use "../../variables/tokens/design-tokens" as *;
+@use "sass:string";
+@use "sass:map";
+@use "px-to-rem" as *;
+
+@function get-spacing($levelIndex: 0, $unit: rem) {
+  $value: map.get($design-tokens, spacings, string.quote(level-#{$levelIndex}));
+
+  @if $value and $unit == rem {
+    @return px-to-rem($value);
+  }
+
+  @else if $value and $unit != rem {
+    @return #{$value + $unit};
+  }
+
+  @return 0;
+}

package/src/utils/functions/_get-transition-func.scss

@@ -0,0 +1,13 @@
+@use "../../variables/tokens/design-tokens" as *;
+@use "sass:map";
+
+@function get-transition-func() {
+  $value: map.get($design-tokens, transition, function);
+  $defaultValue: cubic-bezier(0.12, 0.39, 0.5, 0.93);
+
+  @if $value {
+    @return $value;
+  }
+
+  @return $defaultValue;
+}

package/src/utils/functions/_get-transition-time.scss

@@ -0,0 +1,13 @@
+@use "../../variables/tokens/design-tokens" as *;
+@use "sass:map";
+
+@function get-transition-time() {
+  $value: map.get($design-tokens, transition, time);
+  $defaultValue: 0.25s;
+
+  @if $value {
+    @return $value;
+  }
+
+  @return $defaultValue;
+}

package/src/utils/functions/_px-to-rem.scss

@@ -0,0 +1,9 @@
+//Function to convert px value into rem
+//You can replace rem with any other value you want (rem is most preferred value for web)
+@use "sass:math";
+
+@function px-to-rem($target: 16, $context: 16) {
+  @if $target == 0 { @return 0; }
+
+  @return math.div($target, $context) * 1rem;
+}

package/src/utils/functions/index.scss

@@ -0,0 +1,9 @@
+@forward "get-theme-color";
+@forward "px-to-rem";
+@forward "get-font-size";
+@forward "get-line-height";
+@forward "get-font-weight";
+@forward "get-spacing";
+@forward "get-transition-time";
+@forward "get-transition-func";
+@forward "breakpoint";

package/src/utils/index.scss

@@ -0,0 +1,2 @@
+@import "functions";
+@import "mixins";

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

@@ -0,0 +1,7 @@
+@mixin absolute-stretch () {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}

package/src/utils/mixins/_active.scss

@@ -0,0 +1,7 @@
+@mixin active {
+  &:not(&:disabled, &.is-loading) {
+    &:active {
+      @content;
+    }
+  }
+}

package/src/utils/mixins/_breakpont.scss

@@ -0,0 +1,124 @@
+$breakpoints: (
+  "sm": 0,
+  "md": 768,
+  "lg": 1280,
+  "xl": 1920
+);
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin respUp($name, $landscape: false, $breakpoints: $breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+
+  @if $min and $landscape {
+    @media (min-width: #{$min}px) and (orientation: landscape) {
+      @content;
+    }
+  }
+
+  @else if $min {
+    @media (min-width: #{$min}px) {
+      @content;
+    }
+  }
+
+  @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin respDown($name, $landscape: false, $breakpoints: $breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $max and $landscape {
+    @media (max-width: #{$max}px) and (orientation: landscape) {
+      @content;
+    }
+  }
+
+  @else if $max {
+    @media (max-width: #{$max}px) {
+      @content;
+    }
+
+    @if $name == sm {
+      .rwc-embed & {
+        @content;
+      }
+    }
+  }
+
+  @else {
+    @content;
+  }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin respBetween(
+  $lower,
+  $upper,
+  $landscape: false,
+  $breakpoints: $breakpoints
+) {
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @if $min != null and $max != null and $landscape {
+    @media (min-width: #{$min}px) and (max-width: #{$max}px) and (orientation: landscape) {
+      @content;
+    }
+  }
+
+  @else if $min != null and $max != null {
+    @media (min-width: #{$min}px) and (max-width: #{$max}px) {
+      @content;
+    }
+  }
+
+  @else if $max == null {
+    @include respUp($lower, $landscape, $breakpoints) {
+      @content;
+    }
+  }
+
+  @else if $min == null {
+    @include respDown($upper, $landscape, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin respOnly($name, $landscape: false, $breakpoints: $breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $min != null and $max != null and $landscape {
+    @media (min-width: #{$min}px) and (max-width: #{$max}px) and (orientation: landscape) {
+      @content;
+    }
+  }
+
+  @else if $min != null and $max != null {
+    @media (min-width: #{$min}px) and (max-width: #{$max}px) {
+      @content;
+    }
+  }
+
+  @else if $max == null {
+    @include respUp($name, $landscape, $breakpoints) {
+      @content;
+    }
+  }
+
+  @else if $min == null {
+    @include respDown($name, $landscape, $breakpoints) {
+      @content;
+    }
+  }
+}

package/src/utils/mixins/_extra-click-area.scss

@@ -0,0 +1,5 @@
+@mixin extra-click-area ($area: 10px) {
+  box-sizing: content-box;
+  padding: $area;
+  margin: -$area;
+}

package/src/utils/mixins/_focus.scss

@@ -0,0 +1,7 @@
+@mixin focus {
+  &:not(&:disabled, &.is-loading) {
+    &:focus {
+      @content;
+    }
+  }
+}