@sylwellsoftware/fray 0.5.0 → 0.7.0

package/README.md

@@ -85,7 +85,8 @@ Responsibility stays at the narrowest layer that understands it:
 | Domain state, service implementations/providers, endpoint configuration, page composition, theme availability and selection policy | Application |
 | DOM structure, native events, accessibility, component lifetime, service-scope propagation, visual async states | Fray components/runtime |
 | Mutable/computed values, query timing/results, fetch state, optional causality | Glue |
-| URL/wire serialization and retrieval mechanism | Injected Glue query handler/application adapter |
+| Remote wire serialization and retrieval mechanism | Injected Glue query handler/application adapter |
+| Browser navigation placement, restoration, and routed component integration | Caller-owned Fray router with an injected navigation adapter |
 | Layout/flow CSS and stable component/part hooks | Fray structural styling |
 | Look-and-feel treatment and palette | Separately loaded Fray-compatible theme/color CSS |
 
@@ -214,6 +215,164 @@ query state comes from caller-owned endpoint results. Function components stay
 presentation-oriented and receive rendered values or emitters from a nearby
 lifecycle-owning class component.
 
+## Hierarchical browser routing
+
+Routing is optional and application-scoped. Route descriptors name immutable
+relative segments; the mounted component hierarchy supplies their parentage.
+This lets a `TabPanel` discover immediate routes from ordinary `Tab`
+annotations without requiring a duplicate central route tree:
+
+```tsx
+import {Emitter} from '@sylwellsoftware/glue'
+import {
+    Component,
+    RouteLink,
+    RouteQuery,
+    RouteUnavailableError,
+    RouteValue,
+    Tab,
+    TabPanel,
+    createBrowserRouter,
+    createHashNavigation,
+    createFrayRuntime,
+    defineRoute,
+    defineRouteParameter,
+    routeTarget,
+    stringRouteCodec,
+    waitForRouteValue,
+} from '@sylwellsoftware/fray'
+
+const routes = {
+    changes: defineRoute('changes'),
+    security: defineRoute('security'),
+    overview: defineRoute('security-overview', 'overview'),
+    projects: defineRoute('security-projects', 'projects'),
+}
+const activeApplication = new Emitter('changes')
+const activeSecurityView = new Emitter('overview')
+
+class SecurityApplication extends Component {
+    render() {
+        return <TabPanel valueEmitter={activeSecurityView} label="Security views">
+            <Tab id="overview" label="Overview" route={routes.overview}>Summary</Tab>
+            <Tab id="projects" label="Projects" route={routes.projects}>Projects</Tab>
+        </TabPanel>
+    }
+
+    static dependencies = [Tab, TabPanel]
+}
+
+class App extends Component {
+    render() {
+        return <>
+            <nav aria-label="Applications">
+                <RouteLink to={routeTarget(routes.security, routes.projects)}>
+                    Security projects
+                </RouteLink>
+            </nav>
+            <TabPanel valueEmitter={activeApplication} label="Applications">
+                <Tab id="changes" label="Changes" route={routes.changes}>Changes</Tab>
+                <Tab id="security" label="Security" route={routes.security}>
+                    <SecurityApplication />
+                </Tab>
+            </TabPanel>
+        </>
+    }
+
+    static dependencies = [RouteLink, SecurityApplication, Tab, TabPanel]
+}
+
+const router = createBrowserRouter({adapter: createHashNavigation(window)})
+const runtime = createFrayRuntime({router})
+const app = runtime.mount(runtime.create(App), document.querySelector('#app')!)
+
+addEventListener('pagehide', () => {
+    app.destroy()
+    router.dispose()
+}, {once: true})
+```
+
+The runtime opens the root scope. A selected routed tab opens its own scope for
+nested components, so `/security/projects` restores the outer tab first and
+then discovers and restores the inner tab. Every scope declares when its
+immediate registrations are complete; this distinguishes an unknown child
+from one whose parent has not mounted yet. Duplicate IDs or literal paths and
+multiple parameter routes in one scope fail at completion. Literal routes take
+precedence over the optional parameter route.
+
+`RouteLink` is a native anchor. A descriptor resolves against the current
+lineage, which is convenient for sibling destinations. A link outside the
+destination's mounted lineage uses `routeTarget(...)` with the full chain from
+the root. Modified clicks, downloads, and non-`_self` targets retain native
+browser behavior. `router.navigate(target)` pushes by default;
+`router.redirect(target)` and `navigate(target, {history: 'replace'})` replace.
+`router.href(target)`, `router.resolve(descriptor, context)`, and
+`router.isActive(target, exact)` support advanced composition.
+
+Dynamic path values use a typed codec and an application-owned nullable
+emitter:
+
+```tsx
+const projectRoute = defineRouteParameter('project', stringRouteCodec, 'project-id')
+const selectedProjectId = new Emitter<string | null>(null)
+
+<RouteValue
+    route={projectRoute}
+    valueEmitter={selectedProjectId}
+    resolve={async (projectId, _context, signal) => {
+        const projects = await waitForRouteValue(
+            projectResults,
+            (items) => items.length > 0,
+            signal,
+        )
+        if (!projects.some(({id}) => id === projectId)) {
+            throw new RouteUnavailableError(`Unknown project "${projectId}"`)
+        }
+        return projectId
+    }}
+>
+    <ProjectView />
+</RouteValue>
+```
+
+Resolvers run in path order, may normalize the decoded value, and receive the
+settled ancestor values plus an `AbortSignal`. A newer navigation or router
+disposal aborts outstanding work. `waitForRouteValue` is a convenience for a
+Glue readable; fetching, authorization, retries, and domain validation remain
+application-owned. Set `scopeChildren` on `RouteValue` only when further route
+levels live beneath the dynamic value. Leaving it off avoids remounting an
+otherwise stable leaf view when selection changes.
+
+Explicit query bindings make selected shareable view state routable without
+coupling the originating control to the router:
+
+```tsx
+<RouteQuery
+    name="range"
+    valueEmitter={historyRange}
+    codec={historyRangeCodec}
+    defaultValue="12m"
+>
+    <HistoryView />
+</RouteQuery>
+```
+
+Defaults are omitted, owned names sort deterministically, foreign query keys
+are preserved, and passive emitter changes replace the current URL. Invalid
+owned values reset to the default and produce a structured `router.issue`.
+Path failures similarly fall back to the deepest resolved parent and replace
+the failed entry. Applications observe `router.transition` for pending/idle
+state and render `router.issue` as localized, accessible feedback. An explicit
+navigation clears the issue.
+
+Choose `createHashNavigation(window)` for static hosting; it reserves the URL
+fragment. Choose `createHistoryNavigation(window, {basePath: '/app/'})` for
+ordinary paths; the deployment must serve the application entry point for
+direct requests below that base. `MemoryNavigationAdapter` supplies
+deterministic tests and does not imply server rendering. The application owns
+and disposes the router; destroying a runtime root removes mounted route
+registrations but does not dispose the caller-owned router.
+
 ## Component host elements
 
 Fray components with a wrapper render a standards-valid custom host element,
