@capillaryjs/capillary-ui 1.1.0 → 1.3.0

package/themes/README.md

@@ -25,9 +25,11 @@ Published themes are:
 
 | Theme | Appearance capability | Intent |
 | --- | --- | --- |
-| `minimal` | Adaptive (`light`, `dark`, or system) | Restrained platform-oriented treatment |
-| `java` | Light | Desktop control treatment inspired by classic Java interfaces |
+| `capillary` | Light | Bright, compact card treatment with restrained elevation and palette-primary selection |
 | `shiny` | Light | Gloss, depth, and chromed graphical surfaces |
+| `soft` | Light | Soft, rounded treatment |
+| `white` | Light | Airy, rounded treatment |
+| `minimal` | Adaptive (`light`, `dark`, or system) | Restrained platform-oriented treatment |
 
 Custom properties are the primary instrument. A theme declares them on `:root`
 inside `@layer theme`, and `color-scheme` is the only ordinary property that
@@ -78,6 +80,11 @@ Themes still must not `@import`, must not declare `--palette-*` anchors, which
 belong to `colors/<name>/colors.css`, and must not restate a value already set
 by `base.css`.
 
+Theme chrome that establishes a surface, text, border, or fill must derive from
+the appropriate palette role or a shared UI role. Literal black and white may
+remain in translucent gloss and shadow overlays: those effects are deliberately
+neutral and must not tint the underlying palette-derived surface.
+
 `capillaryUiThemeVariableCatalog` is the machine-readable public contract. Its
 fallback chain runs from palette roles through global UI roles and shared
 families, then to optional component-specific roles. A small theme can

package/themes/base.css

@@ -10,9 +10,15 @@
       --palette-contrast-dark: var(--palette-dark);
       --palette-light-clear: color-mix(in srgb, var(--palette-light) 0%, transparent);
       --palette-light-faint: color-mix(in srgb, var(--palette-light) 8%, transparent);
-      --palette-red: #b3261e;
-      --palette-green: #287a3c;
+      /* Semantic status colors; distinct from the neutral tonal ramp below. */
+      --palette-status-negative: #b3261e;
+      --palette-status-positive: #287a3c;
+      --palette-status-neutral: #64748b;
       --palette-primary-500: #2989d8;
+      /* 0 removes primary hue from the three muted chrome surfaces; 1 retains
+         their calibrated palette tint. Palette files may choose a value in
+         this inclusive range without affecting the accent ramp. */
+      --palette-primary-surface-saturation: 1;
       --palette-secondary-500: #7137a8;
       --palette-neutral-500: #7892aa;
 
@@ -38,6 +44,20 @@
       --palette-primary-light: var(--palette-primary-200);
       --palette-primary-dark: var(--palette-primary-800);
 
+      /* Muted surface tones, separate from the potentially saturated accent ramp.
+         Desaturate the primary, then tint with the light endpoint in sRGB.
+         The rational weights/hue offsets preserve Ice blue's historical
+         #f5f7f8 / #ebeff3 / #d7dee3 exactly; see colors/README.md. */
+      --palette-primary-surface-light: color-mix(in srgb,
+        hsl(from var(--palette-primary-500) calc(h - 248 / 35) calc(s * 759 / 2975 * var(--palette-primary-surface-saturation)) l) calc(100% * 17 / 253),
+        var(--palette-light));
+      --palette-primary-surface-medium: color-mix(in srgb,
+        hsl(from var(--palette-primary-500) calc(h + 102 / 35) calc(s * 253 / 700 * var(--palette-primary-surface-saturation)) l) calc(100% * 32 / 253),
+        var(--palette-light));
+      --palette-primary-surface-dark: color-mix(in srgb,
+        hsl(from var(--palette-primary-500) calc(h - 73 / 35) calc(s * 759 / 2975 * var(--palette-primary-surface-saturation)) l) calc(100% * 68 / 253),
+        var(--palette-light));
+
       --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));
