chore: Experiment with visual contexts optimisation

package.json

@@ -25,7 +25,7 @@
     "start:integ": "cross-env NODE_ENV=development webpack serve --config pages/webpack.config.integ.cjs",
     "start:react18": "npm-run-all --parallel start:watch start:react18:dev",
     "start:react18:dev": "cross-env NODE_ENV=development REACT_VERSION=18 webpack serve --config pages/webpack.config.cjs",
-    "postinstall": "prepare-package-lock",
+    "postinstall": "prepare-package-lock && node ./scripts/install-peer-dependency.js theming-core:context-inherits-mode",
     "prepare": "husky"
   },
   "dependencies": {

scripts/install-peer-dependency.js

@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+// Can be used in postinstall script like so:
+// "postinstall": "node ./scripts/install-peer-dependency.js collection-hooks:property-filter-token-groups"
+// where "collection-hooks" is the package to fetch and "property-filter-token-groups" is the branch name in GitHub.
+
+import { execSync } from 'child_process';
+import process from 'node:process';
+import os from 'os';
+import path from 'path';
+
+const getModules = packageName => {
+  switch (packageName) {
+    case 'components':
+      return ['components', 'design-tokens'];
+    case 'theming-core':
+      return ['theming-build', 'theming-runtime'];
+    case 'test-utils':
+      return ['test-utils-core', 'test-utils-converter'];
+    default:
+      return [packageName];
+  }
+};
+
+const getArtifactPath = moduleName => {
+  switch (moduleName) {
+    case 'components':
+      return '/lib/components/*';
+    case 'design-tokens':
+      return '/lib/design-tokens/*';
+    case 'board-components':
+      return '/lib/components/*';
+    case 'theming-build':
+      return '/lib/node/*';
+    case 'theming-runtime':
+      return '/lib/browser/*';
+    case 'test-utils-core':
+      return '/lib/core/*';
+    case 'test-utils-converter':
+      return '/lib/converter/*';
+    default:
+      return '/lib/*';
+  }
+};
+
+const args = process.argv.slice(2);
+if (args.length < 1) {
+  console.error('Usage: install-peer-dependency.js <package-name>:<target-branch>');
+  process.exit(1);
+}
+const [packageName, targetBranch] = args[0].split(':');
+const targetRepository = `https://github.com/cloudscape-design/${packageName}.git`;
+const nodeModulesPath = path.join(process.cwd(), 'node_modules', '@cloudscape-design');
+const tempDir = path.join(os.tmpdir(), `temp-${packageName}`);
+
+// Clone the repository and checkout the branch
+console.log(`Cloning ${packageName}:${targetBranch}...`);
+execCommand(`git clone ${targetRepository} ${tempDir}`);
+process.chdir(tempDir);
+execCommand(`git checkout ${targetBranch}`);
+
+// Install dependencies and build
+console.log(`Installing dependencies and building ${packageName}...`);
+execCommand('npm install');
+execCommand('npm run build');
+
+// Remove existing peer dependency in node_modules
+for (const moduleName of getModules(packageName)) {
+  const modulePath = path.join(nodeModulesPath, moduleName);
+  const artifactPath = getArtifactPath(moduleName);
+
+  console.log(`Removing existing ${moduleName} from node_modules...`, modulePath);
+  execCommand(`rm -rf ${modulePath}`);
+
+  // Copy built peer dependency to node_modules
+  console.log(`Copying built ${moduleName} to node_modules...`, modulePath, `${tempDir}${artifactPath}`);
+  execCommand(`mkdir -p ${modulePath}`);
+  execCommand(`cp -R ${tempDir}${artifactPath} ${modulePath}`);
+}
+
+// Clean up
+console.log('Cleaning up...');
+execCommand(`rm -rf ${tempDir}`);
+
+console.log(`${packageName} has been successfully installed from branch ${targetBranch}!`);
+
+function execCommand(command, options = {}) {
+  try {
+    execSync(command, { stdio: 'inherit', ...options });
+  } catch (error) {
+    console.error(`Error executing command: ${command}`);
+    console.error(`Error message: ${error.message}`);
+    console.error(`Stdout: ${error.stdout && error.stdout.toString()}`);
+    console.error(`Stderr: ${error.stderr && error.stderr.toString()}`);
+    throw error;
+  }
+}

style-dictionary/classic/contexts/compact-table.ts

@@ -1,29 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import merge from 'lodash/merge.js';
 
-import { expandDensityDictionary } from '../../utils/index.js';
 import { StyleDictionary } from '../../utils/interfaces.js';
-import { tokens as parentTokens } from '../spacing.js';
 
-const spacingTokens: StyleDictionary.SpacingDictionary = {
-  spaceScaledXxxs: '{spaceNone}',
-  spaceScaledXxs: '{spaceXxxs}',
-  spaceScaledXs: '{spaceXxs}',
-  spaceScaledS: '{spaceXs}',
-  spaceScaledM: '{spaceS}',
-  spaceScaledL: '{spaceM}',
-  spaceScaledXl: '{spaceL}',
-  spaceScaledXxl: '{spaceXl}',
-  spaceScaledXxxl: '{spaceXxl}',
-};
+const tokens: StyleDictionary.ExpandedDensityScopeDictionary = {};
 
-const sizeTokens: StyleDictionary.SizesDictionary = {
-  sizeVerticalInput: '28px',
-};
-
-const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = expandDensityDictionary(
-  merge({}, parentTokens, { ...spacingTokens, ...sizeTokens })
-);
-
-export { expandedTokens as tokens };
+export { tokens };

style-dictionary/classic/contexts/top-navigation.ts

@@ -1,21 +1,15 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import merge from 'lodash/merge.js';
 
-import { expandColorDictionary, pickState } from '../../utils/index.js';
+import { expandColorDictionary } from '../../utils/index.js';
 import { StyleDictionary } from '../../utils/interfaces.js';
-import { tokens as parentTokens } from '../colors.js';
 
 const tokens = {
   colorBackgroundContainerContent: '{colorAwsSquidInk}',
   colorBackgroundDropdownItemDefault: '{colorAwsSquidInk}',
 };
 
-const darkModeValues = pickState(parentTokens, 'dark');
-
-const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(
-  merge({}, darkModeValues, tokens)
-);
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
 
 export const mode: StyleDictionary.ModeIdentifier = 'color';
 export { expandedTokens as tokens };

style-dictionary/utils/contexts.ts

@@ -7,7 +7,7 @@ export const createTopNavigationContext = (tokens: TokenCategory<string, GlobalV
     id: 'top-navigation',
     selector: '.awsui-context-top-navigation',
     tokens,
-    defaultMode: 'dark',
+    inheritsMode: 'dark',
   };
 };
 
