(work in progress)
Highest Contrast
WCAG AA
WEB AIM
Usage of the Astronaut Theme Colors
(tbd)
| #id | Role | #hex | |
|---|---|---|---|
| $white | Default page background | #ffffff | |
| $astronaut-10 | Default boardlet background | #F2F2F2 |
Astronaut Theme Colors library
https://wasp2-dev.myapp.de:444/live-style-guide/theming
| Astronaut Colors | Brand | ||||||
|---|---|---|---|---|---|---|---|
| scss variables | #hex | scss variables | #hex | ||||
| Astronaut 100 | $astronaut-100 | #0f0e0d | Brand 100 | $brand-100 | #dbbb0d | ||
| Astronaut 90 | $astronaut-90 | #272625 | Brand 90 | $brand-90 | #e6c204 | ||
| Astronaut 80 | $astronaut-80 | #3F3E3D | Brand 80 | $brand-80 | #f0c906 | ||
| Astronaut 70 | $astronaut-70 | #575655 | Brand 70 | $brand-70 | #fcd515 | ||
| Astronaut 60 | $astronaut-60 | #6F6E6D | Brand 60 | $brand-60 | #fadd4b | ||
| Astronaut 50 | $astronaut-50 | #878686 | Brand 50 | $brand-50 | #fae164 | ||
| Astronaut 40 | $astronaut-40 | #B7B6B6 | Brand 40 | $brand-40 | #fbe67e | ||
| Astronaut 30 | $astronaut-30 | #CFCECE | Brand 30 | $brand-30 | #fceb98 | ||
| Astronaut 20 | $astronaut-20 | #E7E6E6 | Brand 20 | $brand-20 | #fcf0b1 | ||
| Astronaut 10 | $astronaut-10 | #F2F2F2 | 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 | #f06464 | Warning 100 | $warning-100 | #fdb225 | Success 100 | $success-100 | #9FDB57 | Note 100 | $note-100 | #87DFF0 | ||||
| Danger 80 | NOT MVP | NOT MVP | Warning 80 | NOT MVP | NOT MVP | Success 80 | NOT MVP | NOT MVP | Note 80 | NOT MVP | NOT MVP | ||||
| Danger 60 | $danger-60 | #f17575 | Warning 60 | $warning-60 | #fdba3d | Success 60 | $success-60 | #a9df69 | Note 60 | $note-60 | #94e2f1 | ||||
| Danger 40 | NOT MVP | NOT MVP | Warning 40 | NOT MVP | NOT MVP | Success 40 | NOT MVP | NOT MVP | Note 40 | NOT MVP | NOT MVP | ||||
| Danger 20 | NOT MVP | NOT MVP | Warning 20 | NOT MVP | NOT MVP | Success 20 | NOT MVP | NOT MVP | Note 20 | NOT MVP | NOT MVP |
Chart color library
https://assets.adobe.com/public/5400bb32-581e-4d00-7157-d9f3e19de0b0
| Colors | |||
|---|---|---|---|
| asdf | scss variables | #hex | |
| xxx | #,jvghh | ||
| #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 |
