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

feat(SW-375): new tokens

Browse Source 
new asset generation logic

BREAKING CHANGE: New tokens.
This commit is contained in:
Michael Zetterberg
2025-01-20 14:46:25 +01:00
parent 7ce2ee2922
commit 56973888c9
189 changed files with 34368 additions and 10344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/design-system/.eslintrc.cjs
View File

@@ -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'],

2
packages/design-system/.gitignore vendored
View File

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

3
packages/design-system/.prettierignore
View File

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

34
packages/design-system/.storybook/main.ts
View File

@@ -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')))
}

7
packages/design-system/.storybook/manager.js
View File

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

21
packages/design-system/.storybook/preview.ts
View File

@@ -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

37
packages/design-system/.storybook/preview.tsx Normal file
View File

@@ -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

132
packages/design-system/README.md
View File

@@ -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.

12
packages/design-system/example/CurrentWeb/index.tsx
View File

@@ -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>
)
}

72
packages/design-system/example/components/ContentPage/Header/Header.tsx Normal file
View File

@@ -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>
)
}

31
packages/design-system/example/components/ContentPage/Header/header.module.css Normal file
View File

@@ -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);
}

1
packages/design-system/example/components/ContentPage/Header/index.tsx Normal file
View File

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

9
packages/design-system/example/components/ContentPage/Hero/Hero.tsx Normal file
View File

@@ -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>
)
}

11
packages/design-system/example/components/ContentPage/Hero/hero.module.css Normal file
View File

@@ -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;
}

1
packages/design-system/example/components/ContentPage/Hero/index.tsx Normal file
View File

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

17
packages/design-system/example/components/ContentPage/Main/Main.tsx Normal file
View File

@@ -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>
)
}

1
packages/design-system/example/components/ContentPage/Main/index.tsx Normal file
View File

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

18
packages/design-system/example/components/ContentPage/Main/main.module.css Normal file
View File

@@ -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);
}

71
packages/design-system/example/components/ContentPage/RichTextEditorContent/RichTextEditorContent.tsx Normal file
View File

@@ -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>
)
}

1
packages/design-system/example/components/ContentPage/RichTextEditorContent/index.tsx Normal file
View File

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

21
packages/design-system/example/components/ContentPage/RichTextEditorContent/ricth-text-editor-content.module.css Normal file
View File

@@ -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);
}

3
packages/design-system/example/components/ContentPage/Sidebar/Sidebar.tsx Normal file
View File

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

1
packages/design-system/example/components/ContentPage/Sidebar/index.tsx Normal file
View File

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

11
packages/design-system/example/components/ContentPage/index.tsx Normal file
View File

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

18
packages/design-system/example/components/HotelPage/Hero/Hero.tsx Normal file
View File

@@ -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>
)
}

17
packages/design-system/example/components/HotelPage/Hero/hero.module.css Normal file
View File

@@ -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 */
}

1
packages/design-system/example/components/HotelPage/Hero/index.tsx Normal file
View File

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

39
packages/design-system/example/components/HotelPage/HotelPage.tsx Normal file
View File

@@ -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>
)
}

18
packages/design-system/example/components/HotelPage/hotel-page.module.css Normal file
View File

@@ -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);
}

1
packages/design-system/example/components/HotelPage/index.tsx Normal file
View File

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

54
packages/design-system/example/components/Main.tsx Normal file
View File

@@ -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>
</>
)
}

40
packages/design-system/example/components/ThemeSwitcher.tsx Normal file
View File

@@ -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>
)
}

17
packages/design-system/example/components/main.module.css Normal file
View File

@@ -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;
}

7
packages/design-system/example/index.html
View File

@@ -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>

13
packages/design-system/example/index.tsx Normal file
View File

@@ -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>
)

3
packages/design-system/example/main.module.css
View File

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

16
packages/design-system/example/main.tsx
View File

@@ -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>
)

2
packages/design-system/example/vite-env.d.ts vendored
View File

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

15
packages/design-system/example/vite.config.ts Normal file
View File

@@ -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',
},
})

379
packages/design-system/generate/generate.ts Normal file
View File

@@ -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',
})

47
packages/design-system/generate/utils.ts Normal file
View File

