(work in progress)
Highest Contrast
WCAG AA
WEB AIM
Usage of Tokyo Theme Colors
(tbd)
| #id | Role | Value | |
|---|---|---|---|
| ? | Default page background | Tokyo 100 #202026 |
|
| ? | Default boardlet background | Tokyo 90 #292930 |
|
https://wasp2-dev.myapp.de:444/live-style-guide/theming
| Tokyo Colors | Brand | ||||||
|---|---|---|---|---|---|---|---|
| scss variables | #hex | scss variables | #hex | ||||
| Tokyo 100 | $tokyo-100 | #202026 | Brand 100 | $brand-100 | #957616 | ||
| Tokyo 90 | $tokyo-90 | #292930 | Brand 90 | $brand-90 | #A88724 | ||
| Tokyo 80 | $tokyo-80 | #373741 | Brand 80 | $brand-80 | #E0B535 | ||
| Tokyo 70 | $tokyo-70 | #535359 | Brand 70 | $brand-70 | #FACA3D | ||
| Tokyo 60 | $tokyo-60 | #7E7E82 | Brand 60 | $brand-60 | #FAD465 | ||
| Tokyo 50 | $tokyo-50 | #A9A9AC | Brand 50 | $brand-50 | #FBDC83 | ||
| Tokyo 40 | $tokyo-40 | #BCBCBE | Brand 40 | $brand-40 | #FCE5A2 | ||
| Tokyo 30 | $tokyo-30 | #D4D4D5 | Brand 30 | $brand-30 | #FDEDC1 | ||
| Tokyo 20 | $tokyo-20 | #EFEFEF | Brand 20 | $brand-20 | #FEF6E0 | ||
| Tokyo 10 | $tokyo-10 | #FFFFFF | Brand 10 | $brand-10 | #FDFBF4 |
| Alerts Colors | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Danger | scss variables | #hex | Warning | scss variables | #hex | Success | scss variables | #hex | Note | scss variables | #hex | ||||
| Danger 100 | $danger-100 | #F50B09 | Warning 100 | $warning-100 | #FF7A00 | Success 100 | $success-100 | #7FD966 | Note 100 | $note-100 | #14D2FF | ||||
| Danger 80 | $danger-80 | #F55150 | Warning 80 | $warning-80 | #FF902A | Success 80 | $success-80 | #94DF7F | Note 80 | $note-80 | #3BD9FF | ||||
| Danger 60 | $danger-60 | #F77373 | Warning 60 | $warning-60 | #FFA655 | Success 60 | $success-60 | #A9E599 | Note 60 | $note-60 | #62E1FF | ||||
| Danger 40 | $danger-40 | #F99696 | Warning 40 | $warning-40 | #FFBC7F | Success 40 | $success-40 | #BFECB2 | Note 40 | $note-40 | #89E8FF | ||||
| Danger 20 | $danger-20 | #FBB9B9 | Warning 20 | $warning-20 | #FFD2AA | Success 20 | $success-20 | #D4F2CC | Note 20 | $note-20 | #B0F0FF | ||||
| Danger 00 | #FDDCDC | Warning 00 | #FFE8D4 | Success 00 | #E9F8E5 | Note 00 | #D7F7FF | ||||||||
| Colors | |||
|---|---|---|---|
| scss variables | #hex | ||
| Tokyo 100 | $tokyo-100 | #202026 | |
| Tokyo 90 | $tokyo-90 | #292930 | |
| Tokyo 80 | $tokyo-80 | #373741 | |
| Tokyo 70 | $tokyo-70 | #535359 | |
| Tokyo 60 | $tokyo-60 | #7E7E82 | |
| Tokyo 50 | $tokyo-50 | #A9A9AC | |
| Tokyo 40 | $tokyo-40 | #BCBCBE | |
| Tokyo 30 | $tokyo-30 | #D4D4D5 | |
| Tokyo 20 | $tokyo-20 | #EFEFEF | |
| Tokyo 10 | $tokyo-10 | #FFFFFF |
