@reliability-design/web 1.3.0 → 1.4.0

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

@@ -1,5 +1,5 @@
-import "../../styles/vars-v2.css";
 import { LitElement, html, css } from "lit";
+import "@reliability-design/icons/rel-icon";
 import { customElement, property } from "lit/decorators.js";
 
 @customElement("rel-alert")
@@ -7,19 +7,27 @@ export class RelAlert extends LitElement {
   @property({ type: String })
   type: "info" | "success" | "warning" | "error" | "neutral" = "neutral";
 
+  /** Visual treatment (Figma "Style"): solid | subtle | outline. "filled" is a deprecated alias of solid. */
+  @property({ type: String, reflect: true })
+  appearance: "solid" | "subtle" | "outline" | "filled" = "subtle";
+
   @property({ type: String }) message1 = "";
   @property({ type: String }) message2?: string;
 
-  @property({ type: String }) urlText?: string;
-  @property({ type: String }) urlHref?: string;
+  // Explicit attribute names: Lit would otherwise lowercase these to `urltext`
+  // / `urlhref`, while the docs, the docs-app previews and consumers all use
+  // `url-text` / `url-href` — which silently did nothing.
+  @property({ type: String, attribute: "url-text" }) urlText?: string;
+  @property({ type: String, attribute: "url-href" }) urlHref?: string;
 
   @property({ type: Boolean }) dismissible = true;
   @property({ type: Boolean, reflect: true }) dismissed = false;
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: block;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fonts-font-family);
     }
 
     :host([dismissed]) {
@@ -28,56 +36,83 @@ export class RelAlert extends LitElement {
 
     .rel-alert {
       display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-space-xs);
-      padding: var(--rel-spacing-space-sm) var(--rel-spacing-space-md);
-      border-radius: var(--rel-borders-radius-border-radius-200);
+      align-items: flex-start;
+      gap: var(--rel-spacing-xs);
+      padding: var(--rel-spacing-sm) var(--rel-spacing-lg);
+      border-radius: var(--rel-border-radius-sm);
       min-width: 360px;
       box-sizing: border-box;
     }
 
     .rel-content {
+      padding-right: var(--rel-spacing-md);
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: var(--rel-spacing-3xs);
     }
 
     .rel-message1 {
+      /* Figma: body-lg-medium weight on body-lg-regular metrics */
+      font-weight: var(--rel-body-lg-medium-font-weight);
+      color: var(--rel-text-label);
       margin: 0;
-      font-size: var(--rel-fontSizes-md);
-      font-weight: var(--rel-fontWeights-medium);
+      font-family: var(--rel-body-lg-regular-font-family);
+      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);
     }
 
     .rel-message2 {
+      color: var(--rel-text-body);
       margin: 0;
-      font-size: var(--rel-fontSizes-sm);
       opacity: 0.9;
+      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);
+    }
+
+    .rel-icon {
+      margin-top: 2px;
+      flex-shrink: 0;
     }
 
     .rel-icon svg {
       width: 16px;
       height: 16px;
+      display: block;
     }
 
     .rel-link {
-      font-size: var(--rel-fontSizes-sm);
-      font-weight: var(--rel-fontWeights-medium);
       text-decoration: underline;
-      color: inherit;
+      color: var(--rel-action-neutral-label-icons-link);
       margin-top: 2px;
+
+      font-family: var(--rel-action-md-font-family);
+
+      font-weight: var(--rel-action-md-font-weight);
+
+      font-size: var(--rel-action-md-font-size);
+
+      line-height: var(--rel-action-md-line-height);
+
+      letter-spacing: var(--rel-action-md-letter-spacing);
+
     }
 
     .rel-close {
       margin-left: auto;
+      align-self: flex-start;
       background: none;
       border: none;
       cursor: pointer;
       opacity: 0.6;
       color: inherit;
       font-size: 16px;
-      padding: var(--rel-spacing-space-2xs);
+      padding: var(--rel-spacing-2xs);
       line-height: 1;
-      border-radius: var(--rel-borders-radius-border-radius-100, 4px);
+      border-radius: var(--rel-border-radius-xs, 4px);
     }
 
     .rel-close:hover {
@@ -90,100 +125,130 @@ export class RelAlert extends LitElement {
       opacity: 1;
     }
 
-    /* COLORS — light mode */
+    /* COLORS — semantic status tokens carry both light and dark modes.
+       Base classes are the SUBTLE style (Figma Style=Subtle): tone light fill,
+       no border, tone-colored title. */
+    .rel-alert {
+      border: 1px solid transparent;
+    }
+
     .alert-neutral {
-      background: var(--rel-color-bg-primary);
-      color: var(--rel-color-text-primary);
+      background: var(--rel-bg-neutral);
+      color: var(--rel-text-default);
     }
 
     .alert-info {
-      background: var(--rel-background-info);
-      color: var(--rel-color-text-primary);
-      --rel-icon-info: var(--rel-colors-blue-tertiary);
+      background: var(--rel-bg-info-light);
+      color: var(--rel-text-default);
+    }
+
+    .alert-info .rel-message1,
+    .alert-info .rel-message2 {
+      color: var(--rel-text-info);
     }
 
     .alert-success {
-      background: var(--rel-background-success);
-      color: var(--rel-color-text-primary);
-      --rel-icon-success: var(--rel-success-surface-dark);
+      background: var(--rel-bg-success-light);
+      color: var(--rel-text-default);
+    }
+
+    .alert-success .rel-message1,
+    .alert-success .rel-message2 {
+      color: var(--rel-text-success);
     }
 
     .alert-warning {
-      background: var(--rel-colors-gold-light);
-      color: var(--rel-color-text-primary);
-      --rel-icon-warning: var(--rel-warning-surface-dark);
+      background: var(--rel-bg-warning-light);
+      color: var(--rel-text-default);
+    }
+
+    .alert-warning .rel-message1,
+    .alert-warning .rel-message2 {
+      color: var(--rel-text-warning);
     }
 
     .alert-error {
-      background: var(--rel-background-error-light);
-      color: var(--rel-error-surface-dark);
-      --rel-icon-error: var(--rel-error-surface-dark);
+      background: var(--rel-bg-danger-light);
+      color: var(--rel-text-danger);
     }
 
-    .alert-error .rel-close {
-      color: var(--rel-color-text-primary);
+    .alert-error .rel-message1,
+    .alert-error .rel-message2 {
+      color: var(--rel-text-danger);
     }
 
-    /* COLORS — dark mode */
-    :host-context([data-theme="dark"]) .rel-alert,
-    :host-context(.dark) .rel-alert {
-      background: var(--rel-color-bg-tertiary);
-      color: var(--rel-color-text-primary);
-      border: none;
+    /* Solid style (Figma Style=Solid; "filled" is the deprecated alias) */
+    :host([appearance="filled"]) .alert-neutral,
+    :host([appearance="solid"]) .alert-neutral {
+      background: var(--rel-bg-neutral-inverse-2);
+      color: var(--rel-text-inverse);
+    }
+
+    :host([appearance="filled"]) .alert-error,
+    :host([appearance="solid"]) .alert-error {
+      background: var(--rel-bg-danger);
+      color: var(--rel-text-static-light);
+    }
+
+    :host([appearance="filled"]) .alert-success,
+    :host([appearance="solid"]) .alert-success {
+      background: var(--rel-bg-success);
+      color: var(--rel-text-static-light);
+    }
+
+    :host([appearance="filled"]) .alert-warning,
+    :host([appearance="solid"]) .alert-warning {
+      background: var(--rel-bg-warning);
+      color: var(--rel-text-static-dark);
     }
 
-    :host-context([data-theme="dark"]) .rel-close,
-    :host-context(.dark) .rel-close {
-      color: var(--rel-color-text-primary);
+    :host([appearance="filled"]) .alert-info,
+    :host([appearance="solid"]) .alert-info {
+      background: var(--rel-bg-info);
+      color: var(--rel-text-static-light);
     }
 
-    :host-context([data-theme="dark"]) .alert-neutral,
-    :host-context(.dark) .alert-neutral {
-      border: 1px solid var(--rel-color-border-strong);
+    :host([appearance="filled"]) .rel-message1,
+    :host([appearance="filled"]) .rel-message2,
+    :host([appearance="filled"]) .rel-link,
+    :host([appearance="solid"]) .rel-message1,
+    :host([appearance="solid"]) .rel-message2,
+    :host([appearance="solid"]) .rel-link {
+      color: inherit;
     }
 
-    :host-context([data-theme="dark"]) .alert-info,
-    :host-context(.dark) .alert-info {
-      border: 1px solid var(--rel-colors-blue-tertiary);
-      --rel-icon-info: var(--rel-colors-blue-tertiary);
+    :host([appearance="filled"]) .rel-icon rel-icon,
+    :host([appearance="solid"]) .rel-icon rel-icon {
+      --rel-icon-color: currentColor;
     }
 
-    :host-context([data-theme="dark"]) .alert-info .rel-message2,
-    :host-context(.dark) .alert-info .rel-message2 {
-      color: var(--rel-colors-blue-tertiary);
+    /* Outline style (Figma Style=Outline): no fill, tone border, tone title */
+    :host([appearance="outline"]) .rel-alert {
+      background: transparent;
     }
 
-    :host-context([data-theme="dark"]) .alert-warning,
-    :host-context(.dark) .alert-warning {
-      border: 1px solid var(--rel-warning-surface-dark);
-      --rel-icon-warning: var(--rel-warning-surface-dark);
+    :host([appearance="outline"]) .alert-neutral {
+      border-color: var(--rel-border-default);
     }
 
-    :host-context([data-theme="dark"]) .alert-warning .rel-message2,
-    :host-context(.dark) .alert-warning .rel-message2 {
-      color: var(--rel-warning-surface-dark);
+    :host([appearance="outline"]) .alert-info {
+      border-color: var(--rel-border-info);
     }
 
-    :host-context([data-theme="dark"]) .alert-success,
-    :host-context(.dark) .alert-success {
-      border: 1px solid var(--rel-success-surface-dark);
-      --rel-icon-success: var(--rel-success-surface-dark);
+    :host([appearance="outline"]) .alert-success {
+      border-color: var(--rel-border-success);
     }
 
-    :host-context([data-theme="dark"]) .alert-success .rel-message2,
-    :host-context(.dark) .alert-success .rel-message2 {
-      color: var(--rel-success-surface-dark);
+    :host([appearance="outline"]) .alert-warning {
+      border-color: var(--rel-border-warning);
     }
 
-    :host-context([data-theme="dark"]) .alert-error,
-    :host-context(.dark) .alert-error {
-      border: 1px solid var(--rel-error-surface-dark);
-      --rel-icon-error: var(--rel-error-surface-dark);
+    :host([appearance="outline"]) .alert-error {
+      border-color: var(--rel-border-danger);
     }
 
-    :host-context([data-theme="dark"]) .alert-error .rel-message2,
-    :host-context(.dark) .alert-error .rel-message2 {
-      color: var(--rel-error-surface-dark);
+    .alert-error .rel-close {
+      color: var(--rel-text-default);
     }
   `;
 
@@ -198,106 +263,43 @@ export class RelAlert extends LitElement {
     );
   }
 
-  private get iconSvg() {
-    switch (this.type) {
-      case "info":
-        return html`
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="18"
-            height="18"
-            viewBox="0 0 18 18"
-            fill="none"
-          >
-            <path
-              d="M9 4.75C8.75917 4.75 8.55715 4.8316 8.39395 4.9948C8.23132 5.15743 8.15 5.35917 8.15 5.6C8.15 5.84083 8.23132 6.04285 8.39395 6.20605C8.55715 6.36868 8.75917 6.45 9 6.45C9.24083 6.45 9.44257 6.36868 9.6052 6.20605C9.7684 6.04285 9.85 5.84083 9.85 5.6C9.85 5.35917 9.7684 5.15743 9.6052 4.9948C9.44257 4.8316 9.24083 4.75 9 4.75ZM9.85 8.15L8.15 8.15L8.15 13.25L9.85 13.25L9.85 8.15ZM9 0.499999C10.1758 0.499999 11.2808 0.723266 12.315 1.1698C13.3492 1.61633 14.2488 2.22182 15.0138 2.98625C15.7788 3.75068 16.3842 4.65027 16.8302 5.685C17.2762 6.71973 17.4994 7.82473 17.5 9C17.5006 10.1753 17.2773 11.2803 16.8302 12.315C16.3842 13.3492 15.7787 14.2487 15.0137 15.0137C14.2487 15.7787 13.3492 16.3845 12.315 16.831C11.2808 17.2776 10.1758 17.5006 9 17.5C7.82417 17.4994 6.71917 17.2764 5.685 16.831C4.65083 16.3845 3.75125 15.7787 2.98625 15.0137C2.22125 14.2487 1.61577 13.3492 1.1698 12.315C0.723834 11.2808 0.500567 10.1758 0.500001 9C0.499434 7.82417 0.722701 6.71917 1.1698 5.685C1.61577 4.65083 2.22125 3.75125 2.98625 2.98625C3.75125 2.22125 4.65084 1.61577 5.685 1.1698C6.71917 0.723832 7.82417 0.500566 9 0.499999ZM9 2.2C7.10167 2.2 5.49375 2.85875 4.17625 4.17625C2.85875 5.49375 2.2 7.10167 2.2 9C2.2 10.8983 2.85875 12.5062 4.17625 13.8237C5.49375 15.1412 7.10167 15.8 9 15.8C10.8983 15.8 12.5062 15.1412 13.8237 13.8237C15.1412 12.5062 15.8 10.8983 15.8 9C15.8 7.10167 15.1413 5.49375 13.8238 4.17625C12.5063 2.85875 10.8983 2.2 9 2.2Z"
-              fill="var(--rel-icon-info)"
-            />
-          </svg>
-        `;
-      case "success":
-        return html`
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="18"
-            height="18"
-            viewBox="0 0 18 18"
-            fill="none"
-          >
-            <path
-              d="M7.81 12.91L13.8025 6.9175L12.6125 5.7275L7.81 10.53L5.3875 8.1075L4.1975 9.2975L7.81 12.91ZM9 17.5C7.82417 17.5 6.71917 17.2767 5.685 16.8302C4.65083 16.3837 3.75125 15.7782 2.98625 15.0138C2.22125 14.2493 1.61577 13.3497 1.1698 12.315C0.723834 11.2803 0.500568 10.1753 0.500001 9C0.499434 7.82473 0.722701 6.71973 1.1698 5.685C1.61577 4.65083 2.22125 3.75125 2.98625 2.98625C3.75125 2.22125 4.65083 1.61548 5.685 1.16895C6.71917 0.722418 7.82417 0.499434 9 0.500001C10.1758 0.500568 11.2808 0.723551 12.315 1.16895C13.3492 1.61548 14.2488 2.22125 15.0138 2.98625C15.7788 3.75125 16.3842 4.65083 16.8302 5.685C17.2762 6.71917 17.4994 7.82417 17.5 9C17.5006 10.1758 17.2773 11.2808 16.8302 12.315C16.3842 13.3492 15.7788 14.2488 15.0138 15.0138C14.2488 15.7788 13.3492 16.3842 12.315 16.8302C11.2808 17.2762 10.1758 17.4994 9 17.5ZM9 15.8C10.8983 15.8 12.5062 15.1412 13.8237 13.8237C15.1412 12.5062 15.8 10.8983 15.8 9C15.8 7.10167 15.1412 5.49375 13.8237 4.17625C12.5062 2.85875 10.8983 2.2 9 2.2C7.10167 2.2 5.49375 2.85875 4.17625 4.17625C2.85875 5.49375 2.2 7.10167 2.2 9C2.2 10.8983 2.85875 12.5062 4.17625 13.8237C5.49375 15.1412 7.10167 15.8 9 15.8Z"
-              fill="var(--rel-icon-success)"
-            />
-          </svg>
-        `;
-      case "warning":
-        return html`
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="14"
-            viewBox="0 0 16 14"
-            fill="none"
-          >
-            <path
-              d="M0 14L8 0L16 14H0ZM2.50909 12.5263H13.4909L8 2.94737L2.50909 12.5263ZM8 11.7895C8.20606 11.7895 8.37891 11.7187 8.51855 11.5773C8.6577 11.4363 8.72727 11.2614 8.72727 11.0526C8.72727 10.8439 8.6577 10.669 8.51855 10.528C8.37891 10.3865 8.20606 10.3158 8 10.3158C7.79394 10.3158 7.62133 10.3865 7.48218 10.528C7.34255 10.669 7.27273 10.8439 7.27273 11.0526C7.27273 11.2614 7.34255 11.4363 7.48218 11.5773C7.62133 11.7187 7.79394 11.7895 8 11.7895ZM7.27273 9.57895H8.72727V5.89474H7.27273V9.57895Z"
-              fill="var(--rel-icon-warning)"
-            />
-          </svg>
-        `;
-      case "error":
-        return html`
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="18"
-            height="18"
-            viewBox="0 0 18 18"
-            fill="none"
-          >
-            <path
-              d="M9 13.25C9.24083 13.25 9.44285 13.1684 9.60605 13.0052C9.76868 12.8426 9.85 12.6408 9.85 12.4C9.85 12.1592 9.76868 11.9571 9.60605 11.7939C9.44285 11.6313 9.24083 11.55 9 11.55C8.75917 11.55 8.55743 11.6313 8.3948 11.7939C8.2316 11.9571 8.15 12.1592 8.15 12.4C8.15 12.6408 8.2316 12.8426 8.3948 13.0052C8.55743 13.1684 8.75917 13.25 9 13.25ZM8.15 9.85H9.85V4.75H8.15V9.85ZM9 17.5C7.82417 17.5 6.71917 17.2767 5.685 16.8302C4.65083 16.3837 3.75125 15.7782 2.98625 15.0138C2.22125 14.2493 1.61577 13.3497 1.1698 12.315C0.723834 11.2803 0.500568 10.1753 0.500001 9C0.499434 7.82473 0.722701 6.71973 1.1698 5.685C1.61577 4.65083 2.22125 3.75125 2.98625 2.98625C3.75125 2.22125 4.65083 1.61548 5.685 1.16895C6.71917 0.722418 7.82417 0.499434 9 0.500001C10.1758 0.500568 11.2808 0.723551 12.315 1.16895C13.3492 1.61548 14.2488 2.22125 15.0138 2.98625C15.7788 3.75125 16.3842 4.65083 16.8302 5.685C17.2762 6.71917 17.4994 7.82417 17.5 9C17.5006 10.1758 17.2773 11.2808 16.8302 12.315C16.3842 13.3492 15.7788 14.2488 15.0138 15.0138C14.2488 15.7788 13.3492 16.3842 12.315 16.8302C11.2808 17.2762 10.1758 17.4994 9 17.5ZM9 15.8C10.8983 15.8 12.5062 15.1412 13.8237 13.8237C15.1412 12.5062 15.8 10.8983 15.8 9C15.8 7.10167 15.1412 5.49375 13.8237 4.17625C12.5062 2.85875 10.8983 2.2 9 2.2C7.10167 2.2 5.49375 2.85875 4.17625 4.17625C2.85875 5.49375 2.2 7.10167 2.2 9C2.2 10.8983 2.85875 12.5062 4.17625 13.8237C5.49375 15.1412 7.10167 15.8 9 15.8Z"
-              fill="var(--rel-icon-error)"
-            />
-          </svg>
-        `;
-      default:
-        return html`
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="18"
-            height="18"
-            viewBox="0 0 18 18"
-            fill="none"
-          >
-            <path
-              d="M9 4.75C8.75917 4.75 8.55715 4.8316 8.39395 4.9948C8.23132 5.15743 8.15 5.35917 8.15 5.6C8.15 5.84083 8.23132 6.04285 8.39395 6.20605C8.55715 6.36868 8.75917 6.45 9 6.45C9.24083 6.45 9.44257 6.36868 9.6052 6.20605C9.7684 6.04285 9.85 5.84083 9.85 5.6C9.85 5.35917 9.7684 5.15743 9.6052 4.9948C9.44257 4.8316 9.24083 4.75 9 4.75ZM9.85 8.15L8.15 8.15L8.15 13.25L9.85 13.25L9.85 8.15ZM9 0.499999C10.1758 0.499999 11.2808 0.723266 12.315 1.1698C13.3492 1.61633 14.2488 2.22182 15.0138 2.98625C15.7788 3.75068 16.3842 4.65027 16.8302 5.685C17.2762 6.71973 17.4994 7.82473 17.5 9C17.5006 10.1753 17.2773 11.2803 16.8302 12.315C16.3842 13.3492 15.7787 14.2487 15.0137 15.0137C14.2487 15.7787 13.3492 16.3845 12.315 16.831C11.2808 17.2776 10.1758 17.5006 9 17.5C7.82417 17.4994 6.71917 17.2764 5.685 16.831C4.65083 16.3845 3.75125 15.7787 2.98625 15.0137C2.22125 14.2487 1.61577 13.3492 1.1698 12.315C0.723834 11.2808 0.500567 10.1758 0.500001 9C0.499434 7.82417 0.722701 6.71917 1.1698 5.685C1.61577 4.65083 2.22125 3.75125 2.98625 2.98625C3.75125 2.22125 4.65084 1.61577 5.685 1.1698C6.71917 0.723832 7.82417 0.500566 9 0.499999ZM9 2.2C7.10167 2.2 5.49375 2.85875 4.17625 4.17625C2.85875 5.49375 2.2 7.10167 2.2 9C2.2 10.8983 2.85875 12.5062 4.17625 13.8237C5.49375 15.1412 7.10167 15.8 9 15.8C10.8983 15.8 12.5062 15.1412 13.8237 13.8237C15.1412 12.5062 15.8 10.8983 15.8 9C15.8 7.10167 15.1413 5.49375 13.8238 4.17625C12.5063 2.85875 10.8983 2.2 9 2.2Z"
-              fill="var(--rel-colors-black)"
-            />
-          </svg>
-        `;
-    }
+  /* Task 2: status icons standardised on <rel-icon> (size tier L = 20px icon
+     alongside body-lg text). Colour comes from the semantic tone. */
+  private get iconTemplate() {
+    const name =
+      this.type === "success" ? "check-circle"
+      : this.type === "warning" ? "alert-circle"
+      : this.type === "error" ? "error"
+      : "info";
+    const tone =
+      this.type === "success" ? "success"
+      : this.type === "warning" ? "warning"
+      : this.type === "error" ? "danger"
+      : this.type === "info" ? "info"
+      : "default";
+    return html`<rel-icon name="${name}" size="md" tone="${tone}"></rel-icon>`;
   }
 
   render() {
     return html`
-      <div class="rel-alert alert-${this.type}" role="alert">
-        <div class="rel-icon">${this.iconSvg}</div>
+      <div part="base" class="rel-alert alert-${this.type}" role="alert">
+        <div part="icon" class="rel-icon">${this.iconTemplate}</div>
 
-        <div class="rel-content">
-          <p class="rel-message1">${this.message1}</p>
+        <div part="content" class="rel-content">
+          <p part="label" class="rel-message1">${this.message1}</p>
 
           ${this.message2
-            ? html`<p class="rel-message2">${this.message2}</p>`
+            ? html`<p part="helper" class="rel-message2">${this.message2}</p>`
             : null}
           ${this.urlText && this.urlHref
-            ? html`<a class="rel-link" href=${this.urlHref}>
+            ? html`<a part="action" class="rel-link" href=${this.urlHref}>
                 ${this.urlText}
               </a>`
             : null}
         </div>
 
         ${this.dismissible
-          ? html`<button class="rel-close" @click=${this.dismissAlert} aria-label="Dismiss">
+          ? html`<button part="close-button" class="rel-close" @click=${this.dismissAlert} aria-label="Dismiss">
               ✕
             </button>`
           : null}

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

@@ -77,22 +77,22 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
+- `--rel-fonts-font-family` - Font family
 
 ### Font Tokens
-- `--rel-fontSizes-xl` - Large avatar text size
-- `--rel-fontSizes-lg` - Medium avatar text size
-- `--rel-fontSizes-md` - Small avatar text size
-- `--rel-fontSizes-xs` - Extra small avatar text size
-- `--rel-fontWeights-bold` - Text font weight
+- `--rel-headings-lg-font-size` - Large avatar text size
+- `--rel-body-xl-regular-font-size` - Medium avatar text size
+- `--rel-body-md-regular-font-size` - Small avatar text size
+- `--rel-body-xs-regular-font-size` - Extra small avatar text size
+- `--rel-fonts-weight-body-semibold` - Text font weight
 
 ### Color Tokens (by variant)
-- **fill** (default): `--rel-avatar-bg-fill` (default `--rel-colors-gray-disabled-text`), `--rel-avatar-color-fill` (default `#ffffff`)
-- **subtle**: `--rel-avatar-bg-subtle` (default `--rel-color-bg-tertiary`), `--rel-avatar-color-subtle` (default `--rel-color-text-heading`)
-- **outline**: `--rel-avatar-bg-outline` (default `--rel-color-bg-primary`), `--rel-avatar-border-outline` (default `--rel-color-border-default`), `--rel-avatar-color-outline` (default `--rel-color-text-heading`)
-- `--rel-borders-width-stroke-100` - Border width (all variants; `fill`/`subtle` use a transparent border to keep sizing consistent)
+- **fill** (default): `--rel-avatar-bg-fill` (default `--rel-text-disabled`), `--rel-avatar-color-fill` (default `#ffffff`)
+- **subtle**: `--rel-avatar-bg-subtle` (default `--rel-bg-neutral-elevated-1`), `--rel-avatar-color-subtle` (default `--rel-text-label`)
+- **outline**: `--rel-avatar-bg-outline` (default `--rel-bg-surface`), `--rel-avatar-border-outline` (default `--rel-border-default`), `--rel-avatar-color-outline` (default `--rel-text-label`)
+- `--rel-stroke-sm` - Border width (all variants; `fill`/`subtle` use a transparent border to keep sizing consistent)
 
-All of the above semantic tokens (`--rel-color-bg-*`, `--rel-color-text-heading`, `--rel-color-border-*`, `--rel-colors-gray-disabled-text`) have dark-mode overrides defined in `vars-v2.css` under `:root[data-theme="dark"]`, so all three variants automatically adapt to dark mode with no extra configuration.
+All of the above semantic tokens (`--rel-bg-*`, `--rel-text-label`, `--rel-border-*`, `--rel-text-disabled`) have dark-mode overrides defined in `vars.css` under `:root[data-theme="dark"]`, so all three variants automatically adapt to dark mode with no extra configuration.
 
 ## Accessibility
 - Image avatars include `alt` attribute for screen readers
@@ -107,10 +107,10 @@ All of the above semantic tokens (`--rel-color-bg-*`, `--rel-color-text-heading`
 
 ## Notes / Edge Cases
 - **Size variants**:
-  - **lg**: 40px × 40px, font-size: `--rel-fontSizes-xl`
-  - **md**: 32px × 32px, font-size: `--rel-fontSizes-lg`
-  - **sm**: 24px × 24px, font-size: `--rel-fontSizes-md`
-  - **xs**: 18px × 18px, font-size: `--rel-fontSizes-xs`
+  - **lg**: 40px × 40px, font-size: `--rel-headings-lg-font-size`
+  - **md**: 32px × 32px, font-size: `--rel-body-xl-regular-font-size`
+  - **sm**: 24px × 24px, font-size: `--rel-body-md-regular-font-size`
+  - **xs**: 18px × 18px, font-size: `--rel-body-xs-regular-font-size`
 
 - **Display types**:
   - **image**: Displays an `<img>` with `src` and `alt`

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

@@ -1,4 +1,3 @@
-import "../../styles/vars-v2.css";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -21,8 +20,9 @@ export class RelAvatar extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: inline-flex;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fonts-font-family);
     }
 
     .avatar {
@@ -32,8 +32,10 @@ export class RelAvatar extends LitElement {
       border-radius: 50%;
       overflow: hidden;
       box-sizing: border-box;
-      border: var(--rel-borders-width-stroke-100, 1px) solid transparent;
-      font-weight: var(--rel-fontWeights-semibold);
+      border: var(--rel-stroke-sm, 1px) solid transparent;
+      /* every avatar size role is a *-semibold role, so the base weight binds
+         one of them rather than the underlying primitive (per conventions §1) */
+      font-weight: var(--rel-body-sm-semibold-font-weight);
       user-select: none;
       text-transform: uppercase;
     }
@@ -41,45 +43,62 @@ export class RelAvatar extends LitElement {
     /* ── Variants ─────────────────────────────────────────────── */
 
     :host([variant="fill"]) .avatar {
-      background-color: var(--rel-avatar-bg-fill, #0b0b0b);
-      color: var(--rel-avatar-color-fill, #ffffff);
+      background-color: var(--rel-avatar-bg-fill, var(--rel-bg-neutral-inverse-2));
+      color: var(--rel-avatar-color-fill, var(--rel-text-inverse));
     }
 
     :host([variant="subtle"]) .avatar {
-      background-color: var(--rel-avatar-bg-subtle, #f5f5f5);
-      color: var(--rel-avatar-color-subtle, #0b0b0b);
+      background-color: var(--rel-avatar-bg-subtle, var(--rel-bg-neutral-elevated-1));
+      color: var(--rel-avatar-color-subtle, var(--rel-text-default));
     }
 
     :host([variant="outline"]) .avatar {
       background-color: transparent;
-      border-color: var(--rel-avatar-border-outline, var(--rel-color-border-default));
-      color: var(--rel-avatar-color-outline, #0b0b0b);
+      border-color: var(--rel-avatar-border-outline, var(--rel-border-default));
+      color: var(--rel-avatar-color-outline, var(--rel-text-default));
     }
 
     /* ── Sizes ────────────────────────────────────────────────── */
 
     .avatar-lg {
       width: 40px;
-      height: 40px;
-      font-size: var(--rel-fontSizes-lg); /* 20px */
+      height: 40px; /* 20px */
+      font-family: var(--rel-body-xl-semibold-font-family);
+      font-weight: var(--rel-body-xl-semibold-font-weight);
+      font-size: var(--rel-body-xl-semibold-font-size);
+      line-height: var(--rel-body-xl-semibold-line-height);
+      letter-spacing: var(--rel-body-xl-semibold-letter-spacing);
     }
 
     .avatar-md {
+      /* Figma: body-lg-semibold family+weight on body-lg-regular metrics */
+      font-weight: var(--rel-body-lg-semibold-font-weight);
       width: 32px;
-      height: 32px;
-      font-size: 16px;
+      height: 32px; /* 16px */
+      font-family: var(--rel-body-lg-semibold-font-family);
+      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);
     }
 
     .avatar-sm {
       width: 24px;
-      height: 24px;
-      font-size: var(--rel-fontSizes-sm); /* 12px */
+      height: 24px; /* 12px */
+      font-family: var(--rel-body-sm-regular-font-family);
+      font-weight: var(--rel-body-sm-semibold-font-weight);
+      font-size: var(--rel-body-sm-semibold-font-size);
+      line-height: var(--rel-body-sm-semibold-line-height);
+      letter-spacing: var(--rel-body-sm-semibold-letter-spacing);
     }
 
     .avatar-xs {
       width: 20px;
-      height: 20px;
-      font-size: var(--rel-fontSizes-xs); /* 10px */
+      height: 20px; /* 10px */
+      font-family: var(--rel-body-xs-regular-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);
     }
 
     /* ── Image ────────────────────────────────────────────────── */
@@ -88,6 +107,7 @@ export class RelAvatar extends LitElement {
       width: 100%;
       height: 100%;
       object-fit: cover;
+      background: var(--rel-bg-neutral);
     }
 
     /* ── Icon slot ────────────────────────────────────────────── */
@@ -106,32 +126,16 @@ export class RelAvatar extends LitElement {
       height: 50%;
     }
 
-    /* ── Dark mode ────────────────────────────────────────────────
-       :host() can never be preceded by a combinator inside a shadow-tree
-       stylesheet, so ":host-context(dark) :host([variant=...]) .avatar"
-       (the previous approach) is invalid and silently matches nothing.
-       Instead, redefine the same custom properties the variant rules
-       above already read via var(--token, fallback) — a plain
-       :host-context() selector with no compounding, guaranteed valid. ── */
-
-    :host-context([data-theme="dark"]) {
-      --rel-avatar-bg-fill: #ffffff;
-      --rel-avatar-color-fill: #0b0b0b;
-      --rel-avatar-bg-subtle: #2b2b2b;
-      --rel-avatar-color-subtle: #f5f5f5;
-      --rel-avatar-border-outline: #525252;
-      --rel-avatar-color-outline: #f5f5f5;
-    }
   `;
 
   render() {
     return html`
-      <div class="avatar avatar-${this.size}" style=${[this.bg ? `background-color:${this.bg}` : "", this.color ? `color:${this.color}` : ""].filter(Boolean).join(";")}>
+      <div part="base" class="avatar avatar-${this.size}" style=${[this.bg ? `background-color:${this.bg}` : "", this.color ? `color:${this.color}` : ""].filter(Boolean).join(";")}>
         ${this.type === "image" && this.src
-          ? html`<img src=${this.src} alt=${this.alt} />`
+          ? html`<img part="icon" src=${this.src} alt=${this.alt} />`
           : this.type === "text"
-          ? html`<span>${this.text}</span>`
-          : html`<span class="icon-slot"><slot></slot></span>`}
+          ? html`<span part="label">${this.text}</span>`
+          : html`<span part="icon" class="icon-slot"><slot></slot></span>`}
       </div>
     `;
   }