Skip to content

Commit e31d159

Browse files
marklearstmarklearst
committed
docs(contract): clarify DTCG alignment and examples
1 parent b14da0c commit e31d159

File tree

9 files changed

+871
-231
lines changed

9 files changed

+871
-231
lines changed

docs/examples/dtcg-compliant.json renamed to assets/schema/dtcg-compliant.json

Lines changed: 135 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,64 @@
11
{
2+
"$description": "DTCG 2025.10 compliant example. This file uses strict DTCG format without Variable Design Standard (VDS) extensions like modes in $value.",
23
"color": {
34
"base": {
45
"gray": {
56
"100": {
67
"$type": "color",
7-
"$value": "#f5f5f5"
8+
"$value": {
9+
"colorSpace": "srgb",
10+
"components": [0.96, 0.96, 0.96],
11+
"hex": "#f5f5f5"
12+
}
813
},
914
"900": {
1015
"$type": "color",
11-
"$value": "#1a1a1a"
16+
"$value": {
17+
"colorSpace": "srgb",
18+
"components": [0.1, 0.1, 0.1],
19+
"hex": "#1a1a1a"
20+
}
1221
}
1322
},
1423
"primary": {
1524
"$type": "color",
16-
"$value": "#0066cc"
25+
"$value": {
26+
"colorSpace": "srgb",
27+
"components": [0.278431, 0.388235, 0.74902],
28+
"hex": "#4763BF"
29+
},
30+
"$extensions": {
31+
"com.variables-contract.version": "0.4.0"
32+
}
33+
},
34+
"secondary": {
35+
"$type": "color",
36+
"$value": {
37+
"colorSpace": "srgb",
38+
"components": [0.4, 0.4, 0.4],
39+
"hex": "#666666"
40+
}
1741
}
1842
},
1943
"semantic": {
20-
"$ref": "#/color/base",
44+
"$extends": "{color.base}",
2145
"text": {
2246
"primary": {
2347
"$type": "color",
24-
"$value": {
25-
"light": "{color.base.gray.900}",
26-
"dark": "{color.base.gray.100}"
27-
}
48+
"$value": "{color.base.gray.900}"
2849
},
2950
"secondary": {
3051
"$type": "color",
31-
"$value": {
32-
"light": "#666666",
33-
"dark": "#999999"
34-
}
52+
"$value": "{color.base.secondary}"
3553
}
3654
},
3755
"surface": {
3856
"default": {
3957
"$type": "color",
4058
"$value": {
41-
"light": "#ffffff",
42-
"dark": "#000000"
59+
"colorSpace": "srgb",
60+
"components": [1, 1, 1],
61+
"hex": "#ffffff"
4362
}
4463
}
4564
}
@@ -49,15 +68,24 @@
4968
"base": {
5069
"small": {
5170
"$type": "dimension",
52-
"$value": "8px"
71+
"$value": {
72+
"value": 8,
73+
"unit": "px"
74+
}
5375
},
5476
"medium": {
5577
"$type": "dimension",
56-
"$value": "16px"
78+
"$value": {
79+
"value": 16,
80+
"unit": "px"
81+
}
5782
},
5883
"large": {
5984
"$type": "dimension",
60-
"$value": "24px"
85+
"$value": {
86+
"value": 24,
87+
"unit": "px"
88+
}
6189
}
6290
},
6391
"semantic": {
@@ -80,10 +108,6 @@
80108
"primary": {
81109
"$type": "fontFamily",
82110
"$value": "Roboto"
83-
},
84-
"secondary": {
85-
"$type": "fontFamily",
86-
"$value": ["Roboto", "Helvetica", "Arial", "sans-serif"]
87111
}
88112
},
89113
"weight": {
@@ -99,22 +123,34 @@
99123
"size": {
100124
"base": {
101125
"$type": "dimension",
102-
"$value": "16px"
126+
"$value": {
127+
"value": 16,
128+
"unit": "px"
129+
}
103130
},
104131
"lg": {
105132
"$type": "dimension",
106-
"$value": "24px"
133+
"$value": {
134+
"value": 24,
135+
"unit": "px"
136+
}
107137
}
108138
}
109139
},
110140
"duration": {
111141
"fast": {
112142
"$type": "duration",
113-
"$value": "200ms"
143+
"$value": {
144+
"value": 200,
145+
"unit": "ms"
146+
}
114147
},
115148
"slow": {
116149
"$type": "duration",
117-
"$value": "500ms"
150+
"$value": {
151+
"value": 500,
152+
"unit": "ms"
153+
}
118154
}
119155
},
120156
"easing": {
@@ -131,15 +167,25 @@
131167
"default": {
132168
"$type": "border",
133169
"$value": {
134-
"width": { "value": 1, "unit": "px" },
135-
"color": "#e0e0e0",
170+
"width": {
171+
"value": 1,
172+
"unit": "px"
173+
},
174+
"color": {
175+
"colorSpace": "srgb",
176+
"components": [0.88, 0.88, 0.88],
177+
"hex": "#e0e0e0"
178+
},
136179
"style": "solid"
137180
}
138181
},
139182
"thick": {
140183
"$type": "border",
141184
"$value": {
142-
"width": { "value": 2, "unit": "px" },
185+
"width": {
186+
"value": 2,
187+
"unit": "px"
188+
},
143189
"color": "{color.semantic.text.secondary}",
144190
"style": "solid"
145191
}
@@ -150,7 +196,10 @@
150196
"$type": "transition",
151197
"$value": {
152198
"duration": "{duration.fast}",
153-
"delay": "0ms",
199+
"delay": {
200+
"value": 0,
201+
"unit": "ms"
202+
},
154203
"timingFunction": "{easing.default}"
155204
}
156205
}
@@ -159,21 +208,53 @@
159208
"small": {
160209
"$type": "shadow",
161210
"$value": {
162-
"color": "rgba(0, 0, 0, 0.1)",
163-
"offsetX": { "value": 0, "unit": "px" },
164-
"offsetY": { "value": 2, "unit": "px" },
165-
"blur": { "value": 4, "unit": "px" },
166-
"spread": { "value": 0, "unit": "px" }
211+
"color": {
212+
"colorSpace": "srgb",
213+
"components": [0, 0, 0],
214+
"alpha": 0.1
215+
},
216+
"offsetX": {
217+
"value": 0,
218+
"unit": "px"
219+
},
220+
"offsetY": {
221+
"value": 2,
222+
"unit": "px"
223+
},
224+
"blur": {
225+
"value": 4,
226+
"unit": "px"
227+
},
228+
"spread": {
229+
"value": 0,
230+
"unit": "px"
231+
}
167232
}
168233
},
169234
"large": {
170235
"$type": "shadow",
171236
"$value": {
172-
"color": "rgba(0, 0, 0, 0.2)",
173-
"offsetX": { "value": 0, "unit": "px" },
174-
"offsetY": { "value": 8, "unit": "px" },
175-
"blur": { "value": 16, "unit": "px" },
176-
"spread": { "value": 0, "unit": "px" }
237+
"color": {
238+
"colorSpace": "srgb",
239+
"components": [0, 0, 0],
240+
"alpha": 0.2
241+
},
242+
"offsetX": {
243+
"value": 0,
244+
"unit": "px"
245+
},
246+
"offsetY": {
247+
"value": 8,
248+
"unit": "px"
249+
},
250+
"blur": {
251+
"value": 16,
252+
"unit": "px"
253+
},
254+
"spread": {
255+
"value": 0,
256+
"unit": "px"
257+
}
177258
}
178259
}
179260
},
@@ -186,7 +267,11 @@
186267
"position": 0
187268
},
188269
{
189-
"color": "#004499",
270+
"color": {
271+
"colorSpace": "srgb",
272+
"components": [0, 0.27, 0.6],
273+
"hex": "#004499"
274+
},
190275
"position": 1
191276
}
192277
]
@@ -199,7 +284,10 @@
199284
"fontFamily": "{font.family.primary}",
200285
"fontSize": "{font.size.lg}",
201286
"fontWeight": "{font.weight.bold}",
202-
"letterSpacing": { "value": 0, "unit": "px" },
287+
"letterSpacing": {
288+
"value": 0,
289+
"unit": "px"
290+
},
203291
"lineHeight": 1.5
204292
}
205293
},
@@ -209,7 +297,10 @@
209297
"fontFamily": "{font.family.primary}",
210298
"fontSize": "{font.size.base}",
211299
"fontWeight": "{font.weight.normal}",
212-
"letterSpacing": { "value": 0, "unit": "px" },
300+
"letterSpacing": {
301+
"value": 0,
302+
"unit": "px"
303+
},
213304
"lineHeight": 1.2
214305
}
215306
}
@@ -220,19 +311,13 @@
220311
"background": {
221312
"default": {
222313
"$type": "color",
223-
"$value": {
224-
"light": "{color.semantic.surface.default}",
225-
"dark": "{color.semantic.surface.default}"
226-
}
314+
"$value": "{color.semantic.surface.default}"
227315
}
228316
},
229317
"text": {
230318
"default": {
231319
"$type": "color",
232-
"$value": {
233-
"light": "{color.semantic.text.primary}",
234-
"dark": "{color.semantic.text.primary}"
235-
}
320+
"$value": "{color.semantic.text.primary}"
236321
}
237322
}
238323
},
@@ -257,4 +342,3 @@
257342
}
258343
}
259344
}
260-

0 commit comments

Comments
 (0)