@ttoss/theme 1.4.30 → 1.4.32

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 (12) hide show
  1. package/LICENSE +674 -0
  2. package/dist/esm/{chunk-NBEPUG6F.js → chunk-NGT4BFCW.js} +79 -63
  3. package/dist/esm/index.js +1 -1
  4. package/dist/esm/themes/Bruttal/Bruttal.js +1 -1
  5. package/dist/index.js +79 -63
  6. package/dist/themes/Bruttal/Bruttal.js +79 -63
  7. package/package.json +9 -10
  8. package/src/helpers/geometricCalc.ts +23 -0
  9. package/src/themes/Bruttal/BruttalTheme.ts +37 -27
  10. package/src/tokens/fontSizes.ts +16 -12
  11. package/src/tokens/letterSpacings.ts +4 -4
  12. package/src/tokens/space.ts +20 -21
package/dist/esm/{chunk-NBEPUG6F.js → chunk-NGT4BFCW.js} RENAMED
@@ -149,21 +149,33 @@ addIcon("warning", warningFilledIcon);
149
149
  // src/themes/Bruttal/BruttalFonts.ts
150
150
  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"];
151
151
 
152
+ // src/helpers/geometricCalc.ts
153
+ var SIZE_TYPE = "rem";
154
+ var calcMultiplyingValues = (initialValue, base, ratio, sizeType = SIZE_TYPE) => {
155
+ const result = initialValue * Math.pow(base, ratio);
156
+ return `${result.toFixed(2)}${sizeType}`;
157
+ };
158
+ var calcDividingValues = (initialValue, base, ratio, sizeType = SIZE_TYPE) => {
159
+ const result = initialValue / Math.pow(base, ratio);
160
+ return `${result.toFixed(2)}${sizeType}`;
161
+ };
162
+
152
163
  // src/tokens/fontSizes.ts
153
- var BASE = "1rem";
164
+ var SIZE_TYPE2 = "rem";
165
+ var BASE = 1;
154
166
  var MULTIPLIER_FACTOR = 1.333;
155
167
  var fontSizes = {
156
- "2xs": `calc(${BASE} * (${Math.pow(MULTIPLIER_FACTOR, -3)})`,
157
- xs: `calc(${BASE} * ${Math.pow(MULTIPLIER_FACTOR, -2)})`,
158
- sm: `calc(${BASE} * ${Math.pow(MULTIPLIER_FACTOR, -1)})`,
159
- base: BASE,
160
- lg: `calc(${BASE} * (${MULTIPLIER_FACTOR}^1))`,
161
- xl: `calc(${BASE} * (${MULTIPLIER_FACTOR}^2))`,
162
- "2xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^3))`,
163
- "3xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^4))`,
164
- "4xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^5))`,
165
- "5xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^6))`,
166
- "6xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^7))`
168
+ "2xs": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -3),
169
+ xs: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -2),
170
+ sm: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -1),
171
+ base: `${BASE}${SIZE_TYPE2}`,
172
+ lg: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 1),
173
+ xl: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 2),
174
+ "2xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 3),
175
+ "3xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 4),
176
+ "4xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 5),
177
+ "5xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 6),
178
+ "6xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 7)
167
179
  };
168
180
 
169
181
  // src/tokens/fontWeights.ts
