@ecopages/radiant-themes 0.2.0 → 0.2.2

package/README.md

@@ -37,40 +37,60 @@ Compact variants have their own export, for example:
 Each compact entry applies the theme's shared compact spacing composition while keeping the same theme-owned palette,
 font stacks, shape, and component treatment. The full and compact entries follow the document's `.dark` class.
 
+Treegrid surfaces follow the same file-browser treatments: VS Code is flat and compact, GitHub and macOS use quiet
+list separators, and Mac OS Classic and Windows 95 use their native-style triangle or square disclosure affordances.
+
 Radiant Default (`@ecopages/radiant-ui/themes/default`) uses three OKLCH seed colors plus density, corner radius, and
 border opacity inputs. The docs tuner shows the six values and produces copyable CSS. Those controls only apply to
 Radiant Default; branded themes keep their own values.
 
 High Contrast targets at least 7:1 contrast for published semantic text pairs in both modes and uses prominent focus
-indicators. Radiant UI's shared foundation supports reduced motion, increased contrast, visible keyboard focus, and
-Windows forced colors. Verify non-text boundaries and application content after custom overrides.
+indicators. Its control surfaces, including switch tracks and thumbs, use square corners, radios stay round with a checked
+dot, and muted text stays above 7:1. Radiant UI's shared foundation
+supports reduced motion, increased contrast, visible keyboard focus, and Windows forced colors. Verify non-text
+boundaries and application content after custom overrides.
 
 Windows 95 draws every control with the two-tone 2px bevel: gray push buttons with a black frame on the default
 action, sunken white fields, check boxes, and radio wells, raised property tabs joined to their page, navy title bars,
-and navy selection. Mac OS Classic is Mac OS 9 Platinum, built from the Mac OS 8 Human Interface Guidelines and the Appearance Manager's
+navy selection, flat menu bars with navy menu highlights, trackbars with a sunken channel and raised pointer,
+drop-down lists and combo boxes with a raised arrow button, sunken list boxes and tree views with dotted lines and
+plus/minus boxes, and pale yellow tooltips. Mac OS Classic is Mac OS 9 Platinum, built from the Mac OS 8 Human Interface Guidelines and the Appearance Manager's
 default theme: the seven system greys `#eeeeee` to `#202020`, grey push buttons with a black outline and a two-pixel
 bevel, a three-layer ring around the default button, 12px bevelled check boxes, shaded radio spheres, sunken white
 fields, trapezoid tabs that merge into a black-framed page, and 1px striped title bars. Selection and focus use the
-default `#6666cc` accent. Both
-dark modes keep the same bevel structure on darker faces and fields, since neither system shipped one. macOS uses
-moderate control corners, grouped tab segments, softer layered surfaces, and accent-blue push buttons with white text
-in dark mode. Material Design uses tonal surfaces, a purple accent family, and rounded action
-controls. These are original implementations written with Radiant semantic roles, Tailwind `@apply`, and catalog
+default `#6666cc` accent. Menus and the menu bar highlight items in that accent, list views are black-framed white
+wells with bevelled column headers, tooltips are outlined help balloons, and disclosures use the Platinum triangle. Both
+dark modes keep the same bevel structure on darker faces and fields, since neither system shipped one. macOS follows Sonoma AppKit:
+the SF Pro system font at 13px, 6px push buttons outlined by a hairline shadow, accent-filled default buttons, check
+boxes, and radio buttons, pop-up buttons with an accent arrow well, segmented tabs centered above a group box, white
+slider knobs, translucent menus and popovers, and accent row selection with white text. Destructive buttons use red
+text, as AppKit alerts do. Windows 95 also provides a full-size dithered scrollbar with raised arrow buttons and a bevelled thumb;
+Mac OS Classic provides Platinum's grey bevelled track, end-positioned arrow buttons, and striped blue scroll box.
+Chrome and Safari receive the detailed WebKit scrollbar treatment; Firefox receives the standard `scrollbar-width` and
+`scrollbar-color` fallback, whose native API does not expose classic arrow buttons, bevels, or stripe images.
+Material Design uses the Material 3 baseline scheme: full-radius
+buttons, 4px outlined fields and menus, 8px chips, 28px dialogs, tonal surface-container overlays, inverse-surface
+tooltips and toasts, and a 3px secondary focus indicator. These are original implementations written with Radiant semantic roles, Tailwind `@apply`, and catalog
 selectors; they do not copy third-party CSS.
 
 The Cloudflare theme leads with Cloudflare orange on restrained neutral layers inspired by Cloudflare Kumo. Its
