feat(SW-375): new tokens

new asset generation logic

BREAKING CHANGE: New tokens.

packages/design-system/example/components/ContentPage/Header/Header.tsx

@@ -0,0 +1,72 @@
+import { Button } from '@scandic-hotels/design-system/Button'
+import { Chips } from '@scandic-hotels/design-system/Chips'
+import { ChipButton } from '@scandic-hotels/design-system/ChipButton'
+import { ChipLink } from '@scandic-hotels/design-system/ChipLink'
+import { Typography } from '@scandic-hotels/design-system/Typography'
+
+import styles from './header.module.css'
+
+import type { PressEvent } from 'react-aria-components'
+
+export function Header() {
+  const onPress = (e: PressEvent) => alert(e.target.innerHTML)
+  const onClick = (e: React.MouseEvent<HTMLAnchorElement>) =>
+    alert(`Link to: ${e.currentTarget.href}`)
+
+  return (
+    <header className={styles.header}>
+      <Typography variant="Title/lg">
+        <h1 className={styles.title}>Nyhavn</h1>
+      </Typography>
+      <div className={styles.intro}>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p className={styles.introText}>
+            Welcome to Nyhavn, Copenhagen's captivating waterfront district!
+            Explore this vibrant area known for its colorful 17th-century
+            townhouses, historic wooden ships, and lively atmosphere. Nyhavn is
+            the perfect spot for dining, culture, and picturesque views, making
+            it a must-visit for every Copenhagen traveler.
+          </p>
+        </Typography>
+        <span>
+          <Button
+            variant="Tertiary"
+            size="Medium"
+            typography="Body/Paragraph/mdBold"
+          >
+            Explore nearby hotels
+          </Button>
+        </span>
+      </div>
+
+      <div className={styles.chips}>
+        <Chips>
+          <ChipButton onPress={onPress}>Restaurants and bars</ChipButton>
+          <ChipLink onClick={onClick} href="/kristianshavn">
+            Kristianshavn
+          </ChipLink>
+          <ChipButton onPress={onPress}>Tivoli Gardens</ChipButton>
+          <ChipLink onClick={onClick} href="/copenhagen">
+            See all Copenhagen
+          </ChipLink>
+          <ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
+          <ChipLink onClick={onClick} href="/copenhagen">
+            See all Copenhagen
+          </ChipLink>
+          <ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
+          <ChipLink onClick={onClick} href="/copenhagen">
+            See all Copenhagen
+          </ChipLink>
+          <ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
+          <ChipLink onClick={onClick} href="/copenhagen">
+            See all Copenhagen
+          </ChipLink>
+          <ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
+          <ChipLink onClick={onClick} href="/copenhagen">
+            See all Copenhagen
+          </ChipLink>
+        </Chips>
+      </div>
+    </header>
+  )
+}

packages/design-system/example/components/ContentPage/Header/header.module.css

@@ -0,0 +1,31 @@
+.header {
+  background: var(--Surface-Secondary-Default);
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--Space-x4);
+  padding-bottom: var(--Space-x5);
+}
+
+.header > * {
+  width: 1196px; /* TODO: Magic number, revisit */
+  margin: 0 auto;
+}
+
+.title {
+  padding-top: var(--Space-x4);
+  padding-bottom: var(--Space-x3);
+}
+
+.intro {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x3);
+}
+
+.introText {
+  max-width: 792px; /* TODO: Magic number, revisit */
+}
+
+.chips {
+  padding-top: var(--Space-x4);
+}

packages/design-system/example/components/ContentPage/Header/index.tsx

@@ -0,0 +1 @@
+export { Header } from './Header'