@reliability-design/web 1.3.1 → 1.4.0

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

@@ -77,21 +77,21 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
-- `--rel-fontSizes-sm`, `--rel-fontSizes-xs` - Font sizes for label and supporting text
-- `--rel-fontWeights-medium` - Font weight for labels
+- `--rel-fonts-font-family` - Font family
+- `--rel-body-sm-regular-font-size`, `--rel-body-xs-regular-font-size` - Font sizes for label and supporting text
+- `--rel-fonts-weight-body-medium` - Font weight for labels
 
 ### Spacing Tokens
-- `--rel-spacing-space-xs` - Gap between radio options
-- `--rel-spacing-space-3xs` - Gap within each option (label and supporting text)
-- `--rel-spacing-space-2xs` - Gap between radio circle and label
+- `--rel-spacing-xs` - Gap between radio options
+- `--rel-spacing-3xs` - Gap within each option (label and supporting text)
+- `--rel-spacing-2xs` - Gap between radio circle and label
 
 ### Color Tokens
-- `--rel-text-heading` - Radio button border and checked dot color
-- `--rel-text-primary` - Label text color
+- `--rel-text-label` - Radio button border and checked dot color
+- `--rel-text-default` - Label text color
 - `--rel-text-placeholder` - Supporting text color
 - `--rel-border-info` - Focus outline color
-- `--rel-colors-red-secondary` - Error state border and dot color
+- `--rel-text-danger` - Error state border and dot color
 
 ## Accessibility
 - Uses visually hidden native radio inputs for proper screen reader support

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

