@simplybusiness/mobius 9.3.4 → 10.1.0

package/src/components/Slider/Slider.css

@@ -1,129 +1,131 @@
-.mobius-slider__track-wrapper {
-  position: relative;
-  width: 100%;
-  height: 30px;
-}
-
-.mobius-slider__track {
-  position: absolute;
-  appearance: none;
-  -webkit-appearance: none;
-  width: 100%;
-  height: var(--size-xs);
-  top: calc(var(--size-xs) + 2px);
-  border-radius: 999px;
-  touch-action: none;
-  outline: none;
-}
-
-.mobius-slider__label-wrapper {
-  display: flex;
-  align-self: stretch;
-}
-
-/* Thumb */
-.mobius-slider__track::-webkit-slider-thumb {
-  appearance: none;
-  -webkit-appearance: none;
-  width: var(--thumb-size);
-  height: var(--thumb-size);
-  border: var(--thumb-border);
-  border-radius: 50%;
-  cursor: pointer;
-}
-
-.mobius-slider__track::-moz-range-thumb {
-  appearance: none;
-  -webkit-appearance: none;
-  width: var(--thumb-size);
-  height: var(--thumb-size);
-  border: var(--thumb-border);
-  border-radius: 50%;
-  cursor: pointer;
-}
-
-/* Thumb focus blur */
-.mobius-slider__track:focus-visible::-webkit-slider-thumb {
-  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.4));
-}
-
-.mobius-slider__track:focus-visible::-moz-range-thumb {
-  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.4));
-}
-
-.mobius-slider__labels {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-}
-
-.mobius-slider {
-  position: relative;
-  display: grid;
-  gap: var(--size-xxs);
+@layer atoms {
+  .mobius-slider__track-wrapper {
+    position: relative;
+    width: 100%;
+    height: 30px;
+  }
 
-  &.--is-primary {
-    & .mobius-slider__track {
-      background-color: var(--slider-primary-track-background);
-    }
+  .mobius-slider__track {
+    position: absolute;
+    appearance: none;
+    -webkit-appearance: none;
+    width: 100%;
+    height: var(--size-xs);
+    top: calc(var(--size-xs) + 2px);
+    border-radius: 999px;
+    touch-action: none;
+    outline: none;
+  }
 
-    & .mobius-slider__track::-webkit-slider-thumb {
-      background-color: var(--slider-primary-thumb-background);
-      box-shadow:
-        0 0 0 var(--size-xxs) var(--color-background),
-        0 0 0 5px var(--slider-primary-thumb-background);
-    }
+  .mobius-slider__label-wrapper {
+    display: flex;
+    align-self: stretch;
+  }
 
-    & .mobius-slider__track::-moz-range-thumb {
-      background-color: var(--slider-primary-thumb-background);
-      box-shadow:
-        0 0 0 var(--size-xxs) var(--color-background),
-        0 0 0 5px var(--slider-primary-thumb-background);
-    }
+  /* Thumb */
+  .mobius-slider__track::-webkit-slider-thumb {
+    appearance: none;
+    -webkit-appearance: none;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    border: var(--thumb-border);
+    border-radius: 50%;
+    cursor: pointer;
   }
 
-  &.--is-secondary {
-    & .mobius-slider__track {
-      background-color: var(--slider-secondary-track-background);
-    }
+  .mobius-slider__track::-moz-range-thumb {
+    appearance: none;
+    -webkit-appearance: none;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    border: var(--thumb-border);
+    border-radius: 50%;
+    cursor: pointer;
+  }
 
-    & .mobius-slider__track::-webkit-slider-thumb {
-      background-color: var(--slider-secondary-thumb-background);
-      box-shadow:
-        0 0 0 var(--size-xxs) var(--color-background),
-        0 0 0 5px var(--slider-secondary-thumb-background);
-    }
+  /* Thumb focus blur */
+  .mobius-slider__track:focus-visible::-webkit-slider-thumb {
+    filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.4));
+  }
 
-    & .mobius-slider__track::-moz-range-thumb {
-      background-color: var(--slider-secondary-thumb-background);
-      box-shadow:
-        0 0 0 var(--size-xxs) var(--color-background),
-        0 0 0 5px var(--slider-secondary-thumb-background);
-    }
+  .mobius-slider__track:focus-visible::-moz-range-thumb {
+    filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.4));
   }
 