@@ -182,10 +194,10 @@ var fontWeights = {
182
194
  var letterSpacings = {
183
195
  tighter: "-0.05em",
184
196
  tight: "-0.025em",
185
- normal: "0em",
186
- wide: "0.025em",
187
- wider: "0.05em",
188
- widest: "0.1em"
197
+ regular: "0em",
198
+ wide: "0.05em",
199
+ wider: "0.1em",
200
+ widest: "0.5em"
189
201
  };
190
202
 
191
203
  // src/tokens/lineHeights.ts
@@ -200,29 +212,23 @@ var lineHeights = {
200
212
  };
201
213
 
202
214
  // src/tokens/space.ts
203
- var MD = "0.5rem";
215
+ var SIZE_TYPE3 = "rem";
216
+ var MD = 0.5;
204
217
  var MULTIPLIER_FACTOR2 = 1.618;
205
- var multiValues = length => {
206
- return Array.from({
207
- length
208
- }).map(() => {
209
- return MULTIPLIER_FACTOR2;
210
- }).join(" * ");
211
- };
212
218
  var space = {
213
219
  none: 0,
214
- "2xs": `calc(${MD} / (${multiValues(3)}))`,
215
- xs: `calc(${MD} / (${multiValues(2)}))`,
216
- sm: `calc(${MD} / (${MULTIPLIER_FACTOR2}))`,
217
- md: MD,
218
- lg: `calc(${MD} * ${MULTIPLIER_FACTOR2})`,
219
- xl: `calc(${MD} * ${multiValues(2)})`,
220
- "2xl": `calc(${MD} * ${multiValues(3)})`,
221
- "3xl": `calc(${MD} * ${multiValues(4)})`,
222
- "4xl": `calc(${MD} * ${multiValues(5)})`,
223
- "5xl": `calc(${MD} * ${multiValues(6)})`,
224
- "6xl": `calc(${MD} * ${multiValues(7)})`,
225
- "7xl": `calc(${MD} * ${multiValues(8)})`
220
+ "2xs": calcDividingValues(MD, MULTIPLIER_FACTOR2, 3),
221
+ xs: calcDividingValues(MD, MULTIPLIER_FACTOR2, 2),
222
+ sm: calcDividingValues(MD, MULTIPLIER_FACTOR2, 1),
223
+ md: `${MD}${SIZE_TYPE3}`,
224
+ lg: calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 1),
225
+ xl: calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 2),
226
+ "2xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 3),
227
+ "3xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 4),
228
+ "4xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 5),
229
+ "5xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 6),
230
+ "6xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 7),
231
+ "7xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 8)
226
232
  };
227
233
 
228
234
  // src/themes/Bruttal/BruttalTheme.ts
@@ -316,12 +322,13 @@ var BruttalTheme = {
316
322
  underemphasize: coreColors.gray300
317
323
  },
