Default Theme

Theme tokens are categorized.

If you want to customize the theme, please check Customize Theme.

Colors

color, borderColor, backgroundColor, fill, stroke, etc., refer to this token.

Each component has a concept called colorScheme. colorScheme is generated based on this token. There are conditions for generation, and it is generated when Tone (from 50 to 950)

Semantics

primary

#4387f4

secondary

#895af6

info

#4387f4

success

#1ba14c

warning

#f97415

danger

#ea4334

link

#4387f4

primary, secondary, info, success, warning, danger, link are defined by semantic tokens. For more details, please check here.

BlackAlpha

blackAlpha 50

rgba(0, 0, 0, 0.04)

blackAlpha 100

rgba(0, 0, 0, 0.06)

blackAlpha 200

rgba(0, 0, 0, 0.08)

blackAlpha 300

rgba(0, 0, 0, 0.16)

blackAlpha 400

rgba(0, 0, 0, 0.24)

blackAlpha 500

rgba(0, 0, 0, 0.36)

blackAlpha 600

rgba(0, 0, 0, 0.48)

blackAlpha 700

rgba(0, 0, 0, 0.64)

blackAlpha 800

rgba(0, 0, 0, 0.80)

blackAlpha 900

rgba(0, 0, 0, 0.92)

blackAlpha 950

rgba(0, 0, 0, 0.96)

WhiteAlpha

whiteAlpha 50

rgba(255, 255, 255, 0.04)

whiteAlpha 100

rgba(255, 255, 255, 0.06)

whiteAlpha 200

rgba(255, 255, 255, 0.08)

whiteAlpha 300

rgba(255, 255, 255, 0.16)

whiteAlpha 400

rgba(255, 255, 255, 0.24)

whiteAlpha 500

rgba(255, 255, 255, 0.36)

whiteAlpha 600

rgba(255, 255, 255, 0.48)

whiteAlpha 700

rgba(255, 255, 255, 0.64)

whiteAlpha 800

rgba(255, 255, 255, 0.80)

whiteAlpha 900

rgba(255, 255, 255, 0.92)

whiteAlpha 950

rgba(255, 255, 255, 0.96)

Gray

gray 50

#dedfe3

gray 100

#d3d5da

gray 200

#b7bbc3

gray 300

#9ea3ae

gray 400

#828997

gray 500

#6b7280

gray 600

#565c67

gray 700

#434851

gray 800

#2e3138

gray 900

#1c1e21

gray 950

#101113

Neutral

neutral 50

#dedede

neutral 100

#d4d4d4

neutral 200

#bababa

neutral 300

#a3a3a3

neutral 400

#8a8a8a

neutral 500

#737373

neutral 600

#5c5c5c

neutral 700

#474747

neutral 800

#303030

neutral 900

#1c1c1c

neutral 950

#0f0f0f

Red

red 50

#fdeae8

red 100

#fbd9d5

red 200

#f6b2ac

red 300

#f28c82

red 400

#ee6a5d

red 500

#ea4334

red 600

#de2817

red 700

#b42013

red 800

#8a190f

red 900

#66120b

red 950

#530f09

Rose

rose 50

#feecef

rose 100

#fdd8de

rose 200

#fbb2be

rose 300

#f88b9d

rose 400

#f6657d

rose 500

#f43e5c

rose 600

#f2183c

rose 700

#cf0c2d

rose 800

#a40a23

rose 900

#7d071b

rose 950

#650616

Pink

pink 50

#fde8ed

pink 100

#fcd9e3

pink 200

#f9b9ca

pink 300

#f693ad

pink 400

#f37295

pink 500

#f0517c

pink 600

#ec275c

pink 700

#d81347

pink 800

#ae0f39

pink 900

#880c2d

pink 950

#710a25

Flashy

flashy 50

#fdedf5

flashy 100

#fbdaeb

flashy 200

#f7b5d6

flashy 300

#f390c2

flashy 400

#ef6bad

flashy 500

#ec4699

flashy 600

#e82185

flashy 700

#c6156e

flashy 800

#a21159

