@kaizen/components 1.56.1 → 1.57.0

package/src/Notification/subcomponents/GenericNotification/_mixins.scss

@@ -5,9 +5,8 @@
 @import "~@kaizen/design-tokens/sass/border";
 @import "~@kaizen/design-tokens/sass/animation";
 
-$notification-vertical-padding: calc(
-  #{$spacing-6} - #{$border-solid-border-width}
-);
+$border-width: var(--border-width-1);
+$notification-vertical-padding: calc(#{$spacing-6} - #{$border-width});
 $notification-fade-out: opacity 200ms ease;
 $notification-collapse-height:
   margin-top 200ms ease,
@@ -27,7 +26,7 @@ $notification-slide-right: transform 300ms ease-out;
   &%ca-notification---inline,
   &%ca-notification---toast {
     margin-bottom: $spacing-24;
-    border: $border-solid-border-width $border-solid-border-style;
+    border: $border-width var(--border-solid-border-style);
     border-radius: $border-solid-border-radius;
   }
 
@@ -57,6 +56,9 @@ $notification-slide-right: transform 300ms ease-out;
     border-width: 0;
     border-radius: 0;
     margin-bottom: 0;
+    padding-top: var(--spacing-16);
+    padding-bottom: var(--spacing-16);
+    padding-inline-start: var(--spacing-8);
     transition: $notification-collapse-height;
     position: relative;
     z-index: 1030;
@@ -65,42 +67,26 @@ $notification-slide-right: transform 300ms ease-out;
   // Types
   &%ca-notification---positive {
     background: $color-green-100;
-    border-color: $color-green-300;
+    border-color: var(--color-green-500);
     color: $color-purple-800;
-
-    &%ca-notification---global {
-      background-color: $color-green-200;
-    }
   }
 
   &%ca-notification---informative {
     background: $color-blue-100;
-    border-color: $color-blue-300;
+    border-color: var(--color-blue-400);
     color: $color-purple-800;
-
-    &%ca-notification---global {
-      background-color: $color-blue-200;
-    }
   }
 
   &%ca-notification---cautionary {
     background: $color-yellow-100;
-    border-color: $color-yellow-400;
+    border-color: var(--color-yellow-700);
     color: $color-purple-800;
-
-    &%ca-notification---global {
-      background-color: $color-yellow-200;
-    }
   }
 
   &%ca-notification---negative {
     background: $color-red-100;
-    border-color: $color-red-300;
+    border-color: var(--color-red-500);
     color: $color-purple-800;
-
-    &%ca-notification---global {
-      background-color: $color-red-200;
-    }
   }
 
   // Hidden state
@@ -162,7 +148,7 @@ $notification-slide-right: transform 300ms ease-out;
   }
 
   %ca-notification---cautionary & {
-    color: $color-yellow-500;
+    color: var(--color-yellow-700);
   }
 
   %ca-notification---negative & {
@@ -177,29 +163,8 @@ $notification-slide-right: transform 300ms ease-out;
   }
 
   %ca-notification---global & {
-    $size: calc(#{$spacing-24} * 1.25);
-
-    width: $size;
-    height: $size;
-    padding: calc(((#{$spacing-24} * 2) - #{$size}) / 2);
-    margin: calc(#{$spacing-24} / 4);
-    border-radius: $border-solid-border-radius;
-
-    // Override the type-specific color values set above
-    color: $color-white;
-  }
-
-  %ca-notification---global%ca-notification---positive & {
-    background-color: $color-green-500;
-  }
-  %ca-notification---global%ca-notification---informative & {
-    background-color: $color-blue-500;
-  }
-  %ca-notification---global%ca-notification---cautionary & {
-    background-color: $color-yellow-500;
-  }
-  %ca-notification---global%ca-notification---negative & {
-    background-color: $color-red-500;
+    width: 24px;
+    height: 24px;
   }
 }
 
@@ -222,8 +187,7 @@ $notification-slide-right: transform 300ms ease-out;
   }
 
   %ca-notification---global & {
-    margin-inline-start: $spacing-12;
-    padding: calc(0.25 * #{$spacing-24}) 0;
+    margin-inline-start: var(--spacing-8);
   }
 
   %ca-notification---inline & {
@@ -298,11 +262,6 @@ $notification-slide-right: transform 300ms ease-out;
       color: $color-blue-500;
       text-decoration: none;
     }
-
-    %ca-notification---global &,
-    %ca-notification---global &:hover {
-      color: $color-purple-800;
-    }
   }
 
   strong {
@@ -363,27 +322,25 @@ $notification-slide-right: transform 300ms ease-out;
   // The negative margins below are so that our clickable area will overlap the notification padding
   %ca-notification---inline &,
   %ca-notification---toast & {
-    width: $spacing-48;
-    height: $spacing-48;
-    margin-top: calc(-1 * #{$spacing-6});
-    margin-bottom: calc(-1 * #{$spacing-6});
+    width: var(--spacing-48);
+    height: var(--spacing-48);
+    margin-top: calc(-1 * var(--spacing-6));
+    margin-bottom: calc(-1 * var(--spacing-6));
   }
 
   %ca-notification---inline & {
-    margin-right: calc(-1 * #{$spacing-12});
+    margin-inline-end: calc(-1 * var(--spacing-12));
   }
 
   %ca-notification---toast & {
-    margin-right: -10px;
+    margin-inline-end: -10px;
   }
 
   %ca-notification---global & {
-    padding-right: calc((5 / 8) * #{$spacing-24});
-    width: 3.75rem;
-    height: 3.75rem;
-    margin-right: -15px;
-    margin-top: calc(-1 * #{$spacing-12});
-    margin-bottom: calc(-1 * #{$spacing-12});
+    width: var(--spacing-48);
+    height: var(--spacing-48);
+    margin-top: calc(-1 * var(--spacing-24));
+    margin-bottom: calc(-1 * var(--spacing-24));
   }
 }
 

package/src/Popover/Popover.module.scss

@@ -31,7 +31,7 @@ $large-width: 450px;
   /* The white fill of the triangle */
   &::after {
     border-top: $arrow-height solid $background-color;
-    margin-top: -2px;
+    margin-top: -1.5px;
     z-index: 1;
   }
 }
@@ -44,24 +44,32 @@ $large-width: 450px;
 }
 
 %box {
-  background: $color-white;
-  border: $border-solid-border-width $border-solid-border-style $color-gray-300;
+  --border-width: var(--border-width-1);
+
+  border: var(--border-width) var(--border-solid-border-style);
   filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.1));
   border-radius: $border-solid-border-radius;
   color: $color-purple-800;
   text-align: left;
-  padding: $spacing-sm 1rem 1rem;
+  padding-block: calc(var(--spacing-12) - var(--border-width))
+    calc(var(--spacing-16) - var(--border-width));
+  padding-inline: calc(var(--spacing-16) - var(--border-width));
 }
 
+$default-box-border-color: var(--color-gray-500);
+
 .defaultBox {
   @extend %box;
+
+  background: var(--color-white);
+  border-color: $default-box-border-color;
 }
 
 .defaultArrow {
-  @include arrow(white, $color-gray-300);
+  @include arrow(var(--color-white), $default-box-border-color);
 }
 
-$informative-box-border-color: $color-blue-300;
+$informative-box-border-color: var(--color-blue-400);
 
 .informativeBox {
   @extend %box;
@@ -74,7 +82,7 @@ $informative-box-border-color: $color-blue-300;
   @include arrow($color-blue-100, $informative-box-border-color);
 }
 
-$positive-box-border-color: $color-green-300;
+$positive-box-border-color: var(--color-green-500);
 
 .positiveBox {
   @extend %box;
@@ -87,7 +95,7 @@ $positive-box-border-color: $color-green-300;
   @include arrow($color-green-100, $positive-box-border-color);
 }
 
-$negative-box-border-color: $color-red-300;
+$negative-box-border-color: var(--color-red-500);
 
 .negativeBox {
   @extend %box;
@@ -100,15 +108,17 @@ $negative-box-border-color: $color-red-300;
   @include arrow($color-red-100, $negative-box-border-color);
 }
 
+$cautionary-box-border-color: var(--color-yellow-700);
+
 .cautionaryBox {
   @extend %box;
 
   background: $color-yellow-100;
-  border-color: $color-yellow-400;
+  border-color: $cautionary-box-border-color;
 }
 
 .cautionaryArrow {
-  @include arrow($color-yellow-100, $color-yellow-400);
+  @include arrow($color-yellow-100, $cautionary-box-border-color);
 }
 
 .header {
@@ -143,7 +153,7 @@ $negative-box-border-color: $color-red-300;
 }
 
 .cautionaryIcon {
-  color: $color-yellow-500;
+  color: var(--color-yellow-700);
 }
 
 .close {

package/src/Tag/Tag.module.scss

@@ -187,7 +187,7 @@ $small: $spacing-md;
   background-color: $color-yellow-100;
 
   .validationIcon {
-    color: $color-yellow-500;
+    color: var(--color-yellow-700);
   }
 }
 

package/src/Tile/InformationTile/_docs/InformationTile.stickersheet.stories.tsx

@@ -8,7 +8,7 @@ import { moodsList } from "../../subcomponents/GenericTile/types"
 import { InformationTile } from "../index"
 
 export default {
-  title: "Components/Tile/InformationTile",
+  title: "Components/Tiles/InformationTile",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },
@@ -19,10 +19,10 @@ const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
     <StickerSheet>
       <StickerSheet.Body>
-        {moodsList.map(mood => (
+        {(["default", ...moodsList] as const).map(mood => (
           <StickerSheet.Row key={mood} rowTitle={mood}>
             <InformationTile
-              mood={mood}
+              mood={mood === "default" ? undefined : mood}
               title="Title"
               metadata="Side A"
               information="Side B"

package/src/Tile/MultiActionTile/_docs/MultiActionTile.stickersheet.stories.tsx

@@ -19,10 +19,10 @@ const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
     <StickerSheet>
       <StickerSheet.Body>
-        {moodsList.map(mood => (
+        {(["default", ...moodsList] as const).map(mood => (
           <StickerSheet.Row key={mood} rowTitle={mood}>
             <MultiActionTile
-              mood={mood}
+              mood={mood === "default" ? undefined : mood}
               title="Title"
               metadata="Side A"
               information="Side B"

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

@@ -1,3 +1,4 @@
+@import "~@kaizen/design-tokens/sass/border";
 @import "~@kaizen/design-tokens/sass/color";
 @import "~@kaizen/design-tokens/sass/shadow";
 @import "~@kaizen/design-tokens/sass/spacing";
@@ -44,6 +45,7 @@ $tilePaddingTop: $spacing-xl;
 .face {
   position: absolute;
   background-color: $color-white;
+  border: var(--border-width-1) var(--border-solid-border-style);
   border-radius: 7px;
   box-sizing: border-box;
   display: flex;
@@ -60,36 +62,40 @@ $tilePaddingTop: $spacing-xl;
 
 .faceFront {
   justify-content: space-between;
+  border-color: var(--color-gray-500);
   padding: $tilePaddingTop $spacing-md $spacing-md;
 }
 
 .faceBack {
   padding-top: $tilePaddingTop;
   transform: rotateY(180deg);
+  border-color: var(--color-blue-400);
   background-color: $color-blue-100;
 }
 
 .faceMoodPositive {
+  border-color: var(--color-green-500);
   background-color: $color-green-100;
 }
 
 .faceMoodInformative {
+  border-color: var(--color-blue-400);
   background-color: $color-blue-100;
 }
 
 .faceMoodCautionary {
+  border-color: var(--color-yellow-700);
   background-color: $color-yellow-100;
 }
 
+.faceMoodNegative,
 .faceMoodAssertive {
-  background-color: $color-orange-100;
-}
-
-.faceMoodNegative {
+  border-color: var(--color-red-500);
   background-color: $color-red-100;
 }
 
 .faceMoodProminent {
+  border-color: var(--color-purple-400);
   background-color: $color-purple-100;
 }
 

package/src/Tile/subcomponents/GenericTile/_docs/GenericTile.stickersheet.stories.tsx

@@ -19,10 +19,10 @@ const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <StickerSheet isReversed={isReversed}>
       <StickerSheet.Body>
-        {moodsList.map(mood => (
+        {(["default", ...moodsList] as const).map(mood => (
           <StickerSheet.Row key={mood} rowTitle={mood}>
             <GenericTile
-              mood={mood}
+              mood={mood === "default" ? undefined : mood}
               title="Title"
               metadata="metadata"
               information="string"

package/src/Well/Well.module.scss

@@ -3,6 +3,7 @@
 @import "~@kaizen/design-tokens/sass/spacing";
 
 .container {
+  border-width: $border-width-1;
   border-radius: $border-solid-border-radius;
   margin-bottom: $spacing-md;
 }
@@ -12,60 +13,57 @@
 }
 
 // Background Style Variations
+.default {
+  background-color: var(--color-gray-200);
+  border-color: $color-gray-500;
+}
+
 .positive {
   background: $color-green-100;
-  border-color: $color-green-300;
+  border-color: $color-green-500;
   color: $color-purple-800;
 }
 
 .negative {
   background: $color-red-100;
-  border-color: $color-red-300;
+  border-color: $color-red-500;
   color: $color-purple-800;
 }
 
 .informative {
   background: $color-blue-100;
-  border-color: $color-blue-300;
+  border-color: $color-blue-400;
   color: $color-purple-800;
 }
 
 .cautionary {
   background: $color-yellow-100;
-  border-color: $color-yellow-400;
+  border-color: $color-yellow-700;
   color: $color-purple-800;
 }
 
 .assertive {
   background: $color-orange-100;
-  border-color: $color-orange-300;
+  border-color: $color-orange-600;
   color: $color-purple-800;
 }
 
 .prominent {
   background: $color-purple-100;
-  border-color: $color-purple-300;
+  border-color: $color-purple-400;
   color: $color-purple-800;
 }
 
-.default {
-  background-color: $color-gray-300;
-  border-color: rgba($color-gray-600-rgb, 0.1);
-}
-
 // Border Style Variations
 .solid {
   border-style: $border-solid-border-style;
-  border-width: $border-solid-border-width;
 }
 
 .dashed {
   border-style: $border-dashed-border-style;
-  border-width: $border-dashed-border-width;
 }
 
 .none {
   border-color: $border-borderless-border-color;
   border-style: $border-borderless-border-style;
-  border-width: $border-borderless-border-width;
 }

package/src/__overlays__/Tooltip/v1/Tooltip.module.scss

@@ -14,7 +14,7 @@
 
 .tooltipContent {
   max-width: 400px;
-  padding: 0.4375rem 0.5313rem;
+  padding: var(--spacing-8) calc(9rem / 16); // 8px 9px
   color: $color-purple-800;
   text-align: center;
   font-family: $typography-paragraph-body-font-family;
@@ -22,6 +22,7 @@
   font-weight: $typography-paragraph-body-font-weight;
   letter-spacing: $typography-paragraph-body-letter-spacing;
   line-height: $typography-paragraph-small-line-height;
+  border: var(--border-width-1) var(--border-solid-border-style);
   border-radius: $border-solid-border-radius;
   transition:
     opacity $animation-duration-fast,
@@ -30,32 +31,27 @@
 
   &.default {
     background-color: $color-white;
-    border: $border-solid-border-width $border-solid-border-style
-      $color-gray-300;
+    border-color: var(--color-gray-500);
   }
 
   &.informative {
     background-color: $color-blue-100;
-    border: $border-solid-border-width $border-solid-border-style
-      $color-blue-300;
+    border-color: var(--color-blue-400);
   }
 
   &.positive {
     background-color: $color-green-100;
-    border: $border-solid-border-width $border-solid-border-style
-      $color-green-300;
+    border-color: var(--color-green-500);
   }
 
   &.cautionary {
     background-color: $color-yellow-100;
-    border: $border-solid-border-width $border-solid-border-style
-      $color-yellow-300;
+    border-color: var(--color-yellow-700);
   }
 
   &.highlight {
     background-color: $color-purple-100;
-    border: $border-solid-border-width $border-solid-border-style
-      $color-purple-300;
+    border-color: var(--color-purple-400);
   }
 }
 
@@ -112,27 +108,27 @@
 .arrowMain {
   // before styles
   &.default::before {
-    border-top: $arrow-height solid $color-gray-300;
+    border-top: $arrow-height solid var(--color-gray-500);
   }
 
   &.informative::before {
-    border-top: $arrow-height solid $color-blue-300;
+    border-top: $arrow-height solid var(--color-blue-400);
   }
 
   &.positive::before {
-    border-top: $arrow-height solid $color-green-300;
+    border-top: $arrow-height solid var(--color-green-500);
   }
 
   &.highlight::before {
-    border-top: $arrow-height solid $color-purple-300;
+    border-top: $arrow-height solid var(--color-purple-400);
   }
 
   &.cautionary::before {
-    border-top: $arrow-height solid $color-yellow-300;
+    border-top: $arrow-height solid var(--color-yellow-700);
   }
   // after styles
   &::after {
-    margin-top: -3px;
+    margin-top: -1.5px;
   }
 
   &.default::after {