@kaizen/components 1.78.1 → 1.79.0

package/src/Radio/Radio/Radio.module.scss

@@ -3,77 +3,79 @@
 @import '../../../styles/utils/forms';
 @import '../../../styles/utils/form-variables';
 
-$radio-size: 24px;
-$icon-size: 10px;
-$icon-offset: 5px;
-$focus-ring-offset: 2px;
+@layer kz-components {
+  $radio-size: 24px;
+  $icon-size: 10px;
+  $icon-offset: 5px;
+  $focus-ring-offset: 2px;
 
-$dt-color-radio-background-color-hover: $color-gray-200;
-$dt-color-radio-disc-color-base: $color-gray-600;
-$dt-color-radio-border-color-focus: $color-blue-500;
-$dt-color-radio-border-color-focus-reversed: $color-blue-300;
+  $dt-color-radio-background-color-hover: $color-gray-200;
+  $dt-color-radio-disc-color-base: $color-gray-600;
+  $dt-color-radio-border-color-focus: $color-blue-500;
+  $dt-color-radio-border-color-focus-reversed: $color-blue-300;
 
-.radioInput {
-  @include form-input-visually-hidden;
-}
-
-.icon {
-  top: $icon-offset;
-  left: $icon-offset;
-  width: $icon-size;
-  height: $icon-size;
-  border-radius: 50%;
-  background: $dt-color-radio-disc-color-base;
-  position: absolute;
-
-  &.reversed {
-    background: $color-white;
+  .radioInput {
+    @include form-input-visually-hidden;
   }
 
-  @media (forced-colors: active) {
-    // High contrast mode with remove the background color so we have to use border to create the selected icon state.
-    // Transparent is used so the user defined colors for borders will be used here
-    border: $icon-offset solid transparent;
-    width: 0;
-    height: 0;
-  }
-}
+  .icon {
+    top: $icon-offset;
+    left: $icon-offset;
+    width: $icon-size;
+    height: $icon-size;
+    border-radius: 50%;
+    background: $dt-color-radio-disc-color-base;
+    position: absolute;
 
-.box {
-  display: block;
-  position: relative;
-  background: $color-white;
-  height: $radio-size;
-  width: $radio-size;
-  top: 0;
-  border: $border-solid-border-width $border-solid-border-style $dt-color-form-border-color;
-  box-sizing: border-box;
-  border-radius: 50%;
-
-  .radioInput:focus:not([disabled]) + & {
-    border-color: $dt-color-radio-disc-color-base;
-    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-      var(--color-blue-500);
-    outline-offset: 1px;
-  }
+    &.reversed {
+      background: $color-white;
+    }
 
-  .radioInput:not([disabled]) + &:hover {
-    border-color: $dt-color-form-border-color-hover;
-    background-color: $dt-color-radio-background-color-hover;
+    @media (forced-colors: active) {
+      // High contrast mode with remove the background color so we have to use border to create the selected icon state.
+      // Transparent is used so the user defined colors for borders will be used here
+      border: $icon-offset solid transparent;
+      width: 0;
+      height: 0;
+    }
   }
 
-  &.reversed {
-    border: $border-solid-border-width $border-solid-border-style rgba($color-white-rgb, 0.65);
-    background: transparent;
+  .box {
+    display: block;
+    position: relative;
+    background: $color-white;
+    height: $radio-size;
+    width: $radio-size;
+    top: 0;
+    border: $border-solid-border-width $border-solid-border-style $dt-color-form-border-color;
+    box-sizing: border-box;
+    border-radius: 50%;
 
     .radioInput:focus:not([disabled]) + & {
-      border-color: $color-white;
-      outline-color: $dt-color-radio-border-color-focus-reversed;
+      border-color: $dt-color-radio-disc-color-base;
+      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+        var(--color-blue-500);
+      outline-offset: 1px;
     }
 
     .radioInput:not([disabled]) + &:hover {
-      border-color: $color-white;
-      background-color: transparent;
+      border-color: $dt-color-form-border-color-hover;
+      background-color: $dt-color-radio-background-color-hover;
+    }
+
+    &.reversed {
+      border: $border-solid-border-width $border-solid-border-style rgba($color-white-rgb, 0.65);
+      background: transparent;
+
+      .radioInput:focus:not([disabled]) + & {
+        border-color: $color-white;
+        outline-color: $dt-color-radio-border-color-focus-reversed;
+      }
+
+      .radioInput:not([disabled]) + &:hover {
+        border-color: $color-white;
+        background-color: transparent;
+      }
     }
   }
 }

package/src/Radio/RadioField/RadioField.module.scss

@@ -3,46 +3,48 @@
 @import '~@kaizen/design-tokens/sass/typography';
 @import '../../../styles/utils/form-variables';
 
-$dt-color-radio-background-color-hover: $color-gray-200;
+@layer kz-components {
+  $dt-color-radio-background-color-hover: $color-gray-200;
 
-.container {
-  position: relative;
-  overflow-wrap: anywhere;
-  word-break: normal;
-  margin-bottom: $spacing-sm;
+  .container {
+    position: relative;
+    overflow-wrap: anywhere;
+    word-break: normal;
+    margin-bottom: $spacing-sm;
 
-  label {
-    -webkit-tap-highlight-color: transparent;
+    label {
+      -webkit-tap-highlight-color: transparent;
 
-    :global(.ideal-sans) & {
-      // This is to override bootstrap styles. Remove when appropriate
-      font-size: $typography-paragraph-body-font-size;
-      padding-top: 0;
+      :global(.ideal-sans) & {
+        // This is to override bootstrap styles. Remove when appropriate
+        font-size: $typography-paragraph-body-font-size;
+        padding-top: 0;
+      }
     }
-  }
 
-  &.selected {
-    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;
+    &.selected {
+      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;
+      }
     }
-  }
 
-  &:not(.reversed) label:hover {
-    input:not([disabled]) + span {
-      border-color: $dt-color-form-border-color-hover;
-      background-color: $dt-color-radio-background-color-hover;
+    &:not(.reversed) label:hover {
+      input:not([disabled]) + span {
+        border-color: $dt-color-form-border-color-hover;
+        background-color: $dt-color-radio-background-color-hover;
+      }
     }
-  }
 
-  &.reversed label:hover {
-    input:not([disabled]) + span {
-      border-color: $color-white;
-      background-color: transparent;
+    &.reversed label:hover {
+      input:not([disabled]) + span {
+        border-color: $color-white;
+        background-color: transparent;
+      }
     }
   }
 }

package/src/Radio/RadioGroup/RadioGroup.module.scss

@@ -1,27 +1,29 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.radioGroupLabel {
-  margin-bottom: $spacing-sm;
+@layer kz-components {
+  .radioGroupLabel {
+    margin-bottom: $spacing-sm;
 
-  label {
-    :global(.ideal-sans) & {
-      // This is to override bootstrap styles. Remove when appropriate
-      padding-top: 0;
+    label {
+      :global(.ideal-sans) & {
+        // This is to override bootstrap styles. Remove when appropriate
+        padding-top: 0;
+      }
     }
-  }
 
-  &.reversed {
-    color: $color-white;
+    &.reversed {
+      color: $color-white;
+    }
   }
-}
 
-.radioGroupContainer {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: $spacing-sm;
+  .radioGroupContainer {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: $spacing-sm;
 
-  &.noBottomMargin {
-    margin-bottom: 0;
+    &.noBottomMargin {
+      margin-bottom: 0;
+    }
   }
 }

package/src/RichTextEditor/EditableRichTextContent/EditableRichTextContent.module.scss

@@ -4,40 +4,42 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/typography';
 
-.editorLabel {
-  margin-bottom: $spacing-6;
-  display: inline-block;
-}
+@layer kz-components {
+  .editorLabel {
+    margin-bottom: $spacing-6;
+    display: inline-block;
+  }
 
-.editableContainer :global(.ProseMirror) {
-  padding: calc($spacing-12 - $border-solid-border-width);
-  position: relative;
-  border-radius: $border-solid-border-radius;
-  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
-  transition:
-    background-color $animation-duration-immediate,
-    border-color $animation-duration-immediate;
-  background-color: $color-white;
-  min-height: $typography-paragraph-body-line-height;
-}
+  .editableContainer :global(.ProseMirror) {
+    padding: calc($spacing-12 - $border-solid-border-width);
+    position: relative;
+    border-radius: $border-solid-border-radius;
+    border: $border-solid-border-width $border-solid-border-style $color-gray-500;
+    transition:
+      background-color $animation-duration-immediate,
+      border-color $animation-duration-immediate;
+    background-color: $color-white;
+    min-height: $typography-paragraph-body-line-height;
+  }
 
-.editableContainer:hover :global(.ProseMirror) {
-  background-color: $color-gray-200;
-}
+  .editableContainer:hover :global(.ProseMirror) {
+    background-color: $color-gray-200;
+  }
 
-.editableContainer .hiddenButton:focus-within + * > :global(.ProseMirror) {
-  background-color: $color-gray-200;
+  .editableContainer .hiddenButton:focus-within + * > :global(.ProseMirror) {
+    background-color: $color-gray-200;
 
-  &::before {
-    $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
+    &::before {
+      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
 
-    pointer-events: none;
-    content: '';
-    position: absolute;
-    background: transparent;
-    border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
-    border-radius: 10px;
-    inset: calc(-1 * #{$focus-ring-offset});
-    z-index: 1;
+      pointer-events: none;
+      content: '';
+      position: absolute;
+      background: transparent;
+      border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
+      border-radius: 10px;
+      inset: calc(-1 * #{$focus-ring-offset});
+      z-index: 1;
+    }
   }
 }

package/src/RichTextEditor/RichTextContent/RichTextContent.module.scss

@@ -1,5 +1,7 @@
 @import '../mixins';
 
-.content > :global(.ProseMirror) {
-  @include content-styles;
+@layer kz-components {
+  .content > :global(.ProseMirror) {
+    @include content-styles;
+  }
 }

package/src/RichTextEditor/RichTextEditor/RichTextEditor.module.scss

@@ -5,102 +5,104 @@
 @import '~@kaizen/design-tokens/sass/typography';
 @import '../mixins';
 
-.editor > :global(.ProseMirror) {
-  border-radius: $border-solid-border-radius;
-  padding: $spacing-sm calc(#{$spacing-xs} * 3);
-  position: relative;
-  transition:
-    background-color $animation-duration-immediate,
-    border-color $animation-duration-immediate;
-
-  @include content-styles;
-
-  &:hover,
-  &:focus-visible {
-    border-color: $color-gray-600;
-    background: $color-gray-200;
-  }
+@layer kz-components {
+  .editor > :global(.ProseMirror) {
+    border-radius: $border-solid-border-radius;
+    padding: $spacing-sm calc(#{$spacing-xs} * 3);
+    position: relative;
+    transition:
+      background-color $animation-duration-immediate,
+      border-color $animation-duration-immediate;
+
+    @include content-styles;
+
+    &:hover,
+    &:focus-visible {
+      border-color: $color-gray-600;
+      background: $color-gray-200;
+    }
 
-  &:focus {
-    outline: none;
-  }
+    &:focus {
+      outline: none;
+    }
 
-  &:focus-visible::after {
-    $focus-ring-offset: 5px;
-
-    content: '';
-    pointer-events: none;
-    position: absolute;
-    background: transparent;
-    border-radius: 2px 2px $border-focus-ring-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: 5px;
+
+      content: '';
+      pointer-events: none;
+      position: absolute;
+      background: transparent;
+      border-radius: 2px 2px $border-focus-ring-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});
+    }
   }
-}
-
-.editor.hasToolbar > :global(.ProseMirror) {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
 
-.editorLabel {
-  margin-bottom: $spacing-6;
-  display: inline-block;
-}
+  .editor.hasToolbar > :global(.ProseMirror) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
 
-/* stylelint-disable no-descending-specificity */
-.editorWrapper {
-  position: relative;
-  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
-  background: $color-white;
-  border-radius: $border-solid-border-radius;
-  word-wrap: break-word;
+  .editorLabel {
+    margin-bottom: $spacing-6;
+    display: inline-block;
+  }
 
-  &:hover,
-  &:focus-within {
-    border-color: $color-gray-600;
+  /* stylelint-disable no-descending-specificity */
+  .editorWrapper {
+    position: relative;
+    border: $border-solid-border-width $border-solid-border-style $color-gray-500;
+    background: $color-white;
+    border-radius: $border-solid-border-radius;
+    word-wrap: break-word;
 
-    .toolbar {
+    &:hover,
+    &:focus-within {
       border-color: $color-gray-600;
-    }
-  }
 
-  &.error {
-    &,
-    .toolbar {
-      border-color: $color-red-500;
+      .toolbar {
+        border-color: $color-gray-600;
+      }
     }
 
-    &:hover {
+    &.error {
       &,
       .toolbar {
-        border-color: $color-red-600;
+        border-color: $color-red-500;
       }
-    }
-  }
 
-  &.caution {
-    &,
-    .toolbar {
-      border-color: $color-yellow-600;
+      &:hover {
+        &,
+        .toolbar {
+          border-color: $color-red-600;
+        }
+      }
     }
 
-    &:hover {
+    &.caution {
       &,
       .toolbar {
-        border-color: $color-yellow-700;
+        border-color: $color-yellow-600;
+      }
+
+      &:hover {
+        &,
+        .toolbar {
+          border-color: $color-yellow-700;
+        }
       }
     }
+    /* stylelint-enable no-descending-specificity */
   }
-  /* stylelint-enable no-descending-specificity */
-}
 
-@for $i from 1 through 20 {
-  .editor.rows#{$i} > :global(.ProseMirror) {
-    min-height: calc(
-      ((#{$typography-paragraph-body-line-height} + #{$spacing-16}) * #{$i}) - #{$spacing-16}
-    );
+  @for $i from 1 through 20 {
+    .editor.rows#{$i} > :global(.ProseMirror) {
+      min-height: calc(
+        ((#{$typography-paragraph-body-line-height} + #{$spacing-16}) * #{$i}) - #{$spacing-16}
+      );
+    }
   }
 }