Editing Brighter Shores:Theme (section)

==Colours==
===Brand===
<div class="color-container">

<div class="color-column">
    <h3>Body</h3>
        <div class="color-group" style="background: #fdfcfc;">
        <p class="variable">--body-main</p>
        <p class="hexcode">#fdfcfc</p>
    </div>
        <div class="color-group" style="background: #e7e5e4;">
        <p class="variable">--body-light</p>
        <p class="hexcode">#e7e5e4</p>
    </div>
        <div class="color-group" style="background: #cbb7ae;">
        <p class="variable">--body-mid</p>
        <p class="hexcode">#cbb7ae</p>
    </div>
    <div class="color-group dark" style="background: #9f847a;">
        <p class="variable">--body-dark</p>
        <p class="hexcode">#9f847a</p>
    </div>
    <div class="color-group dark" style="background: #755c52;">
        <p class="variable">--body-darker</p>
        <p class="hexcode">#755c52</p>
    </div>
        <div class="color-group dark" style="background: #173a4d;">
        <p class="variable">--body-background-color</p>
        <p class="hexcode">#173a4d</p>
    </div>
</div>

<div class="color-column">
    <h3>Buttons and links</h3>    
    <div class="color-group dark" style="background: #3c352a;">
        <p class="variable">--button-border</p>
        <p class="hexcode">#3c352a</p>
    </div>
    <div class="color-group dark" style="background: #18140c;">
        <p class="variable">--button-dark</p>
        <p class="hexcode">#18140c</p>
    </div>
    <div class="color-group dark" style="background: #3a301d;">
        <p class="variable">--button-light</p>
        <p class="hexcode">#3a301d</p>
    </div>
    <div class="color-group dark" style="background: #8b694f;">
        <p class="variable">--link-color</p>
        <p class="hexcode">#8b694f</p>
    </div>
    <div class="color-group dark" style="background: #6d5248;">
        <p class="variable">--table-header-link</p>
        <p class="hexcode">#6d5248</p>
    </div>
    <div class="color-group dark" style="background: #e2bd8a;">
        <p class="variable">--background-link-color</p>
        <p class="hexcode">#e2bd8a</p>
    </div>
    <div class="color-group dark" style="background: #d5ab9c;">
        <p class="variable">@infobox-link</p>
        <p class="hexcode">#d5ab9c</p>
    </div>
</div>

<div class="color-column">
    <h3>Game class colors</h3>    
    <div class="color-group" style="background: #FFE233;">
        <p class="variable">@hopeport</p>
        <p class="hexcode">#FFE233</p>
    </div>
    <div class="color-group dark" style="background: #3f3b2a;">
        <p class="variable">@hopeport-dark</p>
        <p class="hexcode">#3b382f</p>
    </div>
    <div class="color-group dark" style="background: #68ABF1;">
        <p class="variable">@mantuban</p>
        <p class="hexcode">#68ABF1</p>
    </div>
    <div class="color-group dark" style="background: #26323d;">
        <p class="variable">@mantuban-dark</p>
        <p class="hexcode">#26323d</p>
    </div>
    <div class="color-group" style="background: #72D757;">
        <p class="variable">@hopeforest</p>
        <p class="hexcode">#72D757</p>
    </div>
    <div class="color-group dark" style="background: #2e3930;">
        <p class="variable">@hopeforest-dark</p>
        <p class="hexcode">#2e3930</p>
    </div>
    <div class="color-group dark" style="background: #979797;">
        <p class="variable">@crenopolis</p>
        <p class="hexcode">#979797</p>
    </div>
    <div class="color-group dark" style="background: #3f3f3f;">
        <p class="variable">@crenopolis-dark</p>
        <p class="hexcode">#3f3f3f</p>
    </div>
    <div class="color-group dark" style="background: #C57F41;">
        <p class="variable">@stonemaw</p>
        <p class="hexcode">#C57F41</p>
    </div>
    <div class="color-group dark" style="background: #3b3430;">
        <p class="variable">@stonemaw-dark</p>
        <p class="hexcode">#3b3430</p>
    </div>
</div>

</div>

===Status===
<div class="color-container">

<div class="color-column">
    <div class="color-group dark" style="background: #801c13;">
        <p class="variable">@mocaccino</p>
        <p class="hexcode">#801c13</p>
    </div>
    <div class="color-group dark" style="background: #9f261e;">
        <p class="variable">@old-brick</p>
        <p class="hexcode">#9f261e</p>
    </div>
    <div class="color-group dark" style="background: #ee4231;">
        <p class="variable">@flamingo</p>
        <p class="hexcode">#ee4231</p>
    </div>
    <div class="color-group" style="background: #fbc0ba;">
        <p class="variable">@apricot-peach</p>
        <p class="hexcode">#fbc0ba</p>
    </div>
    <div class="color-group" style="background: #feecea;">
        <p class="variable">@bridesmaid</p>
        <p class="hexcode">#feecea</p>
    </div>
