feat(SW-375): new tokens

new asset generation logic

BREAKING CHANGE: New tokens.

package.json

@@ -1,19 +1,20 @@
 {
-    "name": "scandic",
-    "packageManager": "yarn@4.6.0",
-    "scripts": {
-        "build": "yarn workspace @scandic-hotels/design-system build && yarn workspace @scandic-hotels/scandic-web ci:build",
-        "lint": "yarn workspace @scandic-hotels/scandic-web lint",
-        "postinstall": "husky"
-    },
-    "workspaces": [
-        "apps/*",
-        "packages/*"
-    ],
-    "devDependencies": {
-        "@types/react": "^18",
-        "@types/react-dom": "^18",
-        "husky": "^9.1.7",
-        "lint-staged": "^15.2.2"
-    }
+  "name": "scandic",
+  "packageManager": "yarn@4.6.0",
+  "scripts": {
+    "build": "yarn workspace @scandic-hotels/design-system build && yarn workspace @scandic-hotels/scandic-web ci:build",
+    "lint": "yarn workspace @scandic-hotels/scandic-web lint",
+    "postinstall": "husky"
+  },
+  "workspaces": [
+    "apps/*",
+    "packages/*"
+  ],
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.2.2",
+    "ts-node": "^10.9.2"
+  }
 }

packages/design-system/.eslintrc.cjs

@@ -1,7 +1,12 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended',
+  ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],

packages/design-system/.gitignore

@@ -24,3 +24,5 @@ dist-ssr
 *.sw?
 
 storybook-static
+
+*storybook.log

packages/design-system/.prettierignore

@@ -7,4 +7,5 @@ dist/
 
 # Files:
 !.vscode/launch.json
-.prettierignore
+.prettierignore
+.gitignore

packages/design-system/.storybook/main.ts

@@ -1,35 +1,21 @@
-import { withoutVitePlugins } from '@storybook/builder-vite'
-
+import { dirname, join } from 'path'
 import type { StorybookConfig } from '@storybook/react-vite'
 
 const config: StorybookConfig = {
   stories: ['../lib/**/*.mdx', '../lib/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  typescript: {
-    check: false,
-    reactDocgen: 'react-docgen-typescript',
-  },
-  staticDirs: ['../public'],
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-onboarding',
-    '@storybook/addon-interactions',
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-themes'),
   ],
   framework: {
-    name: '@storybook/react-vite',
+    name: getAbsolutePath('@storybook/react-vite'),
     options: {},
   },
-  docs: {
-    autodocs: true,
-  },
-  viteFinal: async (config) => {
-    return {
-      ...config,
-      plugins: await withoutVitePlugins(config.plugins, [
-        'vite:lib-inject-css',
-        'vite:dts',
-      ]),
-    }
-  },
 }
 export default config
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')))
+}

packages/design-system/.storybook/manager.js

@@ -1,7 +0,0 @@
-import { addons } from '@storybook/manager-api'
-
-addons.setConfig({
-  sidebar: {
-    collapsedRoots: ['current-web'],
-  },
-})

packages/design-system/.storybook/preview.ts

@@ -1,21 +0,0 @@
-import type { Preview } from '@storybook/react'
-
-import '../lib/style-new.css'
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-    options: {
-      storySort: {
-        order: ['*', 'Current web'],
-      },
-    },
-  },
-}
-
-export default preview

packages/design-system/.storybook/preview.tsx

