feat(Build): improved build process

Added semantic-release and greenkeeper to keep things working

Also added tests to verify that at

least variable syntax is correct.

.cz-config.js

@@ -0,0 +1,20 @@
+'use strict';
+
+module.exports = {
+
+  types: [
+    {value: 'feat',     name: 'feat:     A new feature'},
+    {value: 'fix',      name: 'fix:      A bug fix'},
+    {value: 'docs',     name: 'docs:     Documentation only changes'},
+    {value: 'style',    name: 'style:    Changes that do not affect the meaning of the code\n            (white-space, formatting, missing semi-colons, etc)'},
+    {value: 'refactor', name: 'refactor: A code change that neither fixes a bug nor adds a feature'},
+    {value: 'perf',     name: 'perf:     A code change that improves performance'},
+    {value: 'test',     name: 'test:     Adding missing tests'},
+    {value: 'chore',    name: 'chore:    Changes to the build process or auxiliary tools\n            and libraries such as documentation generation'},
+    {value: 'revert',   name: 'revert:   Revert to a commit'},
+    {value: 'WIP',      name: 'WIP:      Work in progress'}
+  ],
+
+  allowBreakingChanges: ['feat', 'fix', 'perf']
+
+};

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.DS_Store

.npmignore

@@ -0,0 +1,2 @@
+test
+.*

.travis.yml

@@ -0,0 +1,4 @@
+language: node_js
+node_js: "6"
+after_success:
+  - npm run semantic-release

README.md

@@ -1,6 +1,7 @@
-Topcoat Variables Dark
-======================
+# Topcoat Variables Dark
 
