Подбор цветов в Berry CSS

Примеры цветовых сочетаний ³⁰

<h1 class="mar30-b">Подбор цветов в Berry CSS</h1>

<!-- AlpineJS -->
<div x-data="{aColor: 'gray', aValue: 700, bColor: 'gray', bValue: 100, colors: ['gray', 'red', 'brown', 'orange', 'yellow', 'lime', 'green', 'teal', 'cyan', 'blue', 'indigo', 'violet', 'purple', 'pink', 'primary']}">
    <div class="b-flex">
        <div class="mar10">
            <span class="t-bold">Первый цвет</span>
            <select x-model="aColor" class="form-input">
                <template x-for="i in colors">
                    <option :value="i" x-text="i" :class="'t-' + i + '650'"></option>
                </template>
            </select>
            <select x-model="aValue" class="form-input">
                <template x-for="i in 19">
                    <!-- nosimple --><option :value="i * 50" x-text="i * 50" :selected="(i==14)"></option><!-- /nosimple -->
                </template>
            </select>
        </div>

        <div class="mar10">
            <span class="t-bold">Второй цвет</span>
            <select x-model="bColor" class="form-input">
                <template x-for="i in colors">
                    <option :value="i" x-text="i" :class="'t-' + i + '650'"></option>
                </template>
            </select>
            <select x-model="bValue" class="form-input">
                <template x-for="i in 19">
                    <!-- nosimple --><option :value="i * 50" x-text="i * 50" :selected="(i==2)"></option><!-- /nosimple -->
                </template>
            </select>
        </div>
    </div>

    <div class="mar30-t mar50-b">

        <div class="flex flex-wrap-tablet mar50-b t90 flex-vcenter">
            <div class="w5col w100-tablet">
                <div :class="'bg-' + aColor + aValue" class="pad30-rl pad20-tb" style="border-radius: 10px 10px 0 0;">
                    <div :class="'t-' + bColor + bValue" class="t300 t-georgia lh100 bold">Lorem ipsum dolor</div>
                    <div :class="'t-' + bColor + bValue" class="mar20-tb">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet dolores provident dolore, obcaecati facere minus quia repellendus fugit pariatur quam iure deserunt eum repellat voluptate nesciunt doloremque accusantium! Ipsum, illum.</div>
                    <div class=""><button :class="'bg-' + bColor + bValue + ' t-' + aColor + aValue + ' hover-bg-' + aColor + (aValue-100)" class="button rounded10">Button</button> <a class="mar20-l" :class="'t-' + bColor + bValue + ' hover-t-' + aColor + (aValue-100)" href="#">Link</a></div>
                </div>
                <div :class="'bg-' + bColor + bValue + ' t-' + aColor + aValue" class="pad30-rl pad10-tb" style="border-radius: 0 0 10px 10px;">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
            </div>

            <div class="w1col w100-tablet b-flex flex-wrap flex-jc-center flex-ai-center mar10-tb">
                <div x-text="aColor + aValue" :class="'bg-' + aColor + aValue + ' t-' + bColor + bValue" class="pad10 rounded20"></div>
                <div x-text="bColor + bValue" :class="'bg-' + bColor + bValue + ' t-' + aColor + aValue" class="pad10 rounded20 mar10-tb"></div>
            </div>

            <div class="w5col w100-tablet">
                <div :class="'bg-' + bColor + bValue" class="pad30-rl pad20-tb" style="border-radius: 10px 10px 0 0;">
                    <div :class="'t-' + aColor + aValue" class="t300 t-georgia lh100 bold">Lorem ipsum dolor</div>
                    <div :class="'t-' + aColor + aValue" class="mar20-tb">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet dolores provident dolore, obcaecati facere minus quia repellendus fugit pariatur quam iure deserunt eum repellat voluptate nesciunt doloremque accusantium! Ipsum, illum.</div>
                    <div class=""><button :class="'bg-' + aColor + aValue + ' t-' + bColor + bValue + ' hover-bg-' + aColor + (aValue-100)" class="button rounded10">Button</button> <a class="mar20-l" :class="'t-' + aColor + aValue + ' hover-t-' + bColor + (bValue-100)" href="#">Link</a></div>
                </div>
                <div :class="'bg-' + aColor + aValue + ' t-' + bColor + bValue" class="pad30-rl pad10-tb" style="border-radius: 0 0 10px 10px;">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
            </div>
        </div>
    </div>