flashy 900

#780d42

flashy 950

#660b38

Orange

orange 50

#fef0e6

orange 100

#fee4d2

orange 200

#fdc7a1

orange 300

#fbac74

orange 400

#fa9247

orange 500

#f97415

orange 600

#e06106

orange 700

#b34d05

orange 800

#863a03

orange 900

#5e2902

orange 950

#461e02

Amber

amber 50

#fdf0d8

amber 100

#fde8c4

amber 200

#fbd593

amber 300

#f9c367

amber 400

#f7b23b

amber 500

#f59f0a

amber 600

#ce8509

amber 700

#a26907

amber 800

#764c05

amber 900

#4e3303

amber 950

#362302

Yellow

yellow 50

#fef4d7

yellow 100

#feefc3

yellow 200

#fde290

yellow 300

#fdd663

yellow 400

#fcc931

yellow 500

#fbbd04

yellow 600

#ce9b03

yellow 700

#a67d03

yellow 800

#795b02

yellow 900

#503d01

yellow 950

#372a01

Lime

lime 50

#e7facc

lime 100

#ddf7b5

lime 200

#c7f287

lime 300

#b2ee59

lime 400

#9de92b

lime 500

#82cb15

lime 600

#6ba611

lime 700

#507d0d

lime 800

#385809

lime 900

#1e2e05

lime 950

#121c03

Green

green 50

#cff7de

green 100

#b5f2cb

green 200

#85eaaa

green 300

#51e186

green 400

#23d163

green 500

#1ba14c

green 600

#16833e

green 700

#126932

green 800

#0d4e25

green 900

#083017

green 950

#062311

Emerald

emerald 50

#d0fbed

emerald 100

#b4f8e2

emerald 200

#80f4cd

emerald 300

#4defb9

emerald 400

#19eba5

emerald 500

#10b77f

emerald 600

#0d9165

emerald 700

#096748

emerald 800

#06422e

emerald 900

#021710

emerald 950

#000503

Teal

teal 50

#cdf9f4

teal 100

#b1f6ee

teal 200

#7ef1e3

teal 300

#51ecda

teal 400

#1ee6cf

teal 500

#14b8a5

teal 600

#108e80

teal 700

#0c6a5f

teal 800

#07403a

teal 900

#031c19

teal 950

#010504

Cyan

cyan 50

#cef6fd

cyan 100

#b0f1fd

cyan 200

#7ee8fb

cyan 300

#4de0f9

cyan 400

#16d6f8

cyan 500

#07b6d5

cyan 600

#0590a8

cyan 700

#046e81

cyan 800

#034854

cyan 900

#012228

cyan 950

#011114

Sky

sky 50

#ddf3fd

sky 100

#c5eafc

sky 200

#95d9f9

sky 300

#65c8f6

sky 400

#35b7f3

sky 500

#0da2e7

sky 600

#0b87c1

sky 700

#096995

sky 800

#064e6f

sky 900

#042f43

sky 950

#032230

Blue

blue 50

#e2edfd

blue 100

#cfe0fc

blue 200

#adcbfa

blue 300

#8bb5f8

blue 400

#659cf6

blue 500

#4387f4

blue 600

#186bf2

blue 700

#0c59d4

blue 800

#0a47a9

blue 900

#07357d

blue 950

#062c6a

Indigo

indigo 50

#e8e8fd

indigo 100

#d9dafc

indigo 200

#bdbef9

indigo 300

#9c9ef6

indigo 400

#8082f4

indigo 500

#6467f2

indigo 600

#3a3dee

indigo 700

#1417e6

indigo 800

#1114c0

indigo 900

#0d0f96

indigo 950

#0b0d83

Violet

violet 50

#eee7fe

violet 100

#e3d8fd

violet 200

#cbb6fb

violet 300

#b699fa

violet 400

#a17cf8

violet 500

#895af6

violet 600

#6d34f4

violet 700

#500ced

violet 800

#410ac2

violet 900

#34089b

violet 950

#2e0788

Purple

purple 50

#f0e2fe

purple 100

#e9d3fd

