UseColors

Last updated: 2.7.0 (16/06/2024)

This hook forms part of the Color utility system. For more information about how this system works, see Color.

useColors is a hook that allows the usage of Valence colors in any component. All components must be a child of the ValenceProvider to function correctly.

Usage

import { useColors, Button } from "@valence-ui/core";
import { CSSProperties } from "react";

function MyComponent() { 
    const { getHex } = useColors();

    const buttonStyle: CSSProperties = { 
        color: getHex("blue", "weak"),
    }
    
    return ( 
        <Button
            style={buttonStyle}
        >
            I'm a button!
        </Button>
    )
}

Return type

Attribute	Type	Description
getSwatch	(key: string | undefined): Swatch | undefined	Gets the swatch for the given color key. If the color does not exist, this will return undefined.
getHex	(key: string | undefined, opacity?: SwatchOpacity): string | undefined	Gets the hex code for the given color key. If the color does not exist, this will return the key as-is.
getBgHex	(key: string, variant?: FillVariant, hovered?: boolean): string | undefined	Gets the most suitable background color, based upon the supplied parameters.
getBorderHex	(key: string, variant?: FillVariant, focused?: boolean)	Gets the most suitable border color, based upon the supplied parameters.
getFgHex	(key: string, variant?: FillVariant): string | undefined	Gets the most suitable foreground color, based upon the supplied parameters.

Changelog

• 2.7.0: added the getBorderHex method.