-semantic primary role uses deeper orange `#cc3a00` in light mode and brighter orange `#ff5e1e` in dark mode. Filled
-primary buttons use the contrast-safe `#cc3a00` with white text in both modes. Links and focus stay blue, and warnings
-use a yellow amber that stays distinct from the primary.
-GitHub maps Primer's functional roles: green marks the primary action, blue is for links and focus, the selected tab
-uses Primer's coral underline, and neutral surfaces are used for secondary actions.
+semantic primary role uses the same contrast-safe orange `#cc3a00` in both modes. Filled primary buttons use that
+orange with white text in both modes. Links and focus stay blue, and warnings use a yellow amber that stays distinct
+from the primary. Chosen options, menu items, and active navigation use Kumo's neutral grey, so they no longer use orange;
+breadcrumb links are blue, dark mode uses a brighter orange for orange text, and controls are 26, 36, and 40px tall.
+GitHub maps Primer's functional roles: green is limited to the primary button, the meter, and success states, blue marks links, focus, and
+selected, checked, or current states, the selected tab uses Primer's coral underline, and secondary actions use
+Primer's grey default button.
 
 The Vercel theme uses Background 2 for the light canvas and Background 1 for primary surfaces. Its component colors
 drive hover and active fills, Colors 4–6 drive default, hover, and active borders, and blue stays focused on links and
-keyboard focus. Control boundaries are strengthened for visibility. VS Code maps editor surfaces and accent states,
-with Dark Modern's `#0078d4` fill for dark-mode filled buttons. Button treatments vary by theme: Cloudflare uses a
-contrast-safe orange primary fill, while Cloudflare, GitHub, and Vercel use saturated fills with white text for
-dark-mode destructive buttons. Other variants follow each theme's semantic roles. These palettes adapt product cues to
+keyboard focus. Control boundaries are strengthened for visibility. VS Code follows Light Modern and Dark Modern: 26px
+controls with 2px corners, filled buttons in `#005fb8` (light) or `#0078d4` (dark) with white text, grey secondary
+buttons for the outline variant, a 1px blue focus outline, blue menu highlights, editor-style boxed tabs with a blue top
+border, and see-through square scrollbars. Button treatments vary by theme: Cloudflare uses a
+contrast-safe orange primary fill, Cloudflare and Vercel use saturated fills with white text for dark-mode
+destructive buttons, and GitHub uses Primer's danger button: red text on the default button face, filling red on
+hover. Other variants follow each theme's semantic roles. These palettes adapt product cues to
 Radiant UI roles without reproducing the products pixel for pixel.
 
 ## Design references

package/dist/compiled/themes/cloudflare/compact.css

@@ -27,8 +27,6 @@
   --font-weight-medium: var(--weight-medium);
   --opacity-disabled: var(--opacity-disabled);
   --opacity-muted: var(--opacity-muted);
-  --color-primary-container: var(--primary-container);
-  --color-on-primary-container: var(--on-primary-container);
   --color-secondary: var(--secondary);
   --color-on-secondary: var(--on-secondary);
   --color-surface: var(--surface);
@@ -248,6 +246,14 @@
   --radius-container: var(--border-radius-lg);
   --radius-pill: var(--border-radius-full);
 }
+@layer components {
+  :root .rui-input-group .rui-input {
+    border-width: 0;
+    border-radius: 0;
+    background-color: transparent;
+    box-shadow: none;
+  }
+}
 :where(:root) {
   color-scheme: light;
 }
@@ -296,7 +302,7 @@
   --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: #cc3a00;
   --color-cloudflare-orange-bright: #ff8a5c;
   --color-cloudflare-orange-deep: #cc3a00;
   --color-cloudflare-orange-fill: #cc3a00;
@@ -524,7 +530,7 @@
   }
   --gray-950: var(--color-cloudflare-canvas);
   --primary: var(--color-cloudflare-orange);
-  --on-primary: #1a1a1a;
+  --on-primary: white;
   --primary-light: var(--color-cloudflare-orange-bright);
   --primary-dark: var(--color-cloudflare-orange-deep);
   --primary-container: oklch(30% 0.07 55);
