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/views/showcase/sections/carousel.blade.php
+42 -42
View File
@@ -3,18 +3,18 @@
'Multi-browse' => <<<'BLADE'
<x-carousel label="Shapes" item-width="220">
@foreach ([
['Cookie', 'cookie-9', 'bg-primary-container text-on-primary-container'],
['Clover', 'clover-4', 'bg-tertiary-container text-on-tertiary-container'],
['Burst', 'soft-burst', 'bg-secondary-container text-on-secondary-container'],
['Flower', 'flower', 'bg-primary text-on-primary'],
['Gem', 'gem', 'bg-surface-container-highest text-primary'],
['Puffy', 'puffy', 'bg-tertiary text-on-tertiary'],
['Sunny', 'sunny', 'bg-secondary text-on-secondary'],
['Heart', 'heart', 'bg-inverse-surface text-inverse-primary'],
['Cookie', 'cookie-9', 'background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);'],
['Clover', 'clover-4', 'background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);'],
['Burst', 'soft-burst', 'background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);'],
['Flower', 'flower', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
['Gem', 'gem', 'background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-primary);'],
['Puffy', 'puffy', 'background-color: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary);'],
['Sunny', 'sunny', 'background-color: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary);'],
['Heart', 'heart', 'background-color: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-primary);'],
] as [$name, $shape, $colours])
<x-carousel-item :label="$name">
<div class="grid size-full place-items-center {{ $colours }}">
<x-shape :name="$shape" class="size-36" />
<div data-md-showcase-carousel-swatch style="{{ $colours }}">
<x-shape :name="$shape" size="144" />
</div>
</x-carousel-item>
@endforeach
@@ -23,15 +23,15 @@
'Hero, centred' => <<<'BLADE'
<x-carousel layout="hero" centered label="Featured" height="280">
@foreach ([
['Arch', 'arch', 'bg-secondary-container text-on-secondary-container'],
['Pentagon', 'pentagon', 'bg-primary-container text-on-primary-container'],
['Boom', 'soft-boom', 'bg-tertiary-container text-on-tertiary-container'],
['Bun', 'bun', 'bg-surface-container-highest text-secondary'],
['Ghost', 'ghostish', 'bg-primary text-on-primary'],
['Arch', 'arch', 'background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);'],
['Pentagon', 'pentagon', 'background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);'],
['Boom', 'soft-boom', 'background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);'],
['Bun', 'bun', 'background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-secondary);'],
['Ghost', 'ghostish', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
] as [$name, $shape, $colours])
<x-carousel-item :label="$name">
<div class="grid size-full place-items-center {{ $colours }}">
<x-shape :name="$shape" class="size-48" />
<div data-md-showcase-carousel-swatch style="{{ $colours }}">
<x-shape :name="$shape" size="192" />
</div>
</x-carousel-item>
@endforeach
@@ -40,16 +40,16 @@
'Uncontained' => <<<'BLADE'
<x-carousel layout="uncontained" label="Albums" item-width="180" height="180">
@foreach ([
['cookie-6', 'bg-tertiary-container text-on-tertiary-container'],
['diamond', 'bg-primary-container text-on-primary-container'],
['clover-8', 'bg-secondary-container text-on-secondary-container'],
['pixel-circle', 'bg-surface-container-highest text-tertiary'],
['burst', 'bg-secondary text-on-secondary'],
['oval', 'bg-primary text-on-primary'],
['cookie-6', 'background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);'],
['diamond', 'background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);'],
['clover-8', 'background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);'],
['pixel-circle', 'background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-tertiary);'],
['burst', 'background-color: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary);'],
['oval', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
] as [$shape, $colours])
<x-carousel-item>
<div class="grid size-full place-items-center {{ $colours }}">
<x-shape :name="$shape" class="size-24" />
<div data-md-showcase-carousel-swatch style="{{ $colours }}">
<x-shape :name="$shape" size="96" />
</div>
</x-carousel-item>
@endforeach
@@ -58,16 +58,16 @@
'Uncontained, multi-aspect ratio: every item keeps its own shape' => <<<'BLADE'
<x-carousel layout="multi-aspect" label="Clips" height="200">
@foreach ([
['16/9', 'pill', 'bg-primary-container text-on-primary-container'],
['1/1', 'cookie-12', 'bg-tertiary-container text-on-tertiary-container'],
['9/16', 'arch', 'bg-secondary-container text-on-secondary-container'],
['4/3', 'slanted', 'bg-surface-container-highest text-primary'],
['3/4', 'bun', 'bg-primary text-on-primary'],
['16/9', 'very-sunny', 'bg-secondary text-on-secondary'],
['16/9', 'pill', 'background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);'],
['1/1', 'cookie-12', 'background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);'],
['9/16', 'arch', 'background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);'],
['4/3', 'slanted', 'background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-primary);'],
['3/4', 'bun', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
['16/9', 'very-sunny', 'background-color: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary);'],
] as [$aspect, $shape, $colours])
<x-carousel-item :aspect="$aspect" :label="$aspect">
<div class="grid size-full place-items-center {{ $colours }}">
<x-shape :name="$shape" class="size-20" />
<div data-md-showcase-carousel-swatch style="{{ $colours }}">
<x-shape :name="$shape" size="80" />
</div>
</x-carousel-item>
@endforeach
@@ -76,13 +76,13 @@
'Full-screen: one item at a time, scrolled down' => <<<'BLADE'
<x-carousel layout="full-screen" label="Wallpapers" height="320" :controls="true">
@foreach ([
['Morning', 'very-sunny', 'bg-linear-to-br from-primary-container to-tertiary-container text-on-primary-container'],
['Noon', 'clam-shell', 'bg-linear-to-br from-secondary-container to-primary-container text-on-secondary-container'],
['Night', 'puffy-diamond', 'bg-linear-to-br from-inverse-surface to-primary text-inverse-primary'],
['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', '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', '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])
<x-carousel-item :label="$name">
<div class="grid size-full place-items-center {{ $colours }}">
<x-shape :name="$shape" class="size-40" />
<div data-md-showcase-carousel-swatch style="{{ $colours }}">
<x-shape :name="$shape" size="160" />
</div>
</x-carousel-item>
@endforeach
@@ -91,10 +91,10 @@
];
@endphp
<section id="carousel" class="scroll-mt-24 space-y-6">
<h2 class="type-headline-md">Carousel</h2>
<x-livewire-material::stack as="section" id="carousel" gap="space300">
<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.
Swipe, scroll with Shift and the wheel, or tab to an item and use the arrow keys.
</p>
@@ -102,4 +102,4 @@
@foreach ($examples as $title => $code)
<x-showcase::example :$title :$code stack />
@endforeach
</section>
</x-livewire-material::stack>