@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.
@@ -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": "0.5rem",
153
- xs: "0.75rem",
154
- sm: "0.875rem",
155
- base: "1rem",
156
- lg: "1.125rem",
157
- xl: "1.25rem",
158
- "2xl": "1.5rem",
159
- "3xl": "1.875rem",
160
- "4xl": "2.25rem",
161
- "5xl": "3rem",
162
- "6xl": "3.75rem",
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": "2px",
205
- xs: "3px",
206
- sm: "5px",
207
- md: "8px",
208
- lg: "13px",
209
- xl: "21px",
210
- "2xl": "34px",
211
- "3xl": "55px",
212
- "4xl": "89px",
213
- "5xl": "144px",
214
- "6xl": "233px",
215
- "7xl": "377px"
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
@@ -1,5 +1,5 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- import { BruttalTheme } from "./chunk-AHVGJFKI.js";
2
+ import { BruttalTheme } from "./chunk-RLVY3LCM.js";
3
3
 
4
4
  // src/createTheme.ts
5
5
  import deepmerge from "deepmerge";
@@ -1,3 +1,3 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- import { BruttalFonts, BruttalTheme } from "../../chunk-AHVGJFKI.js";
2
+ import { BruttalFonts, BruttalTheme } from "../../chunk-RLVY3LCM.js";
3
3
  export { BruttalFonts, BruttalTheme };
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": "0.5rem",
168
- xs: "0.75rem",
169
- sm: "0.875rem",
170
- base: "1rem",
171
- lg: "1.125rem",
172
- xl: "1.25rem",
173
- "2xl": "1.5rem",
174
- "3xl": "1.875rem",
175
- "4xl": "2.25rem",
176
- "5xl": "3rem",
177
- "6xl": "3.75rem",
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": "2px",
220
- xs: "3px",
221
- sm: "5px",
222
- md: "8px",
223
- lg: "13px",
224
- xl: "21px",
225
- "2xl": "34px",
226
- "3xl": "55px",
227
- "4xl": "89px",
228
- "5xl": "144px",
229
- "6xl": "233px",
230
- "7xl": "377px"
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": "0.5rem",
172
- xs: "0.75rem",
173
- sm: "0.875rem",
174
- base: "1rem",
175
- lg: "1.125rem",
176
- xl: "1.25rem",
177
- "2xl": "1.5rem",
178
- "3xl": "1.875rem",
179
- "4xl": "2.25rem",
180
- "5xl": "3rem",
181
- "6xl": "3.75rem",
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": "2px",
224
- xs: "3px",
225
- sm: "5px",
226
- md: "8px",
227
- lg: "13px",
228
- xl: "21px",
229
- "2xl": "34px",
230
- "3xl": "55px",
231
- "4xl": "89px",
232
- "5xl": "144px",
233
- "6xl": "233px",
234
- "7xl": "377px"
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.26",
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": "33dbd7f434af69ce6e6bac1b618cb9dc1103f387"
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',
@@ -1,16 +1,17 @@
1
+ const BASE = '1rem';
2
+
3
+ const MULTIPLIER_FACTOR = 1.333;
4
+
1
5
  export const fontSizes = {
2
- '2xs': '0.5rem',
3
- xs: '0.75rem',
4
- sm: '0.875rem',
5
- base: '1rem',
6
- lg: '1.125rem',
7
- xl: '1.25rem',
8
- '2xl': '1.5rem',
9
- '3xl': '1.875rem',
10
- '4xl': '2.25rem',
11
- '5xl': '3rem',
12
- '6xl': '3.75rem',
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
  };
@@ -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': '2px',
4
- xs: '3px',
5
- sm: '5px',
6
- md: '8px',
7
- lg: '13px',
8
- xl: '21px',
9
- '2xl': '34px',
10
- '3xl': '55px',
11
- '4xl': '89px',
12
- '5xl': '144px',
13
- '6xl': '233px',
14
- '7xl': '377px',
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
  };