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

package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/ToggleIconButton.module.scss

@@ -2,119 +2,117 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '~@kaizen/design-tokens/sass/color';
 
-@layer kz-components {
-  .button {
-    border: none;
-    background-color: $color-white;
-    width: 3rem;
-    height: 3rem;
-    border-radius: $border-solid-border-radius;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    transition: background-color $animation-duration-immediate;
-
-    &:focus {
-      outline: none;
-    }
-
-    &:focus-visible::after {
-      $focus-ring-offset: 3px;
-
-      content: '';
-      position: absolute;
-      background: transparent;
-      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});
-    }
+.button {
+  border: none;
+  background-color: $color-white;
+  width: 3rem;
+  height: 3rem;
+  border-radius: $border-solid-border-radius;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition: background-color $animation-duration-immediate;
+
+  &:focus {
+    outline: none;
   }
 
-  .default {
-    background-color: $color-white;
-    color: $color-purple-800;
+  &:focus-visible::after {
+    $focus-ring-offset: 3px;
+
+    content: '';
+    position: absolute;
+    background: transparent;
+    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});
+  }
+}
 
-    &:hover,
-    &:focus-visible {
-      background-color: $color-gray-200;
-    }
+.default {
+  background-color: $color-white;
+  color: $color-purple-800;
 
-    &.active {
-      background-color: $color-gray-300;
-      color: $color-purple-800;
-    }
+  &:hover,
+  &:focus-visible {
+    background-color: $color-gray-200;
   }
 
-  .secondary {
-    background-color: $color-white;
-    color: $color-blue-500;
+  &.active {
+    background-color: $color-gray-300;
+    color: $color-purple-800;
+  }
+}
 
-    &:hover,
-    &:focus-visible {
-      background-color: $color-blue-100;
-    }
+.secondary {
+  background-color: $color-white;
+  color: $color-blue-500;
 
-    &.active {
-      background-color: $color-blue-200;
-    }
+  &:hover,
+  &:focus-visible {
+    background-color: $color-blue-100;
   }
 
-  .primary {
-    background-color: $color-blue-500;
-    color: $color-white;
+  &.active {
+    background-color: $color-blue-200;
+  }
+}
 
-    &:hover,
-    &:focus-visible {
-      background-color: $color-blue-600;
-    }
+.primary {
+  background-color: $color-blue-500;
+  color: $color-white;
 
-    &.active {
-      background-color: $color-blue-700;
-    }
+  &:hover,
+  &:focus-visible {
+    background-color: $color-blue-600;
   }
 
-  .destructive {
-    background-color: $color-red-500;
-    color: $color-white;
+  &.active {
+    background-color: $color-blue-700;
+  }
+}
 
-    &:hover,
-    &:focus-visible {
-      background-color: $color-red-600;
-    }
+.destructive {
+  background-color: $color-red-500;
+  color: $color-white;
 
-    &.active {
-      background-color: $color-red-700;
-    }
+  &:hover,
+  &:focus-visible {
+    background-color: $color-red-600;
   }
 
-  .secondary-destructive {
-    background-color: $color-white;
-    color: $color-red-600;
+  &.active {
+    background-color: $color-red-700;
+  }
+}
 
-    &:hover,
-    &:focus-visible {
-      background-color: $color-red-100;
-    }
+.secondary-destructive {
+  background-color: $color-white;
+  color: $color-red-600;
 
-    &.active {
-      background-color: $color-red-200;
-    }
+  &:hover,
+  &:focus-visible {
+    background-color: $color-red-100;
   }
 
-  .disabled {
-    opacity: 30%;
-    pointer-events: none;
-
-    &:focus-visible::after {
-      color: rgba($color-purple-800-rgb, 0.3);
-      outline-offset: -2px;
-      background-color: transparent;
-      border-color: transparent;
-      opacity: 100%;
-      outline: $color-purple-800 $border-solid-border-style $border-focus-ring-border-width;
-    }
+  &.active {
+    background-color: $color-red-200;
+  }
+}
+
+.disabled {
+  opacity: 30%;
+  pointer-events: none;
+
+  &:focus-visible::after {
+    color: rgba($color-purple-800-rgb, 0.3);
+    outline-offset: -2px;
+    background-color: transparent;
+    border-color: transparent;
+    opacity: 100%;
+    outline: $color-purple-800 $border-solid-border-style $border-focus-ring-border-width;
   }
 }

package/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/Toolbar.module.scss

@@ -1,8 +1,6 @@
 @import '~@kaizen/design-tokens/sass/color';
 
-@layer kz-components {
-  .toolbar {
-    display: block;
-    border-bottom: 2px solid $color-gray-500;
-  }
+.toolbar {
+  display: block;
+  border-bottom: 2px solid $color-gray-500;
 }

package/src/RichTextEditor/RichTextEditor/subcomponents/ToolbarSection/ToolbarSection.module.scss

@@ -1,17 +1,15 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .toolbarSection {
-    display: inline-flex;
-    align-items: center;
-    gap: $spacing-xs;
-    margin: $spacing-xs 0;
-    padding: 0 $spacing-xs;
-    flex-wrap: wrap;
-  }
+.toolbarSection {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-xs;
+  margin: $spacing-xs 0;
+  padding: 0 $spacing-xs;
+  flex-wrap: wrap;
+}
 
-  .toolbarSection + .toolbarSection {
-    border-inline-start: 1px solid rgba($color-gray-600-rgb, 0.1);
-  }
+.toolbarSection + .toolbarSection {
+  border-inline-start: 1px solid rgba($color-gray-600-rgb, 0.1);
 }

package/src/RichTextEditor/_mixins.scss

@@ -9,8 +9,7 @@
   line-height: $typography-paragraph-body-line-height;
   letter-spacing: $typography-paragraph-body-letter-spacing;
   position: relative;
-  /* stylelint-disable-next-line declaration-no-important */
-  white-space: pre-wrap !important; // Override unlayered TipTap styles from within kz-components layer
+  white-space: pre-wrap;
   box-sizing: content-box;
   color: $color-purple-800;
 

package/src/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.module.scss

@@ -1,7 +1,5 @@
-@layer kz-components {
-  .validationErrorMessage {
-    ul {
-      margin-bottom: 0;
-    }
+.validationErrorMessage {
+  ul {
+    margin-bottom: 0;
   }
 }

package/src/RichTextEditor/utils/plugins/LinkManager/components/LinkPopover/LinkPopover.module.scss

@@ -1,30 +1,28 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .popoverContent {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+.popoverContent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
-  .popoverLinkContainer {
-    padding-inline: $spacing-8 $spacing-12;
-  }
+.popoverLinkContainer {
+  padding-inline: $spacing-8 $spacing-12;
+}
 
-  .popoverLink {
-    max-width: 300px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+.popoverLink {
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-  .paragraphFlex {
-    display: inline-flex;
-  }
+.paragraphFlex {
+  display: inline-flex;
+}
 
-  .popoverActions {
-    padding-inline: $spacing-4 $spacing-4;
-    border-left: 1px solid rgba($color-gray-600-rgb, 0.1);
-  }
+.popoverActions {
+  padding-inline: $spacing-4 $spacing-4;
+  border-left: 1px solid rgba($color-gray-600-rgb, 0.1);
 }

package/src/RichTextEditor/utils/schema/marks.ts

@@ -1,8 +1,8 @@
-import type { Mark, MarkSpec } from 'prosemirror-model'
+import type { MarkSpec, Node } from 'prosemirror-model'
 import { marks as proseMarks } from 'prosemirror-schema-basic'
 import { validateLink } from '../plugins/LinkManager/validation'
 
-export const getMarks = (): Record<string, MarkSpec> => ({
+export const getMarks = (): MarkSpec => ({
   ...proseMarks,
 
   // An underline mark. Rendered as a `<u>` element. Has parse rules that also
@@ -26,19 +26,18 @@ export const getMarks = (): Record<string, MarkSpec> => ({
     parseDOM: [
       {
         tag: 'a[href]',
-        getAttrs(dom: HTMLElement) {
-          const anchor = dom as HTMLAnchorElement
+        getAttrs(dom: HTMLAnchorElement) {
           return {
-            href: getAttributeWithDefault(anchor, 'href'),
-            target: getAttributeWithDefault(anchor, 'target'),
-            rel: getAttributeWithDefault(anchor, 'rel'),
+            href: getAttributeWithDefault(dom, 'href'),
+            target: getAttributeWithDefault(dom, 'target'),
+            rel: getAttributeWithDefault(dom, 'rel'),
             _metadata: null,
           }
         },
       },
     ],
-    toDOM(mark: Mark) {
-      const { href, target, rel } = mark.attrs
+    toDOM(node: Node) {
+      const { href, target, rel } = node.attrs
       const validationStatus = validateLink(href)
 
       if (validationStatus.status === 'error') {

package/src/SearchField/SearchField.module.scss

@@ -1,8 +1,6 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .label {
-    display: block;
-    margin-bottom: $spacing-xs; // @note: add gap between label and input
-  }
+.label {
+  display: block;
+  margin-bottom: $spacing-xs; // @note: add gap between label and input
 }

package/src/Select/Select.module.scss

@@ -3,23 +3,6 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '~@kaizen/design-tokens/sass/color';
 
-/*
-  NOTE: Select is NOT in @layer kz-components
-
-  Because the styles in this module need to override the un-layered styles
-  provided by react-select, we do not wrap them in @layer kz-components the way
-  we do all other Kaizen components.
-
-  This means that consuming apps will not be able to override these styles with
-  Tailwind v4+ utility styles, which are generated in @layer utilities.
-
-  If we ever need to get these styles into a layer, we may need to update our
-  use of React Select to disable its styles and replace them with a layered
-  version of our own, or perhaps use something like
-  https://github.com/DefinedNet/postcss-assign-layer to assign the components
-  layer to the React Select styles.
-*/
-
 // Should match the values for the Input component
 $input-height: 48px;
 $input-placeholder-opacity: 0.7;

package/src/Skirt/Skirt.module.scss

@@ -3,32 +3,30 @@
 $dt-color-background-color-default: $color-purple-600;
 $dt-color-background-color-education: $color-blue-100;
 
-@layer kz-components {
-  .container {
-    position: relative;
-  }
+.container {
+  position: relative;
+}
 
-  // Actual height is determined in JavaScript
-  .underlay {
-    box-sizing: content-box;
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 100%;
-  }
+// Actual height is determined in JavaScript
+.underlay {
+  box-sizing: content-box;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+}
 
-  .defaultVariant {
-    background-color: $dt-color-background-color-default;
-  }
+.defaultVariant {
+  background-color: $dt-color-background-color-default;
+}
 
-  .educationVariant {
-    background-color: $dt-color-background-color-education;
-  }
+.educationVariant {
+  background-color: $dt-color-background-color-education;
+}
 
-  .content {
-    position: relative;
-    z-index: 2;
-  }
+.content {
+  position: relative;
+  z-index: 2;
 }

package/src/Skirt/subcomponents/SkirtCard/SkirtCard.module.scss

@@ -1,19 +1,17 @@
 @import '~@kaizen/design-tokens/sass/layout';
 @import '../../../Content/variables';
 
-@layer kz-components {
-  .wrapper {
-    @media (max-width: $layout-breakpoints-large) {
-      margin-left: $content-margin-width-on-medium-and-small * -1;
-      margin-right: $content-margin-width-on-medium-and-small * -1;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
+.wrapper {
+  @media (max-width: $layout-breakpoints-large) {
+    margin-left: $content-margin-width-on-medium-and-small * -1;
+    margin-right: $content-margin-width-on-medium-and-small * -1;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
 
-    @media (max-width: $layout-breakpoints-medium) {
-      border-radius: 0;
-      margin-left: $content-margin-width-on-medium-and-small * -1;
-      margin-right: $content-margin-width-on-medium-and-small * -1;
-    }
+  @media (max-width: $layout-breakpoints-medium) {
+    border-radius: 0;
+    margin-left: $content-margin-width-on-medium-and-small * -1;
+    margin-right: $content-margin-width-on-medium-and-small * -1;
   }
 }

package/src/Slider/Slider.module.scss

@@ -2,47 +2,45 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/layout';
 
-@layer kz-components {
-  .wrapper {
-    display: flex;
-    flex-direction: column;
-  }
+.wrapper {
+  display: flex;
+  flex-direction: column;
+}
 
-  .labelWrapper {
-    margin-bottom: $spacing-sm;
-  }
+.labelWrapper {
+  margin-bottom: $spacing-sm;
+}
 
-  .label {
-    margin-bottom: $spacing-4;
-  }
+.label {
+  margin-bottom: $spacing-4;
+}
 
-  @media (min-width: $layout-breakpoints-medium) {
-    .labelInline {
-      &.wrapper {
-        align-items: center;
-        flex-direction: row;
-      }
+@media (min-width: $layout-breakpoints-medium) {
+  .labelInline {
+    &.wrapper {
+      align-items: center;
+      flex-direction: row;
+    }
 
-      .labelWrapper {
-        flex: 1;
-      }
+    .labelWrapper {
+      flex: 1;
+    }
 
-      .inputWrapper {
-        flex-basis: 50%;
-      }
+    .inputWrapper {
+      flex-basis: 50%;
     }
   }
+}
 
-  .descriptionDisabled {
-    opacity: 30%;
-  }
+.descriptionDisabled {
+  opacity: 30%;
+}
 
-  .readOnlyMessage {
-    text-align: center;
-    font-family: $typography-paragraph-small-font-family;
-    font-size: $typography-paragraph-small-font-size;
-    font-weight: $typography-paragraph-bold-font-weight;
-    line-height: $typography-paragraph-body-line-height;
-    letter-spacing: $typography-paragraph-body-letter-spacing;
-  }
+.readOnlyMessage {
+  text-align: center;
+  font-family: $typography-paragraph-small-font-family;
+  font-size: $typography-paragraph-small-font-size;
+  font-weight: $typography-paragraph-bold-font-weight;
+  line-height: $typography-paragraph-body-line-height;
+  letter-spacing: $typography-paragraph-body-letter-spacing;
 }

package/src/SplitButton/SplitButton.module.scss

@@ -1,6 +1,4 @@
-@layer kz-components {
-  .splitButton {
-    display: inline-flex;
-    align-items: center;
-  }
+.splitButton {
+  display: inline-flex;
+  align-items: center;
 }

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

@@ -1,10 +1,8 @@
 @import '~@kaizen/design-tokens/sass/border';
 
-@layer kz-components {
-  .actionButton {
-    border-start-start-radius: $border-solid-border-radius;
-    border-end-start-radius: $border-solid-border-radius;
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
+.actionButton {
+  border-start-start-radius: $border-solid-border-radius;
+  border-end-start-radius: $border-solid-border-radius;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
 }