Added new custom properties.

Author: DaemonCahill

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

@@ -3,5 +3,11 @@
 /*
  * This file is only needed to generate the proper js and scss files in custom-css-properties script
  */
-const customCssPropertiesList = ["avatarSize"];
+const customCssPropertiesList = [
+  "avatarSize",
+  "rootBorderWidth",
+  "focusRingBorderColor",
+  "focusRingBorderRadius",
+  "focusRingBorderWidth",
+];
 export default customCssPropertiesList;

src/avatar/style.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { SYSTEM } from "../internal/environment";
+import customCssProps from "../internal/generated/custom-css-properties";
 import { AvatarProps } from "./interfaces";
 
 export function getRootStyles(style: AvatarProps.Style | undefined) {
@@ -13,10 +14,10 @@ export function getRootStyles(style: AvatarProps.Style | undefined) {
       borderRadius: style.root?.borderRadius,
       boxShadow: style.root?.boxShadow,
       color: style.root?.color,
-      ["--root-border-width"]: style.root?.borderWidth,
-      ["--focus-ring-border-color"]: style.root?.focusRing?.borderColor,
-      ["--focus-ring-border-radius"]: style.root?.focusRing?.borderRadius,
-      ["--focus-ring-border-width"]: style.root?.focusRing?.borderWidth,
+      [customCssProps.rootBorderWidth]: style.root?.borderWidth,
+      [customCssProps.focusRingBorderColor]: style.root?.focusRing?.borderColor,
+      [customCssProps.focusRingBorderRadius]: style.root?.focusRing?.borderRadius,
+      [customCssProps.focusRingBorderWidth]: style.root?.focusRing?.borderWidth,
     };
   }
 

src/avatar/styles.scss

@@ -39,10 +39,10 @@
 
   &:focus-visible {
     @include shared.focus-highlight(
-      $gutter: calc(4px + var(--root-border-width, 0px) + var(--focus-ring-border-width, 0px)),
-      $border-radius: var(--focus-ring-border-radius, 50%),
-      $border-color: var(--focus-ring-border-color, cs.$color-border-item-focused),
-      $border-width: var(--focus-ring-border-width, 2px)
+      $gutter: calc(4px + var(#{custom-props.$rootBorderWidth}, 0px) + var(#{custom-props.$focusRingBorderWidth}, 0px)),
+      $border-radius: var(#{custom-props.$focusRingBorderRadius}, 50%),
+      $border-color: var(#{custom-props.$focusRingBorderColor}, cs.$color-border-item-focused),
+      $border-width: var(#{custom-props.$focusRingBorderWidth}, 2px)
     );
   }