GameCult/Ratatoskr
Watch
9
0
Fork
You've already forked Ratatoskr
 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 3

auth: login card fill 50% -> 54% so 4.5:1 holds without backdrop-filter
Some checks failed
Build pull request / Build pull request (pull_request) Failing after 3m17s
Details

Browse source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Nibu 2026-11-09 20:17:35 +00:00
commit 78a7dbe923
1 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/app/pages/auth/styles.css.ts
View file

@ -56,9 +56,9 @@ export const AuthFooter = style({
// signed-out ground is clear and the card is a translucent, blurred pane shaped like a message
// bubble (BubbleContent: radius R500, no border), filled with the sky's bubble colour. The
// --sky-bubble variables come from the sky theme (PR #22); the plain colours are the fallback
// until it lands. The fill is 50%: the 18px blur carries the readability, flattening the sky and
// ridges behind the text. Without the blur, text is 4.15:1 over the brightest backdrop (the horizon
// glow; 4.5:1 needs 54%) and >= 7.3:1 elsewhere in the scene.
// until it lands. The fill is 54%, the least that gives 4.5:1 text over the brightest backdrop (the
// horizon glow) without depending on the blur; it is >= 7.3:1 elsewhere in the scene. The 18px blur
// only softens the sky and ridges behind the text.
// The card is also made shorter so it leaves more of the scene visible on a phone.
const scene = ':root[data-scene]';
globalStyle(`${scene} ${AuthLayout}`, {
@ -67,8 +67,8 @@ globalStyle(`${scene} ${AuthLayout}`, {
});
globalStyle(`${scene} ${AuthCard}`, {
backgroundColor: [
'rgba(13, 26, 38, 0.5)',
'color-mix(in srgb, var(--sky-bubble, #0d1a26) 50%, transparent)',
'rgba(13, 26, 38, 0.54)',
'color-mix(in srgb, var(--sky-bubble, #0d1a26) 54%, transparent)',
],
color: 'var(--sky-bubble-text, #b7c7d9)',
borderRadius: config.radii.R500,