@gitbutler/design-core 1.5.0 → 1.6.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 (3) hide show
  1. package/package.json +1 -1
  2. package/tokens/tokens.css +8 -24
  3. package/tokens/tokens.json +11 -99
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitbutler/design-core",
3
- "version": "1.5.0",
3
+ "version": "1.6.0",
4
4
  "type": "module",
5
5
  "description": "Design tokens for GitButler applications",
6
6
  "keywords": [
package/tokens/tokens.css CHANGED
@@ -6,15 +6,13 @@
6
6
  --clr-art-scene-bg: color(srgb 0.8392156862745098 0.9411764705882353 0.9333333333333333);
7
7
  --clr-art-scene-fill: color(srgb 0.9882352941176471 0.9882352941176471 0.9450980392156862);
8
8
  --clr-art-scene-outline: color(srgb 0.2784313725490196 0.3137254901960784 0.3137254901960784);
9
- --clr-art-spot-fill-1: var(--clr-core-gray-80);
10
- --clr-art-spot-fill-2: var(--clr-core-gray-70);
11
- --clr-art-spot-fill-pop-1: var(--clr-core-pop-70);
9
+ --clr-art-spot-fill: var(--clr-core-gray-70);
10
+ --clr-art-spot-fill-pop: var(--clr-core-pop-70);
12
11
  --clr-bg-1: var(--clr-core-gray-100);
13
- --clr-bg-1-muted: var(--clr-core-gray-95);
14
12
  --clr-bg-2: var(--clr-core-gray-90);
15
- --clr-bg-2-muted: var(--clr-core-gray-80);
16
13
  --clr-bg-3: var(--clr-core-gray-80);
17
- --clr-bg-3-muted: var(--clr-core-gray-70);
14
+ --clr-bg-muted: var(--clr-core-gray-95);
15
+ --clr-bg-overlay: color(srgb 0.8392156862745098 0.8392156862745098 0.8392156862745098 / 0.45098039215686275);
18
16
  --clr-bg-toast: var(--clr-core-gray-5);
19
17
  --clr-border-1: var(--clr-core-gray-60);
20
18
  --clr-border-2: var(--clr-core-gray-70);
@@ -183,7 +181,6 @@
183
181
  --clr-diff-selected-count-border: var(--clr-core-pop-40);
184
182
  --clr-diff-selected-count-checkmark: var(--clr-core-pop-95);
185
183
  --clr-diff-selected-count-text: var(--clr-core-pop-90);
186
- --clr-overlay-bg: color(srgb 0.8392156862745098 0.8392156862745098 0.8392156862745098 / 0.45098039215686275);
187
184
  --clr-selected-in-focus-bg: var(--clr-core-pop-90);
188
185
  --clr-selected-in-focus-element: var(--clr-core-pop-50);
189
186
  --clr-selected-not-in-focus-bg: var(--clr-core-gray-95);
@@ -192,7 +189,6 @@
192
189
  --clr-text-2: var(--clr-core-gray-50);
193
190
  --clr-text-3: var(--clr-core-gray-60);
194
191
  --clr-theme-danger-bg: var(--clr-core-danger-95);
195
- --clr-theme-danger-bg-muted: var(--clr-core-danger-90);
196
192
  --clr-theme-danger-element: var(--clr-core-danger-50);
197
193
  --clr-theme-danger-on-element: var(--clr-core-danger-95);
198
194
  --clr-theme-danger-on-soft: var(--clr-core-danger-40);
@@ -203,28 +199,24 @@
203
199
  --clr-theme-gray-on-soft: var(--clr-core-gray-20);
204
200
  --clr-theme-gray-soft: var(--clr-core-gray-80);
205
201
  --clr-theme-pop-bg: var(--clr-core-pop-95);
206
- --clr-theme-pop-bg-muted: var(--clr-core-pop-90);
207
202
  --clr-theme-pop-element: var(--clr-core-pop-50);
208
203
  --clr-theme-pop-on-element: var(--clr-core-gray-100);
209
204
  --clr-theme-pop-on-soft: var(--clr-core-pop-40);
210
205
  --clr-theme-pop-soft: var(--clr-core-pop-80);
211
206
  --clr-theme-pop-text: var(--clr-core-pop-10);
212
207
  --clr-theme-purple-bg: var(--clr-core-purple-95);
213
- --clr-theme-purple-bg-muted: var(--clr-core-purple-90);
214
208
  --clr-theme-purple-element: var(--clr-core-purple-50);
215
209
  --clr-theme-purple-on-element: var(--clr-core-purple-95);
216
210
  --clr-theme-purple-on-soft: var(--clr-core-purple-40);
217
211
  --clr-theme-purple-soft: var(--clr-core-purple-80);
218
212
  --clr-theme-purple-text: var(--clr-core-purple-10);
219
213
  --clr-theme-safe-bg: var(--clr-core-safe-95);
220
- --clr-theme-safe-bg-muted: var(--clr-core-safe-90);
221
214
  --clr-theme-safe-element: var(--clr-core-safe-50);
222
215
  --clr-theme-safe-on-element: var(--clr-core-safe-95);
223
216
  --clr-theme-safe-on-soft: var(--clr-core-safe-40);
224
217
  --clr-theme-safe-soft: var(--clr-core-safe-80);
225
218
  --clr-theme-safe-text: var(--clr-core-safe-10);
226
219
  --clr-theme-warn-bg: var(--clr-core-warn-95);
227
- --clr-theme-warn-bg-muted: var(--clr-core-warn-90);
228
220
  --clr-theme-warn-element: var(--clr-core-warn-50);
229
221
  --clr-theme-warn-on-element: var(--clr-core-warn-95);
230
222
  --clr-theme-warn-on-soft: var(--clr-core-warn-40);
@@ -267,15 +259,13 @@
267
259
  --clr-art-scene-bg: color(srgb 0.1568627450980392 0.403921568627451 0.39215686274509803);
268
260
  --clr-art-scene-fill: color(srgb 0.8470588235294118 0.8901960784313725 0.7568627450980392);
269
261
  --clr-art-scene-outline: color(srgb 0.0784313725490196 0.13333333333333333 0.13333333333333333);
270
- --clr-art-spot-fill-1: var(--clr-core-gray-30);
271
- --clr-art-spot-fill-2: var(--clr-core-gray-40);
272
- --clr-art-spot-fill-pop-1: var(--clr-core-pop-30);
262
+ --clr-art-spot-fill: var(--clr-core-gray-40);
263
+ --clr-art-spot-fill-pop: var(--clr-core-pop-30);
273
264
  --clr-bg-1: var(--clr-core-gray-10);
274
- --clr-bg-1-muted: var(--clr-core-gray-20);
275
265
  --clr-bg-2: var(--clr-core-gray-5);
276
- --clr-bg-2-muted: var(--clr-core-gray-10);
277
266
  --clr-bg-3: var(--clr-core-gray-0);
278
- --clr-bg-3-muted: var(--clr-core-gray-5);
267
+ --clr-bg-muted: var(--clr-core-gray-20);
268
+ --clr-bg-overlay: color(srgb 0 0 0 / 0.5019607843137255);
279
269
  --clr-bg-toast: var(--clr-core-gray-95);
280
270
  --clr-border-1: var(--clr-core-gray-40);
281
271
  --clr-border-2: var(--clr-core-gray-30);
@@ -376,7 +366,6 @@
376
366
  --clr-diff-selected-count-border: var(--clr-core-pop-20);
377
367
  --clr-diff-selected-count-checkmark: var(--clr-core-pop-60);
378
368
  --clr-diff-selected-count-text: var(--clr-core-pop-60);
379
- --clr-overlay-bg: color(srgb 0 0 0 / 0.5019607843137255);
380
369
  --clr-selected-in-focus-bg: var(--clr-core-pop-10);
381
370
  --clr-selected-in-focus-element: var(--clr-core-pop-40);
382
371
  --clr-selected-not-in-focus-bg: var(--clr-core-gray-20);
@@ -385,7 +374,6 @@
385
374
  --clr-text-2: var(--clr-core-gray-60);
386
375
  --clr-text-3: var(--clr-core-gray-40);
387
376
  --clr-theme-danger-bg: var(--clr-core-danger-5);
388
- --clr-theme-danger-bg-muted: var(--clr-core-danger-10);
389
377
  --clr-theme-danger-element: var(--clr-core-danger-30);
390
378
  --clr-theme-danger-on-element: var(--clr-core-danger-95);
391
379
  --clr-theme-danger-on-soft: var(--clr-core-danger-60);
@@ -396,28 +384,24 @@
396
384
  --clr-theme-gray-on-soft: var(--clr-core-gray-70);
397
385
  --clr-theme-gray-soft: var(--clr-core-gray-20);
398
386
  --clr-theme-pop-bg: var(--clr-core-pop-5);
399
- --clr-theme-pop-bg-muted: var(--clr-core-pop-10);
400
387
  --clr-theme-pop-element: var(--clr-core-pop-40);
401
388
  --clr-theme-pop-on-element: var(--clr-core-gray-100);
402
389
  --clr-theme-pop-on-soft: var(--clr-core-pop-60);
403
390
  --clr-theme-pop-soft: var(--clr-core-pop-10);
404
391
  --clr-theme-pop-text: var(--clr-core-pop-80);
405
392
  --clr-theme-purple-bg: var(--clr-core-purple-5);
406
- --clr-theme-purple-bg-muted: var(--clr-core-purple-10);
407
393
  --clr-theme-purple-element: var(--clr-core-purple-50);
408
394
  --clr-theme-purple-on-element: var(--clr-core-purple-90);
409
395
  --clr-theme-purple-on-soft: var(--clr-core-purple-60);
410
396
  --clr-theme-purple-soft: var(--clr-core-purple-10);
411
397
  --clr-theme-purple-text: var(--clr-core-purple-80);
412
398
  --clr-theme-safe-bg: var(--clr-core-safe-5);
413
- --clr-theme-safe-bg-muted: var(--clr-core-safe-10);
414
399
  --clr-theme-safe-element: var(--clr-core-safe-30);
415
400
  --clr-theme-safe-on-element: var(--clr-core-safe-90);
416
401
  --clr-theme-safe-on-soft: var(--clr-core-safe-60);
417
402
  --clr-theme-safe-soft: var(--clr-core-safe-10);
418
403
  --clr-theme-safe-text: var(--clr-core-safe-80);
419
404
  --clr-theme-warn-bg: var(--clr-core-warn-5);
420
- --clr-theme-warn-bg-muted: var(--clr-core-warn-10);
421
405
  --clr-theme-warn-element: var(--clr-core-warn-40);
422
406
  --clr-theme-warn-on-element: var(--clr-core-warn-90);
423
407
  --clr-theme-warn-on-soft: var(--clr-core-warn-60);
package/tokens/tokens.json CHANGED
@@ -592,36 +592,25 @@
592
592
  }
