feat: Adds color seed API and palette generation utilities (#130)

Author: jkuelz

package-lock.json

@@ -24,10 +24,10 @@
     "@babel/plugin-transform-modules-commonjs": "^7.18.6",
     "@cloudscape-design/browser-test-tools": "^3.0.2",
     "@cloudscape-design/component-toolkit": "^1.0.0-beta.53",
+    "@material/material-color-utilities": "^0.3.0",
     "@tsconfig/node16": "^1.0.3",
     "@types/loader-utils": "^2.0.3",
     "@types/lodash": "^4.14.183",
-    "@types/node": "^18.19.23",
     "@types/postcss-inline-svg": "^5.0.0",
     "@types/rimraf": "^3.0.2",
     "@types/string-hash": "^1.1.1",
@@ -66,5 +66,8 @@
     "package-lock.json": [
       "./scripts/unlock-packages.js"
     ]
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.0"
   }
 }

package.json

@@ -23,6 +23,7 @@ const packages = [
     },
     packageRoot: path.join(root, './lib/node'),
     dependencies: [
+      '@material/material-color-utilities',
       'autoprefixer',
       'glob',
       'jsonschema',
@@ -44,7 +45,7 @@ const packages = [
       files: ['shared', 'browser'],
     },
     packageRoot: path.join(root, './lib/browser'),
-    dependencies: ['tslib'],
+    dependencies: ['@material/material-color-utilities', 'tslib'],
   },
 ];
 

scripts/generate-package.js

@@ -90,7 +90,7 @@ const emptyTheme: Theme = {
 
 export const rootTheme: Theme = {
   id: 'root',
-  selector: ':root',
+  selector: 'body',
   tokens: {
     fontFamilyBase: '"Helvetica Neue", Arial, sans-serif',
     fontFamilyBody: '{fontFamilyBase}',
@@ -435,3 +435,59 @@ export const descriptionsForValidTheme = {
   colorButton: 'color',
   shadowContainer: 'shadow',
 };
+
+// Themes for performance testing: seed vs explicit palette
+export const themeWithSeedColor: Theme = {
+  ...rootTheme,
+  referenceTokens: {
+    color: {
+      primary: '#0073bb',
+    },
+  },
+};
+
+export const themeWithExplicitPalette: Theme = {
+  ...rootTheme,
+  referenceTokens: {
+    color: {
+      primary: {
+        50: '#f7f9ff',
+        100: '#ecf3ff',
+        200: '#d2e6ff',
+        300: '#aed3ff',
+        400: '#7abbff',
+        500: '#4e9fea',
+        600: '#0073bb',
+        700: '#006aad',
+        800: '#005187',
+        900: '#003b64',
+        1000: '#001123',
+      },
+    },
+  },
+};
+
+export const presetWithSeedColor: ThemePreset = {
+  theme: themeWithSeedColor,
+  themeable: [],
+  exposed: [],
+  propertiesMap: createStubPropertiesMap(themeWithSeedColor),
+  variablesMap: createStubVariablesMap(themeWithSeedColor),
+};
+
+export const presetWithExplicitPalette: ThemePreset = {
+  theme: themeWithExplicitPalette,
+  themeable: [],
+  exposed: [],
+  propertiesMap: createStubPropertiesMap(themeWithExplicitPalette),
+  variablesMap: createStubVariablesMap(themeWithExplicitPalette),
+};
+
+export const overrideWithSeedColor: Override = {
+  tokens: { ...override.tokens },
+  referenceTokens: {
+    color: {
+      primary: '#0073bb',
+    },
+  },
+};