ngwr 7.3.0 → 9.0.0

package/breadcrumbs/styles/_index.scss

@@ -2,17 +2,19 @@
 // (set by the component from the `[separator]` input). All items except
 // the first prepend the glyph via a `::before` pseudo-element.
 
+@use '../../theme/styles' as theme;
+
 .wr-breadcrumbs {
   --wr-breadcrumbs-separator: '/';
   --wr-breadcrumbs-gap: 0.5rem;
-  --wr-breadcrumbs-color: rgba(var(--wr-color-dark-rgb), 0.6);
-  --wr-breadcrumbs-current-color: var(--wr-color-dark);
+  --wr-breadcrumbs-color: rgba(var(--wr-color-on-surface-rgb), 0.6);
+  --wr-breadcrumbs-current-color: var(--wr-color-on-surface);
   --wr-breadcrumbs-link-color: var(--wr-color-primary);
-  --wr-breadcrumbs-separator-color: rgba(var(--wr-color-dark-rgb), 0.3);
+  --wr-breadcrumbs-separator-color: rgba(var(--wr-color-on-surface-rgb), 0.3);
 
   display: block;
   font-family: var(--wr-font-family-base);
-  font-size: 0.875rem;
+  font-size: var(--wr-text-sm);
   color: var(--wr-breadcrumbs-color);
 
   &__nav {
@@ -56,7 +58,7 @@
     }
 
     &:focus-visible {
-      outline: 2px solid var(--wr-color-primary);
+      @include theme.focus-ring;
       outline-offset: 2px;
     }
   }

package/burger/styles/_index.scss

@@ -5,7 +5,7 @@
   // open state below rewrites the dasharray/offset so the strokes slide
   // into a close mark.
   --wr-burger-size: 2.5rem;
-  --wr-burger-color: var(--wr-color-dark);
+  --wr-burger-color: var(--wr-color-on-surface);
   --wr-burger-color-opened: var(--wr-color-primary);
   --wr-burger-stroke-width: 6px;
   --wr-burger-duration: 0.5s;
@@ -38,11 +38,11 @@
     transition: background var(--wr-transition-base);
 
     &:hover {
-      background: rgba(var(--wr-color-light-rgb), 0.4);
+      background: var(--wr-color-hover);
     }
 
     &:focus-visible {
-      outline: 2px solid var(--wr-color-primary);
+      @include theme.focus-ring;
       outline-offset: 2px;
     }
 

package/button/styles/_index.scss

@@ -17,16 +17,16 @@
   white-space: nowrap;
 
   // Defaults — modifiers override
-  --wr-btn-color: var(--wr-color-dark);
-  --wr-btn-bg: var(--wr-color-white);
-  --wr-btn-border: var(--wr-color-light);
-  --wr-btn-radius: var(--wr-border-radius-sm);
+  --wr-btn-color: var(--wr-color-on-surface);
+  --wr-btn-bg: var(--wr-color-surface);
+  --wr-btn-border: var(--wr-color-outline);
+  --wr-btn-radius: var(--wr-control-radius-md);
   --wr-btn-gap: 0.375rem;
-  --wr-btn-padding-y: 0.5rem;
-  --wr-btn-padding-x: 1rem;
-  --wr-btn-font-size: 0.875rem;
+  --wr-btn-padding-y: var(--wr-control-padding-y-md);
+  --wr-btn-padding-x: 0.875rem; // 14px — buttons sit a touch wider than input/select
+  --wr-btn-font-size: var(--wr-control-font-size-md);
   --wr-btn-font-weight: 500;
-  --wr-btn-line-height: 1.25rem;
+  --wr-btn-line-height: var(--wr-control-line-height-md);
   --wr-btn-icon-size: 1rem;
 
   color: var(--wr-btn-color);
@@ -41,11 +41,11 @@
   transition: var(--wr-transition-base);
 
   &:hover {
-    --wr-btn-bg: rgba(var(--wr-color-light-rgb), 0.4);
+    --wr-btn-bg: var(--wr-color-hover);
   }
 
   &:active {
-    --wr-btn-bg: rgba(var(--wr-color-light-rgb), 0.6);
+    --wr-btn-bg: rgba(var(--wr-color-outline-rgb), 0.6);
   }
 
   &[disabled],
@@ -74,24 +74,26 @@
     min-width: 0;
   }
 
