From 692648355aff5a5e6694d056c3d4c6a46c3d959c Mon Sep 17 00:00:00 2001 From: xaralis <filip.varecha@fragaria.cz> Date: Wed, 24 Jun 2020 08:49:18 +0200 Subject: [PATCH] Improve color palette --- .../00-global/00-brand-colors.mustache | 59 +++++---- .../00-global/01-neutral-colors.mustache | 113 ++++++++++++------ .../00-global/02-utility-colors.mustache | 15 ++- .../00-global/03-3rd-brand-colors.mustache | 48 +++++--- 4 files changed, 155 insertions(+), 80 deletions(-) diff --git a/source/_patterns/00-atoms/00-global/00-brand-colors.mustache b/source/_patterns/00-atoms/00-global/00-brand-colors.mustache index 8d537a1..9cb7fef 100644 --- a/source/_patterns/00-atoms/00-global/00-brand-colors.mustache +++ b/source/_patterns/00-atoms/00-global/00-brand-colors.mustache @@ -1,22 +1,37 @@ -<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> diff --git a/source/_patterns/00-atoms/00-global/01-neutral-colors.mustache b/source/_patterns/00-atoms/00-global/01-neutral-colors.mustache index addeba1..edae8c5 100644 --- a/source/_patterns/00-atoms/00-global/01-neutral-colors.mustache +++ b/source/_patterns/00-atoms/00-global/01-neutral-colors.mustache @@ -1,34 +1,79 @@ -<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> diff --git a/source/_patterns/00-atoms/00-global/02-utility-colors.mustache b/source/_patterns/00-atoms/00-global/02-utility-colors.mustache index e428a1c..3d6cf48 100644 --- a/source/_patterns/00-atoms/00-global/02-utility-colors.mustache +++ b/source/_patterns/00-atoms/00-global/02-utility-colors.mustache @@ -1,6 +1,9 @@ -<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> diff --git a/source/_patterns/00-atoms/00-global/03-3rd-brand-colors.mustache b/source/_patterns/00-atoms/00-global/03-3rd-brand-colors.mustache index a3f4f49..dc45dc5 100644 --- a/source/_patterns/00-atoms/00-global/03-3rd-brand-colors.mustache +++ b/source/_patterns/00-atoms/00-global/03-3rd-brand-colors.mustache @@ -1,18 +1,30 @@ -<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> -- GitLab