purple 200

#d7b1fb

purple 300

#c994fa

purple 400

#b772f8

purple 500

#a855f7

purple 600

#9229f5

purple 700

#7e0bea

purple 800

#6609be

purple 900

#510797

purple 950

#44067f

const colors = {
  transparent: "transparent",
  current: "currentColor",
  black: "#141414",
  white: "#fbfbfb",
  border: ["#dcdcde", "#434248"],
  focus: "#0070F0",

  whiteAlpha: {
    50: "rgba(255, 255, 255, 0.04)",
    100: "rgba(255, 255, 255, 0.06)",
    200: "rgba(255, 255, 255, 0.08)",
    300: "rgba(255, 255, 255, 0.16)",
    400: "rgba(255, 255, 255, 0.24)",
    500: "rgba(255, 255, 255, 0.36)",
    600: "rgba(255, 255, 255, 0.48)",
    700: "rgba(255, 255, 255, 0.64)",
    800: "rgba(255, 255, 255, 0.80)",
    900: "rgba(255, 255, 255, 0.92)",
    950: "rgba(255, 255, 255, 0.96)",
  },

  blackAlpha: {
    50: "rgba(0, 0, 0, 0.04)",
    100: "rgba(0, 0, 0, 0.06)",
    200: "rgba(0, 0, 0, 0.08)",
    300: "rgba(0, 0, 0, 0.16)",
    400: "rgba(0, 0, 0, 0.24)",
    500: "rgba(0, 0, 0, 0.36)",
    600: "rgba(0, 0, 0, 0.48)",
    700: "rgba(0, 0, 0, 0.64)",
    800: "rgba(0, 0, 0, 0.80)",
    900: "rgba(0, 0, 0, 0.92)",
    950: "rgba(0, 0, 0, 0.96)",
  },

  gray: {
    50: "#dedfe3",
    100: "#d3d5da",
    200: "#b7bbc3",
    300: "#9ea3ae",
    400: "#828997",
    500: "#6b7280",
    600: "#565c67",
    700: "#434851",
    800: "#2e3138",
    900: "#1c1e21",
    950: "#101113",
  },

  neutral: {
    50: "#dedede",
    100: "#d4d4d4",
    200: "#bababa",
    300: "#a3a3a3",
    400: "#8a8a8a",
    500: "#737373",
    600: "#5c5c5c",
    700: "#474747",
    800: "#303030",
    900: "#1c1c1c",
    950: "#0f0f0f",
  },

  red: {
    50: "#fdeae8",
    100: "#fbd9d5",
    200: "#f6b2ac",
    300: "#f28c82",
    400: "#ee6a5d",
    500: "#ea4334",
    600: "#de2817",
    700: "#b42013",
    800: "#8a190f",
    900: "#66120b",
    950: "#530f09",
  },

  rose: {
    50: "#feecef",
    100: "#fdd8de",
    200: "#fbb2be",
    300: "#f88b9d",
    400: "#f6657d",
    500: "#f43e5c",
    600: "#f2183c",
    700: "#cf0c2d",
    800: "#a40a23",
    900: "#7d071b",
    950: "#650616",
  },

  pink: {
    50: "#fde8ed",
    100: "#fcd9e3",
    200: "#f9b9ca",
    300: "#f693ad",
    400: "#f37295",
    500: "#f0517c",
    600: "#ec275c",
    700: "#d81347",
    800: "#ae0f39",
    900: "#880c2d",
    950: "#710a25",
  },

  flashy: {
    50: "#fdedf5",
    100: "#fbdaeb",
    200: "#f7b5d6",
    300: "#f390c2",
    400: "#ef6bad",
    500: "#ec4699",
    600: "#e82185",
    700: "#c6156e",
    800: "#a21159",
    900: "#780d42",
    950: "#660b38",
  },

  orange: {
    50: "#fef0e6",
    100: "#fee4d2",
    200: "#fdc7a1",
    300: "#fbac74",
    400: "#fa9247",
    500: "#f97415",
    600: "#e06106",
    700: "#b34d05",
    800: "#863a03",
    900: "#5e2902",
    950: "#461e02",
  },

  amber: {
    50: "#fdf0d8",
    100: "#fde8c4",
    200: "#fbd593",
    300: "#f9c367",
    400: "#f7b23b",
    500: "#f59f0a",
    600: "#ce8509",
    700: "#a26907",
    800: "#764c05",
    900: "#4e3303",
    950: "#362302",
  },

  yellow: {
    50: "#fef4d7",
    100: "#feefc3",
    200: "#fde290",
    300: "#fdd663",
    400: "#fcc931",
    500: "#fbbd04",
    600: "#ce9b03",
    700: "#a67d03",
    800: "#795b02",
    900: "#503d01",
    950: "#372a01",
  },

  lime: {
    50: "#e7facc",
    100: "#ddf7b5",
    200: "#c7f287",
    300: "#b2ee59",
    400: "#9de92b",
    500: "#82cb15",
    600: "#6ba611",
    700: "#507d0d",
    800: "#385809",
    900: "#1e2e05",
    950: "#121c03",
  },

  green: {
    50: "#e0f5e6",
    100: "#d0f1d9",
    200: "#a9e5b9",
    300: "#86da9c",
    400: "#5fce7d",
    500: "#3cc360",
    600: "#31a04f",
    700: "#28813f",
    800: "#1d5e2e",
    900: "#133e1f",
    950: "#0d2b15",
  },

  emerald: {
    50: "#d0fbed",
    100: "#b4f8e2",
    200: "#80f4cd",
    300: "#4defb9",
    400: "#19eba5",
    500: "#10b77f",
    600: "#0d9165",
    700: "#096748",
    800: "#06422e",
    900: "#021710",
    950: "#000503",
  },

  teal: {
    50: "#cdf9f4",
    100: "#b1f6ee",
    200: "#7ef1e3",
    300: "#51ecda",
    400: "#1ee6cf",
    500: "#14b8a5",
    600: "#108e80",
    700: "#0c6a5f",
    800: "#07403a",
    900: "#031c19",
    950: "#010504",
  },

  cyan: {
    50: "#cef6fd",
    100: "#b0f1fd",
    200: "#7ee8fb",
    300: "#4de0f9",
    400: "#16d6f8",
    500: "#07b6d5",
    600: "#0590a8",
    700: "#046e81",
    800: "#034854",
    900: "#012228",
    950: "#011114",
  },

  sky: {
    50: "#ddf3fd",
    100: "#c5eafc",
    200: "#95d9f9",
    300: "#65c8f6",
    400: "#35b7f3",
    500: "#0da2e7",
    600: "#0b87c1",
    700: "#096995",
    800: "#064e6f",
    900: "#042f43",
    950: "#032230",
  },

  blue: {
    50: "#e2edfd",
    100: "#cfe0fc",
    200: "#adcbfa",
    300: "#8bb5f8",
    400: "#659cf6",
    500: "#4387f4",
    600: "#186bf2",
    700: "#0c59d4",
    800: "#0a47a9",
    900: "#07357d",
    950: "#062c6a",
  },

  indigo: {
    50: "#e8e8fd",
    100: "#d9dafc",
    200: "#bdbef9",
    300: "#9c9ef6",
    400: "#8082f4",
    500: "#6467f2",
    600: "#3a3dee",
    700: "#1417e6",
    800: "#1114c0",
    900: "#0d0f96",
    950: "#0b0d83",
  },

  violet: {
    50: "#eee7fe",
    100: "#e3d8fd",
    200: "#cbb6fb",
    300: "#b699fa",
    400: "#a17cf8",
    500: "#895af6",
    600: "#6d34f4",
    700: "#500ced",
    800: "#410ac2",
    900: "#34089b",
    950: "#2e0788",
  },

  purple: {
    50: "#f0e2fe",
    100: "#e9d3fd",
    200: "#d7b1fb",
    300: "#c994fa",
    400: "#b772f8",
    500: "#a855f7",
    600: "#9229f5",
    700: "#7e0bea",
    800: "#6609be",
    900: "#510797",
    950: "#44067f",
  },

  fuchsia: {
    50: "#f9e3fd",
    100: "#f5d0fb",
    200: "#eeaff8",
    300: "#e78af5",
    400: "#e069f2",
    500: "#d948ef",
    600: "#d01eeb",
    700: "#b112ca",
    800: "#900ea4",
    900: "#6b0b7a",
    950: "#5b0967",
  },
}

