@reliability-design/web 1.1.1 → 1.2.0

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

@@ -47,12 +47,13 @@ export class RelCheckbox extends LitElement {
       pointer-events: none;
     }
 
+    /* Unchecked — transparent fill, gray border */
     .box {
       width: 18px;
       height: 18px;
       border-radius: 4px;
-      border: 2px solid var(--rel-text-heading, #2b2b2b);
-      background: var(--rel-colors-white, #fff);
+      border: 2px solid var(--rel-gray-text-primary);
+      background: transparent;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -61,7 +62,7 @@ export class RelCheckbox extends LitElement {
     }
 
     input:focus-visible + .box {
-      outline: 2px solid var(--rel-border-info, #0091ea);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: 2px;
     }
 
@@ -71,36 +72,43 @@ export class RelCheckbox extends LitElement {
       display: none;
     }
 
-    .checked .box,
-    .indeterminate .box {
-      background: var(--rel-text-heading, #2b2b2b);
-      border-color: var(--rel-text-heading, #2b2b2b);
+    /* Checked — filled box, transparent checkmark (bg shows through) */
+    .checked .box {
+      background: var(--rel-gray-text-primary);
+      border-color: var(--rel-gray-text-primary);
     }
 
     .checked .check-icon {
       display: block;
+      fill: #ffffff;
     }
 
+    /* Indeterminate — transparent fill, dash inherits border color */
     .indeterminate .indeterminate-icon {
       display: block;
+      fill: var(--rel-gray-text-primary);
     }
 
+    /* Error unchecked — transparent fill, error border */
     .error .box {
-      border-color: var(--rel-colors-red-primary);
+      border-color: var(--rel-error-surface-default);
     }
 
-    .error.checked .box,
-    .error.indeterminate .box {
-      background: var(--rel-colors-red-primary);
-      border-color: var(--rel-colors-red-primary);
+    /* Error checked — error fill, transparent checkmark */
+    .error.checked .box {
+      background: var(--rel-error-surface-default);
+      border-color: var(--rel-error-surface-default);
     }
 
-    /* Pin checkmark/dash to white on red background — correct in both themes */
-    .error.checked svg,
-    .error.indeterminate svg {
+    .error.checked .check-icon {
       fill: #ffffff;
     }
 
+    /* Error indeterminate — transparent fill, dash is error color */
+    .error.indeterminate .indeterminate-icon {
+      fill: var(--rel-error-surface-default);
+    }
+
     .disabled {
       opacity: 0.55;
       cursor: not-allowed;
@@ -114,10 +122,54 @@ export class RelCheckbox extends LitElement {
       pointer-events: none;
     }
 
+    .disabled .label,
+    .disabled .text {
+      color: var(--rel-color-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);
+    }
+
+    :host-context([data-theme="dark"]) .checked .box {
+      background: var(--rel-gray-text-primary);
+      border-color: var(--rel-gray-text-primary);
+    }
+
+    :host-context([data-theme="dark"]) .checked .check-icon {
+      fill: var(--rel-color-bg-primary);
+    }
+
+    :host-context([data-theme="dark"]) .indeterminate .indeterminate-icon {
+      fill: var(--rel-gray-text-primary);
+    }
+
+    :host-context([data-theme="dark"]) .error .box {
+      border-color: var(--rel-error-surface-default);
+    }
+
+    :host-context([data-theme="dark"]) .error.checked .box {
+      background: var(--rel-error-surface-default);
+      border-color: var(--rel-error-surface-default);
+    }
+
+    :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);
+    }
+
+    :host-context([data-theme="dark"]) .label {
+      color: var(--rel-gray-text-primary);
+    }
+
     .label {
       font-size: var(--rel-fontSizes-md, 14px);
       font-weight: var(--rel-fontWeights-medium, 500);
-      color: var(--rel-text-primary, #333);
+      color: var(--rel-gray-text-primary);
     }
 
     .text {

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

@@ -1,244 +1,291 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-@customElement("rel-chip")
-export class RelChip extends LitElement {
-  @property({ type: String }) label = "Label";
-
-  @property({ type: String })
-  tone: "default" | "blue" | "yellow" | "red" | "green" = "default";
-
-  @property({ type: String }) leadingIcon?: string;
-  @property({ type: String }) trailingIcon?: string;
-  @property({ type: String }) avatar?: string;
-
-  @property({ type: Boolean }) removable = false;
-  @property({ type: Boolean }) outline = false;
-
-  /** IMPORTANT: reflected so CSS + Angular can see it */
-  @property({ type: Boolean, reflect: true }) removed = false;
-
-  static styles = css`
-    :host {
-      display: inline-block;
-    }
-
-    :host([removed]) {
-      display: none;
-    }
-
-    .chip {
-      display: inline-flex;
-      align-items: center;
-      font-family: var(--rel-fontFamilies-primary);
-      font-size: var(--rel-fontSizes-md);
-      font-weight: var(--rel-fontWeights-medium);
-      border-radius: var(--rel-borders-radius-border-radius-500);
-      padding: var(--rel-spacing-space-2xs) var(--rel-spacing-space-sm);
-      gap: var(--rel-spacing-space-2xs);
-      cursor: pointer;
-      border: var(--rel-borders-width-stroke-100) solid transparent;
-      user-select: none;
-      white-space: nowrap;
-      background: transparent;
-    }
-
-    .chip:hover {
-      filter: brightness(0.92);
-      box-shadow: var(--rel-shadows-shadow-100);
-    }
-
-    .chip:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary, #0091ea);
-      outline-offset: 2px;
-    }
-
-    /* TONES */
-    .chip-default {
-      background: var(--rel-colors-gray-border);
-      color: #000000;
-    }
-
-    .chip-blue {
-      background: var(--rel-colors-blue-tertiary);
-      color: #ffffff;
-    }
-
-    .chip-yellow {
-      background: var(--rel-colors-yellow-pending);
-      color: #000000;
-    }
-
-    .chip-red {
-      background: var(--rel-colors-red-secondary);
-      color: #ffffff;
-    }
-
-    .chip-green {
-      background: var(--rel-colors-green-success);
-      color: #ffffff;
-    }
-
-    /* OUTLINE */
-    .chip-outline {
-      background: transparent;
-      border-color: var(--rel-color-border-default);
-    }
-
-    .chip-blue.chip-outline {
-      color: #000000;
-      background: transparent;
-      border-color: #0059F4;
-    }
-
-    .chip-red.chip-outline {
-      color: #9C1E33;
-      background: transparent;
-      border-color: #9C1E33;
-    }
-
-    .chip-green.chip-outline {
-      color: #00A86B;
-      background: transparent;
-      border-color: #00A86B;
-    }
-
-    .chip-yellow.chip-outline {
-      color: #92400E;
-      background: transparent;
-      border-color: #F2915C;
-    }
-
-    .chip-avatar {
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-      object-fit: cover;
-    }
-
-    .chip-icon {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 14px;
-      height: 14px;
-      flex-shrink: 0;
-    }
-
-    .chip-icon * {
-      width: 100%;
-      height: 100%;
-    }
-
-    .chip-icon ::slotted(svg),
-    .chip-icon svg {
-      width: 16px;
-      height: 16px;
-      fill: currentColor;
-    }
-
-    .chip-remove {
-      margin-left: var(--rel-spacing-space-3xs);
-      cursor: pointer;
-      opacity: 0.7;
-      background: none;
-      border: none;
-      color: inherit;
-      font: inherit;
-      padding: 0;
-      line-height: 1;
-    }
-
-    .chip-remove:hover {
-      opacity: 1;
-    }
-
-    .chip-remove:focus-visible {
-      outline: 2px solid var(--rel-colors-white, #fff);
-      outline-offset: 1px;
-      border-radius: 2px;
-    }
-
-    /* Dark mode overrides */
-    :host-context([data-theme="dark"]) .chip-default,
-    :host-context(.dark) .chip-default {
-      color: #ffffff;
-      background: var(--rel-color-bg-secondary);
-    }
-
-    :host-context([data-theme="dark"]) .chip-default.chip-outline,
-    :host-context(.dark) .chip-default.chip-outline {
-      color: #ffffff;
-      border-color: #ffffff;
-    }
-
-    :host-context([data-theme="dark"]) .chip-outline,
-    :host-context(.dark) .chip-outline {
-      color: #ffffff;
-      border-color: currentColor;
-    }
-  `;
-
-  private get classes() {
-    return [
-      "chip",
-      `chip-${this.tone}`,
-      this.outline ? "chip-outline" : "",
-    ].join(" ");
-  }
-
-  private handleRemove(event: Event) {
-    event.stopPropagation();
-    this.removed = true;
-
-    this.dispatchEvent(
-      new CustomEvent("removed", {
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  render() {
-    return html`
-      <span
-        class="${this.classes}"
-        role="button"
-        tabindex="0"
-        aria-label="${this.label}"
-      >
-        ${this.avatar
-          ? html`<img src=${this.avatar} alt="" class="chip-avatar" />`
-          : null}
-        ${this.leadingIcon
-          ? html`<span class="chip-icon">
-              ${this.renderIcon(this.leadingIcon)}
-            </span>`
-          : null}
-
-        <span class="chip-label">${this.label}</span>
-
-        ${this.trailingIcon
-          ? html`<span class="chip-icon">
-              ${this.renderIcon(this.trailingIcon)}
-            </span>`
-          : null}
-        ${this.removable
-          ? html`<button
-              class="chip-remove"
-              aria-label="Remove ${this.label}"
-              @click=${this.handleRemove}
-            >
-              ✕
-            </button>`
-          : null}
-      </span>
-    `;
-  }
-
-  private renderIcon(iconString: string) {
-    const template = document.createElement("template");
-    template.innerHTML = iconString.trim();
-    return template.content.cloneNode(true);
-  }
-}
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "../rel-avatar/rel-avatar.js";
+
+@customElement("rel-chip")
+export class RelChip extends LitElement {
+  @property({ type: String }) label = "Label";
+
+  // "yellow" renamed to "orange" — existing serialized "yellow" values will fall through to chip-yellow class (no match) and render unstyled
+  @property({ type: String })
+  tone: "default" | "blue" | "orange" | "red" | "green" = "default";
+
+  @property({ type: String }) leadingIcon?: string;
+  @property({ type: String }) trailingIcon?: string;
+  /** Initials text for the avatar (e.g. "JD"). Mutually exclusive with leadingIcon. */
+  @property({ type: String }) avatar?: string;
+
+  @property({ type: Boolean }) removable = false;
+
+  /** IMPORTANT: reflected so CSS + Angular can see it */
+  @property({ type: Boolean, reflect: true }) removed = false;
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      width: auto;
+      flex: 0 0 auto;
+    }
+
+    :host([removed]) {
+      display: none;
+    }
+
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      font-family: var(--rel-fontFamilies-primary);
+      font-size: var(--rel-fontSizes-md);
+      font-weight: var(--rel-fontWeights-medium);
+      border-radius: var(--rel-borders-radius-border-radius-100);
+      padding: var(--rel-spacing-space-2xs) var(--rel-spacing-space-xs);
+      gap: var(--rel-spacing-space-2xs);
+      cursor: pointer;
+      border: var(--rel-borders-width-stroke-100) solid transparent;
+      user-select: none;
+      white-space: nowrap;
+      background: transparent;
+    }
+
+    .chip:hover {
+      filter: brightness(0.88);
+      box-shadow: var(--rel-shadows-shadow-100);
+    }
+
+    .chip:focus-visible {
+      outline: 2px solid var(--rel-color-border-focus);
+      outline-offset: 2px;
+    }
+
+    .chip:active {
+      filter: brightness(0.80);
+      box-shadow: var(--rel-shadows-shadow-200);
+    }
+
+    /* TONES — light (default) */
+    /* NOTE: #717171 has no exact vars-v2 token; nearest candidates are
+       --rel-colors-gray-toast-bg (#404040) and --rel-colors-gray-divider (#BDBDBD) */
+    .chip-default {
+      background: #717171;
+      color: var(--rel-colors-white);
+    }
+
+    .chip-blue {
+      background: var(--rel-colors-blue-tertiary);
+      color: var(--rel-colors-white);
+    }
+
+    .chip-orange {
+      background: var(--rel-colors-yellow-pending);
+      color: var(--rel-colors-white);
+    }
+
+    .chip-red {
+      background: var(--rel-colors-red-primary);
+      color: var(--rel-colors-white);
+    }
+
+    .chip-green {
+      background: var(--rel-colors-green-tertiary);
+      color: var(--rel-colors-white);
+    }
+
+    /* AVATAR — light mode (all tones)
+       rel-avatar uses background-color: var(--rel-colors-gray-disabled-text).
+       Overriding that custom property here pins avatar bg to white across all tones.
+       NOTE: rel-avatar hardcodes color: #ffffff — text color (#000000) cannot be
+       overridden from outside the shadow DOM without ::part() or a custom property
+       in rel-avatar itself. */
+    .chip rel-avatar {
+      display: inline-flex;
+      width: 20px !important;
+      height: 20px !important;
+      flex-shrink: 0;
+      font-size: 10px;
+    }
+
+    .chip-default rel-avatar,
+    .chip-blue rel-avatar,
+    .chip-orange rel-avatar,
+    .chip-red rel-avatar,
+    .chip-green rel-avatar {
+      --rel-colors-gray-disabled-text: #ffffff;
+      --rel-avatar-color: #000000;
+    }
+
+    .chip-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+    }
+
+    .chip-icon * {
+      width: 100%;
+      height: 100%;
+    }
+
+    .chip-icon ::slotted(svg),
+    .chip-icon svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    .chip-remove {
+      margin-left: var(--rel-spacing-space-3xs);
+      cursor: pointer;
+      opacity: 0.7;
+      background: none;
+      border: none;
+      color: inherit;
+      font: inherit;
+      padding: 0;
+      line-height: 1;
+    }
+
+    .chip-remove:hover {
+      opacity: 1;
+    }
+
+    .chip-remove:focus-visible {
+      outline: 2px solid var(--rel-colors-white);
+      outline-offset: 1px;
+      border-radius: 2px;
+    }
+
+    /* DARK THEME */
+    /* NOTE: #717171 (chip-default dark color) has no exact vars-v2 token        */
+    /* NOTE: #FFFBF5 (chip-orange dark bg) has no exact vars-v2 token;
+       nearest is --rel-colors-gray-light (#FAFAFA)                              */
+
+    /* Reinforce layout — external dark-mode stylesheets can override display/width on the host */
+    :host-context([data-theme="dark"]) .chip {
+      display: inline-flex;
+      width: auto;
+    }
+
+    :host-context([data-theme="dark"]) .chip-default {
+      /* --rel-colors-gray-screen-bg flips to #262626 in dark — hardcoded to preserve #EEEEEE */
+      background: #EEEEEE;
+      color: #717171;
+    }
+
+    :host-context([data-theme="dark"]) .chip-blue {
+      /* --rel-colors-blue-bg flips to #0f1e2c in dark mode — hardcoded to preserve #E1F2FF */
+      background: #E1F2FF;
+      color: var(--rel-colors-blue-tertiary);
+    }
+
+    :host-context([data-theme="dark"]) .chip-orange {
+      background: #FFFBF5;
+      color: var(--rel-colors-yellow-pending);
+    }
+
+    :host-context([data-theme="dark"]) .chip-red {
+      background: var(--rel-colors-red-light);
+      color: var(--rel-colors-red-primary);
+    }
+
+    :host-context([data-theme="dark"]) .chip-green {
+      background: var(--rel-colors-green-bg-light);
+      color: var(--rel-colors-green-tertiary);
+    }
+
+    /* AVATAR — dark mode (per tone: bg = light fill color, text = white) */
+    :host-context([data-theme="dark"]) .chip-default rel-avatar {
+      --rel-colors-gray-disabled-text: #717171;
+      --rel-avatar-color: #ffffff;
+    }
+
+    :host-context([data-theme="dark"]) .chip-blue rel-avatar {
+      --rel-colors-gray-disabled-text: #0059F4;
+      --rel-avatar-color: #ffffff;
+    }
+
+    :host-context([data-theme="dark"]) .chip-orange rel-avatar {
+      --rel-colors-gray-disabled-text: #FFBF43;
+      --rel-avatar-color: #ffffff;
+    }
+
+    :host-context([data-theme="dark"]) .chip-red rel-avatar {
+      --rel-colors-gray-disabled-text: #CC0000;
+      --rel-avatar-color: #ffffff;
+    }
+
+    :host-context([data-theme="dark"]) .chip-green rel-avatar {
+      --rel-colors-gray-disabled-text: #00A86B;
+      --rel-avatar-color: #ffffff;
+    }
+  `;
+
+  private get classes() {
+    return ["chip", `chip-${this.tone}`].join(" ");
+  }
+
+  private handleRemove(event: Event) {
+    event.stopPropagation();
+    this.removed = true;
+
+    this.dispatchEvent(
+      new CustomEvent("removed", {
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  render() {
+    const showAvatar = !!this.avatar;
+    const showLeadingIcon = !showAvatar && !!this.leadingIcon;
+
+    if (this.avatar && this.leadingIcon) {
+      console.warn(
+        "[rel-chip] leadingIcon and avatar are mutually exclusive. avatar takes precedence."
+      );
+    }
+
+    return html`
+      <span
+        class="${this.classes}"
+        role="button"
+        tabindex="0"
+        aria-label="${this.label}"
+      >
+        ${showAvatar
+          ? html`<rel-avatar type="text" text=${this.avatar} size="xs"></rel-avatar>`
+          : null}
+        ${showLeadingIcon
+          ? html`<span class="chip-icon">
+              ${this.renderIcon(this.leadingIcon!)}
+            </span>`
+          : null}
+
+        <span class="chip-label">${this.label}</span>
+
+        ${this.trailingIcon
+          ? html`<span class="chip-icon">
+              ${this.renderIcon(this.trailingIcon)}
+            </span>`
+          : null}
+        ${this.removable
+          ? html`<button
+              class="chip-remove"
+              aria-label="Remove ${this.label}"
+              @click=${this.handleRemove}
+            >
+              ✕
+            </button>`
+          : null}
+      </span>
+    `;
+  }
+
+  private renderIcon(iconString: string) {
+    const template = document.createElement("template");
+    template.innerHTML = iconString.trim();
+    return template.content.cloneNode(true);
+  }
+}