@primitiv-ui/tokens 0.1.28 → 0.1.29
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/README.md +28 -0
- package/package.json +1 -1
- package/src/context.json +5573 -1945
- package/src/dark-mode-content.test.ts +43 -0
- package/src/intent.json +160 -0
- package/src/palette.json +420 -0
|
@@ -65,12 +65,53 @@ describe.each(['content/primary', 'content/secondary'] as const)('%s', (token) =
|
|
|
65
65
|
})
|
|
66
66
|
})
|
|
67
67
|
|
|
68
|
+
// The neutral alpha ramp (Path A): the mode's veil colour — the neutral ramp's
|
|
69
|
+
// 900 end (soft-black in light, soft-white in dark) — held constant across all
|
|
70
|
+
// ten steps while only the alpha byte climbs. Guards both the anchor (the rgb
|
|
71
|
+
// part must be the veil, so the ramp inverts with the theme) and the curve
|
|
72
|
+
// (strictly increasing opacity).
|
|
73
|
+
describe('color/neutral-alpha ramp', () => {
|
|
74
|
+
const steps = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'] as const
|
|
75
|
+
|
|
76
|
+
it.each(['light', 'dark'] as const)("%s mode anchors every step on the mode's veil colour", (mode) => {
|
|
77
|
+
const veil = resolveRef(mode, '{color.neutral.900}')
|
|
78
|
+
for (const step of steps) {
|
|
79
|
+
expect(resolveRef(mode, `{color.neutral-alpha.${step}}`).slice(0, 7)).toBe(veil)
|
|
80
|
+
}
|
|
81
|
+
})
|
|
82
|
+
|
|
83
|
+
it.each(['light', 'dark'] as const)('%s mode climbs a strictly increasing alpha curve', (mode) => {
|
|
84
|
+
const alphas = steps.map((step) => parseInt(resolveRef(mode, `{color.neutral-alpha.${step}}`).slice(7, 9), 16))
|
|
85
|
+
for (let i = 1; i < alphas.length; i++) {
|
|
86
|
+
expect(alphas[i]).toBeGreaterThan(alphas[i - 1])
|
|
87
|
+
}
|
|
88
|
+
})
|
|
89
|
+
|
|
90
|
+
// The inverse companion: every step is the OTHER theme's neutral-alpha step,
|
|
91
|
+
// so each mode carries the opposite veil (soft-white in light, soft-black in
|
|
92
|
+
// dark). It exists for Figma's dark step-swap idiom — the file resolves the
|
|
93
|
+
// Palette collection through Light mode even on dark frames, so dark Intent
|
|
94
|
+
// variables alias neutral-alpha-inverse to reach the white veil — and the
|
|
95
|
+
// exact mirror keeps a variables backup a no-op.
|
|
96
|
+
it.each([
|
|
97
|
+
['light', 'dark'],
|
|
98
|
+
['dark', 'light'],
|
|
99
|
+
] as const)("neutral-alpha-inverse in %s mode mirrors the %s mode's neutral-alpha ramp exactly", (mode, other) => {
|
|
100
|
+
for (const step of steps) {
|
|
101
|
+
expect(resolveRef(mode, `{color.neutral-alpha-inverse.${step}}`)).toBe(
|
|
102
|
+
resolveRef(other, `{color.neutral-alpha.${step}}`),
|
|
103
|
+
)
|
|
104
|
+
}
|
|
105
|
+
})
|
|
106
|
+
})
|
|
107
|
+
|
|
68
108
|
// Surfaces and borders that are supposed to track the theme (paler in light,
|
|
69
109
|
// darker in dark) rather than stay fixed.
|
|
70
110
|
describe.each([
|
|
71
111
|
'surface/subtle',
|
|
72
112
|
'surface/raised',
|
|
73
113
|
'surface/overlay',
|
|
114
|
+
'surface/floating',
|
|
74
115
|
'surface/inverse',
|
|
75
116
|
'surface/sunken',
|
|
76
117
|
'border/subtle',
|
|
@@ -85,6 +126,8 @@ describe.each([
|
|
|
85
126
|
'action/secondary/border/default',
|
|
86
127
|
'action/secondary/border/hover',
|
|
87
128
|
'action/secondary/border/disabled',
|
|
129
|
+
'action/ghost/hover',
|
|
130
|
+
'action/ghost/active',
|
|
88
131
|
] as const)('%s', (token) => {
|
|
89
132
|
it('resolves to a different colour in light vs dark mode', () => {
|
|
90
133
|
expect(intentColor('light', token)).not.toBe(intentColor('dark', token))
|
package/src/intent.json
CHANGED
|
@@ -93,6 +93,16 @@
|
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
95
|
},
|
|
96
|
+
"ghost": {
|
|
97
|
+
"hover": {
|
|
98
|
+
"$type": "color",
|
|
99
|
+
"$value": "{color.neutral-alpha.200}"
|
|
100
|
+
},
|
|
101
|
+
"active": {
|
|
102
|
+
"$type": "color",
|
|
103
|
+
"$value": "{color.neutral-alpha.300}"
|
|
104
|
+
}
|
|
105
|
+
},
|
|
96
106
|
"danger": {
|
|
97
107
|
"foreground": {
|
|
98
108
|
"default": {
|
|
@@ -164,11 +174,81 @@
|
|
|
164
174
|
}
|
|
165
175
|
}
|
|
166
176
|
},
|
|
177
|
+
"feedback": {
|
|
178
|
+
"neutral": {
|
|
179
|
+
"soft": {
|
|
180
|
+
"background": { "$type": "color", "$value": "{color.neutral.100}" },
|
|
181
|
+
"foreground": { "$type": "color", "$value": "{color.neutral.700}" }
|
|
182
|
+
}
|
|
183
|
+
},
|
|
184
|
+
"success": {
|
|
185
|
+
"soft": {
|
|
186
|
+
"background": { "$type": "color", "$value": "{color.success.100}" },
|
|
187
|
+
"foreground": { "$type": "color", "$value": "{color.success.700}" },
|
|
188
|
+
"border": { "$type": "color", "$value": "{color.success.700}" },
|
|
189
|
+
"hover": { "$type": "color", "$value": "{color.success.200}" },
|
|
190
|
+
"active": { "$type": "color", "$value": "{color.success.300}" }
|
|
191
|
+
},
|
|
192
|
+
"solid": {
|
|
193
|
+
"background": { "$type": "color", "$value": "{color.success.500}" },
|
|
194
|
+
"foreground": { "$type": "color", "$value": "{color.absolute-black}" }
|
|
195
|
+
}
|
|
196
|
+
},
|
|
197
|
+
"warning": {
|
|
198
|
+
"soft": {
|
|
199
|
+
"background": { "$type": "color", "$value": "{color.warning.100}" },
|
|
200
|
+
"foreground": { "$type": "color", "$value": "{color.warning.700}" },
|
|
201
|
+
"border": { "$type": "color", "$value": "{color.warning.700}" },
|
|
202
|
+
"hover": { "$type": "color", "$value": "{color.warning.200}" },
|
|
203
|
+
"active": { "$type": "color", "$value": "{color.warning.300}" }
|
|
204
|
+
},
|
|
205
|
+
"solid": {
|
|
206
|
+
"background": { "$type": "color", "$value": "{color.warning.500}" },
|
|
207
|
+
"foreground": { "$type": "color", "$value": "{color.absolute-black}" }
|
|
208
|
+
}
|
|
209
|
+
},
|
|
210
|
+
"info": {
|
|
211
|
+
"soft": {
|
|
212
|
+
"background": { "$type": "color", "$value": "{color.info.100}" },
|
|
213
|
+
"foreground": { "$type": "color", "$value": "{color.info.700}" },
|
|
214
|
+
"border": { "$type": "color", "$value": "{color.info.700}" },
|
|
215
|
+
"hover": { "$type": "color", "$value": "{color.info.200}" },
|
|
216
|
+
"active": { "$type": "color", "$value": "{color.info.300}" }
|
|
217
|
+
},
|
|
218
|
+
"solid": {
|
|
219
|
+
"background": { "$type": "color", "$value": "{color.info.500}" },
|
|
220
|
+
"foreground": { "$type": "color", "$value": "{color.absolute-black}" }
|
|
221
|
+
}
|
|
222
|
+
},
|
|
223
|
+
"danger": {
|
|
224
|
+
"soft": {
|
|
225
|
+
"background": { "$type": "color", "$value": "{color.danger.100}" },
|
|
226
|
+
"foreground": { "$type": "color", "$value": "{color.danger.700}" },
|
|
227
|
+
"border": { "$type": "color", "$value": "{color.danger.700}" },
|
|
228
|
+
"hover": { "$type": "color", "$value": "{color.danger.200}" },
|
|
229
|
+
"active": { "$type": "color", "$value": "{color.danger.300}" }
|
|
230
|
+
},
|
|
231
|
+
"solid": {
|
|
232
|
+
"background": { "$type": "color", "$value": "{color.danger.500}" },
|
|
233
|
+
"foreground": { "$type": "color", "$value": "{color.absolute-white}" }
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
},
|
|
237
|
+
"choice-card": {
|
|
238
|
+
"selected": {
|
|
239
|
+
"background": { "$type": "color", "$value": "{color.brand.100}" },
|
|
240
|
+
"border": { "$type": "color", "$value": "{color.brand.500}" }
|
|
241
|
+
}
|
|
242
|
+
},
|
|
167
243
|
"surface": {
|
|
168
244
|
"default": {
|
|
169
245
|
"$type": "color",
|
|
170
246
|
"$value": "{color.absolute-white}"
|
|
171
247
|
},
|
|
248
|
+
"floating": {
|
|
249
|
+
"$type": "color",
|
|
250
|
+
"$value": "{color.absolute-white}"
|
|
251
|
+
},
|
|
172
252
|
"subtle": {
|
|
173
253
|
"$type": "color",
|
|
174
254
|
"$value": "{color.neutral.100}"
|
|
@@ -385,6 +465,16 @@
|
|
|
385
465
|
}
|
|
386
466
|
}
|
|
387
467
|
},
|
|
468
|
+
"ghost": {
|
|
469
|
+
"hover": {
|
|
470
|
+
"$type": "color",
|
|
471
|
+
"$value": "{color.neutral-alpha.200}"
|
|
472
|
+
},
|
|
473
|
+
"active": {
|
|
474
|
+
"$type": "color",
|
|
475
|
+
"$value": "{color.neutral-alpha.300}"
|
|
476
|
+
}
|
|
477
|
+
},
|
|
388
478
|
"danger": {
|
|
389
479
|
"foreground": {
|
|
390
480
|
"default": {
|
|
@@ -456,11 +546,81 @@
|
|
|
456
546
|
}
|
|
457
547
|
}
|
|
458
548
|
},
|
|
549
|
+
"feedback": {
|
|
550
|
+
"neutral": {
|
|
551
|
+
"soft": {
|
|
552
|
+
"background": { "$type": "color", "$value": "{color.neutral.100}" },
|
|
553
|
+
"foreground": { "$type": "color", "$value": "{color.neutral.700}" }
|
|
554
|
+
}
|
|
555
|
+
},
|
|
556
|
+
"success": {
|
|
557
|
+
"soft": {
|
|
558
|
+
"background": { "$type": "color", "$value": "{color.success.100}" },
|
|
559
|
+
"foreground": { "$type": "color", "$value": "{color.success.700}" },
|
|
560
|
+
"border": { "$type": "color", "$value": "{color.success.700}" },
|
|
561
|
+
"hover": { "$type": "color", "$value": "{color.success.200}" },
|
|
562
|
+
"active": { "$type": "color", "$value": "{color.success.300}" }
|
|
563
|
+
},
|
|
564
|
+
"solid": {
|
|
565
|
+
"background": { "$type": "color", "$value": "{color.success.500}" },
|
|
566
|
+
"foreground": { "$type": "color", "$value": "{color.absolute-black}" }
|
|
567
|
+
}
|
|
568
|
+
},
|
|
569
|
+
"warning": {
|
|
570
|
+
"soft": {
|
|
571
|
+
"background": { "$type": "color", "$value": "{color.warning.100}" },
|
|
572
|
+
"foreground": { "$type": "color", "$value": "{color.warning.700}" },
|
|
573
|
+
"border": { "$type": "color", "$value": "{color.warning.700}" },
|
|
574
|
+
"hover": { "$type": "color", "$value": "{color.warning.200}" },
|
|
575
|
+
"active": { "$type": "color", "$value": "{color.warning.300}" }
|
|
576
|
+
},
|
|
577
|
+
"solid": {
|
|
578
|
+
"background": { "$type": "color", "$value": "{color.warning.500}" },
|
|
579
|
+
"foreground": { "$type": "color", "$value": "{color.absolute-black}" }
|
|
580
|
+
}
|
|
581
|
+
},
|
|
582
|
+
"info": {
|
|
583
|
+
"soft": {
|
|
584
|
+
"background": { "$type": "color", "$value": "{color.info.100}" },
|
|
585
|
+
"foreground": { "$type": "color", "$value": "{color.info.700}" },
|
|
586
|
+
"border": { "$type": "color", "$value": "{color.info.700}" },
|
|
587
|
+
"hover": { "$type": "color", "$value": "{color.info.200}" },
|
|
588
|
+
"active": { "$type": "color", "$value": "{color.info.300}" }
|
|
589
|
+
},
|
|
590
|
+
"solid": {
|
|
591
|
+
"background": { "$type": "color", "$value": "{color.info.500}" },
|
|
592
|
+
"foreground": { "$type": "color", "$value": "{color.absolute-black}" }
|
|
593
|
+
}
|
|
594
|
+
},
|
|
595
|
+
"danger": {
|
|
596
|
+
"soft": {
|
|
597
|
+
"background": { "$type": "color", "$value": "{color.danger.100}" },
|
|
598
|
+
"foreground": { "$type": "color", "$value": "{color.danger.700}" },
|
|
599
|
+
"border": { "$type": "color", "$value": "{color.danger.700}" },
|
|
600
|
+
"hover": { "$type": "color", "$value": "{color.danger.200}" },
|
|
601
|
+
"active": { "$type": "color", "$value": "{color.danger.300}" }
|
|
602
|
+
},
|
|
603
|
+
"solid": {
|
|
604
|
+
"background": { "$type": "color", "$value": "{color.danger.500}" },
|
|
605
|
+
"foreground": { "$type": "color", "$value": "{color.absolute-white}" }
|
|
606
|
+
}
|
|
607
|
+
}
|
|
608
|
+
},
|
|
609
|
+
"choice-card": {
|
|
610
|
+
"selected": {
|
|
611
|
+
"background": { "$type": "color", "$value": "{color.brand.100}" },
|
|
612
|
+
"border": { "$type": "color", "$value": "{color.brand.500}" }
|
|
613
|
+
}
|
|
614
|
+
},
|
|
459
615
|
"surface": {
|
|
460
616
|
"default": {
|
|
461
617
|
"$type": "color",
|
|
462
618
|
"$value": "{color.black}"
|
|
463
619
|
},
|
|
620
|
+
"floating": {
|
|
621
|
+
"$type": "color",
|
|
622
|
+
"$value": "{color.neutral.100}"
|
|
623
|
+
},
|
|
464
624
|
"subtle": {
|
|
465
625
|
"$type": "color",
|
|
466
626
|
"$value": "{color.neutral.100}"
|