@kaizen/components 1.78.1 → 1.79.1

package/src/Button/Button/Button.module.scss

@@ -6,180 +6,182 @@
 @import '../utils/mixins';
 @import '../utils/variables';
 
-%button {
-  @include button-reset;
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: $typography-button-primary-font-family;
-  font-weight: $typography-button-primary-font-weight;
-  font-size: $typography-button-primary-font-size;
-  line-height: $typography-button-primary-line-height;
-  letter-spacing: $typography-button-primary-letter-spacing;
-  display: inline-flex;
-  // ^inline-flex is used over (block) flex here to fix an edge case where the parent element is display:grid
-  //  and this element is an <a>, causing the element to be full width.
-  align-items: center;
-  box-sizing: border-box;
-  min-height: $button-height;
-  border: $border-solid-border-width $border-solid-border-style;
-  border-radius: $border-solid-border-radius;
-  position: relative;
-  text-align: left;
-  cursor: pointer;
-  overflow: visible; // Required for the focus ring on IE11
-
-  &[href] {
-    text-decoration: none;
-  }
-
-  &:not(.disabled, .working) {
-    &:active {
-      transform: translateY(1px);
+@layer kz-components {
+  %button {
+    @include button-reset;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-family: $typography-button-primary-font-family;
+    font-weight: $typography-button-primary-font-weight;
+    font-size: $typography-button-primary-font-size;
+    line-height: $typography-button-primary-line-height;
+    letter-spacing: $typography-button-primary-letter-spacing;
+    display: inline-flex;
+    // ^inline-flex is used over (block) flex here to fix an edge case where the parent element is display:grid
+    //  and this element is an <a>, causing the element to be full width.
+    align-items: center;
+    box-sizing: border-box;
+    min-height: $button-height;
+    border: $border-solid-border-width $border-solid-border-style;
+    border-radius: $border-solid-border-radius;
+    position: relative;
+    text-align: left;
+    cursor: pointer;
+    overflow: visible; // Required for the focus ring on IE11
+
+    &[href] {
+      text-decoration: none;
     }
-  }
 
-  &:focus {
-    outline: none;
-  }
+    &:not(.disabled, .working) {
+      &:active {
+        transform: translateY(1px);
+      }
+    }
 
-  &:focus-visible {
-    &::after {
-      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
-
-      content: '';
-      position: absolute;
-      background: transparent;
-      border-color: $color-blue-500;
-      border-radius: $border-focus-ring-border-radius;
-      border-width: $border-focus-ring-border-width;
-      border-style: $border-focus-ring-border-style;
-      inset: calc(-1 * #{$focus-ring-offset});
+    &:focus {
+      outline: none;
     }
-  }
 
-  &.reversed {
     &:focus-visible {
       &::after {
-        border-color: $color-blue-300;
+        $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
+
+        content: '';
+        position: absolute;
+        background: transparent;
+        border-color: $color-blue-500;
+        border-radius: $border-focus-ring-border-radius;
+        border-width: $border-focus-ring-border-width;
+        border-style: $border-focus-ring-border-style;
+        inset: calc(-1 * #{$focus-ring-offset});
       }
+    }
 
-      &.disabled,
-      &.working {
+    &.reversed {
+      &:focus-visible {
         &::after {
-          border-color: $color-gray-400;
+          border-color: $color-blue-300;
+        }
+
+        &.disabled,
+        &.working {
+          &::after {
+            border-color: $color-gray-400;
+          }
         }
       }
     }
-  }
 
-  &.disabled,
-  &.working {
-    cursor: default;
-    opacity: 30%;
+    &.disabled,
+    &.working {
+      cursor: default;
+      opacity: 30%;
 
-    &:focus-visible {
-      &::after {
-        border-color: $color-purple-800;
+      &:focus-visible {
+        &::after {
+          border-color: $color-purple-800;
+        }
       }
     }
-  }
 
-  #{$className--content} {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    padding: $button-vertical-padding calc(#{$spacing-md} - #{$border-solid-border-width});
+    #{$className--content} {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      padding: $button-vertical-padding calc(#{$spacing-md} - #{$border-solid-border-width});
+    }
   }
-}
 
-%variant-default {
-  background-color: $color-white;
-  border-color: $color-gray-500;
-  color: $color-purple-800;
+  %variant-default {
+    background-color: $color-white;
+    border-color: $color-gray-500;
+    color: $color-purple-800;
 
-  @include enabled-pseudo-states-variant($color-gray-200, $color-gray-600);
+    @include enabled-pseudo-states-variant($color-gray-200, $color-gray-600);
 
-  &.reversed {
-    background-color: transparent;
-    border-color: rgba($color-white-rgb, 0.65);
-    color: $color-white;
+    &.reversed {
+      background-color: transparent;
+      border-color: rgba($color-white-rgb, 0.65);
+      color: $color-white;
 
-    @include enabled-pseudo-states-variant(rgba($color-white-rgb, 0.1), $color-white);
+      @include enabled-pseudo-states-variant(rgba($color-white-rgb, 0.1), $color-white);
+    }
   }
-}
 
-%variant-primary {
-  background-color: $color-blue-500;
-  border-color: $border-borderless-border-color;
-  color: $color-white;
-
-  @include enabled-pseudo-states-variant($color-blue-600, $border-borderless-border-color);
-
-  &.reversed {
-    background-color: $color-green-300;
+  %variant-primary {
+    background-color: $color-blue-500;
     border-color: $border-borderless-border-color;
-    color: $color-purple-800;
+    color: $color-white;
 
-    @include enabled-pseudo-states-variant($color-green-400, $border-borderless-border-color);
-  }
-}
+    @include enabled-pseudo-states-variant($color-blue-600, $border-borderless-border-color);
 
-%variant-destructive {
-  background-color: $color-red-500;
-  border-color: $border-borderless-border-color;
-  color: $color-white;
+    &.reversed {
+      background-color: $color-green-300;
+      border-color: $border-borderless-border-color;
+      color: $color-purple-800;
 
-  @include enabled-pseudo-states-variant($color-red-600, $border-borderless-border-color);
+      @include enabled-pseudo-states-variant($color-green-400, $border-borderless-border-color);
+    }
+  }
 
-  &.reversed {
-    background-color: $color-red-300;
+  %variant-destructive {
+    background-color: $color-red-500;
     border-color: $border-borderless-border-color;
-    color: $color-purple-800;
+    color: $color-white;
 
-    @include enabled-pseudo-states-variant($color-red-400, $border-borderless-border-color);
-  }
-}
+    @include enabled-pseudo-states-variant($color-red-600, $border-borderless-border-color);
+
+    &.reversed {
+      background-color: $color-red-300;
+      border-color: $border-borderless-border-color;
+      color: $color-purple-800;
 
-%variant-secondary {
-  font-family: $typography-button-secondary-font-family;
-  font-weight: $typography-button-secondary-font-weight;
-  font-size: $typography-button-secondary-font-size;
-  line-height: $typography-button-secondary-line-height;
-  letter-spacing: $typography-button-secondary-letter-spacing;
-  background-color: transparent;
-  border-color: $border-borderless-border-color;
-  color: $color-blue-500;
-
-  @include enabled-pseudo-states-variant($color-blue-100, $border-borderless-border-color);
-
-  #{$className--content} {
-    padding-left: calc(#{$spacing-sm} - #{$border-solid-border-width});
-    padding-right: calc(#{$spacing-sm} - #{$border-solid-border-width});
+      @include enabled-pseudo-states-variant($color-red-400, $border-borderless-border-color);
+    }
   }
 
-  &.reversed {
+  %variant-secondary {
+    font-family: $typography-button-secondary-font-family;
+    font-weight: $typography-button-secondary-font-weight;
+    font-size: $typography-button-secondary-font-size;
+    line-height: $typography-button-secondary-line-height;
+    letter-spacing: $typography-button-secondary-letter-spacing;
+    background-color: transparent;
     border-color: $border-borderless-border-color;
-    color: $color-white;
+    color: $color-blue-500;
+
+    @include enabled-pseudo-states-variant($color-blue-100, $border-borderless-border-color);
+
+    #{$className--content} {
+      padding-left: calc(#{$spacing-sm} - #{$border-solid-border-width});
+      padding-right: calc(#{$spacing-sm} - #{$border-solid-border-width});
+    }
 
-    @include enabled-pseudo-states-variant(
-      rgba($color-white-rgb, 0.2),
-      $border-borderless-border-color
-    );
+    &.reversed {
+      border-color: $border-borderless-border-color;
+      color: $color-white;
+
+      @include enabled-pseudo-states-variant(
+        rgba($color-white-rgb, 0.2),
+        $border-borderless-border-color
+      );
+    }
   }
-}
 
-%variant-secondary-destructive {
-  color: $color-red-600;
+  %variant-secondary-destructive {
+    color: $color-red-600;
 
-  @include enabled-pseudo-states-variant($color-red-100, $border-borderless-border-color);
-}
+    @include enabled-pseudo-states-variant($color-red-100, $border-borderless-border-color);
+  }
 
-%variant-small {
-  min-height: $button-small-height;
+  %variant-small {
+    min-height: $button-small-height;
 
-  #{$className--content} {
-    padding-top: $button-vertical-padding--small;
-    padding-bottom: $button-vertical-padding--small;
+    #{$className--content} {
+      padding-top: $button-vertical-padding--small;
+      padding-bottom: $button-vertical-padding--small;
+    }
   }
 }

package/src/Button/GenericButton/GenericButton.module.scss

@@ -4,112 +4,114 @@
 @import '../../Pagination/subcomponents/PaginationLink/PaginationLink.module';
 @import '../../Pagination/subcomponents/DirectionalLink/DirectionalLink.module';
 
-.container {
-  display: inline-block;
-}
+@layer kz-components {
+  .container {
+    display: inline-block;
+  }
 
-.button {
-  @extend %button;
-}
+  .button {
+    @extend %button;
+  }
 
-.default {
-  @extend %variant-default;
-}
+  .default {
+    @extend %variant-default;
+  }
 
-.primary {
-  @extend %variant-primary;
-}
+  .primary {
+    @extend %variant-primary;
+  }
 
-.destructive {
-  @extend %variant-destructive;
-}
+  .destructive {
+    @extend %variant-destructive;
+  }
 
-.secondary {
-  @extend %variant-secondary;
+  .secondary {
+    @extend %variant-secondary;
 
-  &.destructive {
-    @extend %variant-secondary-destructive;
+    &.destructive {
+      @extend %variant-secondary-destructive;
+    }
   }
-}
 
-.small {
-  @extend %variant-small;
-}
+  .small {
+    @extend %variant-small;
+  }
 
-.label {
-  line-height: 1;
+  .label {
+    line-height: 1;
 
-  &:not(:first-child) {
-    @include ca-margin($start: 0.5em, $end: null);
-  }
+    &:not(:first-child) {
+      @include ca-margin($start: 0.5em, $end: null);
+    }
 
-  &:not(:last-child) {
-    @include ca-margin($end: 0.5em, $start: null);
+    &:not(:last-child) {
+      @include ca-margin($end: 0.5em, $start: null);
+    }
   }
-}
-
-.fullWidth {
-  width: 100%;
 
-  .button {
-    display: flex;
+  .fullWidth {
     width: 100%;
-    justify-content: center;
-  }
 
-  #{$className--content} {
-    justify-content: center;
+    .button {
+      display: flex;
+      width: 100%;
+      justify-content: center;
+    }
+
+    #{$className--content} {
+      justify-content: center;
+    }
   }
-}
 
-.iconWrapper {
-  height: 20px;
-  align-self: flex-start;
-}
+  .iconWrapper {
+    height: 20px;
+    align-self: flex-start;
+  }
 
-.additionalContentWrapper {
-  display: inherit;
+  .additionalContentWrapper {
+    display: inherit;
 
-  &:not(:last-child) {
-    @include ca-margin($end: 0.5em, $start: null);
+    &:not(:last-child) {
+      @include ca-margin($end: 0.5em, $start: null);
+    }
   }
-}
 
-.loadingSpinner {
-  // This is to fix a problem in safari where the svg stretched too high
-  svg {
-    height: 100%;
+  .loadingSpinner {
+    // This is to fix a problem in safari where the svg stretched too high
+    svg {
+      height: 100%;
+    }
   }
-}
 
-.centeredLoadingSpinner {
-  position: absolute;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-}
+  .centeredLoadingSpinner {
+    position: absolute;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+  }
 
-.hidden {
-  visibility: hidden;
-}
+  .hidden {
+    visibility: hidden;
+  }
 
-.iconButton {
-  @extend %icon-button;
-}
+  .iconButton {
+    @extend %icon-button;
+  }
 
-.circleButton {
-  @extend %circle-button;
-}
+  .circleButton {
+    @extend %circle-button;
+  }
 
-.directionalLink {
-  @extend %directional-link;
-}
+  .directionalLink {
+    @extend %directional-link;
+  }
 
-.paginationLink {
-  @extend %pagination-link;
-}
+  .paginationLink {
+    @extend %pagination-link;
+  }
 
-.isPaginationLinkActive {
-  @extend %pagination-link--active;
+  .isPaginationLinkActive {
+    @extend %pagination-link--active;
+  }
 }

package/src/Button/IconButton/IconButton.module.scss

@@ -3,30 +3,32 @@
 @import '../utils/mixins';
 @import '../utils/variables';
 
-%icon-button {
-  width: $button-height;
-  border-color: $border-borderless-border-color;
+@layer kz-components {
+  %icon-button {
+    width: $button-height;
+    border-color: $border-borderless-border-color;
 
-  @include enabled-pseudo-states-variant($border-color: $border-borderless-border-color);
+    @include enabled-pseudo-states-variant($border-color: $border-borderless-border-color);
 
-  & #{$className--content} {
-    justify-content: center;
-    width: 100%;
-    padding: 0;
-  }
+    & #{$className--content} {
+      justify-content: center;
+      width: 100%;
+      padding: 0;
+    }
 
-  &:not(.reversed) {
-    &.default {
-      background-color: transparent;
-      color: inherit;
+    &:not(.reversed) {
+      &.default {
+        background-color: transparent;
+        color: inherit;
 
-      @include enabled-pseudo-states-variant($background-color: $color-gray-200);
+        @include enabled-pseudo-states-variant($background-color: $color-gray-200);
+      }
     }
-  }
 
-  &.reversed {
-    border-color: $border-borderless-border-color;
+    &.reversed {
+      border-color: $border-borderless-border-color;
 
-    @include enabled-pseudo-states-variant($border-color: $border-borderless-border-color);
+      @include enabled-pseudo-states-variant($border-color: $border-borderless-border-color);
+    }
   }
 }

package/src/ButtonGroup/ButtonGroup.module.css

@@ -1,48 +1,50 @@
-.buttonGroup {
-  --focus-ring-offset: 1px;
-  --focus-ring-offset-inner: calc(-1 * var(--focus-ring-offset));
+@layer kz-components {
+  .buttonGroup {
+    --focus-ring-offset: 1px;
+    --focus-ring-offset-inner: calc(-1 * var(--focus-ring-offset));
 
-  display: inline-flex;
-}
+    display: inline-flex;
+  }
 
-.child {
-  border-radius: 0;
-}
+  .child {
+    border-radius: 0;
+  }
 
-.child:focus-visible::after {
-  border-radius: 0;
-}
+  .child:focus-visible::after {
+    border-radius: 0;
+  }
 
-.child:not(.firstChild) {
-  border-inline-start: 1px solid var(--color-blue-300);
-}
+  .child:not(.firstChild) {
+    border-inline-start: 1px solid var(--color-blue-300);
+  }
 
-.child:not(.firstChild, .lastChild) {
-  &:focus-visible {
-    &::after {
-      inset-inline: var(--focus-ring-offset-inner);
+  .child:not(.firstChild, .lastChild) {
+    &:focus-visible {
+      &::after {
+        inset-inline: var(--focus-ring-offset-inner);
+      }
     }
   }
-}
 
-.child.firstChild {
-  border-start-start-radius: var(--border-focus-ring-border-radius);
-  border-end-start-radius: var(--border-focus-ring-border-radius);
-}
+  .child.firstChild {
+    border-start-start-radius: var(--border-focus-ring-border-radius);
+    border-end-start-radius: var(--border-focus-ring-border-radius);
+  }
 
-.child.firstChild:focus-visible::after {
-  border-start-start-radius: var(--border-focus-ring-border-radius);
-  border-end-start-radius: var(--border-focus-ring-border-radius);
-  inset-inline-end: var(--focus-ring-offset-inner);
-}
+  .child.firstChild:focus-visible::after {
+    border-start-start-radius: var(--border-focus-ring-border-radius);
+    border-end-start-radius: var(--border-focus-ring-border-radius);
+    inset-inline-end: var(--focus-ring-offset-inner);
+  }
 
-.child.lastChild {
-  border-start-end-radius: var(--border-focus-ring-border-radius);
-  border-end-end-radius: var(--border-focus-ring-border-radius);
-}
+  .child.lastChild {
+    border-start-end-radius: var(--border-focus-ring-border-radius);
+    border-end-end-radius: var(--border-focus-ring-border-radius);
+  }
 
-.child.lastChild:focus-visible::after {
-  border-start-end-radius: var(--border-focus-ring-border-radius);
-  border-end-end-radius: var(--border-focus-ring-border-radius);
-  inset-inline-start: var(--focus-ring-offset-inner);
+  .child.lastChild:focus-visible::after {
+    border-start-end-radius: var(--border-focus-ring-border-radius);
+    border-end-end-radius: var(--border-focus-ring-border-radius);
+    inset-inline-start: var(--focus-ring-offset-inner);
+  }
 }