Align core, shared and preview with the design-system skill (#3010)

core/scss/_variables.scss

@@ -1006,7 +1006,6 @@ $alert-margin-bottom: 1rem !default;
 $alert-link-font-weight: var(--font-weight-semibold) !default;
 $alert-border-width: var(--border-width) !default;
 $alert-border-color: var(--border-color-translucent) !default;
-$alert-shadow: color-transparent(var(--dark), 0.04) 0 2px 4px 0 !default;
 $alert-heading-margin-bottom: 0.25rem !default;
 $alert-icon-size: 1.25rem !default;
 $alert-padding-inline-end: 3rem !default;
@@ -1021,7 +1020,7 @@ $breadcrumb-padding-x: 0 !default;
 $breadcrumb-item-padding-x: 0.5rem !default;
 $breadcrumb-margin-bottom: 1rem !default;
 $breadcrumb-bg: null !default;
-$breadcrumb-divider-color: var(--gray-500) !default;
+$breadcrumb-divider-color: var(--secondary) !default;
 $breadcrumb-active-color: inherit !default;
 $breadcrumb-divider: string.quote('/') !default;
 $breadcrumb-border-radius: null !default;
@@ -1049,6 +1048,7 @@ $badge-empty-size: 0.5rem !default;
 $badge-color: var(--secondary) !default;
 $badge-bg-color: var(--bg-surface-secondary) !default;
 $badge-gap: 0.25rem !default;
+$badge-padding-y-sm: 2px !default;
 $badge-padding-x-sm: 0.25rem !default;
 $badge-padding-y-lg: 0.25rem !default;
 $badge-padding-x-lg: 0.5rem !default;
@@ -1227,7 +1227,7 @@ $card-bg: var(--bg-surface) !default;
 $card-img-overlay-padding: $spacer !default;
 $card-group-margin: 1.5rem !default;
 
-$card-status-size: 3px !default;
+$card-status-size: $border-width-wide !default;
 // The strip sits on top of the card border, so it is pulled out by the border width
 $card-status-offset: calc(-1 * var(--card-border-width)) !default;
 
@@ -1308,10 +1308,10 @@ $carousel-control-icon-width: 1.5rem !default;
 $carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") !default;
 $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'></polyline></svg>") !default;
 
-$carousel-indicator-width: 30px !default;
-$carousel-indicator-height: 3px !default;
-$carousel-indicator-hit-area-height: 10px !default;
-$carousel-indicator-spacer: 3px !default;
+$carousel-indicator-width: 32px !default;
+$carousel-indicator-height: 2px !default;
+$carousel-indicator-hit-area-height: 12px !default;
+$carousel-indicator-spacer: 4px !default;
 $carousel-indicator-opacity: 0.5 !default;
 $carousel-indicator-active-bg: $white !default;
 $carousel-indicator-active-opacity: 1 !default;
@@ -1403,6 +1403,7 @@ $dropdown-scrollable-height: 13rem !default;
 $dropdown-item-gap: 0.5rem !default;
 $dropdown-header-padding-bottom: 0.25rem !default;
 $dropdown-menu-columns-gap: 0.25rem !default;
+$dropdown-arrow-size: 0.75rem !default;
 $dropdown-arrow-offset: 0.25rem !default;
 $dropdown-arrow-inset: 0.75rem !default;
 $dropdown-dropend-offset: 0.25rem !default;
@@ -1443,7 +1444,7 @@ $tooltip-arrow-height: 0.4rem !default;
 $loader-size: 2.5rem !default;
 
 $list-group-header-bg: var(--bg-surface-tertiary) !default;
-$list-group-header-color: var(--gray-500) !default;
+$list-group-header-color: var(--secondary) !default;
 
 // Modals
 // scss-docs-start modal-variables
@@ -1502,7 +1503,7 @@ $nav-link-padding-y: 0.5rem !default;
 $nav-link-padding-x: 0.75rem !default;
 $nav-link-font-size: var(--body-font-size) !default;
 $nav-link-font-weight: null !default;
-$nav-link-color: var(--gray-500) !default;
+$nav-link-color: var(--secondary) !default;
 $nav-link-active-color: var(--body-color) !default;
 $nav-link-hover-color: var(--link-hover-color) !default;
 $nav-link-transition:
@@ -1731,8 +1732,8 @@ $steps-counter-dot-size: 1.5rem !default;
 $steps-vertical-padding-start: 1rem !default;
 $steps-vertical-item-gap: 1rem !default;
 $steps-vertical-connector-gap: 1rem !default;
-$steps-dot-offset: 6px !default;
-$steps-dot-offset-counter: -2px !default;
+// Centers the dot on the first line of the step label, whatever the dot size.
+$steps-dot-offset: calc((var(--body-line-height) * 1em - var(--steps-dot-size)) / 2) !default;
 // scss-docs-end steps-variables
 
 // Spinner
@@ -1820,7 +1821,7 @@ $toast-background-color: var(--bg-surface) !default;
 $toast-border-width: var(--border-width) !default;
 $toast-border-color: var(--border-color) !default;
 $toast-border-radius: var(--border-radius) !default;
-$toast-box-shadow: var(--box-shadow) !default;
+$toast-box-shadow: var(--shadow) !default;
 $toast-spacing: $container-padding-x !default;
 
 $toast-header-color: var(--gray-500) !default;
@@ -2148,6 +2149,9 @@ $switch-icon-loading-border-width: $spinner-border-width-sm !default;
 $switch-icon-loading-animation-speed: $spinner-animation-speed !default;
 // scss-docs-end switch-icon-variables
 
+// Signature
+$signature-canvas-height: 12.5rem !default;
+
 // Offcanvas
 // scss-docs-start offcanvas-variables
 $offcanvas-padding-y: $modal-inner-padding !default;
@@ -2203,19 +2207,19 @@ $nav-segmented-height: 2.5rem !default;
 $nav-segmented-padding: 2px !default;
 $nav-segmented-radius: 6px !default;
 $nav-segmented-gap: 0.25rem !default;
-$nav-segmented-link-gap: 0.25rem !default;
+$nav-segmented-link-gap: 0.5rem !default;
 $nav-segmented-link-padding-x: 0.75rem !default;
 $nav-segmented-link-icon-size: 1.25rem !default;
 $nav-segmented-icon-margin: -0.25rem !default;
 $nav-segmented-height-sm: 2rem !default;
 $nav-segmented-radius-sm: 4px !default;
 $nav-segmented-link-padding-x-sm: 0.5rem !default;
-$nav-segmented-link-gap-sm: 0.25rem !default;
+$nav-segmented-link-gap-sm: 0.5rem !default;
 $nav-segmented-link-icon-size-sm: 1rem !default;
 $nav-segmented-height-lg: 3rem !default;
 $nav-segmented-radius-lg: 8px !default;
 $nav-segmented-link-padding-x-lg: 1rem !default;
-$nav-segmented-link-gap-lg: 0.5rem !default;
+$nav-segmented-link-gap-lg: 0.75rem !default;
 $nav-segmented-link-icon-size-lg: 1.5rem !default;
 // scss-docs-end segmented-nav-variables
 

core/scss/ui/_avatars.scss

@@ -58,7 +58,7 @@ $avatar-tokens: defaults(
     inset-inline-end: 0;
     bottom: 0;
     @include border-radius(var(--border-radius-pill));
-    box-shadow: 0 0 0 calc(var(--avatar-status-size) / 4) $card-bg;
+    box-shadow: 0 0 0 calc(var(--avatar-status-size) / 4) var(--card-bg, var(--bg-surface));
   }
 
   @at-root a#{&} {
@@ -66,7 +66,7 @@ $avatar-tokens: defaults(
 
     &:hover {
       color: var(--primary);
-      --avatar-box-shadow-color: var(--primary);
+      --avatar-box-shadow-color: var(--border-active-color);
     }
   }
 }
