/* ============================================================================
Antichaos UI Kit · v1.0
A small, themeable design system shared across byantichaos Tableau extensions.
Usage:
Then build with the tokens (var(--ac-…)) and the .ac-* primitives below.
Theming: set data-theme="light|dark|auto" on . "auto" follows the OS.
Design language — "order from chaos":
• Calm neutral canvas, one confident brand accent, generous radii.
• Soft layered shadows; motion is quick (120–220ms) and subtle.
• Accent is overridable per-extension via --accent; brand identity colour
(--ac-brand) stays fixed so the logomark is always recognisable.
========================================================================== */
:root {
/* — Brand identity (fixed) — */
--ac-brand: #4f7cf0;
--ac-brand-2: #7a5cf0;
--ac-brand-gradient: linear-gradient(135deg, var(--ac-brand), var(--ac-brand-2));
/* — Accent (themeable; defaults to brand, override per extension/user) — */
--accent: var(--ac-brand);
--accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
--accent-ghost: color-mix(in srgb, var(--accent) 7%, transparent);
/* — Surfaces & ink — */
--ac-bg: #fbfcfe;
--ac-surface: #ffffff;
--ac-ink: #151b26;
--ac-ink-soft: #5d6878;
--ac-ink-faint: #8b97a8;
--ac-line: #e7ecf3;
--ac-line-strong: #d6dee9;
/* — Radius / shadow / motion — */
--ac-radius: 16px;
--ac-radius-sm: 10px;
--ac-shadow-sm: 0 1px 2px rgba(20, 28, 42, .05), 0 2px 6px rgba(20, 28, 42, .05);
--ac-shadow: 0 4px 14px rgba(20, 28, 42, .08), 0 14px 34px rgba(20, 28, 42, .08);
--ac-shadow-lg: 0 22px 60px rgba(20, 28, 42, .22);
--ac-ease: cubic-bezier(.2, .7, .3, 1);
/* — Type — */
--ac-font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
/* Back-compat aliases so extensions can use short token names too. */
--bg: var(--ac-bg);
--ink: var(--ac-ink);
--ink-soft: var(--ac-ink-soft);
--ink-faint: var(--ac-ink-faint);
--line: var(--ac-line);
--line-strong: var(--ac-line-strong);
--font: var(--ac-font);
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"],
:root[data-theme="dark"] :root { --_dark: 1; }
:root[data-theme="dark"] {
--ac-bg: #0e1218;
--ac-surface: #171e29;
--ac-ink: #eef2f8;
--ac-ink-soft: #9aa6b6;
--ac-ink-faint: #6b7888;
--ac-line: #283039;
--ac-line-strong: #38424f;
--ac-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
--ac-shadow: 0 8px 28px rgba(0, 0, 0, .42);
--ac-shadow-lg: 0 24px 64px rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] {
color-scheme: dark;
--ac-bg: #0e1218;
--ac-surface: #171e29;
--ac-ink: #eef2f8;
--ac-ink-soft: #9aa6b6;
--ac-ink-faint: #6b7888;
--ac-line: #283039;
--ac-line-strong: #38424f;
--ac-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
--ac-shadow: 0 8px 28px rgba(0, 0, 0, .42);
--ac-shadow-lg: 0 24px 64px rgba(0, 0, 0, .6);
}
}
/* ---------- Base ---------- */
.ac, .ac * { box-sizing: border-box; }
.ac-root {
background: var(--ac-bg);
color: var(--ac-ink);
font-family: var(--ac-font);
font-size: 14px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ---------- Buttons ---------- */
.ac-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
border: 0; cursor: pointer;
font: 600 13.5px/1 var(--ac-font); letter-spacing: .01em;
padding: 10px 20px; border-radius: 999px;
background: var(--accent); color: #fff;
box-shadow: var(--ac-shadow-sm);
transition: filter .15s var(--ac-ease), transform .15s var(--ac-ease), box-shadow .15s var(--ac-ease);
}
.ac-btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: var(--ac-shadow); }
.ac-btn:active { transform: translateY(0); }
.ac-btn--ghost { background: transparent; color: var(--ac-ink-soft); box-shadow: none; }
.ac-btn--ghost:hover { background: var(--ac-bg); color: var(--ac-ink); filter: none; transform: none; }
.ac-btn--brand { background: var(--ac-brand-gradient); }
/* ---------- Form fields ---------- */
.ac-field { display: block; margin-bottom: 13px; }
.ac-field > span { display: block; margin-bottom: 6px; font-weight: 600; font-size: 12.5px; color: var(--ac-ink); }
.ac-input, .ac-select {
width: 100%; padding: 10px 11px;
border: 1px solid var(--ac-line-strong); border-radius: var(--ac-radius-sm);
background: var(--ac-surface); color: var(--ac-ink);
font: 13.5px var(--ac-font); appearance: none;
transition: border-color .15s var(--ac-ease), box-shadow .15s var(--ac-ease);
}
.ac-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b97a8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px;
}
.ac-input:hover, .ac-select:hover { border-color: var(--accent); }
.ac-input:focus, .ac-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* ---------- Segmented control ---------- */
.ac-seg {
display: flex; gap: 6px; padding: 4px;
background: var(--ac-bg); border: 1px solid var(--ac-line); border-radius: 12px;
}
.ac-seg button {
flex: 1; padding: 9px; border: 0; border-radius: 9px; cursor: pointer;
font: 600 13px var(--ac-font); color: var(--ac-ink-soft); background: transparent;
transition: all .15s var(--ac-ease);
}
.ac-seg button:hover { color: var(--ac-ink); }
.ac-seg button.active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px var(--accent-soft); }
/* ---------- Card ---------- */
.ac-card {
background: var(--ac-surface); border: 1px solid var(--ac-line);
border-radius: var(--ac-radius); box-shadow: var(--ac-shadow-sm);
transition: box-shadow .22s var(--ac-ease), transform .22s var(--ac-ease), border-color .22s var(--ac-ease);
}
.ac-card:hover { box-shadow: var(--ac-shadow); border-color: var(--ac-line-strong); }
/* ---------- Badge / pill ---------- */
.ac-badge {
display: inline-block; padding: 6px 14px; border-radius: 999px;
background: var(--accent); color: #fff;
font: 700 11.5px var(--ac-font); letter-spacing: .05em; text-transform: uppercase;
box-shadow: 0 4px 14px var(--accent-soft), var(--ac-shadow-sm);
}
/* ---------- Empty / loading / error state ---------- */
.ac-state {
height: 100%; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center;
padding: 24px; gap: 6px;
}
.ac-state h2 { margin: 6px 0 2px; font: 700 19px var(--ac-font); letter-spacing: -.01em; color: var(--ac-ink); }
.ac-state p { margin: 0; max-width: 380px; line-height: 1.6; font-size: 13.5px; color: var(--ac-ink-soft); }
.ac-state-icon {
width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;
border-radius: 22px; background: var(--accent-soft); font-size: 30px; margin-bottom: 6px;
}
.ac-spinner {
width: 32px; height: 32px; border-radius: 50%;
border: 3px solid var(--ac-line); border-top-color: var(--accent);
animation: ac-spin .8s linear infinite;
}
@keyframes ac-spin { to { transform: rotate(360deg); } }
/* ---------- Dialog chrome (configure dialogs) ---------- */
.ac-dialog { display: flex; flex-direction: column; min-height: 100%; background: var(--ac-bg); }
.ac-dialog__head { padding: 22px 24px 10px; }
.ac-dialog__head h1 {
margin: 0; display: flex; align-items: center; gap: 10px;
font: 800 21px var(--ac-font); letter-spacing: -.02em; color: var(--ac-ink);
}
.ac-dialog__head p { margin: 6px 0 0; color: var(--ac-ink-soft); font-size: 13px; line-height: 1.5; }
.ac-section { padding: 14px 24px; }
.ac-section + .ac-section { border-top: 1px solid var(--ac-line); }
.ac-section h2 {
margin: 0 0 12px; font: 700 11px var(--ac-font); letter-spacing: .07em;
text-transform: uppercase; color: var(--ac-ink-faint);
}
.ac-foot {
margin-top: auto; position: sticky; bottom: 0;
display: flex; align-items: center; gap: 10px;
padding: 14px 24px; border-top: 1px solid var(--ac-line); background: var(--ac-surface);
}
.ac-foot .ac-spacer { flex: 1; }
/* ---------- Antichaos brand lockup ---------- */
.ac-brand {
display: inline-flex; align-items: center; gap: 8px;
font: 600 12px var(--ac-font); color: var(--ac-ink-faint); text-decoration: none;
}
.ac-brand:hover { color: var(--ac-ink-soft); }
.ac-brand .ac-logo { width: 18px; height: 18px; flex: 0 0 auto; }
.ac-brand b { color: var(--ac-ink-soft); font-weight: 700; }
.ac-logo { display: inline-block; vertical-align: middle; }
/* ── Shared licensing UI (License tab + on-viz badge) ─────────────────── */
.pro-list { margin: 0 0 14px; padding-left: 18px; font-size: 12.5px; line-height: 1.7; color: var(--ac-ink-soft, #5d6878); }
.pro-list strong { color: var(--ac-ink, #151b26); }
.license-status { margin: 6px 0 0; font-size: 12px; min-height: 16px; color: var(--ac-ink-soft, #5d6878); }
.license-status.is-valid { color: #15a35b; font-weight: 600; }
.license-status.is-invalid { color: #dc2626; font-weight: 600; }
.license-status.is-checking { color: var(--ac-ink-faint, #8a93a8); }
.buy-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.btn-buy {
display: inline-flex; align-items: center; padding: 8px 18px; font-size: 13px; font-weight: 700;
color: #fff; text-decoration: none; background: linear-gradient(135deg, #4f7cf0, #7a5cf0);
border-radius: 8px; box-shadow: 0 4px 12px rgba(79, 124, 240, 0.3);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-buy:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(79, 124, 240, 0.4); }
.buy-note { font-size: 11.5px; color: var(--ac-ink-faint, #8a93a8); max-width: 280px; }
/* On-viz attribution badge, injected by assets/badge.js (free extensions). */
.ac-badge {
position: fixed; right: 10px; bottom: 10px; z-index: 2147483000;
display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
font: 500 11px/1 "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
color: #2a2a2a; background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 999px;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12); text-decoration: none; opacity: 0.42;
transition: opacity 0.18s ease, transform 0.18s ease;
/* Gently fade in on load, then rest faint (backwards fill = after the anim the
element uses its own opacity, so :hover can still brighten it). */
animation: ac-badge-in 0.55s ease 0.35s backwards;
}
.ac-badge:hover { opacity: 1; transform: translateY(-1px); }
@keyframes ac-badge-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 0.42; transform: none; } }
.ac-badge b { font-weight: 700; }
.ac-badge[hidden] { display: none; }
/* On compact tiles badge.js adds this after a couple of seconds so it fades out
gracefully instead of resting over the number. */
.ac-badge.ac-badge--gone { opacity: 0 !important; pointer-events: none; transition: opacity 0.6s ease; }
/* --- Demo top bar: small global header on demo pages -------------------- */
.ac-topbar {
box-sizing: border-box;
display: flex; align-items: center; justify-content: space-between;
gap: 12px; width: 100%; padding: 9px 18px;
background: rgba(255, 255, 255, .72);
-webkit-backdrop-filter: saturate(1.3) blur(8px);
backdrop-filter: saturate(1.3) blur(8px);
border-bottom: 1px solid var(--ac-line);
font-family: var(--ac-font);
position: relative; z-index: 10;
}
.ac-topbar__brand {
order: 2; /* logo sits on the RIGHT */
display: inline-flex; align-items: center; gap: 8px;
text-decoration: none; color: var(--ac-ink);
font-weight: 700; font-size: 13.5px; letter-spacing: -.01em;
}
.ac-topbar__brand img { height: 28px; width: auto; display: block; }
.ac-topbar__nav { order: 1; display: flex; align-items: center; gap: 6px; } /* links on the LEFT */
.ac-topbar__nav a {
color: var(--ac-ink-soft); text-decoration: none;
font-size: 12.5px; font-weight: 600;
padding: 5px 10px; border-radius: 8px;
transition: background .15s ease, color .15s ease;
}
.ac-topbar__nav a:hover { color: var(--ac-ink); background: rgba(20, 28, 42, .05); }
@media (max-width: 430px) {
.ac-topbar { padding: 8px 12px; }
.ac-topbar__nav a { padding: 5px 8px; }
}
/* --- Embed mode: ?embed on a demo page hides its chrome so an