@cdevhub/ngx-tw 0.5.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdevhub/ngx-tw",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Angular component library for Tailwind CSS v4 — accessible, signal-based, built on Angular CDK.",
   "keywords": [
     "angular",
@@ -97,10 +97,18 @@
       "types": "./types/cdevhub-ngx-tw-combobox.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-combobox.mjs"
     },
+    "./combobox/testing": {
+      "types": "./types/cdevhub-ngx-tw-combobox-testing.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-combobox-testing.mjs"
+    },
     "./command-palette": {
       "types": "./types/cdevhub-ngx-tw-command-palette.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-command-palette.mjs"
     },
+    "./command-palette/testing": {
+      "types": "./types/cdevhub-ngx-tw-command-palette-testing.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-command-palette-testing.mjs"
+    },
     "./core": {
       "types": "./types/cdevhub-ngx-tw-core.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-core.mjs"
@@ -109,14 +117,26 @@
       "types": "./types/cdevhub-ngx-tw-date-picker.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-date-picker.mjs"
     },
+    "./date-picker/testing": {
+      "types": "./types/cdevhub-ngx-tw-date-picker-testing.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-date-picker-testing.mjs"
+    },
     "./date-range-picker": {
       "types": "./types/cdevhub-ngx-tw-date-range-picker.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-date-range-picker.mjs"
     },
+    "./date-range-picker/testing": {
+      "types": "./types/cdevhub-ngx-tw-date-range-picker-testing.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-date-range-picker-testing.mjs"
+    },
     "./dialog": {
       "types": "./types/cdevhub-ngx-tw-dialog.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-dialog.mjs"
     },
+    "./dialog/testing": {
+      "types": "./types/cdevhub-ngx-tw-dialog-testing.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-dialog-testing.mjs"
+    },
     "./empty-state": {
       "types": "./types/cdevhub-ngx-tw-empty-state.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-empty-state.mjs"
@@ -125,6 +145,10 @@
       "types": "./types/cdevhub-ngx-tw-file-upload.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-file-upload.mjs"
     },
+    "./file-upload/testing": {
+      "types": "./types/cdevhub-ngx-tw-file-upload-testing.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-file-upload-testing.mjs"
+    },
     "./flip-card": {
       "types": "./types/cdevhub-ngx-tw-flip-card.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-flip-card.mjs"
@@ -153,6 +177,10 @@
       "types": "./types/cdevhub-ngx-tw-menu.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-menu.mjs"
     },
+    "./menu/testing": {
+      "types": "./types/cdevhub-ngx-tw-menu-testing.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-menu-testing.mjs"
+    },
     "./number-input": {
       "types": "./types/cdevhub-ngx-tw-number-input.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-number-input.mjs"
@@ -181,6 +209,10 @@
       "types": "./types/cdevhub-ngx-tw-select.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-select.mjs"
     },
+    "./select/testing": {
+      "types": "./types/cdevhub-ngx-tw-select-testing.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-select-testing.mjs"
+    },
     "./separator": {
       "types": "./types/cdevhub-ngx-tw-separator.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-separator.mjs"
@@ -189,6 +221,10 @@
       "types": "./types/cdevhub-ngx-tw-sheet.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-sheet.mjs"
     },
+    "./sheet/testing": {
+      "types": "./types/cdevhub-ngx-tw-sheet-testing.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-sheet-testing.mjs"
+    },
     "./skeleton": {
       "types": "./types/cdevhub-ngx-tw-skeleton.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-skeleton.mjs"
@@ -237,6 +273,10 @@
       "types": "./types/cdevhub-ngx-tw-tags-input.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-tags-input.mjs"
     },
+    "./tags-input/testing": {
+      "types": "./types/cdevhub-ngx-tw-tags-input-testing.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-tags-input-testing.mjs"
+    },
     "./textarea": {
       "types": "./types/cdevhub-ngx-tw-textarea.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-textarea.mjs"
@@ -249,6 +289,10 @@
       "types": "./types/cdevhub-ngx-tw-time-picker.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-time-picker.mjs"
     },
+    "./time-picker/testing": {
+      "types": "./types/cdevhub-ngx-tw-time-picker-testing.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-time-picker-testing.mjs"
+    },
     "./timeline": {
       "types": "./types/cdevhub-ngx-tw-timeline.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-timeline.mjs"
@@ -265,6 +309,10 @@
       "types": "./types/cdevhub-ngx-tw-transfer.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-transfer.mjs"
     },
