@reliability-design/web 1.1.1 → 1.3.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/README.md

@@ -17,6 +17,9 @@ A compact chip component for displaying tags, labels, or selected options. Suppo
 <!-- Outline variant -->
 <rel-chip label="Outline Style" tone="blue" outline></rel-chip>
 
+<!-- Small size variant -->
+<rel-chip label="Small" size="sm" tone="blue"></rel-chip>
+
 <!-- With avatar -->
 <rel-chip id="avatarChip" label="John Doe" avatar="./user.jpg"></rel-chip>
 
@@ -43,6 +46,7 @@ A compact chip component for displaying tags, labels, or selected options. Suppo
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `label` | `string` | `"Label"` | Text displayed on the chip |
+| `size` (reflected) | `"sm" \| "md"` | `"md"` | Chip size variant |
 | `tone` | `"default" \| "blue" \| "yellow" \| "red" \| "green"` | `"default"` | Color tone variant |
 | `leadingIcon` | `string` | - | SVG or HTML string for leading icon |
 | `trailingIcon` | `string` | - | SVG or HTML string for trailing icon |
@@ -103,6 +107,9 @@ None exposed.
 - Remove button focus: 2px white outline with 1px offset
 
 ## Notes / Edge Cases
+- **Size variants**:
+  - **md** (default): `--rel-fontSizes-md` text, `--rel-spacing-space-2xs`/`--rel-spacing-space-xs` padding, 20px × 20px avatar, 16px × 16px icons
+  - **sm**: `--rel-fontSizes-sm` text, `--rel-spacing-space-3xs`/`--rel-spacing-space-2xs` padding, 16px × 16px avatar, 12px × 12px icons
 - Icons (`leadingIcon`, `trailingIcon`) must be passed as raw HTML/SVG strings via JavaScript (see examples)
 - Icons are injected using `renderIcon()` which creates a template element and clones the content
 - Avatar images are 20px × 20px circular (`border-radius: 50%`, `object-fit: cover`)