💄 Align text CSS classes with design

💄 Add labelLarge class 🔥 Remove labelSemibold and labelLight
varianter · Dec 6, 2024 · 96f1833 · 96f1833
1 parent 60b7d4f
commit 96f1833
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 61 deletions.
diff --git a/src/components/navigation/breadCrumbMenu/BreadCrumbMenu.tsx b/src/components/navigation/breadCrumbMenu/BreadCrumbMenu.tsx
@@ -48,7 +48,7 @@ export const BreadCrumbMenu = ({
                 className={
                   isLast ? styles.breadCrumbText : styles.breadCrumbLink
                 }
-                type={isLast ? "labelSemibold" : "desktopLink"}
+                type={isLast ? "labelRegular" : "desktopLink"}
               >
                 {title}
               </Text>

diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx
@@ -103,7 +103,7 @@ export const Header = ({
                   />
                 )}
                 <Button size="large" type="secondary" background="light">
-                  <Text type="labelRegular">{t("contact_us")}</Text>
+                  <Text type="labelLarge">{t("contact_us")}</Text>
                 </Button>
               </div>
               <button

diff --git a/src/components/sections/employees/EmployeeList.tsx b/src/components/sections/employees/EmployeeList.tsx
@@ -99,7 +99,7 @@ export default function EmployeeList({
     <>
       <div className={styles.employeeFiltersWrapper}>
         <div className={styles.employeeFilterWrapper}>
-          <Text type="labelSemibold" className={styles.employeeFilterLabel}>
+          <Text type="labelRegular" className={styles.employeeFilterLabel}>
             {t("field")}
           </Text>
           <Tag
@@ -125,7 +125,7 @@ export default function EmployeeList({
           })}
         </div>
         <div className={styles.employeeFilterWrapper}>
-          <Text type="labelSemibold" className={styles.employeeFilterLabel}>
+          <Text type="labelRegular" className={styles.employeeFilterLabel}>
             {t("location")}
           </Text>
           <Tag

diff --git a/src/components/text/Text.stories.tsx b/src/components/text/Text.stories.tsx
@@ -18,9 +18,7 @@ const meta: Meta<typeof Text> = {
           "h5",
           "h6",
           "labelSmall",
-          "labelLight",
           "labelRegular",
-          "labelSemibold",
           "labelBold",
           "quoteItalic",
           "quoteNormal",
@@ -100,27 +98,13 @@ export const LabelSmall: Story = {
   },
 };
 
-export const LabelLight: Story = {
-  args: {
-    type: "labelLight",
-    children: "This is a Label Light text",
-  },
-};
-
 export const LabelRegular: Story = {
   args: {
     type: "labelRegular",
     children: "This is a Label Regular text",
   },
 };
 
-export const LabelSemibold: Story = {
-  args: {
-    type: "labelSemibold",
-    children: "This is a Label Semibold text",
-  },
-};
-
 export const QuoteItalic: Story = {
   args: {
     type: "quoteItalic",

diff --git a/src/components/text/Text.tsx b/src/components/text/Text.tsx
@@ -10,10 +10,9 @@ export type TextType =
   | "desktopLink"
   | "desktopLinkBig"
   | "labelSmall"
-  | "labelLight"
   | "labelRegular"
-  | "labelSemibold"
   | "labelBold"
+  | "labelLarge"
   | "quoteItalic"
   | "quoteNormal"
   | "bodyExtraSmall"
@@ -34,10 +33,9 @@ const elementMap: { [key in TextType]: keyof JSX.IntrinsicElements } = {
   desktopLink: "p",
   desktopLinkBig: "p",
   labelSmall: "span",
-  labelLight: "span",
   labelRegular: "span",
-  labelSemibold: "span",
   labelBold: "span",
+  labelLarge: "span",
   quoteItalic: "p",
   quoteNormal: "p",
   bodyExtraSmall: "p",
@@ -59,10 +57,9 @@ const classMap: { [key in TextType]?: string } = {
   desktopLink: styles.desktopLink,
   desktopLinkBig: styles.desktopLinkBig,
   labelSmall: styles.labelSmall,
-  labelLight: styles.labelLight,
   labelRegular: styles.labelRegular,
-  labelSemibold: styles.labelSemibold,
   labelBold: styles.labelBold,
+  labelLarge: styles.labelLarge,
   quoteItalic: styles.quoteItalic,
   quoteNormal: styles.quoteNormal,
   bodyExtraSmall: styles.bodyExtraSmall,

diff --git a/src/components/text/text.module.css b/src/components/text/text.module.css
@@ -4,9 +4,7 @@
 }
 
 .labelSmall,
-.labelLight,
 .labelRegular,
-.labelSemibold,
 .labelBold,
 .quoteItalic,
 .quoteNormal,
@@ -22,32 +20,33 @@
 .h1 {
   font-size: 4.5rem;
   font-style: normal;
-  font-weight: 600;
-  line-height: 120%;
+  font-weight: 450;
+  line-height: 111.111%;
 }
 
 .h2 {
-  font-size: 3rem;
-  font-weight: 600;
-  line-height: 120%;
+  font-size: 3.5rem;
+  font-weight: 450;
+  line-height: 114.286%;
 }
 
 .h3 {
-  font-size: 2.125rem;
-  font-weight: 600;
+  font-size: 2rem;
+  font-weight: 450;
+  line-height: 125%;
 }
 
 .h4 {
   font-size: 1.5rem;
   font-style: normal;
-  font-weight: 500;
-  line-height: 120%; /* 1.8rem */
+  font-weight: 450;
+  line-height: 133.3%;
 }
 
 .h5 {
   font-size: 1.25rem;
   font-style: normal;
-  font-weight: 400;
+  font-weight: 450;
   line-height: 120%;
 }
 
@@ -58,7 +57,7 @@
   font-size: 1rem;
   font-style: normal;
   font-weight: 400;
-  line-height: 110%;
+  line-height: 150%;
 }
 
 .desktopLinkBig {
@@ -71,22 +70,24 @@
 
 .bodyXl {
   font-size: 2.5rem;
-  font-weight: 400;
+  font-weight: 300;
   line-height: 120%;
   letter-spacing: 0.025rem;
 }
 
 .bodyBig {
   font-size: 1.5rem;
   font-style: normal;
-  font-weight: 400;
-  line-height: 130%;
+  font-weight: 300;
+  line-height: 133.333%;
 }
 
 .bodyNormal {
   font-size: 1.25rem;
   font-style: normal;
   font-weight: 300;
+  line-height: 160%;
+  letter-spacing: 0.0125rem;
 }
 
 .bodySmall {
@@ -96,14 +97,14 @@
 }
 
 .bodyExtraSmall {
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 18px;
-  letter-spacing: 0.14px;
+  line-height: 128.571%;
+  letter-spacing: 0.00875rem;
 
   @media (max-width: 375px) {
-    font-size: 12px;
-    letter-spacing: 0.12px;
+    font-size: 0.75px;
+    letter-spacing: 0.0075rem;
   }
 }
 
@@ -113,31 +114,25 @@
   line-height: 1.5rem;
 }
 
-.labelLight {
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 300;
-  line-height: 120%;
-}
-
 .labelRegular {
   font-size: 1rem;
   font-style: normal;
   font-weight: 400;
-  line-height: 120%;
+  line-height: 150%;
+  letter-spacing: 0.02rem;
 }
 
-.labelSemibold {
+.labelBold {
   font-size: 1rem;
   font-style: normal;
-  font-weight: 600;
+  font-weight: 800;
   line-height: 120%;
 }
 
-.labelBold {
-  font-size: 1rem;
+.labelLarge {
+  font-size: 1.25rem;
   font-style: normal;
-  font-weight: 800;
+  font-weight: 400;
   line-height: 120%;
 }
 
@@ -149,9 +144,16 @@
   white-space: pre-line;
 }
 
+.quoteItalic {
+  font-size: 1.5rem;
+  font-style: italic;
+  font-weight: 400;
+  line-height: 130%;
+  white-space: pre-line;
+}
+
 /* TODO: add font variables */
 /* .labelBold */
 /* .quoteItalic */
-/* .labelSemibold, */
 /* .labelBold, */
 /* .quoteItalic, */