@ecopages/radiant-themes 0.3.2 → 0.3.4

package/dist/foundation.css

@@ -1,6 +1,6 @@
 @import '@ecopages/radiant-ui/tokens/foundation';
-@import '@ecopages/radiant-ui/tokens/spacing/default';
-@import '@ecopages/radiant-ui/tokens/radius/default';
+@import '@ecopages/radiant-ui/tokens/spacing/comfortable';
+@import '@ecopages/radiant-ui/tokens/radius/soft';
 
 /**
  * @remarks The input inside an input group sits on the group's fill and frame, so no theme's field styling may give it

package/dist/themes/zed/compact.css

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

package/dist/themes/zed.css

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

package/dist/tokens/colors/github.css

@@ -2,7 +2,8 @@
  * Primer functional colors: `bgColor`, `fgColor`, `borderColor`, the accent family for selection and focus, and the
  * primary and default button fills.
  */
-:where(:root), :root[data-rui-theme='github'] {
+:where(:root),
+:root[data-rui-theme='github'] {
 	--color-github-white: #ffffff;
 	--color-github-canvas: #ffffff;
 	--color-github-subtle: #f6f8fa;
@@ -33,7 +34,8 @@
 	--color-github-knob-border: #818b98;
 }
 
-:where(.dark), :root.dark[data-rui-theme='github'] {
+:where(.dark),
+:root.dark[data-rui-theme='github'] {
 	--color-github-white: #f0f6fc;
 	--color-github-canvas: #0d1117;
 	--color-github-subtle: #151b23;

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

@@ -1,4 +1,5 @@
-:where(:root), :root[data-rui-theme='high-contrast'] {
+:where(:root),
+:root[data-rui-theme='high-contrast'] {
 	--contrast-canvas: #ffffff;
 	--contrast-surface: #ffffff;
 	--contrast-container: #f2f2f2;
@@ -19,7 +20,8 @@
 	--contrast-focus: #0000a8;
 }
 
-:where(.dark), :root.dark[data-rui-theme='high-contrast'] {
+:where(.dark),
+:root.dark[data-rui-theme='high-contrast'] {
 	--contrast-canvas: #000000;
 	--contrast-surface: #000000;
 	--contrast-container: #1a1a1a;

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

@@ -3,7 +3,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'] {
+:where(:root),
+:root[data-rui-theme='macos-classic'] {
 	--macos-classic-canvas: #dddddd;
 	--macos-classic-surface: #dddddd;
 	--macos-classic-container: #cccccc;
@@ -32,7 +33,8 @@
  * @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'] {
+:where(.dark),
+:root.dark[data-rui-theme='macos-classic'] {
 	--macos-classic-canvas: #262626;
 	--macos-classic-surface: #2e2e2e;
 	--macos-classic-container: #3a3a3a;

package/dist/tokens/colors/macos.css

@@ -6,7 +6,8 @@
  * @remarks AppKit's translucent label colors are flattened onto their usual backgrounds. Status hues use Apple's
  * increased-contrast variants (`#d70015`, `#248a3d`, `#b25000`) where the standard hue cannot carry text at 4.5:1.
  */
-:where(:root), :root[data-rui-theme='macos'] {
+:where(:root),
+:root[data-rui-theme='macos'] {
 	--macos-canvas: #ececec;
 	--macos-surface: #ffffff;
 	--macos-subtle: #e3e3e3;
@@ -34,10 +35,12 @@
 	--macos-purple: #8944ab;
 	--macos-control-shadow:
 		0 0 0 0.5px rgb(0 0 0 / 0.16), 0 0.5px 1px rgb(0 0 0 / 0.22), 0 1px 1.5px -0.5px rgb(0 0 0 / 0.1);
-	--macos-menu-shadow: 0 0 0 0.5px var(--macos-elevated-edge), 0 10px 30px rgb(0 0 0 / 0.2), 0 2px 6px rgb(0 0 0 / 0.1);
+	--macos-menu-shadow:
+		0 0 0 0.5px var(--macos-elevated-edge), 0 10px 30px rgb(0 0 0 / 0.2), 0 2px 6px rgb(0 0 0 / 0.1);
 }
 
-:where(.dark), :root.dark[data-rui-theme='macos'] {
+:where(.dark),
+:root.dark[data-rui-theme='macos'] {
 	--macos-canvas: #323232;
 	--macos-surface: #1e1e1e;
 	--macos-subtle: #3d3d3d;

package/dist/tokens/colors/material.css

@@ -1,7 +1,8 @@
 /**
  * Material 3 baseline scheme (source color #6750a4), light and dark.
  */
-:where(:root), :root[data-rui-theme='material'] {
+:where(:root),
+:root[data-rui-theme='material'] {
 	--material-primary: #6750a4;
 	--material-on-primary: #ffffff;
 	--material-primary-container: #eaddff;
@@ -33,7 +34,8 @@
 	--material-outline-variant: #cac4d0;
 }
 
-:where(.dark), :root.dark[data-rui-theme='material'] {
+:where(.dark),
+:root.dark[data-rui-theme='material'] {
 	--material-primary: #d0bcff;
 	--material-on-primary: #381e72;
 	--material-primary-container: #4f378b;

package/dist/tokens/colors/vercel.css

@@ -2,7 +2,8 @@
  * 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'] {
+:where(:root),
+:root[data-rui-theme='vercel'] {
 	--color-vercel-gray-50: #fafafa;
 	--color-vercel-gray-100: #f2f2f2;
 	--color-vercel-gray-200: #ebebeb;
@@ -38,7 +39,8 @@
 	--color-vercel-text-primary: #171717;
 }
 
-:where(.dark), :root.dark[data-rui-theme='vercel'] {
+:where(.dark),
+:root.dark[data-rui-theme='vercel'] {
 	--color-vercel-gray-50: #1a1a1a;
 	--color-vercel-gray-100: #1f1f1f;
 	--color-vercel-gray-200: #292929;

package/dist/tokens/colors/vscode.css

@@ -2,7 +2,8 @@
  * 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'] {
+:where(:root),
+:root[data-rui-theme='vscode'] {
 	--color-vscode-canvas: #ffffff;
 	--color-vscode-subtle: #f8f8f8;
 	--color-vscode-muted: #ececec;
@@ -38,7 +39,8 @@
 	--color-vscode-scrollbar-active: rgb(0 0 0 / 60%);
 }
 
-:where(.dark), :root.dark[data-rui-theme='vscode'] {
+:where(.dark),
+:root.dark[data-rui-theme='vscode'] {
 	--color-vscode-canvas: #1f1f1f;
 	--color-vscode-subtle: #181818;
 	--color-vscode-muted: #2b2b2b;

package/dist/tokens/colors/windows95.css

@@ -1,4 +1,5 @@
-:where(:root), :root[data-rui-theme='windows95'] {
+:where(:root),
+:root[data-rui-theme='windows95'] {
 	--windows95-canvas: #c0c0c0;
 	--windows95-face: #c0c0c0;
 	--windows95-light: #ffffff;
@@ -25,7 +26,8 @@
  * 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'] {
+:where(.dark),
+:root.dark[data-rui-theme='windows95'] {
 	--windows95-canvas: #2b2b2b;
 	--windows95-face: #3a3a3a;
 	--windows95-light: #8a8a8a;

package/dist/tokens/colors/zed.css

@@ -0,0 +1,54 @@
+/**
+ * Zed One Light and One Dark: editor background, panel and elevated surfaces, borders, text, and the syntax-derived
+ * accents. The accent blue is used as a tint, so `--color-zed-accent-solid` is a deeper blue that carries white text on
+ * filled buttons and `--color-zed-accent` is the editor blue used for focus, links and selection fills.
+ */
+:where(:root),
+:root[data-rui-theme='zed'] {
+	--color-zed-background: #fafafa;
+	--color-zed-panel: #ebebec;
+	--color-zed-elevated: #dcdcdd;
+	--color-zed-border: #c9c9ca;
+	--color-zed-border-subtle: #dcdcdd;
+	--color-zed-border-strong: #8a8a90;
+	--color-zed-text: #383a41;
+	--color-zed-text-muted: #5d5f68;
+
+	--color-zed-accent: #5c78e2;
+	--color-zed-accent-solid: #4a62cf;
+	--color-zed-accent-hover: #3f56bd;
+	--color-zed-accent-text: #3b55c4;
+	--color-zed-green: #669f59;
+	--color-zed-red: #d36151;
+	--color-zed-amber: #dec184;
+	--color-zed-purple: #a449ab;
+	--color-zed-teal: #3882b7;
+
+	--color-zed-hover: color-mix(in srgb, var(--color-zed-accent) 10%, transparent);
+	--color-zed-selected: color-mix(in srgb, var(--color-zed-accent) 15%, transparent);
+}
+
+:where(.dark),
+:root.dark[data-rui-theme='zed'] {
+	--color-zed-background: #282c33;
+	--color-zed-panel: #2f343e;
+	--color-zed-elevated: #363c46;
+	--color-zed-border: #464b57;
+	--color-zed-border-subtle: #363c46;
+	--color-zed-border-strong: #7d8392;
+	--color-zed-text: #dce0e5;
+	--color-zed-text-muted: #a9afbc;
+
+	--color-zed-accent: #74ade8;
+	--color-zed-accent-solid: #74ade8;
+	--color-zed-accent-hover: #8bbcee;
+	--color-zed-accent-text: #74ade8;
+	--color-zed-green: #a1c181;
+	--color-zed-red: #d07277;
+	--color-zed-amber: #dfc184;
+	--color-zed-purple: #b477cf;
+	--color-zed-teal: #6eb4bf;
+
+	--color-zed-hover: color-mix(in srgb, var(--color-zed-accent) 10%, transparent);
+	--color-zed-selected: color-mix(in srgb, var(--color-zed-accent) 15%, transparent);
+}

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

@@ -2,6 +2,7 @@
 
 :root,
 :root[data-rui-theme='high-contrast'] {
+	--rui-knob-linecap: butt;
 	--font-sans: ui-sans-serif, system-ui, sans-serif;
 	--font-heading: var(--font-sans);
 	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

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

@@ -7,6 +7,18 @@
  */
 :root,
 :root[data-rui-theme='macos-classic'] {
+	--rui-knob-linecap: butt;
+	--press-shift: 0px;
+	--popup-enter-duration: 0ms;
+	--popup-exit-duration: 0ms;
+	--popup-scale-from: 1;
+	--popup-shift: 0px;
+	--tooltip-duration: 0ms;
+	--hover-card-enter-duration: 0ms;
+	--dialog-enter-duration: 0ms;
+	--dialog-exit-duration: 0ms;
+	--backdrop-duration: 0ms;
+	--check-duration: 0ms;
 	--font-sans: Charcoal, Geneva, 'Lucida Grande', 'Helvetica Neue', Arial, sans-serif;
 	--font-heading: Charcoal, Geneva, 'Lucida Grande', 'Helvetica Neue', Arial, sans-serif;
 	--font-mono: Monaco, Menlo, 'Courier New', monospace;
@@ -379,7 +391,8 @@
 		--rui-popover-radius: 0;
 		--rui-popover-surface: var(--macos-classic-surface);
 		--rui-popover-border-color: var(--macos-classic-dark);
-		--rui-popover-shadow: var(--macos-classic-bevel), 1px 1px 0 var(--macos-classic-dark), 3px 3px 0 rgb(0 0 0 / 0.25);
+		--rui-popover-shadow:
+			var(--macos-classic-bevel), 1px 1px 0 var(--macos-classic-dark), 3px 3px 0 rgb(0 0 0 / 0.25);
 	}
 
 	:root .rui-dialog__surface,

package/dist/tokens/components/macos.css

@@ -10,6 +10,7 @@
  */
 :root,
 :root[data-rui-theme='macos'] {
+	--press-shift: 0px;
 	--font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
 	--font-heading: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
 	--font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, monospace;

package/dist/tokens/components/material.css

@@ -409,5 +409,4 @@
 		border-color: var(--material-outline-variant);
 		background-color: var(--surface);
 	}
-
 }

package/dist/tokens/components/vercel.css

@@ -1,6 +1,7 @@
 @reference 'tailwindcss';
 
-:where(:root), :root[data-rui-theme='vercel'] {
+:where(:root),
+:root[data-rui-theme='vercel'] {
 	--font-sans: Geist, 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
 	--font-heading: Geist, 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
 	--font-mono: 'Geist Mono', 'GeistMono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
@@ -16,6 +17,22 @@
 	--radius-container: var(--border-radius-xl);
 }
 
+/**
+ * @remarks Geist's marketing scale is airy; the app chrome is one step smaller. Controls are 28/32/40px with 13px text
+ * and 10px inline padding. Unlike the font and radius tokens above these use `:root`, so they win over the spacing pack
+ * and the shared type scale even when the theme is loaded without `data-rui-theme`.
+ */
+:root {
+	--size-control-sm: 1.75rem;
+	--size-control-md: 2rem;
+	--size-control-lg: 2.5rem;
+	--text-control: 0.8125rem;
+	--space-control-x: 0.625rem;
+	--space-control-y: 0.375rem;
+	--space-stack: 0.875rem;
+	--space-inset: 0.875rem;
+}
+
 @layer components {
 	/**
 	 * @remarks Geist fills dark destructive buttons with a saturated red and white text; `--error` stays the lighter
@@ -118,18 +135,18 @@
 
 	:root .rui-tooltip__content {
 		--rui-tooltip-radius: var(--radius-control);
-		--rui-tooltip-padding-x: 0.75rem;
-		--rui-tooltip-padding-y: 0.375rem;
+		--rui-tooltip-padding-x: 0.625rem;
+		--rui-tooltip-padding-y: 0.25rem;
 	}
 
 	/**
-	 * Geist menus: a 12px floating panel with 8px padding and 6px rounded rows.
+	 * Geist menus: a 12px floating panel with 6px padding and 6px rounded rows.
 	 */
 	:root .rui-menu-button__menu,
 	:root .rui-menubar__menu,
 	:root .rui-select__listbox,
 	:root .rui-combobox__listbox {
-		@apply rounded-container border border-border p-2;
+		@apply rounded-container border border-border p-1.5;
 		background-color: var(--color-vercel-background-1);
 		box-shadow:
 			0 4px 8px -4px rgb(0 0 0 / 0.04),
@@ -148,7 +165,7 @@
 	}
 
 	:root rui-tabs[variant='boxed'] .rui-tabs__list {
-		@apply border-b border-border bg-transparent px-2 pt-2;
+		@apply border-b border-border bg-transparent px-1.5 pt-1.5;
 		gap: 0;
 	}
 
@@ -211,4 +228,4 @@
 	:root .rui-sidebar__separator {
 		@apply bg-border;
 	}
-}
+}

package/dist/tokens/components/vscode.css

@@ -6,8 +6,11 @@
  */
 :root,
 :root[data-rui-theme='vscode'] {
-	--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif;
-	--font-heading: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif;
+	--rui-knob-linecap: butt;
+	--font-sans:
+		-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif;
+	--font-heading:
+		-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif;
 	--font-mono: Menlo, Monaco, Consolas, 'Droid Sans Mono', 'Courier New', monospace;
 	--rui-border-alpha: 100%;
 	--border-radius-xs: 0.125rem;

package/dist/tokens/components/windows95.css

@@ -6,6 +6,18 @@
  */
 :root,
 :root[data-rui-theme='windows95'] {
+	--rui-knob-linecap: butt;
+	--press-shift: 0px;
+	--popup-enter-duration: 0ms;
+	--popup-exit-duration: 0ms;
+	--popup-scale-from: 1;
+	--popup-shift: 0px;
+	--tooltip-duration: 0ms;
+	--hover-card-enter-duration: 0ms;
+	--dialog-enter-duration: 0ms;
+	--dialog-exit-duration: 0ms;
+	--backdrop-duration: 0ms;
+	--check-duration: 0ms;
 	--font-sans: Tahoma, 'MS Sans Serif', Arial, sans-serif;
 	--font-heading: Tahoma, 'MS Sans Serif', Arial, sans-serif;
 	--font-mono: 'Lucida Console', Consolas, Menlo, Monaco, 'Courier New', monospace;
@@ -710,7 +722,10 @@
 		border: 1px solid var(--windows95-line);
 		background-color: var(--windows95-field);
 		color: var(--windows95-field-text);
-		font: 9px/7px 'MS Sans Serif', Tahoma, sans-serif;
+		font:
+			9px/7px 'MS Sans Serif',
+			Tahoma,
+			sans-serif;
 		text-align: center;
 		transform: none;
 		transition: none;