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"> <div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
<li> <div class="card flex flex-col">
<span class="sg-swatch bg-black"></span> <div class="h-32 bg-black"></div>
<span class="sg-label">Black<br>#00000;</span> <div class="card__body p-2 flex">
</li> <p class="font-bold flex-grow">Black</p>
<li> <p>#000000</p>
<span class="sg-swatch bg-white"></span> </div>
<span class="sg-label">White<br>#ffffff</span> </div>
</li> <div class="card flex flex-col">
<li> <div class="h-32 bg-white"></div>
<span class="sg-swatch bg-green-100"></span> <div class="card__body p-2 flex">
<span class="sg-label">Green 100<br>#29bc51</span> <p class="font-bold flex-grow">White</p>
</li> <p>#ffffff</p>
<li> </div>
<span class="sg-swatch bg-green-200"></span> </div>
<span class="sg-label">Green 200<br>#26b34b</span> <div class="card flex flex-col">
</li> <div class="h-32 bg-green-100"></div>
<li> <div class="card__body p-2 flex">
<span class="sg-swatch bg-green-300"></span> <p class="font-bold flex-grow">Green 100</p>
<span class="sg-label">Green 300<br>#22a244</span> <p>#29bc51</p>
</li> </div>
</ul> </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"> <div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
<li> <div class="card flex flex-col">
<span class="sg-swatch bg-grey-50"></span> <div class="h-32 bg-grey-50"></div>
<span class="sg-label">Grey 50<br>#f7f7f7</span> <div class="card__body p-2 flex">
</li> <p class="font-bold flex-grow">Grey 50</p>
<li> <p>#f7f7f7</p>
<span class="sg-swatch bg-grey-100"></span> </div>
<span class="sg-label">Grey 100<br>#f3f3f3</span> </div>
</li> <div class="card flex flex-col">
<li> <div class="h-32 bg-grey-100"></div>
<span class="sg-swatch bg-grey-150"></span> <div class="card__body p-2 flex">
<span class="sg-label">Grey 150<br>#00000012</span> <p class="font-bold flex-grow">Grey 100</p>
</li> <p>#f3f3f3</p>
<li> </div>
<span class="sg-swatch bg-grey-200"></span> </div>
<span class="sg-label">Grey 200<br>#adadad</span> <div class="card flex flex-col">
</li> <div class="h-32 bg-grey-125"></div>
<li> <div class="card__body p-2 flex">
<span class="sg-swatch bg-grey-300"></span> <p class="font-bold flex-grow">Grey 125</p>
<span class="sg-label">Grey 300<br>#4c4c4c</span> <p>#f0f0f0</p>
</li> </div>
<li> </div>
<span class="sg-swatch bg-grey-400"></span> <div class="card flex flex-col">
<span class="sg-label">Grey 400<br>#343434</span> <div class="h-32 bg-grey-150"></div>
</li> <div class="card__body p-2 flex">
<li> <p class="font-bold flex-grow">Grey 150</p>
<span class="sg-swatch bg-grey-700"></span> <p>#00000012</p>
<span class="sg-label">Grey 500<br>#202020</span> </div>
</li> </div>
<li> <div class="card flex flex-col">
<span class="sg-swatch bg-grey-800"></span> <div class="h-32 bg-grey-200"></div>
<span class="sg-label">Grey 600<br>#1f1f1f</span> <div class="card__body p-2 flex">
</li> <p class="font-bold flex-grow">Grey 200</p>
</ul> <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"> <div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
<li> <div class="card flex flex-col">
<span class="sg-swatch bg-red-100"></span> <div class="h-32 bg-red-100"></div>
<span class="sg-label">Red 100<br>#d6151b</span> <div class="card__body p-2 flex">
</li> <p class="font-bold flex-grow">Red 100</p>
</ul> <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"> <div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
<li> <div class="card flex flex-col">
<span class="sg-swatch bg-brands-facebook"></span> <div class="h-32 bg-brands-facebook"></div>
<span class="sg-label">Facebook blue<br>#067ceb</span> <div class="card__body p-2 flex">
</li> <p class="font-bold flex-grow">Facebook</p>
<li> <p>#067ceb</p>
<span class="sg-swatch bg-brands-twitter"></span> </div>
<span class="sg-label">Twitter blue<br>#00c9ff</span> </div>
</li> <div class="card flex flex-col">
<li> <div class="h-32 bg-brands-twitter"></div>
<span class="sg-swatch bg-brands-gmail"></span> <div class="card__body p-2 flex">
<span class="sg-label">Gmail red<br>#ec230e</span> <p class="font-bold flex-grow">Twitter</p>
</li> <p>#00c9ff</p>
<li> </div>
<span class="sg-swatch bg-brands-linkedin"></span> </div>
<span class="sg-label">LinkedIn blue<br>#0066a9</span> <div class="card flex flex-col">
</li> <div class="h-32 bg-brands-gmail"></div>
</ul> <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