@antadesign/anta 0.3.26 → 0.3.27

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 (69) hide show
  1. package/README.md +26 -28
  2. package/dist/anta_helpers.d.ts +4 -0
  3. package/dist/anta_helpers.js +14 -0
  4. package/dist/box-types.d.ts +1 -1
  5. package/dist/bundle.css +1 -1
  6. package/dist/bundle.js +25 -25
  7. package/dist/capture-types.d.ts +156 -0
  8. package/dist/capture-types.js +0 -0
  9. package/dist/components/Box.d.ts +15 -0
  10. package/dist/components/Box.js +3 -11
  11. package/dist/components/Capture.d.ts +39 -0
  12. package/dist/components/Capture.js +36 -0
  13. package/dist/components/capture-props.d.ts +30 -0
  14. package/dist/components/capture-props.js +44 -0
  15. package/dist/elements/a-box.d.ts +1 -1
  16. package/dist/elements/a-box.js +11 -3
  17. package/dist/elements/a-capture.css +1 -0
  18. package/dist/elements/a-capture.d.ts +10 -0
  19. package/dist/elements/a-capture.js +24 -0
  20. package/dist/elements/a-checkbox.js +4 -4
  21. package/dist/elements/a-slider.js +6 -6
  22. package/dist/elements/capture-input.d.ts +5 -0
  23. package/dist/elements/capture-input.js +609 -0
  24. package/dist/elements/index.d.ts +1 -0
  25. package/dist/elements/index.js +3 -0
  26. package/dist/general_types.d.ts +34 -0
  27. package/dist/index.d.ts +3 -0
  28. package/dist/index.js +2 -0
  29. package/dist/jsx-runtime.d.ts +2 -1
  30. package/docs/accessibility.md +24 -0
  31. package/docs/changelog.md +22 -0
  32. package/docs/colors.md +141 -0
  33. package/docs/comparison.md +463 -28
  34. package/docs/components/avatar.md +13 -17
  35. package/docs/components/banner.md +13 -27
  36. package/docs/components/box.md +226 -154
  37. package/docs/components/breadcrumbs.md +7 -6
  38. package/docs/components/button.md +48 -37
  39. package/docs/components/capture.md +345 -0
  40. package/docs/components/card.md +17 -38
  41. package/docs/components/checkbox.md +16 -39
  42. package/docs/components/dialog.md +14 -36
  43. package/docs/components/expander.md +15 -40
  44. package/docs/components/icon.md +111 -9
  45. package/docs/components/input-autocomplete.md +9 -11
  46. package/docs/components/input-date.md +33 -23
  47. package/docs/components/input-time.md +15 -23
  48. package/docs/components/input.md +27 -76
  49. package/docs/components/loader.md +7 -5
  50. package/docs/components/menu.md +73 -77
  51. package/docs/components/progress.md +10 -14
  52. package/docs/components/radio.md +17 -36
  53. package/docs/components/select-faceted.md +7 -25
  54. package/docs/components/select.md +24 -97
  55. package/docs/components/slider.md +16 -21
  56. package/docs/components/steps.md +38 -8
  57. package/docs/components/switch.md +11 -14
  58. package/docs/components/tabs.md +52 -40
  59. package/docs/components/tag.md +11 -22
  60. package/docs/components/text.md +10 -23
  61. package/docs/components/title.md +7 -8
  62. package/docs/components/toaster.md +6 -3
  63. package/docs/components/tooltip.md +13 -23
  64. package/docs/index.md +3 -1
  65. package/docs/install-config.md +24 -0
  66. package/docs/normalization.md +45 -0
  67. package/docs/packages/stickers.md +56 -0
  68. package/docs/theming.md +270 -0
  69. package/package.json +3 -1
package/dist/index.d.ts CHANGED
@@ -28,6 +28,9 @@ export { Text } from './components/Text';
28
28
  export type { TextProps, ExpandMode } from './components/Text';
29
29
  export { Box } from './components/Box';
30
30
  export type { BoxProps } from './components/Box';
