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

feat: update links default color to match design documents

Browse Source
This commit is contained in:
Christian Andolf
2025-05-27 16:54:09 +02:00
parent 7694a188da
commit b3b3704c86
74 changed files with 623 additions and 699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -97,7 +97,8 @@
--Space-x5: 40px;
--Space-x6: 48px;
--Space-x7: 56px;
--Space-x8: 72px;
--Space-x8: 64px;
--Space-x9: 72px;
/* Aliases */
--Text-size-2xl: var(--Size-800-36);

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

@@ -92,7 +92,8 @@ export const theme = {
'Space/x5': 40,
'Space/x6': 48,
'Space/x7': 56,
'Space/x8': 72,
'Space/x8': 64,
'Space/x9': 72,
'Icon/2xs': 16,
'Icon/xs': 20,
'Icon/sm': 24,

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

@@ -69,6 +69,7 @@
--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;
@@ -146,7 +147,6 @@
--Border-Interactive-Disabled: var(--Neutral-30);
--Border-Interactive-Error: var(--Scandic-Red-70);
--Border-Interactive-Focus: var(--Neutral-80);
--Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
--Border-Interactive-Selected: var(--Neutral-80);
--Border-Inverted: var(--Neutral-Opacity-White-100);
--Component-Button-Brand-Primary-Border-Default: var(
@@ -345,10 +345,11 @@
--Text-Interactive-Disabled: var(--Neutral-40);
--Text-Interactive-Error: var(--Scandic-Red-70);
--Text-Interactive-Focus: var(--Neutral-80);
--Text-Interactive-Hover-Secondary: var(
--Text-Interactive-Hover: var(--Signature-Downtown-Camper-Russet-80);
--Text-Interactive-Placeholder: var(--Neutral-50);
--Text-Interactive-Secondary-Hover: var(
--Signature-Downtown-Camper-Russet-60
);
--Text-Interactive-Placeholder: var(--Neutral-50);
--Text-Interactive-Secondary: var(--Signature-Downtown-Camper-Russet-80);
--Text-Inverted: var(--Neutral-Opacity-White-100);
--Text-Secondary: var(--Neutral-60);

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

@@ -94,6 +94,7 @@ export const theme = {
'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',
@@ -149,8 +150,9 @@ export const theme = {
'Text/Accent Secondary': '#747474',
'Text/Inverted': '#FFFFFF',
'Text/Interactive/Default': '#1F1F1F',
'Text/Interactive/Hover': '#834722',
'Text/Interactive/Secondary': '#834722',
'Text/Interactive/Hover Secondary': '#BB7524',
'Text/Interactive/Secondary Hover': '#BB7524',
'Text/Interactive/Disabled': '#8C8C8C',
'Text/Interactive/Focus': '#262626',
'Text/Interactive/Error': '#AD0015',
@@ -288,7 +290,6 @@ export const theme = {
'Border/Interactive/Focus': '#262626',
'Border/Interactive/Disabled': '#BFBFBF',
'Border/Interactive/Error': '#AD0015',
'Border/Interactive/KeyboardFocus': '#5B8FD4',
'Component/Button/Muted/Fill/Default': '#FFFFFF00',
'Component/Button/Muted/Fill/Hover': '#FFFFFF0D',
'Component/Button/Muted/Fill/Disabled': '#FFFFFF1A',

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

@@ -51,6 +51,7 @@
--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;
@@ -127,7 +128,6 @@
--Border-Interactive-Disabled: var(--Neutral-30);
--Border-Interactive-Error: var(--Scandic-Red-70);
--Border-Interactive-Focus: var(--Neutral-80);
--Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
--Border-Interactive-Selected: var(--Neutral-80);
--Border-Inverted: var(--Neutral-Opacity-White-100);
--Component-Button-Brand-Primary-Border-Default: var(
@@ -327,10 +327,11 @@
--Text-Interactive-Disabled: var(--Neutral-40);
--Text-Interactive-Error: var(--Scandic-Red-70);
--Text-Interactive-Focus: var(--Neutral-80);
--Text-Interactive-Hover-Secondary: var(
--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-Placeholder: var(--Neutral-50);
--Text-Interactive-Secondary: var(--Signature-Grand-Hotel-Careys-Pink-60);
--Text-Inverted: var(--Neutral-Opacity-White-100);
--Text-Secondary: var(--Neutral-60);

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

@@ -74,6 +74,7 @@ export const theme = {
'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',
@@ -129,8 +130,9 @@ export const theme = {
'Text/Accent Secondary': '#747474',
'Text/Inverted': '#FFFFFF',
'Text/Interactive/Default': '#21252B',
'Text/Interactive/Hover': '#AA546B',
'Text/Interactive/Secondary': '#AA546B',
'Text/Interactive/Hover Secondary': '#C27183',
'Text/Interactive/Secondary Hover': '#C27183',
'Text/Interactive/Disabled': '#8C8C8C',
'Text/Interactive/Focus': '#262626',
'Text/Interactive/Error': '#AD0015',
@@ -268,7 +270,6 @@ export const theme = {
'Border/Interactive/Focus': '#262626',
'Border/Interactive/Disabled': '#BFBFBF',
'Border/Interactive/Error': '#AD0015',
'Border/Interactive/KeyboardFocus': '#5B8FD4',
'Component/Button/Muted/Fill/Default': '#FFFFFF',
'Component/Button/Muted/Fill/Hover': '#FFFFFF',
'Component/Button/Muted/Fill/Disabled': '#FFFFFF',

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

@@ -69,6 +69,7 @@
--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;
@@ -146,7 +147,6 @@
--Border-Interactive-Disabled: var(--Neutral-30);
--Border-Interactive-Error: var(--Scandic-Red-70);
--Border-Interactive-Focus: var(--Neutral-80);
--Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
--Border-Interactive-Selected: var(--Neutral-80);
--Border-Inverted: var(--Neutral-Opacity-White-100);
--Component-Button-Brand-Primary-Border-Default: var(
@@ -331,10 +331,11 @@
--Text-Interactive-Disabled: var(--Neutral-40);
--Text-Interactive-Error: var(--Scandic-Red-70);
--Text-Interactive-Focus: var(--Neutral-80);
--Text-Interactive-Hover-Secondary: var(
--Text-Interactive-Hover: var(--Signature-Haymarket-Antique-Brass-60);
--Text-Interactive-Placeholder: var(--Neutral-50);
--Text-Interactive-Secondary-Hover: var(
--Signature-Haymarket-Antique-Brass-40
);
--Text-Interactive-Placeholder: var(--Neutral-50);
--Text-Interactive-Secondary: var(--Signature-Haymarket-Antique-Brass-60);
--Text-Inverted: var(--Neutral-Opacity-White-100);
--Text-Secondary: var(--Neutral-60);

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

@@ -94,6 +94,7 @@ export const theme = {
'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',
@@ -149,8 +150,9 @@ export const theme = {
'Text/Accent Secondary': '#805E45',
'Text/Inverted': '#FFFFFF',
'Text/Interactive/Default': '#1F1F1F',
'Text/Interactive/Hover': '#805E45',
'Text/Interactive/Secondary': '#805E45',
'Text/Interactive/Hover Secondary': '#BA8E6E',
'Text/Interactive/Secondary Hover': '#BA8E6E',
'Text/Interactive/Disabled': '#8C8C8C',
'Text/Interactive/Focus': '#262626',
'Text/Interactive/Error': '#AD0015',
@@ -288,7 +290,6 @@ export const theme = {
'Border/Interactive/Focus': '#262626',
'Border/Interactive/Disabled': '#BFBFBF',
'Border/Interactive/Error': '#AD0015',
'Border/Interactive/KeyboardFocus': '#5B8FD4',
'Component/Button/Muted/Fill/Default': '#FFFFFF00',
'Component/Button/Muted/Fill/Hover': '#FFFFFF0D',
'Component/Button/Muted/Fill/Disabled': '#FFFFFF1A',

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

@@ -57,6 +57,7 @@
--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;
@@ -133,7 +134,6 @@
--Border-Interactive-Disabled: var(--Neutral-30);
--Border-Interactive-Error: var(--Scandic-Red-70);
--Border-Interactive-Focus: var(--Neutral-80);
--Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
--Border-Interactive-Selected: var(--Neutral-80);
--Border-Inverted: var(--Neutral-Opacity-White-100);
--Component-Button-Brand-Primary-Border-Default: var(
@@ -333,8 +333,9 @@
--Text-Interactive-Disabled: var(--Neutral-40);
--Text-Interactive-Error: var(--Scandic-Red-70);
--Text-Interactive-Focus: var(--Neutral-80);
--Text-Interactive-Hover-Secondary: var(--Signature-Hotel-Norge-Emerald-80);
--Text-Interactive-Hover: var(--Signature-Hotel-Norge-Emerald-90);
--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);
--Text-Inverted: var(--Neutral-Opacity-White-100);
--Text-Secondary: var(--Neutral-60);

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

@@ -7,15 +7,15 @@ 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/Off White/70': '#AAAAA7',
'Signature/Hotel Norge/Emerald/0': '#C7DDD5',
'Signature/Hotel Norge/Off White/70': '#AAAAA7',
'Signature/Hotel Norge/Off White/80': '#838481',
'Signature/Hotel Norge/Emerald/80': '#3A655C',
'Signature/Hotel Norge/Off White/90': '#6F716F',
'Signature/Hotel Norge/Emerald/90': '#26544A',
'Signature/Hotel Norge/Off White/100': '#646563',
'Signature/Hotel Norge/Dark blue/0': '#B7C5C8',
'Signature/Hotel Norge/Emerald/100': '#004337',
'Signature/Hotel Norge/Dark blue/0': '#B7C5C8',
'Signature/Hotel Norge/Dark blue/30': '#858F97',
'Signature/Hotel Norge/Dark blue/80': '#404655',
'Signature/Hotel Norge/Dark blue/90': '#181E34',
@@ -79,6 +79,7 @@ export const theme = {
'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/Hotel Norge/Title': 'Domaine Sans Text',
'Font family/Hotel Norge/Body': 'Fira sans',
@@ -134,8 +135,9 @@ export const theme = {
'Text/Accent Secondary': '#747474',
'Text/Inverted': '#FFFFFF',
'Text/Interactive/Default': '#181E34',
'Text/Interactive/Hover': '#26544A',
'Text/Interactive/Secondary': '#26544A',
'Text/Interactive/Hover Secondary': '#3A655C',
'Text/Interactive/Secondary Hover': '#3A655C',
'Text/Interactive/Disabled': '#8C8C8C',
'Text/Interactive/Focus': '#262626',
'Text/Interactive/Error': '#AD0015',
@@ -273,7 +275,6 @@ export const theme = {
'Border/Interactive/Focus': '#262626',
'Border/Interactive/Disabled': '#BFBFBF',
'Border/Interactive/Error': '#AD0015',
'Border/Interactive/KeyboardFocus': '#5B8FD4',
'Component/Button/Muted/Fill/Default': '#FFFFFF00',
'Component/Button/Muted/Fill/Hover': '#FFFFFF',
'Component/Button/Muted/Fill/Disabled': '#FFFFFF',

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

@@ -80,6 +80,7 @@
--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;
@@ -156,7 +157,6 @@
--Border-Interactive-Disabled: var(--Neutral-30);
--Border-Interactive-Error: var(--Scandic-Red-70);
--Border-Interactive-Focus: var(--Neutral-80);
--Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
--Border-Interactive-Selected: var(--Neutral-80);
--Border-Inverted: var(--Neutral-Opacity-White-100);
--Component-Button-Brand-Primary-Border-Default: var(
@@ -354,8 +354,9 @@
--Text-Interactive-Disabled: var(--Neutral-40);
--Text-Interactive-Error: var(--Scandic-Red-70);
--Text-Interactive-Focus: var(--Neutral-80);
--Text-Interactive-Hover-Secondary: var(--Signature-Marski-Blue-ribbon-90);
--Text-Interactive-Hover: var(--Signature-Marski-Blue-ribbon-70);
--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);
--Text-Inverted: var(--Neutral-Opacity-White-100);
--Text-Secondary: var(--Neutral-60);

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

@@ -105,6 +105,7 @@ export const theme = {
'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',
'Font family/Marski/Title': 'Helvetica Neue',
'Font family/Marski/Body': 'Fira sans',
@@ -160,8 +161,9 @@ export const theme = {
'Text/Accent Secondary': '#747474',
'Text/Inverted': '#FFFFFF',
'Text/Interactive/Default': '#122937',
'Text/Interactive/Hover': '#0D57F3',
'Text/Interactive/Secondary': '#0D57F3',
'Text/Interactive/Hover Secondary': '#143D94',
'Text/Interactive/Secondary Hover': '#143D94',
'Text/Interactive/Disabled': '#8C8C8C',
'Text/Interactive/Focus': '#262626',
'Text/Interactive/Error': '#AD0015',
@@ -299,7 +301,6 @@ export const theme = {
'Border/Interactive/Focus': '#262626',
'Border/Interactive/Disabled': '#BFBFBF',
'Border/Interactive/Error': '#AD0015',
'Border/Interactive/KeyboardFocus': '#5B8FD4',
'Component/Button/Muted/Fill/Default': '#FFFFFF00',
'Component/Button/Muted/Fill/Hover': '#FFFFFF',
'Component/Button/Muted/Fill/Disabled': '#FFFFFF',

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

@@ -153,7 +153,6 @@
--Border-Interactive-Disabled: var(--Neutral-40);
--Border-Interactive-Error: var(--Scandic-Red-70);
--Border-Interactive-Focus: var(--Neutral-80);
--Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
--Border-Interactive-Selected: var(--Neutral-80);
--Border-Inverted: var(--Neutral-Opacity-White-100);
--Component-Button-Brand-Primary-Border-Default: var(
@@ -292,6 +291,9 @@
--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);
@@ -342,8 +344,9 @@
--Text-Interactive-Disabled: var(--Neutral-40);
--Text-Interactive-Error: var(--Scandic-Red-70);
--Text-Interactive-Focus: var(--Neutral-80);
--Text-Interactive-Hover-Secondary: var(--Scandic-Go-Purple-100);
--Text-Interactive-Hover: var(--Scandic-Go-Purple-80);
--Text-Interactive-Placeholder: var(--Neutral-50);
--Text-Interactive-Secondary-Hover: var(--Scandic-Go-Purple-100);
--Text-Interactive-Secondary: var(--Scandic-Go-Purple-80);
--Text-Inverted: var(--Neutral-Opacity-White-100);
--Text-Secondary: var(--Neutral-60);

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

@@ -157,8 +157,9 @@ export const theme = {
'Text/Accent Secondary': '#5E2A8C',
'Text/Inverted': '#FFFFFF',
'Text/Interactive/Default': '#2D163A',
'Text/Interactive/Hover': '#5E2A8C',
'Text/Interactive/Secondary': '#5E2A8C',
'Text/Interactive/Hover Secondary': '#2D163A',
'Text/Interactive/Secondary Hover': '#2D163A',
'Text/Interactive/Disabled': '#8C8C8C',
'Text/Interactive/Focus': '#262626',
'Text/Interactive/Error': '#AD0015',
@@ -202,6 +203,7 @@ export const theme = {
'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/UI Fill/Default': '#FFFFFF',
'Surface/UI Fill/Intense': '#262626',
'Surface/UI Fill/Active': '#262626',
@@ -303,7 +305,6 @@ export const theme = {
'Border/Interactive/Focus': '#262626',
'Border/Interactive/Disabled': '#8C8C8C',
'Border/Interactive/Error': '#AD0015',
'Border/Interactive/KeyboardFocus': '#5B8FD4',
'Component/Button/Muted/Fill/Default': '#FFFFFF',
'Component/Button/Muted/Fill/Hover': '#ffffff',
'Component/Button/Muted/Fill/Disabled': '#FFFFFF1A',

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

@@ -180,7 +180,6 @@
--Border-Interactive-Disabled: var(--Scandic-Grey-40);
--Border-Interactive-Error: var(--Scandic-Red-70);
--Border-Interactive-Focus: var(--Scandic-Grey-100);
--Border-Interactive-KeyboardFocus: var(--Scandic-Blue-50);
--Border-Interactive-Selected: var(--Scandic-Beige-70);
--Border-Inverted: var(--Neutral-Opacity-White-100);
--Component-Button-Brand-Primary-Border-Default: var(
@@ -319,6 +318,7 @@
--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);
@@ -365,12 +365,13 @@
--Text-Feedback-Succes-Accent: var(--Scandic-Green-60);
--Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
--Text-Heading: var(--Scandic-Red-100);
--Text-Interactive-Default: var(--Scandic-Peach-100);
--Text-Interactive-Default: var(--Scandic-Red-100);
--Text-Interactive-Disabled: var(--Scandic-Grey-40);
--Text-Interactive-Error: var(--Scandic-Red-70);
--Text-Interactive-Focus: var(--Scandic-Grey-80);
--Text-Interactive-Hover-Secondary: var(--Scandic-Peach-100);
--Text-Interactive-Hover: var(--Scandic-Peach-80);
--Text-Interactive-Placeholder: var(--Scandic-Grey-60);
--Text-Interactive-Secondary-Hover: var(--Scandic-Red-100);
--Text-Interactive-Secondary: var(--Scandic-Peach-80);
--Text-Inverted: var(--Neutral-Opacity-White-100);
--Text-Secondary: var(--Scandic-Grey-80);

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

@@ -185,9 +185,10 @@ export const theme = {
'Text/Accent Primary': '#CD0921',
'Text/Accent Secondary': '#8F4350',
'Text/Inverted': '#FFFFFF',
'Text/Interactive/Default': '#4D0F25',
'Text/Interactive/Default': '#4D001B',
'Text/Interactive/Hover': '#8F4350',
'Text/Interactive/Secondary': '#8F4350',
'Text/Interactive/Hover Secondary': '#4D0F25',
'Text/Interactive/Secondary Hover': '#4D001B',
'Text/Interactive/Disabled': '#A8A4A2',
'Text/Interactive/Focus': '#57514E',
'Text/Interactive/Error': '#AD0015',
@@ -231,6 +232,7 @@ 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',
@@ -332,7 +334,6 @@ export const theme = {
'Border/Interactive/Focus': '#26201E',
'Border/Interactive/Disabled': '#A8A4A2',
'Border/Interactive/Error': '#AD0015',
'Border/Interactive/KeyboardFocus': '#5B8FD4',
'Component/Button/Muted/Fill/Default': '#FFFFFF00',
'Component/Button/Muted/Fill/Hover': '#FFFFFF0D',
'Component/Button/Muted/Fill/Disabled': '#FFFFFF1A',

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

@@ -94,7 +94,8 @@ export const base = {
'Space/x5': { resolved: 40 },
'Space/x6': { resolved: 48 },
'Space/x7': { resolved: 56 },
'Space/x8': { resolved: 72 },
'Space/x8': { resolved: 64 },
'Space/x9': { resolved: 72 },
'Icon/2xs': { resolved: 16 },
'Icon/xs': { resolved: 20 },
'Icon/sm': { resolved: 24 },
@@ -270,11 +271,11 @@ export const scandic = {
resolved: 450,
alias: 'Font weight/Regular bold',
},
'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' },
'Title/sm/LowCase/Font family': {
resolved: 'Brandon Text',
alias: 'Font family/Scandic/Title',
},
'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' },
'Title/Decorative/lg/Size': { resolved: '', alias: 'Impl-Text size/xl' },
'Title/Decorative/lg/Font weight': {
resolved: 400,
@@ -413,17 +414,15 @@ export const scandic = {
'Text/Accent Primary': { resolved: '#CD0921', alias: 'Scandic/Red/Default' },
'Text/Accent Secondary': { resolved: '#8F4350', alias: 'Scandic/Peach/80' },
'Text/Inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100' },
'Text/Interactive/Default': {
resolved: '#4D0F25',
alias: 'Scandic/Peach/100',
},
'Text/Interactive/Default': { resolved: '#4D001B', alias: 'Scandic/Red/100' },
'Text/Interactive/Hover': { resolved: '#8F4350', alias: 'Scandic/Peach/80' },
'Text/Interactive/Secondary': {
resolved: '#8F4350',
alias: 'Scandic/Peach/80',
},
'Text/Interactive/Hover Secondary': {
resolved: '#4D0F25',
alias: 'Scandic/Peach/100',
'Text/Interactive/Secondary Hover': {
resolved: '#4D001B',
alias: 'Scandic/Red/100',
},
'Text/Interactive/Disabled': {
resolved: '#A8A4A2',
@@ -576,6 +575,10 @@ export const scandic = {
resolved: '#CD0921',
alias: 'Scandic/Red/Default',
},
'Surface/Brand/Primary 3/OnSurface/Accent Secondary': {
resolved: '#8F4350',
alias: 'Scandic/Peach/80',
},
'Surface/UI Fill/Default': {
resolved: '#FFFFFF',
alias: 'Neutral/Opacity/White/100',
@@ -864,10 +867,6 @@ export const scandic = {
alias: 'Scandic/Grey/40',
},
'Border/Interactive/Error': { resolved: '#AD0015', alias: 'Scandic/Red/70' },
'Border/Interactive/KeyboardFocus': {
resolved: '#5B8FD4',
alias: 'Scandic/Blue/50',
},
'Component/Button/Muted/Fill/Default': {
resolved: '#FFFFFF00',
alias: 'Neutral/Opacity/White/0',
@@ -1047,11 +1046,11 @@ export const scandicGo = {
resolved: 500,
alias: 'Font weight/Medium',
},
'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' },
'Title/sm/LowCase/Font family': {
resolved: 'Neue Haas Grotesk Display Pro',
alias: 'Font family/Scandic Go/Title',
},
'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' },
'Title/Decorative/lg/Size': { resolved: '', alias: 'Impl-Text size/xl' },
'Title/Decorative/lg/Font weight': {
resolved: 500,
@@ -1200,11 +1199,15 @@ export const scandicGo = {
resolved: '#2D163A',
alias: 'Scandic Go/Purple/100',
},
'Text/Interactive/Hover': {
resolved: '#5E2A8C',
alias: 'Scandic Go/Purple/80',
},
'Text/Interactive/Secondary': {
resolved: '#5E2A8C',
alias: 'Scandic Go/Purple/80',
},
'Text/Interactive/Hover Secondary': {
'Text/Interactive/Secondary Hover': {
resolved: '#2D163A',
alias: 'Scandic Go/Purple/100',
},
@@ -1350,6 +1353,10 @@ export const scandicGo = {
resolved: '#73FCEE',
alias: 'Scandic Go/Cyan/20',
},
'Surface/Brand/Primary 3/OnSurface/Accent Secondary': {
resolved: '#F5FF73',
alias: 'Scandic Go/Yellow/30',
},
'Surface/UI Fill/Default': {
resolved: '#FFFFFF',
alias: 'Neutral/Opacity/White/100',
@@ -1626,10 +1633,6 @@ export const scandicGo = {
'Border/Interactive/Focus': { resolved: '#262626', alias: 'Neutral/80' },
'Border/Interactive/Disabled': { resolved: '#8C8C8C', alias: 'Neutral/40' },
'Border/Interactive/Error': { resolved: '#AD0015', alias: 'Scandic/Red/70' },
'Border/Interactive/KeyboardFocus': {
resolved: '#5B8FD4',
alias: 'Scandic/Blue/50',
},
'Component/Button/Muted/Fill/Default': {
resolved: '#FFFFFF',
alias: 'Neutral/Opacity/White/100',
@@ -1768,6 +1771,7 @@ export const downtownCamper = {
'Surface/Brand/Primary 2/OnSurface/Accent': { resolved: '#FFFFFF' },
'Surface/Brand/Primary 3/OnSurface/Default': { resolved: '#FFFFFF' },
'Surface/Brand/Primary 3/OnSurface/Accent': { resolved: '#FFFFFF' },
'Surface/Brand/Primary 3/OnSurface/Accent Secondary': { resolved: '#FFFFFF' },
'Utilities/Gradients/10': { resolved: '#3C43361A' },
'Font family/Downtown Camper/Title': { resolved: 'Gotham' },
'Font family/Downtown Camper/Body': { resolved: 'Fira sans' },
@@ -1795,11 +1799,11 @@ export const downtownCamper = {
resolved: 400,
alias: 'Font weight/Regular',
},
'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' },
'Title/sm/LowCase/Font family': {
resolved: 'Gotham',
alias: 'Font family/Downtown Camper/Title',
},
'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' },
'Title/Decorative/lg/Size': { resolved: '', alias: 'Impl-Text size/xs' },
'Title/Decorative/lg/Font weight': {
resolved: 400,
@@ -1942,11 +1946,15 @@ export const downtownCamper = {
'Text/Accent Secondary': { resolved: '#747474', alias: 'Neutral/50' },
'Text/Inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100' },
'Text/Interactive/Default': { resolved: '#1F1F1F', alias: 'Neutral/90' },
'Text/Interactive/Hover': {
resolved: '#834722',
alias: 'Signature/Downtown Camper/Russet/80',
},
'Text/Interactive/Secondary': {
resolved: '#834722',
alias: 'Signature/Downtown Camper/Russet/80',
},
'Text/Interactive/Hover Secondary': {
'Text/Interactive/Secondary Hover': {
resolved: '#BB7524',
alias: 'Signature/Downtown Camper/Russet/60',
},
@@ -2340,10 +2348,6 @@ export const downtownCamper = {
'Border/Interactive/Focus': { resolved: '#262626', alias: 'Neutral/80' },
'Border/Interactive/Disabled': { resolved: '#BFBFBF', alias: 'Neutral/30' },
'Border/Interactive/Error': { resolved: '#AD0015', alias: 'Scandic/Red/70' },
'Border/Interactive/KeyboardFocus': {
resolved: '#5B8FD4',
alias: 'Scandic/Blue/50',
},
'Component/Button/Muted/Fill/Default': {
resolved: '#FFFFFF00',
alias: 'Neutral/Opacity/White/0',
@@ -2485,6 +2489,7 @@ export const haymarket = {
'Surface/Brand/Primary 2/OnSurface/Accent': { resolved: '#FFFFFF' },
'Surface/Brand/Primary 3/OnSurface/Default': { resolved: '#FFFFFF' },
'Surface/Brand/Primary 3/OnSurface/Accent': { resolved: '#FFFFFF' },
'Surface/Brand/Primary 3/OnSurface/Accent Secondary': { resolved: '#FFFFFF' },
'Utilities/Gradients/10': { resolved: '#F0DDD81A' },
'Font family/Haymarket/Title': { resolved: 'Prumo text' },
'Font family/Haymarket/Body': { resolved: 'Fira sans' },
@@ -2512,11 +2517,11 @@ export const haymarket = {
resolved: 400,
alias: 'Font weight/Regular',
},
'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' },
'Title/sm/LowCase/Font family': {
resolved: 'Prumo text',
alias: 'Font family/Haymarket/Title',
},
'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' },
'Title/Decorative/lg/Size': { resolved: '', alias: 'Impl-Text size/xs' },
'Title/Decorative/lg/Font weight': {
resolved: 400,
@@ -2662,11 +2667,15 @@ export const haymarket = {
},
'Text/Inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100' },
'Text/Interactive/Default': { resolved: '#1F1F1F', alias: 'Neutral/90' },
'Text/Interactive/Hover': {
resolved: '#805E45',
alias: 'Signature/Haymarket/Antique Brass/60',
},
'Text/Interactive/Secondary': {
resolved: '#805E45',
alias: 'Signature/Haymarket/Antique Brass/60',
},
'Text/Interactive/Hover Secondary': {
'Text/Interactive/Secondary Hover': {
resolved: '#BA8E6E',
alias: 'Signature/Haymarket/Antique Brass/40',
},
@@ -3069,10 +3078,6 @@ export const haymarket = {
'Border/Interactive/Focus': { resolved: '#262626', alias: 'Neutral/80' },
'Border/Interactive/Disabled': { resolved: '#BFBFBF', alias: 'Neutral/30' },
'Border/Interactive/Error': { resolved: '#AD0015', alias: 'Scandic/Red/70' },
'Border/Interactive/KeyboardFocus': {
resolved: '#5B8FD4',
alias: 'Scandic/Blue/50',
},
'Component/Button/Muted/Fill/Default': {
resolved: '#FFFFFF00',
alias: 'Neutral/Opacity/White/0',
@@ -3225,6 +3230,7 @@ export const marski = {
'Surface/Brand/Primary 2/OnSurface/Accent': { resolved: '#FFFFFF' },
'Surface/Brand/Primary 3/OnSurface/Default': { resolved: '#FFFFFF' },
'Surface/Brand/Primary 3/OnSurface/Accent': { resolved: '#FFFFFF' },
'Surface/Brand/Primary 3/OnSurface/Accent Secondary': { resolved: '#FFFFFF' },
'Utilities/Gradients/10': { resolved: '#3E11181A' },
'Font family/Marski/Title': { resolved: 'Helvetica Neue' },
'Font family/Marski/Body': { resolved: 'Fira sans' },
@@ -3252,11 +3258,11 @@ export const marski = {
resolved: 500,
alias: 'Font weight/Medium',
},
'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' },
'Title/sm/LowCase/Font family': {
resolved: 'Helvetica Neue',
alias: 'Font family/Marski/Title',
},
'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' },
'Title/Decorative/lg/Size': { resolved: '', alias: 'Impl-Text size/xs' },
'Title/Decorative/lg/Font weight': {
resolved: 700,
@@ -3396,11 +3402,15 @@ export const marski = {
resolved: '#122937',
alias: 'Signature/Marski/Elephant/100',
},
'Text/Interactive/Hover': {
resolved: '#0D57F3',
alias: 'Signature/Marski/Blue ribbon/70',
},
'Text/Interactive/Secondary': {
resolved: '#0D57F3',
alias: 'Signature/Marski/Blue ribbon/70',
},
'Text/Interactive/Hover Secondary': {
'Text/Interactive/Secondary Hover': {
resolved: '#143D94',
alias: 'Signature/Marski/Blue ribbon/90',
},
@@ -3803,10 +3813,6 @@ export const marski = {
'Border/Interactive/Focus': { resolved: '#262626', alias: 'Neutral/80' },
'Border/Interactive/Disabled': { resolved: '#BFBFBF', alias: 'Neutral/30' },
'Border/Interactive/Error': { resolved: '#AD0015', alias: 'Scandic/Red/70' },
'Border/Interactive/KeyboardFocus': {
resolved: '#5B8FD4',
alias: 'Scandic/Blue/50',
},
'Component/Button/Muted/Fill/Default': {
resolved: '#FFFFFF00',
alias: 'Neutral/Opacity/White/0',
@@ -3861,15 +3867,15 @@ export const hotelNorge = {
'Signature/Hotel Norge/Off White/40': { resolved: '#F2F3EF' },
'Signature/Hotel Norge/Off White/50': { resolved: '#EFF0EB' },
'Signature/Hotel Norge/Off White/60': { resolved: '#D9DAD6' },
'Signature/Hotel Norge/Off White/70': { resolved: '#AAAAA7' },
'Signature/Hotel Norge/Emerald/0': { resolved: '#C7DDD5' },
'Signature/Hotel Norge/Off White/70': { resolved: '#AAAAA7' },
'Signature/Hotel Norge/Off White/80': { resolved: '#838481' },
'Signature/Hotel Norge/Emerald/80': { resolved: '#3A655C' },
'Signature/Hotel Norge/Off White/90': { resolved: '#6F716F' },
'Signature/Hotel Norge/Emerald/90': { resolved: '#26544A' },
'Signature/Hotel Norge/Off White/100': { resolved: '#646563' },
'Signature/Hotel Norge/Dark blue/0': { resolved: '#B7C5C8' },
'Signature/Hotel Norge/Emerald/100': { resolved: '#004337' },
'Signature/Hotel Norge/Dark blue/0': { resolved: '#B7C5C8' },
'Signature/Hotel Norge/Dark blue/30': { resolved: '#858F97' },
'Signature/Hotel Norge/Dark blue/80': { resolved: '#404655' },
'Signature/Hotel Norge/Dark blue/90': { resolved: '#181E34' },
@@ -3936,6 +3942,7 @@ export const hotelNorge = {
'Surface/Brand/Primary 2/OnSurface/Accent': { resolved: '#FFFFFF' },
'Surface/Brand/Primary 3/OnSurface/Default': { resolved: '#FFFFFF' },
'Surface/Brand/Primary 3/OnSurface/Accent': { resolved: '#FFFFFF' },
'Surface/Brand/Primary 3/OnSurface/Accent Secondary': { resolved: '#FFFFFF' },
'Utilities/Gradients/10': { resolved: '#3C43361A' },
'Font family/Hotel Norge/Title': { resolved: 'Domaine Sans Text' },
'Font family/Hotel Norge/Body': { resolved: 'Fira sans' },
@@ -3963,11 +3970,11 @@ export const hotelNorge = {
resolved: 400,
alias: 'Font weight/Regular',
},
'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' },
'Title/sm/LowCase/Font family': {
resolved: 'Domaine Sans Text',
alias: 'Font family/Hotel Norge/Title',
},
'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' },
'Title/Decorative/lg/Size': { resolved: '', alias: 'Impl-Text size/sm' },
'Title/Decorative/lg/Font weight': {
resolved: 400,
@@ -4110,11 +4117,15 @@ export const hotelNorge = {
resolved: '#181E34',
alias: 'Signature/Hotel Norge/Dark blue/90',
},
'Text/Interactive/Hover': {
resolved: '#26544A',
alias: 'Signature/Hotel Norge/Emerald/90',
},
'Text/Interactive/Secondary': {
resolved: '#26544A',
alias: 'Signature/Hotel Norge/Emerald/90',
},
'Text/Interactive/Hover Secondary': {
'Text/Interactive/Secondary Hover': {
resolved: '#3A655C',
alias: 'Signature/Hotel Norge/Emerald/80',
},
@@ -4517,10 +4528,6 @@ export const hotelNorge = {
'Border/Interactive/Focus': { resolved: '#262626', alias: 'Neutral/80' },
'Border/Interactive/Disabled': { resolved: '#BFBFBF', alias: 'Neutral/30' },
'Border/Interactive/Error': { resolved: '#AD0015', alias: 'Scandic/Red/70' },
'Border/Interactive/KeyboardFocus': {
resolved: '#5B8FD4',
alias: 'Scandic/Blue/50',
},
'Component/Button/Muted/Fill/Default': {
resolved: '#FFFFFF00',
alias: 'Neutral/Opacity/White/0',
@@ -4642,6 +4649,7 @@ export const grandHotel = {
'Surface/Brand/Primary 2/OnSurface/Accent': { resolved: '#FFFFFF' },
'Surface/Brand/Primary 3/OnSurface/Default': { resolved: '#FFFFFF' },
'Surface/Brand/Primary 3/OnSurface/Accent': { resolved: '#FFFFFF' },
'Surface/Brand/Primary 3/OnSurface/Accent Secondary': { resolved: '#FFFFFF' },
'Utilities/Gradients/10': { resolved: '#5B6E7F1A' },
'Font family/Grand Hotel/Title': { resolved: 'Canela Deck' },
'Font family/Grand Hotel/Body': { resolved: 'Fira sans' },
@@ -4669,11 +4677,11 @@ export const grandHotel = {
resolved: 400,
alias: 'Font weight/Regular',
},
'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' },
'Title/sm/LowCase/Font family': {
resolved: 'Canela Deck',
alias: 'Font family/Grand Hotel/Title',
},
'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' },
'Title/Decorative/lg/Size': { resolved: '', alias: 'Impl-Text size/xs' },
'Title/Decorative/lg/Font weight': {
resolved: 400,
@@ -4819,11 +4827,15 @@ export const grandHotel = {
resolved: '#21252B',
alias: 'Signature/Grand Hotel/Blue Bayoux/100',
},
'Text/Interactive/Hover': {
resolved: '#AA546B',
alias: 'Signature/Grand Hotel/Careys Pink/60',
},
'Text/Interactive/Secondary': {
resolved: '#AA546B',
alias: 'Signature/Grand Hotel/Careys Pink/60',
},
'Text/Interactive/Hover Secondary': {
'Text/Interactive/Secondary Hover': {
resolved: '#C27183',
alias: 'Signature/Grand Hotel/Careys Pink/50',
},
@@ -5214,10 +5226,6 @@ export const grandHotel = {
'Border/Interactive/Focus': { resolved: '#262626', alias: 'Neutral/80' },
'Border/Interactive/Disabled': { resolved: '#BFBFBF', alias: 'Neutral/30' },
'Border/Interactive/Error': { resolved: '#AD0015', alias: 'Scandic/Red/70' },
'Border/Interactive/KeyboardFocus': {
resolved: '#5B8FD4',
alias: 'Scandic/Blue/50',
},
'Component/Button/Muted/Fill/Default': {
resolved: '#FFFFFF',
alias: 'Neutral/Opacity/White/100',