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#957616#94802b
Tokyo 90
$tokyo-90#292930Brand 90
$brand-90#A88724#aa9231
Tokyo 80
$tokyo-80#373741#31313bBrand 80
$brand-80#E0B535#bea539
Tokyo 70
$tokyo-70#535359Brand 70
$brand-70#FACA3D#c6b056
Tokyo 60
$tokyo-60#7E7E82#6f6e6dBrand 60
$brand-60#FAD465#eccf4e
Tokyo 50
$tokyo-50#A9A9ACBrand 50
$brand-50#FBDC83#f5dd66
Tokyo 40
$tokyo-40#BCBCBE#bcbcbeBrand 40
$brand-40#FCE5A2#fbe67e
Tokyo 30
$tokyo-30#D4D4D5Brand 30
$brand-30#FDEDC1#fceb98
Tokyo 20
$tokyo-20#EFEFEFBrand 20
$brand-20#FEF6E0#fcf0b1
Tokyo 10
$tokyo-10#FFFFFFBrand 10
$brand-10#FDFBF4#fdf5cb


Alerts Colors














Danger
scss variables#hexWarning
scss variables#hexSuccess
scss variables#hexNote
scss variables#hex
Danger 100
$danger-100#F50B09Warning 100
$warning-100#FF7A00#FF8900Success 100
$success-100#7FD966#7fd966Note 100
$note-100#14D2FF#87dff0
Danger 80
$danger-80#F55150N.P.o.MVPWarning 80
$warning-80#FF902AN.P.o.MVPSuccess 80
$success-80#94DF7FN.P.o.MVPNote 80
$note-80#3BD9FFN.P.o.MVP
Danger 60
$danger-60#F77373#F55150Warning 60
$warning-60#FFA655#F0A835Success 60
$success-60#A9E599#94df7fNote 60
$note-60#62E1FF#94e2f1
Danger 40
$danger-40#F99696N.P.o.MVPWarning 40
$warning-40#FFBC7FN.P.o.MVPSuccess 40
$success-40#BFECB2N.P.o.MVPNote 40
$note-40#89E8FFN.P.o.MVP
Danger 20
$danger-20#FBB9B9N.P.o.MVPWarning 20
$warning-20#FFD2AAN.P.o.MVPSuccess 20
$success-20#D4F2CCN.P.o.MVPNote 20
$note-20#B0F0FFN.P.o.MVP
Danger 00

#FDDCDCN.P.o.MVPWarning 00

#FFE8D4N.P.o.MVPSuccess 00

#E9F8E5N.P.o.MVPNote 00#D7F7FF

N.P.o.MVP





































































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







...