Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

UI Tabs


UI Tab
titleOverview





Highest Contrast

WCAG AA


WEB AIM



UI Tab
titleUsage

Usage of Tokyo Theme Colors

(tbd)

#idRoleValue
?Default page backgroundTokyo 100
#202026

?Default boardlet backgroundTokyo 90
#292930



UI Tab
titleCode

https://wasp2-dev.myapp.de:444/live-style-guide/theming



Tokyo Colors


Brand
Colors






scss variables#hex

scss variables#hex
Tokyo 100
$tokyo-100#202026Brand 100
$brand-100
#94802b
#FFD14A
Tokyo 90
$tokyo-90#292930Brand
90
60
$brand-90
#aa9231
#F5DD66
Tokyo 80
$tokyo-80#31313bBrand
80
40
$brand-80
#bea539
#FCEB98
Tokyo 70
$tokyo-70
#535359Brand 70$brand-70#c6b056
#3C3C44



Tokyo 60
$tokyo-60
#6f6e6dBrand 60$brand-60#eccf4e
#50505D



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
#F8F8F8
Brand 10




Tokyo 00
$brand

$tokyo-10
#fdf5cb
#24242B




N.P.o.MVP
Alerts Colors














Danger
scss variables#hexWarning
scss variables#hexSuccess
scss variables#hexNote
scss variables#hex
Danger 100
$danger-100#F50B09#F55150Warning 100
$warning-100#FF8900#FFB443Success 100
$success-100#7fd966#96C85ANote 100
$note-100#87dff0Danger 80$danger-80N.P.o.MVPWarning 80$warning-80N.P.o.MVPSuccess 80$success-80N.P.o.MVPNote 80$note-80N.P.o.MVP#2ACFF3
Danger 60
$danger-60#F55150#F33231Warning 60
$warning-60#F0A835#FFA800Success 60
$success-60#94df7f#87D32BNote 60
$note-60#94e2f1#42F1FC
Danger 40
$danger-40N.P.o.MVP#B80C0BWarning 40
$warning-40N.P.o.MVP#B77411Success 40
$success-40N.P.o.MVP#6DA12ENote 40
$note-40N.P.o.MVPDanger 20$danger-20N.P.o.MVPWarning 20$warning-20N.P.o.MVPSuccess 20$success-20N.P.o.MVPNote 20$note-20N.P.o.MVPDanger 00N.P.o.MVPWarning 00N.P.o.MVPSuccess 00N.P.o.MVPNote 00#7FDAE7


Inline Link




scss variables#hex
Default
$link-default#7C79FF
Hover
$link-hover#534FFD
Visited
$link-visit#353386





UI Tab
titleAdditional colors

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







...