</div>

<div class="color-column">
    <div class="color-group dark" style="background: #7a3f08;">
        <p class="variable">@antique-bronze</p>
        <p class="hexcode">#7a3f08</p>
    </div>
    <div class="color-group dark" style="background: #b55e0c;">
        <p class="variable">@korma</p>
        <p class="hexcode">#b55e0c</p>
    </div>
    <div class="color-group dark" style="background: #f7861b;">
        <p class="variable">@ecstasy</p>
        <p class="hexcode">#f7861b</p>
    </div>
    <div class="color-group" style="background: #fbcfa6;">
        <p class="variable">@corvette</p>
        <p class="hexcode">#fbcfa6</p>
    </div>
    <div class="color-group" style="background: #fef0e4;">
        <p class="variable">@lace</p>
        <p class="hexcode">#fef0e4</p>
    </div>
</div>

<div class="color-column">
    <div class="color-group dark" style="background: #786300;">
        <p class="variable">@cinnamon</p>
        <p class="hexcode">#786300</p>
    </div>
    <div class="color-group dark" style="background: #a48900;">
        <p class="variable">@olive</p>
        <p class="hexcode">#a48900</p>
    </div>
    <div class="color-group" style="background: #f9d000;">
        <p class="variable">@supernova</p>
        <p class="hexcode">#f9d000</p>
    </div>
    <div class="color-group" style="background: #fcea94;">
        <p class="variable">@golden</p>
        <p class="hexcode">#fcea94</p>
    </div>
    <div class="color-group" style="background: #fef9de;">
        <p class="variable">@half-dutch</p>
        <p class="hexcode">#fef9de</p>
    </div>
</div>

<div class="color-column">
    <div class="color-group dark" style="background: #2e5e05;">
        <p class="variable">@san-felix</p>
        <p class="hexcode">#2e5e05</p>
    </div>
    <div class="color-group dark" style="background: #3c780a;">
        <p class="variable">@la-palma</p>
        <p class="hexcode">#3c780a</p>
    </div>
    <div class="color-group dark" style="background: #6bc71f;">
        <p class="variable">@lima</p>
        <p class="hexcode">#6bc71f</p>
    </div>
    <div class="color-group" style="background: #c3e8a3;">
        <p class="variable">@caper</p>
        <p class="hexcode">#c3e8a3</p>
    </div>
    <div class="color-group" style="background: #ecf8e3;">
        <p class="variable">@frost</p>
        <p class="hexcode">#ecf8e3</p>
    </div>
</div>

</div>
<div class="color-container">

<div class="color-column">
    <div class="color-group dark" style="background: #03436b;">
        <p class="variable">@regal-blue</p>
        <p class="hexcode">#03436b</p>
    </div>
    <div class="color-group dark" style="background: #0b5884;">
        <p class="variable">@venice-blue</p>
        <p class="hexcode">#0b5884</p>
    </div>
    <div class="color-group dark" style="background: #3ea6e6;">
        <p class="variable">@curious-blue</p>
        <p class="hexcode">#3ea6e6</p>
    </div>
    <div class="color-group" style="background: #aad9f5;">
        <p class="variable">@jordy-blue</p>
        <p class="hexcode">#aad9f5</p>
    </div>
    <div class="color-group" style="background: #e5f3fc;">
        <p class="variable">@tropical-blue</p>
        <p class="hexcode">#e5f3fc</p>
    </div>
</div>

<div class="color-column">
    <div class="color-group dark" style="background: #3d276b;">
        <p class="variable">@honey-flower</p>
        <p class="hexcode">#3d276b</p>
    </div>
    <div class="color-group dark" style="background: #4f348b;">
        <p class="variable">@seance</p>
        <p class="hexcode">#4f348b</p>
    </div>
    <div class="color-group dark" style="background: #855cd8;">
        <p class="variable">@medium-purple</p>
        <p class="hexcode">#855cd8</p>
    </div>
    <div class="color-group" style="background: #cebbf7;">
        <p class="variable">@perfume</p>
        <p class="hexcode">#cfc0f0</p>
    </div>
    <div class="color-group" style="background: #f0ecfa;">
        <p class="variable">@heliotrope</p>
        <p class="hexcode">#f0ecfa</p>
    </div>
</div>

