@reliability-design/web 1.3.0 → 1.4.0

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

@@ -1,7 +1,6 @@
 import { LitElement, html, css, nothing, PropertyValues } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
-import "../../styles/vars-v2.css";
 import "@reliability-design/icons/rel-icon";
 import "../rel-chip/rel-chip.js";
 import "../rel-checkbox/rel-checkbox.js";
@@ -93,15 +92,16 @@ export class RelSelect extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: block;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fonts-font-family);
       width: 100%;
     }
 
     .select-wrapper {
       display: flex;
       flex-direction: column;
-      gap: var(--rel-spacing-space-2xs);
+      gap: var(--rel-spacing-2xs);
       width: 100%;
     }
 
@@ -113,9 +113,18 @@ export class RelSelect extends LitElement {
     }
 
     .select-label {
-      font-size: var(--rel-fontSizes-sm, 14px);
-      font-weight: var(--rel-fontWeights-regular, 400);
-      color: var(--rel-select-label-color, #363636);
+      color: var(--rel-select-label-color, var(--rel-text-label));
+
+      font-family: var(--rel-body-sm-regular-font-family);
+
+      font-weight: var(--rel-body-sm-regular-font-weight);
+
+      font-size: var(--rel-body-sm-regular-font-size);
+
+      line-height: var(--rel-body-sm-regular-line-height);
+
+      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
+
     }
 
     /* Error only colors the border/focus ring and the supporting text below
@@ -133,8 +142,8 @@ export class RelSelect extends LitElement {
       width: 100%;
       box-sizing: border-box;
       gap: 8px;
-      background: var(--rel-select-bg, #ffffff);
-      border: 1px solid var(--rel-select-border-default, #e5e5e5);
+      background: var(--rel-select-bg, var(--rel-bg-neutral));
+      border: 1px solid var(--rel-select-border-default, var(--rel-border-default));
       cursor: pointer;
       font-family: inherit;
       transition: border-color 0.15s ease;
@@ -142,7 +151,7 @@ export class RelSelect extends LitElement {
     }
 
     .border-rounded .select-trigger {
-      border-radius: var(--rel-select-radius, 4px);
+      border-radius: var(--rel-select-radius, var(--rel-border-radius-xs));
     }
 
     .border-sharp .select-trigger {
@@ -152,36 +161,48 @@ export class RelSelect extends LitElement {
     .select-trigger:focus-visible,
     .select-wrapper.open .select-trigger {
       outline: none;
-      border-color: var(--rel-select-border-focus, #0b0b0b);
+      border-color: var(--rel-select-border-focus, var(--rel-border-strong));
     }
 
     .select-wrapper.error .select-trigger {
-      border-color: var(--rel-select-border-error, #ce3131);
+      border-color: var(--rel-select-border-error, var(--rel-border-danger));
     }
 
     .select-wrapper.disabled .select-trigger {
       cursor: not-allowed;
-      background: var(--rel-select-bg-disabled, #fafafa);
-      border-color: var(--rel-select-border-default, #e5e5e5);
+      background: var(--rel-select-bg-disabled, var(--rel-bg-neutral-elevated-1));
+      border-color: var(--rel-select-border-default, var(--rel-border-default));
     }
 
     /* Sizes */
     .select-wrapper.small .select-trigger {
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
       min-height: 40px;
-      font-size: var(--rel-fontSizes-sm, 14px);
+      font-family: var(--rel-body-sm-regular-font-family);
+      font-weight: var(--rel-body-sm-regular-font-weight);
+      font-size: var(--rel-body-sm-regular-font-size);
+      line-height: var(--rel-body-sm-regular-line-height);
+      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
     }
 
     .select-wrapper.medium .select-trigger {
       padding: 12px;
       min-height: 48px;
-      font-size: var(--rel-fontSizes-md, 16px);
+      font-family: var(--rel-body-md-regular-font-family);
+      font-weight: var(--rel-body-md-regular-font-weight);
+      font-size: var(--rel-body-md-regular-font-size);
+      line-height: var(--rel-body-md-regular-line-height);
+      letter-spacing: var(--rel-body-md-regular-letter-spacing);
     }
 
     .select-wrapper.large .select-trigger {
-      padding: var(--rel-spacing-space-md);
+      padding: var(--rel-spacing-md);
       min-height: 56px;
-      font-size: var(--rel-fontSizes-lg, 18px);
+      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);
     }
 
     /* Icons */
