chore: Explose the entire token set internally (#76)

src/build/internal.ts

@@ -85,7 +85,7 @@ export async function buildThemedComponentsInternal(params: BuildThemedComponent
     componentsOutputDir,
     getInlineStylesheets(primary, secondary, defaults, variablesMap, propertiesMap, neededTokens)
   );
-  const internalTokensTask = createInternalTokenFiles(primary, defaults, propertiesMap, exposed, componentsOutputDir);
+  const internalTokensTask = createInternalTokenFiles(defaults, propertiesMap, componentsOutputDir);
 
   const preset: ThemePreset = {
     theme: primary,

src/build/tasks/__tests__/__snapshots__/internal-tokens.test.ts.snap

@@ -1,15 +1,37 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`generateTokensDeclarationFile matches previous snapshot 1`] = `
-"export const shadow: string;
+"export const fontFamilyBase: string;
+export const fontFamilyBody: string;
+export const black: string;
+export const grey: string;
+export const brown: string;
+export const shadow: string;
 export const buttonShadow: string;
 export const boxShadow: string;
-export const lineShadow: string;"
+export const lineShadow: string;
+export const small: string;
+export const medium: string;
+export const scaledSize: string;
+export const appear: string;
+export const containerShadowBase: string;
+export const modalShadowContainer: string;"
 `;
 
 exports[`generateTokensFile matches previous snapshot 1`] = `
-"export var shadow = "var(--shadow-css, grey)";
+"export var black = "var(--black-css, black)";
+export var grey = "var(--grey-css, grey)";
+export var brown = "var(--brown-css, brown)";
+export var shadow = "var(--shadow-css, grey)";
 export var buttonShadow = "var(--buttonShadow-css, grey)";
 export var boxShadow = "var(--boxShadow-css, grey)";
-export var lineShadow = "var(--lineShadow-css, grey)";"
+export var lineShadow = "var(--lineShadow-css, grey)";
+export var small = "var(--small-css, 1px)";
+export var medium = "var(--medium-css, 3px)";
+export var scaledSize = "var(--scaledSize-css, 3px)";
+export var appear = "var(--appear-css, 20ms)";
+export var fontFamilyBase = "var(--fontFamilyBase-css, "Helvetica Neue", Arial, sans-serif)";
+export var fontFamilyBody = "var(--fontFamilyBody-css, "Helvetica Neue", Arial, sans-serif)";
+export var containerShadowBase = "var(--containerShadowBase-css, 2px 3px orange, -1px 0 8px olive)";
+export var modalShadowContainer = "var(--modalShadowContainer-css, 2px 3px orange, -1px 0 8px olive)";"
 `;

src/build/tasks/__tests__/internal-tokens.test.ts

@@ -1,24 +1,16 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { test, expect } from 'vitest';
-import { rootTheme, defaultsResolution, preset } from '../../../__fixtures__/common';
+import { defaultsResolution, preset } from '../../../__fixtures__/common';
 
 import { generateTokensDeclarationFile, generateTokensFile } from '../internal-tokens';
 
 const propertiesMap = preset.propertiesMap;
-const publicTokens = preset.exposed;
 
 test('generateTokensFile matches previous snapshot', () => {
-  expect(generateTokensFile(rootTheme, defaultsResolution, propertiesMap, publicTokens)).toMatchSnapshot();
+  expect(generateTokensFile(defaultsResolution, propertiesMap)).toMatchSnapshot();
 });
 
 test('generateTokensDeclarationFile matches previous snapshot', () => {
-  expect(generateTokensDeclarationFile(publicTokens)).toMatchSnapshot();
-});
-
-test('throws error for missing custom properties', () => {
-  const func = () => {
-    generateTokensFile(rootTheme, defaultsResolution, {}, publicTokens);
-  };
-  expect(func).toThrowError(new Error('Token shadow is not mapped to a CSS Custom Property'));
+  expect(generateTokensDeclarationFile(propertiesMap)).toMatchSnapshot();
 });

src/build/tasks/internal-tokens.ts

@@ -2,43 +2,31 @@
 // SPDX-License-Identifier: Apache-2.0
 import { writeFile } from '../file';
 import { join } from 'path';
-import { SpecificResolution, Theme, ThemePreset } from '../../shared/theme';
+import { SpecificResolution, ThemePreset } from '../../shared/theme';
 
 export async function createInternalTokenFiles(
-  theme: Theme,
   resolution: SpecificResolution,
   propertiesMap: ThemePreset['propertiesMap'],
-  publicTokens: string[],
   outputDir: string
 ) {
   await writeFile(
     join(outputDir, 'internal/generated/styles/tokens.js'),
-    generateTokensFile(theme, resolution, propertiesMap, publicTokens)
-  );
-  await writeFile(
-    join(outputDir, 'internal/generated/styles/tokens.d.ts'),
-    generateTokensDeclarationFile(publicTokens)
+    generateTokensFile(resolution, propertiesMap)
   );
+  await writeFile(join(outputDir, 'internal/generated/styles/tokens.d.ts'), generateTokensDeclarationFile(resolution));
 }
 
 export function generateTokensFile(
-  theme: Theme,
   resolution: SpecificResolution,
-  propertiesMap: ThemePreset['propertiesMap'],
-  publicTokens: string[]
+  propertiesMap: ThemePreset['propertiesMap']
 ): string {
-  return publicTokens
-    .map((token) => {
-      const cssName = propertiesMap[token];
-      if (!cssName) {
-        throw new Error(`Token ${token} is not mapped to a CSS Custom Property`);
-      }
-      const value = resolution[token];
-      return `export var ${token} = "var(${cssName}, ${value})";`;
-    })
+  return Object.entries(resolution)
+    .map(([token, value]) => `export var ${token} = "var(${propertiesMap[token]}, ${value})";`)
     .join('\n');
 }
 
-export function generateTokensDeclarationFile(publicTokens: string[]): string {
-  return publicTokens.map((token) => `export const ${token}: string;`).join('\n');
+export function generateTokensDeclarationFile(resolution: SpecificResolution): string {
+  return Object.keys(resolution)
+    .map((token) => `export const ${token}: string;`)
+    .join('\n');
 }