refactor type styles

chromaui · Sep 27, 2024 · cef95da · cef95da
1 parent 61012f4
commit cef95da
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 41 deletions.
diff --git a/package.json b/package.json
@@ -48,8 +48,8 @@
     "node": ">=14.0.0"
   },
   "devDependencies": {
-    "@emotion/react": "11.13.3",
-    "@emotion/styled": "11.13.0",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
     "@storybook/addon-a11y": "^8.3.3",
     "@storybook/addon-essentials": "^8.3.3",
     "@storybook/addon-interactions": "^8.3.3",
@@ -84,8 +84,8 @@
     "vite": "4.2.1"
   },
   "peerDependencies": {
-    "@emotion/react": "11.13.3",
-    "@emotion/styled": "11.13.0",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
     "framer-motion": "^11.0.3",
     "react": ">=17",
     "react-dom": ">=17"

diff --git a/src/_helpers/typography.ts b/src/_helpers/typography.ts
@@ -25,7 +25,7 @@ type TProps = {
   };
 };
 
-export const t: TProps = {
+const typeStyles: TProps = {
   heading56: {
     fontFamily: 'sans',
     fontSize: 56,
@@ -107,66 +107,66 @@ export const t: TProps = {
 };
 
 const heading56 = css`
-  font-family: ${fontFamily[t.heading56.fontFamily]};
-  font-size: ${fontSize[t.heading56.fontSize]};
-  line-height: ${lineHeight[t.heading56.lineHeight]};
-  font-weight: ${fontWeight[t.heading56.fontWeight]};
+  font-family: ${fontFamily[typeStyles.heading56.fontFamily]};
+  font-size: ${fontSize[typeStyles.heading56.fontSize]};
+  line-height: ${lineHeight[typeStyles.heading56.lineHeight]};
+  font-weight: ${fontWeight[typeStyles.heading56.fontWeight]};
 `;
 
 const heading48 = css`
-  font-family: ${fontFamily[t.heading48.fontFamily]};
-  font-size: ${fontSize[t.heading48.fontSize]};
-  line-height: ${lineHeight[t.heading48.lineHeight]};
-  font-weight: ${fontWeight[t.heading48.fontWeight]};
+  font-family: ${fontFamily[typeStyles.heading48.fontFamily]};
+  font-size: ${fontSize[typeStyles.heading48.fontSize]};
+  line-height: ${lineHeight[typeStyles.heading48.lineHeight]};
+  font-weight: ${fontWeight[typeStyles.heading48.fontWeight]};
 `;
 
 const heading40 = css`
-  font-family: ${fontFamily[t.heading40.fontFamily]};
-  font-size: ${fontSize[t.heading40.fontSize]};
-  line-height: ${lineHeight[t.heading40.lineHeight]};
-  font-weight: ${fontWeight[t.heading40.fontWeight]};
+  font-family: ${fontFamily[typeStyles.heading40.fontFamily]};
+  font-size: ${fontSize[typeStyles.heading40.fontSize]};
+  line-height: ${lineHeight[typeStyles.heading40.lineHeight]};
+  font-weight: ${fontWeight[typeStyles.heading40.fontWeight]};
 `;
 
 const heading36 = css`
-  font-family: ${fontFamily[t.heading36.fontFamily]};
-  font-size: ${fontSize[t.heading36.fontSize]};
-  line-height: ${lineHeight[t.heading36.lineHeight]};
-  font-weight: ${fontWeight[t.heading36.fontWeight]};
+  font-family: ${fontFamily[typeStyles.heading36.fontFamily]};
+  font-size: ${fontSize[typeStyles.heading36.fontSize]};
+  line-height: ${lineHeight[typeStyles.heading36.lineHeight]};
+  font-weight: ${fontWeight[typeStyles.heading36.fontWeight]};
 `;
 
 const heading30 = css`
-  font-family: ${fontFamily[t.heading30.fontFamily]};
-  font-size: ${fontSize[t.heading30.fontSize]};
-  line-height: ${lineHeight[t.heading30.lineHeight]};
-  font-weight: ${fontWeight[t.heading30.fontWeight]};
+  font-family: ${fontFamily[typeStyles.heading30.fontFamily]};
+  font-size: ${fontSize[typeStyles.heading30.fontSize]};
+  line-height: ${lineHeight[typeStyles.heading30.lineHeight]};
+  font-weight: ${fontWeight[typeStyles.heading30.fontWeight]};
 `;
 
 const heading24 = css`
-  font-family: ${fontFamily[t.heading24.fontFamily]};
-  font-size: ${fontSize[t.heading24.fontSize]};
-  line-height: ${lineHeight[t.heading24.lineHeight]};
-  font-weight: ${fontWeight[t.heading24.fontWeight]};
+  font-family: ${fontFamily[typeStyles.heading24.fontFamily]};
+  font-size: ${fontSize[typeStyles.heading24.fontSize]};
+  line-height: ${lineHeight[typeStyles.heading24.lineHeight]};
+  font-weight: ${fontWeight[typeStyles.heading24.fontWeight]};
 `;
 
 const heading20 = css`
-  font-family: ${fontFamily[t.heading20.fontFamily]};
-  font-size: ${fontSize[t.heading20.fontSize]};
-  line-height: ${lineHeight[t.heading20.lineHeight]};
-  font-weight: ${fontWeight[t.heading20.fontWeight]};
+  font-family: ${fontFamily[typeStyles.heading20.fontFamily]};
+  font-size: ${fontSize[typeStyles.heading20.fontSize]};
+  line-height: ${lineHeight[typeStyles.heading20.lineHeight]};
+  font-weight: ${fontWeight[typeStyles.heading20.fontWeight]};
 `;
 
 const heading18 = css`
-  font-family: ${fontFamily[t.heading18.fontFamily]};
-  font-size: ${fontSize[t.heading18.fontSize]};
-  line-height: ${lineHeight[t.heading18.lineHeight]};
-  font-weight: ${fontWeight[t.heading18.fontWeight]};
+  font-family: ${fontFamily[typeStyles.heading18.fontFamily]};
+  font-size: ${fontSize[typeStyles.heading18.fontSize]};
+  line-height: ${lineHeight[typeStyles.heading18.lineHeight]};
+  font-weight: ${fontWeight[typeStyles.heading18.fontWeight]};
 `;
 
 const heading16 = css`
-  font-family: ${fontFamily[t.heading16.fontFamily]};
-  font-size: ${fontSize[t.heading16.fontSize]};
-  line-height: ${lineHeight[t.heading16.lineHeight]};
-  font-weight: ${fontWeight[t.heading16.fontWeight]};
+  font-family: ${fontFamily[typeStyles.heading16.fontFamily]};
+  font-size: ${fontSize[typeStyles.heading16.fontSize]};
+  line-height: ${lineHeight[typeStyles.heading16.lineHeight]};
+  font-weight: ${fontWeight[typeStyles.heading16.fontWeight]};
 `;
 
 const body20 = css`
@@ -231,3 +231,5 @@ export const typography = {
   subheading,
   subheadingLarge,
 };
+
+export const t: TProps = typeStyles;