feat(#221): add --c-tag-* CSS custom properties for 10 semantic tag color tokens
Light and dark variants for: sage, sienna, amber, slate, violet, rose, cobalt, moss, sand, coral — used as decorative dot colors on tag chips. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -115,6 +115,18 @@
|
||||
--c-danger: #c0392b;
|
||||
--c-danger-fg: #ffffff;
|
||||
|
||||
/* Tag color tokens — decorative dot colors on tag chips */
|
||||
--c-tag-sage: #5a8a6a;
|
||||
--c-tag-sienna: #a0522d;
|
||||
--c-tag-amber: #c17a00;
|
||||
--c-tag-slate: #607080;
|
||||
--c-tag-violet: #7a4f9a;
|
||||
--c-tag-rose: #c0446e;
|
||||
--c-tag-cobalt: #3060b0;
|
||||
--c-tag-moss: #4a7a3a;
|
||||
--c-tag-sand: #9a8040;
|
||||
--c-tag-coral: #c05540;
|
||||
|
||||
/* PersonType badge — institution (navy-tinted blue) */
|
||||
--c-badge-institution-bg: #e8eff7;
|
||||
--c-badge-institution-text: #1a4971;
|
||||
@@ -183,6 +195,18 @@
|
||||
/* Danger — destructive actions (4.7:1 on #011526 — WCAG AA ✓) */
|
||||
--c-danger: #e55347;
|
||||
--c-danger-fg: #ffffff;
|
||||
|
||||
/* Tag color tokens — lighter for visibility on dark backgrounds */
|
||||
--c-tag-sage: #7abf8a;
|
||||
--c-tag-sienna: #cc7050;
|
||||
--c-tag-amber: #f0aa30;
|
||||
--c-tag-slate: #8a9db0;
|
||||
--c-tag-violet: #b07ad0;
|
||||
--c-tag-rose: #f07090;
|
||||
--c-tag-cobalt: #6090e0;
|
||||
--c-tag-moss: #70b060;
|
||||
--c-tag-sand: #c0a060;
|
||||
--c-tag-coral: #f07060;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -235,6 +259,18 @@
|
||||
/* Danger — destructive actions (4.7:1 on #011526 — WCAG AA ✓) */
|
||||
--c-danger: #e55347;
|
||||
--c-danger-fg: #ffffff;
|
||||
|
||||
/* Tag color tokens — lighter for visibility on dark backgrounds */
|
||||
--c-tag-sage: #7abf8a;
|
||||
--c-tag-sienna: #cc7050;
|
||||
--c-tag-amber: #f0aa30;
|
||||
--c-tag-slate: #8a9db0;
|
||||
--c-tag-violet: #b07ad0;
|
||||
--c-tag-rose: #f07090;
|
||||
--c-tag-cobalt: #6090e0;
|
||||
--c-tag-moss: #70b060;
|
||||
--c-tag-sand: #c0a060;
|
||||
--c-tag-coral: #f07060;
|
||||
}
|
||||
|
||||
/* ─── 6. Icon inversion — De Gruyter icons are black SVGs loaded as <img> ──── */
|
||||
|
||||
Reference in New Issue
Block a user