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,