@kaizen/components 0.0.0-canary-kz-components-css-layer-pre-release-20250527021003 → 0.0.0-canary-fix-fms-popover-20250603003244

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

@@ -3,79 +3,77 @@
 @import '../../../styles/utils/forms';
 @import '../../../styles/utils/form-variables';
 
-@layer kz-components {
-  $radio-size: 24px;
-  $icon-size: 10px;
-  $icon-offset: 5px;
-  $focus-ring-offset: 2px;
+$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;
+.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;
   }
 
-  .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;
+  @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 {
-      background: $color-white;
-    }
+.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%;
 
-    @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;
-    }
+  .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;
   }
 
-  .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:not([disabled]) + &:hover {
+    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: $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;
+      border-color: $color-white;
+      outline-color: $dt-color-radio-border-color-focus-reversed;
     }
 
     .radioInput:not([disabled]) + &:hover {
-      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;
-      }
+      border-color: $color-white;
+      background-color: transparent;
     }
   }
 }

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

@@ -3,48 +3,47 @@
 @import '~@kaizen/design-tokens/sass/typography';
 @import '../../../styles/utils/form-variables';
 
-@layer kz-components {
-  $dt-color-radio-background-color-hover: $color-gray-200;
+$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: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  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,29 +1,27 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .radioGroupLabel {
-    margin-bottom: $spacing-sm;
+.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,42 +4,40 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/typography';
 
-@layer kz-components {
-  .editorLabel {
-    margin-bottom: $spacing-6;
-    display: inline-block;
-  }
+.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,7 +1,5 @@
 @import '../mixins';
 
-@layer kz-components {
-  .content > :global(.ProseMirror) {
-    @include content-styles;
-  }
+.content > :global(.ProseMirror) {
+  @include content-styles;
 }

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

@@ -5,104 +5,102 @@
 @import '~@kaizen/design-tokens/sass/typography';
 @import '../mixins';
 
-@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-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 > :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;
   }
 
-  .editor.hasToolbar > :global(.ProseMirror) {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+  &:focus {
+    outline: none;
   }
 
-  .editorLabel {
-    margin-bottom: $spacing-6;
-    display: inline-block;
+  &: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;
+}
+
+/* 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;
 
-  /* 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;
+  &:hover,
+  &:focus-within {
+    border-color: $color-gray-600;
 
-    &:hover,
-    &:focus-within {
+    .toolbar {
       border-color: $color-gray-600;
+    }
+  }
 
-      .toolbar {
-        border-color: $color-gray-600;
-      }
+  &.error {
+    &,
+    .toolbar {
+      border-color: $color-red-500;
     }
 
-    &.error {
+    &:hover {
       &,
       .toolbar {
-        border-color: $color-red-500;
+        border-color: $color-red-600;
       }
+    }
+  }
 
-      &:hover {
-        &,
-        .toolbar {
-          border-color: $color-red-600;
-        }
-      }
+  &.caution {
+    &,
+    .toolbar {
+      border-color: $color-yellow-600;
     }
 
-    &.caution {
+    &:hover {
       &,
       .toolbar {
-        border-color: $color-yellow-600;
-      }
-
-      &:hover {
-        &,
-        .toolbar {
-          border-color: $color-yellow-700;
-        }
+        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}
+    );
   }
 }