@sylwellsoftware/fray 0.7.0 → 1.0.0

package/colors/README.md

@@ -1,30 +1,33 @@
 # Fray color palettes
 
-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.
+Each `<name>/colors.css` file is a replaceable variable-only palette. It does
+not decide what a panel, button, input, selection, or application surface looks
+like, and it never imports another stylesheet.
 
-Every palette supplies three complete ramps:
+A palette normally supplies:
 
-```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}
-```
+- `--palette-light` and `--palette-dark` endpoints;
+- light/dark contrast colors and named red/green primitives;
+- `--palette-primary-500`, `--palette-secondary-500`, and
+  `--palette-neutral-500` anchors.
 
-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/base.css` derives the remaining numeric ramp stops and the ordinary
+`primary`, `light`, and `dark` aliases with `color-mix`. A palette may also
+override `--palette-<family>-light-mix` or
+`--palette-<family>-dark-mix` when a ramp intentionally changes hue.
 
-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.
+```css
+@layer palette {
+  :root {
+    --palette-light: #fff;
+    --palette-dark: #111827;
+    --palette-primary-500: #2989d8;
+    --palette-secondary-500: #7137a8;
+    --palette-neutral-500: #7892aa;
+  }
+}
+```
 
-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.
+Color files contain no semantic `--button-*`, `--input-*`, or `--panel-*`
+variables and no descendant selectors. Themes map the derived palette to those
+semantic roles.

package/colors/gray/colors.css

@@ -1,7 +1,7 @@
 @charset "utf-8";
 
 @layer palette {
-  :where(:root:not([data-color]), [data-color="gray"]) {
+  :root {
       --palette-light: #ffffff;
       --palette-dark: #111827;
       --palette-contrast-light: var(--palette-light);
@@ -10,48 +10,7 @@
       --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,7 +1,7 @@
 @charset "utf-8";
 
 @layer palette {
-  :where(:root:not([data-color]), [data-color="green"]) {
+  :root {
       --palette-light: #ffffff;
       --palette-dark: #111827;
       --palette-contrast-light: var(--palette-light);
@@ -10,48 +10,7 @@
       --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,7 +1,7 @@
 @charset "utf-8";
 
 @layer palette {
-  :where(:root:not([data-color]), [data-color="iceblue"]) {
+  :root {
       --palette-light: #ffffff;
       --palette-dark: #111827;
       --palette-contrast-light: var(--palette-light);
@@ -9,49 +9,11 @@
       --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);
-
+      /* Preserve the legacy Shiny movement from navy through blue to cyan. */
+      --palette-primary-light-mix: #00b9e8;
+      --palette-primary-dark-mix: #00193f;
+      --palette-primary-500: #2989d8;
       --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,7 +1,7 @@
 @charset "utf-8";
 
 @layer palette {
-  :where(:root:not([data-color]), [data-color="ocean"]) {
+  :root {
       --palette-light: #ffffff;
       --palette-dark: #111827;
       --palette-contrast-light: var(--palette-light);
@@ -10,48 +10,7 @@
       --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,7 +1,7 @@
 @charset "utf-8";
 
 @layer palette {
-  :where(:root:not([data-color]), [data-color="orange"]) {
+  :root {
       --palette-light: #ffffff;
       --palette-dark: #111827;
       --palette-contrast-light: var(--palette-light);
@@ -10,48 +10,7 @@
       --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);
   }
 }

package/colors/purple/colors.css

@@ -1,7 +1,7 @@
 @charset "utf-8";
 
 @layer palette {
-  :where(:root:not([data-color]), [data-color="purple"]) {
+  :root {
       --palette-light: #ffffff;
       --palette-dark: #111827;
       --palette-contrast-light: var(--palette-light);
@@ -10,48 +10,7 @@
       --palette-green: #287a3c;
 
       --palette-primary-500: #7137a8;
-      --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: #9273a2;
-      --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/red/colors.css

@@ -1,7 +1,7 @@
 @charset "utf-8";
 
 @layer palette {
-  :where(:root:not([data-color]), [data-color="red"]) {
+  :root {
       --palette-light: #ffffff;
       --palette-dark: #111827;
       --palette-contrast-light: var(--palette-light);
@@ -10,48 +10,7 @@
       --palette-green: #287a3c;
 
       --palette-primary-500: #b3261e;
-      --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: #806000;
-      --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: #a87570;
-      --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/yellow/colors.css

@@ -1,7 +1,7 @@
 @charset "utf-8";
 
 @layer palette {
-  :where(:root:not([data-color]), [data-color="yellow"]) {
+  :root {
       --palette-light: #ffffff;
       --palette-dark: #111827;
       --palette-contrast-light: var(--palette-light);
@@ -10,48 +10,7 @@
       --palette-green: #287a3c;
 
       --palette-primary-500: #806000;
-      --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: #998849;
-      --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/dist/Components/Placeholder.d.ts

@@ -5,10 +5,9 @@ export interface PlaceholderProps extends ComponentProps {
 }
 /** Deterministic loading placeholder for data components. */
 export declare class Placeholder extends Component<PlaceholderProps> {
+    static liveProps: readonly string[];
     render(): import("@sylwellsoftware/fray/jsx-runtime").JSX.Element;
     static hostName: string;
-    static standaloneHostName: string;
-    static baseStyles: (string | string[])[][];
     static css: string;
 }
 //# sourceMappingURL=Placeholder.d.ts.map

package/dist/Components/Placeholder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Placeholder.d.ts","sourceRoot":"","sources":["../../src/Components/Placeholder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAM,MAAM,gBAAgB,CAAA;AAC7C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAElD,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACpD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC1B;AAED,6DAA6D;AAC7D,qBAAa,WAAY,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACxD,MAAM;IAMN,OAAgB,QAAQ,SAAgB;IACxC,OAAgB,kBAAkB,SAAwB;IAE1D,MAAM,CAAC,UAAU,0BAEhB;IAED,MAAM,CAAC,GAAG,SAgBT;CACJ"}
+{"version":3,"file":"Placeholder.d.ts","sourceRoot":"","sources":["../../src/Components/Placeholder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAM,MAAM,gBAAgB,CAAA;AAC7C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAElD,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACpD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC1B;AAED,6DAA6D;AAC7D,qBAAa,WAAY,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACxD,OAAgB,SAAS,EAAE,SAAS,MAAM,EAAE,CAAK;IACjD,MAAM;IAMN,OAAgB,QAAQ,SAAgB;IAExC,OAAgB,GAAG,SAqClB;CACJ"}

package/dist/Components/component.d.ts

@@ -8,6 +8,8 @@ export interface ComponentProps {
     children?: FrayChild | readonly FrayChild[];
     class?: string | null;
     className?: string | null;
+    /** Opt this host into the theme-defined, non-nestable island treatment. */
+    island?: boolean;
     [name: string]: unknown;
 }
 export type Ref<TNode extends Node = Node> = ((value: TNode | null) => void) | {
@@ -41,11 +43,17 @@ export interface EmitterSnapshot<TValue, TError = unknown> {
     readonly fetchState: FetchStateValue;
     readonly error: TError | null;
 }
+declare const livePropContract: unique symbol;
+/** Type-only declaration of the component props that accept `live()` bindings. */
+export interface LivePropContract<TName extends string> {
+    readonly [livePropContract]?: TName;
+}
+/** Components opt in to every supported `live()` prop through LivePropContract. */
+type DefaultLivePropName<_TProps extends ComponentProps> = never;
+type DeclaredLivePropName<TProps extends ComponentProps> = typeof livePropContract extends keyof TProps ? Extract<Exclude<TProps[typeof livePropContract], undefined>, keyof TProps> : DefaultLivePropName<TProps>;
 export type TemplateProps<TProps extends ComponentProps> = {
-    [TName in keyof TProps]: TName extends 'key' | 'children' ? TProps[TName] : TProps[TName] | LiveBinding<Exclude<TProps[TName], undefined>>;
+    [TName in keyof TProps as TName extends typeof livePropContract ? never : TName]: TName extends 'key' | 'children' ? TProps[TName] : TName extends DeclaredLivePropName<TProps> ? TProps[TName] | LiveBinding<Exclude<TProps[TName], undefined>> : TProps[TName];
 };
-export type BaseStyleNames = string | readonly string[];
-export type BaseStyles = Readonly<Record<string, BaseStyleNames>> | ReadonlyArray<readonly [string, BaseStyleNames]>;
 export interface ComponentDependency {
     registerStyles(runtime?: FrayRuntime, seen?: Set<ComponentDependency>): void;
 }
@@ -133,17 +141,15 @@ export declare function css(strings: TemplateStringsArray, ...values: unknown[])
 export declare class Component<TProps extends ComponentProps = ComponentProps> {
     static dependencies: ComponentDependency[];
     static requiredServices: readonly ServiceKey<unknown>[];
+    /** Component `live()` bindings are opt-in; subclasses declare their allowlist. */
+    static liveProps: readonly string[] | null;
     static css: string;
     static hostName: string | null;
-    static standaloneHostName: string | null;
     static new<TConstructor extends ConcreteComponentConstructor>(this: TConstructor, ...args: ConstructorParameters<TConstructor>): InstanceType<TConstructor>;
-    static get baseStyles(): unknown;
     static registerStyles(this: ComponentDependency & {
         css?: string;
-        baseStyles?: unknown;
         dependencies?: ComponentDependency[];
         hostName?: string | null;
-        standaloneHostName?: string | null;
     }, runtime?: FrayRuntime, seen?: Set<ComponentDependency>): void;
     props: TProps;
     dom: ChildNode | null;
@@ -183,6 +189,8 @@ export declare class Component<TProps extends ComponentProps = ComponentProps> {
     registerChild<TComponent extends Component>(component: TComponent): TComponent;
     destroy(): void;
     private validateRequiredServices;
+    private validateIslandAncestry;
+    private hasIslandDescendant;
     onDestroy(): void;
     private trackRenderRead;
     private reconcileRenderReads;