@reliability-design/web 1.3.0 → 1.4.0

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

@@ -14,6 +14,12 @@ interface TooltipData {
   yPos: number;
 }
 
+/**
+ * @deprecated rel-chart has no Figma design in RelDS 2.0 and is excluded from
+ * the parity contract. It remains exported for compatibility but will be
+ * removed in a future major version — use a dedicated charting library styled
+ * with RelDS tokens instead.
+ */
 @customElement("rel-chart")
 export class RelChart extends LitElement {
   @property({ type: String, reflect: true }) type: "bar" | "line" = "bar";
@@ -64,18 +70,19 @@ export class RelChart extends LitElement {
 
   // Default color palette using RDS tokens
   private readonly defaultColors = [
-    "var(--rel-colors-blue-primary)",
-    "var(--rel-colors-green-primary)",
-    "var(--rel-colors-orange-warning)",
-    "var(--rel-colors-red-primary)",
-    "var(--rel-colors-gold)",
-    "var(--rel-colors-platinum)",
+    "var(--rel-bg-info)",
+    "var(--rel-bg-success)",
+    "var(--rel-bg-warning)",
+    "var(--rel-bg-danger)",
+    "var(--rel-text-warning)",
+    "var(--rel-bg-neutral-elevated-3)",
   ];
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: block;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fonts-font-family);
       position: relative;
     }
 
