Vigilio Desto
bffb86338d
- asw.css → main.css (just imports, no theming :root)
- 01-tokens.css → 01-asw.css (this IS the ASW design system)
- Removed empty :root {} theming block
- Updated deploy.sh PostCSS path
343 lines
18 KiB
CSS
343 lines
18 KiB
CSS
/**
|
|
* 01-asw.css
|
|
* ASW semantic layer — builds on Open Props
|
|
*
|
|
* Open Props (imported in main.css) provides the base scales:
|
|
* --gray-0…15, --green-0…12, --blue-0…12, --red-0…12, --yellow-0…12
|
|
* --size-1…15, --font-size-0…8, --font-weight-1…9
|
|
* --font-lineheight-0…5, --radius-1…6, --shadow-1…6
|
|
* --ease-1…5, --ease-spring-1…5, --ease-bounce-1…5
|
|
* --gradient-1…30, --animation-*, @keyframes
|
|
*
|
|
* This file defines only what Open Props doesn't:
|
|
* 1. Surface / text / accent — semantic aliases (override to theme)
|
|
* 2. Font stack aliases — prose, heading, ui (map to OP font stacks)
|
|
* 3. Agent-native tokens — task, callout, session, wikilink, redacted
|
|
* 4. A handful of precise values without direct OP equivalents
|
|
*
|
|
* To theme ASW:
|
|
* Override semantic aliases at :root in your own CSS.
|
|
* Use Open Props base tokens (--gray-*, --green-*, --size-*) as values.
|
|
*
|
|
* Lineage: absorbed patterns from Pico CSS, Open Props, Charts.css.
|
|
*/
|
|
|
|
/* ── Project-specific custom media (complement Open Props) ──────────
|
|
Open Props doesn't define every breakpoint the layout needs.
|
|
These are resolved by PostCSS at build time alongside OP tokens.
|
|
─────────────────────────────────────────────────────────────────── */
|
|
@custom-media --docs-toc-hidden (width < 1100px); /* docs layout: 3→2 col */
|
|
@custom-media --nav-compact (width < 991px); /* nav: allow link wrap */
|
|
|
|
/* ══════════════════════════════════════════════════════════════════
|
|
DARK THEME (default)
|
|
Using Open Props oklch gray scale — perceptually uniform steps.
|
|
Set --gray-hue to tint all surfaces. Example:
|
|
Trentuna: --gray-hue: 45 (warm amber tint)
|
|
vigilio-garden: --gray-hue: 150 (subtle green tint)
|
|
══════════════════════════════════════════════════════════════════ */
|
|
|
|
:root {
|
|
|
|
/* ── Surfaces ──────────────────────────────────────────────────── */
|
|
|
|
--surface: var(--gray-12); /* deepest background (oklch 10%) */
|
|
--surface-1: var(--gray-11); /* cards, sidebars (oklch 18%) */
|
|
--surface-2: var(--gray-10); /* hover, raised elements (oklch 25%) */
|
|
--surface-card: var(--surface-1);
|
|
--surface-hover: var(--surface-2);
|
|
|
|
/* ── Text ──────────────────────────────────────────────────────── */
|
|
|
|
--text: var(--gray-1); /* primary (95% lightness) */
|
|
--text-2: var(--gray-3); /* secondary (80%) */
|
|
--text-3: var(--gray-5); /* muted (68%) */
|
|
--text-dim: var(--gray-7); /* dim (58%) */
|
|
|
|
/* ── Accent ────────────────────────────────────────────────────── */
|
|
|
|
--accent: var(--green-5);
|
|
--accent-hover: var(--green-4);
|
|
--on-accent: var(--gray-12);
|
|
--accent-focus: color-mix(in oklch, var(--green-5) 35%, transparent);
|
|
--accent-subtle: color-mix(in oklch, var(--green-5) 10%, transparent);
|
|
--accent-underline: color-mix(in oklch, var(--green-5) 45%, transparent);
|
|
--accent-hover-underline: color-mix(in oklch, var(--green-5) 55%, transparent);
|
|
|
|
/* ── Links ─────────────────────────────────────────────────────── */
|
|
/* Blue — web convention. Accent (green) reserved for UI chrome. */
|
|
|
|
--link: var(--blue-5); /* #339af0 */
|
|
--link-hover: var(--blue-4); /* #4dabf7 */
|
|
--link-underline: color-mix(in oklch, var(--blue-5) 40%, transparent);
|
|
--link-hover-underline: color-mix(in oklch, var(--blue-5) 55%, transparent);
|
|
--link-focus: color-mix(in oklch, var(--blue-5) 35%, transparent);
|
|
|
|
/* Secondary accents — reachable as named aliases */
|
|
--accent-blue: var(--blue-5);
|
|
--accent-red: var(--red-7);
|
|
--accent-orange: var(--yellow-6);
|
|
|
|
/* ── Border ────────────────────────────────────────────────────── */
|
|
|
|
--border: var(--gray-11); /* 37% lightness — visible against 10% bg */
|
|
--border-subtle: var(--gray-12); /* 31% lightness — very subtle */
|
|
--border-width: 1px;
|
|
--outline-width: 2px;
|
|
|
|
/* ── Font stacks ───────────────────────────────────────────────── */
|
|
/* Open Props named stacks — no web font loading required. */
|
|
/* --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova */
|
|
/* --font-monospace-code: Dank Mono, Operator Mono, Inconsolata... */
|
|
|
|
--font-prose: var(--font-neo-grotesque);
|
|
--font-heading: var(--font-neo-grotesque);
|
|
--font-ui: var(--font-neo-grotesque);
|
|
/* --font-mono: var(--font-monospace-code) — provided directly by Open Props */
|
|
|
|
/* ── Typography scale ─────────────────────────────────────────── */
|
|
/* Open Props provides: --font-size-0 (.75rem) through --font-size-8 (3.5rem) */
|
|
/* We define only the one gap: 0.875rem has no OP equivalent */
|
|
|
|
--text-xs: var(--font-size-0); /* 0.75rem — badges, fine print */
|
|
--text-sm: 0.875rem; /* 0.875rem — metadata, captions (no OP match) */
|
|
--text-base: var(--font-size-1); /* 1rem — body */
|
|
--text-2xl: var(--font-size-4); /* 1.5rem — subheadings */
|
|
--text-3xl: var(--font-size-5); /* 2rem — section headings */
|
|
|
|
/* ── Heading scale ─────────────────────────────────────────────── */
|
|
|
|
--h1-size: 1.875rem;
|
|
--h2-size: 1.5rem;
|
|
--h3-size: 1.25rem;
|
|
--h4-size: 1.0625rem;
|
|
--h5-size: 0.9375rem;
|
|
--h6-size: 0.8125rem;
|
|
|
|
--h1-weight: var(--font-weight-4); /* 400 */
|
|
--h2-weight: var(--font-weight-4);
|
|
--h3-weight: var(--font-weight-4);
|
|
--h4-weight: var(--font-weight-5); /* 500 */
|
|
--h5-weight: var(--font-weight-6); /* 600 */
|
|
--h6-weight: var(--font-weight-6);
|
|
|
|
--h1-color: var(--text);
|
|
--h2-color: var(--text);
|
|
--h3-color: var(--text);
|
|
--h4-color: var(--text-2);
|
|
--h5-color: var(--text-2);
|
|
--h6-color: var(--text-3);
|
|
|
|
/* ── Spacing aliases ─────────────────────────────────────────────
|
|
Open Props sizes: --size-1 (.25rem), --size-2 (.5rem), --size-3 (1rem),
|
|
--size-5 (1.5rem), --size-7 (2rem), --size-9 (4rem)
|
|
We alias these with semantic names AND define --space-3 (0.75rem gap)
|
|
──────────────────────────────────────────────────────────────── */
|
|
|
|
--space-1: var(--size-1); /* 0.25rem */
|
|
--space-2: var(--size-2); /* 0.50rem */
|
|
--space-3: 0.75rem; /* 0.75rem — no OP equivalent */
|
|
--space-4: var(--size-3); /* 1.00rem */
|
|
--space-5: var(--size-5); /* 1.50rem */
|
|
--space-6: var(--size-7); /* 2.00rem */
|
|
--space-8: var(--size-9); /* 4.00rem */
|
|
|
|
/* ── Width tokens ───────────────────────────────────────────────── */
|
|
|
|
--width-prose: var(--size-content-3); /* 60ch — Open Props reading width */
|
|
--width-content: var(--size-lg); /* 1024px — Open Props content width */
|
|
--width-full: var(--width-xl); /* alias → --width-xl */
|
|
|
|
/* ── Layout breakpoints ──────────────────────────────────────────── */
|
|
/* These don't map exactly to Open Props --size-* — defined explicitly */
|
|
|
|
--width-sm: 510px;
|
|
--width-md: 700px;
|
|
--width-lg: 950px;
|
|
--width-xl: 1200px;
|
|
--width-2xl: 1450px;
|
|
|
|
/* ── Structural component dimensions ─────────────────────────────── */
|
|
|
|
--sidebar-width: 220px; /* docs sidebar column */
|
|
--toc-width: 200px; /* docs TOC column */
|
|
--nav-height: 60px; /* sticky nav offset for calc() */
|
|
--docs-max-width: 1400px; /* docs layout outer cap */
|
|
--card-min-width: 280px; /* card-grid minmax floor */
|
|
--tooltip-max-width: var(--size-px-14); /* 320px — tooltip overflow cap */
|
|
--scrollbar-size: var(--border-size-3); /* 5px — thin webkit scrollbar thumb */
|
|
|
|
/* ── Chart dimensions ────────────────────────────────────────────── */
|
|
|
|
--chart-radial-size: var(--size-px-11); /* 120px — radial gauge cell */
|
|
--chart-radial-inset: 18px; /* donut-hole inset — no OP equivalent */
|
|
|
|
/* ── Diff viewer tokens ──────────────────────────────────────────── */
|
|
|
|
--diff-add-bg: color-mix(in oklch, var(--green-5) 10%, transparent);
|
|
--diff-remove-bg: color-mix(in oklch, var(--red-7) 10%, transparent);
|
|
--diff-remove-text: var(--red-2);
|
|
--diff-hunk-bg: color-mix(in oklch, var(--blue-4) 7%, transparent);
|
|
|
|
/* ── AI-disclosure border tokens ────────────────────────────────── */
|
|
|
|
--ai-generated-border: color-mix(in oklch, var(--green-5) 25%, transparent);
|
|
--ai-assisted-border: color-mix(in oklch, var(--blue-4) 20%, transparent);
|
|
--ai-mixed-border: color-mix(in oklch, var(--yellow-6) 30%, transparent);
|
|
|
|
/* ── Rhythm ─────────────────────────────────────────────────────── */
|
|
|
|
--type-space: var(--space-4); /* paragraph / element spacing */
|
|
--type-space-top: var(--space-5); /* heading top margin after content */
|
|
--leading: 1.6;
|
|
--leading-tight: var(--font-lineheight-1); /* 1.25 */
|
|
|
|
/* ── Radius ─────────────────────────────────────────────────────── */
|
|
/* Open Props: --radius-1 (2px), --radius-2 (5px), --radius-3 (1rem) */
|
|
|
|
--radius-sm: var(--radius-1); /* 2px */
|
|
--radius-md: 4px; /* between OP radius-1 and radius-2 */
|
|
|
|
/* ── Easing ─────────────────────────────────────────────────────── */
|
|
/* Open Props provides rich curves — we alias the most-used ones */
|
|
|
|
--ease: var(--duration-moderate-1) var(--ease-3); /* 180ms — hover, focus, colour */
|
|
--ease-fast: var(--duration-quick-1) var(--ease-2); /* 80ms — instant feedback */
|
|
--spinner-duration: var(--duration-gentle-1); /* 320ms — spinner rotation cycle */
|
|
|
|
/* ── Inline element tokens ─────────────────────────────────────── */
|
|
|
|
--selection: color-mix(in oklch, var(--blue-4) 25%, transparent);
|
|
--mark-bg: color-mix(in oklch, var(--yellow-6) 20%, transparent);
|
|
--mark-color: var(--accent-orange);
|
|
--kbd-bg: var(--text);
|
|
--kbd-color: var(--surface);
|
|
--code-color: var(--text-2);
|
|
--table-stripe: color-mix(in oklch, var(--gray-11) 50%, transparent);
|
|
|
|
/* ── Form tokens ─────────────────────────────────────────────────── */
|
|
|
|
--input-bg: var(--surface-1);
|
|
--input-border: var(--border);
|
|
--input-active-bg: var(--surface);
|
|
--input-selected: color-mix(in oklch, var(--green-5) 20%, transparent);
|
|
--input-px: var(--space-4);
|
|
--input-py: var(--space-3);
|
|
--disabled-opacity: 0.5;
|
|
|
|
/* ── State colors ─────────────────────────────────────────────────── */
|
|
|
|
--ok: var(--green-5);
|
|
--warn: var(--yellow-5);
|
|
--error: var(--red-7);
|
|
--info: var(--blue-5);
|
|
--blocked: var(--gray-5);
|
|
|
|
--error-active: var(--red-9);
|
|
--error-focus: color-mix(in oklch, var(--red-7) 38%, transparent);
|
|
|
|
/* ── Component tokens ─────────────────────────────────────────────── */
|
|
|
|
--track-bg: var(--surface-2); /* progress / meter background */
|
|
--modal-overlay: color-mix(in oklch, var(--gray-12) 80%, transparent);
|
|
--modal-backdrop: blur(0.375rem);
|
|
--accordion-active: var(--accent-hover);
|
|
|
|
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 115, 115)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
|
|
|
|
/* ══════════════════════════════════════════════════════════════════
|
|
AGENT-NATIVE TOKENS
|
|
These are ASW's actual contribution — concepts no other framework has.
|
|
Propose additions to Open Props: data-task, data-callout, data-session.
|
|
══════════════════════════════════════════════════════════════════ */
|
|
|
|
--task-done: var(--green-5);
|
|
--task-blocked: var(--red-5);
|
|
--task-wip: var(--yellow-5);
|
|
--task-todo: var(--gray-5);
|
|
|
|
--callout-info: var(--blue-5);
|
|
--callout-warn: var(--yellow-5);
|
|
--callout-error: var(--red-5);
|
|
--callout-note: var(--gray-5);
|
|
|
|
--session-bg: var(--surface-1);
|
|
--wikilink: var(--blue-4);
|
|
--redacted: var(--gray-8);
|
|
|
|
}
|
|
|
|
|
|
/* ══════════════════════════════════════════════════════════════════
|
|
LIGHT MODE — override semantic aliases only
|
|
══════════════════════════════════════════════════════════════════ */
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
color-scheme: light;
|
|
|
|
--surface: var(--gray-0); /* 99% lightness */
|
|
--surface-1: var(--gray-1); /* 95% */
|
|
--surface-2: var(--gray-2); /* 88% */
|
|
--surface-card: var(--gray-0);
|
|
--surface-hover: var(--gray-1);
|
|
|
|
--text: var(--gray-11); /* 18% — dark but not pure black */
|
|
--text-2: var(--gray-11); /* 37% */
|
|
--text-3: var(--gray-8); /* 53% */
|
|
--text-dim: var(--gray-6); /* 63% */
|
|
|
|
--accent: var(--green-8);
|
|
--accent-hover: var(--green-9);
|
|
--on-accent: var(--gray-0);
|
|
--accent-focus: color-mix(in oklch, var(--green-8) 35%, transparent);
|
|
--accent-subtle: color-mix(in oklch, var(--green-8) 10%, transparent);
|
|
|
|
--border: var(--gray-3); /* 80% — visible on near-white */
|
|
--border-subtle: var(--gray-2); /* 88% — very subtle */
|
|
|
|
--link: var(--blue-8); /* #1971c2 */
|
|
--link-hover: var(--blue-7); /* #1c7ed6 */
|
|
--link-underline: color-mix(in oklch, var(--blue-8) 40%, transparent);
|
|
--link-hover-underline: color-mix(in oklch, var(--blue-8) 55%, transparent);
|
|
--link-focus: color-mix(in oklch, var(--blue-8) 35%, transparent);
|
|
|
|
--h1-color: var(--gray-12);
|
|
--h2-color: var(--gray-11);
|
|
--h3-color: var(--gray-10);
|
|
--h4-color: var(--gray-12);
|
|
--h5-color: var(--gray-11);
|
|
--h6-color: var(--gray-10);
|
|
|
|
--mark-bg: color-mix(in oklch, var(--yellow-6) 15%, var(--surface));
|
|
--mark-color: var(--gray-12);
|
|
--selection: color-mix(in oklch, var(--blue-8) 20%, transparent);
|
|
|
|
--code-color: var(--text-3);
|
|
--table-stripe: color-mix(in oklch, var(--gray-8) 4%, transparent);
|
|
|
|
--input-bg: var(--gray-0);
|
|
--input-border: var(--gray-4);
|
|
--input-active-bg: var(--gray-0);
|
|
--input-selected: var(--gray-2);
|
|
|
|
--track-bg: var(--gray-3);
|
|
--modal-overlay: color-mix(in oklch, var(--gray-2) 75%, transparent);
|
|
|
|
--error: oklch(50% 0.17 20);
|
|
--error-active: oklch(44% 0.18 20);
|
|
|
|
--session-bg: var(--surface-1);
|
|
}
|
|
}
|
|
|
|
|
|
/* ══════════════════════════════════════════════════════════════════
|
|
RESPONSIVE FONT SCALING
|
|
Subtle upscaling at large viewports — all rem values follow.
|
|
══════════════════════════════════════════════════════════════════ */
|
|
|
|
@media (--lg-n-above) { html { font-size: 103%; } }
|
|
@media (--xl-n-above) { html { font-size: 106%; } }
|
|
@media (--xxl-n-above) { html { font-size: 109%; } }
|