From 5155b1cf2a3df9806c2d8fe2f8b3045fae655257 Mon Sep 17 00:00:00 2001 From: Cole Peters Date: Wed, 10 Jul 2024 13:59:45 -0500 Subject: [PATCH] Update defaults; remove ui/theme color --- v7/properties/border-radius.mjs | 2 +- v7/properties/color-spots.mjs | 5 +- v7/properties/color-ui.mjs | 27 ------ v7/properties/fonts.mjs | 6 +- v7/properties/space-scale.mjs | 4 +- v7/properties/theme-color.mjs | 144 -------------------------------- v7/properties/type-scale.mjs | 4 +- v7/test/fixtures/styleguide.mjs | 16 +--- 8 files changed, 15 insertions(+), 193 deletions(-) delete mode 100644 v7/properties/color-ui.mjs delete mode 100644 v7/properties/theme-color.mjs diff --git a/v7/properties/border-radius.mjs b/v7/properties/border-radius.mjs index 5e94921..0ced406 100644 --- a/v7/properties/border-radius.mjs +++ b/v7/properties/border-radius.mjs @@ -1,7 +1,7 @@ export default function borderRadius(state = {}) { const { config = {} } = state const { borders = {} } = config - const { radii = [2, 8, 16, 9999] } = borders + const { radii = [2, 4, 8, 9999] } = borders let output = '' diff --git a/v7/properties/color-spots.mjs b/v7/properties/color-spots.mjs index f817f2c..038a7a9 100644 --- a/v7/properties/color-spots.mjs +++ b/v7/properties/color-spots.mjs @@ -1,7 +1,10 @@ export default function colorSpots(state = {}) { const { config = {} } = state const { color = {} } = config - const { spots = { /* DEFAULTS HERE */ } } = color + const { spots = { + magenta: '#ff0095', + p3magenta: 'color(display-p3 1 0 0.58)', + } } = color let output = '' diff --git a/v7/properties/color-ui.mjs b/v7/properties/color-ui.mjs deleted file mode 100644 index b92df1b..0000000 --- a/v7/properties/color-ui.mjs +++ /dev/null @@ -1,27 +0,0 @@ -/* - * WIP — see https://github.com/orgs/enhance-dev/projects/17/views/1?pane=issue&itemId=68736070 - */ - -import hexToHsl from '../lib/hex-to-hsl.mjs' - -export default function colorUi(state = {}) { - const { config = {} } = state - const { color = {} } = config - const { ui = { /* DEFAULTS HERE */ } } = color - const { darkMode = { /* DEFAULTS HERE */ } } = ui - - const lightHsls = { - accent: hexToHsl(ui.accent), - background: hexToHsl(ui.background), - body: hexToHsl(ui.body), - error: hexToHsl(ui.error), - } - - const darkHsls = { - accent: hexToHsl(darkMode.accent), - background: hexToHsl(darkMode.background), - body: hexToHsl(darkMode.body), - error: hexToHsl(darkMode.error), - } - -} diff --git a/v7/properties/fonts.mjs b/v7/properties/fonts.mjs index 1156383..609a6c6 100644 --- a/v7/properties/fonts.mjs +++ b/v7/properties/fonts.mjs @@ -1,6 +1,10 @@ export default function fonts(state = {}) { const { config = {} } = state - const { fonts = { /* DEFAULTS HERE */ } } = config + const { fonts = { + sans: 'system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif', + serif: 'Georgia, Cambria, Times New Roman, Times, serif', + mono: 'Source Code Pro, Roboto Mono, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace' + } } = config let output = '' diff --git a/v7/properties/space-scale.mjs b/v7/properties/space-scale.mjs index ec0edb6..fbf40ca 100644 --- a/v7/properties/space-scale.mjs +++ b/v7/properties/space-scale.mjs @@ -1,8 +1,8 @@ -import { generateSpaceScaleProperties } from '../lib/scales.mjs' +import { generateSpaceScaleProperties, defaultConfig } from '../lib/scales.mjs' export default function spaceScaleProperties(state = {}) { const { config = {} } = state - const { spaceScale = null } = config + const { spaceScale = defaultConfig } = config let output = '' diff --git a/v7/properties/theme-color.mjs b/v7/properties/theme-color.mjs deleted file mode 100644 index f3c3d1d..0000000 --- a/v7/properties/theme-color.mjs +++ /dev/null @@ -1,144 +0,0 @@ -import hextohsl from './hex-to-hsl.mjs' - -export default function themeColor({ config }) { - const { color = {}, theme = {} } = config - - if (theme === false) { - return '' - } - - const defaultAccent = '#0075db' - const defaultError = '#d60606' - const defaultLight = '#fefefe' - const defaultDark = '#222222' - - const light = color.light || theme.back || defaultLight - const dark = color.dark || theme.fore || defaultDark - const lightParts = hextohsl(light) - const darkTheme = theme?.dark || {} - - const lightAccent = theme?.accent || defaultAccent - const lightAccentParts = hextohsl(lightAccent) - const darkAccent = theme?.dark?.accent || theme?.accent || defaultAccent - const darkAccentParts = hextohsl(darkAccent) - - // If no custom dark accent colour provided, modify default accent's lightness for dark mode - if (darkAccent === lightAccent || darkAccent === defaultAccent) { - darkAccentParts.l = 62 - } - - const lightError = theme?.error || defaultError - const lightErrorParts = hextohsl(lightError) - const darkError = theme?.dark?.error || theme?.error || defaultError - const darkErrorParts = hextohsl(darkError) - - // If no custom dark error colour provided, modify default error's lightness for dark mode - if (darkError === lightError || darkError === defaultError) { - darkErrorParts.l = 62 - } - - const darkThemeColors = Object.keys(darkTheme).map(name => { - return `--${name}: ${darkTheme[name]};` - }).join('\n') - - const themeColors = Object.keys(theme).map(name => { - if (name === 'accent' || - 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).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) { - const hue = color.h - const saturation = color.s - const luminance = color.l - - return ` - --${name}-100: hsl(${hue}, ${saturation}%, ${Math.floor(luminance + 40)}%); - --${name}-200: hsl(${hue}, ${saturation}%, ${Math.floor(luminance + 30)}%); - --${name}-300: hsl(${hue}, ${saturation}%, ${Math.floor(luminance + 20)}%); - --${name}-400: hsl(${hue}, ${saturation}%, ${Math.floor(luminance + 10)}%); - --${name}-500: hsl(${hue}, ${saturation}%, ${luminance}%); - --${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)}%);` - } - - const themeStyles = ` -/*** Theme Colors ***/ -:root { - --accent-h: ${lightAccentParts.h}; - --accent-s: ${lightAccentParts.s}%; - --accent-l: ${lightAccentParts.l}%; - --accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); - --light: ${light}; - --dark: ${dark}; - --fore: var(--dark, currentColor); - --back: var(--light); - --error-h: ${lightErrorParts.h}; - --error-s: ${lightErrorParts.s}%; - --error-l: ${lightErrorParts.l}%; - --error: hsl(var(--error-h), var(--error-s), var(--error-l)); -${themeColors} -${grayScale} - --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: ${darkAccentParts.h}; - --accent-s: ${darkAccentParts.s}%; - --accent-l: ${darkAccentParts.l}%; - --error-h: ${darkErrorParts.h}; - --error-s: ${darkErrorParts.s}%; - --error-l: ${darkErrorParts.l}%; - --focus-l: -30%; - --fore: var(--light); - --back: var(--dark); - ${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 -} - diff --git a/v7/properties/type-scale.mjs b/v7/properties/type-scale.mjs index 4764ca3..c1417df 100644 --- a/v7/properties/type-scale.mjs +++ b/v7/properties/type-scale.mjs @@ -1,8 +1,8 @@ -import { generateTypeScaleProperties } from '../lib/scales.mjs' +import { generateTypeScaleProperties, defaultConfig } from '../lib/scales.mjs' export default function typeScaleProperties(state = {}) { const { config = {} } = state - const { typeScale = null } = config + const { typeScale = defaultConfig } = config let output = '' diff --git a/v7/test/fixtures/styleguide.mjs b/v7/test/fixtures/styleguide.mjs index 55d46d4..437622a 100644 --- a/v7/test/fixtures/styleguide.mjs +++ b/v7/test/fixtures/styleguide.mjs @@ -15,12 +15,6 @@ export default { spots: { rebeccaPurple: '#663399', }, - ui: { - accent: '#00f', - background: '#fff', - body: '#222', - error: '#f00', - }, }, customProperties: { preferredInlineSize: '52ch', @@ -42,14 +36,6 @@ export default { scaleMin: 'minor-third', scaleMax: 'perfect-fourth', }, - typeScale: { - steps: 3, - viewportMin: 320, - viewportMax: 1500, - baseMin: 16, - baseMax: 24, - scaleMin: 'minor-third', - scaleMax: 'perfect-fourth', - }, + typeScale: false, }