chore: update tokens (#1026)

packages/components/src/components/Accordion/Accordion.module.scss

@@ -17,18 +17,18 @@
     align-items: center;
     text-align: start;
     flex-grow: 1;
-    padding-inline: var(--accordion--header-padding-x);
-    padding-block: var(--accordion--header-padding-y);
-    border-radius: var(--accordion--header-corner-radius);
-    column-gap: var(--accordion--heading-to-chevron-spacing);
+    padding-inline: var(--accordion--padding-x);
+    padding-block: var(--accordion--padding-y);
+    border-radius: var(--accordion--corner-radius);
+    column-gap: var(--accordion--spacing);
     border: none;
     background: none;
     width: 100%;
 
     @include focus.focus;
 
     &:hover {
-      background-color: var(--accordion--header-background-color--hover);
+      background-color: var(--accordion--background-color--hover);
     }
   }
 
@@ -37,7 +37,7 @@
     grid-template-rows: 0fr;
     transition-property: grid-template-rows, visibility, padding;
     transition-duration: var(--transition--duration--slow);
-    padding-inline: var(--accordion--content-padding);
+    padding-inline: var(--accordion--padding-x);
     visibility: hidden;
   }
 
@@ -51,16 +51,16 @@
   }
 
   &.outline {
-    border-color: var(--form-control--border-color--default);
-    border-width: var(--form-control--border-width);
-    border-style: var(--form-control--border-style);
-    border-radius: var(--form-control--corner-radius);
+    border-color: var(--accordion--border-color);
+    border-width: var(--accordion--border-width);
+    border-style: var(--accordion--border-style);
+    border-radius: var(--accordion--corner-radius);
   }
 
   &.expanded {
     .content {
       grid-template-rows: 1fr;
-      padding-block: var(--accordion--content-padding);
+      padding-block: var(--accordion--padding-y);
       visibility: visible;
     }
 

packages/components/src/components/Alert/Alert.module.scss

@@ -17,7 +17,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    row-gap: var(--alert--content-to-content-spacing);
+    row-gap: var(--alert--spacing);
   }
 
   /* Status */

packages/components/src/components/AlertBadge/AlertBadge.module.scss

@@ -9,7 +9,7 @@
   padding-block: calc(var(--badge--padding-y) - (var(--badge--border-width)));
   display: flex;
   align-items: center;
-  column-gap: var(--alert-badge--icon-to-text-spacing);
+  column-gap: var(--badge--spacing);
   max-width: fit-content;
   border-style: var(--badge--border-style);
   border-width: var(--badge--border-width);

packages/components/src/components/Badge/Badge.module.scss

@@ -38,7 +38,7 @@
     .button,
     .content {
       padding-inline-end: calc(
-        var(--content-size) + var(--badge--content-to-content-spacing)
+              var(--content-size) + var(--badge--spacing)
       );
     }
   }
@@ -50,13 +50,13 @@
     }
 
     .value {
-      padding-inline-start: var(--badge--content-to-content-spacing);
+      padding-inline-start: var(--badge--spacing);
       padding-inline-end: var(--badge--padding-x);
     }
 
     .scope {
       padding-inline-start: var(--badge--padding-x);
-      padding-inline-end: var(--badge--content-to-content-spacing);
+      padding-inline-end: var(--badge--spacing);
       height: 100%;
       flex-shrink: 0;
     }
@@ -67,7 +67,7 @@
         padding-inline-end: var(--content-size);
 
         .value {
-          padding-inline-end: var(--badge--content-to-content-spacing);
+          padding-inline-end: var(--badge--spacing);
         }
       }
     }
@@ -80,7 +80,7 @@
     border-end-end-radius: var(--badge-size);
     border-start-end-radius: var(--badge-size);
     margin-inline-start: calc(
-      (var(--badge-size) - var(--badge--border-width)) * -1
+            (var(--badge-size) - var(--badge--border-width)) * -1
     );
     margin-top: var(--badge--border-width);
   }
