chore: Prepare design tokens template

A step to support cloudscape-design/theming-core#35

This change
- configures the `designTokensOutputDir` which holds the package.json which will be part of the generated build time theme artifacts.
- simplifies the way how we generate the themed components by generating the `buildThemedComponents` as part of the components build. It allows us to remove the ts build step in the theming package (which generates the build artifacts).

build-tools/tasks/themeable-source.js

@@ -4,73 +4,68 @@ const { parallel } = require('gulp');
 const path = require('path');
 const { promises: fsp } = require('fs');
 const { join } = require('path');
-const { task, noop } = require('../utils/gulp-utils');
+const { task } = require('../utils/gulp-utils');
 const workspace = require('../utils/workspace');
 const themes = require('../utils/themes');
 const { generatePackageJson } = require('./package-json');
 const { copyThirdPartyLicenses } = require('./licenses');
 const execa = require('execa');
+const { compileTypescript } = require('./typescript');
 
-const templateDir = 'internal/template';
+const componentsTemplateDir = 'internal/template';
+const designTokensTemplateDir = 'internal/template-tokens';
 const stylesDir = 'internal/scss';
 
 const theme = themes.find(theme => theme.name === 'default');
-const themeables = [];
-
-if (theme) {
-  themeables.push({
-    name: 'components-themeable',
-    sourceDir: theme.outputPath,
-    targetDir: join(workspace.targetPath, 'components-themeable'),
-    packageJson: {
-      name: '@cloudscape-design/components-themed',
-    },
-  });
-}
-
-const createCopyStylesTask = themeable => {
-  return task(`themeable-source:copy-styles:${themeable.name}`, () => {
-    return execa('rsync', [
-      '--prune-empty-dirs',
-      '-a',
-      '--include',
-      '*/',
-      // Code Editor SVGs will be embedded into the styling
-      '--include',
-      'code-editor/assets/*.svg',
-      '--include',
-      '*.scss',
-      '--exclude',
-      '*',
-      `${workspace.sourcePath}/`,
-      `${path.join(themeable.targetDir, stylesDir)}/`,
-    ]);
-  });
-};
-
-const createCopyTemplateTask = themeable => {
-  return task(`themeable-source:copy-template:${themeable.name}`, async () => {
-    const dest = path.join(themeable.targetDir, templateDir);
-    await fsp.mkdir(dest, { recursive: true });
-    // The '.' tells cp to copy all files inside the source to the destination.
-    // Using it as part of path.join will simply resolve it. That's why, we use template strings.
-    return execa('cp', ['-R', `${path.join(themeable.sourceDir, '/')}.`, dest]);
-  });
-};
-
-const createGenerateExtrasTask = themeable => {
-  return parallel(
-    generatePackageJson(join(themeable.targetDir, templateDir), themeable.packageJson, {
-      injectDependencies: true,
-    }),
-    copyThirdPartyLicenses('themeable', join(themeable.targetDir, templateDir))
-  );
+const themeable = {
+  name: 'components-themeable',
+  sourceDir: theme.outputPath,
+  targetDir: join(workspace.targetPath, 'components-themeable'),
+  packageJson: {
+    name: '@cloudscape-design/components-themed',
+  },
+  tokensPackageJson: {
+    name: '@cloudscape-design/design-tokens-themed',
+  },
 };
 
-const parallelOrNOOP = tasks => (tasks.length ? parallel(...tasks) : noop);
+const copyStylesTask = task(`themeable-source:copy-styles:${themeable.name}`, () => {
+  return execa('rsync', [
+    '--prune-empty-dirs',
+    '-a',
+    '--include',
+    '*/',
+    // Code Editor SVGs will be embedded into the styling
+    '--include',
+    'code-editor/assets/*.svg',
+    '--include',
+    '*.scss',
+    '--exclude',
+    '*',
+    `${workspace.sourcePath}/`,
+    `${path.join(themeable.targetDir, stylesDir)}/`,
+  ]);
+});
 
-const copyStylesTask = parallelOrNOOP(themeables.map(themeable => createCopyStylesTask(themeable)));
-const copyTemplateTask = parallelOrNOOP(themeables.map(themeable => createCopyTemplateTask(themeable)));
-const generateExtraTask = parallelOrNOOP(themeables.map(themeable => createGenerateExtrasTask(themeable)));
+const copyTemplateTask = task(`themeable-source:copy-template:${themeable.name}`, async () => {
+  const dest = path.join(themeable.targetDir, componentsTemplateDir);
+  await fsp.mkdir(dest, { recursive: true });
+  // The '.' tells cp to copy all files inside the source to the destination.
+  // Using it as part of path.join will simply resolve it. That's why, we use template strings.
+  return execa('cp', ['-R', `${path.join(themeable.sourceDir, '/')}.`, dest]);
+});
 
-module.exports = parallel(copyStylesTask, copyTemplateTask, generateExtraTask);
+module.exports = parallel(
+  compileTypescript({
+    name: themeable.name,
+    tsConfigPath: 'tsconfig.src-themeable.json',
+    outputPath: themeable.targetDir,
+  }),
+  generatePackageJson(join(themeable.targetDir, componentsTemplateDir), themeable.packageJson, {
+    injectDependencies: true,
+  }),
+  generatePackageJson(join(themeable.targetDir, designTokensTemplateDir), themeable.tokensPackageJson),
+  copyThirdPartyLicenses('themeable', join(themeable.targetDir, componentsTemplateDir)),
+  copyStylesTask,
+  copyTemplateTask
+);

src-themeable/internal/template/internal/generated/theming/index.cjs.d.ts

@@ -0,0 +1,8 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { ThemePreset, GlobalValue, TypedModeValueOverride } from '@cloudscape-design/theming-build';
+
+export interface TypedOverride {
+  tokens: Partial<Record<string, GlobalValue | TypedModeValueOverride>>;
+}
+export const preset: ThemePreset;

src-themeable/theming.ts

@@ -0,0 +1,30 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { join } from 'path';
+import { buildThemedComponents as themingCoreBuild } from '@cloudscape-design/theming-build';
+import { preset, TypedOverride } from './internal/template/internal/generated/theming/index.cjs';
+
+const internalDir = join(__dirname, './internal');
+const scssDir = join(internalDir, './scss');
+const templateDir = join(internalDir, './template');
+const designTokensTemplateDir = join(internalDir, './template-tokens');
+
+export type Theme = TypedOverride;
+export interface BuildThemedComponentsParams {
+  theme: Theme;
+  outputDir: string;
+  baseThemeId?: string;
+}
+
+export function buildThemedComponents({ theme, outputDir, baseThemeId }: BuildThemedComponentsParams): Promise<void> {
+  return themingCoreBuild({
+    override: theme,
+    preset,
+    baseThemeId,
+    componentsOutputDir: join(outputDir, 'components'),
+    designTokensOutputDir: join(outputDir, 'design-tokens'),
+    templateDir,
+    designTokensTemplateDir,
+    scssDir,
+  });
+}

tsconfig.src-themeable.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@tsconfig/node16/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src-themeable",
+    "declaration": true,
+    "incremental": true
+  },
+  "include": ["src-themeable"]
+}