A design system in a box. hip-ui.tngl.io/docs/introduction
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix color usage

+75 -43
+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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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:''}