-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'stage-v1.2.0' into gh-pages
- Loading branch information
Showing
21 changed files
with
1,941 additions
and
237 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,4 @@ | ||
| # lux-nox | ||
| A repository containing the Solarized and Lunarized color schemes. | ||
|
|
||
| lux-nox is a repo containing 32 colors: 16 [Solarized](http://ethanschoonover.com/solarized) | ||
| colors and 16 Lunarized colors. | ||
|
|
||
| The Solarized and Lunarized color schemes are mainly used for displaying computer code, though | ||
| they could be applied anywhere. | ||
| Each color scheme has two modes: Light and Dark. | ||
| Light mode is a light background with a dark text; the stronger the emphasis, the darker the text. | ||
| Dark mode is a dark background with a light text; the stronger the emphasis, the lighter the text. | ||
| Each scheme includes 8 base colors and 8 accent colors. | ||
| The bases are dull tones for background, foreground, and stress colors, and these bases will change depending on the mode. The accents are sharp tones used for syntax highlighting, and | ||
| do not change based on the mode. | ||
|
|
||
| Solarized was developed by [Ethan Schoonover](http://ethanschoonover.com/solarized). | ||
| Inspired by his work, I developed the Lunarized Scheme in an attempt to | ||
| cool the Solarized Light background colors. I liked the idea of using a Light theme but I didn’t | ||
| want a yellowish tint. In the Lunarized Scheme, the bases are inverses of the Solarized Bases while | ||
| the accents are complements of the Solarized Accents. | ||
|
|
||
| The inverse of a color is that color with a hue rotation of 180°, while the complement | ||
| of a color is the difference between that color and white. | ||
|
|
||
| ``` | ||
| inverse(@color) : spin(@color, 180); | ||
| complement(@color) : rgb( 255 - red(@color), 255 - green(@color), 255 - blue(@color) ); | ||
| ``` | ||
| [Homepage](https://chharvey.github.io/lux-nox/) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| <!DOCTYPE html><html lang="en"><head><title>Accessibility | lux-nox</title><meta charset="utf-8"><meta name="author" content="Chris Harvey"><meta name="description" content="Solarized and Lunaried colors for any project."><link rel="stylesheet" href="../node_modules/xmeter/xmeter.min.css"><link rel="stylesheet" href="../node_modules/bangs/bangs.min.css"><link rel="stylesheet" href="../lux-nox.min.css"><link rel="stylesheet" href="../doc/styles/doc.css"></head><body><main><header><h1>lux-nox — Accessibility</h1></header><section><h2>Table of Contrast Ratios</h2><table class="c-CrTable"><caption><p>A demonstration of background colors and foreground colors. | ||
| For brevity, the only background colors are Bases 03, 02, 2, and 3; and | ||
| the only foreground colors are Bases 01, 00, 0, and 1, along with all accent colors. | ||
| <a href="#contrast-ratio-table">Contrast ratios</a> are shown in each cell.</p></caption><colgroup></colgroup><colgroup><col class="a-bc-s03"><col class="a-bc-s02"><col class="a-bc-s2"><col class="a-bc-s3"></colgroup><colgroup><col class="a-bc-l03"><col class="a-bc-l02"><col class="a-bc-l2"><col class="a-bc-l3"></colgroup><thead><tr><td></td><th scope="col">Solarized Base03</th><th scope="col">Solarized Base02</th><th scope="col">Solarized Base2</th><th scope="col">Solarized Base3</th><th scope="col">Lunarized Base03</th><th scope="col">Lunarized Base02</th><th scope="col">Lunarized Base2</th><th scope="col">Lunarized Base3</th></tr></thead><tbody><tr class="a-c-s01"><th scope="row">Solarized Base01</th><td data-rating='1'>2.79</td><td data-rating='1'>2.42</td><td data-rating='2'>4.39</td><td data-rating='3'>4.99</td><td data-rating='2'>3.24</td><td data-rating='1'>2.94</td><td data-rating='2'>3.89</td><td data-rating='2'>4.47</td></tr><tr class="a-c-s00"><th scope="row">Solarized Base00</th><td data-rating='2'>3.37</td><td data-rating='1'>2.92</td><td data-rating='2'>3.64</td><td data-rating='2'>4.13</td><td data-rating='2'>3.91</td><td data-rating='2'>3.55</td><td data-rating='2'>3.22</td><td data-rating='2'>3.7</td></tr><tr class="a-c-s0"><th scope="row">Solarized Base0</th><td data-rating='3'>4.75</td><td data-rating='2'>4.11</td><td data-rating='1'>2.58</td><td data-rating='1'>2.93</td><td data-rating='3'>5.51</td><td data-rating='3'>5</td><td data-rating='1'>2.29</td><td data-rating='1'>2.63</td></tr><tr class="a-c-s1"><th scope="row">Solarized Base1</th><td data-rating='3'>5.61</td><td data-rating='3'>4.86</td><td data-rating='1'>2.18</td><td data-rating='1'>2.48</td><td data-rating='3'>6.52</td><td data-rating='3'>5.91</td><td data-rating='1'>1.94</td><td data-rating='1'>2.22</td></tr><tr class="a-c-sr"><th scope="row">Solarized Red</th><td data-rating='2'>3.25</td><td data-rating='1'>2.81</td><td data-rating='2'>3.77</td><td data-rating='2'>4.29</td><td data-rating='2'>3.77</td><td data-rating='2'>3.42</td><td data-rating='2'>3.35</td><td data-rating='2'>3.84</td></tr><tr class="a-c-so"><th scope="row">Solarized Orange</th><td data-rating='2'>3.26</td><td data-rating='1'>2.82</td><td data-rating='2'>3.76</td><td data-rating='2'>4.27</td><td data-rating='2'>3.78</td><td data-rating='2'>3.43</td><td data-rating='2'>3.33</td><td data-rating='2'>3.83</td></tr><tr class="a-c-sy"><th scope="row">Solarized Yellow</th><td data-rating='3'>4.68</td><td data-rating='2'>4.05</td><td data-rating='1'>2.62</td><td data-rating='1'>2.98</td><td data-rating='3'>5.43</td><td data-rating='3'>4.93</td><td data-rating='1'>2.32</td><td data-rating='1'>2.67</td></tr><tr class="a-c-sg"><th scope="row">Solarized Green</th><td data-rating='3'>4.69</td><td data-rating='2'>4.06</td><td data-rating='1'>2.62</td><td data-rating='1'>2.97</td><td data-rating='3'>5.44</td><td data-rating='3'>4.94</td><td data-rating='1'>2.32</td><td data-rating='1'>2.66</td></tr><tr class="a-c-sc"><th scope="row">Solarized Cyan</th><td data-rating='3'>4.75</td><td data-rating='2'>4.12</td><td data-rating='1'>2.58</td><td data-rating='1'>2.93</td><td data-rating='3'>5.52</td><td data-rating='3'>5.01</td><td data-rating='1'>2.29</td><td data-rating='1'>2.62</td></tr><tr class="a-c-sb"><th scope="row">Solarized Blue</th><td data-rating='2'>4.08</td><td data-rating='2'>3.53</td><td data-rating='2'>3</td><td data-rating='2'>3.41</td><td data-rating='3'>4.74</td><td data-rating='2'>4.3</td><td data-rating='1'>2.66</td><td data-rating='2'>3.06</td></tr><tr class="a-c-sv"><th scope="row">Solarized Violet</th><td data-rating='2'>3.43</td><td data-rating='1'>2.97</td><td data-rating='2'>3.57</td><td data-rating='2'>4.06</td><td data-rating='2'>3.98</td><td data-rating='2'>3.61</td><td data-rating='2'>3.17</td><td data-rating='2'>3.64</td></tr><tr class="a-c-sm"><th scope="row">Solarized Magenta</th><td data-rating='2'>3.3</td><td data-rating='1'>2.86</td><td data-rating='2'>3.71</td><td data-rating='2'>4.21</td><td data-rating='2'>3.83</td><td data-rating='2'>3.48</td><td data-rating='2'>3.29</td><td data-rating='2'>3.78</td></tr></tbody><tbody><tr class="a-c-l01"><th scope="row">Lunarized Base01</th><td data-rating='1'>2.53</td><td data-rating='1'>2.19</td><td data-rating='3'>4.85</td><td data-rating='3'>5.51</td><td data-rating='1'>2.93</td><td data-rating='1'>2.66</td><td data-rating='2'>4.3</td><td data-rating='3'>4.94</td></tr><tr class="a-c-l00"><th scope="row">Lunarized Base00</th><td data-rating='2'>3.1</td><td data-rating='1'>2.69</td><td data-rating='2'>3.95</td><td data-rating='2'>4.49</td><td data-rating='2'>3.6</td><td data-rating='2'>3.27</td><td data-rating='2'>3.5</td><td data-rating='2'>4.02</td></tr><tr class="a-c-l0"><th scope="row">Lunarized Base0</th><td data-rating='2'>4.27</td><td data-rating='2'>3.7</td><td data-rating='1'>2.87</td><td data-rating='2'>3.26</td><td data-rating='3'>4.96</td><td data-rating='3'>4.5</td><td data-rating='1'>2.54</td><td data-rating='1'>2.92</td></tr><tr class="a-c-l1"><th scope="row">Lunarized Base1</th><td data-rating='3'>5.08</td><td data-rating='2'>4.4</td><td data-rating='1'>2.41</td><td data-rating='1'>2.74</td><td data-rating='3'>5.9</td><td data-rating='3'>5.35</td><td data-rating='1'>2.14</td><td data-rating='1'>2.45</td></tr><tr class="a-c-lc"><th scope="row">Lunarized Cyan</th><td data-rating='4'>7.66</td><td data-rating='3'>6.63</td><td data-rating='1'>1.6</td><td data-rating='1'>1.82</td><td data-rating='4'>8.89</td><td data-rating='4'>8.07</td><td data-rating='1'>1.42</td><td data-rating='1'>1.63</td></tr><tr class="a-c-lb"><th scope="row">Lunarized Blue</th><td data-rating='3'>6.33</td><td data-rating='3'>5.48</td><td data-rating='1'>1.94</td><td data-rating='1'>2.2</td><td data-rating='4'>7.35</td><td data-rating='3'>6.67</td><td data-rating='1'>1.72</td><td data-rating='1'>1.97</td></tr><tr class="a-c-li"><th scope="row">Lunarized Indigo</th><td data-rating='2'>3.81</td><td data-rating='2'>3.3</td><td data-rating='2'>3.22</td><td data-rating='2'>3.65</td><td data-rating='2'>4.42</td><td data-rating='2'>4.01</td><td data-rating='1'>2.85</td><td data-rating='2'>3.28</td></tr><tr class="a-c-lv"><th scope="row">Lunarized Violet</th><td data-rating='2'>3.7</td><td data-rating='2'>3.2</td><td data-rating='2'>3.31</td><td data-rating='2'>3.76</td><td data-rating='2'>4.29</td><td data-rating='2'>3.9</td><td data-rating='1'>2.94</td><td data-rating='2'>3.37</td></tr><tr class="a-c-lr"><th scope="row">Lunarized Red</th><td data-rating='2'>4.02</td><td data-rating='2'>3.48</td><td data-rating='2'>3.05</td><td data-rating='2'>3.46</td><td data-rating='3'>4.67</td><td data-rating='2'>4.24</td><td data-rating='1'>2.7</td><td data-rating='2'>3.1</td></tr><tr class="a-c-lo"><th scope="row">Lunarized Orange</th><td data-rating='3'>4.64</td><td data-rating='2'>4.02</td><td data-rating='1'>2.64</td><td data-rating='2'>3</td><td data-rating='3'>5.38</td><td data-rating='3'>4.88</td><td data-rating='1'>2.34</td><td data-rating='1'>2.69</td></tr><tr class="a-c-ly"><th scope="row">Lunarized Yellow</th><td data-rating='2'>4.41</td><td data-rating='2'>3.82</td><td data-rating='1'>2.78</td><td data-rating='2'>3.15</td><td data-rating='3'>5.12</td><td data-rating='3'>4.65</td><td data-rating='1'>2.46</td><td data-rating='1'>2.83</td></tr><tr class="a-c-lg"><th scope="row">Lunarized Green</th><td data-rating='3'>6.98</td><td data-rating='3'>6.04</td><td data-rating='1'>1.76</td><td data-rating='1'>2</td><td data-rating='4'>8.1</td><td data-rating='4'>7.35</td><td data-rating='1'>1.56</td><td data-rating='1'>1.79</td></tr></tbody></table><p>The <a href="use.html">Suggested Use</a> page demonstrates the most accessible contrast ratios.</p><table id="contrast-ratio-table" style="font-size: 0.75rem; line-height: 2;" class="-mh-a"><caption>A summary of <a href="http://leaverou.github.io/contrast-ratio/">contrast ratios</a>.<br><small><dfn>Large text</dfn> is defined as above 18pt (24px), or above 14pt (19px) and bold.</small></caption><thead><tr><th scope="col">Contrast Ratio</th><th scope="col">Level</th><th scope="col">Keyword</th><th scope="col">Description</th></tr></thead><tbody><tr><td>[1, 3.0)</td><td>1</td><td>bad.</td><td>Fails <a href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a></td></tr><tr><td>[3.0, 4.5)</td><td>2</td><td>okay…</td><td>Passes AA level for large text</td></tr><tr><td>[4.5, 7.0)</td><td>3</td><td>good!</td><td>Passes AA level for any size text and AAA for large text</td></tr><tr><td>[7.0, 21]</td><td>4</td><td>great!!</td><td>Passes AAA level for any size text</td></tr></tbody></table></section></main><script src="//code.jquery.com/jquery-1.12.0.min.js"></script></body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| extends ../layout.tpl.jade | ||
|
|
||
| block append vars | ||
| include scripts/color.js.jade | ||
| - page_names.push('Accessibility') | ||
| - home_path = '../' | ||
|
|
||
| block append main | ||
| - | ||
| function ratioDisplay(fg_color_obj, bg_color_obj) { | ||
| return Math.round(fg_color_obj.contrastRatio(bg_color_obj)*100)/100 | ||
| } | ||
| function dataRating(ratio) { | ||
| var bounds = [3, 4.5, 7] | ||
| var value = 1 | ||
| for (var i in bounds) { | ||
| if (ratio >= bounds[i]) value += 1 | ||
| } | ||
| return value | ||
| if (ratio < 3.0) return 1 | ||
| if (3.0 <= ratio && ratio < 4.5) return 2 | ||
| if (4.5 <= ratio && ratio < 7.0) return 3 | ||
| if (7.0 <= ratio) return 4 | ||
| } | ||
| section | ||
| - | ||
| var rows = [ | ||
| scheme.Solarized.base01 | ||
| , scheme.Solarized.base00 | ||
| , scheme.Solarized.base0 | ||
| , scheme.Solarized.base1 | ||
| , scheme.Solarized.red | ||
| , scheme.Solarized.orange | ||
| , scheme.Solarized.yellow | ||
| , scheme.Solarized.green | ||
| , scheme.Solarized.cyan | ||
| , scheme.Solarized.blue | ||
| , scheme.Solarized.violet | ||
| , scheme.Solarized.magenta | ||
| , scheme.Lunarized.base01 | ||
| , scheme.Lunarized.base00 | ||
| , scheme.Lunarized.base0 | ||
| , scheme.Lunarized.base1 | ||
| , scheme.Lunarized.cyan | ||
| , scheme.Lunarized.blue | ||
| , scheme.Lunarized.indigo | ||
| , scheme.Lunarized.violet | ||
| , scheme.Lunarized.red | ||
| , scheme.Lunarized.orange | ||
| , scheme.Lunarized.yellow | ||
| , scheme.Lunarized.green | ||
| ] | ||
| var cols = [ | ||
| scheme.Solarized.base03 | ||
| , scheme.Solarized.base02 | ||
| , scheme.Solarized.base2 | ||
| , scheme.Solarized.base3 | ||
| , scheme.Lunarized.base03 | ||
| , scheme.Lunarized.base02 | ||
| , scheme.Lunarized.base2 | ||
| , scheme.Lunarized.base3 | ||
| ] | ||
| h2 Table of Contrast Ratios | ||
| table.c-CrTable | ||
| caption | ||
| p. | ||
| A demonstration of background colors and foreground colors. | ||
| For brevity, the only background colors are Bases 03, 02, 2, and 3; and | ||
| the only foreground colors are Bases 01, 00, 0, and 1, along with all accent colors. | ||
| #[a(href="#contrast-ratio-table") Contrast ratios] are shown in each cell. | ||
| colgroup | ||
| colgroup | ||
| each color in cols.slice(0,4) | ||
| col(class=color.bg_class) | ||
| colgroup | ||
| each color in cols.slice(4) | ||
| col(class=color.bg_class) | ||
| thead | ||
| tr | ||
| td | ||
| each color in cols | ||
| th(scope="col")= color.name | ||
| mixin tableRow(fg_color) | ||
| - var fg_color_obj = Color.newColorHexString(fg_color.code) | ||
| tr(class=fg_color.fg_class) | ||
| th(scope="row")= fg_color.name | ||
| each bg_color in cols | ||
| - var bg_color_obj = Color.newColorHexString(bg_color.code) | ||
| - var ratio = ratioDisplay(fg_color_obj,bg_color_obj) | ||
| td(data-rating=dataRating(ratio))= ratio | ||
| tbody | ||
| each fg_color in rows.slice(0,12) | ||
| +tableRow(fg_color) | ||
| tbody | ||
| each fg_color in rows.slice(12) | ||
| +tableRow(fg_color) | ||
| p The #[a(href="use.html") Suggested Use] page demonstrates the most accessible contrast ratios. | ||
| table.-mh-a#contrast-ratio-table(style="font-size: 0.75rem; line-height: 2;") | ||
| caption | ||
| | A summary of #[a(href="http://leaverou.github.io/contrast-ratio/") contrast ratios]. | ||
| br | ||
| small #[dfn Large text] is defined as above 18pt (24px), or above 14pt (19px) and bold. | ||
| thead | ||
| tr | ||
| th(scope="col") Contrast Ratio | ||
| th(scope="col") Level | ||
| th(scope="col") Keyword | ||
| th(scope="col") Description | ||
| tbody | ||
| tr | ||
| td [1, 3.0) | ||
| td 1 | ||
| td bad. | ||
| td Fails #[a(href="https://www.w3.org/TR/WCAG/#visual-audio-contrast") WCAG 2.0] | ||
| tr | ||
| td [3.0, 4.5) | ||
| td 2 | ||
| td okay… | ||
| td Passes AA level for large text | ||
| tr | ||
| td [4.5, 7.0) | ||
| td 3 | ||
| td good! | ||
| td Passes AA level for any size text and AAA for large text | ||
| tr | ||
| td [7.0, 21] | ||
| td 4 | ||
| td great!! | ||
| td Passes AAA level for any size text |
Oops, something went wrong.