@ecopages/radiant-themes 0.0.0-stage → 0.2.0

package/dist/tokens/roles/material.css

@@ -0,0 +1,144 @@
+:where(:root), :root[data-rui-theme='material'] {
+	--gray-50: oklch(98% 0.008 285);
+	--gray-100: oklch(95% 0.012 285);
+	--gray-200: oklch(89% 0.015 285);
+	--gray-300: oklch(79% 0.016 285);
+	--gray-400: oklch(68% 0.018 285);
+	--gray-500: oklch(55% 0.018 285);
+	--gray-600: oklch(44% 0.018 285);
+	--gray-700: oklch(35% 0.018 285);
+	--gray-800: oklch(27% 0.016 285);
+	--gray-900: oklch(21% 0.014 285);
+	--gray-950: oklch(16% 0.012 285);
+
+	--primary: var(--material-primary);
+	--on-primary: white;
+	--primary-light: oklch(64% 0.14 293);
+	--primary-dark: oklch(34% 0.13 293);
+	--primary-container: oklch(92% 0.045 293);
+	--on-primary-container: oklch(28% 0.11 293);
+	--secondary: var(--material-secondary);
+	--on-secondary: white;
+	--secondary-light: oklch(66% 0.04 286);
+	--secondary-dark: oklch(36% 0.04 286);
+	--secondary-container: oklch(92% 0.02 286);
+	--on-secondary-container: oklch(28% 0.03 286);
+	--tertiary: var(--material-tertiary);
+	--on-tertiary: white;
+	--tertiary-container: oklch(92% 0.035 340);
+	--on-tertiary-container: oklch(28% 0.08 340);
+	--error: var(--material-error);
+	--on-error: white;
+	--error-light: oklch(66% 0.15 25);
+	--error-dark: oklch(34% 0.14 25);
+	--error-container: oklch(92% 0.04 25);
+	--on-error-container: oklch(30% 0.12 25);
+	--success: oklch(47% 0.13 155);
+	--on-success: white;
+	--success-light: oklch(68% 0.12 155);
+	--success-dark: oklch(32% 0.1 155);
+	--success-container: oklch(92% 0.035 155);
+	--on-success-container: oklch(28% 0.08 155);
+	--info: oklch(48% 0.13 250);
+	--on-info: white;
+	--info-light: oklch(68% 0.12 250);
+	--info-dark: oklch(33% 0.11 250);
+	--info-container: oklch(92% 0.035 250);
+	--on-info-container: oklch(28% 0.08 250);
+	--warning: oklch(54% 0.13 75);
+	--on-warning: white;
+	--warning-light: oklch(72% 0.12 75);
+	--warning-dark: oklch(37% 0.1 75);
+	--warning-container: oklch(93% 0.04 85);
+	--on-warning-container: oklch(31% 0.08 75);
+
+	--neutral: oklch(53% 0.018 285);
+	--surface: var(--material-surface);
+	--on-surface: var(--material-text);
+	--surface-container-lowest: oklch(100% 0 0);
+	--on-surface-container-lowest: var(--material-text);
+	--surface-container-low: oklch(97% 0.008 285);
+	--on-surface-container-low: var(--material-text);
+	--surface-container: var(--material-surface-container);
+	--on-surface-container: var(--material-text);
+	--surface-container-high: oklch(92% 0.018 285);
+	--on-surface-container-high: var(--material-text);
+	--surface-container-highest: oklch(89% 0.02 285);
+	--on-surface-container-highest: var(--material-text);
+	--background: var(--material-canvas);
+	--on-background: var(--material-text);
+	--rui-border-color: var(--material-outline-variant);
+	--rui-control-border-color: var(--material-outline);
+	--border: color-mix(in srgb, var(--rui-border-color) var(--rui-border-alpha), transparent);
+	--focus-ring: oklch(46% 0.17 293);
+	--on-focus-ring: white;
+	--link: oklch(42% 0.16 293);
+	--overlay: oklch(0% 0 0 / 0.48);
+	--background-code: oklch(94% 0.012 285);
+	--on-background-code: var(--material-text);
+}
+
+:where(.dark), :root.dark[data-rui-theme='material'] {
+	--gray-50: oklch(95% 0.008 285);
+	--gray-100: oklch(90% 0.01 285);
+	--gray-200: oklch(82% 0.012 285);
+	--gray-300: oklch(72% 0.014 285);
+	--gray-400: oklch(62% 0.016 285);
+	--gray-500: oklch(52% 0.016 285);
+	--gray-600: oklch(42% 0.016 285);
+	--gray-700: oklch(33% 0.014 285);
+	--gray-800: oklch(25% 0.012 285);
+	--gray-900: oklch(20% 0.01 285);
+	--gray-950: oklch(15% 0.009 285);
+	--primary: var(--material-primary);
+	--on-primary: oklch(24% 0.08 293);
+	--primary-container: oklch(34% 0.09 293);
+	--on-primary-container: oklch(91% 0.035 293);
+	--secondary: var(--material-secondary);
+	--on-secondary: oklch(23% 0.025 286);
+	--secondary-container: oklch(34% 0.025 286);
+	--on-secondary-container: oklch(90% 0.02 286);
+	--tertiary: var(--material-tertiary);
+	--on-tertiary: oklch(25% 0.07 340);
+	--tertiary-container: oklch(37% 0.07 340);
+	--on-tertiary-container: oklch(92% 0.03 340);
+	--error: var(--material-error);
+	--on-error: oklch(25% 0.08 25);
+	--error-container: oklch(36% 0.08 25);
+	--on-error-container: oklch(92% 0.04 25);
+	--success: oklch(78% 0.13 155);
+	--on-success: oklch(22% 0.06 155);
+	--success-container: oklch(33% 0.07 155);
+	--on-success-container: oklch(92% 0.04 155);
+	--info: oklch(80% 0.11 250);
+	--on-info: oklch(21% 0.06 250);
+	--info-container: oklch(34% 0.07 250);
+	--on-info-container: oklch(92% 0.035 250);
+	--warning: oklch(84% 0.12 85);
+	--on-warning: oklch(25% 0.06 75);
+	--warning-container: oklch(38% 0.07 75);
+	--on-warning-container: oklch(94% 0.04 85);
+	--neutral: oklch(70% 0.016 285);
+	--surface: var(--material-surface);
+	--on-surface: var(--material-text);
+	--surface-container-lowest: oklch(14% 0.009 285);
+	--on-surface-container-lowest: var(--material-text);
+	--surface-container-low: oklch(18% 0.012 285);
+	--on-surface-container-low: var(--material-text);
+	--surface-container: var(--material-surface-container);
+	--on-surface-container: var(--material-text);
+	--surface-container-high: oklch(28% 0.018 285);
+	--on-surface-container-high: var(--material-text);
+	--surface-container-highest: oklch(32% 0.02 285);
+	--on-surface-container-highest: var(--material-text);
+	--background: var(--material-canvas);
+	--on-background: var(--material-text);
+	--rui-border-color: var(--material-outline-variant);
+	--rui-control-border-color: var(--material-outline);
+	--border: color-mix(in srgb, var(--rui-border-color) var(--rui-border-alpha), transparent);
+	--focus-ring: var(--material-primary);
+	--on-focus-ring: oklch(24% 0.08 293);
+	--link: var(--material-primary);
+	--background-code: oklch(19% 0.012 285);
+	--on-background-code: var(--material-text);
+}

