feat(bezier-react): update color prop type to support alpha color tokens

channel-io · Jan 7, 2025 · 0bfc318 · 0bfc318
1 parent bcbc99f
commit 0bfc318
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 13 deletions.
diff --git a/packages/bezier-react/src/components/Text/Text.types.ts b/packages/bezier-react/src/components/Text/Text.types.ts
@@ -1,10 +1,10 @@
 import {
   type BezierComponentProps,
   type ChildrenProps,
+  type ColorProps,
   type MarginProps,
   type PolymorphicProps,
 } from '~/src/types/props'
-import { type SemanticColor } from '~/src/types/tokens'
 
 type Typography =
   | '11'
@@ -28,10 +28,6 @@ interface TextOwnProps {
    * @default '15'
    */
   typo?: Typography
-  /**
-   * Color of the text. If no value is specified, it inherits the color of the parent element.
-   */
-  color?: SemanticColor
   /**
    * Whether the text is bold.
    * @default false
@@ -55,8 +51,9 @@ interface TextOwnProps {
 }
 
 export interface TextProps
-  extends Omit<BezierComponentProps, keyof TextOwnProps>,
+  extends Omit<BezierComponentProps, keyof TextOwnProps | keyof ColorProps>,
     PolymorphicProps,
     ChildrenProps,
+    ColorProps,
     MarginProps,
     TextOwnProps {}
diff --git a/packages/bezier-react/src/types/props.ts b/packages/bezier-react/src/types/props.ts
@@ -1,6 +1,6 @@
 import type { JSX } from 'react'
 
-import { type FunctionalAndSemanticColor } from './alpha-tokens'
+import { type FunctionalAndSemanticColor as AlphaFunctionalAndSemanticColor } from './alpha-tokens'
 import type {
   BackgroundSemanticColor,
   BackgroundTextSemanticColor,
@@ -11,7 +11,9 @@ import type {
   ZIndex,
 } from './tokens'
 
-type LegacyAndAlphaSemanticColor = SemanticColor | FunctionalAndSemanticColor
+type LegacyAndAlphaSemanticColor =
+  | SemanticColor
+  | AlphaFunctionalAndSemanticColor
 
 /**
  * Props for overriding default styles of components. Intended for exceptional use cases where default styles need customization.

diff --git a/packages/bezier-react/src/utils/style.ts b/packages/bezier-react/src/utils/style.ts
@@ -1,6 +1,6 @@
 import {
-  type Color,
-  type FunctionalAndSemanticColor,
+  type Color as AlphaColor,
+  type FunctionalAndSemanticColor as AlphaFunctionalAndSemanticColor,
 } from '~/src/types/alpha-tokens'
 import {
   type FlattenAllToken,
@@ -63,7 +63,7 @@ export const tokenCssVar = cssVar as <
  * NOTE: (@ed) Converts a legacy color token to alpha color token.
  * **Should be removed after the migration is complete.**
  */
-function alphaColorTokenCssVar<ColorToken extends Color | undefined>(
+function alphaColorTokenCssVar<ColorToken extends AlphaColor | undefined>(
   colorToken: ColorToken
 ) {
   return !isNil(colorToken)
@@ -76,7 +76,7 @@ function alphaColorTokenCssVar<ColorToken extends Color | undefined>(
  * **Should be removed after the migration is complete.**
  */
 export function colorTokenCssVar<
-  ColorToken extends GlobalColor | SemanticColor | undefined,
+  ColorToken extends GlobalColor | SemanticColor | AlphaColor | undefined,
 >(colorToken: ColorToken) {
   return alphaColorTokenCssVar(
     legacyToAlphaColorTokenMap[
@@ -177,7 +177,7 @@ const legacyToAlphaColorTokenMap = Object.freeze({
   'shdw-medium': 'shadow-medium',
   'shdw-large': 'shadow-large',
   'shdw-xlarge': 'shadow-xlarge',
-}) satisfies Partial<Record<SemanticColor, FunctionalAndSemanticColor>>
+}) satisfies Partial<Record<SemanticColor, AlphaFunctionalAndSemanticColor>>
 
 /**
  * Formats a given URL string into a CSS `url()` function format.