📱 Scale font sizes to device (#973)

* 📱 Scale text to device 🔥 Remove unused labelSmall * 🔥 Remove unused desktopLinkBig * Update src/components/text/text.module.css Co-authored-by: Mikael Brevik <[email protected]> * 💄 Update more styles --------- Co-authored-by: Mikael Brevik <[email protected]>
varianter · Dec 10, 2024 · c3fa6c1 · c3fa6c1
1 parent b639835
commit c3fa6c1
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 35 deletions.
diff --git a/src/components/sections/article/Article.tsx b/src/components/sections/article/Article.tsx
@@ -24,7 +24,7 @@ const Article = ({ article }: ArticleProps) => {
         )}
         <div className={styles.content}>
           <div>
-            <Text type="labelSmall">{article.tag}</Text>
+            <Text type="labelRegular">{article.tag}</Text>
             <Text type="h2">{article.basicTitle}</Text>
           </div>
           {article.richText && <RichText value={article.richText} />}

diff --git a/src/components/text/Text.stories.tsx b/src/components/text/Text.stories.tsx
@@ -17,7 +17,6 @@ const meta: Meta<typeof Text> = {
           "h4",
           "h5",
           "h6",
-          "labelSmall",
           "labelRegular",
           "quoteItalic",
           "quoteNormal",
@@ -90,13 +89,6 @@ export const H6: Story = {
   },
 };
 
-export const LabelSmall: Story = {
-  args: {
-    type: "labelSmall",
-    children: "This is a Label Small text",
-  },
-};
-
 export const LabelRegular: Story = {
   args: {
     type: "labelRegular",

diff --git a/src/components/text/Text.tsx b/src/components/text/Text.tsx
@@ -8,8 +8,6 @@ export type TextType =
   | "h5"
   | "h6"
   | "desktopLink"
-  | "desktopLinkBig"
-  | "labelSmall"
   | "labelRegular"
   | "labelLarge"
   | "quoteItalic"
@@ -30,8 +28,6 @@ const elementMap: { [key in TextType]: keyof JSX.IntrinsicElements } = {
   h5: "h5",
   h6: "h6",
   desktopLink: "p",
-  desktopLinkBig: "p",
-  labelSmall: "span",
   labelRegular: "span",
   labelLarge: "span",
   quoteItalic: "p",
@@ -53,8 +49,6 @@ const classMap: { [key in TextType]?: string } = {
   h5: styles.h5,
   h6: styles.h6,
   desktopLink: styles.desktopLink,
-  desktopLinkBig: styles.desktopLinkBig,
-  labelSmall: styles.labelSmall,
   labelRegular: styles.labelRegular,
   labelLarge: styles.labelLarge,
   quoteItalic: styles.quoteItalic,

diff --git a/src/components/text/text.module.css b/src/components/text/text.module.css
@@ -3,7 +3,6 @@
   font-family: var(--font-britti-sans);
 }
 
-.labelSmall,
 .labelRegular,
 .quoteItalic,
 .quoteNormal,
@@ -21,18 +20,43 @@
   font-style: normal;
   font-weight: 450;
   line-height: 111.111%;
+
+  @media (max-width: 834px) {
+    font-size: 3.5rem;
+    line-height: 114.286%;
+  }
+
+  @media (max-width: 425px) {
+    font-size: 2.5rem;
+    line-height: 120%;
+  }
 }
 
 .h2 {
   font-size: 3.5rem;
   font-weight: 450;
   line-height: 114.286%;
+
+  @media (max-width: 834px) {
+    font-size: 2.5rem;
+    line-height: 120%;
+  }
+
+  @media (max-width: 425px) {
+    font-size: 2rem;
+    line-height: 125%;
+  }
 }
 
 .h3 {
   font-size: 2rem;
   font-weight: 450;
   line-height: 125%;
+
+  @media (max-width: 425px) {
+    font-size: 1.5rem;
+    line-height: 133.333%;
+  }
 }
 
 .h4 {
@@ -49,21 +73,11 @@
   line-height: 120%;
 }
 
-/* TODO: add font variables */
-/* .h6 */
-
 .desktopLink {
   font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: 150%;
-}
-
-.desktopLinkBig {
-  font-size: 1.25rem;
-  font-style: normal;
-  font-weight: 300;
-  line-height: 120%;
   text-decoration-line: underline;
 }
 
@@ -72,13 +86,22 @@
   font-weight: 300;
   line-height: 120%;
   letter-spacing: 0.025rem;
+
+  @media (max-width: 425px) {
+    font-size: 2rem;
+    line-height: 125%;
+  }
 }
 
 .bodyBig {
   font-size: 1.5rem;
   font-style: normal;
   font-weight: 300;
   line-height: 133.333%;
+
+  @media (max-width: 425px) {
+    font-size: 1.125rem;
+  }
 }
 
 .bodyNormal {
@@ -87,12 +110,22 @@
   font-weight: 300;
   line-height: 160%;
   letter-spacing: 0.0125rem;
+
+  @media (max-width: 425px) {
+    font-size: 0.875rem;
+    line-height: 171.429%;
+  }
 }
 
 .bodySmall {
   font-size: 1rem;
-  font-weight: 400;
+  font-weight: 300;
   line-height: 150%;
+
+  @media (max-width: 425px) {
+    font-size: 0.875rem;
+    line-height: 114.286%;
+  }
 }
 
 .bodyExtraSmall {
@@ -101,31 +134,37 @@
   line-height: 128.571%;
   letter-spacing: 0.00875rem;
 
-  @media (max-width: 375px) {
-    font-size: 0.75px;
+  @media (max-width: 425px) {
+    font-size: 0.75rem;
+    line-height: 150%;
     letter-spacing: 0.0075rem;
   }
 }
 
-.labelSmall {
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 171.429%;
-}
-
 .labelRegular {
   font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: 150%;
   letter-spacing: 0.02rem;
+
+  @media (max-width: 425px) {
+    font-size: 0.875rem;
+    line-height: 114.286%;
+    letter-spacing: 0.0175rem;
+  }
 }
 
 .labelLarge {
   font-size: 1.25rem;
   font-style: normal;
   font-weight: 400;
   line-height: 120%;
+
+  @media (max-width: 425px) {
+    font-size: 1.125rem;
+    line-height: 133.333%;
+  }
 }
 
 .quoteNormal {