@kaizen/components 1.78.0 → 1.79.0

package/src/Modal/ContextModal/ContextModal.module.scss

@@ -3,104 +3,106 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '../GenericModal/GenericModal.module';
 
-.modal {
-  @extend %genericModal;
+@layer kz-components {
+  .modal {
+    @extend %genericModal;
 
-  min-width: 300px;
-  max-width: 840px;
+    min-width: 300px;
+    max-width: 840px;
 
-  @media (min-width: $layout-breakpoints-medium) {
-    width: 90%;
-  }
+    @media (min-width: $layout-breakpoints-medium) {
+      width: 90%;
+    }
 
-  .animatingEnter & {
-    animation-duration: $ca-duration-fast;
-    animation-fill-mode: forwards;
-    animation-timing-function: $ca-bounce-in;
+    .animatingEnter & {
+      animation-duration: $ca-duration-fast;
+      animation-fill-mode: forwards;
+      animation-timing-function: $ca-bounce-in;
 
-    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
-  }
+      @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
+    }
 
-  .animatingLeave & {
-    animation-duration: $ca-duration-rapid;
-    animation-fill-mode: forwards;
-    animation-timing-function: $ca-bounce-out;
+    .animatingLeave & {
+      animation-duration: $ca-duration-rapid;
+      animation-fill-mode: forwards;
+      animation-timing-function: $ca-bounce-out;
 
-    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
+      @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
+    }
   }
-}
 
-.header {
-  color: $color-purple-800;
-  text-align: start;
+  .header {
+    color: $color-purple-800;
+    text-align: start;
 
-  &.padded {
-    padding: $spacing-md;
+    &.padded {
+      padding: $spacing-md;
 
-    @media (min-width: $layout-breakpoints-medium) {
-      padding: $spacing-md $spacing-lg;
+      @media (min-width: $layout-breakpoints-medium) {
+        padding: $spacing-md $spacing-lg;
+      }
     }
   }
-}
 
-%footer {
-  white-space: initial;
+  %footer {
+    white-space: initial;
 
-  @media (min-width: $layout-breakpoints-medium) {
-    white-space: nowrap;
+    @media (min-width: $layout-breakpoints-medium) {
+      white-space: nowrap;
+    }
   }
-}
-
-.footer {
-  @extend %footer;
-}
 
-.footerWithSecondaryAction {
-  @extend %footer;
+  .footer {
+    @extend %footer;
+  }
 
-  margin-inline-start: calc(-1 * #{$spacing-sm});
-}
+  .footerWithSecondaryAction {
+    @extend %footer;
 
-.emptyFooter {
-  height: $spacing-sm;
-}
+    margin-inline-start: calc(-1 * #{$spacing-sm});
+  }
 
-.portraitContentlayout {
-  padding: $spacing-md;
-  display: block;
-  box-sizing: content-box;
-
-  @media (min-width: $layout-breakpoints-medium) {
-    display: grid;
-    max-width: 800px;
-    grid-auto-columns: 1fr;
-    grid-auto-flow: column;
-    column-gap: $spacing-xl;
-    padding: $spacing-md $spacing-lg;
+  .emptyFooter {
+    height: $spacing-sm;
   }
-}
 
-.landscapeContentlayout {
-  display: flex;
-  padding: $spacing-md;
-  flex-direction: column;
+  .portraitContentlayout {
+    padding: $spacing-md;
+    display: block;
+    box-sizing: content-box;
 
-  @media (min-width: $layout-breakpoints-medium) {
-    padding: $spacing-md $spacing-lg;
+    @media (min-width: $layout-breakpoints-medium) {
+      display: grid;
+      max-width: 800px;
+      grid-auto-columns: 1fr;
+      grid-auto-flow: column;
+      column-gap: $spacing-xl;
+      padding: $spacing-md $spacing-lg;
+    }
   }
 
-  .image {
+  .landscapeContentlayout {
     display: flex;
+    padding: $spacing-md;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .content {
-    padding-inline-start: 0;
 
     @media (min-width: $layout-breakpoints-medium) {
-      max-width: 100%;
+      padding: $spacing-md $spacing-lg;
+    }
+
+    .image {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .content {
+      padding-inline-start: 0;
+
+      @media (min-width: $layout-breakpoints-medium) {
+        max-width: 100%;
+      }
     }
   }
 }

package/src/Modal/GenericModal/GenericModal.module.scss

@@ -8,123 +8,125 @@
 @import '../../../styles/utils/border';
 @import '../../../styles/utils/animation';
 
-.defaultModalWidth {
-  min-width: 300px;
-  max-width: 600px;
-}
+@layer kz-components {
+  .defaultModalWidth {
+    min-width: 300px;
+    max-width: 600px;
+  }
 
-.backdropLayer {
-  position: fixed;
-  background-color: #000;
-  opacity: 50%;
-  z-index: $ca-z-index-modal-backdrop;
+  .backdropLayer {
+    position: fixed;
+    background-color: #000;
+    opacity: 50%;
+    z-index: $ca-z-index-modal-backdrop;
 
-  @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
-}
+    @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
+  }
 
-.scrollLayer {
-  position: fixed;
-  display: flex;
-  align-items: center;
-  z-index: $ca-z-index-modal;
-  overflow-y: auto;
+  .scrollLayer {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    z-index: $ca-z-index-modal;
+    overflow-y: auto;
 
-  @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
-}
-
-.modalLayer {
-  // use flexbox auto margins to horizontally and vertically centre the modal
-  // because in IE11, `align-items: center` and `justify-content: center` cause
-  // long modal content to become unreachable if they go off-screen
-  margin: auto;
-  padding: $ca-grid 0;
-  width: 100%;
-}
+    @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
+  }
 
-%genericModal {
-  margin: auto;
-  background-color: $color-white;
-  border-radius: $border-solid-border-radius;
-  box-shadow: $shadow-large-box-shadow;
-  position: relative;
-  width: 90%;
-  -webkit-font-smoothing: antialiased;
-  color: $color-purple-800;
-
-  @include ca-media-tablet-and-up {
+  .modalLayer {
+    // use flexbox auto margins to horizontally and vertically centre the modal
+    // because in IE11, `align-items: center` and `justify-content: center` cause
+    // long modal content to become unreachable if they go off-screen
+    margin: auto;
+    padding: $ca-grid 0;
     width: 100%;
   }
 
-  // wrap the modal container with a focus ring when the title has focus
-  // for the rebuild: rather than putting the focus on the title, put it on the role=dialog element itself
-  &:has(:global([class*='modalLabel']):focus-visible) {
-    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-      var(--color-blue-300);
-    outline-offset: 2px;
+  %genericModal {
+    margin: auto;
+    background-color: $color-white;
+    border-radius: $border-solid-border-radius;
+    box-shadow: $shadow-large-box-shadow;
+    position: relative;
+    width: 90%;
+    -webkit-font-smoothing: antialiased;
+    color: $color-purple-800;
+
+    @include ca-media-tablet-and-up {
+      width: 100%;
+    }
+
+    // wrap the modal container with a focus ring when the title has focus
+    // for the rebuild: rather than putting the focus on the title, put it on the role=dialog element itself
+    &:has(:global([class*='modalLabel']):focus-visible) {
+      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+        var(--color-blue-300);
+      outline-offset: 2px;
+    }
   }
-}
 
-.transitionLayer {
-  transition: opacity $ca-duration-fast ease-in-out;
-  opacity: 1;
+  .transitionLayer {
+    transition: opacity $ca-duration-fast ease-in-out;
+    opacity: 1;
 
-  .backdropLayer {
-    /*
+    .backdropLayer {
+      /*
       There's a weird bug in Chrome/Blink 102.x that animates the opacity
       all the way to 1 with 200ms ("rapid" token), but is fine with
       201ms, see Jira [KDS-523]
     */
-    @include ca-animation-fade($duration: 201ms, $from: 0, $to: 0.5);
-  }
+      @include ca-animation-fade($duration: 201ms, $from: 0, $to: 0.5);
+    }
 
-  [data-modal] {
-    animation-duration: $ca-duration-fast;
-    animation-fill-mode: forwards;
-    animation-timing-function: $ca-bounce-in;
+    [data-modal] {
+      animation-duration: $ca-duration-fast;
+      animation-fill-mode: forwards;
+      animation-timing-function: $ca-bounce-in;
 
-    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
+      @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
+    }
   }
-}
 
-// WAITING FOR TEXTFIELD
-.animatingEnter {
-  [data-modal] {
-    animation-duration: $ca-duration-fast;
-    animation-fill-mode: forwards;
-    animation-timing-function: $ca-bounce-in;
+  // WAITING FOR TEXTFIELD
+  .animatingEnter {
+    [data-modal] {
+      animation-duration: $ca-duration-fast;
+      animation-fill-mode: forwards;
+      animation-timing-function: $ca-bounce-in;
 
-    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
+      @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
+    }
   }
-}
 
-.animatingLeave {
-  transition-duration: $ca-duration-rapid;
-  opacity: 0;
+  .animatingLeave {
+    transition-duration: $ca-duration-rapid;
+    opacity: 0;
 
-  .backdropLayer {
-    @include ca-animation-fade($duration: $ca-duration-rapid, $from: 0.5, $to: 0);
-  }
+    .backdropLayer {
+      @include ca-animation-fade($duration: $ca-duration-rapid, $from: 0.5, $to: 0);
+    }
 
-  [data-modal] {
-    animation-duration: $ca-duration-rapid;
-    animation-fill-mode: forwards;
-    animation-timing-function: $ca-bounce-out;
+    [data-modal] {
+      animation-duration: $ca-duration-rapid;
+      animation-fill-mode: forwards;
+      animation-timing-function: $ca-bounce-out;
 
-    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
+      @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
+    }
   }
-}
 
-.unscrollable {
-  /* Tech debt - this !important existed before Stylelint rules */
-  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
-}
+  .unscrollable {
+    /* Tech debt - this !important existed before Stylelint rules */
+    overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
+  }
 
-.pseudoScrollbar {
-  /* Tech debt - this !important existed before Stylelint rules */
-  padding-inline-end: 15px !important; /* stylelint-disable-line declaration-no-important */
-}
+  .pseudoScrollbar {
+    /* Tech debt - this !important existed before Stylelint rules */
+    padding-inline-end: 15px !important; /* stylelint-disable-line declaration-no-important */
+  }
 
-.hide {
-  opacity: 0%;
-  pointer-events: none;
+  .hide {
+    opacity: 0%;
+    pointer-events: none;
+  }
 }

package/src/Modal/GenericModal/subcomponents/ModalAccessibleDescription/ModalAccessibleDescription.module.scss

@@ -1,3 +1,5 @@
-.modalDescription {
-  grid-column-start: 2;
+@layer kz-components {
+  .modalDescription {
+    grid-column-start: 2;
+  }
 }

package/src/Modal/GenericModal/subcomponents/ModalAccessibleLabel/ModalAccessibleLabel.module.scss

@@ -2,35 +2,37 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '~@kaizen/design-tokens/sass/layout';
 
-// TODO - Remove below styles for Heading once responsive styling has been added to the Heading Component
-$ca-breakpoint-small-mobile: 375px;
+@layer kz-components {
+  // TODO - Remove below styles for Heading once responsive styling has been added to the Heading Component
+  $ca-breakpoint-small-mobile: 375px;
 
-@mixin ca-media-small-mobile {
-  @media (max-width: #{$ca-breakpoint-small-mobile}) {
-    @content;
+  @mixin ca-media-small-mobile {
+    @media (max-width: #{$ca-breakpoint-small-mobile}) {
+      @content;
+    }
   }
-}
 
-.modalLabel {
-  // TODO - Remove below styles for Heading once responsive styling has been added to the Heading Component
-  h2 {
-    @media (max-width: $layout-breakpoints-medium) {
-      font-size: 1.625rem;
-      line-height: 2rem;
-    }
+  .modalLabel {
+    // TODO - Remove below styles for Heading once responsive styling has been added to the Heading Component
+    h2 {
+      @media (max-width: $layout-breakpoints-medium) {
+        font-size: 1.625rem;
+        line-height: 2rem;
+      }
 
-    @include ca-media-small-mobile {
-      font-size: 1.5rem;
-      line-height: 1.875rem;
+      @include ca-media-small-mobile {
+        font-size: 1.5rem;
+        line-height: 1.875rem;
+      }
     }
-  }
 
-  &.prominent {
-    grid-column-start: 2;
-    text-align: start;
-  }
+    &.prominent {
+      grid-column-start: 2;
+      text-align: start;
+    }
 
-  &:focus {
-    outline: none;
+    &:focus {
+      outline: none;
+    }
   }
 }

package/src/Modal/GenericModal/subcomponents/ModalBody/ModalBody.module.scss

@@ -1,7 +1,9 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/border';
 
-.inputEdit {
-  background-color: $color-gray-200;
-  border-radius: $border-solid-border-radius;
+@layer kz-components {
+  .inputEdit {
+    background-color: $color-gray-200;
+    border-radius: $border-solid-border-radius;
+  }
 }

package/src/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.module.scss

@@ -2,74 +2,76 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/layout';
 
-.actions {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: flex-start;
-}
+@layer kz-components {
+  .actions {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-start;
+  }
 
-.actionsAlignStart {
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-}
+  .actionsAlignStart {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+  }
 
-.padded {
-  padding: $spacing-md;
-  flex-direction: column;
+  .padded {
+    padding: $spacing-md;
+    flex-direction: column;
 
-  @media (min-width: $layout-breakpoints-medium) {
-    padding: 0 $spacing-lg $spacing-lg;
-    flex-direction: row-reverse;
+    @media (min-width: $layout-breakpoints-medium) {
+      padding: 0 $spacing-lg $spacing-lg;
+      flex-direction: row-reverse;
+    }
   }
-}
 
-.actionButton {
-  width: 100%;
+  .actionButton {
+    width: 100%;
 
-  @media (min-width: $layout-breakpoints-medium) {
-    width: inherit;
+    @media (min-width: $layout-breakpoints-medium) {
+      width: inherit;
+    }
   }
-}
 
-.actionButton + .actionButton {
-  margin-inline-end: $spacing-sm;
+  .actionButton + .actionButton {
+    margin-inline-end: $spacing-sm;
 
-  @media (max-width: (calc(#{$layout-breakpoints-medium} - 1px))) {
-    margin-block-start: $spacing-sm;
+    @media (max-width: (calc(#{$layout-breakpoints-medium} - 1px))) {
+      margin-block-start: $spacing-sm;
+    }
   }
-}
 
-.footerWrap {
-  align-items: baseline;
-  width: 100%;
-  box-sizing: border-box;
-}
+  .footerWrap {
+    align-items: baseline;
+    width: 100%;
+    box-sizing: border-box;
+  }
 
-.center {
-  display: flex;
-  justify-content: center;
-}
+  .center {
+    display: flex;
+    justify-content: center;
+  }
 
-.border {
-  border-block-start: 1px solid $border-solid-border-color;
-}
+  .border {
+    border-block-start: 1px solid $border-solid-border-color;
+  }
 
-.start {
-  display: flex;
-  justify-content: flex-start;
-}
+  .start {
+    display: flex;
+    justify-content: flex-start;
+  }
 
-.end {
-  display: flex;
-  justify-content: flex-end;
-}
+  .end {
+    display: flex;
+    justify-content: flex-end;
+  }
 
-.fixed {
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-}
+  .fixed {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+  }
 
-.filler {
-  visibility: hidden;
+  .filler {
+    visibility: hidden;
+  }
 }

package/src/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.module.scss

@@ -2,23 +2,25 @@
 @import '../../../../../styles/utils/legacy/layout';
 @import '../../../../../styles/utils/layers';
 
-.dismissButton {
-  position: absolute;
-  z-index: $ca-z-index-popover;
+@layer kz-components {
+  .dismissButton {
+    position: absolute;
+    z-index: $ca-z-index-popover;
 
-  @include ca-position($end: 0, $top: 0);
-}
+    @include ca-position($end: 0, $top: 0);
+  }
 
-.layout {
-  width: 100%;
-}
+  .layout {
+    width: 100%;
+  }
 
-.fixed {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-}
+  .fixed {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
 
-.filler {
-  visibility: hidden;
+  .filler {
+    visibility: hidden;
+  }
 }