A design system in a box.
hip-ui.tngl.io/docs/introduction
badge
+824
-5
+40
-1
apps/example/src/components/KitchenSink.tsx
+40
-1
apps/example/src/components/KitchenSink.tsx
···
20
20
Folder,
21
21
GlobeIcon,
22
22
Image,
23
+
Info,
23
24
Pin,
24
25
Plus,
25
26
Scissors,
···
104
105
DialogHeader,
105
106
} from "hip-ui/components/dialog/index";
106
107
import { Avatar } from "hip-ui/components/avatar/index";
108
+
import { Badge } from "hip-ui/components/badge/index";
107
109
108
110
const styles = stylex.create({
111
+
capitalize: {
112
+
textTransform: "capitalize",
113
+
},
109
114
subCard: {
110
115
padding: spacing["4"],
111
116
},
···
803
808
);
804
809
}
805
810
811
+
const bageVariants = [
812
+
"primary",
813
+
"default",
814
+
"warning",
815
+
"critical",
816
+
"success",
817
+
] as const;
818
+
819
+
function BadgeExample() {
820
+
return (
821
+
<Flex gap="4">
822
+
{bageVariants.map((variant) => (
823
+
<Flex gap="4" direction="column" style={styles.capitalize}>
824
+
<Badge variant={variant}>{variant}</Badge>
825
+
<Badge variant={variant} size="md">
826
+
{variant}
827
+
</Badge>
828
+
<Badge variant={variant}>
829
+
<Info />
830
+
{variant}
831
+
</Badge>
832
+
<Badge variant={variant} size="sm">
833
+
<Info />
834
+
{variant}
835
+
</Badge>
836
+
</Flex>
837
+
))}
838
+
</Flex>
839
+
);
840
+
}
841
+
806
842
export function KitchenSink() {
807
-
return <AvatarExample />;
843
+
return <BadgeExample />;
808
844
return (
809
845
<Flex
810
846
direction="column"
811
847
gap="10"
812
848
style={[gray.bg, gray.text, styles.container]}
813
849
>
850
+
<TitleCard title="Avatars">
851
+
<AvatarExample />
852
+
</TitleCard>
814
853
<TitleCard title="Dialog">
815
854
<DialogExample />
816
855
</TitleCard>
+2
-2
apps/example/src/components/avatar/index.tsx
+2
-2
apps/example/src/components/avatar/index.tsx
+94
apps/example/src/components/badge/index.tsx
+94
apps/example/src/components/badge/index.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
import { use } from "react";
3
+
4
+
import { SizeContext } from "../context";
5
+
import { radius } from "../theme/radius.stylex";
6
+
import {
7
+
critical,
8
+
gray,
9
+
primary,
10
+
success,
11
+
warning,
12
+
} from "../theme/semantic-color.stylex";
13
+
import { spacing } from "../theme/spacing.stylex";
14
+
import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex";
15
+
import { Size } from "../types";
16
+
17
+
const styles = stylex.create({
18
+
wrapper: {
19
+
alignItems: "center",
20
+
borderStyle: "solid",
21
+
borderWidth: 1,
22
+
display: "flex",
23
+
fontFamily: fontFamily["sans"],
24
+
fontWeight: fontWeight["semibold"],
25
+
gap: spacing["1"],
26
+
justifyContent: "center",
27
+
overflow: "hidden",
28
+
},
29
+
sm: {
30
+
borderRadius: radius["sm"],
31
+
fontSize: fontSize["xs"],
32
+
height: spacing["4"],
33
+
paddingLeft: spacing["2"],
34
+
paddingRight: spacing["2"],
35
+
},
36
+
md: {
37
+
borderRadius: radius["md"],
38
+
fontSize: fontSize["sm"],
39
+
height: spacing["6"],
40
+
paddingLeft: spacing["2"],
41
+
paddingRight: spacing["2"],
42
+
},
43
+
});
44
+
45
+
export interface BadgeProps
46
+
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
47
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
48
+
size?: Extract<Size, "sm" | "md">;
49
+
variant?: "primary" | "default" | "warning" | "critical" | "success";
50
+
}
51
+
52
+
export function Badge({
53
+
style,
54
+
size: sizeProp,
55
+
variant = "default",
56
+
...props
57
+
}: BadgeProps) {
58
+
const sizeContext = use(SizeContext);
59
+
const size =
60
+
sizeProp ||
61
+
(sizeContext === "sm" || sizeContext === "md" ? sizeContext : "md");
62
+
63
+
return (
64
+
<div
65
+
{...props}
66
+
{...stylex.props(
67
+
styles.wrapper,
68
+
styles[size],
69
+
variant === "primary" && [
70
+
primary.bgDim,
71
+
primary.borderDim,
72
+
primary.text,
73
+
],
74
+
variant === "default" && [gray.bgDim, gray.borderDim, gray.text],
75
+
variant === "warning" && [
76
+
warning.bgDim,
77
+
warning.borderDim,
78
+
warning.text,
79
+
],
80
+
variant === "critical" && [
81
+
critical.bgDim,
82
+
critical.borderDim,
83
+
critical.text,
84
+
],
85
+
variant === "success" && [
86
+
success.bgDim,
87
+
success.borderDim,
88
+
success.text,
89
+
],
90
+
style,
91
+
)}
92
+
/>
93
+
);
94
+
}
+126
apps/example/src/components/theme/colors.stylex.tsx
+126
apps/example/src/components/theme/colors.stylex.tsx
···
350
350
"light-dark(color(display-p3 0.36 0.115 0.143), color(display-p3 0.971 0.826 0.852))",
351
351
},
352
352
});
353
+
354
+
export const yellow = stylex.defineVars({
355
+
bg1: {
356
+
default: "light-dark(#fdfdf9, #14120b)",
357
+
"@media (color-gamut: p3)":
358
+
"light-dark(color(display-p3 0.992 0.992 0.978), color(display-p3 0.078 0.069 0.047))",
359
+
},
360
+
bg2: {
361
+
default: "light-dark(#fefce9, #1b180f)",
362
+
"@media (color-gamut: p3)":
363
+
"light-dark(color(display-p3 0.995 0.99 0.922), color(display-p3 0.103 0.094 0.063))",
364
+
},
365
+
component1: {
366
+
default: "light-dark(#fffab8, #2d2305)",
367
+
"@media (color-gamut: p3)":
368
+
"light-dark(color(display-p3 0.997 0.982 0.749), color(display-p3 0.168 0.137 0.039))",
369
+
},
370
+
component2: {
371
+
default: "light-dark(#fff394, #362b00)",
372
+
"@media (color-gamut: p3)":
373
+
"light-dark(color(display-p3 0.992 0.953 0.627), color(display-p3 0.209 0.169 0))",
374
+
},
375
+
component3: {
376
+
default: "light-dark(#ffe770, #433500)",
377
+
"@media (color-gamut: p3)":
378
+
"light-dark(color(display-p3 0.984 0.91 0.51), color(display-p3 0.255 0.209 0))",
379
+
},
380
+
border1: {
381
+
default: "light-dark(#f3d768, #524202)",
382
+
"@media (color-gamut: p3)":
383
+
"light-dark(color(display-p3 0.934 0.847 0.474), color(display-p3 0.31 0.261 0.07))",
384
+
},
385
+
border2: {
386
+
default: "light-dark(#e4c767, #665417)",
387
+
"@media (color-gamut: p3)":
388
+
"light-dark(color(display-p3 0.876 0.785 0.46), color(display-p3 0.389 0.331 0.135))",
389
+
},
390
+
border3: {
391
+
default: "light-dark(#d5ae39, #836a21)",
392
+
"@media (color-gamut: p3)":
393
+
"light-dark(color(display-p3 0.811 0.689 0.313), color(display-p3 0.497 0.42 0.182))",
394
+
},
395
+
solid1: {
396
+
default: "light-dark(#ffe629, #ffe629)",
397
+
"@media (color-gamut: p3)":
398
+
"light-dark(color(display-p3 1 0.92 0.22), color(display-p3 1 0.92 0.22))",
399
+
},
400
+
solid2: {
401
+
default: "light-dark(#ffdc00, #ffff57)",
402
+
"@media (color-gamut: p3)":
403
+
"light-dark(color(display-p3 0.977 0.868 0.291), color(display-p3 1 1 0.456))",
404
+
},
405
+
text1: {
406
+
default: "light-dark(#9e6c00, #f5e147)",
407
+
"@media (color-gamut: p3)":
408
+
"light-dark(color(display-p3 0.6 0.44 0), color(display-p3 0.948 0.885 0.392))",
409
+
},
410
+
text2: {
411
+
default: "light-dark(#473b1f, #f6eeb4)",
412
+
"@media (color-gamut: p3)":
413
+
"light-dark(color(display-p3 0.271 0.233 0.137), color(display-p3 0.959 0.934 0.731))",
414
+
},
415
+
});
416
+
417
+
export const green = stylex.defineVars({
418
+
bg1: {
419
+
default: "light-dark(#fbfefc, #0e1512)",
420
+
"@media (color-gamut: p3)":
421
+
"light-dark(color(display-p3 0.986 0.996 0.989), color(display-p3 0.062 0.083 0.071))",
422
+
},
423
+
bg2: {
424
+
default: "light-dark(#f4fbf6, #121b17)",
425
+
"@media (color-gamut: p3)":
426
+
"light-dark(color(display-p3 0.963 0.983 0.967), color(display-p3 0.079 0.106 0.09))",
427
+
},
428
+
component1: {
429
+
default: "light-dark(#e6f6eb, #132d21)",
430
+
"@media (color-gamut: p3)":
431
+
"light-dark(color(display-p3 0.913 0.964 0.925), color(display-p3 0.1 0.173 0.133))",
432
+
},
433
+
component2: {
434
+
default: "light-dark(#d6f1df, #113b29)",
435
+
"@media (color-gamut: p3)":
436
+
"light-dark(color(display-p3 0.859 0.94 0.879), color(display-p3 0.115 0.229 0.166))",
437
+
},
438
+
component3: {
439
+
default: "light-dark(#c4e8d1, #174933)",
440
+
"@media (color-gamut: p3)":
441
+
"light-dark(color(display-p3 0.796 0.907 0.826), color(display-p3 0.147 0.282 0.206))",
442
+
},
443
+
border1: {
444
+
default: "light-dark(#adddc0, #19573a)",
445
+
"@media (color-gamut: p3)":
446
+
"light-dark(color(display-p3 0.718 0.863 0.761), color(display-p3 0.185 0.338 0.25))",
447
+
},
448
+
border2: {
449
+
default: "light-dark(#8eceaa, #28684a)",
450
+
"@media (color-gamut: p3)":
451
+
"light-dark(color(display-p3 0.61 0.801 0.675), color(display-p3 0.227 0.403 0.298))",
452
+
},
453
+
border3: {
454
+
default: "light-dark(#5bb98b, #2f7c57)",
455
+
"@media (color-gamut: p3)":
456
+
"light-dark(color(display-p3 0.451 0.715 0.559), color(display-p3 0.27 0.479 0.351))",
457
+
},
458
+
solid1: {
459
+
default: "light-dark(#30a46c, #30a46c)",
460
+
"@media (color-gamut: p3)":
461
+
"light-dark(color(display-p3 0.332 0.634 0.442), color(display-p3 0.332 0.634 0.442))",
462
+
},
463
+
solid2: {
464
+
default: "light-dark(#2b9a66, #33b074)",
465
+
"@media (color-gamut: p3)":
466
+
"light-dark(color(display-p3 0.308 0.595 0.417), color(display-p3 0.357 0.682 0.474))",
467
+
},
468
+
text1: {
469
+
default: "light-dark(#218358, #3dd68c)",
470
+
"@media (color-gamut: p3)":
471
+
"light-dark(color(display-p3 0.19 0.5 0.32), color(display-p3 0.434 0.828 0.573))",
472
+
},
473
+
text2: {
474
+
default: "light-dark(#193b2d, #b1f1cb)",
475
+
"@media (color-gamut: p3)":
476
+
"light-dark(color(display-p3 0.132 0.228 0.18), color(display-p3 0.747 0.938 0.807))",
477
+
},
478
+
});
+154
-1
apps/example/src/components/theme/semantic-color.stylex.tsx
+154
-1
apps/example/src/components/theme/semantic-color.stylex.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
3
-
import { slate, plum, red } from "./colors.stylex";
3
+
import { slate, plum, red, yellow, green } from "./colors.stylex";
4
4
import { fontFamily } from "./typography.stylex";
5
5
6
6
// eslint-disable-next-line @stylexjs/enforce-extension
···
221
221
transitionTimingFunction: "ease-in-out",
222
222
},
223
223
});
224
+
225
+
// eslint-disable-next-line @stylexjs/enforce-extension
226
+
export const warning = stylex.create({
227
+
bg: { backgroundColor: yellow.bg1 },
228
+
bgSubtle: { backgroundColor: yellow.bg2 },
229
+
bgDim: { backgroundColor: yellow.component1 },
230
+
bgSecondary: { backgroundColor: yellow.component2 },
231
+
bgActive: { backgroundColor: yellow.component3 },
232
+
borderDim: {
233
+
borderColor: yellow.border1,
234
+
borderStyle: "solid",
235
+
borderWidth: 1,
236
+
},
237
+
border: {
238
+
borderColor: yellow.border2,
239
+
borderStyle: "solid",
240
+
borderWidth: 1,
241
+
},
242
+
borderInteractive: {
243
+
borderColor: {
244
+
default: yellow.border2,
245
+
":hover": yellow.border3,
246
+
},
247
+
},
248
+
bgSolid: { backgroundColor: yellow.solid1 },
249
+
bgSolidDark: { backgroundColor: yellow.solid2 },
250
+
textDim: { color: yellow.text1, fontFamily: fontFamily["sans"] },
251
+
text: { color: yellow.text2, fontFamily: fontFamily["sans"] },
252
+
textContrast: { color: "black" },
253
+
254
+
bgGhost: {
255
+
backgroundColor: {
256
+
default: "transparent",
257
+
":hover:not(:has(* button:hover)):not(:disabled)": yellow.component2,
258
+
":active:not(:disabled)": yellow.component3,
259
+
":disabled": yellow.component1,
260
+
},
261
+
transitionDuration: "100ms",
262
+
transitionProperty: "background-color, border-color",
263
+
transitionTimingFunction: "ease-in-out",
264
+
},
265
+
bgUi: {
266
+
backgroundColor: {
267
+
default: yellow.component1,
268
+
":hover:not(:has(* button:hover)):not(:disabled)": yellow.component2,
269
+
":active:not(:disabled)": yellow.component3,
270
+
":disabled": yellow.component1,
271
+
},
272
+
transitionDuration: "100ms",
273
+
transitionProperty: "background-color, border-color",
274
+
transitionTimingFunction: "ease-in-out",
275
+
},
276
+
bgAction: {
277
+
backgroundColor: {
278
+
default: yellow.component2,
279
+
":hover:not(:has(* button:hover)):not(:disabled)": yellow.component3,
280
+
":active:not(:disabled)": yellow.component3,
281
+
":disabled": yellow.component1,
282
+
},
283
+
transitionDuration: "100ms",
284
+
transitionProperty: "background-color, border-color",
285
+
transitionTimingFunction: "ease-in-out",
286
+
},
287
+
bgSolidAction: {
288
+
backgroundColor: {
289
+
default: yellow.solid1,
290
+
":hover:not(:has(* button:hover)):not(:disabled)": yellow.solid2,
291
+
":disabled": yellow.component1,
292
+
},
293
+
transitionDuration: "100ms",
294
+
transitionProperty: "background-color, border-color",
295
+
transitionTimingFunction: "ease-in-out",
296
+
},
297
+
});
298
+
299
+
// eslint-disable-next-line @stylexjs/enforce-extension
300
+
export const success = stylex.create({
301
+
bg: { backgroundColor: green.bg1 },
302
+
bgSubtle: { backgroundColor: green.bg2 },
303
+
bgDim: { backgroundColor: green.component1 },
304
+
bgSecondary: { backgroundColor: green.component2 },
305
+
bgActive: { backgroundColor: green.component3 },
306
+
borderDim: {
307
+
borderColor: green.border1,
308
+
borderStyle: "solid",
309
+
borderWidth: 1,
310
+
},
311
+
border: {
312
+
borderColor: green.border2,
313
+
borderStyle: "solid",
314
+
borderWidth: 1,
315
+
},
316
+
borderInteractive: {
317
+
borderColor: {
318
+
default: green.border2,
319
+
":hover": green.border3,
320
+
},
321
+
borderStyle: "solid",
322
+
borderWidth: 1,
323
+
transitionDuration: "100ms",
324
+
transitionProperty: "background-color, border-color",
325
+
transitionTimingFunction: "ease-in-out",
326
+
},
327
+
bgSolid: { backgroundColor: green.solid1 },
328
+
bgSolidDark: { backgroundColor: green.solid2 },
329
+
textDim: { color: green.text1, fontFamily: fontFamily["sans"] },
330
+
text: { color: green.text2, fontFamily: fontFamily["sans"] },
331
+
textContrast: { color: "white" },
332
+
333
+
bgGhost: {
334
+
backgroundColor: {
335
+
default: "transparent",
336
+
":hover:not(:has(* button:hover)):not(:disabled)": green.component2,
337
+
":active:not(:disabled)": green.component3,
338
+
":disabled": green.component1,
339
+
},
340
+
transitionDuration: "100ms",
341
+
transitionProperty: "background-color, border-color",
342
+
transitionTimingFunction: "ease-in-out",
343
+
},
344
+
bgUi: {
345
+
backgroundColor: {
346
+
default: green.component1,
347
+
":hover:not(:has(* button:hover)):not(:disabled)": green.component2,
348
+
":active:not(:disabled)": green.component3,
349
+
":disabled": green.component1,
350
+
},
351
+
transitionDuration: "100ms",
352
+
transitionProperty: "background-color, border-color",
353
+
transitionTimingFunction: "ease-in-out",
354
+
},
355
+
bgAction: {
356
+
backgroundColor: {
357
+
default: green.component2,
358
+
":hover:not(:has(* button:hover)):not(:disabled)": green.component3,
359
+
":active:not(:disabled)": green.component3,
360
+
":disabled": green.component1,
361
+
},
362
+
transitionDuration: "100ms",
363
+
transitionProperty: "background-color, border-color",
364
+
transitionTimingFunction: "ease-in-out",
365
+
},
366
+
bgSolidAction: {
367
+
backgroundColor: {
368
+
default: green.solid1,
369
+
":hover:not(:has(* button:hover)):not(:disabled)": green.solid2,
370
+
":disabled": green.component1,
371
+
},
372
+
transitionDuration: "100ms",
373
+
transitionProperty: "background-color, border-color",
374
+
transitionTimingFunction: "ease-in-out",
375
+
},
376
+
});
+2
packages/hip-ui/src/cli/install.tsx
+2
packages/hip-ui/src/cli/install.tsx
···
10
10
11
11
import { alertDialogConfig } from "../components/alert-dialog/alert-dialog-config.js";
12
12
import { avatarConfig } from "../components/avatar/avatar-config.js";
13
+
import { badgeConfig } from "../components/badge/badge-config.js";
13
14
import { buttonGroupConfig } from "../components/button-group/button-group-config.js";
14
15
import { buttonConfig } from "../components/button/button-config.js";
15
16
import { cardConfig } from "../components/card/card-config.js";
···
78
79
alertDialogConfig,
79
80
dialogConfig,
80
81
avatarConfig,
82
+
badgeConfig,
81
83
];
82
84
83
85
function StringSetting({
+15
packages/hip-ui/src/components/badge/badge-config.ts
+15
packages/hip-ui/src/components/badge/badge-config.ts
···
1
+
import { ComponentConfig } from "../../types";
2
+
3
+
export const badgeConfig: ComponentConfig = {
4
+
name: "badge",
5
+
filepath: "./index.tsx",
6
+
hipDependencies: [
7
+
"../theme/spacing.stylex.tsx",
8
+
"../theme/colors.stylex.tsx",
9
+
"../theme/radius.stylex.tsx",
10
+
"../theme/semantic-color.stylex.tsx",
11
+
"../theme/typography.stylex.tsx",
12
+
"../theme/breakpoints.stylex.tsx",
13
+
"../theme/shadow.stylex.tsx",
14
+
],
15
+
};
+111
packages/hip-ui/src/components/badge/index.tsx
+111
packages/hip-ui/src/components/badge/index.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
import { use } from "react";
3
+
4
+
import { SizeContext } from "../context";
5
+
import { radius } from "../theme/radius.stylex";
6
+
import {
7
+
critical,
8
+
gray,
9
+
primary,
10
+
success,
11
+
warning,
12
+
} from "../theme/semantic-color.stylex";
13
+
import { spacing } from "../theme/spacing.stylex";
14
+
import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex";
15
+
import { Size } from "../types";
16
+
17
+
const styles = stylex.create({
18
+
wrapper: {
19
+
alignItems: "center",
20
+
borderStyle: "solid",
21
+
borderWidth: 1,
22
+
display: "flex",
23
+
fontFamily: fontFamily["sans"],
24
+
fontWeight: fontWeight["semibold"],
25
+
overflow: "hidden",
26
+
width: "fit-content",
27
+
},
28
+
sm: {
29
+
borderRadius: radius["sm"],
30
+
fontSize: fontSize["xs"],
31
+
gap: spacing["1.5"],
32
+
height: spacing["5"],
33
+
paddingLeft: spacing["1.5"],
34
+
paddingRight: spacing["1.5"],
35
+
36
+
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
37
+
":is(*) svg": {
38
+
flexShrink: 0,
39
+
height: spacing["3"],
40
+
pointerEvents: "none",
41
+
width: spacing["3"],
42
+
},
43
+
},
44
+
md: {
45
+
borderRadius: radius["md"],
46
+
fontSize: fontSize["sm"],
47
+
gap: spacing["1.5"],
48
+
height: spacing["6"],
49
+
paddingLeft: spacing["2"],
50
+
paddingRight: spacing["2"],
51
+
52
+
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
53
+
":is(*) svg": {
54
+
flexShrink: 0,
55
+
height: spacing["3.5"],
56
+
pointerEvents: "none",
57
+
width: spacing["3.5"],
58
+
},
59
+
},
60
+
});
61
+
62
+
export interface BadgeProps
63
+
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
64
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
65
+
size?: Extract<Size, "sm" | "md">;
66
+
variant?: "primary" | "default" | "warning" | "critical" | "success";
67
+
}
68
+
69
+
export function Badge({
70
+
style,
71
+
size: sizeProp,
72
+
variant = "default",
73
+
...props
74
+
}: BadgeProps) {
75
+
const sizeContext = use(SizeContext);
76
+
const size =
77
+
sizeProp ||
78
+
(sizeContext === "sm" || sizeContext === "md" ? sizeContext : "md");
79
+
80
+
return (
81
+
<div
82
+
{...props}
83
+
{...stylex.props(
84
+
styles.wrapper,
85
+
styles[size],
86
+
variant === "primary" && [
87
+
primary.bgDim,
88
+
primary.borderDim,
89
+
primary.text,
90
+
],
91
+
variant === "default" && [gray.bgDim, gray.borderDim, gray.text],
92
+
variant === "warning" && [
93
+
warning.bgDim,
94
+
warning.borderDim,
95
+
warning.text,
96
+
],
97
+
variant === "critical" && [
98
+
critical.bgDim,
99
+
critical.borderDim,
100
+
critical.text,
101
+
],
102
+
variant === "success" && [
103
+
success.bgDim,
104
+
success.borderDim,
105
+
success.text,
106
+
],
107
+
style,
108
+
)}
109
+
/>
110
+
);
111
+
}
+126
packages/hip-ui/src/components/theme/colors.stylex.tsx
+126
packages/hip-ui/src/components/theme/colors.stylex.tsx
···
350
350
"light-dark(color(display-p3 0.36 0.115 0.143), color(display-p3 0.971 0.826 0.852))",
351
351
},
352
352
});
353
+
354
+
export const yellow = stylex.defineVars({
355
+
bg1: {
356
+
default: "light-dark(#fdfdf9, #14120b)",
357
+
"@media (color-gamut: p3)":
358
+
"light-dark(color(display-p3 0.992 0.992 0.978), color(display-p3 0.078 0.069 0.047))",
359
+
},
360
+
bg2: {
361
+
default: "light-dark(#fefce9, #1b180f)",
362
+
"@media (color-gamut: p3)":
363
+
"light-dark(color(display-p3 0.995 0.99 0.922), color(display-p3 0.103 0.094 0.063))",
364
+
},
365
+
component1: {
366
+
default: "light-dark(#fffab8, #2d2305)",
367
+
"@media (color-gamut: p3)":
368
+
"light-dark(color(display-p3 0.997 0.982 0.749), color(display-p3 0.168 0.137 0.039))",
369
+
},
370
+
component2: {
371
+
default: "light-dark(#fff394, #362b00)",
372
+
"@media (color-gamut: p3)":
373
+
"light-dark(color(display-p3 0.992 0.953 0.627), color(display-p3 0.209 0.169 0))",
374
+
},
375
+
component3: {
376
+
default: "light-dark(#ffe770, #433500)",
377
+
"@media (color-gamut: p3)":
378
+
"light-dark(color(display-p3 0.984 0.91 0.51), color(display-p3 0.255 0.209 0))",
379
+
},
380
+
border1: {
381
+
default: "light-dark(#f3d768, #524202)",
382
+
"@media (color-gamut: p3)":
383
+
"light-dark(color(display-p3 0.934 0.847 0.474), color(display-p3 0.31 0.261 0.07))",
384
+
},
385
+
border2: {
386
+
default: "light-dark(#e4c767, #665417)",
387
+
"@media (color-gamut: p3)":
388
+
"light-dark(color(display-p3 0.876 0.785 0.46), color(display-p3 0.389 0.331 0.135))",
389
+
},
390
+
border3: {
391
+
default: "light-dark(#d5ae39, #836a21)",
392
+
"@media (color-gamut: p3)":
393
+
"light-dark(color(display-p3 0.811 0.689 0.313), color(display-p3 0.497 0.42 0.182))",
394
+
},
395
+
solid1: {
396
+
default: "light-dark(#ffe629, #ffe629)",
397
+
"@media (color-gamut: p3)":
398
+
"light-dark(color(display-p3 1 0.92 0.22), color(display-p3 1 0.92 0.22))",
399
+
},
400
+
solid2: {
401
+
default: "light-dark(#ffdc00, #ffff57)",
402
+
"@media (color-gamut: p3)":
403
+
"light-dark(color(display-p3 0.977 0.868 0.291), color(display-p3 1 1 0.456))",
404
+
},
405
+
text1: {
406
+
default: "light-dark(#9e6c00, #f5e147)",
407
+
"@media (color-gamut: p3)":
408
+
"light-dark(color(display-p3 0.6 0.44 0), color(display-p3 0.948 0.885 0.392))",
409
+
},
410
+
text2: {
411
+
default: "light-dark(#473b1f, #f6eeb4)",
412
+
"@media (color-gamut: p3)":
413
+
"light-dark(color(display-p3 0.271 0.233 0.137), color(display-p3 0.959 0.934 0.731))",
414
+
},
415
+
});
416
+
417
+
export const green = stylex.defineVars({
418
+
bg1: {
419
+
default: "light-dark(#fbfefc, #0e1512)",
420
+
"@media (color-gamut: p3)":
421
+
"light-dark(color(display-p3 0.986 0.996 0.989), color(display-p3 0.062 0.083 0.071))",
422
+
},
423
+
bg2: {
424
+
default: "light-dark(#f4fbf6, #121b17)",
425
+
"@media (color-gamut: p3)":
426
+
"light-dark(color(display-p3 0.963 0.983 0.967), color(display-p3 0.079 0.106 0.09))",
427
+
},
428
+
component1: {
429
+
default: "light-dark(#e6f6eb, #132d21)",
430
+
"@media (color-gamut: p3)":
431
+
"light-dark(color(display-p3 0.913 0.964 0.925), color(display-p3 0.1 0.173 0.133))",
432
+
},
433
+
component2: {
434
+
default: "light-dark(#d6f1df, #113b29)",
435
+
"@media (color-gamut: p3)":
436
+
"light-dark(color(display-p3 0.859 0.94 0.879), color(display-p3 0.115 0.229 0.166))",
437
+
},
438
+
component3: {
439
+
default: "light-dark(#c4e8d1, #174933)",
440
+
"@media (color-gamut: p3)":
441
+
"light-dark(color(display-p3 0.796 0.907 0.826), color(display-p3 0.147 0.282 0.206))",
442
+
},
443
+
border1: {
444
+
default: "light-dark(#adddc0, #19573a)",
445
+
"@media (color-gamut: p3)":
446
+
"light-dark(color(display-p3 0.718 0.863 0.761), color(display-p3 0.185 0.338 0.25))",
447
+
},
448
+
border2: {
449
+
default: "light-dark(#8eceaa, #28684a)",
450
+
"@media (color-gamut: p3)":
451
+
"light-dark(color(display-p3 0.61 0.801 0.675), color(display-p3 0.227 0.403 0.298))",
452
+
},
453
+
border3: {
454
+
default: "light-dark(#5bb98b, #2f7c57)",
455
+
"@media (color-gamut: p3)":
456
+
"light-dark(color(display-p3 0.451 0.715 0.559), color(display-p3 0.27 0.479 0.351))",
457
+
},
458
+
solid1: {
459
+
default: "light-dark(#30a46c, #30a46c)",
460
+
"@media (color-gamut: p3)":
461
+
"light-dark(color(display-p3 0.332 0.634 0.442), color(display-p3 0.332 0.634 0.442))",
462
+
},
463
+
solid2: {
464
+
default: "light-dark(#2b9a66, #33b074)",
465
+
"@media (color-gamut: p3)":
466
+
"light-dark(color(display-p3 0.308 0.595 0.417), color(display-p3 0.357 0.682 0.474))",
467
+
},
468
+
text1: {
469
+
default: "light-dark(#218358, #3dd68c)",
470
+
"@media (color-gamut: p3)":
471
+
"light-dark(color(display-p3 0.19 0.5 0.32), color(display-p3 0.434 0.828 0.573))",
472
+
},
473
+
text2: {
474
+
default: "light-dark(#193b2d, #b1f1cb)",
475
+
"@media (color-gamut: p3)":
476
+
"light-dark(color(display-p3 0.132 0.228 0.18), color(display-p3 0.747 0.938 0.807))",
477
+
},
478
+
});
+154
-1
packages/hip-ui/src/components/theme/semantic-color.stylex.tsx
+154
-1
packages/hip-ui/src/components/theme/semantic-color.stylex.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
3
-
import { slate, plum, red } from "./colors.stylex";
3
+
import { slate, plum, red, yellow, green } from "./colors.stylex";
4
4
import { fontFamily } from "./typography.stylex";
5
5
6
6
// eslint-disable-next-line @stylexjs/enforce-extension
···
221
221
transitionTimingFunction: "ease-in-out",
222
222
},
223
223
});
224
+
225
+
// eslint-disable-next-line @stylexjs/enforce-extension
226
+
export const warning = stylex.create({
227
+
bg: { backgroundColor: yellow.bg1 },
228
+
bgSubtle: { backgroundColor: yellow.bg2 },
229
+
bgDim: { backgroundColor: yellow.component1 },
230
+
bgSecondary: { backgroundColor: yellow.component2 },
231
+
bgActive: { backgroundColor: yellow.component3 },
232
+
borderDim: {
233
+
borderColor: yellow.border1,
234
+
borderStyle: "solid",
235
+
borderWidth: 1,
236
+
},
237
+
border: {
238
+
borderColor: yellow.border2,
239
+
borderStyle: "solid",
240
+
borderWidth: 1,
241
+
},
242
+
borderInteractive: {
243
+
borderColor: {
244
+
default: yellow.border2,
245
+
":hover": yellow.border3,
246
+
},
247
+
},
248
+
bgSolid: { backgroundColor: yellow.solid1 },
249
+
bgSolidDark: { backgroundColor: yellow.solid2 },
250
+
textDim: { color: yellow.text1, fontFamily: fontFamily["sans"] },
251
+
text: { color: yellow.text2, fontFamily: fontFamily["sans"] },
252
+
textContrast: { color: "black" },
253
+
254
+
bgGhost: {
255
+
backgroundColor: {
256
+
default: "transparent",
257
+
":hover:not(:has(* button:hover)):not(:disabled)": yellow.component2,
258
+
":active:not(:disabled)": yellow.component3,
259
+
":disabled": yellow.component1,
260
+
},
261
+
transitionDuration: "100ms",
262
+
transitionProperty: "background-color, border-color",
263
+
transitionTimingFunction: "ease-in-out",
264
+
},
265
+
bgUi: {
266
+
backgroundColor: {
267
+
default: yellow.component1,
268
+
":hover:not(:has(* button:hover)):not(:disabled)": yellow.component2,
269
+
":active:not(:disabled)": yellow.component3,
270
+
":disabled": yellow.component1,
271
+
},
272
+
transitionDuration: "100ms",
273
+
transitionProperty: "background-color, border-color",
274
+
transitionTimingFunction: "ease-in-out",
275
+
},
276
+
bgAction: {
277
+
backgroundColor: {
278
+
default: yellow.component2,
279
+
":hover:not(:has(* button:hover)):not(:disabled)": yellow.component3,
280
+
":active:not(:disabled)": yellow.component3,
281
+
":disabled": yellow.component1,
282
+
},
283
+
transitionDuration: "100ms",
284
+
transitionProperty: "background-color, border-color",
285
+
transitionTimingFunction: "ease-in-out",
286
+
},
287
+
bgSolidAction: {
288
+
backgroundColor: {
289
+
default: yellow.solid1,
290
+
":hover:not(:has(* button:hover)):not(:disabled)": yellow.solid2,
291
+
":disabled": yellow.component1,
292
+
},
293
+
transitionDuration: "100ms",
294
+
transitionProperty: "background-color, border-color",
295
+
transitionTimingFunction: "ease-in-out",
296
+
},
297
+
});
298
+
299
+
// eslint-disable-next-line @stylexjs/enforce-extension
300
+
export const success = stylex.create({
301
+
bg: { backgroundColor: green.bg1 },
302
+
bgSubtle: { backgroundColor: green.bg2 },
303
+
bgDim: { backgroundColor: green.component1 },
304
+
bgSecondary: { backgroundColor: green.component2 },
305
+
bgActive: { backgroundColor: green.component3 },
306
+
borderDim: {
307
+
borderColor: green.border1,
308
+
borderStyle: "solid",
309
+
borderWidth: 1,
310
+
},
311
+
border: {
312
+
borderColor: green.border2,
313
+
borderStyle: "solid",
314
+
borderWidth: 1,
315
+
},
316
+
borderInteractive: {
317
+
borderColor: {
318
+
default: green.border2,
319
+
":hover": green.border3,
320
+
},
321
+
borderStyle: "solid",
322
+
borderWidth: 1,
323
+
transitionDuration: "100ms",
324
+
transitionProperty: "background-color, border-color",
325
+
transitionTimingFunction: "ease-in-out",
326
+
},
327
+
bgSolid: { backgroundColor: green.solid1 },
328
+
bgSolidDark: { backgroundColor: green.solid2 },
329
+
textDim: { color: green.text1, fontFamily: fontFamily["sans"] },
330
+
text: { color: green.text2, fontFamily: fontFamily["sans"] },
331
+
textContrast: { color: "white" },
332
+
333
+
bgGhost: {
334
+
backgroundColor: {
335
+
default: "transparent",
336
+
":hover:not(:has(* button:hover)):not(:disabled)": green.component2,
337
+
":active:not(:disabled)": green.component3,
338
+
":disabled": green.component1,
339
+
},
340
+
transitionDuration: "100ms",
341
+
transitionProperty: "background-color, border-color",
342
+
transitionTimingFunction: "ease-in-out",
343
+
},
344
+
bgUi: {
345
+
backgroundColor: {
346
+
default: green.component1,
347
+
":hover:not(:has(* button:hover)):not(:disabled)": green.component2,
348
+
":active:not(:disabled)": green.component3,
349
+
":disabled": green.component1,
350
+
},
351
+
transitionDuration: "100ms",
352
+
transitionProperty: "background-color, border-color",
353
+
transitionTimingFunction: "ease-in-out",
354
+
},
355
+
bgAction: {
356
+
backgroundColor: {
357
+
default: green.component2,
358
+
":hover:not(:has(* button:hover)):not(:disabled)": green.component3,
359
+
":active:not(:disabled)": green.component3,
360
+
":disabled": green.component1,
361
+
},
362
+
transitionDuration: "100ms",
363
+
transitionProperty: "background-color, border-color",
364
+
transitionTimingFunction: "ease-in-out",
365
+
},
366
+
bgSolidAction: {
367
+
backgroundColor: {
368
+
default: green.solid1,
369
+
":hover:not(:has(* button:hover)):not(:disabled)": green.solid2,
370
+
":disabled": green.component1,
371
+
},
372
+
transitionDuration: "100ms",
373
+
transitionProperty: "background-color, border-color",
374
+
transitionTimingFunction: "ease-in-out",
375
+
},
376
+
});