+    "./transfer/testing": {
+      "types": "./types/cdevhub-ngx-tw-transfer-testing.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-transfer-testing.mjs"
+    },
     "./tree": {
       "types": "./types/cdevhub-ngx-tw-tree.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-tree.mjs"
@@ -274,8 +322,21 @@
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",
     "@angular/cdk": "^22.0.0",
+    "@angular/forms": "^22.0.0",
+    "rxjs": "^6.5.3 || ^7.4.0",
     "tailwindcss": "^4.0.0",
-    "tailwind-variants": "^0.3.0"
+    "tailwind-variants": "^0.3.0",
+    "tailwind-merge": "^2.5.4",
+    "luxon": "^3.0.0",
+    "lucide": "^1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "luxon": {
+      "optional": true
+    },
+    "lucide": {
+      "optional": true
+    }
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/theme/_base.css

@@ -1,7 +1,20 @@
+/* `color-scheme` drives the UA's own chrome — scrollbars, native form
+   controls, the canvas behind the page. It inherits, so it has to be restated
+   at every theme boundary or a themed subtree keeps its ancestor's native
+   rendering: a `[twTheme]="'light'"` preview pane inside a dark page would
+   otherwise show dark scrollbars and dark `<select>` popups. The light and
+   high-contrast rules below are no-ops at the root (`:root` already resolves
+   `light` there) and only matter for subtrees. High-contrast is light-based —
+   see `_high-contrast.css`. */
 :root {
   color-scheme: light;
 }
 
+[data-theme="light"],
+[data-theme="high-contrast"] {
+  color-scheme: light;
+}
+
 [data-theme="dark"] {
   color-scheme: dark;
 }

package/theme/_dark.css

@@ -2,10 +2,21 @@
    Two activation paths, identical body:
    1. `[data-theme="dark"]` — explicit opt-in. Always wins.
    2. `@media (prefers-color-scheme: dark)` against a root that has NOT been
-      explicitly tagged with `data-theme="light"` or `data-theme="high-contrast"`.
+      explicitly tagged with `data-theme="light"`, `data-theme="high-contrast"`
+      or `data-theme="high-contrast-dark"`.
       This gives pre-hydration screens, SSG snapshots, and consumers that skip
       `provideTheme()` automatic OS-driven dark mode without JavaScript.
 
+      Each `:not()` in that branch is doing real work, not defensive padding.
+      The branch is `:root:not(…):not(…):not(…)` — specificity 0,4,0 — while
+      every scheme's own block is a bare `[data-theme=…]` at 0,1,0. So on a
+      dark-preferring OS this rule beats all three of them regardless of import
+      order, and the only way an explicitly-tagged root can keep its own scheme
+      is to be excluded here by name. `high-contrast-dark` was added to that
+      list when `_high-contrast-dark.css` landed; dropping it does not break
+      loudly, it silently serves plain dark to exactly the users that scheme
+      exists for.
+
    The body is duplicated rather than aliased because CSS does not allow a
    single rule body to be applied via both a selector and a media query. Keep
    the two blocks in lock-step. */
@@ -23,10 +34,13 @@
   --color-fg-muted: var(--color-gray-300);
   --color-fg-subtle: var(--color-gray-400);
 
-  /* ===== Border ===== */
-  --color-border: var(--color-gray-600);
+  /* ===== Border =====
+     Same SC 1.4.11 rule as light — see the note in `_semantic.css`. gray-600
+     measured 2.66:1 against the dark surface and failed; `border-muted` stays
+     decorative and unchanged. */
+  --color-border: var(--color-gray-500);
   --color-border-muted: var(--color-gray-700);
-  --color-border-strong: var(--color-gray-500);
+  --color-border-strong: var(--color-gray-400);
 
   /* ===== Primary ===== */
   --color-primary-50: var(--color-blue-950);
@@ -138,17 +152,71 @@
      (e.g. `green-300 + white` ≈ 1.7:1 ✗). Each pairing has been picked to meet
      WCAG AA against the matched surface (typically gray-950).
 
