refactor: BaseProps type is genric now to exclude some style prop key…

src/components/AlertBanner/stylesBuilder/stylesBuilder.ts

@@ -11,7 +11,7 @@ type AlertBannerStylesBuilder = {
   container: BaseProps;
   iconContainer: BaseProps;
   actionContainer: BaseProps;
-  closeButton: BaseProps;
+  closeButton: BaseProps<'appearance'>;
   actionProps: Partial<BareButtonProps>;
   closeButtonProps: Partial<GhostIconButtonProps>;
 };

src/components/Avatar/Avatar.styles.ts

@@ -25,7 +25,7 @@ export type AvatarConfig = {
   innerElements?: {
     image?: BaseProps;
   };
-} & BaseProps;
+} & BaseProps<'appearance'>;
 
 export const defaultConfig = {
   overflow: 'hidden',

src/components/Badge/Badge.styles.ts

@@ -21,7 +21,7 @@ export type BadgeConfig = {
     label?: BaseProps;
     iconContainer?: BaseProps;
   };
-} & BaseProps;
+} & BaseProps<'appearance'>;
 
 export const defaultConfig = {
   display: 'flex',

src/components/Button/Button.styles.ts

@@ -74,7 +74,7 @@ export type DefaultButtonConfig = {
       };
     };
   };
-} & BaseProps;
+} & BaseProps<'appearance'>;
 
 export type GhostButtonConfig = {
   appearance?: {
@@ -154,7 +154,7 @@ export type GhostButtonConfig = {
       };
     };
   };
-} & BaseProps;
+} & BaseProps<'appearance'>;
 
 export type BareButtonConfig = {
   appearance?: {
@@ -229,7 +229,7 @@ export type BareButtonConfig = {
       };
     };
   };
-} & BaseProps;
+} & BaseProps<'appearance'>;
 
 const size = {
   small: {

src/components/Counter/Counter.styles.ts

@@ -12,7 +12,7 @@ export type CounterConfig = {
       }
     >
   >;
-} & BaseProps;
+} & BaseProps<'appearance'>;
 
 export const defaultConfig = {
   display: 'inline-flex',

src/components/InlineBanner/stylesBuilder/stylesBuilder.ts

@@ -18,7 +18,7 @@ type InlineBannerStylesBuilder = {
   actionContainer: BaseProps;
   description: BaseProps;
   title: BaseProps;
-  closeButton: BaseProps;
+  closeButton: BaseProps<'appearance'>;
 };
 
 export const stylesBuilder = ({

src/components/Label/stylesBuilder/stylesBuilder.ts

@@ -8,7 +8,7 @@ type LabelStylesBuilder = {
   label: BaseProps;
   optional: BaseProps;
   tooltip: BaseProps;
-  action: BaseProps;
+  action: BaseProps<'appearance'>;
 };
 
 export const stylesBuilder = (

src/components/Loader/Loader.styles.ts

@@ -6,8 +6,8 @@ import type { LoaderAppearance, LoaderShape, LoaderSize } from './types';
 import { Theme } from '@/theme';
 import { BaseProps } from '@/types/BaseProps';
 
-export type SVGProps = Omit<
-  BaseProps,
+export type SVGProps = BaseProps<
+  | 'appearance'
   | 'opacity'
   | 'display'
   | 'order'

src/components/SocialButton/SocialButton.styles.ts

@@ -2,7 +2,7 @@ import { BaseProps } from '@/types/BaseProps';
 
 export type SocialButtonAppearance = 'primary' | 'secondary';
 
-export type SocialButtonConfig = BaseProps & {
+export type SocialButtonConfig = BaseProps<'appearance'> & {
   appearance?: Partial<Record<SocialButtonAppearance, BaseProps>>;
 };
 

src/components/StatusDot/StatusDot.styles.ts

@@ -5,7 +5,7 @@ import type { BaseProps } from '@/types/BaseProps';
 export type StatusDotConfig = {
   appearance?: Partial<Record<StatusDotAppearance, BaseProps>>;
   hasStroke?: BaseProps;
-} & BaseProps;
+} & BaseProps<'appearance'>;
 
 export const defaultConfig = {
   w: '12px',

src/components/Tag/stylesBuilder/stylesBuilder.ts

@@ -7,8 +7,8 @@ import type { BaseProps } from '@/types/BaseProps';
 type TagStylesBuilder = {
   container: BaseProps;
   label: BaseProps;
-  avatar: BaseProps;
-  closeButton: BaseProps;
+  avatar: BaseProps<'appearance'>;
+  closeButton: BaseProps<'appearance'>;
 };
 export const stylesBuilder = (
   custom: TagProps['custom'],

src/components/TextInput/stylesBuilder/stylesBuilder.ts

@@ -8,7 +8,7 @@ type TextInputStylesBuilder = {
   input: BaseProps;
   icon: BaseProps;
   text: BaseProps;
-  clearButton: BaseProps;
+  clearButton: BaseProps<'appearance'>;
   beforeComponent: BaseProps;
   afterComponent: BaseProps;
 };

src/components/Toast/stylesBuilder/stylesBuilder.ts

@@ -12,7 +12,7 @@ type StylesBuilderProps = Required<Pick<ToastProps, 'emphasis' | 'intent'>> & {
 type ToastStylesBuilder = {
   container: BaseProps;
   actionContainer: BaseProps;
-  closeButton: BaseProps;
+  closeButton: BaseProps<'appearance'>;
   iconContainer: BaseProps;
   middleDot: BaseProps;
 };

src/types/BaseProps.ts

@@ -2,4 +2,15 @@ import { SystemProps } from '@xstyled/styled-components';
 
 import { Theme } from '@/theme';
 
-export type BaseProps = Omit<SystemProps<Theme>, 'appearance'>;
+type TetrislySystemProps = SystemProps<Theme>;
+
+/**
+ * A utility type that allows you to pick all style properties from a TetrislySystemProps type except for a specified set of keys.
+ * @template K - The union of keys to exclude from the resulting type, for instance 'appearance' | 'size' | 'background.
+ * @template TetrislySystemProps - The type to pick properties from.
+ * @returns A new type that includes all properties from `TetrislySystemProps` except for those specified in `K`.
+ */
+export type BaseProps<K extends keyof TetrislySystemProps = never> = Pick<
+  TetrislySystemProps,
+  Exclude<keyof TetrislySystemProps, K>
+>;