-  &.--is-disabled {
-    color: var(--color-text-light);
-    cursor: not-allowed;
+  .mobius-slider__labels {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
 
-    & .mobius-slider__track {
-      background-color: var(--color-background-light);
+  .mobius-slider {
+    position: relative;
+    display: grid;
+    gap: var(--size-xxs);
+
+    &.--is-primary {
+      & .mobius-slider__track {
+        background-color: var(--slider-primary-track-background);
+      }
+
+      & .mobius-slider__track::-webkit-slider-thumb {
+        background-color: var(--slider-primary-thumb-background);
+        box-shadow:
+          0 0 0 var(--size-xxs) var(--color-background),
+          0 0 0 5px var(--slider-primary-thumb-background);
+      }
+
+      & .mobius-slider__track::-moz-range-thumb {
+        background-color: var(--slider-primary-thumb-background);
+        box-shadow:
+          0 0 0 var(--size-xxs) var(--color-background),
+          0 0 0 5px var(--slider-primary-thumb-background);
+      }
     }
 
-    & .mobius-slider__track::-webkit-slider-thumb {
-      background-color: var(--color-background-light);
-      box-shadow:
-        0 0 0 var(--size-xxs) var(--color-background),
-        0 0 0 5px var(--color-border-medium);
-      cursor: not-allowed;
+    &.--is-secondary {
+      & .mobius-slider__track {
+        background-color: var(--slider-secondary-track-background);
+      }
+
+      & .mobius-slider__track::-webkit-slider-thumb {
+        background-color: var(--slider-secondary-thumb-background);
+        box-shadow:
+          0 0 0 var(--size-xxs) var(--color-background),
+          0 0 0 5px var(--slider-secondary-thumb-background);
+      }
+
+      & .mobius-slider__track::-moz-range-thumb {
+        background-color: var(--slider-secondary-thumb-background);
+        box-shadow:
+          0 0 0 var(--size-xxs) var(--color-background),
+          0 0 0 5px var(--slider-secondary-thumb-background);
+      }
     }
 
-    & .mobius-slider__track::-moz-range-thumb {
-      background-color: var(--color-background-light);
-      box-shadow:
-        0 0 0 var(--size-xxs) var(--color-background),
-        0 0 0 5px var(--color-border-medium);
+    &.--is-disabled {
+      color: var(--color-text-light);
       cursor: not-allowed;
+
+      & .mobius-slider__track {
+        background-color: var(--color-background-light);
+      }
+
+      & .mobius-slider__track::-webkit-slider-thumb {
+        background-color: var(--color-background-light);
+        box-shadow:
+          0 0 0 var(--size-xxs) var(--color-background),
+          0 0 0 5px var(--color-border-medium);
+        cursor: not-allowed;
+      }
+
+      & .mobius-slider__track::-moz-range-thumb {
+        background-color: var(--color-background-light);
+        box-shadow:
+          0 0 0 var(--size-xxs) var(--color-background),
+          0 0 0 5px var(--color-border-medium);
+        cursor: not-allowed;
+      }
     }
   }
 }

package/src/components/Stack/Stack.css

@@ -1,30 +1,32 @@
-.mobius-stack {
-  display: grid;
-  flex: 1 1 auto;
-  align-self: stretch;
-  grid-auto-flow: row;
+@layer atoms {
+  .mobius-stack {
+    display: grid;
+    flex: 1 1 auto;
+    align-self: stretch;
+    grid-auto-flow: row;
 
-  &.--gap-xxs {
-    gap: var(--size-xxs);
-  }
+    &.--gap-xxs {
+      gap: var(--size-xxs);
+    }
 
-  &.--gap-xs {
-    gap: var(--size-xs);
-  }
+    &.--gap-xs {
+      gap: var(--size-xs);
+    }
 
-  &.--gap-sm {
-    gap: var(--size-sm);
-  }
+    &.--gap-sm {
+      gap: var(--size-sm);
+    }
 
-  &.--gap-md {
-    gap: var(--size-md);
-  }
+    &.--gap-md {
+      gap: var(--size-md);
+    }
 
-  &.--gap-lg {
-    gap: var(--size-lg);
-  }
+    &.--gap-lg {
+      gap: var(--size-lg);
+    }
 
-  &.--gap-xl {
-    gap: var(--size-xl);
+    &.--gap-xl {
+      gap: var(--size-xl);
+    }
   }
 }

package/src/components/Switch/Switch.css

@@ -1,78 +1,80 @@
-/* stylelint-disable no-descending-specificity -- complex component with many state combinations */
-.mobius-switch__slider {
-  position: absolute;
-  cursor: pointer;
-  border-radius: 30px;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--color-border);
-  transition: var(--switch-transition-duration);
-
-  &:before {
+@layer atoms {
+  /* stylelint-disable no-descending-specificity -- complex component with many state combinations */
+  .mobius-switch__slider {
     position: absolute;
-    content: "";
-    border-radius: 50%;
-    height: 26px;
-    width: 26px;
-    left: 3px;
-    bottom: 2px;
-    background-color: var(--color-background);
+    cursor: pointer;
+    border-radius: 30px;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--color-border);
     transition: var(--switch-transition-duration);
+
+    &:before {
+      position: absolute;
+      content: "";
+      border-radius: 50%;
+      height: 26px;
+      width: 26px;
+      left: 3px;
+      bottom: 2px;
+      background-color: var(--color-background);
+      transition: var(--switch-transition-duration);
+    }
   }
-}
 
-.mobius-switch {
-  position: relative;
-  display: inline-block;
-  border-radius: 30px;
-  width: 55px;
-  height: 30px;
+  .mobius-switch {
+    position: relative;
+    display: inline-block;
+    border-radius: 30px;
+    width: 55px;
+    height: 30px;
 
-  & input {
-    opacity: 0;
-    width: 0;
-    height: 0;
+    & input {
+      opacity: 0;
+      width: 0;
+      height: 0;
 
-    &:focus-visible {
-      & + .mobius-switch__slider {
-        box-shadow: var(--box-shadow-default);
+      &:focus-visible {
+        & + .mobius-switch__slider {
+          box-shadow: var(--box-shadow-default);
+        }
       }
     }
   }
-}
 
-.mobius-switch--checked {
-  & .mobius-switch__slider {
-    background-color: var(--color-primary);
+  .mobius-switch--checked {
+    & .mobius-switch__slider {
+      background-color: var(--color-primary);
 
-    &:hover {
-      background-color: var(--color-primary-hover);
+      &:hover {
+        background-color: var(--color-primary-hover);
+      }
     }
-  }
 
-  & .mobius-switch__slider:before {
-    transform: translateX(23px);
+    & .mobius-switch__slider:before {
+      transform: translateX(23px);
+    }
   }
-}
 
-.mobius-switch--disabled {
-  & .mobius-switch__slider {
-    &:hover {
-      cursor: not-allowed;
+  .mobius-switch--disabled {
+    & .mobius-switch__slider {
+      &:hover {
+        cursor: not-allowed;
+      }
     }
   }
-}
 
-.mobius-switch--disabled:not(.mobius-switch--checked) {
-  & .mobius-switch__slider {
-    background-color: var(--color-background-light);
+  .mobius-switch--disabled:not(.mobius-switch--checked) {
+    & .mobius-switch__slider {
+      background-color: var(--color-background-light);
+    }
   }
-}
 
-.mobius-switch--disabled.mobius-switch--checked {
-  & .mobius-switch__slider {
-    background-color: var(--color-primary-light);
+  .mobius-switch--disabled.mobius-switch--checked {
+    & .mobius-switch__slider {
+      background-color: var(--color-primary-light);
+    }
   }
 }

package/src/components/Table/Table.css

@@ -1,56 +1,58 @@
-.mobius-table {
-  display: table;
-  width: 100%;
-  text-align: left;
-  border-collapse: collapse;
-  line-height: 1.7;
-  box-sizing: border-box;
-  text-indent: initial;
-  border-spacing: 2px;
-  border-color: var(--color-border-light);
-}
+@layer atoms {
+  .mobius-table {
+    display: table;
+    width: 100%;
+    text-align: left;
+    border-collapse: collapse;
+    line-height: 1.7;
+    box-sizing: border-box;
+    text-indent: initial;
+    border-spacing: 2px;
+    border-color: var(--color-border-light);
+  }
 
-.mobius-table__head {
-  display: table-row-group;
-  box-sizing: border-box;
-  vertical-align: middle;
-  border-color: inherit;
-  font-weight: var(--font-weight-bold);
-}
+  .mobius-table__head {
+    display: table-row-group;
+    box-sizing: border-box;
+    vertical-align: middle;
+    border-color: inherit;
+    font-weight: var(--font-weight-bold);
+  }
 
-.mobius-table__head-cell {
-  display: table-cell;
-  font-weight: var(--font-weight-bold);
-  box-sizing: border-box;
-  vertical-align: baseline;
-  padding-top: var(--size-xs);
-  padding-bottom: var(--size-xs);
-  padding-right: var(--size-lg);
-  border-color: currentColor;
-  border-width: var(--table-border-width);
-  border-bottom-style: solid;
-}
+  .mobius-table__head-cell {
+    display: table-cell;
+    font-weight: var(--font-weight-bold);
+    box-sizing: border-box;
+    vertical-align: baseline;
+    padding-top: var(--size-xs);
+    padding-bottom: var(--size-xs);
+    padding-right: var(--size-lg);
+    border-color: currentColor;
+    border-width: var(--table-border-width);
+    border-bottom-style: solid;
+  }
 
-.mobius-table__body {
-  display: table-row-group;
-  box-sizing: border-box;
-  vertical-align: middle;
-  border-color: inherit;
-}
+  .mobius-table__body {
+    display: table-row-group;
+    box-sizing: border-box;
+    vertical-align: middle;
+    border-color: inherit;
+  }
 
-.mobius-table__body-cell {
-  display: table-cell;
-  vertical-align: baseline;
-  box-sizing: border-box;
-  color: var(--color-text-medium);
-  padding-top: var(--size-xs);
-  padding-bottom: var(--size-xs);
-  padding-right: var(--size-lg);
-  border-color: var(--color-border-light);
-  border-width: var(--table-border-width);
-  border-bottom-style: solid;
-}
+  .mobius-table__body-cell {
+    display: table-cell;
+    vertical-align: baseline;
+    box-sizing: border-box;
+    color: var(--color-text-medium);
+    padding-top: var(--size-xs);
+    padding-bottom: var(--size-xs);
+    padding-right: var(--size-lg);
+    border-color: var(--color-border-light);
+    border-width: var(--table-border-width);
+    border-bottom-style: solid;
+  }
 
-.mobius-table__row {
-  display: table-row;
+  .mobius-table__row {
+    display: table-row;
+  }
 }