@@ -189,7 +210,7 @@ export class RelSelect extends LitElement {
       display: flex;
       align-items: center;
       flex-shrink: 0;
-      color: var(--rel-select-icon-color, #0b0b0b);
+      color: var(--rel-select-icon-color, var(--rel-text-default));
     }
 
     .select-trigger .icon.chevron {
@@ -201,7 +222,7 @@ export class RelSelect extends LitElement {
     }
 
     .select-wrapper.disabled .icon {
-      color: var(--rel-color-text-disabled, #a3a3a3);
+      color: var(--rel-text-disabled);
     }
 
     /* Value area */
@@ -212,16 +233,16 @@ export class RelSelect extends LitElement {
       align-items: center;
       gap: 6px;
       flex-wrap: wrap;
-      color: var(--rel-select-value-color, #0b0b0b);
+      color: var(--rel-select-value-color, var(--rel-text-default));
       overflow: hidden;
     }
 
     .select-value.placeholder {
-      color: var(--rel-select-placeholder-color, #757575);
+      color: var(--rel-select-placeholder-color, var(--rel-text-placeholder));
     }
 
     .select-wrapper.disabled .select-value.placeholder {
-      color: var(--rel-select-placeholder-disabled-color, #7d7d7d);
+      color: var(--rel-select-placeholder-disabled-color, var(--rel-text-disabled));
     }
 
     .select-value-text {
@@ -254,16 +275,18 @@ export class RelSelect extends LitElement {
       left: 12px;
       top: 50%;
       transform: translateY(-50%);
-      background: var(--rel-select-bg, #ffffff);
+      background: var(--rel-select-bg, var(--rel-bg-neutral));
       padding: 0 4px;
-      font-size: var(--rel-fontSizes-md, 16px);
-      font-weight: 400;
-      line-height: 1;
-      color: var(--rel-select-placeholder-color, #757575);
+      color: var(--rel-select-placeholder-color, var(--rel-text-placeholder));
       pointer-events: none;
       z-index: 1;
       white-space: nowrap;
       transition: top 0.15s ease, left 0.15s ease, font-size 0.15s ease, color 0.15s ease;
+      font-family: var(--rel-body-md-regular-font-family);
+      font-weight: var(--rel-body-md-regular-font-weight);
+      font-size: var(--rel-body-md-regular-font-size);
+      line-height: var(--rel-body-md-regular-line-height);
+      letter-spacing: var(--rel-body-md-regular-letter-spacing);
     }
 
     .floating-label.has-left-icon {
@@ -275,8 +298,11 @@ export class RelSelect extends LitElement {
     .select-wrapper.open .floating-label {
       top: 0;
       left: 12px;
-      font-size: 12px;
-      color: var(--rel-select-label-color, #363636);
+      font-size: var(--rel-body-sm-medium-font-size);
+      line-height: var(--rel-body-sm-medium-line-height);
+      letter-spacing: var(--rel-body-sm-medium-letter-spacing);
+      font-weight: var(--rel-body-xs-medium-font-weight);
+      color: var(--rel-select-label-color, var(--rel-text-label));
     }
 
     /* The real placeholder hides while the float-label rests in its spot,
@@ -293,12 +319,13 @@ export class RelSelect extends LitElement {
 
     /* Supporting text */
     .select-support {
+      margin-top: var(--rel-spacing-3xs);
       font-size: 13px;
-      color: var(--rel-select-supporting-color, #404040);
+      color: var(--rel-select-supporting-color, var(--rel-text-caption));
     }
 
     .select-support.error {
-      color: var(--rel-select-border-error, #ce3131);
+      color: var(--rel-text-danger);
     }
 
     /* ── Dropdown listbox ── */
@@ -307,13 +334,13 @@ export class RelSelect extends LitElement {
       z-index: 1001;
       display: none;
       box-sizing: border-box;
-      background: var(--rel-select-bg, #ffffff);
-      border: 1px solid var(--rel-select-menu-border, #d4d4d4);
-      border-radius: var(--rel-select-menu-radius, 8px);
+      background: var(--rel-select-bg, var(--rel-bg-neutral));
+      border: 1px solid var(--rel-select-menu-border, var(--rel-border-default));
+      border-radius: var(--rel-select-menu-radius, var(--rel-border-radius-sm));
       /* A border alone doesn't read clearly against a similarly-light page,
          and a shadow alone barely shows on a dark background — together
          they hold up in both themes. */
-      box-shadow: var(--rel-select-menu-shadow, 0 8px 24px rgba(11, 11, 11, 0.18));
+      box-shadow: var(--rel-select-menu-shadow, var(--rel-shadows-shadow-300));
       max-height: 360px;
       overflow-y: auto;
     }
@@ -325,9 +352,9 @@ export class RelSelect extends LitElement {
     .select-search {
       position: sticky;
       top: 0;
-      background: var(--rel-select-bg, #ffffff);
-      padding: var(--rel-spacing-space-xs);
-      border-bottom: 1px solid var(--rel-select-divider, #f5f5f5);
+      background: var(--rel-select-bg, var(--rel-bg-neutral));
+      padding: var(--rel-spacing-xs);
+      border-bottom: 1px solid var(--rel-select-divider, var(--rel-border-subtle));
     }
 
     /* Base = "small" textfield sizing, shared by both small AND medium
@@ -336,16 +363,16 @@ export class RelSelect extends LitElement {
       display: flex;
       align-items: center;
       gap: 8px;
-      border: 1px solid var(--rel-select-search-border, #e5e5e5);
+      border: 1px solid var(--rel-select-search-border, var(--rel-border-default));
       border-radius: 4px;
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
     }
 
     .search-input-wrap .icon {
       display: flex;
       align-items: center;
       flex-shrink: 0;
-      color: var(--rel-select-icon-color, #0b0b0b);
+      color: var(--rel-select-icon-color, var(--rel-text-default));
     }
 
     .search-input {
@@ -354,13 +381,16 @@ export class RelSelect extends LitElement {
       border: none;
       outline: none;
       background: transparent;
-      font-family: inherit;
-      font-size: var(--rel-fontSizes-sm, 14px);
-      color: var(--rel-select-value-color, #0b0b0b);
+      color: var(--rel-select-value-color, var(--rel-text-default));
+      font-family: var(--rel-body-sm-regular-font-family);
+      font-weight: var(--rel-body-sm-regular-font-weight);
+      font-size: var(--rel-body-sm-regular-font-size);
+      line-height: var(--rel-body-sm-regular-line-height);
+      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
     }
 
     .search-input::placeholder {
-      color: var(--rel-select-placeholder-color, #757575);
+      color: var(--rel-select-placeholder-color, var(--rel-text-placeholder));
     }
 
     :host([size="large"]) .search-input-wrap {
@@ -368,7 +398,17 @@ export class RelSelect extends LitElement {
     }
 
     :host([size="large"]) .search-input {
-      font-size: var(--rel-fontSizes-md, 16px);
+
+      font-family: var(--rel-body-md-regular-font-family);
+
+      font-weight: var(--rel-body-md-regular-font-weight);
+
+      font-size: var(--rel-body-md-regular-font-size);
+
+      line-height: var(--rel-body-md-regular-line-height);
+
+      letter-spacing: var(--rel-body-md-regular-letter-spacing);
+
     }
 
     .select-options {
@@ -380,11 +420,14 @@ export class RelSelect extends LitElement {
       align-items: center;
       justify-content: space-between;
       gap: 12px;
-      padding: var(--rel-spacing-space-xs) 12px;
-      font-size: var(--rel-fontSizes-md, 16px);
-      font-family: var(--rel-fontFamilies-primary);
-      color: var(--rel-select-value-color, #0b0b0b);
+      padding: var(--rel-spacing-xs) 12px;
+      color: var(--rel-select-value-color, var(--rel-text-default));
       cursor: pointer;
+      font-family: var(--rel-body-md-regular-font-family);
+      font-weight: var(--rel-body-md-regular-font-weight);
+      font-size: var(--rel-body-md-regular-font-size);
+      line-height: var(--rel-body-md-regular-line-height);
+      letter-spacing: var(--rel-body-md-regular-letter-spacing);
     }
 
     .select-option-label {
@@ -395,16 +438,20 @@ export class RelSelect extends LitElement {
 
     .select-option-check {
       flex-shrink: 0;
-      color: var(--rel-select-value-color, #0b0b0b);
+      color: var(--rel-select-value-color, var(--rel-text-default));
     }
 
     .select-option:hover,
     .select-option.highlighted {
-      background: var(--rel-select-option-hover, #ececec);
+      background: var(--rel-select-option-hover, var(--rel-bg-neutral-elevated-1));
     }
 
     .select-option[aria-selected="true"] {
-      font-weight: var(--rel-fontWeights-medium);
+      font-weight: var(--rel-body-md-medium-font-weight);
+    }
+
+    :host([size="large"]) .select-option[aria-selected="true"] {
+      font-weight: var(--rel-body-lg-medium-font-weight);
     }
 
     .checkbox-option {
@@ -413,139 +460,24 @@ export class RelSelect extends LitElement {
 
     .checkbox-option:hover,
     .checkbox-option.highlighted {
-      background: var(--rel-select-option-hover, #ececec);
+      background: var(--rel-select-option-hover, var(--rel-bg-neutral-elevated-1));
     }
 
     .select-all-row {
-      border-bottom: 1px solid var(--rel-select-divider, #f5f5f5);
+      border-bottom: 1px solid var(--rel-select-divider, var(--rel-border-subtle));
       padding: 12px;
     }
 
     .select-empty {
-      padding: var(--rel-spacing-space-xs) 12px;
-      font-size: var(--rel-fontSizes-sm, 14px);
-      color: var(--rel-select-placeholder-color, #757575);
-    }
-
-    /* Dark mode */
-    /* No :not(.error) needed here — error no longer recolors label/floating
-       label, so there's nothing left for these to compete with. */
-    :host-context([data-theme="dark"]) .select-label,
-    [data-theme="dark"] .select-label {
-      color: var(--rel-select-label-color-dark, #f5f5f5);
-    }
-
-    /* :not(.error) — supporting text IS still red on error, and this rule's
-       extra :host-context specificity would otherwise outrank the
-       theme-agnostic .select-support.error rule. */
-    :host-context([data-theme="dark"]) .select-wrapper:not(.error) .select-support,
-    [data-theme="dark"] .select-wrapper:not(.error) .select-support {
-      color: var(--rel-select-supporting-color-dark, #b3b3b3);
-    }
-
-    :host-context([data-theme="dark"]) .select-wrapper.focused .floating-label,
-    [data-theme="dark"] .select-wrapper.focused .floating-label,
-    :host-context([data-theme="dark"]) .select-wrapper.has-value .floating-label,
-    [data-theme="dark"] .select-wrapper.has-value .floating-label,
-    :host-context([data-theme="dark"]) .select-wrapper.open .floating-label,
-    [data-theme="dark"] .select-wrapper.open .floating-label {
-      color: var(--rel-select-label-color-dark, #f5f5f5);
-    }
-
-    /* Background only here — kept unconditional so error-state triggers
-       still get the right dark background. border-color is split into its
-       own :not(.error) rule below: this rule's specificity (with the extra
-       :host-context) ties or beats the theme-agnostic error-border rule, and
-       since it's declared later in the file, an unconditional border-color
-       here would win the tie and show the default dark border instead of red
-       — regardless of open/focus state, i.e. even at rest. */
-    :host-context([data-theme="dark"]) .select-trigger,
-    [data-theme="dark"] .select-trigger,
-    :host-context([data-theme="dark"]) .floating-label,
-    [data-theme="dark"] .floating-label {
-      background: var(--rel-select-bg-dark, #1a1a1a);
-    }
-
-    :host-context([data-theme="dark"]) .select-wrapper:not(.error) .select-trigger,
-    [data-theme="dark"] .select-wrapper:not(.error) .select-trigger {
-      border-color: var(--rel-select-border-default-dark, #333333);
-    }
-
-    /* Own border token, a touch lighter than the trigger's — a shadow alone
-       barely registers on a dark background, so the panel leans more on this
-       border to separate itself from the page behind it. */
-    :host-context([data-theme="dark"]) .select-listbox,
-    [data-theme="dark"] .select-listbox {
-      background: var(--rel-select-bg-dark, #1a1a1a);
-      border-color: var(--rel-select-menu-border-dark, #454545);
-    }
-
-    :host-context([data-theme="dark"]) .select-wrapper.disabled .select-trigger,
-    [data-theme="dark"] .select-wrapper.disabled .select-trigger {
-      background: var(--rel-select-bg-disabled-dark, #141414);
-    }
-
-    /* :not(.error): same trap as the label rules — this rule's extra
-       :host-context specificity would otherwise outrank the theme-agnostic
-       .select-wrapper.error .select-trigger rule and show the focus-white
-       border instead of error-red the moment an error field is opened. */
-    :host-context([data-theme="dark"]) .select-wrapper:not(.error).open .select-trigger,
-    [data-theme="dark"] .select-wrapper:not(.error).open .select-trigger,
-    :host-context([data-theme="dark"]) .select-wrapper:not(.error) .select-trigger:focus-visible,
-    [data-theme="dark"] .select-wrapper:not(.error) .select-trigger:focus-visible {
-      border-color: var(--rel-select-border-focus-dark, #f5f5f5);
-    }
-
-    :host-context([data-theme="dark"]) .select-value,
-    [data-theme="dark"] .select-value,
-    :host-context([data-theme="dark"]) .search-input,
-    [data-theme="dark"] .search-input,
-    :host-context([data-theme="dark"]) .select-option,
-    [data-theme="dark"] .select-option,
-    :host-context([data-theme="dark"]) .select-option-check,
-    [data-theme="dark"] .select-option-check,
-    :host-context([data-theme="dark"]) .icon,
-    [data-theme="dark"] .icon {
-      color: var(--rel-select-value-color-dark, #f5f5f5);
-    }
-
-    :host-context([data-theme="dark"]) .select-option:hover,
-    [data-theme="dark"] .select-option:hover,
-    :host-context([data-theme="dark"]) .select-option.highlighted,
-    [data-theme="dark"] .select-option.highlighted,
-    :host-context([data-theme="dark"]) .checkbox-option:hover,
-    [data-theme="dark"] .checkbox-option:hover,
-    :host-context([data-theme="dark"]) .checkbox-option.highlighted,
-    [data-theme="dark"] .checkbox-option.highlighted {
-      background: var(--rel-select-option-hover-dark, #333333);
-    }
-
-    :host-context([data-theme="dark"]) .select-search,
-    [data-theme="dark"] .select-search {
-      background: var(--rel-select-bg-dark, #1a1a1a);
-      border-color: var(--rel-select-divider-dark, #333333);
-    }
-
-    :host-context([data-theme="dark"]) .select-all-row,
-    [data-theme="dark"] .select-all-row {
-      border-color: var(--rel-select-divider-dark, #333333);
-    }
-
-    :host-context([data-theme="dark"]) .select-value.placeholder,
-    [data-theme="dark"] .select-value.placeholder,
-    :host-context([data-theme="dark"]) .floating-label,
-    [data-theme="dark"] .floating-label,
-    :host-context([data-theme="dark"]) .search-input::placeholder,
-    [data-theme="dark"] .search-input::placeholder,
-    :host-context([data-theme="dark"]) .select-empty,
-    [data-theme="dark"] .select-empty {
-      color: var(--rel-select-placeholder-color-dark, #a3a3a3);
-    }
-
-    :host-context([data-theme="dark"]) .search-input-wrap,
-    [data-theme="dark"] .search-input-wrap {
-      border-color: var(--rel-select-search-border-dark, #333333);
+      padding: var(--rel-spacing-xs) 12px;
+      color: var(--rel-select-placeholder-color, var(--rel-text-body));
+      font-family: var(--rel-body-sm-regular-font-family);
+      font-weight: var(--rel-body-sm-regular-font-weight);
+      font-size: var(--rel-body-sm-regular-font-size);
+      line-height: var(--rel-body-sm-regular-line-height);
+      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
     }
+
   `;
 
   disconnectedCallback() {
@@ -854,7 +786,7 @@ export class RelSelect extends LitElement {
     return html`
       <div class="${wrapperClasses}">
         ${!showFloatingChrome && this.label
-          ? html`<label class="select-label" for="${this.uniqueId}">${this.label}</label>`
+          ? html`<label part="label" class="select-label" for="${this.uniqueId}">${this.label}</label>`
           : ""}
 
         <div class="select-container">
@@ -867,7 +799,7 @@ export class RelSelect extends LitElement {
           <button
             id="${this.uniqueId}"
             type="button"
-            class="select-trigger"
+            part="trigger" class="select-trigger"
             role="combobox"
             aria-haspopup="listbox"
             aria-expanded="${this.open}"
@@ -887,11 +819,11 @@ export class RelSelect extends LitElement {
 
             ${this.multiple
               ? this.selectedValues.length > 0
-                ? html`<span class="select-value">${this.renderChips()}</span>`
-                : html`<span class="select-value placeholder">
+                ? html`<span part="value" class="select-value">${this.renderChips()}</span>`
+                : html`<span part="value" class="select-value placeholder">
                     <span class="select-value-text">${this.placeholder}</span>
                   </span>`
-              : html`<span class="select-value ${selectedSingle ? "" : "placeholder"}">
+              : html`<span part="value" class="select-value ${selectedSingle ? "" : "placeholder"}">
                   <span class="select-value-text"
                     >${selectedSingle ? selectedSingle.label : this.placeholder}</span
                   >
@@ -906,7 +838,7 @@ export class RelSelect extends LitElement {
         </div>
 
         ${this.supportingText
-          ? html`<span class="select-support ${this.state === "error" ? "error" : ""}">
+          ? html`<span part="helper" class="select-support ${this.state === "error" ? "error" : ""}">
               ${this.supportingText}
             </span>`
           : ""}
@@ -914,7 +846,7 @@ export class RelSelect extends LitElement {
 
       <div
         id="${listboxId}"
-        class="select-listbox"
+        part="panel list" class="select-listbox"
         role="listbox"
         aria-multiselectable="${this.multiple}"
         aria-label="${this.label || "Options"}"
@@ -926,7 +858,7 @@ export class RelSelect extends LitElement {
               <div class="search-input-wrap">
                 <rel-icon name="search" size="${this.searchIconSize}" class="icon"></rel-icon>
                 <input
-                  class="search-input"
+                  part="input" class="search-input"
                   type="text"
                   placeholder="${this.searchPlaceholder}"
                   .value="${this.searchValue}"
@@ -987,7 +919,7 @@ export class RelSelect extends LitElement {
                   (option, index) => html`
                     <div
                       id="${this.uniqueId}-option-${index}"
-                      class="select-option ${index === this.highlightedIndex ? "highlighted" : ""}"
+                      part="option" class="select-option ${index === this.highlightedIndex ? "highlighted" : ""}"
                       role="option"
                       aria-selected="${option.value === this.selected}"
                       @mousedown="${(e: Event) => e.preventDefault()}"

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

@@ -162,24 +162,24 @@ sheet.setOpen(nextOpen: boolean, reason?: string): void
 - `--sheet-transition-timing`: `cubic-bezier(0.32, 0.72, 0, 1)`
 
 ### Color Tokens
-- `--rel-colors-white` - Panel background
-- `--rel-colors-gray-heading` - Title and close button color
-- `--rel-colors-gray-body` - Description color
-- `--rel-colors-gray-surface` - Close button hover background
-- `--rel-colors-gray-border` - Header/footer borders
+- `--rel-bg-surface` - Panel background
+- `--rel-text-label` - Title and close button color
+- `--rel-text-body` - Description color
+- `--rel-bg-surface-elevated` - Close button hover background
+- `--rel-border-default` - Header/footer borders
 - `--rel-overlay-scrim` - Overlay background
-- `--rel-colors-primary-500` - Close button focus outline
+- `--rel-bg-info` - Close button focus outline
 
 ### Shadow Tokens
 - `--rel-shadows-shadow-500` - Panel shadow
 
 ### Border Tokens
-- `--rel-borders-radius-border-radius-300` - Panel border radius (top corners for bottom, etc.)
+- `--rel-border-radius-md` - Panel border radius (top corners for bottom, etc.)
 
 ### Spacing Tokens
-- `--rel-spacing-space-lg` - Panel content padding
-- `--rel-spacing-space-md` - Header/footer padding, close button positioning
-- `--rel-spacing-space-xs` - Close button padding
+- `--rel-spacing-lg` - Panel content padding
+- `--rel-spacing-md` - Header/footer padding, close button positioning
+- `--rel-spacing-xs` - Close button padding
 
 ## Accessibility
 - Panel uses `role="dialog"` and `aria-modal`