Andreas Reinhold / reiniandClaude Opus 5
4ad257034e
Plan step 36. <x-button> renders data-md-button with its variant, colour, size, shape, icon-button width, selected state and compact FAB as data-md-* attributes, and passes the glyph's size to <x-icon>. button.css draws Button*Tokens' geometry per size, the colour roles through custom properties that the disabled treatment replaces, the state layer, focus ring and 48px target, and the compact FAB below 600px. Its corner rules carry no specificity (:where), so a group's stylesheet reshapes the buttons inside it with any selector; the split button no longer passes an empty corners prop, which is gone. data-icon-button becomes data-md-icon-button, also in groups.css, toolbar.css and theme-toggle's own button (navigation group), and the AppBarTest assertions follow the new hooks. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
25 lines
861 B
CSS
25 lines
861 B
CSS
/*
|
|
* The component stylesheets already written without Tailwind (plan step 36), while the rest are
|
|
* still in tailwind.css. Each lives in `material.components`, so it can be imported anywhere in
|
|
* the entry: the layer statement, not the import order, decides where its rules rank. Step 37
|
|
* replaces this file with all.css. One block per stream, so parallel rewrites merge cleanly.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
/* Foundation components */
|
|
@import './components/icon.css';
|
|
@import './components/shape.css';
|
|
|
|
/* Actions and communication */
|
|
@import './components/loading.css';
|
|
@import './components/tooltip.css';
|
|
@import './components/badge.css';
|
|
@import './components/button.css';
|
|
|
|
/* Inputs, selection and data */
|
|
|
|
/* Containment */
|
|
|
|
/* Navigation */
|