UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

40 lines (39 loc) 1.96 kB
import { useTheme } from '@workday/canvas-kit-react/common'; import { colors } from '@workday/canvas-kit-react/tokens'; import chroma from 'chroma-js'; const isAccessible = (foreground, background) => { return chroma.contrast(foreground, background) >= 3; }; const getPaletteColorsFromTheme = (palette, fallbackColors) => { return { hover: palette.dark, normal: palette.main, contrast: isAccessible(palette.contrast, palette.main) ? palette.contrast : fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.contrast, }; }; /** * @deprecated ⚠️ `getPaletteColors` is deprecated. Use CSS variables from `@workday/canvas-tokens-web` instead. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14). */ export const getPaletteColors = (type, theme) => { const palette = theme.canvas.palette[type]; switch (type) { case 'error': { return getPaletteColorsFromTheme(palette, { contrast: colors.frenchVanilla100 }); } case 'alert': { return getPaletteColorsFromTheme(palette, { contrast: colors.blackPepper400 }); } default: { return getPaletteColorsFromTheme(palette); } } }; /** * @deprecated ⚠️ `useThemedPalette` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14). */ export const useThemedPalette = (type) => { const theme = useTheme(); return getPaletteColors(type, theme); };