wip: sync design tokens

Author: pan-kot

package-lock.json

@@ -35,7 +35,8 @@
     "build:src:environment": "node scripts/environment",
     "build:themeable": "node scripts/themeable-source",
     "build:pages:vite": "vite build",
-    "build:pages:tsc": "tsc -p pages/tsconfig.json"
+    "build:pages:tsc": "tsc -p pages/tsconfig.json",
+    "postinstall": "node ./scripts/install-peer-dependency.js components:charts-design-tokens"
   },
   "exports": {
     ".": "./index.js",

package.json

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { createContext } from "react";
+import { createContext, useEffect } from "react";
 import { useSearchParams } from "react-router-dom";
 import mapValues from "lodash/mapValues";
 
@@ -49,22 +49,36 @@ function parseQuery(urlParams: URLSearchParams) {
   });
 }
 
+function formatQuery(params: AppUrlParams) {
+  const query: Record<string, string> = {};
+  for (const [key, value] of Object.entries(params)) {
+    if (value === appContextDefaults.urlParams[key as keyof AppUrlParams]) {
+      continue;
+    }
+    query[key as keyof AppUrlParams] = String(value);
+  }
+  return query;
+}
+
 export function AppContextProvider({ children }: { children: React.ReactNode }) {
   const [searchParams, setSearchParams] = useSearchParams();
   const urlParams = parseQuery(searchParams) as AppUrlParams;
 
   function setUrlParams(newParams: Partial<AppUrlParams>) {
-    if (newParams.mode !== urlParams.mode) {
-      applyMode(newParams.mode ?? appContextDefaults.urlParams.mode, document.documentElement);
-    }
-    if (newParams.density !== urlParams.density) {
-      applyDensity(newParams.density ?? appContextDefaults.urlParams.density, document.documentElement);
-    }
-    if (newParams.direction !== urlParams.direction) {
-      document.documentElement.setAttribute("dir", newParams.direction ?? appContextDefaults.urlParams.direction);
-    }
-    setSearchParams({ ...searchParams, ...newParams });
+    setSearchParams(formatQuery({ ...urlParams, ...newParams }));
   }
 
+  useEffect(() => {
+    applyMode(urlParams.mode);
+  }, [urlParams.mode]);
+
+  useEffect(() => {
+    applyDensity(urlParams.density);
+  }, [urlParams.density]);
+
+  useEffect(() => {
+    document.documentElement.setAttribute("dir", urlParams.direction);
+  }, [urlParams.direction]);
+
   return <AppContext.Provider value={{ urlParams, setUrlParams: setUrlParams }}>{children}</AppContext.Provider>;
 }

pages/app/app-context.tsx

@@ -19,6 +19,14 @@ import AppContext, { AppContextProvider } from "./app-context";
 
 import "@cloudscape-design/global-styles/index.css";
 
+const awsuiVisualRefreshFlag = Symbol.for("awsui-visual-refresh-flag");
+window[awsuiVisualRefreshFlag] = () => true;
+
+interface ExtendedWindow extends Window {
+  [awsuiVisualRefreshFlag]?: () => boolean;
+}
+declare const window: ExtendedWindow;
+
 export default function App() {
   return (
     <I18nProvider locale="en" messages={[enMessages]}>
@@ -50,10 +58,7 @@ function Navigation() {
   const isCompactMode = urlParams.density === Density.Compact;
   const isRtl = urlParams.direction === "rtl";
   return (
-    <header
-      id="h"
-      style={{ position: "sticky", insetBlockStart: 0, insetInlineStart: 0, insetInlineEnd: 0, zIndex: 1002 }}
-    >
+    <header id="h" style={{ position: "sticky", insetBlockStart: 0, zIndex: 1002 }}>
       <TopNavigation
         identity={{
           title: "Chart components - dev pages",
@@ -98,6 +103,7 @@ function IndexPage() {
   const tree = createPagesTree(pages);
   return (
     <AppLayout
+      headerSelector="#h"
       navigationHide={true}
       toolsHide={true}
       content={

pages/app/index.tsx

@@ -22,6 +22,7 @@ export function Page({
   const [toolsOpen, setToolsOpen] = useState(!!settings);
   return (
     <AppLayout
+      headerSelector="#h"
       navigationHide={true}
       tools={settings && <Drawer header={<Header variant="h2">Page settings</Header>}>{settings}</Drawer>}
       toolsOpen={toolsOpen}

pages/common/templates.tsx

@@ -0,0 +1,87 @@
+#!/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"];
+    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/*";
+    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;
+  }
+}

scripts/install-peer-dependency.js

@@ -162,7 +162,6 @@ function ExpandableSeries({
           <ChartSeriesMarker type={markerType} status={markerStatus} color={color} />
         </div>
       )}
-      {/* TODO: custom expandable section? */}
       <div className={styles["full-width"]}>
         <ExpandableSection
           headerText={itemKey}

src/internal/components/chart-series-details/index.tsx

@@ -18,7 +18,7 @@
   // Based on $awsui-box-shadow-inner shadow, but rotated based on x and y multipliers.
   @mixin awsui-box-shadow-inner-rotated($x, $y) {
     $box-shadow-size: 0.71px; // Box shadow is actually 1px, but rotating the arrow changes this to sqrt(1/2)
-    box-shadow: ($box-shadow-size * $x) ($box-shadow-size * $y) 4px -2px rgba(0, 28, 36, 0.5); // TODO: use design token
+    box-shadow: ($box-shadow-size * $x) ($box-shadow-size * $y) 4px -2px cs.$color-shadow-default;
   }
 
   $arrow-edge-length: 14px;
@@ -65,7 +65,7 @@
 
   &-outer {
     &::after {
-      background-color: #545b64; // TODO: use design token
+      background-color: cs.$color-border-popover;
     }
   }
 

src/internal/components/popover/arrow.scss

@@ -22,9 +22,9 @@
   border-end-start-radius: cs.$border-radius-popover;
   border-end-end-radius: cs.$border-radius-popover;
   background-color: cs.$color-background-popover;
-  box-shadow: 0px 4px 20px 1px rgba(0, 4, 12, 1); // TODO: use design token
-  border-block: cs.$border-width-popover solid #545b64; // TODO: use design token
-  border-inline: cs.$border-width-popover solid #545b64; // TODO: use design token
+  box-shadow: cs.$shadow-popover;
+  border-block: cs.$border-width-popover solid cs.$color-border-popover;
+  border-inline: cs.$border-width-popover solid cs.$color-border-popover;
 }
 
 .container-body-variant-annotation {