-     Dark-mode contrast notes:
-       sky-950 ↔ sky-100      ≈ 12.5:1   ✓ AA
-       sky-950 ↔ sky-300      ≈  7.7:1   ✓ AA
-       sky-500 ↔ sky-950      ≈  7.4:1   ✓ AA  (info-solid)
-       sky-300 ↔ gray-950     ≈ 11:1     ✓ AA  (info-fg on surface)
-       green-500 ↔ green-950  ≈  8.1:1   ✓ AA
-       amber-400 ↔ amber-950  ≈ 11.2:1   ✓ AA  (yellow signage preserved)
-       red-500 ↔ red-950      ≈  5.4:1   ✓ AA
-       blue-500 ↔ blue-950    ≈  5.8:1   ✓ AA
-       violet-500 ↔ violet-950 ≈  6.0:1  ✓ AA
-       slate-300 ↔ slate-950  ≈ 11.6:1   ✓ AA
+     Dark-mode contrast notes. Every number below is MEASURED, not estimated:
+     Tailwind v4's oklch palette → sRGB (gamut-clamped) → WCAG relative
+     luminance → ratio. Reproduce with `docs/research/2026-09-audit/p6-contrast.mjs dark light`.
+
+     `-solid-fg` on `-solid` — the shipped pairings (AA body text, floor 4.5):
+       blue-950 ↔ blue-400      5.58   ✓  (primary-solid)
+       slate-900 ↔ slate-300   12.02   ✓  (secondary-solid)
+       violet-950 ↔ violet-400  5.36   ✓  (accent-solid)
+       sky-950 ↔ sky-500        5.12   ✓  (info-solid)
+       green-950 ↔ green-500    6.71   ✓  (success-solid)
+       amber-950 ↔ amber-400    8.73   ✓  (warning-solid, yellow signage kept)
+       red-950 ↔ red-400        5.58   ✓  (error-solid)
+
+     `-soft-fg` on `-soft`, and `-fg` on `surface` (representative rows):
+       sky-100 ↔ sky-950       12.10   ✓  (info-soft-fg on info-soft)
+       sky-300 ↔ gray-950      12.08   ✓  (info-fg on surface)
+
+     Rejected `-500` solid candidates — these are why `-solid` is `-400` for
+     three roles. They are AA FAILURES and are listed as such:
+       blue-500 ↔ blue-950      3.91   ✗
+       violet-500 ↔ violet-950  3.47   ✗
+       red-500 ↔ red-950        4.23   ✗
+
+     > This table previously listed those three rejected candidates under a
+     > "✓ AA" column at 5.8 / 6.0 / 5.4 — numbers that contradicted the file's
+     > own inline comments 20 lines below (3.92 / 3.46 / 4.14) and marked as
+     > passing the exact pairings this file rejects. Every one of its ten rows
+     > was wrong; it was rewritten against the harness on 2026-09-03, and the
+     > two surviving inline estimates ("~7.8", "~5.8") were corrected at the
+     > same time. Do not hand-estimate a row here.
+
+     ===== `-border`: raised for SC 1.4.11 on 2026-09-03 =====
+
+     The seven coloured `-border` tokens were `{hue}-800`, measuring 1.95–2.84:1
+     against `--color-surface` — below the 3:1 non-text-contrast floor. They are
+     the ONLY boundary of the alert `outline` variant (`alert.ts:50` —
+     transparent background, so nothing else marks the container), which makes
+     them identifying, not decorative. The neutral sibling in the same slot,
+     `--color-neutral-border` → `--color-border`, was raised to `gray-500` for
+     exactly this reason (see `_semantic.css`); these seven were left behind.
+
+     Rule for picking a value — the dimmest palette step measuring **≥ 3.4:1**
+     against `--color-surface` (gray-950). The 0.4 margin over the 3:1 floor
+     stops a palette retune dropping the token below it silently. Applied to
+     grey, this rule re-derives `gray-500` — the value `--color-border` already
+     ships — which is what makes it the right rule rather than a fitted one.
+
+       role        was            now           ratio   step below (fails)
+       primary     blue-800       blue-600      3.83    blue-700    2.95
+       secondary   slate-700      slate-500     4.22    slate-600   2.66
+       accent      violet-800     violet-600    3.42    violet-700  2.76
+       info        sky-800        sky-700       3.44    sky-800     2.68
+       success     green-800      green-700     4.07    green-800   2.84
+       warning     amber-800      amber-700     3.99    amber-800   2.82
+       error       red-800        red-600       4.22    red-700     3.14
+       neutral     (--color-border, gray-500)   4.16    gray-600    2.66
+
+     Each new value stays strictly dimmer than that role's `-border-strong`
+     (`{hue}-500`, secondary `slate-400`), so the two border tiers remain
+     visually distinct. `light` and `high-contrast*` were NOT changed here: both
+     high-contrast schemes already cleared 3:1 on every role (4.94–10.34), and
+     `_light.css` failed the same floor WORSE (1.40–1.92) — a change to the
+     default scheme's outline tier with its own visual blast radius, so it was
+     reported separately rather than smuggled in here. It landed on 2026-09-04;
+     `_light.css` carries its own table and its own rule, derived from this one.
   */
 
   /* ----- Primary ----- */
