@dillingerstaffing/strand-ui 0.7.0 → 0.8.0

package/HTML_REFERENCE.md

@@ -834,3 +834,34 @@ All container components (Grid, Stack, Card, Container) enforce boundary integri
 > **Keyboard navigation:** Tab/Shift+Tab reaches all interactive elements. Arrow keys navigate within Tabs and menus (requires JavaScript). Escape closes overlays. Enter/Space activates buttons. Dialog must trap focus. See [DL L1197-1204](./DESIGN_LANGUAGE.md#L1197).
 
 > **Motion anti-patterns (never do):** Never re-animate on viewport exit/re-enter. Never hijack scroll. Never animate width/height/margin/padding (use transform). Never use bounce/elastic easing. Never animate more than 3-4 elements simultaneously. Never use parallax on text. See [DL L671-680](./DESIGN_LANGUAGE.md#L671).
+
+---
+
+## Utility Classes
+
+### Overline
+
+```html
+<span class="strand-overline">Specimen Label</span>
+```
+
+The monospace uppercase tracked label pattern. Used for section labels, category headers, and data annotations.
+
+> **DL foundation:** This is the laboratory specimen label pattern from [DL Part IV.5 (L386-L396)](./DESIGN_LANGUAGE.md#L386).
+
+### Headline
+
+```html
+<div class="strand-headline strand-headline--xl">STRAND</div>
+<h2 class="strand-headline strand-headline--lg">Section Title</h2>
+```
+
+**Sizes:** `--xl` (hero, fluid 2.5rem-5rem) | `--lg` (section, fluid 1.5rem-2.5rem)
+
+### Lead
+
+```html
+<p class="strand-lead">Design tokens + UI components. Zero-runtime CSS. Ship faster.</p>
+```
+
+Intro paragraph. Max 50 characters per line. Used after headlines.

package/dist/css/strand-ui.css

@@ -313,21 +313,21 @@
 
 /* ── Sizes ── */
 .strand-btn--sm {
-  padding: var(--strand-space-1) var(--strand-space-3);
+  padding: var(--strand-space-2) var(--strand-space-5);
   font-size: var(--strand-text-sm);
   min-height: var(--strand-touch-target);
 }
 
 .strand-btn--md {
-  padding: calc(var(--strand-space-2) + var(--strand-space-1) / 2) var(--strand-space-5);
+  padding: var(--strand-space-3) var(--strand-space-8);
   font-size: var(--strand-text-sm);
   min-height: var(--strand-touch-target);
 }
 
 .strand-btn--lg {
-  padding: var(--strand-space-3) var(--strand-space-6);
+  padding: var(--strand-space-3) var(--strand-space-10);
   font-size: var(--strand-text-base);
-  min-height: 48px;
+  min-height: var(--strand-touch-target);
 }
 
 /* ── Icon-only ── */
@@ -353,18 +353,18 @@
 
 /* ── Primary variant ── */
 .strand-btn--primary {
-  background: var(--strand-blue-primary);
-  color: var(--strand-on-blue-primary);
+  background: var(--strand-blue-deep);
+  color: var(--strand-on-blue-deep);
 }
 
 .strand-btn--primary:hover:not(:disabled) {
-  background: var(--strand-blue-vivid);
+  background: var(--strand-blue-midnight);
   transform: translateY(-1px);
   box-shadow: var(--strand-hover-shadow-primary);
 }
 
 .strand-btn--primary:active:not(:disabled) {
-  background: var(--strand-blue-deep);
+  background: var(--strand-blue-abyss);
 }
 
 /* ── Secondary variant ── */
@@ -672,7 +672,7 @@
   line-height: var(--strand-leading-relaxed);
   color: var(--strand-blue-midnight);
   background: var(--strand-surface-recessed);
-  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06); /* strand-blue-abyss at 6% opacity */
+  box-shadow: var(--strand-shadow-inset);
   border-radius: var(--strand-radius-lg);
   padding: var(--strand-space-3) var(--strand-space-4);
   overflow-x: auto;
@@ -2603,9 +2603,48 @@
 
 .strand-viewport {
   background: var(--strand-surface-recessed);
-  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
+  box-shadow: var(--strand-shadow-inset);
   border-radius: var(--strand-radius-lg);
   padding: var(--strand-space-6);
 }
 
+/* ── Overline (specimen label pattern, DL Part IV.5) ── */
+.strand-overline {
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
+  font-weight: var(--strand-weight-medium);
+  letter-spacing: var(--strand-tracking-ultra);
+  text-transform: uppercase;
+  color: var(--strand-gray-500);
+  line-height: var(--strand-leading-normal);
+}
+
+/* ── Headline (display heading, DL Part IV.5) ── */
+.strand-headline {
+  font-family: var(--strand-font-mono);
+  font-weight: var(--strand-weight-light);
+  letter-spacing: var(--strand-tracking-widest);
+  text-transform: uppercase;
+  color: var(--strand-blue-midnight);
+  line-height: var(--strand-leading-tight);
+}
+
+.strand-headline--xl {
+  font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
+  letter-spacing: 0.35em;
+}
+
+.strand-headline--lg {
+  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
+  letter-spacing: var(--strand-tracking-tighter);
+}
+
+/* ── Lead (intro paragraph, DL Part IV.6) ── */
+.strand-lead {
+  font-size: var(--strand-text-lg);
+  color: var(--strand-gray-500);
+  max-width: 50ch;
+  line-height: var(--strand-leading-relaxed);
+}
+
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dillingerstaffing/strand-ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Strand UI - Preact/React component library built on the Strand Design Language",
   "author": "Dillinger Staffing <engineering@dillingerstaffing.com> (https://dillingerstaffing.com)",
   "license": "MIT",
@@ -60,7 +60,7 @@
     }
   },
   "dependencies": {
-    "@dillingerstaffing/strand": "^0.7.0"
+    "@dillingerstaffing/strand": "^0.8.0"
   },
   "devDependencies": {
     "@testing-library/preact": "^3.2.0",

package/src/components/Button/Button.css

@@ -35,21 +35,21 @@
 
 /* ── Sizes ── */
 .strand-btn--sm {
-  padding: var(--strand-space-1) var(--strand-space-3);
+  padding: var(--strand-space-2) var(--strand-space-5);
   font-size: var(--strand-text-sm);
   min-height: var(--strand-touch-target);
 }
 
 .strand-btn--md {
-  padding: calc(var(--strand-space-2) + var(--strand-space-1) / 2) var(--strand-space-5);
+  padding: var(--strand-space-3) var(--strand-space-8);
   font-size: var(--strand-text-sm);
   min-height: var(--strand-touch-target);
 }
 
 .strand-btn--lg {
-  padding: var(--strand-space-3) var(--strand-space-6);
+  padding: var(--strand-space-3) var(--strand-space-10);
   font-size: var(--strand-text-base);
-  min-height: 48px;
+  min-height: var(--strand-touch-target);
 }
 
 /* ── Icon-only ── */
@@ -75,18 +75,18 @@
 
 /* ── Primary variant ── */
 .strand-btn--primary {
-  background: var(--strand-blue-primary);
-  color: var(--strand-on-blue-primary);
+  background: var(--strand-blue-deep);
+  color: var(--strand-on-blue-deep);
 }
 
 .strand-btn--primary:hover:not(:disabled) {
-  background: var(--strand-blue-vivid);
+  background: var(--strand-blue-midnight);
   transform: translateY(-1px);
   box-shadow: var(--strand-hover-shadow-primary);
 }
 
 .strand-btn--primary:active:not(:disabled) {
-  background: var(--strand-blue-deep);
+  background: var(--strand-blue-abyss);
 }
 
 /* ── Secondary variant ── */

package/src/components/CodeBlock/CodeBlock.css

@@ -24,7 +24,7 @@
   line-height: var(--strand-leading-relaxed);
   color: var(--strand-blue-midnight);
   background: var(--strand-surface-recessed);
-  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06); /* strand-blue-abyss at 6% opacity */
+  box-shadow: var(--strand-shadow-inset);
   border-radius: var(--strand-radius-lg);
   padding: var(--strand-space-3) var(--strand-space-4);
   overflow-x: auto;