</div>

<h1>Примеры цветовых сочетаний <sup>30</sup></h1>

<div x-data='{colors: [{"a":"blue700","b":"gray100"},{"a":"blue500","b":"green100"},{"a":"teal800","b":"yellow400"},{"a":"purple700","b":"red100"},{"a":"brown800","b":"red100"},{"a":"violet750","b":"yellow300"},{"a":"gray800","b":"cyan200"},{"a":"lime750","b":"green100"},{"a":"brown600","b":"yellow200"},{"a":"green700","b":"gray100"},{"a":"red800","b":"gray150"},{"a":"indigo750","b":"red50"},{"a":"orange850","b":"yellow350"},{"a":"teal700","b":"green150"},{"a":"green900","b":"lime500"},{"a":"purple800","b":"yellow200"},{"a":"violet750","b":"pink100"},{"a":"pink750","b":"teal100"},{"a":"pink550","b":"red100"},{"a":"cyan700","b":"yellow200"},{"a":"orange500","b":"yellow100"},{"a":"yellow700","b":"violet100"},{"a":"indigo600","b":"gray150"},{"a":"gray700","b":"yellow350"},{"a":"pink750","b":"brown200"},{"a":"blue800","b":"indigo150"},{"a":"indigo800","b":"yellow250"},{"a":"orange650","b":"gray100"},{"a":"green850","b":"indigo100"},{"a":"red600","b":"pink100"}]}' class="mar50-t">
    <template x-for="color in colors" >
        <div class="flex flex-wrap-tablet mar50-b t90 flex-vcenter">
            <div class="w5col w100-tablet">
                <div :class="'bg-' + color.a" class="pad30-rl pad20-tb" style="border-radius: 10px 10px 0 0;">
                    <div :class="'t-' + color.b" class="t300 t-georgia lh100 bold">Lorem ipsum dolor</div>
                    <div :class="'t-' + color.b" class="mar20-tb">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet dolores provident dolore, obcaecati facere minus quia repellendus fugit pariatur quam iure deserunt eum repellat voluptate nesciunt doloremque accusantium! Ipsum, illum.</div>
                    <div class=""><button :class="'bg-' + color.b + ' t-' + color.a" class="button rounded10">Button</button></div>
                </div>
                <div :class="'bg-' + color.b + ' t-' + color.a" class="pad30-rl pad10-tb" style="border-radius: 0 0 10px 10px;">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
            </div>

            <div class="w1col w100-tablet b-flex flex-wrap flex-jc-center flex-ai-center mar10-tb">
                <div x-text="color.a" :class="'bg-' + color.a + ' t-' + color.b" class="pad10 rounded20"></div>
                <div x-text="color.b" :class="'bg-' + color.b + ' t-' + color.a" class="pad10 rounded20 mar10-tb"></div>
            </div>

            <div class="w5col w100-tablet">
                <div :class="'bg-' + color.b" class="pad30-rl pad20-tb" style="border-radius: 10px 10px 0 0;">
                    <div :class="'t-' + color.a" class="t300 t-georgia lh100 bold">Lorem ipsum dolor</div>
                    <div :class="'t-' + color.a" class="mar20-tb">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet dolores provident dolore, obcaecati facere minus quia repellendus fugit pariatur quam iure deserunt eum repellat voluptate nesciunt doloremque accusantium! Ipsum, illum.</div>
                    <div class=""><button :class="'bg-' + color.a + ' t-' + color.b" class="button rounded10">Button</button></div>
                </div>
                <div :class="'bg-' + color.a + ' t-' + color.b" class="pad30-rl pad10-tb" style="border-radius: 0 0 10px 10px;">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
            </div>
        </div>
    </template>
</div>