@kaizen/components 1.67.1 → 1.67.2

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 {