feat(npm): add types and sass variables

.gitignore

@@ -24,5 +24,6 @@ yarn.lock
 # Repository specific
 coverage
 dist
+packages/npm/src/definitions
 packages/npm/src/tokens.scss
 packages/npm/src/theme-*.scss

.prettierignore

@@ -2,6 +2,7 @@
 packages/npm/src/*.hbs
 
 # Theo generated files
+packages/npm/src/definitions
 packages/npm/src/tokens.scss
 packages/npm/src/theme-*.scss
 

.stylelintrc.json

@@ -2,6 +2,7 @@
   "extends": "stylelint-config-sass-guidelines",
   "ignoreFiles": [
     "packages/npm/dist/*",
+    "packages/npm/src/definitions/*",
     "packages/npm/src/tokens.scss",
     "packages/npm/src/theme-*.scss"
   ]

CONTRIBUTING.md

@@ -64,7 +64,7 @@ You can build a package by running:
 
     npm run build
 
-It generates design tokens and themes, then concurrently executes multiple step:
+It generates design tokens and themes, their definitions, then concurrently executes multiple steps:
 
 - generating compressed `.css` theme files (without source map) for vanilla integration
 - generating ESM compiled `.js` from `.ts` files with `tsc` and `tsconfig.json`

package.json

@@ -13,7 +13,11 @@
   },
   "scripts": {
     "postinstall": "husky install",
+    "pregenerate": "shx mkdir -p packages/npm/src/definitions",
     "generate": "concurrently npm:generate:*",
+    "generate:definitions:border-radius": "esbuild scripts/generate-definitions.ts --bundle --platform=node --target=es2019 --format=cjs --external:theo | DEFINITIONS_NAME=border-radius node",
+    "generate:definitions:color-palette": "esbuild scripts/generate-definitions.ts --bundle --platform=node --target=es2019 --format=cjs --external:theo | DEFINITIONS_NAME=color-palette node",
+    "generate:definitions:theme-colors": "esbuild scripts/generate-definitions.ts --bundle --platform=node --target=es2019 --format=cjs --external:theo | DEFINITIONS_NAME=theme-colors node",
     "generate:tokens": "esbuild scripts/generate-tokens.ts --bundle --platform=node --target=es2019 --format=cjs --external:theo | node",
     "generate:theme:day": "esbuild scripts/generate-theme.ts --bundle --platform=node --target=es2019 --format=cjs --external:theo | THEME_NAME=day COLOR_SCHEME=light node",
     "generate:theme:night": "esbuild scripts/generate-theme.ts --bundle --platform=node --target=es2019 --format=cjs --external:theo | THEME_NAME=night COLOR_SCHEME=dark node",
@@ -34,6 +38,7 @@
     "@commitlint/config-conventional": "^12.1.4",
     "@jest/globals": "^26.6.2",
     "@types/jest": "^26.0.23",
+    "@types/lodash": "^4.14.169",
     "@types/node": "^15.3.0",
     "@types/theo": "^8.1.3",
     "@typescript-eslint/eslint-plugin": "^4.24.0",
@@ -46,6 +51,7 @@
     "husky": "^6.0.0",
     "jest": "^26.6.3",
     "lint-staged": "^11.0.0",
+    "lodash": "^4.17.21",
     "prettier": "^2.3.0",
     "sass": "^1.32.13",
     "shx": "^0.3.3",

packages/npm/src/index.scss

@@ -1,6 +1,9 @@
 @forward './theme';
 
 // generated by Theo
+@forward './definitions/border-radius.scss';
+@forward './definitions/color-palette.scss';
+@forward './definitions/theme-colors.scss';
 @forward './tokens';
 @forward './theme-day';
 @forward './theme-night';

packages/npm/src/index.ts

@@ -1 +1,10 @@
 export * from './utils';
+
+// generated by Theo
+export * from './definitions/borderRadius';
+export * from './definitions/colorPalette';
+export * from './definitions/themeColors';
+
+import type { ColorPalette } from './definitions/colorPalette';
+import type { ThemeColors } from './definitions/themeColors';
+export type Color = ColorPalette | ThemeColors;

packages/npm/src/sass-variables.scss.hbs

@@ -0,0 +1,9 @@
+// generated by Theo (https://github.com/salesforce-ux/theo)
+
+${{DEFINITIONS_NAME}}: (
+{{#each props as |prop|}}
+{{#is prop.category '{{FILTER_CATEGORY}}'}}
+  '{{prop.name}}',
+{{/is}}
+{{/each}}
+);

packages/npm/src/theme.scss.hbs

@@ -1,4 +1,4 @@
-// theme generation by Theo (https://github.com/salesforce-ux/theo)
+// generated by Theo (https://github.com/salesforce-ux/theo)
 
 @use './theme' as castor;
 

packages/npm/src/tokens.scss.hbs

@@ -1,4 +1,4 @@
-// tokens generation by Theo (https://github.com/salesforce-ux/theo)
+// generated by Theo (https://github.com/salesforce-ux/theo)
 
 @mixin tokens() {
 {{#each props as |prop|}}

packages/npm/src/types.ts.hbs

@@ -0,0 +1,8 @@
+// generated by Theo (https://github.com/salesforce-ux/theo)
+
+export type {{DEFINITIONS_NAME}} =
+{{#each props as |prop|}}
+{{#is prop.category '{{FILTER_CATEGORY}}'}}
+  | '{{prop.name}}'
+{{/is}}
+{{/each}};

scripts/generate-definitions.ts

@@ -0,0 +1,48 @@
+import { readFileSync, writeFileSync } from 'fs';
+import { camelCase, kebabCase } from 'lodash';
+import { join } from 'path';
+import { convert, Format, registerFormat } from 'theo';
+
+const definitionsName = process.env.DEFINITIONS_NAME;
+if (!definitionsName) throw new Error('No definitions name provided');
+
+const srcPath = join(__dirname, `src/definitions/${definitionsName}.json`);
+
+const { meta } = JSON.parse(readFileSync(srcPath, 'utf8'));
+
+(
+  [
+    {
+      type: 'scss',
+      formatFile: 'sass-variables.scss.hbs',
+      destFile: `${kebabCase(definitionsName)}.scss`,
+      definitionsName: meta.sassVariableName,
+    },
+    {
+      type: 'ts' as Format,
+      formatFile: 'types.ts.hbs',
+      destFile: `${camelCase(definitionsName)}.ts`,
+      definitionsName: meta.typeName,
+    },
+  ] as const
+).forEach(({ type, formatFile, destFile, definitionsName }) => {
+  const formatPath = join(__dirname, `packages/npm/src/${formatFile}`);
+  const destPath = join(__dirname, `packages/npm/src/definitions/${destFile}`);
+
+  registerFormat(
+    type,
+    readFileSync(formatPath, 'utf8')
+      .replace(/{{DEFINITIONS_NAME}}/g, definitionsName)
+      .replace(/{{FILTER_CATEGORY}}/g, meta.filterCategory)
+  );
+
+  convert({
+    transform: {
+      type: 'raw',
+      file: srcPath,
+    },
+    format: { type },
+  })
+    .then((data) => writeFileSync(destPath, data))
+    .catch(console.error);
+});

scripts/generate-theme.ts

@@ -14,9 +14,7 @@ if (!themeName) throw new Error('No theme name provided');
 const colorScheme = process.env.COLOR_SCHEME;
 if (!colorScheme) throw new Error('No color scheme provided');
 
-const themesPath = join(__dirname, 'src/themes');
-
-const srcPath = join(themesPath, `${themeName}.json`);
+const srcPath = join(__dirname, `src/themes/${themeName}.json`);
 const formatPath = join(__dirname, 'packages/npm/src/theme.scss.hbs');
 const destPath = join(__dirname, `packages/npm/src/theme-${themeName}.scss`);
 

scripts/generate-tokens.ts

@@ -2,9 +2,7 @@ import { readFileSync, writeFileSync } from 'fs';
 import { join } from 'path';
 import { convert, registerFormat } from 'theo';
 
-const tokensPath = join(__dirname, 'src/tokens');
-
-const srcPath = join(tokensPath, 'tokens.json');
+const srcPath = join(__dirname, 'src/tokens.json');
 const formatPath = join(__dirname, 'packages/npm/src/tokens.scss.hbs');
 const destPath = join(__dirname, 'packages/npm/src/tokens.scss');
 

src/definitions/border-radius.json

@@ -0,0 +1,8 @@
+{
+  "imports": ["../tokens.json"],
+  "meta": {
+    "filterCategory": "border-radius",
+    "sassVariableName": "border-radius",
+    "typeName": "BorderRadius"
+  }
+}

src/definitions/color-palette.json

@@ -0,0 +1,8 @@
+{
+  "imports": ["../tokens.json"],
+  "meta": {
+    "filterCategory": "color",
+    "sassVariableName": "color-palette",
+    "typeName": "ColorPalette"
+  }
+}

src/definitions/theme-colors.json

@@ -0,0 +1,8 @@
+{
+  "imports": ["../themes/day.json", "../themes/night.json"],
+  "meta": {
+    "filterCategory": "color",
+    "sassVariableName": "theme-colors",
+    "typeName": "ThemeColors"
+  }
+}

src/tokens/tokens.json → src/tokens.json

@@ -1,5 +1,5 @@
 {
-  "imports": ["../aliases.json"],
+  "imports": ["./aliases.json"],
   "props": [
     {
       "type": "duration",