@sylwellsoftware/fray 0.4.0 → 0.6.0

package/README.md

@@ -15,6 +15,23 @@ Chromium, Firefox, and Safari at candidate time. Its reproducible test matrix
 uses Playwright's pinned Chromium, Firefox, and WebKit builds. Repository
 tooling requires Node 22+ and pnpm 10; Fray's runtime itself is browser-only.
 
+## Why Fray
+
+Fray presents application values without requiring developers to translate
+them into a second UI-specific state system. A control writes the same Glue
+emitter that a derivation or query can observe, and a component renders the
+downstream value it actually needs. State remains owned and explicit, while
+reactive propagation and rendering mechanics stay library concerns.
+
+Presentation should be equally direct. Native HTML already defines buttons,
+inputs, tables, lists, progress, dialogs, and landmarks, so Fray uses those
+elements when their semantics match. Components that need another boundary use
+readable light-DOM host names rather than framework identity classes.
+Application classes remain available for meaningful reusable traits and
+consumer styling, while Fray's current structural implementation uses explicit
+host and part metadata for its own layout and documented exceptional theme
+rules.
+
 ## Design model
 
 Fray is the presentation half of a deliberately two-layer architecture:
@@ -204,7 +221,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>
@@ -216,8 +233,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:
 
@@ -663,7 +682,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
@@ -691,7 +710,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
@@ -715,39 +734,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);
+  }
 }

package/colors/ocean/colors.css

@@ -1,29 +1,57 @@
 @charset "utf-8";
 
-:where(:root), [data-fray-color="ocean"] {
-  --fray-color-canvas: #f1f9f8;
-  --fray-color-surface: #ffffff;
-  --fray-color-surface-muted: #e1f2f0;
-  --fray-color-surface-raised: #ffffff;
-  --fray-color-surface-inset: #cbe5e2;
-  --fray-color-text: #12302f;
-  --fray-color-text-muted: #4e6b69;
-  --fray-color-border: #a9c9c5;
-  --fray-color-border-strong: #668f8a;
-  --fray-color-primary: #087f78;
-  --fray-color-primary-hover: #006f69;
-  --fray-color-primary-active: #005a55;
-  --fray-color-primary-soft: #c8efeb;
-  --fray-color-on-primary: #ffffff;
-  --fray-color-focus: #008f86;
-  --fray-color-selection: #087f78;
-  --fray-color-on-selection: #ffffff;
-  --fray-color-disabled: #dde9e7;
-  --fray-color-on-disabled: #637976;
-  --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: #0b302d;
+@layer palette {
+  :where(:root:not([data-color]), [data-color="ocean"]) {
+      --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: #087f78;
+      --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: #668f8a;
+      --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/orange/colors.css

@@ -1,29 +1,57 @@
 @charset "utf-8";
 
-:where(:root), [data-fray-color="orange"] {
-  --fray-color-canvas: #fcf7f2;
-  --fray-color-surface: #ffffff;
-  --fray-color-surface-muted: #f8ebdf;
-  --fray-color-surface-raised: #ffffff;
-  --fray-color-surface-inset: #edd8c5;
-  --fray-color-text: #382417;
-  --fray-color-text-muted: #725b49;
-  --fray-color-border: #d8bda5;
-  --fray-color-border-strong: #a87a56;
-  --fray-color-primary: #a94b00;
-  --fray-color-primary-hover: #963f00;
-  --fray-color-primary-active: #773200;
-  --fray-color-primary-soft: #f8dfc8;
-  --fray-color-on-primary: #ffffff;
-  --fray-color-focus: #c45800;
-  --fray-color-selection: #a94b00;
-  --fray-color-on-selection: #ffffff;
-  --fray-color-disabled: #eee4dc;
-  --fray-color-on-disabled: #786a5f;
-  --fray-color-error: #a51f18;
-  --fray-color-on-error: #ffffff;
-  --fray-color-success: #287a3c;
-  --fray-color-on-success: #ffffff;
-  --fray-color-highlight: #ffffff;
-  --fray-color-shadow: #3a1c08;
+@layer palette {
+  :where(:root:not([data-color]), [data-color="orange"]) {
+      --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: #a94b00;
+      --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: #a87a56;
+      --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);
+  }
 }