/* ============================================================================ Chip design system (FROZEN — research-based, corporate + modern) Installed at: public/assets/css/chips.css Linked from: templates/layouts/base.twig (coordinator adds the ) Rendered by: templates/partials/ui.twig -> ui.chip(label, tone, opts) Rules: full-fill background with WCAG-legible text; NO gradients; NO leading dot; border-radius 6px; weight 600; .72rem. Soft variants (14%-alpha tint + dark text) for dense tables where full saturation is too heavy. ============================================================================ */ .chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .6rem; border-radius:var(--radius); font-weight:600; font-size:.72rem; line-height:1.2; letter-spacing:.01em; white-space:nowrap; vertical-align:middle; border:1px solid transparent; /* keeps soft/outline chips the same box height */ } .chip__icon{ flex:none; display:block; } .chip__label,.chip__count{ display:inline-block; } /* ---- full-fill tones : bg / text exactly per frozen spec --------------- */ .chip--neutral{ background:var(--line); color:#1E293B; } .chip--navy { background:#0B2A4A; color:#FFFFFF; } .chip--blue { background:var(--blue); color:#FFFFFF; } .chip--teal { background:#0D9488; color:#FFFFFF; } .chip--green { background:#15803D; color:#FFFFFF; } .chip--amber { background:#B45309; color:#FFFFFF; } .chip--red { background:#B91C1C; color:#FFFFFF; } .chip--purple { background:#6D28D9; color:#FFFFFF; } .chip--pink { background:#BE185D; color:#FFFFFF; } .chip--gold { background:#F7C600; color:#0B2A4A; } /* brand — dark text for legibility */ .chip--slate { background:#475569; color:#FFFFFF; } /* ---- soft variants : 14%-alpha tint of the tone + dark, legible text --- Usage via macro: ui.chip('X','green',{soft:true}) -> .chip--green.is-soft Also emitted as standalone .chip--soft-{tone} for direct class use. */ .chip--neutral.is-soft, .chip--soft-neutral{ background:rgba(71,85,105,.14); color:#1E293B; } .chip--navy.is-soft, .chip--soft-navy { background:rgba(11,42,74,.14); color:#0B2A4A; } .chip--blue.is-soft, .chip--soft-blue { background:rgba(37,99,235,.14); color:var(--blue-2); } .chip--teal.is-soft, .chip--soft-teal { background:rgba(13,148,136,.14); color:#0F766E; } .chip--green.is-soft, .chip--soft-green { background:rgba(21,128,61,.14); color:#166534; } .chip--amber.is-soft, .chip--soft-amber { background:rgba(180,83,9,.14); color:#92400E; } .chip--red.is-soft, .chip--soft-red { background:rgba(185,28,28,.14); color:#991B1B; } .chip--purple.is-soft, .chip--soft-purple { background:rgba(109,40,217,.14); color:#5B21B6; } .chip--pink.is-soft, .chip--soft-pink { background:rgba(190,24,93,.14); color:#9D174D; } .chip--gold.is-soft, .chip--soft-gold { background:rgba(202,146,0,.18); color:#8A6D00; } .chip--slate.is-soft, .chip--soft-slate { background:rgba(71,85,105,.14); color:#334155; } /* ---- size modifiers ---------------------------------------------------- */ .chip.sm{ font-size:.64rem; padding:.12rem .45rem; gap:.28rem; border-radius:var(--radius); } .chip.sm .chip__icon{ width:10px; height:10px; } .chip.lg{ font-size:.82rem; padding:.32rem .8rem; gap:.42rem; border-radius:var(--radius); } .chip.lg .chip__icon{ width:14px; height:14px; } /* ---- numeric badge (opts.count) : compact, centred, roundish ----------- */ .chip.is-count{ padding:.1rem .42rem; min-width:1.35em; justify-content:center; border-radius:var(--radius); } .chip.is-count.sm{ min-width:1.2em; }