@greendrake/theme 0.3.0 → 0.4.0

package/README.md

@@ -26,20 +26,20 @@ Design tokens, document-level element styling (links, lists, quotes, body defaul
 
 Mixins exported by the root entry: `light-dark($light, $dark)`, `button-colors`, `overlay-icon-button($size)`, `wider-than-max-content` (plus `$max-content-width`). Framework-free SCSS primitives (breakpoints, z-layers, icon masks, font-face generation) live below this package in `@greendrake/scss-kit`.
 
-## CSS custom property contract
+## CSS custom properties
 
-`@greendrake/ui` components render correctly only when the custom properties below are defined. This package's two entries cover part of the contract; the rest is the consuming app's responsibility (typically set in its palette maps or `:root`).
+What this package's two entries define, and what its own rules and mixins read from the app. Components styled against custom properties of their own list them in their own packages; an app on this theme defines whichever of those it leaves open (typically in its palette maps or `:root`).
 
 ### Defined by `@greendrake/theme` (root entry)
 
 | Property | Value | Notes |
 | --- | --- | --- |
-| `--space-1` … `--space-6` | 4/8/12/16/24/28px | spacing scale; `--space-1`…`--space-4` are read by ui components |
-| `--font-xs` … `--font-2xl` | 11/13/16/20/24/32px | font-size scale; `--font-xs` and `--font-md` are read by ui components |
+| `--space-1` … `--space-6` | 4/8/12/16/24/28px | spacing scale |
+| `--font-xs` … `--font-2xl` | 11/13/16/20/24/32px | font-size scale |
 | `--overlay-button-bg`, `--overlay-button-bg-hover` | `rgb(0 0 0 / 60%)`, `rgb(0 0 0 / 85%)` | consumed by the `overlay-icon-button` mixin |
-| `--error-color` | `#ff4800` | semantic status color for app styling (not read by ui components) |
-| `--warning-color` | `#890095` | semantic status color for app styling (not read by ui components) |
-| `--accent-color` | `#0aa13e` | read by ui components (checkboxes, highlights) |
+| `--error-color` | `#ff4800` | semantic status colour |
+| `--warning-color` | `#890095` | semantic status colour |
+| `--accent-color` | `#0aa13e` | accent for active and checked states |
 
 ### Defined by `@greendrake/theme/dashboard-palette` (opt-in, light and dark values)
 
@@ -57,36 +57,27 @@ Mixins exported by the root entry: `light-dark($light, $dark)`, `button-colors`,
 | `--spinner-color` | `#ccc` | `#ccc` |
 | `--page-background` | `#e6e6e6` | `#202020` |
 | `--page-vignette-color` | `#cdcdcd` | `#0c0c0c` |
+| `--modal-background`, `--modal-border-radius` | `var(--background-color)`, `var(--border-radius)` | same |
+| `--modal-box-shadow`, `--modal-backdrop-filter`, `--modal-window-backdrop-filter` | a light glow, `brightness(0.4)`, `blur(8px)` | same |
 
-The `--page-*` pair feeds the `page-vignette` mixin (a flat canvas tone with a box-shadow edge falloff — deliberately not a radial gradient, whose page-sized form Firefox can mis-render as a bright dot at its centre). The dashboard preset emits it; an app on a palette of its own defines the pair and includes the mixin itself.
+The `--page-*` pair feeds the `page-vignette` mixin (a flat canvas tone with a box-shadow edge falloff — deliberately not a radial gradient, whose page-sized form Firefox can mis-render as a bright dot at its centre). The dashboard preset emits it; an app on a palette of its own defines the pair and includes the mixin itself. The `--modal-*` group is the dashboard look's modal chrome: a dark-glass window over a dimmed backdrop.
 
-Apps not using the dashboard palette must define at least the `--font-color`/`--background-color`/`--form-background*`/`--border-color*`/`--spinner-color` group themselves — ui components read them with no fallback.
+An app not on the dashboard palette defines the palette group itself: this package's own rules read `--font-color`, `--background-color`, `--form-background*`, `--border-color*`, `--link-color-hover` and `--spinner-color` with no fallback.
 
 ### Required from the consuming app (defined by neither entry, read with no fallback)
 
 | Property | Read by |
 | --- | --- |
-| `--border-radius` | form controls, modals, tables, `overlay-icon-button` |
-| `--icon-size` | `@greendrake/scss-kit` `icon` mixin, icon-bearing ui components |
-| `--input-background` | text inputs |
-| `--line-height-normal` | text layout in ui components |
-| `--modal-background` | modal window |
-| `--modal-border-radius` | modal window |
-| `--spinner-side-color` | global `.spinner` rule, `img-spinner` mixin (typically `var(--form-background)`) |
-| `--link-color` | document link styling in this package |
-| `--blockquote-colour` | blockquote styling in this package |
+| `--border-radius` | form-control styling, `overlay-icon-button` |
+| `--spinner-side-color` | global `.spinner` rule (typically `var(--form-background)`) |
+| `--link-color` | document link styling |
+| `--blockquote-colour` | blockquote styling |
 | `--button-background` | `button-colors` mixin |
 
-### Optional (ui components read them with a fallback)
+## Global spinner
 
-`--cell-padding`, `--circular-progress-arc`, `--circular-progress-label`, `--circular-progress-track`, `--list-row-padding`, `--modal-backdrop-filter`, `--modal-box-shadow`, `--modal-button-min-width`, `--modal-max-width`, `--modal-window-backdrop-filter`, `--row-border-bottom`, `--row-select-color`, `--row-select-color-hover`, `--tree-line-color`.
-
-Component-scoped properties with local defaults (`--checkbox-size`, `--switch-width`, `--switch-height`, `--switch-knob`) are documented per component in `@greendrake/ui`.
-
-## Global spinner contract
-
-This package defines the `spinner` keyframes and the `.spinner` / `body.spinner` / `div.spinner` rules that `@greendrake/ui`'s async controls and `@greendrake/scss-kit`'s `img-spinner` mixin rely on. They consume `--spinner-color` (palette) and `--spinner-side-color` (app).
+This package defines the `spinner` keyframes and the `.spinner` / `body.spinner` / `div.spinner` rules, for components that show progress by toggling a `spinner` class and for `@greendrake/scss-kit`'s `img-spinner` mixin. They consume `--spinner-color` (palette) and `--spinner-side-color` (app).
 
 ## Not included
 
-Tooltip (tippy) skin and select-control skin ship with the components that need them in `@greendrake/ui`; this package styles only plain document elements.
+Component skins (tooltips, select controls) ship with the components that need them; this package styles only plain document elements.

package/_index.scss

@@ -10,8 +10,8 @@
 @forward 'mixins';
 
 :root {
-    // Feeds ui's TheWrap width cap; single-sourced from the SCSS constant the
-    // wider-than-max-content mixin also uses.
+    // The content width cap for layout wrappers; single-sourced from the SCSS
+    // constant the wider-than-max-content mixin also uses.
     --max-content-width: #{mixins.$max-content-width};
     --space-1: 4px;
     --space-2: 8px;

package/dashboard-palette.scss

@@ -33,8 +33,8 @@
     )
 );
 
-// Modal chrome vars consumed by @greendrake/ui's Modal — part of the default
-// dashboard look (the dark-glass window over a dimmed backdrop).
+// Modal chrome — part of the default dashboard look (the dark-glass window
+// over a dimmed backdrop).
 :root {
     --modal-background: var(--background-color);
     --modal-box-shadow: rgba(255, 255, 255, 0.5) 0px 4px 25px;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@greendrake/theme",
-    "version": "0.3.0",
+    "version": "0.4.0",
     "description": "Design tokens, document-level element styling, a light/dark theming mixin and an opt-in dashboard palette",
     "license": "MIT",
     "author": "Eugene Greendrake <eugene@greendrake.nz>",
@@ -54,10 +54,10 @@
     },
     "prettier": "@greendrake/dev-config/prettier",
     "dependencies": {
-        "@greendrake/css-reset": "0.3.0",
-        "@greendrake/scss-kit": "0.3.0"
+        "@greendrake/css-reset": "0.4.0",
+        "@greendrake/scss-kit": "0.4.0"
     },
     "devDependencies": {
-        "@greendrake/dev-config": "0.3.0"
+        "@greendrake/dev-config": "0.4.0"
     }
 }