@kaizen/components 1.78.0 → 1.79.0

package/src/Tile/subcomponents/GenericTile/GenericTile.module.scss

@@ -6,150 +6,152 @@
 @import '../../../../styles/utils/responsive';
 @import './variables';
 
-$tilePaddingTop: $spacing-xl;
+@layer kz-components {
+  $tilePaddingTop: $spacing-xl;
 
-.root {
-  perspective: 800px;
-}
-
-.tile {
-  position: relative;
-  width: $tileWidth;
-  height: $tileHeight;
-  transition: transform $ca-duration-slow $ca-default;
-  transform-style: preserve-3d;
-  box-shadow: $shadow-small-box-shadow;
-  border-radius: 7px;
-  background-color: $color-white;
-
-  [data-tile-grid] & {
-    width: auto;
+  .root {
+    perspective: 800px;
   }
 
-  @include ca-media-mobile {
-    width: 100%;
-    min-width: 226px;
-    max-width: $tileHeight;
+  .tile {
+    position: relative;
+    width: $tileWidth;
+    height: $tileHeight;
+    transition: transform $ca-duration-slow $ca-default;
+    transform-style: preserve-3d;
+    box-shadow: $shadow-small-box-shadow;
+    border-radius: 7px;
+    background-color: $color-white;
+
+    [data-tile-grid] & {
+      width: auto;
+    }
+
+    @include ca-media-mobile {
+      width: 100%;
+      min-width: 226px;
+      max-width: $tileHeight;
+    }
+
+    @media (max-width: 480px) {
+      max-width: 100%;
+    }
   }
 
-  @media (max-width: 480px) {
-    max-width: 100%;
+  .titleMeta {
+    padding-top: $spacing-4;
   }
-}
 
-.titleMeta {
-  padding-top: $spacing-4;
-}
-
-.face {
-  position: absolute;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  backface-visibility: hidden;
-  border: var(--border-width-1) solid var(--generic-tile-border-color);
-  border-radius: var(--border-solid-border-radius);
-  background-color: var(--generic-tile-background-color);
-
-  * {
+  .face {
+    position: absolute;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    height: 100%;
     backface-visibility: hidden;
+    border: var(--border-width-1) solid var(--generic-tile-border-color);
+    border-radius: var(--border-solid-border-radius);
+    background-color: var(--generic-tile-background-color);
+
+    * {
+      backface-visibility: hidden;
+    }
   }
-}
 
-.faceFront {
-  justify-content: space-between;
-  padding: $tilePaddingTop $spacing-md $spacing-md;
-}
+  .faceFront {
+    justify-content: space-between;
+    padding: $tilePaddingTop $spacing-md $spacing-md;
+  }
 
-.faceBack {
-  --generic-tile-border-color: var(--color-blue-400);
-  --generic-tile-background-color: var(--color-blue-100);
+  .faceBack {
+    --generic-tile-border-color: var(--color-blue-400);
+    --generic-tile-background-color: var(--color-blue-100);
 
-  padding-top: $tilePaddingTop;
-  transform: rotateY(180deg);
-}
+    padding-top: $tilePaddingTop;
+    transform: rotateY(180deg);
+  }
 
-/** @deprecated */
-.positive {
-  --generic-tile-border-color: var(--color-green-500);
-  --generic-tile-background-color: var(--color-green-100);
-}
+  /** @deprecated */
+  .positive {
+    --generic-tile-border-color: var(--color-green-500);
+    --generic-tile-background-color: var(--color-green-100);
+  }
 
-.informative {
-  --generic-tile-border-color: var(--color-blue-400);
-  --generic-tile-background-color: var(--color-blue-100);
-}
+  .informative {
+    --generic-tile-border-color: var(--color-blue-400);
+    --generic-tile-background-color: var(--color-blue-100);
+  }
 
-.cautionary {
-  --generic-tile-border-color: var(--color-yellow-700);
-  --generic-tile-background-color: var(--color-yellow-100);
-}
+  .cautionary {
+    --generic-tile-border-color: var(--color-yellow-700);
+    --generic-tile-background-color: var(--color-yellow-100);
+  }
 
-.negative,
-.assertive {
-  --generic-tile-border-color: var(--color-red-500);
-  --generic-tile-background-color: var(--color-red-100);
-}
+  .negative,
+  .assertive {
+    --generic-tile-border-color: var(--color-red-500);
+    --generic-tile-background-color: var(--color-red-100);
+  }
 
-.prominent {
-  --generic-tile-border-color: var(--color-purple-400);
-  --generic-tile-background-color: var(--color-purple-100);
-}
+  .prominent {
+    --generic-tile-border-color: var(--color-purple-400);
+    --generic-tile-background-color: var(--color-purple-100);
+  }
 
-/** end @deprecated */
-.default {
-  --generic-tile-border-color: var(--color-gray-500);
-  --generic-tile-background-color: var(--color-white);
-}
+  /** end @deprecated */
+  .default {
+    --generic-tile-border-color: var(--color-gray-500);
+    --generic-tile-background-color: var(--color-white);
+  }
 
-.expert-advice {
-  --generic-tile-border-color: var(--color-purple-400);
-  --generic-tile-background-color: var(--color-purple-100);
-}
+  .expert-advice {
+    --generic-tile-border-color: var(--color-purple-400);
+    --generic-tile-background-color: var(--color-purple-100);
+  }
 
-.isFlipped {
-  transform: rotateY(179deg);
-}
+  .isFlipped {
+    transform: rotateY(179deg);
+  }
 
-.title {
-  text-align: center;
-  padding-bottom: $spacing-sm;
-  backface-visibility: hidden;
-}
+  .title {
+    text-align: center;
+    padding-bottom: $spacing-sm;
+    backface-visibility: hidden;
+  }
 
-.actions {
-  display: flex;
-}
+  .actions {
+    display: flex;
+  }
 
-.informationBtn {
-  inset-block-start: 0;
-  inset-inline-end: 0;
-  position: absolute;
-  color: rgba($color-purple-800-rgb, 0.5);
-}
+  .informationBtn {
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    position: absolute;
+    color: rgba($color-purple-800-rgb, 0.5);
+  }
 
-.information {
-  display: flex;
-  padding-bottom: $spacing-md;
-  padding-right: $spacing-md;
-  padding-left: $spacing-md;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  text-align: left;
-  border-radius: 0 0 7px 7px;
-}
+  .information {
+    display: flex;
+    padding-bottom: $spacing-md;
+    padding-right: $spacing-md;
+    padding-left: $spacing-md;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    text-align: left;
+    border-radius: 0 0 7px 7px;
+  }
 
-.footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: $spacing-sm;
-  height: $spacing-xl;
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: $spacing-sm;
+    height: $spacing-xl;
+  }
 }

package/src/TimeField/TimeField.module.scss

@@ -3,69 +3,71 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-$input-height: 48px;
+@layer kz-components {
+  $input-height: 48px;
 
-.wrapper {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  font-family: $typography-paragraph-body-font-family;
-  font-weight: $typography-paragraph-body-font-weight;
-  font-size: $typography-paragraph-body-font-size;
-  line-height: $typography-paragraph-body-line-height;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-  color: $color-purple-800;
-}
+  .wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    font-family: $typography-paragraph-body-font-family;
+    font-weight: $typography-paragraph-body-font-weight;
+    font-size: $typography-paragraph-body-font-size;
+    line-height: $typography-paragraph-body-line-height;
+    letter-spacing: $typography-paragraph-body-letter-spacing;
+    color: $color-purple-800;
+  }
 
-.label {
-  display: block;
-  margin-bottom: $spacing-6;
-}
+  .label {
+    display: block;
+    margin-bottom: $spacing-6;
+  }
 
-.input {
-  display: inline-flex;
-  align-items: center;
-  background-color: $color-white;
-  background-clip: padding-box;
-  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
-  border-radius: $border-solid-border-radius;
-  font-size: $typography-paragraph-body-font-size;
-  line-height: $typography-paragraph-body-line-height;
-  padding: 0 $spacing-sm;
-  height: $input-height;
-  width: 100%;
-  box-sizing: border-box;
+  .input {
+    display: inline-flex;
+    align-items: center;
+    background-color: $color-white;
+    background-clip: padding-box;
+    border: $border-solid-border-width $border-solid-border-style $color-gray-500;
+    border-radius: $border-solid-border-radius;
+    font-size: $typography-paragraph-body-font-size;
+    line-height: $typography-paragraph-body-line-height;
+    padding: 0 $spacing-sm;
+    height: $input-height;
+    width: 100%;
+    box-sizing: border-box;
 
-  &:hover,
-  &:focus-within {
-    border-color: $color-gray-600;
-    background-color: $color-gray-200;
+    &:hover,
+    &:focus-within {
+      border-color: $color-gray-600;
+      background-color: $color-gray-200;
+    }
   }
-}
 
-.input:focus-within {
-  .focusRing {
-    $focus-ring-offset: 3px;
+  .input:focus-within {
+    .focusRing {
+      $focus-ring-offset: 3px;
 
-    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: -$focus-ring-offset;
-    pointer-events: none;
+      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: -$focus-ring-offset;
+      pointer-events: none;
+    }
   }
-}
 
-.isDisabled {
-  pointer-events: none;
-  background-color: transparent;
-  border-color: $color-gray-500;
-  opacity: 30%;
-}
+  .isDisabled {
+    pointer-events: none;
+    background-color: transparent;
+    border-color: $color-gray-500;
+    opacity: 30%;
+  }
 
-.error {
-  border: $border-solid-border-width $border-solid-border-style $color-red-500;
+  .error {
+    border: $border-solid-border-width $border-solid-border-style $color-red-500;
+  }
 }

package/src/TimeField/subcomponents/TimeSegment/TimeSegment.module.scss

@@ -1,47 +1,49 @@
 @import '~@kaizen/design-tokens/sass/color';
 
-// Chrome has a bug where `contenteditable` elements receive focus from external clicks.
-// This (in combination with the invisible character ​) creates boundaries
-// for the element.
-// https://stackoverflow.com/a/34445203
-.timeSegmentWrapper {
-  white-space: nowrap;
-}
-
-.timeSegment {
-  display: block;
-  text-align: end;
-  background-color: $color-gray-300;
-  border-radius: 3px;
-  color: $color-purple-800;
-
-  &:hover {
-    background-color: $color-white;
+@layer kz-components {
+  // Chrome has a bug where `contenteditable` elements receive focus from external clicks.
+  // This (in combination with the invisible character ​) creates boundaries
+  // for the element.
+  // https://stackoverflow.com/a/34445203
+  .timeSegmentWrapper {
+    white-space: nowrap;
   }
 
-  &:focus-visible {
-    color: white;
-    background: $color-blue-500;
-    outline: none;
+  .timeSegment {
+    display: block;
+    text-align: end;
+    background-color: $color-gray-300;
+    border-radius: 3px;
+    color: $color-purple-800;
+
+    &:hover {
+      background-color: $color-white;
+    }
+
+    &:focus-visible {
+      color: white;
+      background: $color-blue-500;
+      outline: none;
+    }
   }
-}
-
-.hasPadding {
-  padding: 0 4px;
-}
 
-.placeholder {
-  color: rgba($color-purple-800-rgb, 0.7);
-}
+  .hasPadding {
+    padding: 0 4px;
+  }
 
-.literal {
-  background: none;
+  .placeholder {
+    color: rgba($color-purple-800-rgb, 0.7);
+  }
 
-  &:hover {
+  .literal {
     background: none;
+
+    &:hover {
+      background: none;
+    }
   }
-}
 
-.dayPeriod {
-  margin-right: 4px;
+  .dayPeriod {
+    margin-right: 4px;
+  }
 }