diff --git a/packages/bezier-react/src/components/Text/Text.types.ts b/packages/bezier-react/src/components/Text/Text.types.ts index 0634e0be6..bffc62046 100644 --- 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, + extends Omit, PolymorphicProps, ChildrenProps, + ColorProps, MarginProps, TextOwnProps {} diff --git a/packages/bezier-react/src/types/props.ts b/packages/bezier-react/src/types/props.ts index e65f5ff5b..a8dcb7248 100644 --- 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 index ee066ce0d..15a3614dc 100644 --- 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( +function alphaColorTokenCssVar( colorToken: ColorToken ) { return !isNil(colorToken) @@ -76,7 +76,7 @@ function alphaColorTokenCssVar( * **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> +}) satisfies Partial> /** * Formats a given URL string into a CSS `url()` function format.