@ecopages/radiant-themes 0.0.0-stage → 0.2.0

package/dist/foundation.css

@@ -0,0 +1,11 @@
+@import '@ecopages/radiant-ui/tokens/foundation';
+@import '@ecopages/radiant-ui/tokens/spacing/default';
+@import '@ecopages/radiant-ui/tokens/radius/default';
+
+:where(:root) {
+	color-scheme: light;
+}
+
+:where(.dark) {
+	color-scheme: dark;
+}

package/dist/themes/cloudflare/compact.css

@@ -0,0 +1,2 @@
+@import '../cloudflare.css';
+@import '@ecopages/radiant-ui/tokens/spacing/compact';

package/dist/themes/cloudflare.css

@@ -0,0 +1,4 @@
+@import '../foundation.css';
+@import '../tokens/colors/cloudflare.css';
+@import '../tokens/roles/cloudflare.css';
+@import '../tokens/components/cloudflare.css';

package/dist/themes/github/compact.css

@@ -0,0 +1,2 @@
+@import '../github.css';
+@import '@ecopages/radiant-ui/tokens/spacing/compact';

package/dist/themes/github.css

@@ -0,0 +1,4 @@
+@import '../foundation.css';
+@import '../tokens/colors/github.css';
+@import '../tokens/roles/github.css';
+@import '../tokens/components/github.css';

package/dist/themes/high-contrast/compact.css

@@ -0,0 +1,2 @@
+@import '../high-contrast.css';
+@import '@ecopages/radiant-ui/tokens/spacing/compact';

package/dist/themes/high-contrast.css

@@ -0,0 +1,4 @@
+@import '../foundation.css';
+@import '../tokens/colors/high-contrast.css';
+@import '../tokens/roles/high-contrast.css';
+@import '../tokens/components/high-contrast.css';

package/dist/themes/macos/compact.css

@@ -0,0 +1,2 @@
+@import '../macos.css';
+@import '@ecopages/radiant-ui/tokens/spacing/compact';

package/dist/themes/macos-classic/compact.css

@@ -0,0 +1,2 @@
+@import '../macos-classic.css';
+@import '@ecopages/radiant-ui/tokens/spacing/compact';

package/dist/themes/macos-classic.css

@@ -0,0 +1,4 @@
+@import '../foundation.css';
+@import '../tokens/colors/macos-classic.css';
+@import '../tokens/roles/macos-classic.css';
+@import '../tokens/components/macos-classic.css';

package/dist/themes/macos.css

@@ -0,0 +1,4 @@
+@import '../foundation.css';
+@import '../tokens/colors/macos.css';
+@import '../tokens/roles/macos.css';
+@import '../tokens/components/macos.css';

package/dist/themes/material/compact.css

@@ -0,0 +1,2 @@
+@import '../material.css';
+@import '@ecopages/radiant-ui/tokens/spacing/compact';

package/dist/themes/material.css

@@ -0,0 +1,4 @@
+@import '../foundation.css';
+@import '../tokens/colors/material.css';
+@import '../tokens/roles/material.css';
+@import '../tokens/components/material.css';

package/dist/themes/vercel/compact.css

@@ -0,0 +1,2 @@
+@import '../vercel.css';
+@import '@ecopages/radiant-ui/tokens/spacing/compact';

package/dist/themes/vercel.css

@@ -0,0 +1,4 @@
+@import '../foundation.css';
+@import '../tokens/colors/vercel.css';
+@import '../tokens/roles/vercel.css';
+@import '../tokens/components/vercel.css';

package/dist/themes/vscode/compact.css

@@ -0,0 +1,2 @@
+@import '../vscode.css';
+@import '@ecopages/radiant-ui/tokens/spacing/compact';

package/dist/themes/vscode.css

@@ -0,0 +1,4 @@
+@import '../foundation.css';
+@import '../tokens/colors/vscode.css';
+@import '../tokens/roles/vscode.css';
+@import '../tokens/components/vscode.css';

package/dist/themes/windows95/compact.css

@@ -0,0 +1,2 @@
+@import '../windows95.css';
+@import '@ecopages/radiant-ui/tokens/spacing/compact';

package/dist/themes/windows95.css

