@bnb-chain/uikit

This repository holds the source code to the component library used by this project. It uses Chakra UI under the hood.

If a component is not specific to a page and it does not rely on business logic, it belongs in this project.

If a component needs i18n, you can put the translation in locales/en.ts.

Theme

Colors

Our color scheme works a bit differently than Chakra UI. We have two themes, dark and light.

Colors come in pairs (i.e. every dark color has a light equivalent) so switching themes is seamless.

import { theme, useColorMode } from '@bnb-chain/uikit';
...
const { colorMode } = useColorMode();
...
console.log(theme.colors[colorMode].bg.primary); // #1e2026 in dark mode, #fafafa in light mode.

Sizes

Our size scheme is similar to Chakra UI, which is inspired by Tailwind CSS. Sizes are proportional increments of 4px. There are some half sizes for values regularly used in our project.

| Name | px | | :------: | :------: | | 1 | 4px | | 2 | 8px | | 3 | 12px | | 3.5 | 14px | | 4 | 16px | | ... | | N | (N*4)px |

import { Box, theme, useColorMode } from '@bnb-chain/uikit';
...
console.log(theme.sizes['4']); // 16px
...
<Box fontSize={theme.sizes['4']} /> // ❌ Do not use px for font sizing.
<Box m={theme.sizes['4']} /> // ✅ Use sizes for attributes such as padding, margin, border radius, etc.

Typography

Font sizes follow the same scheme as sizes, except they use rem instead of px.

| Name | rem | | :------: | :----------: | | 1 | 0.25rem | | 2 | 0.5rem | | 3 | 0.75rem | | 3.5 | 0.875rem | | 4 | 1rem | | ... | | N | (N*0.25)rem |

import { Box, theme, useColorMode } from '@bnb-chain/uikit';
...
console.log(theme.fontSizes['4']); // 1rem
...
<Box fontSize={theme.fontSizes['4']} /> // ✅