From ed5c28cd3f92add9b6900c1acc7e185e43d3edf8 Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 28 Jun 2026 10:03:32 +0000 Subject: [PATCH 1/2] feat(components): expand staged button/card surface MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Staged (commented until v0.8) additions to the optional component module, using the framework's own mechanisms — design tokens, the OKLCH palette, container queries instead of breakpoints, and explicit BEM classes instead of fragile attribute selectors. Smart-card subcomponents: - .sf-card__media (16/9 cover image, inner radius), .sf-card__avatar (round), .sf-card__title (unified heading size) - nested .sf-btn shrinks via the --sf-card-btn-font-size token Button semantic variants: - tokenize base font-size as --sf-btn-font-size - add --primary/--neutral (hover via the --hover token) and --success/--warning/--info (hover via the direction-aware -strong triplet) - fix --danger hover to use --sf-color-danger-strong instead of filter: brightness() for correct light/dark behaviour Button width (predictable 2-state model, verified in Chromium across wide/narrow/no-container contexts): - .sf-btn: intrinsic width by default (like Bootstrap/Bulma/Tailwind) - .sf-btn--block: unconditional full width, works everywhere - .sf-btn--block-cq: opt-in full width only inside a query container narrower than 20rem (needs a container ancestor: layout primitives or .sf-cq). No @media breakpoints. New staged tokens: --sf-card-media-ratio/-radius, --sf-card-heading-size, --sf-card-btn-font-size, --sf-btn-font-size. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01Crh1FKPkmEzMbUQbi2Fi8H --- optional/components.css | 107 +++++++++++++++++++++++++++++++-- optional/tokens.components.css | 16 +++++ 2 files changed, 119 insertions(+), 4 deletions(-) diff --git a/optional/components.css b/optional/components.css index fbab4d56..85b9836e 100644 --- a/optional/components.css +++ b/optional/components.css @@ -13,9 +13,18 @@ /* ============================================================ * .sf-btn * Interactive call-to-action element. Apply to