package/dist/tokens/roles/vercel.css

@@ -0,0 +1,141 @@
+:where(:root), :root[data-rui-theme='vercel'] {
+	--gray-50: var(--color-vercel-gray-50);
+	--gray-100: var(--color-vercel-gray-100);
+	--gray-200: var(--color-vercel-gray-200);
+	--gray-300: var(--color-vercel-gray-300);
+	--gray-400: var(--color-vercel-gray-400);
+	--gray-500: var(--color-vercel-gray-500);
+	--gray-600: var(--color-vercel-gray-600);
+	--gray-700: var(--color-vercel-gray-700);
+	--gray-800: var(--color-vercel-gray-800);
+	--gray-900: var(--color-vercel-gray-900);
+	--gray-950: var(--color-vercel-gray-950);
+
+	--primary: var(--color-vercel-high-contrast-1);
+	--on-primary: var(--color-vercel-background-1);
+	--primary-light: var(--color-vercel-high-contrast-2);
+	--primary-dark: var(--color-vercel-gray-950);
+	--primary-container: var(--color-vercel-component-3);
+	--on-primary-container: var(--color-vercel-text-primary);
+
+	--secondary: var(--color-vercel-blue);
+	--on-secondary: white;
+	--secondary-light: var(--color-vercel-blue-light);
+	--secondary-dark: color-mix(in oklab, var(--color-vercel-blue), black 30%);
+	--secondary-container: color-mix(in oklab, var(--color-vercel-blue), white 90%);
+	--on-secondary-container: color-mix(in oklab, var(--color-vercel-blue), black 60%);
+
+	--tertiary: var(--color-vercel-purple);
+	--on-tertiary: white;
+	--tertiary-container: color-mix(in oklab, var(--color-vercel-purple), white 90%);
+	--on-tertiary-container: color-mix(in oklab, var(--color-vercel-purple), black 60%);
+
+	--error: var(--color-vercel-red);
+	--on-error: white;
+	--error-light: color-mix(in oklab, var(--color-vercel-red), white 30%);
+	--error-dark: color-mix(in oklab, var(--color-vercel-red), black 30%);
+	--error-container: color-mix(in oklab, var(--color-vercel-red), white 91%);
+	--on-error-container: color-mix(in oklab, var(--color-vercel-red), black 60%);
+	--success: var(--color-vercel-green);
+	--on-success: var(--color-vercel-gray-950);
+	--success-light: color-mix(in oklab, var(--color-vercel-green), white 30%);
+	--success-dark: color-mix(in oklab, var(--color-vercel-green), black 30%);
+	--success-container: color-mix(in oklab, var(--color-vercel-green), white 90%);
+	--on-success-container: color-mix(in oklab, var(--color-vercel-green), black 60%);
+	--info: var(--color-vercel-blue);
+	--on-info: white;
+	--info-light: var(--color-vercel-blue-light);
+	--info-dark: color-mix(in oklab, var(--color-vercel-blue), black 30%);
+	--info-container: color-mix(in oklab, var(--color-vercel-blue), white 90%);
+	--on-info-container: color-mix(in oklab, var(--color-vercel-blue), black 60%);
+	--warning: var(--color-vercel-amber);
+	--on-warning: var(--color-vercel-gray-950);
+	--warning-light: color-mix(in oklab, var(--color-vercel-amber), white 30%);
+	--warning-dark: color-mix(in oklab, var(--color-vercel-amber), black 30%);
+	--warning-container: color-mix(in oklab, var(--color-vercel-amber), white 88%);
+	--on-warning-container: color-mix(in oklab, var(--color-vercel-amber), black 60%);
+
+	--neutral: var(--color-vercel-text-secondary);
+	--surface: var(--color-vercel-background-1);
+	--on-surface: var(--color-vercel-text-primary);
+	--surface-container-lowest: var(--color-vercel-background-1);
+	--on-surface-container-lowest: var(--color-vercel-text-primary);
+	--surface-container-low: var(--color-vercel-component-2);
+	--on-surface-container-low: var(--color-vercel-text-primary);
+	--surface-container: var(--color-vercel-component-1);
+	--on-surface-container: var(--color-vercel-text-primary);
+	--surface-container-high: var(--color-vercel-component-3);
+	--on-surface-container-high: var(--color-vercel-text-primary);
+	--surface-container-highest: var(--color-vercel-border-4);
+	--on-surface-container-highest: var(--color-vercel-text-primary);
+	--background: var(--color-vercel-background-2);
+	--on-background: var(--color-vercel-text-primary);
+	--rui-border-color: var(--color-vercel-border-4);
+	--rui-control-border-color: #888888;
+	--rui-border-hover-color: var(--color-vercel-border-5);
+	--rui-border-active-color: var(--color-vercel-border-6);
+	--border: color-mix(in srgb, var(--rui-border-color) var(--rui-border-alpha), transparent);
+	--focus-ring: var(--color-vercel-blue);
+	--on-focus-ring: white;
+	--link: color-mix(in srgb, var(--color-vercel-blue) 85%, black);
+	--overlay: oklch(0% 0 0 / 0.45);
+	--background-code: var(--color-vercel-background-1);
+	--on-background-code: var(--color-vercel-text-primary);
+}
+
+:where(.dark), :root.dark[data-rui-theme='vercel'] {
+	--primary: var(--color-vercel-high-contrast-1);
+	--on-primary: var(--color-vercel-background-1);
+	--primary-light: var(--color-vercel-high-contrast-2);
+	--primary-dark: var(--color-vercel-gray-950);
+	--primary-container: var(--color-vercel-component-3);
+	--on-primary-container: var(--color-vercel-text-primary);
+	--secondary: var(--color-vercel-blue);
+	--on-secondary: #00152e;
+	--secondary-container: #00284d;
+	--on-secondary-container: #cce5ff;
+	--tertiary: #b781dc;
+	--on-tertiary: #1b0d26;
+	--tertiary-container: #38204d;
+	--on-tertiary-container: #e7d4f5;
+	--error: #ff5c5c;
+	--on-error: #3b0000;
+	--error-container: #5c1717;
+	--on-error-container: #ffdada;
+	--success: #50e3c2;
+	--on-success: #00251d;
+	--success-container: #10483d;
+	--on-success-container: #c3f5e9;
+	--info: var(--color-vercel-blue);
+	--on-info: #00152e;
+	--info-container: #00284d;
+	--on-info-container: #cce5ff;
+	--warning: #f5b942;
+	--on-warning: #2c1b00;
+	--warning-container: #4a3210;
+	--on-warning-container: #ffe4af;
+	--surface: var(--color-vercel-background-2);
+	--on-surface: var(--color-vercel-text-primary);
+	--surface-container-lowest: var(--color-vercel-background-1);
+	--on-surface-container-lowest: var(--color-vercel-text-primary);
+	--surface-container-low: var(--color-vercel-component-1);
+	--on-surface-container-low: var(--color-vercel-text-primary);
+	--surface-container: var(--color-vercel-component-2);
+	--on-surface-container: var(--color-vercel-text-primary);
+	--surface-container-high: var(--color-vercel-component-3);
+	--on-surface-container-high: var(--color-vercel-text-primary);
+	--surface-container-highest: var(--color-vercel-border-4);
+	--on-surface-container-highest: var(--color-vercel-text-primary);
+	--background: var(--color-vercel-background-1);
+	--on-background: var(--color-vercel-text-primary);
+	--rui-border-color: var(--color-vercel-border-4);
+	--rui-control-border-color: #888888;
+	--rui-border-hover-color: var(--color-vercel-border-5);
+	--rui-border-active-color: var(--color-vercel-border-6);
+	--border: color-mix(in srgb, var(--rui-border-color) var(--rui-border-alpha), transparent);
+	--focus-ring: var(--color-vercel-blue);
+	--on-focus-ring: #00152e;
+	--link: var(--color-vercel-blue);
+	--background-code: var(--color-vercel-background-2);
+	--on-background-code: var(--color-vercel-text-primary);
+}