@@ -0,0 +1,37 @@
+import { withThemeByClassName } from '@storybook/addon-themes'
+
+import type { Preview, ReactRenderer } from '@storybook/react'
+
+import '../lib/style.css'
+import '../lib/fonts.css'
+
+export const themes = {
+  themes: {
+    Scandic: 'scandic',
+    'Scandic Go': 'scandic-go',
+    'Downtown Camper': 'downtown-camper',
+    'Grand Hotel': 'grand-hotel',
+    Haymarket: 'haymarket',
+    'Hotel Norge': 'hotel-norge',
+    Marski: 'marski',
+  },
+  defaultTheme: 'Scandic',
+}
+
+const preview: Preview = {
+  decorators: [withThemeByClassName<ReactRenderer>(themes)],
+  parameters: {
+    docs: {
+      toc: true,
+    },
+    controls: { matchers: { color: /(background|color)$/i, date: /Date$/i } },
+    options: {
+      storySort: {
+        order: ['Introduction', 'Global', 'Components', 'Compositions', '*'],
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default preview

packages/design-system/README.md

@@ -1,30 +1,120 @@
-# React + TypeScript + Vite
+# Scandic Design System
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This repo contains the design system for Scandic Hotels.
 
-Currently, two official plugins are available:
+It is built on Vite.
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+The output is an NPM package.
 
-## Expanding the ESLint configuration
+It is currently not published to any registry. Consumers are free to choose how to consume the distribution.
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+## The stack
 
-- Configure the top-level `parserOptions` property like this:
+### Tech in this repository
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
+- [react-aria-components](https://react-spectrum.adobe.com/react-aria/components.html): Accessible components (set as peer dependency).
+- [Storybook](https://storybook.js.org/): Frontend workshop for building UI components and pages in isolation.
+- [Vite](https://vite.dev/): Build tool
+
+## Usage
+
+Most of the components in this design system are self explanatory, refer to the Storybook for reference and use cases.
+
+However there are some components that benefit from a bit more documentation and these have more documentation attached to their Storybook.
+
+One such notable component is the `Typography` component. Read the documentation in the docs for the components story in Storybook at `lib/components/Typography/Typography.docs.mdx` or read it in the deployed Storybook in a browser. For example: https://design-system-scandic-hotels.netlify.app/?path=/docs/components-typography--docs
+
+## Contributing
+
+- Clone the repository.
+- Do your changes.
+- Build the project.
+- Push the build output to origin.
+
+### Clone the repository
+
+To get started with the project, clone the repository and install the dependencies:
+
+```bash
+git clone git@bitbucket.org:scandic-swap/design-system.git
+cd design-system
+npm install
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+## Main script targets
+
+### Develop
+
+| Command             | Action                                                                                                                         |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `npm run dev`       | Runs the example project through Vite in dev mode. This command will start a local development server that serves `./example`. |
+| `npm run storybook` | Starts the Storybook server and launches into the Storybook UI.                                                                |
+| `npm run lint`      | Lints the codebase using ESLint and TypeScript.                                                                                |
+| `npm run lint:fix`  | Automatically fixes linting issues wherever possible.                                                                          |
+
+### Build
+
+| Command         | Action                                               |
+| --------------- | ---------------------------------------------------- |
+| `npm run build` | Builds the design system distribution into `./dist`. |
+
+## Project Structure
+
+### Overall folders
+
+```
+├── .storybook/        # Storybook scaffolding
+├── dist/              # The build output
+├── example/           # The example project consuming the build output
+├── generate/          # The code that generates the design system tokens output
+├── lib/               # The design system source (tokens, components, etc.)
+├── public/            # Public asset folder
+└── storybook-static/  # Storybook managed internal folder
+```
+
+### Component structure
+
+```
+├── Compositions/                 # A folder with Storybook stories to showcase compositions with other components
+├──── [CompositionX].stories.tsx  #
+├── component.module.css          # The CSS for the component
+├── [Component].stories.tsx       # Storybook stories for the component (exclude compositions)
+├── [Component].tsx               # The main component file
+├── index.tsx                     # Entrypoint for the component exports
+├── types.ts                      # TypeScript typings for the component
+└── variants.ts                   # Class Variance Authority configuration for variants of the component
+```
+
+### Typescript configurations
+
+This project uses two different `tsconfig.json`. One for developing and one for building. The main purpose of the `tsconfig.json` for building is to exclude all the files not needed for the distribution itself.
+
+### Components
+
+Each component of the design system is defined in `lib/components`.
+
+Each component has an index.tsx file that exports the component and its optional subcomponents. Subcomponents are components that are mean to be used togther/nested with the component.
+
+The components that are considered public API from a consumer standpoint must have Storybook stories that showcases and documents their use.
+
+Styling is done with CSS modules.
+
+Variants are implemented with Class Variance Authority.
+
+The typings for each components live in their respective types.ts file inside the component folder.
+
+Each component has a dedicated export declaration in `package.json` to facilitate tree shaking and importing component individually. This allows components that are _not_ client components to remain as such when imported in server components.
+
+> Remember to add an export line to the `package.json` of this package when adding a new components.
+
+### Storybook
+
+Each component should have at least one Storybook story. A default story that showcases the component by itself in its default state. More stories are added to showcase other variants or usages of the component.
+
+#### Compositions
+
+Stories that involve other non-related components are compositions. These should be placed in the `Compositions/` folder where the composition has the best chance of discoverability, typically inside the component folder of the outermost component of the composition. Exporting the same composition in multiple places can be good for discoverability.
+
+### Icons
+
+Still a work in progress.

packages/design-system/example/CurrentWeb/index.tsx

@@ -1,12 +0,0 @@
-import { Button } from '../../dist/current'
-
-import '../../dist/assets/style-current.css'
-
-export default function CurrentWeb() {
-  return (
-    <div>
-      <h3>Current Web components:</h3>
-      <Button>Press me</Button>
-    </div>
-  )
-}

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'

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

@@ -0,0 +1,9 @@
+import styles from './hero.module.css'
+
+export function Hero() {
+  return (
+    <div className={styles.hero}>
+      <img className={styles.image} src="/img/img1.jpg" alt="Nyhavn" />
+    </div>
+  )
+}

packages/design-system/example/components/ContentPage/Hero/hero.module.css

@@ -0,0 +1,11 @@
+.hero {
+  padding: var(--Space-x4) 0;
+}
+
+.image {
+  border-radius: var(--Corner-radius-xl);
+  display: block;
+  width: 100%;
+  height: 480px; /* TODO: Magic number, revisit */
+  object-fit: cover;
+}

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

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

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

@@ -0,0 +1,17 @@
+import { Hero } from '../Hero'
+import { RichTextEditorContent } from '../RichTextEditorContent'
+import { Sidebar } from '../Sidebar'
+
+import styles from './main.module.css'
+
+export function Main() {
+  return (
+    <main className={styles.main}>
+      <Hero />
+      <div className={styles.content}>
+        <RichTextEditorContent />
+        <Sidebar />
+      </div>
+    </main>
+  )
+}

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

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

packages/design-system/example/components/ContentPage/Main/main.module.css

@@ -0,0 +1,18 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--Space-x4);
+  padding-bottom: var(--Space-x8);
+}
+
+.main > * {
+  width: 1196px; /* TODO: Magic number, revisit */
+  margin: 0 auto;
+}
+
+.content {
+  padding-top: var(--Space-x4);
+  display: grid;
+  grid-template-columns: 792px 1fr; /* TODO: Magic number, revisit */
+  gap: var(--Space-x8);
+}

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

@@ -0,0 +1,71 @@
+import { Typography } from '@scandic-hotels/design-system/Typography'
+
+import styles from './ricth-text-editor-content.module.css'
+
+export function RichTextEditorContent() {
+  return (
+    <div className={styles.container}>
+      <Typography variant="Title/md">
+        <h2>The new harbor in Copenhagen</h2>
+      </Typography>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p>
+          The old harbour district was excavated in the late 17th century and
+          since the harbour would serve as a supplement to the existing harbour,
+          it was given the name The New Harbour (Den Nye Havn later became
+          Nyhavn). Ships from around the world arrived here, and Nyhavn
+          therefore became a mecca for traders and craftsmen.
+        </p>
+      </Typography>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p>
+          Today, the maritime life from the 17th century is long gone although
+          you can still find old tattoo shops and pubs, reminiscent of days gone
+          by.
+        </p>
+      </Typography>
+      <Typography variant="Title/Subtitle/lg">
+        <h3>The buildings in Nyhavn</h3>
+      </Typography>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p>
+          The beautiful old buildings in Nyhavn are made up of civic buildings
+          and warehouses from the 17th and 18th centuries. Painted in beautiful
+          colours they are the subject of many postcards and holiday photos. The
+          oldest building in Nyhavn is No. 9 dating from 1681. It has not
+          undergone any renovation or extensions and stands as it did when it
+          was built. The houses in Nyhavn are still residences and in most of
+          them you'll find cafes, bars and restaurants.
+        </p>
+      </Typography>
+      <img src="/img/img2.jpg" alt="Nyhavn" />
+      <Typography variant="Title/Subtitle/lg">
+        <h3>Hans Christian Andersen's Nyhavn</h3>
+      </Typography>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p>
+          Hans Christian Andersen, the famed Danish storyteller, spent many
+          years of his life in Nyhavn, drawing inspiration from its lively
+          atmosphere and picturesque setting. Andersen lived in several houses
+          along the waterfront, notably at numbers 20, 67, and 18, where he
+          penned some of his most famous fairy tales. Nyhavn's vibrant mix of
+          sailors, bustling cafes, and the eclectic crowd fueled his
+          imagination, contributing to the creation of timeless stories that
+          continue to enchant readers worldwide.
+        </p>
+      </Typography>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p>
+          Today, Nyhavn preserves the memory of Andersen with plaques marking
+          his residences and a statue nearby, inviting visitors to walk in the
+          footsteps of the literary giant. The area remains as colorful and
+          spirited as it was during Andersen's time, reflecting the essence of
+          his tales in its cobbled streets and bright facades. Walking through
+          Nyhavn, one can almost hear the echoes of his stories, woven into the
+          fabric of the place, making it a pilgrimage site for lovers of
+          literature and history alike.
+        </p>
+      </Typography>
+    </div>
+  )
+}

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

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

packages/design-system/example/components/ContentPage/RichTextEditorContent/ricth-text-editor-content.module.css

@@ -0,0 +1,21 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x15);
+}
+
+.container h2 + p {
+  padding-top: var(--Space-x05);
+}
+
+.container p + h2,
+.container p + h3,
+.container p + h4,
+.container p + h5 {
+  padding-top: var(--Space-x15);
+}
+
+.container img {
+  padding: var(--Space-x15) 0;
+  border-radius: var(--Corner-radius-md);
+}

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

@@ -0,0 +1,3 @@
+export function Sidebar() {
+  return <div>Sidebar</div>
+}

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

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

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

@@ -0,0 +1,11 @@
+import { Main } from './Main'
+import { Header } from './Header'
+
+export function ContentPage() {
+  return (
+    <>
+      <Header />
+      <Main />
+    </>
+  )
+}

packages/design-system/example/components/HotelPage/Hero/Hero.tsx

@@ -0,0 +1,18 @@
+import { Button } from '@scandic-hotels/design-system/Button'
+
+import styles from './hero.module.css'
+
+export function Hero() {
+  return (
+    <div className={styles.hero}>
+      <img
+        className={styles.image}
+        src="/img/Hotelpage_mobile/Scandic_Couple_Friends_Lobby 6.png"
+        alt=""
+      />
+      <Button className={styles.button} typography="Body/Paragraph/mdBold">
+        See all photos
+      </Button>
+    </div>
+  )
+}

packages/design-system/example/components/HotelPage/Hero/hero.module.css

@@ -0,0 +1,17 @@
+.hero {
+  position: relative;
+}
+
+.image {
+  border-radius: var(--Corner-radius-md);
+  display: block;
+  width: 100%;
+  height: 270px; /* TODO: Magic number, revisit */
+  object-fit: cover;
+}
+
+.button {
+  position: absolute;
+  bottom: 16.6px; /* TODO: Magic number, revisit */
+  right: 15px; /* TODO: Magic number, revisit */
+}

packages/design-system/example/components/HotelPage/Hero/index.tsx

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

packages/design-system/example/components/HotelPage/HotelPage.tsx

@@ -0,0 +1,39 @@
+import { Button } from '@scandic-hotels/design-system/Button'
+import { Typography } from '@scandic-hotels/design-system/Typography'
+
+import { Hero } from './Hero'
+
+import styles from './hotel-page.module.css'
+
+export function HotelPage() {
+  return (
+    <div className={styles.page}>
+      <Hero />
+      <div className={styles.intro}>
+        <Typography variant="Title/lg">
+          <h1>Scandic Helsinki Hub</h1>
+        </Typography>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>Annankatu 18, Helsinki (0km to city centre)</p>
+        </Typography>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <a href="#">4.1 (95 reviews on tripadvisor)</a>
+        </Typography>
+      </div>
+      <div className={styles.preamble}>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>
+            Modern urban hotel in a impressive 1920s printing house next to the
+            Old Church Park in Helsinki city centre. Loft-style rooms, an
+            inviting restaurant area and inspiring setting for a relaxed stay.
+          </p>
+        </Typography>
+        <span>
+          <Button variant="Text" typography="Body/Paragraph/mdBold">
+            Read more about the hotel
+          </Button>
+        </span>
+      </div>
+    </div>
+  )
+}

packages/design-system/example/components/HotelPage/hotel-page.module.css

@@ -0,0 +1,18 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x3);
+  padding: var(--Space-x3) var(--Space-x2);
+}
+
+.intro {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+}
+
+.preamble {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x05);
+}

packages/design-system/example/components/HotelPage/index.tsx

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

packages/design-system/example/components/Main.tsx

@@ -0,0 +1,54 @@
+import { useState } from 'react'
+
+import { Typography } from '@scandic-hotels/design-system/Typography'
+
+import { ThemeSwitcher } from './ThemeSwitcher'
+import { ContentPage } from './ContentPage'
+
+import styles from './main.module.css'
+import { HotelPage } from './HotelPage'
+
+export function Main() {
+  const [theme, setTheme] = useState('scandic')
+
+  const pathname = window.location.pathname
+
+  return (
+    <>
+      <div className={styles.wrap}>
+        <ThemeSwitcher
+          defaultSelectedKey={theme}
+          onSelectionChange={(key) => {
+            setTheme(key.toString())
+          }}
+        />
+        <nav>
+          <ul className={styles.nav}>
+            <li>
+              <a href="/content-page">Content page</a>
+            </li>
+            <li>
+              <a href="/hotel-page">Hotel page</a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+
+      <div className={[styles.page, theme].join(' ')}>
+        {/* poor mans routing */}
+        {pathname === '/content-page' && <ContentPage />}
+        {pathname === '/hotel-page' && <HotelPage />}
+        {pathname === '/' && (
+          <>
+            <Typography variant="Title/lg">
+              <h1>Examples</h1>
+            </Typography>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <p>Select a page</p>
+            </Typography>
+          </>
+        )}
+      </div>
+    </>
+  )
+}

packages/design-system/example/components/ThemeSwitcher.tsx

@@ -0,0 +1,40 @@
+import { ComponentPropsWithoutRef } from 'react'
+import {
+  Button,
+  Label,
+  ListBox,
+  ListBoxItem,
+  Popover,
+  Select,
+  SelectValue,
+} from 'react-aria-components'
+
+import { themes } from '../../.storybook/preview'
+
+type ThemeSwitcherProps = Pick<
+  ComponentPropsWithoutRef<typeof Select>,
+  'defaultSelectedKey' | 'onSelectionChange'
+>
+
+export function ThemeSwitcher(props: ThemeSwitcherProps) {
+  return (
+    <Select {...props}>
+      <Label>Theme: </Label>
+      <Button>
+        <SelectValue />
+        <span aria-hidden="true">▼</span>
+      </Button>
+      <Popover style={{ border: 'solid 1px #000', background: '#fff' }}>
+        <ListBox>
+          {Array.from(Object.entries(themes.themes)).map(([label, key]) => {
+            return (
+              <ListBoxItem key={key} id={key} style={{ padding: '0.5em' }}>
+                {label}
+              </ListBoxItem>
+            )
+          })}
+        </ListBox>
+      </Popover>
+    </Select>
+  )
+}

packages/design-system/example/components/main.module.css

@@ -0,0 +1,17 @@
+.page {
+  background-color: var(--Background-Primary);
+  min-height: 100vh;
+}
+
+.wrap {
+  padding: 1em;
+  display: flex;
+  justify-content: center;
+}
+
+.nav {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  gap: 1em;
+}

packages/design-system/example/index.html

@@ -4,9 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
+    <style>
+      body {
+        font-family: 'fira sans', sans-serif;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/example/main.tsx"></script>
+    <script type="module" src="index.tsx"></script>
   </body>
 </html>

packages/design-system/example/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+import '@scandic-hotels/design-system/style.css'
+import '@scandic-hotels/design-system/fonts.css'
+
+import { Main } from './components/Main'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <Main />
+  </React.StrictMode>
+)

packages/design-system/example/main.module.css

@@ -1,3 +0,0 @@
-.mainCard {
-  background: blue;
-}

packages/design-system/example/main.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-
-import '../dist/assets/style-new.css'
-
-import CurrentWeb from './CurrentWeb'
-import { Card } from '../'
-
-import styles from './main.module.css'
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <Card className={styles.mainCard} intent={'border'} />
-    <CurrentWeb />
-  </React.StrictMode>
-)

packages/design-system/example/vite-env.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="vite/client" />
-/// <reference types="vitest" />

packages/design-system/example/vite.config.ts

@@ -0,0 +1,15 @@
+/// <reference types="vitest" />
+
+import { resolve } from 'node:path'
+
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  publicDir: resolve(__dirname, '../public'),
+  server: {
+    open: './index.html',
+  },
+})

packages/design-system/generate/generate.ts

@@ -0,0 +1,379 @@
+import fs from 'node:fs'
+import { colord, extend } from 'colord'
+import mixPlugin from 'colord/plugins/mix'
+
+import json from './variables.json' assert { type: 'json' }
+import {
+  FALLBACK_THEME,
+  getThemeForToken,
+  ignoreStyles,
+  kebabify,
+} from './utils'
+
+extend([mixPlugin])
+
+type TokenName = string
+type TokenValue = { alias?: string; resolved: string | number }
+type ThemeTokenValues = Map<TokenName, TokenValue>
+type ThemeKey = string
+
+// Holds a lookup table of all the themes (signature hotels, etc.)
+const themes = new Map<ThemeKey, ThemeTokenValues>()
+
+// Set the fallback theme that holds all properties that are used by all themes
+themes.set(FALLBACK_THEME, new Map())
+
+// Collect all real themes
+json.collections
+  .find((collection) => {
+    return collection.name === 'Color Theming'
+  })
+  ?.modes.forEach((mode) => {
+    themes.set(mode.name, new Map())
+  })
+
+// Some tokens aliases values that have a responsive nature.
+// The responsiveness cannot be encoded into this distribution as we do not
+// distribute CSS selectors, only CSS properties and JSON objects.
+// We mark these properties with a prefix of "Impl-" in order to convey that
+// their responsiveness must be implemented in their target environment.
+// This also means that we must revisit this in order to support React Native.
+const responsiveTokens = new Set()
+
+// Collect responsive tokens
+json.collections
+  .find((collection) => collection.name === 'Responsive')
+  ?.modes.forEach((mode) => {
+    mode.variables.forEach((variable) => {
+      responsiveTokens.add(variable.name)
+    })
+  })
+
+// Collect non-alias tokens
+json.collections.forEach((collection) => {
+  collection.modes.filter(ignoreStyles).forEach((mode) => {
+    mode.variables.forEach((variable) => {
+      if (!variable.isAlias) {
+        let token = variable.name
+        let value = variable.value
+
+        const tokenTheme = getThemeForToken(token, mode, themes)
+
+        switch (variable.type) {
+          case 'boolean':
+            if (typeof variable.value === 'boolean') {
+              // Handle text transform UPPERCASE
+              if (/upper(\s+)?case|text transform/i.test(variable.name)) {
+                token = variable.name.replace(
+                  /upper(\s+)?case|text transform/i,
+                  'Text-Transform'
+                )
+                value = variable.value ? 'uppercase' : 'unset'
+              }
+            } else {
+              throw new Error(
+                `Bad variable value input type. Expected 'boolean' got '${variable.type}'`
+              )
+            }
+            break
+          case 'number':
+            if (typeof variable.value === 'number') {
+              // Only use two decimals for all numbers
+              value = Number(variable.value.toFixed(2))
+            } else {
+              throw new Error(
+                `Bad variable value input type. Expected 'number' got '${variable.type}'`
+              )
+            }
+            break
+        }
+
+        if (typeof value === 'string' || typeof value === 'number') {
+          const theme = themes.get(tokenTheme)
+          if (theme) {
+            theme.set(token, {
+              // primitives will not have aliases
+              resolved: value,
+            })
+          }
+        } else {
+          throw new Error(
+            `Unsupported value type: ${typeof value} (${token}: ${value})`
+          )
+        }
+      }
+    })
+  })
+})
+
+// Collect alias tokens
+json.collections.forEach((collection) => {
+  collection.modes.filter(ignoreStyles).forEach((mode) => {
+    mode.variables.forEach((variable) => {
+      if (variable.isAlias) {
+        const token = variable.name
+        let value = variable.value
+
+        const tokenTheme = getThemeForToken(token, mode, themes)
+
+        switch (variable.type) {
+          case 'color':
+          case 'string':
+          case 'number':
+            // Some values are defined as objects, so we need to dig out the real value
+            if (typeof value === 'object' && 'name' in value) {
+              value = value.name
+            }
+
+            // Some values are alises to tokens that have a responsive nature.
+            // TODO: Revisit for RN support
+            if (responsiveTokens.has(value)) {
+              value = `Impl-${value}`
+            }
+
+            if (typeof value === 'string') {
+              const theme = themes.get(tokenTheme)
+              if (theme) {
+                theme.set(token, {
+                  // We can only resolve aliases after we have collected all
+                  // primitives and aliases.
+                  resolved: '',
+                  alias: value,
+                })
+              }
+            }
+            break
+          default:
+            console.warn(
+              `Unsupported variable type: ${variable.type} (${variable.name}: ${variable.value})`
+            )
+        }
+      }
+    })
+  })
+})
+
+// Collect effects tokens
+json.collections.forEach((collection) => {
+  collection.modes.forEach((mode) => {
+    mode.variables.forEach((variable) => {
+      if (variable.type === 'effect') {
+        if (typeof variable.value === 'object' && 'effects' in variable.value) {
+          if (variable.value.effects.length > 1) {
+            console.warn(
+              `Unsupported effect declaration with multiple effects.`,
+              variable.value.effects
+            )
+          }
+          // We only support one effect declaration per variable
+          const effect = variable.value.effects[0]
+          switch (effect.type) {
+            case 'DROP_SHADOW': {
+              const { r, g, b, a } = effect.color
+              const { x, y } = effect.offset
+              const value = `${x} ${y} ${effect.radius} ${effect.spread} rgba(${r}, ${g}, ${b}, ${a})`
+              const token = `BoxShadow-${variable.name}`
+
+              const theme = themes.get(FALLBACK_THEME)
+              if (theme) {
+                theme.set(token, {
+                  // primitives will not have aliases
+                  resolved: value,
+                })
+              }
+              break
+            }
+          }
+        }
+      }
+    })
+  })
+})
+
+// Resolve all aliases to primitives
+themes.forEach((themeTokenValues) => {
+  themeTokenValues.forEach((value, token) => {
+    // Default the resolved value to the original value. Meaning if no value
+    // could be resolved the token value does not change.
+    let resolveValue = value
+
+    // For each loop the while loop checks if the resolved value is an alias
+    // without a resolved value. If so it continues to resolve the value until a
+    // primitive value is found.
+    while (resolveValue.alias && !resolveValue.resolved) {
+      // Used for breaking the while loop. The while loop continues to
+      // recursively resolve alias that have aliases as their value.
+      // If we have loop through all the themes and not found any primitive
+      // value, then we stop looking by breaking the while loop.
+      let found = false
+
+      Array.from(themes).some(([, innerTheme]) => {
+        return Array.from(innerTheme).some(([innerToken, innerValue]) => {
+          if (innerToken === value.alias && innerValue.resolved) {
+            resolveValue = { ...value, resolved: innerValue.resolved }
+            found = true
+            return true
+          }
+        })
+      })
+
+      // We have search through all the themes and nothing matched, stop looking
+      if (!found) {
+        break
+      }
+    }
+
+    // Update the token value with the result of the above.
+    // Either nothing matches and the original is set, meaning nothing changed.
+    // Or we did get a match and the new value is set.
+    themeTokenValues.set(token, resolveValue)
+  })
+})
+
+// Process hover alpha colors
+// All */Hover* styles will blend with */Default
+themes.forEach((themeTokenValue) => {
+  themeTokenValue.forEach((value, token) => {
+    if (token.toLowerCase().indexOf('hover') >= 0) {
+      const hoverValue = value.resolved
+
+      if (typeof hoverValue === 'string') {
+        if (hoverValue.startsWith('#') && hoverValue.length === 9) {
+          // The color that the hover color with alpha mixes with.
+          const baseToken = token
+            .split('/')
+            .map((tokenPart) => {
+              if (tokenPart.toLowerCase().indexOf('hover') >= 0) {
+                return 'Default'
+              }
+              return tokenPart
+            })
+            .join('/')
+
+          const baseValue =
+            themeTokenValue.get(baseToken) ??
+            themes.get(FALLBACK_THEME)?.get(baseToken)
+          if (baseValue) {
+            if (typeof baseValue.resolved === 'string' && baseValue.resolved) {
+              const baseColor = colord(baseValue.resolved)
+              const hoverColor = colord(hoverValue)
+
+              if (baseColor.alpha() > 0 && hoverColor.alpha() > 0) {
+                const computedHoverValue = baseColor
+                  .mix(hoverColor.alpha(1), hoverColor.alpha())
+                  .toHex()
+
+                themeTokenValue.set(token, {
+                  // no alias for the computed hover color
+                  resolved: computedHoverValue,
+                })
+              }
+            } else {
+              throw new Error(
+                `Base token ${baseToken} is unresolved: ${baseValue}`
+              )
+            }
+          } else {
+            throw new Error(
+              `Unable to find base token (${baseToken}) for hover token ${token}`
+            )
+          }
+        }
+      }
+    }
+  })
+})
+
+// Prepare for output
+const variablesJsOutput = [
+  '/* This file is generated, do not edit manually! */',
+]
+themes.forEach((themeTokenValues, themeKey) => {
+  const cssContentPrimitives: string[] = []
+  const cssContentAliases: string[] = []
+
+  themeTokenValues.forEach((value, token) => {
+    const outputToken = kebabify(token)
+    let outputValue = value.alias ? value.alias : value.resolved
+
+    if (value.alias) {
+      cssContentAliases.push(
+        `  --${outputToken}: var(--${kebabify(outputValue.toString())});`
+      )
+    } else {
+      if (typeof outputValue === 'string') {
+        // Check for properties that need quotes
+        if (/font(-| )family/gi.test(token)) {
+          outputValue = `"${outputValue}"`
+        }
+      } else if (typeof outputValue === 'number') {
+        // font-weight is unitless
+        if (!/font(-| )weight/gi.test(token)) {
+          outputValue = `${outputValue}px`
+        }
+      } else {
+        throw new Error(
+          `Unsupported value type: ${typeof value} (${token}: ${value})`
+        )
+      }
+
+      cssContentPrimitives.push(`  --${outputToken}: ${outputValue};`)
+    }
+  })
+
+  const filename = kebabify(themeKey).toLowerCase()
+
+  const cssOutput = [
+    '/* This file is generated, do not edit manually! */',
+    // The base styles target the :root.
+    // All themes require the use of their scoping classname to be used.
+    themeKey === FALLBACK_THEME ? ':root {' : `.${filename} {`,
+    '  /* Values */',
+    ...cssContentPrimitives.sort(),
+    '',
+    '  /* Aliases */',
+    ...cssContentAliases.sort(),
+    '}',
+    '', // New line at end of file
+  ]
+
+  fs.writeFileSync(`../lib/styles/${filename}.css`, cssOutput.join('\n'), {
+    encoding: 'utf-8',
+  })
+
+  const resolvedJsOutput = [
+    '/* This file is generated, do not edit manually! */',
+    `export const theme = ${JSON.stringify(
+      Array.from(themeTokenValues).reduce((acc, [token, value]) => {
+        if (value.resolved) {
+          acc[token] = value.resolved
+        }
+        return acc
+      }, {}),
+      null,
+      2
+    )}`,
+  ]
+  fs.writeFileSync(
+    `../lib/styles/${filename}.js`,
+    resolvedJsOutput.join('\n'),
+    {
+      encoding: 'utf-8',
+    }
+  )
+
+  // This output is only meant for the `Variables` component.
+  // It is mainly used for the Storybook to show all the variables.
+  variablesJsOutput.push(
+    `export const ${themeKey
+      .split(' ')
+      .map((v, i) => (i === 0 ? v.toLowerCase() : v))
+      .join(
+        ''
+      )} = ${JSON.stringify(Object.fromEntries(themeTokenValues.entries()))} as const`
+  )
+})
+
+fs.writeFileSync(`../lib/tokens/index.ts`, variablesJsOutput.join('\n'), {
+  encoding: 'utf-8',
+})

packages/design-system/generate/utils.ts

@@ -0,0 +1,47 @@
+export function kebabify(str: string) {
+  return str.replace(/\/|\s/g, '-').replace(/\(|\)/g, '')
+}
+
+export function ignoreStyles(mode: { name: string }) {
+  if (mode.name === 'Style') {
+    // Ignore Figma Styles, we only want to process variables.
+    // But the exported variables.json includes Figma Styles too.
+    return false
+  }
+  return true
+}
+
+// Some tokens are the same for all themes. Group them into this theme.
+export const FALLBACK_THEME = 'base'
+
+// The variables exported from Figma are not grouped by theme.
+// We used this function to help us group by theme.
+// Returns the theme the given token belongs to by matching theme names inside
+// the token name.
+export function getThemeForToken(
+  token: string | { name: string },
+  mode: { name: string },
+  themes: Map<string, unknown>
+) {
+  // If the given value is an object and has a name property, use that as comparison value.
+  const compare = typeof token === 'string' ? token : token.name
+  const theme = Array.from(themes.keys()).find((theme) => {
+    // Match against "theme/", use that if it matches
+    if (compare.indexOf(theme + '/') >= 0) {
+      return theme
+    }
+
+    // Match against mode, use that if it matches
+    if (mode.name === theme) {
+      return theme
+    }
+  })
+
+  // If a theme was found, use that
+  if (theme) {
+    return theme
+  }
+
+  // If no theme was found, return the fallback
+  return FALLBACK_THEME
+}

packages/design-system/lib/components/Button/Button.stories.tsx

@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { fn } from '@storybook/test'
+
+import { Button } from './Button'
+import { config as buttonConfig } from './variants'
+import { config as typographyConfig } from '../Typography/variants'
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {
+    onPress: {
+      table: {
+        disable: true,
+      },
+    },
+    typography: {
+      control: 'select',
+      options: Object.keys(typographyConfig.variants.variant),
+    },
+    variant: {
+      control: 'select',
+      options: Object.keys(buttonConfig.variants.variant),
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Button>
+
+export const PrimaryDefault: Story = {
+  args: {
+    onPress: fn(),
+    children: 'Primary button',
+    typography: 'Body/Paragraph/mdBold',
+    variant: 'Primary',
+  },
+}
+
+export const PrimaryLarge: Story = {
+  args: {
+    ...PrimaryDefault.args,
+    size: 'Large',
+  },
+}
+
+export const PrimaryMedium: Story = {
+  args: {
+    ...PrimaryDefault.args,
+    size: 'Medium',
+  },
+}
+
+export const PrimarySmall: Story = {
+  args: {
+    ...PrimaryDefault.args,
+    size: 'Small',
+  },
+}
+
+export const SecondaryDefault: Story = {
+  args: {
+    onPress: fn(),
+    children: 'Secondary button',
+    typography: 'Body/Paragraph/mdBold',
+    variant: 'Secondary',
+  },
+}
+
+export const SecondaryLarge: Story = {
+  args: {
+    ...SecondaryDefault.args,
+    size: 'Large',
+  },
+}
+
+export const SecondaryMedium: Story = {
+  args: {
+    ...SecondaryDefault.args,
+    size: 'Medium',
+  },
+}
+
+export const SecondarySmall: Story = {
+  args: {
+    ...SecondaryDefault.args,
+    size: 'Small',
+  },
+}
+
+export const TertiaryDefault: Story = {
+  args: {
+    onPress: fn(),
+    children: 'Tertiary button',
+    typography: 'Body/Paragraph/mdBold',
+    variant: 'Tertiary',
+  },
+}
+
+export const TertiaryLarge: Story = {
+  args: {
+    ...TertiaryDefault.args,
+    size: 'Large',
+  },
+}
+
+export const TertiaryMedium: Story = {
+  args: {
+    ...TertiaryDefault.args,
+    size: 'Medium',
+  },
+}
+
+export const TertiarySmall: Story = {
+  args: {
+    ...TertiaryDefault.args,
+    size: 'Small',
+  },
+}
+
+export const TextDefault: Story = {
+  args: {
+    onPress: fn(),
+    children: 'Text button',
+    typography: 'Body/Paragraph/mdBold',
+    variant: 'Text',
+  },
+}
+
+export const TextLarge: Story = {
+  args: {
+    ...TextDefault.args,
+    size: 'Large',
+  },
+}
+
+export const TextMedium: Story = {
+  args: {
+    ...TextDefault.args,
+    size: 'Medium',
+  },
+}
+
+export const TextSmall: Story = {
+  args: {
+    ...TextDefault.args,
+    size: 'Small',
+  },
+}

packages/design-system/lib/components/Button/Button.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { Button as ButtonRAC } from 'react-aria-components'
+
+import { variants } from './variants'
+
+import type { ButtonProps } from './types'
+
+export function Button({
+  variant,
+  color,
+  size,
+
+  typography,
+  className,
+
+  ...props
+}: ButtonProps) {
+  const classNames = variants({
+    variant,
+    color,
+    size,
+
+    typography,
+    className,
+  })
+
+  return <ButtonRAC {...props} className={classNames} />
+}

packages/design-system/lib/components/Button/button.module.css

@@ -0,0 +1,80 @@
+.button {
+  border-radius: var(--Corner-radius-rounded);
+  border-width: 2px;
+  border-style: solid;
+  cursor: pointer;
+}
+
+.size-large {
+  padding: var(--Space-x2) var(--Space-x3);
+}
+
+.size-medium {
+  padding: var(--Space-x15) var(--Space-x2);
+}
+
+.size-small {
+  padding: 10px var(--Space-x2);
+}
+
+.variant-primary {
+  background-color: var(--Component-Button-Brand-Primary-Default);
+  border-color: var(--Component-Button-Brand-Primary-Border-Default);
+  color: var(--Component-Button-Brand-Primary-On-fill-Default);
+}
+
+.variant-primary:hover {
+  background-color: var(--Component-Button-Brand-Primary-Hover);
+  border-color: var(--Component-Button-Brand-Primary-Border-Hover);
+  color: var(--Component-Button-Brand-Primary-On-fill-Hover);
+}
+
+.variant-primary:disabled {
+  background-color: var(--Component-Button-Brand-Primary-Disabled);
+  border-color: var(--Component-Button-Brand-Primary-Border-Disabled);
+  color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
+}
+
+.variant-secondary {
+  background-color: var(--Component-Button-Brand-Secondary-Default);
+  border-color: var(--Component-Button-Brand-Secondary-Border-Default);
+  color: var(--Component-Button-Brand-Secondary-On-fill-Default);
+}
+
+.variant-secondary:hover {
+  background-color: var(--Component-Button-Brand-Secondary-Hover);
+  border-color: var(--Component-Button-Brand-Secondary-Border-Hover);
+  color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
+}
+
+.variant-secondary:disabled {
+  background-color: var(--Component-Button-Brand-Secondary-Disabled);
+  border-color: var(--Component-Button-Brand-Secondary-Border-Disabled);
+  color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
+}
+
+.variant-tertiary {
+  background-color: var(--Component-Button-Brand-Tertiary-Default);
+  border-color: var(--Component-Button-Brand-Tertiary-Border-Default);
+  color: var(--Component-Button-Brand-Tertiary-On-fill-Default);
+}
+
+.variant-tertiary:hover {
+  background-color: var(--Component-Button-Brand-Tertiary-Hover);
+  border-color: var(--Component-Button-Brand-Tertiary-Border-Hover);
+  color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
+}
+
+.variant-tertiary:disabled {
+  background-color: var(--Component-Button-Brand-Tertiary-Disabled);
+  border-color: var(--Component-Button-Brand-Tertiary-Border-Disabled);
+  color: var(--Component-Button-Brand-Tertiary-On-fill-Disabled);
+}
+
+.variant-text {
+  background-color: transparent;
+  border-color: transparent;
+  /* TODO: Missing text variant tokens for button */
+  color: var(--Scandic-Red-100);
+  padding: var(--Space-x15) 0;
+}

packages/design-system/lib/components/Button/types.ts

@@ -0,0 +1,10 @@
+import { Button } from 'react-aria-components'
+
+import type { VariantProps } from 'class-variance-authority'
+import type { ComponentProps } from 'react'
+
+import type { variants } from './variants'
+
+export interface ButtonProps
+  extends ComponentProps<typeof Button>,
+    VariantProps<typeof variants> {}

packages/design-system/lib/components/Button/variants.ts

@@ -0,0 +1,32 @@
+import { cva } from 'class-variance-authority'
+
+import { withTypography } from '../Typography/variants'
+
+import styles from './button.module.css'
+
+export const config = {
+  variants: {
+    variant: {
+      Primary: styles['variant-primary'],
+      Secondary: styles['variant-secondary'],
+      Tertiary: styles['variant-tertiary'],
+      Text: styles['variant-text'],
+    },
+    color: {
+      Primary: styles['color-primary'],
+      Inverted: styles['color-inverted'],
+    },
+    size: {
+      Small: styles['size-small'],
+      Medium: styles['size-medium'],
+      Large: styles['size-large'],
+    },
+  },
+  defaultVariants: {
+    variant: 'Primary',
+    color: 'Primary',
+    size: 'Large',
+  },
+} as const
+
+export const variants = cva(styles.button, withTypography(config))

packages/design-system/lib/components/Card/Card.stories.ts

@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { Card } from './Card.tsx'
-
-const meta = {
-  title: 'Components/Layout/Card',
-  component: Card,
-  argTypes: {
-    intent: {
-      control: 'select',
-      options: ['basic', 'border'],
-    },
-  },
-  args: {
-    intent: 'basic',
-  },
-} satisfies Meta<typeof Card>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}
-
-export const WithBorder: Story = {
-  args: {
-    intent: 'border',
-  },
-}

packages/design-system/lib/components/Card/Card.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Card } from './Card.tsx'
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Card',
+  component: Card,
+}
+
+export default meta
+
+type Story = StoryObj<typeof Card>
+
+export const Default: Story = {
+  args: {
+    as: 'Default',
+  },
+}
+
+export const Featured: Story = {
+  args: {
+    ...Default.args,
+    as: 'Featured',
+  },
+}

packages/design-system/lib/components/Card/Card.tsx

@@ -1,26 +1,11 @@
-import styles from './card.module.css'
+import { variants } from './variants'
 
-import { cva, type VariantProps } from 'class-variance-authority'
+import type { CardProps } from './types'
 
-const card = cva(styles.card, {
-  variants: {
-    intent: {
-      basic: styles.basic,
-      border: styles.border,
-    },
-  },
-  // compoundVariants: [
-  //   { intent: "primary", size: "medium", className: styles.primaryMedium },
-  // ],
-  defaultVariants: {
-    intent: 'basic',
-  },
-})
-
-export interface CardProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof card> {}
-
-export function Card({ className, intent }: CardProps) {
-  return <div className={card({ intent, className })}>Card</div>
+export function Card({ as, className, children }: CardProps) {
+  const classNames = variants({
+    as,
+    className,
+  })
+  return <div className={classNames}>{children}</div>
 }

packages/design-system/lib/components/Card/Compositions/ContentCard.stories.tsx

@@ -0,0 +1,171 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
+
+import { themes } from '../../../../.storybook/preview'
+
+import { Card } from '../'
+import { Typography } from '../../Typography'
+import { Button } from '../../Button'
+
+type CompositionProps = React.ComponentPropsWithoutRef<typeof Card> & {
+  _onPrimaryPress?: () => void
+  _onSecondaryPress?: () => void
+  inMainArea: boolean
+  showTitle: boolean
+  showPreamble: boolean
+  showPrimaryButton: boolean
+  showSecondaryButton: boolean
+}
+
+const meta: Meta<CompositionProps> = {
+  title: 'Compositions/Card',
+  component: Card,
+  decorators: [
+    (Story, context) => {
+      if (context.name.toLowerCase().indexOf('all themes') >= 0) {
+        return (
+          <>
+            <h1>{context.name}</h1>
+            {Object.entries(themes.themes).map(([key, value]) => {
+              return (
+                <div className={value} style={{ padding: '1em 0' }}>
+                  <h2 style={{ paddingBottom: '0.5em' }}>{key}</h2>
+                  <Story />
+                </div>
+              )
+            })}
+          </>
+        )
+      }
+
+      return (
+        <div style={{ display: 'flex' }}>
+          <Story />
+        </div>
+      )
+    },
+  ],
+  argTypes: {
+    inMainArea: {
+      name: 'Is in main area',
+    },
+    showTitle: {
+      name: 'Composition: Show title',
+    },
+    showPreamble: {
+      name: 'Composition: Show preamble',
+    },
+    showPrimaryButton: {
+      name: 'Composition: Show primary button',
+    },
+    showSecondaryButton: {
+      name: 'Composition: Show secondary button',
+    },
+    _onPrimaryPress: {
+      table: {
+        disable: true,
+      },
+    },
+    _onSecondaryPress: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: ({
+    inMainArea,
+    showTitle,
+    showPreamble,
+    showPrimaryButton,
+    showSecondaryButton,
+    ...args
+  }) => (
+    <Card {...args}>
+      {showTitle && (
+        <Typography variant="Title/md">
+          <h3>Content Card</h3>
+        </Typography>
+      )}
+
+      {showPreamble && (
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>
+            Mattis sit duis pulvinar ultricies auctor euismod. Augue mattis
+            mauris at est iaculis pulvinar pulvinar.
+          </p>
+        </Typography>
+      )}
+
+      {showPrimaryButton && inMainArea && (
+        <Button
+          size={'Large'}
+          variant="Primary"
+          typography="Body/Paragraph/mdBold"
+          onPress={args._onPrimaryPress}
+        >
+          Primary action
+        </Button>
+      )}
+
+      {showPrimaryButton && !inMainArea && (
+        <Button
+          size={'Small'}
+          variant="Tertiary"
+          typography="Body/Paragraph/mdBold"
+          onPress={args._onPrimaryPress}
+        >
+          Primary action
+        </Button>
+      )}
+
+      {showSecondaryButton && (
+        <Button
+          size={inMainArea ? 'Large' : 'Small'}
+          variant="Secondary"
+          onPress={args._onSecondaryPress}
+          typography="Body/Paragraph/mdBold"
+        >
+          Secondary action
+        </Button>
+      )}
+    </Card>
+  ),
+}
+
+export default meta
+
+type Story = StoryObj<CompositionProps>
+
+export const ContentCardMainArea: Story = {
+  args: {
+    as: 'Default',
+    inMainArea: true,
+    showTitle: true,
+    showPreamble: true,
+    showPrimaryButton: true,
+    showSecondaryButton: true,
+    _onPrimaryPress: fn(),
+    _onSecondaryPress: fn(),
+  },
+}
+
+export const ContentCardNonMainArea: Story = {
+  args: {
+    as: 'Default',
+    inMainArea: false,
+    showTitle: true,
+    showPreamble: true,
+    showPrimaryButton: true,
+    showSecondaryButton: true,
+    _onPrimaryPress: fn(),
+    _onSecondaryPress: fn(),
+  },
+}
+
+export const ContentCardMainAreaAllThemes: Story = {
+  ...ContentCardMainArea,
+}
+
+export const ContentCardNonMainAreaAllThemes: Story = {
+  ...ContentCardNonMainArea,
+}

packages/design-system/lib/components/Card/card.module.css

@@ -1,13 +1,22 @@
 .card {
-  background: #fff;
+  padding: var(--Space-x2) var(--Space-x3);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  gap: var(--Space-x15);
 }
 
-.basic {
-  outline: solid 1px green;
+.Default {
+  border: solid 1px var(--Border-Default);
+  background-color: var(--Surface-Secondary-Default);
+  border-radius: var(--Corner-radius-md);
+  color: var(--Text-Default);
 }
 
-.border {
-  border-style: solid;
-  border-width: 3px;
-  border-color: var(--color-brand-main-normal);
+.Featured {
+  border: solid 1px var(--Border-Default);
+  background-color: var(--Surface-Primary-Default);
+  border-radius: var(--Corner-radius-md);
+  color: var(--Text-Default);
 }

packages/design-system/lib/components/Card/types.ts

@@ -0,0 +1,11 @@
+import type { VariantProps } from 'class-variance-authority'
+
+import type { variants } from './variants'
+
+type CardStyles = 'Default' | 'Featured'
+
+export interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof variants> {
+  as: CardStyles
+}

packages/design-system/lib/components/Card/variants.ts

@@ -0,0 +1,17 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './card.module.css'
+
+const config = {
+  variants: {
+    as: {
+      Default: styles.Default,
+      Featured: styles.Featured,
+    },
+  },
+  defaultVariants: {
+    as: 'Default',
+  },
+} as const
+
+export const variants = cva(styles.card, config)

packages/design-system/lib/components/ChipButton/ChipButton.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { fn } from '@storybook/test'
+
+import { ChipButton } from './ChipButton.tsx'
+import ChevronRightSmallIcon from '../Icons/ChevronRightSmall.tsx'
+
+const meta: Meta<typeof ChipButton> = {
+  title: 'Components/Chip/ChipButton 🚧',
+  component: ChipButton,
+  argTypes: {
+    onPress: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof ChipButton>
+
+export const Default: Story = {
+  args: {
+    onPress: fn(),
+    children: (
+      <>
+        Button Chip <ChevronRightSmallIcon width={20} height={20} />
+      </>
+    ),
+  },
+}

packages/design-system/lib/components/ChipButton/ChipButton.tsx

@@ -0,0 +1,21 @@
+import { Button as ButtonRAC } from 'react-aria-components'
+
+import { Typography } from '../Typography'
+
+import styles from './chip-button.module.css'
+
+import type { ComponentPropsWithRef } from 'react'
+
+export function ChipButton({
+  children,
+  className,
+  ...props
+}: ComponentPropsWithRef<typeof ButtonRAC>) {
+  return (
+    <Typography variant="Body/Supporting text (caption)/smBold">
+      <ButtonRAC {...props} className={[styles.chip, className].join(' ')}>
+        {children}
+      </ButtonRAC>
+    </Typography>
+  )
+}

packages/design-system/lib/components/ChipButton/chip-button.module.css

@@ -0,0 +1,19 @@
+.chip {
+  background-color: var(--Component-Button-Inverted-Default);
+  border-color: var(--Component-Button-Inverted-Border-Default);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--Corner-radius-sm);
+  padding: var(--Space-x1) var(--Space-x15);
+  color: var(--Text-Interactive-Default);
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.chip:hover {
+  /* TODO: change to proper Component-variable once it is available */
+  background-color: var(--Scandic-Peach-10);
+  /* TODO: change to proper Component-variable once it is available */
+  color: var(--Scandic-Red-100);
+}

packages/design-system/lib/components/ChipButton/index.tsx

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

packages/design-system/lib/components/ChipLink/ChipLink.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ChipLink } from './ChipLink.tsx'
+import ChevronRightSmallIcon from '../Icons/ChevronRightSmall.tsx'
+
+const meta: Meta<typeof ChipLink> = {
+  title: 'Components/Chip/ChipLInk 🚧',
+  component: ChipLink,
+}
+
+export default meta
+
+type Story = StoryObj<typeof ChipLink>
+
+export const Default: Story = {
+  args: {
+    href: '/',
+    onClick: (e) => e.preventDefault(),
+    children: (
+      <>
+        Link Chip <ChevronRightSmallIcon width={20} height={20} />
+      </>
+    ),
+  },
+}

packages/design-system/lib/components/ChipLink/ChipLink.tsx

@@ -0,0 +1,19 @@
+import { Typography } from '../Typography'
+
+import styles from './chip-link.module.css'
+
+import type { PropsWithChildren } from 'react'
+
+export function ChipLink({
+  children,
+  className,
+  ...props
+}: PropsWithChildren<React.AnchorHTMLAttributes<HTMLAnchorElement>>) {
+  return (
+    <Typography variant="Body/Supporting text (caption)/smBold">
+      <a {...props} className={[styles.chip, className].join(' ')}>
+        {children}
+      </a>
+    </Typography>
+  )
+}

packages/design-system/lib/components/ChipLink/chip-link.module.css

@@ -0,0 +1,18 @@
+.chip {
+  background-color: var(--Component-Button-Inverted-Default);
+  border-color: var(--Component-Button-Inverted-Border-Default);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--Corner-radius-sm);
+  padding: var(--Space-x1) var(--Space-x15);
+  color: var(--Text-Interactive-Default);
+  display: inline-flex;
+  align-items: center;
+}
+
+.chip:hover {
+  /* TODO: change to proper Component-variable once it is available */
+  background-color: var(--Scandic-Peach-10);
+  /* TODO: change to proper Component-variable once it is available */
+  color: var(--Scandic-Red-100);
+}

packages/design-system/lib/components/ChipLink/index.tsx

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

packages/design-system/lib/components/Chips/Chips.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
+
+import { Chips } from './Chips.tsx'
+import { ChipLink } from '../ChipLink/ChipLink.tsx'
+import { ChipButton } from '../ChipButton/ChipButton.tsx'
+
+import { Default as ChipLinkDefault } from '../ChipLink/ChipLink.stories.tsx'
+import { Default as ChipButtonDefault } from '../ChipButton/ChipButton.stories.tsx'
+
+type StoryProps = React.ComponentPropsWithoutRef<typeof Chips> & {
+  onPress: () => void
+}
+
+const meta: Meta<StoryProps> = {
+  title: 'Compositions/Chips',
+  component: Chips,
+  argTypes: {
+    onPress: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<StoryProps>
+
+export const Default: Story = {
+  args: {
+    onPress: fn(),
+  },
+  render: (args) => {
+    return (
+      <Chips>
+        <ChipButton {...ChipButtonDefault.args} {...args} />
+        <ChipButton {...ChipButtonDefault.args} {...args} />
+        <ChipButton {...ChipButtonDefault.args} {...args} />
+        <ChipLink {...ChipLinkDefault.args} {...args} />
+        <ChipLink {...ChipLinkDefault.args} {...args} />
+        <ChipLink {...ChipLinkDefault.args} {...args} />
+        <ChipButton {...ChipButtonDefault.args} {...args} />
+        <ChipButton {...ChipButtonDefault.args} {...args} />
+        <ChipButton {...ChipButtonDefault.args} {...args} />
+        <ChipLink {...ChipLinkDefault.args} {...args} />
+        <ChipLink {...ChipLinkDefault.args} {...args} />
+        <ChipLink {...ChipLinkDefault.args} {...args} />
+        <ChipButton {...ChipButtonDefault.args} {...args} />
+        <ChipButton {...ChipButtonDefault.args} {...args} />
+        <ChipLink {...ChipLinkDefault.args} {...args} />
+        <ChipButton {...ChipButtonDefault.args} {...args} />
+        <ChipLink {...ChipLinkDefault.args} {...args} />
+        <ChipLink {...ChipLinkDefault.args} {...args} />
+        <ChipLink {...ChipLinkDefault.args} {...args} />
+        <ChipButton {...ChipButtonDefault.args} {...args} />
+      </Chips>
+    )
+  },
+}

packages/design-system/lib/components/Chips/Chips.tsx

@@ -0,0 +1,7 @@
+import styles from './chips.module.css'
+
+import type { PropsWithChildren } from 'react'
+
+export function Chips({ children }: PropsWithChildren) {
+  return <div className={styles.chips}>{children}</div>
+}

packages/design-system/lib/components/Chips/chips.module.css

@@ -0,0 +1,6 @@
+.chips {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--Space-x1);
+}

packages/design-system/lib/components/Chips/index.tsx

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

packages/design-system/lib/components/CurrentWeb/Button/Button.stories.tsx

@@ -1,82 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { Button } from './Button'
-import { TestIcon } from '../Icon/TestIcon'
-
-import '../../../style-current.css'
-
-const meta = {
-  title: 'Current web/Controls/Button',
-  component: Button,
-  decorators: [
-    (Story) => (
-      <div>
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta<typeof Button>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Primary: Story = {
-  args: {
-    children: 'Primary Button',
-  },
-}
-
-export const Secondary: Story = {
-  args: {
-    children: 'Secondary Button',
-    intent: 'secondary',
-  },
-}
-
-export const Large: Story = {
-  args: {
-    children: 'Large Button',
-    size: 'large',
-  },
-}
-
-export const Small: Story = {
-  args: {
-    children: 'Small Button',
-    size: 'small',
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    children: 'Disabled Button',
-    isDisabled: true,
-  },
-}
-
-export const LeadingIcon: Story = {
-  args: {
-    children: [<TestIcon color="var(--Base-Text-Inverted)" />, 'Button'],
-  },
-}
-
-export const TrailingIcon: Story = {
-  args: {
-    children: ['Button', <TestIcon color="var(--Base-Text-Inverted)" />],
-  },
-}
-
-export const WithIcons: Story = {
-  args: {
-    children: [
-      <TestIcon color="var(--Base-Text-Inverted)" />,
-      <TestIcon color="var(--Base-Text-Inverted)" />,
-      'Button',
-      <TestIcon color="var(--Base-Text-Inverted)" />,
-      <TestIcon color="var(--Base-Text-Inverted)" />,
-    ],
-  },
-}

packages/design-system/lib/components/CurrentWeb/Button/Button.tsx

@@ -1,50 +0,0 @@
-'use client'
-
-import styles from './button.module.css'
-
-import { Button as ButtonComponent } from 'react-aria-components'
-import { cva } from 'class-variance-authority'
-
-import type { ButtonProps as ButtonComponentProps } from 'react-aria-components'
-import type { ComponentProps } from '../../../types'
-
-const config = {
-  variants: {
-    intent: {
-      primary: styles.primary,
-      secondary: styles.secondary,
-    },
-    size: {
-      small: styles.small,
-      normal: styles.normal,
-      large: styles.large,
-    },
-  },
-  defaultVariants: {
-    intent: 'primary',
-    size: 'normal',
-  },
-} as const
-
-const button = cva(styles.button, config)
-
-export type ButtonProps = ComponentProps<
-  ButtonComponentProps,
-  typeof button,
-  never,
-  'intent' | 'size'
->
-
-export function Button({
-  children,
-  className,
-  intent = config.defaultVariants.intent,
-  size = config.defaultVariants.size,
-  ...props
-}: ButtonProps) {
-  return (
-    <ButtonComponent className={button({ className, intent, size })} {...props}>
-      {children}
-    </ButtonComponent>
-  )
-}

packages/design-system/lib/components/CurrentWeb/Button/button.module.css

@@ -1,82 +0,0 @@
-.button {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 8px 24px;
-  background: none;
-  color: var(--Base-Text-Inverted);
-  border: none;
-  border-radius: 50px;
-  cursor: pointer;
-  transition: background-color 300ms ease;
-  font-family: Helvetica;
-  font-weight: 400;
-}
-
-/* Primary styles */
-.primary {
-  background-color: var(--Primary-Fill-Strong-Default);
-  border: 2px solid transparent;
-  outline: 1px solid transparent;
-}
-
-.primary:hover {
-  background: var(--Primary-Fill-Strong-Hovered);
-}
-
-.primary:active,
-.primary:focus {
-  border: 2px solid var(--Base-Text-Inverted);
-  outline: 1px solid var(--Primary-Border-Strong);
-}
-
-/* Secondary styles */
-.secondary {
-  border: 1px solid var(--Base-Border-Normal);
-  background-color: var(--Base-Background-Normal);
-  color: var(--Primary-Text-Strong);
-}
-
-.secondary:hover {
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  outline: 2px solid var(--Primary-Border-Hovered);
-  outline-offset: -1px;
-}
-
-.secondary:active,
-.secondary:focus {
-  border: 1px solid var(--Primary-Border-Strong);
-  outline: 1px solid var(--Base-Border-Normal);
-  outline-offset: -4px;
-}
-
-/* Disabled styles */
-.button:disabled {
-  background-color: var(--Base-Fill-Disabled);
-  color: var(--Base-Text-Disabled);
-  cursor: not-allowed;
-  border: none;
-  outline: none;
-}
-
-/* Sizes */
-.large {
-  font-size: var(--typography-body-regular-font-size);
-  line-height: var(--typography-body-regular-line-height);
-  letter-spacing: var(--typography-body-regular-letter-spacing);
-}
-
-.normal {
-  font-size: 16px;
-  line-height: 24px;
-  letter-spacing: 0.096px;
-}
-
-.small {
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 24px;
-  letter-spacing: 0.096px;
-}

packages/design-system/lib/components/CurrentWeb/Icon/TestIcon.tsx

@@ -1,29 +0,0 @@
-export function TestIcon({ color = '#291710' }: { color?: string }) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_69_3287"
-        style={{ maskType: 'alpha' }}
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="24"
-        height="24"
-      >
-        <rect width="24" height="24" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_69_3287)">
-        <path
-          d="M11.075 12.95V15.9375C11.075 16.1958 11.1667 16.4167 11.35 16.6C11.5333 16.7833 11.7542 16.875 12.0125 16.875C12.2708 16.875 12.4917 16.7833 12.675 16.6C12.8583 16.4167 12.95 16.1958 12.95 15.9375V12.95H15.9375C16.1958 12.95 16.4167 12.8583 16.6 12.675C16.7833 12.4917 16.875 12.2708 16.875 12.0125C16.875 11.7542 16.7833 11.5333 16.6 11.35C16.4167 11.1667 16.1958 11.075 15.9375 11.075H12.95V8.0625C12.95 7.80417 12.8583 7.58333 12.675 7.4C12.4917 7.21667 12.2708 7.125 12.0125 7.125C11.7542 7.125 11.5333 7.21667 11.35 7.4C11.1667 7.58333 11.075 7.80417 11.075 8.0625V11.075H8.0625C7.80417 11.075 7.58333 11.1667 7.4 11.35C7.21667 11.5333 7.125 11.7542 7.125 12.0125C7.125 12.2708 7.21667 12.4917 7.4 12.675C7.58333 12.8583 7.80417 12.95 8.0625 12.95H11.075ZM12 21.75C10.6516 21.75 9.38434 21.4936 8.19838 20.9809C7.01239 20.4682 5.98075 19.7724 5.10345 18.8934C4.22615 18.0145 3.53125 16.9826 3.01875 15.7978C2.50625 14.613 2.25 13.3471 2.25 12C2.25 10.6516 2.50636 9.38434 3.01908 8.19838C3.53179 7.01239 4.22762 5.98075 5.10658 5.10345C5.98553 4.22615 7.01739 3.53125 8.20218 3.01875C9.38698 2.50625 10.6529 2.25 12 2.25C13.3484 2.25 14.6157 2.50636 15.8016 3.01908C16.9876 3.53179 18.0193 4.22762 18.8966 5.10658C19.7739 5.98553 20.4688 7.01739 20.9813 8.20217C21.4938 9.38697 21.75 10.6529 21.75 12C21.75 13.3484 21.4936 14.6157 20.9809 15.8016C20.4682 16.9876 19.7724 18.0193 18.8934 18.8966C18.0145 19.7739 16.9826 20.4688 15.7978 20.9813C14.613 21.4938 13.3471 21.75 12 21.75ZM12 19.875C14.1917 19.875 16.0521 19.1104 17.5813 17.5813C19.1104 16.0521 19.875 14.1917 19.875 12C19.875 9.80833 19.1104 7.94792 17.5813 6.41875C16.0521 4.88958 14.1917 4.125 12 4.125C9.80833 4.125 7.94792 4.88958 6.41875 6.41875C4.88958 7.94792 4.125 9.80833 4.125 12C4.125 14.1917 4.88958 16.0521 6.41875 17.5813C7.94792 19.1104 9.80833 19.875 12 19.875Z"
-          fill={color}
-        />
-      </g>
-    </svg>
-  )
-}

packages/design-system/lib/components/CurrentWeb/Icon/index.tsx

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

packages/design-system/lib/components/Icons/ChevronRightSmall.tsx

@@ -0,0 +1,16 @@
+export default function ChevronRightSmallIcon(
+  props: React.SVGAttributes<HTMLOrSVGElement>
+) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M12.65 12L8.77495 8.12497C8.59995 7.94997 8.51245 7.73538 8.51245 7.48122C8.51245 7.22705 8.59995 7.0083 8.77495 6.82497C8.94995 6.64163 9.16662 6.54788 9.42495 6.54372C9.68328 6.53955 9.90412 6.62913 10.0875 6.81247L14.6125 11.3375C14.7041 11.4291 14.7729 11.5312 14.8187 11.6437C14.8645 11.7562 14.8875 11.875 14.8875 12C14.8875 12.125 14.8645 12.2437 14.8187 12.3562C14.7729 12.4687 14.7041 12.5708 14.6125 12.6625L10.0875 17.1875C9.90412 17.3708 9.68328 17.4604 9.42495 17.4562C9.16662 17.4521 8.94995 17.3583 8.77495 17.175C8.59995 16.9916 8.51245 16.7729 8.51245 16.5187C8.51245 16.2646 8.59995 16.05 8.77495 15.875L12.65 12Z" />
+    </svg>
+  )
+}

packages/design-system/lib/components/Typography/Typography.docs.mdx

@@ -0,0 +1,117 @@
+import {
+  Meta,
+  Title,
+  Subtitle,
+  Description,
+  Controls,
+  Stories,
+} from '@storybook/blocks'
+
+import * as TypographyStories from './Typography.stories.tsx'
+
+<Meta of={TypographyStories} />
+
+<Title />
+
+The source of the design system lives in Figma. Here, source means design tokens _and_ Figma styles.
+
+Figma styles are a collection of design tokens that together define a style. For the most part it is used for typography. Design tokens define things like font family, font weight, font size, etc. On their own they don't do much as their meaning is lost without context of each other. Together though they define the typography to render.
+
+To help communication between designers and developers it helps to have the same nomenclature. To achieve this goal the technical implementation of the design system in this repository uses two approaches; a `Typography` component and a higher order function.
+
+<Subtitle>The component</Subtitle>
+
+> The approach described in this section is platform agnostic. However this documentation is for the implementation aimed at web. The same can be achived for other platforms but currently it is only implemented for web.
+
+The `Typography` component implements all the Figma styles for typography with [Class Variance Authority](https://cva.style/). This allows the consumers to use this component to apply typography styling to any component that accepts a class (the `className` prop) by wrapping them. The implementation is also supported by code completion furthering promoting the same nomenclature.
+
+Example:
+
+```
+import { Typography } from '@scandic-hotels/design-system'
+
+function SomeTitleComponent () {
+  return (
+    <Typography variant="Title/lg">
+      <h1>A title with proper typography</h1>
+    </Typography>
+  )
+}
+```
+
+It also takes care of merging with any class already present.
+
+```
+import { Typography } from '@scandic-hotels/design-system'
+
+import styles from './my-component.module.css'
+
+function MyComponent () {
+  return (
+    <Typography variant="Title/lg">
+      <h1 className={styles.title}>A title with proper typography</h1>
+    </Typography>
+  )
+}
+```
+
+<Subtitle>The higher order function</Subtitle>
+
+> The approach described in this section is platform agnostic. However this documentation is for the implementation aimed at web. The same can be achived for other platforms but currently it is only implemented for web.
+
+The higher order function for typography implements all the Figma styles for typography with Class Variance Authority. The implementation merges any components CVA variants with the CVA variants for typography. It does this by exporting a higher order function named `withTypography`.
+
+The higher order function named `withTypography` accepts a CVA config and returns a new CVA config enhanced with a `typography` variant. This will give the component implementing the CVA config a prop named `typography`. This prop works the same as the `variant` prop for the `Typography` component with handling merging of classes already preset, code completion and everything.
+
+Example:
+
+```
+// variants.ts
+import { cva } from 'class-variance-authority'
+
+import { withTypography } from '@scandic-hotels/design-system'
+
+import styles from './my-component.module.css'
+
+export const config = {
+  variants: {
+    ...
+  },
+  defaultVariants: {
+    ...
+  },
+} as const
+
+export const variants = cva(styles.myComponent, withTypography(config))
+```
+
+```
+// MyComponent.tsx
+import { variants } from './variants'
+
+export function MyComponent (props) {
+  const classNames = variants(...)
+  return <div {...props} className={classNames} />
+}
+```
+
+```
+// OtherComponent.tsx
+...
+<MyComponent typography="Title/lg">
+...
+```
+
+## Props
+
+The component accepts the following props.
+
+> For the component to work the nested child component needs to handle `className` prop.
+
+<Controls />
+
+---
+
+## All typography styles
+
+<Stories />

packages/design-system/lib/components/Typography/Typography.stories.tsx

@@ -0,0 +1,189 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Typography } from './Typography.tsx'
+
+import TypographyDocs from './Typography.docs.mdx'
+
+import { config as typographyConfig } from './variants'
+
+const meta: Meta<typeof Typography> = {
+  title: 'Components/Typography',
+  component: Typography,
+  args: { variant: typographyConfig.defaultVariants.variant },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: Object.keys(typographyConfig.variants.variant),
+      table: {
+        defaultValue: { summary: typographyConfig.defaultVariants.variant },
+      },
+    },
+  },
+  parameters: { docs: { toc: true, page: TypographyDocs } },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Typography>
+
+export const TitleLg: Story = {
+  name: 'Title/lg',
+  args: {
+    variant: 'Title/lg',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const TitleMd: Story = {
+  name: 'Title/md',
+  args: {
+    variant: 'Title/md',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const TitleMdRegular: Story = {
+  name: 'Title/mdRegular',
+  args: {
+    variant: 'Title/mdRegular',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const TitleSm: Story = {
+  name: 'Title/sm',
+  args: {
+    variant: 'Title/sm',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const TitleSmRegular: Story = {
+  name: 'Title/smRegular',
+  args: {
+    variant: 'Title/smRegular',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const TitleXs: Story = {
+  name: 'Title/xs',
+  args: {
+    variant: 'Title/xs',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const TitleDecorativeLg: Story = {
+  name: 'Title/Decorative/lg',
+  args: {
+    variant: 'Title/Decorative/lg',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const TitleDecorativeMd: Story = {
+  name: 'Title/Decorative/md',
+  args: {
+    variant: 'Title/Decorative/md',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const TitleSubtitleLg: Story = {
+  name: 'Title/Subtitle/lg',
+  args: {
+    variant: 'Title/Subtitle/lg',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const TitleSubtitleMd: Story = {
+  name: 'Title/Subtitle/md',
+  args: {
+    variant: 'Title/Subtitle/md',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const TitleOverlineSm: Story = {
+  name: 'Title/Overline/sm',
+  args: {
+    variant: 'Title/Overline/sm',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const BodyLeadtext: Story = {
+  name: 'Body/Lead text',
+  args: {
+    variant: 'Body/Lead text',
+    children: <p>The quick brown fox jumps over the lazy dog</p>,
+  },
+}
+export const BodyParagraphMdRegular: Story = {
+  name: 'Body/Paragraph/mdRegular',
+  args: {
+    variant: 'Body/Paragraph/mdRegular',
+    children: <p>The quick brown fox jumps over the lazy dog</p>,
+  },
+}
+export const BodyParagraphMdBold: Story = {
+  name: 'Body/Paragraph/mdBold',
+  args: {
+    variant: 'Body/Paragraph/mdBold',
+    children: <p>The quick brown fox jumps over the lazy dog</p>,
+  },
+}
+export const BodySupportingtextCaptionSmRegular: Story = {
+  name: 'Body/Supporting text (caption)/smRegular',
+  args: {
+    variant: 'Body/Supporting text (caption)/smRegular',
+    children: <p>The quick brown fox jumps over the lazy dog</p>,
+  },
+}
+export const BodySupportingtextCaptionSmBold: Story = {
+  name: 'Body/Supporting text (caption)/smBold',
+  args: {
+    variant: 'Body/Supporting text (caption)/smBold',
+    children: <p>The quick brown fox jumps over the lazy dog</p>,
+  },
+}
+export const BodyUnderlineMd: Story = {
+  name: 'Body/Underline/md',
+  args: {
+    variant: 'Body/Underline/md',
+    children: <p>The quick brown fox jumps over the lazy dog</p>,
+  },
+}
+export const BodyUnderlineSm: Story = {
+  name: 'Body/Underline/sm',
+  args: {
+    variant: 'Body/Underline/sm',
+    children: <p>The quick brown fox jumps over the lazy dog</p>,
+  },
+}
+export const TagSm: Story = {
+  name: 'Tag/sm',
+  args: {
+    variant: 'Tag/sm',
+    children: <span>The quick brown fox jumps over the lazy dog</span>,
+  },
+}
+export const LinkMd: Story = {
+  name: 'Link/md',
+  args: {
+    variant: 'Link/md',
+    children: <a href="#">The quick brown fox jumps over the lazy dog</a>,
+  },
+}
+export const LinkSm: Story = {
+  name: 'Link/sm',
+  args: {
+    variant: 'Link/sm',
+    children: <a href="#">The quick brown fox jumps over the lazy dog</a>,
+  },
+}
+export const LabelXsRegular: Story = {
+  name: 'Label/xsRegular',
+  args: {
+    variant: 'Label/xsRegular',
+    children: <span>The quick brown fox jumps over the lazy dog</span>,
+  },
+}
+export const LabelXsBold: Story = {
+  name: 'Label/xsBold',
+  args: {
+    variant: 'Label/xsBold',
+    children: <span>The quick brown fox jumps over the lazy dog</span>,
+  },
+}

packages/design-system/lib/components/Typography/Typography.tsx

@@ -0,0 +1,18 @@
+import { cloneElement, isValidElement } from 'react'
+
+import { variants } from './variants'
+
+import type { TypographyProps } from './types'
+
+export function Typography({ variant, children }: TypographyProps) {
+  if (!isValidElement(children)) return null
+
+  const classNames = variants({
+    variant,
+  })
+
+  return cloneElement(children, {
+    ...children.props,
+    className: [children.props.className, classNames].filter(Boolean).join(' '),
+  })
+}

packages/design-system/lib/components/Typography/index.tsx

@@ -0,0 +1,3 @@
+export { Typography } from './Typography'
+// eslint-disable-next-line react-refresh/only-export-components
+export { withTypography } from './variants'

packages/design-system/lib/components/Typography/types.ts

@@ -0,0 +1,9 @@
+import type { VariantProps } from 'class-variance-authority'
+
+import type { variants } from './variants'
+
+export interface TypographyProps
+  extends Pick<React.HTMLAttributes<HTMLElement>, 'className'>,
+    VariantProps<typeof variants> {
+  children: React.ReactElement<{ className?: string }>
+}

packages/design-system/lib/components/Typography/typography.module.css

@@ -0,0 +1,246 @@
+.Title-lg {
+  font-family: var(--Title-lg-Font-family), var(--Title-lg-Font-fallback);
+  font-size: var(--Title-lg-Size);
+  font-weight: var(--Title-lg-Font-weight);
+  letter-spacing: var(--Title-lg-Letter-spacing);
+  text-transform: var(--Title-lg-Text-Transform);
+  line-height: 1;
+  text-decoration: none;
+}
+
+.Title-md {
+  font-family: var(--Title-md-Font-family), var(--Title-md-Font-fallback);
+  font-size: var(--Title-md-Size);
+  font-weight: var(--Title-md-Font-weight);
+  letter-spacing: var(--Title-md-Letter-spacing);
+  text-transform: var(--Title-md-Text-Transform);
+  line-height: 1.1;
+  text-decoration: none;
+}
+
+.Title-mdRegular {
+  font-family: var(--Title-md-Font-family), var(--Title-md-Font-fallback);
+  font-size: var(--Title-md-Size);
+  font-weight: 700;
+  letter-spacing: var(--Title-md-Letter-spacing);
+  text-transform: var(--Title-md-Text-Transform);
+  line-height: 1.1;
+  text-decoration: none;
+}
+
+.Title-sm {
+  font-family: var(--Title-sm-Font-family), var(--Title-sm-Font-fallback);
+  font-size: var(--Title-sm-Size);
+  font-weight: var(--Title-sm-Font-weight);
+  letter-spacing: var(--Title-sm-Letter-spacing);
+  text-transform: var(--Title-sm-Text-Transform);
+  line-height: 1.1;
+  text-decoration: none;
+}
+
+.Title-smRegular {
+  font-family:
+    var(--Title-sm-LowCase-Font-family), var(--Title-sm-LowCase-Font-fallback);
+  font-size: var(--Title-sm-LowCase-Size);
+  font-weight: var(--Title-sm-LowCase-Font-weight);
+  letter-spacing: var(--Title-sm-LowCase-Letter-spacing);
+  text-transform: var(--Title-sm-LowCase-Text-Transform);
+  line-height: 1.1;
+  text-decoration: none;
+}
+
+.Title-xs {
+  font-family: var(--Title-xs-Font-family), var(--Title-xs-Font-fallback);
+  font-size: var(--Title-xs-Size);
+  font-weight: var(--Title-xs-Font-weight);
+  letter-spacing: var(--Title-xs-Letter-spacing);
+  text-transform: var(--Title-xs-Text-Transform);
+  line-height: 1.1;
+  text-decoration: none;
+}
+
+.Title-Decorative-lg {
+  font-family:
+    var(--Title-Decorative-lg-Font-family),
+    var(--Title-Decorative-lg-Font-fallback);
+  font-size: var(--Title-Decorative-lg-Size);
+  font-weight: var(--Title-Decorative-lg-Font-weight);
+  letter-spacing: var(--Title-Decorative-lg-Letter-spacing);
+  text-transform: var(--Title-Decorative-lg-Text-Transform);
+  line-height: 1.1;
+  text-decoration: none;
+}
+
+.Title-Decorative-md {
+  font-family:
+    var(--Title-Decorative-md-Font-family),
+    var(--Title-Decorative-md-Font-fallback);
+  font-size: var(--Title-Decorative-md-Size);
+  font-weight: var(--Title-Decorative-md-Font-weight);
+  letter-spacing: var(--Title-Decorative-md-Letter-spacing);
+  text-transform: var(--Title-Decorative-md-Text-Transform);
+  line-height: 1.1;
+  text-decoration: none;
+}
+
+.Title-Subtitle-lg {
+  font-family:
+    var(--Title-Subtitle-lg-Font-family), var(--Title-Subtitle-lg-Font-fallback);
+  font-size: var(--Title-Subtitle-lg-Size);
+  font-weight: var(--Title-Subtitle-lg-Font-weight);
+  letter-spacing: var(--Title-Subtitle-lg-Letter-spacing);
+  text-transform: unset;
+  line-height: 1.2;
+  text-decoration: none;
+}
+
+.Title-Subtitle-md {
+  font-family:
+    var(--Title-Subtitle-md-Font-family), var(--Title-Subtitle-md-Font-fallback);
+  font-size: var(--Title-Subtitle-md-Size);
+  font-weight: var(--Title-Subtitle-md-Font-weight);
+  letter-spacing: var(--Title-Subtitle-md-Letter-spacing);
+  text-transform: unset;
+  line-height: 1.2;
+  text-decoration: none;
+}
+
+.Title-Overline-sm {
+  font-family:
+    var(--Title-Overline-sm-Font-family), var(--Title-Overline-sm-Font-fallback);
+  font-size: var(--Title-Overline-sm-Size);
+  font-weight: var(--Title-Overline-sm-Font-weight);
+  letter-spacing: var(--Title-Overline-sm-Letter-spacing);
+  text-transform: var(--Title-Overline-sm-Text-Transform);
+  line-height: 1.5;
+  text-decoration: none;
+}
+
+.Body-Lead-text {
+  font-family:
+    var(--Body-Lead-text-Font-family), var(--Body-Lead-text-Font-fallback);
+  font-size: var(--Body-Lead-text-Size);
+  font-weight: var(--Body-Lead-text-Font-weight);
+  letter-spacing: var(--Body-Lead-text-Letter-spacing);
+  text-transform: unset;
+  line-height: 1.5;
+  text-decoration: none;
+}
+
+.Body-Paragraph-mdRegular {
+  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);
+  letter-spacing: var(--Body-Paragraph-Letter-spacing);
+  text-transform: unset;
+  line-height: 1.5;
+  text-decoration: none;
+}
+
+.Body-Paragraph-mdBold {
+  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);
+  text-transform: unset;
+  line-height: 1.5;
+  text-decoration: none;
+}
+
+.Body-Supporting-text-caption-smRegular {
+  font-family:
+    var(--Body-Supporting-text-Font-family),
+    var(--Body-Supporting-text-Font-fallback);
+  font-size: var(--Body-Supporting-text-Size);
+  font-weight: var(--Body-Supporting-text-Font-weight);
+  letter-spacing: var(--Body-Supporting-text-Letter-spacing);
+  text-transform: unset;
+  line-height: 1.4;
+  text-decoration: none;
+}
+
+.Body-Supporting-text-caption-smBold {
+  font-family:
+    var(--Body-Supporting-text-Font-family),
+    var(--Body-Supporting-text-Font-fallback);
+  font-size: var(--Body-Supporting-text-Size);
+  font-weight: var(--Body-Supporting-text-Font-weight-2);
+  letter-spacing: var(--Body-Supporting-text-Letter-spacing);
+  text-transform: unset;
+  line-height: 1.4;
+  text-decoration: none;
+}
+
+.Body-Underline-md {
+  font-family:
+    var(--Body-Underline-md-Font-family), var(--Body-Underline-md-Font-fallback);
+  font-size: var(--Body-Underline-md-Size);
+  font-weight: var(--Body-Underline-md-Font-weight);
+  letter-spacing: var(--Body-Underline-md-Letter-spacing);
+  text-transform: unset;
+  line-height: 1.5;
+  text-decoration: underline;
+}
+
+.Body-Underline-sm {
+  font-family:
+    var(--Body-Underline-sm-Font-family), var(--Body-Underline-sm-Font-fallback);
+  font-size: var(--Body-Underline-sm-Size);
+  font-weight: var(--Body-Underline-sm-Font-weight);
+  letter-spacing: var(--Body-Underline-sm-Letter-spacing);
+  text-transform: unset;
+  line-height: 1.4;
+  text-decoration: underline;
+}
+
+.Tag-sm {
+  font-family: var(--Tag-Font-family), var(--Tag-Font-fallback);
+  font-size: var(--Tag-Size);
+  font-weight: var(--Tag-Font-weight);
+  letter-spacing: var(--Tag-Letter-spacing);
+  text-transform: var(--Tag-Text-Transform);
+  line-height: 1.5;
+  text-decoration: none;
+}
+
+.Link-md {
+  font-family: var(--Link-md-Font-family), var(--Link-md-Font-fallback);
+  font-size: var(--Link-md-Size);
+  font-weight: var(--Link-md-Font-weight);
+  letter-spacing: var(--Link-md-Letter-spacing);
+  text-transform: unset;
+  line-height: 1.5;
+  text-decoration: underline;
+}
+
+.Link-sm {
+  font-family: var(--Link-sm-Font-family), var(--Link-sm-Font-fallback);
+  font-size: var(--Link-sm-Size);
+  font-weight: var(--Link-sm-Font-weight);
+  letter-spacing: var(--Link-sm-Letter-spacing);
+  text-transform: unset;
+  line-height: 1.4;
+  text-decoration: underline;
+}
+
+.Label-xsRegular {
+  font-family: var(--Label-Font-family), var(--Label-Font-fallback);
+  font-size: var(--Label-Size);
+  font-weight: var(--Label-Font-weight);
+  letter-spacing: var(--Label-Letter-spacing);
+  text-transform: unset;
+  line-height: 1.5;
+  text-decoration: none;
+}
+
+.Label-xsBold {
+  font-family: var(--Label-Font-family), var(--Label-Font-fallback);
+  font-size: var(--Label-Size);
+  font-weight: var(--Label-Font-weight-2);
+  letter-spacing: var(--Label-Letter-spacing);
+  text-transform: unset;
+  line-height: 1.5;
+  text-decoration: none;
+}

packages/design-system/lib/components/Typography/variants.ts

@@ -0,0 +1,52 @@
+import { cva } from 'class-variance-authority'
+import { deepmerge } from 'deepmerge-ts'
+
+import styles from './typography.module.css'
+
+export const config = {
+  variants: {
+    variant: {
+      'Title/lg': styles['Title-lg'],
+      'Title/md': styles['Title-md'],
+      'Title/mdRegular': styles['Title-mdRegular'],
+      'Title/sm': styles['Title-sm'],
+      'Title/smRegular': styles['Title-smRegular'],
+      'Title/xs': styles['Title-xs'],
+      'Title/Decorative/lg': styles['Title-Decorative-lg'],
+      'Title/Decorative/md': styles['Title-Decorative-md'],
+      'Title/Subtitle/lg': styles['Title-Subtitle-lg'],
+      'Title/Subtitle/md': styles['Title-Subtitle-md'],
+      'Title/Overline/sm': styles['Title-Overline-sm'],
+      'Body/Lead text': styles['Body-Lead-text'],
+      'Body/Paragraph/mdRegular': styles['Body-Paragraph-mdRegular'],
+      'Body/Paragraph/mdBold': styles['Body-Paragraph-mdBold'],
+      'Body/Supporting text (caption)/smRegular':
+        styles['Body-Supporting-text-caption-smRegular'],
+      'Body/Supporting text (caption)/smBold':
+        styles['Body-Supporting-text-caption-smBold'],
+      'Body/Underline/md': styles['Body-Underline-md'],
+      'Body/Underline/sm': styles['Body-Underline-sm'],
+      'Tag/sm': styles['Tag-sm'],
+      'Link/md': styles['Link-md'],
+      'Link/sm': styles['Link-sm'],
+      'Label/xsRegular': styles['Label-xsRegular'],
+      'Label/xsBold': styles['Label-xsBold'],
+    },
+  },
+  defaultVariants: {
+    variant: 'Body/Paragraph/mdRegular',
+  },
+} as const
+
+export const variants = cva({}, config)
+
+const typographyConfig = {
+  variants: {
+    typography: config.variants.variant,
+  },
+  defaultVariants: config.defaultVariants,
+} as const
+
+export function withTypography<T>(config: T) {
+  return deepmerge(typographyConfig, config)
+}

packages/design-system/lib/current.ts

@@ -1 +0,0 @@
-export { Button } from './components/CurrentWeb/Button'

packages/design-system/lib/docs/colors.mdx

@@ -1,25 +0,0 @@
-import {
-  Meta,
-  Title,
-  Subtitle,
-  ColorPalette,
-  ColorItem,
-} from '@storybook/blocks'
-
-import * as colors from '../styles/colors'
-
-<Meta title="Design system/Colors" />
-
-<Title>Colors</Title>
-
-<ColorPalette>
-  {Object.keys(colors).map((key) => {
-    const skipKeys = ['colors', 'tokens', 'Old']
-      if (!skipKeys.includes(key)) {
-      return Object.keys(colors[key]).map((modeKey) => {
-          return <ColorItem title={modeKey} colors={colors[key][modeKey]} />
-        })
-    }
-    return null
-  })}
-</ColorPalette>

packages/design-system/lib/docs/current-web/colors.mdx

@@ -1,27 +0,0 @@
-import {
-  Meta,
-  Title,
-  Subtitle,
-  ColorPalette,
-  ColorItem,
-} from '@storybook/blocks'
-
-import * as colors from '../../styles/colors'
-
-import '../../style-current.css'
-
-<Meta title="Current web/Colors" />
-
-<Title>Colors</Title>
-
-<ColorPalette>
-  {Object.keys(colors).map((key) => {
-    const skipKeys = ['colors', 'tokens', 'New']
-      if (!skipKeys.includes(key)) {
-      return Object.keys(colors[key]).map((modeKey) => {
-          return <ColorItem title={modeKey} colors={colors[key][modeKey]} />
-        })
-    }
-    return null
-  })}
-</ColorPalette>

packages/design-system/lib/docs/tokens.mdx

@@ -1,84 +0,0 @@
-import {
-  Meta,
-  Title,
-  Subtitle,
-  ColorPalette,
-  ColorItem,
-} from '@storybook/blocks'
-
-import { tokens as allTokens } from '../styles/colors'
-import {capitalizeFirstLetter} from '../utils'
-
-export const data = Object.entries(allTokens).reduce((acc, curr) => {
-    const [name, value] = curr
-    const nameParts = name.split('-')
-    if (nameParts.length == 2) {
-      if (!acc['color']) {
-        acc['color'] = {}
-      }
-      nameParts.unshift('color')
-    }
-
-    const title = nameParts[0].toLowerCase()
-    const subtitle = nameParts[1].toLowerCase()
-    const token = nameParts[2].toLowerCase()
-
-    if (!acc[title]) {
-      acc[title] = {}
-    }
-
-    if (!acc[title][subtitle]) {
-      acc[title][subtitle] = {}
-    }
-
-    acc[title][subtitle][token] = value
-
-    return acc
-  }, {})
-
-<Meta title="Design system/Tokens/Colors" />
-
-
-<div>
-{
-      Object.keys(data).map(t => {
-    if (t === 'color') {
-      return null
-    }
-    return (
-      <>
-        <Title>{capitalizeFirstLetter(t)}</Title>
-        {
-          Object.keys(data[t]).map(s => {
-            return (
-              <>
-                <Subtitle>{capitalizeFirstLetter(s)}</Subtitle>
-                {
-                  (typeof data[t][s] === 'string') ? null : (
-                    <ColorPalette>
-                    {
-                      Object.keys(data[t][s]).map(v => {
-                        return (
-                          <ColorItem
-                            key={v}
-                            title={capitalizeFirstLetter(v)}
-                            subtitle=""
-                            colors={{
-                              [`color.${t}.${s}.${v}`]: `var(--${data[t][s][v]})`
-                            }}
-                          />
-                        )
-                      })
-                    }
-                    </ColorPalette>
-                  )
-                }
-              </>
-            )
-          })
-        }
-      </>
-    )
-  })
-}
-</div>

packages/design-system/lib/fonts.css

@@ -0,0 +1,255 @@
+@font-face {
+  font-display: fallback;
+  font-family: 'biro script plus';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/fonts/biro-script-plus/regular.woff2) format('woff2');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'brandon text';
+  font-weight: 700;
+  src:
+    url(/fonts/brandon-text/bold.woff2) format('woff2'),
+    url(/fonts/brandon-text/bold.woff) format('woff');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'brandon text';
+  font-weight: 900;
+  src:
+    url(/fonts/brandon-text/black.woff2) format('woff2'),
+    url(/fonts/brandon-text/black.woff) format('woff');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'Domaine Sans Text';
+  font-style: normal;
+  font-weight: 300;
+  src:
+    url(/fonts/domaine/domainesanstextweb-light-webfont.woff2) format('woff2'),
+    url(/fonts/domaine/domainesanstextweb-light-webfont.woff) format('woff');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'Domaine Sans Text';
+  font-style: normal;
+  font-weight: 400;
+  src:
+    url(/fonts/domaine/domainesanstextweb-regular-webfont.woff2) format('woff2'),
+    url(/fonts/domaine/domainesanstextweb-regular-webfont.woff) format('woff');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'fira sans';
+  font-style: normal;
+  font-weight: 300;
+  src: url(/fonts/fira-sans/light.woff2) format('woff2');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'fira sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/fonts/fira-sans/regular.woff2) format('woff2');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'fira sans';
+  font-style: normal;
+  font-weight: 500;
+  src: url(/fonts/fira-sans/medium.woff2) format('woff2');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'fira sans';
+  font-style: normal;
+  font-weight: 600;
+  src: url(/fonts/fira-sans/semibold.woff2) format('woff2');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'fira sans';
+  font-style: normal;
+  font-weight: 700;
+  src: url(/fonts/fira-sans/bold.woff2) format('woff2');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'fira sans';
+  font-style: normal;
+  font-weight: 900;
+  src: url(/fonts/fira-sans/black.woff2) format('woff2');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: Garamond;
+  font-style: normal;
+  font-weight: 400;
+  src:
+    url(/fonts/itcgaramond/ITCGaramondBookNarrow_normal_condensed.woff2)
+      format('woff2'),
+    url(/fonts/itcgaramond/ITCGaramondBookNarrow_normal_condensed.woff)
+      format('woff');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: Gotham;
+  font-style: normal;
+  font-weight: 900;
+  src:
+    url(/fonts/gotham/gotham-black-webfont.woff2) format('woff2'),
+    url(/fonts/gotham/gotham-black-webfont.woff) format('woff');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: Gotham;
+  font-style: normal;
+  font-weight: 700;
+  src:
+    url(/fonts/gotham/gotham-bold-webfont.woff2) format('woff2'),
+    url(/fonts/gotham/gotham-bold-webfont.woff) format('woff');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'Neue Haas Grotesk Display Pro';
+  font-style: normal;
+  font-weight: 400;
+  src:
+    url(/fonts/grotesk/NeueHaasGroteskDisplay55Roman_normal_normal.woff2)
+      format('woff2'),
+    url(/fonts/grotesk/NeueHaasGroteskDisplay55Roman_normal_normal.woff)
+      format('woff');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'Neue Haas Grotesk Display Pro';
+  font-style: normal;
+  font-weight: 500;
+  src:
+    url(/fonts/grotesk/NeueHaasGroteskDisplay65Medium_normal_normal.woff2)
+      format('woff2'),
+    url(/fonts/grotesk/NeueHaasGroteskDisplay65Medium_normal_normal.woff)
+      format('woff');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'Prumo text';
+  font-style: normal;
+  font-weight: 300;
+  src:
+    url(/fonts/prumo/prumotext-light-webfont.woff2) format('woff2'),
+    url(/fonts/prumo/PrumoText-Light.woff) format('woff');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'Canela Deck';
+  font-style: normal;
+  font-weight: 900;
+  src: url(/fonts/canela-deck/CanelaDeck-Black.otf) format('opentype');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'Canela Deck';
+  font-style: italic;
+  font-weight: 900;
+  src: url(/fonts/canela-deck/CanelaDeck-BlackItalic.otf) format('opentype');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'Canela Deck';
+  font-style: normal;
+  font-weight: 700;
+  src: url(/fonts/canela-deck/CanelaDeck-Bold.otf) format('opentype');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'Canela Deck';
+  font-style: italic;
+  font-weight: 700;
+  src: url(/fonts/canela-deck/CanelaDeck-BoldItalic.otf) format('opentype');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'Canela Deck';
+  font-style: normal;
+  font-weight: 300;
+  src: url(/fonts/canela-deck/CanelaDeck-Light.otf) format('opentype');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'Canela Deck';
+  font-style: italic;
+  font-weight: 300;
+  src: url(/fonts/canela-deck/CanelaDeck-LightItalic.otf) format('opentype');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'Canela Deck';
+  font-style: normal;
+  font-weight: 500;
+  src: url(/fonts/canela-deck/CanelaDeck-Medium.otf) format('opentype');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'Canela Deck';
+  font-style: italic;
+  font-weight: 500;
+  src: url(/fonts/canela-deck/CanelaDeck-MediumItalic.otf) format('opentype');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'Canela Deck';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/fonts/canela-deck/CanelaDeck-Regular.otf) format('opentype');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'Canela Deck';
+  font-style: italic;
+  font-weight: 400;
+  src: url(/fonts/canela-deck/CanelaDeck-RegularItalic.otf) format('opentype');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'Canela Deck';
+  font-style: normal;
+  font-weight: 200;
+  src: url(/fonts/canela-deck/CanelaDeck-Thin.otf) format('opentype');
+}
+
+@font-face {
+  font-display: fallback;
+  font-family: 'Canela Deck';
+  font-style: italic;
+  font-weight: 200;
+  src: url(/fonts/canela-deck/CanelaDeck-ThinItalic.otf) format('opentype');
+}

packages/design-system/lib/generate.ts

@@ -1,318 +0,0 @@
-import fs from 'node:fs'
-
-import { sortObjectByKey } from './utils.ts'
-
-type FigmaNumberVariable = {
-  name: string
-  type: 'number'
-  isAlias: boolean
-  value: number
-}
-
-type FigmaColorVariable =
-  | {
-      name: string
-      type: 'color'
-      isAlias: true
-      value: {
-        collection: string
-        name: string
-      }
-    }
-  | {
-      name: string
-      type: 'color'
-      isAlias: false
-      value: string
-    }
-
-type FigmaDropShadowEffect = {
-  type: 'DROP_SHADOW'
-  color: {
-    r: number
-    g: number
-    b: number
-    a: number
-  }
-  offset: {
-    x: number
-    y: number
-  }
-  radius: number
-  spread: number
-}
-
-type FigmaEffectVariable = {
-  name: string
-  type: 'effect'
-  isAlias: boolean
-  value: {
-    effects: Array<FigmaDropShadowEffect>
-  }
-}
-
-type FigmaTypographyValue = {
-  fontSize: number
-  fontFamily: string
-  fontWeight: 'Black' | 'Bold' | 'SemiBold' | 'Regular'
-  lineHeight: number
-  lineHeightUnit: 'PIXELS' | 'PERCENT'
-  letterSpacing: number
-  letterSpacingUnit: 'PIXELS' | 'PERCENT'
-  textCase: 'UPPER' | 'ORIGINAL'
-  textDecoration: 'NONE'
-}
-
-type FigmaTypographyVariable = {
-  name: string
-  type: 'typography'
-  isAlias: boolean
-  value: FigmaTypographyValue
-}
-
-type FigmaVariable =
-  | FigmaNumberVariable
-  | FigmaColorVariable
-  | FigmaEffectVariable
-  | FigmaTypographyVariable
-
-type FigmaMode = {
-  name: string
-  variables: FigmaVariable[]
-}
-
-type FigmaCollection = {
-  name: string
-  modes: FigmaMode[]
-}
-
-type FigmaVariableData = {
-  version: string
-  metadata: unknown
-  collections: FigmaCollection[]
-}
-
-function kebabify(str: string) {
-  return str.replaceAll('/', '-').replaceAll(' ', '-').replace(/\(|\)/g, '')
-}
-
-// This parses output JSON from https://github.com/mark-nicepants/variables2json-docs
-const json: FigmaVariableData = JSON.parse(
-  fs.readFileSync('./variables.json', { encoding: 'utf-8' })
-)
-
-const colorGroupsByMode: Record<
-  string,
-  Record<string, Record<string, string>>
-> = {}
-const allColorsByMode: Record<string, Record<string, string>> = {}
-const allTokens: Record<string, string> = {}
-const allTypographyTokens: Record<string, string | number> = {}
-const allNumberedTokens: Record<string, string> = {}
-
-json.collections.forEach((collection) => {
-  collection.modes.forEach((mode) => {
-    mode.variables.forEach((variable) => {
-      if (variable.type === 'color') {
-        if (variable.isAlias === true) {
-          // Token
-          const name = kebabify(variable.name)
-          const value = kebabify(variable.value.name)
-
-          allTokens[name] = value
-        } else {
-          const name = kebabify(variable.name)
-          const value = variable.value.replaceAll(' ', '').toLowerCase()
-
-          // Assign all colors per mode
-          const parsedModeName = mode.name
-            .split(' ')
-            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-            .join('')
-
-          if (!allColorsByMode[parsedModeName]) {
-            allColorsByMode[parsedModeName] = {}
-          }
-          allColorsByMode[parsedModeName][name] = value
-
-          const parts = name.split('-')
-          const groupName = parts[0]
-          if (!colorGroupsByMode[parsedModeName]) {
-            colorGroupsByMode[parsedModeName] = {}
-          }
-          if (!colorGroupsByMode[parsedModeName][groupName]) {
-            colorGroupsByMode[parsedModeName][groupName] = {}
-          }
-
-          colorGroupsByMode[parsedModeName][groupName][name] = value
-        }
-      } else if (variable.type === 'typography') {
-        // Make variables for each value
-        const name = 'typography-' + kebabify(variable.name)
-
-        Object.keys(variable.value).forEach((valueKey) => {
-          const value = variable.value[valueKey as keyof FigmaTypographyValue]
-          const typeographyVal = `${name}-${valueKey}`
-
-          const unitValue =
-            variable.value[`${valueKey}Unit` as keyof FigmaTypographyValue]
-
-          if (unitValue) {
-            if (unitValue === 'PERCENT') {
-              allTypographyTokens[typeographyVal] = value + '%'
-              return
-            } else if (unitValue === 'PIXELS') {
-              allTypographyTokens[typeographyVal] = value + 'px'
-              return
-            }
-          }
-
-          // Skip making css variables for units, they are already handled
-          if (valueKey.includes('Unit')) {
-            return
-          }
-
-          if (valueKey === 'fontSize') {
-            allTypographyTokens[typeographyVal] = value + 'px'
-            return
-          }
-
-          allTypographyTokens[typeographyVal] = value
-        })
-      } else if (variable.type === 'number') {
-        if (collection.name === 'Text sizes') {
-          const modeName = kebabify(mode.name)
-          const name = `typography-${kebabify(variable.name)}-${modeName}-fontSize`
-          allTypographyTokens[name] = variable.value.toString() + 'px'
-          return
-        } else if (collection.name === 'Layout') {
-          const collectionName = kebabify(collection.name)
-          const modeName = kebabify(mode.name)
-
-          const name = `${collectionName}-${modeName}-${kebabify(variable.name)}`
-          allNumberedTokens[name] = variable.value + 'px'
-          return
-        } else if (collection.name === 'Spacing') {
-          const collectionName = kebabify(collection.name)
-
-          let unitName = variable.name
-
-          // Special namings for spacing
-          if (unitName === 'x025') {
-            unitName = 'x-quarter'
-          } else if (unitName === 'x05') {
-            unitName = 'x-half'
-          } else if (unitName === 'x15') {
-            unitName = 'x-one-and-half'
-          }
-
-          const name = `${collectionName}-${kebabify(unitName)}`
-          allNumberedTokens[name] = variable.value + 'px'
-          return
-        }
-        const collectionName = kebabify(collection.name)
-
-        const name = `${collectionName}-${kebabify(variable.name)}`
-        allNumberedTokens[name] = variable.value + 'px'
-      }
-    })
-  })
-})
-
-// Create ts file with all colors and color tokens for displaying swatches in Storybook
-const tsOutput = [
-  '/* This file is generated, do not edit manually! */',
-  `export const colors = ${JSON.stringify(allColorsByMode, null, 2)} as const`,
-  '',
-  `export const tokens = ${JSON.stringify(allTokens, null, 2)} as const`,
-  '',
-]
-for (const [modeName, values] of Object.entries(colorGroupsByMode)) {
-  tsOutput.push(`export const ${modeName} = { `)
-  for (const [name, value] of Object.entries(values)) {
-    tsOutput.push(`${name}: ${JSON.stringify(value, null, 2)},`)
-  }
-  tsOutput.push('} as const;')
-  tsOutput.push('')
-}
-fs.writeFileSync('./styles/colors.ts', tsOutput.join('\n'), {
-  encoding: 'utf-8',
-})
-
-// Write a css file for each mode available of core colors
-const cssOutput = [
-  '/* This file is generated, do not edit manually! */',
-  ':root {',
-]
-for (const [, values] of Object.entries(sortObjectByKey(allColorsByMode))) {
-  for (const [name, value] of Object.entries(sortObjectByKey(values))) {
-    cssOutput.push(`  --${name}: ${value};`)
-  }
-}
-cssOutput.push('}')
-cssOutput.push('') // New line at end of file
-fs.writeFileSync(`./styles/modes.css`, cssOutput.join('\n'), {
-  encoding: 'utf-8',
-})
-
-// All css files, regardless of mode, should have the same tokens. Generate one file for all tokens
-const cssTokensOutput = [
-  '/* This file is generated, do not edit manually! */',
-  ':root {',
-]
-for (const [token, value] of Object.entries(sortObjectByKey(allTokens))) {
-  cssTokensOutput.push(`  --${token}: var(--${value});`)
-}
-cssTokensOutput.push('}')
-cssTokensOutput.push('') // New line at end of file
-fs.writeFileSync(`./styles/tokens.css`, cssTokensOutput.join('\n'), {
-  encoding: 'utf-8',
-})
-
-// All css files, regardless of mode, should have the same typography tokens.
-const typographyOutput = [
-  '/* This file is generated, do not edit manually! */',
-  ':root {',
-]
-for (const [token, value] of Object.entries(
-  sortObjectByKey(allTypographyTokens)
-)) {
-  // TODO: handle fontSize for other consumers than CSS modules
-  // Css modules needs fontsizes to be written as numerical values appended with the unit
-  const isNumericalValue =
-    typeof value === 'number' ||
-    token.includes('fontSize') ||
-    token.includes('lineHeight') ||
-    token.includes('letterSpacing')
-
-  const valueOutput = isNumericalValue ? value : `'${value.toLowerCase()}'`
-
-  typographyOutput.push(`  --${token}: ${valueOutput};`)
-}
-typographyOutput.push('}')
-typographyOutput.push('') // New line at end of file
-fs.writeFileSync(`./styles/typography.css`, typographyOutput.join('\n'), {
-  encoding: 'utf-8',
-})
-
-// All css files, regardless of mode, should have the same typography tokens.
-const numberedTokensOutput = [
-  '/* This file is generated, do not edit manually! */',
-  ':root {',
-]
-for (const [token, value] of Object.entries(
-  sortObjectByKey(allNumberedTokens)
-)) {
-  const valueOutput = value
-
-  numberedTokensOutput.push(`  --${token}: ${valueOutput};`)
-}
-numberedTokensOutput.push('}')
-numberedTokensOutput.push('') // New line at end of file
-fs.writeFileSync(
-  `./styles/numberedTokens.css`,
-  numberedTokensOutput.join('\n'),
-  {
-    encoding: 'utf-8',
-  }
-)

packages/design-system/lib/index.mdx

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Introduction" />
+
+# Scandic Hotels design system ✨
+
+## Components
+
+### File structure
+
+```
+[Component]
+├── Compositions/                 # A folder with Storybook stories to showcase compositions with other components
+├──── [CompositionX].stories.tsx  # Storybook stories that showcase component compositions
+├── [component].module.css          # The CSS for the component
+├── [Component].stories.tsx       # Storybook stories for the component, without compositions
+├── [Component].tsx               # The main component file
+├── index.tsx                     # Entrypoint for the component exports
+├── types.ts                      # TypeScript typings for the component
+└── variants.ts                   # Class Variance Authority configuration for variants of the component
+```
+
+### Components
+
+Each component of the design system is defined in `lib/components`.
+
+Each component has an `index.tsx` file that exports the component and its optional subcomponents. Subcomponents are components that are meant to be used together/nested with the component.
+
+The components that are considered public API from a consumer standpoint **must** have Storybook stories that showcases and documents their use. It should at least contain one default story that showcases the component by itself in its default state. More stories are added to showcase other variants or usages of the component.
+
+Styling is done with CSS modules.
+
+Variants are implemented with [Class Variance Authority](https://cva.style/).
+
+The typings for each components live in their respective `types.ts` file inside the component folder.

packages/design-system/lib/new.ts

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

packages/design-system/lib/style-current.css

@@ -1,6 +0,0 @@
-@import url('./styles/globals.css');
-@import url('./styles/typography.css');
-@import url('./styles/tokens.css');
-
-/* Stylesheet specific for theme */
-@import url('./styles/old.css');

packages/design-system/lib/style-new.css

@@ -1,8 +0,0 @@
-@import url('./styles/globals.css');
-@import url('./styles/typography.css');
-@import url('./styles/tokens.css');
-@import url('./styles/numberedTokens.css');
-@import url('./styles/modes.css');
-
-/* Stylesheet specific for theme */
-@import url('./styles/new.css');

packages/design-system/lib/style.css

@@ -0,0 +1,10 @@
+@import url(./styles/globals.css);
+@import url(./styles/impl.css);
+@import url(./styles/base.css);
+@import url(./styles/downtown-camper.css);
+@import url(./styles/grand-hotel.css);
+@import url(./styles/haymarket.css);
+@import url(./styles/hotel-norge.css);
+@import url(./styles/marski.css);
+@import url(./styles/scandic-go.css);
+@import url(./styles/scandic.css);

packages/design-system/lib/styles/base.css

@@ -0,0 +1,119 @@
+/* This file is generated, do not edit manually! */
+:root {
+  /* Values */
+  --Border-width-lg: 3px;
+  --Border-width-md: 2px;
+  --Border-width-none: 0px;
+  --Border-width-sm: 1px;
+  --BoxShadow-Level-1: 0 0 2 1 rgba(0, 0, 0, 0.1);
+  --BoxShadow-Level-2: 0 0 4 2 rgba(0, 0, 0, 0.1);
+  --BoxShadow-Level-3: 0 0 8 3 rgba(0, 0, 0, 0.1);
+  --BoxShadow-Level-4: 0 0 14 6 rgba(0, 0, 0, 0.1);
+  --Breakpoints-max-width: 767px;
+  --Breakpoints-min-width: 320px;
+  --Columns-Column: 4px;
+  --Corner-radius-lg: 12px;
+  --Corner-radius-md: 8px;
+  --Corner-radius-rounded: 250px;
+  --Corner-radius-sm: 4px;
+  --Corner-radius-xl: 16px;
+  --Font-family-Body: 'Fira sans';
+  --Font-family-Decorative: 'Biro Script Plus';
+  --Font-family-Title: 'Brandon Text';
+  --Font-weight-Black: 900;
+  --Font-weight-Bold: 700;
+  --Font-weight-Extra-Bold: 800;
+  --Font-weight-Medium: 500;
+  --Font-weight-Regular-bold: 450;
+  --Font-weight-Regular: 400;
+  --Font-weight-Semi-Bold: 600;
+  --Gutter-max-width: 16px;
+  --Gutter-min-width: 16px;
+  --Icon-2xs: 16px;
+  --Icon-lg: 40px;
+  --Icon-md: 32px;
+  --Icon-sm: 24px;
+  --Icon-xl: 42px;
+  --Icon-xs: 20px;
+  --Line-height-xs: 100px;
+  --Margin-Margin-max: 16px;
+  --Margin-Margin-min: 16px;
+  --Neutral-0: #fcfcfc;
+  --Neutral-100: #141414;
+  --Neutral-10: #f0f0f0;
+  --Neutral-15: #e9e9e9;
+  --Neutral-20: #d9d9d9;
+  --Neutral-30: #bfbfbf;
+  --Neutral-40: #8c8c8c;
+  --Neutral-50: #747474;
+  --Neutral-5: #f5f5f5;
+  --Neutral-60: #575757;
+  --Neutral-70: #454545;
+  --Neutral-80: #262626;
+  --Neutral-90: #1f1f1f;
+  --Neutral-Opacity-Black-0: #1f1c1b00;
+  --Neutral-Opacity-Black-100: #1f1c1b;
+  --Neutral-Opacity-Black-10: #1f1c1b1a;
+  --Neutral-Opacity-Black-20: #1f1c1b33;
+  --Neutral-Opacity-Black-30: #1f1c1b4d;
+  --Neutral-Opacity-Black-40: #1f1c1b66;
+  --Neutral-Opacity-Black-50: #1f1c1b80;
+  --Neutral-Opacity-Black-5: #1f1c1b0d;
+  --Neutral-Opacity-Black-60: #1f1c1b99;
+  --Neutral-Opacity-Black-70: #1f1c1bb3;
+  --Neutral-Opacity-Black-80: #1f1c1bcc;
+  --Neutral-Opacity-Black-90: #1f1c1be6;
+  --Neutral-Opacity-White-0: #ffffff00;
+  --Neutral-Opacity-White-100: #ffffff;
+  --Neutral-Opacity-White-10: #ffffff1a;
+  --Neutral-Opacity-White-20: #ffffff33;
+  --Neutral-Opacity-White-30: #ffffff4d;
+  --Neutral-Opacity-White-40: #ffffff66;
+  --Neutral-Opacity-White-50: #ffffff80;
+  --Neutral-Opacity-White-5: #ffffff00;
+  --Neutral-Opacity-White-60: #ffffff99;
+  --Neutral-Opacity-White-70: #ffffffb3;
+  --Neutral-Opacity-White-80: #ffffffcc;
+  --Neutral-Opacity-White-90: #ffffffe6;
+  --Size-1100-48: 48px;
+  --Size-1300-56: 56px;
+  --Size-1500-64: 64px;
+  --Size-200-12: 12px;
+  --Size-250-14: 14px;
+  --Size-300-16: 16px;
+  --Size-350-18: 18px;
+  --Size-400-20: 20px;
+  --Size-500-24: 24px;
+  --Size-550-26: 26px;
+  --Size-600-28: 28px;
+  --Size-700-32: 32px;
+  --Size-800-36: 36px;
+  --Size-900-40: 40px;
+  --Space-x025: 2px;
+  --Space-x05: 4px;
+  --Space-x0: 0px;
+  --Space-x15: 12px;
+  --Space-x1: 8px;
+  --Space-x2: 16px;
+  --Space-x3: 24px;
+  --Space-x4: 32px;
+  --Space-x5: 40px;
+  --Space-x6: 48px;
+  --Space-x7: 56px;
+  --Space-x8: 72px;
+
+  /* Aliases */
+  --Text-size-2xl: var(--Size-800-36);
+  --Text-size-2xs: var(--Size-300-16);
+  --Text-size-3xl: var(--Size-700-32);
+  --Text-size-3xs: var(--Size-300-16);
+  --Text-size-4xl: var(--Size-800-36);
+  --Text-size-4xs: var(--Size-250-14);
+  --Text-size-5xl: var(--Size-1300-56);
+  --Text-size-5xs: var(--Size-200-12);
+  --Text-size-lg: var(--Size-500-24);
+  --Text-size-md: var(--Size-500-24);
+  --Text-size-sm: var(--Size-400-20);
+  --Text-size-xl: var(--Size-500-24);
+  --Text-size-xs: var(--Size-350-18);
+}

packages/design-system/lib/styles/base.js

@@ -0,0 +1,114 @@
+/* This file is generated, do not edit manually! */
+export const theme = {
+  'Neutral/0': '#FCFCFC',
+  'Neutral/5': '#F5F5F5',
+  'Neutral/10': '#F0F0F0',
+  'Neutral/15': '#E9E9E9',
+  'Neutral/20': '#D9D9D9',
+  'Neutral/30': '#BFBFBF',
+  'Neutral/40': '#8C8C8C',
+  'Neutral/50': '#747474',
+  'Neutral/60': '#575757',
+  'Neutral/70': '#454545',
+  'Neutral/80': '#262626',
+  'Neutral/90': '#1F1F1F',
+  'Neutral/100': '#141414',
+  'Neutral/Opacity/White/100': '#FFFFFF',
+  'Neutral/Opacity/White/90': '#FFFFFFE6',
+  'Neutral/Opacity/White/80': '#FFFFFFCC',
+  'Neutral/Opacity/White/70': '#FFFFFFB3',
+  'Neutral/Opacity/White/60': '#FFFFFF99',
+  'Neutral/Opacity/White/50': '#FFFFFF80',
+  'Neutral/Opacity/White/40': '#FFFFFF66',
+  'Neutral/Opacity/White/30': '#FFFFFF4D',
+  'Neutral/Opacity/White/20': '#FFFFFF33',
+  'Neutral/Opacity/White/10': '#FFFFFF1A',
+  'Neutral/Opacity/White/5': '#FFFFFF00',
+  'Neutral/Opacity/White/0': '#FFFFFF00',
+  'Neutral/Opacity/Black/100': '#1F1C1B',
+  'Neutral/Opacity/Black/90': '#1F1C1BE6',
+  'Neutral/Opacity/Black/80': '#1F1C1BCC',
+  'Neutral/Opacity/Black/70': '#1F1C1BB3',
+  'Neutral/Opacity/Black/60': '#1F1C1B99',
+  'Neutral/Opacity/Black/50': '#1F1C1B80',
+  'Neutral/Opacity/Black/40': '#1F1C1B66',
+  'Neutral/Opacity/Black/30': '#1F1C1B4D',
+  'Neutral/Opacity/Black/20': '#1F1C1B33',
+  'Neutral/Opacity/Black/10': '#1F1C1B1A',
+  'Neutral/Opacity/Black/5': '#1F1C1B0D',
+  'Neutral/Opacity/Black/0': '#1F1C1B00',
+  'Margin/Margin-min': 16,
+  'Breakpoints/min-width': 320,
+  'Breakpoints/max-width': 767,
+  'Margin/Margin-max': 16,
+  'Columns/Column': 4,
+  'Gutter/min-width': 16,
+  'Gutter/max-width': 16,
+  'Text size/xs': 18,
+  'Text size/sm': 20,
+  'Text size/xl': 24,
+  'Text size/2xl': 36,
+  'Text size/3xl': 32,
+  'Text size/4xl': 36,
+  'Text size/5xl': 56,
+  'Text size/md': 24,
+  'Font family/Title': 'Brandon Text',
+  'Font family/Body': 'Fira sans',
+  'Font family/Decorative': 'Biro Script Plus',
+  'Font weight/Regular': 400,
+  'Font weight/Regular bold': 450,
+  'Font weight/Medium': 500,
+  'Font weight/Semi Bold': 600,
+  'Font weight/Bold': 700,
+  'Font weight/Extra Bold': 800,
+  'Font weight/Black': 900,
+  'Size/200-12': 12,
+  'Size/250-14': 14,
+  'Size/300-16': 16,
+  'Size/350-18': 18,
+  'Size/400-20': 20,
+  'Size/500-24': 24,
+  'Size/550-26': 26,
+  'Size/600-28': 28,
+  'Size/700-32': 32,
+  'Size/800-36': 36,
+  'Size/900-40': 40,
+  'Size/1100-48': 48,
+  'Size/1300-56': 56,
+  'Size/1500-64': 64,
+  'Line height/xs': 100,
+  'Corner radius/sm': 4,
+  'Border width/sm': 1,
+  'Border width/md': 2,
+  'Border width/lg': 3,
+  'Corner radius/md': 8,
+  'Corner radius/lg': 12,
+  'Corner radius/xl': 16,
+  'Corner radius/rounded': 250,
+  'Space/x025': 2,
+  'Space/x05': 4,
+  'Space/x1': 8,
+  'Space/x15': 12,
+  'Space/x2': 16,
+  'Space/x3': 24,
+  'Space/x4': 32,
+  'Space/x5': 40,
+  'Space/x6': 48,
+  'Space/x7': 56,
+  'Space/x8': 72,
+  'Icon/2xs': 16,
+  'Icon/xs': 20,
+  'Icon/sm': 24,
+  'Icon/md': 32,
+  'Icon/lg': 40,
+  'Icon/xl': 42,
+  'Text size/5xs': 12,
+  'Text size/4xs': 14,
+  'Text size/3xs': 16,
+  'Text size/2xs': 16,
+  'Text size/lg': 24,
+  'BoxShadow-Level 1': '0 0 2 1 rgba(0, 0, 0, 0.1)',
+  'BoxShadow-Level 2': '0 0 4 2 rgba(0, 0, 0, 0.1)',
+  'BoxShadow-Level 3': '0 0 8 3 rgba(0, 0, 0, 0.1)',
+  'BoxShadow-Level 4': '0 0 14 6 rgba(0, 0, 0, 0.1)',
+}

packages/design-system/lib/styles/colors.ts

@@ -1,628 +0,0 @@
-/* This file is generated, do not edit manually! */
-export const colors = {
-  Scandic: {
-    'Scandic-Brand-Scandic-Red': '#cd0921',
-    'Scandic-Brand-Burgundy': '#4d001b',
-    'Scandic-Brand-Pale-Peach': '#f7e1d5',
-    'Scandic-Brand-Dark-Green': '#093021',
-    'Scandic-Brand-Light-Green': '#d2edaf',
-    'Scandic-Brand-Dark-Grey': '#291710',
-    'Scandic-Brand-Warm-White': '#faf6f2',
-    'Scandic-Brand-Light-Blue': '#b5e0ff',
-    'Scandic-Brand-Dark-Blue': '#0d1440',
-    'Scandic-Brand-Pale-Yellow': '#fff0c2',
-    'Scandic-Red-00': '#ffebeb',
-    'Scandic-Red-10': '#f7c1c2',
-    'Scandic-Red-20': '#f79499',
-    'Scandic-Red-30': '#f26b74',
-    'Scandic-Red-40': '#ed4251',
-    'Scandic-Red-50': '#e32034',
-    'Scandic-Red-60': '#cd0921',
-    'Scandic-Red-70': '#ad0015',
-    'Scandic-Red-80': '#8d0011',
-    'Scandic-Red-90': '#6d000d',
-    'Scandic-Red-100': '#4d001b',
-    'Scandic-Peach-00': '#fff3ed',
-    'Scandic-Beige-00': '#faf6f2',
-    'Scandic-Beige-10': '#f2ece6',
-    'Scandic-Beige-20': '#e3d9d1',
-    'Scandic-Beige-30': '#d1c4ba',
-    'Scandic-Beige-40': '#b8a79a',
-    'Scandic-Beige-50': '#9c8a7e',
-    'Scandic-Beige-60': '#806e63',
-    'Scandic-Beige-70': '#6b584d',
-    'Scandic-Beige-80': '#533f35',
-    'Scandic-Beige-90': '#3e2b23',
-    'Scandic-Beige-100': '#291710',
-    'Scandic-Peach-10': '#f7e1d5',
-    'Scandic-Peach-20': '#f4d5c8',
-    'Scandic-Peach-30': '#f0c1b6',
-    'Scandic-Peach-40': '#e9aba3',
-    'Scandic-Peach-50': '#de9490',
-    'Scandic-Peach-60': '#cd797c',
-    'Scandic-Peach-70': '#b05b65',
-    'Scandic-Peach-80': '#8f4350',
-    'Scandic-Peach-90': '#642636',
-    'Scandic-Peach-100': '#4d0f25',
-    'Scandic-Green-00': '#f3fce8',
-    'Scandic-Green-10': '#e1f3ca',
-    'Scandic-Green-20': '#d2edaf',
-    'Scandic-Green-30': '#acdb8a',
-    'Scandic-Green-40': '#7cb865',
-    'Scandic-Green-50': '#539e49',
-    'Scandic-Green-60': '#348337',
-    'Scandic-Green-70': '#256931',
-    'Scandic-Green-80': '#164e29',
-    'Scandic-Green-90': '#093021',
-    'Scandic-Green-100': '#091f16',
-    'Scandic-Blue-00': '#e8f6ff',
-    'Scandic-Blue-10': '#cfebff',
-    'Scandic-Blue-20': '#b5e0ff',
-    'Scandic-Blue-30': '#93c9f5',
-    'Scandic-Blue-40': '#79aee7',
-    'Scandic-Blue-50': '#5b8fd4',
-    'Scandic-Blue-60': '#3f6dbd',
-    'Scandic-Blue-70': '#284ea0',
-    'Scandic-Blue-80': '#18347f',
-    'Scandic-Blue-90': '#0d1f5f',
-    'Scandic-Blue-100': '#0d1440',
-    'Scandic-Yellow-00': '#fff8e3',
-    'Scandic-Yellow-10': '#fff0c2',
-    'Scandic-Yellow-20': '#fade89',
-    'Scandic-Yellow-30': '#f7ce52',
-    'Scandic-Yellow-40': '#edb532',
-    'Scandic-Yellow-50': '#e59515',
-    'Scandic-Yellow-60': '#d17308',
-    'Scandic-Yellow-70': '#a85211',
-    'Scandic-Yellow-80': '#7d370f',
-    'Scandic-Yellow-90': '#4f2313',
-    'Scandic-Yellow-100': '#301508',
-    'Go-Brand-Lavender': '#dcd7ff',
-    'Go-Beige-00': '#faf8f2',
-    'Go-Beige-10': '#f0ede4',
-    'Go-Beige-20': '#e0dcce',
-    'Go-Beige-30': '#c8c4b6',
-    'Go-Beige-40': '#b0aca0',
-    'Go-Beige-50': '#918f83',
-    'Go-Beige-60': '#78766d',
-    'Go-Beige-70': '#63615a',
-    'Go-Beige-80': '#4f4d49',
-    'Go-Beige-90': '#373633',
-    'Go-Beige-100': '#1f1e1d',
-    'Go-Brand-Obsidian': '#2d163a',
-    'Go-Brand-Lemon': '#f5ff73',
-    'Go-Brand-Linen': '#e0dcce',
-    'Go-Brand-Chartreuse': '#85ff52',
-    'Go-Brand-Pine': '#21331f',
-    'Go-Brand-Aqua': '#73fcee',
-    'Go-Brand-Powder-rose': '#ecc8c9',
-    'Go-Brand-Coral': '#fa3737',
-    'UI-Grey-00': '#f9f6f4',
-    'UI-Opacity-White-100': '#ffffff',
-    'UI-Opacity-White-90': '#ffffffe6',
-    'UI-Opacity-White-80': '#ffffffcc',
-    'UI-Opacity-White-70': '#ffffffb3',
-    'UI-Opacity-White-60': '#ffffff99',
-    'UI-Opacity-White-50': '#ffffff80',
-    'UI-Opacity-White-40': '#ffffff66',
-    'UI-Opacity-White-30': '#ffffff4d',
-    'UI-Opacity-White-20': '#ffffff33',
-    'UI-Opacity-White-10': '#ffffff1a',
-    'UI-Opacity-White-0': '#ffffff00',
-    'UI-Opacity-Almost-Black-100': '#1f1c1b',
-    'UI-Opacity-Almost-Black-90': '#1f1c1be6',
-    'UI-Opacity-Almost-Black-80': '#1f1c1bcc',
-    'UI-Opacity-Almost-Black-70': '#1f1c1bb3',
-    'UI-Opacity-Almost-Black-60': '#1f1c1b99',
-    'UI-Opacity-Almost-Black-50': '#1f1c1b80',
-    'UI-Opacity-Almost-Black-40': '#1f1c1b66',
-    'UI-Opacity-Almost-Black-30': '#1f1c1b4d',
-    'UI-Opacity-Almost-Black-20': '#1f1c1b33',
-    'UI-Opacity-Almost-Black-10': '#1f1c1b1a',
-    'UI-Opacity-Almost-Black-0': '#1f1c1b00',
-    'UI-Grey-10': '#ebe8e6',
-    'UI-Grey-20': '#d6d2d0',
-    'UI-Grey-30': '#c2bdba',
-    'UI-Grey-40': '#a8a4a2',
-    'UI-Grey-50': '#8c8987',
-    'UI-Grey-60': '#787472',
-    'UI-Grey-70': '#635f5d',
-    'UI-Grey-80': '#57514e',
-    'UI-Grey-90': '#403937',
-    'UI-Grey-100': '#26201e',
-    'Go-Purple-00': '#f4f2ff',
-    'Go-Purple-10': '#dcd7ff',
-    'Go-Purple-20': '#cabffc',
-    'Go-Purple-30': '#baa7f7',
-    'Go-Purple-40': '#ab8ef0',
-    'Go-Purple-50': '#9c75e6',
-    'Go-Purple-60': '#8c5bd5',
-    'Go-Purple-70': '#733cb2',
-    'Go-Purple-80': '#5e2a8c',
-    'Go-Purple-90': '#451f61',
-    'Go-Purple-100': '#2d163a',
-    'Go-Yellow-00': '#fdffe8',
-    'Go-Yellow-10': '#faffc4',
-    'Go-Yellow-20': '#f8ff9c',
-    'Go-Yellow-30': '#f5ff73',
-    'Go-Yellow-40': '#edea39',
-    'Go-Yellow-50': '#dec614',
-    'Go-Yellow-60': '#ba8d07',
-    'Go-Yellow-70': '#966400',
-    'Go-Yellow-80': '#754403',
-    'Go-Yellow-90': '#572701',
-    'Go-Yellow-100': '#3b1300',
-    'Go-Green-00': '#edffe5',
-    'Go-Green-10': '#cdffb8',
-    'Go-Green-20': '#a7ff82',
-    'Go-Green-30': '#85ff52',
-    'Go-Green-40': '#66e03a',
-    'Go-Green-50': '#45b222',
-    'Go-Green-60': '#2e7f18',
-    'Go-Green-70': '#2a601e',
-    'Go-Green-80': '#26461f',
-    'Go-Green-90': '#21331f',
-    'Go-Green-100': '#162115',
-  },
-} as const
-
-export const tokens = {
-  'Base-Background-Primary-Normal': 'Scandic-Beige-00',
-  'Base-Background-Primary-Elevated': 'Scandic-Beige-00',
-  'Base-Surface-Primary-light-Normal': 'UI-Opacity-White-100',
-  'Base-Surface-Primary-dark-Normal': 'Scandic-Peach-10',
-  'Base-Surface-Secondary-light-Normal': 'Scandic-Beige-00',
-  'Base-Surface-Secondary-light-Hover': 'Scandic-Peach-10',
-  'Base-Surface-Secondary-light-Hover-alt': 'Scandic-Peach-20',
-  'Base-Surface-Primary-dark-Hover': 'Scandic-Peach-20',
-  'Base-Surface-Primary-light-Hover': 'UI-Grey-00',
-  'Base-Surface-Primary-light-Hover-alt': 'Scandic-Beige-10',
-  'Base-Surface-Subtle-Normal': 'Scandic-Beige-10',
-  'Base-Surface-Subtle-Hover': 'Scandic-Beige-20',
-  'Base-Text-High-contrast': 'Scandic-Red-100',
-  'Base-Icon-Low-contrast': 'Scandic-Peach-70',
-  'Base-Text-Medium-contrast': 'Scandic-Peach-80',
-  'Base-Text-Accent': 'Scandic-Red-60',
-  'Base-Text-Disabled': 'UI-Grey-40',
-  'Base-Text-Inverted': 'UI-Opacity-White-100',
-  'Base-Border-Normal': 'Scandic-Beige-40',
-  'Base-Border-Hover': 'Scandic-Peach-80',
-  'Base-Border-Subtle': 'Scandic-Beige-20',
-  'Base-Border-Inverted': 'UI-Opacity-White-100',
-  'Base-Button-Primary-Fill-Normal': 'Scandic-Red-60',
-  'Base-Interactive-Surface-Primary-normal': 'Scandic-Red-80',
-  'Base-Interactive-Surface-Secondary-normal': 'Scandic-Green-70',
-  'Base-Interactive-Surface-Tertiary-normal': 'Scandic-Blue-60',
-  'Base-Button-Primary-Fill-Hover': 'Scandic-Red-70',
-  'Base-Button-Primary-Fill-Disabled': 'UI-Grey-20',
-  'Base-Button-Primary-On-Fill-Normal': 'UI-Opacity-White-100',
-  'Base-Button-Primary-On-Fill-Hover': 'UI-Opacity-White-100',
-  'Base-Button-Primary-On-Fill-Disabled': 'UI-Grey-40',
-  'Base-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
-  'Base-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
-  'Base-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
-  'Base-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
-  'Base-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
-  'Base-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
-  'Base-Button-Secondary-On-Fill-Normal': 'Scandic-Red-100',
-  'Base-Button-Secondary-On-Fill-Hover': 'Scandic-Peach-80',
-  'Base-Button-Secondary-On-Fill-Disabled': 'UI-Grey-40',
-  'Base-Button-Secondary-Border-Normal': 'Scandic-Red-100',
-  'Base-Button-Secondary-Border-Hover': 'Scandic-Peach-80',
-  'Base-Button-Secondary-Border-Disabled': 'UI-Grey-30',
-  'Base-Button-Tertiary-Fill-Normal': 'Scandic-Red-100',
-  'Base-Button-Tertiary-Fill-Hover': 'Scandic-Red-90',
-  'Base-Button-Tertiary-Fill-Disabled': 'UI-Grey-20',
-  'Base-Button-Tertiary-On-Fill-Normal': 'UI-Opacity-White-100',
-  'Base-Button-Tertiary-On-Fill-Hover': 'UI-Opacity-White-100',
-  'Base-Button-Tertiary-On-Fill-Disabled': 'UI-Grey-40',
-  'Base-Button-Tertiary-Border-Normal': 'UI-Opacity-White-0',
-  'Base-Button-Tertiary-Border-Hover': 'UI-Opacity-White-0',
-  'Base-Button-Tertiary-Border-Disabled': 'UI-Opacity-White-0',
-  'Base-Button-Inverted-Fill-Normal': 'UI-Opacity-White-100',
-  'Base-Button-Inverted-Fill-Hover': 'Scandic-Beige-10',
-  'Base-Button-Inverted-Fill-Hover-alt': 'Scandic-Peach-10',
-  'Base-Button-Inverted-Fill-Disabled': 'UI-Grey-20',
-  'Base-Button-Inverted-On-Fill-Normal': 'Scandic-Red-100',
-  'Base-Button-Inverted-On-Fill-Hover': 'Scandic-Red-90',
-  'Base-Button-Inverted-On-Fill-Disabled': 'UI-Grey-40',
-  'Base-Button-Inverted-Border-Normal': 'UI-Opacity-White-0',
-  'Base-Button-Inverted-Border-Hover': 'UI-Opacity-White-0',
-  'Base-Button-Inverted-Border-Disabled': 'UI-Opacity-White-0',
-  'UI-Text-High-contrast': 'UI-Grey-100',
-  'UI-Input-Controls-Surface-Normal': 'UI-Opacity-White-100',
-  'UI-Semantic-Information': 'Scandic-Blue-70',
-  'UI-Semantic-Success': 'Scandic-Green-60',
-  'UI-Semantic-Warning': 'Scandic-Yellow-60',
-  'UI-Semantic-Error': 'Scandic-Red-70',
-  'UI-Input-Controls-Surface-Hover': 'Scandic-Beige-10',
-  'UI-Input-Controls-Surface-Disabled': 'UI-Grey-10',
-  'UI-Input-Controls-Fill-Normal': 'UI-Opacity-White-100',
-  'UI-Input-Controls-Fill-Selected': 'Scandic-Blue-80',
-  'UI-Input-Controls-Fill-Selected-hover': 'Scandic-Blue-70',
-  'UI-Input-Controls-Fill-Disabled': 'UI-Grey-60',
-  'UI-Input-Controls-On-Fill-Normal': 'UI-Opacity-White-100',
-  'UI-Input-Controls-Border-Normal': 'Scandic-Beige-50',
-  'UI-Input-Controls-Border-Hover': 'Scandic-Beige-70',
-  'UI-Input-Controls-Border-Focus': 'Scandic-Blue-80',
-  'UI-Input-Controls-Border-Disabled': 'UI-Grey-40',
-  'UI-Input-Controls-Border-Error': 'Scandic-Red-70',
-  'UI-Input-Controls-Border-KeyboardFocus': 'Scandic-Blue-50',
-  'UI-Text-Medium-contrast': 'UI-Grey-80',
-  'UI-Text-Active': 'Scandic-Blue-90',
-  'UI-Text-Error': 'Scandic-Red-70',
-  'UI-Text-Placeholder': 'UI-Grey-60',
-  'Primary-Light-Surface-Normal': 'Scandic-Peach-10',
-  'Primary-Light-Surface-Hover': 'Scandic-Peach-20',
-  'Primary-Light-On-Surface-Text': 'Scandic-Red-100',
-  'Primary-Light-On-Surface-Accent': 'Scandic-Red-60',
-  'Primary-Light-On-Surface-Divider': 'Scandic-Peach-30',
-  'Primary-Light-On-Surface-Divider-subtle': 'Scandic-Beige-10',
-  'Primary-Light-Button-Primary-Fill-Normal': 'Scandic-Red-100',
-  'Primary-Light-Button-Primary-Fill-Hover': 'Scandic-Red-80',
-  'Primary-Light-Button-Primary-Fill-Disabled': 'UI-Opacity-Almost-Black-10',
-  'Primary-Light-Button-Primary-On-Fill-Normal': 'Scandic-Peach-10',
-  'Primary-Light-Button-Primary-On-Fill-Hover': 'Scandic-Peach-30',
-  'Primary-Light-Button-Primary-On-Fill-Disabled': 'UI-Opacity-Almost-Black-20',
-  'Primary-Light-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
-  'Primary-Light-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
-  'Primary-Light-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
-  'Primary-Light-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
-  'Primary-Light-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
-  'Primary-Light-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
-  'Primary-Light-Button-Secondary-On-Fill-Normal': 'Scandic-Red-100',
-  'Primary-Light-Button-Secondary-On-Fill-Hover': 'Scandic-Red-80',
-  'Primary-Light-Button-Secondary-On-Fill-Disabled':
-    'UI-Opacity-Almost-Black-20',
-  'Primary-Light-Button-Secondary-Border-Normal': 'Scandic-Red-100',
-  'Primary-Light-Button-Secondary-Border-Hover': 'Scandic-Red-80',
-  'Primary-Light-Button-Secondary-Border-Disabled':
-    'UI-Opacity-Almost-Black-20',
-  'Primary-Dim-Surface-Normal': 'Scandic-Peach-30',
-  'Primary-Dim-Surface-Hover': 'Scandic-Peach-40',
-  'Primary-Dim-On-Surface-Text': 'Scandic-Red-100',
-  'Primary-Dim-On-Surface-Accent': 'Scandic-Peach-80',
-  'Primary-Dim-On-Surface-Divider': 'Scandic-Peach-40',
-  'Primary-Dim-Button-Primary-Fill-Normal': 'Scandic-Red-100',
-  'Primary-Dim-Button-Primary-Fill-Hover': 'Scandic-Red-80',
-  'Primary-Dim-Button-Primary-Fill-Disabled': 'UI-Opacity-Almost-Black-10',
-  'Primary-Dim-Button-Primary-On-Fill-Normal': 'Scandic-Peach-10',
-  'Primary-Dim-Button-Primary-On-Fill-Hover': 'Scandic-Peach-30',
-  'Primary-Dim-Button-Primary-On-Fill-Disabled': 'UI-Opacity-Almost-Black-20',
-  'Primary-Dim-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
-  'Primary-Dim-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
-  'Primary-Dim-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
-  'Primary-Dim-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
-  'Primary-Dim-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
-  'Primary-Dim-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
-  'Primary-Dim-Button-Secondary-On-Fill-Normal': 'Scandic-Red-100',
-  'Primary-Dim-Button-Secondary-On-Fill-Hover': 'Scandic-Red-80',
-  'Primary-Dim-Button-Secondary-On-Fill-Disabled': 'UI-Opacity-Almost-Black-20',
-  'Primary-Dim-Button-Secondary-Border-Normal': 'Scandic-Red-100',
-  'Primary-Dim-Button-Secondary-Border-Hover': 'Scandic-Red-80',
-  'Primary-Dim-Button-Secondary-Border-Disabled': 'UI-Opacity-Almost-Black-20',
-  'Primary-Strong-Surface-Normal': 'Scandic-Red-60',
-  'Primary-Strong-Surface-Hover': 'Scandic-Red-70',
-  'Primary-Strong-On-Surface-Text': 'UI-Opacity-White-100',
-  'Primary-Strong-On-Surface-Accent': 'Scandic-Peach-10',
-  'Primary-Strong-On-Surface-Divider': 'Scandic-Red-70',
-  'Primary-Strong-Button-Primary-Fill-Normal': 'UI-Opacity-White-100',
-  'Primary-Strong-Button-Primary-Fill-Hover': 'Scandic-Red-00',
-  'Primary-Strong-Button-Primary-Fill-Disabled': 'UI-Opacity-White-20',
-  'Primary-Strong-Button-Primary-On-Fill-Normal': 'Scandic-Red-70',
-  'Primary-Strong-Button-Primary-On-Fill-Hover': 'Scandic-Red-70',
-  'Primary-Strong-Button-Primary-On-Fill-Disabled': 'UI-Opacity-White-20',
-  'Primary-Strong-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
-  'Primary-Strong-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
-  'Primary-Strong-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
-  'Primary-Strong-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
-  'Primary-Strong-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
-  'Primary-Strong-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
-  'Primary-Strong-Button-Secondary-On-Fill-Normal': 'UI-Opacity-White-100',
-  'Primary-Strong-Button-Secondary-On-Fill-Hover': 'Scandic-Red-00',
-  'Primary-Strong-Button-Secondary-On-Fill-Disabled': 'UI-Opacity-White-20',
-  'Primary-Strong-Button-Secondary-Border-Normal': 'UI-Opacity-White-100',
-  'Primary-Strong-Button-Secondary-Border-Hover': 'Scandic-Peach-00',
-  'Primary-Strong-Button-Secondary-Border-Disabled': 'UI-Opacity-White-20',
-  'Primary-Dark-Surface-Normal': 'Scandic-Red-100',
-  'Primary-Dark-Surface-Hover': 'Scandic-Red-90',
-  'Primary-Dark-On-Surface-Text': 'Scandic-Peach-10',
-  'Primary-Dark-On-Surface-Accent': 'Scandic-Peach-50',
-  'Primary-Dark-On-Surface-Divider': 'Scandic-Peach-80',
-  'Primary-Dark-Button-Primary-Fill-Normal': 'Scandic-Peach-10',
-  'Primary-Dark-Button-Primary-Fill-Hover': 'Scandic-Peach-20',
-  'Primary-Dark-Button-Primary-Fill-Disabled': 'UI-Opacity-White-20',
-  'Primary-Dark-Button-Primary-On-Fill-Normal': 'Scandic-Red-100',
-  'Primary-Dark-Button-Primary-On-Fill-Hover': 'Scandic-Red-80',
-  'Primary-Dark-Button-Primary-On-Fill-Disabled': 'UI-Opacity-White-30',
-  'Primary-Dark-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
-  'Primary-Dark-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
-  'Primary-Dark-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
-  'Primary-Dark-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
-  'Primary-Dark-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
-  'Primary-Dark-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
-  'Primary-Dark-Button-Secondary-On-Fill-Normal': 'Scandic-Peach-10',
-  'Primary-Dark-Button-Secondary-On-Fill-Hover': 'Scandic-Peach-30',
-  'Primary-Dark-Button-Secondary-On-Fill-Disabled': 'UI-Opacity-White-30',
-  'Primary-Dark-Button-Secondary-Border-Normal': 'Scandic-Peach-10',
-  'Primary-Dark-Button-Secondary-Border-Hover': 'Scandic-Peach-30',
-  'Primary-Dark-Button-Secondary-Border-Disabled': 'UI-Opacity-White-20',
-  'Secondary-Light-Surface-Normal': 'Scandic-Green-20',
-  'Secondary-Dark-Surface-Normal': 'Scandic-Green-90',
-  'Tertiary-Light-Surface-Normal': 'Scandic-Yellow-10',
-  'Tertiary-Light-Surface-Hover': 'Scandic-Yellow-00',
-  'Tertiary-Light-On-Surface-Text': 'Scandic-Blue-100',
-  'Tertiary-Light-On-Surface-Accent': 'Scandic-Yellow-50',
-  'Tertiary-Light-On-Surface-Divider': 'Scandic-Yellow-20',
-  'Tertiary-Light-Button-Primary-Fill-Normal': 'Scandic-Blue-100',
-  'Tertiary-Light-Button-Primary-Fill-Hover': 'Scandic-Blue-90',
-  'Tertiary-Light-Button-Primary-Fill-Disabled': 'UI-Opacity-Almost-Black-10',
-  'Tertiary-Light-Button-Primary-On-Fill-Normal': 'Scandic-Yellow-10',
-  'Tertiary-Light-Button-Primary-On-Fill-Hover': 'Scandic-Yellow-00',
-  'Tertiary-Light-Button-Primary-On-Fill-Disabled':
-    'UI-Opacity-Almost-Black-20',
-  'Tertiary-Light-Button-Primary-Border-Normal': 'Scandic-Yellow-10',
-  'Tertiary-Light-Button-Primary-Border-Hover': 'Scandic-Yellow-00',
-  'Tertiary-Light-Button-Primary-Border-Disabled': 'UI-Opacity-Almost-Black-20',
-  'Tertiary-Light-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
-  'Tertiary-Light-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
-  'Tertiary-Light-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
-  'Tertiary-Light-Button-Secondary-On-Fill-Normal': 'Scandic-Blue-100',
-  'Tertiary-Light-Button-Secondary-On-Fill-Hover': 'Scandic-Blue-90',
-  'Tertiary-Light-Button-Secondary-On-Fill-Disabled':
-    'UI-Opacity-Almost-Black-20',
-  'Tertiary-Light-Button-Secondary-Border-Normal': 'Scandic-Blue-100',
-  'Tertiary-Light-Button-Secondary-Border-Hover': 'Scandic-Blue-90',
-  'Tertiary-Light-Button-Secondary-Border-Disabled':
-    'UI-Opacity-Almost-Black-20',
-  'Secondary-Dark-Surface-Hover': 'Scandic-Green-80',
-  'Secondary-Dark-On-Surface-Text': 'Scandic-Green-20',
-  'Secondary-Dark-On-Surface-Accent': 'Scandic-Green-40',
-  'Secondary-Dark-On-Surface-Divider': 'Scandic-Green-80',
-  'Secondary-Dark-Button-Primary-Fill-Normal': 'Scandic-Green-20',
-  'Secondary-Dark-Button-Primary-Fill-Hover': 'Scandic-Green-30',
-  'Secondary-Dark-Button-Primary-Fill-Disabled': 'UI-Opacity-White-10',
-  'Secondary-Dark-Button-Primary-On-Fill-Normal': 'Scandic-Green-90',
-  'Secondary-Dark-Button-Primary-On-Fill-Hover': 'Scandic-Green-80',
-  'Secondary-Dark-Button-Primary-On-Fill-Disabled': 'UI-Opacity-White-20',
-  'Secondary-Dark-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
-  'Secondary-Dark-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
-  'Secondary-Dark-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
-  'Secondary-Dark-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
-  'Secondary-Dark-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
-  'Secondary-Dark-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
-  'Secondary-Dark-Button-Secondary-On-Fill-Normal': 'Scandic-Green-20',
-  'Secondary-Dark-Button-Secondary-On-Fill-Hover': 'Scandic-Green-30',
-  'Secondary-Dark-Button-Secondary-On-Fill-Disabled': 'UI-Opacity-White-20',
-  'Secondary-Dark-Button-Secondary-Border-Normal': 'Scandic-Green-20',
-  'Secondary-Dark-Button-Secondary-Border-Hover': 'Scandic-Green-30',
-  'Secondary-Dark-Button-Secondary-Border-Disabled': 'UI-Opacity-White-20',
-  'Secondary-Light-Surface-Hover': 'Scandic-Green-20',
-  'Secondary-Light-On-Surface-Text': 'Scandic-Green-90',
-  'Secondary-Light-On-Surface-Accent': 'Scandic-Green-50',
-  'Secondary-Light-On-Surface-Divider': 'Scandic-Green-30',
-  'Secondary-Light-Button-Primary-Fill-Normal': 'Scandic-Green-90',
-  'Secondary-Light-Button-Primary-Fill-Hover': 'Scandic-Green-80',
-  'Secondary-Light-Button-Primary-Fill-Disabled': 'UI-Opacity-Almost-Black-10',
-  'Secondary-Light-Button-Primary-On-Fill-Normal': 'Scandic-Green-20',
-  'Secondary-Light-Button-Primary-On-Fill-Hover': 'Scandic-Green-30',
-  'Secondary-Light-Button-Primary-On-Fill-Disabled':
-    'UI-Opacity-Almost-Black-20',
-  'Secondary-Light-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
-  'Secondary-Light-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
-  'Secondary-Light-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
-  'Secondary-Light-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
-  'Secondary-Light-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
-  'Secondary-Light-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
-  'Secondary-Light-Button-Secondary-On-Fill-Normal': 'Scandic-Green-90',
-  'Secondary-Light-Button-Secondary-On-Fill-Hover': 'Scandic-Green-80',
-  'Secondary-Light-Button-Secondary-On-Fill-Disabled':
-    'UI-Opacity-Almost-Black-20',
-  'Secondary-Light-Button-Secondary-Border-Normal': 'Scandic-Green-90',
-  'Secondary-Light-Button-Secondary-Border-Hover': 'Scandic-Green-80',
-  'Secondary-Light-Button-Secondary-Border-Disabled':
-    'UI-Opacity-Almost-Black-20',
-  'Tertiary-Dark-Surface-Normal': 'Scandic-Blue-100',
-  'Tertiary-Dark-Surface-Hover': 'Scandic-Blue-90',
-  'Tertiary-Dark-On-Surface-Text': 'Scandic-Yellow-10',
-  'Tertiary-Dark-On-Surface-Accent': 'Scandic-Blue-40',
-  'Tertiary-Dark-Button-Primary-Fill-Normal': 'Scandic-Yellow-10',
-  'Tertiary-Dark-Button-Primary-Fill-Hover': 'Scandic-Yellow-20',
-  'Tertiary-Dark-Button-Primary-Fill-Disabled': 'UI-Opacity-White-10',
-  'Tertiary-Dark-Button-Primary-On-Fill-Normal': 'Scandic-Blue-100',
-  'Tertiary-Dark-Button-Primary-On-Fill-Hover': 'Scandic-Blue-80',
-  'Tertiary-Dark-Button-Primary-On-Fill-Disabled': 'UI-Opacity-White-20',
-  'Tertiary-Dark-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
-  'Tertiary-Dark-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
-  'Tertiary-Dark-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
-  'Tertiary-Dark-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
-  'Tertiary-Dark-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
-  'Tertiary-Dark-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
-  'Tertiary-Dark-Button-Secondary-On-Fill-Normal': 'Scandic-Yellow-10',
-  'Tertiary-Dark-Button-Secondary-On-Fill-Hover': 'Scandic-Yellow-20',
-  'Tertiary-Dark-Button-Secondary-On-Fill-Disabled': 'UI-Opacity-White-20',
-  'Tertiary-Dark-Button-Secondary-Border-Normal': 'Scandic-Yellow-10',
-  'Tertiary-Dark-Button-Secondary-Border-Hover': 'Scandic-Yellow-20',
-  'Tertiary-Dark-Button-Secondary-Border-Disabled': 'UI-Opacity-White-20',
-  'Tertiary-Dark-On-Surface-Divider': 'Scandic-Blue-80',
-  'Base-Button-Text-Fill-Normal': 'UI-Opacity-White-0',
-  'Base-Button-Text-Fill-Hover': 'UI-Opacity-White-0',
-  'Base-Button-Text-Fill-Disabled': 'UI-Opacity-White-0',
-  'Base-Button-Text-On-Fill-Normal': 'Scandic-Red-100',
-  'Base-Button-Text-On-Fill-Hover': 'Scandic-Peach-80',
-  'Base-Button-Text-On-Fill-Disabled': 'UI-Grey-40',
-  'Base-Button-Text-Border-Normal': 'UI-Opacity-White-0',
-  'Base-Button-Text-Border-Hover': 'UI-Opacity-White-0',
-  'Base-Button-Text-Border-Disabled': 'UI-Opacity-White-0',
-} as const
-
-export const Scandic = {
-  Scandic: {
-    'Scandic-Brand-Scandic-Red': '#cd0921',
-    'Scandic-Brand-Burgundy': '#4d001b',
-    'Scandic-Brand-Pale-Peach': '#f7e1d5',
-    'Scandic-Brand-Dark-Green': '#093021',
-    'Scandic-Brand-Light-Green': '#d2edaf',
-    'Scandic-Brand-Dark-Grey': '#291710',
-    'Scandic-Brand-Warm-White': '#faf6f2',
-    'Scandic-Brand-Light-Blue': '#b5e0ff',
-    'Scandic-Brand-Dark-Blue': '#0d1440',
-    'Scandic-Brand-Pale-Yellow': '#fff0c2',
-    'Scandic-Red-00': '#ffebeb',
-    'Scandic-Red-10': '#f7c1c2',
-    'Scandic-Red-20': '#f79499',
-    'Scandic-Red-30': '#f26b74',
-    'Scandic-Red-40': '#ed4251',
-    'Scandic-Red-50': '#e32034',
-    'Scandic-Red-60': '#cd0921',
-    'Scandic-Red-70': '#ad0015',
-    'Scandic-Red-80': '#8d0011',
-    'Scandic-Red-90': '#6d000d',
-    'Scandic-Red-100': '#4d001b',
-    'Scandic-Peach-00': '#fff3ed',
-    'Scandic-Beige-00': '#faf6f2',
-    'Scandic-Beige-10': '#f2ece6',
-    'Scandic-Beige-20': '#e3d9d1',
-    'Scandic-Beige-30': '#d1c4ba',
-    'Scandic-Beige-40': '#b8a79a',
-    'Scandic-Beige-50': '#9c8a7e',
-    'Scandic-Beige-60': '#806e63',
-    'Scandic-Beige-70': '#6b584d',
-    'Scandic-Beige-80': '#533f35',
-    'Scandic-Beige-90': '#3e2b23',
-    'Scandic-Beige-100': '#291710',
-    'Scandic-Peach-10': '#f7e1d5',
-    'Scandic-Peach-20': '#f4d5c8',
-    'Scandic-Peach-30': '#f0c1b6',
-    'Scandic-Peach-40': '#e9aba3',
-    'Scandic-Peach-50': '#de9490',
-    'Scandic-Peach-60': '#cd797c',
-    'Scandic-Peach-70': '#b05b65',
-    'Scandic-Peach-80': '#8f4350',
-    'Scandic-Peach-90': '#642636',
-    'Scandic-Peach-100': '#4d0f25',
-    'Scandic-Green-00': '#f3fce8',
-    'Scandic-Green-10': '#e1f3ca',
-    'Scandic-Green-20': '#d2edaf',
-    'Scandic-Green-30': '#acdb8a',
-    'Scandic-Green-40': '#7cb865',
-    'Scandic-Green-50': '#539e49',
-    'Scandic-Green-60': '#348337',
-    'Scandic-Green-70': '#256931',
-    'Scandic-Green-80': '#164e29',
-    'Scandic-Green-90': '#093021',
-    'Scandic-Green-100': '#091f16',
-    'Scandic-Blue-00': '#e8f6ff',
-    'Scandic-Blue-10': '#cfebff',
-    'Scandic-Blue-20': '#b5e0ff',
-    'Scandic-Blue-30': '#93c9f5',
-    'Scandic-Blue-40': '#79aee7',
-    'Scandic-Blue-50': '#5b8fd4',
-    'Scandic-Blue-60': '#3f6dbd',
-    'Scandic-Blue-70': '#284ea0',
-    'Scandic-Blue-80': '#18347f',
-    'Scandic-Blue-90': '#0d1f5f',
-    'Scandic-Blue-100': '#0d1440',
-    'Scandic-Yellow-00': '#fff8e3',
-    'Scandic-Yellow-10': '#fff0c2',
-    'Scandic-Yellow-20': '#fade89',
-    'Scandic-Yellow-30': '#f7ce52',
-    'Scandic-Yellow-40': '#edb532',
-    'Scandic-Yellow-50': '#e59515',
-    'Scandic-Yellow-60': '#d17308',
-    'Scandic-Yellow-70': '#a85211',
-    'Scandic-Yellow-80': '#7d370f',
-    'Scandic-Yellow-90': '#4f2313',
-    'Scandic-Yellow-100': '#301508',
-  },
-  Go: {
-    'Go-Brand-Lavender': '#dcd7ff',
-    'Go-Beige-00': '#faf8f2',
-    'Go-Beige-10': '#f0ede4',
-    'Go-Beige-20': '#e0dcce',
-    'Go-Beige-30': '#c8c4b6',
-    'Go-Beige-40': '#b0aca0',
-    'Go-Beige-50': '#918f83',
-    'Go-Beige-60': '#78766d',
-    'Go-Beige-70': '#63615a',
-    'Go-Beige-80': '#4f4d49',
-    'Go-Beige-90': '#373633',
-    'Go-Beige-100': '#1f1e1d',
-    'Go-Brand-Obsidian': '#2d163a',
-    'Go-Brand-Lemon': '#f5ff73',
-    'Go-Brand-Linen': '#e0dcce',
-    'Go-Brand-Chartreuse': '#85ff52',
-    'Go-Brand-Pine': '#21331f',
-    'Go-Brand-Aqua': '#73fcee',
-    'Go-Brand-Powder-rose': '#ecc8c9',
-    'Go-Brand-Coral': '#fa3737',
-    'Go-Purple-00': '#f4f2ff',
-    'Go-Purple-10': '#dcd7ff',
-    'Go-Purple-20': '#cabffc',
-    'Go-Purple-30': '#baa7f7',
-    'Go-Purple-40': '#ab8ef0',
-    'Go-Purple-50': '#9c75e6',
-    'Go-Purple-60': '#8c5bd5',
-    'Go-Purple-70': '#733cb2',
-    'Go-Purple-80': '#5e2a8c',
-    'Go-Purple-90': '#451f61',
-    'Go-Purple-100': '#2d163a',
-    'Go-Yellow-00': '#fdffe8',
-    'Go-Yellow-10': '#faffc4',
-    'Go-Yellow-20': '#f8ff9c',
-    'Go-Yellow-30': '#f5ff73',
-    'Go-Yellow-40': '#edea39',
-    'Go-Yellow-50': '#dec614',
-    'Go-Yellow-60': '#ba8d07',
-    'Go-Yellow-70': '#966400',
-    'Go-Yellow-80': '#754403',
-    'Go-Yellow-90': '#572701',
-    'Go-Yellow-100': '#3b1300',
-    'Go-Green-00': '#edffe5',
-    'Go-Green-10': '#cdffb8',
-    'Go-Green-20': '#a7ff82',
-    'Go-Green-30': '#85ff52',
-    'Go-Green-40': '#66e03a',
-    'Go-Green-50': '#45b222',
-    'Go-Green-60': '#2e7f18',
-    'Go-Green-70': '#2a601e',
-    'Go-Green-80': '#26461f',
-    'Go-Green-90': '#21331f',
-    'Go-Green-100': '#162115',
-  },
-  UI: {
-    'UI-Grey-00': '#f9f6f4',
-    'UI-Opacity-White-100': '#ffffff',
-    'UI-Opacity-White-90': '#ffffffe6',
-    'UI-Opacity-White-80': '#ffffffcc',
-    'UI-Opacity-White-70': '#ffffffb3',
-    'UI-Opacity-White-60': '#ffffff99',
-    'UI-Opacity-White-50': '#ffffff80',
-    'UI-Opacity-White-40': '#ffffff66',
-    'UI-Opacity-White-30': '#ffffff4d',
-    'UI-Opacity-White-20': '#ffffff33',
-    'UI-Opacity-White-10': '#ffffff1a',
-    'UI-Opacity-White-0': '#ffffff00',
-    'UI-Opacity-Almost-Black-100': '#1f1c1b',
-    'UI-Opacity-Almost-Black-90': '#1f1c1be6',
-    'UI-Opacity-Almost-Black-80': '#1f1c1bcc',
-    'UI-Opacity-Almost-Black-70': '#1f1c1bb3',
-    'UI-Opacity-Almost-Black-60': '#1f1c1b99',
-    'UI-Opacity-Almost-Black-50': '#1f1c1b80',
-    'UI-Opacity-Almost-Black-40': '#1f1c1b66',
-    'UI-Opacity-Almost-Black-30': '#1f1c1b4d',
-    'UI-Opacity-Almost-Black-20': '#1f1c1b33',
-    'UI-Opacity-Almost-Black-10': '#1f1c1b1a',
-    'UI-Opacity-Almost-Black-0': '#1f1c1b00',
-    'UI-Grey-10': '#ebe8e6',
-    'UI-Grey-20': '#d6d2d0',
-    'UI-Grey-30': '#c2bdba',
-    'UI-Grey-40': '#a8a4a2',
-    'UI-Grey-50': '#8c8987',
-    'UI-Grey-60': '#787472',
-    'UI-Grey-70': '#635f5d',
-    'UI-Grey-80': '#57514e',
-    'UI-Grey-90': '#403937',
-    'UI-Grey-100': '#26201e',
-  },
-} as const

packages/design-system/lib/styles/downtown-camper.css

@@ -0,0 +1,371 @@
+/* This file is generated, do not edit manually! */
+.downtown-camper {
+  /* Values */
+  --Body-Lead-text-Font-fallback: sans-serif;
+  --Body-Lead-text-Letter-spacing: 0.2px;
+  --Body-Paragraph-Font-fallback: sans-serif;
+  --Body-Paragraph-Letter-spacing: 0.19px;
+  --Body-Supporting-text-Font-fallback: sans-serif;
+  --Body-Supporting-text-Letter-spacing: 0.2px;
+  --Body-Underline-md-Font-fallback: sans-serif;
+  --Body-Underline-md-Letter-spacing: 0.19px;
+  --Body-Underline-sm-Font-fallback: sans-serif;
+  --Body-Underline-sm-Letter-spacing: 0.2px;
+  --Component-Button-Brand-Primary-Hover: #915836;
+  --Component-Button-Brand-Secondary-Border-Hover-inverted: #f4ebe7;
+  --Component-Button-Brand-Tertiary-Hover: #4d5448;
+  --Component-Button-Inverted-Hover: #f2f2f2;
+  --Component-Button-Inverted-On-fill-Hover: #915836;
+  --Component-Button-Muted-Border-Hover: #ffffff30;
+  --Font-family-Downtown-Camper-Body: 'Fira sans';
+  --Font-family-Downtown-Camper-Decorative: 'Gotham';
+  --Font-family-Downtown-Camper-Title: 'Gotham';
+  --Label-Font-fallback: sans-serif;
+  --Label-Letter-spacing: 0.17px;
+  --Link-md-Font-fallback: sans-serif;
+  --Link-md-Letter-spacing: 0.19px;
+  --Link-sm-Font-fallback: sans-serif;
+  --Link-sm-Letter-spacing: 0.2px;
+  --Signature-Downtown-Camper-Lunar-green-0: #f3f4f1;
+  --Signature-Downtown-Camper-Lunar-green-100: #191d16;
+  --Signature-Downtown-Camper-Lunar-green-10: #e4e7e0;
+  --Signature-Downtown-Camper-Lunar-green-20: #ccd2c4;
+  --Signature-Downtown-Camper-Lunar-green-30: #acb6a0;
+  --Signature-Downtown-Camper-Lunar-green-40: #8e9b80;
+  --Signature-Downtown-Camper-Lunar-green-50: #717f63;
+  --Signature-Downtown-Camper-Lunar-green-60: #58644c;
+  --Signature-Downtown-Camper-Lunar-green-70: #454e3d;
+  --Signature-Downtown-Camper-Lunar-green-80: #3c4336;
+  --Signature-Downtown-Camper-Lunar-green-90: #33382f;
+  --Signature-Downtown-Camper-Quicksand-0: #fbf7f5;
+  --Signature-Downtown-Camper-Quicksand-100: #35211a;
+  --Signature-Downtown-Camper-Quicksand-10: #f6edea;
+  --Signature-Downtown-Camper-Quicksand-20: #f0ded8;
+  --Signature-Downtown-Camper-Quicksand-30: #e4c7bd;
+  --Signature-Downtown-Camper-Quicksand-40: #d2a697;
+  --Signature-Downtown-Camper-Quicksand-50: #c69382;
+  --Signature-Downtown-Camper-Quicksand-60: #a96d59;
+  --Signature-Downtown-Camper-Quicksand-70: #8d5948;
+  --Signature-Downtown-Camper-Quicksand-80: #764c3e;
+  --Signature-Downtown-Camper-Quicksand-90: #644338;
+  --Signature-Downtown-Camper-Russet-0: #fcf9ee;
+  --Signature-Downtown-Camper-Russet-100: #3c1d0c;
+  --Signature-Downtown-Camper-Russet-10: #f6eecf;
+  --Signature-Downtown-Camper-Russet-20: #ecdc9b;
+  --Signature-Downtown-Camper-Russet-30: #e3c666;
+  --Signature-Downtown-Camper-Russet-40: #dcb143;
+  --Signature-Downtown-Camper-Russet-50: #d3952d;
+  --Signature-Downtown-Camper-Russet-60: #bb7524;
+  --Signature-Downtown-Camper-Russet-70: #9b5622;
+  --Signature-Downtown-Camper-Russet-80: #834722;
+  --Signature-Downtown-Camper-Russet-90: #69391e;
+  --Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff;
+  --Surface-Brand-Primary-1-OnSurface-Accent: #ffffff;
+  --Surface-Brand-Primary-1-OnSurface-Default: #ffffff;
+  --Surface-Brand-Primary-2-OnSurface-Accent: #ffffff;
+  --Surface-Brand-Primary-2-OnSurface-Default: #ffffff;
+  --Surface-Brand-Primary-3-OnSurface-Accent: #ffffff;
+  --Surface-Brand-Primary-3-OnSurface-Default: #ffffff;
+  --Surface-Primary-Hover-Light: #e6e5e5;
+  --Surface-Primary-Hover: #f2f2f2;
+  --Surface-Secondary-Hover: #e4e4e4;
+  --Surface-UI-Fill-Active-Hover: #ffffff;
+  --Tag-Font-fallback: sans-serif;
+  --Tag-Letter-spacing: 0.06px;
+  --Tag-Text-Transform: unset;
+  --Title-Decorative-lg-Font-fallback: sans-serif;
+  --Title-Decorative-lg-Letter-spacing: 0.05px;
+  --Title-Decorative-lg-Text-Transform: uppercase;
+  --Title-Decorative-md-Font-fallback: sans-serif;
+  --Title-Decorative-md-Letter-spacing: 0.19px;
+  --Title-Decorative-md-Text-Transform: uppercase;
+  --Title-Overline-sm-Font-fallback: sans-serif;
+  --Title-Overline-sm-Letter-spacing: 0.21px;
+  --Title-Overline-sm-Text-Transform: uppercase;
+  --Title-Subtitle-lg-Font-fallback: sans-serif;
+  --Title-Subtitle-lg-Letter-spacing: 0.24px;
+  --Title-Subtitle-md-Font-fallback: sans-serif;
+  --Title-Subtitle-md-Letter-spacing: 0.2px;
+  --Title-lg-Font-fallback: sans-serif;
+  --Title-lg-Letter-spacing: 0.12px;
+  --Title-lg-Text-Transform: unset;
+  --Title-md-Font-fallback: sans-serif;
+  --Title-md-Letter-spacing: 0.09px;
+  --Title-md-LowCase-Font-fallback: sans-serif;
+  --Title-md-LowCase-Letter-spacing: 0.09px;
+  --Title-md-LowCase-Text-Transform: unset;
+  --Title-md-Text-Transform: unset;
+  --Title-sm-Font-fallback: sans-serif;
+  --Title-sm-Letter-spacing: 0.07px;
+  --Title-sm-LowCase-Font-fallback: sans-serif;
+  --Title-sm-LowCase-Letter-spacing: 0.07px;
+  --Title-sm-LowCase-Text-Transform: unset;
+  --Title-sm-Text-Transform: unset;
+  --Title-xs-Font-fallback: sans-serif;
+  --Title-xs-Letter-spacing: 0.12px;
+  --Title-xs-Text-Transform: unset;
+  --Utilities-Gradients-10: #3c43361a;
+
+  /* Aliases */
+  --Background-Primary: var(--Neutral-0);
+  --Background-Secondary: var(--Neutral-Opacity-White-100);
+  --Body-Lead-text-Font-family: var(--Font-family-Downtown-Camper-Body);
+  --Body-Lead-text-Font-weight: var(--Font-weight-Regular);
+  --Body-Lead-text-Size: var(--Impl-Text-size-xs);
+  --Body-Paragraph-Font-family: var(--Font-family-Downtown-Camper-Body);
+  --Body-Paragraph-Font-weight-2: var(--Font-weight-Medium);
+  --Body-Paragraph-Font-weight: var(--Font-weight-Regular);
+  --Body-Paragraph-Size: var(--Impl-Text-size-3xs);
+  --Body-Supporting-text-Font-family: var(--Font-family-Downtown-Camper-Body);
+  --Body-Supporting-text-Font-weight-2: var(--Font-weight-Medium);
+  --Body-Supporting-text-Font-weight: var(--Font-weight-Regular);
+  --Body-Supporting-text-Size: var(--Impl-Text-size-4xs);
+  --Body-Underline-md-Font-family: var(--Font-family-Downtown-Camper-Body);
+  --Body-Underline-md-Font-weight: var(--Font-weight-Regular);
+  --Body-Underline-md-Size: var(--Impl-Text-size-3xs);
+  --Body-Underline-sm-Font-family: var(--Font-family-Downtown-Camper-Body);
+  --Body-Underline-sm-Font-weight: var(--Font-weight-Regular);
+  --Body-Underline-sm-Size: var(--Impl-Text-size-4xs);
+  --Border-Default: var(--Neutral-20);
+  --Border-Divider-Accent: var(--Neutral-30);
+  --Border-Divider-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
+  --Border-Divider-Brand-OnPrimary-1-Secondary: var(
+    --Neutral-Opacity-White-100
+  );
+  --Border-Divider-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
+  --Border-Divider-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
+  --Border-Divider-Default: var(--Neutral-20);
+  --Border-Divider-Subtle: var(--Neutral-15);
+  --Border-Intense: var(--Neutral-30);
+  --Border-Interactive-Default: var(--Neutral-30);
+  --Border-Interactive-Disabled: var(--Neutral-30);
+  --Border-Interactive-Error: var(--Scandic-Red-70);
+  --Border-Interactive-Focus: var(--Neutral-80);
+  --Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
+  --Border-Interactive-Selected: var(--Neutral-80);
+  --Border-Inverted: var(--Neutral-Opacity-White-100);
+  --Component-Button-Brand-Primary-Border-Default: var(
+    --Neutral-Opacity-White-0
+  );
+  --Component-Button-Brand-Primary-Border-Disabled: var(
+    --Neutral-Opacity-White-0
+  );
+  --Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
+  --Component-Button-Brand-Primary-Default: var(
+    --Signature-Downtown-Camper-Russet-80
+  );
+  --Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Brand-Primary-On-fill-Default: var(
+    --Neutral-Opacity-White-100
+  );
+  --Component-Button-Brand-Primary-On-fill-Disabled: var(--Neutral-40);
+  --Component-Button-Brand-Primary-On-fill-Hover: var(
+    --Neutral-Opacity-White-100
+  );
+  --Component-Button-Brand-Secondary-Border-Default: var(
+    --Signature-Downtown-Camper-Russet-80
+  );
+  --Component-Button-Brand-Secondary-Border-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
+  --Component-Button-Brand-Secondary-Border-Hover: var(
+    --Signature-Downtown-Camper-Russet-70
+  );
+  --Component-Button-Brand-Secondary-Border-Inverted: var(
+    --Neutral-Opacity-White-100
+  );
+  --Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
+  --Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Brand-Secondary-Hover-Inverted: var(
+    --Signature-Downtown-Camper-Lunar-green-80
+  );
+  --Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
+  --Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
+  --Component-Button-Brand-Secondary-On-fill-Default: var(
+    --Signature-Downtown-Camper-Russet-80
+  );
+  --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
+  --Component-Button-Brand-Secondary-On-fill-Hover: var(
+    --Signature-Downtown-Camper-Russet-70
+  );
+  --Component-Button-Brand-Secondary-On-fill-Inverted: var(
+    --Neutral-Opacity-White-100
+  );
+  --Component-Button-Brand-Tertiary-Border-Default: var(
+    --Neutral-Opacity-White-0
+  );
+  --Component-Button-Brand-Tertiary-Border-Disabled: var(
+    --Neutral-Opacity-White-0
+  );
+  --Component-Button-Brand-Tertiary-Border-Hover: var(
+    --Neutral-Opacity-White-0
+  );
+  --Component-Button-Brand-Tertiary-Default: var(
+    --Signature-Downtown-Camper-Lunar-green-80
+  );
+  --Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Brand-Tertiary-On-fill-Default: var(
+    --Neutral-Opacity-White-100
+  );
+  --Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Neutral-40);
+  --Component-Button-Brand-Tertiary-On-fill-Hover: var(
+    --Neutral-Opacity-White-100
+  );
+  --Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
+  --Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0);
+  --Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0);
+  --Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
+  --Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
+  --Component-Button-Inverted-Hover-Inverted: var(
+    --Signature-Downtown-Camper-Lunar-green-80
+  );
+  --Component-Button-Inverted-On-fill-Default: var(
+    --Signature-Downtown-Camper-Russet-80
+  );
+  --Component-Button-Inverted-On-fill-Disabled: var(--Neutral-40);
+  --Component-Button-Inverted-On-fill-Hover-inverted: var(
+    --Neutral-Opacity-White-100
+  );
+  --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
+  --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
+  --Component-Button-Muted-Default: var(--Neutral-Opacity-White-0);
+  --Component-Button-Muted-Disabled-inverted: var(--Neutral-20);
+  --Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-10);
+  --Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5);
+  --Component-Button-Muted-Hover: var(--Neutral-Opacity-White-5);
+  --Component-Button-Muted-On-fill-Default: var(--Neutral-90);
+  --Component-Button-Muted-On-fill-Disabled: var(--Neutral-40);
+  --Component-Button-Muted-On-fill-Hover-Inverted: var(
+    --Signature-Downtown-Camper-Russet-70
+  );
+  --Component-Button-Muted-On-fill-Inverted: var(--Neutral-Opacity-White-100);
+  --Icon-Accent: var(--Signature-Downtown-Camper-Lunar-green-50);
+  --Icon-Default: var(--Neutral-60);
+  --Icon-Feedback-Error: var(--Scandic-Red-70);
+  --Icon-Feedback-Information: var(--Scandic-Blue-70);
+  --Icon-Feedback-Neutral: var(--Neutral-60);
+  --Icon-Feedback-Success: var(--Scandic-Green-60);
+  --Icon-Feedback-Warning: var(--Scandic-Yellow-60);
+  --Icon-Intense: var(--Neutral-90);
+  --Icon-Interactive-Default: var(--Neutral-90);
+  --Icon-Interactive-Disabled: var(--Neutral-30);
+  --Icon-Interactive-Placeholder: var(--Neutral-50);
+  --Icon-Interactive-Secondary: var(--Signature-Downtown-Camper-Russet-80);
+  --Icon-Inverted: var(--Neutral-Opacity-White-100);
+  --Label-Font-family: var(--Font-family-Downtown-Camper-Body);
+  --Label-Font-weight-2: var(--Font-weight-Medium);
+  --Label-Font-weight: var(--Font-weight-Regular);
+  --Label-Size: var(--Impl-Text-size-5xs);
+  --Link-md-Font-family: var(--Font-family-Downtown-Camper-Body);
+  --Link-md-Font-weight: var(--Font-weight-Medium);
+  --Link-md-Size: var(--Impl-Text-size-3xs);
+  --Link-sm-Font-family: var(--Font-family-Downtown-Camper-Body);
+  --Link-sm-Font-weight: var(--Font-weight-Medium);
+  --Link-sm-Size: var(--Impl-Text-size-4xs);
+  --Overlay-10: var(--Neutral-Opacity-Black-10);
+  --Overlay-20: var(--Neutral-Opacity-Black-20);
+  --Overlay-40: var(--Neutral-Opacity-Black-40);
+  --Overlay-60: var(--Neutral-Opacity-Black-60);
+  --Overlay-80: var(--Neutral-Opacity-Black-80);
+  --Overlay-90: var(--Neutral-Opacity-Black-90);
+  --Surface-Accent-1: var(--Signature-Downtown-Camper-Quicksand-60);
+  --Surface-Accent-2: var(--Scandic-Blue-60);
+  --Surface-Accent-3: var(--Signature-Downtown-Camper-Lunar-green-70);
+  --Surface-Accent-4: var(--Signature-Downtown-Camper-Russet-50);
+  --Surface-Accent-5: var(--Scandic-Blue-80);
+  --Surface-Brand-Accent-Default: var(--Signature-Downtown-Camper-Russet-50);
+  --Surface-Brand-Primary-1-Default: var(--Signature-Downtown-Camper-Russet-80);
+  --Surface-Brand-Primary-2-Default: var(--Signature-Downtown-Camper-Russet-80);
+  --Surface-Brand-Primary-3-Default: var(
+    --Signature-Downtown-Camper-Lunar-green-80
+  );
+  --Surface-Feedback-Error-Accent: var(--Scandic-Red-70);
+  --Surface-Feedback-Error: var(--Scandic-Red-00);
+  --Surface-Feedback-Information-Accent: var(--Scandic-Blue-70);
+  --Surface-Feedback-Information: var(--Scandic-Blue-00);
+  --Surface-Feedback-Neutral-Accent: var(--Neutral-50);
+  --Surface-Feedback-Neutral: var(--Neutral-15);
+  --Surface-Feedback-Succes-Accent: var(--Scandic-Green-60);
+  --Surface-Feedback-Succes: var(--Scandic-Green-00);
+  --Surface-Feedback-Warning--Light: var(--Scandic-Yellow-00);
+  --Surface-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
+  --Surface-Primary-Default: var(--Neutral-Opacity-White-100);
+  --Surface-Primary-Disabled: var(--Neutral-15);
+  --Surface-Primary-Hover-Accent: var(--Neutral-15);
+  --Surface-Primary-OnSurface-Default: var(--Neutral-5);
+  --Surface-Secondary-Default: var(--Neutral-10);
+  --Surface-Secondary-Secondary: var(--Neutral-10);
+  --Surface-UI-Fill-Active: var(--Neutral-80);
+  --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
+  --Surface-UI-Fill-Disabled: var(--Neutral-15);
+  --Surface-UI-Fill-Intense: var(--Neutral-80);
+  --Tag-Font-family: var(--Font-family-Downtown-Camper-Title);
+  --Tag-Font-weight: var(--Font-weight-Regular);
+  --Tag-Size: var(--Impl-Text-size-5xs);
+  --Text-Accent-Primary: var(--Signature-Downtown-Camper-Russet-80);
+  --Text-Accent-Secondary: var(--Neutral-50);
+  --Text-Brand-OnAccent-Accent: var(--Neutral-Opacity-White-100);
+  --Text-Brand-OnAccent-Default: var(--Neutral-Opacity-White-100);
+  --Text-Brand-OnAccent-Heading: var(--Neutral-Opacity-White-100);
+  --Text-Brand-OnPrimary-1-Accent: var(--Neutral-Opacity-White-100);
+  --Text-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
+  --Text-Brand-OnPrimary-1-Heading: var(--Neutral-Opacity-White-100);
+  --Text-Brand-OnPrimary-2-Accent: var(--Neutral-Opacity-White-100);
+  --Text-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
+  --Text-Brand-OnPrimary-2-Heading: var(--Neutral-Opacity-White-100);
+  --Text-Brand-OnPrimary-3-Accent: var(--Neutral-Opacity-White-100);
+  --Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
+  --Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100);
+  --Text-Default: var(--Neutral-90);
+  --Text-Heading: var(--Neutral-90);
+  --Text-Interactive-Default: var(--Neutral-90);
+  --Text-Interactive-Disabled: var(--Neutral-40);
+  --Text-Interactive-Error: var(--Scandic-Red-70);
+  --Text-Interactive-Focus: var(--Neutral-80);
+  --Text-Interactive-Hover-Secondary: var(
+    --Signature-Downtown-Camper-Russet-60
+  );
+  --Text-Interactive-Placeholder: var(--Neutral-50);
+  --Text-Interactive-Secondary: var(--Signature-Downtown-Camper-Russet-80);
+  --Text-Inverted: var(--Neutral-Opacity-White-100);
+  --Text-Secondary: var(--Neutral-60);
+  --Text-Tertiary: var(--Neutral-50);
+  --Title-Decorative-lg-Font-family: var(
+    --Font-family-Downtown-Camper-Decorative
+  );
+  --Title-Decorative-lg-Font-weight: var(--Font-weight-Regular);
+  --Title-Decorative-lg-Size: var(--Impl-Text-size-xs);
+  --Title-Decorative-md-Font-family: var(
+    --Font-family-Downtown-Camper-Decorative
+  );
+  --Title-Decorative-md-Font-weight: var(--Font-weight-Regular);
+  --Title-Decorative-md-Size: var(--Impl-Text-size-3xs);
+  --Title-Overline-sm-Font-family: var(--Font-family-Downtown-Camper-Title);
+  --Title-Overline-sm-Font-weight: var(--Font-weight-Regular);
+  --Title-Overline-sm-Size: var(--Impl-Text-size-4xs);
+  --Title-Subtitle-lg-Font-family: var(--Font-family-Downtown-Camper-Body);
+  --Title-Subtitle-lg-Font-weight: var(--Font-weight-Medium);
+  --Title-Subtitle-lg-Size: var(--Impl-Text-size-sm);
+  --Title-Subtitle-md-Font-family: var(--Font-family-Downtown-Camper-Body);
+  --Title-Subtitle-md-Font-weight: var(--Font-weight-Medium);
+  --Title-Subtitle-md-Size: var(--Impl-Text-size-xs);
+  --Title-lg-Font-family: var(--Font-family-Downtown-Camper-Title);
+  --Title-lg-Font-weight: var(--Font-weight-Black);
+  --Title-lg-Size: var(--Impl-Text-size-4xl);
+  --Title-md-Font-family: var(--Font-family-Downtown-Camper-Title);
+  --Title-md-Font-weight: var(--Font-weight-Black);
+  --Title-md-LowCase-Font-family: var(--Font-family-Downtown-Camper-Title);
+  --Title-md-LowCase-Font-weight: var(--Font-weight-Regular);
+  --Title-md-LowCase-Size: var(--Impl-Text-size-2xl);
+  --Title-md-Size: var(--Impl-Text-size-2xl);
+  --Title-sm-Font-family: var(--Font-family-Downtown-Camper-Title);
+  --Title-sm-Font-weight: var(--Font-weight-Black);
+  --Title-sm-LowCase-Font-family: var(--Font-family-Downtown-Camper-Title);
+  --Title-sm-LowCase-Font-weight: var(--Font-weight-Regular);
+  --Title-sm-LowCase-Size: var(--Impl-Text-size-lg);
+  --Title-sm-Size: var(--Impl-Text-size-lg);
+  --Title-xs-Font-family: var(--Font-family-Downtown-Camper-Title);
+  --Title-xs-Font-weight: var(--Font-weight-Black);
+  --Title-xs-Size: var(--Impl-Text-size-sm);
+}

packages/design-system/lib/styles/downtown-camper.js

@@ -0,0 +1,292 @@
+/* This file is generated, do not edit manually! */
+export const theme = {
+  'Signature/Downtown Camper/Lunar green/0': '#F3F4F1',
+  'Signature/Downtown Camper/Lunar green/10': '#E4E7E0',
+  'Signature/Downtown Camper/Lunar green/20': '#CCD2C4',
+  'Signature/Downtown Camper/Lunar green/30': '#ACB6A0',
+  'Signature/Downtown Camper/Lunar green/40': '#8E9B80',
+  'Signature/Downtown Camper/Lunar green/50': '#717F63',
+  'Signature/Downtown Camper/Lunar green/60': '#58644C',
+  'Signature/Downtown Camper/Lunar green/70': '#454E3D',
+  'Signature/Downtown Camper/Lunar green/80': '#3C4336',
+  'Signature/Downtown Camper/Lunar green/90': '#33382F',
+  'Signature/Downtown Camper/Lunar green/100': '#191D16',
+  'Signature/Downtown Camper/Russet/0': '#FCF9EE',
+  'Signature/Downtown Camper/Russet/10': '#F6EECF',
+  'Signature/Downtown Camper/Russet/20': '#ECDC9B',
+  'Signature/Downtown Camper/Russet/30': '#E3C666',
+  'Signature/Downtown Camper/Russet/40': '#DCB143',
+  'Signature/Downtown Camper/Russet/50': '#D3952D',
+  'Signature/Downtown Camper/Russet/60': '#BB7524',
+  'Signature/Downtown Camper/Russet/70': '#9B5622',
+  'Signature/Downtown Camper/Russet/80': '#834722',
+  'Signature/Downtown Camper/Russet/90': '#69391E',
+  'Signature/Downtown Camper/Russet/100': '#3C1D0C',
+  'Signature/Downtown Camper/Quicksand/0': '#FBF7F5',
+  'Signature/Downtown Camper/Quicksand/10': '#F6EDEA',
+  'Signature/Downtown Camper/Quicksand/20': '#F0DED8',
+  'Signature/Downtown Camper/Quicksand/30': '#E4C7BD',
+  'Signature/Downtown Camper/Quicksand/40': '#D2A697',
+  'Signature/Downtown Camper/Quicksand/50': '#C69382',
+  'Signature/Downtown Camper/Quicksand/60': '#A96D59',
+  'Signature/Downtown Camper/Quicksand/70': '#8D5948',
+  'Signature/Downtown Camper/Quicksand/80': '#764C3E',
+  'Signature/Downtown Camper/Quicksand/90': '#644338',
+  'Signature/Downtown Camper/Quicksand/100': '#35211A',
+  'Title/lg/Letter spacing': 0.12,
+  'Title/lg/Font fallback': 'sans-serif',
+  'Title/lg/Text-Transform': 'unset',
+  'Title/md/Letter spacing': 0.09,
+  'Title/md/Font fallback': 'sans-serif',
+  'Title/sm/Letter spacing': 0.07,
+  'Title/sm/Font fallback': 'sans-serif',
+  'Title/sm/Text-Transform': 'unset',
+  'Title/Decorative/lg/Letter spacing': 0.05,
+  'Title/Decorative/lg/Font fallback': 'sans-serif',
+  'Title/Decorative/lg/Text-Transform': 'uppercase',
+  'Title/Decorative/md/Letter spacing': 0.19,
+  'Title/Decorative/md/Font fallback': 'sans-serif',
+  'Title/Decorative/md/Text-Transform': 'uppercase',
+  'Title/Subtitle/lg/Font fallback': 'sans-serif',
+  'Title/Subtitle/lg/Letter spacing': 0.24,
+  'Title/Subtitle/md/Font fallback': 'sans-serif',
+  'Title/Subtitle/md/Letter spacing': 0.2,
+  'Title/Overline/sm/Letter spacing': 0.21,
+  'Title/Overline/sm/Font fallback': 'sans-serif',
+  'Title/Overline/sm/Text-Transform': 'uppercase',
+  'Title/sm/LowCase/Letter spacing': 0.07,
+  'Title/sm/LowCase/Font fallback': 'sans-serif',
+  'Title/sm/LowCase/Text-Transform': 'unset',
+  'Title/xs/Letter spacing': 0.12,
+  'Title/xs/Font fallback': 'sans-serif',
+  'Title/xs/Text-Transform': 'unset',
+  'Title/md/Text-Transform': 'unset',
+  'Title/md/LowCase/Letter spacing': 0.09,
+  'Title/md/LowCase/Font fallback': 'sans-serif',
+  'Title/md/LowCase/Text-Transform': 'unset',
+  'Tag/Letter spacing': 0.06,
+  'Tag/Font fallback': 'sans-serif',
+  'Tag/Text-Transform': 'unset',
+  'Link/md/Font fallback': 'sans-serif',
+  'Link/md/Letter spacing': 0.19,
+  'Link/sm/Font fallback': 'sans-serif',
+  'Link/sm/Letter spacing': 0.2,
+  'Body/Lead text/Font fallback': 'sans-serif',
+  'Body/Paragraph/Font fallback': 'sans-serif',
+  'Body/Paragraph/Letter spacing': 0.19,
+  'Body/Supporting text/Font fallback': 'sans-serif',
+  'Body/Supporting text/Letter spacing': 0.2,
+  'Body/Lead text/Letter spacing': 0.2,
+  'Label/Font fallback': 'sans-serif',
+  'Label/Letter spacing': 0.17,
+  'Body/Underline/md/Font fallback': 'sans-serif',
+  'Body/Underline/md/Letter spacing': 0.19,
+  'Body/Underline/sm/Font fallback': 'sans-serif',
+  'Body/Underline/sm/Letter spacing': 0.2,
+  'Surface/Brand/Primary 1/OnSurface/Default': '#FFFFFF',
+  'Surface/Brand/Primary 1/OnSurface/Accent': '#FFFFFF',
+  'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#FFFFFF',
+  'Surface/Brand/Primary 2/OnSurface/Default': '#FFFFFF',
+  'Surface/Brand/Primary 2/OnSurface/Accent': '#FFFFFF',
+  'Surface/Brand/Primary 3/OnSurface/Default': '#FFFFFF',
+  'Surface/Brand/Primary 3/OnSurface/Accent': '#FFFFFF',
+  'Utilities/Gradients/10': '#3C43361A',
+  'Font family/Downtown Camper/Title': 'Gotham',
+  'Font family/Downtown Camper/Body': 'Fira sans',
+  'Font family/Downtown Camper/Decorative': 'Gotham',
+  'Title/lg/Font weight': 900,
+  'Title/lg/Font family': 'Gotham',
+  'Title/md/Font weight': 900,
+  'Title/md/Font family': 'Gotham',
+  'Title/sm/Font weight': 900,
+  'Title/sm/Font family': 'Gotham',
+  'Title/sm/LowCase/Font weight': 400,
+  'Title/sm/LowCase/Font family': 'Gotham',
+  'Title/Decorative/lg/Font weight': 400,
+  'Title/Decorative/lg/Font family': 'Gotham',
+  'Title/Decorative/md/Font weight': 400,
+  'Title/Decorative/md/Font family': 'Gotham',
+  'Title/Subtitle/lg/Font weight': 500,
+  'Title/Subtitle/lg/Font family': 'Fira sans',
+  'Title/Subtitle/md/Font weight': 500,
+  'Title/Subtitle/md/Font family': 'Fira sans',
+  'Title/Overline/sm/Font weight': 400,
+  'Title/Overline/sm/Font family': 'Gotham',
+  'Title/xs/Font weight': 900,
+  'Title/xs/Font family': 'Gotham',
+  'Title/md/LowCase/Font weight': 400,
+  'Title/md/LowCase/Font family': 'Gotham',
+  'Tag/Font weight': 400,
+  'Tag/Font family': 'Gotham',
+  'Link/md/Font weight': 500,
+  'Link/md/Font family': 'Fira sans',
+  'Link/sm/Font weight': 500,
+  'Link/sm/Font family': 'Fira sans',
+  'Body/Lead text/Font weight': 400,
+  'Body/Lead text/Font family': 'Fira sans',
+  'Body/Paragraph/Font weight': 400,
+  'Body/Paragraph/Font weight 2': 500,
+  'Body/Paragraph/Font family': 'Fira sans',
+  'Body/Supporting text/Font weight': 400,
+  'Body/Supporting text/Font weight 2': 500,
+  'Body/Supporting text/Font family': 'Fira sans',
+  'Label/Font weight': 400,
+  'Label/Font weight 2': 500,
+  'Label/Font family': 'Fira sans',
+  'Body/Underline/md/Font weight': 400,
+  'Body/Underline/md/Font family': 'Fira sans',
+  'Body/Underline/sm/Font weight': 400,
+  'Body/Underline/sm/Font family': 'Fira sans',
+  'Text/Heading': '#1F1F1F',
+  'Text/Default': '#1F1F1F',
+  'Text/Secondary': '#575757',
+  'Text/Tertiary': '#747474',
+  'Text/Accent Primary': '#834722',
+  'Text/Accent Secondary': '#747474',
+  'Text/Inverted': '#FFFFFF',
+  'Text/Interactive/Default': '#1F1F1F',
+  'Text/Interactive/Secondary': '#834722',
+  'Text/Interactive/Hover Secondary': '#BB7524',
+  'Text/Interactive/Disabled': '#8C8C8C',
+  'Text/Interactive/Focus': '#262626',
+  'Text/Interactive/Error': '#AD0015',
+  'Text/Interactive/Placeholder': '#747474',
+  'Text/Brand/OnAccent/Heading': '#FFFFFF',
+  'Text/Brand/OnAccent/Default': '#FFFFFF',
+  'Text/Brand/OnAccent/Accent': '#FFFFFF',
+  'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
+  'Text/Brand/OnPrimary 1/Default': '#FFFFFF',
+  'Text/Brand/OnPrimary 1/Accent': '#FFFFFF',
+  'Text/Brand/OnPrimary 2/Heading': '#FFFFFF',
+  'Text/Brand/OnPrimary 2/Default': '#FFFFFF',
+  'Text/Brand/OnPrimary 2/Accent': '#FFFFFF',
+  'Text/Brand/OnPrimary 3/Heading': '#FFFFFF',
+  'Text/Brand/OnPrimary 3/Default': '#FFFFFF',
+  'Text/Brand/OnPrimary 3/Accent': '#FFFFFF',
+  'Background/Primary': '#FCFCFC',
+  'Background/Secondary': '#FFFFFF',
+  'Surface/Primary/Default': '#FFFFFF',
+  'Surface/Primary/Hover': '#f2f2f2',
+  'Surface/Primary/Hover Light': '#e6e5e5',
+  'Surface/Primary/Hover Accent': '#E9E9E9',
+  'Surface/Primary/OnSurface/Default': '#F5F5F5',
+  'Surface/Primary/Disabled': '#E9E9E9',
+  'Surface/Secondary/Default': '#F0F0F0',
+  'Surface/Secondary/Secondary': '#F0F0F0',
+  'Surface/Secondary/Hover': '#e4e4e4',
+  'Surface/Brand/Accent/Default': '#D3952D',
+  'Surface/Brand/Primary 1/Default': '#834722',
+  'Surface/Brand/Primary 2/Default': '#834722',
+  'Surface/Brand/Primary 3/Default': '#3C4336',
+  'Surface/UI Fill/Default': '#FFFFFF',
+  'Surface/UI Fill/Intense': '#262626',
+  'Surface/UI Fill/Active': '#262626',
+  'Surface/UI Fill/Active Hover': '#ffffff',
+  'Surface/UI Fill/Disabled': '#E9E9E9',
+  'Surface/Accent/1': '#A96D59',
+  'Surface/Accent/2': '#3F6DBD',
+  'Surface/Accent/3': '#454E3D',
+  'Surface/Accent/4': '#D3952D',
+  'Surface/Accent/5': '#18347F',
+  'Surface/Feedback/Information Accent': '#284EA0',
+  'Surface/Feedback/Information': '#E8F6FF',
+  'Surface/Feedback/Succes Accent': '#348337',
+  'Surface/Feedback/Succes': '#F3FCE8',
+  'Surface/Feedback/Warning Accent': '#D17308',
+  'Surface/Feedback/Warning  Light': '#FFF8E3',
+  'Surface/Feedback/Error Accent': '#AD0015',
+  'Surface/Feedback/Error': '#FFEBEB',
+  'Surface/Feedback/Neutral Accent': '#747474',
+  'Surface/Feedback/Neutral': '#E9E9E9',
+  'Border/Default': '#D9D9D9',
+  'Border/Intense': '#BFBFBF',
+  'Border/Inverted': '#FFFFFF',
+  'Icon/Default': '#575757',
+  'Icon/Intense': '#1F1F1F',
+  'Icon/Accent': '#717F63',
+  'Icon/Interactive/Default': '#1F1F1F',
+  'Icon/Interactive/Secondary': '#834722',
+  'Icon/Interactive/Disabled': '#BFBFBF',
+  'Icon/Interactive/Placeholder': '#747474',
+  'Icon/Feedback/Information': '#284EA0',
+  'Icon/Feedback/Success': '#348337',
+  'Icon/Feedback/Warning': '#D17308',
+  'Icon/Feedback/Error': '#AD0015',
+  'Icon/Feedback/Neutral': '#575757',
+  'Icon/Inverted': '#FFFFFF',
+  'Overlay/10': '#1F1C1B1A',
+  'Overlay/20': '#1F1C1B33',
+  'Overlay/40': '#1F1C1B66',
+  'Overlay/60': '#1F1C1B99',
+  'Overlay/80': '#1F1C1BCC',
+  'Overlay/90': '#1F1C1BE6',
+  'Component/Button/Brand/Primary/Default': '#834722',
+  'Component/Button/Brand/Primary/Hover': '#915836',
+  'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
+  'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
+  'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C',
+  'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
+  'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
+  'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
+  'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
+  'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
+  'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
+  'Component/Button/Brand/Secondary/Hover Inverted': '#3C4336',
+  'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Secondary/On fill/Default': '#834722',
+  'Component/Button/Brand/Secondary/On fill/Hover': '#9B5622',
+  'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
+  'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
+  'Component/Button/Brand/Secondary/Border/Default': '#834722',
+  'Component/Button/Brand/Secondary/Border/Hover': '#9B5622',
+  'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
+  'Component/Button/Brand/Secondary/Border/Hover inverted': '#f4ebe7',
+  'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Tertiary/Default': '#3C4336',
+  'Component/Button/Brand/Tertiary/Hover': '#4d5448',
+  'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
+  'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
+  'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C',
+  'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
+  'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
+  'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
+  'Component/Button/Inverted/Default': '#FFFFFF',
+  'Component/Button/Inverted/Faded': '#FFFFFFE6',
+  'Component/Button/Inverted/Hover': '#f2f2f2',
+  'Component/Button/Inverted/Hover Inverted': '#3C4336',
+  'Component/Button/Inverted/Disabled': '#1F1C1B1A',
+  'Component/Button/Inverted/On fill/Default': '#834722',
+  'Component/Button/Inverted/On fill/Hover': '#915836',
+  'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
+  'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
+  'Component/Button/Inverted/Border/Default': '#FFFFFF00',
+  'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
+  'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
+  'Border/Interactive/Default': '#BFBFBF',
+  'Border/Divider/Default': '#D9D9D9',
+  'Border/Divider/Subtle': '#E9E9E9',
+  'Border/Divider/Accent': '#BFBFBF',
+  'Border/Divider/Brand/OnPrimary 1/Default': '#FFFFFF',
+  'Border/Divider/Brand/OnPrimary 1/Secondary': '#FFFFFF',
+  'Border/Divider/Brand/OnPrimary 2/Default': '#FFFFFF',
+  'Border/Divider/Brand/OnPrimary 3/Default': '#FFFFFF',
+  'Border/Interactive/Selected': '#262626',
+  'Border/Interactive/Focus': '#262626',
+  'Border/Interactive/Disabled': '#BFBFBF',
+  'Border/Interactive/Error': '#AD0015',
+  'Border/Interactive/KeyboardFocus': '#5B8FD4',
+  'Component/Button/Muted/Default': '#FFFFFF00',
+  'Component/Button/Muted/Hover': '#FFFFFF00',
+  'Component/Button/Muted/Disabled': '#FFFFFF1A',
+  'Component/Button/Muted/Hover inverted': '#1F1C1B0D',
+  'Component/Button/Muted/Disabled inverted': '#D9D9D9',
+  'Component/Button/Muted/On fill/Default': '#1F1F1F',
+  'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
+  'Component/Button/Muted/On fill/Hover Inverted': '#9B5622',
+  'Component/Button/Muted/On fill/Disabled': '#8C8C8C',
+  'Component/Button/Muted/Border/Default': '#FFFFFF1A',
+  'Component/Button/Muted/Border/Hover': '#ffffff30',
+  'Component/Button/Muted/Border/Disable': '#FFFFFF1A',
+}

packages/design-system/lib/styles/globals.css

@@ -1,5 +1,3 @@
-@font-face {
-  font-family: 'Helvetica';
-  font-style: normal;
-  src: url('./fonts/Helvetica/helvetica.ttf') format('ttf');
+* {
+  margin: 0;
 }

packages/design-system/lib/styles/grand-hotel.css

@@ -0,0 +1,349 @@
+/* This file is generated, do not edit manually! */
+.grand-hotel {
+  /* Values */
+  --Body-Lead-text-Font-fallback: sans-serif;
+  --Body-Lead-text-Letter-spacing: 0.2px;
+  --Body-Paragraph-Font-fallback: sans-serif;
+  --Body-Paragraph-Letter-spacing: 0.19px;
+  --Body-Supporting-text-Font-fallback: sans-serif;
+  --Body-Supporting-text-Letter-spacing: 0.2px;
+  --Body-Underline-md-Font-fallback: sans-serif;
+  --Body-Underline-md-Letter-spacing: 0.19px;
+  --Body-Underline-sm-Font-fallback: sans-serif;
+  --Body-Underline-sm-Letter-spacing: 0.2px;
+  --Component-Button-Brand-Primary-Hover: #34373d;
+  --Component-Button-Brand-Secondary-Border-Hover-inverted: #e6e6e7;
+  --Component-Button-Brand-Tertiary-Hover: #b8cad0;
+  --Component-Button-Brand-Tertiary-On-fill-Hover: #34373d;
+  --Component-Button-Inverted-Hover: #f2f2f2;
+  --Component-Button-Inverted-On-fill-Hover: #34373d;
+  --Component-Button-Muted-Border-Hover: #ffffff30;
+  --Component-Button-Muted-Hover-inverted: #f2f2f2;
+  --Font-family-Grand-Hotel-Body: 'Fira sans';
+  --Font-family-Grand-Hotel-Decorative: 'Canela Deck';
+  --Font-family-Grand-Hotel-Title: 'Canela Deck';
+  --Label-Font-fallback: sans-serif;
+  --Label-Letter-spacing: 0.17px;
+  --Link-md-Font-fallback: sans-serif;
+  --Link-md-Letter-spacing: 0.19px;
+  --Link-sm-Font-fallback: sans-serif;
+  --Link-sm-Letter-spacing: 0.2px;
+  --Signature-Grand-Hotel-Blue-Bayoux-100: #21252b;
+  --Signature-Grand-Hotel-Blue-Bayoux-50: #5b6e7f;
+  --Signature-Grand-Hotel-Blue-Bayoux-80: #3d444d;
+  --Signature-Grand-Hotel-Blue-Bayoux-90: #363c43;
+  --Signature-Grand-Hotel-Careys-Pink-40: #dba7b1;
+  --Signature-Grand-Hotel-Careys-Pink-50: #c27183;
+  --Signature-Grand-Hotel-Careys-Pink-60: #aa546b;
+  --Signature-Grand-Hotel-Careys-Pink-70: #8e4258;
+  --Signature-Grand-Hotel-Cloudy-0: #f7f6f5;
+  --Signature-Grand-Hotel-Cloudy-10: #ebeae9;
+  --Signature-Grand-Hotel-Cloudy-20: #d7d7d1;
+  --Signature-Grand-Hotel-Cloudy-30: #b2ada7;
+  --Signature-Grand-Hotel-Submarine-30: #b0c4cb;
+  --Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff;
+  --Surface-Brand-Primary-1-OnSurface-Accent: #ffffff;
+  --Surface-Brand-Primary-1-OnSurface-Default: #ffffff;
+  --Surface-Brand-Primary-2-OnSurface-Accent: #ffffff;
+  --Surface-Brand-Primary-2-OnSurface-Default: #ffffff;
+  --Surface-Brand-Primary-3-OnSurface-Accent: #ffffff;
+  --Surface-Brand-Primary-3-OnSurface-Default: #ffffff;
+  --Surface-Primary-Hover-Light: #e6e5e5;
+  --Surface-Primary-Hover: #f2f2f2;
+  --Surface-Secondary-Hover: #ebeae9;
+  --Tag-Font-fallback: sans-serif;
+  --Tag-Letter-spacing: 0.24px;
+  --Tag-Text-Transform: uppercase;
+  --Title-Decorative-lg-Font-fallback: Serif;
+  --Title-Decorative-lg-Letter-spacing: 0.3px;
+  --Title-Decorative-lg-Text-Transform: uppercase;
+  --Title-Decorative-md-Font-fallback: Serif;
+  --Title-Decorative-md-Letter-spacing: 0.24px;
+  --Title-Decorative-md-Text-Transform: uppercase;
+  --Title-Overline-sm-Font-fallback: sans-serif;
+  --Title-Overline-sm-Letter-spacing: 0.21px;
+  --Title-Overline-sm-Text-Transform: uppercase;
+  --Title-Subtitle-lg-Font-fallback: sans-serif;
+  --Title-Subtitle-lg-Letter-spacing: 0.24px;
+  --Title-Subtitle-md-Font-fallback: sans-serif;
+  --Title-Subtitle-md-Letter-spacing: 0.2px;
+  --Title-lg-Font-fallback: Serif;
+  --Title-lg-Letter-spacing: 0.12px;
+  --Title-lg-Text-Transform: unset;
+  --Title-md-Font-fallback: Serif;
+  --Title-md-Letter-spacing: 0.18px;
+  --Title-md-LowCase-Font-fallback: Serif;
+  --Title-md-LowCase-Letter-spacing: 0.18px;
+  --Title-md-LowCase-Text-Transform: unset;
+  --Title-md-Text-Transform: unset;
+  --Title-sm-Font-fallback: Serif;
+  --Title-sm-Letter-spacing: 0.28px;
+  --Title-sm-LowCase-Font-fallback: Serif;
+  --Title-sm-LowCase-Letter-spacing: 0.28px;
+  --Title-sm-LowCase-Text-Transform: unset;
+  --Title-sm-Text-Transform: unset;
+  --Title-xs-Font-fallback: Serif;
+  --Title-xs-Letter-spacing: 0.24px;
+  --Title-xs-Text-Transform: unset;
+  --Utilities-Gradients-10: #5b6e7f1a;
+
+  /* Aliases */
+  --Background-Primary: var(--Neutral-Opacity-White-100);
+  --Background-Secondary: var(--Neutral-Opacity-White-100);
+  --Body-Lead-text-Font-family: var(--Font-family-Grand-Hotel-Body);
+  --Body-Lead-text-Font-weight: var(--Font-weight-Regular);
+  --Body-Lead-text-Size: var(--Impl-Text-size-xs);
+  --Body-Paragraph-Font-family: var(--Font-family-Grand-Hotel-Body);
+  --Body-Paragraph-Font-weight-2: var(--Font-weight-Medium);
+  --Body-Paragraph-Font-weight: var(--Font-weight-Regular);
+  --Body-Paragraph-Size: var(--Impl-Text-size-3xs);
+  --Body-Supporting-text-Font-family: var(--Font-family-Grand-Hotel-Body);
+  --Body-Supporting-text-Font-weight-2: var(--Font-weight-Medium);
+  --Body-Supporting-text-Font-weight: var(--Font-weight-Regular);
+  --Body-Supporting-text-Size: var(--Impl-Text-size-4xs);
+  --Body-Underline-md-Font-family: var(--Font-family-Grand-Hotel-Body);
+  --Body-Underline-md-Font-weight: var(--Font-weight-Regular);
+  --Body-Underline-md-Size: var(--Impl-Text-size-3xs);
+  --Body-Underline-sm-Font-family: var(--Font-family-Grand-Hotel-Body);
+  --Body-Underline-sm-Font-weight: var(--Font-weight-Regular);
+  --Body-Underline-sm-Size: var(--Impl-Text-size-4xs);
+  --Border-Default: var(--Neutral-20);
+  --Border-Divider-Accent: var(--Neutral-30);
+  --Border-Divider-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
+  --Border-Divider-Brand-OnPrimary-1-Secondary: var(
+    --Neutral-Opacity-White-100
+  );
+  --Border-Divider-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
+  --Border-Divider-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
+  --Border-Divider-Default: var(--Neutral-20);
+  --Border-Divider-Subtle: var(--Neutral-15);
+  --Border-Intense: var(--Neutral-30);
+  --Border-Interactive-Default: var(--Neutral-30);
+  --Border-Interactive-Disabled: var(--Neutral-30);
+  --Border-Interactive-Error: var(--Scandic-Red-70);
+  --Border-Interactive-Focus: var(--Neutral-80);
+  --Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
+  --Border-Interactive-Selected: var(--Neutral-80);
+  --Border-Inverted: var(--Neutral-Opacity-White-100);
+  --Component-Button-Brand-Primary-Border-Default: var(
+    --Neutral-Opacity-White-0
+  );
+  --Component-Button-Brand-Primary-Border-Disabled: var(
+    --Neutral-Opacity-White-0
+  );
+  --Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
+  --Component-Button-Brand-Primary-Default: var(
+    --Signature-Grand-Hotel-Blue-Bayoux-100
+  );
+  --Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Brand-Primary-On-fill-Default: var(
+    --Neutral-Opacity-White-100
+  );
+  --Component-Button-Brand-Primary-On-fill-Disabled: var(--Neutral-40);
+  --Component-Button-Brand-Primary-On-fill-Hover: var(
+    --Neutral-Opacity-White-100
+  );
+  --Component-Button-Brand-Secondary-Border-Default: var(
+    --Signature-Grand-Hotel-Blue-Bayoux-100
+  );
+  --Component-Button-Brand-Secondary-Border-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
+  --Component-Button-Brand-Secondary-Border-Hover: var(
+    --Signature-Grand-Hotel-Blue-Bayoux-80
+  );
+  --Component-Button-Brand-Secondary-Border-Inverted: var(
+    --Neutral-Opacity-White-100
+  );
+  --Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
+  --Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Brand-Secondary-Hover-Inverted: var(
+    --Signature-Grand-Hotel-Submarine-30
+  );
+  --Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
+  --Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
+  --Component-Button-Brand-Secondary-On-fill-Default: var(
+    --Signature-Grand-Hotel-Blue-Bayoux-100
+  );
+  --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
+  --Component-Button-Brand-Secondary-On-fill-Hover: var(
+    --Signature-Grand-Hotel-Blue-Bayoux-80
+  );
+  --Component-Button-Brand-Secondary-On-fill-Inverted: var(
+    --Neutral-Opacity-White-100
+  );
+  --Component-Button-Brand-Tertiary-Border-Default: var(
+    --Neutral-Opacity-White-0
+  );
+  --Component-Button-Brand-Tertiary-Border-Disabled: var(
+    --Neutral-Opacity-White-0
+  );
+  --Component-Button-Brand-Tertiary-Border-Hover: var(
+    --Neutral-Opacity-White-0
+  );
+  --Component-Button-Brand-Tertiary-Default: var(
+    --Signature-Grand-Hotel-Submarine-30
+  );
+  --Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Brand-Tertiary-On-fill-Default: var(
+    --Signature-Grand-Hotel-Blue-Bayoux-100
+  );
+  --Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Neutral-40);
+  --Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
+  --Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-10);
+  --Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-10);
+  --Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
+  --Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
+  --Component-Button-Inverted-Hover-Inverted: var(
+    --Signature-Grand-Hotel-Submarine-30
+  );
+  --Component-Button-Inverted-On-fill-Default: var(
+    --Signature-Grand-Hotel-Blue-Bayoux-100
+  );
+  --Component-Button-Inverted-On-fill-Disabled: var(--Neutral-40);
+  --Component-Button-Inverted-On-fill-Hover-inverted: var(
+    --Neutral-Opacity-White-100
+  );
+  --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
+  --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
+  --Component-Button-Muted-Default: var(--Neutral-Opacity-White-100);
+  --Component-Button-Muted-Disabled-inverted: var(--Neutral-20);
+  --Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-100);
+  --Component-Button-Muted-Hover: var(--Neutral-Opacity-White-100);
+  --Component-Button-Muted-On-fill-Default: var(--Neutral-90);
+  --Component-Button-Muted-On-fill-Disabled: var(--Neutral-40);
+  --Component-Button-Muted-On-fill-Hover-Inverted: var(
+    --Signature-Grand-Hotel-Blue-Bayoux-80
+  );
+  --Component-Button-Muted-On-fill-Inverted: var(--Neutral-Opacity-White-100);
+  --Icon-Accent: var(--Signature-Grand-Hotel-Careys-Pink-40);
+  --Icon-Default: var(--Neutral-60);
+  --Icon-Feedback-Error: var(--Scandic-Red-70);
+  --Icon-Feedback-Information: var(--Scandic-Blue-70);
+  --Icon-Feedback-Neutral: var(--Neutral-60);
+  --Icon-Feedback-Success: var(--Scandic-Green-60);
+  --Icon-Feedback-Warning: var(--Scandic-Yellow-60);
+  --Icon-Intense: var(--Neutral-90);
+  --Icon-Interactive-Default: var(--Signature-Grand-Hotel-Blue-Bayoux-100);
+  --Icon-Interactive-Disabled: var(--Neutral-30);
+  --Icon-Interactive-Placeholder: var(--Neutral-50);
+  --Icon-Interactive-Secondary: var(--Signature-Grand-Hotel-Careys-Pink-60);
+  --Icon-Inverted: var(--Neutral-Opacity-White-100);
+  --Label-Font-family: var(--Font-family-Grand-Hotel-Body);
+  --Label-Font-weight-2: var(--Font-weight-Medium);
+  --Label-Font-weight: var(--Font-weight-Regular);
+  --Label-Size: var(--Impl-Text-size-5xs);
+  --Link-md-Font-family: var(--Font-family-Grand-Hotel-Body);
+  --Link-md-Font-weight: var(--Font-weight-Medium);
+  --Link-md-Size: var(--Impl-Text-size-3xs);
+  --Link-sm-Font-family: var(--Font-family-Grand-Hotel-Body);
+  --Link-sm-Font-weight: var(--Font-weight-Medium);
+  --Link-sm-Size: var(--Impl-Text-size-4xs);
+  --Overlay-10: var(--Neutral-Opacity-Black-10);
+  --Overlay-20: var(--Neutral-Opacity-Black-20);
+  --Overlay-40: var(--Neutral-Opacity-Black-40);
+  --Overlay-60: var(--Neutral-Opacity-Black-60);
+  --Overlay-80: var(--Neutral-Opacity-Black-80);
+  --Overlay-90: var(--Neutral-Opacity-Black-90);
+  --Surface-Accent-1: var(--Signature-Grand-Hotel-Careys-Pink-70);
+  --Surface-Accent-2: var(--Scandic-Blue-70);
+  --Surface-Accent-3: var(--Signature-Grand-Hotel-Careys-Pink-50);
+  --Surface-Accent-4: var(--Signature-Grand-Hotel-Blue-Bayoux-50);
+  --Surface-Accent-5: var(--Signature-Grand-Hotel-Blue-Bayoux-90);
+  --Surface-Brand-Accent-Default: var(--Signature-Grand-Hotel-Cloudy-30);
+  --Surface-Brand-Primary-1-Default: var(
+    --Signature-Grand-Hotel-Careys-Pink-40
+  );
+  --Surface-Brand-Primary-2-Default: var(
+    --Signature-Grand-Hotel-Careys-Pink-40
+  );
+  --Surface-Brand-Primary-3-Default: var(
+    --Signature-Grand-Hotel-Blue-Bayoux-50
+  );
+  --Surface-Feedback-Error-Accent: var(--Scandic-Red-70);
+  --Surface-Feedback-Error: var(--Scandic-Red-00);
+  --Surface-Feedback-Information-Accent: var(--Scandic-Blue-70);
+  --Surface-Feedback-Information: var(--Scandic-Blue-00);
+  --Surface-Feedback-Neutral-Accent: var(--Neutral-50);
+  --Surface-Feedback-Neutral: var(--Neutral-15);
+  --Surface-Feedback-Succes-Accent: var(--Scandic-Green-60);
+  --Surface-Feedback-Succes: var(--Scandic-Green-00);
+  --Surface-Feedback-Warning--Light: var(--Scandic-Yellow-00);
+  --Surface-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
+  --Surface-Primary-Default: var(--Neutral-Opacity-White-100);
+  --Surface-Primary-Disabled: var(--Neutral-15);
+  --Surface-Primary-Hover-Accent: var(--Neutral-15);
+  --Surface-Primary-OnSurface-Default: var(--Signature-Grand-Hotel-Cloudy-0);
+  --Surface-Secondary-Default: var(--Signature-Grand-Hotel-Cloudy-0);
+  --Surface-Secondary-Secondary: var(--Signature-Grand-Hotel-Cloudy-0);
+  --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100);
+  --Surface-UI-Fill-Active: var(--Neutral-80);
+  --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
+  --Surface-UI-Fill-Disabled: var(--Neutral-15);
+  --Surface-UI-Fill-Intense: var(--Neutral-80);
+  --Tag-Font-family: var(--Font-family-Grand-Hotel-Body);
+  --Tag-Font-weight: var(--Font-weight-Medium);
+  --Tag-Size: var(--Impl-Text-size-5xs);
+  --Text-Accent-Primary: var(--Signature-Grand-Hotel-Careys-Pink-60);
+  --Text-Accent-Secondary: var(--Neutral-50);
+  --Text-Brand-OnAccent-Accent: var(--Neutral-90);
+  --Text-Brand-OnAccent-Default: var(--Neutral-90);
+  --Text-Brand-OnAccent-Heading: var(--Neutral-90);
+  --Text-Brand-OnPrimary-1-Accent: var(--Neutral-90);
+  --Text-Brand-OnPrimary-1-Default: var(--Neutral-90);
+  --Text-Brand-OnPrimary-1-Heading: var(--Neutral-90);
+  --Text-Brand-OnPrimary-2-Accent: var(--Neutral-90);
+  --Text-Brand-OnPrimary-2-Default: var(--Neutral-90);
+  --Text-Brand-OnPrimary-2-Heading: var(--Neutral-90);
+  --Text-Brand-OnPrimary-3-Accent: var(--Neutral-Opacity-White-100);
+  --Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
+  --Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100);
+  --Text-Default: var(--Neutral-90);
+  --Text-Heading: var(--Neutral-90);
+  --Text-Interactive-Default: var(--Signature-Grand-Hotel-Blue-Bayoux-100);
+  --Text-Interactive-Disabled: var(--Neutral-40);
+  --Text-Interactive-Error: var(--Scandic-Red-70);
+  --Text-Interactive-Focus: var(--Neutral-80);
+  --Text-Interactive-Hover-Secondary: var(
+    --Signature-Grand-Hotel-Careys-Pink-50
+  );
+  --Text-Interactive-Placeholder: var(--Neutral-50);
+  --Text-Interactive-Secondary: var(--Signature-Grand-Hotel-Careys-Pink-60);
+  --Text-Inverted: var(--Neutral-Opacity-White-100);
+  --Text-Secondary: var(--Neutral-60);
+  --Text-Tertiary: var(--Neutral-50);
+  --Title-Decorative-lg-Font-family: var(--Font-family-Grand-Hotel-Decorative);
+  --Title-Decorative-lg-Font-weight: var(--Font-weight-Regular);
+  --Title-Decorative-lg-Size: var(--Impl-Text-size-xs);
+  --Title-Decorative-md-Font-family: var(--Font-family-Grand-Hotel-Title);
+  --Title-Decorative-md-Font-weight: var(--Font-weight-Regular);
+  --Title-Decorative-md-Size: var(--Impl-Text-size-3xs);
+  --Title-Overline-sm-Font-family: var(--Font-family-Grand-Hotel-Body);
+  --Title-Overline-sm-Font-weight: var(--Font-weight-Medium);
+  --Title-Overline-sm-Size: var(--Impl-Text-size-4xs);
+  --Title-Subtitle-lg-Font-family: var(--Font-family-Grand-Hotel-Body);
+  --Title-Subtitle-lg-Font-weight: var(--Font-weight-Medium);
+  --Title-Subtitle-lg-Size: var(--Impl-Text-size-sm);
+  --Title-Subtitle-md-Font-family: var(--Font-family-Grand-Hotel-Body);
+  --Title-Subtitle-md-Font-weight: var(--Font-weight-Medium);
+  --Title-Subtitle-md-Size: var(--Impl-Text-size-xs);
+  --Title-lg-Font-family: var(--Font-family-Grand-Hotel-Title);
+  --Title-lg-Font-weight: var(--Font-weight-Regular);
+  --Title-lg-Size: var(--Impl-Text-size-4xl);
+  --Title-md-Font-family: var(--Font-family-Grand-Hotel-Title);
+  --Title-md-Font-weight: var(--Font-weight-Regular);
+  --Title-md-LowCase-Font-family: var(--Font-family-Grand-Hotel-Title);
+  --Title-md-LowCase-Font-weight: var(--Font-weight-Regular);
+  --Title-md-LowCase-Size: var(--Impl-Text-size-2xl);
+  --Title-md-Size: var(--Impl-Text-size-2xl);
+  --Title-sm-Font-family: var(--Font-family-Grand-Hotel-Title);
+  --Title-sm-Font-weight: var(--Font-weight-Regular);
+  --Title-sm-LowCase-Font-family: var(--Font-family-Grand-Hotel-Title);
+  --Title-sm-LowCase-Font-weight: var(--Font-weight-Regular);
+  --Title-sm-LowCase-Size: var(--Impl-Text-size-lg);
+  --Title-sm-Size: var(--Impl-Text-size-lg);
+  --Title-xs-Font-family: var(--Font-family-Grand-Hotel-Title);
+  --Title-xs-Font-weight: var(--Font-weight-Regular);
+  --Title-xs-Size: var(--Impl-Text-size-sm);
+}