theme

Use React 16.3+ createContext API.

Get the themed props for the Alert component.

Get the appearance of an interactive Badge.

Get the className of a Badge.

Disabled styles are all the same for all buttons.

Get button appearance.

Get the className of a Button|IconButton.

There is only a single appearance in the default theme.

Get the className of a Checkbox.

Get the themed properties for a Code text component.

The link appearance unlike the Button is based on the color property. Currently the Link does not support the Intent or the appearance interface.

Get the className of a Link component.

Get the appearance of a Row.

Get the className of a Row.

Get the appearanece of a SegmentedControlRadio.

Get the className of a SegmentedControlRadio.

Get the appearance of a Select.

Get the className of a Select.

Get the className of a Switch.

Get the className of a Switch.

Disabled styles are all the same.

Get the appearance of a Tab.

Get the className of a Tab.

Get the appearance of a TableCell.

Get the className of a Table.EditableCell.

Get the appearance of a TagInput.

Get the className of a TagInput.

Get the appearance of a TextDropdownButton.

Get the className of a TextDropdownButton.

Get the appearance of a TextInput.

Get the className of a TextInput.

Get the appearance of a TextInput.

Get the className of a TextInput.

This object are functional colors being used the default theme. A required property is required by the default theme NOT by Evergreen itself.

Available on Pane as <Pane background="tint1" />

Available on Pane as <Pane borderBottom borderRight="muted" />

Text colors available on Text as <Text color="muted" />.

Icon colors available on Icon.

Used for Alerts and other (future) componentes that express intent.

Elevation styles are applied as box shadows. Available levels: 0, 1, 2, 3, 4.

Fills are used in Avatars and Badges.

Neutrals and Blue are special. They need more variations to properly express all of our UI.

Gradients in the default theme have a intentional hue shift.

Theme

The theme object is used to style Evergreen. It is passed into the <ThemeProvider theme={theme} />.

You can use this as a template for your own themes.

Foundational Styles.

The following properties are NOT REQUIRED by Evergreen. It’s exposed for convenience and documentation.

Typography.

The following properties are NOT REQUIRED by Evergreen. It’s exposed for convenience and documentation.

Component Specific.

These ARE REQUIRED for Evergreen to work.

Theme Helpers.

These ARE REQUIRED for Evergreen to work.

Controls include:

• Button
• IconButton
• TextInput

Get the text size for a control with a certain height.

Get the size for a icon in a Button with a certain height.

Get the size for a icon in a IconButton with a certain height.

Get background property.

Return one of theme presets or the original value.

Get box-shadow (elevation).

There is no fallback, undefined will be returned.

Get the color for an icon.

Check if there is a preset in the theme for the icon color.

Get the properties for an icon based on the intent.

Heading styles.

Text styles for single line text. This is used in the Text component. The Text component is used by:

• Small
• Strong
• Code
• ListItem
• Label

Text styles for paragraphs (multi line text). This is used in the Paragraph.

Get the font family. This is used to override the font family.

Allow for passing in a custom fontFamily not in the theme.

Get the text color. This is used to override the color.

Allow for passing in a custom text color not in the theme.

Heading styles.

Text styles for paragraphs (multi line text). This is used in the Paragraph.

Text styles for single line text. This is used in the Text component. The Text component is used by:

• Small
• Strong
• Code
• ListItem
• Label
• Link

It’s useful to have 600 because Link uses the Text component. A Link could be used as 600 in the context of a breadcrumb.

Use font family display because the font-size is 20px.

Memoize a function that takes N number of strings as arguments and returns a CSS-in-JS object.

The key of the cache will be the concatenated string arguments, For example: primary_success or regular

The CSS-in-JS object will be passed to glamor and the generated className will be used as the value in the cache.

Why? Glamor, or any CSS-in-JS solution wil have a build-in cache. However, to get the hash/key of this build-in cache a relatively expensive hashing function needs to run on the CSS-in-JS object. This function removes the need for the build-in cache and acts as much faster alternative.

Helper function for theming.

HOC that uses ThemeConsumer.