@ttoss/theme 1.4.30 → 1.4.31

package/src/themes/Bruttal/BruttalTheme.ts

@@ -100,12 +100,13 @@ export const BruttalTheme: Theme = {
     underemphasize: coreColors.gray300,
   },
   fonts: {
-    h1: coreFonts.contrast,
-    h2: coreFonts.contrast,
-    h3: coreFonts.contrast,
-    h4: coreFonts.contrast,
-    h5: coreFonts.contrast,
-    h6: coreFonts.contrast,
+    // h1: coreFonts.contrast,
+    // h2: coreFonts.contrast,
+    // h3: coreFonts.contrast,
+    // h4: coreFonts.contrast,
+    // h5: coreFonts.contrast,
+    // h6: coreFonts.contrast,
+    contrast: coreFonts.contrast,
     body: coreFonts.main,
     highlight: coreFonts.main,
     caption: coreFonts.main,
@@ -155,6 +156,7 @@ export const BruttalTheme: Theme = {
     a: {
       color: 'text',
       fontFamily: 'body',
+      textDecorationLine: 'underline',
       '&.quiet:not(:hover)': {
         textDecorationLine: 'none',
       },
@@ -543,34 +545,39 @@ export const BruttalTheme: Theme = {
       },
     },
     h1: {
-      fontFamily: 'heading',
-      fontSize: '6xl',
-      fontWeight: 'bold',
-      letterSpacing: 'normal',
+      fontFamily: 'contrast',
+      fontWeight: 'extraBold',
+      lineHeight: 'base',
+      fontSize: '3xl',
+      letterSpacing: 'regular',
     },
     h2: {
-      fontFamily: 'heading',
-      fontSize: '5xl',
+      fontFamily: 'contrast',
       fontWeight: 'bold',
-      letterSpacing: 'normal',
+      lineHeight: 'base',
+      fontSize: '2xl',
+      letterSpacing: 'regular',
     },
     h3: {
-      fontFamily: 'heading',
-      fontSize: '4xl',
+      fontFamily: 'contrast',
       fontWeight: 'bold',
-      letterSpacing: 'normal',
+      lineHeight: 'base',
+      fontSize: 'xl',
+      letterSpacing: 'regular',
     },
     h4: {
-      fontFamily: 'heading',
-      fontSize: '2xl',
-      fontWeight: 'bold',
-      letterSpacing: 'normal',
+      fontFamily: 'contrast',
+      fontWeight: 'semiBold',
+      lineHeight: 'base',
+      fontSize: 'lg',
+      letterSpacing: 'regular',
     },
     h5: {
-      fontFamily: 'heading',
-      fontSize: 'xl',
-      fontWeight: 'bold',
-      letterSpacing: 'normal',
+      fontFamily: 'contrast',
+      fontWeight: 'semiBold',
+      lineHeight: 'base',
+      fontSize: 'base',
+      letterSpacing: 'regular',
     },
   },
 };

package/src/tokens/fontSizes.ts

@@ -1,17 +1,21 @@
-const BASE = '1rem';
+import { calcMultiplyingValues } from '../helpers/geometricCalc';
+
+const SIZE_TYPE = 'rem';
+
+const BASE = 1;
 
 const MULTIPLIER_FACTOR = 1.333;
 
 export const fontSizes = {
-  '2xs': `calc(${BASE} * (${Math.pow(MULTIPLIER_FACTOR, -3)})`,
-  xs: `calc(${BASE} * ${Math.pow(MULTIPLIER_FACTOR, -2)})`,
-  sm: `calc(${BASE} * ${Math.pow(MULTIPLIER_FACTOR, -1)})`,
-  base: BASE,
-  lg: `calc(${BASE} * (${MULTIPLIER_FACTOR}^1))`,
-  xl: `calc(${BASE} * (${MULTIPLIER_FACTOR}^2))`,
-  '2xl': `calc(${BASE} * (${MULTIPLIER_FACTOR}^3))`,
-  '3xl': `calc(${BASE} * (${MULTIPLIER_FACTOR}^4))`,
-  '4xl': `calc(${BASE} * (${MULTIPLIER_FACTOR}^5))`,
-  '5xl': `calc(${BASE} * (${MULTIPLIER_FACTOR}^6))`,
-  '6xl': `calc(${BASE} * (${MULTIPLIER_FACTOR}^7))`,
+  '2xs': calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -3),
+  xs: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -2),
+  sm: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -1),
+  base: `${BASE}${SIZE_TYPE}`,
+  lg: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 1),
+  xl: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 2),
+  '2xl': calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 3),
+  '3xl': calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 4),
+  '4xl': calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 5),
+  '5xl': calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 6),
+  '6xl': calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 7),
 };

