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

Merged in feat/update-tokens (pull request #1611)

Browse Source 
feat(SW-2027): update variables.json

* feat(SW-2027): update variables.json

* fix(SW-2027). replace old tokens

* fix(SW-2027): remove uppercase check


Approved-by: Michael Zetterberg
Approved-by: Erik Tiekstra
This commit is contained in:
Matilda Landström
2025-03-28 16:15:57 +00:00
parent 650dd79c26
commit adde77eaa9
22 changed files with 2478 additions and 1340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,19 +9,27 @@
--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;
--Component-Button-Brand-Primary-Hover: #ba1721;
--Component-Button-Brand-Secondary-Border-Hover-inverted: #eee4e5;
--Component-Button-Brand-Tertiary-Hover: #601e2d;
--Component-Button-Inverted-Hover: #f2f2f2;
--Body-Underline-sm-Text-Decoration: underline;
--Component-Button-Brand-Primary-Fill-Hover: #a81e20;
--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-On-fill-Hover: #601e2d;
--Font-family-Scandic-Body: 'Fira sans';
--Font-family-Scandic-Decorative: 'Biro Script Plus';
--Font-family-Scandic-Title: 'Brandon Text';
--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;
--Scandic-Beige-00: #faf6f2;
--Scandic-Beige-100: #291710;
--Scandic-Beige-10: #f2ece6;
@@ -142,21 +150,21 @@
/* Aliases */
--Background-Primary: var(--Scandic-Beige-00);
--Background-Secondary: var(--Neutral-Opacity-White-100);
--Body-Lead-text-Font-family: var(--Font-family-Body);
--Body-Lead-text-Font-family: var(--Font-family-Scandic-Body);
--Body-Lead-text-Font-weight: var(--Font-weight-Regular);
--Body-Lead-text-Size: var(--Impl-Text-size-xs);
--Body-Paragraph-Font-family: var(--Font-family-Body);
--Body-Paragraph-Font-family: var(--Font-family-Scandic-Body);
--Body-Paragraph-Font-weight-2: var(--Font-weight-Medium);
--Body-Paragraph-Font-weight: var(--Font-weight-Regular);
--Body-Paragraph-Size: var(--Impl-Text-size-3xs);
--Body-Supporting-text-Font-family: var(--Font-family-Body);
--Body-Supporting-text-Font-family: var(--Font-family-Scandic-Body);
--Body-Supporting-text-Font-weight-2: var(--Font-weight-Medium);
--Body-Supporting-text-Font-weight: var(--Font-weight-Regular);
--Body-Supporting-text-Size: var(--Impl-Text-size-4xs);
--Body-Underline-md-Font-family: var(--Font-family-Body);
--Body-Underline-md-Font-family: var(--Font-family-Scandic-Body);
--Body-Underline-md-Font-weight: var(--Font-weight-Regular);
--Body-Underline-md-Size: var(--Impl-Text-size-3xs);
--Body-Underline-sm-Font-family: var(--Font-family-Body);
--Body-Underline-sm-Font-family: var(--Font-family-Scandic-Body);
--Body-Underline-sm-Font-weight: var(--Font-weight-Regular);
--Body-Underline-sm-Size: var(--Impl-Text-size-4xs);
--Border-Default: var(--Scandic-Beige-20);
@@ -182,8 +190,10 @@
--Neutral-Opacity-White-0
);
--Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
--Component-Button-Brand-Primary-Default: var(--Scandic-Red-Default);
--Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
--Component-Button-Brand-Primary-Fill-Default: var(--Scandic-Red-Default);
--Component-Button-Brand-Primary-Fill-Disabled: var(
--Neutral-Opacity-Black-10
);
--Component-Button-Brand-Primary-On-fill-Default: var(
--Neutral-Opacity-White-100
);
@@ -199,11 +209,19 @@
--Component-Button-Brand-Secondary-Border-Inverted: var(
--Neutral-Opacity-White-100
);
--Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
--Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
--Component-Button-Brand-Secondary-Hover-Inverted: var(--Scandic-Red-100);
--Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
--Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
--Component-Button-Brand-Secondary-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(
--Scandic-Red-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(--Scandic-Red-100);
--Component-Button-Brand-Secondary-On-fill-Disabled: var(--Scandic-Grey-40);
--Component-Button-Brand-Secondary-On-fill-Hover: var(--Scandic-Peach-80);
@@ -219,8 +237,10 @@
--Component-Button-Brand-Tertiary-Border-Hover: var(
--Neutral-Opacity-White-0
);
--Component-Button-Brand-Tertiary-Default: var(--Scandic-Red-100);
--Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
--Component-Button-Brand-Tertiary-Fill-Default: var(--Scandic-Red-100);
--Component-Button-Brand-Tertiary-Fill-Disabled: var(
--Neutral-Opacity-Black-10
);
--Component-Button-Brand-Tertiary-On-fill-Default: var(
--Neutral-Opacity-White-100
);
@@ -231,10 +251,10 @@
--Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
--Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0);
--Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0);
--Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
--Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
--Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
--Component-Button-Inverted-Hover-Inverted: var(--Scandic-Red-100);
--Component-Button-Inverted-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(--Scandic-Red-100);
--Component-Button-Inverted-On-fill-Default: var(--Scandic-Red-100);
--Component-Button-Inverted-On-fill-Disabled: var(--Scandic-Grey-40);
--Component-Button-Inverted-On-fill-Hover-inverted: var(
@@ -243,11 +263,13 @@
--Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-0);
--Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-0);
--Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-0);
--Component-Button-Muted-Default: var(--Neutral-Opacity-White-0);
--Component-Button-Muted-Disabled-inverted: var(--Neutral-Opacity-Black-10);
--Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-10);
--Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5);
--Component-Button-Muted-Hover: var(--Neutral-Opacity-White-5);
--Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-0);
--Component-Button-Muted-Fill-Disabled-inverted: var(
--Neutral-Opacity-Black-10
);
--Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-10);
--Component-Button-Muted-Fill-Hover-inverted: var(--Neutral-Opacity-Black-5);
--Component-Button-Muted-Fill-Hover: var(--Neutral-Opacity-White-5);
--Component-Button-Muted-On-fill-Default: var(--Scandic-Grey-100);
--Component-Button-Muted-On-fill-Disabled: var(--Scandic-Grey-40);
--Component-Button-Muted-On-fill-Hover-Inverted: var(--Scandic-Red-90);
@@ -260,23 +282,25 @@
--Icon-Feedback-Success: var(--Scandic-Green-60);
--Icon-Feedback-Warning: var(--Scandic-Yellow-60);
--Icon-Intense: var(--Scandic-Grey-100);
--Icon-Interactive-Accent: var(--Scandic-Red-Default);
--Icon-Interactive-Default: var(--Scandic-Red-100);
--Icon-Interactive-Disabled: var(--Scandic-Grey-40);
--Icon-Interactive-Placeholder: var(--Scandic-Grey-60);
--Icon-Interactive-Secondary: var(--Scandic-Peach-80);
--Icon-Inverted: var(--Neutral-Opacity-White-100);
--Label-Font-family: var(--Font-family-Body);
--Label-Font-family: var(--Font-family-Scandic-Body);
--Label-Font-weight-2: var(--Font-weight-Medium);
--Label-Font-weight: var(--Font-weight-Regular);
--Label-Size: var(--Impl-Text-size-5xs);
--Link-md-Font-family: var(--Font-family-Body);
--Link-md-Font-family: var(--Font-family-Scandic-Body);
--Link-md-Font-weight: var(--Font-weight-Medium);
--Link-md-Size: var(--Impl-Text-size-3xs);
--Link-sm-Font-family: var(--Font-family-Body);
--Link-sm-Font-family: var(--Font-family-Scandic-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-30);
--Overlay-40: var(--Neutral-Opacity-Black-40);
--Overlay-60: var(--Neutral-Opacity-Black-60);
--Overlay-80: var(--Neutral-Opacity-Black-80);
@@ -310,14 +334,14 @@
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
--Surface-Primary-Disabled: var(--Scandic-Grey-10);
--Surface-Primary-Hover-Accent: var(--Scandic-Peach-10);
--Surface-Primary-OnSurface-Default: var(--Scandic-Beige-00);
--Surface-Primary-OnSurface-Default: var(--Scandic-Grey-00);
--Surface-Secondary-Default-dark: var(--Scandic-Beige-20);
--Surface-Secondary-Default: var(--Scandic-Beige-10);
--Surface-Secondary-Secondary: var(--Scandic-Beige-20);
--Surface-UI-Fill-Active: var(--Scandic-Peach-100);
--Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
--Surface-UI-Fill-Disabled: var(--Scandic-Grey-10);
--Surface-UI-Fill-Intense: var(--Scandic-Grey-100);
--Tag-Font-family: var(--Font-family-Title);
--Tag-Font-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);
@@ -335,48 +359,53 @@
--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-Heading: var(--Scandic-Red-100);
--Text-Interactive-Default: var(--Scandic-Peach-100);
--Text-Interactive-Disabled: var(--Scandic-Grey-40);
--Text-Interactive-Error: var(--Scandic-Red-70);
--Text-Interactive-Focus: var(--Scandic-Grey-100);
--Text-Interactive-Focus: var(--Scandic-Grey-80);
--Text-Interactive-Hover-Secondary: var(--Scandic-Peach-100);
--Text-Interactive-Placeholder: var(--Scandic-Grey-60);
--Text-Interactive-Secondary: var(--Scandic-Peach-80);
--Text-Inverted: var(--Neutral-Opacity-White-100);
--Text-Secondary: var(--Scandic-Grey-80);
--Text-Tertiary: var(--Scandic-Grey-60);
--Title-Decorative-lg-Font-family: var(--Font-family-Decorative);
--Title-Decorative-lg-Font-family: var(--Font-family-Scandic-Decorative);
--Title-Decorative-lg-Font-weight: var(--Font-weight-Regular);
--Title-Decorative-lg-Size: var(--Impl-Text-size-xl);
--Title-Decorative-md-Font-family: var(--Font-family-Decorative);
--Title-Decorative-md-Font-family: var(--Font-family-Scandic-Decorative);
--Title-Decorative-md-Font-weight: var(--Font-weight-Regular);
--Title-Decorative-md-Size: var(--Impl-Text-size-sm);
--Title-Overline-sm-Font-family: var(--Font-family-Title);
--Title-Overline-sm-Font-family: var(--Font-family-Scandic-Title);
--Title-Overline-sm-Font-weight: var(--Font-weight-Regular-bold);
--Title-Overline-sm-Size: var(--Impl-Text-size-4xs);
--Title-Subtitle-lg-Font-family: var(--Font-family-Body);
--Title-Subtitle-lg-Font-family: var(--Font-family-Scandic-Body);
--Title-Subtitle-lg-Font-weight: var(--Font-weight-Medium);
--Title-Subtitle-lg-Size: var(--Impl-Text-size-sm);
--Title-Subtitle-md-Font-family: var(--Font-family-Body);
--Title-Subtitle-md-Font-family: var(--Font-family-Scandic-Body);
--Title-Subtitle-md-Font-weight: var(--Font-weight-Medium);
--Title-Subtitle-md-Size: var(--Impl-Text-size-xs);
--Title-lg-Font-family: var(--Font-family-Title);
--Title-lg-Font-family: var(--Font-family-Scandic-Title);
--Title-lg-Font-weight: var(--Font-weight-Black);
--Title-lg-Size: var(--Impl-Text-size-4xl);
--Title-md-Font-family: var(--Font-family-Title);
--Title-md-Font-family: var(--Font-family-Scandic-Title);
--Title-md-Font-weight: var(--Font-weight-Black);
--Title-md-LowCase-Font-family: var(--Font-family-Title);
--Title-md-LowCase-Font-family: var(--Font-family-Scandic-Title);
--Title-md-LowCase-Font-weight: var(--Font-weight-Regular-bold);
--Title-md-LowCase-Size: var(--Impl-Text-size-2xl);
--Title-md-Size: var(--Impl-Text-size-2xl);
--Title-sm-Font-family: var(--Font-family-Title);
--Title-sm-Font-family: var(--Font-family-Scandic-Title);
--Title-sm-Font-weight: var(--Font-weight-Black);
--Title-sm-LowCase-Font-family: var(--Font-family-Title);
--Title-sm-LowCase-Font-family: var(--Font-family-Scandic-Title);
--Title-sm-LowCase-Font-weight: var(--Font-weight-Regular-bold);
--Title-sm-LowCase-Size: var(--Impl-Text-size-lg);
--Title-sm-Size: var(--Impl-Text-size-lg);
--Title-xs-Font-family: var(--Font-family-Title);
--Title-xs-Font-family: var(--Font-family-Scandic-Title);
--Title-xs-Font-weight: var(--Font-weight-Black);
--Title-xs-Size: var(--Impl-Text-size-sm);
}