add sizes

status-im · Sep 21, 2023 · ec87174 · ec87174
1 parent 1d3cd7b
commit ec87174
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 5 deletions.
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,6 +52,21 @@ 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,
@@ -81,6 +104,9 @@ const Base = styled(BaseText, {
       semibold: {
         fontWeight: '600',
       },
+      bold: {
+        fontWeight: '700',
+      },
     },
 
     uppercase: {