Bright, but still dark — matches ios!144
#3A0CA3 to #062C8C, saturation 0.93/0.96 where the old ground was 0.72/0.83. 🔴 Cards go DARKER than the ground, not lighter. Against a vivid ground a raised card has to be lighter than a saturated violet, and secondary text then falls below AA on it — every candidate measured did. Recessed panels invert it: the gradient is the bright thing, content sits in dark wells. card #190B4E (1.47:1 vs ground) · field #2A1875 · secondary #B4BAD4 avatar #31207F · danger #FF819F (was #FF6B92, 4.45:1 on the ground) ⚠️ The section band is a gap now, not a fill. It was 16pt of `surfaceVariant`, which on the light theme was a barely-there grey seam — on the dark theme it became a light purple slab drawing more attention than the sections it was dividing. The panels either side of it are the separator. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
28d10bec4d
commit
15e678d593
@@ -1357,13 +1357,16 @@ internal fun SectionBandPublic() = SectionBand()
|
||||
|
||||
@Composable
|
||||
private fun SectionBand() {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(horizontal = 0.dp)
|
||||
.height(16.dp)
|
||||
.background(MaterialTheme.colorScheme.surfaceVariant)
|
||||
)
|
||||
// 🔴 **A gap, not a filled block.** On the light theme this was a 16pt band
|
||||
// of #F3F3F3 — a barely-there grey that read as a seam between sections.
|
||||
// Filled with `surfaceVariant` on the dark theme it became a light purple
|
||||
// slab across the screen, which is the opposite of a separator: it drew
|
||||
// more attention than the sections it was dividing.
|
||||
//
|
||||
// Letting the ground show through does the same job the grey band did,
|
||||
// because the sections themselves are raised cards now — the gap between
|
||||
// two panels IS the separator, and it needs no colour of its own.
|
||||
Spacer(Modifier.fillMaxWidth().height(16.dp))
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -79,27 +79,27 @@ object Palette {
|
||||
// the top and 8.4:1 at the bottom, secondary text 8.1:1 and 5.5:1 — the
|
||||
// bottom stop binds, and it is where most of the explanatory copy sits.
|
||||
// White cards lift off the bottom at 2.4:1, which keeps a card a card.
|
||||
val GroundTop = Color(0xFF241650)
|
||||
val GroundBottom = Color(0xFF0B2140)
|
||||
val GroundTop = Color(0xFF3A0CA3)
|
||||
val GroundBottom = Color(0xFF062C8C)
|
||||
// Kept as the same two colours: there is one theme now.
|
||||
val NightGroundTop = Color(0xFF241650)
|
||||
val NightGroundBottom = Color(0xFF0B2140)
|
||||
val NightGroundTop = Color(0xFF3A0CA3)
|
||||
val NightGroundBottom = Color(0xFF062C8C)
|
||||
|
||||
val Teal = Color(0xFF4BE3C0) // success and presence
|
||||
val Pink = Color(0xFFFF6B92) // the kit's alert accent
|
||||
val Pink = Color(0xFFFF819F) // the kit's alert accent
|
||||
|
||||
// Neutrals, all from the kit.
|
||||
val Ink = Color(0xFFEDEFF9)
|
||||
// ⚠️ Still needed where a gradient cannot go (a single Color parameter, a
|
||||
// system bar tint). This is the gradient's mid-tone, so the two never read
|
||||
// as different surfaces.
|
||||
val Mist = Color(0xFF18183F) // the page ground, flat
|
||||
val SurfaceAlt = Color(0xFF3B3A6E) // received bubbles, pills, bands
|
||||
val IncomingBubble = Color(0xFF3B3A6E)
|
||||
val Mist = Color(0xFF201C98) // the page ground, flat
|
||||
val SurfaceAlt = Color(0xFF2A1875) // received bubbles, pills, bands
|
||||
val IncomingBubble = Color(0xFF2A1875)
|
||||
// ⚠️ A blue-tinted grey rather than the flat #F3F3F3: an initials avatar
|
||||
// needs to read as a circle against the surface behind it, and two greys a
|
||||
// shade apart do not.
|
||||
val AvatarFill = Color(0xFF3B3974)
|
||||
val AvatarFill = Color(0xFF31207F)
|
||||
// 🔴 **Darkened with the ground, not left behind it.** #505C69 read 5.0:1
|
||||
// on the old bottom stop and only 3.5:1 on the darker one — below AA, and
|
||||
// most of the explanatory copy on these screens is set in it. Measured now:
|
||||
@@ -110,20 +110,24 @@ object Palette {
|
||||
// had collapsed while the contrast numbers still passed. On a dark ground
|
||||
// it sits in the middle where it belongs: 7.3:1 on the ground, 5.7:1 on a
|
||||
// card, 4.7:1 on a field.
|
||||
val SecondaryText = Color(0xFFA8AEC9)
|
||||
val SecondaryText = Color(0xFFB4BAD4)
|
||||
// One theme now, so one secondary. Kept as an alias so the dark
|
||||
// colour scheme below still reads clearly.
|
||||
val SecondaryTextDark = Color(0xFFA8AEC9)
|
||||
val Divider = Color(0x2EA8AEC9)
|
||||
val SecondaryTextDark = Color(0xFFB4BAD4)
|
||||
val Divider = Color(0x2EB4BAD4)
|
||||
|
||||
// Semantic
|
||||
val Success = Color(0xFF4BE3C0)
|
||||
val Warning = Color(0xFFE9B44C)
|
||||
val Danger = Color(0xFFFF6B92)
|
||||
val Danger = Color(0xFFFF819F)
|
||||
|
||||
// Dark-mode grounds — these ARE the site's, since the site is dark.
|
||||
val InkSurface = Color(0xFF302F5C) // --panel
|
||||
val NightGround = Color(0xFF18183F) // --bg, the gradient's mid-tone
|
||||
// 🔴 Darker than the ground, not lighter. The ground is vivid here, and a
|
||||
// card lighter than a saturated violet has to be lighter still than that,
|
||||
// which puts secondary text below AA on it. Recessed panels invert the
|
||||
// problem: the gradient is the bright thing, content sits in dark wells.
|
||||
val InkSurface = Color(0xFF190B4E) // --panel
|
||||
val NightGround = Color(0xFF201C98) // --bg, the gradient's mid-tone
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user