@@ -0,0 +1,4 @@
+@import '../foundation.css';
+@import '../tokens/colors/windows95.css';
+@import '../tokens/roles/windows95.css';
+@import '../tokens/components/windows95.css';

package/dist/tokens/colors/cloudflare.css

@@ -0,0 +1,53 @@
+:where(:root),
+:root[data-rui-theme='cloudflare'] {
+	--color-cloudflare-canvas: oklch(98.75% 0 0);
+	--color-cloudflare-elevated: oklch(98% 0 0);
+	--color-cloudflare-recessed: oklch(96% 0 0);
+	--color-cloudflare-base: oklch(100% 0 0);
+	--color-cloudflare-tint: oklch(97% 0 0);
+	--color-cloudflare-border: oklch(14.5% 0 0 / 10%);
+	--color-cloudflare-hairline: oklch(93.5% 0 0);
+	--color-cloudflare-shadow-edge: oklch(0% 0 0 / 12%);
+	--color-cloudflare-shadow-drop: oklch(0% 0 0 / 8%);
+	--color-cloudflare-border-strong: oklch(14.5% 0 0 / 50%);
+	--color-cloudflare-fg: oklch(14.5% 0 0);
+	--color-cloudflare-muted-fg: oklch(47% 0 0);
+	--color-cloudflare-blue: oklch(42.4% 0.199 265.638);
+	--color-cloudflare-blue-bright: oklch(57.7% 0.2324 260);
+	--color-cloudflare-orange: #cc3a00;
+	--color-cloudflare-orange-bright: #ff5e1e;
+	--color-cloudflare-orange-deep: #a82f00;
+	--color-cloudflare-orange-fill: #cc3a00;
+	--color-cloudflare-amber: #f5b400;
+	--color-cloudflare-amber-text: #7a5200;
+	--color-cloudflare-green: #1a7f37;
+	--color-cloudflare-red: #cf222e;
+	--color-cloudflare-purple: #8250df;
+}
+
+:where(.dark),
+:root.dark[data-rui-theme='cloudflare'] {
+	--color-cloudflare-canvas: oklch(10% 0 0);
+	--color-cloudflare-elevated: oklch(12% 0 0);
+	--color-cloudflare-recessed: oklch(15% 0 0);
+	--color-cloudflare-base: oklch(17% 0 0);
+	--color-cloudflare-tint: oklch(26.9% 0 0);
+	--color-cloudflare-border: oklch(32% 0 0);
+	--color-cloudflare-hairline: oklch(26.9% 0 0);
+	--color-cloudflare-shadow-edge: oklch(100% 0 0 / 10%);
+	--color-cloudflare-shadow-drop: oklch(0% 0 0 / 30%);
+	--color-cloudflare-border-strong: oklch(100% 0 0 / 50%);
+	--color-cloudflare-fg: oklch(96% 0 0);
+	--color-cloudflare-muted-fg: oklch(72% 0 0);
+	--color-cloudflare-blue: oklch(70.7% 0.165 254.624);
+	--color-cloudflare-blue-bright: oklch(80% 0.13 255);
+	--color-cloudflare-orange: #ff5e1e;
+	--color-cloudflare-orange-bright: #ff8a5c;
+	--color-cloudflare-orange-deep: #cc3a00;
+	--color-cloudflare-orange-fill: #cc3a00;
+	--color-cloudflare-amber: #f5c04a;
+	--color-cloudflare-amber-text: #f5c04a;
+	--color-cloudflare-green: #3fb950;
+	--color-cloudflare-red: #ff7b72;
+	--color-cloudflare-purple: #b392f0;
+}

package/dist/tokens/colors/github.css

