@moda/om 19.9.0 → 20.1.0

package/src/components/Button/Button.scss

@@ -1,15 +1,15 @@
-@import '~om';
+@use '~@moda/om';
 
 .Button {
   $self: &;
 
-  @include text(eyebrow);
+  @include om.text(eyebrow);
   appearance: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-align: center;
-  padding: spacing(4, 7);
+  padding: om.spacing(4, 7);
   border: 1px solid;
   cursor: pointer;
   text-decoration: none;
@@ -17,105 +17,106 @@
 
   // Insert space after icon if present
   > * {
-    margin-right: space(2);
+    margin-right: om.space(2);
   }
 
   &,
   &--primary {
-    color: color('snow');
-    border-color: color(ink);
-    background-color: color(ink);
-    @include font-smoothing(subpixel);
+    color: om.color('snow');
+    border-color: om.color(ink);
+    background-color: om.color(ink);
+    @include om.font-smoothing(subpixel);
 
     &#{$self}--hover,
     &:hover {
-      color: color('snow');
-      border-color: color(fog, 0.32);
-      background: linear-gradient(0deg, color(fog, 0.32), color(fog, 0.32)), color(ink);
+      color: om.color('snow');
+      border-color: om.color(fog, 0.32);
+      background: linear-gradient(0deg, om.color(fog, 0.32), om.color(fog, 0.32)), om.color(ink);
     }
 
     &#{$self}--focus,
     &:focus {
-      color: color('snow');
-      border-color: color(fog, 0.12);
-      background: linear-gradient(0deg, color('snow', 0.12), color('snow', 0.12)), color(ink);
+      color: om.color('snow');
+      border-color: om.color(fog, 0.12);
+      background: linear-gradient(0deg, om.color('snow', 0.12), om.color('snow', 0.12)),
+        om.color(ink);
     }
 
     &#{$self}--disabled,
     &:disabled {
-      color: color(ink);
-      border-color: color(noise);
-      background-color: color(noise);
+      color: om.color(ink);
+      border-color: om.color(noise);
+      background-color: om.color(noise);
       cursor: default;
       pointer-events: none;
     }
   }
 
   &--secondary {
-    color: color(ink);
-    border-color: color(ink);
-    background-color: color('snow');
+    color: om.color(ink);
+    border-color: om.color(ink);
+    background-color: om.color('snow');
 
     &#{$self}--hover,
     &:hover {
-      color: color(ink);
-      border-color: color(ink);
-      background-color: color(noise, 0.32);
+      color: om.color(ink);
+      border-color: om.color(ink);
+      background-color: om.color(noise, 0.32);
     }
 
     &#{$self}--focus,
     &:focus {
-      color: color(ink);
-      border-color: color(ink);
-      background-color: color(noise);
+      color: om.color(ink);
+      border-color: om.color(ink);
+      background-color: om.color(noise);
     }
 
     &#{$self}--disabled,
     &:disabled {
-      color: color(cement);
-      border-color: color(fog);
-      background-color: color(noise);
+      color: om.color(cement);
+      border-color: om.color(fog);
+      background-color: om.color(noise);
       cursor: default;
       pointer-events: none;
     }
   }
 
   &--tertiary {
-    @include text(body1);
+    @include om.text(body1);
 
-    padding: spacing(2, 3);
-    color: color(ink);
-    border-color: color(elephant);
-    background-color: color('snow');
+    padding: om.spacing(2, 3);
+    color: om.color(ink);
+    border-color: om.color(elephant);
+    background-color: om.color('snow');
     text-transform: none;
     line-height: 1.4;
 
     &#{$self}--hover,
     &:hover {
-      color: color(ink);
-      border-color: color(elephant);
-      background-color: color(noise, 0.32);
+      color: om.color(ink);
+      border-color: om.color(elephant);
+      background-color: om.color(noise, 0.32);
     }
 
     &#{$self}--focus,
     &:focus {
-      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);
     }
 
     &#{$self}--disabled,
     &:disabled {
-      color: color(cement);
-      border-color: color(fog);
-      background-color: color(noise);
+      color: om.color(cement);
+      border-color: om.color(fog);
+      background-color: om.color(noise);
       cursor: default;
       pointer-events: none;
     }
   }
 
   &--elevated {
-    box-shadow: 0px 1px 4px color(coal, 0.09);
+    box-shadow: 0px 1px 4px om.color(coal, 0.09);
   }
 
   &--chip {

package/src/components/Checkbox/Checkbox.scss

@@ -1,30 +1,30 @@
-@import '~om';
+@use '~@moda/om';
 
 .Checkbox {
-  $checkbox-size: space(4);
-  $checkbox-check-offset: calc(space(1) / 2);
+  $checkbox-size: om.space(4);
+  $checkbox-check-offset: calc(om.space(1) / 2);
 
-  @include stack(2, $direction: horizontal);
+  @include om.stack(2, $direction: horizontal);
 
   position: relative;
   align-items: flex-start;
   user-select: none;
   cursor: pointer;
-  color: color(ink);
+  color: om.color(ink);
 
   &__indicator {
     position: relative;
     width: $checkbox-size;
     height: $checkbox-size;
-    margin-top: calc(space(1) / 2);
+    margin-top: calc(om.space(1) / 2);
     flex-shrink: 0;
     border: 1px solid;
 
     &--disabled {
-      color: color(elephant);
+      color: om.color(elephant);
       pointer-events: none;
       &::after {
-        background-color: color(elephant);
+        background-color: om.color(elephant);
       }
     }
   }
@@ -34,12 +34,12 @@
   }
 
   &__input {
-    @include visually-hidden();
+    @include om.visually-hidden();
   }
 
   &__label {
-    @include text(body1);
+    @include om.text(body1);
 
-    color: color(ink);
+    color: om.color(ink);
   }
 }

