@reliability-design/web 1.1.1 → 1.2.0

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

@@ -1,26 +1,23 @@
+import "../../styles/vars-v2.css";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
-
 @customElement("rel-accordion")
 export class RelAccordion extends LitElement {
   @property({ type: String }) title = "Accordion";
   @property({ type: Boolean, reflect: true }) open = false;
-
   static styles = css`
     :host {
       display: block;
       width: 100%;
       font-family: var(--rel-fontFamilies-primary, sans-serif);
     }
-
     .accordion {
-      background: var(--rel-colors-white, #fff);
-      border: 1px solid var(--rel-border-default, #ddd);
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
-      box-shadow: var(--rel-shadows-shadow-100);
+      background: var(--rel-color-bg-primary);
+      border: none;
+      border-bottom: 1px solid var(--rel-gray-text-placeholder);
+      border-radius: 0;
       overflow: hidden;
     }
-
     /* HEADER --------------------------------------------------- */
     .header {
       display: flex;
@@ -29,28 +26,23 @@ export class RelAccordion extends LitElement {
       padding: var(--rel-spacing-space-md, 16px);
       cursor: pointer;
       user-select: none;
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      border-radius: 0;
     }
-
     .header:hover {
       background: var(--rel-surface-surface, #f5f5f5);
     }
-
     :host([open]) .header:hover {
       background: transparent;
     }
-
     .header:focus-visible {
-      outline: 2px solid var(--rel-border-info, #0091ea);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: -2px;
     }
-
     .title {
       font-size: var(--rel-fontSizes-lg, 20px);
       font-weight: var(--rel-fontWeights-medium, 500);
       color: var(--rel-text-heading, #2b2b2b);
     }
-
     /* ICON ----------------------------------------------------- */
     .icon {
       width: 20px;
@@ -60,7 +52,6 @@ export class RelAccordion extends LitElement {
       justify-content: center;
       transition: transform 0.25s ease;
     }
-
     .icon svg {
       width: 20px;
       height: 20px;
@@ -70,11 +61,9 @@ export class RelAccordion extends LitElement {
       stroke-linecap: round;
       stroke-linejoin: round;
     }
-
     .icon.rotated {
       transform: rotate(180deg);
     }
-
     /* BODY ------------------------------------------------------ */
     .body {
       overflow: hidden;
@@ -82,15 +71,15 @@ export class RelAccordion extends LitElement {
       padding: 0 var(--rel-spacing-space-md, 16px);
       font-size: var(--rel-fontSizes-md, 14px);
       color: var(--rel-text-primary, #333);
-      transition: max-height 0.25s ease, padding 0.2s ease;
+      transition:
+        max-height 0.25s ease,
+        padding 0.2s ease;
     }
-
     .body.open {
       max-height: 1000px;
-      padding: var(--rel-spacing-space-xl, 24px) var(--rel-spacing-space-md, 16px)
-        var(--rel-spacing-space-lg, 20px);
+      padding: var(--rel-spacing-space-xl, 24px)
+        var(--rel-spacing-space-md, 16px) var(--rel-spacing-space-lg, 20px);
     }
-
     @media (prefers-reduced-motion: reduce) {
       .icon,
       .body {
@@ -98,19 +87,16 @@ export class RelAccordion extends LitElement {
       }
     }
   `;
-
   private toggle() {
     this.open = !this.open;
-
     this.dispatchEvent(
       new CustomEvent<boolean>("open-change", {
         detail: this.open,
         bubbles: true,
         composed: true,
-      })
+      }),
     );
   }
-
   private chevron() {
     return html`
       <svg viewBox="0 0 24 24">
@@ -118,11 +104,11 @@ export class RelAccordion extends LitElement {
       </svg>
     `;
   }