@@ -157,11 +225,12 @@
   --color-primary-soft-fg: var(--color-blue-100);
   --color-primary-soft-fg-muted: var(--color-blue-300);
   /* `-400` not `-500` — blue-500/#2b7fff on blue-950/#162456 only hits
-     3.92:1 (AA fail). blue-400 lifts that to ~7.8:1 with the same fg. */
+     3.91:1 (AA fail). blue-400 lifts that to 5.58:1 with the same fg.
+     (Was "~7.8:1" — an estimate, and wrong; measured 2026-09-03.) */
   --color-primary-solid: var(--color-blue-400);
   --color-primary-solid-hover: var(--color-blue-300);
   --color-primary-solid-fg: var(--color-blue-950);
-  --color-primary-border: var(--color-blue-800);
+  --color-primary-border: var(--color-blue-600);
   --color-primary-border-strong: var(--color-blue-500);
   --color-primary-fg: var(--color-blue-300);
   --color-primary-icon: var(--color-blue-400);
@@ -174,7 +243,7 @@
   --color-secondary-solid: var(--color-slate-300);
   --color-secondary-solid-hover: var(--color-slate-200);
   --color-secondary-solid-fg: var(--color-slate-900);
-  --color-secondary-border: var(--color-slate-700);
+  --color-secondary-border: var(--color-slate-500);
   --color-secondary-border-strong: var(--color-slate-400);
   --color-secondary-fg: var(--color-slate-300);
   --color-secondary-icon: var(--color-slate-400);
@@ -184,11 +253,11 @@
   --color-accent-soft-hover: var(--color-violet-900);
   --color-accent-soft-fg: var(--color-violet-100);
   --color-accent-soft-fg-muted: var(--color-violet-300);
-  /* violet-500/violet-950 = 3.46:1 (AA fail); -400 lifts to ~5.4:1. */
+  /* violet-500/violet-950 = 3.47:1 (AA fail); -400 lifts to 5.36:1. */
   --color-accent-solid: var(--color-violet-400);
   --color-accent-solid-hover: var(--color-violet-300);
   --color-accent-solid-fg: var(--color-violet-950);
-  --color-accent-border: var(--color-violet-800);
+  --color-accent-border: var(--color-violet-600);
   --color-accent-border-strong: var(--color-violet-500);
   --color-accent-fg: var(--color-violet-300);
   --color-accent-icon: var(--color-violet-400);
@@ -214,7 +283,7 @@
   --color-info-solid: var(--color-sky-500);
   --color-info-solid-hover: var(--color-sky-400);
   --color-info-solid-fg: var(--color-sky-950);
-  --color-info-border: var(--color-sky-800);
+  --color-info-border: var(--color-sky-700);
   --color-info-border-strong: var(--color-sky-500);
   --color-info-fg: var(--color-sky-300);
   --color-info-icon: var(--color-sky-400);
@@ -227,7 +296,7 @@
   --color-success-solid: var(--color-green-500);
   --color-success-solid-hover: var(--color-green-400);
   --color-success-solid-fg: var(--color-green-950);
-  --color-success-border: var(--color-green-800);
+  --color-success-border: var(--color-green-700);
   --color-success-border-strong: var(--color-green-500);
   --color-success-fg: var(--color-green-300);
   --color-success-icon: var(--color-green-400);
@@ -240,7 +309,7 @@
   --color-warning-solid: var(--color-amber-400);
   --color-warning-solid-hover: var(--color-amber-300);
   --color-warning-solid-fg: var(--color-amber-950);
-  --color-warning-border: var(--color-amber-800);
+  --color-warning-border: var(--color-amber-700);
   --color-warning-border-strong: var(--color-amber-500);
   --color-warning-fg: var(--color-amber-300);
   --color-warning-icon: var(--color-amber-400);
@@ -250,11 +319,12 @@
   --color-error-soft-hover: var(--color-red-900);
   --color-error-soft-fg: var(--color-red-100);
   --color-error-soft-fg-muted: var(--color-red-300);
-  /* red-500/red-950 = 4.14:1 (just AA fail). red-400 lifts to ~5.8:1. */
+  /* red-500/red-950 = 4.23:1 (just AA fail). red-400 lifts to 5.58:1.
+     (Was "4.14 / ~5.8" — both estimates; measured 2026-09-03.) */
   --color-error-solid: var(--color-red-400);
   --color-error-solid-hover: var(--color-red-300);
   --color-error-solid-fg: var(--color-red-950);
