Add opt outs for theme (#44)

* Allow optout of theme & color

* Only generate color if !false && config.color has keys

* Fix typo

* Ugh

* Update readme, remove color === false check

README.md

@@ -184,6 +184,16 @@ Theme scales are intended to give you enough colors for all use cases including
   --primary-900: hsl(212, 74.7%, 8%);
 ```
 
+### Opting out of theme styles
+
+The classes and custom properties generated by the `theme` configuration are optional, and can be excluded by setting the `theme` property in your styleguide to `false`:
+
+```json
+{
+  "theme": false
+}
+```
+
 ### `color`
 `color` is for one off spot colors. Colors must be specified as hexidecimal and can be named however you like. For example:
 

dist/enhance.css

@@ -1,9 +1,8 @@
-
 /**
- * For more information please see the documentation at : https://github.com/enhance-dev/enhance-styles#readme
+ * ENHANCE STYLES
+ * For more information, please see the documentation at : https://github.com/enhance-dev/enhance-styles#readme
  */
 
-
 /*** Theme Colors ***/
 :root {
   --accent-h: 208;
@@ -18,9 +17,6 @@
   --error-s: 94.5%;
   --error-l: 43.1%;
   --error: hsl(var(--error-h), var(--error-s), var(--error-l));
-
-
-
   --gray-100: hsl(0, 0%, 90%);
   --gray-200: hsl(0, 0%, 80%);
   --gray-300: hsl(0, 0%, 70%);
@@ -30,29 +26,24 @@
   --gray-700: hsl(0, 0%, 30%);
   --gray-800: hsl(0, 0%, 20%);
   --gray-900: hsl(0, 0%, 10%);
-
   --focus-l: 30%;
   accent-color: var(--accent, royalblue);
   color-scheme: light dark;
 }
-
 :is(a, button, input, textarea, summary):focus:not(:focus-visible) {
   outline: none;
 }
-
 :is(a, button, input, textarea, summary):focus-visible {
   outline: max(var(--focus-size, 1px), 1px) solid var(--accent, royalblue);
   outline-offset: var(--focus-offset, 0);
   box-shadow: 0 0 0 max(var(--focus-size, 3px), 3px) hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + var(--focus-l)))
   ;
 }
-
 :is(a, button, input, textarea, summary):not(:focus):not(:placeholder-shown):invalid {
   outline: max(var(--focus-size, 1px), 1px) solid var(--error, crimson);
   outline-offset: var(--focus-offset, 0);
   box-shadow: 0 0 0 3px hsl(var(--error-h), var(--error-s), calc(var(--error-l) + var(--focus-l)));
 }
-
 @media (prefers-color-scheme: dark) {
   :root {
     --accent-h: 208;
@@ -64,7 +55,6 @@
     --focus-l: -30%;
     --fore: var(--light);
     --back: var(--dark);
-
   }
 }
 

doc-header.mjs

@@ -1,7 +1,7 @@
 export default function DocHeader() {
-    return /*css*/`
-/**
- * For more information please see the documentation at : https://github.com/enhance-dev/enhance-styles#readme
+  return /*css*/`/**
+ * ENHANCE STYLES
+ * For more information, please see the documentation at : https://github.com/enhance-dev/enhance-styles#readme
  */
 `
 }

test/themeColor.test.js

@@ -0,0 +1,17 @@
+import test from 'tape'
+
+import themeColor from '../theme-color.mjs'
+
+const noTheme = {
+  theme: false
+}
+
+const noColor = {
+  color: {}
+}
+
+test('themeColor', t => {
+  t.notOk(themeColor({ config: noTheme }).includes('/*** Theme Colors ***/'), 'should not include theme colors when `config.theme` is `false`')
+  t.notOk(themeColor({ config: noColor }).includes('/*** Spot Colors ***/'), 'should not include spot colors when `config.color` is empty')
+  t.end()
+})

theme-color.mjs

@@ -1,8 +1,12 @@
 import hextohsl from './hex-to-hsl.mjs'
 
-export default function themeColor ({ config }) {
+export default function themeColor({ config }) {
   const { color = {}, theme = {} } = config
 
+  if (theme === false) {
+    return ''
+  }
+
   const defaultAccent = '#0075db'
   const defaultError = '#d60606'
   const defaultLight = '#fefefe'
@@ -39,20 +43,20 @@ export default function themeColor ({ config }) {
 
   const themeColors = Object.keys(theme).map(name => {
     if (name === 'accent' ||
-        name === 'error' ||
-        name === 'back' ||
-        name === 'fore' ||
-       (name === 'dark' && typeof theme[name] === 'object')) {
+      name === 'error' ||
+      name === 'back' ||
+      name === 'fore' ||
+      (name === 'dark' && typeof theme[name] === 'object')) {
       return
     }
     else {
       return colorSteps(hextohsl(theme[name]), name)
     }
   }).join('\n')
-  const colors = Object.keys(color).map(name => `  --${name}: ${color[name]};`).join('\n')
+  const colors = Object.keys(color).length ? Object.keys(color).map(name => `--${name}: ${color[name]};`).join('\n  ') : ''
   const grayScale = colorSteps({ h: lightParts.h, s: 0, l: 50 }, 'gray')
 
-  function colorSteps (color, name) {
+  function colorSteps(color, name) {
     const hue = color.h
     const saturation = color.s
     const luminance = color.l
@@ -66,12 +70,10 @@ export default function themeColor ({ config }) {
   --${name}-600: hsl(${hue}, ${saturation}%, ${Math.floor(luminance - 10)}%);
   --${name}-700: hsl(${hue}, ${saturation}%, ${Math.floor(luminance - 20)}%);
   --${name}-800: hsl(${hue}, ${saturation}%, ${Math.floor(luminance - 30)}%);
-  --${name}-900: hsl(${hue}, ${saturation}%, ${Math.floor(luminance - 40)}%);
-    `
+  --${name}-900: hsl(${hue}, ${saturation}%, ${Math.floor(luminance - 40)}%);`
   }
 
-
-  return /*css*/`
+  const themeStyles = `
 /*** Theme Colors ***/
 :root {
   --accent-h: ${lightAccentParts.h};
@@ -87,7 +89,6 @@ export default function themeColor ({ config }) {
   --error-l: ${lightErrorParts.l}%;
   --error: hsl(var(--error-h), var(--error-s), var(--error-l));
 ${themeColors}
-${colors}
 ${grayScale}
   --focus-l: 30%;
   accent-color: var(--accent, royalblue);
@@ -125,7 +126,19 @@ ${grayScale}
     ${darkThemeColors}
   }
 }
+`.replace(/^\s*\n/gm, '') // remove empty newlines
+
+  const colorStyles = `
+/*** Spot Colors ***/
+:root {
+  ${colors}
+}
 `
 
+  let result = ``
+  if (theme !== false) result += themeStyles
+  if (Object.keys(color).length) result += colorStyles
+
+  return result
 }