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

package/src/Label/Label.module.scss

@@ -3,103 +3,101 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '../../styles/utils/form-variables';
 
-@layer kz-components {
-  $label-start-margin: $spacing-xs;
+$label-start-margin: $spacing-xs;
 
-  .label {
-    --icon-vertical-align: text-bottom;
-  }
+.label {
+  --icon-vertical-align: text-bottom;
+}
 
-  .label,
-  :global(.ideal-sans) .label {
-    // override Murmur global styles :(
-    opacity: inherit;
-    color: $dt-color-form-text-color;
-    visibility: visible;
-    width: 100%;
-    text-align: start;
-  }
+.label,
+:global(.ideal-sans) .label {
+  // override Murmur global styles :(
+  opacity: inherit;
+  color: $dt-color-form-text-color;
+  visibility: visible;
+  width: 100%;
+  text-align: start;
+}
 
-  .reversed {
-    color: $color-white;
+.reversed {
+  color: $color-white;
 
-    a {
-      color: $color-white;
+  a {
+    color: $color-white;
 
-      &:hover {
-        text-decoration: none;
-      }
+    &:hover {
+      text-decoration: none;
     }
   }
+}
 
-  .disabled {
-    opacity: 30%;
-  }
-
-  ///////////////////////////////////////////////////
-  // LABEL TYPES
-  ///////////////////////////////////////////////////
-
-  // This is to override bootstrap styles. Remove when appropriate
-  .text,
-  :global(.ideal-sans) .text {
-    font-family: $typography-heading-6-font-family;
-    font-size: $typography-heading-6-font-size;
-    line-height: $typography-heading-6-line-height;
-    letter-spacing: $typography-heading-6-letter-spacing;
-    font-weight: $typography-heading-6-font-weight;
-  }
+.disabled {
+  opacity: 30%;
+}
 
-  %checkboxOrRadio,
-  :global(.ideal-sans) %checkboxOrRadio {
-    display: flex;
-    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-body-font-weight;
-  }
+///////////////////////////////////////////////////
+// LABEL TYPES
+///////////////////////////////////////////////////
+
+// This is to override bootstrap styles. Remove when appropriate
+.text,
+:global(.ideal-sans) .text {
+  font-family: $typography-heading-6-font-family;
+  font-size: $typography-heading-6-font-size;
+  line-height: $typography-heading-6-line-height;
+  letter-spacing: $typography-heading-6-letter-spacing;
+  font-weight: $typography-heading-6-font-weight;
+}
 
-  .checkbox {
-    @extend %checkboxOrRadio;
-  }
+%checkboxOrRadio,
+:global(.ideal-sans) %checkboxOrRadio {
+  display: flex;
+  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-body-font-weight;
+}
 
-  .radio {
-    @extend %checkboxOrRadio;
-  }
+.checkbox {
+  @extend %checkboxOrRadio;
+}
 
-  .toggle {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    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-body-font-weight;
-  }
+.radio {
+  @extend %checkboxOrRadio;
+}
 
-  .checkbox,
-  .radio,
-  .toggle {
-    // apply padding when label is inline with form control
-    .prependedLabel {
-      order: -1; // place label before the control
-      margin-inline-end: $label-start-margin;
-    }
+.toggle {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  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-body-font-weight;
+}
 
-    .appendedLabel {
-      margin-inline-start: $label-start-margin;
-    }
+.checkbox,
+.radio,
+.toggle {
+  // apply padding when label is inline with form control
+  .prependedLabel {
+    order: -1; // place label before the control
+    margin-inline-end: $label-start-margin;
   }
 
-  .prominent {
-    font-family: $typography-heading-4-font-family;
-    font-weight: $typography-heading-4-font-weight;
-    font-size: $typography-heading-4-font-size;
-    line-height: $typography-heading-4-line-height;
-    letter-spacing: $typography-heading-4-letter-spacing;
-    display: block;
-    margin-bottom: $spacing-xs;
+  .appendedLabel {
+    margin-inline-start: $label-start-margin;
   }
 }
+
+.prominent {
+  font-family: $typography-heading-4-font-family;
+  font-weight: $typography-heading-4-font-weight;
+  font-size: $typography-heading-4-font-size;
+  line-height: $typography-heading-4-line-height;
+  letter-spacing: $typography-heading-4-letter-spacing;
+  display: block;
+  margin-bottom: $spacing-xs;
+}

package/src/LabelledMessage/LabelledMessage.module.scss

@@ -1,12 +1,10 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .labelledMessage {
-    display: inline-flex;
-    white-space: nowrap;
-  }
+.labelledMessage {
+  display: inline-flex;
+  white-space: nowrap;
+}
 
-  .labelSeparator {
-    margin-inline-end: $spacing-6;
-  }
+.labelSeparator {
+  margin-inline-end: $spacing-6;
 }