@ecopages/radiant-themes 0.2.1 → 0.2.2

package/dist/tokens/colors/vercel.css

@@ -1,15 +1,19 @@
+/**
+ * Geist colors: Background 1 and 2, component fills (Colors 1-3), borders (Colors 4-6), high-contrast fills (Colors
+ * 7-8), and text (Colors 9-10), with Geist's near-black #171717 and near-white #ededed in place of pure black and white.
+ */
 :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-gray-200: #ebebeb;
+	--color-vercel-gray-300: #e6e6e6;
+	--color-vercel-gray-400: #c9c9c9;
+	--color-vercel-gray-500: #a8a8a8;
+	--color-vercel-gray-600: #8f8f8f;
+	--color-vercel-gray-700: #7d7d7d;
+	--color-vercel-gray-800: #666666;
+	--color-vercel-gray-900: #4d4d4d;
+	--color-vercel-gray-950: #171717;
 
 	--color-vercel-blue: #0070f3;
 	--color-vercel-blue-light: #3291ff;
@@ -22,30 +26,30 @@
 
 	--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-component-1: #f2f2f2;
+	--color-vercel-component-2: #ebebeb;
+	--color-vercel-component-3: #e6e6e6;
+	--color-vercel-border-4: #ebebeb;
+	--color-vercel-border-5: #c9c9c9;
+	--color-vercel-border-6: #a8a8a8;
+	--color-vercel-high-contrast-1: #171717;
+	--color-vercel-high-contrast-2: #383838;
 	--color-vercel-text-secondary: #666666;
-	--color-vercel-text-primary: #000000;
+	--color-vercel-text-primary: #171717;
 }
 
 :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-gray-100: #1f1f1f;
+	--color-vercel-gray-200: #292929;
+	--color-vercel-gray-300: #2e2e2e;
+	--color-vercel-gray-400: #454545;
+	--color-vercel-gray-500: #7d7d7d;
+	--color-vercel-gray-600: #878787;
+	--color-vercel-gray-700: #8f8f8f;
+	--color-vercel-gray-800: #a1a1a1;
+	--color-vercel-gray-900: #d4d4d4;
+	--color-vercel-gray-950: #ededed;
 
 	--color-vercel-blue: #3291ff;
 	--color-vercel-blue-light: #52a8ff;
@@ -56,16 +60,16 @@
 	--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-background-1: #0a0a0a;
+	--color-vercel-background-2: #000000;
+	--color-vercel-component-1: #1a1a1a;
+	--color-vercel-component-2: #1f1f1f;
+	--color-vercel-component-3: #292929;
+	--color-vercel-border-4: #2e2e2e;
+	--color-vercel-border-5: #454545;
+	--color-vercel-border-6: #878787;
+	--color-vercel-high-contrast-1: #ededed;
 	--color-vercel-high-contrast-2: #cccccc;
-	--color-vercel-text-secondary: #888888;
-	--color-vercel-text-primary: #ffffff;
+	--color-vercel-text-secondary: #a1a1a1;
+	--color-vercel-text-primary: #ededed;
 }

package/dist/tokens/colors/vscode.css

@@ -1,31 +1,75 @@
+/**
+ * Light Modern and Dark Modern workbench colors: editor, side bar, widget, input, button, list, menu, badge, and
+ * scrollbar slider values.
+ */
 :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: #e5e5e5;
 	--color-vscode-border-strong: #808080;
 	--color-vscode-fg: #3b3b3b;
 	--color-vscode-muted-fg: #616161;
-	--color-vscode-blue: #006bb3;
+	--color-vscode-inactive-fg: #6e6e6e;
+	--color-vscode-blue: #005fb8;
+	--color-vscode-blue-hover: #0258a8;
+	--color-vscode-blue-active: #004c94;
 	--color-vscode-blue-light: #3794ff;
 	--color-vscode-green: #16825d;
 	--color-vscode-red: #d32f2f;
 	--color-vscode-orange: #a15c00;
 	--color-vscode-purple: #af00db;
