@greendrake/theme 0.6.0 → 0.7.0

package/_mixins.scss

@@ -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

@@ -34,12 +34,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.7.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.6.0",
-        "@greendrake/scss-kit": "0.6.0"
+        "@greendrake/css-reset": "0.7.0",
+        "@greendrake/scss-kit": "0.7.0"
     },
     "devDependencies": {
-        "@greendrake/dev-config": "0.6.0"
+        "@greendrake/dev-config": "0.7.0"
     }
 }