Project:Site Color Palette: Difference between revisions

Revision as of 18:01, September 20, 2021

Site Color Usage

Colors and classes by theme for use on this wiki

by: Step Modifications | Forum Topic

CSS Classes[edit | edit source]

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[edit | edit source]

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	#d89c4e	(m)orangebd	orange
red	#ee7a72	(m)redbd	red, rwarning, warn
highlight	#ddd	hltx	highlight, brighter
dim	#888	dimtx	dimmer, dim

Dark[edit | edit source]

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	#d09446	(m)orangebd	orange
red	#e6716a	(m)redbd	red, warning, warn
highlight	#d8d8d8	hltx	highlight, brighter
dim	#888	dimx	dimmer, dim

Light[edit | edit source]

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	#cc9042	(m)orangebd	orange
red	#e6716a	(m)redbd	red, warning, warn
highlight	#333	hltx	highlight, brighter
dimmer	#888	dimx	dimmer, dim

@@ Line 1: / Line 1: @@
-[[Category:Reference]][[Category:Step Wiki Guides]]
+{{PageTitle|title=Site Color Usage|subtitle=Colors and classes by theme for use on this wiki|author=Step Modifications|forumtid=15793}}[[Category:Reference]][[Category:Step Wiki Guides]]
 ===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:
@@ Line 5: / Line 5: @@
 * 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
