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.
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' }
The text color used to style active elements.
string
'black'
object
{ dark: 'white', light: 'black' }
The animation configuration used for Diagram and Box.
object
{ duration: "1s", jiggle: { duration: "0.1s" } }
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' }, }
The possible border sizes.
object
{ xsmall: '1px', small: '2px', medium: '4px', large: '12px', xlarge: '24px, }
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: {}, }
Breakpoints used at Server Side Rendering for the initial rendering. These values correspond to the
global.breakpoints
.object
{ phone: 'small', tablet: 'medium', computer: 'large', }
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', }
The opacity when a component is disabled.
number
0.3
string
"weak"
"medium"
"strong"
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"
When true, the Drop will account for alignment when assigning margin.
boolean
true
false
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: "..." }
The box-shadow to use for Drop. This is deprecated in favor of
global.drop.elevation
.string
"small"
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', }, }
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)', }
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)', }
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" }
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" }
The outline size when an element receives focus. A shadow or outline is required for accessibility.
string
"1px"
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', }
The global font face. Accepts any values that can be passed to font-face.
object
{ font-family: 'MyFont'; src: url(font_file.woff), }
The global font family. Accepts any values that can be passed to font-family.
string
"serif"
The space between lines. Accepts any value that can be passed to line-height.
string
"normal"
The size of the font. Accepts any value that can be passed to font-size.
string
"15px"
The thickness of characters. Accepts any value that can be passed to font-weight.
string
"normal"
number
300
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"
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" }
Any additional styles for input components.
string
Any CSS.
css`color: 'blue'`
function
(props) => {}
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: "..." }
The space between lines. Accepts any value that can be passed to line-height.
string
"normal"
The size of the font. Accepts any value that can be passed to font-size.
string
"normal"
The thickness of characters. Accepts any value that can be passed to font-weight.
string
"normal"
number
300
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
300
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"
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" }