@simplybusiness/mobius 9.3.4 → 10.0.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 10.0.0
+
+### Major Changes
+
+- fc4ed44: ### BREAKING CHANGE: All component CSS is now wrapped in `@layer` declarations
+
+  All CSS across mobius, mobius-datepicker, mobius-journey, mobius-interventions, mobius-chat-ui, and mobius-chatbot is now wrapped in `@layer atoms` or `@layer organisms`. The layer order preamble is declared in theme-core.
+
+  **What this means for consumers:**
+  - **Good news:** You no longer need specificity hacks (e.g. `.Foo.Foo`) to override Mobius styles. Your unlayered CSS automatically wins the cascade, regardless of import order.
+  - **Action required if you support older browsers:** `@layer` is supported in Chrome 99+, Firefox 97+, and Safari 15.4+ (all shipped early 2022). If you need to support browsers older than this, you must add your own `@layer` polyfill at the build level. Mobius intentionally does not ship a polyfill — doing so would cause polyfilled styles to become unlayered and override your app styles, defeating the purpose.
+  - **Custom layer ordering:** If you need to insert your own layers between Mobius layers, declare your own `@layer` order before importing theme-core. Your declaration must include all Mobius layers: `@layer reset, base, atoms, your-layer, organisms, theme;`
+
+  **What changed:**
+  - 204 CSS files wrapped in `@layer` blocks
+  - `@layer reset, base, atoms, organisms, theme;` preamble added to theme-core
+  - New `@simplybusiness/stylelint-plugin` enforces layer wrapping in CI
+  - `lint-css.js` now resolves stylelint config per-package instead of using a hardcoded central config
+
+### Patch Changes
+
+- @simplybusiness/icons@5.0.3
+- @simplybusiness/mobius-hooks@0.1.1
+
 ## 9.3.4
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "9.3.4",
+  "version": "10.0.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -67,7 +67,7 @@
     "@eslint/eslintrc": "^3.3.4",
     "@eslint/js": "^9.39.3",
     "@react-types/progress": "^3.5.18",
-    "@simplybusiness/build-scripts": "^2.0.3",
+    "@simplybusiness/build-scripts": "^3.0.0",
     "@simplybusiness/eslint-config": "^2.0.4",
     "@simplybusiness/eslint-plugin": "^1.3.0",
     "@testing-library/dom": "^10.4.1",

package/src/components/Accordion/Accordion.css

