@dillingerstaffing/strand 0.3.1 → 0.5.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 (4) hide show
  1. package/css/tokens.css +29 -29
  2. package/dist/tokens.d.ts +52 -52
  3. package/dist/tokens.js +27 -27
  4. package/package.json +1 -1
package/css/tokens.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! Strand v0.2.0 | MIT License | dillingerstaffing.com */
1
+ /*! Strand v0.5.0 | MIT License | dillingerstaffing.com */
2
2
 
3
3
  :root {
4
4
  /* ═══════════════════════════════════════════
@@ -11,32 +11,32 @@
11
11
  --strand-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
12
12
 
13
13
  /* ── SURFACE PALETTE ── */
14
- --strand-surface-primary: #FAFCFE;
14
+ --strand-surface-primary: #FAFCFF;
15
15
  --strand-surface-elevated: #FFFFFF;
16
- --strand-surface-recessed: #F0F4F8;
17
- --strand-surface-subtle: #E8EDF3;
16
+ --strand-surface-recessed: #F0F5F8;
17
+ --strand-surface-subtle: #E8EEF3;
18
18
 
19
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;
20
+ --strand-blue-glow: #E8F5FD;
21
+ --strand-blue-wash: #DBECFE;
22
+ --strand-blue-indicator: #93CCFD;
23
+ --strand-blue-primary: #3B8EF6;
24
+ --strand-blue-vivid: #2570EB;
25
+ --strand-blue-deep: #1D5AD8;
26
+ --strand-blue-midnight: #1E3E5F;
27
+ --strand-blue-abyss: #0F192A;
28
+
29
+ /* ── COOL GRAYS (cyan-shifted) ── */
30
+ --strand-gray-50: #F7FAFD;
31
+ --strand-gray-100: #F1F6F9;
32
+ --strand-gray-200: #E2E9F0;
33
+ --strand-gray-300: #CBD6E1;
34
+ --strand-gray-400: #94A5B8;
35
+ --strand-gray-500: #64778B;
36
+ --strand-gray-600: #475769;
37
+ --strand-gray-700: #334355;
38
+ --strand-gray-800: #1E2B3B;
39
+ --strand-gray-900: #0F192A;
40
40
 
41
41
  /* ── SEMANTIC ACCENTS ── */
42
42
  --strand-cyan-signal: #22D3EE;
@@ -49,18 +49,18 @@
49
49
  --strand-amber-caution: #F59E0B;
50
50
 
51
51
  /* ── ON-COLORS (contrast-safe text pairings) ── */
52
- --strand-on-surface-primary: #475569;
53
- --strand-on-surface-elevated: #475569;
54
- --strand-on-surface-recessed: #475569;
52
+ --strand-on-surface-primary: #475769;
53
+ --strand-on-surface-elevated: #475769;
54
+ --strand-on-surface-recessed: #475769;
55
55
  --strand-on-blue-primary: #FFFFFF;
56
56
  --strand-on-blue-vivid: #FFFFFF;
57
57
  --strand-on-blue-deep: #FFFFFF;
58
58
  --strand-on-red-alert: #FFFFFF;
59
59
  --strand-on-red-alert-vivid: #FFFFFF;
60
60
  --strand-on-red-alert-deep: #FFFFFF;
61
- --strand-on-teal-vital: #0F172A;
61
+ --strand-on-teal-vital: #0F192A;
62
62
  --strand-on-teal-tint: #0D7377;
63
- --strand-on-amber-caution: #0F172A;
63
+ --strand-on-amber-caution: #0F192A;
64
64
  --strand-on-amber-tint: #92400E;
65
65
  --strand-on-red-tint: #991B1B;
66
66
 
package/dist/tokens.d.ts CHANGED
@@ -6,43 +6,43 @@
6
6
  */
7
7
  export declare const fontSans: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif";
8
8
  export declare const fontMono: "'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace";
9
- export declare const surfacePrimary: "#FAFCFE";
9
+ export declare const surfacePrimary: "#FAFCFF";
10
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";
11
+ export declare const surfaceRecessed: "#F0F5F8";
12
+ export declare const surfaceSubtle: "#E8EEF3";
13
+ export declare const blueGlow: "#E8F5FD";
14
+ export declare const blueWash: "#DBECFE";
15
+ export declare const blueIndicator: "#93CCFD";
16
+ export declare const bluePrimary: "#3B8EF6";
17
+ export declare const blueVivid: "#2570EB";
18
+ export declare const blueDeep: "#1D5AD8";
19
+ export declare const blueMidnight: "#1E3E5F";
20
+ export declare const blueAbyss: "#0F192A";
21
+ export declare const gray50: "#F7FAFD";
22
+ export declare const gray100: "#F1F6F9";
23
+ export declare const gray200: "#E2E9F0";
24
+ export declare const gray300: "#CBD6E1";
25
+ export declare const gray400: "#94A5B8";
26
+ export declare const gray500: "#64778B";
27
+ export declare const gray600: "#475769";
28
+ export declare const gray700: "#334355";
29
+ export declare const gray800: "#1E2B3B";
30
+ export declare const gray900: "#0F192A";
31
31
  export declare const cyanSignal: "#22D3EE";
32
32
  export declare const tealVital: "#14B8A6";
33
33
  export declare const greenPositive: "#10B981";
34
34
  export declare const violetData: "#8B5CF6";
35
35
  export declare const redAlert: "#EF4444";
36
36
  export declare const amberCaution: "#F59E0B";
37
- export declare const onSurfacePrimary: "#475569";
38
- export declare const onSurfaceElevated: "#475569";
39
- export declare const onSurfaceRecessed: "#475569";
37
+ export declare const onSurfacePrimary: "#475769";
38
+ export declare const onSurfaceElevated: "#475769";
39
+ export declare const onSurfaceRecessed: "#475769";
40
40
  export declare const onBluePrimary: "#FFFFFF";
41
41
  export declare const onBlueVivid: "#FFFFFF";
42
42
  export declare const onBlueDeep: "#FFFFFF";
43
43
  export declare const onRedAlert: "#FFFFFF";
44
- export declare const onTealVital: "#0F172A";
45
- export declare const onAmberCaution: "#0F172A";
44
+ export declare const onTealVital: "#0F192A";
45
+ export declare const onAmberCaution: "#0F192A";
46
46
  export declare const textXs: "0.694rem";
47
47
  export declare const textSm: "0.833rem";
48
48
  export declare const textBase: "1rem";
@@ -116,32 +116,32 @@ export declare const contentWide: "1024px";
116
116
  export declare const contentFull: "1280px";
117
117
  export declare const colors: {
118
118
  readonly surface: {
119
- readonly primary: "#FAFCFE";
119
+ readonly primary: "#FAFCFF";
120
120
  readonly elevated: "#FFFFFF";
121
- readonly recessed: "#F0F4F8";
122
- readonly subtle: "#E8EDF3";
121
+ readonly recessed: "#F0F5F8";
122
+ readonly subtle: "#E8EEF3";
123
123
  };
124
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";
125
+ readonly glow: "#E8F5FD";
126
+ readonly wash: "#DBECFE";
127
+ readonly indicator: "#93CCFD";
128
+ readonly primary: "#3B8EF6";
129
+ readonly vivid: "#2570EB";
130
+ readonly deep: "#1D5AD8";
131
+ readonly midnight: "#1E3E5F";
132
+ readonly abyss: "#0F192A";
133
133
  };
134
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";
135
+ readonly 50: "#F7FAFD";
136
+ readonly 100: "#F1F6F9";
137
+ readonly 200: "#E2E9F0";
138
+ readonly 300: "#CBD6E1";
139
+ readonly 400: "#94A5B8";
140
+ readonly 500: "#64778B";
141
+ readonly 600: "#475769";
142
+ readonly 700: "#334355";
143
+ readonly 800: "#1E2B3B";
144
+ readonly 900: "#0F192A";
145
145
  };