Copied!

Gradients

backgroundImage・bgGradient refer to this token.

const gradients = {
  // Not defined
}

Copied!

Spaces

margin, padding, gap, top, left, etc., refer to this token.

Token Name	Rem	Pixel
px	1px	1px
0.5	0.125rem	2px
1`(xs)`	0.25rem	4px
1.5	0.375rem	6px
2`(sm)`	0.5rem	8px
2.5	0.625rem	10px
3	0.75rem	12px
3.5	0.875rem	14px
4`(md)`	1rem	16px
4.5	1.125rem	18px
5	1.25rem	20px
5.5	1.375rem	22px
6`(normal)`	1.5rem	24px
6.5	1.625rem	26px
7	1.75rem	28px
7.5	1.875rem	30px
8`(lg)`	2rem	32px
9	2.25rem	36px
10	2.5rem	40px
11	2.75rem	44px
12`(xl)`	3rem	48px
13	3.25rem	52px
14	3.5rem	56px
15	3.75rem	60px
16`(2xl)`	4rem	64px
20	5rem	80px
24`(3xl)`	6rem	96px
28	7rem	112px
32`(4xl)`	8rem	128px
36	9rem	144px
40	10rem	160px
44	11rem	176px
48	12rem	192px
52	13rem	208px
56	14rem	224px
60	15rem	240px
64	16rem	256px
68	17rem	272px
72	18rem	288px
76	19rem	304px
80	20rem	320px
84	21rem	336px
88	22rem	352px
92	23rem	368px
96	24rem	384px

