add CSS migration foundation and screenshot tooling (Phase 0)
- CSS file structure with @layer declaration (reset, layout, components, utilities, overrides)
- Layout primitives: .stack, .cluster, .row, .auto-grid, .container-page, .with-sidebar, .center
- mix screenshots task using Playwright for visual regression testing
- Golden baseline captured (10 pages x 4 breakpoints = 40 screenshots)
- No visual changes — new CSS not wired into any layout yet
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-16 23:37:29 +00:00
|
|
|
/* Utility classes — a small, curated set for common patterns.
|
|
|
|
|
Not a framework. Just the handful that earn their keep. */
|
|
|
|
|
|
|
|
|
|
@layer utilities {
|
|
|
|
|
.sr-only {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 1px;
|
|
|
|
|
height: 1px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: -1px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
clip: rect(0, 0, 0, 0);
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
border-width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
add external link UX: icons, rel attributes, screen reader labels
New external_link component in core_components handles target="_blank",
rel="noopener noreferrer", external-link icon, and sr-only "(opens in
new tab)" text. Migrated admin providers form, settings (Stripe),
order tracking, onboarding setup links to use it. Fixed rel="noopener"
to "noopener noreferrer" on remaining links (email settings, product
show, core_components card radio). Added sr-only text to shop social
link cards and aria-label to page renderer tracking link.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-04 00:55:09 +00:00
|
|
|
.external-link-icon {
|
|
|
|
|
width: 0.75em;
|
|
|
|
|
height: 0.75em;
|
|
|
|
|
margin-inline-start: 0.25em;
|
|
|
|
|
vertical-align: baseline;
|
|
|
|
|
opacity: 0.6;
|
|
|
|
|
}
|
|
|
|
|
|
add CSS migration foundation and screenshot tooling (Phase 0)
- CSS file structure with @layer declaration (reset, layout, components, utilities, overrides)
- Layout primitives: .stack, .cluster, .row, .auto-grid, .container-page, .with-sidebar, .center
- mix screenshots task using Playwright for visual regression testing
- Golden baseline captured (10 pages x 4 breakpoints = 40 screenshots)
- No visual changes — new CSS not wired into any layout yet
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-16 23:37:29 +00:00
|
|
|
.truncate {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text-balance {
|
|
|
|
|
text-wrap: balance;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Hide visually but keep in DOM (for phx-update="stream" empty states etc.) */
|
|
|
|
|
.visually-hidden:not(:focus):not(:active) {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 1px;
|
|
|
|
|
height: 1px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: -1px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
clip: rect(0, 0, 0, 0);
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
border-width: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
