chore: update types

Author: snitin315

packages/blade/src/components/Chip/Chip.tsx

@@ -197,12 +197,7 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
                     <Icon color={chipIconColor} size={chipIconSizes[_size]} />
                   </BaseBox>
                 ) : null}
-                <Text
-                  {...chipTextSizes[_size]}
-                  type="normal"
-                  truncateAfterLines={1}
-                  color={chipTextColor}
-                >
+                <Text {...chipTextSizes[_size]} truncateAfterLines={1} color={chipTextColor}>
                   {children}
                 </Text>
               </StyledChipWrapper>

packages/blade/src/components/Chip/chipTokens.ts

@@ -1,6 +1,6 @@
 import type { ChipGroupProps } from './ChipGroup';
-import type { Theme } from '~components/BladeProvider';
-import type { DotNotationColorStringToken, DotNotationSpacingStringToken } from '~utils/types';
+import type { ChipBorderColors, ChipBackgroundColors } from './types';
+import type { DotNotationSpacingStringToken } from '~utils/types';
 import type { SelectorInputHoverTokens } from '~components/Form/Selector/types';
 import { size } from '~tokens/global';
 import type { IconProps } from '~components/Icons';
@@ -74,45 +74,13 @@ const chipHorizontalPaddingTokens: ChipHorizontalPaddingTokens = {
   },
 };
 
-type InteractiveBackgroundColors<
-  T extends 'positive' | 'negative' | 'primary'
-> = `interactive.background.${T}.${DotNotationColorStringToken<
-  Theme['colors']['interactive']['background'][T]
->}`;
-
-type InteractiveBorderColors<
-  T extends 'positive' | 'negative' | 'primary'
-> = `interactive.border.${T}.${DotNotationColorStringToken<
-  Theme['colors']['interactive']['background'][T]
->}`;
-
 type TextColorTokens = BaseTextProps['color'];
 type IconColorTokens = IconProps['color'];
 type ChipColorTokens = {
   text: Record<string, TextColorTokens>;
-  icon: Record<string, IconColorTokens | 'surface.background.primary.intense'>;
-  background: Record<
-    string,
-    Record<
-      string,
-      | InteractiveBackgroundColors<'positive'>
-      | InteractiveBackgroundColors<'negative'>
-      | InteractiveBackgroundColors<'primary'>
-      | 'transparent'
-      | 'interactive.background.gray.faded'
-    >
-  >;
-  border: Record<
-    string,
-    Record<
-      string,
-      | InteractiveBorderColors<'positive'>
-      | InteractiveBorderColors<'negative'>
-      | InteractiveBorderColors<'primary'>
-      | 'interactive.border.gray.default'
-      | 'interactive.border.gray.disabled'
-    >
-  >;
+  icon: Record<string, IconColorTokens>;
+  background: Record<string, Record<string, ChipBackgroundColors>>;
+  border: Record<string, Record<string, ChipBorderColors>>;
 };
 
 const chipColorTokens: ChipColorTokens = {
@@ -124,8 +92,8 @@ const chipColorTokens: ChipColorTokens = {
     negative: 'interactive.text.negative.subtle',
   },
   icon: {
-    unchecked: 'interactive.text.gray.subtle',
-    disabled: 'interactive.text.gray.disabled',
+    unchecked: 'interactive.icon.gray.subtle',
+    disabled: 'interactive.icon.gray.disabled',
     primary: 'interactive.icon.primary.normal',
     positive: 'feedback.icon.positive.intense',
     negative: 'feedback.icon.negative.intense',
@@ -179,8 +147,8 @@ const getChipInputHoverTokens = (color: ChipGroupProps['color']): SelectorInputH
   return {
     default: {
       background: {
-        checked: 'transparent',
-        unchecked: 'transparent',
+        checked: 'colors.surface.background.gray.intense',
+        unchecked: 'colors.surface.background.gray.intense',
       },
       border: {
         checked: `colors.${chipColorTokens.border[color || 'default'].hover}` as never,
@@ -216,7 +184,10 @@ const chipTextSizes = {
   },
 } as const;
 
-const chipMotionTokens = {
+const chipMotionTokens: Record<
+  'duration' | 'easing',
+  'motion.duration.xquick' | 'motion.easing.standard.effective'
+> = {
   duration: 'motion.duration.xquick',
   easing: 'motion.easing.standard.effective',
 };

packages/blade/src/components/Chip/types.ts

@@ -1,7 +1,8 @@
 import type { StyledPropsBlade } from '~components/Box/styledProps';
 import type { Theme } from '~components/BladeProvider';
 import type { IconComponent } from '~components/Icons';
-import type { DotNotationColorStringToken, StringChildrenType, TestID } from '~utils/types';
+import type { StringChildrenType, TestID } from '~utils/types';
+import type { DotNotationToken } from '~utils/lodashButBetter/get';
 
 type ChipProps = {
   /**
@@ -106,8 +107,32 @@ type ChipGroupContextType = Pick<
   'isDisabled' | 'name' | 'defaultValue' | 'value' | 'onChange' | 'size' | 'color' | 'selectionType'
 > & { state?: State };
 
+type InteractiveBackgroundColors<
+  T extends 'positive' | 'negative' | 'primary'
+> = `interactive.background.${T}.${DotNotationToken<
+  Theme['colors']['interactive']['background'][T]
+>}`;
+
+type InteractiveBorderColors<
+  T extends 'positive' | 'negative' | 'primary'
+> = `interactive.border.${T}.${DotNotationToken<Theme['colors']['interactive']['border'][T]>}`;
+
+type ChipBackgroundColors =
+  | InteractiveBackgroundColors<'positive'>
+  | InteractiveBackgroundColors<'negative'>
+  | InteractiveBackgroundColors<'primary'>
+  | 'transparent'
+  | 'interactive.background.gray.faded';
+
+type ChipBorderColors =
+  | InteractiveBorderColors<'positive'>
+  | InteractiveBorderColors<'negative'>
+  | InteractiveBorderColors<'primary'>
+  | 'interactive.border.gray.default'
+  | 'interactive.border.gray.disabled';
+
 type AnimatedChipProps = {
-  borderColor: DotNotationColorStringToken<Theme['colors']>;
+  borderColor: ChipBorderColors;
   isPressed?: boolean;
   isDisabled?: boolean;
   isDesktop?: boolean;
@@ -117,7 +142,7 @@ type AnimatedChipProps = {
 
 type StyledChipWrapperProps = {
   color: ChipGroupProps['color'];
-  borderColor: DotNotationColorStringToken<Theme['colors']>;
+  borderColor: ChipBorderColors;
   isChecked?: boolean;
   isDisabled?: boolean;
   theme: Theme;
@@ -131,4 +156,6 @@ export type {
   ChipProps,
   State,
   StyledChipWrapperProps,
+  ChipBorderColors,
+  ChipBackgroundColors,
 };