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>
142 lines
5.3 KiB
CSS
142 lines
5.3 KiB
CSS
/* ============================================================================
|
|
INPUT / TEXTAREA - figma frame 18:212 (Type x State)
|
|
----------------------------------------------------------------------------
|
|
Only TIER-2 semantic tokens. The label, hint and error colours are driven off
|
|
two data attributes on the group (`data-invalid`, `data-disabled`) plus
|
|
`:focus-within`, so the whole 2x5 matrix is a handful of rules.
|
|
|
|
Layout (the column and its gaps) is plain Tailwind spacing utilities in
|
|
Input.tsx, and they name a step of the spacing scale (`gap-xs` = 8, `ms-2xs`
|
|
= 4) rather than the raw `gap-1.5` / `ms-0.5` multiples of --spacing, which
|
|
are tier-1. Everything token-driven lives here.
|
|
|
|
BOX. As with the button, Figma strokes inside the frame, so the 1.5px border
|
|
is subtracted from the 16/12 padding and the outer edge stays where it was
|
|
drawn.
|
|
|
|
DEVIATIONS FROM FIGMA, deliberate:
|
|
* Height. Figma hand-sets 44px, which does not agree with its own 12px
|
|
padding and 24px Body/Medium line-height. Following the tokens gives 48px,
|
|
which is also exactly the Medium button, so a field and a button sitting on
|
|
one row line up. Textarea keeps Figma's 120px, reached honestly as
|
|
rows={4}: 4*24 + 10.5*2 + 1.5*2.
|
|
* Focus. Figma paints a 2px grey (`stroke/hover`) border, which both moves
|
|
the box by half a pixel and is not a WCAG-visible focus indicator. The
|
|
border instead turns `--field-border-focus` at an unchanged 1.5px and the
|
|
semantic focus ring is drawn outside it. The green label on focus is kept.
|
|
* Disabled. Figma dims the whole group to 50%. The `--field-*-disabled`
|
|
tokens already encode that reading and stay opaque, so no group opacity is
|
|
applied and text on a translucent dark surface cannot smear.
|
|
* The error caption is Figma's "Caption" role (Regular 12), which the type
|
|
scale does not publish. It uses `body-sm` (14/20), the smallest published
|
|
body role - more legible for a message a user has to act on.
|
|
========================================================================= */
|
|
|
|
@layer theme, base, components, utilities;
|
|
|
|
@layer components {
|
|
/* ---------------------------------------------------------------------
|
|
Label, hint, error
|
|
------------------------------------------------------------------ */
|
|
.sh-field__label {
|
|
color: var(--text-primary);
|
|
transition: color var(--motion-duration-fast) var(--motion-ease-standard);
|
|
}
|
|
|
|
.sh-field:focus-within .sh-field__label {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.sh-field[data-invalid="true"] .sh-field__label,
|
|
.sh-field[data-invalid="true"]:focus-within .sh-field__label {
|
|
color: var(--text-danger);
|
|
}
|
|
|
|
.sh-field[data-disabled="true"] .sh-field__label {
|
|
color: var(--text-disabled);
|
|
}
|
|
|
|
.sh-field__required {
|
|
color: var(--text-danger);
|
|
}
|
|
|
|
.sh-field__hint {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.sh-field[data-disabled="true"] .sh-field__hint {
|
|
color: var(--text-disabled);
|
|
}
|
|
|
|
.sh-field__error {
|
|
color: var(--text-danger);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
The control itself
|
|
------------------------------------------------------------------ */
|
|
.sh-field__control {
|
|
display: block;
|
|
inline-size: 100%;
|
|
appearance: none;
|
|
background-color: var(--field-bg);
|
|
color: var(--field-fg);
|
|
border: var(--control-border-width) solid var(--field-border);
|
|
border-radius: var(--radius-control);
|
|
padding-inline: calc(var(--control-padding-inline-md) - var(--control-border-width));
|
|
padding-block: calc(var(--control-padding-block-md) - var(--control-border-width));
|
|
text-align: start;
|
|
transition:
|
|
background-color var(--motion-duration-fast) var(--motion-ease-standard),
|
|
border-color var(--motion-duration-fast) var(--motion-ease-standard),
|
|
color var(--motion-duration-fast) var(--motion-ease-standard);
|
|
}
|
|
|
|
.sh-field__control::placeholder {
|
|
color: var(--field-placeholder);
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.sh-field__control:hover:not(:disabled) {
|
|
border-color: var(--field-border-hover);
|
|
}
|
|
}
|
|
|
|
/* Matched to the hover rule's specificity and placed after it, so focusing
|
|
a field the pointer happens to be over still shows the focus border. */
|
|
.sh-field .sh-field__control:focus-visible {
|
|
border-color: var(--field-border-focus);
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
outline-offset: var(--focus-ring-offset);
|
|
}
|
|
|
|
.sh-field[data-invalid="true"] .sh-field__control {
|
|
border-color: var(--field-border-error);
|
|
}
|
|
|
|
.sh-field[data-invalid="true"] .sh-field__control:focus-visible {
|
|
border-color: var(--field-border-error);
|
|
outline-color: var(--field-border-error);
|
|
}
|
|
|
|
/* Last, and specific enough to win over the invalid border - a disabled
|
|
field reads as disabled even when it is still holding an error. */
|
|
.sh-field .sh-field__control:disabled {
|
|
background-color: var(--field-bg-disabled);
|
|
color: var(--field-fg-disabled);
|
|
border-color: var(--border-subtle);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.sh-field .sh-field__control:disabled::placeholder {
|
|
color: var(--field-fg-disabled);
|
|
}
|
|
|
|
/* Only the block axis resizes - growing a textarea sideways would break the
|
|
column it sits in. */
|
|
.sh-field__control--textarea {
|
|
resize: vertical;
|
|
}
|
|
}
|