@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,158 @@
1
+ import { anatomy } from "@chakra-ui/anatomy";
2
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
3
+ import { mode } from "@chakra-ui/theme-tools";
4
+ import { getBoxShadowString } from "../utils/box-shadow-utils";
5
+ import { focusVisible } from "../utils/focus-utils";
6
+
7
+ const parts = anatomy("card-select").parts("trigger", "card");
8
+
9
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
10
+ const config = helpers.defineMultiStyleConfig({
11
+ baseStyle: (props) => ({
12
+ trigger: {
13
+ appearance: "none",
14
+ display: "flex",
15
+ alignItems: "center",
16
+ _expanded: {
17
+ backgroundColor: mode("mint", "night")(props),
18
+ },
19
+ ...focusVisible({
20
+ notFocus: {},
21
+ focus: {
22
+ boxShadow: getBoxShadowString({
23
+ borderColor: "greenHaze",
24
+ borderWidth: 3,
25
+ }),
26
+ outline: "none",
27
+ },
28
+ }),
29
+ },
30
+ card: {
31
+ borderRadius: "sm",
32
+ boxShadow: "md",
33
+ padding: 3,
34
+ },
35
+ }),
36
+ variants: {
37
+ ghost: (props) => ({
38
+ trigger: {
39
+ _hover: {
40
+ backgroundColor: mode("seaMist", "pine")(props),
41
+ },
42
+ _active: {
43
+ backgroundColor: mode("mint", "whiteAlpha.200")(props),
44
+ },
45
+ },
46
+ }),
47
+ outline: (props) => ({
48
+ trigger: {
49
+ boxShadow: getBoxShadowString({
50
+ borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
51
+ }),
52
+ ...focusVisible({
53
+ notFocus: { boxShadow: "none" },
54
+ focus: {
55
+ boxShadow: getBoxShadowString({
56
+ borderColor: "greenHaze",
57
+ borderWidth: 3,
58
+ }),
59
+ outline: "none",
60
+ },
61
+ }),
62
+ _hover: {
63
+ boxShadow: getBoxShadowString({
64
+ borderColor: mode("darkGrey", "white")(props),
65
+ borderWidth: 3,
66
+ }),
67
+ },
68
+ _active: {
69
+ backgroundColor: mode("mint", "whiteAlpha.200")(props),
70
+ boxShadow: getBoxShadowString({
71
+ borderColor: mode("darkGrey", "whiteAlpha.400")(props),
72
+ borderWidth: 1,
73
+ }),
74
+ },
75
+
76
+ _expanded: {
77
+ _hover: {
78
+ backgroundColor: mode("seaMist", "todo")(props),
79
+ boxShadow: "none",
80
+ },
81
+ _active: {
82
+ backgroundColor: mode("mint", "todo")(props),
83
+ boxShadow: getBoxShadowString({
84
+ borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
85
+ borderWidth: 1,
86
+ }),
87
+ },
88
+ },
89
+ },
90
+ }),
91
+ card: (props) => ({
92
+ trigger: {
93
+ backgroundColor: mode("transparent", "whiteAlpha.100")(props),
94
+ boxShadow: "sm",
95
+ transition: "all .1s ease-out",
96
+ _hover: {
97
+ backgroundColor: mode("seaMist", "pine")(props),
98
+ boxShadow: getBoxShadowString({
99
+ borderColor: mode("silver", "whiteAlpha.400")(props),
100
+ borderWidth: 1,
101
+ baseShadow: "sm",
102
+ }),
103
+ },
104
+ _active: {
105
+ backgroundColor: mode("mint", "whiteAlpha.100")(props),
106
+ boxShadow: getBoxShadowString({
107
+ borderColor: mode("silver", "whiteAlpha.400")(props),
108
+ borderWidth: mode(0, 1)(props),
109
+ baseShadow: "sm",
110
+ }),
111
+ },
112
+ _expanded: {
113
+ _hover: {
114
+ boxShadow: getBoxShadowString({
115
+ borderColor: "darkGrey",
116
+ borderWidth: 3,
117
+ }),
118
+ },
119
+ _active: {
120
+ backgroundColor: mode("mint", "whiteAlpha.200")(props),
121
+ boxShadow: "none",
122
+ },
123
+ },
124
+ },
125
+ }),
126
+ },
127
+ sizes: {
128
+ sm: {
129
+ trigger: {
130
+ paddingX: 1.5,
131
+ paddingY: 1,
132
+ minHeight: "1.25rem",
133
+ fontSize: "xs",
134
+ borderRadius: "sm",
135
+ },
136
+ },
137
+ md: {
138
+ trigger: {
139
+ paddingX: 2,
140
+ paddingY: 1.5,
141
+ minHeight: "2.625rem",
142
+ fontSize: "sm",
143
+ borderRadius: "sm",
144
+ },
145
+ },
146
+ lg: {
147
+ trigger: {
148
+ paddingX: 3,
149
+ paddingY: 2,
150
+ minHeight: "3.375rem",
151
+ fontSize: "sm",
152
+ borderRadius: "sm",
153
+ },
154
+ },
155
+ },
156
+ });
157
+
158
+ export default config;
@@ -0,0 +1,174 @@
1
+ import { defineStyleConfig } from "@chakra-ui/react";
2
+ import { colors } from "../foundations";
3
+ import { getBoxShadowString } from "../utils/box-shadow-utils";
4
+ import { focusVisible } from "../utils/focus-utils";
5
+
6
+ const config = defineStyleConfig({
7
+ baseStyle: (props: any) => ({
8
+ appearance: "none",
9
+ border: "none",
10
+ overflow: "hidden",
11
+ fontSize: "inherit",
12
+ transitionProperty: "common",
13
+ transitionDuration: "fast",
14
+ borderRadius: "md",
15
+ ...getColorSchemeBaseProps(props),
16
+
17
+ "button&, a&": {
18
+ ...getColorSchemeClickableProps(props),
19
+ _hover: getColorSchemeHoverProps(props),
20
+ _active: getColorSchemeActiveProps(props),
21
+ ...focusVisible({
22
+ focus: {
23
+ boxShadow: getBoxShadowString({
24
+ borderColor: "greenHaze",
25
+ borderWidth: 2,
26
+ }),
27
+ outline: "none",
28
+ _active: getColorSchemeActiveProps(props),
29
+ },
30
+ notFocus: {
31
+ ...getColorSchemeClickableProps(props),
32
+ _active: getColorSchemeActiveProps(props),
33
+ },
34
+ }),
35
+ _disabled: {
36
+ backgroundColor: "platinum",
37
+ boxShadow: getBoxShadowString({
38
+ borderColor: "silver",
39
+ }),
40
+ color: "osloGrey",
41
+ pointerEvents: "none",
42
+ },
43
+ },
44
+ }),
45
+ });
46
+
47
+ export default config;
48
+
49
+ type CardThemeProps = {
50
+ colorScheme:
51
+ | "white"
52
+ | "grey"
53
+ | "blue"
54
+ | "green"
55
+ | "teal"
56
+ | "yellow"
57
+ | "orange";
58
+ size: "sm" | "lg";
59
+ };
60
+
61
+ function getColorSchemeBaseProps({ colorScheme }: CardThemeProps): {
62
+ backgroundColor: string;
63
+ boxShadow: string;
64
+ } {
65
+ switch (colorScheme) {
66
+ case "white":
67
+ return {
68
+ backgroundColor: "white",
69
+ boxShadow: getBoxShadowString({
70
+ borderColor: "silver",
71
+ }),
72
+ };
73
+ case "grey":
74
+ return {
75
+ backgroundColor: "lightGrey",
76
+ boxShadow: getBoxShadowString({
77
+ borderColor: "steel",
78
+ }),
79
+ };
80
+ default:
81
+ return {
82
+ backgroundColor: colors[colorScheme]?.[100] ?? "platinum",
83
+ boxShadow: getBoxShadowString({
84
+ borderColor: colors[colorScheme]?.[200] ?? "silver",
85
+ }),
86
+ };
87
+ }
88
+ }
89
+
90
+ function getColorSchemeClickableProps({ colorScheme, size }: CardThemeProps) {
91
+ const baseShadow = size === "lg" ? "md" : "sm";
92
+ switch (colorScheme) {
93
+ case "white":
94
+ return {
95
+ boxShadow: getBoxShadowString({
96
+ baseShadow,
97
+ borderColor: "silver",
98
+ }),
99
+ };
100
+ case "grey":
101
+ return {
102
+ boxShadow: getBoxShadowString({
103
+ baseShadow,
104
+ borderColor: "steel",
105
+ }),
106
+ };
107
+ default:
108
+ return {
109
+ backgroundColor: colors[colorScheme]?.[100] ?? "platinum",
110
+ boxShadow: getBoxShadowString({
111
+ baseShadow,
112
+ borderColor: colors[colorScheme]?.[200] ?? "silver",
113
+ }),
114
+ };
115
+ }
116
+ }
117
+
118
+ function getColorSchemeHoverProps({ colorScheme, size }: CardThemeProps) {
119
+ const baseShadow = size === "lg" ? "lg" : "md";
120
+ switch (colorScheme) {
121
+ case "white":
122
+ return {
123
+ boxShadow: getBoxShadowString({
124
+ baseShadow,
125
+ borderColor: colors.steel,
126
+ }),
127
+ };
128
+ case "grey":
129
+ return {
130
+ boxShadow: getBoxShadowString({
131
+ baseShadow,
132
+ borderColor: colors.osloGrey,
133
+ }),
134
+ };
135
+ default:
136
+ return {
137
+ backgroundColor: colors[colorScheme]?.[200] ?? "silver",
138
+ boxShadow: getBoxShadowString({
139
+ baseShadow,
140
+ borderColor: colors[colorScheme]?.[400] ?? colors.silver,
141
+ }),
142
+ };
143
+ }
144
+ }
145
+
146
+ function getColorSchemeActiveProps({ colorScheme, size }: CardThemeProps) {
147
+ const baseShadow = size === "lg" ? "sm" : "none";
148
+ switch (colorScheme) {
149
+ case "white":
150
+ return {
151
+ backgroundColor: "mint",
152
+ boxShadow: getBoxShadowString({
153
+ baseShadow,
154
+ borderColor: colors.silver,
155
+ }),
156
+ };
157
+ case "grey":
158
+ return {
159
+ backgroundColor: "white",
160
+ boxShadow: getBoxShadowString({
161
+ baseShadow,
162
+ borderColor: colors.steel,
163
+ }),
164
+ };
165
+ default:
166
+ return {
167
+ backgroundColor: colors[colorScheme]?.[50] ?? "lightGrey",
168
+ boxShadow: getBoxShadowString({
169
+ baseShadow,
170
+ borderColor: colors[colorScheme]?.[100] ?? colors.silver,
171
+ }),
172
+ };
173
+ }
174
+ }
@@ -0,0 +1,90 @@
1
+ import { checkboxAnatomy as parts } from "@chakra-ui/anatomy";
2
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
3
+
4
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
5
+
6
+ const config = helpers.defineMultiStyleConfig({
7
+ baseStyle: {
8
+ container: {
9
+ _hover: {
10
+ "input:enabled:not([aria-invalid]) + .chakra-checkbox__control": {
11
+ backgroundColor: "white",
12
+ borderColor: "primaryGreen",
13
+ },
14
+ "input:enabled[aria-invalid] + .chakra-checkbox__control": {
15
+ backgroundColor: "white",
16
+ borderColor: "brightRed",
17
+ },
18
+ "input:enabled:checked:not([aria-invalid]) + .chakra-checkbox__control":
19
+ {
20
+ backgroundColor: "darkTeal",
21
+ borderColor: "darkTeal",
22
+ },
23
+ "input:enabled:checked[aria-invalid] + .chakra-checkbox__control": {
24
+ backgroundColor: "brightRed",
25
+ borderColor: "brightRed",
26
+ },
27
+ },
28
+ },
29
+ icon: {
30
+ fontSize: "1em",
31
+ transitionProperty: "transform",
32
+ transitionDuration: "normal",
33
+ strokeWidth: "1.5px !important", // Required to make the default icon look correct
34
+ },
35
+ control: {
36
+ width: 4,
37
+ height: 4,
38
+ transitionProperty: "background, border-color",
39
+ transitionDuration: "normal",
40
+ backgroundColor: "white",
41
+ border: "2px solid",
42
+ borderColor: "darkTeal",
43
+ borderRadius: "xs",
44
+ color: "white",
45
+
46
+ _checked: {
47
+ backgroundColor: "primaryGreen",
48
+ borderColor: "primaryGreen",
49
+ color: "white",
50
+
51
+ _focus: {
52
+ backgroundColor: "primaryGreen",
53
+ borderColor: "azure",
54
+ },
55
+
56
+ _disabled: {
57
+ backgroundColor: "lightGrey",
58
+ borderColor: "steel",
59
+ color: "steel",
60
+ },
61
+
62
+ _invalid: {
63
+ backgroundColor: "brightRed",
64
+ borderColor: "brightRed",
65
+ },
66
+ },
67
+
68
+ _disabled: {
69
+ backgroundColor: "lightGrey",
70
+ borderColor: "steel",
71
+ },
72
+
73
+ _focus: {
74
+ backgroundColor: "white",
75
+ borderColor: "azure",
76
+ },
77
+
78
+ _invalid: {
79
+ backgroundColor: "white",
80
+ borderColor: "brightRed",
81
+ },
82
+ },
83
+ label: {
84
+ userSelect: "none",
85
+ _disabled: { opacity: 0.4 },
86
+ },
87
+ },
88
+ });
89
+
90
+ export default config;
@@ -0,0 +1,79 @@
1
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
2
+ import { anatomy } from "@chakra-ui/theme-tools";
3
+ import { getBoxShadowString } from "../utils/box-shadow-utils";
4
+
5
+ const parts = anatomy("choice-chip").parts("container", "icon", "label");
6
+
7
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
8
+
9
+ const config = helpers.defineMultiStyleConfig({
10
+ baseStyle: (props) => ({
11
+ container: {
12
+ backgroundColor: "white",
13
+ boxShadow: getBoxShadowString({ borderColor: "celadon" }),
14
+ color: "darkTeal",
15
+ display: "inline-flex",
16
+ alignItems: "center",
17
+ fontSize: "16px",
18
+ px: 1,
19
+ _checked: {
20
+ background: "seaMist",
21
+ boxShadow: getBoxShadowString({ borderColor: "celadon" }),
22
+ },
23
+ "input:focus-visible + &": {
24
+ boxShadow: getBoxShadowString({
25
+ borderColor: "greenHaze",
26
+ borderWidth: 2,
27
+ }),
28
+ },
29
+ "@media (hover:hover)": {
30
+ _hover: {
31
+ boxShadow: getBoxShadowString({
32
+ borderColor: "greenHaze",
33
+ borderWidth: 2,
34
+ }),
35
+ background: "mint",
36
+ cursor: "pointer",
37
+ },
38
+ },
39
+ },
40
+ icon: {
41
+ mr: props.hasLabel ? 1 : 0,
42
+ },
43
+ }),
44
+ sizes: {
45
+ sm: {
46
+ container: {
47
+ borderRadius: "15px",
48
+ height: "30px",
49
+ px: 1.5,
50
+ },
51
+ },
52
+ md: {
53
+ container: {
54
+ borderRadius: "18px",
55
+ height: "36px",
56
+ px: 2,
57
+ },
58
+ },
59
+ lg: {
60
+ container: {
61
+ borderRadius: "21px",
62
+ height: "42px",
63
+ px: 2,
64
+ },
65
+ },
66
+ xl: {
67
+ container: {
68
+ borderRadius: "27px",
69
+ height: "54px",
70
+ px: 3,
71
+ },
72
+ },
73
+ },
74
+ defaultProps: {
75
+ size: "md",
76
+ },
77
+ });
78
+
79
+ export default config;
@@ -0,0 +1,56 @@
1
+ import { defineStyleConfig } from "@chakra-ui/react";
2
+ import { cssVar } from "@chakra-ui/theme-tools";
3
+ import { getBoxShadowString } from "../utils/box-shadow-utils";
4
+ import { focusVisible } from "../utils/focus-utils";
5
+
6
+ const $size = cssVar("close-button-size");
7
+
8
+ const config = defineStyleConfig({
9
+ baseStyle: {
10
+ w: [$size.reference],
11
+ h: [$size.reference],
12
+ transitionProperty: "common",
13
+ transitionDuration: "normal",
14
+ borderRadius: "xs",
15
+ backgroundColor: "transparent",
16
+ color: "darkGrey",
17
+ fontWeight: "normal",
18
+ ...focusVisible({
19
+ focus: {
20
+ outline: "none",
21
+ boxShadow: getBoxShadowString({ borderColor: "greenHaze" }),
22
+ },
23
+ notFocus: {
24
+ boxShadow: "none",
25
+ },
26
+ }),
27
+ _hover: {
28
+ backgroundColor: "seaMist",
29
+ _disabled: {
30
+ color: "dimGrey",
31
+ },
32
+ },
33
+ _active: {
34
+ backgroundColor: "mint",
35
+ },
36
+ },
37
+ sizes: {
38
+ lg: {
39
+ [$size.variable]: "40px",
40
+ fontSize: "16px",
41
+ },
42
+ md: {
43
+ [$size.variable]: "32px",
44
+ fontSize: "12px",
45
+ },
46
+ sm: {
47
+ [$size.variable]: "24px",
48
+ fontSize: "10px",
49
+ },
50
+ },
51
+ defaultProps: {
52
+ size: "md",
53
+ },
54
+ });
55
+
56
+ export default config;
@@ -0,0 +1,17 @@
1
+ import { defineStyleConfig } from "@chakra-ui/react";
2
+ import Badge from "./badge";
3
+
4
+ const { variants, defaultProps } = Badge;
5
+
6
+ const config = defineStyleConfig({
7
+ baseStyle: {
8
+ fontFamily: "monospace",
9
+ fontSize: ["mobile.xs", "desktop.xs"],
10
+ borderRadius: "xs",
11
+ px: 1,
12
+ },
13
+ variants,
14
+ defaultProps,
15
+ });
16
+
17
+ export default config;