Project:Site Color Palette: Difference between revisions

Revision as of 15:33, September 29, 2023

Site Color Palette

Colors and classes by theme for use on the Step platform

by: Step Modifications | Forum Topic

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
Color classes can prepend a prefix 'm' to render the 'muted' color with 50% opacity
- Does not apply to 'brighter'/'dimmer'
- Does not apply to text colors

NOTE: Black and white can also be used by substituting 'black'/'white' in any of the color classes. These should ONLY be used in special cases as workarounds.

Invoke by using (for example):

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

<span class="morangebg">Class for orange 'muted' background</span>

Classic

Color	Hex	CSS Class Examples	Template:Fc Keywords
magenta	#d96dc9	(m)magentbd	magenta
purple	#aa88e8	(m)purplebd	purple, dev
blue	#64a5e3	(m)bluebd	blue, anotice
green	#4bb073	(m)greenbd	green
chartreuse	#9ead48	(m)chartrbd	chartr, bug
yellow	#e0b438	(m)yellowbd	yellow, issue
salmon	#daaa99	(m)salmonbd	salmon, instruction
orange	#f09047	(m)orangebd	orange
red	#ff7077	(m)redbd	red, rwarning, warn
highlight	#ddd	hltx	highlight, brighter
dim	#888	dimtx	dimmer, dim

Dark

Color	Hex	CSS Class Examples	Template:Fc Keywords
magenta	#ce56bf	(m)magentbd	magenta
purple	#a07fdf	(m)purplebd	purple, dev
blue	#5c8dd7	(m)bluebd	blue, notice
green	#43a86b	(m)greenbd	green
chartreuse	#96a13f	(m)chartrbd	chartr, bug
yellow	#d6b026	(m)yellowbd	yellow, issue
salmon	#d0a08f	(m)salmonbd	salmon, instruction
orange	#f08740	(m)orangebd	orange
red	#f76770	(m)redbd	red, warning, warn
highlight	#d8d8d8	hltx	highlight, brighter
dim	#888	dimx	dimmer, dim

Light (theme retired)

Color	Hex	CSS Class Examples	Template:Fc Keywords
magenta	#d96dc9	(m)magentbd	magenta
purple	#9978d8	(m)purplebd	purple, dev
blue	#5c8dd6	(m)bluebd	blue, notice
green	#3fa963	(m)greenbd	green
chartreuse	#96a13f	(m)chartrbd	chartr, bug
yellow	#d0a91a	(m)yellowbd	yellow, issue
salmon	#c49584	(m)salmonbd	salmon, instruction
orange	#f08740	(m)orangebd	orange
red	#f76770	(m)redbd	red, warning, warn
highlight	#333	hltx	highlight, brighter
dimmer	#888	dimx	dimmer, dim

@@ Line 1: / Line 1: @@
-{{PageTitle|title=Site Color Usage|subtitle=Colors and classes by theme for use on this wiki|author=Step Modifications|forumtid=15793}}[[Category:Administration]][[Category:Reference]][[Category:Step Wiki Guides]]{{TOC}}
+{{PageTitle|title=Site Color Palette|subtitle=Colors and classes by theme for use on the Step platform|author=Step Modifications|forumtid=15793}}[[Category:Administration]][[Category:Reference]][[Category:Step Wiki Guides]]{{TOC}}
 ===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: