remove withColor

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<WithColor['color']>
+  $color: NonNullable<Color>
 }
 
 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<NativeDivAttributes, 'color'>
 
 export const Heading = React.forwardRef<HTMLHeadingElement | HTMLLegendElement, HeadingProps>(

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'
 

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<NativeDivProps, 'color' | 'as' | 'translate'> &
-WithColor &
 Omit<BoxProps, 'color'> & { fontVariant?: FontVariant }
 
 export const Typography = React.forwardRef<HTMLElement, TypographyProps>(

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'

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'],
 
   },

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 = {

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<BoxProps>(
     (acc, cur) => (props[cur] ? { ...acc, [cur]: props[cur] } : acc),