@moda/om 19.9.0 → 20.0.0

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/LoadingShapes/LoadingShapes.scss

@@ -1,9 +1,9 @@
-@import '~om';
+@use '~@moda/om';
 
 .LoadingShapes__item--current {
   // stylelint-disable-next-line plugin/selector-bem-pattern
   path {
-    fill: color('snow');
+    fill: om.color('snow');
     transition: fill 1s;
   }
 }

package/src/components/Modal/Modal.scss

@@ -1,4 +1,4 @@
-@import '~om';
+@use '~@moda/om';
 
 .Modal {
   position: fixed;

package/src/components/ModalOverlay/ModalOverlay.scss

@@ -1,15 +1,15 @@
-@import '~om';
+@use '~@moda/om';
 
 .ModalOverlay {
   background: rgba(255, 255, 255, 0.9);
-  padding: spacing(8, 6);
+  padding: om.spacing(8, 6);
 
-  @include breakpoint(sm, $prop: max-width) {
-    padding: spacing(8, 4);
+  @include om.breakpoint(sm, $prop: max-width) {
+    padding: om.spacing(8, 4);
   }
 
-  @include breakpoint(xs, $prop: max-width) {
-    padding: spacing(8, 2);
+  @include om.breakpoint(xs, $prop: max-width) {
+    padding: om.spacing(8, 2);
   }
 
   &__content {

package/src/components/Overlay/Overlay.scss

@@ -1,17 +1,17 @@
-@import '~om';
+@use '~@moda/om';
 
 .Overlay {
-  @include stack(2);
+  @include om.stack(2);
 
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: color('snow', 0.9);
+  background-color: om.color('snow', 0.9);
   justify-content: center;
   align-items: center;
-  color: color('ink');
+  color: om.color('ink');
   animation: slow-in 0.5s;
 
   @keyframes slow-in {

package/src/components/Paginator/Paginator.scss

@@ -1,21 +1,21 @@
-@import '~om';
+@use '~@moda/om';
 
 .Paginator {
   display: flex;
   justify-content: center;
 
   &__button {
-    @include text(body1);
+    @include om.text(body1);
 
     border: none;
-    height: space(6);
-    width: space(6);
+    height: om.space(6);
+    width: om.space(6);
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
-    margin-right: space(1);
-    margin-left: space(1);
+    margin-right: om.space(1);
+    margin-left: om.space(1);
     background-color: transparent;
 
     &:first-child {
@@ -27,7 +27,7 @@
     }
 
     &:hover {
-      background-color: color(noise);
+      background-color: om.color(noise);
     }
 
     &--next,
@@ -36,16 +36,16 @@
     }
 
     &--currentPage {
-      background-color: color(noise);
+      background-color: om.color(noise);
     }
   }
 
   &__next-chevron {
-    margin-left: space(2);
+    margin-left: om.space(2);
   }
 
   &__previous-chevron {
-    margin-right: space(2);
+    margin-right: om.space(2);
   }
 
   &__button--ellipsis {

package/src/components/PasswordInput/PasswordInput.scss

@@ -1,4 +1,4 @@
-@import '~om';
+@use '~@moda/om';
 
 .PasswordInput {
   position: relative;
@@ -9,10 +9,10 @@
 
   &__password-action {
     position: absolute;
-    top: space(2);
-    right: space(6);
+    top: om.space(2);
+    right: om.space(6);
 
-    @include breakpoint(sm, $prop: max-width) {
+    @include om.breakpoint(sm, $prop: max-width) {
       top: 0.7rem;
     }
   }

package/src/components/Popover/Popover.scss

@@ -1,17 +1,17 @@
-@import '~om';
+@use '~@moda/om';
 
 .Popover {
   $self: &;
-  $caret-size: space(2);
+  $caret-size: om.space(2);
   $border-width: calc(1rem / 16);
-  $offset: space(2);
+  $offset: om.space(2);
 
   position: relative;
 
   &__content {
     position: absolute;
-    background-color: color('snow');
-    border: $border-width solid color(elephant);
+    background-color: om.color('snow');
+    border: $border-width solid om.color(elephant);
     z-index: 1;
 
     // Fills space of offset so hover works without issue
@@ -119,11 +119,11 @@
         top: auto;
         bottom: -($border-width + $offset);
         border-top: none;
-        border-bottom: $caret-size solid color('snow');
+        border-bottom: $caret-size solid om.color('snow');
       }
 
       &:before {
-        border-bottom: $caret-size solid color(ink);
+        border-bottom: $caret-size solid om.color(ink);
       }
     }
   }
@@ -137,12 +137,12 @@
       &:before {
         top: -($border-width + $offset);
         bottom: auto;
-        border-top: $caret-size solid color('snow');
+        border-top: $caret-size solid om.color('snow');
         border-bottom: none;
       }
 
       &:before {
-        border-top: $caret-size solid color(ink);
+        border-top: $caret-size solid om.color(ink);
       }
     }
   }

package/src/components/PromoBanner/PromoBanner.scss

@@ -1,12 +1,12 @@
-@import '~om';
+@use '~@moda/om';
 
 .PromoBanner {
   $self: &;
 
-  @include text(body2);
+  @include om.text(body2);
 
-  background-color: color(cream);
-  border-top: space(1) solid color(burnt-orange);
+  background-color: om.color(cream);
+  border-top: om.space(1) solid om.color(burnt-orange);
 
   &__constrain {
     display: flex;
@@ -15,8 +15,8 @@
   }
 
   &__child {
-    min-width: space(11);
-    padding: spacing(2, 3);
+    min-width: om.space(11);
+    padding: om.spacing(2, 3);
 
     &--center {
       flex: 1;
@@ -33,13 +33,13 @@
     }
 
     > a {
-      color: color(ink);
+      color: om.color(ink);
 
-      @include thin-underline();
+      @include om.thin-underline();
     }
   }
 
-  @include breakpoint(sm, $prop: max-width) {
+  @include om.breakpoint(sm, $prop: max-width) {
     #{$self}__child--left,
     #{$self}__child--right {
       display: none;

package/src/components/RadioButton/RadioButton.scss

@@ -1,16 +1,16 @@
-@import '~om';
+@use '~@moda/om';
 
 .RadioButton {
-  $radio-button-size: space(4);
-  $radio-button-check-offset: space(1);
+  $radio-button-size: om.space(4);
+  $radio-button-check-offset: om.space(1);
 
-  @include stack(2, $direction: horizontal);
+  @include om.stack(2, $direction: horizontal);
 
   position: relative;
   align-items: center;
   user-select: none;
   cursor: pointer;
-  color: color(ink);
+  color: om.color(ink);
 
   &__indicator {
     position: relative;
@@ -19,10 +19,10 @@
     flex-shrink: 0;
     border: 1px solid;
     border-radius: 50%;
-    background-color: color('snow');
+    background-color: om.color('snow');
 
     &--checked {
-      background-color: color(ink);
+      background-color: om.color(ink);
 
       &::after {
         content: '';
@@ -33,27 +33,27 @@
         bottom: $radio-button-check-offset;
         left: $radio-button-check-offset;
         border-radius: 50%;
-        background-color: color('snow');
+        background-color: om.color('snow');
       }
     }
 
     &--disabled {
-      color: color(elephant);
+      color: om.color(elephant);
       pointer-events: none;
-      background-color: color('snow');
+      background-color: om.color('snow');
       &::after {
-        background-color: color(elephant);
+        background-color: om.color(elephant);
       }
     }
   }
 
   &__input {
-    @include visually-hidden();
+    @include om.visually-hidden();
   }
 
   &__label {
-    @include text(body1);
+    @include om.text(body1);
 
-    color: color(ink);
+    color: om.color(ink);
   }
 }