chore: update design system tokens

2024-07-10 07:36:30 +02:00
parent 21f07c584b
commit 7068fb4e15
22 changed files with 116 additions and 22 deletions
--- a/app/[lang]/(live)/(protected)/my-pages/layout.module.css
+++ b/app/[lang]/(live)/(protected)/my-pages/layout.module.css
@@ -1,5 +1,5 @@
 .layout {
-  background-color: var(--Scandic-Brand-Warm-White);
+  background-color: var(--Base-Background-Primary-Normal);
  display: grid;
  font-family: var(--typography-Body-Regular-fontFamily);
  gap: var(--Spacing-x3);
--- a/app/[lang]/(live)/(protected)/my-pages/profile/@communication/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/profile/@communication/page.tsx
@@ -11,7 +11,7 @@ export default async function CommunicationSlot() {
  return (
    <section className={styles.container}>
      <article className={styles.content}>
-        <Subtitle color="black">
+        <Subtitle type="two" color="black">
          {formatMessage({ id: "My communication preferences" })}
        </Subtitle>
        <Body color="black">
--- a/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx
@@ -15,7 +15,7 @@ export default async function CreditCardSlot() {
  return (
    <section className={styles.container}>
      <article className={styles.content}>
-        <Subtitle color="black">
+        <Subtitle type="two" color="black">
          {formatMessage({ id: "My credit cards" })}
        </Subtitle>
        <Body color="black">
--- a/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css
+++ b/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css
@@ -1,5 +1,5 @@
 .layout {
-  background-color: var(--Scandic-Brand-Warm-White);
+  background-color: var(--Base-Background-Primary-Normal);
  display: grid;
  font-family: var(--typography-Body-Regular-fontFamily);
  gap: var(--Spacing-x3);
--- a/app/[lang]/webview/layout.module.css
+++ b/app/[lang]/webview/layout.module.css
@@ -1,5 +1,5 @@
 .layout {
-  background-color: var(--Scandic-Brand-Warm-White);
+  background-color: var(--Base-Background-Primary-Normal);
  font-family: var(--typography-Body-Regular-fontFamily);
  min-height: 100dvh;
 }
--- a/components/Forms/Edit/Profile/index.tsx
+++ b/components/Forms/Edit/Profile/index.tsx
@@ -65,7 +65,7 @@ export default function Form({ user }: EditFormProps) {
      <Header>
        <hgroup>
          <Title as="h4" color="red" level="h1">
-            {formatMessage({ id: "Edit" })}
+            {formatMessage({ id: "Welcome" })}
          </Title>
          <Title as="h4" color="burgundy" level="h2">
            {user.name}
--- a/components/TempDesignSystem/Link/link.module.css
+++ b/components/TempDesignSystem/Link/link.module.css
@@ -98,7 +98,7 @@
 }

 .burgundy {
-  color: var(--Scandic-Brand-Burgundy);
+  color: var(--Base-Text-High-contrast);
 }

 .pale {
--- a/components/TempDesignSystem/LoyaltyCard/index.tsx
+++ b/components/TempDesignSystem/LoyaltyCard/index.tsx
@@ -37,11 +37,7 @@ export default function LoyaltyCard({
      <Title as="h5" level="h3" textAlign="center">
        {heading}
      </Title>
-      {bodyText ? (
-        <Body textAlign="center" color="red">
-          {bodyText}
-        </Body>
-      ) : null}
+      {bodyText ? <Body textAlign="center">{bodyText}</Body> : null}
      <div className={styles.buttonContainer}>
        {link ? (
          <Link
--- a/components/TempDesignSystem/Text/Body/body.module.css
+++ b/components/TempDesignSystem/Text/Body/body.module.css
@@ -10,7 +10,7 @@
 .bold {
  font-family: var(--typography-Body-Bold-fontFamily);
  font-size: var(--typography-Body-Bold-fontSize);
-  font-weight: var(--typography-Body-Bold-fontWeight);
+  font-weight: 500;
  letter-spacing: var(--typography-Body-Bold-letterSpacing);
  line-height: var(--typography-Body-Bold-lineHeight);
  text-decoration: var(--typography-Body-Bold-textDecoration);
@@ -19,7 +19,7 @@
 .regular {
  font-family: var(--typography-Body-Regular-fontFamily);
  font-size: var(--typography-Body-Regular-fontSize);
-  font-weight: var(--typography-Body-Regular-fontWeight);
+  font-weight: 400;
  letter-spacing: var(--typography-Body-Regular-letterSpacing);
  line-height: var(--typography-Body-Regular-lineHeight);
  text-decoration: var(--typography-Body-Regular-textDecoration);
@@ -28,7 +28,7 @@
 .underlined {
  font-family: var(--typography-Body-Underline-fontFamily);
  font-size: var(--typography-Body-Underline-fontSize);
-  font-weight: var(--typography-Body-Underline-fontWeight);
+  font-weight: 500;
  letter-spacing: var(--typography-Body-Underline-letterSpacing);
  line-height: var(--typography-Body-Underline-lineHeight);
  text-decoration: var(--typography-Body-Underline-textDecoration);
--- a/components/TempDesignSystem/Text/Preamble/index.tsx
+++ b/components/TempDesignSystem/Text/Preamble/index.tsx
@@ -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} />
+}
--- a/components/TempDesignSystem/Text/Preamble/preamble.module.css
+++ b/components/TempDesignSystem/Text/Preamble/preamble.module.css
@@ -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;
+}
--- a/components/TempDesignSystem/Text/Preamble/preamble.ts
+++ b/components/TempDesignSystem/Text/Preamble/preamble.ts
@@ -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
+}
--- a/components/TempDesignSystem/Text/Preamble/variants.ts
+++ b/components/TempDesignSystem/Text/Preamble/variants.ts
@@ -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)
--- a/components/TempDesignSystem/Text/Subtitle/subtitle.module.css
+++ b/components/TempDesignSystem/Text/Subtitle/subtitle.module.css
@@ -10,7 +10,7 @@
    0.3vw + 15px,
    var(--typography-Subtitle-1-Desktop-fontSize)
  );
-  font-weight: var(--typography-Subtitle-1-fontWeight);
+  font-weight: 600;
  letter-spacing: var(--typography-Subtitle-1-letterSpacing);
  line-height: var(--typography-Subtitle-1-lineHeight);
 }
@@ -22,7 +22,7 @@
    0.3vw + 15px,
    var(--typography-Subtitle-2-Desktop-fontSize)
  );
-  font-weight: var(--typography-Subtitle-2-fontWeight);
+  font-weight: 600;
  letter-spacing: var(--typography-Subtitle-2-letterSpacing);
  line-height: var(--typography-Subtitle-2-lineHeight);
 }
--- a/components/TempDesignSystem/Text/Title/title.module.css
+++ b/components/TempDesignSystem/Text/Title/title.module.css
@@ -1,6 +1,7 @@
 .heading {
  margin: 0;
  padding: 0;
+  font-weight: 500;
 }

 .h1 {
@@ -10,7 +11,6 @@
    2.6vw + 27px,
    var(--typography-Title-1-Desktop-fontSize)
  );
-  font-weight: var(--typography-Title-1-fontWeight);
  letter-spacing: var(--typography-Title-1-letterSpacing);
  line-height: var(--typography-Title-1-lineHeight);
  text-decoration: var(--typography-Title-1-textDecoration);
@@ -23,7 +23,6 @@
    2vw + 20px,
    var(--typography-Title-2-Desktop-fontSize)
  );
-  font-weight: var(--typography-Title-2-fontWeight);
  letter-spacing: var(--typography-Title-2-letterSpacing);
  line-height: var(--typography-Title-2-lineHeight);
  text-decoration: var(--typography-Title-2-textDecoration);
@@ -36,7 +35,6 @@
    0.6vw + 27px,
    var(--typography-Title-3-Desktop-fontSize)
  );
-  font-weight: var(--typography-Title-3-fontWeight);
  letter-spacing: var(--typography-Title-3-letterSpacing);
  line-height: var(--typography-Title-3-lineHeight);
  text-decoration: var(--typography-Title-3-textDecoration);
@@ -49,7 +47,6 @@
    0.6vw + 19px,
    var(--typography-Title-4-Desktop-fontSize)
  );
-  font-weight: var(--typography-Title-4-fontWeight);
  letter-spacing: var(--typography-Title-4-letterSpacing);
  line-height: var(--typography-Title-4-lineHeight);
  text-decoration: var(--typography-Title-4-textDecoration);
@@ -62,7 +59,6 @@
    0.3vw + 17px,
    var(--typography-Title-5-Desktop-fontSize)
  );
-  font-weight: var(--typography-Title-5-fontWeight);
  letter-spacing: var(--typography-Title-5-letterSpacing);
  line-height: var(--typography-Title-5-lineHeight);
  text-decoration: var(--typography-Title-5-textDecoration);
--- a/components/TempDesignSystem/Text/Title/variants.ts
+++ b/components/TempDesignSystem/Text/Title/variants.ts
@@ -33,6 +33,7 @@ const config = {
    color: "burgundy",
    textAlign: "left",
    type: "h1",
+    textTransform: "uppercase",
  },
 } as const

