Revert "Add JSON format for design tokens (#1129)"

This reverts commit 4a3f2caf59.

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' });

scripts/tokens-to-css.js

@@ -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');

src/themes/default.json

@@ -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
-      }
-    }
-  }
-}