@@ -221,7 +380,7 @@ not a framework identity class. The default application runtime therefore
 produces DOM such as:
 
 ```html
-<fray-panel data-fray-component="panel">
+<fray-panel class="panellike" data-fray-component="panel">
     <fray-textbox data-fray-component="textbox">
         <input type="text">
     </fray-textbox>
@@ -233,8 +392,10 @@ Native semantics remain native: `Button` renders `button`, `Toggle` renders
 `fieldset`, `Sidebar` renders `aside`, and table header components render
 `thead`/`th`. `Tab` is a declarative child consumed by `TabPanel` and has no
 independent root. The
-`data-fray-component` attribute keeps diagnostics unambiguous without taking
-ownership of the consumer's `class`/`className`.
+`data-fray-component` keeps diagnostics unambiguous. It is not a structural or
+theme selector. Fray may merge public presentation traits such as `panellike`
+with an application-supplied `class`/`className`; those traits describe a
+reusable capability, not component identity.
 
 Element naming is an immutable application-runtime setting:
 
@@ -538,6 +699,8 @@ sibling-local `key` through the common component props.
 | `Toolbar` | `label`, `orientation`, `id`, `children` | None | Stateless named toolbar; orientation is horizontal or vertical. |
 | `Textbox` | `label` or `ariaLabel`, value props, `disabled`, `required`, `readOnly`, `error`, native text constraints, `inputRef` | `onInput(value, event)`, `onChange(value, event)` | String `valueEmitter`; external emitter changes patch the native input without replacing it. |
 | `Dropdown<T>` | `options`, `label` or `ariaLabel`, value props, `disabled`, `required`, `error`, `placeholder`, `name` | `onChange(value, event)` | Typed string/number `valueEmitter`; `options` may be an array or readable emitter. |
+| `RadioButton` | `label`, `name`, `value`, `checked`, `disabled`, `required` | `onChange(checked, event)` | Native radio input with a label; use a shared `name` to associate standalone buttons. |
+| `RadioGroup<T>` | `options`, `label` or `ariaLabel`, value props, `name`, `disabled`, `required` | `onChange(value, event)` | Native radio inputs with one selected `valueEmitter` option. |
 | `Toggle<T>` | `options`, `label` or `ariaLabel`, value props, `disabled`, `required` | `onChange(value, event)` | One selected value; arrow keys, Home, and End move and select within the radio group. |
 | `Checkbox<T>` | `symbols`, `label`, value props, `disabled`, `required`, `name` | `onChange(value, event)` | Two-state semantic value by default; click/Space advances and arrow keys move in either direction. |
 | `TriCheckbox` | Checkbox props except `symbols` | `onChange(value, event)` | Cycles deny → neutral → prefer using `FilterMode`. |
@@ -549,9 +712,9 @@ sibling-local `key` through the common component props.
 | `ProgressBar` | `label`, `value` or `valueEmitter`, `max`, `valueText` | None | Labelled native progress; a null value is indeterminate. |
 | `ThemePicker` | `label` or `ariaLabel`, theme `options`, value props, `targetDocument`, `disabled` | `onChange(value, option, event)` | String `valueEmitter`; replaces only the theme stylesheet link. |
 | `ColorPicker` | `label` or `ariaLabel`, color `options`, value props, `targetDocument`, `disabled` | `onChange(value, option, event)` | String `valueEmitter`; replaces only the color stylesheet link. |
-| `Tab` | `id`, `label`, `disabled`, `children` | None | Declarative content marker consumed by `TabPanel`; not rendered as a tab by itself. |
+| `Tab` | `id`, `label`, `disabled`, optional literal `route`, `children` | None | Declarative content marker consumed by `TabPanel`; a route annotation binds tab activation to the current route scope. |
 | `TabLine` | `tabs`, `label`, `baseId`, value props | `onChange(id, event)` | Active-tab `valueEmitter`; arrow keys skip disabled tabs, with Home/End support. |
-| `TabPanel` | `tabs` or `Tab` children, `label`, `id`, value props | `onChange(id, event)` | Owns or consumes the active-tab emitter and wires the selected tab to its tabpanel. |
+| `TabPanel` | `tabs` or `Tab` children, `label`, `id`, value props | `onChange(id, event)` | Owns or consumes the active-tab emitter, wires the selected tabpanel, and contextually registers annotated tabs when a router is present. |
 
 Invalid option arrays, duplicate tab IDs, unsupported orientations, malformed
 emitters, and non-function callbacks fail with descriptive errors.
@@ -680,7 +843,7 @@ Fray's styling system has three physically and conceptually separate layers:
 | --- | --- | --- | --- |
 | Structure | `styles/structural.css` | Generated component layout, flow, sizing, positioning, accessibility mechanics, stable hooks, and variable consumption | Loaded once; remains stable during presentation changes |
 | Theme | `themes/<name>/theme.css` | Typography, spacing, geometry, depth, surface treatment, semantic family mappings, and exceptional pseudo/native rendering | Loaded separately and independently replaceable |
-| Colors | `colors/<name>/colors.css` | Palette primitives and semantic color roles | Loaded separately and independently replaceable |
+| Colors | `colors/<name>/colors.css` | Primary, secondary, and neutral ramps plus contrast/color primitives; no UI-semantic roles | Loaded separately and independently replaceable |
 
 Component authors place only structure and mechanics in `static css`: display,
 flow, sizing, positioning, overflow, stable state hooks, and consumption of
@@ -708,7 +871,7 @@ CSS custom properties are Fray's primary theme integration protocol:
 
 ```text
 colors.css
