<!-- AlpineJS code -->
<div x-data="{colors: ['primary', 'gray', 'red', 'brown', 'orange', 'yellow', 'lime', 'green', 'teal', 'cyan', 'blue', 'indigo', 'violet', 'purple', 'pink'], shades: [50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950] }">
    <div class="b-flex">
        <div style="width: 80px; flex-shrink: 0;"></div>
        <div style="flex: 1; display: grid; grid-template-columns: repeat(19, minmax(40px, 1fr));">
            <template x-for="shade in shades" :key="shade">
                <div style="padding: 8px 0; text-align: center;" x-text="shade"></div>
            </template>
        </div>
    </div>

    <template x-for="color in colors" :key="color">
        <div class="b-flex">
            <div style="width: 80px; flex-shrink: 0; padding: 16px 8px;" x-text="color"></div>
            <div style="flex: 1; display: grid; grid-template-columns: repeat(19, minmax(40px, 1fr));">
                <template x-for="shade in shades" :key="'top-' + shade">
                    <div :class="['bg-' + color + shade, 't-' + color + '950']" style="padding: 8px 0; text-align: center;" x-text="shade"          :title="color + shade"></div>
                </template>
                
                <template x-for="shade in shades" :key="'bottom-' + shade">
                    <div :class="['bg-' + color + shade, 't-' + color + '50']" style="padding: 8px 0; text-align: center;" x-text="shade" :title="color + shade"></div>
                </template>
            </div>
        </div>
    </template>
</div>

<div class="mar30-t flex">
    <div class="w48 t-black bg-white pad10 bordered">bg-white / t-black</div>
    <div class="w48 t-white bg-black pad10">bg-black / t-white</div>
</div>

<div class="b-flex mar10-t flex-wrap flex-ai-center">
    <div class="w15 pad10 mar5-b mar10-r t-color1">t-color1</div>
    <div class="w15 pad10 mar5-b mar10-r t-color2">t-color2</div>
    <div class="w15 pad10 mar5-b mar10-r t-color3">t-color3</div>
    <div class="w15 pad10 mar5-b mar10-r t-color4">t-color4</div>
    <div class="w15 pad10 mar5-b mar10-r t-color5">t-color5</div>
    <div class="w15 pad10 mar5-b mar10-r t-color6">t-color6</div>
    <div class="w15 pad10 mar5-b mar10-r t-color7">t-color7</div>
    <div class="w15 pad10 mar5-b mar10-r t-color8">t-color8</div>
    <div class="w15 pad10 mar5-b mar10-r t-color9">t-color9</div>
    <div class="w15 pad10 mar5-b mar10-r t-primary">t-primary</div>
    <div class="w15 pad10 mar5-b mar10-r t-gray">t-gray</div>
    <div class="w15 pad10 mar5-b mar10-r t-red">t-red</div>
    <div class="w15 pad10 mar5-b mar10-r t-brown">t-brown</div>
    <div class="w15 pad10 mar5-b mar10-r t-orange">t-orange</div>
    <div class="w15 pad10 mar5-b mar10-r t-yellow">t-yellow</div>
    <div class="w15 pad10 mar5-b mar10-r t-lime">t-lime</div>
    <div class="w15 pad10 mar5-b mar10-r t-green">t-green</div>
    <div class="w15 pad10 mar5-b mar10-r t-teal">t-teal</div>
    <div class="w15 pad10 mar5-b mar10-r t-cyan">t-cyan</div>
    <div class="w15 pad10 mar5-b mar10-r t-blue">t-blue</div>
    <div class="w15 pad10 mar5-b mar10-r t-indigo">t-indigo</div>
    <div class="w15 pad10 mar5-b mar10-r t-violet">t-violet</div>
    <div class="w15 pad10 mar5-b mar10-r t-purple">t-purple</div>
    <div class="w15 pad10 mar5-b mar10-r t-pink">t-pink</div>
</div>

<div class="b-flex mar10-t flex-wrap flex-ai-center">
    <div class="w15 pad10 mar5-b mar10-r bg-black t-color1">t-color1</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-color2">t-color2</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-color3">t-color3</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-color4">t-color4</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-color5">t-color5</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-color6">t-color6</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-color7">t-color7</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-color8">t-color8</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-color9">t-color9</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-primary">t-primary</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-gray">t-gray</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-red">t-red</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-brown">t-brown</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-orange">t-orange</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-yellow">t-yellow</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-lime">t-lime</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-green">t-green</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-teal">t-teal</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-cyan">t-cyan</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-blue">t-blue</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-indigo">t-indigo</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-violet">t-violet</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-purple">t-purple</div>
    <div class="w15 pad10 mar5-b mar10-r bg-black t-pink">t-pink</div>
