fix: update token and theming

- 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: {