Saas UI theme tokens

The default Saas UI theme tokens

The Saas UI theme is loosely based on the excellent Chakra UI theme. It has a neutral style that looks great out of the box. The theme comes with a bunch of additions that make it easy to adjust it to your brand.

Source
@saas-ui/theme
2.11.2 (latest)

Colors#

Add a theme.colors object to provide colors for your project. By default these colors can be referenced by the color, borderColor, backgroundColor, fill, stroke, styles.

More information about creating your custom palette.

// default color tokens
const palette = {
  transparent: 'transparent',
  black: '#000',
  white: '#fff',
  gray: '#1f2937',
  yellow: '#fbbf24',
  red: '#d00b00',
  green: '#10b981',
  indigo: '#6d5ace',
  blue: '#1e3a8a',
}

export default {
  primary: palette.purple,
  secondary: palette.teal,
  ...palette,
}

Black & White#

Black

#0e1012

White

#FFFFFF

Primary & Secondary#

primary 50

#f9f6fd

primary 100

#e5daf8

primary 200

#d3bef4

primary 300

#b795ec

primary 400

#a379e7

primary 500

#8952e0

primary 600

#7434db

primary 700

#6023c0

primary 800

#4f1d9e

primary 900

#3b1676

secondary 50

#f4fbfd

secondary 100

#d0eef7

secondary 200

#bae7f3

secondary 300

#a2deee

secondary 400

#53c2e1

secondary 500

#2ab4d9

secondary 600

#24a2c4

secondary 700

#1e86a2

secondary 800

#196e85

secondary 900

#135567

Gray#

gray 50

#f9fafa

gray 100

#f1f1f2

gray 200

#e7e7e8

gray 300

#d3d4d5

gray 400

#abadaf

gray 500

#7d7f83

gray 600

#52555a

gray 700

#33373d

gray 800

#1d2025

gray 900

#171a1d

Red#

red 50

#fdf6f5

red 100

#f8d9d8

red 200

#f1b8b4

red 300

#e98d87

red 400

#e4726c

red 500

#dc4a41

red 600

#d2140a

red 700

#ac0900

red 800

#930800

red 900

#6d0600

Orange#

orange 50

#fdfaf6

orange 100

#f9ebdb

orange 200

#f1d4b1

orange 300

#e6b273

orange 400

#dc9239

orange 500

#c37b24

orange 600

#a5681e

orange 700

#835318

orange 800

#674113

orange 900

#553610

Yellow#

yellow 50

#fffefb

yellow 100

#fff8e9

yellow 200

#feecbd

yellow 300

#fddc87

yellow 400

#fbc434

yellow 500

#d2a01e

yellow 600

#a88018

yellow 700

#836413

yellow 800

#624b0e

yellow 900

#513e0c

Green#

green 50

#f7fdfb

green 100

#d2f2e7

green 200

#9fe3cd

green 300

#64d2ad

green 400

#1dbd88

green 500

#0ea371

green 600

#0c875e

green 700

#096949

green 800

#07563c

green 900

#064731

Teal#

teal 50

#f1fcfc

teal 100

#c0f1f4

teal 200

#84e4e9

teal 300

#2dd1da

teal 400

#22b2ba

teal 500

#1d979e

teal 600

#187b80

teal 700

#125f64

teal 800

#0f5053

teal 900

#0d4244

Blue#

blue 50

#f1f6fd

blue 100

#cde0f6

blue 200

#a8c8f0

blue 300

#7fafe8

blue 400

#5896e1

blue 500

#347fdb

blue 600

#236abf

blue 700

#1b5192

blue 800

#164278

blue 900

#123662

Cyan#

cyan 50

#f4fbfd

cyan 100

#d0eef7

cyan 200

#bae7f3

cyan 300

#a2deee

cyan 400

#53c2e1

cyan 500

#2ab4d9

cyan 600

#24a2c4

cyan 700

#1e86a2

cyan 800

#196e85

cyan 900

#135567

Purple#

purple 50

#f9f6fd

purple 100

#e5daf8

purple 200

#d3bef4

purple 300

#b795ec

purple 400

#a379e7

purple 500

#8952e0

purple 600

#7434db

purple 700

#6023c0

purple 800

#4f1d9e

purple 900

#3b1676

Pink#

pink 50

#fdf5f9

pink 100

#f8d9e7

pink 200

#f3b9d3

pink 300

#eb8db8

pink 400

#e56ba2

pink 500

#dc3882

pink 600

#c4246c

pink 700

#a01d58

pink 800

#7d1745

pink 900

#5d1133

Typography#

To manage Typography options, the theme object supports the following keys:

fonts (font families)
fontSizes
fontWeights
lineHeights
letterSpacings