package/src/tokens/letterSpacings.ts

@@ -1,8 +1,8 @@
 export const letterSpacings = {
   tighter: '-0.05em',
   tight: '-0.025em',
-  normal: '0em',
-  wide: '0.025em',
-  wider: '0.05em',
-  widest: '0.1em',
+  regular: '0em',
+  wide: '0.05em',
+  wider: '0.1em',
+  widest: '0.5em',
 };

package/src/tokens/space.ts

@@ -1,27 +1,26 @@
-const MD = '0.5rem';
+import {
+  calcDividingValues,
+  calcMultiplyingValues,
+} from '../helpers/geometricCalc';
 
-const MULTIPLIER_FACTOR = 1.618;
+const SIZE_TYPE = 'rem';
 
-const multiValues = (length: number) => {
-  return Array.from({ length })
-    .map(() => {
-      return MULTIPLIER_FACTOR;
-    })
-    .join(' * ');
-};
+const MD = 0.5;
+
+const MULTIPLIER_FACTOR = 1.618;
 
 export const space = {
   none: 0,
-  '2xs': `calc(${MD} / (${multiValues(3)}))`,
-  xs: `calc(${MD} / (${multiValues(2)}))`,
-  sm: `calc(${MD} / (${MULTIPLIER_FACTOR}))`,
-  md: MD,
-  lg: `calc(${MD} * ${MULTIPLIER_FACTOR})`,
-  xl: `calc(${MD} * ${multiValues(2)})`,
-  '2xl': `calc(${MD} * ${multiValues(3)})`,
-  '3xl': `calc(${MD} * ${multiValues(4)})`,
-  '4xl': `calc(${MD} * ${multiValues(5)})`,
-  '5xl': `calc(${MD} * ${multiValues(6)})`,
-  '6xl': `calc(${MD} * ${multiValues(7)})`,
-  '7xl': `calc(${MD} * ${multiValues(8)})`,
+  '2xs': calcDividingValues(MD, MULTIPLIER_FACTOR, 3),
+  xs: calcDividingValues(MD, MULTIPLIER_FACTOR, 2),
+  sm: calcDividingValues(MD, MULTIPLIER_FACTOR, 1),
+  md: `${MD}${SIZE_TYPE}`,
+  lg: calcMultiplyingValues(MD, MULTIPLIER_FACTOR, 1),
+  xl: calcMultiplyingValues(MD, MULTIPLIER_FACTOR, 2),
+  '2xl': calcMultiplyingValues(MD, MULTIPLIER_FACTOR, 3),
+  '3xl': calcMultiplyingValues(MD, MULTIPLIER_FACTOR, 4),
+  '4xl': calcMultiplyingValues(MD, MULTIPLIER_FACTOR, 5),
+  '5xl': calcMultiplyingValues(MD, MULTIPLIER_FACTOR, 6),
+  '6xl': calcMultiplyingValues(MD, MULTIPLIER_FACTOR, 7),
+  '7xl': calcMultiplyingValues(MD, MULTIPLIER_FACTOR, 8),
 };