Initial release — Astro Rocket v1.0.0
This commit is contained in:
Claude
@@ -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);
|
||||
}
|
||||
Reference in New Issue
Block a user