chore: Support custom css properties (and use in avatar)

.gitignore

@@ -6,4 +6,5 @@ lib
 dist
 /src/test-utils/selectors
 /src/test-utils/dom/index.ts
+/src/internal/generated/custom-css-properties
 .DS_STORE

package.json

@@ -8,7 +8,7 @@
   "homepage": "https://cloudscape.design",
   "scripts": {
     "prebuild": "rm -rf lib dist .cache",
-    "build": "npm-run-all build:pkg --parallel build:src:* --parallel build:pages:* build:themeable",
+    "build": "npm-run-all build:pkg build:custom-css-properties --parallel build:src:* --parallel build:pages:* build:themeable",
     "lint": "npm-run-all --parallel lint:*",
     "lint:eslint": "eslint --ignore-path .gitignore --ext ts,tsx,js .",
     "lint:stylelint": "stylelint --ignore-path .gitignore '{src,pages}/**/*.{css,scss}'",
@@ -27,6 +27,7 @@
     "start:watch:ts": "npm run build:src:js -- --watch",
     "start:watch:css": "chokidar \"./src/**/*.scss\" -c \"npm run build:src:css\"",
     "build:pkg": "node scripts/package-json.js",
+    "build:custom-css-properties": "node scripts/custom-css-properties.js",
     "build:src:js": "tsc -p tsconfig.json --inlineSources --sourceMap",
     "build:src:css": "node scripts/compile-styles.js",
     "build:src:test-utils": "node scripts/test-utils.js",
@@ -78,6 +79,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^3.0.7",
     "@vitest/eslint-plugin": "^1.1.31",
+    "change-case": "^4.1.2",
     "chokidar-cli": "^3.0.0",
     "deep-freeze-es6": "^1.4.1",
     "delay-cli": "^2.0.0",

scripts/custom-css-properties.js

@@ -0,0 +1,47 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { Buffer } from "buffer";
+import { getHashDigest } from "loader-utils";
+import path from "path";
+
+import customCssPropertiesList from "./utils/custom-css-properties-list.js";
+import { writeSourceFile } from "./utils/files.js";
+import { gitCommitVersion } from "./utils/workspace.js";
+
+const outputBasePath = "src/internal/generated/custom-css-properties";
+const hash = getHashDigest(Buffer.from(JSON.stringify(customCssPropertiesList)), "md5", "base36", 6);
+
+const getHashedProperty = (property) => {
+  return `--awsui-${property.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase())}-${hash}`;
+};
+
+function writeJsFile() {
+  const filepath = path.join(outputBasePath, "index.ts");
+
+  writeSourceFile(
+    filepath,
+    `
+      const customCSSPropertiesMap = {
+        ${customCssPropertiesList.map((property) => `"${property}": "${getHashedProperty(property)}",`).join("\n")}
+      };
+      export default customCSSPropertiesMap;
+    `,
+  );
+}
+
+function writeSassFile() {
+  const filepath = path.join(outputBasePath, "index.scss");
+
+  writeSourceFile(
+    filepath,
+    `
+    // Build environment
+    $awsui-commit-hash: "${gitCommitVersion}";
+    // Manually managed CSS-variables
+    ${customCssPropertiesList.map((property) => `$${property}: ${getHashedProperty(property)};`).join("\n")}
+    `,
+  );
+}
+
+writeJsFile();
+writeSassFile();

scripts/docs.js

@@ -4,7 +4,7 @@ import path from "node:path";
 
 import { documentTestUtils, writeComponentsDocumentation } from "@cloudscape-design/documenter";
 
-import { writeSourceFile } from "./utils.js";
+import { writeSourceFile } from "./utils/files.js";
 
 const targetDir = "lib/components/internal/api-docs";
 

scripts/environment.js

@@ -3,10 +3,10 @@
 
 import * as fs from "node:fs";
 import path from "node:path";
-import process from "node:process";
+
+import { gitCommitVersion } from "./utils/workspace.js";
 
 const pkg = JSON.parse(fs.readFileSync("package.json", "utf-8"));
-const gitCommitVersion = (process.env.GITHUB_SHA || "HEAD").slice(0, 8);
 const packageVersion = `${pkg.version} (${gitCommitVersion})`;
 
 const basePath = "lib/components/internal/environment";

scripts/package-json.js

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import fs from "node:fs";
 
-import { writeJSON } from "./utils.js";
+import { writeJSON } from "./utils/files.js";
 
 const pkg = JSON.parse(fs.readFileSync("package.json", "utf-8"));
 

scripts/test-utils.js

@@ -1,13 +1,13 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import { pascalCase } from "change-case";
 import { execaSync } from "execa";
 import { globbySync } from "globby";
 import path from "node:path";
 
 import { generateTestUtils } from "@cloudscape-design/test-utils-converter";
 
-import { pluralizeComponentName } from "./pluralize.js";
-import { pascalCase } from "./utils.js";
+import { pluralizeComponentName } from "./utils/pluralize.js";
 
 const componentNames = globbySync(["src/test-utils/dom/**/index.ts", "!src/test-utils/dom/index.ts"]).map(
   (filePath) => {

scripts/utils/custom-css-properties-list.js

@@ -0,0 +1,7 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+/*
+ * This file is only needed to generate the proper js and scss files in custom-css-properties script
+ */
+const customCssPropertiesList = ["avatarSize"];
+export default customCssPropertiesList;

scripts/utils.js → scripts/utils/files.js

@@ -1,17 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import lodash from "lodash";
 import fs from "node:fs";
 import path from "node:path";
 
-export function pascalCase(text) {
-  return capitalize(lodash.camelCase(text));
-}
-
-function capitalize(text) {
-  return text[0].toUpperCase() + text.slice(1);
-}
-
 export function listPublicDirs(baseDir) {
   return fs
     .readdirSync(baseDir)

scripts/utils/workspace.js

@@ -0,0 +1,5 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import process from "process";
+
+export const gitCommitVersion = (process.env.GITHUB_SHA || "HEAD").slice(0, 8);

src/avatar/internal.tsx

@@ -6,10 +6,10 @@ import clsx from "clsx";
 import { useMergeRefs, warnOnce } from "@cloudscape-design/component-toolkit/internal";
 import Icon from "@cloudscape-design/components/icon";
 import Tooltip from "@cloudscape-design/components/internal/tooltip-do-not-use";
-import * as awsui from "@cloudscape-design/design-tokens";
 
 import { getDataAttributes } from "../internal/base-component/get-data-attributes";
 import { InternalBaseComponentProps } from "../internal/base-component/use-base-component";
+import customCssProps from "../internal/generated/custom-css-properties";
 import { AvatarProps } from "./interfaces.js";
 import LoadingDots from "./loading-dots";
 
@@ -33,7 +33,7 @@ const AvatarContent = ({
   }
 
   if (imgUrl) {
-    return <img className={styles.image} src={imgUrl} style={{ height: width, width: width }} />;
+    return <img className={styles.image} src={imgUrl} />;
   }
 
   if (initials) {
@@ -43,11 +43,7 @@ const AvatarContent = ({
       warnOnce("Avatar", `"initials" is longer than 2 characters. Only the first two characters are shown.`);
     }
 
-    return (
-      <span style={{ fontSize: `clamp(${awsui.fontSizeBodyS}, calc(0.4px * ${width}), calc(0.4px * ${width}))` }}>
-        {letters}
-      </span>
-    );
+    return <span className={styles.initials}>{letters}</span>;
   }
 
   return <Icon name={iconName} svg={iconSvg} url={iconUrl} alt={ariaLabel} size="inherit" />;
@@ -103,7 +99,7 @@ export default function InternalAvatar({
       role="img"
       aria-label={ariaLabel}
       {...tooltipAttributes}
-      style={{ height: computedSize, width: computedSize }}
+      style={{ [customCssProps.avatarSize]: `${computedSize}px` }}
     >
       {showTooltip && tooltipText && (
         <Tooltip
@@ -116,7 +112,7 @@ export default function InternalAvatar({
 
       {/* aria-hidden is added so that screen readers focus only the parent div */}
       {/* when it is not hidden, it becomes unstable in JAWS */}
-      <div className={styles.content} aria-hidden="true" style={{ lineHeight: `calc(.8px * ${computedSize})` }}>
+      <div className={styles.content} aria-hidden="true">
         <AvatarContent
           color={color}
           ariaLabel={ariaLabel}

src/avatar/styles.scss

@@ -5,14 +5,13 @@
 @use "../../node_modules/@cloudscape-design/design-tokens/index.scss" as cs;
 @use "./mixins.scss" as mixins;
 @use "../internal/shared" as shared;
-
-$avatar-size: 28px;
+@use "../internal/generated/custom-css-properties/index.scss" as custom-props;
 
 .root {
   @include shared.styles-reset;
   color: cs.$color-text-avatar;
-  block-size: $avatar-size;
-  inline-size: $avatar-size;
+  block-size: var(#{custom-props.$avatarSize});
+  inline-size: var(#{custom-props.$avatarSize});
   position: relative;
   @include mixins.border-radius-avatar;
 
@@ -51,11 +50,19 @@ $avatar-size: 28px;
   block-size: inherit;
   inline-size: inherit;
   overflow: hidden;
+  line-height: calc(0.8 * var(#{custom-props.$avatarSize}));
 
   .image {
     @include mixins.border-radius-avatar;
-    block-size: $avatar-size;
-    inline-size: $avatar-size;
+    block-size: var(#{custom-props.$avatarSize});
+    inline-size: var(#{custom-props.$avatarSize});
     object-fit: cover;
   }
+  .initials {
+    font-size: clamp(
+      cs.$font-size-body-s,
+      calc(0.4 * var(#{custom-props.$avatarSize})),
+      calc(0.4 * var(#{custom-props.$avatarSize}))
+    );
+  }
 }