Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
Design
Components
Patterns
    • Introduction
      • Overview
    • Foundations
      • Bedrock CSS
      • Design tokens
      • Containers
      • Theming
        • Palette
        • Theme object
        • Theme provider
        • Utilities
      • Versions
    • Components
      • Accordion
      • Anchor
      • Avatar
      • Breadcrumbs
      • Buttons
      • Chrome
      • Code block
      • Color picker
      • Color swatch
      • Date picker
      • Draggable
      • Drawer
      • Forms
      • Grid
      • Loaders
      • Menu
      • Modal
      • Notification
      • Pagination
      • Pane
      • Sheet
      • Status indicator
      • Stepper
      • Table
      • Tabs
      • Tags
      • Tiles
      • Timeline
      • Tooltip
      • Tooltip dialog
      • Typography
      • Well
    Table of Contents
    • How to use them
      • Menu and arrow styles
    • Configuration
    • API
      • arrowStyles
      • componentStyles
      • focusStyles
      • getCheckeredBackground
      • getColor
      • getFocusBoxShadow
      • getLineHeight
      • mediaQuery
      • menuStyles
      • useText

    Utilities

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

    Table of Contents
    • How to use them
      • Menu and arrow styles
    • Configuration
    • API
      • arrowStyles
      • componentStyles
      • focusStyles
      • getCheckeredBackground
      • getColor
      • getFocusBoxShadow
      • getLineHeight
      • mediaQuery
      • menuStyles
      • useText

    How to use them

    Menu and arrow styles

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

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Configuration

    • Name9.4.0•View source•View on npm
    • Installnpm install @zendeskgarden/react-theming
    • Depsnpm install react react-dom styled-components
    • Importimport { arrowStyles, componentStyles, focusStyles, getCheckeredBackground, getColor, getColorV8, getFocusBoxShadow, getLineHeight, mediaQuery, menuStyles, 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.

    ParameterTypeDefaultDescription
    position
    		'top' | 'top-left' | 'top-right' | 'right' | 'right-top' | 'right-bottom' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom'
    Required

    Positions the arrow against the base element

    [options.size]
    		string
    '6px'

    Expresses a CSS dimension as a distance from the base (hypotenuse) to point (right angle) of the arrow

    [options.inset]
    		string
    '0'

    Tweaks arrow positioning by adjusting with a positive (in) or negative (out) CSS dimension

    [options.shift]
    		string
    '0'

    Shifts arrow positioning along the edge of the base element

    [options.animationModifier]
    		string

    Indicates a CSS class or attribute selector which, when applied to the base element, animates the arrow's appearance

    componentStyles

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

    import styled, { css, useTheme } from 'styled-components';import { componentStyles, getColor } from '@zendeskgarden/react-theming';
const StyledCustomComponent = styled.div`  display: flex;  align-items: center;
  /* CSS provided on the theme will be rendered inline */  ${componentStyles};`;
export const CustomComponent = props => {  const theme = useTheme();  const customTheme = {    ...theme,    components: {      'custom.component': css`        background-color: ${p =>          getColor({ theme: p.theme, variable: 'background.primaryEmphasis' })};      `    }  };
  return (    <ThemeProvider theme={customTheme}>      <StyledCustomComponent {...props} data-garden-id="custom.component" />    </ThemeProvider>  );};
    ParameterTypeDefaultDescription
    options.theme
    		DefaultTheme
    Required

    Provides components object used to resolve the given component ID

    [options.componentId]
    		string

    Specifies the lookup ID for theme.components styles. The ID will be inferred from the data-garden-id attribute if not provided.

    focusStyles

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

    ParameterTypeDefaultDescription
    options.theme
    		IGardenTheme
    Required

    Provides values used to resolve the desired colors

    [options.color]
    		Object
    { variable: 'border.primaryEmphasis' }

    Provides an object with getColor parameters used to determine the focus ring color

    [options.shadowWidth]
    		string
    'md'

    Provides a theme object shadowWidth key for the cumulative width of the box-shadow

    [options.spacerColor]
    		Object
    { variable: 'background.default' }

    Provides an object with getColor parameters used to determine the spacer color

    [options.spacerWidth]
    		string
    'xs'

    Provides a theme object shadowWidth for the white spacer, or null to remove

    [options.inset]
    		boolean

    Determines whether the box-shadow is inset

    [options.selector]
    		string
    &:focus-visible

    Provides a subsitute pseudo-class CSS selector

    [options.styles]
    		CSSObject

    Adds CSS property values to be rendered on focus

    [options.condition]
    		boolean
    true

    Supplies an optional condition that can be used to prevent the focus box-shadow

    getCheckeredBackground

    Generate CSS for a checkered background image.

    ParameterTypeDefaultDescription
    theme
    		IGardenTheme
    Required

    Provides information for pattern color and LTR/RTL layout

    size
    		number
    Required

    Provides the pixel size of the checkered pattern

    overlay
    		string

    Specifies color with transparency or linear-gradient() overlay to apply on top of the checkered pattern

    positionY
    		number
    0

    Adjusts vertical position for starting the pattern

    repeat
    		'repeat' | 'repeat-x'
    'repeat'

    Sets a repeat value for the pattern; either 'repeat' or 'repeat-x' (default 'repeat')

    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 })};  }`;
    ParameterTypeDefaultDescription
    options.theme
    		IGardenTheme
    Required

    Provides values used to resolve the desired color

    [options.variable]
    		string

    Specifies a variable key ('background.default', for example) used to resolve a color value for the theme color base

    [options.hue]
    		string

    Provides a theme object palette hue or color key, or any valid CSS color notation

    [options.shade]
    		number
    700 (light) | 500 (dark)

    Selects a shade for the given hue

    [options.offset]
    		number

    Adjusts the shade by a positive or negative value. Works best used along with a variable key to make interaction (:hover or :active, for example) adjustments.

    [options.transparency]
    		number

    Sets transparency using a theme opacity key or an alpha channel between 0 and 1

    [options.dark]
    		Object

    Supplies an object with optional hue, shade, offset, and transparency values to be used in dark mode

    [options.light]
    		Object

    Supplies an object with optional hue, shade, offset, and transparency values to be used in light mode

    getFocusBoxShadow

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

    ParameterTypeDefaultDescription
    options.theme
    		IGardenTheme

    DEFAULT_THEME

    Provides values used to resolve the desired colors

    [options.color]
    		Object
    { variable: 'border.primaryEmphasis' }

    Provides an object with getColor parameters used to determine the focus ring color

    [options.shadowWidth]
    		string
    'md'

    Provides a theme object shadowWidth key for the cumulative width of the box-shadow

    [options.spacerColor]
    		Object
    { variable: 'background.default' }

    Provides an object with getColor parameters used to determine the spacer color

    [options.spacerWidth]
    		string
    'xs'

    Provides a theme object shadowWidth for the white spacer, or null to remove

    [options.inset]
    		boolean

    Determines whether the box-shadow is inset

    [options.boxShadow]
    		string

    Provides an existing box-shadow (a drop shadow, for example) to be retained along with the focus ring

    getLineHeight

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

    ParameterTypeDefaultDescription
    height
    		string | number
    Required

    Specifies the desired line height in pixels

    fontSize
    		string | number
    Required

    Specifies the font size (in pixels) of text contained within the line

    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.

    ParameterTypeDefaultDescription
    query
    		'up' | 'down' | 'only' | 'between'
    Required

    Specifies the query, one of:

    • 'up' match screen widths including the given breakpoint and up
    • 'down' match screen widths included within the given breakpoint and down
    • 'only' match screen widths included within the given breakpoint
    • 'between' match screen widths including the first breakpoint up through screen widths included within the second breakpoint
    breakpoint
    		'xs' | 'sm' | 'md' | 'lg' | 'xl' | Array
    Required

    Specifies a theme object breakpoints key, or an array of two keys when'between' is the specified query

    theme
    		DefaultTheme

    DEFAULT_THEME

    Provides values used to resolve the specified breakpoint

    menuStyles

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

    ParameterTypeDefaultDescription
    position
    		'top' | 'right' | 'bottom' | 'left'
    Required

    Specifies the menu position relative to the component that triggers menu expansion

    [options.theme]
    		DefaultTheme

    DEFAULT_THEME

    Provides theming values used to style the menu component

    [options.hidden]
    		boolean

    Determines whether the menu is hidden

    [options.margin]
    		string

    Determines the amount of space, as a CSS dimension, between the menu and its trigger

    [options.zIndex]
    		number
    0

    Specifies the z-index for the absolutely positioned menu wrapper

    [options.childSelector]
    		string
    '> *'

    Indicates a CSS selector which, when applied to the wrapper, identifies the child menu component

    [options.animationModifier]
    		string

    Indicates a CSS class or attribute selector which, when applied to the wrapper, animates the menu's appearance

    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.

    ParameterTypeDefaultDescription
    component
    		string
    Required

    Specifies the React component to which the props belong

    props
    		Record<string, any>
    Required

    Provides component props to check for name

    name
    		string
    Required

    Determines the name of the component prop to set default text on

    text
    		string
    Required

    Specifies default text to apply if the value of props[name] is undefined

    condition
    		boolean

    Supplies an optional condition that can be used to prevent evaluation

    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2024