@gitbutler/design-core 1.3.8 → 1.3.10
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/package.json +1 -1
- package/tokens/tokens.css +15 -15
- package/tokens/tokens.json +25 -25
- package/utility/helpers.css +22 -2
package/package.json
CHANGED
package/tokens/tokens.css
CHANGED
|
@@ -284,21 +284,21 @@
|
|
|
284
284
|
--clr-theme-err-element: var(--clr-core-err-50);
|
|
285
285
|
--clr-theme-err-element-hover: var(--clr-core-err-45);
|
|
286
286
|
--clr-theme-err-on-element: var(--clr-core-err-95);
|
|
287
|
-
--clr-theme-err-on-soft: var(--clr-core-err-
|
|
287
|
+
--clr-theme-err-on-soft: var(--clr-core-err-40);
|
|
288
288
|
--clr-theme-err-soft: var(--clr-core-err-80);
|
|
289
289
|
--clr-theme-err-soft-hover: var(--clr-core-err-70);
|
|
290
290
|
--clr-theme-ntrl-element: var(--clr-core-ntrl-30);
|
|
291
291
|
--clr-theme-ntrl-element-hover: var(--clr-core-ntrl-20);
|
|
292
292
|
--clr-theme-ntrl-on-element: var(--clr-core-ntrl-100);
|
|
293
|
-
--clr-theme-ntrl-on-soft: var(--clr-core-ntrl-
|
|
294
|
-
--clr-theme-ntrl-soft: var(--clr-core-ntrl-
|
|
295
|
-
--clr-theme-ntrl-soft-hover: var(--clr-core-ntrl-
|
|
293
|
+
--clr-theme-ntrl-on-soft: var(--clr-core-ntrl-20);
|
|
294
|
+
--clr-theme-ntrl-soft: var(--clr-core-ntrl-80);
|
|
295
|
+
--clr-theme-ntrl-soft-hover: var(--clr-core-ntrl-70);
|
|
296
296
|
--clr-theme-pop-bg: var(--clr-core-pop-95);
|
|
297
297
|
--clr-theme-pop-bg-muted: var(--clr-core-pop-90);
|
|
298
298
|
--clr-theme-pop-element: var(--clr-core-pop-50);
|
|
299
299
|
--clr-theme-pop-element-hover: var(--clr-core-pop-45);
|
|
300
300
|
--clr-theme-pop-on-element: var(--clr-core-ntrl-100);
|
|
301
|
-
--clr-theme-pop-on-soft: var(--clr-core-pop-
|
|
301
|
+
--clr-theme-pop-on-soft: var(--clr-core-pop-40);
|
|
302
302
|
--clr-theme-pop-soft: var(--clr-core-pop-80);
|
|
303
303
|
--clr-theme-pop-soft-hover: var(--clr-core-pop-70);
|
|
304
304
|
--clr-theme-purp-bg: var(--clr-core-purp-95);
|
|
@@ -306,7 +306,7 @@
|
|
|
306
306
|
--clr-theme-purp-element: var(--clr-core-purp-50);
|
|
307
307
|
--clr-theme-purp-element-hover: var(--clr-core-purp-45);
|
|
308
308
|
--clr-theme-purp-on-element: var(--clr-core-purp-95);
|
|
309
|
-
--clr-theme-purp-on-soft: var(--clr-core-purp-
|
|
309
|
+
--clr-theme-purp-on-soft: var(--clr-core-purp-40);
|
|
310
310
|
--clr-theme-purp-soft: var(--clr-core-purp-80);
|
|
311
311
|
--clr-theme-purp-soft-hover: var(--clr-core-purp-70);
|
|
312
312
|
--clr-theme-succ-bg: var(--clr-core-succ-95);
|
|
@@ -314,7 +314,7 @@
|
|
|
314
314
|
--clr-theme-succ-element: var(--clr-core-succ-50);
|
|
315
315
|
--clr-theme-succ-element-hover: var(--clr-core-succ-45);
|
|
316
316
|
--clr-theme-succ-on-element: var(--clr-core-succ-95);
|
|
317
|
-
--clr-theme-succ-on-soft: var(--clr-core-succ-
|
|
317
|
+
--clr-theme-succ-on-soft: var(--clr-core-succ-40);
|
|
318
318
|
--clr-theme-succ-soft: var(--clr-core-succ-80);
|
|
319
319
|
--clr-theme-succ-soft-hover: var(--clr-core-succ-70);
|
|
320
320
|
--clr-theme-warn-bg: var(--clr-core-warn-95);
|
|
@@ -322,7 +322,7 @@
|
|
|
322
322
|
--clr-theme-warn-element: var(--clr-core-warn-50);
|
|
323
323
|
--clr-theme-warn-element-hover: var(--clr-core-warn-45);
|
|
324
324
|
--clr-theme-warn-on-element: var(--clr-core-warn-95);
|
|
325
|
-
--clr-theme-warn-on-soft: var(--clr-core-warn-
|
|
325
|
+
--clr-theme-warn-on-soft: var(--clr-core-warn-40);
|
|
326
326
|
--clr-theme-warn-soft: var(--clr-core-warn-80);
|
|
327
327
|
--clr-theme-warn-soft-hover: var(--clr-core-warn-70);
|
|
328
328
|
--clr-tooltip-bg: var(--clr-core-ntrl-95);
|
|
@@ -382,7 +382,7 @@
|
|
|
382
382
|
--clr-btn-err-outline-bg: var(--clr-core-err-40);
|
|
383
383
|
--clr-btn-err-outline-text: var(--clr-core-err-60);
|
|
384
384
|
--clr-btn-ntrl-outline: var(--clr-core-ntrl-50);
|
|
385
|
-
--clr-btn-ntrl-outline-bg: var(--clr-core-ntrl-
|
|
385
|
+
--clr-btn-ntrl-outline-bg: var(--clr-core-ntrl-40);
|
|
386
386
|
--clr-btn-ntrl-outline-text: var(--clr-core-ntrl-100);
|
|
387
387
|
--clr-btn-pop-outline: var(--clr-core-pop-50);
|
|
388
388
|
--clr-btn-pop-outline-bg: var(--clr-core-pop-40);
|
|
@@ -560,13 +560,13 @@
|
|
|
560
560
|
--clr-theme-err-element: var(--clr-core-err-40);
|
|
561
561
|
--clr-theme-err-element-hover: var(--clr-core-err-30);
|
|
562
562
|
--clr-theme-err-on-element: var(--clr-core-err-95);
|
|
563
|
-
--clr-theme-err-on-soft: var(--clr-core-err-
|
|
563
|
+
--clr-theme-err-on-soft: var(--clr-core-err-60);
|
|
564
564
|
--clr-theme-err-soft: var(--clr-core-err-20);
|
|
565
565
|
--clr-theme-err-soft-hover: var(--clr-core-err-30);
|
|
566
566
|
--clr-theme-ntrl-element: var(--clr-core-ntrl-80);
|
|
567
567
|
--clr-theme-ntrl-element-hover: var(--clr-core-ntrl-95);
|
|
568
568
|
--clr-theme-ntrl-on-element: var(--clr-core-ntrl-0);
|
|
569
|
-
--clr-theme-ntrl-on-soft: var(--clr-core-ntrl-
|
|
569
|
+
--clr-theme-ntrl-on-soft: var(--clr-core-ntrl-70);
|
|
570
570
|
--clr-theme-ntrl-soft: var(--clr-core-ntrl-20);
|
|
571
571
|
--clr-theme-ntrl-soft-hover: var(--clr-core-ntrl-30);
|
|
572
572
|
--clr-theme-pop-bg: var(--clr-core-pop-5);
|
|
@@ -574,7 +574,7 @@
|
|
|
574
574
|
--clr-theme-pop-element: var(--clr-core-pop-40);
|
|
575
575
|
--clr-theme-pop-element-hover: var(--clr-core-pop-30);
|
|
576
576
|
--clr-theme-pop-on-element: var(--clr-core-ntrl-100);
|
|
577
|
-
--clr-theme-pop-on-soft: var(--clr-core-pop-
|
|
577
|
+
--clr-theme-pop-on-soft: var(--clr-core-pop-60);
|
|
578
578
|
--clr-theme-pop-soft: var(--clr-core-pop-10);
|
|
579
579
|
--clr-theme-pop-soft-hover: var(--clr-core-pop-20);
|
|
580
580
|
--clr-theme-purp-bg: var(--clr-core-purp-5);
|
|
@@ -582,7 +582,7 @@
|
|
|
582
582
|
--clr-theme-purp-element: var(--clr-core-purp-50);
|
|
583
583
|
--clr-theme-purp-element-hover: var(--clr-core-purp-40);
|
|
584
584
|
--clr-theme-purp-on-element: var(--clr-core-purp-90);
|
|
585
|
-
--clr-theme-purp-on-soft: var(--clr-core-purp-
|
|
585
|
+
--clr-theme-purp-on-soft: var(--clr-core-purp-60);
|
|
586
586
|
--clr-theme-purp-soft: var(--clr-core-purp-10);
|
|
587
587
|
--clr-theme-purp-soft-hover: var(--clr-core-purp-20);
|
|
588
588
|
--clr-theme-succ-bg: var(--clr-core-succ-5);
|
|
@@ -590,7 +590,7 @@
|
|
|
590
590
|
--clr-theme-succ-element: var(--clr-core-succ-30);
|
|
591
591
|
--clr-theme-succ-element-hover: var(--clr-core-succ-20);
|
|
592
592
|
--clr-theme-succ-on-element: var(--clr-core-succ-90);
|
|
593
|
-
--clr-theme-succ-on-soft: var(--clr-core-succ-
|
|
593
|
+
--clr-theme-succ-on-soft: var(--clr-core-succ-60);
|
|
594
594
|
--clr-theme-succ-soft: var(--clr-core-succ-10);
|
|
595
595
|
--clr-theme-succ-soft-hover: var(--clr-core-succ-20);
|
|
596
596
|
--clr-theme-warn-bg: var(--clr-core-warn-5);
|
|
@@ -598,7 +598,7 @@
|
|
|
598
598
|
--clr-theme-warn-element: var(--clr-core-warn-40);
|
|
599
599
|
--clr-theme-warn-element-hover: var(--clr-core-warn-30);
|
|
600
600
|
--clr-theme-warn-on-element: var(--clr-core-warn-90);
|
|
601
|
-
--clr-theme-warn-on-soft: var(--clr-core-warn-
|
|
601
|
+
--clr-theme-warn-on-soft: var(--clr-core-warn-60);
|
|
602
602
|
--clr-theme-warn-soft: var(--clr-core-warn-20);
|
|
603
603
|
--clr-theme-warn-soft-hover: var(--clr-core-warn-30);
|
|
604
604
|
--clr-tooltip-bg: var(--clr-core-ntrl-10);
|
package/tokens/tokens.json
CHANGED
|
@@ -759,12 +759,12 @@
|
|
|
759
759
|
},
|
|
760
760
|
"on-soft": {
|
|
761
761
|
"$type": "color",
|
|
762
|
-
"$value": "{clr-core.pop.
|
|
762
|
+
"$value": "{clr-core.pop.40}",
|
|
763
763
|
"$description": "",
|
|
764
764
|
"$extensions": {
|
|
765
765
|
"mode": {
|
|
766
|
-
"light": "{clr-core.pop.
|
|
767
|
-
"dark": "{clr-core.pop.
|
|
766
|
+
"light": "{clr-core.pop.40}",
|
|
767
|
+
"dark": "{clr-core.pop.60}"
|
|
768
768
|
}
|
|
769
769
|
}
|
|
770
770
|
},
|
|
@@ -849,12 +849,12 @@
|
|
|
849
849
|
},
|
|
850
850
|
"on-soft": {
|
|
851
851
|
"$type": "color",
|
|
852
|
-
"$value": "{clr-core.err.
|
|
852
|
+
"$value": "{clr-core.err.40}",
|
|
853
853
|
"$description": "",
|
|
854
854
|
"$extensions": {
|
|
855
855
|
"mode": {
|
|
856
|
-
"light": "{clr-core.err.
|
|
857
|
-
"dark": "{clr-core.err.
|
|
856
|
+
"light": "{clr-core.err.40}",
|
|
857
|
+
"dark": "{clr-core.err.60}"
|
|
858
858
|
}
|
|
859
859
|
}
|
|
860
860
|
},
|
|
@@ -939,12 +939,12 @@
|
|
|
939
939
|
},
|
|
940
940
|
"on-soft": {
|
|
941
941
|
"$type": "color",
|
|
942
|
-
"$value": "{clr-core.warn.
|
|
942
|
+
"$value": "{clr-core.warn.40}",
|
|
943
943
|
"$description": "",
|
|
944
944
|
"$extensions": {
|
|
945
945
|
"mode": {
|
|
946
|
-
"light": "{clr-core.warn.
|
|
947
|
-
"dark": "{clr-core.warn.
|
|
946
|
+
"light": "{clr-core.warn.40}",
|
|
947
|
+
"dark": "{clr-core.warn.60}"
|
|
948
948
|
}
|
|
949
949
|
}
|
|
950
950
|
},
|
|
@@ -1029,12 +1029,12 @@
|
|
|
1029
1029
|
},
|
|
1030
1030
|
"on-soft": {
|
|
1031
1031
|
"$type": "color",
|
|
1032
|
-
"$value": "{clr-core.succ.
|
|
1032
|
+
"$value": "{clr-core.succ.40}",
|
|
1033
1033
|
"$description": "",
|
|
1034
1034
|
"$extensions": {
|
|
1035
1035
|
"mode": {
|
|
1036
|
-
"light": "{clr-core.succ.
|
|
1037
|
-
"dark": "{clr-core.succ.
|
|
1036
|
+
"light": "{clr-core.succ.40}",
|
|
1037
|
+
"dark": "{clr-core.succ.60}"
|
|
1038
1038
|
}
|
|
1039
1039
|
}
|
|
1040
1040
|
},
|
|
@@ -1119,12 +1119,12 @@
|
|
|
1119
1119
|
},
|
|
1120
1120
|
"on-soft": {
|
|
1121
1121
|
"$type": "color",
|
|
1122
|
-
"$value": "{clr-core.purp.
|
|
1122
|
+
"$value": "{clr-core.purp.40}",
|
|
1123
1123
|
"$description": "",
|
|
1124
1124
|
"$extensions": {
|
|
1125
1125
|
"mode": {
|
|
1126
|
-
"light": "{clr-core.purp.
|
|
1127
|
-
"dark": "{clr-core.purp.
|
|
1126
|
+
"light": "{clr-core.purp.40}",
|
|
1127
|
+
"dark": "{clr-core.purp.60}"
|
|
1128
1128
|
}
|
|
1129
1129
|
}
|
|
1130
1130
|
},
|
|
@@ -1209,34 +1209,34 @@
|
|
|
1209
1209
|
},
|
|
1210
1210
|
"soft": {
|
|
1211
1211
|
"$type": "color",
|
|
1212
|
-
"$value": "{clr-core.ntrl.
|
|
1212
|
+
"$value": "{clr-core.ntrl.80}",
|
|
1213
1213
|
"$description": "",
|
|
1214
1214
|
"$extensions": {
|
|
1215
1215
|
"mode": {
|
|
1216
|
-
"light": "{clr-core.ntrl.
|
|
1216
|
+
"light": "{clr-core.ntrl.80}",
|
|
1217
1217
|
"dark": "{clr-core.ntrl.20}"
|
|
1218
1218
|
}
|
|
1219
1219
|
}
|
|
1220
1220
|
},
|
|
1221
1221
|
"soft-hover": {
|
|
1222
1222
|
"$type": "color",
|
|
1223
|
-
"$value": "{clr-core.ntrl.
|
|
1223
|
+
"$value": "{clr-core.ntrl.70}",
|
|
1224
1224
|
"$description": "",
|
|
1225
1225
|
"$extensions": {
|
|
1226
1226
|
"mode": {
|
|
1227
|
-
"light": "{clr-core.ntrl.
|
|
1227
|
+
"light": "{clr-core.ntrl.70}",
|
|
1228
1228
|
"dark": "{clr-core.ntrl.30}"
|
|
1229
1229
|
}
|
|
1230
1230
|
}
|
|
1231
1231
|
},
|
|
1232
1232
|
"on-soft": {
|
|
1233
1233
|
"$type": "color",
|
|
1234
|
-
"$value": "{clr-core.ntrl.
|
|
1234
|
+
"$value": "{clr-core.ntrl.20}",
|
|
1235
1235
|
"$description": "",
|
|
1236
1236
|
"$extensions": {
|
|
1237
1237
|
"mode": {
|
|
1238
|
-
"light": "{clr-core.ntrl.
|
|
1239
|
-
"dark": "{clr-core.ntrl.
|
|
1238
|
+
"light": "{clr-core.ntrl.20}",
|
|
1239
|
+
"dark": "{clr-core.ntrl.70}"
|
|
1240
1240
|
}
|
|
1241
1241
|
}
|
|
1242
1242
|
}
|
|
@@ -3072,7 +3072,7 @@
|
|
|
3072
3072
|
"$extensions": {
|
|
3073
3073
|
"mode": {
|
|
3074
3074
|
"light": "{clr-core.ntrl.70}",
|
|
3075
|
-
"dark": "{clr-core.ntrl.
|
|
3075
|
+
"dark": "{clr-core.ntrl.40}"
|
|
3076
3076
|
}
|
|
3077
3077
|
}
|
|
3078
3078
|
},
|
|
@@ -3718,7 +3718,7 @@
|
|
|
3718
3718
|
"text",
|
|
3719
3719
|
"opacity"
|
|
3720
3720
|
],
|
|
3721
|
-
"createdAt": "2025-11-
|
|
3721
|
+
"createdAt": "2025-11-24T11:39:23.091Z"
|
|
3722
3722
|
}
|
|
3723
3723
|
}
|
|
3724
|
-
}
|
|
3724
|
+
}
|
package/utility/helpers.css
CHANGED
|
@@ -90,12 +90,33 @@ pre {
|
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
.capitalize {
|
|
93
|
-
|
|
93
|
+
text-transform: capitalize;
|
|
94
94
|
}
|
|
95
|
+
|
|
95
96
|
.capitalize:first-letter {
|
|
96
97
|
text-transform: capitalize;
|
|
97
98
|
}
|
|
98
99
|
|
|
100
|
+
/* TEXT LINKS */
|
|
101
|
+
|
|
102
|
+
.link-hover-2,
|
|
103
|
+
.link-hover-3 {
|
|
104
|
+
cursor: pointer;
|
|
105
|
+
transition: color var(--transition-fast);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.link-hover-2 {
|
|
109
|
+
&:hover {
|
|
110
|
+
color: var(--clr-text-1);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.link-hover-3 {
|
|
115
|
+
&:hover {
|
|
116
|
+
color: var(--clr-text-2);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
99
120
|
/* OPACITY */
|
|
100
121
|
.op-10 {
|
|
101
122
|
opacity: 0.1;
|
|
@@ -126,7 +147,6 @@ pre {
|
|
|
126
147
|
}
|
|
127
148
|
|
|
128
149
|
/* ANIMATION */
|
|
129
|
-
|
|
130
150
|
.wiggle-animation {
|
|
131
151
|
animation: wiggle-animation 0.35s forwards;
|
|
132
152
|
}
|