Project:Site Color Palette: Difference between revisions

Latest revision as of 03:06, September 6, 2024

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 are 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 HTML (for example):

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

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

Text Colors
On pages where guide template-call thresholds are limiting (Mod and Guide pages), it's important to use the HTML methods mentioned previously for coloring text. Everywhere else, it's more convenient to invoke Template:Fc to color text.

{{Fc|orange|Use the Fc template to make orange text}}

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, warning, 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:
+Classes are used for colors on the wiki to maintain consistency and to allow variations that accommodate site themes. The following classes are used as indicated below. Each uses the color name (or shortened name) with 'type' suffix:
 * Text - tx - example: orangetx
 * Background - bg example: orangebg
@@ Line 10: / Line 10: @@
 {{Fc|salmon|''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):
+Invoke by using HTML (for example):
 : <syntaxhighlight lang="HTML"><span class="orangetx">Class for orange text</span></syntaxhighlight>
 : <syntaxhighlight lang="HTML"><span class="morangebg">Class for orange 'muted' background</span></syntaxhighlight>
+{{Fc|salmon|'''Text Colors'''}}<br>
+On pages where guide template-call thresholds are limiting (Mod and Guide pages), it's important to use the HTML methods mentioned previously for coloring text. Everywhere else, it's more convenient to invoke [[:Template:Fc]] to color text.
+: <syntaxhighlight lang="wiki">{{Fc|orange|Use the Fc template to make orange text}}</syntaxhighlight>
 ====Classic====
@@ Line 38: / Line 42: @@
 | style="background: #373f49; color:#f09047" | orange || #f09047 || (m)orangebd || orange
 |-
-| style="background: #373f49; color:#ff7077" | red || #ff7077 || (m)redbd || red, rwarning, warn
+| style="background: #373f49; color:#ff7077" | red || #ff7077 || (m)redbd || red, warning, warn
 |-
 | style="background: #373f49; color:#ddd" | highlight || #ddd || hltx || highlight, brighter