Theming

The theme object is where you define your application's color palette, type scale, font stacks, breakpoints, border-radius values, and more.

Theming with Admin UI is inspired by the Styled System Theme Specification.

Our library provides a sensible default theme defined by the design system team.

Colors

Color themes are used to reflect a product's style with consistency across all components used on the application. Each color has some specific function when applied to an element on the screen. They can be customized to match the app's style guidelines, reflecting their function.

Our design system provides an accessible default palette to get you up and running. To check how we use them semantically, you can check the Design Tokens section

Typography

The StyleObject accepts the text prop. It combines fontFamily, fontSize, fontVariationSettings, and lineHeight css properties for a consistent font rendering throught the product.

Loading...

Value	Description
$pageTitle	Page header title
$title1	Primary titles
$title2	Nested titles
$action1	Actions text
$action2	Less proeminent actions, such as menus
$display	Totalizer value
$body	Text in tables, modals, toasts, alerts, cards; Text in form fields and controls; Placeholder text in form fields.
$detail	Text in tag, tooltip and table pagination; Form error and help text. Labels in form field placeholders and select inline.

Breakpoints

Our styleguide comes with a predefined set of commonly used breakpoints. Detailed info about Responsive Design

export default {
  breakpoints: ['640px', '768px', '1024px', '1280px'],
}

Spacing

The space key allows you to customize the global spacing and sizing scale for your project. By default these spacing values can be referenced by the padding, margin, and top, left, right, bottom styles.

Multiple Properties: Combines two or more CSS properties into one.

Property	Combines	Description
paddingX	paddingLeft, paddingRight	Horizontal padding
paddingY	paddingTop, paddingBottom	Vertical padding
marginX	marginLeft, marginRight	Horizontal margin
marginY	marginTop, marginBottom	Vertical margin

export default {
  space: {
    0: '0rem',
    1: '0.25rem',
    2: '0.5rem',
    3: '0.75rem',
    4: '1rem',
    5: '1.25rem',
    6: '1.5rem',
    7: '1.75rem',
    8: '2rem',
    px: '0.0625rem',
    '2px': '0.125rem',
  },
}

The values are proportional, so 1 spacing unit is equal to 0.25rem, which translates to 4px by default in common browsers.

tip

Mental model: If you need a spacing of 24px, divide it by 4. That'll give you 6. Then use it in your component.

Token	rem	Pixels	size
0	0rem	0px
px	0.0625rem	1px
2px	0.125rem	2px
1	0.25rem	4px
2	0.5rem	8px
3	0.75rem	12px
4	1rem	16px
5	1.25rem	20px
6	1.50rem	24px
7	1.75rem	28px
8	2rem	32px

Sizes

The sizes key allows you to customize the global sizing of components you build for your project. By default these sizes value can be referenced by the width, height, and maxWidth, minWidth, maxHeight, minHeight styles.

Multiple Properties: Combines two or more CSS properties into one.

Property	Combines	Description
size	width, height	Element size, useful to create a square or perfect circle

export default {
  sizes: {
    sm: '20rem',
    md: '48rem',
    lg: '56rem',
    xl: '64rem',
    '1/2': '50%',
    '1/4': '25%',
    '2/4': '50%',
    '3/4': '75%',
    '1/8': '12.5%',
    '2/8': '25%',
    '3/8': '37.5%',
    '4/8': '50%',
    '5/8': '62.5%',
    '6/8': '75%',
    '7/8': '87.5%',
    '1/12': '8.333333%',
    '2/12': '16.666667%',
    '3/12': '25%',
    '4/12': '33.333333%',
    '5/12': '41.666667%',
    '6/12': '50%',
    '7/12': '58.333333%',
    '8/12': '66.666667%',
    '9/12': '75%',
    '10/12': '83.333333%',
    '11/12': '91.666667%',
    full: '100%',
    screenHeight: '100vh',
    screenWidth: '100vw',
  },
}

Border Radius

Our styleguide comes with a set of smooth corner radius values.

export default {
  borderRadius: {
    default: '4px',
    flat: '0px',
    pill: '100px',
    circle: '100%',
  },
}

Border Variant

The StyleObject accepts the border prop. It is a shortcut for the border variants of the admin-ui.

Loading...

Value	Description
default	the most common border-style used along with all the admin
divider-bottom	add a border dividing the current element with the one below it
divider-top	add a border dividing the current element with the one above it

export default {
  border: {
    default: {
      borderWidth: '1px',
      borderStyle: 'solid',
      borderRadius: 'default',
      borderColor: 'mid.tertiary',
    },
    'divider-bottom': {
      borderBottomWidth: '1px',
      borderBottomStyle: 'solid',
      borderBottomLeftRadius: 0,
      borderBottomRightRadius: 0,
      borderColor: 'mid.tertiary',
    },
    'divider-top': {
      borderTopWidth: '1px',
      borderTopStyle: 'solid',
      borderTopLeftRadius: 0,
      borderTopRightRadius: 0,
      borderColor: 'mid.tertiary',
    },
  },
}