@moda/om 19.9.0 → 20.1.0

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/components/index.ts

@@ -19,6 +19,10 @@ export * from './Label';
 export * from './Loading';
 export * from './LoadingBalls';
 export * from './LoadingShapes';
+export * from './LoadingShapesPinkGreen';
+export * from './LoadingItemsPinkGreen';
+export * from './LoadingShapesLavenderBlue';
+export * from './LoadingItemsLavenderBlue';
 export * from './Modal';
 export * from './ModalOverlay';
 export * from './NavigationPreventer';

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

package/src/mixins/input-styles/_input-styles.scss

@@ -1,17 +1,19 @@
+@use '~@moda/tokens';
+
 @mixin input-styles() {
-  @include text(body1);
+  @include tokens.text(body1);
 
   //ios devices zoom in if inputs are smaller than 16px
-  @include breakpoint(sm, $prop: max-width) {
-    @include text(h6);
+  @include tokens.breakpoint(sm, $prop: max-width) {
+    @include tokens.text(h6);
   }
 
   appearance: none;
   line-height: 1;
   width: 100%;
-  padding: spacing(3, 4);
-  border: 1px solid color(elephant);
-  background-color: color('snow');
+  padding: tokens.spacing(3, 4);
+  border: 1px solid tokens.color(elephant);
+  background-color: tokens.color('snow');
   border-radius: 0;
 
   &::placeholder {
@@ -21,24 +23,24 @@
   &--focus,
   &:focus {
     outline: none;
-    border-color: color(ink);
+    border-color: tokens.color(ink);
   }
 
   &--disabled,
   &:disabled {
-    color: color(elephant);
-    border-color: color(elephant);
-    background-color: color(noise);
+    color: tokens.color(elephant);
+    border-color: tokens.color(elephant);
+    background-color: tokens.color(noise);
   }
 
   &--valid {
-    border-color: color(money-good);
+    border-color: tokens.color(money-good);
   }
 
   &--error {
     &,
     &:focus {
-      border-color: color(code-red);
+      border-color: tokens.color(code-red);
     }
   }
 }

package/src/mixins/overflow-scroll/_overflow-scroll.scss

@@ -1,5 +1,3 @@
-@import '~@moda/tokens';
-
 @mixin overflow-scroll($direction: y) {
   @if $direction == x {
     overflow-x: auto;

package/src/mixins/overflow-scroll/overflow-scroll.stories.scss

@@ -1,9 +1,9 @@
-@import './overflow-scroll';
+@use 'overflow-scroll';
 
 .Story.overflow-scroll {
-  @include overflow-scroll();
+  @include overflow-scroll.overflow-scroll();
 }
 
 .Story.overflow-scroll-x {
-  @include overflow-scroll(x);
+  @include overflow-scroll.overflow-scroll(x);
 }

package/src/mixins/stack/_stack.scss

@@ -1,4 +1,4 @@
-@import '~@moda/tokens';
+@use '~@moda/tokens';
 
 @mixin stack($index: 4, $direction: vertical) {
   display: flex;
@@ -13,7 +13,7 @@
     }
 
     > * + * {
-      margin-top: space($index);
+      margin-top: tokens.space($index);
     }
 
     > .Overlay {
@@ -30,7 +30,7 @@
     }
 
     > * + * {
-      margin-left: space($index);
+      margin-left: tokens.space($index);
     }
 
     > .Overlay {

package/src/mixins/stack/stack.stories.scss

@@ -1,13 +1,13 @@
-@import './stack';
+@use './stack';
 
 .Story.Mixins.stack {
-  @include stack(4);
+  @include stack.stack(4);
 
   > * {
     background-color: yellow;
   }
 
   &--horizontal {
-    @include stack(6, $direction: horizontal);
+    @include stack.stack(6, $direction: horizontal);
   }
 }

package/src/mixins/thin-underline/_thin-underline.scss

@@ -1,5 +1,3 @@
-@import '~@moda/tokens';
-
 @mixin thin-underline() {
   position: relative;
   text-decoration: none;

package/src/mixins/thin-underline/thin-underline.stories.scss

@@ -1,7 +1,7 @@
-@import './thin-underline';
+@use './thin-underline';
 
 .Story.thin-underline {
-  @include thin-underline();
+  @include thin-underline.thin-underline();
 
   display: inline-block;
 }

package/src/mixins/visually-hidden/_visually-hidden.scss

@@ -1,5 +1,3 @@
-@import '~@moda/tokens';
-
 @mixin visually-hidden() {
   border: 0;
   clip: rect(0 0 0 0);

package/src/mixins/visually-hidden/visually-hidden.stories.scss

@@ -1,5 +1,5 @@
-@import './visually-hidden';
+@use './visually-hidden';
 
 .Story.visually-hidden {
-  @include visually-hidden();
+  @include visually-hidden.visually-hidden();
 }

package/src/utilities/States/State.scss

@@ -1,11 +1,11 @@
-@import '~om';
+@use '~@moda/om';
 
 .State {
-  border: 1px dotted color(fog);
-  padding: spacing(2);
+  border: 1px dotted om.color(fog);
+  padding: om.spacing(2);
 
   &__props {
     display: block;
-    margin-top: space(2);
+    margin-top: om.space(2);
   }
 }

package/src/utilities/States/States.scss

@@ -1,5 +1,5 @@
-@import '~om';
+@use '~@moda/om';
 
 .States {
-  @include stack(6);
+  @include om.stack(6);
 }

package/src/utilities/States/StatesProps.scss

@@ -1,24 +1,24 @@
-@import '~om';
+@use '~@moda/om';
 
 .StatesProps {
-  @include text(body1, $font: code);
+  @include om.text(body1, $font: code);
 
-  padding-top: space(2);
-  color: color(fog);
-  border-top: 1px dotted color(elephant);
+  padding-top: om.space(2);
+  color: om.color(fog);
+  border-top: 1px dotted om.color(elephant);
 
   > strong {
     text-decoration: underline;
-    color: color(ink);
+    color: om.color(ink);
   }
 
   &::before {
     content: '<';
-    color: color(elephant);
+    color: om.color(elephant);
   }
 
   &::after {
     content: '/>';
-    color: color(elephant);
+    color: om.color(elephant);
   }
 }