Initial release — Astro Rocket v1.0.0
This commit is contained in:
Claude
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,208 @@
|
||||
/* =============================================================================
|
||||
Astro Rocket Theme - Amber
|
||||
=============================================================================
|
||||
Warm golden amber brand (hue 75°). Premium, editorial, inviting. The warmth
|
||||
of honey and candlelight — works beautifully for food, culture, luxury, and
|
||||
high-end editorial brands.
|
||||
|
||||
Dark mode: warm near-black with a rich amber glow. Candlelit, premium.
|
||||
Light mode: clean neutral whites with golden amber as the single accent.
|
||||
|
||||
To use: swap the theme import in tokens/colors.css:
|
||||
@import '../themes/amber.css';
|
||||
============================================================================= */
|
||||
|
||||
html[data-theme="amber"] {
|
||||
/* -------------------------------------------------------------------------
|
||||
Brand Scale Override — Golden Amber (hue 75)
|
||||
Rich honey-gold. Yellow-orange territory — perceptually bright so the
|
||||
scale uses slightly adjusted lightness to stay balanced.
|
||||
------------------------------------------------------------------------- */
|
||||
--brand-50: oklch(98% 0.02 75);
|
||||
--brand-100: oklch(95% 0.05 75);
|
||||
--brand-200: oklch(91% 0.10 75);
|
||||
--brand-300: oklch(85% 0.15 75);
|
||||
--brand-400: oklch(78% 0.17 75);
|
||||
--brand-500: oklch(68% 0.19 75);
|
||||
--brand-600: oklch(57% 0.17 75);
|
||||
--brand-700: oklch(47% 0.14 75);
|
||||
--brand-800: oklch(37% 0.11 75);
|
||||
--brand-900: oklch(27% 0.08 75);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Semantic Tokens - Light Mode
|
||||
Clean neutral whites — amber accent does all the work.
|
||||
------------------------------------------------------------------------- */
|
||||
--background: var(--gray-0);
|
||||
--background-secondary: oklch(97.5% 0.010 75);
|
||||
--background-tertiary: oklch(95% 0.018 75);
|
||||
--background-elevated: var(--gray-0);
|
||||
|
||||
--foreground: var(--gray-900); /* 18.3:1 on white — WCAG AAA */
|
||||
--foreground-secondary: var(--gray-700); /* 12.7:1 on white — WCAG AAA */
|
||||
--foreground-muted: var(--gray-600); /* 10.0:1 on white — WCAG AA */
|
||||
--foreground-subtle: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--border: var(--gray-200);
|
||||
--border-strong: var(--gray-300);
|
||||
--border-subtle: var(--gray-100);
|
||||
|
||||
--primary: var(--gray-900);
|
||||
--primary-hover: var(--gray-800);
|
||||
--primary-foreground: var(--gray-0);
|
||||
|
||||
--secondary: var(--gray-100);
|
||||
--secondary-hover: var(--gray-200);
|
||||
--secondary-foreground: var(--gray-900);
|
||||
|
||||
--accent: var(--brand-500);
|
||||
--accent-hover: var(--brand-600);
|
||||
--accent-light: var(--brand-100);
|
||||
|
||||
--muted: var(--gray-100);
|
||||
--muted-foreground: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--card: var(--gray-0);
|
||||
--card-border: var(--gray-200);
|
||||
|
||||
--input-bg: var(--gray-0);
|
||||
--input-border: var(--gray-300);
|
||||
--input-focus: var(--brand-500);
|
||||
|
||||
--ring: var(--brand-500);
|
||||
|
||||
/* Destructive */
|
||||
--destructive: var(--error);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
/* Gradient colors */
|
||||
--gradient-start: oklch(96.5% 0 0);
|
||||
--gradient-end: oklch(100% 0 0);
|
||||
|
||||
/* Status colors - light mode backgrounds */
|
||||
--success-light: oklch(94% 0.05 145);
|
||||
--warning-light: oklch(95% 0.05 85);
|
||||
--error-light: oklch(94% 0.05 25);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Inverted/Contrast Section — deep warm-dark
|
||||
------------------------------------------------------------------------- */
|
||||
--surface-invert: oklch(9.5% 0.012 75);
|
||||
--surface-invert-secondary: oklch(13.5% 0.010 75);
|
||||
--surface-invert-tertiary: oklch(17.5% 0.008 75);
|
||||
--on-invert: var(--gray-50);
|
||||
--on-invert-secondary: var(--gray-200);
|
||||
--on-invert-muted: var(--gray-300);
|
||||
--border-invert: oklch(21% 0.010 75);
|
||||
--border-invert-strong: oklch(29% 0.008 75);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Typography — Manrope (body) + Outfit (display)
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-font-sans: 'Manrope Variable', 'Manrope', ui-sans-serif, system-ui,
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||||
Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--theme-font-display: 'Outfit Variable', 'Outfit', var(--theme-font-sans);
|
||||
--theme-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace,
|
||||
SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--theme-heading-weight: 700;
|
||||
--theme-heading-tracking: -0.02em;
|
||||
--theme-body-leading: 1.6;
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Shadows — amber-warm tinted
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-shadow-sm: 0 1px 2px oklch(20% 0.01 75 / 0.06);
|
||||
--theme-shadow-md: 0 4px 8px oklch(20% 0.01 75 / 0.08),
|
||||
0 0 1px oklch(20% 0.01 75 / 0.04);
|
||||
--theme-shadow-lg: 0 8px 16px oklch(20% 0.01 75 / 0.1),
|
||||
0 0 1px oklch(20% 0.01 75 / 0.04);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(20% 0.01 75 / 0.14),
|
||||
0 0 1px oklch(20% 0.01 75 / 0.04);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Border Radii
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-radius-sm: 0.25rem; /* 4px */
|
||||
--theme-radius-md: 0.375rem; /* 6px */
|
||||
--theme-radius-lg: 0.5rem; /* 8px */
|
||||
--theme-radius-xl: 0.625rem; /* 10px */
|
||||
--theme-radius-full: 9999px;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Dark Mode — warm near-black with amber glow
|
||||
Premium, candlelit. Rich warmth on deep darkness.
|
||||
------------------------------------------------------------------------- */
|
||||
html.dark[data-theme="amber"] {
|
||||
--background: oklch(9.5% 0.014 75);
|
||||
--background-secondary: oklch(15% 0.012 75);
|
||||
--background-tertiary: oklch(20% 0.010 75);
|
||||
--background-elevated: oklch(15% 0.012 75);
|
||||
|
||||
--foreground: oklch(94% 0.010 75); /* warm near-white */
|
||||
--foreground-secondary: oklch(82% 0.012 75);
|
||||
--foreground-muted: oklch(68% 0.010 75);
|
||||
--foreground-subtle: oklch(58% 0.008 75); /* ~4.8:1 on bg — WCAG AA */
|
||||
|
||||
--border: oklch(20% 0.012 75);
|
||||
--border-strong: oklch(27% 0.010 75);
|
||||
--border-subtle: oklch(13.5% 0.012 75);
|
||||
|
||||
--primary: oklch(94% 0.010 75);
|
||||
--primary-hover: oklch(82% 0.012 75);
|
||||
--primary-foreground: oklch(9.5% 0.014 75);
|
||||
|
||||
--secondary: oklch(20% 0.010 75);
|
||||
--secondary-hover: oklch(24% 0.010 75);
|
||||
--secondary-foreground: oklch(90% 0.010 75);
|
||||
|
||||
--accent: var(--brand-400);
|
||||
--accent-hover: var(--brand-500);
|
||||
--accent-light: oklch(18% 0.06 75);
|
||||
|
||||
--muted: oklch(20% 0.010 75);
|
||||
--muted-foreground: oklch(68% 0.010 75);
|
||||
|
||||
--card: oklch(15% 0.012 75);
|
||||
--card-border: oklch(23% 0.010 75);
|
||||
|
||||
--input-bg: oklch(15% 0.012 75);
|
||||
--input-border: oklch(27% 0.010 75);
|
||||
--input-focus: var(--brand-400);
|
||||
|
||||
--ring: var(--brand-400);
|
||||
|
||||
--destructive: oklch(65% 0.22 25);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
/* Gradient colors */
|
||||
--gradient-start: oklch(9.5% 0.014 75);
|
||||
--gradient-end: oklch(13% 0.012 75);
|
||||
|
||||
/* Status colors */
|
||||
--success-light: oklch(18% 0.06 155);
|
||||
--warning-light: oklch(18% 0.05 75);
|
||||
--error-light: oklch(18% 0.06 25);
|
||||
|
||||
/* Inverted section in dark mode */
|
||||
--surface-invert: oklch(13% 0.012 75);
|
||||
--surface-invert-secondary: oklch(16.5% 0.010 75);
|
||||
--surface-invert-tertiary: oklch(21% 0.008 75);
|
||||
--on-invert: oklch(94% 0.010 75);
|
||||
--on-invert-secondary: oklch(72% 0.012 75);
|
||||
--on-invert-muted: oklch(68% 0.010 75);
|
||||
--border-invert: oklch(21% 0.010 75);
|
||||
--border-invert-strong: oklch(29% 0.008 75);
|
||||
|
||||
/* Shadows — warm amber tinted, deep */
|
||||
--theme-shadow-sm: 0 1px 3px oklch(9% 0.02 75 / 0.35);
|
||||
--theme-shadow-md: 0 4px 12px oklch(9% 0.02 75 / 0.4),
|
||||
0 0 1px oklch(9% 0.02 75 / 0.15);
|
||||
--theme-shadow-lg: 0 8px 24px oklch(9% 0.02 75 / 0.45),
|
||||
0 1px 2px oklch(55% 0.14 75 / 0.06);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(9% 0.02 75 / 0.55),
|
||||
0 2px 4px oklch(55% 0.14 75 / 0.09);
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
/* =============================================================================
|
||||
Astro Rocket Theme - Studio
|
||||
=============================================================================
|
||||
Cool blue-tinted grays with electric indigo accent. Inspired by the design
|
||||
language of Linear, Raycast, and Radix UI — authoritative, premium, precise.
|
||||
|
||||
Dark mode is the hero: deep cool-black backgrounds with indigo glow.
|
||||
Light mode: clean neutral whites with indigo as the single accent.
|
||||
|
||||
To use: swap the theme import in tokens/colors.css:
|
||||
@import '../themes/studio.css';
|
||||
============================================================================= */
|
||||
|
||||
html[data-theme="blue"] {
|
||||
/* -------------------------------------------------------------------------
|
||||
Brand Scale Override — Electric Indigo (hue 255)
|
||||
Replaces the default International Orange with electric indigo.
|
||||
Any component using brand-* classes picks this up automatically.
|
||||
------------------------------------------------------------------------- */
|
||||
--brand-50: oklch(97.5% 0.02 255);
|
||||
--brand-100: oklch(94.8% 0.04 255);
|
||||
--brand-200: oklch(87.5% 0.08 255);
|
||||
--brand-300: oklch(77.8% 0.14 255);
|
||||
--brand-400: oklch(68.5% 0.19 255);
|
||||
--brand-500: oklch(62.5% 0.22 255);
|
||||
--brand-600: oklch(53.2% 0.19 255);
|
||||
--brand-700: oklch(45.5% 0.16 255);
|
||||
--brand-800: oklch(37.2% 0.13 255);
|
||||
--brand-900: oklch(26.5% 0.09 255);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Semantic Tokens - Light Mode
|
||||
Clean neutral whites — the indigo accent does all the work.
|
||||
------------------------------------------------------------------------- */
|
||||
--background: var(--gray-0);
|
||||
--background-secondary: oklch(97.5% 0.010 255);
|
||||
--background-tertiary: oklch(95% 0.018 255);
|
||||
--background-elevated: var(--gray-0);
|
||||
|
||||
--foreground: var(--gray-900); /* 18.3:1 on white — WCAG AAA */
|
||||
--foreground-secondary: var(--gray-700); /* 12.7:1 on white — WCAG AAA */
|
||||
--foreground-muted: var(--gray-600); /* 10.0:1 on white — WCAG AA */
|
||||
--foreground-subtle: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--border: var(--gray-200);
|
||||
--border-strong: var(--gray-300);
|
||||
--border-subtle: var(--gray-100);
|
||||
|
||||
--primary: var(--gray-900);
|
||||
--primary-hover: var(--gray-800);
|
||||
--primary-foreground: var(--gray-0);
|
||||
|
||||
--secondary: var(--gray-100);
|
||||
--secondary-hover: var(--gray-200);
|
||||
--secondary-foreground: var(--gray-900);
|
||||
|
||||
--accent: var(--brand-500);
|
||||
--accent-hover: var(--brand-600);
|
||||
--accent-light: var(--brand-100);
|
||||
|
||||
--muted: var(--gray-100);
|
||||
--muted-foreground: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--card: var(--gray-0);
|
||||
--card-border: var(--gray-200);
|
||||
|
||||
--input-bg: var(--gray-0);
|
||||
--input-border: var(--gray-300);
|
||||
--input-focus: var(--brand-500);
|
||||
|
||||
--ring: var(--brand-500);
|
||||
|
||||
/* Destructive */
|
||||
--destructive: var(--error);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
/* Gradient colors */
|
||||
--gradient-start: oklch(96.5% 0 0);
|
||||
--gradient-end: oklch(100% 0 0);
|
||||
|
||||
/* Status colors - light mode backgrounds */
|
||||
--success-light: oklch(94% 0.05 145);
|
||||
--warning-light: oklch(95% 0.05 85);
|
||||
--error-light: oklch(94% 0.05 25);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Inverted/Contrast Section — deep cool-dark
|
||||
------------------------------------------------------------------------- */
|
||||
--surface-invert: oklch(10% 0.015 255);
|
||||
--surface-invert-secondary: oklch(14% 0.012 255);
|
||||
--surface-invert-tertiary: oklch(18% 0.01 255);
|
||||
--on-invert: var(--gray-50);
|
||||
--on-invert-secondary: var(--gray-200);
|
||||
--on-invert-muted: var(--gray-300);
|
||||
--border-invert: oklch(22% 0.01 255);
|
||||
--border-invert-strong: oklch(30% 0.008 255);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Typography — Manrope (body) + Outfit (display)
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-font-sans: 'Manrope Variable', 'Manrope', ui-sans-serif, system-ui,
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||||
Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--theme-font-display: 'Outfit Variable', 'Outfit', var(--theme-font-sans);
|
||||
--theme-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace,
|
||||
SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--theme-heading-weight: 700;
|
||||
--theme-heading-tracking: -0.02em;
|
||||
--theme-body-leading: 1.6;
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Shadows — cool-tinted
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-shadow-sm: 0 1px 2px oklch(20% 0.01 255 / 0.06);
|
||||
--theme-shadow-md: 0 4px 8px oklch(20% 0.01 255 / 0.08),
|
||||
0 0 1px oklch(20% 0.01 255 / 0.04);
|
||||
--theme-shadow-lg: 0 8px 16px oklch(20% 0.01 255 / 0.1),
|
||||
0 0 1px oklch(20% 0.01 255 / 0.04);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(20% 0.01 255 / 0.14),
|
||||
0 0 1px oklch(20% 0.01 255 / 0.04);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Border Radii
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-radius-sm: 0.25rem; /* 4px */
|
||||
--theme-radius-md: 0.375rem; /* 6px */
|
||||
--theme-radius-lg: 0.5rem; /* 8px */
|
||||
--theme-radius-xl: 0.625rem; /* 10px */
|
||||
--theme-radius-full: 9999px;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Dark Mode — deep cool blue-black, indigo glow
|
||||
The star of the Studio theme. Think Linear at night.
|
||||
------------------------------------------------------------------------- */
|
||||
html.dark[data-theme="blue"] {
|
||||
--background: oklch(10% 0.015 255);
|
||||
--background-secondary: oklch(15.5% 0.012 255);
|
||||
--background-tertiary: oklch(20.5% 0.01 255);
|
||||
--background-elevated: oklch(15.5% 0.012 255);
|
||||
|
||||
--foreground: oklch(91% 0.008 255); /* cool near-white — 15:1 on dark bg, WCAG AAA */
|
||||
--foreground-secondary: oklch(82% 0.012 255);
|
||||
--foreground-muted: oklch(68% 0.01 255);
|
||||
--foreground-subtle: oklch(58% 0.008 255); /* ~4.8:1 on bg — WCAG AA */
|
||||
|
||||
--border: oklch(20% 0.012 255);
|
||||
--border-strong: oklch(28% 0.01 255);
|
||||
--border-subtle: oklch(14% 0.012 255);
|
||||
|
||||
--primary: oklch(94% 0.008 255);
|
||||
--primary-hover: oklch(82% 0.01 255);
|
||||
--primary-foreground: oklch(10% 0.015 255);
|
||||
|
||||
--secondary: oklch(20.5% 0.01 255);
|
||||
--secondary-hover: oklch(25% 0.01 255);
|
||||
--secondary-foreground: oklch(90% 0.01 255);
|
||||
|
||||
--accent: var(--brand-400);
|
||||
--accent-hover: var(--brand-500);
|
||||
--accent-light: oklch(18% 0.06 255);
|
||||
|
||||
--muted: oklch(20.5% 0.01 255);
|
||||
--muted-foreground: oklch(68% 0.01 255);
|
||||
|
||||
--card: oklch(15.5% 0.012 255);
|
||||
--card-border: oklch(23% 0.012 255);
|
||||
|
||||
--input-bg: oklch(15.5% 0.012 255);
|
||||
--input-border: oklch(28% 0.01 255);
|
||||
--input-focus: var(--brand-400);
|
||||
|
||||
--ring: var(--brand-400);
|
||||
|
||||
--destructive: oklch(65% 0.22 25);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
/* Gradient colors */
|
||||
--gradient-start: oklch(10% 0.015 255);
|
||||
--gradient-end: oklch(13.5% 0.012 255);
|
||||
|
||||
/* Status colors */
|
||||
--success-light: oklch(18% 0.05 145);
|
||||
--warning-light: oklch(18% 0.05 85);
|
||||
--error-light: oklch(18% 0.05 25);
|
||||
|
||||
/* Inverted section in dark mode */
|
||||
--surface-invert: oklch(13.5% 0.012 255);
|
||||
--surface-invert-secondary: oklch(17% 0.01 255);
|
||||
--surface-invert-tertiary: oklch(22% 0.01 255);
|
||||
--on-invert: oklch(94% 0.008 255);
|
||||
--on-invert-secondary: oklch(72% 0.012 255);
|
||||
--on-invert-muted: oklch(68% 0.01 255);
|
||||
--border-invert: oklch(22% 0.01 255);
|
||||
--border-invert-strong: oklch(30% 0.008 255);
|
||||
|
||||
/* Shadows — indigo-tinted, deeper */
|
||||
--theme-shadow-sm: 0 1px 3px oklch(10% 0.02 255 / 0.35);
|
||||
--theme-shadow-md: 0 4px 12px oklch(10% 0.02 255 / 0.4),
|
||||
0 0 1px oklch(10% 0.02 255 / 0.15);
|
||||
--theme-shadow-lg: 0 8px 24px oklch(10% 0.02 255 / 0.45),
|
||||
0 1px 2px oklch(50% 0.15 255 / 0.05);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(10% 0.02 255 / 0.55),
|
||||
0 2px 4px oklch(50% 0.15 255 / 0.08);
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
/* =============================================================================
|
||||
Astro Rocket Theme - Cyan
|
||||
=============================================================================
|
||||
Electric cyan (hue 200°). Vibrant and fresh — inspired by Tailwind's cyan
|
||||
palette. Sits just above teal, with a more electric, saturated feel.
|
||||
|
||||
Dark mode: near-black with a vivid cyan tint and bright glow.
|
||||
Light mode: clean neutral whites with cyan as the single accent.
|
||||
============================================================================= */
|
||||
|
||||
html[data-theme="cyan"] {
|
||||
/* -------------------------------------------------------------------------
|
||||
Brand Scale Override — Electric Cyan (hue 200)
|
||||
Inspired by Tailwind cyan-*. Brighter and more saturated than teal.
|
||||
------------------------------------------------------------------------- */
|
||||
--brand-50: oklch(97.5% 0.02 200);
|
||||
--brand-100: oklch(95% 0.04 200);
|
||||
--brand-200: oklch(88% 0.10 200);
|
||||
--brand-300: oklch(78% 0.16 200);
|
||||
--brand-400: oklch(69% 0.21 200);
|
||||
--brand-500: oklch(62.5% 0.22 200);
|
||||
--brand-600: oklch(53% 0.19 200);
|
||||
--brand-700: oklch(44.5% 0.16 200);
|
||||
--brand-800: oklch(36% 0.12 200);
|
||||
--brand-900: oklch(26% 0.08 200);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Semantic Tokens - Light Mode
|
||||
------------------------------------------------------------------------- */
|
||||
--background: var(--gray-0);
|
||||
--background-secondary: oklch(97.5% 0.010 200);
|
||||
--background-tertiary: oklch(95% 0.018 200);
|
||||
--background-elevated: var(--gray-0);
|
||||
|
||||
--foreground: var(--gray-900); /* 18.3:1 on white — WCAG AAA */
|
||||
--foreground-secondary: var(--gray-700); /* 12.7:1 on white — WCAG AAA */
|
||||
--foreground-muted: var(--gray-600); /* 10.0:1 on white — WCAG AA */
|
||||
--foreground-subtle: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--border: var(--gray-200);
|
||||
--border-strong: var(--gray-300);
|
||||
--border-subtle: var(--gray-100);
|
||||
|
||||
--primary: var(--gray-900);
|
||||
--primary-hover: var(--gray-800);
|
||||
--primary-foreground: var(--gray-0);
|
||||
|
||||
--secondary: var(--gray-100);
|
||||
--secondary-hover: var(--gray-200);
|
||||
--secondary-foreground: var(--gray-900);
|
||||
|
||||
--accent: var(--brand-500);
|
||||
--accent-hover: var(--brand-600);
|
||||
--accent-light: var(--brand-100);
|
||||
|
||||
--muted: var(--gray-100);
|
||||
--muted-foreground: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--card: var(--gray-0);
|
||||
--card-border: var(--gray-200);
|
||||
|
||||
--input-bg: var(--gray-0);
|
||||
--input-border: var(--gray-300);
|
||||
--input-focus: var(--brand-500);
|
||||
|
||||
--ring: var(--brand-500);
|
||||
|
||||
--destructive: var(--error);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
--gradient-start: oklch(96.5% 0 0);
|
||||
--gradient-end: oklch(100% 0 0);
|
||||
|
||||
/* Status colors - light mode backgrounds */
|
||||
--success-light: oklch(94% 0.05 145);
|
||||
--warning-light: oklch(95% 0.05 85);
|
||||
--error-light: oklch(94% 0.05 25);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Inverted/Contrast Section — deep cyan-dark
|
||||
------------------------------------------------------------------------- */
|
||||
--surface-invert: oklch(9.5% 0.012 200);
|
||||
--surface-invert-secondary: oklch(13.5% 0.010 200);
|
||||
--surface-invert-tertiary: oklch(17.5% 0.008 200);
|
||||
--on-invert: var(--gray-50);
|
||||
--on-invert-secondary: var(--gray-200);
|
||||
--on-invert-muted: var(--gray-300);
|
||||
--border-invert: oklch(21% 0.010 200);
|
||||
--border-invert-strong: oklch(29% 0.008 200);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Typography
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-font-sans: 'Manrope Variable', 'Manrope', ui-sans-serif, system-ui,
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||||
Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--theme-font-display: 'Outfit Variable', 'Outfit', var(--theme-font-sans);
|
||||
--theme-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace,
|
||||
SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--theme-heading-weight: 700;
|
||||
--theme-heading-tracking: -0.02em;
|
||||
--theme-body-leading: 1.6;
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Shadows — cyan-tinted
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-shadow-sm: 0 1px 2px oklch(20% 0.01 200 / 0.06);
|
||||
--theme-shadow-md: 0 4px 8px oklch(20% 0.01 200 / 0.08),
|
||||
0 0 1px oklch(20% 0.01 200 / 0.04);
|
||||
--theme-shadow-lg: 0 8px 16px oklch(20% 0.01 200 / 0.1),
|
||||
0 0 1px oklch(20% 0.01 200 / 0.04);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(20% 0.01 200 / 0.14),
|
||||
0 0 1px oklch(20% 0.01 200 / 0.04);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Border Radii
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-radius-sm: 0.25rem; /* 4px */
|
||||
--theme-radius-md: 0.375rem; /* 6px */
|
||||
--theme-radius-lg: 0.5rem; /* 8px */
|
||||
--theme-radius-xl: 0.625rem; /* 10px */
|
||||
--theme-radius-full: 9999px;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Dark Mode — deep near-black with cyan glow
|
||||
------------------------------------------------------------------------- */
|
||||
html.dark[data-theme="cyan"] {
|
||||
--background: oklch(9.5% 0.012 200);
|
||||
--background-secondary: oklch(15% 0.010 200);
|
||||
--background-tertiary: oklch(20% 0.008 200);
|
||||
--background-elevated: oklch(15% 0.010 200);
|
||||
|
||||
--foreground: oklch(94% 0.008 200);
|
||||
--foreground-secondary: oklch(82% 0.010 200);
|
||||
--foreground-muted: oklch(68% 0.008 200);
|
||||
--foreground-subtle: oklch(58% 0.006 200); /* ~4.8:1 on bg — WCAG AA */
|
||||
|
||||
--border: oklch(20% 0.010 200);
|
||||
--border-strong: oklch(27% 0.008 200);
|
||||
--border-subtle: oklch(13.5% 0.010 200);
|
||||
|
||||
--primary: oklch(94% 0.008 200);
|
||||
--primary-hover: oklch(82% 0.010 200);
|
||||
--primary-foreground: oklch(9.5% 0.012 200);
|
||||
|
||||
--secondary: oklch(20% 0.008 200);
|
||||
--secondary-hover: oklch(24% 0.008 200);
|
||||
--secondary-foreground: oklch(90% 0.008 200);
|
||||
|
||||
--accent: var(--brand-400);
|
||||
--accent-hover: var(--brand-500);
|
||||
--accent-light: oklch(18% 0.06 200);
|
||||
|
||||
--muted: oklch(20% 0.008 200);
|
||||
--muted-foreground: oklch(68% 0.008 200);
|
||||
|
||||
--card: oklch(15% 0.010 200);
|
||||
--card-border: oklch(23% 0.010 200);
|
||||
|
||||
--input-bg: oklch(15% 0.010 200);
|
||||
--input-border: oklch(27% 0.008 200);
|
||||
--input-focus: var(--brand-400);
|
||||
|
||||
--ring: var(--brand-400);
|
||||
|
||||
--destructive: oklch(65% 0.22 25);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
--gradient-start: oklch(9.5% 0.012 200);
|
||||
--gradient-end: oklch(13% 0.010 200);
|
||||
|
||||
--success-light: oklch(18% 0.06 155);
|
||||
--warning-light: oklch(18% 0.05 85);
|
||||
--error-light: oklch(18% 0.05 25);
|
||||
|
||||
--surface-invert: oklch(13% 0.010 200);
|
||||
--surface-invert-secondary: oklch(16.5% 0.008 200);
|
||||
--surface-invert-tertiary: oklch(21% 0.008 200);
|
||||
--on-invert: oklch(94% 0.008 200);
|
||||
--on-invert-secondary: oklch(72% 0.010 200);
|
||||
--on-invert-muted: oklch(68% 0.008 200);
|
||||
--border-invert: oklch(21% 0.008 200);
|
||||
--border-invert-strong: oklch(29% 0.007 200);
|
||||
|
||||
--theme-shadow-sm: 0 1px 3px oklch(9% 0.02 200 / 0.35);
|
||||
--theme-shadow-md: 0 4px 12px oklch(9% 0.02 200 / 0.4),
|
||||
0 0 1px oklch(9% 0.02 200 / 0.15);
|
||||
--theme-shadow-lg: 0 8px 24px oklch(9% 0.02 200 / 0.45),
|
||||
0 1px 2px oklch(50% 0.15 200 / 0.06);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(9% 0.02 200 / 0.55),
|
||||
0 2px 4px oklch(50% 0.15 200 / 0.09);
|
||||
}
|
||||
@@ -0,0 +1,206 @@
|
||||
/* =============================================================================
|
||||
Astro Rocket Theme - Emerald
|
||||
=============================================================================
|
||||
Rich emerald-green brand (hue 160°). One of the most popular accent colours
|
||||
in modern web design — warm enough to feel organic, cool enough to feel
|
||||
polished. Especially strong in the Tailwind/indie community.
|
||||
|
||||
Dark mode: near-black with a subtle green tint and emerald glow.
|
||||
Light mode: clean neutral whites with emerald as the single accent.
|
||||
|
||||
To use: swap the theme import in tokens/colors.css:
|
||||
@import '../themes/emerald.css';
|
||||
============================================================================= */
|
||||
|
||||
html[data-theme="emerald"] {
|
||||
/* -------------------------------------------------------------------------
|
||||
Brand Scale Override — Emerald (hue 160)
|
||||
Richer and warmer than teal, crisper than lime.
|
||||
------------------------------------------------------------------------- */
|
||||
--brand-50: oklch(97.5% 0.02 160);
|
||||
--brand-100: oklch(94.8% 0.05 160);
|
||||
--brand-200: oklch(87.5% 0.10 160);
|
||||
--brand-300: oklch(77.8% 0.16 160);
|
||||
--brand-400: oklch(69.5% 0.20 160);
|
||||
--brand-500: oklch(62.5% 0.22 160);
|
||||
--brand-600: oklch(53.2% 0.19 160);
|
||||
--brand-700: oklch(45.5% 0.16 160);
|
||||
--brand-800: oklch(37.2% 0.13 160);
|
||||
--brand-900: oklch(26.5% 0.09 160);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Semantic Tokens - Light Mode
|
||||
Clean neutral whites — emerald accent does all the work.
|
||||
------------------------------------------------------------------------- */
|
||||
--background: var(--gray-0);
|
||||
--background-secondary: oklch(97.5% 0.010 160);
|
||||
--background-tertiary: oklch(95% 0.018 160);
|
||||
--background-elevated: var(--gray-0);
|
||||
|
||||
--foreground: var(--gray-900); /* 18.3:1 on white — WCAG AAA */
|
||||
--foreground-secondary: var(--gray-700); /* 12.7:1 on white — WCAG AAA */
|
||||
--foreground-muted: var(--gray-600); /* 10.0:1 on white — WCAG AA */
|
||||
--foreground-subtle: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--border: var(--gray-200);
|
||||
--border-strong: var(--gray-300);
|
||||
--border-subtle: var(--gray-100);
|
||||
|
||||
--primary: var(--gray-900);
|
||||
--primary-hover: var(--gray-800);
|
||||
--primary-foreground: var(--gray-0);
|
||||
|
||||
--secondary: var(--gray-100);
|
||||
--secondary-hover: var(--gray-200);
|
||||
--secondary-foreground: var(--gray-900);
|
||||
|
||||
--accent: var(--brand-500);
|
||||
--accent-hover: var(--brand-600);
|
||||
--accent-light: var(--brand-100);
|
||||
|
||||
--muted: var(--gray-100);
|
||||
--muted-foreground: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--card: var(--gray-0);
|
||||
--card-border: var(--gray-200);
|
||||
|
||||
--input-bg: var(--gray-0);
|
||||
--input-border: var(--gray-300);
|
||||
--input-focus: var(--brand-500);
|
||||
|
||||
--ring: var(--brand-500);
|
||||
|
||||
/* Destructive */
|
||||
--destructive: var(--error);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
/* Gradient colors */
|
||||
--gradient-start: oklch(96.5% 0 0);
|
||||
--gradient-end: oklch(100% 0 0);
|
||||
|
||||
/* Status colors - light mode backgrounds */
|
||||
--success-light: oklch(94% 0.05 145);
|
||||
--warning-light: oklch(95% 0.05 85);
|
||||
--error-light: oklch(94% 0.05 25);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Inverted/Contrast Section — deep emerald-dark
|
||||
------------------------------------------------------------------------- */
|
||||
--surface-invert: oklch(9.5% 0.01 160);
|
||||
--surface-invert-secondary: oklch(13.5% 0.01 160);
|
||||
--surface-invert-tertiary: oklch(17.5% 0.008 160);
|
||||
--on-invert: var(--gray-50);
|
||||
--on-invert-secondary: var(--gray-200);
|
||||
--on-invert-muted: var(--gray-300);
|
||||
--border-invert: oklch(21% 0.01 160);
|
||||
--border-invert-strong: oklch(29% 0.008 160);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Typography — Manrope (body) + Outfit (display)
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-font-sans: 'Manrope Variable', 'Manrope', ui-sans-serif, system-ui,
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||||
Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--theme-font-display: 'Outfit Variable', 'Outfit', var(--theme-font-sans);
|
||||
--theme-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace,
|
||||
SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--theme-heading-weight: 700;
|
||||
--theme-heading-tracking: -0.02em;
|
||||
--theme-body-leading: 1.6;
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Shadows — emerald-tinted
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-shadow-sm: 0 1px 2px oklch(20% 0.01 160 / 0.06);
|
||||
--theme-shadow-md: 0 4px 8px oklch(20% 0.01 160 / 0.08),
|
||||
0 0 1px oklch(20% 0.01 160 / 0.04);
|
||||
--theme-shadow-lg: 0 8px 16px oklch(20% 0.01 160 / 0.1),
|
||||
0 0 1px oklch(20% 0.01 160 / 0.04);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(20% 0.01 160 / 0.14),
|
||||
0 0 1px oklch(20% 0.01 160 / 0.04);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Border Radii
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-radius-sm: 0.25rem; /* 4px */
|
||||
--theme-radius-md: 0.375rem; /* 6px */
|
||||
--theme-radius-lg: 0.5rem; /* 8px */
|
||||
--theme-radius-xl: 0.625rem; /* 10px */
|
||||
--theme-radius-full: 9999px;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Dark Mode — deep near-black with emerald glow
|
||||
------------------------------------------------------------------------- */
|
||||
html.dark[data-theme="emerald"] {
|
||||
--background: oklch(9.5% 0.012 160);
|
||||
--background-secondary: oklch(15% 0.01 160);
|
||||
--background-tertiary: oklch(20% 0.008 160);
|
||||
--background-elevated: oklch(15% 0.01 160);
|
||||
|
||||
--foreground: oklch(91% 0.008 160); /* emerald-tinted near-white — 15:1 on dark bg, WCAG AAA */
|
||||
--foreground-secondary: oklch(82% 0.01 160);
|
||||
--foreground-muted: oklch(68% 0.008 160);
|
||||
--foreground-subtle: oklch(58% 0.006 160); /* ~4.8:1 on bg — WCAG AA */
|
||||
|
||||
--border: oklch(20% 0.01 160);
|
||||
--border-strong: oklch(27% 0.008 160);
|
||||
--border-subtle: oklch(13.5% 0.01 160);
|
||||
|
||||
--primary: oklch(94% 0.008 160);
|
||||
--primary-hover: oklch(82% 0.01 160);
|
||||
--primary-foreground: oklch(9.5% 0.012 160);
|
||||
|
||||
--secondary: oklch(20% 0.008 160);
|
||||
--secondary-hover: oklch(24% 0.008 160);
|
||||
--secondary-foreground: oklch(90% 0.008 160);
|
||||
|
||||
--accent: var(--brand-400);
|
||||
--accent-hover: var(--brand-500);
|
||||
--accent-light: oklch(18% 0.06 160);
|
||||
|
||||
--muted: oklch(20% 0.008 160);
|
||||
--muted-foreground: oklch(68% 0.008 160);
|
||||
|
||||
--card: oklch(15% 0.01 160);
|
||||
--card-border: oklch(23% 0.01 160);
|
||||
|
||||
--input-bg: oklch(15% 0.01 160);
|
||||
--input-border: oklch(27% 0.008 160);
|
||||
--input-focus: var(--brand-400);
|
||||
|
||||
--ring: var(--brand-400);
|
||||
|
||||
--destructive: oklch(65% 0.22 25);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
/* Gradient colors */
|
||||
--gradient-start: oklch(9.5% 0.012 160);
|
||||
--gradient-end: oklch(13% 0.01 160);
|
||||
|
||||
/* Status colors */
|
||||
--success-light: oklch(18% 0.06 155);
|
||||
--warning-light: oklch(18% 0.05 85);
|
||||
--error-light: oklch(18% 0.05 25);
|
||||
|
||||
/* Inverted section in dark mode */
|
||||
--surface-invert: oklch(13% 0.01 160);
|
||||
--surface-invert-secondary: oklch(16.5% 0.008 160);
|
||||
--surface-invert-tertiary: oklch(21% 0.008 160);
|
||||
--on-invert: oklch(94% 0.008 160);
|
||||
--on-invert-secondary: oklch(72% 0.01 160);
|
||||
--on-invert-muted: oklch(68% 0.008 160);
|
||||
--border-invert: oklch(21% 0.008 160);
|
||||
--border-invert-strong: oklch(29% 0.007 160);
|
||||
|
||||
/* Shadows — emerald-tinted, deep */
|
||||
--theme-shadow-sm: 0 1px 3px oklch(9% 0.02 160 / 0.35);
|
||||
--theme-shadow-md: 0 4px 12px oklch(9% 0.02 160 / 0.4),
|
||||
0 0 1px oklch(9% 0.02 160 / 0.15);
|
||||
--theme-shadow-lg: 0 8px 24px oklch(9% 0.02 160 / 0.45),
|
||||
0 1px 2px oklch(50% 0.15 160 / 0.06);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(9% 0.02 160 / 0.55),
|
||||
0 2px 4px oklch(50% 0.15 160 / 0.09);
|
||||
}
|
||||
@@ -0,0 +1,206 @@
|
||||
/* =============================================================================
|
||||
Astro Rocket Theme - Verdant
|
||||
=============================================================================
|
||||
Deep near-black backgrounds with rich emerald green accent. The aesthetic
|
||||
of the Supabase generation — performance, growth, open source.
|
||||
|
||||
Dark mode: near-black with a barely-there green tint and emerald glow.
|
||||
Light mode: clean neutral whites with emerald as the single accent.
|
||||
|
||||
To use: swap the theme import in tokens/colors.css:
|
||||
@import '../themes/verdant.css';
|
||||
============================================================================= */
|
||||
|
||||
html[data-theme="green"] {
|
||||
/* -------------------------------------------------------------------------
|
||||
Brand Scale Override — Emerald (hue 155)
|
||||
Rich, deep green. Not lime, not mint — emerald.
|
||||
------------------------------------------------------------------------- */
|
||||
--brand-50: oklch(97.5% 0.02 155);
|
||||
--brand-100: oklch(94.8% 0.04 155);
|
||||
--brand-200: oklch(87.5% 0.08 155);
|
||||
--brand-300: oklch(77.8% 0.14 155);
|
||||
--brand-400: oklch(68.5% 0.19 155);
|
||||
--brand-500: oklch(62.5% 0.22 155);
|
||||
--brand-600: oklch(53.2% 0.19 155);
|
||||
--brand-700: oklch(45.5% 0.16 155);
|
||||
--brand-800: oklch(37.2% 0.13 155);
|
||||
--brand-900: oklch(26.5% 0.09 155);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Semantic Tokens - Light Mode
|
||||
Clean neutral whites — emerald accent does all the work.
|
||||
------------------------------------------------------------------------- */
|
||||
--background: var(--gray-0);
|
||||
--background-secondary: oklch(97.5% 0.010 155);
|
||||
--background-tertiary: oklch(95% 0.018 155);
|
||||
--background-elevated: var(--gray-0);
|
||||
|
||||
--foreground: var(--gray-900); /* 18.3:1 on white — WCAG AAA */
|
||||
--foreground-secondary: var(--gray-700); /* 12.7:1 on white — WCAG AAA */
|
||||
--foreground-muted: var(--gray-600); /* 10.0:1 on white — WCAG AA */
|
||||
--foreground-subtle: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--border: var(--gray-200);
|
||||
--border-strong: var(--gray-300);
|
||||
--border-subtle: var(--gray-100);
|
||||
|
||||
--primary: var(--gray-900);
|
||||
--primary-hover: var(--gray-800);
|
||||
--primary-foreground: var(--gray-0);
|
||||
|
||||
--secondary: var(--gray-100);
|
||||
--secondary-hover: var(--gray-200);
|
||||
--secondary-foreground: var(--gray-900);
|
||||
|
||||
--accent: var(--brand-500);
|
||||
--accent-hover: var(--brand-600);
|
||||
--accent-light: var(--brand-100);
|
||||
|
||||
--muted: var(--gray-100);
|
||||
--muted-foreground: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--card: var(--gray-0);
|
||||
--card-border: var(--gray-200);
|
||||
|
||||
--input-bg: var(--gray-0);
|
||||
--input-border: var(--gray-300);
|
||||
--input-focus: var(--brand-500);
|
||||
|
||||
--ring: var(--brand-500);
|
||||
|
||||
/* Destructive */
|
||||
--destructive: var(--error);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
/* Gradient colors */
|
||||
--gradient-start: oklch(96.5% 0 0);
|
||||
--gradient-end: oklch(100% 0 0);
|
||||
|
||||
/* Status colors - light mode backgrounds */
|
||||
--success-light: oklch(94% 0.05 145);
|
||||
--warning-light: oklch(95% 0.05 85);
|
||||
--error-light: oklch(94% 0.05 25);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Inverted/Contrast Section — deep emerald-dark
|
||||
------------------------------------------------------------------------- */
|
||||
--surface-invert: oklch(9.5% 0.01 155);
|
||||
--surface-invert-secondary: oklch(13.5% 0.01 155);
|
||||
--surface-invert-tertiary: oklch(17.5% 0.008 155);
|
||||
--on-invert: var(--gray-50);
|
||||
--on-invert-secondary: var(--gray-200);
|
||||
--on-invert-muted: var(--gray-300);
|
||||
--border-invert: oklch(21% 0.01 155);
|
||||
--border-invert-strong: oklch(29% 0.008 155);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Typography — Manrope (body) + Outfit (display)
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-font-sans: 'Manrope Variable', 'Manrope', ui-sans-serif, system-ui,
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||||
Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--theme-font-display: 'Outfit Variable', 'Outfit', var(--theme-font-sans);
|
||||
--theme-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace,
|
||||
SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--theme-heading-weight: 700;
|
||||
--theme-heading-tracking: -0.02em;
|
||||
--theme-body-leading: 1.6;
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Shadows — green-tinted
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-shadow-sm: 0 1px 2px oklch(20% 0.01 155 / 0.06);
|
||||
--theme-shadow-md: 0 4px 8px oklch(20% 0.01 155 / 0.08),
|
||||
0 0 1px oklch(20% 0.01 155 / 0.04);
|
||||
--theme-shadow-lg: 0 8px 16px oklch(20% 0.01 155 / 0.1),
|
||||
0 0 1px oklch(20% 0.01 155 / 0.04);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(20% 0.01 155 / 0.14),
|
||||
0 0 1px oklch(20% 0.01 155 / 0.04);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Border Radii
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-radius-sm: 0.25rem; /* 4px */
|
||||
--theme-radius-md: 0.375rem; /* 6px */
|
||||
--theme-radius-lg: 0.5rem; /* 8px */
|
||||
--theme-radius-xl: 0.625rem; /* 10px */
|
||||
--theme-radius-full: 9999px;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Dark Mode — deep near-black with emerald glow
|
||||
Supabase-generation aesthetic. Terminal green reborn as premium.
|
||||
------------------------------------------------------------------------- */
|
||||
html.dark[data-theme="green"] {
|
||||
--background: oklch(9.5% 0.012 155);
|
||||
--background-secondary: oklch(15% 0.01 155);
|
||||
--background-tertiary: oklch(20% 0.008 155);
|
||||
--background-elevated: oklch(15% 0.01 155);
|
||||
|
||||
--foreground: oklch(94% 0.008 155); /* cool near-white — WCAG AAA */
|
||||
--foreground-secondary: oklch(82% 0.01 155);
|
||||
--foreground-muted: oklch(68% 0.008 155);
|
||||
--foreground-subtle: oklch(58% 0.006 155); /* ~4.8:1 on bg — WCAG AA */
|
||||
|
||||
--border: oklch(20% 0.01 155);
|
||||
--border-strong: oklch(27% 0.008 155);
|
||||
--border-subtle: oklch(13.5% 0.01 155);
|
||||
|
||||
--primary: oklch(94% 0.008 155);
|
||||
--primary-hover: oklch(82% 0.01 155);
|
||||
--primary-foreground: oklch(9.5% 0.012 155);
|
||||
|
||||
--secondary: oklch(20% 0.008 155);
|
||||
--secondary-hover: oklch(24% 0.008 155);
|
||||
--secondary-foreground: oklch(90% 0.008 155);
|
||||
|
||||
--accent: var(--brand-400);
|
||||
--accent-hover: var(--brand-500);
|
||||
--accent-light: oklch(18% 0.06 155);
|
||||
|
||||
--muted: oklch(20% 0.008 155);
|
||||
--muted-foreground: oklch(68% 0.008 155);
|
||||
|
||||
--card: oklch(15% 0.01 155);
|
||||
--card-border: oklch(23% 0.01 155);
|
||||
|
||||
--input-bg: oklch(15% 0.01 155);
|
||||
--input-border: oklch(27% 0.008 155);
|
||||
--input-focus: var(--brand-400);
|
||||
|
||||
--ring: var(--brand-400);
|
||||
|
||||
--destructive: oklch(65% 0.22 25);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
/* Gradient colors */
|
||||
--gradient-start: oklch(9.5% 0.012 155);
|
||||
--gradient-end: oklch(13% 0.01 155);
|
||||
|
||||
/* Status colors */
|
||||
--success-light: oklch(18% 0.06 155);
|
||||
--warning-light: oklch(18% 0.05 85);
|
||||
--error-light: oklch(18% 0.05 25);
|
||||
|
||||
/* Inverted section in dark mode */
|
||||
--surface-invert: oklch(13% 0.01 155);
|
||||
--surface-invert-secondary: oklch(16.5% 0.008 155);
|
||||
--surface-invert-tertiary: oklch(21% 0.008 155);
|
||||
--on-invert: oklch(94% 0.008 155);
|
||||
--on-invert-secondary: oklch(72% 0.01 155);
|
||||
--on-invert-muted: oklch(68% 0.008 155);
|
||||
--border-invert: oklch(21% 0.008 155);
|
||||
--border-invert-strong: oklch(29% 0.007 155);
|
||||
|
||||
/* Shadows — emerald-tinted, deep */
|
||||
--theme-shadow-sm: 0 1px 3px oklch(9% 0.02 155 / 0.35);
|
||||
--theme-shadow-md: 0 4px 12px oklch(9% 0.02 155 / 0.4),
|
||||
0 0 1px oklch(9% 0.02 155 / 0.15);
|
||||
--theme-shadow-lg: 0 8px 24px oklch(9% 0.02 155 / 0.45),
|
||||
0 1px 2px oklch(50% 0.15 155 / 0.06);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(9% 0.02 155 / 0.55),
|
||||
0 2px 4px oklch(50% 0.15 155 / 0.09);
|
||||
}
|
||||
@@ -0,0 +1,196 @@
|
||||
/* =============================================================================
|
||||
Astro Rocket Theme - Indigo
|
||||
=============================================================================
|
||||
Deep indigo (hue 264°). Authoritative, bold, and focused — inspired by
|
||||
Tailwind's indigo palette. The classic "serious blue-purple" used in
|
||||
enterprise and productivity tools.
|
||||
|
||||
Dark mode: near-black with a rich indigo tint and deep glow.
|
||||
Light mode: clean neutral whites with indigo as the single accent.
|
||||
============================================================================= */
|
||||
|
||||
html[data-theme="indigo"] {
|
||||
/* -------------------------------------------------------------------------
|
||||
Brand Scale Override — Indigo (hue 264)
|
||||
Inspired by Tailwind indigo-*. Deep blue-purple, authoritative.
|
||||
------------------------------------------------------------------------- */
|
||||
--brand-50: oklch(97.5% 0.02 264);
|
||||
--brand-100: oklch(94.5% 0.05 264);
|
||||
--brand-200: oklch(86% 0.11 264);
|
||||
--brand-300: oklch(75% 0.18 264);
|
||||
--brand-400: oklch(67% 0.22 264);
|
||||
--brand-500: oklch(60% 0.24 264);
|
||||
--brand-600: oklch(52% 0.22 264);
|
||||
--brand-700: oklch(44% 0.18 264);
|
||||
--brand-800: oklch(36% 0.14 264);
|
||||
--brand-900: oklch(26% 0.09 264);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Semantic Tokens - Light Mode
|
||||
------------------------------------------------------------------------- */
|
||||
--background: var(--gray-0);
|
||||
--background-secondary: oklch(97.5% 0.010 264);
|
||||
--background-tertiary: oklch(95% 0.018 264);
|
||||
--background-elevated: var(--gray-0);
|
||||
|
||||
--foreground: var(--gray-900); /* 18.3:1 on white — WCAG AAA */
|
||||
--foreground-secondary: var(--gray-700); /* 12.7:1 on white — WCAG AAA */
|
||||
--foreground-muted: var(--gray-600); /* 10.0:1 on white — WCAG AA */
|
||||
--foreground-subtle: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--border: var(--gray-200);
|
||||
--border-strong: var(--gray-300);
|
||||
--border-subtle: var(--gray-100);
|
||||
|
||||
--primary: var(--gray-900);
|
||||
--primary-hover: var(--gray-800);
|
||||
--primary-foreground: var(--gray-0);
|
||||
|
||||
--secondary: var(--gray-100);
|
||||
--secondary-hover: var(--gray-200);
|
||||
--secondary-foreground: var(--gray-900);
|
||||
|
||||
--accent: var(--brand-500);
|
||||
--accent-hover: var(--brand-600);
|
||||
--accent-light: var(--brand-100);
|
||||
|
||||
--muted: var(--gray-100);
|
||||
--muted-foreground: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--card: var(--gray-0);
|
||||
--card-border: var(--gray-200);
|
||||
|
||||
--input-bg: var(--gray-0);
|
||||
--input-border: var(--gray-300);
|
||||
--input-focus: var(--brand-500);
|
||||
|
||||
--ring: var(--brand-500);
|
||||
|
||||
--destructive: var(--error);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
--gradient-start: oklch(96.5% 0 0);
|
||||
--gradient-end: oklch(100% 0 0);
|
||||
|
||||
/* Status colors - light mode backgrounds */
|
||||
--success-light: oklch(94% 0.05 145);
|
||||
--warning-light: oklch(95% 0.05 85);
|
||||
--error-light: oklch(94% 0.05 25);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Inverted/Contrast Section — deep indigo-dark
|
||||
------------------------------------------------------------------------- */
|
||||
--surface-invert: oklch(9.5% 0.015 264);
|
||||
--surface-invert-secondary: oklch(13.5% 0.012 264);
|
||||
--surface-invert-tertiary: oklch(17.5% 0.010 264);
|
||||
--on-invert: var(--gray-50);
|
||||
--on-invert-secondary: var(--gray-200);
|
||||
--on-invert-muted: var(--gray-300);
|
||||
--border-invert: oklch(21% 0.012 264);
|
||||
--border-invert-strong: oklch(29% 0.010 264);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Typography
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-font-sans: 'Manrope Variable', 'Manrope', ui-sans-serif, system-ui,
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||||
Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--theme-font-display: 'Outfit Variable', 'Outfit', var(--theme-font-sans);
|
||||
--theme-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace,
|
||||
SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--theme-heading-weight: 700;
|
||||
--theme-heading-tracking: -0.02em;
|
||||
--theme-body-leading: 1.6;
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Shadows — indigo-tinted
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-shadow-sm: 0 1px 2px oklch(20% 0.02 264 / 0.07);
|
||||
--theme-shadow-md: 0 4px 8px oklch(20% 0.02 264 / 0.09),
|
||||
0 0 1px oklch(20% 0.02 264 / 0.05);
|
||||
--theme-shadow-lg: 0 8px 16px oklch(20% 0.02 264 / 0.11),
|
||||
0 0 1px oklch(20% 0.02 264 / 0.05);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(20% 0.02 264 / 0.16),
|
||||
0 0 1px oklch(20% 0.02 264 / 0.05);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Border Radii
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-radius-sm: 0.25rem; /* 4px */
|
||||
--theme-radius-md: 0.375rem; /* 6px */
|
||||
--theme-radius-lg: 0.5rem; /* 8px */
|
||||
--theme-radius-xl: 0.625rem; /* 10px */
|
||||
--theme-radius-full: 9999px;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Dark Mode — deep near-black with indigo depth
|
||||
------------------------------------------------------------------------- */
|
||||
html.dark[data-theme="indigo"] {
|
||||
--background: oklch(9.5% 0.015 264);
|
||||
--background-secondary: oklch(15% 0.012 264);
|
||||
--background-tertiary: oklch(20% 0.010 264);
|
||||
--background-elevated: oklch(15% 0.012 264);
|
||||
|
||||
--foreground: oklch(94% 0.010 264);
|
||||
--foreground-secondary: oklch(82% 0.012 264);
|
||||
--foreground-muted: oklch(68% 0.010 264);
|
||||
--foreground-subtle: oklch(58% 0.008 264); /* ~4.8:1 on bg — WCAG AA */
|
||||
|
||||
--border: oklch(20% 0.012 264);
|
||||
--border-strong: oklch(27% 0.010 264);
|
||||
--border-subtle: oklch(13.5% 0.012 264);
|
||||
|
||||
--primary: oklch(94% 0.010 264);
|
||||
--primary-hover: oklch(82% 0.012 264);
|
||||
--primary-foreground: oklch(9.5% 0.015 264);
|
||||
|
||||
--secondary: oklch(20% 0.010 264);
|
||||
--secondary-hover: oklch(24% 0.010 264);
|
||||
--secondary-foreground: oklch(90% 0.010 264);
|
||||
|
||||
--accent: var(--brand-400);
|
||||
--accent-hover: var(--brand-500);
|
||||
--accent-light: oklch(18% 0.07 264);
|
||||
|
||||
--muted: oklch(20% 0.010 264);
|
||||
--muted-foreground: oklch(68% 0.010 264);
|
||||
|
||||
--card: oklch(15% 0.012 264);
|
||||
--card-border: oklch(23% 0.012 264);
|
||||
|
||||
--input-bg: oklch(15% 0.012 264);
|
||||
--input-border: oklch(27% 0.010 264);
|
||||
--input-focus: var(--brand-400);
|
||||
|
||||
--ring: var(--brand-400);
|
||||
|
||||
--destructive: oklch(65% 0.22 25);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
--gradient-start: oklch(9.5% 0.015 264);
|
||||
--gradient-end: oklch(13% 0.012 264);
|
||||
|
||||
--success-light: oklch(18% 0.06 155);
|
||||
--warning-light: oklch(18% 0.05 85);
|
||||
--error-light: oklch(18% 0.05 25);
|
||||
|
||||
--surface-invert: oklch(13% 0.012 264);
|
||||
--surface-invert-secondary: oklch(16.5% 0.010 264);
|
||||
--surface-invert-tertiary: oklch(21% 0.010 264);
|
||||
--on-invert: oklch(94% 0.010 264);
|
||||
--on-invert-secondary: oklch(72% 0.012 264);
|
||||
--on-invert-muted: oklch(68% 0.010 264);
|
||||
--border-invert: oklch(21% 0.010 264);
|
||||
--border-invert-strong: oklch(29% 0.009 264);
|
||||
|
||||
--theme-shadow-sm: 0 1px 3px oklch(9% 0.03 264 / 0.35);
|
||||
--theme-shadow-md: 0 4px 12px oklch(9% 0.03 264 / 0.4),
|
||||
0 0 1px oklch(9% 0.03 264 / 0.15);
|
||||
--theme-shadow-lg: 0 8px 24px oklch(9% 0.03 264 / 0.45),
|
||||
0 1px 2px oklch(50% 0.18 264 / 0.07);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(9% 0.03 264 / 0.55),
|
||||
0 2px 4px oklch(50% 0.18 264 / 0.10);
|
||||
}
|
||||
@@ -0,0 +1,208 @@
|
||||
/* =============================================================================
|
||||
Astro Rocket Theme - Lime
|
||||
=============================================================================
|
||||
Electric lime-green brand (hue 130°). Not the natural emerald of Verdant —
|
||||
this is the high-voltage green of modern dev tooling. Think Vercel, Resend,
|
||||
Linear. Energetic, innovative, forward-looking.
|
||||
|
||||
Dark mode: near-black with a striking electric green glow.
|
||||
Light mode: clean neutral whites with electric lime as the single accent.
|
||||
|
||||
To use: swap the theme import in tokens/colors.css:
|
||||
@import '../themes/lime.css';
|
||||
============================================================================= */
|
||||
|
||||
html[data-theme="lime"] {
|
||||
/* -------------------------------------------------------------------------
|
||||
Brand Scale Override — Electric Lime (hue 130)
|
||||
Yellow-green territory. High chroma (0.27) — vivid and punchy.
|
||||
Distinct from Verdant (hue 155, lower chroma) — this bites.
|
||||
------------------------------------------------------------------------- */
|
||||
--brand-50: oklch(97.5% 0.03 130);
|
||||
--brand-100: oklch(94% 0.06 130);
|
||||
--brand-200: oklch(87% 0.12 130);
|
||||
--brand-300: oklch(80% 0.19 130);
|
||||
--brand-400: oklch(72% 0.25 130);
|
||||
--brand-500: oklch(64% 0.27 130);
|
||||
--brand-600: oklch(54% 0.23 130);
|
||||
--brand-700: oklch(45% 0.19 130);
|
||||
--brand-800: oklch(36% 0.14 130);
|
||||
--brand-900: oklch(25% 0.09 130);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Semantic Tokens - Light Mode
|
||||
Clean neutral whites — lime accent does all the work.
|
||||
------------------------------------------------------------------------- */
|
||||
--background: var(--gray-0);
|
||||
--background-secondary: oklch(97.5% 0.010 130);
|
||||
--background-tertiary: oklch(95% 0.018 130);
|
||||
--background-elevated: var(--gray-0);
|
||||
|
||||
--foreground: var(--gray-900); /* 18.3:1 on white — WCAG AAA */
|
||||
--foreground-secondary: var(--gray-700); /* 12.7:1 on white — WCAG AAA */
|
||||
--foreground-muted: var(--gray-600); /* 10.0:1 on white — WCAG AA */
|
||||
--foreground-subtle: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--border: var(--gray-200);
|
||||
--border-strong: var(--gray-300);
|
||||
--border-subtle: var(--gray-100);
|
||||
|
||||
--primary: var(--gray-900);
|
||||
--primary-hover: var(--gray-800);
|
||||
--primary-foreground: var(--gray-0);
|
||||
|
||||
--secondary: var(--gray-100);
|
||||
--secondary-hover: var(--gray-200);
|
||||
--secondary-foreground: var(--gray-900);
|
||||
|
||||
--accent: var(--brand-500);
|
||||
--accent-hover: var(--brand-600);
|
||||
--accent-light: var(--brand-100);
|
||||
|
||||
--muted: var(--gray-100);
|
||||
--muted-foreground: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--card: var(--gray-0);
|
||||
--card-border: var(--gray-200);
|
||||
|
||||
--input-bg: var(--gray-0);
|
||||
--input-border: var(--gray-300);
|
||||
--input-focus: var(--brand-500);
|
||||
|
||||
--ring: var(--brand-500);
|
||||
|
||||
/* Destructive */
|
||||
--destructive: var(--error);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
/* Gradient colors */
|
||||
--gradient-start: oklch(96.5% 0 0);
|
||||
--gradient-end: oklch(100% 0 0);
|
||||
|
||||
/* Status colors - light mode backgrounds */
|
||||
--success-light: oklch(94% 0.05 145);
|
||||
--warning-light: oklch(95% 0.05 85);
|
||||
--error-light: oklch(94% 0.05 25);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Inverted/Contrast Section — deep lime-dark
|
||||
------------------------------------------------------------------------- */
|
||||
--surface-invert: oklch(9.5% 0.012 130);
|
||||
--surface-invert-secondary: oklch(13.5% 0.010 130);
|
||||
--surface-invert-tertiary: oklch(17.5% 0.008 130);
|
||||
--on-invert: var(--gray-50);
|
||||
--on-invert-secondary: var(--gray-200);
|
||||
--on-invert-muted: var(--gray-300);
|
||||
--border-invert: oklch(21% 0.010 130);
|
||||
--border-invert-strong: oklch(29% 0.008 130);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Typography — Manrope (body) + Outfit (display)
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-font-sans: 'Manrope Variable', 'Manrope', ui-sans-serif, system-ui,
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||||
Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--theme-font-display: 'Outfit Variable', 'Outfit', var(--theme-font-sans);
|
||||
--theme-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace,
|
||||
SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--theme-heading-weight: 700;
|
||||
--theme-heading-tracking: -0.02em;
|
||||
--theme-body-leading: 1.6;
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Shadows — lime-tinted
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-shadow-sm: 0 1px 2px oklch(20% 0.01 130 / 0.06);
|
||||
--theme-shadow-md: 0 4px 8px oklch(20% 0.01 130 / 0.08),
|
||||
0 0 1px oklch(20% 0.01 130 / 0.04);
|
||||
--theme-shadow-lg: 0 8px 16px oklch(20% 0.01 130 / 0.1),
|
||||
0 0 1px oklch(20% 0.01 130 / 0.04);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(20% 0.01 130 / 0.14),
|
||||
0 0 1px oklch(20% 0.01 130 / 0.04);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Border Radii
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-radius-sm: 0.25rem; /* 4px */
|
||||
--theme-radius-md: 0.375rem; /* 6px */
|
||||
--theme-radius-lg: 0.5rem; /* 8px */
|
||||
--theme-radius-xl: 0.625rem; /* 10px */
|
||||
--theme-radius-full: 9999px;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Dark Mode — near-black with electric lime glow
|
||||
High-voltage. Terminal reborn. Dev-tool aesthetic at its finest.
|
||||
------------------------------------------------------------------------- */
|
||||
html.dark[data-theme="lime"] {
|
||||
--background: oklch(9.5% 0.014 130);
|
||||
--background-secondary: oklch(15% 0.012 130);
|
||||
--background-tertiary: oklch(20% 0.010 130);
|
||||
--background-elevated: oklch(15% 0.012 130);
|
||||
|
||||
--foreground: oklch(91% 0.010 130); /* lime-tinted near-white — 15:1 on dark bg, WCAG AAA */
|
||||
--foreground-secondary: oklch(82% 0.012 130);
|
||||
--foreground-muted: oklch(68% 0.010 130);
|
||||
--foreground-subtle: oklch(58% 0.008 130); /* ~4.8:1 on bg — WCAG AA */
|
||||
|
||||
--border: oklch(20% 0.012 130);
|
||||
--border-strong: oklch(27% 0.010 130);
|
||||
--border-subtle: oklch(13.5% 0.012 130);
|
||||
|
||||
--primary: oklch(94% 0.010 130);
|
||||
--primary-hover: oklch(82% 0.012 130);
|
||||
--primary-foreground: oklch(9.5% 0.014 130);
|
||||
|
||||
--secondary: oklch(20% 0.010 130);
|
||||
--secondary-hover: oklch(24% 0.010 130);
|
||||
--secondary-foreground: oklch(90% 0.010 130);
|
||||
|
||||
--accent: var(--brand-400);
|
||||
--accent-hover: var(--brand-500);
|
||||
--accent-light: oklch(18% 0.07 130);
|
||||
|
||||
--muted: oklch(20% 0.010 130);
|
||||
--muted-foreground: oklch(68% 0.010 130);
|
||||
|
||||
--card: oklch(15% 0.012 130);
|
||||
--card-border: oklch(23% 0.010 130);
|
||||
|
||||
--input-bg: oklch(15% 0.012 130);
|
||||
--input-border: oklch(27% 0.010 130);
|
||||
--input-focus: var(--brand-400);
|
||||
|
||||
--ring: var(--brand-400);
|
||||
|
||||
--destructive: oklch(65% 0.22 25);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
/* Gradient colors */
|
||||
--gradient-start: oklch(9.5% 0.014 130);
|
||||
--gradient-end: oklch(13% 0.012 130);
|
||||
|
||||
/* Status colors */
|
||||
--success-light: oklch(18% 0.07 130);
|
||||
--warning-light: oklch(18% 0.05 85);
|
||||
--error-light: oklch(18% 0.06 25);
|
||||
|
||||
/* Inverted section in dark mode */
|
||||
--surface-invert: oklch(13% 0.012 130);
|
||||
--surface-invert-secondary: oklch(16.5% 0.010 130);
|
||||
--surface-invert-tertiary: oklch(21% 0.008 130);
|
||||
--on-invert: oklch(94% 0.010 130);
|
||||
--on-invert-secondary: oklch(72% 0.012 130);
|
||||
--on-invert-muted: oklch(68% 0.010 130);
|
||||
--border-invert: oklch(21% 0.010 130);
|
||||
--border-invert-strong: oklch(29% 0.008 130);
|
||||
|
||||
/* Shadows — electric lime-tinted, deep */
|
||||
--theme-shadow-sm: 0 1px 3px oklch(9% 0.02 130 / 0.35);
|
||||
--theme-shadow-md: 0 4px 12px oklch(9% 0.02 130 / 0.4),
|
||||
0 0 1px oklch(9% 0.02 130 / 0.15);
|
||||
--theme-shadow-lg: 0 8px 24px oklch(9% 0.02 130 / 0.45),
|
||||
0 1px 2px oklch(55% 0.20 130 / 0.06);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(9% 0.02 130 / 0.55),
|
||||
0 2px 4px oklch(55% 0.20 130 / 0.09);
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
/* =============================================================================
|
||||
Astro Rocket Theme - Magenta
|
||||
=============================================================================
|
||||
Bold, electric magenta brand (hue 330°). Maximum presence — the choice for
|
||||
creative agencies, design studios, and brands that refuse to be ignored.
|
||||
High chroma (0.28) makes it the most vivid theme in the set.
|
||||
|
||||
Dark mode: near-black with a magenta glow. Dramatic, editorial.
|
||||
Light mode: clean neutral whites with electric magenta as the single accent.
|
||||
|
||||
To use: swap the theme import in tokens/colors.css:
|
||||
@import '../themes/magenta.css';
|
||||
============================================================================= */
|
||||
|
||||
html[data-theme="magenta"] {
|
||||
/* -------------------------------------------------------------------------
|
||||
Brand Scale Override — Electric Magenta (hue 330)
|
||||
Hot pink with full saturation. Distinctive and unforgettable.
|
||||
------------------------------------------------------------------------- */
|
||||
--brand-50: oklch(97% 0.025 330);
|
||||
--brand-100: oklch(94% 0.05 330);
|
||||
--brand-200: oklch(87% 0.10 330);
|
||||
--brand-300: oklch(78% 0.17 330);
|
||||
--brand-400: oklch(68% 0.24 330);
|
||||
--brand-500: oklch(58% 0.28 330);
|
||||
--brand-600: oklch(50% 0.25 330);
|
||||
--brand-700: oklch(42% 0.20 330);
|
||||
--brand-800: oklch(33% 0.15 330);
|
||||
--brand-900: oklch(23% 0.10 330);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Semantic Tokens - Light Mode
|
||||
Clean neutral whites — magenta does all the work.
|
||||
------------------------------------------------------------------------- */
|
||||
--background: var(--gray-0);
|
||||
--background-secondary: oklch(97.5% 0.010 330);
|
||||
--background-tertiary: oklch(95% 0.018 330);
|
||||
--background-elevated: var(--gray-0);
|
||||
|
||||
--foreground: var(--gray-900); /* 18.3:1 on white — WCAG AAA */
|
||||
--foreground-secondary: var(--gray-700); /* 12.7:1 on white — WCAG AAA */
|
||||
--foreground-muted: var(--gray-600); /* 10.0:1 on white — WCAG AA */
|
||||
--foreground-subtle: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--border: var(--gray-200);
|
||||
--border-strong: var(--gray-300);
|
||||
--border-subtle: var(--gray-100);
|
||||
|
||||
--primary: var(--gray-900);
|
||||
--primary-hover: var(--gray-800);
|
||||
--primary-foreground: var(--gray-0);
|
||||
|
||||
--secondary: var(--gray-100);
|
||||
--secondary-hover: var(--gray-200);
|
||||
--secondary-foreground: var(--gray-900);
|
||||
|
||||
--accent: var(--brand-500);
|
||||
--accent-hover: var(--brand-600);
|
||||
--accent-light: var(--brand-100);
|
||||
|
||||
--muted: var(--gray-100);
|
||||
--muted-foreground: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--card: var(--gray-0);
|
||||
--card-border: var(--gray-200);
|
||||
|
||||
--input-bg: var(--gray-0);
|
||||
--input-border: var(--gray-300);
|
||||
--input-focus: var(--brand-500);
|
||||
|
||||
--ring: var(--brand-500);
|
||||
|
||||
/* Destructive */
|
||||
--destructive: var(--error);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
/* Gradient colors */
|
||||
--gradient-start: oklch(96.5% 0 0);
|
||||
--gradient-end: oklch(100% 0 0);
|
||||
|
||||
/* Status colors - light mode backgrounds */
|
||||
--success-light: oklch(94% 0.05 145);
|
||||
--warning-light: oklch(95% 0.05 85);
|
||||
--error-light: oklch(94% 0.05 25);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Inverted/Contrast Section — deep magenta-dark
|
||||
------------------------------------------------------------------------- */
|
||||
--surface-invert: oklch(9.5% 0.01 330);
|
||||
--surface-invert-secondary: oklch(13.5% 0.01 330);
|
||||
--surface-invert-tertiary: oklch(17.5% 0.008 330);
|
||||
--on-invert: var(--gray-50);
|
||||
--on-invert-secondary: var(--gray-200);
|
||||
--on-invert-muted: var(--gray-300);
|
||||
--border-invert: oklch(21% 0.01 330);
|
||||
--border-invert-strong: oklch(29% 0.008 330);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Typography — Manrope (body) + Outfit (display)
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-font-sans: 'Manrope Variable', 'Manrope', ui-sans-serif, system-ui,
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||||
Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--theme-font-display: 'Outfit Variable', 'Outfit', var(--theme-font-sans);
|
||||
--theme-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace,
|
||||
SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--theme-heading-weight: 700;
|
||||
--theme-heading-tracking: -0.02em;
|
||||
--theme-body-leading: 1.6;
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Shadows — magenta-tinted
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-shadow-sm: 0 1px 2px oklch(20% 0.01 330 / 0.06);
|
||||
--theme-shadow-md: 0 4px 8px oklch(20% 0.01 330 / 0.08),
|
||||
0 0 1px oklch(20% 0.01 330 / 0.04);
|
||||
--theme-shadow-lg: 0 8px 16px oklch(20% 0.01 330 / 0.1),
|
||||
0 0 1px oklch(20% 0.01 330 / 0.04);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(20% 0.01 330 / 0.14),
|
||||
0 0 1px oklch(20% 0.01 330 / 0.04);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Border Radii
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-radius-sm: 0.25rem; /* 4px */
|
||||
--theme-radius-md: 0.375rem; /* 6px */
|
||||
--theme-radius-lg: 0.5rem; /* 8px */
|
||||
--theme-radius-xl: 0.625rem; /* 10px */
|
||||
--theme-radius-full: 9999px;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Dark Mode — near-black with magenta glow
|
||||
Editorial, dramatic, unforgettable.
|
||||
------------------------------------------------------------------------- */
|
||||
html.dark[data-theme="magenta"] {
|
||||
--background: oklch(9.5% 0.012 330);
|
||||
--background-secondary: oklch(15% 0.01 330);
|
||||
--background-tertiary: oklch(20% 0.008 330);
|
||||
--background-elevated: oklch(15% 0.01 330);
|
||||
|
||||
--foreground: oklch(94% 0.008 330); /* magenta-tinted near-white */
|
||||
--foreground-secondary: oklch(82% 0.01 330);
|
||||
--foreground-muted: oklch(68% 0.008 330);
|
||||
--foreground-subtle: oklch(58% 0.006 330); /* ~4.8:1 on bg — WCAG AA */
|
||||
|
||||
--border: oklch(20% 0.01 330);
|
||||
--border-strong: oklch(27% 0.008 330);
|
||||
--border-subtle: oklch(13.5% 0.01 330);
|
||||
|
||||
--primary: oklch(94% 0.008 330);
|
||||
--primary-hover: oklch(82% 0.01 330);
|
||||
--primary-foreground: oklch(9.5% 0.012 330);
|
||||
|
||||
--secondary: oklch(20% 0.008 330);
|
||||
--secondary-hover: oklch(24% 0.008 330);
|
||||
--secondary-foreground: oklch(90% 0.008 330);
|
||||
|
||||
--accent: var(--brand-400);
|
||||
--accent-hover: var(--brand-500);
|
||||
--accent-light: oklch(18% 0.07 330);
|
||||
|
||||
--muted: oklch(20% 0.008 330);
|
||||
--muted-foreground: oklch(68% 0.008 330);
|
||||
|
||||
--card: oklch(15% 0.01 330);
|
||||
--card-border: oklch(23% 0.01 330);
|
||||
|
||||
--input-bg: oklch(15% 0.01 330);
|
||||
--input-border: oklch(27% 0.008 330);
|
||||
--input-focus: var(--brand-400);
|
||||
|
||||
--ring: var(--brand-400);
|
||||
|
||||
--destructive: oklch(65% 0.22 25);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
/* Gradient colors */
|
||||
--gradient-start: oklch(9.5% 0.012 330);
|
||||
--gradient-end: oklch(13% 0.01 330);
|
||||
|
||||
/* Status colors */
|
||||
--success-light: oklch(18% 0.06 155);
|
||||
--warning-light: oklch(18% 0.05 85);
|
||||
--error-light: oklch(18% 0.06 25);
|
||||
|
||||
/* Inverted section in dark mode */
|
||||
--surface-invert: oklch(13% 0.01 330);
|
||||
--surface-invert-secondary: oklch(16.5% 0.008 330);
|
||||
--surface-invert-tertiary: oklch(21% 0.008 330);
|
||||
--on-invert: oklch(94% 0.008 330);
|
||||
--on-invert-secondary: oklch(72% 0.01 330);
|
||||
--on-invert-muted: oklch(68% 0.008 330);
|
||||
--border-invert: oklch(21% 0.008 330);
|
||||
--border-invert-strong: oklch(29% 0.007 330);
|
||||
|
||||
/* Shadows — magenta-tinted, deep */
|
||||
--theme-shadow-sm: 0 1px 3px oklch(9% 0.02 330 / 0.35);
|
||||
--theme-shadow-md: 0 4px 12px oklch(9% 0.02 330 / 0.4),
|
||||
0 0 1px oklch(9% 0.02 330 / 0.15);
|
||||
--theme-shadow-lg: 0 8px 24px oklch(9% 0.02 330 / 0.45),
|
||||
0 1px 2px oklch(50% 0.18 330 / 0.06);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(9% 0.02 330 / 0.55),
|
||||
0 2px 4px oklch(50% 0.18 330 / 0.09);
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
/* =============================================================================
|
||||
Astro Rocket Theme - Default
|
||||
=============================================================================
|
||||
The default Astro Rocket theme: clean, neutral grays with International Orange
|
||||
accent. This is the default theme shipped with the template.
|
||||
|
||||
Theme Contract: Every theme must define the same set of semantic tokens
|
||||
listed below. Swap this file with another theme to change the entire look.
|
||||
|
||||
Required tokens:
|
||||
Colors (~35): background, foreground, border, primary, secondary, accent,
|
||||
muted, card, input, ring, destructive, gradient, invert section
|
||||
Typography (6): --theme-font-sans, --theme-font-display, --theme-font-mono,
|
||||
--theme-heading-weight, --theme-heading-tracking, --theme-body-leading
|
||||
Shadows (4): --theme-shadow-sm, --theme-shadow-md, --theme-shadow-lg,
|
||||
--theme-shadow-xl
|
||||
Radii (5): --theme-radius-sm, --theme-radius-md, --theme-radius-lg,
|
||||
--theme-radius-xl, --theme-radius-full
|
||||
|
||||
Dark mode: all of the above re-mapped for dark backgrounds
|
||||
============================================================================= */
|
||||
|
||||
html[data-theme="orange"] {
|
||||
/* -------------------------------------------------------------------------
|
||||
Semantic Tokens - Light Mode
|
||||
------------------------------------------------------------------------- */
|
||||
--background: var(--gray-0);
|
||||
--background-secondary: oklch(97.5% 0.010 38);
|
||||
--background-tertiary: oklch(95% 0.018 38);
|
||||
--background-elevated: var(--gray-0);
|
||||
|
||||
--foreground: var(--gray-900); /* 18.3:1 on white — WCAG AAA */
|
||||
--foreground-secondary: var(--gray-700); /* 12.7:1 on white — WCAG AAA */
|
||||
--foreground-muted: var(--gray-600); /* 10.0:1 on white — WCAG AA */
|
||||
--foreground-subtle: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--border: var(--gray-200);
|
||||
--border-strong: var(--gray-300);
|
||||
--border-subtle: var(--gray-100);
|
||||
|
||||
--primary: var(--gray-900);
|
||||
--primary-hover: var(--gray-800);
|
||||
--primary-foreground: var(--gray-0);
|
||||
|
||||
--secondary: var(--gray-100);
|
||||
--secondary-hover: var(--gray-200);
|
||||
--secondary-foreground: var(--gray-900);
|
||||
|
||||
--accent: var(--brand-500);
|
||||
--accent-hover: var(--brand-600);
|
||||
--accent-light: var(--brand-100);
|
||||
|
||||
--muted: var(--gray-100);
|
||||
--muted-foreground: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--card: var(--gray-0);
|
||||
--card-border: var(--gray-200);
|
||||
|
||||
--input-bg: var(--gray-0);
|
||||
--input-border: var(--gray-300);
|
||||
--input-focus: var(--brand-500);
|
||||
|
||||
--ring: var(--brand-500);
|
||||
|
||||
/* Destructive - for delete/remove actions */
|
||||
--destructive: var(--error);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
/* Gradient colors - OKLCH */
|
||||
--gradient-start: oklch(96.5% 0 0);
|
||||
--gradient-end: oklch(100% 0 0);
|
||||
|
||||
/* Status colors - light mode backgrounds */
|
||||
--success-light: oklch(94% 0.05 145);
|
||||
--warning-light: oklch(95% 0.05 85);
|
||||
--error-light: oklch(94% 0.05 25);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Inverted/Contrast Section - Always dark for visual hierarchy
|
||||
------------------------------------------------------------------------- */
|
||||
--surface-invert: var(--gray-950); /* bg for .invert-section */
|
||||
--surface-invert-secondary: var(--gray-900);
|
||||
--surface-invert-tertiary: var(--gray-800);
|
||||
--on-invert: var(--gray-50); /* 19.3:1 on gray-950 — WCAG AAA */
|
||||
--on-invert-secondary: var(--gray-200); /* 15.6:1 on gray-950 — WCAG AAA */
|
||||
--on-invert-muted: var(--gray-300); /* 13.1:1 on gray-950, 11.9:1 on gray-900 — WCAG AAA */
|
||||
--border-invert: var(--gray-800);
|
||||
--border-invert-strong: var(--gray-700);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Typography
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-font-sans: 'Manrope Variable', 'Manrope', ui-sans-serif, system-ui,
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||||
Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--theme-font-display: 'Outfit Variable', 'Outfit', var(--theme-font-sans);
|
||||
--theme-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace,
|
||||
SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--theme-heading-weight: 700;
|
||||
--theme-heading-tracking: -0.02em;
|
||||
--theme-body-leading: 1.6;
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Shadows
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-shadow-sm: 0 1px 2px oklch(20% 0.01 38 / 0.06);
|
||||
--theme-shadow-md: 0 4px 8px oklch(20% 0.01 38 / 0.08), 0 0 1px oklch(20% 0.01 38 / 0.04);
|
||||
--theme-shadow-lg: 0 8px 16px oklch(20% 0.01 38 / 0.10), 0 0 1px oklch(20% 0.01 38 / 0.04);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(20% 0.01 38 / 0.14), 0 0 1px oklch(20% 0.01 38 / 0.04);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Border Radii
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-radius-sm: 0.25rem; /* 4px */
|
||||
--theme-radius-md: 0.375rem; /* 6px */
|
||||
--theme-radius-lg: 0.5rem; /* 8px */
|
||||
--theme-radius-xl: 0.625rem; /* 10px */
|
||||
--theme-radius-full: 9999px;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Dark Mode - The Vercel signature look
|
||||
------------------------------------------------------------------------- */
|
||||
html.dark[data-theme="orange"] {
|
||||
/* Backgrounds with a barely-there warm tint — matches the orange brand character */
|
||||
--background: oklch(9.5% 0.006 38);
|
||||
--background-secondary: oklch(15% 0.006 38);
|
||||
--background-tertiary: oklch(20% 0.005 38);
|
||||
--background-elevated: oklch(15% 0.006 38);
|
||||
|
||||
--foreground: oklch(91% 0.008 38); /* warm near-white — 15:1 on dark bg, WCAG AAA */
|
||||
--foreground-secondary: oklch(82% 0.008 38);
|
||||
--foreground-muted: oklch(68% 0.006 38);
|
||||
--foreground-subtle: oklch(58% 0.005 38); /* ~4.6:1 on bg — WCAG AA */
|
||||
|
||||
--border: oklch(22% 0.006 38);
|
||||
--border-strong: oklch(28% 0.005 38);
|
||||
--border-subtle: oklch(15% 0.006 38);
|
||||
|
||||
--primary: oklch(94% 0.008 38); /* warm near-white instead of pure white */
|
||||
--primary-hover: oklch(85% 0.008 38);
|
||||
--primary-foreground: oklch(9.5% 0.006 38);
|
||||
|
||||
--secondary: oklch(20% 0.005 38);
|
||||
--secondary-hover: oklch(26% 0.005 38);
|
||||
--secondary-foreground: oklch(90% 0.007 38);
|
||||
|
||||
--muted: oklch(20% 0 0);
|
||||
--muted-foreground: var(--gray-400); /* 6.0:1 on oklch(9.5%) — WCAG AA */
|
||||
|
||||
--card: oklch(15% 0 0);
|
||||
--card-border: oklch(22% 0 0);
|
||||
|
||||
--input-bg: oklch(15% 0.006 38);
|
||||
--input-border: oklch(28% 0.005 38);
|
||||
--input-focus: var(--brand-400);
|
||||
|
||||
--ring: var(--brand-400);
|
||||
|
||||
--accent-light: oklch(18% 0.06 38);
|
||||
|
||||
--destructive: oklch(65% 0.22 25);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
--gradient-start: oklch(9.5% 0.006 38);
|
||||
--gradient-end: oklch(15% 0.006 38);
|
||||
|
||||
--success-light: oklch(18% 0.06 155);
|
||||
--warning-light: oklch(18% 0.05 85);
|
||||
--error-light: oklch(18% 0.05 25);
|
||||
|
||||
/* Inverted section: stays slightly lighter than main bg for visual lift */
|
||||
--surface-invert: oklch(13% 0.006 38);
|
||||
--surface-invert-secondary: oklch(16.5% 0.005 38);
|
||||
--surface-invert-tertiary: oklch(21% 0.005 38);
|
||||
--on-invert: oklch(94% 0.008 38);
|
||||
--on-invert-secondary: oklch(72% 0.007 38);
|
||||
--on-invert-muted: oklch(68% 0.006 38);
|
||||
--border-invert: oklch(21% 0.006 38);
|
||||
--border-invert-strong: oklch(29% 0.005 38);
|
||||
|
||||
--theme-shadow-sm: 0 1px 3px oklch(9% 0.02 38 / 0.35);
|
||||
--theme-shadow-md: 0 4px 12px oklch(9% 0.02 38 / 0.4),
|
||||
0 0 1px oklch(9% 0.02 38 / 0.15);
|
||||
--theme-shadow-lg: 0 8px 24px oklch(9% 0.02 38 / 0.45),
|
||||
0 1px 2px oklch(50% 0.15 38 / 0.06);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(9% 0.02 38 / 0.55),
|
||||
0 2px 4px oklch(50% 0.15 38 / 0.09);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,196 @@
|
||||
/* =============================================================================
|
||||
Astro Rocket Theme - Purple
|
||||
=============================================================================
|
||||
Vivid purple (hue 292°). Bold, expressive, and unmistakable — inspired by
|
||||
Tailwind's purple palette (#a855f7). The quintessential purple: bright,
|
||||
saturated, and full of personality.
|
||||
|
||||
Dark mode: near-black with a vivid purple tint and luminous glow.
|
||||
Light mode: clean neutral whites with purple as the single accent.
|
||||
============================================================================= */
|
||||
|
||||
html[data-theme="purple"] {
|
||||
/* -------------------------------------------------------------------------
|
||||
Brand Scale Override — Purple (hue 292)
|
||||
Inspired by Tailwind purple-*. Vivid and full of character.
|
||||
------------------------------------------------------------------------- */
|
||||
--brand-50: oklch(97.5% 0.02 292);
|
||||
--brand-100: oklch(94.5% 0.05 292);
|
||||
--brand-200: oklch(86% 0.13 292);
|
||||
--brand-300: oklch(76% 0.21 292);
|
||||
--brand-400: oklch(68% 0.26 292);
|
||||
--brand-500: oklch(62% 0.28 292);
|
||||
--brand-600: oklch(52.5% 0.25 292);
|
||||
--brand-700: oklch(44.5% 0.20 292);
|
||||
--brand-800: oklch(36% 0.15 292);
|
||||
--brand-900: oklch(25.5% 0.10 292);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Semantic Tokens - Light Mode
|
||||
------------------------------------------------------------------------- */
|
||||
--background: var(--gray-0);
|
||||
--background-secondary: oklch(97.5% 0.010 292);
|
||||
--background-tertiary: oklch(95% 0.018 292);
|
||||
--background-elevated: var(--gray-0);
|
||||
|
||||
--foreground: var(--gray-900); /* 18.3:1 on white — WCAG AAA */
|
||||
--foreground-secondary: var(--gray-700); /* 12.7:1 on white — WCAG AAA */
|
||||
--foreground-muted: var(--gray-600); /* 10.0:1 on white — WCAG AA */
|
||||
--foreground-subtle: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--border: var(--gray-200);
|
||||
--border-strong: var(--gray-300);
|
||||
--border-subtle: var(--gray-100);
|
||||
|
||||
--primary: var(--gray-900);
|
||||
--primary-hover: var(--gray-800);
|
||||
--primary-foreground: var(--gray-0);
|
||||
|
||||
--secondary: var(--gray-100);
|
||||
--secondary-hover: var(--gray-200);
|
||||
--secondary-foreground: var(--gray-900);
|
||||
|
||||
--accent: var(--brand-500);
|
||||
--accent-hover: var(--brand-600);
|
||||
--accent-light: var(--brand-100);
|
||||
|
||||
--muted: var(--gray-100);
|
||||
--muted-foreground: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--card: var(--gray-0);
|
||||
--card-border: var(--gray-200);
|
||||
|
||||
--input-bg: var(--gray-0);
|
||||
--input-border: var(--gray-300);
|
||||
--input-focus: var(--brand-500);
|
||||
|
||||
--ring: var(--brand-500);
|
||||
|
||||
--destructive: var(--error);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
--gradient-start: oklch(96.5% 0 0);
|
||||
--gradient-end: oklch(100% 0 0);
|
||||
|
||||
/* Status colors - light mode backgrounds */
|
||||
--success-light: oklch(94% 0.05 145);
|
||||
--warning-light: oklch(95% 0.05 85);
|
||||
--error-light: oklch(94% 0.05 25);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Inverted/Contrast Section — deep purple-dark
|
||||
------------------------------------------------------------------------- */
|
||||
--surface-invert: oklch(9.5% 0.020 292);
|
||||
--surface-invert-secondary: oklch(13.5% 0.016 292);
|
||||
--surface-invert-tertiary: oklch(17.5% 0.013 292);
|
||||
--on-invert: var(--gray-50);
|
||||
--on-invert-secondary: var(--gray-200);
|
||||
--on-invert-muted: var(--gray-300);
|
||||
--border-invert: oklch(21% 0.016 292);
|
||||
--border-invert-strong: oklch(29% 0.013 292);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Typography
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-font-sans: 'Manrope Variable', 'Manrope', ui-sans-serif, system-ui,
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||||
Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--theme-font-display: 'Outfit Variable', 'Outfit', var(--theme-font-sans);
|
||||
--theme-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace,
|
||||
SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--theme-heading-weight: 700;
|
||||
--theme-heading-tracking: -0.02em;
|
||||
--theme-body-leading: 1.6;
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Shadows — purple-tinted
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-shadow-sm: 0 1px 2px oklch(20% 0.04 292 / 0.08);
|
||||
--theme-shadow-md: 0 4px 8px oklch(20% 0.04 292 / 0.10),
|
||||
0 0 1px oklch(20% 0.04 292 / 0.05);
|
||||
--theme-shadow-lg: 0 8px 16px oklch(20% 0.04 292 / 0.13),
|
||||
0 0 1px oklch(20% 0.04 292 / 0.05);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(20% 0.04 292 / 0.19),
|
||||
0 0 1px oklch(20% 0.04 292 / 0.05);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Border Radii
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-radius-sm: 0.25rem; /* 4px */
|
||||
--theme-radius-md: 0.375rem; /* 6px */
|
||||
--theme-radius-lg: 0.5rem; /* 8px */
|
||||
--theme-radius-xl: 0.625rem; /* 10px */
|
||||
--theme-radius-full: 9999px;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Dark Mode — deep near-black with purple luminance
|
||||
------------------------------------------------------------------------- */
|
||||
html.dark[data-theme="purple"] {
|
||||
--background: oklch(9.5% 0.020 292);
|
||||
--background-secondary: oklch(15% 0.016 292);
|
||||
--background-tertiary: oklch(20% 0.013 292);
|
||||
--background-elevated: oklch(15% 0.016 292);
|
||||
|
||||
--foreground: oklch(91% 0.010 292); /* purple-tinted near-white — 15:1 on dark bg, WCAG AAA */
|
||||
--foreground-secondary: oklch(83% 0.015 292);
|
||||
--foreground-muted: oklch(68% 0.012 292);
|
||||
--foreground-subtle: oklch(58% 0.009 292); /* ~4.8:1 on bg — WCAG AA */
|
||||
|
||||
--border: oklch(20% 0.016 292);
|
||||
--border-strong: oklch(27% 0.013 292);
|
||||
--border-subtle: oklch(13.5% 0.016 292);
|
||||
|
||||
--primary: oklch(94% 0.010 292);
|
||||
--primary-hover: oklch(82% 0.012 292);
|
||||
--primary-foreground: oklch(9.5% 0.020 292);
|
||||
|
||||
--secondary: oklch(20% 0.013 292);
|
||||
--secondary-hover: oklch(24% 0.013 292);
|
||||
--secondary-foreground: oklch(90% 0.012 292);
|
||||
|
||||
--accent: var(--brand-400);
|
||||
--accent-hover: var(--brand-500);
|
||||
--accent-light: oklch(18% 0.09 292);
|
||||
|
||||
--muted: oklch(20% 0.013 292);
|
||||
--muted-foreground: oklch(68% 0.012 292);
|
||||
|
||||
--card: oklch(15% 0.016 292);
|
||||
--card-border: oklch(23% 0.016 292);
|
||||
|
||||
--input-bg: oklch(15% 0.016 292);
|
||||
--input-border: oklch(27% 0.013 292);
|
||||
--input-focus: var(--brand-400);
|
||||
|
||||
--ring: var(--brand-400);
|
||||
|
||||
--destructive: oklch(65% 0.22 25);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
--gradient-start: oklch(9.5% 0.020 292);
|
||||
--gradient-end: oklch(13% 0.016 292);
|
||||
|
||||
--success-light: oklch(18% 0.06 155);
|
||||
--warning-light: oklch(18% 0.05 85);
|
||||
--error-light: oklch(18% 0.05 25);
|
||||
|
||||
--surface-invert: oklch(13% 0.016 292);
|
||||
--surface-invert-secondary: oklch(16.5% 0.013 292);
|
||||
--surface-invert-tertiary: oklch(21% 0.013 292);
|
||||
--on-invert: oklch(95% 0.012 292);
|
||||
--on-invert-secondary: oklch(72% 0.015 292);
|
||||
--on-invert-muted: oklch(68% 0.012 292);
|
||||
--border-invert: oklch(21% 0.013 292);
|
||||
--border-invert-strong: oklch(29% 0.011 292);
|
||||
|
||||
--theme-shadow-sm: 0 1px 3px oklch(9% 0.05 292 / 0.35);
|
||||
--theme-shadow-md: 0 4px 12px oklch(9% 0.05 292 / 0.4),
|
||||
0 0 1px oklch(9% 0.05 292 / 0.15);
|
||||
--theme-shadow-lg: 0 8px 24px oklch(9% 0.05 292 / 0.45),
|
||||
0 1px 2px oklch(50% 0.22 292 / 0.09);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(9% 0.05 292 / 0.55),
|
||||
0 2px 4px oklch(50% 0.22 292 / 0.12);
|
||||
}
|
||||
@@ -0,0 +1,196 @@
|
||||
/* =============================================================================
|
||||
Astro Rocket Theme - Sky
|
||||
=============================================================================
|
||||
Modern sky blue (hue 222°). Clean, airy, and trustworthy — inspired by
|
||||
Tailwind's sky palette. Sits between teal and blue, with a distinctly
|
||||
open-sky feel.
|
||||
|
||||
Dark mode: near-black with a subtle sky-blue tint and cool glow.
|
||||
Light mode: clean neutral whites with sky blue as the single accent.
|
||||
============================================================================= */
|
||||
|
||||
html[data-theme="sky"] {
|
||||
/* -------------------------------------------------------------------------
|
||||
Brand Scale Override — Sky Blue (hue 222)
|
||||
Inspired by Tailwind sky-*. Brighter and more open than blue.
|
||||
------------------------------------------------------------------------- */
|
||||
--brand-50: oklch(97.5% 0.02 222);
|
||||
--brand-100: oklch(95% 0.04 222);
|
||||
--brand-200: oklch(88% 0.09 222);
|
||||
--brand-300: oklch(78% 0.15 222);
|
||||
--brand-400: oklch(68% 0.20 222);
|
||||
--brand-500: oklch(62.5% 0.22 222);
|
||||
--brand-600: oklch(53% 0.20 222);
|
||||
--brand-700: oklch(45% 0.17 222);
|
||||
--brand-800: oklch(37% 0.13 222);
|
||||
--brand-900: oklch(26.5% 0.09 222);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Semantic Tokens - Light Mode
|
||||
------------------------------------------------------------------------- */
|
||||
--background: var(--gray-0);
|
||||
--background-secondary: oklch(97.5% 0.010 222);
|
||||
--background-tertiary: oklch(95% 0.018 222);
|
||||
--background-elevated: var(--gray-0);
|
||||
|
||||
--foreground: var(--gray-900); /* 18.3:1 on white — WCAG AAA */
|
||||
--foreground-secondary: var(--gray-700); /* 12.7:1 on white — WCAG AAA */
|
||||
--foreground-muted: var(--gray-600); /* 10.0:1 on white — WCAG AA */
|
||||
--foreground-subtle: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--border: var(--gray-200);
|
||||
--border-strong: var(--gray-300);
|
||||
--border-subtle: var(--gray-100);
|
||||
|
||||
--primary: var(--gray-900);
|
||||
--primary-hover: var(--gray-800);
|
||||
--primary-foreground: var(--gray-0);
|
||||
|
||||
--secondary: var(--gray-100);
|
||||
--secondary-hover: var(--gray-200);
|
||||
--secondary-foreground: var(--gray-900);
|
||||
|
||||
--accent: var(--brand-500);
|
||||
--accent-hover: var(--brand-600);
|
||||
--accent-light: var(--brand-100);
|
||||
|
||||
--muted: var(--gray-100);
|
||||
--muted-foreground: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--card: var(--gray-0);
|
||||
--card-border: var(--gray-200);
|
||||
|
||||
--input-bg: var(--gray-0);
|
||||
--input-border: var(--gray-300);
|
||||
--input-focus: var(--brand-500);
|
||||
|
||||
--ring: var(--brand-500);
|
||||
|
||||
--destructive: var(--error);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
--gradient-start: oklch(96.5% 0 0);
|
||||
--gradient-end: oklch(100% 0 0);
|
||||
|
||||
/* Status colors - light mode backgrounds */
|
||||
--success-light: oklch(94% 0.05 145);
|
||||
--warning-light: oklch(95% 0.05 85);
|
||||
--error-light: oklch(94% 0.05 25);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Inverted/Contrast Section — deep sky-dark
|
||||
------------------------------------------------------------------------- */
|
||||
--surface-invert: oklch(9.5% 0.012 222);
|
||||
--surface-invert-secondary: oklch(13.5% 0.010 222);
|
||||
--surface-invert-tertiary: oklch(17.5% 0.008 222);
|
||||
--on-invert: var(--gray-50);
|
||||
--on-invert-secondary: var(--gray-200);
|
||||
--on-invert-muted: var(--gray-300);
|
||||
--border-invert: oklch(21% 0.010 222);
|
||||
--border-invert-strong: oklch(29% 0.008 222);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Typography
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-font-sans: 'Manrope Variable', 'Manrope', ui-sans-serif, system-ui,
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||||
Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--theme-font-display: 'Outfit Variable', 'Outfit', var(--theme-font-sans);
|
||||
--theme-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace,
|
||||
SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--theme-heading-weight: 700;
|
||||
--theme-heading-tracking: -0.02em;
|
||||
--theme-body-leading: 1.6;
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Shadows — sky-tinted
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-shadow-sm: 0 1px 2px oklch(20% 0.01 222 / 0.06);
|
||||
--theme-shadow-md: 0 4px 8px oklch(20% 0.01 222 / 0.08),
|
||||
0 0 1px oklch(20% 0.01 222 / 0.04);
|
||||
--theme-shadow-lg: 0 8px 16px oklch(20% 0.01 222 / 0.1),
|
||||
0 0 1px oklch(20% 0.01 222 / 0.04);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(20% 0.01 222 / 0.14),
|
||||
0 0 1px oklch(20% 0.01 222 / 0.04);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Border Radii
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-radius-sm: 0.25rem; /* 4px */
|
||||
--theme-radius-md: 0.375rem; /* 6px */
|
||||
--theme-radius-lg: 0.5rem; /* 8px */
|
||||
--theme-radius-xl: 0.625rem; /* 10px */
|
||||
--theme-radius-full: 9999px;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Dark Mode — deep near-black with sky glow
|
||||
------------------------------------------------------------------------- */
|
||||
html.dark[data-theme="sky"] {
|
||||
--background: oklch(9.5% 0.012 222);
|
||||
--background-secondary: oklch(15% 0.010 222);
|
||||
--background-tertiary: oklch(20% 0.008 222);
|
||||
--background-elevated: oklch(15% 0.010 222);
|
||||
|
||||
--foreground: oklch(91% 0.008 222); /* sky-tinted near-white — 15:1 on dark bg, WCAG AAA */
|
||||
--foreground-secondary: oklch(82% 0.010 222);
|
||||
--foreground-muted: oklch(68% 0.008 222);
|
||||
--foreground-subtle: oklch(58% 0.006 222); /* ~4.8:1 on bg — WCAG AA */
|
||||
|
||||
--border: oklch(20% 0.010 222);
|
||||
--border-strong: oklch(27% 0.008 222);
|
||||
--border-subtle: oklch(13.5% 0.010 222);
|
||||
|
||||
--primary: oklch(94% 0.008 222);
|
||||
--primary-hover: oklch(82% 0.010 222);
|
||||
--primary-foreground: oklch(9.5% 0.012 222);
|
||||
|
||||
--secondary: oklch(20% 0.008 222);
|
||||
--secondary-hover: oklch(24% 0.008 222);
|
||||
--secondary-foreground: oklch(90% 0.008 222);
|
||||
|
||||
--accent: var(--brand-400);
|
||||
--accent-hover: var(--brand-500);
|
||||
--accent-light: oklch(18% 0.06 222);
|
||||
|
||||
--muted: oklch(20% 0.008 222);
|
||||
--muted-foreground: oklch(68% 0.008 222);
|
||||
|
||||
--card: oklch(15% 0.010 222);
|
||||
--card-border: oklch(23% 0.010 222);
|
||||
|
||||
--input-bg: oklch(15% 0.010 222);
|
||||
--input-border: oklch(27% 0.008 222);
|
||||
--input-focus: var(--brand-400);
|
||||
|
||||
--ring: var(--brand-400);
|
||||
|
||||
--destructive: oklch(65% 0.22 25);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
--gradient-start: oklch(9.5% 0.012 222);
|
||||
--gradient-end: oklch(13% 0.010 222);
|
||||
|
||||
--success-light: oklch(18% 0.06 155);
|
||||
--warning-light: oklch(18% 0.05 85);
|
||||
--error-light: oklch(18% 0.05 25);
|
||||
|
||||
--surface-invert: oklch(13% 0.010 222);
|
||||
--surface-invert-secondary: oklch(16.5% 0.008 222);
|
||||
--surface-invert-tertiary: oklch(21% 0.008 222);
|
||||
--on-invert: oklch(94% 0.008 222);
|
||||
--on-invert-secondary: oklch(72% 0.010 222);
|
||||
--on-invert-muted: oklch(68% 0.008 222);
|
||||
--border-invert: oklch(21% 0.008 222);
|
||||
--border-invert-strong: oklch(29% 0.007 222);
|
||||
|
||||
--theme-shadow-sm: 0 1px 3px oklch(9% 0.02 222 / 0.35);
|
||||
--theme-shadow-md: 0 4px 12px oklch(9% 0.02 222 / 0.4),
|
||||
0 0 1px oklch(9% 0.02 222 / 0.15);
|
||||
--theme-shadow-lg: 0 8px 24px oklch(9% 0.02 222 / 0.45),
|
||||
0 1px 2px oklch(50% 0.15 222 / 0.06);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(9% 0.02 222 / 0.55),
|
||||
0 2px 4px oklch(50% 0.15 222 / 0.09);
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
/* =============================================================================
|
||||
Astro Rocket Theme - Teal
|
||||
=============================================================================
|
||||
Fresh cyan-teal brand (hue 190°). The go-to colour for modern SaaS and
|
||||
developer tooling — clean, trustworthy, and equally strong in light and
|
||||
dark mode.
|
||||
|
||||
Dark mode: near-black with a barely-there teal tint and cyan glow.
|
||||
Light mode: clean neutral whites with teal as the single accent.
|
||||
|
||||
To use: swap the theme import in tokens/colors.css:
|
||||
@import '../themes/teal.css';
|
||||
============================================================================= */
|
||||
|
||||
html[data-theme="teal"] {
|
||||
/* -------------------------------------------------------------------------
|
||||
Brand Scale Override — Cyan-Teal (hue 190)
|
||||
Fresh, tech-forward. Not turquoise, not blue — the pure mid-teal.
|
||||
------------------------------------------------------------------------- */
|
||||
--brand-50: oklch(97.5% 0.02 190);
|
||||
--brand-100: oklch(94.8% 0.04 190);
|
||||
--brand-200: oklch(87.5% 0.09 190);
|
||||
--brand-300: oklch(77.8% 0.15 190);
|
||||
--brand-400: oklch(68.5% 0.20 190);
|
||||
--brand-500: oklch(62.5% 0.22 190);
|
||||
--brand-600: oklch(53.2% 0.19 190);
|
||||
--brand-700: oklch(45.5% 0.16 190);
|
||||
--brand-800: oklch(37.2% 0.13 190);
|
||||
--brand-900: oklch(26.5% 0.09 190);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Semantic Tokens - Light Mode
|
||||
Clean neutral whites — teal accent does all the work.
|
||||
------------------------------------------------------------------------- */
|
||||
--background: var(--gray-0);
|
||||
--background-secondary: oklch(97.5% 0.010 190);
|
||||
--background-tertiary: oklch(95% 0.018 190);
|
||||
--background-elevated: var(--gray-0);
|
||||
|
||||
--foreground: var(--gray-900); /* 18.3:1 on white — WCAG AAA */
|
||||
--foreground-secondary: var(--gray-700); /* 12.7:1 on white — WCAG AAA */
|
||||
--foreground-muted: var(--gray-600); /* 10.0:1 on white — WCAG AA */
|
||||
--foreground-subtle: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--border: var(--gray-200);
|
||||
--border-strong: var(--gray-300);
|
||||
--border-subtle: var(--gray-100);
|
||||
|
||||
--primary: var(--gray-900);
|
||||
--primary-hover: var(--gray-800);
|
||||
--primary-foreground: var(--gray-0);
|
||||
|
||||
--secondary: var(--gray-100);
|
||||
--secondary-hover: var(--gray-200);
|
||||
--secondary-foreground: var(--gray-900);
|
||||
|
||||
--accent: var(--brand-500);
|
||||
--accent-hover: var(--brand-600);
|
||||
--accent-light: var(--brand-100);
|
||||
|
||||
--muted: var(--gray-100);
|
||||
--muted-foreground: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--card: var(--gray-0);
|
||||
--card-border: var(--gray-200);
|
||||
|
||||
--input-bg: var(--gray-0);
|
||||
--input-border: var(--gray-300);
|
||||
--input-focus: var(--brand-500);
|
||||
|
||||
--ring: var(--brand-500);
|
||||
|
||||
/* Destructive */
|
||||
--destructive: var(--error);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
/* Gradient colors */
|
||||
--gradient-start: oklch(96.5% 0 0);
|
||||
--gradient-end: oklch(100% 0 0);
|
||||
|
||||
/* Status colors - light mode backgrounds */
|
||||
--success-light: oklch(94% 0.05 145);
|
||||
--warning-light: oklch(95% 0.05 85);
|
||||
--error-light: oklch(94% 0.05 25);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Inverted/Contrast Section — deep teal-dark
|
||||
------------------------------------------------------------------------- */
|
||||
--surface-invert: oklch(9.5% 0.01 190);
|
||||
--surface-invert-secondary: oklch(13.5% 0.01 190);
|
||||
--surface-invert-tertiary: oklch(17.5% 0.008 190);
|
||||
--on-invert: var(--gray-50);
|
||||
--on-invert-secondary: var(--gray-200);
|
||||
--on-invert-muted: var(--gray-300);
|
||||
--border-invert: oklch(21% 0.01 190);
|
||||
--border-invert-strong: oklch(29% 0.008 190);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Typography — Manrope (body) + Outfit (display)
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-font-sans: 'Manrope Variable', 'Manrope', ui-sans-serif, system-ui,
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||||
Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--theme-font-display: 'Outfit Variable', 'Outfit', var(--theme-font-sans);
|
||||
--theme-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace,
|
||||
SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--theme-heading-weight: 700;
|
||||
--theme-heading-tracking: -0.02em;
|
||||
--theme-body-leading: 1.6;
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Shadows — teal-tinted
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-shadow-sm: 0 1px 2px oklch(20% 0.01 190 / 0.06);
|
||||
--theme-shadow-md: 0 4px 8px oklch(20% 0.01 190 / 0.08),
|
||||
0 0 1px oklch(20% 0.01 190 / 0.04);
|
||||
--theme-shadow-lg: 0 8px 16px oklch(20% 0.01 190 / 0.1),
|
||||
0 0 1px oklch(20% 0.01 190 / 0.04);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(20% 0.01 190 / 0.14),
|
||||
0 0 1px oklch(20% 0.01 190 / 0.04);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Border Radii
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-radius-sm: 0.25rem; /* 4px */
|
||||
--theme-radius-md: 0.375rem; /* 6px */
|
||||
--theme-radius-lg: 0.5rem; /* 8px */
|
||||
--theme-radius-xl: 0.625rem; /* 10px */
|
||||
--theme-radius-full: 9999px;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Dark Mode — deep near-black with teal glow
|
||||
SaaS-generation aesthetic. Fresh and focused.
|
||||
------------------------------------------------------------------------- */
|
||||
html.dark[data-theme="teal"] {
|
||||
--background: oklch(9.5% 0.012 190);
|
||||
--background-secondary: oklch(15% 0.01 190);
|
||||
--background-tertiary: oklch(20% 0.008 190);
|
||||
--background-elevated: oklch(15% 0.01 190);
|
||||
|
||||
--foreground: oklch(91% 0.008 190); /* teal-tinted near-white — 15:1 on dark bg, WCAG AAA */
|
||||
--foreground-secondary: oklch(82% 0.01 190);
|
||||
--foreground-muted: oklch(68% 0.008 190);
|
||||
--foreground-subtle: oklch(58% 0.006 190); /* ~4.8:1 on bg — WCAG AA */
|
||||
|
||||
--border: oklch(20% 0.01 190);
|
||||
--border-strong: oklch(27% 0.008 190);
|
||||
--border-subtle: oklch(13.5% 0.01 190);
|
||||
|
||||
--primary: oklch(94% 0.008 190);
|
||||
--primary-hover: oklch(82% 0.01 190);
|
||||
--primary-foreground: oklch(9.5% 0.012 190);
|
||||
|
||||
--secondary: oklch(20% 0.008 190);
|
||||
--secondary-hover: oklch(24% 0.008 190);
|
||||
--secondary-foreground: oklch(90% 0.008 190);
|
||||
|
||||
--accent: var(--brand-400);
|
||||
--accent-hover: var(--brand-500);
|
||||
--accent-light: oklch(18% 0.06 190);
|
||||
|
||||
--muted: oklch(20% 0.008 190);
|
||||
--muted-foreground: oklch(68% 0.008 190);
|
||||
|
||||
--card: oklch(15% 0.01 190);
|
||||
--card-border: oklch(23% 0.01 190);
|
||||
|
||||
--input-bg: oklch(15% 0.01 190);
|
||||
--input-border: oklch(27% 0.008 190);
|
||||
--input-focus: var(--brand-400);
|
||||
|
||||
--ring: var(--brand-400);
|
||||
|
||||
--destructive: oklch(65% 0.22 25);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
/* Gradient colors */
|
||||
--gradient-start: oklch(9.5% 0.012 190);
|
||||
--gradient-end: oklch(13% 0.01 190);
|
||||
|
||||
/* Status colors */
|
||||
--success-light: oklch(18% 0.06 155);
|
||||
--warning-light: oklch(18% 0.05 85);
|
||||
--error-light: oklch(18% 0.05 25);
|
||||
|
||||
/* Inverted section in dark mode */
|
||||
--surface-invert: oklch(13% 0.01 190);
|
||||
--surface-invert-secondary: oklch(16.5% 0.008 190);
|
||||
--surface-invert-tertiary: oklch(21% 0.008 190);
|
||||
--on-invert: oklch(94% 0.008 190);
|
||||
--on-invert-secondary: oklch(72% 0.01 190);
|
||||
--on-invert-muted: oklch(68% 0.008 190);
|
||||
--border-invert: oklch(21% 0.008 190);
|
||||
--border-invert-strong: oklch(29% 0.007 190);
|
||||
|
||||
/* Shadows — teal-tinted, deep */
|
||||
--theme-shadow-sm: 0 1px 3px oklch(9% 0.02 190 / 0.35);
|
||||
--theme-shadow-md: 0 4px 12px oklch(9% 0.02 190 / 0.4),
|
||||
0 0 1px oklch(9% 0.02 190 / 0.15);
|
||||
--theme-shadow-lg: 0 8px 24px oklch(9% 0.02 190 / 0.45),
|
||||
0 1px 2px oklch(50% 0.15 190 / 0.06);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(9% 0.02 190 / 0.55),
|
||||
0 2px 4px oklch(50% 0.15 190 / 0.09);
|
||||
}
|
||||
@@ -0,0 +1,196 @@
|
||||
/* =============================================================================
|
||||
Astro Rocket Theme - Violet
|
||||
=============================================================================
|
||||
Rich violet (hue 277°). Creative, distinctive, and bold — inspired by
|
||||
Tailwind's violet palette. The sweet spot between indigo and purple with
|
||||
a premium, expressive character.
|
||||
|
||||
Dark mode: near-black with a rich violet tint and vivid glow.
|
||||
Light mode: clean neutral whites with violet as the single accent.
|
||||
============================================================================= */
|
||||
|
||||
html[data-theme="violet"] {
|
||||
/* -------------------------------------------------------------------------
|
||||
Brand Scale Override — Violet (hue 277)
|
||||
Inspired by Tailwind violet-*. Rich and expressive.
|
||||
------------------------------------------------------------------------- */
|
||||
--brand-50: oklch(97.5% 0.02 277);
|
||||
--brand-100: oklch(94.5% 0.05 277);
|
||||
--brand-200: oklch(86% 0.12 277);
|
||||
--brand-300: oklch(76% 0.20 277);
|
||||
--brand-400: oklch(68% 0.24 277);
|
||||
--brand-500: oklch(62.5% 0.26 277);
|
||||
--brand-600: oklch(53% 0.23 277);
|
||||
--brand-700: oklch(45% 0.19 277);
|
||||
--brand-800: oklch(36.5% 0.14 277);
|
||||
--brand-900: oklch(26% 0.09 277);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Semantic Tokens - Light Mode
|
||||
------------------------------------------------------------------------- */
|
||||
--background: var(--gray-0);
|
||||
--background-secondary: oklch(97.5% 0.010 277);
|
||||
--background-tertiary: oklch(95% 0.018 277);
|
||||
--background-elevated: var(--gray-0);
|
||||
|
||||
--foreground: var(--gray-900); /* 18.3:1 on white — WCAG AAA */
|
||||
--foreground-secondary: var(--gray-700); /* 12.7:1 on white — WCAG AAA */
|
||||
--foreground-muted: var(--gray-600); /* 10.0:1 on white — WCAG AA */
|
||||
--foreground-subtle: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--border: var(--gray-200);
|
||||
--border-strong: var(--gray-300);
|
||||
--border-subtle: var(--gray-100);
|
||||
|
||||
--primary: var(--gray-900);
|
||||
--primary-hover: var(--gray-800);
|
||||
--primary-foreground: var(--gray-0);
|
||||
|
||||
--secondary: var(--gray-100);
|
||||
--secondary-hover: var(--gray-200);
|
||||
--secondary-foreground: var(--gray-900);
|
||||
|
||||
--accent: var(--brand-500);
|
||||
--accent-hover: var(--brand-600);
|
||||
--accent-light: var(--brand-100);
|
||||
|
||||
--muted: var(--gray-100);
|
||||
--muted-foreground: var(--gray-500); /* 5.5:1 on white — WCAG AA */
|
||||
|
||||
--card: var(--gray-0);
|
||||
--card-border: var(--gray-200);
|
||||
|
||||
--input-bg: var(--gray-0);
|
||||
--input-border: var(--gray-300);
|
||||
--input-focus: var(--brand-500);
|
||||
|
||||
--ring: var(--brand-500);
|
||||
|
||||
--destructive: var(--error);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
--gradient-start: oklch(96.5% 0 0);
|
||||
--gradient-end: oklch(100% 0 0);
|
||||
|
||||
/* Status colors - light mode backgrounds */
|
||||
--success-light: oklch(94% 0.05 145);
|
||||
--warning-light: oklch(95% 0.05 85);
|
||||
--error-light: oklch(94% 0.05 25);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Inverted/Contrast Section — deep violet-dark
|
||||
------------------------------------------------------------------------- */
|
||||
--surface-invert: oklch(9.5% 0.018 277);
|
||||
--surface-invert-secondary: oklch(13.5% 0.014 277);
|
||||
--surface-invert-tertiary: oklch(17.5% 0.011 277);
|
||||
--on-invert: var(--gray-50);
|
||||
--on-invert-secondary: var(--gray-200);
|
||||
--on-invert-muted: var(--gray-300);
|
||||
--border-invert: oklch(21% 0.014 277);
|
||||
--border-invert-strong: oklch(29% 0.011 277);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Typography
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-font-sans: 'Manrope Variable', 'Manrope', ui-sans-serif, system-ui,
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||||
Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--theme-font-display: 'Outfit Variable', 'Outfit', var(--theme-font-sans);
|
||||
--theme-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace,
|
||||
SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--theme-heading-weight: 700;
|
||||
--theme-heading-tracking: -0.02em;
|
||||
--theme-body-leading: 1.6;
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Shadows — violet-tinted
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-shadow-sm: 0 1px 2px oklch(20% 0.03 277 / 0.08);
|
||||
--theme-shadow-md: 0 4px 8px oklch(20% 0.03 277 / 0.10),
|
||||
0 0 1px oklch(20% 0.03 277 / 0.05);
|
||||
--theme-shadow-lg: 0 8px 16px oklch(20% 0.03 277 / 0.12),
|
||||
0 0 1px oklch(20% 0.03 277 / 0.05);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(20% 0.03 277 / 0.18),
|
||||
0 0 1px oklch(20% 0.03 277 / 0.05);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Border Radii
|
||||
------------------------------------------------------------------------- */
|
||||
--theme-radius-sm: 0.25rem; /* 4px */
|
||||
--theme-radius-md: 0.375rem; /* 6px */
|
||||
--theme-radius-lg: 0.5rem; /* 8px */
|
||||
--theme-radius-xl: 0.625rem; /* 10px */
|
||||
--theme-radius-full: 9999px;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Dark Mode — deep near-black with violet glow
|
||||
------------------------------------------------------------------------- */
|
||||
html.dark[data-theme="violet"] {
|
||||
--background: oklch(9.5% 0.018 277);
|
||||
--background-secondary: oklch(15% 0.014 277);
|
||||
--background-tertiary: oklch(20% 0.011 277);
|
||||
--background-elevated: oklch(15% 0.014 277);
|
||||
|
||||
--foreground: oklch(95% 0.010 277);
|
||||
--foreground-secondary: oklch(83% 0.013 277);
|
||||
--foreground-muted: oklch(68% 0.010 277);
|
||||
--foreground-subtle: oklch(58% 0.008 277); /* ~4.8:1 on bg — WCAG AA */
|
||||
|
||||
--border: oklch(20% 0.014 277);
|
||||
--border-strong: oklch(27% 0.011 277);
|
||||
--border-subtle: oklch(13.5% 0.014 277);
|
||||
|
||||
--primary: oklch(95% 0.010 277);
|
||||
--primary-hover: oklch(83% 0.013 277);
|
||||
--primary-foreground: oklch(9.5% 0.018 277);
|
||||
|
||||
--secondary: oklch(20% 0.011 277);
|
||||
--secondary-hover: oklch(24% 0.011 277);
|
||||
--secondary-foreground: oklch(90% 0.010 277);
|
||||
|
||||
--accent: var(--brand-400);
|
||||
--accent-hover: var(--brand-500);
|
||||
--accent-light: oklch(18% 0.08 277);
|
||||
|
||||
--muted: oklch(20% 0.011 277);
|
||||
--muted-foreground: oklch(68% 0.010 277);
|
||||
|
||||
--card: oklch(15% 0.014 277);
|
||||
--card-border: oklch(23% 0.014 277);
|
||||
|
||||
--input-bg: oklch(15% 0.014 277);
|
||||
--input-border: oklch(27% 0.011 277);
|
||||
--input-focus: var(--brand-400);
|
||||
|
||||
--ring: var(--brand-400);
|
||||
|
||||
--destructive: oklch(65% 0.22 25);
|
||||
--destructive-foreground: var(--gray-0);
|
||||
|
||||
--gradient-start: oklch(9.5% 0.018 277);
|
||||
--gradient-end: oklch(13% 0.014 277);
|
||||
|
||||
--success-light: oklch(18% 0.06 155);
|
||||
--warning-light: oklch(18% 0.05 85);
|
||||
--error-light: oklch(18% 0.05 25);
|
||||
|
||||
--surface-invert: oklch(13% 0.014 277);
|
||||
--surface-invert-secondary: oklch(16.5% 0.011 277);
|
||||
--surface-invert-tertiary: oklch(21% 0.011 277);
|
||||
--on-invert: oklch(95% 0.010 277);
|
||||
--on-invert-secondary: oklch(72% 0.013 277);
|
||||
--on-invert-muted: oklch(68% 0.010 277);
|
||||
--border-invert: oklch(21% 0.011 277);
|
||||
--border-invert-strong: oklch(29% 0.009 277);
|
||||
|
||||
--theme-shadow-sm: 0 1px 3px oklch(9% 0.04 277 / 0.35);
|
||||
--theme-shadow-md: 0 4px 12px oklch(9% 0.04 277 / 0.4),
|
||||
0 0 1px oklch(9% 0.04 277 / 0.15);
|
||||
--theme-shadow-lg: 0 8px 24px oklch(9% 0.04 277 / 0.45),
|
||||
0 1px 2px oklch(50% 0.20 277 / 0.08);
|
||||
--theme-shadow-xl: 0 24px 48px oklch(9% 0.04 277 / 0.55),
|
||||
0 2px 4px oklch(50% 0.20 277 / 0.11);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
/* =============================================================================
|
||||
Astro Rocket Design Tokens - Colors
|
||||
=============================================================================
|
||||
This file aggregates primitive color scales and all themes.
|
||||
The active theme is selected at runtime via the data-theme attribute on
|
||||
<html>. Default: midnight.
|
||||
|
||||
To add a new theme: create a file in ../themes/ following the same token
|
||||
contract, scope it under html[data-theme="name"], and import it below.
|
||||
|
||||
Theme files
|
||||
-----------
|
||||
Active in selector (ThemeSelector.astro):
|
||||
orange, lime, emerald, teal, sky, blue, purple
|
||||
|
||||
Hidden from selector (files kept for re-use):
|
||||
cyan, green, indigo
|
||||
|
||||
Available but not exposed in selector:
|
||||
amber, magenta
|
||||
============================================================================= */
|
||||
|
||||
@import './primitives.css';
|
||||
|
||||
/* — active in selector — */
|
||||
@import '../themes/orange.css';
|
||||
@import '../themes/lime.css';
|
||||
@import '../themes/emerald.css';
|
||||
@import '../themes/teal.css';
|
||||
@import '../themes/sky.css';
|
||||
@import '../themes/blue.css';
|
||||
@import '../themes/purple.css';
|
||||
|
||||
/* — hidden from selector — */
|
||||
@import '../themes/cyan.css';
|
||||
@import '../themes/green.css';
|
||||
@import '../themes/indigo.css';
|
||||
|
||||
/* — available, not in selector — */
|
||||
@import '../themes/amber.css';
|
||||
@import '../themes/violet.css';
|
||||
@import '../themes/magenta.css';
|
||||
@@ -0,0 +1,58 @@
|
||||
/* =============================================================================
|
||||
Astro Rocket Design Tokens - Primitive Colors
|
||||
=============================================================================
|
||||
Raw color scales that themes build upon.
|
||||
Using OKLCH for perceptual color uniformity.
|
||||
============================================================================= */
|
||||
|
||||
:root {
|
||||
/* -------------------------------------------------------------------------
|
||||
Grayscale - The foundation (OKLCH neutral scale)
|
||||
------------------------------------------------------------------------- */
|
||||
--gray-0: oklch(100% 0 0);
|
||||
--gray-50: oklch(98.3% 0 0);
|
||||
--gray-100: oklch(96.5% 0 0);
|
||||
--gray-200: oklch(91.3% 0 0);
|
||||
--gray-300: oklch(85.8% 0 0);
|
||||
--gray-400: oklch(64% 0 0);
|
||||
--gray-500: oklch(52% 0 0);
|
||||
--gray-600: oklch(38% 0 0);
|
||||
--gray-700: oklch(32% 0 0);
|
||||
--gray-800: oklch(26.7% 0 0);
|
||||
--gray-900: oklch(19.4% 0 0);
|
||||
--gray-950: oklch(12.3% 0 0);
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Brand Orange Scale - International Orange (#F94C10)
|
||||
OKLCH for perceptual uniformity across the scale
|
||||
------------------------------------------------------------------------- */
|
||||
--brand-50: oklch(97.5% 0.02 45);
|
||||
--brand-100: oklch(94.8% 0.04 45);
|
||||
--brand-200: oklch(87.5% 0.08 45);
|
||||
--brand-300: oklch(77.8% 0.14 45);
|
||||
--brand-400: oklch(68.5% 0.19 40);
|
||||
--brand-500: oklch(62.5% 0.22 38);
|
||||
--brand-600: oklch(53.2% 0.19 38);
|
||||
--brand-700: oklch(45.5% 0.16 38);
|
||||
--brand-800: oklch(37.2% 0.13 38);
|
||||
--brand-900: oklch(26.5% 0.09 38);
|
||||
|
||||
/* Accent - Blue for links/focus */
|
||||
--blue-500: oklch(59.5% 0.19 260);
|
||||
--blue-600: oklch(53.2% 0.19 260);
|
||||
|
||||
/* Status Colors - OKLCH for consistent perception */
|
||||
/* Base colors for icons, borders, indicators */
|
||||
--success: oklch(72.3% 0.19 145);
|
||||
--success-light: oklch(94% 0.05 145);
|
||||
--success-foreground: oklch(35% 0.15 145); /* WCAG AA compliant on success-light */
|
||||
--warning: oklch(79.5% 0.18 85);
|
||||
--warning-light: oklch(96% 0.05 85);
|
||||
--warning-foreground: oklch(40% 0.12 85); /* WCAG AA compliant on warning-light */
|
||||
--error: oklch(62.8% 0.22 25);
|
||||
--error-light: oklch(94% 0.05 25);
|
||||
--error-foreground: oklch(40% 0.18 25); /* WCAG AA compliant on error-light */
|
||||
--info: oklch(59.5% 0.19 260);
|
||||
--info-light: oklch(94% 0.05 260);
|
||||
--info-foreground: oklch(40% 0.15 260); /* WCAG AA compliant on info-light */
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/* =============================================================================
|
||||
Astro Rocket Design Tokens - Spacing
|
||||
=============================================================================
|
||||
4px base unit spacing system
|
||||
============================================================================= */
|
||||
|
||||
:root {
|
||||
/* ---------------------------------------------------------------------------
|
||||
Spacing Scale (4px base unit)
|
||||
--------------------------------------------------------------------------- */
|
||||
--space-0: 0;
|
||||
--space-px: 1px;
|
||||
--space-0-5: 0.125rem; /* 2px */
|
||||
--space-1: 0.25rem; /* 4px */
|
||||
--space-1-5: 0.375rem; /* 6px */
|
||||
--space-2: 0.5rem; /* 8px */
|
||||
--space-2-5: 0.625rem; /* 10px */
|
||||
--space-3: 0.75rem; /* 12px */
|
||||
--space-3-5: 0.875rem; /* 14px */
|
||||
--space-4: 1rem; /* 16px */
|
||||
--space-5: 1.25rem; /* 20px */
|
||||
--space-6: 1.5rem; /* 24px */
|
||||
--space-7: 1.75rem; /* 28px */
|
||||
--space-8: 2rem; /* 32px */
|
||||
--space-9: 2.25rem; /* 36px */
|
||||
--space-10: 2.5rem; /* 40px */
|
||||
--space-11: 2.75rem; /* 44px */
|
||||
--space-12: 3rem; /* 48px */
|
||||
--space-14: 3.5rem; /* 56px */
|
||||
--space-16: 4rem; /* 64px */
|
||||
--space-20: 5rem; /* 80px */
|
||||
--space-24: 6rem; /* 96px */
|
||||
--space-28: 7rem; /* 112px */
|
||||
--space-32: 8rem; /* 128px */
|
||||
--space-36: 9rem; /* 144px */
|
||||
--space-40: 10rem; /* 160px */
|
||||
--space-44: 11rem; /* 176px */
|
||||
--space-48: 12rem; /* 192px */
|
||||
--space-52: 13rem; /* 208px */
|
||||
--space-56: 14rem; /* 224px */
|
||||
--space-60: 15rem; /* 240px */
|
||||
--space-64: 16rem; /* 256px */
|
||||
--space-72: 18rem; /* 288px */
|
||||
--space-80: 20rem; /* 320px */
|
||||
--space-96: 24rem; /* 384px */
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Semantic Spacing
|
||||
--------------------------------------------------------------------------- */
|
||||
--space-section: clamp(var(--space-16), 10vw, var(--space-24));
|
||||
--space-section-header: clamp(var(--space-4), 2vw, var(--space-6));
|
||||
--space-container-x: clamp(var(--space-4), 5vw, var(--space-8));
|
||||
--space-stack-sm: var(--space-2);
|
||||
--space-stack-md: var(--space-4);
|
||||
--space-stack-lg: var(--space-8);
|
||||
--space-inline-sm: var(--space-2);
|
||||
--space-inline-md: var(--space-4);
|
||||
--space-inline-lg: var(--space-6);
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Section Padding - Size Variants
|
||||
--------------------------------------------------------------------------- */
|
||||
--space-section-sm: clamp(var(--space-12), 6vw, var(--space-16));
|
||||
--space-section-md: clamp(var(--space-16), 8vw, var(--space-24));
|
||||
--space-section-lg: clamp(var(--space-20), 10vw, var(--space-32));
|
||||
--space-section-xl: clamp(var(--space-28), 12vw, var(--space-40));
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Section Grid Gaps - Fluid Scaling
|
||||
--------------------------------------------------------------------------- */
|
||||
--space-section-gap: clamp(var(--space-8), 5vw, var(--space-12));
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Content Block Spacing
|
||||
--------------------------------------------------------------------------- */
|
||||
--space-content-gap: clamp(var(--space-4), 3vw, var(--space-8));
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Heading Margins
|
||||
--------------------------------------------------------------------------- */
|
||||
--space-heading-gap: var(--space-6); /* 24px - consistent heading bottom margin */
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Page Top Spacing (after fixed header)
|
||||
--------------------------------------------------------------------------- */
|
||||
--space-page-top: var(--space-32); /* 128px - clearance for fixed header + breathing room */
|
||||
--space-page-top-sm: var(--space-24); /* 96px - smaller top clearance */
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
/* =============================================================================
|
||||
Astro Rocket Design Tokens - Typography
|
||||
=============================================================================
|
||||
Fluid typography using clamp() for responsive sizing.
|
||||
Font families are theme-controlled — see themes/*.css
|
||||
============================================================================= */
|
||||
|
||||
:root {
|
||||
/* ---------------------------------------------------------------------------
|
||||
Font Sizes - Fluid Typography
|
||||
Using clamp(min, preferred, max) for smooth scaling
|
||||
--------------------------------------------------------------------------- */
|
||||
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
|
||||
--text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 0.9375rem);
|
||||
--text-base: clamp(1rem, 0.925rem + 0.375vw, 1.0625rem);
|
||||
--text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
|
||||
--text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
|
||||
--text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 1.875rem);
|
||||
--text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
|
||||
--text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.25rem);
|
||||
--text-5xl: clamp(3rem, 2.25rem + 3.75vw, 4.5rem);
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Line Heights
|
||||
--------------------------------------------------------------------------- */
|
||||
--leading-none: 1;
|
||||
--leading-tight: 1.25;
|
||||
--leading-snug: 1.375;
|
||||
--leading-normal: 1.5;
|
||||
--leading-relaxed: 1.625;
|
||||
--leading-loose: 2;
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Letter Spacing
|
||||
--------------------------------------------------------------------------- */
|
||||
--tracking-tighter: -0.05em;
|
||||
--tracking-tight: -0.025em;
|
||||
--tracking-normal: 0;
|
||||
--tracking-wide: 0.025em;
|
||||
--tracking-wider: 0.05em;
|
||||
--tracking-widest: 0.1em;
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Font Weights
|
||||
--------------------------------------------------------------------------- */
|
||||
--weight-thin: 100;
|
||||
--weight-extralight: 200;
|
||||
--weight-light: 300;
|
||||
--weight-normal: 400;
|
||||
--weight-medium: 500;
|
||||
--weight-semibold: 600;
|
||||
--weight-bold: 700;
|
||||
--weight-extrabold: 800;
|
||||
--weight-black: 900;
|
||||
}
|
||||
Reference in New Issue
Block a user