package/src/components/Clickable/Clickable.scss

@@ -1,7 +1,7 @@
-@import '~om';
+@use '~@moda/om';
 
 .Clickable {
-  @include text(body1);
+  @include om.text(body1);
 
   &:not(&--disabled) {
     cursor: pointer;
@@ -11,7 +11,7 @@
   background-color: transparent;
   border: 0;
   color: inherit;
-  font-size: __dangerously-get-font-size__(2);
+  font-size: om.dangerously-get-font-size(2);
   padding: 0;
   text-decoration: none;
   white-space: nowrap;

package/src/components/ColorSwatch/ColorSwatch.scss

@@ -1,11 +1,11 @@
-@import '~om';
+@use '~@moda/om';
 
 .ColorSwatch {
   $self: &;
   $outer-border-color: rgba(black, 0.5);
-  $on-sale-dot-size: space(1);
-  $default-size: space(6);
-  $small-size: space(5);
+  $on-sale-dot-size: om.space(1);
+  $default-size: om.space(6);
+  $small-size: om.space(5);
 
   position: relative;
   width: $default-size;
@@ -33,7 +33,7 @@
     height: 33%;
     transform: translate(-50%, -50%);
     border-radius: 50%;
-    background-color: color('snow');
+    background-color: om.color('snow');
     z-index: 1;
   }
 
@@ -60,7 +60,7 @@
 
   &:hover,
   &--hover {
-    border-color: color(elephant);
+    border-color: om.color(elephant);
 
     // Inset dot
     &::before {
@@ -113,7 +113,7 @@
       width: $on-sale-dot-size;
       height: $on-sale-dot-size;
       border-radius: 50%;
-      background-color: color('code-red');
+      background-color: om.color('code-red');
     }
   }
 
@@ -125,11 +125,11 @@
   &--light {
     // Inset dot
     &::before {
-      background-color: color(ink);
+      background-color: om.color(ink);
     }
 
     #{$self}__chip {
-      border: 1px solid color(ink, 0.25);
+      border: 1px solid om.color(ink, 0.25);
     }
   }
 }

package/src/components/Constrain/Constrain.scss