593
593
  }
594
594
  },
595
- "1-muted": {
595
+ "overlay": {
596
596
  "$type": "color",
597
- "$value": "{clr-core.gray.95}",
598
- "$description": "",
599
- "$extensions": {
600
- "mode": {
601
- "light": "{clr-core.gray.95}",
602
- "dark": "{clr-core.gray.20}"
603
- }
604
- }
605
- },
606
- "2-muted": {
607
- "$type": "color",
608
- "$value": "{clr-core.gray.80}",
597
+ "$value": "#d6d6d673",
609
598
  "$description": "",
610
599
  "$extensions": {
611
600
  "mode": {
612
- "light": "{clr-core.gray.80}",
613
- "dark": "{clr-core.gray.10}"
601
+ "light": "#d6d6d673",
602
+ "dark": "#00000080"
614
603
  }
615
604
  }
616
605
  },
617
- "3-muted": {
606
+ "muted": {
618
607
  "$type": "color",
619
- "$value": "{clr-core.gray.70}",
608
+ "$value": "{clr-core.gray.95}",
620
609
  "$description": "",
621
610
  "$extensions": {
622
611
  "mode": {
623
- "light": "{clr-core.gray.70}",
624
- "dark": "{clr-core.gray.5}"
612
+ "light": "{clr-core.gray.95}",
613
+ "dark": "{clr-core.gray.20}"
625
614
  }
626
615
  }
627
616
  },
@@ -694,17 +683,6 @@
694
683
  }
695
684
  }
