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

chore: generated design system css variables from updated json file

Browse Source 
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-10-30 12:27:16 +00:00
parent eea21e67d9
commit 6a342aaa9e
45 changed files with 8264 additions and 1437 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/partner-sas/globals.css
View File

@@ -94,7 +94,7 @@ body.partner-sas {
--Border-Divider-Default: var(--SAS-Gray-90);
--Border-Divider-Subtle: var(--SAS-Gray-90);
--Border-Intense: var(--SAS-Gray-40);
--Border-Strong: var(--SAS-Gray-40);
--Border-Interactive-Selected: var(--SAS-Gray-40);
--Border-Interactive-Default: var(--SAS-Gray-40);
@@ -130,7 +130,7 @@ body.partner-sas {
--Scandic-Brand-Warm-White: var(--Background-Primary);
--Text-Accent-Primary: var(--SAS-20);
--Text-Accent-Secondary: var(--SAS-Gray-40);
--Text-Brand-OnAccent-Accent-Secondary: var(--SAS-Gray-40);
--Text-Heading: var(--SAS-Gray-20);
--Text-Interactive-Default: var(--SAS-20);
--Text-Interactive-Hover: var(--SAS-40);

4
apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/transferPoints.module.css
View File

@@ -64,7 +64,7 @@
.noPointsWarning {
align-self: end;
color: var(--Surface-Feedback-Information-Accent);
color: var(--Surface-Feedback-Information);
}
.balanceLabel {
@@ -151,7 +151,7 @@
}
&[data-focus-visible] {
outline: 2px solid var(--Surface-Feedback-Neutral);
outline: 2px solid var(--Surface-Feedback-Neutral-light);
}
&[data-dragging] .sliderOutput {

2
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css
View File

@@ -13,7 +13,7 @@
}
.guests {
color: var(--Text-Accent-Secondary);
color: var(--Text-Brand-OnAccent-Accent-Secondary);
}
.imageContainer {

4
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/selectQuantityStep.module.css
View File

@@ -55,7 +55,7 @@
flex: 1 0 0;
border-radius: var(--Corner-radius-md);
border: 1px solid var(--Base-Border-Subtle);
background: var(--Surface-Feedback-Information);
background: var(--Surface-Feedback-Information-light);
align-items: center;
gap: var(--Spacing-x1);
@@ -63,7 +63,7 @@
}
.free {
background: var(--Surface-Feedback-Succes);
background: var(--Surface-Feedback-Succes-light);
}
.breakfastPriceBox dt {

2
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/CustomerSupportModal/customerSupport.module.css
View File

@@ -9,7 +9,7 @@
.link {
align-items: center;
background: var(--Surface-Feedback-Information);
background: var(--Surface-Feedback-Information-light);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: var(--Corner-radius-md);
color: var(--Text-Interactive-Default);

2
packages/booking-flow/lib/components/BookingConfirmation/Receipt/receipt.module.css
View File

@@ -12,7 +12,7 @@
align-items: center;
gap: var(--Space-x1);
justify-content: flex-start;
color: var(--Text-Accent-Secondary);
color: var(--Text-Brand-OnAccent-Accent-Secondary);
}
@media screen and (min-width: 1367px) {

2
packages/booking-flow/lib/components/BookingConfirmation/Rooms/Room/room.module.css
View File

@@ -21,7 +21,7 @@
}
.guaranteeText {
color: var(--Text-Feedback-Succes-Accent);
color: var(--Text-Feedback-Succes);
}
.booking {

2
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/search.module.css
View File

@@ -10,7 +10,7 @@
&.rounded {
background-color: var(--Base-Surface-Primary-light-Normal);
padding: var(--Space-x15) var(--Space-x15) var(--Space-x15) var(--Space-x3);
border: 1px solid var(--Border-Intense);
border: 1px solid var(--Border-Strong);
border-radius: var(--Corner-radius-rounded);
height: auto;
}

2
packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/Content/summaryContent.module.css
View File

@@ -25,7 +25,7 @@
align-items: center;
gap: var(--Space-x1);
justify-content: flex-start;
color: var(--Text-Accent-Secondary);
color: var(--Text-Brand-OnAccent-Accent-Secondary);
}
.entry {

2
packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/roomPackageFilter.module.css
View File

@@ -75,7 +75,7 @@
padding: var(--Space-x1);
gap: var(--Space-x05);
border-radius: var(--Corner-radius-sm);
background-color: var(--Surface-Secondary-Default-dark);
background-color: var(--Surface-Secondary-Subtle);
color: var(--Text-Interactive-Default);
}

5
packages/design-system/.storybook/preview.tsx
View File

@@ -1,12 +1,12 @@
import { withThemeByClassName } from '@storybook/addon-themes'
import { IntlProvider } from 'react-intl'
import type { Preview, ReactRenderer } from '@storybook/nextjs-vite'
import { IntlProvider } from 'react-intl'
import { reactIntl } from './reactIntl'
import '../lib/design-system-new-deprecated.css'
import '../lib/fonts.css'
import '../lib/normalize.css'
import '../lib/style.css'
import '../lib/design-system-new-deprecated.css'
export const themes = {
themes: {
@@ -17,6 +17,7 @@ export const themes = {
Haymarket: 'haymarket',
'Hotel Norge': 'hotel-norge',
Marski: 'marski',
'The Dock': 'the-dock',
},
defaultTheme: 'Scandic',
}

2
packages/design-system/generate/utils.ts
View File

@@ -1,5 +1,5 @@
export function kebabify(str: string) {
return str.replace(/\/|\s/g, '-').replace(/\(|\)/g, '')
return str.replace(/\/|\s/g, '-').replace(/\(|\)|\[|\]/g, '')
}
export function ignoreStyles(mode: { name: string }) {

5156
packages/design-system/generate/variables.json
View File

File diff suppressed because it is too large Load Diff

24
packages/design-system/lib/components/Alert/alert.module.css
View File

@@ -51,16 +51,16 @@
padding: var(--Space-x15);
}
.inline.alarm .iconWrapper {
background-color: var(--Surface-Feedback-Error-Accent);
background-color: var(--Surface-Feedback-Error);
}
.inline.warning .iconWrapper {
background-color: var(--Surface-Feedback-Warning-Accent);
background-color: var(--Surface-Feedback-Warning);
}
.inline.info .iconWrapper {
background-color: var(--Surface-Feedback-Information-Accent);
background-color: var(--Surface-Feedback-Information);
}
.inline.success .iconWrapper {
background-color: var(--Surface-Feedback-Succes-Accent);
background-color: var(--Surface-Feedback-Succes);
}
.inline .icon,
.inline .icon * {
@@ -73,37 +73,37 @@
border-left-style: solid;
}
.banner.alarm {
border-left-color: var(--Surface-Feedback-Error-Accent);
border-left-color: var(--Surface-Feedback-Error);
background-color: var(--Scandic-Red-00);
}
.banner.warning {
border-left-color: var(--Surface-Feedback-Warning-Accent);
border-left-color: var(--Surface-Feedback-Warning);
background-color: var(--Scandic-Yellow-00);
}
.banner.info {
border-left-color: var(--Surface-Feedback-Information-Accent);
border-left-color: var(--Surface-Feedback-Information);
background-color: var(--Scandic-Blue-00);
}
.banner.success {
border-left-color: var(--Surface-Feedback-Succes-Accent);
border-left-color: var(--Surface-Feedback-Succes);
background-color: var(--Scandic-Green-00);
}
.banner.alarm .icon,
.banner.alarm .icon * {
fill: var(--Surface-Feedback-Error-Accent);
fill: var(--Surface-Feedback-Error);
}
.banner.warning .icon,
.banner.warning .icon * {
fill: var(--Surface-Feedback-Warning-Accent);
fill: var(--Surface-Feedback-Warning);
}
.banner.info .icon,
.banner.info .icon * {
fill: var(--Surface-Feedback-Information-Accent);
fill: var(--Surface-Feedback-Information);
}
.banner.success .icon,
.banner.sucess .icon * {
fill: var(--Surface-Feedback-Succes-Accent);
fill: var(--Surface-Feedback-Succes);
}
@media screen and (min-width: 768px) {

4
packages/design-system/lib/components/Badge/badge.module.css
View File

@@ -12,8 +12,8 @@
}
.green {
background-color: var(--Surface-Feedback-Succes);
color: var(--Text-Feedback-Succes-Accent);
background-color: var(--Surface-Feedback-Succes-light);
color: var(--Text-Feedback-Succes);
}
._36 {

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

@@ -19,7 +19,7 @@
}
.Outlined {
border: 1px solid var(--Border-Intense);
border: 1px solid var(--Border-Strong);
}
.Outlined:hover {

4
packages/design-system/lib/components/Form/RadioCard/radioCard.module.css
View File

@@ -8,7 +8,7 @@
'icon subtitleSecondary'
'title subtitle';
border-radius: var(--Corner-radius-md);
border: 1px solid var(--Border-Intense);
border: 1px solid var(--Border-Strong);
background: var(--Surface-Primary-Default);
padding: var(--Space-x2) var(--Space-x3);
gap: var(--Space-x1);
@@ -47,7 +47,7 @@
height: 32px;
border: 2px solid var(--Base-Border-Inverted);
border-radius: var(--Corner-radius-rounded);
background-color: var(--Surface-Feedback-Succes-Accent);
background-color: var(--Surface-Feedback-Succes);
}
.icon {

2
packages/design-system/lib/components/ImageFallback/imageFallback.module.css
View File

@@ -6,5 +6,5 @@
width: 100%;
min-width: 200px;
min-height: 200px;
background-color: var(--Surface-Feedback-Neutral);
background-color: var(--Surface-Feedback-Neutral-light);
}

2
packages/design-system/lib/components/Map/Markers/PoiMarker/poi.module.css
View File

@@ -22,7 +22,7 @@
background-color: var(--Surface-Accent-4);
}
.location {
background-color: var(--Surface-Feedback-Neutral-Accent);
background-color: var(--Surface-Feedback-Neutral);
}
.parking {
background-color: var(--Surface-Accent-5);

2
packages/design-system/lib/components/MessageBanner/messageBanner.module.css
View File

@@ -17,5 +17,5 @@
}
.textError {
color: var(--Text-Feedback-Error-Accent);
color: var(--Text-Feedback-Error);
}

4
packages/design-system/lib/components/RateCard/rate-card.module.css
View File

@@ -24,7 +24,7 @@
justify-content: center;
border: 2px solid var(--Border-Inverted);
border-radius: var(--Corner-radius-rounded);
background-color: var(--Surface-Feedback-Succes-Accent);
background-color: var(--Surface-Feedback-Succes);
color: var(--Icon-Inverted);
}
@@ -175,7 +175,7 @@ label:not(:has(.radio:checked)) .checkIcon {
}
.variant-code .banner {
background-color: var(--Surface-Feedback-Information-Accent);
background-color: var(--Surface-Feedback-Information);
}
.variant-points .banner {

4
packages/design-system/lib/components/Switch/switch.module.css
View File

@@ -10,8 +10,8 @@
.switch {
width: 40px;
height: 24px;
border: 2px solid var(--Surface-Secondary-Default-dark);
background: var(--Surface-Secondary-Default-dark);
border: 2px solid var(--Surface-Secondary-Subtle);
background: var(--Surface-Secondary-Subtle);
border-radius: 24px;
transition: all 200ms;
display: block;

1
packages/design-system/lib/style.css
View File

@@ -7,4 +7,5 @@
@import url(./styles/hotel-norge.css);
@import url(./styles/marski.css);
@import url(./styles/scandic-go.css);
@import url(./styles/the-dock.css);
@import url(./styles/scandic.css);

19
packages/design-system/lib/styles/base.css
View File

@@ -72,6 +72,25 @@
--Neutral-Opacity-White-70: #ffffffb3;
--Neutral-Opacity-White-80: #ffffffcc;
--Neutral-Opacity-White-90: #ffffffe6;
--SAS-Blue-20: #00175c;
--SAS-Blue-30: #00248f;
--SAS-Blue-40: #0030c2;
--SAS-Blue-50: #003df5;
--SAS-Blue-60: #295eff;
--SAS-Blue-70: #8ad8ff;
--SAS-Blue-80: #bde9ff;
--SAS-Blue-90: #f0faff;
--SAS-Blue-Default: #00248f;
--SAS-Coral-50: #ff5852;
--SAS-Grey-100: #f5f5f5;
--SAS-Grey-20: #333333;
--SAS-Grey-30: #4d4d4d;
--SAS-Grey-40: #666666;
--SAS-Grey-50: #808080;
--SAS-Grey-80: #cccccc;
--SAS-Grey-90: #e5e5e5;
--SAS-Grey-Black: #000000;
--SAS-Grey-White: #ffffff;
--Size-1100-48: 48px;
--Size-1300-56: 56px;
--Size-1500-64: 64px;

19
packages/design-system/lib/styles/base.js
View File

@@ -100,6 +100,25 @@ export const theme = {
'Icon/md': 32,
'Icon/lg': 40,
'Icon/xl': 42,
'SAS/Blue/Default': '#00248F',
'SAS/Blue/20': '#00175C',
'SAS/Blue/30': '#00248F',
'SAS/Blue/40': '#0030C2',
'SAS/Blue/50': '#003DF5',
'SAS/Blue/60': '#295EFF',
'SAS/Blue/90': '#F0FAFF',
'SAS/Blue/80': '#BDE9FF',
'SAS/Blue/70': '#8AD8FF',
'SAS/Grey/Black': '#000000',
'SAS/Grey/20': '#333333',
'SAS/Grey/30': '#4D4D4D',
'SAS/Grey/40': '#666666',
'SAS/Grey/50': '#808080',
'SAS/Grey/80': '#CCCCCC',
'SAS/Grey/90': '#E5E5E5',
'SAS/Grey/100': '#F5F5F5',
'SAS/Grey/White': '#FFFFFF',
'SAS/Coral/50': '#FF5852',
'Text size/5xs': 12,
'Text size/4xs': 14,
'Text size/3xs': 16,

76
packages/design-system/lib/styles/downtown-camper.css
View File

@@ -64,14 +64,10 @@
--Signature-Downtown-Camper-Russet-70: #9b5622;
--Signature-Downtown-Camper-Russet-80: #834722;
--Signature-Downtown-Camper-Russet-90: #69391e;
--Surface-Brand-Accent-OnAccent-Default: #ffffff;
--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-Secondary: #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;
@@ -134,21 +130,23 @@
--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-OnAccent-Default: var(
--Signature-Downtown-Camper-Russet-60
);
--Border-Divider-Brand-OnPrimary-1-Default: 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-Brand-OnPrimary-3-Default: var(
--Signature-Downtown-Camper-Quicksand-50
);
--Border-Divider-Default: var(--Neutral-20);
--Border-Divider-Subtle: var(--Neutral-15);
--Border-Intense: var(--Neutral-30);
--Border-Interactive-Active: var(--Neutral-80);
--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-Selected: var(--Neutral-80);
--Border-Inverted: var(--Neutral-Opacity-White-100);
--Border-Strong: var(--Neutral-30);
--Component-Button-Brand-Primary-Border-Default: var(
--Neutral-Opacity-White-0
);
@@ -292,27 +290,39 @@
--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(
--Surface-Brand-Accent-OnAccent-Accent-Secondary: var(
--Neutral-Opacity-White-100
);
--Surface-Brand-Accent-OnAccent-Accent: var(--Neutral-Opacity-White-100);
--Surface-Brand-Primary-1-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-Brand-Primary-2-Default: var(--Signature-Downtown-Camper-Russet-80);
--Surface-Brand-Primary-2-OnSurface-Accent: var(--Neutral-Opacity-White-100);
--Surface-Brand-Primary-2-OnSurface-Default: var(--Neutral-Opacity-White-100);
--Surface-Brand-Primary-3-Default: var(--Signature-Downtown-Camper-Russet-80);
--Surface-Brand-Primary-3-OnSurface-Accent: var(
--Signature-Downtown-Camper-Quicksand-30
);
--Surface-Brand-Primary-3-OnSurface-Default: var(
--Signature-Downtown-Camper-Quicksand-30
);
--Surface-Feedback-Error-light: var(--Scandic-Red-00);
--Surface-Feedback-Error: var(--Scandic-Red-70);
--Surface-Feedback-Information-light: var(--Scandic-Blue-00);
--Surface-Feedback-Information: var(--Scandic-Blue-70);
--Surface-Feedback-Neutral-light: var(--Neutral-15);
--Surface-Feedback-Neutral: var(--Neutral-50);
--Surface-Feedback-Succes-light: var(--Scandic-Green-00);
--Surface-Feedback-Succes: var(--Scandic-Green-60);
--Surface-Feedback-Warning-light: var(--Scandic-Yellow-00);
--Surface-Feedback-Warning: var(--Scandic-Yellow-60);
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
--Surface-Primary-Disabled: var(--Neutral-15);
--Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10);
--Surface-Primary-Hover-Accent: var(--Neutral-15);
--Surface-Primary-OnSurface-Default: var(--Neutral-5);
--Surface-Secondary-Default-dark: var(--Neutral-20);
--Surface-Secondary-Default: var(--Neutral-10);
--Surface-Secondary-Subtle: var(--Neutral-20);
--Surface-UI-Fill-Active: var(--Neutral-80);
--Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
--Surface-UI-Fill-Disabled: var(--Neutral-15);
@@ -321,7 +331,7 @@
--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-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);
@@ -335,17 +345,17 @@
--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-Feedback-Error-Accent: var(--Scandic-Red-70);
--Text-Feedback-Information-Accent: var(--Scandic-Blue-70);
--Text-Feedback-Neutral-Accent: var(--Neutral-50);
--Text-Feedback-Succes-Accent: var(--Scandic-Green-60);
--Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
--Text-Feedback-Error: var(--Scandic-Red-70);
--Text-Feedback-Information: var(--Scandic-Blue-70);
--Text-Feedback-Neutral: var(--Neutral-50);
--Text-Feedback-Succes: var(--Scandic-Green-60);
--Text-Feedback-Warning: var(--Scandic-Yellow-60);
--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: var(--Signature-Downtown-Camper-Russet-80);
--Text-Interactive-Hover: var(--Neutral-70);
--Text-Interactive-Placeholder: var(--Neutral-50);
--Text-Interactive-Secondary-Hover: var(
--Signature-Downtown-Camper-Russet-60

62
packages/design-system/lib/styles/downtown-camper.js
View File

@@ -87,14 +87,10 @@ export const theme = {
'Body/Underline/sm/Font fallback': 'sans-serif',
'Body/Underline/sm/Letter spacing': 0.2,
'Body/Underline/sm/Text-Decoration': 'underline',
'Surface/Brand/Accent/OnAccent/Default': '#FFFFFF',
'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',
'Surface/Brand/Primary 3/OnSurface/Accent Secondary': '#FFFFFF',
'Utilities/Gradients/10': '#3C43361A',
'Font family/Downtown Camper/Title': 'Gotham',
'Font family/Downtown Camper/Body': 'Fira sans',
@@ -147,10 +143,9 @@ export const theme = {
'Text/Secondary': '#575757',
'Text/Tertiary': '#747474',
'Text/Accent Primary': '#834722',
'Text/Accent Secondary': '#747474',
'Text/Inverted': '#FFFFFF',
'Text/Interactive/Default': '#1F1F1F',
'Text/Interactive/Hover': '#834722',
'Text/Interactive/Hover': '#454545',
'Text/Interactive/Secondary': '#834722',
'Text/Interactive/Secondary Hover': '#BB7524',
'Text/Interactive/Disabled': '#8C8C8C',
@@ -158,13 +153,14 @@ export const theme = {
'Text/Interactive/Error': '#AD0015',
'Text/Interactive/Placeholder': '#747474',
'Text/Brand/OnAccent/Heading': '#FFFFFF',
'Text/Feedback/Information Accent': '#284EA0',
'Text/Feedback/Succes Accent': '#348337',
'Text/Feedback/Warning Accent': '#D17308',
'Text/Feedback/Error Accent': '#AD0015',
'Text/Feedback/Neutral Accent': '#747474',
'Text/Feedback/Information': '#284EA0',
'Text/Feedback/Succes': '#348337',
'Text/Feedback/Warning': '#D17308',
'Text/Feedback/Error': '#AD0015',
'Text/Feedback/Neutral': '#747474',
'Text/Brand/OnAccent/Default': '#FFFFFF',
'Text/Brand/OnAccent/Accent': '#FFFFFF',
'Text/Brand/OnAccent/Accent Secondary': '#747474',
'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
'Text/Brand/OnPrimary 1/Default': '#FFFFFF',
'Text/Brand/OnPrimary 1/Accent': '#FFFFFF',
@@ -181,14 +177,20 @@ export const theme = {
'Surface/Primary/Hover Light': '#e6e5e5',
'Surface/Primary/Hover Accent': '#E9E9E9',
'Surface/Primary/OnSurface/Default': '#F5F5F5',
'Surface/Primary/Disabled': '#E9E9E9',
'Surface/Primary/Disabled': '#1F1C1B1A',
'Surface/Secondary/Default': '#F0F0F0',
'Surface/Secondary/Default dark': '#D9D9D9',
'Surface/Secondary/Subtle': '#D9D9D9',
'Surface/Secondary/Hover': '#e4e4e4',
'Surface/Brand/Accent/Default': '#D3952D',
'Surface/Brand/Primary 1/Default': '#834722',
'Surface/Brand/Accent/OnAccent/Accent': '#FFFFFF',
'Surface/Brand/Accent/OnAccent/Accent Secondary': '#FFFFFF',
'Surface/Brand/Primary 1/Default': '#3C4336',
'Surface/Brand/Primary 2/Default': '#834722',
'Surface/Brand/Primary 3/Default': '#3C4336',
'Surface/Brand/Primary 2/OnSurface/Default': '#FFFFFF',
'Surface/Brand/Primary 2/OnSurface/Accent': '#FFFFFF',
'Surface/Brand/Primary 3/Default': '#834722',
'Surface/Brand/Primary 3/OnSurface/Default': '#E4C7BD',
'Surface/Brand/Primary 3/OnSurface/Accent': '#E4C7BD',
'Surface/UI Fill/Default': '#FFFFFF',
'Surface/UI Fill/Intense': '#262626',
'Surface/UI Fill/Active': '#262626',
@@ -199,18 +201,18 @@ export const theme = {
'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',
'Surface/Feedback/Information': '#284EA0',
'Surface/Feedback/Information light': '#E8F6FF',
'Surface/Feedback/Succes': '#348337',
'Surface/Feedback/Succes light': '#F3FCE8',
'Surface/Feedback/Warning': '#D17308',
'Surface/Feedback/Warning light': '#FFF8E3',
'Surface/Feedback/Error': '#AD0015',
'Surface/Feedback/Error light': '#FFEBEB',
'Surface/Feedback/Neutral': '#747474',
'Surface/Feedback/Neutral light': '#E9E9E9',
'Border/Default': '#D9D9D9',
'Border/Intense': '#BFBFBF',
'Border/Strong': '#BFBFBF',
'Border/Inverted': '#FFFFFF',
'Icon/Default': '#575757',
'Icon/Intense': '#1F1F1F',
@@ -282,11 +284,11 @@ export const theme = {
'Border/Divider/Default': '#D9D9D9',
'Border/Divider/Subtle': '#E9E9E9',
'Border/Divider/Accent': '#BFBFBF',
'Border/Divider/Brand/OnAccent/Default': '#BB7524',
'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/Divider/Brand/OnPrimary 3/Default': '#C69382',
'Border/Interactive/Active': '#262626',
'Border/Interactive/Focus': '#262626',
'Border/Interactive/Disabled': '#BFBFBF',
'Border/Interactive/Error': '#AD0015',

99
packages/design-system/lib/styles/grand-hotel.css
View File

@@ -35,6 +35,7 @@
--Link-sm-Text-Decoration: underline;
--Signature-Grand-Hotel-Blue-Bayoux-100: #21252b;
--Signature-Grand-Hotel-Blue-Bayoux-50: #5b6e7f;
--Signature-Grand-Hotel-Blue-Bayoux-60: #4e5c6c;
--Signature-Grand-Hotel-Blue-Bayoux-80: #3d444d;
--Signature-Grand-Hotel-Blue-Bayoux-90: #363c43;
--Signature-Grand-Hotel-Careys-Pink-40: #dba7b1;
@@ -43,17 +44,13 @@
--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-20: #d7d5d1;
--Signature-Grand-Hotel-Cloudy-30: #b2ada7;
--Signature-Grand-Hotel-Submarine-30: #b0c4cb;
--Surface-Brand-Accent-OnAccent-Default: #ffffff;
--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-Secondary: #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;
@@ -115,21 +112,23 @@
--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-OnAccent-Default: var(
--Signature-Grand-Hotel-Cloudy-30
);
--Border-Divider-Brand-OnPrimary-1-Default: 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-Brand-OnPrimary-3-Default: var(
--Signature-Grand-Hotel-Careys-Pink-70
);
--Border-Divider-Default: var(--Neutral-20);
--Border-Divider-Subtle: var(--Neutral-15);
--Border-Intense: var(--Neutral-30);
--Border-Interactive-Active: var(--Neutral-80);
--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-Selected: var(--Neutral-80);
--Border-Inverted: var(--Neutral-Opacity-White-100);
--Border-Strong: var(--Neutral-30);
--Component-Button-Brand-Primary-Border-Default: var(
--Neutral-Opacity-White-0
);
@@ -268,32 +267,50 @@
--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-Accent-Default: var(--Signature-Grand-Hotel-Cloudy-20);
--Surface-Brand-Accent-OnAccent-Accent-Secondary: var(
--Signature-Grand-Hotel-Blue-Bayoux-100
);
--Surface-Brand-Accent-OnAccent-Accent: var(
--Signature-Grand-Hotel-Blue-Bayoux-100
);
--Surface-Brand-Primary-1-Default: var(
--Signature-Grand-Hotel-Careys-Pink-40
--Signature-Grand-Hotel-Blue-Bayoux-50
);
--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-Brand-Primary-2-OnSurface-Accent: var(
--Signature-Grand-Hotel-Blue-Bayoux-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-Brand-Primary-2-OnSurface-Default: var(
--Signature-Grand-Hotel-Blue-Bayoux-100
);
--Surface-Brand-Primary-3-Default: var(
--Signature-Grand-Hotel-Careys-Pink-40
);
--Surface-Brand-Primary-3-OnSurface-Accent: var(
--Signature-Grand-Hotel-Careys-Pink-70
);
--Surface-Brand-Primary-3-OnSurface-Default: var(
--Signature-Grand-Hotel-Careys-Pink-70
);
--Surface-Feedback-Error-light: var(--Scandic-Red-00);
--Surface-Feedback-Error: var(--Scandic-Red-70);
--Surface-Feedback-Information-light: var(--Scandic-Blue-00);
--Surface-Feedback-Information: var(--Scandic-Blue-70);
--Surface-Feedback-Neutral-light: var(--Neutral-15);
--Surface-Feedback-Neutral: var(--Neutral-50);
--Surface-Feedback-Succes-light: var(--Scandic-Green-00);
--Surface-Feedback-Succes: var(--Scandic-Green-60);
--Surface-Feedback-Warning-light: var(--Scandic-Yellow-00);
--Surface-Feedback-Warning: var(--Scandic-Yellow-60);
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
--Surface-Primary-Disabled: var(--Neutral-15);
--Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10);
--Surface-Primary-Hover-Accent: var(--Neutral-15);
--Surface-Primary-OnSurface-Default: var(--Signature-Grand-Hotel-Cloudy-0);
--Surface-Secondary-Default-dark: var(--Signature-Grand-Hotel-Cloudy-10);
--Surface-Secondary-Default: var(--Signature-Grand-Hotel-Cloudy-0);
--Surface-Secondary-Subtle: var(--Signature-Grand-Hotel-Cloudy-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);
@@ -303,31 +320,31 @@
--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-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-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-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-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-Feedback-Error-Accent: var(--Scandic-Red-70);
--Text-Feedback-Information-Accent: var(--Scandic-Blue-70);
--Text-Feedback-Neutral-Accent: var(--Neutral-50);
--Text-Feedback-Succes-Accent: var(--Scandic-Green-60);
--Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
--Text-Feedback-Error: var(--Scandic-Red-70);
--Text-Feedback-Information: var(--Scandic-Blue-70);
--Text-Feedback-Neutral: var(--Neutral-50);
--Text-Feedback-Succes: var(--Scandic-Green-60);
--Text-Feedback-Warning: var(--Scandic-Yellow-60);
--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: var(--Signature-Grand-Hotel-Careys-Pink-60);
--Text-Interactive-Hover: var(--Signature-Grand-Hotel-Blue-Bayoux-80);
--Text-Interactive-Placeholder: var(--Neutral-50);
--Text-Interactive-Secondary-Hover: var(
--Signature-Grand-Hotel-Careys-Pink-50

79
packages/design-system/lib/styles/grand-hotel.js
View File

@@ -6,8 +6,9 @@ export const theme = {
'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/20': '#D7D5D1',
'Signature/Grand Hotel/Blue Bayoux/50': '#5B6E7F',
'Signature/Grand Hotel/Blue Bayoux/60': '#4E5C6C',
'Signature/Grand Hotel/Blue Bayoux/80': '#3D444D',
'Signature/Grand Hotel/Blue Bayoux/90': '#363C43',
'Signature/Grand Hotel/Blue Bayoux/100': '#21252B',
@@ -67,14 +68,10 @@ export const theme = {
'Body/Underline/sm/Font fallback': 'sans-serif',
'Body/Underline/sm/Letter spacing': 0.2,
'Body/Underline/sm/Text-Decoration': 'underline',
'Surface/Brand/Accent/OnAccent/Default': '#FFFFFF',
'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',
'Surface/Brand/Primary 3/OnSurface/Accent Secondary': '#FFFFFF',
'Utilities/Gradients/10': '#5B6E7F1A',
'Font family/Grand Hotel/Title': 'Canela Deck',
'Font family/Grand Hotel/Body': 'Fira sans',
@@ -127,10 +124,9 @@ export const theme = {
'Text/Secondary': '#575757',
'Text/Tertiary': '#747474',
'Text/Accent Primary': '#AA546B',
'Text/Accent Secondary': '#747474',
'Text/Inverted': '#FFFFFF',
'Text/Interactive/Default': '#21252B',
'Text/Interactive/Hover': '#AA546B',
'Text/Interactive/Hover': '#3D444D',
'Text/Interactive/Secondary': '#AA546B',
'Text/Interactive/Secondary Hover': '#C27183',
'Text/Interactive/Disabled': '#8C8C8C',
@@ -138,22 +134,23 @@ export const theme = {
'Text/Interactive/Error': '#AD0015',
'Text/Interactive/Placeholder': '#747474',
'Text/Brand/OnAccent/Heading': '#1F1F1F',
'Text/Feedback/Information Accent': '#284EA0',
'Text/Feedback/Succes Accent': '#348337',
'Text/Feedback/Warning Accent': '#D17308',
'Text/Feedback/Error Accent': '#AD0015',
'Text/Feedback/Neutral Accent': '#747474',
'Text/Feedback/Information': '#284EA0',
'Text/Feedback/Succes': '#348337',
'Text/Feedback/Warning': '#D17308',
'Text/Feedback/Error': '#AD0015',
'Text/Feedback/Neutral': '#747474',
'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/OnAccent/Accent Secondary': '#747474',
'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
'Text/Brand/OnPrimary 1/Default': '#FFFFFF',
'Text/Brand/OnPrimary 1/Accent': '#FFFFFF',
'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',
'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',
@@ -161,14 +158,20 @@ export const theme = {
'Surface/Primary/Hover Light': '#e6e5e5',
'Surface/Primary/Hover Accent': '#E9E9E9',
'Surface/Primary/OnSurface/Default': '#F7F6F5',
'Surface/Primary/Disabled': '#E9E9E9',
'Surface/Primary/Disabled': '#1F1C1B1A',
'Surface/Secondary/Default': '#F7F6F5',
'Surface/Secondary/Default dark': '#EBEAE9',
'Surface/Secondary/Subtle': '#EBEAE9',
'Surface/Secondary/Hover': '#ebeae9',
'Surface/Brand/Accent/Default': '#B2ADA7',
'Surface/Brand/Primary 1/Default': '#DBA7B1',
'Surface/Brand/Accent/Default': '#D7D5D1',
'Surface/Brand/Accent/OnAccent/Accent': '#21252B',
'Surface/Brand/Accent/OnAccent/Accent Secondary': '#21252B',
'Surface/Brand/Primary 1/Default': '#5B6E7F',
'Surface/Brand/Primary 2/Default': '#DBA7B1',
'Surface/Brand/Primary 3/Default': '#5B6E7F',
'Surface/Brand/Primary 2/OnSurface/Default': '#21252B',
'Surface/Brand/Primary 2/OnSurface/Accent': '#21252B',
'Surface/Brand/Primary 3/Default': '#DBA7B1',
'Surface/Brand/Primary 3/OnSurface/Default': '#8E4258',
'Surface/Brand/Primary 3/OnSurface/Accent': '#8E4258',
'Surface/UI Fill/Default': '#FFFFFF',
'Surface/UI Fill/Intense': '#262626',
'Surface/UI Fill/Active': '#262626',
@@ -179,18 +182,18 @@ export const theme = {
'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',
'Surface/Feedback/Information': '#284EA0',
'Surface/Feedback/Information light': '#E8F6FF',
'Surface/Feedback/Succes': '#348337',
'Surface/Feedback/Succes light': '#F3FCE8',
'Surface/Feedback/Warning': '#D17308',
'Surface/Feedback/Warning light': '#FFF8E3',
'Surface/Feedback/Error': '#AD0015',
'Surface/Feedback/Error light': '#FFEBEB',
'Surface/Feedback/Neutral': '#747474',
'Surface/Feedback/Neutral light': '#E9E9E9',
'Border/Default': '#D9D9D9',
'Border/Intense': '#BFBFBF',
'Border/Strong': '#BFBFBF',
'Border/Inverted': '#FFFFFF',
'Icon/Default': '#575757',
'Icon/Intense': '#1F1F1F',
@@ -262,11 +265,11 @@ export const theme = {
'Border/Divider/Default': '#D9D9D9',
'Border/Divider/Subtle': '#E9E9E9',
'Border/Divider/Accent': '#BFBFBF',
'Border/Divider/Brand/OnAccent/Default': '#B2ADA7',
'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/Divider/Brand/OnPrimary 3/Default': '#8E4258',
'Border/Interactive/Active': '#262626',
'Border/Interactive/Focus': '#262626',
'Border/Interactive/Disabled': '#BFBFBF',
'Border/Interactive/Error': '#AD0015',

96
packages/design-system/lib/styles/haymarket.css
View File

@@ -64,14 +64,10 @@
--Signature-Haymarket-Vista-White-70: #8e5547;
--Signature-Haymarket-Vista-White-80: #76493e;
--Signature-Haymarket-Vista-White-90: #644138;
--Surface-Brand-Accent-OnAccent-Default: #ffffff;
--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-Secondary: #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;
@@ -93,7 +89,7 @@
--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-Letter-spacing: 0.96px;
--Title-lg-Text-Transform: none;
--Title-md-Font-fallback: Serif;
--Title-md-Letter-spacing: 0.36px;
@@ -134,21 +130,23 @@
--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-OnAccent-Default: var(
--Signature-Haymarket-Antique-Brass-30
);
--Border-Divider-Brand-OnPrimary-1-Default: 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-Brand-OnPrimary-3-Default: var(
--Signature-Haymarket-Bismark-20
);
--Border-Divider-Default: var(--Neutral-20);
--Border-Divider-Subtle: var(--Neutral-15);
--Border-Intense: var(--Neutral-30);
--Border-Interactive-Active: var(--Neutral-80);
--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-Selected: var(--Neutral-80);
--Border-Inverted: var(--Neutral-Opacity-White-100);
--Border-Strong: var(--Neutral-30);
--Component-Button-Brand-Primary-Border-Default: var(
--Neutral-Opacity-White-0
);
@@ -278,27 +276,45 @@
--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-Accent-OnAccent-Accent-Secondary: var(
--Signature-Haymarket-Antique-Brass-10
);
--Surface-Brand-Accent-OnAccent-Accent: var(
--Signature-Haymarket-Antique-Brass-10
);
--Surface-Brand-Primary-1-Default: var(--Signature-Haymarket-Vista-White-20);
--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-Brand-Primary-2-OnSurface-Accent: var(
--Signature-Haymarket-Antique-Brass-10
);
--Surface-Brand-Primary-2-OnSurface-Default: var(
--Signature-Haymarket-Antique-Brass-10
);
--Surface-Brand-Primary-3-Default: var(--Signature-Haymarket-Bismark-60);
--Surface-Brand-Primary-3-OnSurface-Accent: var(
--Signature-Haymarket-Bismark-20
);
--Surface-Brand-Primary-3-OnSurface-Default: var(
--Signature-Haymarket-Bismark-20
);
--Surface-Feedback-Error-light: var(--Scandic-Red-00);
--Surface-Feedback-Error: var(--Scandic-Red-70);
--Surface-Feedback-Information-light: var(--Scandic-Blue-00);
--Surface-Feedback-Information: var(--Scandic-Blue-70);
--Surface-Feedback-Neutral-light: var(--Neutral-15);
--Surface-Feedback-Neutral: var(--Neutral-50);
--Surface-Feedback-Succes-light: var(--Scandic-Green-00);
--Surface-Feedback-Succes: var(--Scandic-Green-60);
--Surface-Feedback-Warning-light: var(--Scandic-Yellow-00);
--Surface-Feedback-Warning: var(--Scandic-Yellow-60);
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
--Surface-Primary-Disabled: var(--Neutral-15);
--Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10);
--Surface-Primary-Hover-Accent: var(--Neutral-15);
--Surface-Primary-OnSurface-Default: var(--Signature-Haymarket-Vista-White-0);
--Surface-Secondary-Default-dark: var(--Signature-Haymarket-Vista-White-10);
--Surface-Secondary-Default: var(--Signature-Haymarket-Vista-White-0);
--Surface-Secondary-Subtle: var(--Signature-Haymarket-Vista-White-10);
--Surface-UI-Fill-Active: var(--Neutral-80);
--Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
--Surface-UI-Fill-Disabled: var(--Neutral-15);
@@ -307,31 +323,33 @@
--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-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-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-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-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-Feedback-Error-Accent: var(--Scandic-Red-70);
--Text-Feedback-Information-Accent: var(--Scandic-Blue-70);
--Text-Feedback-Neutral-Accent: var(--Neutral-50);
--Text-Feedback-Succes-Accent: var(--Scandic-Green-60);
--Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
--Text-Feedback-Error: var(--Scandic-Red-70);
--Text-Feedback-Information: var(--Scandic-Blue-70);
--Text-Feedback-Neutral: var(--Neutral-50);
--Text-Feedback-Succes: var(--Scandic-Green-60);
--Text-Feedback-Warning: var(--Scandic-Yellow-60);
--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: var(--Signature-Haymarket-Antique-Brass-60);
--Text-Interactive-Hover: var(--Neutral-70);
--Text-Interactive-Placeholder: var(--Neutral-50);
--Text-Interactive-Secondary-Hover: var(
--Signature-Haymarket-Antique-Brass-40

76
packages/design-system/lib/styles/haymarket.js
View File

@@ -33,7 +33,7 @@ export const theme = {
'Signature/Haymarket/Bismark/80': '#394951',
'Signature/Haymarket/Bismark/90': '#334046',
'Signature/Haymarket/Bismark/100': '#1E282E',
'Title/lg/Letter spacing': 1.44,
'Title/lg/Letter spacing': 0.96,
'Title/lg/Font fallback': 'Serif',
'Title/lg/Text-Transform': 'none',
'Title/md/Letter spacing': 0.36,
@@ -87,14 +87,10 @@ export const theme = {
'Body/Underline/sm/Font fallback': 'sans-serif',
'Body/Underline/sm/Letter spacing': 0.2,
'Body/Underline/sm/Text-Decoration': 'underline',
'Surface/Brand/Accent/OnAccent/Default': '#FFFFFF',
'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',
'Surface/Brand/Primary 3/OnSurface/Accent Secondary': '#FFFFFF',
'Utilities/Gradients/10': '#F0DDD81A',
'Font family/Haymarket/Title': 'Prumo text',
'Font family/Haymarket/Body': 'Fira sans',
@@ -147,10 +143,9 @@ export const theme = {
'Text/Secondary': '#575757',
'Text/Tertiary': '#747474',
'Text/Accent Primary': '#805E45',
'Text/Accent Secondary': '#805E45',
'Text/Inverted': '#FFFFFF',
'Text/Interactive/Default': '#1F1F1F',
'Text/Interactive/Hover': '#805E45',
'Text/Interactive/Hover': '#454545',
'Text/Interactive/Secondary': '#805E45',
'Text/Interactive/Secondary Hover': '#BA8E6E',
'Text/Interactive/Disabled': '#8C8C8C',
@@ -158,22 +153,23 @@ export const theme = {
'Text/Interactive/Error': '#AD0015',
'Text/Interactive/Placeholder': '#747474',
'Text/Brand/OnAccent/Heading': '#FFFFFF',
'Text/Feedback/Information Accent': '#284EA0',
'Text/Feedback/Succes Accent': '#348337',
'Text/Feedback/Warning Accent': '#D17308',
'Text/Feedback/Error Accent': '#AD0015',
'Text/Feedback/Neutral Accent': '#747474',
'Text/Feedback/Information': '#284EA0',
'Text/Feedback/Succes': '#348337',
'Text/Feedback/Warning': '#D17308',
'Text/Feedback/Error': '#AD0015',
'Text/Feedback/Neutral': '#747474',
'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/OnAccent/Accent Secondary': '#805E45',
'Text/Brand/OnPrimary 1/Heading': '#1F1F1F',
'Text/Brand/OnPrimary 1/Default': '#1F1F1F',
'Text/Brand/OnPrimary 1/Accent': '#1F1F1F',
'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',
'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',
@@ -181,14 +177,20 @@ export const theme = {
'Surface/Primary/Hover Light': '#e6e5e5',
'Surface/Primary/Hover Accent': '#E9E9E9',
'Surface/Primary/OnSurface/Default': '#FBF7F6',
'Surface/Primary/Disabled': '#E9E9E9',
'Surface/Primary/Disabled': '#1F1C1B1A',
'Surface/Secondary/Default': '#FBF7F6',
'Surface/Secondary/Default dark': '#F6ECEA',
'Surface/Secondary/Subtle': '#F6ECEA',
'Surface/Secondary/Hover': '#efebea',
'Surface/Brand/Accent/Default': '#946F54',
'Surface/Brand/Primary 1/Default': '#4A6C78',
'Surface/Brand/Accent/OnAccent/Accent': '#EDE3D8',
'Surface/Brand/Accent/OnAccent/Accent Secondary': '#EDE3D8',
'Surface/Brand/Primary 1/Default': '#F0DDD8',
'Surface/Brand/Primary 2/Default': '#946F54',
'Surface/Brand/Primary 3/Default': '#F0DDD8',
'Surface/Brand/Primary 2/OnSurface/Default': '#EDE3D8',
'Surface/Brand/Primary 2/OnSurface/Accent': '#EDE3D8',
'Surface/Brand/Primary 3/Default': '#4A6C78',
'Surface/Brand/Primary 3/OnSurface/Default': '#C5D7DC',
'Surface/Brand/Primary 3/OnSurface/Accent': '#C5D7DC',
'Surface/UI Fill/Default': '#FFFFFF',
'Surface/UI Fill/Intense': '#262626',
'Surface/UI Fill/Active': '#262626',
@@ -199,18 +201,18 @@ export const theme = {
'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',
'Surface/Feedback/Information': '#284EA0',
'Surface/Feedback/Information light': '#E8F6FF',
'Surface/Feedback/Succes': '#348337',
'Surface/Feedback/Succes light': '#F3FCE8',
'Surface/Feedback/Warning': '#D17308',
'Surface/Feedback/Warning light': '#FFF8E3',
'Surface/Feedback/Error': '#AD0015',
'Surface/Feedback/Error light': '#FFEBEB',
'Surface/Feedback/Neutral': '#747474',
'Surface/Feedback/Neutral light': '#E9E9E9',
'Border/Default': '#D9D9D9',
'Border/Intense': '#BFBFBF',
'Border/Strong': '#BFBFBF',
'Border/Inverted': '#FFFFFF',
'Icon/Default': '#575757',
'Icon/Intense': '#1F1F1F',
@@ -282,11 +284,11 @@ export const theme = {
'Border/Divider/Default': '#D9D9D9',
'Border/Divider/Subtle': '#E9E9E9',
'Border/Divider/Accent': '#BFBFBF',
'Border/Divider/Brand/OnAccent/Default': '#C5A384',
'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/Divider/Brand/OnPrimary 3/Default': '#C5D7DC',
'Border/Interactive/Active': '#262626',
'Border/Interactive/Focus': '#262626',
'Border/Interactive/Disabled': '#BFBFBF',
'Border/Interactive/Error': '#AD0015',

104
packages/design-system/lib/styles/hotel-norge.css
View File

@@ -32,12 +32,14 @@
--Link-sm-Letter-spacing: 0.2px;
--Link-sm-Text-Decoration: underline;
--Signature-Hotel-Norge-Dark-blue-0: #b7c5c8;
--Signature-Hotel-Norge-Dark-blue-100: #2f3445;
--Signature-Hotel-Norge-Dark-blue-100: #181e34;
--Signature-Hotel-Norge-Dark-blue-30: #858f97;
--Signature-Hotel-Norge-Dark-blue-60: #626b76;
--Signature-Hotel-Norge-Dark-blue-80: #404655;
--Signature-Hotel-Norge-Dark-blue-90: #181e34;
--Signature-Hotel-Norge-Dark-blue-90: #2f3445;
--Signature-Hotel-Norge-Emerald-0: #c7ddd5;
--Signature-Hotel-Norge-Emerald-100: #004337;
--Signature-Hotel-Norge-Emerald-50: #779990;
--Signature-Hotel-Norge-Emerald-80: #3a655c;
--Signature-Hotel-Norge-Emerald-90: #26544a;
--Signature-Hotel-Norge-Off-White-0: #fdfefd;
@@ -52,14 +54,10 @@
--Signature-Hotel-Norge-Off-White-80: #838481;
--Signature-Hotel-Norge-Off-White-90: #6f716f;
--Signature-Hotel-Norge-Salmon-50: #ec615b;
--Surface-Brand-Accent-OnAccent-Default: #ffffff;
--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-Secondary: #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;
@@ -70,7 +68,7 @@
--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-Letter-spacing: 0.16px;
--Title-Decorative-md-Text-Transform: uppercase;
--Title-Overline-sm-Font-fallback: sans-serif;
--Title-Overline-sm-Letter-spacing: 0.21px;
@@ -97,7 +95,7 @@
--Title-xs-Font-fallback: sans-serif;
--Title-xs-Letter-spacing: -0.05px;
--Title-xs-Text-Transform: none;
--Utilities-Gradients-10: #3c43361a;
--Utilities-Gradients-10: #0043371a;
/* Aliases */
--Background-Primary: var(--Neutral-Opacity-White-100);
@@ -121,21 +119,23 @@
--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-OnAccent-Default: var(
--Signature-Hotel-Norge-Dark-blue-60
);
--Border-Divider-Brand-OnPrimary-1-Default: 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-Brand-OnPrimary-3-Default: var(
--Signature-Hotel-Norge-Emerald-50
);
--Border-Divider-Default: var(--Neutral-20);
--Border-Divider-Subtle: var(--Neutral-15);
--Border-Intense: var(--Neutral-30);
--Border-Interactive-Active: var(--Neutral-80);
--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-Selected: var(--Neutral-80);
--Border-Inverted: var(--Neutral-Opacity-White-100);
--Border-Strong: var(--Neutral-30);
--Component-Button-Brand-Primary-Border-Default: var(
--Neutral-Opacity-White-0
);
@@ -144,7 +144,7 @@
);
--Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
--Component-Button-Brand-Primary-Fill-Default: var(
--Signature-Hotel-Norge-Dark-blue-90
--Signature-Hotel-Norge-Dark-blue-100
);
--Component-Button-Brand-Primary-Fill-Disabled: var(
--Neutral-Opacity-Black-10
@@ -157,7 +157,7 @@
--Neutral-Opacity-White-100
);
--Component-Button-Brand-Secondary-Border-Default: var(
--Signature-Hotel-Norge-Dark-blue-90
--Signature-Hotel-Norge-Dark-blue-100
);
--Component-Button-Brand-Secondary-Border-Disabled: var(
--Neutral-Opacity-Black-10
@@ -182,7 +182,7 @@
--Neutral-Opacity-White-100
);
--Component-Button-Brand-Secondary-On-fill-Default: var(
--Signature-Hotel-Norge-Dark-blue-90
--Signature-Hotel-Norge-Dark-blue-100
);
--Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
--Component-Button-Brand-Secondary-On-fill-Hover: var(
@@ -223,7 +223,7 @@
--Signature-Hotel-Norge-Emerald-100
);
--Component-Button-Inverted-On-fill-Default: var(
--Signature-Hotel-Norge-Dark-blue-90
--Signature-Hotel-Norge-Dark-blue-100
);
--Component-Button-Inverted-On-fill-Disabled: var(--Neutral-40);
--Component-Button-Inverted-On-fill-Hover-inverted: var(
@@ -251,7 +251,7 @@
--Icon-Feedback-Warning: var(--Scandic-Yellow-60);
--Icon-Intense: var(--Neutral-90);
--Icon-Interactive-Accent: var(--Signature-Hotel-Norge-Emerald-90);
--Icon-Interactive-Default: var(--Signature-Hotel-Norge-Dark-blue-90);
--Icon-Interactive-Default: var(--Signature-Hotel-Norge-Dark-blue-100);
--Icon-Interactive-Disabled: var(--Neutral-30);
--Icon-Interactive-Placeholder: var(--Neutral-50);
--Icon-Interactive-Secondary: var(--Signature-Hotel-Norge-Emerald-90);
@@ -279,27 +279,45 @@
--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-Brand-Accent-OnAccent-Accent-Secondary: var(
--Signature-Hotel-Norge-Dark-blue-90
);
--Surface-Brand-Accent-OnAccent-Accent: var(
--Signature-Hotel-Norge-Dark-blue-90
);
--Surface-Brand-Primary-1-Default: var(--Signature-Hotel-Norge-Emerald-100);
--Surface-Brand-Primary-2-Default: var(--Signature-Hotel-Norge-Dark-blue-100);
--Surface-Brand-Primary-2-OnSurface-Accent: var(
--Signature-Hotel-Norge-Dark-blue-90
);
--Surface-Brand-Primary-2-OnSurface-Default: var(
--Signature-Hotel-Norge-Dark-blue-90
);
--Surface-Brand-Primary-3-Default: var(--Signature-Hotel-Norge-Dark-blue-100);
--Surface-Brand-Primary-3-OnSurface-Accent: var(
--Signature-Hotel-Norge-Dark-blue-0
);
--Surface-Brand-Primary-3-OnSurface-Default: var(
--Signature-Hotel-Norge-Dark-blue-0
);
--Surface-Feedback-Error-light: var(--Scandic-Red-00);
--Surface-Feedback-Error: var(--Scandic-Red-70);
--Surface-Feedback-Information-light: var(--Scandic-Blue-00);
--Surface-Feedback-Information: var(--Scandic-Blue-70);
--Surface-Feedback-Neutral-light: var(--Neutral-15);
--Surface-Feedback-Neutral: var(--Neutral-50);
--Surface-Feedback-Succes-light: var(--Scandic-Green-00);
--Surface-Feedback-Succes: var(--Scandic-Green-60);
--Surface-Feedback-Warning-light: var(--Scandic-Yellow-00);
--Surface-Feedback-Warning: var(--Scandic-Yellow-60);
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
--Surface-Primary-Disabled: var(--Neutral-15);
--Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10);
--Surface-Primary-Hover-Accent: var(--Neutral-15);
--Surface-Primary-OnSurface-Default: var(
--Signature-Hotel-Norge-Off-White-30
);
--Surface-Secondary-Default-dark: var(--Signature-Hotel-Norge-Off-White-60);
--Surface-Secondary-Default: var(--Signature-Hotel-Norge-Off-White-50);
--Surface-Secondary-Subtle: var(--Signature-Hotel-Norge-Off-White-60);
--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);
@@ -309,7 +327,7 @@
--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-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);
@@ -323,17 +341,17 @@
--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-Feedback-Error-Accent: var(--Scandic-Red-70);
--Text-Feedback-Information-Accent: var(--Scandic-Blue-70);
--Text-Feedback-Neutral-Accent: var(--Neutral-50);
--Text-Feedback-Succes-Accent: var(--Scandic-Green-60);
--Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
--Text-Feedback-Error: var(--Scandic-Red-70);
--Text-Feedback-Information: var(--Scandic-Blue-70);
--Text-Feedback-Neutral: var(--Neutral-50);
--Text-Feedback-Succes: var(--Scandic-Green-60);
--Text-Feedback-Warning: var(--Scandic-Yellow-60);
--Text-Heading: var(--Neutral-90);
--Text-Interactive-Default: var(--Signature-Hotel-Norge-Dark-blue-90);
--Text-Interactive-Default: var(--Signature-Hotel-Norge-Dark-blue-100);
--Text-Interactive-Disabled: var(--Neutral-40);
--Text-Interactive-Error: var(--Scandic-Red-70);
--Text-Interactive-Focus: var(--Neutral-80);
--Text-Interactive-Hover: var(--Signature-Hotel-Norge-Emerald-90);
--Text-Interactive-Hover: var(--Signature-Hotel-Norge-Dark-blue-80);
--Text-Interactive-Placeholder: var(--Neutral-50);
--Text-Interactive-Secondary-Hover: var(--Signature-Hotel-Norge-Emerald-80);
--Text-Interactive-Secondary: var(--Signature-Hotel-Norge-Emerald-90);

80
packages/design-system/lib/styles/hotel-norge.js
View File

@@ -7,19 +7,21 @@ export const theme = {
'Signature/Hotel Norge/Off White/40': '#F2F3EF',
'Signature/Hotel Norge/Off White/50': '#EFF0EB',
'Signature/Hotel Norge/Off White/60': '#D9DAD6',
'Signature/Hotel Norge/Emerald/0': '#C7DDD5',
'Signature/Hotel Norge/Off White/70': '#AAAAA7',
'Signature/Hotel Norge/Off White/80': '#838481',
'Signature/Hotel Norge/Emerald/0': '#C7DDD5',
'Signature/Hotel Norge/Emerald/50': '#779990',
'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/Emerald/90': '#26544A',
'Signature/Hotel Norge/Dark blue/0': '#B7C5C8',
'Signature/Hotel Norge/Emerald/100': '#004337',
'Signature/Hotel Norge/Dark blue/30': '#858F97',
'Signature/Hotel Norge/Dark blue/60': '#626B76',
'Signature/Hotel Norge/Dark blue/80': '#404655',
'Signature/Hotel Norge/Dark blue/90': '#181E34',
'Signature/Hotel Norge/Dark blue/100': '#2F3445',
'Signature/Hotel Norge/Dark blue/90': '#2F3445',
'Signature/Hotel Norge/Dark blue/100': '#181E34',
'Signature/Hotel Norge/Salmon/50': '#EC615B',
'Title/lg/Font fallback': 'sans-serif',
'Title/lg/Text-Transform': 'none',
@@ -30,7 +32,7 @@ export const theme = {
'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/Letter spacing': 0.16,
'Title/Decorative/md/Font fallback': 'sans-serif',
'Title/Decorative/md/Text-Transform': 'uppercase',
'Title/Subtitle/lg/Font fallback': 'sans-serif',
@@ -72,15 +74,11 @@ export const theme = {
'Body/Underline/sm/Font fallback': 'sans-serif',
'Body/Underline/sm/Letter spacing': 0.2,
'Body/Underline/sm/Text-Decoration': 'underline',
'Surface/Brand/Accent/OnAccent/Default': '#FFFFFF',
'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',
'Surface/Brand/Primary 3/OnSurface/Accent Secondary': '#FFFFFF',
'Utilities/Gradients/10': '#3C43361A',
'Utilities/Gradients/10': '#0043371A',
'Font family/Hotel Norge/Title': 'Domaine Sans Text',
'Font family/Hotel Norge/Body': 'Fira sans',
'Font family/Hotel Norge/Decorative': 'Domaine Sans Text',
@@ -132,10 +130,9 @@ export const theme = {
'Text/Secondary': '#575757',
'Text/Tertiary': '#747474',
'Text/Accent Primary': '#747474',
'Text/Accent Secondary': '#747474',
'Text/Inverted': '#FFFFFF',
'Text/Interactive/Default': '#181E34',
'Text/Interactive/Hover': '#26544A',
'Text/Interactive/Hover': '#404655',
'Text/Interactive/Secondary': '#26544A',
'Text/Interactive/Secondary Hover': '#3A655C',
'Text/Interactive/Disabled': '#8C8C8C',
@@ -143,13 +140,14 @@ export const theme = {
'Text/Interactive/Error': '#AD0015',
'Text/Interactive/Placeholder': '#747474',
'Text/Brand/OnAccent/Heading': '#1F1F1F',
'Text/Feedback/Information Accent': '#284EA0',
'Text/Feedback/Succes Accent': '#348337',
'Text/Feedback/Warning Accent': '#D17308',
'Text/Feedback/Error Accent': '#AD0015',
'Text/Feedback/Neutral Accent': '#747474',
'Text/Feedback/Information': '#284EA0',
'Text/Feedback/Succes': '#348337',
'Text/Feedback/Warning': '#D17308',
'Text/Feedback/Error': '#AD0015',
'Text/Feedback/Neutral': '#747474',
'Text/Brand/OnAccent/Default': '#1F1F1F',
'Text/Brand/OnAccent/Accent': '#004337',
'Text/Brand/OnAccent/Accent Secondary': '#747474',
'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
'Text/Brand/OnPrimary 1/Default': '#FFFFFF',
'Text/Brand/OnPrimary 1/Accent': '#B7C5C8',
@@ -166,14 +164,20 @@ export const theme = {
'Surface/Primary/Hover Light': '#e6e5e5',
'Surface/Primary/Hover Accent': '#E9E9E9',
'Surface/Primary/OnSurface/Default': '#F4F5F2',
'Surface/Primary/Disabled': '#E9E9E9',
'Surface/Primary/Disabled': '#1F1C1B1A',
'Surface/Secondary/Default': '#EFF0EB',
'Surface/Secondary/Default dark': '#D9DAD6',
'Surface/Secondary/Subtle': '#D9DAD6',
'Surface/Secondary/Hover': '#e3e4df',
'Surface/Brand/Accent/Default': '#C7DDD5',
'Surface/Brand/Primary 1/Default': '#181E34',
'Surface/Brand/Accent/OnAccent/Accent': '#2F3445',
'Surface/Brand/Accent/OnAccent/Accent Secondary': '#2F3445',
'Surface/Brand/Primary 1/Default': '#004337',
'Surface/Brand/Primary 2/Default': '#181E34',
'Surface/Brand/Primary 3/Default': '#004337',
'Surface/Brand/Primary 2/OnSurface/Default': '#2F3445',
'Surface/Brand/Primary 2/OnSurface/Accent': '#2F3445',
'Surface/Brand/Primary 3/Default': '#181E34',
'Surface/Brand/Primary 3/OnSurface/Default': '#B7C5C8',
'Surface/Brand/Primary 3/OnSurface/Accent': '#B7C5C8',
'Surface/UI Fill/Default': '#FFFFFF',
'Surface/UI Fill/Intense': '#262626',
'Surface/UI Fill/Active': '#262626',
@@ -184,18 +188,18 @@ export const theme = {
'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',
'Surface/Feedback/Information': '#284EA0',
'Surface/Feedback/Information light': '#E8F6FF',
'Surface/Feedback/Succes': '#348337',
'Surface/Feedback/Succes light': '#F3FCE8',
'Surface/Feedback/Warning': '#D17308',
'Surface/Feedback/Warning light': '#FFF8E3',
'Surface/Feedback/Error': '#AD0015',
'Surface/Feedback/Error light': '#FFEBEB',
'Surface/Feedback/Neutral': '#747474',
'Surface/Feedback/Neutral light': '#E9E9E9',
'Border/Default': '#D9D9D9',
'Border/Intense': '#BFBFBF',
'Border/Strong': '#BFBFBF',
'Border/Inverted': '#FFFFFF',
'Icon/Default': '#575757',
'Icon/Intense': '#1F1F1F',
@@ -267,11 +271,11 @@ export const theme = {
'Border/Divider/Default': '#D9D9D9',
'Border/Divider/Subtle': '#E9E9E9',
'Border/Divider/Accent': '#BFBFBF',
'Border/Divider/Brand/OnAccent/Default': '#626B76',
'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/Divider/Brand/OnPrimary 3/Default': '#779990',
'Border/Interactive/Active': '#262626',
'Border/Interactive/Focus': '#262626',
'Border/Interactive/Disabled': '#BFBFBF',
'Border/Interactive/Error': '#AD0015',

116
packages/design-system/lib/styles/marski.css
View File

@@ -13,12 +13,12 @@
--Body-Underline-sm-Font-fallback: sans-serif;
--Body-Underline-sm-Letter-spacing: 0.2px;
--Body-Underline-sm-Text-Decoration: underline;
--Component-Button-Brand-Primary-Fill-Hover: #283b48;
--Component-Button-Brand-Secondary-Border-Hover-inverted: #818c95;
--Component-Button-Brand-Secondary-On-fill-Hover-inverted: #b2b9be;
--Component-Button-Brand-Primary-Fill-Hover: #51262b;
--Component-Button-Brand-Secondary-Border-Hover-inverted: #9d8081;
--Component-Button-Brand-Secondary-On-fill-Hover-inverted: #c3b1b2;
--Component-Button-Brand-Tertiary-Fill-Hover: #1a54e7;
--Component-Button-Inverted-Fill-Hover: #e6e5e5;
--Component-Button-Inverted-On-fill-Hover: #283b48;
--Component-Button-Inverted-On-fill-Hover: #51262b;
--Component-Button-Muted-Border-Hover: #ffffff30;
--Font-family-Marski-Body: 'Fira sans';
--Font-family-Marski-Decorative: 'Helvetica Neue';
@@ -48,7 +48,7 @@
--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-50: #458aff;
--Signature-Marski-Blue-ribbon-60: #136afd;
--Signature-Marski-Blue-ribbon-70: #0d57f3;
--Signature-Marski-Blue-ribbon-80: #1043bd;
@@ -70,19 +70,15 @@
--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-50: #ff374a;
--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-Accent-OnAccent-Default: #ffffff;
--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-Secondary: #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;
@@ -120,7 +116,7 @@
--Title-xs-Font-fallback: sans-serif;
--Title-xs-Letter-spacing: 0.24px;
--Title-xs-Text-Transform: none;
--Utilities-Gradients-10: #3e11181a;
--Utilities-Gradients-10: #1229371a;
/* Aliases */
--Background-Primary: var(--Neutral-0);
@@ -144,21 +140,21 @@
--Body-Underline-sm-Size: var(--Impl-Text-size-4xs);
--Border-Default: var(--Neutral-20);
--Border-Divider-Accent: var(--Neutral-30);
--Border-Divider-Brand-OnAccent-Default: var(--Signature-Marski-Elephant-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-Brand-OnPrimary-3-Default: var(
--Signature-Marski-Torch-red-20
);
--Border-Divider-Default: var(--Neutral-20);
--Border-Divider-Subtle: var(--Neutral-15);
--Border-Intense: var(--Neutral-30);
--Border-Interactive-Active: var(--Neutral-80);
--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-Selected: var(--Neutral-80);
--Border-Inverted: var(--Neutral-Opacity-White-100);
--Border-Strong: var(--Neutral-30);
--Component-Button-Brand-Primary-Border-Default: var(
--Neutral-Opacity-White-0
);
@@ -167,7 +163,7 @@
);
--Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
--Component-Button-Brand-Primary-Fill-Default: var(
--Signature-Marski-Elephant-100
--Signature-Marski-Aubergine-100
);
--Component-Button-Brand-Primary-Fill-Disabled: var(
--Neutral-Opacity-Black-10
@@ -180,13 +176,13 @@
--Neutral-Opacity-White-100
);
--Component-Button-Brand-Secondary-Border-Default: var(
--Signature-Marski-Elephant-100
--Signature-Marski-Aubergine-100
);
--Component-Button-Brand-Secondary-Border-Disabled: var(
--Neutral-Opacity-Black-10
);
--Component-Button-Brand-Secondary-Border-Hover: var(
--Signature-Marski-Elephant-80
--Signature-Marski-Aubergine-80
);
--Component-Button-Brand-Secondary-Border-Inverted: var(
--Neutral-Opacity-White-100
@@ -198,18 +194,18 @@
--Neutral-Opacity-Black-10
);
--Component-Button-Brand-Secondary-Fill-Hover-Inverted: var(
--Signature-Marski-Elephant-100
--Signature-Marski-Aubergine-100
);
--Component-Button-Brand-Secondary-Fill-Hover: var(--Neutral-Opacity-White-0);
--Component-Button-Brand-Secondary-Fill-Inverted: var(
--Neutral-Opacity-White-100
);
--Component-Button-Brand-Secondary-On-fill-Default: var(
--Signature-Marski-Elephant-100
--Signature-Marski-Aubergine-100
);
--Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
--Component-Button-Brand-Secondary-On-fill-Hover: var(
--Signature-Marski-Elephant-80
--Signature-Marski-Aubergine-80
);
--Component-Button-Brand-Secondary-On-fill-Inverted: var(
--Neutral-Opacity-White-100
@@ -243,10 +239,10 @@
--Component-Button-Inverted-Fill-Disabled: var(--Neutral-Opacity-Black-10);
--Component-Button-Inverted-Fill-Faded: var(--Neutral-Opacity-White-90);
--Component-Button-Inverted-Fill-Hover-Inverted: var(
--Signature-Marski-Elephant-100
--Signature-Marski-Aubergine-100
);
--Component-Button-Inverted-On-fill-Default: var(
--Signature-Marski-Elephant-100
--Signature-Marski-Aubergine-100
);
--Component-Button-Inverted-On-fill-Disabled: var(--Neutral-40);
--Component-Button-Inverted-On-fill-Hover-inverted: var(
@@ -262,7 +258,7 @@
--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
--Signature-Marski-Aubergine-80
);
--Component-Button-Muted-On-fill-Inverted: var(--Neutral-Opacity-White-100);
--Icon-Accent: var(--Signature-Marski-Blue-ribbon-80);
@@ -302,25 +298,37 @@
--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-Accent-OnAccent-Accent-Secondary: var(
--Signature-Marski-Elephant-20
);
--Surface-Brand-Accent-OnAccent-Accent: var(--Signature-Marski-Elephant-20);
--Surface-Brand-Primary-1-Default: var(--Signature-Marski-Elephant-100);
--Surface-Brand-Primary-2-Default: var(--Signature-Marski-Elephant-100);
--Surface-Brand-Primary-2-Default: var(--Signature-Marski-Aubergine-100);
--Surface-Brand-Primary-2-OnSurface-Accent: var(
--Signature-Marski-Elephant-20
);
--Surface-Brand-Primary-2-OnSurface-Default: var(
--Signature-Marski-Elephant-20
);
--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-Brand-Primary-3-OnSurface-Accent: var(--Neutral-Opacity-White-100);
--Surface-Brand-Primary-3-OnSurface-Default: var(--Neutral-Opacity-White-100);
--Surface-Feedback-Error-light: var(--Scandic-Red-00);
--Surface-Feedback-Error: var(--Scandic-Red-70);
--Surface-Feedback-Information-light: var(--Scandic-Blue-00);
--Surface-Feedback-Information: var(--Scandic-Blue-70);
--Surface-Feedback-Neutral-light: var(--Neutral-15);
--Surface-Feedback-Neutral: var(--Neutral-50);
--Surface-Feedback-Succes-light: var(--Scandic-Green-00);
--Surface-Feedback-Succes: var(--Scandic-Green-60);
--Surface-Feedback-Warning-light: var(--Scandic-Yellow-00);
--Surface-Feedback-Warning: var(--Scandic-Yellow-60);
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
--Surface-Primary-Disabled: var(--Neutral-15);
--Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10);
--Surface-Primary-Hover-Accent: var(--Neutral-15);
--Surface-Primary-OnSurface-Default: var(--Signature-Marski-Elephant-0);
--Surface-Secondary-Default-dark: var(--Signature-Marski-Elephant-20);
--Surface-Secondary-Default: var(--Signature-Marski-Elephant-10);
--Surface-Secondary-Subtle: var(--Signature-Marski-Elephant-20);
--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);
@@ -330,31 +338,31 @@
--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-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-Accent: var(--Signature-Marski-Blue-ribbon-50);
--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-Accent: var(--Signature-Marski-Torch-red-50);
--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-Accent: var(--Signature-Marski-Torch-red-50);
--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-Feedback-Error-Accent: var(--Scandic-Red-70);
--Text-Feedback-Information-Accent: var(--Scandic-Blue-70);
--Text-Feedback-Neutral-Accent: var(--Neutral-50);
--Text-Feedback-Succes-Accent: var(--Scandic-Green-60);
--Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
--Text-Feedback-Error: var(--Scandic-Red-70);
--Text-Feedback-Information: var(--Scandic-Blue-70);
--Text-Feedback-Neutral: var(--Neutral-50);
--Text-Feedback-Succes: var(--Scandic-Green-60);
--Text-Feedback-Warning: var(--Scandic-Yellow-60);
--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: var(--Signature-Marski-Blue-ribbon-70);
--Text-Interactive-Hover: var(--Signature-Marski-Elephant-80);
--Text-Interactive-Placeholder: var(--Neutral-50);
--Text-Interactive-Secondary-Hover: var(--Signature-Marski-Blue-ribbon-90);
--Text-Interactive-Secondary: var(--Signature-Marski-Blue-ribbon-70);
@@ -377,21 +385,21 @@
--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-Font-weight: var(--Font-weight-Bold);
--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-Font-weight: var(--Font-weight-Bold);
--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-Font-weight: var(--Font-weight-Bold);
--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-Font-weight: var(--Font-weight-Bold);
--Title-xs-Size: var(--Impl-Text-size-sm);
}

106
packages/design-system/lib/styles/marski.js
View File

@@ -16,7 +16,7 @@ export const theme = {
'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/50': '#458AFF',
'Signature/Marski/Blue ribbon/60': '#136AFD',
'Signature/Marski/Blue ribbon/70': '#0D57F3',
'Signature/Marski/Blue ribbon/80': '#1043BD',
@@ -38,7 +38,7 @@ export const theme = {
'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/50': '#FF374A',
'Signature/Marski/Torch red/60': '#FB1228',
'Signature/Marski/Torch red/70': '#D40115',
'Signature/Marski/Torch red/80': '#AE0616',
@@ -98,23 +98,19 @@ export const theme = {
'Body/Underline/sm/Font fallback': 'sans-serif',
'Body/Underline/sm/Letter spacing': 0.2,
'Body/Underline/sm/Text-Decoration': 'underline',
'Surface/Brand/Accent/OnAccent/Default': '#FFFFFF',
'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',
'Surface/Brand/Primary 3/OnSurface/Accent Secondary': '#FFFFFF',
'Utilities/Gradients/10': '#3E11181A',
'Utilities/Gradients/10': '#1229371A',
'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 weight': 700,
'Title/lg/Font family': 'Helvetica Neue',
'Title/md/Font weight': 500,
'Title/md/Font weight': 700,
'Title/md/Font family': 'Helvetica Neue',
'Title/sm/Font weight': 500,
'Title/sm/Font weight': 700,
'Title/sm/Font family': 'Helvetica Neue',
'Title/sm/LowCase/Font weight': 500,
'Title/sm/LowCase/Font family': 'Helvetica Neue',
@@ -128,7 +124,7 @@ export const theme = {
'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 weight': 700,
'Title/xs/Font family': 'Helvetica Neue',
'Title/md/LowCase/Font weight': 500,
'Title/md/LowCase/Font family': 'Helvetica Neue',
@@ -158,10 +154,9 @@ export const theme = {
'Text/Secondary': '#575757',
'Text/Tertiary': '#747474',
'Text/Accent Primary': '#747474',
'Text/Accent Secondary': '#747474',
'Text/Inverted': '#FFFFFF',
'Text/Interactive/Default': '#122937',
'Text/Interactive/Hover': '#0D57F3',
'Text/Interactive/Hover': '#2C414D',
'Text/Interactive/Secondary': '#0D57F3',
'Text/Interactive/Secondary Hover': '#143D94',
'Text/Interactive/Disabled': '#8C8C8C',
@@ -169,22 +164,23 @@ export const theme = {
'Text/Interactive/Error': '#AD0015',
'Text/Interactive/Placeholder': '#747474',
'Text/Brand/OnAccent/Heading': '#FFFFFF',
'Text/Feedback/Information Accent': '#284EA0',
'Text/Feedback/Succes Accent': '#348337',
'Text/Feedback/Warning Accent': '#D17308',
'Text/Feedback/Error Accent': '#AD0015',
'Text/Feedback/Neutral Accent': '#747474',
'Text/Feedback/Information': '#284EA0',
'Text/Feedback/Succes': '#348337',
'Text/Feedback/Warning': '#D17308',
'Text/Feedback/Error': '#AD0015',
'Text/Feedback/Neutral': '#747474',
'Text/Brand/OnAccent/Default': '#FFFFFF',
'Text/Brand/OnAccent/Accent': '#FFFFFF',
'Text/Brand/OnAccent/Accent Secondary': '#747474',
'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
'Text/Brand/OnPrimary 1/Default': '#FFFFFF',
'Text/Brand/OnPrimary 1/Accent': '#52AEFF',
'Text/Brand/OnPrimary 1/Accent': '#458AFF',
'Text/Brand/OnPrimary 2/Heading': '#FFFFFF',
'Text/Brand/OnPrimary 2/Default': '#FFFFFF',
'Text/Brand/OnPrimary 2/Accent': '#FF5A6A',
'Text/Brand/OnPrimary 2/Accent': '#FF374A',
'Text/Brand/OnPrimary 3/Heading': '#FFFFFF',
'Text/Brand/OnPrimary 3/Default': '#FFFFFF',
'Text/Brand/OnPrimary 3/Accent': '#FF5A6A',
'Text/Brand/OnPrimary 3/Accent': '#FF374A',
'Background/Primary': '#FCFCFC',
'Background/Secondary': '#FFFFFF',
'Surface/Primary/Default': '#FFFFFF',
@@ -192,14 +188,20 @@ export const theme = {
'Surface/Primary/Hover Light': '#e6e5e5',
'Surface/Primary/Hover Accent': '#E9E9E9',
'Surface/Primary/OnSurface/Default': '#F6F6F7',
'Surface/Primary/Disabled': '#E9E9E9',
'Surface/Primary/Disabled': '#1F1C1B1A',
'Surface/Secondary/Default': '#ECEEEF',
'Surface/Secondary/Default dark': '#E0E3E5',
'Surface/Secondary/Subtle': '#E0E3E5',
'Surface/Secondary/Hover': '#e0e2e3',
'Surface/Brand/Accent/Default': '#575757',
'Surface/Brand/Accent/OnAccent/Accent': '#E0E3E5',
'Surface/Brand/Accent/OnAccent/Accent Secondary': '#E0E3E5',
'Surface/Brand/Primary 1/Default': '#122937',
'Surface/Brand/Primary 2/Default': '#122937',
'Surface/Brand/Primary 2/Default': '#3E1118',
'Surface/Brand/Primary 2/OnSurface/Default': '#E0E3E5',
'Surface/Brand/Primary 2/OnSurface/Accent': '#E0E3E5',
'Surface/Brand/Primary 3/Default': '#3E1118',
'Surface/Brand/Primary 3/OnSurface/Default': '#FFFFFF',
'Surface/Brand/Primary 3/OnSurface/Accent': '#FFFFFF',
'Surface/UI Fill/Default': '#FFFFFF',
'Surface/UI Fill/Intense': '#262626',
'Surface/UI Fill/Active': '#262626',
@@ -210,18 +212,18 @@ export const theme = {
'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',
'Surface/Feedback/Information': '#284EA0',
'Surface/Feedback/Information light': '#E8F6FF',
'Surface/Feedback/Succes': '#348337',
'Surface/Feedback/Succes light': '#F3FCE8',
'Surface/Feedback/Warning': '#D17308',
'Surface/Feedback/Warning light': '#FFF8E3',
'Surface/Feedback/Error': '#AD0015',
'Surface/Feedback/Error light': '#FFEBEB',
'Surface/Feedback/Neutral': '#747474',
'Surface/Feedback/Neutral light': '#E9E9E9',
'Border/Default': '#D9D9D9',
'Border/Intense': '#BFBFBF',
'Border/Strong': '#BFBFBF',
'Border/Inverted': '#FFFFFF',
'Icon/Default': '#575757',
'Icon/Intense': '#1F1F1F',
@@ -244,8 +246,8 @@ export const theme = {
'Overlay/60': '#1F1C1B99',
'Overlay/80': '#1F1C1BCC',
'Overlay/90': '#1F1C1BE6',
'Component/Button/Brand/Primary/Fill/Default': '#122937',
'Component/Button/Brand/Primary/Fill/Hover': '#283b48',
'Component/Button/Brand/Primary/Fill/Default': '#3E1118',
'Component/Button/Brand/Primary/Fill/Hover': '#51262b',
'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A',
'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
@@ -256,17 +258,17 @@ export const theme = {
'Component/Button/Brand/Secondary/Fill/Default': '#FFFFFF00',
'Component/Button/Brand/Secondary/Fill/Hover': '#FFFFFF00',
'Component/Button/Brand/Secondary/Fill/Inverted': '#FFFFFF',
'Component/Button/Brand/Secondary/Fill/Hover Inverted': '#122937',
'Component/Button/Brand/Secondary/Fill/Hover Inverted': '#3E1118',
'Component/Button/Brand/Secondary/Fill/Disabled': '#1F1C1B1A',
'Component/Button/Brand/Secondary/On fill/Default': '#122937',
'Component/Button/Brand/Secondary/On fill/Hover': '#2C414D',
'Component/Button/Brand/Secondary/On fill/Default': '#3E1118',
'Component/Button/Brand/Secondary/On fill/Hover': '#5B353B',
'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
'Component/Button/Brand/Secondary/On fill/Hover inverted': '#b2b9be',
'Component/Button/Brand/Secondary/On fill/Hover inverted': '#c3b1b2',
'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/Default': '#3E1118',
'Component/Button/Brand/Secondary/Border/Hover': '#5B353B',
'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
'Component/Button/Brand/Secondary/Border/Hover inverted': '#818c95',
'Component/Button/Brand/Secondary/Border/Hover inverted': '#9d8081',
'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
'Component/Button/Brand/Tertiary/Fill/Default': '#0D57F3',
'Component/Button/Brand/Tertiary/Fill/Hover': '#1a54e7',
@@ -280,24 +282,24 @@ export const theme = {
'Component/Button/Inverted/Fill/Default': '#FFFFFF',
'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6',
'Component/Button/Inverted/Fill/Hover': '#e6e5e5',
'Component/Button/Inverted/Fill/Hover Inverted': '#122937',
'Component/Button/Inverted/Fill/Hover Inverted': '#3E1118',
'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A',
'Component/Button/Inverted/Border/Default': '#FFFFFF00',
'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
'Component/Button/Inverted/On fill/Default': '#122937',
'Component/Button/Inverted/On fill/Hover': '#283b48',
'Component/Button/Inverted/On fill/Default': '#3E1118',
'Component/Button/Inverted/On fill/Hover': '#51262b',
'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
'Border/Interactive/Default': '#BFBFBF',
'Border/Divider/Default': '#D9D9D9',
'Border/Divider/Subtle': '#E9E9E9',
'Border/Divider/Accent': '#BFBFBF',
'Border/Divider/Brand/OnAccent/Default': '#B6BDC1',
'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/Divider/Brand/OnPrimary 3/Default': '#FFC1C7',
'Border/Interactive/Active': '#262626',
'Border/Interactive/Focus': '#262626',
'Border/Interactive/Disabled': '#BFBFBF',
'Border/Interactive/Error': '#AD0015',
@@ -308,7 +310,7 @@ export const theme = {
'Component/Button/Muted/Fill/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/Hover Inverted': '#5B353B',
'Component/Button/Muted/On fill/Disabled': '#8C8C8C',
'Component/Button/Muted/Border/Default': '#FFFFFF1A',
'Component/Button/Muted/Border/Hover': '#ffffff30',

233
packages/design-system/lib/styles/partner-sas.css Normal file
View File

@@ -0,0 +1,233 @@
/* This file is generated, do not edit manually! */
.partner-sas {
/* Values */
--Component-Button-Brand-Primary-Fill-Hover: #34373d;
--Component-Button-Brand-Secondary-Border-Hover-inverted: #878a8d;
--Component-Button-Brand-Secondary-On-fill-Hover-inverted: #b6b7b9;
--Component-Button-Brand-Tertiary-Fill-Hover: #b8cad0;
--Component-Button-Brand-Tertiary-On-fill-Hover: #34373d;
--Component-Button-Inverted-Fill-Hover: #e6e5e5;
--Component-Button-Inverted-On-fill-Hover: #34373d;
--Component-Button-Muted-Border-Hover: #ffffff30;
--Component-Button-Muted-Fill-Hover-inverted: #f2f2f2;
--Surface-Brand-Accent-Default: #ffffff;
--Surface-Brand-Accent-OnAccent-Accent-Secondary: #ffffff;
--Surface-Brand-Accent-OnAccent-Accent: #ffffff;
--Surface-Brand-Accent-OnAccent-Default: #ffffff;
--Surface-Brand-Primary-1-Default: #fdfefd;
--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-Default: #ffffff;
--Surface-Brand-Primary-2-OnSurface-Accent: #ffffff;
--Surface-Brand-Primary-2-OnSurface-Default: #ffffff;
--Surface-Brand-Primary-3-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;
--Utilities-Gradients-10: #5b6e7f1a;
/* Aliases */
--Background-Primary: var(--Neutral-Opacity-White-100);
--Background-Secondary: var(--Neutral-Opacity-White-100);
--Border-Default: var(--Neutral-20);
--Border-Divider-Accent: var(--Neutral-30);
--Border-Divider-Brand-OnAccent-Default: var(--Neutral-Opacity-White-100);
--Border-Divider-Brand-OnPrimary-1-Default: 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-Interactive-Active: var(--Neutral-80);
--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-Inverted: var(--Neutral-Opacity-White-100);
--Border-Strong: var(--Neutral-30);
--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-Fill-Default: var(
--Signature-Grand-Hotel-Blue-Bayoux-100
);
--Component-Button-Brand-Primary-Fill-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-Fill-Default: var(
--Neutral-Opacity-White-0
);
--Component-Button-Brand-Secondary-Fill-Disabled: var(
--Neutral-Opacity-Black-10
);
--Component-Button-Brand-Secondary-Fill-Hover-Inverted: var(
--Signature-Grand-Hotel-Submarine-30
);
--Component-Button-Brand-Secondary-Fill-Hover: var(--Neutral-Opacity-White-0);
--Component-Button-Brand-Secondary-Fill-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-Fill-Default: var(
--Signature-Grand-Hotel-Submarine-30
);
--Component-Button-Brand-Tertiary-Fill-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-Fill-Default: var(--Neutral-Opacity-White-100);
--Component-Button-Inverted-Fill-Disabled: var(--Neutral-Opacity-Black-10);
--Component-Button-Inverted-Fill-Faded: var(--Neutral-Opacity-White-90);
--Component-Button-Inverted-Fill-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-Fill-Default: var(--Neutral-Opacity-White-100);
--Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20);
--Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-100);
--Component-Button-Muted-Fill-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-Accent: var(--Signature-Grand-Hotel-Careys-Pink-60);
--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);
--Overlay-10: var(--Neutral-Opacity-Black-10);
--Overlay-20: var(--Neutral-Opacity-Black-20);
--Overlay-30: 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-Feedback-Error-light: var(--Scandic-Red-00);
--Surface-Feedback-Error: var(--Scandic-Red-70);
--Surface-Feedback-Information-light: var(--Scandic-Blue-00);
--Surface-Feedback-Information: var(--Scandic-Blue-70);
--Surface-Feedback-Neutral-light: var(--Neutral-15);
--Surface-Feedback-Neutral: var(--Neutral-50);
--Surface-Feedback-Succes-light: var(--Scandic-Green-00);
--Surface-Feedback-Succes: var(--Scandic-Green-60);
--Surface-Feedback-Warning-light: var(--Scandic-Yellow-00);
--Surface-Feedback-Warning: var(--Scandic-Yellow-60);
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
--Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10);
--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-Subtle: var(--Signature-Grand-Hotel-Cloudy-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);
--Text-Accent-Primary: var(--Signature-Grand-Hotel-Careys-Pink-60);
--Text-Brand-OnAccent-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-90);
--Text-Default: var(--Neutral-90);
--Text-Feedback-Error: var(--Scandic-Red-70);
--Text-Feedback-Information: var(--Scandic-Blue-70);
--Text-Feedback-Neutral: var(--Neutral-50);
--Text-Feedback-Succes: var(--Scandic-Green-60);
--Text-Feedback-Warning: var(--Scandic-Yellow-60);
--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: var(--Signature-Grand-Hotel-Careys-Pink-60);
--Text-Interactive-Placeholder: var(--Neutral-50);
--Text-Interactive-Secondary-Hover: var(
--Signature-Grand-Hotel-Careys-Pink-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);
}

174
packages/design-system/lib/styles/partner-sas.js Normal file
View File

@@ -0,0 +1,174 @@
/* This file is generated, do not edit manually! */
export const theme = {
'Surface/Brand/Accent/Default': '#FFFFFF',
'Surface/Brand/Accent/OnAccent/Default': '#FFFFFF',
'Surface/Brand/Accent/OnAccent/Accent': '#FFFFFF',
'Surface/Brand/Accent/OnAccent/Accent Secondary': '#FFFFFF',
'Surface/Brand/Primary 1/Default': '#FDFEFD',
'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/Default': '#FFFFFF',
'Surface/Brand/Primary 2/OnSurface/Default': '#FFFFFF',
'Surface/Brand/Primary 2/OnSurface/Accent': '#FFFFFF',
'Surface/Brand/Primary 3/Default': '#FFFFFF',
'Surface/Brand/Primary 3/OnSurface/Default': '#FFFFFF',
'Surface/Brand/Primary 3/OnSurface/Accent': '#FFFFFF',
'Utilities/Gradients/10': '#5B6E7F1A',
'Text/Heading': '#1F1F1F',
'Text/Default': '#1F1F1F',
'Text/Secondary': '#575757',
'Text/Tertiary': '#747474',
'Text/Accent Primary': '#AA546B',
'Text/Inverted': '#FFFFFF',
'Text/Interactive/Default': '#21252B',
'Text/Interactive/Hover': '#AA546B',
'Text/Interactive/Secondary': '#AA546B',
'Text/Interactive/Secondary Hover': '#C27183',
'Text/Interactive/Disabled': '#8C8C8C',
'Text/Interactive/Focus': '#262626',
'Text/Interactive/Error': '#AD0015',
'Text/Interactive/Placeholder': '#747474',
'Text/Brand/OnAccent/Heading': '#1F1F1F',
'Text/Feedback/Information': '#284EA0',
'Text/Feedback/Succes': '#348337',
'Text/Feedback/Warning': '#D17308',
'Text/Feedback/Error': '#AD0015',
'Text/Feedback/Neutral': '#747474',
'Text/Brand/OnAccent/Default': '#1F1F1F',
'Text/Brand/OnAccent/Accent': '#1F1F1F',
'Text/Brand/OnAccent/Accent Secondary': '#747474',
'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': '#1F1F1F',
'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': '#1F1C1B1A',
'Surface/Secondary/Default': '#F7F6F5',
'Surface/Secondary/Subtle': '#EBEAE9',
'Surface/Secondary/Hover': '#ebeae9',
'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': '#284EA0',
'Surface/Feedback/Information light': '#E8F6FF',
'Surface/Feedback/Succes': '#348337',
'Surface/Feedback/Succes light': '#F3FCE8',
'Surface/Feedback/Warning': '#D17308',
'Surface/Feedback/Warning light': '#FFF8E3',
'Surface/Feedback/Error': '#AD0015',
'Surface/Feedback/Error light': '#FFEBEB',
'Surface/Feedback/Neutral': '#747474',
'Surface/Feedback/Neutral light': '#E9E9E9',
'Border/Default': '#D9D9D9',
'Border/Strong': '#BFBFBF',
'Border/Inverted': '#FFFFFF',
'Icon/Default': '#575757',
'Icon/Intense': '#1F1F1F',
'Icon/Accent': '#DBA7B1',
'Icon/Interactive/Default': '#21252B',
'Icon/Interactive/Secondary': '#AA546B',
'Icon/Interactive/Accent': '#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/30': '#1F1C1B33',
'Overlay/40': '#1F1C1B66',
'Overlay/60': '#1F1C1B99',
'Overlay/80': '#1F1C1BCC',
'Overlay/90': '#1F1C1BE6',
'Component/Button/Brand/Primary/Fill/Default': '#21252B',
'Component/Button/Brand/Primary/Fill/Hover': '#34373d',
'Component/Button/Brand/Primary/Fill/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/Fill/Default': '#FFFFFF00',
'Component/Button/Brand/Secondary/Fill/Hover': '#FFFFFF00',
'Component/Button/Brand/Secondary/Fill/Inverted': '#FFFFFF',
'Component/Button/Brand/Secondary/Fill/Hover Inverted': '#B0C4CB',
'Component/Button/Brand/Secondary/Fill/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/Hover inverted': '#b6b7b9',
'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': '#878a8d',
'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
'Component/Button/Brand/Tertiary/Fill/Default': '#B0C4CB',
'Component/Button/Brand/Tertiary/Fill/Hover': '#b8cad0',
'Component/Button/Brand/Tertiary/Fill/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/Fill/Default': '#FFFFFF',
'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6',
'Component/Button/Inverted/Fill/Hover': '#e6e5e5',
'Component/Button/Inverted/Fill/Hover Inverted': '#B0C4CB',
'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A',
'Component/Button/Inverted/Border/Default': '#FFFFFF00',
'Component/Button/Inverted/Border/Hover': '#FFFFFF1A',
'Component/Button/Inverted/Border/Disable': '#FFFFFF1A',
'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',
'Border/Interactive/Default': '#BFBFBF',
'Border/Divider/Default': '#D9D9D9',
'Border/Divider/Subtle': '#E9E9E9',
'Border/Divider/Accent': '#BFBFBF',
'Border/Divider/Brand/OnAccent/Default': '#FFFFFF',
'Border/Divider/Brand/OnPrimary 1/Default': '#FFFFFF',
'Border/Divider/Brand/OnPrimary 2/Default': '#FFFFFF',
'Border/Divider/Brand/OnPrimary 3/Default': '#FFFFFF',
'Border/Interactive/Active': '#262626',
'Border/Interactive/Focus': '#262626',
'Border/Interactive/Disabled': '#BFBFBF',
'Border/Interactive/Error': '#AD0015',
'Component/Button/Muted/Fill/Default': '#FFFFFF',
'Component/Button/Muted/Fill/Hover': '#FFFFFF',
'Component/Button/Muted/Fill/Disabled': '#FFFFFF',
'Component/Button/Muted/Fill/Hover inverted': '#f2f2f2',
'Component/Button/Muted/Fill/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',
}

74
packages/design-system/lib/styles/scandic-go.css
View File

@@ -142,19 +142,19 @@
--Body-Underline-sm-Size: var(--Impl-Text-size-4xs);
--Border-Default: var(--Neutral-20);
--Border-Divider-Accent: var(--Neutral-30);
--Border-Divider-Brand-OnAccent-Default: var(--Scandic-Go-Purple-90);
--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-Brand-OnPrimary-3-Default: var(--Scandic-Go-Purple-90);
--Border-Divider-Default: var(--Neutral-20);
--Border-Divider-Subtle: var(--Neutral-15);
--Border-Intense: var(--Neutral-30);
--Border-Interactive-Active: var(--Neutral-80);
--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-Selected: var(--Neutral-80);
--Border-Inverted: var(--Neutral-Opacity-White-100);
--Border-Strong: var(--Neutral-30);
--Component-Button-Brand-Primary-Border-Default: var(
--Neutral-Opacity-White-0
);
@@ -281,37 +281,37 @@
--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-Accent-OnAccent-Accent-Secondary: var(--Scandic-Go-Purple-90);
--Surface-Brand-Accent-OnAccent-Accent: var(--Scandic-Go-Purple-90);
--Surface-Brand-Accent-OnAccent-Default: var(--Scandic-Go-Purple-100);
--Surface-Brand-Primary-1-Default: var(--Scandic-Go-Purple-100);
--Surface-Brand-Primary-1-OnSurface-Accent-Secondary: var(
--Scandic-Go-Yellow-30
--Scandic-Go-Purple-100
);
--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-1-OnSurface-Default: var(--Scandic-Go-Yellow-30);
--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-Secondary: var(
--Scandic-Go-Yellow-30
);
--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-Brand-Primary-3-Default: var(--Scandic-Go-Purple-10);
--Surface-Brand-Primary-3-OnSurface-Accent: var(--Scandic-Go-Coral-50);
--Surface-Brand-Primary-3-OnSurface-Default: var(--Scandic-Go-Coral-50);
--Surface-Feedback-Error-light: var(--Scandic-Red-00);
--Surface-Feedback-Error: var(--Scandic-Red-70);
--Surface-Feedback-Information-light: var(--Scandic-Blue-00);
--Surface-Feedback-Information: var(--Scandic-Blue-70);
--Surface-Feedback-Neutral-light: var(--Neutral-15);
--Surface-Feedback-Neutral: var(--Neutral-50);
--Surface-Feedback-Succes-light: var(--Scandic-Green-00);
--Surface-Feedback-Succes: var(--Scandic-Green-60);
--Surface-Feedback-Warning-light: var(--Scandic-Yellow-00);
--Surface-Feedback-Warning: var(--Scandic-Yellow-60);
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
--Surface-Primary-Disabled: var(--Neutral-15);
--Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10);
--Surface-Primary-Hover-Accent: var(--Scandic-Go-Purple-10);
--Surface-Primary-OnSurface-Default: var(--Scandic-Go-Beige-0);
--Surface-Secondary-Default-dark: var(--Scandic-Go-Beige-20);
--Surface-Secondary-Default: var(--Scandic-Go-Beige-10);
--Surface-Secondary-Subtle: var(--Scandic-Go-Beige-20);
--Surface-UI-Fill-Active: var(--Neutral-80);
--Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
--Surface-UI-Fill-Disabled: var(--Neutral-15);
@@ -320,25 +320,25 @@
--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-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-1-Accent: var(--Scandic-Go-Purple-10);
--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(--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-Brand-OnPrimary-3-Accent: var(--Scandic-Go-Purple-100);
--Text-Brand-OnPrimary-3-Default: var(--Scandic-Go-Purple-100);
--Text-Brand-OnPrimary-3-Heading: var(--Scandic-Go-Purple-100);
--Text-Default: var(--Neutral-90);
--Text-Feedback-Error-Accent: var(--Scandic-Red-70);
--Text-Feedback-Information-Accent: var(--Scandic-Blue-70);
--Text-Feedback-Neutral-Accent: var(--Neutral-50);
--Text-Feedback-Succes-Accent: var(--Scandic-Green-60);
--Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
--Text-Feedback-Error: var(--Scandic-Red-70);
--Text-Feedback-Information: var(--Scandic-Blue-70);
--Text-Feedback-Neutral: var(--Neutral-50);
--Text-Feedback-Succes: var(--Scandic-Green-60);
--Text-Feedback-Warning: var(--Scandic-Yellow-60);
--Text-Heading: var(--Scandic-Go-Purple-100);
--Text-Interactive-Default: var(--Scandic-Go-Purple-100);
--Text-Interactive-Disabled: var(--Neutral-40);

72
packages/design-system/lib/styles/scandic-go.js
View File

@@ -154,7 +154,6 @@ export const theme = {
'Text/Secondary': '#575757',
'Text/Tertiary': '#747474',
'Text/Accent Primary': '#2D163A',
'Text/Accent Secondary': '#5E2A8C',
'Text/Inverted': '#FFFFFF',
'Text/Interactive/Default': '#2D163A',
'Text/Interactive/Hover': '#5E2A8C',
@@ -165,22 +164,23 @@ export const theme = {
'Text/Interactive/Error': '#AD0015',
'Text/Interactive/Placeholder': '#747474',
'Text/Brand/OnAccent/Heading': '#2D163A',
'Text/Feedback/Information Accent': '#284EA0',
'Text/Feedback/Succes Accent': '#348337',
'Text/Feedback/Warning Accent': '#D17308',
'Text/Feedback/Error Accent': '#AD0015',
'Text/Feedback/Neutral Accent': '#747474',
'Text/Feedback/Information': '#284EA0',
'Text/Feedback/Succes': '#348337',
'Text/Feedback/Warning': '#D17308',
'Text/Feedback/Error': '#AD0015',
'Text/Feedback/Neutral': '#747474',
'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/OnAccent/Accent Secondary': '#5E2A8C',
'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
'Text/Brand/OnPrimary 1/Default': '#FFFFFF',
'Text/Brand/OnPrimary 1/Accent': '#DCD7FF',
'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',
'Text/Brand/OnPrimary 3/Heading': '#2D163A',
'Text/Brand/OnPrimary 3/Default': '#2D163A',
'Text/Brand/OnPrimary 3/Accent': '#2D163A',
'Background/Primary': '#FFFEFA',
'Background/Secondary': '#FFFFFF',
'Surface/Primary/Default': '#FFFFFF',
@@ -188,22 +188,24 @@ export const theme = {
'Surface/Primary/Hover Light': '#e6e5e5',
'Surface/Primary/Hover Accent': '#DCD7FF',
'Surface/Primary/OnSurface/Default': '#FAF8F2',
'Surface/Primary/Disabled': '#E9E9E9',
'Surface/Primary/Disabled': '#1F1C1B1A',
'Surface/Secondary/Default': '#F0EDE4',
'Surface/Secondary/Default dark': '#E0DCCE',
'Surface/Secondary/Subtle': '#E0DCCE',
'Surface/Secondary/Hover': '#e4e1d9',
'Surface/Brand/Accent/Default': '#F5FF73',
'Surface/Brand/Primary 1/Default': '#DCD7FF',
'Surface/Brand/Primary 1/OnSurface/Default': '#2D163A',
'Surface/Brand/Accent/OnAccent/Default': '#2D163A',
'Surface/Brand/Accent/OnAccent/Accent': '#451F61',
'Surface/Brand/Accent/OnAccent/Accent Secondary': '#451F61',
'Surface/Brand/Primary 1/Default': '#2D163A',
'Surface/Brand/Primary 1/OnSurface/Default': '#F5FF73',
'Surface/Brand/Primary 1/OnSurface/Accent': '#FA3737',
'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#F5FF73',
'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#2D163A',
'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/Brand/Primary 3/OnSurface/Accent Secondary': '#F5FF73',
'Surface/Brand/Primary 3/Default': '#DCD7FF',
'Surface/Brand/Primary 3/OnSurface/Default': '#FA3737',
'Surface/Brand/Primary 3/OnSurface/Accent': '#FA3737',
'Surface/UI Fill/Default': '#FFFFFF',
'Surface/UI Fill/Intense': '#262626',
'Surface/UI Fill/Active': '#262626',
@@ -214,18 +216,18 @@ export const theme = {
'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',
'Surface/Feedback/Information': '#284EA0',
'Surface/Feedback/Information light': '#E8F6FF',
'Surface/Feedback/Succes': '#348337',
'Surface/Feedback/Succes light': '#F3FCE8',
'Surface/Feedback/Warning': '#D17308',
'Surface/Feedback/Warning light': '#FFF8E3',
'Surface/Feedback/Error': '#AD0015',
'Surface/Feedback/Error light': '#FFEBEB',
'Surface/Feedback/Neutral': '#747474',
'Surface/Feedback/Neutral light': '#E9E9E9',
'Border/Default': '#D9D9D9',
'Border/Intense': '#BFBFBF',
'Border/Strong': '#BFBFBF',
'Border/Inverted': '#FFFFFF',
'Icon/Default': '#575757',
'Icon/Intense': '#1F1F1F',
@@ -297,11 +299,11 @@ export const theme = {
'Border/Divider/Default': '#D9D9D9',
'Border/Divider/Subtle': '#E9E9E9',
'Border/Divider/Accent': '#BFBFBF',
'Border/Divider/Brand/OnAccent/Default': '#451F61',
'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/Divider/Brand/OnPrimary 3/Default': '#451F61',
'Border/Interactive/Active': '#262626',
'Border/Interactive/Focus': '#262626',
'Border/Interactive/Disabled': '#8C8C8C',
'Border/Interactive/Error': '#AD0015',

50
packages/design-system/lib/styles/scandic.css
View File

@@ -17,7 +17,7 @@
--Component-Button-Brand-Secondary-Border-Hover-inverted: #a87e83;
--Component-Button-Brand-Secondary-On-fill-Hover-inverted: #cbb0b3;
--Component-Button-Brand-Tertiary-Fill-Hover: #601e2d;
--Component-Button-Inverted-Fill-Hover: #e6e5e5;
--Component-Button-Inverted-Fill-Hover: #f2f2f2;
--Component-Button-Inverted-On-fill-Hover: #601e2d;
--Font-family-Scandic-Body: 'Fira sans';
--Font-family-Scandic-Decorative: 'Biro Script Plus';
@@ -169,19 +169,19 @@
--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-OnAccent-Default: var(--Scandic-Peach-80);
--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-Active: var(--Scandic-Beige-70);
--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-Selected: var(--Scandic-Beige-70);
--Border-Inverted: var(--Neutral-Opacity-White-100);
--Border-Strong: var(--Scandic-Beige-40);
--Component-Button-Brand-Primary-Border-Default: var(
--Neutral-Opacity-White-0
);
@@ -310,6 +310,9 @@
--Surface-Accent-4: var(--Scandic-Yellow-50);
--Surface-Accent-5: var(--Scandic-Blue-80);
--Surface-Brand-Accent-Default: var(--Scandic-Peach-30);
--Surface-Brand-Accent-OnAccent-Accent-Secondary: var(--Scandic-Peach-80);
--Surface-Brand-Accent-OnAccent-Accent: var(--Scandic-Red-Default);
--Surface-Brand-Accent-OnAccent-Default: var(--Scandic-Red-100);
--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);
@@ -318,34 +321,33 @@
--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-Secondary: var(--Scandic-Peach-80);
--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-Feedback-Error-light: var(--Scandic-Red-00);
--Surface-Feedback-Error: var(--Scandic-Red-70);
--Surface-Feedback-Information-light: var(--Scandic-Blue-00);
--Surface-Feedback-Information: var(--Scandic-Blue-70);
--Surface-Feedback-Neutral-light: var(--Scandic-Grey-10);
--Surface-Feedback-Neutral: var(--Scandic-Grey-60);
--Surface-Feedback-Succes-light: var(--Scandic-Green-00);
--Surface-Feedback-Succes: var(--Scandic-Green-60);
--Surface-Feedback-Warning-light: var(--Scandic-Yellow-00);
--Surface-Feedback-Warning: var(--Scandic-Yellow-60);
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
--Surface-Primary-Disabled: var(--Scandic-Grey-10);
--Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10);
--Surface-Primary-Hover-Accent: var(--Scandic-Peach-10);
--Surface-Primary-OnSurface-Default: var(--Scandic-Grey-00);
--Surface-Secondary-Default-dark: var(--Scandic-Beige-20);
--Surface-Secondary-Default: var(--Scandic-Beige-10);
--Surface-Secondary-Subtle: 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-Disabled: var(--Neutral-Opacity-Black-10);
--Surface-UI-Fill-Intense: var(--Scandic-Grey-100);
--Tag-Font-family: var(--Font-family-Scandic-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-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);
@@ -359,11 +361,11 @@
--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-Feedback-Error-Accent: var(--Scandic-Red-70);
--Text-Feedback-Information-Accent: var(--Scandic-Blue-70);
--Text-Feedback-Neutral-Accent: var(--Scandic-Grey-60);
--Text-Feedback-Succes-Accent: var(--Scandic-Green-60);
--Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
--Text-Feedback-Error: var(--Scandic-Red-70);
--Text-Feedback-Information: var(--Scandic-Blue-70);
--Text-Feedback-Neutral: var(--Scandic-Grey-60);
--Text-Feedback-Succes: var(--Scandic-Green-60);
--Text-Feedback-Warning: var(--Scandic-Yellow-60);
--Text-Heading: var(--Scandic-Red-100);
--Text-Interactive-Default: var(--Scandic-Red-100);
--Text-Interactive-Disabled: var(--Scandic-Grey-40);

50
packages/design-system/lib/styles/scandic.js
View File

@@ -183,7 +183,6 @@ export const theme = {
'Text/Secondary': '#57514E',
'Text/Tertiary': '#787472',
'Text/Accent Primary': '#CD0921',
'Text/Accent Secondary': '#8F4350',
'Text/Inverted': '#FFFFFF',
'Text/Interactive/Default': '#4D001B',
'Text/Interactive/Hover': '#8F4350',
@@ -194,13 +193,14 @@ export const theme = {
'Text/Interactive/Error': '#AD0015',
'Text/Interactive/Placeholder': '#787472',
'Text/Brand/OnAccent/Heading': '#4D001B',
'Text/Feedback/Information Accent': '#284EA0',
'Text/Feedback/Succes Accent': '#348337',
'Text/Feedback/Warning Accent': '#D17308',
'Text/Feedback/Error Accent': '#AD0015',
'Text/Feedback/Neutral Accent': '#787472',
'Text/Feedback/Information': '#284EA0',
'Text/Feedback/Succes': '#348337',
'Text/Feedback/Warning': '#D17308',
'Text/Feedback/Error': '#AD0015',
'Text/Feedback/Neutral': '#787472',
'Text/Brand/OnAccent/Default': '#26201E',
'Text/Brand/OnAccent/Accent': '#8F4350',
'Text/Brand/OnAccent/Accent Secondary': '#8F4350',
'Text/Brand/OnPrimary 1/Heading': '#4D001B',
'Text/Brand/OnPrimary 1/Default': '#26201E',
'Text/Brand/OnPrimary 1/Accent': '#CD0921',
@@ -217,11 +217,14 @@ export const theme = {
'Surface/Primary/Hover Light': '#e6e5e5',
'Surface/Primary/Hover Accent': '#F7E1D5',
'Surface/Primary/OnSurface/Default': '#F9F6F4',
'Surface/Primary/Disabled': '#EBE8E6',
'Surface/Primary/Disabled': '#1F1C1B1A',
'Surface/Secondary/Default': '#F2ECE6',
'Surface/Secondary/Default dark': '#E3D9D1',
'Surface/Secondary/Subtle': '#E3D9D1',
'Surface/Secondary/Hover': '#dad4cf',
'Surface/Brand/Accent/Default': '#F0C1B6',
'Surface/Brand/Accent/OnAccent/Default': '#4D001B',
'Surface/Brand/Accent/OnAccent/Accent': '#CD0921',
'Surface/Brand/Accent/OnAccent/Accent Secondary': '#8F4350',
'Surface/Brand/Primary 1/Default': '#F7E1D5',
'Surface/Brand/Primary 1/OnSurface/Default': '#4D001B',
'Surface/Brand/Primary 1/OnSurface/Accent': '#CD0921',
@@ -232,29 +235,28 @@ export const theme = {
'Surface/Brand/Primary 3/Default': '#4D001B',
'Surface/Brand/Primary 3/OnSurface/Default': '#F7E1D5',
'Surface/Brand/Primary 3/OnSurface/Accent': '#CD0921',
'Surface/Brand/Primary 3/OnSurface/Accent Secondary': '#8F4350',
'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/UI Fill/Disabled': '#1F1C1B1A',
'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',
'Surface/Feedback/Information': '#284EA0',
'Surface/Feedback/Information light': '#E8F6FF',
'Surface/Feedback/Succes': '#348337',
'Surface/Feedback/Succes light': '#F3FCE8',
'Surface/Feedback/Warning': '#D17308',
'Surface/Feedback/Warning light': '#FFF8E3',
'Surface/Feedback/Error': '#AD0015',
'Surface/Feedback/Error light': '#FFEBEB',
'Surface/Feedback/Neutral': '#787472',
'Surface/Feedback/Neutral light': '#EBE8E6',
'Border/Default': '#E3D9D1',
'Border/Intense': '#B8A79A',
'Border/Strong': '#B8A79A',
'Border/Inverted': '#FFFFFF',
'Icon/Default': '#57514E',
'Icon/Intense': '#26201E',
@@ -312,7 +314,7 @@ export const theme = {
'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
'Component/Button/Inverted/Fill/Default': '#FFFFFF',
'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6',
'Component/Button/Inverted/Fill/Hover': '#e6e5e5',
'Component/Button/Inverted/Fill/Hover': '#f2f2f2',
'Component/Button/Inverted/Fill/Hover Inverted': '#4D001B',
'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A',
'Component/Button/Inverted/Border/Default': '#FFFFFF00',
@@ -326,11 +328,11 @@ export const theme = {
'Border/Divider/Default': '#E3D9D1',
'Border/Divider/Subtle': '#F2ECE6',
'Border/Divider/Accent': '#F0C1B6',
'Border/Divider/Brand/OnAccent/Default': '#8F4350',
'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/Active': '#6B584D',
'Border/Interactive/Focus': '#26201E',
'Border/Interactive/Disabled': '#A8A4A2',
'Border/Interactive/Error': '#AD0015',

381
packages/design-system/lib/styles/the-dock.css Normal file
View File

@@ -0,0 +1,381 @@
/* This file is generated, do not edit manually! */
.the-dock {
/* 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-md-Text-Decoration: underline;
--Body-Underline-sm-Font-fallback: sans-serif;
--Body-Underline-sm-Letter-spacing: 0.2px;
--Body-Underline-sm-Text-Decoration: underline;
--Component-Button-Brand-Primary-Fill-Hover: #512725;
--Component-Button-Brand-Secondary-Border-Hover-inverted: #9d807e;
--Component-Button-Brand-Secondary-On-fill-Hover-inverted: #c4b1af;
--Component-Button-Brand-Tertiary-Fill-Hover: #f3e4c8;
--Component-Button-Brand-Tertiary-On-fill-Hover: #512725;
--Component-Button-Inverted-Fill-Hover: #e6e5e5;
--Component-Button-Inverted-On-fill-Hover: #512725;
--Component-Button-Muted-Border-Hover: #ffffff30;
--Component-Button-Muted-Fill-Hover-inverted: #f2f2f2;
--Font-family-The-Dock-Body: 'Fira sans';
--Font-family-The-Dock-Decorative: 'Beausite Classic';
--Font-family-The-Dock-Title: 'Reckless';
--Label-Font-fallback: sans-serif;
--Label-Letter-spacing: 0.17px;
--Link-md-Font-fallback: sans-serif;
--Link-md-Letter-spacing: 0.19px;
--Link-md-Text-Decoration: underline;
--Link-sm-Font-fallback: sans-serif;
--Link-sm-Letter-spacing: 0.2px;
--Link-sm-Text-Decoration: underline;
--Signature-The-Dock-Artic-Oker-60: #ffb839;
--Signature-The-Dock-Linen-White-00: #fdfcf9;
--Signature-The-Dock-Linen-White-10: #faf7f1;
--Signature-The-Dock-Linen-White-20: #f7f1e8;
--Signature-The-Dock-Rose-Copper-80: #654141;
--Signature-The-Dock-Rose-Copper-90: #3e1212;
--Signature-The-Dock-Sandbank-Beige-20: #f2e1c2;
--Signature-The-Dock-Signal-Blue-50: #06237c;
--Signature-The-Dock-Signal-Blue-90: #030f34;
--Signature-The-Dock-Signal-Red-50: #fc2826;
--Signature-The-Dock-Signal-Red-60: #d62220;
--Signature-The-Dock-Signal-Red-80: #b31c1b;
--Signature-The-Dock-Tundra-Mint-30: #b5cc87;
--Signature-The-Dock-Tundra-Mint-90: #364324;
--Surface-Brand-Accent-OnAccent-Default: #ffffff;
--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-Primary-Hover-Light: #e6e5e5;
--Surface-Primary-Hover: #f2f2f2;
--Surface-Secondary-Hover: #ebe5dc;
--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: 0px;
--Title-Decorative-lg-Text-Transform: uppercase;
--Title-Decorative-md-Font-fallback: 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.28px;
--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.24px;
--Title-lg-Text-Transform: none;
--Title-md-Font-fallback: Serif;
--Title-md-Letter-spacing: 0px;
--Title-md-LowCase-Font-fallback: Serif;
--Title-md-LowCase-Letter-spacing: 0px;
--Title-md-LowCase-Text-Transform: none;
--Title-md-Text-Transform: none;
--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: none;
--Title-sm-Text-Transform: none;
--Title-xs-Font-fallback: Serif;
--Title-xs-Letter-spacing: 0.36px;
--Title-xs-Text-Transform: none;
--Utilities-Gradients-10: #f2e1c21a;
/* Aliases */
--Background-Primary: var(--Signature-The-Dock-Linen-White-00);
--Background-Secondary: var(--Neutral-Opacity-White-100);
--Body-Lead-text-Font-family: var(--Font-family-The-Dock-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-The-Dock-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-The-Dock-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-The-Dock-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-The-Dock-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-OnAccent-Default: var(
--Signature-The-Dock-Rose-Copper-90
);
--Border-Divider-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
--Border-Divider-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
--Border-Divider-Brand-OnPrimary-3-Default: var(
--Signature-The-Dock-Linen-White-20
);
--Border-Divider-Default: var(--Neutral-20);
--Border-Divider-Subtle: var(--Neutral-15);
--Border-Interactive-Active: var(--Neutral-80);
--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-Inverted: var(--Neutral-Opacity-White-100);
--Border-Strong: var(--Neutral-30);
--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-Fill-Default: var(
--Signature-The-Dock-Rose-Copper-90
);
--Component-Button-Brand-Primary-Fill-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-The-Dock-Rose-Copper-90
);
--Component-Button-Brand-Secondary-Border-Disabled: var(
--Neutral-Opacity-Black-10
);
--Component-Button-Brand-Secondary-Border-Hover: var(
--Signature-The-Dock-Rose-Copper-80
);
--Component-Button-Brand-Secondary-Border-Inverted: var(
--Neutral-Opacity-White-100
);
--Component-Button-Brand-Secondary-Fill-Default: var(
--Neutral-Opacity-White-0
);
--Component-Button-Brand-Secondary-Fill-Disabled: var(
--Neutral-Opacity-Black-10
);
--Component-Button-Brand-Secondary-Fill-Hover-Inverted: var(
--Signature-The-Dock-Rose-Copper-90
);
--Component-Button-Brand-Secondary-Fill-Hover: var(--Neutral-Opacity-White-0);
--Component-Button-Brand-Secondary-Fill-Inverted: var(
--Neutral-Opacity-White-100
);
--Component-Button-Brand-Secondary-On-fill-Default: var(
--Signature-The-Dock-Rose-Copper-90
);
--Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
--Component-Button-Brand-Secondary-On-fill-Hover: var(
--Signature-The-Dock-Rose-Copper-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-Fill-Default: var(
--Signature-The-Dock-Sandbank-Beige-20
);
--Component-Button-Brand-Tertiary-Fill-Disabled: var(
--Neutral-Opacity-Black-10
);
--Component-Button-Brand-Tertiary-On-fill-Default: var(
--Signature-The-Dock-Rose-Copper-90
);
--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-Fill-Default: var(--Neutral-Opacity-White-100);
--Component-Button-Inverted-Fill-Disabled: var(--Neutral-Opacity-Black-10);
--Component-Button-Inverted-Fill-Faded: var(--Neutral-Opacity-White-90);
--Component-Button-Inverted-Fill-Hover-Inverted: var(
--Signature-The-Dock-Sandbank-Beige-20
);
--Component-Button-Inverted-On-fill-Default: var(
--Signature-The-Dock-Rose-Copper-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-Fill-Default: var(--Neutral-Opacity-White-100);
--Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20);
--Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-100);
--Component-Button-Muted-Fill-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-The-Dock-Rose-Copper-80
);
--Component-Button-Muted-On-fill-Inverted: var(--Neutral-Opacity-White-100);
--Icon-Accent: var(--Signature-The-Dock-Signal-Red-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-Accent: var(--Signature-The-Dock-Signal-Red-60);
--Icon-Interactive-Default: var(--Neutral-90);
--Icon-Interactive-Disabled: var(--Neutral-30);
--Icon-Interactive-Placeholder: var(--Neutral-50);
--Icon-Interactive-Secondary: var(--Signature-The-Dock-Signal-Red-60);
--Icon-Inverted: var(--Neutral-Opacity-White-100);
--Label-Font-family: var(--Font-family-The-Dock-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-The-Dock-Body);
--Link-md-Font-weight: var(--Font-weight-Medium);
--Link-md-Size: var(--Impl-Text-size-3xs);
--Link-sm-Font-family: var(--Font-family-The-Dock-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-30: 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-The-Dock-Signal-Red-60);
--Surface-Accent-2: var(--Signature-The-Dock-Signal-Blue-50);
--Surface-Accent-3: var(--Signature-The-Dock-Tundra-Mint-90);
--Surface-Accent-4: var(--Signature-The-Dock-Artic-Oker-60);
--Surface-Accent-5: var(--Signature-The-Dock-Signal-Blue-90);
--Surface-Brand-Accent-Default: var(--Signature-The-Dock-Tundra-Mint-30);
--Surface-Brand-Accent-OnAccent-Accent-Secondary: var(
--Signature-The-Dock-Signal-Red-80
);
--Surface-Brand-Accent-OnAccent-Accent: var(
--Signature-The-Dock-Signal-Red-80
);
--Surface-Brand-Primary-1-Default: var(
--Signature-The-Dock-Sandbank-Beige-20
);
--Surface-Brand-Primary-2-Default: var(--Signature-The-Dock-Rose-Copper-90);
--Surface-Brand-Primary-3-Default: var(--Signature-The-Dock-Rose-Copper-90);
--Surface-Brand-Primary-3-OnSurface-Accent: var(
--Signature-The-Dock-Sandbank-Beige-20
);
--Surface-Brand-Primary-3-OnSurface-Default: var(
--Signature-The-Dock-Sandbank-Beige-20
);
--Surface-Feedback-Error-light: var(--Scandic-Red-00);
--Surface-Feedback-Error: var(--Scandic-Red-70);
--Surface-Feedback-Information-light: var(--Scandic-Blue-00);
--Surface-Feedback-Information: var(--Scandic-Blue-70);
--Surface-Feedback-Neutral-light: var(--Neutral-15);
--Surface-Feedback-Neutral: var(--Neutral-50);
--Surface-Feedback-Succes-light: var(--Scandic-Green-00);
--Surface-Feedback-Succes: var(--Scandic-Green-60);
--Surface-Feedback-Warning-light: var(--Scandic-Yellow-00);
--Surface-Feedback-Warning: var(--Scandic-Yellow-60);
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
--Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10);
--Surface-Primary-Hover-Accent: var(--Neutral-15);
--Surface-Primary-OnSurface-Default: var(--Signature-The-Dock-Linen-White-00);
--Surface-Secondary-Default: var(--Signature-The-Dock-Linen-White-20);
--Surface-Secondary-Subtle: var(--Signature-The-Dock-Sandbank-Beige-20);
--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-The-Dock-Title);
--Tag-Font-weight: var(--Font-weight-Medium);
--Tag-Size: var(--Impl-Text-size-5xs);
--Text-Accent-Primary: var(--Signature-The-Dock-Signal-Red-60);
--Text-Brand-OnAccent-Accent-Secondary: var(
--Signature-The-Dock-Signal-Red-60
);
--Text-Brand-OnAccent-Accent: var(--Signature-The-Dock-Tundra-Mint-90);
--Text-Brand-OnAccent-Default: var(--Neutral-90);
--Text-Brand-OnAccent-Heading: var(--Neutral-90);
--Text-Brand-OnPrimary-1-Accent: var(--Signature-The-Dock-Rose-Copper-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-Feedback-Error: var(--Scandic-Red-70);
--Text-Feedback-Information: var(--Scandic-Blue-70);
--Text-Feedback-Neutral: var(--Neutral-50);
--Text-Feedback-Succes: var(--Scandic-Green-60);
--Text-Feedback-Warning: var(--Scandic-Yellow-60);
--Text-Heading: var(--Signature-The-Dock-Rose-Copper-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: var(--Neutral-70);
--Text-Interactive-Placeholder: var(--Neutral-50);
--Text-Interactive-Secondary-Hover: var(--Signature-The-Dock-Signal-Red-50);
--Text-Interactive-Secondary: var(--Signature-The-Dock-Signal-Red-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-The-Dock-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-The-Dock-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-The-Dock-Title);
--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-The-Dock-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-The-Dock-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-The-Dock-Title);
--Title-lg-Font-weight: var(--Font-weight-Regular);
--Title-lg-Size: var(--Impl-Text-size-4xl);
--Title-md-Font-family: var(--Font-family-The-Dock-Title);
--Title-md-Font-weight: var(--Font-weight-Regular);
--Title-md-LowCase-Font-family: var(--Font-family-The-Dock-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-The-Dock-Title);
--Title-sm-Font-weight: var(--Font-weight-Regular);
--Title-sm-LowCase-Font-family: var(--Font-family-The-Dock-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-The-Dock-Title);
--Title-xs-Font-weight: var(--Font-weight-Regular);
--Title-xs-Size: var(--Impl-Text-size-sm);
}

285
packages/design-system/lib/styles/the-dock.js Normal file
View File

@@ -0,0 +1,285 @@
/* This file is generated, do not edit manually! */
export const theme = {
'Signature/The Dock/Rose Copper/80': '#654141',
'Signature/The Dock/Rose Copper/90': '#3E1212',
'Signature/The Dock/Linen White/00': '#FDFCF9',
'Signature/The Dock/Linen White/10': '#FAF7F1',
'Signature/The Dock/Linen White/20': '#F7F1E8',
'Signature/The Dock/Sandbank Beige/20': '#F2E1C2',
'Signature/The Dock/Tundra Mint/30': '#B5CC87',
'Signature/The Dock/Tundra Mint/90': '#364324',
'Signature/The Dock/Signal Red/50': '#FC2826',
'Signature/The Dock/Signal Red/60': '#D62220',
'Signature/The Dock/Signal Red/80': '#B31C1B',
'Signature/The Dock/Signal Blue/50': '#06237C',
'Signature/The Dock/Signal Blue/90': '#030F34',
'Signature/The Dock/Artic Oker/60': '#FFB839',
'Title/lg/Letter spacing': -0.24,
'Title/lg/Font fallback': 'Serif',
'Title/lg/Text-Transform': 'none',
'Title/md/Font fallback': 'Serif',
'Title/sm/Letter spacing': 0.56,
'Title/sm/Font fallback': 'Serif',
'Title/sm/Text-Transform': 'none',
'Title/Decorative/lg/Font fallback': 'Serif',
'Title/Decorative/lg/Text-Transform': 'uppercase',
'Title/Decorative/md/Letter spacing': 0.32,
'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.28,
'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': 'none',
'Title/xs/Letter spacing': 0.36,
'Title/xs/Font fallback': 'Serif',
'Title/xs/Text-Transform': 'none',
'Title/md/Text-Transform': 'none',
'Title/md/LowCase/Font fallback': 'Serif',
'Title/md/LowCase/Text-Transform': 'none',
'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/md/Text-Decoration': 'underline',
'Link/sm/Font fallback': 'sans-serif',
'Link/sm/Letter spacing': 0.2,
'Link/sm/Text-Decoration': 'underline',
'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/md/Text-Decoration': 'underline',
'Body/Underline/sm/Font fallback': 'sans-serif',
'Body/Underline/sm/Letter spacing': 0.2,
'Body/Underline/sm/Text-Decoration': 'underline',
'Surface/Brand/Accent/OnAccent/Default': '#FFFFFF',
'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',
'Utilities/Gradients/10': '#F2E1C21A',
'Font family/The Dock/Title': 'Reckless',
'Font family/The Dock/Body': 'Fira sans',
'Font family/The Dock/Decorative': 'Beausite Classic',
'Title/lg/Font weight': 400,
'Title/lg/Font family': 'Reckless',
'Title/md/Font weight': 400,
'Title/md/Font family': 'Reckless',
'Title/sm/Font weight': 400,
'Title/sm/Font family': 'Reckless',
'Title/sm/LowCase/Font weight': 400,
'Title/sm/LowCase/Font family': 'Reckless',
'Title/Decorative/lg/Font weight': 400,
'Title/Decorative/lg/Font family': 'Beausite Classic',
'Title/Decorative/md/Font weight': 400,
'Title/Decorative/md/Font family': 'Beausite Classic',
'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': 'Reckless',
'Title/xs/Font weight': 400,
'Title/xs/Font family': 'Reckless',
'Title/md/LowCase/Font weight': 400,
'Title/md/LowCase/Font family': 'Reckless',
'Tag/Font weight': 500,
'Tag/Font family': 'Reckless',
'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': '#3E1212',
'Text/Default': '#1F1F1F',
'Text/Secondary': '#575757',
'Text/Tertiary': '#747474',
'Text/Accent Primary': '#D62220',
'Text/Inverted': '#FFFFFF',
'Text/Interactive/Default': '#1F1F1F',
'Text/Interactive/Hover': '#454545',
'Text/Interactive/Secondary': '#D62220',
'Text/Interactive/Secondary Hover': '#FC2826',
'Text/Interactive/Disabled': '#8C8C8C',
'Text/Interactive/Focus': '#262626',
'Text/Interactive/Error': '#AD0015',
'Text/Interactive/Placeholder': '#747474',
'Text/Brand/OnAccent/Heading': '#1F1F1F',
'Text/Feedback/Information': '#284EA0',
'Text/Feedback/Succes': '#348337',
'Text/Feedback/Warning': '#D17308',
'Text/Feedback/Error': '#AD0015',
'Text/Feedback/Neutral': '#747474',
'Text/Brand/OnAccent/Default': '#1F1F1F',
'Text/Brand/OnAccent/Accent': '#364324',
'Text/Brand/OnAccent/Accent Secondary': '#D62220',
'Text/Brand/OnPrimary 1/Heading': '#1F1F1F',
'Text/Brand/OnPrimary 1/Default': '#1F1F1F',
'Text/Brand/OnPrimary 1/Accent': '#3E1212',
'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': '#FDFCF9',
'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': '#FDFCF9',
'Surface/Primary/Disabled': '#1F1C1B1A',
'Surface/Secondary/Default': '#F7F1E8',
'Surface/Secondary/Subtle': '#F2E1C2',
'Surface/Secondary/Hover': '#ebe5dc',
'Surface/Brand/Accent/Default': '#B5CC87',
'Surface/Brand/Accent/OnAccent/Accent': '#B31C1B',
'Surface/Brand/Accent/OnAccent/Accent Secondary': '#B31C1B',
'Surface/Brand/Primary 1/Default': '#F2E1C2',
'Surface/Brand/Primary 2/Default': '#3E1212',
'Surface/Brand/Primary 3/Default': '#3E1212',
'Surface/Brand/Primary 3/OnSurface/Default': '#F2E1C2',
'Surface/Brand/Primary 3/OnSurface/Accent': '#F2E1C2',
'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': '#D62220',
'Surface/Accent/2': '#06237C',
'Surface/Accent/3': '#364324',
'Surface/Accent/4': '#FFB839',
'Surface/Accent/5': '#030F34',
'Surface/Feedback/Information': '#284EA0',
'Surface/Feedback/Information light': '#E8F6FF',
'Surface/Feedback/Succes': '#348337',
'Surface/Feedback/Succes light': '#F3FCE8',
'Surface/Feedback/Warning': '#D17308',
'Surface/Feedback/Warning light': '#FFF8E3',
'Surface/Feedback/Error': '#AD0015',
'Surface/Feedback/Error light': '#FFEBEB',
'Surface/Feedback/Neutral': '#747474',
'Surface/Feedback/Neutral light': '#E9E9E9',
'Border/Default': '#D9D9D9',
'Border/Strong': '#BFBFBF',
'Border/Inverted': '#FFFFFF',
'Icon/Default': '#575757',
'Icon/Intense': '#1F1F1F',
'Icon/Accent': '#FC2826',
'Icon/Interactive/Default': '#1F1F1F',
'Icon/Interactive/Secondary': '#D62220',
'Icon/Interactive/Accent': '#D62220',
'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/30': '#1F1C1B33',
'Overlay/40': '#1F1C1B66',
'Overlay/60': '#1F1C1B99',
'Overlay/80': '#1F1C1BCC',
'Overlay/90': '#1F1C1BE6',
'Component/Button/Brand/Primary/Fill/Default': '#3E1212',
'Component/Button/Brand/Primary/Fill/Hover': '#512725',
'Component/Button/Brand/Primary/Fill/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/Fill/Default': '#FFFFFF00',
'Component/Button/Brand/Secondary/Fill/Hover': '#FFFFFF00',
'Component/Button/Brand/Secondary/Fill/Inverted': '#FFFFFF',
'Component/Button/Brand/Secondary/Fill/Hover Inverted': '#3E1212',
'Component/Button/Brand/Secondary/Fill/Disabled': '#1F1C1B1A',
'Component/Button/Brand/Secondary/On fill/Default': '#3E1212',
'Component/Button/Brand/Secondary/On fill/Hover': '#654141',
'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
'Component/Button/Brand/Secondary/On fill/Hover inverted': '#c4b1af',
'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
'Component/Button/Brand/Secondary/Border/Default': '#3E1212',
'Component/Button/Brand/Secondary/Border/Hover': '#654141',
'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
'Component/Button/Brand/Secondary/Border/Hover inverted': '#9d807e',
'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
'Component/Button/Brand/Tertiary/Fill/Default': '#F2E1C2',
'Component/Button/Brand/Tertiary/Fill/Hover': '#f3e4c8',
'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A',
'Component/Button/Brand/Tertiary/On fill/Default': '#3E1212',
'Component/Button/Brand/Tertiary/On fill/Hover': '#512725',
'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/Fill/Default': '#FFFFFF',
'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6',
'Component/Button/Inverted/Fill/Hover': '#e6e5e5',
'Component/Button/Inverted/Fill/Hover Inverted': '#F2E1C2',
'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A',
'Component/Button/Inverted/Border/Default': '#FFFFFF00',
'Component/Button/Inverted/Border/Hover': '#FFFFFF1A',
'Component/Button/Inverted/Border/Disable': '#FFFFFF1A',
'Component/Button/Inverted/On fill/Default': '#3E1212',
'Component/Button/Inverted/On fill/Hover': '#512725',
'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
'Border/Interactive/Default': '#BFBFBF',
'Border/Divider/Default': '#D9D9D9',
'Border/Divider/Subtle': '#E9E9E9',
'Border/Divider/Accent': '#BFBFBF',
'Border/Divider/Brand/OnAccent/Default': '#3E1212',
'Border/Divider/Brand/OnPrimary 1/Default': '#FFFFFF',
'Border/Divider/Brand/OnPrimary 2/Default': '#FFFFFF',
'Border/Divider/Brand/OnPrimary 3/Default': '#F7F1E8',
'Border/Interactive/Active': '#262626',
'Border/Interactive/Focus': '#262626',
'Border/Interactive/Disabled': '#BFBFBF',
'Border/Interactive/Error': '#AD0015',
'Component/Button/Muted/Fill/Default': '#FFFFFF',
'Component/Button/Muted/Fill/Hover': '#FFFFFF',
'Component/Button/Muted/Fill/Disabled': '#FFFFFF',
'Component/Button/Muted/Fill/Hover inverted': '#f2f2f2',
'Component/Button/Muted/Fill/Disabled inverted': '#D9D9D9',
'Component/Button/Muted/On fill/Default': '#1F1F1F',
'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
'Component/Button/Muted/On fill/Hover Inverted': '#654141',
'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',
}

2201
packages/design-system/lib/tokens/index.ts
View File

File diff suppressed because it is too large Load Diff

11
packages/design-system/lib/tokens/theDock.mdx Normal file
View File

@@ -0,0 +1,11 @@
import { Meta } from '@storybook/addon-docs/blocks'
import { Colors } from './Colors'
import { theDock } from '.'
<Meta title="Global/Colors/The Dock" />
# Colors: The Dock
<Colors theme={theDock} />