From e2d249a409980c41751b3f1cde6830c6b033b6c5 Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Mon, 14 Sep 2026 05:32:31 +0200 Subject: [PATCH] Say what the design guard now reports and what to write instead The "Testing the design" section of the README and of the Boost skill list the cleared breakpoints and scales with their M3 replacement, the arbitrary-colour check, and the two opt-in checks for the absolutes and for opacity on ink. Plan: docs/plans/material-3-alignment.md, step 9 (core C4a, C13). Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- README.md | 4 +++- .../livewire-material-development/SKILL.md | 18 ++++++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3fd32d86..df5724f9 100644 --- a/README.md +++ b/README.md @@ -144,7 +144,9 @@ it('uses only what compiles', function () { }); ``` -The guard fails on maryUI tags, daisyUI classes, colours the theme does not declare, unknown Material Symbol names and Blade directives written inside component tags. +The guard fails on maryUI tags, daisyUI classes, colours the theme does not declare, unknown Material Symbol names and Blade directives written inside component tags. It also fails on everything 2.0 cleared, and every line names the replacement: Tailwind's breakpoint prefixes (`sm:` and `md:` → `medium:`, `lg:` → `expanded:`, `xl:` → `large:`, `2xl:` → `extra-large:`, `max-` likewise), its radius (`rounded-lg` → `rounded-corner-lg`), shadow (`shadow-md` → `shadow-elevation-2`), text size, weight, leading and tracking (`text-sm`, `leading-6`, `tracking-wide` → a `type-*` style, `font-medium` → a `type-emphasized-*` style), easing and duration (`ease-in-out` → `ease-standard`, `duration-300` → a `duration-(--md-sys-motion-…-duration)` with the easing it pairs with), and a colour written as a value rather than a role (`bg-[#1d7afc]`, `text-[rgb(…)]`, `border-[color-mix(…)]`). + +Two checks are opt-in: `forbidAbsolutes()` also fails on `bg-white` and `text-black` (M3's white is `surface-container-lowest`), and `forbidOpacityInk()` on opacity used as emphasis (`text-on-surface/60` → `text-on-surface-variant` or `text-outline`). M3 reserves 38 % on content and 12 % on a container for the disabled state, which is what the package's own components use them for, so neither is on by default. ## AI agents diff --git a/resources/boost/skills/livewire-material-development/SKILL.md b/resources/boost/skills/livewire-material-development/SKILL.md index 9774cdf6..63a8938d 100644 --- a/resources/boost/skills/livewire-material-development/SKILL.md +++ b/resources/boost/skills/livewire-material-development/SKILL.md @@ -836,12 +836,30 @@ use NoNameWeb\LivewireMaterial\Testing\DesignGuard; it('uses only what compiles', function () { expect(DesignGuard::scan([resource_path('views'), resource_path('js'), app_path()]) ->forbidColours(['tertiary']) // roles this application's rules leave out + ->forbidAbsolutes() // opt-in: `bg-white`, `text-black` + ->forbidOpacityInk() // opt-in: `text-on-surface/60` ->violations())->toBe([]); }); ``` It fails on maryUI tags, daisyUI classes, colours the theme does not declare, unknown symbol names and Blade directives written inside a component tag (where they do not compile), with `path:line` for each. +It also fails on every value the theme cleared, and names the replacement on the same line: + +| Written | Use | +| --- | --- | +| `sm:`, `md:` (and `max-sm:`, `max-md:`) | `medium:` (`max-medium:`) | +| `lg:`, `xl:`, `2xl:` | `expanded:`, `large:`, `extra-large:` | +| `rounded-lg`, `rounded-t-2xl`, `rounded-full` | `rounded-corner-lg`, `rounded-t-corner-xxl`, `rounded-corner-full` | +| `shadow-sm`, `shadow-md` … `shadow-2xl` | `shadow-elevation-1` … `shadow-elevation-5` | +| `text-sm`, `leading-6`, `tracking-wide` | a `type-*` style, which sets the three together | +| `font-medium`, `font-bold` | a `type-emphasized-*` style | +| `ease-in-out`, `ease-linear` | `ease-standard`, or an `ease-spatial-*`/`ease-effects-*` | +| `duration-300` | `duration-(--md-sys-motion-…-duration)`, paired with its easing | +| `bg-[#1d7afc]`, `text-[rgb(…)]`, `border-[color-mix(…)]` | an M3 role | + +`forbidAbsolutes()` adds `white` and `black` (M3's white is `surface-container-lowest`, its ink an `on-` role) and `forbidOpacityInk()` adds opacity as emphasis (`text-on-surface/60` → `text-on-surface-variant` or `text-outline`). Both are off by default: M3 reserves 38 % on content and 12 % on a container for the disabled state, and the package's own components are written with those two opacities. + ## Conventions - Components are anonymous Blade components: `` without a prefix, or `` when `config('livewire-material.prefix')` is set; `` always works.