@dillingerstaffing/strand-svelte 0.7.1 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/strand-ui.css +60 -3
- package/package.json +2 -2
package/dist/css/strand-ui.css
CHANGED
|
@@ -500,6 +500,7 @@
|
|
|
500
500
|
|
|
501
501
|
/* ── Variants ── */
|
|
502
502
|
.strand-card--elevated {
|
|
503
|
+
border: 1px solid var(--strand-border-subtle);
|
|
503
504
|
box-shadow: var(--strand-elevation-1);
|
|
504
505
|
}
|
|
505
506
|
|
|
@@ -509,6 +510,7 @@
|
|
|
509
510
|
}
|
|
510
511
|
|
|
511
512
|
.strand-card--interactive {
|
|
513
|
+
border: 1px solid var(--strand-border-subtle);
|
|
512
514
|
box-shadow: var(--strand-elevation-1);
|
|
513
515
|
cursor: pointer;
|
|
514
516
|
transition:
|
|
@@ -688,7 +690,7 @@
|
|
|
688
690
|
line-height: var(--strand-leading-relaxed);
|
|
689
691
|
color: var(--strand-blue-midnight);
|
|
690
692
|
background: var(--strand-surface-recessed);
|
|
691
|
-
box-shadow:
|
|
693
|
+
box-shadow: var(--strand-shadow-inset);
|
|
692
694
|
border-radius: var(--strand-radius-lg);
|
|
693
695
|
padding: var(--strand-space-3) var(--strand-space-4);
|
|
694
696
|
overflow-x: auto;
|
|
@@ -988,11 +990,16 @@
|
|
|
988
990
|
min-width: 0;
|
|
989
991
|
}
|
|
990
992
|
|
|
991
|
-
/* ──
|
|
993
|
+
/* ── Fixed column utilities ── */
|
|
992
994
|
.strand-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
|
|
993
995
|
.strand-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
|
|
994
996
|
.strand-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
|
|
995
997
|
|
|
998
|
+
/* ── Responsive auto-fit (columns adjust to available width) ── */
|
|
999
|
+
.strand-grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
|
|
1000
|
+
.strand-grid--auto-md { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
|
|
1001
|
+
.strand-grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
|
|
1002
|
+
|
|
996
1003
|
/* ── Gap utilities ── */
|
|
997
1004
|
.strand-grid--gap-1 { gap: var(--strand-space-1); }
|
|
998
1005
|
.strand-grid--gap-2 { gap: var(--strand-space-2); }
|
|
@@ -2671,8 +2678,58 @@
|
|
|
2671
2678
|
|
|
2672
2679
|
.strand-viewport {
|
|
2673
2680
|
background: var(--strand-surface-recessed);
|
|
2674
|
-
box-shadow: inset
|
|
2681
|
+
box-shadow: var(--strand-shadow-inset);
|
|
2675
2682
|
border-radius: var(--strand-radius-lg);
|
|
2676
2683
|
padding: var(--strand-space-6);
|
|
2677
2684
|
}
|
|
2678
2685
|
|
|
2686
|
+
/* ── Overline (specimen label pattern, DL Part IV.5) ── */
|
|
2687
|
+
.strand-overline {
|
|
2688
|
+
font-family: var(--strand-font-mono);
|
|
2689
|
+
font-size: var(--strand-text-xs);
|
|
2690
|
+
font-weight: var(--strand-weight-medium);
|
|
2691
|
+
letter-spacing: var(--strand-tracking-ultra);
|
|
2692
|
+
text-transform: uppercase;
|
|
2693
|
+
color: var(--strand-gray-500);
|
|
2694
|
+
line-height: var(--strand-leading-normal);
|
|
2695
|
+
}
|
|
2696
|
+
|
|
2697
|
+
/* ── Headline (display heading, DL Part IV.5) ── */
|
|
2698
|
+
.strand-headline {
|
|
2699
|
+
font-family: var(--strand-font-mono);
|
|
2700
|
+
font-weight: var(--strand-weight-light);
|
|
2701
|
+
letter-spacing: var(--strand-tracking-widest);
|
|
2702
|
+
text-transform: uppercase;
|
|
2703
|
+
color: var(--strand-blue-midnight);
|
|
2704
|
+
line-height: var(--strand-leading-tight);
|
|
2705
|
+
}
|
|
2706
|
+
|
|
2707
|
+
.strand-headline--xl {
|
|
2708
|
+
font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
|
|
2709
|
+
letter-spacing: 0.35em;
|
|
2710
|
+
}
|
|
2711
|
+
|
|
2712
|
+
.strand-headline--lg {
|
|
2713
|
+
font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
|
|
2714
|
+
letter-spacing: var(--strand-tracking-tighter);
|
|
2715
|
+
}
|
|
2716
|
+
|
|
2717
|
+
/* ── Lead (intro paragraph, DL Part IV.6) ── */
|
|
2718
|
+
.strand-lead {
|
|
2719
|
+
font-size: var(--strand-text-lg);
|
|
2720
|
+
color: var(--strand-gray-500);
|
|
2721
|
+
max-width: 50ch;
|
|
2722
|
+
line-height: var(--strand-leading-relaxed);
|
|
2723
|
+
}
|
|
2724
|
+
|
|
2725
|
+
/* ── Secondary text (caption/description, DL Part III.8 Color Roles) ── */
|
|
2726
|
+
.strand-text-secondary {
|
|
2727
|
+
font-size: var(--strand-text-sm);
|
|
2728
|
+
color: var(--strand-gray-500);
|
|
2729
|
+
line-height: var(--strand-leading-relaxed);
|
|
2730
|
+
}
|
|
2731
|
+
|
|
2732
|
+
.strand-text-secondary--xs {
|
|
2733
|
+
font-size: var(--strand-text-xs);
|
|
2734
|
+
}
|
|
2735
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dillingerstaffing/strand-svelte",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"description": "Strand UI - Svelte component library built on the Strand Design Language",
|
|
5
5
|
"author": "Dillinger Staffing <engineering@dillingerstaffing.com> (https://dillingerstaffing.com)",
|
|
6
6
|
"license": "MIT",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"svelte": "^4.0.0 || ^5.0.0"
|
|
56
56
|
},
|
|
57
57
|
"dependencies": {
|
|
58
|
-
"@dillingerstaffing/strand": "^0.
|
|
58
|
+
"@dillingerstaffing/strand": "^0.9.0"
|
|
59
59
|
},
|
|
60
60
|
"devDependencies": {
|
|
61
61
|
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|