Skip to content
/ leo Public

Design tokens for the Brave's design system known as Leo

License

Notifications You must be signed in to change notification settings

brave/leo

Folders and files

NameName
Last commit message
Last commit date
Feb 26, 2025
Jun 5, 2024
Feb 20, 2025
Feb 25, 2025
Mar 6, 2025
Jun 29, 2023
Sep 11, 2023
Sep 30, 2022
Oct 27, 2023
Feb 1, 2023
Oct 30, 2024
Feb 1, 2023
Aug 18, 2024
Jan 24, 2023
Feb 1, 2023
Mar 5, 2025
Mar 5, 2025
Oct 15, 2024
Nov 17, 2023
Nov 17, 2023
Jul 23, 2024
Jun 5, 2024

Repository files navigation

Leo - Brave's Design System

Tokens

The tokens part of this package is supposed to be used together with the Design Tokens plugin for Figma. It transforms the exported design tokens using Amazon style dictionary. Destination formats for these tokens include CSS variables, Tailwind configuration, C++ (skia variables), Java and Swift. The output files will be created at /build by running npm run transform-tokens which will also run upon install - regularly or when this package is used as a dependency.

Components

For component creation see components.

Note: components depend on the css variables so make sure they're available on your page somewhere.

Web Components

Web Component wrappers are generated at build time and are available in the top level web-components folder.

React

React wrappers are generated at build time and are available in the top level react folder.

CSS

To get started with the CSS variables exported, you must have the contents of build/css/variables.css included in your html page. Perhaps directly through a <link rel="stylesheet"> element, or indirectly through webpack's css-loader and import '@brave/leo/build/css/variables.css'.

Typography

Individual typography variables are available but so are convenient combined font declarations:

--typography-text-default-regular-font-size: 14px;
--typography-text-default-regular-letter-spacing: 0;
--typography-text-default-regular-line-height: 20px;
--typography-text-default-regular-paragraph-indent: 0;
--typography-text-default-regular-paragraph-spacing: 0;

--font-text-default-regular: 400 14px/20px Poppins;

Colors

Any color in Brave's standard or extended palettes is available in a dark and light versions:

--color-light-text-primary: rgb(29, 31, 37);
--color-dark-text-primary: rgb(236, 239, 242);

However, there are color variables which will select the light or dark version automatically:

/* sometimes this */
--color-text-primary: rgb(29, 31, 37);

/* or this */
--color-text-primary: rgb(236, 239, 242);

The relevant light or dark version is selected by:

  • The current global @media (prefers-color-scheme: [value]) value
  • The closest HTML ancestor with a data-theme attribute, e.g.
<div class="footer" data-theme="dark">
  <p style="color: var(--color-text-primary);">I am always in dark mode</p>
</div>

All Web Components and css variables aim to use the color theme according to the nearest ancestor which defines an override using a data-theme="[dark|light]" attribute

Tailwind

A tailwind config, complete with plugin, is available at @brave/leo/build/tailwind/index.js. Once you configure this, all variables should be available using the theme() function.