@timmo001/groundwork-tokens 0.6.0 → 0.8.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.
- package/generated/themes.css +77 -17
- package/generated/themes.json +14 -0
- package/generated/themes.ts +14 -0
- package/package.json +1 -1
- package/src/generate.ts +41 -25
package/generated/themes.css
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
:root {
|
|
4
4
|
--gw-density: 1;
|
|
5
|
+
--gw-control-scale: 1;
|
|
5
6
|
--gw-space-0-5: calc(0.125rem * var(--gw-density));
|
|
6
7
|
--gw-space-1: calc(0.25rem * var(--gw-density));
|
|
7
8
|
--gw-space-2: calc(0.5rem * var(--gw-density));
|
|
@@ -67,7 +68,7 @@ gw-button:not(:defined),
|
|
|
67
68
|
gw-menu-button:not(:defined),
|
|
68
69
|
gw-segmented:not(:defined) {
|
|
69
70
|
display: inline-block;
|
|
70
|
-
min-block-size: 2.5rem;
|
|
71
|
+
min-block-size: calc(2.5rem * var(--gw-control-scale, 1));
|
|
71
72
|
vertical-align: middle;
|
|
72
73
|
}
|
|
73
74
|
|
|
@@ -75,30 +76,46 @@ gw-button:not(:defined) {
|
|
|
75
76
|
padding-inline: calc(var(--gw-space-4) + 1px);
|
|
76
77
|
font-size: var(--gw-font-size-s);
|
|
77
78
|
font-weight: var(--gw-font-weight-strong);
|
|
78
|
-
line-height: 2.5rem;
|
|
79
|
+
line-height: calc(2.5rem * var(--gw-control-scale, 1));
|
|
79
80
|
white-space: nowrap;
|
|
80
81
|
text-transform: var(--gw-label-transform);
|
|
81
82
|
letter-spacing: var(--gw-label-tracking);
|
|
82
83
|
}
|
|
83
84
|
|
|
84
85
|
gw-button[size="xs"]:not(:defined) {
|
|
85
|
-
min-block-size: 1.5rem;
|
|
86
|
-
line-height: 1.5rem;
|
|
86
|
+
min-block-size: calc(1.5rem * var(--gw-control-scale, 1));
|
|
87
|
+
line-height: calc(1.5rem * var(--gw-control-scale, 1));
|
|
87
88
|
}
|
|
88
89
|
|
|
89
90
|
gw-button[size="small"]:not(:defined) {
|
|
90
|
-
min-block-size: 2rem;
|
|
91
|
-
line-height: 2rem;
|
|
91
|
+
min-block-size: calc(2rem * var(--gw-control-scale, 1));
|
|
92
|
+
line-height: calc(2rem * var(--gw-control-scale, 1));
|
|
92
93
|
}
|
|
93
94
|
|
|
94
95
|
gw-button[size="large"]:not(:defined) {
|
|
95
|
-
min-block-size: 3rem;
|
|
96
|
-
line-height: 3rem;
|
|
96
|
+
min-block-size: calc(3rem * var(--gw-control-scale, 1));
|
|
97
|
+
line-height: calc(3rem * var(--gw-control-scale, 1));
|
|
97
98
|
}
|
|
98
99
|
|
|
99
100
|
gw-button[size="xl"]:not(:defined) {
|
|
100
|
-
min-block-size: 3.5rem;
|
|
101
|
-
line-height: 3.5rem;
|
|
101
|
+
min-block-size: calc(3.5rem * var(--gw-control-scale, 1));
|
|
102
|
+
line-height: calc(3.5rem * var(--gw-control-scale, 1));
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
gw-menu-button[size="xs"]:not(:defined) {
|
|
106
|
+
min-block-size: calc(1.5rem * var(--gw-control-scale, 1));
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
gw-menu-button[size="small"]:not(:defined) {
|
|
110
|
+
min-block-size: calc(2rem * var(--gw-control-scale, 1));
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
gw-menu-button[size="large"]:not(:defined) {
|
|
114
|
+
min-block-size: calc(3rem * var(--gw-control-scale, 1));
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
gw-menu-button[size="xl"]:not(:defined) {
|
|
118
|
+
min-block-size: calc(3.5rem * var(--gw-control-scale, 1));
|
|
102
119
|
}
|
|
103
120
|
|
|
104
121
|
gw-card:not(:defined) {
|
|
@@ -155,7 +172,8 @@ gw-theme-gallery:not(:defined) {
|
|
|
155
172
|
display: block;
|
|
156
173
|
}
|
|
157
174
|
|
|
158
|
-
gw-button[icon]:not(:defined)
|
|
175
|
+
gw-button[icon]:not(:defined),
|
|
176
|
+
gw-button[swatch]:not(:defined) {
|
|
159
177
|
padding-inline-start: calc(var(--gw-space-4) + var(--gw-space-2) + 1.125rem + 1px);
|
|
160
178
|
}
|
|
161
179
|
|
|
@@ -168,16 +186,44 @@ gw-button:not(:defined) > [slot="icon"] {
|
|
|
168
186
|
|
|
169
187
|
gw-chip:not(:defined) {
|
|
170
188
|
display: inline-flex;
|
|
171
|
-
min-block-size: 2rem;
|
|
189
|
+
min-block-size: calc(2rem * var(--gw-control-scale, 1));
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
gw-chip[size="xs"]:not(:defined) {
|
|
193
|
+
min-block-size: calc(1.2rem * var(--gw-control-scale, 1));
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
gw-chip[size="small"]:not(:defined) {
|
|
197
|
+
min-block-size: calc(1.6rem * var(--gw-control-scale, 1));
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
gw-chip[size="large"]:not(:defined) {
|
|
201
|
+
min-block-size: calc(2.4rem * var(--gw-control-scale, 1));
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
gw-chip[size="xl"]:not(:defined) {
|
|
205
|
+
min-block-size: calc(2.8rem * var(--gw-control-scale, 1));
|
|
172
206
|
}
|
|
173
207
|
|
|
174
208
|
gw-badge:not(:defined) {
|
|
175
209
|
display: inline-flex;
|
|
176
|
-
min-block-size: 2.25rem;
|
|
210
|
+
min-block-size: calc(2.25rem * var(--gw-control-scale, 1));
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
gw-badge[size="xs"]:not(:defined) {
|
|
214
|
+
min-block-size: calc(1.35rem * var(--gw-control-scale, 1));
|
|
177
215
|
}
|
|
178
216
|
|
|
179
217
|
gw-badge[size="small"]:not(:defined) {
|
|
180
|
-
min-block-size: 1.
|
|
218
|
+
min-block-size: calc(1.8rem * var(--gw-control-scale, 1));
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
gw-badge[size="large"]:not(:defined) {
|
|
222
|
+
min-block-size: calc(2.7rem * var(--gw-control-scale, 1));
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
gw-badge[size="xl"]:not(:defined) {
|
|
226
|
+
min-block-size: calc(3.15rem * var(--gw-control-scale, 1));
|
|
181
227
|
}
|
|
182
228
|
|
|
183
229
|
gw-dot:not(:defined) {
|
|
@@ -211,19 +257,19 @@ gw-skeleton-icon:not(:defined) {
|
|
|
211
257
|
gw-input:not(:defined),
|
|
212
258
|
gw-select:not(:defined) {
|
|
213
259
|
display: flex;
|
|
214
|
-
min-block-size:
|
|
260
|
+
min-block-size: calc(2rem + calc(2.5rem * var(--gw-control-scale, 1)));
|
|
215
261
|
}
|
|
216
262
|
|
|
217
263
|
gw-input:is([hint]:not(:defined),
|
|
218
264
|
[error]):not(:defined),
|
|
219
265
|
gw-select:is([hint]:not(:defined),
|
|
220
266
|
[error]):not(:defined) {
|
|
221
|
-
min-block-size:
|
|
267
|
+
min-block-size: calc(3.75rem + calc(2.5rem * var(--gw-control-scale, 1)));
|
|
222
268
|
}
|
|
223
269
|
|
|
224
270
|
gw-select:is([label-hidden]:not(:defined),
|
|
225
271
|
[inline-label]):not(:defined) {
|
|
226
|
-
min-block-size: 2.5rem;
|
|
272
|
+
min-block-size: calc(2.5rem * var(--gw-control-scale, 1));
|
|
227
273
|
}
|
|
228
274
|
|
|
229
275
|
gw-select[inline-label]:not(:defined) {
|
|
@@ -270,6 +316,7 @@ gw-option-list:not(:defined) {
|
|
|
270
316
|
--gw-font-weight-regular: 400;
|
|
271
317
|
--gw-font-weight-strong: 600;
|
|
272
318
|
--gw-density: 1;
|
|
319
|
+
--gw-control-scale: 1;
|
|
273
320
|
--gw-space-0-5: calc(0.125rem * var(--gw-density));
|
|
274
321
|
--gw-space-1: calc(0.25rem * var(--gw-density));
|
|
275
322
|
--gw-space-2: calc(0.5rem * var(--gw-density));
|
|
@@ -524,6 +571,7 @@ gw-option-list:not(:defined) {
|
|
|
524
571
|
--gw-font-weight-regular: 400;
|
|
525
572
|
--gw-font-weight-strong: 600;
|
|
526
573
|
--gw-density: 1.2;
|
|
574
|
+
--gw-control-scale: 1.1;
|
|
527
575
|
--gw-space-0-5: calc(0.125rem * var(--gw-density));
|
|
528
576
|
--gw-space-1: calc(0.25rem * var(--gw-density));
|
|
529
577
|
--gw-space-2: calc(0.5rem * var(--gw-density));
|
|
@@ -778,6 +826,7 @@ gw-option-list:not(:defined) {
|
|
|
778
826
|
--gw-font-weight-regular: 500;
|
|
779
827
|
--gw-font-weight-strong: 700;
|
|
780
828
|
--gw-density: 1;
|
|
829
|
+
--gw-control-scale: 1;
|
|
781
830
|
--gw-space-0-5: calc(0.125rem * var(--gw-density));
|
|
782
831
|
--gw-space-1: calc(0.25rem * var(--gw-density));
|
|
783
832
|
--gw-space-2: calc(0.5rem * var(--gw-density));
|
|
@@ -1032,6 +1081,7 @@ gw-option-list:not(:defined) {
|
|
|
1032
1081
|
--gw-font-weight-regular: 400;
|
|
1033
1082
|
--gw-font-weight-strong: 600;
|
|
1034
1083
|
--gw-density: 1;
|
|
1084
|
+
--gw-control-scale: 1;
|
|
1035
1085
|
--gw-space-0-5: calc(0.125rem * var(--gw-density));
|
|
1036
1086
|
--gw-space-1: calc(0.25rem * var(--gw-density));
|
|
1037
1087
|
--gw-space-2: calc(0.5rem * var(--gw-density));
|
|
@@ -1286,6 +1336,7 @@ gw-option-list:not(:defined) {
|
|
|
1286
1336
|
--gw-font-weight-regular: 400;
|
|
1287
1337
|
--gw-font-weight-strong: 600;
|
|
1288
1338
|
--gw-density: 1;
|
|
1339
|
+
--gw-control-scale: 1;
|
|
1289
1340
|
--gw-space-0-5: calc(0.125rem * var(--gw-density));
|
|
1290
1341
|
--gw-space-1: calc(0.25rem * var(--gw-density));
|
|
1291
1342
|
--gw-space-2: calc(0.5rem * var(--gw-density));
|
|
@@ -1540,6 +1591,7 @@ gw-option-list:not(:defined) {
|
|
|
1540
1591
|
--gw-font-weight-regular: 400;
|
|
1541
1592
|
--gw-font-weight-strong: 600;
|
|
1542
1593
|
--gw-density: 0.85;
|
|
1594
|
+
--gw-control-scale: 0.85;
|
|
1543
1595
|
--gw-space-0-5: calc(0.125rem * var(--gw-density));
|
|
1544
1596
|
--gw-space-1: calc(0.25rem * var(--gw-density));
|
|
1545
1597
|
--gw-space-2: calc(0.5rem * var(--gw-density));
|
|
@@ -1794,6 +1846,7 @@ gw-option-list:not(:defined) {
|
|
|
1794
1846
|
--gw-font-weight-regular: 400;
|
|
1795
1847
|
--gw-font-weight-strong: 600;
|
|
1796
1848
|
--gw-density: 1;
|
|
1849
|
+
--gw-control-scale: 1;
|
|
1797
1850
|
--gw-space-0-5: calc(0.125rem * var(--gw-density));
|
|
1798
1851
|
--gw-space-1: calc(0.25rem * var(--gw-density));
|
|
1799
1852
|
--gw-space-2: calc(0.5rem * var(--gw-density));
|
|
@@ -1994,6 +2047,7 @@ gw-option-list:not(:defined) {
|
|
|
1994
2047
|
--gw-font-weight-regular: 400;
|
|
1995
2048
|
--gw-font-weight-strong: 600;
|
|
1996
2049
|
--gw-density: 1;
|
|
2050
|
+
--gw-control-scale: 1;
|
|
1997
2051
|
--gw-space-0-5: calc(0.125rem * var(--gw-density));
|
|
1998
2052
|
--gw-space-1: calc(0.25rem * var(--gw-density));
|
|
1999
2053
|
--gw-space-2: calc(0.5rem * var(--gw-density));
|
|
@@ -2090,6 +2144,7 @@ gw-option-list:not(:defined) {
|
|
|
2090
2144
|
--gw-font-weight-regular: 400;
|
|
2091
2145
|
--gw-font-weight-strong: 600;
|
|
2092
2146
|
--gw-density: 1;
|
|
2147
|
+
--gw-control-scale: 1;
|
|
2093
2148
|
--gw-space-0-5: calc(0.125rem * var(--gw-density));
|
|
2094
2149
|
--gw-space-1: calc(0.25rem * var(--gw-density));
|
|
2095
2150
|
--gw-space-2: calc(0.5rem * var(--gw-density));
|
|
@@ -2290,6 +2345,7 @@ gw-option-list:not(:defined) {
|
|
|
2290
2345
|
--gw-font-weight-regular: 400;
|
|
2291
2346
|
--gw-font-weight-strong: 600;
|
|
2292
2347
|
--gw-density: 1;
|
|
2348
|
+
--gw-control-scale: 1;
|
|
2293
2349
|
--gw-space-0-5: calc(0.125rem * var(--gw-density));
|
|
2294
2350
|
--gw-space-1: calc(0.25rem * var(--gw-density));
|
|
2295
2351
|
--gw-space-2: calc(0.5rem * var(--gw-density));
|
|
@@ -2490,6 +2546,7 @@ gw-option-list:not(:defined) {
|
|
|
2490
2546
|
--gw-font-weight-regular: 400;
|
|
2491
2547
|
--gw-font-weight-strong: 600;
|
|
2492
2548
|
--gw-density: 1;
|
|
2549
|
+
--gw-control-scale: 1;
|
|
2493
2550
|
--gw-space-0-5: calc(0.125rem * var(--gw-density));
|
|
2494
2551
|
--gw-space-1: calc(0.25rem * var(--gw-density));
|
|
2495
2552
|
--gw-space-2: calc(0.5rem * var(--gw-density));
|
|
@@ -2690,6 +2747,7 @@ gw-option-list:not(:defined) {
|
|
|
2690
2747
|
--gw-font-weight-regular: 400;
|
|
2691
2748
|
--gw-font-weight-strong: 600;
|
|
2692
2749
|
--gw-density: 1;
|
|
2750
|
+
--gw-control-scale: 1;
|
|
2693
2751
|
--gw-space-0-5: calc(0.125rem * var(--gw-density));
|
|
2694
2752
|
--gw-space-1: calc(0.25rem * var(--gw-density));
|
|
2695
2753
|
--gw-space-2: calc(0.5rem * var(--gw-density));
|
|
@@ -2786,6 +2844,7 @@ gw-option-list:not(:defined) {
|
|
|
2786
2844
|
--gw-font-weight-regular: 400;
|
|
2787
2845
|
--gw-font-weight-strong: 600;
|
|
2788
2846
|
--gw-density: 1;
|
|
2847
|
+
--gw-control-scale: 1;
|
|
2789
2848
|
--gw-space-0-5: calc(0.125rem * var(--gw-density));
|
|
2790
2849
|
--gw-space-1: calc(0.25rem * var(--gw-density));
|
|
2791
2850
|
--gw-space-2: calc(0.5rem * var(--gw-density));
|
|
@@ -2986,6 +3045,7 @@ gw-option-list:not(:defined) {
|
|
|
2986
3045
|
--gw-font-weight-regular: 400;
|
|
2987
3046
|
--gw-font-weight-strong: 600;
|
|
2988
3047
|
--gw-density: 1;
|
|
3048
|
+
--gw-control-scale: 1;
|
|
2989
3049
|
--gw-space-0-5: calc(0.125rem * var(--gw-density));
|
|
2990
3050
|
--gw-space-1: calc(0.25rem * var(--gw-density));
|
|
2991
3051
|
--gw-space-2: calc(0.5rem * var(--gw-density));
|
package/generated/themes.json
CHANGED
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
"font-weight-regular": "400",
|
|
40
40
|
"font-weight-strong": "600",
|
|
41
41
|
"density": "1",
|
|
42
|
+
"control-scale": "1",
|
|
42
43
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
43
44
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
44
45
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -258,6 +259,7 @@
|
|
|
258
259
|
"font-weight-regular": "400",
|
|
259
260
|
"font-weight-strong": "600",
|
|
260
261
|
"density": "1.2",
|
|
262
|
+
"control-scale": "1.1",
|
|
261
263
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
262
264
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
263
265
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -477,6 +479,7 @@
|
|
|
477
479
|
"font-weight-regular": "500",
|
|
478
480
|
"font-weight-strong": "700",
|
|
479
481
|
"density": "1",
|
|
482
|
+
"control-scale": "1",
|
|
480
483
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
481
484
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
482
485
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -696,6 +699,7 @@
|
|
|
696
699
|
"font-weight-regular": "400",
|
|
697
700
|
"font-weight-strong": "600",
|
|
698
701
|
"density": "1",
|
|
702
|
+
"control-scale": "1",
|
|
699
703
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
700
704
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
701
705
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -917,6 +921,7 @@
|
|
|
917
921
|
"font-weight-regular": "400",
|
|
918
922
|
"font-weight-strong": "600",
|
|
919
923
|
"density": "1",
|
|
924
|
+
"control-scale": "1",
|
|
920
925
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
921
926
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
922
927
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -1138,6 +1143,7 @@
|
|
|
1138
1143
|
"font-weight-regular": "400",
|
|
1139
1144
|
"font-weight-strong": "600",
|
|
1140
1145
|
"density": "0.85",
|
|
1146
|
+
"control-scale": "0.85",
|
|
1141
1147
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
1142
1148
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
1143
1149
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -1357,6 +1363,7 @@
|
|
|
1357
1363
|
"font-weight-regular": "400",
|
|
1358
1364
|
"font-weight-strong": "600",
|
|
1359
1365
|
"density": "1",
|
|
1366
|
+
"control-scale": "1",
|
|
1360
1367
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
1361
1368
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
1362
1369
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -1529,6 +1536,7 @@
|
|
|
1529
1536
|
"font-weight-regular": "400",
|
|
1530
1537
|
"font-weight-strong": "600",
|
|
1531
1538
|
"density": "1",
|
|
1539
|
+
"control-scale": "1",
|
|
1532
1540
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
1533
1541
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
1534
1542
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -1654,6 +1662,7 @@
|
|
|
1654
1662
|
"font-weight-regular": "400",
|
|
1655
1663
|
"font-weight-strong": "600",
|
|
1656
1664
|
"density": "1",
|
|
1665
|
+
"control-scale": "1",
|
|
1657
1666
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
1658
1667
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
1659
1668
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -1826,6 +1835,7 @@
|
|
|
1826
1835
|
"font-weight-regular": "400",
|
|
1827
1836
|
"font-weight-strong": "600",
|
|
1828
1837
|
"density": "1",
|
|
1838
|
+
"control-scale": "1",
|
|
1829
1839
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
1830
1840
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
1831
1841
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -1998,6 +2008,7 @@
|
|
|
1998
2008
|
"font-weight-regular": "400",
|
|
1999
2009
|
"font-weight-strong": "600",
|
|
2000
2010
|
"density": "1",
|
|
2011
|
+
"control-scale": "1",
|
|
2001
2012
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
2002
2013
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
2003
2014
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -2170,6 +2181,7 @@
|
|
|
2170
2181
|
"font-weight-regular": "400",
|
|
2171
2182
|
"font-weight-strong": "600",
|
|
2172
2183
|
"density": "1",
|
|
2184
|
+
"control-scale": "1",
|
|
2173
2185
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
2174
2186
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
2175
2187
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -2295,6 +2307,7 @@
|
|
|
2295
2307
|
"font-weight-regular": "400",
|
|
2296
2308
|
"font-weight-strong": "600",
|
|
2297
2309
|
"density": "1",
|
|
2310
|
+
"control-scale": "1",
|
|
2298
2311
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
2299
2312
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
2300
2313
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -2467,6 +2480,7 @@
|
|
|
2467
2480
|
"font-weight-regular": "400",
|
|
2468
2481
|
"font-weight-strong": "600",
|
|
2469
2482
|
"density": "1",
|
|
2483
|
+
"control-scale": "1",
|
|
2470
2484
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
2471
2485
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
2472
2486
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
package/generated/themes.ts
CHANGED
|
@@ -40,6 +40,7 @@ export const themes = [
|
|
|
40
40
|
"font-weight-regular": "400",
|
|
41
41
|
"font-weight-strong": "600",
|
|
42
42
|
"density": "1",
|
|
43
|
+
"control-scale": "1",
|
|
43
44
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
44
45
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
45
46
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -259,6 +260,7 @@ export const themes = [
|
|
|
259
260
|
"font-weight-regular": "400",
|
|
260
261
|
"font-weight-strong": "600",
|
|
261
262
|
"density": "1.2",
|
|
263
|
+
"control-scale": "1.1",
|
|
262
264
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
263
265
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
264
266
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -478,6 +480,7 @@ export const themes = [
|
|
|
478
480
|
"font-weight-regular": "500",
|
|
479
481
|
"font-weight-strong": "700",
|
|
480
482
|
"density": "1",
|
|
483
|
+
"control-scale": "1",
|
|
481
484
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
482
485
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
483
486
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -697,6 +700,7 @@ export const themes = [
|
|
|
697
700
|
"font-weight-regular": "400",
|
|
698
701
|
"font-weight-strong": "600",
|
|
699
702
|
"density": "1",
|
|
703
|
+
"control-scale": "1",
|
|
700
704
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
701
705
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
702
706
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -918,6 +922,7 @@ export const themes = [
|
|
|
918
922
|
"font-weight-regular": "400",
|
|
919
923
|
"font-weight-strong": "600",
|
|
920
924
|
"density": "1",
|
|
925
|
+
"control-scale": "1",
|
|
921
926
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
922
927
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
923
928
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -1139,6 +1144,7 @@ export const themes = [
|
|
|
1139
1144
|
"font-weight-regular": "400",
|
|
1140
1145
|
"font-weight-strong": "600",
|
|
1141
1146
|
"density": "0.85",
|
|
1147
|
+
"control-scale": "0.85",
|
|
1142
1148
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
1143
1149
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
1144
1150
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -1358,6 +1364,7 @@ export const themes = [
|
|
|
1358
1364
|
"font-weight-regular": "400",
|
|
1359
1365
|
"font-weight-strong": "600",
|
|
1360
1366
|
"density": "1",
|
|
1367
|
+
"control-scale": "1",
|
|
1361
1368
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
1362
1369
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
1363
1370
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -1530,6 +1537,7 @@ export const themes = [
|
|
|
1530
1537
|
"font-weight-regular": "400",
|
|
1531
1538
|
"font-weight-strong": "600",
|
|
1532
1539
|
"density": "1",
|
|
1540
|
+
"control-scale": "1",
|
|
1533
1541
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
1534
1542
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
1535
1543
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -1655,6 +1663,7 @@ export const themes = [
|
|
|
1655
1663
|
"font-weight-regular": "400",
|
|
1656
1664
|
"font-weight-strong": "600",
|
|
1657
1665
|
"density": "1",
|
|
1666
|
+
"control-scale": "1",
|
|
1658
1667
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
1659
1668
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
1660
1669
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -1827,6 +1836,7 @@ export const themes = [
|
|
|
1827
1836
|
"font-weight-regular": "400",
|
|
1828
1837
|
"font-weight-strong": "600",
|
|
1829
1838
|
"density": "1",
|
|
1839
|
+
"control-scale": "1",
|
|
1830
1840
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
1831
1841
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
1832
1842
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -1999,6 +2009,7 @@ export const themes = [
|
|
|
1999
2009
|
"font-weight-regular": "400",
|
|
2000
2010
|
"font-weight-strong": "600",
|
|
2001
2011
|
"density": "1",
|
|
2012
|
+
"control-scale": "1",
|
|
2002
2013
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
2003
2014
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
2004
2015
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -2171,6 +2182,7 @@ export const themes = [
|
|
|
2171
2182
|
"font-weight-regular": "400",
|
|
2172
2183
|
"font-weight-strong": "600",
|
|
2173
2184
|
"density": "1",
|
|
2185
|
+
"control-scale": "1",
|
|
2174
2186
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
2175
2187
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
2176
2188
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -2296,6 +2308,7 @@ export const themes = [
|
|
|
2296
2308
|
"font-weight-regular": "400",
|
|
2297
2309
|
"font-weight-strong": "600",
|
|
2298
2310
|
"density": "1",
|
|
2311
|
+
"control-scale": "1",
|
|
2299
2312
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
2300
2313
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
2301
2314
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
|
@@ -2468,6 +2481,7 @@ export const themes = [
|
|
|
2468
2481
|
"font-weight-regular": "400",
|
|
2469
2482
|
"font-weight-strong": "600",
|
|
2470
2483
|
"density": "1",
|
|
2484
|
+
"control-scale": "1",
|
|
2471
2485
|
"space-0-5": "calc(0.125rem * var(--gw-density))",
|
|
2472
2486
|
"space-1": "calc(0.25rem * var(--gw-density))",
|
|
2473
2487
|
"space-2": "calc(0.5rem * var(--gw-density))",
|
package/package.json
CHANGED
package/src/generate.ts
CHANGED
|
@@ -32,6 +32,9 @@ const fontStack = (font: Font | MonoFont) => {
|
|
|
32
32
|
|
|
33
33
|
const density = { compact: 0.85, normal: 1, roomy: 1.2 } as const;
|
|
34
34
|
|
|
35
|
+
/** How much controls grow or shrink with density, less than spacing does. */
|
|
36
|
+
const controlScale = { compact: 0.85, normal: 1, roomy: 1.1 } as const;
|
|
37
|
+
|
|
35
38
|
const borderColor = {
|
|
36
39
|
none: "transparent",
|
|
37
40
|
hairline: "var(--gw-color-border-quiet)",
|
|
@@ -47,6 +50,7 @@ const styleProperties = (style: Style) => ({
|
|
|
47
50
|
"font-weight-regular": String(style.weights.regular),
|
|
48
51
|
"font-weight-strong": String(style.weights.strong),
|
|
49
52
|
density: String(density[style.density]),
|
|
53
|
+
"control-scale": String(controlScale[style.density]),
|
|
50
54
|
...spacing,
|
|
51
55
|
"radius-panel": `${style.radius.panel}px`,
|
|
52
56
|
"radius-control": `${style.radius.control}px`,
|
|
@@ -103,6 +107,7 @@ const spacing = {
|
|
|
103
107
|
|
|
104
108
|
const foundations = {
|
|
105
109
|
density: "1",
|
|
110
|
+
"control-scale": "1",
|
|
106
111
|
...spacing,
|
|
107
112
|
"font-size-multiplier": "1",
|
|
108
113
|
"font-size-2xs": "calc(0.6875rem * var(--gw-font-size-multiplier))",
|
|
@@ -198,6 +203,27 @@ export const themeCss = (theme: ResolvedTheme) =>
|
|
|
198
203
|
...modeRules(theme, modeBlock),
|
|
199
204
|
].join("\n\n");
|
|
200
205
|
|
|
206
|
+
/** A control height that follows the theme's density, as the elements do. */
|
|
207
|
+
const dense = (rem: number) =>
|
|
208
|
+
`calc(${Number(rem.toFixed(4))}rem * var(--gw-control-scale, 1))`;
|
|
209
|
+
|
|
210
|
+
/** Pre-upgrade heights for each size preset, matching `controlSizes`. */
|
|
211
|
+
const sized = (
|
|
212
|
+
tag: string,
|
|
213
|
+
rem: number,
|
|
214
|
+
properties: readonly string[] = ["min-block-size"],
|
|
215
|
+
) =>
|
|
216
|
+
Object.fromEntries(
|
|
217
|
+
Object.entries({ xs: 0.6, small: 0.8, large: 1.2, xl: 1.4 }).map(
|
|
218
|
+
([size, scale]) => [
|
|
219
|
+
`${tag}[size="${size}"]`,
|
|
220
|
+
Object.fromEntries(
|
|
221
|
+
properties.map((property) => [property, dense(rem * scale)]),
|
|
222
|
+
),
|
|
223
|
+
],
|
|
224
|
+
),
|
|
225
|
+
);
|
|
226
|
+
|
|
201
227
|
/**
|
|
202
228
|
* What each `gw-` element looks like before its script defines it: the
|
|
203
229
|
* display and block size it will have, so nothing moves when it upgrades.
|
|
@@ -206,34 +232,20 @@ const preUpgrade = {
|
|
|
206
232
|
"gw-fade-in": { opacity: "0" },
|
|
207
233
|
"gw-button, gw-menu-button, gw-segmented": {
|
|
208
234
|
display: "inline-block",
|
|
209
|
-
"min-block-size":
|
|
235
|
+
"min-block-size": dense(2.5),
|
|
210
236
|
"vertical-align": "middle",
|
|
211
237
|
},
|
|
212
238
|
"gw-button": {
|
|
213
239
|
"padding-inline": "calc(var(--gw-space-4) + 1px)",
|
|
214
240
|
"font-size": "var(--gw-font-size-s)",
|
|
215
241
|
"font-weight": "var(--gw-font-weight-strong)",
|
|
216
|
-
"line-height":
|
|
242
|
+
"line-height": dense(2.5),
|
|
217
243
|
"white-space": "nowrap",
|
|
218
244
|
"text-transform": "var(--gw-label-transform)",
|
|
219
245
|
"letter-spacing": "var(--gw-label-tracking)",
|
|
220
246
|
},
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
"line-height": "1.5rem",
|
|
224
|
-
},
|
|
225
|
-
'gw-button[size="small"]': {
|
|
226
|
-
"min-block-size": "2rem",
|
|
227
|
-
"line-height": "2rem",
|
|
228
|
-
},
|
|
229
|
-
'gw-button[size="large"]': {
|
|
230
|
-
"min-block-size": "3rem",
|
|
231
|
-
"line-height": "3rem",
|
|
232
|
-
},
|
|
233
|
-
'gw-button[size="xl"]': {
|
|
234
|
-
"min-block-size": "3.5rem",
|
|
235
|
-
"line-height": "3.5rem",
|
|
236
|
-
},
|
|
247
|
+
...sized("gw-button", 2.5, ["min-block-size", "line-height"]),
|
|
248
|
+
...sized("gw-menu-button", 2.5),
|
|
237
249
|
"gw-card": {
|
|
238
250
|
display: "block",
|
|
239
251
|
padding: "var(--gw-space-4)",
|
|
@@ -267,7 +279,7 @@ const preUpgrade = {
|
|
|
267
279
|
"vertical-align": "middle",
|
|
268
280
|
},
|
|
269
281
|
"gw-theme-gallery": { display: "block" },
|
|
270
|
-
"gw-button[icon]": {
|
|
282
|
+
"gw-button[icon], gw-button[swatch]": {
|
|
271
283
|
"padding-inline-start":
|
|
272
284
|
"calc(var(--gw-space-4) + var(--gw-space-2) + 1.125rem + 1px)",
|
|
273
285
|
},
|
|
@@ -277,9 +289,10 @@ const preUpgrade = {
|
|
|
277
289
|
"margin-inline-end": "var(--gw-space-2)",
|
|
278
290
|
"vertical-align": "middle",
|
|
279
291
|
},
|
|
280
|
-
"gw-chip": { display: "inline-flex", "min-block-size":
|
|
281
|
-
"gw-
|
|
282
|
-
|
|
292
|
+
"gw-chip": { display: "inline-flex", "min-block-size": dense(2) },
|
|
293
|
+
...sized("gw-chip", 2),
|
|
294
|
+
"gw-badge": { display: "inline-flex", "min-block-size": dense(2.25) },
|
|
295
|
+
...sized("gw-badge", 2.25),
|
|
283
296
|
"gw-dot": {
|
|
284
297
|
display: "inline-block",
|
|
285
298
|
"inline-size": "0.5rem",
|
|
@@ -296,12 +309,15 @@ const preUpgrade = {
|
|
|
296
309
|
display: "inline-flex",
|
|
297
310
|
"min-block-size": "1.25rem",
|
|
298
311
|
},
|
|
299
|
-
"gw-input, gw-select": {
|
|
312
|
+
"gw-input, gw-select": {
|
|
313
|
+
display: "flex",
|
|
314
|
+
"min-block-size": `calc(2rem + ${dense(2.5)})`,
|
|
315
|
+
},
|
|
300
316
|
"gw-input:is([hint], [error]), gw-select:is([hint], [error])": {
|
|
301
|
-
"min-block-size":
|
|
317
|
+
"min-block-size": `calc(3.75rem + ${dense(2.5)})`,
|
|
302
318
|
},
|
|
303
319
|
"gw-select:is([label-hidden], [inline-label])": {
|
|
304
|
-
"min-block-size":
|
|
320
|
+
"min-block-size": dense(2.5),
|
|
305
321
|
},
|
|
306
322
|
"gw-select[inline-label]": { display: "inline-flex" },
|
|
307
323
|
"gw-checkbox, gw-switch": { display: "flex", "min-block-size": "1.5rem" },
|