diff --git a/scripts/build.js b/scripts/build.js index 8ce1ef69..61b81846 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -25,8 +25,6 @@ fs.mkdirSync(outdir, { recursive: true }); (async () => { try { - execSync(`node scripts/tokens-to-css.js --theme light --outdir "${outdir}"`, { stdio: 'inherit' }); - execSync(`node scripts/tokens-to-css.js --theme dark --outdir "${outdir}"`, { stdio: 'inherit' }); execSync(`node scripts/make-metadata.js --outdir "${outdir}"`, { stdio: 'inherit' }); execSync(`node scripts/make-search.js --outdir "${outdir}"`, { stdio: 'inherit' }); execSync(`node scripts/make-react.js --outdir "${outdir}"`, { stdio: 'inherit' }); diff --git a/scripts/tokens-to-css.js b/scripts/tokens-to-css.js deleted file mode 100644 index 607ea153..00000000 --- a/scripts/tokens-to-css.js +++ /dev/null @@ -1,68 +0,0 @@ -import fs from 'fs'; -import { mkdirSync } from 'fs'; -import path from 'path'; -import commandLineArgs from 'command-line-args'; - -const { outdir, theme } = commandLineArgs([ - { name: 'outdir', type: String }, - { name: 'theme', type: String, defaultValue: 'light' } -]); -const themesDir = path.join(outdir, 'themes', 'generated'); // TODO: this is for testing purposes - -const source = fs.readFileSync('src/themes/default.json', 'utf8'); -const tokens = JSON.parse(source); - -const rootSelectors = [':root']; -if (theme == 'light') rootSelectors.push(':host'); -rootSelectors.push(`.sl-theme-${theme}`); - -const outputLines = []; - -console.log(`Converting tokens JSON to CSS variables for ${theme} theme`); - -mkdirSync(themesDir, { recursive: true }); - -const processThemeValues = entries => { - entries.forEach(([key, value]) => { - if (!key.startsWith('$')) { - let suffixComment = ''; - let tokenValue = value.$value; - - if (value.$extensions) { - if (value.$extensions[`style.shoelace.theme-${theme}`]) - tokenValue = value.$extensions[`style.shoelace.theme-${theme}`]; - if (value.$extensions['style.shoelace.newline']) outputLines.push(''); - if (value.$extensions['style.shoelace.comment']) - suffixComment = ` /* ${value.$extensions['style.shoelace.comment']} */`; - } - outputLines.push(` --sl-${key}: ${tokenValue};${suffixComment}`); - } - }); -}; - -outputLines.push(`${rootSelectors.join(',\n')} {`); -outputLines.push(` color-scheme: ${theme};`); - -Object.entries(tokens).forEach(([key, value]) => { - outputLines.push(`\n /*\n * ${key}\n */`); - - if (Object.keys(Object.entries(value)[0][1]).includes('$value')) { - // Shallow set of values - outputLines.push(''); - processThemeValues(Object.entries(value)); - } else { - // Nested sets of values - Object.entries(value).forEach(([subKey, subValue]) => { - if (!subKey.startsWith('$')) { - outputLines.push(`\n /* ${subKey} */`); - processThemeValues(Object.entries(subValue)); - } - }); - } -}); - -outputLines.push('}'); - -const cssFile = path.join(themesDir, `${theme}.css`); - -fs.writeFileSync(cssFile, outputLines.join('\n'), 'utf8'); diff --git a/src/themes/default.json b/src/themes/default.json deleted file mode 100644 index 30238b97..00000000 --- a/src/themes/default.json +++ /dev/null @@ -1,59 +0,0 @@ -{ - "Color Primitives": { - "$description": "Example description of colors", - "Gray": { - "$description": "Gray colors", - "color-gray-50": { - "$value": "hsl(0 0% 97.5%)", - "$extensions": { - "style.shoelace.theme-dark": "hsl(240 5.1% 15%)" - } - }, - "color-gray-100": { - "$value": "hsl(240 4.8% 95.9%)", - "$extensions": { - "style.shoelace.theme-dark": "hsl(240 5.7% 18.2%)" - } - } - } - }, - "Theme Tokens": { - "$description": "These are semantic colors", - "Primary": { - "color-primary-50": { - "$value": "var(--sl-color-sky-50)" - }, - "color-primary-100": { - "$value": "var(--sl-color-sky-100)" - } - }, - "Warning": { - "color-warning-50": { - "$value": "var(--sl-color-amber-50)" - }, - "color-warning-100": { - "$value": "var(--sl-color-amber-100)" - } - } - }, - "Border Radii": { - "border-radius-small": { - "$value": "0.1875rem", - "$extensions": { - "style.shoelace.comment": "3px" - } - }, - "border-radius-medium": { - "$value": "0.25rem", - "$extensions": { - "style.shoelace.comment": "4px" - } - }, - "border-radius-circle": { - "$value": "50%", - "$extensions": { - "style.shoelace.newline": true - } - } - } -}