(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 | #94802b | ||
| Tokyo 90 | $tokyo-90 | #292930 | Brand 90 | $brand-90 | #aa9231 | ||
| Tokyo 80 | $tokyo-80 | #31313b | Brand 80 | $brand-80 | #bea539 | ||
| Tokyo 70 | $tokyo-70 | #535359 | Brand 70 | $brand-70 | #c6b056 | ||
| Tokyo 60 | $tokyo-60 | #6f6e6d | Brand 60 | $brand-60 | #eccf4e | ||
| Tokyo 50 | $tokyo-50 | #A9A9AC | Brand 50 | $brand-50 | #f5dd66 | ||
| Tokyo 40 | $tokyo-40 | #bcbcbe | Brand 40 | $brand-40 | #fbe67e | ||
| Tokyo 30 | $tokyo-30 | #D4D4D5 | Brand 30 | $brand-30 | #fceb98 | ||
| Tokyo 20 | $tokyo-20 | #EFEFEF | Brand 20 | $brand-20 | #fcf0b1 | ||
| Tokyo 10 | $tokyo-10 | #FFFFFF | Brand 10 | $brand-10 | #fdf5cb |
| 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 | #FF8900 | Success 100 | $success-100 | #7fd966 | Note 100 | $note-100 | #87dff0 | ||||
| Danger 80 | $danger-80 | N.P.o.MVP | Warning 80 | $warning-80 | N.P.o.MVP | Success 80 | $success-80 | N.P.o.MVP | Note 80 | $note-80 | N.P.o.MVP | ||||
| Danger 60 | $danger-60 | #F55150 | Warning 60 | $warning-60 | #F0A835 | Success 60 | $success-60 | #94df7f | Note 60 | $note-60 | #94e2f1 | ||||
| Danger 40 | $danger-40 | N.P.o.MVP | Warning 40 | $warning-40 | N.P.o.MVP | Success 40 | $success-40 | N.P.o.MVP | Note 40 | $note-40 | N.P.o.MVP | ||||
| Danger 20 | $danger-20 | N.P.o.MVP | Warning 20 | $warning-20 | N.P.o.MVP | Success 20 | $success-20 | N.P.o.MVP | Note 20 | $note-20 | N.P.o.MVP | ||||
| Danger 00 | N.P.o.MVP | Warning 00 | N.P.o.MVP | Success 00 | N.P.o.MVP | Note 00 | N.P.o.MVP | ||||||||
These colors can be used for diagrams and graphics. (work in progress)
| Colors | |||
|---|---|---|---|
| asdf | scss variables | #hex | |
| xxx | #502f7e | ||
| #eeb200 | |||
| #ff6b61 | |||
| #3d6d4f | |||
| #17e1e3 | |||
| #3c225f | |||
| #96D0FF | |||
| #A46798 | |||
| #B18AE0 | |||
| #87DCFA | |||
| #00FDFF | |||
| #5C22FF | |||
| #C39D63 | |||
| #2C159D | |||
| #89937A | |||
| #FF9320 | |||
| #F64A00 | |||
| #2A4ED1 | |||
| #E10000 | |||
| #004E25 | |||
| #384D9D | |||
| #F6F3EB | |||
| #1F3B34 | |||
| yyy | |||
| yyy | |||
| yyy | |||
| yyy | |||
| yyy | |||
| yyy | |||
| yyy | |||
| yyy | |||
| yyy | |||
| yyy | |||
| yyy | |||
| yyy | |||
| yyy | |||
| yyy |
