1 line
8.1 KiB
Plaintext
1 line
8.1 KiB
Plaintext
{"version":3,"sources":["../src/components/button.ts"],"sourcesContent":["import { defineStyle, defineStyleConfig } from \"@chakra-ui/styled-system\"\nimport { mode, transparentize } from \"@chakra-ui/theme-tools\"\nimport { runIfFn } from \"../utils/run-if-fn\"\n\nconst baseStyle = defineStyle({\n lineHeight: \"1.2\",\n borderRadius: \"md\",\n fontWeight: \"semibold\",\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n _focusVisible: {\n boxShadow: \"outline\",\n },\n _disabled: {\n opacity: 0.4,\n cursor: \"not-allowed\",\n boxShadow: \"none\",\n },\n _hover: {\n _disabled: {\n bg: \"initial\",\n },\n },\n})\n\nconst variantGhost = defineStyle((props) => {\n const { colorScheme: c, theme } = props\n\n if (c === \"gray\") {\n return {\n color: mode(`gray.800`, `whiteAlpha.900`)(props),\n _hover: {\n bg: mode(`gray.100`, `whiteAlpha.200`)(props),\n },\n _active: { bg: mode(`gray.200`, `whiteAlpha.300`)(props) },\n }\n }\n\n const darkHoverBg = transparentize(`${c}.200`, 0.12)(theme)\n const darkActiveBg = transparentize(`${c}.200`, 0.24)(theme)\n\n return {\n color: mode(`${c}.600`, `${c}.200`)(props),\n bg: \"transparent\",\n _hover: {\n bg: mode(`${c}.50`, darkHoverBg)(props),\n },\n _active: {\n bg: mode(`${c}.100`, darkActiveBg)(props),\n },\n }\n})\n\nconst variantOutline = defineStyle((props) => {\n const { colorScheme: c } = props\n const borderColor = mode(`gray.200`, `whiteAlpha.300`)(props)\n return {\n border: \"1px solid\",\n borderColor: c === \"gray\" ? borderColor : \"currentColor\",\n \".chakra-button__group[data-attached][data-orientation=horizontal] > &:not(:last-of-type)\":\n { marginEnd: \"-1px\" },\n \".chakra-button__group[data-attached][data-orientation=vertical] > &:not(:last-of-type)\":\n { marginBottom: \"-1px\" },\n ...runIfFn(variantGhost, props),\n }\n})\n\ntype AccessibleColor = {\n bg?: string\n color?: string\n hoverBg?: string\n activeBg?: string\n}\n\n/** Accessible color overrides for less accessible colors. */\nconst accessibleColorMap: { [key: string]: AccessibleColor } = {\n yellow: {\n bg: \"yellow.400\",\n color: \"black\",\n hoverBg: \"yellow.500\",\n activeBg: \"yellow.600\",\n },\n cyan: {\n bg: \"cyan.400\",\n color: \"black\",\n hoverBg: \"cyan.500\",\n activeBg: \"cyan.600\",\n },\n}\n\nconst variantSolid = defineStyle((props) => {\n const { colorScheme: c } = props\n\n if (c === \"gray\") {\n const bg = mode(`gray.100`, `whiteAlpha.200`)(props)\n\n return {\n bg,\n color: mode(`gray.800`, `whiteAlpha.900`)(props),\n _hover: {\n bg: mode(`gray.200`, `whiteAlpha.300`)(props),\n _disabled: {\n bg,\n },\n },\n _active: { bg: mode(`gray.300`, `whiteAlpha.400`)(props) },\n }\n }\n\n const {\n bg = `${c}.500`,\n color = \"white\",\n hoverBg = `${c}.600`,\n activeBg = `${c}.700`,\n } = accessibleColorMap[c] ?? {}\n\n const background = mode(bg, `${c}.200`)(props)\n\n return {\n bg: background,\n color: mode(color, `gray.800`)(props),\n _hover: {\n bg: mode(hoverBg, `${c}.300`)(props),\n _disabled: {\n bg: background,\n },\n },\n _active: { bg: mode(activeBg, `${c}.400`)(props) },\n }\n})\n\nconst variantLink = defineStyle((props) => {\n const { colorScheme: c } = props\n return {\n padding: 0,\n height: \"auto\",\n lineHeight: \"normal\",\n verticalAlign: \"baseline\",\n color: mode(`${c}.500`, `${c}.200`)(props),\n _hover: {\n textDecoration: \"underline\",\n _disabled: {\n textDecoration: \"none\",\n },\n },\n _active: {\n color: mode(`${c}.700`, `${c}.500`)(props),\n },\n }\n})\n\nconst variantUnstyled = defineStyle({\n bg: \"none\",\n color: \"inherit\",\n display: \"inline\",\n lineHeight: \"inherit\",\n m: \"0\",\n p: \"0\",\n})\n\nconst variants = {\n ghost: variantGhost,\n outline: variantOutline,\n solid: variantSolid,\n link: variantLink,\n unstyled: variantUnstyled,\n}\n\nconst sizes = {\n lg: defineStyle({\n h: \"12\",\n minW: \"12\",\n fontSize: \"lg\",\n px: \"6\",\n }),\n md: defineStyle({\n h: \"10\",\n minW: \"10\",\n fontSize: \"md\",\n px: \"4\",\n }),\n sm: defineStyle({\n h: \"8\",\n minW: \"8\",\n fontSize: \"sm\",\n px: \"3\",\n }),\n xs: defineStyle({\n h: \"6\",\n minW: \"6\",\n fontSize: \"xs\",\n px: \"2\",\n }),\n}\n\nexport const buttonTheme = defineStyleConfig({\n baseStyle,\n variants,\n sizes,\n defaultProps: {\n variant: \"solid\",\n size: \"md\",\n colorScheme: \"gray\",\n },\n})\n"],"mappings":"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","names":["bg"]} |