@@ -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
}

19992
packages/design-system/generate/variables.json Normal file
View File

File diff suppressed because it is too large Load Diff

151
packages/design-system/lib/components/Button/Button.stories.tsx Normal file
View File

@@ -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',
},
}

29
packages/design-system/lib/components/Button/Button.tsx Normal file
View File

@@ -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} />
}

80
packages/design-system/lib/components/Button/button.module.css Normal file
View File

@@ -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;
}

0
packages/design-system/lib/components/CurrentWeb/Button/index.tsx → packages/design-system/lib/components/Button/index.tsx
View File

10
packages/design-system/lib/components/Button/types.ts Normal file
View File

@@ -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> {}

32
packages/design-system/lib/components/Button/variants.ts Normal file
View File

@@ -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))

27
packages/design-system/lib/components/Card/Card.stories.ts
View File

@@ -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',
},
}

25
packages/design-system/lib/components/Card/Card.stories.tsx Normal file
View File

@@ -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',
},
}

31
packages/design-system/lib/components/Card/Card.tsx
View File

@@ -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>
}

171
packages/design-system/lib/components/Card/Compositions/ContentCard.stories.tsx Normal file
View File

@@ -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,
}

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

@@ -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);
}

11
packages/design-system/lib/components/Card/types.ts Normal file
View File

@@ -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
}

17
packages/design-system/lib/components/Card/variants.ts Normal file
View File

@@ -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)

33
packages/design-system/lib/components/ChipButton/ChipButton.stories.tsx Normal file
View File

@@ -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} />
</>
),
},
}

21
packages/design-system/lib/components/ChipButton/ChipButton.tsx Normal file
View File

@@ -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>
)
}

19
packages/design-system/lib/components/ChipButton/chip-button.module.css Normal file
View File

@@ -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);
}

1
packages/design-system/lib/components/ChipButton/index.tsx Normal file
View File

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

25
packages/design-system/lib/components/ChipLink/ChipLink.stories.tsx Normal file
View File

@@ -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} />
</>
),
},
}

19
packages/design-system/lib/components/ChipLink/ChipLink.tsx Normal file
View File

@@ -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>
)
}

18
packages/design-system/lib/components/ChipLink/chip-link.module.css Normal file
View File

@@ -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);
}

1
packages/design-system/lib/components/ChipLink/index.tsx Normal file
View File

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

61
packages/design-system/lib/components/Chips/Chips.stories.tsx Normal file
View File

@@ -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>
)
},
}

7
packages/design-system/lib/components/Chips/Chips.tsx Normal file
View File

@@ -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>
}

6
packages/design-system/lib/components/Chips/chips.module.css Normal file
View File

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

1
packages/design-system/lib/components/Chips/index.tsx Normal file
View File

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

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

@@ -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)" />,
],
},
}

50
packages/design-system/lib/components/CurrentWeb/Button/Button.tsx
View File

@@ -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>
)
}

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

@@ -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;
}

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

@@ -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>
)
}

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

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

16
packages/design-system/lib/components/Icons/ChevronRightSmall.tsx Normal file
View File

@@ -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>
)
}

117
packages/design-system/lib/components/Typography/Typography.docs.mdx Normal file
View File

@@ -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 />

189
packages/design-system/lib/components/Typography/Typography.stories.tsx Normal file
View File

@@ -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>,
},
}

18
packages/design-system/lib/components/Typography/Typography.tsx Normal file
View File

@@ -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(' '),
})
}

3
packages/design-system/lib/components/Typography/index.tsx Normal file
View File

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

9
packages/design-system/lib/components/Typography/types.ts Normal file
View File

@@ -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 }>
}

246
packages/design-system/lib/components/Typography/typography.module.css Normal file
View File

@@ -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;
}

52
packages/design-system/lib/components/Typography/variants.ts Normal file
View File

@@ -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)
}

1
packages/design-system/lib/current.ts
View File

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

25
packages/design-system/lib/docs/colors.mdx
View File

@@ -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>

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

@@ -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>

84
packages/design-system/lib/docs/tokens.mdx
View File

@@ -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>

255
packages/design-system/lib/fonts.css Normal file
View File

@@ -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');
}

318
packages/design-system/lib/generate.ts
View File

@@ -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',
}
)

35
packages/design-system/lib/index.mdx Normal file
View File

@@ -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.

1
packages/design-system/lib/new.ts
View File

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

6
packages/design-system/lib/style-current.css
View File

@@ -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');

8
packages/design-system/lib/style-new.css
View File

@@ -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');

10
packages/design-system/lib/style.css Normal file
View File

@@ -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);

119
packages/design-system/lib/styles/base.css Normal file
View File

@@ -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);
}

114
packages/design-system/lib/styles/base.js Normal file
View File

@@ -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)',
}

628
packages/design-system/lib/styles/colors.ts
View File

@@ -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

371
packages/design-system/lib/styles/downtown-camper.css Normal file
View File

@@ -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);
}

292
packages/design-system/lib/styles/downtown-camper.js Normal file
View File

@@ -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',
}

BIN
packages/design-system/lib/styles/fonts/Helvetica/helvetica.ttf
View File

Binary file not shown.

6
packages/design-system/lib/styles/globals.css
View File

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

349
packages/design-system/lib/styles/grand-hotel.css Normal file
View File

@@ -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);
}

272
packages/design-system/lib/styles/grand-hotel.js Normal file
View File

@@ -0,0 +1,272 @@
/* This file is generated, do not edit manually! */
export const theme = {
'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/Blue Bayoux/50': '#5B6E7F',
'Signature/Grand Hotel/Blue Bayoux/80': '#3D444D',
'Signature/Grand Hotel/Blue Bayoux/90': '#363C43',
'Signature/Grand Hotel/Blue Bayoux/100': '#21252B',
'Signature/Grand Hotel/Cloudy/30': '#B2ADA7',
'Signature/Grand Hotel/Submarine/30': '#B0C4CB',
'Title/lg/Letter spacing': 0.12,
'Title/lg/Font fallback': 'Serif',
'Title/lg/Text-Transform': 'unset',
'Title/md/Letter spacing': 0.18,
'Title/md/Font fallback': 'Serif',
'Title/sm/Letter spacing': 0.28,
'Title/sm/Font fallback': 'Serif',
'Title/sm/Text-Transform': 'unset',
'Title/Decorative/lg/Letter spacing': 0.3,
'Title/Decorative/lg/Font fallback': 'Serif',
'Title/Decorative/lg/Text-Transform': 'uppercase',
'Title/Decorative/md/Letter spacing': 0.24,
'Title/Decorative/md/Font fallback': '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.28,
'Title/sm/LowCase/Font fallback': 'Serif',
'Title/sm/LowCase/Text-Transform': 'unset',
'Title/xs/Letter spacing': 0.24,
'Title/xs/Font fallback': 'Serif',
'Title/xs/Text-Transform': 'unset',
'Title/md/Text-Transform': 'unset',
'Title/md/LowCase/Letter spacing': 0.18,
'Title/md/LowCase/Font fallback': 'Serif',
'Title/md/LowCase/Text-Transform': 'unset',
'Tag/Letter spacing': 0.24,
'Tag/Font fallback': 'sans-serif',
'Tag/Text-Transform': 'uppercase',
'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': '#5B6E7F1A',
'Font family/Grand Hotel/Title': 'Canela Deck',
'Font family/Grand Hotel/Body': 'Fira sans',
'Font family/Grand Hotel/Decorative': 'Canela Deck',
'Title/lg/Font weight': 400,
'Title/lg/Font family': 'Canela Deck',
'Title/md/Font weight': 400,
'Title/md/Font family': 'Canela Deck',
'Title/sm/Font weight': 400,
'Title/sm/Font family': 'Canela Deck',
'Title/sm/LowCase/Font weight': 400,
'Title/sm/LowCase/Font family': 'Canela Deck',
'Title/Decorative/lg/Font weight': 400,
'Title/Decorative/lg/Font family': 'Canela Deck',
'Title/Decorative/md/Font weight': 400,
'Title/Decorative/md/Font family': 'Canela Deck',
'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': 500,
'Title/Overline/sm/Font family': 'Fira sans',
'Title/xs/Font weight': 400,
'Title/xs/Font family': 'Canela Deck',
'Title/md/LowCase/Font weight': 400,
'Title/md/LowCase/Font family': 'Canela Deck',
'Tag/Font weight': 500,
'Tag/Font family': 'Fira sans',
'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': '#AA546B',
'Text/Accent Secondary': '#747474',
'Text/Inverted': '#FFFFFF',
'Text/Interactive/Default': '#21252B',
'Text/Interactive/Secondary': '#AA546B',
'Text/Interactive/Hover Secondary': '#C27183',
'Text/Interactive/Disabled': '#8C8C8C',
'Text/Interactive/Focus': '#262626',
'Text/Interactive/Error': '#AD0015',
'Text/Interactive/Placeholder': '#747474',
'Text/Brand/OnAccent/Heading': '#1F1F1F',
'Text/Brand/OnAccent/Default': '#1F1F1F',
'Text/Brand/OnAccent/Accent': '#1F1F1F',
'Text/Brand/OnPrimary 1/Heading': '#1F1F1F',
'Text/Brand/OnPrimary 1/Default': '#1F1F1F',
'Text/Brand/OnPrimary 1/Accent': '#1F1F1F',
'Text/Brand/OnPrimary 2/Heading': '#1F1F1F',
'Text/Brand/OnPrimary 2/Default': '#1F1F1F',
'Text/Brand/OnPrimary 2/Accent': '#1F1F1F',
'Text/Brand/OnPrimary 3/Heading': '#FFFFFF',
'Text/Brand/OnPrimary 3/Default': '#FFFFFF',
'Text/Brand/OnPrimary 3/Accent': '#FFFFFF',
'Background/Primary': '#FFFFFF',
'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': '#F7F6F5',
'Surface/Primary/Disabled': '#E9E9E9',
'Surface/Secondary/Default': '#F7F6F5',
'Surface/Secondary/Secondary': '#F7F6F5',
'Surface/Secondary/Hover': '#ebeae9',
'Surface/Brand/Accent/Default': '#B2ADA7',
'Surface/Brand/Primary 1/Default': '#DBA7B1',
'Surface/Brand/Primary 2/Default': '#DBA7B1',
'Surface/Brand/Primary 3/Default': '#5B6E7F',
'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': '#8E4258',
'Surface/Accent/2': '#284EA0',
'Surface/Accent/3': '#C27183',
'Surface/Accent/4': '#5B6E7F',
'Surface/Accent/5': '#363C43',
'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': '#DBA7B1',
'Icon/Interactive/Default': '#21252B',
'Icon/Interactive/Secondary': '#AA546B',
'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': '#21252B',
'Component/Button/Brand/Primary/Hover': '#34373d',
'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': '#B0C4CB',
'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
'Component/Button/Brand/Secondary/On fill/Default': '#21252B',
'Component/Button/Brand/Secondary/On fill/Hover': '#3D444D',
'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
'Component/Button/Brand/Secondary/Border/Default': '#21252B',
'Component/Button/Brand/Secondary/Border/Hover': '#3D444D',
'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
'Component/Button/Brand/Secondary/Border/Hover inverted': '#e6e6e7',
'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
'Component/Button/Brand/Tertiary/Default': '#B0C4CB',
'Component/Button/Brand/Tertiary/Hover': '#b8cad0',
'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
'Component/Button/Brand/Tertiary/On fill/Default': '#21252B',
'Component/Button/Brand/Tertiary/On fill/Hover': '#34373d',
'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': '#B0C4CB',
'Component/Button/Inverted/Disabled': '#1F1C1B1A',
'Component/Button/Inverted/On fill/Default': '#21252B',
'Component/Button/Inverted/On fill/Hover': '#34373d',
'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': '#FFFFFF1A',
'Component/Button/Inverted/Border/Disable': '#FFFFFF1A',
'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': '#FFFFFF',
'Component/Button/Muted/Hover': '#FFFFFF',
'Component/Button/Muted/Disabled': '#FFFFFF',
'Component/Button/Muted/Hover inverted': '#f2f2f2',
'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': '#3D444D',
'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',
}

Some files were not shown because too many files have changed in this diff Show More