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

Rewrite the showcase's Carousel section without Tailwind

Browse Source 
Plan step 38 (last batch): every item's colour role pair moves from a
Tailwind bg-*/text-*/bg-linear-to-br utility string to a plain
`background-color`/`color`/`background: linear-gradient(...)` inline
style built from --md-sys-color-* tokens (the same "caller's own
style" mechanism as the foundation pages' colour swatch), and each
<x-shape> takes its px size as a prop instead of a size-* class.
data-md-showcase-carousel-swatch only sizes and centres the shape
inside the item.

Every #carousel id and data-md-carousel-item/multi-aspect selector the
Chromium CarouselTest reads is unchanged.

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:32:15 +02:00
co-authored by Claude Sonnet 5
parent c53c94174d
commit 295673554e
2 changed files with 51 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/showcase.css
+9
View File
@@ -467,6 +467,15 @@
align-items: stretch; align-items: stretch;
} }
} }
/* Carousel: an item's own colour is the caller's inline `style` (its role pair is chosen per
item), the same mechanism as the colour swatch above; this only sizes and centres it. */
[data-md-showcase-carousel-swatch] {
display: grid;
place-items: center;
width: 100%;
height: 100%;
}
} }
/* A handful of call sites (<x-input>, <x-datepicker>, <x-slider>) forward only `class` and /* A handful of call sites (<x-input>, <x-datepicker>, <x-slider>) forward only `class` and
resources/views/showcase/sections/carousel.blade.php
+42 -42
View File
@@ -3,18 +3,18 @@
'Multi-browse' => <<<'BLADE' 'Multi-browse' => <<<'BLADE'
<x-carousel label="Shapes" item-width="220"> <x-carousel label="Shapes" item-width="220">
@foreach ([ @foreach ([
['Cookie', 'cookie-9', 'bg-primary-container text-on-primary-container'], ['Cookie', 'cookie-9', 'background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);'],
['Clover', 'clover-4', 'bg-tertiary-container text-on-tertiary-container'], ['Clover', 'clover-4', 'background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);'],
['Burst', 'soft-burst', 'bg-secondary-container text-on-secondary-container'], ['Burst', 'soft-burst', 'background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);'],
['Flower', 'flower', 'bg-primary text-on-primary'], ['Flower', 'flower', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
['Gem', 'gem', 'bg-surface-container-highest text-primary'], ['Gem', 'gem', 'background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-primary);'],
['Puffy', 'puffy', 'bg-tertiary text-on-tertiary'], ['Puffy', 'puffy', 'background-color: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary);'],
['Sunny', 'sunny', 'bg-secondary text-on-secondary'], ['Sunny', 'sunny', 'background-color: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary);'],
['Heart', 'heart', 'bg-inverse-surface text-inverse-primary'], ['Heart', 'heart', 'background-color: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-primary);'],
] as [$name, $shape, $colours]) ] as [$name, $shape, $colours])
<x-carousel-item :label="$name"> <x-carousel-item :label="$name">
<div class="grid size-full place-items-center {{ $colours }}"> <div data-md-showcase-carousel-swatch style="{{ $colours }}">
<x-shape :name="$shape" class="size-36" /> <x-shape :name="$shape" size="144" />
</div> </div>
</x-carousel-item> </x-carousel-item>
@endforeach @endforeach
@@ -23,15 +23,15 @@
'Hero, centred' => <<<'BLADE' 'Hero, centred' => <<<'BLADE'
<x-carousel layout="hero" centered label="Featured" height="280"> <x-carousel layout="hero" centered label="Featured" height="280">
@foreach ([ @foreach ([
['Arch', 'arch', 'bg-secondary-container text-on-secondary-container'], ['Arch', 'arch', 'background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);'],
['Pentagon', 'pentagon', 'bg-primary-container text-on-primary-container'], ['Pentagon', 'pentagon', 'background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);'],
['Boom', 'soft-boom', 'bg-tertiary-container text-on-tertiary-container'], ['Boom', 'soft-boom', 'background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);'],
['Bun', 'bun', 'bg-surface-container-highest text-secondary'], ['Bun', 'bun', 'background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-secondary);'],
['Ghost', 'ghostish', 'bg-primary text-on-primary'], ['Ghost', 'ghostish', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
] as [$name, $shape, $colours]) ] as [$name, $shape, $colours])
<x-carousel-item :label="$name"> <x-carousel-item :label="$name">
<div class="grid size-full place-items-center {{ $colours }}"> <div data-md-showcase-carousel-swatch style="{{ $colours }}">
<x-shape :name="$shape" class="size-48" /> <x-shape :name="$shape" size="192" />
</div> </div>
</x-carousel-item> </x-carousel-item>
@endforeach @endforeach
@@ -40,16 +40,16 @@
'Uncontained' => <<<'BLADE' 'Uncontained' => <<<'BLADE'
<x-carousel layout="uncontained" label="Albums" item-width="180" height="180"> <x-carousel layout="uncontained" label="Albums" item-width="180" height="180">
@foreach ([ @foreach ([
['cookie-6', 'bg-tertiary-container text-on-tertiary-container'], ['cookie-6', 'background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);'],
['diamond', 'bg-primary-container text-on-primary-container'], ['diamond', 'background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);'],
['clover-8', 'bg-secondary-container text-on-secondary-container'], ['clover-8', 'background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);'],
['pixel-circle', 'bg-surface-container-highest text-tertiary'], ['pixel-circle', 'background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-tertiary);'],
['burst', 'bg-secondary text-on-secondary'], ['burst', 'background-color: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary);'],
['oval', 'bg-primary text-on-primary'], ['oval', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
] as [$shape, $colours]) ] as [$shape, $colours])
<x-carousel-item> <x-carousel-item>
<div class="grid size-full place-items-center {{ $colours }}"> <div data-md-showcase-carousel-swatch style="{{ $colours }}">
<x-shape :name="$shape" class="size-24" /> <x-shape :name="$shape" size="96" />
</div> </div>
</x-carousel-item> </x-carousel-item>
@endforeach @endforeach
@@ -58,16 +58,16 @@
'Uncontained, multi-aspect ratio: every item keeps its own shape' => <<<'BLADE' 'Uncontained, multi-aspect ratio: every item keeps its own shape' => <<<'BLADE'
<x-carousel layout="multi-aspect" label="Clips" height="200"> <x-carousel layout="multi-aspect" label="Clips" height="200">
@foreach ([ @foreach ([
['16/9', 'pill', 'bg-primary-container text-on-primary-container'], ['16/9', 'pill', 'background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);'],
['1/1', 'cookie-12', 'bg-tertiary-container text-on-tertiary-container'], ['1/1', 'cookie-12', 'background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);'],
['9/16', 'arch', 'bg-secondary-container text-on-secondary-container'], ['9/16', 'arch', 'background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);'],
['4/3', 'slanted', 'bg-surface-container-highest text-primary'], ['4/3', 'slanted', 'background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-primary);'],
['3/4', 'bun', 'bg-primary text-on-primary'], ['3/4', 'bun', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
['16/9', 'very-sunny', 'bg-secondary text-on-secondary'], ['16/9', 'very-sunny', 'background-color: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary);'],
] as [$aspect, $shape, $colours]) ] as [$aspect, $shape, $colours])
<x-carousel-item :aspect="$aspect" :label="$aspect"> <x-carousel-item :aspect="$aspect" :label="$aspect">
<div class="grid size-full place-items-center {{ $colours }}"> <div data-md-showcase-carousel-swatch style="{{ $colours }}">
<x-shape :name="$shape" class="size-20" /> <x-shape :name="$shape" size="80" />
</div> </div>
</x-carousel-item> </x-carousel-item>
@endforeach @endforeach
@@ -76,13 +76,13 @@
'Full-screen: one item at a time, scrolled down' => <<<'BLADE' 'Full-screen: one item at a time, scrolled down' => <<<'BLADE'
<x-carousel layout="full-screen" label="Wallpapers" height="320" :controls="true"> <x-carousel layout="full-screen" label="Wallpapers" height="320" :controls="true">
@foreach ([ @foreach ([
['Morning', 'very-sunny', 'bg-linear-to-br from-primary-container to-tertiary-container text-on-primary-container'], ['Morning', 'very-sunny', 'background: linear-gradient(to bottom right, var(--md-sys-color-primary-container), var(--md-sys-color-tertiary-container)); color: var(--md-sys-color-on-primary-container);'],
['Noon', 'clam-shell', 'bg-linear-to-br from-secondary-container to-primary-container text-on-secondary-container'], ['Noon', 'clam-shell', 'background: linear-gradient(to bottom right, var(--md-sys-color-secondary-container), var(--md-sys-color-primary-container)); color: var(--md-sys-color-on-secondary-container);'],
['Night', 'puffy-diamond', 'bg-linear-to-br from-inverse-surface to-primary text-inverse-primary'], ['Night', 'puffy-diamond', 'background: linear-gradient(to bottom right, var(--md-sys-color-inverse-surface), var(--md-sys-color-primary)); color: var(--md-sys-color-inverse-primary);'],
] as [$name, $shape, $colours]) ] as [$name, $shape, $colours])
<x-carousel-item :label="$name"> <x-carousel-item :label="$name">
<div class="grid size-full place-items-center {{ $colours }}"> <div data-md-showcase-carousel-swatch style="{{ $colours }}">
<x-shape :name="$shape" class="size-40" /> <x-shape :name="$shape" size="160" />
</div> </div>
</x-carousel-item> </x-carousel-item>
@endforeach @endforeach
@@ -91,10 +91,10 @@
]; ];
@endphp @endphp
<section id="carousel" class="scroll-mt-24 space-y-6"> <x-livewire-material::stack as="section" id="carousel" gap="space300">
<h2 class="type-headline-md">Carousel</h2> <h2 class="md-type-headline-md">Carousel</h2>
<p class="max-w-3xl type-body-md text-on-surface-variant"> <p class="md-type-body-md md-ink-variant">
<code>&lt;x-carousel&gt;</code> and <code>&lt;x-carousel-item&gt;</code>: items that change size between M3's keylines as they scroll. <code>&lt;x-carousel&gt;</code> and <code>&lt;x-carousel-item&gt;</code>: items that change size between M3's keylines as they scroll.
Swipe, scroll with Shift and the wheel, or tab to an item and use the arrow keys. Swipe, scroll with Shift and the wheel, or tab to an item and use the arrow keys.
</p> </p>
@@ -102,4 +102,4 @@
@foreach ($examples as $title => $code) @foreach ($examples as $title => $code)
<x-showcase::example :$title :$code stack /> <x-showcase::example :$title :$code stack />
@endforeach @endforeach
</section> </x-livewire-material::stack>