Global Theme Properties

This is a list of global theme properties that affect multiple components. Some of the properties can be overridden by component level theme properties. For more information on theming see the theming wiki page.

Theme

global.active.background

The background used to style active elements.

string

'active'

object

An object can be passed with a color and opacity or with a dark and light value. color can accept either a string or an object.


{
    color: 'active',
    opacity: 'medium',
}

{ dark: 'black', light: 'white' }

global.active.color

The text color used to style active elements.

string

'black'

object

{ dark: 'white', light: 'black' }

global.animation

The animation configuration used for Diagram and Box.

object


{
  duration: "1s",
  jiggle: { duration: "0.1s" }
}

global.backgrounds

Backgrounds to use across the application.

The background's name is provided as a value a component's background prop such as Box, Header, Page, and more.

object

A background of one of the following types `string`, `{ dark: string, light: string }` object, or background type object.

The background may be used throughout the application by referring to its name.

{
  'hero-image-3': 'url(//my.com/assets/img.png)',
  'ambient-1': {
    dark: 'linear-gradient()',
    light: 'linear-gradient()'
  },
  'seasonal-promotion': {
    color: 'neutral-1',
    image: 'url(//my.com/assets/img.png)',
    opacity: 'medium'
  },
}

global.borderSize

The possible border sizes.

object


{
  xsmall: '1px',
  small: '2px',
  medium: '4px',
  large: '12px',
  xlarge: '24px,
}

global.breakpoints

The possible breakpoints to define window sizes.

object


{
  small: {
    value: '768px',
    borderSize: {
      xsmall: '1px',
      small: '2px',
      medium: '4px',
      large: '6px',
      xlarge: '12px',
    },
    edgeSize: {
      none: '0px',
      hair: '1px',
      xxsmall: '2px',
      xsmall: '3px',
      small: '6px',
      medium: '12px',
      large: '24px',
      xlarge: '48px',
    },
    size: {
      xxsmall: '24px',
      xsmall: '48px',
      small: '96px',
      medium: '192px',
      large: '384px',
      xlarge: '768px',
      full: '100%',
    },
  },
  medium: { value: '1536px' },
  large: {},
}

global.breakpoint[size].radius

The border radius for the given size.

string

"4px"

global.deviceBreakpoints

Breakpoints used at Server Side Rendering for the initial rendering. These values correspond to the global.breakpoints.

object

{
  phone: 'small',
  tablet: 'medium',
  computer: 'large',
}

global.colors

The color values to use across the application.

object

A color of type string or { dark: string; light: string } can be assigned to a name. The color can be used throughout the application by referring to that name.

{
  active: 'rgba(221, 221, 221, 0.5)',
  'background-back': {
    dark: '#33333308',
    light: '#EDEDED',
  },
  'background-front': {
    dark: '#444444',
    light: '#FFFFFF',
  },
  'background-contrast': {
    light: '#33333310',
    dark: '#FFFFFF18',
  },
  'active-background': 'background-contrast',
  'active-text': 'text-strong',
  black: '#000000',
  border: {
    dark: 'rgba(255, 255, 255, 0.33)',
    light: 'rgba(0, 0, 0, 0.33)',
  },
  brand: brandColor,
  control: {
    dark: 'accent-1',
    light: 'brand',
  },
  focus: focusColor,
  'graph-0': 'accent-1',
  'graph-1': 'neutral-1',
  'graph-2': 'neutral-2',
  'graph-3': 'neutral-3',
  'graph-4': 'neutral-4',
  placeholder: '#AAAAAA',
  selected: 'brand',
  text: {
    dark: '#f8f8f8',
    light: '#444444',
  },
  'text-strong': {
    dark: '#FFFFFF',
    light: '#000000',
  },
  'text-weak': {
    dark: '#CCCCCC',
    light: '#555555',
  },
  'text-xweak': {
    dark: '#BBBBBB',
    light: '#666666',
  },
  icon: {
    dark: '#f8f8f8',
    light: '#666666',
  },
  'selected-background': 'brand',
  'selected-text': 'text-strong',
  white: '#FFFFFF',
}

global.control.border.color

The border color.

string

"border"

global.control.border.radius

The border radius.

string

"4px"

global.control.border.width

The border width.

string

"1px"

global.control.disabled.opacity

The opacity when a component is disabled.

number

0.3

string

"weak"

"medium"

"strong"

global.debounceDelay

The time to wait after the user stopped typing, measured in ms.

number

global.drop.background

The default background color to use for Drop.

string

A color or image url.

"neutral-1"

"url(//my.com/assets/img.png)"

object


{
  color: "neutral-1",
  dark: true,
  image: "url(//my.com/assets/img.png)"
  position: "bottom",
  opacity: true,
  repeat: "no-repeat",
  size: "cover",
  light: "string"
}

where opacity could be:

"weak"

"medium"

"strong"

boolean

number

where position could be:

any CSS for background-position

where repeat could be:

"no-repeat"

"repeat"

"string"

where size could be:

"cover"

"contain"

"string"

global.drop.border.width

The default border width to use for Drop.

string

"1px"

global.drop.border.radius

The default border radius to use for Drop.

string

"0px"

global.drop.intelligentMargin

When true, the Drop will account for alignment when assigning margin.

boolean

true

false

global.drop.margin

The margin to use for Drop.

string

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


{
    vertical: "...",
    horizontal: "...",
    top: "...",
    bottom: "...",
    left: "...",
    right: "..."
}

global.drop.shadowSize

The box-shadow to use for Drop. This is deprecated in favor of global.drop.elevation.

string

"small"

global.drop.elevation

The box-shadow to use for Drop.

string

"small"

global.drop.zIndex

The z-index to use for Drop.

string

"20"

global.focus.border

