feat(SW-375): new tokens
new asset generation logic BREAKING CHANGE: New tokens.
This commit is contained in:
Michael Zetterberg
151
packages/design-system/lib/components/Button/Button.stories.tsx
Normal file
151
packages/design-system/lib/components/Button/Button.stories.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import { fn } from '@storybook/test'
|
||||
|
||||
import { Button } from './Button'
|
||||
import { config as buttonConfig } from './variants'
|
||||
import { config as typographyConfig } from '../Typography/variants'
|
||||
|
||||
const meta: Meta<typeof Button> = {
|
||||
title: 'Components/Button',
|
||||
component: Button,
|
||||
argTypes: {
|
||||
onPress: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
typography: {
|
||||
control: 'select',
|
||||
options: Object.keys(typographyConfig.variants.variant),
|
||||
},
|
||||
variant: {
|
||||
control: 'select',
|
||||
options: Object.keys(buttonConfig.variants.variant),
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof Button>
|
||||
|
||||
export const PrimaryDefault: Story = {
|
||||
args: {
|
||||
onPress: fn(),
|
||||
children: 'Primary button',
|
||||
typography: 'Body/Paragraph/mdBold',
|
||||
variant: 'Primary',
|
||||
},
|
||||
}
|
||||
|
||||
export const PrimaryLarge: Story = {
|
||||
args: {
|
||||
...PrimaryDefault.args,
|
||||
size: 'Large',
|
||||
},
|
||||
}
|
||||
|
||||
export const PrimaryMedium: Story = {
|
||||
args: {
|
||||
...PrimaryDefault.args,
|
||||
size: 'Medium',
|
||||
},
|
||||
}
|
||||
|
||||
export const PrimarySmall: Story = {
|
||||
args: {
|
||||
...PrimaryDefault.args,
|
||||
size: 'Small',
|
||||
},
|
||||
}
|
||||
|
||||
export const SecondaryDefault: Story = {
|
||||
args: {
|
||||
onPress: fn(),
|
||||
children: 'Secondary button',
|
||||
typography: 'Body/Paragraph/mdBold',
|
||||
variant: 'Secondary',
|
||||
},
|
||||
}
|
||||
|
||||
export const SecondaryLarge: Story = {
|
||||
args: {
|
||||
...SecondaryDefault.args,
|
||||
size: 'Large',
|
||||
},
|
||||
}
|
||||
|
||||
export const SecondaryMedium: Story = {
|
||||
args: {
|
||||
...SecondaryDefault.args,
|
||||
size: 'Medium',
|
||||
},
|
||||
}
|
||||
|
||||
export const SecondarySmall: Story = {
|
||||
args: {
|
||||
...SecondaryDefault.args,
|
||||
size: 'Small',
|
||||
},
|
||||
}
|
||||
|
||||
export const TertiaryDefault: Story = {
|
||||
args: {
|
||||
onPress: fn(),
|
||||
children: 'Tertiary button',
|
||||
typography: 'Body/Paragraph/mdBold',
|
||||
variant: 'Tertiary',
|
||||
},
|
||||
}
|
||||
|
||||
export const TertiaryLarge: Story = {
|
||||
args: {
|
||||
...TertiaryDefault.args,
|
||||
size: 'Large',
|
||||
},
|
||||
}
|
||||
|
||||
export const TertiaryMedium: Story = {
|
||||
args: {
|
||||
...TertiaryDefault.args,
|
||||
size: 'Medium',
|
||||
},
|
||||
}
|
||||
|
||||
export const TertiarySmall: Story = {
|
||||
args: {
|
||||
...TertiaryDefault.args,
|
||||
size: 'Small',
|
||||
},
|
||||
}
|
||||
|
||||
export const TextDefault: Story = {
|
||||
args: {
|
||||
onPress: fn(),
|
||||
children: 'Text button',
|
||||
typography: 'Body/Paragraph/mdBold',
|
||||
variant: 'Text',
|
||||
},
|
||||
}
|
||||
|
||||
export const TextLarge: Story = {
|
||||
args: {
|
||||
...TextDefault.args,
|
||||
size: 'Large',
|
||||
},
|
||||
}
|
||||
|
||||
export const TextMedium: Story = {
|
||||
args: {
|
||||
...TextDefault.args,
|
||||
size: 'Medium',
|
||||
},
|
||||
}
|
||||
|
||||
export const TextSmall: Story = {
|
||||
args: {
|
||||
...TextDefault.args,
|
||||
size: 'Small',
|
||||
},
|
||||
}
|
||||
29
packages/design-system/lib/components/Button/Button.tsx
Normal file
29
packages/design-system/lib/components/Button/Button.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
'use client'
|
||||
|
||||
import { Button as ButtonRAC } from 'react-aria-components'
|
||||
|
||||
import { variants } from './variants'
|
||||
|
||||
import type { ButtonProps } from './types'
|
||||
|
||||
export function Button({
|
||||
variant,
|
||||
color,
|
||||
size,
|
||||
|
||||
typography,
|
||||
className,
|
||||
|
||||
...props
|
||||
}: ButtonProps) {
|
||||
const classNames = variants({
|
||||
variant,
|
||||
color,
|
||||
size,
|
||||
|
||||
typography,
|
||||
className,
|
||||
})
|
||||
|
||||
return <ButtonRAC {...props} className={classNames} />
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
.button {
|
||||
border-radius: var(--Corner-radius-rounded);
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.size-large {
|
||||
padding: var(--Space-x2) var(--Space-x3);
|
||||
}
|
||||
|
||||
.size-medium {
|
||||
padding: var(--Space-x15) var(--Space-x2);
|
||||
}
|
||||
|
||||
.size-small {
|
||||
padding: 10px var(--Space-x2);
|
||||
}
|
||||
|
||||
.variant-primary {
|
||||
background-color: var(--Component-Button-Brand-Primary-Default);
|
||||
border-color: var(--Component-Button-Brand-Primary-Border-Default);
|
||||
color: var(--Component-Button-Brand-Primary-On-fill-Default);
|
||||
}
|
||||
|
||||
.variant-primary:hover {
|
||||
background-color: var(--Component-Button-Brand-Primary-Hover);
|
||||
border-color: var(--Component-Button-Brand-Primary-Border-Hover);
|
||||
color: var(--Component-Button-Brand-Primary-On-fill-Hover);
|
||||
}
|
||||
|
||||
.variant-primary:disabled {
|
||||
background-color: var(--Component-Button-Brand-Primary-Disabled);
|
||||
border-color: var(--Component-Button-Brand-Primary-Border-Disabled);
|
||||
color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
|
||||
}
|
||||
|
||||
.variant-secondary {
|
||||
background-color: var(--Component-Button-Brand-Secondary-Default);
|
||||
border-color: var(--Component-Button-Brand-Secondary-Border-Default);
|
||||
color: var(--Component-Button-Brand-Secondary-On-fill-Default);
|
||||
}
|
||||
|
||||
.variant-secondary:hover {
|
||||
background-color: var(--Component-Button-Brand-Secondary-Hover);
|
||||
border-color: var(--Component-Button-Brand-Secondary-Border-Hover);
|
||||
color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
|
||||
}
|
||||
|
||||
.variant-secondary:disabled {
|
||||
background-color: var(--Component-Button-Brand-Secondary-Disabled);
|
||||
border-color: var(--Component-Button-Brand-Secondary-Border-Disabled);
|
||||
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
|
||||
}
|
||||
|
||||
.variant-tertiary {
|
||||
background-color: var(--Component-Button-Brand-Tertiary-Default);
|
||||
border-color: var(--Component-Button-Brand-Tertiary-Border-Default);
|
||||
color: var(--Component-Button-Brand-Tertiary-On-fill-Default);
|
||||
}
|
||||
|
||||
.variant-tertiary:hover {
|
||||
background-color: var(--Component-Button-Brand-Tertiary-Hover);
|
||||
border-color: var(--Component-Button-Brand-Tertiary-Border-Hover);
|
||||
color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
|
||||
}
|
||||
|
||||
.variant-tertiary:disabled {
|
||||
background-color: var(--Component-Button-Brand-Tertiary-Disabled);
|
||||
border-color: var(--Component-Button-Brand-Tertiary-Border-Disabled);
|
||||
color: var(--Component-Button-Brand-Tertiary-On-fill-Disabled);
|
||||
}
|
||||
|
||||
.variant-text {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
/* TODO: Missing text variant tokens for button */
|
||||
color: var(--Scandic-Red-100);
|
||||
padding: var(--Space-x15) 0;
|
||||
}
|
||||
10
packages/design-system/lib/components/Button/types.ts
Normal file
10
packages/design-system/lib/components/Button/types.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { Button } from 'react-aria-components'
|
||||
|
||||
import type { VariantProps } from 'class-variance-authority'
|
||||
import type { ComponentProps } from 'react'
|
||||
|
||||
import type { variants } from './variants'
|
||||
|
||||
export interface ButtonProps
|
||||
extends ComponentProps<typeof Button>,
|
||||
VariantProps<typeof variants> {}
|
||||
32
packages/design-system/lib/components/Button/variants.ts
Normal file
32
packages/design-system/lib/components/Button/variants.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { cva } from 'class-variance-authority'
|
||||
|
||||
import { withTypography } from '../Typography/variants'
|
||||
|
||||
import styles from './button.module.css'
|
||||
|
||||
export const config = {
|
||||
variants: {
|
||||
variant: {
|
||||
Primary: styles['variant-primary'],
|
||||
Secondary: styles['variant-secondary'],
|
||||
Tertiary: styles['variant-tertiary'],
|
||||
Text: styles['variant-text'],
|
||||
},
|
||||
color: {
|
||||
Primary: styles['color-primary'],
|
||||
Inverted: styles['color-inverted'],
|
||||
},
|
||||
size: {
|
||||
Small: styles['size-small'],
|
||||
Medium: styles['size-medium'],
|
||||
Large: styles['size-large'],
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'Primary',
|
||||
color: 'Primary',
|
||||
size: 'Large',
|
||||
},
|
||||
} as const
|
||||
|
||||
export const variants = cva(styles.button, withTypography(config))
|
||||
@@ -1,27 +0,0 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
import { Card } from './Card.tsx'
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Layout/Card',
|
||||
component: Card,
|
||||
argTypes: {
|
||||
intent: {
|
||||
control: 'select',
|
||||
options: ['basic', 'border'],
|
||||
},
|
||||
},
|
||||
args: {
|
||||
intent: 'basic',
|
||||
},
|
||||
} satisfies Meta<typeof Card>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {}
|
||||
|
||||
export const WithBorder: Story = {
|
||||
args: {
|
||||
intent: 'border',
|
||||
},
|
||||
}
|
||||
25
packages/design-system/lib/components/Card/Card.stories.tsx
Normal file
25
packages/design-system/lib/components/Card/Card.stories.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import { Card } from './Card.tsx'
|
||||
|
||||
const meta: Meta<typeof Card> = {
|
||||
title: 'Components/Card',
|
||||
component: Card,
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof Card>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
as: 'Default',
|
||||
},
|
||||
}
|
||||
|
||||
export const Featured: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
as: 'Featured',
|
||||
},
|
||||
}
|
||||
@@ -1,26 +1,11 @@
|
||||
import styles from './card.module.css'
|
||||
import { variants } from './variants'
|
||||
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
import type { CardProps } from './types'
|
||||
|
||||
const card = cva(styles.card, {
|
||||
variants: {
|
||||
intent: {
|
||||
basic: styles.basic,
|
||||
border: styles.border,
|
||||
},
|
||||
},
|
||||
// compoundVariants: [
|
||||
// { intent: "primary", size: "medium", className: styles.primaryMedium },
|
||||
// ],
|
||||
defaultVariants: {
|
||||
intent: 'basic',
|
||||
},
|
||||
})
|
||||
|
||||
export interface CardProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof card> {}
|
||||
|
||||
export function Card({ className, intent }: CardProps) {
|
||||
return <div className={card({ intent, className })}>Card</div>
|
||||
export function Card({ as, className, children }: CardProps) {
|
||||
const classNames = variants({
|
||||
as,
|
||||
className,
|
||||
})
|
||||
return <div className={classNames}>{children}</div>
|
||||
}
|
||||
|
||||
@@ -0,0 +1,171 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
import { fn } from '@storybook/test'
|
||||
|
||||
import { themes } from '../../../../.storybook/preview'
|
||||
|
||||
import { Card } from '../'
|
||||
import { Typography } from '../../Typography'
|
||||
import { Button } from '../../Button'
|
||||
|
||||
type CompositionProps = React.ComponentPropsWithoutRef<typeof Card> & {
|
||||
_onPrimaryPress?: () => void
|
||||
_onSecondaryPress?: () => void
|
||||
inMainArea: boolean
|
||||
showTitle: boolean
|
||||
showPreamble: boolean
|
||||
showPrimaryButton: boolean
|
||||
showSecondaryButton: boolean
|
||||
}
|
||||
|
||||
const meta: Meta<CompositionProps> = {
|
||||
title: 'Compositions/Card',
|
||||
component: Card,
|
||||
decorators: [
|
||||
(Story, context) => {
|
||||
if (context.name.toLowerCase().indexOf('all themes') >= 0) {
|
||||
return (
|
||||
<>
|
||||
<h1>{context.name}</h1>
|
||||
{Object.entries(themes.themes).map(([key, value]) => {
|
||||
return (
|
||||
<div className={value} style={{ padding: '1em 0' }}>
|
||||
<h2 style={{ paddingBottom: '0.5em' }}>{key}</h2>
|
||||
<Story />
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<Story />
|
||||
</div>
|
||||
)
|
||||
},
|
||||
],
|
||||
argTypes: {
|
||||
inMainArea: {
|
||||
name: 'Is in main area',
|
||||
},
|
||||
showTitle: {
|
||||
name: 'Composition: Show title',
|
||||
},
|
||||
showPreamble: {
|
||||
name: 'Composition: Show preamble',
|
||||
},
|
||||
showPrimaryButton: {
|
||||
name: 'Composition: Show primary button',
|
||||
},
|
||||
showSecondaryButton: {
|
||||
name: 'Composition: Show secondary button',
|
||||
},
|
||||
_onPrimaryPress: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
_onSecondaryPress: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
render: ({
|
||||
inMainArea,
|
||||
showTitle,
|
||||
showPreamble,
|
||||
showPrimaryButton,
|
||||
showSecondaryButton,
|
||||
...args
|
||||
}) => (
|
||||
<Card {...args}>
|
||||
{showTitle && (
|
||||
<Typography variant="Title/md">
|
||||
<h3>Content Card</h3>
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
{showPreamble && (
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p>
|
||||
Mattis sit duis pulvinar ultricies auctor euismod. Augue mattis
|
||||
mauris at est iaculis pulvinar pulvinar.
|
||||
</p>
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
{showPrimaryButton && inMainArea && (
|
||||
<Button
|
||||
size={'Large'}
|
||||
variant="Primary"
|
||||
typography="Body/Paragraph/mdBold"
|
||||
onPress={args._onPrimaryPress}
|
||||
>
|
||||
Primary action
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{showPrimaryButton && !inMainArea && (
|
||||
<Button
|
||||
size={'Small'}
|
||||
variant="Tertiary"
|
||||
typography="Body/Paragraph/mdBold"
|
||||
onPress={args._onPrimaryPress}
|
||||
>
|
||||
Primary action
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{showSecondaryButton && (
|
||||
<Button
|
||||
size={inMainArea ? 'Large' : 'Small'}
|
||||
variant="Secondary"
|
||||
onPress={args._onSecondaryPress}
|
||||
typography="Body/Paragraph/mdBold"
|
||||
>
|
||||
Secondary action
|
||||
</Button>
|
||||
)}
|
||||
</Card>
|
||||
),
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<CompositionProps>
|
||||
|
||||
export const ContentCardMainArea: Story = {
|
||||
args: {
|
||||
as: 'Default',
|
||||
inMainArea: true,
|
||||
showTitle: true,
|
||||
showPreamble: true,
|
||||
showPrimaryButton: true,
|
||||
showSecondaryButton: true,
|
||||
_onPrimaryPress: fn(),
|
||||
_onSecondaryPress: fn(),
|
||||
},
|
||||
}
|
||||
|
||||
export const ContentCardNonMainArea: Story = {
|
||||
args: {
|
||||
as: 'Default',
|
||||
inMainArea: false,
|
||||
showTitle: true,
|
||||
showPreamble: true,
|
||||
showPrimaryButton: true,
|
||||
showSecondaryButton: true,
|
||||
_onPrimaryPress: fn(),
|
||||
_onSecondaryPress: fn(),
|
||||
},
|
||||
}
|
||||
|
||||
export const ContentCardMainAreaAllThemes: Story = {
|
||||
...ContentCardMainArea,
|
||||
}
|
||||
|
||||
export const ContentCardNonMainAreaAllThemes: Story = {
|
||||
...ContentCardNonMainArea,
|
||||
}
|
||||
@@ -1,13 +1,22 @@
|
||||
.card {
|
||||
background: #fff;
|
||||
padding: var(--Space-x2) var(--Space-x3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
gap: var(--Space-x15);
|
||||
}
|
||||
|
||||
.basic {
|
||||
outline: solid 1px green;
|
||||
.Default {
|
||||
border: solid 1px var(--Border-Default);
|
||||
background-color: var(--Surface-Secondary-Default);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
color: var(--Text-Default);
|
||||
}
|
||||
|
||||
.border {
|
||||
border-style: solid;
|
||||
border-width: 3px;
|
||||
border-color: var(--color-brand-main-normal);
|
||||
.Featured {
|
||||
border: solid 1px var(--Border-Default);
|
||||
background-color: var(--Surface-Primary-Default);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
color: var(--Text-Default);
|
||||
}
|
||||
|
||||
11
packages/design-system/lib/components/Card/types.ts
Normal file
11
packages/design-system/lib/components/Card/types.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import type { VariantProps } from 'class-variance-authority'
|
||||
|
||||
import type { variants } from './variants'
|
||||
|
||||
type CardStyles = 'Default' | 'Featured'
|
||||
|
||||
export interface CardProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof variants> {
|
||||
as: CardStyles
|
||||
}
|
||||
17
packages/design-system/lib/components/Card/variants.ts
Normal file
17
packages/design-system/lib/components/Card/variants.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import { cva } from 'class-variance-authority'
|
||||
|
||||
import styles from './card.module.css'
|
||||
|
||||
const config = {
|
||||
variants: {
|
||||
as: {
|
||||
Default: styles.Default,
|
||||
Featured: styles.Featured,
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
as: 'Default',
|
||||
},
|
||||
} as const
|
||||
|
||||
export const variants = cva(styles.card, config)
|
||||
@@ -0,0 +1,33 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import { fn } from '@storybook/test'
|
||||
|
||||
import { ChipButton } from './ChipButton.tsx'
|
||||
import ChevronRightSmallIcon from '../Icons/ChevronRightSmall.tsx'
|
||||
|
||||
const meta: Meta<typeof ChipButton> = {
|
||||
title: 'Components/Chip/ChipButton 🚧',
|
||||
component: ChipButton,
|
||||
argTypes: {
|
||||
onPress: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof ChipButton>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
onPress: fn(),
|
||||
children: (
|
||||
<>
|
||||
Button Chip <ChevronRightSmallIcon width={20} height={20} />
|
||||
</>
|
||||
),
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { Button as ButtonRAC } from 'react-aria-components'
|
||||
|
||||
import { Typography } from '../Typography'
|
||||
|
||||
import styles from './chip-button.module.css'
|
||||
|
||||
import type { ComponentPropsWithRef } from 'react'
|
||||
|
||||
export function ChipButton({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: ComponentPropsWithRef<typeof ButtonRAC>) {
|
||||
return (
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<ButtonRAC {...props} className={[styles.chip, className].join(' ')}>
|
||||
{children}
|
||||
</ButtonRAC>
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
.chip {
|
||||
background-color: var(--Component-Button-Inverted-Default);
|
||||
border-color: var(--Component-Button-Inverted-Border-Default);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
padding: var(--Space-x1) var(--Space-x15);
|
||||
color: var(--Text-Interactive-Default);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chip:hover {
|
||||
/* TODO: change to proper Component-variable once it is available */
|
||||
background-color: var(--Scandic-Peach-10);
|
||||
/* TODO: change to proper Component-variable once it is available */
|
||||
color: var(--Scandic-Red-100);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { ChipButton } from './ChipButton'
|
||||
@@ -0,0 +1,25 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import { ChipLink } from './ChipLink.tsx'
|
||||
import ChevronRightSmallIcon from '../Icons/ChevronRightSmall.tsx'
|
||||
|
||||
const meta: Meta<typeof ChipLink> = {
|
||||
title: 'Components/Chip/ChipLInk 🚧',
|
||||
component: ChipLink,
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof ChipLink>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
href: '/',
|
||||
onClick: (e) => e.preventDefault(),
|
||||
children: (
|
||||
<>
|
||||
Link Chip <ChevronRightSmallIcon width={20} height={20} />
|
||||
</>
|
||||
),
|
||||
},
|
||||
}
|
||||
19
packages/design-system/lib/components/ChipLink/ChipLink.tsx
Normal file
19
packages/design-system/lib/components/ChipLink/ChipLink.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { Typography } from '../Typography'
|
||||
|
||||
import styles from './chip-link.module.css'
|
||||
|
||||
import type { PropsWithChildren } from 'react'
|
||||
|
||||
export function ChipLink({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: PropsWithChildren<React.AnchorHTMLAttributes<HTMLAnchorElement>>) {
|
||||
return (
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<a {...props} className={[styles.chip, className].join(' ')}>
|
||||
{children}
|
||||
</a>
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
.chip {
|
||||
background-color: var(--Component-Button-Inverted-Default);
|
||||
border-color: var(--Component-Button-Inverted-Border-Default);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
padding: var(--Space-x1) var(--Space-x15);
|
||||
color: var(--Text-Interactive-Default);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chip:hover {
|
||||
/* TODO: change to proper Component-variable once it is available */
|
||||
background-color: var(--Scandic-Peach-10);
|
||||
/* TODO: change to proper Component-variable once it is available */
|
||||
color: var(--Scandic-Red-100);
|
||||
}
|
||||
1
packages/design-system/lib/components/ChipLink/index.tsx
Normal file
1
packages/design-system/lib/components/ChipLink/index.tsx
Normal file
@@ -0,0 +1 @@
|
||||
export { ChipLink } from './ChipLink'
|
||||
@@ -0,0 +1,61 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
import { fn } from '@storybook/test'
|
||||
|
||||
import { Chips } from './Chips.tsx'
|
||||
import { ChipLink } from '../ChipLink/ChipLink.tsx'
|
||||
import { ChipButton } from '../ChipButton/ChipButton.tsx'
|
||||
|
||||
import { Default as ChipLinkDefault } from '../ChipLink/ChipLink.stories.tsx'
|
||||
import { Default as ChipButtonDefault } from '../ChipButton/ChipButton.stories.tsx'
|
||||
|
||||
type StoryProps = React.ComponentPropsWithoutRef<typeof Chips> & {
|
||||
onPress: () => void
|
||||
}
|
||||
|
||||
const meta: Meta<StoryProps> = {
|
||||
title: 'Compositions/Chips',
|
||||
component: Chips,
|
||||
argTypes: {
|
||||
onPress: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<StoryProps>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
onPress: fn(),
|
||||
},
|
||||
render: (args) => {
|
||||
return (
|
||||
<Chips>
|
||||
<ChipButton {...ChipButtonDefault.args} {...args} />
|
||||
<ChipButton {...ChipButtonDefault.args} {...args} />
|
||||
<ChipButton {...ChipButtonDefault.args} {...args} />
|
||||
<ChipLink {...ChipLinkDefault.args} {...args} />
|
||||
<ChipLink {...ChipLinkDefault.args} {...args} />
|
||||
<ChipLink {...ChipLinkDefault.args} {...args} />
|
||||
<ChipButton {...ChipButtonDefault.args} {...args} />
|
||||
<ChipButton {...ChipButtonDefault.args} {...args} />
|
||||
<ChipButton {...ChipButtonDefault.args} {...args} />
|
||||
<ChipLink {...ChipLinkDefault.args} {...args} />
|
||||
<ChipLink {...ChipLinkDefault.args} {...args} />
|
||||
<ChipLink {...ChipLinkDefault.args} {...args} />
|
||||
<ChipButton {...ChipButtonDefault.args} {...args} />
|
||||
<ChipButton {...ChipButtonDefault.args} {...args} />
|
||||
<ChipLink {...ChipLinkDefault.args} {...args} />
|
||||
<ChipButton {...ChipButtonDefault.args} {...args} />
|
||||
<ChipLink {...ChipLinkDefault.args} {...args} />
|
||||
<ChipLink {...ChipLinkDefault.args} {...args} />
|
||||
<ChipLink {...ChipLinkDefault.args} {...args} />
|
||||
<ChipButton {...ChipButtonDefault.args} {...args} />
|
||||
</Chips>
|
||||
)
|
||||
},
|
||||
}
|
||||
7
packages/design-system/lib/components/Chips/Chips.tsx
Normal file
7
packages/design-system/lib/components/Chips/Chips.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import styles from './chips.module.css'
|
||||
|
||||
import type { PropsWithChildren } from 'react'
|
||||
|
||||
export function Chips({ children }: PropsWithChildren) {
|
||||
return <div className={styles.chips}>{children}</div>
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
.chips {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
1
packages/design-system/lib/components/Chips/index.tsx
Normal file
1
packages/design-system/lib/components/Chips/index.tsx
Normal file
@@ -0,0 +1 @@
|
||||
export { Chips } from './Chips'
|
||||
@@ -1,82 +0,0 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import { Button } from './Button'
|
||||
import { TestIcon } from '../Icon/TestIcon'
|
||||
|
||||
import '../../../style-current.css'
|
||||
|
||||
const meta = {
|
||||
title: 'Current web/Controls/Button',
|
||||
component: Button,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
} satisfies Meta<typeof Button>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Primary: Story = {
|
||||
args: {
|
||||
children: 'Primary Button',
|
||||
},
|
||||
}
|
||||
|
||||
export const Secondary: Story = {
|
||||
args: {
|
||||
children: 'Secondary Button',
|
||||
intent: 'secondary',
|
||||
},
|
||||
}
|
||||
|
||||
export const Large: Story = {
|
||||
args: {
|
||||
children: 'Large Button',
|
||||
size: 'large',
|
||||
},
|
||||
}
|
||||
|
||||
export const Small: Story = {
|
||||
args: {
|
||||
children: 'Small Button',
|
||||
size: 'small',
|
||||
},
|
||||
}
|
||||
|
||||
export const Disabled: Story = {
|
||||
args: {
|
||||
children: 'Disabled Button',
|
||||
isDisabled: true,
|
||||
},
|
||||
}
|
||||
|
||||
export const LeadingIcon: Story = {
|
||||
args: {
|
||||
children: [<TestIcon color="var(--Base-Text-Inverted)" />, 'Button'],
|
||||
},
|
||||
}
|
||||
|
||||
export const TrailingIcon: Story = {
|
||||
args: {
|
||||
children: ['Button', <TestIcon color="var(--Base-Text-Inverted)" />],
|
||||
},
|
||||
}
|
||||
|
||||
export const WithIcons: Story = {
|
||||
args: {
|
||||
children: [
|
||||
<TestIcon color="var(--Base-Text-Inverted)" />,
|
||||
<TestIcon color="var(--Base-Text-Inverted)" />,
|
||||
'Button',
|
||||
<TestIcon color="var(--Base-Text-Inverted)" />,
|
||||
<TestIcon color="var(--Base-Text-Inverted)" />,
|
||||
],
|
||||
},
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import styles from './button.module.css'
|
||||
|
||||
import { Button as ButtonComponent } from 'react-aria-components'
|
||||
import { cva } from 'class-variance-authority'
|
||||
|
||||
import type { ButtonProps as ButtonComponentProps } from 'react-aria-components'
|
||||
import type { ComponentProps } from '../../../types'
|
||||
|
||||
const config = {
|
||||
variants: {
|
||||
intent: {
|
||||
primary: styles.primary,
|
||||
secondary: styles.secondary,
|
||||
},
|
||||
size: {
|
||||
small: styles.small,
|
||||
normal: styles.normal,
|
||||
large: styles.large,
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
intent: 'primary',
|
||||
size: 'normal',
|
||||
},
|
||||
} as const
|
||||
|
||||
const button = cva(styles.button, config)
|
||||
|
||||
export type ButtonProps = ComponentProps<
|
||||
ButtonComponentProps,
|
||||
typeof button,
|
||||
never,
|
||||
'intent' | 'size'
|
||||
>
|
||||
|
||||
export function Button({
|
||||
children,
|
||||
className,
|
||||
intent = config.defaultVariants.intent,
|
||||
size = config.defaultVariants.size,
|
||||
...props
|
||||
}: ButtonProps) {
|
||||
return (
|
||||
<ButtonComponent className={button({ className, intent, size })} {...props}>
|
||||
{children}
|
||||
</ButtonComponent>
|
||||
)
|
||||
}
|
||||
@@ -1,82 +0,0 @@
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px 24px;
|
||||
background: none;
|
||||
color: var(--Base-Text-Inverted);
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
transition: background-color 300ms ease;
|
||||
font-family: Helvetica;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Primary styles */
|
||||
.primary {
|
||||
background-color: var(--Primary-Fill-Strong-Default);
|
||||
border: 2px solid transparent;
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
|
||||
.primary:hover {
|
||||
background: var(--Primary-Fill-Strong-Hovered);
|
||||
}
|
||||
|
||||
.primary:active,
|
||||
.primary:focus {
|
||||
border: 2px solid var(--Base-Text-Inverted);
|
||||
outline: 1px solid var(--Primary-Border-Strong);
|
||||
}
|
||||
|
||||
/* Secondary styles */
|
||||
.secondary {
|
||||
border: 1px solid var(--Base-Border-Normal);
|
||||
background-color: var(--Base-Background-Normal);
|
||||
color: var(--Primary-Text-Strong);
|
||||
}
|
||||
|
||||
.secondary:hover {
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
outline: 2px solid var(--Primary-Border-Hovered);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.secondary:active,
|
||||
.secondary:focus {
|
||||
border: 1px solid var(--Primary-Border-Strong);
|
||||
outline: 1px solid var(--Base-Border-Normal);
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
/* Disabled styles */
|
||||
.button:disabled {
|
||||
background-color: var(--Base-Fill-Disabled);
|
||||
color: var(--Base-Text-Disabled);
|
||||
cursor: not-allowed;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Sizes */
|
||||
.large {
|
||||
font-size: var(--typography-body-regular-font-size);
|
||||
line-height: var(--typography-body-regular-line-height);
|
||||
letter-spacing: var(--typography-body-regular-letter-spacing);
|
||||
}
|
||||
|
||||
.normal {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.096px;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.096px;
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
export function TestIcon({ color = '#291710' }: { color?: string }) {
|
||||
return (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<mask
|
||||
id="mask0_69_3287"
|
||||
style={{ maskType: 'alpha' }}
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="0"
|
||||
y="0"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<rect width="24" height="24" fill="#D9D9D9" />
|
||||
</mask>
|
||||
<g mask="url(#mask0_69_3287)">
|
||||
<path
|
||||
d="M11.075 12.95V15.9375C11.075 16.1958 11.1667 16.4167 11.35 16.6C11.5333 16.7833 11.7542 16.875 12.0125 16.875C12.2708 16.875 12.4917 16.7833 12.675 16.6C12.8583 16.4167 12.95 16.1958 12.95 15.9375V12.95H15.9375C16.1958 12.95 16.4167 12.8583 16.6 12.675C16.7833 12.4917 16.875 12.2708 16.875 12.0125C16.875 11.7542 16.7833 11.5333 16.6 11.35C16.4167 11.1667 16.1958 11.075 15.9375 11.075H12.95V8.0625C12.95 7.80417 12.8583 7.58333 12.675 7.4C12.4917 7.21667 12.2708 7.125 12.0125 7.125C11.7542 7.125 11.5333 7.21667 11.35 7.4C11.1667 7.58333 11.075 7.80417 11.075 8.0625V11.075H8.0625C7.80417 11.075 7.58333 11.1667 7.4 11.35C7.21667 11.5333 7.125 11.7542 7.125 12.0125C7.125 12.2708 7.21667 12.4917 7.4 12.675C7.58333 12.8583 7.80417 12.95 8.0625 12.95H11.075ZM12 21.75C10.6516 21.75 9.38434 21.4936 8.19838 20.9809C7.01239 20.4682 5.98075 19.7724 5.10345 18.8934C4.22615 18.0145 3.53125 16.9826 3.01875 15.7978C2.50625 14.613 2.25 13.3471 2.25 12C2.25 10.6516 2.50636 9.38434 3.01908 8.19838C3.53179 7.01239 4.22762 5.98075 5.10658 5.10345C5.98553 4.22615 7.01739 3.53125 8.20218 3.01875C9.38698 2.50625 10.6529 2.25 12 2.25C13.3484 2.25 14.6157 2.50636 15.8016 3.01908C16.9876 3.53179 18.0193 4.22762 18.8966 5.10658C19.7739 5.98553 20.4688 7.01739 20.9813 8.20217C21.4938 9.38697 21.75 10.6529 21.75 12C21.75 13.3484 21.4936 14.6157 20.9809 15.8016C20.4682 16.9876 19.7724 18.0193 18.8934 18.8966C18.0145 19.7739 16.9826 20.4688 15.7978 20.9813C14.613 21.4938 13.3471 21.75 12 21.75ZM12 19.875C14.1917 19.875 16.0521 19.1104 17.5813 17.5813C19.1104 16.0521 19.875 14.1917 19.875 12C19.875 9.80833 19.1104 7.94792 17.5813 6.41875C16.0521 4.88958 14.1917 4.125 12 4.125C9.80833 4.125 7.94792 4.88958 6.41875 6.41875C4.88958 7.94792 4.125 9.80833 4.125 12C4.125 14.1917 4.88958 16.0521 6.41875 17.5813C7.94792 19.1104 9.80833 19.875 12 19.875Z"
|
||||
fill={color}
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { TestIcon } from './TestIcon'
|
||||
@@ -0,0 +1,16 @@
|
||||
export default function ChevronRightSmallIcon(
|
||||
props: React.SVGAttributes<HTMLOrSVGElement>
|
||||
) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
>
|
||||
<path d="M12.65 12L8.77495 8.12497C8.59995 7.94997 8.51245 7.73538 8.51245 7.48122C8.51245 7.22705 8.59995 7.0083 8.77495 6.82497C8.94995 6.64163 9.16662 6.54788 9.42495 6.54372C9.68328 6.53955 9.90412 6.62913 10.0875 6.81247L14.6125 11.3375C14.7041 11.4291 14.7729 11.5312 14.8187 11.6437C14.8645 11.7562 14.8875 11.875 14.8875 12C14.8875 12.125 14.8645 12.2437 14.8187 12.3562C14.7729 12.4687 14.7041 12.5708 14.6125 12.6625L10.0875 17.1875C9.90412 17.3708 9.68328 17.4604 9.42495 17.4562C9.16662 17.4521 8.94995 17.3583 8.77495 17.175C8.59995 16.9916 8.51245 16.7729 8.51245 16.5187C8.51245 16.2646 8.59995 16.05 8.77495 15.875L12.65 12Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
import {
|
||||
Meta,
|
||||
Title,
|
||||
Subtitle,
|
||||
Description,
|
||||
Controls,
|
||||
Stories,
|
||||
} from '@storybook/blocks'
|
||||
|
||||
import * as TypographyStories from './Typography.stories.tsx'
|
||||
|
||||
<Meta of={TypographyStories} />
|
||||
|
||||
<Title />
|
||||
|
||||
The source of the design system lives in Figma. Here, source means design tokens _and_ Figma styles.
|
||||
|
||||
Figma styles are a collection of design tokens that together define a style. For the most part it is used for typography. Design tokens define things like font family, font weight, font size, etc. On their own they don't do much as their meaning is lost without context of each other. Together though they define the typography to render.
|
||||
|
||||
To help communication between designers and developers it helps to have the same nomenclature. To achieve this goal the technical implementation of the design system in this repository uses two approaches; a `Typography` component and a higher order function.
|
||||
|
||||
<Subtitle>The component</Subtitle>
|
||||
|
||||
> The approach described in this section is platform agnostic. However this documentation is for the implementation aimed at web. The same can be achived for other platforms but currently it is only implemented for web.
|
||||
|
||||
The `Typography` component implements all the Figma styles for typography with [Class Variance Authority](https://cva.style/). This allows the consumers to use this component to apply typography styling to any component that accepts a class (the `className` prop) by wrapping them. The implementation is also supported by code completion furthering promoting the same nomenclature.
|
||||
|
||||
Example:
|
||||
|
||||
```
|
||||
import { Typography } from '@scandic-hotels/design-system'
|
||||
|
||||
function SomeTitleComponent () {
|
||||
return (
|
||||
<Typography variant="Title/lg">
|
||||
<h1>A title with proper typography</h1>
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
It also takes care of merging with any class already present.
|
||||
|
||||
```
|
||||
import { Typography } from '@scandic-hotels/design-system'
|
||||
|
||||
import styles from './my-component.module.css'
|
||||
|
||||
function MyComponent () {
|
||||
return (
|
||||
<Typography variant="Title/lg">
|
||||
<h1 className={styles.title}>A title with proper typography</h1>
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
<Subtitle>The higher order function</Subtitle>
|
||||
|
||||
> The approach described in this section is platform agnostic. However this documentation is for the implementation aimed at web. The same can be achived for other platforms but currently it is only implemented for web.
|
||||
|
||||
The higher order function for typography implements all the Figma styles for typography with Class Variance Authority. The implementation merges any components CVA variants with the CVA variants for typography. It does this by exporting a higher order function named `withTypography`.
|
||||
|
||||
The higher order function named `withTypography` accepts a CVA config and returns a new CVA config enhanced with a `typography` variant. This will give the component implementing the CVA config a prop named `typography`. This prop works the same as the `variant` prop for the `Typography` component with handling merging of classes already preset, code completion and everything.
|
||||
|
||||
Example:
|
||||
|
||||
```
|
||||
// variants.ts
|
||||
import { cva } from 'class-variance-authority'
|
||||
|
||||
import { withTypography } from '@scandic-hotels/design-system'
|
||||
|
||||
import styles from './my-component.module.css'
|
||||
|
||||
export const config = {
|
||||
variants: {
|
||||
...
|
||||
},
|
||||
defaultVariants: {
|
||||
...
|
||||
},
|
||||
} as const
|
||||
|
||||
export const variants = cva(styles.myComponent, withTypography(config))
|
||||
```
|
||||
|
||||
```
|
||||
// MyComponent.tsx
|
||||
import { variants } from './variants'
|
||||
|
||||
export function MyComponent (props) {
|
||||
const classNames = variants(...)
|
||||
return <div {...props} className={classNames} />
|
||||
}
|
||||
```
|
||||
|
||||
```
|
||||
// OtherComponent.tsx
|
||||
...
|
||||
<MyComponent typography="Title/lg">
|
||||
...
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
The component accepts the following props.
|
||||
|
||||
> For the component to work the nested child component needs to handle `className` prop.
|
||||
|
||||
<Controls />
|
||||
|
||||
---
|
||||
|
||||
## All typography styles
|
||||
|
||||
<Stories />
|
||||
@@ -0,0 +1,189 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import { Typography } from './Typography.tsx'
|
||||
|
||||
import TypographyDocs from './Typography.docs.mdx'
|
||||
|
||||
import { config as typographyConfig } from './variants'
|
||||
|
||||
const meta: Meta<typeof Typography> = {
|
||||
title: 'Components/Typography',
|
||||
component: Typography,
|
||||
args: { variant: typographyConfig.defaultVariants.variant },
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: 'select',
|
||||
options: Object.keys(typographyConfig.variants.variant),
|
||||
table: {
|
||||
defaultValue: { summary: typographyConfig.defaultVariants.variant },
|
||||
},
|
||||
},
|
||||
},
|
||||
parameters: { docs: { toc: true, page: TypographyDocs } },
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof Typography>
|
||||
|
||||
export const TitleLg: Story = {
|
||||
name: 'Title/lg',
|
||||
args: {
|
||||
variant: 'Title/lg',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const TitleMd: Story = {
|
||||
name: 'Title/md',
|
||||
args: {
|
||||
variant: 'Title/md',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const TitleMdRegular: Story = {
|
||||
name: 'Title/mdRegular',
|
||||
args: {
|
||||
variant: 'Title/mdRegular',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const TitleSm: Story = {
|
||||
name: 'Title/sm',
|
||||
args: {
|
||||
variant: 'Title/sm',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const TitleSmRegular: Story = {
|
||||
name: 'Title/smRegular',
|
||||
args: {
|
||||
variant: 'Title/smRegular',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const TitleXs: Story = {
|
||||
name: 'Title/xs',
|
||||
args: {
|
||||
variant: 'Title/xs',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const TitleDecorativeLg: Story = {
|
||||
name: 'Title/Decorative/lg',
|
||||
args: {
|
||||
variant: 'Title/Decorative/lg',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const TitleDecorativeMd: Story = {
|
||||
name: 'Title/Decorative/md',
|
||||
args: {
|
||||
variant: 'Title/Decorative/md',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const TitleSubtitleLg: Story = {
|
||||
name: 'Title/Subtitle/lg',
|
||||
args: {
|
||||
variant: 'Title/Subtitle/lg',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const TitleSubtitleMd: Story = {
|
||||
name: 'Title/Subtitle/md',
|
||||
args: {
|
||||
variant: 'Title/Subtitle/md',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const TitleOverlineSm: Story = {
|
||||
name: 'Title/Overline/sm',
|
||||
args: {
|
||||
variant: 'Title/Overline/sm',
|
||||
children: <h1>The quick brown fox jumps over the lazy dog</h1>,
|
||||
},
|
||||
}
|
||||
export const BodyLeadtext: Story = {
|
||||
name: 'Body/Lead text',
|
||||
args: {
|
||||
variant: 'Body/Lead text',
|
||||
children: <p>The quick brown fox jumps over the lazy dog</p>,
|
||||
},
|
||||
}
|
||||
export const BodyParagraphMdRegular: Story = {
|
||||
name: 'Body/Paragraph/mdRegular',
|
||||
args: {
|
||||
variant: 'Body/Paragraph/mdRegular',
|
||||
children: <p>The quick brown fox jumps over the lazy dog</p>,
|
||||
},
|
||||
}
|
||||
export const BodyParagraphMdBold: Story = {
|
||||
name: 'Body/Paragraph/mdBold',
|
||||
args: {
|
||||
variant: 'Body/Paragraph/mdBold',
|
||||
children: <p>The quick brown fox jumps over the lazy dog</p>,
|
||||
},
|
||||
}
|
||||
export const BodySupportingtextCaptionSmRegular: Story = {
|
||||
name: 'Body/Supporting text (caption)/smRegular',
|
||||
args: {
|
||||
variant: 'Body/Supporting text (caption)/smRegular',
|
||||
children: <p>The quick brown fox jumps over the lazy dog</p>,
|
||||
},
|
||||
}
|
||||
export const BodySupportingtextCaptionSmBold: Story = {
|
||||
name: 'Body/Supporting text (caption)/smBold',
|
||||
args: {
|
||||
variant: 'Body/Supporting text (caption)/smBold',
|
||||
children: <p>The quick brown fox jumps over the lazy dog</p>,
|
||||
},
|
||||
}
|
||||
export const BodyUnderlineMd: Story = {
|
||||
name: 'Body/Underline/md',
|
||||
args: {
|
||||
variant: 'Body/Underline/md',
|
||||
children: <p>The quick brown fox jumps over the lazy dog</p>,
|
||||
},
|
||||
}
|
||||
export const BodyUnderlineSm: Story = {
|
||||
name: 'Body/Underline/sm',
|
||||
args: {
|
||||
variant: 'Body/Underline/sm',
|
||||
children: <p>The quick brown fox jumps over the lazy dog</p>,
|
||||
},
|
||||
}
|
||||
export const TagSm: Story = {
|
||||
name: 'Tag/sm',
|
||||
args: {
|
||||
variant: 'Tag/sm',
|
||||
children: <span>The quick brown fox jumps over the lazy dog</span>,
|
||||
},
|
||||
}
|
||||
export const LinkMd: Story = {
|
||||
name: 'Link/md',
|
||||
args: {
|
||||
variant: 'Link/md',
|
||||
children: <a href="#">The quick brown fox jumps over the lazy dog</a>,
|
||||
},
|
||||
}
|
||||
export const LinkSm: Story = {
|
||||
name: 'Link/sm',
|
||||
args: {
|
||||
variant: 'Link/sm',
|
||||
children: <a href="#">The quick brown fox jumps over the lazy dog</a>,
|
||||
},
|
||||
}
|
||||
export const LabelXsRegular: Story = {
|
||||
name: 'Label/xsRegular',
|
||||
args: {
|
||||
variant: 'Label/xsRegular',
|
||||
children: <span>The quick brown fox jumps over the lazy dog</span>,
|
||||
},
|
||||
}
|
||||
export const LabelXsBold: Story = {
|
||||
name: 'Label/xsBold',
|
||||
args: {
|
||||
variant: 'Label/xsBold',
|
||||
children: <span>The quick brown fox jumps over the lazy dog</span>,
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { cloneElement, isValidElement } from 'react'
|
||||
|
||||
import { variants } from './variants'
|
||||
|
||||
import type { TypographyProps } from './types'
|
||||
|
||||
export function Typography({ variant, children }: TypographyProps) {
|
||||
if (!isValidElement(children)) return null
|
||||
|
||||
const classNames = variants({
|
||||
variant,
|
||||
})
|
||||
|
||||
return cloneElement(children, {
|
||||
...children.props,
|
||||
className: [children.props.className, classNames].filter(Boolean).join(' '),
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export { Typography } from './Typography'
|
||||
// eslint-disable-next-line react-refresh/only-export-components
|
||||
export { withTypography } from './variants'
|
||||
@@ -0,0 +1,9 @@
|
||||
import type { VariantProps } from 'class-variance-authority'
|
||||
|
||||
import type { variants } from './variants'
|
||||
|
||||
export interface TypographyProps
|
||||
extends Pick<React.HTMLAttributes<HTMLElement>, 'className'>,
|
||||
VariantProps<typeof variants> {
|
||||
children: React.ReactElement<{ className?: string }>
|
||||
}
|
||||
@@ -0,0 +1,246 @@
|
||||
.Title-lg {
|
||||
font-family: var(--Title-lg-Font-family), var(--Title-lg-Font-fallback);
|
||||
font-size: var(--Title-lg-Size);
|
||||
font-weight: var(--Title-lg-Font-weight);
|
||||
letter-spacing: var(--Title-lg-Letter-spacing);
|
||||
text-transform: var(--Title-lg-Text-Transform);
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Title-md {
|
||||
font-family: var(--Title-md-Font-family), var(--Title-md-Font-fallback);
|
||||
font-size: var(--Title-md-Size);
|
||||
font-weight: var(--Title-md-Font-weight);
|
||||
letter-spacing: var(--Title-md-Letter-spacing);
|
||||
text-transform: var(--Title-md-Text-Transform);
|
||||
line-height: 1.1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Title-mdRegular {
|
||||
font-family: var(--Title-md-Font-family), var(--Title-md-Font-fallback);
|
||||
font-size: var(--Title-md-Size);
|
||||
font-weight: 700;
|
||||
letter-spacing: var(--Title-md-Letter-spacing);
|
||||
text-transform: var(--Title-md-Text-Transform);
|
||||
line-height: 1.1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Title-sm {
|
||||
font-family: var(--Title-sm-Font-family), var(--Title-sm-Font-fallback);
|
||||
font-size: var(--Title-sm-Size);
|
||||
font-weight: var(--Title-sm-Font-weight);
|
||||
letter-spacing: var(--Title-sm-Letter-spacing);
|
||||
text-transform: var(--Title-sm-Text-Transform);
|
||||
line-height: 1.1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Title-smRegular {
|
||||
font-family:
|
||||
var(--Title-sm-LowCase-Font-family), var(--Title-sm-LowCase-Font-fallback);
|
||||
font-size: var(--Title-sm-LowCase-Size);
|
||||
font-weight: var(--Title-sm-LowCase-Font-weight);
|
||||
letter-spacing: var(--Title-sm-LowCase-Letter-spacing);
|
||||
text-transform: var(--Title-sm-LowCase-Text-Transform);
|
||||
line-height: 1.1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Title-xs {
|
||||
font-family: var(--Title-xs-Font-family), var(--Title-xs-Font-fallback);
|
||||
font-size: var(--Title-xs-Size);
|
||||
font-weight: var(--Title-xs-Font-weight);
|
||||
letter-spacing: var(--Title-xs-Letter-spacing);
|
||||
text-transform: var(--Title-xs-Text-Transform);
|
||||
line-height: 1.1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Title-Decorative-lg {
|
||||
font-family:
|
||||
var(--Title-Decorative-lg-Font-family),
|
||||
var(--Title-Decorative-lg-Font-fallback);
|
||||
font-size: var(--Title-Decorative-lg-Size);
|
||||
font-weight: var(--Title-Decorative-lg-Font-weight);
|
||||
letter-spacing: var(--Title-Decorative-lg-Letter-spacing);
|
||||
text-transform: var(--Title-Decorative-lg-Text-Transform);
|
||||
line-height: 1.1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Title-Decorative-md {
|
||||
font-family:
|
||||
var(--Title-Decorative-md-Font-family),
|
||||
var(--Title-Decorative-md-Font-fallback);
|
||||
font-size: var(--Title-Decorative-md-Size);
|
||||
font-weight: var(--Title-Decorative-md-Font-weight);
|
||||
letter-spacing: var(--Title-Decorative-md-Letter-spacing);
|
||||
text-transform: var(--Title-Decorative-md-Text-Transform);
|
||||
line-height: 1.1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Title-Subtitle-lg {
|
||||
font-family:
|
||||
var(--Title-Subtitle-lg-Font-family), var(--Title-Subtitle-lg-Font-fallback);
|
||||
font-size: var(--Title-Subtitle-lg-Size);
|
||||
font-weight: var(--Title-Subtitle-lg-Font-weight);
|
||||
letter-spacing: var(--Title-Subtitle-lg-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.2;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Title-Subtitle-md {
|
||||
font-family:
|
||||
var(--Title-Subtitle-md-Font-family), var(--Title-Subtitle-md-Font-fallback);
|
||||
font-size: var(--Title-Subtitle-md-Size);
|
||||
font-weight: var(--Title-Subtitle-md-Font-weight);
|
||||
letter-spacing: var(--Title-Subtitle-md-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.2;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Title-Overline-sm {
|
||||
font-family:
|
||||
var(--Title-Overline-sm-Font-family), var(--Title-Overline-sm-Font-fallback);
|
||||
font-size: var(--Title-Overline-sm-Size);
|
||||
font-weight: var(--Title-Overline-sm-Font-weight);
|
||||
letter-spacing: var(--Title-Overline-sm-Letter-spacing);
|
||||
text-transform: var(--Title-Overline-sm-Text-Transform);
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Body-Lead-text {
|
||||
font-family:
|
||||
var(--Body-Lead-text-Font-family), var(--Body-Lead-text-Font-fallback);
|
||||
font-size: var(--Body-Lead-text-Size);
|
||||
font-weight: var(--Body-Lead-text-Font-weight);
|
||||
letter-spacing: var(--Body-Lead-text-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Body-Paragraph-mdRegular {
|
||||
font-family:
|
||||
var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
|
||||
font-size: var(--Body-Paragraph-Size);
|
||||
font-weight: var(--Body-Paragraph-Font-weight);
|
||||
letter-spacing: var(--Body-Paragraph-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Body-Paragraph-mdBold {
|
||||
font-family:
|
||||
var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
|
||||
font-size: var(--Body-Paragraph-Size);
|
||||
font-weight: var(--Body-Paragraph-Font-weight-2);
|
||||
letter-spacing: var(--Body-Paragraph-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Body-Supporting-text-caption-smRegular {
|
||||
font-family:
|
||||
var(--Body-Supporting-text-Font-family),
|
||||
var(--Body-Supporting-text-Font-fallback);
|
||||
font-size: var(--Body-Supporting-text-Size);
|
||||
font-weight: var(--Body-Supporting-text-Font-weight);
|
||||
letter-spacing: var(--Body-Supporting-text-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Body-Supporting-text-caption-smBold {
|
||||
font-family:
|
||||
var(--Body-Supporting-text-Font-family),
|
||||
var(--Body-Supporting-text-Font-fallback);
|
||||
font-size: var(--Body-Supporting-text-Size);
|
||||
font-weight: var(--Body-Supporting-text-Font-weight-2);
|
||||
letter-spacing: var(--Body-Supporting-text-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Body-Underline-md {
|
||||
font-family:
|
||||
var(--Body-Underline-md-Font-family), var(--Body-Underline-md-Font-fallback);
|
||||
font-size: var(--Body-Underline-md-Size);
|
||||
font-weight: var(--Body-Underline-md-Font-weight);
|
||||
letter-spacing: var(--Body-Underline-md-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.5;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.Body-Underline-sm {
|
||||
font-family:
|
||||
var(--Body-Underline-sm-Font-family), var(--Body-Underline-sm-Font-fallback);
|
||||
font-size: var(--Body-Underline-sm-Size);
|
||||
font-weight: var(--Body-Underline-sm-Font-weight);
|
||||
letter-spacing: var(--Body-Underline-sm-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.4;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.Tag-sm {
|
||||
font-family: var(--Tag-Font-family), var(--Tag-Font-fallback);
|
||||
font-size: var(--Tag-Size);
|
||||
font-weight: var(--Tag-Font-weight);
|
||||
letter-spacing: var(--Tag-Letter-spacing);
|
||||
text-transform: var(--Tag-Text-Transform);
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Link-md {
|
||||
font-family: var(--Link-md-Font-family), var(--Link-md-Font-fallback);
|
||||
font-size: var(--Link-md-Size);
|
||||
font-weight: var(--Link-md-Font-weight);
|
||||
letter-spacing: var(--Link-md-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.5;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.Link-sm {
|
||||
font-family: var(--Link-sm-Font-family), var(--Link-sm-Font-fallback);
|
||||
font-size: var(--Link-sm-Size);
|
||||
font-weight: var(--Link-sm-Font-weight);
|
||||
letter-spacing: var(--Link-sm-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.4;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.Label-xsRegular {
|
||||
font-family: var(--Label-Font-family), var(--Label-Font-fallback);
|
||||
font-size: var(--Label-Size);
|
||||
font-weight: var(--Label-Font-weight);
|
||||
letter-spacing: var(--Label-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Label-xsBold {
|
||||
font-family: var(--Label-Font-family), var(--Label-Font-fallback);
|
||||
font-size: var(--Label-Size);
|
||||
font-weight: var(--Label-Font-weight-2);
|
||||
letter-spacing: var(--Label-Letter-spacing);
|
||||
text-transform: unset;
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
}
|
||||
52
packages/design-system/lib/components/Typography/variants.ts
Normal file
52
packages/design-system/lib/components/Typography/variants.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
import { cva } from 'class-variance-authority'
|
||||
import { deepmerge } from 'deepmerge-ts'
|
||||
|
||||
import styles from './typography.module.css'
|
||||
|
||||
export const config = {
|
||||
variants: {
|
||||
variant: {
|
||||
'Title/lg': styles['Title-lg'],
|
||||
'Title/md': styles['Title-md'],
|
||||
'Title/mdRegular': styles['Title-mdRegular'],
|
||||
'Title/sm': styles['Title-sm'],
|
||||
'Title/smRegular': styles['Title-smRegular'],
|
||||
'Title/xs': styles['Title-xs'],
|
||||
'Title/Decorative/lg': styles['Title-Decorative-lg'],
|
||||
'Title/Decorative/md': styles['Title-Decorative-md'],
|
||||
'Title/Subtitle/lg': styles['Title-Subtitle-lg'],
|
||||
'Title/Subtitle/md': styles['Title-Subtitle-md'],
|
||||
'Title/Overline/sm': styles['Title-Overline-sm'],
|
||||
'Body/Lead text': styles['Body-Lead-text'],
|
||||
'Body/Paragraph/mdRegular': styles['Body-Paragraph-mdRegular'],
|
||||
'Body/Paragraph/mdBold': styles['Body-Paragraph-mdBold'],
|
||||
'Body/Supporting text (caption)/smRegular':
|
||||
styles['Body-Supporting-text-caption-smRegular'],
|
||||
'Body/Supporting text (caption)/smBold':
|
||||
styles['Body-Supporting-text-caption-smBold'],
|
||||
'Body/Underline/md': styles['Body-Underline-md'],
|
||||
'Body/Underline/sm': styles['Body-Underline-sm'],
|
||||
'Tag/sm': styles['Tag-sm'],
|
||||
'Link/md': styles['Link-md'],
|
||||
'Link/sm': styles['Link-sm'],
|
||||
'Label/xsRegular': styles['Label-xsRegular'],
|
||||
'Label/xsBold': styles['Label-xsBold'],
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'Body/Paragraph/mdRegular',
|
||||
},
|
||||
} as const
|
||||
|
||||
export const variants = cva({}, config)
|
||||
|
||||
const typographyConfig = {
|
||||
variants: {
|
||||
typography: config.variants.variant,
|
||||
},
|
||||
defaultVariants: config.defaultVariants,
|
||||
} as const
|
||||
|
||||
export function withTypography<T>(config: T) {
|
||||
return deepmerge(typographyConfig, config)
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { Button } from './components/CurrentWeb/Button'
|
||||
@@ -1,25 +0,0 @@
|
||||
import {
|
||||
Meta,
|
||||
Title,
|
||||
Subtitle,
|
||||
ColorPalette,
|
||||
ColorItem,
|
||||
} from '@storybook/blocks'
|
||||
|
||||
import * as colors from '../styles/colors'
|
||||
|
||||
<Meta title="Design system/Colors" />
|
||||
|
||||
<Title>Colors</Title>
|
||||
|
||||
<ColorPalette>
|
||||
{Object.keys(colors).map((key) => {
|
||||
const skipKeys = ['colors', 'tokens', 'Old']
|
||||
if (!skipKeys.includes(key)) {
|
||||
return Object.keys(colors[key]).map((modeKey) => {
|
||||
return <ColorItem title={modeKey} colors={colors[key][modeKey]} />
|
||||
})
|
||||
}
|
||||
return null
|
||||
})}
|
||||
</ColorPalette>
|
||||
@@ -1,27 +0,0 @@
|
||||
import {
|
||||
Meta,
|
||||
Title,
|
||||
Subtitle,
|
||||
ColorPalette,
|
||||
ColorItem,
|
||||
} from '@storybook/blocks'
|
||||
|
||||
import * as colors from '../../styles/colors'
|
||||
|
||||
import '../../style-current.css'
|
||||
|
||||
<Meta title="Current web/Colors" />
|
||||
|
||||
<Title>Colors</Title>
|
||||
|
||||
<ColorPalette>
|
||||
{Object.keys(colors).map((key) => {
|
||||
const skipKeys = ['colors', 'tokens', 'New']
|
||||
if (!skipKeys.includes(key)) {
|
||||
return Object.keys(colors[key]).map((modeKey) => {
|
||||
return <ColorItem title={modeKey} colors={colors[key][modeKey]} />
|
||||
})
|
||||
}
|
||||
return null
|
||||
})}
|
||||
</ColorPalette>
|
||||
@@ -1,84 +0,0 @@
|
||||
import {
|
||||
Meta,
|
||||
Title,
|
||||
Subtitle,
|
||||
ColorPalette,
|
||||
ColorItem,
|
||||
} from '@storybook/blocks'
|
||||
|
||||
import { tokens as allTokens } from '../styles/colors'
|
||||
import {capitalizeFirstLetter} from '../utils'
|
||||
|
||||
export const data = Object.entries(allTokens).reduce((acc, curr) => {
|
||||
const [name, value] = curr
|
||||
const nameParts = name.split('-')
|
||||
if (nameParts.length == 2) {
|
||||
if (!acc['color']) {
|
||||
acc['color'] = {}
|
||||
}
|
||||
nameParts.unshift('color')
|
||||
}
|
||||
|
||||
const title = nameParts[0].toLowerCase()
|
||||
const subtitle = nameParts[1].toLowerCase()
|
||||
const token = nameParts[2].toLowerCase()
|
||||
|
||||
if (!acc[title]) {
|
||||
acc[title] = {}
|
||||
}
|
||||
|
||||
if (!acc[title][subtitle]) {
|
||||
acc[title][subtitle] = {}
|
||||
}
|
||||
|
||||
acc[title][subtitle][token] = value
|
||||
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
<Meta title="Design system/Tokens/Colors" />
|
||||
|
||||
|
||||
<div>
|
||||
{
|
||||
Object.keys(data).map(t => {
|
||||
if (t === 'color') {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Title>{capitalizeFirstLetter(t)}</Title>
|
||||
{
|
||||
Object.keys(data[t]).map(s => {
|
||||
return (
|
||||
<>
|
||||
<Subtitle>{capitalizeFirstLetter(s)}</Subtitle>
|
||||
{
|
||||
(typeof data[t][s] === 'string') ? null : (
|
||||
<ColorPalette>
|
||||
{
|
||||
Object.keys(data[t][s]).map(v => {
|
||||
return (
|
||||
<ColorItem
|
||||
key={v}
|
||||
title={capitalizeFirstLetter(v)}
|
||||
subtitle=""
|
||||
colors={{
|
||||
[`color.${t}.${s}.${v}`]: `var(--${data[t][s][v]})`
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ColorPalette>
|
||||
)
|
||||
}
|
||||
</>
|
||||
)
|
||||
})
|
||||
}
|
||||
</>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
255
packages/design-system/lib/fonts.css
Normal file
255
packages/design-system/lib/fonts.css
Normal file
@@ -0,0 +1,255 @@
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'biro script plus';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(/fonts/biro-script-plus/regular.woff2) format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'brandon text';
|
||||
font-weight: 700;
|
||||
src:
|
||||
url(/fonts/brandon-text/bold.woff2) format('woff2'),
|
||||
url(/fonts/brandon-text/bold.woff) format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'brandon text';
|
||||
font-weight: 900;
|
||||
src:
|
||||
url(/fonts/brandon-text/black.woff2) format('woff2'),
|
||||
url(/fonts/brandon-text/black.woff) format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'Domaine Sans Text';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src:
|
||||
url(/fonts/domaine/domainesanstextweb-light-webfont.woff2) format('woff2'),
|
||||
url(/fonts/domaine/domainesanstextweb-light-webfont.woff) format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'Domaine Sans Text';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src:
|
||||
url(/fonts/domaine/domainesanstextweb-regular-webfont.woff2) format('woff2'),
|
||||
url(/fonts/domaine/domainesanstextweb-regular-webfont.woff) format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'fira sans';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url(/fonts/fira-sans/light.woff2) format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'fira sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(/fonts/fira-sans/regular.woff2) format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'fira sans';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: url(/fonts/fira-sans/medium.woff2) format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'fira sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url(/fonts/fira-sans/semibold.woff2) format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'fira sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url(/fonts/fira-sans/bold.woff2) format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'fira sans';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: url(/fonts/fira-sans/black.woff2) format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: Garamond;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src:
|
||||
url(/fonts/itcgaramond/ITCGaramondBookNarrow_normal_condensed.woff2)
|
||||
format('woff2'),
|
||||
url(/fonts/itcgaramond/ITCGaramondBookNarrow_normal_condensed.woff)
|
||||
format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: Gotham;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src:
|
||||
url(/fonts/gotham/gotham-black-webfont.woff2) format('woff2'),
|
||||
url(/fonts/gotham/gotham-black-webfont.woff) format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: Gotham;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src:
|
||||
url(/fonts/gotham/gotham-bold-webfont.woff2) format('woff2'),
|
||||
url(/fonts/gotham/gotham-bold-webfont.woff) format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'Neue Haas Grotesk Display Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src:
|
||||
url(/fonts/grotesk/NeueHaasGroteskDisplay55Roman_normal_normal.woff2)
|
||||
format('woff2'),
|
||||
url(/fonts/grotesk/NeueHaasGroteskDisplay55Roman_normal_normal.woff)
|
||||
format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'Neue Haas Grotesk Display Pro';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src:
|
||||
url(/fonts/grotesk/NeueHaasGroteskDisplay65Medium_normal_normal.woff2)
|
||||
format('woff2'),
|
||||
url(/fonts/grotesk/NeueHaasGroteskDisplay65Medium_normal_normal.woff)
|
||||
format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'Prumo text';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src:
|
||||
url(/fonts/prumo/prumotext-light-webfont.woff2) format('woff2'),
|
||||
url(/fonts/prumo/PrumoText-Light.woff) format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'Canela Deck';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: url(/fonts/canela-deck/CanelaDeck-Black.otf) format('opentype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'Canela Deck';
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
src: url(/fonts/canela-deck/CanelaDeck-BlackItalic.otf) format('opentype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'Canela Deck';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url(/fonts/canela-deck/CanelaDeck-Bold.otf) format('opentype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'Canela Deck';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: url(/fonts/canela-deck/CanelaDeck-BoldItalic.otf) format('opentype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'Canela Deck';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url(/fonts/canela-deck/CanelaDeck-Light.otf) format('opentype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'Canela Deck';
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
src: url(/fonts/canela-deck/CanelaDeck-LightItalic.otf) format('opentype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'Canela Deck';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: url(/fonts/canela-deck/CanelaDeck-Medium.otf) format('opentype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'Canela Deck';
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
src: url(/fonts/canela-deck/CanelaDeck-MediumItalic.otf) format('opentype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'Canela Deck';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(/fonts/canela-deck/CanelaDeck-Regular.otf) format('opentype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'Canela Deck';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: url(/fonts/canela-deck/CanelaDeck-RegularItalic.otf) format('opentype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'Canela Deck';
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
src: url(/fonts/canela-deck/CanelaDeck-Thin.otf) format('opentype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: fallback;
|
||||
font-family: 'Canela Deck';
|
||||
font-style: italic;
|
||||
font-weight: 200;
|
||||
src: url(/fonts/canela-deck/CanelaDeck-ThinItalic.otf) format('opentype');
|
||||
}
|
||||
@@ -1,318 +0,0 @@
|
||||
import fs from 'node:fs'
|
||||
|
||||
import { sortObjectByKey } from './utils.ts'
|
||||
|
||||
type FigmaNumberVariable = {
|
||||
name: string
|
||||
type: 'number'
|
||||
isAlias: boolean
|
||||
value: number
|
||||
}
|
||||
|
||||
type FigmaColorVariable =
|
||||
| {
|
||||
name: string
|
||||
type: 'color'
|
||||
isAlias: true
|
||||
value: {
|
||||
collection: string
|
||||
name: string
|
||||
}
|
||||
}
|
||||
| {
|
||||
name: string
|
||||
type: 'color'
|
||||
isAlias: false
|
||||
value: string
|
||||
}
|
||||
|
||||
type FigmaDropShadowEffect = {
|
||||
type: 'DROP_SHADOW'
|
||||
color: {
|
||||
r: number
|
||||
g: number
|
||||
b: number
|
||||
a: number
|
||||
}
|
||||
offset: {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
radius: number
|
||||
spread: number
|
||||
}
|
||||
|
||||
type FigmaEffectVariable = {
|
||||
name: string
|
||||
type: 'effect'
|
||||
isAlias: boolean
|
||||
value: {
|
||||
effects: Array<FigmaDropShadowEffect>
|
||||
}
|
||||
}
|
||||
|
||||
type FigmaTypographyValue = {
|
||||
fontSize: number
|
||||
fontFamily: string
|
||||
fontWeight: 'Black' | 'Bold' | 'SemiBold' | 'Regular'
|
||||
lineHeight: number
|
||||
lineHeightUnit: 'PIXELS' | 'PERCENT'
|
||||
letterSpacing: number
|
||||
letterSpacingUnit: 'PIXELS' | 'PERCENT'
|
||||
textCase: 'UPPER' | 'ORIGINAL'
|
||||
textDecoration: 'NONE'
|
||||
}
|
||||
|
||||
type FigmaTypographyVariable = {
|
||||
name: string
|
||||
type: 'typography'
|
||||
isAlias: boolean
|
||||
value: FigmaTypographyValue
|
||||
}
|
||||
|
||||
type FigmaVariable =
|
||||
| FigmaNumberVariable
|
||||
| FigmaColorVariable
|
||||
| FigmaEffectVariable
|
||||
| FigmaTypographyVariable
|
||||
|
||||
type FigmaMode = {
|
||||
name: string
|
||||
variables: FigmaVariable[]
|
||||
}
|
||||
|
||||
type FigmaCollection = {
|
||||
name: string
|
||||
modes: FigmaMode[]
|
||||
}
|
||||
|
||||
type FigmaVariableData = {
|
||||
version: string
|
||||
metadata: unknown
|
||||
collections: FigmaCollection[]
|
||||
}
|
||||
|
||||
function kebabify(str: string) {
|
||||
return str.replaceAll('/', '-').replaceAll(' ', '-').replace(/\(|\)/g, '')
|
||||
}
|
||||
|
||||
// This parses output JSON from https://github.com/mark-nicepants/variables2json-docs
|
||||
const json: FigmaVariableData = JSON.parse(
|
||||
fs.readFileSync('./variables.json', { encoding: 'utf-8' })
|
||||
)
|
||||
|
||||
const colorGroupsByMode: Record<
|
||||
string,
|
||||
Record<string, Record<string, string>>
|
||||
> = {}
|
||||
const allColorsByMode: Record<string, Record<string, string>> = {}
|
||||
const allTokens: Record<string, string> = {}
|
||||
const allTypographyTokens: Record<string, string | number> = {}
|
||||
const allNumberedTokens: Record<string, string> = {}
|
||||
|
||||
json.collections.forEach((collection) => {
|
||||
collection.modes.forEach((mode) => {
|
||||
mode.variables.forEach((variable) => {
|
||||
if (variable.type === 'color') {
|
||||
if (variable.isAlias === true) {
|
||||
// Token
|
||||
const name = kebabify(variable.name)
|
||||
const value = kebabify(variable.value.name)
|
||||
|
||||
allTokens[name] = value
|
||||
} else {
|
||||
const name = kebabify(variable.name)
|
||||
const value = variable.value.replaceAll(' ', '').toLowerCase()
|
||||
|
||||
// Assign all colors per mode
|
||||
const parsedModeName = mode.name
|
||||
.split(' ')
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join('')
|
||||
|
||||
if (!allColorsByMode[parsedModeName]) {
|
||||
allColorsByMode[parsedModeName] = {}
|
||||
}
|
||||
allColorsByMode[parsedModeName][name] = value
|
||||
|
||||
const parts = name.split('-')
|
||||
const groupName = parts[0]
|
||||
if (!colorGroupsByMode[parsedModeName]) {
|
||||
colorGroupsByMode[parsedModeName] = {}
|
||||
}
|
||||
if (!colorGroupsByMode[parsedModeName][groupName]) {
|
||||
colorGroupsByMode[parsedModeName][groupName] = {}
|
||||
}
|
||||
|
||||
colorGroupsByMode[parsedModeName][groupName][name] = value
|
||||
}
|
||||
} else if (variable.type === 'typography') {
|
||||
// Make variables for each value
|
||||
const name = 'typography-' + kebabify(variable.name)
|
||||
|
||||
Object.keys(variable.value).forEach((valueKey) => {
|
||||
const value = variable.value[valueKey as keyof FigmaTypographyValue]
|
||||
const typeographyVal = `${name}-${valueKey}`
|
||||
|
||||
const unitValue =
|
||||
variable.value[`${valueKey}Unit` as keyof FigmaTypographyValue]
|
||||
|
||||
if (unitValue) {
|
||||
if (unitValue === 'PERCENT') {
|
||||
allTypographyTokens[typeographyVal] = value + '%'
|
||||
return
|
||||
} else if (unitValue === 'PIXELS') {
|
||||
allTypographyTokens[typeographyVal] = value + 'px'
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// Skip making css variables for units, they are already handled
|
||||
if (valueKey.includes('Unit')) {
|
||||
return
|
||||
}
|
||||
|
||||
if (valueKey === 'fontSize') {
|
||||
allTypographyTokens[typeographyVal] = value + 'px'
|
||||
return
|
||||
}
|
||||
|
||||
allTypographyTokens[typeographyVal] = value
|
||||
})
|
||||
} else if (variable.type === 'number') {
|
||||
if (collection.name === 'Text sizes') {
|
||||
const modeName = kebabify(mode.name)
|
||||
const name = `typography-${kebabify(variable.name)}-${modeName}-fontSize`
|
||||
allTypographyTokens[name] = variable.value.toString() + 'px'
|
||||
return
|
||||
} else if (collection.name === 'Layout') {
|
||||
const collectionName = kebabify(collection.name)
|
||||
const modeName = kebabify(mode.name)
|
||||
|
||||
const name = `${collectionName}-${modeName}-${kebabify(variable.name)}`
|
||||
allNumberedTokens[name] = variable.value + 'px'
|
||||
return
|
||||
} else if (collection.name === 'Spacing') {
|
||||
const collectionName = kebabify(collection.name)
|
||||
|
||||
let unitName = variable.name
|
||||
|
||||
// Special namings for spacing
|
||||
if (unitName === 'x025') {
|
||||
unitName = 'x-quarter'
|
||||
} else if (unitName === 'x05') {
|
||||
unitName = 'x-half'
|
||||
} else if (unitName === 'x15') {
|
||||
unitName = 'x-one-and-half'
|
||||
}
|
||||
|
||||
const name = `${collectionName}-${kebabify(unitName)}`
|
||||
allNumberedTokens[name] = variable.value + 'px'
|
||||
return
|
||||
}
|
||||
const collectionName = kebabify(collection.name)
|
||||
|
||||
const name = `${collectionName}-${kebabify(variable.name)}`
|
||||
allNumberedTokens[name] = variable.value + 'px'
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// Create ts file with all colors and color tokens for displaying swatches in Storybook
|
||||
const tsOutput = [
|
||||
'/* This file is generated, do not edit manually! */',
|
||||
`export const colors = ${JSON.stringify(allColorsByMode, null, 2)} as const`,
|
||||
'',
|
||||
`export const tokens = ${JSON.stringify(allTokens, null, 2)} as const`,
|
||||
'',
|
||||
]
|
||||
for (const [modeName, values] of Object.entries(colorGroupsByMode)) {
|
||||
tsOutput.push(`export const ${modeName} = { `)
|
||||
for (const [name, value] of Object.entries(values)) {
|
||||
tsOutput.push(`${name}: ${JSON.stringify(value, null, 2)},`)
|
||||
}
|
||||
tsOutput.push('} as const;')
|
||||
tsOutput.push('')
|
||||
}
|
||||
fs.writeFileSync('./styles/colors.ts', tsOutput.join('\n'), {
|
||||
encoding: 'utf-8',
|
||||
})
|
||||
|
||||
// Write a css file for each mode available of core colors
|
||||
const cssOutput = [
|
||||
'/* This file is generated, do not edit manually! */',
|
||||
':root {',
|
||||
]
|
||||
for (const [, values] of Object.entries(sortObjectByKey(allColorsByMode))) {
|
||||
for (const [name, value] of Object.entries(sortObjectByKey(values))) {
|
||||
cssOutput.push(` --${name}: ${value};`)
|
||||
}
|
||||
}
|
||||
cssOutput.push('}')
|
||||
cssOutput.push('') // New line at end of file
|
||||
fs.writeFileSync(`./styles/modes.css`, cssOutput.join('\n'), {
|
||||
encoding: 'utf-8',
|
||||
})
|
||||
|
||||
// All css files, regardless of mode, should have the same tokens. Generate one file for all tokens
|
||||
const cssTokensOutput = [
|
||||
'/* This file is generated, do not edit manually! */',
|
||||
':root {',
|
||||
]
|
||||
for (const [token, value] of Object.entries(sortObjectByKey(allTokens))) {
|
||||
cssTokensOutput.push(` --${token}: var(--${value});`)
|
||||
}
|
||||
cssTokensOutput.push('}')
|
||||
cssTokensOutput.push('') // New line at end of file
|
||||
fs.writeFileSync(`./styles/tokens.css`, cssTokensOutput.join('\n'), {
|
||||
encoding: 'utf-8',
|
||||
})
|
||||
|
||||
// All css files, regardless of mode, should have the same typography tokens.
|
||||
const typographyOutput = [
|
||||
'/* This file is generated, do not edit manually! */',
|
||||
':root {',
|
||||
]
|
||||
for (const [token, value] of Object.entries(
|
||||
sortObjectByKey(allTypographyTokens)
|
||||
)) {
|
||||
// TODO: handle fontSize for other consumers than CSS modules
|
||||
// Css modules needs fontsizes to be written as numerical values appended with the unit
|
||||
const isNumericalValue =
|
||||
typeof value === 'number' ||
|
||||
token.includes('fontSize') ||
|
||||
token.includes('lineHeight') ||
|
||||
token.includes('letterSpacing')
|
||||
|
||||
const valueOutput = isNumericalValue ? value : `'${value.toLowerCase()}'`
|
||||
|
||||
typographyOutput.push(` --${token}: ${valueOutput};`)
|
||||
}
|
||||
typographyOutput.push('}')
|
||||
typographyOutput.push('') // New line at end of file
|
||||
fs.writeFileSync(`./styles/typography.css`, typographyOutput.join('\n'), {
|
||||
encoding: 'utf-8',
|
||||
})
|
||||
|
||||
// All css files, regardless of mode, should have the same typography tokens.
|
||||
const numberedTokensOutput = [
|
||||
'/* This file is generated, do not edit manually! */',
|
||||
':root {',
|
||||
]
|
||||
for (const [token, value] of Object.entries(
|
||||
sortObjectByKey(allNumberedTokens)
|
||||
)) {
|
||||
const valueOutput = value
|
||||
|
||||
numberedTokensOutput.push(` --${token}: ${valueOutput};`)
|
||||
}
|
||||
numberedTokensOutput.push('}')
|
||||
numberedTokensOutput.push('') // New line at end of file
|
||||
fs.writeFileSync(
|
||||
`./styles/numberedTokens.css`,
|
||||
numberedTokensOutput.join('\n'),
|
||||
{
|
||||
encoding: 'utf-8',
|
||||
}
|
||||
)
|
||||
35
packages/design-system/lib/index.mdx
Normal file
35
packages/design-system/lib/index.mdx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { Meta } from '@storybook/blocks'
|
||||
|
||||
<Meta title="Introduction" />
|
||||
|
||||
# Scandic Hotels design system ✨
|
||||
|
||||
## Components
|
||||
|
||||
### File structure
|
||||
|
||||
```
|
||||
[Component]
|
||||
├── Compositions/ # A folder with Storybook stories to showcase compositions with other components
|
||||
├──── [CompositionX].stories.tsx # Storybook stories that showcase component compositions
|
||||
├── [component].module.css # The CSS for the component
|
||||
├── [Component].stories.tsx # Storybook stories for the component, without compositions
|
||||
├── [Component].tsx # The main component file
|
||||
├── index.tsx # Entrypoint for the component exports
|
||||
├── types.ts # TypeScript typings for the component
|
||||
└── variants.ts # Class Variance Authority configuration for variants of the component
|
||||
```
|
||||
|
||||
### Components
|
||||
|
||||
Each component of the design system is defined in `lib/components`.
|
||||
|
||||
Each component has an `index.tsx` file that exports the component and its optional subcomponents. Subcomponents are components that are meant to be used together/nested with the component.
|
||||
|
||||
The components that are considered public API from a consumer standpoint **must** have Storybook stories that showcases and documents their use. It should at least contain one default story that showcases the component by itself in its default state. More stories are added to showcase other variants or usages of the component.
|
||||
|
||||
Styling is done with CSS modules.
|
||||
|
||||
Variants are implemented with [Class Variance Authority](https://cva.style/).
|
||||
|
||||
The typings for each components live in their respective `types.ts` file inside the component folder.
|
||||
@@ -1 +0,0 @@
|
||||
export { Card } from './components/Card'
|
||||
@@ -1,6 +0,0 @@
|
||||
@import url('./styles/globals.css');
|
||||
@import url('./styles/typography.css');
|
||||
@import url('./styles/tokens.css');
|
||||
|
||||
/* Stylesheet specific for theme */
|
||||
@import url('./styles/old.css');
|
||||
@@ -1,8 +0,0 @@
|
||||
@import url('./styles/globals.css');
|
||||
@import url('./styles/typography.css');
|
||||
@import url('./styles/tokens.css');
|
||||
@import url('./styles/numberedTokens.css');
|
||||
@import url('./styles/modes.css');
|
||||
|
||||
/* Stylesheet specific for theme */
|
||||
@import url('./styles/new.css');
|
||||
10
packages/design-system/lib/style.css
Normal file
10
packages/design-system/lib/style.css
Normal file
@@ -0,0 +1,10 @@
|
||||
@import url(./styles/globals.css);
|
||||
@import url(./styles/impl.css);
|
||||
@import url(./styles/base.css);
|
||||
@import url(./styles/downtown-camper.css);
|
||||
@import url(./styles/grand-hotel.css);
|
||||
@import url(./styles/haymarket.css);
|
||||
@import url(./styles/hotel-norge.css);
|
||||
@import url(./styles/marski.css);
|
||||
@import url(./styles/scandic-go.css);
|
||||
@import url(./styles/scandic.css);
|
||||
119
packages/design-system/lib/styles/base.css
Normal file
119
packages/design-system/lib/styles/base.css
Normal file
@@ -0,0 +1,119 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
:root {
|
||||
/* Values */
|
||||
--Border-width-lg: 3px;
|
||||
--Border-width-md: 2px;
|
||||
--Border-width-none: 0px;
|
||||
--Border-width-sm: 1px;
|
||||
--BoxShadow-Level-1: 0 0 2 1 rgba(0, 0, 0, 0.1);
|
||||
--BoxShadow-Level-2: 0 0 4 2 rgba(0, 0, 0, 0.1);
|
||||
--BoxShadow-Level-3: 0 0 8 3 rgba(0, 0, 0, 0.1);
|
||||
--BoxShadow-Level-4: 0 0 14 6 rgba(0, 0, 0, 0.1);
|
||||
--Breakpoints-max-width: 767px;
|
||||
--Breakpoints-min-width: 320px;
|
||||
--Columns-Column: 4px;
|
||||
--Corner-radius-lg: 12px;
|
||||
--Corner-radius-md: 8px;
|
||||
--Corner-radius-rounded: 250px;
|
||||
--Corner-radius-sm: 4px;
|
||||
--Corner-radius-xl: 16px;
|
||||
--Font-family-Body: 'Fira sans';
|
||||
--Font-family-Decorative: 'Biro Script Plus';
|
||||
--Font-family-Title: 'Brandon Text';
|
||||
--Font-weight-Black: 900;
|
||||
--Font-weight-Bold: 700;
|
||||
--Font-weight-Extra-Bold: 800;
|
||||
--Font-weight-Medium: 500;
|
||||
--Font-weight-Regular-bold: 450;
|
||||
--Font-weight-Regular: 400;
|
||||
--Font-weight-Semi-Bold: 600;
|
||||
--Gutter-max-width: 16px;
|
||||
--Gutter-min-width: 16px;
|
||||
--Icon-2xs: 16px;
|
||||
--Icon-lg: 40px;
|
||||
--Icon-md: 32px;
|
||||
--Icon-sm: 24px;
|
||||
--Icon-xl: 42px;
|
||||
--Icon-xs: 20px;
|
||||
--Line-height-xs: 100px;
|
||||
--Margin-Margin-max: 16px;
|
||||
--Margin-Margin-min: 16px;
|
||||
--Neutral-0: #fcfcfc;
|
||||
--Neutral-100: #141414;
|
||||
--Neutral-10: #f0f0f0;
|
||||
--Neutral-15: #e9e9e9;
|
||||
--Neutral-20: #d9d9d9;
|
||||
--Neutral-30: #bfbfbf;
|
||||
--Neutral-40: #8c8c8c;
|
||||
--Neutral-50: #747474;
|
||||
--Neutral-5: #f5f5f5;
|
||||
--Neutral-60: #575757;
|
||||
--Neutral-70: #454545;
|
||||
--Neutral-80: #262626;
|
||||
--Neutral-90: #1f1f1f;
|
||||
--Neutral-Opacity-Black-0: #1f1c1b00;
|
||||
--Neutral-Opacity-Black-100: #1f1c1b;
|
||||
--Neutral-Opacity-Black-10: #1f1c1b1a;
|
||||
--Neutral-Opacity-Black-20: #1f1c1b33;
|
||||
--Neutral-Opacity-Black-30: #1f1c1b4d;
|
||||
--Neutral-Opacity-Black-40: #1f1c1b66;
|
||||
--Neutral-Opacity-Black-50: #1f1c1b80;
|
||||
--Neutral-Opacity-Black-5: #1f1c1b0d;
|
||||
--Neutral-Opacity-Black-60: #1f1c1b99;
|
||||
--Neutral-Opacity-Black-70: #1f1c1bb3;
|
||||
--Neutral-Opacity-Black-80: #1f1c1bcc;
|
||||
--Neutral-Opacity-Black-90: #1f1c1be6;
|
||||
--Neutral-Opacity-White-0: #ffffff00;
|
||||
--Neutral-Opacity-White-100: #ffffff;
|
||||
--Neutral-Opacity-White-10: #ffffff1a;
|
||||
--Neutral-Opacity-White-20: #ffffff33;
|
||||
--Neutral-Opacity-White-30: #ffffff4d;
|
||||
--Neutral-Opacity-White-40: #ffffff66;
|
||||
--Neutral-Opacity-White-50: #ffffff80;
|
||||
--Neutral-Opacity-White-5: #ffffff00;
|
||||
--Neutral-Opacity-White-60: #ffffff99;
|
||||
--Neutral-Opacity-White-70: #ffffffb3;
|
||||
--Neutral-Opacity-White-80: #ffffffcc;
|
||||
--Neutral-Opacity-White-90: #ffffffe6;
|
||||
--Size-1100-48: 48px;
|
||||
--Size-1300-56: 56px;
|
||||
--Size-1500-64: 64px;
|
||||
--Size-200-12: 12px;
|
||||
--Size-250-14: 14px;
|
||||
--Size-300-16: 16px;
|
||||
--Size-350-18: 18px;
|
||||
--Size-400-20: 20px;
|
||||
--Size-500-24: 24px;
|
||||
--Size-550-26: 26px;
|
||||
--Size-600-28: 28px;
|
||||
--Size-700-32: 32px;
|
||||
--Size-800-36: 36px;
|
||||
--Size-900-40: 40px;
|
||||
--Space-x025: 2px;
|
||||
--Space-x05: 4px;
|
||||
--Space-x0: 0px;
|
||||
--Space-x15: 12px;
|
||||
--Space-x1: 8px;
|
||||
--Space-x2: 16px;
|
||||
--Space-x3: 24px;
|
||||
--Space-x4: 32px;
|
||||
--Space-x5: 40px;
|
||||
--Space-x6: 48px;
|
||||
--Space-x7: 56px;
|
||||
--Space-x8: 72px;
|
||||
|
||||
/* Aliases */
|
||||
--Text-size-2xl: var(--Size-800-36);
|
||||
--Text-size-2xs: var(--Size-300-16);
|
||||
--Text-size-3xl: var(--Size-700-32);
|
||||
--Text-size-3xs: var(--Size-300-16);
|
||||
--Text-size-4xl: var(--Size-800-36);
|
||||
--Text-size-4xs: var(--Size-250-14);
|
||||
--Text-size-5xl: var(--Size-1300-56);
|
||||
--Text-size-5xs: var(--Size-200-12);
|
||||
--Text-size-lg: var(--Size-500-24);
|
||||
--Text-size-md: var(--Size-500-24);
|
||||
--Text-size-sm: var(--Size-400-20);
|
||||
--Text-size-xl: var(--Size-500-24);
|
||||
--Text-size-xs: var(--Size-350-18);
|
||||
}
|
||||
114
packages/design-system/lib/styles/base.js
Normal file
114
packages/design-system/lib/styles/base.js
Normal file
@@ -0,0 +1,114 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
export const theme = {
|
||||
'Neutral/0': '#FCFCFC',
|
||||
'Neutral/5': '#F5F5F5',
|
||||
'Neutral/10': '#F0F0F0',
|
||||
'Neutral/15': '#E9E9E9',
|
||||
'Neutral/20': '#D9D9D9',
|
||||
'Neutral/30': '#BFBFBF',
|
||||
'Neutral/40': '#8C8C8C',
|
||||
'Neutral/50': '#747474',
|
||||
'Neutral/60': '#575757',
|
||||
'Neutral/70': '#454545',
|
||||
'Neutral/80': '#262626',
|
||||
'Neutral/90': '#1F1F1F',
|
||||
'Neutral/100': '#141414',
|
||||
'Neutral/Opacity/White/100': '#FFFFFF',
|
||||
'Neutral/Opacity/White/90': '#FFFFFFE6',
|
||||
'Neutral/Opacity/White/80': '#FFFFFFCC',
|
||||
'Neutral/Opacity/White/70': '#FFFFFFB3',
|
||||
'Neutral/Opacity/White/60': '#FFFFFF99',
|
||||
'Neutral/Opacity/White/50': '#FFFFFF80',
|
||||
'Neutral/Opacity/White/40': '#FFFFFF66',
|
||||
'Neutral/Opacity/White/30': '#FFFFFF4D',
|
||||
'Neutral/Opacity/White/20': '#FFFFFF33',
|
||||
'Neutral/Opacity/White/10': '#FFFFFF1A',
|
||||
'Neutral/Opacity/White/5': '#FFFFFF00',
|
||||
'Neutral/Opacity/White/0': '#FFFFFF00',
|
||||
'Neutral/Opacity/Black/100': '#1F1C1B',
|
||||
'Neutral/Opacity/Black/90': '#1F1C1BE6',
|
||||
'Neutral/Opacity/Black/80': '#1F1C1BCC',
|
||||
'Neutral/Opacity/Black/70': '#1F1C1BB3',
|
||||
'Neutral/Opacity/Black/60': '#1F1C1B99',
|
||||
'Neutral/Opacity/Black/50': '#1F1C1B80',
|
||||
'Neutral/Opacity/Black/40': '#1F1C1B66',
|
||||
'Neutral/Opacity/Black/30': '#1F1C1B4D',
|
||||
'Neutral/Opacity/Black/20': '#1F1C1B33',
|
||||
'Neutral/Opacity/Black/10': '#1F1C1B1A',
|
||||
'Neutral/Opacity/Black/5': '#1F1C1B0D',
|
||||
'Neutral/Opacity/Black/0': '#1F1C1B00',
|
||||
'Margin/Margin-min': 16,
|
||||
'Breakpoints/min-width': 320,
|
||||
'Breakpoints/max-width': 767,
|
||||
'Margin/Margin-max': 16,
|
||||
'Columns/Column': 4,
|
||||
'Gutter/min-width': 16,
|
||||
'Gutter/max-width': 16,
|
||||
'Text size/xs': 18,
|
||||
'Text size/sm': 20,
|
||||
'Text size/xl': 24,
|
||||
'Text size/2xl': 36,
|
||||
'Text size/3xl': 32,
|
||||
'Text size/4xl': 36,
|
||||
'Text size/5xl': 56,
|
||||
'Text size/md': 24,
|
||||
'Font family/Title': 'Brandon Text',
|
||||
'Font family/Body': 'Fira sans',
|
||||
'Font family/Decorative': 'Biro Script Plus',
|
||||
'Font weight/Regular': 400,
|
||||
'Font weight/Regular bold': 450,
|
||||
'Font weight/Medium': 500,
|
||||
'Font weight/Semi Bold': 600,
|
||||
'Font weight/Bold': 700,
|
||||
'Font weight/Extra Bold': 800,
|
||||
'Font weight/Black': 900,
|
||||
'Size/200-12': 12,
|
||||
'Size/250-14': 14,
|
||||
'Size/300-16': 16,
|
||||
'Size/350-18': 18,
|
||||
'Size/400-20': 20,
|
||||
'Size/500-24': 24,
|
||||
'Size/550-26': 26,
|
||||
'Size/600-28': 28,
|
||||
'Size/700-32': 32,
|
||||
'Size/800-36': 36,
|
||||
'Size/900-40': 40,
|
||||
'Size/1100-48': 48,
|
||||
'Size/1300-56': 56,
|
||||
'Size/1500-64': 64,
|
||||
'Line height/xs': 100,
|
||||
'Corner radius/sm': 4,
|
||||
'Border width/sm': 1,
|
||||
'Border width/md': 2,
|
||||
'Border width/lg': 3,
|
||||
'Corner radius/md': 8,
|
||||
'Corner radius/lg': 12,
|
||||
'Corner radius/xl': 16,
|
||||
'Corner radius/rounded': 250,
|
||||
'Space/x025': 2,
|
||||
'Space/x05': 4,
|
||||
'Space/x1': 8,
|
||||
'Space/x15': 12,
|
||||
'Space/x2': 16,
|
||||
'Space/x3': 24,
|
||||
'Space/x4': 32,
|
||||
'Space/x5': 40,
|
||||
'Space/x6': 48,
|
||||
'Space/x7': 56,
|
||||
'Space/x8': 72,
|
||||
'Icon/2xs': 16,
|
||||
'Icon/xs': 20,
|
||||
'Icon/sm': 24,
|
||||
'Icon/md': 32,
|
||||
'Icon/lg': 40,
|
||||
'Icon/xl': 42,
|
||||
'Text size/5xs': 12,
|
||||
'Text size/4xs': 14,
|
||||
'Text size/3xs': 16,
|
||||
'Text size/2xs': 16,
|
||||
'Text size/lg': 24,
|
||||
'BoxShadow-Level 1': '0 0 2 1 rgba(0, 0, 0, 0.1)',
|
||||
'BoxShadow-Level 2': '0 0 4 2 rgba(0, 0, 0, 0.1)',
|
||||
'BoxShadow-Level 3': '0 0 8 3 rgba(0, 0, 0, 0.1)',
|
||||
'BoxShadow-Level 4': '0 0 14 6 rgba(0, 0, 0, 0.1)',
|
||||
}
|
||||
@@ -1,628 +0,0 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
export const colors = {
|
||||
Scandic: {
|
||||
'Scandic-Brand-Scandic-Red': '#cd0921',
|
||||
'Scandic-Brand-Burgundy': '#4d001b',
|
||||
'Scandic-Brand-Pale-Peach': '#f7e1d5',
|
||||
'Scandic-Brand-Dark-Green': '#093021',
|
||||
'Scandic-Brand-Light-Green': '#d2edaf',
|
||||
'Scandic-Brand-Dark-Grey': '#291710',
|
||||
'Scandic-Brand-Warm-White': '#faf6f2',
|
||||
'Scandic-Brand-Light-Blue': '#b5e0ff',
|
||||
'Scandic-Brand-Dark-Blue': '#0d1440',
|
||||
'Scandic-Brand-Pale-Yellow': '#fff0c2',
|
||||
'Scandic-Red-00': '#ffebeb',
|
||||
'Scandic-Red-10': '#f7c1c2',
|
||||
'Scandic-Red-20': '#f79499',
|
||||
'Scandic-Red-30': '#f26b74',
|
||||
'Scandic-Red-40': '#ed4251',
|
||||
'Scandic-Red-50': '#e32034',
|
||||
'Scandic-Red-60': '#cd0921',
|
||||
'Scandic-Red-70': '#ad0015',
|
||||
'Scandic-Red-80': '#8d0011',
|
||||
'Scandic-Red-90': '#6d000d',
|
||||
'Scandic-Red-100': '#4d001b',
|
||||
'Scandic-Peach-00': '#fff3ed',
|
||||
'Scandic-Beige-00': '#faf6f2',
|
||||
'Scandic-Beige-10': '#f2ece6',
|
||||
'Scandic-Beige-20': '#e3d9d1',
|
||||
'Scandic-Beige-30': '#d1c4ba',
|
||||
'Scandic-Beige-40': '#b8a79a',
|
||||
'Scandic-Beige-50': '#9c8a7e',
|
||||
'Scandic-Beige-60': '#806e63',
|
||||
'Scandic-Beige-70': '#6b584d',
|
||||
'Scandic-Beige-80': '#533f35',
|
||||
'Scandic-Beige-90': '#3e2b23',
|
||||
'Scandic-Beige-100': '#291710',
|
||||
'Scandic-Peach-10': '#f7e1d5',
|
||||
'Scandic-Peach-20': '#f4d5c8',
|
||||
'Scandic-Peach-30': '#f0c1b6',
|
||||
'Scandic-Peach-40': '#e9aba3',
|
||||
'Scandic-Peach-50': '#de9490',
|
||||
'Scandic-Peach-60': '#cd797c',
|
||||
'Scandic-Peach-70': '#b05b65',
|
||||
'Scandic-Peach-80': '#8f4350',
|
||||
'Scandic-Peach-90': '#642636',
|
||||
'Scandic-Peach-100': '#4d0f25',
|
||||
'Scandic-Green-00': '#f3fce8',
|
||||
'Scandic-Green-10': '#e1f3ca',
|
||||
'Scandic-Green-20': '#d2edaf',
|
||||
'Scandic-Green-30': '#acdb8a',
|
||||
'Scandic-Green-40': '#7cb865',
|
||||
'Scandic-Green-50': '#539e49',
|
||||
'Scandic-Green-60': '#348337',
|
||||
'Scandic-Green-70': '#256931',
|
||||
'Scandic-Green-80': '#164e29',
|
||||
'Scandic-Green-90': '#093021',
|
||||
'Scandic-Green-100': '#091f16',
|
||||
'Scandic-Blue-00': '#e8f6ff',
|
||||
'Scandic-Blue-10': '#cfebff',
|
||||
'Scandic-Blue-20': '#b5e0ff',
|
||||
'Scandic-Blue-30': '#93c9f5',
|
||||
'Scandic-Blue-40': '#79aee7',
|
||||
'Scandic-Blue-50': '#5b8fd4',
|
||||
'Scandic-Blue-60': '#3f6dbd',
|
||||
'Scandic-Blue-70': '#284ea0',
|
||||
'Scandic-Blue-80': '#18347f',
|
||||
'Scandic-Blue-90': '#0d1f5f',
|
||||
'Scandic-Blue-100': '#0d1440',
|
||||
'Scandic-Yellow-00': '#fff8e3',
|
||||
'Scandic-Yellow-10': '#fff0c2',
|
||||
'Scandic-Yellow-20': '#fade89',
|
||||
'Scandic-Yellow-30': '#f7ce52',
|
||||
'Scandic-Yellow-40': '#edb532',
|
||||
'Scandic-Yellow-50': '#e59515',
|
||||
'Scandic-Yellow-60': '#d17308',
|
||||
'Scandic-Yellow-70': '#a85211',
|
||||
'Scandic-Yellow-80': '#7d370f',
|
||||
'Scandic-Yellow-90': '#4f2313',
|
||||
'Scandic-Yellow-100': '#301508',
|
||||
'Go-Brand-Lavender': '#dcd7ff',
|
||||
'Go-Beige-00': '#faf8f2',
|
||||
'Go-Beige-10': '#f0ede4',
|
||||
'Go-Beige-20': '#e0dcce',
|
||||
'Go-Beige-30': '#c8c4b6',
|
||||
'Go-Beige-40': '#b0aca0',
|
||||
'Go-Beige-50': '#918f83',
|
||||
'Go-Beige-60': '#78766d',
|
||||
'Go-Beige-70': '#63615a',
|
||||
'Go-Beige-80': '#4f4d49',
|
||||
'Go-Beige-90': '#373633',
|
||||
'Go-Beige-100': '#1f1e1d',
|
||||
'Go-Brand-Obsidian': '#2d163a',
|
||||
'Go-Brand-Lemon': '#f5ff73',
|
||||
'Go-Brand-Linen': '#e0dcce',
|
||||
'Go-Brand-Chartreuse': '#85ff52',
|
||||
'Go-Brand-Pine': '#21331f',
|
||||
'Go-Brand-Aqua': '#73fcee',
|
||||
'Go-Brand-Powder-rose': '#ecc8c9',
|
||||
'Go-Brand-Coral': '#fa3737',
|
||||
'UI-Grey-00': '#f9f6f4',
|
||||
'UI-Opacity-White-100': '#ffffff',
|
||||
'UI-Opacity-White-90': '#ffffffe6',
|
||||
'UI-Opacity-White-80': '#ffffffcc',
|
||||
'UI-Opacity-White-70': '#ffffffb3',
|
||||
'UI-Opacity-White-60': '#ffffff99',
|
||||
'UI-Opacity-White-50': '#ffffff80',
|
||||
'UI-Opacity-White-40': '#ffffff66',
|
||||
'UI-Opacity-White-30': '#ffffff4d',
|
||||
'UI-Opacity-White-20': '#ffffff33',
|
||||
'UI-Opacity-White-10': '#ffffff1a',
|
||||
'UI-Opacity-White-0': '#ffffff00',
|
||||
'UI-Opacity-Almost-Black-100': '#1f1c1b',
|
||||
'UI-Opacity-Almost-Black-90': '#1f1c1be6',
|
||||
'UI-Opacity-Almost-Black-80': '#1f1c1bcc',
|
||||
'UI-Opacity-Almost-Black-70': '#1f1c1bb3',
|
||||
'UI-Opacity-Almost-Black-60': '#1f1c1b99',
|
||||
'UI-Opacity-Almost-Black-50': '#1f1c1b80',
|
||||
'UI-Opacity-Almost-Black-40': '#1f1c1b66',
|
||||
'UI-Opacity-Almost-Black-30': '#1f1c1b4d',
|
||||
'UI-Opacity-Almost-Black-20': '#1f1c1b33',
|
||||
'UI-Opacity-Almost-Black-10': '#1f1c1b1a',
|
||||
'UI-Opacity-Almost-Black-0': '#1f1c1b00',
|
||||
'UI-Grey-10': '#ebe8e6',
|
||||
'UI-Grey-20': '#d6d2d0',
|
||||
'UI-Grey-30': '#c2bdba',
|
||||
'UI-Grey-40': '#a8a4a2',
|
||||
'UI-Grey-50': '#8c8987',
|
||||
'UI-Grey-60': '#787472',
|
||||
'UI-Grey-70': '#635f5d',
|
||||
'UI-Grey-80': '#57514e',
|
||||
'UI-Grey-90': '#403937',
|
||||
'UI-Grey-100': '#26201e',
|
||||
'Go-Purple-00': '#f4f2ff',
|
||||
'Go-Purple-10': '#dcd7ff',
|
||||
'Go-Purple-20': '#cabffc',
|
||||
'Go-Purple-30': '#baa7f7',
|
||||
'Go-Purple-40': '#ab8ef0',
|
||||
'Go-Purple-50': '#9c75e6',
|
||||
'Go-Purple-60': '#8c5bd5',
|
||||
'Go-Purple-70': '#733cb2',
|
||||
'Go-Purple-80': '#5e2a8c',
|
||||
'Go-Purple-90': '#451f61',
|
||||
'Go-Purple-100': '#2d163a',
|
||||
'Go-Yellow-00': '#fdffe8',
|
||||
'Go-Yellow-10': '#faffc4',
|
||||
'Go-Yellow-20': '#f8ff9c',
|
||||
'Go-Yellow-30': '#f5ff73',
|
||||
'Go-Yellow-40': '#edea39',
|
||||
'Go-Yellow-50': '#dec614',
|
||||
'Go-Yellow-60': '#ba8d07',
|
||||
'Go-Yellow-70': '#966400',
|
||||
'Go-Yellow-80': '#754403',
|
||||
'Go-Yellow-90': '#572701',
|
||||
'Go-Yellow-100': '#3b1300',
|
||||
'Go-Green-00': '#edffe5',
|
||||
'Go-Green-10': '#cdffb8',
|
||||
'Go-Green-20': '#a7ff82',
|
||||
'Go-Green-30': '#85ff52',
|
||||
'Go-Green-40': '#66e03a',
|
||||
'Go-Green-50': '#45b222',
|
||||
'Go-Green-60': '#2e7f18',
|
||||
'Go-Green-70': '#2a601e',
|
||||
'Go-Green-80': '#26461f',
|
||||
'Go-Green-90': '#21331f',
|
||||
'Go-Green-100': '#162115',
|
||||
},
|
||||
} as const
|
||||
|
||||
export const tokens = {
|
||||
'Base-Background-Primary-Normal': 'Scandic-Beige-00',
|
||||
'Base-Background-Primary-Elevated': 'Scandic-Beige-00',
|
||||
'Base-Surface-Primary-light-Normal': 'UI-Opacity-White-100',
|
||||
'Base-Surface-Primary-dark-Normal': 'Scandic-Peach-10',
|
||||
'Base-Surface-Secondary-light-Normal': 'Scandic-Beige-00',
|
||||
'Base-Surface-Secondary-light-Hover': 'Scandic-Peach-10',
|
||||
'Base-Surface-Secondary-light-Hover-alt': 'Scandic-Peach-20',
|
||||
'Base-Surface-Primary-dark-Hover': 'Scandic-Peach-20',
|
||||
'Base-Surface-Primary-light-Hover': 'UI-Grey-00',
|
||||
'Base-Surface-Primary-light-Hover-alt': 'Scandic-Beige-10',
|
||||
'Base-Surface-Subtle-Normal': 'Scandic-Beige-10',
|
||||
'Base-Surface-Subtle-Hover': 'Scandic-Beige-20',
|
||||
'Base-Text-High-contrast': 'Scandic-Red-100',
|
||||
'Base-Icon-Low-contrast': 'Scandic-Peach-70',
|
||||
'Base-Text-Medium-contrast': 'Scandic-Peach-80',
|
||||
'Base-Text-Accent': 'Scandic-Red-60',
|
||||
'Base-Text-Disabled': 'UI-Grey-40',
|
||||
'Base-Text-Inverted': 'UI-Opacity-White-100',
|
||||
'Base-Border-Normal': 'Scandic-Beige-40',
|
||||
'Base-Border-Hover': 'Scandic-Peach-80',
|
||||
'Base-Border-Subtle': 'Scandic-Beige-20',
|
||||
'Base-Border-Inverted': 'UI-Opacity-White-100',
|
||||
'Base-Button-Primary-Fill-Normal': 'Scandic-Red-60',
|
||||
'Base-Interactive-Surface-Primary-normal': 'Scandic-Red-80',
|
||||
'Base-Interactive-Surface-Secondary-normal': 'Scandic-Green-70',
|
||||
'Base-Interactive-Surface-Tertiary-normal': 'Scandic-Blue-60',
|
||||
'Base-Button-Primary-Fill-Hover': 'Scandic-Red-70',
|
||||
'Base-Button-Primary-Fill-Disabled': 'UI-Grey-20',
|
||||
'Base-Button-Primary-On-Fill-Normal': 'UI-Opacity-White-100',
|
||||
'Base-Button-Primary-On-Fill-Hover': 'UI-Opacity-White-100',
|
||||
'Base-Button-Primary-On-Fill-Disabled': 'UI-Grey-40',
|
||||
'Base-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Base-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Base-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
|
||||
'Base-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
|
||||
'Base-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
|
||||
'Base-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
|
||||
'Base-Button-Secondary-On-Fill-Normal': 'Scandic-Red-100',
|
||||
'Base-Button-Secondary-On-Fill-Hover': 'Scandic-Peach-80',
|
||||
'Base-Button-Secondary-On-Fill-Disabled': 'UI-Grey-40',
|
||||
'Base-Button-Secondary-Border-Normal': 'Scandic-Red-100',
|
||||
'Base-Button-Secondary-Border-Hover': 'Scandic-Peach-80',
|
||||
'Base-Button-Secondary-Border-Disabled': 'UI-Grey-30',
|
||||
'Base-Button-Tertiary-Fill-Normal': 'Scandic-Red-100',
|
||||
'Base-Button-Tertiary-Fill-Hover': 'Scandic-Red-90',
|
||||
'Base-Button-Tertiary-Fill-Disabled': 'UI-Grey-20',
|
||||
'Base-Button-Tertiary-On-Fill-Normal': 'UI-Opacity-White-100',
|
||||
'Base-Button-Tertiary-On-Fill-Hover': 'UI-Opacity-White-100',
|
||||
'Base-Button-Tertiary-On-Fill-Disabled': 'UI-Grey-40',
|
||||
'Base-Button-Tertiary-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Base-Button-Tertiary-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Base-Button-Tertiary-Border-Disabled': 'UI-Opacity-White-0',
|
||||
'Base-Button-Inverted-Fill-Normal': 'UI-Opacity-White-100',
|
||||
'Base-Button-Inverted-Fill-Hover': 'Scandic-Beige-10',
|
||||
'Base-Button-Inverted-Fill-Hover-alt': 'Scandic-Peach-10',
|
||||
'Base-Button-Inverted-Fill-Disabled': 'UI-Grey-20',
|
||||
'Base-Button-Inverted-On-Fill-Normal': 'Scandic-Red-100',
|
||||
'Base-Button-Inverted-On-Fill-Hover': 'Scandic-Red-90',
|
||||
'Base-Button-Inverted-On-Fill-Disabled': 'UI-Grey-40',
|
||||
'Base-Button-Inverted-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Base-Button-Inverted-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Base-Button-Inverted-Border-Disabled': 'UI-Opacity-White-0',
|
||||
'UI-Text-High-contrast': 'UI-Grey-100',
|
||||
'UI-Input-Controls-Surface-Normal': 'UI-Opacity-White-100',
|
||||
'UI-Semantic-Information': 'Scandic-Blue-70',
|
||||
'UI-Semantic-Success': 'Scandic-Green-60',
|
||||
'UI-Semantic-Warning': 'Scandic-Yellow-60',
|
||||
'UI-Semantic-Error': 'Scandic-Red-70',
|
||||
'UI-Input-Controls-Surface-Hover': 'Scandic-Beige-10',
|
||||
'UI-Input-Controls-Surface-Disabled': 'UI-Grey-10',
|
||||
'UI-Input-Controls-Fill-Normal': 'UI-Opacity-White-100',
|
||||
'UI-Input-Controls-Fill-Selected': 'Scandic-Blue-80',
|
||||
'UI-Input-Controls-Fill-Selected-hover': 'Scandic-Blue-70',
|
||||
'UI-Input-Controls-Fill-Disabled': 'UI-Grey-60',
|
||||
'UI-Input-Controls-On-Fill-Normal': 'UI-Opacity-White-100',
|
||||
'UI-Input-Controls-Border-Normal': 'Scandic-Beige-50',
|
||||
'UI-Input-Controls-Border-Hover': 'Scandic-Beige-70',
|
||||
'UI-Input-Controls-Border-Focus': 'Scandic-Blue-80',
|
||||
'UI-Input-Controls-Border-Disabled': 'UI-Grey-40',
|
||||
'UI-Input-Controls-Border-Error': 'Scandic-Red-70',
|
||||
'UI-Input-Controls-Border-KeyboardFocus': 'Scandic-Blue-50',
|
||||
'UI-Text-Medium-contrast': 'UI-Grey-80',
|
||||
'UI-Text-Active': 'Scandic-Blue-90',
|
||||
'UI-Text-Error': 'Scandic-Red-70',
|
||||
'UI-Text-Placeholder': 'UI-Grey-60',
|
||||
'Primary-Light-Surface-Normal': 'Scandic-Peach-10',
|
||||
'Primary-Light-Surface-Hover': 'Scandic-Peach-20',
|
||||
'Primary-Light-On-Surface-Text': 'Scandic-Red-100',
|
||||
'Primary-Light-On-Surface-Accent': 'Scandic-Red-60',
|
||||
'Primary-Light-On-Surface-Divider': 'Scandic-Peach-30',
|
||||
'Primary-Light-On-Surface-Divider-subtle': 'Scandic-Beige-10',
|
||||
'Primary-Light-Button-Primary-Fill-Normal': 'Scandic-Red-100',
|
||||
'Primary-Light-Button-Primary-Fill-Hover': 'Scandic-Red-80',
|
||||
'Primary-Light-Button-Primary-Fill-Disabled': 'UI-Opacity-Almost-Black-10',
|
||||
'Primary-Light-Button-Primary-On-Fill-Normal': 'Scandic-Peach-10',
|
||||
'Primary-Light-Button-Primary-On-Fill-Hover': 'Scandic-Peach-30',
|
||||
'Primary-Light-Button-Primary-On-Fill-Disabled': 'UI-Opacity-Almost-Black-20',
|
||||
'Primary-Light-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Primary-Light-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Primary-Light-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
|
||||
'Primary-Light-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
|
||||
'Primary-Light-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
|
||||
'Primary-Light-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
|
||||
'Primary-Light-Button-Secondary-On-Fill-Normal': 'Scandic-Red-100',
|
||||
'Primary-Light-Button-Secondary-On-Fill-Hover': 'Scandic-Red-80',
|
||||
'Primary-Light-Button-Secondary-On-Fill-Disabled':
|
||||
'UI-Opacity-Almost-Black-20',
|
||||
'Primary-Light-Button-Secondary-Border-Normal': 'Scandic-Red-100',
|
||||
'Primary-Light-Button-Secondary-Border-Hover': 'Scandic-Red-80',
|
||||
'Primary-Light-Button-Secondary-Border-Disabled':
|
||||
'UI-Opacity-Almost-Black-20',
|
||||
'Primary-Dim-Surface-Normal': 'Scandic-Peach-30',
|
||||
'Primary-Dim-Surface-Hover': 'Scandic-Peach-40',
|
||||
'Primary-Dim-On-Surface-Text': 'Scandic-Red-100',
|
||||
'Primary-Dim-On-Surface-Accent': 'Scandic-Peach-80',
|
||||
'Primary-Dim-On-Surface-Divider': 'Scandic-Peach-40',
|
||||
'Primary-Dim-Button-Primary-Fill-Normal': 'Scandic-Red-100',
|
||||
'Primary-Dim-Button-Primary-Fill-Hover': 'Scandic-Red-80',
|
||||
'Primary-Dim-Button-Primary-Fill-Disabled': 'UI-Opacity-Almost-Black-10',
|
||||
'Primary-Dim-Button-Primary-On-Fill-Normal': 'Scandic-Peach-10',
|
||||
'Primary-Dim-Button-Primary-On-Fill-Hover': 'Scandic-Peach-30',
|
||||
'Primary-Dim-Button-Primary-On-Fill-Disabled': 'UI-Opacity-Almost-Black-20',
|
||||
'Primary-Dim-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Primary-Dim-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Primary-Dim-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
|
||||
'Primary-Dim-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
|
||||
'Primary-Dim-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
|
||||
'Primary-Dim-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
|
||||
'Primary-Dim-Button-Secondary-On-Fill-Normal': 'Scandic-Red-100',
|
||||
'Primary-Dim-Button-Secondary-On-Fill-Hover': 'Scandic-Red-80',
|
||||
'Primary-Dim-Button-Secondary-On-Fill-Disabled': 'UI-Opacity-Almost-Black-20',
|
||||
'Primary-Dim-Button-Secondary-Border-Normal': 'Scandic-Red-100',
|
||||
'Primary-Dim-Button-Secondary-Border-Hover': 'Scandic-Red-80',
|
||||
'Primary-Dim-Button-Secondary-Border-Disabled': 'UI-Opacity-Almost-Black-20',
|
||||
'Primary-Strong-Surface-Normal': 'Scandic-Red-60',
|
||||
'Primary-Strong-Surface-Hover': 'Scandic-Red-70',
|
||||
'Primary-Strong-On-Surface-Text': 'UI-Opacity-White-100',
|
||||
'Primary-Strong-On-Surface-Accent': 'Scandic-Peach-10',
|
||||
'Primary-Strong-On-Surface-Divider': 'Scandic-Red-70',
|
||||
'Primary-Strong-Button-Primary-Fill-Normal': 'UI-Opacity-White-100',
|
||||
'Primary-Strong-Button-Primary-Fill-Hover': 'Scandic-Red-00',
|
||||
'Primary-Strong-Button-Primary-Fill-Disabled': 'UI-Opacity-White-20',
|
||||
'Primary-Strong-Button-Primary-On-Fill-Normal': 'Scandic-Red-70',
|
||||
'Primary-Strong-Button-Primary-On-Fill-Hover': 'Scandic-Red-70',
|
||||
'Primary-Strong-Button-Primary-On-Fill-Disabled': 'UI-Opacity-White-20',
|
||||
'Primary-Strong-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Primary-Strong-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Primary-Strong-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
|
||||
'Primary-Strong-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
|
||||
'Primary-Strong-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
|
||||
'Primary-Strong-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
|
||||
'Primary-Strong-Button-Secondary-On-Fill-Normal': 'UI-Opacity-White-100',
|
||||
'Primary-Strong-Button-Secondary-On-Fill-Hover': 'Scandic-Red-00',
|
||||
'Primary-Strong-Button-Secondary-On-Fill-Disabled': 'UI-Opacity-White-20',
|
||||
'Primary-Strong-Button-Secondary-Border-Normal': 'UI-Opacity-White-100',
|
||||
'Primary-Strong-Button-Secondary-Border-Hover': 'Scandic-Peach-00',
|
||||
'Primary-Strong-Button-Secondary-Border-Disabled': 'UI-Opacity-White-20',
|
||||
'Primary-Dark-Surface-Normal': 'Scandic-Red-100',
|
||||
'Primary-Dark-Surface-Hover': 'Scandic-Red-90',
|
||||
'Primary-Dark-On-Surface-Text': 'Scandic-Peach-10',
|
||||
'Primary-Dark-On-Surface-Accent': 'Scandic-Peach-50',
|
||||
'Primary-Dark-On-Surface-Divider': 'Scandic-Peach-80',
|
||||
'Primary-Dark-Button-Primary-Fill-Normal': 'Scandic-Peach-10',
|
||||
'Primary-Dark-Button-Primary-Fill-Hover': 'Scandic-Peach-20',
|
||||
'Primary-Dark-Button-Primary-Fill-Disabled': 'UI-Opacity-White-20',
|
||||
'Primary-Dark-Button-Primary-On-Fill-Normal': 'Scandic-Red-100',
|
||||
'Primary-Dark-Button-Primary-On-Fill-Hover': 'Scandic-Red-80',
|
||||
'Primary-Dark-Button-Primary-On-Fill-Disabled': 'UI-Opacity-White-30',
|
||||
'Primary-Dark-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Primary-Dark-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Primary-Dark-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
|
||||
'Primary-Dark-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
|
||||
'Primary-Dark-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
|
||||
'Primary-Dark-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
|
||||
'Primary-Dark-Button-Secondary-On-Fill-Normal': 'Scandic-Peach-10',
|
||||
'Primary-Dark-Button-Secondary-On-Fill-Hover': 'Scandic-Peach-30',
|
||||
'Primary-Dark-Button-Secondary-On-Fill-Disabled': 'UI-Opacity-White-30',
|
||||
'Primary-Dark-Button-Secondary-Border-Normal': 'Scandic-Peach-10',
|
||||
'Primary-Dark-Button-Secondary-Border-Hover': 'Scandic-Peach-30',
|
||||
'Primary-Dark-Button-Secondary-Border-Disabled': 'UI-Opacity-White-20',
|
||||
'Secondary-Light-Surface-Normal': 'Scandic-Green-20',
|
||||
'Secondary-Dark-Surface-Normal': 'Scandic-Green-90',
|
||||
'Tertiary-Light-Surface-Normal': 'Scandic-Yellow-10',
|
||||
'Tertiary-Light-Surface-Hover': 'Scandic-Yellow-00',
|
||||
'Tertiary-Light-On-Surface-Text': 'Scandic-Blue-100',
|
||||
'Tertiary-Light-On-Surface-Accent': 'Scandic-Yellow-50',
|
||||
'Tertiary-Light-On-Surface-Divider': 'Scandic-Yellow-20',
|
||||
'Tertiary-Light-Button-Primary-Fill-Normal': 'Scandic-Blue-100',
|
||||
'Tertiary-Light-Button-Primary-Fill-Hover': 'Scandic-Blue-90',
|
||||
'Tertiary-Light-Button-Primary-Fill-Disabled': 'UI-Opacity-Almost-Black-10',
|
||||
'Tertiary-Light-Button-Primary-On-Fill-Normal': 'Scandic-Yellow-10',
|
||||
'Tertiary-Light-Button-Primary-On-Fill-Hover': 'Scandic-Yellow-00',
|
||||
'Tertiary-Light-Button-Primary-On-Fill-Disabled':
|
||||
'UI-Opacity-Almost-Black-20',
|
||||
'Tertiary-Light-Button-Primary-Border-Normal': 'Scandic-Yellow-10',
|
||||
'Tertiary-Light-Button-Primary-Border-Hover': 'Scandic-Yellow-00',
|
||||
'Tertiary-Light-Button-Primary-Border-Disabled': 'UI-Opacity-Almost-Black-20',
|
||||
'Tertiary-Light-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
|
||||
'Tertiary-Light-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
|
||||
'Tertiary-Light-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
|
||||
'Tertiary-Light-Button-Secondary-On-Fill-Normal': 'Scandic-Blue-100',
|
||||
'Tertiary-Light-Button-Secondary-On-Fill-Hover': 'Scandic-Blue-90',
|
||||
'Tertiary-Light-Button-Secondary-On-Fill-Disabled':
|
||||
'UI-Opacity-Almost-Black-20',
|
||||
'Tertiary-Light-Button-Secondary-Border-Normal': 'Scandic-Blue-100',
|
||||
'Tertiary-Light-Button-Secondary-Border-Hover': 'Scandic-Blue-90',
|
||||
'Tertiary-Light-Button-Secondary-Border-Disabled':
|
||||
'UI-Opacity-Almost-Black-20',
|
||||
'Secondary-Dark-Surface-Hover': 'Scandic-Green-80',
|
||||
'Secondary-Dark-On-Surface-Text': 'Scandic-Green-20',
|
||||
'Secondary-Dark-On-Surface-Accent': 'Scandic-Green-40',
|
||||
'Secondary-Dark-On-Surface-Divider': 'Scandic-Green-80',
|
||||
'Secondary-Dark-Button-Primary-Fill-Normal': 'Scandic-Green-20',
|
||||
'Secondary-Dark-Button-Primary-Fill-Hover': 'Scandic-Green-30',
|
||||
'Secondary-Dark-Button-Primary-Fill-Disabled': 'UI-Opacity-White-10',
|
||||
'Secondary-Dark-Button-Primary-On-Fill-Normal': 'Scandic-Green-90',
|
||||
'Secondary-Dark-Button-Primary-On-Fill-Hover': 'Scandic-Green-80',
|
||||
'Secondary-Dark-Button-Primary-On-Fill-Disabled': 'UI-Opacity-White-20',
|
||||
'Secondary-Dark-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Secondary-Dark-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Secondary-Dark-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
|
||||
'Secondary-Dark-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
|
||||
'Secondary-Dark-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
|
||||
'Secondary-Dark-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
|
||||
'Secondary-Dark-Button-Secondary-On-Fill-Normal': 'Scandic-Green-20',
|
||||
'Secondary-Dark-Button-Secondary-On-Fill-Hover': 'Scandic-Green-30',
|
||||
'Secondary-Dark-Button-Secondary-On-Fill-Disabled': 'UI-Opacity-White-20',
|
||||
'Secondary-Dark-Button-Secondary-Border-Normal': 'Scandic-Green-20',
|
||||
'Secondary-Dark-Button-Secondary-Border-Hover': 'Scandic-Green-30',
|
||||
'Secondary-Dark-Button-Secondary-Border-Disabled': 'UI-Opacity-White-20',
|
||||
'Secondary-Light-Surface-Hover': 'Scandic-Green-20',
|
||||
'Secondary-Light-On-Surface-Text': 'Scandic-Green-90',
|
||||
'Secondary-Light-On-Surface-Accent': 'Scandic-Green-50',
|
||||
'Secondary-Light-On-Surface-Divider': 'Scandic-Green-30',
|
||||
'Secondary-Light-Button-Primary-Fill-Normal': 'Scandic-Green-90',
|
||||
'Secondary-Light-Button-Primary-Fill-Hover': 'Scandic-Green-80',
|
||||
'Secondary-Light-Button-Primary-Fill-Disabled': 'UI-Opacity-Almost-Black-10',
|
||||
'Secondary-Light-Button-Primary-On-Fill-Normal': 'Scandic-Green-20',
|
||||
'Secondary-Light-Button-Primary-On-Fill-Hover': 'Scandic-Green-30',
|
||||
'Secondary-Light-Button-Primary-On-Fill-Disabled':
|
||||
'UI-Opacity-Almost-Black-20',
|
||||
'Secondary-Light-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Secondary-Light-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Secondary-Light-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
|
||||
'Secondary-Light-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
|
||||
'Secondary-Light-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
|
||||
'Secondary-Light-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
|
||||
'Secondary-Light-Button-Secondary-On-Fill-Normal': 'Scandic-Green-90',
|
||||
'Secondary-Light-Button-Secondary-On-Fill-Hover': 'Scandic-Green-80',
|
||||
'Secondary-Light-Button-Secondary-On-Fill-Disabled':
|
||||
'UI-Opacity-Almost-Black-20',
|
||||
'Secondary-Light-Button-Secondary-Border-Normal': 'Scandic-Green-90',
|
||||
'Secondary-Light-Button-Secondary-Border-Hover': 'Scandic-Green-80',
|
||||
'Secondary-Light-Button-Secondary-Border-Disabled':
|
||||
'UI-Opacity-Almost-Black-20',
|
||||
'Tertiary-Dark-Surface-Normal': 'Scandic-Blue-100',
|
||||
'Tertiary-Dark-Surface-Hover': 'Scandic-Blue-90',
|
||||
'Tertiary-Dark-On-Surface-Text': 'Scandic-Yellow-10',
|
||||
'Tertiary-Dark-On-Surface-Accent': 'Scandic-Blue-40',
|
||||
'Tertiary-Dark-Button-Primary-Fill-Normal': 'Scandic-Yellow-10',
|
||||
'Tertiary-Dark-Button-Primary-Fill-Hover': 'Scandic-Yellow-20',
|
||||
'Tertiary-Dark-Button-Primary-Fill-Disabled': 'UI-Opacity-White-10',
|
||||
'Tertiary-Dark-Button-Primary-On-Fill-Normal': 'Scandic-Blue-100',
|
||||
'Tertiary-Dark-Button-Primary-On-Fill-Hover': 'Scandic-Blue-80',
|
||||
'Tertiary-Dark-Button-Primary-On-Fill-Disabled': 'UI-Opacity-White-20',
|
||||
'Tertiary-Dark-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Tertiary-Dark-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Tertiary-Dark-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
|
||||
'Tertiary-Dark-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
|
||||
'Tertiary-Dark-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
|
||||
'Tertiary-Dark-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
|
||||
'Tertiary-Dark-Button-Secondary-On-Fill-Normal': 'Scandic-Yellow-10',
|
||||
'Tertiary-Dark-Button-Secondary-On-Fill-Hover': 'Scandic-Yellow-20',
|
||||
'Tertiary-Dark-Button-Secondary-On-Fill-Disabled': 'UI-Opacity-White-20',
|
||||
'Tertiary-Dark-Button-Secondary-Border-Normal': 'Scandic-Yellow-10',
|
||||
'Tertiary-Dark-Button-Secondary-Border-Hover': 'Scandic-Yellow-20',
|
||||
'Tertiary-Dark-Button-Secondary-Border-Disabled': 'UI-Opacity-White-20',
|
||||
'Tertiary-Dark-On-Surface-Divider': 'Scandic-Blue-80',
|
||||
'Base-Button-Text-Fill-Normal': 'UI-Opacity-White-0',
|
||||
'Base-Button-Text-Fill-Hover': 'UI-Opacity-White-0',
|
||||
'Base-Button-Text-Fill-Disabled': 'UI-Opacity-White-0',
|
||||
'Base-Button-Text-On-Fill-Normal': 'Scandic-Red-100',
|
||||
'Base-Button-Text-On-Fill-Hover': 'Scandic-Peach-80',
|
||||
'Base-Button-Text-On-Fill-Disabled': 'UI-Grey-40',
|
||||
'Base-Button-Text-Border-Normal': 'UI-Opacity-White-0',
|
||||
'Base-Button-Text-Border-Hover': 'UI-Opacity-White-0',
|
||||
'Base-Button-Text-Border-Disabled': 'UI-Opacity-White-0',
|
||||
} as const
|
||||
|
||||
export const Scandic = {
|
||||
Scandic: {
|
||||
'Scandic-Brand-Scandic-Red': '#cd0921',
|
||||
'Scandic-Brand-Burgundy': '#4d001b',
|
||||
'Scandic-Brand-Pale-Peach': '#f7e1d5',
|
||||
'Scandic-Brand-Dark-Green': '#093021',
|
||||
'Scandic-Brand-Light-Green': '#d2edaf',
|
||||
'Scandic-Brand-Dark-Grey': '#291710',
|
||||
'Scandic-Brand-Warm-White': '#faf6f2',
|
||||
'Scandic-Brand-Light-Blue': '#b5e0ff',
|
||||
'Scandic-Brand-Dark-Blue': '#0d1440',
|
||||
'Scandic-Brand-Pale-Yellow': '#fff0c2',
|
||||
'Scandic-Red-00': '#ffebeb',
|
||||
'Scandic-Red-10': '#f7c1c2',
|
||||
'Scandic-Red-20': '#f79499',
|
||||
'Scandic-Red-30': '#f26b74',
|
||||
'Scandic-Red-40': '#ed4251',
|
||||
'Scandic-Red-50': '#e32034',
|
||||
'Scandic-Red-60': '#cd0921',
|
||||
'Scandic-Red-70': '#ad0015',
|
||||
'Scandic-Red-80': '#8d0011',
|
||||
'Scandic-Red-90': '#6d000d',
|
||||
'Scandic-Red-100': '#4d001b',
|
||||
'Scandic-Peach-00': '#fff3ed',
|
||||
'Scandic-Beige-00': '#faf6f2',
|
||||
'Scandic-Beige-10': '#f2ece6',
|
||||
'Scandic-Beige-20': '#e3d9d1',
|
||||
'Scandic-Beige-30': '#d1c4ba',
|
||||
'Scandic-Beige-40': '#b8a79a',
|
||||
'Scandic-Beige-50': '#9c8a7e',
|
||||
'Scandic-Beige-60': '#806e63',
|
||||
'Scandic-Beige-70': '#6b584d',
|
||||
'Scandic-Beige-80': '#533f35',
|
||||
'Scandic-Beige-90': '#3e2b23',
|
||||
'Scandic-Beige-100': '#291710',
|
||||
'Scandic-Peach-10': '#f7e1d5',
|
||||
'Scandic-Peach-20': '#f4d5c8',
|
||||
'Scandic-Peach-30': '#f0c1b6',
|
||||
'Scandic-Peach-40': '#e9aba3',
|
||||
'Scandic-Peach-50': '#de9490',
|
||||
'Scandic-Peach-60': '#cd797c',
|
||||
'Scandic-Peach-70': '#b05b65',
|
||||
'Scandic-Peach-80': '#8f4350',
|
||||
'Scandic-Peach-90': '#642636',
|
||||
'Scandic-Peach-100': '#4d0f25',
|
||||
'Scandic-Green-00': '#f3fce8',
|
||||
'Scandic-Green-10': '#e1f3ca',
|
||||
'Scandic-Green-20': '#d2edaf',
|
||||
'Scandic-Green-30': '#acdb8a',
|
||||
'Scandic-Green-40': '#7cb865',
|
||||
'Scandic-Green-50': '#539e49',
|
||||
'Scandic-Green-60': '#348337',
|
||||
'Scandic-Green-70': '#256931',
|
||||
'Scandic-Green-80': '#164e29',
|
||||
'Scandic-Green-90': '#093021',
|
||||
'Scandic-Green-100': '#091f16',
|
||||
'Scandic-Blue-00': '#e8f6ff',
|
||||
'Scandic-Blue-10': '#cfebff',
|
||||
'Scandic-Blue-20': '#b5e0ff',
|
||||
'Scandic-Blue-30': '#93c9f5',
|
||||
'Scandic-Blue-40': '#79aee7',
|
||||
'Scandic-Blue-50': '#5b8fd4',
|
||||
'Scandic-Blue-60': '#3f6dbd',
|
||||
'Scandic-Blue-70': '#284ea0',
|
||||
'Scandic-Blue-80': '#18347f',
|
||||
'Scandic-Blue-90': '#0d1f5f',
|
||||
'Scandic-Blue-100': '#0d1440',
|
||||
'Scandic-Yellow-00': '#fff8e3',
|
||||
'Scandic-Yellow-10': '#fff0c2',
|
||||
'Scandic-Yellow-20': '#fade89',
|
||||
'Scandic-Yellow-30': '#f7ce52',
|
||||
'Scandic-Yellow-40': '#edb532',
|
||||
'Scandic-Yellow-50': '#e59515',
|
||||
'Scandic-Yellow-60': '#d17308',
|
||||
'Scandic-Yellow-70': '#a85211',
|
||||
'Scandic-Yellow-80': '#7d370f',
|
||||
'Scandic-Yellow-90': '#4f2313',
|
||||
'Scandic-Yellow-100': '#301508',
|
||||
},
|
||||
Go: {
|
||||
'Go-Brand-Lavender': '#dcd7ff',
|
||||
'Go-Beige-00': '#faf8f2',
|
||||
'Go-Beige-10': '#f0ede4',
|
||||
'Go-Beige-20': '#e0dcce',
|
||||
'Go-Beige-30': '#c8c4b6',
|
||||
'Go-Beige-40': '#b0aca0',
|
||||
'Go-Beige-50': '#918f83',
|
||||
'Go-Beige-60': '#78766d',
|
||||
'Go-Beige-70': '#63615a',
|
||||
'Go-Beige-80': '#4f4d49',
|
||||
'Go-Beige-90': '#373633',
|
||||
'Go-Beige-100': '#1f1e1d',
|
||||
'Go-Brand-Obsidian': '#2d163a',
|
||||
'Go-Brand-Lemon': '#f5ff73',
|
||||
'Go-Brand-Linen': '#e0dcce',
|
||||
'Go-Brand-Chartreuse': '#85ff52',
|
||||
'Go-Brand-Pine': '#21331f',
|
||||
'Go-Brand-Aqua': '#73fcee',
|
||||
'Go-Brand-Powder-rose': '#ecc8c9',
|
||||
'Go-Brand-Coral': '#fa3737',
|
||||
'Go-Purple-00': '#f4f2ff',
|
||||
'Go-Purple-10': '#dcd7ff',
|
||||
'Go-Purple-20': '#cabffc',
|
||||
'Go-Purple-30': '#baa7f7',
|
||||
'Go-Purple-40': '#ab8ef0',
|
||||
'Go-Purple-50': '#9c75e6',
|
||||
'Go-Purple-60': '#8c5bd5',
|
||||
'Go-Purple-70': '#733cb2',
|
||||
'Go-Purple-80': '#5e2a8c',
|
||||
'Go-Purple-90': '#451f61',
|
||||
'Go-Purple-100': '#2d163a',
|
||||
'Go-Yellow-00': '#fdffe8',
|
||||
'Go-Yellow-10': '#faffc4',
|
||||
'Go-Yellow-20': '#f8ff9c',
|
||||
'Go-Yellow-30': '#f5ff73',
|
||||
'Go-Yellow-40': '#edea39',
|
||||
'Go-Yellow-50': '#dec614',
|
||||
'Go-Yellow-60': '#ba8d07',
|
||||
'Go-Yellow-70': '#966400',
|
||||
'Go-Yellow-80': '#754403',
|
||||
'Go-Yellow-90': '#572701',
|
||||
'Go-Yellow-100': '#3b1300',
|
||||
'Go-Green-00': '#edffe5',
|
||||
'Go-Green-10': '#cdffb8',
|
||||
'Go-Green-20': '#a7ff82',
|
||||
'Go-Green-30': '#85ff52',
|
||||
'Go-Green-40': '#66e03a',
|
||||
'Go-Green-50': '#45b222',
|
||||
'Go-Green-60': '#2e7f18',
|
||||
'Go-Green-70': '#2a601e',
|
||||
'Go-Green-80': '#26461f',
|
||||
'Go-Green-90': '#21331f',
|
||||
'Go-Green-100': '#162115',
|
||||
},
|
||||
UI: {
|
||||
'UI-Grey-00': '#f9f6f4',
|
||||
'UI-Opacity-White-100': '#ffffff',
|
||||
'UI-Opacity-White-90': '#ffffffe6',
|
||||
'UI-Opacity-White-80': '#ffffffcc',
|
||||
'UI-Opacity-White-70': '#ffffffb3',
|
||||
'UI-Opacity-White-60': '#ffffff99',
|
||||
'UI-Opacity-White-50': '#ffffff80',
|
||||
'UI-Opacity-White-40': '#ffffff66',
|
||||
'UI-Opacity-White-30': '#ffffff4d',
|
||||
'UI-Opacity-White-20': '#ffffff33',
|
||||
'UI-Opacity-White-10': '#ffffff1a',
|
||||
'UI-Opacity-White-0': '#ffffff00',
|
||||
'UI-Opacity-Almost-Black-100': '#1f1c1b',
|
||||
'UI-Opacity-Almost-Black-90': '#1f1c1be6',
|
||||
'UI-Opacity-Almost-Black-80': '#1f1c1bcc',
|
||||
'UI-Opacity-Almost-Black-70': '#1f1c1bb3',
|
||||
'UI-Opacity-Almost-Black-60': '#1f1c1b99',
|
||||
'UI-Opacity-Almost-Black-50': '#1f1c1b80',
|
||||
'UI-Opacity-Almost-Black-40': '#1f1c1b66',
|
||||
'UI-Opacity-Almost-Black-30': '#1f1c1b4d',
|
||||
'UI-Opacity-Almost-Black-20': '#1f1c1b33',
|
||||
'UI-Opacity-Almost-Black-10': '#1f1c1b1a',
|
||||
'UI-Opacity-Almost-Black-0': '#1f1c1b00',
|
||||
'UI-Grey-10': '#ebe8e6',
|
||||
'UI-Grey-20': '#d6d2d0',
|
||||
'UI-Grey-30': '#c2bdba',
|
||||
'UI-Grey-40': '#a8a4a2',
|
||||
'UI-Grey-50': '#8c8987',
|
||||
'UI-Grey-60': '#787472',
|
||||
'UI-Grey-70': '#635f5d',
|
||||
'UI-Grey-80': '#57514e',
|
||||
'UI-Grey-90': '#403937',
|
||||
'UI-Grey-100': '#26201e',
|
||||
},
|
||||
} as const
|
||||
371
packages/design-system/lib/styles/downtown-camper.css
Normal file
371
packages/design-system/lib/styles/downtown-camper.css
Normal file
@@ -0,0 +1,371 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
.downtown-camper {
|
||||
/* Values */
|
||||
--Body-Lead-text-Font-fallback: sans-serif;
|
||||
--Body-Lead-text-Letter-spacing: 0.2px;
|
||||
--Body-Paragraph-Font-fallback: sans-serif;
|
||||
--Body-Paragraph-Letter-spacing: 0.19px;
|
||||
--Body-Supporting-text-Font-fallback: sans-serif;
|
||||
--Body-Supporting-text-Letter-spacing: 0.2px;
|
||||
--Body-Underline-md-Font-fallback: sans-serif;
|
||||
--Body-Underline-md-Letter-spacing: 0.19px;
|
||||
--Body-Underline-sm-Font-fallback: sans-serif;
|
||||
--Body-Underline-sm-Letter-spacing: 0.2px;
|
||||
--Component-Button-Brand-Primary-Hover: #915836;
|
||||
--Component-Button-Brand-Secondary-Border-Hover-inverted: #f4ebe7;
|
||||
--Component-Button-Brand-Tertiary-Hover: #4d5448;
|
||||
--Component-Button-Inverted-Hover: #f2f2f2;
|
||||
--Component-Button-Inverted-On-fill-Hover: #915836;
|
||||
--Component-Button-Muted-Border-Hover: #ffffff30;
|
||||
--Font-family-Downtown-Camper-Body: 'Fira sans';
|
||||
--Font-family-Downtown-Camper-Decorative: 'Gotham';
|
||||
--Font-family-Downtown-Camper-Title: 'Gotham';
|
||||
--Label-Font-fallback: sans-serif;
|
||||
--Label-Letter-spacing: 0.17px;
|
||||
--Link-md-Font-fallback: sans-serif;
|
||||
--Link-md-Letter-spacing: 0.19px;
|
||||
--Link-sm-Font-fallback: sans-serif;
|
||||
--Link-sm-Letter-spacing: 0.2px;
|
||||
--Signature-Downtown-Camper-Lunar-green-0: #f3f4f1;
|
||||
--Signature-Downtown-Camper-Lunar-green-100: #191d16;
|
||||
--Signature-Downtown-Camper-Lunar-green-10: #e4e7e0;
|
||||
--Signature-Downtown-Camper-Lunar-green-20: #ccd2c4;
|
||||
--Signature-Downtown-Camper-Lunar-green-30: #acb6a0;
|
||||
--Signature-Downtown-Camper-Lunar-green-40: #8e9b80;
|
||||
--Signature-Downtown-Camper-Lunar-green-50: #717f63;
|
||||
--Signature-Downtown-Camper-Lunar-green-60: #58644c;
|
||||
--Signature-Downtown-Camper-Lunar-green-70: #454e3d;
|
||||
--Signature-Downtown-Camper-Lunar-green-80: #3c4336;
|
||||
--Signature-Downtown-Camper-Lunar-green-90: #33382f;
|
||||
--Signature-Downtown-Camper-Quicksand-0: #fbf7f5;
|
||||
--Signature-Downtown-Camper-Quicksand-100: #35211a;
|
||||
--Signature-Downtown-Camper-Quicksand-10: #f6edea;
|
||||
--Signature-Downtown-Camper-Quicksand-20: #f0ded8;
|
||||
--Signature-Downtown-Camper-Quicksand-30: #e4c7bd;
|
||||
--Signature-Downtown-Camper-Quicksand-40: #d2a697;
|
||||
--Signature-Downtown-Camper-Quicksand-50: #c69382;
|
||||
--Signature-Downtown-Camper-Quicksand-60: #a96d59;
|
||||
--Signature-Downtown-Camper-Quicksand-70: #8d5948;
|
||||
--Signature-Downtown-Camper-Quicksand-80: #764c3e;
|
||||
--Signature-Downtown-Camper-Quicksand-90: #644338;
|
||||
--Signature-Downtown-Camper-Russet-0: #fcf9ee;
|
||||
--Signature-Downtown-Camper-Russet-100: #3c1d0c;
|
||||
--Signature-Downtown-Camper-Russet-10: #f6eecf;
|
||||
--Signature-Downtown-Camper-Russet-20: #ecdc9b;
|
||||
--Signature-Downtown-Camper-Russet-30: #e3c666;
|
||||
--Signature-Downtown-Camper-Russet-40: #dcb143;
|
||||
--Signature-Downtown-Camper-Russet-50: #d3952d;
|
||||
--Signature-Downtown-Camper-Russet-60: #bb7524;
|
||||
--Signature-Downtown-Camper-Russet-70: #9b5622;
|
||||
--Signature-Downtown-Camper-Russet-80: #834722;
|
||||
--Signature-Downtown-Camper-Russet-90: #69391e;
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff;
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-1-OnSurface-Default: #ffffff;
|
||||
--Surface-Brand-Primary-2-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-2-OnSurface-Default: #ffffff;
|
||||
--Surface-Brand-Primary-3-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-3-OnSurface-Default: #ffffff;
|
||||
--Surface-Primary-Hover-Light: #e6e5e5;
|
||||
--Surface-Primary-Hover: #f2f2f2;
|
||||
--Surface-Secondary-Hover: #e4e4e4;
|
||||
--Surface-UI-Fill-Active-Hover: #ffffff;
|
||||
--Tag-Font-fallback: sans-serif;
|
||||
--Tag-Letter-spacing: 0.06px;
|
||||
--Tag-Text-Transform: unset;
|
||||
--Title-Decorative-lg-Font-fallback: sans-serif;
|
||||
--Title-Decorative-lg-Letter-spacing: 0.05px;
|
||||
--Title-Decorative-lg-Text-Transform: uppercase;
|
||||
--Title-Decorative-md-Font-fallback: sans-serif;
|
||||
--Title-Decorative-md-Letter-spacing: 0.19px;
|
||||
--Title-Decorative-md-Text-Transform: uppercase;
|
||||
--Title-Overline-sm-Font-fallback: sans-serif;
|
||||
--Title-Overline-sm-Letter-spacing: 0.21px;
|
||||
--Title-Overline-sm-Text-Transform: uppercase;
|
||||
--Title-Subtitle-lg-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-lg-Letter-spacing: 0.24px;
|
||||
--Title-Subtitle-md-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-md-Letter-spacing: 0.2px;
|
||||
--Title-lg-Font-fallback: sans-serif;
|
||||
--Title-lg-Letter-spacing: 0.12px;
|
||||
--Title-lg-Text-Transform: unset;
|
||||
--Title-md-Font-fallback: sans-serif;
|
||||
--Title-md-Letter-spacing: 0.09px;
|
||||
--Title-md-LowCase-Font-fallback: sans-serif;
|
||||
--Title-md-LowCase-Letter-spacing: 0.09px;
|
||||
--Title-md-LowCase-Text-Transform: unset;
|
||||
--Title-md-Text-Transform: unset;
|
||||
--Title-sm-Font-fallback: sans-serif;
|
||||
--Title-sm-Letter-spacing: 0.07px;
|
||||
--Title-sm-LowCase-Font-fallback: sans-serif;
|
||||
--Title-sm-LowCase-Letter-spacing: 0.07px;
|
||||
--Title-sm-LowCase-Text-Transform: unset;
|
||||
--Title-sm-Text-Transform: unset;
|
||||
--Title-xs-Font-fallback: sans-serif;
|
||||
--Title-xs-Letter-spacing: 0.12px;
|
||||
--Title-xs-Text-Transform: unset;
|
||||
--Utilities-Gradients-10: #3c43361a;
|
||||
|
||||
/* Aliases */
|
||||
--Background-Primary: var(--Neutral-0);
|
||||
--Background-Secondary: var(--Neutral-Opacity-White-100);
|
||||
--Body-Lead-text-Font-family: var(--Font-family-Downtown-Camper-Body);
|
||||
--Body-Lead-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Lead-text-Size: var(--Impl-Text-size-xs);
|
||||
--Body-Paragraph-Font-family: var(--Font-family-Downtown-Camper-Body);
|
||||
--Body-Paragraph-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Paragraph-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Paragraph-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Supporting-text-Font-family: var(--Font-family-Downtown-Camper-Body);
|
||||
--Body-Supporting-text-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Supporting-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Supporting-text-Size: var(--Impl-Text-size-4xs);
|
||||
--Body-Underline-md-Font-family: var(--Font-family-Downtown-Camper-Body);
|
||||
--Body-Underline-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Underline-sm-Font-family: var(--Font-family-Downtown-Camper-Body);
|
||||
--Body-Underline-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Border-Default: var(--Neutral-20);
|
||||
--Border-Divider-Accent: var(--Neutral-30);
|
||||
--Border-Divider-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Brand-OnPrimary-1-Secondary: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Border-Divider-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Default: var(--Neutral-20);
|
||||
--Border-Divider-Subtle: var(--Neutral-15);
|
||||
--Border-Intense: var(--Neutral-30);
|
||||
--Border-Interactive-Default: var(--Neutral-30);
|
||||
--Border-Interactive-Disabled: var(--Neutral-30);
|
||||
--Border-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Border-Interactive-Focus: var(--Neutral-80);
|
||||
--Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
|
||||
--Border-Interactive-Selected: var(--Neutral-80);
|
||||
--Border-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Primary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Primary-Default: var(
|
||||
--Signature-Downtown-Camper-Russet-80
|
||||
);
|
||||
--Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Primary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Primary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Primary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Default: var(
|
||||
--Signature-Downtown-Camper-Russet-80
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Disabled: var(
|
||||
--Neutral-Opacity-Black-10
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Hover: var(
|
||||
--Signature-Downtown-Camper-Russet-70
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Secondary-Hover-Inverted: var(
|
||||
--Signature-Downtown-Camper-Lunar-green-80
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Secondary-On-fill-Default: var(
|
||||
--Signature-Downtown-Camper-Russet-80
|
||||
);
|
||||
--Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Secondary-On-fill-Hover: var(
|
||||
--Signature-Downtown-Camper-Russet-70
|
||||
);
|
||||
--Component-Button-Brand-Secondary-On-fill-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Hover: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Default: var(
|
||||
--Signature-Downtown-Camper-Lunar-green-80
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
|
||||
--Component-Button-Inverted-Hover-Inverted: var(
|
||||
--Signature-Downtown-Camper-Lunar-green-80
|
||||
);
|
||||
--Component-Button-Inverted-On-fill-Default: var(
|
||||
--Signature-Downtown-Camper-Russet-80
|
||||
);
|
||||
--Component-Button-Inverted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Inverted-On-fill-Hover-inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Disabled-inverted: var(--Neutral-20);
|
||||
--Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5);
|
||||
--Component-Button-Muted-Hover: var(--Neutral-Opacity-White-5);
|
||||
--Component-Button-Muted-On-fill-Default: var(--Neutral-90);
|
||||
--Component-Button-Muted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Muted-On-fill-Hover-Inverted: var(
|
||||
--Signature-Downtown-Camper-Russet-70
|
||||
);
|
||||
--Component-Button-Muted-On-fill-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Icon-Accent: var(--Signature-Downtown-Camper-Lunar-green-50);
|
||||
--Icon-Default: var(--Neutral-60);
|
||||
--Icon-Feedback-Error: var(--Scandic-Red-70);
|
||||
--Icon-Feedback-Information: var(--Scandic-Blue-70);
|
||||
--Icon-Feedback-Neutral: var(--Neutral-60);
|
||||
--Icon-Feedback-Success: var(--Scandic-Green-60);
|
||||
--Icon-Feedback-Warning: var(--Scandic-Yellow-60);
|
||||
--Icon-Intense: var(--Neutral-90);
|
||||
--Icon-Interactive-Default: var(--Neutral-90);
|
||||
--Icon-Interactive-Disabled: var(--Neutral-30);
|
||||
--Icon-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Icon-Interactive-Secondary: var(--Signature-Downtown-Camper-Russet-80);
|
||||
--Icon-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Label-Font-family: var(--Font-family-Downtown-Camper-Body);
|
||||
--Label-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Label-Font-weight: var(--Font-weight-Regular);
|
||||
--Label-Size: var(--Impl-Text-size-5xs);
|
||||
--Link-md-Font-family: var(--Font-family-Downtown-Camper-Body);
|
||||
--Link-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Link-sm-Font-family: var(--Font-family-Downtown-Camper-Body);
|
||||
--Link-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Overlay-10: var(--Neutral-Opacity-Black-10);
|
||||
--Overlay-20: var(--Neutral-Opacity-Black-20);
|
||||
--Overlay-40: var(--Neutral-Opacity-Black-40);
|
||||
--Overlay-60: var(--Neutral-Opacity-Black-60);
|
||||
--Overlay-80: var(--Neutral-Opacity-Black-80);
|
||||
--Overlay-90: var(--Neutral-Opacity-Black-90);
|
||||
--Surface-Accent-1: var(--Signature-Downtown-Camper-Quicksand-60);
|
||||
--Surface-Accent-2: var(--Scandic-Blue-60);
|
||||
--Surface-Accent-3: var(--Signature-Downtown-Camper-Lunar-green-70);
|
||||
--Surface-Accent-4: var(--Signature-Downtown-Camper-Russet-50);
|
||||
--Surface-Accent-5: var(--Scandic-Blue-80);
|
||||
--Surface-Brand-Accent-Default: var(--Signature-Downtown-Camper-Russet-50);
|
||||
--Surface-Brand-Primary-1-Default: var(--Signature-Downtown-Camper-Russet-80);
|
||||
--Surface-Brand-Primary-2-Default: var(--Signature-Downtown-Camper-Russet-80);
|
||||
--Surface-Brand-Primary-3-Default: var(
|
||||
--Signature-Downtown-Camper-Lunar-green-80
|
||||
);
|
||||
--Surface-Feedback-Error-Accent: var(--Scandic-Red-70);
|
||||
--Surface-Feedback-Error: var(--Scandic-Red-00);
|
||||
--Surface-Feedback-Information-Accent: var(--Scandic-Blue-70);
|
||||
--Surface-Feedback-Information: var(--Scandic-Blue-00);
|
||||
--Surface-Feedback-Neutral-Accent: var(--Neutral-50);
|
||||
--Surface-Feedback-Neutral: var(--Neutral-15);
|
||||
--Surface-Feedback-Succes-Accent: var(--Scandic-Green-60);
|
||||
--Surface-Feedback-Succes: var(--Scandic-Green-00);
|
||||
--Surface-Feedback-Warning--Light: var(--Scandic-Yellow-00);
|
||||
--Surface-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
|
||||
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-Primary-Disabled: var(--Neutral-15);
|
||||
--Surface-Primary-Hover-Accent: var(--Neutral-15);
|
||||
--Surface-Primary-OnSurface-Default: var(--Neutral-5);
|
||||
--Surface-Secondary-Default: var(--Neutral-10);
|
||||
--Surface-Secondary-Secondary: var(--Neutral-10);
|
||||
--Surface-UI-Fill-Active: var(--Neutral-80);
|
||||
--Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-UI-Fill-Disabled: var(--Neutral-15);
|
||||
--Surface-UI-Fill-Intense: var(--Neutral-80);
|
||||
--Tag-Font-family: var(--Font-family-Downtown-Camper-Title);
|
||||
--Tag-Font-weight: var(--Font-weight-Regular);
|
||||
--Tag-Size: var(--Impl-Text-size-5xs);
|
||||
--Text-Accent-Primary: var(--Signature-Downtown-Camper-Russet-80);
|
||||
--Text-Accent-Secondary: var(--Neutral-50);
|
||||
--Text-Brand-OnAccent-Accent: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnAccent-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnAccent-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-1-Accent: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-1-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Accent: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Accent: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Default: var(--Neutral-90);
|
||||
--Text-Heading: var(--Neutral-90);
|
||||
--Text-Interactive-Default: var(--Neutral-90);
|
||||
--Text-Interactive-Disabled: var(--Neutral-40);
|
||||
--Text-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Text-Interactive-Focus: var(--Neutral-80);
|
||||
--Text-Interactive-Hover-Secondary: var(
|
||||
--Signature-Downtown-Camper-Russet-60
|
||||
);
|
||||
--Text-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Text-Interactive-Secondary: var(--Signature-Downtown-Camper-Russet-80);
|
||||
--Text-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Text-Secondary: var(--Neutral-60);
|
||||
--Text-Tertiary: var(--Neutral-50);
|
||||
--Title-Decorative-lg-Font-family: var(
|
||||
--Font-family-Downtown-Camper-Decorative
|
||||
);
|
||||
--Title-Decorative-lg-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Decorative-lg-Size: var(--Impl-Text-size-xs);
|
||||
--Title-Decorative-md-Font-family: var(
|
||||
--Font-family-Downtown-Camper-Decorative
|
||||
);
|
||||
--Title-Decorative-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Decorative-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Title-Overline-sm-Font-family: var(--Font-family-Downtown-Camper-Title);
|
||||
--Title-Overline-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Overline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Title-Subtitle-lg-Font-family: var(--Font-family-Downtown-Camper-Body);
|
||||
--Title-Subtitle-lg-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-lg-Size: var(--Impl-Text-size-sm);
|
||||
--Title-Subtitle-md-Font-family: var(--Font-family-Downtown-Camper-Body);
|
||||
--Title-Subtitle-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-md-Size: var(--Impl-Text-size-xs);
|
||||
--Title-lg-Font-family: var(--Font-family-Downtown-Camper-Title);
|
||||
--Title-lg-Font-weight: var(--Font-weight-Black);
|
||||
--Title-lg-Size: var(--Impl-Text-size-4xl);
|
||||
--Title-md-Font-family: var(--Font-family-Downtown-Camper-Title);
|
||||
--Title-md-Font-weight: var(--Font-weight-Black);
|
||||
--Title-md-LowCase-Font-family: var(--Font-family-Downtown-Camper-Title);
|
||||
--Title-md-LowCase-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-md-LowCase-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-md-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-sm-Font-family: var(--Font-family-Downtown-Camper-Title);
|
||||
--Title-sm-Font-weight: var(--Font-weight-Black);
|
||||
--Title-sm-LowCase-Font-family: var(--Font-family-Downtown-Camper-Title);
|
||||
--Title-sm-LowCase-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-sm-LowCase-Size: var(--Impl-Text-size-lg);
|
||||
--Title-sm-Size: var(--Impl-Text-size-lg);
|
||||
--Title-xs-Font-family: var(--Font-family-Downtown-Camper-Title);
|
||||
--Title-xs-Font-weight: var(--Font-weight-Black);
|
||||
--Title-xs-Size: var(--Impl-Text-size-sm);
|
||||
}
|
||||
292
packages/design-system/lib/styles/downtown-camper.js
Normal file
292
packages/design-system/lib/styles/downtown-camper.js
Normal file
@@ -0,0 +1,292 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
export const theme = {
|
||||
'Signature/Downtown Camper/Lunar green/0': '#F3F4F1',
|
||||
'Signature/Downtown Camper/Lunar green/10': '#E4E7E0',
|
||||
'Signature/Downtown Camper/Lunar green/20': '#CCD2C4',
|
||||
'Signature/Downtown Camper/Lunar green/30': '#ACB6A0',
|
||||
'Signature/Downtown Camper/Lunar green/40': '#8E9B80',
|
||||
'Signature/Downtown Camper/Lunar green/50': '#717F63',
|
||||
'Signature/Downtown Camper/Lunar green/60': '#58644C',
|
||||
'Signature/Downtown Camper/Lunar green/70': '#454E3D',
|
||||
'Signature/Downtown Camper/Lunar green/80': '#3C4336',
|
||||
'Signature/Downtown Camper/Lunar green/90': '#33382F',
|
||||
'Signature/Downtown Camper/Lunar green/100': '#191D16',
|
||||
'Signature/Downtown Camper/Russet/0': '#FCF9EE',
|
||||
'Signature/Downtown Camper/Russet/10': '#F6EECF',
|
||||
'Signature/Downtown Camper/Russet/20': '#ECDC9B',
|
||||
'Signature/Downtown Camper/Russet/30': '#E3C666',
|
||||
'Signature/Downtown Camper/Russet/40': '#DCB143',
|
||||
'Signature/Downtown Camper/Russet/50': '#D3952D',
|
||||
'Signature/Downtown Camper/Russet/60': '#BB7524',
|
||||
'Signature/Downtown Camper/Russet/70': '#9B5622',
|
||||
'Signature/Downtown Camper/Russet/80': '#834722',
|
||||
'Signature/Downtown Camper/Russet/90': '#69391E',
|
||||
'Signature/Downtown Camper/Russet/100': '#3C1D0C',
|
||||
'Signature/Downtown Camper/Quicksand/0': '#FBF7F5',
|
||||
'Signature/Downtown Camper/Quicksand/10': '#F6EDEA',
|
||||
'Signature/Downtown Camper/Quicksand/20': '#F0DED8',
|
||||
'Signature/Downtown Camper/Quicksand/30': '#E4C7BD',
|
||||
'Signature/Downtown Camper/Quicksand/40': '#D2A697',
|
||||
'Signature/Downtown Camper/Quicksand/50': '#C69382',
|
||||
'Signature/Downtown Camper/Quicksand/60': '#A96D59',
|
||||
'Signature/Downtown Camper/Quicksand/70': '#8D5948',
|
||||
'Signature/Downtown Camper/Quicksand/80': '#764C3E',
|
||||
'Signature/Downtown Camper/Quicksand/90': '#644338',
|
||||
'Signature/Downtown Camper/Quicksand/100': '#35211A',
|
||||
'Title/lg/Letter spacing': 0.12,
|
||||
'Title/lg/Font fallback': 'sans-serif',
|
||||
'Title/lg/Text-Transform': 'unset',
|
||||
'Title/md/Letter spacing': 0.09,
|
||||
'Title/md/Font fallback': 'sans-serif',
|
||||
'Title/sm/Letter spacing': 0.07,
|
||||
'Title/sm/Font fallback': 'sans-serif',
|
||||
'Title/sm/Text-Transform': 'unset',
|
||||
'Title/Decorative/lg/Letter spacing': 0.05,
|
||||
'Title/Decorative/lg/Font fallback': 'sans-serif',
|
||||
'Title/Decorative/lg/Text-Transform': 'uppercase',
|
||||
'Title/Decorative/md/Letter spacing': 0.19,
|
||||
'Title/Decorative/md/Font fallback': 'sans-serif',
|
||||
'Title/Decorative/md/Text-Transform': 'uppercase',
|
||||
'Title/Subtitle/lg/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/lg/Letter spacing': 0.24,
|
||||
'Title/Subtitle/md/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/md/Letter spacing': 0.2,
|
||||
'Title/Overline/sm/Letter spacing': 0.21,
|
||||
'Title/Overline/sm/Font fallback': 'sans-serif',
|
||||
'Title/Overline/sm/Text-Transform': 'uppercase',
|
||||
'Title/sm/LowCase/Letter spacing': 0.07,
|
||||
'Title/sm/LowCase/Font fallback': 'sans-serif',
|
||||
'Title/sm/LowCase/Text-Transform': 'unset',
|
||||
'Title/xs/Letter spacing': 0.12,
|
||||
'Title/xs/Font fallback': 'sans-serif',
|
||||
'Title/xs/Text-Transform': 'unset',
|
||||
'Title/md/Text-Transform': 'unset',
|
||||
'Title/md/LowCase/Letter spacing': 0.09,
|
||||
'Title/md/LowCase/Font fallback': 'sans-serif',
|
||||
'Title/md/LowCase/Text-Transform': 'unset',
|
||||
'Tag/Letter spacing': 0.06,
|
||||
'Tag/Font fallback': 'sans-serif',
|
||||
'Tag/Text-Transform': 'unset',
|
||||
'Link/md/Font fallback': 'sans-serif',
|
||||
'Link/md/Letter spacing': 0.19,
|
||||
'Link/sm/Font fallback': 'sans-serif',
|
||||
'Link/sm/Letter spacing': 0.2,
|
||||
'Body/Lead text/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Letter spacing': 0.19,
|
||||
'Body/Supporting text/Font fallback': 'sans-serif',
|
||||
'Body/Supporting text/Letter spacing': 0.2,
|
||||
'Body/Lead text/Letter spacing': 0.2,
|
||||
'Label/Font fallback': 'sans-serif',
|
||||
'Label/Letter spacing': 0.17,
|
||||
'Body/Underline/md/Font fallback': 'sans-serif',
|
||||
'Body/Underline/md/Letter spacing': 0.19,
|
||||
'Body/Underline/sm/Font fallback': 'sans-serif',
|
||||
'Body/Underline/sm/Letter spacing': 0.2,
|
||||
'Surface/Brand/Primary 1/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent': '#FFFFFF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Accent': '#FFFFFF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Accent': '#FFFFFF',
|
||||
'Utilities/Gradients/10': '#3C43361A',
|
||||
'Font family/Downtown Camper/Title': 'Gotham',
|
||||
'Font family/Downtown Camper/Body': 'Fira sans',
|
||||
'Font family/Downtown Camper/Decorative': 'Gotham',
|
||||
'Title/lg/Font weight': 900,
|
||||
'Title/lg/Font family': 'Gotham',
|
||||
'Title/md/Font weight': 900,
|
||||
'Title/md/Font family': 'Gotham',
|
||||
'Title/sm/Font weight': 900,
|
||||
'Title/sm/Font family': 'Gotham',
|
||||
'Title/sm/LowCase/Font weight': 400,
|
||||
'Title/sm/LowCase/Font family': 'Gotham',
|
||||
'Title/Decorative/lg/Font weight': 400,
|
||||
'Title/Decorative/lg/Font family': 'Gotham',
|
||||
'Title/Decorative/md/Font weight': 400,
|
||||
'Title/Decorative/md/Font family': 'Gotham',
|
||||
'Title/Subtitle/lg/Font weight': 500,
|
||||
'Title/Subtitle/lg/Font family': 'Fira sans',
|
||||
'Title/Subtitle/md/Font weight': 500,
|
||||
'Title/Subtitle/md/Font family': 'Fira sans',
|
||||
'Title/Overline/sm/Font weight': 400,
|
||||
'Title/Overline/sm/Font family': 'Gotham',
|
||||
'Title/xs/Font weight': 900,
|
||||
'Title/xs/Font family': 'Gotham',
|
||||
'Title/md/LowCase/Font weight': 400,
|
||||
'Title/md/LowCase/Font family': 'Gotham',
|
||||
'Tag/Font weight': 400,
|
||||
'Tag/Font family': 'Gotham',
|
||||
'Link/md/Font weight': 500,
|
||||
'Link/md/Font family': 'Fira sans',
|
||||
'Link/sm/Font weight': 500,
|
||||
'Link/sm/Font family': 'Fira sans',
|
||||
'Body/Lead text/Font weight': 400,
|
||||
'Body/Lead text/Font family': 'Fira sans',
|
||||
'Body/Paragraph/Font weight': 400,
|
||||
'Body/Paragraph/Font weight 2': 500,
|
||||
'Body/Paragraph/Font family': 'Fira sans',
|
||||
'Body/Supporting text/Font weight': 400,
|
||||
'Body/Supporting text/Font weight 2': 500,
|
||||
'Body/Supporting text/Font family': 'Fira sans',
|
||||
'Label/Font weight': 400,
|
||||
'Label/Font weight 2': 500,
|
||||
'Label/Font family': 'Fira sans',
|
||||
'Body/Underline/md/Font weight': 400,
|
||||
'Body/Underline/md/Font family': 'Fira sans',
|
||||
'Body/Underline/sm/Font weight': 400,
|
||||
'Body/Underline/sm/Font family': 'Fira sans',
|
||||
'Text/Heading': '#1F1F1F',
|
||||
'Text/Default': '#1F1F1F',
|
||||
'Text/Secondary': '#575757',
|
||||
'Text/Tertiary': '#747474',
|
||||
'Text/Accent Primary': '#834722',
|
||||
'Text/Accent Secondary': '#747474',
|
||||
'Text/Inverted': '#FFFFFF',
|
||||
'Text/Interactive/Default': '#1F1F1F',
|
||||
'Text/Interactive/Secondary': '#834722',
|
||||
'Text/Interactive/Hover Secondary': '#BB7524',
|
||||
'Text/Interactive/Disabled': '#8C8C8C',
|
||||
'Text/Interactive/Focus': '#262626',
|
||||
'Text/Interactive/Error': '#AD0015',
|
||||
'Text/Interactive/Placeholder': '#747474',
|
||||
'Text/Brand/OnAccent/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnAccent/Default': '#FFFFFF',
|
||||
'Text/Brand/OnAccent/Accent': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Accent': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Accent': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Accent': '#FFFFFF',
|
||||
'Background/Primary': '#FCFCFC',
|
||||
'Background/Secondary': '#FFFFFF',
|
||||
'Surface/Primary/Default': '#FFFFFF',
|
||||
'Surface/Primary/Hover': '#f2f2f2',
|
||||
'Surface/Primary/Hover Light': '#e6e5e5',
|
||||
'Surface/Primary/Hover Accent': '#E9E9E9',
|
||||
'Surface/Primary/OnSurface/Default': '#F5F5F5',
|
||||
'Surface/Primary/Disabled': '#E9E9E9',
|
||||
'Surface/Secondary/Default': '#F0F0F0',
|
||||
'Surface/Secondary/Secondary': '#F0F0F0',
|
||||
'Surface/Secondary/Hover': '#e4e4e4',
|
||||
'Surface/Brand/Accent/Default': '#D3952D',
|
||||
'Surface/Brand/Primary 1/Default': '#834722',
|
||||
'Surface/Brand/Primary 2/Default': '#834722',
|
||||
'Surface/Brand/Primary 3/Default': '#3C4336',
|
||||
'Surface/UI Fill/Default': '#FFFFFF',
|
||||
'Surface/UI Fill/Intense': '#262626',
|
||||
'Surface/UI Fill/Active': '#262626',
|
||||
'Surface/UI Fill/Active Hover': '#ffffff',
|
||||
'Surface/UI Fill/Disabled': '#E9E9E9',
|
||||
'Surface/Accent/1': '#A96D59',
|
||||
'Surface/Accent/2': '#3F6DBD',
|
||||
'Surface/Accent/3': '#454E3D',
|
||||
'Surface/Accent/4': '#D3952D',
|
||||
'Surface/Accent/5': '#18347F',
|
||||
'Surface/Feedback/Information Accent': '#284EA0',
|
||||
'Surface/Feedback/Information': '#E8F6FF',
|
||||
'Surface/Feedback/Succes Accent': '#348337',
|
||||
'Surface/Feedback/Succes': '#F3FCE8',
|
||||
'Surface/Feedback/Warning Accent': '#D17308',
|
||||
'Surface/Feedback/Warning Light': '#FFF8E3',
|
||||
'Surface/Feedback/Error Accent': '#AD0015',
|
||||
'Surface/Feedback/Error': '#FFEBEB',
|
||||
'Surface/Feedback/Neutral Accent': '#747474',
|
||||
'Surface/Feedback/Neutral': '#E9E9E9',
|
||||
'Border/Default': '#D9D9D9',
|
||||
'Border/Intense': '#BFBFBF',
|
||||
'Border/Inverted': '#FFFFFF',
|
||||
'Icon/Default': '#575757',
|
||||
'Icon/Intense': '#1F1F1F',
|
||||
'Icon/Accent': '#717F63',
|
||||
'Icon/Interactive/Default': '#1F1F1F',
|
||||
'Icon/Interactive/Secondary': '#834722',
|
||||
'Icon/Interactive/Disabled': '#BFBFBF',
|
||||
'Icon/Interactive/Placeholder': '#747474',
|
||||
'Icon/Feedback/Information': '#284EA0',
|
||||
'Icon/Feedback/Success': '#348337',
|
||||
'Icon/Feedback/Warning': '#D17308',
|
||||
'Icon/Feedback/Error': '#AD0015',
|
||||
'Icon/Feedback/Neutral': '#575757',
|
||||
'Icon/Inverted': '#FFFFFF',
|
||||
'Overlay/10': '#1F1C1B1A',
|
||||
'Overlay/20': '#1F1C1B33',
|
||||
'Overlay/40': '#1F1C1B66',
|
||||
'Overlay/60': '#1F1C1B99',
|
||||
'Overlay/80': '#1F1C1BCC',
|
||||
'Overlay/90': '#1F1C1BE6',
|
||||
'Component/Button/Brand/Primary/Default': '#834722',
|
||||
'Component/Button/Brand/Primary/Hover': '#915836',
|
||||
'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Hover Inverted': '#3C4336',
|
||||
'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Secondary/On fill/Default': '#834722',
|
||||
'Component/Button/Brand/Secondary/On fill/Hover': '#9B5622',
|
||||
'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Secondary/Border/Default': '#834722',
|
||||
'Component/Button/Brand/Secondary/Border/Hover': '#9B5622',
|
||||
'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Border/Hover inverted': '#f4ebe7',
|
||||
'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/Default': '#3C4336',
|
||||
'Component/Button/Brand/Tertiary/Hover': '#4d5448',
|
||||
'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Default': '#FFFFFF',
|
||||
'Component/Button/Inverted/Faded': '#FFFFFFE6',
|
||||
'Component/Button/Inverted/Hover': '#f2f2f2',
|
||||
'Component/Button/Inverted/Hover Inverted': '#3C4336',
|
||||
'Component/Button/Inverted/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Inverted/On fill/Default': '#834722',
|
||||
'Component/Button/Inverted/On fill/Hover': '#915836',
|
||||
'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
|
||||
'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Inverted/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
|
||||
'Border/Interactive/Default': '#BFBFBF',
|
||||
'Border/Divider/Default': '#D9D9D9',
|
||||
'Border/Divider/Subtle': '#E9E9E9',
|
||||
'Border/Divider/Accent': '#BFBFBF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Default': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Secondary': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Border/Interactive/Selected': '#262626',
|
||||
'Border/Interactive/Focus': '#262626',
|
||||
'Border/Interactive/Disabled': '#BFBFBF',
|
||||
'Border/Interactive/Error': '#AD0015',
|
||||
'Border/Interactive/KeyboardFocus': '#5B8FD4',
|
||||
'Component/Button/Muted/Default': '#FFFFFF00',
|
||||
'Component/Button/Muted/Hover': '#FFFFFF00',
|
||||
'Component/Button/Muted/Disabled': '#FFFFFF1A',
|
||||
'Component/Button/Muted/Hover inverted': '#1F1C1B0D',
|
||||
'Component/Button/Muted/Disabled inverted': '#D9D9D9',
|
||||
'Component/Button/Muted/On fill/Default': '#1F1F1F',
|
||||
'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Muted/On fill/Hover Inverted': '#9B5622',
|
||||
'Component/Button/Muted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Muted/Border/Default': '#FFFFFF1A',
|
||||
'Component/Button/Muted/Border/Hover': '#ffffff30',
|
||||
'Component/Button/Muted/Border/Disable': '#FFFFFF1A',
|
||||
}
|
||||
Binary file not shown.
@@ -1,5 +1,3 @@
|
||||
@font-face {
|
||||
font-family: 'Helvetica';
|
||||
font-style: normal;
|
||||
src: url('./fonts/Helvetica/helvetica.ttf') format('ttf');
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
349
packages/design-system/lib/styles/grand-hotel.css
Normal file
349
packages/design-system/lib/styles/grand-hotel.css
Normal file
@@ -0,0 +1,349 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
.grand-hotel {
|
||||
/* Values */
|
||||
--Body-Lead-text-Font-fallback: sans-serif;
|
||||
--Body-Lead-text-Letter-spacing: 0.2px;
|
||||
--Body-Paragraph-Font-fallback: sans-serif;
|
||||
--Body-Paragraph-Letter-spacing: 0.19px;
|
||||
--Body-Supporting-text-Font-fallback: sans-serif;
|
||||
--Body-Supporting-text-Letter-spacing: 0.2px;
|
||||
--Body-Underline-md-Font-fallback: sans-serif;
|
||||
--Body-Underline-md-Letter-spacing: 0.19px;
|
||||
--Body-Underline-sm-Font-fallback: sans-serif;
|
||||
--Body-Underline-sm-Letter-spacing: 0.2px;
|
||||
--Component-Button-Brand-Primary-Hover: #34373d;
|
||||
--Component-Button-Brand-Secondary-Border-Hover-inverted: #e6e6e7;
|
||||
--Component-Button-Brand-Tertiary-Hover: #b8cad0;
|
||||
--Component-Button-Brand-Tertiary-On-fill-Hover: #34373d;
|
||||
--Component-Button-Inverted-Hover: #f2f2f2;
|
||||
--Component-Button-Inverted-On-fill-Hover: #34373d;
|
||||
--Component-Button-Muted-Border-Hover: #ffffff30;
|
||||
--Component-Button-Muted-Hover-inverted: #f2f2f2;
|
||||
--Font-family-Grand-Hotel-Body: 'Fira sans';
|
||||
--Font-family-Grand-Hotel-Decorative: 'Canela Deck';
|
||||
--Font-family-Grand-Hotel-Title: 'Canela Deck';
|
||||
--Label-Font-fallback: sans-serif;
|
||||
--Label-Letter-spacing: 0.17px;
|
||||
--Link-md-Font-fallback: sans-serif;
|
||||
--Link-md-Letter-spacing: 0.19px;
|
||||
--Link-sm-Font-fallback: sans-serif;
|
||||
--Link-sm-Letter-spacing: 0.2px;
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-100: #21252b;
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-50: #5b6e7f;
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-80: #3d444d;
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-90: #363c43;
|
||||
--Signature-Grand-Hotel-Careys-Pink-40: #dba7b1;
|
||||
--Signature-Grand-Hotel-Careys-Pink-50: #c27183;
|
||||
--Signature-Grand-Hotel-Careys-Pink-60: #aa546b;
|
||||
--Signature-Grand-Hotel-Careys-Pink-70: #8e4258;
|
||||
--Signature-Grand-Hotel-Cloudy-0: #f7f6f5;
|
||||
--Signature-Grand-Hotel-Cloudy-10: #ebeae9;
|
||||
--Signature-Grand-Hotel-Cloudy-20: #d7d7d1;
|
||||
--Signature-Grand-Hotel-Cloudy-30: #b2ada7;
|
||||
--Signature-Grand-Hotel-Submarine-30: #b0c4cb;
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff;
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-1-OnSurface-Default: #ffffff;
|
||||
--Surface-Brand-Primary-2-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-2-OnSurface-Default: #ffffff;
|
||||
--Surface-Brand-Primary-3-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-3-OnSurface-Default: #ffffff;
|
||||
--Surface-Primary-Hover-Light: #e6e5e5;
|
||||
--Surface-Primary-Hover: #f2f2f2;
|
||||
--Surface-Secondary-Hover: #ebeae9;
|
||||
--Tag-Font-fallback: sans-serif;
|
||||
--Tag-Letter-spacing: 0.24px;
|
||||
--Tag-Text-Transform: uppercase;
|
||||
--Title-Decorative-lg-Font-fallback: Serif;
|
||||
--Title-Decorative-lg-Letter-spacing: 0.3px;
|
||||
--Title-Decorative-lg-Text-Transform: uppercase;
|
||||
--Title-Decorative-md-Font-fallback: Serif;
|
||||
--Title-Decorative-md-Letter-spacing: 0.24px;
|
||||
--Title-Decorative-md-Text-Transform: uppercase;
|
||||
--Title-Overline-sm-Font-fallback: sans-serif;
|
||||
--Title-Overline-sm-Letter-spacing: 0.21px;
|
||||
--Title-Overline-sm-Text-Transform: uppercase;
|
||||
--Title-Subtitle-lg-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-lg-Letter-spacing: 0.24px;
|
||||
--Title-Subtitle-md-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-md-Letter-spacing: 0.2px;
|
||||
--Title-lg-Font-fallback: Serif;
|
||||
--Title-lg-Letter-spacing: 0.12px;
|
||||
--Title-lg-Text-Transform: unset;
|
||||
--Title-md-Font-fallback: Serif;
|
||||
--Title-md-Letter-spacing: 0.18px;
|
||||
--Title-md-LowCase-Font-fallback: Serif;
|
||||
--Title-md-LowCase-Letter-spacing: 0.18px;
|
||||
--Title-md-LowCase-Text-Transform: unset;
|
||||
--Title-md-Text-Transform: unset;
|
||||
--Title-sm-Font-fallback: Serif;
|
||||
--Title-sm-Letter-spacing: 0.28px;
|
||||
--Title-sm-LowCase-Font-fallback: Serif;
|
||||
--Title-sm-LowCase-Letter-spacing: 0.28px;
|
||||
--Title-sm-LowCase-Text-Transform: unset;
|
||||
--Title-sm-Text-Transform: unset;
|
||||
--Title-xs-Font-fallback: Serif;
|
||||
--Title-xs-Letter-spacing: 0.24px;
|
||||
--Title-xs-Text-Transform: unset;
|
||||
--Utilities-Gradients-10: #5b6e7f1a;
|
||||
|
||||
/* Aliases */
|
||||
--Background-Primary: var(--Neutral-Opacity-White-100);
|
||||
--Background-Secondary: var(--Neutral-Opacity-White-100);
|
||||
--Body-Lead-text-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Body-Lead-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Lead-text-Size: var(--Impl-Text-size-xs);
|
||||
--Body-Paragraph-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Body-Paragraph-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Paragraph-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Paragraph-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Supporting-text-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Body-Supporting-text-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Supporting-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Supporting-text-Size: var(--Impl-Text-size-4xs);
|
||||
--Body-Underline-md-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Body-Underline-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Underline-sm-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Body-Underline-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Border-Default: var(--Neutral-20);
|
||||
--Border-Divider-Accent: var(--Neutral-30);
|
||||
--Border-Divider-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Brand-OnPrimary-1-Secondary: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Border-Divider-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Default: var(--Neutral-20);
|
||||
--Border-Divider-Subtle: var(--Neutral-15);
|
||||
--Border-Intense: var(--Neutral-30);
|
||||
--Border-Interactive-Default: var(--Neutral-30);
|
||||
--Border-Interactive-Disabled: var(--Neutral-30);
|
||||
--Border-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Border-Interactive-Focus: var(--Neutral-80);
|
||||
--Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
|
||||
--Border-Interactive-Selected: var(--Neutral-80);
|
||||
--Border-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Primary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Primary-Default: var(
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-100
|
||||
);
|
||||
--Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Primary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Primary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Primary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Default: var(
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Disabled: var(
|
||||
--Neutral-Opacity-Black-10
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Hover: var(
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-80
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Secondary-Hover-Inverted: var(
|
||||
--Signature-Grand-Hotel-Submarine-30
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Secondary-On-fill-Default: var(
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Secondary-On-fill-Hover: var(
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-80
|
||||
);
|
||||
--Component-Button-Brand-Secondary-On-fill-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Hover: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Default: var(
|
||||
--Signature-Grand-Hotel-Submarine-30
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Default: var(
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
|
||||
--Component-Button-Inverted-Hover-Inverted: var(
|
||||
--Signature-Grand-Hotel-Submarine-30
|
||||
);
|
||||
--Component-Button-Inverted-On-fill-Default: var(
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-100
|
||||
);
|
||||
--Component-Button-Inverted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Inverted-On-fill-Hover-inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Default: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Muted-Disabled-inverted: var(--Neutral-20);
|
||||
--Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Muted-Hover: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Muted-On-fill-Default: var(--Neutral-90);
|
||||
--Component-Button-Muted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Muted-On-fill-Hover-Inverted: var(
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-80
|
||||
);
|
||||
--Component-Button-Muted-On-fill-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Icon-Accent: var(--Signature-Grand-Hotel-Careys-Pink-40);
|
||||
--Icon-Default: var(--Neutral-60);
|
||||
--Icon-Feedback-Error: var(--Scandic-Red-70);
|
||||
--Icon-Feedback-Information: var(--Scandic-Blue-70);
|
||||
--Icon-Feedback-Neutral: var(--Neutral-60);
|
||||
--Icon-Feedback-Success: var(--Scandic-Green-60);
|
||||
--Icon-Feedback-Warning: var(--Scandic-Yellow-60);
|
||||
--Icon-Intense: var(--Neutral-90);
|
||||
--Icon-Interactive-Default: var(--Signature-Grand-Hotel-Blue-Bayoux-100);
|
||||
--Icon-Interactive-Disabled: var(--Neutral-30);
|
||||
--Icon-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Icon-Interactive-Secondary: var(--Signature-Grand-Hotel-Careys-Pink-60);
|
||||
--Icon-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Label-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Label-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Label-Font-weight: var(--Font-weight-Regular);
|
||||
--Label-Size: var(--Impl-Text-size-5xs);
|
||||
--Link-md-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Link-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Link-sm-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Link-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Overlay-10: var(--Neutral-Opacity-Black-10);
|
||||
--Overlay-20: var(--Neutral-Opacity-Black-20);
|
||||
--Overlay-40: var(--Neutral-Opacity-Black-40);
|
||||
--Overlay-60: var(--Neutral-Opacity-Black-60);
|
||||
--Overlay-80: var(--Neutral-Opacity-Black-80);
|
||||
--Overlay-90: var(--Neutral-Opacity-Black-90);
|
||||
--Surface-Accent-1: var(--Signature-Grand-Hotel-Careys-Pink-70);
|
||||
--Surface-Accent-2: var(--Scandic-Blue-70);
|
||||
--Surface-Accent-3: var(--Signature-Grand-Hotel-Careys-Pink-50);
|
||||
--Surface-Accent-4: var(--Signature-Grand-Hotel-Blue-Bayoux-50);
|
||||
--Surface-Accent-5: var(--Signature-Grand-Hotel-Blue-Bayoux-90);
|
||||
--Surface-Brand-Accent-Default: var(--Signature-Grand-Hotel-Cloudy-30);
|
||||
--Surface-Brand-Primary-1-Default: var(
|
||||
--Signature-Grand-Hotel-Careys-Pink-40
|
||||
);
|
||||
--Surface-Brand-Primary-2-Default: var(
|
||||
--Signature-Grand-Hotel-Careys-Pink-40
|
||||
);
|
||||
--Surface-Brand-Primary-3-Default: var(
|
||||
--Signature-Grand-Hotel-Blue-Bayoux-50
|
||||
);
|
||||
--Surface-Feedback-Error-Accent: var(--Scandic-Red-70);
|
||||
--Surface-Feedback-Error: var(--Scandic-Red-00);
|
||||
--Surface-Feedback-Information-Accent: var(--Scandic-Blue-70);
|
||||
--Surface-Feedback-Information: var(--Scandic-Blue-00);
|
||||
--Surface-Feedback-Neutral-Accent: var(--Neutral-50);
|
||||
--Surface-Feedback-Neutral: var(--Neutral-15);
|
||||
--Surface-Feedback-Succes-Accent: var(--Scandic-Green-60);
|
||||
--Surface-Feedback-Succes: var(--Scandic-Green-00);
|
||||
--Surface-Feedback-Warning--Light: var(--Scandic-Yellow-00);
|
||||
--Surface-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
|
||||
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-Primary-Disabled: var(--Neutral-15);
|
||||
--Surface-Primary-Hover-Accent: var(--Neutral-15);
|
||||
--Surface-Primary-OnSurface-Default: var(--Signature-Grand-Hotel-Cloudy-0);
|
||||
--Surface-Secondary-Default: var(--Signature-Grand-Hotel-Cloudy-0);
|
||||
--Surface-Secondary-Secondary: var(--Signature-Grand-Hotel-Cloudy-0);
|
||||
--Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100);
|
||||
--Surface-UI-Fill-Active: var(--Neutral-80);
|
||||
--Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-UI-Fill-Disabled: var(--Neutral-15);
|
||||
--Surface-UI-Fill-Intense: var(--Neutral-80);
|
||||
--Tag-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Tag-Font-weight: var(--Font-weight-Medium);
|
||||
--Tag-Size: var(--Impl-Text-size-5xs);
|
||||
--Text-Accent-Primary: var(--Signature-Grand-Hotel-Careys-Pink-60);
|
||||
--Text-Accent-Secondary: var(--Neutral-50);
|
||||
--Text-Brand-OnAccent-Accent: var(--Neutral-90);
|
||||
--Text-Brand-OnAccent-Default: var(--Neutral-90);
|
||||
--Text-Brand-OnAccent-Heading: var(--Neutral-90);
|
||||
--Text-Brand-OnPrimary-1-Accent: var(--Neutral-90);
|
||||
--Text-Brand-OnPrimary-1-Default: var(--Neutral-90);
|
||||
--Text-Brand-OnPrimary-1-Heading: var(--Neutral-90);
|
||||
--Text-Brand-OnPrimary-2-Accent: var(--Neutral-90);
|
||||
--Text-Brand-OnPrimary-2-Default: var(--Neutral-90);
|
||||
--Text-Brand-OnPrimary-2-Heading: var(--Neutral-90);
|
||||
--Text-Brand-OnPrimary-3-Accent: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Default: var(--Neutral-90);
|
||||
--Text-Heading: var(--Neutral-90);
|
||||
--Text-Interactive-Default: var(--Signature-Grand-Hotel-Blue-Bayoux-100);
|
||||
--Text-Interactive-Disabled: var(--Neutral-40);
|
||||
--Text-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Text-Interactive-Focus: var(--Neutral-80);
|
||||
--Text-Interactive-Hover-Secondary: var(
|
||||
--Signature-Grand-Hotel-Careys-Pink-50
|
||||
);
|
||||
--Text-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Text-Interactive-Secondary: var(--Signature-Grand-Hotel-Careys-Pink-60);
|
||||
--Text-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Text-Secondary: var(--Neutral-60);
|
||||
--Text-Tertiary: var(--Neutral-50);
|
||||
--Title-Decorative-lg-Font-family: var(--Font-family-Grand-Hotel-Decorative);
|
||||
--Title-Decorative-lg-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Decorative-lg-Size: var(--Impl-Text-size-xs);
|
||||
--Title-Decorative-md-Font-family: var(--Font-family-Grand-Hotel-Title);
|
||||
--Title-Decorative-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Decorative-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Title-Overline-sm-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Title-Overline-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Overline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Title-Subtitle-lg-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Title-Subtitle-lg-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-lg-Size: var(--Impl-Text-size-sm);
|
||||
--Title-Subtitle-md-Font-family: var(--Font-family-Grand-Hotel-Body);
|
||||
--Title-Subtitle-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-md-Size: var(--Impl-Text-size-xs);
|
||||
--Title-lg-Font-family: var(--Font-family-Grand-Hotel-Title);
|
||||
--Title-lg-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-lg-Size: var(--Impl-Text-size-4xl);
|
||||
--Title-md-Font-family: var(--Font-family-Grand-Hotel-Title);
|
||||
--Title-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-md-LowCase-Font-family: var(--Font-family-Grand-Hotel-Title);
|
||||
--Title-md-LowCase-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-md-LowCase-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-md-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-sm-Font-family: var(--Font-family-Grand-Hotel-Title);
|
||||
--Title-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-sm-LowCase-Font-family: var(--Font-family-Grand-Hotel-Title);
|
||||
--Title-sm-LowCase-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-sm-LowCase-Size: var(--Impl-Text-size-lg);
|
||||
--Title-sm-Size: var(--Impl-Text-size-lg);
|
||||
--Title-xs-Font-family: var(--Font-family-Grand-Hotel-Title);
|
||||
--Title-xs-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-xs-Size: var(--Impl-Text-size-sm);
|
||||
}
|
||||
272
packages/design-system/lib/styles/grand-hotel.js
Normal file
272
packages/design-system/lib/styles/grand-hotel.js
Normal file
@@ -0,0 +1,272 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
export const theme = {
|
||||
'Signature/Grand Hotel/Careys Pink/40': '#DBA7B1',
|
||||
'Signature/Grand Hotel/Careys Pink/50': '#C27183',
|
||||
'Signature/Grand Hotel/Careys Pink/60': '#AA546B',
|
||||
'Signature/Grand Hotel/Careys Pink/70': '#8E4258',
|
||||
'Signature/Grand Hotel/Cloudy/0': '#F7F6F5',
|
||||
'Signature/Grand Hotel/Cloudy/10': '#EBEAE9',
|
||||
'Signature/Grand Hotel/Cloudy/20': '#D7D7D1',
|
||||
'Signature/Grand Hotel/Blue Bayoux/50': '#5B6E7F',
|
||||
'Signature/Grand Hotel/Blue Bayoux/80': '#3D444D',
|
||||
'Signature/Grand Hotel/Blue Bayoux/90': '#363C43',
|
||||
'Signature/Grand Hotel/Blue Bayoux/100': '#21252B',
|
||||
'Signature/Grand Hotel/Cloudy/30': '#B2ADA7',
|
||||
'Signature/Grand Hotel/Submarine/30': '#B0C4CB',
|
||||
'Title/lg/Letter spacing': 0.12,
|
||||
'Title/lg/Font fallback': 'Serif',
|
||||
'Title/lg/Text-Transform': 'unset',
|
||||
'Title/md/Letter spacing': 0.18,
|
||||
'Title/md/Font fallback': 'Serif',
|
||||
'Title/sm/Letter spacing': 0.28,
|
||||
'Title/sm/Font fallback': 'Serif',
|
||||
'Title/sm/Text-Transform': 'unset',
|
||||
'Title/Decorative/lg/Letter spacing': 0.3,
|
||||
'Title/Decorative/lg/Font fallback': 'Serif',
|
||||
'Title/Decorative/lg/Text-Transform': 'uppercase',
|
||||
'Title/Decorative/md/Letter spacing': 0.24,
|
||||
'Title/Decorative/md/Font fallback': 'Serif',
|
||||
'Title/Decorative/md/Text-Transform': 'uppercase',
|
||||
'Title/Subtitle/lg/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/lg/Letter spacing': 0.24,
|
||||
'Title/Subtitle/md/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/md/Letter spacing': 0.2,
|
||||
'Title/Overline/sm/Letter spacing': 0.21,
|
||||
'Title/Overline/sm/Font fallback': 'sans-serif',
|
||||
'Title/Overline/sm/Text-Transform': 'uppercase',
|
||||
'Title/sm/LowCase/Letter spacing': 0.28,
|
||||
'Title/sm/LowCase/Font fallback': 'Serif',
|
||||
'Title/sm/LowCase/Text-Transform': 'unset',
|
||||
'Title/xs/Letter spacing': 0.24,
|
||||
'Title/xs/Font fallback': 'Serif',
|
||||
'Title/xs/Text-Transform': 'unset',
|
||||
'Title/md/Text-Transform': 'unset',
|
||||
'Title/md/LowCase/Letter spacing': 0.18,
|
||||
'Title/md/LowCase/Font fallback': 'Serif',
|
||||
'Title/md/LowCase/Text-Transform': 'unset',
|
||||
'Tag/Letter spacing': 0.24,
|
||||
'Tag/Font fallback': 'sans-serif',
|
||||
'Tag/Text-Transform': 'uppercase',
|
||||
'Link/md/Font fallback': 'sans-serif',
|
||||
'Link/md/Letter spacing': 0.19,
|
||||
'Link/sm/Font fallback': 'sans-serif',
|
||||
'Link/sm/Letter spacing': 0.2,
|
||||
'Body/Lead text/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Letter spacing': 0.19,
|
||||
'Body/Supporting text/Font fallback': 'sans-serif',
|
||||
'Body/Supporting text/Letter spacing': 0.2,
|
||||
'Body/Lead text/Letter spacing': 0.2,
|
||||
'Label/Font fallback': 'sans-serif',
|
||||
'Label/Letter spacing': 0.17,
|
||||
'Body/Underline/md/Font fallback': 'sans-serif',
|
||||
'Body/Underline/md/Letter spacing': 0.19,
|
||||
'Body/Underline/sm/Font fallback': 'sans-serif',
|
||||
'Body/Underline/sm/Letter spacing': 0.2,
|
||||
'Surface/Brand/Primary 1/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent': '#FFFFFF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Accent': '#FFFFFF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Accent': '#FFFFFF',
|
||||
'Utilities/Gradients/10': '#5B6E7F1A',
|
||||
'Font family/Grand Hotel/Title': 'Canela Deck',
|
||||
'Font family/Grand Hotel/Body': 'Fira sans',
|
||||
'Font family/Grand Hotel/Decorative': 'Canela Deck',
|
||||
'Title/lg/Font weight': 400,
|
||||
'Title/lg/Font family': 'Canela Deck',
|
||||
'Title/md/Font weight': 400,
|
||||
'Title/md/Font family': 'Canela Deck',
|
||||
'Title/sm/Font weight': 400,
|
||||
'Title/sm/Font family': 'Canela Deck',
|
||||
'Title/sm/LowCase/Font weight': 400,
|
||||
'Title/sm/LowCase/Font family': 'Canela Deck',
|
||||
'Title/Decorative/lg/Font weight': 400,
|
||||
'Title/Decorative/lg/Font family': 'Canela Deck',
|
||||
'Title/Decorative/md/Font weight': 400,
|
||||
'Title/Decorative/md/Font family': 'Canela Deck',
|
||||
'Title/Subtitle/lg/Font weight': 500,
|
||||
'Title/Subtitle/lg/Font family': 'Fira sans',
|
||||
'Title/Subtitle/md/Font weight': 500,
|
||||
'Title/Subtitle/md/Font family': 'Fira sans',
|
||||
'Title/Overline/sm/Font weight': 500,
|
||||
'Title/Overline/sm/Font family': 'Fira sans',
|
||||
'Title/xs/Font weight': 400,
|
||||
'Title/xs/Font family': 'Canela Deck',
|
||||
'Title/md/LowCase/Font weight': 400,
|
||||
'Title/md/LowCase/Font family': 'Canela Deck',
|
||||
'Tag/Font weight': 500,
|
||||
'Tag/Font family': 'Fira sans',
|
||||
'Link/md/Font weight': 500,
|
||||
'Link/md/Font family': 'Fira sans',
|
||||
'Link/sm/Font weight': 500,
|
||||
'Link/sm/Font family': 'Fira sans',
|
||||
'Body/Lead text/Font weight': 400,
|
||||
'Body/Lead text/Font family': 'Fira sans',
|
||||
'Body/Paragraph/Font weight': 400,
|
||||
'Body/Paragraph/Font weight 2': 500,
|
||||
'Body/Paragraph/Font family': 'Fira sans',
|
||||
'Body/Supporting text/Font weight': 400,
|
||||
'Body/Supporting text/Font weight 2': 500,
|
||||
'Body/Supporting text/Font family': 'Fira sans',
|
||||
'Label/Font weight': 400,
|
||||
'Label/Font weight 2': 500,
|
||||
'Label/Font family': 'Fira sans',
|
||||
'Body/Underline/md/Font weight': 400,
|
||||
'Body/Underline/md/Font family': 'Fira sans',
|
||||
'Body/Underline/sm/Font weight': 400,
|
||||
'Body/Underline/sm/Font family': 'Fira sans',
|
||||
'Text/Heading': '#1F1F1F',
|
||||
'Text/Default': '#1F1F1F',
|
||||
'Text/Secondary': '#575757',
|
||||
'Text/Tertiary': '#747474',
|
||||
'Text/Accent Primary': '#AA546B',
|
||||
'Text/Accent Secondary': '#747474',
|
||||
'Text/Inverted': '#FFFFFF',
|
||||
'Text/Interactive/Default': '#21252B',
|
||||
'Text/Interactive/Secondary': '#AA546B',
|
||||
'Text/Interactive/Hover Secondary': '#C27183',
|
||||
'Text/Interactive/Disabled': '#8C8C8C',
|
||||
'Text/Interactive/Focus': '#262626',
|
||||
'Text/Interactive/Error': '#AD0015',
|
||||
'Text/Interactive/Placeholder': '#747474',
|
||||
'Text/Brand/OnAccent/Heading': '#1F1F1F',
|
||||
'Text/Brand/OnAccent/Default': '#1F1F1F',
|
||||
'Text/Brand/OnAccent/Accent': '#1F1F1F',
|
||||
'Text/Brand/OnPrimary 1/Heading': '#1F1F1F',
|
||||
'Text/Brand/OnPrimary 1/Default': '#1F1F1F',
|
||||
'Text/Brand/OnPrimary 1/Accent': '#1F1F1F',
|
||||
'Text/Brand/OnPrimary 2/Heading': '#1F1F1F',
|
||||
'Text/Brand/OnPrimary 2/Default': '#1F1F1F',
|
||||
'Text/Brand/OnPrimary 2/Accent': '#1F1F1F',
|
||||
'Text/Brand/OnPrimary 3/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Accent': '#FFFFFF',
|
||||
'Background/Primary': '#FFFFFF',
|
||||
'Background/Secondary': '#FFFFFF',
|
||||
'Surface/Primary/Default': '#FFFFFF',
|
||||
'Surface/Primary/Hover': '#f2f2f2',
|
||||
'Surface/Primary/Hover Light': '#e6e5e5',
|
||||
'Surface/Primary/Hover Accent': '#E9E9E9',
|
||||
'Surface/Primary/OnSurface/Default': '#F7F6F5',
|
||||
'Surface/Primary/Disabled': '#E9E9E9',
|
||||
'Surface/Secondary/Default': '#F7F6F5',
|
||||
'Surface/Secondary/Secondary': '#F7F6F5',
|
||||
'Surface/Secondary/Hover': '#ebeae9',
|
||||
'Surface/Brand/Accent/Default': '#B2ADA7',
|
||||
'Surface/Brand/Primary 1/Default': '#DBA7B1',
|
||||
'Surface/Brand/Primary 2/Default': '#DBA7B1',
|
||||
'Surface/Brand/Primary 3/Default': '#5B6E7F',
|
||||
'Surface/UI Fill/Default': '#FFFFFF',
|
||||
'Surface/UI Fill/Intense': '#262626',
|
||||
'Surface/UI Fill/Active': '#262626',
|
||||
'Surface/UI Fill/Active Hover': '#FFFFFF',
|
||||
'Surface/UI Fill/Disabled': '#E9E9E9',
|
||||
'Surface/Accent/1': '#8E4258',
|
||||
'Surface/Accent/2': '#284EA0',
|
||||
'Surface/Accent/3': '#C27183',
|
||||
'Surface/Accent/4': '#5B6E7F',
|
||||
'Surface/Accent/5': '#363C43',
|
||||
'Surface/Feedback/Information Accent': '#284EA0',
|
||||
'Surface/Feedback/Information': '#E8F6FF',
|
||||
'Surface/Feedback/Succes Accent': '#348337',
|
||||
'Surface/Feedback/Succes': '#F3FCE8',
|
||||
'Surface/Feedback/Warning Accent': '#D17308',
|
||||
'Surface/Feedback/Warning Light': '#FFF8E3',
|
||||
'Surface/Feedback/Error Accent': '#AD0015',
|
||||
'Surface/Feedback/Error': '#FFEBEB',
|
||||
'Surface/Feedback/Neutral Accent': '#747474',
|
||||
'Surface/Feedback/Neutral': '#E9E9E9',
|
||||
'Border/Default': '#D9D9D9',
|
||||
'Border/Intense': '#BFBFBF',
|
||||
'Border/Inverted': '#FFFFFF',
|
||||
'Icon/Default': '#575757',
|
||||
'Icon/Intense': '#1F1F1F',
|
||||
'Icon/Accent': '#DBA7B1',
|
||||
'Icon/Interactive/Default': '#21252B',
|
||||
'Icon/Interactive/Secondary': '#AA546B',
|
||||
'Icon/Interactive/Disabled': '#BFBFBF',
|
||||
'Icon/Interactive/Placeholder': '#747474',
|
||||
'Icon/Feedback/Information': '#284EA0',
|
||||
'Icon/Feedback/Success': '#348337',
|
||||
'Icon/Feedback/Warning': '#D17308',
|
||||
'Icon/Feedback/Error': '#AD0015',
|
||||
'Icon/Feedback/Neutral': '#575757',
|
||||
'Icon/Inverted': '#FFFFFF',
|
||||
'Overlay/10': '#1F1C1B1A',
|
||||
'Overlay/20': '#1F1C1B33',
|
||||
'Overlay/40': '#1F1C1B66',
|
||||
'Overlay/60': '#1F1C1B99',
|
||||
'Overlay/80': '#1F1C1BCC',
|
||||
'Overlay/90': '#1F1C1BE6',
|
||||
'Component/Button/Brand/Primary/Default': '#21252B',
|
||||
'Component/Button/Brand/Primary/Hover': '#34373d',
|
||||
'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Hover Inverted': '#B0C4CB',
|
||||
'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Secondary/On fill/Default': '#21252B',
|
||||
'Component/Button/Brand/Secondary/On fill/Hover': '#3D444D',
|
||||
'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Secondary/Border/Default': '#21252B',
|
||||
'Component/Button/Brand/Secondary/Border/Hover': '#3D444D',
|
||||
'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Border/Hover inverted': '#e6e6e7',
|
||||
'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/Default': '#B0C4CB',
|
||||
'Component/Button/Brand/Tertiary/Hover': '#b8cad0',
|
||||
'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/On fill/Default': '#21252B',
|
||||
'Component/Button/Brand/Tertiary/On fill/Hover': '#34373d',
|
||||
'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Default': '#FFFFFF',
|
||||
'Component/Button/Inverted/Faded': '#FFFFFFE6',
|
||||
'Component/Button/Inverted/Hover': '#f2f2f2',
|
||||
'Component/Button/Inverted/Hover Inverted': '#B0C4CB',
|
||||
'Component/Button/Inverted/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Inverted/On fill/Default': '#21252B',
|
||||
'Component/Button/Inverted/On fill/Hover': '#34373d',
|
||||
'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
|
||||
'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Inverted/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Hover': '#FFFFFF1A',
|
||||
'Component/Button/Inverted/Border/Disable': '#FFFFFF1A',
|
||||
'Border/Interactive/Default': '#BFBFBF',
|
||||
'Border/Divider/Default': '#D9D9D9',
|
||||
'Border/Divider/Subtle': '#E9E9E9',
|
||||
'Border/Divider/Accent': '#BFBFBF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Default': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Secondary': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Border/Interactive/Selected': '#262626',
|
||||
'Border/Interactive/Focus': '#262626',
|
||||
'Border/Interactive/Disabled': '#BFBFBF',
|
||||
'Border/Interactive/Error': '#AD0015',
|
||||
'Border/Interactive/KeyboardFocus': '#5B8FD4',
|
||||
'Component/Button/Muted/Default': '#FFFFFF',
|
||||
'Component/Button/Muted/Hover': '#FFFFFF',
|
||||
'Component/Button/Muted/Disabled': '#FFFFFF',
|
||||
'Component/Button/Muted/Hover inverted': '#f2f2f2',
|
||||
'Component/Button/Muted/Disabled inverted': '#D9D9D9',
|
||||
'Component/Button/Muted/On fill/Default': '#1F1F1F',
|
||||
'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Muted/On fill/Hover Inverted': '#3D444D',
|
||||
'Component/Button/Muted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Muted/Border/Default': '#FFFFFF1A',
|
||||
'Component/Button/Muted/Border/Hover': '#ffffff30',
|
||||
'Component/Button/Muted/Border/Disable': '#FFFFFF1A',
|
||||
}
|
||||
353
packages/design-system/lib/styles/haymarket.css
Normal file
353
packages/design-system/lib/styles/haymarket.css
Normal file
@@ -0,0 +1,353 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
.haymarket {
|
||||
/* Values */
|
||||
--Body-Lead-text-Font-fallback: sans-serif;
|
||||
--Body-Lead-text-Letter-spacing: 0.2px;
|
||||
--Body-Paragraph-Font-fallback: sans-serif;
|
||||
--Body-Paragraph-Letter-spacing: 0.19px;
|
||||
--Body-Supporting-text-Font-fallback: sans-serif;
|
||||
--Body-Supporting-text-Letter-spacing: 0.2px;
|
||||
--Body-Underline-md-Font-fallback: sans-serif;
|
||||
--Body-Underline-md-Letter-spacing: 0.19px;
|
||||
--Body-Underline-sm-Font-fallback: sans-serif;
|
||||
--Body-Underline-sm-Letter-spacing: 0.2px;
|
||||
--Component-Button-Brand-Primary-Hover: #323232;
|
||||
--Component-Button-Brand-Secondary-Border-Hover-inverted: #e6e6e6;
|
||||
--Component-Button-Brand-Tertiary-Hover: #87664e;
|
||||
--Component-Button-Inverted-Hover: #f2f2f2;
|
||||
--Component-Button-Inverted-On-fill-Hover: #323232;
|
||||
--Component-Button-Muted-Border-Hover: #ffffff30;
|
||||
--Font-family-Haymarket-Body: 'Fira sans';
|
||||
--Font-family-Haymarket-Decorative: 'Prumo text';
|
||||
--Font-family-Haymarket-Title: 'Prumo text';
|
||||
--Label-Font-fallback: sans-serif;
|
||||
--Label-Letter-spacing: 0.17px;
|
||||
--Link-md-Font-fallback: sans-serif;
|
||||
--Link-md-Letter-spacing: 0.19px;
|
||||
--Link-sm-Font-fallback: sans-serif;
|
||||
--Link-sm-Letter-spacing: 0.2px;
|
||||
--Signature-Haymarket-Antique-Brass-0: #f9f5f1;
|
||||
--Signature-Haymarket-Antique-Brass-100: #37271c;
|
||||
--Signature-Haymarket-Antique-Brass-10: #ede3d8;
|
||||
--Signature-Haymarket-Antique-Brass-20: #d9c3ae;
|
||||
--Signature-Haymarket-Antique-Brass-30: #c5a384;
|
||||
--Signature-Haymarket-Antique-Brass-40: #ba8e6e;
|
||||
--Signature-Haymarket-Antique-Brass-50: #946f54;
|
||||
--Signature-Haymarket-Antique-Brass-60: #805e45;
|
||||
--Signature-Haymarket-Antique-Brass-70: #634732;
|
||||
--Signature-Haymarket-Antique-Brass-80: #5d4330;
|
||||
--Signature-Haymarket-Antique-Brass-90: #483425;
|
||||
--Signature-Haymarket-Bismark-0: #f3f8f8;
|
||||
--Signature-Haymarket-Bismark-100: #1e282e;
|
||||
--Signature-Haymarket-Bismark-10: #e0ebed;
|
||||
--Signature-Haymarket-Bismark-20: #c5d7dc;
|
||||
--Signature-Haymarket-Bismark-30: #9dbcc3;
|
||||
--Signature-Haymarket-Bismark-40: #6e98a2;
|
||||
--Signature-Haymarket-Bismark-50: #527c88;
|
||||
--Signature-Haymarket-Bismark-60: #4a6c78;
|
||||
--Signature-Haymarket-Bismark-70: #3e5760;
|
||||
--Signature-Haymarket-Bismark-80: #394951;
|
||||
--Signature-Haymarket-Bismark-90: #334046;
|
||||
--Signature-Haymarket-Vista-White-0: #fbf7f6;
|
||||
--Signature-Haymarket-Vista-White-100: #351f1a;
|
||||
--Signature-Haymarket-Vista-White-10: #f6ecea;
|
||||
--Signature-Haymarket-Vista-White-20: #f0ddd8;
|
||||
--Signature-Haymarket-Vista-White-30: #e4c5bd;
|
||||
--Signature-Haymarket-Vista-White-40: #d3a296;
|
||||
--Signature-Haymarket-Vista-White-50: #c08273;
|
||||
--Signature-Haymarket-Vista-White-60: #aa6858;
|
||||
--Signature-Haymarket-Vista-White-70: #8e5547;
|
||||
--Signature-Haymarket-Vista-White-80: #76493e;
|
||||
--Signature-Haymarket-Vista-White-90: #644138;
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff;
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-1-OnSurface-Default: #ffffff;
|
||||
--Surface-Brand-Primary-2-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-2-OnSurface-Default: #ffffff;
|
||||
--Surface-Brand-Primary-3-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-3-OnSurface-Default: #ffffff;
|
||||
--Surface-Primary-Hover-Light: #e6e5e5;
|
||||
--Surface-Primary-Hover: #f2f2f2;
|
||||
--Surface-Secondary-Hover: #efebea;
|
||||
--Surface-UI-Fill-Active-Hover: #ffffff;
|
||||
--Tag-Font-fallback: sans-serif;
|
||||
--Tag-Letter-spacing: 0.24px;
|
||||
--Tag-Text-Transform: uppercase;
|
||||
--Title-Decorative-lg-Font-fallback: Serif;
|
||||
--Title-Decorative-lg-Letter-spacing: 0.6px;
|
||||
--Title-Decorative-lg-Text-Transform: uppercase;
|
||||
--Title-Decorative-md-Font-fallback: Serif;
|
||||
--Title-Decorative-md-Letter-spacing: 0.64px;
|
||||
--Title-Decorative-md-Text-Transform: uppercase;
|
||||
--Title-Overline-sm-Font-fallback: sans-serif;
|
||||
--Title-Overline-sm-Letter-spacing: 0.21px;
|
||||
--Title-Overline-sm-Text-Transform: uppercase;
|
||||
--Title-Subtitle-lg-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-lg-Letter-spacing: 0.24px;
|
||||
--Title-Subtitle-md-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-md-Letter-spacing: 0.2px;
|
||||
--Title-lg-Font-fallback: Serif;
|
||||
--Title-lg-Letter-spacing: 1.44px;
|
||||
--Title-lg-Text-Transform: unset;
|
||||
--Title-md-Font-fallback: Serif;
|
||||
--Title-md-Letter-spacing: 0.36px;
|
||||
--Title-md-LowCase-Font-fallback: Serif;
|
||||
--Title-md-LowCase-Letter-spacing: 0.36px;
|
||||
--Title-md-LowCase-Text-Transform: unset;
|
||||
--Title-md-Text-Transform: unset;
|
||||
--Title-sm-Font-fallback: Serif;
|
||||
--Title-sm-Letter-spacing: 0.56px;
|
||||
--Title-sm-LowCase-Font-fallback: Serif;
|
||||
--Title-sm-LowCase-Letter-spacing: 0.56px;
|
||||
--Title-sm-LowCase-Text-Transform: unset;
|
||||
--Title-sm-Text-Transform: unset;
|
||||
--Title-xs-Font-fallback: Serif;
|
||||
--Title-xs-Letter-spacing: 0.24px;
|
||||
--Title-xs-Text-Transform: unset;
|
||||
--Utilities-Gradients-10: #f0ddd81a;
|
||||
|
||||
/* Aliases */
|
||||
--Background-Primary: var(--Neutral-Opacity-White-100);
|
||||
--Background-Secondary: var(--Neutral-Opacity-White-100);
|
||||
--Body-Lead-text-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Body-Lead-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Lead-text-Size: var(--Impl-Text-size-xs);
|
||||
--Body-Paragraph-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Body-Paragraph-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Paragraph-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Paragraph-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Supporting-text-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Body-Supporting-text-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Supporting-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Supporting-text-Size: var(--Impl-Text-size-4xs);
|
||||
--Body-Underline-md-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Body-Underline-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Underline-sm-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Body-Underline-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Border-Default: var(--Neutral-20);
|
||||
--Border-Divider-Accent: var(--Neutral-30);
|
||||
--Border-Divider-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Brand-OnPrimary-1-Secondary: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Border-Divider-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Default: var(--Neutral-20);
|
||||
--Border-Divider-Subtle: var(--Neutral-15);
|
||||
--Border-Intense: var(--Neutral-30);
|
||||
--Border-Interactive-Default: var(--Neutral-30);
|
||||
--Border-Interactive-Disabled: var(--Neutral-30);
|
||||
--Border-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Border-Interactive-Focus: var(--Neutral-80);
|
||||
--Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
|
||||
--Border-Interactive-Selected: var(--Neutral-80);
|
||||
--Border-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Primary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Primary-Default: var(--Neutral-90);
|
||||
--Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Primary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Primary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Primary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Default: var(--Neutral-90);
|
||||
--Component-Button-Brand-Secondary-Border-Disabled: var(
|
||||
--Neutral-Opacity-Black-10
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Hover: var(--Neutral-70);
|
||||
--Component-Button-Brand-Secondary-Border-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Secondary-Hover-Inverted: var(
|
||||
--Signature-Haymarket-Antique-Brass-50
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Secondary-On-fill-Default: var(--Neutral-90);
|
||||
--Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Secondary-On-fill-Hover: var(--Neutral-70);
|
||||
--Component-Button-Brand-Secondary-On-fill-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Hover: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Default: var(
|
||||
--Signature-Haymarket-Antique-Brass-50
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
|
||||
--Component-Button-Inverted-Hover-Inverted: var(
|
||||
--Signature-Haymarket-Antique-Brass-50
|
||||
);
|
||||
--Component-Button-Inverted-On-fill-Default: var(--Neutral-90);
|
||||
--Component-Button-Inverted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Inverted-On-fill-Hover-inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Disabled-inverted: var(--Neutral-20);
|
||||
--Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5);
|
||||
--Component-Button-Muted-Hover: var(--Neutral-Opacity-White-5);
|
||||
--Component-Button-Muted-On-fill-Default: var(--Neutral-90);
|
||||
--Component-Button-Muted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Muted-On-fill-Hover-Inverted: var(--Neutral-70);
|
||||
--Component-Button-Muted-On-fill-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Icon-Accent: var(--Signature-Haymarket-Vista-White-50);
|
||||
--Icon-Default: var(--Neutral-60);
|
||||
--Icon-Feedback-Error: var(--Scandic-Red-70);
|
||||
--Icon-Feedback-Information: var(--Scandic-Blue-70);
|
||||
--Icon-Feedback-Neutral: var(--Neutral-60);
|
||||
--Icon-Feedback-Success: var(--Scandic-Green-60);
|
||||
--Icon-Feedback-Warning: var(--Scandic-Yellow-60);
|
||||
--Icon-Intense: var(--Neutral-90);
|
||||
--Icon-Interactive-Default: var(--Neutral-90);
|
||||
--Icon-Interactive-Disabled: var(--Neutral-30);
|
||||
--Icon-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Icon-Interactive-Secondary: var(--Signature-Haymarket-Antique-Brass-60);
|
||||
--Icon-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Label-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Label-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Label-Font-weight: var(--Font-weight-Regular);
|
||||
--Label-Size: var(--Impl-Text-size-5xs);
|
||||
--Link-md-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Link-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Link-sm-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Link-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Overlay-10: var(--Neutral-Opacity-Black-10);
|
||||
--Overlay-20: var(--Neutral-Opacity-Black-20);
|
||||
--Overlay-40: var(--Neutral-Opacity-Black-40);
|
||||
--Overlay-60: var(--Neutral-Opacity-Black-60);
|
||||
--Overlay-80: var(--Neutral-Opacity-Black-80);
|
||||
--Overlay-90: var(--Neutral-Opacity-Black-90);
|
||||
--Surface-Accent-1: var(--Signature-Haymarket-Vista-White-60);
|
||||
--Surface-Accent-2: var(--Signature-Haymarket-Bismark-40);
|
||||
--Surface-Accent-3: var(--Signature-Haymarket-Antique-Brass-90);
|
||||
--Surface-Accent-4: var(--Signature-Haymarket-Antique-Brass-40);
|
||||
--Surface-Accent-5: var(--Signature-Haymarket-Bismark-90);
|
||||
--Surface-Brand-Accent-Default: var(--Signature-Haymarket-Antique-Brass-50);
|
||||
--Surface-Brand-Primary-1-Default: var(--Signature-Haymarket-Bismark-60);
|
||||
--Surface-Brand-Primary-2-Default: var(
|
||||
--Signature-Haymarket-Antique-Brass-50
|
||||
);
|
||||
--Surface-Brand-Primary-3-Default: var(--Signature-Haymarket-Vista-White-20);
|
||||
--Surface-Feedback-Error-Accent: var(--Scandic-Red-70);
|
||||
--Surface-Feedback-Error: var(--Scandic-Red-00);
|
||||
--Surface-Feedback-Information-Accent: var(--Scandic-Blue-70);
|
||||
--Surface-Feedback-Information: var(--Scandic-Blue-00);
|
||||
--Surface-Feedback-Neutral-Accent: var(--Neutral-50);
|
||||
--Surface-Feedback-Neutral: var(--Neutral-15);
|
||||
--Surface-Feedback-Succes-Accent: var(--Scandic-Green-60);
|
||||
--Surface-Feedback-Succes: var(--Scandic-Green-00);
|
||||
--Surface-Feedback-Warning--Light: var(--Scandic-Yellow-00);
|
||||
--Surface-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
|
||||
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-Primary-Disabled: var(--Neutral-15);
|
||||
--Surface-Primary-Hover-Accent: var(--Neutral-15);
|
||||
--Surface-Primary-OnSurface-Default: var(--Signature-Haymarket-Vista-White-0);
|
||||
--Surface-Secondary-Default: var(--Signature-Haymarket-Vista-White-0);
|
||||
--Surface-Secondary-Secondary: var(--Signature-Haymarket-Vista-White-0);
|
||||
--Surface-UI-Fill-Active: var(--Neutral-80);
|
||||
--Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-UI-Fill-Disabled: var(--Neutral-15);
|
||||
--Surface-UI-Fill-Intense: var(--Neutral-80);
|
||||
--Tag-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Tag-Font-weight: var(--Font-weight-Medium);
|
||||
--Tag-Size: var(--Impl-Text-size-5xs);
|
||||
--Text-Accent-Primary: var(--Signature-Haymarket-Antique-Brass-60);
|
||||
--Text-Accent-Secondary: var(--Signature-Haymarket-Antique-Brass-60);
|
||||
--Text-Brand-OnAccent-Accent: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnAccent-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnAccent-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-1-Accent: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-1-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Accent: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Accent: var(--Neutral-90);
|
||||
--Text-Brand-OnPrimary-3-Default: var(--Neutral-90);
|
||||
--Text-Brand-OnPrimary-3-Heading: var(--Neutral-90);
|
||||
--Text-Default: var(--Neutral-90);
|
||||
--Text-Heading: var(--Neutral-90);
|
||||
--Text-Interactive-Default: var(--Neutral-90);
|
||||
--Text-Interactive-Disabled: var(--Neutral-40);
|
||||
--Text-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Text-Interactive-Focus: var(--Neutral-80);
|
||||
--Text-Interactive-Hover-Secondary: var(
|
||||
--Signature-Haymarket-Antique-Brass-40
|
||||
);
|
||||
--Text-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Text-Interactive-Secondary: var(--Signature-Haymarket-Antique-Brass-60);
|
||||
--Text-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Text-Secondary: var(--Neutral-60);
|
||||
--Text-Tertiary: var(--Neutral-50);
|
||||
--Title-Decorative-lg-Font-family: var(--Font-family-Haymarket-Decorative);
|
||||
--Title-Decorative-lg-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Decorative-lg-Size: var(--Impl-Text-size-xs);
|
||||
--Title-Decorative-md-Font-family: var(--Font-family-Haymarket-Decorative);
|
||||
--Title-Decorative-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Decorative-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Title-Overline-sm-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Title-Overline-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Overline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Title-Subtitle-lg-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Title-Subtitle-lg-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-lg-Size: var(--Impl-Text-size-sm);
|
||||
--Title-Subtitle-md-Font-family: var(--Font-family-Haymarket-Body);
|
||||
--Title-Subtitle-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-md-Size: var(--Impl-Text-size-xs);
|
||||
--Title-lg-Font-family: var(--Font-family-Haymarket-Title);
|
||||
--Title-lg-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-lg-Size: var(--Impl-Text-size-4xl);
|
||||
--Title-md-Font-family: var(--Font-family-Haymarket-Title);
|
||||
--Title-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-md-LowCase-Font-family: var(--Font-family-Haymarket-Title);
|
||||
--Title-md-LowCase-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-md-LowCase-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-md-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-sm-Font-family: var(--Font-family-Haymarket-Title);
|
||||
--Title-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-sm-LowCase-Font-family: var(--Font-family-Haymarket-Title);
|
||||
--Title-sm-LowCase-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-sm-LowCase-Size: var(--Impl-Text-size-lg);
|
||||
--Title-sm-Size: var(--Impl-Text-size-lg);
|
||||
--Title-xs-Font-family: var(--Font-family-Haymarket-Title);
|
||||
--Title-xs-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-xs-Size: var(--Impl-Text-size-sm);
|
||||
}
|
||||
292
packages/design-system/lib/styles/haymarket.js
Normal file
292
packages/design-system/lib/styles/haymarket.js
Normal file
@@ -0,0 +1,292 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
export const theme = {
|
||||
'Signature/Haymarket/Antique Brass/0': '#F9F5F1',
|
||||
'Signature/Haymarket/Antique Brass/10': '#EDE3D8',
|
||||
'Signature/Haymarket/Antique Brass/20': '#D9C3AE',
|
||||
'Signature/Haymarket/Antique Brass/30': '#C5A384',
|
||||
'Signature/Haymarket/Antique Brass/40': '#BA8E6E',
|
||||
'Signature/Haymarket/Antique Brass/50': '#946F54',
|
||||
'Signature/Haymarket/Antique Brass/60': '#805E45',
|
||||
'Signature/Haymarket/Antique Brass/70': '#634732',
|
||||
'Signature/Haymarket/Antique Brass/80': '#5D4330',
|
||||
'Signature/Haymarket/Antique Brass/90': '#483425',
|
||||
'Signature/Haymarket/Antique Brass/100': '#37271C',
|
||||
'Signature/Haymarket/Vista White/0': '#FBF7F6',
|
||||
'Signature/Haymarket/Vista White/10': '#F6ECEA',
|
||||
'Signature/Haymarket/Vista White/20': '#F0DDD8',
|
||||
'Signature/Haymarket/Vista White/30': '#E4C5BD',
|
||||
'Signature/Haymarket/Vista White/40': '#D3A296',
|
||||
'Signature/Haymarket/Vista White/50': '#C08273',
|
||||
'Signature/Haymarket/Vista White/60': '#AA6858',
|
||||
'Signature/Haymarket/Vista White/70': '#8E5547',
|
||||
'Signature/Haymarket/Vista White/80': '#76493E',
|
||||
'Signature/Haymarket/Vista White/90': '#644138',
|
||||
'Signature/Haymarket/Vista White/100': '#351F1A',
|
||||
'Signature/Haymarket/Bismark/0': '#F3F8F8',
|
||||
'Signature/Haymarket/Bismark/10': '#E0EBED',
|
||||
'Signature/Haymarket/Bismark/20': '#C5D7DC',
|
||||
'Signature/Haymarket/Bismark/30': '#9DBCC3',
|
||||
'Signature/Haymarket/Bismark/40': '#6E98A2',
|
||||
'Signature/Haymarket/Bismark/50': '#527C88',
|
||||
'Signature/Haymarket/Bismark/60': '#4A6C78',
|
||||
'Signature/Haymarket/Bismark/70': '#3E5760',
|
||||
'Signature/Haymarket/Bismark/80': '#394951',
|
||||
'Signature/Haymarket/Bismark/90': '#334046',
|
||||
'Signature/Haymarket/Bismark/100': '#1E282E',
|
||||
'Title/lg/Letter spacing': 1.44,
|
||||
'Title/lg/Font fallback': 'Serif',
|
||||
'Title/lg/Text-Transform': 'unset',
|
||||
'Title/md/Letter spacing': 0.36,
|
||||
'Title/md/Font fallback': 'Serif',
|
||||
'Title/sm/Letter spacing': 0.56,
|
||||
'Title/sm/Font fallback': 'Serif',
|
||||
'Title/sm/Text-Transform': 'unset',
|
||||
'Title/Decorative/lg/Letter spacing': 0.6,
|
||||
'Title/Decorative/lg/Font fallback': 'Serif',
|
||||
'Title/Decorative/lg/Text-Transform': 'uppercase',
|
||||
'Title/Decorative/md/Letter spacing': 0.64,
|
||||
'Title/Decorative/md/Font fallback': 'Serif',
|
||||
'Title/Decorative/md/Text-Transform': 'uppercase',
|
||||
'Title/Subtitle/lg/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/lg/Letter spacing': 0.24,
|
||||
'Title/Subtitle/md/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/md/Letter spacing': 0.2,
|
||||
'Title/Overline/sm/Letter spacing': 0.21,
|
||||
'Title/Overline/sm/Font fallback': 'sans-serif',
|
||||
'Title/Overline/sm/Text-Transform': 'uppercase',
|
||||
'Title/sm/LowCase/Letter spacing': 0.56,
|
||||
'Title/sm/LowCase/Font fallback': 'Serif',
|
||||
'Title/sm/LowCase/Text-Transform': 'unset',
|
||||
'Title/xs/Letter spacing': 0.24,
|
||||
'Title/xs/Font fallback': 'Serif',
|
||||
'Title/xs/Text-Transform': 'unset',
|
||||
'Title/md/Text-Transform': 'unset',
|
||||
'Title/md/LowCase/Letter spacing': 0.36,
|
||||
'Title/md/LowCase/Font fallback': 'Serif',
|
||||
'Title/md/LowCase/Text-Transform': 'unset',
|
||||
'Tag/Letter spacing': 0.24,
|
||||
'Tag/Font fallback': 'sans-serif',
|
||||
'Tag/Text-Transform': 'uppercase',
|
||||
'Link/md/Font fallback': 'sans-serif',
|
||||
'Link/md/Letter spacing': 0.19,
|
||||
'Link/sm/Font fallback': 'sans-serif',
|
||||
'Link/sm/Letter spacing': 0.2,
|
||||
'Body/Lead text/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Letter spacing': 0.19,
|
||||
'Body/Supporting text/Font fallback': 'sans-serif',
|
||||
'Body/Supporting text/Letter spacing': 0.2,
|
||||
'Body/Lead text/Letter spacing': 0.2,
|
||||
'Label/Font fallback': 'sans-serif',
|
||||
'Label/Letter spacing': 0.17,
|
||||
'Body/Underline/md/Font fallback': 'sans-serif',
|
||||
'Body/Underline/md/Letter spacing': 0.19,
|
||||
'Body/Underline/sm/Font fallback': 'sans-serif',
|
||||
'Body/Underline/sm/Letter spacing': 0.2,
|
||||
'Surface/Brand/Primary 1/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent': '#FFFFFF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Accent': '#FFFFFF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Accent': '#FFFFFF',
|
||||
'Utilities/Gradients/10': '#F0DDD81A',
|
||||
'Font family/Haymarket/Title': 'Prumo text',
|
||||
'Font family/Haymarket/Body': 'Fira sans',
|
||||
'Font family/Haymarket/Decorative': 'Prumo text',
|
||||
'Title/lg/Font weight': 400,
|
||||
'Title/lg/Font family': 'Prumo text',
|
||||
'Title/md/Font weight': 400,
|
||||
'Title/md/Font family': 'Prumo text',
|
||||
'Title/sm/Font weight': 400,
|
||||
'Title/sm/Font family': 'Prumo text',
|
||||
'Title/sm/LowCase/Font weight': 400,
|
||||
'Title/sm/LowCase/Font family': 'Prumo text',
|
||||
'Title/Decorative/lg/Font weight': 400,
|
||||
'Title/Decorative/lg/Font family': 'Prumo text',
|
||||
'Title/Decorative/md/Font weight': 400,
|
||||
'Title/Decorative/md/Font family': 'Prumo text',
|
||||
'Title/Subtitle/lg/Font weight': 500,
|
||||
'Title/Subtitle/lg/Font family': 'Fira sans',
|
||||
'Title/Subtitle/md/Font weight': 500,
|
||||
'Title/Subtitle/md/Font family': 'Fira sans',
|
||||
'Title/Overline/sm/Font weight': 500,
|
||||
'Title/Overline/sm/Font family': 'Fira sans',
|
||||
'Title/xs/Font weight': 400,
|
||||
'Title/xs/Font family': 'Prumo text',
|
||||
'Title/md/LowCase/Font weight': 400,
|
||||
'Title/md/LowCase/Font family': 'Prumo text',
|
||||
'Tag/Font weight': 500,
|
||||
'Tag/Font family': 'Fira sans',
|
||||
'Link/md/Font weight': 500,
|
||||
'Link/md/Font family': 'Fira sans',
|
||||
'Link/sm/Font weight': 500,
|
||||
'Link/sm/Font family': 'Fira sans',
|
||||
'Body/Lead text/Font weight': 400,
|
||||
'Body/Lead text/Font family': 'Fira sans',
|
||||
'Body/Paragraph/Font weight': 400,
|
||||
'Body/Paragraph/Font weight 2': 500,
|
||||
'Body/Paragraph/Font family': 'Fira sans',
|
||||
'Body/Supporting text/Font weight': 400,
|
||||
'Body/Supporting text/Font weight 2': 500,
|
||||
'Body/Supporting text/Font family': 'Fira sans',
|
||||
'Label/Font weight': 400,
|
||||
'Label/Font weight 2': 500,
|
||||
'Label/Font family': 'Fira sans',
|
||||
'Body/Underline/md/Font weight': 400,
|
||||
'Body/Underline/md/Font family': 'Fira sans',
|
||||
'Body/Underline/sm/Font weight': 400,
|
||||
'Body/Underline/sm/Font family': 'Fira sans',
|
||||
'Text/Heading': '#1F1F1F',
|
||||
'Text/Default': '#1F1F1F',
|
||||
'Text/Secondary': '#575757',
|
||||
'Text/Tertiary': '#747474',
|
||||
'Text/Accent Primary': '#805E45',
|
||||
'Text/Accent Secondary': '#805E45',
|
||||
'Text/Inverted': '#FFFFFF',
|
||||
'Text/Interactive/Default': '#1F1F1F',
|
||||
'Text/Interactive/Secondary': '#805E45',
|
||||
'Text/Interactive/Hover Secondary': '#BA8E6E',
|
||||
'Text/Interactive/Disabled': '#8C8C8C',
|
||||
'Text/Interactive/Focus': '#262626',
|
||||
'Text/Interactive/Error': '#AD0015',
|
||||
'Text/Interactive/Placeholder': '#747474',
|
||||
'Text/Brand/OnAccent/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnAccent/Default': '#FFFFFF',
|
||||
'Text/Brand/OnAccent/Accent': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Accent': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Accent': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Heading': '#1F1F1F',
|
||||
'Text/Brand/OnPrimary 3/Default': '#1F1F1F',
|
||||
'Text/Brand/OnPrimary 3/Accent': '#1F1F1F',
|
||||
'Background/Primary': '#FFFFFF',
|
||||
'Background/Secondary': '#FFFFFF',
|
||||
'Surface/Primary/Default': '#FFFFFF',
|
||||
'Surface/Primary/Hover': '#f2f2f2',
|
||||
'Surface/Primary/Hover Light': '#e6e5e5',
|
||||
'Surface/Primary/Hover Accent': '#E9E9E9',
|
||||
'Surface/Primary/OnSurface/Default': '#FBF7F6',
|
||||
'Surface/Primary/Disabled': '#E9E9E9',
|
||||
'Surface/Secondary/Default': '#FBF7F6',
|
||||
'Surface/Secondary/Secondary': '#FBF7F6',
|
||||
'Surface/Secondary/Hover': '#efebea',
|
||||
'Surface/Brand/Accent/Default': '#946F54',
|
||||
'Surface/Brand/Primary 1/Default': '#4A6C78',
|
||||
'Surface/Brand/Primary 2/Default': '#946F54',
|
||||
'Surface/Brand/Primary 3/Default': '#F0DDD8',
|
||||
'Surface/UI Fill/Default': '#FFFFFF',
|
||||
'Surface/UI Fill/Intense': '#262626',
|
||||
'Surface/UI Fill/Active': '#262626',
|
||||
'Surface/UI Fill/Active Hover': '#ffffff',
|
||||
'Surface/UI Fill/Disabled': '#E9E9E9',
|
||||
'Surface/Accent/1': '#AA6858',
|
||||
'Surface/Accent/2': '#6E98A2',
|
||||
'Surface/Accent/3': '#483425',
|
||||
'Surface/Accent/4': '#BA8E6E',
|
||||
'Surface/Accent/5': '#334046',
|
||||
'Surface/Feedback/Information Accent': '#284EA0',
|
||||
'Surface/Feedback/Information': '#E8F6FF',
|
||||
'Surface/Feedback/Succes Accent': '#348337',
|
||||
'Surface/Feedback/Succes': '#F3FCE8',
|
||||
'Surface/Feedback/Warning Accent': '#D17308',
|
||||
'Surface/Feedback/Warning Light': '#FFF8E3',
|
||||
'Surface/Feedback/Error Accent': '#AD0015',
|
||||
'Surface/Feedback/Error': '#FFEBEB',
|
||||
'Surface/Feedback/Neutral Accent': '#747474',
|
||||
'Surface/Feedback/Neutral': '#E9E9E9',
|
||||
'Border/Default': '#D9D9D9',
|
||||
'Border/Intense': '#BFBFBF',
|
||||
'Border/Inverted': '#FFFFFF',
|
||||
'Icon/Default': '#575757',
|
||||
'Icon/Intense': '#1F1F1F',
|
||||
'Icon/Accent': '#C08273',
|
||||
'Icon/Interactive/Default': '#1F1F1F',
|
||||
'Icon/Interactive/Secondary': '#805E45',
|
||||
'Icon/Interactive/Disabled': '#BFBFBF',
|
||||
'Icon/Interactive/Placeholder': '#747474',
|
||||
'Icon/Feedback/Information': '#284EA0',
|
||||
'Icon/Feedback/Success': '#348337',
|
||||
'Icon/Feedback/Warning': '#D17308',
|
||||
'Icon/Feedback/Error': '#AD0015',
|
||||
'Icon/Feedback/Neutral': '#575757',
|
||||
'Icon/Inverted': '#FFFFFF',
|
||||
'Overlay/10': '#1F1C1B1A',
|
||||
'Overlay/20': '#1F1C1B33',
|
||||
'Overlay/40': '#1F1C1B66',
|
||||
'Overlay/60': '#1F1C1B99',
|
||||
'Overlay/80': '#1F1C1BCC',
|
||||
'Overlay/90': '#1F1C1BE6',
|
||||
'Component/Button/Brand/Primary/Default': '#1F1F1F',
|
||||
'Component/Button/Brand/Primary/Hover': '#323232',
|
||||
'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Hover Inverted': '#946F54',
|
||||
'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Secondary/On fill/Default': '#1F1F1F',
|
||||
'Component/Button/Brand/Secondary/On fill/Hover': '#454545',
|
||||
'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Secondary/Border/Default': '#1F1F1F',
|
||||
'Component/Button/Brand/Secondary/Border/Hover': '#454545',
|
||||
'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Border/Hover inverted': '#e6e6e6',
|
||||
'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/Default': '#946F54',
|
||||
'Component/Button/Brand/Tertiary/Hover': '#87664e',
|
||||
'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Default': '#FFFFFF',
|
||||
'Component/Button/Inverted/Faded': '#FFFFFFE6',
|
||||
'Component/Button/Inverted/Hover': '#f2f2f2',
|
||||
'Component/Button/Inverted/Hover Inverted': '#946F54',
|
||||
'Component/Button/Inverted/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Inverted/On fill/Default': '#1F1F1F',
|
||||
'Component/Button/Inverted/On fill/Hover': '#323232',
|
||||
'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
|
||||
'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Inverted/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
|
||||
'Border/Interactive/Default': '#BFBFBF',
|
||||
'Border/Divider/Default': '#D9D9D9',
|
||||
'Border/Divider/Subtle': '#E9E9E9',
|
||||
'Border/Divider/Accent': '#BFBFBF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Default': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Secondary': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Border/Interactive/Selected': '#262626',
|
||||
'Border/Interactive/Focus': '#262626',
|
||||
'Border/Interactive/Disabled': '#BFBFBF',
|
||||
'Border/Interactive/Error': '#AD0015',
|
||||
'Border/Interactive/KeyboardFocus': '#5B8FD4',
|
||||
'Component/Button/Muted/Default': '#FFFFFF00',
|
||||
'Component/Button/Muted/Hover': '#FFFFFF00',
|
||||
'Component/Button/Muted/Disabled': '#FFFFFF1A',
|
||||
'Component/Button/Muted/Hover inverted': '#1F1C1B0D',
|
||||
'Component/Button/Muted/Disabled inverted': '#D9D9D9',
|
||||
'Component/Button/Muted/On fill/Default': '#1F1F1F',
|
||||
'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Muted/On fill/Hover Inverted': '#454545',
|
||||
'Component/Button/Muted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Muted/Border/Default': '#FFFFFF1A',
|
||||
'Component/Button/Muted/Border/Hover': '#ffffff30',
|
||||
'Component/Button/Muted/Border/Disable': '#FFFFFF1A',
|
||||
}
|
||||
353
packages/design-system/lib/styles/hotel-norge.css
Normal file
353
packages/design-system/lib/styles/hotel-norge.css
Normal file
@@ -0,0 +1,353 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
.hotel-norge {
|
||||
/* Values */
|
||||
--Body-Lead-text-Font-fallback: sans-serif;
|
||||
--Body-Lead-text-Letter-spacing: 0.2px;
|
||||
--Body-Paragraph-Font-fallback: sans-serif;
|
||||
--Body-Paragraph-Letter-spacing: 0.19px;
|
||||
--Body-Supporting-text-Font-fallback: sans-serif;
|
||||
--Body-Supporting-text-Letter-spacing: 0.2px;
|
||||
--Body-Underline-md-Font-fallback: sans-serif;
|
||||
--Body-Underline-md-Letter-spacing: 0.19px;
|
||||
--Body-Underline-sm-Font-fallback: sans-serif;
|
||||
--Body-Underline-sm-Letter-spacing: 0.2px;
|
||||
--Component-Button-Brand-Primary-Hover: #2c3146;
|
||||
--Component-Button-Brand-Secondary-Border-Hover-inverted: #e5e6e9;
|
||||
--Component-Button-Brand-Tertiary-Hover: #215448;
|
||||
--Component-Button-Inverted-Hover: #f2f2f2;
|
||||
--Component-Button-Inverted-On-fill-Hover: #2c3146;
|
||||
--Component-Button-Muted-Border-Hover: #ffffff30;
|
||||
--Font-family-Hotel-Norge-Body: 'Fira sans';
|
||||
--Font-family-Hotel-Norge-Decorative: 'Domaine Sans Text';
|
||||
--Font-family-Hotel-Norge-Title: 'Domaine Sans Text';
|
||||
--Label-Font-fallback: sans-serif;
|
||||
--Label-Letter-spacing: 0.17px;
|
||||
--Link-md-Font-fallback: sans-serif;
|
||||
--Link-md-Letter-spacing: 0.19px;
|
||||
--Link-sm-Font-fallback: sans-serif;
|
||||
--Link-sm-Letter-spacing: 0.2px;
|
||||
--Signature-Hotel-Norge-Dark-blue-0: #b7c5c8;
|
||||
--Signature-Hotel-Norge-Dark-blue-100: #2f3445;
|
||||
--Signature-Hotel-Norge-Dark-blue-30: #858f97;
|
||||
--Signature-Hotel-Norge-Dark-blue-80: #404655;
|
||||
--Signature-Hotel-Norge-Dark-blue-90: #181e34;
|
||||
--Signature-Hotel-Norge-Emerald-0: #c7ddd5;
|
||||
--Signature-Hotel-Norge-Emerald-100: #004337;
|
||||
--Signature-Hotel-Norge-Emerald-80: #3a655c;
|
||||
--Signature-Hotel-Norge-Emerald-90: #26544a;
|
||||
--Signature-Hotel-Norge-Off-White-0: #fdfefd;
|
||||
--Signature-Hotel-Norge-Off-White-100: #646563;
|
||||
--Signature-Hotel-Norge-Off-White-10: #fafaf9;
|
||||
--Signature-Hotel-Norge-Off-White-20: #f8f8f6;
|
||||
--Signature-Hotel-Norge-Off-White-30: #f4f5f2;
|
||||
--Signature-Hotel-Norge-Off-White-40: #f2f3ef;
|
||||
--Signature-Hotel-Norge-Off-White-50: #eff0eb;
|
||||
--Signature-Hotel-Norge-Off-White-60: #d9dad6;
|
||||
--Signature-Hotel-Norge-Off-White-70: #aaaaa7;
|
||||
--Signature-Hotel-Norge-Off-White-80: #838481;
|
||||
--Signature-Hotel-Norge-Off-White-90: #6f716f;
|
||||
--Signature-Hotel-Norge-Salmon-50: #ec615b;
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff;
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-1-OnSurface-Default: #ffffff;
|
||||
--Surface-Brand-Primary-2-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-2-OnSurface-Default: #ffffff;
|
||||
--Surface-Brand-Primary-3-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-3-OnSurface-Default: #ffffff;
|
||||
--Surface-Primary-Hover-Light: #e6e5e5;
|
||||
--Surface-Primary-Hover: #f2f2f2;
|
||||
--Surface-Secondary-Hover: #e3e4df;
|
||||
--Tag-Font-fallback: sans-serif;
|
||||
--Tag-Letter-spacing: 0.18px;
|
||||
--Tag-Text-Transform: uppercase;
|
||||
--Title-Decorative-lg-Font-fallback: sans-serif;
|
||||
--Title-Decorative-lg-Letter-spacing: 0.24px;
|
||||
--Title-Decorative-lg-Text-Transform: uppercase;
|
||||
--Title-Decorative-md-Font-fallback: sans-serif;
|
||||
--Title-Decorative-md-Letter-spacing: 0.32px;
|
||||
--Title-Decorative-md-Text-Transform: uppercase;
|
||||
--Title-Overline-sm-Font-fallback: sans-serif;
|
||||
--Title-Overline-sm-Letter-spacing: 0.21px;
|
||||
--Title-Overline-sm-Text-Transform: uppercase;
|
||||
--Title-Subtitle-lg-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-lg-Letter-spacing: 0.24px;
|
||||
--Title-Subtitle-md-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-md-Letter-spacing: 0.2px;
|
||||
--Title-lg-Font-fallback: sans-serif;
|
||||
--Title-lg-Letter-spacing: 0px;
|
||||
--Title-lg-Text-Transform: unset;
|
||||
--Title-md-Font-fallback: sans-serif;
|
||||
--Title-md-Letter-spacing: 0.36px;
|
||||
--Title-md-LowCase-Font-fallback: sans-serif;
|
||||
--Title-md-LowCase-Letter-spacing: 0.36px;
|
||||
--Title-md-LowCase-Text-Transform: unset;
|
||||
--Title-md-Text-Transform: unset;
|
||||
--Title-sm-Font-fallback: sans-serif;
|
||||
--Title-sm-Letter-spacing: 0px;
|
||||
--Title-sm-LowCase-Font-fallback: sans-serif;
|
||||
--Title-sm-LowCase-Letter-spacing: 0px;
|
||||
--Title-sm-LowCase-Text-Transform: unset;
|
||||
--Title-sm-Text-Transform: unset;
|
||||
--Title-xs-Font-fallback: sans-serif;
|
||||
--Title-xs-Letter-spacing: -0.05px;
|
||||
--Title-xs-Text-Transform: unset;
|
||||
--Utilities-Gradients-10: #3c43361a;
|
||||
|
||||
/* Aliases */
|
||||
--Background-Primary: var(--Neutral-Opacity-White-100);
|
||||
--Background-Secondary: var(--Neutral-Opacity-White-100);
|
||||
--Body-Lead-text-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Body-Lead-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Lead-text-Size: var(--Impl-Text-size-xs);
|
||||
--Body-Paragraph-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Body-Paragraph-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Paragraph-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Paragraph-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Supporting-text-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Body-Supporting-text-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Supporting-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Supporting-text-Size: var(--Impl-Text-size-4xs);
|
||||
--Body-Underline-md-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Body-Underline-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Underline-sm-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Body-Underline-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Border-Default: var(--Neutral-20);
|
||||
--Border-Divider-Accent: var(--Neutral-30);
|
||||
--Border-Divider-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Brand-OnPrimary-1-Secondary: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Border-Divider-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Default: var(--Neutral-20);
|
||||
--Border-Divider-Subtle: var(--Neutral-15);
|
||||
--Border-Intense: var(--Neutral-30);
|
||||
--Border-Interactive-Default: var(--Neutral-30);
|
||||
--Border-Interactive-Disabled: var(--Neutral-30);
|
||||
--Border-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Border-Interactive-Focus: var(--Neutral-80);
|
||||
--Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
|
||||
--Border-Interactive-Selected: var(--Neutral-80);
|
||||
--Border-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Primary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Primary-Default: var(
|
||||
--Signature-Hotel-Norge-Dark-blue-90
|
||||
);
|
||||
--Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Primary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Primary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Primary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Default: var(
|
||||
--Signature-Hotel-Norge-Dark-blue-90
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Disabled: var(
|
||||
--Neutral-Opacity-Black-10
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Hover: var(
|
||||
--Signature-Hotel-Norge-Dark-blue-80
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Secondary-Hover-Inverted: var(
|
||||
--Signature-Hotel-Norge-Emerald-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Secondary-On-fill-Default: var(
|
||||
--Signature-Hotel-Norge-Dark-blue-90
|
||||
);
|
||||
--Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Secondary-On-fill-Hover: var(
|
||||
--Signature-Hotel-Norge-Dark-blue-80
|
||||
);
|
||||
--Component-Button-Brand-Secondary-On-fill-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Hover: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Default: var(
|
||||
--Signature-Hotel-Norge-Emerald-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
|
||||
--Component-Button-Inverted-Hover-Inverted: var(
|
||||
--Signature-Hotel-Norge-Emerald-100
|
||||
);
|
||||
--Component-Button-Inverted-On-fill-Default: var(
|
||||
--Signature-Hotel-Norge-Dark-blue-90
|
||||
);
|
||||
--Component-Button-Inverted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Inverted-On-fill-Hover-inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Disabled-inverted: var(--Neutral-20);
|
||||
--Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5);
|
||||
--Component-Button-Muted-Hover: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Muted-On-fill-Default: var(--Neutral-90);
|
||||
--Component-Button-Muted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Muted-On-fill-Hover-Inverted: var(
|
||||
--Signature-Hotel-Norge-Dark-blue-80
|
||||
);
|
||||
--Component-Button-Muted-On-fill-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Icon-Accent: var(--Signature-Hotel-Norge-Salmon-50);
|
||||
--Icon-Default: var(--Neutral-60);
|
||||
--Icon-Feedback-Error: var(--Scandic-Red-70);
|
||||
--Icon-Feedback-Information: var(--Scandic-Blue-70);
|
||||
--Icon-Feedback-Neutral: var(--Neutral-60);
|
||||
--Icon-Feedback-Success: var(--Scandic-Green-60);
|
||||
--Icon-Feedback-Warning: var(--Scandic-Yellow-60);
|
||||
--Icon-Intense: var(--Neutral-90);
|
||||
--Icon-Interactive-Default: var(--Signature-Hotel-Norge-Dark-blue-90);
|
||||
--Icon-Interactive-Disabled: var(--Neutral-30);
|
||||
--Icon-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Icon-Interactive-Secondary: var(--Signature-Hotel-Norge-Emerald-90);
|
||||
--Icon-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Label-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Label-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Label-Font-weight: var(--Font-weight-Regular);
|
||||
--Label-Size: var(--Impl-Text-size-5xs);
|
||||
--Link-md-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Link-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Link-sm-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Link-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Overlay-10: var(--Neutral-Opacity-Black-10);
|
||||
--Overlay-20: var(--Neutral-Opacity-Black-20);
|
||||
--Overlay-40: var(--Neutral-Opacity-Black-40);
|
||||
--Overlay-60: var(--Neutral-Opacity-Black-60);
|
||||
--Overlay-80: var(--Neutral-Opacity-Black-80);
|
||||
--Overlay-90: var(--Neutral-Opacity-Black-90);
|
||||
--Surface-Accent-1: var(--Signature-Hotel-Norge-Salmon-50);
|
||||
--Surface-Accent-2: var(--Scandic-Blue-70);
|
||||
--Surface-Accent-3: var(--Signature-Hotel-Norge-Emerald-100);
|
||||
--Surface-Accent-4: var(--Signature-Hotel-Norge-Dark-blue-30);
|
||||
--Surface-Accent-5: var(--Signature-Hotel-Norge-Dark-blue-80);
|
||||
--Surface-Brand-Accent-Default: var(--Signature-Hotel-Norge-Emerald-0);
|
||||
--Surface-Brand-Primary-1-Default: var(--Signature-Hotel-Norge-Dark-blue-90);
|
||||
--Surface-Brand-Primary-2-Default: var(--Signature-Hotel-Norge-Dark-blue-90);
|
||||
--Surface-Brand-Primary-3-Default: var(--Signature-Hotel-Norge-Emerald-100);
|
||||
--Surface-Feedback-Error-Accent: var(--Scandic-Red-70);
|
||||
--Surface-Feedback-Error: var(--Scandic-Red-00);
|
||||
--Surface-Feedback-Information-Accent: var(--Scandic-Blue-70);
|
||||
--Surface-Feedback-Information: var(--Scandic-Blue-00);
|
||||
--Surface-Feedback-Neutral-Accent: var(--Neutral-50);
|
||||
--Surface-Feedback-Neutral: var(--Neutral-15);
|
||||
--Surface-Feedback-Succes-Accent: var(--Scandic-Green-60);
|
||||
--Surface-Feedback-Succes: var(--Scandic-Green-00);
|
||||
--Surface-Feedback-Warning--Light: var(--Scandic-Yellow-00);
|
||||
--Surface-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
|
||||
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-Primary-Disabled: var(--Neutral-15);
|
||||
--Surface-Primary-Hover-Accent: var(--Neutral-15);
|
||||
--Surface-Primary-OnSurface-Default: var(
|
||||
--Signature-Hotel-Norge-Off-White-30
|
||||
);
|
||||
--Surface-Secondary-Default: var(--Signature-Hotel-Norge-Off-White-50);
|
||||
--Surface-Secondary-Secondary: var(--Signature-Hotel-Norge-Off-White-50);
|
||||
--Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100);
|
||||
--Surface-UI-Fill-Active: var(--Neutral-80);
|
||||
--Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-UI-Fill-Disabled: var(--Neutral-15);
|
||||
--Surface-UI-Fill-Intense: var(--Neutral-80);
|
||||
--Tag-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Tag-Font-weight: var(--Font-weight-Medium);
|
||||
--Tag-Size: var(--Impl-Text-size-5xs);
|
||||
--Text-Accent-Primary: var(--Neutral-50);
|
||||
--Text-Accent-Secondary: var(--Neutral-50);
|
||||
--Text-Brand-OnAccent-Accent: var(--Signature-Hotel-Norge-Emerald-100);
|
||||
--Text-Brand-OnAccent-Default: var(--Neutral-90);
|
||||
--Text-Brand-OnAccent-Heading: var(--Neutral-90);
|
||||
--Text-Brand-OnPrimary-1-Accent: var(--Signature-Hotel-Norge-Dark-blue-0);
|
||||
--Text-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-1-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Accent: var(--Signature-Hotel-Norge-Emerald-0);
|
||||
--Text-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Accent: var(--Signature-Hotel-Norge-Emerald-0);
|
||||
--Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Default: var(--Neutral-90);
|
||||
--Text-Heading: var(--Neutral-90);
|
||||
--Text-Interactive-Default: var(--Signature-Hotel-Norge-Dark-blue-90);
|
||||
--Text-Interactive-Disabled: var(--Neutral-40);
|
||||
--Text-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Text-Interactive-Focus: var(--Neutral-80);
|
||||
--Text-Interactive-Hover-Secondary: var(--Signature-Hotel-Norge-Emerald-80);
|
||||
--Text-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Text-Interactive-Secondary: var(--Signature-Hotel-Norge-Emerald-90);
|
||||
--Text-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Text-Secondary: var(--Neutral-60);
|
||||
--Text-Tertiary: var(--Neutral-50);
|
||||
--Title-Decorative-lg-Font-family: var(--Font-family-Hotel-Norge-Decorative);
|
||||
--Title-Decorative-lg-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Decorative-lg-Size: var(--Impl-Text-size-sm);
|
||||
--Title-Decorative-md-Font-family: var(--Font-family-Hotel-Norge-Title);
|
||||
--Title-Decorative-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Decorative-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Title-Overline-sm-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Title-Overline-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Overline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Title-Subtitle-lg-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Title-Subtitle-lg-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-lg-Size: var(--Impl-Text-size-sm);
|
||||
--Title-Subtitle-md-Font-family: var(--Font-family-Hotel-Norge-Body);
|
||||
--Title-Subtitle-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-md-Size: var(--Impl-Text-size-xs);
|
||||
--Title-lg-Font-family: var(--Font-family-Hotel-Norge-Title);
|
||||
--Title-lg-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-lg-Size: var(--Impl-Text-size-4xl);
|
||||
--Title-md-Font-family: var(--Font-family-Hotel-Norge-Title);
|
||||
--Title-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-md-LowCase-Font-family: var(--Font-family-Hotel-Norge-Title);
|
||||
--Title-md-LowCase-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-md-LowCase-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-md-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-sm-Font-family: var(--Font-family-Hotel-Norge-Title);
|
||||
--Title-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-sm-LowCase-Font-family: var(--Font-family-Hotel-Norge-Title);
|
||||
--Title-sm-LowCase-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-sm-LowCase-Size: var(--Impl-Text-size-lg);
|
||||
--Title-sm-Size: var(--Impl-Text-size-lg);
|
||||
--Title-xs-Font-family: var(--Font-family-Hotel-Norge-Title);
|
||||
--Title-xs-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-xs-Size: var(--Impl-Text-size-sm);
|
||||
}
|
||||
277
packages/design-system/lib/styles/hotel-norge.js
Normal file
277
packages/design-system/lib/styles/hotel-norge.js
Normal file
@@ -0,0 +1,277 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
export const theme = {
|
||||
'Signature/Hotel Norge/Off White/0': '#FDFEFD',
|
||||
'Signature/Hotel Norge/Off White/10': '#FAFAF9',
|
||||
'Signature/Hotel Norge/Off White/20': '#F8F8F6',
|
||||
'Signature/Hotel Norge/Off White/30': '#F4F5F2',
|
||||
'Signature/Hotel Norge/Off White/40': '#F2F3EF',
|
||||
'Signature/Hotel Norge/Off White/50': '#EFF0EB',
|
||||
'Signature/Hotel Norge/Off White/60': '#D9DAD6',
|
||||
'Signature/Hotel Norge/Off White/70': '#AAAAA7',
|
||||
'Signature/Hotel Norge/Emerald/0': '#C7DDD5',
|
||||
'Signature/Hotel Norge/Emerald/80': '#3A655C',
|
||||
'Signature/Hotel Norge/Off White/80': '#838481',
|
||||
'Signature/Hotel Norge/Off White/90': '#6F716F',
|
||||
'Signature/Hotel Norge/Emerald/90': '#26544A',
|
||||
'Signature/Hotel Norge/Off White/100': '#646563',
|
||||
'Signature/Hotel Norge/Emerald/100': '#004337',
|
||||
'Signature/Hotel Norge/Dark blue/0': '#B7C5C8',
|
||||
'Signature/Hotel Norge/Dark blue/30': '#858F97',
|
||||
'Signature/Hotel Norge/Dark blue/80': '#404655',
|
||||
'Signature/Hotel Norge/Dark blue/90': '#181E34',
|
||||
'Signature/Hotel Norge/Dark blue/100': '#2F3445',
|
||||
'Signature/Hotel Norge/Salmon/50': '#EC615B',
|
||||
'Title/lg/Font fallback': 'sans-serif',
|
||||
'Title/lg/Text-Transform': 'unset',
|
||||
'Title/md/Letter spacing': 0.36,
|
||||
'Title/md/Font fallback': 'sans-serif',
|
||||
'Title/sm/Font fallback': 'sans-serif',
|
||||
'Title/sm/Text-Transform': 'unset',
|
||||
'Title/Decorative/lg/Letter spacing': 0.24,
|
||||
'Title/Decorative/lg/Font fallback': 'sans-serif',
|
||||
'Title/Decorative/lg/Text-Transform': 'uppercase',
|
||||
'Title/Decorative/md/Letter spacing': 0.32,
|
||||
'Title/Decorative/md/Font fallback': 'sans-serif',
|
||||
'Title/Decorative/md/Text-Transform': 'uppercase',
|
||||
'Title/Subtitle/lg/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/lg/Letter spacing': 0.24,
|
||||
'Title/Subtitle/md/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/md/Letter spacing': 0.2,
|
||||
'Title/Overline/sm/Letter spacing': 0.21,
|
||||
'Title/Overline/sm/Font fallback': 'sans-serif',
|
||||
'Title/Overline/sm/Text-Transform': 'uppercase',
|
||||
'Title/sm/LowCase/Font fallback': 'sans-serif',
|
||||
'Title/sm/LowCase/Text-Transform': 'unset',
|
||||
'Title/xs/Letter spacing': -0.05,
|
||||
'Title/xs/Font fallback': 'sans-serif',
|
||||
'Title/xs/Text-Transform': 'unset',
|
||||
'Title/md/Text-Transform': 'unset',
|
||||
'Title/md/LowCase/Letter spacing': 0.36,
|
||||
'Title/md/LowCase/Font fallback': 'sans-serif',
|
||||
'Title/md/LowCase/Text-Transform': 'unset',
|
||||
'Tag/Letter spacing': 0.18,
|
||||
'Tag/Font fallback': 'sans-serif',
|
||||
'Tag/Text-Transform': 'uppercase',
|
||||
'Link/md/Font fallback': 'sans-serif',
|
||||
'Link/md/Letter spacing': 0.19,
|
||||
'Link/sm/Font fallback': 'sans-serif',
|
||||
'Link/sm/Letter spacing': 0.2,
|
||||
'Body/Lead text/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Letter spacing': 0.19,
|
||||
'Body/Supporting text/Font fallback': 'sans-serif',
|
||||
'Body/Supporting text/Letter spacing': 0.2,
|
||||
'Body/Lead text/Letter spacing': 0.2,
|
||||
'Label/Font fallback': 'sans-serif',
|
||||
'Label/Letter spacing': 0.17,
|
||||
'Body/Underline/md/Font fallback': 'sans-serif',
|
||||
'Body/Underline/md/Letter spacing': 0.19,
|
||||
'Body/Underline/sm/Font fallback': 'sans-serif',
|
||||
'Body/Underline/sm/Letter spacing': 0.2,
|
||||
'Surface/Brand/Primary 1/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent': '#FFFFFF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Accent': '#FFFFFF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Accent': '#FFFFFF',
|
||||
'Utilities/Gradients/10': '#3C43361A',
|
||||
'Font family/Hotel Norge/Title': 'Domaine Sans Text',
|
||||
'Font family/Hotel Norge/Body': 'Fira sans',
|
||||
'Font family/Hotel Norge/Decorative': 'Domaine Sans Text',
|
||||
'Title/lg/Font weight': 400,
|
||||
'Title/lg/Font family': 'Domaine Sans Text',
|
||||
'Title/md/Font weight': 400,
|
||||
'Title/md/Font family': 'Domaine Sans Text',
|
||||
'Title/sm/Font weight': 400,
|
||||
'Title/sm/Font family': 'Domaine Sans Text',
|
||||
'Title/sm/LowCase/Font weight': 400,
|
||||
'Title/sm/LowCase/Font family': 'Domaine Sans Text',
|
||||
'Title/Decorative/lg/Font weight': 400,
|
||||
'Title/Decorative/lg/Font family': 'Domaine Sans Text',
|
||||
'Title/Decorative/md/Font weight': 400,
|
||||
'Title/Decorative/md/Font family': 'Domaine Sans Text',
|
||||
'Title/Subtitle/lg/Font weight': 500,
|
||||
'Title/Subtitle/lg/Font family': 'Fira sans',
|
||||
'Title/Subtitle/md/Font weight': 500,
|
||||
'Title/Subtitle/md/Font family': 'Fira sans',
|
||||
'Title/Overline/sm/Font weight': 500,
|
||||
'Title/Overline/sm/Font family': 'Fira sans',
|
||||
'Title/xs/Font weight': 400,
|
||||
'Title/xs/Font family': 'Domaine Sans Text',
|
||||
'Title/md/LowCase/Font weight': 400,
|
||||
'Title/md/LowCase/Font family': 'Domaine Sans Text',
|
||||
'Tag/Font weight': 500,
|
||||
'Tag/Font family': 'Fira sans',
|
||||
'Link/md/Font weight': 500,
|
||||
'Link/md/Font family': 'Fira sans',
|
||||
'Link/sm/Font weight': 500,
|
||||
'Link/sm/Font family': 'Fira sans',
|
||||
'Body/Lead text/Font weight': 400,
|
||||
'Body/Lead text/Font family': 'Fira sans',
|
||||
'Body/Paragraph/Font weight': 400,
|
||||
'Body/Paragraph/Font weight 2': 500,
|
||||
'Body/Paragraph/Font family': 'Fira sans',
|
||||
'Body/Supporting text/Font weight': 400,
|
||||
'Body/Supporting text/Font weight 2': 500,
|
||||
'Body/Supporting text/Font family': 'Fira sans',
|
||||
'Label/Font weight': 400,
|
||||
'Label/Font weight 2': 500,
|
||||
'Label/Font family': 'Fira sans',
|
||||
'Body/Underline/md/Font weight': 400,
|
||||
'Body/Underline/md/Font family': 'Fira sans',
|
||||
'Body/Underline/sm/Font weight': 400,
|
||||
'Body/Underline/sm/Font family': 'Fira sans',
|
||||
'Text/Heading': '#1F1F1F',
|
||||
'Text/Default': '#1F1F1F',
|
||||
'Text/Secondary': '#575757',
|
||||
'Text/Tertiary': '#747474',
|
||||
'Text/Accent Primary': '#747474',
|
||||
'Text/Accent Secondary': '#747474',
|
||||
'Text/Inverted': '#FFFFFF',
|
||||
'Text/Interactive/Default': '#181E34',
|
||||
'Text/Interactive/Secondary': '#26544A',
|
||||
'Text/Interactive/Hover Secondary': '#3A655C',
|
||||
'Text/Interactive/Disabled': '#8C8C8C',
|
||||
'Text/Interactive/Focus': '#262626',
|
||||
'Text/Interactive/Error': '#AD0015',
|
||||
'Text/Interactive/Placeholder': '#747474',
|
||||
'Text/Brand/OnAccent/Heading': '#1F1F1F',
|
||||
'Text/Brand/OnAccent/Default': '#1F1F1F',
|
||||
'Text/Brand/OnAccent/Accent': '#004337',
|
||||
'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Accent': '#B7C5C8',
|
||||
'Text/Brand/OnPrimary 2/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Accent': '#C7DDD5',
|
||||
'Text/Brand/OnPrimary 3/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Accent': '#C7DDD5',
|
||||
'Background/Primary': '#FFFFFF',
|
||||
'Background/Secondary': '#FFFFFF',
|
||||
'Surface/Primary/Default': '#FFFFFF',
|
||||
'Surface/Primary/Hover': '#f2f2f2',
|
||||
'Surface/Primary/Hover Light': '#e6e5e5',
|
||||
'Surface/Primary/Hover Accent': '#E9E9E9',
|
||||
'Surface/Primary/OnSurface/Default': '#F4F5F2',
|
||||
'Surface/Primary/Disabled': '#E9E9E9',
|
||||
'Surface/Secondary/Default': '#EFF0EB',
|
||||
'Surface/Secondary/Secondary': '#EFF0EB',
|
||||
'Surface/Secondary/Hover': '#e3e4df',
|
||||
'Surface/Brand/Accent/Default': '#C7DDD5',
|
||||
'Surface/Brand/Primary 1/Default': '#181E34',
|
||||
'Surface/Brand/Primary 2/Default': '#181E34',
|
||||
'Surface/Brand/Primary 3/Default': '#004337',
|
||||
'Surface/UI Fill/Default': '#FFFFFF',
|
||||
'Surface/UI Fill/Intense': '#262626',
|
||||
'Surface/UI Fill/Active': '#262626',
|
||||
'Surface/UI Fill/Active Hover': '#FFFFFF',
|
||||
'Surface/UI Fill/Disabled': '#E9E9E9',
|
||||
'Surface/Accent/1': '#EC615B',
|
||||
'Surface/Accent/2': '#284EA0',
|
||||
'Surface/Accent/3': '#004337',
|
||||
'Surface/Accent/4': '#858F97',
|
||||
'Surface/Accent/5': '#404655',
|
||||
'Surface/Feedback/Information Accent': '#284EA0',
|
||||
'Surface/Feedback/Information': '#E8F6FF',
|
||||
'Surface/Feedback/Succes Accent': '#348337',
|
||||
'Surface/Feedback/Succes': '#F3FCE8',
|
||||
'Surface/Feedback/Warning Accent': '#D17308',
|
||||
'Surface/Feedback/Warning Light': '#FFF8E3',
|
||||
'Surface/Feedback/Error Accent': '#AD0015',
|
||||
'Surface/Feedback/Error': '#FFEBEB',
|
||||
'Surface/Feedback/Neutral Accent': '#747474',
|
||||
'Surface/Feedback/Neutral': '#E9E9E9',
|
||||
'Border/Default': '#D9D9D9',
|
||||
'Border/Intense': '#BFBFBF',
|
||||
'Border/Inverted': '#FFFFFF',
|
||||
'Icon/Default': '#575757',
|
||||
'Icon/Intense': '#1F1F1F',
|
||||
'Icon/Accent': '#EC615B',
|
||||
'Icon/Interactive/Default': '#181E34',
|
||||
'Icon/Interactive/Secondary': '#26544A',
|
||||
'Icon/Interactive/Disabled': '#BFBFBF',
|
||||
'Icon/Interactive/Placeholder': '#747474',
|
||||
'Icon/Feedback/Information': '#284EA0',
|
||||
'Icon/Feedback/Success': '#348337',
|
||||
'Icon/Feedback/Warning': '#D17308',
|
||||
'Icon/Feedback/Error': '#AD0015',
|
||||
'Icon/Feedback/Neutral': '#575757',
|
||||
'Icon/Inverted': '#FFFFFF',
|
||||
'Overlay/10': '#1F1C1B1A',
|
||||
'Overlay/20': '#1F1C1B33',
|
||||
'Overlay/40': '#1F1C1B66',
|
||||
'Overlay/60': '#1F1C1B99',
|
||||
'Overlay/80': '#1F1C1BCC',
|
||||
'Overlay/90': '#1F1C1BE6',
|
||||
'Component/Button/Brand/Primary/Default': '#181E34',
|
||||
'Component/Button/Brand/Primary/Hover': '#2c3146',
|
||||
'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Hover Inverted': '#004337',
|
||||
'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Secondary/On fill/Default': '#181E34',
|
||||
'Component/Button/Brand/Secondary/On fill/Hover': '#404655',
|
||||
'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Secondary/Border/Default': '#181E34',
|
||||
'Component/Button/Brand/Secondary/Border/Hover': '#404655',
|
||||
'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Border/Hover inverted': '#e5e6e9',
|
||||
'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/Default': '#004337',
|
||||
'Component/Button/Brand/Tertiary/Hover': '#215448',
|
||||
'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Default': '#FFFFFF',
|
||||
'Component/Button/Inverted/Faded': '#FFFFFFE6',
|
||||
'Component/Button/Inverted/Hover': '#f2f2f2',
|
||||
'Component/Button/Inverted/Hover Inverted': '#004337',
|
||||
'Component/Button/Inverted/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Inverted/On fill/Default': '#181E34',
|
||||
'Component/Button/Inverted/On fill/Hover': '#2c3146',
|
||||
'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
|
||||
'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Inverted/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
|
||||
'Border/Interactive/Default': '#BFBFBF',
|
||||
'Border/Divider/Default': '#D9D9D9',
|
||||
'Border/Divider/Subtle': '#E9E9E9',
|
||||
'Border/Divider/Accent': '#BFBFBF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Default': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Secondary': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Border/Interactive/Selected': '#262626',
|
||||
'Border/Interactive/Focus': '#262626',
|
||||
'Border/Interactive/Disabled': '#BFBFBF',
|
||||
'Border/Interactive/Error': '#AD0015',
|
||||
'Border/Interactive/KeyboardFocus': '#5B8FD4',
|
||||
'Component/Button/Muted/Default': '#FFFFFF00',
|
||||
'Component/Button/Muted/Hover': '#FFFFFF',
|
||||
'Component/Button/Muted/Disabled': '#FFFFFF',
|
||||
'Component/Button/Muted/Hover inverted': '#1F1C1B0D',
|
||||
'Component/Button/Muted/Disabled inverted': '#D9D9D9',
|
||||
'Component/Button/Muted/On fill/Default': '#1F1F1F',
|
||||
'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Muted/On fill/Hover Inverted': '#404655',
|
||||
'Component/Button/Muted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Muted/Border/Default': '#FFFFFF1A',
|
||||
'Component/Button/Muted/Border/Hover': '#ffffff30',
|
||||
'Component/Button/Muted/Border/Disable': '#FFFFFF1A',
|
||||
}
|
||||
38
packages/design-system/lib/styles/impl.css
Normal file
38
packages/design-system/lib/styles/impl.css
Normal file
@@ -0,0 +1,38 @@
|
||||
:root {
|
||||
--Impl-Text-size-5xs: var(--Size-200-12);
|
||||
--Impl-Text-size-4xs: var(--Size-250-14);
|
||||
--Impl-Text-size-3xs: var(--Size-300-16);
|
||||
--Impl-Text-size-2xs: var(--Size-300-16);
|
||||
--Impl-Text-size-xs: var(--Size-350-18);
|
||||
--Impl-Text-size-sm: var(--Size-400-20);
|
||||
--Impl-Text-size-md: var(--Size-400-20);
|
||||
--Impl-Text-size-lg: var(--Size-500-24);
|
||||
--Impl-Text-size-xl: var(--Size-500-24);
|
||||
--Impl-Text-size-2xl: 30px;
|
||||
--Impl-Text-size-4xl: var(--Size-800-36);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
/* Tablet */
|
||||
:root {
|
||||
--Impl-Text-size-xs: 19px;
|
||||
--Impl-Text-size-sm: 22px;
|
||||
--Impl-Text-size-lg: var(--Size-550-26);
|
||||
--Impl-Text-size-xl: 29px;
|
||||
--Impl-Text-size-2xl: 34px;
|
||||
--Impl-Text-size-4xl: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1367px) {
|
||||
/* Desktop */
|
||||
:root {
|
||||
--Impl-Text-size-2xs: var(--Size-350-18);
|
||||
--Impl-Text-size-xs: var(--Size-400-20);
|
||||
--Impl-Text-size-sm: var(--Size-500-24);
|
||||
--Impl-Text-size-lg: var(--Size-600-28);
|
||||
--Impl-Text-size-xl: var(--Size-700-32);
|
||||
--Impl-Text-size-2xl: var(--Size-800-36);
|
||||
--Impl-Text-size-4xl: var(--Size-1100-48);
|
||||
}
|
||||
}
|
||||
374
packages/design-system/lib/styles/marski.css
Normal file
374
packages/design-system/lib/styles/marski.css
Normal file
@@ -0,0 +1,374 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
.marski {
|
||||
/* Values */
|
||||
--Body-Lead-text-Font-fallback: sans-serif;
|
||||
--Body-Lead-text-Letter-spacing: 0.2px;
|
||||
--Body-Paragraph-Font-fallback: sans-serif;
|
||||
--Body-Paragraph-Letter-spacing: 0.19px;
|
||||
--Body-Supporting-text-Font-fallback: sans-serif;
|
||||
--Body-Supporting-text-Letter-spacing: 0.2px;
|
||||
--Body-Underline-md-Font-fallback: sans-serif;
|
||||
--Body-Underline-md-Letter-spacing: 0.19px;
|
||||
--Body-Underline-sm-Font-fallback: sans-serif;
|
||||
--Body-Underline-sm-Letter-spacing: 0.2px;
|
||||
--Component-Button-Brand-Primary-Hover: #283b48;
|
||||
--Component-Button-Brand-Secondary-Border-Hover-inverted: #e5e7e9;
|
||||
--Component-Button-Brand-Tertiary-Hover: #1a54e7;
|
||||
--Component-Button-Inverted-Hover: #f2f2f2;
|
||||
--Component-Button-Inverted-On-fill-Hover: #283b48;
|
||||
--Component-Button-Muted-Border-Hover: #ffffff30;
|
||||
--Font-family-Marski-Body: 'Fira sans';
|
||||
--Font-family-Marski-Decorative: 'Helvetica Neue';
|
||||
--Font-family-Marski-Title: 'Helvetica Neue';
|
||||
--Label-Font-fallback: sans-serif;
|
||||
--Label-Letter-spacing: 0.17px;
|
||||
--Link-md-Font-fallback: sans-serif;
|
||||
--Link-md-Letter-spacing: 0.19px;
|
||||
--Link-sm-Font-fallback: sans-serif;
|
||||
--Link-sm-Letter-spacing: 0.2px;
|
||||
--Signature-Marski-Aubergine-00: #f9f6f4;
|
||||
--Signature-Marski-Aubergine-100: #3e1118;
|
||||
--Signature-Marski-Aubergine-10: #ebe8e6;
|
||||
--Signature-Marski-Aubergine-20: #cfc4c5;
|
||||
--Signature-Marski-Aubergine-30: #baa9ac;
|
||||
--Signature-Marski-Aubergine-40: #a28d90;
|
||||
--Signature-Marski-Aubergine-50: #8b7074;
|
||||
--Signature-Marski-Aubergine-60: #806267;
|
||||
--Signature-Marski-Aubergine-70: #6a484d;
|
||||
--Signature-Marski-Aubergine-80: #5b353b;
|
||||
--Signature-Marski-Aubergine-90: #481d24;
|
||||
--Signature-Marski-Blue-ribbon-0: #eef7ff;
|
||||
--Signature-Marski-Blue-ribbon-100: #11265a;
|
||||
--Signature-Marski-Blue-ribbon-10: #d8ecff;
|
||||
--Signature-Marski-Blue-ribbon-20: #b9deff;
|
||||
--Signature-Marski-Blue-ribbon-30: #89cbff;
|
||||
--Signature-Marski-Blue-ribbon-40: #52aeff;
|
||||
--Signature-Marski-Blue-ribbon-50: #2a8bff;
|
||||
--Signature-Marski-Blue-ribbon-60: #136afd;
|
||||
--Signature-Marski-Blue-ribbon-70: #0d57f3;
|
||||
--Signature-Marski-Blue-ribbon-80: #1043bd;
|
||||
--Signature-Marski-Blue-ribbon-90: #143d94;
|
||||
--Signature-Marski-Elephant-0: #f6f6f7;
|
||||
--Signature-Marski-Elephant-100: #122937;
|
||||
--Signature-Marski-Elephant-10: #eceeef;
|
||||
--Signature-Marski-Elephant-20: #e0e3e5;
|
||||
--Signature-Marski-Elephant-30: #b6bdc1;
|
||||
--Signature-Marski-Elephant-40: #9ba5ab;
|
||||
--Signature-Marski-Elephant-50: #717f87;
|
||||
--Signature-Marski-Elephant-60: #576771;
|
||||
--Signature-Marski-Elephant-70: #495a65;
|
||||
--Signature-Marski-Elephant-80: #2c414d;
|
||||
--Signature-Marski-Elephant-90: #1e3441;
|
||||
--Signature-Marski-Torch-red-00: #fff0f1;
|
||||
--Signature-Marski-Torch-red-100: #4f0007;
|
||||
--Signature-Marski-Torch-red-10: #ffdde0;
|
||||
--Signature-Marski-Torch-red-20: #ffc1c7;
|
||||
--Signature-Marski-Torch-red-30: #ff96a0;
|
||||
--Signature-Marski-Torch-red-40: #ff5a6a;
|
||||
--Signature-Marski-Torch-red-50: #ff273b;
|
||||
--Signature-Marski-Torch-red-60: #fb1228;
|
||||
--Signature-Marski-Torch-red-70: #d40115;
|
||||
--Signature-Marski-Torch-red-80: #ae0616;
|
||||
--Signature-Marski-Torch-red-90: #900c18;
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff;
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-1-OnSurface-Default: #ffffff;
|
||||
--Surface-Brand-Primary-2-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-2-OnSurface-Default: #ffffff;
|
||||
--Surface-Brand-Primary-3-OnSurface-Accent: #ffffff;
|
||||
--Surface-Brand-Primary-3-OnSurface-Default: #ffffff;
|
||||
--Surface-Primary-Hover-Light: #e6e5e5;
|
||||
--Surface-Primary-Hover: #f2f2f2;
|
||||
--Surface-Secondary-Hover: #e0e2e3;
|
||||
--Tag-Font-fallback: sans-serif;
|
||||
--Tag-Letter-spacing: 0.18px;
|
||||
--Tag-Text-Transform: unset;
|
||||
--Title-Decorative-lg-Font-fallback: sans-serif;
|
||||
--Title-Decorative-lg-Letter-spacing: 0.1px;
|
||||
--Title-Decorative-lg-Text-Transform: uppercase;
|
||||
--Title-Decorative-md-Font-fallback: sans-serif;
|
||||
--Title-Decorative-md-Letter-spacing: 0.32px;
|
||||
--Title-Decorative-md-Text-Transform: uppercase;
|
||||
--Title-Overline-sm-Font-fallback: sans-serif;
|
||||
--Title-Overline-sm-Letter-spacing: 0.21px;
|
||||
--Title-Overline-sm-Text-Transform: uppercase;
|
||||
--Title-Subtitle-lg-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-lg-Letter-spacing: 0.24px;
|
||||
--Title-Subtitle-md-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-md-Letter-spacing: 0.2px;
|
||||
--Title-lg-Font-fallback: sans-serif;
|
||||
--Title-lg-Letter-spacing: 0.48px;
|
||||
--Title-lg-Text-Transform: unset;
|
||||
--Title-md-Font-fallback: sans-serif;
|
||||
--Title-md-Letter-spacing: 0.09px;
|
||||
--Title-md-LowCase-Font-fallback: sans-serif;
|
||||
--Title-md-LowCase-Letter-spacing: 0.09px;
|
||||
--Title-md-LowCase-Text-Transform: unset;
|
||||
--Title-md-Text-Transform: unset;
|
||||
--Title-sm-Font-fallback: sans-serif;
|
||||
--Title-sm-Letter-spacing: 0.14px;
|
||||
--Title-sm-LowCase-Font-fallback: sans-serif;
|
||||
--Title-sm-LowCase-Letter-spacing: 0.14px;
|
||||
--Title-sm-LowCase-Text-Transform: unset;
|
||||
--Title-sm-Text-Transform: unset;
|
||||
--Title-xs-Font-fallback: sans-serif;
|
||||
--Title-xs-Letter-spacing: 0.24px;
|
||||
--Title-xs-Text-Transform: unset;
|
||||
--Utilities-Gradients-10: #3e11181a;
|
||||
|
||||
/* Aliases */
|
||||
--Background-Primary: var(--Neutral-0);
|
||||
--Background-Secondary: var(--Neutral-Opacity-White-100);
|
||||
--Body-Lead-text-Font-family: var(--Font-family-Marski-Body);
|
||||
--Body-Lead-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Lead-text-Size: var(--Impl-Text-size-xs);
|
||||
--Body-Paragraph-Font-family: var(--Font-family-Marski-Body);
|
||||
--Body-Paragraph-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Paragraph-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Paragraph-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Supporting-text-Font-family: var(--Font-family-Marski-Body);
|
||||
--Body-Supporting-text-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Supporting-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Supporting-text-Size: var(--Impl-Text-size-4xs);
|
||||
--Body-Underline-md-Font-family: var(--Font-family-Marski-Body);
|
||||
--Body-Underline-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Underline-sm-Font-family: var(--Font-family-Marski-Body);
|
||||
--Body-Underline-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Border-Default: var(--Neutral-20);
|
||||
--Border-Divider-Accent: var(--Neutral-30);
|
||||
--Border-Divider-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Brand-OnPrimary-1-Secondary: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Border-Divider-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Border-Divider-Default: var(--Neutral-20);
|
||||
--Border-Divider-Subtle: var(--Neutral-15);
|
||||
--Border-Intense: var(--Neutral-30);
|
||||
--Border-Interactive-Default: var(--Neutral-30);
|
||||
--Border-Interactive-Disabled: var(--Neutral-30);
|
||||
--Border-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Border-Interactive-Focus: var(--Neutral-80);
|
||||
--Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
|
||||
--Border-Interactive-Selected: var(--Neutral-80);
|
||||
--Border-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Primary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Primary-Default: var(
|
||||
--Signature-Marski-Elephant-100
|
||||
);
|
||||
--Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Primary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Primary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Primary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Default: var(
|
||||
--Signature-Marski-Elephant-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Disabled: var(
|
||||
--Neutral-Opacity-Black-10
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Hover: var(
|
||||
--Signature-Marski-Elephant-80
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Secondary-Hover-Inverted: var(
|
||||
--Signature-Marski-Elephant-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Secondary-On-fill-Default: var(
|
||||
--Signature-Marski-Elephant-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Secondary-On-fill-Hover: var(
|
||||
--Signature-Marski-Elephant-80
|
||||
);
|
||||
--Component-Button-Brand-Secondary-On-fill-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Hover: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Default: var(
|
||||
--Signature-Marski-Blue-ribbon-70
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
|
||||
--Component-Button-Inverted-Hover-Inverted: var(
|
||||
--Signature-Marski-Elephant-100
|
||||
);
|
||||
--Component-Button-Inverted-On-fill-Default: var(
|
||||
--Signature-Marski-Elephant-100
|
||||
);
|
||||
--Component-Button-Inverted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Inverted-On-fill-Hover-inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Disabled-inverted: var(--Neutral-20);
|
||||
--Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5);
|
||||
--Component-Button-Muted-Hover: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Muted-On-fill-Default: var(--Neutral-90);
|
||||
--Component-Button-Muted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Muted-On-fill-Hover-Inverted: var(
|
||||
--Signature-Marski-Elephant-80
|
||||
);
|
||||
--Component-Button-Muted-On-fill-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Icon-Accent: var(--Signature-Marski-Blue-ribbon-80);
|
||||
--Icon-Default: var(--Neutral-60);
|
||||
--Icon-Feedback-Error: var(--Scandic-Red-70);
|
||||
--Icon-Feedback-Information: var(--Scandic-Blue-70);
|
||||
--Icon-Feedback-Neutral: var(--Neutral-60);
|
||||
--Icon-Feedback-Success: var(--Scandic-Green-60);
|
||||
--Icon-Feedback-Warning: var(--Scandic-Yellow-60);
|
||||
--Icon-Intense: var(--Neutral-90);
|
||||
--Icon-Interactive-Default: var(--Signature-Marski-Elephant-90);
|
||||
--Icon-Interactive-Disabled: var(--Neutral-30);
|
||||
--Icon-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Icon-Interactive-Secondary: var(--Signature-Marski-Blue-ribbon-70);
|
||||
--Icon-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Label-Font-family: var(--Font-family-Marski-Body);
|
||||
--Label-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Label-Font-weight: var(--Font-weight-Regular);
|
||||
--Label-Size: var(--Impl-Text-size-5xs);
|
||||
--Link-md-Font-family: var(--Font-family-Marski-Body);
|
||||
--Link-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Link-sm-Font-family: var(--Font-family-Marski-Body);
|
||||
--Link-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Overlay-10: var(--Neutral-Opacity-Black-10);
|
||||
--Overlay-20: var(--Neutral-Opacity-Black-20);
|
||||
--Overlay-40: var(--Neutral-Opacity-Black-40);
|
||||
--Overlay-60: var(--Neutral-Opacity-Black-60);
|
||||
--Overlay-80: var(--Neutral-Opacity-Black-80);
|
||||
--Overlay-90: var(--Neutral-Opacity-Black-90);
|
||||
--Surface-Accent-1: var(--Signature-Marski-Torch-red-60);
|
||||
--Surface-Accent-2: var(--Signature-Marski-Blue-ribbon-70);
|
||||
--Surface-Accent-3: var(--Scandic-Green-70);
|
||||
--Surface-Accent-4: var(--Signature-Marski-Elephant-100);
|
||||
--Surface-Accent-5: var(--Signature-Marski-Blue-ribbon-90);
|
||||
--Surface-Brand-Accent-Default: var(--Neutral-60);
|
||||
--Surface-Brand-Primary-1-Default: var(--Signature-Marski-Elephant-100);
|
||||
--Surface-Brand-Primary-2-Default: var(--Signature-Marski-Elephant-100);
|
||||
--Surface-Brand-Primary-3-Default: var(--Signature-Marski-Aubergine-100);
|
||||
--Surface-Feedback-Error-Accent: var(--Scandic-Red-70);
|
||||
--Surface-Feedback-Error: var(--Scandic-Red-00);
|
||||
--Surface-Feedback-Information-Accent: var(--Scandic-Blue-70);
|
||||
--Surface-Feedback-Information: var(--Scandic-Blue-00);
|
||||
--Surface-Feedback-Neutral-Accent: var(--Neutral-50);
|
||||
--Surface-Feedback-Neutral: var(--Neutral-15);
|
||||
--Surface-Feedback-Succes-Accent: var(--Scandic-Green-60);
|
||||
--Surface-Feedback-Succes: var(--Scandic-Green-00);
|
||||
--Surface-Feedback-Warning--Light: var(--Scandic-Yellow-00);
|
||||
--Surface-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
|
||||
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-Primary-Disabled: var(--Neutral-15);
|
||||
--Surface-Primary-Hover-Accent: var(--Neutral-15);
|
||||
--Surface-Primary-OnSurface-Default: var(--Signature-Marski-Elephant-0);
|
||||
--Surface-Secondary-Default: var(--Signature-Marski-Elephant-10);
|
||||
--Surface-Secondary-Secondary: var(--Signature-Marski-Elephant-10);
|
||||
--Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100);
|
||||
--Surface-UI-Fill-Active: var(--Neutral-80);
|
||||
--Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-UI-Fill-Disabled: var(--Neutral-15);
|
||||
--Surface-UI-Fill-Intense: var(--Neutral-80);
|
||||
--Tag-Font-family: var(--Font-family-Marski-Title);
|
||||
--Tag-Font-weight: var(--Font-weight-Medium);
|
||||
--Tag-Size: var(--Impl-Text-size-5xs);
|
||||
--Text-Accent-Primary: var(--Neutral-50);
|
||||
--Text-Accent-Secondary: var(--Neutral-50);
|
||||
--Text-Brand-OnAccent-Accent: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnAccent-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnAccent-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-1-Accent: var(--Signature-Marski-Blue-ribbon-40);
|
||||
--Text-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-1-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Accent: var(--Signature-Marski-Torch-red-40);
|
||||
--Text-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Accent: var(--Signature-Marski-Torch-red-40);
|
||||
--Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Default: var(--Neutral-90);
|
||||
--Text-Heading: var(--Neutral-90);
|
||||
--Text-Interactive-Default: var(--Signature-Marski-Elephant-100);
|
||||
--Text-Interactive-Disabled: var(--Neutral-40);
|
||||
--Text-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Text-Interactive-Focus: var(--Neutral-80);
|
||||
--Text-Interactive-Hover-Secondary: var(--Signature-Marski-Blue-ribbon-90);
|
||||
--Text-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Text-Interactive-Secondary: var(--Signature-Marski-Blue-ribbon-70);
|
||||
--Text-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Text-Secondary: var(--Neutral-60);
|
||||
--Text-Tertiary: var(--Neutral-50);
|
||||
--Title-Decorative-lg-Font-family: var(--Font-family-Marski-Decorative);
|
||||
--Title-Decorative-lg-Font-weight: var(--Font-weight-Bold);
|
||||
--Title-Decorative-lg-Size: var(--Impl-Text-size-xs);
|
||||
--Title-Decorative-md-Font-family: var(--Font-family-Marski-Decorative);
|
||||
--Title-Decorative-md-Font-weight: var(--Font-weight-Bold);
|
||||
--Title-Decorative-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Title-Overline-sm-Font-family: var(--Font-family-Marski-Title);
|
||||
--Title-Overline-sm-Font-weight: var(--Font-weight-Bold);
|
||||
--Title-Overline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Title-Subtitle-lg-Font-family: var(--Font-family-Marski-Body);
|
||||
--Title-Subtitle-lg-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-lg-Size: var(--Impl-Text-size-sm);
|
||||
--Title-Subtitle-md-Font-family: var(--Font-family-Marski-Body);
|
||||
--Title-Subtitle-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-md-Size: var(--Impl-Text-size-xs);
|
||||
--Title-lg-Font-family: var(--Font-family-Marski-Title);
|
||||
--Title-lg-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-lg-Size: var(--Impl-Text-size-4xl);
|
||||
--Title-md-Font-family: var(--Font-family-Marski-Title);
|
||||
--Title-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-md-LowCase-Font-family: var(--Font-family-Marski-Title);
|
||||
--Title-md-LowCase-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-md-LowCase-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-md-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-sm-Font-family: var(--Font-family-Marski-Title);
|
||||
--Title-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-sm-LowCase-Font-family: var(--Font-family-Marski-Title);
|
||||
--Title-sm-LowCase-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-sm-LowCase-Size: var(--Impl-Text-size-lg);
|
||||
--Title-sm-Size: var(--Impl-Text-size-lg);
|
||||
--Title-xs-Font-family: var(--Font-family-Marski-Title);
|
||||
--Title-xs-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-xs-Size: var(--Impl-Text-size-sm);
|
||||
}
|
||||
303
packages/design-system/lib/styles/marski.js
Normal file
303
packages/design-system/lib/styles/marski.js
Normal file
@@ -0,0 +1,303 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
export const theme = {
|
||||
'Signature/Marski/Elephant/0': '#F6F6F7',
|
||||
'Signature/Marski/Elephant/10': '#ECEEEF',
|
||||
'Signature/Marski/Elephant/20': '#E0E3E5',
|
||||
'Signature/Marski/Elephant/30': '#B6BDC1',
|
||||
'Signature/Marski/Elephant/40': '#9BA5AB',
|
||||
'Signature/Marski/Elephant/50': '#717F87',
|
||||
'Signature/Marski/Elephant/60': '#576771',
|
||||
'Signature/Marski/Elephant/70': '#495A65',
|
||||
'Signature/Marski/Elephant/80': '#2C414D',
|
||||
'Signature/Marski/Elephant/90': '#1E3441',
|
||||
'Signature/Marski/Elephant/100': '#122937',
|
||||
'Signature/Marski/Blue ribbon/0': '#EEF7FF',
|
||||
'Signature/Marski/Blue ribbon/10': '#D8ECFF',
|
||||
'Signature/Marski/Blue ribbon/20': '#B9DEFF',
|
||||
'Signature/Marski/Blue ribbon/30': '#89CBFF',
|
||||
'Signature/Marski/Blue ribbon/40': '#52AEFF',
|
||||
'Signature/Marski/Blue ribbon/50': '#2A8BFF',
|
||||
'Signature/Marski/Blue ribbon/60': '#136AFD',
|
||||
'Signature/Marski/Blue ribbon/70': '#0D57F3',
|
||||
'Signature/Marski/Blue ribbon/80': '#1043BD',
|
||||
'Signature/Marski/Blue ribbon/90': '#143D94',
|
||||
'Signature/Marski/Blue ribbon/100': '#11265A',
|
||||
'Signature/Marski/Torch red/00': '#FFF0F1',
|
||||
'Signature/Marski/Aubergine/00': '#F9F6F4',
|
||||
'Signature/Marski/Aubergine/10': '#EBE8E6',
|
||||
'Signature/Marski/Aubergine/20': '#CFC4C5',
|
||||
'Signature/Marski/Aubergine/30': '#BAA9AC',
|
||||
'Signature/Marski/Aubergine/40': '#A28D90',
|
||||
'Signature/Marski/Aubergine/50': '#8B7074',
|
||||
'Signature/Marski/Aubergine/60': '#806267',
|
||||
'Signature/Marski/Aubergine/70': '#6A484D',
|
||||
'Signature/Marski/Aubergine/80': '#5B353B',
|
||||
'Signature/Marski/Aubergine/90': '#481D24',
|
||||
'Signature/Marski/Aubergine/100': '#3E1118',
|
||||
'Signature/Marski/Torch red/10': '#FFDDE0',
|
||||
'Signature/Marski/Torch red/20': '#FFC1C7',
|
||||
'Signature/Marski/Torch red/30': '#FF96A0',
|
||||
'Signature/Marski/Torch red/40': '#FF5A6A',
|
||||
'Signature/Marski/Torch red/50': '#FF273B',
|
||||
'Signature/Marski/Torch red/60': '#FB1228',
|
||||
'Signature/Marski/Torch red/70': '#D40115',
|
||||
'Signature/Marski/Torch red/80': '#AE0616',
|
||||
'Signature/Marski/Torch red/90': '#900C18',
|
||||
'Signature/Marski/Torch red/100': '#4F0007',
|
||||
'Title/lg/Letter spacing': 0.48,
|
||||
'Title/lg/Font fallback': 'sans-serif',
|
||||
'Title/lg/Text-Transform': 'unset',
|
||||
'Title/md/Letter spacing': 0.09,
|
||||
'Title/md/Font fallback': 'sans-serif',
|
||||
'Title/sm/Letter spacing': 0.14,
|
||||
'Title/sm/Font fallback': 'sans-serif',
|
||||
'Title/sm/Text-Transform': 'unset',
|
||||
'Title/Decorative/lg/Letter spacing': 0.1,
|
||||
'Title/Decorative/lg/Font fallback': 'sans-serif',
|
||||
'Title/Decorative/lg/Text-Transform': 'uppercase',
|
||||
'Title/Decorative/md/Letter spacing': 0.32,
|
||||
'Title/Decorative/md/Font fallback': 'sans-serif',
|
||||
'Title/Decorative/md/Text-Transform': 'uppercase',
|
||||
'Title/Subtitle/lg/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/lg/Letter spacing': 0.24,
|
||||
'Title/Subtitle/md/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/md/Letter spacing': 0.2,
|
||||
'Title/Overline/sm/Letter spacing': 0.21,
|
||||
'Title/Overline/sm/Font fallback': 'sans-serif',
|
||||
'Title/Overline/sm/Text-Transform': 'uppercase',
|
||||
'Title/sm/LowCase/Letter spacing': 0.14,
|
||||
'Title/sm/LowCase/Font fallback': 'sans-serif',
|
||||
'Title/sm/LowCase/Text-Transform': 'unset',
|
||||
'Title/xs/Letter spacing': 0.24,
|
||||
'Title/xs/Font fallback': 'sans-serif',
|
||||
'Title/xs/Text-Transform': 'unset',
|
||||
'Title/md/Text-Transform': 'unset',
|
||||
'Title/md/LowCase/Letter spacing': 0.09,
|
||||
'Title/md/LowCase/Font fallback': 'sans-serif',
|
||||
'Title/md/LowCase/Text-Transform': 'unset',
|
||||
'Tag/Letter spacing': 0.18,
|
||||
'Tag/Font fallback': 'sans-serif',
|
||||
'Tag/Text-Transform': 'unset',
|
||||
'Link/md/Font fallback': 'sans-serif',
|
||||
'Link/md/Letter spacing': 0.19,
|
||||
'Link/sm/Font fallback': 'sans-serif',
|
||||
'Link/sm/Letter spacing': 0.2,
|
||||
'Body/Lead text/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Letter spacing': 0.19,
|
||||
'Body/Supporting text/Font fallback': 'sans-serif',
|
||||
'Body/Supporting text/Letter spacing': 0.2,
|
||||
'Body/Lead text/Letter spacing': 0.2,
|
||||
'Label/Font fallback': 'sans-serif',
|
||||
'Label/Letter spacing': 0.17,
|
||||
'Body/Underline/md/Font fallback': 'sans-serif',
|
||||
'Body/Underline/md/Letter spacing': 0.19,
|
||||
'Body/Underline/sm/Font fallback': 'sans-serif',
|
||||
'Body/Underline/sm/Letter spacing': 0.2,
|
||||
'Surface/Brand/Primary 1/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent': '#FFFFFF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Accent': '#FFFFFF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Accent': '#FFFFFF',
|
||||
'Utilities/Gradients/10': '#3E11181A',
|
||||
'Font family/Marski/Title': 'Helvetica Neue',
|
||||
'Font family/Marski/Body': 'Fira sans',
|
||||
'Font family/Marski/Decorative': 'Helvetica Neue',
|
||||
'Title/lg/Font weight': 500,
|
||||
'Title/lg/Font family': 'Helvetica Neue',
|
||||
'Title/md/Font weight': 500,
|
||||
'Title/md/Font family': 'Helvetica Neue',
|
||||
'Title/sm/Font weight': 500,
|
||||
'Title/sm/Font family': 'Helvetica Neue',
|
||||
'Title/sm/LowCase/Font weight': 500,
|
||||
'Title/sm/LowCase/Font family': 'Helvetica Neue',
|
||||
'Title/Decorative/lg/Font weight': 700,
|
||||
'Title/Decorative/lg/Font family': 'Helvetica Neue',
|
||||
'Title/Decorative/md/Font weight': 700,
|
||||
'Title/Decorative/md/Font family': 'Helvetica Neue',
|
||||
'Title/Subtitle/lg/Font weight': 500,
|
||||
'Title/Subtitle/lg/Font family': 'Fira sans',
|
||||
'Title/Subtitle/md/Font weight': 500,
|
||||
'Title/Subtitle/md/Font family': 'Fira sans',
|
||||
'Title/Overline/sm/Font weight': 700,
|
||||
'Title/Overline/sm/Font family': 'Helvetica Neue',
|
||||
'Title/xs/Font weight': 500,
|
||||
'Title/xs/Font family': 'Helvetica Neue',
|
||||
'Title/md/LowCase/Font weight': 500,
|
||||
'Title/md/LowCase/Font family': 'Helvetica Neue',
|
||||
'Tag/Font weight': 500,
|
||||
'Tag/Font family': 'Helvetica Neue',
|
||||
'Link/md/Font weight': 500,
|
||||
'Link/md/Font family': 'Fira sans',
|
||||
'Link/sm/Font weight': 500,
|
||||
'Link/sm/Font family': 'Fira sans',
|
||||
'Body/Lead text/Font weight': 400,
|
||||
'Body/Lead text/Font family': 'Fira sans',
|
||||
'Body/Paragraph/Font weight': 400,
|
||||
'Body/Paragraph/Font weight 2': 500,
|
||||
'Body/Paragraph/Font family': 'Fira sans',
|
||||
'Body/Supporting text/Font weight': 400,
|
||||
'Body/Supporting text/Font weight 2': 500,
|
||||
'Body/Supporting text/Font family': 'Fira sans',
|
||||
'Label/Font weight': 400,
|
||||
'Label/Font weight 2': 500,
|
||||
'Label/Font family': 'Fira sans',
|
||||
'Body/Underline/md/Font weight': 400,
|
||||
'Body/Underline/md/Font family': 'Fira sans',
|
||||
'Body/Underline/sm/Font weight': 400,
|
||||
'Body/Underline/sm/Font family': 'Fira sans',
|
||||
'Text/Heading': '#1F1F1F',
|
||||
'Text/Default': '#1F1F1F',
|
||||
'Text/Secondary': '#575757',
|
||||
'Text/Tertiary': '#747474',
|
||||
'Text/Accent Primary': '#747474',
|
||||
'Text/Accent Secondary': '#747474',
|
||||
'Text/Inverted': '#FFFFFF',
|
||||
'Text/Interactive/Default': '#122937',
|
||||
'Text/Interactive/Secondary': '#0D57F3',
|
||||
'Text/Interactive/Hover Secondary': '#143D94',
|
||||
'Text/Interactive/Disabled': '#8C8C8C',
|
||||
'Text/Interactive/Focus': '#262626',
|
||||
'Text/Interactive/Error': '#AD0015',
|
||||
'Text/Interactive/Placeholder': '#747474',
|
||||
'Text/Brand/OnAccent/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnAccent/Default': '#FFFFFF',
|
||||
'Text/Brand/OnAccent/Accent': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 1/Accent': '#52AEFF',
|
||||
'Text/Brand/OnPrimary 2/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Accent': '#FF5A6A',
|
||||
'Text/Brand/OnPrimary 3/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Accent': '#FF5A6A',
|
||||
'Background/Primary': '#FCFCFC',
|
||||
'Background/Secondary': '#FFFFFF',
|
||||
'Surface/Primary/Default': '#FFFFFF',
|
||||
'Surface/Primary/Hover': '#f2f2f2',
|
||||
'Surface/Primary/Hover Light': '#e6e5e5',
|
||||
'Surface/Primary/Hover Accent': '#E9E9E9',
|
||||
'Surface/Primary/OnSurface/Default': '#F6F6F7',
|
||||
'Surface/Primary/Disabled': '#E9E9E9',
|
||||
'Surface/Secondary/Default': '#ECEEEF',
|
||||
'Surface/Secondary/Secondary': '#ECEEEF',
|
||||
'Surface/Secondary/Hover': '#e0e2e3',
|
||||
'Surface/Brand/Accent/Default': '#575757',
|
||||
'Surface/Brand/Primary 1/Default': '#122937',
|
||||
'Surface/Brand/Primary 2/Default': '#122937',
|
||||
'Surface/Brand/Primary 3/Default': '#3E1118',
|
||||
'Surface/UI Fill/Default': '#FFFFFF',
|
||||
'Surface/UI Fill/Intense': '#262626',
|
||||
'Surface/UI Fill/Active': '#262626',
|
||||
'Surface/UI Fill/Active Hover': '#FFFFFF',
|
||||
'Surface/UI Fill/Disabled': '#E9E9E9',
|
||||
'Surface/Accent/1': '#FB1228',
|
||||
'Surface/Accent/2': '#0D57F3',
|
||||
'Surface/Accent/3': '#256931',
|
||||
'Surface/Accent/4': '#122937',
|
||||
'Surface/Accent/5': '#143D94',
|
||||
'Surface/Feedback/Information Accent': '#284EA0',
|
||||
'Surface/Feedback/Information': '#E8F6FF',
|
||||
'Surface/Feedback/Succes Accent': '#348337',
|
||||
'Surface/Feedback/Succes': '#F3FCE8',
|
||||
'Surface/Feedback/Warning Accent': '#D17308',
|
||||
'Surface/Feedback/Warning Light': '#FFF8E3',
|
||||
'Surface/Feedback/Error Accent': '#AD0015',
|
||||
'Surface/Feedback/Error': '#FFEBEB',
|
||||
'Surface/Feedback/Neutral Accent': '#747474',
|
||||
'Surface/Feedback/Neutral': '#E9E9E9',
|
||||
'Border/Default': '#D9D9D9',
|
||||
'Border/Intense': '#BFBFBF',
|
||||
'Border/Inverted': '#FFFFFF',
|
||||
'Icon/Default': '#575757',
|
||||
'Icon/Intense': '#1F1F1F',
|
||||
'Icon/Accent': '#1043BD',
|
||||
'Icon/Interactive/Default': '#1E3441',
|
||||
'Icon/Interactive/Secondary': '#0D57F3',
|
||||
'Icon/Interactive/Disabled': '#BFBFBF',
|
||||
'Icon/Interactive/Placeholder': '#747474',
|
||||
'Icon/Feedback/Information': '#284EA0',
|
||||
'Icon/Feedback/Success': '#348337',
|
||||
'Icon/Feedback/Warning': '#D17308',
|
||||
'Icon/Feedback/Error': '#AD0015',
|
||||
'Icon/Feedback/Neutral': '#575757',
|
||||
'Icon/Inverted': '#FFFFFF',
|
||||
'Overlay/10': '#1F1C1B1A',
|
||||
'Overlay/20': '#1F1C1B33',
|
||||
'Overlay/40': '#1F1C1B66',
|
||||
'Overlay/60': '#1F1C1B99',
|
||||
'Overlay/80': '#1F1C1BCC',
|
||||
'Overlay/90': '#1F1C1BE6',
|
||||
'Component/Button/Brand/Primary/Default': '#122937',
|
||||
'Component/Button/Brand/Primary/Hover': '#283b48',
|
||||
'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Hover Inverted': '#122937',
|
||||
'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Secondary/On fill/Default': '#122937',
|
||||
'Component/Button/Brand/Secondary/On fill/Hover': '#2C414D',
|
||||
'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Secondary/Border/Default': '#122937',
|
||||
'Component/Button/Brand/Secondary/Border/Hover': '#2C414D',
|
||||
'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Border/Hover inverted': '#e5e7e9',
|
||||
'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/Default': '#0D57F3',
|
||||
'Component/Button/Brand/Tertiary/Hover': '#1a54e7',
|
||||
'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Default': '#FFFFFF',
|
||||
'Component/Button/Inverted/Faded': '#FFFFFFE6',
|
||||
'Component/Button/Inverted/Hover': '#f2f2f2',
|
||||
'Component/Button/Inverted/Hover Inverted': '#122937',
|
||||
'Component/Button/Inverted/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Inverted/On fill/Default': '#122937',
|
||||
'Component/Button/Inverted/On fill/Hover': '#283b48',
|
||||
'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
|
||||
'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Inverted/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
|
||||
'Border/Interactive/Default': '#BFBFBF',
|
||||
'Border/Divider/Default': '#D9D9D9',
|
||||
'Border/Divider/Subtle': '#E9E9E9',
|
||||
'Border/Divider/Accent': '#BFBFBF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Default': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Secondary': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Border/Divider/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Border/Interactive/Selected': '#262626',
|
||||
'Border/Interactive/Focus': '#262626',
|
||||
'Border/Interactive/Disabled': '#BFBFBF',
|
||||
'Border/Interactive/Error': '#AD0015',
|
||||
'Border/Interactive/KeyboardFocus': '#5B8FD4',
|
||||
'Component/Button/Muted/Default': '#FFFFFF00',
|
||||
'Component/Button/Muted/Hover': '#FFFFFF',
|
||||
'Component/Button/Muted/Disabled': '#FFFFFF',
|
||||
'Component/Button/Muted/Hover inverted': '#1F1C1B0D',
|
||||
'Component/Button/Muted/Disabled inverted': '#D9D9D9',
|
||||
'Component/Button/Muted/On fill/Default': '#1F1F1F',
|
||||
'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Muted/On fill/Hover Inverted': '#2C414D',
|
||||
'Component/Button/Muted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Muted/Border/Default': '#FFFFFF1A',
|
||||
'Component/Button/Muted/Border/Hover': '#ffffff30',
|
||||
'Component/Button/Muted/Border/Disable': '#FFFFFF1A',
|
||||
}
|
||||
@@ -1,165 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,134 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,134 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
364
packages/design-system/lib/styles/scandic-go.css
Normal file
364
packages/design-system/lib/styles/scandic-go.css
Normal file
@@ -0,0 +1,364 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
.scandic-go {
|
||||
/* Values */
|
||||
--Body-Lead-text-Font-fallback: sans-serif;
|
||||
--Body-Lead-text-Letter-spacing: 0.2px;
|
||||
--Body-Paragraph-Font-fallback: sans-serif;
|
||||
--Body-Paragraph-Letter-spacing: 0.19px;
|
||||
--Body-Supporting-text-Font-fallback: sans-serif;
|
||||
--Body-Supporting-text-Letter-spacing: 0.2px;
|
||||
--Body-Underline-md-Font-fallback: sans-serif;
|
||||
--Body-Underline-md-Letter-spacing: 0.19px;
|
||||
--Body-Underline-sm-Font-fallback: sans-serif;
|
||||
--Body-Underline-sm-Letter-spacing: 0.2px;
|
||||
--Component-Button-Brand-Primary-Hover: #c7c2e5;
|
||||
--Component-Button-Brand-Secondary-Border-Hover-inverted: #e8e5e9;
|
||||
--Component-Button-Brand-Tertiary-Hover: #402a4b;
|
||||
--Component-Button-Inverted-Hover: #f2f2f2;
|
||||
--Component-Button-Inverted-On-fill-Hover: #402a4b;
|
||||
--Component-Button-Muted-Hover-inverted: #f2f2f2;
|
||||
--Font-family-Scandic-Go-Body: 'Fira sans';
|
||||
--Font-family-Scandic-Go-Decorative: 'ITC Garamond Std';
|
||||
--Font-family-Scandic-Go-Title: 'Neue Haas Grotesk Display Pro';
|
||||
--Label-Font-fallback: sans-serif;
|
||||
--Label-Letter-spacing: 0.17px;
|
||||
--Link-md-Font-fallback: sans-serif;
|
||||
--Link-md-Letter-spacing: 0.19px;
|
||||
--Link-sm-Font-fallback: sans-serif;
|
||||
--Link-sm-Letter-spacing: 0.2px;
|
||||
--Scandic-Go-Beige-00: #fffefa;
|
||||
--Scandic-Go-Beige-0: #faf8f2;
|
||||
--Scandic-Go-Beige-100: #1f1e1d;
|
||||
--Scandic-Go-Beige-10: #f0ede4;
|
||||
--Scandic-Go-Beige-20: #e0dcce;
|
||||
--Scandic-Go-Beige-30: #c8c4b6;
|
||||
--Scandic-Go-Beige-40: #b0aca0;
|
||||
--Scandic-Go-Beige-50: #918f83;
|
||||
--Scandic-Go-Beige-60: #78766d;
|
||||
--Scandic-Go-Beige-70: #63615a;
|
||||
--Scandic-Go-Beige-80: #4f4d49;
|
||||
--Scandic-Go-Beige-90: #373633;
|
||||
--Scandic-Go-Coral-50: #fa3737;
|
||||
--Scandic-Go-Cyan-20: #73fcee;
|
||||
--Scandic-Go-Green-00: #edffe5;
|
||||
--Scandic-Go-Green-100: #162115;
|
||||
--Scandic-Go-Green-10: #cdffb8;
|
||||
--Scandic-Go-Green-20: #a7ff82;
|
||||
--Scandic-Go-Green-30: #85ff52;
|
||||
--Scandic-Go-Green-40: #66e03a;
|
||||
--Scandic-Go-Green-50: #45b222;
|
||||
--Scandic-Go-Green-60: #2e7f18;
|
||||
--Scandic-Go-Green-70: #2a601e;
|
||||
--Scandic-Go-Green-80: #26461f;
|
||||
--Scandic-Go-Green-90: #21331f;
|
||||
--Scandic-Go-Powder-Rose-50: #ecc8c9;
|
||||
--Scandic-Go-Purple-00: #f4f2ff;
|
||||
--Scandic-Go-Purple-100: #2d163a;
|
||||
--Scandic-Go-Purple-10: #dcd7ff;
|
||||
--Scandic-Go-Purple-20: #cabffc;
|
||||
--Scandic-Go-Purple-30: #baa7f7;
|
||||
--Scandic-Go-Purple-40: #ab8ef0;
|
||||
--Scandic-Go-Purple-50: #9c75e6;
|
||||
--Scandic-Go-Purple-60: #8c5bd5;
|
||||
--Scandic-Go-Purple-70: #733cb2;
|
||||
--Scandic-Go-Purple-80: #5e2a8c;
|
||||
--Scandic-Go-Purple-90: #451f61;
|
||||
--Scandic-Go-Yellow-00: #fdffe8;
|
||||
--Scandic-Go-Yellow-100: #3b1300;
|
||||
--Scandic-Go-Yellow-10: #faffc4;
|
||||
--Scandic-Go-Yellow-20: #f8ff9c;
|
||||
--Scandic-Go-Yellow-30: #f5ff73;
|
||||
--Scandic-Go-Yellow-40: #edea39;
|
||||
--Scandic-Go-Yellow-50: #dec614;
|
||||
--Scandic-Go-Yellow-60: #ba8d07;
|
||||
--Scandic-Go-Yellow-70: #966400;
|
||||
--Scandic-Go-Yellow-80: #754403;
|
||||
--Scandic-Go-Yellow-90: #572701;
|
||||
--Surface-Primary-Hover-Light: #e6e5e5;
|
||||
--Surface-Primary-Hover: #f2f2f2;
|
||||
--Surface-Secondary-Hover: #e4e1d9;
|
||||
--Surface-UI-Fill-Active-Hover: #e6e5e5;
|
||||
--Tag-Font-fallback: sans-serif;
|
||||
--Tag-Letter-spacing: 0.24px;
|
||||
--Tag-Text-Transform: unset;
|
||||
--Title-Decorative-lg-Font-fallback: Serif;
|
||||
--Title-Decorative-lg-Letter-spacing: 0.32px;
|
||||
--Title-Decorative-lg-Text-Transform: unset;
|
||||
--Title-Decorative-md-Font-fallback: Serif;
|
||||
--Title-Decorative-md-Letter-spacing: 0.48px;
|
||||
--Title-Decorative-md-Text-Transform: unset;
|
||||
--Title-Overline-sm-Font-fallback: sans-serif;
|
||||
--Title-Overline-sm-Letter-spacing: 0.21px;
|
||||
--Title-Overline-sm-Text-Transform: unset;
|
||||
--Title-Subtitle-lg-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-lg-Letter-spacing: 0.24px;
|
||||
--Title-Subtitle-md-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-md-Letter-spacing: 0.2px;
|
||||
--Title-lg-Font-fallback: sans-serif;
|
||||
--Title-lg-Letter-spacing: 0.48px;
|
||||
--Title-lg-Text-Transform: unset;
|
||||
--Title-md-Font-fallback: sans-serif;
|
||||
--Title-md-Letter-spacing: 0.36px;
|
||||
--Title-md-LowCase-Font-fallback: sans-serif;
|
||||
--Title-md-LowCase-Letter-spacing: 0.36px;
|
||||
--Title-md-LowCase-Text-Transform: unset;
|
||||
--Title-md-Text-Transform: unset;
|
||||
--Title-sm-Font-fallback: sans-serif;
|
||||
--Title-sm-Letter-spacing: 0.42px;
|
||||
--Title-sm-LowCase-Font-fallback: sans-serif;
|
||||
--Title-sm-LowCase-Letter-spacing: 0.42px;
|
||||
--Title-sm-LowCase-Text-Transform: unset;
|
||||
--Title-sm-Text-Transform: unset;
|
||||
--Title-xs-Font-fallback: sans-serif;
|
||||
--Title-xs-Letter-spacing: 0.36px;
|
||||
--Title-xs-Text-Transform: unset;
|
||||
--Utilities-Gradients-10: #2d163a1a;
|
||||
|
||||
/* Aliases */
|
||||
--Background-Primary: var(--Scandic-Go-Beige-00);
|
||||
--Background-Secondary: var(--Neutral-Opacity-White-100);
|
||||
--Body-Lead-text-Font-family: var(--Font-family-Scandic-Go-Body);
|
||||
--Body-Lead-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Lead-text-Size: var(--Impl-Text-size-xs);
|
||||
--Body-Paragraph-Font-family: var(--Font-family-Scandic-Go-Body);
|
||||
--Body-Paragraph-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Paragraph-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Paragraph-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Supporting-text-Font-family: var(--Font-family-Scandic-Go-Body);
|
||||
--Body-Supporting-text-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Supporting-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Supporting-text-Size: var(--Impl-Text-size-4xs);
|
||||
--Body-Underline-md-Font-family: var(--Font-family-Scandic-Go-Body);
|
||||
--Body-Underline-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Underline-sm-Font-family: var(--Font-family-Scandic-Go-Body);
|
||||
--Body-Underline-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Border-Default: var(--Neutral-20);
|
||||
--Border-Divider-Accent: var(--Neutral-30);
|
||||
--Border-Divider-Brand-OnPrimary-1-Default: var(--Scandic-Go-Purple-100);
|
||||
--Border-Divider-Brand-OnPrimary-1-Secondary: var(--Scandic-Go-Purple-100);
|
||||
--Border-Divider-Brand-OnPrimary-2-Default: var(--Scandic-Go-Green-30);
|
||||
--Border-Divider-Brand-OnPrimary-3-Default: var(--Scandic-Go-Purple-10);
|
||||
--Border-Divider-Default: var(--Neutral-20);
|
||||
--Border-Divider-Subtle: var(--Neutral-15);
|
||||
--Border-Intense: var(--Neutral-30);
|
||||
--Border-Interactive-Default: var(--Neutral-30);
|
||||
--Border-Interactive-Disabled: var(--Neutral-40);
|
||||
--Border-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Border-Interactive-Focus: var(--Neutral-80);
|
||||
--Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
|
||||
--Border-Interactive-Selected: var(--Neutral-80);
|
||||
--Border-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Primary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Primary-Default: var(--Scandic-Go-Purple-10);
|
||||
--Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Primary-On-fill-Default: var(
|
||||
--Scandic-Go-Purple-100
|
||||
);
|
||||
--Component-Button-Brand-Primary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Primary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Default: var(
|
||||
--Scandic-Go-Purple-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Disabled: var(
|
||||
--Neutral-Opacity-Black-10
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Hover: var(--Scandic-Go-Purple-80);
|
||||
--Component-Button-Brand-Secondary-Border-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Secondary-Hover-Inverted: var(
|
||||
--Scandic-Go-Purple-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Secondary-On-fill-Default: var(
|
||||
--Scandic-Go-Purple-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Secondary-On-fill-Hover: var(--Scandic-Go-Purple-80);
|
||||
--Component-Button-Brand-Secondary-On-fill-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Hover: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Default: var(--Scandic-Go-Purple-100);
|
||||
--Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
|
||||
--Component-Button-Inverted-Hover-Inverted: var(--Scandic-Go-Purple-10);
|
||||
--Component-Button-Inverted-On-fill-Default: var(--Scandic-Go-Purple-100);
|
||||
--Component-Button-Inverted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Inverted-On-fill-Hover-inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Default: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Muted-Disabled-inverted: var(--Neutral-20);
|
||||
--Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Hover: var(--Neutral-Opacity-White-5);
|
||||
--Component-Button-Muted-On-fill-Default: var(--Neutral-90);
|
||||
--Component-Button-Muted-On-fill-Disabled: var(--Neutral-40);
|
||||
--Component-Button-Muted-On-fill-Hover-Inverted: var(--Scandic-Go-Purple-80);
|
||||
--Component-Button-Muted-On-fill-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Icon-Accent: var(--Scandic-Go-Coral-50);
|
||||
--Icon-Default: var(--Neutral-60);
|
||||
--Icon-Feedback-Error: var(--Scandic-Red-70);
|
||||
--Icon-Feedback-Information: var(--Scandic-Blue-70);
|
||||
--Icon-Feedback-Neutral: var(--Scandic-Grey-80);
|
||||
--Icon-Feedback-Success: var(--Scandic-Green-60);
|
||||
--Icon-Feedback-Warning: var(--Scandic-Yellow-60);
|
||||
--Icon-Intense: var(--Neutral-90);
|
||||
--Icon-Interactive-Default: var(--Scandic-Go-Purple-100);
|
||||
--Icon-Interactive-Disabled: var(--Neutral-30);
|
||||
--Icon-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Icon-Interactive-Secondary: var(--Scandic-Go-Purple-80);
|
||||
--Icon-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Label-Font-family: var(--Font-family-Scandic-Go-Body);
|
||||
--Label-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Label-Font-weight: var(--Font-weight-Regular);
|
||||
--Label-Size: var(--Impl-Text-size-5xs);
|
||||
--Link-md-Font-family: var(--Font-family-Scandic-Go-Body);
|
||||
--Link-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Link-sm-Font-family: var(--Font-family-Scandic-Go-Body);
|
||||
--Link-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Overlay-10: var(--Neutral-Opacity-Black-10);
|
||||
--Overlay-20: var(--Neutral-Opacity-Black-20);
|
||||
--Overlay-40: var(--Neutral-Opacity-Black-40);
|
||||
--Overlay-60: var(--Neutral-Opacity-Black-60);
|
||||
--Overlay-80: var(--Neutral-Opacity-Black-80);
|
||||
--Overlay-90: var(--Neutral-Opacity-Black-90);
|
||||
--Surface-Accent-1: var(--Scandic-Go-Coral-50);
|
||||
--Surface-Accent-2: var(--Scandic-Go-Cyan-20);
|
||||
--Surface-Accent-3: var(--Scandic-Go-Green-30);
|
||||
--Surface-Accent-4: var(--Scandic-Go-Purple-10);
|
||||
--Surface-Accent-5: var(--Scandic-Go-Powder-Rose-50);
|
||||
--Surface-Brand-Accent-Default: var(--Scandic-Go-Yellow-30);
|
||||
--Surface-Brand-Primary-1-Default: var(--Scandic-Go-Purple-10);
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent-Secondary: var(
|
||||
--Scandic-Go-Yellow-30
|
||||
);
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent: var(--Scandic-Go-Coral-50);
|
||||
--Surface-Brand-Primary-1-OnSurface-Default: var(--Scandic-Go-Purple-100);
|
||||
--Surface-Brand-Primary-2-Default: var(--Scandic-Go-Green-90);
|
||||
--Surface-Brand-Primary-2-OnSurface-Accent: var(--Scandic-Go-Green-30);
|
||||
--Surface-Brand-Primary-2-OnSurface-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-Brand-Primary-3-Default: var(--Scandic-Go-Purple-100);
|
||||
--Surface-Brand-Primary-3-OnSurface-Accent: var(--Scandic-Go-Cyan-20);
|
||||
--Surface-Brand-Primary-3-OnSurface-Default: var(--Scandic-Go-Purple-10);
|
||||
--Surface-Feedback-Error-Accent: var(--Scandic-Red-70);
|
||||
--Surface-Feedback-Error: var(--Scandic-Red-00);
|
||||
--Surface-Feedback-Information-Accent: var(--Scandic-Blue-70);
|
||||
--Surface-Feedback-Information: var(--Scandic-Blue-00);
|
||||
--Surface-Feedback-Neutral-Accent: var(--Neutral-50);
|
||||
--Surface-Feedback-Neutral: var(--Neutral-15);
|
||||
--Surface-Feedback-Succes-Accent: var(--Scandic-Green-60);
|
||||
--Surface-Feedback-Succes: var(--Scandic-Green-00);
|
||||
--Surface-Feedback-Warning--Light: var(--Scandic-Yellow-00);
|
||||
--Surface-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
|
||||
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-Primary-Disabled: var(--Neutral-15);
|
||||
--Surface-Primary-Hover-Accent: var(--Scandic-Go-Purple-10);
|
||||
--Surface-Primary-OnSurface-Default: var(--Scandic-Go-Beige-0);
|
||||
--Surface-Secondary-Default: var(--Scandic-Go-Beige-10);
|
||||
--Surface-Secondary-Secondary: var(--Scandic-Go-Beige-10);
|
||||
--Surface-UI-Fill-Active: var(--Neutral-80);
|
||||
--Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-UI-Fill-Disabled: var(--Neutral-15);
|
||||
--Surface-UI-Fill-Intense: var(--Neutral-80);
|
||||
--Tag-Font-family: var(--Font-family-Scandic-Go-Title);
|
||||
--Tag-Font-weight: var(--Font-weight-Medium);
|
||||
--Tag-Size: var(--Impl-Text-size-5xs);
|
||||
--Text-Accent-Primary: var(--Scandic-Go-Purple-100);
|
||||
--Text-Accent-Secondary: var(--Scandic-Go-Purple-80);
|
||||
--Text-Brand-OnAccent-Accent: var(--Scandic-Go-Purple-100);
|
||||
--Text-Brand-OnAccent-Default: var(--Scandic-Go-Purple-100);
|
||||
--Text-Brand-OnAccent-Heading: var(--Scandic-Go-Purple-100);
|
||||
--Text-Brand-OnPrimary-1-Accent: var(--Scandic-Go-Purple-100);
|
||||
--Text-Brand-OnPrimary-1-Default: var(--Scandic-Go-Purple-100);
|
||||
--Text-Brand-OnPrimary-1-Heading: var(--Scandic-Go-Purple-100);
|
||||
--Text-Brand-OnPrimary-2-Accent: var(--Scandic-Go-Purple-10);
|
||||
--Text-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Accent: var(--Scandic-Go-Purple-10);
|
||||
--Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Default: var(--Neutral-90);
|
||||
--Text-Heading: var(--Scandic-Go-Purple-100);
|
||||
--Text-Interactive-Default: var(--Scandic-Go-Purple-100);
|
||||
--Text-Interactive-Disabled: var(--Neutral-40);
|
||||
--Text-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Text-Interactive-Focus: var(--Neutral-80);
|
||||
--Text-Interactive-Hover-Secondary: var(--Scandic-Go-Purple-100);
|
||||
--Text-Interactive-Placeholder: var(--Neutral-50);
|
||||
--Text-Interactive-Secondary: var(--Scandic-Go-Purple-80);
|
||||
--Text-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Text-Secondary: var(--Neutral-60);
|
||||
--Text-Tertiary: var(--Neutral-50);
|
||||
--Title-Decorative-lg-Font-family: var(--Font-family-Scandic-Go-Decorative);
|
||||
--Title-Decorative-lg-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Decorative-lg-Size: var(--Impl-Text-size-xl);
|
||||
--Title-Decorative-md-Font-family: var(--Font-family-Scandic-Go-Decorative);
|
||||
--Title-Decorative-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Decorative-md-Size: var(--Impl-Text-size-sm);
|
||||
--Title-Overline-sm-Font-family: var(--Font-family-Scandic-Go-Title);
|
||||
--Title-Overline-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Overline-sm-Size: var(--Impl-Text-size-2xs);
|
||||
--Title-Subtitle-lg-Font-family: var(--Font-family-Scandic-Go-Body);
|
||||
--Title-Subtitle-lg-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-lg-Size: var(--Impl-Text-size-sm);
|
||||
--Title-Subtitle-md-Font-family: var(--Font-family-Scandic-Go-Body);
|
||||
--Title-Subtitle-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-md-Size: var(--Impl-Text-size-xs);
|
||||
--Title-lg-Font-family: var(--Font-family-Scandic-Go-Title);
|
||||
--Title-lg-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-lg-Size: var(--Impl-Text-size-4xl);
|
||||
--Title-md-Font-family: var(--Font-family-Scandic-Go-Title);
|
||||
--Title-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-md-LowCase-Font-family: var(--Font-family-Title);
|
||||
--Title-md-LowCase-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-md-LowCase-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-md-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-sm-Font-family: var(--Font-family-Scandic-Go-Title);
|
||||
--Title-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-sm-LowCase-Font-family: var(--Font-family-Scandic-Go-Title);
|
||||
--Title-sm-LowCase-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-sm-LowCase-Size: var(--Impl-Text-size-lg);
|
||||
--Title-sm-Size: var(--Impl-Text-size-lg);
|
||||
--Title-xs-Font-family: var(--Font-family-Scandic-Go-Title);
|
||||
--Title-xs-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-xs-Size: var(--Impl-Text-size-sm);
|
||||
}
|
||||
307
packages/design-system/lib/styles/scandic-go.js
Normal file
307
packages/design-system/lib/styles/scandic-go.js
Normal file
@@ -0,0 +1,307 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
export const theme = {
|
||||
'Scandic Go/Beige/00': '#FFFEFA',
|
||||
'Scandic Go/Beige/0': '#FAF8F2',
|
||||
'Scandic Go/Beige/10': '#F0EDE4',
|
||||
'Scandic Go/Beige/20': '#E0DCCE',
|
||||
'Scandic Go/Beige/30': '#C8C4B6',
|
||||
'Scandic Go/Beige/40': '#B0ACA0',
|
||||
'Scandic Go/Beige/50': '#918F83',
|
||||
'Scandic Go/Beige/60': '#78766D',
|
||||
'Scandic Go/Beige/70': '#63615A',
|
||||
'Scandic Go/Beige/80': '#4F4D49',
|
||||
'Scandic Go/Beige/90': '#373633',
|
||||
'Scandic Go/Beige/100': '#1F1E1D',
|
||||
'Scandic Go/Purple/00': '#F4F2FF',
|
||||
'Scandic Go/Purple/10': '#DCD7FF',
|
||||
'Scandic Go/Purple/20': '#CABFFC',
|
||||
'Scandic Go/Purple/30': '#BAA7F7',
|
||||
'Scandic Go/Purple/40': '#AB8EF0',
|
||||
'Scandic Go/Purple/50': '#9C75E6',
|
||||
'Scandic Go/Purple/60': '#8C5BD5',
|
||||
'Scandic Go/Purple/70': '#733CB2',
|
||||
'Scandic Go/Purple/80': '#5E2A8C',
|
||||
'Scandic Go/Purple/90': '#451F61',
|
||||
'Scandic Go/Purple/100': '#2D163A',
|
||||
'Scandic Go/Yellow/00': '#FDFFE8',
|
||||
'Scandic Go/Yellow/10': '#FAFFC4',
|
||||
'Scandic Go/Yellow/20': '#F8FF9C',
|
||||
'Scandic Go/Yellow/30': '#F5FF73',
|
||||
'Scandic Go/Yellow/40': '#EDEA39',
|
||||
'Scandic Go/Yellow/50': '#DEC614',
|
||||
'Scandic Go/Yellow/60': '#BA8D07',
|
||||
'Scandic Go/Yellow/70': '#966400',
|
||||
'Scandic Go/Yellow/80': '#754403',
|
||||
'Scandic Go/Yellow/90': '#572701',
|
||||
'Scandic Go/Yellow/100': '#3B1300',
|
||||
'Scandic Go/Green/00': '#EDFFE5',
|
||||
'Scandic Go/Green/10': '#CDFFB8',
|
||||
'Scandic Go/Green/20': '#A7FF82',
|
||||
'Scandic Go/Green/30': '#85FF52',
|
||||
'Scandic Go/Green/40': '#66E03A',
|
||||
'Scandic Go/Green/50': '#45B222',
|
||||
'Scandic Go/Green/60': '#2E7F18',
|
||||
'Scandic Go/Green/70': '#2A601E',
|
||||
'Scandic Go/Green/80': '#26461F',
|
||||
'Scandic Go/Green/90': '#21331F',
|
||||
'Scandic Go/Green/100': '#162115',
|
||||
'Scandic Go/Cyan/20': '#73FCEE',
|
||||
'Scandic Go/Coral/50': '#FA3737',
|
||||
'Scandic Go/Powder Rose/50': '#ECC8C9',
|
||||
'Title/lg/Letter spacing': 0.48,
|
||||
'Title/lg/Font fallback': 'sans-serif',
|
||||
'Title/lg/Text-Transform': 'unset',
|
||||
'Title/md/Letter spacing': 0.36,
|
||||
'Title/md/Font fallback': 'sans-serif',
|
||||
'Title/sm/Letter spacing': 0.42,
|
||||
'Title/sm/Font fallback': 'sans-serif',
|
||||
'Title/sm/Text-Transform': 'unset',
|
||||
'Title/Decorative/lg/Letter spacing': 0.32,
|
||||
'Title/Decorative/lg/Font fallback': 'Serif',
|
||||
'Title/Decorative/lg/Text-Transform': 'unset',
|
||||
'Title/Decorative/md/Letter spacing': 0.48,
|
||||
'Title/Decorative/md/Font fallback': 'Serif',
|
||||
'Title/Decorative/md/Text-Transform': 'unset',
|
||||
'Title/Subtitle/lg/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/lg/Letter spacing': 0.24,
|
||||
'Title/Subtitle/md/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/md/Letter spacing': 0.2,
|
||||
'Title/Overline/sm/Letter spacing': 0.21,
|
||||
'Title/Overline/sm/Font fallback': 'sans-serif',
|
||||
'Title/Overline/sm/Text-Transform': 'unset',
|
||||
'Title/sm/LowCase/Letter spacing': 0.42,
|
||||
'Title/sm/LowCase/Font fallback': 'sans-serif',
|
||||
'Title/sm/LowCase/Text-Transform': 'unset',
|
||||
'Title/xs/Letter spacing': 0.36,
|
||||
'Title/xs/Font fallback': 'sans-serif',
|
||||
'Title/xs/Text-Transform': 'unset',
|
||||
'Title/md/Text-Transform': 'unset',
|
||||
'Title/md/LowCase/Letter spacing': 0.36,
|
||||
'Title/md/LowCase/Font fallback': 'sans-serif',
|
||||
'Title/md/LowCase/Text-Transform': 'unset',
|
||||
'Tag/Letter spacing': 0.24,
|
||||
'Tag/Font fallback': 'sans-serif',
|
||||
'Tag/Text-Transform': 'unset',
|
||||
'Link/md/Font fallback': 'sans-serif',
|
||||
'Link/md/Letter spacing': 0.19,
|
||||
'Link/sm/Font fallback': 'sans-serif',
|
||||
'Link/sm/Letter spacing': 0.2,
|
||||
'Body/Lead text/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Letter spacing': 0.19,
|
||||
'Body/Supporting text/Font fallback': 'sans-serif',
|
||||
'Body/Supporting text/Letter spacing': 0.2,
|
||||
'Body/Lead text/Letter spacing': 0.2,
|
||||
'Label/Font fallback': 'sans-serif',
|
||||
'Label/Letter spacing': 0.17,
|
||||
'Body/Underline/md/Font fallback': 'sans-serif',
|
||||
'Body/Underline/md/Letter spacing': 0.19,
|
||||
'Body/Underline/sm/Font fallback': 'sans-serif',
|
||||
'Body/Underline/sm/Letter spacing': 0.2,
|
||||
'Utilities/Gradients/10': '#2D163A1A',
|
||||
'Font family/Scandic Go/Title': 'Neue Haas Grotesk Display Pro',
|
||||
'Font family/Scandic Go/Body': 'Fira sans',
|
||||
'Font family/Scandic Go/Decorative': 'ITC Garamond Std',
|
||||
'Title/lg/Font weight': 500,
|
||||
'Title/lg/Font family': 'Neue Haas Grotesk Display Pro',
|
||||
'Title/md/Font weight': 500,
|
||||
'Title/md/Font family': 'Neue Haas Grotesk Display Pro',
|
||||
'Title/sm/Font weight': 500,
|
||||
'Title/sm/Font family': 'Neue Haas Grotesk Display Pro',
|
||||
'Title/sm/LowCase/Font weight': 500,
|
||||
'Title/sm/LowCase/Font family': 'Neue Haas Grotesk Display Pro',
|
||||
'Title/Decorative/lg/Font weight': 500,
|
||||
'Title/Decorative/lg/Font family': 'ITC Garamond Std',
|
||||
'Title/Decorative/md/Font weight': 500,
|
||||
'Title/Decorative/md/Font family': 'ITC Garamond Std',
|
||||
'Title/Subtitle/lg/Font weight': 500,
|
||||
'Title/Subtitle/lg/Font family': 'Fira sans',
|
||||
'Title/Subtitle/md/Font weight': 500,
|
||||
'Title/Subtitle/md/Font family': 'Fira sans',
|
||||
'Title/Overline/sm/Font weight': 500,
|
||||
'Title/Overline/sm/Font family': 'Neue Haas Grotesk Display Pro',
|
||||
'Title/xs/Font weight': 500,
|
||||
'Title/xs/Font family': 'Neue Haas Grotesk Display Pro',
|
||||
'Title/md/LowCase/Font weight': 500,
|
||||
'Title/md/LowCase/Font family': 'Brandon Text',
|
||||
'Tag/Font weight': 500,
|
||||
'Tag/Font family': 'Neue Haas Grotesk Display Pro',
|
||||
'Link/md/Font weight': 500,
|
||||
'Link/md/Font family': 'Fira sans',
|
||||
'Link/sm/Font weight': 500,
|
||||
'Link/sm/Font family': 'Fira sans',
|
||||
'Body/Lead text/Font weight': 400,
|
||||
'Body/Lead text/Font family': 'Fira sans',
|
||||
'Body/Paragraph/Font weight': 400,
|
||||
'Body/Paragraph/Font weight 2': 500,
|
||||
'Body/Paragraph/Font family': 'Fira sans',
|
||||
'Body/Supporting text/Font weight': 400,
|
||||
'Body/Supporting text/Font weight 2': 500,
|
||||
'Body/Supporting text/Font family': 'Fira sans',
|
||||
'Label/Font weight': 400,
|
||||
'Label/Font weight 2': 500,
|
||||
'Label/Font family': 'Fira sans',
|
||||
'Body/Underline/md/Font weight': 400,
|
||||
'Body/Underline/md/Font family': 'Fira sans',
|
||||
'Body/Underline/sm/Font weight': 400,
|
||||
'Body/Underline/sm/Font family': 'Fira sans',
|
||||
'Text/Heading': '#2D163A',
|
||||
'Text/Default': '#1F1F1F',
|
||||
'Text/Secondary': '#575757',
|
||||
'Text/Tertiary': '#747474',
|
||||
'Text/Accent Primary': '#2D163A',
|
||||
'Text/Accent Secondary': '#5E2A8C',
|
||||
'Text/Inverted': '#FFFFFF',
|
||||
'Text/Interactive/Default': '#2D163A',
|
||||
'Text/Interactive/Secondary': '#5E2A8C',
|
||||
'Text/Interactive/Hover Secondary': '#2D163A',
|
||||
'Text/Interactive/Disabled': '#8C8C8C',
|
||||
'Text/Interactive/Focus': '#262626',
|
||||
'Text/Interactive/Error': '#AD0015',
|
||||
'Text/Interactive/Placeholder': '#747474',
|
||||
'Text/Brand/OnAccent/Heading': '#2D163A',
|
||||
'Text/Brand/OnAccent/Default': '#2D163A',
|
||||
'Text/Brand/OnAccent/Accent': '#2D163A',
|
||||
'Text/Brand/OnPrimary 1/Heading': '#2D163A',
|
||||
'Text/Brand/OnPrimary 1/Default': '#2D163A',
|
||||
'Text/Brand/OnPrimary 1/Accent': '#2D163A',
|
||||
'Text/Brand/OnPrimary 2/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Accent': '#DCD7FF',
|
||||
'Text/Brand/OnPrimary 3/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Accent': '#DCD7FF',
|
||||
'Background/Primary': '#FFFEFA',
|
||||
'Background/Secondary': '#FFFFFF',
|
||||
'Surface/Primary/Default': '#FFFFFF',
|
||||
'Surface/Primary/Hover': '#f2f2f2',
|
||||
'Surface/Primary/Hover Light': '#e6e5e5',
|
||||
'Surface/Primary/Hover Accent': '#DCD7FF',
|
||||
'Surface/Primary/OnSurface/Default': '#FAF8F2',
|
||||
'Surface/Primary/Disabled': '#E9E9E9',
|
||||
'Surface/Secondary/Default': '#F0EDE4',
|
||||
'Surface/Secondary/Secondary': '#F0EDE4',
|
||||
'Surface/Secondary/Hover': '#e4e1d9',
|
||||
'Surface/Brand/Accent/Default': '#F5FF73',
|
||||
'Surface/Brand/Primary 1/Default': '#DCD7FF',
|
||||
'Surface/Brand/Primary 1/OnSurface/Default': '#2D163A',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent': '#FA3737',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#F5FF73',
|
||||
'Surface/Brand/Primary 2/Default': '#21331F',
|
||||
'Surface/Brand/Primary 2/OnSurface/Default': '#FFFFFF',
|
||||
'Surface/Brand/Primary 2/OnSurface/Accent': '#85FF52',
|
||||
'Surface/Brand/Primary 3/Default': '#2D163A',
|
||||
'Surface/Brand/Primary 3/OnSurface/Default': '#DCD7FF',
|
||||
'Surface/Brand/Primary 3/OnSurface/Accent': '#73FCEE',
|
||||
'Surface/UI Fill/Default': '#FFFFFF',
|
||||
'Surface/UI Fill/Intense': '#262626',
|
||||
'Surface/UI Fill/Active': '#262626',
|
||||
'Surface/UI Fill/Active Hover': '#e6e5e5',
|
||||
'Surface/UI Fill/Disabled': '#E9E9E9',
|
||||
'Surface/Accent/1': '#FA3737',
|
||||
'Surface/Accent/2': '#73FCEE',
|
||||
'Surface/Accent/3': '#85FF52',
|
||||
'Surface/Accent/4': '#DCD7FF',
|
||||
'Surface/Accent/5': '#ECC8C9',
|
||||
'Surface/Feedback/Information Accent': '#284EA0',
|
||||
'Surface/Feedback/Information': '#E8F6FF',
|
||||
'Surface/Feedback/Succes Accent': '#348337',
|
||||
'Surface/Feedback/Succes': '#F3FCE8',
|
||||
'Surface/Feedback/Warning Accent': '#D17308',
|
||||
'Surface/Feedback/Warning Light': '#FFF8E3',
|
||||
'Surface/Feedback/Error Accent': '#AD0015',
|
||||
'Surface/Feedback/Error': '#FFEBEB',
|
||||
'Surface/Feedback/Neutral Accent': '#747474',
|
||||
'Surface/Feedback/Neutral': '#E9E9E9',
|
||||
'Border/Default': '#D9D9D9',
|
||||
'Border/Intense': '#BFBFBF',
|
||||
'Border/Inverted': '#FFFFFF',
|
||||
'Icon/Default': '#575757',
|
||||
'Icon/Intense': '#1F1F1F',
|
||||
'Icon/Accent': '#FA3737',
|
||||
'Icon/Interactive/Default': '#2D163A',
|
||||
'Icon/Interactive/Secondary': '#5E2A8C',
|
||||
'Icon/Interactive/Disabled': '#BFBFBF',
|
||||
'Icon/Interactive/Placeholder': '#747474',
|
||||
'Icon/Feedback/Information': '#284EA0',
|
||||
'Icon/Feedback/Success': '#348337',
|
||||
'Icon/Feedback/Warning': '#D17308',
|
||||
'Icon/Feedback/Error': '#AD0015',
|
||||
'Icon/Feedback/Neutral': '#57514E',
|
||||
'Icon/Inverted': '#FFFFFF',
|
||||
'Overlay/10': '#1F1C1B1A',
|
||||
'Overlay/20': '#1F1C1B33',
|
||||
'Overlay/40': '#1F1C1B66',
|
||||
'Overlay/60': '#1F1C1B99',
|
||||
'Overlay/80': '#1F1C1BCC',
|
||||
'Overlay/90': '#1F1C1BE6',
|
||||
'Component/Button/Brand/Primary/Default': '#DCD7FF',
|
||||
'Component/Button/Brand/Primary/Hover': '#c7c2e5',
|
||||
'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Primary/On fill/Default': '#2D163A',
|
||||
'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Hover Inverted': '#2D163A',
|
||||
'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Secondary/On fill/Default': '#2D163A',
|
||||
'Component/Button/Brand/Secondary/On fill/Hover': '#5E2A8C',
|
||||
'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Secondary/Border/Default': '#2D163A',
|
||||
'Component/Button/Brand/Secondary/Border/Hover': '#5E2A8C',
|
||||
'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Border/Hover inverted': '#e8e5e9',
|
||||
'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/Default': '#2D163A',
|
||||
'Component/Button/Brand/Tertiary/Hover': '#402a4b',
|
||||
'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Default': '#FFFFFF',
|
||||
'Component/Button/Inverted/Faded': '#FFFFFFE6',
|
||||
'Component/Button/Inverted/Hover': '#f2f2f2',
|
||||
'Component/Button/Inverted/Hover Inverted': '#DCD7FF',
|
||||
'Component/Button/Inverted/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Inverted/On fill/Default': '#2D163A',
|
||||
'Component/Button/Inverted/On fill/Hover': '#402a4b',
|
||||
'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
|
||||
'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Inverted/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
|
||||
'Border/Interactive/Default': '#BFBFBF',
|
||||
'Border/Divider/Default': '#D9D9D9',
|
||||
'Border/Divider/Subtle': '#E9E9E9',
|
||||
'Border/Divider/Accent': '#BFBFBF',
|
||||
'Border/Divider/Brand/OnPrimary 1/Default': '#2D163A',
|
||||
'Border/Divider/Brand/OnPrimary 1/Secondary': '#2D163A',
|
||||
'Border/Divider/Brand/OnPrimary 2/Default': '#85FF52',
|
||||
'Border/Divider/Brand/OnPrimary 3/Default': '#DCD7FF',
|
||||
'Border/Interactive/Selected': '#262626',
|
||||
'Border/Interactive/Focus': '#262626',
|
||||
'Border/Interactive/Disabled': '#8C8C8C',
|
||||
'Border/Interactive/Error': '#AD0015',
|
||||
'Border/Interactive/KeyboardFocus': '#5B8FD4',
|
||||
'Component/Button/Muted/Default': '#FFFFFF',
|
||||
'Component/Button/Muted/Hover': '#FFFFFF00',
|
||||
'Component/Button/Muted/Disabled': '#FFFFFF1A',
|
||||
'Component/Button/Muted/Hover inverted': '#f2f2f2',
|
||||
'Component/Button/Muted/Disabled inverted': '#D9D9D9',
|
||||
'Component/Button/Muted/On fill/Default': '#1F1F1F',
|
||||
'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Muted/On fill/Hover Inverted': '#5E2A8C',
|
||||
'Component/Button/Muted/On fill/Disabled': '#8C8C8C',
|
||||
'Component/Button/Muted/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Muted/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Muted/Border/Disable': '#FFFFFF00',
|
||||
}
|
||||
382
packages/design-system/lib/styles/scandic.css
Normal file
382
packages/design-system/lib/styles/scandic.css
Normal file
@@ -0,0 +1,382 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
.scandic {
|
||||
/* Values */
|
||||
--Body-Lead-text-Font-fallback: sans-serif;
|
||||
--Body-Lead-text-Letter-spacing: 0.2px;
|
||||
--Body-Paragraph-Font-fallback: sans-serif;
|
||||
--Body-Paragraph-Letter-spacing: 0.19px;
|
||||
--Body-Supporting-text-Font-fallback: sans-serif;
|
||||
--Body-Supporting-text-Letter-spacing: 0.2px;
|
||||
--Body-Underline-md-Font-fallback: sans-serif;
|
||||
--Body-Underline-md-Letter-spacing: 0.19px;
|
||||
--Body-Underline-sm-Font-fallback: sans-serif;
|
||||
--Body-Underline-sm-Letter-spacing: 0.2px;
|
||||
--Component-Button-Brand-Primary-Hover: #ba1721;
|
||||
--Component-Button-Brand-Secondary-Border-Hover-inverted: #eee4e5;
|
||||
--Component-Button-Brand-Tertiary-Hover: #601e2d;
|
||||
--Component-Button-Inverted-Hover: #f2f2f2;
|
||||
--Component-Button-Inverted-On-fill-Hover: #601e2d;
|
||||
--Label-Font-fallback: sans-serif;
|
||||
--Label-Letter-spacing: 0.17px;
|
||||
--Link-md-Font-fallback: sans-serif;
|
||||
--Link-md-Letter-spacing: 0.19px;
|
||||
--Link-sm-Font-fallback: sans-serif;
|
||||
--Link-sm-Letter-spacing: 0.2px;
|
||||
--Scandic-Beige-00: #faf6f2;
|
||||
--Scandic-Beige-100: #291710;
|
||||
--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-Blue-00: #e8f6ff;
|
||||
--Scandic-Blue-100: #0d1440;
|
||||
--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-Green-00: #f3fce8;
|
||||
--Scandic-Green-100: #091f16;
|
||||
--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-Grey-00: #f9f6f4;
|
||||
--Scandic-Grey-100: #26201e;
|
||||
--Scandic-Grey-10: #ebe8e6;
|
||||
--Scandic-Grey-20: #d6d2d0;
|
||||
--Scandic-Grey-30: #c2bdba;
|
||||
--Scandic-Grey-40: #a8a4a2;
|
||||
--Scandic-Grey-50: #8c8987;
|
||||
--Scandic-Grey-60: #787472;
|
||||
--Scandic-Grey-70: #635f5d;
|
||||
--Scandic-Grey-80: #57514e;
|
||||
--Scandic-Grey-90: #403937;
|
||||
--Scandic-Peach-00: #fff3ed;
|
||||
--Scandic-Peach-100: #4d0f25;
|
||||
--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-Red-00: #ffebeb;
|
||||
--Scandic-Red-100: #4d001b;
|
||||
--Scandic-Red-10: #f7c1c2;
|
||||
--Scandic-Red-20: #f79499;
|
||||
--Scandic-Red-30: #f26b74;
|
||||
--Scandic-Red-40: #ed4251;
|
||||
--Scandic-Red-50: #e32034;
|
||||
--Scandic-Red-70: #ad0015;
|
||||
--Scandic-Red-80: #8d0011;
|
||||
--Scandic-Red-90: #6d000d;
|
||||
--Scandic-Red-Default: #cd0921;
|
||||
--Scandic-Yellow-00: #fff8e3;
|
||||
--Scandic-Yellow-100: #301508;
|
||||
--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;
|
||||
--Surface-Primary-Hover-Light: #e6e5e5;
|
||||
--Surface-Primary-Hover: #f2f2f2;
|
||||
--Surface-Secondary-Hover: #dad4cf;
|
||||
--Surface-UI-Fill-Active-Hover: #ffffff;
|
||||
--Tag-Font-fallback: sans-serif;
|
||||
--Tag-Letter-spacing: 0.2px;
|
||||
--Tag-Text-Transform: uppercase;
|
||||
--Title-Decorative-lg-Font-fallback: sans-serif;
|
||||
--Title-Decorative-lg-Letter-spacing: 0.64px;
|
||||
--Title-Decorative-lg-Text-Transform: unset;
|
||||
--Title-Decorative-md-Font-fallback: sans-serif;
|
||||
--Title-Decorative-md-Letter-spacing: 0.48px;
|
||||
--Title-Decorative-md-Text-Transform: unset;
|
||||
--Title-Overline-sm-Font-fallback: sans-serif;
|
||||
--Title-Overline-sm-Letter-spacing: 0.64px;
|
||||
--Title-Overline-sm-Text-Transform: uppercase;
|
||||
--Title-Subtitle-lg-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-lg-Letter-spacing: 0.24px;
|
||||
--Title-Subtitle-md-Font-fallback: sans-serif;
|
||||
--Title-Subtitle-md-Letter-spacing: 0.2px;
|
||||
--Title-lg-Font-fallback: sans-serif;
|
||||
--Title-lg-Letter-spacing: 0.12px;
|
||||
--Title-lg-Text-Transform: uppercase;
|
||||
--Title-md-Font-fallback: sans-serif;
|
||||
--Title-md-Letter-spacing: 0.09px;
|
||||
--Title-md-LowCase-Font-fallback: sans-serif;
|
||||
--Title-md-LowCase-Letter-spacing: 0.09px;
|
||||
--Title-md-LowCase-Text-Transform: unset;
|
||||
--Title-md-Text-Transform: uppercase;
|
||||
--Title-sm-Font-fallback: sans-serif;
|
||||
--Title-sm-Letter-spacing: 0.07px;
|
||||
--Title-sm-LowCase-Font-fallback: sans-serif;
|
||||
--Title-sm-LowCase-Letter-spacing: 0.07px;
|
||||
--Title-sm-LowCase-Text-Transform: unset;
|
||||
--Title-sm-Text-Transform: uppercase;
|
||||
--Title-xs-Font-fallback: sans-serif;
|
||||
--Title-xs-Letter-spacing: 0.06px;
|
||||
--Title-xs-Text-Transform: uppercase;
|
||||
--Utilities-Gradients-10: #f2ece61a;
|
||||
|
||||
/* Aliases */
|
||||
--Background-Primary: var(--Scandic-Beige-00);
|
||||
--Background-Secondary: var(--Neutral-Opacity-White-100);
|
||||
--Body-Lead-text-Font-family: var(--Font-family-Body);
|
||||
--Body-Lead-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Lead-text-Size: var(--Impl-Text-size-xs);
|
||||
--Body-Paragraph-Font-family: var(--Font-family-Body);
|
||||
--Body-Paragraph-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Paragraph-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Paragraph-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Supporting-text-Font-family: var(--Font-family-Body);
|
||||
--Body-Supporting-text-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Body-Supporting-text-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Supporting-text-Size: var(--Impl-Text-size-4xs);
|
||||
--Body-Underline-md-Font-family: var(--Font-family-Body);
|
||||
--Body-Underline-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Body-Underline-sm-Font-family: var(--Font-family-Body);
|
||||
--Body-Underline-sm-Font-weight: var(--Font-weight-Regular);
|
||||
--Body-Underline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Border-Default: var(--Scandic-Beige-20);
|
||||
--Border-Divider-Accent: var(--Scandic-Peach-30);
|
||||
--Border-Divider-Brand-OnPrimary-1-Default: var(--Scandic-Peach-40);
|
||||
--Border-Divider-Brand-OnPrimary-1-Secondary: var(--Scandic-Peach-90);
|
||||
--Border-Divider-Brand-OnPrimary-2-Default: var(--Scandic-Red-70);
|
||||
--Border-Divider-Brand-OnPrimary-3-Default: var(--Scandic-Peach-80);
|
||||
--Border-Divider-Default: var(--Scandic-Beige-20);
|
||||
--Border-Divider-Subtle: var(--Scandic-Beige-10);
|
||||
--Border-Intense: var(--Scandic-Beige-40);
|
||||
--Border-Interactive-Default: var(--Scandic-Beige-50);
|
||||
--Border-Interactive-Disabled: var(--Scandic-Grey-40);
|
||||
--Border-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Border-Interactive-Focus: var(--Scandic-Grey-100);
|
||||
--Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
|
||||
--Border-Interactive-Selected: var(--Scandic-Beige-70);
|
||||
--Border-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Primary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Primary-Default: var(--Scandic-Red-Default);
|
||||
--Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Primary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Primary-On-fill-Disabled: var(--Scandic-Grey-40);
|
||||
--Component-Button-Brand-Primary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Default: var(--Scandic-Red-100);
|
||||
--Component-Button-Brand-Secondary-Border-Disabled: var(
|
||||
--Neutral-Opacity-Black-10
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Border-Hover: var(--Scandic-Peach-80);
|
||||
--Component-Button-Brand-Secondary-Border-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Secondary-Hover-Inverted: var(--Scandic-Red-100);
|
||||
--Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Brand-Secondary-On-fill-Default: var(--Scandic-Red-100);
|
||||
--Component-Button-Brand-Secondary-On-fill-Disabled: var(--Scandic-Grey-40);
|
||||
--Component-Button-Brand-Secondary-On-fill-Hover: var(--Scandic-Peach-80);
|
||||
--Component-Button-Brand-Secondary-On-fill-Inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Default: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Disabled: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Border-Hover: var(
|
||||
--Neutral-Opacity-White-0
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-Default: var(--Scandic-Red-100);
|
||||
--Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Default: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Scandic-Grey-40);
|
||||
--Component-Button-Brand-Tertiary-On-fill-Hover: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
|
||||
--Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
|
||||
--Component-Button-Inverted-Hover-Inverted: var(--Scandic-Red-100);
|
||||
--Component-Button-Inverted-On-fill-Default: var(--Scandic-Red-100);
|
||||
--Component-Button-Inverted-On-fill-Disabled: var(--Scandic-Grey-40);
|
||||
--Component-Button-Inverted-On-fill-Hover-inverted: var(
|
||||
--Neutral-Opacity-White-100
|
||||
);
|
||||
--Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Default: var(--Neutral-Opacity-White-0);
|
||||
--Component-Button-Muted-Disabled-inverted: var(--Neutral-Opacity-Black-10);
|
||||
--Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-10);
|
||||
--Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5);
|
||||
--Component-Button-Muted-Hover: var(--Neutral-Opacity-White-5);
|
||||
--Component-Button-Muted-On-fill-Default: var(--Scandic-Grey-100);
|
||||
--Component-Button-Muted-On-fill-Disabled: var(--Scandic-Grey-40);
|
||||
--Component-Button-Muted-On-fill-Hover-Inverted: var(--Scandic-Red-90);
|
||||
--Component-Button-Muted-On-fill-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Icon-Accent: var(--Scandic-Peach-70);
|
||||
--Icon-Default: var(--Scandic-Grey-80);
|
||||
--Icon-Feedback-Error: var(--Scandic-Red-70);
|
||||
--Icon-Feedback-Information: var(--Scandic-Blue-70);
|
||||
--Icon-Feedback-Neutral: var(--Scandic-Grey-80);
|
||||
--Icon-Feedback-Success: var(--Scandic-Green-60);
|
||||
--Icon-Feedback-Warning: var(--Scandic-Yellow-60);
|
||||
--Icon-Intense: var(--Scandic-Grey-100);
|
||||
--Icon-Interactive-Default: var(--Scandic-Red-100);
|
||||
--Icon-Interactive-Disabled: var(--Scandic-Grey-40);
|
||||
--Icon-Interactive-Placeholder: var(--Scandic-Grey-60);
|
||||
--Icon-Interactive-Secondary: var(--Scandic-Peach-80);
|
||||
--Icon-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Label-Font-family: var(--Font-family-Body);
|
||||
--Label-Font-weight-2: var(--Font-weight-Medium);
|
||||
--Label-Font-weight: var(--Font-weight-Regular);
|
||||
--Label-Size: var(--Impl-Text-size-5xs);
|
||||
--Link-md-Font-family: var(--Font-family-Body);
|
||||
--Link-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-md-Size: var(--Impl-Text-size-3xs);
|
||||
--Link-sm-Font-family: var(--Font-family-Body);
|
||||
--Link-sm-Font-weight: var(--Font-weight-Medium);
|
||||
--Link-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Overlay-10: var(--Neutral-Opacity-Black-10);
|
||||
--Overlay-20: var(--Neutral-Opacity-Black-20);
|
||||
--Overlay-40: var(--Neutral-Opacity-Black-40);
|
||||
--Overlay-60: var(--Neutral-Opacity-Black-60);
|
||||
--Overlay-80: var(--Neutral-Opacity-Black-80);
|
||||
--Overlay-90: var(--Neutral-Opacity-Black-90);
|
||||
--Surface-Accent-1: var(--Scandic-Red-80);
|
||||
--Surface-Accent-2: var(--Scandic-Blue-60);
|
||||
--Surface-Accent-3: var(--Scandic-Green-70);
|
||||
--Surface-Accent-4: var(--Scandic-Yellow-50);
|
||||
--Surface-Accent-5: var(--Scandic-Blue-80);
|
||||
--Surface-Brand-Accent-Default: var(--Scandic-Peach-30);
|
||||
--Surface-Brand-Primary-1-Default: var(--Scandic-Peach-10);
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent-Secondary: var(--Scandic-Peach-80);
|
||||
--Surface-Brand-Primary-1-OnSurface-Accent: var(--Scandic-Red-Default);
|
||||
--Surface-Brand-Primary-1-OnSurface-Default: var(--Scandic-Red-100);
|
||||
--Surface-Brand-Primary-2-Default: var(--Scandic-Red-Default);
|
||||
--Surface-Brand-Primary-2-OnSurface-Accent: var(--Scandic-Peach-10);
|
||||
--Surface-Brand-Primary-2-OnSurface-Default: var(--Scandic-Red-100);
|
||||
--Surface-Brand-Primary-3-Default: var(--Scandic-Red-100);
|
||||
--Surface-Brand-Primary-3-OnSurface-Accent: var(--Scandic-Red-Default);
|
||||
--Surface-Brand-Primary-3-OnSurface-Default: var(--Scandic-Peach-10);
|
||||
--Surface-Feedback-Error-Accent: var(--Scandic-Red-70);
|
||||
--Surface-Feedback-Error: var(--Scandic-Red-00);
|
||||
--Surface-Feedback-Information-Accent: var(--Scandic-Blue-70);
|
||||
--Surface-Feedback-Information: var(--Scandic-Blue-00);
|
||||
--Surface-Feedback-Neutral-Accent: var(--Scandic-Grey-60);
|
||||
--Surface-Feedback-Neutral: var(--Scandic-Grey-10);
|
||||
--Surface-Feedback-Succes-Accent: var(--Scandic-Green-60);
|
||||
--Surface-Feedback-Succes: var(--Scandic-Green-00);
|
||||
--Surface-Feedback-Warning--Light: var(--Scandic-Yellow-00);
|
||||
--Surface-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
|
||||
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-Primary-Disabled: var(--Scandic-Grey-10);
|
||||
--Surface-Primary-Hover-Accent: var(--Scandic-Peach-10);
|
||||
--Surface-Primary-OnSurface-Default: var(--Scandic-Beige-00);
|
||||
--Surface-Secondary-Default: var(--Scandic-Beige-10);
|
||||
--Surface-Secondary-Secondary: var(--Scandic-Beige-20);
|
||||
--Surface-UI-Fill-Active: var(--Scandic-Peach-100);
|
||||
--Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
|
||||
--Surface-UI-Fill-Disabled: var(--Scandic-Grey-10);
|
||||
--Surface-UI-Fill-Intense: var(--Scandic-Grey-100);
|
||||
--Tag-Font-family: var(--Font-family-Title);
|
||||
--Tag-Font-weight: var(--Font-weight-Regular-bold);
|
||||
--Tag-Size: var(--Impl-Text-size-5xs);
|
||||
--Text-Accent-Primary: var(--Scandic-Red-Default);
|
||||
--Text-Accent-Secondary: var(--Scandic-Peach-80);
|
||||
--Text-Brand-OnAccent-Accent: var(--Scandic-Peach-80);
|
||||
--Text-Brand-OnAccent-Default: var(--Scandic-Grey-100);
|
||||
--Text-Brand-OnAccent-Heading: var(--Scandic-Red-100);
|
||||
--Text-Brand-OnPrimary-1-Accent: var(--Scandic-Red-Default);
|
||||
--Text-Brand-OnPrimary-1-Default: var(--Scandic-Grey-100);
|
||||
--Text-Brand-OnPrimary-1-Heading: var(--Scandic-Red-100);
|
||||
--Text-Brand-OnPrimary-2-Accent: var(--Scandic-Peach-10);
|
||||
--Text-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-2-Heading: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Accent: var(--Scandic-Peach-50);
|
||||
--Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
|
||||
--Text-Brand-OnPrimary-3-Heading: var(--Scandic-Peach-10);
|
||||
--Text-Default: var(--Scandic-Grey-100);
|
||||
--Text-Heading: var(--Scandic-Red-100);
|
||||
--Text-Interactive-Default: var(--Scandic-Peach-100);
|
||||
--Text-Interactive-Disabled: var(--Scandic-Grey-40);
|
||||
--Text-Interactive-Error: var(--Scandic-Red-70);
|
||||
--Text-Interactive-Focus: var(--Scandic-Grey-100);
|
||||
--Text-Interactive-Hover-Secondary: var(--Scandic-Peach-100);
|
||||
--Text-Interactive-Placeholder: var(--Scandic-Grey-60);
|
||||
--Text-Interactive-Secondary: var(--Scandic-Peach-80);
|
||||
--Text-Inverted: var(--Neutral-Opacity-White-100);
|
||||
--Text-Secondary: var(--Scandic-Grey-80);
|
||||
--Text-Tertiary: var(--Scandic-Grey-60);
|
||||
--Title-Decorative-lg-Font-family: var(--Font-family-Decorative);
|
||||
--Title-Decorative-lg-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Decorative-lg-Size: var(--Impl-Text-size-xl);
|
||||
--Title-Decorative-md-Font-family: var(--Font-family-Decorative);
|
||||
--Title-Decorative-md-Font-weight: var(--Font-weight-Regular);
|
||||
--Title-Decorative-md-Size: var(--Impl-Text-size-sm);
|
||||
--Title-Overline-sm-Font-family: var(--Font-family-Title);
|
||||
--Title-Overline-sm-Font-weight: var(--Font-weight-Regular-bold);
|
||||
--Title-Overline-sm-Size: var(--Impl-Text-size-4xs);
|
||||
--Title-Subtitle-lg-Font-family: var(--Font-family-Body);
|
||||
--Title-Subtitle-lg-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-lg-Size: var(--Impl-Text-size-sm);
|
||||
--Title-Subtitle-md-Font-family: var(--Font-family-Body);
|
||||
--Title-Subtitle-md-Font-weight: var(--Font-weight-Medium);
|
||||
--Title-Subtitle-md-Size: var(--Impl-Text-size-xs);
|
||||
--Title-lg-Font-family: var(--Font-family-Title);
|
||||
--Title-lg-Font-weight: var(--Font-weight-Black);
|
||||
--Title-lg-Size: var(--Impl-Text-size-4xl);
|
||||
--Title-md-Font-family: var(--Font-family-Title);
|
||||
--Title-md-Font-weight: var(--Font-weight-Black);
|
||||
--Title-md-LowCase-Font-family: var(--Font-family-Title);
|
||||
--Title-md-LowCase-Font-weight: var(--Font-weight-Regular-bold);
|
||||
--Title-md-LowCase-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-md-Size: var(--Impl-Text-size-2xl);
|
||||
--Title-sm-Font-family: var(--Font-family-Title);
|
||||
--Title-sm-Font-weight: var(--Font-weight-Black);
|
||||
--Title-sm-LowCase-Font-family: var(--Font-family-Title);
|
||||
--Title-sm-LowCase-Font-weight: var(--Font-weight-Regular-bold);
|
||||
--Title-sm-LowCase-Size: var(--Impl-Text-size-lg);
|
||||
--Title-sm-Size: var(--Impl-Text-size-lg);
|
||||
--Title-xs-Font-family: var(--Font-family-Title);
|
||||
--Title-xs-Font-weight: var(--Font-weight-Black);
|
||||
--Title-xs-Size: var(--Impl-Text-size-sm);
|
||||
}
|
||||
333
packages/design-system/lib/styles/scandic.js
Normal file
333
packages/design-system/lib/styles/scandic.js
Normal file
@@ -0,0 +1,333 @@
|
||||
/* This file is generated, do not edit manually! */
|
||||
export const theme = {
|
||||
'Scandic/Grey/00': '#F9F6F4',
|
||||
'Scandic/Grey/10': '#EBE8E6',
|
||||
'Scandic/Grey/20': '#D6D2D0',
|
||||
'Scandic/Grey/30': '#C2BDBA',
|
||||
'Scandic/Grey/40': '#A8A4A2',
|
||||
'Scandic/Grey/50': '#8C8987',
|
||||
'Scandic/Grey/60': '#787472',
|
||||
'Scandic/Grey/70': '#635F5D',
|
||||
'Scandic/Grey/80': '#57514E',
|
||||
'Scandic/Grey/90': '#403937',
|
||||
'Scandic/Grey/100': '#26201E',
|
||||
'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/Default': '#CD0921',
|
||||
'Scandic/Red/70': '#AD0015',
|
||||
'Scandic/Red/80': '#8D0011',
|
||||
'Scandic/Red/90': '#6D000D',
|
||||
'Scandic/Red/100': '#4D001B',
|
||||
'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/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/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',
|
||||
'Title/lg/Letter spacing': 0.12,
|
||||
'Title/lg/Font fallback': 'sans-serif',
|
||||
'Title/lg/Text-Transform': 'uppercase',
|
||||
'Title/md/Letter spacing': 0.09,
|
||||
'Title/md/Font fallback': 'sans-serif',
|
||||
'Title/sm/Letter spacing': 0.07,
|
||||
'Title/sm/Font fallback': 'sans-serif',
|
||||
'Title/sm/Text-Transform': 'uppercase',
|
||||
'Title/Decorative/lg/Letter spacing': 0.64,
|
||||
'Title/Decorative/lg/Font fallback': 'sans-serif',
|
||||
'Title/Decorative/lg/Text-Transform': 'unset',
|
||||
'Title/Decorative/md/Letter spacing': 0.48,
|
||||
'Title/Decorative/md/Font fallback': 'sans-serif',
|
||||
'Title/Decorative/md/Text-Transform': 'unset',
|
||||
'Title/Subtitle/lg/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/lg/Letter spacing': 0.24,
|
||||
'Title/Subtitle/md/Font fallback': 'sans-serif',
|
||||
'Title/Subtitle/md/Letter spacing': 0.2,
|
||||
'Title/Overline/sm/Letter spacing': 0.64,
|
||||
'Title/Overline/sm/Font fallback': 'sans-serif',
|
||||
'Title/Overline/sm/Text-Transform': 'uppercase',
|
||||
'Title/sm/LowCase/Letter spacing': 0.07,
|
||||
'Title/sm/LowCase/Font fallback': 'sans-serif',
|
||||
'Title/sm/LowCase/Text-Transform': 'unset',
|
||||
'Title/xs/Letter spacing': 0.06,
|
||||
'Title/xs/Font fallback': 'sans-serif',
|
||||
'Title/xs/Text-Transform': 'uppercase',
|
||||
'Title/md/Text-Transform': 'uppercase',
|
||||
'Title/md/LowCase/Letter spacing': 0.09,
|
||||
'Title/md/LowCase/Font fallback': 'sans-serif',
|
||||
'Title/md/LowCase/Text-Transform': 'unset',
|
||||
'Tag/Letter spacing': 0.2,
|
||||
'Tag/Font fallback': 'sans-serif',
|
||||
'Tag/Text-Transform': 'uppercase',
|
||||
'Link/md/Font fallback': 'sans-serif',
|
||||
'Link/md/Letter spacing': 0.19,
|
||||
'Link/sm/Font fallback': 'sans-serif',
|
||||
'Link/sm/Letter spacing': 0.2,
|
||||
'Body/Lead text/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Font fallback': 'sans-serif',
|
||||
'Body/Paragraph/Letter spacing': 0.19,
|
||||
'Body/Supporting text/Font fallback': 'sans-serif',
|
||||
'Body/Supporting text/Letter spacing': 0.2,
|
||||
'Body/Lead text/Letter spacing': 0.2,
|
||||
'Label/Font fallback': 'sans-serif',
|
||||
'Label/Letter spacing': 0.17,
|
||||
'Body/Underline/md/Font fallback': 'sans-serif',
|
||||
'Body/Underline/md/Letter spacing': 0.19,
|
||||
'Body/Underline/sm/Font fallback': 'sans-serif',
|
||||
'Body/Underline/sm/Letter spacing': 0.2,
|
||||
'Utilities/Gradients/10': '#F2ECE61A',
|
||||
'Title/lg/Font weight': 900,
|
||||
'Title/lg/Font family': 'Brandon Text',
|
||||
'Title/md/Font weight': 900,
|
||||
'Title/md/Font family': 'Brandon Text',
|
||||
'Title/sm/Font weight': 900,
|
||||
'Title/sm/Font family': 'Brandon Text',
|
||||
'Title/sm/LowCase/Font weight': 450,
|
||||
'Title/sm/LowCase/Font family': 'Brandon Text',
|
||||
'Title/Decorative/lg/Font weight': 400,
|
||||
'Title/Decorative/lg/Font family': 'Biro Script Plus',
|
||||
'Title/Decorative/md/Font weight': 400,
|
||||
'Title/Decorative/md/Font family': 'Biro Script Plus',
|
||||
'Title/Subtitle/lg/Font weight': 500,
|
||||
'Title/Subtitle/lg/Font family': 'Fira sans',
|
||||
'Title/Subtitle/md/Font weight': 500,
|
||||
'Title/Subtitle/md/Font family': 'Fira sans',
|
||||
'Title/Overline/sm/Font weight': 450,
|
||||
'Title/Overline/sm/Font family': 'Brandon Text',
|
||||
'Title/xs/Font weight': 900,
|
||||
'Title/xs/Font family': 'Brandon Text',
|
||||
'Title/md/LowCase/Font weight': 450,
|
||||
'Title/md/LowCase/Font family': 'Brandon Text',
|
||||
'Tag/Font weight': 450,
|
||||
'Tag/Font family': 'Brandon Text',
|
||||
'Link/md/Font weight': 500,
|
||||
'Link/md/Font family': 'Fira sans',
|
||||
'Link/sm/Font weight': 500,
|
||||
'Link/sm/Font family': 'Fira sans',
|
||||
'Body/Lead text/Font weight': 400,
|
||||
'Body/Lead text/Font family': 'Fira sans',
|
||||
'Body/Paragraph/Font weight': 400,
|
||||
'Body/Paragraph/Font weight 2': 500,
|
||||
'Body/Paragraph/Font family': 'Fira sans',
|
||||
'Body/Supporting text/Font weight': 400,
|
||||
'Body/Supporting text/Font weight 2': 500,
|
||||
'Body/Supporting text/Font family': 'Fira sans',
|
||||
'Label/Font weight': 400,
|
||||
'Label/Font weight 2': 500,
|
||||
'Label/Font family': 'Fira sans',
|
||||
'Body/Underline/md/Font weight': 400,
|
||||
'Body/Underline/md/Font family': 'Fira sans',
|
||||
'Body/Underline/sm/Font weight': 400,
|
||||
'Body/Underline/sm/Font family': 'Fira sans',
|
||||
'Text/Heading': '#4D001B',
|
||||
'Text/Default': '#26201E',
|
||||
'Text/Secondary': '#57514E',
|
||||
'Text/Tertiary': '#787472',
|
||||
'Text/Accent Primary': '#CD0921',
|
||||
'Text/Accent Secondary': '#8F4350',
|
||||
'Text/Inverted': '#FFFFFF',
|
||||
'Text/Interactive/Default': '#4D0F25',
|
||||
'Text/Interactive/Secondary': '#8F4350',
|
||||
'Text/Interactive/Hover Secondary': '#4D0F25',
|
||||
'Text/Interactive/Disabled': '#A8A4A2',
|
||||
'Text/Interactive/Focus': '#26201E',
|
||||
'Text/Interactive/Error': '#AD0015',
|
||||
'Text/Interactive/Placeholder': '#787472',
|
||||
'Text/Brand/OnAccent/Heading': '#4D001B',
|
||||
'Text/Brand/OnAccent/Default': '#26201E',
|
||||
'Text/Brand/OnAccent/Accent': '#8F4350',
|
||||
'Text/Brand/OnPrimary 1/Heading': '#4D001B',
|
||||
'Text/Brand/OnPrimary 1/Default': '#26201E',
|
||||
'Text/Brand/OnPrimary 1/Accent': '#CD0921',
|
||||
'Text/Brand/OnPrimary 2/Heading': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 2/Accent': '#F7E1D5',
|
||||
'Text/Brand/OnPrimary 3/Heading': '#F7E1D5',
|
||||
'Text/Brand/OnPrimary 3/Default': '#FFFFFF',
|
||||
'Text/Brand/OnPrimary 3/Accent': '#DE9490',
|
||||
'Background/Primary': '#FAF6F2',
|
||||
'Background/Secondary': '#FFFFFF',
|
||||
'Surface/Primary/Default': '#FFFFFF',
|
||||
'Surface/Primary/Hover': '#f2f2f2',
|
||||
'Surface/Primary/Hover Light': '#e6e5e5',
|
||||
'Surface/Primary/Hover Accent': '#F7E1D5',
|
||||
'Surface/Primary/OnSurface/Default': '#FAF6F2',
|
||||
'Surface/Primary/Disabled': '#EBE8E6',
|
||||
'Surface/Secondary/Default': '#F2ECE6',
|
||||
'Surface/Secondary/Secondary': '#E3D9D1',
|
||||
'Surface/Secondary/Hover': '#dad4cf',
|
||||
'Surface/Brand/Accent/Default': '#F0C1B6',
|
||||
'Surface/Brand/Primary 1/Default': '#F7E1D5',
|
||||
'Surface/Brand/Primary 1/OnSurface/Default': '#4D001B',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent': '#CD0921',
|
||||
'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#8F4350',
|
||||
'Surface/Brand/Primary 2/Default': '#CD0921',
|
||||
'Surface/Brand/Primary 2/OnSurface/Default': '#4D001B',
|
||||
'Surface/Brand/Primary 2/OnSurface/Accent': '#F7E1D5',
|
||||
'Surface/Brand/Primary 3/Default': '#4D001B',
|
||||
'Surface/Brand/Primary 3/OnSurface/Default': '#F7E1D5',
|
||||
'Surface/Brand/Primary 3/OnSurface/Accent': '#CD0921',
|
||||
'Surface/UI Fill/Default': '#FFFFFF',
|
||||
'Surface/UI Fill/Intense': '#26201E',
|
||||
'Surface/UI Fill/Active': '#4D0F25',
|
||||
'Surface/UI Fill/Active Hover': '#ffffff',
|
||||
'Surface/UI Fill/Disabled': '#EBE8E6',
|
||||
'Surface/Accent/1': '#8D0011',
|
||||
'Surface/Accent/2': '#3F6DBD',
|
||||
'Surface/Accent/3': '#256931',
|
||||
'Surface/Accent/4': '#E59515',
|
||||
'Surface/Accent/5': '#18347F',
|
||||
'Surface/Feedback/Information Accent': '#284EA0',
|
||||
'Surface/Feedback/Information': '#E8F6FF',
|
||||
'Surface/Feedback/Succes Accent': '#348337',
|
||||
'Surface/Feedback/Succes': '#F3FCE8',
|
||||
'Surface/Feedback/Warning Accent': '#D17308',
|
||||
'Surface/Feedback/Warning Light': '#FFF8E3',
|
||||
'Surface/Feedback/Error Accent': '#AD0015',
|
||||
'Surface/Feedback/Error': '#FFEBEB',
|
||||
'Surface/Feedback/Neutral Accent': '#787472',
|
||||
'Surface/Feedback/Neutral': '#EBE8E6',
|
||||
'Border/Default': '#E3D9D1',
|
||||
'Border/Intense': '#B8A79A',
|
||||
'Border/Inverted': '#FFFFFF',
|
||||
'Icon/Default': '#57514E',
|
||||
'Icon/Intense': '#26201E',
|
||||
'Icon/Accent': '#B05B65',
|
||||
'Icon/Interactive/Default': '#4D001B',
|
||||
'Icon/Interactive/Secondary': '#8F4350',
|
||||
'Icon/Interactive/Disabled': '#A8A4A2',
|
||||
'Icon/Interactive/Placeholder': '#787472',
|
||||
'Icon/Feedback/Information': '#284EA0',
|
||||
'Icon/Feedback/Success': '#348337',
|
||||
'Icon/Feedback/Warning': '#D17308',
|
||||
'Icon/Feedback/Error': '#AD0015',
|
||||
'Icon/Feedback/Neutral': '#57514E',
|
||||
'Icon/Inverted': '#FFFFFF',
|
||||
'Overlay/10': '#1F1C1B1A',
|
||||
'Overlay/20': '#1F1C1B33',
|
||||
'Overlay/40': '#1F1C1B66',
|
||||
'Overlay/60': '#1F1C1B99',
|
||||
'Overlay/80': '#1F1C1BCC',
|
||||
'Overlay/90': '#1F1C1BE6',
|
||||
'Component/Button/Brand/Primary/Default': '#CD0921',
|
||||
'Component/Button/Brand/Primary/Hover': '#ba1721',
|
||||
'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Primary/On fill/Disabled': '#A8A4A2',
|
||||
'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Hover Inverted': '#4D001B',
|
||||
'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Secondary/On fill/Default': '#4D001B',
|
||||
'Component/Button/Brand/Secondary/On fill/Hover': '#8F4350',
|
||||
'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/On fill/Disabled': '#A8A4A2',
|
||||
'Component/Button/Brand/Secondary/Border/Default': '#4D001B',
|
||||
'Component/Button/Brand/Secondary/Border/Hover': '#8F4350',
|
||||
'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
|
||||
'Component/Button/Brand/Secondary/Border/Hover inverted': '#eee4e5',
|
||||
'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/Default': '#4D001B',
|
||||
'Component/Button/Brand/Tertiary/Hover': '#601e2d',
|
||||
'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
|
||||
'Component/Button/Brand/Tertiary/On fill/Disabled': '#A8A4A2',
|
||||
'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Default': '#FFFFFF',
|
||||
'Component/Button/Inverted/Faded': '#FFFFFFE6',
|
||||
'Component/Button/Inverted/Hover': '#f2f2f2',
|
||||
'Component/Button/Inverted/Hover Inverted': '#4D001B',
|
||||
'Component/Button/Inverted/Disabled': '#1F1C1B1A',
|
||||
'Component/Button/Inverted/On fill/Default': '#4D001B',
|
||||
'Component/Button/Inverted/On fill/Hover': '#601e2d',
|
||||
'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
|
||||
'Component/Button/Inverted/On fill/Disabled': '#A8A4A2',
|
||||
'Component/Button/Inverted/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
|
||||
'Border/Interactive/Default': '#9C8A7E',
|
||||
'Border/Divider/Default': '#E3D9D1',
|
||||
'Border/Divider/Subtle': '#F2ECE6',
|
||||
'Border/Divider/Accent': '#F0C1B6',
|
||||
'Border/Divider/Brand/OnPrimary 1/Default': '#E9ABA3',
|
||||
'Border/Divider/Brand/OnPrimary 1/Secondary': '#642636',
|
||||
'Border/Divider/Brand/OnPrimary 2/Default': '#AD0015',
|
||||
'Border/Divider/Brand/OnPrimary 3/Default': '#8F4350',
|
||||
'Border/Interactive/Selected': '#6B584D',
|
||||
'Border/Interactive/Focus': '#26201E',
|
||||
'Border/Interactive/Disabled': '#A8A4A2',
|
||||
'Border/Interactive/Error': '#AD0015',
|
||||
'Border/Interactive/KeyboardFocus': '#5B8FD4',
|
||||
'Component/Button/Muted/Default': '#FFFFFF00',
|
||||
'Component/Button/Muted/Hover': '#FFFFFF00',
|
||||
'Component/Button/Muted/Disabled': '#FFFFFF1A',
|
||||
'Component/Button/Muted/Hover inverted': '#1F1C1B0D',
|
||||
'Component/Button/Muted/Disabled inverted': '#1F1C1B1A',
|
||||
'Component/Button/Muted/On fill/Default': '#26201E',
|
||||
'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
|
||||
'Component/Button/Muted/On fill/Hover Inverted': '#6D000D',
|
||||
'Component/Button/Muted/On fill/Disabled': '#A8A4A2',
|
||||
'Component/Button/Muted/Border/Default': '#FFFFFF00',
|
||||
'Component/Button/Muted/Border/Hover': '#FFFFFF00',
|
||||
'Component/Button/Muted/Border/Disable': '#FFFFFF00',
|
||||
}
|
||||
@@ -1,318 +0,0 @@
|
||||
/* 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);
|
||||
}
|
||||
@@ -1,217 +0,0 @@
|
||||
/* 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';
|
||||
}
|
||||
1
packages/design-system/lib/tokens.ts
Normal file
1
packages/design-system/lib/tokens.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './tokens/index'
|
||||
152
packages/design-system/lib/tokens/Colors.tsx
Normal file
152
packages/design-system/lib/tokens/Colors.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
import copy from 'copy-to-clipboard'
|
||||
|
||||
import { kebabify } from '../../generate/utils'
|
||||
|
||||
export type ThemeValue = Record<'resolved' | 'alias', string | number>
|
||||
|
||||
export type Theme = Record<string, ThemeValue>
|
||||
|
||||
export type ColorsProps = {
|
||||
theme: Theme
|
||||
}
|
||||
|
||||
import styles from './colors.module.css'
|
||||
|
||||
function getContrastColor(bgColor: string) {
|
||||
const r = parseInt(bgColor.substring(1, 3), 16)
|
||||
const g = parseInt(bgColor.substring(3, 5), 16)
|
||||
const b = parseInt(bgColor.substring(5, 7), 16)
|
||||
let a = parseInt(bgColor.substring(7, 9), 16)
|
||||
|
||||
if (isNaN(a)) {
|
||||
a = 255
|
||||
}
|
||||
|
||||
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
|
||||
if (luminance > 0.5) {
|
||||
return '#000'
|
||||
} else {
|
||||
if (a < 255 / 2) {
|
||||
return '#000'
|
||||
}
|
||||
return '#fff'
|
||||
}
|
||||
}
|
||||
|
||||
export function Colors({ theme }: ColorsProps) {
|
||||
const grouping: Record<string, Theme> = {}
|
||||
|
||||
for (const [k, v] of Object.entries(theme)) {
|
||||
if (typeof v.resolved === 'string' && v.resolved.startsWith('#')) {
|
||||
const key = k.replace(/\/[^/]+$/, '')
|
||||
if (!grouping[key]) {
|
||||
grouping[key] = {}
|
||||
}
|
||||
|
||||
grouping[key][k] = v
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.jumpTo}>
|
||||
<label>
|
||||
Jump to:
|
||||
<select
|
||||
onChange={(e) => {
|
||||
const el = document.getElementById(e.target.value)
|
||||
el?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
})
|
||||
}}
|
||||
>
|
||||
<option>- Select a grouping -</option>
|
||||
{Object.keys(grouping)
|
||||
.sort((a, b) => a.localeCompare(b))
|
||||
.map((title) => {
|
||||
return (
|
||||
<option key={title} value={kebabify(title)}>
|
||||
{title}
|
||||
</option>
|
||||
)
|
||||
})}
|
||||
</select>
|
||||
</label>
|
||||
<span className={styles.tip}>
|
||||
Click on any of the values to copy to clipboard!
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.groups}>
|
||||
{Object.entries(grouping)
|
||||
.sort((a, b) => {
|
||||
return a[0].localeCompare(b[0])
|
||||
})
|
||||
.map(([title, values]) => {
|
||||
return (
|
||||
<div className={styles.group} key={title}>
|
||||
<h2 id={kebabify(title)} className={styles.title}>
|
||||
{title}
|
||||
</h2>
|
||||
<div className={styles.values}>
|
||||
{Object.entries(values).map(([k, v]) => {
|
||||
return (
|
||||
<div className={styles.value} key={k}>
|
||||
<div className={styles.colorContainer}>
|
||||
<div
|
||||
className={styles.color}
|
||||
style={{
|
||||
color: getContrastColor(v.resolved.toString()),
|
||||
backgroundColor: v.resolved.toString(),
|
||||
}}
|
||||
onClick={() => {
|
||||
copy(`var(--${kebabify(k)})`)
|
||||
}}
|
||||
>
|
||||
var(--{kebabify(k)})
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={styles.tokenName}
|
||||
onClick={() => {
|
||||
copy(k)
|
||||
}}
|
||||
>
|
||||
Figma: {k}
|
||||
</div>
|
||||
<div
|
||||
className={styles.tokenName}
|
||||
onClick={() => {
|
||||
copy(kebabify(k))
|
||||
}}
|
||||
>
|
||||
CSS: {kebabify(k)}
|
||||
</div>
|
||||
{v.alias ? (
|
||||
<div
|
||||
className={styles.tokenAlias}
|
||||
onClick={() => {
|
||||
copy(v.alias.toString())
|
||||
}}
|
||||
>
|
||||
Alias: {v.alias}
|
||||
</div>
|
||||
) : null}
|
||||
<div
|
||||
className={styles.tokenValue}
|
||||
onClick={() => {
|
||||
copy(v.resolved.toString())
|
||||
}}
|
||||
>
|
||||
Value: {v.resolved}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
11
packages/design-system/lib/tokens/base.mdx
Normal file
11
packages/design-system/lib/tokens/base.mdx
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Meta } from '@storybook/blocks'
|
||||
|
||||
import { Colors } from './Colors'
|
||||
|
||||
import { base } from '.'
|
||||
|
||||
<Meta title="Global/Colors/Base" />
|
||||
|
||||
# Colors: Base
|
||||
|
||||
<Colors theme={base} />
|
||||
130
packages/design-system/lib/tokens/colors.module.css
Normal file
130
packages/design-system/lib/tokens/colors.module.css
Normal file
@@ -0,0 +1,130 @@
|
||||
.container {
|
||||
display: grid;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
.jumpTo {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
padding: 0.5em;
|
||||
z-index: 100;
|
||||
border: solid 1px #ccc;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.jumpTo select {
|
||||
margin-left: 1em;
|
||||
padding: 0.3em;
|
||||
border-radius: 3px;
|
||||
border: solid 1px #ccc;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-size: 12px !important;
|
||||
background: #fffcdd;
|
||||
padding: 0.5em;
|
||||
border-radius: 4px;
|
||||
border: solid 1px #e8db45;
|
||||
}
|
||||
|
||||
.groups {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
padding-top: 60px !important; /* jumpTo element height:ish */
|
||||
}
|
||||
|
||||
.values {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.value {
|
||||
box-sizing: border-box;
|
||||
width: 50%;
|
||||
min-width: 500px;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.colorContainer {
|
||||
--opacity: 0.1;
|
||||
background:
|
||||
linear-gradient(
|
||||
45deg,
|
||||
rgba(0, 0, 0, var(--opacity)) 25%,
|
||||
transparent 25%,
|
||||
transparent 75%,
|
||||
rgba(0, 0, 0, var(--opacity)) 75%,
|
||||
rgba(0, 0, 0, var(--opacity)) 0
|
||||
),
|
||||
linear-gradient(
|
||||
45deg,
|
||||
rgba(0, 0, 0, var(--opacity)) 25%,
|
||||
transparent 25%,
|
||||
transparent 75%,
|
||||
rgba(0, 0, 0, var(--opacity)) 75%,
|
||||
rgba(0, 0, 0, var(--opacity)) 0
|
||||
),
|
||||
white;
|
||||
background-position:
|
||||
0px 0,
|
||||
5px 5px;
|
||||
background-size:
|
||||
10px 10px,
|
||||
10px 10px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
will-change: transform;
|
||||
transition: transform 0.2s ease-out;
|
||||
margin-bottom: 1em;
|
||||
cursor: pointer;
|
||||
border: solid 1px #d9d9d9;
|
||||
}
|
||||
|
||||
.color {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 4em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.colorContainer:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.colorContainer:active {
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.tokenName,
|
||||
.tokenValue,
|
||||
.tokenAlias {
|
||||
cursor: pointer;
|
||||
padding: 0.1em 0.5em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tokenName:hover,
|
||||
.tokenValue:hover,
|
||||
.tokenAlias:hover {
|
||||
transform-origin: left;
|
||||
font-weight: bold;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.tokenName:active,
|
||||
.tokenValue:active,
|
||||
.tokenAlias:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
11
packages/design-system/lib/tokens/downtownCamper.mdx
Normal file
11
packages/design-system/lib/tokens/downtownCamper.mdx
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Meta } from '@storybook/blocks'
|
||||
|
||||
import { Colors } from './Colors'
|
||||
|
||||
import { downtownCamper } from '.'
|
||||
|
||||
<Meta title="Global/Colors/Downtown Camper" />
|
||||
|
||||
# Colors: Downtown Camper
|
||||
|
||||
<Colors theme={downtownCamper} />
|
||||
11
packages/design-system/lib/tokens/grandHotel.mdx
Normal file
11
packages/design-system/lib/tokens/grandHotel.mdx
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Meta } from '@storybook/blocks'
|
||||
|
||||
import { Colors } from './Colors'
|
||||
|
||||
import { grandHotel } from '.'
|
||||
|
||||
<Meta title="Global/Colors/Grand Hotel" />
|
||||
|
||||
# Colors: Grand Hotel
|
||||
|
||||
<Colors theme={grandHotel} />
|
||||
11
packages/design-system/lib/tokens/haymarket.mdx
Normal file
11
packages/design-system/lib/tokens/haymarket.mdx
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Meta } from '@storybook/blocks'
|
||||
|
||||
import { Colors } from './Colors'
|
||||
|
||||
import { haymarket } from '.'
|
||||
|
||||
<Meta title="Global/Colors/Haymarket" />
|
||||
|
||||
# Colors: Haymarket
|
||||
|
||||
<Colors theme={haymarket} />
|
||||
11
packages/design-system/lib/tokens/hotelNorge.mdx
Normal file
11
packages/design-system/lib/tokens/hotelNorge.mdx
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Meta } from '@storybook/blocks'
|
||||
|
||||
import { Colors } from './Colors'
|
||||
|
||||
import { hotelNorge } from '.'
|
||||
|
||||
<Meta title="Global/Colors/Hotel Norge" />
|
||||
|
||||
# Colors: Hotel Norge
|
||||
|
||||
<Colors theme={hotelNorge} />
|
||||
5045
packages/design-system/lib/tokens/index.ts
Normal file
5045
packages/design-system/lib/tokens/index.ts
Normal file
File diff suppressed because it is too large
Load Diff
11
packages/design-system/lib/tokens/marski.mdx
Normal file
11
packages/design-system/lib/tokens/marski.mdx
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Meta } from '@storybook/blocks'
|
||||
|
||||
import { Colors } from './Colors'
|
||||
|
||||
import { marski } from '.'
|
||||
|
||||
<Meta title="Global/Colors/Marski" />
|
||||
|
||||
# Colors: Marski
|
||||
|
||||
<Colors theme={marski} />
|
||||
11
packages/design-system/lib/tokens/scandic.mdx
Normal file
11
packages/design-system/lib/tokens/scandic.mdx
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Meta } from '@storybook/blocks'
|
||||
|
||||
import { Colors } from './Colors'
|
||||
|
||||
import { scandic } from '.'
|
||||
|
||||
<Meta title="Global/Colors/Scandic" />
|
||||
|
||||
# Colors: Scandic
|
||||
|
||||
<Colors theme={scandic} />
|
||||
11
packages/design-system/lib/tokens/scandicGo.mdx
Normal file
11
packages/design-system/lib/tokens/scandicGo.mdx
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Meta } from '@storybook/blocks'
|
||||
|
||||
import { Colors } from './Colors'
|
||||
|
||||
import { scandicGo } from '.'
|
||||
|
||||
<Meta title="Global/Colors/Scandic Go" />
|
||||
|
||||
# Colors: Scandic Go
|
||||
|
||||
<Colors theme={scandicGo} />
|
||||
@@ -1,32 +0,0 @@
|
||||
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>
|
||||
@@ -1,61 +0,0 @@
|
||||
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')
|
||||
})
|
||||
})
|
||||
@@ -1,19 +0,0 @@
|
||||
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)
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
2
packages/design-system/lib/vite-env.d.ts
vendored
2
packages/design-system/lib/vite-env.d.ts
vendored
@@ -1,2 +0,0 @@
|
||||
/// <reference types="vite/client" />
|
||||
/// <reference types="vitest" />
|
||||
Reference in New Issue
Block a user