@@ -1,6 +1,5 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
 export interface RadioOption {
   value: string;
@@ -34,50 +33,52 @@ export class RelRadio 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);
     }
 
     .rel-radio-group {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
-      gap: var(--rel-spacing-space-xs);
+      gap: var(--rel-spacing-xs);
     }
 
     .rel-radio-option {
       display: inline-flex;
       flex-direction: column;
-      gap: var(--rel-spacing-space-3xs);
+      gap: var(--rel-spacing-3xs);
       cursor: pointer;
     }
 
     .rel-radio-option.disabled {
       opacity: 0.6;
+      color: var(--rel-text-disabled);
       cursor: not-allowed !important;
     }
 
     .rel-radio-option:not(.disabled):hover .radio-custom {
-      border-color: #525252;
+      border-color: var(--rel-text-body);
     }
 
     .rel-radio-option:not(.disabled):hover .radio-label {
-      color: #525252;
+      color: var(--rel-text-body);
     }
 
     .rel-radio-option:not(.disabled):hover .radio-supporting {
-      color: #7D7D7D;
+      color: var(--rel-text-caption);
     }
 
     .rel-radio-option:focus-within:has(input:focus-visible) {
-      outline: 1.5px solid #000000;
+      outline: 1.5px solid var(--rel-border-focus);
       outline-offset: 1px;
     }
 
     .radio-main {
       display: flex;
       align-items: center;
-      gap: var(--rel-spacing-space-2xs);
+      gap: var(--rel-spacing-2xs);
     }
 
     input {
@@ -89,7 +90,7 @@ export class RelRadio extends LitElement {
     .radio-custom {
       width: 20px;
       height: 20px;
-      border: 2px solid var(--rel-color-text-heading);
+      border: 2px solid var(--rel-text-label);
       border-radius: 50%;
       position: relative;
       flex-shrink: 0;
@@ -99,62 +100,76 @@ export class RelRadio extends LitElement {
       content: "";
       position: absolute;
       inset: 4px;
-      background: var(--rel-color-text-heading);
+      background: var(--rel-text-label);
       border-radius: 50%;
     }
 
     .radio-label {
-      font-size: var(--rel-fontSizes-md, 16px);
-      font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-color-text-primary);
+      color: var(--rel-text-default);
+
+      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);
+
     }
 
     .radio-supporting {
-      font-size: var(--rel-fontSizes-sm, 12px);
       margin-left: 28px;
-      color: #7D7D7D;
+      color: var(--rel-text-caption);
+
+      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 state (Figma State=Error, both Is Checked values) */
+    .rel-radio-option.error-unchecked .radio-custom,
+    .rel-radio-option.error-checked .radio-custom {
+      border-color: var(--rel-border-danger);
     }
 
-    /* Error state — unchecked only */
-    .rel-radio-option.error-unchecked .radio-custom {
-      border-color: #CE3131;
+    .rel-radio-option.error-checked input:checked + .radio-custom::after {
+      background: var(--rel-text-danger);
     }
 
-    .rel-radio-option.error-unchecked .radio-label {
-      color: #CE3131;
+    .rel-radio-option.error-unchecked .radio-label,
+    .rel-radio-option.error-checked .radio-label {
+      color: var(--rel-text-danger);
     }
 
-    .rel-radio-option.error-unchecked .radio-supporting {
-      color: #CE3131;
+    .rel-radio-option.error-unchecked .radio-supporting,
+    .rel-radio-option.error-checked .radio-supporting {
+      color: var(--rel-text-danger);
     }
 
     /* Error message below group */
     .error-message {
-      font-size: var(--rel-fontSizes-sm, 12px);
-      color: #CE3131;
-      margin-top: var(--rel-spacing-space-2xs, 4px);
-    }
+      color: var(--rel-text-danger);
+      margin-top: var(--rel-spacing-2xs, 4px);
 
-    /* Dark mode hover overrides */
-    :host-context([data-theme="dark"]) .rel-radio-option:not(.disabled):hover .radio-custom,
-    :host-context(.dark) .rel-radio-option:not(.disabled):hover .radio-custom {
-      border-color: var(--rel-color-text-secondary, #D4D4D4);
-    }
+      font-family: var(--rel-body-sm-regular-font-family);
 
-    :host-context([data-theme="dark"]) .rel-radio-option:not(.disabled):hover .radio-label,
-    :host-context(.dark) .rel-radio-option:not(.disabled):hover .radio-label {
-      color: var(--rel-color-text-secondary, #D4D4D4);
-    }
+      font-weight: var(--rel-body-sm-regular-font-weight);
 
-    :host-context([data-theme="dark"]) .rel-radio-option:not(.disabled):hover .radio-supporting,
-    :host-context(.dark) .rel-radio-option:not(.disabled):hover .radio-supporting {
-      color: var(--rel-color-text-placeholder, #A3A3A3);
-    }
+      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);
 
-    :host-context([data-theme="dark"]) .rel-radio-option:focus-within:has(input:focus-visible),
-    :host-context(.dark) .rel-radio-option:focus-within:has(input:focus-visible) {
-      outline: 1.5px solid var(--rel-color-text-primary, #F5F5F5);
-      outline-offset: 1px;
     }
   `;
 
@@ -183,12 +198,11 @@ export class RelRadio extends LitElement {
   private renderOption(option: RadioOption) {
     const isChecked = this.selectedValue === option.value;
     const isDisabled = this.disabled || option.disabled;
-    const isErrorActive = this.error && !this.hasSelection;
-
     const classes = [
       "rel-radio-option",
       isDisabled ? "disabled" : "",
-      isErrorActive ? "error-unchecked" : "",
+      this.error && !this.hasSelection ? "error-unchecked" : "",
+      this.error && isChecked ? "error-checked" : "",
     ]
       .filter(Boolean)
       .join(" ");
@@ -205,7 +219,7 @@ export class RelRadio extends LitElement {
             @blur="${() => this._onTouched()}"
           />
           <span class="radio-custom"></span>
-          <span class="radio-label">${option.label}</span>
+          <span part="label" class="radio-label">${option.label}</span>
         </div>
 
         ${option.supportingText
@@ -217,10 +231,10 @@ export class RelRadio extends LitElement {
 
   render() {
     return html`
-      <div class="rel-radio-group">
+      <div part="base" class="rel-radio-group">
         ${this.options.map((o) => this.renderOption(o))}
       </div>
-      ${this.error && this.errorMessage && !this.hasSelection
+      ${this.error && this.errorMessage
         ? html`<div class="error-message">${this.errorMessage}</div>`
         : ""}
     `;