Versions Compared

Old Version 3

changes.mady.by.user Sascha Ziegler

Saved on

compared with

New Version Current

changes.mady.by.user Ron Oemus

Saved on

Key

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

(work in progress)

UI Tabs


UI Tab
titleOverview

Image Removed Image Added





Highest Contrast

WCAG AA


WEB AIM



UI Tab
titleUsage

Usage of Tokyo Theme Colors

(tbd)

#idRoleValue
?Default page backgroundTokyo 100
#202026

Image Modified

?Default boardlet backgroundTokyo 90
#292930

Image Modified



Danger
UI Tab
titleCode

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



Tokyo Colors


Brand
Colors

Alerts Colorsscss variables#hexscss variables#hex






scss variables#hex
Warning


scss variables#hex
Successscss variables#hexNotescss variables#hex
Tokyo 100
$tokyo-100#202026Brand 100
$brand-100
#957616Danger 100$danger-100#F50B09Warning 100$warning-100#FF7A00Success 100$success-100#7FD966Note 100$note-100#14D2FF
#FFD14A
Tokyo 90
$tokyo-90#292930Brand
90
60
$brand-90
#A88724Danger 80$danger-80#F55150Warning 80$warning-80#FF902ASuccess 80$success-80#94DF7FNote 80$note-80#3BD9FF
#F5DD66
Tokyo 80
$tokyo-80
#373741
#31313bBrand
80
40
$brand-80
#E0B535Danger 60$danger-60#F77373Warning 60$warning-60#FFA655Success 60$success-60#A9E599Note 60$note-60#62E1FF
#FCEB98
Tokyo 70
$tokyo-70
#535359Brand 70$brand-70#FACA3DDanger 40$danger-40#F99696Warning 40$warning-40#FFBC7FSuccess 40$success-40#BFECB2Note 40$note-40#89E8FF
#3C3C44



Tokyo 60
$tokyo-60
#7E7E82Brand 60$brand-60#FAD465Danger 20$danger-20#FBB9B9Warning 20$warning-20#FFD2AASuccess 20$success-20#D4F2CCNote 20$note-20#B0F0FF
#50505D



Tokyo 50
$tokyo-50#A9A9AC
Brand 50$brand-50#FBDC83Danger 00#FDDCDCWarning 00#FFE8D4Success 00#E9F8E5Note 00#D7F7FF




Tokyo 40
$tokyo-40
#BCBCBEBrand 40$brand-40#FCE5A2
#bcbcbe



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




Tokyo 00
$brand

$tokyo-10
#FDFBF4Tokyo Colors

Brand
Colors

#24242B




Alerts Colors
scss variables#hex
scss variables#hex















Danger
scss variables#hexWarning
scss variables#hexSuccess
scss variables#hexNote
scss variables#hex
Tokyo 100$tokyo-100#202026Brand 100$brand-100
#957616
Danger 100
$danger-100
#F50B09
#F55150Warning 100
$warning-100
#FF7A00
#FFB443Success 100
$success-100
#7FD966
#96C85ANote 100
$note-100
#14D2FFTokyo 90$tokyo-90#292930Brand 90$brand-90#A88724Danger 80$danger-80#F55150Warning 80$warning-80#FF902ASuccess 80$success-80#94DF7FNote 80$note-80#3BD9FF
#2ACFF3
Danger
Tokyo 80$tokyo-80#373741Brand 80$brand-80#E0B535Danger
60
$danger-60
#F77373
#F33231Warning 60
$warning-60
#FFA655
#FFA800Success 60
$success-60
#A9E599
#87D32BNote 60
$note-60
#62E1FFTokyo 70$tokyo-70#535359Brand 70$brand-70#FACA3D
#42F1FC
Danger 40
$danger-40
#F99696
#B80C0BWarning 40
$warning-40
#FFBC7F
#B77411Success 40
$success-40
#BFECB2
#6DA12ENote 40
$note-40
#89E8FFTokyo 60$tokyo-60#7E7E82Brand 60$brand-60#FAD465Danger 20$danger-20#FBB9B9Warning 20$warning-20#FFD2AASuccess 20$success-20#D4F2CCNote 20$note-20#B0F0FFTokyo 50$tokyo-50#A9A9ACBrand 50$brand-50#FBDC83Danger 00#FDDCDCWarning 00#FFE8D4Success 00#E9F8E5Note 00#D7F7FFTokyo 40$tokyo-40#BCBCBEBrand 40$brand-40#FCE5A2Tokyo 30$tokyo-30#D4D4D5Brand 30$brand-30#FDEDC1Tokyo 20$tokyo-20#EFEFEFBrand 20$brand-20#FEF6E0Tokyo 10$tokyo-10#FFFFFFBrand 10$brand-10
#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
#FDFBF4