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

10
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/Label.tsx
View File

@@ -1,13 +1,11 @@
import Footnote from "@scandic-hotels/design-system/Footnote"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./list.module.css"
export default function Label({ children }: React.PropsWithChildren) {
return (
<li className={styles.label}>
<Footnote color="uiTextPlaceholder" textTransform="uppercase">
{children}
</Footnote>
</li>
<Typography variant="Title/Overline/sm">
<li className={styles.label}>{children}</li>
</Typography>
)
}

3
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/list.module.css
View File

@@ -5,5 +5,6 @@
}
.label {
padding: 0 var(--Space-x1);
padding: 0 var(--Space-x1) var(--Space-x05);
color: var(--Text-Tertiary);
}

33
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx
View File

@@ -6,7 +6,6 @@ import { useIntl } from "react-intl"
import { useDebounceValue } from "usehooks-ts"
import { Divider } from "@scandic-hotels/design-system/Divider"
import Footnote from "@scandic-hotels/design-system/Footnote"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trpc } from "@scandic-hotels/trpc/client"
@@ -192,16 +191,14 @@ export default function SearchList({
{typeFilteredSearchHistory && typeFilteredSearchHistory.length > 0 && (
<>
<Divider className={styles.noResultsDivider} />
<Footnote
className={styles.text}
color="uiTextPlaceholder"
textTransform="uppercase"
>
{intl.formatMessage({
id: "bookingWidget.searchList.latestSearches",
defaultMessage: "Latest searches",
})}
</Footnote>
<Typography variant="Title/Overline/sm">
<p className={styles.text}>
{intl.formatMessage({
id: "bookingWidget.searchList.latestSearches",
defaultMessage: "Latest searches",
})}
</p>
</Typography>
<List
getItemProps={getItemProps}
highlightedIndex={highlightedIndex}
@@ -226,12 +223,14 @@ export default function SearchList({
if (displaySearchHistory) {
return (
<Dialog getMenuProps={getMenuProps}>
<Footnote color="uiTextPlaceholder" textTransform="uppercase">
{intl.formatMessage({
id: "bookingWidget.searchList.latestSearches",
defaultMessage: "Latest searches",
})}
</Footnote>
<Typography variant="Title/Overline/sm">
<p className={styles.text}>
{intl.formatMessage({
id: "bookingWidget.searchList.latestSearches",
defaultMessage: "Latest searches",
})}
</p>
</Typography>
<List
getItemProps={getItemProps}
highlightedIndex={highlightedIndex}

1
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/searchList.module.css
View File

@@ -33,6 +33,7 @@
.text {
padding: 0 var(--Space-x1);
color: var(--Text-Tertiary);
white-space: normal;
}
.textPlaceholderColor {

2
packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Desktop.tsx
View File

@@ -65,7 +65,7 @@ export default function DatePickerRangeDesktop({
range_start: styles.rangeStart,
root: `${classNames.root} ${styles.container}`,
week: styles.week,
weekday: `${classNames.weekday} ${styles.weekDay}`,
weekday: styles.weekDay,
nav: `${classNames.nav} ${styles.nav}`,
button_next: `${classNames.button_next} ${styles.button_next}`,
button_previous: `${classNames.button_previous} ${styles.button_previous}`,

2
packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Mobile.tsx
View File

@@ -98,7 +98,7 @@ export default function DatePickerRangeMobile({
range_start: styles.rangeStart,
root: `${classNames.root} ${styles.root}`,
week: styles.week,
weekday: `${classNames.weekday} ${styles.weekDay}`,
weekday: styles.weekDay,
}}
disabled={[
{ from: lastDayOfPreviousMonth, to: yesterday },

29
packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/desktop.module.css
View File

@@ -20,12 +20,12 @@ div.months {
td.day,
td.rangeEnd,
td.rangeStart {
font-family: var(--typography-Body-Bold-fontFamily);
font-size: var(--typography-Body-Bold-fontSize);
font-weight: 500;
letter-spacing: var(--typography-Body-Bold-letterSpacing);
line-height: var(--typography-Body-Bold-lineHeight);
text-decoration: var(--typography-Body-Bold-textDecoration);
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;
text-decoration: none;
}
td.rangeEnd,
@@ -92,14 +92,15 @@ td.day[data-outside="true"] ~ td.day[data-disabled="true"] button.dayButton,
}
.weekDay {
color: var(--UI-Text-Placeholder);
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);
text-transform: uppercase;
color: var(--Text-Tertiary);
font-family: var(--Title-Overline-sm-Font-family), var(--Title-Overline-sm-Font-fallback);
font-size: var(--Title-Overline-sm-Size);
font-style: normal;
font-weight: var(--Title-Overline-sm-Font-weight);
line-height: 1.5;
letter-spacing: var(--Title-Overline-sm-Letter-spacing);
text-transform: var(--Title-Overline-sm-Text-Transform);
text-decoration: none;
}
.footer {

30
packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css
View File

@@ -97,12 +97,12 @@ div.months {
td.day,
td.rangeEnd,
td.rangeStart {
font-family: var(--typography-Body-Bold-fontFamily);
font-size: var(--typography-Body-Bold-fontSize);
font-weight: 500;
letter-spacing: var(--typography-Body-Bold-letterSpacing);
line-height: var(--typography-Body-Bold-lineHeight);
text-decoration: var(--typography-Body-Bold-textDecoration);
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;
text-decoration: none;
}
td.rangeEnd,
@@ -165,15 +165,15 @@ td.day[data-outside="true"] ~ td.day[data-disabled="true"] button.dayButton,
}
.weekDay {
color: var(--Base-Text-Medium-contrast);
opacity: 1;
font-family: var(--typography-Caption-Labels-fontFamily);
font-size: var(--typography-Caption-Labels-fontSize);
font-weight: var(--typography-Caption-Labels-fontWeight);
letter-spacing: var(--typography-Caption-Labels-letterSpacing);
line-height: var(--typography-Caption-Labels-lineHeight);
text-decoration: var(--typography-Caption-Labels-textDecoration);
text-transform: uppercase;
color: var(--Text-Tertiary);
font-family: var(--Title-Overline-sm-Font-family), var(--Title-Overline-sm-Font-fallback);
font-size: var(--Title-Overline-sm-Size);
font-style: normal;
font-weight: var(--Title-Overline-sm-Font-weight);
line-height: 1.5;
letter-spacing: var(--Title-Overline-sm-Letter-spacing);
text-transform: var(--Title-Overline-sm-Text-Transform);
text-decoration: none;
}
@media screen and (min-width: 1367px) {