@@ -1,89 +1,97 @@
-.mobius-accordion {
-  --transition-duration: 0ms;
+@layer atoms {
+  .mobius-accordion {
+    --transition-duration: 0ms;
 
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  outline: none;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    outline: none;
 
-  &.--should-animate {
-    --transition-duration: 500ms;
+    &.--should-animate {
+      --transition-duration: 500ms;
+    }
   }
-}
 
-.mobius-accordion__content-container {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows var(--transition-duration);
+  .mobius-accordion__content-container {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows var(--transition-duration);
 
-  &.--is-open {
-    grid-template-rows: 1fr;
+    &.--is-open {
+      grid-template-rows: 1fr;
+    }
   }
-}
 
-.mobius-accordion__content {
-  overflow: hidden;
-  opacity: 0;
-  transition:
-    opacity var(--transition-duration),
-    margin var(--transition-duration);
+  .mobius-accordion__content {
+    overflow: hidden;
+    opacity: 0;
+    transition:
+      opacity var(--transition-duration),
+      margin var(--transition-duration);
 
-  &.--is-open {
-    overflow: visible;
-    opacity: 1;
-    margin-top: var(--size-xs);
+    &.--is-open {
+      overflow: visible;
+      opacity: 1;
+      margin-top: var(--size-xs);
+    }
   }
-}
 
-/* Links */
-.mobius-accordion__link {
-  display: flex;
-  align-items: center;
-  border-radius: var(--radius-1);
-  color: var(--color-accordion-link, var(--color-secondary));
-  cursor: pointer;
-  outline: none;
-  text-decoration: underline;
-  text-underline-offset: var(--accordion-link-underline-offset, 6px);
+  /* Links */
+  .mobius-accordion__link {
+    display: flex;
+    align-items: center;
+    border-radius: var(--radius-1);
+    color: var(--color-accordion-link, var(--color-secondary));
+    cursor: pointer;
+    outline: none;
+    text-decoration: underline;
+    text-underline-offset: var(--accordion-link-underline-offset, 6px);
+
+    &:hover,
+    &:active {
+      color: var(--color-accordion-link-hover, var(--color-secondary-hover));
+      text-decoration: var(--accordion-link-hover-text-decoration, underline);
+    }
 
-  &:hover,
-  &:active {
-    color: var(--color-accordion-link-hover, var(--color-secondary-hover));
-    text-decoration: var(--accordion-link-hover-text-decoration, underline);
+    &:focus-visible {
+      outline: none;
+      box-shadow: var(--accordion-box-shadow, var(--box-shadow-default));
+    }
   }
 
-  &:focus-visible {
-    outline: none;
-    box-shadow: var(--accordion-box-shadow, var(--box-shadow-default));
+  h1.mobius-accordion__link-text,
+  h2.mobius-accordion__link-text,
+  h3.mobius-accordion__link-text,
+  h4.mobius-accordion__link-text,
+  h5.mobius-accordion__link-text,
+  h6.mobius-accordion__link-text,
+  .mobius-accordion__link-text {
+    margin: 0;
+    /* Text order: when icon-position is 1 (left), text is 2; when icon-position is 2 (right), text is 1 */
+    order: calc(3 - var(--mobius-accordion-icon-position, 2));
+    line-height: var(--line-height-normal);
+    font-size: var(--accordion-font-size, var(--font-size-small-paragraph));
+    font-weight: var(--accordion-font-weight, var(--font-weight-normal));
   }
-}
-
-h1.mobius-accordion__link-text,
-h2.mobius-accordion__link-text,
-h3.mobius-accordion__link-text,
-h4.mobius-accordion__link-text,
-h5.mobius-accordion__link-text,
-h6.mobius-accordion__link-text,
-.mobius-accordion__link-text {
-  margin: 0;
-  /* Text order: when icon-position is 1 (left), text is 2; when icon-position is 2 (right), text is 1 */
-  order: calc(3 - var(--mobius-accordion-icon-position, 2));
-  line-height: var(--line-height-normal);
-  font-size: var(--accordion-font-size, var(--font-size-small-paragraph));
-  font-weight: var(--accordion-font-weight, var(--font-weight-normal));
-}
 
-.mobius-accordion__link-icon {
-  /* Icon order: directly uses the position value */
-  order: var(--mobius-accordion-icon-position, 2);
-  /* Dynamic margin: when icon position is 1 (left), margin-left = 0 and margin-right = margin;
-     when icon position is 2 (right), margin-left = margin and margin-right = 0 */
-  margin-left: calc((var(--mobius-accordion-icon-position, 2) - 1) * var(--accordion-icon-margin, var(--size-xs)));
-  margin-right: calc((2 - var(--mobius-accordion-icon-position, 2)) * var(--accordion-icon-margin, var(--size-xs)));
-  transition: transform var(--transition-duration);
+  .mobius-accordion__link-icon {
+    /* Icon order: directly uses the position value */
+    order: var(--mobius-accordion-icon-position, 2);
+    /* Dynamic margin: when icon position is 1 (left), margin-left = 0 and margin-right = margin;
+       when icon position is 2 (right), margin-left = margin and margin-right = 0 */
+    margin-left: calc(
+      (var(--mobius-accordion-icon-position, 2) - 1) *
+        var(--accordion-icon-margin, var(--size-xs))
+    );
+    margin-right: calc(
+      (2 - var(--mobius-accordion-icon-position, 2)) *
+        var(--accordion-icon-margin, var(--size-xs))
+    );
+    transition: transform var(--transition-duration);
 
-  &.--is-open {
-    transform: rotateZ(-180deg);
+    &.--is-open {
+      transform: rotateZ(-180deg);
+    }
   }
 }

package/src/components/Accordion/AccordionList.css

@@ -1,30 +1,32 @@
-.mobius-accordion-list {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
+@layer atoms {
+  .mobius-accordion-list {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
 
-  /* Layout overrides for Accordions within the list */
-  & .mobius-accordion__link {
-    justify-content: space-between;
-    text-decoration: none;
-    --accordion-icon-margin: 0;
-
-    &:hover,
-    &:active {
+    /* Layout overrides for Accordions within the list */
+    & .mobius-accordion__link {
+      justify-content: space-between;
       text-decoration: none;
+      --accordion-icon-margin: 0;
+
+      &:hover,
+      &:active {
+        text-decoration: none;
+      }
     }
-  }
 
-  & .mobius-accordion__link-text {
-    color: var(--color-text-medium);
-    font-size: var(--font-size-regular);
-    font-weight: var(--font-weight-semibold);
-  }
+    & .mobius-accordion__link-text {
+      color: var(--color-text-medium);
+      font-size: var(--font-size-regular);
+      font-weight: var(--font-weight-semibold);
+    }
 
-  & .mobius-accordion__content {
-    color: var(--color-text-medium);
-    font-size: var(--font-size-regular);
-    font-weight: var(--font-weight-light);
-    line-height: var(--line-height-normal);
+    & .mobius-accordion__content {
+      color: var(--color-text-medium);
+      font-size: var(--font-size-regular);
+      font-weight: var(--font-weight-light);
+      line-height: var(--line-height-normal);
+    }
   }
 }

package/src/components/Alert/Alert.css

@@ -1,54 +1,56 @@
-.mobius-alert__icon {
-  margin-right: var(--size-sm);
-}
+@layer atoms {
+  .mobius-alert__icon {
+    margin-right: var(--size-sm);
+  }
 
-.mobius-alert {
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  font-size: var(--font-size-regular);
-  line-height: var(--line-height-normal);
-  color: var(--color-text);
-  border: 2px solid;
-  border-color: inherit;
-  border-radius: var(--radius-1);
-  padding: var(--size-sm);
-
-  &.--has-header {
-    align-items: start;
-
-    & .mobius-alert__icon {
-      margin-top: 2px;
+  .mobius-alert {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    font-size: var(--font-size-regular);
+    line-height: var(--line-height-normal);
+    color: var(--color-text);
+    border: 2px solid;
+    border-color: inherit;
+    border-radius: var(--radius-1);
+    padding: var(--size-sm);
+
+    &.--has-header {
+      align-items: start;
+
+      & .mobius-alert__icon {
+        margin-top: 2px;
+      }
     }
-  }
 
-  &.--info {
-    border-color: var(--color-info);
-    background-color: var(--color-info-background);
-  }
+    &.--info {
+      border-color: var(--color-info);
+      background-color: var(--color-info-background);
+    }
 
-  &.--success {
-    border-color: var(--color-valid);
-    background-color: var(--color-valid-background);
-  }
+    &.--success {
+      border-color: var(--color-valid);
+      background-color: var(--color-valid-background);
+    }
 
-  &.--warning {
-    border-color: var(--color-warning);
-    background-color: var(--color-warning-background);
-  }
+    &.--warning {
+      border-color: var(--color-warning);
+      background-color: var(--color-warning-background);
+    }
 
-  &.--error {
-    border-color: var(--color-error);
-    background-color: var(--color-error-background);
+    &.--error {
+      border-color: var(--color-error);
+      background-color: var(--color-error-background);
+    }
   }
-}
 
-.mobius-alert__icon .mobius-icon {
-  height: 1.32em;
-}
+  .mobius-alert__icon .mobius-icon {
+    height: 1.32em;
+  }
 
-.mobius-alert__header {
-  margin: 0 0 var(--size-xxs);
-  font-size: var(--font-size-regular);
-  font-weight: 600;
+  .mobius-alert__header {
+    margin: 0 0 var(--size-xxs);
+    font-size: var(--font-size-regular);
+    font-weight: 600;
+  }
 }

package/src/components/Box/Box.css

@@ -1,3 +1,5 @@
-.mobius-box {
-  box-sizing: border-box;
+@layer atoms {
+  .mobius-box {
+    box-sizing: border-box;
+  }
 }

package/src/components/Breadcrumbs/Breadcrumbs.css

@@ -1,30 +1,32 @@
-.mobius-breadcrumb {
-  box-sizing: border-box;
-  background-color: var(--color-background-light);
-  display: flex;
-  flex-direction: row;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  flex-wrap: wrap;
+@layer atoms {
+  .mobius-breadcrumb {
+    box-sizing: border-box;
+    background-color: var(--color-background-light);
+    display: flex;
+    flex-direction: row;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    flex-wrap: wrap;
+
+    & ul,
+    & ol {
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+    }
+  }
 
-  & ul,
-  & ol {
+  .mobius-breadcrumb__item {
     box-sizing: border-box;
+    color: var(--color-text);
     display: flex;
+    flex-direction: row;
     align-items: center;
   }
-}
-
-.mobius-breadcrumb__item {
-  box-sizing: border-box;
-  color: var(--color-text);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
 
-.mobius-breadcrumb__separator {
-  margin-left: var(--size-xs);
-  margin-right: var(--size-xs);
+  .mobius-breadcrumb__separator {
+    margin-left: var(--size-xs);
+    margin-right: var(--size-xs);
+  }
 }