color-functions

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

darken function - brightness manipulation

The darken function from @mantine/core reduces color brightness. It accepts a color in any format as the first argument and the amount of lightness to remove as the second argument (a decimal representing percentage). Example: darken('rgb(245, 159, 0)', 0.5) darkens by 50% and returns rgba(123, 80, 0, 1). When used with CSS variables like darken('var(--mantine-color-gray-4)', 0.5), it returns a color-mix expression.

lighten function - brightness manipulation

The lighten function from @mantine/core increases color brightness. It accepts a color in any format as the first argument and the amount of lightness to add as the second argument (a decimal representing percentage). Example: lighten('#228BE6', 0.1) lightens by 10% and returns rgba(56, 151, 233, 1). When used with CSS variables like lighten('var(--mantine-color-gray-4)', 0.74), it returns a color-mix expression.

alpha function - color transparency

The alpha function from @mantine/core converts a color to rgba format with a given alpha channel. It accepts a color and an alpha value (0-1). For colors that can be converted to rgba, it returns rgba format. For colors that cannot be converted (like CSS variables), it uses color-mix instead. Example: alpha('#4578FC', 0.45) returns rgba(69, 120, 252, 0.45), while alpha('var(--mantine-color-gray-4)', 0.74) returns color-mix(in srgb, var(--mantine-color-gray-4), transparent 26%). Note that color-mix is not supported in some older browsers.

parseThemeColor function - parse color information

The parseThemeColor function from @mantine/core returns a ParseThemeColorResult object with properties: isThemeColor (boolean indicating if the color is a theme color like 'blue' or 'orange.9'), color (key of theme.colors for theme colors), value (resolved color value), shade (MantineColorShade index like 7 for 'blue.7', or undefined), and variable (CSS variable name like '--mantine-color-blue-7', or undefined for non-theme colors). It requires a theme object and is available in CSS variables resolver, variant color resolver, or component body.

getThemeColor function - simpler color parsing

The getThemeColor function from @mantine/core is a simpler version of parseThemeColor. It accepts a color string as the first argument and a theme object as the second argument, and returns the parsed color value or CSS variable. Examples: getThemeColor('blue', theme) returns var(--mantine-color-blue-filled), getThemeColor('blue.7', theme) returns var(--mantine-color-blue-7), getThemeColor('white', theme) returns var(--mantine-color-white), and getThemeColor('#DF78E4', theme) returns #DF78E4.

getGradient function - transform gradient object to CSS

The getGradient function from @mantine/core transforms a MantineGradient object to a CSS gradient string. It accepts a gradient object with properties like deg (degrees) and color properties (from, to), plus a theme object. Example: getGradient({ deg: 180, from: 'blue', to: 'cyan.7' }, theme) returns the string 'linear-gradient(180deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-7) 100%)'.

isLightColor function - check color brightness

The isLightColor function from @mantine/core determines if a color is light. It accepts a color string and returns a boolean. This is useful for achieving better contrast between text and background by conditionally setting text color to black or white based on the background color.

luminance function - calculate color luminance

The luminance function from @mantine/core returns the color luminance as a number. It accepts a color string and returns a value between 0 and 1, where 1 is fully bright and 0 is fully dark. Examples: luminance('#fff') returns 1, luminance('#000') returns 0, and luminance('#4578FC') returns 0.21726425554966. This can be used to check color contrast.

parseThemeColor example usage

Example of parseThemeColor usage with useMantineTheme hook: import { MantineColor, parseThemeColor, useMantineTheme } from '@mantine/core'; interface DemoProps { color: MantineColor; } function Demo({ color }: DemoProps) { const theme = useMantineTheme(); const parsedColor = parseThemeColor({ color, theme }); return ( <div style={{ backgroundColor: parsedColor.isThemeColor ? `var(${parsedColor.variable})` : parsedColor.value, }} /> ); }

isLightColor example usage

Example of isLightColor usage for text contrast: import { Box, isLightColor } from '@mantine/core'; interface DemoProps { color: string; } export function Demo({ color }: DemoProps) { return ( <Box bg={color} c={isLightColor(color) ? 'black' : 'white'}> Box with contrast text </Box> ); }

Give your agent this brain