@reliability-design/web 1.3.1 → 1.4.1

package/dist/components/rel-topbar/rel-topbar-mobile-panel.ts

@@ -1,6 +1,5 @@
 import { LitElement, html, css } from "lit";
 import { customElement } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
 /**
  * @deprecated Part of the deprecated rel-topbar family. Use `rel-drawer`

package/dist/components/rel-topbar/rel-topbar-profile.ts

@@ -1,6 +1,5 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 import "../rel-avatar/rel-avatar.js";
 
 export type TopbarProfileType = "avatar" | "carrier";
@@ -38,28 +37,29 @@ export class RelTopbarProfile extends LitElement {
   static styles = css`
     /* ─── Component tokens (reward tier palette) ────────────────────── */
     :host {
-      --_profile-radius: var(--rel-borders-radius-border-radius-500, 1000px);
+      color: var(--rel-text-default);
+      --_profile-radius: var(--rel-border-radius-full-rounded, 1000px);
       --_avatar-size: 36px;
       --_avatar-size-sm: 28px;
-      --_avatar-bg: var(--rel-colors-green-primary, #00f49c);
-      --_avatar-color: var(--rel-color-text-primary);
+      --_avatar-bg: var(--rel-bg-brand);
+      --_avatar-color: var(--rel-text-default);
 
       /* Reward tier colours (reference existing token palette) */
-      --rel-topbar-reward-gold: var(--rel-colors-gold, #d6ba00);
-      --rel-topbar-reward-gold-bg: var(--rel-colors-gold-light, #f6efd7);
-      --rel-topbar-reward-silver: var(--rel-colors-silver, #bababa);
-      --rel-topbar-reward-silver-bg: var(--rel-colors-silver-secondary, #f0f0f0);
-      --rel-topbar-reward-platinum: var(--rel-colors-platinum, #8392c9);
-      --rel-topbar-reward-platinum-bg: var(--rel-colors-platinum-secondary, #e4e6f2);
-      --rel-topbar-reward-bronze: var(--rel-colors-bronze, #7d5300);
-      --rel-topbar-reward-bronze-bg: var(--rel-colors-bronze-secondary, #e2dac7);
-      --rel-topbar-reward-regular: var(--rel-colors-gray-divider, #bdbdbd);
-      --rel-topbar-reward-regular-bg: var(--rel-color-bg-secondary);
+      --rel-topbar-reward-gold: var(--rel-bg-warning);
+      --rel-topbar-reward-gold-bg: var(--rel-bg-warning-light);
+      --rel-topbar-reward-silver: var(--rel-text-caption);
+      --rel-topbar-reward-silver-bg: var(--rel-bg-neutral-elevated-1);
+      --rel-topbar-reward-platinum: var(--rel-text-info);
+      --rel-topbar-reward-platinum-bg: var(--rel-bg-info-light);
+      --rel-topbar-reward-bronze: var(--rel-text-warning);
+      --rel-topbar-reward-bronze-bg: var(--rel-bg-warning-light);
+      --rel-topbar-reward-regular: var(--rel-border-default);
+      --rel-topbar-reward-regular-bg: var(--rel-bg-surface-elevated);
 
       display: inline-flex;
       align-items: center;
-      gap: var(--rel-spacing-space-xs, 8px);
-      font-family: var(--rel-fontFamilies-primary, Poppins, sans-serif);
+      gap: var(--rel-spacing-xs, 8px);
+      font-family: var(--rel-fonts-font-family, Poppins, sans-serif);
       cursor: pointer;
     }
 
@@ -75,38 +75,56 @@ export class RelTopbarProfile extends LitElement {
       display: none;
     }
 
-    .name {
-      font-size: var(--rel-fontSizes-md, 14px);
-      font-weight: var(--rel-fontWeights-medium, 500);
-      color: var(--rel-color-text-primary);
-      line-height: var(--rel-lineHeights-md, 20px);
+    .name {
+      color: var(--rel-text-default);
       white-space: nowrap;
       overflow: hidden;
-      text-overflow: ellipsis;
+      text-overflow: ellipsis;
+
+      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);
+
     }
 
-    .subtitle {
-      font-size: var(--rel-fontSizes-sm, 12px);
-      font-weight: var(--rel-fontWeights-regular, 400);
-      color: var(--rel-color-text-placeholder);
-      line-height: var(--rel-lineHeights-sm, 18px);
+    .subtitle {
+      color: var(--rel-text-placeholder);
       white-space: nowrap;
       overflow: hidden;
-      text-overflow: ellipsis;
+      text-overflow: ellipsis;
+
+      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);
+
     }
 
     /* ─── Carrier reward badge ──────────────────────────────────────── */
     .reward-badge {
       display: inline-flex;
       align-items: center;
-      gap: var(--rel-spacing-space-3xs, 2px);
-      padding: 2px var(--rel-spacing-space-2xs, 4px);
-      border-radius: var(--rel-borders-radius-border-radius-100, 2px);
-      font-size: var(--rel-fontSizes-xs, 10px);
-      font-weight: var(--rel-fontWeights-bold, 700);
-      text-transform: uppercase;
-      letter-spacing: 0.4px;
-      flex-shrink: 0;
+      gap: var(--rel-spacing-3xs, 2px);
+      padding: 2px var(--rel-spacing-2xs, 4px);
+      border-radius: var(--rel-border-radius-xs, 2px);
+      text-transform: uppercase;
+      flex-shrink: 0;
+      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);
     }
 
     /* Gold */
@@ -118,7 +136,7 @@ export class RelTopbarProfile extends LitElement {
     /* Silver */
     :host([reward="silver"]) .reward-badge {
       background: var(--rel-topbar-reward-silver-bg);
-      color: var(--rel-colors-gray-primary, #333);
+      color: var(--rel-text-default);
     }
 
     /* Platinum */
@@ -136,22 +154,22 @@ export class RelTopbarProfile extends LitElement {
     /* Regular */
     :host([reward="regular"]) .reward-badge {
       background: var(--rel-topbar-reward-regular-bg);
-      color: var(--rel-colors-gray-primary, #333);
+      color: var(--rel-text-default);
     }
 
     /* ─── Carrier tile shell ────────────────────────────────────────── */
     .carrier-tile {
       display: flex;
       align-items: center;
-      gap: var(--rel-spacing-space-xs, 8px);
-      padding: var(--rel-spacing-space-2xs, 4px) var(--rel-spacing-space-xs, 8px);
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
-      background: var(--rel-surface-secondary, #fafafa);
-      border: var(--rel-borders-width-stroke-100, 1px) solid var(--rel-color-border-default);
+      gap: var(--rel-spacing-xs, 8px);
+      padding: var(--rel-spacing-2xs, 4px) var(--rel-spacing-xs, 8px);
+      border-radius: var(--rel-border-radius-sm, 8px);
+      background: var(--rel-bg-surface-elevated);
+      border: var(--rel-stroke-sm, 1px) solid var(--rel-border-default);
     }
 
     :host([compact]) .carrier-tile {
-      padding: var(--rel-spacing-space-2xs, 4px);
+      padding: var(--rel-spacing-2xs, 4px);
     }
 
     .carrier-meta {
@@ -194,13 +212,13 @@ export class RelTopbarProfile extends LitElement {
 
   private _avatarBg(): string {
     const map: Record<string, string> = {
-      gold:     "var(--rel-colors-gold)",
-      platinum: "var(--rel-colors-platinum)",
-      silver:   "var(--rel-colors-silver)",
-      bronze:   "var(--rel-colors-bronze)",
-      regular:  "var(--rel-colors-green-primary)",
+      gold:     "var(--rel-bg-warning)",
+      platinum: "var(--rel-text-info)",
+      silver:   "var(--rel-text-caption)",
+      bronze:   "var(--rel-text-warning)",
+      regular:  "var(--rel-bg-brand)",
     };
-    return map[this.reward] ?? "var(--rel-colors-green-primary)";
+    return map[this.reward] ?? "var(--rel-bg-brand)";
   }
 
   private _renderCarrier() {

package/dist/components/rel-topbar/rel-topbar-utilities.ts

@@ -1,6 +1,5 @@
 import { LitElement, html, css } from "lit";
 import { customElement } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
 /**
  * @deprecated Part of the deprecated rel-topbar family. Use plain
@@ -12,7 +11,7 @@ export class RelTopbarUtilities extends LitElement {
     .utilities {
       display: inline-flex;
       align-items: center;
-      gap: var(--rel-spacing-space-xs, 8px);
+      gap: var(--rel-spacing-xs, 8px);
     }
   `;
 

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

@@ -1,6 +1,5 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 import "@reliability-design/icons/rel-icon";
 import "./rel-topbar-brand";
 import "./rel-topbar-actions";
@@ -68,22 +67,23 @@ export class RelTopbar extends LitElement {
   static styles = css`
     /* ─── Component tokens ─────────────────────────────────────────── */
     :host {
+      color: var(--rel-text-default);
       --rel-topbar-height: 64px;
       --rel-topbar-height-compact: 48px;
-      --rel-topbar-bg: var(--rel-color-bg-primary);
-      --rel-topbar-border-color: var(--rel-border-default, #ddd);
-      --rel-topbar-item-color: var(--rel-color-text-primary);
-      --rel-topbar-item-active-color: var(--rel-colors-green-tertiary, #00a86b);
-      --rel-topbar-item-active-indicator: var(--rel-colors-green-primary, #00f49c);
-      --rel-topbar-item-hover-bg: var(--rel-color-bg-secondary);
-      --rel-topbar-divider-color: var(--rel-border-divider, #bdbdbd);
-      --rel-topbar-carrier-action-bg: var(--rel-color-text-primary);
-      --rel-topbar-carrier-action-color: var(--rel-color-bg-primary);
+      --rel-topbar-bg: var(--rel-bg-surface);
+      --rel-topbar-border-color: var(--rel-border-default);
+      --rel-topbar-item-color: var(--rel-text-default);
+      --rel-topbar-item-active-color: var(--rel-text-success);
+      --rel-topbar-item-active-indicator: var(--rel-bg-brand);
+      --rel-topbar-item-hover-bg: var(--rel-bg-surface-elevated);
+      --rel-topbar-divider-color: var(--rel-border-default);
+      --rel-topbar-carrier-action-bg: var(--rel-text-default);
+      --rel-topbar-carrier-action-color: var(--rel-bg-surface);
       --rel-topbar-z: 100;
 
       display: block;
       width: 100%;
-      font-family: var(--rel-fontFamilies-primary, Poppins, sans-serif);
+      font-family: var(--rel-fonts-font-family, Poppins, sans-serif);
     }
 
     /* ─── Sticky host ───────────────────────────────────────────────── */
@@ -99,10 +99,10 @@ export class RelTopbar extends LitElement {
       align-items: center;
       height: var(--rel-topbar-height);
       background: var(--rel-topbar-bg);
-      border-bottom: var(--rel-borders-width-stroke-100, 1px) solid var(--rel-topbar-border-color);
-      padding: 0 var(--rel-spacing-space-xl, 24px);
+      border-bottom: var(--rel-stroke-sm, 1px) solid var(--rel-topbar-border-color);
+      padding: 0 var(--rel-spacing-xl, 24px);
       box-sizing: border-box;
-      gap: var(--rel-spacing-space-md, 16px);
+      gap: var(--rel-spacing-md, 16px);
     }
 
     :host([compact]) .topbar {
@@ -121,7 +121,7 @@ export class RelTopbar extends LitElement {
       display: flex;
       align-items: center;
       flex: 1 1 0;
-      gap: var(--rel-spacing-space-2xs, 4px);
+      gap: var(--rel-spacing-2xs, 4px);
       min-width: 0;
     }
 
@@ -131,7 +131,7 @@ export class RelTopbar extends LitElement {
       align-items: center;
       flex-shrink: 0;
       margin-left: auto;
-      gap: var(--rel-spacing-space-xs, 8px);
+      gap: var(--rel-spacing-xs, 8px);
     }
 
     .actions-region,
@@ -142,7 +142,7 @@ export class RelTopbar extends LitElement {
 
     /* Vertical divider between util/profile when both are populated */
     .divider {
-      width: var(--rel-borders-width-stroke-100, 1px);
+      width: var(--rel-stroke-sm, 1px);
       height: 24px;
       background: var(--rel-topbar-divider-color);
       flex-shrink: 0;
@@ -152,11 +152,11 @@ export class RelTopbar extends LitElement {
     :host([variant="carrier"]) .actions-region ::slotted(*) {
       display: flex;
       align-items: center;
-      gap: var(--rel-spacing-space-xs, 8px);
+      gap: var(--rel-spacing-xs, 8px);
       background: var(--rel-topbar-carrier-action-bg);
       color: var(--rel-topbar-carrier-action-color);
-      padding: var(--rel-spacing-space-2xs, 4px) var(--rel-spacing-space-sm, 12px);
-      border-radius: var(--rel-borders-radius-border-radius-500, 1000px);
+      padding: var(--rel-spacing-2xs, 4px) var(--rel-spacing-sm, 12px);
+      border-radius: var(--rel-border-radius-full-rounded, 1000px);
     }
 
     /* ─── Mobile toggle button ──────────────────────────────────────── */
@@ -169,7 +169,7 @@ export class RelTopbar extends LitElement {
       padding: 0;
       border: none;
       background: transparent;
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      border-radius: var(--rel-border-radius-sm, 8px);
       cursor: pointer;
       color: var(--rel-topbar-item-color);
       flex-shrink: 0;
@@ -192,7 +192,7 @@ export class RelTopbar extends LitElement {
     .mobile-panel {
       display: none;
       background: var(--rel-topbar-bg);
-      border-bottom: var(--rel-borders-width-stroke-100, 1px) solid var(--rel-topbar-border-color);
+      border-bottom: var(--rel-stroke-sm, 1px) solid var(--rel-topbar-border-color);
     }
 
     .mobile-panel.open {
@@ -202,18 +202,20 @@ export class RelTopbar extends LitElement {
     .mobile-overflow-nav {
       display: flex;
       flex-direction: column;
-      padding: var(--rel-spacing-space-xs, 8px) 0;
+      padding: var(--rel-spacing-xs, 8px) 0;
       border-top: 1px solid var(--rel-topbar-border-color);
     }
 
     .mobile-overflow-item {
       display: block;
-      padding: var(--rel-spacing-space-xs, 8px) var(--rel-spacing-space-xl, 24px);
-      color: var(--rel-topbar-item-color);
-      font-family: var(--rel-fontFamilies-primary, Poppins, sans-serif);
-      font-size: var(--rel-fontSizes-md, 14px);
-      font-weight: var(--rel-fontWeights-medium, 500);
-      text-decoration: none;
+      padding: var(--rel-spacing-xs, 8px) var(--rel-spacing-xl, 24px);
+      color: var(--rel-topbar-item-color);
+      text-decoration: none;
+      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);
     }
 
     .mobile-overflow-item:hover {