@moda/om 19.9.0 → 20.0.0

package/src/components/SearchInput/SearchInput.scss

@@ -1,7 +1,7 @@
-@import '~om';
+@use '~@moda/om';
 
 .SearchInput {
-  $icon-width: space(7);
+  $icon-width: om.space(7);
 
   position: relative;
   display: inline-block;
@@ -16,7 +16,7 @@
     bottom: 0;
     width: $icon-width;
     height: 100%;
-    color: color(cement);
+    color: om.color(cement);
   }
 
   &__input--round-borders {
@@ -37,7 +37,7 @@
     right: 0;
 
     &:hover {
-      color: color(ink);
+      color: om.color(ink);
       cursor: pointer;
     }
   }

package/src/components/Select/MultiSelect.scss

@@ -1,4 +1,4 @@
-@import '~om';
+@use '~@moda/om';
 
 .MultiSelect {
   $self: &;
@@ -12,27 +12,27 @@
     cursor: default;
 
     #{$self}__search {
-      color: color(fog);
+      color: om.color(fog);
       cursor: default;
 
       &:hover,
       &:focus {
-        border-color: color(elephant);
-        background-color: color(noise);
+        border-color: om.color(elephant);
+        background-color: om.color(noise);
       }
     }
   }
 
   &--error {
-    border: 1px solid color(code-red);
+    border: 1px solid om.color(code-red);
   }
 
   &__search {
-    @include input-styles();
+    @include om.input-styles();
 
     display: flex;
     align-items: center;
-    padding: spacing(1, 7, 1, 1);
+    padding: om.spacing(1, 7, 1, 1);
   }
 
   &__selected-items {
@@ -43,10 +43,10 @@
   &__selected-item {
     display: flex;
     align-items: center;
-    border: 1px solid color('ink');
-    border-radius: space(2);
-    margin: space(1);
-    padding: space(1);
+    border: 1px solid om.color('ink');
+    border-radius: om.space(2);
+    margin: om.space(1);
+    padding: om.space(1);
   }
 
   &__selected-value {
@@ -54,19 +54,19 @@
   }
 
   &__exit {
-    margin-left: space(1);
+    margin-left: om.space(1);
     cursor: pointer;
   }
 
   &__icon {
     pointer-events: none;
     position: absolute;
-    right: space(4);
+    right: om.space(4);
     top: 50%;
     transform: translateY(-50%);
 
     &--shifted {
-      right: space(6);
+      right: om.space(6);
     }
   }
 }

package/src/components/Select/Select.scss

@@ -1,11 +1,11 @@
-@import '~om';
+@use '~@moda/om';
 
 .Select {
   $self: &;
 
   //ios devices zoom in if inputs are smaller than 16px
-  @include breakpoint(sm, $prop: max-width) {
-    @include text(h6);
+  @include om.breakpoint(sm, $prop: max-width) {
+    @include om.text(h6);
   }
 
   min-height: 2.5625rem;
@@ -17,35 +17,35 @@
     cursor: default;
 
     #{$self}__value {
-      color: color(fog);
+      color: om.color(fog);
       cursor: default;
 
       &:hover,
       &:focus {
-        border-color: color(elephant);
-        background-color: color('snow');
+        border-color: om.color(elephant);
+        background-color: om.color('snow');
       }
     }
   }
 
   &--error {
-    border: 1px solid color(code-red);
+    border: 1px solid om.color(code-red);
   }
 
   &__value {
-    @include text(body1);
+    @include om.text(body1);
 
     //ios devices zoom in if inputs are smaller than 16px
-    @include breakpoint(sm, $prop: max-width) {
-      @include text(h6);
+    @include om.breakpoint(sm, $prop: max-width) {
+      @include om.text(h6);
     }
 
     display: block;
     width: 100%;
     text-align: left;
-    padding: spacing(2, 7, 2, 3);
-    color: color(ink);
-    border: 1px solid color(elephant);
+    padding: om.spacing(2, 7, 2, 3);
+    color: om.color(ink);
+    border: 1px solid om.color(elephant);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -53,25 +53,25 @@
     cursor: pointer;
 
     &:hover {
-      border-color: color(cement);
-      background-color: color(noise);
+      border-color: om.color(cement);
+      background-color: om.color(noise);
     }
 
     &:focus {
-      border-color: color(cement);
-      background-color: color(elephant);
+      border-color: om.color(cement);
+      background-color: om.color(elephant);
     }
   }
 
   &__icon {
     pointer-events: none;
     position: absolute;
-    right: space(4);
+    right: om.space(4);
     top: 50%;
     transform: translateY(-50%);
 
     &--shifted {
-      right: space(6);
+      right: om.space(6);
     }
   }
 
@@ -85,12 +85,12 @@
     &--up {
       flex-direction: column-reverse;
       bottom: 100%;
-      margin-bottom: space(1);
+      margin-bottom: om.space(1);
     }
 
     &--down {
       flex-direction: column;
-      margin-top: space(1);
+      margin-top: om.space(1);
       top: 100%;
     }
   }
