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

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