@ttoss/theme 1.6.1 → 1.6.2
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-U3KPB4BR.js → chunk-VJD5ERJC.js} +40 -27
- package/dist/esm/index.js +1 -1
- package/dist/esm/themes/Bruttal/Bruttal.js +1 -1
- package/dist/index.js +40 -27
- package/dist/themes/Bruttal/Bruttal.js +40 -27
- package/package.json +1 -1
- package/src/themes/Bruttal/BruttalTheme.ts +15 -6
- package/src/tokens/lineHeights.ts +19 -7
|
@@ -232,34 +232,38 @@ var letterSpacings = {
|
|
|
232
232
|
};
|
|
233
233
|
|
|
234
234
|
// src/tokens/lineHeights.ts
|
|
235
|
+
var BASE2 = 100;
|
|
236
|
+
var MULTIPLIER_FACTOR2 = 1.333;
|
|
237
|
+
var SIZE_TYPE3 = "%";
|
|
235
238
|
var lineHeights = {
|
|
236
|
-
"2xs":
|
|
237
|
-
xs:
|
|
238
|
-
sm:
|
|
239
|
-
base: "
|
|
240
|
-
lg:
|
|
241
|
-
xl:
|
|
242
|
-
"2xl":
|
|
239
|
+
"2xs": calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, -3, SIZE_TYPE3),
|
|
240
|
+
xs: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, -2, SIZE_TYPE3),
|
|
241
|
+
sm: calcDividingValues(BASE2, MULTIPLIER_FACTOR2, 1, SIZE_TYPE3),
|
|
242
|
+
base: "normal",
|
|
243
|
+
lg: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 1, SIZE_TYPE3),
|
|
244
|
+
xl: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 2, SIZE_TYPE3),
|
|
245
|
+
"2xl": calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 3, SIZE_TYPE3),
|
|
246
|
+
flat: "100%"
|
|
243
247
|
};
|
|
244
248
|
|
|
245
249
|
// src/tokens/space.ts
|
|
246
|
-
var
|
|
250
|
+
var SIZE_TYPE4 = "rem";
|
|
247
251
|
var MD = 0.5;
|
|
248
|
-
var
|
|
252
|
+
var MULTIPLIER_FACTOR3 = 1.618;
|
|
249
253
|
var space = {
|
|
250
254
|
none: 0,
|
|
251
|
-
"2xs": calcDividingValues(MD,
|
|
252
|
-
xs: calcDividingValues(MD,
|
|
253
|
-
sm: calcDividingValues(MD,
|
|
254
|
-
md: `${MD}${
|
|
255
|
-
lg: calcMultiplyingValues(MD,
|
|
256
|
-
xl: calcMultiplyingValues(MD,
|
|
257
|
-
"2xl": calcMultiplyingValues(MD,
|
|
258
|
-
"3xl": calcMultiplyingValues(MD,
|
|
259
|
-
"4xl": calcMultiplyingValues(MD,
|
|
260
|
-
"5xl": calcMultiplyingValues(MD,
|
|
261
|
-
"6xl": calcMultiplyingValues(MD,
|
|
262
|
-
"7xl": calcMultiplyingValues(MD,
|
|
255
|
+
"2xs": calcDividingValues(MD, MULTIPLIER_FACTOR3, 3),
|
|
256
|
+
xs: calcDividingValues(MD, MULTIPLIER_FACTOR3, 2),
|
|
257
|
+
sm: calcDividingValues(MD, MULTIPLIER_FACTOR3, 1),
|
|
258
|
+
md: `${MD}${SIZE_TYPE4}`,
|
|
259
|
+
lg: calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 1),
|
|
260
|
+
xl: calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 2),
|
|
261
|
+
"2xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 3),
|
|
262
|
+
"3xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 4),
|
|
263
|
+
"4xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 5),
|
|
264
|
+
"5xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 6),
|
|
265
|
+
"6xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 7),
|
|
266
|
+
"7xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 8)
|
|
263
267
|
};
|
|
264
268
|
|
|
265
269
|
// src/tokens/zIndices.ts
|
|
@@ -447,12 +451,7 @@ var BruttalTheme = {
|
|
|
447
451
|
underemphasize: coreColors.gray300
|
|
448
452
|
},
|
|
449
453
|
fonts: {
|
|
450
|
-
|
|
451
|
-
// h2: coreFonts.contrast,
|
|
452
|
-
// h3: coreFonts.contrast,
|
|
453
|
-
// h4: coreFonts.contrast,
|
|
454
|
-
// h5: coreFonts.contrast,
|
|
455
|
-
// h6: coreFonts.contrast,
|
|
454
|
+
main: coreColors.main,
|
|
456
455
|
contrast: coreFonts.contrast,
|
|
457
456
|
body: coreFonts.main,
|
|
458
457
|
highlight: coreFonts.main,
|
|
@@ -866,6 +865,20 @@ var BruttalTheme = {
|
|
|
866
865
|
}
|
|
867
866
|
}
|
|
868
867
|
},
|
|
868
|
+
headline: {
|
|
869
|
+
fontFamily: "contrast",
|
|
870
|
+
fontWeight: "bold",
|
|
871
|
+
lineHeight: "flat",
|
|
872
|
+
fontSize: "5xl",
|
|
873
|
+
letterSpacing: "regular"
|
|
874
|
+
},
|
|
875
|
+
subheadline: {
|
|
876
|
+
fontFamily: "main",
|
|
877
|
+
fontWeight: "bold",
|
|
878
|
+
lineHeight: "base",
|
|
879
|
+
fontSize: "xl",
|
|
880
|
+
letterSpacing: "regular"
|
|
881
|
+
},
|
|
869
882
|
h1: {
|
|
870
883
|
fontFamily: "contrast",
|
|
871
884
|
fontWeight: "extraBold",
|
package/dist/esm/index.js
CHANGED
package/dist/index.js
CHANGED
|
@@ -247,34 +247,38 @@ var letterSpacings = {
|
|
|
247
247
|
};
|
|
248
248
|
|
|
249
249
|
// src/tokens/lineHeights.ts
|
|
250
|
+
var BASE2 = 100;
|
|
251
|
+
var MULTIPLIER_FACTOR2 = 1.333;
|
|
252
|
+
var SIZE_TYPE3 = "%";
|
|
250
253
|
var lineHeights = {
|
|
251
|
-
"2xs":
|
|
252
|
-
xs:
|
|
253
|
-
sm:
|
|
254
|
-
base: "
|
|
255
|
-
lg:
|
|
256
|
-
xl:
|
|
257
|
-
"2xl":
|
|
254
|
+
"2xs": calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, -3, SIZE_TYPE3),
|
|
255
|
+
xs: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, -2, SIZE_TYPE3),
|
|
256
|
+
sm: calcDividingValues(BASE2, MULTIPLIER_FACTOR2, 1, SIZE_TYPE3),
|
|
257
|
+
base: "normal",
|
|
258
|
+
lg: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 1, SIZE_TYPE3),
|
|
259
|
+
xl: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 2, SIZE_TYPE3),
|
|
260
|
+
"2xl": calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 3, SIZE_TYPE3),
|
|
261
|
+
flat: "100%"
|
|
258
262
|
};
|
|
259
263
|
|
|
260
264
|
// src/tokens/space.ts
|
|
261
|
-
var
|
|
265
|
+
var SIZE_TYPE4 = "rem";
|
|
262
266
|
var MD = 0.5;
|
|
263
|
-
var
|
|
267
|
+
var MULTIPLIER_FACTOR3 = 1.618;
|
|
264
268
|
var space = {
|
|
265
269
|
none: 0,
|
|
266
|
-
"2xs": calcDividingValues(MD,
|
|
267
|
-
xs: calcDividingValues(MD,
|
|
268
|
-
sm: calcDividingValues(MD,
|
|
269
|
-
md: `${MD}${
|
|
270
|
-
lg: calcMultiplyingValues(MD,
|
|
271
|
-
xl: calcMultiplyingValues(MD,
|
|
272
|
-
"2xl": calcMultiplyingValues(MD,
|
|
273
|
-
"3xl": calcMultiplyingValues(MD,
|
|
274
|
-
"4xl": calcMultiplyingValues(MD,
|
|
275
|
-
"5xl": calcMultiplyingValues(MD,
|
|
276
|
-
"6xl": calcMultiplyingValues(MD,
|
|
277
|
-
"7xl": calcMultiplyingValues(MD,
|
|
270
|
+
"2xs": calcDividingValues(MD, MULTIPLIER_FACTOR3, 3),
|
|
271
|
+
xs: calcDividingValues(MD, MULTIPLIER_FACTOR3, 2),
|
|
272
|
+
sm: calcDividingValues(MD, MULTIPLIER_FACTOR3, 1),
|
|
273
|
+
md: `${MD}${SIZE_TYPE4}`,
|
|
274
|
+
lg: calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 1),
|
|
275
|
+
xl: calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 2),
|
|
276
|
+
"2xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 3),
|
|
277
|
+
"3xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 4),
|
|
278
|
+
"4xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 5),
|
|
279
|
+
"5xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 6),
|
|
280
|
+
"6xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 7),
|
|
281
|
+
"7xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 8)
|
|
278
282
|
};
|
|
279
283
|
|
|
280
284
|
// src/tokens/zIndices.ts
|
|
@@ -462,12 +466,7 @@ var BruttalTheme = {
|
|
|
462
466
|
underemphasize: coreColors.gray300
|
|
463
467
|
},
|
|
464
468
|
fonts: {
|
|
465
|
-
|
|
466
|
-
// h2: coreFonts.contrast,
|
|
467
|
-
// h3: coreFonts.contrast,
|
|
468
|
-
// h4: coreFonts.contrast,
|
|
469
|
-
// h5: coreFonts.contrast,
|
|
470
|
-
// h6: coreFonts.contrast,
|
|
469
|
+
main: coreColors.main,
|
|
471
470
|
contrast: coreFonts.contrast,
|
|
472
471
|
body: coreFonts.main,
|
|
473
472
|
highlight: coreFonts.main,
|
|
@@ -881,6 +880,20 @@ var BruttalTheme = {
|
|
|
881
880
|
}
|
|
882
881
|
}
|
|
883
882
|
},
|
|
883
|
+
headline: {
|
|
884
|
+
fontFamily: "contrast",
|
|
885
|
+
fontWeight: "bold",
|
|
886
|
+
lineHeight: "flat",
|
|
887
|
+
fontSize: "5xl",
|
|
888
|
+
letterSpacing: "regular"
|
|
889
|
+
},
|
|
890
|
+
subheadline: {
|
|
891
|
+
fontFamily: "main",
|
|
892
|
+
fontWeight: "bold",
|
|
893
|
+
lineHeight: "base",
|
|
894
|
+
fontSize: "xl",
|
|
895
|
+
letterSpacing: "regular"
|
|
896
|
+
},
|
|
884
897
|
h1: {
|
|
885
898
|
fontFamily: "contrast",
|
|
886
899
|
fontWeight: "extraBold",
|
|
@@ -251,34 +251,38 @@ var letterSpacings = {
|
|
|
251
251
|
};
|
|
252
252
|
|
|
253
253
|
// src/tokens/lineHeights.ts
|
|
254
|
+
var BASE2 = 100;
|
|
255
|
+
var MULTIPLIER_FACTOR2 = 1.333;
|
|
256
|
+
var SIZE_TYPE3 = "%";
|
|
254
257
|
var lineHeights = {
|
|
255
|
-
"2xs":
|
|
256
|
-
xs:
|
|
257
|
-
sm:
|
|
258
|
-
base: "
|
|
259
|
-
lg:
|
|
260
|
-
xl:
|
|
261
|
-
"2xl":
|
|
258
|
+
"2xs": calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, -3, SIZE_TYPE3),
|
|
259
|
+
xs: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, -2, SIZE_TYPE3),
|
|
260
|
+
sm: calcDividingValues(BASE2, MULTIPLIER_FACTOR2, 1, SIZE_TYPE3),
|
|
261
|
+
base: "normal",
|
|
262
|
+
lg: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 1, SIZE_TYPE3),
|
|
263
|
+
xl: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 2, SIZE_TYPE3),
|
|
264
|
+
"2xl": calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 3, SIZE_TYPE3),
|
|
265
|
+
flat: "100%"
|
|
262
266
|
};
|
|
263
267
|
|
|
264
268
|
// src/tokens/space.ts
|
|
265
|
-
var
|
|
269
|
+
var SIZE_TYPE4 = "rem";
|
|
266
270
|
var MD = 0.5;
|
|
267
|
-
var
|
|
271
|
+
var MULTIPLIER_FACTOR3 = 1.618;
|
|
268
272
|
var space = {
|
|
269
273
|
none: 0,
|
|
270
|
-
"2xs": calcDividingValues(MD,
|
|
271
|
-
xs: calcDividingValues(MD,
|
|
272
|
-
sm: calcDividingValues(MD,
|
|
273
|
-
md: `${MD}${
|
|
274
|
-
lg: calcMultiplyingValues(MD,
|
|
275
|
-
xl: calcMultiplyingValues(MD,
|
|
276
|
-
"2xl": calcMultiplyingValues(MD,
|
|
277
|
-
"3xl": calcMultiplyingValues(MD,
|
|
278
|
-
"4xl": calcMultiplyingValues(MD,
|
|
279
|
-
"5xl": calcMultiplyingValues(MD,
|
|
280
|
-
"6xl": calcMultiplyingValues(MD,
|
|
281
|
-
"7xl": calcMultiplyingValues(MD,
|
|
274
|
+
"2xs": calcDividingValues(MD, MULTIPLIER_FACTOR3, 3),
|
|
275
|
+
xs: calcDividingValues(MD, MULTIPLIER_FACTOR3, 2),
|
|
276
|
+
sm: calcDividingValues(MD, MULTIPLIER_FACTOR3, 1),
|
|
277
|
+
md: `${MD}${SIZE_TYPE4}`,
|
|
278
|
+
lg: calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 1),
|
|
279
|
+
xl: calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 2),
|
|
280
|
+
"2xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 3),
|
|
281
|
+
"3xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 4),
|
|
282
|
+
"4xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 5),
|
|
283
|
+
"5xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 6),
|
|
284
|
+
"6xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 7),
|
|
285
|
+
"7xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 8)
|
|
282
286
|
};
|
|
283
287
|
|
|
284
288
|
// src/tokens/zIndices.ts
|
|
@@ -466,12 +470,7 @@ var BruttalTheme = {
|
|
|
466
470
|
underemphasize: coreColors.gray300
|
|
467
471
|
},
|
|
468
472
|
fonts: {
|
|
469
|
-
|
|
470
|
-
// h2: coreFonts.contrast,
|
|
471
|
-
// h3: coreFonts.contrast,
|
|
472
|
-
// h4: coreFonts.contrast,
|
|
473
|
-
// h5: coreFonts.contrast,
|
|
474
|
-
// h6: coreFonts.contrast,
|
|
473
|
+
main: coreColors.main,
|
|
475
474
|
contrast: coreFonts.contrast,
|
|
476
475
|
body: coreFonts.main,
|
|
477
476
|
highlight: coreFonts.main,
|
|
@@ -885,6 +884,20 @@ var BruttalTheme = {
|
|
|
885
884
|
}
|
|
886
885
|
}
|
|
887
886
|
},
|
|
887
|
+
headline: {
|
|
888
|
+
fontFamily: "contrast",
|
|
889
|
+
fontWeight: "bold",
|
|
890
|
+
lineHeight: "flat",
|
|
891
|
+
fontSize: "5xl",
|
|
892
|
+
letterSpacing: "regular"
|
|
893
|
+
},
|
|
894
|
+
subheadline: {
|
|
895
|
+
fontFamily: "main",
|
|
896
|
+
fontWeight: "bold",
|
|
897
|
+
lineHeight: "base",
|
|
898
|
+
fontSize: "xl",
|
|
899
|
+
letterSpacing: "regular"
|
|
900
|
+
},
|
|
888
901
|
h1: {
|
|
889
902
|
fontFamily: "contrast",
|
|
890
903
|
fontWeight: "extraBold",
|
package/package.json
CHANGED
|
@@ -102,12 +102,7 @@ export const BruttalTheme: Theme = {
|
|
|
102
102
|
underemphasize: coreColors.gray300,
|
|
103
103
|
},
|
|
104
104
|
fonts: {
|
|
105
|
-
|
|
106
|
-
// h2: coreFonts.contrast,
|
|
107
|
-
// h3: coreFonts.contrast,
|
|
108
|
-
// h4: coreFonts.contrast,
|
|
109
|
-
// h5: coreFonts.contrast,
|
|
110
|
-
// h6: coreFonts.contrast,
|
|
105
|
+
main: coreColors.main,
|
|
111
106
|
contrast: coreFonts.contrast,
|
|
112
107
|
body: coreFonts.main,
|
|
113
108
|
highlight: coreFonts.main,
|
|
@@ -521,6 +516,20 @@ export const BruttalTheme: Theme = {
|
|
|
521
516
|
},
|
|
522
517
|
},
|
|
523
518
|
},
|
|
519
|
+
headline: {
|
|
520
|
+
fontFamily: 'contrast',
|
|
521
|
+
fontWeight: 'bold',
|
|
522
|
+
lineHeight: 'flat',
|
|
523
|
+
fontSize: '5xl',
|
|
524
|
+
letterSpacing: 'regular',
|
|
525
|
+
},
|
|
526
|
+
subheadline: {
|
|
527
|
+
fontFamily: 'main',
|
|
528
|
+
fontWeight: 'bold',
|
|
529
|
+
lineHeight: 'base',
|
|
530
|
+
fontSize: 'xl',
|
|
531
|
+
letterSpacing: 'regular',
|
|
532
|
+
},
|
|
524
533
|
h1: {
|
|
525
534
|
fontFamily: 'contrast',
|
|
526
535
|
fontWeight: 'extraBold',
|
|
@@ -1,9 +1,21 @@
|
|
|
1
|
+
import {
|
|
2
|
+
calcDividingValues,
|
|
3
|
+
calcMultiplyingValues,
|
|
4
|
+
} from '../helpers/geometricCalc';
|
|
5
|
+
|
|
6
|
+
const BASE = 100;
|
|
7
|
+
|
|
8
|
+
const MULTIPLIER_FACTOR = 1.333;
|
|
9
|
+
|
|
10
|
+
const SIZE_TYPE = '%';
|
|
11
|
+
|
|
1
12
|
export const lineHeights = {
|
|
2
|
-
'2xs':
|
|
3
|
-
xs:
|
|
4
|
-
sm:
|
|
5
|
-
base: '
|
|
6
|
-
lg:
|
|
7
|
-
xl:
|
|
8
|
-
'2xl':
|
|
13
|
+
'2xs': calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -3, SIZE_TYPE),
|
|
14
|
+
xs: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -2, SIZE_TYPE),
|
|
15
|
+
sm: calcDividingValues(BASE, MULTIPLIER_FACTOR, 1, SIZE_TYPE),
|
|
16
|
+
base: 'normal',
|
|
17
|
+
lg: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 1, SIZE_TYPE),
|
|
18
|
+
xl: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 2, SIZE_TYPE),
|
|
19
|
+
'2xl': calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 3, SIZE_TYPE),
|
|
20
|
+
flat: '100%',
|
|
9
21
|
};
|