-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathtooltipTheme.ts
51 lines (44 loc) · 1.04 KB
/
tooltipTheme.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import {
Tooltip as ChakraTooltip,
cssVar,
defineStyle,
defineStyleConfig,
} from "@chakra-ui/react"
// Currently, there is no possibility to set all tooltips with hasArrow by
// defaultProps. Let's override the defaultProps as follows.
ChakraTooltip.defaultProps = { ...ChakraTooltip.defaultProps, hasArrow: true }
// To make the arrow the same color as the background, the css variable needs to
// be set correctly.
// More info:
// https://github.com/chakra-ui/chakra-ui/issues/4695#issuecomment-991023319
const $arrowBg = cssVar("popper-arrow-bg")
const baseStyle = defineStyle({
fontWeight: "normal",
color: "ivoire.10",
bg: "brown.100",
[$arrowBg.variable]: "colors.brown.100",
})
const sizeXs = defineStyle({
px: 2,
py: 1,
fontSize: "xs",
lineHeight: "xs",
borderRadius: "xs",
})
const sizeSm = defineStyle({
p: 3,
fontSize: "sm",
lineHeight: "sm",
borderRadius: "sm",
})
const sizes = {
xs: sizeXs,
sm: sizeSm,
}
export default defineStyleConfig({
defaultProps: {
size: "sm",
},
baseStyle,
sizes,
})