Update tokens (#985)

mittwald · Nov 28, 2024 · bd159f8 · bd159f8
1 parent 3dfeb49
commit bd159f8
Show file tree

Hide file tree

Showing 31 changed files with 197 additions and 226 deletions.
diff --git a/packages/components/src/components/Breadcrumb/Breadcrumb.module.scss b/packages/components/src/components/Breadcrumb/Breadcrumb.module.scss
@@ -8,23 +8,18 @@
   align-items: center;
 
   .link {
-    padding-inline: var(--breadcrumb-item--padding-x);
-    font-weight: var(--breadcrumb-item--font-weight--default);
+    padding-inline: var(--breadcrumb--spacing);
+    font-weight: var(--breadcrumb--font-weight--default);
+    text-decoration: underline;
 
     @include focus.focus;
 
     & {
       @include ellipsis.ellipsis;
     }
-
-    &:hover {
-      text-decoration: underline;
-    }
   }
 
   .breadcrumbItem {
-    color: var(--breadcrumb-item--color);
-    font-size: var(--breadcrumb-item--font-size);
     display: flex;
     align-items: center;
     min-width: 0;
@@ -36,20 +31,40 @@
 
       .link {
         text-decoration: none;
-        font-weight: var(--breadcrumb-item--font-weight--current);
+        font-weight: var(--breadcrumb--font-weight--current);
       }
     }
-  }
 
