@kaizen/components 1.78.1 → 1.79.0

package/src/Card/Card.module.css

@@ -1,90 +1,92 @@
-.wrapper {
-  color: var(--color-purple-800);
-  border: var(--border-width-1) solid var(--card-border-color);
-  background-color: var(--card-background-color);
-  border-radius: var(--border-solid-border-radius);
-  box-shadow: var(--card-box-shadow);
-
-  --card-border-color: var(--color-gray-500);
-  --card-background-color: var(--color-white);
-  --card-box-shadow: var(--shadow-small-box-shadow);
-}
-
-.elevated {
-  --card-box-shadow: var(--shadow-large-box-shadow);
-}
-
-.blue {
-  --card-background-color: var(--color-blue-100);
-  --card-border-color: var(--color-blue-400);
-}
-
-.gray {
-  --card-background-color: var(--color-gray-200);
-  --card-border-color: var(--color-gray-500);
-}
-
-.green {
-  --card-background-color: var(--color-green-100);
-  --card-border-color: var(--color-green-500);
-}
-
-.orange {
-  --card-background-color: var(--color-orange-100);
-  --card-border-color: var(--color-orange-600);
-}
-
-.purple {
-  --card-background-color: var(--color-purple-100);
-  --card-border-color: var(--color-purple-400);
-}
-
-.red {
-  --card-background-color: var(--color-red-100);
-  --card-border-color: var(--color-red-500);
-}
-
-.white {
-  --card-background-color: var(--color-white);
-  --card-border-color: var(--color-gray-500);
-}
-
-.yellow {
-  --card-background-color: var(--color-yellow-100);
-  --card-border-color: var(--color-yellow-700);
-}
-
-.default {
-  border-color: var(--color-gray-500);
-  background-color: var(--color-white);
-}
-
-.informative {
-  border-color: var(--color-blue-400);
-  background-color: var(--color-blue-100);
-}
-
-.positive {
-  border-color: var(--color-green-500);
-  background-color: var(--color-green-100);
-}
-
-.cautionary {
-  border-color: var(--color-yellow-700);
-  background-color: var(--color-yellow-100);
-}
-
-.destructive {
-  border-color: var(--color-red-500);
-  background-color: var(--color-red-100);
-}
-
-.assertive {
-  border-color: var(--color-orange-600);
-  background-color: var(--color-orange-100);
-}
-
-.highlight {
-  border-color: var(--color-purple-400);
-  background-color: var(--color-purple-100);
+@layer kz-components {
+  .wrapper {
+    color: var(--color-purple-800);
+    border: var(--border-width-1) solid var(--card-border-color);
+    background-color: var(--card-background-color);
+    border-radius: var(--border-solid-border-radius);
+    box-shadow: var(--card-box-shadow);
+
+    --card-border-color: var(--color-gray-500);
+    --card-background-color: var(--color-white);
+    --card-box-shadow: var(--shadow-small-box-shadow);
+  }
+
+  .elevated {
+    --card-box-shadow: var(--shadow-large-box-shadow);
+  }
+
+  .blue {
+    --card-background-color: var(--color-blue-100);
+    --card-border-color: var(--color-blue-400);
+  }
+
+  .gray {
+    --card-background-color: var(--color-gray-200);
+    --card-border-color: var(--color-gray-500);
+  }
+
+  .green {
+    --card-background-color: var(--color-green-100);
+    --card-border-color: var(--color-green-500);
+  }
+
+  .orange {
+    --card-background-color: var(--color-orange-100);
+    --card-border-color: var(--color-orange-600);
+  }
+
+  .purple {
+    --card-background-color: var(--color-purple-100);
+    --card-border-color: var(--color-purple-400);
+  }
+
+  .red {
+    --card-background-color: var(--color-red-100);
+    --card-border-color: var(--color-red-500);
+  }
+
+  .white {
+    --card-background-color: var(--color-white);
+    --card-border-color: var(--color-gray-500);
+  }
+
+  .yellow {
+    --card-background-color: var(--color-yellow-100);
+    --card-border-color: var(--color-yellow-700);
+  }
+
+  .default {
+    border-color: var(--color-gray-500);
+    background-color: var(--color-white);
+  }
+
+  .informative {
+    border-color: var(--color-blue-400);
+    background-color: var(--color-blue-100);
+  }
+
+  .positive {
+    border-color: var(--color-green-500);
+    background-color: var(--color-green-100);
+  }
+
+  .cautionary {
+    border-color: var(--color-yellow-700);
+    background-color: var(--color-yellow-100);
+  }
+
+  .destructive {
+    border-color: var(--color-red-500);
+    background-color: var(--color-red-100);
+  }
+
+  .assertive {
+    border-color: var(--color-orange-600);
+    background-color: var(--color-orange-100);
+  }
+
+  .highlight {
+    border-color: var(--color-purple-400);
+    background-color: var(--color-purple-100);
+  }
 }

package/src/Checkbox/Checkbox/Checkbox.module.scss

@@ -3,106 +3,108 @@
 @import '../../../styles/utils/forms';
 @import '../../../styles/utils/form-variables';
 
-$checkbox-size: 24px;
-$focus-ring-offset: 2px;
+@layer kz-components {
+  $checkbox-size: 24px;
+  $focus-ring-offset: 2px;
 
-$dt-color-checkbox-background-color-checked: $color-gray-500;
+  $dt-color-checkbox-background-color-checked: $color-gray-500;
 
-// override bootstrap styles
-.checkbox.checkbox {
-  width: $checkbox-size;
-  height: $checkbox-size;
-  margin: 0;
+  // override bootstrap styles
+  .checkbox.checkbox {
+    width: $checkbox-size;
+    height: $checkbox-size;
+    margin: 0;
 
-  @include form-input-visually-hidden;
-}
-
-.checkbox:disabled {
-  pointer-events: none;
-}
-
-.icon {
-  position: absolute;
-  color: $color-white;
-}
-
-.icon.reversed {
-  color: $dt-color-form-color-icon-reversed;
-}
-
-.box {
-  display: block;
-  position: relative;
-  pointer-events: none;
-  background: $color-white;
-  height: $checkbox-size;
-  width: $checkbox-size;
-  top: 0;
-  border: $border-solid-border-width $border-solid-border-style $dt-color-form-border-color;
-  border-radius: $border-solid-border-radius;
-  box-sizing: border-box;
-  background-color: white;
-  border-color: $dt-color-form-border-color;
-
-  .checkbox:hover + & {
-    border-color: $dt-color-form-border-color-hover;
+    @include form-input-visually-hidden;
   }
 
-  .checkbox:checked + &,
-  .checkbox:indeterminate + & {
-    background: $dt-color-checkbox-background-color-checked;
-    background-color: $dt-color-form-border-color;
+  .checkbox:disabled {
+    pointer-events: none;
   }
 
-  .checkbox:focus + & {
-    background: white;
-    border-color: $dt-color-form-border-color-hover;
-    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-      var(--color-blue-500);
-    outline-offset: 1px;
+  .icon {
+    position: absolute;
+    color: $color-white;
   }
 
-  .checkbox:checked:focus + &,
-  .checkbox:indeterminate:focus + & {
-    background: $dt-color-form-border-color-hover;
-    border-color: $dt-color-form-border-color-hover;
+  .icon.reversed {
+    color: $dt-color-form-color-icon-reversed;
   }
 
-  .checkbox:checked:hover + &,
-  .checkbox:indeterminate:hover + & {
-    background: $dt-color-form-border-color-hover;
-    border-color: $dt-color-form-border-color-hover;
-  }
-}
-
-.box.reversed {
-  border: $border-solid-border-width $border-solid-border-style rgba($color-white-rgb, 0.65);
-  background: transparent;
-
-  .checkbox:checked + &,
-  .checkbox:indeterminate + & {
-    background: rgba($color-white-rgb, 0.65);
-  }
-
-  .checkbox:focus + & {
-    outline-color: var(--color-blue-300);
-  }
-
-  .checkbox:not([checked]):hover + &,
-  .checkbox:not([checked]):focus + & {
-    border-color: $color-white;
-    background: rgba($color-white-rgb, 0.1);
-  }
-
-  .checkbox:checked:focus + &,
-  .checkbox:indeterminate:focus + & {
+  .box {
+    display: block;
+    position: relative;
+    pointer-events: none;
     background: $color-white;
-    border-color: $color-white;
+    height: $checkbox-size;
+    width: $checkbox-size;
+    top: 0;
+    border: $border-solid-border-width $border-solid-border-style $dt-color-form-border-color;
+    border-radius: $border-solid-border-radius;
+    box-sizing: border-box;
+    background-color: white;
+    border-color: $dt-color-form-border-color;
+
+    .checkbox:hover + & {
+      border-color: $dt-color-form-border-color-hover;
+    }
+
+    .checkbox:checked + &,
+    .checkbox:indeterminate + & {
+      background: $dt-color-checkbox-background-color-checked;
+      background-color: $dt-color-form-border-color;
+    }
+
+    .checkbox:focus + & {
+      background: white;
+      border-color: $dt-color-form-border-color-hover;
+      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+        var(--color-blue-500);
+      outline-offset: 1px;
+    }
+
+    .checkbox:checked:focus + &,
+    .checkbox:indeterminate:focus + & {
+      background: $dt-color-form-border-color-hover;
+      border-color: $dt-color-form-border-color-hover;
+    }
+
+    .checkbox:checked:hover + &,
+    .checkbox:indeterminate:hover + & {
+      background: $dt-color-form-border-color-hover;
+      border-color: $dt-color-form-border-color-hover;
+    }
   }
 
-  .checkbox:indeterminate:hover + &,
-  .checkbox:checked:hover + & {
-    background: $color-white;
-    border-color: $color-white;
+  .box.reversed {
+    border: $border-solid-border-width $border-solid-border-style rgba($color-white-rgb, 0.65);
+    background: transparent;
+
+    .checkbox:checked + &,
+    .checkbox:indeterminate + & {
+      background: rgba($color-white-rgb, 0.65);
+    }
+
+    .checkbox:focus + & {
+      outline-color: var(--color-blue-300);
+    }
+
+    .checkbox:not([checked]):hover + &,
+    .checkbox:not([checked]):focus + & {
+      border-color: $color-white;
+      background: rgba($color-white-rgb, 0.1);
+    }
+
+    .checkbox:checked:focus + &,
+    .checkbox:indeterminate:focus + & {
+      background: $color-white;
+      border-color: $color-white;
+    }
+
+    .checkbox:indeterminate:hover + &,
+    .checkbox:checked:hover + & {
+      background: $color-white;
+      border-color: $color-white;
+    }
   }
 }

package/src/Checkbox/CheckboxField/CheckboxField.module.scss

@@ -3,44 +3,46 @@
 @import '~@kaizen/design-tokens/sass/typography';
 @import '../../../styles/utils/form-variables';
 
-.container {
-  position: relative;
-  margin-bottom: $spacing-xs;
+@layer kz-components {
+  .container {
+    position: relative;
+    margin-bottom: $spacing-xs;
 
-  label {
-    // This is to override bootstrap styles. Remove when appropriate
-    padding-top: 0;
-    -webkit-tap-highlight-color: transparent;
-  }
+    label {
+      // This is to override bootstrap styles. Remove when appropriate
+      padding-top: 0;
+      -webkit-tap-highlight-color: transparent;
+    }
 
-  &.noBottomMargin {
-    margin-bottom: 0;
-  }
+    &.noBottomMargin {
+      margin-bottom: 0;
+    }
 
-  @media (hover: hover) and (pointer: fine) {
-    label:hover {
-      input:not([disabled]) + div {
-        border-color: $dt-color-form-border-color;
-        background-color: $color-gray-100;
+    @media (hover: hover) and (pointer: fine) {
+      label:hover {
+        input:not([disabled]) + div {
+          border-color: $dt-color-form-border-color;
+          background-color: $color-gray-100;
+        }
       }
     }
-  }
 
-  &.checked,
-  &.mixed {
-    label {
-      font-family: $typography-paragraph-body-font-family;
-      font-size: $typography-paragraph-body-font-size;
-      line-height: $typography-paragraph-body-line-height;
-      letter-spacing: $typography-paragraph-body-letter-spacing;
-      font-weight: $typography-paragraph-bold-font-weight;
-      position: static;
+    &.checked,
+    &.mixed {
+      label {
+        font-family: $typography-paragraph-body-font-family;
+        font-size: $typography-paragraph-body-font-size;
+        line-height: $typography-paragraph-body-line-height;
+        letter-spacing: $typography-paragraph-body-letter-spacing;
+        font-weight: $typography-paragraph-bold-font-weight;
+        position: static;
+      }
     }
   }
-}
 
-.label {
-  &:disabled {
-    pointer-events: none;
+  .label {
+    &:disabled {
+      pointer-events: none;
+    }
   }
 }

package/src/Checkbox/CheckboxGroup/CheckboxGroup.module.scss

@@ -1,15 +1,17 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.checkboxGroupLabel {
-  margin-bottom: $spacing-sm;
-}
+@layer kz-components {
+  .checkboxGroupLabel {
+    margin-bottom: $spacing-sm;
+  }
 
-.checkboxGroupContainer {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: $spacing-sm;
+  .checkboxGroupContainer {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: $spacing-sm;
 
-  &.noBottomMargin {
-    margin-bottom: 0;
+    &.noBottomMargin {
+      margin-bottom: 0;
+    }
   }
 }

package/src/ClearButton/ClearButton.module.scss

@@ -2,42 +2,44 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '../../styles/utils/button-reset';
 
-.clearButton {
-  @include button-reset;
-
-  position: relative;
-  display: inline-flex;
-  border-radius: 100%;
-
-  &:hover {
-    cursor: pointer;
+@layer kz-components {
+  .clearButton {
+    @include button-reset;
+
+    position: relative;
+    display: inline-flex;
+    border-radius: 100%;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:focus-visible {
+      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+        var(--color-blue-500);
+      outline-offset: -1px;
+    }
   }
 
-  &:focus-visible {
-    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-      var(--color-blue-500);
-    outline-offset: -1px;
-  }
-}
+  .default {
+    color: $color-gray-500;
 
-.default {
-  color: $color-gray-500;
-
-  &:hover,
-  &:focus-visible {
-    color: $color-purple-800;
+    &:hover,
+    &:focus-visible {
+      color: $color-purple-800;
+    }
   }
-}
 
-.reversed {
-  color: rgba($color-white-rgb, 0.8);
+  .reversed {
+    color: rgba($color-white-rgb, 0.8);
 
-  &:hover,
-  &:focus-visible {
-    color: $color-white;
-  }
+    &:hover,
+    &:focus-visible {
+      color: $color-white;
+    }
 
-  &:focus-visible {
-    outline-color: var(--color-blue-300);
+    &:focus-visible {
+      outline-color: var(--color-blue-300);
+    }
   }
 }