IllusionandClaude Opus 5
19fab4a783
An audit of all twelve draft files against the build turned up a set of mismatches, most of them in the tier-2 token layer rather than in any one component. Tier 1 is untouched throughout - only the meanings moved. SHAPE. The drafts draw three corners, not five: 2px for a tag, thumbnail, flag or checkbox, 4px for anything with a box, and fully round for a filter chip or status pill. Nothing in any draft is 8px or 12px. --radius-card and --radius-surface therefore come down to radius/sm, a --radius-chip is added for the 2px tier, and --radius-control-lg - a quirk of the Figma Button frame's ghost cells - is retired along with its four consumers. ELEVATION. A shadow is a fraction of the ground it falls on, and the ramp was tuned for a white page: on the drafts' near-black ground a 12-28% black is invisible. Tier 1 gains the two deep steps the drafts actually draw (--shadow-dark-lg/xl), and --elevation-card/-popover/-modal move into the per-surface blocks so the dark surface can take them while the light one keeps the soft ramp. A resting card now has no shadow at all - the drafts separate with a hairline - and the black is spent on what floats. CARDS. The hover was a white-24% hairline and a faint glow; the drafts turn the hairline accent green, lift the card 6px and land a deep black under it. The lift is pointer-only and is dropped under prefers-reduced-motion. GHOST IS A TEXT LINK. The drafts never fill a ghost control - every "All updates ->" is plain text that turns green while the label-to-arrow gap opens. The tokens carry no fill in any state and the variant opts out of the 3px lift, which also retires the WCAG workaround the old Figma hover forced (green label on a green fill, 1.40:1). NAVIGATION. A nav label rests in text/secondary and brightens to primary; the current section stays primary and is marked by the accent rule, not by green text. HERO STRIPE. The middle block was painted near-black against a comment claiming the redesign had dropped white; the drafts paint it #F8F9FA. Back to background/inverse, and to the drafts' 390 : 495 : 363 split. styles/README.md is updated to match, including a contrast table that still described --surface-raised as the retired #2e2e2c. Not changed, because each is a decision rather than a defect: the drafts set every eyebrow, tag and meta line in IBM Plex Mono at 10-11px with 1.2-1.4px tracking (a third typeface, and no Arabic counterpart); draft headings are weight 800, which needs a font file we do not have; and the EU badge statement stays at --text-primary, since the visibility lockup is contractual. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
143 lines
5.5 KiB
CSS
143 lines
5.5 KiB
CSS
/* ============================================================================
|
|
CARD - mechanics that cannot be expressed as a utility
|
|
----------------------------------------------------------------------------
|
|
Everything token-driven lives in the TSX as a tier-2 utility
|
|
(bg-surface-raised, text-text-accent, rounded-card, ...). This file only
|
|
holds the three things a utility cannot do:
|
|
|
|
1. paint an exported SVG asset in the current token colour (mask),
|
|
2. the whole-card link overlay + its focus ring,
|
|
3. the hover transitions, which need a duration/easing token pair.
|
|
|
|
Class names are prefixed `sh-card` because this file is imported by the
|
|
component rather than by app/app.css, so it is not scoped by anything else.
|
|
|
|
Everything lives in @layer components so a Tailwind utility passed through
|
|
`className` (`rounded-card`, `text-text-secondary`, ...) still wins.
|
|
The layer statement is a defensive no-op when app.css has already declared
|
|
the same order, and makes this file correct on its own if it ever loads first.
|
|
========================================================================= */
|
|
|
|
@layer theme, base, components, utilities;
|
|
|
|
@layer components {
|
|
/* ---------------------------------------------------------------------------
|
|
ICONS
|
|
The SVGs exported from Figma (public/assets/icons/*.svg) have the brand
|
|
green baked in as stroke="#008764", which would be wrong on the dark surface
|
|
and inside the accent chips. Drawing the asset as a mask over a currentColor
|
|
fill keeps the exact exported geometry while the colour comes from whichever
|
|
semantic token the parent set. Size is set per instance so each icon keeps
|
|
its designed box (14px, or 10px for the stat trend arrow).
|
|
------------------------------------------------------------------------ */
|
|
.sh-card-icon {
|
|
display: block;
|
|
flex: none;
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--sh-card-icon-src);
|
|
mask-image: var(--sh-card-icon-src);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-position: center;
|
|
mask-position: center;
|
|
-webkit-mask-size: contain;
|
|
mask-size: contain;
|
|
}
|
|
|
|
/* Arrows that mean "forward" point the other way in Arabic. Only the
|
|
horizontal arrow mirrors - the stat trend arrow is vertical. */
|
|
[dir="rtl"] .sh-card-icon--directional {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
WHOLE-CARD LINK
|
|
The anchor around the title stretches over the card with ::after, so the
|
|
entire card is clickable while the title stays the accessible name and no
|
|
interactive element is nested inside another.
|
|
|
|
z-index 1 / 2 are structural, not design values: 1 is the overlay, 2 lifts
|
|
anything that has to stay clickable above it (the team card's social links).
|
|
------------------------------------------------------------------------ */
|
|
.sh-card-link::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sh-card-above {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* The ring belongs around the card, not around the inline title text. Where
|
|
:has() is unavailable the anchor keeps the global :focus-visible ring from
|
|
app.css, so focus is never invisible. */
|
|
@supports selector(:has(*)) {
|
|
.sh-card-link:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
.sh-card:has(.sh-card-link:focus-visible) {
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
outline-offset: var(--focus-ring-offset);
|
|
}
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
HOVER / FOCUS AFFORDANCES
|
|
------------------------------------------------------------------------ */
|
|
/* The drafts hover a card three ways at once: the hairline turns accent
|
|
green, the card rises, and a deep black lands under it. The lift is
|
|
pointer-only - a touch "hover" would leave the card raised after the tap -
|
|
and it is dropped entirely under prefers-reduced-motion below, because a
|
|
transform still lands instantly once app.css has flattened the duration. */
|
|
.sh-card--linked {
|
|
transition:
|
|
box-shadow var(--motion-duration-base) var(--motion-ease-standard),
|
|
border-color var(--motion-duration-base) var(--motion-ease-standard),
|
|
transform var(--motion-duration-base) var(--motion-ease-standard);
|
|
}
|
|
|
|
.sh-card--linked:hover {
|
|
border-color: var(--border-accent);
|
|
box-shadow: var(--elevation-popover);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.sh-card--linked:hover {
|
|
transform: translateY(-6px);
|
|
}
|
|
}
|
|
|
|
.sh-card--linked:hover .sh-card-title,
|
|
.sh-card--linked:has(.sh-card-link:focus-visible) .sh-card-title {
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.sh-card-media img {
|
|
transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
|
|
}
|
|
|
|
.sh-card--linked:hover .sh-card-media img {
|
|
transform: scale(1.04);
|
|
}
|
|
|
|
/* app.css already neutralises transition durations under reduced motion, but a
|
|
transform still lands instantly - drop it entirely. */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.sh-card--linked:hover,
|
|
.sh-card--linked:hover .sh-card-media img {
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
/* The CTA sits on the accent fill, where the green focus ring has almost no
|
|
contrast. Inside its data-surface="dark" subtree the inverse ring is white. */
|
|
.sh-card-cta-action:focus-visible {
|
|
outline-color: var(--focus-ring-color-inverse);
|
|
}
|
|
}
|