318
324
  fonts: {
319
- h1: coreFonts.contrast,
320
- h2: coreFonts.contrast,
321
- h3: coreFonts.contrast,
322
- h4: coreFonts.contrast,
323
- h5: coreFonts.contrast,
324
- h6: coreFonts.contrast,
325
+ // h1: coreFonts.contrast,
326
+ // h2: coreFonts.contrast,
327
+ // h3: coreFonts.contrast,
328
+ // h4: coreFonts.contrast,
329
+ // h5: coreFonts.contrast,
330
+ // h6: coreFonts.contrast,
331
+ contrast: coreFonts.contrast,
325
332
  body: coreFonts.main,
326
333
  highlight: coreFonts.main,
327
334
  caption: coreFonts.main
@@ -371,6 +378,7 @@ var BruttalTheme = {
371
378
  a: {
372
379
  color: "text",
373
380
  fontFamily: "body",
381
+ textDecorationLine: "underline",
374
382
  "&.quiet:not(:hover)": {
375
383
  textDecorationLine: "none"
376
384
  },
@@ -547,19 +555,22 @@ var BruttalTheme = {
547
555
  forms: {
548
556
  label: {
549
557
  color: "text",
550
- fontFamily: "body",
558
+ fontFamily: "caption",
551
559
  alignItems: "center",
552
- fontSize: "base",
560
+ fontSize: "sm",
553
561
  '&:is([aria-disabled="true"])': {
554
562
  color: "onMuted"
555
563
  },
556
564
  '& > span[aria-label="tooltip"]': {
557
- fontSize: "xs",
565
+ fontSize: "sm",
558
566
  marginLeft: "2xs"
559
567
  },
560
568
  '&:has(input[type="checkbox"]:disabled)': {
561
569
  color: "onMuted"
562
570
  },
571
+ "&:has(+div>:is(input, select, textarea))": {
572
+ marginBottom: "md"
573
+ },
563
574
  '&:has(div > input[type="radio"])': {
564
575
  alignItems: "center"
565
576
  },
@@ -758,34 +769,39 @@ var BruttalTheme = {
758
769
  }
759
770
  },
760
771
  h1: {
761
- fontFamily: "heading",
762
- fontSize: "6xl",
763
- fontWeight: "bold",
764
- letterSpacing: "normal"
772
+ fontFamily: "contrast",
773
+ fontWeight: "extraBold",
774
+ lineHeight: "base",
775
+ fontSize: "3xl",
776
+ letterSpacing: "regular"
765
777
  },
766
778
  h2: {
767
- fontFamily: "heading",
768
- fontSize: "5xl",
779
+ fontFamily: "contrast",
769
780
  fontWeight: "bold",
770
- letterSpacing: "normal"
781
+ lineHeight: "base",
782
+ fontSize: "2xl",
783
+ letterSpacing: "regular"
771
784
  },
772
785
  h3: {
773
- fontFamily: "heading",
774
- fontSize: "4xl",
786
+ fontFamily: "contrast",
775
787
  fontWeight: "bold",
776
- letterSpacing: "normal"
788
+ lineHeight: "base",
789
+ fontSize: "xl",
790
+ letterSpacing: "regular"
777
791
  },
778
792
  h4: {
779
- fontFamily: "heading",
780
- fontSize: "2xl",
781
- fontWeight: "bold",
782
- letterSpacing: "normal"
793
+ fontFamily: "contrast",
794
+ fontWeight: "semiBold",
795
+ lineHeight: "base",
796
+ fontSize: "lg",
797
+ letterSpacing: "regular"
783
798
  },
784
799
  h5: {
785
- fontFamily: "heading",
786
- fontSize: "xl",
787
- fontWeight: "bold",
788
- letterSpacing: "normal"
800
+ fontFamily: "contrast",
801
+ fontWeight: "semiBold",
802
+ lineHeight: "base",
803
+ fontSize: "base",
804
+ letterSpacing: "regular"
789
805
  }
790
806
  }
791
807
  };
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-NBEPUG6F.js";
2
+ import { BruttalTheme } from "./chunk-NGT4BFCW.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-NBEPUG6F.js";
2
+ import { BruttalFonts, BruttalTheme } from "../../chunk-NGT4BFCW.js";
3
3
  export { BruttalFonts, BruttalTheme };
package/dist/index.js CHANGED
@@ -164,21 +164,33 @@ var subtractIcon = {
164
164
  (0, import_react.addIcon)("view-on", import_view_filled.default);
165
165
  (0, import_react.addIcon)("warning", import_warning_filled.default);
166
166
 
167
+ // src/helpers/geometricCalc.ts
168
+ var SIZE_TYPE = "rem";
169
+ var calcMultiplyingValues = (initialValue, base, ratio, sizeType = SIZE_TYPE) => {
170
+ const result = initialValue * Math.pow(base, ratio);
171
+ return `${result.toFixed(2)}${sizeType}`;
172
+ };
173
+ var calcDividingValues = (initialValue, base, ratio, sizeType = SIZE_TYPE) => {
174
+ const result = initialValue / Math.pow(base, ratio);
175
+ return `${result.toFixed(2)}${sizeType}`;
176
+ };
177
+
167
178
  // src/tokens/fontSizes.ts
168
- var BASE = "1rem";
179
+ var SIZE_TYPE2 = "rem";
180
+ var BASE = 1;
169
181
  var MULTIPLIER_FACTOR = 1.333;
170
182
  var fontSizes = {
171
- "2xs": `calc(${BASE} * (${Math.pow(MULTIPLIER_FACTOR, -3)})`,
172
- xs: `calc(${BASE} * ${Math.pow(MULTIPLIER_FACTOR, -2)})`,
173
- sm: `calc(${BASE} * ${Math.pow(MULTIPLIER_FACTOR, -1)})`,
174
- base: BASE,
175
- lg: `calc(${BASE} * (${MULTIPLIER_FACTOR}^1))`,
176
- xl: `calc(${BASE} * (${MULTIPLIER_FACTOR}^2))`,
177
- "2xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^3))`,
178
- "3xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^4))`,
179
- "4xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^5))`,
180
- "5xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^6))`,
181
- "6xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^7))`
183
+ "2xs": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -3),
184
+ xs: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -2),
185
+ sm: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -1),
186
+ base: `${BASE}${SIZE_TYPE2}`,
187
+ lg: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 1),
188
+ xl: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 2),
189
+ "2xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 3),
190
+ "3xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 4),
191
+ "4xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 5),
192
+ "5xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 6),
193
+ "6xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 7)
182
194
  };
