These tables are generated from src/web/index.css each time the site
builds. Change a token in the app and it changes here.
| Token | Light | Dark |
|---|
| --color-action | #f26c63 | same |
| --color-action-dark | #9a3b33 | same |
| --color-action-light | #ffe9e7 | #3d1814 |
| --color-action-2 | #f9c4c0 | #96332c |
| --color-action-3 | #f7a6a1 | #d63429 |
| --color-action-4 | #f48982 | #e74c40 |
| --color-carousel-dot-inactive | #f9c4c0 | same |
| --color-on-dark | #ffffff | #0d1817 |
| --color-green | #2c7a7b | #1c4f50 |
| --color-green-dark | #184242 | #2a4e50 |
| --color-green-light | #e6f5f5 | #101715 |
| --color-green-50 | #8ca1a1 | same |
| --color-green-10 | #e8ecec | same |
| --color-footer | #184242 | #101715 |
| --color-card-border | #184242 | #639c9c |
| --color-highlight-border | #184242 | #639c9c |
| --color-info-text | #184242 | #e6f5f5 |
| --color-ink-faint | #2c7a7b | #7fa39f |
| --color-cream | #f9f3ef | #322720 |
| --color-teal | #80afaf | #1f3b39 |
| --color-teal-light | #d4e4e4 | same |
| --color-teal-dark | #639c9c | #1f3b39 |
| --color-bg | #f5f5f5 | #1a1a1a |
| --color-text-alt | #111111 | #f5f5f5 |
| --color-field | #184242 | #ffffff |
| --color-field-bg | #ffffff | #1a1a1a |
| --color-error | #bf3226 | #f0a59d |
| --color-success | #2e7a44 | #7fc7a3 |
| --color-warning | #916627 | #e0b163 |
| --color-info | #2f738d | #7cc2dd |
| --color-success-bg | #e5f5eb | #16301f |
| --color-warning-bg | #fff5e5 | #382a12 |
| --color-info-bg | #e5f2f7 | #132b33 |
| --color-error-bg | #fbe3e1 | #3a1d1a |
| --color-admin | #b2306f | #e58ab6 |
| --color-admin-bg | #f6dce9 | #3a1428 |
| --color-adding | #2456c9 | #7fa0ee |
| --color-adding-bg | #dde5fa | #152245 |
| --color-voting | #1f7a52 | #5cc292 |
| --color-voting-bg | #d2ebdd | #0e2c1f |
| --color-option-1 | #7b4fbf | #9a78ce |
| --color-option-1-bg | #f1e9fb | #271b37 |
| --color-option-2 | #ad5129 | #d5774e |
| --color-option-2-bg | #fdeae0 | #3b2317 |
| --color-option-3 | #0d7681 | #13aab9 |
| --color-option-3-bg | #d6f3f5 | #1c3435 |
| --color-select-hover | #fafafa | #477070 |
| --color-idcard-bg | #639c9c | #123a35 |
| --color-idcard-border | #184242 | #639c9c |
| --color-idcard-pill-bg | #184242 | #20302c |
| --color-idcard-pill-border | #e6f5f5 | #639c9c |
| --color-idcard-pill-text | #e6f5f5 | same |
| --color-stattile-bg | #184242 | #20302c |
| --color-stattile-border | #e6f5f5 | #639c9c |
| --color-titlepill-bg | #184242 | #20302c |
| --color-titlepill-border | #2c7a7b | #639c9c |
| --color-titlepill-icon | #2c7a7b | #1c4f50 |
| --color-titlepill-icon-fg | #ffffff | #e6f5f5 |
| --color-logo-badge-bg | #e6f5f5 | #101715 |
| --color-logo-badge-border | #184242 | #639c9c |
| --color-titlepill-text | #e6f5f5 | same |
| --color-photocard-border | #184242 | #639c9c |
| --color-avatar-fallback | #0d9488 | #123a35 |
| --color-photocard-caption | #d4e4e4 | #a6cecb |
| Token | Light | Dark |
|---|
--radius-card | 30px | same |
--radius-button | 15px | same |
| Token | Light | Dark |
|---|
--shadow-elevated | 0px 4px 8px 0px rgba(0, 0, 0, 0.15) | same |
| Token | Light | Dark |
|---|
--text-h1 | 2rem | same |
--text-h2 | 1.75rem | same |
--text-h3 | 1.5rem | same |
--text-h4 | 1.25rem | same |
--text-h5 | 1.125rem | same |
--text-h6 | 1rem | same |
--text-body-1 | 1rem | same |
--text-body-2 | 0.875rem | same |
--text-label | 0.75rem | same |
