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 8d537a18c9a51c52d0872d5b8a8812b49b194d20..9cb7fef4c17f502213a2365c2a6db1389c258f04 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 addeba1c1e8527a3af223b88fecf54ba6087e020..edae8c5c2a493207429e62cedfb7dc463d9097ff 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 e428a1c50517185b8bc89489b9c5b19d1f44af21..3d6cf48742fe23f2115226da2d16c35a5d7042bb 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 a3f4f4952e50fecb767b16a0f6f75a14ac241eb1..dc45dc5f3ad7e467bcd5e1f050f1aa1a9ea3a246 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>