@greendrake/theme 0.6.0 → 0.8.0

package/README.md

@@ -76,7 +76,7 @@ An app not on the dashboard palette defines the palette group itself: this packa
 
 ## Global spinner
 
-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).
+This package defines the `spinner` keyframes, `--spinner-size` (40px) and the `.spinner` / `body.spinner` rules, for components that show progress by toggling a `spinner` class and for `@greendrake/scss-kit`'s `img-spinner` mixin: a ring at the centre of the element, or of the viewport for `body`. They consume `--spinner-color` (palette) and `--spinner-side-color` (app). They are the `spinner` entry, which the root entry includes; an app not on this theme can `@use '@greendrake/theme/spinner'` alone, defining the two colours itself.
 
 ## Not included
 

package/_index.scss

@@ -1,5 +1,5 @@
 // This entry EMITS global CSS (the reset, base element styles, the :root
-// design tokens). It is the app-level base — `@use` it ONCE from the app's
+// design tokens, the spinner). It is the app-level base — `@use` it ONCE from the app's
 // main.scss. A component that needs only a mixin must `@use
 // '@greendrake/theme/mixins'` (side-effect-free); importing this module from a
 // per-component <style> re-emits the reset into a late stylesheet that
@@ -7,6 +7,7 @@
 @use '@greendrake/css-reset';
 @use '@greendrake/scss-kit' as kit;
 @use 'mixins';
