@extends('layouts.site')

@section('content')
<section class="on-dark section !pb-14"><div class="wrap"><p class="eyebrow">Design system</p><h1 class="display">{{ \App\Support\Text::accent('Tokens and *components*.') }}</h1>
    <p class="lead mt-5">Colours, type and controls used across the public site. Change tokens in resources/css/tokens.css.</p></div></section>

<section class="on-light section !py-14"><div class="wrap">
    <h2 class="h3">Colour</h2>
    <ul class="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-6">
        @foreach (['ink' => 'Ink', 'panel' => 'Panel', 'deep' => 'Deep', 'steel' => 'Steel', 'ice' => 'Ice', 'paper' => 'Paper', 'muted' => 'Muted', 'violet' => 'Violet', 'violet-hi' => 'Violet high', 'violet-lo' => 'Violet low', 'lilac' => 'Lilac'] as $v => $n)
            <li><div class="h-20 rounded border border-ink/15" style="background: rgb(var(--{{ $v }}))"></div><p class="mt-2 font-display text-sm">{{ $n }}</p><p class="text-xs text-muted">token: {{ $v }}</p></li>
        @endforeach
    </ul>

    <h2 class="h3 mt-14">Type</h2>
    <div class="mt-6 space-y-4">
        <p class="display">Display {{ \App\Support\Text::accent('with *accent*') }}</p>
        <p class="h2">Section heading</p>
        <p class="h3">Card heading</p>
        <p class="lead">Lead paragraph in the body face.</p>
        <p>Body text. Plain sentences, short words, one idea at a time.</p>
        <p class="eyebrow">Eyebrow label</p>
    </div>

    <h2 class="h3 mt-14">Controls</h2>
    <div class="mt-6 flex flex-wrap gap-3">
        <a href="#" class="btn btn-primary">Primary @include('partials.arrow')</a>
        <a href="#" class="btn btn-ghost-light">Ghost on light</a>
        <span class="on-dark inline-block rounded p-3"><a href="#" class="btn btn-ghost-dark">Ghost on dark</a></span>
        <span class="chip">Chip</span>
    </div>
    <div class="mt-8 max-w-md"><label class="label" for="ds">Field</label><input class="field" id="ds" placeholder="Placeholder"></div>

    <h2 class="h3 mt-14">Rows</h2>
    <div class="mt-4 max-w-2xl"><a href="#" class="rule-row"><span class="flex-1 font-display text-xl">Row with hover</span><span class="text-violet">@include('partials.arrow')</span></a></div>
</div></section>
@endsection