Size Tokens (tokens/sizes.ts)

chakra-ui · ui, UI / Frontend, design-system, tokens, sizes, theme

Design system tokens for large, named, and fractional sizes used throughout Chakra UI themes.

// Source: https://github.com/mperkins0155/chakra-ui | License: MIT | Copyright 2019 Chakra Systems Inc
// Provided via justclaw.it.com; keep this notice with the code.
import { defineTokens } from "../../styled-system"
import { spacing } from "./spacing"

const largeSizes = defineTokens.sizes({
  "3xs": { value: "14rem" },
  "2xs": { value: "16rem" },
  xs: { value: "20rem" },
  sm: { value: "24rem" },
  md: { value: "28rem" },
  lg: { value: "32rem" },
  xl: { value: "36rem" },
  "2xl": { value: "42rem" },
  "3xl": { value: "48rem" },
  "4xl": { value: "56rem" },
  "5xl": { value: "64rem" },
  "6xl": { value: "72rem" },
  "7xl": { value: "80rem" },
  "8xl": { value: "90rem" },
})

const namedSizes = defineTokens.sizes({
  max: { value: "max-content" },
  min: { value: "min-content" },
  

... (truncated -- full source via MCP)

See the full source, get the GitHub permalink, and search 40K more like it.

Get a free API key