@greendrake/theme 0.7.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.

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.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@greendrake/theme",
-    "version": "0.7.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,15 +51,16 @@
         "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.7.0",
-        "@greendrake/scss-kit": "0.7.0"
+        "@greendrake/css-reset": "^0.7.0",
+        "@greendrake/scss-kit": "^0.8.0"
     },
     "devDependencies": {
         "@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;
+}