/* Allbee Cloud — Design tokens (v2) * Ported from tmp/allbee-cloud/project/src/tokens.css * NOTE: This file defines both CSS custom properties (:root vars) and * generic component classes (.btn, .card, .pill, .tbl, .row, .col, ...). * Do not include alongside legacy style.css on the same page until that * page has been migrated to v2; class names will collide. */ :root { --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Neutrals — cool slate */ --bg: oklch(0.985 0.004 250); --bg-sunken: oklch(0.965 0.006 250); --surface: #ffffff; --surface-2: oklch(0.985 0.004 250); --surface-muted: oklch(0.965 0.006 250); --border: oklch(0.92 0.008 250); --border-strong: oklch(0.86 0.01 250); --fg: oklch(0.22 0.02 260); --fg-2: oklch(0.38 0.02 260); --fg-3: oklch(0.55 0.015 260); --fg-4: oklch(0.68 0.012 260); /* Brand / accent — amber (from the A logo) */ --accent: oklch(0.72 0.16 60); --accent-fg: #1a1306; --accent-hover: oklch(0.66 0.17 58); --accent-soft: oklch(0.95 0.04 75); --accent-soft-border: oklch(0.87 0.08 72); /* Semantic */ --ok: oklch(0.68 0.13 155); --ok-soft: oklch(0.95 0.04 155); --warn: oklch(0.78 0.14 80); --warn-soft: oklch(0.96 0.05 85); --danger: oklch(0.62 0.19 22); --danger-soft: oklch(0.95 0.04 22); --info: oklch(0.64 0.12 240); --info-soft: oklch(0.95 0.03 240); --violet: oklch(0.6 0.14 290); /* Chart categorical (muted, harmonious) */ --c1: oklch(0.65 0.13 60); --c2: oklch(0.6 0.11 220); --c3: oklch(0.62 0.12 155); --c4: oklch(0.58 0.14 22); --c5: oklch(0.6 0.11 290); --c6: oklch(0.68 0.09 200); /* Sidebar — deep navy */ --nav-bg: oklch(0.22 0.02 255); --nav-bg-2: oklch(0.26 0.02 255); --nav-fg: oklch(0.88 0.01 250); --nav-fg-muted: oklch(0.65 0.02 255); --nav-border: oklch(0.32 0.02 255); --nav-active: oklch(0.32 0.03 255); /* Radii + shadow */ --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 14px; --shadow-sm: 0 1px 0 0 oklch(0.9 0.008 260 / 0.6); --shadow-md: 0 1px 2px oklch(0.2 0.02 260 / 0.04), 0 4px 10px oklch(0.2 0.02 260 / 0.05); --shadow-pop: 0 10px 30px oklch(0.2 0.02 260 / 0.12), 0 2px 6px oklch(0.2 0.02 260 / 0.08); --header-h: 52px; --sidebar-w: 248px; --sidebar-w-collapsed: 64px; } [data-theme="dark"] { --bg: oklch(0.18 0.015 260); --bg-sunken: oklch(0.15 0.015 260); --surface: oklch(0.22 0.015 260); --surface-2: oklch(0.24 0.015 260); --surface-muted: oklch(0.2 0.015 260); --border: oklch(0.3 0.015 260); --border-strong: oklch(0.38 0.015 260); --fg: oklch(0.96 0.005 260); --fg-2: oklch(0.82 0.01 260); --fg-3: oklch(0.65 0.015 260); --fg-4: oklch(0.5 0.015 260); --nav-bg: oklch(0.13 0.015 260); --nav-bg-2: oklch(0.16 0.015 260); --nav-active: oklch(0.24 0.02 260); --nav-border: oklch(0.24 0.02 260); } /* The body/component rules below are scoped under .ab-v2 to avoid * colliding with legacy templates that share class names like .card / .btn. * Wrap any v2 page body content in `` (or a child * container with that class) to opt in. */ .ab-v2 { box-sizing: border-box; } .ab-v2 *, .ab-v2 *::before, .ab-v2 *::after { box-sizing: border-box; } /* Reset html/body chrome only when the page opts in via . */ html:has(body.ab-v2), body.ab-v2 { margin: 0; padding: 0; } .ab-v2 { font-family: var(--font-ui); color: var(--fg); background: var(--bg); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01", "ss03"; } .ab-v2 .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; } .ab-v2 .num { font-variant-numeric: tabular-nums; } /* Buttons */ .ab-v2 .btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); cursor: pointer; user-select: none; transition: background .12s, border-color .12s, color .12s; white-space: nowrap; } .ab-v2 .btn:hover { background: var(--surface-2); border-color: var(--fg-4); } .ab-v2 .btn.primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; } .ab-v2 .btn.primary:hover { background: var(--accent-hover); } .ab-v2 .btn.dark { background: var(--fg); color: var(--surface); border-color: var(--fg); } .ab-v2 .btn.dark:hover { background: var(--fg-2); } .ab-v2 .btn.ghost { background: transparent; border-color: transparent; color: var(--fg-2); } .ab-v2 .btn.ghost:hover { background: var(--surface-2); color: var(--fg); } .ab-v2 .btn.danger { background: var(--danger); color: white; border-color: transparent; } .ab-v2 .btn.sm { height: 26px; padding: 0 9px; font-size: 12px; } .ab-v2 .btn.lg { height: 36px; padding: 0 14px; font-size: 14px; } .ab-v2 .btn.icon { width: 30px; padding: 0; justify-content: center; } .ab-v2 .btn.sm.icon { width: 26px; } /* Input */ .ab-v2 .input, .ab-v2 .select { height: 30px; padding: 0 10px; font: inherit; font-size: 13px; color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); outline: none; transition: border-color .12s, box-shadow .12s; } .ab-v2 .input:focus, .ab-v2 .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .ab-v2 textarea.input { height: auto; padding: 8px 10px; line-height: 1.45; resize: vertical; font-family: inherit; } /* Card */ .ab-v2 .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 0; box-shadow: none; } .ab-v2 .card-header { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ab-v2 .card-body { padding: 14px; } .ab-v2 .card-title { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--fg); margin: 0; } .ab-v2 .card-sub { font-size: 12px; color: var(--fg-3); margin: 0; } /* Badges / pills */ .ab-v2 .pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; font-size: 11px; font-weight: 500; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--fg-2); letter-spacing: 0.01em; } .ab-v2 .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-3); } .ab-v2 .pill.ok { color: oklch(0.35 0.11 155); background: var(--ok-soft); border-color: oklch(0.82 0.09 155); } .ab-v2 .pill.ok .dot { background: var(--ok); } .ab-v2 .pill.warn { color: oklch(0.4 0.12 70); background: var(--warn-soft); border-color: oklch(0.82 0.1 80); } .ab-v2 .pill.warn .dot { background: var(--warn); } .ab-v2 .pill.danger { color: oklch(0.4 0.16 22); background: var(--danger-soft); border-color: oklch(0.82 0.13 22); } .ab-v2 .pill.danger .dot { background: var(--danger); } .ab-v2 .pill.info { color: oklch(0.38 0.11 240); background: var(--info-soft); border-color: oklch(0.82 0.08 240); } .ab-v2 .pill.info .dot { background: var(--info); } /* Kbd */ .ab-v2 kbd { font-family: var(--font-mono); font-size: 11px; padding: 1px 5px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--fg-3); box-shadow: 0 1px 0 var(--border-strong); } /* Headings */ .ab-v2 h1, .ab-v2 h2, .ab-v2 h3, .ab-v2 h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; } .ab-v2 h1 { font-size: 22px; } .ab-v2 h2 { font-size: 18px; } .ab-v2 h3 { font-size: 15px; } /* Table */ .ab-v2 .tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } .ab-v2 .tbl th { text-align: left; font-weight: 500; color: var(--fg-3); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; padding: 8px 14px; background: var(--surface-muted); border-bottom: 1px solid var(--border); position: sticky; top: 0; } .ab-v2 .tbl td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--fg-2); } .ab-v2 .tbl tr:last-child td { border-bottom: 0; } .ab-v2 .tbl tr:hover td { background: var(--surface-2); } /* Utility */ .ab-v2 .row { display: flex; align-items: center; } .ab-v2 .col { display: flex; flex-direction: column; } .ab-v2 .g-4 { gap: 4px; } .ab-v2 .g-6 { gap: 6px; } .ab-v2 .g-8 { gap: 8px; } .ab-v2 .g-10 { gap: 10px; } .ab-v2 .g-12 { gap: 12px; } .ab-v2 .g-16 { gap: 16px; } .ab-v2 .g-20 { gap: 20px; } .ab-v2 .mt-4 { margin-top: 4px; } .ab-v2 .mt-8 { margin-top: 8px; } .ab-v2 .mt-12 { margin-top: 12px; } .ab-v2 .mt-16 { margin-top: 16px; } .ab-v2 .mt-20 { margin-top: 20px; } .ab-v2 .mt-24 { margin-top: 24px; } .ab-v2 .fg-2 { color: var(--fg-2); } .ab-v2 .fg-3 { color: var(--fg-3); } .ab-v2 .fg-4 { color: var(--fg-4); } .ab-v2 .flex-1 { flex: 1; } .ab-v2 .grow { flex-grow: 1; } .ab-v2 .divider { height: 1px; background: var(--border); } .ab-v2 .v-divider { width: 1px; background: var(--border); align-self: stretch; } .ab-v2 .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .ab-v2 .status-dot.ok { background: var(--ok); box-shadow: 0 0 0 3px oklch(0.68 0.13 155 / 0.18); } .ab-v2 .status-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px oklch(0.78 0.14 80 / 0.2); } .ab-v2 .status-dot.danger { background: var(--danger); box-shadow: 0 0 0 3px oklch(0.62 0.19 22 / 0.2); animation: ab-pulse 1.6s ease-in-out infinite; } @keyframes ab-pulse { 0%,100% { box-shadow: 0 0 0 3px oklch(0.62 0.19 22 / 0.2);} 50% { box-shadow: 0 0 0 6px oklch(0.62 0.19 22 / 0.08);} } .ab-v2 :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Scrollbar (only when entire page is v2; keyed off body.ab-v2) */ body.ab-v2 ::-webkit-scrollbar { width: 10px; height: 10px; } body.ab-v2 ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 2px solid var(--bg); } body.ab-v2 ::-webkit-scrollbar-track { background: transparent; }