183
195
 
184
196
  // src/tokens/fontWeights.ts
@@ -197,10 +209,10 @@ var fontWeights = {
197
209
  var letterSpacings = {
198
210
  tighter: "-0.05em",
199
211
  tight: "-0.025em",
200
- normal: "0em",
201
- wide: "0.025em",
202
- wider: "0.05em",
203
- widest: "0.1em"
212
+ regular: "0em",
213
+ wide: "0.05em",
214
+ wider: "0.1em",
215
+ widest: "0.5em"
204
216
  };
205
217
 
206
218
  // src/tokens/lineHeights.ts
@@ -215,29 +227,23 @@ var lineHeights = {
215
227
  };
216
228
 
217
229
  // src/tokens/space.ts
218
- var MD = "0.5rem";
230
+ var SIZE_TYPE3 = "rem";
231
+ var MD = 0.5;
219
232
  var MULTIPLIER_FACTOR2 = 1.618;
220
- var multiValues = length => {
221
- return Array.from({
222
- length
223
- }).map(() => {
224
- return MULTIPLIER_FACTOR2;
225
- }).join(" * ");
226
- };
227
233
  var space = {
228
234
  none: 0,
229
- "2xs": `calc(${MD} / (${multiValues(3)}))`,
230
- xs: `calc(${MD} / (${multiValues(2)}))`,
231
- sm: `calc(${MD} / (${MULTIPLIER_FACTOR2}))`,
232
- md: MD,
233
- lg: `calc(${MD} * ${MULTIPLIER_FACTOR2})`,
234
- xl: `calc(${MD} * ${multiValues(2)})`,
235
- "2xl": `calc(${MD} * ${multiValues(3)})`,
236
- "3xl": `calc(${MD} * ${multiValues(4)})`,
237
- "4xl": `calc(${MD} * ${multiValues(5)})`,
238
- "5xl": `calc(${MD} * ${multiValues(6)})`,
239
- "6xl": `calc(${MD} * ${multiValues(7)})`,
240
- "7xl": `calc(${MD} * ${multiValues(8)})`
235
+ "2xs": calcDividingValues(MD, MULTIPLIER_FACTOR2, 3),
236
+ xs: calcDividingValues(MD, MULTIPLIER_FACTOR2, 2),
237
+ sm: calcDividingValues(MD, MULTIPLIER_FACTOR2, 1),
238
+ md: `${MD}${SIZE_TYPE3}`,
239
+ lg: calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 1),
240
+ xl: calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 2),
241
+ "2xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 3),
242
+ "3xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 4),
243
+ "4xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 5),
244
+ "5xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 6),
245
+ "6xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 7),
246
+ "7xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 8)
241
247
  };
242
248
 
243
249
  // src/themes/Bruttal/BruttalTheme.ts
@@ -331,12 +337,13 @@ var BruttalTheme = {
331
337
  underemphasize: coreColors.gray300
332
338
  },
