@ttoss/theme 1.4.29 → 1.4.31

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-7HGXJKZ3.js} +73 -60
  3. package/dist/esm/index.js +1 -1
  4. package/dist/esm/themes/Bruttal/Bruttal.js +1 -1
  5. package/dist/index.js +73 -60
  6. package/dist/themes/Bruttal/Bruttal.js +73 -60
  7. package/package.json +9 -10
  8. package/src/helpers/geometricCalc.ts +23 -0
  9. package/src/themes/Bruttal/BruttalTheme.ts +31 -24
  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-7HGXJKZ3.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
  },
@@ -758,34 +766,39 @@ var BruttalTheme = {
758
766
  }
759
767
  },
760
768
  h1: {
761
- fontFamily: "heading",
762
- fontSize: "6xl",
763
- fontWeight: "bold",
764
- letterSpacing: "normal"
769
+ fontFamily: "contrast",
770
+ fontWeight: "extraBold",
771
+ lineHeight: "base",
772
+ fontSize: "3xl",
773
+ letterSpacing: "regular"
765
774
  },
766
775
  h2: {
767
- fontFamily: "heading",
768
- fontSize: "5xl",
776
+ fontFamily: "contrast",
769
777
  fontWeight: "bold",
770
- letterSpacing: "normal"
778
+ lineHeight: "base",
779
+ fontSize: "2xl",
780
+ letterSpacing: "regular"
771
781
  },
772
782
  h3: {
773
- fontFamily: "heading",
774
- fontSize: "4xl",
783
+ fontFamily: "contrast",
775
784
  fontWeight: "bold",
776
- letterSpacing: "normal"
785
+ lineHeight: "base",
786
+ fontSize: "xl",
787
+ letterSpacing: "regular"
777
788
  },
778
789
  h4: {
779
- fontFamily: "heading",
780
- fontSize: "2xl",
781
- fontWeight: "bold",
782
- letterSpacing: "normal"
790
+ fontFamily: "contrast",
791
+ fontWeight: "semiBold",
792
+ lineHeight: "base",
793
+ fontSize: "lg",
794
+ letterSpacing: "regular"
783
795
  },
784
796
  h5: {
785
- fontFamily: "heading",
786
- fontSize: "xl",
787
- fontWeight: "bold",
788
- letterSpacing: "normal"
797
+ fontFamily: "contrast",
798
+ fontWeight: "semiBold",
799
+ lineHeight: "base",
800
+ fontSize: "base",
801
+ letterSpacing: "regular"
789
802
  }
790
803
  }
791
804
  };
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-7HGXJKZ3.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-7HGXJKZ3.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
  },
@@ -773,34 +781,39 @@ var BruttalTheme = {
773
781
  }
774
782
  },
775
783
  h1: {
776
- fontFamily: "heading",
777
- fontSize: "6xl",
778
- fontWeight: "bold",
779
- letterSpacing: "normal"
784
+ fontFamily: "contrast",
785
+ fontWeight: "extraBold",
786
+ lineHeight: "base",
787
+ fontSize: "3xl",
788
+ letterSpacing: "regular"
780
789
  },
781
790
  h2: {
782
- fontFamily: "heading",
783
- fontSize: "5xl",
791
+ fontFamily: "contrast",
784
792
  fontWeight: "bold",
785
- letterSpacing: "normal"
793
+ lineHeight: "base",
794
+ fontSize: "2xl",
795
+ letterSpacing: "regular"
786
796
  },
787
797
  h3: {
788
- fontFamily: "heading",
789
- fontSize: "4xl",
798
+ fontFamily: "contrast",
790
799
  fontWeight: "bold",
791
- letterSpacing: "normal"
800
+ lineHeight: "base",
801
+ fontSize: "xl",
802
+ letterSpacing: "regular"
792
803
  },
793
804
  h4: {
794
- fontFamily: "heading",
795
- fontSize: "2xl",
796
- fontWeight: "bold",
797
- letterSpacing: "normal"
805
+ fontFamily: "contrast",
806
+ fontWeight: "semiBold",
807
+ lineHeight: "base",
808
+ fontSize: "lg",
809
+ letterSpacing: "regular"
798
810
  },
799
811
  h5: {
800
- fontFamily: "heading",
801
- fontSize: "xl",
802
- fontWeight: "bold",
803
- letterSpacing: "normal"
812
+ fontFamily: "contrast",
813
+ fontWeight: "semiBold",
814
+ lineHeight: "base",
815
+ fontSize: "base",
816
+ letterSpacing: "regular"
804
817
  }