+	--color-vscode-input: #ffffff;
+	--color-vscode-checkbox: #f8f8f8;
+	--color-vscode-widget: #f8f8f8;
+	--color-vscode-widget-border: #e5e5e5;
+	--color-vscode-widget-shadow: rgb(0 0 0 / 16%);
+	--color-vscode-menu: #ffffff;
+	--color-vscode-menu-border: #cecece;
+	--color-vscode-button-border: rgb(0 0 0 / 10%);
+	--color-vscode-button-secondary: #e5e5e5;
+	--color-vscode-button-secondary-hover: #cccccc;
+	--color-vscode-toolbar-hover: rgb(184 184 184 / 31%);
+	--color-vscode-list-hover: #f2f2f2;
+	--color-vscode-badge: #cccccc;
+	--color-vscode-badge-fg: #3b3b3b;
+	--color-vscode-scrollbar: rgb(100 100 100 / 40%);
+	--color-vscode-scrollbar-hover: rgb(100 100 100 / 70%);
+	--color-vscode-scrollbar-active: rgb(0 0 0 / 60%);
 }
 
 :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-border: #2b2b2b;
+	--color-vscode-border-strong: #858585;
 	--color-vscode-fg: #cccccc;
 	--color-vscode-muted-fg: #9d9d9d;
+	--color-vscode-inactive-fg: #9d9d9d;
 	--color-vscode-blue: #0078d4;
+	--color-vscode-blue-hover: #026ec1;
+	--color-vscode-blue-active: #005ba4;
 	--color-vscode-blue-light: #4daafc;
 	--color-vscode-green: #4ec9b0;
 	--color-vscode-red: #f14c4c;
 	--color-vscode-orange: #cca700;
 	--color-vscode-purple: #c586c0;
+	--color-vscode-input: #313131;
+	--color-vscode-checkbox: #313131;
+	--color-vscode-widget: #202020;
+	--color-vscode-widget-border: #313131;
+	--color-vscode-widget-shadow: rgb(0 0 0 / 36%);
+	--color-vscode-menu: #1f1f1f;
+	--color-vscode-menu-border: #454545;
+	--color-vscode-button-border: rgb(255 255 255 / 7%);
+	--color-vscode-button-secondary: #313131;
+	--color-vscode-button-secondary-hover: #3c3c3c;
+	--color-vscode-toolbar-hover: rgb(90 93 94 / 31%);
+	--color-vscode-list-hover: #2a2d2e;
+	--color-vscode-badge: #616161;
+	--color-vscode-badge-fg: #f8f8f8;
+	--color-vscode-scrollbar: rgb(121 121 121 / 40%);
+	--color-vscode-scrollbar-hover: rgb(100 100 100 / 70%);
+	--color-vscode-scrollbar-active: rgb(191 191 191 / 40%);
 }

package/dist/tokens/colors/windows95.css

@@ -7,6 +7,8 @@
 	--windows95-dark: #0a0a0a;
 	--windows95-text: #000000;
 	--windows95-muted: #404040;
+	--windows95-line: #808080;
+	--windows95-disabled: #808080;
 	--windows95-field: #ffffff;
 	--windows95-field-text: #000000;
 	--windows95-selection: #000080;
@@ -20,17 +22,20 @@
 
 /**
  * @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.
+ * button face, in the spirit of the custom color schemes Windows offered: light and highlight edges stay above the
+ * face and shadow and dark edges below it, so raised and sunken controls still read as relief instead of outlines.
  */
 :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-light: #8a8a8a;
+	--windows95-highlight: #5e5e5e;
+	--windows95-shadow: #1e1e1e;
+	--windows95-dark: #000000;
 	--windows95-text: #f0f0f0;
 	--windows95-muted: #c8c8c8;
+	--windows95-line: #8a8a8a;
+	--windows95-disabled: #7a7a7a;
 	--windows95-field: #1c1c1c;
 	--windows95-field-text: #f0f0f0;
 	--windows95-selection: #2d5aa8;