@@ -595,6 +601,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 {
   :root .rui-button--filled {
@@ -654,6 +663,12 @@
   :root .rui-button--outline,
 	:root .rui-input,
 	:root .rui-textarea,
+	:root .rui-combobox__control,
+	:root .rui-date-field__group,
+	:root .rui-date-range-picker__group,
+	:root .rui-input-group,
+	:root .rui-number-field__group,
+	:root rui-date-input:where(:not([data-date-field-input], [data-range-start], [data-range-end])),
 	:root .rui-select__control {
     border-color: var(--color-border);
     background-color: var(--color-surface);
@@ -669,9 +684,12 @@
     border-color: var(--rui-control-border-color);
   }
   :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 {
     border-radius: var(--radius-container);
     border-style: var(--tw-border-style);
@@ -680,6 +698,14 @@
     box-shadow: 0 0 0 1px var(--color-cloudflare-shadow-edge),
 			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'] {
     border-radius: var(--radius-container);
     border-style: var(--tw-border-style);
@@ -708,25 +734,41 @@
     border-bottom-color: var(--primary);
   }
   :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 {
-    background-color: var(--color-primary-container);
-    color: var(--color-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);
+  }
+  :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 {
     border-radius: var(--radius-control);
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  :root .rui-toast__content {
+  :root .rui-toast {
     border-radius: var(--radius-control);
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-border);
-    background-color: var(--color-surface);
-    color: var(--color-on-surface);
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    background-image: none;
   }
   :root .rui-separator,
 	:root .rui-sidebar__separator {

package/dist/compiled/themes/cloudflare.css

@@ -27,8 +27,6 @@
   --font-weight-medium: var(--weight-medium);
   --opacity-disabled: var(--opacity-disabled);
   --opacity-muted: var(--opacity-muted);
-  --color-primary-container: var(--primary-container);
-  --color-on-primary-container: var(--on-primary-container);
   --color-secondary: var(--secondary);
   --color-on-secondary: var(--on-secondary);
   --color-surface: var(--surface);
@@ -248,6 +246,14 @@
   --radius-container: var(--border-radius-lg);
   --radius-pill: var(--border-radius-full);
 }
+@layer components {
+  :root .rui-input-group .rui-input {
+    border-width: 0;
+    border-radius: 0;
+    background-color: transparent;
+    box-shadow: none;
+  }
+}
 :where(:root) {
   color-scheme: light;
 }
@@ -296,7 +302,7 @@
   --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: #cc3a00;
   --color-cloudflare-orange-bright: #ff8a5c;
   --color-cloudflare-orange-deep: #cc3a00;
   --color-cloudflare-orange-fill: #cc3a00;
@@ -524,7 +530,7 @@
   }
   --gray-950: var(--color-cloudflare-canvas);
   --primary: var(--color-cloudflare-orange);
-  --on-primary: #1a1a1a;
+  --on-primary: white;
   --primary-light: var(--color-cloudflare-orange-bright);
   --primary-dark: var(--color-cloudflare-orange-deep);
   --primary-container: oklch(30% 0.07 55);
@@ -595,6 +601,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 {
   :root .rui-button--filled {
@@ -654,6 +663,12 @@
   :root .rui-button--outline,
 	:root .rui-input,
 	:root .rui-textarea,
+	:root .rui-combobox__control,
+	:root .rui-date-field__group,
+	:root .rui-date-range-picker__group,
+	:root .rui-input-group,
+	:root .rui-number-field__group,
+	:root rui-date-input:where(:not([data-date-field-input], [data-range-start], [data-range-end])),
 	:root .rui-select__control {
     border-color: var(--color-border);
     background-color: var(--color-surface);
@@ -669,9 +684,12 @@
     border-color: var(--rui-control-border-color);
   }
   :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 {
     border-radius: var(--radius-container);
     border-style: var(--tw-border-style);
@@ -680,6 +698,14 @@
     box-shadow: 0 0 0 1px var(--color-cloudflare-shadow-edge),
 			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'] {
     border-radius: var(--radius-container);
     border-style: var(--tw-border-style);
@@ -708,25 +734,41 @@
     border-bottom-color: var(--primary);
   }
   :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 {
-    background-color: var(--color-primary-container);
-    color: var(--color-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);
+  }
+  :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 {
     border-radius: var(--radius-control);
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  :root .rui-toast__content {
+  :root .rui-toast {
     border-radius: var(--radius-control);
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-border);
-    background-color: var(--color-surface);
-    color: var(--color-on-surface);
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    background-image: none;
   }
   :root .rui-separator,
 	:root .rui-sidebar__separator {