+{{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):
 : <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>
 ====Classic====
+<div class=p-3 style="background: #373f49">
 {| class="wikitable"
 ! Color
 ! Hex
-! CSS Class
+! CSS Class Examples
 ! Template:Fc Keywords
 |-
-| {{Fc|magenta|magenta}} || #d96dc9 || magenttx || magenta
+| style="background: #373f49; color:#d96dc9" | magenta || #d96dc9 || (m)magentbd || magenta
 |-
-| {{Fc|purple|purple}} || #aa88e8 || purpletx || purple
+| style="background: #373f49; color:#aa88e8" | purple || #aa88e8 || (m)purplebd || purple, dev
 |-
-| {{Fc|blue|blue}} || #64a5e3 || bluetx || blue, addition, enhancement, confirmation
+| style="background: #373f49; color:#64a5e3" | blue || #64a5e3 || (m)bluebd || blue, anotice
 |-
-| {{Fc|green|green}} || #4bb073 || greentx || green, fix, functional, relevant
+| style="background: #373f49; color:#4bb073" | green || #4bb073 || (m)greenbd || green
 |-
-| {{Fc|chartr|chartreuse}} || #9ead48 || chartrtx || chartr
+| style="background: #373f49; color:#9ead48" | chartreuse || #9ead48 || (m)chartrbd || chartr, bug
 |-
-| {{Fc|yellow|yellow}} || #e0b438 || yellowtx || yellow, issue, unknown
+| style="background: #373f49; color:#e0b438" | yellow || #e0b438 || (m)yellowbd || yellow, issue
 |-
-| {{Fc|salmon|salmon}} || #daaa99 || salmontx || salmon, instruction
+| style="background: #373f49; color:#daaa99" | salmon || #daaa99 || (m)salmonbd || salmon, instruction
 |-
-| {{Fc|orange|orange}} || #d89c4e || orangetx || orange, change, modification
+| style="background: #373f49; color:#d89c4e" | orange || #d89c4e || (m)orangebd || orange
 |-
-| {{Fc|red|red}} || #ee7a72 || redtx || red, removal, non-functional, irrelevant, warning
+| style="background: #373f49; color:#ee7a72" | red || #ee7a72 || (m)redbd || red, rwarning, warn
 |-
-| {{Fc|highlight|highlight}} || #dddddd || hltx || highlight, important
+| style="background: #373f49; color:#ddd" | highlight || #ddd || hltx || highlight, brighter
 |-
-| {{Fc|dimmer|dimmer}} || #888 || dimx || dimmer
+| style="background: #373f49; color:#888" | dim || #888 || dimtx || dimmer, dim
 |}
@@ Line 55: / Line 61: @@
 <div>
 <ul style="margin:0; padding:0; list-style: none; display: flex;">
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #d96dc9; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#d96dc950; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #aa88e8; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#aa88e850; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #64a5e3; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#64a5e350; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #4bb073; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#4bb07350; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #9ead48; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#9ead4850; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #e0b438; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#e0b43850; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #daaa99; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#daaa9950; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #d89c4e; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#d89c4e50; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #ee7a72; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#ee7a7250; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
 </ul>
+</div>
 </div>
 <br />
 ====Dark====
+<div class=p-3 style="background: #2a2a2f">
 {| class="wikitable"
 ! Color
 ! Hex
-! CSS Class
+! CSS Class Examples
 ! Template:Fc Keywords
 |-
-| {{Fc|magenta|magenta}} || #ce56bf || magenttx || magenta
+| style="background: #2a2a2f; color:#ce56bf" | magenta || #ce56bf || (m)magentbd || magenta
 |-
-| {{Fc|purple|purple}} || #a07fdf || purpletx || purple
+| style="background: #2a2a2f; color:#a07fdf" | purple || #a07fdf || (m)purplebd || purple, dev
 |-
-| {{Fc|blue|blue}} || #5c8dd7 || bluetx || blue, addition, enhancement, confirmation
+| style="background: #2a2a2f; color:#5c8dd7" | blue || #5c8dd7 || (m)bluebd || blue, notice
 |-
-| {{Fc|green|green}} || #43a86b || greentx || green, fix, functional, relevant
+| style="background: #2a2a2f; color:#43a86b" | green || #43a86b || (m)greenbd || green
 |-
-| {{Fc|chartr|chartreuse}} || #96a13f || chartrtx || chartr
+| style="background: #2a2a2f; color:#96a13f" | chartreuse || #96a13f || (m)chartrbd || chartr, bug
 |-
-| {{Fc|yellow|yellow}} || #d6b026 || yellowtx || yellow, issue, unknown
+| style="background: #2a2a2f; color:#d6b026" | yellow || #d6b026 || (m)yellowbd || yellow, issue
 |-
-| {{Fc|salmon|salmon}} || #d0a08f || salmontx || salmon, instruction
+| style="background: #2a2a2f; color:#d0a08f" | salmon || #d0a08f || (m)salmonbd || salmon, instruction
 |-
-| {{Fc|orange|orange}} || #d09446 || orangetx || orange, change, modification
+| style="background: #2a2a2f; color:#d09446" | orange || #d09446 || (m)orangebd || orange
 |-
-| {{Fc|red|red}} || #e6716a || redtx || red, removal, non-functional, irrelevant, warning
+| style="background: #2a2a2f; color:#e6716a" | red || #e6716a || (m)redbd || red, warning, warn
 |-
-| {{Fc|highlight|highlight}} || #d8d8d8 || hltx || highlight, important
+| style="background: #2a2a2f; color:#d8d8d8" | highlight || #d8d8d8 || hltx || highlight, brighter
 |-
-| {{Fc|dimmer|dimmer}} || #888 || dimx || dimmer
+| style="background: #2a2a2f; color:#888" | dim || #888 || dimx || dimmer, dim
 |}
@@ Line 114: / Line 122: @@
 <div>
 <ul style="margin:0; padding:0; list-style: none; display: flex;">
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #ce56bf; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#ce56bf50; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #a07fdf; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#a07fdf50; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #5c8dd7; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#5c8dd750; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #43a86b; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#43a86b50; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #96a13f; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#96a13f50; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #d6b026; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#d6b02650; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #d0a08f; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#d0a08f50; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #d09446; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#d0944650; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #e6716a; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#e6716a50; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
 </ul>
+</div>
 </div>
 <br />
 ====Light====
-<div  style="background: #f6f6f9">
+<div class=p-3 style="background: #fffefd">
 {| class="wikitable"
 ! Color
 ! Hex
-! CSS Class
+! CSS Class Examples
 ! Template:Fc Keywords
 |-
-| {{Fc|magenta|magenta}} || #d96dc9 || magenttx || magenta
+| style="background: #fffefd; color:#d96dc9" | magenta || #d96dc9 || (m)magentbd || magenta
 |-
-| {{Fc|purple|purple}} || #9978d8 || purpletx || purple
+| style="background: #fffefd; color:#9978d8" | purple || #9978d8 || (m)purplebd || purple, dev
 |-
-| {{Fc|blue|blue}} || #5c8dd6 || bluetx || blue, addition, enhancement, confirmation
+| style="background: #fffefd; color:#5c8dd6" | blue || #5c8dd6 || (m)bluebd || blue, notice
 |-
-| {{Fc|green|green}} || #3fa963 || greentx || green, fix, functional, relevant
+| style="background: #fffefd; color:#3fa963" | green || #3fa963 || (m)greenbd || green
 |-
-| {{Fc|chartr|chartreuse}} || #96a13f || chartrtx || chartr
+| style="background: #fffefd; color:#96a13f" | chartreuse || #96a13f || (m)chartrbd || chartr, bug
 |-
-| {{Fc|yellow|yellow}} || #d0a91a || yellowtx || yellow, issue, unknown
+| style="background: #fffefd; color:#d0a91a" | yellow || #d0a91a || (m)yellowbd || yellow, issue
 |-
-| {{Fc|salmon|salmon}} || #c49584 || salmontx || salmon, instruction
+| style="background: #fffefd; color:#c49584" | salmon || #c49584 || (m)salmonbd || salmon, instruction
 |-
-| {{Fc|orange|orange}} || #cc9042 || orangetx || orange, change, modification
+| style="background: #fffefd; color:#cc9042" | orange || #cc9042 || (m)orangebd || orange
 |-
-| {{Fc|red|red}} || #e6716a || redtx || red, removal, non-functional, irrelevant, warning
+| style="background: #fffefd; color:#e6716a" | red || #e6716a || (m)redbd || red, warning, warn
 |-
-| {{Fc|highlight|highlight}} || #303030 || hltx || highlight, important
+| style="background: #fffefd; color:#333" | highlight || #333 || hltx || highlight, brighter
 |-
-| {{Fc|dimmer|dimmer}} || #888 || dimx || dimmer
+| style="background: #fffefd; color:#888" | dimmer || #888 || dimx || dimmer, dim
 |}
@@ Line 174: / Line 183: @@
 <div>
 <ul style="margin:0; padding:0; list-style: none; display: flex;">
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #d96dc9; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#d96dc950; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #9978d8; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#9978d850; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #5c8dd6; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#5c8dd650; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #3fa963; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#3fa96350; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #96a13f; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#96a13f50; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #d0a91a; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#d0a91a50; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #c49584; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#c4958450; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #cc9042; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#cc904250; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
-<li><span style="display:inline-block; vertical-align:middle; border:2px solid #e6716a; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
+<li><span style="display:inline-block; vertical-align:middle; background:#e6716a50; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
 </ul>
 </div>
 </div>