const spaces = {
  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",
  4.5: "1.125rem",
  5: "1.25rem",
  5.5: "1.375rem",
  6: "1.5rem",
  6.5: "1.625rem",
  7: "1.75rem",
  7.5: "1.875rem",
  8: "2rem",
  9: "2.25rem",
  10: "2.5rem",
  11: "2.75rem",
  12: "3rem",
  13: "3.25rem",
  14: "3.5rem",
  15: "3.75rem",
  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",
  68: "17rem",
  72: "18rem",
  76: "19rem",
  80: "20rem",
  84: "21rem",
  88: "22rem",
  92: "23rem",
  96: "24rem",
}

Copied!

Semantics

const semantics = {
  spaces: {
    xs: "0.25rem",
    sm: "0.5rem",
    md: "1rem",
    normal: "1.5rem",
    lg: "2rem",
    xl: "3rem",
    "2xl": "4rem",
    "3xl": "6rem",
    "4xl": "8rem",
  },

  // other tokens...
}

Copied!

Sizes

width, height, inlineSize, blockSize, boxSize, etc., refer to this token.

const sizes = {
  ...spaces,
  max: "max-content",
  min: "min-content",
  full: "100%",
  "9xs": "1rem",
  "8xs": "1.5rem",
  "7xs": "2rem",
  "6xs": "3rem",
  "5xs": "4.5rem",
  "4xs": "6rem",
  "3xs": "7.5rem",
  "2xs": "10rem",
  xs: "15rem",
  sm: "20rem",
  md: "24rem",
  lg: "28rem",
  xl: "32rem",
  "2xl": "36rem",
  "3xl": "42rem",
  "4xl": "48rem",
  "5xl": "56rem",
  "6xl": "64rem",
  "7xl": "72rem",
  "8xl": "80rem",
  "9xl": "90rem",
}

Copied!

The default theme's sizes inherit from spaces.

Typography

Fonts (Font families)

fontFamily refers to this token.

const fonts = {
  heading: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "游ゴシック体", YuGothic, "YuGothic M", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
  body: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "游ゴシック体", YuGothic, "YuGothic M", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
  mono: `SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`,
}

