@sylwellsoftware/fray 0.7.0 → 1.0.0

package/themes/README.md

@@ -1,86 +1,44 @@
-# Fray structural, theme, and color CSS
+# Fray base and theme CSS
 
-Fray separates three stylesheet responsibilities:
+Fray presentation is loaded in this order:
 
-1. `styles/structural.css` contains generated layout, flow, sizing,
-   positioning, overflow, interaction mechanics, and justified structural
-   hooks for the default component hosts.
-2. `themes/<name>/theme.css` contains typography, spacing, geometry, surfaces,
-   depth, native-element presentation, reusable trait presentation, and the
-   mapping from palette values to semantic UI variables.
-3. `colors/<name>/colors.css` contains primary, secondary, and neutral color
-   ramps and contrast/color primitives only.
+1. `themes/base.css`: custom-property defaults and palette derivation only.
+2. Runtime-collected structural CSS for the application's declared components.
+3. One `colors/<name>/colors.css`: palette anchors and endpoints only.
+4. One `themes/<name>/theme.css`: intentional custom-property overrides only.
 
-Load the three artifacts independently:
+Application-owned layout CSS is separate from these Fray inputs.
 
-```ts
-import '@sylwellsoftware/fray/styles/structural.css'
-import '@sylwellsoftware/fray/colors/ocean/colors.css'
-import '@sylwellsoftware/fray/themes/shiny/theme.css'
-```
-
-`ThemePicker` and `ColorPicker` replace separate
-`link[data-fray-stylesheet]` elements and update the `data-theme` and
-`data-color` root attributes. The link metadata retains its Fray prefix because
-it is operational/diagnostic metadata rather than theme vocabulary.
-
-## Selectors and scope
+## Base file
 
-Themes target native elements directly and expose reusable prefix-free traits:
+`base.css` provides usable default palette anchors, derives the primary,
+secondary, and neutral ramps, and declares semantic defaults. It contains no
+component selectors and no declarations that consume those variables.
 
-```text
-buttonlike          inputlike          datacomponentlike
-headerlike          coloredlike        panellike
-toolbarlike         selectshell
-
-buttonshell         buttoninner
-inputshell          inputinner
-datacomponentshell  datacomponentinner
-headershell         headerinner
-panelshell          panelinner
-toolbarshell        toolbarinner
-coloredshell        coloredinner
-```
+The application imports it explicitly. Named themes and colors never import it,
+which keeps ownership and load order visible.
 
-`like` means a complete single-node treatment. `shell` means an independently
-rendered outer region; `inner` means an independently rendered content region.
-Components do not add wrappers solely to obtain these traits.
+## Theme files
 
-Every theme uses a named cascade layer. A zero-specificity boundary rule seeds
-its inherited variables on `:root` or the matching `[data-theme]`. Presentation
-selectors live in `@scope`; nested theme roots and `[data-theme-exclude]` stop
-the outer theme's selectors. This separation is deliberate because scope
-limits do not stop custom-property inheritance. Low-specificity `:where()`
-groups let application CSS override both kinds of rule.
+A theme changes only variables. The sole ordinary-property exception is
+`color-scheme`, because it informs browser-native rendering. A theme must not
+contain component, trait, part, ARIA-state, or pseudo-element selectors. Those
+selectors belong to component `static css` even when their values are driven by
+theme variables.
 
-Themes do not select `data-fray-component` or `data-part`. The former is
-diagnostic metadata. The latter is restricted to component-owned structural
-or behavioral mechanics that cannot be expressed through native structure,
-roles, ARIA state, or a justified public trait.
-
-## Variables
-
-The active color file supplies only `--palette-*`. The active theme maps those
-values to prefix-free semantic families such as `--ui-*`, `--header-*`,
-`--button-*`, `--input-*`, `--panel-*`, and `--selection-*`. Generated
-structural CSS may consume these variables where configurable host names make
-a direct theme selector inappropriate.
-
-Custom colored content can set:
+Start with no overrides. Add a variable only when it produces a deliberate
+visual difference from `base.css`; do not repeat defaults for completeness.
 
 ```css
-.severity-block {
-  --colored-light: #ffd7d2;
-  --colored-base: #c8332a;
-  --colored-dark: #721710;
-  --colored-contrast: white;
+@layer theme {
+  :root {
+    color-scheme: only light;
+    --button-background: linear-gradient(white, #ddd);
+    --button-shadow: -1px 1px 2px rgb(0 0 0 / 0.4);
+  }
 }
 ```
 