@@ -0,0 +1,33 @@
+:where(:root), :root[data-rui-theme='github'] {
+	--color-github-white: #ffffff;
+	--color-github-canvas: #ffffff;
+	--color-github-subtle: #f6f8fa;
+	--color-github-muted: #eaeef2;
+	--color-github-border: #d1d9e0;
+	--color-github-border-strong: #8c959f;
+	--color-github-fg: #1f2328;
+	--color-github-muted-fg: #59636e;
+	--color-github-blue: #0969da;
+	--color-github-blue-light: #54aeff;
+	--color-github-green: #1a7f37;
+	--color-github-red: #cf222e;
+	--color-github-orange: #bc4c00;
+	--color-github-purple: #8250df;
+}
+
+:where(.dark), :root.dark[data-rui-theme='github'] {
+	--color-github-white: #f0f6fc;
+	--color-github-canvas: #0d1117;
+	--color-github-subtle: #151b23;
+	--color-github-muted: #212830;
+	--color-github-border: #3d444d;
+	--color-github-border-strong: #6e7681;
+	--color-github-fg: #f0f6fc;
+	--color-github-muted-fg: #9198a1;
+	--color-github-blue: #1f6feb;
+	--color-github-blue-light: #4493f8;
+	--color-github-green: #238636;
+	--color-github-red: #da3633;
+	--color-github-orange: #db6d28;
+	--color-github-purple: #a371f7;
+}

package/dist/tokens/colors/high-contrast.css

@@ -0,0 +1,53 @@
+:where(:root), :root[data-rui-theme='high-contrast'] {
+	--contrast-canvas: #ffffff;
+	--contrast-surface: #ffffff;
+	--contrast-container: #f2f2f2;
+	--contrast-text: #000000;
+	--contrast-primary: #0033cc;
+	--contrast-secondary: #005050;
+	--contrast-tertiary: #000000;
+	--contrast-error: #780000;
+	--contrast-success: #005000;
+	--contrast-info: #0033cc;
+	--contrast-warning: #4a3600;
+	--contrast-primary-container: #dce8ff;
+	--contrast-secondary-container: #d9f4ef;
+	--contrast-error-container: #ffe2dd;
+	--contrast-success-container: #e0f5dd;
+	--contrast-info-container: #dce8ff;
+	--contrast-warning-container: #fff0b8;
+	--contrast-focus: #0000a8;
+}
+
+:where(.dark), :root.dark[data-rui-theme='high-contrast'] {
+	--contrast-canvas: #000000;
+	--contrast-surface: #000000;
+	--contrast-container: #1a1a1a;
+	--contrast-text: #ffffff;
+	--contrast-primary: #ffff00;
+	--contrast-secondary: #00ffff;
+	--contrast-tertiary: #ffffff;
+	--contrast-error: #ff9a91;
+	--contrast-success: #8bff70;
+	--contrast-info: #80dfff;
+	--contrast-warning: #ffff00;
+	--contrast-primary-container: #ffff00;
+	--contrast-secondary-container: #00ffff;
+	--contrast-error-container: #ffb4ab;
+	--contrast-success-container: #aaff90;
+	--contrast-info-container: #8ee6ff;
+	--contrast-warning-container: #ffff00;
+	--contrast-focus: #ffff00;
+}
+
+@theme inline {
+	--color-contrast-canvas: var(--contrast-canvas);
+	--color-contrast-surface: var(--contrast-surface);
+	--color-contrast-container: var(--contrast-container);
+	--color-contrast-text: var(--contrast-text);
+	--color-contrast-primary: var(--contrast-primary);
+	--color-contrast-secondary: var(--contrast-secondary);
+	--color-contrast-error: var(--contrast-error);
+	--color-contrast-success: var(--contrast-success);
+	--color-contrast-warning: var(--contrast-warning);
+}

package/dist/tokens/colors/macos-classic.css