@@ -1,22 +1,23 @@
-@import '~om';
+@use 'sass:map';
+@use '~@moda/om';
 
 .Constrain {
   width: 90%;
   margin: 0 auto;
-  max-width: map-get($breakpoints, xl);
+  max-width: map.get(om.$breakpoints, xl);
 
-  @include breakpoint(md, $prop: max-width) {
+  @include om.breakpoint(md, $prop: max-width) {
     width: 100%;
-    padding: spacing(0, 6);
+    padding: om.spacing(0, 6);
   }
 
-  @include breakpoint(sm, $prop: max-width) {
+  @include om.breakpoint(sm, $prop: max-width) {
     width: 100%;
-    padding: spacing(0, 4);
+    padding: om.spacing(0, 4);
   }
 
-  @include breakpoint(xs, $prop: max-width) {
+  @include om.breakpoint(xs, $prop: max-width) {
     width: 100%;
-    padding: spacing(0, 2);
+    padding: om.spacing(0, 2);
   }
 }

package/src/components/Constrain/ExceedConstrain.scss

@@ -1,15 +1,15 @@
-@import '~om';
+@use '~@moda/om';
 
 .ExceedConstrain {
-  @include breakpoint(md, $prop: max-width) {
-    margin: 0 -#{space(6)};
+  @include om.breakpoint(md, $prop: max-width) {
+    margin: 0 -#{om.space(6)};
   }
 
-  @include breakpoint(sm, $prop: max-width) {
-    margin: 0 -#{space(4)};
+  @include om.breakpoint(sm, $prop: max-width) {
+    margin: 0 -#{om.space(4)};
   }
 
-  @include breakpoint(xs, $prop: max-width) {
-    margin: 0 -#{space(2)};
+  @include om.breakpoint(xs, $prop: max-width) {
+    margin: 0 -#{om.space(2)};
   }
 }

package/src/components/ControlLink/ControlLink.scss

@@ -1,25 +1,25 @@
-@import '~om';
+@use '~@moda/om';
 
 .ControlLink {
   $self: &;
-  @include text(body1);
+  @include om.text(body1);
 
   display: inline-flex;
 
   &:hover,
   &:focus {
     &:not(#{$self}--disabled) {
-      @include thin-underline();
-      color: color(ink);
+      @include om.thin-underline();
+      color: om.color(ink);
       opacity: 0.7;
     }
   }
 
   &--underlined {
-    @include thin-underline();
+    @include om.thin-underline();
   }
 
   &--disabled {
-    color: color(fog);
+    color: om.color(fog);
   }
 }

package/src/components/DefinitionList/DefinitionList.scss

@@ -1,7 +1,7 @@
-@import '~om';
+@use '~@moda/om';
 
 .DefinitionList {
-  @include text(body1);
+  @include om.text(body1);
   margin: 0;
 
   > dt,
@@ -11,14 +11,14 @@
   }
 
   > dt {
-    color: color(ink);
-    margin-right: space(2);
+    color: om.color(ink);
+    margin-right: om.space(2);
   }
 
   > dd {
     &,
     > a {
-      color: color(cement);
+      color: om.color(cement);
     }
 
     > a {

package/src/components/Dialog/Dialog.scss

@@ -1,15 +1,15 @@
-@import '~om';
+@use '~@moda/om';
 
 .Dialog {
   max-width: 90vw;
-  background-color: color('snow');
+  background-color: om.color('snow');
   text-align: center;
 
   &__content {
-    padding: spacing(6);
+    padding: om.spacing(6);
   }
 
-  @include breakpoint(md) {
+  @include om.breakpoint(md) {
     max-width: 40rem;
   }
 }

package/src/components/Divider/Divider.scss

@@ -1,4 +1,4 @@
-@import '~om';
+@use '~@moda/om';
 
 .Divider {
   $self: &;
@@ -12,14 +12,14 @@
     content: '';
     flex: 1;
     border: none;
-    background-color: color(elephant);
+    background-color: om.color(elephant);
     height: 1px;
     width: 50%;
   }
 
   &__text {
     width: auto;
-    padding: 0 space(4);
+    padding: 0 om.space(4);
   }
 
   &--two-line {
@@ -28,8 +28,8 @@
       $space-between-lines: 0.175rem;
       $offset: calc($space-between-lines / 2);
       transform: translateY(calc(-#{$offset}));
-      background-color: color(ink);
-      box-shadow: 0 $space-between-lines 0 0 color(ink);
+      background-color: om.color(ink);
+      box-shadow: 0 $space-between-lines 0 0 om.color(ink);
     }
   }
 

package/src/components/Expandable/Expandable.scss

@@ -1,4 +1,4 @@
-@import '~om';
+@use '~@moda/om';
 
 .Expandable {
   $self: &;
@@ -7,12 +7,12 @@
   flex-direction: column;
 
   &__name {
-    @include text(body1);
+    @include om.text(body1);
 
     position: relative;
     text-align: left;
     cursor: pointer;
-    padding: spacing(3, 5, 3, 0);
+    padding: om.spacing(3, 5, 3, 0);
     user-select: none;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -20,28 +20,28 @@
 
   &__icon {
     height: 100%;
-    padding-top: space(4);
+    padding-top: om.space(4);
     position: absolute;
     right: 0;
     top: 0;
   }
 
   &__contents {
-    @include stack(2);
-    @include text(body1);
+    @include om.stack(2);
+    @include om.text(body1);
 
-    padding-bottom: space(3);
+    padding-bottom: om.space(3);
     display: none;
-    color: color(ink);
+    color: om.color(ink);
 
     ul,
     ol {
-      padding-left: space(4);
+      padding-left: om.space(4);
       list-style: disc;
     }
 
     a {
-      color: color(ink);
+      color: om.color(ink);
     }
   }
 
@@ -56,8 +56,8 @@
         right: 0;
         transform: translateY(-50%);
         height: 1px;
-        width: space(4);
-        background-color: color(ink);
+        width: om.space(4);
+        background-color: om.color(ink);
       }
 
       &::before {
@@ -80,22 +80,22 @@
   }
 
   &--with-border {
-    border-top: 1px solid color(noise);
+    border-top: 1px solid om.color(noise);
   }
 
   &--dark-background {
-    border-color: color(cement);
-    color: color('snow');
+    border-color: om.color(cement);
+    color: om.color('snow');
 
     #{$self}__name {
       &::before,
       &::after {
-        background-color: color('snow');
+        background-color: om.color('snow');
       }
     }
 
     #{$self}__contents {
-      color: color('snow');
+      color: om.color('snow');
     }
   }
 }

package/src/components/Field/Field.scss

@@ -1,7 +1,7 @@
-@import '~om';
+@use '~@moda/om';
 
 .Field {
-  @include stack(1);
+  @include om.stack(1);
 
   &__context {
     position: relative;
@@ -10,23 +10,23 @@
   &__icon {
     position: absolute;
     top: 50%;
-    right: space(2);
-    color: color(code-red);
+    right: om.space(2);
+    color: om.color(code-red);
     transform: translateY(-50%);
     pointer-events: none;
   }
 
   &__label,
   &__error {
-    @include text(body1);
+    @include om.text(body1);
   }
 
   &__label {
-    color: color(cement);
+    color: om.color(cement);
   }
 
   &__error {
-    color: color(code-red);
+    color: om.color(code-red);
     // Offset error border-thickness
     padding-top: 1px;
   }

package/src/components/Label/Label.scss

@@ -1,11 +1,11 @@
-@import '~om';
+@use '~@moda/om';
 
 .Label {
-  @include text(body1);
+  @include om.text(body1);
 
-  color: color(cement);
+  color: om.color(cement);
 
   &--hidden {
-    @include visually-hidden();
+    @include om.visually-hidden();
   }
 }

package/src/components/Loading/Loading.scss

@@ -1,7 +1,7 @@
-@import '~om';
+@use '~@moda/om';
 
 .Loading {
-  padding: space(5);
+  padding: om.space(5);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -13,8 +13,8 @@
   .Diamond,
   .ArcWindow,
   .Circle {
-    width: space(7);
-    height: space(7);
+    width: om.space(7);
+    height: om.space(7);
     opacity: 1;
     animation: fade 1s linear;
   }

package/src/components/LoadingBalls/LoadingBalls.scss

@@ -1,5 +1,5 @@
-@import '~om';
+@use '~@moda/om';
 
 .LoadingBalls {
-  fill: color(ink);
+  fill: om.color(ink);
 }

package/src/components/LoadingItemsLavenderBlue/LoadingItems.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { States } from 'storybook-states';
+import * as LOADINGITEMS from '.';
+
+export default { title: 'Components/Shape' };
+
+export const LoadingItemsLavenderBlue = () => (
+  <>
+    {Object.entries(LOADINGITEMS).map(([name, Component]) => (
+      <States key={name}>
+        <Component style={{ width: '5rem' }} />
+      </States>
+    ))}
+  </>
+);

package/src/components/LoadingItemsLavenderBlue/LoadingItems.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export type LoadingItemsProps = React.HTMLAttributes<HTMLOrSVGElement>;