@hakuna-matata-ui/styled-system/dist/declarations/src/theming.types.d.ts

Style function for css-in-js building component libraries

// regenerate by running
// npx @hakuna-matata-ui/cli tokens path/to/your/theme.(js|ts)
export interface ThemeTypings {
  borders: "none" | "1px" | "2px" | "4px" | "8px"
  breakpoints: "base" | "sm" | "md" | "lg" | "xl" | "2xl"
  colors:
    | "transparent"
    | "current"
    | "black"
    | "white"
    | "whiteAlpha.50"
    | "whiteAlpha.100"
    | "whiteAlpha.200"
    | "whiteAlpha.300"
    | "whiteAlpha.400"
    | "whiteAlpha.500"
    | "whiteAlpha.600"
    | "whiteAlpha.700"
    | "whiteAlpha.800"
    | "whiteAlpha.900"
    | "blackAlpha.50"
    | "blackAlpha.100"
    | "blackAlpha.200"
    | "blackAlpha.300"
    | "blackAlpha.400"
    | "blackAlpha.500"
    | "blackAlpha.600"
    | "blackAlpha.700"
    | "blackAlpha.800"
    | "blackAlpha.900"
    | "gray.50"
    | "gray.100"
    | "gray.200"
    | "gray.300"
    | "gray.400"
    | "gray.500"
    | "gray.600"
    | "gray.700"
    | "gray.800"
    | "gray.900"
    | "red.50"
    | "red.100"
    | "red.200"
    | "red.300"
    | "red.400"
    | "red.500"
    | "red.600"
    | "red.700"
    | "red.800"
    | "red.900"
    | "orange.50"
    | "orange.100"
    | "orange.200"
    | "orange.300"
    | "orange.400"
    | "orange.500"
    | "orange.600"
    | "orange.700"
    | "orange.800"
    | "orange.900"
    | "yellow.50"
    | "yellow.100"
    | "yellow.200"
    | "yellow.300"
    | "yellow.400"
    | "yellow.500"
    | "yellow.600"
    | "yellow.700"
    | "yellow.800"
    | "yellow.900"
    | "green.50"
    | "green.100"
    | "green.200"
    | "green.300"
    | "green.400"
    | "green.500"
    | "green.600"
    | "green.700"
    | "green.800"
    | "green.900"
    | "teal.50"
    | "teal.100"
    | "teal.200"
    | "teal.300"
    | "teal.400"
    | "teal.500"
    | "teal.600"
    | "teal.700"
    | "teal.800"
    | "teal.900"
    | "blue.50"
    | "blue.100"
    | "blue.200"
    | "blue.300"
    | "blue.400"
    | "blue.500"
    | "blue.600"
    | "blue.700"
    | "blue.800"
    | "blue.900"
    | "cyan.50"
    | "cyan.100"
    | "cyan.200"
    | "cyan.300"
    | "cyan.400"
    | "cyan.500"
    | "cyan.600"
    | "cyan.700"
    | "cyan.800"
    | "cyan.900"
    | "purple.50"
    | "purple.100"
    | "purple.200"
    | "purple.300"
    | "purple.400"
    | "purple.500"
    | "purple.600"
    | "purple.700"
    | "purple.800"
    | "purple.900"
    | "pink.50"
    | "pink.100"
    | "pink.200"
    | "pink.300"
    | "pink.400"
    | "pink.500"
    | "pink.600"
    | "pink.700"
    | "pink.800"
    | "pink.900"
    | "linkedin.50"
    | "linkedin.100"
    | "linkedin.200"
    | "linkedin.300"
    | "linkedin.400"
    | "linkedin.500"
    | "linkedin.600"
    | "linkedin.700"
    | "linkedin.800"
    | "linkedin.900"
    | "facebook.50"
    | "facebook.100"
    | "facebook.200"
    | "facebook.300"
    | "facebook.400"
    | "facebook.500"
    | "facebook.600"
    | "facebook.700"
    | "facebook.800"
    | "facebook.900"
    | "messenger.50"
    | "messenger.100"
    | "messenger.200"
    | "messenger.300"
    | "messenger.400"
    | "messenger.500"
    | "messenger.600"
    | "messenger.700"
    | "messenger.800"
    | "messenger.900"
    | "whatsapp.50"
    | "whatsapp.100"
    | "whatsapp.200"
    | "whatsapp.300"
    | "whatsapp.400"
    | "whatsapp.500"
    | "whatsapp.600"
    | "whatsapp.700"
    | "whatsapp.800"
    | "whatsapp.900"
    | "twitter.50"
    | "twitter.100"
    | "twitter.200"
    | "twitter.300"
    | "twitter.400"
    | "twitter.500"
    | "twitter.600"
    | "twitter.700"
    | "twitter.800"
    | "twitter.900"
    | "telegram.50"
    | "telegram.100"
    | "telegram.200"
    | "telegram.300"
    | "telegram.400"
    | "telegram.500"
    | "telegram.600"
    | "telegram.700"
    | "telegram.800"
    | "telegram.900"
  colorSchemes:
    | "whiteAlpha"
    | "blackAlpha"
    | "gray"
    | "red"
    | "orange"
    | "yellow"
    | "green"
    | "teal"
    | "blue"
    | "cyan"
    | "purple"
    | "pink"
    | "linkedin"
    | "facebook"
    | "messenger"
    | "whatsapp"
    | "twitter"
    | "telegram"
  fonts: "heading" | "body" | "mono"
  fontSizes:
    | "xs"
    | "sm"
    | "md"
    | "lg"
    | "xl"
    | "2xl"
    | "3xl"
    | "4xl"
    | "5xl"
    | "6xl"
    | "7xl"
    | "8xl"
    | "9xl"
  fontWeights:
    | "hairline"
    | "thin"
    | "light"
    | "normal"
    | "medium"
    | "semibold"
    | "bold"
    | "extrabold"
    | "black"
  layerStyles: never
  letterSpacings: "tighter" | "tight" | "normal" | "wide" | "wider" | "widest"
  lineHeights:
    | "3"
    | "4"
    | "5"
    | "6"
    | "7"
    | "8"
    | "9"
    | "10"
    | "normal"
    | "none"
    | "shorter"
    | "short"
    | "base"
    | "tall"
    | "taller"
  radii: "none" | "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"
  shadows:
    | "xs"
    | "sm"
    | "base"
    | "md"
    | "lg"
    | "xl"
    | "2xl"
    | "outline"
    | "inner"
    | "none"
    | "dark-lg"
  sizes:
    | "1"
    | "2"
    | "3"
    | "4"
    | "5"
    | "6"
    | "7"
    | "8"
    | "9"
    | "10"
    | "12"
    | "14"
    | "16"
    | "20"
    | "24"
    | "28"
    | "32"
    | "36"
    | "40"
    | "44"
    | "48"
    | "52"
    | "56"
    | "60"
    | "64"
    | "72"
    | "80"
    | "96"
    | "px"
    | "0.5"
    | "1.5"
    | "2.5"
    | "3.5"
    | "max"
    | "min"
    | "full"
    | "3xs"
    | "2xs"
    | "xs"
    | "sm"
    | "md"
    | "lg"
    | "xl"
    | "2xl"
    | "3xl"
    | "4xl"
    | "5xl"
    | "6xl"
    | "7xl"
    | "8xl"
    | "container.sm"
    | "container.md"
    | "container.lg"
    | "container.xl"
  space:
    | "1"
    | "-1"
    | "2"
    | "-2"
    | "3"
    | "-3"
    | "4"
    | "-4"
    | "5"
    | "-5"
    | "6"
    | "-6"
    | "7"
    | "-7"
    | "8"
    | "-8"
    | "9"
    | "-9"
    | "10"
    | "-10"
    | "12"
    | "-12"
    | "14"
    | "-14"
    | "16"
    | "-16"
    | "20"
    | "-20"
    | "24"
    | "-24"
    | "28"
    | "-28"
    | "32"
    | "-32"
    | "36"
    | "-36"
    | "40"
    | "-40"
    | "44"
    | "-44"
    | "48"
    | "-48"
    | "52"
    | "-52"
    | "56"
    | "-56"
    | "60"
    | "-60"
    | "64"
    | "-64"
    | "72"
    | "-72"
    | "80"
    | "-80"
    | "96"
    | "-96"
    | "px"
    | "-px"
    | "0.5"
    | "-0.5"
    | "1.5"
    | "-1.5"
    | "2.5"
    | "-2.5"
    | "3.5"
    | "-3.5"
  textStyles: never
  transition: never
  zIndices:
    | "hide"
    | "auto"
    | "base"
    | "docked"
    | "dropdown"
    | "sticky"
    | "banner"
    | "overlay"
    | "modal"
    | "popover"
    | "skipLink"
    | "toast"
    | "tooltip"
  components: {
    Accordion: {
      sizes: never
      variants: never
    }
    Alert: {
      sizes: never
      variants: "subtle" | "left-accent" | "top-accent" | "solid"
    }
    Avatar: {
      sizes: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full"
      variants: never
    }
    Badge: {
      sizes: never
      variants: "solid" | "subtle" | "outline"
    }
    Breadcrumb: {
      sizes: never
      variants: never
    }
    Button: {
      sizes: "lg" | "md" | "sm" | "xs"
      variants: "ghost" | "outline" | "solid" | "link" | "unstyled"
    }
    Checkbox: {
      sizes: "sm" | "md" | "lg"
      variants: never
    }
    CloseButton: {
      sizes: "lg" | "md" | "sm"
      variants: never
    }
    Code: {
      sizes: never
      variants: "solid" | "subtle" | "outline"
    }
    Container: {
      sizes: never
      variants: never
    }
    Divider: {
      sizes: never
      variants: "solid" | "dashed"
    }
    Drawer: {
      sizes: "xs" | "sm" | "md" | "lg" | "xl" | "full"
      variants: never
    }
    Editable: {
      sizes: never
      variants: never
    }
    Form: {
      sizes: never
      variants: never
    }
    FormLabel: {
      sizes: never
      variants: never
    }
    Heading: {
      sizes: "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs"
      variants: never
    }
    Input: {
      sizes: "lg" | "md" | "sm" | "xs"
      variants: "outline" | "filled" | "flushed" | "unstyled"
    }
    Kbd: {
      sizes: never
      variants: never
    }
    Link: {
      sizes: never
      variants: never
    }
    List: {
      sizes: never
      variants: never
    }
    Menu: {
      sizes: never
      variants: never
    }
    Modal: {
      sizes:
        | "xs"
        | "sm"
        | "md"
        | "lg"
        | "xl"
        | "2xl"
        | "3xl"
        | "4xl"
        | "5xl"
        | "6xl"
        | "full"
      variants: never
    }
    NumberInput: {
      sizes: "xs" | "sm" | "md" | "lg"
      variants: "outline" | "filled" | "flushed" | "unstyled"
    }
    PinInput: {
      sizes: "lg" | "md" | "sm" | "xs"
      variants: "outline" | "flushed" | "filled" | "unstyled"
    }
    Popover: {
      sizes: never
      variants: never
    }
    Progress: {
      sizes: "xs" | "sm" | "md" | "lg"
      variants: never
    }
    Radio: {
      sizes: "md" | "lg" | "sm"
      variants: never
    }
    Select: {
      sizes: "lg" | "md" | "sm" | "xs"
      variants: "outline" | "filled" | "flushed" | "unstyled"
    }
    Skeleton: {
      sizes: never
      variants: never
    }
    SkipLink: {
      sizes: never
      variants: never
    }
    Slider: {
      sizes: "lg" | "md" | "sm"
      variants: never
    }
    Spinner: {
      sizes: "xs" | "sm" | "md" | "lg" | "xl"
      variants: never
    }
    Stat: {
      sizes: "md"
      variants: never
    }
    Switch: {
      sizes: "sm" | "md" | "lg"
      variants: never
    }
    Table: {
      sizes: "sm" | "md" | "lg"
      variants: "simple" | "striped" | "unstyled"
    }
    Tabs: {
      sizes: "sm" | "md" | "lg"
      variants:
        | "line"
        | "enclosed"
        | "enclosed-colored"
        | "soft-rounded"
        | "solid-rounded"
        | "unstyled"
    }
    Tag: {
      sizes: "sm" | "md" | "lg"
      variants: "subtle" | "solid" | "outline"
    }
    Textarea: {
      sizes: "xs" | "sm" | "md" | "lg"
      variants: "outline" | "flushed" | "filled" | "unstyled"
    }
    Tooltip: {
      sizes: never
      variants: never
    }
    FormError: {
      sizes: never
      variants: never
    }
  }
}