31
+ export { Capture } from './components/Capture';
32
+ export type { CaptureProps } from './components/Capture';
33
+ export type { CaptureInputCancelReason, CaptureInputDirection, CaptureInputDirections, CaptureInputGeometry, CaptureInputModifier, CapturePan, CapturePanInertia, CapturePanInput, CapturePointerActivationReason, CapturePointerCapture, CapturePointerInput, CapturePointerStart, CapturePointerType, CaptureWheelActivation, CaptureWheelActivationReason, CaptureWheelInput, CaptureWheelSettle, SerializedMouseEvent, SerializedPointerEvent, SerializedWheelEvent, } from './capture-types';
31
34
  export type { BoxChange, BoxContext, BoxContextChange, BoxDisplay, BoxFont, BoxInset, BoxMeasurement, BoxMeasurementChange, BoxMode, BoxOS, BoxBrowser, BoxPointer, } from './box-types';
32
35
  export { Title } from './components/Title';
33
36
  export type { TitleProps } from './components/Title';
package/dist/index.js CHANGED
@@ -16,6 +16,7 @@ import { Progress } from "./components/Progress";
16
16
  import { Loader } from "./components/Loader";
17
17
  import { Text } from "./components/Text";
18
18
  import { Box } from "./components/Box";
19
+ import { Capture } from "./components/Capture";
19
20
  import { Title } from "./components/Title";
20
21
  import { Tag } from "./components/Tag";
21
22
  import { Icon } from "./components/Icon";
