@kaizen/components 1.78.1 → 1.79.1

package/src/Label/Label.module.scss

@@ -3,101 +3,103 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '../../styles/utils/form-variables';
 
-$label-start-margin: $spacing-xs;
+@layer kz-components {
+  $label-start-margin: $spacing-xs;
 
-.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 {
+    --icon-vertical-align: text-bottom;
+  }
 
-.reversed {
-  color: $color-white;
+  .label,
+  :global(.ideal-sans) .label {
+    // override Murmur global styles :(
+    opacity: inherit;
+    color: $dt-color-form-text-color;
+    visibility: visible;
+    width: 100%;
+    text-align: start;
+  }
 
-  a {
+  .reversed {
     color: $color-white;
 
-    &:hover {
-      text-decoration: none;
+    a {
+      color: $color-white;
+
+      &: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;
+    }
+
+    .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;
+  .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,10 +1,12 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.labelledMessage {
-  display: inline-flex;
-  white-space: nowrap;
-}
+@layer kz-components {
+  .labelledMessage {
+    display: inline-flex;
+    white-space: nowrap;
+  }
 
-.labelSeparator {
-  margin-inline-end: $spacing-6;
+  .labelSeparator {
+    margin-inline-end: $spacing-6;
+  }
 }