333
339
  fonts: {
334
- h1: coreFonts.contrast,
335
- h2: coreFonts.contrast,
336
- h3: coreFonts.contrast,
337
- h4: coreFonts.contrast,
338
- h5: coreFonts.contrast,
339
- h6: coreFonts.contrast,
340
+ // h1: coreFonts.contrast,
341
+ // h2: coreFonts.contrast,
342
+ // h3: coreFonts.contrast,
343
+ // h4: coreFonts.contrast,
344
+ // h5: coreFonts.contrast,
345
+ // h6: coreFonts.contrast,
346
+ contrast: coreFonts.contrast,
340
347
  body: coreFonts.main,
341
348
  highlight: coreFonts.main,
342
349
  caption: coreFonts.main
@@ -386,6 +393,7 @@ var BruttalTheme = {
386
393
  a: {
387
394
  color: "text",
388
395
  fontFamily: "body",
396
+ textDecorationLine: "underline",
389
397
  "&.quiet:not(:hover)": {
390
398
  textDecorationLine: "none"
391
399
  },
@@ -562,19 +570,22 @@ var BruttalTheme = {
562
570
  forms: {
563
571
  label: {
564
572
  color: "text",
565
- fontFamily: "body",
573
+ fontFamily: "caption",
566
574
  alignItems: "center",
567
- fontSize: "base",
575
+ fontSize: "sm",
568
576
  '&:is([aria-disabled="true"])': {
569
577
  color: "onMuted"
570
578
  },
571
579
  '& > span[aria-label="tooltip"]': {
572
- fontSize: "xs",
580
+ fontSize: "sm",
573
581
  marginLeft: "2xs"
574
582
  },
575
583
  '&:has(input[type="checkbox"]:disabled)': {
576
584
  color: "onMuted"
577
585
  },
586
+ "&:has(+div>:is(input, select, textarea))": {
587
+ marginBottom: "md"
588
+ },
578
589
  '&:has(div > input[type="radio"])': {
579
590
  alignItems: "center"
580
591
  },
@@ -773,34 +784,39 @@ var BruttalTheme = {
773
784
  }
774
785
  },
775
786
  h1: {
776
- fontFamily: "heading",
777
- fontSize: "6xl",
778
- fontWeight: "bold",
779
- letterSpacing: "normal"
787
+ fontFamily: "contrast",
788
+ fontWeight: "extraBold",
789
+ lineHeight: "base",
790
+ fontSize: "3xl",
791
+ letterSpacing: "regular"
780
792
  },
781
793
  h2: {
782
- fontFamily: "heading",
783
- fontSize: "5xl",
794
+ fontFamily: "contrast",
784
795
  fontWeight: "bold",
785
- letterSpacing: "normal"
796
+ lineHeight: "base",
797
+ fontSize: "2xl",
798
+ letterSpacing: "regular"
786
799
  },
787
800
  h3: {
788
- fontFamily: "heading",
789
- fontSize: "4xl",
801
+ fontFamily: "contrast",
790
802
  fontWeight: "bold",
791
- letterSpacing: "normal"
803
+ lineHeight: "base",
804
+ fontSize: "xl",
805
+ letterSpacing: "regular"
792
806
  },
793
807
  h4: {
794
- fontFamily: "heading",
795
- fontSize: "2xl",
796
- fontWeight: "bold",
797
- letterSpacing: "normal"
808
+ fontFamily: "contrast",
809
+ fontWeight: "semiBold",
810
+ lineHeight: "base",
811
+ fontSize: "lg",
812
+ letterSpacing: "regular"
798
813
  },
799
814
  h5: {
800
- fontFamily: "heading",
801
- fontSize: "xl",
802
- fontWeight: "bold",
803
- letterSpacing: "normal"
815
+ fontFamily: "contrast",
816
+ fontWeight: "semiBold",
817
+ lineHeight: "base",
818
+ fontSize: "base",
819
+ letterSpacing: "regular"
804
820
  }
805
821
  }
806
822
  };
package/dist/themes/Bruttal/Bruttal.js CHANGED
@@ -168,21 +168,33 @@ var subtractIcon = {
168
168
  // src/themes/Bruttal/BruttalFonts.ts
169
169
  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"];
170
170
 
171
+ // src/helpers/geometricCalc.ts
172
+ var SIZE_TYPE = "rem";
173
+ var calcMultiplyingValues = (initialValue, base, ratio, sizeType = SIZE_TYPE) => {
174
+ const result = initialValue * Math.pow(base, ratio);
175
+ return `${result.toFixed(2)}${sizeType}`;
176
+ };
177
+ var calcDividingValues = (initialValue, base, ratio, sizeType = SIZE_TYPE) => {
178
+ const result = initialValue / Math.pow(base, ratio);
179
+ return `${result.toFixed(2)}${sizeType}`;
180
+ };
181
+
171
182
  // src/tokens/fontSizes.ts
172
- var BASE = "1rem";
183
+ var SIZE_TYPE2 = "rem";
184
+ var BASE = 1;
173
185
  var MULTIPLIER_FACTOR = 1.333;
174
186
  var fontSizes = {
175
- "2xs": `calc(${BASE} * (${Math.pow(MULTIPLIER_FACTOR, -3)})`,
176
- xs: `calc(${BASE} * ${Math.pow(MULTIPLIER_FACTOR, -2)})`,
177
- sm: `calc(${BASE} * ${Math.pow(MULTIPLIER_FACTOR, -1)})`,
178
- base: BASE,
179
- lg: `calc(${BASE} * (${MULTIPLIER_FACTOR}^1))`,
180
- xl: `calc(${BASE} * (${MULTIPLIER_FACTOR}^2))`,
181
- "2xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^3))`,
182
- "3xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^4))`,
183
- "4xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^5))`,
184
- "5xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^6))`,
185
- "6xl": `calc(${BASE} * (${MULTIPLIER_FACTOR}^7))`
187
+ "2xs": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -3),
188
+ xs: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -2),
189
+ sm: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -1),
190
+ base: `${BASE}${SIZE_TYPE2}`,
191
+ lg: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 1),
192
+ xl: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 2),
193
+ "2xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 3),
194
+ "3xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 4),
195
+ "4xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 5),
196
+ "5xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 6),
197
+ "6xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 7)
186
198
  };
