From 541b5740a96bdc9585e8e3b88e44955603db862c Mon Sep 17 00:00:00 2001 From: Fuwn Date: Fri, 15 May 2026 12:06:40 +0000 Subject: refactor(colours): tokenise card shadows and scrims Introduce --shadow-card, --shadow-card-emphasized, --shadow-cta, --scrim, --scrim-soft, and --scrim-banner. Migrate 14 inline literals (card.css, input.css, Notification, MediaRoulette, the two Landing CTA buttons, the popup overlay, the palette and roulette scrims, three identity banners, the user profile cover art shadow) onto the tokens, with light/dark adaptation handled by the existing prefers-color-scheme blocks instead of duplicated inline. Two single-use Landing demo-focus values stay inline. --- src/styles/colours.css | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'src/styles/colours.css') diff --git a/src/styles/colours.css b/src/styles/colours.css index 0442fee4..84669a0d 100644 --- a/src/styles/colours.css +++ b/src/styles/colours.css @@ -17,6 +17,14 @@ --base0D: #7cafc2; --base0E: #ba8baf; --base0F: #a16946; + + --shadow-card: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; + --shadow-card-emphasized: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; + --shadow-cta: 0 4px 20px rgba(0, 0, 0, 0.15); + + --scrim: rgba(0, 0, 0, 0.6); + --scrim-soft: rgba(0, 0, 0, 0.5); + --scrim-banner: rgba(0, 0, 0, 0.468); } @media (prefers-color-scheme: dark) { @@ -39,6 +47,9 @@ --base0D: #7baeb1; --base0E: #b98aae; --base0F: #a06845; + + --shadow-card: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px; + --shadow-card-emphasized: rgba(0, 0, 11, 0.2) 0px 7px 29px 0px; } } -- cgit v1.2.3