Utilities

Utility functions enable advanced theme usage. They let you customize components in a granular way.

How to use them

Menu and arrow styles

Use menu and arrow styling utilities to build Garden-styled menu components.

Configuration

• Name9.0.0-next.26•View source•View on npm
• Installnpm install @zendeskgarden/react-theming
• Depsnpm install react react-dom styled-components
• Importimport { arrowStyles, focusStyles, getCheckeredBackground, getColor, getColorV8, getFocusBoxShadow, getLineHeight, mediaQuery, menuStyles, retrieveComponentStyles, useText } from '@zendeskgarden/react-theming'

API

arrowStyles

CSS for an arrow at the given position and with the given size. The arrow inherits the base element’s border, background, and box-shadow. For proper border and box-shadow styling, the element to which arrow styles are applied must be wrapped in a positioned box (relative, absolute, or fixed) that has a z-index greater than or equal to zero.

focusStyles

CSS for Garden standard box-shadow focus styling. The hue and shade are used to determine the color of the focus ring.

getCheckeredBackground

Generate CSS for a checkered background image.

getColor

Get a color value from the theme. Variable lookup takes precedence, followed by dark and light object values. If none of these are provided, hue, shade, offset, and transparency are used as fallbacks to determine the color. A particularly effective use of getColor might look something like the following example.

import styled from 'styled-components';import { getColor } from '@zendeskgarden/react-theming';
const options = { variable: 'background.primaryEmphasis' };const offset100 = { dark: { offset: -100 }, light: { offset: 100 } };const offset200 = { dark: { offset: -200 }, light: { offset: 200 } };
export const StyledCustomComponent = styled.div`  background-color: ${props => getColor({ theme: props.theme, ...options })};
  :hover {    background-color: ${props => getColor({ theme: props.theme, ...options, ...offset100 })};  }
  :active {    background-color: ${props => getColor({ theme: props.theme, ...options, ...offset200 })};  }`;

getFocusBoxShadow

Get a CSS box-shadow property value for focus state styling. Use this function when focusStyles is not the right fit.

getLineHeight

Derive a unitless line height based on the given pixel-valued height and font size.

mediaQuery

Get a CSS media query string for the given query specifier, breakpoint name, and theme. Use this function to build responsive UI that works well with Garden’s themed Grid.

menuStyles

CSS for a menu at the given position. Apply these styles to an absolutely positioned wrapper (e.g. via Popper) which contains a child menu component.

retrieveComponentStyles

Retrieve customized CSS for themable component styling overrides. This example demonstrates how to construct a custom styled component that permits customizations via the theme’s components object.

import styled from 'styled-components';import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
const COMPONENT_ID = 'custom.component';
export const StyledCustomComponent = styled.div.attrs({  /* Render component ID attribute for reference */  'data-custom-id': COMPONENT_ID})`  display: flex;  align-items: center;
  /* CSS provided on the theme will be rendered inline */  ${props => retrieveComponentStyles(COMPONENT_ID, props)};`;

useText

A custom React hook that provides default text for aria-label or other critical attribute strings. If necessary, a development mode console warning prompts the consumer to provide customized, translated text.