@dillingerstaffing/strand-vue 0.7.0 → 0.8.0

package/dist/css/strand-ui.css

@@ -323,21 +323,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 ── */
@@ -363,18 +363,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 ── */
@@ -688,7 +688,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;
@@ -2671,8 +2671,47 @@
 
 .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-vue",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Strand UI - Vue 3 component library built on the Strand Design Language",
   "author": "Dillinger Staffing <engineering@dillingerstaffing.com> (https://dillingerstaffing.com)",
   "license": "MIT",
@@ -52,7 +52,7 @@
     "vue": "^3.4.0"
   },
   "dependencies": {
-    "@dillingerstaffing/strand": "^0.7.0"
+    "@dillingerstaffing/strand": "^0.8.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.0",