@vygruppen/spor-react 1.3.4 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (196) hide show
  1. package/.turbo/turbo-build.log +12 -10
  2. package/CHANGELOG.md +31 -0
  3. package/dist/index.d.ts +6720 -27
  4. package/dist/index.js +14143 -140
  5. package/dist/index.mjs +13822 -27
  6. package/package.json +19 -31
  7. package/src/accordion/Accordion.test.tsx +20 -0
  8. package/src/accordion/Accordion.tsx +62 -0
  9. package/src/accordion/AccordionContext.tsx +27 -0
  10. package/src/accordion/Expandable.tsx +157 -0
  11. package/src/accordion/index.tsx +2 -0
  12. package/src/alert/AlertIcon.tsx +75 -0
  13. package/src/alert/BaseAlert.test.tsx +37 -0
  14. package/src/alert/BaseAlert.tsx +21 -0
  15. package/src/alert/ClosableAlert.test.tsx +37 -0
  16. package/src/alert/ClosableAlert.tsx +75 -0
  17. package/src/alert/ExpandableAlert.test.tsx +84 -0
  18. package/src/alert/ExpandableAlert.tsx +84 -0
  19. package/src/alert/StaticAlert.tsx +25 -0
  20. package/src/alert/index.tsx +3 -0
  21. package/src/button/Button.test.tsx +23 -0
  22. package/src/button/Button.tsx +162 -0
  23. package/src/button/ButtonGroup.tsx +43 -0
  24. package/src/button/CloseButton.tsx +63 -0
  25. package/src/button/FloatingActionButton.tsx +113 -0
  26. package/src/button/IconButton.tsx +63 -0
  27. package/src/button/index.tsx +5 -0
  28. package/src/card/Card.tsx +59 -0
  29. package/src/card/index.tsx +1 -0
  30. package/src/datepicker/Calendar.tsx +32 -0
  31. package/src/datepicker/CalendarCell.tsx +74 -0
  32. package/src/datepicker/CalendarGrid.tsx +76 -0
  33. package/src/datepicker/CalendarHeader.tsx +153 -0
  34. package/src/datepicker/CalendarNavigationButton.tsx +26 -0
  35. package/src/datepicker/CalendarTriggerButton.tsx +36 -0
  36. package/src/datepicker/DateField.tsx +51 -0
  37. package/src/datepicker/DatePicker.tsx +153 -0
  38. package/src/datepicker/DateRangePicker.tsx +171 -0
  39. package/src/datepicker/DateTimeSegment.tsx +56 -0
  40. package/src/datepicker/RangeCalendar.tsx +35 -0
  41. package/src/datepicker/StyledField.tsx +31 -0
  42. package/src/datepicker/TimeField.tsx +46 -0
  43. package/src/datepicker/TimePicker.test.tsx +74 -0
  44. package/src/datepicker/TimePicker.tsx +196 -0
  45. package/src/datepicker/index.tsx +4 -0
  46. package/src/datepicker/utils.ts +33 -0
  47. package/src/i18n/index.tsx +38 -0
  48. package/src/image/index.tsx +2 -0
  49. package/src/index.tsx +25 -26
  50. package/src/input/CardSelect.tsx +165 -0
  51. package/src/input/Checkbox.tsx +24 -0
  52. package/src/input/CheckboxGroup.tsx +43 -0
  53. package/src/input/ChoiceChip.tsx +102 -0
  54. package/src/input/Dialog.tsx +29 -0
  55. package/src/input/FormControl.tsx +11 -0
  56. package/src/input/FormErrorMessage.tsx +91 -0
  57. package/src/input/FormLabel.tsx +11 -0
  58. package/src/input/InfoSelect.tsx +209 -0
  59. package/src/input/Input.tsx +59 -0
  60. package/src/input/InputElement.tsx +45 -0
  61. package/src/input/ListBox.tsx +123 -0
  62. package/src/input/NativeSelect.tsx +38 -0
  63. package/src/input/PasswordInput.tsx +70 -0
  64. package/src/input/Popover.tsx +70 -0
  65. package/src/input/Radio.tsx +34 -0
  66. package/src/input/RadioGroup.tsx +47 -0
  67. package/src/input/SearchInput.tsx +89 -0
  68. package/src/input/Switch.tsx +40 -0
  69. package/src/input/Textarea.tsx +98 -0
  70. package/src/input/index.tsx +20 -0
  71. package/src/layout/Divider.tsx +26 -0
  72. package/src/layout/Stack.tsx +42 -0
  73. package/src/layout/index.tsx +28 -0
  74. package/src/linjetag/InfoTag.tsx +54 -0
  75. package/src/linjetag/LineIcon.tsx +44 -0
  76. package/src/linjetag/TravelTag.tsx +121 -0
  77. package/src/linjetag/icons.tsx +80 -0
  78. package/src/linjetag/index.tsx +3 -0
  79. package/src/linjetag/types.d.ts +24 -0
  80. package/src/link/TextLink.tsx +45 -0
  81. package/src/link/index.tsx +1 -0
  82. package/src/loader/ClientOnly.tsx +29 -0
  83. package/src/loader/ColorInlineLoader.tsx +27 -0
  84. package/src/loader/ColorSpinner.tsx +44 -0
  85. package/src/loader/ContentLoader.tsx +27 -0
  86. package/src/loader/DarkFullScreenLoader.tsx +23 -0
  87. package/src/loader/DarkInlineLoader.tsx +25 -0
  88. package/src/loader/DarkSpinner.tsx +43 -0
  89. package/src/loader/LightFullScreenLoader.tsx +23 -0
  90. package/src/loader/LightInlineLoader.tsx +25 -0
  91. package/src/loader/LightSpinner.tsx +41 -0
  92. package/src/loader/Lottie.tsx +10 -0
  93. package/src/loader/ProgressBar.tsx +128 -0
  94. package/src/loader/ProgressLoader.tsx +140 -0
  95. package/src/loader/Skeleton.tsx +16 -0
  96. package/src/loader/SkeletonCircle.tsx +13 -0
  97. package/src/loader/SkeletonText.tsx +10 -0
  98. package/src/loader/index.tsx +14 -0
  99. package/src/loader/useHydrated.tsx +34 -0
  100. package/src/loader/useRotatingLabel.tsx +22 -0
  101. package/src/logo/VyLogo.tsx +101 -0
  102. package/src/logo/index.tsx +1 -0
  103. package/src/media-controller/JumpButton.tsx +69 -0
  104. package/src/media-controller/PlayPauseButton.tsx +67 -0
  105. package/src/media-controller/SkipButton.tsx +66 -0
  106. package/src/media-controller/icons.tsx +80 -0
  107. package/src/media-controller/index.test.tsx +59 -0
  108. package/src/media-controller/index.tsx +3 -0
  109. package/src/modal/Drawer.tsx +122 -0
  110. package/src/modal/Modal.tsx +15 -0
  111. package/src/modal/ModalHeader.tsx +31 -0
  112. package/src/modal/SimpleDrawer.tsx +44 -0
  113. package/src/modal/index.tsx +4 -0
  114. package/src/popover/PopoverWizardBody.tsx +91 -0
  115. package/src/popover/SimplePopover.tsx +75 -0
  116. package/src/popover/WizardPopover.tsx +61 -0
  117. package/src/popover/index.tsx +23 -0
  118. package/src/provider/SporProvider.tsx +67 -0
  119. package/src/provider/index.tsx +1 -0
  120. package/src/stepper/Stepper.tsx +115 -0
  121. package/src/stepper/StepperContext.tsx +55 -0
  122. package/src/stepper/StepperStep.tsx +48 -0
  123. package/src/stepper/index.tsx +2 -0
  124. package/src/tab/Tabs.tsx +20 -0
  125. package/src/tab/index.tsx +9 -0
  126. package/src/table/Table.tsx +58 -0
  127. package/src/table/index.tsx +19 -0
  128. package/src/theme/components/accordion.ts +143 -0
  129. package/src/theme/components/alert.ts +59 -0
  130. package/src/theme/components/badge.ts +109 -0
  131. package/src/theme/components/button.ts +217 -0
  132. package/src/theme/components/card-select.ts +158 -0
  133. package/src/theme/components/card.ts +174 -0
  134. package/src/theme/components/checkbox.ts +90 -0
  135. package/src/theme/components/choice-chip.ts +79 -0
  136. package/src/theme/components/close-button.ts +56 -0
  137. package/src/theme/components/code.ts +17 -0
  138. package/src/theme/components/datepicker.ts +194 -0
  139. package/src/theme/components/drawer.ts +92 -0
  140. package/src/theme/components/fab.ts +111 -0
  141. package/src/theme/components/form-label.ts +17 -0
  142. package/src/theme/components/form.ts +27 -0
  143. package/src/theme/components/index.ts +34 -0
  144. package/src/theme/components/info-select.ts +91 -0
  145. package/src/theme/components/info-tag.ts +49 -0
  146. package/src/theme/components/input.ts +97 -0
  147. package/src/theme/components/line-icon.ts +121 -0
  148. package/src/theme/components/link.ts +155 -0
  149. package/src/theme/components/listbox.ts +52 -0
  150. package/src/theme/components/media-controller-button.ts +134 -0
  151. package/src/theme/components/modal.ts +93 -0
  152. package/src/theme/components/popover.ts +63 -0
  153. package/src/theme/components/radio.ts +64 -0
  154. package/src/theme/components/select.ts +52 -0
  155. package/src/theme/components/skeleton.ts +40 -0
  156. package/src/theme/components/stepper.ts +230 -0
  157. package/src/theme/components/switch.ts +227 -0
  158. package/src/theme/components/table.ts +163 -0
  159. package/src/theme/components/tabs.ts +282 -0
  160. package/src/theme/components/textarea.ts +14 -0
  161. package/src/theme/components/toast.ts +28 -0
  162. package/src/theme/components/travel-tag.ts +267 -0
  163. package/src/theme/font-faces.ts +66 -0
  164. package/src/theme/foundations/borders.ts +11 -0
  165. package/src/theme/foundations/breakpoints.ts +9 -0
  166. package/src/theme/foundations/colors.ts +10 -0
  167. package/src/theme/foundations/config.ts +5 -0
  168. package/src/theme/foundations/fontSizes.ts +29 -0
  169. package/src/theme/foundations/fontWeights.ts +5 -0
  170. package/src/theme/foundations/fonts.ts +7 -0
  171. package/src/theme/foundations/index.ts +14 -0
  172. package/src/theme/foundations/lineHeights.ts +5 -0
  173. package/src/theme/foundations/radii.ts +12 -0
  174. package/src/theme/foundations/shadows.ts +8 -0
  175. package/src/theme/foundations/sizes.ts +34 -0
  176. package/src/theme/foundations/spacing.ts +30 -0
  177. package/src/theme/foundations/textStyles.ts +60 -0
  178. package/src/theme/foundations/zIndices.ts +17 -0
  179. package/src/theme/index.ts +14 -0
  180. package/src/theme/utils/box-shadow-utils.ts +44 -0
  181. package/src/theme/utils/focus-utils.ts +16 -0
  182. package/src/toast/ActionToast.test.tsx +22 -0
  183. package/src/toast/ActionToast.tsx +28 -0
  184. package/src/toast/BaseToast.test.tsx +27 -0
  185. package/src/toast/BaseToast.tsx +75 -0
  186. package/src/toast/ClosableToast.test.tsx +17 -0
  187. package/src/toast/ClosableToast.tsx +40 -0
  188. package/src/toast/index.tsx +1 -0
  189. package/src/toast/useToast.tsx +99 -0
  190. package/src/typography/Badge.tsx +68 -0
  191. package/src/typography/Code.tsx +32 -0
  192. package/src/typography/Heading.tsx +32 -0
  193. package/src/typography/Text.tsx +26 -0
  194. package/src/typography/index.tsx +4 -0
  195. package/src/util/externals.tsx +23 -0
  196. package/src/util/index.tsx +1 -0