@@ -16,6 +16,7 @@ export const createCompactTableContext = (tokens: TokenCategory<string, GlobalVa
     id: 'compact-table',
     selector: '.awsui-context-compact-table',
     tokens,
+    inheritsMode: 'compact',
   };
 };
 
@@ -24,7 +25,7 @@ export const createHeaderContext = (tokens: TokenCategory<string, GlobalValue |
     id: 'header',
     selector: '.awsui-context-content-header',
     tokens,
-    defaultMode: 'dark',
+    inheritsMode: 'dark',
   };
 };
 

style-dictionary/visual-refresh/contexts/compact-table.ts

@@ -1,29 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import merge from 'lodash/merge.js';
 
-import { expandDensityDictionary } from '../../utils/index.js';
 import { StyleDictionary } from '../../utils/interfaces.js';
-import { tokens as parentTokens } from '../spacing.js';
 
-const spacingTokens: StyleDictionary.SpacingDictionary = {
-  spaceScaledXxxs: '{spaceNone}',
-  spaceScaledXxs: '{spaceXxxs}',
-  spaceScaledXs: '{spaceXxs}',
-  spaceScaledS: '{spaceXs}',
-  spaceScaledM: '{spaceS}',
-  spaceScaledL: '{spaceM}',
-  spaceScaledXl: '{spaceL}',
-  spaceScaledXxl: '{spaceXl}',
-  spaceScaledXxxl: '{spaceXxl}',
-};
+const tokens: StyleDictionary.ExpandedDensityScopeDictionary = {};
 
-const sizeTokens: StyleDictionary.SizesDictionary = {
-  sizeVerticalInput: '28px',
-};
-
-const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = expandDensityDictionary(
-  merge({}, parentTokens, { ...spacingTokens, ...sizeTokens })
-);
-
-export { expandedTokens as tokens };
+export { tokens };

style-dictionary/visual-refresh/contexts/header.ts

@@ -1,15 +1,13 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import merge from 'lodash/merge.js';
 
-import { expandColorDictionary, pickState } from '../../utils/index.js';
+import { expandColorDictionary } from '../../utils/index.js';
 import { StyleDictionary } from '../../utils/interfaces.js';
-import { tokens as parentColorTokens } from '../colors.js';
 import { tokens as parentShadowsTokens } from '../shadows.js';
 
 const background = '{colorNeutral950}';
 
-const colorTokens: StyleDictionary.ColorsDictionary = {
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary({
   colorBackgroundLayoutMain: background,
   colorBackgroundButtonNormalDefault: background,
   colorBackgroundButtonNormalDisabled: background,
@@ -19,20 +17,10 @@ const colorTokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundSegmentDisabled: background,
   colorBackgroundTableHeader: background,
   colorBackgroundSegmentWrapper: background,
-};
-
-const shadowsTokens: StyleDictionary.ShadowsDictionary = {
   shadowFlashSticky: parentShadowsTokens.shadowFlashSticky,
   shadowPanel: parentShadowsTokens.shadowPanel,
   shadowPanelToggle: parentShadowsTokens.shadowPanelToggle,
-};
-
-const darkModeColorValues = pickState(parentColorTokens, 'dark');
-const darkModeShadowsValues = pickState(parentShadowsTokens, 'dark');
-
-const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(
-  merge({}, darkModeShadowsValues, darkModeColorValues, shadowsTokens, colorTokens)
-);
+});
 
 export const mode: StyleDictionary.ModeIdentifier = 'color';
 export { expandedTokens as tokens };

style-dictionary/visual-refresh/contexts/top-navigation.ts

@@ -1,21 +1,15 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import merge from 'lodash/merge.js';
 
-import { expandColorDictionary, pickState } from '../../utils/index.js';
+import { expandColorDictionary } from '../../utils/index.js';
 import { StyleDictionary } from '../../utils/interfaces.js';
-import { tokens as parentTokens } from '../colors.js';
 
 const tokens = {
   colorBackgroundContainerContent: '{colorNeutral850}',
   colorBackgroundDropdownItemDefault: '{colorNeutral850}',
 };
 
-const darkModeValues = pickState(parentTokens, 'dark');
-
-const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(
-  merge({}, darkModeValues, tokens)
-);
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
 
 export const mode: StyleDictionary.ModeIdentifier = 'color';
 export { expandedTokens as tokens };