diff --git a/README.md b/README.md index 28e1ca7a..2fa4b112 100644 --- a/README.md +++ b/README.md @@ -29,8 +29,9 @@ The application's build imports from `vendor/`, so Composer packages must be ins ```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'; diff --git a/UPGRADE.md b/UPGRADE.md index ab655798..42df7110 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -124,7 +124,14 @@ over a colour, use the role directly. `heights` or `snap` is set; without stops it behaves as before. - A chip set with `scroll` shows a scroll button over each overflowing edge on fine pointers. -### 6. New in 2.0.0 +### 6. `material.css` is gone + +The 1.x single-import shortcut no longer exists. An application still building Tailwind imports +`foundation.css`, then `tailwindcss`, then `tailwind.css` in its place (see Installation in +`README.md`); one that has already left Tailwind imports `foundation.css` plus the stylesheet of +each component its views render, or `resources/css/all.css` for everything at once. + +### 7. New in 2.0.0 Nothing to migrate, but worth knowing: submenus (``), a filtering menu (``), a menu that opens as a bottom sheet on compact windows @@ -141,14 +148,14 @@ side sheet (``), bottom sheet preset heights, the multi-aspec compact windows, search's icon entry point and suggestions (`trigger="icon"`, `suggestions` slot), the contrast toggle (``) and the Standard motion scheme. -### 7. Tests and guards +### 8. Tests and guards Add `DesignGuard`'s new checks to the application's design test (`forbidOpacityInk()` and `forbidAbsolutes()` are opt-in). Browser tests that assert widths switch at 640/1024/1280 now switch at 600/840/1200; tests that read `role="alert"` on an alert, `aria-pressed` on the time picker's period buttons or `data-theme-option` need the new hooks above. -### 8. For AI agents +### 9. For AI agents `php artisan boost:update --discover` picks up the new `material-3` guideline and the `material-3-design` skill, which state M3's rules and tables beside the library's utilities. diff --git a/resources/boost/skills/livewire-material-development/SKILL.md b/resources/boost/skills/livewire-material-development/SKILL.md index 34509a4e..430445bc 100644 --- a/resources/boost/skills/livewire-material-development/SKILL.md +++ b/resources/boost/skills/livewire-material-development/SKILL.md @@ -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). `` holds the bars, the rail and the FAB around the page; all content lives in panes, ``; two panes side by side are the canonical layouts `` and ``, and `` is the third; `` is a tonal region; inside a pane, ``, `` and `` 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). `` holds the bars, the rail and the FAB around the page; all content lives in panes, ``; two panes side by side are the canonical layouts `` and ``, and `` is the third; `` is a tonal region; inside a pane, ``, `` and `` 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: diff --git a/resources/css/foundation/hidden.css b/resources/css/foundation/hidden.css index addb0aaa..2f7339b4 100644 --- a/resources/css/foundation/hidden.css +++ b/resources/css/foundation/hidden.css @@ -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; diff --git a/resources/css/material.css b/resources/css/material.css deleted file mode 100644 index 393b3a1f..00000000 --- a/resources/css/material.css +++ /dev/null @@ -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); - } -} diff --git a/resources/css/tailwind.css b/resources/css/tailwind.css index 8d88dea8..1316a276 100644 --- a/resources/css/tailwind.css +++ b/resources/css/tailwind.css @@ -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'; diff --git a/resources/css/tokens/utilities.css b/resources/css/tokens/utilities.css index 55f77aa3..b935f04e 100644 --- a/resources/css/tokens/utilities.css +++ b/resources/css/tokens/utilities.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).