scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in chore/BOOK-773-replace-old-typography-variables (pull request #3515)

Browse Source 
Chore/BOOK-773 replace old typography variables

* chore(BOOK-773): Replaced body typography

* chore(BOOK-773): Replaced caption typography

* chore(BOOK-773): Replaced footnote typography

* chore(BOOK-773): Replaced subtitle typography


Approved-by: Bianca Widstam
This commit is contained in:
Erik Tiekstra
2026-02-03 15:07:18 +00:00
committed by Bianca Widstam
parent dd65467573
commit b3c4761ae5
57 changed files with 261 additions and 634 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
packages/design-system/lib/components/Footnote/footnote.module.css
View File

@@ -1,82 +0,0 @@
.footnote {
margin: 0;
padding: 0;
}
.footnoteFontOnly {
font-style: normal;
}
.bold {
font-family: var(--typography-Footnote-Bold-fontFamily);
font-size: var(--typography-Footnote-Bold-fontSize);
font-weight: var(--typography-Footnote-Bold-fontWeight);
letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
line-height: var(--typography-Footnote-Bold-lineHeight);
text-decoration: var(--typography-Footnote-Bold-textDecoration);
}
.regular {
font-family: var(--typography-Footnote-Regular-fontFamily);
font-size: var(--typography-Footnote-Regular-fontSize);
font-weight: var(--typography-Footnote-Regular-fontWeight);
letter-spacing: var(--typography-Footnote-Regular-letterSpacing);
line-height: var(--typography-Footnote-Regular-lineHeight);
text-decoration: var(--typography-Footnote-Regular-textDecoration);
}
.labels {
font-family: var(--typography-Footnote-Labels-fontFamily);
font-size: var(--typography-Footnote-Labels-fontSize);
font-weight: var(--typography-Footnote-Labels-fontWeight);
letter-spacing: var(--typography-Footnote-Labels-letterSpacing);
line-height: var(--typography-Footnote-Labels-lineHeight);
text-decoration: var(--typography-Footnote-Labels-textDecoration);
}
.uppercase {
text-transform: uppercase;
}
.center {
text-align: center;
}
.left {
text-align: left;
}
.black {
color: var(--Main-Grey-100);
}
.burgundy {
color: var(--Scandic-Brand-Burgundy);
}
.pale {
color: var(--Scandic-Brand-Pale-Peach);
}
.peach50 {
color: var(--Scandic-Peach-50);
}
.uiTextMediumContrast {
color: var(--UI-Text-Medium-contrast);
}
.uiTextHighContrast {
color: var(--UI-Text-High-contrast);
}
.uiTextPlaceholder {
color: var(--UI-Text-Placeholder);
}
.white {
color: var(--Main-Grey-White);
}
.baseTextDisabled {
color: var(--Base-Text-Disabled);
}

44
packages/design-system/lib/components/Footnote/index.tsx
View File

@@ -1,44 +0,0 @@
import { Slot } from "@radix-ui/react-slot"
import { footnoteFontOnlyVariants, footnoteVariants } from "./variants"
import type { VariantProps } from "class-variance-authority"
interface FootnoteProps
extends
Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">,
VariantProps<typeof footnoteVariants> {
asChild?: boolean
fontOnly?: boolean
}
/**
* @deprecated Use `@scandic-hotels/design-system/Typography` instead.
*/
export default function Footnote({
asChild = false,
className = "",
color,
fontOnly = false,
textAlign,
textTransform,
type,
...props
}: FootnoteProps) {
const Comp = asChild ? Slot : "p"
const classNames = fontOnly
? footnoteFontOnlyVariants({
className,
textAlign,
textTransform,
type,
})
: footnoteVariants({
className,
color,
textAlign,
textTransform,
type,
})
return <Comp className={classNames} {...props} />
}

61
packages/design-system/lib/components/Footnote/variants.ts
View File

@@ -1,61 +0,0 @@
import { cva } from "class-variance-authority"
import styles from "./footnote.module.css"
const config = {
variants: {
type: {
regular: styles.regular,
bold: styles.bold,
label: styles.labels,
},
color: {
black: styles.black,
burgundy: styles.burgundy,
pale: styles.pale,
peach50: styles.peach50,
uiTextMediumContrast: styles.uiTextMediumContrast,
uiTextHighContrast: styles.uiTextHighContrast,
uiTextPlaceholder: styles.uiTextPlaceholder,
white: styles.white,
baseTextDisabled: styles.baseTextDisabled,
},
textAlign: {
center: styles.center,
left: styles.left,
},
textTransform: {
uppercase: styles.uppercase,
},
},
defaultVariants: {
type: "regular",
},
} as const
export const footnoteVariants = cva(styles.footnote, config)
const fontOnlyConfig = {
variants: {
type: {
regular: styles.regular,
bold: styles.bold,
label: styles.labels,
},
textAlign: {
center: styles.center,
left: styles.left,
},
textTransform: {
uppercase: styles.uppercase,
},
},
defaultVariants: {
type: "regular",
},
} as const
export const footnoteFontOnlyVariants = cva(
styles.footnoteFontOnly,
fontOnlyConfig
)

5
packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css
View File

@@ -35,8 +35,3 @@
justify-content: start;
align-items: baseline;
}
.perNight {
font-weight: 400;
font-size: var(--typography-Caption-Regular-fontSize);
}

