@kaizen/components 1.67.1 → 1.67.3

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

@@ -14,19 +14,19 @@
   }
 
   .animatingEnter & {
-    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
-
     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));
   }
 
   .animatingLeave & {
-    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
-
     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));
   }
 }
 

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

@@ -14,22 +14,22 @@
 }
 
 .backdropLayer {
-  @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
-
   position: fixed;
   background-color: #000;
   opacity: 50%;
   z-index: $ca-z-index-modal-backdrop;
-}
 
-.scrollLayer {
   @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;
+
+  @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
 }
 
 .modalLayer {
@@ -84,11 +84,11 @@
   }
 
   [data-modal] {
-    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
-
     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));
   }
 }
 
@@ -104,11 +104,11 @@
   }
 
   [data-modal] {
-    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
-
     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));
   }
 }
 

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

@@ -3,10 +3,10 @@
 @import "../../../../../styles/utils/layers";
 
 .dismissButton {
-  @include ca-position($end: 0, $top: 0);
-
   position: absolute;
   z-index: $ca-z-index-popover;
+
+  @include ca-position($end: 0, $top: 0);
 }
 
 .layout {

package/src/Modal/InputEditModal/InputEditModal.module.scss

@@ -10,19 +10,19 @@
   max-width: 600px;
 
   .animatingEnter & {
-    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
-
     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));
   }
 
   .animatingLeave & {
-    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
-
     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));
   }
 }
 

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

@@ -282,13 +282,16 @@ $notification-slide-right: transform 300ms ease-out;
 }
 
 %ca-notification__cancel {
+  cursor: pointer;
   appearance: none;
-  background: transparent;
-  border: none;
-  font: inherit;
+  transition: none;
+  transform: none;
   margin: 0;
   padding: 0;
-  transition: none;
+  border: none;
+  background: transparent;
+  font: inherit;
+  color: $color-purple-800;
 
   .icon {
     opacity: 70%;
@@ -319,10 +322,6 @@ $notification-slide-right: transform 300ms ease-out;
     }
   }
 
-  cursor: pointer;
-  color: $color-purple-800;
-  transform: none;
-
   &:active {
     transform: translateY(1px);
   }

package/src/RichTextEditor/RichTextEditor/RichTextEditor.module.scss

