A design system in a box.
hip-ui.tngl.io/docs/introduction
fix color usage
+75
-43
+1
-1
apps/docs/src/examples/foundations/spacing.tsx
+1
-1
apps/docs/src/examples/foundations/spacing.tsx
···
6
6
import { Text } from "@/components/typography/text";
7
7
8
8
import { radius } from "../../components/theme/radius.stylex";
9
-
import { primaryColor } from "../../components/theme/semantic-color.stylex";
9
+
import { primaryColor } from "../../components/theme/color.stylex";
10
10
import { spacing } from "../../components/theme/spacing.stylex";
11
11
12
12
const styles = stylex.create({
+1
-1
apps/docs/src/examples/tree/drag-and-drop.tsx
+1
-1
apps/docs/src/examples/tree/drag-and-drop.tsx
···
6
6
import { DropIndicator, DropIndicatorProps } from "react-aria-components";
7
7
8
8
import { Tree, TreeItem } from "@/components/tree";
9
-
import { primaryColor } from "../../components/theme/semantic-color.stylex";
9
+
import { primaryColor } from "../../components/theme/color.stylex";
10
10
11
11
const styles = stylex.create({
12
12
root: {
+1
-4
apps/docs/src/lib/TableOfContents.tsx
+1
-4
apps/docs/src/lib/TableOfContents.tsx
···
3
3
import { createContext, use, useEffect, useState } from "react";
4
4
5
5
import { animationDuration } from "../components/theme/animations.stylex";
6
-
import {
7
-
primaryColor,
8
-
uiColor,
9
-
} from "../components/theme/semantic-color.stylex";
6
+
import { primaryColor, uiColor } from "../components/theme/color.stylex";
10
7
import { spacing } from "../components/theme/spacing.stylex";
11
8
import { fontSize } from "../components/theme/typography.stylex";
12
9
+32
-1
apps/docs/src/routes/__root.tsx
+32
-1
apps/docs/src/routes/__root.tsx
···
6
6
import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
7
7
8
8
import { ui } from "../components/theme/semantic-color.stylex";
9
+
import { primaryColor } from "../components/theme/color.stylex";
10
+
import { blue } from "../components/theme/colors/blue.stylex";
11
+
import { purple } from "../components/theme/colors/purple.stylex";
9
12
10
13
if (import.meta.env.DEV) {
11
14
import("virtual:stylex:runtime");
···
14
17
const styles = stylex.create({
15
18
body: {
16
19
margin: 0,
20
+
},
21
+
themeBlue: {
22
+
[primaryColor.bg]: blue.bg,
23
+
[primaryColor.bgSubtle]: blue.bgSubtle,
24
+
[primaryColor.component1]: blue.component1,
25
+
[primaryColor.component2]: blue.component2,
26
+
[primaryColor.component3]: blue.component3,
27
+
[primaryColor.border1]: blue.border1,
28
+
[primaryColor.border2]: blue.border2,
29
+
[primaryColor.border3]: blue.border3,
30
+
[primaryColor.solid1]: blue.solid1,
31
+
[primaryColor.solid2]: blue.solid2,
32
+
[primaryColor.text1]: blue.text1,
33
+
[primaryColor.text2]: blue.text2,
34
+
},
35
+
themePurple: {
36
+
[primaryColor.bg]: purple.bg,
37
+
[primaryColor.bgSubtle]: purple.bgSubtle,
38
+
[primaryColor.component1]: purple.component1,
39
+
[primaryColor.component2]: purple.component2,
40
+
[primaryColor.component3]: purple.component3,
41
+
[primaryColor.border1]: purple.border1,
42
+
[primaryColor.border2]: purple.border2,
43
+
[primaryColor.border3]: purple.border3,
44
+
[primaryColor.solid1]: purple.solid1,
45
+
[primaryColor.solid2]: purple.solid2,
46
+
[primaryColor.text1]: purple.text1,
47
+
[primaryColor.text2]: purple.text2,
17
48
},
18
49
});
19
50
···
62
93
<head>
63
94
<HeadContent />
64
95
</head>
65
-
<body {...stylex.props(ui.bg, ui.text, styles.body)}>
96
+
<body {...stylex.props(ui.bg, ui.text, styles.body, styles.themeBlue)}>
66
97
<script>{`
67
98
const localtColorScheme = localStorage.getItem("hip-ui-color-scheme");
68
99
+2
-6
apps/docs/src/routes/_docs.invoice-app.tsx
+2
-6
apps/docs/src/routes/_docs.invoice-app.tsx
···
40
40
import { Text } from "@/components/typography/text";
41
41
42
42
import { radius } from "../components/theme/radius.stylex";
43
-
import {
44
-
ui,
45
-
primary,
46
-
successColor,
47
-
primaryColor,
48
-
} from "../components/theme/semantic-color.stylex";
43
+
import { ui, primary } from "../components/theme/semantic-color.stylex";
44
+
import { primaryColor, successColor } from "../components/theme/color.stylex";
49
45
import { spacing } from "../components/theme/spacing.stylex";
50
46
import { fontFamily, typeramp } from "../components/theme/typography.stylex";
51
47
+2
-6
apps/docs/src/showcases/invoice.tsx
+2
-6
apps/docs/src/showcases/invoice.tsx
···
39
39
import { Text } from "@/components/typography/text";
40
40
41
41
import { radius } from "../components/theme/radius.stylex";
42
-
import {
43
-
ui,
44
-
primary,
45
-
successColor,
46
-
primaryColor,
47
-
} from "../components/theme/semantic-color.stylex";
42
+
import { ui, primary } from "../components/theme/semantic-color.stylex";
43
+
import { primaryColor, successColor } from "../components/theme/color.stylex";
48
44
import { spacing } from "../components/theme/spacing.stylex";
49
45
import { fontFamily, typeramp } from "../components/theme/typography.stylex";
50
46
+1
-1
apps/docs/src/showcases/music.tsx
+1
-1
apps/docs/src/showcases/music.tsx
···
35
35
import { Body } from "@/components/typography";
36
36
import { Text } from "@/components/typography/text";
37
37
38
-
import { primaryColor } from "../components/theme/semantic-color.stylex";
38
+
import { primaryColor } from "../components/theme/color.stylex";
39
39
import { spacing } from "../components/theme/spacing.stylex";
40
40
import { radius } from "../components/theme/radius.stylex";
41
41
+35
-23
apps/docs/stylex.css
+35
-23
apps/docs/stylex.css
···
65
65
@media (color-gamut: p3){:root, .xv3w7a0{--bg-xo9m2b4:light-dark(color(display-p3 0.675 0.675 0.024 / 0.024), color(display-p3 0.973 0.369 0 / 0.013));--bgSubtle-xpnscu7:light-dark(color(display-p3 0.953 0.855 0.008 / 0.079), color(display-p3 0.996 0.792 0 / 0.038));--component1-xq65tlw:light-dark(color(display-p3 0.988 0.925 0.004 / 0.251), color(display-p3 0.996 0.71 0 / 0.11));--component2-x1ujsea2:light-dark(color(display-p3 0.98 0.875 0.004 / 0.373), color(display-p3 0.996 0.741 0 / 0.152));--component3-x1njakr4:light-dark(color(display-p3 0.969 0.816 0.004 / 0.491), color(display-p3 0.996 0.765 0 / 0.202));--border1-xgpgkv2:light-dark(color(display-p3 0.875 0.71 0 / 0.526), color(display-p3 0.996 0.816 0.082 / 0.261));--border2-xfy5k6m:light-dark(color(display-p3 0.769 0.604 0 / 0.542), color(display-p3 1 0.831 0.263 / 0.345));--border3-x1bakgjo:light-dark(color(display-p3 0.725 0.549 0 / 0.687), color(display-p3 1 0.831 0.314 / 0.463));--solid1-xffo9u0:light-dark(color(display-p3 1 0.898 0 / 0.781), color(display-p3 1 0.922 0.22));--solid2-x10kpuhz:light-dark(color(display-p3 0.969 0.812 0 / 0.71), color(display-p3 1 1 0.455));--text1-x1arwxzo:light-dark(color(display-p3 0.6 0.44 0), color(display-p3 0.948 0.885 0.392));--text2-x1330fsk:light-dark(color(display-p3 0.271 0.233 0.137), color(display-p3 0.959 0.934 0.731));}}
66
66
@media (color-gamut: p3){:root, .x1qw93q1{--bg-xvz4l1d:light-dark(color(display-p3 0.024 0.024 0.349 / 0.012), color(display-p3 0 0 0 / 0));--bgSubtle-x11wv3u2:light-dark(color(display-p3 0.024 0.024 0.349 / 0.024), color(display-p3 0.875 0.992 1 / 0.034));--component1-xq1n77x:light-dark(color(display-p3 0.004 0.004 0.204 / 0.059), color(display-p3 0.882 0.933 0.992 / 0.077));--component2-x1pcqosl:light-dark(color(display-p3 0.012 0.012 0.184 / 0.091), color(display-p3 0.882 0.953 0.996 / 0.111));--component3-x2i1291:light-dark(color(display-p3 0.004 0.039 0.2 / 0.122), color(display-p3 0.878 0.929 0.996 / 0.145));--border1-xqh3mvu:light-dark(color(display-p3 0.008 0.008 0.165 / 0.15), color(display-p3 0.882 0.949 0.996 / 0.183));--border2-xk8cw7k:light-dark(color(display-p3 0.008 0.027 0.184 / 0.197), color(display-p3 0.882 0.929 1 / 0.246));--border3-x1aygav0:light-dark(color(display-p3 0.004 0.031 0.176 / 0.275), color(display-p3 0.871 0.937 1 / 0.361));--solid1-xxfkrpm:light-dark(color(display-p3 0.004 0.02 0.106 / 0.455), color(display-p3 0.898 0.937 1 / 0.42));--solid2-x1u1gfxn:light-dark(color(display-p3 0.004 0.027 0.098 / 0.499), color(display-p3 0.918 0.945 1 / 0.475));--text1-ximjy2m:light-dark(color(display-p3 0 0.02 0.063 / 0.62), color(display-p3 0.949 0.969 0.996 / 0.708));--text2-x1tsbbhh:light-dark(color(display-p3 0 0.012 0.031 / 0.887), color(display-p3 0.988 0.992 1 / 0.937));}}
67
67
@media (color-gamut: p3){:root, .x1dct8vy{--bg-xyifsjz:light-dark(color(display-p3 0.998 0.989 0.988), color(display-p3 0.093 0.068 0.067));--bgSubtle-x2tkz45:light-dark(color(display-p3 0.995 0.971 0.971), color(display-p3 0.118 0.077 0.079));--component1-xaivliz:light-dark(color(display-p3 0.985 0.925 0.925), color(display-p3 0.211 0.081 0.099));--component2-xgxkwj6:light-dark(color(display-p3 0.999 0.866 0.866), color(display-p3 0.287 0.079 0.113));--component3-x3872c4:light-dark(color(display-p3 0.984 0.812 0.811), color(display-p3 0.348 0.11 0.142));--border1-x51i60m:light-dark(color(display-p3 0.955 0.751 0.749), color(display-p3 0.414 0.16 0.183));--border2-x1lnuyuh:light-dark(color(display-p3 0.915 0.675 0.672), color(display-p3 0.508 0.224 0.236));--border3-xqf689p:light-dark(color(display-p3 0.872 0.575 0.572), color(display-p3 0.659 0.298 0.297));--solid1-x1m6a25n:light-dark(color(display-p3 0.83 0.329 0.324), color(display-p3 0.83 0.329 0.324));--solid2-x1o05zwi:light-dark(color(display-p3 0.798 0.294 0.285), color(display-p3 0.861 0.403 0.387));--text1-x3r7y46:light-dark(color(display-p3 0.744 0.234 0.222), color(display-p3 1 0.57 0.55));--text2-x11v4dhp:light-dark(color(display-p3 0.36 0.115 0.143), color(display-p3 0.971 0.826 0.852));}}
68
+
.--bg-x1aturvj-x1wfgbg4{--bg-x1aturvj:var(--bg-x1hmxdu8)}
69
+
.--bg-x1aturvj-xp9tw24{--bg-x1aturvj:var(--bg-xlbzawt)}
70
+
.--bgSubtle-x1i13xn6-x1lztncg{--bgSubtle-x1i13xn6:var(--bgSubtle-x1uhdssw)}
71
+
.--bgSubtle-x1i13xn6-x1ppgj3w{--bgSubtle-x1i13xn6:var(--bgSubtle-xj1htjk)}
72
+
.--border1-x1gfz7lw-x67dlke{--border1-x1gfz7lw:var(--border1-x5puql8)}
73
+
.--border1-x1gfz7lw-xcv1oyb{--border1-x1gfz7lw:var(--border1-xaafy4n)}
74
+
.--border2-xdhoy4z-x5jfjh{--border2-xdhoy4z:var(--border2-x16aqxu7)}
75
+
.--border2-xdhoy4z-xuz2ap0{--border2-xdhoy4z:var(--border2-xj5mecs)}
76
+
.--border3-x1fv6rtg-x17klxn{--border3-x1fv6rtg:var(--border3-x165ct47)}
77
+
.--border3-x1fv6rtg-x9nyzvk{--border3-x1fv6rtg:var(--border3-x1m87vy2)}
78
+
.--component1-xrqvod2-x1s4zrvc{--component1-xrqvod2:var(--component1-x1b5d2w2)}
79
+
.--component1-xrqvod2-x15mb97u{--component1-xrqvod2:var(--component1-x1pgn7a5)}
80
+
.--component2-xpnxlzk-xezdqlo{--component2-xpnxlzk:var(--component2-x1409ha8)}
81
+
.--component2-xpnxlzk-x6k9km2{--component2-xpnxlzk:var(--component2-x1jo4v3s)}
82
+
.--component3-xhtfb9k-xga6g5z{--component3-xhtfb9k:var(--component3-x1gatauy)}
83
+
.--component3-xhtfb9k-x974e0v{--component3-xhtfb9k:var(--component3-xtamm7x)}
68
84
.--items-per-row-x1bgwy09{--items-per-row:var(--x---items-per-row)}
69
85
.--progress-border-width-x1b7fzij{--progress-border-width:var(--_1-x1plbop)}
86
+
.--solid1-xs64gu4-x1fcwaem{--solid1-xs64gu4:var(--solid1-x1ddh6az)}
87
+
.--solid1-xs64gu4-x1a9b3n{--solid1-xs64gu4:var(--solid1-x9y09zg)}
88
+
.--solid2-x1crx5cu-x52eva2{--solid2-x1crx5cu:var(--solid2-x1738znb)}
89
+
.--solid2-x1crx5cu-xf2pcev{--solid2-x1crx5cu:var(--solid2-x1ho71r5)}
90
+
.--text1-xpii5us-x1ir9vak{--text1-xpii5us:var(--text1-x121d8oh)}
91
+
.--text1-xpii5us-x14qu2no{--text1-xpii5us:var(--text1-x1q7teun)}
92
+
.--text2-x1xyma3f-x1ok88mi{--text2-x1xyma3f:var(--text2-x1phuf10)}
93
+
.--text2-x1xyma3f-x1qm5jix{--text2-x1xyma3f:var(--text2-xlp01qr)}
70
94
.--toggle-button-group-gap-xpqjrd2{--toggle-button-group-gap:var(--_2-xsow7ju)}
71
95
.--card-gap-x1w9yjgu:is([data-card-size=sm]){--card-gap:var(--_2-xsow7ju)}
72
96
.--card-gap-x1nabd30:is([data-card-size=md]){--card-gap:var(--_6-x109877l)}
···
134
158
.borderColor-x1j3jg0b:not(#\#):not(#\#){border-color:var(--border1-x1gfz7lw)}
135
159
.borderColor-xp2f6fw:not(#\#):not(#\#){border-color:var(--border1-xkgv7eh)}
136
160
.borderColor-x19u9m2y:not(#\#):not(#\#){border-color:var(--border1-xptzz2t)}
137
-
.borderColor-xfo4zru:not(#\#):not(#\#){border-color:var(--border2-x130p4o0)}
138
161
.borderColor-xdt6ewa:not(#\#):not(#\#){border-color:var(--border2-x1cklt06)}
139
162
.borderColor-xn0q7k0:not(#\#):not(#\#){border-color:var(--border2-x1yq3app)}
140
163
.borderColor-xyr8ci1:not(#\#):not(#\#){border-color:var(--border2-x8tqwsr)}
···
146
169
.borderColor-x1hdesfp:not(#\#):not(#\#){border-color:var(--component1-x1e4ihis)}
147
170
.borderColor-x1jga0k0:not(#\#):not(#\#){border-color:var(--component1-x1ojhc7k)}
148
171
.borderColor-xlje8lw:not(#\#):not(#\#){border-color:var(--solid1-xs64gu4)}
149
-
.borderColor-x1e8wf2f:not(#\#):not(#\#){border-color:var(--solid2-x1rgzn25)}
172
+
.borderColor-x1iuvy2w:not(#\#):not(#\#){border-color:var(--solid2-x1crx5cu)}
150
173
.borderColor-x1nvupfo:not(#\#):not(#\#){border-color:white}
151
174
.borderRadius-x2u8bby:not(#\#):not(#\#){border-radius:0}
152
175
.borderRadius-x16rqkct:not(#\#):not(#\#){border-radius:50%}
···
312
335
.backgroundColor-xnryvut:not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-x1i13xn6)}
313
336
.backgroundColor-x16rw06s:not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-x1obn2uh)}
314
337
.backgroundColor-x1k5wrh7:not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-x1u2qu9m)}
315
-
.backgroundColor-x1s411yl:not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-xmjz13d)}
316
338
.backgroundColor-xhr61r1:not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-xn5r12v)}
317
339
.backgroundColor-x10byn03:not(#\#):not(#\#):not(#\#){background-color:var(--border1-x11as8pt)}
318
340
.backgroundColor-xeaf3st:not(#\#):not(#\#):not(#\#){background-color:var(--border2-xxsd9i2)}
···
326
348
.backgroundColor-xkww27s:not(#\#):not(#\#):not(#\#){background-color:var(--component2-xl2jk9r)}
327
349
.backgroundColor-x1in19m2:not(#\#):not(#\#):not(#\#){background-color:var(--component2-xpnxlzk)}
328
350
.backgroundColor-x1uad2fy:not(#\#):not(#\#):not(#\#){background-color:var(--component2-xx7wvuk)}
329
-
.backgroundColor-xw3eyx6:not(#\#):not(#\#):not(#\#){background-color:var(--component2-xzjwbwe)}
330
351
.backgroundColor-x1nnhqtx:not(#\#):not(#\#):not(#\#){background-color:var(--component3-x11hgl6v)}
331
352
.backgroundColor-xhaq8gw:not(#\#):not(#\#):not(#\#){background-color:var(--component3-x156ikib)}
332
353
.backgroundColor-x103sky8:not(#\#):not(#\#):not(#\#){background-color:var(--component3-xhtfb9k)}
···
335
356
.backgroundColor-x19pk420:not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x14k0c5u)}
336
357
.backgroundColor-x13ukgo7:not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x1qgqpcr)}
337
358
.backgroundColor-x51ut5s:not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x1uwop3o)}
338
-
.backgroundColor-xkg05a4:not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x6o1eyi)}
339
359
.backgroundColor-x1ruha2d:not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x6wzzll)}
340
360
.backgroundColor-x1m4zno4:not(#\#):not(#\#):not(#\#){background-color:var(--solid1-xs64gu4)}
341
361
.backgroundColor-xpg9a5c:not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1crx5cu)}
···
345
365
.backgroundColor-xalgd7a:not(#\#):not(#\#):not(#\#){background-color:var(--solid2-xvobw7z)}
346
366
.backgroundColor-x12peec7:not(#\#):not(#\#):not(#\#){background-color:white}
347
367
.backgroundImage-x13idnwe:not(#\#):not(#\#):not(#\#){background-image:linear-gradient(-80deg,transparent 0%,transparent 30%,var(--component3-x11hgl6v) 50%,transparent 70%,transparent 100%)}
348
-
.backgroundImage-xs7eep8:not(#\#):not(#\#):not(#\#){background-image:linear-gradient(135deg,var(--solid2-x1rgzn25) 0%,var(--text1-xc56m6b) 100%)}
368
+
.backgroundImage-xnpwhpy:not(#\#):not(#\#):not(#\#){background-image:linear-gradient(135deg,var(--solid2-x1crx5cu) 0%,var(--text1-xpii5us) 100%)}
349
369
.backgroundImage-xuv1wvg:not(#\#):not(#\#):not(#\#){background-image:repeating-linear-gradient(45deg,var(--solid1-xs64gu4),var(--solid1-xs64gu4) 20px,var(--border2-xdhoy4z) 20px,var(--border2-xdhoy4z) 40px)}
350
370
.backgroundRepeat-xiy17q3:not(#\#):not(#\#):not(#\#){background-repeat:no-repeat}
351
371
.backgroundSize-x25l62i:not(#\#):not(#\#):not(#\#){background-size:100%}
···
368
388
.boxSizing-x9f619:not(#\#):not(#\#):not(#\#){box-sizing:border-box}
369
389
.color-x1heor9g:not(#\#):not(#\#):not(#\#){color:inherit}
370
390
.color-x1g041ww:not(#\#):not(#\#):not(#\#){color:light-dark(white,black)}
371
-
.color-x13p24mn:not(#\#):not(#\#):not(#\#){color:var(--solid1-x6o1eyi)}
372
391
.color-xub2jqh:not(#\#):not(#\#):not(#\#){color:var(--solid1-xs64gu4)}
373
-
.color-xrykz3h:not(#\#):not(#\#):not(#\#){color:var(--solid2-x1dbywqs)}
374
-
.color-x1ji32hz:not(#\#):not(#\#):not(#\#){color:var(--solid2-x1rgzn25)}
392
+
.color-x1ejw124:not(#\#):not(#\#):not(#\#){color:var(--solid2-x1crx5cu)}
393
+
.color-x1db5iht:not(#\#):not(#\#):not(#\#){color:var(--solid2-x1ubhs74)}
375
394
.color-x1ee9rt7:not(#\#):not(#\#):not(#\#){color:var(--text1-x1pbhz26)}
376
395
.color-x9q3a0c:not(#\#):not(#\#):not(#\#){color:var(--text1-x1s275lk)}
377
396
.color-xfq4jxp:not(#\#):not(#\#):not(#\#){color:var(--text1-x1umfgwa)}
378
397
.color-x1b49xvv:not(#\#):not(#\#):not(#\#){color:var(--text1-x45q57k)}
379
-
.color-x17eu1j6:not(#\#):not(#\#):not(#\#){color:var(--text1-xb5nrd9)}
380
-
.color-xqle7yb:not(#\#):not(#\#):not(#\#){color:var(--text1-xc56m6b)}
381
398
.color-x1wes0ss:not(#\#):not(#\#):not(#\#){color:var(--text1-xpii5us)}
382
399
.color-x1qdyb4b:not(#\#):not(#\#):not(#\#){color:var(--text1-xw4mcn1)}
383
400
.color-x1fsez3s:not(#\#):not(#\#):not(#\#){color:var(--text2-x1kg2ygz)}
384
401
.color-x1mee78f:not(#\#):not(#\#):not(#\#){color:var(--text2-x1l5nls6)}
385
402
.color-x9rezns:not(#\#):not(#\#):not(#\#){color:var(--text2-x1u4qfl5)}
386
403
.color-x1kyf0hv:not(#\#):not(#\#):not(#\#){color:var(--text2-x1xyma3f)}
387
-
.color-x1vmc86j:not(#\#):not(#\#):not(#\#){color:var(--text2-x6gkmtf)}
388
404
.color-x7l6lhp:not(#\#):not(#\#):not(#\#){color:var(--text2-xelq0bc)}
389
405
.color-x1c2i756:not(#\#):not(#\#):not(#\#){color:var(--textContrast-x15nwm92)}
390
406
.color-x1tz4loq:not(#\#):not(#\#):not(#\#){color:var(--textContrast-x1f1q847)}
391
407
.color-xtiqitw:not(#\#):not(#\#):not(#\#){color:var(--textContrast-x1f99jtk)}
392
408
.color-xnsj7wm:not(#\#):not(#\#):not(#\#){color:var(--textContrast-x1rjp7a6)}
393
-
.color-x1pz8lci:not(#\#):not(#\#):not(#\#){color:var(--textContrast-xmd31bd)}
394
409
.color-xfru5vu:not(#\#):not(#\#):not(#\#){color:var(--textDim-x17ce2fr)}
395
410
.color-xagf5oq:not(#\#):not(#\#):not(#\#){color:var(--textDim-x1v8eiz3)}
396
411
.color-x1awj2ng:not(#\#):not(#\#):not(#\#){color:white}
···
411
426
.display-x3nfvp2:not(#\#):not(#\#):not(#\#){display:inline-flex}
412
427
.display-x1s85apg:not(#\#):not(#\#):not(#\#){display:none}
413
428
.fill-x11esupn:not(#\#):not(#\#):not(#\#){fill:var(--bg-xohqlzf)}
414
-
.fill-x1b0arvy:not(#\#):not(#\#):not(#\#){fill:var(--solid1-x6o1eyi)}
429
+
.fill-xc7o45c:not(#\#):not(#\#):not(#\#){fill:var(--solid1-xs64gu4)}
415
430
.filter-x1jkiwv0:not(#\#):not(#\#):not(#\#){filter:drop-shadow(-0.5px -0.5px 0 var(--border2-xxsd9i2)) drop-shadow(.5px -0.5px 0 var(--border2-xxsd9i2)) drop-shadow(.5px .5px 0 var(--border2-xxsd9i2)) drop-shadow(-0.5px .5px 0 var(--border2-xxsd9i2)) drop-shadow(0px 1px 3px rgb(0 0 0 / .1)) drop-shadow(0 -1px 3px rgb(0 0 0 / .1))}
416
431
.flexBasis-x1t1x2f9:not(#\#):not(#\#):not(#\#){flex-basis:0%}
417
432
.flexBasis-xdl72j9:not(#\#):not(#\#):not(#\#){flex-basis:auto}
···
504
519
.opacity-xg01cxk:not(#\#):not(#\#):not(#\#){opacity:0}
505
520
.opacity-x1hc1fzr:not(#\#):not(#\#):not(#\#){opacity:1}
506
521
.outlineColor-x1vjhitx:not(#\#):not(#\#):not(#\#){outline-color:blue}
507
-
.outlineColor-x1lu3twc:not(#\#):not(#\#):not(#\#){outline-color:var(--solid1-x6o1eyi)}
508
522
.outlineColor-xg4rixe:not(#\#):not(#\#):not(#\#){outline-color:var(--solid1-xs64gu4)}
509
523
.outlineOffset-x1hl8ikr:not(#\#):not(#\#):not(#\#){outline-offset:2px}
510
524
.outlineStyle-xaatb59:not(#\#):not(#\#):not(#\#){outline-style:solid}
···
541
555
.transform-xsqj5wx:not(#\#):not(#\#):not(#\#){transform:var(--x-transform)}
542
556
.transitionDuration-xpfv6me:not(#\#):not(#\#):not(#\#){transition-duration:var(--default-x1seeabg)}
543
557
.transitionDuration-xx08pzc:not(#\#):not(#\#):not(#\#){transition-duration:var(--fast-x1gssecm)}
544
-
.transitionDuration-xjfzak9:not(#\#):not(#\#):not(#\#){transition-duration:var(--slow-xc0p8py)}
545
558
.transitionDuration-xzr5fb6:not(#\#):not(#\#):not(#\#){transition-duration:var(--slow-xghckaq)}
546
559
.transitionProperty-xfagghw:not(#\#):not(#\#):not(#\#){transition-property:all}
547
560
.transitionProperty-x1eaenvl:not(#\#):not(#\#):not(#\#){transition-property:background-color,border-color,color}
···
639
652
.backgroundColor-x1t68akw:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-xzgtcz2)}
640
653
.backgroundColor-x1txcqx6:is([data-variant=secondary] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x1qgqpcr)}
641
654
.backgroundColor-x7yjmlq:is([data-variant=critical] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x1uwop3o)}
642
-
.backgroundColor-x1ck3tfv:hover:not(#\#):not(#\#):not(#\#)::before{background-color:var(--solid1-x6o1eyi)}
643
655
.backgroundColor-xjxg5cl:is([data-variant=success] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x6wzzll)}
656
+
.backgroundColor-xhabt2i:hover:not(#\#):not(#\#):not(#\#)::before{background-color:var(--solid1-xs64gu4)}
644
657
.backgroundColor-x1k1fne4:is([data-selected=true] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-xs64gu4)}
645
658
.backgroundColor-xnqmgiw:is([data-variant=primary] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-xs64gu4)}
646
659
.backgroundColor-xfviuw8:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1crx5cu)}
···
771
784
.pointerEvents-xaqnwrm:disabled:not(#\#):not(#\#):not(#\#){pointer-events:none}
772
785
.backgroundColor-x1byop2d:hover:not(#\#):not(#\#):not(#\#){background-color:rgba(255,255,255,.3)}
773
786
.backgroundColor-x83z7zn:hover:not(#\#):not(#\#):not(#\#){background-color:var(--border2-xxsd9i2)}
774
-
.backgroundColor-x1jqod2p:hover:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x11poo5x)}
787
+
.backgroundColor-xcuua6x:hover:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1ojhc7k)}
788
+
.backgroundColor-xr606cj:hover:not(#\#):not(#\#):not(#\#){background-color:var(--component2-xpnxlzk)}
775
789
.backgroundColor-x1gdzzc8:hover:not(#\#):not(#\#):not(#\#){background-color:var(--component2-xx7wvuk)}
776
-
.backgroundColor-x151gwij:hover:not(#\#):not(#\#):not(#\#){background-color:var(--component2-xzjwbwe)}
777
-
.backgroundColor-x11aw7u0:hover:not(#\#):not(#\#):not(#\#){background-color:var(--component3-xvwaia1)}
790
+
.backgroundColor-xk9kusu:hover:not(#\#):not(#\#):not(#\#){background-color:var(--component3-xhtfb9k)}
778
791
.backgroundColor-x1fe0uph:hover:not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1crx5cu)}
779
792
.color-x1qb2x6o:hover:not(#\#):not(#\#):not(#\#){color:var(--text2-xelq0bc)}
780
793
.opacity-x1o7uuvo:hover:not(#\#):not(#\#):not(#\#){opacity:1}
···
799
812
.borderBottomWidth-x1qhh985:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
800
813
.borderBottomWidth-xso031l:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:1px}
801
814
.borderLeftColor-x18ezt4p:not(#\#):not(#\#):not(#\#):not(#\#){border-left-color:var(--border1-x11as8pt)}
802
-
.borderLeftColor-x80kmbg:not(#\#):not(#\#):not(#\#):not(#\#){border-left-color:var(--border1-x1en7ut4)}
803
815
.borderLeftColor-xrv3xfo:not(#\#):not(#\#):not(#\#):not(#\#){border-left-color:var(--border2-xxsd9i2)}
804
816
.borderLeftColor-xicfvt9:not(#\#):not(#\#):not(#\#):not(#\#){border-left-color:var(--borderDim-x1j89upv)}
805
-
.borderLeftColor-x1iy1ygf:not(#\#):not(#\#):not(#\#):not(#\#){border-left-color:var(--solid1-x6o1eyi)}
817
+
.borderLeftColor-x8v5z0n:not(#\#):not(#\#):not(#\#):not(#\#){border-left-color:var(--solid1-xs64gu4)}
806
818
.borderLeftStyle-x19ypqd9:not(#\#):not(#\#):not(#\#):not(#\#){border-left-style:solid}
807
819
.borderLeftWidth-xyj58a3:not(#\#):not(#\#):not(#\#):not(#\#){border-left-width:0}
808
820
.borderLeftWidth-xe0pwq:not(#\#):not(#\#):not(#\#):not(#\#){border-left-width:1px}
···
1250
1262
.appearance-x1ad04t7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-search-cancel-button{appearance:none}
1251
1263
.appearance-x1glnyev:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-search-decoration{appearance:none}
1252
1264
.backgroundColor-xf5qcfx:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-color:var(--border1-x11as8pt)}
1253
-
.backgroundColor-x2ydo77:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-color:var(--solid1-x6o1eyi)}
1265
+
.backgroundColor-x1vl4kog:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-color:var(--solid1-xs64gu4)}
1254
1266
.boxSizing-xx38sju:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{box-sizing:border-box}
1255
1267
.color-xniw34i:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::placeholder{color:var(--text1-x45q57k)}
1256
1268
.content-x10tli2e:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{content:''}