@simplybusiness/mobius 9.3.3 → 10.0.0

package/src/components/Drawer/Drawer.css

@@ -1,203 +1,205 @@
-:root,
-:host,
-::backdrop {
-  --drawer-transition-duration: 0;
-  /* Backdrop colour fallback */
-  --backdrop-color: #18181d;
-}
-
-/* Enable transitions only if reduce motion flag is off */
-@media (prefers-reduced-motion: no-preference) {
+@layer atoms {
   :root,
   :host,
   ::backdrop {
-    --drawer-transition-duration: 300ms;
-  }
-}
-
-.mobius-drawer {
-  --drawer-width: min(100%, 560px);
-  --drawer-height: min(100%, 560px); /* Default height TBD */
-
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  top: 0;
-  padding: 0;
-  margin: 0;
-  border: none;
-  background-color: var(--color-background);
-  overflow: hidden;
-
-  &:not([open]) {
-    display: none;
+    --drawer-transition-duration: 0;
+    /* Backdrop colour fallback */
+    --backdrop-color: #18181d;
   }
 
-  &:focus-visible {
-    outline: none;
+  /* Enable transitions only if reduce motion flag is off */
+  @media (prefers-reduced-motion: no-preference) {
+    :root,
+    :host,
+    ::backdrop {
+      --drawer-transition-duration: 300ms;
+    }
   }
 
-  &::backdrop {
-    background-color: var(--backdrop-color);
-    opacity: 0;
-    transition: opacity var(--drawer-transition-duration) ease-in-out;
-  }
+  .mobius-drawer {
+    --drawer-width: min(100%, 560px);
+    --drawer-height: min(100%, 560px); /* Default height TBD */
 
-  /* Injected by "dialog-polyfill" */
-  /* Required for iOS <= 15.2 */
-  & + .backdrop {
     position: fixed;
+    display: flex;
+    flex-direction: column;
     top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: var(--backdrop-color);
-    opacity: 0.3;
+    padding: 0;
+    margin: 0;
+    border: none;
+    background-color: var(--color-background);
+    overflow: hidden;
+
+    &:not([open]) {
+      display: none;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
 
-    & + ._dialog_overlay {
+    &::backdrop {
+      background-color: var(--backdrop-color);
+      opacity: 0;
+      transition: opacity var(--drawer-transition-duration) ease-in-out;
+    }
+
+    /* Injected by "dialog-polyfill" */
+    /* Required for iOS <= 15.2 */
+    & + .backdrop {
       position: fixed;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
+      background-color: var(--backdrop-color);
+      opacity: 0.3;
+
+      & + ._dialog_overlay {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
     }
-  }
 
-  &.--top,
-  &.--bottom {
-    width: 100vw;
-    max-width: 100vw;
-    height: var(--drawer-height);
-    max-height: var(--drawer-height);
-    transition: transform var(--drawer-transition-duration) ease-in-out;
-    padding-bottom: 80px;
-    @supports (height: 100dvh) {
-      height: 100dvh;
-      max-height: 100dvh;
-      padding-bottom: 0;
+    &.--top,
+    &.--bottom {
+      width: 100vw;
+      max-width: 100vw;
+      height: var(--drawer-height);
+      max-height: var(--drawer-height);
+      transition: transform var(--drawer-transition-duration) ease-in-out;
+      padding-bottom: 80px;
+      @supports (height: 100dvh) {
+        height: 100dvh;
+        max-height: 100dvh;
+        padding-bottom: 0;
+      }
     }
-  }
 
-  &.--left,
-  &.--right {
-    bottom: 0;
-    width: 100%;
-    max-width: var(--drawer-width);
-    height: 100vh;
-    max-height: 100vh;
-    transition: transform var(--drawer-transition-duration) ease-in-out;
-    padding-bottom: 80px;
-    @supports (height: 100dvh) {
-      height: 100dvh;
-      max-height: 100dvh;
-      padding-bottom: 0;
+    &.--left,
+    &.--right {
+      bottom: 0;
+      width: 100%;
+      max-width: var(--drawer-width);
+      height: 100vh;
+      max-height: 100vh;
+      transition: transform var(--drawer-transition-duration) ease-in-out;
+      padding-bottom: 80px;
+      @supports (height: 100dvh) {
+        height: 100dvh;
+        max-height: 100dvh;
+        padding-bottom: 0;
+      }
     }
-  }
 
-  /* tl;dr For devices runing iOS 15.2 or older animations are disabled */
-  /* In iOS <= 15.2 Safari doesn't support CSS variables in calc() with negative values */
-  /* This doesn't work */
-  /* translateX(calc(var(--drawer-width) * -1)) */
-  /* These work */
-  /* translateX(calc(560px * -1)) */
-  /* translateX(-560px) */
-  /* Initially offset values that transition into view on open are required */
-  /* to ensure correct <Drawer> positioning on iPad/iPhone orientation change */
-  &:not(.--should-transition) {
-    display: none;
-
-    &[open] {
-      display: flex;
-    }
+    /* tl;dr For devices runing iOS 15.2 or older animations are disabled */
+    /* In iOS <= 15.2 Safari doesn't support CSS variables in calc() with negative values */
+    /* This doesn't work */
+    /* translateX(calc(var(--drawer-width) * -1)) */
+    /* These work */
+    /* translateX(calc(560px * -1)) */
+    /* translateX(-560px) */
+    /* Initially offset values that transition into view on open are required */
+    /* to ensure correct <Drawer> positioning on iPad/iPhone orientation change */
+    &:not(.--should-transition) {
+      display: none;
+
+      &[open] {
+        display: flex;
+      }
 
-    &.--top {
-      left: 0;
-    }
+      &.--top {
+        left: 0;
+      }
 
-    &.--bottom {
-      top: auto;
-      bottom: 0;
-      left: 0;
-    }
+      &.--bottom {
+        top: auto;
+        bottom: 0;
+        left: 0;
+      }
 
-    &.--left {
-      left: 0;
-    }
+      &.--left {
+        left: 0;
+      }
 
-    &.--right {
-      right: 0;
+      &.--right {
+        right: 0;
+      }
     }
-  }
 
-  &.--should-transition {
-    &.--transition {
-      &::backdrop {
-        opacity: 0.3;
+    &.--should-transition {
+      &.--transition {
+        &::backdrop {
+          opacity: 0.3;
+        }
       }
-    }
 
-    &.--top {
-      top: calc(-1 * var(--drawer-height));
+      &.--top {
+        top: calc(-1 * var(--drawer-height));
 
-      &.--transition {
-        transform: translateY(var(--drawer-height));
+        &.--transition {
+          transform: translateY(var(--drawer-height));
+        }
       }
-    }
 
-    &.--bottom {
-      top: auto;
-      bottom: calc(-1 * var(--drawer-height));
+      &.--bottom {
+        top: auto;
+        bottom: calc(-1 * var(--drawer-height));
 
-      &.--transition {
-        transform: translateY(calc(-1 * var(--drawer-height)));
+        &.--transition {
+          transform: translateY(calc(-1 * var(--drawer-height)));
+        }
       }
-    }
 
-    &.--left {
-      left: calc(-1 * var(--drawer-width));
+      &.--left {
+        left: calc(-1 * var(--drawer-width));
 
-      &.--transition {
-        transform: translateX(var(--drawer-width));
+        &.--transition {
+          transform: translateX(var(--drawer-width));
+        }
       }
-    }
 
-    &.--right {
-      left: auto;
-      right: calc(-1 * var(--drawer-width));
+      &.--right {
+        left: auto;
+        right: calc(-1 * var(--drawer-width));
 
-      &.--transition {
-        transform: translateX(calc(-1 * var(--drawer-width)));
+        &.--transition {
+          transform: translateX(calc(-1 * var(--drawer-width)));
+        }
       }
     }
   }
-}
 
-.mobius-drawer__header {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  justify-content: space-between;
-  gap: var(--size-sm);
-  align-items: center;
-  padding: var(--size-sm) var(--size-lg);
-  padding-bottom: 0;
-  font-family: var(--font-family);
-  font-size: var(--font-size-small-title);
-
-  & button {
-    color: var(--color-primary);
-    display: flex;
-    gap: var(--size-xs);
-  }
+  .mobius-drawer__header {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    justify-content: space-between;
+    gap: var(--size-sm);
+    align-items: center;
+    padding: var(--size-sm) var(--size-lg);
+    padding-bottom: 0;
+    font-family: var(--font-family);
+    font-size: var(--font-size-small-title);
+
+    & button {
+      color: var(--color-primary);
+      display: flex;
+      gap: var(--size-xs);
+    }
 
-  & img {
-    width: 144px;
+    & img {
+      width: 144px;
+    }
   }
-}
 
-.mobius-drawer__content {
-  flex-grow: 1;
-  padding: var(--size-lg);
-  padding-top: var(--size-sm);
-  font-family: var(--font-family);
-  overflow-y: auto;
+  .mobius-drawer__content {
+    flex-grow: 1;
+    padding: var(--size-lg);
+    padding-top: var(--size-sm);
+    font-family: var(--font-family);
+    overflow-y: auto;
+  }
 }

package/src/components/DropdownMenu/DropdownMenu.css

@@ -1,62 +1,64 @@
-.mobius-dropdown-menu {
-  position: relative;
-  max-width: var(--dropdown-menu-max-width);
-  width: 100%;
-}
+@layer atoms {
+  .mobius-dropdown-menu {
+    position: relative;
+    max-width: var(--dropdown-menu-max-width);
+    width: 100%;
+  }
 
-.mobius-dropdown-menu__trigger {
-  width: 100%;
-  text-align: right;
-  appearance: none;
-  border: none;
-  background-color: transparent;
-  font-size: var(--font-size-regular);
-  cursor: pointer;
-  padding: var(--size-xs) 0;
-  color: var(--color-primary);
-}
+  .mobius-dropdown-menu__trigger {
+    width: 100%;
+    text-align: right;
+    appearance: none;
+    border: none;
+    background-color: transparent;
+    font-size: var(--font-size-regular);
+    cursor: pointer;
+    padding: var(--size-xs) 0;
+    color: var(--color-primary);
+  }
 
-.mobius-dropdown-menu__list {
-  display: none;
-  width: 100%;
-  box-shadow: 0 0 var(--size-md) rgba(0, 0, 0, 0.2);
-  border-radius: var(--radius-1);
-  margin-top: var(--size-sm);
-  margin-bottom: 0;
-  padding-left: 0;
-  list-style-type: none;
-  overflow: hidden;
-  text-align: left;
-  color: var(--color-text);
+  .mobius-dropdown-menu__list {
+    display: none;
+    width: 100%;
+    box-shadow: 0 0 var(--size-md) rgba(0, 0, 0, 0.2);
+    border-radius: var(--radius-1);
+    margin-top: var(--size-sm);
+    margin-bottom: 0;
+    padding-left: 0;
+    list-style-type: none;
+    overflow: hidden;
+    text-align: left;
+    color: var(--color-text);
 
-  &.--is-open {
-    display: block;
-    position: absolute;
-    z-index: 2;
-    background-color: var(--color-background);
+    &.--is-open {
+      display: block;
+      position: absolute;
+      z-index: 2;
+      background-color: var(--color-background);
+    }
   }
-}
 
-.mobius-dropdown-menu__item {
-  display: block;
-  cursor: pointer;
-  padding: var(--size-sm);
-  border-left: var(--size-xxs) solid transparent;
+  .mobius-dropdown-menu__item {
+    display: block;
+    cursor: pointer;
+    padding: var(--size-sm);
+    border-left: var(--size-xxs) solid transparent;
 
-  &:hover {
-    background-color: var(--color-background-highlight);
-    color: var(--color-primary);
-    border-color: var(--color-primary);
-  }
+    &:hover {
+      background-color: var(--color-background-highlight);
+      color: var(--color-primary);
+      border-color: var(--color-primary);
+    }
 
-  &:focus-visible {
-    background-color: var(--color-background-highlight);
-    color: var(--color-primary);
-    border-color: var(--color-primary);
-    outline: none;
-  }
+    &:focus-visible {
+      background-color: var(--color-background-highlight);
+      color: var(--color-primary);
+      border-color: var(--color-primary);
+      outline: none;
+    }
 
-  &.--is-active {
-    border-left-color: var(--color-primary);
+    &.--is-active {
+      border-left-color: var(--color-primary);
+    }
   }
 }

package/src/components/DropdownMenu/DropdownMenu.story.styles.css

@@ -1,12 +1,14 @@
-.dropdownmenu-example-custom-trigger .mobius-dropdown-menu {
-  text-align: right;
-}
+@layer atoms {
+  .dropdownmenu-example-custom-trigger .mobius-dropdown-menu {
+    text-align: right;
+  }
 
-.dropdownmenu-example-custom-trigger .mobius-icon {
-  transform: rotate(0deg);
-  transition: transform 150ms ease-in-out 0s;
-}
+  .dropdownmenu-example-custom-trigger .mobius-icon {
+    transform: rotate(0deg);
+    transition: transform 150ms ease-in-out 0s;
+  }
 
-.dropdownmenu-example-custom-trigger .mobius-icon.--is-open {
-  transform: rotate(180deg);
+  .dropdownmenu-example-custom-trigger .mobius-icon.--is-open {
+    transform: rotate(180deg);
+  }
 }

package/src/components/ErrorMessage/ErrorMessage.css

@@ -1,36 +1,38 @@
-.mobius-error-message {
-  box-sizing: border-box;
-  display: var(--error-message-display, grid);
-  gap: var(--error-message-grid-gap, var(--size-xs));
-  grid-template-columns: min-content 1fr;
-  color: var(--color-error);
+@layer atoms {
+  .mobius-error-message {
+    box-sizing: border-box;
+    display: var(--error-message-display, grid);
+    gap: var(--error-message-grid-gap, var(--size-xs));
+    grid-template-columns: min-content 1fr;
+    color: var(--color-error);
 
-  & a {
-    color: var(--color-link);
-    outline: none;
-    border-radius: var(--radius-1);
+    & a {
+      color: var(--color-link);
+      outline: none;
+      border-radius: var(--radius-1);
 
-    &:hover,
-    &:active {
-      text-decoration: underline;
-      cursor: pointer;
-      color: var(--color-link-hover);
-    }
+      &:hover,
+      &:active {
+        text-decoration: underline;
+        cursor: pointer;
+        color: var(--color-link-hover);
+      }
 
-    &:focus-visible {
-      box-shadow: var(--box-shadow-default);
-      padding: 3px 0;
+      &:focus-visible {
+        box-shadow: var(--box-shadow-default);
+        padding: 3px 0;
+      }
     }
   }
-}
 
-.mobius-error-message__icon.mobius-icon {
-  width: var(--error-message-icon-width, 1em);
-  height: var(--error-message-icon-height, 1em);
-  overflow: hidden;
-}
+  .mobius-error-message__icon.mobius-icon {
+    width: var(--error-message-icon-width, 1em);
+    height: var(--error-message-icon-height, 1em);
+    overflow: hidden;
+  }
 
-.mobius-error-message__text.mobius-text {
-  font-size: var(--error-message-font-size);
-  line-height: var(--font-size-regular);
+  .mobius-error-message__text.mobius-text {
+    font-size: var(--error-message-font-size);
+    line-height: var(--font-size-regular);
+  }
 }

package/src/components/ExpandableText/ExpandableText.css

@@ -1,11 +1,13 @@
-.mobius-expandable-text__content--collapsed {
-  display: -webkit-box;
-  -webkit-line-clamp: var(--line-clamp, 3);
-  line-clamp: var(--line-clamp, 3);
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
+@layer atoms {
+  .mobius-expandable-text__content--collapsed {
+    display: -webkit-box;
+    -webkit-line-clamp: var(--line-clamp, 3);
+    line-clamp: var(--line-clamp, 3);
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
 
-.mobius-expandable-text .mobius-accordion__content.--is-open {
-  margin-top: 0;
+  .mobius-expandable-text .mobius-accordion__content.--is-open {
+    margin-top: 0;
+  }
 }

package/src/components/Fieldset/Fieldset.css

@@ -1,15 +1,17 @@
-.mobius-fieldset {
-  box-sizing: border-box;
-  flex-direction: column;
+@layer atoms {
+  .mobius-fieldset {
+    box-sizing: border-box;
+    flex-direction: column;
 
-  & .mobius-text-field {
-    margin-bottom: var(--size-sm);
+    & .mobius-text-field {
+      margin-bottom: var(--size-sm);
+    }
   }
-}
 
-.mobius-fieldset__legend {
-  box-sizing: border-box;
-  margin-bottom: var(--size-sm);
-  padding: 0;
-  font-weight: var(--font-weight-bold);
+  .mobius-fieldset__legend {
+    box-sizing: border-box;
+    margin-bottom: var(--size-sm);
+    padding: 0;
+    font-weight: var(--font-weight-bold);
+  }
 }

package/src/components/Flex/Flex.css

@@ -1,4 +1,6 @@
-.mobius-flex {
-  box-sizing: border-box;
-  display: flex;
+@layer atoms {
+  .mobius-flex {
+    box-sizing: border-box;
+    display: flex;
+  }
 }

package/src/components/Grid/Grid.story.styles.css

@@ -1,20 +1,22 @@
-.grid-example-fixed-size-grid {
-  max-width: fit-content;
-  max-height: fit-content;
-  border: 1px solid grey;
-  margin-inline: auto;
-}
+@layer atoms {
+  .grid-example-fixed-size-grid {
+    max-width: fit-content;
+    max-height: fit-content;
+    border: 1px solid grey;
+    margin-inline: auto;
+  }
 
-.grid-example-grid-alignment-item {
-  background-color: #dddddd;
-  width: 50px;
-  height: 50px;
-}
+  .grid-example-grid-alignment-item {
+    background-color: #dddddd;
+    width: 50px;
+    height: 50px;
+  }
 
-.grid-example-align-square-item {
-  background-color: #dddddd;
-}
+  .grid-example-align-square-item {
+    background-color: #dddddd;
+  }
 
-.grid-example-eight-columns {
-  height: 300px;
+  .grid-example-eight-columns {
+    height: 300px;
+  }
 }