Revert "fix: components visual fixes and improvements with updated to…

…kens (#98)" (#99)

This reverts commit 0d18440.

src/components/Avatar/Avatar.styles.ts

@@ -1,18 +1,11 @@
-import type { AvatarAppearance, AvatarShape, AvatarSize } from './types';
+import type { AvatarAppearance, AvatarShape } from './types';
 
 import type { BaseProps } from '@/types/BaseProps';
 import { Emphasis } from '@/types/Emphasis';
 import { Size } from '@/types/Size';
 
 export type AvatarConfig = {
-  shape?: Partial<
-    Record<
-      AvatarShape,
-      BaseProps & {
-        size?: Partial<Record<AvatarSize, BaseProps>>;
-      }
-    >
-  >;
+  shape?: Partial<Record<AvatarShape, BaseProps>>;
   size?: Partial<Record<Size, BaseProps>>;
   appearance?: Partial<
     Record<
@@ -38,11 +31,7 @@ export const defaultConfig = {
       borderRadius: '$border-radius-full',
     },
     square: {
-      borderRadius: {
-        _: '$border-radius-large',
-        '&[data-size="xSmall"]': '$border-radius-medium',
-        '&[data-size="2xSmall"]': '$border-radius-medium',
-      },
+      borderRadius: '$border-radius-large',
     },
   },
   size: {

src/components/Avatar/Avatar.tsx

@@ -26,14 +26,7 @@ export const Avatar: FC<AvatarProps & MarginProps> = ({
   );
 
   return (
-    <tet.div
-      {...styles.container}
-      data-testid="avatar"
-      data-size={size}
-      // if we have a single letter, we don't want to add letter spacing to better center the letter
-      letterSpacing={initials?.length === 1 ? 'normal' : undefined}
-      {...restProps}
-    >
+    <tet.div {...styles.container} data-testid="avatar" {...restProps}>
       {img ? (
         <tet.img {...styles.image} data-testid="avatar-image" {...img} />
       ) : (

src/components/Button/Button.styles.ts

@@ -1,9 +1,5 @@
-import { LoaderProps } from '../Loader';
-
 import { BaseProps } from '@/types/BaseProps';
 
-type LoaderAppearance = Pick<LoaderProps, 'appearance'>;
-
 export type DefaultButtonConfig = {
   appearance?: {
     primary?: {
@@ -43,37 +39,6 @@ export type DefaultButtonConfig = {
       hasAfterIcon?: BaseProps;
     } & BaseProps;
   };
-  innerElements?: {
-    loader?: {
-      appearance?: {
-        primary?:
-          | LoaderAppearance
-          | {
-              intent?: {
-                none?: LoaderAppearance;
-                success?: LoaderAppearance;
-                destructive?: LoaderAppearance;
-              };
-            };
-        secondary?:
-          | LoaderAppearance
-          | {
-              intent?: {
-                none?: LoaderAppearance;
-                success?: LoaderAppearance;
-                destructive?: LoaderAppearance;
-              };
-            };
-        inverted?:
-          | LoaderAppearance
-          | {
-              intent?: {
-                none?: LoaderAppearance;
-              };
-            };
-      };
-    };
-  };
 } & BaseProps;
 
 export type GhostButtonConfig = {
@@ -118,42 +83,6 @@ export type GhostButtonConfig = {
       hasAfterIcon?: BaseProps;
     } & BaseProps;
   };
-  innerElements?: {
-    loader?: {
-      appearance?: {
-        primary?:
-          | LoaderAppearance
-          | {
-              intent?: {
-                none?: LoaderAppearance;
-                success?: LoaderAppearance;
-                destructive?: LoaderAppearance;
-              };
-            };
-        secondary?:
-          | LoaderAppearance
-          | {
-              intent?: {
-                none?: LoaderAppearance;
-              };
-            };
-        inverted?:
-          | LoaderAppearance
-          | {
-              intent?: {
-                none?: LoaderAppearance;
-              };
-            };
-        reverseInverted?:
-          | LoaderAppearance
-          | {
-              intent?: {
-                none?: LoaderAppearance;
-              };
-            };
-      };
-    };
-  };
 } & BaseProps;
 
 export type BareButtonConfig = {
@@ -193,42 +122,6 @@ export type BareButtonConfig = {
       hasAfterIcon?: BaseProps;
     } & BaseProps;
   };
-  innerElements?: {
-    loader?: {
-      appearance?: {
-        primary?:
-          | LoaderAppearance
-          | {
-              intent?: {
-                none?: LoaderAppearance;
-                success?: LoaderAppearance;
-                destructive?: LoaderAppearance;
-              };
-            };
-        secondary?:
-          | LoaderAppearance
-          | {
-              intent?: {
-                none?: LoaderAppearance;
-              };
-            };
-        inverted?:
-          | LoaderAppearance
-          | {
-              intent?: {
-                none?: LoaderAppearance;
-              };
-            };
-        reverseInverted?:
-          | LoaderAppearance
-          | {
-              intent?: {
-                none?: LoaderAppearance;
-              };
-            };
-      };
-    };
-  };
 } & BaseProps;
 
 const size = {
@@ -285,8 +178,7 @@ const size = {
 
 const commonConfig = {
   display: 'inline-flex',
-  borderRadius: '$border-radius-large',
-  gap: '$space-component-gap-small',
+  gap: '$space-component-gap-xSmall',
   w: 'fit-content',
   justifyContent: 'center',
   alignItems: 'center',
@@ -315,6 +207,7 @@ const commonConfig = {
 
 const defaultButtonConfig = {
   ...commonConfig,
+  borderRadius: '$border-radius-medium',
   boxShadow: '$elevation-bottom-100',
   appearance: {
     primary: {
@@ -407,25 +300,11 @@ const defaultButtonConfig = {
     },
   },
   size,
-  innerElements: {
-    loader: {
-      appearance: {
-        primary: {
-          appearance: 'white',
-        },
-        secondary: {
-          appearance: 'greyscale',
-        },
-        inverted: {
-          appearance: 'greyscale',
-        },
-      },
-    },
-  },
 } satisfies DefaultButtonConfig;
 
 const ghostButtonConfig = {
   ...commonConfig,
+  borderRadius: '$border-radius-large',
   backgroundColor: {
     _: 'transparent',
     hover: '$color-action-ghost-hover',
@@ -505,26 +384,6 @@ const ghostButtonConfig = {
     },
   },
   size,
-  innerElements: {
-    loader: {
-      appearance: {
-        primary: {
-          appearance: 'greyscale',
-          intent: {
-            none: {
-              appearance: 'primary',
-            },
-          },
-        },
-        secondary: {
-          appearance: 'greyscale',
-        },
-        inverted: {
-          appearance: 'greyscale',
-        },
-      },
-    },
-  },
 } satisfies GhostButtonConfig;
 
 const bareButtonConfig = {
@@ -614,26 +473,6 @@ const bareButtonConfig = {
       hasAfterIcon: {},
     },
   },
-  innerElements: {
-    loader: {
-      appearance: {
-        primary: {
-          appearance: 'greyscale',
-          intent: {
-            none: {
-              appearance: 'primary',
-            },
-          },
-        },
-        secondary: {
-          appearance: 'greyscale',
-        },
-        inverted: {
-          appearance: 'greyscale',
-        },
-      },
-    },
-  },
 } satisfies BareButtonConfig;
 
 export type ButtonConfig = {

src/components/Button/Button.tsx

@@ -57,13 +57,13 @@ export const Button: FC<ButtonProps & MarginProps> = ({
     <tet.button
       data-testid="button"
       {...styles.container}
-      disabled={state ? ['disabled', 'loading'].includes(state) : false}
+      disabled={['disabled', 'loading'].includes(state ?? '')}
       data-state={state}
       style={{ textUnderlineOffset: '3px', textDecorationThickness: '1px' }}
       {...rest}
     >
       {state === 'loading' && (
-        <Loader {...styles.loader} size="small" shape="circle" />
+        <Loader appearance="greyscale" size="small" shape="circle" />
       )}
       {beforeIcon && state !== 'loading' && <Icon name={beforeIcon} />}
       {children}

src/components/Button/stylesBuilder/stylesBuilder.test.ts

@@ -23,11 +23,11 @@ describe('stylesBuilder', () => {
           loading: '$color-action-primary-loading',
           selected: '$color-action-primary-selected',
         },
-        borderRadius: '$border-radius-large',
+        borderRadius: '$border-radius-medium',
         boxShadow: '$elevation-bottom-100',
         color: '$color-action-inverted-normal',
         display: 'inline-flex',
-        gap: '$space-component-gap-small',
+        gap: '$space-component-gap-xSmall',
         justifyContent: 'center',
         opacity: {
           disabled: '$opacity-disabled',
@@ -56,9 +56,6 @@ describe('stylesBuilder', () => {
         w: 'fit-content',
         whiteSpace: 'nowrap',
       },
-      loader: {
-        appearance: 'white',
-      },
     });
   });
 });

src/components/Button/stylesBuilder/stylesBuilder.ts

@@ -1,4 +1,3 @@
-import { LoaderProps } from '../../Loader';
 import { ButtonProps } from '../Button.props';
 import { defaultConfig } from '../Button.styles';
 
@@ -18,32 +17,6 @@ type ButtonStylesBulderInput = {
 
 type ButtonStylesBuilder = {
   container: BaseProps;
-  loader: Pick<LoaderProps, 'appearance'>;
-};
-
-const getLoaderProps = (
-  loader: object,
-  props: Pick<ButtonStylesBulderInput, 'appearance' | 'intent'>,
-) => {
-  let loaderProps: Pick<LoaderProps, 'appearance'> = {};
-
-  if (!('appearance' in loader)) return loader;
-
-  const loaderAppearance =
-    loader?.appearance?.[props.appearance as keyof typeof loader.appearance];
-
-  if (loaderAppearance) {
-    if ('intent' in loaderAppearance) {
-      const { intent: loaderIntent } = loaderAppearance;
-
-      loaderProps =
-        loaderIntent?.[props.intent as keyof typeof loaderIntent] || {};
-    } else {
-      loaderProps = loaderAppearance;
-    }
-  }
-
-  return loaderProps;
 };
 
 export const stylesBuilder = (
@@ -53,13 +26,7 @@ export const stylesBuilder = (
     defaultConfig,
     custom: props.custom,
   });
-
-  const {
-    appearance,
-    size,
-    innerElements: { loader },
-    ...container
-  } = variants[props.variant];
+  const { appearance, size, ...container } = variants[props.variant];
 
   const { hasDropdownIndicator, hasBeforeIcon, hasAfterIcon, ...sizeStyles } =
     fallbackKey(
@@ -101,9 +68,5 @@ export const stylesBuilder = (
       ...appearanceStyles,
       ...intentStyles,
     },
-    loader: getLoaderProps(loader, {
-      appearance: props.appearance,
-      intent: props.intent,
-    }),
   };
 };

src/components/Checkbox/Checkbox.styles.ts

@@ -63,7 +63,6 @@ export const defaultConfig = {
         alert: {
           _: '$color-interaction-border-alert',
           hover: '$color-interaction-border-alert',
-          checked: '$color-interaction-ghost-normal',
         },
         indeterminate: 'transparent',
       },