@@ -0,0 +1,66 @@
+/**
+ * Mac OS 9 Platinum. The seven greys, black frame, white bevel highlight, and 1px title-bar stripes follow the Mac OS 8
+ * Human Interface Guidelines and the Appearance Manager's default theme: system greys #eeeeee, #dddddd, #cccccc,
+ * #aaaaaa, #808080, #393939, #202020, with the default blue accent #6666cc.
+ */
+:where(:root), :root[data-rui-theme='macos-classic'] {
+	--macos-classic-canvas: #dddddd;
+	--macos-classic-surface: #dddddd;
+	--macos-classic-container: #cccccc;
+	--macos-classic-face: #dddddd;
+	--macos-classic-face-pressed: #666666;
+	--macos-classic-light: #ffffff;
+	--macos-classic-mid: #aaaaaa;
+	--macos-classic-shadow: #808080;
+	--macos-classic-dark: #000000;
+	--macos-classic-titlebar-stripe: #ffffff;
+	--macos-classic-titlebar-line: #787878;
+	--macos-classic-text: #000000;
+	--macos-classic-muted: #393939;
+	--macos-classic-field: #ffffff;
+	--macos-classic-field-text: #000000;
+	--macos-classic-selection: #6666cc;
+	--macos-classic-selection-text: #ffffff;
+	--macos-classic-blue: #333399;
+	--macos-classic-blue-light: #6666cc;
+	--macos-classic-green: #176b42;
+	--macos-classic-red: #8c1c1c;
+	--macos-classic-amber: #644100;
+}
+
+/**
+ * @remarks Mac OS 8 and 9 had no dark appearance. This scheme keeps Platinum's black frames, bevels, and striped title
+ * bars on darker faces and fields.
+ */
+:where(.dark), :root.dark[data-rui-theme='macos-classic'] {
+	--macos-classic-canvas: #262626;
+	--macos-classic-surface: #2e2e2e;
+	--macos-classic-container: #3a3a3a;
+	--macos-classic-face: #4a4a4a;
+	--macos-classic-face-pressed: #2a2a2a;
+	--macos-classic-light: #b0b0b0;
+	--macos-classic-mid: #858585;
+	--macos-classic-shadow: #777777;
+	--macos-classic-dark: #000000;
+	--macos-classic-titlebar-stripe: #555555;
+	--macos-classic-titlebar-line: #1a1a1a;
+	--macos-classic-text: #f2f2f2;
+	--macos-classic-muted: #d0d0d0;
+	--macos-classic-field: #1a1a1a;
+	--macos-classic-field-text: #f2f2f2;
+	--macos-classic-selection: #5a5ac8;
+	--macos-classic-selection-text: #ffffff;
+	--macos-classic-blue: #a9a9ff;
+	--macos-classic-blue-light: #c4c4ff;
+	--macos-classic-green: #80d9a2;
+	--macos-classic-red: #ffaaa0;
+	--macos-classic-amber: #ffd27a;
+}
+
+@theme inline {
+	--color-macos-classic-canvas: var(--macos-classic-canvas);
+	--color-macos-classic-surface: var(--macos-classic-surface);
+	--color-macos-classic-container: var(--macos-classic-container);
+	--color-macos-classic-text: var(--macos-classic-text);
+	--color-macos-classic-blue: var(--macos-classic-blue);
+}

package/dist/tokens/colors/macos.css

@@ -0,0 +1,40 @@
+:where(:root), :root[data-rui-theme='macos'] {
+	--macos-canvas: #f5f5f7;
+	--macos-surface: #ffffff;
+	--macos-subtle: #e9e9ed;
+	--macos-border: #7f7f84;
+	--macos-separator: #d1d1d6;
+	--macos-text: #1d1d1f;
+	--macos-muted: #55555b;
+	--macos-blue: #005fcc;
+	--macos-blue-light: #004da8;
+	--macos-green: #176b35;
+	--macos-red: #a51d2d;
+	--macos-amber: #704500;
+	--macos-purple: #6e3bb5;
+}
+
+:where(.dark), :root.dark[data-rui-theme='macos'] {
+	--macos-canvas: #1c1c1e;
+	--macos-surface: #2c2c2e;
+	--macos-subtle: #3a3a3c;
+	--macos-border: #8e8e93;
+	--macos-separator: #3a3a3c;
+	--macos-text: #f5f5f7;
+	--macos-muted: #d1d1d6;
+	--macos-blue: #55a6ff;
+	--macos-blue-light: #8cc2ff;
+	--macos-green: #63d982;
+	--macos-red: #ff7a83;
+	--macos-amber: #ffd166;
+	--macos-purple: #c8a1ff;
+}
+
+@theme inline {
+	--color-macos-canvas: var(--macos-canvas);
+	--color-macos-surface: var(--macos-surface);
+	--color-macos-subtle: var(--macos-subtle);
+	--color-macos-text: var(--macos-text);
+	--color-macos-blue: var(--macos-blue);
+	--color-macos-purple: var(--macos-purple);
+}

package/dist/tokens/colors/material.css

