ngwr 7.3.0 → 9.0.0

package/schematics/use/symbol-map.json

@@ -1,4 +1,6 @@
 {
+  "WrActionSheet": "ngwr/action-sheet",
+  "WrActionSheetAction": "ngwr/action-sheet",
   "WrAffix": "ngwr/affix",
   "WrAlert": "ngwr/alert",
   "WrAlertType": "ngwr/alert",
@@ -36,7 +38,9 @@
   "WrCarouselSlide": "ngwr/carousel",
   "WrCascader": "ngwr/cascader",
   "WrCascaderOption": "ngwr/cascader",
+  "WrCascaderSize": "ngwr/cascader",
   "WrCheckbox": "ngwr/checkbox",
+  "WrCheckboxSize": "ngwr/checkbox",
   "WrCheckboxGroup": "ngwr/checkbox",
   "WrCheckboxGroupContext": "ngwr/checkbox",
   "WrCircularText": "ngwr/circular-text",
@@ -101,7 +105,6 @@
   "WrAutosize": "ngwr/directives",
   "WrClickOutside": "ngwr/directives",
   "WrCopyToClipboard": "ngwr/directives",
-  "WrReveal": "ngwr/directives",
   "WrDivider": "ngwr/divider",
   "WrDividerType": "ngwr/divider",
   "WrDonutChart": "ngwr/donut-chart",
@@ -168,9 +171,11 @@
   "WrInputGroup": "ngwr/input",
   "WrPasswordToggle": "ngwr/input",
   "WrInputType": "ngwr/input",
+  "WrInputSize": "ngwr/input",
   "WrInputNumber": "ngwr/input-number",
   "WrInputOtp": "ngwr/input-otp",
   "WrInputOtpMode": "ngwr/input-otp",
+  "WrInputOtpSize": "ngwr/input-otp",
   "WrKbd": "ngwr/keyboard",
   "WrKbdSize": "ngwr/keyboard",
   "WrKnob": "ngwr/knob",
@@ -221,18 +226,24 @@
   "WrRange": "ngwr/pipes",
   "WrTruncate": "ngwr/pipes",
   "WrPlatform": "ngwr/platform",
+  "WrVisualViewport": "ngwr/platform",
+  "WrHaptics": "ngwr/platform",
+  "WrHapticImpact": "ngwr/platform",
   "WrPopconfirm": "ngwr/popconfirm",
   "WrPopconfirmPanel": "ngwr/popconfirm",
   "WrPopconfirmPosition": "ngwr/popconfirm",
   "WrPopover": "ngwr/popover",
   "WrPopoverPosition": "ngwr/popover",
   "WrProgress": "ngwr/progress",
+  "WrPullToRefresh": "ngwr/pull-to-refresh",
   "WrQr": "ngwr/qr",
   "WrQrErrorLevel": "ngwr/qr",
   "WrRadio": "ngwr/radio",
+  "WrRadioSize": "ngwr/radio",
   "WrRadioGroup": "ngwr/radio",
   "WrRadioGroupContext": "ngwr/radio",
   "WrRating": "ngwr/rating",
+  "WrRatingSize": "ngwr/rating",
   "WrResult": "ngwr/result",
   "WrResultStatus": "ngwr/result",
   "WrResult404": "ngwr/result",
@@ -241,12 +252,12 @@
   "WrRotatingText": "ngwr/rotating-text",
   "WrRotatingTextSplit": "ngwr/rotating-text",
   "WrRotatingTextStaggerFrom": "ngwr/rotating-text",
-  "WrScrambleText": "ngwr/scramble-text",
   "WrScroll": "ngwr/scroll",
   "WrScrollTarget": "ngwr/scroll",
   "WrScrollOptions": "ngwr/scroll",
   "WrSegmented": "ngwr/segmented",
   "WrSegmentedOption": "ngwr/segmented",
+  "WrSegmentedSize": "ngwr/segmented",
   "WrSelect": "ngwr/select",
   "WrOption": "ngwr/select",
   "WrOptionGroup": "ngwr/select",
@@ -254,6 +265,7 @@
   "WrSelectMode": "ngwr/select",
   "WrSelectSearchLoader": "ngwr/select",
   "WrSelectTagValidator": "ngwr/select",
+  "WrSelectSize": "ngwr/select",
   "WrShinyText": "ngwr/shiny-text",
   "WrShimmer": "ngwr/shiny-text",
   "WrSidebar": "ngwr/sidebar",
@@ -286,6 +298,7 @@
   "WrStarBorderRays": "ngwr/star-border",
   "WrStatistic": "ngwr/statistic",
   "WrStatisticCountdown": "ngwr/statistic",
+  "WrStatisticGroup": "ngwr/statistic",
   "WrStepper": "ngwr/stepper",
   "WrStep": "ngwr/stepper",
   "WrStepperContext": "ngwr/stepper",
@@ -294,21 +307,30 @@
   "WrStorageConfigResolved": "ngwr/storage",
   "WrStorageEngine": "ngwr/storage",
   "WrSwitch": "ngwr/switch",
+  "WrSwitchSize": "ngwr/switch",
   "WrTable": "ngwr/table",
   "WrTableCell": "ngwr/table",
+  "WrTableExpand": "ngwr/table",
+  "WrTableGroupHeader": "ngwr/table",
   "WrTableSort": "ngwr/table",
   "WrTableFilter": "ngwr/table",
   "WrTableCellContext": "ngwr/table",
   "WrTableColumn": "ngwr/table",
   "WrTableColumns": "ngwr/table",
+  "WrTableCsvOptions": "ngwr/table",
+  "WrTableExpandContext": "ngwr/table",
   "WrTableFilterChange": "ngwr/table",
   "WrTableFilterItem": "ngwr/table",
+  "WrTableGroupContext": "ngwr/table",
   "WrTableSortState": "ngwr/table",
   "WrTableSortDirection": "ngwr/table",
+  "WrTableSummary": "ngwr/table",
   "WrTabs": "ngwr/tabs",
   "WrTab": "ngwr/tabs",
   "WrTabsContext": "ngwr/tabs",
   "WrTextarea": "ngwr/textarea",
+  "WrTextareaSize": "ngwr/textarea",
+  "WrTextareaResize": "ngwr/textarea",
   "WrColor": "ngwr/theme",
   "WrTheme": "ngwr/theme",
   "WrResolvedTheme": "ngwr/theme",

package/segmented/styles/_index.scss

@@ -1,12 +1,17 @@
 @use '../../theme/styles' as theme;
 
 .wr-segmented {
-  --wr-segmented-bg: rgba(var(--wr-color-light-rgb), 0.4);
-  --wr-segmented-color: var(--wr-color-dark);
-  --wr-segmented-selected-bg: var(--wr-color-white);
-  --wr-segmented-selected-color: var(--wr-color-dark);
-  --wr-segmented-radius: var(--wr-border-radius-base);
+  --wr-segmented-bg: rgba(var(--wr-color-outline-rgb), 0.4);
+  --wr-segmented-color: var(--wr-color-on-surface);
+  --wr-segmented-selected-bg: var(--wr-color-surface);
+  --wr-segmented-selected-color: var(--wr-color-on-surface);
+  --wr-segmented-radius: 0.5rem; // 8px track
+  // Concentric thumb: outer − inset, so track and thumb corners nest naturally.
+  --wr-segmented-thumb-radius: calc(var(--wr-segmented-radius) - var(--wr-segmented-padding));
   --wr-segmented-padding: 0.1875rem;
+  --wr-segmented-font-size: var(--wr-text-sm);
+  --wr-segmented-line-height: var(--wr-control-line-height-md);
+  --wr-segmented-option-py: 0.125rem;
 
   --wr-segmented-thumb-index: 0;
   --wr-segmented-thumb-count: 1;
@@ -20,8 +25,25 @@
   padding: var(--wr-segmented-padding);
   @include theme.smooth-br(var(--wr-segmented-radius));
   font-family: var(--wr-font-family-base);
-  font-size: 0.8125rem;
-  line-height: 1.25rem;
+  font-size: var(--wr-segmented-font-size);
+  line-height: var(--wr-segmented-line-height);
+
+  // Sizes — track 22 / 30 / 36 px (line-height + 2×option-py + 2×track-padding).
+  &--sm {
+    --wr-segmented-radius: 0.4375rem; // 7px → concentric 5px thumb
+    --wr-segmented-padding: 0.125rem; // 2px
+    --wr-segmented-font-size: var(--wr-text-xs);
+    --wr-segmented-line-height: var(--wr-control-line-height-sm);
+    --wr-segmented-option-py: 0.0625rem; // 1px
+  }
+
+  &--lg {
+    --wr-segmented-radius: 0.5625rem; // 9px → concentric 6px thumb
+    --wr-segmented-padding: 0.1875rem; // 3px
+    --wr-segmented-font-size: var(--wr-text-base);
+    --wr-segmented-line-height: var(--wr-control-line-height-lg);
+    --wr-segmented-option-py: 0.1875rem; // 3px
+  }
 
   &__thumb {
     position: absolute;
@@ -31,8 +53,8 @@
     width: calc((100% - 2 * var(--wr-segmented-padding)) / var(--wr-segmented-thumb-count));
     transform: translateX(calc(100% * var(--wr-segmented-thumb-index)));
     background: var(--wr-segmented-selected-bg);
-    @include theme.smooth-br(calc(var(--wr-segmented-radius) - var(--wr-segmented-padding)));
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+    @include theme.smooth-br(var(--wr-segmented-thumb-radius));
+    box-shadow: var(--wr-shadow-xs);
     pointer-events: none;
     // Animate slides, but only after first paint — see `&--mounted` below.
   }
@@ -56,8 +78,9 @@
     appearance: none;
     background: transparent;
     border: 0;
-    padding: 0.3125rem 0.75rem;
-    @include theme.smooth-br(calc(var(--wr-segmented-radius) - var(--wr-segmented-padding)));
+    // Height = line-height + 2×option-py + 2×track-padding (md → 30px); all scale per size.
+    padding: var(--wr-segmented-option-py) 0.75rem;
+    @include theme.smooth-br(var(--wr-segmented-thumb-radius));
     color: var(--wr-segmented-color);
     font: inherit;
     cursor: pointer;
@@ -82,7 +105,7 @@
   }
 
   &__label {
-    line-height: 1.25rem;
+    line-height: var(--wr-segmented-line-height);
   }
 
   &--disabled {

package/select/styles/_index.scss

@@ -2,18 +2,37 @@
 @use '../../overlay/styles'; // shared .wr-overlay-sheet / .wr-overlay-backdrop for responsive mode
 
 .wr-select {
-  --wr-select-color: var(--wr-color-dark);
-  --wr-select-bg: var(--wr-color-white);
-  --wr-select-border: var(--wr-color-light);
-  --wr-select-radius: var(--wr-border-radius-base);
-  --wr-select-padding-y: 0.4375rem;
-  --wr-select-padding-x: 0.75rem;
-  --wr-select-font-size: 0.875rem;
-  --wr-select-line-height: 1.25rem;
+  --wr-select-color: var(--wr-color-on-surface);
+  --wr-select-bg: var(--wr-color-surface);
+  --wr-select-border: var(--wr-color-outline);
+  --wr-select-radius: var(--wr-control-radius-md);
+  --wr-select-padding-y: var(--wr-control-padding-y-md);
+  --wr-select-padding-x: var(--wr-control-padding-x-md);
+  --wr-select-font-size: var(--wr-control-font-size-md);
+  --wr-select-line-height: var(--wr-control-line-height-md);
 
   display: inline-flex;
   vertical-align: middle;
 
+  // Sizes — share the `--wr-control-*` contract (22 / 30 / 36 px). Multi/tag
+  // min-height and the search/tag inputs all read these vars, so every mode
+  // tracks the size. Declared before `--rounded` so the pill modifier wins.
+  &--sm {
+    --wr-select-radius: var(--wr-control-radius-sm);
+    --wr-select-padding-y: var(--wr-control-padding-y-sm);
+    --wr-select-padding-x: var(--wr-control-padding-x-sm);
+    --wr-select-font-size: var(--wr-control-font-size-sm);
+    --wr-select-line-height: var(--wr-control-line-height-sm);
+  }
+
+  &--lg {
+    --wr-select-radius: var(--wr-control-radius-lg);
+    --wr-select-padding-y: var(--wr-control-padding-y-lg);
+    --wr-select-padding-x: var(--wr-control-padding-x-lg);
+    --wr-select-font-size: var(--wr-control-font-size-lg);
+    --wr-select-line-height: var(--wr-control-line-height-lg);
+  }
+
   &--rounded {
     --wr-select-radius: var(--wr-border-radius-pill);
     --wr-select-padding-x: 1rem;
@@ -21,8 +40,8 @@
   }
 
   &--disabled {
-    --wr-select-color: var(--wr-color-medium);
-    --wr-select-bg: rgba(var(--wr-color-light-rgb), 0.35);
+    --wr-select-color: var(--wr-color-on-surface-muted);
+    --wr-select-bg: rgba(var(--wr-color-outline-rgb), 0.35);
   }
 
   &__trigger {
@@ -48,9 +67,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 {
@@ -72,13 +90,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);
   }
 
@@ -94,8 +112,10 @@
   &--tag &__trigger {
     flex-wrap: wrap;
     align-items: center;
-    padding: 0.25rem 0.5rem;
-    min-height: calc(var(--wr-select-line-height) + var(--wr-select-padding-y) * 2);
+    padding: calc(var(--wr-select-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-select-padding-x) * var(--wr-density-x, 1));
+    // Empty / single chip-row floor = single-mode height
+    // (line-height + 2×padding-y + 2×1px border), so every size + density lines up.
+    min-height: calc(var(--wr-select-line-height) + var(--wr-select-padding-y) * var(--wr-density-y, 1) * 2 + 2px);
   }
 
   // Search-mode trigger: inline text input + chevron + clear
@@ -114,7 +134,7 @@
     min-width: 0;
     border: 0;
     outline: 0;
-    padding: var(--wr-select-padding-y) var(--wr-select-padding-x);
+    padding: calc(var(--wr-select-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-select-padding-x) * var(--wr-density-x, 1));
     background: transparent;
     color: inherit;
     font: inherit;
@@ -122,7 +142,7 @@
     line-height: var(--wr-select-line-height);
 
     &::placeholder {
-      color: rgba(var(--wr-color-medium-rgb), 0.85);
+      color: var(--wr-color-text-muted);
     }
 
     &:disabled {
@@ -149,11 +169,11 @@
     background: transparent;
     color: inherit;
     font: inherit;
-    font-size: 0.875rem;
-    line-height: 1.4;
+    font-size: var(--wr-select-font-size);
+    line-height: var(--wr-select-line-height);
 
     &::placeholder {
-      color: rgba(var(--wr-color-medium-rgb), 0.85);
+      color: var(--wr-color-text-muted);
     }
 
     &:disabled {
@@ -177,9 +197,9 @@
     max-width: 100%;
     padding: 0.125rem 0.25rem 0.125rem 0.5rem;
     border-radius: 999px;
-    background: rgba(var(--wr-color-primary-rgb), 0.1);
+    background: var(--wr-color-primary-soft);
     color: var(--wr-color-primary);
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
     line-height: 1.4;
     user-select: none;
   }
@@ -202,13 +222,13 @@
     transition: background 0.12s ease;
 
     &:hover {
-      background: rgba(var(--wr-color-primary-rgb), 0.2);
+      background: var(--wr-color-primary-active);
     }
   }
 
   &__chip--more {
-    background: rgba(var(--wr-color-dark-rgb), 0.08);
-    color: rgba(var(--wr-color-dark-rgb), 0.7);
+    background: rgba(var(--wr-color-on-surface-rgb), 0.08);
+    color: rgba(var(--wr-color-on-surface-rgb), 0.7);
   }
 
   &__clear {
@@ -220,15 +240,15 @@
     height: 1.125rem;
     margin-right: -0.25rem;
     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);
     }
   }
 }
