diff --git a/README.md b/README.md index 6382e9b..63cf1f9 100644 --- a/README.md +++ b/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: diff --git a/test/themeColor.test.js b/test/themeColor.test.js index 61a7c6b..c98cb65 100644 --- a/test/themeColor.test.js +++ b/test/themeColor.test.js @@ -2,22 +2,16 @@ import test from 'tape' import themeColor from '../theme-color.mjs' -const noThemeColor = { - theme: false, - color: false, -} - const noTheme = { theme: false } const noColor = { - color: false + color: {} } test('themeColor', t => { - t.equal(themeColor({ config: noThemeColor }), '', 'should emit an empty string when `config.theme` and `config.color` are both `false`') 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 `false`') + t.notOk(themeColor({ config: noColor }).includes('/*** Spot Colors ***/'), 'should not include spot colors when `config.color` is empty') t.end() }) diff --git a/theme-color.mjs b/theme-color.mjs index df99745..f3c3d1d 100644 --- a/theme-color.mjs +++ b/theme-color.mjs @@ -3,7 +3,7 @@ import hextohsl from './hex-to-hsl.mjs' export default function themeColor({ config }) { const { color = {}, theme = {} } = config - if (color === false && theme === false) { + if (theme === false) { return '' } @@ -137,7 +137,7 @@ ${grayScale} let result = `` if (theme !== false) result += themeStyles - if (color !== false && Object.keys(color).length) result += colorStyles + if (Object.keys(color).length) result += colorStyles return result }