--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -101,6 +101,7 @@
  "uppercase letter": "stort bogstav",
  "Visiting address": "Besøgsadresse",
  "Welcome to": "Velkommen til",
+  "Welcome": "Velkommen",
  "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",
  "Year": "År",
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -101,6 +101,7 @@
  "uppercase letter": "großbuchstabe",
  "Visiting address": "Besuchsadresse",
  "Welcome to": "Willkommen zu",
+  "Welcome": "Willkommen",
  "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?",
  "Year": "Jahr",
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -100,6 +100,7 @@
  "to": "to",
  "User information": "User information",
  "uppercase letter": "uppercase letter",
+  "Welcome": "Welcome",
  "Visiting address": "Visiting address",
  "Welcome to": "Welcome to",
  "Where should you go next?": "Where should you go next?",
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -101,6 +101,7 @@
  "uppercase letter": "iso kirjain",
  "Visiting address": "Käyntiosoite",
  "Welcome to": "Tervetuloa",
+  "Welcome": "Tervetuloa",
  "Where should you go next?": "Minne sinun pitäisi mennä seuraavaksi?",
  "Which room class suits you the best?": "Mikä huoneluokka sopii sinulle parhaiten?",
  "Year": "Vuosi",
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -101,6 +101,7 @@
  "uppercase letter": "stor bokstav",
  "Visiting address": "Besøksadresse",
  "Welcome to": "Velkommen til",
+  "Welcome": "Velkommen",
  "Where should you go next?": "Hvor bør du gå videre?",
  "Which room class suits you the best?": "Hvilken romklasse passer deg best?",
  "Year": "År",
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -100,6 +100,7 @@
  "User information": "Användar information",
  "uppercase letter": "stor bokstav",
  "Visiting address": "Besöksadress",
+  "Welcome": "Välkommen",
  "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?",
  "Year": "År",