All Emotion components we build have access to a typed theme object allowing you to have direct access to all the design tokens without any imports.

These are most easily available through our context and accessed via our gamut-styles utility functions.

import { css } from '@codecademy/gamut-styles';
import styled from '@emotion/styled';

// Single value using static color
const Box = styled.div(css({ bg: 'navy-400', p: 4 }));

// Multiple values using ColorMode semantic color
const OtherCoolThing = styled.div(css({ color: 'primary', p: 4 }));
Copy

They can also be accessed directly as the theme prop on every styled component.

import styled from '@emotion/styled';

const styles = styled.div`
  blue: ${({ theme }) => theme.colors.blue};
`;
Copy

Or by importing the object from @codecademy/gamut-styles if you are not using a ThemeProvider in your app.

import { css } from '@emotion/react';
import { theme } from '@codecademy/gamut-styles';

const myStyles = css`
  font-size: ${theme.fontSize[14]};
`;
Copy

Color

Key: theme.colors

All current visual identity colors are available on the colors key on the Theme object, this includes named standard colors and their respective swatches.

Standard colors

Standard color atoms we select from in creating designs. All colors on Codecademy properties should adhere to these. Remember your accessibility contrast requirements too!

Solid color swatches

Swatch colors are accessible with a dashcase key theme.colors['${color}-${weight}']. Here's a list of all the solid swatches available.

Navy and white color swatches

With the exception of the weight-100, navy-800, and navy-900 color weights, our navy and white color weights are semi-transparent. Special consideration should be taken when using these colors, especially when overlapping. The white weights, with the non-transparent exceptions, are only visible in dark mode, and the navy weights, with the non-transparent exceptions, are only visible in light mode. You can swap modes using the Color Mode toggle at the top of this screen.

These tokens are also accessible with a dashcase key theme.colors['${color}-${weight}'].

Color modes

We have 2 core color modes that we support: light and dark.

Each color mode consists of a set of aliased color tokens. Each alias has semantic meaning for how the color is used throughout our design system:

• text: The standard text color for all type.
• background: The base background color.
• primary: The color used for interactive elements with a primary action.
• secondary: The color used for interactive elements with a secondary action.

For more on Color Modes please checkout the full color mode documentation

Light mode

Example

Dark mode

Typography

Font family

Key: theme.fontFamily

Font size

Key: theme.fontSize

Font weight

Key: theme.fontWeight

Line height

Key: theme.lineHeight

Space

Spacing

Key: theme.spacing

Layout

Breakpoints

Key: theme.breakpoints

Border Radius

Key: theme.borderRadii