auth: opaque login card for every theme, own link colour off the sky themes
Some checks failed
Build pull request / Build pull request (pull_request) Failing after 3m12s
Some checks failed
Build pull request / Build pull request (pull_request) Failing after 3m12s
The scene sky is one fixed dusk for every theme, so a translucent card put Midnight's link at 4.12/3.37 and Light's and Silver's at 2.49 (Libby). The card is now the theme's bubble colour with no transparency and no backdrop-filter, so text and link contrast no longer depend on the scene or a blur. Themes without --sky-bubble (Light, Silver, Dark, Butter) get link #99c7ff on the card (Dark and Butter already used that hue); Midnight and Noonday keep their own. WCAG 2.x ratios, computed, text / Register link on the card: Light, Silver, Dark, Butter #b7c7d9 / #99c7ff on #0d1a26 10.21 / 10.03 Midnight Sky #aeccff / #609385 on #0a090e 12.17 / 5.68 Noonday Sky #342d25 / #2a4f27 on #b9b6af 6.70 / 4.62 Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
a773bc4932
commit
ef961636c3
1 changed files with 14 additions and 16 deletions
|
|
@ -53,15 +53,17 @@ export const AuthFooter = style({
|
|||
});
|
||||
|
||||
// While the background scene runs (html[data-scene], set by features/scene/BackgroundScene), the
|
||||
// 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 54% in Midnight Sky (light text on a near-black bubble: 12.5:1 over a
|
||||
// black backdrop; 54% was estimated as the least for 4.5:1 over the horizon glow). The 18px blur
|
||||
// only softens the sky and ridges behind the text.
|
||||
// Noonday Sky is dark text on a light bubble, so the dark ground behind a translucent card is what
|
||||
// fails it (Libby: 2.99:1 text, 2.06:1 Register link at 54%). Its card is opaque: bubble #b9b6af
|
||||
// holds text #342d25 at 6.70:1 and the link #2a4f27 at 4.62:1 whatever is behind it, blur or not.
|
||||
// signed-out ground is clear and the card is a pane shaped like a message bubble (BubbleContent:
|
||||
// radius R500, no border), filled with the sky's bubble colour. The scene is one fixed dusk for
|
||||
// every theme, so the card is opaque: its text and link contrast cannot depend on what the scene
|
||||
// shows behind it, nor on a blur. The --sky-bubble variables come from the sky themes (Midnight and
|
||||
// Noonday); the other themes (Light, Silver, Dark, Butter) take the fallback colours.
|
||||
// WCAG ratios of text / Register link on the card, per theme:
|
||||
// Light, Silver, Dark, Butter #b7c7d9 / #99c7ff on #0d1a26 10.21 / 10.03
|
||||
// Midnight Sky #aeccff / #609385 on #0a090e 12.17 / 5.68
|
||||
// Noonday Sky #342d25 / #2a4f27 on #b9b6af 6.70 / 4.62
|
||||
// The fallback link is set here because those themes' own links (Light 2.49:1, Silver 2.49:1) are
|
||||
// made for their own grounds, not this card; Dark and Butter already use the same hsl(213 100% 80%).
|
||||
// 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}`, {
|
||||
|
|
@ -69,18 +71,14 @@ globalStyle(`${scene} ${AuthLayout}`, {
|
|||
backgroundImage: 'none',
|
||||
});
|
||||
globalStyle(`${scene} ${AuthCard}`, {
|
||||
backgroundColor: [
|
||||
'rgba(13, 26, 38, 0.54)',
|
||||
'color-mix(in srgb, var(--sky-bubble, #0d1a26) 54%, transparent)',
|
||||
],
|
||||
backgroundColor: 'var(--sky-bubble, #0d1a26)',
|
||||
color: 'var(--sky-bubble-text, #b7c7d9)',
|
||||
borderRadius: config.radii.R500,
|
||||
// A faint inner edge, so a pane this clear still reads as a surface.
|
||||
borderColor: 'rgba(183, 199, 217, 0.14)',
|
||||
backdropFilter: 'blur(18px)',
|
||||
});
|
||||
globalStyle(`${scene} body.noonday-sky ${AuthCard}`, {
|
||||
backgroundColor: 'var(--sky-bubble, #b9b6af)',
|
||||
globalStyle(`${scene} body:not(.gamecult-theme) ${AuthCard}`, {
|
||||
vars: { '--tc-link': '#99c7ff' },
|
||||
});
|
||||
globalStyle(`${scene} ${AuthHeader}`, {
|
||||
backgroundColor: 'transparent',
|
||||
|
|
|
|||
Loading…
Reference in a new issue