package/dist/tokens/roles/vscode.css

@@ -0,0 +1,143 @@
+:where(:root), :root[data-rui-theme='vscode'] {
+	--gray-50: color-mix(in oklab, var(--color-vscode-canvas), var(--color-vscode-fg) 4%);
+	--gray-100: color-mix(in oklab, var(--color-vscode-canvas), var(--color-vscode-fg) 10%);
+	--gray-200: color-mix(in oklab, var(--color-vscode-canvas), var(--color-vscode-fg) 20%);
+	--gray-300: color-mix(in oklab, var(--color-vscode-canvas), var(--color-vscode-fg) 34%);
+	--gray-400: color-mix(in oklab, var(--color-vscode-canvas), var(--color-vscode-fg) 50%);
+	--gray-500: color-mix(in oklab, var(--color-vscode-canvas), var(--color-vscode-fg) 64%);
+	--gray-600: color-mix(in oklab, var(--color-vscode-canvas), var(--color-vscode-fg) 74%);
+	--gray-700: color-mix(in oklab, var(--color-vscode-canvas), var(--color-vscode-fg) 82%);
+	--gray-800: color-mix(in oklab, var(--color-vscode-canvas), var(--color-vscode-fg) 89%);
+	--gray-900: color-mix(in oklab, var(--color-vscode-canvas), var(--color-vscode-fg) 95%);
+	--gray-950: var(--color-vscode-fg);
+	--primary: var(--color-vscode-blue);
+	--on-primary: white;
+	--primary-light: var(--color-vscode-blue-light);
+	--primary-dark: color-mix(in oklab, var(--color-vscode-blue), black 35%);
+	--primary-container: color-mix(in oklab, var(--color-vscode-blue), white 90%);
+	--on-primary-container: color-mix(in oklab, var(--color-vscode-blue), black 65%);
+	--secondary: var(--color-vscode-green);
+	--on-secondary: white;
+	--secondary-light: color-mix(in oklab, var(--color-vscode-green), white 30%);
+	--secondary-dark: color-mix(in oklab, var(--color-vscode-green), black 35%);
+	--secondary-container: color-mix(in oklab, var(--color-vscode-green), white 90%);
+	--on-secondary-container: color-mix(in oklab, var(--color-vscode-green), black 65%);
+	--tertiary: var(--color-vscode-purple);
+	--on-tertiary: white;
+	--tertiary-container: color-mix(in oklab, var(--color-vscode-purple), white 90%);
+	--on-tertiary-container: color-mix(in oklab, var(--color-vscode-purple), black 65%);
+	--error: var(--color-vscode-red);
+	--on-error: white;
+	--error-light: color-mix(in oklab, var(--color-vscode-red), white 30%);
+	--error-dark: color-mix(in oklab, var(--color-vscode-red), black 35%);
+	--error-container: color-mix(in oklab, var(--color-vscode-red), white 90%);
+	--on-error-container: color-mix(in oklab, var(--color-vscode-red), black 65%);
+	--success: var(--color-vscode-green);
+	--on-success: white;
+	--success-light: color-mix(in oklab, var(--color-vscode-green), white 30%);
+	--success-dark: color-mix(in oklab, var(--color-vscode-green), black 35%);
+	--success-container: color-mix(in oklab, var(--color-vscode-green), white 90%);
+	--on-success-container: color-mix(in oklab, var(--color-vscode-green), black 65%);
+	--info: var(--color-vscode-blue);
+	--on-info: white;
+	--info-light: var(--color-vscode-blue-light);
+	--info-dark: color-mix(in oklab, var(--color-vscode-blue), black 35%);
+	--info-container: color-mix(in oklab, var(--color-vscode-blue), white 90%);
+	--on-info-container: color-mix(in oklab, var(--color-vscode-blue), black 65%);
+	--warning: var(--color-vscode-orange);
+	--on-warning: white;
+	--warning-light: color-mix(in oklab, var(--color-vscode-orange), white 30%);
+	--warning-dark: color-mix(in oklab, var(--color-vscode-orange), black 35%);
+	--warning-container: color-mix(in oklab, var(--color-vscode-orange), white 88%);
+	--on-warning-container: color-mix(in oklab, var(--color-vscode-orange), black 65%);
+	--neutral: var(--color-vscode-muted-fg);
+	--surface: var(--color-vscode-subtle);
+	--on-surface: var(--color-vscode-fg);
+	--surface-container-lowest: var(--color-vscode-canvas);
+	--on-surface-container-lowest: var(--color-vscode-fg);
+	--surface-container-low: var(--color-vscode-subtle);
+	--on-surface-container-low: var(--color-vscode-fg);
+	--surface-container: var(--color-vscode-muted);
+	--on-surface-container: var(--color-vscode-fg);
+	--surface-container-high: color-mix(in oklab, var(--color-vscode-muted), var(--color-vscode-border) 35%);
+	--on-surface-container-high: var(--color-vscode-fg);
+	--surface-container-highest: var(--color-vscode-border);
+	--on-surface-container-highest: var(--color-vscode-fg);
+	--background: var(--color-vscode-canvas);
+	--on-background: var(--color-vscode-fg);
+	--rui-border-color: var(--color-vscode-border);
+	--rui-control-border-color: var(--color-vscode-border-strong);
+	--border: color-mix(in srgb, var(--rui-border-color) var(--rui-border-alpha), transparent);
+	--focus-ring: var(--color-vscode-blue);
+	--on-focus-ring: white;
+	--link: var(--color-vscode-blue);
+	--overlay: oklch(0% 0 0 / 0.45);
+	--background-code: var(--color-vscode-subtle);
+	--on-background-code: var(--color-vscode-fg);
+}
+
+:where(.dark), :root.dark[data-rui-theme='vscode'] {
+	--gray-50: color-mix(in oklab, var(--color-vscode-canvas), white 96%);
+	--gray-100: color-mix(in oklab, var(--color-vscode-canvas), white 90%);
+	--gray-200: color-mix(in oklab, var(--color-vscode-canvas), white 80%);
+	--gray-300: color-mix(in oklab, var(--color-vscode-canvas), white 66%);
+	--gray-400: color-mix(in oklab, var(--color-vscode-canvas), white 50%);
+	--gray-500: color-mix(in oklab, var(--color-vscode-canvas), white 36%);
+	--gray-600: color-mix(in oklab, var(--color-vscode-canvas), white 26%);
+	--gray-700: color-mix(in oklab, var(--color-vscode-canvas), white 18%);
+	--gray-800: color-mix(in oklab, var(--color-vscode-canvas), white 11%);
+	--gray-900: color-mix(in oklab, var(--color-vscode-canvas), white 5%);
+	--gray-950: var(--color-vscode-canvas);
+	--primary: var(--color-vscode-blue-light);
+	--on-primary: #071b2d;
+	--primary-light: color-mix(in oklab, var(--color-vscode-blue-light), white 22%);
+	--primary-dark: #0078d4;
+	--primary-container: #003e69;
+	--on-primary-container: #d6ebff;
+	--secondary: #4ec9b0;
+	--on-secondary: #06251f;
+	--secondary-container: #164c42;
+	--on-secondary-container: #c3f5e9;
+	--tertiary: #c586c0;
+	--on-tertiary: #2d142a;
+	--tertiary-container: #51274d;
+	--on-tertiary-container: #f5d7f0;
+	--error: #f14c4c;
+	--on-error: #360b0b;
+	--error-container: #5a1717;
+	--on-error-container: #ffd9d9;
+	--success: #4ec9b0;
+	--on-success: #06251f;
+	--success-container: #164c42;
+	--on-success-container: #c3f5e9;
+	--info: var(--color-vscode-blue-light);
+	--on-info: #071b2d;
+	--info-container: #003e69;
+	--on-info-container: #d6ebff;
+	--warning: #e6d17a;
+	--on-warning: #28220a;
+	--warning-container: #4b4115;
+	--on-warning-container: #f7ebad;
+	--surface: var(--color-vscode-subtle);
+	--on-surface: var(--color-vscode-fg);
+	--surface-container-lowest: var(--color-vscode-canvas);
+	--on-surface-container-lowest: var(--color-vscode-fg);
+	--surface-container-low: var(--color-vscode-subtle);
+	--on-surface-container-low: var(--color-vscode-fg);
+	--surface-container: var(--color-vscode-muted);
+	--on-surface-container: var(--color-vscode-fg);
+	--surface-container-high: color-mix(in oklab, var(--color-vscode-muted), var(--color-vscode-border) 35%);
+	--on-surface-container-high: var(--color-vscode-fg);
+	--surface-container-highest: var(--color-vscode-border);
+	--on-surface-container-highest: var(--color-vscode-fg);
+	--background: var(--color-vscode-canvas);
+	--on-background: var(--color-vscode-fg);
+	--rui-border-color: var(--color-vscode-border);
+	--rui-control-border-color: var(--color-vscode-border-strong);
+	--border: color-mix(in srgb, var(--rui-border-color) var(--rui-border-alpha), transparent);
+	--focus-ring: var(--color-vscode-blue-light);
+	--on-focus-ring: #071b2d;
+	--link: var(--color-vscode-blue-light);
+	--background-code: var(--color-vscode-subtle);
+	--on-background-code: var(--color-vscode-fg);
+}