@@ -74,6 +94,8 @@
     --font-size: 12px;
     --line-height: normal;
     --control-min-height: 2em;
+    --control-row-min-height: 0px;
+    --control-row-padding-block: .25em;
     --space-xs: 0px;
     --space-sm: 6px;
     --space-md: 1rem;
@@ -91,9 +113,19 @@
     --ui-shadow: none;
     --focus-ring: 0 0 0 1px var(--ui-accent-color-highlight);
     --focus-color: var(--ui-accent-color);
-    --error-color: var(--palette-red, #b3261e);
+    --negative-color: var(--palette-status-negative, #b3261e);
+    --positive-color: var(--palette-status-positive, #287a3c);
+    --neutral-status-color: var(--palette-status-neutral, #64748b);
+    --error-color: var(--negative-color);
     --error-contrast: var(--palette-contrast-light, #fff);
-    --success-color: #080;
+    /* Error state needs a lightness and spatial signal as well as a hue. This
+     * stays distinguishable when a palette primary is also red. */
+    --error-control-border: color-mix(in oklch, var(--error-color) 76%, var(--palette-dark));
+    --error-control-underlay: color-mix(in srgb, var(--error-color) 20%, transparent);
+    --error-control-shadow: 0 0 0 3px var(--error-control-underlay);
+    --error-icon-border: none;
+    --error-icon-shadow: 0 1px 2px color-mix(in srgb, var(--palette-dark) 24%, transparent);
+    --success-color: var(--positive-color);
 
     /* Layout components */
     --panel-background: var(--palette-neutral-50);
@@ -102,8 +134,20 @@
     --panel-shadow: none;
     --panel-radius: var(--radius-md);
 
-    /* Explicit island modifier; non-island themes keep its layout neutral. */
+    /* Floating table-filter surface. It inherits ordinary panel chrome by
+     * default, while themes can make this compact elevated surface distinct. */
+    --filter-panel-background: var(--panel-background);
+    --filter-panel-color: var(--panel-color);
+    --filter-panel-border: var(--panel-border);
+    --filter-panel-shadow: var(--panel-shadow);
+    --filter-panel-radius: var(--panel-radius);
+    --filter-panel-padding: 8px;
+    --filter-panel-min-width: 180px;
+
+    /* Explicit surfaces; managed layouts own shared gutters and the perimeter. */
     --island-margin: 1rem;
+    --island-gap: 1rem;
+    --island-inset: var(--island-gap);
     --island-padding: 0;
     --island-background: var(--panel-background);
     --island-border: var(--panel-border);
@@ -138,6 +182,13 @@
     --section-header-border: var(--header-border);
     --section-header-shadow: var(--header-shadow);
     --section-header-font-size: 1rem;
+    --section-header-font-weight: bold;
+    --groupbox-section-header-color: var(--section-header-color);
+    --groupbox-section-separator: 1px solid var(--ui-border-color);
+    --groupbox-column-header-color: var(--ui-color);
+    --groupbox-column-separator: 1px solid var(--ui-border-color);
+    /* Inner GroupBox content rhythm is deliberately separate from island gutters. */
+    --groupbox-content-gap: 2px;
 
     --toolbar-background: var(--palette-neutral-100);
     --toolbar-color: var(--palette-neutral-950);
@@ -150,8 +201,17 @@
     --input-color: var(--text-color);
     --input-border: 1px solid #aaa;
     --input-shadow: none;
+    /* A missing required value is actionable but not yet a validation error. */
+    --required-color: var(--negative-color);
+    --required-indicator-background: transparent;
+    --required-indicator-color: var(--negative-color);
     --input-background-disabled: var(--ui-medium-bg-color);
     --input-color-disabled: #777;
+    /* Read-only values remain readable and focusable; they are not disabled. */
+    --input-background-readonly: var(--ui-primary-bg-color);
+    --input-color-readonly: var(--input-color);
+    --input-border-readonly: var(--input-border);
+    --input-shadow-readonly: var(--input-shadow);
     --dropdown-appearance: none;
     --dropdown-padding-inline-end: 1.75em;
     --dropdown-select-background: transparent;
@@ -160,20 +220,27 @@
     --dropdown-underlay-content: "";
     --dropdown-underlay-background: var(--input-background);
     --dropdown-underlay-background-disabled: var(--input-background-disabled);
+    --dropdown-underlay-background-readonly: var(--input-background-readonly);
     --dropdown-underlay-border: var(--input-border);
     --dropdown-underlay-border-disabled: var(--ui-input-border-disabled);
+    --dropdown-underlay-border-readonly: var(--input-border-readonly);
     --dropdown-underlay-shadow: var(--input-shadow);
+    --dropdown-underlay-shadow-readonly: var(--input-shadow-readonly);
     --dropdown-underlay-start-radius: var(--ui-border-radius);
     --dropdown-trigger-content: '\25BE';
     --dropdown-trigger-width: calc(var(--dd-btn-width) - 1px);
     --dropdown-trigger-color: var(--button-color);
+    --dropdown-trigger-color-readonly: var(--input-color-readonly);
     --dropdown-trigger-background: var(--button-background);
     --dropdown-trigger-background-hover: var(--button-background-hover);
     --dropdown-trigger-background-disabled: var(--button-background-disabled);
+    --dropdown-trigger-background-readonly: var(--input-background-readonly);
     --dropdown-trigger-border: var(--button-border);
     --dropdown-trigger-border-disabled: var(--button-border-disabled);
+    --dropdown-trigger-border-readonly: var(--input-border-readonly);
     --dropdown-trigger-end-radius: var(--ui-border-radius);
     --dropdown-trigger-shadow: var(--button-shadow);
+    --dropdown-trigger-shadow-readonly: var(--input-shadow-readonly);
     --dropdown-trigger-shadow-hover: var(--button-shadow);
 
     /* Action components */
@@ -192,18 +259,46 @@
     --selection-background: var(--palette-primary);
     --selection-color: var(--palette-contrast-light);
     --checkbox-box-background: var(--input-background);
+    --checkbox-box-background-readonly: var(--input-background-readonly);
     --checkbox-box-background-checked: var(--selection-background);
     --checkbox-box-border: var(--input-border);
+    --checkbox-box-border-readonly: var(--input-border-readonly);
+    --checkbox-box-border-checked: var(--checkbox-box-border);
+    --checkbox-box-size: 1em;
+    --checkbox-box-radius: var(--radius-sm);
     --checkbox-box-shadow: none;
+    --checkbox-box-shadow-readonly: var(--input-shadow-readonly);
     --checkbox-box-shadow-checked: var(--checkbox-box-shadow);
     --checkbox-symbol-color: var(--selection-color);
+    --checkbox-negative-background: var(--palette-status-negative);
+    --checkbox-negative-color: var(--palette-contrast-light);
+    --checkbox-negative-border: var(--checkbox-box-border-checked);
+    --checkbox-negative-shadow: var(--checkbox-box-shadow-checked);
+    --checkbox-positive-background: var(--palette-status-positive);
+    --checkbox-positive-color: var(--palette-contrast-light);
+    --checkbox-positive-border: var(--checkbox-box-border-checked);
+    --checkbox-positive-shadow: var(--checkbox-box-shadow-checked);
+    --checkbox-neutral-background: var(--palette-status-neutral);
+    --checkbox-neutral-color: var(--palette-contrast-light);
+    --checkbox-neutral-border: var(--checkbox-box-border-checked);
+    --checkbox-neutral-shadow: var(--checkbox-box-shadow-checked);
+    --radio-box-background-checked: var(--checkbox-box-background-checked);
+    --radio-box-border-checked: var(--checkbox-box-border-checked);
+    --radio-box-shadow-checked: var(--checkbox-box-shadow-checked);
+    --radio-symbol-color: var(--checkbox-symbol-color);
+    --radio-symbol-size: .4em;
+    --radio-group-gap: 0px;
     --checkable-label-color-disabled: #aaa;
+    --checkable-label-color-readonly: var(--input-color-readonly);
     --toggle-button-background: var(--button-background);
+    --toggle-button-background-readonly: var(--input-background-readonly);
     --toggle-button-background-checked: var(--palette-primary-700);
     --toggle-button-border-checked: var(--button-border);
+    --toggle-button-border-readonly: var(--input-border-readonly);
     --toggle-button-selected-inline-overlap: 0;
     --toggle-button-selected-z-index: 0;
     --toggle-button-shadow: none;
+    --toggle-button-shadow-readonly: none;
     --toggle-button-shadow-checked: none;
     --toggle-group-shadow: none;
     --toggle-inactive-shared-border-color: var(--palette-neutral-500);
@@ -280,6 +375,7 @@
     --ui-padding: 8px;
     --ui-padding-h: 8px;
     --ui-padding-v: 0px;
+    --ui-control-padding: 0 5px;
     --ui-margin: 1px;
     --ui-border-radius: 3px;
     --ui-text-color: var(--ui-color);
@@ -294,9 +390,9 @@
     --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-primary-bg-color: var(--palette-primary-surface-light);
+    --ui-medium-bg-color: var(--palette-primary-surface-medium);
+    --ui-dark-bg-color: var(--palette-primary-surface-dark);
     --ui-dark2-bg-color: var(--palette-neutral-400);
     --text-color: var(--palette-neutral-950);
     --primary-color-l90: var(--palette-primary-200);
@@ -308,17 +404,17 @@
     --input-width: 15em;
     --groupbox-preferred-width: 15rem;
     --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-text-color-light: color-mix(in oklch, var(--negative-color) 24%, var(--palette-light));
+    --error-text-color-dark: color-mix(in oklch, var(--negative-color) 58%, var(--palette-dark));
+    --error-border-color: var(--negative-color);
+    --error-bg: color-mix(in oklch, var(--negative-color) 32%, var(--palette-light));
+    --error-bg-translucent: color-mix(in srgb, var(--negative-color) 13%, transparent);
     --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-text-color-light: color-mix(in oklch, var(--positive-color) 24%, var(--palette-light));
+    --success-text-color-dark: color-mix(in oklch, var(--positive-color) 58%, var(--palette-dark));
+    --success-border-color: var(--positive-color);
+    --success-bg: color-mix(in oklch, var(--positive-color) 32%, var(--palette-light));
+    --success-bg-translucent: color-mix(in srgb, var(--positive-color) 13%, transparent);
     --success-bg-neutral: #fff;
     --icon-filter-hue: 205deg;
     --icon-filter: brightness(1) opacity(.7) hue-rotate(var(--icon-filter-hue)) saturate(.75);

package/themes/capillary/theme.css

@@ -0,0 +1,300 @@
+@charset "utf-8";
+
+/* The restrained, card-oriented Capillary treatment. */
+@layer theme {
+  :root {
+    color-scheme: only light;
+    --ui-control-padding: 6px 5px;
+    --control-row-padding-block: 0em;
+    /* Reserve one row for the roomiest native temporal body without changing
+     * the theme's painted input, button, checkbox or radio geometry. */
+    --control-row-min-height: 2.75em;
+    --font-family: Arial, Helvetica, sans-serif;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 18px;
+    --ui-border-radius: 9px;
+    --application-background: color-mix(in oklch, var(--palette-neutral-100) 52%, var(--palette-light));
+    --ui-background: color-mix(in oklch, var(--palette-neutral-100) 34%, var(--palette-light));
+    --ui-color: var(--palette-neutral-900);
+    --ui-border: 1px solid color-mix(in srgb, var(--palette-dark) 16%, var(--palette-light));
+    --ui-shadow: 0 0.4rem 1.25rem color-mix(in srgb, var(--palette-dark) 12%, transparent);
+    --focus-ring: 0 0 0 2px color-mix(in oklch, var(--palette-primary) 36%, var(--palette-light));
+    --focus-color: var(--palette-primary);
+    --panel-background: linear-gradient(to bottom, #fafafa, #eee);
+    --panel-color: var(--ui-color);
+    --panel-border: 1px solid color-mix(in srgb, var(--palette-dark) 15%, var(--palette-light));
+    --panel-shadow:
+      inset 0 1px 0 color-mix(in srgb, var(--palette-light) 96%, transparent),
+      inset 0 -1px 0 color-mix(in srgb, var(--palette-dark) 8%, transparent),
+      0 0.125rem 0.4rem color-mix(in srgb, var(--palette-dark) 10%, transparent);
+    --panel-radius: var(--radius-lg);
+    --filter-panel-radius: var(--radius-md);
+    --filter-panel-padding: 0.65rem 0.75rem;
+    --filter-panel-shadow:
+      inset 0 1px 0 color-mix(in srgb, var(--palette-light) 96%, transparent),
+      inset 0 -1px 0 color-mix(in srgb, var(--palette-dark) 8%, transparent),
+      0 0.3rem 0.85rem color-mix(in srgb, var(--palette-dark) 16%, transparent);
+    --island-padding: .5rem;
+    --header-background: transparent;
+    --header-color: var(--palette-primary-500);
+    --section-header-background: transparent;
+    --section-header-color: var(--palette-primary-500);
+    --section-header-font-size: 1.2rem;
+    --section-header-font-weight: 700;
+
+    --groupbox-section-font-size: 1.05rem;
+    --groupbox-section-header-color: var(--palette-primary-500);
+    --groupbox-section-separator: 0 solid transparent;
+    --groupbox-column-separator: 1px solid color-mix(in srgb, var(--palette-dark) 13%, var(--palette-light));
+    --groupbox-content-gap: 0rem;
+
+    --toolbar-background: unset;
+    --toolbar-color: var(--ui-color);
+    --toolbar-border: unset;
+    --toolbar-shadow: unset;
+
+    --input-background: #fefefe;
+    --input-color: var(--ui-color);
+    --input-border: 1px solid color-mix(in srgb, var(--palette-dark) 18%, var(--palette-light));
+    --input-shadow: inset 0 1px 1px color-mix(in srgb, var(--palette-dark) 8%, transparent), 0 1px 2px color-mix(in srgb, var(--palette-dark) 7%, transparent);
+    --input-background-disabled: var(--palette-neutral-100);
+    --input-color-disabled: var(--palette-neutral-500);
+    /* Keep the dropdown chevron on the input surface rather than making it a
+     * second, button-like segment. */
+    --dropdown-trigger-width: 1.75em;
+    --dropdown-trigger-color: color-mix(in srgb, var(--palette-dark) 58%, var(--palette-light));
+    --dropdown-trigger-background: transparent;
+    --dropdown-trigger-background-hover: transparent;
+    --dropdown-trigger-background-disabled: transparent;
+    --dropdown-trigger-border: 0 solid transparent;
+    --dropdown-trigger-border-disabled: 0 solid transparent;
+    --dropdown-trigger-shadow: none;
+    --dropdown-trigger-shadow-hover: none;
+    --button-background: linear-gradient(to bottom, var(--palette-light), color-mix(in srgb, var(--palette-dark) 5%, var(--palette-light)));
+    --button-background-hover: linear-gradient(to bottom, var(--palette-light), color-mix(in srgb, var(--palette-dark) 9%, var(--palette-light)));
+    --capillary-active-background: radial-gradient(120% 85% at 40% 5%, #fff7, #fff0 55%), linear-gradient(to bottom, var(--palette-primary-700), var(--palette-primary) 62%, var(--palette-primary-400));
+    --capillary-active-border: 1px solid color-mix(in srgb, var(--palette-primary-700) 72%, var(--palette-dark));
+    --capillary-active-shadow: inset 0 1px 0 #fff4, inset 0 -1px 0 color-mix(in srgb, var(--palette-primary-700) 38%, transparent), 0 1px 2px color-mix(in srgb, var(--palette-dark) 14%, transparent);
+    --button-background-active: var(--capillary-active-background);
+    --button-background-disabled: var(--palette-neutral-100);
+    --button-color: var(--ui-color);
+    --button-border: 1px solid color-mix(in srgb, var(--palette-dark) 18%, var(--palette-light));
+    --button-border-disabled: 1px solid color-mix(in srgb, var(--palette-dark) 9%, var(--palette-light));
+    --button-shadow: 0 1px 2px color-mix(in srgb, var(--palette-dark) 12%, transparent);
+    --button-shadow-active: var(--capillary-active-shadow);
+    --checkbox-box-background: var(--palette-light);
+    --checkbox-box-background-checked: var(--capillary-active-background);
+    --checkbox-box-border-checked: var(--palette-primary-500);
+    --checkbox-box-radius: 3px;
+    --checkbox-box-size: 1rem;
+    --checkbox-box-shadow: var(--input-shadow);
+    --checkbox-box-shadow-checked: var(--capillary-active-shadow);
+    --checkbox-negative-background: radial-gradient(120% 85% at 40% 5%, #fff6, #fff0 55%), linear-gradient(to bottom, color-mix(in srgb, var(--palette-status-negative) 84%, var(--palette-dark)), var(--palette-status-negative));
+    --checkbox-negative-border: 1px solid color-mix(in srgb, var(--palette-status-negative) 72%, var(--palette-dark));
+    --checkbox-negative-shadow: inset 0 1px 0 #fff4, inset 0 -1px 0 color-mix(in srgb, var(--palette-status-negative) 38%, transparent), 0 1px 2px color-mix(in srgb, var(--palette-dark) 14%, transparent);
+    --checkbox-positive-background: radial-gradient(120% 85% at 40% 5%, #fff6, #fff0 55%), linear-gradient(to bottom, color-mix(in srgb, var(--palette-status-positive) 84%, var(--palette-dark)), var(--palette-status-positive));
+    --checkbox-positive-border: 1px solid color-mix(in srgb, var(--palette-status-positive) 72%, var(--palette-dark));
+    --checkbox-positive-shadow: inset 0 1px 0 #fff4, inset 0 -1px 0 color-mix(in srgb, var(--palette-status-positive) 38%, transparent), 0 1px 2px color-mix(in srgb, var(--palette-dark) 14%, transparent);
+    --checkbox-neutral-background: radial-gradient(120% 85% at 40% 5%, #fff6, #fff0 55%), linear-gradient(to bottom, color-mix(in srgb, var(--palette-status-neutral) 84%, var(--palette-dark)), var(--palette-status-neutral));
+    --checkbox-neutral-border: 1px solid color-mix(in srgb, var(--palette-status-neutral) 72%, var(--palette-dark));
+    --checkbox-neutral-shadow: inset 0 1px 0 #fff4, inset 0 -1px 0 color-mix(in srgb, var(--palette-status-neutral) 38%, transparent), 0 1px 2px color-mix(in srgb, var(--palette-dark) 14%, transparent);
+    --radio-box-background-checked: var(--checkbox-box-background);
+    --radio-box-border-checked: 1px solid var(--palette-primary);
+    --radio-box-shadow-checked: var(--checkbox-box-shadow);
+    --radio-symbol-color: var(--palette-primary);
+    --radio-symbol-size: 0.5em;
+
+    --toggle-button-background-checked: var(--capillary-active-background);
+    --toggle-button-border-checked: var(--palette-primary-50);
+    --toggle-button-selected-inline-overlap: -1px;
+    --toggle-button-selected-z-index: 1;
+    --toggle-button-shadow-checked: var(--capillary-active-shadow);
+    --toggle-group-shadow: var(--button-shadow);
+    --toggle-inactive-shared-border-color: transparent;
+    --toggle-inactive-separator-background: #ddd;
+    --toggle-inactive-separator-block-inset: 0.35rem;
+
+    --tabline-background: transparent;
+    --tab-active-background: var(--palette-light);
+    --tab-button-background: color-mix(in oklch, var(--palette-light) 78%, var(--ui-primary-bg-color));
+    --tab-button-background-active: var(--palette-light);
+    --tab-button-shadow: none;
+    --tab-button-shadow-active: 0 -1px 0 var(--palette-primary), var(--button-shadow);
+    --table-header-background: color-mix(in oklch, var(--palette-light) 74%, var(--ui-primary-bg-color));
+    --table-header-color: var(--ui-color);
+    --table-row-background: var(--palette-light);
+    --table-row-alt-background: color-mix(in oklch, var(--palette-light) 78%, var(--ui-primary-bg-color));
+    --row-hover-background: color-mix(in oklch, var(--palette-primary-100) 45%, var(--palette-light));
+    --navigation-bar-background: unset;
+    --navigation-bar-border: unset;
+    --navigation-bar-shadow: unset;
+    --navigation-link-color: var(--ui-color);
+    --navigation-link-color-hover: var(--palette-primary-700);
+    --navigation-link-color-active: var(--palette-contrast-light);
+    --navigation-link-color-current: var(--palette-contrast-light);
+    --navigation-link-background-hover: color-mix(in oklch, var(--palette-primary-100) 54%, var(--palette-light));
+    --navigation-link-background-active: var(--palette-primary);
+    --navigation-link-background-current: var(--palette-primary);
+    --progress-track-background: color-mix(in oklch, var(--palette-light) 58%, var(--ui-dark-bg-color));
+    --progress-track-color: var(--ui-color);
+    --progress-track-shadow: inset 0 1px 2px color-mix(in oklch, var(--palette-dark) 12%, transparent);
+    --progress-value-background: linear-gradient(to bottom, var(--palette-primary-400), var(--palette-primary));
+    --progress-value-shadow: inset 0 1px 1px color-mix(in oklch, var(--palette-light) 35%, transparent);
+    --colored-shadow:
+      inset 0 1px 0 color-mix(in srgb, var(--palette-light) 52%, transparent),
+      inset 0 -1px 0 color-mix(in srgb, var(--c1, var(--colored-dark)) 42%, transparent),
+      0 0.125rem 0.3rem color-mix(in srgb, var(--palette-dark) 16%, transparent);
+    --block-graph-block-border: 1px solid color-mix(in srgb,
+      var(--c1, var(--colored-dark)) 68%, var(--palette-light));
+    --block-graph-block-radius: var(--radius-sm);
+  }
+}
+
+cap-button > button[aria-pressed="true"] {
+  color: var(--palette-contrast-light);
+  background: var(--button-background-active);
+  border-color: var(--palette-primary);
+}
+
+cap-button > button:active:not(:disabled, [aria-disabled="true"]) {
+  color: var(--palette-contrast-light);
+}
+
+/* The shared select shell normally divides the underlay and trigger. Capillary
+ * uses one continuous input surface; the chevron is only an overlay. */
+cap-dropdown > cap-selectshell::after {
+  border-radius: var(--ui-border-radius);
+}
+
+/* Section GroupBoxes form the first-level card hierarchy. Nested control
+ * GroupBoxes stay flat so their separators continue to organize the card body. */
+cap-groupbox.cap-groupbox-section:not(cap-groupbox cap-groupbox) {
+  padding: 0.75rem 1rem 0;
+  border: var(--panel-border);
+  border-radius: var(--radius-lg);
+  background: var(--panel-background);
+  box-shadow: var(--panel-shadow);
+}
+
+
+:root {
+  --application-background:
+
+
+    /*
+          * Fold 1:
+          * tall fold rising from lower-left toward upper-middle
+          */
+          radial-gradient(
+                  130% 185% at 145% 118%,
+                  rgb(255 255 255 / 0.00) 0%,
+                  rgb(255 255 255 / 0.02) 18%,
+                  rgb(255 255 255 / 0.05) 32%,
+                  rgb(255 255 255 / 0.09) 44%,
+                  rgb(255 255 255 / 0.14) 52%,
+                  rgb(255 255 255 / 0.20) calc(58% - 2px),
+                  rgb(255 255 255 / 0.96) calc(58% - 1px),
+                  rgb(255 255 255 / 0.99) 58%,
+                  rgb(255 255 255 / 0.00) calc(58% + 2px)
+          ),
+
+          radial-gradient(
+                  160% 115% at 95% 118%,
+                  rgb(255 255 255 / 0.00) 0%,
+                  rgb(255 255 255 / 0.02) 18%,
+                  rgb(255 255 255 / 0.05) 32%,
+                  rgb(255 255 255 / 0.09) 44%,
+                  rgb(255 255 255 / 0.14) 52%,
+                  rgb(255 255 255 / 0.20) calc(58% - 2px),
+                  rgb(255 255 255 / 0.96) calc(58% - 1px),
+                  rgb(255 255 255 / 0.99) 58%,
+                  rgb(255 255 255 / 0.00) calc(58% + 2px)
+          ),
+
+
+            /*
+             * Fold 2:
+             * broad sweep across the lower-middle
+             */
+          radial-gradient(
+                  130% 210% at -48% 82%,
+                  rgb(255 255 255 / 0.00) 0%,
+                  rgb(255 255 255 / 0.02) 24%,
+                  rgb(255 255 255 / 0.05) 40%,
+                  rgb(255 255 255 / 0.09) 52%,
+                  rgb(255 255 255 / 0.14) 60%,
+                  rgb(255 255 255 / 0.20) calc(66% - 2px),
+                  rgb(255 255 255 / 0.82) calc(66% - 1px),
+                  rgb(255 255 255 / 0.88) 66%,
+                  rgb(255 255 255 / 0.00) calc(66% + 2px)
+          ),
+
+            /*
+             * Fold 3:
+             * subtle top-right fold
+             */
+          radial-gradient(
+                  125% 155% at 138% -28%,
+                  rgb(255 255 255 / 0.00) 0%,
+                  rgb(255 255 255 / 0.01) 24%,
+                  rgb(255 255 255 / 0.03) 38%,
+                  rgb(255 255 255 / 0.07) 48%,
+                  rgb(255 255 255 / 0.12) 54%,
+                  rgb(255 255 255 / 0.20) calc(57% - 2px),
+                  rgb(255 255 255 / 0.55) calc(57% - 1px),
+                  rgb(255 255 255 / 0.62) 57%,
+                  rgb(255 255 255 / 0.00) calc(57% + 2px)
+          ),
+
+
+          radial-gradient(
+                  125% 155% at 0% -25%,
+                  rgb(255 255 255 / 0.00) 0%,
+                  rgb(255 255 255 / 0.01) 24%,
+                  rgb(255 255 255 / 0.03) 38%,
+                  rgb(255 255 255 / 0.07) 48%,
+                  rgb(255 255 255 / 0.12) 54%,
+                  rgb(255 255 255 / 0.20) calc(57% - 2px),
+                  rgb(255 255 255 / 0.55) calc(57% - 1px),
+                  rgb(255 255 255 / 0.62) 57%,
+                  rgb(255 255 255 / 0.00) calc(57% + 2px)
+          ),
+
+            /*
+             * very subtle overall lighting
+             */
+          linear-gradient(
+                  135deg,
+                  rgb(255 255 255 / 0.06) 0%,
+                  transparent 42%,
+                  rgb(0 0 0 / 0.025) 100%
+          ),
+
+          #cfcfcf;
+
+  background-attachment: local;
+}
+
+html {
+    min-height: 100vh;
+    height: 100%;
+}
+
+body {
+    background: var(--application-background) no-repeat;
+    min-height: 100vh;
+    height: 100%;
+}
+
+cap-app {
+    background: none;
+}
+
+cap-listview,
+cap-treeview,
+cap-datatable {
+    border: var(--input-border);
+    box-shadow: var(--input-shadow);
+    border-radius: var(--ui-border-radius);
+}