-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
style: 💄 Working on secondary colours
- Loading branch information
Showing
2 changed files
with
211 additions
and
154 deletions.
There are no files selected for viewing
332 changes: 187 additions & 145 deletions
332
embedded_gems/pathogen/previews/colour_preview/background.html.erb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,156 +1,198 @@ | ||
| <h2 class="text-lg font-bold">Background Colours</h2> | ||
|
|
||
| <table | ||
| <div | ||
| class=" | ||
| w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 | ||
| bg-light-default dark:bg-dark-default text-light-default dark:text-dark-default | ||
| grid grid-cols-1 gap-4 | ||
| " | ||
| > | ||
| <thead | ||
| class=" | ||
| text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400 | ||
| " | ||
| > | ||
| <tr> | ||
| <th class="px-6 py-3">Colour</th> | ||
| <th class="px-6 py-3">Class</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | ||
| <td class="px-6 py-4"> | ||
| <div class="bg-light-brand-primary dark:bg-dark-brand-primary h-6 w-6 rounded"></div> | ||
| </td> | ||
| <td class="px-6 py-4 font-mono"> | ||
| bg-light-brand-primary dark:bg-dark-brand-primary | ||
| </td> | ||
| </tr> | ||
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | ||
| <td class="px-6 py-4"> | ||
| <div | ||
| class=" | ||
| bg-light-brand-primary-hover dark:bg-dark-brand-primary-hover h-6 w-6 rounded | ||
| " | ||
| ></div> | ||
| </td> | ||
| <td class="px-6 py-4 font-mono"> | ||
| bg-light-brand-primary-hover dark:bg-dark-brand-primary-hover | ||
| </td> | ||
| </tr> | ||
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | ||
| <td class="px-6 py-4"> | ||
| <div | ||
| class=" | ||
| bg-light-brand-secondary dark:bg-dark-brand-secondary h-6 w-6 rounded | ||
| " | ||
| ></div> | ||
| </td> | ||
| <td class="px-6 py-4 font-mono"> | ||
| bg-light-brand-secondary dark:bg-dark-brand-secondary | ||
| </td> | ||
| </tr> | ||
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | ||
| <td class="px-6 py-4"> | ||
| <div | ||
| class=" | ||
| bg-light-neutral-primary dark:bg-dark-neutral-primary h-6 w-6 rounded | ||
| " | ||
| ></div> | ||
| </td> | ||
| <td class="px-6 py-4 font-mono"> | ||
| bg-light-neutral-primary dark:bg-dark-neutral-primary | ||
| </td> | ||
| </tr> | ||
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | ||
| <td class="px-6 py-4"> | ||
| <div | ||
| class=" | ||
| bg-light-neutral-primary-hover dark:bg-dark-neutral-primary-hover h-6 w-6 | ||
| rounded | ||
| " | ||
| ></div> | ||
| </td> | ||
| <td class="px-6 py-4 font-mono"> | ||
| bg-light-neutral-primary-hover dark:bg-dark-neutral-primary-hover | ||
| </td> | ||
| </tr> | ||
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | ||
| <td class="px-6 py-4"> | ||
| <div | ||
| <h2 class="text-lg font-bold">Background Colours</h2> | ||
|
|
||
| <table class=" w-full text-sm text-left "> | ||
| <thead | ||
| class=" | ||
| text-xs bg-light-neutral-primary uppercase text-light-onneutral-primary | ||
| dark:bg-dark-neutral-primary dark:text-dark-onneutral-primary | ||
| " | ||
| > | ||
| <tr> | ||
| <th class="px-6 py-3">Colour</th> | ||
| <th class="px-6 py-3">Class</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700"> | ||
| <td class="px-6 py-4"> | ||
| <div class="bg-light-brand-primary dark:bg-dark-brand-primary h-6 w-6 rounded"></div> | ||
| </td> | ||
| <td class="px-6 py-4 font-mono"> | ||
| bg-light-brand-primary dark:bg-dark-brand-primary | ||
| </td> | ||
| </tr> | ||
| <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700"> | ||
| <td class="px-6 py-4"> | ||
| <div | ||
| class=" | ||
| bg-light-brand-primary-hover dark:bg-dark-brand-primary-hover h-6 w-6 rounded | ||
| " | ||
| ></div> | ||
| </td> | ||
| <td class="px-6 py-4 font-mono"> | ||
| bg-light-brand-primary-hover dark:bg-dark-brand-primary-hover | ||
| </td> | ||
| </tr> | ||
| <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700"> | ||
| <td class="px-6 py-4"> | ||
| <div | ||
| class=" | ||
| bg-light-brand-secondary dark:bg-dark-brand-secondary h-6 w-6 rounded | ||
| " | ||
| ></div> | ||
| </td> | ||
| <td class="px-6 py-4 font-mono"> | ||
| bg-light-brand-secondary dark:bg-dark-brand-secondary | ||
| </td> | ||
| </tr> | ||
| <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700"> | ||
| <td class="px-6 py-4"> | ||
| <div | ||
| class=" | ||
| bg-light-neutral-primary dark:bg-dark-neutral-primary h-6 w-6 rounded | ||
| " | ||
| ></div> | ||
| </td> | ||
| <td class="px-6 py-4 font-mono"> | ||
| bg-light-neutral-primary dark:bg-dark-neutral-primary | ||
| </td> | ||
| </tr> | ||
| <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700"> | ||
| <td class="px-6 py-4"> | ||
| <div | ||
| class=" | ||
| bg-light-neutral-primary-hover dark:bg-dark-neutral-primary-hover h-6 w-6 | ||
| rounded | ||
| " | ||
| ></div> | ||
| </td> | ||
| <td class="px-6 py-4 font-mono"> | ||
| bg-light-neutral-primary-hover dark:bg-dark-neutral-primary-hover | ||
| </td> | ||
| </tr> | ||
| <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700"> | ||
| <td class="px-6 py-4"> | ||
| <div | ||
| class=" | ||
| bg-light-neutral-secondary dark:bg-dark-neutral-secondary h-6 w-6 rounded | ||
| " | ||
| ></div> | ||
| </td> | ||
| <td class="px-6 py-4 font-mono"> | ||
| bg-light-neutral-secondary dark:bg-dark-neutral-secondary | ||
| </td> | ||
| </tr> | ||
| <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700"> | ||
| <td class="px-6 py-4"> | ||
| <div | ||
| class=" | ||
| bg-light-danger-primary dark:bg-dark-danger-primary h-6 w-6 rounded | ||
| " | ||
| ></div> | ||
| </td> | ||
| <td class="px-6 py-4 font-mono"> | ||
| bg-light-danger-primary dark:bg-dark-danger-primary | ||
| </td> | ||
| </tr> | ||
| <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700"> | ||
| <td class="px-6 py-4"> | ||
| <div | ||
| class=" | ||
| bg-light-danger-primary-hover dark:bg-dark-danger-primary-hover h-6 w-6 rounded | ||
| " | ||
| ></div> | ||
| </td> | ||
| <td class="px-6 py-4 font-mono"> | ||
| bg-light-danger-primary-hover dark:bg-dark-danger-primary-hover | ||
| </td> | ||
| </tr> | ||
| <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700"> | ||
| <td class="px-6 py-4"> | ||
| <div | ||
| class=" | ||
| bg-light-danger-secondary dark:bg-dark-danger-secondary h-6 w-6 rounded | ||
| " | ||
| ></div> | ||
| </td> | ||
| <td class="px-6 py-4 font-mono"> | ||
| bg-light-danger-secondary dark:bg-dark-danger-secondary | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <h2 class="text-lg font-bold">Text Colours</h2> | ||
|
|
||
| <table class=" w-full text-sm text-left "> | ||
| <thead | ||
| class=" | ||
| text-xs bg-light-neutral-primary uppercase dark:bg-dark-neutral-primary | ||
| text-light-onneutral-primary dark:text-dark-onneutral-primary | ||
| " | ||
| > | ||
| <tr> | ||
| <th class="px-6 py-3">Colour</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700"> | ||
| <td | ||
| class=" | ||
| bg-light-neutral-secondary dark:bg-dark-neutral-secondary h-6 w-6 rounded | ||
| px-6 py-4 text-light-default dark:text-dark-default font-mono bg-light-default | ||
| dark:bg-dark-default | ||
| " | ||
| ></div> | ||
| </td> | ||
| <td class="px-6 py-4 font-mono"> | ||
| bg-light-neutral-secondary dark:bg-dark-neutral-secondary | ||
| </td> | ||
| </tr> | ||
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | ||
| <td class="px-6 py-4"> | ||
| <div | ||
| > | ||
| text-light-default dark:text-dark-default | ||
| </td> | ||
| </tr> | ||
| <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700"> | ||
| <td | ||
| class=" | ||
| bg-light-danger-primary dark:bg-dark-danger-primary h-6 w-6 rounded | ||
| px-6 py-4 text-light-onbrand-primary dark:text-dark-onbrand-primary font-mono | ||
| bg-light-brand-primary dark:bg-dark-brand-primary | ||
| " | ||
| ></div> | ||
| </td> | ||
| <td class="px-6 py-4 font-mono"> | ||
| bg-light-danger-primary dark:bg-dark-danger-primary | ||
| </td> | ||
| </tr> | ||
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | ||
| <td class="px-6 py-4"> | ||
| <div | ||
| > | ||
| text-light-onbrand-primary dark:text-dark-onbrand-primary | ||
| </td> | ||
| </tr> | ||
| <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700"> | ||
| <td | ||
| class=" | ||
| bg-light-danger-primary-hover dark:bg-dark-danger-primary-hover h-6 w-6 rounded | ||
| px-6 py-4 text-light-onneutral-primary dark:text-dark-onneutral-primary | ||
| font-mono bg-light-neutral-primary dark:bg-dark-neutral-primary | ||
| " | ||
| ></div> | ||
| </td> | ||
| <td class="px-6 py-4 font-mono"> | ||
| bg-light-danger-primary-hover dark:bg-dark-danger-primary-hover | ||
| </td> | ||
| </tr> | ||
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | ||
| <td class="px-6 py-4"> | ||
| <div | ||
| > | ||
| text-light-onneutral-primary dark:text-dark-onneutral-primary | ||
| </td> | ||
| </tr> | ||
| <tr class="bg-light-default border-b dark:bg-dark-default dark:border-gray-700"> | ||
| <td | ||
| class=" | ||
| bg-light-danger-secondary dark:bg-dark-danger-secondary h-6 w-6 rounded | ||
| px-6 py-4 text-light-ondanger-primary dark:text-dark-ondanger-primary font-mono | ||
| bg-light-danger-primary dark:bg-dark-danger-primary | ||
| " | ||
| ></div> | ||
| </td> | ||
| <td class="px-6 py-4 font-mono"> | ||
| bg-light-danger-secondary dark:bg-dark-danger-secondary | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <h2 class="text-lg font-bold">Text Colours</h2> | ||
|
|
||
| <table | ||
| class=" | ||
| w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 | ||
| " | ||
| > | ||
| <thead | ||
| class=" | ||
| text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400 | ||
| " | ||
| > | ||
| <tr> | ||
| <th class="px-6 py-3">Colour</th> | ||
| <th class="px-6 py-3">Class</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | ||
| <td | ||
| class=" | ||
| px-6 py-4 text-light-neutral-onprimary dark:text-dark-neutral-onprimary | ||
| font-mono bg-light-brand-primary | ||
| " | ||
| > | ||
| text-light-neutral-onprimary dark:text-dark-neutral-onprimary | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| > | ||
| text-light-ondanger-primary dark:text-dark-ondanger-primary | ||
| </td> | ||
| </tr> | ||
| <tr class="bg-light-brand-primary dark:bg-dark-brand-primary"> | ||
| <td class="px-6 py-4 font-mono"> | ||
| <div | ||
| class=" | ||
| bg-light-brand-secondary dark:bg-dark-brand-secondary | ||
| text-light-onbrand-secondary dark:text-dark-onbrand-secondary p-2 rounded | ||
| " | ||
| > | ||
| bg-light-brand-secondary dark:bg-dark-brand-secondary | ||
| </div> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> |
Oops, something went wrong.