146
146
  readonly semantic: {
147
147
  readonly cyanSignal: "#22D3EE";
@@ -152,15 +152,15 @@ export declare const colors: {
152
152
  readonly amberCaution: "#F59E0B";
153
153
  };
154
154
  readonly on: {
155
- readonly surfacePrimary: "#475569";
156
- readonly surfaceElevated: "#475569";
157
- readonly surfaceRecessed: "#475569";
155
+ readonly surfacePrimary: "#475769";
156
+ readonly surfaceElevated: "#475769";
157
+ readonly surfaceRecessed: "#475769";
158
158
  readonly bluePrimary: "#FFFFFF";
159
159
  readonly blueVivid: "#FFFFFF";
160
160
  readonly blueDeep: "#FFFFFF";
161
161
  readonly redAlert: "#FFFFFF";
162
- readonly tealVital: "#0F172A";
163
- readonly amberCaution: "#0F172A";
162
+ readonly tealVital: "#0F192A";
163
+ readonly amberCaution: "#0F192A";
164
164
  };
165
165
  };
166
166
  export declare const typography: {
package/dist/tokens.js CHANGED
@@ -8,30 +8,30 @@
8
8
  export const fontSans = "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif";
9
9
  export const fontMono = "'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace";
10
10
  // ── Surface Palette ──
11
- export const surfacePrimary = "#FAFCFE";
11
+ export const surfacePrimary = "#FAFCFF";
12
12
  export const surfaceElevated = "#FFFFFF";
13
- export const surfaceRecessed = "#F0F4F8";
14
- export const surfaceSubtle = "#E8EDF3";
13
+ export const surfaceRecessed = "#F0F5F8";
14
+ export const surfaceSubtle = "#E8EEF3";
15
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";
16
+ export const blueGlow = "#E8F5FD";
17
+ export const blueWash = "#DBECFE";
18
+ export const blueIndicator = "#93CCFD";
19
+ export const bluePrimary = "#3B8EF6";
20
+ export const blueVivid = "#2570EB";
21
+ export const blueDeep = "#1D5AD8";
22
+ export const blueMidnight = "#1E3E5F";
23
+ export const blueAbyss = "#0F192A";
24
+ // ── Cool Grays (cyan-shifted) ──
25
+ export const gray50 = "#F7FAFD";
26
+ export const gray100 = "#F1F6F9";
27
+ export const gray200 = "#E2E9F0";
28
+ export const gray300 = "#CBD6E1";
29
+ export const gray400 = "#94A5B8";
30
+ export const gray500 = "#64778B";
31
+ export const gray600 = "#475769";
32
+ export const gray700 = "#334355";
33
+ export const gray800 = "#1E2B3B";
34
+ export const gray900 = "#0F192A";
35
35
  // ── Semantic Accents ──
36
36
  export const cyanSignal = "#22D3EE";
37
37
  export const tealVital = "#14B8A6";
@@ -40,15 +40,15 @@ export const violetData = "#8B5CF6";
40
40
  export const redAlert = "#EF4444";
41
41
  export const amberCaution = "#F59E0B";
42
42
  // ── On-Colors (contrast-safe text pairings) ──
43
- export const onSurfacePrimary = "#475569";
44
- export const onSurfaceElevated = "#475569";
45
- export const onSurfaceRecessed = "#475569";
43
+ export const onSurfacePrimary = "#475769";
44
+ export const onSurfaceElevated = "#475769";
45
+ export const onSurfaceRecessed = "#475769";
46
46
  export const onBluePrimary = "#FFFFFF";
47
47
  export const onBlueVivid = "#FFFFFF";
48
48
  export const onBlueDeep = "#FFFFFF";
49
49
  export const onRedAlert = "#FFFFFF";
50
- export const onTealVital = "#0F172A";
51
- export const onAmberCaution = "#0F172A";
50
+ export const onTealVital = "#0F192A";
51
+ export const onAmberCaution = "#0F192A";
52
52
  // ── Type Scale (Major Third, 1.250 ratio) ──
53
53
  export const textXs = "0.694rem";
54
54
  export const textSm = "0.833rem";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dillingerstaffing/strand",
3
- "version": "0.3.1",
3
+ "version": "0.5.0",
4
4
  "description": "Strand Design Language tokens - CSS custom properties and JS constants",
5
5
  "author": "Dillinger Staffing <engineering@dillingerstaffing.com> (https://dillingerstaffing.com)",
6
6
  "license": "MIT",