Project:Site Color Palette: Difference between revisions

Revision as of 19:25, June 30, 2021

CSS Classes

Invoke by using

<span class="orangetx">Class for orange text</span>

CSS Variables

The following variables affect all themes by applying the theme-specific colors as indicated.

var(--clr-magenta)

var(--clr-purple)

var(--clr-blue)

var(--clr-green)

var(--clr-chartreuse)

var(--clr-yellow)

var(--clr-salmon)

var(--clr-orange)

var(--clr-red)

var(--text-pri-emph)

Classic

Color	Hex	CSS Class	Template:Fc Keywords
magenta	#d96dc9	magenttx	magenta
purple	#aa88e8	purpletx	vpurple
blue	#64a5e3	bluetx	blue, addition, enhancement, confirmation
green	#4bb073	greentx	green, fix, functional, relevant
chartreuse #9ead48	#9ead48	chartrtx	chartr
yellow	#e0b438	yellowtx	yellow, issue, unknown
salmon	#daaa99	salmontx	salmon, instruction
orange	#d89c4e	orangetx	orange, change, modification
red	#ee7a72	redtx	red, removal, non-functional, irrelevant, warning
highlight	#dddddd	hltx	highlight, important
dim	#888	dimx	dim, subtle

Dark

magenta #ce56bf
purple #a07fdf
addition, enhancement, confirmation, blue #5c8dd7
fix, functional, relevant, green #43a86b
chartreuse #96a13f
issue, unknown, yellow #d6b026
instruction, ilheading¹, salmon #d0a08f
change, modification, orange #d09446
removal, non-functional, irrelevant, warning, red #e6716a
important, highlight #d8d8d8

Light

magenta #d96dc9
purple #9978d8
addition, enhancement, confirmation, blue #5c8dd6
fix, functional, relevant, green #3fa963
chartreuse #96a13f
issue, unknown, yellow #d0a91a
instruction, ilheading¹, salmon #c49584
change, modification, orange #cc9042
removal, non-functional, irrelevant, warning, red #e6716a
important, highlight #303030

@@ Line 17: / Line 17: @@
 ====Classic====
-{|
+{| class="wikitable"
 ! Color
 ! Hex
@@ Line 23: / Line 23: @@
 ! Template:Fc Keywords
 |-
-| {{Fc|#d96dc9|magenta}} || #d96dc9 || magenttx || magenta
+| {{Fc|magenta|magenta}} || #d96dc9 || magenttx || magenta
 |-
-| {{Fc|#aa88e8|purple}} || #aa88e8 || purpletx || vpurple
+| {{Fc|purple|purple}} || #aa88e8 || purpletx || vpurple
 |-
-| {{Fc|#64a5e3|blue}} || #64a5e3 || bluetx || blue, addition, enhancement, confirmation
+| {{Fc|blue|blue}} || #64a5e3 || bluetx || blue, addition, enhancement, confirmation
 |-
-| {{Fc|#4bb073|green}} || #4bb073 || greentx || green, fix, functional, relevant
+| {{Fc|green|green}} || #4bb073 || greentx || green, fix, functional, relevant
 |-
-| {{Fc|#9ead48|chartreuse #9ead48}} || #9ead48 || chartrtx || chartr
+| {{Fc|chartr|chartreuse #9ead48}} || #9ead48 || chartrtx || chartr
 |-
-| {{Fc|#e0b438|yellow}} || #e0b438 || yellowtx || yellow, issue, unknown
+| {{Fc|yellow|yellow}} || #e0b438 || yellowtx || yellow, issue, unknown
 |-
-| {{Fc|#daaa99|salmon}} || #daaa99 || salmontx || salmon, instruction
+| {{Fc|salmon|salmon}} || #daaa99 || salmontx || salmon, instruction
 |-
-| {{Fc|#d89c4e|change, modification, orange #d89c4e}} || #d89c4e || orangetx || orange, change, modification
+| {{Fc|orange|orange}} || #d89c4e || orangetx || orange, change, modification
 |-
-| {{Fc|#ee7a72|removal, non-functional, irrelevant, warning, red #ee7a72}} || #ee7a72 || redtx || red
+| {{Fc|red|red}} || #ee7a72 || redtx || red, removal, non-functional, irrelevant, warning
 |-
-| {{Fc|#ddd|important, highlight #dddddd }} || #dddddd || hltx || magenta
+| {{Fc|highlight|highlight}} || #dddddd || hltx || highlight, important
 |-
-| {{Fc|#888|dim }} || #888 || dimx || dim, subtle
+| {{Fc|dim|dim}} || #888 || dimx || dim, subtle
 |}
 <div>