-  --fray-color-* palette/semantic roles
+  --palette-primary-* / --palette-secondary-* / --palette-neutral-*
                   │
                   ▼
 theme.css
@@ -732,39 +895,44 @@ that should look different. `frayThemeVariableCatalog` exports this contract in
 machine-readable form, including every variable's layer, family, value kind,
 purpose, and optional fallback.
 
-A custom component should consume the same hierarchy rather than forcing every
-theme to learn a new selector:
+A custom component can apply the public trait matching the treatment it needs
+and optionally consume the same variable hierarchy:
 
 ```css
-acme-grid > header {
-  color: var(
-    --acme-grid-header-color,
-    var(--fray-table-header-color, var(--fray-header-color))
-  );
-  background: var(
-    --acme-grid-header-background,
-    var(--fray-table-header-background, var(--fray-header-background))
-  );
+acme-grid.datacomponentlike > header {
+  color: var(--table-header-color, var(--header-color));
+  background: var(--table-header-background, var(--header-background));
 }
 ```
 
-That component immediately follows compatible Fray themes while retaining a
-consumer/component-specific escape hatch.
-
-Variables are preferred, not mandatory. Some visual treatments require actual
-selectors and pseudo-elements. Shiny uses theme-scoped stable
-`data-fray-component`, `data-part`, role, and ARIA-state hooks to layer
-highlights over headers and button-like controls, draw custom dropdown arrows
-and checkbox surfaces, and style native progress pseudo-parts. These rules must
-not depend on application classes or generated IDs, must never intercept
-pointer events, and must yield to native representation under forced colors.
+Complete traits use the `like` suffix. A component whose outer and content
+regions are distinct uses `shell` and `inner`, for example `buttonshell` with
+`buttoninner`, or `datacomponentshell` with `datacomponentinner`. Other public
+families include `inputlike`, `headerlike`, `coloredlike`, `panellike`, and
+`toolbarlike`; the panel and toolbar families also expose
+`panelshell`/`panelinner` and `toolbarshell`/`toolbarinner`. Wrappers are not
+introduced solely to carry a split trait.
+
+Themes directly target native elements, public traits, native pseudo-parts,
+and native/ARIA state. They never target `data-fray-component` or `data-part`.
+Every theme seeds inherited variables with a zero-specificity
+`:root`/`[data-theme]` boundary rule. Presentation selectors use `@scope` with
+nested theme roots and `[data-theme-exclude]` limits, a named cascade layer,
+and low-specificity `:where()` selectors. Shiny's highlights and
+select/progress decoration follow that contract and yield to native
+representation under forced colors.
+
+`coloredlike` defaults to the primary palette. Components can provide
+`--colored-base`, `--colored-light`, `--colored-dark`, and
+`--colored-contrast`; the active theme decides whether those inputs become a
+flat color, gradient, other polish, or no special treatment.
 
 ### Runtime selection
 
 `replaceFrayStylesheet` maintains one
 `link[data-fray-stylesheet="theme"]` and one
 `link[data-fray-stylesheet="colors"]`. Replacing either link also sets the