696
685
  },
697
- "bg-muted": {
698
- "$type": "color",
699
- "$value": "{clr-core.pop.90}",
700
- "$description": "",
701
- "$extensions": {
702
- "mode": {
703
- "light": "{clr-core.pop.90}",
704
- "dark": "{clr-core.pop.10}"
705
- }
706
- }
707
- },
708
686
  "text": {
709
687
  "$type": "color",
710
688
  "$value": "{clr-core.pop.10}",
@@ -773,17 +751,6 @@
773
751
  }
774
752
  }
775
753
  },
776
- "bg-muted": {
777
- "$type": "color",
778
- "$value": "{clr-core.danger.90}",
779
- "$description": "",
780
- "$extensions": {
781
- "mode": {
782
- "light": "{clr-core.danger.90}",
783
- "dark": "{clr-core.danger.10}"
784
- }
785
- }
786
- },
787
754
  "text": {
788
755
  "$type": "color",
789
756
  "$value": "{clr-core.danger.10}",
@@ -852,17 +819,6 @@
852
819
  }
853
820
  }
854
821
  },
855
- "bg-muted": {
856
- "$type": "color",
857
- "$value": "{clr-core.warn.90}",
858
- "$description": "",
859
- "$extensions": {
860
- "mode": {
861
- "light": "{clr-core.warn.90}",
862
- "dark": "{clr-core.warn.10}"
863
- }
864
- }
865
- },
866
822
  "text": {
867
823
  "$type": "color",
868
824
  "$value": "{clr-core.warn.10}",
@@ -931,17 +887,6 @@
931
887
  }