@@ -6,8 +6,6 @@
 @import "../mixins";
 
 .editor > :global(.ProseMirror) {
-  @include content-styles;
-
   border-radius: $border-solid-border-radius;
   padding: $spacing-sm calc(#{$spacing-xs} * 3);
   position: relative;
@@ -15,6 +13,8 @@
     background-color $animation-duration-immediate,
     border-color $animation-duration-immediate;
 
+  @include content-styles;
+
   &:hover,
   &:focus-visible {
     border-color: $color-gray-600;

package/src/Select/Select.module.scss

@@ -47,15 +47,15 @@ $focus-border-color: $color-blue-500;
   }
 
   .control {
-    &.disabled {
-      opacity: 30%;
-    }
-
     min-height: $input-height;
     border: $border-solid-border-width $border-solid-border-style
       $color-gray-500;
     border-radius: $border-solid-border-radius;
 
+    &.disabled {
+      opacity: 30%;
+    }
+
     &:hover {
       border-color: $color-gray-600;
       background-color: $color-gray-100;
@@ -148,12 +148,12 @@ $focus-border-color: $color-blue-500;
   }
 
   .selectedOption {
+    font-weight: $typography-paragraph-bold-font-weight;
+    color: $color-blue-500;
+
     &:not(.focusedOption) {
       background-color: transparent;
     }
-
-    font-weight: $typography-paragraph-bold-font-weight;
-    color: $color-blue-500;
   }
 
   .disabledOption {

package/src/Table/Table.module.scss

@@ -14,7 +14,9 @@ $row-height-data-variant: 48px;
   text-decoration: none;
   color: $color-purple-800;
   display: block;
+}
 
+@mixin anchor-reset-pseudo-states {
   &:hover,
   &:active,
   &:focus {
@@ -94,6 +96,8 @@ $row-height-data-variant: 48px;
   // Ensures that the 100% doesn't go outside of the `headerRowCell` width
   box-sizing: border-box;
 
+  @include anchor-reset-pseudo-states;
+
   &:focus-visible {
     outline: none;
     position: relative;
@@ -161,8 +165,12 @@ $row-height-data-variant: 48px;
 
 .card {
   @include button-reset;
+  // These css properties are required for when the rows are anchor elements
+  @include anchor-reset;
 
-  background: $color-white;
+  // This is an optical hack to stop the card shadow from overlapping over
+  // the proceeding cards
+  box-shadow: 0 4px 6px rgba(53, 55, 74, 0.04);
   border: solid 1px rgba($color-purple-700-rgb, 0.1);
   transition:
     box-shadow $animation-duration-rapid,
@@ -170,13 +178,9 @@ $row-height-data-variant: 48px;
     margin $animation-duration-rapid,
     padding $animation-duration-rapid,
     width $animation-duration-rapid;
+  background: $color-white;
 
-  // This is an optical hack to stop the card shadow from overlapping over
-  // the proceeding cards
-  box-shadow: 0 4px 6px rgba(53, 55, 74, 0.04);
-
-  // These css properties are required for when the rows are anchor elements
-  @include anchor-reset;
+  @include anchor-reset-pseudo-states;
 
   &:not(:first-child) {
     margin-top: -1px;

package/src/TextArea/TextArea.module.scss

@@ -91,15 +91,15 @@ $input-disabled-border-alpha: 50%;
 
 // Reversed (Dark Backgrounds)
 .textarea.reversed {
+  border-color: rgba($color-white-rgb, 0.65);
+  background: transparent;
+  color: $color-white;
+
   @include form-input-focus-state {
     background: rgba($color-white-rgb, 0.1);
     border-color: $color-white;
   }
 
-  border-color: rgba($color-white-rgb, 0.65);
-  background: transparent;
-  color: $color-white;
-
   @include form-input-placeholder {
     line-height: 1.5;
     color: $color-white;

package/src/TextField/TextField.module.scss

@@ -1,49 +1,23 @@
-@import "~@kaizen/design-tokens/sass/color";
 @import "../../styles/utils/animation";
-@import "../../styles/utils/legacy/layout";
-@import "../../styles/utils/legacy/type";
-
-@mixin input-icon($color, $reversed) {
-  color: $color;
-
-  .withReversed & {
-    color: $reversed;
-  }
-}
 
 .input {
-  margin-top: $spacing-6;
+  margin-top: var(--spacing-6);
 }
 
-$input-disabled-opacity: 0.3;
+.icon {
+  color: var(--textfield-icon-color);
 
-///////////////////////////////////////////////////
-// VALIDATION STYLES
-///////////////////////////////////////////////////
-.success {
-  @include input-icon($color-green-500, $color-green-400);
   @include ca-animation-fade(in);
-
-  &.disabled {
-    @include input-icon(
-      rgba($color-green-500-rgb, $input-disabled-opacity),
-      rgba($color-green-400-rgb, $input-disabled-opacity)
-    );
-  }
 }
 
-.error {
-  @include input-icon($color-red-100, $color-purple-700);
-  @include ca-animation-fade(in);
-}
+.success {
+  --textfield-icon-color: var(--color-green-500);
 
-.caution {
-  @include input-icon($color-yellow-200, $color-purple-700);
-  @include ca-animation-fade(in);
+  .reversed & {
+    --textfield-icon-color: var(--color-green-400);
+  }
 }
 
-.message {
-  &.disabled {
-    opacity: $input-disabled-opacity;
-  }
+.disabled {
+  opacity: 0.3;
 }

package/src/TextField/TextField.tsx

@@ -62,10 +62,7 @@ export const TextField = ({
       id={`${id}-field-group`}
       data-testid={`${id}-field-group`}
       inline={inline}
-      classNameOverride={classnames(
-        styles.withLabel,
-        disabled && styles.withDisabled
-      )}
+      classNameOverride={classnames(reversed && styles.reversed)}
     >
       <Label
         id={`${id}-field-label`}
@@ -88,6 +85,7 @@ export const TextField = ({
           status === "success" && (
             <div
               className={classnames(
+                styles.icon,
                 styles.success,
                 disabled && styles.disabled
               )}

package/src/TextField/_docs/TextField.stickersheet.stories.tsx

@@ -34,7 +34,7 @@ const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <StickerSheet isReversed={isReversed}>
       <StickerSheet.Header
-        headings={["Default", "Hover", "Active", "Focus"]}
+        headings={["Default", "Hover", "Active", "Focus", "Disabled"]}
         hasVerticalHeadings
       />
       <StickerSheet.Body>
@@ -71,6 +71,14 @@ const StickerSheetTemplate: StickerSheetStory = {
               validationMessage="A valid question"
               data-sb-pseudo-styles="focus"
             />
+            <TextFieldExampleGroup
+              reversed={isReversed}
+              labelText="TextField"
+              description="A short description"
+              status={status}
+              validationMessage="A valid question"
+              disabled
+            />
           </StickerSheet.Row>
         ))}
       </StickerSheet.Body>

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

@@ -13,19 +13,18 @@ $tilePaddingTop: $spacing-xl;
 }
 
 .tile {
+  position: relative;
   width: $tileWidth;
-
-  [data-tile-grid] & {
-    width: auto;
-  }
-
   height: $tileHeight;
-  position: relative;
-  box-shadow: $shadow-small-box-shadow;
-  background-color: $color-white;
   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%;

package/src/TitleBlockZen/TitleBlockZen.module.scss

@@ -115,14 +115,13 @@ $tab-container-height-medium-and-small-collapsed: 0;
   align-items: center;
   min-width: 0; // this is an important trick to prevent flexbox items from overflowing
   z-index: $ca-z-index-dropdown; // this ensures the page switcher dropdown sits over nav tabs
+  transform: translateY(-0.0833em);
 
   .hasSubtitle & {
     @include title-block-under-1366 {
       transform: translateY(-0.3833em);
     }
   }
-
-  transform: translateY(-0.0833em);
 }
 
 .titleAndSubtitleInner {
@@ -243,13 +242,12 @@ $tab-container-height-medium-and-small-collapsed: 0;
   line-height: $typography-paragraph-small-line-height;
   letter-spacing: $typography-paragraph-small-letter-spacing;
   max-width: 230px;
+  margin-inline: var(--spacing-12) 0;
 
   .adminVariant & {
     color: $color-purple-800;
   }
 
-  @include ca-margin($start: calc(#{$ca-grid} / 2));
-
   @include title-block-under-1366 {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -285,9 +283,7 @@ $tab-container-height-medium-and-small-collapsed: 0;
 
 .sectionTitleOverride.sectionTitleOverride {
   white-space: nowrap;
-
-  @include ca-margin($end: $ca-grid);
-
+  margin-inline: 0 var(--spacing-24);
   font-family: $typography-heading-2-font-family;
   font-weight: $typography-heading-2-font-weight;
   font-size: $typography-heading-2-font-size;
@@ -316,10 +312,6 @@ $tab-container-height-medium-and-small-collapsed: 0;
 }
 
 .sectionTitleDescription {
-  .sectionTitle + & {
-    margin-top: calc(#{$ca-grid} / 4);
-  }
-
   color: $color-white;
   max-width: 780px;
   font-family: $typography-paragraph-small-font-family;
@@ -328,6 +320,10 @@ $tab-container-height-medium-and-small-collapsed: 0;
   line-height: $typography-paragraph-small-line-height;
   letter-spacing: $typography-paragraph-small-letter-spacing;
 
+  .sectionTitle + & {
+    margin-top: var(--spacing-6);
+  }
+
   &.dark {
     color: rgba($color-purple-800-rgb, 0.7);
   }
@@ -360,30 +356,28 @@ $tab-container-height-medium-and-small-collapsed: 0;
 }
 
 .tag {
-  @include ca-margin($start: calc(#{$ca-grid} / 2));
-
   display: flex;
   align-items: center;
+  margin-inline: var(--spacing-12) 0;
 
   @include title-block-medium-and-small {
     display: none;
   }
 
   + .pageSwitcherSelectNextToTitle {
-    @include ca-margin($start: 0);
+    margin-inline-start: 0;
   }
 }
 
 .pageSwitcherSelectNextToTitle {
-  @include ca-margin($start: calc(#{$ca-grid} / 2));
-
   flex-shrink: 0;
-  width: 10 * $ca-grid;
+  width: var(--spacing-240);
+  margin-inline: var(--spacing-12) 0;
 }
 
 .pageSwitcherSelectUnderneathTitle {
   flex-shrink: 0;
-  max-width: 10 * $ca-grid;
+  max-width: var(--spacing-240);
 }
 
 .navigationTabsContainer {
@@ -558,11 +552,10 @@ $tab-container-height-medium-and-small-collapsed: 0;
 
   @media only screen and (max-width: $breadcrumb-breakpoint-width) {
     position: relative;
+    transform: translateY(0);
+    margin-inline: 0 var(--spacing-12);
 
-    @include ca-margin($end: calc(#{$ca-grid} / 2));
     @include ca-position($start: 0);
-
-    transform: translateY(0);
   }
 
   @include title-block-medium-and-small {

package/src/TitleBlockZen/subcomponents/MobileActions.module.scss

@@ -77,8 +77,6 @@ $slide-up-duration: 0.4s;
 }
 
 .mobileActionsPrimaryLabel {
-  @include ca-padding($start: $ca-grid * 0.75);
-
   text-align: left;
   text-decoration: none;
   color: $color-white;
@@ -87,6 +85,8 @@ $slide-up-duration: 0.4s;
   font-size: $typography-button-primary-font-size;
   line-height: $typography-button-primary-line-height;
   letter-spacing: $typography-button-primary-letter-spacing;
+
+  @include ca-padding($start: $ca-grid * 0.75);
 }
 
 .mobileActionsPrimaryButton,

package/src/__future__/Tag/RemovableTag/subcomponents/RemoveButton.module.scss

@@ -8,6 +8,7 @@
   position: relative;
   display: inline-flex;
   border-radius: 50%;
+  color: rgba($color-purple-800-rgb, 0.7);
 
   &:focus,
   &:focus-visible {
@@ -34,8 +35,6 @@
     border-radius: 50%;
   }
 
-  color: rgba($color-purple-800-rgb, 0.7);
-
   &:hover,
   &:focus,
   &:focus-visible {