Theming

Overview

As of Recipe v14, emotion themes are now supported, making Recipe more flexible and adaptable, allowing downstream apps to use themes to utilize Recipe components more effectively.

Recipe themes are extended from the MUI default theme and represent a single source of truth for supported theme properties. If there is a specific use case for doing so, these themes can be further extended.

warning-icon
Warning
Extending themes can make future upgrade paths more difficult and should only be done when there is a valid use case to do so. If you'd like to suggest a change to a supported theme, please reach out to the Recipe team.

Supported Themes

Recipe defines and makes accessible the following supported themes:

  • ezTheme
  • ezMarketplaceTheme - extends ezTheme
  • ezFulfillmentTheme - extends ezTheme

To learn more about how to use and extend these themes, read our Getting Started section on Recipe Themes.

Colors

Recipe supports the following set of design tokens for colors:

Neutral

Neutral 170 (Black Olive)
#151515
common.neutral170
Neutral 160
#565a5c
common.neutral160
Neutral 150
#787878
common.neutral150
Neutral 140
#b2b3b3
common.neutral140
Neutral 130
#e5e6e6
common.neutral130
Neutral 120
#f5f7f7
common.neutral120
Neutral 110
#fafbfc
common.neutral110
Neutral 100 (White)
#fff
common.neutral100

Primary

Primary 120 (Kale)
#1d3c34
common.primary120
Primary 110 (Cilantro)
#034a34
common.primary110
Primary 100 (ezGreen)
#00b373
common.primary100
Primary 90
#f0faf7
common.primary90

Alternative

Yellow 110
#f9d055
common.yellow110
Yellow 100 (Vanilla Frosting)
#f9fae4
common.yellow100
Red 100 (Guava)
#ff585d
common.red100
Purple 100
#7f379c
common.purple100
Purple 90
#f8f3fa
common.purple90
Blue 100
#3f61ff
common.blue100
Blue 90
#f2f4ff
common.blue90
Green 105
#407560
common.green105

Success

Success 100
#00a40f
common.success100
Success 90
#f0fae4
common.success90

Alert

Alert 110
#972f2f
common.alert110
Alert 100
#d3302f
common.alert100
Alert 90
#f7c1c1
common.alert90
Alert 80
#fdefef
common.alert80

Warning

Warning 110
#926a00
common.warning110
Warning 100
#e9a801
common.warning100
Warning 90
#fff3ce
common.warning90
Warning 80
#fcf6e5
common.warning80

Typography

Recipe supports the following set of design tokens for typography:

Fonts

ezTheme uses the Lato font, which also extends to ezMarketplaceTheme.

fontFamily: 'Lato', 'Helvetica Neue', 'Arial', 'Helvetica', 'sans-serif';

ezFulfillmentTheme uses the Montserrat font for headers and the Roboto Flex font for everything else.

fontFamily: 'Montserrat', 'Helvetica Neue', 'Arial', 'Helvetica', 'sans-serif';
fontFamily: 'Roboto Flex', 'Helvetica Neue', 'Arial', 'Helvetica', 'sans-serif';

Icons

ezTheme icons support the following sizes:

small: 16px
medium: 24px
large: 32px
xlarge: 60px

Layering

Recipe uses z-indices sparingly, as this can cause maintenance issues with stacking context within Recipe and in downstream applications. In some cases, we carefully use z-index values to properly layer components like modals. Recipe mirrors the MUI z-index values to avoid conflicts with components that were implemented with MUI. While you can override the z-indices, it is discouraged because it will likely have cascading effects.

Our currently specified z-indices:

EzModal: 1300
EzAutosuggest: 1350
EzDateInput: 1350
EzPopover: 1350
EzSelect: 1350
EzTimeInput: 1350
EzTooltip: 1500

Current theme

Theme

Contents