-Dark variables for theme.
+[![Build Status](https://travis-ci.org/topcoat/variables-dark.svg?branch=master)](https://travis-ci.org/topcoat/variables-dark) [![npm version](https://badge.fury.io/js/topcoat-variables-dark.svg)](https://badge.fury.io/js/topcoat-variables-dark)
+
+---
 
-[![NPM](https://nodei.co/npm/topcoat-variables-dark.png)](https://nodei.co/npm/topcoat-variables-dark/)
+Dark variables for theme.

package.json

@@ -1,15 +1,15 @@
 {
   "name": "topcoat-variables-dark",
-  "version": "0.1.5",
   "description": "Dark variables for theme.",
   "main": "index.html",
   "style": "src/variables-dark.css",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "ava",
+    "semantic-release": "semantic-release pre && npm publish && semantic-release post"
   },
   "repository": {
     "type": "git",
-    "url": "git://github.com/topcoat/variables-dark.git"
+    "url": "https://github.com/topcoat/variables-dark.git"
   },
   "keywords": [
     "topcoat",
@@ -20,5 +20,31 @@
   "license": "Apache2",
   "bugs": {
     "url": "https://github.com/topcoat/variables-dark/issues"
+  },
+  "ava": {
+    "require": [
+      "babel-register"
+    ],
+    "babel": "inherit"
+  },
+  "babel": {
+    "presets": [
+      "es2015"
+    ]
+  },
+  "devDependencies": {
+    "ava": "^0.16.0",
+    "babel-cli": "^6.14.0",
+    "babel-core": "^6.14.0",
+    "babel-preset-es2015": "^6.14.0",
+    "babel-register": "^6.14.0",
+    "cz-customizable": "^4.0.0",
+    "resin": "^1.1.0",
+    "semantic-release": "^4.3.5"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-customizable"
+    }
   }
 }

src/variables-dark.css

@@ -1,105 +1,86 @@
-/**
-*
-* Copyright 2012 Adobe Systems Inc.;
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*
-*/
-
 :root {
-  var-color            : hsla(180, 2%, 78%, 1);
-  var-background-color : hsla(180, 1%, 35%, 1);
-  var-background--body : hsla(200, 2%, 30%, 1);
-  var-highlight-color  : hsla(0, 100%, 100%, 1);
-  var-shadow-color     : hsla(0, 0%, 0%, 1);
-  var-color--cta       : hsla(0, 100%, 100%, 1);
-  var-notification-color: hsla(1, 81%, 62%, 1);
-  var-background-color--cta: hsla(207, 74%, 52%, 1);
-
-  var-border-thickness : 1px;
-
-  var-box-shadow--highlight : 0 -1px hsla(0, 0%, 0%, 0.69);
-  var-border-color : hsla(180, 1%, 20%, 1);
-  var-background-color--down : hsla(210, 2%, 25%, 1);
-  var-background-color--hover : hsla(200, 2%, 39%, 1);
-  var-border : var(border-thickness) solid var(border-color);
-  var-box-shadow : inset 0 var(border-thickness) hsla(0, 0%, 45%, 1);
-  var-box-shadow--down : inset 0 var(border-thickness) hsla(0, 0%, 0%, 0.05);
-  var-text-shadow : var(box-shadow--highlight);
-  var-background-color--input : hsla(180, 1%, 27%, 1);
-  var-border--cta: 1px solid hsla(207, 74%, 29%, 1);
-  var-background-color--cta--down: hsla(206, 74%, 45%, 1);
-  var-background-color--cta--hover: hsla(206, 74%, 60%, 1);
-  var-box-shadow--cta: inset 0 1px hsla(0, 100%, 100%, 0.36);
-  var-box-shadow--cta--down: inset 0 1px hsla(0, 0%, 0%, 0.12);
-
-  var-text-shadow--cta: 0 -1px hsla(0, 0%, 0%, 0.36);
-
-  var-border--focus: 1px solid hsla(227, 100%, 50%, 1);
-  var-box-shadow--focus: 0 0 0 2px hsla(208, 82%, 69%, 1);
-  var-border--invalid: 1px solid var(notification-color);
-
-  var-bg-color--notification: var(notification-color);
-
-  var-color--placeholder: hsla(180, 2%, 78%, 1);
-  var-color--focus: hsla(0, 0%, 0%, 1);
-  var-menu-stack-icon : url("../img/hamburger_light.svg");
-
-  var-color--navigation-bar : var(highlight-color);
-  var-box-shadow--navigation-bar : inset 0 -1px var(border-color), 0 var(border-thickness) hsla(180, 1%, 27%, 1);
-
-  var-color--focus : var(highlight-color);
-  var-background-color--text-input : var(background-color--input);
-  var-background-color--text-input--focus : var(background-color);
-  var-box-shadow--text-input : inset 0 var(border-thickness) 0 hsla(0, 0%, 0%, 0.23);
-
-  var-background-color--list : hsla(180, 1%, 27%, 1);
-  var-border-top--list-container : var(border);
-  var-border-top--list : var(border);
-  var-border-bottom--list : var(border-thickness) solid hsla(180, 1%, 38%, 1);
-  var-border-top--list-item--first : var(border-thickness) solid hsla(0, 0%, 0%, 0.05);
-  var-border-top--list-item : var(border-bottom--list);
-  var-border-bottom--list-item : var(border);
-  var-color--list-header : var(color);
-  var-text-shadow--list-header : 0 var(border-thickness) 0 hsla(0, 100%, 100%, 0.1);
-  var-border-top--list-header : var(border-thickness) solid hsla(0, 100%, 100%, 0.1);
-  var-border-bottom--list-header : var(border-thickness) solid hsla(0, 100%, 100%, 0.05);
-  var-background-color--list-header : var(background-color--down);
-
-  var-modal-bg-color : var(background-color);
-  var-overlay__header-border : var(border);
-
-  var-bar-bg-color : var(background-color--down);
-  var-progress-bg-color : var(background-color);
-
-  var-border--checkmark : 7px solid var(color);
-
-  var-range-background : var(background-color--down);
-  var-range__slider-border : var(border);
-  var-range__slider-background : var(background-color);
-  var-range__slider-bg-size : 7px 18px;
-  var-range__slider-box-shadow : inset 0 var(border-thickness) 0 hsla(0, 0%, 0%, 0.05);
-
-  var-border--radio-button : var(border-thickness) solid hsla(0, 0%, 0%, 0.05);
-  var-background--radio-button : var(color);
-  var-box-shadow--radio-button : 0 var(border-thickness) hsla(0, 100%, 100%, 0.1);
-
-  var-color--tab-bar--active : var(background-color--cta);
-  var-background-color--tab-bar--active : var(background-color--down);
-  var-box-shadow--tab-bar--active : inset 0 0 var(border-thickness);
-
-  var-color--switch__label--left : var(background-color--cta);
-  var-background-color--switch__label--left : var(background-color--down);
-  var-background-color--switch__label--right : var(background-color--down);
+  --color            : hsla(180, 2%, 78%, 1);
+  --background-color : hsla(180, 1%, 35%, 1);
+  --background--body : hsla(200, 2%, 30%, 1);
+  --highlight-color  : hsla(0, 100%, 100%, 1);
+  --shadow-color     : hsla(0, 0%, 0%, 1);
+  --color--cta       : hsla(0, 100%, 100%, 1);
+  --notification-color: hsla(1, 81%, 62%, 1);
+  --background-color--cta: hsla(207, 74%, 52%, 1);
+
+  --border-thickness : 1px;
+
+  --box-shadow--highlight : 0 -1px hsla(0, 0%, 0%, 0.69);
+  --border-color : hsla(180, 1%, 20%, 1);
+  --background-color--down : hsla(210, 2%, 25%, 1);
+  --background-color--hover : hsla(200, 2%, 39%, 1);
+  --border : var(--border-thickness) solid var(--border-color);
+  --box-shadow : inset 0 var(--border-thickness) hsla(0, 0%, 45%, 1);
+  --box-shadow--down : inset 0 var(--border-thickness) hsla(0, 0%, 0%, 0.05);
+  --text-shadow : var(--box-shadow--highlight);
+  --background-color--input : hsla(180, 1%, 27%, 1);
+  --border--cta: 1px solid hsla(207, 74%, 29%, 1);
+  --background-color--cta--down: hsla(206, 74%, 45%, 1);
+  --background-color--cta--hover: hsla(206, 74%, 60%, 1);
+  --box-shadow--cta: inset 0 1px hsla(0, 100%, 100%, 0.36);
+  --box-shadow--cta--down: inset 0 1px hsla(0, 0%, 0%, 0.12);
+
+  --text-shadow--cta: 0 -1px hsla(0, 0%, 0%, 0.36);
+
+  --border--focus: 1px solid hsla(227, 100%, 50%, 1);
+  --box-shadow--focus: 0 0 0 2px hsla(208, 82%, 69%, 1);
+  --border--invalid: 1px solid var(--notification-color);
+
+  --bg-color--notification: var(--notification-color);
+
+  --color--placeholder: hsla(180, 2%, 78%, 1);
+  --color--focus: hsla(0, 0%, 0%, 1);
+  --menu-stack-icon : url("../img/hamburger_light.svg");
+
+  --color--navigation-bar : var(--highlight-color);
+  --box-shadow--navigation-bar : inset 0 -1px var(--border-color), 0 var(--border-thickness) hsla(180, 1%, 27%, 1);
+
+  --color--focus : var(--highlight-color);
+  --background-color--text-input : var(--background-color--input);
+  --background-color--text-input--focus : var(--background-color);
+  --box-shadow--text-input : inset 0 var(--border-thickness) 0 hsla(0, 0%, 0%, 0.23);
+
+  --background-color--list : hsla(180, 1%, 27%, 1);
+  --border-top--list-container : var(--border);
+  --border-top--list : var(--border);
+  --border-bottom--list : var(--border-thickness) solid hsla(180, 1%, 38%, 1);
+  --border-top--list-item--first : var(--border-thickness) solid hsla(0, 0%, 0%, 0.05);
+  --border-top--list-item : var(--border-bottom--list);
+  --border-bottom--list-item : var(--border);
+  --color--list-header : var(--color);
+  --text-shadow--list-header : 0 var(--border-thickness) 0 hsla(0, 100%, 100%, 0.1);
+  --border-top--list-header : var(--border-thickness) solid hsla(0, 100%, 100%, 0.1);
+  --border-bottom--list-header : var(--border-thickness) solid hsla(0, 100%, 100%, 0.05);
+  --background-color--list-header : var(--background-color--down);
+
+  --modal-bg-color : var(--background-color);
+  --overlay__header-border : var(--border);
+
+  --bar-bg-color : var(--background-color--down);
+  --progress-bg-color : var(--background-color);
+
+  --border--checkmark : 7px solid var(--color);
+
+  --range-background : var(--background-color--down);
+  --range__slider-border : var(--border);
+  --range__slider-background : var(--background-color);
+  --range__slider-bg-size : 7px 18px;
+  --range__slider-box-shadow : inset 0 var(--border-thickness) 0 hsla(0, 0%, 0%, 0.05);
+
+  --border--radio-button : var(--border-thickness) solid hsla(0, 0%, 0%, 0.05);
+  --background--radio-button : var(--color);
+  --box-shadow--radio-button : 0 var(--border-thickness) hsla(0, 100%, 100%, 0.1);
+
+  --color--tab-bar--active : var(--background-color--cta);
+  --background-color--tab-bar--active : var(--background-color--down);
+  --box-shadow--tab-bar--active : inset 0 0 var(--border-thickness);
+
+  --color--switch__label--left : var(--background-color--cta);
+  --background-color--switch__label--left : var(--background-color--down);
+  --background-color--switch__label--right : var(--background-color--down);
 }
-

test/example.expected.css

@@ -0,0 +1,22 @@
+:root {
+  color: hsla(180, 2%, 78%, 1);
+  background: hsla(180, 1%, 35%, 1);
+  highlight-color: hsla(0, 100%, 100%, 1);
+  shadow-color: hsla(0, 0%, 0%, 1);
+  notification-color: hsla(1, 81%, 62%, 1);
+  border-thickness: 1px;
+  border-color: hsla(180, 1%, 20%, 1);
+  border: 1px solid hsla(180, 1%, 20%, 1);
+  box-shadow: inset 0 1px hsla(0, 0%, 45%, 1);
+  text-shadow: 0 -1px hsla(0, 0%, 0%, .69);
+  menu-stack-icon: url("../img/hamburger_light.svg");
+  modal-bg-color: hsla(180, 1%, 35%, 1);
+  overlay__header-border: 1px solid hsla(180, 1%, 20%, 1);
+  bar-bg-color: hsla(210, 2%, 25%, 1);
+  progress-bg-color: hsla(180, 1%, 35%, 1);
+  range-background: hsla(210, 2%, 25%, 1);
+  range__slider-border: 1px solid hsla(180, 1%, 20%, 1);
+  range__slider-background: hsla(180, 1%, 35%, 1);
+  range__slider-bg-size: 7px 18px;
+  range__slider-box-shadow: inset 0 1px 0 hsla(0, 0%, 0%, .05);
+}

test/example.fixture.css

@@ -0,0 +1,86 @@
+:root {
+  color: var(--color);
+  background: var(--background-color);
+  background--body: var(--background--body);
+  highlight-color: var(--highlight-color);
+  shadow-color: var(--shadow-color);
+  color--cta: var(--color--cta);
+  notification-color: var(--notification-color);
+  background-color--cta: var(--background-color--cta);
+
+  border-thickness: var(--border-thickness);
+
+  box-shadow--highlight: var(--box-shadow--highlight);
+  border-color: var(--border-color);
+  background-color--down: var(--background-color--down);
+  background-color--hover: var(--background-color--hover);
+  border: var(--border);
+  box-shadow: var(--box-shadow);
+  box-shadow--down: var(--box-shadow--down);
+  text-shadow: var(--text-shadow);
+  background-color--input: var(--background-color--input);
+  border--cta: var(--border--cta);
+  background-color--cta--down: var(--background-color--cta--down);
+  background-color--cta--hover: var(--background-color--cta--hover);
+  box-shadow--cta: var(--box-shadow--cta);
+  box-shadow--cta--down: var(--box-shadow--cta--down);
+
+  text-shadow--cta: var(--text-shadow--cta);
+
+  border--focus: var(--border--focus);
+  box-shadow--focus: var(--box-shadow--focus);
+  border--invalid: var(--border--invalid);
+
+  bg-color--notification: var(--bg-color--notification);
+
+  color--placeholder: var(--color--placeholder);
+  color--focus: var(--color--focus);
+  menu-stack-icon: var(--menu-stack-icon);
+
+  color--navigation-bar: var(--color--navigation-bar);
+  box-shadow--navigation-bar: var(--box-shadow--navigation-bar);
+
+  color--focus: var(--color--focus);
+  background-color--text-input: var(--background-color--text-input);
+  background-color--text-input--focus: var(--background-color--text-input--focus);
+  box-shadow--text-input: var(--box-shadow--text-input);
+
+  background-color--list: var(--background-color--list);
+  border-top--list-container: var(--border-top--list-container);
+  border-top--list: var(--border-top--list );
+  border-bottom--list: var(--border-bottom--list);
+  border-top--list-item--first: var(--border-top--list-item--first);
+  border-top--list-item: var(--border-top--list-item);
+  border-bottom--list-item: var(--border-bottom--list-item );
+  color--list-header: var(--color--list-header);
+  text-shadow--list-header: var(--text-shadow--list-header);
+  border-top--list-header: var(--border-top--list-header);
+  border-bottom--list-header: var(--border-bottom--list-header);
+  background-color--list-header: var(--background-color--list-header);
+
+  modal-bg-color: var(--modal-bg-color);
+  overlay__header-border: var(--overlay__header-border);
+
+  bar-bg-color: var(--bar-bg-color);
+  progress-bg-color: var(--progress-bg-color);
+
+  border--checkmark: var(--border--checkmark);
+
+  range-background: var(--range-background);
+  range__slider-border: var(--range__slider-border);
+  range__slider-background: var(--range__slider-background);
+  range__slider-bg-size: var(--range__slider-bg-size);
+  range__slider-box-shadow: var(--range__slider-box-shadow);
+
+  border--radio-button: var(--border--radio-button);
+  background--radio-button: var(--background--radio-button);
+  box-shadow--radio-button: var(--box-shadow--radio-button);
+
+  color--tab-bar--active: var(--color--tab-bar--active);
+  background-color--tab-bar--active: var(--background-color--tab-bar--active);
+  box-shadow--tab-bar--active: var(--box-shadow--tab-bar--active);
+
+  color--switch__label--left: var(--color--switch__label--left);
+  background-color--switch__label--left: var(--background-color--switch__label--left);
+  background-color--switch__label--right: var(--background-color--switch__label--right);
+}