Skip to content
Snippets Groups Projects
Commit 69264835 authored by xaralis's avatar xaralis
Browse files

Improve color palette

parent facb093e
No related branches found
No related tags found
No related merge requests found
Pipeline #756 passed
Stage: build
Hide whitespace changes
Inline Side-by-side
source/_patterns/00-atoms/00-global/00-brand-colors.mustache
+ 37
− 22
View file @ 69264835
<ul class="sg-colors">
<li>
<span class="sg-swatch bg-black"></span>
<span class="sg-label">Black<br>#00000;</span>
</li>
<li>
<span class="sg-swatch bg-white"></span>
<span class="sg-label">White<br>#ffffff</span>
</li>
<li>
<span class="sg-swatch bg-green-100"></span>
<span class="sg-label">Green 100<br>#29bc51</span>
</li>
<li>
<span class="sg-swatch bg-green-200"></span>
<span class="sg-label">Green 200<br>#26b34b</span>
</li>
<li>
<span class="sg-swatch bg-green-300"></span>
<span class="sg-label">Green 300<br>#22a244</span>
</li>
</ul>
<div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
<div class="card flex flex-col">
<div class="h-32 bg-black"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Black</p>
<p>#000000</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-white"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">White</p>
<p>#ffffff</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-green-100"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Green 100</p>
<p>#29bc51</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-green-200"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Green 200</p>
<p>#26b34b</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-green-300"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Green 300</p>
<p>#22a244</p>
</div>
</div>
</div>
source/_patterns/00-atoms/00-global/01-neutral-colors.mustache
+ 79
− 34
View file @ 69264835
<ul class="sg-colors">
<li>
<span class="sg-swatch bg-grey-50"></span>
<span class="sg-label">Grey 50<br>#f7f7f7</span>
</li>
<li>
<span class="sg-swatch bg-grey-100"></span>
<span class="sg-label">Grey 100<br>#f3f3f3</span>
</li>
<li>
<span class="sg-swatch bg-grey-150"></span>
<span class="sg-label">Grey 150<br>#00000012</span>
</li>
<li>
<span class="sg-swatch bg-grey-200"></span>
<span class="sg-label">Grey 200<br>#adadad</span>
</li>
<li>
<span class="sg-swatch bg-grey-300"></span>
<span class="sg-label">Grey 300<br>#4c4c4c</span>
</li>
<li>
<span class="sg-swatch bg-grey-400"></span>
<span class="sg-label">Grey 400<br>#343434</span>
</li>
<li>
<span class="sg-swatch bg-grey-700"></span>
<span class="sg-label">Grey 500<br>#202020</span>
</li>
<li>
<span class="sg-swatch bg-grey-800"></span>
<span class="sg-label">Grey 600<br>#1f1f1f</span>
</li>
</ul>
<div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
<div class="card flex flex-col">
<div class="h-32 bg-grey-50"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Grey 50</p>
<p>#f7f7f7</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-grey-100"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Grey 100</p>
<p>#f3f3f3</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-grey-125"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Grey 125</p>
<p>#f0f0f0</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-grey-150"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Grey 150</p>
<p>#00000012</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-grey-200"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Grey 200</p>
<p>#adadad</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-grey-300"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Grey 300</p>
<p>#4c4c4c</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-grey-400"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Grey 400</p>
<p>#343434</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-grey-500"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Grey 500</p>
<p>#303132</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-grey-600"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Grey 600</p>
<p>#262626</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-grey-700"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Grey 700</p>
<p>#202020</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-grey-800"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Grey 800</p>
<p>#1f1f1f</p>
</div>
</div>
</div>
source/_patterns/00-atoms/00-global/02-utility-colors.mustache
+ 9
− 6
View file @ 69264835
<ul class="sg-colors">
<li>
<span class="sg-swatch bg-red-100"></span>
<span class="sg-label">Red 100<br>#d6151b</span>
</li>
</ul>
<div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
<div class="card flex flex-col">
<div class="h-32 bg-red-100"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Red 100</p>
<p>#d6151b</p>
</div>
</div>
</div>
source/_patterns/00-atoms/00-global/03-3rd-brand-colors.mustache
+ 30
− 18
View file @ 69264835
<ul class="sg-colors">
<li>
<span class="sg-swatch bg-brands-facebook"></span>
<span class="sg-label">Facebook blue<br>#067ceb</span>
</li>
<li>
<span class="sg-swatch bg-brands-twitter"></span>
<span class="sg-label">Twitter blue<br>#00c9ff</span>
</li>
<li>
<span class="sg-swatch bg-brands-gmail"></span>
<span class="sg-label">Gmail red<br>#ec230e</span>
</li>
<li>
<span class="sg-swatch bg-brands-linkedin"></span>
<span class="sg-label">LinkedIn blue<br>#0066a9</span>
</li>
</ul>
<div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
<div class="card flex flex-col">
<div class="h-32 bg-brands-facebook"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Facebook</p>
<p>#067ceb</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-brands-twitter"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Twitter</p>
<p>#00c9ff</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-brands-gmail"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Gmail</p>
<p>#ec230e</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-brands-linkedin"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">LinkedIn</p>
<p>#0066a9</p>
</div>
</div>
</div>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Pirátský GitLab - Home of the CopyLeft