@@ -73,6 +74,7 @@ export {
73
74
  Button,
74
75
  ButtonCopy,
75
76
  Calendar,
77
+ Capture,
76
78
  Card,
77
79
  Checkbox,
78
80
  DEFAULT_CONFIG,
@@ -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 { AAvatarAttributes, AProgressAttributes, ALoaderAttributes, ATextAttributes, ABoxAttributes, 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 { AAvatarAttributes, AProgressAttributes, ALoaderAttributes, ATextAttributes, ABoxAttributes, ACaptureAttributes, 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
  }
@@ -61,6 +61,7 @@ export interface AntaIntrinsicElements {
61
61
  'a-progress-hint': BaseAttributes;
62
62
  'a-text': ATextAttributes;
63
63
  'a-box': ABoxAttributes;
64
+ 'a-capture': ACaptureAttributes;
64
65
  'a-title': ATitleAttributes;
65
66
  'a-tag': ATagAttributes;
66
67
  'a-tag-label': BaseAttributes;
@@ -6,9 +6,33 @@ A few guidelines for designers and engineers using Anta.
6
6
 
7
7
  The matrix renders every text level on every background for the selected tone and theme. Each cell shows the WCAG 2 contrast ratio, AA or AAA result for the selected size and weight, and APCA Lc value. The controls change rendering and 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
+ 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
+
11
+ Choose the application's palette, tone, font size, and font weight before evaluating a pair. Recheck after changing a theme or seed. The [Colors reference](./colors.md) lists the source declarations for both shipped palettes.
12
+
13
+ Vision simulations change the displayed sample; contrast results continue to use normal-vision colors. Use simulations alongside text labels and other non-color signals.
14
+
15
+ Computed contrast cells depend on the selected palette and settings. Evaluate the actual application colors with the [interactive accessibility matrix](https://anta.design/accessibility/).
16
+
17
+ ## System colors
18
+
9
19
  This table uses the browser's system colors directly. It changes with the active
10
20
  forced-colors palette, so it shows the values a component can use in that mode.
11
21
 
22
+ | System colors | Use |
23
+ | --- | --- |
24
+ | `Canvas`, `CanvasText` | Document background and text |
25
+ | `ButtonFace`, `ButtonText`, `ButtonBorder` | Control surface, text, and edge |
26
+ | `Field`, `FieldText` | Input field background and text |
27
+ | `Highlight`, `HighlightText` | Selected text |
28
+ | `SelectedItem`, `SelectedItemText` | Selected control or list item |
29
+ | `Mark`, `MarkText` | Marked text, such as &lt;mark&gt; |
30
+ | `AccentColor`, `AccentColorText` | Accented control |
31
+ | `LinkText` | Unvisited link text |
32
+ | `VisitedText` | Visited link text |
33
+ | `ActiveText` | Active link text |
34
+ | `GrayText` | Disabled text |
35
+
12
36
  ## Color is not a unique communication channel
13
37
 
14
38
  A color-only message fails when a reader cannot distinguish its color. This includes color blindness, low contrast, low brightness, monochrome printing, glare, and theme changes.
package/docs/changelog.md CHANGED
@@ -3,6 +3,28 @@
3
3
  This page tracks changes that ship in `@antadesign/anta`. Documentation-only
4
4
  changes are not listed.
5
5
 
6
+ ## 0.3.27 — September 6, 2026
7
+
8
+ ### Added
9
+
10
+ - Added `Capture` / `<a-capture>`, a new input container for custom wheel,
11
+ pointer, and pan gestures. Each capability is opt-in and emits serialized
12
+ input with coordinates relative to the component.
13
+
14
+ ### Fixed
15
+
16
+ - Packaged Markdown includes comparison tables, color and system-color references,
17
+ icon and sticker catalogs, and theming-lab inputs.
18
+ - `Slider` stops dragging after lost pointer capture or a missed button release,
19
+ so moving back over it without pressing cannot move the thumb.
20
+ - `Checkbox` sets its ARIA state and form value in Safari 16.4-17.3 and Firefox
21
+ 93-125, where `ElementInternals` lacks `CustomStateSet`.
22
+ - `Box` removes its per-window store only when that store is the one still
23
+ registered, so a page that mounts and unmounts boxes repeatedly keeps one
24
+ document-wide class observer instead of accumulating them.
25
+ - `Box` ships its TSDoc in `dist/components/Box.d.ts`, so editors show the
26
+ description and example on hover.
27
+
6
28
  ## 0.3.26 — September 4, 2026
7
29
 
8
30
  ### Added
package/docs/colors.md CHANGED
@@ -2,6 +2,147 @@
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-anta.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
+
7
+ ## Background
8
+
9
+ Background tokens establish surface hierarchy.
10
+
11
+ Background numbers describe a lightness scale. Give surfaces meaningful names in your application by defining semantic aliases for these tokens.
12
+
13
+ | Token | Default light | Default dark | Reference light | Reference dark |
14
+ | --- | --- | --- | --- | --- |
15
+ | `--bg-1` | `oklch(from var(--anta-seed-neutral) 1 0 h)` | `oklch(from var(--anta-seed-neutral) 0 0 h)` | `#ffffff` | `#000000` |
16
+ | `--bg-2` | `oklch(from var(--anta-seed-neutral) 0.985 0.002 h)` | `oklch(from var(--anta-seed-neutral) 0.16 0.002 h)` | `#fbfafb` | `#0e0d0f` |
17
+ | `--bg-3` | `oklch(from var(--anta-seed-neutral) 0.97 0.004 h)` | `oklch(from var(--anta-seed-neutral) 0.177 0.005 h)` | `#f6f4f6` | `#121014` |
18
+ | `--bg-4` | `oklch(from var(--anta-seed-neutral) 0.954 0.004 h)` | `oklch(from var(--anta-seed-neutral) 0.191 0.006 h)` | `#f1eff1` | `#161316` |
19
+ | `--bg-5` | `oklch(from var(--anta-seed-neutral) 0.935 0.006 h)` | `oklch(from var(--anta-seed-neutral) 0.2 0.009 h)` | `#ece9ec` | `#1a171b` |
20
+ | `--bg-2-brand` | `oklch(from var(--anta-seed-brand) 0.99 0.004 h)` | `oklch(from var(--anta-seed-brand) 0.13 0.02 h)` | `#fcfcfe` | `#08060e` |
21
+ | `--bg-3-brand` | `oklch(from var(--anta-seed-brand) 0.972 0.011 h)` | `oklch(from var(--anta-seed-brand) 0.17 0.035 h)` | `#f7f6fd` | `#0f0c1d` |
22
+ | `--bg-4-brand` | `oklch(from var(--anta-seed-brand) 0.955 0.02 h)` | `oklch(from var(--anta-seed-brand) 0.185 0.05 h)` | `#efeefc` | `#130f24` |
23
+ | `--bg-5-brand` | `oklch(from var(--anta-seed-brand) 0.935 0.03 h)` | `oklch(from var(--anta-seed-brand) 0.205 0.055 h)` | `#e9e5fa` | `#16132b` |
24
+ | `--bg-2-info` | `oklch(from var(--anta-seed-info) 0.99 0.004 h)` | `oklch(from var(--anta-seed-info) 0.13 0.02 h)` | `#fbfcfe` | `#020a12` |
25
+ | `--bg-3-info` | `oklch(from var(--anta-seed-info) 0.972 0.011 h)` | `oklch(from var(--anta-seed-info) 0.17 0.035 h)` | `#f2f7fd` | `#05131f` |
26
+ | `--bg-4-info` | `oklch(from var(--anta-seed-info) 0.955 0.02 h)` | `oklch(from var(--anta-seed-info) 0.185 0.05 h)` | `#e9f3fb` | `#071725` |
27
+ | `--bg-5-info` | `oklch(from var(--anta-seed-info) 0.935 0.03 h)` | `oklch(from var(--anta-seed-info) 0.205 0.055 h)` | `#e1eefa` | `#0c2337` |
28
+ | `--bg-2-success` | `oklch(from var(--anta-seed-success) 0.99 0.004 h)` | `oklch(from var(--anta-seed-success) 0.13 0.02 h)` | `#f7fcf9` | `#030b06` |
29
+ | `--bg-3-success` | `oklch(from var(--anta-seed-success) 0.972 0.011 h)` | `oklch(from var(--anta-seed-success) 0.17 0.035 h)` | `#ecf9f0` | `#051209` |
30
+ | `--bg-4-success` | `oklch(from var(--anta-seed-success) 0.955 0.02 h)` | `oklch(from var(--anta-seed-success) 0.185 0.05 h)` | `#e2f5e8` | `#06160b` |
31
+ | `--bg-5-success` | `oklch(from var(--anta-seed-success) 0.935 0.03 h)` | `oklch(from var(--anta-seed-success) 0.205 0.055 h)` | `#d9f2e0` | `#081b0e` |
32
+ | `--bg-2-warning` | `oklch(from var(--anta-seed-warning) 0.99 0.004 h)` | `oklch(from var(--anta-seed-warning) 0.13 0.02 h)` | `#fefbf6` | `#110a03` |
33
+ | `--bg-3-warning` | `oklch(from var(--anta-seed-warning) 0.972 0.011 h)` | `oklch(from var(--anta-seed-warning) 0.17 0.035 h)` | `#fcf4e8` | `#1c1105` |
34
+ | `--bg-4-warning` | `oklch(from var(--anta-seed-warning) 0.955 0.02 h)` | `oklch(from var(--anta-seed-warning) 0.185 0.05 h)` | `#fbeeda` | `#231406` |
35
+ | `--bg-5-warning` | `oklch(from var(--anta-seed-warning) 0.935 0.03 h)` | `oklch(from var(--anta-seed-warning) 0.205 0.055 h)` | `#f9e7cd` | `#2b1a08` |
36
+ | `--bg-2-critical` | `oklch(from var(--anta-seed-critical) 0.99 0.004 h)` | `oklch(from var(--anta-seed-critical) 0.13 0.02 h)` | `#fefbfb` | `#120303` |
37
+ | `--bg-3-critical` | `oklch(from var(--anta-seed-critical) 0.972 0.011 h)` | `oklch(from var(--anta-seed-critical) 0.17 0.035 h)` | `#fdf2f2` | `#210606` |
38
+ | `--bg-4-critical` | `oklch(from var(--anta-seed-critical) 0.955 0.02 h)` | `oklch(from var(--anta-seed-critical) 0.185 0.05 h)` | `#fcebeb` | `#260808` |
39
+ | `--bg-5-critical` | `oklch(from var(--anta-seed-critical) 0.935 0.03 h)` | `oklch(from var(--anta-seed-critical) 0.205 0.055 h)` | `#fae5e5` | `#2e0a0b` |
40
+
41
+ ## Text
42
+
43
+ Text tokens establish content priority and contrast.
44
+
45
+ | Token | Use |
46
+ | --- | --- |
47
+ | `--text-1` | Primary text, for headings and key content. |
48
+ | `--text-2` | Secondary text, for descriptions and supporting content. |
49
+ | `--text-3` | Subdued text, for labels, statuses, and secondary data. |
50
+ | `--text-4` | Minor text, for timestamps, counters, and metadata. |
51
+ | `--text-5` | Placeholder text, for hints and non-critical information. |
52
+
53
+ ### Link color
54
+
55
+ Links use `--link-color` at rest and `--link-color-hover` on hover. Both tokens pair light and dark values independently of the text scale.
56
+
57
+ | Token | Default light | Default dark | Reference light | Reference dark |
58
+ | --- | --- | --- | --- | --- |
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
+ | `--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
+ | `--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) 60%, transparent)` | `color-mix(in oklch, var(--text-2) 60%, transparent)` | `#878089` | `#776e77` |
63
+ | `--text-5` | `color-mix(in oklch, var(--text-2) 40%, transparent)` | `color-mix(in oklch, var(--text-2) 40%, transparent)` | `#9f99a1` | `#635b65` |
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
+ | `--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
+ | `--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) 60%, transparent)` | `color-mix(in oklch, var(--text-2-brand) 60%, transparent)` | `#48349399` | `#ada0ee99` |
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
+ | `--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
+ | `--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
+ | `--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) 60%, transparent)` | `color-mix(in oklch, var(--text-2-info) 60%, transparent)` | `#175082b2` | `#7db6e899` |
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
+ | `--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
+ | `--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
+ | `--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) 60%, transparent)` | `color-mix(in oklch, var(--text-2-success) 60%, transparent)` | `#1f5c3199` | `#74cd8e99` |
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
+ | `--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
+ | `--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
+ | `--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) 60%, transparent)` | `color-mix(in oklch, var(--text-2-warning) 60%, transparent)` | `#99520099` | `#e1a45299` |
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
+ | `--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
+ | `--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
+ | `--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) 60%, transparent)` | `color-mix(in oklch, var(--text-2-critical) 60%, transparent)` | `#a01c1c99` | `#e78e9099` |
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
+
90
+ ## Border
91
+
92
+ Border tokens separate and group elements.
93
+
94
+ Use border tokens according to the surface and the separation it needs:
95
+
96
+ - `border-1` and `border-2` define strong boundaries, including on `bg-4` and `bg-5`.
97
+ - `border-3` provides a visible, moderate boundary.
98
+ - `border-4` separates `bg-2` and `bg-3`.
99
+ - `border-5` provides subtle separation between `bg-2` and `bg-1`.
100
+
101
+ ### Focus ring
102
+
103
+ `--focus-ring` supplies the keyboard-focus outline color across components. It pairs light and dark values. Components use this global token directly.
104
+
105
+ | Token | Default light | Default dark | Reference light | Reference dark |
106
+ | --- | --- | --- | --- | --- |
107
+ | `--border-1` | `oklch(from var(--anta-seed-neutral) 0.67 0.008 h)` | `oklch(from var(--anta-seed-neutral) 0.52 0.008 h)` | `#938d96` | `hsl(288deg 5.21% 42%)` |
108
+ | `--border-2` | `oklch(from var(--anta-seed-neutral) 0.8 0.008 h)` | `oklch(from var(--anta-seed-neutral) 0.41 0.008 h)` | `#c1b9c1` | `hsl(282deg 7.04% 28%)` |
109
+ | `--border-3` | `oklch(from var(--anta-seed-neutral) 0.86 0.008 h)` | `oklch(from var(--anta-seed-neutral) 0.33 0.008 h)` | `#d4ced4` | `hsl(277.5deg 6.56% 20%)` |
110
+ | `--border-4` | `oklch(from var(--anta-seed-neutral) 0.9 0.008 h)` | `oklch(from var(--anta-seed-neutral) 0.26 0.008 h)` | `#e0dce0` | `hsl(290deg 6.52% 14%)` |
111
+ | `--border-5` | `oklch(from var(--anta-seed-neutral) 0.935 0.008 h)` | `oklch(from var(--anta-seed-neutral) 0.21 0.008 h)` | `#ece9ec` | `hsl(285deg 7.14% 10%)` |
112
+ | `--border-1-brand` | `oklch(from var(--anta-seed-brand) 0.67 0.13 h)` | `oklch(from var(--anta-seed-brand) 0.52 0.15 h)` | `#9081df` | `hsl(250.08deg 59.8% 58%)` |
113
+ | `--border-2-brand` | `oklch(from var(--anta-seed-brand) 0.8 0.09 h)` | `oklch(from var(--anta-seed-brand) 0.41 0.12 h)` | `#bcb1f1` | `hsl(250deg 50% 42%)` |
114
+ | `--border-3-brand` | `oklch(from var(--anta-seed-brand) 0.86 0.055 h)` | `oklch(from var(--anta-seed-brand) 0.33 0.09 h)` | `#d2cbf6` | `hsl(252.63deg 47.74% 30%)` |
115
+ | `--border-4-brand` | `oklch(from var(--anta-seed-brand) 0.9 0.04 h)` | `oklch(from var(--anta-seed-brand) 0.26 0.06 h)` | `#ddd8f8` | `hsl(249.8deg 39.84% 19%)` |
116
+ | `--border-5-brand` | `oklch(from var(--anta-seed-brand) 0.935 0.028 h)` | `oklch(from var(--anta-seed-brand) 0.21 0.045 h)` | `#e9e5fa` | `hsl(249deg 39.22% 14%)` |
117
+ | `--border-1-info` | `oklch(from var(--anta-seed-info) 0.67 0.13 h)` | `oklch(from var(--anta-seed-info) 0.52 0.15 h)` | `#56a1e1` | `hsl(207.82deg 70.2% 40%)` |
118
+ | `--border-2-info` | `oklch(from var(--anta-seed-info) 0.8 0.09 h)` | `oklch(from var(--anta-seed-info) 0.41 0.12 h)` | `#93c5ec` | `hsl(207.77deg 69.94% 29%)` |
119
+ | `--border-3-info` | `oklch(from var(--anta-seed-info) 0.86 0.055 h)` | `oklch(from var(--anta-seed-info) 0.33 0.09 h)` | `#bad6f3` | `hsl(208.04deg 69.93% 21%)` |
120
+ | `--border-4-info` | `oklch(from var(--anta-seed-info) 0.9 0.04 h)` | `oklch(from var(--anta-seed-info) 0.26 0.06 h)` | `#cfe3f7` | `hsl(208.52deg 62.89% 14%)` |
121
+ | `--border-5-info` | `oklch(from var(--anta-seed-info) 0.935 0.028 h)` | `oklch(from var(--anta-seed-info) 0.21 0.045 h)` | `#e1eefa` | `hsl(207.78deg 65.85% 10.5%)` |
122
+ | `--border-1-success` | `oklch(from var(--anta-seed-success) 0.67 0.13 h)` | `oklch(from var(--anta-seed-success) 0.52 0.15 h)` | `#44c169` | `hsl(138.18deg 49.75% 29%)` |
123
+ | `--border-2-success` | `oklch(from var(--anta-seed-success) 0.8 0.09 h)` | `oklch(from var(--anta-seed-success) 0.41 0.12 h)` | `#88d7a0` | `hsl(138.26deg 50.36% 20%)` |
124
+ | `--border-3-success` | `oklch(from var(--anta-seed-success) 0.86 0.055 h)` | `oklch(from var(--anta-seed-success) 0.33 0.09 h)` | `#b3e5c2` | `hsl(137.7deg 49.59% 16%)` |
125
+ | `--border-4-success` | `oklch(from var(--anta-seed-success) 0.9 0.04 h)` | `oklch(from var(--anta-seed-success) 0.26 0.06 h)` | `#c6ecd1` | `hsl(138.46deg 52% 10%)` |
126
+ | `--border-5-success` | `oklch(from var(--anta-seed-success) 0.935 0.028 h)` | `oklch(from var(--anta-seed-success) 0.21 0.045 h)` | `#d9f2e0` | `hsl(138.86deg 53.85% 7.5%)` |
127
+ | `--border-1-warning` | `oklch(from var(--anta-seed-warning) 0.67 0.13 h)` | `oklch(from var(--anta-seed-warning) 0.52 0.15 h)` | `#d88118` | `hsl(32.13deg 80.31% 34%)` |
128
+ | `--border-2-warning` | `oklch(from var(--anta-seed-warning) 0.8 0.09 h)` | `oklch(from var(--anta-seed-warning) 0.41 0.12 h)` | `#edb25a` | `hsl(27.93deg 84.06% 24%)` |
129
+ | `--border-3-warning` | `oklch(from var(--anta-seed-warning) 0.86 0.055 h)` | `oklch(from var(--anta-seed-warning) 0.33 0.09 h)` | `#f3cc91` | `hsl(30deg 79.66% 17%)` |
130
+ | `--border-4-warning` | `oklch(from var(--anta-seed-warning) 0.9 0.04 h)` | `oklch(from var(--anta-seed-warning) 0.26 0.06 h)` | `#f6dbb1` | `hsl(28.75deg 63.16% 12%)` |
131
+ | `--border-5-warning` | `oklch(from var(--anta-seed-warning) 0.935 0.028 h)` | `oklch(from var(--anta-seed-warning) 0.21 0.045 h)` | `#f9e7cd` | `hsl(28.64deg 66.67% 9%)` |
132
+ | `--border-1-critical` | `oklch(from var(--anta-seed-critical) 0.67 0.13 h)` | `oklch(from var(--anta-seed-critical) 0.52 0.15 h)` | `#e56c6c` | `hsl(0deg 56% 46%)` |
133
+ | `--border-2-critical` | `oklch(from var(--anta-seed-critical) 0.8 0.09 h)` | `oklch(from var(--anta-seed-critical) 0.41 0.12 h)` | `#efa4a4` | `hsl(0.42deg 63% 30%)` |
134
+ | `--border-3-critical` | `oklch(from var(--anta-seed-critical) 0.86 0.055 h)` | `oklch(from var(--anta-seed-critical) 0.33 0.09 h)` | `#f4c2c2` | `hsl(0deg 62.21% 23%)` |
135
+ | `--border-4-critical` | `oklch(from var(--anta-seed-critical) 0.9 0.04 h)` | `oklch(from var(--anta-seed-critical) 0.26 0.06 h)` | `#f7d4d4` | `hsl(359.13deg 59% 15%)` |
136
+ | `--border-5-critical` | `oklch(from var(--anta-seed-critical) 0.935 0.028 h)` | `oklch(from var(--anta-seed-critical) 0.21 0.045 h)` | `#fae5e5` | `hsl(359.06deg 63% 11%)` |
137
+
138
+ ### Link and focus values
139
+
140
+ | Token | Default light | Default dark | Reference light | Reference dark |
141
+ | --- | --- | --- | --- | --- |
142
+ | `--link-color` | `#1466d4` | `#7baee9` | Uses default | Uses default |
143
+ | `--link-color-hover` | `#2674e6` | `#90bdee` | Uses default | Uses default |
144
+ | `--focus-ring` | `oklch(0.55 0.2 284.15)` | `#a897fc` | `oklch(0.55 0.2 284.15)` | `#a897fc` |
145
+
5
146
  ## Custom semantic tokens
6
147
 
7
148
  Because the numeric tokens are role-free, the convenient pattern is to alias them to **semantic tokens** that describe how *your* app uses each surface. Define the names once, then reference those instead of the raw numbers. For example: