A design system in a box.
hip-ui.tngl.io/docs/introduction
circle swatch
+31
-1
+11
packages/hip-ui/src/components/color-swatch/index.tsx
+11
packages/hip-ui/src/components/color-swatch/index.tsx
···
45
45
height: spacing["8"],
46
46
width: spacing["8"],
47
47
},
48
+
circle: {
49
+
// eslint-disable-next-line @stylexjs/valid-styles
50
+
cornerShape: "unset",
51
+
borderRadius: {
52
+
default: "50%",
53
+
[mediaQueries.supportsSquircle]: "50%",
54
+
},
55
+
},
48
56
});
49
57
50
58
export interface ColorSwatchProps extends StyleXComponentProps<
···
52
60
> {
53
61
children?: React.ReactNode;
54
62
size?: Size;
63
+
variant?: "default" | "circle";
55
64
}
56
65
57
66
export function ColorSwatch({
58
67
style,
59
68
size: sizeProp,
69
+
variant = "default",
60
70
...props
61
71
}: ColorSwatchProps) {
62
72
const size = sizeProp || use(SizeContext);
···
69
79
size === "sm" && styles.swatchSm,
70
80
size === "md" && styles.swatchMd,
71
81
size === "lg" && styles.swatchLg,
82
+
variant === "circle" && styles.circle,
72
83
style,
73
84
)}
74
85
style={({ color }) => ({
+20
-1
packages/hip-ui/src/components/color-wheel/index.tsx
+20
-1
packages/hip-ui/src/components/color-wheel/index.tsx
···
9
9
10
10
import { ColorThumb } from "../color-area";
11
11
import { SizeContext } from "../context";
12
+
import { Flex } from "../flex";
12
13
import { uiColor } from "../theme/color.stylex";
13
14
import { radius } from "../theme/radius.stylex";
14
15
import { spacing } from "../theme/spacing.stylex";
15
16
import { Size, StyleXComponentProps } from "../theme/types";
16
17
17
18
const styles = stylex.create({
19
+
wrapper: {
20
+
width: "fit-content",
21
+
},
18
22
track: {
19
23
gridArea: "track",
20
24
borderRadius: radius.full,
···
32
36
thumb: {
33
37
top: "50%",
34
38
},
39
+
children: {
40
+
position: "absolute",
41
+
transform: "translate(-50%, -50%)",
42
+
height: "80%",
43
+
left: "50%",
44
+
top: "50%",
45
+
width: "80%",
46
+
},
35
47
});
36
48
37
49
export interface ColorWheelProps extends StyleXComponentProps<
···
39
51
> {
40
52
size?: Size;
41
53
width: number;
54
+
children?: React.ReactNode;
42
55
}
43
56
44
57
export function ColorWheel({
45
58
style,
46
59
size: sizeProp,
47
60
width,
61
+
children,
48
62
...props
49
63
}: ColorWheelProps) {
50
64
const size = sizeProp || use(SizeContext);
···
53
67
return (
54
68
<AriaColorWheel
55
69
{...props}
56
-
{...stylex.props(style)}
70
+
{...stylex.props(styles.wrapper, style)}
57
71
data-size={size}
58
72
outerRadius={width}
59
73
innerRadius={width - trackWidth}
60
74
>
61
75
<ColorWheelTrack {...stylex.props(styles.track)} />
62
76
<ColorThumb style={styles.thumb} />
77
+
{Boolean(children) && (
78
+
<Flex style={styles.children} align="center" justify="center">
79
+
{children}
80
+
</Flex>
81
+
)}
63
82
</AriaColorWheel>
64
83
);
65
84
}