Update README status and about

Use 235ms transition duration, ease-in-out, and omit default value.

Co-authored-by: Olivier <olivierc8@hotmail.com>

.editorconfig

@@ -7,3 +7,4 @@ trim_trailing_whitespace = true
 insert_final_newline = true
 indent_style = space
 indent_size = 2
+quote_type = single

.gitignore

@@ -8,4 +8,3 @@ npm-debug.log
 # Ignore compiled CSS
 /docs/static/assets/paper.css
 /docs/static/assets/paper.min.css
-/dist

.npmignore

@@ -1,9 +1,13 @@
-/node_modules
-npm-debug.log
-index.html
-demo.css
-yarn.lock
-/img
+/.github
+/build
 /docs
+/img
+/node_modules
 /public
-/tests
+.browserslistrc
+.editorconfig
+.stylelintrc.json
+CODE_OF_CONDUCT.md
+CONTRIBUTING.md
+netlify.toml
+npm-debug.log

.travis.yml

@@ -1,33 +0,0 @@
-language: node_js
-node_js: "8.8.1"
-
-notifications:
-  slack:
-    rooms:
-      - papercss:1MrmPTVH6FLA95Oa5IfXl7xQ#travis
-
-addons:
-  firefox: latest
-  apt:
-    sources:
-     - google-chrome
-    packages:
-     - google-chrome-stable fluxbox
-
-before_install:
-  - npm install -g npm@5.10.0
-
-install:
-  - npm ci
-
-before_script:
-    - npm run stylelint
-    - "sh -e /etc/init.d/xvfb start"
-    - sleep 3
-    - fluxbox >/dev/null 2>&1 &
-    - chmod +x ./jake.sh
-    - chmod +x ./tests/build/scripts/run_jake.sh
-    - export DISPLAY=:99.0
-    - gulp build
-
-script: "./jake.sh loose=true capture=Firefox"

CONTRIBUTING.md

@@ -1,19 +1,23 @@
 ## Contributing
+
 Check out what's been added but not yet released at [develop.getpapercss.com](https://develop.getpapercss.com)
 
 This project is open source and contributions are very welcomed. It is also as beginner friendly as possible, so don't be afraid to jump in if you've never contributed to any Git project before! Feel free to reach out if you are new and need help with the process.
 
