@kaizen/components 1.78.1 → 1.79.0

package/src/__next__/Button/Button.module.css

@@ -1,258 +1,260 @@
-.button {
-  /* RESET */
-  appearance: none;
-  background: transparent;
-  font: inherit;
-  margin: 0;
-  outline: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  --button-min-x-y: var(--spacing-40);
-  --button-border-width: var(--border-solid-border-width);
-  --button-padding-y: calc(var(--spacing-8) - var(--button-border-width));
-  --button-padding-x: calc(var(--spacing-16) - var(--button-border-width));
-
-  background-color: var(--button-bg-color, var(--color-blue-500));
-  border: var(--button-border-width) solid;
-  border-radius: var(--border-solid-border-radius);
-  border-color: var(--button-border-color, var(--color-blue-500));
-  box-sizing: border-box;
-  color: var(--button-text-color, var(--color-white));
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-align: start;
-  font-family: var(--button-font-family, var(--typography-paragraph-body-font-family));
-  font-weight: var(--button-font-weight, 500);
-  font-size: var(--button-font-size, 1rem);
-  line-height: var(--button-line-height, 1.5rem);
-  min-height: var(--button-min-x-y);
-  min-width: var(--button-min-x-y);
-  position: relative;
-  padding: var(--button-padding-y) var(--button-padding-x);
-
-  &[data-hovered] {
-    --button-bg-color: var(--color-blue-600);
-    --button-border-color: var(--color-blue-600);
+@layer kz-components {
+  .button {
+    /* RESET */
+    appearance: none;
+    background: transparent;
+    font: inherit;
+    margin: 0;
+    outline: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    --button-min-x-y: var(--spacing-40);
+    --button-border-width: var(--border-solid-border-width);
+    --button-padding-y: calc(var(--spacing-8) - var(--button-border-width));
+    --button-padding-x: calc(var(--spacing-16) - var(--button-border-width));
+
+    background-color: var(--button-bg-color, var(--color-blue-500));
+    border: var(--button-border-width) solid;
+    border-radius: var(--border-solid-border-radius);
+    border-color: var(--button-border-color, var(--color-blue-500));
+    box-sizing: border-box;
+    color: var(--button-text-color, var(--color-white));
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: start;
+    font-family: var(--button-font-family, var(--typography-paragraph-body-font-family));
+    font-weight: var(--button-font-weight, 500);
+    font-size: var(--button-font-size, 1rem);
+    line-height: var(--button-line-height, 1.5rem);
+    min-height: var(--button-min-x-y);
+    min-width: var(--button-min-x-y);
+    position: relative;
+    padding: var(--button-padding-y) var(--button-padding-x);
+
+    &[data-hovered] {
+      --button-bg-color: var(--color-blue-600);
+      --button-border-color: var(--color-blue-600);
+    }
+
+    &[data-pressed] {
+      --button-bg-color: var(--color-blue-700);
+      --button-border-color: var(--color-blue-700);
+    }
+
+    &[data-pending] {
+      --button-bg-color: var(--color-blue-700);
+      --button-border-color: var(--color-blue-700);
+    }
+
+    &.isDisabled {
+      --button-bg-color: var(--color-gray-400);
+      --button-border-color: var(--color-gray-400);
+      --button-text-color: var(--color-white);
+    }
+
+    &[data-focus-visible] {
+      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+        var(--color-blue-500);
+      outline-offset: 1px;
+    }
   }
 
-  &[data-pressed] {
-    --button-bg-color: var(--color-blue-700);
-    --button-border-color: var(--color-blue-700);
+  .fullWidth {
+    width: 100%;
   }
 
-  &[data-pending] {
-    --button-bg-color: var(--color-blue-700);
-    --button-border-color: var(--color-blue-700);
+  .small {
+    --button-font-size: 0.75rem;
+    --button-line-height: 1rem;
+    --button-min-x-y: var(--spacing-32);
+    --icon-size: 16;
   }
 
-  &.isDisabled {
-    --button-bg-color: var(--color-gray-400);
-    --button-border-color: var(--color-gray-400);
-    --button-text-color: var(--color-white);
-  }
-
-  &[data-focus-visible] {
-    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-      var(--color-blue-500);
-    outline-offset: 1px;
+  .medium {
+    --button-padding-x: calc(var(--spacing-20) - var(--button-border-width));
+    --button-padding-y: calc(var(--spacing-8) - var(--button-border-width));
+    --button-min-x-y: var(--spacing-40);
+    --icon-size: 24;
   }
-}
-
-.fullWidth {
-  width: 100%;
-}
-
-.small {
-  --button-font-size: 0.75rem;
-  --button-line-height: 1rem;
-  --button-min-x-y: var(--spacing-32);
-  --icon-size: 16;
-}
-
-.medium {
-  --button-padding-x: calc(var(--spacing-20) - var(--button-border-width));
-  --button-padding-y: calc(var(--spacing-8) - var(--button-border-width));
-  --button-min-x-y: var(--spacing-40);
-  --icon-size: 24;
-}
-
-.large {
-  --button-padding-x: calc(var(--spacing-24) - var(--button-border-width));
-  --button-padding-y: calc(var(--spacing-12) - var(--button-border-width));
-  --button-min-x-y: var(--spacing-48);
-  --icon-size: 24;
-}
-
-.smallIconButton,
-.mediumIconButton {
-  --button-padding-x: calc(var(--spacing-8) - var(--button-border-width));
-  --button-padding-y: calc(var(--spacing-8) - var(--button-border-width));
-}
-
-.largeIconButton {
-  --button-padding-x: calc(var(--spacing-12) - var(--button-border-width));
-  --button-padding-y: calc(var(--spacing-12) - var(--button-border-width));
-}
-
-.secondary {
-  --button-bg-color: var(--color-white);
-  --button-border-color: var(--color-gray-500);
-  --button-text-color: var(--color-purple-800);
 
-  &[data-hovered] {
-    --button-bg-color: var(--color-gray-200);
-    --button-border-color: var(--color-gray-600);
+  .large {
+    --button-padding-x: calc(var(--spacing-24) - var(--button-border-width));
+    --button-padding-y: calc(var(--spacing-12) - var(--button-border-width));
+    --button-min-x-y: var(--spacing-48);
+    --icon-size: 24;
   }
 
-  &[data-pressed] {
-    --button-bg-color: var(--color-gray-300);
-    --button-border-color: var(--color-black);
+  .smallIconButton,
+  .mediumIconButton {
+    --button-padding-x: calc(var(--spacing-8) - var(--button-border-width));
+    --button-padding-y: calc(var(--spacing-8) - var(--button-border-width));
   }
 
-  &[data-pending] {
-    --button-bg-color: var(--color-gray-300);
-    --button-border-color: var(--color-black);
+  .largeIconButton {
+    --button-padding-x: calc(var(--spacing-12) - var(--button-border-width));
+    --button-padding-y: calc(var(--spacing-12) - var(--button-border-width));
   }
 
-  &.isDisabled {
+  .secondary {
     --button-bg-color: var(--color-white);
-    --button-border-color: var(--color-gray-400);
-    --button-text-color: var(--color-gray-400);
-  }
-}
-
-.tertiary {
-  --button-bg-color: transparent;
-  --button-border-color: transparent;
-  --button-text-color: var(--color-purple-800);
-
-  &[data-hovered],
-  &[data-pressed],
-  &[data-pending] {
-    --button-text-color: var(--color-blue-500);
-  }
-
-  &[data-hovered] {
-    --button-bg-color: var(--color-blue-200);
-    --button-border-color: var(--color-blue-200);
+    --button-border-color: var(--color-gray-500);
+    --button-text-color: var(--color-purple-800);
+
+    &[data-hovered] {
+      --button-bg-color: var(--color-gray-200);
+      --button-border-color: var(--color-gray-600);
+    }
+
+    &[data-pressed] {
+      --button-bg-color: var(--color-gray-300);
+      --button-border-color: var(--color-black);
+    }
+
+    &[data-pending] {
+      --button-bg-color: var(--color-gray-300);
+      --button-border-color: var(--color-black);
+    }
+
+    &.isDisabled {
+      --button-bg-color: var(--color-white);
+      --button-border-color: var(--color-gray-400);
+      --button-text-color: var(--color-gray-400);
+    }
   }
 
-  &[data-pressed] {
-    --button-bg-color: var(--color-blue-100);
-    --button-border-color: var(--color-blue-100);
-  }
-
-  &[data-pending] {
-    --button-bg-color: var(--color-blue-100);
-    --button-border-color: var(--color-blue-100);
-  }
-
-  &.isDisabled {
+  .tertiary {
     --button-bg-color: transparent;
     --button-border-color: transparent;
-    --button-text-color: var(--color-gray-400);
-  }
-}
-
-.primaryReversed,
-.secondaryReversed,
-.tertiaryReversed {
-  &[data-focus-visible] {
-    outline-color: var(--color-blue-300);
-  }
-}
-
-.primaryReversed {
-  --button-bg-color: var(--color-white);
-  --button-border-color: var(--color-white);
-  --button-text-color: var(--color-purple-800);
-
-  &[data-hovered] {
-    --button-bg-color: var(--color-gray-200);
-    --button-border-color: var(--color-gray-200);
+    --button-text-color: var(--color-purple-800);
+
+    &[data-hovered],
+    &[data-pressed],
+    &[data-pending] {
+      --button-text-color: var(--color-blue-500);
+    }
+
+    &[data-hovered] {
+      --button-bg-color: var(--color-blue-200);
+      --button-border-color: var(--color-blue-200);
+    }
+
+    &[data-pressed] {
+      --button-bg-color: var(--color-blue-100);
+      --button-border-color: var(--color-blue-100);
+    }
+
+    &[data-pending] {
+      --button-bg-color: var(--color-blue-100);
+      --button-border-color: var(--color-blue-100);
+    }
+
+    &.isDisabled {
+      --button-bg-color: transparent;
+      --button-border-color: transparent;
+      --button-text-color: var(--color-gray-400);
+    }
   }
 
-  &[data-pressed] {
-    --button-bg-color: var(--color-gray-300);
-    --button-border-color: var(--color-gray-300);
+  .primaryReversed,
+  .secondaryReversed,
+  .tertiaryReversed {
+    &[data-focus-visible] {
+      outline-color: var(--color-blue-300);
+    }
   }
 
-  &[data-pending] {
+  .primaryReversed {
     --button-bg-color: var(--color-white);
     --button-border-color: var(--color-white);
+    --button-text-color: var(--color-purple-800);
+
+    &[data-hovered] {
+      --button-bg-color: var(--color-gray-200);
+      --button-border-color: var(--color-gray-200);
+    }
+
+    &[data-pressed] {
+      --button-bg-color: var(--color-gray-300);
+      --button-border-color: var(--color-gray-300);
+    }
+
+    &[data-pending] {
+      --button-bg-color: var(--color-white);
+      --button-border-color: var(--color-white);
+    }
+
+    &.isDisabled {
+      --button-bg-color: rgb(var(--color-white-rgb), 0.2);
+      --button-border-color: transparent;
+      --button-text-color: rgb(var(--color-purple-800-rgb), 0.7);
+    }
   }
 
-  &.isDisabled {
-    --button-bg-color: rgb(var(--color-white-rgb), 0.2);
-    --button-border-color: transparent;
-    --button-text-color: rgb(var(--color-purple-800-rgb), 0.7);
-  }
-}
-
-.secondaryReversed {
-  --button-bg-color: transparent;
-  --button-border-color: var(--color-white);
-  --button-text-color: var(--color-white);
-
-  &[data-hovered] {
-    --button-bg-color: rgb(var(--color-white-rgb), 0.2);
-    --button-border-color: var(--color-white);
-  }
-
-  &[data-pressed] {
-    --button-bg-color: rgb(var(--color-white-rgb), 0.1);
+  .secondaryReversed {
+    --button-bg-color: transparent;
     --button-border-color: var(--color-white);
-  }
+    --button-text-color: var(--color-white);
 
-  &[data-pending] {
-    --button-bg-color: rgb(var(--color-white-rgb), 0.1);
-    --button-border-color: var(--color-white);
+    &[data-hovered] {
+      --button-bg-color: rgb(var(--color-white-rgb), 0.2);
+      --button-border-color: var(--color-white);
+    }
+
+    &[data-pressed] {
+      --button-bg-color: rgb(var(--color-white-rgb), 0.1);
+      --button-border-color: var(--color-white);
+    }
+
+    &[data-pending] {
+      --button-bg-color: rgb(var(--color-white-rgb), 0.1);
+      --button-border-color: var(--color-white);
+    }
+
+    &.isDisabled {
+      --button-bg-color: transparent;
+      --button-border-color: rgb(var(--color-white), 0.2);
+      --button-text-color: rgb(var(--color-white-rgb), 0.2);
+    }
   }
 
-  &.isDisabled {
+  .tertiaryReversed {
     --button-bg-color: transparent;
-    --button-border-color: rgb(var(--color-white), 0.2);
-    --button-text-color: rgb(var(--color-white-rgb), 0.2);
-  }
-}
-
-.tertiaryReversed {
-  --button-bg-color: transparent;
-  --button-border-color: transparent;
-  --button-text-color: var(--color-white);
-
-  &[data-hovered] {
-    --button-bg-color: rgb(var(--color-white-rgb), 0.2);
     --button-border-color: transparent;
-  }
+    --button-text-color: var(--color-white);
 
-  &[data-pressed] {
-    --button-bg-color: rgb(var(--color-white-rgb), 0.1);
-    --button-border-color: transparent;
+    &[data-hovered] {
+      --button-bg-color: rgb(var(--color-white-rgb), 0.2);
+      --button-border-color: transparent;
+    }
+
+    &[data-pressed] {
+      --button-bg-color: rgb(var(--color-white-rgb), 0.1);
+      --button-border-color: transparent;
+    }
+
+    &[data-pending] {
+      --button-bg-color: rgb(var(--color-white-rgb), 0.1);
+      --button-border-color: transparent;
+    }
+
+    &.isDisabled {
+      --button-bg-color: transparent;
+      --button-border-color: transparent;
+      --button-text-color: rgb(var(--color-white-rgb), 0.2);
+    }
   }
 
-  &[data-pending] {
-    --button-bg-color: rgb(var(--color-white-rgb), 0.1);
-    --button-border-color: transparent;
+  .hideContentWidth {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    visibility: hidden;
   }
 
-  &.isDisabled {
-    --button-bg-color: transparent;
-    --button-border-color: transparent;
-    --button-text-color: rgb(var(--color-white-rgb), 0.2);
+  .retainContentWidth {
+    visibility: hidden;
   }
 }
-
-.hideContentWidth {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  visibility: hidden;
-}
-
-.retainContentWidth {
-  visibility: hidden;
-}

package/src/__next__/Button/subcomponents/ButtonContent/ButtonContent.module.css

@@ -1,19 +1,21 @@
-.buttonContent {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--button-icon-gap, var(--spacing-6));
-}
+@layer kz-components {
+  .buttonContent {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--button-icon-gap, var(--spacing-6));
+  }
 
-.large {
-  --button-icon-gap: var(--spacing-8);
-}
+  .large {
+    --button-icon-gap: var(--spacing-8);
+  }
 
-.buttonLabel {
-  display: inline-flex;
-  align-items: center;
-}
+  .buttonLabel {
+    display: inline-flex;
+    align-items: center;
+  }
 
-.buttonIcon {
-  display: inline-flex;
-  align-items: center;
+  .buttonIcon {
+    display: inline-flex;
+    align-items: center;
+  }
 }

package/src/__next__/Button/subcomponents/PendingContent/PendingContent.module.css

@@ -1,16 +1,18 @@
-.pendingContent {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--button-pending-content-gap, var(--spacing-6));
-}
+@layer kz-components {
+  .pendingContent {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--button-pending-content-gap, var(--spacing-6));
+  }
 
-.large {
-  --button-pending-content-gap: var(--spacing-8);
-}
+  .large {
+    --button-pending-content-gap: var(--spacing-8);
+  }
 
-.centerSpinner {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
+  .centerSpinner {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
 }

package/src/__next__/Icon/Icon.module.css

@@ -1,49 +1,51 @@
-/*
+@layer kz-components {
+  /*
  * This is taken from the Material Symbols CDN
  * font-weight & font-size removed as overridden in .icon
  */
-.material-symbols-outlined {
-  font-family: 'Material Symbols Outlined';
-  font-style: normal;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}
+  .material-symbols-outlined {
+    font-family: 'Material Symbols Outlined';
+    font-style: normal;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+  }
 
-.icon {
-  font-size: calc(1px * var(--icon-size, 20));
-  font-weight: var(--icon-font-weight, 400);
-  vertical-align: var(--icon-vertical-align);
+  .icon {
+    font-size: calc(1px * var(--icon-size, 20));
+    font-weight: var(--icon-font-weight, 400);
+    vertical-align: var(--icon-vertical-align);
 
-  /* Must use vars otherwise whole attribute must be set again */
-  font-variation-settings:
-    'FILL' var(--icon-fill, 0),
-    'GRAD' var(--icon-grade, 0),
-    'opsz' var(--icon-optical-size, var(--icon-size, 20));
-}
+    /* Must use vars otherwise whole attribute must be set again */
+    font-variation-settings:
+      'FILL' var(--icon-fill, 0),
+      'GRAD' var(--icon-grade, 0),
+      'opsz' var(--icon-optical-size, var(--icon-size, 20));
+  }
 
-.filled {
-  --icon-fill: 1;
-}
+  .filled {
+    --icon-fill: 1;
+  }
 
-[dir='rtl'] .shouldMirrorInRTL {
-  transform: scale(-1, 1);
-}
+  [dir='rtl'] .shouldMirrorInRTL {
+    transform: scale(-1, 1);
+  }
 
-[dir='rtl'] .iconLTR {
-  display: none;
-}
+  [dir='rtl'] .iconLTR {
+    display: none;
+  }
 
-.iconRTL {
-  display: none;
-}
+  .iconRTL {
+    display: none;
+  }
 
-[dir='rtl'] .iconRTL {
-  display: inherit;
+  [dir='rtl'] .iconRTL {
+    display: inherit;
+  }
 }

package/src/__next__/Icon/_docs/Icon.docs.module.css

@@ -1,15 +1,17 @@
-.interactiveIcon {
-  position: relative;
-  background: none;
-  padding: 0;
-  color: var(--color-blue-500);
+@layer kz-components {
+  .interactiveIcon {
+    position: relative;
+    background: none;
+    padding: 0;
+    color: var(--color-blue-500);
 
-  &:hover {
-    color: var(--color-blue-400);
+    &:hover {
+      color: var(--color-blue-400);
+    }
   }
-}
 
-.interactiveIcon:focus {
-  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-    var(--color-blue-500);
+  .interactiveIcon:focus {
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+  }
 }