@@ -87,10 +94,10 @@ export class RelChart extends LitElement {
     .chart-container {
       width: 100%;
       position: relative;
-      background: var(--rel-colors-white, #fff);
-      border: 1px solid var(--rel-border-default, #ddd);
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
-      padding: var(--rel-spacing-space-md, 16px);
+      background: var(--rel-bg-surface);
+      border: 1px solid var(--rel-border-default);
+      border-radius: var(--rel-border-radius-sm, 8px);
+      padding: var(--rel-spacing-md, 16px);
     }
 
     svg {
@@ -100,20 +107,23 @@ export class RelChart extends LitElement {
     }
 
     .grid-line {
-      stroke: var(--rel-colors-gray-border, #ddd);
+      stroke: var(--rel-border-default);
       stroke-width: 1;
       stroke-dasharray: 2 2;
     }
 
     .axis-line {
-      stroke: var(--rel-colors-gray-divider, #bdbdbd);
+      stroke: var(--rel-border-default);
       stroke-width: 1;
     }
 
     .axis-label {
-      fill: var(--rel-text-primary, #333);
-      font-size: var(--rel-fontSizes-xs, 10px);
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
+      fill: var(--rel-text-default);
+      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);
     }
 
     .bar {
@@ -126,7 +136,7 @@ export class RelChart extends LitElement {
     }
 
     .bar:focus-visible {
-      outline: 2px solid var(--rel-border-info, #0091ea);
+      outline: 2px solid var(--rel-border-info);
       outline-offset: 2px;
     }
 
@@ -150,14 +160,14 @@ export class RelChart extends LitElement {
     }
 
     .point:focus-visible {
-      outline: 2px solid var(--rel-border-info, #0091ea);
+      outline: 2px solid var(--rel-border-info);
       outline-offset: 2px;
     }
 
     .legend {
       display: flex;
-      gap: var(--rel-spacing-space-md);
-      margin-top: var(--rel-spacing-space-md);
+      gap: var(--rel-spacing-md);
+      margin-top: var(--rel-spacing-md);
       flex-wrap: wrap;
       justify-content: center;
     }
@@ -165,42 +175,50 @@ export class RelChart extends LitElement {
     .legend-item {
       display: flex;
       align-items: center;
-      gap: var(--rel-spacing-space-xs, 8px);
-      font-size: var(--rel-fontSizes-sm, 12px);
-      color: var(--rel-text-primary, #333);
+      gap: var(--rel-spacing-xs, 8px);
+      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);
     }
 
     .legend-color {
       width: 12px;
       height: 12px;
-      border-radius: var(--rel-borders-radius-border-radius-100);
+      border-radius: var(--rel-border-radius-xs);
     }
 
     .tooltip {
       position: absolute;
-      background: var(--rel-colors-white, #fff);
-      border: 1px solid var(--rel-border-default, #ddd);
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
-      padding: var(--rel-spacing-space-sm, 12px);
+      background: var(--rel-bg-surface);
+      border: 1px solid var(--rel-border-default);
+      border-radius: var(--rel-border-radius-sm, 8px);
+      padding: var(--rel-spacing-sm, 12px);
       box-shadow: var(--rel-shadows-shadow-200);
       pointer-events: none;
-      z-index: 100;
-      font-size: var(--rel-fontSizes-sm, 12px);
-      min-width: 120px;
+      z-index: 100;
+      min-width: 120px;
+      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);
     }
 
     .tooltip-title {
-      font-weight: var(--rel-fontWeights-semibold, 600);
-      color: var(--rel-text-heading, #2b2b2b);
-      margin-bottom: var(--rel-spacing-space-xs, 8px);
+      font-weight: var(--rel-fonts-weight-body-semibold, 600);
+      color: var(--rel-text-label);
+      margin-bottom: var(--rel-spacing-xs, 8px);
     }
 
     .tooltip-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      gap: var(--rel-spacing-space-md);
-      margin-bottom: var(--rel-spacing-space-3xs);
+      gap: var(--rel-spacing-md);
+      margin-bottom: var(--rel-spacing-3xs);
     }
 
     .tooltip-row:last-child {
@@ -210,8 +228,8 @@ export class RelChart extends LitElement {
     .tooltip-label {
       display: flex;
       align-items: center;
-      gap: var(--rel-spacing-space-xs, 8px);
-      color: var(--rel-text-primary, #333);
+      gap: var(--rel-spacing-xs, 8px);
+      color: var(--rel-text-default);
     }
 
     .tooltip-dot {
@@ -221,8 +239,8 @@ export class RelChart extends LitElement {
     }
 
     .tooltip-value {
-      font-weight: var(--rel-fontWeights-semibold, 600);
-      color: var(--rel-text-heading, #2b2b2b);
+      font-weight: var(--rel-fonts-weight-body-semibold, 600);
+      color: var(--rel-text-label);
     }
 
     @media (prefers-reduced-motion: reduce) {
@@ -717,7 +735,7 @@ export class RelChart extends LitElement {
     if (!data.length || !seriesConfigs.length || !this.xKey) {
       return html`
         <div class="chart-container" part="container">
-          <p style="text-align: center; color: var(--rel-text-placeholder, #a9a9a9); padding: 40px;">
+          <p style="text-align: center; color: var(--rel-text-placeholder); padding: 40px;">
             No data available
           </p>
         </div>

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

@@ -41,16 +41,16 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
-- `--rel-fontSizes-md`, `--rel-fontSizes-sm` - Font sizes for label and supporting text
-- `--rel-fontWeights-medium` - Font weight for label
+- `--rel-fonts-font-family` - Font family
+- `--rel-body-md-regular-font-size`, `--rel-body-sm-regular-font-size` - Font sizes for label and supporting text
+- `--rel-fonts-weight-body-medium` - Font weight for label
 
 ### Color Tokens
-- `--rel-text-heading` - Checkbox border and checked background color
-- `--rel-colors-white` - Checkbox background and checkmark color
-- `--rel-text-primary` - Label text color
+- `--rel-text-label` - Checkbox border and checked background color
+- `--rel-bg-surface` - Checkbox background and checkmark color
+- `--rel-text-default` - Label text color
 - `--rel-text-placeholder` - Supporting text color
-- `--rel-colors-red-primary` - Error state border and background color
+- `--rel-bg-danger` - Error state border and background color
 - `--rel-border-info` - Focus outline color
 
 ## Accessibility

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

@@ -24,20 +24,21 @@ export class RelCheckbox 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);
     }
 
     .wrapper {
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: var(--rel-spacing-3xs);
     }
 
     .row {
       display: flex;
       align-items: center;
-      gap: 10px;
+      gap: var(--rel-spacing-xs);
       cursor: pointer;
     }
 
@@ -52,7 +53,7 @@ export class RelCheckbox extends LitElement {
       width: 18px;
       height: 18px;
       border-radius: 4px;
-      border: 2px solid var(--rel-gray-text-primary);
+      border: 2px solid var(--rel-text-default);
       background: transparent;
       display: flex;
       align-items: center;
@@ -62,7 +63,7 @@ export class RelCheckbox extends LitElement {
     }
 
     input:focus-visible + .box {
-      outline: 2px solid var(--rel-color-border-focus);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
     }
 
@@ -74,39 +75,58 @@ export class RelCheckbox extends LitElement {
 
     /* Checked — filled box, transparent checkmark (bg shows through) */
     .checked .box {
-      background: var(--rel-gray-text-primary);
-      border-color: var(--rel-gray-text-primary);
+      background: var(--rel-bg-neutral-inverse-2);
+      border-color: var(--rel-bg-neutral-inverse-2);
     }
 
     .checked .check-icon {
       display: block;
-      fill: #ffffff;
+      fill: var(--rel-text-inverse);
     }
 
     /* Indeterminate — transparent fill, dash inherits border color */
     .indeterminate .indeterminate-icon {
       display: block;
-      fill: var(--rel-gray-text-primary);
+      fill: var(--rel-bg-neutral-inverse-2);
     }
 
     /* Error unchecked — transparent fill, error border */
     .error .box {
-      border-color: var(--rel-error-surface-default);
+      border-color: var(--rel-border-danger);
     }
 
     /* Error checked — error fill, transparent checkmark */
     .error.checked .box {
-      background: var(--rel-error-surface-default);
-      border-color: var(--rel-error-surface-default);
+      background: var(--rel-action-danger-fill);
+      border-color: var(--rel-action-danger-fill);
     }
 
     .error.checked .check-icon {
-      fill: #ffffff;
+      fill: var(--rel-action-danger-label-icons-fill);
     }
 
     /* Error indeterminate — transparent fill, dash is error color */
     .error.indeterminate .indeterminate-icon {
-      fill: var(--rel-error-surface-default);
+      fill: var(--rel-text-danger);
+    }
+
+    /* Hover (Figma State=Hover): box outline/fill and label shift text-default -> text-body.
+       Scoped to .default so error keeps its danger colors and disabled never hovers. */
+    .default .row:hover .box {
+      border-color: var(--rel-text-body);
+    }
+
+    .default .row:hover .label {
+      color: var(--rel-text-body);
+    }
+
+    .default.checked .row:hover .box {
+      background: var(--rel-text-body);
+      border-color: var(--rel-text-body);
+    }
+
+    .default.indeterminate .row:hover .indeterminate-icon {
+      fill: var(--rel-text-body);
     }
 
     .disabled {
@@ -124,67 +144,47 @@ export class RelCheckbox extends LitElement {
 
     .disabled .label,
     .disabled .text {
-      color: var(--rel-color-text-disabled);
+      color: var(--rel-text-disabled);
     }
 
-    /* Dark mode — tokens auto-flip via vars-v2, declared explicitly for clarity */
-    :host-context([data-theme="dark"]) .box {
-      border-color: var(--rel-gray-text-primary);
-    }
+    .label {
+      /* Figma: label rests on text-default; text-body is the hover color */
+      color: var(--rel-text-default);
 
-    :host-context([data-theme="dark"]) .checked .box {
-      background: var(--rel-gray-text-primary);
-      border-color: var(--rel-gray-text-primary);
-    }
+      font-family: var(--rel-body-lg-regular-font-family);
 
-    :host-context([data-theme="dark"]) .checked .check-icon {
-      fill: var(--rel-color-bg-primary);
-    }
+      font-weight: var(--rel-body-lg-regular-font-weight);
 
-    :host-context([data-theme="dark"]) .indeterminate .indeterminate-icon {
-      fill: var(--rel-gray-text-primary);
-    }
+      font-size: var(--rel-body-lg-regular-font-size);
 
-    :host-context([data-theme="dark"]) .error .box {
-      border-color: var(--rel-error-surface-default);
-    }
+      line-height: var(--rel-body-lg-regular-line-height);
 
-    :host-context([data-theme="dark"]) .error.checked .box {
-      background: var(--rel-error-surface-default);
-      border-color: var(--rel-error-surface-default);
-    }
+      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
 
-    :host-context([data-theme="dark"]) .error.checked .check-icon {
-      fill: var(--rel-color-bg-primary);
     }
 
-    :host-context([data-theme="dark"]) .error.indeterminate .indeterminate-icon {
-      fill: var(--rel-error-surface-default);
-    }
+    .text {
+      color: var(--rel-text-caption);
+      padding-left: 28px;
 
-    :host-context([data-theme="dark"]) .label {
-      color: var(--rel-gray-text-primary);
-    }
+      font-family: var(--rel-body-sm-regular-font-family);
 
-    .label {
-      font-size: var(--rel-fontSizes-md, 14px);
-      font-weight: var(--rel-fontWeights-medium, 500);
-      color: var(--rel-gray-text-primary);
-    }
+      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);
 
-    .text {
-      font-size: var(--rel-fontSizes-sm, 12px);
-      color: var(--rel-text-placeholder, #a9a9a9);
-      padding-left: 28px;
     }
   `;
 
   private toggle() {
     if (this.state === "disabled") return;
 
-    if (this.status === "unchecked") this.status = "checked";
-    else if (this.status === "checked") this.status = "indeterminate";
-    else this.status = "unchecked";
+    // Binary toggle — indeterminate is programmatic-only and resolves to checked on user toggle.
+    this.status = this.status === "checked" ? "unchecked" : "checked";
 
     this.dispatchEvent(
       new CustomEvent("rel-change", {
@@ -205,7 +205,7 @@ export class RelCheckbox extends LitElement {
 
   render() {
     return html`
-      <div class="wrapper ${this.state} ${this.status}">
+      <div part="base" class="wrapper ${this.state} ${this.status}">
         <label class="row">
           <input
             type="checkbox"
@@ -215,22 +215,22 @@ export class RelCheckbox extends LitElement {
           />
 
           <span class="box">
-            <svg class="check-icon" viewBox="0 0 18 14" fill="var(--rel-colors-white, #fff)">
+            <svg class="check-icon" viewBox="0 0 18 14" fill="var(--rel-text-inverse)">
               <path
                 d="M6.44 14L0.5 7.36l1.49-1.66L6.44 10.68 16.01 0 17.5 1.66z"
               />
             </svg>
 
-            <svg class="indeterminate-icon" viewBox="0 0 16 2" fill="var(--rel-colors-white, #fff)">
+            <svg class="indeterminate-icon" viewBox="0 0 16 2" fill="var(--rel-text-inverse)">
               <rect width="16" height="2" />
             </svg>
           </span>
 
-          <span class="label">${this.label}</span>
+          <span part="label" class="label">${this.label}</span>
         </label>
 
         ${this.supportingtext
-          ? html`<span class="text">${this.supportingtext}</span>`
+          ? html`<span part="helper" class="text">${this.supportingtext}</span>`
           : null}
       </div>
     `;

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

@@ -69,27 +69,27 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
-- `--rel-fontSizes-md` - Font size
-- `--rel-fontWeights-medium` - Font weight
+- `--rel-fonts-font-family` - Font family
+- `--rel-body-md-regular-font-size` - Font size
+- `--rel-fonts-weight-body-medium` - Font weight
 
 ### Spacing Tokens
-- `--rel-spacing-space-2xs` - Padding and internal gaps
-- `--rel-spacing-space-sm` - Horizontal padding
-- `--rel-spacing-space-3xs` - Remove button margin
+- `--rel-spacing-2xs` - Padding and internal gaps
+- `--rel-spacing-sm` - Horizontal padding
+- `--rel-spacing-3xs` - Remove button margin
 
 ### Color Tokens (by tone)
-- **default**: `--rel-colors-gray-border` (background), `--rel-colors-black` (text)
-- **blue**: `--rel-colors-blue-tertiary` (background), `--rel-colors-white` (text)
-- **yellow**: `--rel-colors-yellow-pending` (background), `--rel-colors-black` (text)
-- **red**: `--rel-colors-red-secondary` (background), `--rel-colors-white` (text)
-- **green**: `--rel-colors-green-success` (background), `--rel-colors-white` (text)
+- **default**: `--rel-border-default` (background), `--rel-text-default` (text)
+- **blue**: `--rel-text-info` (background), `--rel-bg-surface` (text)
+- **yellow**: `--rel-bg-warning` (background), `--rel-text-default` (text)
+- **red**: `--rel-text-danger` (background), `--rel-bg-surface` (text)
+- **green**: `--rel-text-success` (background), `--rel-bg-surface` (text)
 
 ### Border & Shadow Tokens
-- `--rel-borders-radius-border-radius-500` - Border radius (pill shape)
-- `--rel-borders-width-stroke-100` - Border width (used in outline mode)
+- `--rel-border-radius-full-rounded` - Border radius (pill shape)
+- `--rel-stroke-sm` - Border width (used in outline mode)
 - `--rel-shadows-shadow-100` - Hover shadow
-- `--rel-colors-blue-primary` - Focus outline color
+- `--rel-bg-info` - Focus outline color
 
 ## Accessibility
 - Uses `role="button"` and `tabindex="0"` on the main chip element
@@ -108,8 +108,8 @@ None exposed.
 
 ## Notes / Edge Cases
 - **Size variants**:
-  - **md** (default): `--rel-fontSizes-md` text, `--rel-spacing-space-2xs`/`--rel-spacing-space-xs` padding, 20px × 20px avatar, 16px × 16px icons
-  - **sm**: `--rel-fontSizes-sm` text, `--rel-spacing-space-3xs`/`--rel-spacing-space-2xs` padding, 16px × 16px avatar, 12px × 12px icons
+  - **md** (default): `--rel-body-md-regular-font-size` text, `--rel-spacing-2xs`/`--rel-spacing-xs` padding, 20px × 20px avatar, 16px × 16px icons
+  - **sm**: `--rel-body-sm-regular-font-size` text, `--rel-spacing-3xs`/`--rel-spacing-2xs` padding, 16px × 16px avatar, 12px × 12px icons
 - Icons (`leadingIcon`, `trailingIcon`) must be passed as raw HTML/SVG strings via JavaScript (see examples)
 - Icons are injected using `renderIcon()` which creates a template element and clones the content
 - Avatar images are 20px × 20px circular (`border-radius: 50%`, `object-fit: cover`)