Name the M3 replacement for every value the theme cleared
DesignGuard gains checks for Tailwind's breakpoint prefixes, for the radius, shadow, type-size, weight, leading, tracking, easing and duration scales tokens/theme.css clears, and for a colour written as a value; each violation carries path:line, the token and the M3 utility to use instead. forbidAbsolutes() and forbidOpacityInk() are opt-in like forbidColours(), because the package's own disabled styles are drawn with M3's 38 %/12 % opacities. A fixture and a test per pattern and per hint; the package's own views are asserted against every check but the breakpoint one, which plan step 15 migrates. Plan: docs/plans/material-3-alignment.md, step 9 (core C4a, C13). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
co-authored by
Claude Opus 5
parent
25ff5a8d71
commit
faf5132c7a
@@ -0,0 +1,5 @@
|
||||
<div class="sm:flex md:grid lg:hidden xl:block 2xl:contents">
|
||||
<span class="max-sm:hidden max-md:flex max-lg:grid max-xl:block max-2xl:contents"></span>
|
||||
<p class="sm:hover:underline focus:md:gap-2">stacked variants count too</p>
|
||||
<span class="medium:flex expanded:grid large:block extra-large:contents max-medium:hidden">M3's own are fine</span>
|
||||
</div>
|
||||
@@ -0,0 +1,6 @@
|
||||
<div class="bg-[#1d7afc] text-[rgb(0_0_0)] border-[hsl(210_80%_50%)]">
|
||||
<span class="fill-[oklch(0.7_0.1_250)] ring-[color-mix(in_oklab,var(--x)_50%,transparent)]"></span>
|
||||
<span class="bg-white text-black border-white"></span>
|
||||
<span class="text-on-surface/60 bg-on-surface/12 border-outline/38"></span>
|
||||
<span class="bg-primary text-on-primary border-outline-variant">M3's own are fine</span>
|
||||
</div>
|
||||
@@ -0,0 +1,5 @@
|
||||
<div class="rounded-none rounded-xs rounded-sm rounded-md rounded-lg">
|
||||
<span class="rounded-xl rounded-2xl rounded-3xl rounded-4xl rounded-full"></span>
|
||||
<span class="rounded-t-lg rounded-se-2xl"></span>
|
||||
<span class="rounded-corner-lg rounded-corner-xxl rounded-corner-full">M3's own are fine</span>
|
||||
</div>
|
||||
@@ -0,0 +1,4 @@
|
||||
<div class="shadow-2xs shadow-xs shadow-sm shadow-md">
|
||||
<span class="shadow-lg shadow-xl shadow-2xl"></span>
|
||||
<span class="shadow-elevation-1 shadow-elevation-3 shadow-elevation-5">M3's own are fine</span>
|
||||
</div>
|
||||
@@ -0,0 +1,4 @@
|
||||
<div class="ease-linear ease-in ease-out ease-in-out">
|
||||
<span class="duration-75 duration-300 duration-1000"></span>
|
||||
<span class="ease-standard ease-spatial-fast ease-effects-default duration-(--md-sys-motion-effects-fast-duration)">M3's own are fine</span>
|
||||
</div>
|
||||
@@ -0,0 +1,7 @@
|
||||
<div class="text-xs text-sm text-base text-lg text-xl text-2xl text-9xl">
|
||||
<span class="font-thin font-extralight font-light font-normal font-medium"></span>
|
||||
<span class="font-semibold font-bold font-extrabold font-black"></span>
|
||||
<span class="leading-none leading-tight leading-snug leading-normal leading-relaxed leading-loose leading-6"></span>
|
||||
<span class="tracking-tighter tracking-tight tracking-normal tracking-wide tracking-wider tracking-widest"></span>
|
||||
<span class="type-body-md type-title-lg type-emphasized-label-lg">M3's own are fine</span>
|
||||
</div>
|
||||
Reference in New Issue
Block a user