@ttoss/theme 1.4.25 → 1.4.27

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 (9) hide show
  1. package/dist/esm/{chunk-AHVGJFKI.js → chunk-DUSQYRAC.js} +43 -26
  2. package/dist/esm/index.js +1 -1
  3. package/dist/esm/themes/Bruttal/Bruttal.js +1 -1
  4. package/dist/index.js +43 -26
  5. package/dist/themes/Bruttal/Bruttal.js +43 -26
  6. package/package.json +4 -4
  7. package/src/themes/Bruttal/BruttalTheme.ts +9 -0
  8. package/src/tokens/fontSizes.ts +15 -14
  9. package/src/tokens/space.ts +24 -12
package/dist/esm/{chunk-AHVGJFKI.js → chunk-DUSQYRAC.js} RENAMED
@@ -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
@@ -510,6 +518,7 @@ var BruttalTheme = {
510
518
  color: "text",
511
519
  fontFamily: "body",
512
520
  alignItems: "center",
521
+ fontSize: "base",
513
522
  '&:is([aria-disabled="true"])': {
514
523
  color: "onMuted"
515
524
  },
@@ -539,6 +548,10 @@ var BruttalTheme = {
539
548
  },
540
549
  "input:focus ~ &": {
541
550
  bg: "transparent"
551
+ },
552
+ "&:is(svg, svg + svg)": {
553
+ width: fontSizes.base,
554
+ height: fontSizes.base
542
555
  }
543
556
  },
544
557
  checkbox: {
@@ -556,6 +569,10 @@ var BruttalTheme = {
556
569
  },
557
570
  'input[aria-invalid="true"] ~ &': {
558
571
  color: "danger"
572
+ },
573
+ "&:is(svg, svg + svg)": {
574
+ width: fontSizes.base,
575
+ height: fontSizes.base
559
576
  }
560
577
  },
561
578
  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-DUSQYRAC.js";
3
3
 
4
4
  // src/createTheme.ts
5
5
  import deepmerge from "deepmerge";
package/dist/esm/themes/Bruttal/Bruttal.js CHANGED
@@ -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-DUSQYRAC.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
@@ -525,6 +533,7 @@ var BruttalTheme = {
525
533
  color: "text",
526
534
  fontFamily: "body",
527
535
  alignItems: "center",
536
+ fontSize: "base",
528
537
  '&:is([aria-disabled="true"])': {
529
538
  color: "onMuted"
530
539
  },
@@ -554,6 +563,10 @@ var BruttalTheme = {
554
563
  },
555
564
  "input:focus ~ &": {
556
565
  bg: "transparent"
566
+ },
567
+ "&:is(svg, svg + svg)": {
568
+ width: fontSizes.base,
569
+ height: fontSizes.base
557
570
  }
558
571
  },
559
572
  checkbox: {
@@ -571,6 +584,10 @@ var BruttalTheme = {
571
584
  },
572
585
  'input[aria-invalid="true"] ~ &': {
573
586
  color: "danger"
587
+ },
588
+ "&:is(svg, svg + svg)": {
589
+ width: fontSizes.base,
590
+ height: fontSizes.base
574
591
  }
575
592
  },
576
593
  input: {
package/dist/themes/Bruttal/Bruttal.js CHANGED
@@ -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
@@ -529,6 +537,7 @@ var BruttalTheme = {
529
537
  color: "text",
530
538
  fontFamily: "body",
531
539
  alignItems: "center",
540
+ fontSize: "base",
532
541
  '&:is([aria-disabled="true"])': {
533
542
  color: "onMuted"
534
543
  },
@@ -558,6 +567,10 @@ var BruttalTheme = {
558
567
  },
559
568
  "input:focus ~ &": {
560
569
  bg: "transparent"
570
+ },
571
+ "&:is(svg, svg + svg)": {
572
+ width: fontSizes.base,
573
+ height: fontSizes.base
561
574
  }
562
575
  },
563
576
  checkbox: {
@@ -575,6 +588,10 @@ var BruttalTheme = {
575
588
  },
576
589
  'input[aria-invalid="true"] ~ &': {
577
590
  color: "danger"
591
+ },
592
+ "&:is(svg, svg + svg)": {
593
+ width: fontSizes.base,
594
+ height: fontSizes.base
578
595
  }
579
596
  },
580
597
  input: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/theme",
3
- "version": "1.4.25",
3
+ "version": "1.4.27",
4
4
  "description": "Theme for packages.",
5
5
  "license": "UNLICENSED",
6
6
  "author": "ttoss",
@@ -39,8 +39,8 @@
39
39
  "@iconify/icons-eos-icons": "^1.2.6",
40
40
  "@iconify/icons-mdi": "^1.2.44",
41
41
  "@iconify/types": "^2.0.0",
42
- "@ttoss/config": "^1.29.5",
43
- "@ttoss/test-utils": "^1.21.5",
42
+ "@ttoss/config": "^1.30.0",
43
+ "@ttoss/test-utils": "^1.22.0",
44
44
  "jest": "^29.5.0",
45
45
  "theme-ui": "^0.15.7",
46
46
  "tsup": "^6.7.0"
@@ -59,5 +59,5 @@
59
59
  ]
60
60
  }
61
61
  },
62
- "gitHead": "a07424c53959642b5b1aedd07994091e79d63ecc"
62
+ "gitHead": "b865ab2a3ba818f221370f6c95a7d580e59a5642"
63
63
  }
package/src/themes/Bruttal/BruttalTheme.ts CHANGED
@@ -304,6 +304,7 @@ export const BruttalTheme: Theme = {
304
304
  color: 'text',
305
305
  fontFamily: 'body',
306
306
  alignItems: 'center',
307
+ fontSize: 'base',
307
308
  '&:is([aria-disabled="true"])': {
308
309
  color: 'onMuted',
309
310
  },
@@ -334,6 +335,10 @@ export const BruttalTheme: Theme = {
334
335
  'input:focus ~ &': {
335
336
  bg: 'transparent',
336
337
  },
338
+ '&:is(svg, svg + svg)': {
339
+ width: fontSizes.base,
340
+ height: fontSizes.base,
341
+ },
337
342
  },
338
343
  checkbox: {
339
344
  'input:focus ~ &': {
@@ -351,6 +356,10 @@ export const BruttalTheme: Theme = {
351
356
  'input[aria-invalid="true"] ~ &': {
352
357
  color: 'danger',
353
358
  },
359
+ '&:is(svg, svg + svg)': {
360
+ width: fontSizes.base,
361
+ height: fontSizes.base,
362
+ },
354
363
  },
355
364
  input: {
356
365
  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': '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
  };
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': '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
  };