805
818
  }
806
819
  };
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
  },
@@ -777,34 +785,39 @@ var BruttalTheme = {
777
785
  }
778
786
  },
779
787
  h1: {
780
- fontFamily: "heading",
781
- fontSize: "6xl",
782
- fontWeight: "bold",
783
- letterSpacing: "normal"
788
+ fontFamily: "contrast",
789
+ fontWeight: "extraBold",
790
+ lineHeight: "base",
791
+ fontSize: "3xl",
792
+ letterSpacing: "regular"
784
793
  },
785
794
  h2: {
786
- fontFamily: "heading",
787
- fontSize: "5xl",
795
+ fontFamily: "contrast",
788
796
  fontWeight: "bold",
789
- letterSpacing: "normal"
797
+ lineHeight: "base",
798
+ fontSize: "2xl",
799
+ letterSpacing: "regular"
790
800
  },
791
801
  h3: {
792
- fontFamily: "heading",
793
- fontSize: "4xl",
802
+ fontFamily: "contrast",
794
803
  fontWeight: "bold",
795
- letterSpacing: "normal"
804
+ lineHeight: "base",
805
+ fontSize: "xl",
806
+ letterSpacing: "regular"
796
807
  },
797
808
  h4: {
798
- fontFamily: "heading",
799
- fontSize: "2xl",
800
- fontWeight: "bold",
801
- letterSpacing: "normal"
809
+ fontFamily: "contrast",
810
+ fontWeight: "semiBold",
811
+ lineHeight: "base",
812
+ fontSize: "lg",
813
+ letterSpacing: "regular"
802
814
  },
803
815
  h5: {
804
- fontFamily: "heading",
805
- fontSize: "xl",
806
- fontWeight: "bold",
807
- letterSpacing: "normal"
816
+ fontFamily: "contrast",
817
+ fontWeight: "semiBold",
818
+ lineHeight: "base",
819
+ fontSize: "base",
820
+ letterSpacing: "regular"
808
821
  }
809
822
  }
810
823
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/theme",
3
- "version": "1.4.29",
3
+ "version": "1.4.31",
4
4
  "description": "Theme for packages.",
5
5
  "license": "UNLICENSED",
6
6
  "author": "ttoss",
@@ -24,10 +24,6 @@
24
24
  "src",
25
25
  "tsconfig.json"
26
26
  ],
27
- "scripts": {
28
- "build": "tsup",
29
- "test": "jest"
30
- },
31
27
  "sideEffects": true,
32
28
  "typings": "dist/index.d.ts",
33
29
  "dependencies": {
@@ -39,11 +35,11 @@
39
35
  "@iconify/icons-eos-icons": "^1.2.6",
40
36
  "@iconify/icons-mdi": "^1.2.44",
41
37
  "@iconify/types": "^2.0.0",
42
- "@ttoss/config": "^1.30.0",
43
- "@ttoss/test-utils": "^1.22.0",
44
38
  "jest": "^29.5.0",
45
39
  "theme-ui": "^0.15.7",
46
- "tsup": "^6.7.0"
40
+ "tsup": "^6.7.0",
41
+ "@ttoss/config": "^1.30.0",
42
+ "@ttoss/test-utils": "^1.23.0"
47
43
  },
48
44
  "keywords": [],
49
45
  "publishConfig": {
@@ -59,5 +55,8 @@
59
55
  ]
60
56
  }
61
57
  },
62
- "gitHead": "b14482e626119da6b065b28523b6668dbbcef585"
63
- }
58
+ "scripts": {
59
+ "build": "tsup",
60
+ "test": "jest"
61
+ }
62
+ }
package/src/helpers/geometricCalc.ts ADDED
@@ -0,0 +1,23 @@
1
+ const SIZE_TYPE = 'rem';
2
+
3
+ export const calcMultiplyingValues = (
4
+ initialValue: number,
5
+ base: number,
6
+ ratio: number,
7
+ sizeType = SIZE_TYPE
8
+ ) => {
9
+ const result = initialValue * Math.pow(base, ratio);
10
+
11
+ return `${result.toFixed(2)}${sizeType}`;
12
+ };
13
+
14
+ export const calcDividingValues = (
15
+ initialValue: number,
16
+ base: number,
17
+ ratio: number,
18
+ sizeType = SIZE_TYPE
19
+ ) => {
20
+ const result = initialValue / Math.pow(base, ratio);
21
+
22
+ return `${result.toFixed(2)}${sizeType}`;
23
+ };