Project:Site Color Palette: Difference between revisions

Revision as of 19:35, June 30, 2021

CSS Classes

Classes are used for colors on the wiki to maintain consistency and to allow variations that accommodate site themes. The following classes should be used as indicated below. Each uses the color name (or shortened name) with 'type' suffix:

Text - tx - example: orangetx
Background = bg example: orangebg
Border - bd example: orangebd

Invoke by using (for example):

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

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	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
dimmer	#888	dimx	dimmer

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 1: / Line 1: @@
 [[Category:Reference]][[Category:Administration]]
 ===CSS Classes===
-Invoke by using <syntaxhighlight lang="HTML"><span class="orangetx">Class for orange text</span></syntaxhighlight>
+Classes are used for colors on the wiki to maintain consistency and to allow variations that accommodate site themes. The following classes should be used as indicated below. Each uses the color name (or shortened name) with 'type' suffix:
+* Text - tx - example: orangetx
+* Background = bg example: orangebg
+* Border - bd example: orangebd
-===CSS Variables===
+Invoke by using (for example):
-The following variables affect all themes by applying the theme-specific colors as indicated.
+: <syntaxhighlight lang="HTML"><span class="orangetx">Class for orange text</span></syntaxhighlight>
-: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====
@@ Line 45: / Line 38: @@
 | {{Fc|dimmer|dimmer}} || #888 || dimx || dimmer
 |}
 <div>
 <ul style="margin:0; padding:0; list-style: none; display: flex;">