+@use 'spinner';
 @forward 'mixins';
 
 :root {
@@ -49,11 +50,6 @@
     --error-color: #ff4800;
     --warning-color: #890095;
     --accent-color: #0aa13e;
-
-    // Single source of truth for spinner ring size — the default centred
-    // spinner shown at the middle of a loading UI. The small in-control variant
-    // overrides this (see button.spinner in form-controls).
-    --spinner-size: 40px;
 }
 
 body {
@@ -135,40 +131,3 @@ blockquote {
 [inert] {
     @include kit.disabled;
 }
-
-@keyframes spinner {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.spinner:not(.splash) {
-    position: relative;
-    &::before {
-        content: '';
-        box-sizing: border-box;
-        position: absolute;
-        border-radius: 50%;
-        z-index: kit.z('spinner');
-        border: 2px solid var(--spinner-color);
-        border-top-color: var(--spinner-side-color);
-        animation: spinner 0.6s linear infinite;
-        top: 50%;
-        left: 50%;
-        // Size from the single-source token, centred via negative
-        // half-margins. Applies to any host element — div, section, aside,
-        // ul — rather than a fixed list of them.
-        width: var(--spinner-size);
-        height: var(--spinner-size);
-        margin-top: calc(var(--spinner-size) / -2);
-        margin-left: calc(var(--spinner-size) / -2);
-    }
-}
-
-// Full-page spinner: pin to the viewport centre rather than the host element.
-// Size and centring come from the base rule above. body::before belongs to
-// this spinner alone — the page vignette hangs off html::before precisely so
-// the two can never share one pseudo-element (page-vignette in _mixins.scss).
-body:not(.splash).spinner::before {
-    position: fixed;
-}

package/_mixins.scss

@@ -35,7 +35,7 @@ $max-content-width: 850px;
 //
 // It hangs off <html>, not <body>: an element has exactly one ::before, and
 // body's belongs to the full-page loading spinner (`body.spinner::before`, see
-// _index.scss). Sharing it made the two fight — the spinner ring inherited the
+// spinner.scss). Sharing it made the two fight — the spinner ring inherited the
 // vignette's page-sized inset shadow, and the vignette vanished for the
 // duration of every page load. The canvas is html's job anyway; it already
 // carries the page background above.
@@ -78,8 +78,15 @@ $max-content-width: 850px;
 // colour of its own but a second copy of the page canvas on its own
 // viewport-anchored box, masked down to the strip the bar occupies: where it is
 // opaque it is indistinguishable from the page behind it, vignette falloff
-// included. Sits behind the bar's own content (z-index -1 inside the stacking
-// context the bar's z-index opens), so nothing about the bar's children moves.
+// included.
+//
+// Included on an element of its own: the bar's preceding sibling, at the bar's
+// z-index, so tree order paints it directly under the bar. Never the bar's own
+// ::before — a sticky bar is a stacking context, and a fixed layer inside it
+// lies beneath everything the bar holds. WebKit then composites any transformed
+// child overlapping that layer onto a layer of its own, rasterised at the
+// child's untransformed size, so a child scaled up (the header's parked brand
+// mark) is drawn as an upscaled bitmap.
 //
 // $edge is the viewport edge the bar is stuck to. The mask holds full opacity
 // for $solid from that edge — the band the bar's content occupies — then takes
@@ -95,15 +102,11 @@ $max-content-width: 850px;
     @if $edge == top {
         $away: bottom;
     }
-    &::before {
-        content: '';
-        position: fixed;
-        inset: 0;
-        z-index: -1;
-        pointer-events: none;
-        @include page-canvas;
-        mask-image: linear-gradient(to #{$away}, #000 #{$solid}, transparent calc(#{$solid} + #{$ramp}));
-    }
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    @include page-canvas;
+    mask-image: linear-gradient(to #{$away}, #000 #{$solid}, transparent calc(#{$solid} + #{$ramp}));
 }
 
 @mixin button-colors {
@@ -129,7 +132,6 @@ $max-content-width: 850px;
     color: #fff;
     border: 0;
     padding: 0;
-    cursor: pointer;
     line-height: $size;
     font-size: calc($size * 0.55);
     &:hover {

package/dashboard.scss

@@ -11,6 +11,7 @@
 
 :root {
     --border-radius: 4px;
+    --border-radius-pill: 999px;
     --icon-size: 18px;
     // Denser base than the document default: dashboards are dense,
     // information-first surfaces.
@@ -34,12 +35,22 @@ a:hover {
     color: var(--link-color-hover);
 }
 
-label {
+// Captions: a bare <label>, and a Field's caption, which is in its <label> or, for a
+// control a label cannot name, stands alone. A Field's <label> also wraps the control
+// itself, which keeps its own look.
+label,
+.Field__caption {
     font-size: var(--font-xs);
     font-weight: 500;
     opacity: 0.7;
 }
 
+.Field > label {
+    font-size: inherit;
+    font-weight: inherit;
+    opacity: 1;
+}
+
 // Headings read as panel/section dividers rather than page titles — every
 // dashboard panel opens with one, and detail views nest h2/h3 under it.
 h1,

package/editor-rows.scss

@@ -1,7 +1,8 @@
 // Opt-in record-editor/detail-pane layout: `@use '@greendrake/theme/editor-rows';`
 // (the dashboard preset pulls it in). `.EditorRows` is the padded scrolling
-// pane, `.EditorRows__row` a label/value line. The classes are independent:
-// a component whose root layout diverges may adopt the rows alone.
+// pane, `.EditorRows__row` a label/value line; `.EditorRows--dense` packs the
+// rows of a read-only pane tighter than an editor's. The classes are
+// independent: a component whose root layout diverges may adopt the rows alone.
 
 .EditorRows {
     padding: var(--space-4);
@@ -23,5 +24,28 @@
     }
     > div {
         flex-grow: 1;
+        min-width: 0;
+        word-break: break-word;
     }
 }
+
+.EditorRows--dense .EditorRows__row {
+    padding: var(--space-1) 0;
+}
+
+// A value too long or too literal for a line — an error trace, a raw body,
+// template data: monospace, wrapped, and scrolling within a bounded box.
+.EditorRows__pre {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    padding: var(--space-2);
+    background: var(--form-background);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    white-space: pre-wrap;
+    font-family: ui-monospace, monospace;
+    font-size: var(--font-xs);
+    max-height: 50vh;
+    overflow-y: auto;
+}

package/form-controls.scss

@@ -13,8 +13,8 @@ textarea {
     border: 1px solid var(--border-color);
 }
 
+// A button keeps the default cursor: the hand is a hyperlink's.
 button {
-    cursor: pointer;
     padding: var(--space-1) var(--space-4);
     &:hover:not(:disabled) {
         border-color: var(--border-color-hover);
@@ -22,7 +22,6 @@ button {
     }
     &:disabled {
         opacity: 0.5;
-        cursor: default;
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@greendrake/theme",
-    "version": "0.6.0",
+    "version": "0.8.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>",
@@ -39,6 +39,10 @@
         "./dashboard": {
             "sass": "./dashboard.scss",
             "default": "./dashboard.scss"
+        },
+        "./spinner": {
+            "sass": "./spinner.scss",
+            "default": "./spinner.scss"
         }
     },
     "files": [
@@ -47,17 +51,18 @@
         "dashboard-palette.scss",
         "form-controls.scss",
         "editor-rows.scss",
-        "dashboard.scss"
+        "dashboard.scss",
+        "spinner.scss"
     ],
     "publishConfig": {
         "access": "public"
     },
     "prettier": "@greendrake/dev-config/prettier",
     "dependencies": {
-        "@greendrake/css-reset": "0.6.0",
-        "@greendrake/scss-kit": "0.6.0"
+        "@greendrake/css-reset": "^0.7.0",
+        "@greendrake/scss-kit": "^0.8.0"
     },
     "devDependencies": {
-        "@greendrake/dev-config": "0.6.0"
+        "@greendrake/dev-config": "0.7.0"
     }
 }

package/spinner.scss

@@ -0,0 +1,49 @@
+// The spinner: a ring at the centre of whatever element has the `spinner` class while
+// what it shows is on its way, or of the viewport for <body>. This entry EMITS global
+// CSS. The root entry has it; an app not on this theme can `@use` it alone, defining
+// --spinner-color and --spinner-side-color itself.
+@use '@greendrake/scss-kit' as kit;
+
+:root {
+    // Single source of truth for spinner ring size — the default centred
+    // spinner shown at the middle of a loading UI. The small in-control variant
+    // overrides this (see button.spinner in form-controls).
+    --spinner-size: 40px;
+}
+
+@keyframes spinner {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.spinner:not(.splash) {
+    position: relative;
+    &::before {
+        content: '';
+        box-sizing: border-box;
+        position: absolute;
+        border-radius: 50%;
+        z-index: kit.z('spinner');
+        border: 2px solid var(--spinner-color);
+        border-top-color: var(--spinner-side-color);
+        animation: spinner 0.6s linear infinite;
+        top: 50%;
+        left: 50%;
+        // Size from the single-source token, centred via negative
+        // half-margins. Applies to any host element — div, section, aside,
+        // ul — rather than a fixed list of them.
+        width: var(--spinner-size);
+        height: var(--spinner-size);
+        margin-top: calc(var(--spinner-size) / -2);
+        margin-left: calc(var(--spinner-size) / -2);
+    }
+}
+
+// Full-page spinner: pin to the viewport centre rather than the host element.
+// Size and centring come from the base rule above. body::before belongs to
+// this spinner alone — the page vignette hangs off html::before precisely so
+// the two can never share one pseudo-element (page-vignette in _mixins.scss).
+body:not(.splash).spinner::before {
+    position: fixed;
+}