// example theme object
export default {
  colors: {...},
  fonts: {
    body: "Inter, sans-serif",
    heading: "Inter, sans-serif"
  },
  fontSizes: {
    xs: '0.75rem',
    sm: '0.8125rem',
    md: '0.875rem',
    lg: '1',
    xl: '1.125rem',
    '2xl': '1.5rem',
    '3xl': '1.875rem',
    '4xl': '2.25rem',
    '5xl': '3rem',
    '6xl': '3.75rem',
    '7xl': '4.5rem',
    '8xl': '6rem',
    '9xl': '8rem',
  },
  fontWeights: {
    hairline: 100,
    thin: 200,
    light: 300,
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
    extrabold: 800,
    black: 900,
  },
  lineHeights: {
    normal: "normal",
    none: 1,
    shorter: 1.25,
    short: 1.375,
    base: 1.5,
    tall: 1.625,
    taller: "2",
    "3": ".75rem",
    "4": "1rem",
    "5": "1.25rem",
    "6": "1.5rem",
    "7": "1.75rem",
    "8": "2rem",
    "9": "2.25rem",
    "10": "2.5rem",
  },
  letterSpacings: {
    tighter: "-0.05em",
    tight: "-0.025em",
    normal: "0",
    wide: "0.025em",
    wider: "0.05em",
    widest: "0.1em",
  },
};

Breakpoints#

Saas UI comes with an predefined set of breakpoints.

Learn more about Responsive Styles and Customizing Breakpoints.

// theme.js
import { createBreakpoints } from '@chakra-ui/theme-tools'

export default createBreakpoints({
  sm: '30em',
  md: '48em',
  lg: '62em',
  xl: '80em',
  '2xl': '96em',
})

Spacing#

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

export default {
  space: {
    px: '1px',
    0.5: '0.125rem',
    1: '0.25rem',
    1.5: '0.375rem',
    2: '0.5rem',
    2.5: '0.625rem',
    3: '0.75rem',
    3.5: '0.875rem',
    4: '1rem',
    5: '1.25rem',
    6: '1.5rem',
    7: '1.75rem',
    8: '2rem',
    9: '2.25rem',
    10: '2.5rem',
    12: '3rem',
    14: '3.5rem',
    16: '4rem',
    20: '5rem',
    24: '6rem',
    28: '7rem',
    32: '8rem',
    36: '9rem',
    40: '10rem',
    44: '11rem',
    48: '12rem',
    52: '13rem',
    56: '14rem',
    60: '15rem',
    64: '16rem',
    72: '18rem',
    80: '20rem',
    96: '24rem',
  },
}

By default, Chakra includes a comprehensive numeric spacing scale inspired by Tailwind CSS. The values are proportional, so 1 spacing unit is equal to 0.25rem, which translates to 4px by default in common browsers.

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

Name	Space	Pixels
px	1px	1px
0.5	0.125rem	2px
1	0.25rem	4px
1.5	0.375rem	6px
2	0.5rem	8px
2.5	0.625rem	10px
3	0.75rem	12px
3.5	0.875rem	14px
4	1rem	16px
5	1.25rem	20px
6	1.5rem	24px
7	1.75rem	28px
8	2rem	32px
9	2.25rem	36px
10	2.5rem	40px
12	3rem	48px
14	3.5rem	56px
16	4rem	64px
20	5rem	80px
24	6rem	96px
28	7rem	112px
32	8rem	128px
36	9rem	144px
40	10rem	160px
44	11rem	176px
48	12rem	192px
56	14rem	224px
60	15rem	240px
64	16rem	256px
72	18rem	288px
80	20rem	320px
96	24rem	384px

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.

export default {
  sizes: {
    ...theme.space,
    max: 'max-content',
    min: 'min-content',
    full: '100%',
    '3xs': '14rem',
    '2xs': '16rem',
    xs: '20rem',
    sm: '24rem',
    md: '28rem',
    lg: '32rem',
    xl: '36rem',
    '2xl': '42rem',
    '3xl': '48rem',
    '4xl': '56rem',
    '5xl': '64rem',
    '6xl': '72rem',
    '7xl': '80rem',
    '8xl': '90rem',
    container: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1440px',
    },
  },
}

A component like this: <Box w={4} h={3} /> will generate an empty div with width set to 1rem or 16px and height set to 0.75rem or 12px.

Border radius#

Chakra provides a set of smooth corner radius values.

export default {
  radii: {
    none: '0',
    sm: '0.125rem',
    base: '0.25rem',
    md: '0.375rem',
    lg: '0.5rem',
    xl: '0.75rem',
    '2xl': '1rem',
    '3xl': '1.5rem',
    full: '9999px',
  },
}

z-index values#

We recommend trying to solve stacking issues without z-index. You can read our recommendations and learn more about stacking contexts and z-index here.

Chakra provides a minimal set of z-Indices out of the box to help control the stacking order of components.

export default {
  zIndices: {
    hide: -1,
    auto: 'auto',
    base: 0,
    docked: 10,
    dropdown: 1000,
    sticky: 1100,
    banner: 1200,
    overlay: 1300,
    modal: 1400,
    popover: 1500,
    skipLink: 1600,
    toast: 1700,
    tooltip: 1800,
  },
}

Config#

The theme's config is to provide global settings that are used by different parts of the Chakra UI system.

Property	Description	Default
`cssVarPrefix` (v1.4)	The prefix to use for the generated CSS custom properties	`chakra`
`initialColorMode`	The initial color mode your application should start with. Can be either `light` or `dark` mode	`light`
`useSystemColorMode`	If `true`, the chakra system will update color mode based on your system preferences	`false`

You can leverage the extendTheme function to override a specific theme config property.

const theme = extendTheme({
  config: {
    cssVarPrefix: 'ck',
  },
})

Was this helpful?