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 | Alerts Colors | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| scss variables | #hex | scss variables | #hex | Danger | scss variables | #hex | Warning | scss variables | #hex | Success | scss variables | #hex | Note | scss variables | #hex | ||||||||
| Tokyo 100 | $tokyo-100 | #202026 | Brand 100 | $brand-100 | #957616 | Danger 100 | $danger-100 | #F50B09 | Warning 100 | $warning-100 | #FF7A00 | Success 100 | $success-100 | #7FD966 | Note 100 | $note-100 | #14D2FF | ||||||
| Tokyo 90 | $tokyo-90 | #292930 | Brand 90 | $brand-90 | #A88724 | Danger 80 | $danger-80 | #F55150 | Warning 80 | $warning-80 | #FF902A | Success 80 | $success-80 | #94DF7F | Note 80 | $note-80 | #3BD9FF | ||||||
| Tokyo 80 | $tokyo-80 | #373741 | Brand 80 | $brand-80 | #E0B535 | Danger 60 | $danger-60 | #F77373 | Warning 60 | $warning-60 | #FFA655 | Success 60 | $success-60 | #A9E599 | Note 60 | $note-60 | #62E1FF | ||||||
| Tokyo 70 | $tokyo-70 | #535359 | Brand 70 | $brand-70 | #FACA3D | Danger 40 | $danger-40 | #F99696 | Warning 40 | $warning-40 | #FFBC7F | Success 40 | $success-40 | #BFECB2 | Note 40 | $note-40 | #89E8FF | ||||||
| Tokyo 60 | $tokyo-60 | #7E7E82 | Brand 60 | $brand-60 | #FAD465 | Danger 20 | $danger-20 | #FBB9B9 | Warning 20 | $warning-20 | #FFD2AA | Success 20 | $success-20 | #D4F2CC | Note 20 | $note-20 | #B0F0FF | ||||||
| Tokyo 50 | $tokyo-50 | #A9A9AC | Brand 50 | $brand-50 | #FBDC83 | Danger 00 | #FDDCDC | Warning 00 | #FFE8D4 | Success 00 | #E9F8E5 | Note 00 | #D7F7FF | ||||||||||
| 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 |
| Tokyo Colors | Brand | Alerts Colors | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| scss variables | #hex | scss variables | #hex | Danger | scss variables | #hex | Warning | scss variables | #hex | Success | scss variables | #hex | Note | scss variables | #hex | ||||||||
| Tokyo 100 | $tokyo-100 | #202026 | Brand 100 | $brand-100 | #957616 | Danger 100 | $danger-100 | #F50B09 | Warning 100 | $warning-100 | #FF7A00 | Success 100 | $success-100 | #7FD966 | Note 100 | $note-100 | #14D2FF | ||||||
| Tokyo 90 | $tokyo-90 | #292930 | Brand 90 | $brand-90 | #A88724 | Danger 80 | $danger-80 | #F55150 | Warning 80 | $warning-80 | #FF902A | Success 80 | $success-80 | #94DF7F | Note 80 | $note-80 | #3BD9FF | ||||||
| Tokyo 80 | $tokyo-80 | #373741 | Brand 80 | $brand-80 | #E0B535 | Danger 60 | $danger-60 | #F77373 | Warning 60 | $warning-60 | #FFA655 | Success 60 | $success-60 | #A9E599 | Note 60 | $note-60 | #62E1FF | ||||||
| Tokyo 70 | $tokyo-70 | #535359 | Brand 70 | $brand-70 | #FACA3D | Danger 40 | $danger-40 | #F99696 | Warning 40 | $warning-40 | #FFBC7F | Success 40 | $success-40 | #BFECB2 | Note 40 | $note-40 | #89E8FF | ||||||
| Tokyo 60 | $tokyo-60 | #7E7E82 | Brand 60 | $brand-60 | #FAD465 | Danger 20 | $danger-20 | #FBB9B9 | Warning 20 | $warning-20 | #FFD2AA | Success 20 | $success-20 | #D4F2CC | Note 20 | $note-20 | #B0F0FF | ||||||
| Tokyo 50 | $tokyo-50 | #A9A9AC | Brand 50 | $brand-50 | #FBDC83 | Danger 00 | #FDDCDC | Warning 00 | #FFE8D4 | Success 00 | #E9F8E5 | Note 00 | #D7F7FF | ||||||||||
| 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 |