@@ -0,0 +1,25 @@
+:where(:root), :root[data-rui-theme='material'] {
+	--material-primary: oklch(46% 0.17 293);
+	--material-secondary: oklch(48% 0.045 286);
+	--material-tertiary: oklch(48% 0.11 340);
+	--material-error: oklch(48% 0.18 25);
+	--material-canvas: oklch(99% 0.006 285);
+	--material-surface: oklch(98% 0.009 285);
+	--material-surface-container: oklch(95% 0.015 285);
+	--material-outline: oklch(53% 0.018 285);
+	--material-outline-variant: oklch(86% 0.012 300);
+	--material-text: oklch(18% 0.018 285);
+}
+
+:where(.dark), :root.dark[data-rui-theme='material'] {
+	--material-primary: oklch(82% 0.11 293);
+	--material-secondary: oklch(80% 0.04 286);
+	--material-tertiary: oklch(82% 0.09 340);
+	--material-error: oklch(82% 0.12 25);
+	--material-canvas: oklch(17% 0.012 285);
+	--material-surface: oklch(20% 0.014 285);
+	--material-surface-container: oklch(25% 0.018 285);
+	--material-outline: oklch(70% 0.018 285);
+	--material-outline-variant: oklch(36% 0.012 300);
+	--material-text: oklch(91% 0.01 285);
+}

package/dist/tokens/colors/vercel.css

@@ -0,0 +1,71 @@
+:where(:root), :root[data-rui-theme='vercel'] {
+	--color-vercel-gray-50: #fafafa;
+	--color-vercel-gray-100: #f2f2f2;
+	--color-vercel-gray-200: #eaeaea;
+	--color-vercel-gray-300: #e1e1e1;
+	--color-vercel-gray-400: #c7c7c7;
+	--color-vercel-gray-500: #a1a1a1;
+	--color-vercel-gray-600: #666666;
+	--color-vercel-gray-700: #444444;
+	--color-vercel-gray-800: #333333;
+	--color-vercel-gray-900: #111111;
+	--color-vercel-gray-950: #000000;
+
+	--color-vercel-blue: #0070f3;
+	--color-vercel-blue-light: #3291ff;
+	--color-vercel-red: #ee0000;
+	--color-vercel-amber: #f5a623;
+	--color-vercel-green: #0cce6b;
+	--color-vercel-teal: #50e3c2;
+	--color-vercel-purple: #8e4ec6;
+	--color-vercel-pink: #ff0080;
+
+	--color-vercel-background-1: #ffffff;
+	--color-vercel-background-2: #fafafa;
+	--color-vercel-component-1: #ffffff;
+	--color-vercel-component-2: #fafafa;
+	--color-vercel-component-3: #eaeaea;
+	--color-vercel-border-4: #eaeaea;
+	--color-vercel-border-5: #999999;
+	--color-vercel-border-6: #666666;
+	--color-vercel-high-contrast-1: #000000;
+	--color-vercel-high-contrast-2: #333333;
+	--color-vercel-text-secondary: #666666;
+	--color-vercel-text-primary: #000000;
+}
+
+:where(.dark), :root.dark[data-rui-theme='vercel'] {
+	--color-vercel-gray-50: #1a1a1a;
+	--color-vercel-gray-100: #222222;
+	--color-vercel-gray-200: #2a2a2a;
+	--color-vercel-gray-300: #333333;
+	--color-vercel-gray-400: #444444;
+	--color-vercel-gray-500: #666666;
+	--color-vercel-gray-600: #888888;
+	--color-vercel-gray-700: #999999;
+	--color-vercel-gray-800: #cccccc;
+	--color-vercel-gray-900: #eeeeee;
+	--color-vercel-gray-950: #ffffff;
+
+	--color-vercel-blue: #3291ff;
+	--color-vercel-blue-light: #52a8ff;
+	--color-vercel-red: #ff1a1a;
+	--color-vercel-amber: #f5a623;
+	--color-vercel-green: #50e3c2;
+	--color-vercel-teal: #50e3c2;
+	--color-vercel-purple: #a76ad7;
+	--color-vercel-pink: #ff0080;
+
+	--color-vercel-background-1: #000000;
+	--color-vercel-background-2: #111111;
+	--color-vercel-component-1: #111111;
+	--color-vercel-component-2: #1a1a1a;
+	--color-vercel-component-3: #333333;
+	--color-vercel-border-4: #333333;
+	--color-vercel-border-5: #666666;
+	--color-vercel-border-6: #888888;
+	--color-vercel-high-contrast-1: #ffffff;
+	--color-vercel-high-contrast-2: #cccccc;
+	--color-vercel-text-secondary: #888888;
+	--color-vercel-text-primary: #ffffff;
+}