package/dist/tokens/components/cloudflare.css

@@ -15,6 +15,9 @@
 	--border-radius-3xl: 1.25rem;
 	--radius-control: var(--border-radius-lg);
 	--radius-container: var(--border-radius-xl);
+	--size-control-sm: 1.625rem;
+	--size-control-md: 2.25rem;
+	--size-control-lg: 2.5rem;
 }
 
 @layer components {
@@ -101,9 +104,12 @@
 	 * @remarks Kumo does not combine a border with a drop shadow. Floating surfaces use a 1px edge ring plus a soft drop.
 	 */
 	:root .rui-dialog__surface,
-	:root .rui-popover-host,
+	:root .rui-popover:where(:not(.rui-popover--listbox)),
 	:root .rui-hover-card__content,
 	:root .rui-select__listbox,
+	:root .rui-combobox__listbox,
+	:root .rui-menu-button__menu,
+	:root .rui-menubar__menu,
 	:root .rui-calendar {
 		@apply rounded-container border-0 bg-surface;
 		box-shadow:
@@ -111,6 +117,16 @@
 			0 4px 12px var(--color-cloudflare-shadow-drop);
 	}
 
+	:root .rui-menu-button__menu,
+	:root .rui-menubar__menu {
+		--rui-menu-item-hover: var(--color-cloudflare-tint);
+	}
+
+	:root .rui-select__listbox .rui-listbox,
+	:root .rui-combobox__listbox .rui-listbox {
+		background-color: transparent;
+	}
+
 	:root rui-tabs[variant='boxed'] {
 		@apply rounded-container border border-border bg-surface shadow-none;
 	}
@@ -132,18 +148,52 @@
 		border-bottom-color: var(--primary);
 	}
 
+	/**
+	 * @remarks Kumo highlights chosen options and active navigation with the neutral tint layer and full-strength text;
+	 * orange stays reserved for the primary action.
+	 */
 	:root .rui-listbox__option[aria-selected='true'],
+	:root .rui-listbox__option[aria-selected='true']:focus-visible,
 	:root .rui-menu-button__item[aria-checked='true'],
-	:root .rui-sidebar__menu-button--active {
-		@apply bg-primary-container text-on-primary-container;
+	:root .rui-sidebar__menu-button[aria-current='page'],
+	:root .rui-sidebar__menu-button--active,
+	:root .rui-tree__node[aria-selected='true'],
+	:root .rui-treegrid__cell[aria-selected='true'] {
+		background-color: var(--color-cloudflare-tint);
+		background-image: none;
+		color: var(--color-cloudflare-fg);
+	}
+
+	:root .rui-listbox__option[aria-selected='true'][data-active]:not([aria-disabled='true']) {
+		--tw-ring-color: var(--rui-control-border-color);
+	}
+
+	:root .rui-listbox__option[aria-selected='true'] .rui-listbox__option-indicator {
+		color: var(--color-cloudflare-fg);
+	}
+
+	:root .rui-breadcrumb__link {
+		color: var(--link);
+	}
+
+	/**
+	 * @remarks The `#cc3a00` primary reads below 4.5:1 as text on the dark canvas, so orange text in dark mode uses the
+	 * brighter orange.
+	 */
+	:root.dark .rui-heading__eyebrow,
+	:root.dark .rui-toc__link--active,
+	:root.dark .rui-calendar__today,
+	:root.dark .rui-feed__rating-stars {
+		color: var(--color-cloudflare-orange-bright);
 	}
 
 	:root .rui-alert {
 		@apply rounded-control shadow-none;
 	}
 
-	:root .rui-toast__content {
-		@apply rounded-control border border-border bg-surface text-on-surface shadow-none;
+	:root .rui-toast {
+		@apply rounded-control shadow-none;
+		background-image: none;
 	}
 
 	:root .rui-separator,