@kaizen/components 1.78.1 → 1.79.1

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

@@ -3,83 +3,85 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/typography';
 
-.baseButton {
-  border-width: $border-solid-border-width;
-  border-style: $border-solid-border-style;
-  padding: calc(#{$spacing-sm} - #{$border-borderless-border-width})
-    calc(#{$spacing-md} - #{$border-borderless-border-width});
-  font-family: $typography-button-primary-font-family;
-  font-weight: $typography-button-primary-font-weight;
-  letter-spacing: $typography-button-primary-letter-spacing;
-  font-size: $typography-button-primary-font-size;
-  line-height: $typography-button-primary-line-height;
-  text-decoration: unset;
-  cursor: default;
-  white-space: nowrap;
+@layer kz-components {
+  .baseButton {
+    border-width: $border-solid-border-width;
+    border-style: $border-solid-border-style;
+    padding: calc(#{$spacing-sm} - #{$border-borderless-border-width})
+      calc(#{$spacing-md} - #{$border-borderless-border-width});
+    font-family: $typography-button-primary-font-family;
+    font-weight: $typography-button-primary-font-weight;
+    letter-spacing: $typography-button-primary-letter-spacing;
+    font-size: $typography-button-primary-font-size;
+    line-height: $typography-button-primary-line-height;
+    text-decoration: unset;
+    cursor: default;
+    white-space: nowrap;
 
-  &:hover,
-  &:active {
-    z-index: 2;
-    text-decoration: unset; // override Murmur global styles :(
-  }
+    &:hover,
+    &:active {
+      z-index: 2;
+      text-decoration: unset; // override Murmur global styles :(
+    }
 
-  &:active {
-    transform: translateY(1px);
-  }
+    &:active {
+      transform: translateY(1px);
+    }
 
-  &:focus {
-    outline: none;
-  }
+    &:focus {
+      outline: none;
+    }
 
-  &:focus-visible {
-    z-index: 3;
-    outline-width: $border-solid-border-width;
-    outline-style: $border-solid-border-style;
-    outline-offset: 1px;
-  }
+    &:focus-visible {
+      z-index: 3;
+      outline-width: $border-solid-border-width;
+      outline-style: $border-solid-border-style;
+      outline-offset: 1px;
+    }
 
-  &:disabled {
-    pointer-events: none;
-    opacity: 30%;
+    &:disabled {
+      pointer-events: none;
+      opacity: 30%;
+    }
   }
-}
 
-.default {
-  $default-text-color: $color-purple-800;
+  .default {
+    $default-text-color: $color-purple-800;
 
-  background-color: $color-white;
-  border-color: $color-gray-500;
-  color: $default-text-color;
+    background-color: $color-white;
+    border-color: $color-gray-500;
+    color: $default-text-color;
 
-  &:hover,
-  &:active,
-  &:focus-visible {
-    background-color: $color-gray-200;
-    border-color: $color-gray-600;
-    color: $default-text-color; // override Murmur global styles :(
-  }
+    &:hover,
+    &:active,
+    &:focus-visible {
+      background-color: $color-gray-200;
+      border-color: $color-gray-600;
+      color: $default-text-color; // override Murmur global styles :(
+    }
 
-  &:focus-visible {
-    outline-color: $color-blue-500;
+    &:focus-visible {
+      outline-color: $color-blue-500;
+    }
   }
-}
 
-.isReversed {
-  $reversed-text-color: $color-white;
+  .isReversed {
+    $reversed-text-color: $color-white;
 
-  background-color: transparent;
-  border-color: rgba($color-white-rgb, 0.65);
-  color: $reversed-text-color;
+    background-color: transparent;
+    border-color: rgba($color-white-rgb, 0.65);
+    color: $reversed-text-color;
 
-  &:hover,
-  &:active,
-  &:focus-visible {
-    background-color: rgba($color-white-rgb, 0.1);
-    border-color: $color-white;
-    color: $reversed-text-color; // override Murmur global styles :(
-  }
+    &:hover,
+    &:active,
+    &:focus-visible {
+      background-color: rgba($color-white-rgb, 0.1);
+      border-color: $color-white;
+      color: $reversed-text-color; // override Murmur global styles :(
+    }
 
-  &:focus-visible {
-    outline-color: $color-blue-300;
+    &:focus-visible {
+      outline-color: $color-blue-300;
+    }
   }
 }

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

@@ -1,23 +1,25 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.dropdownButton {
-  display: inline-flex;
-  position: relative;
-  inset-inline-start: calc(-1 * #{$border-solid-border-width});
-  margin-inline-start: $border-solid-border-width;
-  padding: $spacing-12;
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-  border-start-end-radius: $border-solid-border-radius;
-  border-end-end-radius: $border-solid-border-radius;
-  border-inline-start-width: 0;
-
-  &:hover,
-  &:active,
-  &:focus-visible {
+@layer kz-components {
+  .dropdownButton {
+    display: inline-flex;
+    position: relative;
     inset-inline-start: calc(-1 * #{$border-solid-border-width});
-    margin-inline-start: unset;
-    border-inline-start-width: $border-solid-border-width;
+    margin-inline-start: $border-solid-border-width;
+    padding: $spacing-12;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    border-start-end-radius: $border-solid-border-radius;
+    border-end-end-radius: $border-solid-border-radius;
+    border-inline-start-width: 0;
+
+    &:hover,
+    &:active,
+    &:focus-visible {
+      inset-inline-start: calc(-1 * #{$border-solid-border-width});
+      margin-inline-start: unset;
+      border-inline-start-width: $border-solid-border-width;
+    }
   }
 }