@ttoss/theme 1.4.26 → 1.4.28
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/dist/esm/{chunk-AHVGJFKI.js → chunk-RLVY3LCM.js} +54 -26
- package/dist/esm/index.js +1 -1
- package/dist/esm/themes/Bruttal/Bruttal.js +1 -1
- package/dist/index.js +54 -26
- package/dist/themes/Bruttal/Bruttal.js +54 -26
- package/package.json +2 -2
- package/src/themes/Bruttal/BruttalTheme.ts +20 -0
- package/src/tokens/fontSizes.ts +15 -14
- package/src/tokens/space.ts +24 -12
|
@@ -148,21 +148,20 @@ addIcon("warning", warningFilledIcon);
|
|
|
148
148
|
var BruttalFonts = ["https://fonts.googleapis.com/css?family=Inconsolata:wght@100;200;300;400;500;700;800;900", "https://fonts.googleapis.com/css?family=Work+Sans:wght@100;200;300;400;500;700;800;900", "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap"];
|
|
149
149
|
|
|
150
150
|
// src/tokens/fontSizes.ts
|
|
151
|
+
var BASE = "1rem";
|
|
152
|
+
var MULTIPLIER_FACTOR = 1.333;
|
|
151
153
|
var fontSizes = {
|
|
152
|
-
"2xs":
|
|
153
|
-
xs:
|
|
154
|
-
sm:
|
|
155
|
-
base:
|
|
156
|
-
lg:
|
|
157
|
-
xl:
|
|
158
|
-
"2xl":
|
|
159
|
-
"3xl":
|
|
160
|
-
"4xl":
|
|
161
|
-
"5xl":
|
|
162
|
-
"6xl":
|
|
163
|
-
"7xl": "4.5rem",
|
|
164
|
-
"8xl": "6rem",
|
|
165
|
-
"9xl": "8rem"
|
|
154
|
+
"2xs": `calc(${BASE} * (${Math.pow(MULTIPLIER_FACTOR, -3)})`,
|
|
155
|
+
xs: `calc(${BASE} * ${Math.pow(MULTIPLIER_FACTOR, -2)})`,
|
|
156
|
+
sm: `calc(${BASE} * ${Math.pow(MULTIPLIER_FACTOR, -1)})`,
|
|
157
|
+
base: BASE,
|
|
158
|
+
lg: `calc(${BASE} * (${MULTIPLIER_FACTOR}^1))`,
|
|
159
|
+
xl: `calc(${BASE} * (${MULTIPLIER_FACTOR}^2))`,
|
|
160
|
+
"2xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^3))`,
|
|
161
|
+
"3xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^4))`,
|
|
162
|
+
"4xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^5))`,
|
|
163
|
+
"5xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^6))`,
|
|
164
|
+
"6xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^7))`
|
|
166
165
|
};
|
|
167
166
|
|
|
168
167
|
// src/tokens/fontWeights.ts
|
|
@@ -199,20 +198,29 @@ var lineHeights = {
|
|
|
199
198
|
};
|
|
200
199
|
|
|
201
200
|
// src/tokens/space.ts
|
|
201
|
+
var MD = "0.5rem";
|
|
202
|
+
var MULTIPLIER_FACTOR2 = 1.618;
|
|
203
|
+
var multiValues = length => {
|
|
204
|
+
return Array.from({
|
|
205
|
+
length
|
|
206
|
+
}).map(() => {
|
|
207
|
+
return MULTIPLIER_FACTOR2;
|
|
208
|
+
}).join(" * ");
|
|
209
|
+
};
|
|
202
210
|
var space = {
|
|
203
211
|
none: 0,
|
|
204
|
-
"2xs":
|
|
205
|
-
xs:
|
|
206
|
-
sm:
|
|
207
|
-
md:
|
|
208
|
-
lg:
|
|
209
|
-
xl:
|
|
210
|
-
"2xl":
|
|
211
|
-
"3xl":
|
|
212
|
-
"4xl":
|
|
213
|
-
"5xl":
|
|
214
|
-
"6xl":
|
|
215
|
-
"7xl":
|
|
212
|
+
"2xs": `calc(${MD} / (${multiValues(3)}))`,
|
|
213
|
+
xs: `calc(${MD} / (${multiValues(2)}))`,
|
|
214
|
+
sm: `calc(${MD} / (${MULTIPLIER_FACTOR2}))`,
|
|
215
|
+
md: MD,
|
|
216
|
+
lg: `calc(${MD} * ${MULTIPLIER_FACTOR2})`,
|
|
217
|
+
xl: `calc(${MD} * ${multiValues(2)})`,
|
|
218
|
+
"2xl": `calc(${MD} * ${multiValues(3)})`,
|
|
219
|
+
"3xl": `calc(${MD} * ${multiValues(4)})`,
|
|
220
|
+
"4xl": `calc(${MD} * ${multiValues(5)})`,
|
|
221
|
+
"5xl": `calc(${MD} * ${multiValues(6)})`,
|
|
222
|
+
"6xl": `calc(${MD} * ${multiValues(7)})`,
|
|
223
|
+
"7xl": `calc(${MD} * ${multiValues(8)})`
|
|
216
224
|
};
|
|
217
225
|
|
|
218
226
|
// src/themes/Bruttal/BruttalTheme.ts
|
|
@@ -400,6 +408,17 @@ var BruttalTheme = {
|
|
|
400
408
|
paddingX: "xs",
|
|
401
409
|
paddingY: "2xs",
|
|
402
410
|
borderRadius: "informative"
|
|
411
|
+
},
|
|
412
|
+
muted: {
|
|
413
|
+
color: "onMuted",
|
|
414
|
+
bg: "muted",
|
|
415
|
+
fontFamily: "caption",
|
|
416
|
+
fontWeight: "normal",
|
|
417
|
+
lineHeight: "base",
|
|
418
|
+
fontSize: "xs",
|
|
419
|
+
paddingX: "xs",
|
|
420
|
+
paddingY: "2xs",
|
|
421
|
+
borderRadius: "xs"
|
|
403
422
|
}
|
|
404
423
|
},
|
|
405
424
|
buttons: {
|
|
@@ -510,6 +529,7 @@ var BruttalTheme = {
|
|
|
510
529
|
color: "text",
|
|
511
530
|
fontFamily: "body",
|
|
512
531
|
alignItems: "center",
|
|
532
|
+
fontSize: "base",
|
|
513
533
|
'&:is([aria-disabled="true"])': {
|
|
514
534
|
color: "onMuted"
|
|
515
535
|
},
|
|
@@ -539,6 +559,10 @@ var BruttalTheme = {
|
|
|
539
559
|
},
|
|
540
560
|
"input:focus ~ &": {
|
|
541
561
|
bg: "transparent"
|
|
562
|
+
},
|
|
563
|
+
"&:is(svg, svg + svg)": {
|
|
564
|
+
width: fontSizes.base,
|
|
565
|
+
height: fontSizes.base
|
|
542
566
|
}
|
|
543
567
|
},
|
|
544
568
|
checkbox: {
|
|
@@ -556,6 +580,10 @@ var BruttalTheme = {
|
|
|
556
580
|
},
|
|
557
581
|
'input[aria-invalid="true"] ~ &': {
|
|
558
582
|
color: "danger"
|
|
583
|
+
},
|
|
584
|
+
"&:is(svg, svg + svg)": {
|
|
585
|
+
width: fontSizes.base,
|
|
586
|
+
height: fontSizes.base
|
|
559
587
|
}
|
|
560
588
|
},
|
|
561
589
|
input: {
|
package/dist/esm/index.js
CHANGED
package/dist/index.js
CHANGED
|
@@ -163,21 +163,20 @@ var subtractIcon = {
|
|
|
163
163
|
(0, import_react.addIcon)("warning", import_warning_filled.default);
|
|
164
164
|
|
|
165
165
|
// src/tokens/fontSizes.ts
|
|
166
|
+
var BASE = "1rem";
|
|
167
|
+
var MULTIPLIER_FACTOR = 1.333;
|
|
166
168
|
var fontSizes = {
|
|
167
|
-
"2xs":
|
|
168
|
-
xs:
|
|
169
|
-
sm:
|
|
170
|
-
base:
|
|
171
|
-
lg:
|
|
172
|
-
xl:
|
|
173
|
-
"2xl":
|
|
174
|
-
"3xl":
|
|
175
|
-
"4xl":
|
|
176
|
-
"5xl":
|
|
177
|
-
"6xl":
|
|
178
|
-
"7xl": "4.5rem",
|
|
179
|
-
"8xl": "6rem",
|
|
180
|
-
"9xl": "8rem"
|
|
169
|
+
"2xs": `calc(${BASE} * (${Math.pow(MULTIPLIER_FACTOR, -3)})`,
|
|
170
|
+
xs: `calc(${BASE} * ${Math.pow(MULTIPLIER_FACTOR, -2)})`,
|
|
171
|
+
sm: `calc(${BASE} * ${Math.pow(MULTIPLIER_FACTOR, -1)})`,
|
|
172
|
+
base: BASE,
|
|
173
|
+
lg: `calc(${BASE} * (${MULTIPLIER_FACTOR}^1))`,
|
|
174
|
+
xl: `calc(${BASE} * (${MULTIPLIER_FACTOR}^2))`,
|
|
175
|
+
"2xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^3))`,
|
|
176
|
+
"3xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^4))`,
|
|
177
|
+
"4xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^5))`,
|
|
178
|
+
"5xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^6))`,
|
|
179
|
+
"6xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^7))`
|
|
181
180
|
};
|
|
182
181
|
|
|
183
182
|
// src/tokens/fontWeights.ts
|
|
@@ -214,20 +213,29 @@ var lineHeights = {
|
|
|
214
213
|
};
|
|
215
214
|
|
|
216
215
|
// src/tokens/space.ts
|
|
216
|
+
var MD = "0.5rem";
|
|
217
|
+
var MULTIPLIER_FACTOR2 = 1.618;
|
|
218
|
+
var multiValues = length => {
|
|
219
|
+
return Array.from({
|
|
220
|
+
length
|
|
221
|
+
}).map(() => {
|
|
222
|
+
return MULTIPLIER_FACTOR2;
|
|
223
|
+
}).join(" * ");
|
|
224
|
+
};
|
|
217
225
|
var space = {
|
|
218
226
|
none: 0,
|
|
219
|
-
"2xs":
|
|
220
|
-
xs:
|
|
221
|
-
sm:
|
|
222
|
-
md:
|
|
223
|
-
lg:
|
|
224
|
-
xl:
|
|
225
|
-
"2xl":
|
|
226
|
-
"3xl":
|
|
227
|
-
"4xl":
|
|
228
|
-
"5xl":
|
|
229
|
-
"6xl":
|
|
230
|
-
"7xl":
|
|
227
|
+
"2xs": `calc(${MD} / (${multiValues(3)}))`,
|
|
228
|
+
xs: `calc(${MD} / (${multiValues(2)}))`,
|
|
229
|
+
sm: `calc(${MD} / (${MULTIPLIER_FACTOR2}))`,
|
|
230
|
+
md: MD,
|
|
231
|
+
lg: `calc(${MD} * ${MULTIPLIER_FACTOR2})`,
|
|
232
|
+
xl: `calc(${MD} * ${multiValues(2)})`,
|
|
233
|
+
"2xl": `calc(${MD} * ${multiValues(3)})`,
|
|
234
|
+
"3xl": `calc(${MD} * ${multiValues(4)})`,
|
|
235
|
+
"4xl": `calc(${MD} * ${multiValues(5)})`,
|
|
236
|
+
"5xl": `calc(${MD} * ${multiValues(6)})`,
|
|
237
|
+
"6xl": `calc(${MD} * ${multiValues(7)})`,
|
|
238
|
+
"7xl": `calc(${MD} * ${multiValues(8)})`
|
|
231
239
|
};
|
|
232
240
|
|
|
233
241
|
// src/themes/Bruttal/BruttalTheme.ts
|
|
@@ -415,6 +423,17 @@ var BruttalTheme = {
|
|
|
415
423
|
paddingX: "xs",
|
|
416
424
|
paddingY: "2xs",
|
|
417
425
|
borderRadius: "informative"
|
|
426
|
+
},
|
|
427
|
+
muted: {
|
|
428
|
+
color: "onMuted",
|
|
429
|
+
bg: "muted",
|
|
430
|
+
fontFamily: "caption",
|
|
431
|
+
fontWeight: "normal",
|
|
432
|
+
lineHeight: "base",
|
|
433
|
+
fontSize: "xs",
|
|
434
|
+
paddingX: "xs",
|
|
435
|
+
paddingY: "2xs",
|
|
436
|
+
borderRadius: "xs"
|
|
418
437
|
}
|
|
419
438
|
},
|
|
420
439
|
buttons: {
|
|
@@ -525,6 +544,7 @@ var BruttalTheme = {
|
|
|
525
544
|
color: "text",
|
|
526
545
|
fontFamily: "body",
|
|
527
546
|
alignItems: "center",
|
|
547
|
+
fontSize: "base",
|
|
528
548
|
'&:is([aria-disabled="true"])': {
|
|
529
549
|
color: "onMuted"
|
|
530
550
|
},
|
|
@@ -554,6 +574,10 @@ var BruttalTheme = {
|
|
|
554
574
|
},
|
|
555
575
|
"input:focus ~ &": {
|
|
556
576
|
bg: "transparent"
|
|
577
|
+
},
|
|
578
|
+
"&:is(svg, svg + svg)": {
|
|
579
|
+
width: fontSizes.base,
|
|
580
|
+
height: fontSizes.base
|
|
557
581
|
}
|
|
558
582
|
},
|
|
559
583
|
checkbox: {
|
|
@@ -571,6 +595,10 @@ var BruttalTheme = {
|
|
|
571
595
|
},
|
|
572
596
|
'input[aria-invalid="true"] ~ &': {
|
|
573
597
|
color: "danger"
|
|
598
|
+
},
|
|
599
|
+
"&:is(svg, svg + svg)": {
|
|
600
|
+
width: fontSizes.base,
|
|
601
|
+
height: fontSizes.base
|
|
574
602
|
}
|
|
575
603
|
},
|
|
576
604
|
input: {
|
|
@@ -167,21 +167,20 @@ var subtractIcon = {
|
|
|
167
167
|
var BruttalFonts = ["https://fonts.googleapis.com/css?family=Inconsolata:wght@100;200;300;400;500;700;800;900", "https://fonts.googleapis.com/css?family=Work+Sans:wght@100;200;300;400;500;700;800;900", "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap"];
|
|
168
168
|
|
|
169
169
|
// src/tokens/fontSizes.ts
|
|
170
|
+
var BASE = "1rem";
|
|
171
|
+
var MULTIPLIER_FACTOR = 1.333;
|
|
170
172
|
var fontSizes = {
|
|
171
|
-
"2xs":
|
|
172
|
-
xs:
|
|
173
|
-
sm:
|
|
174
|
-
base:
|
|
175
|
-
lg:
|
|
176
|
-
xl:
|
|
177
|
-
"2xl":
|
|
178
|
-
"3xl":
|
|
179
|
-
"4xl":
|
|
180
|
-
"5xl":
|
|
181
|
-
"6xl":
|
|
182
|
-
"7xl": "4.5rem",
|
|
183
|
-
"8xl": "6rem",
|
|
184
|
-
"9xl": "8rem"
|
|
173
|
+
"2xs": `calc(${BASE} * (${Math.pow(MULTIPLIER_FACTOR, -3)})`,
|
|
174
|
+
xs: `calc(${BASE} * ${Math.pow(MULTIPLIER_FACTOR, -2)})`,
|
|
175
|
+
sm: `calc(${BASE} * ${Math.pow(MULTIPLIER_FACTOR, -1)})`,
|
|
176
|
+
base: BASE,
|
|
177
|
+
lg: `calc(${BASE} * (${MULTIPLIER_FACTOR}^1))`,
|
|
178
|
+
xl: `calc(${BASE} * (${MULTIPLIER_FACTOR}^2))`,
|
|
179
|
+
"2xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^3))`,
|
|
180
|
+
"3xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^4))`,
|
|
181
|
+
"4xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^5))`,
|
|
182
|
+
"5xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^6))`,
|
|
183
|
+
"6xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^7))`
|
|
185
184
|
};
|
|
186
185
|
|
|
187
186
|
// src/tokens/fontWeights.ts
|
|
@@ -218,20 +217,29 @@ var lineHeights = {
|
|
|
218
217
|
};
|
|
219
218
|
|
|
220
219
|
// src/tokens/space.ts
|
|
220
|
+
var MD = "0.5rem";
|
|
221
|
+
var MULTIPLIER_FACTOR2 = 1.618;
|
|
222
|
+
var multiValues = length => {
|
|
223
|
+
return Array.from({
|
|
224
|
+
length
|
|
225
|
+
}).map(() => {
|
|
226
|
+
return MULTIPLIER_FACTOR2;
|
|
227
|
+
}).join(" * ");
|
|
228
|
+
};
|
|
221
229
|
var space = {
|
|
222
230
|
none: 0,
|
|
223
|
-
"2xs":
|
|
224
|
-
xs:
|
|
225
|
-
sm:
|
|
226
|
-
md:
|
|
227
|
-
lg:
|
|
228
|
-
xl:
|
|
229
|
-
"2xl":
|
|
230
|
-
"3xl":
|
|
231
|
-
"4xl":
|
|
232
|
-
"5xl":
|
|
233
|
-
"6xl":
|
|
234
|
-
"7xl":
|
|
231
|
+
"2xs": `calc(${MD} / (${multiValues(3)}))`,
|
|
232
|
+
xs: `calc(${MD} / (${multiValues(2)}))`,
|
|
233
|
+
sm: `calc(${MD} / (${MULTIPLIER_FACTOR2}))`,
|
|
234
|
+
md: MD,
|
|
235
|
+
lg: `calc(${MD} * ${MULTIPLIER_FACTOR2})`,
|
|
236
|
+
xl: `calc(${MD} * ${multiValues(2)})`,
|
|
237
|
+
"2xl": `calc(${MD} * ${multiValues(3)})`,
|
|
238
|
+
"3xl": `calc(${MD} * ${multiValues(4)})`,
|
|
239
|
+
"4xl": `calc(${MD} * ${multiValues(5)})`,
|
|
240
|
+
"5xl": `calc(${MD} * ${multiValues(6)})`,
|
|
241
|
+
"6xl": `calc(${MD} * ${multiValues(7)})`,
|
|
242
|
+
"7xl": `calc(${MD} * ${multiValues(8)})`
|
|
235
243
|
};
|
|
236
244
|
|
|
237
245
|
// src/themes/Bruttal/BruttalTheme.ts
|
|
@@ -419,6 +427,17 @@ var BruttalTheme = {
|
|
|
419
427
|
paddingX: "xs",
|
|
420
428
|
paddingY: "2xs",
|
|
421
429
|
borderRadius: "informative"
|
|
430
|
+
},
|
|
431
|
+
muted: {
|
|
432
|
+
color: "onMuted",
|
|
433
|
+
bg: "muted",
|
|
434
|
+
fontFamily: "caption",
|
|
435
|
+
fontWeight: "normal",
|
|
436
|
+
lineHeight: "base",
|
|
437
|
+
fontSize: "xs",
|
|
438
|
+
paddingX: "xs",
|
|
439
|
+
paddingY: "2xs",
|
|
440
|
+
borderRadius: "xs"
|
|
422
441
|
}
|
|
423
442
|
},
|
|
424
443
|
buttons: {
|
|
@@ -529,6 +548,7 @@ var BruttalTheme = {
|
|
|
529
548
|
color: "text",
|
|
530
549
|
fontFamily: "body",
|
|
531
550
|
alignItems: "center",
|
|
551
|
+
fontSize: "base",
|
|
532
552
|
'&:is([aria-disabled="true"])': {
|
|
533
553
|
color: "onMuted"
|
|
534
554
|
},
|
|
@@ -558,6 +578,10 @@ var BruttalTheme = {
|
|
|
558
578
|
},
|
|
559
579
|
"input:focus ~ &": {
|
|
560
580
|
bg: "transparent"
|
|
581
|
+
},
|
|
582
|
+
"&:is(svg, svg + svg)": {
|
|
583
|
+
width: fontSizes.base,
|
|
584
|
+
height: fontSizes.base
|
|
561
585
|
}
|
|
562
586
|
},
|
|
563
587
|
checkbox: {
|
|
@@ -575,6 +599,10 @@ var BruttalTheme = {
|
|
|
575
599
|
},
|
|
576
600
|
'input[aria-invalid="true"] ~ &': {
|
|
577
601
|
color: "danger"
|
|
602
|
+
},
|
|
603
|
+
"&:is(svg, svg + svg)": {
|
|
604
|
+
width: fontSizes.base,
|
|
605
|
+
height: fontSizes.base
|
|
578
606
|
}
|
|
579
607
|
},
|
|
580
608
|
input: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ttoss/theme",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.28",
|
|
4
4
|
"description": "Theme for packages.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"author": "ttoss",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
]
|
|
60
60
|
}
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "c0c2571b4949c0b555f8f21ac6f0c5eec7489f25"
|
|
63
63
|
}
|
|
@@ -195,6 +195,17 @@ export const BruttalTheme: Theme = {
|
|
|
195
195
|
paddingY: '2xs',
|
|
196
196
|
borderRadius: 'informative',
|
|
197
197
|
},
|
|
198
|
+
muted: {
|
|
199
|
+
color: 'onMuted',
|
|
200
|
+
bg: 'muted',
|
|
201
|
+
fontFamily: 'caption',
|
|
202
|
+
fontWeight: 'normal',
|
|
203
|
+
lineHeight: 'base',
|
|
204
|
+
fontSize: 'xs',
|
|
205
|
+
paddingX: 'xs',
|
|
206
|
+
paddingY: '2xs',
|
|
207
|
+
borderRadius: 'xs',
|
|
208
|
+
},
|
|
198
209
|
},
|
|
199
210
|
buttons: {
|
|
200
211
|
accent: {
|
|
@@ -304,6 +315,7 @@ export const BruttalTheme: Theme = {
|
|
|
304
315
|
color: 'text',
|
|
305
316
|
fontFamily: 'body',
|
|
306
317
|
alignItems: 'center',
|
|
318
|
+
fontSize: 'base',
|
|
307
319
|
'&:is([aria-disabled="true"])': {
|
|
308
320
|
color: 'onMuted',
|
|
309
321
|
},
|
|
@@ -334,6 +346,10 @@ export const BruttalTheme: Theme = {
|
|
|
334
346
|
'input:focus ~ &': {
|
|
335
347
|
bg: 'transparent',
|
|
336
348
|
},
|
|
349
|
+
'&:is(svg, svg + svg)': {
|
|
350
|
+
width: fontSizes.base,
|
|
351
|
+
height: fontSizes.base,
|
|
352
|
+
},
|
|
337
353
|
},
|
|
338
354
|
checkbox: {
|
|
339
355
|
'input:focus ~ &': {
|
|
@@ -351,6 +367,10 @@ export const BruttalTheme: Theme = {
|
|
|
351
367
|
'input[aria-invalid="true"] ~ &': {
|
|
352
368
|
color: 'danger',
|
|
353
369
|
},
|
|
370
|
+
'&:is(svg, svg + svg)': {
|
|
371
|
+
width: fontSizes.base,
|
|
372
|
+
height: fontSizes.base,
|
|
373
|
+
},
|
|
354
374
|
},
|
|
355
375
|
input: {
|
|
356
376
|
fontFamily: 'body',
|
package/src/tokens/fontSizes.ts
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
|
+
const BASE = '1rem';
|
|
2
|
+
|
|
3
|
+
const MULTIPLIER_FACTOR = 1.333;
|
|
4
|
+
|
|
1
5
|
export const fontSizes = {
|
|
2
|
-
'2xs':
|
|
3
|
-
xs:
|
|
4
|
-
sm:
|
|
5
|
-
base:
|
|
6
|
-
lg:
|
|
7
|
-
xl:
|
|
8
|
-
'2xl':
|
|
9
|
-
'3xl':
|
|
10
|
-
'4xl':
|
|
11
|
-
'5xl':
|
|
12
|
-
'6xl':
|
|
13
|
-
'7xl': '4.5rem',
|
|
14
|
-
'8xl': '6rem',
|
|
15
|
-
'9xl': '8rem',
|
|
6
|
+
'2xs': `calc(${BASE} * (${Math.pow(MULTIPLIER_FACTOR, -3)})`,
|
|
7
|
+
xs: `calc(${BASE} * ${Math.pow(MULTIPLIER_FACTOR, -2)})`,
|
|
8
|
+
sm: `calc(${BASE} * ${Math.pow(MULTIPLIER_FACTOR, -1)})`,
|
|
9
|
+
base: BASE,
|
|
10
|
+
lg: `calc(${BASE} * (${MULTIPLIER_FACTOR}^1))`,
|
|
11
|
+
xl: `calc(${BASE} * (${MULTIPLIER_FACTOR}^2))`,
|
|
12
|
+
'2xl': `calc(${BASE} * (${MULTIPLIER_FACTOR}^3))`,
|
|
13
|
+
'3xl': `calc(${BASE} * (${MULTIPLIER_FACTOR}^4))`,
|
|
14
|
+
'4xl': `calc(${BASE} * (${MULTIPLIER_FACTOR}^5))`,
|
|
15
|
+
'5xl': `calc(${BASE} * (${MULTIPLIER_FACTOR}^6))`,
|
|
16
|
+
'6xl': `calc(${BASE} * (${MULTIPLIER_FACTOR}^7))`,
|
|
16
17
|
};
|
package/src/tokens/space.ts
CHANGED
|
@@ -1,15 +1,27 @@
|
|
|
1
|
+
const MD = '0.5rem';
|
|
2
|
+
|
|
3
|
+
const MULTIPLIER_FACTOR = 1.618;
|
|
4
|
+
|
|
5
|
+
const multiValues = (length: number) => {
|
|
6
|
+
return Array.from({ length })
|
|
7
|
+
.map(() => {
|
|
8
|
+
return MULTIPLIER_FACTOR;
|
|
9
|
+
})
|
|
10
|
+
.join(' * ');
|
|
11
|
+
};
|
|
12
|
+
|
|
1
13
|
export const space = {
|
|
2
14
|
none: 0,
|
|
3
|
-
'2xs':
|
|
4
|
-
xs:
|
|
5
|
-
sm:
|
|
6
|
-
md:
|
|
7
|
-
lg:
|
|
8
|
-
xl:
|
|
9
|
-
'2xl':
|
|
10
|
-
'3xl':
|
|
11
|
-
'4xl':
|
|
12
|
-
'5xl':
|
|
13
|
-
'6xl':
|
|
14
|
-
'7xl':
|
|
15
|
+
'2xs': `calc(${MD} / (${multiValues(3)}))`,
|
|
16
|
+
xs: `calc(${MD} / (${multiValues(2)}))`,
|
|
17
|
+
sm: `calc(${MD} / (${MULTIPLIER_FACTOR}))`,
|
|
18
|
+
md: MD,
|
|
19
|
+
lg: `calc(${MD} * ${MULTIPLIER_FACTOR})`,
|
|
20
|
+
xl: `calc(${MD} * ${multiValues(2)})`,
|
|
21
|
+
'2xl': `calc(${MD} * ${multiValues(3)})`,
|
|
22
|
+
'3xl': `calc(${MD} * ${multiValues(4)})`,
|
|
23
|
+
'4xl': `calc(${MD} * ${multiValues(5)})`,
|
|
24
|
+
'5xl': `calc(${MD} * ${multiValues(6)})`,
|
|
25
|
+
'6xl': `calc(${MD} * ${multiValues(7)})`,
|
|
26
|
+
'7xl': `calc(${MD} * ${multiValues(8)})`,
|
|
15
27
|
};
|