UNPKG

@chakra-ui/react

Version:

Responsive and accessible React UI components built with React and Emotion

1,822 lines (1,821 loc) • 38.7 kB
import { breakpoints } from "./breakpoints"; import { globalCss } from "./global-css"; import { layerStyles } from "./layer-styles"; import { animationStyles } from "./motion-styles"; import { recipes } from "./recipes"; import { slotRecipes } from "./slot-recipes"; import { textStyles } from "./text-styles"; import { keyframes } from "./tokens/keyframes"; export declare const tokens: { aspectRatios: { square: { value: string; }; landscape: { value: string; }; portrait: { value: string; }; wide: { value: string; }; ultrawide: { value: string; }; golden: { value: string; }; }; animations: { spin: { value: string; }; ping: { value: string; }; pulse: { value: string; }; bounce: { value: string; }; }; blurs: { none: { value: string; }; sm: { value: string; }; md: { value: string; }; lg: { value: string; }; xl: { value: string; }; "2xl": { value: string; }; "3xl": { value: string; }; "4xl": { value: string; }; }; borders: { xs: { value: string; }; sm: { value: string; }; md: { value: string; }; lg: { value: string; }; xl: { value: string; }; }; colors: { transparent: { value: string; }; current: { value: string; }; black: { value: string; }; white: { value: string; }; whiteAlpha: { 50: { value: string; }; 100: { value: string; }; 200: { value: string; }; 300: { value: string; }; 400: { value: string; }; 500: { value: string; }; 600: { value: string; }; 700: { value: string; }; 800: { value: string; }; 900: { value: string; }; 950: { value: string; }; }; blackAlpha: { 50: { value: string; }; 100: { value: string; }; 200: { value: string; }; 300: { value: string; }; 400: { value: string; }; 500: { value: string; }; 600: { value: string; }; 700: { value: string; }; 800: { value: string; }; 900: { value: string; }; 950: { value: string; }; }; gray: { 50: { value: string; }; 100: { value: string; }; 200: { value: string; }; 300: { value: string; }; 400: { value: string; }; 500: { value: string; }; 600: { value: string; }; 700: { value: string; }; 800: { value: string; }; 900: { value: string; }; 950: { value: string; }; }; red: { 50: { value: string; }; 100: { value: string; }; 200: { value: string; }; 300: { value: string; }; 400: { value: string; }; 500: { value: string; }; 600: { value: string; }; 700: { value: string; }; 800: { value: string; }; 900: { value: string; }; 950: { value: string; }; }; orange: { 50: { value: string; }; 100: { value: string; }; 200: { value: string; }; 300: { value: string; }; 400: { value: string; }; 500: { value: string; }; 600: { value: string; }; 700: { value: string; }; 800: { value: string; }; 900: { value: string; }; 950: { value: string; }; }; yellow: { 50: { value: string; }; 100: { value: string; }; 200: { value: string; }; 300: { value: string; }; 400: { value: string; }; 500: { value: string; }; 600: { value: string; }; 700: { value: string; }; 800: { value: string; }; 900: { value: string; }; 950: { value: string; }; }; green: { 50: { value: string; }; 100: { value: string; }; 200: { value: string; }; 300: { value: string; }; 400: { value: string; }; 500: { value: string; }; 600: { value: string; }; 700: { value: string; }; 800: { value: string; }; 900: { value: string; }; 950: { value: string; }; }; teal: { 50: { value: string; }; 100: { value: string; }; 200: { value: string; }; 300: { value: string; }; 400: { value: string; }; 500: { value: string; }; 600: { value: string; }; 700: { value: string; }; 800: { value: string; }; 900: { value: string; }; 950: { value: string; }; }; blue: { 50: { value: string; }; 100: { value: string; }; 200: { value: string; }; 300: { value: string; }; 400: { value: string; }; 500: { value: string; }; 600: { value: string; }; 700: { value: string; }; 800: { value: string; }; 900: { value: string; }; 950: { value: string; }; }; cyan: { 50: { value: string; }; 100: { value: string; }; 200: { value: string; }; 300: { value: string; }; 400: { value: string; }; 500: { value: string; }; 600: { value: string; }; 700: { value: string; }; 800: { value: string; }; 900: { value: string; }; 950: { value: string; }; }; purple: { 50: { value: string; }; 100: { value: string; }; 200: { value: string; }; 300: { value: string; }; 400: { value: string; }; 500: { value: string; }; 600: { value: string; }; 700: { value: string; }; 800: { value: string; }; 900: { value: string; }; 950: { value: string; }; }; pink: { 50: { value: string; }; 100: { value: string; }; 200: { value: string; }; 300: { value: string; }; 400: { value: string; }; 500: { value: string; }; 600: { value: string; }; 700: { value: string; }; 800: { value: string; }; 900: { value: string; }; 950: { value: string; }; }; }; durations: { fastest: { value: string; }; faster: { value: string; }; fast: { value: string; }; moderate: { value: string; }; slow: { value: string; }; slower: { value: string; }; slowest: { value: string; }; }; easings: { "ease-in": { value: string; }; "ease-out": { value: string; }; "ease-in-out": { value: string; }; "ease-in-smooth": { value: string; }; }; fonts: { heading: { value: string; }; body: { value: string; }; mono: { value: string; }; }; fontSizes: { "2xs": { value: string; }; xs: { value: string; }; sm: { value: string; }; md: { value: string; }; lg: { value: string; }; xl: { value: string; }; "2xl": { value: string; }; "3xl": { value: string; }; "4xl": { value: string; }; "5xl": { value: string; }; "6xl": { value: string; }; "7xl": { value: string; }; "8xl": { value: string; }; "9xl": { value: string; }; }; fontWeights: { thin: { value: string; }; extralight: { value: string; }; light: { value: string; }; normal: { value: string; }; medium: { value: string; }; semibold: { value: string; }; bold: { value: string; }; extrabold: { value: string; }; black: { value: string; }; }; letterSpacings: { tighter: { value: string; }; tight: { value: string; }; wide: { value: string; }; wider: { value: string; }; widest: { value: string; }; }; lineHeights: { shorter: { value: number; }; short: { value: number; }; moderate: { value: number; }; tall: { value: number; }; taller: { value: number; }; }; radii: { none: { value: string; }; "2xs": { value: string; }; xs: { value: string; }; sm: { value: string; }; md: { value: string; }; lg: { value: string; }; xl: { value: string; }; "2xl": { value: string; }; "3xl": { value: string; }; "4xl": { value: string; }; full: { value: string; }; }; spacing: { 0.5: { value: string; }; 1: { value: string; }; 1.5: { value: string; }; 2: { value: string; }; 2.5: { value: string; }; 3: { value: string; }; 3.5: { value: string; }; 4: { value: string; }; 4.5: { value: string; }; 5: { value: string; }; 6: { value: string; }; 7: { value: string; }; 8: { value: string; }; 9: { value: string; }; 10: { value: string; }; 11: { value: string; }; 12: { value: string; }; 14: { value: string; }; 16: { value: string; }; 20: { value: string; }; 24: { value: string; }; 28: { value: string; }; 32: { value: string; }; 36: { value: string; }; 40: { value: string; }; 44: { value: string; }; 48: { value: string; }; 52: { value: string; }; 56: { value: string; }; 60: { value: string; }; 64: { value: string; }; 72: { value: string; }; 80: { value: string; }; 96: { value: string; }; }; sizes: { max: { value: string; }; min: { value: string; }; fit: { value: string; }; prose: { value: string; }; full: { value: string; }; dvh: { value: string; }; svh: { value: string; }; lvh: { value: string; }; dvw: { value: string; }; svw: { value: string; }; lvw: { value: string; }; vw: { value: string; }; vh: { value: string; }; "1/2": { value: string; }; "1/3": { value: string; }; "2/3": { value: string; }; "1/4": { value: string; }; "3/4": { value: string; }; "1/5": { value: string; }; "2/5": { value: string; }; "3/5": { value: string; }; "4/5": { value: string; }; "1/6": { value: string; }; "2/6": { value: string; }; "3/6": { value: string; }; "4/6": { value: string; }; "5/6": { value: string; }; "1/12": { value: string; }; "2/12": { value: string; }; "3/12": { value: string; }; "4/12": { value: string; }; "5/12": { value: string; }; "6/12": { value: string; }; "7/12": { value: string; }; "8/12": { value: string; }; "9/12": { value: string; }; "10/12": { value: string; }; "11/12": { value: string; }; 0.5: { value: string; }; 1: { value: string; }; 1.5: { value: string; }; 2: { value: string; }; 2.5: { value: string; }; 3: { value: string; }; 3.5: { value: string; }; 4: { value: string; }; 4.5: { value: string; }; 5: { value: string; }; 6: { value: string; }; 7: { value: string; }; 8: { value: string; }; 9: { value: string; }; 10: { value: string; }; 11: { value: string; }; 12: { value: string; }; 14: { value: string; }; 16: { value: string; }; 20: { value: string; }; 24: { value: string; }; 28: { value: string; }; 32: { value: string; }; 36: { value: string; }; 40: { value: string; }; 44: { value: string; }; 48: { value: string; }; 52: { value: string; }; 56: { value: string; }; 60: { value: string; }; 64: { value: string; }; 72: { value: string; }; 80: { value: string; }; 96: { value: string; }; "3xs": { value: string; }; "2xs": { value: string; }; xs: { value: string; }; sm: { value: string; }; md: { value: string; }; lg: { value: string; }; xl: { value: string; }; "2xl": { value: string; }; "3xl": { value: string; }; "4xl": { value: string; }; "5xl": { value: string; }; "6xl": { value: string; }; "7xl": { value: string; }; "8xl": { value: string; }; }; zIndex: { hide: { value: number; }; base: { value: number; }; docked: { value: number; }; dropdown: { value: number; }; sticky: { value: number; }; banner: { value: number; }; overlay: { value: number; }; modal: { value: number; }; popover: { value: number; }; skipNav: { value: number; }; toast: { value: number; }; tooltip: { value: number; }; max: { value: number; }; }; cursor: { button: { value: string; }; checkbox: { value: string; }; disabled: { value: string; }; menuitem: { value: string; }; option: { value: string; }; radio: { value: string; }; slider: { value: string; }; switch: { value: string; }; }; }; export declare const semanticTokens: { colors: { bg: { DEFAULT: { value: { _light: string; _dark: string; }; }; subtle: { value: { _light: string; _dark: string; }; }; muted: { value: { _light: string; _dark: string; }; }; emphasized: { value: { _light: string; _dark: string; }; }; inverted: { value: { _light: string; _dark: string; }; }; panel: { value: { _light: string; _dark: string; }; }; error: { value: { _light: string; _dark: string; }; }; warning: { value: { _light: string; _dark: string; }; }; success: { value: { _light: string; _dark: string; }; }; info: { value: { _light: string; _dark: string; }; }; }; fg: { DEFAULT: { value: { _light: string; _dark: string; }; }; muted: { value: { _light: string; _dark: string; }; }; subtle: { value: { _light: string; _dark: string; }; }; inverted: { value: { _light: string; _dark: string; }; }; error: { value: { _light: string; _dark: string; }; }; warning: { value: { _light: string; _dark: string; }; }; success: { value: { _light: string; _dark: string; }; }; info: { value: { _light: string; _dark: string; }; }; }; border: { DEFAULT: { value: { _light: string; _dark: string; }; }; muted: { value: { _light: string; _dark: string; }; }; subtle: { value: { _light: string; _dark: string; }; }; emphasized: { value: { _light: string; _dark: string; }; }; inverted: { value: { _light: string; _dark: string; }; }; error: { value: { _light: string; _dark: string; }; }; warning: { value: { _light: string; _dark: string; }; }; success: { value: { _light: string; _dark: string; }; }; info: { value: { _light: string; _dark: string; }; }; }; gray: { contrast: { value: { _light: string; _dark: string; }; }; fg: { value: { _light: string; _dark: string; }; }; subtle: { value: { _light: string; _dark: string; }; }; muted: { value: { _light: string; _dark: string; }; }; emphasized: { value: { _light: string; _dark: string; }; }; solid: { value: { _light: string; _dark: string; }; }; focusRing: { value: { _light: string; _dark: string; }; }; }; red: { contrast: { value: { _light: string; _dark: string; }; }; fg: { value: { _light: string; _dark: string; }; }; subtle: { value: { _light: string; _dark: string; }; }; muted: { value: { _light: string; _dark: string; }; }; emphasized: { value: { _light: string; _dark: string; }; }; solid: { value: { _light: string; _dark: string; }; }; focusRing: { value: { _light: string; _dark: string; }; }; }; orange: { contrast: { value: { _light: string; _dark: string; }; }; fg: { value: { _light: string; _dark: string; }; }; subtle: { value: { _light: string; _dark: string; }; }; muted: { value: { _light: string; _dark: string; }; }; emphasized: { value: { _light: string; _dark: string; }; }; solid: { value: { _light: string; _dark: string; }; }; focusRing: { value: { _light: string; _dark: string; }; }; }; green: { contrast: { value: { _light: string; _dark: string; }; }; fg: { value: { _light: string; _dark: string; }; }; subtle: { value: { _light: string; _dark: string; }; }; muted: { value: { _light: string; _dark: string; }; }; emphasized: { value: { _light: string; _dark: string; }; }; solid: { value: { _light: string; _dark: string; }; }; focusRing: { value: { _light: string; _dark: string; }; }; }; blue: { contrast: { value: { _light: string; _dark: string; }; }; fg: { value: { _light: string; _dark: string; }; }; subtle: { value: { _light: string; _dark: string; }; }; muted: { value: { _light: string; _dark: string; }; }; emphasized: { value: { _light: string; _dark: string; }; }; solid: { value: { _light: string; _dark: string; }; }; focusRing: { value: { _light: string; _dark: string; }; }; }; yellow: { contrast: { value: { _light: string; _dark: string; }; }; fg: { value: { _light: string; _dark: string; }; }; subtle: { value: { _light: string; _dark: string; }; }; muted: { value: { _light: string; _dark: string; }; }; emphasized: { value: { _light: string; _dark: string; }; }; solid: { value: { _light: string; _dark: string; }; }; focusRing: { value: { _light: string; _dark: string; }; }; }; teal: { contrast: { value: { _light: string; _dark: string; }; }; fg: { value: { _light: string; _dark: string; }; }; subtle: { value: { _light: string; _dark: string; }; }; muted: { value: { _light: string; _dark: string; }; }; emphasized: { value: { _light: string; _dark: string; }; }; solid: { value: { _light: string; _dark: string; }; }; focusRing: { value: { _light: string; _dark: string; }; }; }; purple: { contrast: { value: { _light: string; _dark: string; }; }; fg: { value: { _light: string; _dark: string; }; }; subtle: { value: { _light: string; _dark: string; }; }; muted: { value: { _light: string; _dark: string; }; }; emphasized: { value: { _light: string; _dark: string; }; }; solid: { value: { _light: string; _dark: string; }; }; focusRing: { value: { _light: string; _dark: string; }; }; }; pink: { contrast: { value: { _light: string; _dark: string; }; }; fg: { value: { _light: string; _dark: string; }; }; subtle: { value: { _light: string; _dark: string; }; }; muted: { value: { _light: string; _dark: string; }; }; emphasized: { value: { _light: string; _dark: string; }; }; solid: { value: { _light: string; _dark: string; }; }; focusRing: { value: { _light: string; _dark: string; }; }; }; cyan: { contrast: { value: { _light: string; _dark: string; }; }; fg: { value: { _light: string; _dark: string; }; }; subtle: { value: { _light: string; _dark: string; }; }; muted: { value: { _light: string; _dark: string; }; }; emphasized: { value: { _light: string; _dark: string; }; }; solid: { value: { _light: string; _dark: string; }; }; focusRing: { value: { _light: string; _dark: string; }; }; }; }; shadows: { xs: { value: { _light: string; _dark: string; }; }; sm: { value: { _light: string; _dark: string; }; }; md: { value: { _light: string; _dark: string; }; }; lg: { value: { _light: string; _dark: string; }; }; xl: { value: { _light: string; _dark: string; }; }; "2xl": { value: { _light: string; _dark: string; }; }; inner: { value: { _light: string; _dark: string; }; }; inset: { value: { _light: string; _dark: string; }; }; }; radii: { l1: { value: string; }; l2: { value: string; }; l3: { value: string; }; }; }; export declare const cssVarsPrefix = "chakra"; export declare const cssVarsRoot = ":where(html, .chakra-theme)"; export declare const defaultThemeConfig: import("..").SystemConfig; export { recipes, slotRecipes, breakpoints, keyframes, textStyles, layerStyles, animationStyles, globalCss, }; export * from "./recipes.export"; export * from "./slot-recipes.export";