@@ -149,13 +149,13 @@ $avatar-tokens: defaults(
   svg {
     width: var(--avatar-upload-icon-size);
     height: var(--avatar-upload-icon-size);
-    stroke-width: 1;
+    stroke-width: 1.5;
   }
 
   &:hover {
     color: var(--primary);
     text-decoration: none;
-    border-color: var(--primary);
+    border-color: var(--border-active-color);
   }
 }
 
@@ -181,6 +181,6 @@ $avatar-tokens: defaults(
   width: var(--avatar-brand-size);
   height: var(--avatar-brand-size);
   background: var(--bg-surface);
-  border: 1px solid var(--border-color);
+  border: var(--border-width) solid var(--border-color);
   @include border-radius(var(--border-radius));
 }

core/scss/ui/_badges.scss

@@ -36,7 +36,6 @@ $badge-tokens: defaults(
   line-height: var(--badge-line-height);
   color: var(--badge-color);
   text-align: center;
-  letter-spacing: 0.04em;
   white-space: nowrap;
   vertical-align: bottom;
   user-select: none;
@@ -52,7 +51,6 @@ $badge-tokens: defaults(
     width: 1em;
     height: 1em;
     font-size: var(--badge-icon-size);
-    stroke-width: 2;
   }
 }
 
@@ -115,7 +113,7 @@ $badge-tokens: defaults(
 .badge-sm {
   --badge-font-size: #{$badge-font-size-sm};
   --badge-icon-size: 1em;
-  --badge-padding-y: 2px;
+  --badge-padding-y: #{$badge-padding-y-sm};
   --badge-padding-x: #{$badge-padding-x-sm};
 }
 

core/scss/ui/_buttons.scss

@@ -81,7 +81,7 @@ $btn-tokens: defaults(
   // here would leave a disabled link button with the default surface and border.
   --btn-bg: transparent;
   --btn-border-color: transparent;
-  color: #{adjust-lightness-css(var(--primary), 5%)};
+  color: var(--link-color);
   background-color: transparent;
   border-color: transparent;
   box-shadow: none;
@@ -91,7 +91,7 @@ $btn-tokens: defaults(
   }
 
   &:hover {
-    color: #{$btn-link-hover-color};
+    color: var(--link-hover-color);
     border-color: transparent;
   }
 }
@@ -311,7 +311,7 @@ $btn-colors: map.keys(map.merge($theme-colors, $social-colors));
 // Action button
 //
 .btn-action {
-  --border-color: transparent;
+  --btn-border-color: transparent;
   --btn-bg: transparent;
   --btn-disabled-color: var(--secondary);
   color: var(--secondary);
@@ -361,7 +361,7 @@ $btn-colors: map.keys(map.merge($theme-colors, $social-colors));
 
 .btn-animate-icon {
   .icon {
-    transition: transform 0.3s ease;
+    transition: transform $transition-time ease;
   }
 
   &:hover,

core/scss/ui/_calendars.scss

@@ -104,14 +104,14 @@ $calendar-tokens: defaults(
     top: 50%;
     height: var(--calendar-date-size);
     content: '';
-    background: color-transparent(var(--primary), 0.1);
+    background: var(--active-bg);
     transform: translateY(-50%);
   }
 
   &.range-start,
   &.range-end {
     .date-item {
-      color: $white;
+      color: var(--primary-fg);
       background: var(--primary);
       border-color: var(--primary);
     }

core/scss/ui/_cards.scss

@@ -106,7 +106,7 @@ $card-tokens: defaults(
   max-height: 100%;
   overflow: hidden;
   pointer-events: none;
-  border-start-end-radius: $border-radius;
+  border-start-end-radius: var(--card-border-radius);
   opacity: $card-stamp-opacity;
 }
 
@@ -132,7 +132,7 @@ $card-tokens: defaults(
   .icon {
     width: calc(var(--stamp-size) * 0.75);
     height: calc(var(--stamp-size) * 0.75);
-    stroke-width: 2;
+    stroke-width: 1;
   }
 }
 
@@ -176,7 +176,7 @@ $card-tokens: defaults(
   flex: 1;
   align-items: center;
   justify-content: center;
-  padding: $card-spacer-y $card-spacer-x;
+  padding: var(--card-spacer-y) var(--card-spacer-x);
   font-weight: var(--font-weight-medium);
   color: inherit;
   text-align: center;
@@ -213,7 +213,7 @@ $card-tokens: defaults(
 
 .card-cover {
   position: relative;
-  padding: $card-spacer-y $card-spacer-x;
+  padding: var(--card-spacer-y) var(--card-spacer-x);
   background: #666 no-repeat center/cover;
 
   &::before {
@@ -228,7 +228,7 @@ $card-tokens: defaults(
 
   &:first-child,
   &:first-child::before {
-    @include border-radius($border-radius $border-radius 0 0);
+    @include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0);
   }
 }
 
@@ -299,7 +299,7 @@ $card-tokens: defaults(
   &:hover {
     color: inherit;
     text-decoration: none;
-    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-card-hover);
   }
 }
 
@@ -338,11 +338,11 @@ $card-tokens: defaults(
   height: var(--card-progress-height);
 
   &:last-child {
-    @include border-radius(0 0 2px 2px);
+    @include border-radius(0 0 var(--border-radius-xs) var(--border-radius-xs));
   }
 
   &:first-child {
-    @include border-radius(2px 2px 0 0);
+    @include border-radius(var(--border-radius-xs) var(--border-radius-xs) 0 0);
   }
 }
 
@@ -391,7 +391,7 @@ $card-tokens: defaults(
 .card-subtitle {
   --card-subtitle-margin-start: #{$card-subtitle-margin-start};
   margin-bottom: $card-title-spacer-y;
-  font-weight: 400;
+  font-weight: var(--font-weight-normal);
   color: var(--secondary);
 
   .card-header & {
@@ -502,13 +502,13 @@ $card-tokens: defaults(
     td,
     th {
       &:first-child {
-        padding-inline-start: $card-spacer-x;
+        padding-inline-start: var(--card-spacer-x);
         border-inline-start: 0;
         border-start-start-radius: var(--card-border-radius);
       }
 
       &:last-child {
-        padding-inline-end: $card-spacer-x;
+        padding-inline-end: var(--card-spacer-x);
         border-inline-end: 0;
         border-start-end-radius: var(--card-border-radius);
       }
@@ -627,8 +627,8 @@ Card list group
   }
 
   .list-group-item {
-    padding-inline-start: $card-spacer-x;
-    padding-inline-end: $card-spacer-x;
+    padding-inline-start: var(--card-spacer-x);
+    padding-inline-end: var(--card-spacer-x);
     border-inline-start: 0;
     border-inline-end: 0;
     border-radius: 0;
@@ -651,14 +651,14 @@ Card list group
     border-bottom: 0;
 
     .nav-link {
-      background: $card-cap-bg;
-      border: $card-border-width var(--border-style) $card-border-color;
+      background: var(--card-cap-bg);
+      border: var(--card-border-width) var(--border-style) var(--card-border-color);
 
       &.active,
       &:active,
       &:hover {
         color: var(--body-color);
-        border-color: $card-border-color;
+        border-color: var(--card-border-color);
       }
 
       &.active {

core/scss/ui/_carousel.scss

@@ -39,7 +39,7 @@
     margin: 0 $carousel-indicator-spacer;
     background: no-repeat center/cover;
     border: 0;
-    box-shadow: $box-shadow;
+    box-shadow: var(--shadow-card);
     opacity: $carousel-indicator-thumb-opacity;
     @include border-radius(var(--border-radius));
 
@@ -68,6 +68,6 @@
   inset-inline-end: 0;
   bottom: 0;
   height: 90%;
-  background: $dark;
+  background: var(--dark);
   background: linear-gradient(0deg, color-transparent(var(--dark), 0.9), color-transparent(var(--dark), 0));
 }

core/scss/ui/_chat.scss

@@ -43,7 +43,7 @@ $chat-tokens: defaults(
 }
 
 .chat-bubble-author {
-  font-weight: 600;
+  font-weight: var(--font-weight-medium);
 }
 
 .chat-bubble-date {

core/scss/ui/_dropdowns.scss

@@ -11,6 +11,7 @@ $dropdown-tokens: defaults(
     --dropdown-item-icon-color: var(--tertiary),
     --dropdown-header-padding-bottom: $dropdown-header-padding-bottom,
     --dropdown-menu-columns-gap: $dropdown-menu-columns-gap,
+    --dropdown-arrow-size: $dropdown-arrow-size,
     --dropdown-arrow-offset: $dropdown-arrow-offset,
     --dropdown-arrow-inset: $dropdown-arrow-inset,
     --dropdown-dropend-offset: $dropdown-dropend-offset,
@@ -99,9 +100,9 @@ $dropdown-tokens: defaults(
     top: calc(-1 * var(--dropdown-arrow-offset));
     z-index: -1;
     display: block;
-    width: 14px;
-    height: 14px;
-    clip-path: inset(0 5px 5px 0);
+    width: var(--dropdown-arrow-size);
+    height: var(--dropdown-arrow-size);
+    clip-path: inset(0 calc(var(--dropdown-arrow-size) / 3) calc(var(--dropdown-arrow-size) / 3) 0);
     content: '';
     background: inherit;
     // The menu draws its edge with the 1px ring in --dropdown-box-shadow and has

core/scss/ui/_forms.scss

@@ -18,12 +18,17 @@ textarea {
   &.required {
     &::after {
       margin-inline-start: var(--form-label-required-gap);
-      color: $red;
+      color: var(--danger);
       content: '*';
     }
   }
 }
 
+// A fieldset legend used as a label keeps the label size, not the reboot's 1.5rem.
+legend.form-label {
+  font-size: inherit;
+}
+
 .form-label-description {
   float: inline-end;
   font-weight: var(--font-weight-normal);
@@ -57,12 +62,12 @@ textarea {
 }
 
 .form-control-light {
-  background-color: var(--gray-100);
+  background-color: var(--bg-surface-secondary);
   border-color: transparent;
 }
 
 .form-control-dark {
-  color: $white;
+  color: var(--white);
   background-color: color-transparent(var(--black), 0.1);
   border-color: transparent;
 
@@ -135,10 +140,15 @@ fieldset:empty {
   @include border-radius(var(--border-radius-pill));
   @include transition(background-color $transition-time, color $transition-time);
 
-  &:hover,
+  &:hover {
+    color: var(--body-color);
+    background: $hover-bg;
+  }
+
+  // Popover open
   &[aria-describedby] {
-    color: $white;
-    background: var(--primary);
+    color: var(--primary);
+    background: var(--active-bg);
   }
 }
 

core/scss/ui/_icons.scss

@@ -61,19 +61,19 @@
 // Icons animation
 //
 .icon-pulse {
-  transition: all 0.15s ease 0s;
+  transition: transform 0.15s ease;
   animation: pulse 2s ease infinite;
   animation-fill-mode: both;
 }
 
 .icon-tada {
-  transition: all 0.15s ease 0s;
+  transition: transform 0.15s ease;
   animation: tada 3s ease infinite;
   animation-fill-mode: both;
 }
 
 .icon-rotate {
-  transition: all 0.15s ease 0s;
+  transition: transform 0.15s ease;
   animation: rotate-360 3s linear infinite;
   animation-fill-mode: both;
 }

core/scss/ui/_legend.scss

@@ -14,7 +14,7 @@
   width: var(--legend-size);
   height: var(--legend-size);
   background: var(--legend-color);
-  border: 1px solid var(--border-color-translucent);
+  border: var(--border-width) solid var(--border-color-translucent);
   @include border-radius($legend-border-radius);
 }
 

core/scss/ui/_lists.scss

@@ -30,14 +30,14 @@
   // `.list-group-item-{color}` tint.
   &.disabled,
   &:disabled {
-    color: $gray-500;
+    color: var(--disabled-color);
     background-color: var(--hover-bg);
   }
 }
 
 .list-group-item.active {
   background-color: var(--active-bg);
-  border-inline-start-color: $component-active-bg;
+  border-inline-start-color: var(--primary);
   border-inline-start-width: $border-width-wide;
 }
 
@@ -85,7 +85,7 @@
     }
 
     &.active {
-      font-weight: var(--font-weight-semibold);
+      font-weight: var(--font-weight-medium);
       color: inherit;
       background: $list-group-active-bg;
 

core/scss/ui/_loaders.scss

@@ -5,7 +5,7 @@
   display: block;
   width: $loader-size;
   height: $loader-size;
-  color: $blue;
+  color: var(--primary);
   vertical-align: middle;
 
   &::after {
@@ -15,7 +15,7 @@
     width: 100%;
     height: 100%;
     content: '';
-    border: 1px var(--border-style);
+    border: var(--border-width) var(--border-style);
     border-color: transparent;
     border-inline-start-color: currentColor;
     border-top-color: currentColor;

core/scss/ui/_markdown.scss

@@ -81,7 +81,7 @@ Prose (formerly markdown)
   > p > img,
   > figure > img {
     @include border-radius(var(--border-radius));
-    border: 1px solid var(--border-color);
+    border: var(--border-width) solid var(--border-color);
   }
 
   pre {

core/scss/ui/_modals.scss

@@ -47,7 +47,7 @@
 
 .modal-title {
   font-size: $h3-font-size;
-  font-weight: $headings-font-weight;
+  font-weight: var(--font-weight-medium);
   line-height: $line-height-base;
   color: var(--heading-color, var(--emphasis-color));
 }

core/scss/ui/_nav.scss

@@ -1,15 +1,30 @@
 @use '../config' as *;
 
+// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
+
+// Tabler's additions on top of Bootstrap's `.nav` tokens.
+// scss-docs-start nav-css-vars
+$nav-tokens: () !default;
+$nav-tokens: defaults(
+  (
+    --nav-link-hover-bg: var(--hover-bg),
+    // Read by `.nav-vertical .nav-link.active` below; without it that rule's
+    // color declaration was invalid and the active link fell back to the
+    // inherited color.
+    --nav-link-active-color: $nav-link-active-color,
+    --nav-vertical-nested-margin-start: $nav-vertical-nested-margin-start,
+    --nav-vertical-nested-padding-start: $nav-vertical-nested-padding-start,
+    --nav-link-toggle-padding-x: $nav-link-toggle-padding-x,
+    --nav-link-icon-margin-end: $nav-link-icon-margin-end,
+  ),
+  $nav-tokens
+);
+// scss-docs-end nav-css-vars
+
+// stylelint-enable custom-property-no-missing-var-function
+
 .nav {
-  --nav-link-hover-bg: var(--hover-bg);
-  // Read by `.nav-vertical .nav-link.active` below; without it that rule's
-  // color declaration was invalid and the active link fell back to the
-  // inherited color.
-  --nav-link-active-color: #{$nav-link-active-color};
-  --nav-vertical-nested-margin-start: #{$nav-vertical-nested-margin-start};
-  --nav-vertical-nested-padding-start: #{$nav-vertical-nested-padding-start};
-  --nav-link-toggle-padding-x: #{$nav-link-toggle-padding-x};
-  --nav-link-icon-margin-end: #{$nav-link-icon-margin-end};
+  @include tokens($nav-tokens);
   font-size: var(--body-font-size);
 }
 
@@ -28,7 +43,7 @@
 
   .nav-link.active,
   .nav-item.show .nav-link {
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-medium);
     color: var(--nav-link-active-color);
   }
 

core/scss/ui/_pagination.scss

@@ -1,13 +1,28 @@
 @use '../config' as *;
 
+// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
+
+// Tabler's additions on top of Bootstrap's `.pagination` tokens.
+// scss-docs-start pagination-css-vars
+$pagination-tokens: () !default;
+$pagination-tokens: defaults(
+  (
+    --pagination-gap: $pagination-gap,
+    --pagination-link-min-width: $pagination-link-min-width,
+    --page-text-padding-x: $page-text-padding-x,
+  ),
+  $pagination-tokens
+);
+// scss-docs-end pagination-css-vars
+
+// stylelint-enable custom-property-no-missing-var-function
+
 .pagination {
+  @include tokens($pagination-tokens);
   gap: var(--pagination-gap);
   margin: 0;
   line-height: var(--body-line-height);
   user-select: none;
-  --pagination-gap: #{$pagination-gap};
-  --pagination-link-min-width: #{$pagination-link-min-width};
-  --page-text-padding-x: #{$page-text-padding-x};
 
   @include media-print() {
     display: none;
@@ -62,7 +77,7 @@
   color: var(--body-color);
 
   .page-link:hover & {
-    color: $link-color;
+    color: var(--link-color);
   }
 
   .page-item.disabled & {
@@ -73,7 +88,7 @@
 .pagination-outline {
   --pagination-border-color: var(--border-color);
   --pagination-disabled-border-color: var(--border-color);
-  --pagination-border-width: 1px;
+  --pagination-border-width: var(--border-width);
 }
 
 .pagination-circle {

core/scss/ui/_patterns.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../config' as *;
 
 @mixin pattern-base($opacity: $pattern-opacity) {
@@ -165,9 +166,9 @@
 }
 
 // Color variants
-@each $color, $value in $theme-colors {
+@each $color in map.keys($theme-colors) {
   .bg-pattern-#{$color} {
-    --pattern-color: #{$value};
+    --pattern-color: var(--#{$color});
   }
 }
 

core/scss/ui/_payments.scss

@@ -10,7 +10,7 @@
   font-style: normal;
   vertical-align: bottom;
   background: no-repeat center/100% 100%;
-  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-border);
   @include config.border-radius(var(--border-radius));
 }
 

core/scss/ui/_ribbons.scss

@@ -42,9 +42,9 @@ $ribbon-tokens: defaults(
   min-height: var(--ribbon-min-size);
   padding: var(--ribbon-padding-y) var(--ribbon-padding-x);
   font-size: var(--ribbon-font-size);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-medium);
   line-height: 1;
-  color: $white;
+  color: var(--primary-fg);
   text-align: center;
   text-transform: uppercase;
   background: var(--primary);

core/scss/ui/_segmented.scss

@@ -34,12 +34,12 @@ $nav-segmented-tokens: defaults(
   list-style: none;
   background: var(--nav-bg);
   @include border-radius(calc(var(--nav-radius) + var(--nav-padding)));
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color-translucent);
 
   .nav-link {
     display: inline-flex;
     flex-grow: 1;
-    gap: calc(#{$nav-segmented-link-gap} + var(--nav-link-gap));
+    gap: var(--nav-link-gap);
     align-items: center;
     justify-content: center;
     min-width: calc(var(--nav-height) - 2 * var(--nav-padding));
@@ -53,7 +53,7 @@ $nav-segmented-tokens: defaults(
     white-space: nowrap;
     cursor: pointer;
     background: transparent;
-    border: 1px solid transparent;
+    border: var(--border-width) solid transparent;
     transition:
       background-color $transition-time,
       color $transition-time;

core/scss/ui/_signature.scss

@@ -8,7 +8,7 @@ $signature-tokens: defaults(
   (
     --signature-padding: var(--spacer-1),
     --signature-border-radius: var(--border-radius),
-    --signature-canvas-height: 12.5rem,
+    --signature-canvas-height: $signature-canvas-height,
   ),
   $signature-tokens
 );

core/scss/ui/_stars.scss

@@ -7,7 +7,7 @@
 
   display: inline-flex;
   font-size: $h5-font-size;
-  color: $gray-400;
+  color: var(--tertiary);
 
   .star:not(:first-child) {
     margin-inline-start: var(--stars-gap);

core/scss/ui/_steps.scss

@@ -10,6 +10,7 @@ $steps-tokens: () !default;
 $steps-tokens: defaults(
   (
     --steps-color: $steps-color,
+    --steps-fg: var(--primary-fg),
     --steps-inactive-color: $steps-inactive-color,
     --steps-dot-size: $steps-dot-size,
     --steps-border-width: $steps-border-width,
@@ -39,9 +40,11 @@ $steps-tokens: defaults(
 @each $name, $color in $extra-colors {
   .steps-#{$name} {
     --steps-color: var(--#{$name});
+    --steps-fg: var(--#{$name}-fg);
 
     &-lt {
       --steps-color: var(--#{$name}-lt);
+      --steps-fg: var(--#{$name});
     }
   }
 }
@@ -97,7 +100,7 @@ $steps-tokens: defaults(
     justify-content: center;
     width: var(--steps-dot-size);
     height: var(--steps-dot-size);
-    color: var(--white);
+    color: var(--steps-fg);
     content: '';
 
     /* rtl:ignore */
@@ -106,7 +109,7 @@ $steps-tokens: defaults(
   }
 
   &.active {
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-medium);
 
     &::after {
       background: var(--steps-inactive-color);
@@ -153,10 +156,6 @@ $steps-tokens: defaults(
   --steps-vertical-connector-gap: #{$steps-vertical-connector-gap};
   flex-direction: column;
 
-  &.steps-counter {
-    --steps-dot-offset: #{$steps-dot-offset-counter};
-  }
-
   .step-item {
     min-height: auto;
     padding-inline-start: calc(var(--steps-dot-size) + var(--steps-vertical-padding-start));

core/scss/ui/_switch-icon.scss

@@ -121,7 +121,7 @@
 .switch-icon-fade {
   .switch-icon-a,
   .switch-icon-b {
-    @include transition(opacity 0.5s);
+    @include transition(opacity $transition-time);
   }
 }
 
@@ -129,7 +129,7 @@
 .switch-icon-scale {
   .switch-icon-a,
   .switch-icon-b {
-    @include transition(opacity 0.5s, transform 0s 0.5s);
+    @include transition(opacity $transition-time, transform 0s $transition-time);
   }
 
   .switch-icon-b {
@@ -139,7 +139,7 @@
   &.active {
     .switch-icon-a,
     .switch-icon-b {
-      @include transition(opacity 0s, transform 0.5s);
+      @include transition(opacity 0s, transform $transition-time);
     }
 
     .switch-icon-b {
@@ -156,7 +156,7 @@
   .switch-icon-b {
     backface-visibility: hidden;
     transform-style: preserve-3d;
-    @include transition(opacity 0s 0.2s, transform 0.4s ease-in-out);
+    @include transition(opacity 0s 0.15s, transform $transition-time ease-in-out);
   }
 
   .switch-icon-a {

core/scss/ui/_tags.scss

@@ -33,7 +33,7 @@ $tag-tokens: defaults(
   padding: 0 var(--tag-padding-x);
   background: var(--bg-surface);
 
-  border: $border-width solid var(--border-color);
+  border: var(--border-width) solid var(--border-color);
   box-shadow: var(--shadow-input);
   @include border-radius(var(--border-radius));
 

core/scss/ui/_toasts.scss

@@ -1,8 +1,8 @@
+@use 'sass:map';
 @use '../config' as *;
 
 .toast {
   border: $alert-border-width var(--border-style) $alert-border-color;
-  box-shadow: $alert-shadow;
 
   .toast-header {
     user-select: none;
@@ -20,8 +20,8 @@
   }
 }
 
-@each $state, $value in $theme-colors {
+@each $state in map.keys($theme-colors) {
   .toast-#{$state} {
-    --toast-color: #{$value};
+    --toast-color: var(--#{$state});
   }
 }

core/scss/ui/_type.scss

@@ -87,7 +87,7 @@ blockquote {
   --blockquote-padding: #{$blockquote-padding};
   --blockquote-paragraph-margin-bottom: #{$blockquote-paragraph-margin-bottom};
   padding: var(--blockquote-padding) var(--blockquote-padding) var(--blockquote-padding);
-  border-inline-start: 2px var(--border-style) var(--border-color);
+  border-inline-start: $border-width-wide var(--border-style) var(--border-color);
 
   p {
     margin-bottom: var(--blockquote-paragraph-margin-bottom);
@@ -282,7 +282,6 @@ $text-variants: (
     text-decoration-thickness: 1px;
     text-decoration-color: $color;
     background: color-transparent($color, 0.04);
-    background: color-transparent($color, 4%);
   }
 }
 
@@ -308,7 +307,7 @@ $text-variants: (
   margin-bottom: var(--steps-margin-bottom);
   overflow: visible;
   counter-reset: step;
-  border-inline-start: 1px solid var(--border-color);
+  border-inline-start: var(--border-width) solid var(--border-color);
 
   h3 {
     counter-increment: step;
@@ -323,15 +322,15 @@ $text-variants: (
       width: var(--steps-item-size);
       height: var(--steps-item-size);
       margin-inline-start: calc(-1 * var(--steps-padding) - var(--steps-item-size) / 2);
-      margin-top: 1px;
+      margin-top: var(--border-width);
       font-size: var(--font-size-h4);
       font-weight: var(--font-weight-semibold);
-      line-height: calc(var(--steps-item-size) - 2px);
+      line-height: calc(var(--steps-item-size) - 2 * var(--border-width));
       color: var(--body-color);
       text-align: center;
       content: counter(step);
       background: var(--bg-surface);
-      border: 1px solid var(--border-color);
+      border: var(--border-width) solid var(--border-color);
       @include border-radius(var(--border-radius));
     }
   }
@@ -362,7 +361,7 @@ $callout-tokens: defaults(
   padding: var(--callout-padding-y) var(--callout-padding-x);
   margin-bottom: var(--callout-margin-bottom);
   background: var(--primary-lt);
-  border: 1px solid var(--primary-200);
+  border: var(--border-width) solid var(--primary-200);
   @include border-radius(var(--border-radius));
 
   > :last-child {

core/scss/ui/forms/_form-check.scss

@@ -37,7 +37,7 @@ Form check
   &.required {
     &::after {
       margin-inline-start: var(--form-check-label-required-gap);
-      color: $red;
+      color: var(--danger);
       content: '*';
     }
   }

core/scss/ui/forms/_form-colorinput.scss

@@ -23,10 +23,10 @@ Color Input
   display: block;
   width: var(--form-colorinput-size);
   height: var(--form-colorinput-size);
-  color: $white;
+  color: var(--white);
   border: var(--border-width) var(--border-style) $input-border-color-translucent;
   @include border-radius(var(--border-radius));
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-input);
 
   &::before {
     position: absolute;

core/scss/ui/forms/_form-imagecheck.scss

@@ -42,7 +42,7 @@
     display: block;
     width: $form-check-input-width;
     height: $form-check-input-width;
-    color: $white;
+    color: var(--white);
     pointer-events: none;
     content: '';
     user-select: none;

core/scss/ui/forms/_form-selectgroup.scss

@@ -57,6 +57,7 @@ Select group
 
   &:hover {
     color: var(--body-color);
+    border-color: var(--border-active-color);
   }
 }