noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Key breakpoints, scales, inks and states on M3's tokens

Browse Source 
Tailwind's sm…2xl are cleared for M3's window size classes (medium 600, expanded
840, large 1200, extra-large 1600; resources/js/breakpoints.js for scripts), and
its radius, shadow, text-size, weight, leading, tracking and easing scales are
cleared like its palette, so only M3's utilities compile. The semantic inks are
roles rather than opacities (M3 reserves 38% for disabled). state.css declares
M3's state opacities as tokens, adds the dragged layer and a touch-target utility.
Plan: docs/plans/material-3-alignment.md, steps 1, 2, 3 and 8.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 03:54:21 +02:00
co-authored by Claude Fable 5.1
parent 651a513d1e
commit 25ff5a8d71
5 changed files with 125 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/scheme-picker.blade.php
+1 -1
View File
@@ -53,7 +53,7 @@
@foreach (['primary', 'secondary', 'tertiary'] as $role)
<span
style="--swatch-light: {{ $scheme['light'][$role] }}; --swatch-dark: {{ $scheme['dark'][$role] }}"
class="size-5 rounded-full bg-(--swatch-light) ring-2 ring-surface-container-low in-has-checked:ring-secondary-container dark:bg-(--swatch-dark)"
class="size-5 rounded-corner-full bg-(--swatch-light) ring-2 ring-surface-container-low in-has-checked:ring-secondary-container dark:bg-(--swatch-dark)"
></span>
@endforeach
</span>
resources/views/components/slider.blade.php
+3 -3
View File
@@ -299,7 +299,7 @@
data-tick="{{ $format($mark['fraction']) }}"
@if ($mark['hidden']) hidden @endif
@if ($mark['active']) data-active @endif
@class(['absolute top-1/2 size-1 -translate-1/2 rounded-full', $tickInk[$color], 'group-has-disabled/slider:bg-on-surface/38 group-has-disabled/slider:data-active:bg-on-surface/12'])
@class(['absolute top-1/2 size-1 -translate-1/2 rounded-corner-full', $tickInk[$color], 'group-has-disabled/slider:bg-on-surface/38 group-has-disabled/slider:data-active:bg-on-surface/12'])
style="left: {{ $calc($mark['at']) }}"
></span>
@endforeach
@@ -308,7 +308,7 @@
<span
data-stop="{{ $part }}"
@if (! isset($stops[$part])) hidden @endif
@class(['absolute top-1/2 size-1 -translate-1/2 rounded-full', $activeInk[$color], 'group-has-disabled/slider:bg-on-surface/38'])
@class(['absolute top-1/2 size-1 -translate-1/2 rounded-corner-full', $activeInk[$color], 'group-has-disabled/slider:bg-on-surface/38'])
style="{{ isset($stops[$part]) ? 'left: '.$calc($stops[$part]) : '' }}"
></span>
@endforeach
@@ -329,7 +329,7 @@
@foreach ($thumbs as $index => $thumb)
<span data-handle="{{ $thumb }}" class="group/thumb absolute inset-y-0 w-0" style="left: {{ $calc($place($fractions[$index])) }}">
<span @class([
'absolute top-1/2 left-0 w-1 -translate-1/2 rounded-full',
'absolute top-1/2 left-0 w-1 -translate-1/2 rounded-corner-full',
'transition-[width,height] duration-(--md-sys-motion-spatial-fast-duration) ease-spatial-fast',
'group-data-pressed/thumb:w-0.5 group-data-focused/thumb:w-0.5',
'outline-offset-2 outline-secondary group-data-focused/thumb:outline-3',