-An element carrying `coloredlike`, `coloredshell`, or `coloredinner` then lets
-each theme decide whether to use a flat fill, gradient, other treatment, or no
-special polish. When no values are supplied, the primary palette is used.
-
-`frayThemeVariableCatalog` publishes the palette and theme variable contract.
-The top-level `themes/light.css` and `themes/dark.css` files remain temporary
-compatibility bundles; new integrations use the separated files.
+`frayThemeVariableCatalog` publishes the supported palette and semantic
+variable contract. Component-specific variables should fall back through a
+shared family so a theme can remain small.

package/themes/base.css

@@ -0,0 +1,311 @@
+@charset "utf-8";
+
+/* Variables only. Structural and presentation declarations belong to components. */
+@layer palette {
+  :root {
+      /* Usable defaults; colors.css replaces these anchors and endpoints. */
+      --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: #2989d8;
+      --palette-secondary-500: #7137a8;
+      --palette-neutral-500: #7892aa;
+
+      /* Each ramp may vary hue; ordinary palettes retain its contrast endpoints. */
+      --palette-primary-light-mix: var(--palette-light);
+      --palette-primary-dark-mix: var(--palette-dark);
+      --palette-secondary-light-mix: var(--palette-light);
+      --palette-secondary-dark-mix: var(--palette-dark);
+      --palette-neutral-light-mix: var(--palette-light);
+      --palette-neutral-dark-mix: var(--palette-dark);
+
+      --palette-primary-50: color-mix(in oklch, var(--palette-primary-500) 8%, var(--palette-primary-light-mix));
+      --palette-primary-100: color-mix(in oklch, var(--palette-primary-500) 16%, var(--palette-primary-light-mix));
+      --palette-primary-200: color-mix(in oklch, var(--palette-primary-500) 32%, var(--palette-primary-light-mix));
+      --palette-primary-300: color-mix(in oklch, var(--palette-primary-500) 50%, var(--palette-primary-light-mix));
+      --palette-primary-400: color-mix(in oklch, var(--palette-primary-500) 72%, var(--palette-primary-light-mix));
+      --palette-primary-600: color-mix(in oklch, var(--palette-primary-500) 85%, var(--palette-primary-dark-mix));
+      --palette-primary-700: color-mix(in oklch, var(--palette-primary-500) 72%, var(--palette-primary-dark-mix));
+      --palette-primary-800: color-mix(in oklch, var(--palette-primary-500) 58%, var(--palette-primary-dark-mix));
+      --palette-primary-900: color-mix(in oklch, var(--palette-primary-500) 42%, var(--palette-primary-dark-mix));
+      --palette-primary-950: color-mix(in oklch, var(--palette-primary-500) 28%, var(--palette-primary-dark-mix));
+      --palette-primary: var(--palette-primary-500);
+      --palette-primary-light: var(--palette-primary-200);
+      --palette-primary-dark: var(--palette-primary-800);
+
+      --palette-secondary-50: color-mix(in oklch, var(--palette-secondary-500) 8%, var(--palette-secondary-light-mix));
+      --palette-secondary-100: color-mix(in oklch, var(--palette-secondary-500) 16%, var(--palette-secondary-light-mix));
+      --palette-secondary-200: color-mix(in oklch, var(--palette-secondary-500) 32%, var(--palette-secondary-light-mix));
+      --palette-secondary-300: color-mix(in oklch, var(--palette-secondary-500) 50%, var(--palette-secondary-light-mix));
+      --palette-secondary-400: color-mix(in oklch, var(--palette-secondary-500) 72%, var(--palette-secondary-light-mix));
+      --palette-secondary-600: color-mix(in oklch, var(--palette-secondary-500) 85%, var(--palette-secondary-dark-mix));
+      --palette-secondary-700: color-mix(in oklch, var(--palette-secondary-500) 72%, var(--palette-secondary-dark-mix));
+      --palette-secondary-800: color-mix(in oklch, var(--palette-secondary-500) 58%, var(--palette-secondary-dark-mix));
+      --palette-secondary-900: color-mix(in oklch, var(--palette-secondary-500) 42%, var(--palette-secondary-dark-mix));
+      --palette-secondary-950: color-mix(in oklch, var(--palette-secondary-500) 28%, var(--palette-secondary-dark-mix));
+      --palette-secondary: var(--palette-secondary-500);
+      --palette-secondary-light: var(--palette-secondary-200);
+      --palette-secondary-dark: var(--palette-secondary-800);
+
+      --palette-neutral-50: color-mix(in oklch, var(--palette-neutral-500) 6%, var(--palette-neutral-light-mix));
+      --palette-neutral-100: color-mix(in oklch, var(--palette-neutral-500) 13%, var(--palette-neutral-light-mix));
+      --palette-neutral-200: color-mix(in oklch, var(--palette-neutral-500) 26%, var(--palette-neutral-light-mix));
+      --palette-neutral-300: color-mix(in oklch, var(--palette-neutral-500) 43%, var(--palette-neutral-light-mix));
+      --palette-neutral-400: color-mix(in oklch, var(--palette-neutral-500) 68%, var(--palette-neutral-light-mix));
+      --palette-neutral-600: color-mix(in oklch, var(--palette-neutral-500) 84%, var(--palette-neutral-dark-mix));
+      --palette-neutral-700: color-mix(in oklch, var(--palette-neutral-500) 67%, var(--palette-neutral-dark-mix));
+      --palette-neutral-800: color-mix(in oklch, var(--palette-neutral-500) 50%, var(--palette-neutral-dark-mix));
+      --palette-neutral-900: color-mix(in oklch, var(--palette-neutral-500) 32%, var(--palette-neutral-dark-mix));
+      --palette-neutral-950: color-mix(in oklch, var(--palette-neutral-500) 18%, var(--palette-neutral-dark-mix));
+      --palette-neutral: var(--palette-neutral-500);
+      --palette-neutral-light: var(--palette-neutral-200);
+      --palette-neutral-dark: var(--palette-neutral-800);
+  }
+}
+@layer theme {
+  :root {
+    /* Foundation */
+    --font-family: sans-serif;
+    --font-size: 14px;
+    --line-height: normal;
+    --control-min-height: calc(var(--ui-font-size) + var(--ui-padding) + var(--ui-padding));
+    --space-xs: 0px;
+    --space-sm: 6px;
+    --space-md: 1rem;
+    --space-lg: 1.5rem;
+    --radius-sm: 3px;
+    --radius-md: 3px;
+    --radius-lg: 0.5rem;
+    --motion-fast: 120ms;
+
+    /* Shared UI and feedback */
+    --application-background: var(--palette-light);
+    --ui-background: var(--palette-neutral-50);
+    --ui-color: var(--palette-neutral-950);
+    --ui-border: 1px solid var(--palette-neutral-300);
+    --ui-shadow: none;
+    --focus-ring: 0 0 0 1px var(--ui-accent-color-highlight);
+    --focus-color: var(--ui-accent-color);
+    --error-color: #f00;
+    --error-contrast: #fcc;
+    --success-color: #080;
+
+    /* Layout components */
+    --panel-background: var(--palette-neutral-50);
+    --panel-color: var(--palette-neutral-950);
+    --panel-border: 1px solid var(--palette-neutral-300);
+    --panel-shadow: none;
+    --panel-radius: var(--radius-md);
+
+    /* Explicit island modifier; non-island themes keep its layout neutral. */
+    --island-margin: 0;
+    --island-padding: 0;
+    --island-background: var(--panel-background);
+    --island-border: var(--panel-border);
+    --island-radius: var(--panel-radius);
+    --island-shadow: var(--panel-shadow);
+
+    --sidebar-background: var(--panel-background);
+    --sidebar-color: var(--panel-color);
+    --sidebar-border: var(--panel-border);
+    --sidebar-shadow: var(--panel-shadow);
+    --sidebar-radius: var(--panel-radius);
+    --sidebar-header-background: var(--section-header-background);
+    --sidebar-header-color: var(--section-header-color);
+    --sidebar-header-border: var(--section-header-border);
+    --sidebar-header-shadow: var(--section-header-shadow);
+    --sidebar-toolbar-background: var(--toolbar-background);
+    --sidebar-toolbar-color: var(--toolbar-color);
+    --sidebar-toolbar-border: var(--toolbar-border);
+    --sidebar-toolbar-shadow: var(--toolbar-shadow);
+
+    --dialog-shadow: 0 1.25rem 4rem color-mix(in oklch, var(--palette-dark) 35%, transparent);
+    --dialog-backdrop-background: color-mix(in oklch, var(--palette-dark) 55%, transparent);
+    --dialog-header-background: var(--section-header-background);
+    --dialog-header-color: var(--section-header-color);
+
+    --header-background: var(--palette-neutral-100);
+    --header-color: var(--palette-neutral-950);
+    --header-border: 0 solid transparent;
+    --header-shadow: none;
+    --section-header-background: var(--header-background);
+    --section-header-color: var(--header-color);
+    --section-header-border: var(--header-border);
+    --section-header-shadow: var(--header-shadow);
+
+    --toolbar-background: var(--palette-neutral-100);
+    --toolbar-color: var(--palette-neutral-950);
+    --toolbar-border: 0 solid transparent;
+    --toolbar-shadow: none;
+
+    /* Input components */
+    --input-background: #fff;
+    --input-color: var(--text-color);
+    --input-border: 1px solid #aaa;
+    --input-shadow: none;
+    --input-background-disabled: var(--ui-medium-bg-color);
+    --input-color-disabled: #777;
+    --dropdown-appearance: none;
+    --dropdown-padding-inline-end: 1.75em;
+    --dropdown-select-background: transparent;
+    --dropdown-select-border: 1px solid transparent;
+    --dropdown-select-shadow: none;
+    --dropdown-underlay-content: "";
+    --dropdown-underlay-background: var(--input-background);
+    --dropdown-underlay-background-disabled: var(--input-background-disabled);
+    --dropdown-underlay-border: var(--input-border);
+    --dropdown-underlay-border-disabled: var(--ui-input-border-disabled);
+    --dropdown-underlay-shadow: var(--input-shadow);
+    --dropdown-underlay-start-radius: var(--ui-border-radius);
+    --dropdown-trigger-content: none;
+    --dropdown-trigger-width: calc(var(--dd-btn-width) - 1px);
+    --dropdown-trigger-color: var(--button-color);
+    --dropdown-trigger-background: var(--button-background);
+    --dropdown-trigger-background-hover: var(--button-background-hover);
+    --dropdown-trigger-background-disabled: var(--button-background-disabled);
+    --dropdown-trigger-border: var(--button-border);
+    --dropdown-trigger-border-disabled: var(--button-border-disabled);
+    --dropdown-trigger-end-radius: var(--ui-border-radius);
+    --dropdown-trigger-shadow: var(--button-shadow);
+    --dropdown-trigger-shadow-hover: var(--button-shadow);
+
+    /* Action components */
+    --button-background: var(--palette-neutral-100);
+    --button-background-hover: var(--palette-primary-100);
+    --button-background-active: var(--palette-primary);
+    --button-background-disabled: #ccc;
+    --button-color: var(--ui-text-color);
+    --button-border: 1px solid #fff0;
+    --button-shadow: none;
+    --button-shadow-active: none;
+    --button-border-style-active: solid;
+    --menu-button-background: var(--button-background);
+
+    /* Choice components */
+    --selection-background: var(--palette-primary);
+    --selection-color: var(--palette-contrast-light);
+    --checkbox-box-background: var(--input-background);
+    --checkbox-box-background-checked: var(--selection-background);
+    --checkbox-box-border: var(--input-border);
+    --checkbox-box-shadow: none;
+    --checkbox-box-shadow-checked: var(--checkbox-box-shadow);
+    --checkbox-symbol-color: var(--selection-color);
+    --checkable-label-color-disabled: #aaa;
+    --toggle-button-background: var(--button-background);
+    --toggle-button-background-checked: var(--palette-primary-700);
+    --toggle-button-border-checked: var(--button-border);
+    --toggle-button-selected-inline-overlap: 0;
+    --toggle-button-selected-z-index: 0;
+    --toggle-button-shadow: none;
+    --toggle-button-shadow-checked: var(--button-shadow);
+    --toggle-group-shadow: none;
+    --toggle-inactive-shared-border-color: var(--palette-neutral-500);
+    --toggle-inactive-separator-background: transparent;
+    --toggle-inactive-separator-block-inset: 0;
+
+    /* Navigation components */
+    --tabline-background: var(--palette-neutral-100);
+    --tabline-padding-inline-start: 0px;
+    --tab-active-background: var(--palette-neutral-50);
+    --tab-button-background: var(--button-background);
+    --tab-button-background-active: var(--tab-active-background);
+    --tab-button-shadow: var(--button-shadow);
+    --tab-button-shadow-active: var(--button-shadow-active);
+    --tab-button-inactive-bottom-shadow: none;
+
+    /* Data components */
+    --row-hover-background: var(--palette-primary-100);
+    --table-header-background: var(--palette-neutral-100);
+    --table-header-color: var(--header-color);
+    --table-header-button-background: var(--button-background);
+    --table-row-background: var(--palette-neutral-50);
+    --table-row-alt-background: var(--palette-neutral-100);
+
+    /* Status and graphical components */
+    --progress-track-background: var(--palette-neutral-200);
+    --progress-track-color: var(--ui-text-color);
+    --progress-track-shadow: inset 0.15em 0.15em 0.35em -0.12em rgb(0 0 0 / 0.5);
+    --progress-value-background: var(--palette-primary);
+    --progress-value-color: var(--palette-contrast-light);
+    --progress-value-shadow: none;
+    --working-background-image: linear-gradient(-45deg, #0001 25%,  #fff1 25%, #fff1 50%, #0001 50%, #0001 75%, #fff1 75%, #fff1);
+    --colored-base: var(--palette-primary);
+    --colored-light: var(--palette-primary-light);
+    --colored-dark: var(--palette-primary-dark);
+    --colored-contrast: var(--palette-contrast-light);
+    --block-graph-block-radius: 0.25em;
+    --block-graph-block-shadow: none;
+    --block-graph-block-gloss-opacity: 0;
+
+    /* Structural compatibility aliases */
+    --base-font-size: 14px;
+    --ui-font-size: var(--base-font-size);
+    --ui-padding: 6px;
+    --ui-padding-h: 6px;
+    --ui-padding-v: 0px;
+    --ui-margin: 1px;
+    --ui-border-radius: 3px;
+    --ui-text-color: var(--ui-color);
+    --ui-muted-text-color: var(--palette-neutral-700);
+    --ui-border-color: var(--palette-neutral-300);
+    --ui-input-text-color: var(--text-color);
+    --ui-input-bg: #fff;
+    --ui-input-border: 1px solid #aaa;
+    --ui-input-bg-disabled: var(--ui-medium-bg-color);
+    --ui-input-border-disabled: 1px solid var(--ui-dark2-bg-color);
+    --ui-select-bg-disabled: var(--ui-dark2-bg-color);
+    --ui-input-text-color-disabled: #777;
+    --ui-accent-color: var(--ui-select-bg-dark);
+    --ui-accent-color-highlight: var(--primary-color-l90);
+    --ui-primary-bg-color: #f5f7f8;
+    --ui-medium-bg-color: #ebeff3;
+    --ui-dark-bg-color: #d7dee3;
+    --ui-dark2-bg-color: var(--palette-neutral-400);
+    --text-color: var(--palette-neutral-950);
+    --primary-color-l90: var(--palette-primary-200);
+    --ui-select-bg: var(--palette-primary-600);
+    --ui-select-bg-dark: var(--palette-primary-700);
+    --ui-select-text-color: var(--palette-contrast-light);
+    --ui-table-bg-color: var(--ui-primary-bg-color);
+    --ui-table-bg-color2: var(--ui-medium-bg-color);
+    --input-width: 15em;
+    --button-border-disabled: #777;
+    --error-text-color-light: #fcc;
+    --error-text-color-dark: #800;
+    --error-border-color: #f00;
+    --error-bg: #faa;
+    --error-bg-translucent: #f002;
+    --error-bg-neutral: #fff;
+    --success-text-color-light: #bfb;
+    --success-text-color-dark: #b00;
+    --success-border-color: #0b0;
+    --success-bg: #beb;
+    --success-bg-translucent: #0f02;
+    --success-bg-neutral: #fff;
+    --icon-filter-hue: 205deg;
+    --icon-filter: brightness(1) opacity(.7) hue-rotate(var(--icon-filter-hue)) saturate(.75);
+    --icon-filter-active: var(--icon-filter);
+    --icon-filter-overlay: brightness(1) opacity(.25) hue-rotate(var(--icon-filter-hue)) saturate(.7);
+    --tooltip-background: #ffa;
+    --dd-btn-width: 1.5em;
+    --panel-bg: var(--panel-background);
+    --panel-padding: var(--space-md);
+    --toolbar-bg: var(--toolbar-background);
+    --toolbar-radius: var(--radius-md);
+    --sectionheader-bg: var(--section-header-background);
+    --sectionheader-shadow: var(--section-header-shadow);
+    --sectionheader-color: var(--section-header-color);
+    --tabline-bg: var(--tabline-background);
+    --tab-bg-active: var(--tab-active-background);
+    --cbx-o-border: var(--checkbox-box-border);
+    --cbx-border-radius: var(--ui-border-radius);
+    --spacing-small: var(--space-sm);
+    --spacing-medium: var(--space-md);
+    --noselect-user-select: none;
+    --noselect-cursor: default;
+
+  }
+}