@kaizen/components 1.78.0 → 1.79.0

package/src/Calendar/baseCalendarClassNames.module.scss

@@ -4,191 +4,193 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '../../styles/utils/button-reset';
 
-$button-border-radius: 3px;
-$rdp-cell-size: 40px;
+@layer kz-components {
+  $button-border-radius: 3px;
+  $rdp-cell-size: 40px;
 
-%focus-ring {
-  position: relative;
+  %focus-ring {
+    position: relative;
 
-  &:focus {
-    outline: none;
-  }
+    &:focus {
+      outline: none;
+    }
 
-  &:focus-visible {
-    outline: none;
+    &:focus-visible {
+      outline: none;
 
-    &::after {
-      $focus-ring-offset: calc(-1 * calc((#{$border-focus-ring-border-width} * 2) + 1px));
+      &::after {
+        $focus-ring-offset: calc(-1 * calc((#{$border-focus-ring-border-width} * 2) + 1px));
 
-      z-index: 2;
-      content: '';
-      position: absolute;
-      inset: $focus-ring-offset;
-      border-radius: $button-border-radius;
+        z-index: 2;
+        content: '';
+        position: absolute;
+        inset: $focus-ring-offset;
+        border-radius: $button-border-radius;
+      }
     }
   }
-}
 
-%focus-ring--enabled {
-  @extend %focus-ring;
+  %focus-ring--enabled {
+    @extend %focus-ring;
 
-  &:focus-visible {
-    &::after {
-      border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
+    &:focus-visible {
+      &::after {
+        border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
+      }
     }
   }
-}
 
-.root {
-  display: inline-flex;
-  position: relative;
-}
+  .root {
+    display: inline-flex;
+    position: relative;
+  }
 
-.months {
-  display: flex;
-}
+  .months {
+    display: flex;
+  }
 
-.buttonReset {
-  @include button-reset;
-}
+  .buttonReset {
+    @include button-reset;
+  }
 
-.button {
-  cursor: pointer;
-}
+  .button {
+    cursor: pointer;
+  }
 
-.caption {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 0 $spacing-xs;
-}
+  .caption {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 0 $spacing-xs;
+  }
 
-.captionLabel {
-  position: relative;
-  z-index: 1;
-  display: inline-flex;
-  align-items: center;
-  margin: 0;
-  padding: 0 0.25em;
-  white-space: nowrap;
-  font-family: $typography-heading-4-font-family;
-  font-size: $typography-heading-4-font-size;
-  font-weight: $typography-heading-5-font-weight;
-  line-height: $typography-heading-4-line-height;
-  letter-spacing: $typography-heading-4-letter-spacing;
-  color: $color-purple-800;
-}
+  .captionLabel {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
+    padding: 0 0.25em;
+    white-space: nowrap;
+    font-family: $typography-heading-4-font-family;
+    font-size: $typography-heading-4-font-size;
+    font-weight: $typography-heading-5-font-weight;
+    line-height: $typography-heading-4-line-height;
+    letter-spacing: $typography-heading-4-letter-spacing;
+    color: $color-purple-800;
+  }
 
-.navButton {
-  @extend %focus-ring--enabled;
+  .navButton {
+    @extend %focus-ring--enabled;
 
-  display: inherit;
-  padding: 0.25rem $spacing-xs;
-  border: $border-solid-border-width $border-solid-border-style transparent;
-  border-radius: $button-border-radius;
+    display: inherit;
+    padding: 0.25rem $spacing-xs;
+    border: $border-solid-border-width $border-solid-border-style transparent;
+    border-radius: $button-border-radius;
 
-  &:hover {
-    background-color: $color-blue-100;
-    color: $color-blue-500;
+    &:hover {
+      background-color: $color-blue-100;
+      color: $color-blue-500;
+    }
+
+    &:focus-visible {
+      background-color: $color-blue-100;
+      color: $color-blue-500;
+    }
   }
 
-  &:focus-visible {
-    background-color: $color-blue-100;
-    color: $color-blue-500;
+  .table {
+    border-collapse: separate;
+    border-spacing: 1px;
+    margin: 0;
+    max-width: calc(#{$rdp-cell-size} * 7);
   }
-}
 
-.table {
-  border-collapse: separate;
-  border-spacing: 1px;
-  margin: 0;
-  max-width: calc(#{$rdp-cell-size} * 7);
-}
+  .tbody {
+    border: 0;
+    font-family: $typography-paragraph-body-font-family;
+    font-size: $typography-paragraph-body-font-size;
+    letter-spacing: $typography-paragraph-body-letter-spacing;
+    font-weight: $typography-paragraph-body-font-weight;
+    line-height: $typography-paragraph-body-line-height;
+  }
 
-.tbody {
-  border: 0;
-  font-family: $typography-paragraph-body-font-family;
-  font-size: $typography-paragraph-body-font-size;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-  font-weight: $typography-paragraph-body-font-weight;
-  line-height: $typography-paragraph-body-line-height;
-}
+  .weekday {
+    padding: 0.5rem 0;
+    font-family: $typography-paragraph-body-font-family;
+    font-size: $typography-paragraph-body-font-size;
+    letter-spacing: $typography-paragraph-body-letter-spacing;
+    font-weight: $typography-paragraph-body-font-weight;
+    line-height: $typography-paragraph-body-line-height;
+    color: $color-purple-800;
+  }
 
-.weekday {
-  padding: 0.5rem 0;
-  font-family: $typography-paragraph-body-font-family;
-  font-size: $typography-paragraph-body-font-size;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-  font-weight: $typography-paragraph-body-font-weight;
-  line-height: $typography-paragraph-body-line-height;
-  color: $color-purple-800;
-}
+  .cell {
+    width: $rdp-cell-size;
+    height: $rdp-cell-size;
+    padding: 0;
+    text-align: center;
+  }
 
-.cell {
-  width: $rdp-cell-size;
-  height: $rdp-cell-size;
-  padding: 0;
-  text-align: center;
-}
+  .day {
+    @extend %focus-ring--enabled;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: $rdp-cell-size;
+    max-width: $rdp-cell-size;
+    height: $rdp-cell-size;
+    margin: 0;
+    border: $border-borderless-border-width $border-borderless-border-style
+      $border-borderless-border-color;
+    border-radius: $button-border-radius;
+    padding: calc(#{$spacing-md} / 3) 0.625rem;
+    color: $color-purple-800;
+
+    &:hover {
+      background-color: $color-blue-100;
+      color: $color-blue-500;
+    }
 
-.day {
-  @extend %focus-ring--enabled;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  width: $rdp-cell-size;
-  max-width: $rdp-cell-size;
-  height: $rdp-cell-size;
-  margin: 0;
-  border: $border-borderless-border-width $border-borderless-border-style
-    $border-borderless-border-color;
-  border-radius: $button-border-radius;
-  padding: calc(#{$spacing-md} / 3) 0.625rem;
-  color: $color-purple-800;
-
-  &:hover {
-    background-color: $color-blue-100;
-    color: $color-blue-500;
+    &:focus-visible {
+      background-color: $color-blue-100;
+      color: $color-blue-500;
+    }
   }
 
-  &:focus-visible {
-    background-color: $color-blue-100;
+  .dayToday {
     color: $color-blue-500;
+    font-weight: bold;
   }
-}
-
-.dayToday {
-  color: $color-blue-500;
-  font-weight: bold;
-}
 
-.daySelected {
-  background-color: $color-blue-500;
-  border-radius: $button-border-radius;
-  color: $color-white;
-
-  & .button {
+  .daySelected {
+    background-color: $color-blue-500;
+    border-radius: $button-border-radius;
     color: $color-white;
 
-    &:hover,
-    &:focus-visible {
-      background-color: $color-blue-400;
+    & .button {
       color: $color-white;
+
+      &:hover,
+      &:focus-visible {
+        background-color: $color-blue-400;
+        color: $color-white;
+      }
     }
   }
-}
 
-.dayDisabled {
-  // Focus ring styles have been removed as react-day-picker has been updated such that
-  // disabled days do not receive focus, and keyboard navigation only lands on available days.
-  // https://github.com/gpbl/react-day-picker/pull/1519
-  // https://github.com/gpbl/react-day-picker/issues/1449#issuecomment-1149942033
-  background: none;
-  pointer-events: none;
+  .dayDisabled {
+    // Focus ring styles have been removed as react-day-picker has been updated such that
+    // disabled days do not receive focus, and keyboard navigation only lands on available days.
+    // https://github.com/gpbl/react-day-picker/pull/1519
+    // https://github.com/gpbl/react-day-picker/issues/1449#issuecomment-1149942033
+    background: none;
+    pointer-events: none;
 
-  & [class*='_button_'] {
-    color: rgba($color-purple-800-rgb, 0.3);
+    & [class*='_button_'] {
+      color: rgba($color-purple-800-rgb, 0.3);
+    }
   }
 }

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);
+  }
 }