diff --git a/components/src/components/atoms/Heading/Heading.tsx b/components/src/components/atoms/Heading/Heading.tsx index a9593166..550f1012 100644 --- a/components/src/components/atoms/Heading/Heading.tsx +++ b/components/src/components/atoms/Heading/Heading.tsx @@ -1,17 +1,16 @@ import * as React from 'react' -import type { WithColor } from '@/src/interfaces/withColor' - import type { BoxProps } from '../Box/Box' import { Box } from '../Box/Box' import clsx from 'clsx' import * as styles from './Heading.css' +import type { Color } from '@/src/tokens/color' interface HeadingContainerProps { textAlign?: React.CSSProperties['textAlign'] textTransform: React.CSSProperties['textTransform'] $level: '1' | '2' - $color: NonNullable + $color: NonNullable } const ContainerBox = React.forwardRef< @@ -47,7 +46,8 @@ export type HeadingProps = { /** CSS property of text-transform */ transform?: React.CSSProperties['textTransform'] level?: '1' | '2' -} & WithColor & + color: Color +} & Omit export const Heading = React.forwardRef( diff --git a/components/src/components/atoms/Spinner/Spinner.tsx b/components/src/components/atoms/Spinner/Spinner.tsx index cd6e408a..f995be9d 100644 --- a/components/src/components/atoms/Spinner/Spinner.tsx +++ b/components/src/components/atoms/Spinner/Spinner.tsx @@ -4,8 +4,8 @@ import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden' import * as styles from './styles.css' import type { BoxProps } from '../Box/Box' import { Box } from '../Box/Box' -import type { Color } from '@/src/interfaces/withColor' import { clsx } from 'clsx' +import type { Color } from '@/src/tokens/color' type Size = 'small' | 'medium' | 'large' diff --git a/components/src/components/atoms/Typography/Typography.tsx b/components/src/components/atoms/Typography/Typography.tsx index f9c8f4a9..bde6314a 100644 --- a/components/src/components/atoms/Typography/Typography.tsx +++ b/components/src/components/atoms/Typography/Typography.tsx @@ -2,20 +2,19 @@ import * as React from 'react' import type { Font, FontSize, FontWeight } from '@/src/tokens/typography' -import type { Color, WithColor } from '@/src/interfaces/withColor' - import { removeNullishProps } from '@/src/utils/removeNullishProps' import { Box, type BoxProps } from '../Box/Box' import type { FontVariant } from './utils/variant.css' import { fontVariant } from './utils/variant.css' import clsx from 'clsx' +import type { Color } from '@/src/tokens/color' type ContainerProps = { $ellipsis?: boolean $fontVariant: FontVariant $size?: FontSize - $color: Color + $color?: Color $weight?: FontWeight $font: Font } @@ -65,10 +64,9 @@ export type TypographyProps = { font?: Font /** A weight value that overrides existing weight property */ weight?: FontWeight - + color?: Color fontVariant?: FontVariant } & Omit & -WithColor & Omit & { fontVariant?: FontVariant } export const Typography = React.forwardRef( diff --git a/components/src/components/molecules/Dropdown/Dropdown.tsx b/components/src/components/molecules/Dropdown/Dropdown.tsx index 0c57c0f9..76ad1458 100644 --- a/components/src/components/molecules/Dropdown/Dropdown.tsx +++ b/components/src/components/molecules/Dropdown/Dropdown.tsx @@ -20,8 +20,8 @@ import { DownChevronSVG } from '@/src/icons' import { ScrollBox } from '../../atoms/ScrollBox/ScrollBox' import * as styles from './styles.css' import { clsx } from 'clsx' -import type { Color } from '@/src/interfaces/withColor' import { assignInlineVars } from '@vanilla-extract/dynamic' +import type { Color } from '@/src/tokens/color' type Align = 'left' | 'right' type LabelAlign = 'flex-start' | 'flex-end' | 'center' diff --git a/components/src/css/sprinkles.css.ts b/components/src/css/sprinkles.css.ts index 1b1deb52..85a73f70 100644 --- a/components/src/css/sprinkles.css.ts +++ b/components/src/css/sprinkles.css.ts @@ -2,8 +2,6 @@ import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles' import { commonVars, modeVars } from './theme.css' -const colorPropertiesObject = { ...modeVars.color, inherit: 'inherit', initial: 'initial', unset: 'unset', transparent: 'transparent', currentColor: 'currentColor', none: 'none' } - const colorProperties = defineProperties({ conditions: { base: {}, @@ -16,16 +14,16 @@ const colorProperties = defineProperties({ }, defaultCondition: 'base', properties: { - color: colorPropertiesObject, - fill: colorPropertiesObject, - stroke: colorPropertiesObject, - background: colorPropertiesObject, - backgroundColor: colorPropertiesObject, - borderColor: colorPropertiesObject, - borderBottomColor: colorPropertiesObject, - borderTopColor: colorPropertiesObject, - borderLeftColor: colorPropertiesObject, - borderRightColor: colorPropertiesObject, + color: modeVars.color, + fill: modeVars.color, + stroke: modeVars.color, + background: modeVars.color, + backgroundColor: modeVars.color, + borderColor: modeVars.color, + borderBottomColor: modeVars.color, + borderTopColor: modeVars.color, + borderLeftColor: modeVars.color, + borderRightColor: modeVars.color, opacity: ['0', '1', '0.5', '0.7', '0.9', '0.95', '1', 'inherit', 'initial'], }, diff --git a/components/src/interfaces/withColor.ts b/components/src/interfaces/withColor.ts deleted file mode 100644 index 239c109e..00000000 --- a/components/src/interfaces/withColor.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type { - AdditionalColor, - PaletteColor, - Hue } from '@/src/tokens/color' -import { - ADDITIONAL_COLORS, - PALETTE_COLORS, - PRIMARY_COLORS, -} from '@/src/tokens/color' - -export type Color = Hue | PaletteColor | AdditionalColor | 'inherit' | 'initial' | 'unset' - -export type WithColor = { color?: Color } - -const COLORS = [...PRIMARY_COLORS, ...PALETTE_COLORS, ...ADDITIONAL_COLORS, 'inherit', 'initial', 'unset'] as const - -export const validateColor = (color: unknown, fallback = 'unset') => { - if (!color) return fallback - if (COLORS.includes(color as Color)) return `$${color}` - return fallback -} diff --git a/components/src/tokens/color.ts b/components/src/tokens/color.ts index defce529..4fffd04e 100644 --- a/components/src/tokens/color.ts +++ b/components/src/tokens/color.ts @@ -347,18 +347,31 @@ const GRADIENT_MAP: { [key in Gradient]: string } = { 'linear-gradient(330.4deg, #DFDFDF 4.54%, #959595 59.2%, #474747 148.85%)', } -export type Color = PaletteColor | AdditionalColor | Gradient +const STATIC_VALUES = { + inherit: 'inherit', + initial: 'initial', + unset: 'unset', + transparent: 'transparent', + currentColor: 'currentColor', + none: 'none', +} + +type StaticValue = keyof typeof STATIC_VALUES + +export type Color = PaletteColor | AdditionalColor | Gradient | StaticValue export const lightColors: { [key in Color]: string } = { ...RAW_PALETTE_COLORS_LIGHT, ...RAW_ADDITIONAL_COLORS_LIGHT, ...GRADIENT_MAP, + ...STATIC_VALUES, } export const darkColors: { [key in Color]: string } = { ...RAW_PALETTE_COLORS_LIGHT, ...RAW_ADDITIONAL_COLORS_DARK, ...GRADIENT_MAP, + ...STATIC_VALUES, } export const colors = { diff --git a/components/src/utils/removeNullishProps.ts b/components/src/utils/removeNullishProps.ts index b6a8f7a4..c4b2dd5f 100644 --- a/components/src/utils/removeNullishProps.ts +++ b/components/src/utils/removeNullishProps.ts @@ -1,6 +1,6 @@ import type { BoxProps } from '../components/atoms/Box/Box' -export const removeNullishProps = (props: BoxProps): object => { +export const removeNullishProps = (props: BoxProps): BoxProps => { const keys = Object.keys(props) as (keyof BoxProps)[] return keys.reduce( (acc, cur) => (props[cur] ? { ...acc, [cur]: props[cur] } : acc),