Theme object

The theme object provides global values for component styling.

What it is

DEFAULT_THEME

The following JSON displays the theme object in its entirety.

{  "borders": {    "sm": "1px solid",    "md": "3px solid"  },  "borderRadii": {    "sm": "2px",    "md": "4px"  },  "borderStyles": {    "solid": "solid"  },  "borderWidths": {    "sm": "1px",    "md": "3px"  },  "breakpoints": {    "xs": "0px",    "sm": "576px",    "md": "768px",    "lg": "992px",    "xl": "1200px"  },  "colors": {    "base": "light",    "primaryHue": "blue",    "dangerHue": "red",    "warningHue": "yellow",    "successHue": "green",    "neutralHue": "grey",    "chromeHue": "kale",    "variables": {      "dark": {        "background": {          "default": "neutralHue.1100",          "raised": "neutralHue.1000",          "recessed": "neutralHue.1200",          "subtle": "neutralHue.1000",          "emphasis": "neutralHue.600",          "success": "successHue.1000",          "warning": "warningHue.1000",          "danger": "dangerHue.1000",          "primaryEmphasis": "primaryHue.600",          "successEmphasis": "successHue.600",          "warningEmphasis": "warningHue.600",          "dangerEmphasis": "dangerHue.600",          "disabled": "rgba(neutralHue.500, 100)"        },        "border": {          "default": "neutralHue.800",          "emphasis": "neutralHue.600",          "subtle": "neutralHue.900",          "success": "successHue.900",          "warning": "warningHue.900",          "danger": "dangerHue.900",          "primaryEmphasis": "primaryHue.600",          "successEmphasis": "successHue.600",          "warningEmphasis": "warningHue.600",          "dangerEmphasis": "dangerHue.600",          "disabled": "neutralHue.800"        },        "foreground": {          "default": "neutralHue.300",          "subtle": "neutralHue.500",          "onEmphasis": "neutralHue.1100",          "primary": "primaryHue.600",          "success": "successHue.400",          "warning": "warningHue.400",          "danger": "dangerHue.400",          "successEmphasis": "successHue.300",          "warningEmphasis": "warningHue.300",          "dangerEmphasis": "dangerHue.300",          "disabled": "neutralHue.700"        },        "shadow": {          "small": "rgba(neutralHue.1200, 1100)",          "medium": "rgba(neutralHue.1200, 800)",          "large": "rgba(neutralHue.1200, 1000)"        }      },      "light": {        "background": {          "default": "palette.white",          "raised": "palette.white",          "recessed": "neutralHue.100",          "subtle": "neutralHue.100",          "emphasis": "neutralHue.700",          "success": "successHue.100",          "warning": "warningHue.100",          "danger": "dangerHue.100",          "primaryEmphasis": "primaryHue.700",          "successEmphasis": "successHue.700",          "warningEmphasis": "warningHue.700",          "dangerEmphasis": "dangerHue.700",          "disabled": "rgba(neutralHue.700, 100)"        },        "border": {          "default": "neutralHue.300",          "emphasis": "neutralHue.600",          "subtle": "neutralHue.200",          "success": "successHue.300",          "warning": "warningHue.300",          "danger": "dangerHue.300",          "primaryEmphasis": "primaryHue.700",          "successEmphasis": "successHue.700",          "warningEmphasis": "warningHue.700",          "dangerEmphasis": "dangerHue.700",          "disabled": "neutralHue.300"        },        "foreground": {          "default": "neutralHue.900",          "subtle": "neutralHue.700",          "onEmphasis": "palette.white",          "primary": "primaryHue.700",          "success": "successHue.700",          "warning": "warningHue.700",          "danger": "dangerHue.700",          "successEmphasis": "successHue.900",          "warningEmphasis": "warningHue.900",          "dangerEmphasis": "dangerHue.900",          "disabled": "neutralHue.600"        },        "shadow": {          "small": "rgba(neutralHue.1200, 200)",          "medium": "rgba(neutralHue.1200, 200)",          "large": "rgba(neutralHue.1200, 200)"        }      }    }  },  "components": {},  "fonts": {    "mono": "SFMono-Regular,Consolas,\"Liberation Mono\",Menlo,Courier,monospace",    "system": "system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",Arial,sans-serif"  },  "fontSizes": {    "xs": "10px",    "sm": "12px",    "md": "14px",    "lg": "18px",    "xl": "22px",    "xxl": "26px",    "xxxl": "36px"  },  "fontWeights": {    "thin": 100,    "extralight": 200,    "light": 300,    "regular": 400,    "medium": 500,    "semibold": 600,    "bold": 700,    "extrabold": 800,    "black": 900  },  "iconSizes": {    "sm": "12px",    "md": "16px",    "lg": "26px"  },  "lineHeights": {    "sm": "16px",    "md": "20px",    "lg": "24px",    "xl": "28px",    "xxl": "32px",    "xxxl": "44px"  },  "opacity": {    "100": 0.08,    "200": 0.16,    "300": 0.24,    "400": 0.32,    "500": 0.4,    "600": 0.48,    "700": 0.56,    "800": 0.64,    "900": 0.72,    "1000": 0.8,    "1100": 0.88,    "1200": 0.96  },  "palette": { /* see API for details */ },  "rtl": false,  "shadowWidths": {    "xs": "1px",    "sm": "2px",    "md": "3px"  },  "shadows": {    "xs": " => expression",    "sm": " => expression",    "md": " => expression",    "lg": "(offsetY, blurRadius, color) => expression"  },  "space": {    "base": 4,    "xxs": "4px",    "xs": "8px",    "sm": "12px",    "md": "20px",    "lg": "32px",    "xl": "40px",    "xxl": "48px"  }}

Configuration

• Name9.1.0•View source•View on npm
• Installnpm install @zendeskgarden/react-theming
• Depsnpm install react react-dom styled-components
• Importimport { DEFAULT_THEME } from '@zendeskgarden/react-theming'

API

The top-level keys of DEFAULT_THEME.

borders

Borders can be small or medium and represent the combination of borderWidths and borderStyles.

borderRadii

Border radii can be small or medium and determine the corner radius for various components.

borderStyles

The theme object provides one solid border style. Remember to update borders in conjunction with any border style override.

borderWidths

Border widths can be small or medium. Remember to update borders in conjunction with any border width override.

breakpoints

Themed breakpoints define minimum dimensions at which layout will change based on media queries, adapting to various screen sizes. Breakpoint values are used by the responsive Grid and the mediaQuery utility.

colors

The colors object provides key values for palette hues used across the component system. The base value establishes the color scheme for component rendering. The color variables coincide with a “light” or “dark” base, identifying key colors with critical semantic meaning in the system. When combined with the getColor utility, these variables form a robust foundation for color usage in Garden and custom extension components.

base

The base specifies either “light” or “dark” for the theme’s color scheme.

hues

This table provides a reference for key hue values.

variables

Garden uses color variable key notation to reference specific hex and RGBA values for the current color scheme. Variables can refer to hues, palette colors, or literal CSS color values. A special rgba(hue.shade, opacity) notation may be used to reference Garden color and opacity values. The following lists identify color variables and expected usage.

• Background
  • background.default default background for main surfaces
  • background.raised background used for raised and floating surfaces
  • background.recessed background that sits below the main surface
  • background.subtle subtle background that sits on the same plane as the main surface
  • background.emphasis strong background, usually for interactive elements
  • background.success background used for success states
  • background.warning background used for warning states
  • background.danger background used for danger states
  • background.primaryEmphasis strong background for primary interaction elements
  • background.successEmphasis strong background for success interaction elements
  • background.warningEmphasis strong background for warning interaction elements
  • background.dangerEmphasis strong background for danger interaction elements
  • background.disabled background used for disabled states
• Border
  • border.default default layout borders and dividers
  • border.emphasis interactive borders
  • border.subtle inner layout borders and dividers
  • border.success success layout borders
  • border.warning warning layout borders
  • border.danger danger layout borders
  • border.primaryEmphasis strong border for primary interaction elements
  • border.successEmphasis strong border for success interaction elements
  • border.warningEmphasis strong border for warning interaction elements
  • border.dangerEmphasis strong border for danger interaction elements
  • border.disabled border used for disabled states
• Foreground
  • foreground.default default text
  • foreground.subtle icons and meta information
  • foreground.onEmphasis text on strong backgrounds
  • foreground.primary primary text
  • foreground.success success text
  • foreground.warning warning text
  • foreground.danger danger text
  • foreground.successEmphasis strong success text
  • foreground.warningEmphasis strong warning text
  • foreground.dangerEmphasis strong danger text
  • foreground.disabled disabled text
• Shadow
  • shadow.small shadow color for smaller components
  • shadow.medium shadow color for medium size components
  • shadow.large shadow color for larger components

components

The components object is an empty container for adding targeted component styling. Its keys are COMPONENT_ID values. (Use the Garden Inspect Chrome extension to view component IDs.) Its values are CSS template strings.

document

A document object is used to support components that require HTML document context (such as menus or modals). This example illustrates how components could be rendered against an inline frame.

const theme = {  ...DEFAULT_THEME,  document: document.getElementsByTagName('iframe')[0].contentDocument};
<ThemeProvider theme={theme}>...</ThemeProvider>;

fonts

Fonts can be mono or system. The monospace font stack is used to display Code fragments and Code block snippets. The system font stack is the default used throughout Zendesk products.

fontSizes

Font sizes are used with lineHeights to define the basis for Garden’s type scale. The scale reduces monospace equivalents by one pixel so that x-height is proportional with the surrounding system font.

fontWeights

Font weight names are mapped to a complete set of corresponding values. The regular and semibold values are weights used by Garden components.

iconSizes

The icon sizes object corresponds with the small, medium, and large icons provided by Garden’s SVG Icon library.

lineHeights

Line heights are used with fontSizes to define the basis for Garden’s type scale. See the getLineHeight utility for obtaining unitless line height values.

opacity

Opacity values work together with colors to offer standard RGBA transparency.

palette

This object lets you reference, modify, and extend Garden’s entire Palette (with the exception of palette.product values, which cannot be customized).

rtl

The RTL theme object value determines whether components will lay out left-to-right or right-to-left.

shadows

The shadows portion of the theme object contains three functions.

• xs, sm, and md each take an RGBA color string parameter and are typically used to apply component focus rings. These functions correspond to the values provided by shadowWidths.
• lg takes offsetY, blurRadius, and color string parameters used to apply a drop shadow under components that float above the surface (modals, notifications, etc.). By default, the color variable used is neutralHue.

shadowWidths

Shadow widths can be small or medium. Remember to update shadows in conjunction with any shadow width override.

space

Provides a series of values, from xxs through xxl, that express Garden’s standard spacing units. These values are used to manage Grid gutter sizing and can be leveraged for page layouts. The base unit is the fundamental factor used to compute Garden’s base-4 component system. Modifying a theme’s space.base will cascade changes to component size, padding, and margins.

window

Like document, the window object is used to support components that require HTML window context.