Merged in monorepo-step-1 (pull request #1080)
Migrate to a monorepo setup - step 1 * Move web to subfolder /apps/scandic-web * Yarn + transitive deps - Move to yarn - design-system package removed for now since yarn doesn't support the parameter for token (ie project currently broken) - Add missing transitive dependencies as Yarn otherwise prevents these imports - VS Code doesn't pick up TS path aliases unless you open /apps/scandic-web instead of root (will be fixed with monorepo) * Pin framer-motion to temporarily fix typing issue https://github.com/adobe/react-spectrum/issues/7494 * Pin zod to avoid typ error There seems to have been a breaking change in the types returned by zod where error is now returned as undefined instead of missing in the type. We should just handle this but to avoid merge conflicts just pin the dependency for now. * Pin react-intl version Pin version of react-intl to avoid tiny type issue where formatMessage does not accept a generic any more. This will be fixed in a future commit, but to avoid merge conflicts just pin for now. * Pin typescript version Temporarily pin version as newer versions as stricter and results in a type error. Will be fixed in future commit after merge. * Setup workspaces * Add design-system as a monorepo package * Remove unused env var DESIGN_SYSTEM_ACCESS_TOKEN * Fix husky for monorepo setup * Update netlify.toml * Add lint script to root package.json * Add stub readme * Fix react-intl formatMessage types * Test netlify.toml in root * Remove root toml * Update netlify.toml publish path * Remove package-lock.json * Update build for branch/preview builds Approved-by: Linus Flood
This commit is contained in:
Anton Gunnarsson
committed by
Linus Flood
Linus Flood
parent
667cab6fb6
commit
80100e7631
14
packages/design-system/.eslintrc.cjs
Normal file
14
packages/design-system/.eslintrc.cjs
Normal file
@@ -0,0 +1,14 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
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'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
}
|
||||
26
packages/design-system/.gitignore
vendored
Normal file
26
packages/design-system/.gitignore
vendored
Normal file
@@ -0,0 +1,26 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
storybook-static
|
||||
2
packages/design-system/.npmignore
Normal file
2
packages/design-system/.npmignore
Normal file
@@ -0,0 +1,2 @@
|
||||
# this file is here to avoid having dist folder excluded by .gitignore
|
||||
# without this file here the dist folder would not end up in the package distribution
|
||||
10
packages/design-system/.prettierignore
Normal file
10
packages/design-system/.prettierignore
Normal file
@@ -0,0 +1,10 @@
|
||||
# Directories:
|
||||
node_modules/
|
||||
out/
|
||||
dist/
|
||||
.vscode/*
|
||||
.husky/*
|
||||
|
||||
# Files:
|
||||
!.vscode/launch.json
|
||||
.prettierignore
|
||||
8
packages/design-system/.prettierrc
Normal file
8
packages/design-system/.prettierrc
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5",
|
||||
"printWidth": 80,
|
||||
"tabWidth": 2,
|
||||
"endOfLine": "lf"
|
||||
}
|
||||
35
packages/design-system/.storybook/main.ts
Normal file
35
packages/design-system/.storybook/main.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { withoutVitePlugins } from '@storybook/builder-vite'
|
||||
|
||||
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',
|
||||
],
|
||||
framework: {
|
||||
name: '@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
|
||||
7
packages/design-system/.storybook/manager.js
Normal file
7
packages/design-system/.storybook/manager.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import { addons } from '@storybook/manager-api'
|
||||
|
||||
addons.setConfig({
|
||||
sidebar: {
|
||||
collapsedRoots: ['current-web'],
|
||||
},
|
||||
})
|
||||
21
packages/design-system/.storybook/preview.ts
Normal file
21
packages/design-system/.storybook/preview.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
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
|
||||
30
packages/design-system/README.md
Normal file
30
packages/design-system/README.md
Normal file
@@ -0,0 +1,30 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@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
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
|
||||
|
||||
- Configure the top-level `parserOptions` property like this:
|
||||
|
||||
```js
|
||||
export default {
|
||||
// other rules...
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
sourceType: 'module',
|
||||
project: ['./tsconfig.json', './tsconfig.node.json'],
|
||||
tsconfigRootDir: __dirname,
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
- 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
|
||||
12
packages/design-system/example/CurrentWeb/index.tsx
Normal file
12
packages/design-system/example/CurrentWeb/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
12
packages/design-system/example/index.html
Normal file
12
packages/design-system/example/index.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/example/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
3
packages/design-system/example/main.module.css
Normal file
3
packages/design-system/example/main.module.css
Normal file
@@ -0,0 +1,3 @@
|
||||
.mainCard {
|
||||
background: blue;
|
||||
}
|
||||
16
packages/design-system/example/main.tsx
Normal file
16
packages/design-system/example/main.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
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
Normal file
2
packages/design-system/example/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
/// <reference types="vite/client" />
|
||||
/// <reference types="vitest" />
|
||||
27
packages/design-system/lib/components/Card/Card.stories.ts
Normal file
27
packages/design-system/lib/components/Card/Card.stories.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
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',
|
||||
},
|
||||
}
|
||||
26
packages/design-system/lib/components/Card/Card.tsx
Normal file
26
packages/design-system/lib/components/Card/Card.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import styles from './card.module.css'
|
||||
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
|
||||
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>
|
||||
}
|
||||
13
packages/design-system/lib/components/Card/card.module.css
Normal file
13
packages/design-system/lib/components/Card/card.module.css
Normal file
@@ -0,0 +1,13 @@
|
||||
.card {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.basic {
|
||||
outline: solid 1px green;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-style: solid;
|
||||
border-width: 3px;
|
||||
border-color: var(--color-brand-main-normal);
|
||||
}
|
||||
1
packages/design-system/lib/components/Card/index.tsx
Normal file
1
packages/design-system/lib/components/Card/index.tsx
Normal file
@@ -0,0 +1 @@
|
||||
export { Card } from './Card'
|
||||
@@ -0,0 +1,82 @@
|
||||
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)" />,
|
||||
],
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
'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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { Button } from './Button'
|
||||
@@ -0,0 +1,29 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { TestIcon } from './TestIcon'
|
||||
1
packages/design-system/lib/current.ts
Normal file
1
packages/design-system/lib/current.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { Button } from './components/CurrentWeb/Button'
|
||||
25
packages/design-system/lib/docs/colors.mdx
Normal file
25
packages/design-system/lib/docs/colors.mdx
Normal file
@@ -0,0 +1,25 @@
|
||||
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
Normal file
27
packages/design-system/lib/docs/current-web/colors.mdx
Normal file
@@ -0,0 +1,27 @@
|
||||
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
Normal file
84
packages/design-system/lib/docs/tokens.mdx
Normal file
@@ -0,0 +1,84 @@
|
||||
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>
|
||||
318
packages/design-system/lib/generate.ts
Normal file
318
packages/design-system/lib/generate.ts
Normal file
@@ -0,0 +1,318 @@
|
||||
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',
|
||||
}
|
||||
)
|
||||
1
packages/design-system/lib/new.ts
Normal file
1
packages/design-system/lib/new.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { Card } from './components/Card'
|
||||
6
packages/design-system/lib/style-current.css
Normal file
6
packages/design-system/lib/style-current.css
Normal file
@@ -0,0 +1,6 @@
|
||||
@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
Normal file
8
packages/design-system/lib/style-new.css
Normal file
@@ -0,0 +1,8 @@
|
||||
@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');
|
||||
628
packages/design-system/lib/styles/colors.ts
Normal file
628
packages/design-system/lib/styles/colors.ts
Normal file
@@ -0,0 +1,628 @@
|
||||
/* 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
|
||||
BIN
packages/design-system/lib/styles/fonts/Helvetica/helvetica.ttf
Normal file
BIN
packages/design-system/lib/styles/fonts/Helvetica/helvetica.ttf
Normal file
Binary file not shown.
5
packages/design-system/lib/styles/globals.css
Normal file
5
packages/design-system/lib/styles/globals.css
Normal file
@@ -0,0 +1,5 @@
|
||||
@font-face {
|
||||
font-family: 'Helvetica';
|
||||
font-style: normal;
|
||||
src: url('./fonts/Helvetica/helvetica.ttf') format('ttf');
|
||||
}
|
||||
165
packages/design-system/lib/styles/modes.css
Normal file
165
packages/design-system/lib/styles/modes.css
Normal file
@@ -0,0 +1,165 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
:root {
|
||||
--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-Aqua: #73fcee;
|
||||
--Go-Brand-Chartreuse: #85ff52;
|
||||
--Go-Brand-Coral: #fa3737;
|
||||
--Go-Brand-Lavender: #dcd7ff;
|
||||
--Go-Brand-Lemon: #f5ff73;
|
||||
--Go-Brand-Linen: #e0dcce;
|
||||
--Go-Brand-Obsidian: #2d163a;
|
||||
--Go-Brand-Pine: #21331f;
|
||||
--Go-Brand-Powder-rose: #ecc8c9;
|
||||
--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;
|
||||
--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;
|
||||
--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-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-Brand-Burgundy: #4d001b;
|
||||
--Scandic-Brand-Dark-Blue: #0d1440;
|
||||
--Scandic-Brand-Dark-Green: #093021;
|
||||
--Scandic-Brand-Dark-Grey: #291710;
|
||||
--Scandic-Brand-Light-Blue: #b5e0ff;
|
||||
--Scandic-Brand-Light-Green: #d2edaf;
|
||||
--Scandic-Brand-Pale-Peach: #f7e1d5;
|
||||
--Scandic-Brand-Pale-Yellow: #fff0c2;
|
||||
--Scandic-Brand-Scandic-Red: #cd0921;
|
||||
--Scandic-Brand-Warm-White: #faf6f2;
|
||||
--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-Peach-00: #fff3ed;
|
||||
--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-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-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;
|
||||
--UI-Grey-00: #f9f6f4;
|
||||
--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;
|
||||
--UI-Opacity-Almost-Black-0: #1f1c1b00;
|
||||
--UI-Opacity-Almost-Black-10: #1f1c1b1a;
|
||||
--UI-Opacity-Almost-Black-20: #1f1c1b33;
|
||||
--UI-Opacity-Almost-Black-30: #1f1c1b4d;
|
||||
--UI-Opacity-Almost-Black-40: #1f1c1b66;
|
||||
--UI-Opacity-Almost-Black-50: #1f1c1b80;
|
||||
--UI-Opacity-Almost-Black-60: #1f1c1b99;
|
||||
--UI-Opacity-Almost-Black-70: #1f1c1bb3;
|
||||
--UI-Opacity-Almost-Black-80: #1f1c1bcc;
|
||||
--UI-Opacity-Almost-Black-90: #1f1c1be6;
|
||||
--UI-Opacity-Almost-Black-100: #1f1c1b;
|
||||
--UI-Opacity-White-0: #ffffff00;
|
||||
--UI-Opacity-White-10: #ffffff1a;
|
||||
--UI-Opacity-White-20: #ffffff33;
|
||||
--UI-Opacity-White-30: #ffffff4d;
|
||||
--UI-Opacity-White-40: #ffffff66;
|
||||
--UI-Opacity-White-50: #ffffff80;
|
||||
--UI-Opacity-White-60: #ffffff99;
|
||||
--UI-Opacity-White-70: #ffffffb3;
|
||||
--UI-Opacity-White-80: #ffffffcc;
|
||||
--UI-Opacity-White-90: #ffffffe6;
|
||||
--UI-Opacity-White-100: #ffffff;
|
||||
}
|
||||
134
packages/design-system/lib/styles/new.css
Normal file
134
packages/design-system/lib/styles/new.css
Normal file
@@ -0,0 +1,134 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
:root {
|
||||
--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-Aqua: #73fcee;
|
||||
--Go-Brand-Chartreuse: #85ff52;
|
||||
--Go-Brand-Coral: #fa3737;
|
||||
--Go-Brand-Lavender: #dcd7ff;
|
||||
--Go-Brand-Lemon: #f5ff73;
|
||||
--Go-Brand-Linen: #e0dcce;
|
||||
--Go-Brand-Obsidian: #2d163a;
|
||||
--Go-Brand-Pine: #21331f;
|
||||
--Go-Brand-Powderrose: #ecc8c9;
|
||||
--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;
|
||||
--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;
|
||||
--Main-Blue-00: #eaf2fc;
|
||||
--Main-Blue-10: #c7d9f5;
|
||||
--Main-Blue-20: #a5c2ee;
|
||||
--Main-Blue-30: #84ace7;
|
||||
--Main-Blue-40: #6697df;
|
||||
--Main-Blue-50: #4983d8;
|
||||
--Main-Blue-60: #2e70d1;
|
||||
--Main-Blue-70: #1555b4;
|
||||
--Main-Blue-80: #023d96;
|
||||
--Main-Blue-90: #002a69;
|
||||
--Main-Blue-100: #001b42;
|
||||
--Main-Brand-Burgundy: #4d001b;
|
||||
--Main-Brand-DarkBlue: #0d1440;
|
||||
--Main-Brand-DarkGreen: #093021;
|
||||
--Main-Brand-DarkGrey: #291710;
|
||||
--Main-Brand-LightBlue: #b5e0ff;
|
||||
--Main-Brand-LightGreen: #d2edaf;
|
||||
--Main-Brand-PalePeach: #f7e1d5;
|
||||
--Main-Brand-PaleYellow: #fff0c2;
|
||||
--Main-Brand-ScandicRed: #cd0921;
|
||||
--Main-Brand-WarmWhite: #faf6f2;
|
||||
--Main-Green-00: #e7f5e1;
|
||||
--Main-Green-10: #badda8;
|
||||
--Main-Green-20: #99ca7e;
|
||||
--Main-Green-30: #7ab859;
|
||||
--Main-Green-40: #5fa53a;
|
||||
--Main-Green-50: #47931f;
|
||||
--Main-Green-60: #33800a;
|
||||
--Main-Green-70: #286806;
|
||||
--Main-Green-80: #1e4f03;
|
||||
--Main-Green-90: #143701;
|
||||
--Main-Green-100: #0e2600;
|
||||
--Main-Grey-00: #f9f6f4;
|
||||
--Main-Grey-10: #ebe8e6;
|
||||
--Main-Grey-20: #d6d2d0;
|
||||
--Main-Grey-30: #c2bdba;
|
||||
--Main-Grey-40: #a8a4a2;
|
||||
--Main-Grey-50: #8c8987;
|
||||
--Main-Grey-60: #787472;
|
||||
--Main-Grey-70: #635f5d;
|
||||
--Main-Grey-80: #57514e;
|
||||
--Main-Grey-90: #403937;
|
||||
--Main-Grey-100: #26201e;
|
||||
--Main-Grey-Almostblack: #1f1c1b;
|
||||
--Main-Grey-White: #ffffff;
|
||||
--Main-Red-00: #ffebeb;
|
||||
--Main-Red-10: #f7c1c2;
|
||||
--Main-Red-20: #f79499;
|
||||
--Main-Red-30: #f26b74;
|
||||
--Main-Red-40: #ed4251;
|
||||
--Main-Red-50: #e32034;
|
||||
--Main-Red-60: #cd0921;
|
||||
--Main-Red-70: #ad0015;
|
||||
--Main-Red-80: #8d0011;
|
||||
--Main-Red-90: #6d000d;
|
||||
--Main-Red-100: #4d001b;
|
||||
--Main-Scandic-00: #ffebeb;
|
||||
--Main-Scandic-10: #f7c1c2;
|
||||
--Main-Scandic-20: #f79499;
|
||||
--Main-Scandic-30: #f26b74;
|
||||
--Main-Scandic-40: #ed4251;
|
||||
--Main-Scandic-50: #e32034;
|
||||
--Main-Scandic-60: #cd0921;
|
||||
--Main-Scandic-70: #ad0015;
|
||||
--Main-Scandic-80: #8d0011;
|
||||
--Main-Scandic-90: #6d000d;
|
||||
--Main-Scandic-100: #4d001b;
|
||||
--Main-Yellow-00: #fff8e3;
|
||||
--Main-Yellow-10: #fff0c2;
|
||||
--Main-Yellow-20: #fade89;
|
||||
--Main-Yellow-30: #f7ce52;
|
||||
--Main-Yellow-40: #edb532;
|
||||
--Main-Yellow-50: #e59515;
|
||||
--Main-Yellow-60: #d17308;
|
||||
--Main-Yellow-70: #a85211;
|
||||
--Main-Yellow-80: #7d370f;
|
||||
--Main-Yellow-90: #4f2313;
|
||||
--Main-Yellow-100: #301508;
|
||||
}
|
||||
41
packages/design-system/lib/styles/numberedTokens.css
Normal file
41
packages/design-system/lib/styles/numberedTokens.css
Normal file
@@ -0,0 +1,41 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
:root {
|
||||
--Corner-radius-Large: 12px;
|
||||
--Corner-radius-Medium: 8px;
|
||||
--Corner-radius-Rounded: 250px;
|
||||
--Corner-radius-Small: 4px;
|
||||
--Corner-radius-xLarge: 16px;
|
||||
--Layout-Desktop-Breakpoints-max-width: 1920px;
|
||||
--Layout-Desktop-Breakpoints-min-width: 1367px;
|
||||
--Layout-Desktop-Columns-Column: 12px;
|
||||
--Layout-Desktop-Gutter-max-width: 24px;
|
||||
--Layout-Desktop-Gutter-min-width: 16px;
|
||||
--Layout-Desktop-Margin-Margin-max: 72px;
|
||||
--Layout-Desktop-Margin-Margin-min: 40px;
|
||||
--Layout-Mobile-Breakpoints-max-width: 767px;
|
||||
--Layout-Mobile-Breakpoints-min-width: 320px;
|
||||
--Layout-Mobile-Columns-Column: 4px;
|
||||
--Layout-Mobile-Gutter-max-width: 16px;
|
||||
--Layout-Mobile-Gutter-min-width: 16px;
|
||||
--Layout-Mobile-Margin-Margin-max: 16px;
|
||||
--Layout-Mobile-Margin-Margin-min: 16px;
|
||||
--Layout-Tablet-Breakpoints-max-width: 1366px;
|
||||
--Layout-Tablet-Breakpoints-min-width: 768px;
|
||||
--Layout-Tablet-Columns-Column: 8px;
|
||||
--Layout-Tablet-Gutter-max-width: 16px;
|
||||
--Layout-Tablet-Gutter-min-width: 16px;
|
||||
--Layout-Tablet-Margin-Margin-max: 32px;
|
||||
--Layout-Tablet-Margin-Margin-min: 24px;
|
||||
--Spacing-x0: 0px;
|
||||
--Spacing-x1: 8px;
|
||||
--Spacing-x2: 16px;
|
||||
--Spacing-x3: 24px;
|
||||
--Spacing-x4: 32px;
|
||||
--Spacing-x5: 40px;
|
||||
--Spacing-x6: 48px;
|
||||
--Spacing-x7: 56px;
|
||||
--Spacing-x9: 72px;
|
||||
--Spacing-x-half: 4px;
|
||||
--Spacing-x-one-and-half: 12px;
|
||||
--Spacing-x-quarter: 2px;
|
||||
}
|
||||
134
packages/design-system/lib/styles/old.css
Normal file
134
packages/design-system/lib/styles/old.css
Normal file
@@ -0,0 +1,134 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
:root {
|
||||
--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-Aqua: #73fcee;
|
||||
--Go-Brand-Chartreuse: #85ff52;
|
||||
--Go-Brand-Coral: #fa3737;
|
||||
--Go-Brand-Lavender: #dcd7ff;
|
||||
--Go-Brand-Lemon: #f5ff73;
|
||||
--Go-Brand-Linen: #e0dcce;
|
||||
--Go-Brand-Obsidian: #2d163a;
|
||||
--Go-Brand-Pine: #21331f;
|
||||
--Go-Brand-Powderrose: #ecc8c9;
|
||||
--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;
|
||||
--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;
|
||||
--Main-Blue-00: #eaf2fc;
|
||||
--Main-Blue-10: #c7d9f5;
|
||||
--Main-Blue-20: #a5c2ee;
|
||||
--Main-Blue-30: #84ace7;
|
||||
--Main-Blue-40: #6697df;
|
||||
--Main-Blue-50: #4983d8;
|
||||
--Main-Blue-60: #2e70d1;
|
||||
--Main-Blue-70: #1555b4;
|
||||
--Main-Blue-80: #023d96;
|
||||
--Main-Blue-90: #002a69;
|
||||
--Main-Blue-100: #001b42;
|
||||
--Main-Brand-Burgundy: #4d001b;
|
||||
--Main-Brand-DarkBlue: #0d1440;
|
||||
--Main-Brand-DarkGreen: #093021;
|
||||
--Main-Brand-DarkGrey: #291710;
|
||||
--Main-Brand-LightBlue: #b5e0ff;
|
||||
--Main-Brand-LightGreen: #d2edaf;
|
||||
--Main-Brand-PalePeach: #f7e1d5;
|
||||
--Main-Brand-PaleYellow: #fff0c2;
|
||||
--Main-Brand-ScandicRed: #cd0921;
|
||||
--Main-Brand-WarmWhite: #faf6f2;
|
||||
--Main-Green-00: #e7f5e1;
|
||||
--Main-Green-10: #badda8;
|
||||
--Main-Green-20: #99ca7e;
|
||||
--Main-Green-30: #7ab859;
|
||||
--Main-Green-40: #5fa53a;
|
||||
--Main-Green-50: #47931f;
|
||||
--Main-Green-60: #33800a;
|
||||
--Main-Green-70: #286806;
|
||||
--Main-Green-80: #1e4f03;
|
||||
--Main-Green-90: #143701;
|
||||
--Main-Green-100: #0e2600;
|
||||
--Main-Grey-00: #f2f2f2;
|
||||
--Main-Grey-10: #e7e7e8;
|
||||
--Main-Grey-20: #d8d8da;
|
||||
--Main-Grey-30: #ceced2;
|
||||
--Main-Grey-40: #c5c5ca;
|
||||
--Main-Grey-50: #a7a7ad;
|
||||
--Main-Grey-60: #7e7e84;
|
||||
--Main-Grey-70: #535358;
|
||||
--Main-Grey-80: #2f2f32;
|
||||
--Main-Grey-90: #1b1b1c;
|
||||
--Main-Grey-100: #111112;
|
||||
--Main-Grey-Almostblack: #1f1c1b;
|
||||
--Main-Grey-White: #ffffff;
|
||||
--Main-Red-00: #ffebeb;
|
||||
--Main-Red-10: #f7c1c2;
|
||||
--Main-Red-20: #f79499;
|
||||
--Main-Red-30: #f26b74;
|
||||
--Main-Red-40: #ed4251;
|
||||
--Main-Red-50: #e32034;
|
||||
--Main-Red-60: #cd0921;
|
||||
--Main-Red-70: #ad0015;
|
||||
--Main-Red-80: #8d0011;
|
||||
--Main-Red-90: #6d000d;
|
||||
--Main-Red-100: #4d001b;
|
||||
--Main-Scandic-00: #edf7f7;
|
||||
--Main-Scandic-10: #c5e3e5;
|
||||
--Main-Scandic-20: #97d3d9;
|
||||
--Main-Scandic-30: #74cbd2;
|
||||
--Main-Scandic-40: #53c3cc;
|
||||
--Main-Scandic-50: #26a7b2;
|
||||
--Main-Scandic-60: #00838e;
|
||||
--Main-Scandic-70: #055b62;
|
||||
--Main-Scandic-80: #08393d;
|
||||
--Main-Scandic-90: #082022;
|
||||
--Main-Scandic-100: #061112;
|
||||
--Main-Yellow-00: #fff8e3;
|
||||
--Main-Yellow-10: #fff0c2;
|
||||
--Main-Yellow-20: #fade89;
|
||||
--Main-Yellow-30: #f7ce52;
|
||||
--Main-Yellow-40: #edb532;
|
||||
--Main-Yellow-50: #e59515;
|
||||
--Main-Yellow-60: #d17308;
|
||||
--Main-Yellow-70: #a85211;
|
||||
--Main-Yellow-80: #7d370f;
|
||||
--Main-Yellow-90: #4f2313;
|
||||
--Main-Yellow-100: #301508;
|
||||
}
|
||||
318
packages/design-system/lib/styles/tokens.css
Normal file
318
packages/design-system/lib/styles/tokens.css
Normal file
@@ -0,0 +1,318 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
:root {
|
||||
--Base-Background-Primary-Elevated: var(--Scandic-Beige-00);
|
||||
--Base-Background-Primary-Normal: var(--Scandic-Beige-00);
|
||||
--Base-Border-Hover: var(--Scandic-Peach-80);
|
||||
--Base-Border-Inverted: var(--UI-Opacity-White-100);
|
||||
--Base-Border-Normal: var(--Scandic-Beige-40);
|
||||
--Base-Border-Subtle: var(--Scandic-Beige-20);
|
||||
--Base-Button-Inverted-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Inverted-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Inverted-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Inverted-Fill-Disabled: var(--UI-Grey-20);
|
||||
--Base-Button-Inverted-Fill-Hover: var(--Scandic-Beige-10);
|
||||
--Base-Button-Inverted-Fill-Hover-alt: var(--Scandic-Peach-10);
|
||||
--Base-Button-Inverted-Fill-Normal: var(--UI-Opacity-White-100);
|
||||
--Base-Button-Inverted-On-Fill-Disabled: var(--UI-Grey-40);
|
||||
--Base-Button-Inverted-On-Fill-Hover: var(--Scandic-Red-90);
|
||||
--Base-Button-Inverted-On-Fill-Normal: var(--Scandic-Red-100);
|
||||
--Base-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Primary-Fill-Disabled: var(--UI-Grey-20);
|
||||
--Base-Button-Primary-Fill-Hover: var(--Scandic-Red-70);
|
||||
--Base-Button-Primary-Fill-Normal: var(--Scandic-Red-60);
|
||||
--Base-Button-Primary-On-Fill-Disabled: var(--UI-Grey-40);
|
||||
--Base-Button-Primary-On-Fill-Hover: var(--UI-Opacity-White-100);
|
||||
--Base-Button-Primary-On-Fill-Normal: var(--UI-Opacity-White-100);
|
||||
--Base-Button-Secondary-Border-Disabled: var(--UI-Grey-30);
|
||||
--Base-Button-Secondary-Border-Hover: var(--Scandic-Peach-80);
|
||||
--Base-Button-Secondary-Border-Normal: var(--Scandic-Red-100);
|
||||
--Base-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Secondary-On-Fill-Disabled: var(--UI-Grey-40);
|
||||
--Base-Button-Secondary-On-Fill-Hover: var(--Scandic-Peach-80);
|
||||
--Base-Button-Secondary-On-Fill-Normal: var(--Scandic-Red-100);
|
||||
--Base-Button-Tertiary-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Tertiary-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Tertiary-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Tertiary-Fill-Disabled: var(--UI-Grey-20);
|
||||
--Base-Button-Tertiary-Fill-Hover: var(--Scandic-Red-90);
|
||||
--Base-Button-Tertiary-Fill-Normal: var(--Scandic-Red-100);
|
||||
--Base-Button-Tertiary-On-Fill-Disabled: var(--UI-Grey-40);
|
||||
--Base-Button-Tertiary-On-Fill-Hover: var(--UI-Opacity-White-100);
|
||||
--Base-Button-Tertiary-On-Fill-Normal: var(--UI-Opacity-White-100);
|
||||
--Base-Button-Text-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Text-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Text-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Text-Fill-Disabled: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Text-Fill-Hover: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Text-Fill-Normal: var(--UI-Opacity-White-0);
|
||||
--Base-Button-Text-On-Fill-Disabled: var(--UI-Grey-40);
|
||||
--Base-Button-Text-On-Fill-Hover: var(--Scandic-Peach-80);
|
||||
--Base-Button-Text-On-Fill-Normal: var(--Scandic-Red-100);
|
||||
--Base-Icon-Low-contrast: var(--Scandic-Peach-70);
|
||||
--Base-Interactive-Surface-Primary-normal: var(--Scandic-Red-80);
|
||||
--Base-Interactive-Surface-Secondary-normal: var(--Scandic-Green-70);
|
||||
--Base-Interactive-Surface-Tertiary-normal: var(--Scandic-Blue-60);
|
||||
--Base-Surface-Primary-dark-Hover: var(--Scandic-Peach-20);
|
||||
--Base-Surface-Primary-dark-Normal: var(--Scandic-Peach-10);
|
||||
--Base-Surface-Primary-light-Hover: var(--UI-Grey-00);
|
||||
--Base-Surface-Primary-light-Hover-alt: var(--Scandic-Beige-10);
|
||||
--Base-Surface-Primary-light-Normal: var(--UI-Opacity-White-100);
|
||||
--Base-Surface-Secondary-light-Hover: var(--Scandic-Peach-10);
|
||||
--Base-Surface-Secondary-light-Hover-alt: var(--Scandic-Peach-20);
|
||||
--Base-Surface-Secondary-light-Normal: var(--Scandic-Beige-00);
|
||||
--Base-Surface-Subtle-Hover: var(--Scandic-Beige-20);
|
||||
--Base-Surface-Subtle-Normal: var(--Scandic-Beige-10);
|
||||
--Base-Text-Accent: var(--Scandic-Red-60);
|
||||
--Base-Text-Disabled: var(--UI-Grey-40);
|
||||
--Base-Text-High-contrast: var(--Scandic-Red-100);
|
||||
--Base-Text-Inverted: var(--UI-Opacity-White-100);
|
||||
--Base-Text-Medium-contrast: var(--Scandic-Peach-80);
|
||||
--Primary-Dark-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Primary-Dark-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Primary-Dark-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Primary-Dark-Button-Primary-Fill-Disabled: var(--UI-Opacity-White-20);
|
||||
--Primary-Dark-Button-Primary-Fill-Hover: var(--Scandic-Peach-20);
|
||||
--Primary-Dark-Button-Primary-Fill-Normal: var(--Scandic-Peach-10);
|
||||
--Primary-Dark-Button-Primary-On-Fill-Disabled: var(--UI-Opacity-White-30);
|
||||
--Primary-Dark-Button-Primary-On-Fill-Hover: var(--Scandic-Red-80);
|
||||
--Primary-Dark-Button-Primary-On-Fill-Normal: var(--Scandic-Red-100);
|
||||
--Primary-Dark-Button-Secondary-Border-Disabled: var(--UI-Opacity-White-20);
|
||||
--Primary-Dark-Button-Secondary-Border-Hover: var(--Scandic-Peach-30);
|
||||
--Primary-Dark-Button-Secondary-Border-Normal: var(--Scandic-Peach-10);
|
||||
--Primary-Dark-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
|
||||
--Primary-Dark-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
|
||||
--Primary-Dark-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
|
||||
--Primary-Dark-Button-Secondary-On-Fill-Disabled: var(--UI-Opacity-White-30);
|
||||
--Primary-Dark-Button-Secondary-On-Fill-Hover: var(--Scandic-Peach-30);
|
||||
--Primary-Dark-Button-Secondary-On-Fill-Normal: var(--Scandic-Peach-10);
|
||||
--Primary-Dark-On-Surface-Accent: var(--Scandic-Peach-50);
|
||||
--Primary-Dark-On-Surface-Divider: var(--Scandic-Peach-80);
|
||||
--Primary-Dark-On-Surface-Text: var(--Scandic-Peach-10);
|
||||
--Primary-Dark-Surface-Hover: var(--Scandic-Red-90);
|
||||
--Primary-Dark-Surface-Normal: var(--Scandic-Red-100);
|
||||
--Primary-Dim-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Primary-Dim-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Primary-Dim-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Primary-Dim-Button-Primary-Fill-Disabled: var(--UI-Opacity-Almost-Black-10);
|
||||
--Primary-Dim-Button-Primary-Fill-Hover: var(--Scandic-Red-80);
|
||||
--Primary-Dim-Button-Primary-Fill-Normal: var(--Scandic-Red-100);
|
||||
--Primary-Dim-Button-Primary-On-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Primary-Dim-Button-Primary-On-Fill-Hover: var(--Scandic-Peach-30);
|
||||
--Primary-Dim-Button-Primary-On-Fill-Normal: var(--Scandic-Peach-10);
|
||||
--Primary-Dim-Button-Secondary-Border-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Primary-Dim-Button-Secondary-Border-Hover: var(--Scandic-Red-80);
|
||||
--Primary-Dim-Button-Secondary-Border-Normal: var(--Scandic-Red-100);
|
||||
--Primary-Dim-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
|
||||
--Primary-Dim-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
|
||||
--Primary-Dim-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
|
||||
--Primary-Dim-Button-Secondary-On-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Primary-Dim-Button-Secondary-On-Fill-Hover: var(--Scandic-Red-80);
|
||||
--Primary-Dim-Button-Secondary-On-Fill-Normal: var(--Scandic-Red-100);
|
||||
--Primary-Dim-On-Surface-Accent: var(--Scandic-Peach-80);
|
||||
--Primary-Dim-On-Surface-Divider: var(--Scandic-Peach-40);
|
||||
--Primary-Dim-On-Surface-Text: var(--Scandic-Red-100);
|
||||
--Primary-Dim-Surface-Hover: var(--Scandic-Peach-40);
|
||||
--Primary-Dim-Surface-Normal: var(--Scandic-Peach-30);
|
||||
--Primary-Light-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Primary-Light-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Primary-Light-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Primary-Light-Button-Primary-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-10
|
||||
);
|
||||
--Primary-Light-Button-Primary-Fill-Hover: var(--Scandic-Red-80);
|
||||
--Primary-Light-Button-Primary-Fill-Normal: var(--Scandic-Red-100);
|
||||
--Primary-Light-Button-Primary-On-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Primary-Light-Button-Primary-On-Fill-Hover: var(--Scandic-Peach-30);
|
||||
--Primary-Light-Button-Primary-On-Fill-Normal: var(--Scandic-Peach-10);
|
||||
--Primary-Light-Button-Secondary-Border-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Primary-Light-Button-Secondary-Border-Hover: var(--Scandic-Red-80);
|
||||
--Primary-Light-Button-Secondary-Border-Normal: var(--Scandic-Red-100);
|
||||
--Primary-Light-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
|
||||
--Primary-Light-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
|
||||
--Primary-Light-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
|
||||
--Primary-Light-Button-Secondary-On-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Primary-Light-Button-Secondary-On-Fill-Hover: var(--Scandic-Red-80);
|
||||
--Primary-Light-Button-Secondary-On-Fill-Normal: var(--Scandic-Red-100);
|
||||
--Primary-Light-On-Surface-Accent: var(--Scandic-Red-60);
|
||||
--Primary-Light-On-Surface-Divider: var(--Scandic-Peach-30);
|
||||
--Primary-Light-On-Surface-Divider-subtle: var(--Scandic-Beige-10);
|
||||
--Primary-Light-On-Surface-Text: var(--Scandic-Red-100);
|
||||
--Primary-Light-Surface-Hover: var(--Scandic-Peach-20);
|
||||
--Primary-Light-Surface-Normal: var(--Scandic-Peach-10);
|
||||
--Primary-Strong-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Primary-Strong-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Primary-Strong-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Primary-Strong-Button-Primary-Fill-Disabled: var(--UI-Opacity-White-20);
|
||||
--Primary-Strong-Button-Primary-Fill-Hover: var(--Scandic-Red-00);
|
||||
--Primary-Strong-Button-Primary-Fill-Normal: var(--UI-Opacity-White-100);
|
||||
--Primary-Strong-Button-Primary-On-Fill-Disabled: var(--UI-Opacity-White-20);
|
||||
--Primary-Strong-Button-Primary-On-Fill-Hover: var(--Scandic-Red-70);
|
||||
--Primary-Strong-Button-Primary-On-Fill-Normal: var(--Scandic-Red-70);
|
||||
--Primary-Strong-Button-Secondary-Border-Disabled: var(--UI-Opacity-White-20);
|
||||
--Primary-Strong-Button-Secondary-Border-Hover: var(--Scandic-Peach-00);
|
||||
--Primary-Strong-Button-Secondary-Border-Normal: var(--UI-Opacity-White-100);
|
||||
--Primary-Strong-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
|
||||
--Primary-Strong-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
|
||||
--Primary-Strong-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
|
||||
--Primary-Strong-Button-Secondary-On-Fill-Disabled: var(
|
||||
--UI-Opacity-White-20
|
||||
);
|
||||
--Primary-Strong-Button-Secondary-On-Fill-Hover: var(--Scandic-Red-00);
|
||||
--Primary-Strong-Button-Secondary-On-Fill-Normal: var(--UI-Opacity-White-100);
|
||||
--Primary-Strong-On-Surface-Accent: var(--Scandic-Peach-10);
|
||||
--Primary-Strong-On-Surface-Divider: var(--Scandic-Red-70);
|
||||
--Primary-Strong-On-Surface-Text: var(--UI-Opacity-White-100);
|
||||
--Primary-Strong-Surface-Hover: var(--Scandic-Red-70);
|
||||
--Primary-Strong-Surface-Normal: var(--Scandic-Red-60);
|
||||
--Secondary-Dark-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Secondary-Dark-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Secondary-Dark-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Secondary-Dark-Button-Primary-Fill-Disabled: var(--UI-Opacity-White-10);
|
||||
--Secondary-Dark-Button-Primary-Fill-Hover: var(--Scandic-Green-30);
|
||||
--Secondary-Dark-Button-Primary-Fill-Normal: var(--Scandic-Green-20);
|
||||
--Secondary-Dark-Button-Primary-On-Fill-Disabled: var(--UI-Opacity-White-20);
|
||||
--Secondary-Dark-Button-Primary-On-Fill-Hover: var(--Scandic-Green-80);
|
||||
--Secondary-Dark-Button-Primary-On-Fill-Normal: var(--Scandic-Green-90);
|
||||
--Secondary-Dark-Button-Secondary-Border-Disabled: var(--UI-Opacity-White-20);
|
||||
--Secondary-Dark-Button-Secondary-Border-Hover: var(--Scandic-Green-30);
|
||||
--Secondary-Dark-Button-Secondary-Border-Normal: var(--Scandic-Green-20);
|
||||
--Secondary-Dark-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
|
||||
--Secondary-Dark-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
|
||||
--Secondary-Dark-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
|
||||
--Secondary-Dark-Button-Secondary-On-Fill-Disabled: var(
|
||||
--UI-Opacity-White-20
|
||||
);
|
||||
--Secondary-Dark-Button-Secondary-On-Fill-Hover: var(--Scandic-Green-30);
|
||||
--Secondary-Dark-Button-Secondary-On-Fill-Normal: var(--Scandic-Green-20);
|
||||
--Secondary-Dark-On-Surface-Accent: var(--Scandic-Green-40);
|
||||
--Secondary-Dark-On-Surface-Divider: var(--Scandic-Green-80);
|
||||
--Secondary-Dark-On-Surface-Text: var(--Scandic-Green-20);
|
||||
--Secondary-Dark-Surface-Hover: var(--Scandic-Green-80);
|
||||
--Secondary-Dark-Surface-Normal: var(--Scandic-Green-90);
|
||||
--Secondary-Light-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Secondary-Light-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Secondary-Light-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Secondary-Light-Button-Primary-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-10
|
||||
);
|
||||
--Secondary-Light-Button-Primary-Fill-Hover: var(--Scandic-Green-80);
|
||||
--Secondary-Light-Button-Primary-Fill-Normal: var(--Scandic-Green-90);
|
||||
--Secondary-Light-Button-Primary-On-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Secondary-Light-Button-Primary-On-Fill-Hover: var(--Scandic-Green-30);
|
||||
--Secondary-Light-Button-Primary-On-Fill-Normal: var(--Scandic-Green-20);
|
||||
--Secondary-Light-Button-Secondary-Border-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Secondary-Light-Button-Secondary-Border-Hover: var(--Scandic-Green-80);
|
||||
--Secondary-Light-Button-Secondary-Border-Normal: var(--Scandic-Green-90);
|
||||
--Secondary-Light-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
|
||||
--Secondary-Light-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
|
||||
--Secondary-Light-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
|
||||
--Secondary-Light-Button-Secondary-On-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Secondary-Light-Button-Secondary-On-Fill-Hover: var(--Scandic-Green-80);
|
||||
--Secondary-Light-Button-Secondary-On-Fill-Normal: var(--Scandic-Green-90);
|
||||
--Secondary-Light-On-Surface-Accent: var(--Scandic-Green-50);
|
||||
--Secondary-Light-On-Surface-Divider: var(--Scandic-Green-30);
|
||||
--Secondary-Light-On-Surface-Text: var(--Scandic-Green-90);
|
||||
--Secondary-Light-Surface-Hover: var(--Scandic-Green-20);
|
||||
--Secondary-Light-Surface-Normal: var(--Scandic-Green-20);
|
||||
--Tertiary-Dark-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
|
||||
--Tertiary-Dark-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
|
||||
--Tertiary-Dark-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
|
||||
--Tertiary-Dark-Button-Primary-Fill-Disabled: var(--UI-Opacity-White-10);
|
||||
--Tertiary-Dark-Button-Primary-Fill-Hover: var(--Scandic-Yellow-20);
|
||||
--Tertiary-Dark-Button-Primary-Fill-Normal: var(--Scandic-Yellow-10);
|
||||
--Tertiary-Dark-Button-Primary-On-Fill-Disabled: var(--UI-Opacity-White-20);
|
||||
--Tertiary-Dark-Button-Primary-On-Fill-Hover: var(--Scandic-Blue-80);
|
||||
--Tertiary-Dark-Button-Primary-On-Fill-Normal: var(--Scandic-Blue-100);
|
||||
--Tertiary-Dark-Button-Secondary-Border-Disabled: var(--UI-Opacity-White-20);
|
||||
--Tertiary-Dark-Button-Secondary-Border-Hover: var(--Scandic-Yellow-20);
|
||||
--Tertiary-Dark-Button-Secondary-Border-Normal: var(--Scandic-Yellow-10);
|
||||
--Tertiary-Dark-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
|
||||
--Tertiary-Dark-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
|
||||
--Tertiary-Dark-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
|
||||
--Tertiary-Dark-Button-Secondary-On-Fill-Disabled: var(--UI-Opacity-White-20);
|
||||
--Tertiary-Dark-Button-Secondary-On-Fill-Hover: var(--Scandic-Yellow-20);
|
||||
--Tertiary-Dark-Button-Secondary-On-Fill-Normal: var(--Scandic-Yellow-10);
|
||||
--Tertiary-Dark-On-Surface-Accent: var(--Scandic-Blue-40);
|
||||
--Tertiary-Dark-On-Surface-Divider: var(--Scandic-Blue-80);
|
||||
--Tertiary-Dark-On-Surface-Text: var(--Scandic-Yellow-10);
|
||||
--Tertiary-Dark-Surface-Hover: var(--Scandic-Blue-90);
|
||||
--Tertiary-Dark-Surface-Normal: var(--Scandic-Blue-100);
|
||||
--Tertiary-Light-Button-Primary-Border-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Tertiary-Light-Button-Primary-Border-Hover: var(--Scandic-Yellow-00);
|
||||
--Tertiary-Light-Button-Primary-Border-Normal: var(--Scandic-Yellow-10);
|
||||
--Tertiary-Light-Button-Primary-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-10
|
||||
);
|
||||
--Tertiary-Light-Button-Primary-Fill-Hover: var(--Scandic-Blue-90);
|
||||
--Tertiary-Light-Button-Primary-Fill-Normal: var(--Scandic-Blue-100);
|
||||
--Tertiary-Light-Button-Primary-On-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Tertiary-Light-Button-Primary-On-Fill-Hover: var(--Scandic-Yellow-00);
|
||||
--Tertiary-Light-Button-Primary-On-Fill-Normal: var(--Scandic-Yellow-10);
|
||||
--Tertiary-Light-Button-Secondary-Border-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Tertiary-Light-Button-Secondary-Border-Hover: var(--Scandic-Blue-90);
|
||||
--Tertiary-Light-Button-Secondary-Border-Normal: var(--Scandic-Blue-100);
|
||||
--Tertiary-Light-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
|
||||
--Tertiary-Light-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
|
||||
--Tertiary-Light-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
|
||||
--Tertiary-Light-Button-Secondary-On-Fill-Disabled: var(
|
||||
--UI-Opacity-Almost-Black-20
|
||||
);
|
||||
--Tertiary-Light-Button-Secondary-On-Fill-Hover: var(--Scandic-Blue-90);
|
||||
--Tertiary-Light-Button-Secondary-On-Fill-Normal: var(--Scandic-Blue-100);
|
||||
--Tertiary-Light-On-Surface-Accent: var(--Scandic-Yellow-50);
|
||||
--Tertiary-Light-On-Surface-Divider: var(--Scandic-Yellow-20);
|
||||
--Tertiary-Light-On-Surface-Text: var(--Scandic-Blue-100);
|
||||
--Tertiary-Light-Surface-Hover: var(--Scandic-Yellow-00);
|
||||
--Tertiary-Light-Surface-Normal: var(--Scandic-Yellow-10);
|
||||
--UI-Input-Controls-Border-Disabled: var(--UI-Grey-40);
|
||||
--UI-Input-Controls-Border-Error: var(--Scandic-Red-70);
|
||||
--UI-Input-Controls-Border-Focus: var(--Scandic-Blue-80);
|
||||
--UI-Input-Controls-Border-Hover: var(--Scandic-Beige-70);
|
||||
--UI-Input-Controls-Border-KeyboardFocus: var(--Scandic-Blue-50);
|
||||
--UI-Input-Controls-Border-Normal: var(--Scandic-Beige-50);
|
||||
--UI-Input-Controls-Fill-Disabled: var(--UI-Grey-60);
|
||||
--UI-Input-Controls-Fill-Normal: var(--UI-Opacity-White-100);
|
||||
--UI-Input-Controls-Fill-Selected: var(--Scandic-Blue-80);
|
||||
--UI-Input-Controls-Fill-Selected-hover: var(--Scandic-Blue-70);
|
||||
--UI-Input-Controls-On-Fill-Normal: var(--UI-Opacity-White-100);
|
||||
--UI-Input-Controls-Surface-Disabled: var(--UI-Grey-10);
|
||||
--UI-Input-Controls-Surface-Hover: var(--Scandic-Beige-10);
|
||||
--UI-Input-Controls-Surface-Normal: var(--UI-Opacity-White-100);
|
||||
--UI-Semantic-Error: var(--Scandic-Red-70);
|
||||
--UI-Semantic-Information: var(--Scandic-Blue-70);
|
||||
--UI-Semantic-Success: var(--Scandic-Green-60);
|
||||
--UI-Semantic-Warning: var(--Scandic-Yellow-60);
|
||||
--UI-Text-Active: var(--Scandic-Blue-90);
|
||||
--UI-Text-Error: var(--Scandic-Red-70);
|
||||
--UI-Text-High-contrast: var(--UI-Grey-100);
|
||||
--UI-Text-Medium-contrast: var(--UI-Grey-80);
|
||||
--UI-Text-Placeholder: var(--UI-Grey-60);
|
||||
}
|
||||
217
packages/design-system/lib/styles/typography.css
Normal file
217
packages/design-system/lib/styles/typography.css
Normal file
@@ -0,0 +1,217 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
:root {
|
||||
--typography-Body-Bold-Desktop-fontSize: 16px;
|
||||
--typography-Body-Bold-fontFamily: 'fira sans';
|
||||
--typography-Body-Bold-fontSize: 16px;
|
||||
--typography-Body-Bold-fontWeight: 'medium';
|
||||
--typography-Body-Bold-letterSpacing: 1.2000000476837158%;
|
||||
--typography-Body-Bold-lineHeight: 150%;
|
||||
--typography-Body-Bold-Mobile-fontSize: 16px;
|
||||
--typography-Body-Bold-Tablet-estimate-fontSize: 16px;
|
||||
--typography-Body-Bold-textCase: 'original';
|
||||
--typography-Body-Bold-textDecoration: 'none';
|
||||
--typography-Body-Inline-Desktop-fontSize: 16px;
|
||||
--typography-Body-Inline-fontFamily: 'fira sans';
|
||||
--typography-Body-Inline-fontSize: 16px;
|
||||
--typography-Body-Inline-fontWeight: 'regular';
|
||||
--typography-Body-Inline-letterSpacing: 1.2000000476837158%;
|
||||
--typography-Body-Inline-lineHeight: 150%;
|
||||
--typography-Body-Inline-Mobile-fontSize: 16px;
|
||||
--typography-Body-Inline-Tablet-estimate-fontSize: 16px;
|
||||
--typography-Body-Inline-textCase: 'original';
|
||||
--typography-Body-Inline-textDecoration: 'underline';
|
||||
--typography-Body-Link-Desktop-fontSize: 16px;
|
||||
--typography-Body-Link-Mobile-fontSize: 16px;
|
||||
--typography-Body-Link-Tablet-estimate-fontSize: 16px;
|
||||
--typography-Body-Regular-Desktop-fontSize: 16px;
|
||||
--typography-Body-Regular-fontFamily: 'fira sans';
|
||||
--typography-Body-Regular-fontSize: 16px;
|
||||
--typography-Body-Regular-fontWeight: 'regular';
|
||||
--typography-Body-Regular-letterSpacing: 1.2000000476837158%;
|
||||
--typography-Body-Regular-lineHeight: 150%;
|
||||
--typography-Body-Regular-Mobile-fontSize: 16px;
|
||||
--typography-Body-Regular-Tablet-estimate-fontSize: 16px;
|
||||
--typography-Body-Regular-textCase: 'original';
|
||||
--typography-Body-Regular-textDecoration: 'none';
|
||||
--typography-Body-Underline-fontFamily: 'fira sans';
|
||||
--typography-Body-Underline-fontSize: 16px;
|
||||
--typography-Body-Underline-fontWeight: 'medium';
|
||||
--typography-Body-Underline-letterSpacing: 1.2000000476837158%;
|
||||
--typography-Body-Underline-lineHeight: 150%;
|
||||
--typography-Body-Underline-textCase: 'original';
|
||||
--typography-Body-Underline-textDecoration: 'underline';
|
||||
--typography-Caption-Bold-Desktop-fontSize: 14px;
|
||||
--typography-Caption-Bold-fontFamily: 'fira sans';
|
||||
--typography-Caption-Bold-fontSize: 14px;
|
||||
--typography-Caption-Bold-fontWeight: 'medium';
|
||||
--typography-Caption-Bold-letterSpacing: 1.399999976158142%;
|
||||
--typography-Caption-Bold-lineHeight: 139.9999976158142%;
|
||||
--typography-Caption-Bold-Mobile-fontSize: 14px;
|
||||
--typography-Caption-Bold-Tablet-estimate-fontSize: 14px;
|
||||
--typography-Caption-Bold-textCase: 'original';
|
||||
--typography-Caption-Bold-textDecoration: 'none';
|
||||
--typography-Caption-Inline-Desktop-fontSize: 14px;
|
||||
--typography-Caption-Inline-fontFamily: 'fira sans';
|
||||
--typography-Caption-Inline-fontSize: 14px;
|
||||
--typography-Caption-Inline-fontWeight: 'regular';
|
||||
--typography-Caption-Inline-letterSpacing: 1.399999976158142%;
|
||||
--typography-Caption-Inline-lineHeight: 139.9999976158142%;
|
||||
--typography-Caption-Inline-Mobile-fontSize: 14px;
|
||||
--typography-Caption-Inline-Tablet-estimate-fontSize: 14px;
|
||||
--typography-Caption-Inline-textCase: 'original';
|
||||
--typography-Caption-Inline-textDecoration: 'underline';
|
||||
--typography-Caption-Labels-fontFamily: 'brandon text';
|
||||
--typography-Caption-Labels-fontSize: 14px;
|
||||
--typography-Caption-Labels-fontWeight: 'bold';
|
||||
--typography-Caption-Labels-letterSpacing: 1.399999976158142%;
|
||||
--typography-Caption-Labels-lineHeight: 150%;
|
||||
--typography-Caption-Labels-textCase: 'upper';
|
||||
--typography-Caption-Labels-textDecoration: 'none';
|
||||
--typography-Caption-Link-Desktop-fontSize: 14px;
|
||||
--typography-Caption-Link-Mobile-fontSize: 14px;
|
||||
--typography-Caption-Link-Tablet-estimate-fontSize: 14px;
|
||||
--typography-Caption-Regular-Desktop-fontSize: 14px;
|
||||
--typography-Caption-Regular-fontFamily: 'fira sans';
|
||||
--typography-Caption-Regular-fontSize: 14px;
|
||||
--typography-Caption-Regular-fontWeight: 'regular';
|
||||
--typography-Caption-Regular-letterSpacing: 1.399999976158142%;
|
||||
--typography-Caption-Regular-lineHeight: 139.9999976158142%;
|
||||
--typography-Caption-Regular-Mobile-fontSize: 14px;
|
||||
--typography-Caption-Regular-Tablet-estimate-fontSize: 14px;
|
||||
--typography-Caption-Regular-textCase: 'original';
|
||||
--typography-Caption-Regular-textDecoration: 'none';
|
||||
--typography-Caption-Underline-fontFamily: 'fira sans';
|
||||
--typography-Caption-Underline-fontSize: 14px;
|
||||
--typography-Caption-Underline-fontWeight: 'medium';
|
||||
--typography-Caption-Underline-letterSpacing: 1.399999976158142%;
|
||||
--typography-Caption-Underline-lineHeight: 139.9999976158142%;
|
||||
--typography-Caption-Underline-textCase: 'original';
|
||||
--typography-Caption-Underline-textDecoration: 'underline';
|
||||
--typography-Foot-note-Bold-Desktop-fontSize: 12px;
|
||||
--typography-Foot-note-Bold-Mobile-fontSize: 12px;
|
||||
--typography-Foot-note-Bold-Tablet-estimate-fontSize: 12px;
|
||||
--typography-Foot-note-Regular-Desktop-fontSize: 12px;
|
||||
--typography-Foot-note-Regular-Mobile-fontSize: 12px;
|
||||
--typography-Foot-note-Regular-Tablet-estimate-fontSize: 12px;
|
||||
--typography-Footnote-Bold-fontFamily: 'fira sans';
|
||||
--typography-Footnote-Bold-fontSize: 12px;
|
||||
--typography-Footnote-Bold-fontWeight: 'medium';
|
||||
--typography-Footnote-Bold-letterSpacing: 1.399999976158142%;
|
||||
--typography-Footnote-Bold-lineHeight: 150%;
|
||||
--typography-Footnote-Bold-textCase: 'original';
|
||||
--typography-Footnote-Bold-textDecoration: 'none';
|
||||
--typography-Footnote-Labels-fontFamily: 'brandon text';
|
||||
--typography-Footnote-Labels-fontSize: 12px;
|
||||
--typography-Footnote-Labels-fontWeight: 'bold';
|
||||
--typography-Footnote-Labels-letterSpacing: 1.399999976158142%;
|
||||
--typography-Footnote-Labels-lineHeight: 150%;
|
||||
--typography-Footnote-Labels-textCase: 'upper';
|
||||
--typography-Footnote-Labels-textDecoration: 'none';
|
||||
--typography-Footnote-Regular-fontFamily: 'fira sans';
|
||||
--typography-Footnote-Regular-fontSize: 12px;
|
||||
--typography-Footnote-Regular-fontWeight: 'regular';
|
||||
--typography-Footnote-Regular-letterSpacing: 1.399999976158142%;
|
||||
--typography-Footnote-Regular-lineHeight: 150%;
|
||||
--typography-Footnote-Regular-textCase: 'original';
|
||||
--typography-Footnote-Regular-textDecoration: 'none';
|
||||
--typography-Preamble-Desktop-fontSize: 20px;
|
||||
--typography-Preamble-fontFamily: 'fira sans';
|
||||
--typography-Preamble-fontSize: 20px;
|
||||
--typography-Preamble-fontWeight: 'regular';
|
||||
--typography-Preamble-letterSpacing: 1%;
|
||||
--typography-Preamble-lineHeight: 139.9999976158142%;
|
||||
--typography-Preamble-Mobile-fontSize: 18px;
|
||||
--typography-Preamble-Tablet-estimate-fontSize: 19px;
|
||||
--typography-Preamble-textCase: 'original';
|
||||
--typography-Preamble-textDecoration: 'none';
|
||||
--typography-Script-1-Desktop-fontSize: 32px;
|
||||
--typography-Script-1-fontFamily: 'biro script plus';
|
||||
--typography-Script-1-fontSize: 32px;
|
||||
--typography-Script-1-fontWeight: 'regular';
|
||||
--typography-Script-1-letterSpacing: 2%;
|
||||
--typography-Script-1-lineHeight: 110.00000238418579%;
|
||||
--typography-Script-1-Mobile-fontSize: 24px;
|
||||
--typography-Script-1-Tablet-estimate-fontSize: 29px;
|
||||
--typography-Script-1-textCase: 'original';
|
||||
--typography-Script-1-textDecoration: 'none';
|
||||
--typography-Script-2-Desktop-fontSize: 24px;
|
||||
--typography-Script-2-fontFamily: 'biro script plus';
|
||||
--typography-Script-2-fontSize: 24px;
|
||||
--typography-Script-2-fontWeight: 'regular';
|
||||
--typography-Script-2-letterSpacing: 2%;
|
||||
--typography-Script-2-lineHeight: 110.00000238418579%;
|
||||
--typography-Script-2-Mobile-fontSize: 20px;
|
||||
--typography-Script-2-Tablet-estimate-fontSize: 22px;
|
||||
--typography-Script-2-textCase: 'original';
|
||||
--typography-Script-2-textDecoration: 'none';
|
||||
--typography-Subtitle-1-Desktop-fontSize: 24px;
|
||||
--typography-Subtitle-1-fontFamily: 'fira sans';
|
||||
--typography-Subtitle-1-fontSize: 24px;
|
||||
--typography-Subtitle-1-fontWeight: 'medium';
|
||||
--typography-Subtitle-1-letterSpacing: 1%;
|
||||
--typography-Subtitle-1-lineHeight: 120.00000476837158%;
|
||||
--typography-Subtitle-1-Mobile-fontSize: 20px;
|
||||
--typography-Subtitle-1-Tablet-estimate-fontSize: 22px;
|
||||
--typography-Subtitle-1-textCase: 'original';
|
||||
--typography-Subtitle-1-textDecoration: 'none';
|
||||
--typography-Subtitle-2-Desktop-fontSize: 20px;
|
||||
--typography-Subtitle-2-fontFamily: 'fira sans';
|
||||
--typography-Subtitle-2-fontSize: 20px;
|
||||
--typography-Subtitle-2-fontWeight: 'medium';
|
||||
--typography-Subtitle-2-letterSpacing: 1%;
|
||||
--typography-Subtitle-2-lineHeight: 120.00000476837158%;
|
||||
--typography-Subtitle-2-Mobile-fontSize: 18px;
|
||||
--typography-Subtitle-2-Tablet-estimate-fontSize: 19px;
|
||||
--typography-Subtitle-2-textCase: 'original';
|
||||
--typography-Subtitle-2-textDecoration: 'none';
|
||||
--typography-Title-1-Desktop-fontSize: 64px;
|
||||
--typography-Title-1-fontFamily: 'brandon text';
|
||||
--typography-Title-1-fontSize: 64px;
|
||||
--typography-Title-1-fontWeight: 'black';
|
||||
--typography-Title-1-letterSpacing: 0.25%;
|
||||
--typography-Title-1-lineHeight: 110.00000238418579%;
|
||||
--typography-Title-1-Mobile-fontSize: 48px;
|
||||
--typography-Title-1-Tablet-estimate-fontSize: 60px;
|
||||
--typography-Title-1-textCase: 'upper';
|
||||
--typography-Title-1-textDecoration: 'none';
|
||||
--typography-Title-2-Desktop-fontSize: 48px;
|
||||
--typography-Title-2-fontFamily: 'brandon text';
|
||||
--typography-Title-2-fontSize: 48px;
|
||||
--typography-Title-2-fontWeight: 'black';
|
||||
--typography-Title-2-letterSpacing: 0.25%;
|
||||
--typography-Title-2-lineHeight: 110.00000238418579%;
|
||||
--typography-Title-2-Mobile-fontSize: 36px;
|
||||
--typography-Title-2-Tablet-estimate-fontSize: 44px;
|
||||
--typography-Title-2-textCase: 'upper';
|
||||
--typography-Title-2-textDecoration: 'none';
|
||||
--typography-Title-3-Desktop-fontSize: 36px;
|
||||
--typography-Title-3-fontFamily: 'brandon text';
|
||||
--typography-Title-3-fontSize: 36px;
|
||||
--typography-Title-3-fontWeight: 'black';
|
||||
--typography-Title-3-letterSpacing: 0.25%;
|
||||
--typography-Title-3-lineHeight: 110.00000238418579%;
|
||||
--typography-Title-3-Mobile-fontSize: 30px;
|
||||
--typography-Title-3-Tablet-estimate-fontSize: 34px;
|
||||
--typography-Title-3-textCase: 'upper';
|
||||
--typography-Title-3-textDecoration: 'none';
|
||||
--typography-Title-4-Desktop-fontSize: 28px;
|
||||
--typography-Title-4-fontFamily: 'brandon text';
|
||||
--typography-Title-4-fontSize: 28px;
|
||||
--typography-Title-4-fontWeight: 'bold';
|
||||
--typography-Title-4-letterSpacing: 0.25%;
|
||||
--typography-Title-4-lineHeight: 110.00000238418579%;
|
||||
--typography-Title-4-Mobile-fontSize: 24px;
|
||||
--typography-Title-4-Tablet-estimate-fontSize: 26px;
|
||||
--typography-Title-4-textCase: 'original';
|
||||
--typography-Title-4-textDecoration: 'none';
|
||||
--typography-Title-5-Desktop-fontSize: 24px;
|
||||
--typography-Title-5-fontFamily: 'brandon text';
|
||||
--typography-Title-5-fontSize: 24px;
|
||||
--typography-Title-5-fontWeight: 'black';
|
||||
--typography-Title-5-letterSpacing: 0.25%;
|
||||
--typography-Title-5-lineHeight: 110.00000238418579%;
|
||||
--typography-Title-5-Mobile-fontSize: 20px;
|
||||
--typography-Title-5-Tablet-estimate-fontSize: 21px;
|
||||
--typography-Title-5-textCase: 'upper';
|
||||
--typography-Title-5-textDecoration: 'none';
|
||||
}
|
||||
32
packages/design-system/lib/types/index.ts
Normal file
32
packages/design-system/lib/types/index.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { VariantProps } from 'class-variance-authority'
|
||||
|
||||
// This will exclude null as values for the given keys
|
||||
export type NoNullVariant<Variant, Keys extends keyof Variant> = Omit<
|
||||
Variant,
|
||||
Keys
|
||||
> & {
|
||||
[Property in Keys]: Exclude<Variant[Property], null>
|
||||
}
|
||||
|
||||
// This is NoNullVariant but also requiring given keys in the variant
|
||||
// It will exclude null and require the given keys
|
||||
export type RequireVariant<Variant, Keys extends keyof Variant> = Omit<
|
||||
Variant,
|
||||
Keys
|
||||
> &
|
||||
Required<{
|
||||
[Property in Keys]: Exclude<Variant[Property], null>
|
||||
}>
|
||||
|
||||
export type ComponentProps<
|
||||
BaseProps,
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
Variants extends (...args: any) => any,
|
||||
RequiredKeys extends keyof VariantProps<Variants> = never,
|
||||
NoNullKeys extends Exclude<
|
||||
keyof VariantProps<Variants>,
|
||||
RequiredKeys
|
||||
> = never,
|
||||
> = BaseProps &
|
||||
RequireVariant<VariantProps<Variants>, RequiredKeys> &
|
||||
NoNullVariant<VariantProps<Variants>, NoNullKeys>
|
||||
61
packages/design-system/lib/utils.test.ts
Normal file
61
packages/design-system/lib/utils.test.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
import { describe, test, expect } from 'vitest'
|
||||
|
||||
import { capitalizeFirstLetter, sortObjectByKey } from './utils'
|
||||
|
||||
describe('sortObjectByKey', () => {
|
||||
test('sorts object keys alphabetically', () => {
|
||||
const obj = { b: 2, a: 1, c: 3 }
|
||||
const sortedObj = sortObjectByKey(obj)
|
||||
expect(sortedObj).toEqual({ a: 1, b: 2, c: 3 })
|
||||
})
|
||||
|
||||
test('handles empty object', () => {
|
||||
const obj = {}
|
||||
const sortedObj = sortObjectByKey(obj)
|
||||
expect(sortedObj).toEqual({})
|
||||
})
|
||||
|
||||
test('keeps object keys in original order if already sorted', () => {
|
||||
const obj = { a: 1, b: 2, c: 3 }
|
||||
const sortedObj = sortObjectByKey(obj)
|
||||
expect(sortedObj).toEqual({ a: 1, b: 2, c: 3 })
|
||||
})
|
||||
|
||||
test('sorts object keys in reverse alphabetical order', () => {
|
||||
const obj = { z: 1, b: 2, a: 3 }
|
||||
const sortedObj = sortObjectByKey(obj)
|
||||
expect(sortedObj).toEqual({ a: 3, b: 2, z: 1 })
|
||||
})
|
||||
|
||||
test('sorts object keys in natural order', () => {
|
||||
const sortedObj1 = sortObjectByKey({
|
||||
'ScandicRed-100': 1,
|
||||
'ScandicRed-20': 1,
|
||||
'ScandicRed-40': 1,
|
||||
'ScandicRed-10': 1,
|
||||
'Grey-80': 1,
|
||||
})
|
||||
|
||||
expect(Object.keys(sortedObj1)).toEqual([
|
||||
'Grey-80',
|
||||
'ScandicRed-10',
|
||||
'ScandicRed-20',
|
||||
'ScandicRed-40',
|
||||
'ScandicRed-100',
|
||||
])
|
||||
})
|
||||
})
|
||||
|
||||
describe('capitalizeFirstLetter function', () => {
|
||||
test('capitalizes the first letter of a string', () => {
|
||||
expect(capitalizeFirstLetter('hello')).toBe('Hello')
|
||||
})
|
||||
|
||||
test('does not change an empty string', () => {
|
||||
expect(capitalizeFirstLetter('')).toBe('')
|
||||
})
|
||||
|
||||
test('does not change a string already starting with an uppercase letter', () => {
|
||||
expect(capitalizeFirstLetter('World')).toBe('World')
|
||||
})
|
||||
})
|
||||
19
packages/design-system/lib/utils.ts
Normal file
19
packages/design-system/lib/utils.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { orderBy } from 'natural-orderby'
|
||||
|
||||
export function sortObjectByKey<T = unknown>(
|
||||
obj: Record<string, T>,
|
||||
): Record<string, T> {
|
||||
const sortedKeys = orderBy(Object.keys(obj))
|
||||
|
||||
const sortedObj: Record<string, T> = {}
|
||||
|
||||
sortedKeys.forEach((key) => {
|
||||
sortedObj[key] = obj[key]
|
||||
})
|
||||
|
||||
return sortedObj
|
||||
}
|
||||
|
||||
export function capitalizeFirstLetter(str: string): string {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1)
|
||||
}
|
||||
5271
packages/design-system/lib/variables.json
Normal file
5271
packages/design-system/lib/variables.json
Normal file
File diff suppressed because it is too large
Load Diff
2
packages/design-system/lib/vite-env.d.ts
vendored
Normal file
2
packages/design-system/lib/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
/// <reference types="vite/client" />
|
||||
/// <reference types="vitest" />
|
||||
6
packages/design-system/lint-staged.config.js
Normal file
6
packages/design-system/lint-staged.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
const config = {
|
||||
'*.{ts,tsx}': () => 'tsc -p tsconfig.json --noEmit',
|
||||
'*': 'prettier --write',
|
||||
}
|
||||
|
||||
export default config
|
||||
82
packages/design-system/package.json
Normal file
82
packages/design-system/package.json
Normal file
@@ -0,0 +1,82 @@
|
||||
{
|
||||
"name": "@scandic-hotels/design-system",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"main": "dist/new.js",
|
||||
"packageManager": "yarn@4.0.0",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./dist/new.js",
|
||||
"types": "./dist/new.d.ts"
|
||||
},
|
||||
"./current": {
|
||||
"import": "./dist/current.js",
|
||||
"types": "./dist/current.d.ts"
|
||||
},
|
||||
"./style.css": "./dist/assets/style-new.css",
|
||||
"./current/style.css": "./dist/assets/style-current.css"
|
||||
},
|
||||
"types": "dist/new.d.ts",
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"sideEffects": [
|
||||
"**/*.css"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"generate": "cd lib && jiti generate.ts",
|
||||
"prebuild": "patch-package && yarn generate",
|
||||
"build": "tsc --p ./tsconfig-build.json && vite build",
|
||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"prestorybook": "yarn generate",
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"build-storybook": "storybook build",
|
||||
"test": "vitest",
|
||||
"prepublishOnly": "yarn build",
|
||||
"prepare": "yarn build"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-aria-components": "^1.0.1",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@laynezh/vite-plugin-lib-assets": "^0.5.18",
|
||||
"@storybook/addon-essentials": "^8.0.0-beta.0",
|
||||
"@storybook/addon-interactions": "^8.0.0-beta.0",
|
||||
"@storybook/addon-links": "^8.0.0-beta.0",
|
||||
"@storybook/addon-onboarding": "^1.0.11",
|
||||
"@storybook/blocks": "^8.0.0-beta.0",
|
||||
"@storybook/react": "^8.0.0-beta.0",
|
||||
"@storybook/react-vite": "^8.0.0-beta.0",
|
||||
"@storybook/test": "^8.0.0-beta.0",
|
||||
"@types/react": "^18.2.43",
|
||||
"@types/react-dom": "^18.2.17",
|
||||
"@typescript-eslint/eslint-plugin": "^6.14.0",
|
||||
"@typescript-eslint/parser": "^6.14.0",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"eslint": "^8.55.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.5",
|
||||
"eslint-plugin-storybook": "^0.6.15",
|
||||
"glob": "^10.3.10",
|
||||
"jiti": "^1.21.0",
|
||||
"lint-staged": "^15.2.2",
|
||||
"magic-string": "^0.30.7",
|
||||
"natural-orderby": "^3.0.2",
|
||||
"patch-package": "^8.0.0",
|
||||
"prettier": "^3.2.5",
|
||||
"react": "^18.2.0",
|
||||
"react-aria-components": "^1.0.1",
|
||||
"react-dom": "^18.2.0",
|
||||
"storybook": "^8.0.0-beta.0",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.0.8",
|
||||
"vite-plugin-dts": "^3.7.2",
|
||||
"vite-plugin-lib-inject-css": "^1.3.0",
|
||||
"vitest": "^1.2.2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
diff --git a/node_modules/@laynezh/vite-plugin-lib-assets/dist/index.js b/node_modules/@laynezh/vite-plugin-lib-assets/dist/index.js
|
||||
index 0031cbd..af098d2 100644
|
||||
--- a/node_modules/@laynezh/vite-plugin-lib-assets/dist/index.js
|
||||
+++ b/node_modules/@laynezh/vite-plugin-lib-assets/dist/index.js
|
||||
@@ -503,7 +503,7 @@ function VitePluginLibAssets(options = {}) {
|
||||
const id = path2.resolve(importerDir, source);
|
||||
if (cssLangFilter(id)) {
|
||||
const assetsFromCss = await extractFromFile(this, id);
|
||||
- const validAssets = assetsFromCss.filter((id2) => filter(id2)).map((id2) => ({ id: id2, content: getAssetContent(id2) })).filter(({ content }) => limit && content ? content.byteLength > limit : true);
|
||||
+ const validAssets = assetsFromCss.map(aid => path.resolve(path2.dirname(id), aid)).filter((id2) => filter(id2)).map((id2) => ({ id: id2, content: getAssetContent(id2) })).filter(({ content }) => limit && content ? content.byteLength > limit : true);
|
||||
validAssets.forEach(({ id: id2, content }) => {
|
||||
let assetPath = emitFile(this, id2, content);
|
||||
const base64 = getFileBase64(id2, content);
|
||||
@@ -0,0 +1,106 @@
|
||||
import MagicString from 'magic-string'
|
||||
import { createFilter } from '@rollup/pluginutils'
|
||||
import type { Plugin, OutputAsset, RenderedChunk } from 'rollup'
|
||||
import type { Directive, ExpressionStatement } from 'estree'
|
||||
|
||||
type EnsureDirectivesOptions = {
|
||||
include?: string[]
|
||||
exclude?: string[]
|
||||
}
|
||||
|
||||
/**
|
||||
* This is a plugin that ensures directives like "use client" gets put back at the top of files after bundling.
|
||||
* In order for this plugin to work, every input file needs to be outputed in a separate output chunk. Otherwise,
|
||||
* the directive would not be scoped to the related file.
|
||||
* This can either be done by using the output.preserveModules or by using glob() as stated in Rollup documentation:
|
||||
* https://rollupjs.org/configuration-options/#input
|
||||
*
|
||||
* @param {Object} options - Plugin options
|
||||
* @param {string[]} options.include - Minimatch patterns to include in parsing
|
||||
* @param {string[]} options.exclude - Minimatch patterns to skip from parsing
|
||||
*
|
||||
*/
|
||||
|
||||
function isDirective(body: Directive | ExpressionStatement): body is Directive {
|
||||
return (body as Directive).directive !== undefined
|
||||
}
|
||||
|
||||
function isChunk(chunk: OutputAsset | RenderedChunk): chunk is RenderedChunk {
|
||||
return (chunk as RenderedChunk).modules !== undefined
|
||||
}
|
||||
|
||||
export default function ensureDirectives({
|
||||
include = [],
|
||||
exclude = [],
|
||||
}: EnsureDirectivesOptions = {}): Plugin {
|
||||
// Skip CSS files by default, as this.parse() does not work on them
|
||||
const excludePatterns = ['**/*.css', ...exclude]
|
||||
const includePatterns = include
|
||||
const filter = createFilter(includePatterns, excludePatterns)
|
||||
|
||||
return {
|
||||
name: 'ensure-directives',
|
||||
// Capture directives metadata during the transform phase
|
||||
transform(code, id) {
|
||||
// Skip files that are excluded or that are implicitly excluded by the include pattern
|
||||
if (!filter(id)) return
|
||||
|
||||
const ast = this.parse(code)
|
||||
|
||||
if (ast.type === 'Program' && ast.body) {
|
||||
const filteredBodies = ast.body.filter(Boolean)
|
||||
|
||||
const directives = filteredBodies.reduce<string[]>(
|
||||
(acc, filteredBody) => {
|
||||
if (
|
||||
filteredBody &&
|
||||
filteredBody.type === 'ExpressionStatement' &&
|
||||
isDirective(filteredBody)
|
||||
) {
|
||||
acc.push(filteredBody.directive)
|
||||
}
|
||||
return acc
|
||||
},
|
||||
[],
|
||||
)
|
||||
// Map is set to null since the sourceMap is left untouched
|
||||
if (directives.length) {
|
||||
return {
|
||||
code,
|
||||
ast,
|
||||
map: null,
|
||||
meta: { ensureDirectives: directives },
|
||||
}
|
||||
}
|
||||
}
|
||||
return { code, ast, map: null }
|
||||
},
|
||||
renderChunk: {
|
||||
order: 'post',
|
||||
handler(code, chunk) {
|
||||
// Only do this for RenderedChunk, not OutputAssets.
|
||||
if (isChunk(chunk)) {
|
||||
const modulesKeys = Object.keys(chunk.modules)
|
||||
|
||||
for (const moduleId of modulesKeys) {
|
||||
const directives: string[] | false =
|
||||
this.getModuleInfo(moduleId)?.meta?.ensureDirectives
|
||||
|
||||
if (directives) {
|
||||
const directiveStrings = directives
|
||||
.map((directive) => `"${directive}"`)
|
||||
.join(';\n')
|
||||
|
||||
const s = new MagicString(code)
|
||||
s.prepend(`${directiveStrings};\n`)
|
||||
const srcMap = s.generateMap({ includeContent: true })
|
||||
|
||||
return { code: s.toString(), map: srcMap }
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
0
packages/design-system/public/.gitkeep
Normal file
0
packages/design-system/public/.gitkeep
Normal file
5
packages/design-system/tsconfig-build.json
Normal file
5
packages/design-system/tsconfig-build.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"exclude": ["node_modules", "**/*.test.ts", "**/*.stories.tsx"],
|
||||
"include": ["lib"]
|
||||
}
|
||||
25
packages/design-system/tsconfig.json
Normal file
25
packages/design-system/tsconfig.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["example", "lib"],
|
||||
"exclude": ["node_modules", "**/*.test.ts"]
|
||||
}
|
||||
116
packages/design-system/vite.config.ts
Normal file
116
packages/design-system/vite.config.ts
Normal file
@@ -0,0 +1,116 @@
|
||||
/// <reference types="vitest" />
|
||||
|
||||
import { extname, relative, resolve } from 'path'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { glob } from 'glob'
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import dts from 'vite-plugin-dts'
|
||||
import { libInjectCss } from 'vite-plugin-lib-inject-css'
|
||||
import libAssetsPlugin from '@laynezh/vite-plugin-lib-assets'
|
||||
import ensureDirectives from './plugins/rollup-plugin-ensure-directives'
|
||||
import fs from 'node:fs'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
react(),
|
||||
libInjectCss(),
|
||||
dts({
|
||||
include: ['lib'],
|
||||
exclude: ['node_modules', '**/*.test.ts', '**/*.stories.tsx'],
|
||||
rollupTypes: true,
|
||||
bundledPackages: ['class-variance-authority', 'clsx'],
|
||||
}),
|
||||
libAssetsPlugin({
|
||||
name: '[name].[contenthash:8].[ext]',
|
||||
limit: 1024 * 1,
|
||||
}),
|
||||
],
|
||||
build: {
|
||||
copyPublicDir: false,
|
||||
lib: {
|
||||
entry: [
|
||||
resolve(__dirname, 'lib/new.ts'),
|
||||
resolve(__dirname, 'lib/current.ts'),
|
||||
],
|
||||
formats: ['es'],
|
||||
},
|
||||
rollupOptions: {
|
||||
plugins: [ensureDirectives()],
|
||||
external: [
|
||||
'react',
|
||||
'react-dom',
|
||||
'react/jsx-runtime',
|
||||
'react-aria-components',
|
||||
],
|
||||
onwarn(warning, defaultHandler) {
|
||||
if (
|
||||
warning.code === 'MODULE_LEVEL_DIRECTIVE' &&
|
||||
warning.message.includes('use client')
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
// When using the directive 'use client' in components, rollup throws an error.
|
||||
// See: https://github.com/vitejs/vite/issues/15012#issuecomment-1815854072
|
||||
// We ignore sourcemap_error on the first character for component files
|
||||
// to be caused by the 'use client' directive
|
||||
if (
|
||||
warning.code === 'SOURCEMAP_ERROR' &&
|
||||
warning.loc?.file &&
|
||||
warning.loc.line === 1 &&
|
||||
warning.loc.column === 0
|
||||
) {
|
||||
if (fs.statSync(warning.loc.file)) {
|
||||
const file = fs.readFileSync(warning.loc.file, {
|
||||
encoding: 'utf-8',
|
||||
})
|
||||
const lines = file.split('\n')
|
||||
|
||||
if (lines[0] === "'use client'") {
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
defaultHandler(warning)
|
||||
},
|
||||
input: Object.fromEntries(
|
||||
glob
|
||||
.sync(
|
||||
[
|
||||
'lib/new.ts',
|
||||
'lib/current.ts',
|
||||
'lib/style-new.css',
|
||||
'lib/style-current.css',
|
||||
'lib/components/**/*.{ts,tsx}',
|
||||
],
|
||||
{
|
||||
ignore: '**/*.stories.{ts,tsx}',
|
||||
},
|
||||
)
|
||||
.map((file) => {
|
||||
return [
|
||||
// The name of the entry point
|
||||
// lib/nested/foo.ts becomes nested/foo
|
||||
relative(
|
||||
'lib',
|
||||
file.slice(0, file.length - extname(file).length),
|
||||
),
|
||||
// The absolute path to the entry file
|
||||
// lib/nested/foo.ts becomes /project/lib/nested/foo.ts
|
||||
fileURLToPath(new URL(file, import.meta.url)),
|
||||
]
|
||||
}),
|
||||
),
|
||||
output: {
|
||||
assetFileNames: 'assets/[name][extname]',
|
||||
entryFileNames: '[name].js',
|
||||
},
|
||||
},
|
||||
},
|
||||
server: {
|
||||
open: './example/index.html',
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user