</div>

<div class="mar10-t b-flex flex-wrap t-black flex-ai-center t90">
    <div class="w31 pad10 mar5-b mar10-r bg-color1">bg-color1 <br><span class="t-white">bg-color1</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-color2">bg-color2 <br><span class="t-white">bg-color2</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-color3">bg-color3 <br><span class="t-white">bg-color3</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-color4">bg-color4 <br><span class="t-white">bg-color4</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-color5">bg-color5 <br><span class="t-white">bg-color5</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-color6">bg-color6 <br><span class="t-white">bg-color6</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-color7">bg-color7 <br><span class="t-white">bg-color7</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-color8">bg-color8 <br><span class="t-white">bg-color8</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-color9">bg-color9 <br><span class="t-white">bg-color9</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-primary">bg-primary <br><span class="t-white">bg-primary</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-gray">bg-gray <br><span class="t-white">bg-gray</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-red">bg-red <br><span class="t-white">bg-red</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-brown">bg-brown <br><span class="t-white">bg-brown</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-orange">bg-orange <br><span class="t-white">bg-orange</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-yellow">bg-yellow <br><span class="t-white">bg-yellow</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-lime">bg-lime <br><span class="t-white">bg-lime</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-green">bg-green <br><span class="t-white">bg-green</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-teal">bg-teal <br><span class="t-white">bg-teal</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-cyan">bg-cyan <br><span class="t-white">bg-cyan</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-blue">bg-blue <br><span class="t-white">bg-blue</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-indigo">bg-indigo <br><span class="t-white">bg-indigo</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-violet">bg-violet <br><span class="t-white">bg-violet</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-purple">bg-purple <br><span class="t-white">bg-purple</span></div>
    <div class="w31 pad10 mar5-b mar10-r bg-pink">bg-pink <br><span class="t-white">bg-pink</span></div>
</div>

<div class="mar10-t b-flex flex-wrap flex-ai-center t-center">
    <div class="w20 bor2 bor-solid bor-black pad15 mar10-r">bor-black</div>
    <div class="w20 bg-black pad5"><div class="bor2 bor-solid bor-white pad10 t-white">bor-white</div></div>
</div>

<div class="mar10-t b-flex flex-wrap flex-ai-center t-center">
    <div class="w20 bor2 bor-solid bor-gray100 pad10 mar10-r mar10-b">bor-gray100</div>
    <div class="w20 bor2 bor-solid bor-gray200 pad10 mar10-r mar10-b">bor-gray200</div>
    <div class="w20 bor2 bor-solid bor-gray300 pad10 mar10-r mar10-b">bor-gray300</div>
    <div class="w20 bor2 bor-solid bor-gray400 pad10 mar10-r mar10-b">bor-gray400</div>
    <div class="w20 bor2 bor-solid bor-gray500 pad10 mar10-r mar10-b">bor-gray(500)</div>
    <div class="w20 bor2 bor-solid bor-gray600 pad10 mar10-r mar10-b">bor-gray600</div>
    <div class="w20 bor2 bor-solid bor-gray700 pad10 mar10-r mar10-b">bor-gray700</div>
    <div class="w20 bor2 bor-solid bor-gray800 pad10 mar10-r mar10-b">bor-gray800</div>
    <div class="w20 bor2 bor-solid bor-gray900 pad10 mar10-r mar10-b">bor-gray900</div>
</div>

<div class="mar10-tb b-flex flex-wrap flex-ai-center t-center">
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-color1">bor-color1</div>
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-color2">bor-color2</div>
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-color3">bor-color3</div>
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-color4">bor-color4</div>
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-color5">bor-color5</div>
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-color6">bor-color6</div>
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-color7">bor-color7</div>
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-color8">bor-color8</div>
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-color9">bor-color9</div>
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-primary">bor-primary</div>
</div>

<div class="mar10-tb b-flex flex-wrap flex-ai-center t-center">
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-red">bor-red</div>
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-brown">bor-brown</div>
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-orange">bor-orange</div>
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-yellow">bor-yellow</div>
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-lime">bor-lime</div>
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-green">bor-green</div>
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-teal">bor-teal</div>
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-cyan">bor-cyan</div>
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-blue">bor-blue</div>
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-indigo">bor-indigo</div>
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-violet">bor-violet</div>
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-purple">bor-purple</div>
    <div class="w20 mar10-r bor2 bor-solid pad10 mar10-b bor-pink">bor-pink</div>
</div>