Move browser-test probes off Tailwind utility classes

Plan step 38 (last batch), plan step 42's target for tests/: every
Tailwind utility class in a tests/Browser/*.php probe's Blade string
or Livewire component render() (~60 class attributes across 14 files)
becomes an inline style built from --md-sys-color-*/--md-sys-shape-*/
--md-sys-measurement-* tokens or a literal px value for an arbitrary
demo size — PickingTest's clip box, every probe's <body
class="bg-surface">, the grid/stack/row wrapper divs, the carousel
item's coloured filler. No test's assertions, selectors or expected
text change; these are layout containers around the components under
test, not anything a test reads.

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
2026-09-15 05:34:20 +02:00
co-authored by Claude Sonnet 5
parent 067626c52e
commit d15312023b
14 changed files with 55 additions and 55 deletions
+4 -4
View File
@@ -29,7 +29,7 @@ class BarsProbe extends Component
<x-slot:actions><x-theme-toggle id="toggle" /></x-slot:actions>
</x-app-bar>
<div class="space-y-6 p-4">
<div style="display: flex; flex-direction: column; gap: var(--md-sys-measurement-space300); padding: var(--md-sys-measurement-space200);">
<p>tab: <span id="tab">{{ $tab }}</span></p>
<x-tabs id="share" wire:model.live="tab" :tabs="[['name' => 'files', 'label' => 'Files'], ['name' => 'people', 'label' => 'People'], ['name' => 'locked', 'label' => 'Locked', 'disabled' => true], ['name' => 'activity', 'label' => 'Activity']]">
@@ -75,7 +75,7 @@ function barsProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:bars-probe />
@livewireScripts
</body>
@@ -238,7 +238,7 @@ function appBarOverflowProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:app-bar-overflow-probe />
@livewireScripts
</body>
@@ -311,7 +311,7 @@ function toolbarScaffoldProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<x-scaffold :destinations="[
['title' => 'Inbox', 'icon' => 'inbox', 'url' => '/toolbar-scaffold-probe', 'active' => true],
['title' => 'Sent', 'icon' => 'send', 'url' => '/toolbar-scaffold-probe'],