@@ -0,0 +1,58 @@
1
+ import {
2
+ Box,
3
+ forwardRef,
4
+ Table as ChakraTable,
5
+ TableProps as ChakraTableProps,
6
+ } from "@chakra-ui/react";
7
+ import React from "react";
8
+
9
+ export type TableProps = Omit<ChakraTableProps, "variant" | "colorScheme"> & {
10
+ variant?: "simple" | "outline";
11
+ colorScheme?: "grey" | "green";
12
+ };
13
+ /**
14
+ * These components are used the same way as in Chakra UI. Please refer to [their documentation](https://chakra-ui.com/docs/data-display/table).
15
+ *
16
+ * The `Table` component has support for two different variants - `simple` and `outline`. The `simple` variant has basic lines between rows, while the `outline` variant has borders for each cell, plus a hover effect per row.
17
+ *
18
+ * You can also specify a `grey` or `green` `colorScheme` prop. Use `green` if you want to place the table on a light green background.
19
+ *
20
+ * Finally, there are three different `size` props you can specify - `sm`, `md` and `lg`.
21
+ *
22
+ * ```tsx
23
+ * <Table variant="outlined" size="lg">
24
+ * <Thead>
25
+ * ...
26
+ * </Thead>
27
+ * ...
28
+ * </Table>
29
+ * ```
30
+ */
31
+ export const Table = forwardRef<TableProps, "table">((props, ref) => {
32
+ const { variant, size, colorScheme, children, ...rest } = props;
33
+ return (
34
+ <Box {...rest} {...getStyleProps(props)}>
35
+ <Box overflowX="auto">
36
+ <ChakraTable
37
+ variant={variant}
38
+ size={size}
39
+ colorScheme={colorScheme}
40
+ ref={ref}
41
+ >
42
+ {children}
43
+ </ChakraTable>
44
+ </Box>
45
+ </Box>
46
+ );
47
+ });
48
+
49
+ function getStyleProps(props: TableProps) {
50
+ return props.variant === "outline"
51
+ ? {
52
+ border: "1px solid",
53
+ borderColor: props.colorScheme === "grey" ? "silver" : "blackAlpha.200",
54
+ overflow: "hidden",
55
+ borderRadius: "md",
56
+ }
57
+ : {};
58
+ }
@@ -0,0 +1,19 @@
1
+ export {
2
+ TableCaption,
3
+ Tbody,
4
+ Td,
5
+ Tfoot,
6
+ Th,
7
+ Thead,
8
+ Tr,
9
+ } from "@chakra-ui/react";
10
+ export type {
11
+ TableBodyProps,
12
+ TableCaptionProps,
13
+ TableCellProps,
14
+ TableColumnHeaderProps,
15
+ TableFooterProps,
16
+ TableHeadProps,
17
+ TableRowProps,
18
+ } from "@chakra-ui/react";
19
+ export * from "./Table";
@@ -0,0 +1,143 @@
1
+ import { accordionAnatomy as parts } from "@chakra-ui/anatomy";
2
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
3
+ import { colors } from "../foundations";
4
+ import { getBoxShadowString } from "../utils/box-shadow-utils";
5
+ import { focusVisible } from "../utils/focus-utils";
6
+
7
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
8
+ const config = helpers.defineMultiStyleConfig({
9
+ baseStyle: {
10
+ container: {
11
+ border: "none",
12
+ borderRadius: "sm",
13
+ },
14
+ button: {
15
+ transitionProperty:
16
+ "background-color, color, border-radius, box-shadow, opacity",
17
+ transitionDuration: "normal",
18
+ border: "none",
19
+ borderRadius: "sm",
20
+ display: "flex",
21
+ justifyContent: "space-between",
22
+ color: "darkGrey",
23
+ textAlign: "left",
24
+ ...focusVisible({
25
+ notFocus: {
26
+ boxShadow: getBoxShadowString({
27
+ borderColor: "osloGrey",
28
+ }),
29
+ },
30
+ focus: {
31
+ boxShadow: getBoxShadowString({
32
+ borderColor: "greenHaze",
33
+ borderWidth: 2,
34
+ }),
35
+ },
36
+ }),
37
+ _disabled: {
38
+ opacity: 0.4,
39
+ cursor: "not-allowed",
40
+ },
41
+ },
42
+ panel: {
43
+ pt: 2,
44
+ pb: 5,
45
+ borderBottomRadius: "sm",
46
+ },
47
+ icon: {
48
+ fontSize: "1.25em",
49
+ },
50
+ },
51
+ variants: {
52
+ list: {
53
+ button: {
54
+ boxShadow: "none",
55
+ _hover: {
56
+ backgroundColor: "seaMist",
57
+ },
58
+ _active: {
59
+ backgroundColor: "mint",
60
+ boxShadow: getBoxShadowString({ borderColor: "darkGrey" }),
61
+ },
62
+ },
63
+ },
64
+ outline: {
65
+ container: {
66
+ boxShadow: getBoxShadowString({
67
+ borderColor: colors.blackAlpha["400"],
68
+ }),
69
+ },
70
+ button: {
71
+ _expanded: {
72
+ borderBottomRadius: "none",
73
+ },
74
+ _hover: {
75
+ boxShadow: getBoxShadowString({
76
+ borderColor: "darkGrey",
77
+ borderWidth: 2,
78
+ }),
79
+ },
80
+ _active: {
81
+ backgroundColor: "mint",
82
+ boxShadow: getBoxShadowString({
83
+ borderColor: "darkGrey",
84
+ }),
85
+ },
86
+ },
87
+ },
88
+ card: {
89
+ container: {
90
+ boxShadow: "md",
91
+ },
92
+ button: {
93
+ _expanded: {
94
+ borderBottomRadius: "none",
95
+ },
96
+ _hover: {
97
+ backgroundColor: "seaMist",
98
+ },
99
+ _active: {
100
+ backgroundColor: "mint",
101
+ },
102
+ },
103
+ },
104
+ },
105
+ sizes: {
106
+ sm: {
107
+ button: {
108
+ fontSize: "desktop.xs",
109
+ px: 2,
110
+ py: 1,
111
+ },
112
+ panel: {
113
+ px: 2,
114
+ },
115
+ },
116
+ md: {
117
+ button: {
118
+ fontSize: "desktop.sm",
119
+ px: 3,
120
+ py: 1,
121
+ },
122
+ panel: {
123
+ px: 3,
124
+ },
125
+ },
126
+ lg: {
127
+ button: {
128
+ fontSize: "desktop.sm",
129
+ px: 3,
130
+ py: 2,
131
+ },
132
+ panel: {
133
+ px: 3,
134
+ },
135
+ },
136
+ },
137
+ defaultProps: {
138
+ variant: "list",
139
+ size: "md",
140
+ },
141
+ });
142
+
143
+ export default config;
@@ -0,0 +1,59 @@
1
+ import { anatomy } from "@chakra-ui/anatomy";
2
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
3
+
4
+ const parts = anatomy("alert").parts("container", "icon", "closeButton");
5
+
6
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
7
+ const config = helpers.defineMultiStyleConfig({
8
+ baseStyle: {
9
+ container: {
10
+ borderRadius: "sm",
11
+ color: "darkGrey",
12
+ paddingX: 3,
13
+ paddingY: 2,
14
+ display: "flex",
15
+ position: "relative",
16
+ textStyle: "sm",
17
+ },
18
+ icon: {
19
+ marginRight: 1,
20
+ },
21
+ closeButton: {
22
+ position: "absolute",
23
+ top: 1,
24
+ right: 1,
25
+ },
26
+ },
27
+ variants: {
28
+ success: {
29
+ container: {
30
+ backgroundColor: "seaMist",
31
+ },
32
+ },
33
+ info: {
34
+ container: {
35
+ backgroundColor: "lightBlue",
36
+ },
37
+ },
38
+ warning: {
39
+ container: {
40
+ backgroundColor: "blonde",
41
+ },
42
+ },
43
+ error: {
44
+ container: {
45
+ backgroundColor: "lightRed",
46
+ },
47
+ },
48
+ "alt-transport": {
49
+ container: {
50
+ backgroundColor: "banana",
51
+ },
52
+ },
53
+ },
54
+ defaultProps: {
55
+ variant: "info",
56
+ },
57
+ });
58
+
59
+ export default config;
@@ -0,0 +1,109 @@
1
+ import { defineStyleConfig } from "@chakra-ui/react";
2
+
3
+ const config = defineStyleConfig({
4
+ baseStyle: ({ colorScheme }) => ({
5
+ borderStyle: "solid",
6
+ display: "inline-flex",
7
+ alignItems: "center",
8
+ justifyContent: "center",
9
+ fontSize: ["mobile.xs", "desktop.xs"],
10
+ borderRadius: "xl",
11
+ fontWeight: "bold",
12
+ paddingLeft: [2, 3],
13
+ paddingRight: [2, 3],
14
+ minHeight: [4, 5],
15
+ ...getColorScheme(colorScheme as ColorScheme),
16
+ }),
17
+ variants: {
18
+ solid: {
19
+ borderWidth: 0,
20
+ },
21
+ outline: {
22
+ borderWidth: 1,
23
+ },
24
+ },
25
+ defaultProps: {
26
+ variant: "solid",
27
+ colorScheme: "grey",
28
+ },
29
+ });
30
+
31
+ export default config;
32
+
33
+ function getColorScheme(colorScheme: ColorScheme) {
34
+ let styles = colorCombinations[colorScheme];
35
+ if (!styles && process.env.NODE_ENV === "development") {
36
+ console.warn(`Invalid color scheme ${colorScheme} provided.`);
37
+ styles = colorCombinations.grey;
38
+ }
39
+ return styles;
40
+ }
41
+
42
+ type ColorScheme =
43
+ | "yellow"
44
+ | "light-yellow"
45
+ | "red"
46
+ | "light-green"
47
+ | "dark-green"
48
+ | "orange"
49
+ | "light-blue"
50
+ | "dark-blue"
51
+ | "grey"
52
+ | "white";
53
+ type ColorSpec = {
54
+ backgroundColor: string;
55
+ color: string;
56
+ borderColor?: string;
57
+ };
58
+ const colorCombinations: Record<ColorScheme, ColorSpec> = {
59
+ yellow: {
60
+ backgroundColor: "banana",
61
+ borderColor: "darkGrey",
62
+ color: "darkGrey",
63
+ },
64
+ "light-yellow": {
65
+ backgroundColor: "blonde",
66
+ borderColor: "golden",
67
+ color: "darkGrey",
68
+ },
69
+ red: {
70
+ backgroundColor: "lightRed",
71
+ borderColor: "brightRed",
72
+ color: "darkGrey",
73
+ },
74
+ "light-green": {
75
+ backgroundColor: "seaMist",
76
+ borderColor: "darkTeal",
77
+ color: "darkTeal",
78
+ },
79
+ "dark-green": {
80
+ backgroundColor: "celadon",
81
+ borderColor: "blueGreen",
82
+ color: "white",
83
+ },
84
+ orange: {
85
+ backgroundColor: "champagne",
86
+ borderColor: "pumpkin",
87
+ color: "darkGrey",
88
+ },
89
+ "light-blue": {
90
+ backgroundColor: "lightBlue",
91
+ borderColor: "ocean",
92
+ color: "darkBlue",
93
+ },
94
+ "dark-blue": {
95
+ backgroundColor: "darkBlue",
96
+ borderColor: "sky",
97
+ color: "white",
98
+ },
99
+ grey: {
100
+ backgroundColor: "platinum",
101
+ borderColor: "darkGrey",
102
+ color: "darkGrey",
103
+ },
104
+ white: {
105
+ backgroundColor: "white",
106
+ borderColor: "silver",
107
+ color: "darkGrey",
108
+ },
109
+ };
@@ -0,0 +1,217 @@
1
+ import { defineStyleConfig } from "@chakra-ui/react";
2
+ import { mode } from "@chakra-ui/theme-tools";
3
+ import { colors } from "../foundations";
4
+ import { getBoxShadowString } from "../utils/box-shadow-utils";
5
+ import { focusVisible } from "../utils/focus-utils";
6
+
7
+ const config = defineStyleConfig({
8
+ baseStyle: {
9
+ border: 0,
10
+ borderRadius: "xl",
11
+ fontWeight: "bold",
12
+ transitionProperty: "common",
13
+ transitionDuration: "normal",
14
+ px: 3,
15
+ _focus: {
16
+ boxShadow: 0,
17
+ outline: 0,
18
+ },
19
+ _disabled: {
20
+ cursor: "not-allowed",
21
+ boxShadow: "none",
22
+ backgroundColor: "silver",
23
+ color: "dimGrey",
24
+ },
25
+ _hover: {
26
+ _disabled: {
27
+ background: "silver",
28
+ },
29
+ },
30
+ },
31
+ variants: {
32
+ control: {
33
+ backgroundColor: "darkTeal",
34
+ color: "white",
35
+ ...focusVisible({
36
+ focus: {
37
+ boxShadow: `inset 0 0 0 4px ${colors.darkTeal}, inset 0 0 0 6px currentColor`,
38
+ },
39
+ notFocus: { boxShadow: "none" },
40
+ }),
41
+ _hover: {
42
+ backgroundColor: "night",
43
+ },
44
+ _active: {
45
+ backgroundColor: "pine",
46
+ },
47
+ },
48
+ primary: {
49
+ backgroundColor: "primaryGreen",
50
+ color: "white",
51
+ ...focusVisible({
52
+ focus: {
53
+ boxShadow: `inset 0 0 0 4px ${colors.primaryGreen}, inset 0 0 0 4px ${colors.primaryGreen}, inset 0 0 0 6px currentColor`,
54
+ },
55
+ notFocus: { boxShadow: "none" },
56
+ }),
57
+ _hover: {
58
+ backgroundColor: "pine",
59
+ },
60
+ _active: {
61
+ backgroundColor: "azure",
62
+ },
63
+ },
64
+ secondary: {
65
+ backgroundColor: "coralGreen",
66
+ color: "darkTeal",
67
+ ...focusVisible({
68
+ focus: {
69
+ boxShadow: `inset 0 0 0 4px ${colors.coralGreen}, inset 0 0 0 4px ${colors.coralGreen}, inset 0 0 0 6px currentColor`,
70
+ },
71
+ notFocus: {
72
+ boxShadow: "none",
73
+ },
74
+ }),
75
+ _hover: {
76
+ backgroundColor: "blueGreen",
77
+ },
78
+ _active: {
79
+ backgroundColor: "mint",
80
+ },
81
+ },
82
+ tertiary: {
83
+ backgroundColor: "mint",
84
+ color: "darkGrey",
85
+ fontWeight: "normal",
86
+ ...focusVisible({
87
+ focus: {
88
+ boxShadow: `inset 0 0 0 4px ${colors.mint}, inset 0 0 0 4px ${colors.mint}, inset 0 0 0 6px currentColor`,
89
+ },
90
+ notFocus: { boxShadow: "none" },
91
+ }),
92
+ _hover: {
93
+ backgroundColor: "seaMist",
94
+ },
95
+ _active: {
96
+ backgroundColor: "lightGrey",
97
+ },
98
+ },
99
+ additional: ({ colorMode }) => ({
100
+ backgroundColor: "transparent",
101
+ color: mode("darkGrey", "white")({ colorMode }),
102
+ fontWeight: "normal",
103
+ boxShadow: `inset 0 0 0 1px ${mode(
104
+ colors.blackAlpha[400],
105
+ colors.whiteAlpha[400]
106
+ )({ colorMode })}`,
107
+ ...focusVisible({
108
+ focus: {
109
+ boxShadow: getBoxShadowString({
110
+ borderWidth: 3,
111
+ borderColor: "greenHaze",
112
+ }),
113
+ },
114
+ notFocus: {
115
+ boxShadow: `inset 0 0 0 1px ${mode(
116
+ colors.blackAlpha[400],
117
+ colors.whiteAlpha[400]
118
+ )({ colorMode })}`,
119
+ },
120
+ }),
121
+ _hover: {
122
+ boxShadow: `inset 0 0 0 2px currentColor`,
123
+ },
124
+ _active: {
125
+ boxShadow: `inset 0 0 0 1px ${mode(
126
+ colors.blackAlpha[400],
127
+ colors.whiteAlpha[300]
128
+ )({ colorMode })}`,
129
+ backgroundColor: mode("mint", colors.whiteAlpha[300])({ colorMode }),
130
+ },
131
+ }),
132
+ ghost: () => ({
133
+ backgroundColor: "transparent",
134
+ color: "darkGrey",
135
+ fontWeight: "normal",
136
+ ...focusVisible({
137
+ focus: {
138
+ boxShadow: getBoxShadowString({
139
+ borderColor: "greenHaze",
140
+ borderWidth: 2,
141
+ }),
142
+ },
143
+ notFocus: {
144
+ outline: "none",
145
+ },
146
+ }),
147
+ _hover: {
148
+ backgroundColor: "seaMist",
149
+ _disabled: {
150
+ color: "blackAlpha.300",
151
+ },
152
+ },
153
+ _active: {
154
+ backgroundColor: "mint",
155
+ },
156
+ }),
157
+ floating: {
158
+ backgroundColor: "white",
159
+ boxShadow: "sm",
160
+ _active: {
161
+ backgroundColor: "mint",
162
+ },
163
+ _hover: {
164
+ boxShadow: "md",
165
+ },
166
+ ...focusVisible({
167
+ focus: {
168
+ boxShadow: getBoxShadowString({
169
+ borderColor: "greenHaze",
170
+ borderWidth: 2,
171
+ baseShadow: "sm",
172
+ }),
173
+ _hover: {
174
+ boxShadow: getBoxShadowString({
175
+ borderColor: "greenHaze",
176
+ borderWidth: 2,
177
+ baseShadow: "md",
178
+ }),
179
+ },
180
+ },
181
+ notFocus: {
182
+ outline: "none",
183
+ boxShadow: "sm",
184
+ },
185
+ }),
186
+ },
187
+ },
188
+ sizes: {
189
+ lg: {
190
+ minHeight: 8,
191
+ minWidth: 8,
192
+ fontSize: "18px",
193
+ },
194
+ md: {
195
+ minHeight: 7,
196
+ minWidth: 7,
197
+ fontSize: "18px",
198
+ },
199
+ sm: {
200
+ minHeight: 6,
201
+ minWidth: 6,
202
+ fontSize: "16px",
203
+ },
204
+ xs: {
205
+ minHeight: 5,
206
+ minWidth: 5,
207
+ fontSize: "16px",
208
+ px: 2,
209
+ },
210
+ },
211
+ defaultProps: {
212
+ variant: "primary",
213
+ size: "md",
214
+ },
215
+ });
216
+
217
+ export default config;