Remove material.css, the 1.x single-import shortcut
Plan step 37: an application on 1.x-style imports now imports foundation.css before @import 'tailwindcss' and tailwind.css after it, the way foundation.css's own header has described since Phase F started — material.css only ever saved writing those two lines. Updates every place that named it: tailwind.css's and foundation/hidden.css's and tokens/utilities.css's header comments, the development skill's install snippet and Tokens section, README.md's install snippet, and a new line in UPGRADE.md's migration notes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
925d9a4439
commit
a967cfcc2b
@@ -15,8 +15,9 @@ Composer packages must be installed before the Vite build (in Dockerfiles and CI
|
||||
|
||||
```css
|
||||
/* resources/css/app.css */
|
||||
@import '../../vendor/nonameweb/livewire-material/resources/css/foundation.css';
|
||||
@import 'tailwindcss';
|
||||
@import '../../vendor/nonameweb/livewire-material/resources/css/material.css';
|
||||
@import '../../vendor/nonameweb/livewire-material/resources/css/tailwind.css';
|
||||
@import './material-scheme.css';
|
||||
@source '../../vendor/nonameweb/livewire-material/resources/views';
|
||||
@source '../../vendor/nonameweb/livewire-material/src';
|
||||
@@ -88,7 +89,7 @@ Scheme::resolveProfileUsing(fn (): ?string => Setting::get('color_profile'));
|
||||
|
||||
## Tokens
|
||||
|
||||
2.0.0's vocabulary is plain CSS, without Tailwind. `resources/css/foundation.css` is the one required import, first in the entry (while an application still builds Tailwind: before `@import 'tailwindcss'`, with `resources/css/tailwind.css` after it in place of `material.css`). It declares the layer order `material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility`, so an application's unlayered CSS beats every package rule, and `hidden` or `x-cloak` hides any element. It brings the reset, every `--md-sys-*` token (spacing included: `--md-sys-measurement-space25` … `space900`, 2–72px), and `md-state-layer`, `md-focus-ring`, `md-touch-target`, `md-link`. Text on plain elements takes the fixed text classes of `resources/css/text.css` and nothing else: `md-type-{display|headline|title|body|label}-{lg|md|sm}` and `md-type-emphasized-…`; `md-ink` (on-surface), `md-ink-variant`, `md-ink-quiet`, `md-ink-primary`, `md-ink-error`, `md-ink-success`, `md-ink-warning`, `md-ink-info`, `md-ink-inverse`; `md-text-start|center|end`, `md-truncate`, `md-line-clamp-2|3`, `md-nowrap`, `md-tabular`, `md-visually-hidden`. The Tailwind names below stay for the components not yet rewritten.
|
||||
2.0.0's vocabulary is plain CSS, without Tailwind. `resources/css/foundation.css` is the one required import, first in the entry (while an application still builds Tailwind: before `@import 'tailwindcss'`, with `resources/css/tailwind.css` after it — 1.x's `material.css` shortcut is gone). It declares the layer order `material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility`, so an application's unlayered CSS beats every package rule, and `hidden` or `x-cloak` hides any element. It brings the reset, every `--md-sys-*` token (spacing included: `--md-sys-measurement-space25` … `space900`, 2–72px), and `md-state-layer`, `md-focus-ring`, `md-touch-target`, `md-link`. Text on plain elements takes the fixed text classes of `resources/css/text.css` and nothing else: `md-type-{display|headline|title|body|label}-{lg|md|sm}` and `md-type-emphasized-…`; `md-ink` (on-surface), `md-ink-variant`, `md-ink-quiet`, `md-ink-primary`, `md-ink-error`, `md-ink-success`, `md-ink-warning`, `md-ink-info`, `md-ink-inverse`; `md-text-start|center|end`, `md-truncate`, `md-line-clamp-2|3`, `md-nowrap`, `md-tabular`, `md-visually-hidden`. Every component is plain CSS now; the Tailwind names below stay for the showcase and an application's own views, until Tailwind itself leaves the package.
|
||||
|
||||
Tailwind's default palette is cleared: every colour class names an M3 role. `text-red-600`, `bg-base-200` or `text-gray-500` compile to nothing. The rules behind the names below — which role, surface container, corner, type style, elevation level, motion spring, state and window size class to use, and M3's don'ts — are the `material-3` guideline (always on) and the `material-3-design` skill (the tables and Google's source pages); activate that skill before designing a screen.
|
||||
|
||||
@@ -772,7 +773,7 @@ The docked view overlaps what is under it; never place a search inside an elemen
|
||||
|
||||
### Layout
|
||||
|
||||
M3's layout vocabulary as components (M3 foundations § Layout: scaffold, bars, rails, panes, margins, spacers, and the canonical layouts). `<x-scaffold>` holds the bars, the rail and the FAB around the page; all content lives in panes, `<x-pane>`; two panes side by side are the canonical layouts `<x-list-detail>` and `<x-supporting-pane>`, and `<x-feed>` is the third; `<x-surface>` is a tonal region; inside a pane, `<x-stack>`, `<x-row>` and `<x-grid>` arrange. There is no "page" component in M3 — a page is a pane. Their stylesheets are `resources/css/layout/*.css`, all imported by `resources/css/layout.css`; the list-detail's focus handling is `resources/js/layout.js`, in `material.js`.
|
||||
M3's layout vocabulary as components (M3 foundations § Layout: scaffold, bars, rails, panes, margins, spacers, and the canonical layouts). `<x-scaffold>` holds the bars, the rail and the FAB around the page; all content lives in panes, `<x-pane>`; two panes side by side are the canonical layouts `<x-list-detail>` and `<x-supporting-pane>`, and `<x-feed>` is the third; `<x-surface>` is a tonal region; inside a pane, `<x-stack>`, `<x-row>` and `<x-grid>` arrange. There is no "page" component in M3 — a page is a pane. Their stylesheets are `resources/css/layout/*.css`, each imported directly by `resources/css/all.css` (or by whichever component stylesheets draw with them, `foundation.css`'s way); the list-detail's focus handling is `resources/js/layout.js`, in `material.js`.
|
||||
|
||||
Breakpoints are M3's five, in px: compact below 600, `medium` 600, `expanded` 840, `large` 1200, `extra-large` 1600. Every layout component takes:
|
||||
|
||||
|
||||
@@ -7,9 +7,10 @@
|
||||
* `hidden="until-found"` is left to the browser, which keeps such content searchable.
|
||||
* `[x-cloak]` hides what Alpine has not started yet; Alpine removes the attribute when it has.
|
||||
*
|
||||
* Only a layered `!important` could outrank these, and the package writes none. The file is
|
||||
* apart from reset.css because material.css, which stays for applications importing it after
|
||||
* Tailwind, needs `[x-cloak]` without the reset.
|
||||
* Only a layered `!important` could outrank these, and the package writes none. The file is apart
|
||||
* from reset.css because these two rules are unlayered while reset.css's are in `material.reset`;
|
||||
* foundation.css is the only file that imports it, so every entry — `all.css` and an application's
|
||||
* own — reaches it once, through the foundation.
|
||||
*/
|
||||
|
||||
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
/*
|
||||
* Livewire Material on 1.x-style imports — the one stylesheet an application imports, after
|
||||
* Tailwind, followed by the scheme `php artisan material:scheme` wrote for it:
|
||||
*
|
||||
* @import 'tailwindcss';
|
||||
* @import '../../vendor/nonameweb/livewire-material/resources/css/material.css';
|
||||
* @import './material-scheme.css';
|
||||
* @source '../../vendor/nonameweb/livewire-material/resources/views';
|
||||
* @source '../../vendor/nonameweb/livewire-material/src';
|
||||
*
|
||||
* tokens/scheme.css is the package's own default (M3's baseline purple), so an application
|
||||
* renders before it has a scheme; the application's file declares the same roles, unlayered, and
|
||||
* wins over the default in `material.tokens`.
|
||||
*
|
||||
* It brings the tokens, the two hiding rules and tailwind.css, but not foundation.css: imported
|
||||
* after Tailwind, the foundation's reset would land in a layer above Tailwind's utilities and
|
||||
* undo them. An application moving to 2.0.0's vocabulary imports foundation.css before
|
||||
* `@import 'tailwindcss'` and tailwind.css after it, instead of this file.
|
||||
*/
|
||||
|
||||
@import './tokens/scheme.css';
|
||||
@import './tokens/shape.css';
|
||||
@import './tokens/elevation.css';
|
||||
@import './tokens/motion.css';
|
||||
@import './tokens/type.css';
|
||||
@import './tokens/font.css';
|
||||
@import './tokens/state.css';
|
||||
@import './foundation/hidden.css';
|
||||
@import './layout.css';
|
||||
@import './components.css';
|
||||
@import './tailwind.css';
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
background-color: var(--md-sys-color-surface);
|
||||
color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,9 @@
|
||||
/*
|
||||
* Livewire Material's Tailwind half: the theme that turns the tokens into utilities, the token
|
||||
* utilities, and the component stylesheets still written for Tailwind (`@utility`, `@variant`,
|
||||
* `@layer components`). It goes when the last component leaves Tailwind.
|
||||
* Livewire Material's Tailwind half: the theme that turns the tokens into utilities and the token
|
||||
* utilities themselves (`state-layer`, `focus-ring`, `touch-target`, `link`, `type-*`), for a view
|
||||
* that still writes Tailwind classes — the showcase until step 38, and an application's own views
|
||||
* until it drops Tailwind. Every component stylesheet is plain CSS (plan step 36) and needs
|
||||
* nothing from here. This file goes when the last Tailwind class leaves (step 39).
|
||||
*
|
||||
* It carries no tokens, so it can sit behind the foundation without declaring them twice — the
|
||||
* Workbench imports it that way, after Tailwind:
|
||||
@@ -10,8 +12,8 @@
|
||||
* @import 'tailwindcss' source(none);
|
||||
* @import '../../../resources/css/tailwind.css';
|
||||
*
|
||||
* An application on 1.x-style imports keeps importing material.css, which brings the tokens and
|
||||
* this file together.
|
||||
* An application still building Tailwind imports the same way, `foundation.css` then `tailwindcss`
|
||||
* then this file, in place of the 1.x `material.css` shortcut, which is gone.
|
||||
*/
|
||||
|
||||
@import './tokens/theme.css';
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* The token utilities, for the components still written in Tailwind.
|
||||
*
|
||||
* Tailwind's side of tokens/state.css and tokens/type.css, kept apart so that the token files the
|
||||
* foundation imports carry no Tailwind directive. material.css imports this file after Tailwind;
|
||||
* foundation imports carry no Tailwind directive. tailwind.css imports this file after Tailwind;
|
||||
* it goes when the last component leaves Tailwind. New markup uses the plain-CSS classes instead,
|
||||
* which carry the same declarations: `md-state-layer`, `md-focus-ring`, `md-touch-target` and
|
||||
* `md-link` (foundation/interaction.css), and `md-type-*` (text.css).
|
||||
|
||||
Reference in New Issue
Block a user