(deprecated) Get from theme utils

A group of functions used to retrieve token values from theme or component props. The following functions getColorFromTheme, getSizingFromTheme, getBorderFromTheme, getShadowFromTheme, getMotionFromTheme share the same annotation, therefore we will generalize them as the getter function. Also, since those functions are used in the same way, we will use only getColorFromTheme to build our Syntax and Example sections.

Overview

Tokens are the foundation of every design system. The visual representation of every component is formed by combining multiple tokens into presets and group of presets later stored into component defaults object. The provided functions, specified above, are used to retrieve the token values from the correspodning getter sections.

Parameters

defaultTokenMQ<ThemeToken>

The getter function will use this as a default token name to retrieve its value from the corresponding theme section. Keep in mind that whencustomProp is present, defaultToken will be used as a fallback.

customPropExclude<keyof Props, theme>

If this property is set, the function will try to resolve the token name from props object using customProp as the property. This argument also have higher precedence and if set, will always override defaultToken.

propsProps

The getter functions are curried and the function returned takes the props of the component (including the theme). If the function is used inside a styled component template literal, or a CSS block, Emotion.js will invoke the curried function, passing the component props.

Syntax

1(string, string) -> props -> string

1getColorFromTheme(defaultToken?, customProp?)(props)

Return value

Returns a CSS value as a string if valid attributes are received. Returns an empty string if invalid attributes or no attributes are provided.

Examples

This is the most basic example. Here Paragraph component will include the color value for token: blue020 found in the theme.

1<Paragraph color="blue050"/>

Although we pass color as a prop to Paragraph, the end result will be color set to blue020 value, since our getter function doesnt set customProp.

Same code snippet, but we also pass color as the second argument to our getter function.

1<Paragraph color="blue050"/>

Now the applied color will result to blue050 value, because prop tokens have higher precedence. If for some reason the token value can't be resolved from the theme, the defaultToken = 'blue020' will be used as a fallback.

You can use non-token value.

You also can use non-token value as customProp like example bellow:

1<Paragraph color="#999999"/>