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/lib/CommandPalette/CommandPalette.svelte | 2 +- src/lib/Events/Event.svelte | 2 +- src/lib/Events/Group.svelte | 2 +- src/lib/Landing.svelte | 2 +- src/lib/LandingHero.svelte | 2 +- src/lib/List/MediaRoulette.svelte | 4 ++-- src/lib/Notification/Notification.svelte | 2 +- src/routes/user/[user]/+page.svelte | 4 ++-- src/styles/card.css | 19 ++----------------- src/styles/colours.css | 11 +++++++++++ src/styles/input.css | 6 ++---- src/styles/popup.scss | 2 +- 12 files changed, 26 insertions(+), 32 deletions(-) (limited to 'src') diff --git a/src/lib/CommandPalette/CommandPalette.svelte b/src/lib/CommandPalette/CommandPalette.svelte index ca3513f4..faa739a4 100644 --- a/src/lib/CommandPalette/CommandPalette.svelte +++ b/src/lib/CommandPalette/CommandPalette.svelte @@ -268,7 +268,7 @@ const handleGlobalKey = (e: KeyboardEvent) => { left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.6); + background-color: var(--scrim); z-index: 100; backdrop-filter: blur(3px); cursor: pointer; diff --git a/src/lib/Events/Event.svelte b/src/lib/Events/Event.svelte index a1d6cf42..d93bc9d0 100644 --- a/src/lib/Events/Event.svelte +++ b/src/lib/Events/Event.svelte @@ -43,7 +43,7 @@ let { event, avatar = false }: { event: Event; avatar?: boolean } = $props(); display: flex; flex-wrap: wrap; column-gap: 1.5em; - background-color: rgba(0, 0, 0, 0.468); + background-color: var(--scrim-banner); color: #d8d8d8; border-top-left-radius: 0; border-top-right-radius: 0; diff --git a/src/lib/Events/Group.svelte b/src/lib/Events/Group.svelte index 9b0ddba5..28aef6c1 100644 --- a/src/lib/Events/Group.svelte +++ b/src/lib/Events/Group.svelte @@ -56,7 +56,7 @@ let { group }: { group: Group } = $props(); display: flex; flex-wrap: wrap; column-gap: 1.5em; - background-color: rgba(0, 0, 0, 0.468); + background-color: var(--scrim-banner); color: #d8d8d8; border-top-left-radius: 0; border-top-right-radius: 0; diff --git a/src/lib/Landing.svelte b/src/lib/Landing.svelte index 319e8a48..bca1554c 100644 --- a/src/lib/Landing.svelte +++ b/src/lib/Landing.svelte @@ -450,7 +450,7 @@ $effect(() => { .cta:hover { text-decoration: none; transform: translateY(-2px); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + box-shadow: var(--shadow-cta); } .demo-overlay { diff --git a/src/lib/LandingHero.svelte b/src/lib/LandingHero.svelte index c1d8a5aa..f080f156 100644 --- a/src/lib/LandingHero.svelte +++ b/src/lib/LandingHero.svelte @@ -125,7 +125,7 @@ const scrollPastHero = () => { .cta:hover { text-decoration: none; transform: translateY(-2px); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + box-shadow: var(--shadow-cta); } .cta:active { diff --git a/src/lib/List/MediaRoulette.svelte b/src/lib/List/MediaRoulette.svelte index d6e33d7a..3fbc89d6 100644 --- a/src/lib/List/MediaRoulette.svelte +++ b/src/lib/List/MediaRoulette.svelte @@ -163,7 +163,7 @@ const handleOverlayClick = (e: MouseEvent) => { left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0.6); + background: var(--scrim); display: flex; align-items: center; justify-content: center; @@ -320,7 +320,7 @@ const handleOverlayClick = (e: MouseEvent) => { margin: 0 auto 1rem; border-radius: 8px; overflow: hidden; - box-shadow: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px; + box-shadow: var(--shadow-card); } .cover-wrapper :global(.roulette-cover) { diff --git a/src/lib/Notification/Notification.svelte b/src/lib/Notification/Notification.svelte index a3271d58..1543f3b9 100644 --- a/src/lib/Notification/Notification.svelte +++ b/src/lib/Notification/Notification.svelte @@ -65,7 +65,7 @@ const remove = () => { #notification { background-color: var(--base001); box-shadow: - rgba(0, 0, 11, 0.2) 0px 7px 29px 0px, + var(--shadow-card-emphasized), 0 0 0 4px var(--base0E); widows: 100%; diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte index fd1e2d7e..1bcedc52 100644 --- a/src/routes/user/[user]/+page.svelte +++ b/src/routes/user/[user]/+page.svelte @@ -489,7 +489,7 @@ const toggleCategory = () => { display: flex; flex-wrap: wrap; column-gap: 1.5em; - background-color: rgba(0, 0, 0, 0.468); + background-color: var(--scrim-banner); color: #d8d8d8; border-top-left-radius: 0; border-top-right-radius: 0; @@ -529,7 +529,7 @@ const toggleCategory = () => { height: $size; object-fit: cover; transition: $transition; - box-shadow: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px; + box-shadow: var(--shadow-card); overflow: hidden; &:hover { diff --git a/src/styles/card.css b/src/styles/card.css index 07a62fcd..9af777c5 100644 --- a/src/styles/card.css +++ b/src/styles/card.css @@ -2,30 +2,15 @@ details, .card { - box-shadow: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px; -} - -@media (prefers-color-scheme: light) { - details, - .card { - box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; - } + box-shadow: var(--shadow-card); } .header { box-shadow: - rgba(0, 0, 11, 0.2) 0px 7px 29px 0px, + var(--shadow-card-emphasized), 0 0 0 5px var(--base02); } -@media (prefers-color-scheme: light) { - .header { - box-shadow: - rgba(100, 100, 111, 0.2) 0px 7px 29px 0px, - 0 0 0 5px var(--base02); - } -} - .card { background-color: var(--base0011); padding: 1rem; 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; } } diff --git a/src/styles/input.css b/src/styles/input.css index 41b8af06..a46c9b13 100644 --- a/src/styles/input.css +++ b/src/styles/input.css @@ -14,8 +14,7 @@ textarea { transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out; - /* box-shadow: 0 4px 30px var(--base01); */ - box-shadow: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px; + box-shadow: var(--shadow-card); } input, @@ -110,8 +109,7 @@ button { transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out; - /* box-shadow: 0 4px 30px var(--base01); */ - box-shadow: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px; + box-shadow: var(--shadow-card); } button:hover { diff --git a/src/styles/popup.scss b/src/styles/popup.scss index 97b2e3d1..463a17d8 100644 --- a/src/styles/popup.scss +++ b/src/styles/popup.scss @@ -13,7 +13,7 @@ .popup-fullscreen { width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.5); + background-color: var(--scrim-soft); z-index: 3; backdrop-filter: blur(8px); } -- cgit v1.2.3