-  // Sizes — consistent 28 / 36 / 44 px scale (each +8px tall).
-  // Padding, font, line-height, icon, and gap all step up together so
-  // the proportions stay visually identical between sizes.
+  // Sizes — share the `--wr-control-*` contract (22 / 30 / 36 px) so button,
+  // input and select line up in a row. Buttons keep a slightly wider padding-x
+  // (12 / 14 / 18) than input/select; gap + icon step with the size.
   &--sm {
+    --wr-btn-radius: var(--wr-control-radius-sm);
     --wr-btn-gap: 0.25rem;
-    --wr-btn-padding-y: 0.375rem; // 6px
+    --wr-btn-padding-y: var(--wr-control-padding-y-sm);
     --wr-btn-padding-x: 0.75rem; // 12px
-    --wr-btn-font-size: 0.75rem; // 12px
-    --wr-btn-line-height: 1rem; // 16px
+    --wr-btn-font-size: var(--wr-control-font-size-sm);
+    --wr-btn-line-height: var(--wr-control-line-height-sm);
     --wr-btn-icon-size: 0.875rem; // 14px
   }
 
   &--lg {
+    --wr-btn-radius: var(--wr-control-radius-lg);
     --wr-btn-gap: 0.5rem;
-    --wr-btn-padding-y: 0.625rem; // 10px
-    --wr-btn-padding-x: 1.5rem; // 24px
-    --wr-btn-font-size: 1rem; // 16px
-    --wr-btn-line-height: 1.5rem; // 24px
+    --wr-btn-padding-y: var(--wr-control-padding-y-lg);
+    --wr-btn-padding-x: 1.125rem; // 18px
+    --wr-btn-font-size: var(--wr-control-font-size-lg);
+    --wr-btn-line-height: var(--wr-control-line-height-lg);
     --wr-btn-icon-size: 1.125rem; // 18px
   }
 
@@ -200,11 +202,19 @@
   }
 
   // Solid colored segments share border and background color, so adjacent
-  // buttons fuse into one slab — draw a subtle divider on every inner
-  // edge. Outlined/default variants keep their own visible borders.
+  // buttons fuse into one slab — draw a subtle divider on the right edge of
+  // every non-last segment. Outlined/default variants keep their own visible
+  // borders. On hover/focus the segment raises its own border (z-index above
+  // neighbours), which would otherwise double-paint that edge — so drop the
+  // seam there and let the raised border own it cleanly.
   @each $name in theme.$colors {
-    > .wr-btn--#{$name}:not(.wr-btn--outlined):not(:first-child) {
-      box-shadow: inset 1px 0 0 rgb(0 0 0 / 20%);
+    > .wr-btn--#{$name}:not(.wr-btn--outlined):not(:last-child) {
+      box-shadow: inset -1px 0 0 rgba(var(--wr-color-black-rgb), 0.2);
+
+      &:hover,
+      &:focus-visible {
+        box-shadow: none;
+      }
     }
   }
 }

package/calendar/styles/_index.scss

