import { useToken } from '@uhg-abyss/web/hooks/useToken';

This hook returns a function that is used to get the style value associated with a token defined in the theme. Use this whenever you want to pass in a prop with the value of a token string instead of the associated token value.

Properties

type TokenKey = 'colors' | 'space' | 'sizes' | 'fontSizes' | 'lineHeights' | 'fontWeights' | 'fonts' | 'radii' | 'borderWidths' | 'shadows' | 'letterSpacings' | 'borderStyles' | 'opacities';

interface TokenConfig {
  retain?: boolean;
};

useToken(key: TokenKey, config?: TokenConfig)

Usage

The key argument corresponds to the upper level category inside the theme. Start with defining a function and passing it the string of the token key. You can then use that function to pass in your token element and get the associated value. A hex value can also be passed in as a token and it will be returned as-is, unless set not to using the retain configuration option.

const theme = {
  theme: {
    colors: {...},
    space: {...},
    fontSizes: {...},
    fonts: {...},
  },
};

const getColorToken = useToken('colors');
const color = getColorToken('$web.semantic.color.surface.container.primary');

Example

Defaults

By default, the useToken hook uses the passed in value if the token is not found/is invalid. This allows it to take hex and string values and return them as given.

Using the config parameter, you can pass in {retain: false} to require tokenized values.