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/dist/enhance.css b/dist/enhance.css index 935a556..1fff49b 100644 --- a/dist/enhance.css +++ b/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); - } } diff --git a/doc-header.mjs b/doc-header.mjs index e72aa49..922dc9e 100644 --- a/doc-header.mjs +++ b/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 */ ` } diff --git a/test/themeColor.test.js b/test/themeColor.test.js new file mode 100644 index 0000000..c98cb65 --- /dev/null +++ b/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() +}) diff --git a/theme-color.mjs b/theme-color.mjs index 5525f6e..f3c3d1d 100644 --- a/theme-color.mjs +++ b/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 }