@reliability-design/web 1.3.0 → 1.4.0

package/dist/components/rel-sheet/rel-sheet.ts

@@ -1,6 +1,5 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 import "@reliability-design/icons/rel-icon";
 
 export type ModalSide = "top" | "bottom" | "center";
@@ -14,6 +13,13 @@ export class RelModal extends LitElement {
   @property({ type: Boolean }) dismissible = true;
   @property({ type: Boolean }) modal = true;
 
+  /**
+   * Figma "Breakpoint" axis. responsive (default) collapses to a full-width
+   * bottom sheet below 480px; web keeps the fixed desktop panel at every size.
+   */
+  @property({ type: String, reflect: true })
+  breakpoint: "responsive" | "web" = "responsive";
+
   @query(".overlay") private overlayElement!: HTMLElement;
 
   private previousFocus: HTMLElement | null = null;
@@ -22,6 +28,7 @@ export class RelModal extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       --modal-transition-duration: 0.3s;
       --modal-transition-timing: cubic-bezier(0.32, 0.72, 0, 1);
     }
@@ -61,13 +68,13 @@ export class RelModal extends LitElement {
 
     .panel {
       position: absolute;
-      background: var(--rel-color-bg-primary);
+      background: var(--rel-bg-surface);
       box-shadow: var(--rel-shadows-shadow-500);
       display: flex;
       flex-direction: column;
       overflow: hidden;
       outline: none;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fonts-font-family);
       width: clamp(360px, 49vw, 708px);
       left: 50%;
       transition: transform var(--modal-transition-duration) var(--modal-transition-timing),
@@ -79,7 +86,7 @@ export class RelModal extends LitElement {
       left: 50%;
       width: clamp(360px, 49vw, 708px);
       max-height: calc(100vh - 96px);
-      border-radius: var(--rel-borders-radius-border-radius-200);
+      border-radius: var(--rel-border-radius-sm);
       transform: translateX(-50%) translateY(calc(100% + 48px));
     }
 
@@ -92,7 +99,7 @@ export class RelModal extends LitElement {
       left: 50%;
       width: clamp(360px, 49vw, 708px);
       max-height: calc(100vh - 96px);
-      border-radius: var(--rel-borders-radius-border-radius-200);
+      border-radius: var(--rel-border-radius-sm);
       transform: translateX(-50%) translateY(calc(-100% - 48px));
     }
 
@@ -105,7 +112,7 @@ export class RelModal extends LitElement {
       left: 50%;
       width: clamp(360px, 49vw, 708px);
       max-height: calc(100vh - 96px);
-      border-radius: var(--rel-borders-radius-border-radius-200);
+      border-radius: var(--rel-border-radius-sm);
       transform: translate(-50%, -50%) scale(0.96);
       opacity: 0;
     }
@@ -115,12 +122,38 @@ export class RelModal extends LitElement {
       opacity: 1;
     }
 
+    /* Figma Breakpoint=Responsive: below 480px every side collapses to a
+       full-width bottom sheet. Breakpoint=Web keeps the desktop panel. */
+    @media (max-width: 480px) {
+      :host([breakpoint="responsive"]) .panel,
+      :host([breakpoint="responsive"]) .panel[data-side="top"],
+      :host([breakpoint="responsive"]) .panel[data-side="center"],
+      :host([breakpoint="responsive"]) .panel[data-side="bottom"] {
+        width: 100%;
+        left: 0;
+        right: 0;
+        top: auto;
+        bottom: 0;
+        max-height: 90vh;
+        border-radius: var(--rel-border-radius-md) var(--rel-border-radius-md) 0 0;
+        opacity: 1;
+        transform: translateY(100%);
+      }
+
+      :host([breakpoint="responsive"]) .modal-container.open .panel,
+      :host([breakpoint="responsive"]) .modal-container.open .panel[data-side="top"],
+      :host([breakpoint="responsive"]) .modal-container.open .panel[data-side="center"],
+      :host([breakpoint="responsive"]) .modal-container.open .panel[data-side="bottom"] {
+        transform: translateY(0);
+      }
+    }
+
     .header {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
-      padding: var(--rel-spacing-space-md) var(--rel-spacing-space-lg);
-      border-bottom: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
+      padding: var(--rel-spacing-md) var(--rel-spacing-lg);
+      border-bottom: var(--rel-stroke-sm) solid var(--rel-border-default);
       flex-shrink: 0;
     }
 
@@ -129,52 +162,78 @@ export class RelModal extends LitElement {
     }
 
     .header-text {
+      gap: var(--rel-spacing-2xs);
       display: flex;
       flex-direction: column;
-      gap: var(--rel-spacing-space-2xs);
+      gap: var(--rel-spacing-2xs);
     }
 
     .title {
-      font-size: var(--rel-fontSizes-lg);
-      font-weight: var(--rel-fontWeights-semibold);
-      color: var(--rel-color-text-heading);
+      color: var(--rel-text-label);
       margin: 0;
+
+      font-family: var(--rel-headings-lg-font-family);
+
+      font-weight: var(--rel-headings-lg-font-weight);
+
+      font-size: var(--rel-headings-lg-font-size);
+
+      line-height: var(--rel-headings-lg-line-height);
+
+      letter-spacing: var(--rel-headings-lg-letter-spacing);
+
     }
 
     .description {
-      font-size: var(--rel-fontSizes-sm);
-      color: var(--rel-color-text-primary);
+      color: var(--rel-text-body);
       margin: 0;
+
+      font-family: var(--rel-body-lg-regular-font-family);
+
+      font-weight: var(--rel-body-lg-regular-font-weight);
+
+      font-size: var(--rel-body-lg-regular-font-size);
+
+      line-height: var(--rel-body-lg-regular-line-height);
+
+      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
+
+    }
+
+    /* Emphasised inline text in slotted content (Figma body-lg-medium) */
+    .content ::slotted(strong),
+    .content ::slotted(b) {
+      font-weight: var(--rel-body-lg-medium-font-weight);
     }
 
     .close-button {
       background: transparent;
       border: none;
       cursor: pointer;
-      padding: var(--rel-spacing-space-2xs);
+      padding: var(--rel-spacing-2xs);
       display: flex;
       align-items: center;
       justify-content: center;
       align-self: flex-start;
       flex-shrink: 0;
-      border-radius: var(--rel-borders-radius-border-radius-100);
-      color: var(--rel-color-text-primary);
+      border-radius: var(--rel-border-radius-xs);
+      color: var(--rel-text-default);
       transition: background 0.15s ease;
     }
 
     .close-button:hover {
-      background: var(--rel-color-bg-tertiary);
+      background: var(--rel-bg-neutral-elevated-1);
     }
 
     .close-button:focus-visible {
-      outline: 2px solid var(--rel-color-border-focus);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
     }
 
     .content {
       flex: 1;
       overflow-y: auto;
-      padding: var(--rel-spacing-space-lg);
+      padding: var(--rel-spacing-xl);
     }
 
     .footer {
@@ -184,10 +243,10 @@ export class RelModal extends LitElement {
     :host([has-footer]) .footer {
       display: flex;
       flex-shrink: 0;
-      padding: var(--rel-spacing-space-md) var(--rel-spacing-space-lg);
-      border-top: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
+      padding: var(--rel-spacing-md) var(--rel-spacing-lg);
+      border-top: var(--rel-stroke-sm) solid var(--rel-border-default);
       justify-content: flex-end;
-      gap: var(--rel-spacing-space-xs);
+      gap: var(--rel-spacing-xs);
     }
 
     @media (prefers-reduced-motion: reduce) {

package/dist/components/rel-sidebar/README.md

@@ -149,8 +149,8 @@ None exposed.
 - `--sidebar-transition-timing`: `cubic-bezier(0.4, 0, 0.2, 1)`
 
 ### Color Tokens
-- `--rel-surface-secondary` - Sidebar background (`#fafafa`)
-- `--rel-text-primary` - Text color
+- `--rel-bg-surface-elevated` - Sidebar background (`#fafafa`)
+- `--rel-text-default` - Text color
 - `--rel-border-default` - Border color
 - `--rel-overlay-scrim` - Overlay background (`rgba(0, 0, 0, 0.5)`)
 
@@ -158,9 +158,9 @@ None exposed.
 - `--rel-shadows-shadow-400` - Floating variant shadow
 
 ### Other Tokens
-- `--rel-borders-radius-border-radius-300` - Floating variant border radius
-- `--rel-spacing-space-md` - Floating variant inset, header/footer padding
-- `--rel-spacing-space-2xs` - Used in various layouts
+- `--rel-border-radius-md` - Floating variant border radius
+- `--rel-spacing-md` - Floating variant inset, header/footer padding
+- `--rel-spacing-2xs` - Used in various layouts
 
 ## Accessibility
 - Sidebar uses `role="navigation"`

package/dist/components/rel-sidebar/rel-sidebar.ts

@@ -11,6 +11,12 @@ export type SidebarChangeReason = "trigger" | "rail" | "overlay" | "escape" | "s
 // ============================================================================
 // rel-sidebar-provider (Root State Manager)
 // ============================================================================
+/**
+ * @deprecated The rel-sidebar family has no Figma design in RelDS 2.0 and is
+ * excluded from the parity contract. Compose sidebars from rel-drawer,
+ * rel-menu and rel-resizable instead. It remains exported for compatibility
+ * but will be removed in a future major version.
+ */
 @customElement("rel-sidebar-provider")
 export class RelSidebarProvider extends LitElement {
   @property({ type: Boolean, reflect: true }) open?: boolean;
@@ -40,6 +46,7 @@ export class RelSidebarProvider extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: contents;
     }
   `;
@@ -335,8 +342,8 @@ export class RelSidebar extends LitElement {
       top: 0;
       bottom: 0;
       z-index: 1000;
-      background: var(--rel-surface-secondary, #fafafa);
-      color: var(--rel-text-primary, #333);
+      background: var(--rel-bg-surface-elevated);
+      color: var(--rel-text-default);
       display: flex;
       flex-direction: column;
       transition: transform var(--sidebar-transition-duration)
@@ -351,7 +358,7 @@ export class RelSidebar extends LitElement {
     /* Left side */
     .sidebar-container[data-side="left"] {
       left: 0;
-      border-right: 1px solid var(--rel-border-default, #ddd);
+      border-right: 1px solid var(--rel-border-default);
     }
 
     .sidebar-container[data-side="left"].offcanvas-hidden {
@@ -361,7 +368,7 @@ export class RelSidebar extends LitElement {
     /* Right side */
     .sidebar-container[data-side="right"] {
       right: 0;
-      border-left: 1px solid var(--rel-border-default, #ddd);
+      border-left: 1px solid var(--rel-border-default);
     }
 
     .sidebar-container[data-side="right"].offcanvas-hidden {
@@ -370,20 +377,20 @@ export class RelSidebar extends LitElement {
 
     /* Floating variant */
     .sidebar-container.variant-floating {
-      top: var(--rel-spacing-space-md, 16px);
-      bottom: var(--rel-spacing-space-md, 16px);
-      background: var(--rel-surface-secondary, #fafafa);
-      border: 1px solid var(--rel-border-default, #ddd);
-      border-radius: var(--rel-borders-radius-border-radius-300, 16px);
+      top: var(--rel-spacing-md, 16px);
+      bottom: var(--rel-spacing-md, 16px);
+      background: var(--rel-bg-surface-elevated);
+      border: 1px solid var(--rel-border-default);
+      border-radius: var(--rel-border-radius-md, 16px);
       box-shadow: var(--rel-shadows-shadow-400);
     }
 
     .sidebar-container.variant-floating[data-side="left"] {
-      left: var(--rel-spacing-space-md, 16px);
+      left: var(--rel-spacing-md, 16px);
     }
 
     .sidebar-container.variant-floating[data-side="right"] {
-      right: var(--rel-spacing-space-md, 16px);
+      right: var(--rel-spacing-md, 16px);
     }
 
     /* Inset variant */
@@ -395,11 +402,11 @@ export class RelSidebar extends LitElement {
     }
 
     .sidebar-container.variant-inset[data-side="left"] {
-      border-right: 1px solid var(--rel-border-default, #ddd);
+      border-right: 1px solid var(--rel-border-default);
     }
 
     .sidebar-container.variant-inset[data-side="right"] {
-      border-left: 1px solid var(--rel-border-default, #ddd);
+      border-left: 1px solid var(--rel-border-default);
     }
 
     /* Desktop mode - not offcanvas */
@@ -687,27 +694,27 @@ export class RelSidebarTrigger extends LitElement {
     button {
       background: none;
       border: none;
-      padding: var(--rel-spacing-space-xs, 8px);
+      padding: var(--rel-spacing-xs, 8px);
       margin: 0;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
-      color: var(--rel-text-heading, #2b2b2b);
+      border-radius: var(--rel-border-radius-sm, 8px);
+      color: var(--rel-text-label);
       transition: background 0.15s ease;
     }
 
     button:hover {
-      background: var(--rel-surface-surface, #f5f5f5);
+      background: var(--rel-bg-neutral-elevated-1);
     }
 
     button:active {
-      background: var(--rel-border-default, #ddd);
+      background: var(--rel-border-default);
     }
 
     button:focus-visible {
-      outline: 2px solid var(--rel-border-info, #0091ea);
+      outline: 2px solid var(--rel-border-info);
       outline-offset: 2px;
     }
   `;
@@ -802,10 +809,10 @@ export class RelSidebarHeader extends LitElement {
   static styles = css`
     :host {
       display: block;
-      padding: var(--rel-spacing-space-md, 16px);
-      border-bottom: 1px solid var(--rel-border-default, #ddd);
+      padding: var(--rel-spacing-md, 16px);
+      border-bottom: 1px solid var(--rel-border-default);
       flex-shrink: 0;
-      color: var(--rel-text-heading, #2b2b2b);
+      color: var(--rel-text-label);
     }
   `;
 
@@ -821,7 +828,7 @@ export class RelSidebarContent extends LitElement {
       display: block;
       flex: 1;
       overflow-y: auto;
-      padding: var(--rel-spacing-space-sm, 12px) var(--rel-spacing-space-xs, 8px);
+      padding: var(--rel-spacing-sm, 12px) var(--rel-spacing-xs, 8px);
     }
 
     /* Scrollbar styling */
@@ -832,7 +839,7 @@ export class RelSidebarContent extends LitElement {
       background: transparent;
     }
     :host::-webkit-scrollbar-thumb {
-      background: var(--rel-border-default, #ddd);
+      background: var(--rel-border-default);
       border-radius: 2px;
     }
   `;
@@ -847,10 +854,10 @@ export class RelSidebarFooter extends LitElement {
   static styles = css`
     :host {
       display: block;
-      padding: var(--rel-spacing-space-md, 16px);
-      border-top: 1px solid var(--rel-border-default, #ddd);
+      padding: var(--rel-spacing-md, 16px);
+      border-top: 1px solid var(--rel-border-default);
       flex-shrink: 0;
-      color: var(--rel-text-primary, #333);
+      color: var(--rel-text-default);
     }
   `;
 
@@ -864,7 +871,7 @@ export class RelSidebarGroup extends LitElement {
   static styles = css`
     :host {
       display: block;
-      margin-bottom: var(--rel-spacing-space-md, 16px);
+      margin-bottom: var(--rel-spacing-md, 16px);
     }
 
     :host(:last-child) {
@@ -881,20 +888,26 @@ export class RelSidebarGroup extends LitElement {
 export class RelSidebarGroupLabel extends LitElement {
   static styles = css`
     :host {
-      display: block;
-      font-size: var(--rel-fontSizes-xs, 10px);
-      font-weight: var(--rel-fontWeights-semibold, 600);
-      color: var(--rel-text-placeholder, #a9a9a9);
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      padding: var(--rel-spacing-space-xs, 8px) var(--rel-spacing-space-sm, 12px) var(--rel-spacing-space-2xs, 4px);
-      margin-bottom: var(--rel-spacing-space-2xs, 4px);
+      display: block;
+      color: var(--rel-text-placeholder);
+      text-transform: uppercase;
+      padding: var(--rel-spacing-xs, 8px) var(--rel-spacing-sm, 12px) var(--rel-spacing-2xs, 4px);
+      margin-bottom: var(--rel-spacing-2xs, 4px);
+      font-family: var(--rel-body-xs-semibold-font-family);
+      font-weight: var(--rel-body-xs-semibold-font-weight);
+      font-size: var(--rel-body-xs-semibold-font-size);
+      line-height: var(--rel-body-xs-semibold-line-height);
+      letter-spacing: var(--rel-body-xs-semibold-letter-spacing);
     }
 
     :host(.collapsed) {
-      text-align: center;
-      font-size: var(--rel-fontSizes-xs, 10px);
-      padding: var(--rel-spacing-space-xs, 8px) var(--rel-spacing-space-2xs, 4px) var(--rel-spacing-space-2xs, 4px);
+      text-align: center;
+      padding: var(--rel-spacing-xs, 8px) var(--rel-spacing-2xs, 4px) var(--rel-spacing-2xs, 4px);
+      font-family: var(--rel-body-xs-regular-font-family);
+      font-weight: var(--rel-body-xs-regular-font-weight);
+      font-size: var(--rel-body-xs-regular-font-size);
+      line-height: var(--rel-body-xs-regular-line-height);
+      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
     }
   `;
 
@@ -974,8 +987,8 @@ export class RelSidebarMenuItem extends LitElement {
   static styles = css`
     :host {
       display: block;
-      margin-bottom: var(--rel-spacing-space-2xs, 4px);
-      padding: 0 var(--rel-spacing-space-xs, 8px);
+      margin-bottom: var(--rel-spacing-2xs, 4px);
+      padding: 0 var(--rel-spacing-xs, 8px);
     }
   `;
 
@@ -1004,33 +1017,35 @@ export class RelSidebarMenuButton extends LitElement {
       width: 100%;
       display: flex;
       align-items: center;
-      gap: var(--rel-spacing-space-sm, 12px);
-      padding: var(--rel-spacing-space-xs, 8px) var(--rel-spacing-space-sm, 12px);
+      gap: var(--rel-spacing-sm, 12px);
+      padding: var(--rel-spacing-xs, 8px) var(--rel-spacing-sm, 12px);
       min-height: 40px;
       background: none;
       border: none;
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
-      cursor: pointer;
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
-      font-size: var(--rel-fontSizes-md, 14px);
-      font-weight: var(--rel-fontWeights-medium, 500);
-      color: var(--rel-text-primary, #333);
+      border-radius: var(--rel-border-radius-sm, 8px);
+      cursor: pointer;
+      color: var(--rel-text-default);
       transition: background 0.15s ease, color 0.15s ease;
       text-align: left;
-      position: relative;
+      position: relative;
+      font-family: var(--rel-body-md-medium-font-family);
+      font-weight: var(--rel-body-md-medium-font-weight);
+      font-size: var(--rel-body-md-medium-font-size);
+      line-height: var(--rel-body-md-medium-line-height);
+      letter-spacing: var(--rel-body-md-medium-letter-spacing);
     }
 
     button:hover:not([disabled]) {
-      background: var(--rel-surface-surface, #f5f5f5);
-      color: var(--rel-text-heading, #2b2b2b);
+      background: var(--rel-bg-neutral-elevated-1);
+      color: var(--rel-text-label);
     }
 
     button:active:not([disabled]) {
-      background: var(--rel-border-default, #ddd);
+      background: var(--rel-border-default);
     }
 
     button:focus-visible {
-      outline: 2px solid var(--rel-border-info, #0091ea);
+      outline: 2px solid var(--rel-border-info);
       outline-offset: -2px;
     }
 
@@ -1040,9 +1055,9 @@ export class RelSidebarMenuButton extends LitElement {
     }
 
     button.active {
-      background: var(--rel-surface-surface, #f5f5f5);
-      color: var(--rel-text-heading, #2b2b2b);
-      font-weight: var(--rel-fontWeights-semibold, 600);
+      background: var(--rel-bg-neutral-elevated-1);
+      color: var(--rel-text-label);
+      font-weight: var(--rel-fonts-weight-body-semibold, 600);
     }
 
     button.active::before {
@@ -1053,13 +1068,13 @@ export class RelSidebarMenuButton extends LitElement {
       transform: translateY(-50%);
       width: 3px;
       height: 20px;
-      background: var(--rel-colors-primary-500, #0091ea);
+      background: var(--rel-bg-info);
       border-radius: 0 2px 2px 0;
     }
 
     button.collapsed {
       justify-content: center;
-      padding: var(--rel-spacing-space-xs, 8px);
+      padding: var(--rel-spacing-xs, 8px);
       min-height: 40px;
     }
 
@@ -1068,7 +1083,7 @@ export class RelSidebarMenuButton extends LitElement {
     }
 
     button.collapsed.active {
-      background: var(--rel-surface-surface, #f5f5f5);
+      background: var(--rel-bg-neutral-elevated-1);
     }
 
     .icon {

package/dist/components/rel-skeleton/rel-skeleton.ts

@@ -20,6 +20,7 @@ export class RelSkeleton extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: block;
     }
 
@@ -35,8 +36,8 @@ export class RelSkeleton extends LitElement {
     /* ── Base skeleton surface ── */
     .skeleton-shape,
     .skeleton-bar {
-      background: var(--rel-skeleton-color, #c8c8c8);
-      border-radius: 4px;
+      background: var(--rel-skeleton-color, var(--rel-bg-neutral-elevated-3));
+      border-radius: var(--rel-border-radius-xs);
     }
 
     /* ── Lines layout ── */
@@ -91,20 +92,14 @@ export class RelSkeleton extends LitElement {
     :host([animation="shimmer"]) .skeleton-bar {
       background: linear-gradient(
         90deg,
-        var(--rel-skeleton-color, #c8c8c8) 25%,
-        var(--rel-skeleton-highlight, #e2e2e2) 50%,
-        var(--rel-skeleton-color, #c8c8c8) 75%
+        var(--rel-skeleton-color, var(--rel-bg-neutral-elevated-3)) 25%,
+        var(--rel-skeleton-highlight, var(--rel-bg-neutral-elevated-2)) 50%,
+        var(--rel-skeleton-color, var(--rel-bg-neutral-elevated-3)) 75%
       );
       background-size: 200% 100%;
       animation: rel-skeleton-shimmer 1.5s linear infinite;
     }
 
-    /* ── Dark mode ── */
-    :host-context([data-theme="dark"]) {
-      --rel-skeleton-color: #2a2a2a;
-      --rel-skeleton-highlight: #3d3d3d;
-    }
-
     /* ── Respect reduced-motion preference ── */
     @media (prefers-reduced-motion: reduce) {
       .skeleton-shape,
@@ -122,13 +117,13 @@ export class RelSkeleton extends LitElement {
       return html`
         <div class="skeleton-lines">
           ${Array.from({ length: count }, (_, i) => html`
-            <div class="skeleton-bar ${i === count - 1 && count > 1 ? "is-last" : ""}"></div>
+            <div part="base" class="skeleton-bar ${i === count - 1 && count > 1 ? "is-last" : ""}"></div>
           `)}
         </div>
       `;
     }
 
-    return html`<div class="skeleton-shape"></div>`;
+    return html`<div part="base" class="skeleton-shape"></div>`;
   }
 }
 

package/dist/components/rel-slider/README.md

@@ -86,21 +86,21 @@ The component defines these CSS custom properties on `:host` which can be overri
 - `--thumb-halo-color` - Color of thumb halo (default: `--rel-border-default`)
 - `--tick-size` - Diameter of tick marks (default: `4px`)
 - `--shadow` - Thumb drop shadow (default: `0 2px 4px rgba(0,0,0,0.25)`)
-- `--halo` - Additional halo shadow (default: `0 2px 0 var(--rel-surface-surface), 0 6px 10px rgba(0,0,0,0.07)`)
+- `--halo` - Additional halo shadow (default: `0 2px 0 var(--rel-bg-neutral-elevated-1), 0 6px 10px rgba(0,0,0,0.07)`)
 - `--marker-width` - Width of value bubble (default: `24px`)
 - `--marker-height` - Height of value bubble (default: `28px`)
 
 ### Design Token References
-- `--rel-fontFamilies-primary` - Font family
-- `--rel-colors-gray-border` - Inactive track color
-- `--rel-colors-black` - Active track and thumb color
-- `--rel-colors-white` - Used in dotted track and tick marks
-- `--rel-colors-gray-primary` - Tick mark color (inactive)
-- `--rel-colors-gray-heading` - Tick label color
-- `--rel-colors-gray-placeholder` - Disabled active track and tick colors
+- `--rel-fonts-font-family` - Font family
+- `--rel-border-default` - Inactive track color
+- `--rel-text-default` - Active track and thumb color
+- `--rel-bg-surface` - Used in dotted track and tick marks
+- `--rel-text-default` - Tick mark color (inactive)
+- `--rel-text-label` - Tick label color
+- `--rel-text-placeholder` - Disabled active track and tick colors
 - `--rel-border-default` - Default thumb halo color
-- `--rel-surface-surface` - Disabled track background, used in dotted pattern
-- `--rel-fontSizes-xs` - Tick label font size
+- `--rel-bg-neutral-elevated-1` - Disabled track background, used in dotted pattern
+- `--rel-body-xs-regular-font-size` - Tick label font size
 
 ## Accessibility
 - Uses native `<input type="range">` for full keyboard and screen reader support