-
   render() {
     return html`
       <div class="accordion">
-        <div class="header"
+        <div
+          class="header"
           role="button"
           tabindex="0"
           aria-expanded="${this.open}"
@@ -132,14 +118,13 @@ export class RelAccordion extends LitElement {
               e.preventDefault();
               this.toggle();
             }
-          }}>
+          }}
+        >
           <div class="title">${this.title}</div>
-
           <div class="icon ${this.open ? "rotated" : ""}">
             ${this.chevron()}
           </div>
         </div>
-
         <!-- IMPORTANT: slot is ALWAYS rendered -->
         <div class="body ${this.open ? "open" : ""}">
           <slot></slot>

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

@@ -1,3 +1,4 @@
+import "../../styles/vars-v2.css";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -89,101 +90,100 @@ export class RelAlert extends LitElement {
       opacity: 1;
     }
 
-    /* COLORS — light mode (pinned Figma hex) */
+    /* COLORS — light mode */
     .alert-neutral {
-      background: #ffffff;
-      color: #000000;
+      background: var(--rel-color-bg-primary);
+      color: var(--rel-color-text-primary);
     }
 
     .alert-info {
-      background: #E1F2FF;
-      color: #000000;
-      --rel-icon-info: #0059F4;
+      background: var(--rel-background-info);
+      color: var(--rel-color-text-primary);
+      --rel-icon-info: var(--rel-colors-blue-tertiary);
     }
 
     .alert-success {
-      background: #E2FEEE;
-      color: #000000;
-      --rel-icon-success: #00A86B;
+      background: var(--rel-background-success);
+      color: var(--rel-color-text-primary);
+      --rel-icon-success: var(--rel-success-surface-dark);
     }
 
     .alert-warning {
-      background: #F6EFD7;
-      color: #000000;
-      --rel-icon-warning: #F2915C;
+      background: var(--rel-colors-gold-light);
+      color: var(--rel-color-text-primary);
+      --rel-icon-warning: var(--rel-warning-surface-dark);
     }
 
     .alert-error {
-      background: #FFDEDE;
-      color: #9C1E33;
-      --rel-icon-error: #9C1E33;
+      background: var(--rel-background-error-light);
+      color: var(--rel-error-surface-dark);
+      --rel-icon-error: var(--rel-error-surface-dark);
     }
 
     .alert-error .rel-close {
-      color: #000000;
+      color: var(--rel-color-text-primary);
     }
 
-    /* COLORS — dark mode (pinned Figma hex) */
+    /* COLORS — dark mode */
     :host-context([data-theme="dark"]) .rel-alert,
     :host-context(.dark) .rel-alert {
-      background: #2B2B2B;
-      color: #ffffff;
+      background: var(--rel-color-bg-tertiary);
+      color: var(--rel-color-text-primary);
       border: none;
     }
 
     :host-context([data-theme="dark"]) .rel-close,
     :host-context(.dark) .rel-close {
-      color: #ffffff;
+      color: var(--rel-color-text-primary);
     }
 
     :host-context([data-theme="dark"]) .alert-neutral,
     :host-context(.dark) .alert-neutral {
-      border: 1px solid #ffffff;
-      --rel-colors-black: #ffffff;
+      border: 1px solid var(--rel-color-border-strong);
     }
 
     :host-context([data-theme="dark"]) .alert-info,
     :host-context(.dark) .alert-info {
-      border: 1px solid #0059F4;
-      --rel-icon-info: #0059F4;
+      border: 1px solid var(--rel-colors-blue-tertiary);
+      --rel-icon-info: var(--rel-colors-blue-tertiary);
     }
 
     :host-context([data-theme="dark"]) .alert-info .rel-message2,
     :host-context(.dark) .alert-info .rel-message2 {
-      color: #0059F4;
+      color: var(--rel-colors-blue-tertiary);
     }
 
     :host-context([data-theme="dark"]) .alert-warning,
     :host-context(.dark) .alert-warning {
-      border: 1px solid #F2915C;
-      --rel-icon-warning: #F2915C;
+      border: 1px solid var(--rel-warning-surface-dark);
+      --rel-icon-warning: var(--rel-warning-surface-dark);
     }
 
     :host-context([data-theme="dark"]) .alert-warning .rel-message2,
     :host-context(.dark) .alert-warning .rel-message2 {
-      color: #F2915C;
+      color: var(--rel-warning-surface-dark);
     }
 
     :host-context([data-theme="dark"]) .alert-success,
     :host-context(.dark) .alert-success {
-      border: 1px solid #00A86B;
-      --rel-icon-success: #00A86B;
+      border: 1px solid var(--rel-success-surface-dark);
+      --rel-icon-success: var(--rel-success-surface-dark);
     }
 
     :host-context([data-theme="dark"]) .alert-success .rel-message2,
     :host-context(.dark) .alert-success .rel-message2 {
-      color: #00A86B;
+      color: var(--rel-success-surface-dark);
     }
 
     :host-context([data-theme="dark"]) .alert-error,
     :host-context(.dark) .alert-error {
-      border: 1px solid #9C1E33;
-      --rel-icon-error: #9C1E33;
+      border: 1px solid var(--rel-error-surface-dark);
+      --rel-icon-error: var(--rel-error-surface-dark);
     }
 
     :host-context([data-theme="dark"]) .alert-error .rel-message2,
     :host-context(.dark) .alert-error .rel-message2 {
-      color: #9C1E33;
+      color: var(--rel-error-surface-dark);
     }
   `;
 

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

@@ -1,3 +1,4 @@
+import "../../styles/vars-v2.css";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -12,6 +13,7 @@ export class RelAvatar extends LitElement {
   @property({ type: String }) src = "";
   @property({ type: String }) text = "";
   @property({ type: String }) alt = "Avatar";
+  @property({ type: String }) bg: string = "";
 
   static styles = css`
     :host {
@@ -26,8 +28,8 @@ export class RelAvatar extends LitElement {
       border-radius: 50%;
       overflow: hidden;
 
-      background-color: #9E9E9E;
-      color: #ffffff;
+      background-color: var(--rel-colors-gray-disabled-text);
+      color: var(--rel-avatar-color, #ffffff);
       font-weight: var(--rel-fontWeights-bold);
 
       user-select: none;
@@ -82,7 +84,7 @@ export class RelAvatar extends LitElement {
 
   render() {
     return html`
-      <div class="avatar avatar-${this.size}">
+      <div class="avatar avatar-${this.size}" style=${this.bg ? `background-color: ${this.bg}` : ""}>
         ${this.type === "image" && this.src
           ? html`<img src=${this.src} alt=${this.alt} />`
           : this.type === "text"

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

@@ -1,3 +1,4 @@
+import "../../styles/vars-v2.css";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -26,7 +27,7 @@ export class RelBadge extends LitElement {
       justify-content: center;
       font-family: var(--rel-fontFamilies-primary, sans-serif);
       font-weight: var(--rel-fontWeights-semibold, 600);
-      background-color: var(--rel-colors-red-primary);
+      background-color: var(--rel-error-surface-default);
       color: #ffffff;
       border-radius: 50%;
     }

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

@@ -1,3 +1,4 @@
+import "../../styles/vars-v2.css";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -38,25 +39,24 @@ export class RelBreadcrumbs extends LitElement {
 
     a {
       text-decoration: none;
-      font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-text-heading, #2b2b2b);
-      transition: color 0.2s ease;
+      font-weight: var(--rel-fontWeights-regular);
+      color: var(--rel-color-text-primary);
     }
 
     a:hover {
       text-decoration: underline;
-      color: var(--rel-colors-blue-primary, #0091ea);
+      color: var(--rel-color-text-primary);
     }
 
     a:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary, #0091ea);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: 2px;
       border-radius: 2px;
     }
 
     .current {
       font-weight: var(--rel-fontWeights-bold);
-      color: var(--rel-text-heading, #2b2b2b);
+      color: var(--rel-color-text-primary);
       cursor: default;
     }
 

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

@@ -1,3 +1,4 @@
+import "../../styles/vars-v2.css";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -9,7 +10,7 @@ export class RelButton extends LitElement {
     "default";
 
   @property({ type: String })
-  tone: "default" | "critical" | "success" = "default";
+  tone: "default" | "primary" | "secondary" | "critical" | "success" = "default";
 
   @property({ type: String })
   size: "small" | "medium" | "large" = "medium";
@@ -81,7 +82,7 @@ export class RelButton extends LitElement {
       cursor: not-allowed;
       background-color: var(--rel-color-bg-tertiary) !important;
       color: var(--rel-color-text-disabled) !important;
-      border: 1px solid var(--rel-color-border-default) !important;
+      border: none !important;
       pointer-events: none;
       filter: none !important;
     }
@@ -90,7 +91,6 @@ export class RelButton extends LitElement {
     :host([disabled]):host-context(.dark) button {
       background-color: var(--rel-color-bg-tertiary) !important;
       color: var(--rel-color-text-disabled) !important;
-      border-color: var(--rel-color-border-default) !important;
     }
 
     /* Variants & tones (unchanged) */
@@ -99,12 +99,12 @@ export class RelButton extends LitElement {
       color: var(--rel-colors-white);
     }
     .btn-default.tone-critical {
-      background: var(--rel-colors-red-primary);
+      background: var(--rel-error-surface-default);
       color: #ffffff;
     }
     .btn-default.tone-success {
-      background: var(--rel-colors-green-success);
-      color: var(--rel-colors-white);
+      background: var(--rel-colors-green-tertiary);
+      color: #ffffff;
     }
 
     .btn-primary.tone-default {
@@ -112,12 +112,12 @@ export class RelButton extends LitElement {
       color: #000000;
     }
     .btn-primary.tone-critical {
-      background: var(--rel-colors-red-primary);
+      background: var(--rel-error-surface-default);
       color: #ffffff;
     }
     .btn-primary.tone-success {
-      background: var(--rel-colors-green-success);
-      color: var(--rel-colors-white);
+      background: var(--rel-colors-green-tertiary);
+      color: #ffffff;
     }
 
     .btn-secondary {
@@ -142,8 +142,31 @@ export class RelButton extends LitElement {
       height: 40px;
       padding: 0;
       border-radius: 50%;
+    }
+    .btn-icon.tone-default {
       background: var(--rel-colors-gray-light);
       color: var(--rel-colors-black);
+      border: none;
+    }
+    .btn-icon.tone-primary {
+      background: var(--rel-colors-green-primary);
+      color: #000000;
+      border: none;
+    }
+    .btn-icon.tone-secondary {
+      background: var(--rel-colors-white);
+      color: var(--rel-colors-black);
+      border: 1px solid var(--rel-color-border-strong);
+    }
+    .btn-icon.tone-success {
+      background: var(--rel-colors-green-tertiary);
+      color: #ffffff;
+      border: none;
+    }
+    .btn-icon.tone-critical {
+      background: var(--rel-error-surface-default);
+      color: #ffffff;
+      border: none;
     }
 
     button.btn-primary.tone-default:hover:not(:disabled) {
@@ -158,7 +181,8 @@ export class RelButton extends LitElement {
       filter: brightness(0.9);
     }
 
-    button:hover:not(:disabled):not(.btn-primary):not(.btn-default) {
+    /* Generic hover — excludes icon (handled per-tone below) */
+    button:hover:not(:disabled):not(.btn-primary):not(.btn-default):not(.btn-icon) {
       background: var(--rel-color-bg-hover);
     }
 
@@ -166,37 +190,59 @@ export class RelButton extends LitElement {
       filter: brightness(0.85);
     }
 
+    /* Icon hover — each tone matches its corresponding button variant */
+    button.btn-icon.tone-default:hover:not(:disabled) {
+      filter: brightness(0.9);
+    }
+    button.btn-icon.tone-primary:hover:not(:disabled) {
+      background: var(--rel-color-brand-hover);
+    }
+    button.btn-icon.tone-secondary:hover:not(:disabled) {
+      background: var(--rel-color-bg-hover);
+    }
+    button.btn-icon.tone-success:hover:not(:disabled) {
+      filter: brightness(0.9);
+    }
+    button.btn-icon.tone-critical:hover:not(:disabled) {
+      filter: brightness(0.9);
+    }
+
     button:active:not(:disabled) {
       transform: scale(0.97);
     }
 
     button:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: 2px;
     }
 
     /* Dark mode overrides */
+    :host-context([data-theme="dark"]) button.btn-default.tone-default,
+    :host-context(.dark) button.btn-default.tone-default {
+      background: var(--rel-gray-text-primary);
+      color: #000000;
+    }
+
     :host-context([data-theme="dark"]) button:focus-visible,
     :host-context(.dark) button:focus-visible {
-      outline-color: #ffffff;
+      outline-color: var(--rel-color-text-primary);
     }
 
     :host-context([data-theme="dark"]) button.btn-secondary,
-    :host-context(.dark) button.btn-secondary {
-      background: #000000;
-      border-color: #ffffff;
-      color: #ffffff;
+    :host-context(.dark) button.btn-secondary,
+    :host-context([data-theme="dark"]) button.btn-icon.tone-secondary,
+    :host-context(.dark) button.btn-icon.tone-secondary {
+      background: var(--rel-color-bg-primary);
+      border-color: var(--rel-color-border-strong);
+      color: var(--rel-color-text-primary);
     }
 
     :host-context([data-theme="dark"]) button.btn-text,
     :host-context(.dark) button.btn-text {
-      color: #ffffff;
+      color: var(--rel-color-text-primary);
     }
 
-    :host-context([data-theme="dark"]) button.btn-link,
-    :host-context(.dark) button.btn-link {
-      color: #ffffff;
-    }
+    /* btn-link: blue in both modes — no dark override */
   `;
 
   private get classes() {

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 interface CalendarDay {
   date: Date;
@@ -69,16 +70,16 @@ export class RelCalendar extends LitElement {
       align-items: center;
       justify-content: center;
       cursor: pointer;
-      color: var(--rel-colors-gray-primary);
+      color: var(--rel-color-text-primary);
       transition: background-color 0.15s ease;
     }
 
     .nav-button:hover {
-      background: var(--rel-surface-secondary);
+      background: var(--rel-color-bg-secondary);
     }
 
     .nav-button:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: 2px;
     }
 
@@ -92,7 +93,7 @@ export class RelCalendar extends LitElement {
       text-align: center;
       font-size: var(--rel-fontSizes-xs);
       font-weight: var(--rel-fontWeights-semibold);
-      color: var(--rel-colors-gray-placeholder);
+      color: var(--rel-gray-text-placeholder);
       padding: var(--rel-spacing-space-xs);
       text-transform: uppercase;
     }
@@ -116,23 +117,23 @@ export class RelCalendar extends LitElement {
     }
 
     .day-button:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: -2px;
       z-index: 1;
     }
 
     .day-button.today:not(.selected) {
-      border: 2px solid var(--rel-color-border-focus);
+      border: 2px solid var(--rel-color-brand);
     }
 
     .day-button.selected {
       background: var(--rel-color-brand);
-      color: var(--rel-color-text-inverse);
+      color: #000000;
       font-weight: var(--rel-fontWeights-semibold);
     }
 
     .day-button.other-month {
-      color: var(--rel-colors-gray-placeholder);
+      color: var(--rel-gray-text-placeholder);
       opacity: 0.5;
     }
 
@@ -145,6 +146,12 @@ export class RelCalendar extends LitElement {
     .day-button:disabled:hover {
       background: transparent;
     }
+
+    :host-context([data-theme="dark"]) :host,
+    :host-context(.dark) :host {
+      background: var(--rel-color-bg-primary);
+      border-color: var(--rel-color-border-default);
+    }
   `;
 
   connectedCallback() {

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 @customElement("rel-card")
 export class RelCard extends LitElement {
@@ -10,26 +11,17 @@ export class RelCard extends LitElement {
     }
 
     .card {
-      background-color: var(--rel-colors-white, #fff);
-      color: var(--rel-text-primary, #333);
-      border-radius: var(--rel-borders-radius-border-radius-300);
+      background-color: var(--rel-color-bg-primary);
+      color: var(--rel-color-text-primary);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      border: 1px solid var(--rel-color-border-default);
       padding: var(--rel-spacing-space-md);
-      box-shadow: var(--rel-shadows-shadow-200);
-      transition: transform 0.2s ease, box-shadow 0.2s ease;
     }
 
-    .card:hover {
-      transform: translateY(-3px);
-      box-shadow: var(--rel-shadows-shadow-300);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .card {
-        transition: none;
-      }
-      .card:hover {
-        transform: none;
-      }
+    :host-context([data-theme="dark"]) .card,
+    :host-context(.dark) .card {
+      background-color: var(--rel-color-bg-primary);
+      border-color: var(--rel-color-border-default);
     }
   `;