-corresponding `data-fray-theme` or `data-fray-color` root attribute. The
+corresponding `data-theme` or `data-color` root attribute. The
 `ThemePicker` and `ColorPicker` controls expose the same operation through the
 normal Fray value-control contract.
 

package/colors/README.md

@@ -1,15 +1,30 @@
 # Fray color palettes
 
-Each `<name>/colors.css` file defines the complete `--fray-color-*` contract
-without defining component geometry or treatment. It can therefore be replaced
-without rebuilding Fray components or replacing the active theme stylesheet.
-
-Palette files must provide canvas and surface colors, primary and muted text,
-ordinary and strong borders, primary/hover/active/soft accents, focus and
-selection colors, disabled colors, success/error roles, and highlight/shadow
-tints. The required list is available programmatically from
-`frayThemeVariableCatalog` entries whose `layer` is `color`.
-
-Palette names describe a color direction, not a theme. A theme may constrain
-which palettes it advertises, but the CSS contract itself keeps the two assets
-independently replaceable.
+Each `<name>/colors.css` file defines a replaceable, prefix-free color
+language. It contains palette values only; it does not decide what a panel,
+button, input, selection, or application surface looks like.
+
+Every palette supplies three complete ramps:
+
+```text
+--palette-primary-{50,100,200,300,400,500,600,700,800,900,950}
+--palette-secondary-{50,100,200,300,400,500,600,700,800,900,950}
+--palette-neutral-{50,100,200,300,400,500,600,700,800,900,950}
+```
+
+It also supplies `--palette-<family>`, `--palette-<family>-light`, and
+`--palette-<family>-dark` aliases; `--palette-light`, `--palette-dark`,
+`--palette-contrast-light`, and `--palette-contrast-dark`; and named hue
+primitives such as `--palette-red` and `--palette-green`. Additional numeric
+stops may be added without changing the existing contract.
+
+Themes map these values to semantic variables. For example, a theme may map a
+light-mode button to `--palette-neutral-100`, a selected item to
+`--palette-primary-600`, and an error to `--palette-red`. A different theme can
+use the same palette in entirely different places.
+
+Palette declarations use a zero-specificity boundary selector for `:root` or
+the matching `[data-color]` root. They select no descendants; the custom
+properties propagate through normal inheritance and a nested color root seeds
+its own palette. `frayThemeVariableCatalog` entries whose `layer` is `palette`
+expose the machine-readable required vocabulary.