Copied!

FontSizes

fontSize refers to this token.

const fontSizes = {
  "2xs": "0.625rem",
  xs: "0.75rem",
  sm: "0.875rem",
  md: "1rem",
  lg: "1.125rem",
  xl: "1.25rem",
  "2xl": "1.5rem",
  "3xl": "1.875rem",
  "4xl": "2rem",
  "5xl": "2.25rem",
  "6xl": "3rem",
  "7xl": "3.75rem",
  "8xl": "4.5rem",
  "9xl": "6rem",
}

Copied!

FontWeights

fontWeight refers to this token.

const fontWeights = {
  hairline: 100,
  thin: 200,
  light: 300,
  normal: 400,
  medium: 500,
  semibold: 600,
  bold: 700,
  extrabold: 800,
  black: 900,
}

Copied!

LineHeights

lineHeight refers to this token.

const 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",
}

Copied!

LetterSpacings

letterSpacing refers to this token.

const letterSpacings = {
  tighter: "-0.05em",
  tight: "-0.025em",
  normal: "0",
  wide: "0.025em",
  wider: "0.05em",
  widest: "0.1em",
}

Copied!

Borders

border・borderTop・borderInline・borderBlock etc., refer to this token.

const borders = {
  // Not defined
}

Copied!

Blurs

blur・backdropBlur refer to this token.

const blurs = {
  sm: "4px",
  md: "8px",
  lg: "12px",
  xl: "16px",
  "2xl": "24px",
}

Copied!

Radii

borderRadius, rounded, borderTopRightRadius, roundedStart, etc., refer to this token.

const 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",
}

Copied!

Shadows

boxShadow, shadow, textShadow, etc., refer to this token.

const shadows = {
  xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
  sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
  base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
  md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
  lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
  xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
  "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
  "3xl":
    "0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 -25px 50px -12px rgba(0, 0, 0, 0.25)",
  outline: "0 0 0 3px rgb(0, 112, 240)",
  inline: "inset 0 0 0 3px rgb(0, 112, 240)",
  inner: "inset 0 2px 4px 0 rgba(0,0,0,0.06)",
  none: "none",
  "dark-sm":
    "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 2px",
  "dark-md":
    "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px",
  "dark-lg":
    "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px",
}

Copied!

Animations

animation refers to this token.

const animations = {
  // Not defined
}

Copied!

Transitions

transitionProperty refers to this transitions.property.
transitionDuration and animationDuration refer to this transitions.duration.
transitionTimingFunction and animationTimingFunction refer to this transitions.easing.

const transitions = {
  property: {
    common:
      "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
    colors: "background-color, border-color, color, fill, stroke",
    dimensions: "width, height",
    position: "left, right, top, bottom",
    background: "background-color, background-image, background-position",
  },

  easing: {
    "ease-in": "cubic-bezier(0.4, 0, 1, 1)",
    "ease-out": "cubic-bezier(0, 0, 0.2, 1)",
    "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
  },

  duration: {
    "ultra-fast": "50ms",
    faster: "100ms",
    fast: "150ms",
    normal: "200ms",
    slow: "300ms",
    slower: "400ms",
    "ultra-slow": "500ms",
  },
}

Copied!

ZIndices

zIndex refers to this token.

const zIndices = {
  yamcha: 1,
  kurillin: 9,
  nappa: 99,
  guldo: 100,
  jeice: 110,
  burter: 120,
  recoome: 130,
  ginyu: 140,
  zarbon: 150,
  dodoria: 160,
  freeza: 9996,
  vegeta: 9997,
  sonGoku: 9998,
  beerus: 9999,
}

Copied!

Breakpoints

These are the breakpoints used internally in Style Props, useBreakpoint, and useBreakpointValue.

If you want to learn more about responsive styles, please check here.

const breakpoints = {
  sm: "30em",
  md: "48em",
  lg: "61em",
  xl: "80em",
  "2xl": "90em",
}

Copied!

Edit this page on GitHub

PreviousTheming NextCustomize Theme