[lumpster-csa]

Summary

A week of library updates, one commit per topic:

• Tertiary button hover: the base .csa-btn:hover { color: white } was turning tertiary text white over its light orange wash. The text now stays --o500.

• .csa-card-flip (new): a CSS-only card with a front and a back that turns over on click, from the Working Groups prototype.

  • A visually hidden checkbox holds the flipped state. Clicking anywhere on the card flips it, and links on the back stay clickable.
  • Keyboard users tab to the card and flip it with Space.
  • Hover tilts the card toward the turn. Reduced motion cross-fades instead.
  • Adds the .csa-sr-only utility (visually hidden, still read by screen readers).

• Color helpers: moved into a "Color Helpers" tab in the Color palette section, and the section heading now has csa-title.

• .csa-bg-n25 is now only a color helper: color-helpers.css made it an !important background utility, so the class meant two things. data-tone="neutral" is now the only neutral-tone hook, and the alias rules in surfaces.css, tags.css and toggles.css are removed.

• Automatic tag and toggle step-up in light cards: a light surface's cards are themselves n25, so neutral tags and toggle tracks inside them blended in. They now step up one shade automatically.

  • This applies whether the card sits inside a data-surface="light" section or carries the attribute itself.
  • It's skipped where cards are white: gradient surfaces and the neutral tone.
  • Nested dark and black sections keep their own colors.

• Small text sizes: two new values and classes, giving a 12 / 14.5 / 16 / 18 scale:

  • --text-small (14.5px) with .csa-block-small, for short paragraphs
  • --text-caption (12px) with .csa-caption, for dates, bylines, footnotes, captions and form hints

  Components move onto these values. The library's other half sizes are rounded to whole pixels. Small-text grays move from --n300, which fails WCAG AA at these sizes, to --n400.

• Contrast on dark glass and dark surfaces:

  • form error text on dark and black: --r100
  • dark glass and reveal card links: white, --n75 on hover
  • dark glass and reveal card kickers: --o200
  • .csa-kicker-blue on dark glass: --b100
  • hero kickers are unchanged
  • the glass link color now also holds when a glass card sits inside a dark section

• Glass grain seam: see the note below.

• Merged main, bringing in Alain's three Oct 12 commits:

  • o200 icon-page variant: identical to ours, so ours was dropped.
  • .csa-card-disabled: merged as-is. I also fixed its demo's broken icon path.
  • data-surface on .csa-card itself: merged with one change. The two .csa-bg-n25 card-level selectors were dropped, because this branch retires that alias.

• Merged main again for Alain's two Oct 15 commits:

  • .csa-list: merged as-is. It also carried the same tertiary hover fix as this branch, which caused the buttons.css conflict. I kept this branch's version, which has the explanatory comment.
  • Reveal panel link (8bbb19e): merged as-is.

@apannetrat: input wanted on the small text sizes

Alain, we're trying to consolidate and better define the library's smaller text sizes. Small text was set inline at 13, 13.5, 14 and 14.5px across the showcase and prototypes. This PR names two steps, --text-small (14.5px) and --text-caption (12px), and moves components onto them. Could you weigh in on whether this is a good idea, or whether you'd approach it differently? Happy to adjust before this merges.

Notes for the website

• Glass grain seam (fix): the frosted glass grain is a 200px SVG noise tile. Its filter set only x/y, so the filter region defaulted to 120%. The noise was stitched on a 240px tile and cut off at 200px, which left a faint seam at every tile edge. It shows on the STAR resources review page (pr-3114) as a vertical line about 199px into the reveal cards, in Chrome, at rest and on hover. Setting the filter's width/height to 100% fixes it. I confirmed it on that page by overriding the grain: line present, then gone, texture intact. The site will keep showing the line until it picks up this version of the library.
• STAR overview "Explore the Programs" card: no change needed. The STAR / Cloud Security Assurance card carries data-surface="light" and csa-bg-n25 on the card itself. With this PR it stays n25 and its CCM / CAIQ / "Level 1 & Level 2" tags step up automatically, matching today's look. csa-bg-n25 on it is now redundant and can be removed whenever convenient. Don't swap in data-tone="neutral" on that card: with card-level surfaces, that turns it white.

Known issue (not fixed here)

Inside a data-tone="neutral" section, tags and toggles still step up one shade even inside that section's white cards. The tone's rules match any ancestor, not just the nearest background. They're still visible, just one shade darker than needed. A follow-up could have each background set the tag colors through custom properties, so the nearest background always wins.

Test plan

Checked in the browser (computed styles plus visual checks) on the showcase:

• Tertiary hover keeps --o500 text on light and dark.
• Flip card: equal heights in a row, click and Space flip it, back links work, colors on all four surfaces. Stephen confirmed it in Safari.
• Color Helpers tab renders both swatch grids. No heading is missing csa-title.
• Card and tag colors across 15 surface/tone/card combinations, including cards carrying data-surface themselves and dark/black nested in light. Pressed tags keep their color while hovered.
• Text sizes: both values resolve. Every updated component computes its new size. Caption colors are correct on all surfaces, including as a <p> and inside cards.
• Dark glass and reveal kickers and links are correct inside light, dark and black sections, and light glass is unchanged. Stephen confirmed the reveal link goes to --n75 on hover.
• No broken images on the showcase after the merge.
• Reviewer: node build.mjs wasn't run (no Node on the machine this was built on).

🤖 Generated with Claude Code

[lumpster-csa]

Merging this myself for the sake of getting some important updates made ahead of the STAR pages shipping