-Similar to customizing, make sure you have Git, Node, and NPM on your system.
-- fork the repo via the fork button in the upper left
-- run `git clone https://github.com/[your_username]/papercss.git`
-- change directories to papercss `cd papercss`
-- run `npm install`
-- switch to the develop branch `git checkout develop`. This is the branch where features are added. Checking it out will set up the remote tracking to the develop branch on Github.
-- create a new branch for your feature off of the develop branch `git checkout -b feature-thing develop`. Please be sure to prepend your new feature branch with "feature-"
-- Start the local server to view changes with `npm start`
-- _code and stuff_
-- Once done, commit and push your changes to your fork
-- Finally, open a pull request on this repo. Be sure to include any pictures and details on what you changed!
-- Once approved, your changes will be merged to the develop branch where it will eventually be added to a release that ends up in the master branch. Check out [Vincent Driessen's blog post](http://nvie.com/posts/a-successful-git-branching-model/), [GitFlow](https://datasift.github.io/gitflow/IntroducingGitFlow.html), or [#27](https://github.com/rhyneav/papercss/issues/27) for more details on how this works.
+Please before sending a PR, make sure you are properly using the `.editorconfig` file with your IDE. If your IDE doesn't natively support `editorconfig` files, you can use an extension/package/module. For example in Atom there is the [editorconfig package](https://atom.io/packages/editorconfig), as well for [Sublime Text](https://github.com/sindresorhus/editorconfig-sublime), [VS Code](https://github.com/editorconfig/editorconfig-vscode), [Vim](https://github.com/editorconfig/editorconfig-vim), ...
 
-Note: If you have a hotfix, create your hotfix branch off of the master branch instead of develop: `git checkout -b hotfix-1.X.X master`
+Once you are ready to contribute, here the workflow you should follow:
+
+- Fork the repo then clone it: `git clone git@github.com:[your_username]/papercss.git`
+- `cd papercss` then install dependencies: `npm install`
+- Change your current branch to `develop`: `git checkout develop`
+- Create your new branch where you will write your code: `git checkout -b feature-thing develop`. Please be sure to prepend your new feature branch with "feature-"
+- Write some code!
+- To build the scss (in `src/`) to css (in `dist/`), run `npm run css:build`. Note: you will need to re-run this command to include the latest changes in `src/`.
+- To preview your changes, you can run `npm start`. This will start a `localhost` server.
+- Check to make sure your code is following style rules with `npm run stylelint`
+- Once done commit and push your changes to your fork. The linter is also run as a pre-commit hook.
+- Open a pull request on the origin papercss repo. Be sure to include any pictures and/or details on what you have done; it will help reviewers **a lot**!
+- When your changes are approved, they will be merged into the `develop` branch, which will finally be merged into the `master` branch when we reach a milestone regarding features and bug fixes. Check out [Vincent Driessen's blog post](http://nvie.com/posts/a-successful-git-branching-model/), [GitFlow](https://datasift.github.io/gitflow/IntroducingGitFlow.html), or [#27](https://github.com/rhyneav/papercss/issues/27) for more details on how this works.
+
+Note: If you have a hotfix (usually typos and minor documentation tweaks), create your hotfix branch off of the master branch instead of develop: `git checkout -b hotfix-thing master`. The changes will be merged into both the master and develop to keep the branches consistent.

DISTRIBUTING.md

@@ -0,0 +1,14 @@
+For distributing a new version to Github, NPM, and the CDN
+
+1. Ensure the build is up to date with `npm run build`
+2. Update all version numbers in the app using [Semantic Versioning](https://semver.org/). Ex renaming `1.8.0` to `1.8.1` for a patch.
+   1. package.json
+   2. package-lock.json
+   3. docs/content/_index.md
+3. Create commit of the new version with the changed version files: `v1.8.3`
+4. Push to master
+5. Create new release in the Github UI
+   1. Create a new tag with the same name as the commit: `v1.8.3`
+   2. Add details about the additions and fixes
+   3. Upload the files in `dist` to the "Attach Binaries" section (`paper.css` and `paper.min.css`)
+6. Publish to NPM with `npm publish`. The CDN will automatically pick up the new files

Jakefile.js

@@ -1,117 +0,0 @@
-// Copyright (c) 2012-2014 Titanium I.T. LLC. All rights reserved. See LICENSE.txt for details.
-
-// Main build file. Contains all tasks needed for normal development.
-// There's no Quixote-specific configuration in this file.
-
-(function() {
-	"use strict";
-
-	var startTime = Date.now();
-
-	var shell = require("shelljs");
-	var karma = require("simplebuild-karma");
-	var browserify = require("./tests/build/util/browserify_runner.js");
-
-	var browsers = require("./tests/build/config/tested_browsers.js");
-	var paths = require("./tests/build/config/paths.js");
-
-	var KARMA_CONFIG = "./tests/build/config/karma.conf.js";
-
-	var strict = !process.env.loose;
-
-
-	//*** GENERAL
-
-	desc("Lint and test");
-	task("default", [ "lint", "test" ], function() {
-		var elapsedSeconds = (Date.now() - startTime) / 1000;
-		console.log("\n\nBUILD OK  (" + elapsedSeconds.toFixed(2) + "s)");
-	});
-
-	desc("Start server (for manual testing)");
-	task("run", [ "build" ], function() {
-		jake.exec("node ../node_modules/http-server/bin/http-server " + paths.clientDistDir, { interactive: true }, complete);
-	}, { async: true });
-
-	desc("Delete generated files");
-	task("clean", function() {
-		shell.rm("-rf", paths.generatedDir);
-	});
-
-
-	//*** LINT
-/** */
-	desc("Lint everything");
-	task("lint", ["lintNode", "lintClient"]);
-
-	task("lintNode", function() {
-		process.stdout.write("Linting Node.js code: ");
-
-	}, { async: false });
-
-	task("lintClient", function() {
-		process.stdout.write("Linting browser code: ");
-
-	}, { async: false });
-
-	//*** TEST
-
-	desc("Start Karma server -- run this first");
-	task("karma", function() {
-		karma.start({
-			configFile: KARMA_CONFIG
-		}, complete, fail);
-	}, { async: true });
-
-	desc("Run tests");
-	task("test", function() {
-		console.log("Testing browser code: ");
-
-		var browsersToCapture = process.env.capture ? process.env.capture.split(",") : [];
-		karma.run({
-			configFile: KARMA_CONFIG,
-			expectedBrowsers: browsers,
-			strict: strict,
-			capture: browsersToCapture
-		}, complete, fail);
-	}, { async: true });
-
-
-	//*** BUILD
-
-	desc("Build distribution package");
-	task("build", [ "prepDistDir", "buildClient" ]);
-
-	task("prepDistDir", function() {
-		shell.rm("-rf", paths.distDir);
-	});
-
-	task("buildClient", [ paths.clientDistDir, "bundleClientJs" ], function() {
-		console.log("Copying client code: .");
-		shell.cp(
-			paths.clientDir + "/*.html",
-			paths.clientDir + "/*.css",
-			paths.clientDir + "/*.svg",
-			paths.clientDistDir
-		);
-	});
-
-	task("bundleClientJs", [ paths.clientDistDir ], function() {
-		console.log("Bundling browser code with Browserify: .");
-		browserify.bundle({
-			entry: paths.clientEntryPoint,
-			outfile: paths.clientDistBundle,
-			options: {
-				standalone: "toggle",
-				debug: true
-			}
-		}, complete, fail);
-	}, { async: true });
-
-
-	//*** CREATE DIRECTORIES
-
-	directory(paths.testDir);
-	directory(paths.clientDistDir);
-
-}());

README.md

@@ -10,8 +10,8 @@
 
 ## Table of contents
 
+- [Table of contents](#table-of-contents)
 - [Quick-start](#quick-start)
-- [Status](#status)
 - [Content of the framework](#content-of-the-framework)
 - [Documentation](#documentation)
 - [Customizing](#customizing)
@@ -26,31 +26,24 @@ There are several options available:
 - You can [download the latest release](https://github.com/papercss/papercss/releases).
 - Clone the repo: `git clone https://github.com/papercss/papercss.git`
 - Install with npm: `npm install papercss`
-- Install with yarn: `yarn install papercss`
+- Install with yarn: `yarn add papercss`
 - Import it using a CDN (it will automatically download the latest version):
-    - `https://unpkg.com/papercss/dist/paper.min.css`
-    - `https://unpkg.com/papercss/dist/paper.css`
-
-## Status
-
-[![Build status](https://travis-ci.org/papercss/papercss.svg?branch=master)](https://travis-ci.org/papercss/papercss)
-[![Dependencies](https://img.shields.io/david/papercss/papercss.svg)](https://david-dm.org/papercss/papercss)
-[![Peer dependencies](https://img.shields.io/david/peer/papercss/papercss.svg)](https://david-dm.org/papercss/papercss?type=peer)
-[![Dev dependencies](https://img.shields.io/david/dev/papercss/papercss.svg)](https://david-dm.org/papercss/papercss?type=dev)
+  - `https://unpkg.com/papercss/dist/paper.min.css`
+  - `https://unpkg.com/papercss/dist/paper.css`
 
 ## Content of the framework
 
 We provide compiled CSS (`paper.css`) as well as minified CSS (`paper.min.css`).
 
-You can choose which components you may want to use. Only the components that get imported in `src/styles.scss` will be compiled into `dist/paper.css`.
+You can choose which components you may want to use. Only the components that get imported into `src/styles.scss` will be compiled into `dist/paper.css`.
 
 You can also play with original, source files, written in SCSS, in `src/`.
 
 ## Documentation
 
-You can view the docs at [getpapercss.com](https://www.getpapercss.com). Those are directly from the `master` branch, this means those features are stable and ready to be used in your project.
+You can view the docs at [getpapercss.com](https://www.getpapercss.com). Those are directly from the `master` branch; this means those features are stable and ready to be used in your project.
 
-You can also view the develop branch at [develop.getpapercss.com](https://develop.getpapercss.com), this include new features that are coming soon in master branch. Be warned, a feature in develop can be removed without any prevention.
+You can also view the develop branch at [develop.getpapercss.com](https://develop.getpapercss.com), this includes new features that are coming soon in the master branch. Be warned, a feature in develop can be removed without any prevention.
 
 ## Customizing
 
@@ -58,7 +51,7 @@ You can customize PaperCSS easily, clone the repo, run `npm install` and make an
 
 The main place you might want to make changes would be `core/_config.scss`, where you can specify new colors or fonts for your CSS build.
 
-After you make changes, be sure to build the new CSS files. Do so by running `gulp build` and get them from the `dist/` folder.
+After you make changes, be sure to build the new CSS files. Do so by running `npm run css:build` and get them from the `dist/` folder.
 
 ## Contributing
 
@@ -72,22 +65,23 @@ Once you are ready to contribute, here the workflow you should follow:
 - `cd papercss` then install dependencies: `npm install`
 - Change your current branch to `develop`: `git checkout develop`
 - Create your new branch where you will write your code: `git checkout -b feature-thing develop`. Please be sure to prepend your new feature branch with "feature-"
-- Start the local web-server: `gulp` or `npm start`
 - Write some code!
+- To build the scss (in `src/`) to css (in `dist/`), run `npm run css:build`. Note: you will need to re-run this command to include the latest changes in `src/`.
+- To preview your changes, you can run `npm start`. This will start a `localhost` server.
 - Check to make sure your code is following style rules with `npm run stylelint`
-- Once done commit and push your changes to your fork. The linter is also run as a precommit hook.
-- Open a pull request on the origin papercss repo. Be sure to include any pictures and/or details on what you have done, it will help reviewers **a lot**!
-- When your changes are approved, they will be merged into the `develop` branch, which will finally be merged into the `master` branch when we reach a milestone in terms of features and bug fixes. Check out [Vincent Driessen's blog post](http://nvie.com/posts/a-successful-git-branching-model/), [GitFlow](https://datasift.github.io/gitflow/IntroducingGitFlow.html), or [#27](https://github.com/rhyneav/papercss/issues/27) for more details on how this works.
+- Once done commit and push your changes to your fork. The linter is also run as a pre-commit hook.
+- Open a pull request on the origin papercss repo. Be sure to include any pictures and/or details on what you have done; it will help reviewers **a lot**!
+- When your changes are approved, they will be merged into the `develop` branch, which will finally be merged into the `master` branch when we reach a milestone regarding features and bug fixes. Check out [Vincent Driessen's blog post](http://nvie.com/posts/a-successful-git-branching-model/), [GitFlow](https://datasift.github.io/gitflow/IntroducingGitFlow.html), or [#27](https://github.com/rhyneav/papercss/issues/27) for more details on how this works.
 
-Note: If you have a hotfix (usually typos and minor documentation tweaks), create your hotfix branch off of the master branch instead of develop: `git checkout -b hotfix-thing master`. The changes will be merged into both master and develop to keep the branches consistent.
+Note: If you have a hotfix (usually typos and minor documentation tweaks), create your hotfix branch off of the master branch instead of develop: `git checkout -b hotfix-thing master`. The changes will be merged into both the master and develop to keep the branches consistent.
 
 ## About
 
-PaperCSS was originally made by [@rhyneav](https://github.com/rhyneav) to be something different than the typical mODerN STylEs and clean pages found in every other CSS framework. It was built with LESS and deployed on a single index.html page before being open sourced. It has since evolved; The CSS source has been rewritten in SCSS and the documentation is now built with Hugo (all thanks to some [wonderful contributors](https://github.com/papercss/papercss/graphs/contributors)). In addition to the original creator, it is maintained by [@Fraham](https://github.com/Fraham) and [@TotomInc](https://github.com/TotomInc).
+PaperCSS was originally made by [@rhyneav](https://github.com/rhyneav) to be something different than the typical mODerN STylEs and clean pages found in every other CSS framework. It was built with LESS and deployed on a single index.html page before being open sourced. It has since evolved; The CSS source has been rewritten in SCSS and the documentation is now built with Hugo (all thanks to some [wonderful contributors](https://github.com/papercss/papercss/graphs/contributors)). It is currently maintained by the [PaperCSS team](https://github.com/orgs/papercss/people).
 
 The goal of PaperCSS is to be as minimal as possible when adding classes. For example, a button should just look like a paper button. There shouldn't be a need to add a class such as `paper-button`. Because of this, adding PaperCSS to a markdown generated page should instantly paper-ize it.
 
-Feel free to use it for wireframes, webapps, blogs, or whatever else you can think of!
+Feel free to use it for wireframes, web apps, blogs, or whatever else you can think of!
 
 If you are new to Git or SCSS, this would be a great project to get your feet wet with. I'd be happy to help walk you through the pull request process.
 

build/build.js

@@ -0,0 +1,43 @@
+const fs = require('fs');
+const sass = require('sass');
+const write = require('write');
+const rimraf = require('rimraf');
+const postcss = require('postcss');
+const cssnano = require('cssnano');
+const autoprefixer = require('autoprefixer');
+
+const constants = require('./constants');
+const log = require('./log');
+
+async function build() {
+  log('Starting PaperCSS build...');
+  log('Cleaning "dist/, docs/static/assets/paper.css" folder...');
+
+  rimraf.sync('dist', { disableGlob: true });
+
+  if (fs.existsSync(constants.PAPER_DOCS_PATH)) {
+    fs.unlinkSync(constants.PAPER_DOCS_PATH);
+  }
+
+  log('Compiling SCSS to CSS, entrypoint:', constants.ENTRYPOINT_PATH);
+
+  const compiledCSS = sass.renderSync({ file: constants.ENTRYPOINT_PATH });
+
+  log('Processing CSS: autoprefixer...');
+
+  const autoprefixedCSS = await postcss([autoprefixer]).process(compiledCSS.css, { from: undefined });
+
+  log('Processing CSS: cssnano...');
+
+  const minifiedCSS = await postcss([cssnano]).process(autoprefixedCSS.css, { from: undefined });
+
+  log('Writing paper.css and paper.min.css files to dist/ and docs/ folders...');
+
+  write(constants.PAPER_DIST_PATH, autoprefixedCSS.css);
+  write(constants.PAPER_DIST_MIN_PATH, minifiedCSS.css);
+  write(constants.PAPER_DOCS_PATH, autoprefixedCSS.css);
+
+  log('Build done!');
+}
+
+build();

build/constants.js

@@ -0,0 +1,8 @@
+const path = require('path');
+
+module.exports = {
+  ENTRYPOINT_PATH: path.resolve(__dirname, '../src/styles.scss'),
+  PAPER_DIST_PATH: path.resolve(__dirname, '../dist/paper.css'),
+  PAPER_DIST_MIN_PATH: path.resolve(__dirname, '../dist/paper.min.css'),
+  PAPER_DOCS_PATH: path.resolve(__dirname, '../docs/static/assets/paper.css'),
+};

build/hot-reload.js

@@ -0,0 +1,26 @@
+const util = require('util');
+const sass = require('sass');
+const write = require('write');
+const postcss = require('postcss');
+const chokidar = require('chokidar');
+const autoprefixer = require('autoprefixer');
+
+const constants = require('./constants');
+const log = require('./log');
+
+const sassRenderPromisified = util.promisify(sass.render);
+
+function compile() {
+  sassRenderPromisified({ file: constants.ENTRYPOINT_PATH })
+    .then((compiledCSS) => postcss([autoprefixer]).process(compiledCSS.css.toString(), { from: undefined }))
+    .then((autoprefixedCSS) => write(constants.PAPER_DOCS_PATH, autoprefixedCSS.css))
+    .then(() => log('Compiled CSS in docs/ folder.'));
+}
+
+chokidar.watch('./src/**/*.scss').on('change', (event) => {
+  log(`Detected file change (${event}), compiling SCSS to CSS...`);
+  compile();
+});
+
+// Do initial compilation.
+compile();

build/log.js

@@ -0,0 +1,7 @@
+const chalk = require('chalk');
+
+function log(...args) {
+  return console.log('📦 ', chalk.cyan(...args));
+}
+
+module.exports = log;

docs/config.toml

@@ -7,6 +7,7 @@ publishDir = "../public"
 # Syntax Highlighting ( https://gohugo.io/content-management/syntax-highlighting/ )
 pygmentsCodefences = true
 pygmentsStyle = "emacs"
+pygmentsUseClasses=true
 
 [params.info]
 description = "the less formal CSS framework"
@@ -16,5 +17,7 @@ title404 = "Nothing's here!"
 # Title Separator: - – — · • * ⋆ | ~ « » < >
 titleSeparator = "•"
 
-[blackfriday]
-hrefTargetBlank = true
+[markup]
+  defaultMarkdownHandler = "blackfriday"
+  [markup.blackFriday]
+    hrefTargetBlank = true

docs/content/_index.md

@@ -6,48 +6,51 @@ weight: -270
 
 #### Download
 
-Download the latest version (1.6.0) using either of the links below. Or
-download an older release via Github.
+Download the latest version (1.9.2) using either of the links below. Or
+download an older release via GitHub.
 
 <div class="row flex-spaces text-center">
-  <a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.6.0/paper.css">CSS File</a>
-  <a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.6.0/paper.min.css">Minified CSS File</a>
-  <a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases">Github Releases</a>
+  <a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.9.2/paper.css">CSS File</a>
+  <a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.9.2/paper.min.css">Minified CSS File</a>
+  <a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases">GitHub Releases</a>
 </div>
 
 #### NPM
 
-PaperCSS is available on NPM, current version 1.6.0. Install with <code>npm install papercss --save</code> and find the CSS in:
+PaperCSS is available on NPM, current version 1.9.2. Install with <code>npm install papercss --save</code> and find the CSS in:
 
-* node_modules/papercss/dist/paper.css
-* node_modules/papercss/dist/paper.min.css
+- node_modules/papercss/dist/paper.css
+- node_modules/papercss/dist/paper.min.css
 
 #### CDN
 
 Don't want to download it? That's cool. You can just link to PaperCSS via
 [unpkg's CDN](https://unpkg.com/#/). You can use either:
 
-* [https://unpkg.com/papercss@1.6.0/dist/paper.css](https://unpkg.com/papercss@1.6.0/dist/paper.css)
-* [https://unpkg.com/papercss@1.6.0/dist/paper.min.css](https://unpkg.com/papercss@1.6.0/dist/paper.min.css)
+- [https://unpkg.com/papercss@1.9.2/dist/paper.css](https://unpkg.com/papercss@1.9.2/dist/paper.css)
+- [https://unpkg.com/papercss@1.9.2/dist/paper.min.css](https://unpkg.com/papercss@1.9.2/dist/paper.min.css)
 
-Here's a quck snippet to get started with PaperCSS:
+Here's a quick snippet to get started with PaperCSS:
 
 ```html
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <link rel="stylesheet" href="https://unpkg.com/papercss@1.6.0/dist/paper.min.css">
-  <title>Document</title>
-</head>
-<body>
-  <div class="paper container">
-    <h1>Some Fresh Title</h1>
-    <p>This is where some content would go.</p>
-  </div>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/papercss@1.9.2/dist/paper.min.css"
+    />
+    <title>Document</title>
+  </head>
+  <body>
+    <div class="paper container">
+      <h1>Some Fresh Title</h1>
+      <p>This is where some content would go.</p>
+    </div>
+  </body>
 </html>
 ```
 
@@ -64,4 +67,4 @@ npm run build
 
 Grab the CSS out of the /dist folder created
 
-You can also go into src/core/_config.scss before building to change around the global styles of your new CSS.
+You can also go into src/core/\_config.scss before building to change around the global styles of your new CSS.

docs/content/about.md

@@ -9,6 +9,6 @@ PaperCSS was originally made by [@rhyneav](https://github.com/rhyneav) to be som
 
 The goal of PaperCSS is to be as minimal as possible when adding classes. For example, a button should just look like a paper button. There shouldn't be a need to add a class such as `paper-button`. Because of this, adding PaperCSS to a markdown generated page should instantly paper-ize it.
 
-Feel free to use it for wireframes, webapps, blogs, or whatever else you can think of! It is licensed under the [ISC License](https://github.com/papercss/papercss/blob/master/license), so use it wherever you want to.  
+Feel free to use it for wireframes, webapps, blogs, or whatever else you can think of! It is licensed under the [ISC License](https://github.com/papercss/papercss/blob/master/LICENSE.md), so use it wherever you want to.  
 
 If you are new to Git or SCSS, this would be a great project to get your feet wet with. I'd be happy to help walk you through the pull request process. Check out the [Git repo](https://github.com/papercss/papercss) for more info!

docs/content/docs/components/breadcrumb.md

@@ -0,0 +1,20 @@
+---
+title: Breadcrumb
+description: PaperCSS Breadcrumb
+---
+
+<ul class="breadcrumb border">
+  <li><a href="#">Documentation</a></li>
+  <li><a href="#">Components</a></li>
+  <li>Breadcrumb</li>
+</ul>
+
+#### Code:
+
+```html
+<ul class="breadcrumb border">
+  <li><a href="#">Documentation</a></li>
+  <li><a href="#">Components</a></li>
+  <li>Breadcrumb</li>
+</ul>
+```

docs/content/docs/components/buttons.md

@@ -53,3 +53,21 @@ Inspired by [Imperfect Buttons](https://codepen.io/tmrDevelops/pen/VeRvKX)
 <button class="btn-warning">Warning</button>
 <button class="btn-danger">Danger</button>
 ```
+
+### Outline colors
+
+<input type="button" class="paper-btn btn-primary-outline" value="Primary"/>
+<input type="button" class="btn-secondary-outline" value="Secondary"/>
+<button class="btn-success-outline">Success</button>
+<button class="btn-warning-outline">Warning</button>
+<a href="#" class="paper-btn btn-danger-outline">Danger</a>
+
+#### Code:
+
+```html
+<input type="button" class="paper-btn btn-primary-outline" value="Primary"/>
+<input type="button" class="btn-secondary-outline" value="Secondary"/>
+<button class="btn-success-outline">Success</button>
+<button class="btn-warning-outline">Warning</button>
+<a href="#" class="paper-btn btn-danger-outline">Danger</a>
+```

docs/content/docs/components/forms.md

@@ -25,12 +25,12 @@ description: PaperCSS Forms
   <input type="text" placeholder="Disabled" id="paperInputs4" disabled>
 </div>
 <div class="form-group">
-  <label>Large Input</label>
-  <textarea placeholder="Large input"></textarea>
+  <label for="large-input">Large Input</label>
+  <textarea id="large-input" placeholder="Large input"></textarea>
 </div>
 <div class="form-group">
-    <label>No Resize</label>
-    <textarea class="no-resize" placeholder="No resize"></textarea>
+    <label for="no-resize">No Resize</label>
+    <textarea class="no-resize" id="no-resize" placeholder="No resize"></textarea>
 </div>
 <div class="form-group">
   <label for="paperSelects1">Select</label>
@@ -38,19 +38,17 @@ description: PaperCSS Forms
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="3">Option 3</option>
-    <select>
+  </select>
 </div>
 <fieldset class="form-group">
   <legend>Some Radio Buttons</legend>
   <label for="paperRadios1" class="paper-radio">
     <input type="radio" name="paperRadios" id="paperRadios1" value="option 1">
-    <span>This is the first option
-      <span>
+    <span>This is the first option</span>
   </label>
   <label for="paperRadios2" class="paper-radio">
     <input type="radio" name="paperRadios" id="paperRadios2" value="option 2">
-    <span>This is the second option
-      <span>
+    <span>This is the second option</span>
   </label>
 </fieldset>
 <fieldset class="form-group">
@@ -64,6 +62,117 @@ description: PaperCSS Forms
     <span>This is the second check</span>
   </label>
 </fieldset>
+<fieldset class="form-group">
+  <legend>Some Switch</legend>
+  <p>Default - standard outline style (square & circle)</p>
+  <label class="paper-switch">
+    <input id="paperSwitch4" name="paperSwitch4" type="checkbox" />
+    <span class="paper-switch-slider"></span>
+  </label>
+  <label for="paperSwitch4" class="paper-switch-label">
+    Square switch
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label for="paperSwitch5" class="paper-switch-label">
+    Square switch
+  </label>
+  <label class="paper-switch">
+    <input id="paperSwitch5" name="paperSwitch5" type="checkbox" checked />
+    <span class="paper-switch-slider"></span>
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label class="paper-switch">
+    <input id="paperSwitch6" name="paperSwitch6" type="checkbox" checked />
+    <span class="paper-switch-slider round"></span>
+  </label>
+  <label for="paperSwitch6" class="paper-switch-label">
+    Circle switch
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label for="paperSwitch7" class="paper-switch-label">
+    Circle switch
+  </label>
+  <label class="paper-switch">
+    <input id="paperSwitch7" name="paperSwitch7" type="checkbox" />
+    <span class="paper-switch-slider round"></span>
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <p>Type2 - inline style (square & circle)</p>
+  <label class="paper-switch-2">
+    <input id="paperSwitch8" name="paperSwitch8" type="checkbox" checked />
+    <span class="paper-switch-slider"></span>
+  </label>
+  <label for="paperSwitch8" class="paper-switch-2-label">
+    Square switch
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label for="paperSwitch9" class="paper-switch-2-label">
+    Square switch
+  </label>
+  <label class="paper-switch-2">
+    <input id="paperSwitch9" name="paperSwitch9" type="checkbox" />
+    <span class="paper-switch-slider"></span>
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label class="paper-switch-2">
+    <input id="paperSwitch10" name="paperSwitch10" type="checkbox" />
+    <span class="paper-switch-slider round"></span>
+  </label>
+  <label for="paperSwitch10" class="paper-switch-2-label">
+    Circle switch
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label for="paperSwitch11" class="paper-switch-2-label">
+    Circle switch
+  </label>
+  <label class="paper-switch-2">
+    <input id="paperSwitch11" name="paperSwitch11" type="checkbox" checked />
+    <span class="paper-switch-slider round"></span>
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <p>Type3 - Tile style</p>
+  <label for="paperSwitch1" class="paper-switch-tile">
+    <input id="paperSwitch1" name="paperSwitch1" type="checkbox" />
+    <div class="paper-switch-tile-card border">
+      <div class="paper-switch-tile-card-front border">Front</div>
+      <div class="paper-switch-tile-card-back border background-primary">Back</div>
+    </div>
+  </label>
+  <label for="paperSwitch2" class="paper-switch-tile">
+    <input id="paperSwitch2" name="paperSwitch2" type="checkbox" />
+    <div class="paper-switch-tile-card border">
+      <div class="paper-switch-tile-card-front border background-warning">Off</div>
+      <div class="paper-switch-tile-card-back border background-secondary">On</div>
+    </div>
+  </label>
+  <label for="paperSwitch3" class="paper-switch-tile">
+    <input id="paperSwitch3" name="paperSwitch3" type="checkbox" />
+    <div class="paper-switch-tile-card border">
+      <div class="paper-switch-tile-card-front border background-danger">Declined</div>
+      <div class="paper-switch-tile-card-back border background-success">Accepted</div>
+    </div>
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <legend>Sliders</legend>
+  <div class="form-group">
+    <label for="input-range">Note /10 :</label>
+    <input type="range" name="note" id="input-range" min="0" max="10">
+  </div>
+  <div class="form-group">
+    <label for="percentage">Percentage (<code>.input-block</code>) :</label>
+    <input class="input-block" type="range" name="percentage" id="percentage" min="0" max="100" oninput="output.value = this.value + '%';">
+    <output id="output" for="percentage">50%</output>
+  </div>
+</fieldset>
 
 #### Code:
 
@@ -91,12 +200,12 @@ description: PaperCSS Forms
   <input type="text" placeholder="Disabled" id="paperInputs4" disabled>
 </div>
 <div class="form-group">
-  <label>Large Input</label>
-  <textarea placeholder="Large input"></textarea>
+  <label for="large-input">Large Input</label>
+  <textarea id="large-input" placeholder="Large input"></textarea>
 </div>
 <div class="form-group">
-  <label>No Resize</label>
-  <textarea class="no-resize" placeholder="No resize"></textarea>
+    <label for="no-resize">No Resize</label>
+    <textarea class="no-resize" id="no-resize" placeholder="No resize"></textarea>
 </div>
 <div class="form-group">
   <label for="paperSelects1">Select</label>
@@ -104,15 +213,15 @@ description: PaperCSS Forms
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="3">Option 3</option>
-  <select>
+  </select>
 </div>
 <fieldset class="form-group">
   <legend>Some Radio Buttons</legend>
   <label for="paperRadios1" class="paper-radio">
-    <input type="radio" name="paperRadios" id="paperRadios1" value="option 1"> <span>This is the first option<span>
+    <input type="radio" name="paperRadios" id="paperRadios1" value="option 1"> <span>This is the first option</span>
   </label>
   <label for="paperRadios2" class="paper-radio">
-    <input type="radio" name="paperRadios" id="paperRadios2" value="option 2"> <span>This is the second option<span>
+    <input type="radio" name="paperRadios" id="paperRadios2" value="option 2"> <span>This is the second option</span>
   </label>
 </fieldset>
 <fieldset class="form-group">
@@ -124,4 +233,115 @@ description: PaperCSS Forms
     <input type="checkbox" name="paperChecks" id="paperChecks2" value="option 2"> <span>This is the second check</span>
   </label>
 </fieldset>
+<fieldset class="form-group">
+  <legend>Some Switch</legend>
+  <p>Default - standard outline style (square & circle)</p>
+  <label class="paper-switch">
+    <input id="paperSwitch4" name="paperSwitch4" type="checkbox" />
+    <span class="paper-switch-slider"></span>
+  </label>
+  <label for="paperSwitch4" class="paper-switch-label">
+    Square switch
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label for="paperSwitch5" class="paper-switch-label">
+    Square switch
+  </label>
+  <label class="paper-switch">
+    <input id="paperSwitch5" name="paperSwitch5" type="checkbox" checked />
+    <span class="paper-switch-slider"></span>
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label class="paper-switch">
+    <input id="paperSwitch6" name="paperSwitch6" type="checkbox" checked />
+    <span class="paper-switch-slider round"></span>
+  </label>
+  <label for="paperSwitch6" class="paper-switch-label">
+    Circle switch
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label for="paperSwitch7" class="paper-switch-label">
+    Circle switch
+  </label>
+  <label class="paper-switch">
+    <input id="paperSwitch7" name="paperSwitch7" type="checkbox" />
+    <span class="paper-switch-slider round"></span>
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <p>Type2 - inline style (square & circle)</p>
+  <label class="paper-switch-2">
+    <input id="paperSwitch8" name="paperSwitch8" type="checkbox" checked />
+    <span class="paper-switch-slider"></span>
+  </label>
+  <label for="paperSwitch8" class="paper-switch-2-label">
+    Square switch
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label for="paperSwitch9" class="paper-switch-2-label">
+    Square switch
+  </label>
+  <label class="paper-switch-2">
+    <input id="paperSwitch9" name="paperSwitch9" type="checkbox" />
+    <span class="paper-switch-slider"></span>
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label class="paper-switch-2">
+    <input id="paperSwitch10" name="paperSwitch10" type="checkbox" />
+    <span class="paper-switch-slider round"></span>
+  </label>
+  <label for="paperSwitch10" class="paper-switch-2-label">
+    Circle switch
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label for="paperSwitch11" class="paper-switch-2-label">
+    Circle switch
+  </label>
+  <label class="paper-switch-2">
+    <input id="paperSwitch11" name="paperSwitch11" type="checkbox" checked />
+    <span class="paper-switch-slider round"></span>
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <p>Type3 - Tile style</p>
+  <label for="paperSwitch1" class="paper-switch-tile">
+    <input id="paperSwitch1" name="paperSwitch1" type="checkbox" />
+    <div class="paper-switch-tile-card border">
+      <div class="paper-switch-tile-card-front border">Front</div>
+      <div class="paper-switch-tile-card-back border background-primary">Back</div>
+    </div>
+  </label>
+  <label for="paperSwitch2" class="paper-switch-tile">
+    <input id="paperSwitch2" name="paperSwitch2" type="checkbox" />
+    <div class="paper-switch-tile-card border">
+      <div class="paper-switch-tile-card-front border background-warning">Off</div>
+      <div class="paper-switch-tile-card-back border background-secondary">On</div>
+    </div>
+  </label>
+  <label for="paperSwitch3" class="paper-switch-tile">
+    <input id="paperSwitch3" name="paperSwitch3" type="checkbox" />
+    <div class="paper-switch-tile-card border">
+      <div class="paper-switch-tile-card-front border background-danger">Declined</div>
+      <div class="paper-switch-tile-card-back border background-success">Accepted</div>
+    </div>
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <legend>Sliders</legend>
+  <div class="form-group">
+    <label for="input-range">Note /10 :</label>
+    <input type="range" name="note" id="input-range" min="0" max="10">
+  </div>
+  <div class="form-group">
+    <label for="percentage">Percentage (<code>.input-block</code>) :</label>
+    <input class="input-block" type="range" name="percentage" id="percentage" min="0" max="100" oninput="output.value = this.value + '%';">
+    <output id="output" for="percentage">50%</output>
+  </div>
+</fieldset>
 ```

docs/content/docs/components/navbar.md

@@ -9,13 +9,11 @@ description: PaperCSS Navbar
   </div>
   <div class="collapsible">
     <input id="collapsible0" type="checkbox" name="collapsible0">
-    <button>
-      <label for="collapsible0">
-        <div class="bar1"></div>
-        <div class="bar2"></div>
-        <div class="bar3"></div>
-      </label>
-    </button>
+    <label for="collapsible0">
+      <div class="bar1"></div>
+      <div class="bar2"></div>
+      <div class="bar3"></div>
+    </label>
     <div class="collapsible-body">
       <ul class="inline">
         <li><a href="/docs/">Documentation</a></li>
@@ -32,13 +30,11 @@ description: PaperCSS Navbar
   </div>
   <div class="collapsible">
     <input id="collapsible1" type="checkbox" name="collapsible1">
-    <button>
-      <label for="collapsible1">
-        <div class="bar1"></div>
-        <div class="bar2"></div>
-        <div class="bar3"></div>
-      </label>
-    </button>
+    <label for="collapsible1">
+      <div class="bar1"></div>
+      <div class="bar2"></div>
+      <div class="bar3"></div>
+    </label>
     <div class="collapsible-body">
       <ul class="inline">
         <li><a href="#">Documentation</a></li>
@@ -60,13 +56,11 @@ Add ```.fixed``` to ```<nav>``` to fix the nav to the top to have it scroll the
   </div>
   <div class="collapsible">
     <input id="collapsible1" type="checkbox" name="collapsible1">
-    <button>
     <label for="collapsible1">
-        <div class="bar1"></div>
-        <div class="bar2"></div>
-        <div class="bar3"></div>
-      </label>
-    </button>
+      <div class="bar1"></div>
+      <div class="bar2"></div>
+      <div class="bar3"></div>
+    </label>
     <div class="collapsible-body">
       <ul class="inline">
         <li><a href="#">Documentation</a></li>
@@ -86,13 +80,11 @@ Add ```.fixed``` to ```<nav>``` to fix the nav to the top to have it scroll the
   </div>
   <div class="collapsible">
     <input id="collapsible2" type="checkbox" name="collapsible2">
-    <button>
-      <label for="collapsible2">
-        <div class="bar1"></div>
-        <div class="bar2"></div>
-        <div class="bar3"></div>
-      </label>
-    </button>
+    <label for="collapsible2">
+      <div class="bar1"></div>
+      <div class="bar2"></div>
+      <div class="bar3"></div>
+    </label>
     <div class="collapsible-body">
       <ul class="inline">
         <li><a href="#">Documentation</a></li>
@@ -112,13 +104,11 @@ Add ```.fixed``` to ```<nav>``` to fix the nav to the top to have it scroll the
   </div>
   <div class="collapsible">
     <input id="collapsible2" type="checkbox" name="collapsible2">
-    <button>
-      <label for="collapsible2">
-        <div class="bar1"></div>
-        <div class="bar2"></div>
-        <div class="bar3"></div>
-      </label>
-    </button>
+    <label for="collapsible2">
+      <div class="bar1"></div>
+      <div class="bar2"></div>
+      <div class="bar3"></div>
+    </label>
     <div class="collapsible-body">
       <ul class="inline">
         <li><a href="#">Documentation</a></li>

docs/content/docs/content/lists.md

@@ -9,23 +9,27 @@ description: PaperCSS Lists
   <li>Do this</li>
   <li>Then this</li>
   <li>Finally this</li>
-  <li>Then we'll go one deeper</li>
-  <ol>
-    <li>Dillon</li>
-    <li>Francis</li>
+  <li>Then we'll go one deeper
     <ol>
-      <li>What if we went...</li>
-      <li>One more deeper?</li>
-      <ol>
-        <li>DJ</li>
-        <li>Hanzel</li>
+      <li>Dillon</li>
+      <li>Francis
         <ol>
-          <li>Five levels should be enough</li>
-          <li>Right?</li>
+          <li>What if we went...</li>
+          <li>One more deeper?
+            <ol>
+              <li>DJ</li>
+              <li>Hanzel
+                <ol>
+                  <li>Five levels should be enough</li>
+                  <li>Right?</li>
+                </ol>
+              </li>
+            </ol>
+          </li>
         </ol>
-      </ol>
+      </li>
     </ol>
-  </ol>
+  </li>
   <li>But don't forget this</li>
 </ol>
 
@@ -33,22 +37,26 @@ description: PaperCSS Lists
 
 <ul>
   <li>Let's try this</li>
-  <li>Let's try this again</li>
-  <ul>
-    <li>And now we are nested</li>
-    <li>Pretty cool?</li>
+  <li>Let's try this again
     <ul>
-      <li>The list items are just text</li>
-      <li>From this font</li>
-      <ul>
-        <li>We'll keep going</li>
-        <li>Until we hit</li>
+      <li>And now we are nested</li>
+      <li>Pretty cool?
         <ul>
-          <li>LEVEL 5</li>
+          <li>The list items are just text</li>
+          <li>From this font
+            <ul>
+              <li>We'll keep going</li>
+              <li>Until we hit
+                <ul>
+                  <li>LEVEL 5</li>
+                </ul>
+              </li>
+            </ul>
+          </li>
         </ul>
-      </ul>
+      </li>
     </ul>
-  </ul>
+  </li>
   <li>And now we're are the top!</li>
 </ul>
 
@@ -68,23 +76,27 @@ description: PaperCSS Lists
   <li>Do this</li>
   <li>Then this</li>
   <li>Finally this</li>
-  <li>Then we'll go one deeper</li>
-  <ol>
+  <li>Then we'll go one deeper
+    <ol>
       <li>Dillon</li>
-      <li>Francis</li>
-      <ol>
-        <li>What if we went...</li>
-        <li>One more deeper?</li>
+      <li>Francis
         <ol>
-          <li>DJ</li>
-          <li>Hanzel</li>
-          <ol>
-            <li>Five levels should be enough</li>
-            <li>Right?</li>
-          </ol>
+          <li>What if we went...</li>
+          <li>One more deeper?
+            <ol>
+              <li>DJ</li>
+              <li>Hanzel
+                <ol>
+                  <li>Five levels should be enough</li>
+                  <li>Right?</li>
+                </ol>
+              </li>
+            </ol>
+          </li>
         </ol>
-      </ol>
-  </ol>
+      </li>
+    </ol>
+  </li>
   <li>But don't forget this</li>
 </ol>
 

docs/content/docs/layout/container.md

@@ -0,0 +1,53 @@
+---
+title: Container
+description: PaperCSS Container
+---
+
+The container is usually at the root of the HTML and holds all of the content in a fixed size. PaperCSS supports a few
+different sizes to make setting your content within a certain max-width easy. Don't forget to add the `.paper` class to
+give you site some extra paper flair!
+
+<div class='paper container margin-bottom-large'>
+  <h4>Responsive Container!</h4>
+  <p>The default</p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus
+    erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
+  </p>
+</div>
+
+<div class='paper container container-lg margin-bottom-large'>
+  <h4>Large Container!</h4>
+  <p>Using <code>container-lg</code><p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus
+    erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
+  </p>
+</div>
+
+<div class='paper container container-md margin-bottom-large'>
+  <h4>Medium Container!</h4>
+  <p>Using <code>container-md</code><p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus
+    erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
+  </p>
+</div>
+
+<div class='paper container container-sm margin-bottom-large'>
+  <h4>Small Container!</h4>
+  <p>Using <code>container-sm</code><p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus
+    erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
+  </p>
+</div>
+
+<div class='paper container container-xs margin-bottom-large'>
+  <h4>Extra Small Container!</h4>
+  <p>Using <code>container-xs</code><p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus
+    erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
+  </p>
+</div>

docs/content/docs/utilities/borders.md

@@ -39,7 +39,7 @@ description: PaperCSS Borders & Shadows
   <div class="sm-2 col border border-success">Border success</div>
   <div class="sm-2 col border border-warning">Border warning</div>
   <div class="sm-2 col border border-danger">Border danger</div>
-  <div class="sm-2 col border background-primary border-white">Border white</div>
+  <div class="sm-2 col border border-white">Border white</div>
 </div>
 
 #### Code:
@@ -51,7 +51,7 @@ description: PaperCSS Borders & Shadows
   <div class="sm-2 col border border-success">Border success</div>
   <div class="sm-2 col border border-warning">Border warning</div>
   <div class="sm-2 col border border-danger">Border danger</div>
-  <div class="sm-2 col border background-primary border-white">Border white</div>
+  <div class="sm-2 col border border-white">Border white</div>
 </div>
 <div class="row child-borders">
   <div class="sm-2 col border border-primary">Border primary</div>
@@ -59,7 +59,7 @@ description: PaperCSS Borders & Shadows
   <div class="sm-2 col border border-success">Border success</div>
   <div class="sm-2 col border border-warning">Border warning</div>
   <div class="sm-2 col border border-danger">Border danger</div>
-  <div class="sm-2 col border background-primary border-white">Border white</div>
+  <div class="sm-2 col border border-white">Border white</div>
 </div>
 ```
 
@@ -136,7 +136,7 @@ Use this if you want all children to have a shadow.
 <div class="row flex-spaces child-borders child-shadows">
   <div class="sm-3 col">Shadow</div>
   <div class="sm-3 col">Shadow</div>
-  <div class="sm-3 col">Shadow</div>
+  <div class="sm-3 col shadow-none">No Shadow</div>
 </div>
 
 #### Code:
@@ -145,7 +145,7 @@ Use this if you want all children to have a shadow.
 <div class="row flex-spaces child-borders child-shadows">
   <div class="sm-3 col">Shadow</div>
   <div class="sm-3 col">Shadow</div>
-  <div class="sm-3 col">Shadow</div>
+  <div class="sm-3 col shadow-none">No Shadow</div>
 </div>
 ```
 

docs/content/docs/utilities/dark-mode.md

@@ -0,0 +1,67 @@
+---
+title: Dark Mode
+description: PaperCSS Dark Mode
+---
+
+As of version `1.8.0`, PaperCSS supports a dark mode of the framework. Just add the `.dark` class to your `html` tag!
+
+#### Examples
+
+Here's what some of the components look like:
+
+<div class="form-group">
+  <label for="paperInputs1">Input</label>
+  <input type="text" placeholder="Nice input" id="paperInputs1">
+</div>
+
+<button>
+  Button
+</button>
+
+<div class="progress margin-bottom">
+  <div class="bar w-25"></div>
+</div>
+
+<table>
+  <thead>
+    <tr>
+      <th>#</th>
+      <th>Name</th>
+      <th>Position</th>
+      <th>Location</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>Bob Dylan</td>
+      <td>Musician</td>
+      <td>California, USA</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>Eric Clapton</td>
+      <td>Musician</td>
+      <td>Ohio, USA</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>Daniel Kahneman</td>
+      <td>Psychologist</td>
+      <td>California, USA</td>
+    </tr>
+  </tbody>
+</table>
+
+<script>
+  var html = document.documentElement;
+  html.className += 'dark';
+</script>
+
+#### Code
+
+```html
+<html class='dark'>
+  Dark mode styles are automatically applied with the dark class!
+</html>
+```

docs/layouts/partials/head/includes.html

@@ -1,3 +1,4 @@
 <!-- Styles -->
 <link rel='stylesheet' href='/assets/paper.css'>
 <link rel='stylesheet' href='/assets/demo.css'>
+<link rel='stylesheet' href='/assets/syntax.css'>

docs/layouts/partials/head/meta.html

@@ -8,4 +8,4 @@
 
 {{ partial "head/opengraph" . }}
 
-{{ .Hugo.Generator }}
+{{ hugo.Generator }}

docs/layouts/partials/nav/sidebar.html

@@ -25,7 +25,7 @@
     {{ end }}
     <div class='paper'>
       <div class="row flex-center">
-        <p>Made with 💛 by <a href="https://vlaservi.ch" target="_blank">Rhyne</a> and some <a href="https://github.com/rhyneav/papercss/graphs/contributors">fantastic contributors</a>!</p>
+        <p>Made with 💛 by <a href="https://vlaservich.com" target="_blank">Rhyne</a> and some <a href="https://github.com/rhyneav/papercss/graphs/contributors">fantastic contributors</a>!</p>
       </div>
     </div>
 </div>

docs/static/assets/demo.css

@@ -1,5 +1,8 @@
 body {
-    background-image: url("/img/geometry2.png")
+  background-image: url("/img/geometry2.png")
+}
+html.dark  body {
+  background: #41403e;
 }
 #top {
     max-width: 1440px;
@@ -31,7 +34,6 @@ img.no-responsive {
 }
 .to-top .paper-btn {
     padding: .6em 1em;
-    background: #fff;
     border-top-left-radius: 185px 160px;
     border-top-right-radius: 200px 195px;
     border-bottom-right-radius: 160px 195px;

docs/static/assets/syntax.css

@@ -0,0 +1,365 @@
+/* LineTableTD */
+.chroma .lntd {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  vertical-align: top;
+}
+
+/* LineTable */
+.chroma .lntable {
+  border: 0;
+  border-spacing: 0;
+  display: block;
+  margin: 0;
+  overflow: auto;
+  padding: 0;
+  width: auto;
+}
+
+/* LineHighlight */
+.chroma .hl {
+  background-color: #ffc;
+  display: block;
+  width: 100%;
+}
+
+/* LineNumbersTable */
+.chroma .lnt {color: #7f7f7f;
+  margin-right: 0.4em;
+  padding: 0 0.4em;
+}
+
+/* LineNumbers */
+.chroma .ln {color: #7f7f7f;
+  margin-right: 0.4em;
+  padding: 0 0.4em;
+}
+
+/* Keyword */
+.chroma .k {
+  color: #a2f;
+  font-weight: bold;
+}
+
+/* KeywordConstant */
+.chroma .kc {
+  color: #a2f;
+  font-weight: bold;
+}
+
+/* KeywordDeclaration */
+.chroma .kd {
+  color: #a2f;
+  font-weight: bold;
+}
+
+/* KeywordNamespace */
+.chroma .kn {
+  color: #a2f;
+  font-weight: bold;
+}
+
+/* KeywordPseudo */
+.chroma .kp {
+  color: #a2f;
+}
+
+/* KeywordReserved */
+.chroma .kr {
+  color: #a2f;
+  font-weight: bold;
+}
+
+/* KeywordType */
+.chroma .kt {
+  color: #0b0;
+  font-weight: bold;
+}
+
+/* NameAttribute */
+.chroma .na {
+  color: #b44;
+}
+
+/* NameBuiltin */
+.chroma .nb {
+  color: #a2f;
+}
+
+/* NameClass */
+.chroma .nc {
+  color: #00f;
+}
+
+/* NameConstant */
+.chroma .no {
+  color: #800;
+}
+
+/* NameDecorator */
+.chroma .nd {
+  color: #a2f;
+}
+
+/* NameEntity */
+.chroma .ni {
+  color: #999;
+  font-weight: bold;
+}
+
+/* NameException */
+.chroma .ne {
+  color: #d2413a;
+  font-weight: bold;
+}
+
+/* NameFunction */
+.chroma .nf {
+  color: #00a000;
+}
+
+/* NameLabel */
+.chroma .nl {
+  color: #a0a000;
+}
+
+/* NameNamespace */
+.chroma .nn {
+  color: #00f;
+  font-weight: bold;
+}
+
+/* NameTag */
+.chroma .nt {
+  color: #008000;
+  font-weight: bold;
+}
+
+/* NameVariable */
+.chroma .nv {
+  color: #b8860b;
+}
+
+/* LiteralString */
+.chroma .s {
+  color: #b44;
+}
+
+/* LiteralStringAffix */
+.chroma .sa {
+  color: #b44;
+}
+
+/* LiteralStringBacktick */
+.chroma .sb {
+  color: #b44;
+}
+
+/* LiteralStringChar */
+.chroma .sc {
+  color: #b44;
+}
+
+/* LiteralStringDelimiter */
+.chroma .dl {
+  color: #b44;
+}
+
+/* LiteralStringDoc */
+.chroma .sd {
+  color: #b44;
+  font-style: italic;
+}
+
+/* LiteralStringDouble */
+.chroma .s2 {
+  color: #b44;
+}
+
+/* LiteralStringEscape */
+.chroma .se {
+  color: #b62;
+  font-weight: bold;
+}
+
+/* LiteralStringHeredoc */
+.chroma .sh {
+  color: #b44;
+}
+
+/* LiteralStringInterpol */
+.chroma .si {
+  color: #b68;
+  font-weight: bold;
+}
+
+/* LiteralStringOther */
+.chroma .sx {
+  color: #008000;
+}
+
+/* LiteralStringRegex */
+.chroma .sr {
+  color: #b68;
+}
+
+/* LiteralStringSingle */
+.chroma .s1 {
+  color: #b44;
+}
+
+/* LiteralStringSymbol */
+.chroma .ss {
+  color: #b8860b;
+}
+
+/* LiteralNumber */
+.chroma .m {
+  color: #666;
+}
+
+/* LiteralNumberBin */
+.chroma .mb {
+  color: #666;
+}
+
+/* LiteralNumberFloat */
+.chroma .mf {
+  color: #666;
+}
+
+/* LiteralNumberHex */
+.chroma .mh {
+  color: #666;
+}
+
+/* LiteralNumberInteger */
+.chroma .mi {
+  color: #666;
+}
+
+/* LiteralNumberIntegerLong */
+.chroma .il {
+  color: #666;
+}
+
+/* LiteralNumberOct */
+.chroma .mo {
+  color: #666;
+}
+
+/* Operator */
+.chroma .o {
+  color: #666;
+}
+
+/* OperatorWord */
+.chroma .ow {
+  color: #a2f;
+  font-weight: bold;
+}
+
+/* Comment */
+.chroma .c {
+  color: #080;
+  font-style: italic;
+}
+
+/* CommentHashbang */
+.chroma .ch {
+  color: #080;
+  font-style: italic;
+}
+
+/* CommentMultiline */
+.chroma .cm {
+  color: #080;
+  font-style: italic;
+}
+
+/* CommentSingle */
+.chroma .c1 {
+  color: #080;
+  font-style: italic;
+}
+
+/* CommentSpecial */
+.chroma .cs {
+  color: #080;
+  font-weight: bold;
+}
+
+/* CommentPreproc */
+.chroma .cp {
+  color: #080;
+}
+
+/* CommentPreprocFile */
+.chroma .cpf {
+  color: #080;
+}
+
+/* GenericDeleted */
+.chroma .gd {
+  color: #a00000;
+}
+
+/* GenericEmph */
+.chroma .ge {
+  font-style: italic;
+}
+
+/* GenericError */
+.chroma .gr {
+  color: #f00;
+}
+
+/* GenericHeading */
+.chroma .gh {
+  color: #000080;
+  font-weight: bold;
+}
+
+/* GenericInserted */
+.chroma .gi {
+  color: #00a000;
+}
+
+/* GenericOutput */
+.chroma .go {
+  color: #888;
+}
+
+/* GenericPrompt */
+.chroma .gp {
+  color: #000080;
+  font-weight: bold;
+}
+
+/* GenericStrong */
+.chroma .gs {
+  font-weight: bold;
+}
+
+/* GenericSubheading */
+.chroma .gu {
+  color: #800080;
+  font-weight: bold;
+}
+
+/* GenericTraceback */
+.chroma .gt {
+  color: #04d;
+}
+
+/* GenericUnderline */
+.chroma .gl {
+  text-decoration: underline;
+}
+
+/* TextWhitespace */
+.chroma .w {
+  color: #bbb;
+}
+

gulpfile.js

@@ -1,71 +0,0 @@
-'use strict';
-
-const gulp = require('gulp'),
-      sass = require('gulp-sass'),
-      cleanCSS = require('gulp-clean-css'),
-      rename = require('gulp-rename'),
-      exec = require('child_process').execFile,
-      optional = require('optional'),
-      hugo = optional('hugo-bin'),
-      gulpStylelint = optional('gulp-stylelint'),
-      autoprefixer = require('gulp-autoprefixer');
-
-gulp.task('sass', function() {
-  gulp.src('src/**/*.scss')
-    .pipe(sass.sync().on('error', sass.logError))
-    .pipe(autoprefixer())
-    .pipe(cleanCSS({format: 'beautify'}))
-    .pipe(rename('paper.css'))
-    .pipe(gulp.dest('dist'))
-    .pipe(gulp.dest('docs/static/assets'));
-});
-
-gulp.task('watch', function () {
-  gulp.watch('src/**/*.scss', ['sass']);
-});
-
-gulp.task('hugo-server', function (cb) {
-  let hugo_process = exec(
-    hugo, ['server', '--source=docs', '--disableFastRender'],
-    function (err, stdout, stderr) {
-      console.log(stderr);
-      return err ? cb(err) : cb();
-    }
-  );
-  hugo_process.stdout.pipe(process.stdout);
-  return hugo_process;
-})
-
-gulp.task('hugo-build', function (cb) {
-  let hugo_process = exec(
-    hugo, ['--source=docs'],
-    function (err, stdout, stderr) {
-      console.log(stderr);
-      return err ? cb(err) : cb();
-    }
-  );
-  hugo_process.stdout.pipe(process.stdout);
-  return hugo_process;
-})
-
-gulp.task('minify-css', () => {
-  return gulp.src('src/**/*.scss')
-  .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
-  .pipe(autoprefixer())
-  .pipe(rename('paper.min.css'))
-  .pipe(gulp.dest('dist'))
-  .pipe(gulp.dest('docs/static/assets'));
-});
-
-gulp.task('lint-css', function() {
-  return gulp.src('src/**/*.scss')
-    .pipe(gulpStylelint({
-      reporters: [
-        {formatter: 'string', console: true}
-      ]
-    }));
-})
-
-gulp.task('default', ['sass','watch','hugo-server']);
-gulp.task('build', ['sass','minify-css','hugo-build']);
-gulp.task('postinstall', ['sass','minify-css']);

jake.bat

@@ -1 +0,0 @@
-@call tests\build\scripts\run_jake -f tests\build\scripts\build.Jakefile.js %*

jake.sh

@@ -1,2 +0,0 @@
-#!/bin/sh
-. tests/build/scripts/run_jake.sh -f tests/build/scripts/build.Jakefile.js $*

netlify.toml

@@ -1,6 +1,2 @@
 [build]
 publish = "public"
-command = "hugo --source=docs"
-
-[build.environment]
-HUGO_VERSION = "0.30"

package.json

@@ -1,14 +1,18 @@
 {
   "name": "papercss",
-  "version": "1.6.0",
+  "version": "1.9.2",
   "description": "The less formal CSS framework.",
-  "main": "index.js",
+  "main": "dist/paper.css",
   "scripts": {
-    "start": "node node_modules/gulp/bin/gulp.js",
-    "build": "node node_modules/gulp/bin/gulp.js build",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "postinstall": "gulp postinstall",
-    "stylelint": "node_modules/stylelint/bin/stylelint.js 'src/**/*.scss'"
+    "build": "npm run css:build && npm run hugo:build",
+    "css:build": "node ./build/build.js",
+    "dev": "concurrently --kill-others \"npm run dev:hot-reload\" \"npm run hugo:serve\"",
+    "dev:hot-reload": "node ./build/hot-reload.js",
+    "hugo:build": "hugo -D --source=docs",
+    "hugo:serve": "hugo server --source=docs --disableFastRender",
+    "lint": "npm run stylelint",
+    "start": "npm run hugo:serve",
+    "stylelint": "stylelint src/**/*.scss"
   },
   "repository": {
     "type": "git",
@@ -20,58 +24,25 @@
     "url": "https://github.com/papercss/papercss/issues"
   },
   "homepage": "https://www.getpapercss.com",
-  "dependencies": {
-    "gulp": "3.9.1",
-    "gulp-autoprefixer": "^6.0.0",
-    "gulp-clean-css": "3.9.0",
-    "gulp-connect": "5.0.0",
-    "gulp-plumber": "1.1.0",
-    "gulp-rename": "1.2.2",
-    "gulp-sass": "^3.1.0",
-    "optional": "^0.1.4"
-  },
+  "dependencies": {},
   "devDependencies": {
-    "browserify": "^14.1.0",
+    "autoprefixer": "^9.8.6",
     "chai": "^4.1.2",
-    "gulp-less": "3.3.2",
-    "gulp-plumber": "1.1.0",
-    "gulp-rename": "1.2.2",
-    "gulp-sass": "^3.1.0",
-    "gulp-stylelint": "6.0.0",
-    "gulp-watch-less": "1.0.1",
-    "http-server": "^0.9.0",
-    "hugo-bin": "^0.17.0",
-    "install": "0.10.1",
-    "jake": "^8.0.15",
-    "jshint": "^2.9.4",
-    "karma": "^1.7.1",
-    "karma-chai": "^0.1.0",
-    "karma-commonjs": "1.0.0",
-    "karma-firefox-launcher": "^1.0.0",
-    "karma-mocha": "^1.3.0",
-    "karma-node-modules-middleware": "^1.0.1",
-    "karma-quixote": "^1.0.0",
-    "karma-requirejs": "^1.1.0",
-    "mocha": "^4.0.1",
-    "nodemon": "^1.11.0",
-    "npm": "^5.3.0",
-    "object-merge": "^2.5.1",
-    "os": "^0.1.1",
+    "chalk": "^4.1.0",
+    "chokidar": "^3.4.2",
+    "concurrently": "^5.3.0",
+    "cssnano": "^4.1.10",
+    "hugo-bin": "^0.62.3",
+    "postcss": "^7.0.32",
     "pre-commit": "^1.2.2",
-    "procfile": "^0.1.1",
-    "quixote": "^0.14.0",
-    "request": "^2.83.0",
-    "requirejs": "^2.3.5",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
-    "simplebuild-jshint": "^1.3.0",
-    "simplebuild-karma": "^1.0.0",
-    "stylelint": "8.4.0",
-    "stylelint-config-sass-guidelines": "4.0.1",
-    "stylelint-config-standard": "18.0.0",
-    "stylelint-order": "0.8.0",
-    "stylelint-scss": "2.2.0",
-    "webpack-dev-server": "2.7.1"
+    "rimraf": "^3.0.2",
+    "sass": "^1.26.10",
+    "stylelint": "^13.7.2",
+    "stylelint-config-sass-guidelines": "^7.1.0",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-order": "^4.1.0",
+    "stylelint-scss": "^3.18.0",
+    "write": "^2.0.0"
   },
   "pre-commit": [
     "stylelint"

src/components/_accordion.scss

@@ -3,13 +3,17 @@
   flex-direction: column;
 
   &:nth-of-type(1) {
-    border-top: 1px solid $muted-light;
+    @include color('border-top-color', 'muted-light');
+    border-top-style: solid;
+    border-top-width: 1px;
   }
 
   .collapsible-body {
+    @include color('border-bottom-color', 'muted-light');
+    @include color('background-color', 'white-dark-light-80');
     @include transition;
-    background-color: lighten($white-dark, 80%);
-    border-bottom: 1px solid $muted-light;
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
     margin: 0;
     max-height: 0;
     opacity: 0;
@@ -17,11 +21,11 @@
     padding: 0 0.75rem;
   }
 
-  input {
+  > input {
     display: none;
 
     &:checked + label {
-      color: $primary;
+      @include color('color', 'primary');
     }
 
     &[id^='collapsible']:checked~div.collapsible-body {
@@ -32,9 +36,11 @@
     }
   }
 
-  label {
-    border-bottom: 1px solid $muted-light;
-    color: $primary;
+  > label {
+    @include color('color', 'primary');
+    @include color('border-bottom-color', 'muted-light');
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
     display: inline-block;
     font-weight: 600;
     margin: 0 0 -1px;
@@ -42,7 +48,7 @@
     text-align: center;
 
     &:hover {
-      color: $muted;
+      @include color('color', 'muted');
       cursor: pointer;
     }
   }

src/components/_alerts.scss

@@ -1,16 +1,18 @@
-@mixin btn-close-color($base-color) {
-  color: lighten($base-color, 10%);
+@mixin btn-close-color($base-color-name) {
+  @include color('color', #{$base-color-name}-text);
 
   &:hover,
   &:active,
   &:focus {
-    color: darken($base-color, 10%);
+    @include color('color', #{$base-color-name}-dark);
   }
 }
 
 .alert {
+  @include color('border-color', 'primary');
   @include border-style();
-  border: 2px solid $primary;
+  border-style: solid;
+  border-width: 2px;
   margin-bottom: 20px;
   padding: 15px;
   width: 100%;
@@ -25,20 +27,20 @@
 
   .btn-close {
     @include transition;
-    @include btn-close-color($primary);
+    @include btn-close-color(primary);
     cursor: pointer;
     margin-left: 0.75rem;
   }
 }
 
-@each $colorName, $color, $color-light in $colors {
-  .alert-#{$colorName} {
-    background-color: $color-light;
-    border-color: $color;
-    color: $color;
+@each $color-name, $color, $color-light, $color-text in $colors {
+  .alert-#{$color-name} {
+    @include color('color', #{$color-name}-text);
+    @include color('background-color', #{$color-name}-light);
+    @include color('border-color', $color-name);
 
     .btn-close {
-      @include btn-close-color($color);
+      @include btn-close-color($color-name);
     }
   }
 }

src/components/_article.scss

@@ -4,15 +4,15 @@ article {
   }
 
   .article-meta {
-    color: $muted;
+    @include color(color, 'muted-text');
     font-size: 15px;
 
     a {
+      @include color(color, 'muted-text');
       background-image: none;
-      color: $muted-text;
 
       &:hover {
-        color: $light-dark;
+        @include color(color, 'light-dark');
       }
     }
   }

src/components/_badges.scss

@@ -1,9 +1,10 @@
 .badge {
   @include border-style();
-  background-color: $muted;
-  border: 2px solid $primary;
+  @include color('color', 'white');
+  @include color('background-color', 'muted');
+  @include color('border-color', 'primary');
+  border: 2px solid;
   border-color: transparent;
-  color: $white;
   display: inline-block;
   font-size: 75%;
   font-weight: 700;
@@ -16,6 +17,6 @@
 
 @each $colorName, $color in $colors {
   .badge.#{$colorName} {
-    background-color: $color;
+    @include color('background-color', #{$colorName});
   }
 }

src/components/_breadcrumb.scss

@@ -0,0 +1,28 @@
+ul.breadcrumb {
+  list-style: none;
+  padding: 10px 16px;
+
+  li {
+    display: inline;
+    font-size: 20px;
+
+    &::before {
+      content: '';
+    }
+
+    a {
+      @include color('color', 'secondary');
+      background-image: none;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  li + li::before {
+    content: '/\00a0';
+    padding: 8px;
+  }
+}

src/components/_buttons.scss

@@ -4,12 +4,15 @@ button,
   @include border-style();
   @include shadow();
   @include transition();
+  @include color('color', 'primary');
+  @include color('border-color', 'primary');
+  @include color('background-color', 'main-background');
   align-self: center;
-  background: transparent;
-  border: 2px solid $primary;
-  color: $primary;
+  background-image: none;
+  border-style: solid;
+  border-width: 2px;
   cursor: pointer;
-  display: inline;
+  display: inline-block;
   font-size: 1rem;
   outline: none;
   padding: 0.75rem;
@@ -43,7 +46,9 @@ button,
   }
 
   &:focus {
-    border: 2px solid $secondary;
+    @include color('border-color', 'secondary');
+    border-style: solid;
+    border-width: 2px;
     box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
   }
 
@@ -60,6 +65,7 @@ button,
 }
 
 a {
+  @include color('color', 'secondary');
   background-image: linear-gradient(5deg, transparent 65%, $secondary 80%, transparent 90%), linear-gradient(165deg, transparent 5%, $secondary 15%, transparent 25%), linear-gradient(165deg, transparent 45%, $secondary 55%, transparent 65%), linear-gradient(15deg, transparent 25%, $secondary 35%, transparent 50%);
   background-position: 0 90%;
   background-repeat: repeat-x;
@@ -67,25 +73,38 @@ a {
   text-decoration: none;
 
   &:visited {
-    color: $primary;
+    @include color('color', 'primary');
     text-decoration: none;
   }
 }
 
-
 @each $colorName, $color, $color-light, $color-text in $colors {
-  .alert-#{$colorName} {
-    background-color: $color-light;
-    border-color: $color;
-    color: $color;
-  }
-
   button.btn-#{$colorName},
   .paper-btn.btn-#{$colorName},
   [type='button'].btn-#{$colorName} {
-    background-color: $color-light;
-    border-color: $color;
-    color: $color-text;
+    @include color('color', #{$colorName}-text);
+    @include color('background-color', #{$colorName}-light);
+    @include color('border-color', #{$colorName});
+
+    &:hover {
+      &:active {
+        background-color: darken($color-light, 10%);
+      }
+    }
+  }
+}
+
+@each $colorName, $color, $color-light, $color-text in $colors {
+  button.btn-#{$colorName}-outline,
+  .paper-btn.btn-#{$colorName}-outline,
+  [type='button'].btn-#{$colorName}-outline {
+    @include color('background-color', main-background);
+    @include color('color', #{$colorName});
+    @include color('border-color', #{$colorName});
+
+    &:hover {
+      background-color: $color-light;
+    }
 
     &:hover {
       &:active {

src/components/_cards.scss

@@ -1,7 +1,9 @@
 .card {
   @include shadow;
+  @include color('border-color', 'muted-light');
   backface-visibility: hidden;
-  border: 2px solid $muted-light;
+  border-style: solid;
+  border-width: 2px;
   display: flex;
   flex-direction: column;
   position: relative;
@@ -14,16 +16,19 @@
 
   .card-header,
   .card-footer {
-    background-color: $white-dark;
+    @include color('background-color', 'white-dark');
+    @include color('border-color', 'muted-light');
     padding: 0.75rem 1.25rem;
   }
 
   .card-header {
-    border-bottom: 2px solid $muted-light;
+    border-bottom-style: solid;
+    border-bottom-width: 2px;
   }
 
   .card-footer {
-    border-top: 2px solid $muted-light;
+    border-top-style: solid;
+    border-top-width: 2px;
   }
 
   .card-body {

src/components/_forms.scss

@@ -1,20 +1,24 @@
 input,
 select,
 textarea {
+  @include color('color', 'primary');
+  @include color('border-color', 'primary');
   background: transparent;
-  border: 2px solid $primary;
   border-bottom-left-radius: 15px 255px;
   border-bottom-right-radius: 225px 15px;
+  border-style: solid;
   border-top-left-radius: 255px 15px;
   border-top-right-radius: 15px 225px;
-  color: $primary;
+  border-width: 2px;
   display: block;
   font-size: 1rem;
   outline: none;
   padding: 0.5rem;
 
   &:focus {
-    border: 2px solid $secondary;
+    @include color('border-color', 'secondary');
+    border-style: solid;
+    border-width: 2px;
   }
 
   &.disabled,
@@ -23,6 +27,10 @@ textarea {
   }
 }
 
+select {
+  height: 2.35rem;
+}
+
 .disabled {
   cursor: not-allowed;
   opacity: 0.5;
@@ -60,9 +68,9 @@ textarea {
     /* the basic, unchecked style */
     input {
       border: 0;
-      display: none;
       height: 1px;
       margin: -1px;
+      opacity: 0;
       overflow: hidden;
       padding: 0;
       position: absolute;
@@ -72,7 +80,9 @@ textarea {
         display: block;
 
         &::before {
-          border: 2px solid $primary;
+          @include color('border-color', 'primary');
+          border-style: solid;
+          border-width: 2px;
           content: '';
           display: inline-block;
           height: 1rem;
@@ -115,6 +125,316 @@ textarea {
       }
     }
   }
+
+  .paper-switch-label,
+  .paper-switch-2-label {
+    cursor: pointer;
+    float: left;
+  }
+
+  .paper-switch-label {
+    margin: -6px 10px 0 0;
+  }
+
+  .paper-switch-2-label {
+    margin: 0 10px 0 0;
+  }
+
+  .paper-switch,
+  .paper-switch-2 {
+    display: block;
+    float: left;
+    margin: 0 10px 0 0;
+    position: relative;
+
+    input {
+      height: 0;
+      opacity: 0;
+      width: 0;
+
+      &:checked + .paper-switch-slider {
+        @include color('background-color', 'success-light');
+      }
+
+      &:checked + .paper-switch-slider::before {
+        transform: translateX(26px);
+      }
+
+      &:focus + .paper-switch-slider {
+        box-shadow: 0 0 3px $secondary;
+      }
+
+    }
+
+    .paper-switch-slider {
+      @include color('border-color', 'primary');
+      border-bottom-left-radius: 15px 255px;
+      border-bottom-right-radius: 225px 15px;
+      border-style: solid;
+      border-top-left-radius: 255px 15px;
+      border-top-right-radius: 15px 225px;
+      border-width: 2px;
+      bottom: 0;
+      cursor: pointer;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+      transition: 0.4s;
+
+      &::before {
+        @include color('background', 'secondary');
+        border-bottom-left-radius: 15px 255px;
+        border-bottom-right-radius: 225px 15px;
+        border-top-left-radius: 255px 15px;
+        border-top-right-radius: 15px 225px;
+        content: '';
+        left: 4px;
+        position: absolute;
+        transition: 0.4s;
+      }
+
+    }
+
+    .paper-switch-slider.round {
+      @include color('border-color', 'primary');
+      border-bottom-left-radius: 0.7rem 1rem;
+      border-bottom-right-radius: 1rem 0.9rem;
+      border-style: solid;
+      border-top-left-radius: 1rem 1rem;
+      border-top-right-radius: 1rem 0.6rem;
+      border-width: 2px;
+
+      &::before {
+        background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20fill%3D'%230071de'%20d%3D'M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89%20c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837%20c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079%20c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826%20c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371%20c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262%20c0.643,4.698,0.646,10.775-3.811,13.746'%3E%3C/path%3E%3C/svg%3E") left center no-repeat;
+        border-bottom-left-radius: 0.7rem 1rem;
+        border-bottom-right-radius: 1rem 0.9rem;
+        border-top-left-radius: 1rem 1rem;
+        border-top-right-radius: 1rem 0.6rem;
+        left: 4px;
+      }
+
+    }
+
+  }
+
+  .paper-switch {
+    height: 12px;
+    width: 60px;
+
+    .paper-switch-slider {
+      &::before {
+        bottom: -6px;
+        height: 20px;
+        width: 20px;
+      }
+
+    }
+
+    .paper-switch-slider.round {
+      &::before {
+        bottom: -7px;
+        height: 23px;
+        width: 23px;
+      }
+
+    }
+
+  }
+
+  .paper-switch-2 {
+    height: 22px;
+    width: 50px;
+
+    .paper-switch-slider {
+      &::before {
+        bottom: 2px;
+        height: 14px;
+        width: 14px;
+      }
+
+    }
+
+    .paper-switch-slider.round {
+      &::before {
+        bottom: 2px;
+        height: 14px;
+        width: 14px;
+      }
+
+    }
+
+  }
+
+  .paper-switch-tile {
+    cursor: pointer;
+    display: block;
+    float: left;
+    height: 80px;
+    margin: 40px 0 0 40px;
+    perspective: 1000px;
+    position: relative;
+    transform: translate(-50%, -50%);
+    transform-style: preserve-3d;
+    width: 80px;
+
+    &:hover {
+      .paper-switch-tile-card {
+        box-shadow: 2px 8px 4px -5px rgba(0, 0, 0, 0.2);
+        transform: rotateX(30deg);
+      }
+
+      &:checked + .paper-switch-tile-card {
+        background-color: transparent;
+        box-shadow: 0 10px 15px -15px rgba(0, 0, 0, 0.9);
+        transform: rotateX(150deg);
+      }
+
+    }
+
+    input {
+      display: none;
+
+      &:checked + .paper-switch-tile-card {
+        transform: rotateX(180deg);
+      }
+
+    }
+
+  }
+
+  .paper-switch-tile-card {
+    background-color: transparent;
+    border-color: transparent;
+    height: 100%;
+    position: relative;
+    transform-style: preserve-3d;
+    transition: all 600ms;
+    width: 100%;
+
+    div {
+      backface-visibility: hidden;
+      box-shadow: 2px 8px 8px -5px rgba(0, 0, 0, 0.3);
+      height: 100%;
+      line-height: 70px;
+      position: absolute;
+      text-align: center;
+      width: 100%;
+    }
+
+    .paper-switch-tile-card-back {
+      transform: rotateX(180deg);
+    }
+
+  }
+
+  input[type='range'] {
+    appearance: none;
+    border-width: 0;
+    padding: 0;
+
+    /* For Chromium */
+    &::-webkit-slider-runnable-track {
+      @include color('background', 'secondary');
+      @include color('border-color', 'primary');
+
+      border-radius: 18px;
+      border-style: solid;
+      border-width: 1px;
+      box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+      cursor: pointer;
+      height: 8px;
+      margin: 10px 0;
+      width: 100%;
+    }
+
+    &::-webkit-slider-thumb {
+      @include color('background', 'white');
+      @include color('border-color', 'primary');
+
+      appearance: none;
+      border-bottom-left-radius: 0.7rem 1rem;
+      border-bottom-right-radius: 1rem 0.9rem;
+      border-style: solid;
+      border-top-left-radius: 1rem 1rem;
+      border-top-right-radius: 1rem 0.6rem;
+      border-width: 1px;
+      box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+      cursor: pointer;
+      height: 36px;
+      margin-top: -14px;
+      width: 16px;
+    }
+
+    /* For Mozilla Firefox */
+    &::-moz-range-track {
+      @include color('background', 'secondary');
+      @include color('border-color', 'primary');
+
+      border-radius: 18px;
+      box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+      cursor: pointer;
+      height: 8px;
+      width: 100%;
+    }
+
+    &::-moz-range-thumb {
+      @include color('background', 'white');
+      @include color('border-color', 'primary');
+
+      border-bottom-left-radius: 0.7rem 1rem;
+      border-bottom-right-radius: 1rem 0.9rem;
+      border-style: solid;
+      border-top-left-radius: 1rem 1rem;
+      border-top-right-radius: 1rem 0.6rem;
+      border-width: 1px;
+      box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+      cursor: pointer;
+      height: 36px;
+      width: 16px;
+    }
+
+    /* For IE */
+    &::-ms-track {
+      background: transparent;
+      border-color: transparent;
+      border-width: 16px 0;
+      color: transparent;
+      cursor: pointer;
+      height: 8px;
+      width: 100%;
+    }
+
+    &::-ms-fill-lower,
+    &::-ms-fill-upper {
+      @include color('background', 'secondary');
+      @include color('border-color', 'primary');
+
+      border-radius: 18px;
+      border-style: solid;
+      border-width: 1px;
+      box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+    }
+
+    &::-ms-thumb {
+      @include color('background', 'white');
+      @include color('border-color', 'primary');
+
+      border: 1px solid $primary;
+      border-bottom-left-radius: 0.7rem 1rem;
+      border-bottom-right-radius: 1rem 0.9rem;
+      border-style: solid;
+      border-top-left-radius: 1rem 1rem;
+      border-top-right-radius: 1rem 0.6rem;
+      border-width: 1px;
+      box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+      cursor: pointer;
+      height: 36px;
+      width: 16px;
+    }
+
+  }
+
 }
 
 fieldset.form-group {

src/components/_modals.scss

@@ -11,7 +11,7 @@
   top: 0;
   visibility: hidden;
   word-wrap: break-word;
-  z-index: 12;
+  z-index: 200;
 
   // modal background
   &-bg {
@@ -24,10 +24,13 @@
   }
 
   .modal-body {
+    @include color('color', 'primary');
+    @include color('background', 'main-background');
+    @include color('border-color', 'muted-light');
     @include transition;
     backface-visibility: hidden;
-    background: $white;
-    border: 2px solid $muted-light;
+
+    border: 2px solid;
     left: 50%;
     padding: 1.25rem;
     position: absolute;
@@ -41,8 +44,8 @@
   }
 
   .btn-close {
+    @include color('color', 'primary-light');
     @include transition;
-    color: $primary-light;
     cursor: pointer;
     font-size: 30px;
     height: 1.1rem;
@@ -55,7 +58,7 @@
     &:hover,
     &:active,
     &:focus {
-      color: $primary;
+      @include color('color', 'primary');
     }
   }
 
@@ -67,7 +70,7 @@
 
   h5,
   .modal-subtitle {
-    color: $secondary;
+    @include color('color', 'secondary');
     margin-bottom: 0.5rem;
     margin-top: 0;
   }
@@ -84,7 +87,7 @@
   }
 
   .paper-btn {
-    background: $white;
+    @include color('background', 'main-background');
     display: inline-block;
     text-decoration: none;
   }
@@ -101,7 +104,7 @@
     &:hover,
     &:focus,
     &:visited {
-      color: $primary;
+      @include color('color', 'primary');
       text-decoration: none;
     }
   }

src/components/_navbar.scss

@@ -1,5 +1,5 @@
 nav {
-  background-color: $main-background;
+  @include color('background-color', 'main-background');
   display: flex;
   padding: 0.3rem;
   position: relative;
@@ -13,17 +13,20 @@ nav {
   .bar1,
   .bar2,
   .bar3 {
-    background-color: $primary;
-    border-bottom: 5px solid $primary;
+    @include color('background-color', 'primary');
+    @include color('border-color', 'primary');
+    @include color('color', 'primary');
     border-bottom-left-radius: 15px 5px;
     border-bottom-right-radius: 15px 3px;
-    color: $primary;
+    border-bottom-style: solid;
+    border-bottom-width: 5px;
     margin: 6px 0;
     transition: 0.4s;
     width: 2rem;
   }
 
-  .collapsible input[id^=collapsible]:checked + button {
+  .collapsible input[id^=collapsible]:checked + button, // Leaving for backwards compatibility. See docs for proper usage
+  .collapsible input[id^=collapsible]:checked + label {
     .bar1 {
       transform: rotate(-45deg) translate(-9px, 7px);
     }
@@ -69,16 +72,20 @@ nav {
   }
 
   a {
+    @include color('color', 'primary');
+    @include color('border-bottom-color', 'primary');
     background-image: none;
-    border-bottom: 5px solid $primary;
     border-bottom-left-radius: 15px 3px;
     border-bottom-right-radius: 15px 5px;
-    color: $primary;
+    border-bottom-style: solid;
+    border-bottom-width: 5px;
     padding-bottom: 0.1rem;
   }
 
   a:hover {
-    border-bottom: 5px solid $primary-light;
+    @include color('border-color', 'primary-light');
+    border-bottom-style: solid;
+    border-bottom-width: 5px;
   }
 
   ul.inline li a {
@@ -101,12 +108,18 @@ nav {
     h3,
     h4,
     h5,
-    h6, {
+    h6 {
       margin: 0;
       margin-bottom: 0.2rem;
     }
   }
 
+  .collapsible {
+    @include resp(small) {
+      width: 100%;
+    }
+  }
+
   .collapsible input[id^=collapsible]:checked ~ div.collapsible-body {
     margin: 0;
     max-height: 960px;
@@ -128,12 +141,24 @@ nav {
   }
 
   .collapsible label {
-    border-bottom: 0;
-    padding: 0;
+    @include color('border-color', 'primary');
+
+    border-bottom-left-radius: 15px 255px;
+    border-bottom-right-radius: 225px 15px;
+    border-style: solid;
+    border-top-left-radius: 255px 15px;
+    border-top-right-radius: 15px 225px;
+    border-width: 2px;
   }
 
   .collapsible > button {
-    background-color: $main-background;
+    // Leaving for backwards compatibility. See docs for proper usage
+    border: 0;
+  }
+
+  .collapsible > button, // Leaving for backwards compatibility. See docs for proper usage
+  .collapsible > label {
+    @include color('background-color', 'main-background');
     display: none;
     font-size: 0.5rem;
     margin-right: 1rem;

src/components/_popovers.scss

@@ -10,17 +10,19 @@
   &:hover {
     &::after {
       opacity: 1;
-      transition: opacity 0.2s ease-out;
+      transition: opacity 235ms ease-in-out, visibility 0s linear;
+      visibility: visible;
     }
   }
 
   // Creating popover::after element
   &::after {
     @include border-style();
-    @include transition(opacity);
-    background: $light-dark;
-    border: 2px solid $primary;
-    color: $white;
+    @include color('background-color', 'light-dark');
+    @include color('border-color', 'light-dark');
+    @include color('color', 'primary-inverse');
+    border-style: solid;
+    border-width: 2px;
     font-size: 0.7em;
     left: 50%;
     min-width: 80px;
@@ -30,6 +32,8 @@
     text-align: center;
     top: -6px;
     transform: translateX(-50%) translateY(-100%);
+    transition: opacity 235ms ease-in-out, visibility 0s linear 235ms;
+    visibility: hidden;
   }
 }
 

src/components/_progress.scss

@@ -1,6 +1,7 @@
 .progress {
   @include border-style(5);
-  border: 2px solid $primary;
+  @include color('border-color', 'primary');
+  border: 2px solid;
   box-shadow: $shadow-hover;
   height: 1.2rem;
   overflow: hidden;
@@ -9,8 +10,9 @@
   .bar {
     @include border-style(5);
     @include transition;
-    background-color: $primary-light;
-    border-right: 2px solid $primary;
+    @include color('background-color', 'primary-light');
+    @include color('border-color', 'primary');
+    border-right: 2px solid;
     display: flex;
     flex-direction: column;
     font-size: 0.6rem;
@@ -25,7 +27,7 @@
 
     @each $colorName, $color, $color-light in $colors {
       &.#{$colorName} {
-        background-color: $color-light;
+        @include color('background-color', #{$colorName}-light);
   
         &.striped {
           @include striped-background($color-light);
@@ -35,7 +37,7 @@
 
     @for $i from 0 through 100 {
       &.w-#{$i} {
-        width: $i + %;
+        width: $i * 1%;
       }
     }
   

src/components/_tabs.scss

@@ -1,26 +1,29 @@
 .tabs {
   .content {
     display: none;
+    flex-basis: 100%;
     padding: 0.75rem 0 0;
   }
 
   input {
     display: none;
 
-    &:checked+label {
-      border-bottom: solid 3px $secondary;
-      color: $primary;
+    &:checked + label {
+      @include color(color, 'primary');
+      @include color('border-bottom-color', 'secondary');
+      border-bottom-style: solid;
+      border-bottom-width: 3px;
     }
 
     @for $num from 1 through 5 {
-      &[id='tab#{$num}']:checked~div[id='content#{$num}'] {
+      &[id$='tab#{$num}']:checked~div[id$='content#{$num}'] {
         display: block;
       }
     }
   }
 
   label {
-    color: $primary-light;
+    @include color('color', primary-light);
     display: inline-block;
     font-weight: 600;
     margin: 0 0 -1px;
@@ -28,7 +31,7 @@
     text-align: center;
 
     &:hover {
-      color: $muted;
+      @include color('color', muted);
       cursor: pointer;
     }
   }

src/content/_code.scss

@@ -1,24 +1,27 @@
 code {
-  background-color: lighten($primary, 70%);
+  @include color('color', 'secondary');
+  @include color('background-color', 'primary-shaded-70');
   border-radius: 3px;
-  color: $secondary;
   font-size: 80%;
   padding: 2px 4px;
 }
 
 kbd {
-  background-color: $primary;
+  @include color('color', 'primary-inverse');
+  @include color('background-color', 'primary');
   border-radius: 3px;
-  color: $white;
   font-size: 80%;
   padding: 2px 4px;
 }
 
 pre {
-  background-color: lighten($primary, 73%);
-  border: 1px solid lighten($primary, 50%);
+  @include color('color', 'inverse-primary');
+  @include color('background-color', 'primary-shaded-70');
+  @include color('border-color', 'primary-shaded-50');
+
   border-radius: 3px;
-  color: $primary;
+  border-style: solid;
+  border-width: 1px;
   display: block;
   font-size: 80%;
   line-height: 1.5;
@@ -29,8 +32,8 @@ pre {
   word-wrap: break-word;
 
   code {
+    @include color('color', 'inverse-primary');
     background: transparent;
-    color: inherit;
     display: block;
     font-size: inherit;
     padding: initial;

src/content/_fonts.scss

@@ -1,5 +1,5 @@
 html {
-  color: $font-color;
+  @include color('color', 'primary');
   font-family: $body-font, sans-serif;
   font-size: $global-font-size;
 }
@@ -7,6 +7,7 @@ html {
 p,
 a,
 button,
+li,
 table,
 thead,
 tbody,

src/content/_images.scss

@@ -1,6 +1,8 @@
 img {
   @include border-style();
-  border: 2px solid $primary;
+  @include color('border-color', 'primary');
+  border-style: solid;
+  border-width: 2px;
   display: block;
   height: auto;
   max-width: 100%;

src/content/_tables.scss

@@ -29,7 +29,7 @@ table {
   }
 
   &.table-hover tbody tr:hover {
-    color: $secondary;
+    @include color('color', 'secondary');
   }
 
   &.table-alternating tbody tr:nth-of-type(even) {

src/core/_config.scss

@@ -2,40 +2,260 @@
   Global PaperCSS Config
 */
 
+// The src for fonts (false to disable)
+$font-src: 'https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC&display=swap' !default;
+
 // Imports
-@import url('https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC');
+@if $font-src {
+  @import url($font-src);
+}
 
 // Set theme colors
 $primary: #41403e !default;
-$secondary: #0071de !default;
+$secondary: #0b74d5 !default;
 
 $success: #86a361 !default;
 $warning: #ddcd45 !default;
 $danger: #a7342d !default;
 $muted: #868e96 !default;
 
-$primary-light: lighten($primary, 50%) !default;
-$secondary-light: lighten($secondary, 50%) !default;
-$success-light: lighten($success, 30%) !default;
+$primary-light: lighten($primary, 55%) !default;
+$secondary-light: lighten($secondary, 48%) !default;
+$success-light: lighten($success, 32%) !default;
 $warning-light: lighten($warning, 30%) !default;
 $danger-light: lighten($danger, 45%) !default;
 $muted-light: lighten($muted, 35%) !default;
 
+$primary-dark: darken($primary, 50%) !default;
+$secondary-dark: darken($secondary, 50%) !default;
+$success-dark: darken($success, 30%) !default;
+$warning-dark: darken($warning, 30%) !default;
+$danger-dark: darken($danger, 45%) !default;
+$muted-dark: darken($muted, 35%) !default;
+
+$primary-light-10: lighten($primary, 10%) !default;
+$secondary-light-10: lighten($secondary, 10%) !default;
+$success-light-10: lighten($success, 10%) !default;
+$warning-light-10: lighten($warning, 10%) !default;
+$danger-light-10: lighten($danger, 10%) !default;
+$muted-light-10: lighten($muted, 10%) !default;
+
+$primary-dark-10: darken($primary, 10%) !default;
+$secondary-dark-10: darken($secondary, 10%) !default;
+$success-dark-10: darken($success, 23%) !default;
+$warning-dark-10: darken($warning, 30%) !default;
+$danger-dark-10: darken($danger, 10%) !default;
+$muted-dark-10: darken($muted, 10%) !default;
+
+$primary-shaded-70: lighten($primary, 70%) !default;
+$primary-shaded-50: lighten($primary, 50%) !default;
+
 $white-dark: rgba(#000, 0.03) !default;
+$white-dark-light-80: lighten($white-dark, 80%) !default;
 $light-dark: rgba(#000, 0.7) !default;
 $white: rgba(#fff, 1) !default;
 $main-background: rgba(#fff, 1) !default;
+$black: rgba(#000, 1) !default;
+$main-background-light: lighten($main-background, 50%) !default;
 
-$primary-text: #fff !default;
-$secondary-text: $primary !default;
-$success-text: $primary !default;
-$warning-text: $primary !default;
-$danger-text: $primary !default;
-$muted-text: $primary !default;
+$primary-text: $primary-dark-10 !default;
+$secondary-text: $secondary-dark-10 !default;
+$success-text: $success-dark-10 !default;
+$warning-text: $warning-dark-10 !default;
+$danger-text: $danger-dark-10 !default;
+$muted-text: $muted-dark-10 !default;
 
-$shadow-color-regular: hsla(0, 0, 0%, 0.2) !default;
-$shadow-color-hover: hsla(0, 0, 0%, 0.3) !default;
+$shadow-color-regular: hsla(0, 0%, 0%, 0.2) !default;
+$shadow-color-hover: hsla(0, 0%, 0%, 0.3) !default;
 
+$primary-inverse: #fff !default;
+
+
+// Set dark theme colors
+
+$dark-primary: #fff !default;
+$dark-secondary: #5595ce !default;
+
+$dark-success: #70c272 !default;
+$dark-warning: #d4c252 !default;
+$dark-danger: #df4c57 !default;
+$dark-muted: #868e96 !default;
+
+$dark-primary-light: lighten($dark-primary, 5%) !default;
+$dark-secondary-light: lighten($dark-secondary, 5%) !default;
+$dark-success-light: lighten($dark-success, 5%) !default;
+$dark-warning-light: lighten($dark-warning, 5%) !default;
+$dark-danger-light: lighten($dark-danger, 5%) !default;
+$dark-muted-light: lighten($dark-muted, 5%) !default;
+
+$dark-primary-dark: darken($dark-primary, 50%) !default;
+$dark-secondary-dark: darken($dark-secondary, 30%) !default;
+$dark-success-dark: darken($dark-success, 35%) !default;
+$dark-warning-dark: darken($dark-warning, 30%) !default;
+$dark-danger-dark: darken($dark-danger, 30%) !default;
+$dark-muted-dark: darken($dark-muted, 35%) !default;
+
+$dark-primary-light-10: lighten($dark-primary, 10%) !default;
+$dark-secondary-light-10: lighten($dark-secondary, 10%) !default;
+$dark-success-light-10: lighten($dark-success, 10%) !default;
+$dark-warning-light-10: lighten($dark-warning, 10%) !default;
+$dark-danger-light-10: lighten($dark-danger, 10%) !default;
+$dark-muted-light-10: lighten($dark-muted, 10%) !default;
+
+$dark-primary-dark-10: darken($dark-primary, 10%) !default;
+$dark-secondary-dark-10: darken($dark-secondary, 10%) !default;
+$dark-success-dark-10: darken($dark-success, 10%) !default;
+$dark-warning-dark-10: darken($dark-warning, 10%) !default;
+$dark-danger-dark-10: darken($dark-danger, 10%) !default;
+$dark-muted-dark-10: darken($dark-muted, 10%) !default;
+
+$dark-primary-shaded-70: darken($primary, 7%) !default;
+$dark-primary-shaded-50: darken($primary, 5%) !default;
+
+$dark-white-dark: rgba(#fff, 0.03) !default;
+$dark-white-dark-light-80: lighten($dark-white-dark, 80%) !default;
+$dark-light-dark: rgba(#fff, 0.7) !default;
+$dark-white: rgba(#fff, 1) !default;
+$dark-main-background: rgba($primary, 1) !default;
+$dark-main-background-light: lighten($dark-main-background, 50%) !default;
+$dark-black: rgba(#000, 1) !default;
+
+$dark-primary-text: $primary !default;
+$dark-secondary-text: $dark-secondary-dark !default;
+$dark-success-text: $dark-success-dark !default;
+$dark-warning-text: $dark-warning-dark !default;
+$dark-danger-text: $dark-danger-dark !default;
+$dark-muted-text: $dark-muted-light !default;
+
+$dark-shadow-color-regular: hsla(0, 0%, 0%, 0.2) !default;
+$dark-shadow-color-hover: hsla(0, 0%, 0%, 0.3) !default;
+
+$dark-primary-inverse: $primary !default;
+
+
+
+$theme-map: (
+  light: (
+    primary: $primary,
+    secondary: $secondary,
+    success: $success,
+    warning: $warning,
+    danger: $danger,
+    muted: $muted,
+    primary-light: $primary-light,
+    secondary-light:$secondary-light,
+    success-light:$success-light,
+    warning-light:$warning-light,
+    danger-light:$danger-light,
+    muted-light:$muted-light,
+    primary-dark: $primary-dark,
+    secondary-dark:$secondary-dark,
+    success-dark:$success-dark,
+    warning-dark:$warning-dark,
+    danger-dark:$danger-dark,
+    muted-dark:$muted-dark,
+    primary-light-10:$primary-light-10,
+    secondary-light-10:$secondary-light-10,
+    success-light-10:$success-light-10,
+    warning-light-10:$warning-light-10,
+    danger-light-10:$danger-light-10,
+    muted-light-10:$muted-light-10,
+    primary-dark-10:$primary-dark-10,
+    secondary-dark-10:$secondary-dark-10,
+    success-dark-10:$success-dark-10,
+    warning-dark-10:$warning-dark-10,
+    danger-dark-10:$danger-dark-10,
+    muted-dark-10:$muted-dark-10,
+    primary-shaded-50: $primary-shaded-50,
+    primary-shaded-70: $primary-shaded-70,
+    white-dark:$white-dark,
+    white-dark-light-80:$white-dark-light-80,
+    light-dark:$light-dark,
+    'white':$white,
+    main-background: $main-background,
+    main-background-light: $main-background-light,
+    'black': $black,
+    primary-text:$primary-text,
+    secondary-text:$secondary-text,
+    success-text:$success-text,
+    warning-text:$warning-text,
+    danger-text:$danger-text,
+    muted-text:$muted-text,
+    shadow-color-regular: $shadow-color-regular,
+    shadow-color-hover: $shadow-color-hover,
+    primary-inverse: $primary-inverse,
+  ),
+  dark: (
+    primary: $dark-primary,
+    secondary: $dark-secondary,
+    success: $dark-success,
+    warning: $dark-warning,
+    danger: $dark-danger,
+    muted: $dark-muted,
+    primary-light: $dark-primary-light,
+    secondary-light:$dark-secondary-light,
+    success-light:$dark-success-light,
+    warning-light:$dark-warning-light,
+    danger-light:$dark-danger-light,
+    muted-light:$dark-muted-light,
+    primary-dark: $dark-primary-dark,
+    secondary-dark:$dark-secondary-dark,
+    success-dark:$dark-success-dark,
+    warning-dark:$dark-warning-dark,
+    danger-dark:$dark-danger-dark,
+    muted-dark:$dark-muted-dark,
+    primary-light-10:$dark-primary-light-10,
+    secondary-light-10:$dark-secondary-light-10,
+    success-light-10:$dark-success-light-10,
+    warning-light-10:$dark-warning-light-10,
+    danger-light-10:$dark-danger-light-10,
+    muted-light-10:$dark-muted-light-10,
+    primary-dark-10:$dark-primary-dark-10,
+    secondary-dark-10:$dark-secondary-dark-10,
+    success-dark-10:$dark-success-dark-10,
+    warning-dark-10:$dark-warning-dark-10,
+    danger-dark-10:$dark-danger-dark-10,
+    muted-dark-10:$dark-muted-dark-10,
+    primary-shaded-50: $dark-primary-shaded-50,
+    primary-shaded-70: $dark-primary-shaded-70,
+    white-dark:$dark-white-dark,
+    white-dark-light-80:$dark-white-dark-light-80,
+    light-dark:$dark-light-dark,
+    'white':$dark-white,
+    main-background: $dark-main-background,
+    main-background-light: $dark-main-background-light,
+    'black': $dark-black,
+    primary-text:$dark-primary-text,
+    secondary-text:$dark-secondary-text,
+    success-text:$dark-success-text,
+    warning-text:$dark-warning-text,
+    danger-text:$dark-danger-text,
+    muted-text:$dark-muted-text,
+    shadow-color-regular: $dark-shadow-color-regular,
+    shadow-color-hover: $dark-shadow-color-hover,
+    primary-inverse: $dark-primary-inverse,
+  )
+);
+
+
+html {
+  @each $var in map-keys(map-get($theme-map, 'light')) {
+    --#{$var}: #{map-get(map-get($theme-map, 'light'), $var)};
+  }
+}
+
+html.dark {
+  @each $var in map-keys(map-get($theme-map, 'dark')) {
+    --#{$var}: #{map-get(map-get($theme-map, 'dark'), $var)};
+  }
+}
+
+
+@mixin color($property, $varName) {
+  // IE falls back to light theme always
+  #{$property}: #{map-get(map-get($theme-map, 'light'), 'primary')};
+  #{$property}: var(--#{$varName});
+}
 
 // Map to set your color names
 /* stylelint-disable */
@@ -53,11 +273,11 @@ $colors: (primary, $primary, $primary-light, $primary-text),
 */
 @each $colorName, $color, $color-light in $colors {
   .text-#{$colorName} {
-    color: $color;
+    @include color('color',#{$colorName});
   }
 
   .background-#{$colorName} {
-    background-color: $color-light;
+    @include color('background-color',#{$colorName}-light);
   }
 }
 

src/layout/_container.scss

@@ -11,6 +11,30 @@
   }
 }
 
+.container {
+  &.container-xs {
+    max-width: $xsmall-screen;
+  }
+}
+
+.container {
+  &.container-sm {
+    max-width: $small-screen;
+  }
+}
+
+.container {
+  &.container-md {
+    max-width: $medium-screen;
+  }
+}
+
+.container {
+  &.container-lg {
+    max-width: $large-screen;
+  }
+}
+
 .section {
   margin-bottom: 2rem;
   margin-top: 1rem;
@@ -31,7 +55,7 @@ hr {
 }
 
 .paper {
-  background-color: $main-background;
+  @include color('background-color', 'main-background');
   border: 1px solid $primary-light;
   box-shadow: -1px 5px 35px -9px hsla(0, 0%, 0%, 0.2);
   margin-bottom: 1rem;

src/styles.scss

@@ -25,6 +25,7 @@
 @import 'components/alerts';
 @import 'components/article';
 @import 'components/badges';
+@import 'components/breadcrumb';
 @import 'components/buttons';
 @import 'components/cards';
 @import 'components/forms';

src/utilities/_borders.scss

@@ -1,6 +1,7 @@
-
 .border {
-  border: 2px solid $primary;
+  @include color('border-color','primary' );
+  border-style: solid;
+  border-width: 2px;
 }
 
 .border,
@@ -35,11 +36,13 @@
 }
 
 .child-borders>* {
-  border: 2px solid $primary;
+  @include color('border-color', 'primary');
+  border-style: solid;
+  border-width: 2px;
 }
 
 .border-white {
-  border-color: $white;
+  @include color('border-color', 'white');
 }
 
 .border-dotted {
@@ -56,6 +59,6 @@
 
 @each $colorName, $color in $colors {
   .border-#{$colorName} {
-    border-color: $color;
+    @include color('border-color', #{$colorName});
   }
 }

src/utilities/_shadows.scss

@@ -20,6 +20,12 @@
   @include shadow();
 }
 
+.child-shadows {
+  .shadow-none {
+    box-shadow: none;
+  }
+}
+
 .child-shadows-hover > * {
   @include shadow();
 

tests/build/config/build_command.js

@@ -1,17 +0,0 @@
-// Copyright (c) 2012 Titanium I.T. LLC. All rights reserved. See LICENSE.txt for details.
-
-// A cross-platform mechanism for determining how to run the build.
-(function() {
-	"use strict";
-
-	var UNIX_BUILD_COMMAND = "./jake.sh";
-	var WINDOWS_BUILD_COMMAND = "jake.bat";
-
-	var os = require("os");
-
-	exports.get = function() {
-		return os.platform() === "win32" ? WINDOWS_BUILD_COMMAND : UNIX_BUILD_COMMAND;
-		//return WINDOWS_BUILD_COMMAND;
-	};
-
-}());

tests/build/config/karma.conf.js

@@ -1,79 +0,0 @@
-// Karma configuration
-// Quixote-specific configuration starts with "QUIXOTE:"
-
-(function() {
-	"use strict";
-
-	var paths = require("./paths.js");
-
-	module.exports = function(config) {
-		config.set({
-
-			// base path, that will be used to resolve files and exclude
-			basePath: '../../..',
-
-			// frameworks to use
-			frameworks: ['mocha', 'commonjs'],
-
-			middleware: ['node-modules'],
-
-			// list of files / patterns to load in the browser
-			files: [
-				'tests/*.js',
-				'tests/vendor/*.js',
-				"node_modules/chai/chai.js",
-				//'tests/**/*.js',
-				//'node_modules/**/*.js',
-				//'node_modules/**/*.js',
-				// QUIXOTE: Serve the CSS file so we can load it in our tests
-				// Mark it `included: false` so Karma doesn't load it automatically
-				{ pattern: 'dist/paper.css', included: false }
-			],
-
-			// list of files to exclude
-			exclude: [],
-
-			// preprocess matching files before serving them to the browser
-			// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
-			preprocessors: {
-				'tests/*.js': ['commonjs'],
-				'tests/vendor/*.js': ['commonjs'],
-			},
-
-			// test results reporter to use
-			// possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
-			reporters: ['dots'],
-
-			// web server port
-			port: 9876,
-
-			// enable / disable colors in the output (reporters and logs)
-			colors: true,
-
-			// level of logging
-			// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-			logLevel: config.LOG_INFO,
-
-			// enable / disable watching file and executing tests whenever any file changes
-			autoWatch: false,
-
-			// Start these browsers, currently available:
-			// - Chrome
-			// - ChromeCanary
-			// - Firefox
-			// - Opera
-			// - Safari (only Mac)
-			// - PhantomJS
-			// - IE (only Windows)
-			browsers: [],
-
-			// If browser does not capture in given timeout [ms], kill it
-			captureTimeout: 60000,
-
-			// Continuous Integration mode
-			// if true, it capture browsers, run tests and exit
-			singleRun: false
-		});
-	};
-
-}());

tests/build/config/paths.js

@@ -1,20 +0,0 @@
-// Copyright (c) 2015 Titanium I.T. LLC. All rights reserved. For license, see "README" or "LICENSE" file.
-
-// Lists commonly-used directories. They're all relative to the project root.
-
-(function() {
-	"use strict";
-
-	module.exports = {
-		generatedDir: "generated",
-		testDir: "generated/test",
-		distDir: "generated/dist",
-		clientDistDir: "generated/dist/client",
-
-		buildDir: "build",
-		clientDir: "src",
-		clientEntryPoint: "src/toggle.js",
-		clientDistBundle: "generated/dist/client/bundle.js"
-	};
-
-}());

tests/build/config/tested_browsers.js

@@ -1,17 +0,0 @@
-// Copyright (c) 2014 Titanium I.T. LLC. All rights reserved. For license, see "README" or "LICENSE" file.
-(function() {
-	"use strict";
-
-	// Uncomment and modify the following list to cause the build to fail unless these browsers are tested.
-	// There's no Quixote-specific configuration in this file.
-
-	module.exports = [
-		//"IE 10.0.0 (Windows 7 0.0.0)",
-		//"Firefox 41.0.0 (Mac OS X 10.10.0)",
-		//"Chrome 46.0.2490 (Mac OS X 10.10.5)",
-		//"Safari 9.0.1 (Mac OS X 10.10.5)",
-		//"Mobile Safari 8.0.0 (iOS 8.4.0)",
-		//"Chrome Mobile 44.0.2403 (Android 6.0.0)"
-	];
-
-}());

tests/build/scripts/Jakefile.js

@@ -1,117 +0,0 @@
-// Copyright (c) 2012-2014 Titanium I.T. LLC. All rights reserved. See LICENSE.txt for details.
-
-// Main build file. Contains all tasks needed for normal development.
-// There's no Quixote-specific configuration in this file.
-
-(function() {
-	"use strict";
-
-	var startTime = Date.now();
-
-	var shell = require("../../../node_modules/shelljs/shell.js");
-	var karma = require("simplebuild-karma");
-	var browserify = require("../util/browserify_runner.js");
-
-	var browsers = require("../config/tested_browsers.js");
-	var paths = require("../config/paths.js");
-
-	var KARMA_CONFIG = "./tests/build/config/karma.conf.js";
-
-	var strict = !process.env.loose;
-
-
-	//*** GENERAL
-
-	desc("Lint and test");
-	task("default", [ "lint", "test" ], function() {
-		var elapsedSeconds = (Date.now() - startTime) / 1000;
-		console.log("\n\nBUILD OK  (" + elapsedSeconds.toFixed(2) + "s)");
-	});
-
-	desc("Start server (for manual testing)");
-	task("run", [ "build" ], function() {
-		jake.exec("node ../node_modules/http-server/bin/http-server " + paths.clientDistDir, { interactive: true }, complete);
-	}, { async: true });
-
-	desc("Delete generated files");
-	task("clean", function() {
-		shell.rm("-rf", paths.generatedDir);
-	});
-
-
-	//*** LINT
-/** */
-	desc("Lint everything");
-	task("lint", ["lintNode", "lintClient"]);
-
-	task("lintNode", function() {
-		process.stdout.write("Linting Node.js code: ");
-
-	}, { async: false });
-
-	task("lintClient", function() {
-		process.stdout.write("Linting browser code: ");
-
-	}, { async: false });
-
-	//*** TEST
-
-	desc("Start Karma server -- run this first");
-	task("karma", function() {
-		karma.start({
-			configFile: KARMA_CONFIG
-		}, complete, fail);
-	}, { async: true });
-
-	desc("Run tests");
-	task("test", function() {
-		console.log("Testing browser code: ");
-
-		var browsersToCapture = process.env.capture ? process.env.capture.split(",") : [];
-		karma.run({
-			configFile: KARMA_CONFIG,
-			expectedBrowsers: browsers,
-			strict: strict,
-			capture: browsersToCapture
-		}, complete, fail);
-	}, { async: true });
-
-
-	//*** BUILD
-
-	desc("Build distribution package");
-	task("build", [ "prepDistDir", "buildClient" ]);
-
-	task("prepDistDir", function() {
-		shell.rm("-rf", paths.distDir);
-	});
-
-	task("buildClient", [ paths.clientDistDir, "bundleClientJs" ], function() {
-		console.log("Copying client code: .");
-		shell.cp(
-			paths.clientDir + "/*.html",
-			paths.clientDir + "/*.css",
-			paths.clientDir + "/*.svg",
-			paths.clientDistDir
-		);
-	});
-
-	task("bundleClientJs", [ paths.clientDistDir ], function() {
-		console.log("Bundling browser code with Browserify: .");
-		browserify.bundle({
-			entry: paths.clientEntryPoint,
-			outfile: paths.clientDistBundle,
-			options: {
-				standalone: "toggle",
-				debug: true
-			}
-		}, complete, fail);
-	}, { async: true });
-
-
-	//*** CREATE DIRECTORIES
-
-	directory(paths.testDir);
-	directory(paths.clientDistDir);
-
-}());

tests/build/scripts/build.jakefile.js

@@ -1,117 +0,0 @@
-// Copyright (c) 2012-2014 Titanium I.T. LLC. All rights reserved. See LICENSE.txt for details.
-
-// Main build file. Contains all tasks needed for normal development.
-// There's no Quixote-specific configuration in this file.
-
-(function() {
-	"use strict";
-
-	var startTime = Date.now();
-
-	var shell = require("../../../node_modules/shelljs/shell.js");
-	var karma = require("simplebuild-karma");
-	var browserify = require("../util/browserify_runner.js");
-
-	var browsers = require("../config/tested_browsers.js");
-	var paths = require("../config/paths.js");
-
-	var KARMA_CONFIG = "./tests/build/config/karma.conf.js";
-
-	var strict = !process.env.loose;
-
-
-	//*** GENERAL
-
-	desc("Lint and test");
-	task("default", [ "lint", "test" ], function() {
-		var elapsedSeconds = (Date.now() - startTime) / 1000;
-		console.log("\n\nBUILD OK  (" + elapsedSeconds.toFixed(2) + "s)");
-	});
-
-	desc("Start server (for manual testing)");
-	task("run", [ "build" ], function() {
-		jake.exec("node ../node_modules/http-server/bin/http-server " + paths.clientDistDir, { interactive: true }, complete);
-	}, { async: true });
-
-	desc("Delete generated files");
-	task("clean", function() {
-		shell.rm("-rf", paths.generatedDir);
-	});
-
-
-	//*** LINT
-/** */
-	desc("Lint everything");
-	task("lint", ["lintNode", "lintClient"]);
-
-	task("lintNode", function() {
-		process.stdout.write("Linting Node.js code: ");
-
-	}, { async: false });
-
-	task("lintClient", function() {
-		process.stdout.write("Linting browser code: ");
-
-	}, { async: false });
-
-	//*** TEST
-
-	desc("Start Karma server -- run this first");
-	task("karma", function() {
-		karma.start({
-			configFile: KARMA_CONFIG
-		}, complete, fail);
-	}, { async: true });
-
-	desc("Run tests");
-	task("test", function() {
-		console.log("Testing browser code: ");
-
-		var browsersToCapture = process.env.capture ? process.env.capture.split(",") : [];
-		karma.run({
-			configFile: KARMA_CONFIG,
-			expectedBrowsers: browsers,
-			strict: strict,
-			capture: browsersToCapture
-		}, complete, fail);
-	}, { async: true });
-
-
-	//*** BUILD
-
-	desc("Build distribution package");
-	task("build", [ "prepDistDir", "buildClient" ]);
-
-	task("prepDistDir", function() {
-		shell.rm("-rf", paths.distDir);
-	});
-
-	task("buildClient", [ paths.clientDistDir, "bundleClientJs" ], function() {
-		console.log("Copying client code: .");
-		shell.cp(
-			paths.clientDir + "/*.html",
-			paths.clientDir + "/*.css",
-			paths.clientDir + "/*.svg",
-			paths.clientDistDir
-		);
-	});
-
-	task("bundleClientJs", [ paths.clientDistDir ], function() {
-		console.log("Bundling browser code with Browserify: .");
-		browserify.bundle({
-			entry: paths.clientEntryPoint,
-			outfile: paths.clientDistBundle,
-			options: {
-				standalone: "toggle",
-				debug: true
-			}
-		}, complete, fail);
-	}, { async: true });
-
-
-	//*** CREATE DIRECTORIES
-
-	directory(paths.testDir);
-	directory(paths.clientDistDir);
-
-}());

tests/build/scripts/run_jake.bat

@@ -1,7 +0,0 @@
-@echo off
-REM Runs Jake from node_modules directory, preventing it from needing to be installed globally
-REM Also ensures node modules have been installed
-REM There's no Quixote-specific configuration in this file.
-
-if not exist node_modules\.bin\jake.cmd call npm install
-node_modules\.bin\jake %*

tests/build/scripts/run_jake.sh

@@ -1,6 +0,0 @@
-# Runs Jake from node_modules directory, preventing it from needing to be installed globally
-# Also ensures node modules have been installed
-# There's no Quixote-specific configuration in this file.
-
-[ ! -f node_modules/.bin/jake ] && echo "Installing npm modules:" && npm install
-node_modules/.bin/jake $*

tests/build/scripts/watch.js

@@ -1,28 +0,0 @@
-// Copyright (c) 2015 Titanium I.T. LLC. All rights reserved. For license, see "README" or "LICENSE" file.
-
-// Automatically runs build when files change.
-// There's no Quixote-specific configuration in this file.
-
-(function() {
-	"use strict";
-
-	var nodemon = require("nodemon");
-	var buildCommand = require("../config/build_command.js");
-	var paths = require("../config/paths.js");
-
-	console.log("*** Using nodemon to run " + buildCommand.get() + ". Type 'rs<enter>' to force restart.");
-	nodemon({
-		ext: "sh bat json js html css",
-		ignore: paths.generatedDir,
-		exec: buildCommand.get() + " " + process.argv.slice(2).join(" "),
-		execMap: {
-			sh: "/bin/sh",
-			bat: "cmd.exe /c",
-			cmd: "cmd.exe /c"
-		}
-	}).on("restart", function(files) {
-		if (files) console.log("*** Restarting due to", files);
-		else console.log("*** Restarting");
-	});
-
-}());

tests/build/util/browserify_runner.js

@@ -1,21 +0,0 @@
-/* Copyright (c) 2014 Titanium I.T. LLC - See LICENSE.txt for license */
-
-// Helper function for running Browserify
-// There's no Quixote-specific configuration in this file.
-
-"use strict";
-
-var fs = require("fs");
-var path = require("path");
-var browserify = require("browserify");
-
-exports.bundle = function(config, success, failure) {
-	var b = browserify(config.options);
-
-	b.add(path.resolve(config.entry));
-	b.bundle(function(err, bundle) {
-		if (err) return failure(err);
-		fs.writeFileSync(config.outfile, bundle);
-		return success();
-	});
-};

tests/build/util/karma_runner.js

@@ -1,76 +0,0 @@
-// Copyright (c) 2012-2015 Titanium I.T. LLC. All rights reserved. See LICENSE.txt for details.
-
-// Helper functions for running Karma
-// There's no Quixote-specific configuration in this file.
-
-(function() {
-	"use strict";
-
-	var path = require("path");
-	var sh = require("./sh.js");
-	var runner = require("karma/lib/runner");
-	var server = require("karma/lib/server");
-
-	var KARMA = "node node_modules/karma/bin/karma";
-
-	exports.serve = function(configFile, success, fail) {
-		var command = KARMA + " start " + configFile;
-		sh.run(command, success, function () {
-			fail("Could not start Karma server");
-		});
-	};
-
-	exports.runTests = function(options, success, fail) {
-		options.capture = options.capture || [];
-		var config = {
-			configFile: path.resolve(options.configFile),
-			browsers: options.capture,
-			singleRun: options.capture.length > 0
-		};
-
-		var runKarma = runner.run.bind(runner);
-		if (config.singleRun) runKarma = server.start.bind(server);
-
-		var stdout = new CapturedStdout();
-		runKarma(config, function(exitCode) {
-			stdout.restore();
-
-			if (exitCode) return fail("Client tests failed (did you start the Karma server?)");
-			var browserMissing = checkRequiredBrowsers(options.browsers, stdout);
-			if (browserMissing && options.strict) return fail("Did not test all browsers");
-			if (stdout.capturedOutput.indexOf("TOTAL: 0 SUCCESS") !== -1) return fail("No tests were run!");
-
-			return success();
-		});
-	};
-
-	function checkRequiredBrowsers(requiredBrowsers, stdout) {
-		var browserMissing = false;
-		requiredBrowsers.forEach(function(browser) {
-			browserMissing = lookForBrowser(browser, stdout.capturedOutput) || browserMissing;
-		});
-		return browserMissing;
-	}
-
-	function lookForBrowser(browser, output) {
-		var missing = output.indexOf(browser + ": Executed") === -1;
-		if (missing) console.log("Warning: " + browser + " was not tested!");
-		return missing;
-	}
-
-	function CapturedStdout() {
-		var self = this;
-		self.oldStdout = process.stdout.write;
-		self.capturedOutput = "";
-
-		process.stdout.write = function(data) {
-			self.capturedOutput += data;
-			self.oldStdout.apply(this, arguments);
-		};
-	}
-
-	CapturedStdout.prototype.restore = function() {
-		process.stdout.write = this.oldStdout;
-	};
-
-}());

tests/build/util/mocha_runner.js

@@ -1,54 +0,0 @@
-// Copyright (c) 2014-2015 Titanium I.T. LLC. All rights reserved. See LICENSE.txt for details.
-
-// Helper function for running Mocha
-// There's no Quixote-specific configuration in this file.
-
-(function() {
-	"use strict";
-
-	var Mocha = require("mocha");
-	var jake = require("jake");
-
-	exports.runTests = function runTests(options, success, failure) {
-		var mocha = new Mocha(options.options);
-		var files = deglob(options.files);
-		files.forEach(mocha.addFile.bind(mocha));
-
-		//   This is a bit of a hack. The issue is this: during test execution, if an exception is thrown inside
-		// of a callback (and keep in mind that assertions throw exceptions), there's no way for Mocha to catch
-		// that exception.
-		//   So Mocha registers an 'uncaughtException' handler on Node's process object. That way any unhandled
-		// exception is passed to Mocha.
-		//   The problem is that Jake ALSO listens for 'uncaughtException'. Its handler and Mocha's handler don't
-		// get along. Somehow the Jake handler seems to terminate Mocha's test run... not sure why. We need to
-		// disable Jake's handler while Mocha is running.
-		//   This code disables ALL uncaughtException handlers and then restores them after Mocha is done. It's
-		// very hacky and likely to cause problems in certain edge cases (for example, '.once' listeners aren't
-		// restored properly), but it seems to be working for now.
-		//   It might be possible to create a better solution by using Node's 'domain' module. Something to look
-		// into if you're reading this. Another solution is to just spawn Mocha in a separate process, but I
-		// didn't want the time penalty involved. Besides, this seems to be working okay.
-		var savedListeners = disableExceptionListeners();
-
-		var runner = mocha.run(function(failures) {
-			restoreExceptionListeners(savedListeners);
-			if (failures) return failure("Tests failed");
-			else return success();
-		});
-	};
-
-	function deglob(globs) {
-		return new jake.FileList(globs).toArray();
-	}
-
-	function disableExceptionListeners() {
-		var listeners = process.listeners("uncaughtException");
-		process.removeAllListeners("uncaughtException");
-		return listeners;
-	}
-
-	function restoreExceptionListeners(listeners) {
-		listeners.forEach(process.addListener.bind(process, "uncaughtException"));
-	}
-
-}());

tests/build/util/sh.js

@@ -1,48 +0,0 @@
-// Copyright (c) 2012-2015 Titanium I.T. LLC. All rights reserved. See LICENSE.txt for details.
-
-// Helper functions for running processes.
-// There's no Quixote-specific configuration in this file.
-
-(function() {
-	"use strict";
-
-	var jake = require("jake");
-
-	exports.runMany = function(commands, successCallback, failureCallback) {
-		var stdout = [];
-		function serializedSh(command) {
-			if (command) {
-				run(command, function(oneStdout) {
-					stdout.push(oneStdout);
-					serializedSh(commands.shift());
-				}, failureCallback);
-			}
-			else {
-				successCallback(stdout);
-			}
-		}
-		serializedSh(commands.shift());
-	};
-
-	var run = exports.run = function(oneCommand, successCallback, failureCallback) {
-		var stdout = "";
-		var child = jake.createExec(oneCommand);
-		child.on("stdout", function(data) {
-			process.stdout.write(data);
-			stdout += data;
-		});
-		child.on("stderr", function(data) {
-			process.stderr.write(data);
-		});
-		child.on("cmdEnd", function() {
-			successCallback(stdout);
-		});
-		child.on("error", function() {
-			failureCallback(stdout);
-		});
-
-		console.log("> " + oneCommand);
-		child.run();
-	};
-
-}());

tests/build/util/version_checker.js

@@ -1,29 +0,0 @@
-// Copyright (c) 2013 Titanium I.T. LLC. All rights reserved. See LICENSE.TXT for details.
-
-// Helper function for checking version numbers.
-// There's no Quixote-specific configuration in this file.
-
-
-(function() {
-	"use strict";
-
-	var semver = require("semver");
-
-	exports.check = function(options, success, fail) {
-		if (options.strict) {
-			if (semver.neq(options.actual, options.expected)) return failWithQualifier("exactly");
-		}
-		else {
-			if (semver.lt(options.actual, options.expected)) return failWithQualifier("at least");
-			if (semver.neq(options.actual, options.expected)) console.log("Warning: Newer " + options.name +
-				" version than expected. Expected " + options.expected + ", but was " + options.actual + ".");
-		}
-		return success();
-
-		function failWithQualifier(qualifier) {
-			return fail("Incorrect " + options.name + " version. Expected " + qualifier +
-				" " + options.expected + ", but was " + options.actual + ".");
-		}
-	};
-
-}());

tests/colors.js

@@ -1,151 +0,0 @@
-(function() {
-	"use strict";
-
-	var quixote = require("./vendor/quixote.js");
-	var assert = require("./vendor/chai.js").assert;
-
-	describe("Colors", function() {
-		var frame;
-		var media;
-		var textPrimary;
-		var textSecondary;
-		var textSuccess;
-		var textWarning;
-		var textDanger;
-    var textMuted;
-
-    var backgroundPrimary;
-		var backgroundSecondary;
-		var backgroundSuccess;
-		var backgroundWarning;
-		var backgroundDanger;
-    var backgroundMuted;
-
-    var textOverride;
-    var textNotOverride;
-
-		before(function(done) {
-			frame = quixote.createFrame({
-				stylesheet: "/base/dist/paper.css"
-			}, done);
-		});
-
-		after(function() {
-			frame.remove();
-		});
-
-		beforeEach(function() {
-			frame.reset();
-
-			media = frame.add(
-        "<div class='media'>" +
-          "<div id='text'>" +
-            "<p class='text-primary' id='textPrimary'>text-primary</p>" +
-            "<p class='text-secondary' id='textSecondary'>text-secondary</p>" +
-            "<p class='text-success' id='textSuccess'>text-success</p>" +
-            "<p class='text-warning' id='textWarning'>text-warning</p>" +
-            "<p class='text-danger' id='textDanger'>text-danger</p>" +
-            "<p class='text-muted' id='textMuted'>text-muted</p>" +
-          "</div>" +
-          "<div id='background'>" +
-            "<div class='background-primary' id='backgroundPrimary'>background-primary</div>" +
-            "<div class='background-secondary' id='backgroundSecondary'>background-secondary</div>" +
-            "<div class='background-success' id='backgroundSuccess'>background-success</div>" +
-            "<div class='background-warning' id='backgroundWarning'>background-warning</div>" +
-            "<div class='background-danger' id='backgroundDanger'>background-danger</div>" +
-            "<div class='background-muted' id='backgroundMuted'>background-muted</div>" +
-          "</div>" +
-          "<div id='inheritance'>" +
-            "<div class='text-primary'>" +
-              "<p class='text-success' id='text-override'>text-override</p>" +
-              "<p id='text-not-override'>text-not-override</p>" +
-            "</div>" +
-          "</div>" +
-        "</div>",
-
-				"colors"
-			);
-
-			textPrimary = frame.get("#textPrimary");
-			textSecondary = frame.get("#textSecondary");
-			textSuccess = frame.get("#textSuccess");
-			textWarning = frame.get("#textWarning");
-			textDanger = frame.get("#textDanger");
-      textMuted = frame.get("#textMuted");
-
-      backgroundPrimary = frame.get("#backgroundPrimary");
-			backgroundSecondary = frame.get("#backgroundSecondary");
-			backgroundSuccess = frame.get("#backgroundSuccess");
-			backgroundWarning = frame.get("#backgroundWarning");
-			backgroundDanger = frame.get("#backgroundDanger");
-      backgroundMuted = frame.get("#backgroundMuted");
-
-      textOverride = frame.get("#text-override");
-      textNotOverride = frame.get("#text-not-override");
-		});
-
-		it("Text color is set to primary", function() {
-			assert.equal(textPrimary.getRawStyle("color"), "rgb(65, 64, 62)", "Primary color should be #41403E");
-		});
-
-		it("Text color is set to secondary", function() {
-			assert.equal(textSecondary.getRawStyle("color"), "rgb(0, 113, 222)", "Secondary color should be #0071DE");
-		});
-
-		it("Text color is set to success", function() {
-			assert.equal(textSuccess.getRawStyle("color"), "rgb(134, 163, 97)", "Success color should be #86a361");
-		});
-
-		it("Text color is set to warning", function() {
-			assert.equal(textWarning.getRawStyle("color"), "rgb(221, 205, 69)", "Warning color should be #ddcd45");
-		});
-
-		it("Text color is set to danger", function() {
-			assert.equal(textDanger.getRawStyle("color"), "rgb(167, 52, 45)", "Danger color should be #a7342d");
-		});
-
-		it("Text color is set to muted", function() {
-			assert.equal(textMuted.getRawStyle("color"), "rgb(134, 142, 150)", "Muted color should be #868e96");
-    });
-
-
-
-    it("Background color is set to primary", function() {
-			assert.equal(backgroundPrimary.getRawStyle("background-color"), "rgb(193, 192, 189)", "Primary color should be #C1C0BD");
-    });
-
-    it("Background color is set to secondary", function() {
-			assert.equal(backgroundSecondary.getRawStyle("background-color"), "rgb(222, 239, 255)", "Secondary color should be #DEEFFF");
-		});
-
-		it("Background color is set to success", function() {
-			assert.equal(backgroundSuccess.getRawStyle("background-color"), "rgb(208, 219, 194)", "Success color should be #D0BDC2");
-		});
-
-		it("Background color is set to warning", function() {
-			assert.equal(backgroundWarning.getRawStyle("background-color"), "rgb(245, 240, 198)", "Warning color should be #F5F0C6");
-		});
-
-		it("Background color is set to danger", function() {
-			assert.equal(backgroundDanger.getRawStyle("background-color"), "rgb(240, 203, 201)", "Danger color should be #F0CBC9");
-		});
-
-		it("Background color is set to muted", function() {
-			assert.equal(backgroundMuted.getRawStyle("background-color"), "rgb(230, 231, 233)", "Muted color should be #E6E7E9");
-    });
-
-    it("Text overrides parent style", function(){
-      assert.equal(textOverride.getRawStyle("color"), "rgb(134, 163, 97)", "Success color should be #86a361");
-    });
-
-
-
-    it("Text overrides parent style", function(){
-      assert.equal(textOverride.getRawStyle("color"), "rgb(134, 163, 97)", "Success color should be #86a361");
-    });
-
-    it("Text has parent style", function(){
-      assert.equal(textNotOverride.getRawStyle("color"), "rgb(65, 64, 62)", "Primary color should be #41403E");
-    });
-	});
-}());

tests/index.html

@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html>
-<!-- smoke test marker: automatopia home page -->
-<head>
-	<title>Agile Engineering for the Web</title>
-
-	<link rel="stylesheet" type="text/css" href="./screen.css">
-
-	<script src="bundle.js" type="text/javascript"></script>
-</head>
-<body>
-<!-- Note: This page is for manual demonstration of the example code. It's not tested like real production code should be. -->
-
-<div class="media">
-	<img id="image" class="media__figure" src="icon.svg" width="25" />
-	<p id="content" class="media__body invisible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
-</div>
-
-<script type="text/javascript">
-	document.addEventListener("DOMContentLoaded", function(event) {
-		var image = document.getElementById("image");
-		var content = document.getElementById("content");
-		toggle.init(image, content, "invisible");
-	});
-</script>
-
-</body>
-</html>