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",    "background": "#fff",    "foreground": "#2f3941",    "primaryHue": "blue",    "dangerHue": "red",    "warningHue": "yellow",    "successHue": "green",    "neutralHue": "grey",    "chromeHue": "kale"  },  "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"  },  "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

• Name8.76.4•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 background, foreground, and palette hues applied throughout the component system. The background and foreground values determine basic text-on-surface colors. This table provides a reference for hue values.

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.

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.

• 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 chromeHue.

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.