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

Merged in feat/SW-1888-tripadvisor-link-color (pull request #1594)

Browse Source 
Feat(SW-1888): Update text colors

* feat(SW-188): Update text colors


Approved-by: Erik Tiekstra
Approved-by: Fredrik Thorsson
This commit is contained in:
Matilda Landström
2025-03-21 12:23:57 +00:00
parent 310296b55f
commit 369cc964f0
2 changed files with 29 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx
View File

@@ -2,9 +2,6 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
import { ChevronRightSmallIcon, TripAdvisorIcon } from "@/components/Icons" import { ChevronRightSmallIcon, TripAdvisorIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Body from "@/components/TempDesignSystem/Text/Body"
import Preamble from "@/components/TempDesignSystem/Text/Preamble"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import { getSingleDecimal } from "@/utils/numberFormatting" import { getSingleDecimal } from "@/utils/numberFormatting"
@@ -43,14 +40,18 @@ export default async function IntroSection({
<section className={styles.introSection}> <section className={styles.introSection}>
<div className={styles.mainContent}> <div className={styles.mainContent}>
<div className={styles.titleContainer}> <div className={styles.titleContainer}>
<BiroScript tilted="medium" color="red"> <Typography variant="Title/Decorative/lg">
<span className={styles.script}>
{intl.formatMessage({ id: "Welcome to" })} {intl.formatMessage({ id: "Welcome to" })}
</BiroScript> </span>
<Typography variant="Title/lg" className={styles.title}> </Typography>
<h1>{hotelName}</h1> <Typography variant="Title/lg">
<h1 className={styles.title}>{hotelName}</h1>
</Typography> </Typography>
</div> </div>
<Body color="uiTextMediumContrast">{formattedLocationText}</Body> <Typography variant="Body/Supporting text (caption)/smRegular">
<p className={styles.bodyText}>{formattedLocationText}</p>
</Typography>
{formattedTripAdvisorText && ( {formattedTripAdvisorText && (
<span className={styles.tripAdvisorText}> <span className={styles.tripAdvisorText}>
<TripAdvisorIcon /> <TripAdvisorIcon />
@@ -59,7 +60,9 @@ export default async function IntroSection({
)} )}
</div> </div>
<div className={styles.subtitleContent}> <div className={styles.subtitleContent}>
<Preamble>{hotelDescription}</Preamble> <Typography variant="Body/Lead text">
<p>{hotelDescription}</p>
</Typography>
<Link <Link
className={styles.introLink} className={styles.introLink}
color="burgundy" color="burgundy"

31
apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css
View File

@@ -19,32 +19,33 @@
display: flex; display: flex;
gap: var(--Space-x05); gap: var(--Space-x05);
align-items: center; align-items: center;
color: var(--Text-Interactive-Secondary); color: var(--Text-Secondary);
} }
.tripAdvisorText svg, .tripAdvisorText svg,
.tripAdvisorText svg * { .tripAdvisorText svg * {
fill: var(--Text-Interactive-Secondary); fill: var(--Icon-Default);
} }
.title { .title {
color: var(--Text-Heading); color: var(--Text-Heading);
} }
.bodyText {
color: var(--Text-Secondary);
}
.script {
transform: rotate(-4deg);
color: var(--Text-Accent-Primary);
}
.titleContainer {
display: grid;
gap: var(--Spacing-x2);
}
.introLink { .introLink {
text-decoration-color: var(--Scandic-Peach-80); text-decoration-color: var(--Scandic-Peach-80);
width: fit-content; width: fit-content;
} }
@media screen and (min-width: 768px) {
.titleContainer {
display: grid;
gap: var(--Spacing-x-one-and-half);
}
}
@media screen and (min-width: 1367px) {
.titleContainer {
gap: var(--Spacing-x0);
}
}