-  &.dark {
-    .breadcrumbItem {
-      color: var(--breadcrumb-item--color-dark);
+    &[data-disabled="true"] {
+      .link {
+        cursor: unset;
+      }
     }
   }
 
-  &.light {
-    .breadcrumbItem {
-      color: var(--breadcrumb-item--color-light);
+  /* Colors */
+
+  @mixin variant($color) {
+    &:where(.#{$color}) {
+      .breadcrumbItem {
+        color: var(--breadcrumb--color-#{$color}--default);
+
+        &:not([data-disabled="true"]) {
+          .link {
+            &:hover {
+              color: var(--breadcrumb--color-#{$color}--hover);
+            }
+
+            &[data-pressed] {
+              color: var(--breadcrumb--color-#{$color}--pressed);
+            }
+          }
+        }
+      }
     }
   }
+
+  @include variant(primary);
+  @include variant(dark);
+  @include variant(light);
 }
diff --git a/packages/components/src/components/ContextMenu/ContextMenu.module.scss b/packages/components/src/components/ContextMenu/ContextMenu.module.scss
@@ -3,10 +3,6 @@
   flex-direction: column;
   row-gap: var(--menu--item-to-item-spacing);
 
-  hr {
-    margin-block: var(--menu--separator-to-item-spacing);
-  }
-
   &:focus-visible {
     outline: none;
   }
@@ -22,7 +18,3 @@
     padding-top: var(--context-menu--padding);
   }
 }
-
-.popoverContent.popoverContent {
-  padding: var(--context-menu--padding);
-}
diff --git a/packages/components/src/components/ContextMenu/ContextMenu.tsx b/packages/components/src/components/ContextMenu/ContextMenu.tsx
@@ -82,9 +82,9 @@ export const ContextMenu = flowComponent("ContextMenu", (props) => {
     <ClearPropsContext>
       <Popover
         {...rest}
-        contentClassName={styles.popoverContent}
         controller={overlayController}
         isDialogContent={false}
+        padding="s"
       >
         <OverlayContextProvider
           type="ContextMenu"

diff --git a/packages/components/src/components/ContextualHelp/ContextualHelp.module.scss b/packages/components/src/components/ContextualHelp/ContextualHelp.module.scss
@@ -1,5 +1,5 @@
 .contextualHelp {
-  row-gap: var(--contextual-help--content-to-content-spacing);
+  row-gap: var(--popover--spacing);
   display: flex;
   flex-direction: column;
   max-width: var(--contextual-help--max-width);

diff --git a/packages/components/src/components/HeaderNavigation/HeaderNavigation.module.scss b/packages/components/src/components/HeaderNavigation/HeaderNavigation.module.scss
@@ -6,100 +6,102 @@
     flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--header-navigation--item-to-item-spacing);
+    gap: var(--header-navigation--spacing);
   }
 
   li {
     list-style: none;
   }
 
   .link {
-    padding: var(--header-navigation--item-padding);
-    border-radius: var(--header-navigation--item-corner-radius);
-    color: var(--header-navigation--item-color);
+    padding: var(--header-navigation--padding);
+    border-radius: var(--header-navigation--corner-radius);
+    color: var(--header-navigation--color);
     position: relative;
 
     @include focus.focus;
 
     &:hover:not([aria-current]) {
-      background-color: var(--header-navigation--item-background-color--hover);
+      background-color: var(--header-navigation--background-color--hover);
     }
 
     &[data-pressed]:not([aria-current]) {
-      background-color: var(
-        --header-navigation--item-background-color--pressed
-      );
+      background-color: var(--header-navigation--background-color--pressed);
     }
 
     &[aria-current] {
-      font-weight: var(--header-navigation--item-font-weight-current);
+      font-weight: var(--header-navigation--font-weight-current);
 
       &:after {
         content: "";
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
-        background-color: var(--header-navigation--item-color);
-        height: var(--header-navigation--item-underline-width-current);
+        background-color: var(--header-navigation--color);
+        height: var(--header-navigation--underline-width-current);
       }
     }
   }
 
   .button {
-    border-radius: var(--corner-radius--round);
+    border-radius: var(--header-navigation--corner-radius-round);
   }
 
   &:not(.light):not(.dark) {
     .button {
-      color: var(--header-navigation--item-color);
+      color: var(--header-navigation--color);
 
       &:hover,
       &[data-pressed] {
-        color: var(--header-navigation--item-color);
+        color: var(--header-navigation--color);
       }
     }
   }
 
   &.dark {
     .link {
-      color: var(--header-navigation--item-color-dark);
+      color: var(--header-navigation--color-dark);
+
       &:hover:not([aria-current]) {
         background-color: var(
-          --header-navigation--item-background-color-dark--hover
+          --header-navigation--background-color-dark--hover
         );
       }
+
       &[data-pressed]:not([aria-current]) {
         background-color: var(
-          --header-navigation--item-background-color-dark--pressed
+          --header-navigation--background-color-dark--pressed
         );
       }
 
       &[aria-current] {
         &:after {
-          background-color: var(--header-navigation--item-color-dark);
+          background-color: var(--header-navigation--color-dark);
         }
       }
     }
   }
 
   &.light {
     .link {
-      color: var(--header-navigation--item-color-light);
+      color: var(--header-navigation--color-light);
+
       &:hover:not([aria-current]) {
         background-color: var(
-          --header-navigation--item-background-color-light--hover
+          --header-navigation--background-color-light--hover
         );
       }
+
       &[data-pressed]:not([aria-current]) {
         background-color: var(
-          --header-navigation--item-background-color-light--pressed
+          --header-navigation--background-color-light--pressed
         );
       }
 
       &[aria-current] {
         &:after {
-          background-color: var(--header-navigation--item-color-light);
+          background-color: var(--header-navigation--color-light);
         }
       }
     }

diff --git a/packages/components/src/components/Link/Link.module.scss b/packages/components/src/components/Link/Link.module.scss
@@ -32,7 +32,7 @@
   /* Elements */
 
   .icon {
-    margin-inline-start: var(--link--text-to-icon-spacing);
+    margin-inline-start: var(--link--spacing);
     vertical-align: text-bottom;
   }
 

diff --git a/packages/components/src/components/Modal/Modal.module.scss b/packages/components/src/components/Modal/Modal.module.scss
@@ -42,7 +42,13 @@
   .header {
     grid-area: header;
     padding-inline: var(--modal--padding);
-    padding-block: var(--modal--padding);
+    padding-block: var(--modal--header-padding-y);
+    border-bottom-width: var(--modal--border-width);
+    border-bottom-style: var(--modal--border-style);
+    border-bottom-color: var(--modal--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 
   .content {
@@ -51,17 +57,17 @@
     overflow-y: auto;
     display: flex;
     flex-direction: column;
-    padding-inline: var(--modal--padding);
-    padding-bottom: var(--modal--padding-bottom);
+    padding: var(--modal--padding);
+    row-gap: var(--section--content-to-content-spacing);
   }
 
   .actionGroup {
     grid-area: actionGroup;
-    padding: var(--modal--action-group-padding);
-    background-color: var(--modal--action-group-background-color);
-    border-top-color: var(--modal--action-group-border-color);
-    border-top-width: var(--modal--action-group-border-top-width);
-    border-top-style: var(--modal--action-group-border-style);
+    padding: var(--modal--padding);
+    background-color: var(--modal--footer-background-color);
+    border-top-width: var(--modal--border-width);
+    border-top-style: var(--modal--border-style);
+    border-top-color: var(--modal--border-color);
   }
 }
 
@@ -90,7 +96,7 @@
     > div {
       border-radius: var(--modal--corner-radius);
       max-height: calc(100dvh - var(--size-px--xxl));
-      max-width: calc(100vw - var(--size-px--xxl));
+      max-width: calc(100dvw - var(--size-px--xxl));
 
       &[data-entering] {
         animation: modal-zoom var(--transition--duration--slow)
@@ -127,21 +133,6 @@
       }
     }
   }
-
-  .header {
-    border-bottom-width: var(--separator--height);
-    border-bottom-style: var(--border-style--default);
-    border-bottom-color: var(--separator--color);
-    padding-block: var(--modal--off-canvas-padding-y);
-    background-color: var(--modal--off-canvas-header-background-color);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .content {
-    padding-top: var(--modal--padding);
-  }
 }
 
 /* Mobile Tray */
@@ -162,18 +153,6 @@
         animation: modal-slide-up var(--transition--duration--slow);
       }
     }
-
-    .header {
-      padding-top: var(--modal--padding);
-    }
-
-    .content {
-      overflow: visible;
-    }
-
-    .closeButton {
-      display: none;
-    }
   }
 }
 

diff --git a/packages/components/src/components/Modal/Modal.tsx b/packages/components/src/components/Modal/Modal.tsx
@@ -73,17 +73,15 @@ export const Modal = flowComponent("Modal", (props) => {
         <TunnelProvider>
           <Header className={styles.header}>
             <TunnelExit id="heading" />
-            {offCanvas && (
-              <Action closeOverlay="Modal">
-                <Button
-                  variant="plain"
-                  color="secondary"
-                  className={styles.closeButton}
-                >
-                  <IconClose />
-                </Button>
-              </Action>
-            )}
+            <Action closeOverlay="Modal">
+              <Button
+                variant="plain"
+                color="secondary"
+                className={styles.closeButton}
+              >
+                <IconClose />
+              </Button>
+            </Action>
           </Header>
           {children}
         </TunnelProvider>

diff --git a/packages/components/src/components/Navigation/Navigation.module.scss b/packages/components/src/components/Navigation/Navigation.module.scss
@@ -12,6 +12,6 @@
   }
 
   hr {
-    margin-block: var(--menu--separator-to-item-spacing);
+    margin-bottom: var(--menu--group-to-group-spacing);
   }
 }
diff --git a/...mponents/src/components/Navigation/components/NavigationGroup/NavigationGroup.module.scss b/...mponents/src/components/Navigation/components/NavigationGroup/NavigationGroup.module.scss
@@ -2,13 +2,14 @@
   &:not(.collapsable) ul {
     padding: var(--accordion--content-padding);
   }
+
   &:not(:last-child) {
     margin-bottom: var(--menu--group-to-group-spacing);
   }
 
   .label {
     display: block;
-    margin-block: var(--menu--label-to-group-spacing);
     padding-inline-start: var(--accordion--header-padding-x);
+    padding-block: var(--accordion--header-padding-y);
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,6 @@ @@
       }
       hr {
-        margin-block: var(--menu--separator-to-item-spacing);
+        margin-bottom: var(--menu--group-to-group-spacing);
       }
     }