package/dist/tokens/roles/windows95.css

@@ -0,0 +1,142 @@
+:where(:root), :root[data-rui-theme='windows95'] {
+	--gray-50: #ffffff;
+	--gray-100: #dfdfdf;
+	--gray-200: #c0c0c0;
+	--gray-300: #a0a0a0;
+	--gray-400: #808080;
+	--gray-500: #666666;
+	--gray-600: #4d4d4d;
+	--gray-700: #383838;
+	--gray-800: #222222;
+	--gray-900: #111111;
+	--gray-950: #000000;
+	--primary: var(--windows95-blue);
+	--on-primary: #ffffff;
+	--primary-light: var(--windows95-blue-light);
+	--primary-dark: #00004d;
+	--primary-container: #000080;
+	--on-primary-container: #ffffff;
+	--secondary: var(--windows95-green);
+	--on-secondary: #ffffff;
+	--secondary-light: #007000;
+	--secondary-dark: #003800;
+	--secondary-container: #d7ead8;
+	--on-secondary-container: #000000;
+	--tertiary: #000080;
+	--on-tertiary: #ffffff;
+	--tertiary-container: #dfdfdf;
+	--on-tertiary-container: #000000;
+	--error: var(--windows95-red);
+	--on-error: #ffffff;
+	--error-light: #a80000;
+	--error-dark: #500000;
+	--error-container: #f4d7d7;
+	--on-error-container: #000000;
+	--success: var(--windows95-green);
+	--on-success: #ffffff;
+	--success-light: #007000;
+	--success-dark: #003800;
+	--success-container: #d7ead8;
+	--on-success-container: #000000;
+	--info: var(--windows95-blue);
+	--on-info: #ffffff;
+	--info-light: var(--windows95-blue-light);
+	--info-dark: #00004d;
+	--info-container: #d9e5f2;
+	--on-info-container: #000000;
+	--warning: var(--windows95-amber);
+	--on-warning: #ffffff;
+	--warning-light: #805400;
+	--warning-dark: #402b00;
+	--warning-container: #fff0bf;
+	--on-warning-container: #000000;
+	--neutral: var(--windows95-muted);
+	--surface: var(--windows95-face);
+	--on-surface: var(--windows95-text);
+	--surface-container-lowest: var(--windows95-face);
+	--on-surface-container-lowest: #000000;
+	--surface-container-low: #dfdfdf;
+	--on-surface-container-low: #000000;
+	--surface-container: var(--windows95-face);
+	--on-surface-container: var(--windows95-text);
+	--surface-container-high: #b0b0b0;
+	--on-surface-container-high: #000000;
+	--surface-container-highest: #808080;
+	--on-surface-container-highest: #000000;
+	--background: var(--windows95-canvas);
+	--on-background: var(--windows95-text);
+	--rui-border-color: #5f5f5f;
+	--rui-control-border-color: var(--windows95-dark);
+	--border: color-mix(in srgb, var(--rui-border-color) var(--rui-border-alpha), transparent);
+	--focus-ring: var(--windows95-blue);
+	--on-focus-ring: #ffffff;
+	--link: var(--windows95-blue);
+	--overlay: rgb(0 0 0 / 55%);
+	--background-code: #ffffff;
+	--on-background-code: #000000;
+}
+
+:where(.dark), :root.dark[data-rui-theme='windows95'] {
+	--gray-50: #ffffff;
+	--gray-100: #e0e0e0;
+	--gray-200: #c0c0c0;
+	--gray-300: #a0a0a0;
+	--gray-400: #808080;
+	--gray-500: #666666;
+	--gray-600: #4d4d4d;
+	--gray-700: #383838;
+	--gray-800: #222222;
+	--gray-900: #111111;
+	--gray-950: #000000;
+	--primary: var(--windows95-blue-light);
+	--on-primary: #000000;
+	--primary-container: #000080;
+	--on-primary-container: #ffffff;
+	--secondary: var(--windows95-green);
+	--on-secondary: #000000;
+	--secondary-container: #174d28;
+	--on-secondary-container: #ffffff;
+	--tertiary: #8db2ff;
+	--on-tertiary: #000000;
+	--tertiary-container: #000080;
+	--on-tertiary-container: #ffffff;
+	--error: var(--windows95-red);
+	--on-error: #000000;
+	--error-container: #5b1717;
+	--on-error-container: #ffffff;
+	--success: var(--windows95-green);
+	--on-success: #000000;
+	--success-container: #174d28;
+	--on-success-container: #ffffff;
+	--info: var(--windows95-blue-light);
+	--on-info: #000000;
+	--info-container: #000080;
+	--on-info-container: #ffffff;
+	--warning: var(--windows95-amber);
+	--on-warning: #000000;
+	--warning-container: #604500;
+	--on-warning-container: #ffffff;
+	--neutral: var(--windows95-muted);
+	--surface: var(--windows95-face);
+	--on-surface: var(--windows95-text);
+	--surface-container-lowest: #202020;
+	--on-surface-container-lowest: #ffffff;
+	--surface-container-low: #303030;
+	--on-surface-container-low: #ffffff;
+	--surface-container: var(--windows95-face);
+	--on-surface-container: var(--windows95-text);
+	--surface-container-high: #4a4a4a;
+	--on-surface-container-high: #ffffff;
+	--surface-container-highest: #606060;
+	--on-surface-container-highest: #ffffff;
+	--background: var(--windows95-canvas);
+	--on-background: var(--windows95-text);
+	--rui-border-color: #888888;
+	--rui-control-border-color: #a0a0a0;
+	--border: color-mix(in srgb, var(--rui-border-color) var(--rui-border-alpha), transparent);
+	--focus-ring: #ffff00;
+	--on-focus-ring: #000000;
+	--link: #8db2ff;
+	--background-code: #202020;
+	--on-background-code: #ffffff;
+}