@@ -105,15 +105,15 @@
   }
 
   &__selected-color {
-    border-color: color(ink);
+    border-color: om.color(ink);
     border-style: solid;
     border-radius: 50%;
     border-width: 1px;
     display: inline-block;
-    height: space(4);
+    height: om.space(4);
     position: absolute;
-    right: space(7);
+    right: om.space(7);
     transform: translateY(25%);
-    width: space(4);
+    width: om.space(4);
   }
 }

package/src/components/Select/SelectOption.scss

@@ -1,13 +1,13 @@
-@import '~om';
+@use '~@moda/om';
 
 .SelectOption {
-  @include text(body1);
+  @include om.text(body1);
 
   display: block;
   width: 100%;
   text-align: left;
-  padding: spacing(2, 3);
-  color: color(ink);
+  padding: om.spacing(2, 3);
+  color: om.color(ink);
 
   &--selected {
     text-decoration: underline;
@@ -15,15 +15,15 @@
 
   &:hover,
   &--active {
-    background-color: color(noise);
+    background-color: om.color(noise);
   }
 
   &--disabled {
-    color: color(fog);
+    color: om.color(fog);
     cursor: default;
 
     &:hover {
-      background-color: color('snow');
+      background-color: om.color('snow');
     }
   }
 }

package/src/components/Select/SelectOptions.scss

@@ -1,24 +1,24 @@
-@import '~om';
+@use '~@moda/om';
 
 .SelectOptions {
-  background-color: color('snow');
-  border: 1px solid color(elephant);
+  background-color: om.color('snow');
+  border: 1px solid om.color(elephant);
 
   &:focus {
     outline: 0;
-    border-color: color(cement);
+    border-color: om.color(cement);
   }
 
   &__search {
-    margin: space(2);
+    margin: om.space(2);
   }
 
   &__none {
-    padding: spacing(2, 3);
+    padding: om.spacing(2, 3);
   }
 
   &__list {
-    @include overflow-scroll();
-    max-height: space(12);
+    @include om.overflow-scroll();
+    max-height: om.space(12);
   }
 }

package/src/components/SelectableButton/SelectableButton.scss

@@ -1,21 +1,21 @@
-@import '~om';
+@use '~@moda/om';
 
 .SelectableButton {
   $self: &;
 
-  @include text(body2);
+  @include om.text(body2);
   text-transform: uppercase;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   max-width: 100%;
-  padding: spacing(2, 3);
+  padding: om.spacing(2, 3);
   cursor: pointer;
   text-decoration: none;
   user-select: none;
-  color: color(ink);
-  border: 1px solid color(elephant);
+  color: om.color(ink);
+  border: 1px solid om.color(elephant);
   background-color: transparent;
   transition: background-color 200ms;
 
@@ -29,16 +29,16 @@
 
   &--hover,
   &:hover {
-    color: color(ink);
-    border-color: color(elephant);
-    background-color: color(noise);
+    color: om.color(ink);
+    border-color: om.color(elephant);
+    background-color: om.color(noise);
   }
 
   &--selected {
     &,
     &:hover {
-      color: color(ink);
-      border-color: color(ink);
+      color: om.color(ink);
+      border-color: om.color(ink);
       background-color: transparent;
     }
   }
@@ -46,12 +46,12 @@
   &--unavailable {
     &,
     &:hover {
-      color: color(elephant);
-      border-color: color(elephant);
+      color: om.color(elephant);
+      border-color: om.color(elephant);
       background: linear-gradient(
         to bottom right,
         white calc(50% - 1px),
-        color(elephant),
+        om.color(elephant),
         white calc(50% + 1px)
       );
     }

package/src/components/SlidingPane/SlidingPane.scss

@@ -1,4 +1,4 @@
-@import '~om';
+@use '~@moda/om';
 
 .SlidingPane {
   position: fixed;
@@ -8,7 +8,7 @@
   left: 0;
   right: 0;
   transition: all 500ms ease-out;
-  background-color: color('snow');
+  background-color: om.color('snow');
   margin-left: 0;
 
   &--active {
@@ -17,9 +17,9 @@
   }
 
   &__top {
-    padding: space(3);
-    border-bottom: 1px solid color(elephant);
-    box-shadow: 0px -1px 2px color(ink, 0.1);
+    padding: om.space(3);
+    border-bottom: 1px solid om.color(elephant);
+    box-shadow: 0px -1px 2px om.color(ink, 0.1);
   }
 
   &__close {
@@ -31,11 +31,11 @@
   }
 
   &__content {
-    padding: space(4);
+    padding: om.space(4);
   }
 
   &__overlay {
-    background-color: color(coal, 0.3);
+    background-color: om.color(coal, 0.3);
     top: 0;
     bottom: 0;
     left: 0;

package/src/components/Stack/Stack.scss

@@ -1,12 +1,14 @@
-@import '~om';
+@use 'sass:list';
+@use 'sass:map';
+@use '~@moda/om';
 
 .Stack {
-  $scale: map-get($space, 'scale');
+  $scale: map.get(om.$space, 'scale');
   @each $direction in (horizontal, vertical) {
     @each $value in $scale {
-      $i: (index($scale, $value) - 1);
+      $i: (list.index($scale, $value) - 1);
       &.Stack--#{$direction}-#{$i} {
-        @include stack($i, $direction);
+        @include om.stack($i, $direction);
       }
     }
   }

package/src/components/Tabs/Tab.scss

@@ -1,17 +1,17 @@
-@import '~om';
+@use '~@moda/om';
 
 .Tab {
-  @include text(eyebrow);
+  @include om.text(eyebrow);
 
-  padding: spacing(4, 0);
+  padding: om.spacing(4, 0);
   border-bottom: 2px solid transparent;
-  color: color(cement);
+  color: om.color(cement);
   text-align: left;
   cursor: pointer;
 
   &--active {
-    color: color(ink);
-    border-bottom: 2px solid color(ink);
+    color: om.color(ink);
+    border-bottom: 2px solid om.color(ink);
   }
 
   &:active,

package/src/components/Tabs/TabList.scss

@@ -1,7 +1,7 @@
-@import '~om';
+@use '~@moda/om';
 
 .TabList {
-  @include stack(4, $direction: horizontal);
+  @include om.stack(4, $direction: horizontal);
 
-  border-bottom: 1px solid color(elephant);
+  border-bottom: 1px solid om.color(elephant);
 }

package/src/components/Tabs/TabPanels.scss

@@ -1,5 +1,5 @@
-@import '~om';
+@use '~@moda/om';
 
 .TabPanels {
-  margin-top: space(4);
+  margin-top: om.space(4);
 }

package/src/components/Tag/Tag.scss

@@ -1,26 +1,26 @@
-@import '~om';
+@use '~@moda/om';
 
 .Tag {
-  @include stack(2, $direction: horizontal);
-  @include text(body1);
+  @include om.stack(2, $direction: horizontal);
+  @include om.text(body1);
 
   display: inline-flex;
   align-items: center;
-  padding: spacing(2);
-  border: 1px solid color(elephant);
+  padding: om.spacing(2);
+  border: 1px solid om.color(elephant);
   white-space: nowrap;
 
   &:hover,
   &:focus {
-    border-color: color(ink);
+    border-color: om.color(ink);
   }
 
   &--disabled {
-    color: color(fog);
+    color: om.color(fog);
 
     &:hover,
     &:focus {
-      border-color: color(elephant);
+      border-color: om.color(elephant);
     }
   }
 }

package/src/components/Text/Text.scss

@@ -1,10 +1,11 @@
-@import '~om';
+@use 'sass:map';
+@use '~@moda/om';
 
 .Text {
-  $treatments: map-get($typography, 'text-treatments');
+  $treatments: map.get(om.$typography, 'text-treatments');
   @each $name, $_values in $treatments {
     &--#{$name} {
-      @include text($name);
+      @include om.text($name);
     }
   }
 

package/src/components/TextInput/TextInput.scss

@@ -1,5 +1,5 @@
-@import '~om';
+@use '~@moda/om';
 
 .TextInput {
-  @include input-styles();
+  @include om.input-styles();
 }

package/src/components/Textarea/Textarea.scss

@@ -1,8 +1,8 @@
-@import '~om';
+@use '~@moda/om';
 
 .Textarea {
-  @include input-styles();
-  @include text(body1);
+  @include om.input-styles();
+  @include om.text(body1);
 
   resize: none;
 }

package/src/components/Toast/Toast.scss

@@ -1,18 +1,18 @@
-@import '~om';
+@use '~@moda/om';
 
 .Toast {
-  color: color('snow');
-  padding: spacing(3);
+  color: om.color('snow');
+  padding: om.spacing(3);
 
   &--success {
-    background-color: color(money-good);
+    background-color: om.color(money-good);
   }
 
   &--warning {
-    background-color: color(burnt-orange);
+    background-color: om.color(burnt-orange);
   }
 
   &--error {
-    background-color: color(code-red);
+    background-color: om.color(code-red);
   }
 }

package/src/components/VerticalDivider/VerticalDivider.scss

@@ -1,10 +1,10 @@
-@import '~om';
+@use '~@moda/om';
 
 .VerticalDivider {
-  border-left: 1px solid color(ink);
+  border-left: 1px solid om.color(ink);
 
   &--double {
     width: 0.175rem;
-    border-right: 1px solid color(ink);
+    border-right: 1px solid om.color(ink);
   }
 }

package/src/index.scss

@@ -1,4 +1,4 @@
-@import '~@moda/tokens';
+@forward '~@moda/tokens';
 
-@import './mixins/mixins';
-@import './functions/functions';
+@forward './mixins/mixins';
+@forward './functions/functions';

package/src/mixins/_mixins.scss

@@ -1,7 +1,7 @@
-@import 'stack/stack';
-@import 'font-smoothing/font-smoothing';
-@import 'global-styles/global-styles';
-@import 'input-styles/input-styles';
-@import 'visually-hidden/visually-hidden';
-@import 'overflow-scroll/overflow-scroll';
-@import 'thin-underline/thin-underline';
+@forward 'stack/stack';
+@forward 'font-smoothing/font-smoothing';
+@forward 'global-styles/global-styles';
+@forward 'input-styles/input-styles';
+@forward 'visually-hidden/visually-hidden';
+@forward 'overflow-scroll/overflow-scroll';
+@forward 'thin-underline/thin-underline';

package/src/mixins/font-smoothing/_font-smoothing.scss

@@ -1,5 +1,3 @@
-@import '~@moda/tokens';
-
 @mixin font-smoothing($value: antialiased) {
   @if $value == antialiased {
     -webkit-font-smoothing: antialiased;

package/src/mixins/font-smoothing/font-smoothing.stories.scss

@@ -1,11 +1,11 @@
-@import './font-smoothing';
+@use 'font-smoothing';
 
 .Story.font-smoothing {
   &--antialiased {
-    @include font-smoothing(antialiased);
+    @include font-smoothing.font-smoothing(antialiased);
   }
 
   &--subpixel {
-    @include font-smoothing(subpixel);
+    @include font-smoothing.font-smoothing(subpixel);
   }
 }

package/src/mixins/global-styles/_global-styles.scss

@@ -1,10 +1,11 @@
-@import '~@moda/tokens';
-@import '../font-smoothing/font-smoothing';
+@use 'sass:map';
+@use '~@moda/tokens';
+@use '../font-smoothing/font-smoothing';
 
 @mixin global-styles() {
   html {
     box-sizing: border-box;
-    font-size: map-get($typography, 'root-font-size');
+    font-size: map.get(tokens.$typography, 'root-font-size');
   }
 
   *,
@@ -44,7 +45,7 @@
 
   body,
   input {
-    @include font-smoothing(antialiased);
+    @include font-smoothing.font-smoothing(antialiased);
   }
 
   // :focus-visible polyfill
@@ -54,6 +55,6 @@
   }
   // custom outlines on :focus-visible
   .focus-visible {
-    outline: 2px solid color(burnt-orange);
+    outline: 2px solid tokens.color(burnt-orange);
   }
 }