QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-05-09 13:45:01 +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%);
}
}

12
design/tokens/sure.tokens.json
View File

@@ -21,7 +21,7 @@
"success": { "$value": "{color.green.600}", "$type": "color", "$extensions": { "sure.dark": "{color.green.500}" } },
"warning": { "$value": "{color.yellow.600}", "$type": "color", "$extensions": { "sure.dark": "{color.yellow.400}" } },
"destructive": { "$value": "{color.red.600}", "$type": "color", "$extensions": { "sure.dark": "{color.red.400}" } },
"shadow": { "$value": "{color.black|6%}", "$type": "color", "$extensions": { "sure.dark": "{color.white|8%}" } },
"shadow": { "$value": "{color.black|6%}", "$type": "color", "$extensions": { "sure.dark": "{color.black|25%}" } },
"gray": {
"25": { "$value": "#FAFAFA", "$type": "color" },
@@ -240,11 +240,11 @@
},
"shadow": {
"xs": { "$value": "0px 1px 2px 0px {color.black|6%}", "$type": "shadow", "$extensions": { "sure.dark": "0px 1px 2px 0px {color.white|8%}" } },
"sm": { "$value": "0px 1px 6px 0px {color.black|6%}", "$type": "shadow", "$extensions": { "sure.dark": "0px 1px 6px 0px {color.white|8%}" } },
"md": { "$value": "0px 4px 8px -2px {color.black|6%}", "$type": "shadow", "$extensions": { "sure.dark": "0px 4px 8px -2px {color.white|8%}" } },
"lg": { "$value": "0px 12px 16px -4px {color.black|6%}","$type": "shadow", "$extensions": { "sure.dark": "0px 12px 16px -4px {color.white|8%}" } },
"xl": { "$value": "0px 20px 24px -4px {color.black|6%}","$type": "shadow", "$extensions": { "sure.dark": "0px 20px 24px -4px {color.white|8%}" } }
"xs": { "$value": "0px 1px 2px 0px {color.black|6%}", "$type": "shadow", "$extensions": { "sure.dark": "0px 1px 2px 0px {color.black|25%}" } },
"sm": { "$value": "0px 1px 6px 0px {color.black|6%}", "$type": "shadow", "$extensions": { "sure.dark": "0px 1px 6px 0px {color.black|30%}" } },
"md": { "$value": "0px 4px 8px -2px {color.black|6%}", "$type": "shadow", "$extensions": { "sure.dark": "0px 4px 8px -2px {color.black|35%}" } },
"lg": { "$value": "0px 12px 16px -4px {color.black|6%}","$type": "shadow", "$extensions": { "sure.dark": "0px 12px 16px -4px {color.black|40%}" } },
"xl": { "$value": "0px 20px 24px -4px {color.black|6%}","$type": "shadow", "$extensions": { "sure.dark": "0px 20px 24px -4px {color.black|50%}" } }
},
"animate": {