-
+
{t("location")}
= {
"h5",
"h6",
"labelSmall",
- "labelLight",
"labelRegular",
- "labelSemibold",
"labelBold",
"quoteItalic",
"quoteNormal",
@@ -100,13 +98,6 @@ 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",
@@ -114,13 +105,6 @@ export const LabelRegular: Story = {
},
};
-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
index ce7ad46e3..b341ff54b 100644
--- 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
index d5118b8bf..384953994 100644
--- 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,7 +70,7 @@
.bodyXl {
font-size: 2.5rem;
- font-weight: 400;
+ font-weight: 300;
line-height: 120%;
letter-spacing: 0.025rem;
}
@@ -79,14 +78,16 @@
.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, */