187
199
 
188
200
  // src/tokens/fontWeights.ts
@@ -201,10 +213,10 @@ var fontWeights = {
201
213
  var letterSpacings = {
202
214
  tighter: "-0.05em",
203
215
  tight: "-0.025em",
204
- normal: "0em",
205
- wide: "0.025em",
206
- wider: "0.05em",
207
- widest: "0.1em"
216
+ regular: "0em",
217
+ wide: "0.05em",
218
+ wider: "0.1em",
219
+ widest: "0.5em"
208
220
  };
209
221
 
210
222
  // src/tokens/lineHeights.ts
@@ -219,29 +231,23 @@ var lineHeights = {
219
231
  };
220
232
 
221
233
  // src/tokens/space.ts
222
- var MD = "0.5rem";
234
+ var SIZE_TYPE3 = "rem";
235
+ var MD = 0.5;
223
236
  var MULTIPLIER_FACTOR2 = 1.618;
224
- var multiValues = length => {
225
- return Array.from({
226
- length
227
- }).map(() => {
228
- return MULTIPLIER_FACTOR2;
229
- }).join(" * ");
230
- };
231
237
  var space = {
232
238
  none: 0,
233
- "2xs": `calc(${MD} / (${multiValues(3)}))`,
234
- xs: `calc(${MD} / (${multiValues(2)}))`,
235
- sm: `calc(${MD} / (${MULTIPLIER_FACTOR2}))`,
236
- md: MD,
237
- lg: `calc(${MD} * ${MULTIPLIER_FACTOR2})`,
238
- xl: `calc(${MD} * ${multiValues(2)})`,
239
- "2xl": `calc(${MD} * ${multiValues(3)})`,
240
- "3xl": `calc(${MD} * ${multiValues(4)})`,
241
- "4xl": `calc(${MD} * ${multiValues(5)})`,
242
- "5xl": `calc(${MD} * ${multiValues(6)})`,
243
- "6xl": `calc(${MD} * ${multiValues(7)})`,
244
- "7xl": `calc(${MD} * ${multiValues(8)})`
239
+ "2xs": calcDividingValues(MD, MULTIPLIER_FACTOR2, 3),
240
+ xs: calcDividingValues(MD, MULTIPLIER_FACTOR2, 2),
241
+ sm: calcDividingValues(MD, MULTIPLIER_FACTOR2, 1),
242
+ md: `${MD}${SIZE_TYPE3}`,
243
+ lg: calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 1),
244
+ xl: calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 2),
245
+ "2xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 3),
246
+ "3xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 4),
247
+ "4xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 5),
248
+ "5xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 6),
249
+ "6xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 7),
250
+ "7xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR2, 8)
245
251
  };
246
252
 
247
253
  // src/themes/Bruttal/BruttalTheme.ts