-  --color-error-border: var(--color-red-800);
+  --color-error-border: var(--color-red-600);
   --color-error-border-strong: var(--color-red-500);
   --color-error-fg: var(--color-red-300);
   --color-error-icon: var(--color-red-400);
@@ -271,7 +341,9 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]):not([data-theme="high-contrast"]) {
+  :root:not([data-theme="light"]):not([data-theme="high-contrast"]):not(
+      [data-theme="high-contrast-dark"]
+    ) {
     /* ===== Surface ===== */
     --color-surface: var(--color-gray-950);
     --color-surface-raised: var(--color-gray-900);
@@ -284,10 +356,13 @@
     --color-fg-muted: var(--color-gray-300);
     --color-fg-subtle: var(--color-gray-400);
 
-    /* ===== Border ===== */
-    --color-border: var(--color-gray-600);
+    /* ===== Border =====
+       Must stay in lock-step with the `[data-theme="dark"]` block above; the
+       two are hand-duplicated and a token that drifts between them renders
+       differently for a user on system-dark than for one who chose dark. */
+    --color-border: var(--color-gray-500);
     --color-border-muted: var(--color-gray-700);
-    --color-border-strong: var(--color-gray-500);
+    --color-border-strong: var(--color-gray-400);
 
     /* ===== Primary ===== */
     --color-primary-50: var(--color-blue-950);
@@ -405,7 +480,7 @@
     --color-primary-solid: var(--color-blue-400);
     --color-primary-solid-hover: var(--color-blue-300);
     --color-primary-solid-fg: var(--color-blue-950);
-    --color-primary-border: var(--color-blue-800);
+    --color-primary-border: var(--color-blue-600);
     --color-primary-border-strong: var(--color-blue-500);
     --color-primary-fg: var(--color-blue-300);
     --color-primary-icon: var(--color-blue-400);
@@ -418,7 +493,7 @@
     --color-secondary-solid: var(--color-slate-300);
     --color-secondary-solid-hover: var(--color-slate-200);
     --color-secondary-solid-fg: var(--color-slate-900);
-    --color-secondary-border: var(--color-slate-700);
+    --color-secondary-border: var(--color-slate-500);
     --color-secondary-border-strong: var(--color-slate-400);
     --color-secondary-fg: var(--color-slate-300);
     --color-secondary-icon: var(--color-slate-400);
@@ -431,7 +506,7 @@
     --color-accent-solid: var(--color-violet-400);
     --color-accent-solid-hover: var(--color-violet-300);
     --color-accent-solid-fg: var(--color-violet-950);
-    --color-accent-border: var(--color-violet-800);
+    --color-accent-border: var(--color-violet-600);
     --color-accent-border-strong: var(--color-violet-500);
     --color-accent-fg: var(--color-violet-300);
     --color-accent-icon: var(--color-violet-400);
@@ -457,7 +532,7 @@
     --color-info-solid: var(--color-sky-500);
     --color-info-solid-hover: var(--color-sky-400);
     --color-info-solid-fg: var(--color-sky-950);
-    --color-info-border: var(--color-sky-800);
+    --color-info-border: var(--color-sky-700);
     --color-info-border-strong: var(--color-sky-500);
     --color-info-fg: var(--color-sky-300);
     --color-info-icon: var(--color-sky-400);
@@ -470,7 +545,7 @@
     --color-success-solid: var(--color-green-500);
     --color-success-solid-hover: var(--color-green-400);
     --color-success-solid-fg: var(--color-green-950);
-    --color-success-border: var(--color-green-800);
+    --color-success-border: var(--color-green-700);
     --color-success-border-strong: var(--color-green-500);
     --color-success-fg: var(--color-green-300);
     --color-success-icon: var(--color-green-400);
@@ -483,7 +558,7 @@
     --color-warning-solid: var(--color-amber-400);
     --color-warning-solid-hover: var(--color-amber-300);
     --color-warning-solid-fg: var(--color-amber-950);
-    --color-warning-border: var(--color-amber-800);
+    --color-warning-border: var(--color-amber-700);
     --color-warning-border-strong: var(--color-amber-500);
     --color-warning-fg: var(--color-amber-300);
     --color-warning-icon: var(--color-amber-400);
@@ -496,7 +571,7 @@
     --color-error-solid: var(--color-red-400);
     --color-error-solid-hover: var(--color-red-300);
     --color-error-solid-fg: var(--color-red-950);
-    --color-error-border: var(--color-red-800);
+    --color-error-border: var(--color-red-600);
     --color-error-border-strong: var(--color-red-500);
     --color-error-fg: var(--color-red-300);
     --color-error-icon: var(--color-red-400);