fix typography (#481)

* upgrade storybook * fix letter spacing * add sizes * add changeset
status-im · Sep 25, 2023 · 19384e1 · 19384e1 · vercel · Sep 25, 2023
1 parent a43b5a6
commit 19384e1
Show file tree

Hide file tree

Showing 5 changed files with 2,052 additions and 1,075 deletions.
diff --git a/.changeset/shy-squids-trade.md b/.changeset/shy-squids-trade.md
@@ -0,0 +1,7 @@
+---
+'@status-im/components': minor
+---
+
+- upgrade storybook
+- fix text letter spacing
+- add text sizes
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -53,12 +53,12 @@
     "zustand": "^4.3.7"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "7.0.2",
-    "@storybook/addon-interactions": "7.0.2",
-    "@storybook/addon-links": "7.0.2",
-    "@storybook/blocks": "7.0.2",
-    "@storybook/react": "7.0.2",
-    "@storybook/react-vite": "7.0.2",
+    "@storybook/addon-essentials": "7.4.3",
+    "@storybook/addon-interactions": "7.4.3",
+    "@storybook/addon-links": "7.4.3",
+    "@storybook/blocks": "7.4.3",
+    "@storybook/react": "7.4.3",
+    "@storybook/react-vite": "7.4.3",
     "@storybook/testing-library": "^0.1.0",
     "@tamagui/vite-plugin": "1.36.4",
     "@vitejs/plugin-react-swc": "^3.2.0",
@@ -67,8 +67,8 @@
     "react-dom": "^18.2.0",
     "react-native-svg": "^13.8.0",
     "react-native-web": "^0.19.5",
-    "storybook": "7.0.2",
-    "storybook-addon-designs": "7.0.0-beta.2",
+    "storybook": "7.4.3",
+    "storybook-addon-designs": "7.0.0-beta.1",
     "storybook-dark-mode": "^3.0.0",
     "vite": "^4.2.1"
   },

diff --git a/packages/components/src/text/text.stories.tsx b/packages/components/src/text/text.stories.tsx
@@ -23,11 +23,33 @@ const meta: Meta = {
 export const Default: StoryObj<typeof Text> = {
   render: args => (
     <Stack gap={24}>
+      <Stack gap={8}>
+        <Text {...args} size={88} weight="regular" />
+        <Text {...args} size={88} weight="medium" />
+        <Text {...args} size={88} weight="semibold" />
+        <Text {...args} size={88} weight="bold" />
+      </Stack>
+
+      <Stack gap={8}>
+        <Text {...args} size={64} weight="regular" />
+        <Text {...args} size={64} weight="medium" />
+        <Text {...args} size={64} weight="semibold" />
+        <Text {...args} size={64} weight="bold" />
+      </Stack>
+
+      <Stack gap={8}>
+        <Text {...args} size={40} weight="regular" />
+        <Text {...args} size={40} weight="medium" />
+        <Text {...args} size={40} weight="semibold" />
+        <Text {...args} size={40} weight="bold" />
+      </Stack>
+
       <Stack gap={8}>
         <Text {...args} size={27} weight="regular" />
         <Text {...args} size={27} weight="medium" />
         <Text {...args} size={27} weight="semibold" />
       </Stack>
+
       <Stack gap={8}>
         <Text {...args} size={19} weight="regular" />
         <Text {...args} size={19} weight="medium" />

diff --git a/packages/components/src/text/text.tsx b/packages/components/src/text/text.tsx
@@ -16,11 +16,19 @@ type Props = {
   truncate?: boolean
   wrap?: false
 } & (
-  | { size: 27; weight?: Weight }
-  | { size: 19; weight?: Weight }
-  | { size: 15; weight?: Weight; type?: Type }
-  | { size: 13; weight?: Weight; type?: Type }
-  | { size: 11; weight?: Weight; type?: Type; uppercase?: boolean }
+  | { size: 88; weight?: Weight }
+  | { size: 64; weight?: Weight }
+  | { size: 40; weight?: Weight }
+  | { size: 27; weight?: Exclude<Weight, 'bold'> }
+  | { size: 19; weight?: Exclude<Weight, 'bold'> }
+  | { size: 15; weight?: Exclude<Weight, 'bold'>; type?: Type }
+  | { size: 13; weight?: Exclude<Weight, 'bold'>; type?: Type }
+  | {
+      size: 11
+      weight?: Exclude<Weight, 'bold'>
+      type?: Type
+      uppercase?: boolean
+    }
 )
 
 // TODO: monospace should be used only for variant. Extract to separate <Address> component?
@@ -44,30 +52,45 @@ const Base = styled(BaseText, {
     },
 
     size: {
+      88: {
+        fontSize: 88,
+        lineHeight: 84,
+        letterSpacing: -1.848,
+      },
+      64: {
+        fontSize: 64,
+        lineHeight: 68,
+        letterSpacing: -1.28,
+      },
+      40: {
+        fontSize: 40,
+        lineHeight: 44,
+        letterSpacing: -0.8,
+      },
       27: {
         fontSize: 27,
         lineHeight: 32,
-        letterSpacing: -0.021,
+        letterSpacing: -0.567,
       },
       19: {
         fontSize: 19,
-        lineHeight: 26,
-        letterSpacing: -0.016,
+        lineHeight: 28,
+        letterSpacing: -0.304,
       },
       15: {
         fontSize: 15,
-        lineHeight: 22,
-        letterSpacing: -0.009,
+        lineHeight: 21.75,
+        letterSpacing: -0.135,
       },
       13: {
         fontSize: 13,
-        lineHeight: 18,
-        letterSpacing: -0.003,
+        lineHeight: 18.2,
+        letterSpacing: -0.039,
       },
       11: {
         fontSize: 11,
-        lineHeight: 18,
-        letterSpacing: -0.003,
+        lineHeight: 15.62,
+        letterSpacing: -0.055,
       },
     },
 
@@ -81,6 +104,9 @@ const Base = styled(BaseText, {
       semibold: {
         fontWeight: '600',
       },
+      bold: {
+        fontWeight: '700',
+      },
     },
 
     uppercase: {