Merge branch 'stage-v2.0.0'

README.md

@@ -15,7 +15,7 @@ Lux-Nox is a stylesheet containing 32 colors, and classes for using those colors
 ## Usage
 1. Locally
   ```
-  $ npm install bangs
+  $ npm install lux-nox
   ```
   ```html
   <link rel="stylesheet" href="/node_modules/lux-nox/lux-nox[.min].css"/>

docs/_models/Docs.class.js

@@ -3,32 +3,28 @@ var Color = require('csscolor').Color
 var NamedColor = require('./NamedColor.class.js')
 var Scheme = require('./Scheme.class.js')
 
-/**
- * A set of static members used for the site.
- * Similar to a utility class.
- * @type {Docs}
- */
 module.exports = (function () {
-  // CONSTRUCTOR
+  /**
+   * A set of static members used for the site.
+   * Similar to a utility class.
+   * @constructor
+   */
   function Docs() {}
 
-  // METHODS
-
-  // STATIC MEMBERS
   /**
    * The homepage for this project.
    * @type {Page}
    */
   Docs.SITE = (function () {
-    var site = new Page({ name: 'Lux-Nox', url: '/docs/' })
+    let site_name = 'Lux-Nox'
+    let site_desc = 'Solarized and Lunaried colors for any project.'
+    return new Page({ name: site_name, url: '/docs/' })
       .title('Lux-Nox by Chris Harvey')
-      .description('Solarized and Lunaried colors for any project.')
-    site
-      .add(new Page({ name: site.name(), url: 'index.html'}).description(site.description()))
+      .description(site_desc)
+      .add(new Page({ name: site_name      , url: 'index.html'}).description(site_desc))
       .add(new Page({ name: 'Sample'       , url: 'sample.html'}))
       .add(new Page({ name: 'Suggested Use', url: 'use.html' }))
       .add(new Page({ name: 'Accessibility', url: 'accessibility.html' }))
-    return site
   })()
 
   /**

docs/_models/NamedColor.class.js

@@ -1,60 +1,50 @@
 var Color = require('csscolor').Color
 
-/**
- * An extension of Color. Has additional features like name and CSS class.
- * @type {NamedColor}
- * @extends Color
- */
-module.exports = (function () {
-  // CONSTRUCTOR
+module.exports = class NamedColor extends Color {
   /**
+   * An extension of Color. Has additional features like name and CSS class.
    * Construct a new NamedColor object.
+   * @constructor
+   * @extends Color
    * @param {Color} $color the color used to create this named color
    * @param {string} name   the name of this named color
    * @param {string} suffix the suffix for any CSS classes
    */
-  function NamedColor($color, name, suffix) {
-    Color.call(this, $color.rgb())
+  constructor($color, name, suffix) {
+    super($color.rgb())
     this._NAME = name
     this._SUFFIX = suffix
   }
-  NamedColor.prototype = Object.create(Color.prototype)
-  NamedColor.prototype.constructor = NamedColor
 
-  // METHODS
   /**
    * Return the name of this named color.
    * @return {string} the name of this color
    */
-  NamedColor.prototype.name = function name() {
+  name() {
     return this._NAME
   }
 
   /**
    * Return the suffix of this named color.
    * @return {string} the css class suffix of this color
    */
-  NamedColor.prototype.suffix = function suffix() {
+  suffix() {
     return this._SUFFIX
   }
 
   /**
    * Return the CSS atom class for background color.
    * @return {string} css classname assigning background color
    */
-  NamedColor.prototype.bgClass = function bgClass() { return '-bc' + this._SUFFIX }
+  bgClass() { return '-bc' + this._SUFFIX }
   /**
    * Return the CSS atom class for foreground color.
    * @return {string} css classname assigning foreground color
    */
-  NamedColor.prototype.fgClass = function fgClass() { return '-c'  + this._SUFFIX }
+  fgClass() { return '-c'  + this._SUFFIX }
   /**
    * Return the CSS atom class for border color.
    * @return {string} css classname assigning border color
    */
-  NamedColor.prototype.brClass = function brClass() { return '-rc' + this._SUFFIX }
-
-  // STATIC MEMBERS
-
-  return NamedColor
-})()
+  brClass() { return '-rc' + this._SUFFIX }
+}

docs/_models/Scheme.class.js

@@ -1,25 +1,22 @@
-/**
- * A color palette.
- * @type {Scheme}
- */
-module.exports = (function () {
-  // CONSTRUCTOR
+module.exports = class Scheme {
   /**
+   * A color palette.
    * Construct a new Scheme object.
+   * @constructor
    * @param {string} name the name of this scheme
    * @param {Array<object>} colors an array of objects representing colors
    */
-  function Scheme(name) {
+  constructor(name) {
     this._NAME = name
     this._colors = []
   }
 
-  // METHODS
   /**
    * Add a NamedColor object to this scheme.
    * @param {NamedColor} $namedColor the NamedColor object to add
+   * @return {Scheme} this Scheme object
    */
-  Scheme.prototype.addColor = function addColor($namedColor) {
+  addColor($namedColor) {
     this._colors.push($namedColor)
     return this
   }
@@ -28,11 +25,7 @@ module.exports = (function () {
    * @param  {string} name the name associated with the NamedColor object to get
    * @return {?NamedColor} a NamedColor object
    */
-  Scheme.prototype.getColor = function getColor(name) {
-    return this._colors.find(function ($namedColor) { return $namedColor.name() === name }) || null
+  getColor(name) {
+    return this._colors.find(($namedColor) => $namedColor.name()===name) || null
   }
-
-  // STATIC MEMBERS
-
-  return Scheme
-})()
+}

docs/accessibility.jade → docs/accessibility.pug

@@ -1,4 +1,4 @@
-extends _docs.tpl.jade
+extends _docs.tpl.pug
 
 block append vars
   - var page = Docs.SITE.find('accessibility.html')

docs/index.html

@@ -3,7 +3,7 @@
 These color schemes were originally designed for displaying computer code, though
 they can be applied <abbr title="practically">literally</abbr> anywhere.
 Import them into any project to use the variables and classes in your codebase.
-</p></header><footer><p>by <a href="https://github.com/chharvey/lux-nox/">Chris Harvey</a></p></footer><section><h2>Example</h2><figure class="o-Box a-bc-s3 a-c-s00"><pre><span class="-c-sb">&lt;h3 <span class="-c-sy">class=<span class="-c-sc"><span class="-c-sm">&quot;</span>-bc-s03  -c-lc<span class="-c-sm">&quot;</span></span></span>&gt;</span>Solarized Base03 background, Lunarized Cyan foreground!<span class="-c-sb">&lt;&#x002f;h3&gt;</span>
+</p></header><footer><p>by <a href="https://github.com/chharvey/lux-nox/">Chris Harvey</a></p></footer><section><h2>Example</h2><figure class="o-Box -bc-s3 -c-s00"><pre><span class="-c-sb">&lt;h3 <span class="-c-sy">class=<span class="-c-sc"><span class="-c-sm">&quot;</span>-bc-s03  -c-lc<span class="-c-sm">&quot;</span></span></span>&gt;</span>Solarized Base03 background, Lunarized Cyan foreground!<span class="-c-sb">&lt;&#x002f;h3&gt;</span>
 <span class="-c-sb">&lt;h4 <span class="-c-sy">class=<span class="-c-sc"><span class="-c-sm">&quot;</span>-rc-sb<span class="-c-sm">&quot;</span></span></span>&gt;</span>Solarized Blue border!<span class="-c-sb">&lt;&#x002f;h4&gt;</span></pre><h3 class="o-Box -bc-s03 -c-lc">Solarized Base03 background, Lunarized Cyan foreground!</h3><h4 class="o-Box -rc-sb" style="border: 3px solid">Solarized Blue border!</h4></figure></section><section><h2>Description</h2><p>Each color scheme contains 16 colors total, shared among two modes:</p><ul><li>Dark mode<ul><li>medium-light text  (Base0)</li><li>light emphasis     (Base1)</li><li>dark de-emphasis   (Base01)</li><li>darker highlight   (Base02)</li><li>darkest background (Base03)</li></ul></li><li>Light mode<ul><li>medium-dark text    (Base00)</li><li>dark emphasis       (Base01)</li><li>light de-emphasis   (Base1)</li><li>lighter highlight   (Base2)</li><li>lightest background (Base3)</li></ul></li></ul><p>Of the 16 colors in each scheme, there are 8 base colors and 8 accent colors:</p><ul><li>Bases<ul><li>dull tones</li><li>foreground, emphasis, de-emphasis, highlight, background</li><li>interchanged based on the mode</li></ul></li><li>Accents<ul><li>sharp tones</li><li>syntax highlighting</li><li>remain constant, independent of mode</li></ul></li></ul></section><section><h2>The Colors</h2><section><h3><cite>Solarized</cite> Color Scheme</h3><ul class="o-List o-ColorBoxGrid"><li class="o-List__Item o-ColorBox -bc-s03 h-darkbg"><h4>Solarized Base03</h4><pre>#002b36
 -bc-s03
 -c-s03

docs/index.jade → docs/index.pug

@@ -1,4 +1,4 @@
-extends _docs.tpl.jade
+extends _docs.tpl.pug
 
 block append vars
   - var page = Docs.SITE.find('index.html')
@@ -15,7 +15,7 @@ block append main
   footer: p by #[a(href="https://github.com/chharvey/lux-nox/") Chris Harvey]
   section
     h2 Example
-    figure.o-Box.a-bc-s3.a-c-s00
+    figure.o-Box.-bc-s3.-c-s00
       pre.
         #[span.-c-sb <h3 #[span.-c-sy class=#[span.-c-sc #[span.-c-sm "]-bc-s03  -c-lc#[span.-c-sm "]]]>]Solarized Base03 background, Lunarized Cyan foreground!#[span.-c-sb </h3>]
         #[span.-c-sb <h4 #[span.-c-sy class=#[span.-c-sc #[span.-c-sm "]-rc-sb#[span.-c-sm "]]]>]Solarized Blue border!#[span.-c-sb </h4>]

docs/sample.jade → docs/sample.pug

@@ -1,4 +1,4 @@
-extends _docs.tpl.jade
+extends _docs.tpl.pug
 
 block append vars
   - var page = Docs.SITE.find('sample.html')

docs/styles/docs.css

@@ -15,40 +15,39 @@ td {
 .o-Box {
   padding: 0.75rem 0.5rem;
 }
-.o-ColorBoxGrid {
-  display: -ms-grid;
-  display: grid;
-  -ms-grid-template-columns: 100%;
-  grid-template-columns: 100%;
-  -ms-grid-column-gap: 0.5rem;
-  grid-column-gap: 0.5rem;
-  -ms-grid-row-gap: calc(0.5 * var(--vru));
-  grid-row-gap: calc(0.5 * var(--vru));
+:root {
+  --columns: 1;
 }
 @media screen and (min-width: 18.5rem) {
-  .o-ColorBoxGrid {
-    -ms-grid-template-columns: repeat(2, 1fr);
-    grid-template-columns: repeat(2, 1fr);
+  :root {
+    --columns: 2;
   }
 }
 @media screen and (min-width: 35.5rem) {
-  .o-ColorBoxGrid {
-    -ms-grid-template-columns: repeat(4, 1fr);
-    grid-template-columns: repeat(4, 1fr);
+  :root {
+    --columns: 4;
   }
 }
 @media screen and (min-width: 69.5rem) {
-  .o-ColorBoxGrid {
-    -ms-grid-template-columns: repeat(8, 1fr);
-    grid-template-columns: repeat(8, 1fr);
+  :root {
+    --columns: 8;
   }
 }
 @media screen and (min-width: 137.5rem) {
-  .o-ColorBoxGrid {
-    -ms-grid-template-columns: repeat(16, 1fr);
-    grid-template-columns: repeat(16, 1fr);
+  :root {
+    --columns: 16;
   }
 }
+.o-ColorBoxGrid {
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: 100%;
+  grid-template-columns: 100%;
+  grid-column-gap: 0.5rem;
+  grid-row-gap: calc(0.5 * var(--vru));
+  -ms-grid-columns: (minmax(8rem, 16.5rem))[var];
+  grid-template-columns: repeat(var(--columns), minmax(8rem, 16.5rem));
+}
 .o-ColorBox {
   height: 8rem;
   padding: 0.25rem 0.5rem;

docs/styles/docs.less

@@ -2,7 +2,6 @@
 /*================================*\
     lux-nox  |  docs.less
 \*================================*/
-@import (reference) url('../../node_modules/xmeter/src/__fallback.grid.less');
 
 
 // Table of Contents
@@ -38,21 +37,34 @@ th, td {
 
 @p-height: 8rem;
 @p-gap-horiz: 0.5rem;
-.o-ColorBoxGrid {
-  .grid();
-  .grid-template-columns(100%);
-  .grid-column-gap(@p-gap-horiz);
-  .grid-row-gap(calc(~'0.5 * var(--vru)'));
+:root {
+  --columns: 1;
   .breakpoint-mx(@n) {
     @media screen and (min-width: (@n*@p-height + (@n - 1)*@p-gap-horiz + 2rem)) { // NOTE extra 2rem for `main` margins
-      .grid-template-columns(repeat(@n, 1fr));
+      --columns: @n;
     }
   }
   .breakpoint-mx(2);
   .breakpoint-mx(4);
   .breakpoint-mx(8);
   .breakpoint-mx(16);
 }
+.o-ColorBoxGrid {
+  display: grid;
+  grid-template-columns: 100%;
+  grid-column-gap: @p-gap-horiz;
+  grid-row-gap: calc(~'0.5 * var(--vru)');
+  grid-template-columns: repeat(var(--columns), minmax(@p-height, (2*@p-height + @p-gap-horiz)));
+  // .breakpoint-mx(@n) {
+  //   @media screen and (min-width: (@n*@p-height + (@n - 1)*@p-gap-horiz + 2rem)) { // NOTE extra 2rem for `main` margins
+  //     grid-template-columns: repeat(@n, minmax(@p-height, (2*@p-height + @p-gap-horiz)));
+  //   }
+  // }
+  // .breakpoint-mx(2);     // @media screen and (min-width: ( 2*@p-height +  1*@p-gap-horizontal + 2rem) { .o-ColorBoxGrid { grid-template-columns: repeat( 2, minmax(@p-height, (2*@p-height + @p-gap-horiz))); } }    // @media screen and (min-width:  18.5rem) { .o-ColorBoxGrid { grid-template-columns: repeat( 2, minmax(8rem, 17.5rem)); }}
+  // .breakpoint-mx(4);     // @media screen and (min-width: ( 4*@p-height +  3*@p-gap-horizontal + 2rem) { .o-ColorBoxGrid { grid-template-columns: repeat( 4, minmax(@p-height, (2*@p-height + @p-gap-horiz))); } }    // @media screen and (min-width:  35.5rem) { .o-ColorBoxGrid { grid-template-columns: repeat( 4, minmax(8rem, 17.5rem)); }}
+  // .breakpoint-mx(8);     // @media screen and (min-width: ( 8*@p-height +  7*@p-gap-horizontal + 2rem) { .o-ColorBoxGrid { grid-template-columns: repeat( 8, minmax(@p-height, (2*@p-height + @p-gap-horiz))); } }    // @media screen and (min-width:  69.5rem) { .o-ColorBoxGrid { grid-template-columns: repeat( 8, minmax(8rem, 17.5rem)); }}
+  // .breakpoint-mx(16);    // @media screen and (min-width: (16*@p-height + 15*@p-gap-horizontal + 2rem) { .o-ColorBoxGrid { grid-template-columns: repeat(16, minmax(@p-height, (2*@p-height + @p-gap-horiz))); } }    // @media screen and (min-width: 137.5rem) { .o-ColorBoxGrid { grid-template-columns: repeat(16, minmax(8rem, 17.5rem)); }}
+}
 .o-ColorBox {
   height: @p-height;
   padding: 0.25rem 0.5rem;