@antadesign/anta 0.3.17 → 0.3.19

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.
Files changed (77) hide show
  1. package/README.md +38 -242
  2. package/dist/components/Input.d.ts +4 -1
  3. package/dist/components/Input.js +2 -0
  4. package/dist/components/InputDate.css +1 -0
  5. package/dist/components/InputDate.d.ts +1 -0
  6. package/dist/components/InputDate.js +5 -5
  7. package/dist/components/Loader.d.ts +39 -0
  8. package/dist/components/Loader.js +33 -0
  9. package/dist/components/Menu.d.ts +5 -1
  10. package/dist/components/Menu.js +3 -2
  11. package/dist/components/Progress.d.ts +17 -8
  12. package/dist/components/Progress.js +12 -9
  13. package/dist/components/Select.d.ts +1 -0
  14. package/dist/components/Select.js +9 -13
  15. package/dist/components/SelectFaceted.d.ts +1 -0
  16. package/dist/components/SelectFaceted.js +29 -23
  17. package/dist/components/select-parts.css +1 -0
  18. package/dist/elements/a-button.css +1 -1
  19. package/dist/elements/a-icon.d.ts +1 -0
  20. package/dist/elements/a-icon.js +1 -0
  21. package/dist/elements/a-input.css +1 -1
  22. package/dist/elements/a-loader.css +1 -0
  23. package/dist/elements/a-loader.d.ts +12 -0
  24. package/dist/elements/a-loader.js +15 -0
  25. package/dist/elements/a-menu.js +12 -0
  26. package/dist/elements/a-progress.css +1 -1
  27. package/dist/elements/a-progress.js +32 -2
  28. package/dist/elements/a-slider.css +1 -1
  29. package/dist/elements/a-tabs.css +1 -1
  30. package/dist/elements/a-tabs.d.ts +3 -0
  31. package/dist/elements/a-tabs.js +40 -1
  32. package/dist/elements/index.d.ts +1 -0
  33. package/dist/elements/index.js +3 -0
  34. package/dist/general_types.d.ts +27 -2
  35. package/dist/index.d.ts +6 -1
  36. package/dist/index.js +2 -0
  37. package/dist/jsx-runtime.d.ts +11 -1
  38. package/dist/reset.css +1 -1
  39. package/dist/theme-anta.css +1 -1
  40. package/docs/accessibility.md +34 -0
  41. package/docs/changelog.md +551 -0
  42. package/docs/colors.md +42 -0
  43. package/docs/comparison.md +28 -0
  44. package/docs/components/banner.md +267 -0
  45. package/docs/components/button.md +603 -0
  46. package/docs/components/card.md +322 -0
  47. package/docs/components/checkbox.md +297 -0
  48. package/docs/components/dialog.md +314 -0
  49. package/docs/components/expander.md +529 -0
  50. package/docs/components/icon.md +155 -0
  51. package/docs/components/input-autocomplete.md +101 -0
  52. package/docs/components/input-date.md +406 -0
  53. package/docs/components/input-time.md +174 -0
  54. package/docs/components/input.md +610 -0
  55. package/docs/components/loader.md +139 -0
  56. package/docs/components/menu.md +447 -0
  57. package/docs/components/progress.md +182 -0
  58. package/docs/components/radio.md +369 -0
  59. package/docs/components/select-faceted.md +456 -0
  60. package/docs/components/select.md +931 -0
  61. package/docs/components/slider.md +142 -0
  62. package/docs/components/switch.md +198 -0
  63. package/docs/components/tabs.md +471 -0
  64. package/docs/components/tag.md +185 -0
  65. package/docs/components/text.md +148 -0
  66. package/docs/components/title.md +146 -0
  67. package/docs/components/toaster.md +313 -0
  68. package/docs/components/tooltip.md +177 -0
  69. package/docs/credits.md +22 -0
  70. package/docs/index.md +52 -0
  71. package/docs/install-config.md +240 -0
  72. package/docs/normalization.md +105 -0
  73. package/docs/overview.md +10 -0
  74. package/docs/packages/stickers.md +187 -0
  75. package/docs/packages/table.md +153 -0
  76. package/docs/theming.md +13 -0
  77. package/package.json +10 -6
@@ -14,6 +14,7 @@
14
14
  * `customElements` (SSR), but there's no reason to load it server-side.
15
15
  */
16
16
  export { AProgressElement, register_a_progress } from './a-progress';
17
+ export { ALoaderElement, register_a_loader } from './a-loader';
17
18
  export { ATextElement, register_a_text } from './a-text';
18
19
  export { AIconElement, register_a_icon } from './a-icon';
19
20
  export { AButtonElement, register_a_button } from './a-button';
@@ -1,4 +1,5 @@
1
1
  import { AProgressElement, register_a_progress } from "./a-progress";
2
+ import { ALoaderElement, register_a_loader } from "./a-loader";
2
3
  import { ATextElement, register_a_text } from "./a-text";
3
4
  import { AIconElement, register_a_icon } from "./a-icon";
4
5
  import { AButtonElement, register_a_button } from "./a-button";
