/* =====================================================
Supa Design Tokens — Combined Export
Generated: 2026-07-06
Source: Supa Design System (cce0f76b)
===================================================== */
/* ─── fonts.css ─────────────────────────────────────── */
/* ============================================================
Supa Design System — Webfonts
UI font: Roboto — CDN-loaded from Google Fonts (weights 400–700).
Mono: Space Mono (Google Fonts) — codes, IDs, tokens, timestamps.
NOTE: both are CDN-loaded substitutes; swap for licensed/self-hosted
files in production if required.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
/* ─── colors.css ────────────────────────────────────── */
/* ============================================================
Supa Design System — Color Tokens
Brand: Supa Violet (#4B33C4). Built on Ant Design's tokenized
color architecture (base palette → semantic → component aliases)
so enterprise white-label themes can be re-seeded by overriding
the --supa-primary-* ramp alone, with zero structural change.
============================================================ */
:root {
/* ---- Brand ramp · Supa Violet (seed #4B33C4) ---- */
--supa-primary-1: #f1edfb; /* lightest tint — selected bg, hover surfaces */
--supa-primary-2: #ddd2f6; /* hover bg */
--supa-primary-3: #c0aeee; /* border */
--supa-primary-4: #9d82e2; /* border hover */
--supa-primary-5: #7355d4; /* primary hover (lighter) */
--supa-primary-6: #4b33c4; /* ★ PRIMARY */
--supa-primary-7: #3a26a6; /* primary active (darker) */
--supa-primary-8: #2a1a82;
--supa-primary-9: #1c1060;
--supa-primary-10: #110840; /* deepest — on-violet text accents */
/* ---- Semantic seeds (status) ---- */
--supa-success-6: #52c41a;
--supa-success-1: #f6ffed;
--supa-success-3: #b7eb8f;
--supa-success-5: #73d13d;
--supa-success-7: #389e0d;
--supa-warning-6: #faad14;
--supa-warning-1: #fffbe6;
--supa-warning-3: #ffe58f;
--supa-warning-5: #ffc53d;
--supa-warning-7: #d48806;
--supa-error-6: #ff4d4f;
--supa-error-1: #fff2f0;
--supa-error-3: #ffccc7;
--supa-error-5: #ff7875;
--supa-error-7: #d9363e;
--supa-info-6: var(--supa-primary-6);
--supa-info-1: var(--supa-primary-1);
/* ---- Neutral grays (Ant gray ramp) ---- */
--supa-gray-1: #ffffff;
--supa-gray-2: #fafafa;
--supa-gray-3: #f5f5f5;
--supa-gray-4: #f0f0f0;
--supa-gray-5: #d9d9d9;
--supa-gray-6: #bfbfbf;
--supa-gray-7: #8c8c8c;
--supa-gray-8: #595959;
--supa-gray-9: #434343;
--supa-gray-10: #262626;
--supa-gray-11: #1f1f1f;
--supa-gray-12: #141414;
--supa-gray-13: #000000;
/* ============================================================
SEMANTIC ALIASES — reference these in components, never the
raw ramps above. This is the white-label contract.
============================================================ */
/* Brand */
--color-primary: var(--supa-primary-6);
--color-primary-hover: var(--supa-primary-5);
--color-primary-active: var(--supa-primary-7);
--color-primary-bg: var(--supa-primary-1);
--color-primary-bg-hover: var(--supa-primary-2);
--color-primary-border: var(--supa-primary-3);
--color-primary-border-hover: var(--supa-primary-4);
--color-primary-text: var(--supa-primary-6);
--color-on-primary: #ffffff;
/* Status */
--color-success: var(--supa-success-6);
--color-success-bg: var(--supa-success-1);
--color-success-border: var(--supa-success-3);
--color-warning: var(--supa-warning-6);
--color-warning-bg: var(--supa-warning-1);
--color-warning-border: var(--supa-warning-3);
--color-error: var(--supa-error-6);
--color-error-bg: var(--supa-error-1);
--color-error-border: var(--supa-error-3);
--color-error-hover: var(--supa-error-5);
--color-error-active: var(--supa-error-7);
--color-info: var(--supa-info-6);
--color-info-bg: var(--supa-info-1);
/* Text (on light) — Ant opacity ladder for crisp hierarchy */
--color-text: rgba(0, 0, 0, 0.88);
--color-text-secondary: rgba(0, 0, 0, 0.65);
--color-text-tertiary: rgba(0, 0, 0, 0.45);
--color-text-quaternary: rgba(0, 0, 0, 0.25);
--color-text-disabled: rgba(0, 0, 0, 0.25);
--color-text-inverse: #ffffff;
--color-text-heading: rgba(0, 0, 0, 0.88);
--color-link: var(--supa-primary-6);
--color-link-hover: var(--supa-primary-5);
/* Borders & separators */
--color-border: #d9d9d9;
--color-border-secondary: #f0f0f0;
--color-split: rgba(5, 5, 5, 0.06);
/* Fills (hover/active wash on neutral controls) */
--color-fill: rgba(0, 0, 0, 0.15);
--color-fill-secondary: rgba(0, 0, 0, 0.06);
--color-fill-tertiary: rgba(0, 0, 0, 0.04);
--color-fill-quaternary: rgba(0, 0, 0, 0.02);
/* Surfaces */
--color-bg-base: #ffffff;
--color-bg-container: #ffffff; /* cards, inputs, tables */
--color-bg-elevated: #ffffff; /* popovers, dropdowns, modals */
--color-bg-layout: #f5f5f5; /* app canvas behind cards */
--color-bg-spotlight: rgba(0, 0, 0, 0.85); /* tooltips */
--color-bg-mask: rgba(0, 0, 0, 0.45); /* modal scrim */
--color-bg-hover: rgba(0, 0, 0, 0.04);
--color-bg-active: rgba(0, 0, 0, 0.06);
/* Sidebar (dark operational chrome) */
--color-sider-bg: #1f1f1f;
--color-sider-item: rgba(255, 255, 255, 0.65);
--color-sider-item-hover: #ffffff;
--color-sider-item-selected-bg: var(--supa-primary-6);
--color-sider-item-selected: #ffffff;
}
/* ─── typography.css ────────────────────────────────── */
/* ============================================================
Supa Design System — Typography Tokens
Functional, dense, legible. Native UI font stack for zero-
friction reading on frontline devices; Space Mono for codes,
IDs and timestamps. Scale & line-heights mirror Ant Design 6.
============================================================ */
:root {
/* ---- Families ---- */
--font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-mono: 'Space Mono', 'SFMono-Regular', Consolas, 'Liberation Mono',
Menlo, Courier, monospace;
/* ---- Weights ---- */
--font-weight-regular: 400;
--font-weight-medium: 500; /* default for labels, table headers, buttons */
--font-weight-semibold: 600; /* headings, emphasis */
--font-weight-bold: 700;
/* ---- Body sizes ---- */
--font-size-xs: 12px; /* meta, captions, table dense */
--font-size-sm: 14px; /* ★ base body / controls */
--font-size-md: 16px; /* large body, comfortable controls */
--font-size-lg: 20px; /* lead paragraph */
/* ---- Heading scale ---- */
--font-size-h1: 38px;
--font-size-h2: 30px;
--font-size-h3: 24px;
--font-size-h4: 20px;
--font-size-h5: 16px;
/* ---- Line heights ---- */
--line-height-base: 1.5714; /* 22px @ 14 */
--line-height-md: 1.5;
--line-height-sm: 1.66;
--line-height-h1: 1.2105;
--line-height-h2: 1.2667;
--line-height-h3: 1.3333;
--line-height-h4: 1.4;
--line-height-h5: 1.5;
/* ---- Letter spacing ---- */
--letter-spacing-tight: -0.01em; /* large headings */
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.04em; /* overline / eyebrow labels */
}
/* ─── spacing.css ───────────────────────────────────── */
/* ============================================================
Supa Design System — Spacing, Radii & Sizing Tokens
Base unit 4px. High-density operational UIs lean on the smaller
steps; strategic whitespace uses the larger steps to guide focus.
============================================================ */
:root {
/* ---- Spacing scale (Ant size steps, 4px base) ---- */
--space-xxs: 4px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px; /* ★ default gutter */
--space-lg: 24px;
--space-xl: 32px;
--space-xxl: 48px;
/* numeric alias (multiples of 4) for fine layout work */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
/* ---- Border radius ---- */
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 6px; /* ★ default — buttons, inputs, cards */
--radius-lg: 8px; /* large cards, modals, panels */
--radius-xl: 12px;
--radius-pill: 100px;
--radius-circle: 50%;
/* ---- Border widths ---- */
--border-width: 1px;
--border-width-bold: 2px;
/* ---- Control heights (interactive targets) ---- */
--control-height-xs: 16px;
--control-height-sm: 24px;
--control-height: 32px; /* ★ default control */
--control-height-lg: 40px;
--control-height-touch: 44px; /* min mobile hit target */
/* ---- Layout chrome ---- */
--header-height: 56px;
--sider-width: 232px;
--sider-width-collapsed: 80px;
--container-max: 1200px;
}
/* ─── effects.css ───────────────────────────────────── */
/* ============================================================
Supa Design System — Effects: Shadows, Motion & Z-index
Soft, neutral elevation (no colored glows). Motion is quick and
deliberate to reinforce zero-friction execution.
============================================================ */
:root {
/* ---- Elevation (3-tier, neutral) ---- */
/* Subtle — affixed bars, raised rows */
--shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
0 1px 6px -1px rgba(0, 0, 0, 0.02),
0 2px 4px 0 rgba(0, 0, 0, 0.02);
/* Card / hover lift */
--shadow-2: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
0 3px 6px 0 rgba(0, 0, 0, 0.12),
0 5px 12px 4px rgba(0, 0, 0, 0.09);
/* Elevated — dropdowns, popovers, drawers, modals */
--shadow-3: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 9px 28px 8px rgba(0, 0, 0, 0.05);
/* Focus ring — brand wash (white-label follows --color-primary) */
--focus-ring: 0 0 0 2px rgba(75, 51, 196, 0.12);
--focus-ring-error: 0 0 0 2px rgba(255, 77, 79, 0.12);
/* ---- Motion ---- */
--duration-fast: 0.1s; /* @kind other */
--duration-base: 0.2s; /* @kind other */
--duration-slow: 0.3s; /* @kind other */
--ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); /* @kind other */
--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); /* @kind other */
--ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* @kind other */
--ease-snap: cubic-bezier(0.34, 0.69, 0.1, 1); /* @kind other */
/* ---- Z-index ladder ---- */
--z-affix: 10; /* @kind other */
--z-sticky: 20; /* @kind other */
--z-drawer: 1000; /* @kind other */
--z-modal: 1000; /* @kind other */
--z-popover: 1030; /* @kind other */
--z-dropdown: 1050; /* @kind other */
--z-tooltip: 1070; /* @kind other */
--z-message: 1010; /* @kind other */
--z-notification: 1010; /* @kind other */
}
/* ─── base.css ──────────────────────────────────────── */
/* ============================================================
Supa Design System — Base layer
Element normalization + the icon utility. Kept minimal: this is
a token/foundation layer, not an opinionated reset.
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
color: var(--color-text);
background: var(--color-bg-layout);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
a { color: var(--color-link); text-decoration: none; transition: color var(--duration-base) var(--ease-out); }
a:hover { color: var(--color-link-hover); }
code, kbd, pre, samp { font-family: var(--font-mono); }
/* ---- Icon utility ----------------------------------------------------
Icons are INLINE SVG (see assets/icons.js) so they render in every
context — live browser, DOM rasterizers, slide/PPTX export.
// auto-inlined on load
Color follows currentColor; size via font-size, width/height, or
the data-size attribute. All glyphs sit on a 24px grid. */
.supa-icon {
display: inline-block;
width: 1em;
height: 1em;
flex: none;
vertical-align: -0.125em;
fill: currentColor;
}
.supa-icon--spin { animation: supa-icon-spin 1s linear infinite; }
@keyframes supa-icon-spin { to { transform: rotate(360deg); } }
/* ─── styles.css (component-level classes) ─────── */
/* ============================================================
Supa Design System — Global entry point
Consumers link THIS file only. It is an @import manifest; all
real declarations live in the token files below. Override the
brand ramp in colors.css to re-skin a white-label tenant.
============================================================ */