chore: Button Style API refactor (#3752)

Author: teodoranemes

src/button/internal.tsx

@@ -22,9 +22,7 @@ import {
 import Tooltip from '../internal/components/tooltip/index.js';
 import { useButtonContext } from '../internal/context/button-context';
 import { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';
-import { SYSTEM } from '../internal/environment';
 import { fireCancelableEvent, isPlainLeftClick } from '../internal/events';
-import customCssProps from '../internal/generated/custom-css-properties';
 import useForwardFocus from '../internal/hooks/forward-focus';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import useHiddenDescription from '../internal/hooks/use-hidden-description';
@@ -36,6 +34,7 @@ import InternalLiveRegion from '../live-region/internal';
 import { GeneratedAnalyticsMetadataButtonFragment } from './analytics-metadata/interfaces';
 import { ButtonIconProps, LeftIcon, RightIcon } from './icon-helper';
 import { ButtonProps } from './interfaces';
+import { getButtonStyles } from './style';
 
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
@@ -292,41 +291,7 @@ export const InternalButton = React.forwardRef(
       </>
     );
 
-    const stylePropertiesAndVariables =
-      SYSTEM === 'core'
-        ? {
-            borderRadius: style?.root?.borderRadius,
-            borderWidth: style?.root?.borderWidth,
-            paddingBlock: style?.root?.paddingBlock,
-            paddingInline: style?.root?.paddingInline,
-            ...(style?.root?.background && {
-              [customCssProps.styleBackgroundActive]: style.root.background?.active,
-              [customCssProps.styleBackgroundDefault]: style.root.background?.default,
-              [customCssProps.styleBackgroundDisabled]: style.root.background?.disabled,
-              [customCssProps.styleBackgroundHover]: style.root.background?.hover,
-            }),
-            ...(style?.root?.borderColor && {
-              [customCssProps.styleBorderColorActive]: style.root.borderColor?.active,
-              [customCssProps.styleBorderColorDefault]: style.root.borderColor?.default,
-              [customCssProps.styleBorderColorDisabled]: style.root.borderColor?.disabled,
-              [customCssProps.styleBorderColorHover]: style.root.borderColor?.hover,
-            }),
-            ...(style?.root?.color && {
-              [customCssProps.styleColorActive]: style.root.color?.active,
-              [customCssProps.styleColorDefault]: style.root.color?.default,
-              [customCssProps.styleColorDisabled]: style.root.color?.disabled,
-              [customCssProps.styleColorHover]: style.root.color?.hover,
-            }),
-            ...(style?.root?.focusRing && {
-              [customCssProps.styleFocusRingBorderColor]: style.root.focusRing?.borderColor,
-              [customCssProps.styleFocusRingBorderRadius]: style.root.focusRing?.borderRadius,
-              [customCssProps.styleFocusRingBorderWidth]: style.root.focusRing?.borderWidth,
-            }),
-            ...(style?.root?.focusRing?.borderRadius && {
-              [customCssProps.styleFocusRingBorderRadius]: style.root.focusRing.borderRadius,
-            }),
-          }
-        : undefined;
+    const stylePropertiesAndVariables = getButtonStyles(style);
 
     if (isAnchor) {
       const getAnchorTabIndex = () => {

src/button/style.tsx

@@ -0,0 +1,44 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { SYSTEM } from '../internal/environment';
+import customCssProps from '../internal/generated/custom-css-properties';
+import { ButtonProps } from './interfaces';
+
+export function getButtonStyles(style: ButtonProps['style']) {
+  if (SYSTEM !== 'core' || !style?.root) {
+    return undefined;
+  }
+
+  return {
+    borderRadius: style?.root?.borderRadius,
+    borderWidth: style?.root?.borderWidth,
+    paddingBlock: style?.root?.paddingBlock,
+    paddingInline: style?.root?.paddingInline,
+    ...(style?.root?.background && {
+      [customCssProps.styleBackgroundActive]: style.root.background?.active,
+      [customCssProps.styleBackgroundDefault]: style.root.background?.default,
+      [customCssProps.styleBackgroundDisabled]: style.root.background?.disabled,
+      [customCssProps.styleBackgroundHover]: style.root.background?.hover,
+    }),
+    ...(style?.root?.borderColor && {
+      [customCssProps.styleBorderColorActive]: style.root.borderColor?.active,
+      [customCssProps.styleBorderColorDefault]: style.root.borderColor?.default,
+      [customCssProps.styleBorderColorDisabled]: style.root.borderColor?.disabled,
+      [customCssProps.styleBorderColorHover]: style.root.borderColor?.hover,
+    }),
+    ...(style?.root?.color && {
+      [customCssProps.styleColorActive]: style.root.color?.active,
+      [customCssProps.styleColorDefault]: style.root.color?.default,
+      [customCssProps.styleColorDisabled]: style.root.color?.disabled,
+      [customCssProps.styleColorHover]: style.root.color?.hover,
+    }),
+    ...(style?.root?.focusRing && {
+      [customCssProps.styleFocusRingBorderColor]: style.root.focusRing?.borderColor,
+      [customCssProps.styleFocusRingBorderRadius]: style.root.focusRing?.borderRadius,
+      [customCssProps.styleFocusRingBorderWidth]: style.root.focusRing?.borderWidth,
+    }),
+    ...(style?.root?.focusRing?.borderRadius && {
+      [customCssProps.styleFocusRingBorderRadius]: style.root.focusRing.borderRadius,
+    }),
+  };
+}