@gitbutler/design-core 2.0.0 → 2.2.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.
@@ -0,0 +1,57 @@
1
+ {
2
+ "fx": {
3
+ "shadow": {
4
+ "s": {
5
+ "$type": "shadow",
6
+ "$value": [
7
+ {
8
+ "inset": false,
9
+ "color": "{semantic.shadow-clr}",
10
+ "offsetX": "0px",
11
+ "offsetY": "4px",
12
+ "blur": "14px",
13
+ "spread": "0px"
14
+ }
15
+ ]
16
+ },
17
+ "m": {
18
+ "$type": "shadow",
19
+ "$value": [
20
+ {
21
+ "inset": false,
22
+ "color": "{semantic.shadow-clr}",
23
+ "offsetX": "0px",
24
+ "offsetY": "6px",
25
+ "blur": "30px",
26
+ "spread": "0px"
27
+ }
28
+ ]
29
+ },
30
+ "l": {
31
+ "$type": "shadow",
32
+ "$value": [
33
+ {
34
+ "inset": false,
35
+ "color": "{semantic.shadow-clr}",
36
+ "offsetX": "0px",
37
+ "offsetY": "10px",
38
+ "blur": "40px",
39
+ "spread": "0px"
40
+ }
41
+ ]
42
+ }
43
+ },
44
+ "$extensions": {
45
+ "tokens-bruecke-meta": {
46
+ "useDTCGKeys": true,
47
+ "colorMode": "hex",
48
+ "variableCollections": [
49
+ "core",
50
+ "components",
51
+ "semantic"
52
+ ],
53
+ "createdAt": "2026-03-29T22:16:17.750Z"
54
+ }
55
+ }
56
+ }
57
+ }
@@ -0,0 +1,467 @@
1
+ {
2
+ "semantic": {
3
+ "bg": {
4
+ "1": {
5
+ "$type": "color",
6
+ "$value": "{core.clr.gray.100}",
7
+ "$description": "",
8
+ "$extensions": {
9
+ "mode": {
10
+ "light": "{core.clr.gray.100}",
11
+ "dark": "{core.clr.gray.10}"
12
+ }
13
+ }
14
+ },
15
+ "2": {
16
+ "$type": "color",
17
+ "$value": "{core.clr.gray.90}",
18
+ "$description": "",
19
+ "$extensions": {
20
+ "mode": {
21
+ "light": "{core.clr.gray.90}",
22
+ "dark": "{core.clr.gray.5}"
23
+ }
24
+ }
25
+ },
26
+ "3": {
27
+ "$type": "color",
28
+ "$value": "{core.clr.gray.80}",
29
+ "$description": "",
30
+ "$extensions": {
31
+ "mode": {
32
+ "light": "{core.clr.gray.80}",
33
+ "dark": "{core.clr.gray.0}"
34
+ }
35
+ }
36
+ },
37
+ "overlay": {
38
+ "$type": "color",
39
+ "$value": "#d6d6d673",
40
+ "$description": "",
41
+ "$extensions": {
42
+ "mode": {
43
+ "light": "#d6d6d673",
44
+ "dark": "#00000080"
45
+ }
46
+ }
47
+ },
48
+ "toast": {
49
+ "$type": "color",
50
+ "$value": "{core.clr.gray.5}",
51
+ "$description": "",
52
+ "$extensions": {
53
+ "mode": {
54
+ "light": "{core.clr.gray.5}",
55
+ "dark": "{core.clr.gray.95}"
56
+ }
57
+ }
58
+ },
59
+ "mute": {
60
+ "$type": "color",
61
+ "$value": "{core.clr.gray.95}",
62
+ "$description": "",
63
+ "$extensions": {
64
+ "mode": {
65
+ "light": "{core.clr.gray.95}",
66
+ "dark": "{core.clr.gray.20}"
67
+ }
68
+ }
69
+ },
70
+ "pop": {
71
+ "$type": "color",
72
+ "$value": "{core.clr.pop.95}",
73
+ "$description": "",
74
+ "$extensions": {
75
+ "mode": {
76
+ "light": "{core.clr.pop.95}",
77
+ "dark": "{core.clr.pop.5}"
78
+ }
79
+ }
80
+ },
81
+ "safe": {
82
+ "$type": "color",
83
+ "$value": "{core.clr.safe.95}",
84
+ "$description": "",
85
+ "$extensions": {
86
+ "mode": {
87
+ "light": "{core.clr.safe.95}",
88
+ "dark": "{core.clr.safe.5}"
89
+ }
90
+ }
91
+ },
92
+ "warn": {
93
+ "$type": "color",
94
+ "$value": "{core.clr.warn.95}",
95
+ "$description": "",
96
+ "$extensions": {
97
+ "mode": {
98
+ "light": "{core.clr.warn.95}",
99
+ "dark": "{core.clr.warn.5}"
100
+ }
101
+ }
102
+ },
103
+ "danger": {
104
+ "$type": "color",
105
+ "$value": "{core.clr.danger.95}",
106
+ "$description": "",
107
+ "$extensions": {
108
+ "mode": {
109
+ "light": "{core.clr.danger.95}",
110
+ "dark": "{core.clr.danger.5}"
111
+ }
112
+ }
113
+ },
114
+ "purple": {
115
+ "$type": "color",
116
+ "$value": "{core.clr.purple.95}",
117
+ "$description": "",
118
+ "$extensions": {
119
+ "mode": {
120
+ "light": "{core.clr.purple.95}",
121
+ "dark": "{core.clr.purple.5}"
122
+ }
123
+ }
124
+ }
125
+ },
126
+ "border": {
127
+ "1": {
128
+ "$type": "color",
129
+ "$value": "{core.clr.gray.60}",
130
+ "$description": "",
131
+ "$extensions": {
132
+ "mode": {
133
+ "light": "{core.clr.gray.60}",
134
+ "dark": "{core.clr.gray.40}"
135
+ }
136
+ }
137
+ },
138
+ "2": {
139
+ "$type": "color",
140
+ "$value": "{core.clr.gray.70}",
141
+ "$description": "",
142
+ "$extensions": {
143
+ "mode": {
144
+ "light": "{core.clr.gray.70}",
145
+ "dark": "{core.clr.gray.30}"
146
+ }
147
+ }
148
+ },
149
+ "3": {
150
+ "$type": "color",
151
+ "$value": "{core.clr.gray.80}",
152
+ "$description": "",
153
+ "$extensions": {
154
+ "mode": {
155
+ "light": "{core.clr.gray.80}",
156
+ "dark": "{core.clr.gray.20}"
157
+ }
158
+ }
159
+ }
160
+ },
161
+ "text": {
162
+ "1": {
163
+ "$type": "color",
164
+ "$value": "{core.clr.gray.5}",
165
+ "$description": "",
166
+ "$extensions": {
167
+ "mode": {
168
+ "light": "{core.clr.gray.5}",
169
+ "dark": "{core.clr.gray.95}"
170
+ }
171
+ }
172
+ },
173
+ "2": {
174
+ "$type": "color",
175
+ "$value": "{core.clr.gray.50}",
176
+ "$description": "",
177
+ "$extensions": {
178
+ "mode": {
179
+ "light": "{core.clr.gray.50}",
180
+ "dark": "{core.clr.gray.60}"
181
+ }
182
+ }
183
+ },
184
+ "3": {
185
+ "$type": "color",
186
+ "$value": "{core.clr.gray.60}",
187
+ "$description": "",
188
+ "$extensions": {
189
+ "mode": {
190
+ "light": "{core.clr.gray.60}",
191
+ "dark": "{core.clr.gray.40}"
192
+ }
193
+ }
194
+ },
195
+ "pop": {
196
+ "$type": "color",
197
+ "$value": "{core.clr.pop.10}",
198
+ "$description": "",
199
+ "$extensions": {
200
+ "mode": {
201
+ "light": "{core.clr.pop.10}",
202
+ "dark": "{core.clr.pop.80}"
203
+ }
204
+ }
205
+ },
206
+ "danger": {
207
+ "$type": "color",
208
+ "$value": "{core.clr.danger.10}",
209
+ "$description": "",
210
+ "$extensions": {
211
+ "mode": {
212
+ "light": "{core.clr.danger.10}",
213
+ "dark": "{core.clr.danger.80}"
214
+ }
215
+ }
216
+ },
217
+ "warn": {
218
+ "$type": "color",
219
+ "$value": "{core.clr.warn.10}",
220
+ "$description": "",
221
+ "$extensions": {
222
+ "mode": {
223
+ "light": "{core.clr.warn.10}",
224
+ "dark": "{core.clr.warn.80}"
225
+ }
226
+ }
227
+ },
228
+ "safe": {
229
+ "$type": "color",
230
+ "$value": "{core.clr.safe.10}",
231
+ "$description": "",
232
+ "$extensions": {
233
+ "mode": {
234
+ "light": "{core.clr.safe.10}",
235
+ "dark": "{core.clr.safe.80}"
236
+ }
237
+ }
238
+ },
239
+ "purple": {
240
+ "$type": "color",
241
+ "$value": "{core.clr.purple.10}",
242
+ "$description": "",
243
+ "$extensions": {
244
+ "mode": {
245
+ "light": "{core.clr.purple.10}",
246
+ "dark": "{core.clr.purple.80}"
247
+ }
248
+ }
249
+ }
250
+ },
251
+ "shadow-clr": {
252
+ "$type": "color",
253
+ "$value": "#0000001a",
254
+ "$description": "",
255
+ "$extensions": {
256
+ "mode": {
257
+ "light": "#0000001a",
258
+ "dark": "#00000080"
259
+ }
260
+ }
261
+ },
262
+ "focus": {
263
+ "fg": {
264
+ "$type": "color",
265
+ "$value": "{core.clr.pop.50}",
266
+ "$description": "",
267
+ "$extensions": {
268
+ "mode": {
269
+ "light": "{core.clr.pop.50}",
270
+ "dark": "{core.clr.pop.40}"
271
+ }
272
+ }
273
+ },
274
+ "bg": {
275
+ "$type": "color",
276
+ "$value": "{core.clr.pop.90}",
277
+ "$description": "",
278
+ "$extensions": {
279
+ "mode": {
280
+ "light": "{core.clr.pop.90}",
281
+ "dark": "{core.clr.pop.10}"
282
+ }
283
+ }
284
+ },
285
+ "fg-mute": {
286
+ "$type": "color",
287
+ "$value": "{core.clr.gray.60}",
288
+ "$description": "",
289
+ "$extensions": {
290
+ "mode": {
291
+ "light": "{core.clr.gray.60}",
292
+ "dark": "{core.clr.gray.40}"
293
+ }
294
+ }
295
+ },
296
+ "bg-mute": {
297
+ "$type": "color",
298
+ "$value": "{core.clr.gray.90}",
299
+ "$description": "",
300
+ "$extensions": {
301
+ "mode": {
302
+ "light": "{core.clr.gray.90}",
303
+ "dark": "{core.clr.gray.20}"
304
+ }
305
+ }
306
+ }
307
+ },
308
+ "fill": {
309
+ "safe": {
310
+ "bg": {
311
+ "$type": "color",
312
+ "$value": "{core.clr.safe.50}",
313
+ "$description": "",
314
+ "$extensions": {
315
+ "mode": {
316
+ "light": "{core.clr.safe.50}",
317
+ "dark": "{core.clr.safe.40}"
318
+ }
319
+ }
320
+ },
321
+ "fg": {
322
+ "$type": "color",
323
+ "$value": "{core.clr.safe.95}",
324
+ "$description": "",
325
+ "$extensions": {
326
+ "mode": {
327
+ "light": "{core.clr.safe.95}",
328
+ "dark": "{core.clr.safe.90}"
329
+ }
330
+ }
331
+ }
332
+ },
333
+ "warn": {
334
+ "bg": {
335
+ "$type": "color",
336
+ "$value": "{core.clr.warn.50}",
337
+ "$description": "",
338
+ "$extensions": {
339
+ "mode": {
340
+ "light": "{core.clr.warn.50}",
341
+ "dark": "{core.clr.warn.40}"
342
+ }
343
+ }
344
+ },
345
+ "fg": {
346
+ "$type": "color",
347
+ "$value": "{core.clr.warn.95}",
348
+ "$description": "",
349
+ "$extensions": {
350
+ "mode": {
351
+ "light": "{core.clr.warn.95}",
352
+ "dark": "{core.clr.warn.90}"
353
+ }
354
+ }
355
+ }
356
+ },
357
+ "purple": {
358
+ "bg": {
359
+ "$type": "color",
360
+ "$value": "{core.clr.purple.50}",
361
+ "$description": "",
362
+ "$extensions": {
363
+ "mode": {
364
+ "light": "{core.clr.purple.50}",
365
+ "dark": "{core.clr.purple.50}"
366
+ }
367
+ }
368
+ },
369
+ "fg": {
370
+ "$type": "color",
371
+ "$value": "{core.clr.purple.95}",
372
+ "$description": "",
373
+ "$extensions": {
374
+ "mode": {
375
+ "light": "{core.clr.purple.95}",
376
+ "dark": "{core.clr.purple.90}"
377
+ }
378
+ }
379
+ }
380
+ },
381
+ "pop": {
382
+ "bg": {
383
+ "$type": "color",
384
+ "$value": "{core.clr.pop.50}",
385
+ "$description": "",
386
+ "$extensions": {
387
+ "mode": {
388
+ "light": "{core.clr.pop.50}",
389
+ "dark": "{core.clr.pop.40}"
390
+ }
391
+ }
392
+ },
393
+ "fg": {
394
+ "$type": "color",
395
+ "$value": "{core.clr.gray.100}",
396
+ "$description": "",
397
+ "$extensions": {
398
+ "mode": {
399
+ "light": "{core.clr.gray.100}",
400
+ "dark": "{core.clr.gray.100}"
401
+ }
402
+ }
403
+ }
404
+ },
405
+ "danger": {
406
+ "bg": {
407
+ "$type": "color",
408
+ "$value": "{core.clr.danger.50}",
409
+ "$description": "",
410
+ "$extensions": {
411
+ "mode": {
412
+ "light": "{core.clr.danger.50}",
413
+ "dark": "{core.clr.danger.40}"
414
+ }
415
+ }
416
+ },
417
+ "fg": {
418
+ "$type": "color",
419
+ "$value": "{core.clr.danger.95}",
420
+ "$description": "",
421
+ "$extensions": {
422
+ "mode": {
423
+ "light": "{core.clr.danger.95}",
424
+ "dark": "{core.clr.danger.95}"
425
+ }
426
+ }
427
+ }
428
+ },
429
+ "gray": {
430
+ "bg": {
431
+ "$type": "color",
432
+ "$value": "{core.clr.gray.20}",
433
+ "$description": "",
434
+ "$extensions": {
435
+ "mode": {
436
+ "light": "{core.clr.gray.20}",
437
+ "dark": "{core.clr.gray.80}"
438
+ }
439
+ }
440
+ },
441
+ "fg": {
442
+ "$type": "color",
443
+ "$value": "{core.clr.gray.100}",
444
+ "$description": "",
445
+ "$extensions": {
446
+ "mode": {
447
+ "light": "{core.clr.gray.100}",
448
+ "dark": "{core.clr.gray.0}"
449
+ }
450
+ }
451
+ }
452
+ }
453
+ },
454
+ "$extensions": {
455
+ "tokens-bruecke-meta": {
456
+ "useDTCGKeys": true,
457
+ "colorMode": "hex",
458
+ "variableCollections": [
459
+ "core",
460
+ "components",
461
+ "semantic"
462
+ ],
463
+ "createdAt": "2026-03-29T22:16:17.750Z"
464
+ }
465
+ }
466
+ }
467
+ }
package/tokens/tokens.css CHANGED
@@ -46,6 +46,10 @@
46
46
  --btn-warn-outline: var(--clr-warn-50);
