QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-05-12 23:25:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(design-system): keep shadows dark-toned in dark mode

Browse Source 
Inverting shadows to white|8% on dark surfaces produces a halo
effect rather than an elevation cue, and stacks redundantly with
the alpha-white 1px ring already in shadow-border-*.

Switch dark-mode shadows to black at progressively higher alpha
(25%/30%/35%/40%/50% for xs..xl) so they read as actual cast
shadows on near-black surfaces. Surface-tint differences and the
existing alpha-white border ring continue to handle elevation
hierarchy and edge definition.

Approach matches Material 3, Apple HIG, IBM Carbon, Refactoring UI,
and the dark-mode shadows used in Linear/Vercel/Stripe.
This commit is contained in:
gariasf
2026-05-02 17:37:44 +02:00
parent 49a69410d1
commit 3e9d76ed0b
2 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/assets/tailwind/sure-design-system/_generated.css generated
View File

@@ -199,14 +199,14 @@
--color-success: var(--color-green-500);
--color-warning: var(--color-yellow-400);
--color-destructive: var(--color-red-400);
--color-shadow: --alpha(var(--color-white) / 8%);
--color-shadow: --alpha(var(--color-black) / 25%);
--budget-unused-fill: var(--color-gray-500);
--budget-unallocated-fill: var(--color-gray-700);
--shadow-xs: 0px 1px 2px 0px --alpha(var(--color-white) / 8%);
--shadow-sm: 0px 1px 6px 0px --alpha(var(--color-white) / 8%);
--shadow-md: 0px 4px 8px -2px --alpha(var(--color-white) / 8%);
--shadow-lg: 0px 12px 16px -4px --alpha(var(--color-white) / 8%);
--shadow-xl: 0px 20px 24px -4px --alpha(var(--color-white) / 8%);
--shadow-xs: 0px 1px 2px 0px --alpha(var(--color-black) / 25%);
--shadow-sm: 0px 1px 6px 0px --alpha(var(--color-black) / 30%);
--shadow-md: 0px 4px 8px -2px --alpha(var(--color-black) / 35%);
--shadow-lg: 0px 12px 16px -4px --alpha(var(--color-black) / 40%);
--shadow-xl: 0px 20px 24px -4px --alpha(var(--color-black) / 50%);
}
}