@ttoss/theme 1.4.30 → 1.4.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/theme",
-  "version": "1.4.30",
+  "version": "1.4.32",
   "description": "Theme for packages.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -24,10 +24,6 @@
     "src",
     "tsconfig.json"
   ],
-  "scripts": {
-    "build": "tsup",
-    "test": "jest"
-  },
   "sideEffects": true,
   "typings": "dist/index.d.ts",
   "dependencies": {
@@ -39,11 +35,11 @@
     "@iconify/icons-eos-icons": "^1.2.6",
     "@iconify/icons-mdi": "^1.2.44",
     "@iconify/types": "^2.0.0",
-    "@ttoss/config": "^1.30.0",
-    "@ttoss/test-utils": "^1.23.0",
     "jest": "^29.5.0",
     "theme-ui": "^0.15.7",
-    "tsup": "^6.7.0"
+    "tsup": "^6.7.0",
+    "@ttoss/config": "^1.30.0",
+    "@ttoss/test-utils": "^1.23.0"
   },
   "keywords": [],
   "publishConfig": {
@@ -59,5 +55,8 @@
       ]
     }
   },
-  "gitHead": "2b412ebe0b92fbccb102636f843f84bd7616b43b"
-}
+  "scripts": {
+    "build": "tsup",
+    "test": "jest"
+  }
+}

package/src/helpers/geometricCalc.ts

@@ -0,0 +1,23 @@
+const SIZE_TYPE = 'rem';
+
+export const calcMultiplyingValues = (
+  initialValue: number,
+  base: number,
+  ratio: number,
+  sizeType = SIZE_TYPE
+) => {
+  const result = initialValue * Math.pow(base, ratio);
+
+  return `${result.toFixed(2)}${sizeType}`;
+};
+
+export const calcDividingValues = (
+  initialValue: number,
+  base: number,
+  ratio: number,
+  sizeType = SIZE_TYPE
+) => {
+  const result = initialValue / Math.pow(base, ratio);
+
+  return `${result.toFixed(2)}${sizeType}`;
+};

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',
       },
@@ -331,19 +333,22 @@ export const BruttalTheme: Theme = {
   forms: {
     label: {
       color: 'text',
-      fontFamily: 'body',
+      fontFamily: 'caption',
       alignItems: 'center',
-      fontSize: 'base',
+      fontSize: 'sm',
       '&:is([aria-disabled="true"])': {
         color: 'onMuted',
       },
       '& > span[aria-label="tooltip"]': {
-        fontSize: 'xs',
+        fontSize: 'sm',
         marginLeft: '2xs',
       },
       '&:has(input[type="checkbox"]:disabled)': {
         color: 'onMuted',
       },
+      '&:has(+div>:is(input, select, textarea))': {
+        marginBottom: 'md',
+      },
       '&:has(div > input[type="radio"])': {
         alignItems: 'center',
       },
@@ -543,34 +548,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),
 };