@@ -335,12 +341,13 @@ var BruttalTheme = {
335
341
  underemphasize: coreColors.gray300
336
342
  },
337
343
  fonts: {
338
- h1: coreFonts.contrast,
339
- h2: coreFonts.contrast,
340
- h3: coreFonts.contrast,
341
- h4: coreFonts.contrast,
342
- h5: coreFonts.contrast,
343
- h6: coreFonts.contrast,
344
+ // h1: coreFonts.contrast,
345
+ // h2: coreFonts.contrast,
346
+ // h3: coreFonts.contrast,
347
+ // h4: coreFonts.contrast,
348
+ // h5: coreFonts.contrast,
349
+ // h6: coreFonts.contrast,
350
+ contrast: coreFonts.contrast,
344
351
  body: coreFonts.main,
345
352
  highlight: coreFonts.main,
346
353
  caption: coreFonts.main
@@ -390,6 +397,7 @@ var BruttalTheme = {
390
397
  a: {
391
398
  color: "text",
392
399
  fontFamily: "body",
400
+ textDecorationLine: "underline",
393
401
  "&.quiet:not(:hover)": {
394
402
  textDecorationLine: "none"
395
403
  },
@@ -566,19 +574,22 @@ var BruttalTheme = {
566
574
  forms: {
567
575
  label: {
568
576
  color: "text",
569
- fontFamily: "body",
577
+ fontFamily: "caption",
570
578
  alignItems: "center",
571
- fontSize: "base",
579
+ fontSize: "sm",
572
580
  '&:is([aria-disabled="true"])': {
573
581
  color: "onMuted"
574
582
  },
575
583
  '& > span[aria-label="tooltip"]': {
576
- fontSize: "xs",
584
+ fontSize: "sm",
577
585
  marginLeft: "2xs"
578
586
  },
579
587
  '&:has(input[type="checkbox"]:disabled)': {
580
588
  color: "onMuted"
581
589
  },
590
+ "&:has(+div>:is(input, select, textarea))": {
591
+ marginBottom: "md"
592
+ },
582
593
  '&:has(div > input[type="radio"])': {
583
594
  alignItems: "center"
584
595
  },
@@ -777,34 +788,39 @@ var BruttalTheme = {
777
788
  }
778
789
  },
779
790
  h1: {
780
- fontFamily: "heading",
781
- fontSize: "6xl",
782
- fontWeight: "bold",
783
- letterSpacing: "normal"
791
+ fontFamily: "contrast",
792
+ fontWeight: "extraBold",
793
+ lineHeight: "base",
794
+ fontSize: "3xl",
795
+ letterSpacing: "regular"
784
796
  },
785
797
  h2: {
786
- fontFamily: "heading",
787
- fontSize: "5xl",
798
+ fontFamily: "contrast",
788
799
  fontWeight: "bold",
789
- letterSpacing: "normal"
800
+ lineHeight: "base",
801
+ fontSize: "2xl",
802
+ letterSpacing: "regular"
790
803
  },
791
804
  h3: {
792
- fontFamily: "heading",
793
- fontSize: "4xl",
805
+ fontFamily: "contrast",
794
806
  fontWeight: "bold",
795
- letterSpacing: "normal"
807
+ lineHeight: "base",
808
+ fontSize: "xl",
809
+ letterSpacing: "regular"
796
810
  },
797
811
  h4: {
798
- fontFamily: "heading",
799
- fontSize: "2xl",
800
- fontWeight: "bold",
801
- letterSpacing: "normal"
812
+ fontFamily: "contrast",
813
+ fontWeight: "semiBold",
814
+ lineHeight: "base",
815
+ fontSize: "lg",
816
+ letterSpacing: "regular"
802
817
  },
803
818
  h5: {
804
- fontFamily: "heading",
805
- fontSize: "xl",
806
- fontWeight: "bold",
807
- letterSpacing: "normal"
819
+ fontFamily: "contrast",
820
+ fontWeight: "semiBold",
821
+ lineHeight: "base",
822
+ fontSize: "base",
823
+ letterSpacing: "regular"
808
824
  }
809
825
  }
810
826
  };