47
47
  --btn-warn-outline-bg: var(--clr-warn-70);
48
48
  --btn-warn-outline-text: var(--clr-warn-30);
49
+ --change-status-addition: var(--clr-safe-60);
50
+ --change-status-deletion: var(--clr-danger-60);
51
+ --change-status-modification: var(--clr-warn-60);
52
+ --change-status-rename: var(--clr-purple-60);
49
53
  --chip-danger-bg: var(--clr-danger-80);
50
54
  --chip-danger-fg: var(--clr-danger-40);
51
55
  --chip-gray-bg: var(--clr-gray-80);
@@ -251,6 +255,10 @@
251
255
  --btn-warn-outline: var(--clr-warn-50);
252
256
  --btn-warn-outline-bg: var(--clr-warn-40);
253
257
  --btn-warn-outline-text: var(--clr-warn-60);
258
+ --change-status-addition: var(--clr-safe-40);
259
+ --change-status-deletion: var(--clr-danger-40);
260
+ --change-status-modification: var(--clr-warn-40);
261
+ --change-status-rename: var(--clr-purple-40);
254
262
  --chip-danger-bg: var(--clr-danger-10);
255
263
  --chip-danger-fg: var(--clr-danger-60);
256
264
  --chip-gray-bg: var(--clr-gray-20);