package/src/static.css

@@ -41,7 +41,46 @@
 
 .strand-viewport {
   background: var(--strand-surface-recessed);
-  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
+  box-shadow: var(--strand-shadow-inset);
   border-radius: var(--strand-radius-lg);
   padding: var(--strand-space-6);
 }
+
+/* ── Overline (specimen label pattern, DL Part IV.5) ── */
+.strand-overline {
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
+  font-weight: var(--strand-weight-medium);
+  letter-spacing: var(--strand-tracking-ultra);
+  text-transform: uppercase;
+  color: var(--strand-gray-500);
+  line-height: var(--strand-leading-normal);
+}
+
+/* ── Headline (display heading, DL Part IV.5) ── */
+.strand-headline {
+  font-family: var(--strand-font-mono);
+  font-weight: var(--strand-weight-light);
+  letter-spacing: var(--strand-tracking-widest);
+  text-transform: uppercase;
+  color: var(--strand-blue-midnight);
+  line-height: var(--strand-leading-tight);
+}
+
+.strand-headline--xl {
+  font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
+  letter-spacing: 0.35em;
+}
+
+.strand-headline--lg {
+  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
+  letter-spacing: var(--strand-tracking-tighter);
+}
+
+/* ── Lead (intro paragraph, DL Part IV.6) ── */
+.strand-lead {
+  font-size: var(--strand-text-lg);
+  color: var(--strand-gray-500);
+  max-width: 50ch;
+  line-height: var(--strand-leading-relaxed);
+}