-
+
{t("location")}
= {
"h5",
"h6",
"labelSmall",
- "labelLight",
"labelRegular",
- "labelSemibold",
- "labelBold",
"quoteItalic",
"quoteNormal",
"bodyExtraSmall",
@@ -100,13 +97,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 +104,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..5d859d66c 100644
--- a/src/components/text/Text.tsx
+++ b/src/components/text/Text.tsx
@@ -10,10 +10,8 @@ export type TextType =
| "desktopLink"
| "desktopLinkBig"
| "labelSmall"
- | "labelLight"
| "labelRegular"
- | "labelSemibold"
- | "labelBold"
+ | "labelLarge"
| "quoteItalic"
| "quoteNormal"
| "bodyExtraSmall"
@@ -34,10 +32,8 @@ 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 +55,8 @@ 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..db88803fd 100644
--- a/src/components/text/text.module.css
+++ b/src/components/text/text.module.css
@@ -4,10 +4,7 @@
}
.labelSmall,
-.labelLight,
.labelRegular,
-.labelSemibold,
-.labelBold,
.quoteItalic,
.quoteNormal,
.bodyExtraSmall,
@@ -22,32 +19,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 +56,7 @@
font-size: 1rem;
font-style: normal;
font-weight: 400;
- line-height: 110%;
+ line-height: 150%;
}
.desktopLinkBig {
@@ -71,7 +69,7 @@
.bodyXl {
font-size: 2.5rem;
- font-weight: 400;
+ font-weight: 300;
line-height: 120%;
letter-spacing: 0.025rem;
}
@@ -79,65 +77,54 @@
.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 {
font-size: 1rem;
- font-weight: 300;
+ font-weight: 400;
line-height: 150%;
}
.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;
}
}
.labelSmall {
font-size: 0.875rem;
font-weight: 400;
- line-height: 1.5rem;
-}
-
-.labelLight {
- font-size: 1rem;
- font-style: normal;
- font-weight: 300;
- line-height: 120%;
+ line-height: 171.429%;
}
.labelRegular {
font-size: 1rem;
font-style: normal;
font-weight: 400;
- line-height: 120%;
-}
-
-.labelSemibold {
- font-size: 1rem;
- font-style: normal;
- font-weight: 600;
- line-height: 120%;
+ line-height: 150%;
+ letter-spacing: 0.02rem;
}
-.labelBold {
- font-size: 1rem;
+.labelLarge {
+ font-size: 1.25rem;
font-style: normal;
- font-weight: 800;
+ font-weight: 400;
line-height: 120%;
}
@@ -149,9 +136,10 @@
white-space: pre-line;
}
-/* TODO: add font variables */
-/* .labelBold */
-/* .quoteItalic */
-/* .labelSemibold, */
-/* .labelBold, */
-/* .quoteItalic, */
+.quoteItalic {
+ font-size: 1.5rem;
+ font-style: italic;
+ font-weight: 400;
+ line-height: 130%;
+ white-space: pre-line;
+}