package/dist/tokens/colors/vscode.css

@@ -0,0 +1,31 @@
+:where(:root), :root[data-rui-theme='vscode'] {
+	--color-vscode-canvas: #ffffff;
+	--color-vscode-subtle: #f8f8f8;
+	--color-vscode-muted: #ececec;
+	--color-vscode-border: #cecece;
+	--color-vscode-border-strong: #808080;
+	--color-vscode-fg: #3b3b3b;
+	--color-vscode-muted-fg: #616161;
+	--color-vscode-blue: #006bb3;
+	--color-vscode-blue-light: #3794ff;
+	--color-vscode-green: #16825d;
+	--color-vscode-red: #d32f2f;
+	--color-vscode-orange: #a15c00;
+	--color-vscode-purple: #af00db;
+}
+
+:where(.dark), :root.dark[data-rui-theme='vscode'] {
+	--color-vscode-canvas: #1f1f1f;
+	--color-vscode-subtle: #181818;
+	--color-vscode-muted: #2b2b2b;
+	--color-vscode-border: #393939;
+	--color-vscode-border-strong: #6e6e6e;
+	--color-vscode-fg: #cccccc;
+	--color-vscode-muted-fg: #9d9d9d;
+	--color-vscode-blue: #0078d4;
+	--color-vscode-blue-light: #4daafc;
+	--color-vscode-green: #4ec9b0;
+	--color-vscode-red: #f14c4c;
+	--color-vscode-orange: #cca700;
+	--color-vscode-purple: #c586c0;
+}

package/dist/tokens/colors/windows95.css

@@ -0,0 +1,54 @@
+:where(:root), :root[data-rui-theme='windows95'] {
+	--windows95-canvas: #c0c0c0;
+	--windows95-face: #c0c0c0;
+	--windows95-light: #ffffff;
+	--windows95-highlight: #dfdfdf;
+	--windows95-shadow: #808080;
+	--windows95-dark: #0a0a0a;
+	--windows95-text: #000000;
+	--windows95-muted: #404040;
+	--windows95-field: #ffffff;
+	--windows95-field-text: #000000;
+	--windows95-selection: #000080;
+	--windows95-selection-text: #ffffff;
+	--windows95-blue: #000080;
+	--windows95-blue-light: #0000a8;
+	--windows95-green: #005000;
+	--windows95-red: #800000;
+	--windows95-amber: #634000;
+}
+
+/**
+ * @remarks Windows 95 shipped no dark mode. This scheme keeps the two-tone bevel structure and remaps it to a dark
+ * button face, in the spirit of the custom color schemes Windows offered.
+ */
+:where(.dark), :root.dark[data-rui-theme='windows95'] {
+	--windows95-canvas: #2b2b2b;
+	--windows95-face: #3a3a3a;
+	--windows95-light: #d0d0d0;
+	--windows95-highlight: #a5a5a5;
+	--windows95-shadow: #858585;
+	--windows95-dark: #6f6f6f;
+	--windows95-text: #f0f0f0;
+	--windows95-muted: #c8c8c8;
+	--windows95-field: #1c1c1c;
+	--windows95-field-text: #f0f0f0;
+	--windows95-selection: #2d5aa8;
+	--windows95-selection-text: #ffffff;
+	--windows95-blue: #000080;
+	--windows95-blue-light: #7aa7ff;
+	--windows95-green: #66d17a;
+	--windows95-red: #ff8a80;
+	--windows95-amber: #ffce65;
+}
+
+@theme inline {
+	--color-windows95-canvas: var(--windows95-canvas);
+	--color-windows95-face: var(--windows95-face);
+	--color-windows95-light: var(--windows95-light);
+	--color-windows95-highlight: var(--windows95-highlight);
+	--color-windows95-shadow: var(--windows95-shadow);
+	--color-windows95-dark: var(--windows95-dark);
+	--color-windows95-text: var(--windows95-text);
+	--color-windows95-blue: var(--windows95-blue);
+}