<div class="color-column">
    <div class="color-group dark" style="background: #6d3662;">
        <p class="variable">@cosmic</p>
        <p class="hexcode">#6d3662</p>
    </div>
    <div class="color-group dark" style="background: #984c89;">
        <p class="variable">@cannon-pink</p>
        <p class="hexcode">#984c89</p>
    </div>
    <div class="color-group dark" style="background: #e874cf;">
        <p class="variable">@lavender</p>
        <p class="hexcode">#e874cf</p>
    </div>
    <div class="color-group" style="background: #f5c8ec;">
        <p class="variable">@cherub</p>
        <p class="hexcode">#f5c8ec</p>
    </div>
    <div class="color-group" style="background: #fceef9;">
        <p class="variable">@french-lilac</p>
        <p class="hexcode">#fceef9</p>
    </div>
</div>

<div class="color-column">
    <div class="color-group dark" style="background: #444e5a;">
        <p class="variable">@river-bed</p>
        <p class="hexcode">#444e5a</p>
    </div>
    <div class="color-group dark" style="background: #5d6773;">
        <p class="variable">@shuttle-gray</p>
        <p class="hexcode">#5d6773</p>
    </div>
    <div class="color-group dark" style="background: #949eaa;">
        <p class="variable">@gray-chateau</p>
        <p class="hexcode">#949eaa</p>
    </div>
    <div class="color-group" style="background: #e4eaee;">
        <p class="variable">@mystic</p>
        <p class="hexcode">#e4eaee</p>
    </div>
    <div class="color-group" style="background: #f9fafa;">
        <p class="variable">@black-haze</p>
        <p class="hexcode">#f9fafa</p>
    </div>
</div>

</div>

===Recommended pairings===
Having good color contrast benefits all users, but it is particularly beneficial to users with certain types of color blindness and other similar conditions, who experience low contrast, and have trouble differentiating between similar colors ([https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast MDN]). To achieve at least a passing '''WCAG AA contrast ratio''' (4.5), these are the recommended color pairings for backgrounds against the default text colors in light mode and dark mode:

{| class="wikitable" style="text-align: center"
! Base color
! Background for dark text<ref>This is the ''darkest'' the background should be, assuming the text color is the light mode default, <code>#36414f</code>; the background should only be adjusted lighter.</ref>
! Ratio
! rowspan="100" |
! Background for light text<ref>This is the ''lightest'' the background should be, assuming the text color is the dark mode default, <code>#cbd9f4</code>; the background should only be adjusted darker.</ref>
! Ratio
|-
| Red
| style="color: #36414f; background: #fbc0ba" | '''@apricot-peach'''<br>(#fbc0ba)
| 6.55
| style="color: #cbd9f4; background: #9f261e" | '''@old-brick'''<br>(#9f261e)
| 5.35
|-
| Orange
| style="color: #36414f; background: #fbcfa6" | '''@corvette'''<br>(#fbcfa6)
| 7.19
| style="color: #cbd9f4; background: #7a3f08" | '''@antique-bronze'''<br>(#7a3f08)
| 5.84
|-
| Yellow
| style="color: #36414f; background: #fcea94" | '''@golden'''<br>(#fcea94)
| 8.55
| style="color: #cbd9f4; background: #786300" | '''@cinnamon'''<br>(#786300)
| 4.51
|-
| Green
| style="color: #36414f; background: #c3e8a3" | '''@caper'''<br>(#c3e8a3)
| 7.57
| style="color: #cbd9f4; background: #2e5e05" | '''@san-felix'''<br>(#2e5e05)
| 5.45
|-
| Blue
| style="color: #36414f; background: #aad9f5" | '''@jordy-blue'''<br>(#aad9f5)
| 6.88
| style="color: #cbd9f4; background: #0b5884" | '''@venice-blue'''<br>(#0b5884)
| 5.39
|-
| Purple
| style="color: #36414f; background: #cfc0f0" | '''@perfume'''<br>(#cfc0f0)
| 5.96
| style="color: #cbd9f4; background: #4f348b" | '''@seance'''<br>(#4f348b)
| 6.76
|-
| Pink
| style="color: #36414f; background: #f5c8ec" | '''@cherub'''<br>(#f5c8ec)
| 7.08
| style="color: #cbd9f4; background: #6d3662" | '''@cosmic'''<br>(#6d3662)
| 6.29
|-
| Grey
| style="color: #36414f; background: #e4eaee" | '''@mystic'''<br>(#e4eaee)
| 8.52
| style="color: #cbd9f4; background: #444e5a" | '''@river-bed'''<br>(#444e5a)
| 5.95
|}
{{Reflist}}

===Classes===
{{Main|/Classes}}
The wiki stylesheets contain various helper classes for applying colours, some of which are documented [[/Classes|here]].