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

fix(BOOK-622): Removed blending step for hover colors and respect original values from design system instead

Browse Source 
Approved-by: Linus Flood
This commit is contained in:
Erik Tiekstra
2025-12-02 06:24:59 +00:00
parent 3e4ac2c270
commit 8f7e4b8d06
21 changed files with 747 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,16 +13,9 @@
--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: #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: #f2f2f2;
--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';
--Icon-Interactive-Inverted-Hover: #cbb0b3;
--Label-Font-fallback: sans-serif;
--Label-Letter-spacing: 0.17px;
--Link-md-Font-fallback: sans-serif;
@@ -108,14 +101,9 @@
--Scandic-Yellow-70: #a85211;
--Scandic-Yellow-80: #7d370f;
--Scandic-Yellow-90: #4f2313;
--Surface-Primary-Hover-Light: #e6e5e5;
--Surface-Primary-Hover: #f2f2f2;
--Surface-Secondary-Hover: #dad4cf;
--Surface-UI-Fill-Active-Hover: #ffffff;
--Tag-Font-fallback: sans-serif;
--Tag-Letter-spacing: 0.2px;
--Tag-Text-Transform: uppercase;
--Text-Interactive-Inverted-Hover: #cbb0b3;
--Title-Decorative-lg-Font-fallback: sans-serif;
--Title-Decorative-lg-Letter-spacing: 0.64px;
--Title-Decorative-lg-Text-Transform: none;
@@ -195,6 +183,7 @@
--Component-Button-Brand-Primary-Fill-Disabled: var(
--Neutral-Opacity-Black-10
);
--Component-Button-Brand-Primary-Fill-Hover: var(--Neutral-Opacity-Black-20);
--Component-Button-Brand-Primary-On-fill-Default: var(
--Neutral-Opacity-White-100
);
@@ -206,6 +195,9 @@
--Component-Button-Brand-Secondary-Border-Disabled: var(
--Neutral-Opacity-Black-10
);
--Component-Button-Brand-Secondary-Border-Hover-inverted: var(
--Neutral-Opacity-White-50
);
--Component-Button-Brand-Secondary-Border-Hover: var(--Scandic-Peach-80);
--Component-Button-Brand-Secondary-Border-Inverted: var(
--Neutral-Opacity-White-100
@@ -225,6 +217,9 @@
);
--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-inverted: var(
--Neutral-Opacity-White-70
);
--Component-Button-Brand-Secondary-On-fill-Hover: var(--Scandic-Peach-80);
--Component-Button-Brand-Secondary-On-fill-Inverted: var(
--Neutral-Opacity-White-100
@@ -242,6 +237,7 @@
--Component-Button-Brand-Tertiary-Fill-Disabled: var(
--Neutral-Opacity-Black-10
);
--Component-Button-Brand-Tertiary-Fill-Hover: var(--Neutral-Opacity-White-10);
--Component-Button-Brand-Tertiary-On-fill-Default: var(
--Neutral-Opacity-White-100
);
@@ -256,11 +252,13 @@
--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-Fill-Hover: var(--Neutral-Opacity-Black-5);
--Component-Button-Inverted-On-fill-Default: var(--Scandic-Red-100);
--Component-Button-Inverted-On-fill-Disabled: var(--Scandic-Grey-40);
--Component-Button-Inverted-On-fill-Hover-inverted: var(
--Neutral-Opacity-White-100
);
--Component-Button-Inverted-On-fill-Hover: var(--Neutral-Opacity-White-10);
--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);
@@ -286,6 +284,7 @@
--Icon-Interactive-Accent: var(--Scandic-Red-Default);
--Icon-Interactive-Default: var(--Scandic-Red-100);
--Icon-Interactive-Disabled: var(--Scandic-Grey-40);
--Icon-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70);
--Icon-Interactive-Placeholder: var(--Scandic-Grey-60);
--Icon-Interactive-Secondary: var(--Scandic-Peach-80);
--Icon-Inverted: var(--Neutral-Opacity-White-100);
@@ -338,9 +337,13 @@
--Surface-Primary-Default: var(--Neutral-Opacity-White-100);
--Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10);
--Surface-Primary-Hover-Accent: var(--Scandic-Peach-10);
--Surface-Primary-Hover-Light: var(--Neutral-Opacity-Black-10);
--Surface-Primary-Hover: var(--Neutral-Opacity-Black-5);
--Surface-Primary-OnSurface-Default: var(--Scandic-Grey-00);
--Surface-Secondary-Default: var(--Scandic-Beige-10);
--Surface-Secondary-Hover: var(--Neutral-Opacity-Black-10);
--Surface-Secondary-Subtle: var(--Scandic-Beige-20);
--Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-10);
--Surface-UI-Fill-Active: var(--Scandic-Peach-100);
--Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
--Surface-UI-Fill-Disabled: var(--Neutral-Opacity-Black-10);
@@ -375,6 +378,7 @@
--Text-Interactive-Error: var(--Scandic-Red-70);
--Text-Interactive-Focus: var(--Scandic-Grey-80);
--Text-Interactive-Hover: var(--Scandic-Peach-80);
--Text-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70);
--Text-Interactive-Placeholder: var(--Scandic-Grey-60);
--Text-Interactive-Secondary-Hover: var(--Scandic-Red-100);
--Text-Interactive-Secondary: var(--Scandic-Peach-80);