Skip to content

Commit 0fd7310

Browse files
brainandbytejasonjasonrundell
brainandbytejason
and
jasonrundell
authored
refactor: convert design tokens to DTCG 2025.10 format (#126)
* Bump multiple Storybook and related dependencies in package-lock.json * refactor: token access patterns in components * fix: resolve yaml@2 dependency for vitest/vite compatibility Made-with: Cursor --------- Co-authored-by: Jason Rundell <jason.rundell@gmail.com>
1 parent c5e6a26 commit 0fd7310

File tree

16 files changed

+1698
-308
lines changed

16 files changed

+1698
-308
lines changed

‎package-lock.json‎

Lines changed: 1143 additions & 70 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@jasonrundell/dropship",
3-
"version": "3.3.1",
3+
"version": "3.4.0",
44
"description": "Get a React project up and running really fast with Dropship.",
55
"main": "dist/index.es.js",
66
"module": "dist/index.es.js",
@@ -28,12 +28,15 @@
2828
"storybook": "storybook dev -p 6006",
2929
"build-storybook": "storybook build",
3030
"release": "auto shipit --base-branch=main",
31+
"test": "vitest run",
32+
"test:watch": "vitest",
3133
"prettier": "prettier --write ."
3234
},
3335
"dependencies": {
3436
"@pigment-css/react": "^0.0.29",
3537
"react": "^18.3.1",
36-
"react-dom": "^18.3.1"
38+
"react-dom": "^18.3.1",
39+
"yaml": "^2.8.2"
3740
},
3841
"devDependencies": {
3942
"@chromatic-com/storybook": "^3.2.2",
@@ -62,7 +65,8 @@
6265
"typescript-eslint": "^8.11.0",
6366
"vite": "^5.4.10",
6467
"vite-plugin-css": "^1.0.0",
65-
"vite-plugin-dts": "^4.3.0"
68+
"vite-plugin-dts": "^4.3.0",
69+
"vitest": "^4.0.18"
6670
},
6771
"eslintConfig": {
6872
"extends": [

‎src/lib/common.tokens.json‎

Lines changed: 131 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,206 +1,241 @@
11
{
2+
"$description": "Design tokens for the Dropship project, conforming to the DTCG Format Module 2025.10 (https://tr.designtokens.org/format/). Not all tokens are implemented in components; some exist as examples.",
23
"sizes": {
4+
"$type": "dimension",
35
"xsmall": {
4-
"value": 0.5,
5-
"unit": "rem"
6+
"$value": { "value": 0.5, "unit": "rem" }
67
},
78
"small": {
8-
"value": 1,
9-
"unit": "rem"
9+
"$value": { "value": 1, "unit": "rem" }
1010
},
1111
"medium": {
12-
"value": 1.5,
13-
"unit": "rem"
12+
"$value": { "value": 1.5, "unit": "rem" }
1413
},
1514
"large": {
16-
"value": 2,
17-
"unit": "rem"
15+
"$value": { "value": 2, "unit": "rem" }
1816
},
1917
"xlarge": {
20-
"value": 3,
21-
"unit": "rem"
18+
"$value": { "value": 3, "unit": "rem" }
2219
},
2320
"lineHeight": {
24-
"value": 1.3,
25-
"unit": "rem"
21+
"$value": { "value": 1.3, "unit": "rem" }
2622
},
2723
"breakpoints": {
2824
"small": {
29-
"value": 30,
30-
"unit": "rem"
25+
"$value": { "value": 30, "unit": "rem" }
3126
},
3227
"medium": {
33-
"value": 48,
34-
"unit": "rem"
28+
"$value": { "value": 48, "unit": "rem" }
3529
},
3630
"large": {
37-
"value": 64,
38-
"unit": "rem"
31+
"$value": { "value": 64, "unit": "rem" }
3932
}
4033
},
4134
"padding": {
4235
"xsmall": {
43-
"value": 0.75,
44-
"unit": "rem"
36+
"$value": { "value": 0.75, "unit": "rem" }
4537
},
4638
"small": {
47-
"value": 1,
48-
"unit": "rem"
39+
"$value": { "value": 1, "unit": "rem" }
4940
},
5041
"medium": {
51-
"value": 1.25,
52-
"unit": "rem"
42+
"$value": { "value": 1.25, "unit": "rem" }
5343
},
5444
"large": {
55-
"value": 2,
56-
"unit": "rem"
45+
"$value": { "value": 2, "unit": "rem" }
5746
},
5847
"xlarge": {
59-
"value": 3,
60-
"unit": "rem"
48+
"$value": { "value": 3, "unit": "rem" }
6149
}
6250
},
6351
"fonts": {
6452
"small": {
65-
"value": 1,
66-
"unit": "rem"
53+
"$value": { "value": 1, "unit": "rem" }
6754
},
6855
"medium": {
69-
"value": 1.5,
70-
"unit": "rem"
56+
"$value": { "value": 1.5, "unit": "rem" }
7157
},
7258
"large": {
73-
"value": 2,
74-
"unit": "rem"
59+
"$value": { "value": 2, "unit": "rem" }
7560
}
7661
},
7762
"headings": {
7863
"h1": {
79-
"value": 2,
80-
"unit": "rem"
64+
"$value": { "value": 2, "unit": "rem" }
8165
},
8266
"h2": {
83-
"value": 1.5,
84-
"unit": "rem"
67+
"$value": { "value": 1.5, "unit": "rem" }
8568
},
8669
"h3": {
87-
"value": 1.25,
88-
"unit": "rem"
70+
"$value": { "value": 1.25, "unit": "rem" }
8971
},
9072
"h4": {
91-
"value": 1,
92-
"unit": "rem"
73+
"$value": { "value": 1, "unit": "rem" }
9374
},
9475
"h5": {
95-
"value": 0.875,
96-
"unit": "rem"
76+
"$value": { "value": 0.875, "unit": "rem" }
9777
},
9878
"h6": {
99-
"value": 0.85,
100-
"unit": "rem"
79+
"$value": { "value": 0.85, "unit": "rem" }
10180
}
10281
}
10382
},
10483
"colors": {
84+
"$type": "color",
10585
"primary": {
106-
"value": "#6200ea",
107-
"unit": "hex"
86+
"$value": {
87+
"colorSpace": "srgb",
88+
"components": [0.384, 0, 0.918],
89+
"hex": "#6200ea"
90+
}
10891
},
10992
"primaryVariant": {
110-
"value": "#3700b3",
111-
"unit": "hex"
93+
"$value": {
94+
"colorSpace": "srgb",
95+
"components": [0.216, 0, 0.702],
96+
"hex": "#3700b3"
97+
}
11298
},
11399
"secondary": {
114-
"value": "#03dac6",
115-
"unit": "hex"
100+
"$value": {
101+
"colorSpace": "srgb",
102+
"components": [0.012, 0.855, 0.776],
103+
"hex": "#03dac6"
104+
}
116105
},
117106
"secondaryVariant": {
118-
"value": "#018786",
119-
"unit": "hex"
107+
"$value": {
108+
"colorSpace": "srgb",
109+
"components": [0.004, 0.529, 0.525],
110+
"hex": "#018786"
111+
}
120112
},
121113
"accent": {
122-
"value": "#ff4081",
123-
"unit": "hex"
114+
"$value": {
115+
"colorSpace": "srgb",
116+
"components": [1, 0.251, 0.506],
117+
"hex": "#ff4081"
118+
}
124119
},
125120
"background": {
126-
"value": "#ffffff",
127-
"unit": "hex"
121+
"$value": {
122+
"colorSpace": "srgb",
123+
"components": [1, 1, 1],
124+
"hex": "#ffffff"
125+
}
128126
},
129127
"surface": {
130-
"value": "#f5f5f5",
131-
"unit": "hex"
128+
"$value": {
129+
"colorSpace": "srgb",
130+
"components": [0.961, 0.961, 0.961],
131+
"hex": "#f5f5f5"
132+
}
132133
},
133134
"error": {
134-
"value": "#b00020",
135-
"unit": "hex"
135+
"$value": {
136+
"colorSpace": "srgb",
137+
"components": [0.69, 0, 0.125],
138+
"hex": "#b00020"
139+
}
136140
},
137141
"onPrimary": {
138-
"value": "#ffffff",
139-
"unit": "hex"
142+
"$value": {
143+
"colorSpace": "srgb",
144+
"components": [1, 1, 1],
145+
"hex": "#ffffff"
146+
}
140147
},
141148
"onSecondary": {
142-
"value": "#000000",
143-
"unit": "hex"
149+
"$value": {
150+
"colorSpace": "srgb",
151+
"components": [0, 0, 0],
152+
"hex": "#000000"
153+
}
144154
},
145155
"onBackground": {
146-
"value": "#000000",
147-
"unit": "hex"
156+
"$value": {
157+
"colorSpace": "srgb",
158+
"components": [0, 0, 0],
159+
"hex": "#000000"
160+
}
148161
},
149162
"onSurface": {
150-
"value": "#000000",
151-
"unit": "hex"
163+
"$value": {
164+
"colorSpace": "srgb",
165+
"components": [0, 0, 0],
166+
"hex": "#000000"
167+
}
152168
},
153169
"onError": {
154-
"value": "#ffffff",
155-
"unit": "hex"
170+
"$value": {
171+
"colorSpace": "srgb",
172+
"components": [1, 1, 1],
173+
"hex": "#ffffff"
174+
}
156175
},
157176
"textPrimary": {
158-
"value": "#212121",
159-
"unit": "hex"
177+
"$value": {
178+
"colorSpace": "srgb",
179+
"components": [0.129, 0.129, 0.129],
180+
"hex": "#212121"
181+
}
160182
},
161183
"textSecondary": {
162-
"value": "#757575",
163-
"unit": "hex"
184+
"$value": {
185+
"colorSpace": "srgb",
186+
"components": [0.459, 0.459, 0.459],
187+
"hex": "#757575"
188+
}
164189
},
165190
"border": {
166-
"value": "#e0e0e0",
167-
"unit": "hex"
191+
"$value": {
192+
"colorSpace": "srgb",
193+
"components": [0.878, 0.878, 0.878],
194+
"hex": "#e0e0e0"
195+
}
168196
},
169197
"link": {
170-
"value": "#1e88e5",
171-
"unit": "hex"
198+
"$value": {
199+
"colorSpace": "srgb",
200+
"components": [0.118, 0.533, 0.898],
201+
"hex": "#1e88e5"
202+
}
172203
},
173204
"muted": {
174-
"value": "#f6f6f6",
175-
"unit": "hex"
205+
"$value": {
206+
"colorSpace": "srgb",
207+
"components": [0.965, 0.965, 0.965],
208+
"hex": "#f6f6f6"
209+
}
176210
},
177211
"success": {
178-
"value": "#4caf50",
179-
"unit": "hex"
212+
"$value": {
213+
"colorSpace": "srgb",
214+
"components": [0.298, 0.686, 0.314],
215+
"hex": "#4caf50"
216+
}
180217
},
181218
"warning": {
182-
"value": "#ff9800",
183-
"unit": "hex"
219+
"$value": {
220+
"colorSpace": "srgb",
221+
"components": [1, 0.596, 0],
222+
"hex": "#ff9800"
223+
}
184224
}
185225
},
186226
"fonts": {
227+
"$type": "fontFamily",
187228
"body": {
188-
"family": "Arial, sans-serif"
229+
"$value": ["Arial", "sans-serif"]
189230
},
190231
"heading": {
191-
"family": "Georgia, serif"
232+
"$value": ["Georgia", "serif"]
192233
},
193234
"monospace": {
194-
"family": "Courier New, monospace"
235+
"$value": ["Courier New", "monospace"]
195236
},
196237
"quotes": {
197-
"family": "'Times New Roman', Times, serif"
238+
"$value": ["Times New Roman", "Times", "serif"]
198239
}
199-
},
200-
"### NOTES ###": {
201-
"what this file is used for": "This file is used to store all the design tokens for the project. Design tokens are non-divisible elements of a design system that hold values such as colors, spacing, typography, and more. They are used to maintain visual consistency across the project. This token source file can be consumed by various tools and plugins to generate design tokens in different formats (see https://tr.designtokens.org/format/#file-format).",
202-
"dropship": "Not all values in this token source file are implemented in the components available in this project. Some exist just as examples.",
203-
"learn more": "You can learn more about design tokens and the DTCG format at https://tr.designtokens.org/",
204-
"license": "MIT"
205240
}
206241
}

0 commit comments

Comments
 (0)