remove component dependency on neutral color

src/alert/alert.tsx

@@ -5,7 +5,6 @@ import { CSSObject } from 'styled-components'
 import {
     createStyledComponent,
     getThemeCSSObject,
-    isThemeColorName,
     ReactElement,
     ThemeCSSStyles,
     useTheme,
@@ -20,7 +19,7 @@ import {
     DefaultCloseIcon
 } from '../constants/default-icons'
 
-import { attachSignatureToComponent } from '../utils'
+import { attachSignatureToComponent, getColorForComponent } from '../utils'
 import { ALERT } from '../constants/component-ids'
 import { IconButton, IconButtonCommonProps } from '../icon-button'
 import { Typography } from '../typography'
@@ -173,7 +172,7 @@ const AlertRoot = createStyledComponent<'div', AlertProps>(
         const {
             palette: {
                 themeBackground: { light },
-                neutral
+                darkGrey
             },
             elevation,
             themeType,
@@ -221,7 +220,7 @@ const AlertRoot = createStyledComponent<'div', AlertProps>(
 
         return {
             alignSelf: 'flex-start',
-            background: tto(themeType, light.hex, neutral[40]),
+            background: tto(themeType, light.hex, darkGrey[40]),
             borderRadius: '0.25rem',
             boxSizing: 'border-box',
             boxShadow: elevation.low,
@@ -348,19 +347,14 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
 
         const classes = useStyles()
         const theme = useTheme()
-        const { palette, themeType } = theme
-        const {
-            common: { black, white }
-        } = palette
 
         const getMainIcon = (): JSX.Element | null => {
             if (!hasMainIcon) return null
 
-            const fillColor =
-                iconColor ??
-                (isThemeColorName(type)
-                    ? palette[type].main
-                    : tto(themeType, black, white))
+            const fillColor = getColorForComponent({
+                theme,
+                color: iconColor ?? type
+            })
             const iconProps = {
                 height: '24',
                 width: '24',
@@ -399,11 +393,8 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
                         className={cx(classesProps.message)}
                         csx={{
                             root: (theme) => {
-                                const {
-                                    palette: { neutral }
-                                } = theme
                                 return {
-                                    color: neutral[80],
+                                    color: getColorForComponent({ theme }),
                                     marginTop: '0.125rem',
                                     ...getThemeCSSObject(csx.message, theme)
                                 }

src/card-content/card-content.tsx

@@ -6,7 +6,10 @@ import {
     getThemeCSSObject,
     ThemeCSSStyles
 } from '../styles'
-import { attachSignatureToComponent } from '../utils'
+import {
+    attachSignatureToComponent,
+    getNeutralBasicColorForComponent
+} from '../utils'
 import { CARD_CONTENT } from '../constants/component-ids'
 
 export interface CardContentProps
@@ -37,12 +40,16 @@ const CardContentRoot = createStyledComponent<'div', CardContentProps>(
         const { csx = {}, isExtendStyleFromThemeVars = true } = props
         const { themeVars, ...themePropsForThemeVarFn } = theme
         const {
-            typography: { body },
-            palette: { neutral }
+            typography: { body }
         } = themePropsForThemeVarFn
 
+        const _neutral = getNeutralBasicColorForComponent({
+            theme,
+            isOpposite: true
+        })
+
         return {
-            color: neutral[70],
+            color: _neutral[80],
             flex: '1',
             padding: '1.2rem',
             ...body,

src/card-header/card-header.tsx

@@ -4,7 +4,8 @@ import cx from 'clsx'
 import {
     createStyledComponent,
     getThemeCSSObject,
-    ThemeCSSStyles
+    ThemeCSSStyles,
+    themeTernaryOperator as tto
 } from '../styles'
 import { attachSignatureToComponent } from '../utils'
 import { CARD_HEADER } from '../constants/component-ids'
@@ -37,13 +38,16 @@ const CardHeaderRoot = createStyledComponent<'div', CardHeaderProps>(
         const { csx = {}, isExtendStyleFromThemeVars = true } = props
         const { themeVars, ...themePropsForThemeVarFn } = theme
         const {
+            themeType,
             typography: { h4 },
-            palette: { neutral }
+            palette: {
+                common: { black, white }
+            }
         } = themePropsForThemeVarFn
 
         return {
             alignItems: 'center',
-            color: neutral[90],
+            color: tto(themeType, black, white),
             display: 'flex',
             padding: '1rem 1.2rem',
             ...h4,

src/card/card.tsx

@@ -7,7 +7,10 @@ import {
     ThemeCSSStyles,
     themeTernaryOperator as tto
 } from '../styles'
-import { attachSignatureToComponent } from '../utils'
+import {
+    attachSignatureToComponent,
+    getNeutralBasicColorForComponent
+} from '../utils'
 import { CARD } from '../constants/component-ids'
 
 import { CSSObject } from 'styled-components'
@@ -58,19 +61,20 @@ const CardRoot = createStyledComponent<'div', CardProps>(
             elevation,
             themeType,
             palette: {
-                neutral,
                 common: { white }
             }
         } = themePropsForThemeVarFn
 
+        const _neutral = getNeutralBasicColorForComponent({ theme })
+
         const getBoxShadow = (): string | undefined => {
             if (variant === 'none') {
                 return
             }
             if (variant === 'shadow') {
                 return elevation.low
             }
-            return `inset 0 0 0 1px ${neutral[50]}`
+            return `inset 0 0 0 1px ${_neutral[40]}`
         }
 
         const getHoverProperties = (): CSSObject => {
@@ -82,12 +86,12 @@ const CardRoot = createStyledComponent<'div', CardProps>(
             }
 
             return {
-                boxShadow: `inset 0 0 0 2px ${neutral[50]}`
+                boxShadow: `inset 0 0 0 2px ${_neutral[40]}`
             }
         }
 
         return {
-            background: tto(themeType, white, neutral[40]),
+            background: tto(themeType, white, _neutral[30]),
             borderRadius: '0.25rem',
             boxShadow: getBoxShadow(),
             display: 'flex',

src/checkbox/checkbox.tsx

@@ -166,7 +166,7 @@ export const Checkbox = forwardRef<any, CheckboxProps>(
             isDense,
             isLoading,
             variant = 'ghost',
-            color = 'primary',
+            color,
             hasElevation,
             hasHighlightOnFocus,
             hasHoverEffectOnFocus,

src/divider/divider.tsx

@@ -4,10 +4,9 @@ import cx from 'clsx'
 import {
     createStyledComponent,
     getThemeCSSObject,
-    isThemeColorName,
     ThemeCSSStyles
 } from '../styles'
-import { attachSignatureToComponent } from '../utils'
+import { attachSignatureToComponent, getColorForComponent } from '../utils'
 import { DIVIDER } from '../constants/component-ids'
 
 export interface DividerBaseProps
@@ -26,7 +25,6 @@ export interface DividerBaseProps
     borderWidth?: number
     /**
      * Color of the border
-     * @default 'neutral'
      */
     color?: string
     /**
@@ -65,7 +63,6 @@ const DividerRoot = createStyledComponent<'div', DividerProps<'div'>>(
     (theme, props) => {
         const { themeVars, ...themePropsForThemeVarFn } = theme
         const {
-            palette,
             spacing,
             typography: {
                 meta: { documentFontSize }
@@ -76,7 +73,7 @@ const DividerRoot = createStyledComponent<'div', DividerProps<'div'>>(
             csx = {},
             hasFlexParent,
             alignment = 'hr',
-            color = 'neutral',
+            color,
             borderWidth = 1,
             isExtendStyleFromThemeVars = true
         } = props
@@ -91,11 +88,15 @@ const DividerRoot = createStyledComponent<'div', DividerProps<'div'>>(
 
         const getBorder = (): string => {
             const width = `${borderWidth / documentFontSize}rem`
-            let borderColor = color
-
-            if (isThemeColorName(color)) {
-                borderColor = palette[color].main
-            }
+            const borderColor = getColorForComponent({
+                theme,
+                color,
+                isSwitchDefaultColor: true,
+                defaultKey: {
+                    grey: 30,
+                    darkGrey: 40
+                }
+            })
 
             return `${width} solid ${borderColor}`
         }

src/icon-button/icon-button.stories.tsx

@@ -13,7 +13,6 @@ const Template: Story = (args) => <IconButton {...args} />
 export const Default = Template.bind({})
 Default.args = {
     Icon: <SendMail />,
-    color: 'primary',
     isDisabled: false,
     hasHighlightOnFocus: true,
     hasHoverEffectOnFocus: false,

src/inline-alert/inline-alert.tsx

@@ -4,15 +4,14 @@ import { CSSObject } from 'styled-components'
 import {
     createStyledComponent,
     getThemeCSSObject,
-    isThemeColorName,
     themeTernaryOperator as tto,
     Theme
 } from '../styles'
 
 import { Alert, AlertProps } from '../alert'
 import { Collapsible, CollapsibleProps } from '../collapsible'
 
-import { attachSignatureToComponent } from '../utils'
+import { attachSignatureToComponent, getColorForComponent } from '../utils'
 import { INLINE_ALERT } from '../constants/component-ids'
 import { getHoverProperties } from '../button-base/utils'
 
@@ -29,12 +28,11 @@ const InlineAlertRoot = createStyledComponent<typeof Alert, InlineAlertProps>(
     Alert,
     (theme, props) => {
         const { themeVars, ...themePropsForThemeVarFn } = theme
-        const { palette } = themePropsForThemeVarFn
         const {
             csx = {},
             hasFullWidth = true,
             isDense = false,
-            type = 'neutral',
+            type,
             isExtendStyleFromThemeVars
         } = props
 
@@ -46,18 +44,11 @@ const InlineAlertRoot = createStyledComponent<typeof Alert, InlineAlertProps>(
         const getBackgroundColor = (): CSSObject => {
             if (type === 'other') return {}
 
-            let color = ''
-            if (type === 'neutral') color = palette.neutral[80]
-            else {
-                color = isThemeColorName(type) ? palette[type].main : type
-            }
-
             return getHoverProperties({
-                color,
+                color: type,
                 isDisabled: false,
                 variant: 'ghost',
-                theme,
-                mainColor: color
+                theme
             })
         }
 
@@ -86,25 +77,30 @@ export const InlineAlert = forwardRef<HTMLDivElement, InlineAlertProps>(
     (props, ref): JSX.Element => {
         const {
             hasAnimation = false,
-            type = 'neutral',
+            type,
             csx = {},
             containerProps = {},
             isOpen = false,
             ...rest
         } = props
 
         const getColor = (theme: Theme): string => {
-            const { palette, themeType } = theme
-            if (!isThemeColorName(type)) {
-                const {
-                    common: { black, white }
-                } = palette
-                return tto(themeType, black, white)
-            }
+            const _color = getColorForComponent({
+                theme,
+                color: type,
+                isReturnDefaultColor: false
+            })
+
+            if (_color) return _color
 
-            if (type === 'neutral') return palette.neutral[90]
+            const {
+                palette: {
+                    themeType,
+                    common: { white, black }
+                }
+            } = theme
 
-            return palette[type].main
+            return tto(themeType, black, white)
         }
 
         return (