@simplybusiness/mobius 9.3.4 → 10.0.0

package/src/components/Button/Button.css

@@ -1,242 +1,250 @@
-.mobius-button {
-  box-sizing: border-box;
-  display: inline-block;
-  outline: none;
-  text-decoration: none;
-  font-family: var(--font-family);
-  cursor: pointer;
-  color: var(--button-content-color);
-  font-weight: var(--font-weight-bold);
-  border-radius: var(--button-border-radius);
-  border-width: var(--size-border-width);
-  border-color: transparent;
-  border-style: solid;
-  position: relative;
-  margin: 0;
-  transition:
-    color var(--transition-standard),
-    background var(--transition-standard);
-
-  &:where(.--has-icon) {
-    display: inline-flex;
-    gap: var(--button-gap);
-  }
-
-  /* Sizes */
-  /* TODO: CSS variables for line-height do not produce desired height for buttons. */
-  /* These hard-coded line-height values should be replaced with CSS variables. */
-  &:where(.--size-sm) {
-    font-size: var(--font-size-3);
-    line-height: 16px;
-    padding: var(--button-padding-sm);
-  }
-
-  &:where(.--size-md) {
-    font-size: var(--font-size-4);
-    line-height: 24px;
-    padding: var(--button-padding-md);
-  }
-
-  &:where(.--size-lg) {
-    font-size: var(--font-size-5);
-    line-height: 32px;
-    padding: var(--button-padding-lg);
-  }
-
-  /* Primary */
-  &:where(.--variant-primary) {
-    --button-content-color: var(--button-primary-content-color);
-    background: var(--button-primary-color);
-    font-variation-settings: var(--button-primary-font-variation);
-
-    &:where(:active),
-    &:where(:hover) {
-      background: var(--button-primary-hover-color);
-    }
-
-    &:where(:focus-visible) {
-      box-shadow: var(--box-shadow-default);
-    }
-
-    &:where(.--is-disabled) {
-      --button-content-color: var(--color-text-light);
-      background: var(--color-background-medium);
-      cursor: not-allowed;
-    }
-  }
-
-  /* Secondary */
-  &:where(.--variant-secondary) {
-    --button-content-color: var(--button-secondary-color);
-    background: transparent;
-    border-color: var(--button-secondary-color);
-
-    &:where(:active),
-    &:where(:hover) {
-      --button-content-color: var(--color-text-inverted);
-      background: var(--button-secondary-hover-color);
-      border-color: var(--button-secondary-hover-color);
-    }
-
-    &:where(:focus-visible) {
-      box-shadow: var(--box-shadow-default);
-    }
-
-    &:where(.--is-disabled) {
-      --button-content-color: var(--color-text-light);
-      border-color: transparent;
-      background: var(--color-background-medium);
-      cursor: not-allowed;
-    }
-  }
-
-  /* Ghost */
-  &:where(.--variant-ghost) {
-    --button-content-color: var(--color-secondary);
-    background: var(--color-background-highlight);
-    border: var(--border-default);
+@layer atoms {
+  .mobius-button {
+    box-sizing: border-box;
+    display: inline-block;
+    outline: none;
+    text-decoration: none;
+    font-family: var(--font-family);
+    cursor: pointer;
+    color: var(--button-content-color);
+    font-weight: var(--font-weight-bold);
+    border-radius: var(--button-border-radius);
+    border-width: var(--size-border-width);
     border-color: transparent;
-
-    &:where(:active) {
-      background: var(--color-secondary-hover);
-    }
-
-    &:where(:hover) {
-      --button-content-color: var(--color-text-inverted);
+    border-style: solid;
+    position: relative;
+    margin: 0;
+    transition:
+      color var(--transition-standard),
+      background var(--transition-standard);
+
+    &:where(.--has-icon) {
+      display: inline-flex;
+      gap: var(--button-gap);
+    }
+
+    /* Sizes */
+    /* TODO: CSS variables for line-height do not produce desired height for buttons. */
+    /* These hard-coded line-height values should be replaced with CSS variables. */
+    &:where(.--size-sm) {
+      font-size: var(--font-size-3);
+      line-height: 16px;
+      padding: var(--button-padding-sm);
+    }
+
+    &:where(.--size-md) {
+      font-size: var(--font-size-4);
+      line-height: 24px;
+      padding: var(--button-padding-md);
+    }
+
+    &:where(.--size-lg) {
+      font-size: var(--font-size-5);
+      line-height: 32px;
+      padding: var(--button-padding-lg);
+    }
+
+    /* Primary */
+    &:where(.--variant-primary) {
+      --button-content-color: var(--button-primary-content-color);
+      background: var(--button-primary-color);
+      font-variation-settings: var(--button-primary-font-variation);
+
+      &:where(:active),
+      &:where(:hover) {
+        background: var(--button-primary-hover-color);
+      }
+
+      &:where(:focus-visible) {
+        box-shadow: var(--box-shadow-default);
+      }
+
+      &:where(.--is-disabled) {
+        --button-content-color: var(--color-text-light);
+        background: var(--color-background-medium);
+        cursor: not-allowed;
+      }
+    }
+
+    /* Secondary */
+    &:where(.--variant-secondary) {
+      --button-content-color: var(--button-secondary-color);
+      background: transparent;
+      border-color: var(--button-secondary-color);
+
+      &:where(:active),
+      &:where(:hover) {
+        --button-content-color: var(--color-text-inverted);
+        background: var(--button-secondary-hover-color);
+        border-color: var(--button-secondary-hover-color);
+      }
+
+      &:where(:focus-visible) {
+        box-shadow: var(--box-shadow-default);
+      }
+
+      &:where(.--is-disabled) {
+        --button-content-color: var(--color-text-light);
+        border-color: transparent;
+        background: var(--color-background-medium);
+        cursor: not-allowed;
+      }
+    }
+
+    /* Ghost */
+    &:where(.--variant-ghost) {
+      --button-content-color: var(--color-secondary);
+      background: var(--color-background-highlight);
+      border: var(--border-default);
       border-color: transparent;
-      background: var(--color-secondary-hover);
-    }
 
-    &:where(:focus-visible) {
-      box-shadow: var(--box-shadow-default);
-    }
+      &:where(:active) {
+        background: var(--color-secondary-hover);
+      }
 
-    &:where(.--is-disabled) {
-      --button-content-color: var(--color-text-light);
-      border-color: transparent;
-      background: var(--color-background-medium);
-      cursor: not-allowed;
-    }
-  }
-
-  /* Basic */
-  &:where(.--variant-basic) {
-    --button-content-color: var(--color-text);
-    border-color: transparent;
-    background: transparent;
-
-    &:where(:active) {
-      background: var(--color-background-light);
-    }
+      &:where(:hover) {
+        --button-content-color: var(--color-text-inverted);
+        border-color: transparent;
+        background: var(--color-secondary-hover);
+      }
 
-    &:where(:hover) {
-      background: var(--color-background-light);
-    }
+      &:where(:focus-visible) {
+        box-shadow: var(--box-shadow-default);
+      }
 
-    &:where(:focus-visible) {
-      box-shadow: var(--box-shadow-default);
+      &:where(.--is-disabled) {
+        --button-content-color: var(--color-text-light);
+        border-color: transparent;
+        background: var(--color-background-medium);
+        cursor: not-allowed;
+      }
     }
 
-    &:where(.--is-disabled) {
-      --button-content-color: var(--color-text-light);
-      background: var(--color-background-medium);
-      cursor: not-allowed;
-    }
-  }
+    /* Basic */
+    &:where(.--variant-basic) {
+      --button-content-color: var(--color-text);
+      border-color: transparent;
+      background: transparent;
 
-  /* Success */
-  &:where(.--is-success) {
-    background: var(--color-valid);
-    border-color: var(--color-valid);
-    color: transparent;
+      &:where(:active) {
+        background: var(--color-background-light);
+      }
 
-    /* Hide content, but keep same space occupied */
-    & > :not(.mobius-button__icon-wrapper) {
-      opacity: 0;
-      visibility: hidden;
-    }
+      &:where(:hover) {
+        background: var(--color-background-light);
+      }
 
-    /* Show succces/tick icon */
-    & [data-icon="tick"] path {
-      fill: var(--color-text-inverted);
-    }
+      &:where(:focus-visible) {
+        box-shadow: var(--box-shadow-default);
+      }
 
-    /* Link variant is the exception */
-    &:where(.--variant-link) [data-icon="tick"] path {
-      fill: var(--button-content-color);
+      &:where(.--is-disabled) {
+        --button-content-color: var(--color-text-light);
+        background: var(--color-background-medium);
+        cursor: not-allowed;
+      }
     }
 
-    &:where(:hover) {
-      background: var(--color-valid-hover);
-      border-color: var(--color-valid-hover);
-    }
-
-    &:where(:active) {
+    /* Success */
+    &:where(.--is-success) {
       background: var(--color-valid);
-    }
-
-    &:where(.--is-disabled) {
-      border-color: transparent;
+      border-color: var(--color-valid);
       color: transparent;
-      background: var(--color-background-medium);
-      cursor: not-allowed;
-    }
-  }
-
-  /* Loading */
-  &:where(.--is-loading) {
-    /* Hide text */
-    color: transparent;
 
-    /* Hide content, but keep same space occupied */
-    & > :not(.mobius-button__icon-wrapper) {
-      opacity: 0;
-      visibility: hidden;
-    }
+      /* Hide content, but keep same space occupied */
+      & > :not(.mobius-button__icon-wrapper) {
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      /* Show succces/tick icon */
+      & [data-icon="tick"] path {
+        fill: var(--color-text-inverted);
+      }
+
+      /* Link variant is the exception */
+      &:where(.--variant-link) [data-icon="tick"] path {
+        fill: var(--button-content-color);
+      }
+
+      &:where(:hover) {
+        background: var(--color-valid-hover);
+        border-color: var(--color-valid-hover);
+      }
+
+      &:where(:active) {
+        background: var(--color-valid);
+      }
+
+      &:where(.--is-disabled) {
+        border-color: transparent;
+        color: transparent;
+        background: var(--color-background-medium);
+        cursor: not-allowed;
+      }
+    }
+
+    /* Loading */
+    &:where(.--is-loading) {
+      /* Hide text */
+      color: transparent;
 
-    /* Show loading icon */
-    & [data-icon="loading"] path {
-      fill: var(--button-content-color);
+      /* Hide content, but keep same space occupied */
+      & > :not(.mobius-button__icon-wrapper) {
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      /* Show loading icon */
+      & [data-icon="loading"] path {
+        fill: var(--button-content-color);
+      }
+    }
+
+    /* Link */
+    &:where(.--variant-link) {
+      --button-content-color: var(--button-link-color, var(--color-secondary));
+      appearance: none;
+      padding: var(--size-xxs);
+      background: transparent;
+      font-weight: normal;
+      border-radius: var(
+        --button-link-border-radius,
+        var(--button-border-radius)
+      );
+
+      &:where(:not(.--is-loading)) {
+        text-decoration: underline;
+      }
+
+      &:hover,
+      &:active {
+        --button-content-color: var(
+          --button-link-hover-color,
+          var(--color-secondary-hover)
+        );
+        text-decoration: var(--button-link-hover-text-decoration, underline);
+        cursor: pointer;
+      }
+
+      &:focus-visible {
+        box-shadow: var(--button-link-box-shadow, var(--box-shadow-default));
+      }
+
+      &.--is-disabled {
+        --button-content-color: var(--color-text-light);
+        cursor: not-allowed;
+      }
     }
   }
 
-  /* Link */
-  &:where(.--variant-link) {
-    --button-content-color: var(--button-link-color, var(--color-secondary));
-    appearance: none;
-    padding: var(--size-xxs);
-    background: transparent;
-    font-weight: normal;
-    border-radius: var(--button-link-border-radius, var(--button-border-radius));
-
-    &:where(:not(.--is-loading)) {
-      text-decoration: underline;
-    }
-
-    &:hover,
-    &:active {
-      --button-content-color: var(--button-link-hover-color, var(--color-secondary-hover));
-      text-decoration: var(--button-link-hover-text-decoration, underline);
-      cursor: pointer;
-    }
-
-    &:focus-visible {
-      box-shadow: var(--button-link-box-shadow, var(--box-shadow-default));
-    }
-
-    &.--is-disabled {
-      --button-content-color: var(--color-text-light);
-      cursor: not-allowed;
-    }
+  .mobius-button__icon-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: grid;
+    place-items: center;
   }
 }
-
-.mobius-button__icon-wrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: grid;
-  place-items: center;
-}

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

@@ -1,9 +1,11 @@
-.button-example-with-theme.mobius-button {
-  background-color: darkred;
-}
+@layer atoms {
+  .button-example-with-theme.mobius-button {
+    background-color: darkred;
+  }
 
-.button-example-with-icon.mobius-button {
-  display: inline-flex;
-  gap: var(--size-xs);
-  align-items: center;
+  .button-example-with-icon.mobius-button {
+    display: inline-flex;
+    gap: var(--size-xs);
+    align-items: center;
+  }
 }