@@ -2,10 +2,10 @@
 
 .wr-calendar {
   --wr-calendar-width: 17rem;
-  --wr-calendar-bg: var(--wr-color-white);
-  --wr-calendar-border: var(--wr-color-light);
-  --wr-calendar-color: var(--wr-color-dark);
-  --wr-calendar-muted: var(--wr-color-medium);
+  --wr-calendar-bg: var(--wr-color-surface);
+  --wr-calendar-border: var(--wr-color-outline);
+  --wr-calendar-color: var(--wr-color-on-surface);
+  --wr-calendar-muted: var(--wr-color-on-surface-muted);
   --wr-calendar-radius: var(--wr-border-radius-base);
   --wr-calendar-day-radius: var(--wr-border-radius-sm);
   --wr-calendar-cell-size: 2rem;
@@ -42,7 +42,7 @@
     color: inherit;
     text-align: center;
     font-family: inherit;
-    font-size: 0.875rem;
+    font-size: var(--wr-text-sm);
     font-weight: 600;
     line-height: 1.5rem;
     border-radius: var(--wr-calendar-day-radius);
@@ -52,7 +52,7 @@
       color var(--wr-transition-base);
 
     &:hover:not(:disabled) {
-      background: rgba(var(--wr-color-light-rgb), 0.5);
+      background: var(--wr-color-hover);
     }
 
     &:focus-visible {
@@ -67,13 +67,15 @@
 
   &__nav {
     appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     background: transparent;
     border: 0;
     width: 1.75rem;
     height: 1.75rem;
     border-radius: var(--wr-calendar-day-radius);
     color: var(--wr-calendar-muted);
-    font-size: 1.125rem;
     line-height: 1;
     cursor: pointer;
     transition:
@@ -82,7 +84,7 @@
 
     &:hover:not(:disabled) {
       color: var(--wr-calendar-color);
-      background: rgba(var(--wr-color-light-rgb), 0.5);
+      background: var(--wr-color-hover);
     }
 
     &:focus-visible {
@@ -106,7 +108,7 @@
   &__weekday {
     text-align: center;
     color: var(--wr-calendar-muted);
-    font-size: 0.6875rem;
+    font-size: var(--wr-text-xs);
     font-weight: 600;
     line-height: 1.5rem;
     text-transform: uppercase;
@@ -134,7 +136,7 @@
     margin: 0;
     height: var(--wr-calendar-cell-size);
     font-family: inherit;
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
     line-height: var(--wr-calendar-cell-size);
     color: var(--wr-calendar-color);
     border-radius: var(--wr-calendar-day-radius);
@@ -144,7 +146,7 @@
       color var(--wr-transition-base);
 
     &:hover:not(:disabled):not(.wr-calendar__day--selected) {
-      background: rgba(var(--wr-color-light-rgb), 0.5);
+      background: var(--wr-color-hover);
     }
 
     &:focus-visible {
@@ -208,7 +210,7 @@
     margin: 0;
     height: 2.5rem;
     font-family: inherit;
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
     line-height: 2.5rem;
     color: var(--wr-calendar-color);
     border-radius: var(--wr-calendar-day-radius);
@@ -218,7 +220,7 @@
       color var(--wr-transition-base);
 
     &:hover:not(:disabled):not(.wr-calendar__chip--selected) {
-      background: rgba(var(--wr-color-light-rgb), 0.5);
+      background: var(--wr-color-hover);
     }
 
     &:focus-visible {

package/calendar-heatmap/styles/_index.scss

@@ -3,7 +3,7 @@
 .wr-calendar-heatmap {
   display: inline-block;
   font-family: var(--wr-font-family-base);
-  color: var(--wr-color-medium);
+  color: var(--wr-color-on-surface-muted);
 
   &__grid {
     display: grid;
@@ -20,7 +20,7 @@
     grid-template-rows: repeat(7, var(--wr-heatmap-cell-size));
     gap: var(--wr-heatmap-cell-gap);
     font-size: var(--wr-text-xs);
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     align-items: center;
   }
 
@@ -43,7 +43,7 @@
   &__months {
     grid-area: months;
     font-size: var(--wr-text-xs);
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
   }
 
   &__month {
@@ -59,6 +59,8 @@
   &__cell {
     width: var(--wr-heatmap-cell-size);
     height: var(--wr-heatmap-cell-size);
+    // 2px — intentional micro-radius for the tiny (~11px) cells; the control /
+    // border-radius tokens (5px+) would read as near-circles at this size.
     border-radius: 2px;
     transition: transform var(--wr-transition-base);
 

package/card/styles/_index.scss

@@ -1,9 +1,9 @@
 @use '../../theme/styles' as theme;
 
 .wr-card {
-  --wr-card-bg: var(--wr-color-white);
-  --wr-card-color: var(--wr-color-dark);
-  --wr-card-border: var(--wr-color-light);
+  --wr-card-bg: var(--wr-color-surface);
+  --wr-card-color: var(--wr-color-on-surface);
+  --wr-card-border: var(--wr-color-outline);
   --wr-card-radius: var(--wr-border-radius-base);
   --wr-card-padding-y: 1rem;
   --wr-card-padding-x: 1.25rem;
@@ -75,14 +75,14 @@
     align-items: center;
     justify-content: center;
     @include theme.smooth-br(var(--wr-card-radius));
-    background: rgb(255 255 255 / 50%);
+    background: rgba(var(--wr-color-surface-rgb), 0.5);
     pointer-events: none;
   }
 
   &__spinner {
     width: 1.5rem;
     height: 1.5rem;
-    border: 2px solid rgb(var(--wr-color-medium-rgb) / 30%);
+    border: 2px solid rgb(var(--wr-color-on-surface-muted-rgb) / 30%);
     border-top-color: var(--wr-color-primary);
     border-radius: 50%;
     animation: wr-card-spin 0.7s linear infinite;

package/carousel/styles/_index.scss

@@ -50,8 +50,8 @@
     justify-content: center;
     border: 0;
     border-radius: 50%;
-    background: rgba(var(--wr-color-white-rgb), 0.85);
-    color: var(--wr-color-dark);
+    background: rgba(var(--wr-color-surface-rgb), 0.85);
+    color: var(--wr-color-on-surface);
     cursor: pointer;
     box-shadow: var(--wr-shadow-sm);
     backdrop-filter: blur(4px);
@@ -60,7 +60,7 @@
       transform var(--wr-transition-base);
 
     &:hover {
-      background: var(--wr-color-white);
+      background: var(--wr-color-surface);
       transform: translateY(-50%) scale(1.05);
     }
 
@@ -87,8 +87,8 @@
     height: 0.5rem;
     border: 0;
     border-radius: 50%;
-    background: rgba(var(--wr-color-white-rgb), 0.55);
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
+    background: rgba(var(--wr-color-surface-rgb), 0.55);
+    box-shadow: 0 0 0 1px rgba(var(--wr-color-black-rgb), 0.15);
     cursor: pointer;
     transition:
       width var(--wr-transition-base),
@@ -98,7 +98,7 @@
     &--active {
       width: 1.25rem;
       border-radius: var(--wr-border-radius-pill);
-      background: var(--wr-color-white);
+      background: var(--wr-color-surface);
     }
   }
 }

package/cascader/styles/_index.scss

@@ -2,15 +2,17 @@
 // is a horizontal row of columns where each column lists the children
 // of the previously-active node. Picking a leaf commits the path.
 
+@use '../../theme/styles' as theme;
+
 .wr-cascader {
-  --wr-cascader-color: var(--wr-color-dark);
-  --wr-cascader-bg: var(--wr-color-white);
-  --wr-cascader-border: var(--wr-color-light);
-  --wr-cascader-radius: var(--wr-border-radius-base);
-  --wr-cascader-padding-y: 0.4375rem;
-  --wr-cascader-padding-x: 0.75rem;
-  --wr-cascader-font-size: 0.875rem;
-  --wr-cascader-line-height: 1.25rem;
+  --wr-cascader-color: var(--wr-color-on-surface);
+  --wr-cascader-bg: var(--wr-color-surface);
+  --wr-cascader-border: var(--wr-color-outline);
+  --wr-cascader-radius: var(--wr-control-radius-md);
+  --wr-cascader-padding-y: var(--wr-control-padding-y-md);
+  --wr-cascader-padding-x: var(--wr-control-padding-x-md);
+  --wr-cascader-font-size: var(--wr-control-font-size-md);
+  --wr-cascader-line-height: var(--wr-control-line-height-md);
   --wr-cascader-col-width: 12rem;
   --wr-cascader-max-height: 16rem;
 
@@ -18,8 +20,25 @@
   vertical-align: middle;
 
   &--disabled {
-    --wr-cascader-color: var(--wr-color-medium);
-    --wr-cascader-bg: rgba(var(--wr-color-light-rgb), 0.35);
+    --wr-cascader-color: var(--wr-color-on-surface-muted);
+    --wr-cascader-bg: rgba(var(--wr-color-outline-rgb), 0.35);
+  }
+
+  // Sizes — trigger on the control contract (sm 22 / md 30 / lg 36).
+  &--sm {
+    --wr-cascader-radius: var(--wr-control-radius-sm);
+    --wr-cascader-padding-y: var(--wr-control-padding-y-sm);
+    --wr-cascader-padding-x: var(--wr-control-padding-x-sm);
+    --wr-cascader-font-size: var(--wr-control-font-size-sm);
+    --wr-cascader-line-height: var(--wr-control-line-height-sm);
+  }
+
+  &--lg {
+    --wr-cascader-radius: var(--wr-control-radius-lg);
+    --wr-cascader-padding-y: var(--wr-control-padding-y-lg);
+    --wr-cascader-padding-x: var(--wr-control-padding-x-lg);
+    --wr-cascader-font-size: var(--wr-control-font-size-lg);
+    --wr-cascader-line-height: var(--wr-control-line-height-lg);
   }
 
   &__trigger {
@@ -44,9 +63,8 @@
       box-shadow var(--wr-transition-base);
 
     &:focus-visible {
-      outline: none;
       border-color: var(--wr-color-primary);
-      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);
+      @include theme.focus-ring;
     }
 
     &:disabled {
@@ -68,13 +86,13 @@
   }
 
   &__placeholder {
-    color: rgba(var(--wr-color-medium-rgb), 0.85);
+    color: var(--wr-color-text-muted);
   }
 
   &__chevron {
     --wr-icon-size: 1rem;
     flex: 0 0 auto;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     transition: transform var(--wr-transition-base);
   }
 
@@ -90,15 +108,15 @@
     width: 1.125rem;
     height: 1.125rem;
     border-radius: 999px;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     cursor: pointer;
     transition:
       background 0.12s ease,
       color 0.12s ease;
 
     &:hover {
-      background: rgba(var(--wr-color-dark-rgb), 0.06);
-      color: var(--wr-color-dark);
+      background: rgba(var(--wr-color-on-surface-rgb), 0.06);
+      color: var(--wr-color-on-surface);
     }
   }
 }
@@ -108,48 +126,70 @@
 }
 
 .wr-cascader-panel {
+  // Option sizing — mirrored from the trigger size (panel is portaled, so it
+  // can't inherit the host size class). Default md.
+  --wr-cascader-opt-font: var(--wr-control-font-size-md);
+  --wr-cascader-opt-py: 0.5rem;
+
   display: flex;
-  background: var(--wr-color-white);
-  border: 1px solid var(--wr-color-light);
+  background: var(--wr-color-surface);
+  border: 1px solid var(--wr-color-outline);
   border-radius: var(--wr-border-radius-base);
   box-shadow: var(--wr-shadow-overlay);
   font-family: var(--wr-font-family-base);
-  font-size: 0.875rem;
+  font-size: var(--wr-cascader-opt-font);
   overflow: hidden;
 
+  &--sm {
+    --wr-cascader-opt-font: var(--wr-control-font-size-sm);
+    --wr-cascader-opt-py: 0.375rem;
+  }
+
+  &--lg {
+    --wr-cascader-opt-font: var(--wr-control-font-size-lg);
+    --wr-cascader-opt-py: 0.625rem;
+  }
+
   .wr-cascader__col {
     list-style: none;
     margin: 0;
-    padding: 0.25rem 0;
+    // Inset padding so options read as rounded pills, matching the select panel.
+    padding: 0.25rem;
     width: var(--wr-cascader-col-width, 12rem);
     max-height: var(--wr-cascader-max-height, 16rem);
     overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
 
     + .wr-cascader__col {
-      border-left: 1px solid var(--wr-color-light);
+      border-left: 1px solid var(--wr-color-outline);
     }
   }
 
+  // Options mirror .wr-option (rounded pill, soft primary tint when active).
   .wr-cascader__opt {
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    padding: 0.5rem 0.75rem;
-    color: var(--wr-color-dark);
+    padding: var(--wr-cascader-opt-py) 0.625rem;
+    border-radius: var(--wr-border-radius-sm);
+    color: var(--wr-color-on-surface);
     cursor: pointer;
-    transition: background 0.12s ease;
+    transition: background var(--wr-transition-short);
 
     &:hover {
-      background: rgba(var(--wr-color-light-rgb), 0.5);
+      background: var(--wr-color-hover);
     }
 
     &--active {
-      background: rgba(var(--wr-color-primary-rgb), 0.08);
+      background: var(--wr-color-primary-soft);
       color: var(--wr-color-primary);
+      font-weight: 500;
     }
 
     &--disabled {
-      color: var(--wr-color-medium);
+      color: var(--wr-color-on-surface-muted);
       cursor: not-allowed;
       opacity: 0.55;
 
@@ -169,7 +209,7 @@
   .wr-cascader__opt-arrow {
     --wr-icon-size: 0.875rem;
     flex: 0 0 auto;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
   }
 }
 

package/checkbox/styles/_index.scss

@@ -1,19 +1,21 @@
 @use '../../theme/styles' as theme;
 
 .wr-checkbox {
-  --wr-checkbox-size: 1.125rem;
-  --wr-checkbox-radius: var(--wr-border-radius-sm);
-  --wr-checkbox-bg: var(--wr-color-white);
-  --wr-checkbox-border: var(--wr-color-light);
+  --wr-checkbox-size: 1.125rem; // md box (18px)
+  --wr-checkbox-radius: var(--wr-control-radius-md);
+  --wr-checkbox-font-size: var(--wr-text-sm);
+  --wr-checkbox-line-height: var(--wr-control-line-height-md);
+  --wr-checkbox-bg: var(--wr-color-surface);
+  --wr-checkbox-border: var(--wr-color-outline);
   --wr-checkbox-mark: transparent;
-  --wr-checkbox-color: var(--wr-color-dark);
+  --wr-checkbox-color: var(--wr-color-on-surface);
 
   display: inline-flex;
   vertical-align: middle;
   color: var(--wr-checkbox-color);
   font-family: var(--wr-font-family-base);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: var(--wr-checkbox-font-size);
+  line-height: var(--wr-checkbox-line-height);
 
   &__label {
     display: inline-flex;
@@ -53,7 +55,8 @@
     transition: var(--wr-transition-base);
   }
 
-  &__mark {
+  &__mark,
+  &__dash {
     width: 100%;
     height: 100%;
     transform: scale(0.7);
@@ -76,6 +79,21 @@
     --wr-checkbox-border: var(--wr-color-primary);
   }
 
+  // Sizes — box, radius, label font + line-height scale together.
+  &--sm {
+    --wr-checkbox-size: 1rem; // 16px
+    --wr-checkbox-radius: var(--wr-control-radius-sm);
+    --wr-checkbox-font-size: var(--wr-text-xs);
+    --wr-checkbox-line-height: var(--wr-control-line-height-sm);
+  }
+
+  &--lg {
+    --wr-checkbox-size: 1.25rem; // 20px
+    --wr-checkbox-radius: var(--wr-control-radius-lg);
+    --wr-checkbox-font-size: var(--wr-text-base);
+    --wr-checkbox-line-height: var(--wr-control-line-height-lg);
+  }
+
   &--checked {
     --wr-checkbox-bg: var(--wr-color-primary);
     --wr-checkbox-border: var(--wr-color-primary);
@@ -88,8 +106,22 @@
     }
   }
 
+  // Indeterminate: same filled box as checked, but reveals the dash. Takes
+  // visual precedence over `--checked` (the two classes are mutually exclusive
+  // in the host binding).
+  &--indeterminate {
+    --wr-checkbox-bg: var(--wr-color-primary);
+    --wr-checkbox-border: var(--wr-color-primary);
+    --wr-checkbox-mark: var(--wr-color-primary-contrast);
+
+    .wr-checkbox__dash {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
   &--disabled {
-    --wr-checkbox-color: var(--wr-color-medium);
+    --wr-checkbox-color: var(--wr-color-on-surface-muted);
     pointer-events: none;
     opacity: 0.6;
   }

package/collapse/styles/_index.scss

@@ -1,10 +1,10 @@
 @use '../../theme/styles' as theme;
 
 .wr-collapse {
-  --wr-collapse-bg: var(--wr-color-white);
-  --wr-collapse-border: var(--wr-color-light);
+  --wr-collapse-bg: var(--wr-color-surface);
+  --wr-collapse-border: var(--wr-color-outline);
   --wr-collapse-radius: var(--wr-border-radius-base);
-  --wr-collapse-color: var(--wr-color-dark);
+  --wr-collapse-color: var(--wr-color-on-surface);
 
   display: block;
   border: 1px solid var(--wr-collapse-border);
@@ -28,14 +28,14 @@
     border: 0;
     color: inherit;
     font: inherit;
-    font-size: 0.9375rem;
+    font-size: var(--wr-text-base);
     font-weight: 500;
     text-align: left;
     cursor: pointer;
     transition: background var(--wr-transition-base);
 
     &:hover:not(:disabled) {
-      background: rgba(var(--wr-color-light-rgb), 0.25);
+      background: rgba(var(--wr-color-outline-rgb), 0.25);
     }
 
     &:disabled {
@@ -50,7 +50,7 @@
   &__chevron {
     --wr-icon-size: 1rem;
     flex: 0 0 auto;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     transition: transform var(--wr-transition-base);
   }
 
@@ -82,7 +82,7 @@
   }
 
   &--disabled {
-    --wr-collapse-color: var(--wr-color-medium);
+    --wr-collapse-color: var(--wr-color-on-surface-muted);
     opacity: 0.7;
   }
 }