Give bordered foil surfaces a theme-aware monochrome edge; release v0.25.0 - #105
Merged
Merged
Conversation
….25.0 ## Summary The metallic spectrum belongs to wordmarks and marks. Bordered foil surfaces — .hraness-foil and every [data-emphasis="primary"] action — no longer paint the rainbow band through a transparent border and a clipped four-layer background. They keep a flat fill under one 2px theme-aware monochrome edge: black on light, white on dark, overridable through the new --hraness-foil-edge token. - Authored material advances to materialVersion 3: surfaceImage and surfaceBackgroundClip are replaced by surfaceFill, edge, edgeDark, and the private edgeColor projection. - Raw sheets (product-marketing.css, product-marketing-foundation.css) declare --hraness-foil-edge: light-dark(black, white) on the default roots and white on the explicit dark roots and media query. - Compiled recipes resolve the edge through a private --_hraness-foil-edge scheme-conditioned stop so a product's public override wins ahead of either scheme default. The five primary-action blocks drop the surface gradient and pin the background longhands the raw background: shorthand resolves, keeping authored-layer shorthand overrides byte-identical across raw, standalone, and compiler delivery. - Forced colors keep ButtonText edges, flat Canvas fills, and the reviewed hover fallbacks. - The spectrum stays on .hraness-foil-text, .hraness-foil-mark, and [data-foil] lockups unchanged.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The metallic spectrum belongs to wordmarks and marks. Bordered foil surfaces —
.hraness-foiland every[data-emphasis="primary"]action — no longer paint the rainbow band through a transparent border and a clipped four-layer background. They keep a flat fill under one 2px theme-aware monochrome edge: black on light, white on dark, overridable through the new--hraness-foil-edgetoken.materialVersion3:surfaceImage/surfaceBackgroundClip→surfaceFill,edge,edgeDark,edgeColor.--hraness-foil-edge: light-dark(black, white)on default roots andwhiteon the explicit dark roots and media query.--_hraness-foil-edgescheme-conditioned stop so a product's public override wins ahead of either scheme default. The five primary-action blocks drop the surface gradient and pin the background longhands the rawbackground:shorthand resolves, keeping authored-layer shorthand overrides byte-identical across raw, standalone, and compiler delivery.ButtonTextedges, flatCanvasfills, and reviewed hover fallbacks..hraness-foil-text,.hraness-foil-mark, and[data-foil]lockups unchanged.Releases v0.25.0 (v0.24.0 shipped the footer band meanwhile).
Test plan
bun run check— lint, typecheck, build, StyleX artifact + determinism gates, package smoke, unit tests, all browser suites (product-marketing browser: 1,581,096 assertions, 0 mismatches)#v0.25.0in follow-upsGenerated with Devin