@@ -39,6 +40,7 @@ export {
39
40
  AIconElement,
40
41
  AInputElement,
41
42
  AInputTimeElement,
43
+ ALoaderElement,
42
44
  AMenuElement,
43
45
  AMenuGroupElement,
44
46
  AMenuItemElement,
@@ -66,6 +68,7 @@ export {
66
68
  register_a_icon,
67
69
  register_a_input,
68
70
  register_a_input_time,
71
+ register_a_loader,
69
72
  register_a_menu,
70
73
  register_a_menu_group,
71
74
  register_a_menu_item,
@@ -147,13 +147,15 @@ export interface BaseAttributes extends DOMEventHandlers {
147
147
  * typed props and computed labels, use `Progress` from `@antadesign/anta`.
148
148
  */
149
149
  export interface AProgressAttributes extends BaseAttributes {
150
- /** Current progress value. */
151
- value?: number | string;
150
+ /** Current progress value. Omit this attribute for indeterminate progress. */
151
+ value?: number | string | false;
152
152
  /** Maximum value. Defaults to 100. */
153
153
  max?: number | string;
154
154
  /** Colour variant, or any literal CSS colour for a custom tone (derived in
155
155
  * oklch). Named tones track light/dark automatically. */
156
156
  tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
157
+ /** Size variant. `medium` is the default. */
158
+ size?: 'small' | 'medium' | 'large';
157
159
  /** Fully-round track (`border-radius: 999px`), or a custom radius via a length
158
160
  * value (`round="6px"`). Presence-based for the boolean form. */
159
161
  round?: boolean | number | string;
@@ -168,6 +170,27 @@ export interface AProgressAttributes extends BaseAttributes {
168
170
  /** ARIA accessible name. */
169
171
  'aria-label'?: string;
170
172
  }
173
+ /**
174
+ * Attributes for the `<a-loader>` custom element. For the JSX wrapper with
175
+ * cross-browser sizing and accessible progress semantics, use `Loader` from
176
+ * `@antadesign/anta`.
177
+ */
178
+ export interface ALoaderAttributes extends BaseAttributes {
179
+ /** Presence selects the static, determinate gradient. Set `--loader-value`
180
+ * in `style` to its percentage. Omit this attribute for the rotating
181
+ * indeterminate gradient. */
182
+ value?: number | string | false;
183
+ /** ARIA accessible name. */
184
+ 'aria-label'?: string;
185
+ /** Hides a decorative loader from screen readers. */
186
+ 'aria-hidden'?: 'true' | 'false' | boolean;
187
+ /** ARIA value-now for determinate progress. */
188
+ 'aria-valuenow'?: number | string;
189
+ /** ARIA value-min. */
190
+ 'aria-valuemin'?: number | string;
191
+ /** ARIA value-max. */
192
+ 'aria-valuemax'?: number | string;
193
+ }
171
194
  /**
172
195
  * Attributes for the `<a-text>` custom element.
173
196
  *
@@ -548,6 +571,8 @@ export interface AInputAttributes extends BaseAttributes {
548
571
  name?: string;
549
572
  /** Placeholder shown when empty. */
550
573
  placeholder?: string;
574
+ /** Ellipsize an overflowing single-line value. Presence-based. */
575
+ truncate?: boolean | '';
551
576
  autocomplete?: string;
552
577
  inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
553
578
  maxlength?: number | string;
package/dist/index.d.ts CHANGED
@@ -18,6 +18,8 @@
18
18
  */
19
19
  export { Progress } from './components/Progress';
20
20
  export type { ProgressProps } from './components/Progress';
21
+ export { Loader } from './components/Loader';
22
+ export type { LoaderProps } from './components/Loader';
21
23
  export { Text } from './components/Text';
22
24
  export type { TextProps, ExpandMode } from './components/Text';
23
25
  export { Title } from './components/Title';
@@ -89,8 +91,11 @@ export type { AntaIntrinsicElements } from './jsx-runtime';
89
91
  * Seed interface for the icon shape registry. The generated
90
92
  * `a-icon.shapes.d.ts` augments this interface with one key per
91
93
  * available shape; consumers can do the same with their own generated
92
- * .d.ts files (TypeScript merges them by interface name).
94
+ * .d.ts files (TypeScript merges them by interface name). `loader` is the
95
+ * animated string-shape alias; its CSS lives with the Loader component rather
96
+ * than the generated static SVG set.
93
97
  */
94
98
  export interface IconShapes {
99
+ loader: true;
95
100
  }
96
101
  export type IconShape = keyof IconShapes;
package/dist/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Progress } from "./components/Progress";
2
+ import { Loader } from "./components/Loader";
2
3
  import { Text } from "./components/Text";
3
4
  import { Title } from "./components/Title";
4
5
  import { Tag } from "./components/Tag";
@@ -63,6 +64,7 @@ export {
63
64
  InputAutocomplete,
64
65
  InputDate,
65
66
  InputTime,
67
+ Loader,
66
68
  Menu,
67
69
  MenuGroup,
68
70
  MenuItem,
@@ -44,7 +44,7 @@ export declare function useSyncExternalStore<T>(subscribe: (onChange: () => void
44
44
  export declare function jsx(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
45
45
  export declare function jsxs(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
46
46
  export { _Fragment as Fragment };
47
- import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACopyAttributes, ACheckboxAttributes, ASwitchAttributes, ATooltipAttributes, AInputAttributes, ASliderAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, ABannerAttributes, AToasterAttributes, AToastAttributes, BaseAttributes } from './general_types';
47
+ import type { AProgressAttributes, ALoaderAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACopyAttributes, ACheckboxAttributes, ASwitchAttributes, ATooltipAttributes, AInputAttributes, ASliderAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, ABannerAttributes, AToasterAttributes, AToastAttributes, BaseAttributes } from './general_types';
48
48
  export declare namespace JSX {
49
49
  interface IntrinsicElements extends React.JSX.IntrinsicElements, AntaIntrinsicElements {
50
50
  }
@@ -53,6 +53,7 @@ export declare namespace JSX {
53
53
  }
54
54
  export interface AntaIntrinsicElements {
55
55
  'a-progress': AProgressAttributes;
56
+ 'a-loader': ALoaderAttributes;
56
57
  'a-progress-label': BaseAttributes;
57
58
  'a-progress-number': BaseAttributes;
58
59
  'a-progress-text': BaseAttributes;
@@ -93,6 +94,14 @@ export interface AntaIntrinsicElements {
93
94
  'a-menu-item-hint': BaseAttributes;
94
95
  'a-menu-item-text': BaseAttributes;
95
96
  'a-menu-separator': BaseAttributes;
97
+ 'a-menu-header': BaseAttributes;
98
+ 'a-menu-footer': BaseAttributes;
99
+ 'a-select-header': BaseAttributes;
100
+ 'a-select-footer': BaseAttributes;
101
+ 'a-select-chevron': BaseAttributes & {
102
+ open?: boolean | '';
103
+ };
104
+ 'a-select-faceted-summary': BaseAttributes;
96
105
  'a-menu-group': AMenuGroupAttributes;
97
106
  'a-menu-group-label': BaseAttributes;
98
107
  'a-tabs': ATabsAttributes;
@@ -102,6 +111,7 @@ export interface AntaIntrinsicElements {
102
111
  'a-dialog': ADialogAttributes;
103
112
  'a-card': ACardAttributes;
104
113
  'a-card-icon-chip': BaseAttributes;
114
+ 'a-input-date-time-container': BaseAttributes;
105
115
  'a-banner': ABannerAttributes;
106
116
  'a-banner-message': BaseAttributes;
107
117
  'a-toaster': AToasterAttributes;
package/dist/reset.css CHANGED
@@ -1 +1 @@
1
- @layer anta{*,*:before,*:after{box-sizing:border-box}*{margin:0}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1,h2,h3,h4,h5,h6{color:var(--text-1);font-weight:584.62;letter-spacing:0}h1{font-size:28px;line-height:32px;margin-block:0 16px}h2{font-size:24px;line-height:28px;margin-block:32px 12px}h3{font-size:20px;line-height:24px;margin-block:24px 12px}h4{font-size:17px;line-height:20px;margin-block:20px 8px}h5{font-size:15px;line-height:20px;margin-block:16px 8px}h6{font-size:13px;line-height:16px;margin-block:16px 4px}strong{font-weight:600}dfn{font-style:normal;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:color-mix(in oklch,currentColor 50%,transparent)}code{line-height:1em}code,kbd,samp,pre{letter-spacing:0}ul,ol{padding-left:3ch}:is(ul,ol)>li{margin-bottom:.5em}:is(ul,ol)>li::marker{color:var(--text-5)}menu{list-style:none;padding:0;margin:0}menu>li{margin:0}a:not(:where([role=button])),a:not(:where([role=button])):link,a:not(:where([role=button])):visited{color:var(--link-color);text-decoration:underline;text-decoration-style:solid;text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:.5px;text-underline-offset:3px}@media(hover:hover)and (pointer:fine){a:not(:where([role=button])):hover{color:var(--link-color-hover);text-decoration-thickness:1px}}a:not(:where([role=button])):active{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent)}::selection{background:color-mix(in oklch,var(--focus-ring) 20%,transparent)}.dark ::selection{background:color-mix(in oklch,var(--focus-ring) 30%,transparent)}table{border-collapse:collapse;font-variant-numeric:lining-nums tabular-nums}caption{text-align:left;color:var(--text-3);padding-left:10px;margin-bottom:.25em}th,td{padding:5px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-4)}thead th{font-weight:600}tfoot tr:last-child>:is(th,td),table:not(:has(tfoot)) tbody tr:last-child>:is(th,td){border-bottom:none}table[data-bordered]{border-collapse:separate;border-spacing:0;border:1px solid var(--border-4);border-radius:3px}table[data-bordered] :is(th,td){border-right:1px solid var(--border-4)}table[data-bordered] tr>:is(th,td):last-child{border-right:0}}
1
+ @layer anta{*,*:before,*:after{box-sizing:border-box}*{margin:0}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}:focus-visible{outline:1px solid var(--focus-ring);outline-offset:2px}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1,h2,h3,h4,h5,h6{color:var(--text-1);font-weight:584.62;letter-spacing:0}h1{font-size:28px;line-height:32px;margin-block:0 16px}h2{font-size:24px;line-height:28px;margin-block:32px 12px}h3{font-size:20px;line-height:24px;margin-block:24px 12px}h4{font-size:17px;line-height:20px;margin-block:20px 8px}h5{font-size:15px;line-height:20px;margin-block:16px 8px}h6{font-size:13px;line-height:16px;margin-block:16px 4px}strong{font-weight:600}dfn{font-style:normal;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:color-mix(in oklch,currentColor 50%,transparent)}code{line-height:1em}code,kbd,samp,pre{letter-spacing:0}ul,ol{padding-left:3ch}:is(ul,ol)>li{margin-bottom:.5em}:is(ul,ol)>li::marker{color:var(--text-5)}menu{list-style:none;padding:0;margin:0}menu>li{margin:0}a:not(:where([role=button])),a:not(:where([role=button])):link,a:not(:where([role=button])):visited{color:var(--link-color);text-decoration:underline;text-decoration-style:solid;text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:.5px;text-underline-offset:3px}@media(hover:hover)and (pointer:fine){a:not(:where([role=button])):hover{color:var(--link-color-hover);text-decoration-thickness:1px}}a:not(:where([role=button])):active{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent)}::selection{background:color-mix(in oklch,var(--focus-ring) 20%,transparent)}.dark ::selection{background:color-mix(in oklch,var(--focus-ring) 30%,transparent)}table{border-collapse:collapse;font-variant-numeric:lining-nums tabular-nums}caption{text-align:left;color:var(--text-3);padding-left:10px;margin-bottom:.25em}th,td{padding:5px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-4)}thead th{font-weight:600}tfoot tr:last-child>:is(th,td),table:not(:has(tfoot)) tbody tr:last-child>:is(th,td){border-bottom:none}table[data-bordered]{border-collapse:separate;border-spacing:0;border:1px solid var(--border-4);border-radius:3px}table[data-bordered] :is(th,td){border-right:1px solid var(--border-4)}table[data-bordered] tr>:is(th,td):last-child{border-right:0}}
@@ -1 +1 @@
1
- :root:root,.light.light{--bg-1: #ffffff;--bg-2: #fbfafb;--bg-3: #f6f4f6;--bg-4: #f1eff1;--bg-5: #ece9ec;--bg-2-brand: #fcfcfe;--bg-3-brand: #f7f6fd;--bg-4-brand: #efeefc;--bg-5-brand: #e9e5fa;--bg-2-success: #f7fcf9;--bg-3-success: #ecf9f0;--bg-4-success: #e2f5e8;--bg-5-success: #d9f2e0;--bg-2-critical: #fefbfb;--bg-3-critical: #fdf2f2;--bg-4-critical: #fcebeb;--bg-5-critical: #fae5e5;--bg-2-warning: #fefbf6;--bg-3-warning: #fcf4e8;--bg-4-warning: #fbeeda;--bg-5-warning: #f9e7cd;--bg-2-info: #fbfcfe;--bg-3-info: #f2f7fd;--bg-4-info: #e9f3fb;--bg-5-info: #e1eefa;--text-1: #050306;--text-2: #302b31;--text-3: #635b65;--text-4: #878089;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: #48349399;--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: #1f5c3199;--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: #a01c1c99;--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: #99520099;--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: #175082b2;--text-5-info: #17508280;--border-1: #938d96;--border-2: #c1b9c1;--border-3: #d4ced4;--border-4: #e0dce0;--border-5: #ece9ec;--border-1-brand: #9081df;--border-2-brand: #bcb1f1;--border-3-brand: #d2cbf6;--border-4-brand: #ddd8f8;--border-5-brand: #e9e5fa;--border-1-success: #44c169;--border-2-success: #88d7a0;--border-3-success: #b3e5c2;--border-4-success: #c6ecd1;--border-5-success: #d9f2e0;--border-1-critical: #e56c6c;--border-2-critical: #efa4a4;--border-3-critical: #f4c2c2;--border-4-critical: #f7d4d4;--border-5-critical: #fae5e5;--border-1-warning: #d88118;--border-2-warning: #edb25a;--border-3-warning: #f3cc91;--border-4-warning: #f6dbb1;--border-5-warning: #f9e7cd;--border-1-info: #56a1e1;--border-2-info: #93c5ec;--border-3-info: #bad6f3;--border-4-info: #cfe3f7;--border-5-info: #e1eefa}.dark.dark{--bg-1: #000000;--bg-2: #0e0d0f;--bg-3: #121014;--bg-4: #161316;--bg-5: #1a171b;--bg-2-brand: #08060e;--bg-3-brand: #0f0c1d;--bg-4-brand: #130f24;--bg-5-brand: #16132b;--bg-2-success: #030b06;--bg-3-success: #051209;--bg-4-success: #06160b;--bg-5-success: #081b0e;--bg-2-critical: #120303;--bg-3-critical: #210606;--bg-4-critical: #260808;--bg-5-critical: #2e0a0b;--bg-2-warning: #110a03;--bg-3-warning: #1c1105;--bg-4-warning: #231406;--bg-5-warning: #2b1a08;--bg-2-info: #020a12;--bg-3-info: #05131f;--bg-4-info: #071725;--bg-5-info: #0c2337;--text-1: #ece9ec;--text-2: #c1b9c1;--text-3: #9f99a1;--text-4: #776e77;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: #ada0ee99;--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: #74cd8e99;--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: #e78e9099;--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: #e1a45299;--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: #7db6e899;--text-5-info: #7db6e866;--border-1: hsl(288deg 5.21% 42%);--border-2: hsl(282deg 7.04% 28%);--border-3: hsl(277.5deg 6.56% 20%);--border-4: hsl(290deg 6.52% 14%);--border-5: hsl(285deg 7.14% 10%);--border-1-brand: hsl(250.08deg 59.8% 58%);--border-2-brand: hsl(250deg 50% 42%);--border-3-brand: hsl(252.63deg 47.74% 30%);--border-4-brand: hsl(249.8deg 39.84% 19%);--border-5-brand: hsl(249deg 39.22% 14%);--border-1-success: hsl(138.18deg 49.75% 29%);--border-2-success: hsl(138.26deg 50.36% 20%);--border-3-success: hsl(137.7deg 49.59% 16%);--border-4-success: hsl(138.46deg 52% 10%);--border-5-success: hsl(138.86deg 53.85% 7.5%);--border-1-critical: hsl(0deg 56% 46%);--border-2-critical: hsl(.42deg 63% 30%);--border-3-critical: hsl(0deg 62.21% 23%);--border-4-critical: hsl(359.13deg 59% 15%);--border-5-critical: hsl(359.06deg 63% 11%);--border-1-warning: hsl(32.13deg 80.31% 34%);--border-2-warning: hsl(27.93deg 84.06% 24%);--border-3-warning: hsl(30deg 79.66% 17%);--border-4-warning: hsl(28.75deg 63.16% 12%);--border-5-warning: hsl(28.64deg 66.67% 9%);--border-1-info: hsl(207.82deg 70.2% 40%);--border-2-info: hsl(207.77deg 69.94% 29%);--border-3-info: hsl(208.04deg 69.93% 21%);--border-4-info: hsl(208.52deg 62.89% 14%);--border-5-info: hsl(207.78deg 65.85% 10.5%)}@layer anta{a-button:not([tone]),a[role=button][data-anta]:not([tone]),button[data-anta]:not([tone]),input[data-anta]:is([type=reset],[type=submit]):not([tone]){--button-bg-primary-rest: #635b65;--button-bg-primary-hover: #534c57;--button-bg-primary-active: #49424c;--button-bg-secondary-rest: #45374c12;--button-bg-secondary-hover: #44374b1a;--button-bg-secondary-active: #44374b26;--button-fg-secondary-rest: #534c57;--button-fg-secondary-hover: #49424c;--button-fg-secondary-l-shift: .05;--button-fg-tertiary-rest: #635b65;--button-fg-tertiary-hover: #534c57;--button-bg-tertiary-hover: #44374b0d;--button-bg-tertiary-active: #44374b1a;--button-fg-quaternary-rest: #635b65;--button-fg-quaternary-hover: #49424c}a-button[tone=brand],a[role=button][data-anta][tone=brand],button[data-anta][tone=brand],input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--button-bg-primary-rest: #5f4bc3;--button-bg-primary-hover: #503cb4;--button-bg-primary-active: #483493;--button-bg-secondary-rest: #7460d71a;--button-bg-secondary-hover: #7460d726;--button-bg-secondary-active: #7460d733;--button-fg-secondary-rest: #5f4bc3;--button-fg-secondary-hover: #503cb4;--button-fg-tertiary-rest: #5f4bc3;--button-fg-tertiary-hover: #503cb4;--button-bg-tertiary-hover: #7460d71a;--button-bg-tertiary-active: #7460d726;--button-fg-quaternary-rest: #5f4bc3;--button-fg-quaternary-hover: #483493}a-button[tone=critical],a[role=button][data-anta][tone=critical],button[data-anta][tone=critical],input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--button-bg-primary-rest: #c9302c;--button-bg-primary-hover: #b02120;--button-bg-primary-active: #a01c1c;--button-bg-secondary-rest: #de45451a;--button-bg-secondary-hover: #de454526;--button-bg-secondary-active: #de454533;--button-fg-secondary-rest: #c9302c;--button-fg-secondary-hover: #b02120;--button-fg-tertiary-rest: #c9302c;--button-fg-tertiary-hover: #b02120;--button-bg-tertiary-hover: #de45451a;--button-bg-tertiary-active: #de454533;--button-fg-quaternary-rest: #c9302c;--button-fg-quaternary-hover: #a01c1c}a-button[tone=info],a[role=button][data-anta][tone=info],button[data-anta][tone=info],input[data-anta]:is([type=reset],[type=submit])[tone=info]{--button-bg-primary-rest: #1f6eb2;--button-bg-primary-hover: #1a5b93;--button-bg-primary-active: #175082;--button-bg-secondary-rest: #2686d91a;--button-bg-secondary-hover: #2686d926;--button-bg-secondary-active: #2686d933;--button-fg-secondary-rest: #1f6eb2;--button-fg-secondary-hover: #1a5b93;--button-fg-tertiary-rest: #1f6eb2;--button-fg-tertiary-hover: #1a5b93;--button-bg-tertiary-hover: #2686d91a;--button-bg-tertiary-active: #2686d926;--button-fg-quaternary-rest: #1f6eb2;--button-fg-quaternary-hover: #175082}a-button[tone=success],a[role=button][data-anta][tone=success],button[data-anta][tone=success],input[data-anta]:is([type=reset],[type=submit])[tone=success]{--button-bg-primary-rest: #2a7e43;--button-bg-primary-hover: #226737;--button-bg-primary-active: #1f5c31;--button-bg-secondary-rest: #3295501a;--button-bg-secondary-hover: #32955026;--button-bg-secondary-active: #32955033;--button-fg-secondary-rest: #2a7e43;--button-fg-secondary-hover: #226737;--button-fg-tertiary-rest: #2a7e43;--button-fg-tertiary-hover: #226737;--button-bg-tertiary-hover: #3295501a;--button-bg-tertiary-active: #32955026;--button-fg-quaternary-rest: #2a7e43;--button-fg-quaternary-hover: #1f5c31}a-button[tone=warning],a[role=button][data-anta][tone=warning],button[data-anta][tone=warning],input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--button-bg-primary-rest: #c37416;--button-bg-primary-hover: #ae6613;--button-bg-primary-active: #995200;--button-bg-secondary-rest: #c374161a;--button-bg-secondary-hover: #c3741626;--button-bg-secondary-active: #c3741633;--button-fg-secondary-rest: #c37416;--button-fg-secondary-hover: #ae6613;--button-fg-tertiary-rest: #c37416;--button-fg-tertiary-hover: #ae6613;--button-bg-tertiary-hover: #c374161a;--button-bg-tertiary-active: #c3741633;--button-fg-quaternary-rest: #c37416;--button-fg-quaternary-hover: #995200}.dark a-button:not([tone]),.dark a[role=button][data-anta]:not([tone]),.dark button[data-anta]:not([tone]),.dark input[data-anta]:is([type=reset],[type=submit]):not([tone]){--button-bg-primary-rest: #534c57;--button-bg-primary-hover: #635b65;--button-bg-primary-active: #938d96;--button-bg-secondary-rest: #e4d1ef1c;--button-bg-secondary-hover: #e4d1ef24;--button-bg-secondary-active: #e4d1ef2e;--button-fg-secondary-rest: #c1b9c1;--button-fg-secondary-hover: #d4ced4;--button-fg-secondary-l-shift: 0;--button-fg-tertiary-rest: #afa9b1;--button-fg-tertiary-hover: #afa9b1;--button-bg-tertiary-hover: #e4d1ef14;--button-bg-tertiary-active: #e4d1ef21;--button-fg-quaternary-rest: #afa9b1;--button-fg-quaternary-hover: #cac4ca}.dark a-button[tone=brand],.dark a[role=button][data-anta][tone=brand],.dark button[data-anta][tone=brand],.dark input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--button-bg-primary-rest: #503cb4;--button-bg-primary-hover: #5f4bc3;--button-bg-primary-active: #7460d7;--button-bg-secondary-rest: #7460d73b;--button-bg-secondary-hover: #7460d747;--button-bg-secondary-active: #7460d754;--button-fg-secondary-rest: #c5baff;--button-fg-secondary-hover: #d2cbf6;--button-fg-tertiary-rest: #ada0ee;--button-fg-tertiary-hover: #bcb1f1;--button-bg-tertiary-hover: #7460d73b;--button-bg-tertiary-active: #7460d747;--button-fg-quaternary-rest: #ada0ee;--button-fg-quaternary-hover: #c7bef4}.dark a-button[tone=critical],.dark a[role=button][data-anta][tone=critical],.dark button[data-anta][tone=critical],.dark input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--button-bg-primary-rest: #b02120;--button-bg-primary-hover: #c9302c;--button-bg-primary-active: #de4545;--button-bg-secondary-rest: #de45453b;--button-bg-secondary-hover: #de454547;--button-bg-secondary-active: #de454554;--button-fg-secondary-rest: #ffabac;--button-fg-secondary-hover: #f4c2c2;--button-fg-tertiary-rest: #e78e90;--button-fg-tertiary-hover: #efa4a4;--button-bg-tertiary-hover: #de45453b;--button-bg-tertiary-active: #de454547;--button-fg-quaternary-rest: #e78e90;--button-fg-quaternary-hover: #ffabac}.dark a-button[tone=info],.dark a[role=button][data-anta][tone=info],.dark button[data-anta][tone=info],.dark input[data-anta]:is([type=reset],[type=submit])[tone=info]{--button-bg-primary-rest: #1a5b93;--button-bg-primary-hover: #1f6eb2;--button-bg-primary-active: #2686d9;--button-bg-secondary-rest: #2686d93b;--button-bg-secondary-hover: #2686d947;--button-bg-secondary-active: #2686d954;--button-fg-secondary-rest: #9ed2ff;--button-fg-secondary-hover: #bad6f3;--button-fg-tertiary-rest: #7db6e8;--button-fg-tertiary-hover: #93c5ec;--button-bg-tertiary-hover: #2686d93b;--button-bg-tertiary-active: #2686d947;--button-fg-quaternary-rest: #7db6e8;--button-fg-quaternary-hover: #a6cdef}.dark a-button[tone=success],.dark a[role=button][data-anta][tone=success],.dark button[data-anta][tone=success],.dark input[data-anta]:is([type=reset],[type=submit])[tone=success]{--button-bg-primary-rest: #226737;--button-bg-primary-hover: #2a7e43;--button-bg-primary-active: #329550;--button-bg-secondary-rest: #3295503b;--button-bg-secondary-hover: #32955047;--button-bg-secondary-active: #32955054;--button-fg-secondary-rest: #8ceca9;--button-fg-secondary-hover: #b3e5c2;--button-fg-tertiary-rest: #74cd8e;--button-fg-tertiary-hover: #88d7a0;--button-bg-tertiary-hover: #3295503b;--button-bg-tertiary-active: #32955047;--button-fg-quaternary-rest: #74cd8e;--button-fg-quaternary-hover: #9ddeb1}.dark a-button[tone=warning],.dark a[role=button][data-anta][tone=warning],.dark button[data-anta][tone=warning],.dark input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--button-bg-primary-rest: #7f410b;--button-bg-primary-hover: #995200;--button-bg-primary-active: #ae6613;--button-bg-secondary-rest: #c374163b;--button-bg-secondary-hover: #c3741647;--button-bg-secondary-active: #c3741654;--button-fg-secondary-rest: #f7c06e;--button-fg-secondary-hover: #f3cc91;--button-fg-tertiary-rest: #e1a452;--button-fg-tertiary-hover: #edb25a;--button-bg-tertiary-hover: #c374163b;--button-bg-tertiary-active: #c3741647;--button-fg-quaternary-rest: #e1a452;--button-fg-quaternary-hover: #f0bf75}a-checkbox[tone=brand],a-checkbox[tone-selected=brand]{--checkbox-bg-selected: #5f4bc3;--checkbox-bg-selected-hover: #503cb4;--checkbox-bg-selected-active: #483493}a-checkbox[tone=neutral],a-checkbox[tone-selected=neutral]{--checkbox-bg-selected: #878089;--checkbox-bg-selected-hover: #776e77;--checkbox-bg-selected-active: #635b65}a-checkbox[tone=info],a-checkbox[tone-selected=info]{--checkbox-bg-selected: #1f6eb2;--checkbox-bg-selected-hover: #1a5b93;--checkbox-bg-selected-active: #175082}a-checkbox[tone=success],a-checkbox[tone-selected=success]{--checkbox-bg-selected: #2a7e43;--checkbox-bg-selected-hover: #226737;--checkbox-bg-selected-active: #1f5c31}a-checkbox[tone=warning],a-checkbox[tone-selected=warning]{--checkbox-bg-selected: #c37416;--checkbox-bg-selected-hover: #ae6613;--checkbox-bg-selected-active: #995200}a-checkbox[tone=critical],a-checkbox[tone-selected=critical]{--checkbox-bg-selected: #c9302c;--checkbox-bg-selected-hover: #b02120;--checkbox-bg-selected-active: #a01c1c}a-checkbox[tone=brand]{--checkbox-bg: #fcfcfe;--checkbox-border: #bcb1f1;--checkbox-border-hover: #9e8eeb;--checkbox-border-active: #9081df}a-checkbox[tone=info]{--checkbox-bg: #fbfcfe;--checkbox-border: #93c5ec;--checkbox-border-hover: #69ace5;--checkbox-border-active: #56a1e1}a-checkbox[tone=success]{--checkbox-bg: #f7fcf9;--checkbox-border: #88d7a0;--checkbox-border-hover: #5bc87b;--checkbox-border-active: #44c169}a-checkbox[tone=warning]{--checkbox-bg: #fefbf6;--checkbox-border: #edb25a;--checkbox-border-hover: #e09127;--checkbox-border-active: #d88118}a-checkbox[tone=critical]{--checkbox-bg: #fefbfb;--checkbox-border: #efa4a4;--checkbox-border-hover: #e87f7f;--checkbox-border-active: #e56c6c}.dark a-checkbox:not([tone]):not([tone-selected]){--checkbox-border-neutral: #49424c;--checkbox-border-hover: #635b65;--checkbox-border-active: #776e77;--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65;--checkbox-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-checkbox[tone=brand],.dark a-checkbox[tone-selected=brand]{--checkbox-bg-selected: #503cb4;--checkbox-bg-selected-hover: #5f4bc3;--checkbox-bg-selected-active: #7460d7}.dark a-checkbox[tone=neutral],.dark a-checkbox[tone-selected=neutral]{--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65}.dark a-checkbox[tone=info],.dark a-checkbox[tone-selected=info]{--checkbox-bg-selected: #1a5b93;--checkbox-bg-selected-hover: #1f6eb2;--checkbox-bg-selected-active: #2686d9}.dark a-checkbox[tone=success],.dark a-checkbox[tone-selected=success]{--checkbox-bg-selected: #226737;--checkbox-bg-selected-hover: #2a7e43;--checkbox-bg-selected-active: #329550}.dark a-checkbox[tone=warning],.dark a-checkbox[tone-selected=warning]{--checkbox-bg-selected: #7f410b;--checkbox-bg-selected-hover: #995200;--checkbox-bg-selected-active: #ae6613}.dark a-checkbox[tone=critical],.dark a-checkbox[tone-selected=critical]{--checkbox-bg-selected: #b02120;--checkbox-bg-selected-hover: #c9302c;--checkbox-bg-selected-active: #de4545}.dark a-checkbox[tone=brand]{--checkbox-bg: #0b0916;--checkbox-border: #483493;--checkbox-border-hover: #5f4bc3;--checkbox-border-active: #7460d7}.dark a-checkbox[tone=info]{--checkbox-bg: #040d18;--checkbox-border: #175082;--checkbox-border-hover: #1f6eb2;--checkbox-border-active: #2686d9}.dark a-checkbox[tone=success]{--checkbox-bg: #041008;--checkbox-border: #1f5c31;--checkbox-border-hover: #2a7e43;--checkbox-border-active: #329550}.dark a-checkbox[tone=warning]{--checkbox-bg: #120a03;--checkbox-border: #6a3b0c;--checkbox-border-hover: #995200;--checkbox-border-active: #ae6613}.dark a-checkbox[tone=critical]{--checkbox-bg: #190405;--checkbox-border: #a01c1c;--checkbox-border-hover: #c9302c;--checkbox-border-active: #de4545}a-radio:not([tone]):not([tone-selected]){--radio-border-width: 1.5px;--radio-bg: var(--bg-1);--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65;--radio-border-neutral: #d4ced4;--radio-border: var(--radio-border-neutral);--radio-border-hover: #c1b9c1;--radio-border-active: #9f99a1;--radio-border-disabled: color-mix(in oklch, #44374b 10%, transparent)}a-radio[tone=brand],a-radio[tone-selected=brand],a-radio-group[tone=brand] a-radio:not([tone]),a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-bg-selected: #5f4bc3;--radio-bg-selected-hover: #503cb4;--radio-bg-selected-active: #483493}a-radio[tone=neutral],a-radio[tone-selected=neutral],a-radio-group[tone=neutral] a-radio:not([tone]),a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65}a-radio[tone=info],a-radio[tone-selected=info],a-radio-group[tone=info] a-radio:not([tone]),a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-bg-selected: #1f6eb2;--radio-bg-selected-hover: #1a5b93;--radio-bg-selected-active: #175082}a-radio[tone=success],a-radio[tone-selected=success],a-radio-group[tone=success] a-radio:not([tone]),a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-bg-selected: #2a7e43;--radio-bg-selected-hover: #226737;--radio-bg-selected-active: #1f5c31}a-radio[tone=warning],a-radio[tone-selected=warning],a-radio-group[tone=warning] a-radio:not([tone]),a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-bg-selected: #c37416;--radio-bg-selected-hover: #ae6613;--radio-bg-selected-active: #995200}a-radio[tone=critical],a-radio[tone-selected=critical],a-radio-group[tone=critical] a-radio:not([tone]),a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-bg-selected: #c9302c;--radio-bg-selected-hover: #b02120;--radio-bg-selected-active: #a01c1c}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #fcfcfe;--radio-border: #bcb1f1;--radio-border-hover: #9e8eeb;--radio-border-active: #9081df}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #fbfcfe;--radio-border: #93c5ec;--radio-border-hover: #69ace5;--radio-border-active: #56a1e1}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #f7fcf9;--radio-border: #88d7a0;--radio-border-hover: #5bc87b;--radio-border-active: #44c169}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #fefbf6;--radio-border: #edb25a;--radio-border-hover: #e09127;--radio-border-active: #d88118}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #fefbfb;--radio-border: #efa4a4;--radio-border-hover: #e87f7f;--radio-border-active: #e56c6c}.dark a-radio:not([tone]):not([tone-selected]){--radio-border-hover: #635b65;--radio-border-active: #776e77;--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65;--radio-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-radio[tone=brand],.dark a-radio[tone-selected=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]),.dark a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-bg-selected: #503cb4;--radio-bg-selected-hover: #5f4bc3;--radio-bg-selected-active: #7460d7}.dark a-radio[tone=neutral],.dark a-radio[tone-selected=neutral],.dark a-radio-group[tone=neutral] a-radio:not([tone]),.dark a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65}.dark a-radio[tone=info],.dark a-radio[tone-selected=info],.dark a-radio-group[tone=info] a-radio:not([tone]),.dark a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-bg-selected: #1a5b93;--radio-bg-selected-hover: #1f6eb2;--radio-bg-selected-active: #2686d9}.dark a-radio[tone=success],.dark a-radio[tone-selected=success],.dark a-radio-group[tone=success] a-radio:not([tone]),.dark a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-bg-selected: #226737;--radio-bg-selected-hover: #2a7e43;--radio-bg-selected-active: #329550}.dark a-radio[tone=warning],.dark a-radio[tone-selected=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]),.dark a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-bg-selected: #7f410b;--radio-bg-selected-hover: #995200;--radio-bg-selected-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio[tone-selected=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]),.dark a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-bg-selected: #b02120;--radio-bg-selected-hover: #c9302c;--radio-bg-selected-active: #de4545}.dark a-radio[tone=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #0b0916;--radio-border: #483493;--radio-border-hover: #5f4bc3;--radio-border-active: #7460d7}.dark a-radio[tone=info],.dark a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #040d18;--radio-border: #175082;--radio-border-hover: #1f6eb2;--radio-border-active: #2686d9}.dark a-radio[tone=success],.dark a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #041008;--radio-border: #1f5c31;--radio-border-hover: #2a7e43;--radio-border-active: #329550}.dark a-radio[tone=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #120a03;--radio-border: #6a3b0c;--radio-border-hover: #995200;--radio-border-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #190405;--radio-border: #a01c1c;--radio-border-hover: #c9302c;--radio-border-active: #de4545}a-tag:not([tone]){--tag-tint: #44374b;--tag-bg-solid: #776e77;--tag-edge: var(--tag-tint);--_tag-bg-alpha: 7%;--_tag-border-alpha: 15%;--_tag-edge-alpha: 25%}a-tag[tone=brand]{--tag-tint: #7460d7;--tag-bg-solid: #7460d7;--tag-edge: var(--text-2-brand);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=info]{--tag-tint: #2686d9;--tag-bg-solid: #2686d9;--tag-edge: var(--text-2-info);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=success]{--tag-tint: #329550;--tag-bg-solid: #329550;--tag-edge: var(--text-2-success);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=warning]{--tag-tint: #c37416;--tag-bg-solid: #ae6613;--tag-edge: var(--text-2-warning);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=critical]{--tag-tint: #de4545;--tag-bg-solid: #de4545;--tag-edge: var(--text-2-critical);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}.dark a-tag:not([tone]),.dark a-tag[tone=neutral]{--tag-tint: #e4d1ef;--tag-bg-solid: #635b65;--_tag-bg-alpha: 12%}.dark a-tag[tone=brand],.dark a-tag[tone=info],.dark a-tag[tone=success],.dark a-tag[tone=warning],.dark a-tag[tone=critical]{--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tag[tone=brand]{--tag-bg-solid: #5f4bc3}.dark a-tag[tone=info]{--tag-bg-solid: #1f6eb2}.dark a-tag[tone=success]{--tag-bg-solid: #2a7e43}.dark a-tag[tone=warning]{--tag-bg-solid: #995200}.dark a-tag[tone=critical]{--tag-bg-solid: #c9302c}.dark a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tabs{--tabs-track-bg: color-mix(in oklch, #e4d1ef 7%, transparent);--tab-secondary-bg: color-mix(in oklch, #e4d1ef 8%, transparent)}a-input:not([tone]){--input-bg: var(--bg-1);--input-border: var(--border-2);--input-hint: var(--text-3)}a-input[status=critical]{--input-bg: #fefbfb;--input-border: #de4545;--input-hint: #c9302c}a-input[status=warning]{--input-bg: #fefbf6;--input-border: #ae6613;--input-hint: #995200}a-input[status=success]{--input-bg: #f7fcf9;--input-border: #329550;--input-hint: #2a7e43}a-input[status=info]{--input-bg: #fbfcfe;--input-border: #2686d9;--input-hint: #175082}a-input[status=brand]{--input-bg: #fcfcfe;--input-border: #7460d7;--input-hint: #5f4bc3}.dark a-input[status=critical]{--input-bg: #1f0506;--input-border: #c9302c;--input-hint: #e25858}.dark a-input[status=warning]{--input-bg: #120a03;--input-border: #995200;--input-hint: #c37416}.dark a-input[status=success]{--input-bg: #041008;--input-border: #2a7e43;--input-hint: #3aab5c}.dark a-input[status=info]{--input-bg: #040d18;--input-border: #1f6eb2;--input-hint: #3e93dd}.dark a-input[status=brand]{--input-bg: #0b0916;--input-border: #5f4bc3;--input-hint: #8270db}a-input:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}a-input[status]:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}.dark a-input:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f}.dark a-input[status]:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-hint: var(--text-5)}.dark a-input:not([status]):not([tone]){--input-border: #49424c}.dark a-input[status=success]{--input-border: var(--border-1-success)}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: var(--border-2);--input-time-border-hover: var(--border-1);--input-time-hint: var(--text-3)}a-input-time[status=critical]{--input-time-bg: #fefbfb;--input-time-border: #de4545;--input-time-border-hover: #de4545;--input-time-hint: #c9302c}a-input-time[status=warning]{--input-time-bg: #fefbf6;--input-time-border: #ae6613;--input-time-border-hover: #ae6613;--input-time-hint: #995200}a-input-time[status=success]{--input-time-bg: #f7fcf9;--input-time-border: #329550;--input-time-border-hover: #329550;--input-time-hint: #2a7e43}a-input-time[status=info]{--input-time-bg: #fbfcfe;--input-time-border: #2686d9;--input-time-border-hover: #2686d9;--input-time-hint: #175082}a-input-time[status=brand]{--input-time-bg: #fcfcfe;--input-time-border: #7460d7;--input-time-border-hover: #7460d7;--input-time-hint: #5f4bc3}.dark a-input-time[status=critical]{--input-time-bg: #1f0506;--input-time-border: #c9302c;--input-time-border-hover: #c9302c;--input-time-hint: #e25858}.dark a-input-time[status=warning]{--input-time-bg: #120a03;--input-time-border: #995200;--input-time-border-hover: #995200;--input-time-hint: #c37416}.dark a-input-time[status=success]{--input-time-bg: #041008;--input-time-border: var(--border-1-success);--input-time-border-hover: var(--border-1-success);--input-time-hint: #3aab5c}.dark a-input-time[status=info]{--input-time-bg: #040d18;--input-time-border: #1f6eb2;--input-time-border-hover: #1f6eb2;--input-time-hint: #3e93dd}.dark a-input-time[status=brand]{--input-time-bg: #0b0916;--input-time-border: #5f4bc3;--input-time-border-hover: #5f4bc3;--input-time-hint: #8270db}a-input-time:disabled{--input-time-bg: #44374b12;--input-time-border: #44374b26;--input-time-border-hover: #44374b26;--input-time-hint: var(--text-5)}.dark a-input-time:disabled{--input-time-bg: #e4d1ef0d;--input-time-border: #e4d1ef1f;--input-time-border-hover: #e4d1ef1f}.dark a-input-time:not([status]){--input-time-border: #49424c;--input-time-border-hover: #635b65}}
1
+ :root:root,.light.light{--bg-1: #ffffff;--bg-2: #fbfafb;--bg-3: #f6f4f6;--bg-4: #f1eff1;--bg-5: #ece9ec;--bg-2-brand: #fcfcfe;--bg-3-brand: #f7f6fd;--bg-4-brand: #efeefc;--bg-5-brand: #e9e5fa;--bg-2-success: #f7fcf9;--bg-3-success: #ecf9f0;--bg-4-success: #e2f5e8;--bg-5-success: #d9f2e0;--bg-2-critical: #fefbfb;--bg-3-critical: #fdf2f2;--bg-4-critical: #fcebeb;--bg-5-critical: #fae5e5;--bg-2-warning: #fefbf6;--bg-3-warning: #fcf4e8;--bg-4-warning: #fbeeda;--bg-5-warning: #f9e7cd;--bg-2-info: #fbfcfe;--bg-3-info: #f2f7fd;--bg-4-info: #e9f3fb;--bg-5-info: #e1eefa;--text-1: #050306;--text-2: #302b31;--text-3: #635b65;--text-4: #878089;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: #48349399;--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: #1f5c3199;--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: #a01c1c99;--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: #99520099;--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: #175082b2;--text-5-info: #17508280;--border-1: #938d96;--border-2: #c1b9c1;--border-3: #d4ced4;--border-4: #e0dce0;--border-5: #ece9ec;--border-1-brand: #9081df;--border-2-brand: #bcb1f1;--border-3-brand: #d2cbf6;--border-4-brand: #ddd8f8;--border-5-brand: #e9e5fa;--border-1-success: #44c169;--border-2-success: #88d7a0;--border-3-success: #b3e5c2;--border-4-success: #c6ecd1;--border-5-success: #d9f2e0;--border-1-critical: #e56c6c;--border-2-critical: #efa4a4;--border-3-critical: #f4c2c2;--border-4-critical: #f7d4d4;--border-5-critical: #fae5e5;--border-1-warning: #d88118;--border-2-warning: #edb25a;--border-3-warning: #f3cc91;--border-4-warning: #f6dbb1;--border-5-warning: #f9e7cd;--border-1-info: #56a1e1;--border-2-info: #93c5ec;--border-3-info: #bad6f3;--border-4-info: #cfe3f7;--border-5-info: #e1eefa;--focus-ring: var(--text-2-brand)}.dark.dark{--bg-1: #000000;--bg-2: #0e0d0f;--bg-3: #121014;--bg-4: #161316;--bg-5: #1a171b;--bg-2-brand: #08060e;--bg-3-brand: #0f0c1d;--bg-4-brand: #130f24;--bg-5-brand: #16132b;--bg-2-success: #030b06;--bg-3-success: #051209;--bg-4-success: #06160b;--bg-5-success: #081b0e;--bg-2-critical: #120303;--bg-3-critical: #210606;--bg-4-critical: #260808;--bg-5-critical: #2e0a0b;--bg-2-warning: #110a03;--bg-3-warning: #1c1105;--bg-4-warning: #231406;--bg-5-warning: #2b1a08;--bg-2-info: #020a12;--bg-3-info: #05131f;--bg-4-info: #071725;--bg-5-info: #0c2337;--text-1: #ece9ec;--text-2: #c1b9c1;--text-3: #9f99a1;--text-4: #776e77;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: #ada0ee99;--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: #74cd8e99;--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: #e78e9099;--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: #e1a45299;--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: #7db6e899;--text-5-info: #7db6e866;--border-1: hsl(288deg 5.21% 42%);--border-2: hsl(282deg 7.04% 28%);--border-3: hsl(277.5deg 6.56% 20%);--border-4: hsl(290deg 6.52% 14%);--border-5: hsl(285deg 7.14% 10%);--border-1-brand: hsl(250.08deg 59.8% 58%);--border-2-brand: hsl(250deg 50% 42%);--border-3-brand: hsl(252.63deg 47.74% 30%);--border-4-brand: hsl(249.8deg 39.84% 19%);--border-5-brand: hsl(249deg 39.22% 14%);--border-1-success: hsl(138.18deg 49.75% 29%);--border-2-success: hsl(138.26deg 50.36% 20%);--border-3-success: hsl(137.7deg 49.59% 16%);--border-4-success: hsl(138.46deg 52% 10%);--border-5-success: hsl(138.86deg 53.85% 7.5%);--border-1-critical: hsl(0deg 56% 46%);--border-2-critical: hsl(.42deg 63% 30%);--border-3-critical: hsl(0deg 62.21% 23%);--border-4-critical: hsl(359.13deg 59% 15%);--border-5-critical: hsl(359.06deg 63% 11%);--border-1-warning: hsl(32.13deg 80.31% 34%);--border-2-warning: hsl(27.93deg 84.06% 24%);--border-3-warning: hsl(30deg 79.66% 17%);--border-4-warning: hsl(28.75deg 63.16% 12%);--border-5-warning: hsl(28.64deg 66.67% 9%);--border-1-info: hsl(207.82deg 70.2% 40%);--border-2-info: hsl(207.77deg 69.94% 29%);--border-3-info: hsl(208.04deg 69.93% 21%);--border-4-info: hsl(208.52deg 62.89% 14%);--border-5-info: hsl(207.78deg 65.85% 10.5%);--focus-ring: var(--text-2-brand)}@layer anta{a-button:not([tone]),a[role=button][data-anta]:not([tone]),button[data-anta]:not([tone]),input[data-anta]:is([type=reset],[type=submit]):not([tone]){--button-bg-primary-rest: #635b65;--button-bg-primary-hover: #534c57;--button-bg-primary-active: #49424c;--button-bg-secondary-rest: #45374c12;--button-bg-secondary-hover: #44374b1a;--button-bg-secondary-active: #44374b26;--button-fg-secondary-rest: #534c57;--button-fg-secondary-hover: #49424c;--button-fg-secondary-l-shift: .05;--button-fg-tertiary-rest: #635b65;--button-fg-tertiary-hover: #534c57;--button-bg-tertiary-hover: #44374b0d;--button-bg-tertiary-active: #44374b1a;--button-fg-quaternary-rest: #635b65;--button-fg-quaternary-hover: #49424c}a-button[tone=brand],a[role=button][data-anta][tone=brand],button[data-anta][tone=brand],input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--button-bg-primary-rest: #5f4bc3;--button-bg-primary-hover: #503cb4;--button-bg-primary-active: #483493;--button-bg-secondary-rest: #7460d71a;--button-bg-secondary-hover: #7460d726;--button-bg-secondary-active: #7460d733;--button-fg-secondary-rest: #5f4bc3;--button-fg-secondary-hover: #503cb4;--button-fg-tertiary-rest: #5f4bc3;--button-fg-tertiary-hover: #503cb4;--button-bg-tertiary-hover: #7460d71a;--button-bg-tertiary-active: #7460d726;--button-fg-quaternary-rest: #5f4bc3;--button-fg-quaternary-hover: #483493}a-button[tone=critical],a[role=button][data-anta][tone=critical],button[data-anta][tone=critical],input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--button-bg-primary-rest: #c9302c;--button-bg-primary-hover: #b02120;--button-bg-primary-active: #a01c1c;--button-bg-secondary-rest: #de45451a;--button-bg-secondary-hover: #de454526;--button-bg-secondary-active: #de454533;--button-fg-secondary-rest: #c9302c;--button-fg-secondary-hover: #b02120;--button-fg-tertiary-rest: #c9302c;--button-fg-tertiary-hover: #b02120;--button-bg-tertiary-hover: #de45451a;--button-bg-tertiary-active: #de454533;--button-fg-quaternary-rest: #c9302c;--button-fg-quaternary-hover: #a01c1c}a-button[tone=info],a[role=button][data-anta][tone=info],button[data-anta][tone=info],input[data-anta]:is([type=reset],[type=submit])[tone=info]{--button-bg-primary-rest: #1f6eb2;--button-bg-primary-hover: #1a5b93;--button-bg-primary-active: #175082;--button-bg-secondary-rest: #2686d91a;--button-bg-secondary-hover: #2686d926;--button-bg-secondary-active: #2686d933;--button-fg-secondary-rest: #1f6eb2;--button-fg-secondary-hover: #1a5b93;--button-fg-tertiary-rest: #1f6eb2;--button-fg-tertiary-hover: #1a5b93;--button-bg-tertiary-hover: #2686d91a;--button-bg-tertiary-active: #2686d926;--button-fg-quaternary-rest: #1f6eb2;--button-fg-quaternary-hover: #175082}a-button[tone=success],a[role=button][data-anta][tone=success],button[data-anta][tone=success],input[data-anta]:is([type=reset],[type=submit])[tone=success]{--button-bg-primary-rest: #2a7e43;--button-bg-primary-hover: #226737;--button-bg-primary-active: #1f5c31;--button-bg-secondary-rest: #3295501a;--button-bg-secondary-hover: #32955026;--button-bg-secondary-active: #32955033;--button-fg-secondary-rest: #2a7e43;--button-fg-secondary-hover: #226737;--button-fg-tertiary-rest: #2a7e43;--button-fg-tertiary-hover: #226737;--button-bg-tertiary-hover: #3295501a;--button-bg-tertiary-active: #32955026;--button-fg-quaternary-rest: #2a7e43;--button-fg-quaternary-hover: #1f5c31}a-button[tone=warning],a[role=button][data-anta][tone=warning],button[data-anta][tone=warning],input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--button-bg-primary-rest: #c37416;--button-bg-primary-hover: #ae6613;--button-bg-primary-active: #995200;--button-bg-secondary-rest: #c374161a;--button-bg-secondary-hover: #c3741626;--button-bg-secondary-active: #c3741633;--button-fg-secondary-rest: #c37416;--button-fg-secondary-hover: #ae6613;--button-fg-tertiary-rest: #c37416;--button-fg-tertiary-hover: #ae6613;--button-bg-tertiary-hover: #c374161a;--button-bg-tertiary-active: #c3741633;--button-fg-quaternary-rest: #c37416;--button-fg-quaternary-hover: #995200}.dark a-button:not([tone]),.dark a[role=button][data-anta]:not([tone]),.dark button[data-anta]:not([tone]),.dark input[data-anta]:is([type=reset],[type=submit]):not([tone]){--button-bg-primary-rest: #534c57;--button-bg-primary-hover: #635b65;--button-bg-primary-active: #938d96;--button-bg-secondary-rest: #e4d1ef1c;--button-bg-secondary-hover: #e4d1ef24;--button-bg-secondary-active: #e4d1ef2e;--button-fg-secondary-rest: #c1b9c1;--button-fg-secondary-hover: #d4ced4;--button-fg-secondary-l-shift: 0;--button-fg-tertiary-rest: #afa9b1;--button-fg-tertiary-hover: #afa9b1;--button-bg-tertiary-hover: #e4d1ef14;--button-bg-tertiary-active: #e4d1ef21;--button-fg-quaternary-rest: #afa9b1;--button-fg-quaternary-hover: #cac4ca}.dark a-button[tone=brand],.dark a[role=button][data-anta][tone=brand],.dark button[data-anta][tone=brand],.dark input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--button-bg-primary-rest: #503cb4;--button-bg-primary-hover: #5f4bc3;--button-bg-primary-active: #7460d7;--button-bg-secondary-rest: #7460d73b;--button-bg-secondary-hover: #7460d747;--button-bg-secondary-active: #7460d754;--button-fg-secondary-rest: #c5baff;--button-fg-secondary-hover: #d2cbf6;--button-fg-tertiary-rest: #ada0ee;--button-fg-tertiary-hover: #bcb1f1;--button-bg-tertiary-hover: #7460d73b;--button-bg-tertiary-active: #7460d747;--button-fg-quaternary-rest: #ada0ee;--button-fg-quaternary-hover: #c7bef4}.dark a-button[tone=critical],.dark a[role=button][data-anta][tone=critical],.dark button[data-anta][tone=critical],.dark input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--button-bg-primary-rest: #b02120;--button-bg-primary-hover: #c9302c;--button-bg-primary-active: #de4545;--button-bg-secondary-rest: #de45453b;--button-bg-secondary-hover: #de454547;--button-bg-secondary-active: #de454554;--button-fg-secondary-rest: #ffabac;--button-fg-secondary-hover: #f4c2c2;--button-fg-tertiary-rest: #e78e90;--button-fg-tertiary-hover: #efa4a4;--button-bg-tertiary-hover: #de45453b;--button-bg-tertiary-active: #de454547;--button-fg-quaternary-rest: #e78e90;--button-fg-quaternary-hover: #ffabac}.dark a-button[tone=info],.dark a[role=button][data-anta][tone=info],.dark button[data-anta][tone=info],.dark input[data-anta]:is([type=reset],[type=submit])[tone=info]{--button-bg-primary-rest: #1a5b93;--button-bg-primary-hover: #1f6eb2;--button-bg-primary-active: #2686d9;--button-bg-secondary-rest: #2686d93b;--button-bg-secondary-hover: #2686d947;--button-bg-secondary-active: #2686d954;--button-fg-secondary-rest: #9ed2ff;--button-fg-secondary-hover: #bad6f3;--button-fg-tertiary-rest: #7db6e8;--button-fg-tertiary-hover: #93c5ec;--button-bg-tertiary-hover: #2686d93b;--button-bg-tertiary-active: #2686d947;--button-fg-quaternary-rest: #7db6e8;--button-fg-quaternary-hover: #a6cdef}.dark a-button[tone=success],.dark a[role=button][data-anta][tone=success],.dark button[data-anta][tone=success],.dark input[data-anta]:is([type=reset],[type=submit])[tone=success]{--button-bg-primary-rest: #226737;--button-bg-primary-hover: #2a7e43;--button-bg-primary-active: #329550;--button-bg-secondary-rest: #3295503b;--button-bg-secondary-hover: #32955047;--button-bg-secondary-active: #32955054;--button-fg-secondary-rest: #8ceca9;--button-fg-secondary-hover: #b3e5c2;--button-fg-tertiary-rest: #74cd8e;--button-fg-tertiary-hover: #88d7a0;--button-bg-tertiary-hover: #3295503b;--button-bg-tertiary-active: #32955047;--button-fg-quaternary-rest: #74cd8e;--button-fg-quaternary-hover: #9ddeb1}.dark a-button[tone=warning],.dark a[role=button][data-anta][tone=warning],.dark button[data-anta][tone=warning],.dark input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--button-bg-primary-rest: #7f410b;--button-bg-primary-hover: #995200;--button-bg-primary-active: #ae6613;--button-bg-secondary-rest: #c374163b;--button-bg-secondary-hover: #c3741647;--button-bg-secondary-active: #c3741654;--button-fg-secondary-rest: #f7c06e;--button-fg-secondary-hover: #f3cc91;--button-fg-tertiary-rest: #e1a452;--button-fg-tertiary-hover: #edb25a;--button-bg-tertiary-hover: #c374163b;--button-bg-tertiary-active: #c3741647;--button-fg-quaternary-rest: #e1a452;--button-fg-quaternary-hover: #f0bf75}a-checkbox[tone=brand],a-checkbox[tone-selected=brand]{--checkbox-bg-selected: #5f4bc3;--checkbox-bg-selected-hover: #503cb4;--checkbox-bg-selected-active: #483493}a-checkbox[tone=neutral],a-checkbox[tone-selected=neutral]{--checkbox-bg-selected: #878089;--checkbox-bg-selected-hover: #776e77;--checkbox-bg-selected-active: #635b65}a-checkbox[tone=info],a-checkbox[tone-selected=info]{--checkbox-bg-selected: #1f6eb2;--checkbox-bg-selected-hover: #1a5b93;--checkbox-bg-selected-active: #175082}a-checkbox[tone=success],a-checkbox[tone-selected=success]{--checkbox-bg-selected: #2a7e43;--checkbox-bg-selected-hover: #226737;--checkbox-bg-selected-active: #1f5c31}a-checkbox[tone=warning],a-checkbox[tone-selected=warning]{--checkbox-bg-selected: #c37416;--checkbox-bg-selected-hover: #ae6613;--checkbox-bg-selected-active: #995200}a-checkbox[tone=critical],a-checkbox[tone-selected=critical]{--checkbox-bg-selected: #c9302c;--checkbox-bg-selected-hover: #b02120;--checkbox-bg-selected-active: #a01c1c}a-checkbox[tone=brand]{--checkbox-bg: #fcfcfe;--checkbox-border: #bcb1f1;--checkbox-border-hover: #9e8eeb;--checkbox-border-active: #9081df}a-checkbox[tone=info]{--checkbox-bg: #fbfcfe;--checkbox-border: #93c5ec;--checkbox-border-hover: #69ace5;--checkbox-border-active: #56a1e1}a-checkbox[tone=success]{--checkbox-bg: #f7fcf9;--checkbox-border: #88d7a0;--checkbox-border-hover: #5bc87b;--checkbox-border-active: #44c169}a-checkbox[tone=warning]{--checkbox-bg: #fefbf6;--checkbox-border: #edb25a;--checkbox-border-hover: #e09127;--checkbox-border-active: #d88118}a-checkbox[tone=critical]{--checkbox-bg: #fefbfb;--checkbox-border: #efa4a4;--checkbox-border-hover: #e87f7f;--checkbox-border-active: #e56c6c}.dark a-checkbox:not([tone]):not([tone-selected]){--checkbox-border-neutral: #49424c;--checkbox-border-hover: #635b65;--checkbox-border-active: #776e77;--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65;--checkbox-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-checkbox[tone=brand],.dark a-checkbox[tone-selected=brand]{--checkbox-bg-selected: #503cb4;--checkbox-bg-selected-hover: #5f4bc3;--checkbox-bg-selected-active: #7460d7}.dark a-checkbox[tone=neutral],.dark a-checkbox[tone-selected=neutral]{--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65}.dark a-checkbox[tone=info],.dark a-checkbox[tone-selected=info]{--checkbox-bg-selected: #1a5b93;--checkbox-bg-selected-hover: #1f6eb2;--checkbox-bg-selected-active: #2686d9}.dark a-checkbox[tone=success],.dark a-checkbox[tone-selected=success]{--checkbox-bg-selected: #226737;--checkbox-bg-selected-hover: #2a7e43;--checkbox-bg-selected-active: #329550}.dark a-checkbox[tone=warning],.dark a-checkbox[tone-selected=warning]{--checkbox-bg-selected: #7f410b;--checkbox-bg-selected-hover: #995200;--checkbox-bg-selected-active: #ae6613}.dark a-checkbox[tone=critical],.dark a-checkbox[tone-selected=critical]{--checkbox-bg-selected: #b02120;--checkbox-bg-selected-hover: #c9302c;--checkbox-bg-selected-active: #de4545}.dark a-checkbox[tone=brand]{--checkbox-bg: #0b0916;--checkbox-border: #483493;--checkbox-border-hover: #5f4bc3;--checkbox-border-active: #7460d7}.dark a-checkbox[tone=info]{--checkbox-bg: #040d18;--checkbox-border: #175082;--checkbox-border-hover: #1f6eb2;--checkbox-border-active: #2686d9}.dark a-checkbox[tone=success]{--checkbox-bg: #041008;--checkbox-border: #1f5c31;--checkbox-border-hover: #2a7e43;--checkbox-border-active: #329550}.dark a-checkbox[tone=warning]{--checkbox-bg: #120a03;--checkbox-border: #6a3b0c;--checkbox-border-hover: #995200;--checkbox-border-active: #ae6613}.dark a-checkbox[tone=critical]{--checkbox-bg: #190405;--checkbox-border: #a01c1c;--checkbox-border-hover: #c9302c;--checkbox-border-active: #de4545}a-radio:not([tone]):not([tone-selected]){--radio-border-width: 1.5px;--radio-bg: var(--bg-1);--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65;--radio-border-neutral: #d4ced4;--radio-border: var(--radio-border-neutral);--radio-border-hover: #c1b9c1;--radio-border-active: #9f99a1;--radio-border-disabled: color-mix(in oklch, #44374b 10%, transparent)}a-radio[tone=brand],a-radio[tone-selected=brand],a-radio-group[tone=brand] a-radio:not([tone]),a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-bg-selected: #5f4bc3;--radio-bg-selected-hover: #503cb4;--radio-bg-selected-active: #483493}a-radio[tone=neutral],a-radio[tone-selected=neutral],a-radio-group[tone=neutral] a-radio:not([tone]),a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65}a-radio[tone=info],a-radio[tone-selected=info],a-radio-group[tone=info] a-radio:not([tone]),a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-bg-selected: #1f6eb2;--radio-bg-selected-hover: #1a5b93;--radio-bg-selected-active: #175082}a-radio[tone=success],a-radio[tone-selected=success],a-radio-group[tone=success] a-radio:not([tone]),a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-bg-selected: #2a7e43;--radio-bg-selected-hover: #226737;--radio-bg-selected-active: #1f5c31}a-radio[tone=warning],a-radio[tone-selected=warning],a-radio-group[tone=warning] a-radio:not([tone]),a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-bg-selected: #c37416;--radio-bg-selected-hover: #ae6613;--radio-bg-selected-active: #995200}a-radio[tone=critical],a-radio[tone-selected=critical],a-radio-group[tone=critical] a-radio:not([tone]),a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-bg-selected: #c9302c;--radio-bg-selected-hover: #b02120;--radio-bg-selected-active: #a01c1c}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #fcfcfe;--radio-border: #bcb1f1;--radio-border-hover: #9e8eeb;--radio-border-active: #9081df}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #fbfcfe;--radio-border: #93c5ec;--radio-border-hover: #69ace5;--radio-border-active: #56a1e1}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #f7fcf9;--radio-border: #88d7a0;--radio-border-hover: #5bc87b;--radio-border-active: #44c169}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #fefbf6;--radio-border: #edb25a;--radio-border-hover: #e09127;--radio-border-active: #d88118}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #fefbfb;--radio-border: #efa4a4;--radio-border-hover: #e87f7f;--radio-border-active: #e56c6c}.dark a-radio:not([tone]):not([tone-selected]){--radio-border-hover: #635b65;--radio-border-active: #776e77;--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65;--radio-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-radio[tone=brand],.dark a-radio[tone-selected=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]),.dark a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-bg-selected: #503cb4;--radio-bg-selected-hover: #5f4bc3;--radio-bg-selected-active: #7460d7}.dark a-radio[tone=neutral],.dark a-radio[tone-selected=neutral],.dark a-radio-group[tone=neutral] a-radio:not([tone]),.dark a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65}.dark a-radio[tone=info],.dark a-radio[tone-selected=info],.dark a-radio-group[tone=info] a-radio:not([tone]),.dark a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-bg-selected: #1a5b93;--radio-bg-selected-hover: #1f6eb2;--radio-bg-selected-active: #2686d9}.dark a-radio[tone=success],.dark a-radio[tone-selected=success],.dark a-radio-group[tone=success] a-radio:not([tone]),.dark a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-bg-selected: #226737;--radio-bg-selected-hover: #2a7e43;--radio-bg-selected-active: #329550}.dark a-radio[tone=warning],.dark a-radio[tone-selected=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]),.dark a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-bg-selected: #7f410b;--radio-bg-selected-hover: #995200;--radio-bg-selected-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio[tone-selected=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]),.dark a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-bg-selected: #b02120;--radio-bg-selected-hover: #c9302c;--radio-bg-selected-active: #de4545}.dark a-radio[tone=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #0b0916;--radio-border: #483493;--radio-border-hover: #5f4bc3;--radio-border-active: #7460d7}.dark a-radio[tone=info],.dark a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #040d18;--radio-border: #175082;--radio-border-hover: #1f6eb2;--radio-border-active: #2686d9}.dark a-radio[tone=success],.dark a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #041008;--radio-border: #1f5c31;--radio-border-hover: #2a7e43;--radio-border-active: #329550}.dark a-radio[tone=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #120a03;--radio-border: #6a3b0c;--radio-border-hover: #995200;--radio-border-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #190405;--radio-border: #a01c1c;--radio-border-hover: #c9302c;--radio-border-active: #de4545}a-tag:not([tone]){--tag-tint: #44374b;--tag-bg-solid: #776e77;--tag-edge: var(--tag-tint);--_tag-bg-alpha: 7%;--_tag-border-alpha: 15%;--_tag-edge-alpha: 25%}a-tag[tone=brand]{--tag-tint: #7460d7;--tag-bg-solid: #7460d7;--tag-edge: var(--text-2-brand);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=info]{--tag-tint: #2686d9;--tag-bg-solid: #2686d9;--tag-edge: var(--text-2-info);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=success]{--tag-tint: #329550;--tag-bg-solid: #329550;--tag-edge: var(--text-2-success);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=warning]{--tag-tint: #c37416;--tag-bg-solid: #ae6613;--tag-edge: var(--text-2-warning);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=critical]{--tag-tint: #de4545;--tag-bg-solid: #de4545;--tag-edge: var(--text-2-critical);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}.dark a-tag:not([tone]),.dark a-tag[tone=neutral]{--tag-tint: #e4d1ef;--tag-bg-solid: #635b65;--_tag-bg-alpha: 12%}.dark a-tag[tone=brand],.dark a-tag[tone=info],.dark a-tag[tone=success],.dark a-tag[tone=warning],.dark a-tag[tone=critical]{--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tag[tone=brand]{--tag-bg-solid: #5f4bc3}.dark a-tag[tone=info]{--tag-bg-solid: #1f6eb2}.dark a-tag[tone=success]{--tag-bg-solid: #2a7e43}.dark a-tag[tone=warning]{--tag-bg-solid: #995200}.dark a-tag[tone=critical]{--tag-bg-solid: #c9302c}.dark a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tabs{--tabs-track-bg: color-mix(in oklch, #e4d1ef 7%, transparent);--tab-secondary-bg: color-mix(in oklch, #e4d1ef 8%, transparent)}a-input:not([tone]){--input-bg: var(--bg-1);--input-border: var(--border-2);--input-hint: var(--text-3)}a-input[status=critical]{--input-bg: #fefbfb;--input-border: #de4545;--input-hint: #c9302c}a-input[status=warning]{--input-bg: #fefbf6;--input-border: #ae6613;--input-hint: #995200}a-input[status=success]{--input-bg: #f7fcf9;--input-border: #329550;--input-hint: #2a7e43}a-input[status=info]{--input-bg: #fbfcfe;--input-border: #2686d9;--input-hint: #175082}a-input[status=brand]{--input-bg: #fcfcfe;--input-border: #7460d7;--input-hint: #5f4bc3}.dark a-input[status=critical]{--input-bg: #1f0506;--input-border: #c9302c;--input-hint: #e25858}.dark a-input[status=warning]{--input-bg: #120a03;--input-border: #995200;--input-hint: #c37416}.dark a-input[status=success]{--input-bg: #041008;--input-border: #2a7e43;--input-hint: #3aab5c}.dark a-input[status=info]{--input-bg: #040d18;--input-border: #1f6eb2;--input-hint: #3e93dd}.dark a-input[status=brand]{--input-bg: #0b0916;--input-border: #5f4bc3;--input-hint: #8270db}a-input:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}a-input[status]:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}.dark a-input:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f}.dark a-input[status]:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-hint: var(--text-5)}.dark a-input:not([status]):not([tone]){--input-border: #49424c}.dark a-input[status=success]{--input-border: var(--border-1-success)}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: var(--border-2);--input-time-border-hover: var(--border-1);--input-time-hint: var(--text-3)}a-input-time[status=critical]{--input-time-bg: #fefbfb;--input-time-border: #de4545;--input-time-border-hover: #de4545;--input-time-hint: #c9302c}a-input-time[status=warning]{--input-time-bg: #fefbf6;--input-time-border: #ae6613;--input-time-border-hover: #ae6613;--input-time-hint: #995200}a-input-time[status=success]{--input-time-bg: #f7fcf9;--input-time-border: #329550;--input-time-border-hover: #329550;--input-time-hint: #2a7e43}a-input-time[status=info]{--input-time-bg: #fbfcfe;--input-time-border: #2686d9;--input-time-border-hover: #2686d9;--input-time-hint: #175082}a-input-time[status=brand]{--input-time-bg: #fcfcfe;--input-time-border: #7460d7;--input-time-border-hover: #7460d7;--input-time-hint: #5f4bc3}.dark a-input-time[status=critical]{--input-time-bg: #1f0506;--input-time-border: #c9302c;--input-time-border-hover: #c9302c;--input-time-hint: #e25858}.dark a-input-time[status=warning]{--input-time-bg: #120a03;--input-time-border: #995200;--input-time-border-hover: #995200;--input-time-hint: #c37416}.dark a-input-time[status=success]{--input-time-bg: #041008;--input-time-border: var(--border-1-success);--input-time-border-hover: var(--border-1-success);--input-time-hint: #3aab5c}.dark a-input-time[status=info]{--input-time-bg: #040d18;--input-time-border: #1f6eb2;--input-time-border-hover: #1f6eb2;--input-time-hint: #3e93dd}.dark a-input-time[status=brand]{--input-time-bg: #0b0916;--input-time-border: #5f4bc3;--input-time-border-hover: #5f4bc3;--input-time-hint: #8270db}a-input-time:disabled{--input-time-bg: #44374b12;--input-time-border: #44374b26;--input-time-border-hover: #44374b26;--input-time-hint: var(--text-5)}.dark a-input-time:disabled{--input-time-bg: #e4d1ef0d;--input-time-border: #e4d1ef1f;--input-time-border-hover: #e4d1ef1f}.dark a-input-time:not([status]){--input-time-border: #49424c;--input-time-border-hover: #635b65}}
@@ -0,0 +1,34 @@
1
+ # Accessibility
2
+
3
+ A few pieces of guidance for designers and engineers using Anta.
4
+
5
+ ## Colors
6
+
7
+ The matrix below renders every text level on every background for the selected tone, in the current theme. Each cell shows the WCAG 2 contrast ratio (with AA / AAA pass marks for the chosen size and weight) and the APCA Lc value. The toggles change rendering only — the underlying ratios are properties of the color pair and don't shift with size or weight; what shifts is the threshold used for pass/fail. The vision tabs apply CVD or other-condition simulations via SVG filters and CSS masks; numbers reflect normal-vision math.
8
+
9
+ This table uses the browser's system colors directly. It changes with the active
10
+ forced-colors palette, so it shows the values a component can use in that mode.
11
+
12
+ ## Color is not a unique communication channel
13
+
14
+ Communicating something with just a color is an accessibility problem — the message is lost under color blindness, low contrast, low brightness, monochrome printing, sun glare, and OS dark/light flips.
15
+
16
+ Anta's `tone` prop on `Progress` and `Text` (and tinted backgrounds, borders, etc.) is a **secondary** signal. Pair it with words and, when possible, with shape distinctions (icons that are visually distinct, not just colored differently — e.g. checkmark vs. cross, not green-circle vs. red-circle).
17
+
18
+ The simulator above makes it easy to check a candidate combination across the most common color-vision deficiencies and a handful of other vision conditions.
19
+
20
+ ## Low-priority text and contrast
21
+
22
+ The `Text`/`Title` `quaternary` priority (`text-4`) and the `text-5` step (the faintest — used for disabled and hint text across components) sit at intentionally muted contrast, designed for non-essential metadata: timestamps, captions, helper hints, secondary counters. At small sizes (13–15 px) they may not pass WCAG AA against some background levels and tones. Use the matrix above to verify combinations before relying on them for content that has to be readable.
23
+
24
+ `text-1` and `text-2` are the primary-content priorities; reach for them whenever the content matters.
25
+
26
+ ## Truncated text and screen readers
27
+
28
+ When `Text` is `truncated` *without* `expandable`, the hidden portion is also hidden from the accessibility tree — the visible ellipsis is what AT reads, exactly like sighted users see. This is intentional: the content the user *can* see is what gets read. If the truncated content matters, set `expandable` too — the chevron is keyboard-discoverable, focus-visible, and Enter/click reveals the rest.
29
+
30
+ ## ARIA lives in JSX wrappers, not in web components
31
+
32
+ Anta's web components (`<a-progress>`, `<a-text>`, `<a-icon>`, …) are **pure declarative DOM**. They never set ARIA attributes from JS — no `setAttribute` from constructors or `attributeChangedCallback`. ARIA wiring (`role`, `aria-label`, `aria-valuenow`, etc.) is layered on by the JSX wrappers (`Progress`, `Icon`, `Text`) as ordinary attribute pass-through. If you write the elements by hand instead of via the wrappers, you're responsible for the ARIA bits — the elements stay DOM-clean either way.
33
+
34
+ This means consumers in other reactive engines (Worker-driven UIs, plain HTML, hand-rolled JSX) get web components that don't fight their state model, while React/Preact users get accessible defaults out of the box from the wrappers.