@@ -238,14 +258,25 @@
 }
 
 .wr-select-panel {
-  --wr-select-panel-bg: var(--wr-color-white);
-  --wr-select-panel-border: var(--wr-color-light);
+  --wr-select-panel-bg: var(--wr-color-surface);
+  --wr-select-panel-border: var(--wr-color-outline);
   --wr-select-panel-radius: var(--wr-border-radius-base);
   --wr-select-panel-shadow: var(--wr-shadow-overlay);
   --wr-select-panel-max-height: 16rem;
+  // Option sizing — default md. --sm/--lg are set from the trigger size because
+  // the panel is portaled into an overlay and can't inherit the host size class.
+  --wr-option-font-size: var(--wr-control-font-size-md);
+  --wr-option-line-height: var(--wr-control-line-height-md);
+  --wr-option-padding-y: 0.4375rem;
+  --wr-option-padding-x: 0.625rem;
+  --wr-option-gap: 0.1875rem;
 
   display: flex;
   flex-direction: column;
+  // Fill the overlay pane so the visible panel == the pointer-catching surface;
+  // no transparent gutter to swallow outside-clicks (see openOverlay in select.ts).
+  width: 100%;
+  gap: var(--wr-option-gap);
   background: var(--wr-select-panel-bg);
   border: 1px solid var(--wr-select-panel-border);
   @include theme.smooth-br(var(--wr-select-panel-radius));
@@ -255,11 +286,27 @@
   overflow-y: auto;
   font-family: var(--wr-font-family-base);
 
+  &--sm {
+    --wr-option-font-size: var(--wr-control-font-size-sm);
+    --wr-option-line-height: var(--wr-control-line-height-sm);
+    --wr-option-padding-y: 0.3125rem;
+    --wr-option-padding-x: 0.5rem;
+    --wr-option-gap: 0.125rem;
+  }
+
+  &--lg {
+    --wr-option-font-size: var(--wr-control-font-size-lg);
+    --wr-option-line-height: var(--wr-control-line-height-lg);
+    --wr-option-padding-y: 0.5rem;
+    --wr-option-padding-x: 0.75rem;
+    --wr-option-gap: 0.25rem;
+  }
+
   &__loading,
   &__empty {
     padding: 0.625rem 0.75rem;
-    color: var(--wr-color-medium);
-    font-size: 0.875rem;
+    color: var(--wr-color-on-surface-muted);
+    font-size: var(--wr-option-font-size);
     text-align: center;
   }
 }