The border style to use for the focus state.

object

{
      border: {
        color: 'blue',
      },
}

global.focus.outline

The outline style to use for the focus state. This includes color, size and offset.

object

{
    outline: 
    { color: 'purple',
      size: '2px',
      offset: '2px'
     },
}

global.focus.shadow

The shadow style to use for the focus state. This includes color, size, blur and inset.

object

{
   shadow: {
        color: 'red',
        size: '2px',
        blur: '0px',
        inset: true,
      },
}

global.focus.twoColor

Enable a two-color focus effect.

boolean

true

false

global.edgeSize

The possible sizes for any of gap, margin, and pad.

object


{
  edgeSize: {
    none: '0px',
    hair: '1px',
    xxsmall: '3px',
    xsmall: '6px',
    small: '12px',
    medium: '24px',
    large: '48px',
    xlarge: '96px',
    responsiveBreakpoint: 'small',
  },
}

global.elevation.light

The box-shadow to use while the theme is in light mode.

string

{
  none: 'none',
  xsmall: '0px 1px 2px rgba(0, 0, 0, 0.20)',
  small: '0px 2px 4px rgba(0, 0, 0, 0.20)',
  medium: '0px 4px 8px rgba(0, 0, 0, 0.20)',
  large: '0px 8px 16px rgba(0, 0, 0, 0.20)',
  xlarge: '0px 12px 24px rgba(0, 0, 0, 0.20)',
}

global.elevation.dark

The box-shadow to use while the theme is in dark mode.

string

{
  none: 'none',
  xsmall: '0px 2px 2px rgba(255, 255, 255, 0.40)',
  small: '0px 4px 4px rgba(255, 255, 255, 0.40)',
  medium: '0px 6px 8px rgba(255, 255, 255, 0.40)',
  large: '0px 8px 16px rgba(255, 255, 255, 0.40)',
  xlarge: '0px 12px 24px rgba(255, 255, 255, 0.40)',
}

global.focus.border.color

The border color when an element receives focus.

string

A hex, name, or rgb value.

"focus"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

global.focus.outline.color

The outline color when an element receives focus. A shadow or outline is required for accessibility.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

global.focus.outline.size

The outline size when an element receives focus. A shadow or outline is required for accessibility.

string

"1px"

global.focus.shadow

The outline size when an element receives focus. A shadow or outline is required for accessibility.

string

Accepts any value that can be passed to box-shadow.

"5px 5px 5px red"

object

{
  color: 'focus',
  size: '2px',
}

global.font.face

The global font face. Accepts any values that can be passed to font-face.

object

{
  font-family: 'MyFont';
  src: url(font_file.woff),
}

global.font.family

The global font family. Accepts any values that can be passed to font-family.

string

"serif"

global.font.height

The space between lines. Accepts any value that can be passed to line-height.

string

"normal"

global.font.size

The size of the font. Accepts any value that can be passed to font-size.

string

"15px"

global.font.weight

The thickness of characters. Accepts any value that can be passed to font-weight.

string

"normal"

number

global.hover.background

The background style when hovering.

string

A color or image url.

"neutral-1"

"url(//my.com/assets/img.png)"

object


{
  color: "neutral-1",
  dark: true,
  image: "url(//my.com/assets/img.png)"
  position: "bottom",
  opacity: true,
  repeat: "no-repeat",
  size: "cover",
  light: "string"
}

where opacity could be:

"weak"

"medium"

"strong"

boolean

number

where position could be:

any CSS for background-position

where repeat could be:

"no-repeat"

"repeat"

"string"

where size could be:

"cover"

"contain"

"string"

global.hover.color

The text color when hovering.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

global.input.extend

Any additional styles for input components.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

global.input.padding

The padding for input components.

string

T-shirt sizing based off the theme or a specific size in px, em, etc.

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

"any CSS size"

object

An object can be specified to distinguish horizontal padding, vertical padding, and padding on a particular side.


{
  vertical: "...",
  horizontal: "...",
  top: "...",
  bottom: "...",
  left: "...",
  right: "...",
  start: "...",
  end: "..."
}

global.input.font.height

The space between lines. Accepts any value that can be passed to line-height.

string

"normal"

global.input.font.size

The size of the font. Accepts any value that can be passed to font-size.

string

"normal"

global.input.font.weight

The thickness of characters. Accepts any value that can be passed to font-weight.

string

"normal"

number

global.input.weight

The size of the font. Accepts any value that can be passed to font-size. Deprecated in favor of global.input.font.weight.

string

"normal"

number

global.opacity.strong

The value to use when opacity is set to strong.

number

0.8

global.opacity.medium

The value to use when opacity is set to medium.

number

0.4

global.opacity.weak

The value to use when opacity is set to weak.

number

0.1

global.radius

The border radius.

string

"4px"

global.selected.background

The background to use when an element is selected.

string

A color or image url.

"neutral-1"

"url(//my.com/assets/img.png)"

object


{
  color: "neutral-1",
  dark: true,
  image: "url(//my.com/assets/img.png)"
  position: "bottom",
  opacity: true,
  repeat: "no-repeat",
  size: "cover",
  light: "string"
}

where opacity could be:

"weak"

"medium"

"strong"

boolean

number

where position could be:

any CSS for background-position

where repeat could be:

"no-repeat"

"repeat"

"string"

where size could be:

"cover"

"contain"

"string"

global.selected.color

The font color to use when an element is selected.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

global.spacing

A spacing unit used by various components.

string

"24px"

global.size

The possible sizes for row and column.

object


{
  xxsmall: "48px",
  xsmall: "96px",
  small: "192px",
  medium: "384px",
  large: "768px",
  xlarge: "1152px",
  xxlarge: "1536px",
  full: "100%",
}