932
888
  }
933
889
  },
934
- "bg-muted": {
935
- "$type": "color",
936
- "$value": "{clr-core.safe.90}",
937
- "$description": "",
938
- "$extensions": {
939
- "mode": {
940
- "light": "{clr-core.safe.90}",
941
- "dark": "{clr-core.safe.10}"
942
- }
943
- }
944
- },
945
890
  "text": {
946
891
  "$type": "color",
947
892
  "$value": "{clr-core.safe.10}",
@@ -1010,17 +955,6 @@
1010
955
  }
1011
956
  }
1012
957
  },
1013
- "bg-muted": {
1014
- "$type": "color",
1015
- "$value": "{clr-core.purple.90}",
1016
- "$description": "",
1017
- "$extensions": {
1018
- "mode": {
1019
- "light": "{clr-core.purple.90}",
1020
- "dark": "{clr-core.purple.10}"
1021
- }
1022
- }
1023
- },
1024
958
  "text": {
1025
959
  "$type": "color",
1026
960
  "$value": "{clr-core.purple.10}",
@@ -1115,17 +1049,6 @@
1115
1049
  }
1116
1050
  }
1117
1051
  },
1118
- "overlay-bg": {
1119
- "$type": "color",
1120
- "$value": "#d6d6d673",
1121
- "$description": "",
1122
- "$extensions": {
1123
- "mode": {
1124
- "light": "#d6d6d673",
1125
- "dark": "#00000080"
1126
- }
1127
- }
1128
- },
1129
1052
  "art": {
1130
1053
  "scene": {
1131
1054
  "bg": {
@@ -1163,18 +1086,7 @@
1163
1086
  }
1164
1087
  },
1165
1088
  "spot": {
1166
- "fill-1": {
1167
- "$type": "color",
1168
- "$value": "{clr-core.gray.80}",
1169
- "$description": "",
1170
- "$extensions": {
1171
- "mode": {
1172
- "light": "{clr-core.gray.80}",
1173
- "dark": "{clr-core.gray.30}"
1174
- }
1175
- }
1176
- },
1177
- "fill-2": {
1089
+ "fill": {
1178
1090
  "$type": "color",
1179
1091
  "$value": "{clr-core.gray.70}",
1180
1092
  "$description": "",
@@ -1185,7 +1097,7 @@
1185
1097
  }
1186
1098
  }
1187
1099
  },
1188
- "fill-pop-1": {
1100
+ "fill-pop": {
1189
1101
  "$type": "color",
1190
1102
  "$value": "{clr-core.pop.70}",
1191
1103
  "$description": "",
@@ -2699,7 +2611,7 @@
2699
2611
  "text",
2700
2612
  "opacity"
2701
2613
  ],
2702
- "createdAt": "2025-12-15T20:56:27.815Z"
2614
+ "createdAt": "2025-12-17T21:17:35.890Z"
2703
2615
  }
2704
2616
  }
2705
2617
  }