@@ -267,27 +314,27 @@
 .wr-option {
   display: flex;
   align-items: center;
-  padding: 0.4375rem 0.625rem;
+  padding: var(--wr-option-padding-y) var(--wr-option-padding-x);
   border-radius: var(--wr-border-radius-sm);
-  color: var(--wr-color-dark);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  color: var(--wr-color-on-surface);
+  font-size: var(--wr-option-font-size);
+  line-height: var(--wr-option-line-height);
   cursor: pointer;
   user-select: none;
   transition: background var(--wr-transition-short);
 
   &:hover {
-    background: rgba(var(--wr-color-light-rgb), 0.4);
+    background: var(--wr-color-hover);
   }
 
   &--selected {
-    background: rgba(var(--wr-color-primary-rgb), 0.1);
+    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.6;
 
@@ -303,21 +350,57 @@
   }
 }
 
+// --- Virtual scroll (search-mode data-array path) ---------------------------
+.wr-select-panel--virtual {
+  // The inner `__vlist` owns scrolling; the panel must not add a second scroll
+  // container or cap height, and the flex `gap` would drift the fixed-offset
+  // window math — zero it so rows are contiguous from offset 0.
+  max-height: none;
+  overflow: visible;
+  gap: 0;
+
+  .wr-select-panel__vlist {
+    // `max-height` is set inline from `viewportHeight`.
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  // Height-only reserved rows.
+  .wr-select-panel__vspacer {
+    flex: none;
+  }
+
+  // Uniform row height: keep each option a single line so measurement matches.
+  .wr-option {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  // Keyboard cursor highlight — the virtualized list is navigated by
+  // aria-activedescendant, so the active row needs a visible marker.
+  .wr-option--active {
+    background: var(--wr-color-hover);
+  }
+}
+
 .wr-option-group {
   display: flex;
   flex-direction: column;
+  gap: var(--wr-option-gap);
 
   &__label {
     padding: 0.5rem 0.625rem 0.25rem;
-    color: var(--wr-color-medium);
-    font-size: 0.6875rem;
+    color: var(--wr-color-on-surface-muted);
+    font-size: var(--wr-text-xs);
     font-weight: 600;
     letter-spacing: 0.04em;
     text-transform: uppercase;
   }
 
   + .wr-option-group {
-    border-top: 1px solid var(--wr-color-light);
+    border-top: 1px solid var(--wr-color-outline);
     margin-top: 0.25rem;
     padding-top: 0.25rem;
   }

package/shiny-text/styles/_index.scss

@@ -10,8 +10,8 @@
   // Theme-default sweep (overridden by `[color]` / `[shineColor]`):
   // gray base with a dark shine on light surfaces; dark theme restores
   // the reactbits gray-with-white-flash below.
-  --wr-shiny-text-base: var(--wr-color-medium, #8594a4);
-  --wr-shiny-text-shine: var(--wr-color-dark, #0f172a);
+  --wr-shiny-text-base: var(--wr-color-on-surface-muted, #8594a4);
+  --wr-shiny-text-shine: var(--wr-color-on-surface, #0f172a);
 
   display: inline-block;
   background-size: 200% auto;
@@ -79,9 +79,9 @@
 .wr-shimmer {
   background: linear-gradient(
     110deg,
-    var(--wr-color-dark) 30%,
+    var(--wr-color-on-surface) 30%,
     rgba(var(--wr-color-primary-rgb), 0.9) 50%,
-    var(--wr-color-dark) 70%
+    var(--wr-color-on-surface) 70%
   );
   background-size: 200% 100%;
   background-clip: text;

package/sidebar/styles/_index.scss

@@ -3,7 +3,7 @@
 .wr-sidebar {
   display: block;
   font-family: var(--wr-font-family-base);
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
 
   &__inner {
     display: flex;
@@ -13,7 +13,7 @@
 
   &__icon {
     flex: 0 0 auto;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     transition: color var(--wr-transition-base);
   }
 
@@ -24,7 +24,7 @@
     gap: 0.5rem;
     padding: 0.5rem 0.75rem;
     border-radius: var(--wr-border-radius-sm);
-    color: var(--wr-color-dark);
+    color: var(--wr-color-on-surface);
     font-size: var(--wr-text-sm);
     font-weight: var(--wr-font-weight-semibold);
     line-height: 1.25rem;
@@ -34,7 +34,7 @@
       color var(--wr-transition-base);
 
     &:hover {
-      background: rgba(var(--wr-color-light-rgb), 0.5);
+      background: var(--wr-color-hover);
 
       .wr-sidebar__icon {
         color: var(--wr-color-primary);
@@ -43,7 +43,7 @@
 
     &--active {
       color: var(--wr-color-primary);
-      background: rgba(var(--wr-color-primary-rgb), 0.1);
+      background: var(--wr-color-primary-soft);
       pointer-events: none;
 
       .wr-sidebar__icon {
@@ -52,7 +52,7 @@
     }
 
     &--disabled {
-      color: var(--wr-color-medium);
+      color: var(--wr-color-on-surface-muted);
       pointer-events: none;
       opacity: 0.6;
     }
@@ -73,13 +73,13 @@
       background: transparent;
       border: 0;
       border-radius: var(--wr-border-radius-sm);
-      color: var(--wr-color-dark);
+      color: var(--wr-color-on-surface);
       cursor: pointer;
       text-align: left;
       transition: background var(--wr-transition-base);
 
       &:hover {
-        background: rgba(var(--wr-color-light-rgb), 0.5);
+        background: rgba(var(--wr-color-outline-rgb), 0.5);
 
         .wr-sidebar__icon {
           color: var(--wr-color-primary);
@@ -113,7 +113,7 @@
 
   &__chevron {
     flex: 0 0 auto;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     transition: transform var(--wr-transition-base);
   }
 
@@ -129,7 +129,7 @@
     display: flex;
     flex-direction: column;
     gap: 0.0625rem;
-    border-left: 1px solid var(--wr-color-light);
+    border-left: 1px solid var(--wr-color-outline);
   }
 
   &__item {
@@ -139,7 +139,7 @@
     gap: 0.5rem;
     padding: 0.3125rem 0.75rem;
     border-radius: var(--wr-border-radius-sm);
-    color: var(--wr-color-dark);
+    color: var(--wr-color-on-surface);
     font-size: var(--wr-text-sm);
     font-weight: var(--wr-font-weight-medium);
     line-height: 1.25rem;
@@ -175,7 +175,7 @@
 
     &--active {
       color: var(--wr-color-primary);
-      background: rgba(var(--wr-color-primary-rgb), 0.1);
+      background: var(--wr-color-primary-soft);
       pointer-events: none;
 
       &::before {
@@ -188,7 +188,7 @@
     }
 
     &--disabled {
-      color: var(--wr-color-medium);
+      color: var(--wr-color-on-surface-muted);
       pointer-events: none;
       opacity: 0.6;
     }
@@ -198,8 +198,8 @@
     flex: 0 0 auto;
     padding: 0.0625rem 0.375rem;
     border-radius: var(--wr-border-radius-pill);
-    background: rgba(var(--wr-color-light-rgb), 0.6);
-    color: var(--wr-color-medium);
+    background: rgba(var(--wr-color-outline-rgb), 0.6);
+    color: var(--wr-color-on-surface-muted);
     font-size: var(--wr-text-xs);
     font-weight: var(--wr-font-weight-semibold);
     text-transform: uppercase;