@kaizen/components 1.78.1 → 1.79.0

package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/ToggleIconButton.module.scss

@@ -2,117 +2,119 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '~@kaizen/design-tokens/sass/color';
 
-.button {
-  border: none;
-  background-color: $color-white;
-  width: 3rem;
-  height: 3rem;
-  border-radius: $border-solid-border-radius;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  transition: background-color $animation-duration-immediate;
-
-  &:focus {
-    outline: none;
+@layer kz-components {
+  .button {
+    border: none;
+    background-color: $color-white;
+    width: 3rem;
+    height: 3rem;
+    border-radius: $border-solid-border-radius;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    transition: background-color $animation-duration-immediate;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible::after {
+      $focus-ring-offset: 3px;
+
+      content: '';
+      position: absolute;
+      background: transparent;
+      border-radius: $border-focus-ring-border-radius;
+      border-width: $border-focus-ring-border-width;
+      border-style: $border-focus-ring-border-style;
+      border-color: $color-blue-500;
+      inset: calc(-1 * #{$focus-ring-offset});
+    }
   }
 
-  &:focus-visible::after {
-    $focus-ring-offset: 3px;
-
-    content: '';
-    position: absolute;
-    background: transparent;
-    border-radius: $border-focus-ring-border-radius;
-    border-width: $border-focus-ring-border-width;
-    border-style: $border-focus-ring-border-style;
-    border-color: $color-blue-500;
-    inset: calc(-1 * #{$focus-ring-offset});
-  }
-}
+  .default {
+    background-color: $color-white;
+    color: $color-purple-800;
 
-.default {
-  background-color: $color-white;
-  color: $color-purple-800;
+    &:hover,
+    &:focus-visible {
+      background-color: $color-gray-200;
+    }
 
-  &:hover,
-  &:focus-visible {
-    background-color: $color-gray-200;
+    &.active {
+      background-color: $color-gray-300;
+      color: $color-purple-800;
+    }
   }
 
-  &.active {
-    background-color: $color-gray-300;
-    color: $color-purple-800;
-  }
-}
+  .secondary {
+    background-color: $color-white;
+    color: $color-blue-500;
 
-.secondary {
-  background-color: $color-white;
-  color: $color-blue-500;
+    &:hover,
+    &:focus-visible {
+      background-color: $color-blue-100;
+    }
 
-  &:hover,
-  &:focus-visible {
-    background-color: $color-blue-100;
+    &.active {
+      background-color: $color-blue-200;
+    }
   }
 
-  &.active {
-    background-color: $color-blue-200;
-  }
-}
+  .primary {
+    background-color: $color-blue-500;
+    color: $color-white;
 
-.primary {
-  background-color: $color-blue-500;
-  color: $color-white;
+    &:hover,
+    &:focus-visible {
+      background-color: $color-blue-600;
+    }
 
-  &:hover,
-  &:focus-visible {
-    background-color: $color-blue-600;
+    &.active {
+      background-color: $color-blue-700;
+    }
   }
 
-  &.active {
-    background-color: $color-blue-700;
-  }
-}
+  .destructive {
+    background-color: $color-red-500;
+    color: $color-white;
 
-.destructive {
-  background-color: $color-red-500;
-  color: $color-white;
+    &:hover,
+    &:focus-visible {
+      background-color: $color-red-600;
+    }
 
-  &:hover,
-  &:focus-visible {
-    background-color: $color-red-600;
+    &.active {
+      background-color: $color-red-700;
+    }
   }
 
-  &.active {
-    background-color: $color-red-700;
-  }
-}
+  .secondary-destructive {
+    background-color: $color-white;
+    color: $color-red-600;
 
-.secondary-destructive {
-  background-color: $color-white;
-  color: $color-red-600;
+    &:hover,
+    &:focus-visible {
+      background-color: $color-red-100;
+    }
 
-  &:hover,
-  &:focus-visible {
-    background-color: $color-red-100;
+    &.active {
+      background-color: $color-red-200;
+    }
   }
 
-  &.active {
-    background-color: $color-red-200;
-  }
-}
-
-.disabled {
-  opacity: 30%;
-  pointer-events: none;
-
-  &:focus-visible::after {
-    color: rgba($color-purple-800-rgb, 0.3);
-    outline-offset: -2px;
-    background-color: transparent;
-    border-color: transparent;
-    opacity: 100%;
-    outline: $color-purple-800 $border-solid-border-style $border-focus-ring-border-width;
+  .disabled {
+    opacity: 30%;
+    pointer-events: none;
+
+    &:focus-visible::after {
+      color: rgba($color-purple-800-rgb, 0.3);
+      outline-offset: -2px;
+      background-color: transparent;
+      border-color: transparent;
+      opacity: 100%;
+      outline: $color-purple-800 $border-solid-border-style $border-focus-ring-border-width;
+    }
   }
 }

package/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/Toolbar.module.scss

@@ -1,6 +1,8 @@
 @import '~@kaizen/design-tokens/sass/color';
 
-.toolbar {
-  display: block;
-  border-bottom: 2px solid $color-gray-500;
+@layer kz-components {
+  .toolbar {
+    display: block;
+    border-bottom: 2px solid $color-gray-500;
+  }
 }

package/src/RichTextEditor/RichTextEditor/subcomponents/ToolbarSection/ToolbarSection.module.scss

@@ -1,15 +1,17 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.toolbarSection {
-  display: inline-flex;
-  align-items: center;
-  gap: $spacing-xs;
-  margin: $spacing-xs 0;
-  padding: 0 $spacing-xs;
-  flex-wrap: wrap;
-}
+@layer kz-components {
+  .toolbarSection {
+    display: inline-flex;
+    align-items: center;
+    gap: $spacing-xs;
+    margin: $spacing-xs 0;
+    padding: 0 $spacing-xs;
+    flex-wrap: wrap;
+  }
 
-.toolbarSection + .toolbarSection {
-  border-inline-start: 1px solid rgba($color-gray-600-rgb, 0.1);
+  .toolbarSection + .toolbarSection {
+    border-inline-start: 1px solid rgba($color-gray-600-rgb, 0.1);
+  }
 }

package/src/RichTextEditor/_mixins.scss

@@ -10,7 +10,7 @@
   letter-spacing: $typography-paragraph-body-letter-spacing;
   position: relative;
   /* stylelint-disable-next-line declaration-no-important */
-  white-space: pre-wrap !important; // Override unlayered TipTap styles from within components layer
+  white-space: pre-wrap !important; // Override unlayered TipTap styles from within kz-components layer
   box-sizing: content-box;
   color: $color-purple-800;
 

package/src/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.module.scss

@@ -1,5 +1,7 @@
-.validationErrorMessage {
-  ul {
-    margin-bottom: 0;
+@layer kz-components {
+  .validationErrorMessage {
+    ul {
+      margin-bottom: 0;
+    }
   }
 }

package/src/RichTextEditor/utils/plugins/LinkManager/components/LinkPopover/LinkPopover.module.scss

@@ -1,28 +1,30 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.popoverContent {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+@layer kz-components {
+  .popoverContent {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-.popoverLinkContainer {
-  padding-inline: $spacing-8 $spacing-12;
-}
+  .popoverLinkContainer {
+    padding-inline: $spacing-8 $spacing-12;
+  }
 
-.popoverLink {
-  max-width: 300px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  .popoverLink {
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-.paragraphFlex {
-  display: inline-flex;
-}
+  .paragraphFlex {
+    display: inline-flex;
+  }
 
-.popoverActions {
-  padding-inline: $spacing-4 $spacing-4;
-  border-left: 1px solid rgba($color-gray-600-rgb, 0.1);
+  .popoverActions {
+    padding-inline: $spacing-4 $spacing-4;
+    border-left: 1px solid rgba($color-gray-600-rgb, 0.1);
+  }
 }

package/src/SearchField/SearchField.module.scss

@@ -1,6 +1,8 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.label {
-  display: block;
-  margin-bottom: $spacing-xs; // @note: add gap between label and input
+@layer kz-components {
+  .label {
+    display: block;
+    margin-bottom: $spacing-xs; // @note: add gap between label and input
+  }
 }

package/src/Select/Select.module.scss

@@ -3,6 +3,23 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '~@kaizen/design-tokens/sass/color';
 
+/*
+  NOTE: Select is NOT in @layer kz-components
+
+  Because the styles in this module need to override the un-layered styles
+  provided by react-select, we do not wrap them in @layer kz-components the way
+  we do all other Kaizen components.
+
+  This means that consuming apps will not be able to override these styles with
+  Tailwind v4+ utility styles, which are generated in @layer utilities.
+
+  If we ever need to get these styles into a layer, we may need to update our
+  use of React Select to disable its styles and replace them with a layered
+  version of our own, or perhaps use something like
+  https://github.com/DefinedNet/postcss-assign-layer to assign the components
+  layer to the React Select styles.
+*/
+
 // Should match the values for the Input component
 $input-height: 48px;
 $input-placeholder-opacity: 0.7;

package/src/Skirt/Skirt.module.scss

@@ -3,30 +3,32 @@
 $dt-color-background-color-default: $color-purple-600;
 $dt-color-background-color-education: $color-blue-100;
 
-.container {
-  position: relative;
-}
+@layer kz-components {
+  .container {
+    position: relative;
+  }
 
-// Actual height is determined in JavaScript
-.underlay {
-  box-sizing: content-box;
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-}
+  // Actual height is determined in JavaScript
+  .underlay {
+    box-sizing: content-box;
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+  }
 
-.defaultVariant {
-  background-color: $dt-color-background-color-default;
-}
+  .defaultVariant {
+    background-color: $dt-color-background-color-default;
+  }
 
-.educationVariant {
-  background-color: $dt-color-background-color-education;
-}
+  .educationVariant {
+    background-color: $dt-color-background-color-education;
+  }
 
-.content {
-  position: relative;
-  z-index: 2;
+  .content {
+    position: relative;
+    z-index: 2;
+  }
 }

package/src/Skirt/subcomponents/SkirtCard/SkirtCard.module.scss

@@ -1,17 +1,19 @@
 @import '~@kaizen/design-tokens/sass/layout';
 @import '../../../Content/variables';
 
-.wrapper {
-  @media (max-width: $layout-breakpoints-large) {
-    margin-left: $content-margin-width-on-medium-and-small * -1;
-    margin-right: $content-margin-width-on-medium-and-small * -1;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
+@layer kz-components {
+  .wrapper {
+    @media (max-width: $layout-breakpoints-large) {
+      margin-left: $content-margin-width-on-medium-and-small * -1;
+      margin-right: $content-margin-width-on-medium-and-small * -1;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
 
-  @media (max-width: $layout-breakpoints-medium) {
-    border-radius: 0;
-    margin-left: $content-margin-width-on-medium-and-small * -1;
-    margin-right: $content-margin-width-on-medium-and-small * -1;
+    @media (max-width: $layout-breakpoints-medium) {
+      border-radius: 0;
+      margin-left: $content-margin-width-on-medium-and-small * -1;
+      margin-right: $content-margin-width-on-medium-and-small * -1;
+    }
   }
 }

package/src/Slider/Slider.module.scss

@@ -2,45 +2,47 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/layout';
 
-.wrapper {
-  display: flex;
-  flex-direction: column;
-}
+@layer kz-components {
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+  }
 
-.labelWrapper {
-  margin-bottom: $spacing-sm;
-}
+  .labelWrapper {
+    margin-bottom: $spacing-sm;
+  }
 
-.label {
-  margin-bottom: $spacing-4;
-}
+  .label {
+    margin-bottom: $spacing-4;
+  }
 
-@media (min-width: $layout-breakpoints-medium) {
-  .labelInline {
-    &.wrapper {
-      align-items: center;
-      flex-direction: row;
-    }
+  @media (min-width: $layout-breakpoints-medium) {
+    .labelInline {
+      &.wrapper {
+        align-items: center;
+        flex-direction: row;
+      }
 
-    .labelWrapper {
-      flex: 1;
-    }
+      .labelWrapper {
+        flex: 1;
+      }
 
-    .inputWrapper {
-      flex-basis: 50%;
+      .inputWrapper {
+        flex-basis: 50%;
+      }
     }
   }
-}
 
-.descriptionDisabled {
-  opacity: 30%;
-}
+  .descriptionDisabled {
+    opacity: 30%;
+  }
 
-.readOnlyMessage {
-  text-align: center;
-  font-family: $typography-paragraph-small-font-family;
-  font-size: $typography-paragraph-small-font-size;
-  font-weight: $typography-paragraph-bold-font-weight;
-  line-height: $typography-paragraph-body-line-height;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
+  .readOnlyMessage {
+    text-align: center;
+    font-family: $typography-paragraph-small-font-family;
+    font-size: $typography-paragraph-small-font-size;
+    font-weight: $typography-paragraph-bold-font-weight;
+    line-height: $typography-paragraph-body-line-height;
+    letter-spacing: $typography-paragraph-body-letter-spacing;
+  }
 }

package/src/SplitButton/SplitButton.module.scss

@@ -1,4 +1,6 @@
-.splitButton {
-  display: inline-flex;
-  align-items: center;
+@layer kz-components {
+  .splitButton {
+    display: inline-flex;
+    align-items: center;
+  }
 }

package/src/SplitButton/subcomponents/ActionButton/ActionButton.module.scss

@@ -1,8 +1,10 @@
 @import '~@kaizen/design-tokens/sass/border';
 
-.actionButton {
-  border-start-start-radius: $border-solid-border-radius;
-  border-end-start-radius: $border-solid-border-radius;
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
+@layer kz-components {
+  .actionButton {
+    border-start-start-radius: $border-solid-border-radius;
+    border-end-start-radius: $border-solid-border-radius;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
 }