@@ -100,7 +100,6 @@
         .button {
           &:hover {
             background-color: var(--badge--#{$color}-background-color--hover);
-            color: var(--badge--#{$color}-content-color--hover);
           }
 
           &[data-pressed] {

packages/components/src/components/ContextMenu/ContextMenu.module.scss

@@ -15,6 +15,6 @@
 
   &:has(:global(.flow--avatar)) {
     align-items: center;
-    padding-top: var(--context-menu--padding);
+    padding-top: var(--menu--item-to-item-spacing);
   }
 }

packages/components/src/components/CounterBadge/CounterBadge.module.scss

@@ -2,7 +2,7 @@
   font-size: var(--counter-badge--font-size);
   font-weight: var(--counter-badge--font-weight);
   line-height: 1;
-  color: var(--counter-badge--color);
+  color: var(--counter-badge--content-color);
   background-color: var(--counter-badge--background-color);
   width: fit-content;
   display: flex;

packages/components/src/components/List/components/Footer/Footer.module.scss

@@ -3,5 +3,5 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  row-gap: var(--list--content-to-content-spacing);
+  row-gap: var(--list--spacing);
 }

packages/components/src/components/List/components/Header/Header.module.css

@@ -1,7 +1,7 @@
 .header {
   display: flex;
   flex-direction: column;
-  row-gap: var(--list--content-to-content-spacing);
+  row-gap: var(--list--spacing);
 
   .pickerListAndSearch {
     display: flex;
@@ -14,13 +14,13 @@
   .pickerList {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--list--content-to-content-spacing);
+    gap: var(--list--spacing);
   }
 
   .searchAndActions {
     display: flex;
     flex-grow: 1;
-    gap: var(--list--content-to-content-spacing);
+    gap: var(--list--spacing);
     flex-wrap: wrap-reverse;
     justify-content: end;
   }

packages/components/src/components/List/components/Header/components/ActiveFilters/ActiveFilters.module.scss

@@ -1,8 +1,8 @@
 .activeFilters {
   display: flex;
   flex-direction: row;
-  column-gap: var(--list--content-to-content-spacing);
-  row-gap: var(--list--content-to-content-spacing);
+  column-gap: var(--list--spacing);
+  row-gap: var(--list--spacing);
   flex-wrap: wrap;
   align-items: center;
 

packages/components/src/components/List/components/Items/components/Item/components/View/View.module.scss

@@ -3,13 +3,13 @@
 .view {
   display: flex;
   padding: var(--list-item--padding);
-  gap: var(--list-item--content-to-content-spacing);
+  gap: var(--list-item--spacing);
   align-items: start;
 
   .content {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--list-item--content-to-content-spacing);
+    gap: var(--list-item--spacing);
     align-items: center;
     flex-grow: 1;
   }
@@ -18,7 +18,7 @@
     order: 0;
     flex-grow: 1;
     display: grid;
-    grid-column-gap: var(--list-item--content-to-content-spacing);
+    grid-column-gap: var(--list-item--avatar-to-title-spacing);
     grid-template-areas:
       "avatar title   "
       "avatar subtitle";

packages/components/src/components/Modal/Modal.module.scss

@@ -97,8 +97,7 @@
       max-width: calc(100dvw - var(--size-px--xxl));
 
       &[data-entering] {
-        animation: modal-zoom var(--transition--duration--slow)
-          cubic-bezier(0.1, 0.8, 0.3, 1.2);
+        animation: modal-zoom var(--transition--duration--slow) cubic-bezier(0.1, 0.8, 0.3, 1.2);
       }
     }
   }

packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.module.scss

@@ -1,6 +1,7 @@
 .navigationGroup {
   &:not(.collapsable) ul {
-    padding: var(--accordion--content-padding);
+    padding-inline: var(--accordion--padding-x);
+    padding-block: var(--accordion--padding-y);
   }
 
   &:not(:last-child) {
@@ -9,7 +10,7 @@
 
   .label {
     display: block;
-    padding-inline-start: var(--accordion--header-padding-x);
-    padding-block: var(--accordion--header-padding-y);
+    padding-inline-start: var(--accordion--padding-x);
+    padding-block: var(--accordion--padding-y);
   }
 }

packages/components/src/components/Notification/Notification.module.scss

@@ -26,7 +26,7 @@
 
   .heading {
     --button-width: calc(
-      var(--button--line-height-s) + 2 * var(--button--padding-s)
+      var(--button--line-height-s) + 2 * var(--button--padding-s-x)
     );
     padding-inline-end: calc(
       var(--button-width) + var(--heading--icon-to-text-spacing)

packages/components/src/components/Section/Section.module.scss

@@ -1,17 +1,17 @@
 .section {
   display: flex;
   flex-direction: column;
-  row-gap: var(--section--content-to-content-spacing);
+  row-gap: var(--section--spacing);
   container-type: inline-size;
 
   + .section {
     margin-block-start: var(--section--section-to-section-spacing);
   }
 
   &:not(.hideSeparator) + .section {
-    border-block-start-width: var(--section--border-width);
-    border-block-start-style: var(--section--border-style);
-    border-block-start-color: var(--section--border-color);
+    border-block-start-width: var(--separator--height);
+    border-block-start-style: var(--border-style--default);
+    border-block-start-color: var(--separator--color);
     padding-block-start: var(--section--section-to-section-spacing);
   }
 

packages/components/src/components/Section/components/SectionHeader/SectionHeader.module.scss

@@ -1,6 +1,6 @@
 .sectionHeader {
   display: flex;
-  gap: var(--section-header--heading-to-actions-spacing);
+  gap: var(--section-header--heading-to-action-spacing);
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;

packages/design-tokens/src/color-aliases.yml

@@ -582,7 +582,7 @@ dark-outline-background-color:
   pressed:
     value: "{dark.color.200}"
 dark-outline-border-color:
-  value: "{dark.color.700}"
+  value: "{dark.color.800}"
 dark-outline-content-color:
   value: "{dark.color.800}"
 
@@ -630,4 +630,4 @@ light-outline-background-color:
 light-outline-border-color:
   value: "{light.color.800}"
 light-outline-content-color:
-  value: "{light.color.700}"
+  value: "{light.color.800}"

packages/design-tokens/src/status/alert-badge.yml

@@ -1,7 +1,4 @@
 alert-badge:
-  icon-to-text-spacing:
-    value: "{size-rem.xs}"
-
   # Info
   info-background-color:
     value: "{info-soft-background-color.default}"

packages/design-tokens/src/status/alert.yml

@@ -10,9 +10,9 @@ alert:
   border-style:
     value: "{border-style.default}"
   heading-to-content-spacing:
-    value: "{size-rem.xs}"
-  content-to-content-spacing:
     value: "{size-rem.s}"
+  spacing:
+    value: "{size-rem.m}"
   font-size-heading:
     value: "{font-size-text.m}"