20
packages/design-system/lib/components/HotelCard/HotelPriceCard/index.tsx
View File

@@ -1,8 +1,8 @@
import { cx } from "class-variance-authority"
import { useIntl } from "react-intl"
import { Divider } from "../../Divider"
import { RateTypeEnum } from "@scandic-hotels/common/constants/rateType"
import { Divider } from "../../Divider"
import { Typography } from "../../Typography"
import styles from "./hotelPriceCard.module.css"
@@ -117,14 +117,16 @@ export function HotelPriceCard({
>
<p>
{productTypePrices.localPrice.currency}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<span className={styles.perNight}>
/
{intl.formatMessage({
id: "common.night",
defaultMessage: "night",
})}
</span>
<Typography variant="Body/Supporting text (caption)/smRegular">
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<span>
/
{intl.formatMessage({
id: "common.night",
defaultMessage: "night",
})}
</span>
</Typography>
</p>
</Typography>
</div>

57
packages/design-system/lib/components/OldDSLink/link.module.css
View File

@@ -50,30 +50,15 @@
gap: var(--Space-x05);
}
.breadcrumb {
font-family: var(--typography-Footnote-Bold-fontFamily);
font-size: var(--typography-Footnote-Bold-fontSize);
font-weight: 500;
letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
line-height: var(--typography-Footnote-Bold-lineHeight);
}
.link.breadcrumb {
font-family: var(--typography-Footnote-Bold-fontFamily);
font-size: var(--typography-Footnote-Bold-fontSize);
font-weight: 500;
letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
line-height: var(--typography-Footnote-Bold-lineHeight);
}
.myPageMobileDropdown {
display: flex;
align-items: center;
color: var(--Scandic-Brand-Burgundy);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
line-height: var(--typography-Body-Regular-lineHeight);
letter-spacing: var(--typography-Body-Regular-letterSpacing);
font-family:
var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
font-size: var(--Body-Paragraph-Size);
line-height: 1.5;
letter-spacing: var(--Body-Paragraph-Letter-spacing);
padding: var(--Space-x1);
border-radius: var(--Corner-Radius-md);
gap: var(--Space-x1);
@@ -97,11 +82,12 @@
.shortcut {
display: grid;
align-items: center;
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Regular-fontWeight);
letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: var(--typography-Body-Regular-lineHeight);
font-family:
var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
font-size: var(--Body-Paragraph-Size);
font-weight: var(--Body-Paragraph-Font-weight);
letter-spacing: var(--Body-Paragraph-Letter-spacing);
line-height: 1.5;
gap: var(--Space-x2);
grid-template-columns: 1fr auto;
padding: var(--Space-x2) var(--Space-x3);
@@ -133,22 +119,13 @@
line-height: 140%;
}
/* Tiny should be removed, it's not a variant of the Link*/
.tiny {
font-family: var(--typography-Footnote-Regular-fontFamily);
font-size: var(--typography-Footnote-Regular-fontSize);
font-weight: var(--typography-Footnote-Regular-fontWeight);
letter-spacing: var(--typography-Footnote-Regular-letterSpacing);
line-height: var(--typography-Footnote-Regular-lineHeight);
}
.bold {
font-family: var(--typography-Body-Bold-fontFamily);
font-size: var(--typography-Body-Bold-fontSize);
font-weight: 500
/* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight) */;
letter-spacing: var(--typography-Body-Bold-letterSpacing);
line-height: var(--typography-Body-Bold-lineHeight);
font-family:
var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
font-size: var(--Body-Paragraph-Size);
font-weight: var(--Body-Paragraph-Font-weight-2);
letter-spacing: var(--Body-Paragraph-Letter-spacing);
line-height: 1.5;
}
.menu {

2
packages/design-system/lib/components/OldDSLink/variants.ts
View File

@@ -18,7 +18,6 @@ export const linkVariants = cva(styles.link, {
size: {
small: styles.small,
large: styles.large,
tiny: styles.tiny,
none: "",
},
textDecoration: {
@@ -29,7 +28,6 @@ export const linkVariants = cva(styles.link, {
},
variant: {
icon: styles.icon,
breadcrumb: styles.breadcrumb,
myPageMobileDropdown: styles.myPageMobileDropdown,
navigation: styles.navigation,
menu: styles.menu,

128
packages/design-system/lib/design-system-new-deprecated.css
View File

@@ -1,131 +1,3 @@
:root {
--typography-Body-Bold-fontFamily: "fira sans";
--typography-Body-Bold-fontSize: 16px;
--typography-Body-Bold-fontWeight: "medium";
--typography-Body-Bold-letterSpacing: 1.2000000476837158%;
--typography-Body-Bold-lineHeight: 150%;
--typography-Body-Bold-textDecoration: "none";
--typography-Body-Regular-fontFamily: "fira sans";
--typography-Body-Regular-fontSize: 16px;
--typography-Body-Regular-fontWeight: "regular";
--typography-Body-Regular-letterSpacing: 1.2000000476837158%;
--typography-Body-Regular-lineHeight: 150%;
--typography-Body-Regular-textDecoration: "none";
--typography-Body-Underline-fontFamily: "fira sans";
--typography-Body-Underline-fontSize: 16px;
--typography-Body-Underline-letterSpacing: 1.2000000476837158%;
--typography-Body-Underline-lineHeight: 150%;
--typography-Body-Underline-textDecoration: "underline";
--typography-Caption-Bold-fontFamily: "fira sans";
--typography-Caption-Bold-fontSize: 14px;
--typography-Caption-Bold-fontWeight: "medium";
--typography-Caption-Bold-letterSpacing: 1.399999976158142%;
--typography-Caption-Bold-lineHeight: 139.9999976158142%;
--typography-Caption-Bold-textDecoration: "none";
--typography-Caption-Labels-fontFamily: "brandon text";
--typography-Caption-Labels-fontSize: 14px;
--typography-Caption-Labels-fontWeight: "bold";
--typography-Caption-Labels-letterSpacing: 1.399999976158142%;
--typography-Caption-Labels-lineHeight: 150%;
--typography-Caption-Labels-textDecoration: "none";
--typography-Caption-Regular-fontFamily: "fira sans";
--typography-Caption-Regular-fontSize: 14px;
--typography-Caption-Regular-fontWeight: "regular";
--typography-Caption-Regular-letterSpacing: 1.399999976158142%;
--typography-Caption-Regular-lineHeight: 139.9999976158142%;
--typography-Caption-Regular-textDecoration: "none";
--typography-Caption-Underline-fontFamily: "fira sans";
--typography-Caption-Underline-fontSize: 14px;
--typography-Caption-Underline-fontWeight: "medium";
--typography-Caption-Underline-letterSpacing: 1.399999976158142%;
--typography-Caption-Underline-lineHeight: 139.9999976158142%;
--typography-Caption-Underline-textDecoration: "underline";
--typography-Footnote-Bold-fontFamily: "fira sans";
--typography-Footnote-Bold-fontSize: 12px;
--typography-Footnote-Bold-fontWeight: "medium";
--typography-Footnote-Bold-letterSpacing: 1.399999976158142%;
--typography-Footnote-Bold-lineHeight: 150%;
--typography-Footnote-Bold-textDecoration: "none";
--typography-Footnote-Labels-fontFamily: "brandon text";
--typography-Footnote-Labels-fontSize: 12px;
--typography-Footnote-Labels-fontWeight: "bold";
--typography-Footnote-Labels-letterSpacing: 1.399999976158142%;
--typography-Footnote-Labels-lineHeight: 150%;
--typography-Footnote-Labels-textDecoration: "none";
--typography-Footnote-Regular-fontFamily: "fira sans";
--typography-Footnote-Regular-fontSize: 12px;
--typography-Footnote-Regular-fontWeight: "regular";
--typography-Footnote-Regular-letterSpacing: 1.399999976158142%;
--typography-Footnote-Regular-lineHeight: 150%;
--typography-Footnote-Regular-textDecoration: "none";
--typography-Preamble-Desktop-fontSize: 20px;
--typography-Preamble-fontFamily: "fira sans";
--typography-Preamble-fontWeight: "regular";
--typography-Preamble-letterSpacing: 1%;
--typography-Preamble-lineHeight: 139.9999976158142%;
--typography-Preamble-Mobile-fontSize: 18px;
--typography-Preamble-textDecoration: "none";
--typography-Script-1-Desktop-fontSize: 32px;
--typography-Script-1-fontFamily: "biro script plus";
--typography-Script-1-fontWeight: "regular";
--typography-Script-1-letterSpacing: 2%;
--typography-Script-1-lineHeight: 110.00000238418579%;
--typography-Script-1-Mobile-fontSize: 24px;
--typography-Script-2-Desktop-fontSize: 24px;
--typography-Script-2-fontWeight: "regular";
--typography-Script-2-letterSpacing: 2%;
--typography-Script-2-lineHeight: 110.00000238418579%;
--typography-Script-2-Mobile-fontSize: 20px;
--typography-Subtitle-1-Desktop-fontSize: 24px;
--typography-Subtitle-1-fontFamily: "fira sans";
--typography-Subtitle-1-letterSpacing: 1%;
--typography-Subtitle-1-lineHeight: 120.00000476837158%;
--typography-Subtitle-1-Mobile-fontSize: 20px;
--typography-Subtitle-2-Desktop-fontSize: 20px;
--typography-Subtitle-2-fontFamily: "fira sans";
--typography-Subtitle-2-fontSize: 20px;
--typography-Subtitle-2-fontWeight: "medium";
--typography-Subtitle-2-letterSpacing: 1%;
--typography-Subtitle-2-lineHeight: 120.00000476837158%;
--typography-Subtitle-2-Mobile-fontSize: 18px;
--typography-Title-1-Desktop-fontSize: 64px;
--typography-Title-1-fontFamily: "brandon text";
--typography-Title-1-fontSize: 64px;
--typography-Title-1-fontWeight: "black";
--typography-Title-1-letterSpacing: 0.25%;
--typography-Title-1-lineHeight: 110.00000238418579%;
--typography-Title-1-Mobile-fontSize: 48px;
--typography-Title-1-textDecoration: "none";
--typography-Title-2-Desktop-fontSize: 48px;
--typography-Title-2-fontFamily: "brandon text";
--typography-Title-2-fontWeight: "black";
--typography-Title-2-letterSpacing: 0.25%;
--typography-Title-2-lineHeight: 110.00000238418579%;
--typography-Title-2-Mobile-fontSize: 36px;
--typography-Title-2-textDecoration: "none";
--typography-Title-3-Desktop-fontSize: 36px;
--typography-Title-3-fontFamily: "brandon text";
--typography-Title-3-fontSize: 36px;
--typography-Title-3-fontWeight: "black";
--typography-Title-3-letterSpacing: 0.25%;
--typography-Title-3-lineHeight: 110.00000238418579%;
--typography-Title-3-Mobile-fontSize: 30px;
--typography-Title-3-textDecoration: "none";
--typography-Title-4-Desktop-fontSize: 28px;
--typography-Title-4-fontFamily: "brandon text";
--typography-Title-4-fontWeight: "bold";
--typography-Title-4-letterSpacing: 0.25%;
--typography-Title-4-lineHeight: 110.00000238418579%;
--typography-Title-4-Mobile-fontSize: 24px;
--typography-Title-4-textDecoration: "none";
--typography-Title-5-Desktop-fontSize: 24px;
--typography-Title-5-fontFamily: "brandon text";
--typography-Title-5-fontWeight: "black";
--typography-Title-5-letterSpacing: 0.25%;
--typography-Title-5-lineHeight: 110.00000238418579%;
--typography-Title-5-Mobile-fontSize: 20px;
--typography-Title-5-textDecoration: "none";
}
:root {
--Base-Border-Hover: var(--Scandic-Peach-80);
--Base-Border-Inverted: var(--UI-Opacity-White-100);