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

chore: update design system tokens

Browse Source
This commit is contained in:
Christel Westerberg
2024-07-10 07:36:30 +02:00
parent 21f07c584b
commit 7068fb4e15
22 changed files with 116 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/[lang]/(live)/(protected)/my-pages/layout.module.css
View File

@@ -1,5 +1,5 @@
.layout { .layout {
background-color: var(--Scandic-Brand-Warm-White); background-color: var(--Base-Background-Primary-Normal);
display: grid; display: grid;
font-family: var(--typography-Body-Regular-fontFamily); font-family: var(--typography-Body-Regular-fontFamily);
gap: var(--Spacing-x3); gap: var(--Spacing-x3);

2
app/[lang]/(live)/(protected)/my-pages/profile/@communication/page.tsx
View File

@@ -11,7 +11,7 @@ export default async function CommunicationSlot() {
return ( return (
<section className={styles.container}> <section className={styles.container}>
<article className={styles.content}> <article className={styles.content}>
<Subtitle color="black"> <Subtitle type="two" color="black">
{formatMessage({ id: "My communication preferences" })} {formatMessage({ id: "My communication preferences" })}
</Subtitle> </Subtitle>
<Body color="black"> <Body color="black">

2
app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx
View File

@@ -15,7 +15,7 @@ export default async function CreditCardSlot() {
return ( return (
<section className={styles.container}> <section className={styles.container}>
<article className={styles.content}> <article className={styles.content}>
<Subtitle color="black"> <Subtitle type="two" color="black">
{formatMessage({ id: "My credit cards" })} {formatMessage({ id: "My credit cards" })}
</Subtitle> </Subtitle>
<Body color="black"> <Body color="black">

2
app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css
View File

@@ -1,5 +1,5 @@
.layout { .layout {
background-color: var(--Scandic-Brand-Warm-White); background-color: var(--Base-Background-Primary-Normal);
display: grid; display: grid;
font-family: var(--typography-Body-Regular-fontFamily); font-family: var(--typography-Body-Regular-fontFamily);
gap: var(--Spacing-x3); gap: var(--Spacing-x3);

2
app/[lang]/webview/layout.module.css
View File

@@ -1,5 +1,5 @@
.layout { .layout {
background-color: var(--Scandic-Brand-Warm-White); background-color: var(--Base-Background-Primary-Normal);
font-family: var(--typography-Body-Regular-fontFamily); font-family: var(--typography-Body-Regular-fontFamily);
min-height: 100dvh; min-height: 100dvh;
} }

2
components/Forms/Edit/Profile/index.tsx
View File

@@ -65,7 +65,7 @@ export default function Form({ user }: EditFormProps) {
<Header> <Header>
<hgroup> <hgroup>
<Title as="h4" color="red" level="h1"> <Title as="h4" color="red" level="h1">
{formatMessage({ id: "Edit" })} {formatMessage({ id: "Welcome" })}
</Title> </Title>
<Title as="h4" color="burgundy" level="h2"> <Title as="h4" color="burgundy" level="h2">
{user.name} {user.name}

2
components/TempDesignSystem/Link/link.module.css
View File

@@ -98,7 +98,7 @@
} }
.burgundy { .burgundy {
color: var(--Scandic-Brand-Burgundy); color: var(--Base-Text-High-contrast);
} }
.pale { .pale {

6
components/TempDesignSystem/LoyaltyCard/index.tsx
View File

@@ -37,11 +37,7 @@ export default function LoyaltyCard({
<Title as="h5" level="h3" textAlign="center"> <Title as="h5" level="h3" textAlign="center">
{heading} {heading}
</Title> </Title>
{bodyText ? ( {bodyText ? <Body textAlign="center">{bodyText}</Body> : null}
<Body textAlign="center" color="red">
{bodyText}
</Body>
) : null}
<div className={styles.buttonContainer}> <div className={styles.buttonContainer}>
{link ? ( {link ? (
<Link <Link

6
components/TempDesignSystem/Text/Body/body.module.css
View File

@@ -10,7 +10,7 @@
.bold { .bold {
font-family: var(--typography-Body-Bold-fontFamily); font-family: var(--typography-Body-Bold-fontFamily);
font-size: var(--typography-Body-Bold-fontSize); font-size: var(--typography-Body-Bold-fontSize);
font-weight: var(--typography-Body-Bold-fontWeight); font-weight: 500;
letter-spacing: var(--typography-Body-Bold-letterSpacing); letter-spacing: var(--typography-Body-Bold-letterSpacing);
line-height: var(--typography-Body-Bold-lineHeight); line-height: var(--typography-Body-Bold-lineHeight);
text-decoration: var(--typography-Body-Bold-textDecoration); text-decoration: var(--typography-Body-Bold-textDecoration);
@@ -19,7 +19,7 @@
.regular { .regular {
font-family: var(--typography-Body-Regular-fontFamily); font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize); font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Regular-fontWeight); font-weight: 400;
letter-spacing: var(--typography-Body-Regular-letterSpacing); letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: var(--typography-Body-Regular-lineHeight); line-height: var(--typography-Body-Regular-lineHeight);
text-decoration: var(--typography-Body-Regular-textDecoration); text-decoration: var(--typography-Body-Regular-textDecoration);
@@ -28,7 +28,7 @@
.underlined { .underlined {
font-family: var(--typography-Body-Underline-fontFamily); font-family: var(--typography-Body-Underline-fontFamily);
font-size: var(--typography-Body-Underline-fontSize); font-size: var(--typography-Body-Underline-fontSize);
font-weight: var(--typography-Body-Underline-fontWeight); font-weight: 500;
letter-spacing: var(--typography-Body-Underline-letterSpacing); letter-spacing: var(--typography-Body-Underline-letterSpacing);
line-height: var(--typography-Body-Underline-lineHeight); line-height: var(--typography-Body-Underline-lineHeight);
text-decoration: var(--typography-Body-Underline-textDecoration); text-decoration: var(--typography-Body-Underline-textDecoration);

21
components/TempDesignSystem/Text/Preamble/index.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { Slot } from "@radix-ui/react-slot"
import { preambleVariants } from "./variants"
import type { CaptionProps } from "./preamble"
export default function Preamble({
asChild = false,
className = "",
color,
textAlign,
...props
}: CaptionProps) {
const Comp = asChild ? Slot : "p"
const classNames = preambleVariants({
className,
color,
textAlign,
})
return <Comp className={classNames} {...props} />
}

42
components/TempDesignSystem/Text/Preamble/preamble.module.css Normal file
View File

@@ -0,0 +1,42 @@
.preamble {
margin: 0;
padding: 0;
font-family: var(--typography-Preamble-fontFamily);
font-size: clamp(
var(--typography-Preamble-Mobile-fontSize),
0.3vw + 15px,
var(--typography-Preamble-Desktop-fontSize)
);
font-weight: var(--typography-Preamble-fontWeight);
letter-spacing: var(--typography-Preamble-letterSpacing);
line-height: var(--typography-Preamble-lineHeight);
text-decoration: var(--typography-Preamble-textDecoration);
}
.preambleFontOnly {
font-style: normal;
}
.black {
color: var(--Main-Grey-100);
}
.burgundy {
color: var(--Scandic-Brand-Burgundy);
}
.pale {
color: var(--Scandic-Brand-Pale-Peach);
}
.textMediumContrast {
color: var(--Base-Text-UI-Medium-contrast);
}
.center {
text-align: center;
}
.left {
text-align: left;
}

9
components/TempDesignSystem/Text/Preamble/preamble.ts Normal file
View File

@@ -0,0 +1,9 @@
import { preambleVariants } from "./variants"
import type { VariantProps } from "class-variance-authority"
export interface CaptionProps
extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
VariantProps<typeof preambleVariants> {
asChild?: boolean
}

23
components/TempDesignSystem/Text/Preamble/variants.ts Normal file
View File

@@ -0,0 +1,23 @@
import { cva } from "class-variance-authority"
import styles from "./preamble.module.css"
const config = {
variants: {
color: {
black: styles.black,
burgundy: styles.burgundy,
pale: styles.pale,
textMediumContrast: styles.textMediumContrast,
},
textAlign: {
center: styles.center,
left: styles.left,
},
},
defaultVariants: {
color: "black",
},
} as const
export const preambleVariants = cva(styles.preamble, config)

4
components/TempDesignSystem/Text/Subtitle/subtitle.module.css
View File

@@ -10,7 +10,7 @@
0.3vw + 15px, 0.3vw + 15px,
var(--typography-Subtitle-1-Desktop-fontSize) var(--typography-Subtitle-1-Desktop-fontSize)
); );
font-weight: var(--typography-Subtitle-1-fontWeight); font-weight: 600;
letter-spacing: var(--typography-Subtitle-1-letterSpacing); letter-spacing: var(--typography-Subtitle-1-letterSpacing);
line-height: var(--typography-Subtitle-1-lineHeight); line-height: var(--typography-Subtitle-1-lineHeight);
} }
@@ -22,7 +22,7 @@
0.3vw + 15px, 0.3vw + 15px,
var(--typography-Subtitle-2-Desktop-fontSize) var(--typography-Subtitle-2-Desktop-fontSize)
); );
font-weight: var(--typography-Subtitle-2-fontWeight); font-weight: 600;
letter-spacing: var(--typography-Subtitle-2-letterSpacing); letter-spacing: var(--typography-Subtitle-2-letterSpacing);
line-height: var(--typography-Subtitle-2-lineHeight); line-height: var(--typography-Subtitle-2-lineHeight);
} }

6
components/TempDesignSystem/Text/Title/title.module.css
View File

@@ -1,6 +1,7 @@
.heading { .heading {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-weight: 500;
} }
.h1 { .h1 {
@@ -10,7 +11,6 @@
2.6vw + 27px, 2.6vw + 27px,
var(--typography-Title-1-Desktop-fontSize) var(--typography-Title-1-Desktop-fontSize)
); );
font-weight: var(--typography-Title-1-fontWeight);
letter-spacing: var(--typography-Title-1-letterSpacing); letter-spacing: var(--typography-Title-1-letterSpacing);
line-height: var(--typography-Title-1-lineHeight); line-height: var(--typography-Title-1-lineHeight);
text-decoration: var(--typography-Title-1-textDecoration); text-decoration: var(--typography-Title-1-textDecoration);
@@ -23,7 +23,6 @@
2vw + 20px, 2vw + 20px,
var(--typography-Title-2-Desktop-fontSize) var(--typography-Title-2-Desktop-fontSize)
); );
font-weight: var(--typography-Title-2-fontWeight);
letter-spacing: var(--typography-Title-2-letterSpacing); letter-spacing: var(--typography-Title-2-letterSpacing);
line-height: var(--typography-Title-2-lineHeight); line-height: var(--typography-Title-2-lineHeight);
text-decoration: var(--typography-Title-2-textDecoration); text-decoration: var(--typography-Title-2-textDecoration);
@@ -36,7 +35,6 @@
0.6vw + 27px, 0.6vw + 27px,
var(--typography-Title-3-Desktop-fontSize) var(--typography-Title-3-Desktop-fontSize)
); );
font-weight: var(--typography-Title-3-fontWeight);
letter-spacing: var(--typography-Title-3-letterSpacing); letter-spacing: var(--typography-Title-3-letterSpacing);
line-height: var(--typography-Title-3-lineHeight); line-height: var(--typography-Title-3-lineHeight);
text-decoration: var(--typography-Title-3-textDecoration); text-decoration: var(--typography-Title-3-textDecoration);
@@ -49,7 +47,6 @@
0.6vw + 19px, 0.6vw + 19px,
var(--typography-Title-4-Desktop-fontSize) var(--typography-Title-4-Desktop-fontSize)
); );
font-weight: var(--typography-Title-4-fontWeight);
letter-spacing: var(--typography-Title-4-letterSpacing); letter-spacing: var(--typography-Title-4-letterSpacing);
line-height: var(--typography-Title-4-lineHeight); line-height: var(--typography-Title-4-lineHeight);
text-decoration: var(--typography-Title-4-textDecoration); text-decoration: var(--typography-Title-4-textDecoration);
@@ -62,7 +59,6 @@
0.3vw + 17px, 0.3vw + 17px,
var(--typography-Title-5-Desktop-fontSize) var(--typography-Title-5-Desktop-fontSize)
); );
font-weight: var(--typography-Title-5-fontWeight);
letter-spacing: var(--typography-Title-5-letterSpacing); letter-spacing: var(--typography-Title-5-letterSpacing);
line-height: var(--typography-Title-5-lineHeight); line-height: var(--typography-Title-5-lineHeight);
text-decoration: var(--typography-Title-5-textDecoration); text-decoration: var(--typography-Title-5-textDecoration);

1
components/TempDesignSystem/Text/Title/variants.ts
View File

@@ -33,6 +33,7 @@ const config = {
color: "burgundy", color: "burgundy",
textAlign: "left", textAlign: "left",
type: "h1", type: "h1",
textTransform: "uppercase",
}, },
} as const } as const

1
i18n/dictionaries/da.json
View File

@@ -101,6 +101,7 @@
"uppercase letter": "stort bogstav", "uppercase letter": "stort bogstav",
"Visiting address": "Besøgsadresse", "Visiting address": "Besøgsadresse",
"Welcome to": "Velkommen til", "Welcome to": "Velkommen til",
"Welcome": "Velkommen",
"Where should you go next?": "Hvor skal du tage hen næste gang?", "Where should you go next?": "Hvor skal du tage hen næste gang?",
"Which room class suits you the best?": "Hvilken rumklasse passer bedst til dig", "Which room class suits you the best?": "Hvilken rumklasse passer bedst til dig",
"Year": "År", "Year": "År",

1
i18n/dictionaries/de.json
View File

@@ -101,6 +101,7 @@
"uppercase letter": "großbuchstabe", "uppercase letter": "großbuchstabe",
"Visiting address": "Besuchsadresse", "Visiting address": "Besuchsadresse",
"Welcome to": "Willkommen zu", "Welcome to": "Willkommen zu",
"Welcome": "Willkommen",
"Where should you go next?": "Wohin soll es als nächstes gehen?", "Where should you go next?": "Wohin soll es als nächstes gehen?",
"Which room class suits you the best?": "Welche Zimmerklasse passt am besten zu Ihnen?", "Which room class suits you the best?": "Welche Zimmerklasse passt am besten zu Ihnen?",
"Year": "Jahr", "Year": "Jahr",

1
i18n/dictionaries/en.json
View File

@@ -100,6 +100,7 @@
"to": "to", "to": "to",
"User information": "User information", "User information": "User information",
"uppercase letter": "uppercase letter", "uppercase letter": "uppercase letter",
"Welcome": "Welcome",
"Visiting address": "Visiting address", "Visiting address": "Visiting address",
"Welcome to": "Welcome to", "Welcome to": "Welcome to",
"Where should you go next?": "Where should you go next?", "Where should you go next?": "Where should you go next?",

1
i18n/dictionaries/fi.json
View File

@@ -101,6 +101,7 @@
"uppercase letter": "iso kirjain", "uppercase letter": "iso kirjain",
"Visiting address": "Käyntiosoite", "Visiting address": "Käyntiosoite",
"Welcome to": "Tervetuloa", "Welcome to": "Tervetuloa",
"Welcome": "Tervetuloa",
"Where should you go next?": "Minne sinun pitäisi mennä seuraavaksi?", "Where should you go next?": "Minne sinun pitäisi mennä seuraavaksi?",
"Which room class suits you the best?": "Mikä huoneluokka sopii sinulle parhaiten?", "Which room class suits you the best?": "Mikä huoneluokka sopii sinulle parhaiten?",
"Year": "Vuosi", "Year": "Vuosi",

1
i18n/dictionaries/no.json
View File

@@ -101,6 +101,7 @@
"uppercase letter": "stor bokstav", "uppercase letter": "stor bokstav",
"Visiting address": "Besøksadresse", "Visiting address": "Besøksadresse",
"Welcome to": "Velkommen til", "Welcome to": "Velkommen til",
"Welcome": "Velkommen",
"Where should you go next?": "Hvor bør du gå videre?", "Where should you go next?": "Hvor bør du gå videre?",
"Which room class suits you the best?": "Hvilken romklasse passer deg best?", "Which room class suits you the best?": "Hvilken romklasse passer deg best?",
"Year": "År", "Year": "År",

1
i18n/dictionaries/sv.json
View File

@@ -100,6 +100,7 @@
"User information": "Användar information", "User information": "Användar information",
"uppercase letter": "stor bokstav", "uppercase letter": "stor bokstav",
"Visiting address": "Besöksadress", "Visiting address": "Besöksadress",
"Welcome": "Välkommen",
"Where should you go next?": "Vart ska du gå härnäst?", "Where should you go next?": "Vart ska du gå härnäst?",
"Which room class suits you the best?": "Vilken rumsklass passar dig bäst?", "Which room class suits you the best?": "Vilken rumsklass passar dig bäst?",
"Year": "År", "Year": "År",