@antadesign/anta 0.3.27 → 0.3.29
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.
- package/NOTICES.md +32 -1
- package/dist/anta_helpers.d.ts +25 -0
- package/dist/anta_helpers.js +28 -0
- package/dist/box-observation.d.ts +8 -0
- package/dist/box-observation.js +41 -0
- package/dist/box-types.d.ts +2 -0
- package/dist/bundle.css +1 -1
- package/dist/bundle.js +77 -46
- package/dist/components/Banner.js +2 -2
- package/dist/components/Box.d.ts +28 -12
- package/dist/components/Box.js +18 -11
- package/dist/components/Breadcrumbs.css +1 -1
- package/dist/components/Button.js +2 -2
- package/dist/components/Calendar.js +3 -5
- package/dist/components/Card.js +2 -2
- package/dist/components/Checkbox.d.ts +12 -13
- package/dist/components/Checkbox.js +5 -13
- package/dist/components/Expander.js +2 -2
- package/dist/components/Input.d.ts +8 -2
- package/dist/components/Input.js +6 -2
- package/dist/components/InputAutocomplete.js +3 -12
- package/dist/components/InputDate.css +1 -1
- package/dist/components/InputDate.js +2 -0
- package/dist/components/InputTime.js +2 -2
- package/dist/components/Loader.js +2 -1
- package/dist/components/Menu.d.ts +4 -4
- package/dist/components/Menu.js +1 -1
- package/dist/components/MenuItem.d.ts +7 -8
- package/dist/components/MenuItem.js +4 -4
- package/dist/components/Panel.d.ts +17 -0
- package/dist/components/Panel.js +22 -0
- package/dist/components/Progress.js +2 -2
- package/dist/components/RadioGroup.d.ts +14 -14
- package/dist/components/RadioGroup.js +7 -23
- package/dist/components/Select.d.ts +26 -21
- package/dist/components/Select.js +51 -38
- package/dist/components/SelectFaceted.d.ts +24 -11
- package/dist/components/SelectFaceted.js +65 -44
- package/dist/components/Slider.js +3 -3
- package/dist/components/Steps.css +1 -1
- package/dist/components/Switch.d.ts +10 -11
- package/dist/components/Switch.js +3 -11
- package/dist/components/TabPanel.d.ts +3 -8
- package/dist/components/TabPanel.js +2 -1
- package/dist/components/Tabs.d.ts +2 -2
- package/dist/components/Tabs.js +4 -3
- package/dist/components/Tag.d.ts +7 -9
- package/dist/components/Tag.js +2 -2
- package/dist/components/Text.js +2 -2
- package/dist/components/Title.js +2 -2
- package/dist/components/Tooltip.d.ts +1 -1
- package/dist/components/Tooltip.js +1 -1
- package/dist/components/select-parts.css +1 -1
- package/dist/elements/a-avatar.css +1 -1
- package/dist/elements/a-banner.css +1 -1
- package/dist/elements/a-box.css +1 -1
- package/dist/elements/a-box.d.ts +6 -6
- package/dist/elements/a-box.js +74 -23
- package/dist/elements/a-button.css +1 -1
- package/dist/elements/a-button.d.ts +16 -10
- package/dist/elements/a-button.js +64 -1
- package/dist/elements/a-calendar.css +1 -1
- package/dist/elements/a-capture.css +1 -1
- package/dist/elements/a-card.css +1 -1
- package/dist/elements/a-checkbox.css +1 -1
- package/dist/elements/a-checkbox.d.ts +3 -0
- package/dist/elements/a-checkbox.js +17 -1
- package/dist/elements/a-copy.css +1 -1
- package/dist/elements/a-dialog.css +1 -1
- package/dist/elements/a-expander.css +1 -1
- package/dist/elements/a-expander.js +1 -0
- package/dist/elements/a-icon.css +1 -1
- package/dist/elements/a-icon.shapes.css +1 -1
- package/dist/elements/a-input-time.css +1 -1
- package/dist/elements/a-input-time.d.ts +8 -0
- package/dist/elements/a-input-time.js +120 -15
- package/dist/elements/a-input.css +1 -1
- package/dist/elements/a-input.d.ts +27 -1
- package/dist/elements/a-input.js +180 -41
- package/dist/elements/a-loader.css +1 -1
- package/dist/elements/a-menu-group.css +1 -1
- package/dist/elements/a-menu-item.css +1 -1
- package/dist/elements/a-menu-item.js +1 -0
- package/dist/elements/a-menu-separator.css +1 -1
- package/dist/elements/a-menu.css +1 -1
- package/dist/elements/a-menu.d.ts +8 -13
- package/dist/elements/a-menu.js +146 -45
- package/dist/elements/a-panel.css +1 -0
- package/dist/elements/a-panel.d.ts +16 -0
- package/dist/elements/a-panel.js +153 -0
- package/dist/elements/a-progress.css +1 -1
- package/dist/elements/a-radio-group.css +1 -1
- package/dist/elements/a-radio.css +1 -1
- package/dist/elements/a-radio.d.ts +4 -0
- package/dist/elements/a-radio.js +18 -0
- package/dist/elements/a-slider.css +1 -1
- package/dist/elements/a-slider.d.ts +1 -0
- package/dist/elements/a-slider.js +3 -6
- package/dist/elements/a-switch.css +1 -1
- package/dist/elements/a-switch.d.ts +3 -0
- package/dist/elements/a-switch.js +17 -1
- package/dist/elements/a-tab.css +1 -1
- package/dist/elements/a-tabpanel.css +1 -1
- package/dist/elements/a-tabs.css +1 -1
- package/dist/elements/a-tag.css +1 -1
- package/dist/elements/a-text.css +1 -1
- package/dist/elements/a-text.js +1 -0
- package/dist/elements/a-title.css +1 -1
- package/dist/elements/a-toast.css +1 -1
- package/dist/elements/a-toaster.css +1 -1
- package/dist/elements/a-tooltip.css +1 -1
- package/dist/elements/a-tooltip.d.ts +3 -4
- package/dist/elements/a-tooltip.js +30 -8
- package/dist/elements/focus.d.ts +9 -0
- package/dist/elements/focus.js +41 -0
- package/dist/elements/index.d.ts +1 -0
- package/dist/elements/index.js +3 -0
- package/dist/elements/panel-focus.d.ts +10 -0
- package/dist/elements/panel-focus.js +86 -0
- package/dist/elements/shadow-aria.d.ts +10 -0
- package/dist/elements/shadow-aria.js +155 -0
- package/dist/general_types.d.ts +70 -42
- package/dist/generate-icons.mjs +3 -0
- package/dist/index.d.ts +5 -2
- package/dist/index.js +2 -0
- package/dist/jsx-runtime.d.ts +10 -1
- package/dist/reset.css +1 -1
- package/dist/theme-antithesis.css +1 -0
- package/dist/theme-antune.css +1 -0
- package/dist/tokens.css +1 -1
- package/docs/accessibility.md +4 -2
- package/docs/changelog.md +135 -0
- package/docs/colors.md +7 -7
- package/docs/comparison.md +2 -2
- package/docs/components/box.md +98 -34
- package/docs/components/breadcrumbs.md +75 -6
- package/docs/components/button.md +2 -2
- package/docs/components/capture.md +8 -8
- package/docs/components/checkbox.md +21 -16
- package/docs/components/input-autocomplete.md +6 -0
- package/docs/components/input-date.md +8 -2
- package/docs/components/input.md +99 -40
- package/docs/components/menu.md +5 -6
- package/docs/components/panel.md +189 -0
- package/docs/components/radio.md +16 -13
- package/docs/components/select-faceted.md +58 -2
- package/docs/components/select.md +72 -59
- package/docs/components/steps.md +4 -4
- package/docs/components/switch.md +16 -10
- package/docs/components/tabs.md +21 -8
- package/docs/components/tag.md +5 -3
- package/docs/components/tooltip.md +6 -4
- package/docs/index.md +1 -0
- package/docs/install-config.md +23 -12
- package/docs/normalization.md +6 -4
- package/docs/theming.md +95 -17
- package/package.json +8 -4
- package/dist/components/InputDate.module.css +0 -1
- package/dist/components/Select.module.css +0 -1
- package/dist/components/SelectFaceted.module.css +0 -1
- package/dist/search-index.json +0 -0
- package/dist/theme-anta.css +0 -1
package/dist/reset.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer anta.reset{*,*: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}html{color
|
|
1
|
+
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.reset{*,*:before,*:after{box-sizing:border-box}*{margin:0}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;font-variation-settings: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}html{color:var(--text-2);font-family:var(--sans-serif);line-height:calc(22 / 15);-webkit-tap-highlight-color:transparent}body{background:var(--bg-2)}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}b,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)}mark{color:color-mix(in oklch,black 90%,transparent);background-color:light-dark(hsl(55 100% 61.85%),hsl(55 100% 35%));border-radius:2px}del{color:var(--text-2-critical);text-decoration:line-through}ins{color:var(--text-2-success);text-decoration:none}var,dt{font-style:italic;font-weight:600}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}small,figcaption{font-size:calc(13em / 15)}figcaption{color:var(--text-3)}hr{border:0;border-block-start:1px solid var(--border-4)}code{font-family:var(--monospace);font-size:.933em;line-height:1em;color:inherit;background:light-dark(color-mix(in oklch,currentColor 6%,transparent),color-mix(in oklch,currentColor 10%,transparent));border:none;padding:.25em .4ch .2em;border-radius:3px}pre{padding:10px 1rem 6px;border:1px solid var(--border-5);border-radius:6px;background:var(--bg-3);color:var(--text-1);font-family:var(--monospace);font-size:13px;font-weight:440;line-height:20px;overflow-x:auto}pre code{background:none;padding:0;font:inherit;font-variation-settings:inherit}code,samp,pre{letter-spacing:0}p,ul,ol,blockquote,dl,pre,figure{margin-block-end:1rem}:is(p,ul,ol,blockquote,dl,pre,figure):last-child{margin-block-end:0}ul,ol{padding-left:3ch}:is(ul,ol)>li{margin-bottom:.5em}:is(ul,ol)>li::marker{color:var(--text-5)}blockquote{border-left:3px solid var(--text-5);padding-left:calc(2ch - 3px)}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:light-dark(color-mix(in oklch,var(--focus-ring) 20%,transparent),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}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@font-face{font-family:TT Interphases Pro Variable;src:url(https://assets.anta.design/fonts/TT_Interphases_Pro_Variable.woff2) format("woff2");font-style:normal;font-weight:100 900;font-stretch:75% 100%;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"slnt" 0;font-display:swap}@font-face{font-family:TT Interphases Pro Variable;src:url(https://assets.anta.design/fonts/TT_Interphases_Pro_Variable.woff2) format("woff2");font-style:italic;font-weight:100 900;font-stretch:75% 100%;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"slnt" 11;font-display:swap}@font-face{font-family:Stringer;src:url(https://assets.anta.design/fonts/Stringer-Regular-Web.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Antithesis Mono;src:url(https://assets.anta.design/fonts/Antithesis_mono_VF_Upright.woff2) format("woff2");font-style:normal;font-weight:400 700;font-display:swap}@font-face{font-family:Antithesis Mono;src:url(https://assets.anta.design/fonts/Antithesis_mono_VF_Italic.woff2) format("woff2");font-style:italic;font-weight:400 700;font-display:swap}:root,.light{--sans-serif: "TT Interphases Pro Variable", sans-serif;--serif: "Stringer", serif;--monospace: "Antithesis Mono", ui-monospace, monospace;font-variation-settings:"slnt" 0}:root,.light{--anta-seed-brand: #cc4636;--anta-seed-neutral: #65605b}@layer anta.theme{:is(address,cite,em,i,var,dt){font-variation-settings:"slnt" 11;font-synthesis:none}dfn{font-variation-settings:"slnt" 0}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]),a-tab{font-stretch:88%}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){letter-spacing:.05ch}a-input{--_input-adornment-font-stretch: 88%}a-tag{font-feature-settings:"tnum" 1,"ss05" 1,"lnum","ss01","ss04","case","calt";letter-spacing:.02ch}a-tag[allcaps]{font-feature-settings:"tnum" 1,"ss05" 1,"ss01","case","calt";letter-spacing:.08ch}:is(h1,h2,h3,a-title[level="1"],a-title[level="2"],a-title[level="3"]){font-family:var(--serif)}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])):not([round]){--_radius: 999px}a-input:not([round])::part(field),a-input:not([round]):not(:defined):after{border-radius:0}:is(input[data-anta]:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=reset],[type=submit],[type=image],[type=hidden]),textarea[data-anta],select[data-anta]):not([round]){--native-field-round: 0px}a-tag{border-radius:1px}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@font-face{font-family:TT Interphases Pro Variable;src:url(https://assets.anta.design/fonts/TT_Interphases_Pro_Variable.woff2) format("woff2");font-style:normal;font-weight:100 900;font-stretch:75% 100%;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"slnt" 0;font-display:swap}@font-face{font-family:TT Interphases Pro Variable;src:url(https://assets.anta.design/fonts/TT_Interphases_Pro_Variable.woff2) format("woff2");font-style:italic;font-weight:100 900;font-stretch:75% 100%;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"slnt" 11;font-display:swap}@font-face{font-family:Antithesis Mono;src:url(https://assets.anta.design/fonts/Antithesis_mono_VF_Upright.woff2) format("woff2");font-style:normal;font-weight:400 700;font-display:swap}@font-face{font-family:Antithesis Mono;src:url(https://assets.anta.design/fonts/Antithesis_mono_VF_Italic.woff2) format("woff2");font-style:italic;font-weight:400 700;font-display:swap}:root,.light{--sans-serif: "TT Interphases Pro Variable", sans-serif;--monospace: "Antithesis Mono", ui-monospace, monospace;font-variation-settings:"slnt" 0}:root,.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: #7a737c;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: color-mix(in oklch, var(--text-2-brand) 66%, transparent);--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: color-mix(in oklch, var(--text-2-success) 66%, transparent);--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: color-mix(in oklch, var(--text-2-critical) 66%, transparent);--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: color-mix(in oklch, var(--text-2-warning) 66%, transparent);--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: color-mix(in oklch, var(--text-2-info) 66%, transparent);--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: oklch(.55 .2 284.15)}.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: #7c737c;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: color-mix(in oklch, var(--text-2-brand) 62%, transparent);--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: color-mix(in oklch, var(--text-2-success) 62%, transparent);--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: color-mix(in oklch, var(--text-2-critical) 62%, transparent);--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: color-mix(in oklch, var(--text-2-warning) 62%, transparent);--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: color-mix(in oklch, var(--text-2-info) 62%, transparent);--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: #a897fc}@layer anta.theme{:is(address,cite,em,i,var,dt){font-variation-settings:"slnt" 11;font-synthesis:none}dfn{font-variation-settings:"slnt" 0}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]),a-tab{font-stretch:88%}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]),a-tab{letter-spacing:.05ch}a-tooltip{--_tooltip-letter-spacing: .02ch}a-progress-label{letter-spacing:.03em}a-menu-group-label{letter-spacing:.06em}a-input{--_input-adornment-font-stretch: 88%}a-tag{font-feature-settings:"tnum" 1,"ss05" 1,"lnum","ss01","ss04","case","calt";letter-spacing:.02ch}a-tag[allcaps]{font-feature-settings:"tnum" 1,"ss05" 1,"ss01","case","calt";letter-spacing:.08ch}a-button:not([tone]),a-button[tone=neutral],a[role=button][data-anta]:not([tone]),a[role=button][data-anta][tone=neutral],button[data-anta]:not([tone]),button[data-anta][tone=neutral],input[data-anta]:is([type=reset],[type=submit]):not([tone]),input[data-anta]:is([type=reset],[type=submit])[tone=neutral]{--button-bg-primary-rest: light-dark(#635b65, #534c57);--button-bg-primary-hover: light-dark(#534c57, #635b65);--button-bg-primary-active: light-dark(#49424c, #938d96);--button-bg-secondary-rest: light-dark(#45374c12, #e4d1ef1c);--button-bg-secondary-hover: light-dark(#44374b1a, #e4d1ef24);--button-bg-secondary-active: light-dark(#44374b26, #e4d1ef2e);--button-fg-secondary-rest: light-dark(#534c57, #c1b9c1);--button-fg-secondary-hover: light-dark(#49424c, #d4ced4);--button-fg-tertiary-rest: light-dark(#635b65, #afa9b1);--button-fg-tertiary-hover: light-dark(#534c57, #afa9b1);--button-bg-tertiary-hover: light-dark(#44374b0d, #e4d1ef14);--button-bg-tertiary-active: light-dark(#44374b1a, #e4d1ef21);--button-fg-quaternary-rest: light-dark(#635b65, #afa9b1);--button-fg-quaternary-hover: light-dark(#49424c, #cac4ca)}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: light-dark(#5f4bc3, #503cb4);--button-bg-primary-hover: light-dark(#503cb4, #5f4bc3);--button-bg-primary-active: light-dark(#483493, #7460d7);--button-bg-secondary-rest: light-dark(#7460d71a, #7460d73b);--button-bg-secondary-hover: light-dark(#7460d726, #7460d747);--button-bg-secondary-active: light-dark(#7460d733, #7460d754);--button-fg-secondary-rest: light-dark(#5f4bc3, #c5baff);--button-fg-secondary-hover: light-dark(#503cb4, #d2cbf6);--button-fg-tertiary-rest: light-dark(#5f4bc3, #ada0ee);--button-fg-tertiary-hover: light-dark(#503cb4, #bcb1f1);--button-bg-tertiary-hover: light-dark(#7460d71a, #7460d73b);--button-bg-tertiary-active: light-dark(#7460d726, #7460d747);--button-fg-quaternary-rest: light-dark(#5f4bc3, #ada0ee);--button-fg-quaternary-hover: light-dark(#483493, #c7bef4)}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: light-dark(#c9302c, #b02120);--button-bg-primary-hover: light-dark(#b02120, #c9302c);--button-bg-primary-active: light-dark(#a01c1c, #de4545);--button-bg-secondary-rest: light-dark(#de45451a, #de45453b);--button-bg-secondary-hover: light-dark(#de454526, #de454547);--button-bg-secondary-active: light-dark(#de454533, #de454554);--button-fg-secondary-rest: light-dark(#c9302c, #ffabac);--button-fg-secondary-hover: light-dark(#b02120, #f4c2c2);--button-fg-tertiary-rest: light-dark(#c9302c, #e78e90);--button-fg-tertiary-hover: light-dark(#b02120, #efa4a4);--button-bg-tertiary-hover: light-dark(#de45451a, #de45453b);--button-bg-tertiary-active: light-dark(#de454526, #de454547);--button-fg-quaternary-rest: light-dark(#c9302c, #e78e90);--button-fg-quaternary-hover: light-dark(#a01c1c, #ffabac)}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: light-dark(#1f6eb2, #1a5b93);--button-bg-primary-hover: light-dark(#1a5b93, #1f6eb2);--button-bg-primary-active: light-dark(#175082, #2686d9);--button-bg-secondary-rest: light-dark(#2686d91a, #2686d93b);--button-bg-secondary-hover: light-dark(#2686d926, #2686d947);--button-bg-secondary-active: light-dark(#2686d933, #2686d954);--button-fg-secondary-rest: light-dark(#1f6eb2, #9ed2ff);--button-fg-secondary-hover: light-dark(#1a5b93, #bad6f3);--button-fg-tertiary-rest: light-dark(#1f6eb2, #7db6e8);--button-fg-tertiary-hover: light-dark(#1a5b93, #93c5ec);--button-bg-tertiary-hover: light-dark(#2686d91a, #2686d93b);--button-bg-tertiary-active: light-dark(#2686d926, #2686d947);--button-fg-quaternary-rest: light-dark(#1f6eb2, #7db6e8);--button-fg-quaternary-hover: light-dark(#175082, #a6cdef)}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: light-dark(#2a7e43, #226737);--button-bg-primary-hover: light-dark(#226737, #2a7e43);--button-bg-primary-active: light-dark(#1f5c31, #329550);--button-bg-secondary-rest: light-dark(#3295501a, #3295503b);--button-bg-secondary-hover: light-dark(#32955026, #32955047);--button-bg-secondary-active: light-dark(#32955033, #32955054);--button-fg-secondary-rest: light-dark(#2a7e43, #8ceca9);--button-fg-secondary-hover: light-dark(#226737, #b3e5c2);--button-fg-tertiary-rest: light-dark(#2a7e43, #74cd8e);--button-fg-tertiary-hover: light-dark(#226737, #88d7a0);--button-bg-tertiary-hover: light-dark(#3295501a, #3295503b);--button-bg-tertiary-active: light-dark(#32955026, #32955047);--button-fg-quaternary-rest: light-dark(#2a7e43, #74cd8e);--button-fg-quaternary-hover: light-dark(#1f5c31, #9ddeb1)}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: light-dark(#c37416, #7f410b);--button-bg-primary-hover: light-dark(#ae6613, #995200);--button-bg-primary-active: light-dark(#995200, #ae6613);--button-bg-secondary-rest: light-dark(#c374161a, #c374163b);--button-bg-secondary-hover: light-dark(#c3741626, #c3741647);--button-bg-secondary-active: light-dark(#c3741633, #c3741654);--button-fg-secondary-rest: light-dark(#c37416, #f7c06e);--button-fg-secondary-hover: light-dark(#ae6613, #f3cc91);--button-fg-tertiary-rest: light-dark(#c37416, #e1a452);--button-fg-tertiary-hover: light-dark(#ae6613, #edb25a);--button-bg-tertiary-hover: light-dark(#c374161a, #c374163b);--button-bg-tertiary-active: light-dark(#c3741626, #c3741647);--button-fg-quaternary-rest: light-dark(#c37416, #e1a452);--button-fg-quaternary-hover: light-dark(#995200, #f0bf75)}:is(a-checkbox,input[data-anta][type=checkbox]):not([tone]){--checkbox-border-neutral: light-dark(#d4ced4, #49424c);--checkbox-border-hover: light-dark(#c1b9c1, #635b65);--checkbox-border-active: light-dark(#938d96, #776e77);--checkbox-bg-selected: light-dark(#878089, #49424c);--checkbox-bg-selected-hover: light-dark(#776e77, #534c57);--checkbox-bg-selected-active: #635b65;--checkbox-border-disabled: light-dark(color-mix(in oklch, #44374b 10%, transparent), color-mix(in oklch, #e4d1ef 10%, transparent))}:is(a-checkbox,input[data-anta][type=checkbox])[tone=brand]{--checkbox-bg-selected: light-dark(#5f4bc3, #503cb4);--checkbox-bg-selected-hover: light-dark(#503cb4, #5f4bc3);--checkbox-bg-selected-active: light-dark(#483493, #7460d7)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=neutral]{--checkbox-bg-selected: light-dark(#878089, #49424c);--checkbox-bg-selected-hover: light-dark(#776e77, #534c57);--checkbox-bg-selected-active: #635b65}:is(a-checkbox,input[data-anta][type=checkbox])[tone=info]{--checkbox-bg-selected: light-dark(#1f6eb2, #1a5b93);--checkbox-bg-selected-hover: light-dark(#1a5b93, #1f6eb2);--checkbox-bg-selected-active: light-dark(#175082, #2686d9)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=success]{--checkbox-bg-selected: light-dark(#2a7e43, #226737);--checkbox-bg-selected-hover: light-dark(#226737, #2a7e43);--checkbox-bg-selected-active: light-dark(#1f5c31, #329550)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=warning]{--checkbox-bg-selected: light-dark(#c37416, #7f410b);--checkbox-bg-selected-hover: light-dark(#ae6613, #995200);--checkbox-bg-selected-active: light-dark(#995200, #ae6613)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=critical]{--checkbox-bg-selected: light-dark(#c9302c, #b02120);--checkbox-bg-selected-hover: light-dark(#b02120, #c9302c);--checkbox-bg-selected-active: light-dark(#a01c1c, #de4545)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=brand]:not([tone-scope=selected]){--checkbox-bg: light-dark(#fcfcfe, #0b0916);--checkbox-border: light-dark(#bcb1f1, #483493);--checkbox-border-hover: light-dark(#9e8eeb, #5f4bc3);--checkbox-border-active: light-dark(#9081df, #7460d7)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=info]:not([tone-scope=selected]){--checkbox-bg: light-dark(#fbfcfe, #040d18);--checkbox-border: light-dark(#93c5ec, #175082);--checkbox-border-hover: light-dark(#69ace5, #1f6eb2);--checkbox-border-active: light-dark(#56a1e1, #2686d9)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=success]:not([tone-scope=selected]){--checkbox-bg: light-dark(#f7fcf9, #041008);--checkbox-border: light-dark(#88d7a0, #1f5c31);--checkbox-border-hover: light-dark(#5bc87b, #2a7e43);--checkbox-border-active: light-dark(#44c169, #329550)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=warning]:not([tone-scope=selected]){--checkbox-bg: light-dark(#fefbf6, #120a03);--checkbox-border: light-dark(#edb25a, #6a3b0c);--checkbox-border-hover: light-dark(#e09127, #995200);--checkbox-border-active: light-dark(#d88118, #ae6613)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=critical]:not([tone-scope=selected]){--checkbox-bg: light-dark(#fefbfb, #190405);--checkbox-border: light-dark(#efa4a4, #a01c1c);--checkbox-border-hover: light-dark(#e87f7f, #c9302c);--checkbox-border-active: light-dark(#e56c6c, #de4545)}:is(a-radio,input[data-anta][type=radio]):not([tone]){--radio-border-width: 1.5px;--radio-bg: var(--bg-1);--radio-bg-selected: light-dark(#878089, #49424c);--radio-bg-selected-hover: light-dark(#776e77, #534c57);--radio-bg-selected-active: #635b65;--radio-border-neutral: light-dark(#d4ced4, #49424c);--radio-border: var(--radio-border-neutral);--radio-border-hover: light-dark(#c1b9c1, #635b65);--radio-border-active: light-dark(#9f99a1, #776e77);--radio-border-disabled: light-dark(color-mix(in oklch, #44374b 10%, transparent), color-mix(in oklch, #e4d1ef 10%, transparent))}:is(a-radio,input[data-anta][type=radio])[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg-selected: light-dark(#5f4bc3, #503cb4);--radio-bg-selected-hover: light-dark(#503cb4, #5f4bc3);--radio-bg-selected-active: light-dark(#483493, #7460d7)}:is(a-radio,input[data-anta][type=radio])[tone=neutral],a-radio-group[tone=neutral] a-radio:not([tone]){--radio-bg-selected: light-dark(#878089, #49424c);--radio-bg-selected-hover: light-dark(#776e77, #534c57);--radio-bg-selected-active: #635b65}:is(a-radio,input[data-anta][type=radio])[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-bg-selected: light-dark(#1f6eb2, #1a5b93);--radio-bg-selected-hover: light-dark(#1a5b93, #1f6eb2);--radio-bg-selected-active: light-dark(#175082, #2686d9)}:is(a-radio,input[data-anta][type=radio])[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-bg-selected: light-dark(#2a7e43, #226737);--radio-bg-selected-hover: light-dark(#226737, #2a7e43);--radio-bg-selected-active: light-dark(#1f5c31, #329550)}:is(a-radio,input[data-anta][type=radio])[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg-selected: light-dark(#c37416, #7f410b);--radio-bg-selected-hover: light-dark(#ae6613, #995200);--radio-bg-selected-active: light-dark(#995200, #ae6613)}:is(a-radio,input[data-anta][type=radio])[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg-selected: light-dark(#c9302c, #b02120);--radio-bg-selected-hover: light-dark(#b02120, #c9302c);--radio-bg-selected-active: light-dark(#a01c1c, #de4545)}:is(a-radio,input[data-anta][type=radio])[tone=brand]:not([tone-scope=selected]),a-radio-group[tone=brand]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=brand][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#fcfcfe, #0b0916);--radio-border: light-dark(#bcb1f1, #483493);--radio-border-hover: light-dark(#9e8eeb, #5f4bc3);--radio-border-active: light-dark(#9081df, #7460d7)}:is(a-radio,input[data-anta][type=radio])[tone=info]:not([tone-scope=selected]),a-radio-group[tone=info]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=info][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#fbfcfe, #040d18);--radio-border: light-dark(#93c5ec, #175082);--radio-border-hover: light-dark(#69ace5, #1f6eb2);--radio-border-active: light-dark(#56a1e1, #2686d9)}:is(a-radio,input[data-anta][type=radio])[tone=success]:not([tone-scope=selected]),a-radio-group[tone=success]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=success][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#f7fcf9, #041008);--radio-border: light-dark(#88d7a0, #1f5c31);--radio-border-hover: light-dark(#5bc87b, #2a7e43);--radio-border-active: light-dark(#44c169, #329550)}:is(a-radio,input[data-anta][type=radio])[tone=warning]:not([tone-scope=selected]),a-radio-group[tone=warning]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=warning][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#fefbf6, #120a03);--radio-border: light-dark(#edb25a, #6a3b0c);--radio-border-hover: light-dark(#e09127, #995200);--radio-border-active: light-dark(#d88118, #ae6613)}:is(a-radio,input[data-anta][type=radio])[tone=critical]:not([tone-scope=selected]),a-radio-group[tone=critical]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=critical][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#fefbfb, #190405);--radio-border: light-dark(#efa4a4, #a01c1c);--radio-border-hover: light-dark(#e87f7f, #c9302c);--radio-border-active: light-dark(#e56c6c, #de4545)}a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical])) a-radio:not([tone]){--radio-bg-selected: light-dark(oklch(from var(--radio-tone-source) .5 c h), oklch(from var(--radio-tone-source) .45 c h));--radio-bg-selected-hover: light-dark(oklch(from var(--radio-tone-source) .45 c h), oklch(from var(--radio-tone-source) .5 c h));--radio-bg-selected-active: light-dark(oklch(from var(--radio-tone-source) .4 c h), oklch(from var(--radio-tone-source) .57 c h))}a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical])):not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]))[tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(oklch(from var(--radio-off-tone-source) .99 calc(c*.03) h), oklch(from var(--radio-off-tone-source) .15 calc(c*.18) h));--_radio-border-base: color-mix(in oklch, var(--radio-bg-selected) 70%, var(--radio-border-neutral));--radio-border: light-dark(oklch(from var(--_radio-border-base) calc(l + .17) c h), var(--_radio-border-base));--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: light-dark(var(--_radio-border-base), oklch(from var(--_radio-border-base) calc(l + .17) c h))}a-tag:not([tone]),a-tag[tone=neutral]{--tag-tint: light-dark(#44374b, #e4d1ef);--tag-bg-solid: light-dark(#776e77, #635b65);--tag-edge: var(--tag-tint);--tag-bg: light-dark(color-mix(in oklch, var(--tag-tint) 7%, transparent), color-mix(in oklch, var(--tag-tint) 12%, transparent));--tag-border: color-mix(in oklch, var(--tag-tint) 15%, transparent)}a-tag[tone=brand]{--tag-tint: #7460d7;--tag-bg-solid: light-dark(#7460d7, #5f4bc3);--tag-edge: var(--text-2-brand)}a-tag[tone=info]{--tag-tint: #2686d9;--tag-bg-solid: light-dark(#2686d9, #1f6eb2);--tag-edge: var(--text-2-info)}a-tag[tone=success]{--tag-tint: #329550;--tag-bg-solid: light-dark(#329550, #2a7e43);--tag-edge: var(--text-2-success)}a-tag[tone=warning]{--tag-tint: #c37416;--tag-bg-solid: light-dark(#ae6613, #995200);--tag-edge: var(--text-2-warning)}a-tag[tone=critical]{--tag-tint: #de4545;--tag-bg-solid: light-dark(#de4545, #c9302c);--tag-edge: var(--text-2-critical)}a-tag:not([tone])[priority=tertiary],a-tag[tone=neutral][priority=tertiary]{--tag-border: color-mix(in oklch, var(--tag-edge) 25%, transparent)}a-tabs{--tabs-track-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .008 h / .06), color-mix(in oklch, #e4d1ef 7%, transparent) );--tab-secondary-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .008 h / .03), color-mix(in oklch, #e4d1ef 8%, transparent) )}a-input:not([tone]){--input-bg: var(--bg-1);--input-border: light-dark(var(--border-2), #49424c);--input-hint: var(--text-3)}a-input[status=critical]{--input-bg: light-dark(#fefbfb, #1f0506);--input-border: light-dark(#de4545, #c9302c);--input-hint: light-dark(#c9302c, #e25858)}a-input[status=warning]{--input-bg: light-dark(#fefbf6, #120a03);--input-border: light-dark(#ae6613, #995200);--input-hint: light-dark(#995200, #c37416)}a-input[status=success]{--input-bg: light-dark(#f7fcf9, #041008);--input-border: light-dark(#329550, var(--border-1-success));--input-hint: light-dark(#2a7e43, #3aab5c)}a-input[status=info]{--input-bg: light-dark(#fbfcfe, #040d18);--input-border: light-dark(#2686d9, #1f6eb2);--input-hint: light-dark(#175082, #3e93dd)}a-input[status=brand]{--input-bg: light-dark(#fcfcfe, #0b0916);--input-border: light-dark(#7460d7, #5f4bc3);--input-hint: light-dark(#5f4bc3, #8270db)}a-input:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #e4d1ef1f);--input-hint: var(--text-5)}a-input[status]:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #e4d1ef1f);--input-hint: var(--text-5)}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: light-dark(var(--border-2), #49424c);--input-time-border-hover: light-dark(var(--border-1), #635b65);--input-time-hint: var(--text-3)}a-input-time[status=critical]{--input-time-bg: light-dark(#fefbfb, #1f0506);--input-time-border: light-dark(#de4545, #c9302c);--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#c9302c, #e25858)}a-input-time[status=warning]{--input-time-bg: light-dark(#fefbf6, #120a03);--input-time-border: light-dark(#ae6613, #995200);--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#995200, #c37416)}a-input-time[status=success]{--input-time-bg: light-dark(#f7fcf9, #041008);--input-time-border: light-dark(#329550, var(--border-1-success));--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#2a7e43, #3aab5c)}a-input-time[status=info]{--input-time-bg: light-dark(#fbfcfe, #040d18);--input-time-border: light-dark(#2686d9, #1f6eb2);--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#175082, #3e93dd)}a-input-time[status=brand]{--input-time-bg: light-dark(#fcfcfe, #0b0916);--input-time-border: light-dark(#7460d7, #5f4bc3);--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#5f4bc3, #8270db)}a-input-time:disabled{--input-time-bg: light-dark(#44374b12, #e4d1ef0d);--input-time-border: light-dark(#44374b26, #e4d1ef1f);--input-time-border-hover: var(--input-time-border);--input-time-hint: var(--text-5)}}
|
package/dist/tokens.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;:root,.light{--sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;font-size:15px;font-weight:400;font-feature-settings:"ss02" on,"ss05" on,"tnum" on;--anta-seed-neutral: #635b65;--anta-seed-brand: #5f4bc3;--anta-seed-info: #1f6eb2;--anta-seed-success: #2a7e43;--anta-seed-warning: #c37416;--anta-seed-critical: #c9302c;--bg-1: oklch(from var(--anta-seed-neutral) 1 0 h);--bg-2: oklch(from var(--anta-seed-neutral) .985 .002 h);--bg-3: oklch(from var(--anta-seed-neutral) .97 .004 h);--bg-4: oklch(from var(--anta-seed-neutral) .954 .004 h);--bg-5: oklch(from var(--anta-seed-neutral) .935 .006 h);--bg-2-brand: oklch(from var(--anta-seed-brand) .99 .004 h);--bg-3-brand: oklch(from var(--anta-seed-brand) .972 .011 h);--bg-4-brand: oklch(from var(--anta-seed-brand) .955 .02 h);--bg-5-brand: oklch(from var(--anta-seed-brand) .935 .03 h);--bg-2-info: oklch(from var(--anta-seed-info) .99 .004 h);--bg-3-info: oklch(from var(--anta-seed-info) .972 .011 h);--bg-4-info: oklch(from var(--anta-seed-info) .955 .02 h);--bg-5-info: oklch(from var(--anta-seed-info) .935 .03 h);--bg-2-success: oklch(from var(--anta-seed-success) .99 .004 h);--bg-3-success: oklch(from var(--anta-seed-success) .972 .011 h);--bg-4-success: oklch(from var(--anta-seed-success) .955 .02 h);--bg-5-success: oklch(from var(--anta-seed-success) .935 .03 h);--bg-2-warning: oklch(from var(--anta-seed-warning) .99 .004 h);--bg-3-warning: oklch(from var(--anta-seed-warning) .972 .011 h);--bg-4-warning: oklch(from var(--anta-seed-warning) .955 .02 h);--bg-5-warning: oklch(from var(--anta-seed-warning) .935 .03 h);--bg-2-critical: oklch(from var(--anta-seed-critical) .99 .004 h);--bg-3-critical: oklch(from var(--anta-seed-critical) .972 .011 h);--bg-4-critical: oklch(from var(--anta-seed-critical) .955 .02 h);--bg-5-critical: oklch(from var(--anta-seed-critical) .935 .03 h);--text-1: oklch(from var(--anta-seed-neutral) .1 .01 h);--text-2: oklch(from var(--anta-seed-neutral) .3 .015 h);--text-3: color-mix(in oklch, var(--text-2) 82%, transparent);--text-4: color-mix(in oklch, var(--text-2) 60%, transparent);--text-5: color-mix(in oklch, var(--text-2) 40%, transparent);--text-1-brand: oklch(from var(--anta-seed-brand) .38 .11 h);--text-2-brand: oklch(from var(--anta-seed-brand) .43 .15 h);--text-3-brand: color-mix(in oklch, var(--text-2-brand) 82%, transparent);--text-4-brand: color-mix(in oklch, var(--text-2-brand) 60%, transparent);--text-5-brand: color-mix(in oklch, var(--text-2-brand) 40%, transparent);--text-1-info: oklch(from var(--anta-seed-info) .38 .11 h);--text-2-info: oklch(from var(--anta-seed-info) .43 .15 h);--text-3-info: color-mix(in oklch, var(--text-2-info) 82%, transparent);--text-4-info: color-mix(in oklch, var(--text-2-info) 60%, transparent);--text-5-info: color-mix(in oklch, var(--text-2-info) 40%, transparent);--text-1-success: oklch(from var(--anta-seed-success) .38 .11 h);--text-2-success: oklch(from var(--anta-seed-success) .43 .15 h);--text-3-success: color-mix(in oklch, var(--text-2-success) 82%, transparent);--text-4-success: color-mix(in oklch, var(--text-2-success) 60%, transparent);--text-5-success: color-mix(in oklch, var(--text-2-success) 40%, transparent);--text-1-warning: oklch(from var(--anta-seed-warning) .38 .11 h);--text-2-warning: oklch(from var(--anta-seed-warning) .43 .15 h);--text-3-warning: color-mix(in oklch, var(--text-2-warning) 82%, transparent);--text-4-warning: color-mix(in oklch, var(--text-2-warning) 60%, transparent);--text-5-warning: color-mix(in oklch, var(--text-2-warning) 40%, transparent);--text-1-critical: oklch(from var(--anta-seed-critical) .38 .11 h);--text-2-critical: oklch(from var(--anta-seed-critical) .43 .15 h);--text-3-critical: color-mix(in oklch, var(--text-2-critical) 82%, transparent);--text-4-critical: color-mix(in oklch, var(--text-2-critical) 60%, transparent);--text-5-critical: color-mix(in oklch, var(--text-2-critical) 40%, transparent);--border-1: oklch(from var(--anta-seed-neutral) .67 .008 h);--border-2: oklch(from var(--anta-seed-neutral) .8 .008 h);--border-3: oklch(from var(--anta-seed-neutral) .86 .008 h);--border-4: oklch(from var(--anta-seed-neutral) .9 .008 h);--border-5: oklch(from var(--anta-seed-neutral) .935 .008 h);--border-1-brand: oklch(from var(--anta-seed-brand) .67 .13 h);--border-2-brand: oklch(from var(--anta-seed-brand) .8 .09 h);--border-3-brand: oklch(from var(--anta-seed-brand) .86 .055 h);--border-4-brand: oklch(from var(--anta-seed-brand) .9 .04 h);--border-5-brand: oklch(from var(--anta-seed-brand) .935 .028 h);--border-1-info: oklch(from var(--anta-seed-info) .67 .13 h);--border-2-info: oklch(from var(--anta-seed-info) .8 .09 h);--border-3-info: oklch(from var(--anta-seed-info) .86 .055 h);--border-4-info: oklch(from var(--anta-seed-info) .9 .04 h);--border-5-info: oklch(from var(--anta-seed-info) .935 .028 h);--border-1-success: oklch(from var(--anta-seed-success) .67 .13 h);--border-2-success: oklch(from var(--anta-seed-success) .8 .09 h);--border-3-success: oklch(from var(--anta-seed-success) .86 .055 h);--border-4-success: oklch(from var(--anta-seed-success) .9 .04 h);--border-5-success: oklch(from var(--anta-seed-success) .935 .028 h);--border-1-warning: oklch(from var(--anta-seed-warning) .67 .13 h);--border-2-warning: oklch(from var(--anta-seed-warning) .8 .09 h);--border-3-warning: oklch(from var(--anta-seed-warning) .86 .055 h);--border-4-warning: oklch(from var(--anta-seed-warning) .9 .04 h);--border-5-warning: oklch(from var(--anta-seed-warning) .935 .028 h);--border-1-critical: oklch(from var(--anta-seed-critical) .67 .13 h);--border-2-critical: oklch(from var(--anta-seed-critical) .8 .09 h);--border-3-critical: oklch(from var(--anta-seed-critical) .86 .055 h);--border-4-critical: oklch(from var(--anta-seed-critical) .9 .04 h);--border-5-critical: oklch(from var(--anta-seed-critical) .935 .028 h);--link-color: #1466d4;--link-color-hover: #2674e6;--focus-ring: oklch(.55 .2 284.15)}.dark{font-weight:400;--bg-1: oklch(from var(--anta-seed-neutral) 0 0 h);--bg-2: oklch(from var(--anta-seed-neutral) .16 .002 h);--bg-3: oklch(from var(--anta-seed-neutral) .177 .005 h);--bg-4: oklch(from var(--anta-seed-neutral) .191 .006 h);--bg-5: oklch(from var(--anta-seed-neutral) .2 .009 h);--bg-2-brand: oklch(from var(--anta-seed-brand) .13 .02 h);--bg-3-brand: oklch(from var(--anta-seed-brand) .17 .035 h);--bg-4-brand: oklch(from var(--anta-seed-brand) .185 .05 h);--bg-5-brand: oklch(from var(--anta-seed-brand) .205 .055 h);--bg-2-info: oklch(from var(--anta-seed-info) .13 .02 h);--bg-3-info: oklch(from var(--anta-seed-info) .17 .035 h);--bg-4-info: oklch(from var(--anta-seed-info) .185 .05 h);--bg-5-info: oklch(from var(--anta-seed-info) .205 .055 h);--bg-2-success: oklch(from var(--anta-seed-success) .13 .02 h);--bg-3-success: oklch(from var(--anta-seed-success) .17 .035 h);--bg-4-success: oklch(from var(--anta-seed-success) .185 .05 h);--bg-5-success: oklch(from var(--anta-seed-success) .205 .055 h);--bg-2-warning: oklch(from var(--anta-seed-warning) .13 .02 h);--bg-3-warning: oklch(from var(--anta-seed-warning) .17 .035 h);--bg-4-warning: oklch(from var(--anta-seed-warning) .185 .05 h);--bg-5-warning: oklch(from var(--anta-seed-warning) .205 .055 h);--bg-2-critical: oklch(from var(--anta-seed-critical) .13 .02 h);--bg-3-critical: oklch(from var(--anta-seed-critical) .17 .035 h);--bg-4-critical: oklch(from var(--anta-seed-critical) .185 .05 h);--bg-5-critical: oklch(from var(--anta-seed-critical) .205 .055 h);--text-1: oklch(from var(--anta-seed-neutral) .94 .008 h);--text-2: oklch(from var(--anta-seed-neutral) .8 .015 h);--text-3: color-mix(in oklch, var(--text-2) 80%, transparent);--text-4: color-mix(in oklch, var(--text-2) 60%, transparent);--text-5: color-mix(in oklch, var(--text-2) 40%, transparent);--text-1-brand: oklch(from var(--anta-seed-brand) .85 .1 h);--text-2-brand: oklch(from var(--anta-seed-brand) .77 .11 h);--text-3-brand: color-mix(in oklch, var(--text-2-brand) 80%, transparent);--text-4-brand: color-mix(in oklch, var(--text-2-brand) 60%, transparent);--text-5-brand: color-mix(in oklch, var(--text-2-brand) 40%, transparent);--text-1-info: oklch(from var(--anta-seed-info) .85 .1 h);--text-2-info: oklch(from var(--anta-seed-info) .77 .11 h);--text-3-info: color-mix(in oklch, var(--text-2-info) 80%, transparent);--text-4-info: color-mix(in oklch, var(--text-2-info) 60%, transparent);--text-5-info: color-mix(in oklch, var(--text-2-info) 40%, transparent);--text-1-success: oklch(from var(--anta-seed-success) .85 .1 h);--text-2-success: oklch(from var(--anta-seed-success) .77 .11 h);--text-3-success: color-mix(in oklch, var(--text-2-success) 80%, transparent);--text-4-success: color-mix(in oklch, var(--text-2-success) 60%, transparent);--text-5-success: color-mix(in oklch, var(--text-2-success) 40%, transparent);--text-1-warning: oklch(from var(--anta-seed-warning) .85 .1 h);--text-2-warning: oklch(from var(--anta-seed-warning) .77 .11 h);--text-3-warning: color-mix(in oklch, var(--text-2-warning) 80%, transparent);--text-4-warning: color-mix(in oklch, var(--text-2-warning) 60%, transparent);--text-5-warning: color-mix(in oklch, var(--text-2-warning) 40%, transparent);--text-1-critical: oklch(from var(--anta-seed-critical) .85 .1 h);--text-2-critical: oklch(from var(--anta-seed-critical) .77 .11 h);--text-3-critical: color-mix(in oklch, var(--text-2-critical) 80%, transparent);--text-4-critical: color-mix(in oklch, var(--text-2-critical) 60%, transparent);--text-5-critical: color-mix(in oklch, var(--text-2-critical) 40%, transparent);--border-1: oklch(from var(--anta-seed-neutral) .52 .008 h);--border-2: oklch(from var(--anta-seed-neutral) .41 .008 h);--border-3: oklch(from var(--anta-seed-neutral) .33 .008 h);--border-4: oklch(from var(--anta-seed-neutral) .26 .008 h);--border-5: oklch(from var(--anta-seed-neutral) .21 .008 h);--border-1-brand: oklch(from var(--anta-seed-brand) .52 .15 h);--border-2-brand: oklch(from var(--anta-seed-brand) .41 .12 h);--border-3-brand: oklch(from var(--anta-seed-brand) .33 .09 h);--border-4-brand: oklch(from var(--anta-seed-brand) .26 .06 h);--border-5-brand: oklch(from var(--anta-seed-brand) .21 .045 h);--border-1-info: oklch(from var(--anta-seed-info) .52 .15 h);--border-2-info: oklch(from var(--anta-seed-info) .41 .12 h);--border-3-info: oklch(from var(--anta-seed-info) .33 .09 h);--border-4-info: oklch(from var(--anta-seed-info) .26 .06 h);--border-5-info: oklch(from var(--anta-seed-info) .21 .045 h);--border-1-success: oklch(from var(--anta-seed-success) .52 .15 h);--border-2-success: oklch(from var(--anta-seed-success) .41 .12 h);--border-3-success: oklch(from var(--anta-seed-success) .33 .09 h);--border-4-success: oklch(from var(--anta-seed-success) .26 .06 h);--border-5-success: oklch(from var(--anta-seed-success) .21 .045 h);--border-1-warning: oklch(from var(--anta-seed-warning) .52 .15 h);--border-2-warning: oklch(from var(--anta-seed-warning) .41 .12 h);--border-3-warning: oklch(from var(--anta-seed-warning) .33 .09 h);--border-4-warning: oklch(from var(--anta-seed-warning) .26 .06 h);--border-5-warning: oklch(from var(--anta-seed-warning) .21 .045 h);--border-1-critical: oklch(from var(--anta-seed-critical) .52 .15 h);--border-2-critical: oklch(from var(--anta-seed-critical) .41 .12 h);--border-3-critical: oklch(from var(--anta-seed-critical) .33 .09 h);--border-4-critical: oklch(from var(--anta-seed-critical) .26 .06 h);--border-5-critical: oklch(from var(--anta-seed-critical) .21 .045 h);--link-color: #7baee9;--link-color-hover: #90bdee;--focus-ring: #a897fc}
|
|
1
|
+
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;:root,.light{--sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;--monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace}:root,.light{color-scheme:light;font-size:15px;font-weight:400;--anta-seed-neutral: #635b65;--anta-seed-brand: #5f4bc3;--anta-seed-info: #1f6eb2;--anta-seed-success: #2a7e43;--anta-seed-warning: #c37416;--anta-seed-critical: #c9302c;--bg-1: oklch(from var(--anta-seed-neutral) 1 0 h);--bg-2: oklch(from var(--anta-seed-neutral) .985 .002 h);--bg-3: oklch(from var(--anta-seed-neutral) .97 .004 h);--bg-4: oklch(from var(--anta-seed-neutral) .954 .004 h);--bg-5: oklch(from var(--anta-seed-neutral) .935 .006 h);--bg-2-brand: oklch(from var(--anta-seed-brand) .99 .004 h);--bg-3-brand: oklch(from var(--anta-seed-brand) .972 .011 h);--bg-4-brand: oklch(from var(--anta-seed-brand) .955 .02 h);--bg-5-brand: oklch(from var(--anta-seed-brand) .935 .03 h);--bg-2-info: oklch(from var(--anta-seed-info) .99 .004 h);--bg-3-info: oklch(from var(--anta-seed-info) .972 .011 h);--bg-4-info: oklch(from var(--anta-seed-info) .955 .02 h);--bg-5-info: oklch(from var(--anta-seed-info) .935 .03 h);--bg-2-success: oklch(from var(--anta-seed-success) .99 .004 h);--bg-3-success: oklch(from var(--anta-seed-success) .972 .011 h);--bg-4-success: oklch(from var(--anta-seed-success) .955 .02 h);--bg-5-success: oklch(from var(--anta-seed-success) .935 .03 h);--bg-2-warning: oklch(from var(--anta-seed-warning) .99 .004 h);--bg-3-warning: oklch(from var(--anta-seed-warning) .972 .011 h);--bg-4-warning: oklch(from var(--anta-seed-warning) .955 .02 h);--bg-5-warning: oklch(from var(--anta-seed-warning) .935 .03 h);--bg-2-critical: oklch(from var(--anta-seed-critical) .99 .004 h);--bg-3-critical: oklch(from var(--anta-seed-critical) .972 .011 h);--bg-4-critical: oklch(from var(--anta-seed-critical) .955 .02 h);--bg-5-critical: oklch(from var(--anta-seed-critical) .935 .03 h);--text-1: oklch(from var(--anta-seed-neutral) .1 .01 h);--text-2: oklch(from var(--anta-seed-neutral) .3 .015 h);--text-3: color-mix(in oklch, var(--text-2) 82%, transparent);--text-4: color-mix(in oklch, var(--text-2) 66%, transparent);--text-5: color-mix(in oklch, var(--text-2) 40%, transparent);--text-1-brand: oklch(from var(--anta-seed-brand) .38 .11 h);--text-2-brand: oklch(from var(--anta-seed-brand) .43 .15 h);--text-3-brand: color-mix(in oklch, var(--text-2-brand) 82%, transparent);--text-4-brand: color-mix(in oklch, var(--text-2-brand) 66%, transparent);--text-5-brand: color-mix(in oklch, var(--text-2-brand) 40%, transparent);--text-1-info: oklch(from var(--anta-seed-info) .38 .11 h);--text-2-info: oklch(from var(--anta-seed-info) .43 .15 h);--text-3-info: color-mix(in oklch, var(--text-2-info) 82%, transparent);--text-4-info: color-mix(in oklch, var(--text-2-info) 66%, transparent);--text-5-info: color-mix(in oklch, var(--text-2-info) 40%, transparent);--text-1-success: oklch(from var(--anta-seed-success) .38 .11 h);--text-2-success: oklch(from var(--anta-seed-success) .43 .15 h);--text-3-success: color-mix(in oklch, var(--text-2-success) 82%, transparent);--text-4-success: color-mix(in oklch, var(--text-2-success) 66%, transparent);--text-5-success: color-mix(in oklch, var(--text-2-success) 40%, transparent);--text-1-warning: oklch(from var(--anta-seed-warning) .38 .11 h);--text-2-warning: oklch(from var(--anta-seed-warning) .43 .15 h);--text-3-warning: color-mix(in oklch, var(--text-2-warning) 82%, transparent);--text-4-warning: color-mix(in oklch, var(--text-2-warning) 66%, transparent);--text-5-warning: color-mix(in oklch, var(--text-2-warning) 40%, transparent);--text-1-critical: oklch(from var(--anta-seed-critical) .38 .11 h);--text-2-critical: oklch(from var(--anta-seed-critical) .43 .15 h);--text-3-critical: color-mix(in oklch, var(--text-2-critical) 82%, transparent);--text-4-critical: color-mix(in oklch, var(--text-2-critical) 66%, transparent);--text-5-critical: color-mix(in oklch, var(--text-2-critical) 40%, transparent);--border-1: oklch(from var(--anta-seed-neutral) .67 .008 h);--border-2: oklch(from var(--anta-seed-neutral) .8 .008 h);--border-3: oklch(from var(--anta-seed-neutral) .86 .008 h);--border-4: oklch(from var(--anta-seed-neutral) .9 .008 h);--border-5: oklch(from var(--anta-seed-neutral) .935 .008 h);--border-1-brand: oklch(from var(--anta-seed-brand) .67 .13 h);--border-2-brand: oklch(from var(--anta-seed-brand) .8 .09 h);--border-3-brand: oklch(from var(--anta-seed-brand) .86 .055 h);--border-4-brand: oklch(from var(--anta-seed-brand) .9 .04 h);--border-5-brand: oklch(from var(--anta-seed-brand) .935 .028 h);--border-1-info: oklch(from var(--anta-seed-info) .67 .13 h);--border-2-info: oklch(from var(--anta-seed-info) .8 .09 h);--border-3-info: oklch(from var(--anta-seed-info) .86 .055 h);--border-4-info: oklch(from var(--anta-seed-info) .9 .04 h);--border-5-info: oklch(from var(--anta-seed-info) .935 .028 h);--border-1-success: oklch(from var(--anta-seed-success) .67 .13 h);--border-2-success: oklch(from var(--anta-seed-success) .8 .09 h);--border-3-success: oklch(from var(--anta-seed-success) .86 .055 h);--border-4-success: oklch(from var(--anta-seed-success) .9 .04 h);--border-5-success: oklch(from var(--anta-seed-success) .935 .028 h);--border-1-warning: oklch(from var(--anta-seed-warning) .67 .13 h);--border-2-warning: oklch(from var(--anta-seed-warning) .8 .09 h);--border-3-warning: oklch(from var(--anta-seed-warning) .86 .055 h);--border-4-warning: oklch(from var(--anta-seed-warning) .9 .04 h);--border-5-warning: oklch(from var(--anta-seed-warning) .935 .028 h);--border-1-critical: oklch(from var(--anta-seed-critical) .67 .13 h);--border-2-critical: oklch(from var(--anta-seed-critical) .8 .09 h);--border-3-critical: oklch(from var(--anta-seed-critical) .86 .055 h);--border-4-critical: oklch(from var(--anta-seed-critical) .9 .04 h);--border-5-critical: oklch(from var(--anta-seed-critical) .935 .028 h);--link-color: #1466d4;--link-color-hover: #2674e6;--focus-ring: oklch(.55 .2 284.15)}.dark{color-scheme:dark;font-weight:400;--bg-1: oklch(from var(--anta-seed-neutral) 0 0 h);--bg-2: oklch(from var(--anta-seed-neutral) .16 .002 h);--bg-3: oklch(from var(--anta-seed-neutral) .177 .005 h);--bg-4: oklch(from var(--anta-seed-neutral) .191 .006 h);--bg-5: oklch(from var(--anta-seed-neutral) .2 .009 h);--bg-2-brand: oklch(from var(--anta-seed-brand) .13 .02 h);--bg-3-brand: oklch(from var(--anta-seed-brand) .17 .035 h);--bg-4-brand: oklch(from var(--anta-seed-brand) .185 .05 h);--bg-5-brand: oklch(from var(--anta-seed-brand) .205 .055 h);--bg-2-info: oklch(from var(--anta-seed-info) .13 .02 h);--bg-3-info: oklch(from var(--anta-seed-info) .17 .035 h);--bg-4-info: oklch(from var(--anta-seed-info) .185 .05 h);--bg-5-info: oklch(from var(--anta-seed-info) .205 .055 h);--bg-2-success: oklch(from var(--anta-seed-success) .13 .02 h);--bg-3-success: oklch(from var(--anta-seed-success) .17 .035 h);--bg-4-success: oklch(from var(--anta-seed-success) .185 .05 h);--bg-5-success: oklch(from var(--anta-seed-success) .205 .055 h);--bg-2-warning: oklch(from var(--anta-seed-warning) .13 .02 h);--bg-3-warning: oklch(from var(--anta-seed-warning) .17 .035 h);--bg-4-warning: oklch(from var(--anta-seed-warning) .185 .05 h);--bg-5-warning: oklch(from var(--anta-seed-warning) .205 .055 h);--bg-2-critical: oklch(from var(--anta-seed-critical) .13 .02 h);--bg-3-critical: oklch(from var(--anta-seed-critical) .17 .035 h);--bg-4-critical: oklch(from var(--anta-seed-critical) .185 .05 h);--bg-5-critical: oklch(from var(--anta-seed-critical) .205 .055 h);--text-1: oklch(from var(--anta-seed-neutral) .94 .008 h);--text-2: oklch(from var(--anta-seed-neutral) .8 .015 h);--text-3: color-mix(in oklch, var(--text-2) 80%, transparent);--text-4: color-mix(in oklch, var(--text-2) 62%, transparent);--text-5: color-mix(in oklch, var(--text-2) 40%, transparent);--text-1-brand: oklch(from var(--anta-seed-brand) .85 .1 h);--text-2-brand: oklch(from var(--anta-seed-brand) .77 .11 h);--text-3-brand: color-mix(in oklch, var(--text-2-brand) 80%, transparent);--text-4-brand: color-mix(in oklch, var(--text-2-brand) 62%, transparent);--text-5-brand: color-mix(in oklch, var(--text-2-brand) 40%, transparent);--text-1-info: oklch(from var(--anta-seed-info) .85 .1 h);--text-2-info: oklch(from var(--anta-seed-info) .77 .11 h);--text-3-info: color-mix(in oklch, var(--text-2-info) 80%, transparent);--text-4-info: color-mix(in oklch, var(--text-2-info) 62%, transparent);--text-5-info: color-mix(in oklch, var(--text-2-info) 40%, transparent);--text-1-success: oklch(from var(--anta-seed-success) .85 .1 h);--text-2-success: oklch(from var(--anta-seed-success) .77 .11 h);--text-3-success: color-mix(in oklch, var(--text-2-success) 80%, transparent);--text-4-success: color-mix(in oklch, var(--text-2-success) 62%, transparent);--text-5-success: color-mix(in oklch, var(--text-2-success) 40%, transparent);--text-1-warning: oklch(from var(--anta-seed-warning) .85 .1 h);--text-2-warning: oklch(from var(--anta-seed-warning) .77 .11 h);--text-3-warning: color-mix(in oklch, var(--text-2-warning) 80%, transparent);--text-4-warning: color-mix(in oklch, var(--text-2-warning) 62%, transparent);--text-5-warning: color-mix(in oklch, var(--text-2-warning) 40%, transparent);--text-1-critical: oklch(from var(--anta-seed-critical) .85 .1 h);--text-2-critical: oklch(from var(--anta-seed-critical) .77 .11 h);--text-3-critical: color-mix(in oklch, var(--text-2-critical) 80%, transparent);--text-4-critical: color-mix(in oklch, var(--text-2-critical) 62%, transparent);--text-5-critical: color-mix(in oklch, var(--text-2-critical) 40%, transparent);--border-1: oklch(from var(--anta-seed-neutral) .52 .008 h);--border-2: oklch(from var(--anta-seed-neutral) .41 .008 h);--border-3: oklch(from var(--anta-seed-neutral) .33 .008 h);--border-4: oklch(from var(--anta-seed-neutral) .26 .008 h);--border-5: oklch(from var(--anta-seed-neutral) .21 .008 h);--border-1-brand: oklch(from var(--anta-seed-brand) .52 .15 h);--border-2-brand: oklch(from var(--anta-seed-brand) .41 .12 h);--border-3-brand: oklch(from var(--anta-seed-brand) .33 .09 h);--border-4-brand: oklch(from var(--anta-seed-brand) .26 .06 h);--border-5-brand: oklch(from var(--anta-seed-brand) .21 .045 h);--border-1-info: oklch(from var(--anta-seed-info) .52 .15 h);--border-2-info: oklch(from var(--anta-seed-info) .41 .12 h);--border-3-info: oklch(from var(--anta-seed-info) .33 .09 h);--border-4-info: oklch(from var(--anta-seed-info) .26 .06 h);--border-5-info: oklch(from var(--anta-seed-info) .21 .045 h);--border-1-success: oklch(from var(--anta-seed-success) .52 .15 h);--border-2-success: oklch(from var(--anta-seed-success) .41 .12 h);--border-3-success: oklch(from var(--anta-seed-success) .33 .09 h);--border-4-success: oklch(from var(--anta-seed-success) .26 .06 h);--border-5-success: oklch(from var(--anta-seed-success) .21 .045 h);--border-1-warning: oklch(from var(--anta-seed-warning) .52 .15 h);--border-2-warning: oklch(from var(--anta-seed-warning) .41 .12 h);--border-3-warning: oklch(from var(--anta-seed-warning) .33 .09 h);--border-4-warning: oklch(from var(--anta-seed-warning) .26 .06 h);--border-5-warning: oklch(from var(--anta-seed-warning) .21 .045 h);--border-1-critical: oklch(from var(--anta-seed-critical) .52 .15 h);--border-2-critical: oklch(from var(--anta-seed-critical) .41 .12 h);--border-3-critical: oklch(from var(--anta-seed-critical) .33 .09 h);--border-4-critical: oklch(from var(--anta-seed-critical) .26 .06 h);--border-5-critical: oklch(from var(--anta-seed-critical) .21 .045 h);--link-color: #7baee9;--link-color-hover: #90bdee;--focus-ring: #a897fc}
|
package/docs/accessibility.md
CHANGED
|
@@ -4,7 +4,7 @@ A few guidelines for designers and engineers using Anta.
|
|
|
4
4
|
|
|
5
5
|
## Colors
|
|
6
6
|
|
|
7
|
-
The matrix
|
|
7
|
+
The matrix reads the active theme's `text-*` and `bg-*` tokens and updates when you switch themes. Each cell shows the WCAG 2 contrast ratio, AA or AAA result for the selected size and weight, and APCA Lc value. Transparent text is composited over each background before measurement. Size and weight change pass thresholds, not the color-pair ratios. Vision tabs apply SVG-filter and CSS-mask simulations; the numbers use normal-vision math.
|
|
8
8
|
|
|
9
9
|
The interactive matrix compares all five text levels with all five background levels for each tone in light and dark mode. It resolves the active CSS palette in the browser, composites transparent text over its background, and reports WCAG 2 contrast and APCA Lc.
|
|
10
10
|
|
|
@@ -43,7 +43,9 @@ The simulator above makes it easy to check a candidate combination across the mo
|
|
|
43
43
|
|
|
44
44
|
## Low-priority text and contrast
|
|
45
45
|
|
|
46
|
-
|
|
46
|
+
Neutral `text-4` meets 4.5:1 against `bg-1` in both light and dark modes for Antune and None. This does not extend to every background: Antune's neutral `text-4` is 4.41:1 on light `bg-2` and 4.25:1 on dark `bg-2`.
|
|
47
|
+
|
|
48
|
+
Named `text-4` tones use `text-2` at 66% opacity in light mode and 62% in dark mode for both themes. They remain fainter than `text-3` and are not tuned to meet 4.5:1. The `text-5` step is also intentionally muted. Check the matrix for each tone and background before choosing a pair for readable content.
|
|
47
49
|
|
|
48
50
|
`text-1` and `text-2` are the primary-content priorities; reach for them whenever the content matters.
|
|
49
51
|
|
package/docs/changelog.md
CHANGED
|
@@ -3,6 +3,141 @@
|
|
|
3
3
|
This page tracks changes that ship in `@antadesign/anta`. Documentation-only
|
|
4
4
|
changes are not listed.
|
|
5
5
|
|
|
6
|
+
## 0.3.29 — September 15, 2026
|
|
7
|
+
|
|
8
|
+
### Added
|
|
9
|
+
|
|
10
|
+
- SelectFaceted single and multiple facets support `renderOption` for custom
|
|
11
|
+
option content in facet flyouts and global search results. Render custom
|
|
12
|
+
option data as key–value Tags while retaining selection handling and indicators.
|
|
13
|
+
- Box supports `padding` and `margin` props and HTML attributes. JSX numbers
|
|
14
|
+
use pixels; strings accept CSS shorthand values.
|
|
15
|
+
- Panel is a persistent container that can maximize to the browser viewport
|
|
16
|
+
through a manual popover while keeping its DOM children mounted. Maximized
|
|
17
|
+
panels contain keyboard focus until restored. Panels fill their parent's
|
|
18
|
+
width and height and use `overflow: scroll` by default. The maximized surface
|
|
19
|
+
inherits the Panel's background.
|
|
20
|
+
|
|
21
|
+
### Changed
|
|
22
|
+
|
|
23
|
+
- Switch defaults to neutral in both states. Pass `tone="brand"` for brand coloring,
|
|
24
|
+
and add `toneScope="selected"` to tint only the checked track.
|
|
25
|
+
|
|
26
|
+
- Select uses Anta Button for its default trigger, preserving popup accessibility,
|
|
27
|
+
keyboard-only focus rings, and ellipsis for long values. Its accessible description
|
|
28
|
+
includes the current selection and field hint. Menu button triggers
|
|
29
|
+
open with ArrowUp and ArrowDown. Select field styling now targets its
|
|
30
|
+
`a-select-field` wrapper and child `a-button` instead of Input shadow parts.
|
|
31
|
+
|
|
32
|
+
- Calendar adjacent-month dates are hidden from assistive technology and reach
|
|
33
|
+
full opacity on hover or focus when enabled.
|
|
34
|
+
- The default Alt/Option-click hint in multi-select option menus appears to the
|
|
35
|
+
left of its row after 700ms, and moving between rows restarts that delay.
|
|
36
|
+
- Tooltip delay-free handoff now applies only when both the outgoing and incoming
|
|
37
|
+
tooltips have `follow`. Tooltip supports centered-left placement with
|
|
38
|
+
`placement="left"` and flips right when space is limited.
|
|
39
|
+
- Input and its composed controls now expose roles, labels, popup relationships,
|
|
40
|
+
required state, and active options on the controls that receive focus. Direct
|
|
41
|
+
ARIA element references avoid generated Calendar, popup, and option ID
|
|
42
|
+
collisions across application roots.
|
|
43
|
+
- Checkbox, Switch, and Radio hints are accessible descriptions. Tabs use a
|
|
44
|
+
roving tab stop, and `TabPanel` forwards common component props.
|
|
45
|
+
- Every independently loadable stylesheet now reserves Anta's public and
|
|
46
|
+
internal cascade-layer order. Granular element imports therefore keep
|
|
47
|
+
component and theme rules above `reset.css` even when a bundler loads their
|
|
48
|
+
CSS before `tokens.css`.
|
|
49
|
+
- Breadcrumbs no longer scroll horizontally by default, so button focus rings
|
|
50
|
+
remain visible. To enable scrolling, set `overflow-x: auto` on the trail and
|
|
51
|
+
`outline-offset: -1px` on its focused controls.
|
|
52
|
+
- **Breaking:** Box measurement events now trigger on border-box width and
|
|
53
|
+
height changes by default. `observe` accepts `width`, `height`, `size`,
|
|
54
|
+
`context`, `overflow`, `edges`, `scroll`, or `all`, individually or in a typed
|
|
55
|
+
array. Plain HTML accepts the same selections separated by spaces.
|
|
56
|
+
Use `overflow` for content-driven CSS states or `edges` for scroll-edge
|
|
57
|
+
changes; size observation skips content and scroll observers. `throttle` sets
|
|
58
|
+
the event interval in milliseconds without delaying CSS fades or on-demand
|
|
59
|
+
truncation checks.
|
|
60
|
+
- Tags no longer impose `max-width: 100%`. Labels and values still ellipsize
|
|
61
|
+
when the application constrains the tag’s width.
|
|
62
|
+
|
|
63
|
+
### Fixed
|
|
64
|
+
|
|
65
|
+
- Menu Tab navigation follows rendered slot order and reaches controls inside
|
|
66
|
+
shadow DOM, including individual InputTime segments.
|
|
67
|
+
- Dialog menus preserve menu semantics for body items when no search field is present.
|
|
68
|
+
- Panel preserves maximize and restore focus handling when custom element states
|
|
69
|
+
are unavailable.
|
|
70
|
+
|
|
71
|
+
- Neutral `text-4` meets at least 4.5:1 contrast against `bg-1` in both light
|
|
72
|
+
and dark modes for Antune and None. This guarantee does not extend to named
|
|
73
|
+
tones or other backgrounds.
|
|
74
|
+
- Clicking inside a parent menu closes nested menus outside the clicked branch.
|
|
75
|
+
Calendar's month/year picker closes when clicking elsewhere in the calendar,
|
|
76
|
+
including the month navigation arrows.
|
|
77
|
+
- Nested menus reset when their controlled parent closes. InputDate's month/year
|
|
78
|
+
picker can reopen after selecting a date while the picker is open.
|
|
79
|
+
- Calendar weekday headers use a higher-contrast text color, including weekends.
|
|
80
|
+
- Slider exposes its `ElementInternals` through the same runtime inspection hook
|
|
81
|
+
as other stateful controls, allowing accessibility tooling to inspect its live
|
|
82
|
+
range semantics.
|
|
83
|
+
|
|
84
|
+
## 0.3.28 — September 10, 2026
|
|
85
|
+
|
|
86
|
+
### Changed
|
|
87
|
+
|
|
88
|
+
- **Breaking:** Checkbox, RadioGroup, Switch, MenuItem, Select, and SelectFaceted
|
|
89
|
+
now use one `tone` identity plus `toneScope="all" | "selected"`. The
|
|
90
|
+
`toneSelected` prop and `tone-selected` custom-element attribute were removed;
|
|
91
|
+
use `tone="…" toneScope="selected"` (or `tone="…" tone-scope="selected"` in
|
|
92
|
+
HTML) for neutral resting chrome with a toned selected state. Select and
|
|
93
|
+
SelectFaceted now accept `tone` as their default option-row tone. Switch's
|
|
94
|
+
default brand tone now covers its unchecked chrome too; set
|
|
95
|
+
`toneScope="selected"` to retain the previous neutral unchecked appearance.
|
|
96
|
+
- Renamed the optional Anta theme to Antune. Replace imports of
|
|
97
|
+
`@antadesign/anta/theme-anta.css` with `@antadesign/anta/theme-antune.css`.
|
|
98
|
+
- Reference themes provide hosted font faces by default through the public
|
|
99
|
+
`--sans-serif`, `--serif`, and `--monospace` stacks. Applications can replace
|
|
100
|
+
the stacks directly in CSS loaded after the theme.
|
|
101
|
+
- Theme-free components no longer force TT Interphases stylistic sets or
|
|
102
|
+
variable-font axes. Antune and Antithesis own those font-specific treatments,
|
|
103
|
+
while numeric surfaces retain portable tabular figures.
|
|
104
|
+
- Theme-free Buttons use `0.025ch` tracking and Tags use `0.1ch`. Antune and
|
|
105
|
+
Antithesis use `0.05ch` Button tracking across priorities and retain their
|
|
106
|
+
font-specific Tag tracking.
|
|
107
|
+
- JSX wrappers omit `tone="neutral"` where neutral is the standalone default;
|
|
108
|
+
explicit child resets remain in the rendered DOM when they override an
|
|
109
|
+
inherited group tone.
|
|
110
|
+
- Reference-theme font stacks and role tokens use normal selectors, so the
|
|
111
|
+
documented tokens, theme, application CSS source order controls overrides.
|
|
112
|
+
- Reference themes register separate upright and italic TT Interphases faces,
|
|
113
|
+
mapping semantic italics to the font's `slnt` axis without a ranged face that
|
|
114
|
+
Safari can apply to ordinary text.
|
|
115
|
+
- Paired component colors follow the nearest inherited `color-scheme`, so nested
|
|
116
|
+
`.light` and `.dark` regions do not inherit an outer mode's component colors.
|
|
117
|
+
|
|
118
|
+
### Added
|
|
119
|
+
|
|
120
|
+
- Added `theme-antithesis.css`.
|
|
121
|
+
|
|
122
|
+
### Fixed
|
|
123
|
+
|
|
124
|
+
- Antune and Antithesis pin regular TT Interphases text and `dfn` to `slnt` 0,
|
|
125
|
+
including form controls that reset font shorthand inheritance. This keeps
|
|
126
|
+
text upright in Safari despite the font file's non-zero axis default while
|
|
127
|
+
preserving the `slnt` 11 instance for semantic italics.
|
|
128
|
+
- `tokens.css` declares `color-scheme` on `:root`, `.light`, and `.dark`, so
|
|
129
|
+
component colors resolve to the right mode without the optional `reset.css`
|
|
130
|
+
import.
|
|
131
|
+
- A per-tab `tone` on the selected Tab tones the strip's secondary tab
|
|
132
|
+
background, so non-toned sibling tabs pick up the same tint.
|
|
133
|
+
- `--avatar-badge-chroma` applies to `badge="neutral"` again.
|
|
134
|
+
- Small Input, Select, InputTime, and opt-in native controls keep their declared
|
|
135
|
+
font size while focused on touch devices instead of growing to 16px.
|
|
136
|
+
- Antune restores the dark neutral Radio border used by the original palette.
|
|
137
|
+
- Package documentation can be regenerated by explicit output path without
|
|
138
|
+
rewriting the complete generated documentation tree.
|
|
139
|
+
- `b` uses the same `600` font weight as `strong` in the typography reset.
|
|
140
|
+
|
|
6
141
|
## 0.3.27 — September 6, 2026
|
|
7
142
|
|
|
8
143
|
### Added
|
package/docs/colors.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Anta doesn't offer a global color palette — there are no raw scales like `blue-500` or `gray-900` to pick from. Color ships only as a small set of **role tokens**, grouped by where they apply — background, text, and border — each with a neutral set plus five tones (brand, info, success, critical, warning) that already pair light and dark. You compose from these roles instead of arbitrary swatches; anything app-specific lives in component tokens or your own [semantic aliases](#custom-semantic-tokens).
|
|
4
4
|
|
|
5
|
-
Values are CSS declarations from the shipped default palette and optional `theme-
|
|
5
|
+
Values are CSS declarations from the shipped default palette and optional `theme-antune.css` reference palette. Resolve them in the application's theme to obtain displayed colors. Toned backgrounds share the neutral `--bg-1`; there is no `--bg-1-{tone}`.
|
|
6
6
|
|
|
7
7
|
## Background
|
|
8
8
|
|
|
@@ -59,32 +59,32 @@ Links use `--link-color` at rest and `--link-color-hover` on hover. Both tokens
|
|
|
59
59
|
| `--text-1` | `oklch(from var(--anta-seed-neutral) 0.1 0.01 h)` | `oklch(from var(--anta-seed-neutral) 0.94 0.008 h)` | `#050306` | `#ece9ec` |
|
|
60
60
|
| `--text-2` | `oklch(from var(--anta-seed-neutral) 0.3 0.015 h)` | `oklch(from var(--anta-seed-neutral) 0.8 0.015 h)` | `#302b31` | `#c1b9c1` |
|
|
61
61
|
| `--text-3` | `color-mix(in oklch, var(--text-2) 82%, transparent)` | `color-mix(in oklch, var(--text-2) 80%, transparent)` | `#635b65` | `#9f99a1` |
|
|
62
|
-
| `--text-4` | `color-mix(in oklch, var(--text-2)
|
|
62
|
+
| `--text-4` | `color-mix(in oklch, var(--text-2) 66%, transparent)` | `color-mix(in oklch, var(--text-2) 62%, transparent)` | `#7a737c` | `#7c737c` |
|
|
63
63
|
| `--text-5` | `color-mix(in oklch, var(--text-2) 40%, transparent)` | `color-mix(in oklch, var(--text-2) 40%, transparent)` | `#9f99a1` | `#635b65` |
|
|
64
64
|
| `--text-1-brand` | `oklch(from var(--anta-seed-brand) 0.38 0.11 h)` | `oklch(from var(--anta-seed-brand) 0.85 0.1 h)` | `#2e1e7b` | `#c5baff` |
|
|
65
65
|
| `--text-2-brand` | `oklch(from var(--anta-seed-brand) 0.43 0.15 h)` | `oklch(from var(--anta-seed-brand) 0.77 0.11 h)` | `#483493` | `#ada0ee` |
|
|
66
66
|
| `--text-3-brand` | `color-mix(in oklch, var(--text-2-brand) 82%, transparent)` | `color-mix(in oklch, var(--text-2-brand) 80%, transparent)` | `#483493cc` | `#ada0eecc` |
|
|
67
|
-
| `--text-4-brand` | `color-mix(in oklch, var(--text-2-brand)
|
|
67
|
+
| `--text-4-brand` | `color-mix(in oklch, var(--text-2-brand) 66%, transparent)` | `color-mix(in oklch, var(--text-2-brand) 62%, transparent)` | `color-mix(in oklch, var(--text-2-brand) 66%, transparent)` | `color-mix(in oklch, var(--text-2-brand) 62%, transparent)` |
|
|
68
68
|
| `--text-5-brand` | `color-mix(in oklch, var(--text-2-brand) 40%, transparent)` | `color-mix(in oklch, var(--text-2-brand) 40%, transparent)` | `#48349366` | `#ada0ee66` |
|
|
69
69
|
| `--text-1-info` | `oklch(from var(--anta-seed-info) 0.38 0.11 h)` | `oklch(from var(--anta-seed-info) 0.85 0.1 h)` | `#003969` | `#9ed2ff` |
|
|
70
70
|
| `--text-2-info` | `oklch(from var(--anta-seed-info) 0.43 0.15 h)` | `oklch(from var(--anta-seed-info) 0.77 0.11 h)` | `#175082` | `#7db6e8` |
|
|
71
71
|
| `--text-3-info` | `color-mix(in oklch, var(--text-2-info) 82%, transparent)` | `color-mix(in oklch, var(--text-2-info) 80%, transparent)` | `#175082cc` | `#7db6e8cc` |
|
|
72
|
-
| `--text-4-info` | `color-mix(in oklch, var(--text-2-info)
|
|
72
|
+
| `--text-4-info` | `color-mix(in oklch, var(--text-2-info) 66%, transparent)` | `color-mix(in oklch, var(--text-2-info) 62%, transparent)` | `color-mix(in oklch, var(--text-2-info) 66%, transparent)` | `color-mix(in oklch, var(--text-2-info) 62%, transparent)` |
|
|
73
73
|
| `--text-5-info` | `color-mix(in oklch, var(--text-2-info) 40%, transparent)` | `color-mix(in oklch, var(--text-2-info) 40%, transparent)` | `#17508280` | `#7db6e866` |
|
|
74
74
|
| `--text-1-success` | `oklch(from var(--anta-seed-success) 0.38 0.11 h)` | `oklch(from var(--anta-seed-success) 0.85 0.1 h)` | `#004618` | `#9ddeb1` |
|
|
75
75
|
| `--text-2-success` | `oklch(from var(--anta-seed-success) 0.43 0.15 h)` | `oklch(from var(--anta-seed-success) 0.77 0.11 h)` | `#1f5c31` | `#74cd8e` |
|
|
76
76
|
| `--text-3-success` | `color-mix(in oklch, var(--text-2-success) 82%, transparent)` | `color-mix(in oklch, var(--text-2-success) 80%, transparent)` | `#1f5c31cc` | `#74cd8ecc` |
|
|
77
|
-
| `--text-4-success` | `color-mix(in oklch, var(--text-2-success)
|
|
77
|
+
| `--text-4-success` | `color-mix(in oklch, var(--text-2-success) 66%, transparent)` | `color-mix(in oklch, var(--text-2-success) 62%, transparent)` | `color-mix(in oklch, var(--text-2-success) 66%, transparent)` | `color-mix(in oklch, var(--text-2-success) 62%, transparent)` |
|
|
78
78
|
| `--text-5-success` | `color-mix(in oklch, var(--text-2-success) 40%, transparent)` | `color-mix(in oklch, var(--text-2-success) 40%, transparent)` | `#1f5c3166` | `#74cd8e66` |
|
|
79
79
|
| `--text-1-warning` | `oklch(from var(--anta-seed-warning) 0.38 0.11 h)` | `oklch(from var(--anta-seed-warning) 0.85 0.1 h)` | `#7f410b` | `#f0bf75` |
|
|
80
80
|
| `--text-2-warning` | `oklch(from var(--anta-seed-warning) 0.43 0.15 h)` | `oklch(from var(--anta-seed-warning) 0.77 0.11 h)` | `#995200` | `#e1a452` |
|
|
81
81
|
| `--text-3-warning` | `color-mix(in oklch, var(--text-2-warning) 82%, transparent)` | `color-mix(in oklch, var(--text-2-warning) 80%, transparent)` | `#995200cc` | `#e1a452cc` |
|
|
82
|
-
| `--text-4-warning` | `color-mix(in oklch, var(--text-2-warning)
|
|
82
|
+
| `--text-4-warning` | `color-mix(in oklch, var(--text-2-warning) 66%, transparent)` | `color-mix(in oklch, var(--text-2-warning) 62%, transparent)` | `color-mix(in oklch, var(--text-2-warning) 66%, transparent)` | `color-mix(in oklch, var(--text-2-warning) 62%, transparent)` |
|
|
83
83
|
| `--text-5-warning` | `color-mix(in oklch, var(--text-2-warning) 40%, transparent)` | `color-mix(in oklch, var(--text-2-warning) 40%, transparent)` | `#99520066` | `#e1a45266` |
|
|
84
84
|
| `--text-1-critical` | `oklch(from var(--anta-seed-critical) 0.38 0.11 h)` | `oklch(from var(--anta-seed-critical) 0.85 0.1 h)` | `#8f1014` | `#ffabac` |
|
|
85
85
|
| `--text-2-critical` | `oklch(from var(--anta-seed-critical) 0.43 0.15 h)` | `oklch(from var(--anta-seed-critical) 0.77 0.11 h)` | `#a01c1c` | `#e78e90` |
|
|
86
86
|
| `--text-3-critical` | `color-mix(in oklch, var(--text-2-critical) 82%, transparent)` | `color-mix(in oklch, var(--text-2-critical) 80%, transparent)` | `#a01c1ccc` | `#e78e90cc` |
|
|
87
|
-
| `--text-4-critical` | `color-mix(in oklch, var(--text-2-critical)
|
|
87
|
+
| `--text-4-critical` | `color-mix(in oklch, var(--text-2-critical) 66%, transparent)` | `color-mix(in oklch, var(--text-2-critical) 62%, transparent)` | `color-mix(in oklch, var(--text-2-critical) 66%, transparent)` | `color-mix(in oklch, var(--text-2-critical) 62%, transparent)` |
|
|
88
88
|
| `--text-5-critical` | `color-mix(in oklch, var(--text-2-critical) 40%, transparent)` | `color-mix(in oklch, var(--text-2-critical) 40%, transparent)` | `#a01c1c66` | `#e78e9066` |
|
|
89
89
|
|
|
90
90
|
## Border
|
package/docs/comparison.md
CHANGED
|
@@ -464,5 +464,5 @@ download costs.
|
|
|
464
464
|
| Icons: Bundled icon set | [Included](./components/icon.md) | [Included](https://mui.com/material-ui/material-icons/) | [Basic or community-only](https://mantine.dev/guides/icons/) | [Included](https://astryx.atmeta.com/components/Icon) | [Included](https://ant.design/components/icon) | [Included](https://gravity-ui.com/components/uikit/icon) | Basic or community-only | [Included](https://www.untitledui.com/react/docs/icons) | [Included](https://blueprintjs.com/docs/#core/components/icon) | [Included](https://carbondesignsystem.com/elements/icons/usage/) | [Included](https://atlassian.design/components/icon/examples) | [Included](https://webawesome.com/docs/components/icon/) | [Included](https://shopify.dev/docs/api/app-home/web-components/media-and-visuals/icon) |
|
|
465
465
|
| Typography: Text / title components | [Included](./components/text.md) | [Included](https://mui.com/material-ui/react-typography/) | [Included](https://mantine.dev/core/typography/) | [Included](https://astryx.atmeta.com/components/Text) | [Included](https://ant.design/components/typography) | [Included](https://gravity-ui.com/components/uikit/text) | Not shipped | [Included](https://www.untitledui.com/react/docs/typography) | [Basic or community-only](https://blueprintjs.com/docs/#core/typography) | [Basic or community-only](https://carbondesignsystem.com/elements/typography/overview/) | [Basic or community-only](https://atlassian.design/components/heading/examples) | [Basic or community-only](https://webawesome.com/docs/tokens/typography/) | [Included](https://shopify.dev/docs/api/app-home/web-components/typography-and-content/text) |
|
|
466
466
|
| Charts: First-party data viz | Not shipped | [Included](https://mui.com/x/react-charts/) | [Included](https://mantine.dev/charts/getting-started/) | Basic or community-only | [Included](https://charts.ant.design/en) | Basic or community-only | [Included](https://ui.shadcn.com/charts) | [Included](https://www.untitledui.com/react/components/line-bar-charts) | Not shipped | [Included](https://charts.carbondesignsystem.com/) | Not shipped | [Paid tier](https://webawesome.com/docs/components/chart/) | Not shipped |
|
|
467
|
-
| Utility containers: Boxes with observers
|
|
468
|
-
| Focus
|
|
467
|
+
| Utility containers: Boxes with observers | [Included (Box, Capture)](./components/box.md) | [Included (ClickAwayListener)](https://mui.com/material-ui/react-click-away-listener/) | [Included (useResizeObserver)](https://mantine.dev/hooks/use-resize-observer/) | [Included (useScrollOverflow)](https://astryx.atmeta.com/components/useScrollOverflow) | Not shipped | [Included (useResizeObserver)](https://github.com/gravity-ui/uikit/tree/main/src/hooks/useResizeObserver) | [Included (Scroll Area)](https://ui.shadcn.com/docs/components/scroll-area) | [Included (React Aria useMove)](https://react-aria.adobe.com/useMove) | [Included (ResizeSensor)](https://blueprintjs.com/docs/#core/components/resize-sensor) | Not shipped | [Included (Pragmatic drag and drop)](https://atlassian.design/components/pragmatic-drag-and-drop/core-package/) | [Included (Resize Observer)](https://webawesome.com/docs/components/resize-observer/) | [Included (Box (responsive styling and accessibility))](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/box) |
|
|
468
|
+
| Focus utility: Focus detection and traps | Basic or community-only (Tabs, RadioGroup, Menu, and Calendar manage keyboard focus; Dialog traps and restores focus; Box detects focus within) | [Included (Unstable_TrapFocus (experimental))](https://github.com/mui/material-ui/tree/master/packages/mui-material/src/Unstable_TrapFocus) | [Included (FocusTrap, useFocusTrap)](https://mantine.dev/core/focus-trap/) | [Included (useFocusTrap, useListFocus)](https://astryx.atmeta.com/components/useFocusTrap) | Not shipped | Not shipped | Not shipped | [Included (React Aria FocusScope, useFocusManager)](https://react-aria.adobe.com/FocusScope) | [Included (FocusStyleManager (focus indicators))](https://github.com/palantir/blueprint/blob/develop/packages/core/src/accessibility/focusStyleManager.ts) | Not shipped | Not shipped | Not shipped | Not shipped |
|