fix: update token and theming (#1946)

- support non-subset theming overrides (simplify script)
- support spacing (with proper open typing)

bin/eds-apply-theme.js

@@ -1,36 +1,15 @@
 #!/usr/bin/env node
 (async function () {
   const StyleDictionary = require('style-dictionary');
-  const path = require('path');
-  const fs = require('fs');
   const {
     formatEdsTokens,
     getConfig,
-    isStrictSubset,
     minifyDictionaryUsingFormat,
   } = require('./_util');
 
-  let packageRootPath;
-  try {
-    packageRootPath =
-      path.dirname(require.resolve('@chanzuckerberg/eds')) + '/tokens/json/';
-  } catch (e) {
-    // used for working on theming within EDS
-    console.error('EDS package not installed. Using local path...');
-    packageRootPath = path.dirname(require.main.path) + '/lib/tokens/json/';
-  }
-
   // Read the config to sort out where to read JSON from and where to write the CSS file
   const config = await getConfig();
 
-  // read and parse JSON files on disk
-  const localTheme = JSON.parse(
-    fs.readFileSync(`${config.src}app-theme.json`, 'utf8'),
-  );
-  const baseTheme = JSON.parse(
-    fs.readFileSync(`${packageRootPath}theme-base.json`, 'utf8'),
-  );
-
   // define the header to use in the resulting CSS file so people know not to edit it directly
   StyleDictionary.registerFileHeader({
     name: 'cssOverrideHeader',
@@ -85,8 +64,6 @@
   });
 
   try {
-    // Keys in the theme file must be a strict subset of those in the base file
-    isStrictSubset(baseTheme, localTheme);
     EDSStyleDictionary.buildAllPlatforms();
   } catch (error) {
     // TODO: if theme has things not in base, error showing where the conflict

tailwind.config.ts

@@ -8,6 +8,22 @@ const {
   ...colorTokens
 } = edsTokens.theme.color;
 
+// Add a type to the token sizes to avoid literals for keys
+const sizes: { [x: string]: string } = edsTokens.size;
+
+const sizeTokens = {
+  // We pull the spacing tokens and format them such that names are like 'size-${name} = ${value}px'
+  ...Object.keys(sizes)
+    .map((sizeKey) => {
+      return { [`size-${sizeKey}`]: `${sizes[sizeKey]}px` };
+    })
+    .reduce((accumulate, current) => {
+      const entry = Object.entries(current)[0];
+      accumulate[entry[0]] = entry[1];
+      return accumulate;
+    }, {}),
+};
+
 export default {
   /**
    * The main value in TW utility classes is for Storybook stories, etc..
@@ -34,16 +50,7 @@ export default {
         ...textColorTokens,
       },
       spacing: {
-        // We pull the spacing tokens and format them such that names are like 'size-${name} = ${value}px'
-        ...Object.keys(edsTokens.size)
-          .map((sizeKey) => {
-            return { [`size-${sizeKey}`]: `${edsTokens.size[sizeKey]}px` };
-          })
-          .reduce((accumulate, current) => {
-            const entry = Object.entries(current)[0];
-            accumulate[entry[0]] = entry[1];
-            return accumulate;
-          }, {}),
+        ...sizeTokens,
       },
     },
     fontWeight: {