@dillingerstaffing/strand 0.1.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.
Files changed (8) hide show
  1. package/css/base.css +107 -0
  2. package/css/reset.css +124 -0
  3. package/css/tokens.css +152 -0
  4. package/dist/tokens.d.ts +271 -0
  5. package/dist/tokens.d.ts.map +1 -0
  6. package/dist/tokens.js +168 -0
  7. package/dist/tokens.js.map +1 -0
  8. package/package.json +45 -0
package/css/base.css ADDED
@@ -0,0 +1,107 @@
1
+ /*! Strand v0.1.0 | MIT License | dillingerstaffing.com */
2
+
3
+ /*
4
+ * Strand Base Styles
5
+ * Global styles applied after reset. Establishes the lab surface,
6
+ * typography defaults, focus indicators, and grain texture.
7
+ * Requires tokens.css to be loaded first.
8
+ */
9
+
10
+ /* ── Lab Surface ── */
11
+ body {
12
+ font-family: var(--strand-font-sans);
13
+ font-size: var(--strand-text-base);
14
+ font-weight: var(--strand-weight-regular);
15
+ line-height: var(--strand-leading-normal);
16
+ color: var(--strand-on-surface-primary);
17
+ background:
18
+ /* Layer 1: Dot grid (graph paper / cleanroom floor) */
19
+ radial-gradient(circle, rgba(148, 163, 184, 0.07) 1px, transparent 1px),
20
+ /* Layer 2: Overhead LED glow */
21
+ radial-gradient(ellipse 80% 50% at 50% 0%, rgba(59, 130, 246, 0.03) 0%, transparent 100%),
22
+ /* Layer 3: Gentle vertical gradient */
23
+ linear-gradient(180deg, var(--strand-surface-primary) 0%, #FFFFFF 40%, var(--strand-surface-recessed) 100%);
24
+ background-size: 24px 24px, 100% 100%, 100% 100%;
25
+ background-color: var(--strand-surface-primary);
26
+ }
27
+
28
+ /* ── Grain Texture Overlay ── */
29
+ body::after {
30
+ content: '';
31
+ position: fixed;
32
+ inset: 0;
33
+ opacity: 0.012;
34
+ pointer-events: none;
35
+ z-index: 9999;
36
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
37
+ }
38
+
39
+ /* ── Focus Ring ── */
40
+ :focus-visible {
41
+ outline: 2px solid var(--strand-blue-primary);
42
+ outline-offset: 2px;
43
+ }
44
+
45
+ /* ── Selection ── */
46
+ ::selection {
47
+ background-color: var(--strand-blue-wash);
48
+ color: var(--strand-blue-abyss);
49
+ }
50
+
51
+ /* ── Prose Width ── */
52
+ .strand-prose {
53
+ max-width: 65ch;
54
+ }
55
+
56
+ /* ── Container ── */
57
+ .strand-container {
58
+ max-width: var(--strand-content-full);
59
+ margin-inline: auto;
60
+ padding-inline: clamp(1.5rem, 5vw, 4rem);
61
+ }
62
+
63
+ .strand-container-narrow {
64
+ max-width: var(--strand-content-narrow);
65
+ margin-inline: auto;
66
+ padding-inline: clamp(1.5rem, 5vw, 4rem);
67
+ }
68
+
69
+ .strand-container-default {
70
+ max-width: var(--strand-content-default);
71
+ margin-inline: auto;
72
+ padding-inline: clamp(1.5rem, 5vw, 4rem);
73
+ }
74
+
75
+ .strand-container-wide {
76
+ max-width: var(--strand-content-wide);
77
+ margin-inline: auto;
78
+ padding-inline: clamp(1.5rem, 5vw, 4rem);
79
+ }
80
+
81
+ /* ── Section Rhythm ── */
82
+ .strand-section {
83
+ padding-block: clamp(4rem, 8vw, 8rem);
84
+ }
85
+
86
+ .strand-section-hero {
87
+ padding-block: clamp(6rem, 12vw, 12rem);
88
+ }
89
+
90
+ /* ── Scrollbar (Webkit) ── */
91
+ ::-webkit-scrollbar {
92
+ width: 8px;
93
+ height: 8px;
94
+ }
95
+
96
+ ::-webkit-scrollbar-track {
97
+ background: var(--strand-surface-recessed);
98
+ }
99
+
100
+ ::-webkit-scrollbar-thumb {
101
+ background: var(--strand-gray-300);
102
+ border-radius: var(--strand-radius-full);
103
+ }
104
+
105
+ ::-webkit-scrollbar-thumb:hover {
106
+ background: var(--strand-gray-400);
107
+ }
package/css/reset.css ADDED
@@ -0,0 +1,124 @@
1
+ /*! Strand v0.1.0 | MIT License | dillingerstaffing.com */
2
+
3
+ /*
4
+ * Strand Reset
5
+ * Opinionated CSS reset for consistent cross-browser rendering.
6
+ * Based on modern-normalize with Strand-specific additions.
7
+ */
8
+
9
+ /* Box sizing */
10
+ *,
11
+ *::before,
12
+ *::after {
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ /* Remove default margin and padding */
17
+ * {
18
+ margin: 0;
19
+ padding: 0;
20
+ }
21
+
22
+ /* Document */
23
+ html {
24
+ -webkit-text-size-adjust: 100%;
25
+ -moz-tab-size: 4;
26
+ tab-size: 4;
27
+ line-height: 1.5;
28
+ }
29
+
30
+ /* Body */
31
+ body {
32
+ min-height: 100dvh;
33
+ -webkit-font-smoothing: antialiased;
34
+ -moz-osx-font-smoothing: grayscale;
35
+ text-rendering: optimizeLegibility;
36
+ }
37
+
38
+ /* Media defaults */
39
+ img,
40
+ picture,
41
+ video,
42
+ canvas,
43
+ svg {
44
+ display: block;
45
+ max-width: 100%;
46
+ }
47
+
48
+ /* Form element inheritance */
49
+ input,
50
+ button,
51
+ textarea,
52
+ select {
53
+ font: inherit;
54
+ color: inherit;
55
+ }
56
+
57
+ /* Button reset */
58
+ button {
59
+ cursor: pointer;
60
+ background: none;
61
+ border: none;
62
+ }
63
+
64
+ /* Textarea */
65
+ textarea {
66
+ resize: vertical;
67
+ }
68
+
69
+ /* Anchor */
70
+ a {
71
+ color: inherit;
72
+ text-decoration: inherit;
73
+ }
74
+
75
+ /* Table */
76
+ table {
77
+ border-collapse: collapse;
78
+ border-spacing: 0;
79
+ }
80
+
81
+ /* List */
82
+ ol,
83
+ ul {
84
+ list-style: none;
85
+ }
86
+
87
+ /* Heading sizes reset (let the design system control sizing) */
88
+ h1,
89
+ h2,
90
+ h3,
91
+ h4,
92
+ h5,
93
+ h6 {
94
+ font-size: inherit;
95
+ font-weight: inherit;
96
+ }
97
+
98
+ /* Remove fieldset styling */
99
+ fieldset {
100
+ border: none;
101
+ }
102
+
103
+ /* Summary cursor */
104
+ summary {
105
+ cursor: pointer;
106
+ }
107
+
108
+ /* Remove search input appearance */
109
+ input[type="search"]::-webkit-search-cancel-button,
110
+ input[type="search"]::-webkit-search-decoration {
111
+ -webkit-appearance: none;
112
+ }
113
+
114
+ /* Reduced motion */
115
+ @media (prefers-reduced-motion: reduce) {
116
+ *,
117
+ *::before,
118
+ *::after {
119
+ animation-duration: 0.01ms !important;
120
+ animation-iteration-count: 1 !important;
121
+ transition-duration: 0.01ms !important;
122
+ scroll-behavior: auto !important;
123
+ }
124
+ }
package/css/tokens.css ADDED
@@ -0,0 +1,152 @@
1
+ /*! Strand v0.1.0 | MIT License | dillingerstaffing.com */
2
+
3
+ :root {
4
+ /* ═══════════════════════════════════════════
5
+ STRAND DESIGN TOKENS
6
+ All values defined in DESIGN_LANGUAGE.md
7
+ ═══════════════════════════════════════════ */
8
+
9
+ /* ── FONTS ── */
10
+ --strand-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
11
+ --strand-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
12
+
13
+ /* ── SURFACE PALETTE ── */
14
+ --strand-surface-primary: #FAFCFE;
15
+ --strand-surface-elevated: #FFFFFF;
16
+ --strand-surface-recessed: #F0F4F8;
17
+ --strand-surface-subtle: #E8EDF3;
18
+
19
+ /* ── BLUE: BIOSYNTHETIC SPECTRUM ── */
20
+ --strand-blue-glow: #E8F4FD;
21
+ --strand-blue-wash: #DBEAFE;
22
+ --strand-blue-indicator: #93C5FD;
23
+ --strand-blue-primary: #3B82F6;
24
+ --strand-blue-vivid: #2563EB;
25
+ --strand-blue-deep: #1D4ED8;
26
+ --strand-blue-midnight: #1E3A5F;
27
+ --strand-blue-abyss: #0F172A;
28
+
29
+ /* ── COOL GRAYS (blue-shifted) ── */
30
+ --strand-gray-50: #F8FAFC;
31
+ --strand-gray-100: #F1F5F9;
32
+ --strand-gray-200: #E2E8F0;
33
+ --strand-gray-300: #CBD5E1;
34
+ --strand-gray-400: #94A3B8;
35
+ --strand-gray-500: #64748B;
36
+ --strand-gray-600: #475569;
37
+ --strand-gray-700: #334155;
38
+ --strand-gray-800: #1E293B;
39
+ --strand-gray-900: #0F172A;
40
+
41
+ /* ── SEMANTIC ACCENTS ── */
42
+ --strand-cyan-signal: #22D3EE;
43
+ --strand-teal-vital: #14B8A6;
44
+ --strand-green-positive: #10B981;
45
+ --strand-violet-data: #8B5CF6;
46
+ --strand-red-alert: #EF4444;
47
+ --strand-amber-caution: #F59E0B;
48
+
49
+ /* ── ON-COLORS (contrast-safe text pairings) ── */
50
+ --strand-on-surface-primary: #475569;
51
+ --strand-on-surface-elevated: #475569;
52
+ --strand-on-surface-recessed: #475569;
53
+ --strand-on-blue-primary: #FFFFFF;
54
+ --strand-on-blue-vivid: #FFFFFF;
55
+ --strand-on-blue-deep: #FFFFFF;
56
+ --strand-on-red-alert: #FFFFFF;
57
+ --strand-on-teal-vital: #0F172A;
58
+ --strand-on-amber-caution: #0F172A;
59
+
60
+ /* ── TYPE SCALE (Major Third, 1.250 ratio) ── */
61
+ --strand-text-xs: 0.694rem;
62
+ --strand-text-sm: 0.833rem;
63
+ --strand-text-base: 1rem;
64
+ --strand-text-lg: 1.25rem;
65
+ --strand-text-xl: 1.563rem;
66
+ --strand-text-2xl: 1.953rem;
67
+ --strand-text-3xl: 2.441rem;
68
+ --strand-text-4xl: 3.052rem;
69
+ --strand-text-5xl: 3.815rem;
70
+ --strand-text-6xl: 4.768rem;
71
+ --strand-text-7xl: 5.96rem;
72
+
73
+ /* ── TRACKING (letter-spacing) ── */
74
+ --strand-tracking-tightest: -0.05em;
75
+ --strand-tracking-tighter: -0.03em;
76
+ --strand-tracking-tight: -0.02em;
77
+ --strand-tracking-normal: 0;
78
+ --strand-tracking-wide: 0.02em;
79
+ --strand-tracking-wider: 0.05em;
80
+ --strand-tracking-widest: 0.08em;
81
+ --strand-tracking-ultra: 0.12em;
82
+
83
+ /* ── LINE HEIGHT ── */
84
+ --strand-leading-none: 1.0;
85
+ --strand-leading-tight: 1.15;
86
+ --strand-leading-snug: 1.25;
87
+ --strand-leading-normal: 1.5;
88
+ --strand-leading-relaxed: 1.625;
89
+ --strand-leading-loose: 1.75;
90
+
91
+ /* ── FONT WEIGHT ── */
92
+ --strand-weight-light: 300;
93
+ --strand-weight-regular: 400;
94
+ --strand-weight-medium: 500;
95
+ --strand-weight-semibold: 600;
96
+
97
+ /* ── SPACING (4px base unit) ── */
98
+ --strand-space-1: 0.25rem;
99
+ --strand-space-2: 0.5rem;
100
+ --strand-space-3: 0.75rem;
101
+ --strand-space-4: 1rem;
102
+ --strand-space-5: 1.25rem;
103
+ --strand-space-6: 1.5rem;
104
+ --strand-space-8: 2rem;
105
+ --strand-space-10: 2.5rem;
106
+ --strand-space-12: 3rem;
107
+ --strand-space-16: 4rem;
108
+ --strand-space-20: 5rem;
109
+ --strand-space-24: 6rem;
110
+ --strand-space-32: 8rem;
111
+ --strand-space-40: 10rem;
112
+ --strand-space-48: 12rem;
113
+
114
+ /* ── MOTION: EASING ── */
115
+ --strand-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
116
+ --strand-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
117
+ --strand-ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
118
+ --strand-ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
119
+
120
+ /* ── MOTION: DURATION ── */
121
+ --strand-duration-instant: 75ms;
122
+ --strand-duration-fast: 150ms;
123
+ --strand-duration-normal: 250ms;
124
+ --strand-duration-slow: 400ms;
125
+ --strand-duration-glacial: 700ms;
126
+
127
+ /* ── ELEVATION (box-shadow) ── */
128
+ --strand-elevation-0: none;
129
+ --strand-elevation-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.02);
130
+ --strand-elevation-2: 0 4px 6px rgba(15, 23, 42, 0.04), 0 12px 24px rgba(15, 23, 42, 0.06);
131
+ --strand-elevation-3: 0 8px 16px rgba(15, 23, 42, 0.06), 0 24px 48px rgba(15, 23, 42, 0.08);
132
+ --strand-elevation-4: 0 16px 32px rgba(15, 23, 42, 0.08), 0 32px 64px rgba(15, 23, 42, 0.12);
133
+
134
+ /* ── SHAPE (border-radius) ── */
135
+ --strand-radius-sm: 4px;
136
+ --strand-radius-md: 6px;
137
+ --strand-radius-lg: 8px;
138
+ --strand-radius-xl: 12px;
139
+ --strand-radius-full: 9999px;
140
+
141
+ /* ── LAYOUT: BREAKPOINTS ── */
142
+ --strand-breakpoint-sm: 640px;
143
+ --strand-breakpoint-md: 768px;
144
+ --strand-breakpoint-lg: 1024px;
145
+ --strand-breakpoint-xl: 1280px;
146
+
147
+ /* ── LAYOUT: CONTENT WIDTHS ── */
148
+ --strand-content-narrow: 640px;
149
+ --strand-content-default: 768px;
150
+ --strand-content-wide: 1024px;
151
+ --strand-content-full: 1280px;
152
+ }
package/dist/tokens.d.ts ADDED
@@ -0,0 +1,271 @@
1
+ /*! Strand v0.1.0 | MIT License | dillingerstaffing.com */
2
+ /**
3
+ * Strand Design Tokens
4
+ * Typed JS constants mirroring tokens.css.
5
+ * Every value here MUST match the corresponding CSS custom property.
6
+ */
7
+ export declare const fontSans: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif";
8
+ export declare const fontMono: "'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace";
9
+ export declare const surfacePrimary: "#FAFCFE";
10
+ export declare const surfaceElevated: "#FFFFFF";
11
+ export declare const surfaceRecessed: "#F0F4F8";
12
+ export declare const surfaceSubtle: "#E8EDF3";
13
+ export declare const blueGlow: "#E8F4FD";
14
+ export declare const blueWash: "#DBEAFE";
15
+ export declare const blueIndicator: "#93C5FD";
16
+ export declare const bluePrimary: "#3B82F6";
17
+ export declare const blueVivid: "#2563EB";
18
+ export declare const blueDeep: "#1D4ED8";
19
+ export declare const blueMidnight: "#1E3A5F";
20
+ export declare const blueAbyss: "#0F172A";
21
+ export declare const gray50: "#F8FAFC";
22
+ export declare const gray100: "#F1F5F9";
23
+ export declare const gray200: "#E2E8F0";
24
+ export declare const gray300: "#CBD5E1";
25
+ export declare const gray400: "#94A3B8";
26
+ export declare const gray500: "#64748B";
27
+ export declare const gray600: "#475569";
28
+ export declare const gray700: "#334155";
29
+ export declare const gray800: "#1E293B";
30
+ export declare const gray900: "#0F172A";
31
+ export declare const cyanSignal: "#22D3EE";
32
+ export declare const tealVital: "#14B8A6";
33
+ export declare const greenPositive: "#10B981";
34
+ export declare const violetData: "#8B5CF6";
35
+ export declare const redAlert: "#EF4444";
36
+ export declare const amberCaution: "#F59E0B";
37
+ export declare const onSurfacePrimary: "#475569";
38
+ export declare const onSurfaceElevated: "#475569";
39
+ export declare const onSurfaceRecessed: "#475569";
40
+ export declare const onBluePrimary: "#FFFFFF";
41
+ export declare const onBlueVivid: "#FFFFFF";
42
+ export declare const onBlueDeep: "#FFFFFF";
43
+ export declare const onRedAlert: "#FFFFFF";
44
+ export declare const onTealVital: "#0F172A";
45
+ export declare const onAmberCaution: "#0F172A";
46
+ export declare const textXs: "0.694rem";
47
+ export declare const textSm: "0.833rem";
48
+ export declare const textBase: "1rem";
49
+ export declare const textLg: "1.25rem";
50
+ export declare const textXl: "1.563rem";
51
+ export declare const text2xl: "1.953rem";
52
+ export declare const text3xl: "2.441rem";
53
+ export declare const text4xl: "3.052rem";
54
+ export declare const text5xl: "3.815rem";
55
+ export declare const text6xl: "4.768rem";
56
+ export declare const text7xl: "5.96rem";
57
+ export declare const trackingTightest: "-0.05em";
58
+ export declare const trackingTighter: "-0.03em";
59
+ export declare const trackingTight: "-0.02em";
60
+ export declare const trackingNormal: "0";
61
+ export declare const trackingWide: "0.02em";
62
+ export declare const trackingWider: "0.05em";
63
+ export declare const trackingWidest: "0.08em";
64
+ export declare const trackingUltra: "0.12em";
65
+ export declare const leadingNone = 1;
66
+ export declare const leadingTight = 1.15;
67
+ export declare const leadingSnug = 1.25;
68
+ export declare const leadingNormal = 1.5;
69
+ export declare const leadingRelaxed = 1.625;
70
+ export declare const leadingLoose = 1.75;
71
+ export declare const weightLight = 300;
72
+ export declare const weightRegular = 400;
73
+ export declare const weightMedium = 500;
74
+ export declare const weightSemibold = 600;
75
+ export declare const space1: "0.25rem";
76
+ export declare const space2: "0.5rem";
77
+ export declare const space3: "0.75rem";
78
+ export declare const space4: "1rem";
79
+ export declare const space5: "1.25rem";
80
+ export declare const space6: "1.5rem";
81
+ export declare const space8: "2rem";
82
+ export declare const space10: "2.5rem";
83
+ export declare const space12: "3rem";
84
+ export declare const space16: "4rem";
85
+ export declare const space20: "5rem";
86
+ export declare const space24: "6rem";
87
+ export declare const space32: "8rem";
88
+ export declare const space40: "10rem";
89
+ export declare const space48: "12rem";
90
+ export declare const easeOutExpo: "cubic-bezier(0.16, 1, 0.3, 1)";
91
+ export declare const easeOutQuart: "cubic-bezier(0.25, 1, 0.5, 1)";
92
+ export declare const easeInOutSine: "cubic-bezier(0.37, 0, 0.63, 1)";
93
+ export declare const easeInExpo: "cubic-bezier(0.7, 0, 0.84, 0)";
94
+ export declare const durationInstant: "75ms";
95
+ export declare const durationFast: "150ms";
96
+ export declare const durationNormal: "250ms";
97
+ export declare const durationSlow: "400ms";
98
+ export declare const durationGlacial: "700ms";
99
+ export declare const elevation0: "none";
100
+ export declare const elevation1: "0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.02)";
101
+ export declare const elevation2: "0 4px 6px rgba(15, 23, 42, 0.04), 0 12px 24px rgba(15, 23, 42, 0.06)";
102
+ export declare const elevation3: "0 8px 16px rgba(15, 23, 42, 0.06), 0 24px 48px rgba(15, 23, 42, 0.08)";
103
+ export declare const elevation4: "0 16px 32px rgba(15, 23, 42, 0.08), 0 32px 64px rgba(15, 23, 42, 0.12)";
104
+ export declare const radiusSm: "4px";
105
+ export declare const radiusMd: "6px";
106
+ export declare const radiusLg: "8px";
107
+ export declare const radiusXl: "12px";
108
+ export declare const radiusFull: "9999px";
109
+ export declare const breakpointSm: "640px";
110
+ export declare const breakpointMd: "768px";
111
+ export declare const breakpointLg: "1024px";
112
+ export declare const breakpointXl: "1280px";
113
+ export declare const contentNarrow: "640px";
114
+ export declare const contentDefault: "768px";
115
+ export declare const contentWide: "1024px";
116
+ export declare const contentFull: "1280px";
117
+ export declare const colors: {
118
+ readonly surface: {
119
+ readonly primary: "#FAFCFE";
120
+ readonly elevated: "#FFFFFF";
121
+ readonly recessed: "#F0F4F8";
122
+ readonly subtle: "#E8EDF3";
123
+ };
124
+ readonly blue: {
125
+ readonly glow: "#E8F4FD";
126
+ readonly wash: "#DBEAFE";
127
+ readonly indicator: "#93C5FD";
128
+ readonly primary: "#3B82F6";
129
+ readonly vivid: "#2563EB";
130
+ readonly deep: "#1D4ED8";
131
+ readonly midnight: "#1E3A5F";
132
+ readonly abyss: "#0F172A";
133
+ };
134
+ readonly gray: {
135
+ readonly 50: "#F8FAFC";
136
+ readonly 100: "#F1F5F9";
137
+ readonly 200: "#E2E8F0";
138
+ readonly 300: "#CBD5E1";
139
+ readonly 400: "#94A3B8";
140
+ readonly 500: "#64748B";
141
+ readonly 600: "#475569";
142
+ readonly 700: "#334155";
143
+ readonly 800: "#1E293B";
144
+ readonly 900: "#0F172A";
145
+ };
146
+ readonly semantic: {
147
+ readonly cyanSignal: "#22D3EE";
148
+ readonly tealVital: "#14B8A6";
149
+ readonly greenPositive: "#10B981";
150
+ readonly violetData: "#8B5CF6";
151
+ readonly redAlert: "#EF4444";
152
+ readonly amberCaution: "#F59E0B";
153
+ };
154
+ readonly on: {
155
+ readonly surfacePrimary: "#475569";
156
+ readonly surfaceElevated: "#475569";
157
+ readonly surfaceRecessed: "#475569";
158
+ readonly bluePrimary: "#FFFFFF";
159
+ readonly blueVivid: "#FFFFFF";
160
+ readonly blueDeep: "#FFFFFF";
161
+ readonly redAlert: "#FFFFFF";
162
+ readonly tealVital: "#0F172A";
163
+ readonly amberCaution: "#0F172A";
164
+ };
165
+ };
166
+ export declare const typography: {
167
+ readonly fonts: {
168
+ readonly sans: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif";
169
+ readonly mono: "'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace";
170
+ };
171
+ readonly scale: {
172
+ readonly xs: "0.694rem";
173
+ readonly sm: "0.833rem";
174
+ readonly base: "1rem";
175
+ readonly lg: "1.25rem";
176
+ readonly xl: "1.563rem";
177
+ readonly "2xl": "1.953rem";
178
+ readonly "3xl": "2.441rem";
179
+ readonly "4xl": "3.052rem";
180
+ readonly "5xl": "3.815rem";
181
+ readonly "6xl": "4.768rem";
182
+ readonly "7xl": "5.96rem";
183
+ };
184
+ readonly tracking: {
185
+ readonly tightest: "-0.05em";
186
+ readonly tighter: "-0.03em";
187
+ readonly tight: "-0.02em";
188
+ readonly normal: "0";
189
+ readonly wide: "0.02em";
190
+ readonly wider: "0.05em";
191
+ readonly widest: "0.08em";
192
+ readonly ultra: "0.12em";
193
+ };
194
+ readonly leading: {
195
+ readonly none: 1;
196
+ readonly tight: 1.15;
197
+ readonly snug: 1.25;
198
+ readonly normal: 1.5;
199
+ readonly relaxed: 1.625;
200
+ readonly loose: 1.75;
201
+ };
202
+ readonly weight: {
203
+ readonly light: 300;
204
+ readonly regular: 400;
205
+ readonly medium: 500;
206
+ readonly semibold: 600;
207
+ };
208
+ };
209
+ export declare const spacing: {
210
+ readonly 1: "0.25rem";
211
+ readonly 2: "0.5rem";
212
+ readonly 3: "0.75rem";
213
+ readonly 4: "1rem";
214
+ readonly 5: "1.25rem";
215
+ readonly 6: "1.5rem";
216
+ readonly 8: "2rem";
217
+ readonly 10: "2.5rem";
218
+ readonly 12: "3rem";
219
+ readonly 16: "4rem";
220
+ readonly 20: "5rem";
221
+ readonly 24: "6rem";
222
+ readonly 32: "8rem";
223
+ readonly 40: "10rem";
224
+ readonly 48: "12rem";
225
+ };
226
+ export declare const motion: {
227
+ readonly easing: {
228
+ readonly outExpo: "cubic-bezier(0.16, 1, 0.3, 1)";
229
+ readonly outQuart: "cubic-bezier(0.25, 1, 0.5, 1)";
230
+ readonly inOutSine: "cubic-bezier(0.37, 0, 0.63, 1)";
231
+ readonly inExpo: "cubic-bezier(0.7, 0, 0.84, 0)";
232
+ };
233
+ readonly duration: {
234
+ readonly instant: "75ms";
235
+ readonly fast: "150ms";
236
+ readonly normal: "250ms";
237
+ readonly slow: "400ms";
238
+ readonly glacial: "700ms";
239
+ };
240
+ };
241
+ export declare const elevation: {
242
+ readonly 0: "none";
243
+ readonly 1: "0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.02)";
244
+ readonly 2: "0 4px 6px rgba(15, 23, 42, 0.04), 0 12px 24px rgba(15, 23, 42, 0.06)";
245
+ readonly 3: "0 8px 16px rgba(15, 23, 42, 0.06), 0 24px 48px rgba(15, 23, 42, 0.08)";
246
+ readonly 4: "0 16px 32px rgba(15, 23, 42, 0.08), 0 32px 64px rgba(15, 23, 42, 0.12)";
247
+ };
248
+ export declare const shape: {
249
+ readonly radius: {
250
+ readonly sm: "4px";
251
+ readonly md: "6px";
252
+ readonly lg: "8px";
253
+ readonly xl: "12px";
254
+ readonly full: "9999px";
255
+ };
256
+ };
257
+ export declare const layout: {
258
+ readonly breakpoints: {
259
+ readonly sm: "640px";
260
+ readonly md: "768px";
261
+ readonly lg: "1024px";
262
+ readonly xl: "1280px";
263
+ };
264
+ readonly content: {
265
+ readonly narrow: "640px";
266
+ readonly default: "768px";
267
+ readonly wide: "1024px";
268
+ readonly full: "1280px";
269
+ };
270
+ };
271
+ //# sourceMappingURL=tokens.d.ts.map
package/dist/tokens.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../js/tokens.ts"],"names":[],"mappings":"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"}
package/dist/tokens.js ADDED
@@ -0,0 +1,168 @@
1
+ /*! Strand v0.1.0 | MIT License | dillingerstaffing.com */
2
+ /**
3
+ * Strand Design Tokens
4
+ * Typed JS constants mirroring tokens.css.
5
+ * Every value here MUST match the corresponding CSS custom property.
6
+ */
7
+ // ── Fonts ──
8
+ export const fontSans = "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif";
9
+ export const fontMono = "'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace";
10
+ // ── Surface Palette ──
11
+ export const surfacePrimary = "#FAFCFE";
12
+ export const surfaceElevated = "#FFFFFF";
13
+ export const surfaceRecessed = "#F0F4F8";
14
+ export const surfaceSubtle = "#E8EDF3";
15
+ // ── Blue: Biosynthetic Spectrum ──
16
+ export const blueGlow = "#E8F4FD";
17
+ export const blueWash = "#DBEAFE";
18
+ export const blueIndicator = "#93C5FD";
19
+ export const bluePrimary = "#3B82F6";
20
+ export const blueVivid = "#2563EB";
21
+ export const blueDeep = "#1D4ED8";
22
+ export const blueMidnight = "#1E3A5F";
23
+ export const blueAbyss = "#0F172A";
24
+ // ── Cool Grays (blue-shifted) ──
25
+ export const gray50 = "#F8FAFC";
26
+ export const gray100 = "#F1F5F9";
27
+ export const gray200 = "#E2E8F0";
28
+ export const gray300 = "#CBD5E1";
29
+ export const gray400 = "#94A3B8";
30
+ export const gray500 = "#64748B";
31
+ export const gray600 = "#475569";
32
+ export const gray700 = "#334155";
33
+ export const gray800 = "#1E293B";
34
+ export const gray900 = "#0F172A";
35
+ // ── Semantic Accents ──
36
+ export const cyanSignal = "#22D3EE";
37
+ export const tealVital = "#14B8A6";
38
+ export const greenPositive = "#10B981";
39
+ export const violetData = "#8B5CF6";
40
+ export const redAlert = "#EF4444";
41
+ export const amberCaution = "#F59E0B";
42
+ // ── On-Colors (contrast-safe text pairings) ──
43
+ export const onSurfacePrimary = "#475569";
44
+ export const onSurfaceElevated = "#475569";
45
+ export const onSurfaceRecessed = "#475569";
46
+ export const onBluePrimary = "#FFFFFF";
47
+ export const onBlueVivid = "#FFFFFF";
48
+ export const onBlueDeep = "#FFFFFF";
49
+ export const onRedAlert = "#FFFFFF";
50
+ export const onTealVital = "#0F172A";
51
+ export const onAmberCaution = "#0F172A";
52
+ // ── Type Scale (Major Third, 1.250 ratio) ──
53
+ export const textXs = "0.694rem";
54
+ export const textSm = "0.833rem";
55
+ export const textBase = "1rem";
56
+ export const textLg = "1.25rem";
57
+ export const textXl = "1.563rem";
58
+ export const text2xl = "1.953rem";
59
+ export const text3xl = "2.441rem";
60
+ export const text4xl = "3.052rem";
61
+ export const text5xl = "3.815rem";
62
+ export const text6xl = "4.768rem";
63
+ export const text7xl = "5.96rem";
64
+ // ── Tracking (letter-spacing) ──
65
+ export const trackingTightest = "-0.05em";
66
+ export const trackingTighter = "-0.03em";
67
+ export const trackingTight = "-0.02em";
68
+ export const trackingNormal = "0";
69
+ export const trackingWide = "0.02em";
70
+ export const trackingWider = "0.05em";
71
+ export const trackingWidest = "0.08em";
72
+ export const trackingUltra = "0.12em";
73
+ // ── Line Height ──
74
+ export const leadingNone = 1.0;
75
+ export const leadingTight = 1.15;
76
+ export const leadingSnug = 1.25;
77
+ export const leadingNormal = 1.5;
78
+ export const leadingRelaxed = 1.625;
79
+ export const leadingLoose = 1.75;
80
+ // ── Font Weight ──
81
+ export const weightLight = 300;
82
+ export const weightRegular = 400;
83
+ export const weightMedium = 500;
84
+ export const weightSemibold = 600;
85
+ // ── Spacing (4px base unit) ──
86
+ export const space1 = "0.25rem";
87
+ export const space2 = "0.5rem";
88
+ export const space3 = "0.75rem";
89
+ export const space4 = "1rem";
90
+ export const space5 = "1.25rem";
91
+ export const space6 = "1.5rem";
92
+ export const space8 = "2rem";
93
+ export const space10 = "2.5rem";
94
+ export const space12 = "3rem";
95
+ export const space16 = "4rem";
96
+ export const space20 = "5rem";
97
+ export const space24 = "6rem";
98
+ export const space32 = "8rem";
99
+ export const space40 = "10rem";
100
+ export const space48 = "12rem";
101
+ // ── Motion: Easing ──
102
+ export const easeOutExpo = "cubic-bezier(0.16, 1, 0.3, 1)";
103
+ export const easeOutQuart = "cubic-bezier(0.25, 1, 0.5, 1)";
104
+ export const easeInOutSine = "cubic-bezier(0.37, 0, 0.63, 1)";
105
+ export const easeInExpo = "cubic-bezier(0.7, 0, 0.84, 0)";
106
+ // ── Motion: Duration ──
107
+ export const durationInstant = "75ms";
108
+ export const durationFast = "150ms";
109
+ export const durationNormal = "250ms";
110
+ export const durationSlow = "400ms";
111
+ export const durationGlacial = "700ms";
112
+ // ── Elevation (box-shadow values) ──
113
+ export const elevation0 = "none";
114
+ export const elevation1 = "0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.02)";
115
+ export const elevation2 = "0 4px 6px rgba(15, 23, 42, 0.04), 0 12px 24px rgba(15, 23, 42, 0.06)";
116
+ export const elevation3 = "0 8px 16px rgba(15, 23, 42, 0.06), 0 24px 48px rgba(15, 23, 42, 0.08)";
117
+ export const elevation4 = "0 16px 32px rgba(15, 23, 42, 0.08), 0 32px 64px rgba(15, 23, 42, 0.12)";
118
+ // ── Shape (border-radius) ──
119
+ export const radiusSm = "4px";
120
+ export const radiusMd = "6px";
121
+ export const radiusLg = "8px";
122
+ export const radiusXl = "12px";
123
+ export const radiusFull = "9999px";
124
+ // ── Layout: Breakpoints ──
125
+ export const breakpointSm = "640px";
126
+ export const breakpointMd = "768px";
127
+ export const breakpointLg = "1024px";
128
+ export const breakpointXl = "1280px";
129
+ // ── Layout: Content Widths ──
130
+ export const contentNarrow = "640px";
131
+ export const contentDefault = "768px";
132
+ export const contentWide = "1024px";
133
+ export const contentFull = "1280px";
134
+ // ── Grouped Exports ──
135
+ export const colors = {
136
+ surface: { primary: surfacePrimary, elevated: surfaceElevated, recessed: surfaceRecessed, subtle: surfaceSubtle },
137
+ blue: { glow: blueGlow, wash: blueWash, indicator: blueIndicator, primary: bluePrimary, vivid: blueVivid, deep: blueDeep, midnight: blueMidnight, abyss: blueAbyss },
138
+ gray: { 50: gray50, 100: gray100, 200: gray200, 300: gray300, 400: gray400, 500: gray500, 600: gray600, 700: gray700, 800: gray800, 900: gray900 },
139
+ semantic: { cyanSignal, tealVital, greenPositive, violetData, redAlert, amberCaution },
140
+ on: { surfacePrimary: onSurfacePrimary, surfaceElevated: onSurfaceElevated, surfaceRecessed: onSurfaceRecessed, bluePrimary: onBluePrimary, blueVivid: onBlueVivid, blueDeep: onBlueDeep, redAlert: onRedAlert, tealVital: onTealVital, amberCaution: onAmberCaution },
141
+ };
142
+ export const typography = {
143
+ fonts: { sans: fontSans, mono: fontMono },
144
+ scale: { xs: textXs, sm: textSm, base: textBase, lg: textLg, xl: textXl, "2xl": text2xl, "3xl": text3xl, "4xl": text4xl, "5xl": text5xl, "6xl": text6xl, "7xl": text7xl },
145
+ tracking: { tightest: trackingTightest, tighter: trackingTighter, tight: trackingTight, normal: trackingNormal, wide: trackingWide, wider: trackingWider, widest: trackingWidest, ultra: trackingUltra },
146
+ leading: { none: leadingNone, tight: leadingTight, snug: leadingSnug, normal: leadingNormal, relaxed: leadingRelaxed, loose: leadingLoose },
147
+ weight: { light: weightLight, regular: weightRegular, medium: weightMedium, semibold: weightSemibold },
148
+ };
149
+ export const spacing = {
150
+ 1: space1, 2: space2, 3: space3, 4: space4, 5: space5, 6: space6,
151
+ 8: space8, 10: space10, 12: space12, 16: space16, 20: space20,
152
+ 24: space24, 32: space32, 40: space40, 48: space48,
153
+ };
154
+ export const motion = {
155
+ easing: { outExpo: easeOutExpo, outQuart: easeOutQuart, inOutSine: easeInOutSine, inExpo: easeInExpo },
156
+ duration: { instant: durationInstant, fast: durationFast, normal: durationNormal, slow: durationSlow, glacial: durationGlacial },
157
+ };
158
+ export const elevation = {
159
+ 0: elevation0, 1: elevation1, 2: elevation2, 3: elevation3, 4: elevation4,
160
+ };
161
+ export const shape = {
162
+ radius: { sm: radiusSm, md: radiusMd, lg: radiusLg, xl: radiusXl, full: radiusFull },
163
+ };
164
+ export const layout = {
165
+ breakpoints: { sm: breakpointSm, md: breakpointMd, lg: breakpointLg, xl: breakpointXl },
166
+ content: { narrow: contentNarrow, default: contentDefault, wide: contentWide, full: contentFull },
167
+ };
168
+ //# sourceMappingURL=tokens.js.map
package/dist/tokens.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tokens.js","sourceRoot":"","sources":["../js/tokens.ts"],"names":[],"mappings":"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"}
package/package.json ADDED
@@ -0,0 +1,45 @@
1
+ {
2
+ "name": "@dillingerstaffing/strand",
3
+ "version": "0.1.0",
4
+ "description": "Strand Design Language tokens - CSS custom properties and JS constants",
5
+ "author": "Dillinger Staffing <engineering@dillingerstaffing.com> (https://dillingerstaffing.com)",
6
+ "license": "MIT",
7
+ "homepage": "https://dillingerstaffing.com/labs/strand",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "https://github.com/dillingerstaffing/strand",
11
+ "directory": "packages/tokens"
12
+ },
13
+ "bugs": {
14
+ "url": "https://github.com/dillingerstaffing/strand/issues"
15
+ },
16
+ "type": "module",
17
+ "main": "./dist/js/tokens.js",
18
+ "module": "./dist/js/tokens.js",
19
+ "types": "./dist/js/tokens.d.ts",
20
+ "exports": {
21
+ ".": {
22
+ "types": "./dist/js/tokens.d.ts",
23
+ "import": "./dist/js/tokens.js"
24
+ },
25
+ "./css/tokens.css": "./css/tokens.css",
26
+ "./css/reset.css": "./css/reset.css",
27
+ "./css/base.css": "./css/base.css"
28
+ },
29
+ "files": [
30
+ "css/",
31
+ "dist/"
32
+ ],
33
+ "sideEffects": [
34
+ "css/*.css"
35
+ ],
36
+ "scripts": {
37
+ "build": "tsc --project tsconfig.json",
38
+ "test": "vitest run",
39
+ "test:watch": "vitest",
40
+ "test:coverage": "vitest run --coverage"
41
+ },
42
+ "devDependencies": {
43
+ "vitest": "^3.0.0"
44
+ }
45
+ }