@vygruppen/spor-react 9.15.0 → 10.0.0
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.
- package/.turbo/turbo-build.log +10 -10
- package/CHANGELOG.md +34 -0
- package/dist/{CountryCodeSelect-BF22CLZQ.mjs → CountryCodeSelect-PWHXKGPJ.mjs} +1 -1
- package/dist/{chunk-NTYAUO4O.mjs → chunk-FQLXMFMW.mjs} +1003 -1148
- package/dist/index.d.mts +180 -685
- package/dist/index.d.ts +180 -685
- package/dist/index.js +1455 -1628
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
- package/src/accordion/Accordion.tsx +8 -12
- package/src/accordion/Expandable.tsx +8 -26
- package/src/alert/ExpandableAlert.tsx +2 -2
- package/src/datepicker/CalendarTriggerButton.tsx +17 -13
- package/src/datepicker/DateField.tsx +50 -7
- package/src/datepicker/DatePicker.tsx +15 -4
- package/src/datepicker/DateTimeSegment.tsx +5 -1
- package/src/datepicker/StyledField.tsx +7 -1
- package/src/index.tsx +0 -1
- package/src/input/ChoiceChip.tsx +66 -55
- package/src/input/Combobox.tsx +11 -4
- package/src/input/Input.tsx +5 -1
- package/src/input/ListBox.tsx +4 -0
- package/src/input/NumericStepper.tsx +8 -6
- package/src/layout/StaticCard.tsx +0 -1
- package/src/linjetag/LineIcon.tsx +3 -8
- package/src/linjetag/TravelTag.tsx +11 -2
- package/src/linjetag/{types.d.ts → types.ts} +1 -1
- package/src/theme/components/accordion.ts +7 -40
- package/src/theme/components/datepicker.ts +2 -15
- package/src/theme/components/index.ts +0 -1
- package/src/theme/components/listbox.ts +4 -3
- package/src/accordion/AccordionContext.tsx +0 -27
- package/src/card/Card.tsx +0 -73
- package/src/card/index.tsx +0 -1
- package/src/theme/components/card.ts +0 -171
package/src/input/Input.tsx
CHANGED
@@ -38,6 +38,7 @@ export const Input = forwardRef<InputProps, "input">(
|
|
38
38
|
const formControlProps = useFormControlContext();
|
39
39
|
const fallbackId = `input-${useId()}`;
|
40
40
|
const inputId = id ?? formControlProps?.id ?? fallbackId;
|
41
|
+
const labelId = `${useId()}-label`;
|
41
42
|
return (
|
42
43
|
<InputGroup position="relative">
|
43
44
|
{leftIcon && (
|
@@ -49,10 +50,13 @@ export const Input = forwardRef<InputProps, "input">(
|
|
49
50
|
paddingRight={rightIcon ? 7 : undefined}
|
50
51
|
{...props}
|
51
52
|
id={inputId}
|
53
|
+
aria-labelledby={labelId}
|
52
54
|
ref={ref}
|
53
55
|
placeholder=" " // This is needed to make the label work as expected
|
54
56
|
/>
|
55
|
-
<FormLabel htmlFor={inputId}
|
57
|
+
<FormLabel htmlFor={inputId} id={labelId}>
|
58
|
+
{label}
|
59
|
+
</FormLabel>
|
56
60
|
{rightIcon && (
|
57
61
|
<InputRightElement pointerEvents="none">
|
58
62
|
{rightIcon}
|
package/src/input/ListBox.tsx
CHANGED
@@ -135,6 +135,7 @@ function Option({ item, state }: OptionProps) {
|
|
135
135
|
optionProps,
|
136
136
|
isSelected,
|
137
137
|
isDisabled,
|
138
|
+
isFocusVisible,
|
138
139
|
isFocused,
|
139
140
|
labelProps,
|
140
141
|
descriptionProps,
|
@@ -151,6 +152,9 @@ function Option({ item, state }: OptionProps) {
|
|
151
152
|
if (isFocused) {
|
152
153
|
dataFields["data-focus"] = true;
|
153
154
|
}
|
155
|
+
if (isFocusVisible) {
|
156
|
+
dataFields["data-focus-visible"] = true;
|
157
|
+
}
|
154
158
|
|
155
159
|
/*
|
156
160
|
Workaround to fix click througs on mobile devices
|
@@ -159,7 +159,9 @@ const VerySmallButton = (props: VerySmallButtonProps) => {
|
|
159
159
|
);
|
160
160
|
};
|
161
161
|
|
162
|
-
|
162
|
+
type IconPropTypes = BoxProps & { stepLabel: number };
|
163
|
+
|
164
|
+
const SubtractIcon = ({ stepLabel, ...props }: IconPropTypes) => (
|
163
165
|
<>
|
164
166
|
<Box
|
165
167
|
as="svg"
|
@@ -178,13 +180,13 @@ const SubtractIcon = (props: BoxProps & { stepLabel: number }) => (
|
|
178
180
|
strokeLinecap="round"
|
179
181
|
/>
|
180
182
|
</Box>
|
181
|
-
{
|
182
|
-
<chakra.span paddingRight="1">{
|
183
|
+
{stepLabel > 1 && (
|
184
|
+
<chakra.span paddingRight="1">{stepLabel.toString()}</chakra.span>
|
183
185
|
)}
|
184
186
|
</>
|
185
187
|
);
|
186
188
|
|
187
|
-
const AddIcon = (
|
189
|
+
const AddIcon = ({ stepLabel, ...props }: IconPropTypes) => (
|
188
190
|
<>
|
189
191
|
<Box
|
190
192
|
as="svg"
|
@@ -212,8 +214,8 @@ const AddIcon = (props: BoxProps & { stepLabel: number }) => (
|
|
212
214
|
/>
|
213
215
|
</Box>
|
214
216
|
|
215
|
-
{
|
216
|
-
<chakra.span paddingRight="1">{
|
217
|
+
{stepLabel > 1 && (
|
218
|
+
<chakra.span paddingRight="1">{stepLabel.toString()}</chakra.span>
|
217
219
|
)}
|
218
220
|
</>
|
219
221
|
);
|
@@ -1,19 +1,14 @@
|
|
1
1
|
import { Box, BoxProps, useMultiStyleConfig } from "@chakra-ui/react";
|
2
2
|
import React from "react";
|
3
3
|
import { getCorrectIcon } from "./icons";
|
4
|
-
import { TagProps } from "./types";
|
4
|
+
import { CustomVariantProps, TagProps } from "./types";
|
5
5
|
|
6
6
|
type DefaultVariants = Exclude<TagProps["variant"], "custom">;
|
7
7
|
|
8
8
|
type DefaultVariantProps = {
|
9
9
|
variant: DefaultVariants;
|
10
10
|
};
|
11
|
-
|
12
|
-
variant: "custom";
|
13
|
-
customIconVariant: DefaultVariants;
|
14
|
-
foregroundColor: string;
|
15
|
-
backgroundColor: string;
|
16
|
-
};
|
11
|
+
|
17
12
|
type VariantProps = DefaultVariantProps | CustomVariantProps;
|
18
13
|
|
19
14
|
export type LineIconProps = Exclude<BoxProps, "variant"> &
|
@@ -70,7 +65,7 @@ export const LineIcon = ({
|
|
70
65
|
return null;
|
71
66
|
}
|
72
67
|
return (
|
73
|
-
<Box sx={{ ...styles.iconContainer, ...sx }}
|
68
|
+
<Box sx={{ ...styles.iconContainer, ...sx }}>
|
74
69
|
<Icon sx={styles.icon} />
|
75
70
|
</Box>
|
76
71
|
);
|
@@ -21,6 +21,9 @@ export type TravelTagProps = TagProps &
|
|
21
21
|
BoxProps & {
|
22
22
|
deviationLevel?: "critical" | "major" | "minor" | "info" | "none";
|
23
23
|
isDisabled?: boolean;
|
24
|
+
foregroundColor?: string;
|
25
|
+
backgroundColor?: string;
|
26
|
+
customIconVariant?: string;
|
24
27
|
};
|
25
28
|
|
26
29
|
/**
|
@@ -82,6 +85,9 @@ export const TravelTag = forwardRef<TravelTagProps, As>(
|
|
82
85
|
title,
|
83
86
|
description,
|
84
87
|
isDisabled,
|
88
|
+
foregroundColor,
|
89
|
+
backgroundColor,
|
90
|
+
customIconVariant,
|
85
91
|
...rest
|
86
92
|
},
|
87
93
|
ref,
|
@@ -90,8 +96,8 @@ export const TravelTag = forwardRef<TravelTagProps, As>(
|
|
90
96
|
variant,
|
91
97
|
size,
|
92
98
|
deviationLevel,
|
93
|
-
foregroundColor: variant === "custom" ?
|
94
|
-
backgroundColor: variant === "custom" ?
|
99
|
+
foregroundColor: variant === "custom" ? foregroundColor : undefined,
|
100
|
+
backgroundColor: variant === "custom" ? backgroundColor : undefined,
|
95
101
|
});
|
96
102
|
|
97
103
|
const DeviationLevelIcon = getDeviationLevelIcon({ deviationLevel, size });
|
@@ -102,6 +108,9 @@ export const TravelTag = forwardRef<TravelTagProps, As>(
|
|
102
108
|
variant={variant}
|
103
109
|
size={size}
|
104
110
|
sx={styles.iconContainer}
|
111
|
+
foregroundColor={foregroundColor}
|
112
|
+
backgroundColor={backgroundColor}
|
113
|
+
customIconVariant={customIconVariant}
|
105
114
|
{...(rest as any)}
|
106
115
|
/>
|
107
116
|
<Box sx={styles.textContainer}>
|
@@ -25,7 +25,7 @@ export type TagProps = VariantProps & {
|
|
25
25
|
type DefaultVariantProps = {
|
26
26
|
variant: Variant;
|
27
27
|
};
|
28
|
-
type CustomVariantProps = {
|
28
|
+
export type CustomVariantProps = {
|
29
29
|
variant: "custom";
|
30
30
|
/** When variant="custom", the foreground color of the tag */
|
31
31
|
foregroundColor: string;
|
@@ -20,9 +20,13 @@ const config = helpers.defineMultiStyleConfig({
|
|
20
20
|
justifyContent: "space-between",
|
21
21
|
...baseText("default", props),
|
22
22
|
textAlign: "left",
|
23
|
+
fontSize: ["mobile.sm", null, "desktop.sm"],
|
23
24
|
fontFamily: "body",
|
24
25
|
fontWeight: "bold",
|
25
26
|
outlineOffset: "-2px",
|
27
|
+
paddingX: [2, null, 3],
|
28
|
+
paddingY: [1, null, 1.5],
|
29
|
+
minHeight: [6, null, 7],
|
26
30
|
...focusVisibleStyles(props),
|
27
31
|
_disabled: {
|
28
32
|
pointerEvents: "none",
|
@@ -31,7 +35,9 @@ const config = helpers.defineMultiStyleConfig({
|
|
31
35
|
},
|
32
36
|
panel: {
|
33
37
|
paddingY: 2,
|
38
|
+
paddingX: [2, null, 3],
|
34
39
|
borderBottomRadius: "sm",
|
40
|
+
fontSize: ["mobile.sm", null, "desktop.sm"],
|
35
41
|
},
|
36
42
|
icon: {
|
37
43
|
fontSize: "1.25em",
|
@@ -88,47 +94,8 @@ const config = helpers.defineMultiStyleConfig({
|
|
88
94
|
},
|
89
95
|
}),
|
90
96
|
},
|
91
|
-
sizes: {
|
92
|
-
sm: {
|
93
|
-
button: {
|
94
|
-
fontSize: ["mobile.xs", null, "desktop.xs"],
|
95
|
-
paddingX: 2,
|
96
|
-
paddingY: 1,
|
97
|
-
minHeight: 6,
|
98
|
-
},
|
99
|
-
panel: {
|
100
|
-
fontSize: ["mobile.xs", null, "desktop.xs"],
|
101
|
-
paddingX: 2,
|
102
|
-
},
|
103
|
-
},
|
104
|
-
md: {
|
105
|
-
button: {
|
106
|
-
fontSize: ["mobile.sm", null, "desktop.sm"],
|
107
|
-
paddingX: 3,
|
108
|
-
paddingY: 1,
|
109
|
-
minHeight: 7,
|
110
|
-
},
|
111
|
-
panel: {
|
112
|
-
fontSize: ["mobile.sm", null, "desktop.sm"],
|
113
|
-
paddingX: 3,
|
114
|
-
},
|
115
|
-
},
|
116
|
-
lg: {
|
117
|
-
button: {
|
118
|
-
fontSize: ["mobile.sm", null, "desktop.sm"],
|
119
|
-
paddingX: 3,
|
120
|
-
paddingY: 2,
|
121
|
-
minHeight: 8,
|
122
|
-
},
|
123
|
-
panel: {
|
124
|
-
fontSize: ["mobile.sm", null, "desktop.sm"],
|
125
|
-
paddingX: 3,
|
126
|
-
},
|
127
|
-
},
|
128
|
-
},
|
129
97
|
defaultProps: {
|
130
|
-
variant: "
|
131
|
-
size: "sm",
|
98
|
+
variant: "base",
|
132
99
|
},
|
133
100
|
});
|
134
101
|
|
@@ -42,6 +42,8 @@ const config = helpers.defineMultiStyleConfig({
|
|
42
42
|
_disabled: {
|
43
43
|
pointerEvents: "none",
|
44
44
|
...baseBackground("disabled", props),
|
45
|
+
...baseBorder("disabled", props),
|
46
|
+
...baseText("disabled", props),
|
45
47
|
},
|
46
48
|
_focusWithin: {
|
47
49
|
...focusVisibleStyles(props)._focusVisible,
|
@@ -49,15 +51,10 @@ const config = helpers.defineMultiStyleConfig({
|
|
49
51
|
},
|
50
52
|
inputLabel: {
|
51
53
|
fontSize: "mobile.xs",
|
52
|
-
color: mode("darkGrey", "white")(props),
|
53
54
|
margin: 0,
|
54
55
|
cursor: "text",
|
55
56
|
},
|
56
57
|
dateTimeSegment: {
|
57
|
-
color: mode(
|
58
|
-
"darkGrey",
|
59
|
-
props.isPlaceholder ? "whiteAlpha.400" : "white",
|
60
|
-
)(props),
|
61
58
|
_focus: {
|
62
59
|
...brandBackground("hover", props),
|
63
60
|
color: "white",
|
@@ -68,13 +65,9 @@ const config = helpers.defineMultiStyleConfig({
|
|
68
65
|
display: "flex",
|
69
66
|
alignItems: "center",
|
70
67
|
justifyContent: "center",
|
71
|
-
borderLeftRadius: "sm",
|
72
68
|
transitionProperty: "box-shadow, background-color",
|
73
69
|
transitionSpeed: "fast",
|
74
70
|
position: "relative",
|
75
|
-
paddingTop: 1,
|
76
|
-
paddingBottom: 1,
|
77
|
-
borderRadius: "sm",
|
78
71
|
right: "9px",
|
79
72
|
|
80
73
|
...focusVisibleStyles(props),
|
@@ -173,9 +166,6 @@ const config = helpers.defineMultiStyleConfig({
|
|
173
166
|
_invalid: {
|
174
167
|
...baseBorder("invalid", props),
|
175
168
|
},
|
176
|
-
_disabled: {
|
177
|
-
...baseBorder("disabled", props),
|
178
|
-
},
|
179
169
|
},
|
180
170
|
}),
|
181
171
|
floating: (props) => ({
|
@@ -190,9 +180,6 @@ const config = helpers.defineMultiStyleConfig({
|
|
190
180
|
_invalid: {
|
191
181
|
...baseBorder("invalid", props),
|
192
182
|
},
|
193
|
-
_disabled: {
|
194
|
-
...baseBorder("disabled", props),
|
195
|
-
},
|
196
183
|
},
|
197
184
|
}),
|
198
185
|
ghost: (props) => ({
|
@@ -4,7 +4,6 @@ export { default as AlertExpandable } from "./alert-expandable";
|
|
4
4
|
export { default as Badge } from "./badge";
|
5
5
|
export { default as Breadcrumb } from "./breadcrumb";
|
6
6
|
export { default as Button } from "./button";
|
7
|
-
export { default as Card } from "./card";
|
8
7
|
export { default as CardSelect } from "./card-select";
|
9
8
|
export { default as Checkbox } from "./checkbox";
|
10
9
|
export { default as ChoiceChip } from "./choice-chip";
|
@@ -4,6 +4,7 @@ import { mode } from "@chakra-ui/theme-tools";
|
|
4
4
|
import { baseBorder } from "../utils/base-utils";
|
5
5
|
import { ghostBackground, ghostText } from "../utils/ghost-utils";
|
6
6
|
import { surface } from "../utils/surface-utils";
|
7
|
+
import { outlineBorder } from "../utils/outline-utils";
|
7
8
|
|
8
9
|
const parts = anatomy("ListBox").parts(
|
9
10
|
"container",
|
@@ -38,12 +39,12 @@ const config = helpers.defineMultiStyleConfig({
|
|
38
39
|
_active: {
|
39
40
|
...ghostBackground("active", props),
|
40
41
|
},
|
42
|
+
_focusVisible: {
|
43
|
+
...outlineBorder("focus", props),
|
44
|
+
},
|
41
45
|
_hover: {
|
42
46
|
...ghostBackground("hover", props),
|
43
47
|
},
|
44
|
-
_focus: {
|
45
|
-
...ghostBackground("selected", props),
|
46
|
-
},
|
47
48
|
_selected: {
|
48
49
|
...ghostBackground("active", props),
|
49
50
|
},
|
@@ -1,27 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import { AccordionProps } from "./Accordion";
|
3
|
-
|
4
|
-
type AccordionContextType = {
|
5
|
-
size: AccordionProps["size"];
|
6
|
-
};
|
7
|
-
const AccordionContext = React.createContext<AccordionContextType | null>(null);
|
8
|
-
type AccordionProviderProps = {
|
9
|
-
children: React.ReactNode;
|
10
|
-
size: AccordionProps["size"];
|
11
|
-
};
|
12
|
-
export const AccordionProvider = ({
|
13
|
-
size,
|
14
|
-
...props
|
15
|
-
}: AccordionProviderProps) => {
|
16
|
-
return <AccordionContext.Provider value={{ size }} {...props} />;
|
17
|
-
};
|
18
|
-
|
19
|
-
export const useAccordionContext = () => {
|
20
|
-
const context = React.useContext(AccordionContext);
|
21
|
-
if (context === null) {
|
22
|
-
throw new Error(
|
23
|
-
"useAccordionContext must be used within AccordionProvider",
|
24
|
-
);
|
25
|
-
}
|
26
|
-
return context;
|
27
|
-
};
|
package/src/card/Card.tsx
DELETED
@@ -1,73 +0,0 @@
|
|
1
|
-
import {
|
2
|
-
As,
|
3
|
-
Box,
|
4
|
-
BoxProps,
|
5
|
-
forwardRef,
|
6
|
-
useStyleConfig,
|
7
|
-
} from "@chakra-ui/react";
|
8
|
-
import React from "react";
|
9
|
-
|
10
|
-
export type CardProps = Exclude<BoxProps, "size"> & {
|
11
|
-
size?: "sm" | "lg";
|
12
|
-
children: React.ReactNode;
|
13
|
-
colorScheme:
|
14
|
-
| "white"
|
15
|
-
| "grey"
|
16
|
-
| "blue"
|
17
|
-
| "green"
|
18
|
-
| "teal"
|
19
|
-
| "yellow"
|
20
|
-
| "orange"
|
21
|
-
| "red";
|
22
|
-
};
|
23
|
-
/**
|
24
|
-
* Renders a card.
|
25
|
-
*
|
26
|
-
* The most basic version looks like this:
|
27
|
-
*
|
28
|
-
* ```tsx
|
29
|
-
* <Card>
|
30
|
-
* Content
|
31
|
-
* </Card>
|
32
|
-
* ```
|
33
|
-
*
|
34
|
-
* There are lots of color schemes available. You can also set the size as either `sm` or `lg`. The default is `sm`.
|
35
|
-
*
|
36
|
-
* ```tsx
|
37
|
-
* <Card colorScheme="orange" size="lg">
|
38
|
-
* A smaller card
|
39
|
-
* </Card>
|
40
|
-
* ```
|
41
|
-
*
|
42
|
-
* Cards are not interactive by default. If you specify the `as` prop to be a link or a button, you can make them work as links or buttons respectively. This will also give it a drop shadow.
|
43
|
-
*
|
44
|
-
* ```tsx
|
45
|
-
* <Card colorScheme="blue" as="button" onClick={handleClick}>
|
46
|
-
* Click for profit
|
47
|
-
* </Card>
|
48
|
-
* <Card colorScheme="green" as="a" href="https://vy.no">
|
49
|
-
* Go to start
|
50
|
-
* </Card>
|
51
|
-
* ```
|
52
|
-
*/
|
53
|
-
|
54
|
-
/**
|
55
|
-
* @deprecated Card is deprecated. Use `StaticCard` or `PressableCard` instead.
|
56
|
-
*/
|
57
|
-
export const Card = forwardRef<CardProps, As>(
|
58
|
-
({ size = "sm", colorScheme = "white", children, ...props }, ref) => {
|
59
|
-
console.warn(
|
60
|
-
"Warning: Card is deprecated. Use `StaticCard` or `PressableCard` instead.",
|
61
|
-
);
|
62
|
-
const styles = useStyleConfig("Card", {
|
63
|
-
colorScheme,
|
64
|
-
size,
|
65
|
-
});
|
66
|
-
|
67
|
-
return (
|
68
|
-
<Box __css={styles} {...props} ref={ref}>
|
69
|
-
{children}
|
70
|
-
</Box>
|
71
|
-
);
|
72
|
-
},
|
73
|
-
);
|
package/src/card/index.tsx
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from "./Card";
|
@@ -1,171 +0,0 @@
|
|
1
|
-
import { defineStyleConfig } from "@chakra-ui/react";
|
2
|
-
import { mode } from "@chakra-ui/theme-tools";
|
3
|
-
import { colors } from "../foundations";
|
4
|
-
import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
|
5
|
-
import { floatingBorder } from "../utils/floating-utils";
|
6
|
-
import { focusVisibleStyles } from "../utils/focus-utils";
|
7
|
-
|
8
|
-
const config = defineStyleConfig({
|
9
|
-
baseStyle: (props: any) => ({
|
10
|
-
appearance: "none",
|
11
|
-
border: "none",
|
12
|
-
overflow: "hidden",
|
13
|
-
fontSize: "inherit",
|
14
|
-
display: "block",
|
15
|
-
transitionProperty: "common",
|
16
|
-
transitionDuration: "fast",
|
17
|
-
borderRadius: "md",
|
18
|
-
// Except for white cards, all cards are light mode always
|
19
|
-
color: "text.default.light",
|
20
|
-
...getColorSchemeBaseProps(props),
|
21
|
-
"button&, a&, label&, &.is-clickable": {
|
22
|
-
outline: "1px solid",
|
23
|
-
...getColorSchemeClickableProps(props),
|
24
|
-
...focusVisibleStyles(props),
|
25
|
-
_hover: getColorSchemeHoverProps(props),
|
26
|
-
_active: getColorSchemeActiveProps(props),
|
27
|
-
_disabled: {
|
28
|
-
...baseBackground("disabled", props),
|
29
|
-
...baseBorder("disabled", props),
|
30
|
-
...baseText("disabled", props),
|
31
|
-
pointerEvents: "none",
|
32
|
-
},
|
33
|
-
},
|
34
|
-
}),
|
35
|
-
sizes: {
|
36
|
-
sm: {
|
37
|
-
"button&, a&, label&, &.is-clickable": {
|
38
|
-
boxShadow: "sm",
|
39
|
-
|
40
|
-
_hover: {
|
41
|
-
boxShadow: "md",
|
42
|
-
},
|
43
|
-
|
44
|
-
_active: {
|
45
|
-
boxShadow: "none",
|
46
|
-
},
|
47
|
-
},
|
48
|
-
},
|
49
|
-
lg: {
|
50
|
-
"button&, a&, label&, &.is-clickable": {
|
51
|
-
boxShadow: "md",
|
52
|
-
|
53
|
-
_hover: {
|
54
|
-
boxShadow: "lg",
|
55
|
-
},
|
56
|
-
|
57
|
-
_active: {
|
58
|
-
boxShadow: "sm",
|
59
|
-
},
|
60
|
-
},
|
61
|
-
},
|
62
|
-
},
|
63
|
-
});
|
64
|
-
|
65
|
-
export default config;
|
66
|
-
|
67
|
-
type CardThemeProps = {
|
68
|
-
colorScheme:
|
69
|
-
| "white"
|
70
|
-
| "grey"
|
71
|
-
| "blue"
|
72
|
-
| "green"
|
73
|
-
| "teal"
|
74
|
-
| "yellow"
|
75
|
-
| "orange"
|
76
|
-
| "red";
|
77
|
-
theme: any;
|
78
|
-
colorMode: "light" | "dark";
|
79
|
-
};
|
80
|
-
|
81
|
-
const getColorSchemeBaseProps = (props: CardThemeProps) => {
|
82
|
-
switch (props.colorScheme) {
|
83
|
-
case "white":
|
84
|
-
return {
|
85
|
-
...baseBorder("default", props),
|
86
|
-
backgroundColor: mode(
|
87
|
-
"white",
|
88
|
-
`color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`,
|
89
|
-
)(props),
|
90
|
-
color: "inherit",
|
91
|
-
};
|
92
|
-
case "grey":
|
93
|
-
return {
|
94
|
-
backgroundColor: "lightGrey",
|
95
|
-
};
|
96
|
-
case "green": {
|
97
|
-
return {
|
98
|
-
backgroundColor: "seaMist",
|
99
|
-
};
|
100
|
-
}
|
101
|
-
case "red": {
|
102
|
-
return {
|
103
|
-
backgroundColor: "pink",
|
104
|
-
};
|
105
|
-
}
|
106
|
-
default:
|
107
|
-
return {
|
108
|
-
backgroundColor: colors[props.colorScheme]?.[100] ?? "platinum",
|
109
|
-
};
|
110
|
-
}
|
111
|
-
};
|
112
|
-
|
113
|
-
function getColorSchemeClickableProps(props: CardThemeProps) {
|
114
|
-
switch (props.colorScheme) {
|
115
|
-
case "white":
|
116
|
-
return {
|
117
|
-
...floatingBorder("default", props),
|
118
|
-
};
|
119
|
-
case "grey":
|
120
|
-
return {
|
121
|
-
outlineColor: "steel",
|
122
|
-
};
|
123
|
-
default:
|
124
|
-
return {
|
125
|
-
backgroundColor: colors[props.colorScheme]?.[100] ?? "platinum",
|
126
|
-
outlineColor: colors[props.colorScheme]?.[200] ?? "silver",
|
127
|
-
};
|
128
|
-
}
|
129
|
-
}
|
130
|
-
|
131
|
-
const getColorSchemeHoverProps = (props: CardThemeProps) => {
|
132
|
-
switch (props.colorScheme) {
|
133
|
-
case "white":
|
134
|
-
return {
|
135
|
-
backgroundColor: mode(
|
136
|
-
"white",
|
137
|
-
`color-mix(in srgb, white 20%, var(--spor-colors-bg-default-dark))`,
|
138
|
-
)(props),
|
139
|
-
...floatingBorder("hover", props),
|
140
|
-
};
|
141
|
-
case "grey":
|
142
|
-
return {
|
143
|
-
outlineColor: "osloGrey",
|
144
|
-
};
|
145
|
-
default:
|
146
|
-
return {
|
147
|
-
backgroundColor: colors[props.colorScheme]?.[200] ?? "silver",
|
148
|
-
outlineColor: colors[props.colorScheme]?.[400] ?? "silver",
|
149
|
-
};
|
150
|
-
}
|
151
|
-
};
|
152
|
-
const getColorSchemeActiveProps = (props: CardThemeProps) => {
|
153
|
-
const { colorScheme } = props;
|
154
|
-
switch (colorScheme) {
|
155
|
-
case "white":
|
156
|
-
return {
|
157
|
-
backgroundColor: mode("bg.tertiary.light", `bg.default.dark`)(props),
|
158
|
-
...floatingBorder("active", props),
|
159
|
-
};
|
160
|
-
case "grey":
|
161
|
-
return {
|
162
|
-
backgroundColor: "white",
|
163
|
-
outlineColor: "steel",
|
164
|
-
};
|
165
|
-
default:
|
166
|
-
return {
|
167
|
-
backgroundColor: colors[colorScheme]?.[50] ?? "lightGrey",
|
168
|
-
outlineColor: colors[colorScheme]?.[100] ?? "silver",
|
169
|
-
};
|
170
|
-
}
|
171
|
-
};
|