package/colors/gray/colors.css

@@ -1,29 +1,57 @@
 @charset "utf-8";
 
-:where(:root), [data-fray-color="gray"] {
-  --fray-color-canvas: #f5f6f7;
-  --fray-color-surface: #ffffff;
-  --fray-color-surface-muted: #eceff1;
-  --fray-color-surface-raised: #ffffff;
-  --fray-color-surface-inset: #dde1e4;
-  --fray-color-text: #25292d;
-  --fray-color-text-muted: #626a72;
-  --fray-color-border: #c3c8cd;
-  --fray-color-border-strong: #858d95;
-  --fray-color-primary: #5d6873;
-  --fray-color-primary-hover: #4d5862;
-  --fray-color-primary-active: #3d464e;
-  --fray-color-primary-soft: #e1e6eb;
-  --fray-color-on-primary: #ffffff;
-  --fray-color-focus: #1769aa;
-  --fray-color-selection: #5d6873;
-  --fray-color-on-selection: #ffffff;
-  --fray-color-disabled: #e4e7e9;
-  --fray-color-on-disabled: #6c737a;
-  --fray-color-error: #b3261e;
-  --fray-color-on-error: #ffffff;
-  --fray-color-success: #287a3c;
-  --fray-color-on-success: #ffffff;
-  --fray-color-highlight: #ffffff;
-  --fray-color-shadow: #20252a;
+@layer palette {
+  :where(:root:not([data-color]), [data-color="gray"]) {
+      --palette-light: #ffffff;
+      --palette-dark: #111827;
+      --palette-contrast-light: var(--palette-light);
+      --palette-contrast-dark: var(--palette-dark);
+      --palette-red: #b3261e;
+      --palette-green: #287a3c;
+
+      --palette-primary-500: #5d6873;
+      --palette-primary-50: color-mix(in oklch, var(--palette-primary-500) 8%, var(--palette-light));
+      --palette-primary-100: color-mix(in oklch, var(--palette-primary-500) 16%, var(--palette-light));
+      --palette-primary-200: color-mix(in oklch, var(--palette-primary-500) 32%, var(--palette-light));
+      --palette-primary-300: color-mix(in oklch, var(--palette-primary-500) 50%, var(--palette-light));
+      --palette-primary-400: color-mix(in oklch, var(--palette-primary-500) 72%, var(--palette-light));
+      --palette-primary-600: color-mix(in oklch, var(--palette-primary-500) 85%, var(--palette-dark));
+      --palette-primary-700: color-mix(in oklch, var(--palette-primary-500) 72%, var(--palette-dark));
+      --palette-primary-800: color-mix(in oklch, var(--palette-primary-500) 58%, var(--palette-dark));
+      --palette-primary-900: color-mix(in oklch, var(--palette-primary-500) 42%, var(--palette-dark));
+      --palette-primary-950: color-mix(in oklch, var(--palette-primary-500) 28%, var(--palette-dark));
+      --palette-primary: var(--palette-primary-500);
+      --palette-primary-light: var(--palette-primary-200);
+      --palette-primary-dark: var(--palette-primary-800);
+
+      --palette-secondary-500: #1769aa;
+      --palette-secondary-50: color-mix(in oklch, var(--palette-secondary-500) 8%, var(--palette-light));
+      --palette-secondary-100: color-mix(in oklch, var(--palette-secondary-500) 16%, var(--palette-light));
+      --palette-secondary-200: color-mix(in oklch, var(--palette-secondary-500) 32%, var(--palette-light));
+      --palette-secondary-300: color-mix(in oklch, var(--palette-secondary-500) 50%, var(--palette-light));
+      --palette-secondary-400: color-mix(in oklch, var(--palette-secondary-500) 72%, var(--palette-light));
+      --palette-secondary-600: color-mix(in oklch, var(--palette-secondary-500) 85%, var(--palette-dark));
+      --palette-secondary-700: color-mix(in oklch, var(--palette-secondary-500) 72%, var(--palette-dark));
+      --palette-secondary-800: color-mix(in oklch, var(--palette-secondary-500) 58%, var(--palette-dark));
+      --palette-secondary-900: color-mix(in oklch, var(--palette-secondary-500) 42%, var(--palette-dark));
+      --palette-secondary-950: color-mix(in oklch, var(--palette-secondary-500) 28%, var(--palette-dark));
+      --palette-secondary: var(--palette-secondary-500);
+      --palette-secondary-light: var(--palette-secondary-200);
+      --palette-secondary-dark: var(--palette-secondary-800);
+
+      --palette-neutral-500: #858d95;
+      --palette-neutral-50: color-mix(in oklch, var(--palette-neutral-500) 6%, var(--palette-light));
+      --palette-neutral-100: color-mix(in oklch, var(--palette-neutral-500) 13%, var(--palette-light));
+      --palette-neutral-200: color-mix(in oklch, var(--palette-neutral-500) 26%, var(--palette-light));
+      --palette-neutral-300: color-mix(in oklch, var(--palette-neutral-500) 43%, var(--palette-light));
+      --palette-neutral-400: color-mix(in oklch, var(--palette-neutral-500) 68%, var(--palette-light));
+      --palette-neutral-600: color-mix(in oklch, var(--palette-neutral-500) 84%, var(--palette-dark));
+      --palette-neutral-700: color-mix(in oklch, var(--palette-neutral-500) 67%, var(--palette-dark));
+      --palette-neutral-800: color-mix(in oklch, var(--palette-neutral-500) 50%, var(--palette-dark));
+      --palette-neutral-900: color-mix(in oklch, var(--palette-neutral-500) 32%, var(--palette-dark));
+      --palette-neutral-950: color-mix(in oklch, var(--palette-neutral-500) 18%, var(--palette-dark));
+      --palette-neutral: var(--palette-neutral-500);
+      --palette-neutral-light: var(--palette-neutral-200);
+      --palette-neutral-dark: var(--palette-neutral-800);
+  }
 }

package/colors/green/colors.css

@@ -1,29 +1,57 @@
 @charset "utf-8";
 
-:where(:root), [data-fray-color="green"] {
-  --fray-color-canvas: #f4faf4;
-  --fray-color-surface: #ffffff;
-  --fray-color-surface-muted: #e6f3e7;
-  --fray-color-surface-raised: #ffffff;
-  --fray-color-surface-inset: #d2e7d4;
-  --fray-color-text: #18301d;
-  --fray-color-text-muted: #536b57;
-  --fray-color-border: #b4ccb8;
-  --fray-color-border-strong: #75947a;
-  --fray-color-primary: #287a3c;
-  --fray-color-primary-hover: #206b33;
-  --fray-color-primary-active: #185529;
-  --fray-color-primary-soft: #d5f0da;
-  --fray-color-on-primary: #ffffff;
-  --fray-color-focus: #19883a;
-  --fray-color-selection: #287a3c;
-  --fray-color-on-selection: #ffffff;
-  --fray-color-disabled: #e0e9e1;
-  --fray-color-on-disabled: #657968;
-  --fray-color-error: #b3261e;
-  --fray-color-on-error: #ffffff;
-  --fray-color-success: #287a3c;
-  --fray-color-on-success: #ffffff;
-  --fray-color-highlight: #ffffff;
-  --fray-color-shadow: #15321b;
+@layer palette {
+  :where(:root:not([data-color]), [data-color="green"]) {
+      --palette-light: #ffffff;
+      --palette-dark: #111827;
+      --palette-contrast-light: var(--palette-light);
+      --palette-contrast-dark: var(--palette-dark);
+      --palette-red: #b3261e;
+      --palette-green: #287a3c;
+
+      --palette-primary-500: #287a3c;
+      --palette-primary-50: color-mix(in oklch, var(--palette-primary-500) 8%, var(--palette-light));
+      --palette-primary-100: color-mix(in oklch, var(--palette-primary-500) 16%, var(--palette-light));
+      --palette-primary-200: color-mix(in oklch, var(--palette-primary-500) 32%, var(--palette-light));
+      --palette-primary-300: color-mix(in oklch, var(--palette-primary-500) 50%, var(--palette-light));
+      --palette-primary-400: color-mix(in oklch, var(--palette-primary-500) 72%, var(--palette-light));
+      --palette-primary-600: color-mix(in oklch, var(--palette-primary-500) 85%, var(--palette-dark));
+      --palette-primary-700: color-mix(in oklch, var(--palette-primary-500) 72%, var(--palette-dark));
+      --palette-primary-800: color-mix(in oklch, var(--palette-primary-500) 58%, var(--palette-dark));
+      --palette-primary-900: color-mix(in oklch, var(--palette-primary-500) 42%, var(--palette-dark));
+      --palette-primary-950: color-mix(in oklch, var(--palette-primary-500) 28%, var(--palette-dark));
+      --palette-primary: var(--palette-primary-500);
+      --palette-primary-light: var(--palette-primary-200);
+      --palette-primary-dark: var(--palette-primary-800);
+
+      --palette-secondary-500: #087f78;
+      --palette-secondary-50: color-mix(in oklch, var(--palette-secondary-500) 8%, var(--palette-light));
+      --palette-secondary-100: color-mix(in oklch, var(--palette-secondary-500) 16%, var(--palette-light));
+      --palette-secondary-200: color-mix(in oklch, var(--palette-secondary-500) 32%, var(--palette-light));
+      --palette-secondary-300: color-mix(in oklch, var(--palette-secondary-500) 50%, var(--palette-light));
+      --palette-secondary-400: color-mix(in oklch, var(--palette-secondary-500) 72%, var(--palette-light));
+      --palette-secondary-600: color-mix(in oklch, var(--palette-secondary-500) 85%, var(--palette-dark));
+      --palette-secondary-700: color-mix(in oklch, var(--palette-secondary-500) 72%, var(--palette-dark));
+      --palette-secondary-800: color-mix(in oklch, var(--palette-secondary-500) 58%, var(--palette-dark));
+      --palette-secondary-900: color-mix(in oklch, var(--palette-secondary-500) 42%, var(--palette-dark));
+      --palette-secondary-950: color-mix(in oklch, var(--palette-secondary-500) 28%, var(--palette-dark));
+      --palette-secondary: var(--palette-secondary-500);
+      --palette-secondary-light: var(--palette-secondary-200);
+      --palette-secondary-dark: var(--palette-secondary-800);
+
+      --palette-neutral-500: #75947a;
+      --palette-neutral-50: color-mix(in oklch, var(--palette-neutral-500) 6%, var(--palette-light));
+      --palette-neutral-100: color-mix(in oklch, var(--palette-neutral-500) 13%, var(--palette-light));
+      --palette-neutral-200: color-mix(in oklch, var(--palette-neutral-500) 26%, var(--palette-light));
+      --palette-neutral-300: color-mix(in oklch, var(--palette-neutral-500) 43%, var(--palette-light));
+      --palette-neutral-400: color-mix(in oklch, var(--palette-neutral-500) 68%, var(--palette-light));
+      --palette-neutral-600: color-mix(in oklch, var(--palette-neutral-500) 84%, var(--palette-dark));
+      --palette-neutral-700: color-mix(in oklch, var(--palette-neutral-500) 67%, var(--palette-dark));
+      --palette-neutral-800: color-mix(in oklch, var(--palette-neutral-500) 50%, var(--palette-dark));
+      --palette-neutral-900: color-mix(in oklch, var(--palette-neutral-500) 32%, var(--palette-dark));
+      --palette-neutral-950: color-mix(in oklch, var(--palette-neutral-500) 18%, var(--palette-dark));
+      --palette-neutral: var(--palette-neutral-500);
+      --palette-neutral-light: var(--palette-neutral-200);
+      --palette-neutral-dark: var(--palette-neutral-800);
+  }
 }

package/colors/iceblue/colors.css

@@ -1,29 +1,57 @@
 @charset "utf-8";
 
-:where(:root), [data-fray-color="iceblue"] {
-  --fray-color-canvas: #f4f8fc;
-  --fray-color-surface: #ffffff;
-  --fray-color-surface-muted: #eaf2f9;
-  --fray-color-surface-raised: #ffffff;
-  --fray-color-surface-inset: #d9e7f3;
-  --fray-color-text: #162536;
-  --fray-color-text-muted: #53687c;
-  --fray-color-border: #b8c9d9;
-  --fray-color-border-strong: #7892aa;
-  --fray-color-primary: #1769aa;
-  --fray-color-primary-hover: #0f5b96;
-  --fray-color-primary-active: #0a4778;
-  --fray-color-primary-soft: #d7ebfb;
-  --fray-color-on-primary: #ffffff;
-  --fray-color-focus: #1683d8;
-  --fray-color-selection: #1769aa;
-  --fray-color-on-selection: #ffffff;
-  --fray-color-disabled: #e2e9ef;
-  --fray-color-on-disabled: #697a89;
-  --fray-color-error: #b3261e;
-  --fray-color-on-error: #ffffff;
-  --fray-color-success: #287a3c;
-  --fray-color-on-success: #ffffff;
-  --fray-color-highlight: #ffffff;
-  --fray-color-shadow: #11283d;
+@layer palette {
+  :where(:root:not([data-color]), [data-color="iceblue"]) {
+      --palette-light: #ffffff;
+      --palette-dark: #111827;
+      --palette-contrast-light: var(--palette-light);
+      --palette-contrast-dark: var(--palette-dark);
+      --palette-red: #b3261e;
+      --palette-green: #287a3c;
+
+      --palette-primary-500: #1769aa;
+      --palette-primary-50: color-mix(in oklch, var(--palette-primary-500) 8%, var(--palette-light));
+      --palette-primary-100: color-mix(in oklch, var(--palette-primary-500) 16%, var(--palette-light));
+      --palette-primary-200: color-mix(in oklch, var(--palette-primary-500) 32%, var(--palette-light));
+      --palette-primary-300: color-mix(in oklch, var(--palette-primary-500) 50%, var(--palette-light));
+      --palette-primary-400: color-mix(in oklch, var(--palette-primary-500) 72%, var(--palette-light));
+      --palette-primary-600: color-mix(in oklch, var(--palette-primary-500) 85%, var(--palette-dark));
+      --palette-primary-700: color-mix(in oklch, var(--palette-primary-500) 72%, var(--palette-dark));
+      --palette-primary-800: color-mix(in oklch, var(--palette-primary-500) 58%, var(--palette-dark));
+      --palette-primary-900: color-mix(in oklch, var(--palette-primary-500) 42%, var(--palette-dark));
+      --palette-primary-950: color-mix(in oklch, var(--palette-primary-500) 28%, var(--palette-dark));
+      --palette-primary: var(--palette-primary-500);
+      --palette-primary-light: var(--palette-primary-200);
+      --palette-primary-dark: var(--palette-primary-800);
+
+      --palette-secondary-500: #7137a8;
+      --palette-secondary-50: color-mix(in oklch, var(--palette-secondary-500) 8%, var(--palette-light));
+      --palette-secondary-100: color-mix(in oklch, var(--palette-secondary-500) 16%, var(--palette-light));
+      --palette-secondary-200: color-mix(in oklch, var(--palette-secondary-500) 32%, var(--palette-light));
+      --palette-secondary-300: color-mix(in oklch, var(--palette-secondary-500) 50%, var(--palette-light));
+      --palette-secondary-400: color-mix(in oklch, var(--palette-secondary-500) 72%, var(--palette-light));
+      --palette-secondary-600: color-mix(in oklch, var(--palette-secondary-500) 85%, var(--palette-dark));
+      --palette-secondary-700: color-mix(in oklch, var(--palette-secondary-500) 72%, var(--palette-dark));
+      --palette-secondary-800: color-mix(in oklch, var(--palette-secondary-500) 58%, var(--palette-dark));
+      --palette-secondary-900: color-mix(in oklch, var(--palette-secondary-500) 42%, var(--palette-dark));
+      --palette-secondary-950: color-mix(in oklch, var(--palette-secondary-500) 28%, var(--palette-dark));
+      --palette-secondary: var(--palette-secondary-500);
+      --palette-secondary-light: var(--palette-secondary-200);
+      --palette-secondary-dark: var(--palette-secondary-800);
+
+      --palette-neutral-500: #7892aa;
+      --palette-neutral-50: color-mix(in oklch, var(--palette-neutral-500) 6%, var(--palette-light));
+      --palette-neutral-100: color-mix(in oklch, var(--palette-neutral-500) 13%, var(--palette-light));
+      --palette-neutral-200: color-mix(in oklch, var(--palette-neutral-500) 26%, var(--palette-light));
+      --palette-neutral-300: color-mix(in oklch, var(--palette-neutral-500) 43%, var(--palette-light));
+      --palette-neutral-400: color-mix(in oklch, var(--palette-neutral-500) 68%, var(--palette-light));
+      --palette-neutral-600: color-mix(in oklch, var(--palette-neutral-500) 84%, var(--palette-dark));
+      --palette-neutral-700: color-mix(in oklch, var(--palette-neutral-500) 67%, var(--palette-dark));
+      --palette-neutral-800: color-mix(in oklch, var(--palette-neutral-500) 50%, var(--palette-dark));
+      --palette-neutral-900: color-mix(in oklch, var(--palette-neutral-500) 32%, var(--palette-dark));
+      --palette-neutral-950: color-mix(in oklch, var(--palette-neutral-500) 18%, var(--palette-dark));
+      --palette-neutral: var(--palette-neutral-500);
+      --palette-neutral-light: var(--palette-neutral-200);
+      --palette-neutral-dark: var(--palette-neutral-800);
+  }
 }