@antadesign/anta 0.3.17 → 0.3.18
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/README.md +1 -1
- package/dist/components/Loader.d.ts +39 -0
- package/dist/components/Loader.js +33 -0
- package/dist/components/Progress.d.ts +17 -8
- package/dist/components/Progress.js +12 -9
- package/dist/elements/a-button.css +1 -1
- package/dist/elements/a-icon.d.ts +1 -0
- package/dist/elements/a-icon.js +1 -0
- package/dist/elements/a-loader.css +1 -0
- package/dist/elements/a-loader.d.ts +12 -0
- package/dist/elements/a-loader.js +15 -0
- package/dist/elements/a-progress.css +1 -1
- package/dist/elements/a-progress.js +32 -2
- package/dist/elements/index.d.ts +1 -0
- package/dist/elements/index.js +3 -0
- package/dist/general_types.d.ts +25 -2
- package/dist/index.d.ts +6 -1
- package/dist/index.js +2 -0
- package/dist/jsx-runtime.d.ts +2 -1
- package/dist/reset.css +1 -1
- package/dist/theme-anta.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -32,7 +32,7 @@ recommended; the reference theme is optional.
|
|
|
32
32
|
| Import | Provides | Skip if… |
|
|
33
33
|
|---|---|---|
|
|
34
34
|
| `@antadesign/anta/tokens.css` | Six seed tokens, derived role scales (`--bg-1…5`, `--text-1…5`, `--border-1…5`), `.dark`, the 15px root size, and layer order. Override a seed to reskin its tone. | You provide those variables. |
|
|
35
|
-
| `@antadesign/anta/reset.css` | A small reset plus Anta's heading, list, and link typography in `@layer anta`. | You use another reset and typography. |
|
|
35
|
+
| `@antadesign/anta/reset.css` | A small reset plus Anta's focus, heading, list, and link typography in `@layer anta`. | You use another reset and typography. |
|
|
36
36
|
| `@antadesign/anta/elements` | Registers every `<a-*>` element and its CSS. Per-element entries register one; see [Registering elements](#registering-elements). | You render only on the server or register elements individually. |
|
|
37
37
|
| `@antadesign/anta` | Typed React/Preact wrappers such as `Progress`, `Text`, and `Icon`. | You write `<a-*>` elements directly. |
|
|
38
38
|
| `@antadesign/anta/theme-anta.css` *(optional)* | The hand-tuned reference palette. Import last to replace the seed-derived default. | You want the seed-derived or your own palette. |
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import type { BaseProps } from '../general_types';
|
|
2
|
+
export interface LoaderProps extends BaseProps {
|
|
3
|
+
/** Current progress value. Omit this prop, or pass `false`, for an
|
|
4
|
+
* indeterminate rotating gradient. */
|
|
5
|
+
value?: number | false;
|
|
6
|
+
/** Upper bound of the range.
|
|
7
|
+
* @defaultValue 100 */
|
|
8
|
+
max?: number;
|
|
9
|
+
/** Width and height in pixels.
|
|
10
|
+
* @defaultValue 16 */
|
|
11
|
+
size?: number;
|
|
12
|
+
/** Seconds per rotation. Pass a positive number.
|
|
13
|
+
* @defaultValue 0.75 */
|
|
14
|
+
speed?: number;
|
|
15
|
+
/** Accessible name for a standalone loader. Without a label, the loader is
|
|
16
|
+
* decorative so nearby status text remains the single announcement. */
|
|
17
|
+
label?: string;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Animated, icon-sized feedback for loading work.
|
|
21
|
+
*
|
|
22
|
+
* Omit `value` for the rotating gradient. Pass `value` to fill a static circle
|
|
23
|
+
* to the current proportion. `shape="loader"` provides the indeterminate
|
|
24
|
+
* visual for string-only icon props such as `Button`'s `icon`.
|
|
25
|
+
*
|
|
26
|
+
* Requires `@antadesign/anta/elements` to be imported (client-side only) to
|
|
27
|
+
* register the underlying custom element.
|
|
28
|
+
*
|
|
29
|
+
* @example Indeterminate
|
|
30
|
+
* ```tsx
|
|
31
|
+
* <Loader label="Loading results" />
|
|
32
|
+
* ```
|
|
33
|
+
*
|
|
34
|
+
* @example Determinate
|
|
35
|
+
* ```tsx
|
|
36
|
+
* <Loader value={42} label="Uploading files" />
|
|
37
|
+
* ```
|
|
38
|
+
*/
|
|
39
|
+
export declare const Loader: ({ value, max, size, speed, label, className, style, ...rest }: LoaderProps) => any;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx } from "@antadesign/anta/jsx-runtime";
|
|
2
|
+
const Loader = ({ value, max = 100, size, speed, label, className, style, ...rest }) => {
|
|
3
|
+
const determinate = typeof value === "number" && Number.isFinite(value);
|
|
4
|
+
const safeMax = Number.isFinite(max) && max > 0 ? max : 100;
|
|
5
|
+
const clampedValue = determinate ? Math.min(safeMax, Math.max(0, value)) : void 0;
|
|
6
|
+
const percentage = clampedValue != null ? clampedValue / safeMax * 100 : void 0;
|
|
7
|
+
const computedStyle = {
|
|
8
|
+
...style,
|
|
9
|
+
...size != null ? { ["--loader-size"]: `${size}px` } : {},
|
|
10
|
+
...!determinate && speed != null && Number.isFinite(speed) && speed > 0 ? { ["--loader-speed"]: `${speed}s` } : {},
|
|
11
|
+
...percentage != null ? { ["--loader-value"]: `${percentage}%` } : {}
|
|
12
|
+
};
|
|
13
|
+
const a11y = label != null ? {
|
|
14
|
+
role: "progressbar",
|
|
15
|
+
"aria-label": label,
|
|
16
|
+
"aria-valuenow": determinate ? clampedValue : void 0,
|
|
17
|
+
"aria-valuemin": determinate ? 0 : void 0,
|
|
18
|
+
"aria-valuemax": determinate ? safeMax : void 0
|
|
19
|
+
} : { "aria-hidden": "true" };
|
|
20
|
+
return /* @__PURE__ */ jsx(
|
|
21
|
+
"a-loader",
|
|
22
|
+
{
|
|
23
|
+
...determinate ? { value: clampedValue } : {},
|
|
24
|
+
class: className,
|
|
25
|
+
style: computedStyle,
|
|
26
|
+
...a11y,
|
|
27
|
+
...rest
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
};
|
|
31
|
+
export {
|
|
32
|
+
Loader
|
|
33
|
+
};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type { BaseProps } from "../general_types";
|
|
2
2
|
export interface ProgressProps extends BaseProps {
|
|
3
|
-
/** Current progress value.
|
|
4
|
-
|
|
3
|
+
/** Current progress value. Omit this prop, or pass `false`, to show
|
|
4
|
+
* indeterminate progress. Negative values are clamped to 0. */
|
|
5
|
+
value?: number | false;
|
|
5
6
|
/** Upper bound of the range.
|
|
6
7
|
* @defaultValue 100 */
|
|
7
8
|
max?: number;
|
|
@@ -10,20 +11,23 @@ export interface ProgressProps extends BaseProps {
|
|
|
10
11
|
* light/dark automatically.
|
|
11
12
|
* @defaultValue 'neutral' */
|
|
12
13
|
tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
|
|
14
|
+
/** Size variant. Scales the track and the default label row together.
|
|
15
|
+
* @defaultValue medium */
|
|
16
|
+
size?: 'small' | 'medium' | 'large';
|
|
13
17
|
/** Fully-round track (`border-radius: 999px`); the fill is clipped to it. Pass a
|
|
14
18
|
* `number` (px) or a CSS length string for a custom radius. */
|
|
15
19
|
round?: boolean | number | string;
|
|
16
|
-
/** Text label displayed after the percentage
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
+
/** Text label displayed after the percentage, or on its own for
|
|
21
|
+
* indeterminate progress. When you provide custom `children` (which replace
|
|
22
|
+
* the default label row), `label` is no longer rendered — but it still
|
|
23
|
+
* supplies the progressbar's accessible name. */
|
|
20
24
|
label?: string;
|
|
21
25
|
/** Right-aligned hint text (e.g. "3 of 7"). Like `label`, it's not rendered
|
|
22
26
|
* when custom `children` are provided but still feeds the accessible name. */
|
|
23
27
|
hint?: string;
|
|
24
28
|
}
|
|
25
29
|
/**
|
|
26
|
-
* Progress indicator for
|
|
30
|
+
* Progress indicator for task completion and indeterminate work.
|
|
27
31
|
*
|
|
28
32
|
* Renders an `<a-progress>` web component with an optional label area
|
|
29
33
|
* showing percentage, text label, and hint.
|
|
@@ -44,9 +48,14 @@ export interface ProgressProps extends BaseProps {
|
|
|
44
48
|
* <Progress value={42} label="Uploading files..." hint="3 of 7" />
|
|
45
49
|
* ```
|
|
46
50
|
*
|
|
51
|
+
* @example Indeterminate
|
|
52
|
+
* ```tsx
|
|
53
|
+
* <Progress label="Preparing upload..." />
|
|
54
|
+
* ```
|
|
55
|
+
*
|
|
47
56
|
* @example Info tone
|
|
48
57
|
* ```tsx
|
|
49
58
|
* <Progress value={75} tone="info" label="Processing" />
|
|
50
59
|
* ```
|
|
51
60
|
*/
|
|
52
|
-
export declare const Progress: ({ value, max, tone, round, label, hint, className, style, children, ...rest }: ProgressProps) => any;
|
|
61
|
+
export declare const Progress: ({ value, max, tone, size, round, label, hint, className, style, children, ...rest }: ProgressProps) => any;
|
|
@@ -1,26 +1,29 @@
|
|
|
1
1
|
import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
|
|
2
2
|
import { hasChildren, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
|
|
3
|
-
const Progress = ({ value, max = 100, tone, round, label, hint, className, style, children, ...rest }) => {
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
const
|
|
3
|
+
const Progress = ({ value, max = 100, tone, size, round, label, hint, className, style, children, ...rest }) => {
|
|
4
|
+
const indeterminate = value == null || value === false;
|
|
5
|
+
const numericValue = typeof value === "number" ? value : 0;
|
|
6
|
+
const percent = max > 0 ? Math.round(Math.min(100, Math.max(0, numericValue / max * 100))) : 0;
|
|
7
|
+
const clampedValue = max > 0 ? Math.min(max, Math.max(0, numericValue)) : 0;
|
|
8
|
+
const ariaLabel = [label, !indeterminate && `${percent}%`, hint].filter(Boolean).join(" \xB7 ") || (indeterminate ? "Loading" : void 0);
|
|
7
9
|
return /* @__PURE__ */ jsx(
|
|
8
10
|
"a-progress",
|
|
9
11
|
{
|
|
10
|
-
value,
|
|
12
|
+
value: indeterminate ? false : numericValue,
|
|
11
13
|
max,
|
|
12
14
|
tone: tone && tone !== "neutral" ? tone : void 0,
|
|
15
|
+
size: size && size !== "medium" ? size : void 0,
|
|
13
16
|
round: roundAttr(round),
|
|
14
17
|
role: "progressbar",
|
|
15
|
-
"aria-valuenow": clampedValue,
|
|
16
|
-
"aria-valuemin": 0,
|
|
17
|
-
"aria-valuemax": max,
|
|
18
|
+
"aria-valuenow": indeterminate ? void 0 : clampedValue,
|
|
19
|
+
"aria-valuemin": indeterminate ? void 0 : 0,
|
|
20
|
+
"aria-valuemax": indeterminate ? void 0 : max,
|
|
18
21
|
"aria-label": ariaLabel,
|
|
19
22
|
class: className,
|
|
20
23
|
style: roundStyle(round, "--progress-round", toneStyle(tone, "--progress-tone-source", style)),
|
|
21
24
|
...rest,
|
|
22
25
|
children: hasChildren(children) ? children : /* @__PURE__ */ jsxs("a-progress-label", { children: [
|
|
23
|
-
/* @__PURE__ */ jsxs("a-progress-number", { children: [
|
|
26
|
+
!indeterminate && /* @__PURE__ */ jsxs("a-progress-number", { children: [
|
|
24
27
|
percent,
|
|
25
28
|
"%"
|
|
26
29
|
] }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer anta{a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){--button-primary-fg: #ffffff;--bg-primary-disabled: #ece9ec;--bg-secondary-disabled: #f6f4f6;--fg-disabled-primary: #afa9b1;--fg-disabled: #afa9b1;--button-loading-stripe: 14px;--button-loading-stripe-gap: 16px;--button-loading-period: 30px;--button-loading-angle: 125deg;--button-loading-x-period: calc( var(--button-loading-period) / cos(var(--button-loading-angle) - 90deg) );--button-loading-opacity: .15;--button-loading-blur: 2.5px;--_src: var(--anta-seed-neutral);--_tone-pl-rest: .5;--_tone-pl-hover: .45;--_tone-pl-active: .4;--_tone-pl-c: .02;--_tone-fg-l: .46;--_tone-fg-strong-l: .4;--_tone-fg-c: .008;--_tone-fg-shift: .05;--_tone-bg-l: .54;--_tone-bg-c: .03;--_tone-a-rest: .1;--_tone-a-hover: .15;--_tone-a-active: .2;--_tone-quat-hover-l: .38;--_tone-quat-rest-a: .85;--button-bg-primary-rest: oklch(from var(--_src) var(--_tone-pl-rest) var(--_tone-pl-c) h);--button-bg-primary-hover: oklch(from var(--_src) var(--_tone-pl-hover) var(--_tone-pl-c) h);--button-bg-primary-active: oklch(from var(--_src) var(--_tone-pl-active) var(--_tone-pl-c) h);--button-fg-primary-rest: var(--button-primary-fg);--button-fg-secondary-rest: oklch(from var(--_src) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-secondary-hover: oklch(from var(--_src) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-fg-secondary-l-shift: var(--_tone-fg-shift);--button-fg-tertiary-rest: oklch(from var(--_src) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-tertiary-hover: oklch(from var(--_src) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-bg-tertiary-hover: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-rest));--button-bg-tertiary-active: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-hover));--button-fg-quaternary-rest: oklch(from var(--_src) var(--_tone-fg-l) var(--_tone-fg-c) h / var(--_tone-quat-rest-a));--button-fg-quaternary-hover: oklch(from var(--_src) var(--_tone-quat-hover-l) var(--_tone-fg-c) h);--button-bg-secondary-rest: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-rest));--button-bg-secondary-hover: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-hover));--button-bg-secondary-active: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-active));--_fs: 15px;--_lh: 20px;--_pb: 1px;--button-padding-x: 9px;--button-padding-y: calc((8px - var(--_pb)) / 2);--button-timing-in: 75ms ease-in;--button-timing-active: 50ms linear;--button-timing-out: .15s ease-out;--button-loading-duration: .5s}a-button[round],a[role=button][data-anta][round],button[data-anta][round],input[data-anta]:is([type=reset],[type=submit])[round]{--button-round: attr(round type(<length>), 999px);border-radius:var(--button-round, 999px)}a-button[tone]:not([tone=""],[tone=neutral]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral]),button[data-anta][tone]:not([tone=""],[tone=neutral]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral]){--_tone-pl-rest: .51;--_tone-pl-hover: .46;--_tone-pl-active: .41;--_tone-pl-c: .17;--_tone-fg-l: .46;--_tone-fg-strong-l: .4;--_tone-fg-c: .17;--_tone-fg-shift: .05;--_tone-bg-l: .54;--_tone-bg-c: .17;--_tone-a-rest: .1;--_tone-a-hover: .15;--_tone-a-active: .2;--_tone-quat-hover-l: .38;--_tone-quat-rest-a: .85}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]{--_src: var(--anta-seed-brand)}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]{--_src: var(--anta-seed-info)}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]{--_src: var(--anta-seed-success)}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]{--_src: var(--anta-seed-warning)}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]{--_src: var(--anta-seed-critical)}a-button[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),button[data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_src: var(--button-tone-source, attr(tone type(<color>), transparent))}.dark a-button,.dark a[role=button][data-anta],.dark button[data-anta],.dark input[data-anta]:is([type=reset],[type=submit]){--bg-primary-disabled: #272329;--bg-secondary-disabled: #1d1a1e;--fg-disabled-primary: #776e77;--fg-disabled: #635b65;--_tone-pl-rest: .4;--_tone-pl-hover: .44;--_tone-pl-active: .48;--_tone-pl-c: .015;--_tone-fg-l: .86;--_tone-fg-strong-l: .86;--_tone-fg-c: .015;--_tone-fg-shift: 0;--_tone-bg-l: .44;--_tone-bg-c: .01;--_tone-a-rest: .24;--_tone-a-hover: .34;--_tone-a-active: .44;--_tone-quat-hover-l: .9;--_tone-quat-rest-a: .85}.dark a-button[tone]:not([tone=""],[tone=neutral]),.dark a[role=button][data-anta][tone]:not([tone=""],[tone=neutral]),.dark button[data-anta][tone]:not([tone=""],[tone=neutral]),.dark input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral]){--_tone-pl-rest: .4;--_tone-pl-hover: .44;--_tone-pl-active: .48;--_tone-pl-c: .16;--_tone-fg-l: .86;--_tone-fg-strong-l: .86;--_tone-fg-c: .13;--_tone-fg-shift: 0;--_tone-bg-l: .58;--_tone-bg-c: .16;--_tone-a-rest: .215;--_tone-a-hover: .29;--_tone-a-active: .34;--_tone-quat-hover-l: .9;--_tone-quat-rest-a: .85}button[data-anta],input[data-anta]:is([type=reset],[type=submit]){box-sizing:border-box;margin:0;appearance:none;-webkit-appearance:none;border:none}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){user-select:none;display:inline-flex;align-items:center;gap:.5ch;overflow:hidden;cursor:pointer;&:has(>a-copy):not(:has(>a-icon)){cursor:copy}flex-shrink:0;color:var(--button-fg);background-color:var(--button-bg);border-radius:4px;text-decoration:none;box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 90%);font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-variation-settings:"wdth" 88,"slnt" 0,"ital" 0;font-feature-settings:"ss02","ss05","tnum";line-height:var(--_lh);letter-spacing:.05ch;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;max-width:100%;padding-inline:var(--button-padding-x);padding-block:var(--button-padding-y);min-height:28px;>a-button-label{display:inline-block;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0;line-height:var(--_lh);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}& a-icon{transition:color var(--button-timing-out)}transition:color var(--button-timing-out),background-color var(--button-timing-out);&:hover,&:focus-visible{transition:color var(--button-timing-in),background-color var(--button-timing-in);& a-icon{transition:color var(--button-timing-in)}}&:active,&[selected]{transition:color var(--button-timing-active),background-color var(--button-timing-active);& a-icon{transition:color var(--button-timing-active)}}&[disabled]{pointer-events:none;cursor:not-allowed;transition:none;& a-icon{transition:none}}&:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}&[priority=quaternary]{--button-timing-in: 0s;--button-timing-active: 0s;--button-timing-out: 0s}&[size=small]{--button-padding-x: 7px;--_fs: 13px;--_lh: 16px;--_pb: .5px;min-height:24px;& a-icon{--icon-size: 14px}}&[size=large]{--button-padding-x: 13px;--_fs: 17px;--_lh: 24px;--_pb: 1.5px;min-height:32px;& a-icon{--icon-size: 18px}}&[priority=tertiary],&[priority=quaternary]{&[underline=solid]{text-decoration:underline solid}&[underline=dashed]{text-decoration:underline dashed}&[underline=dotted]{text-decoration:underline dotted}&[underline]{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;&[selected]{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}}}}&[priority=quaternary][paddingless]{--button-padding-x: 0;--button-padding-y: 0;min-height:0}&:has(>a-icon):not(:has(>a-icon~a-icon)):not(:has(>:not(a-icon):not(a-tooltip):not(a-copy))){--button-padding-y: 5px;--button-padding-x: 5px;min-width:28px;justify-content:center;&[size=small]{--button-padding-y: 3px;--button-padding-x: 3px;min-width:24px}&[size=large]{--button-padding-y: 7px;--button-padding-x: 7px;min-width:32px}}&:is(:has(>a-icon:first-child),:has(>a-tooltip:first-child+a-icon)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip):not(a-copy))){padding-inline-start:max(0px,var(--button-padding-x) - 2px)}&:is(:has(>a-icon:last-child),:has(>a-icon+a-tooltip:last-child)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip):not(a-copy))){padding-inline-end:max(0px,var(--button-padding-x) - 2px)}&[loading]{position:relative;pointer-events:none;cursor:wait;&:before{content:"";position:absolute;top:0;bottom:0;left:calc(0px - var(--button-loading-x-period));right:0;pointer-events:none;background:repeating-linear-gradient(var(--button-loading-angle),transparent 0,transparent var(--button-loading-stripe-gap),currentColor var(--button-loading-stripe-gap),currentColor calc(var(--button-loading-stripe-gap) + var(--button-loading-stripe)));opacity:var(--button-loading-opacity);filter:blur(var(--button-loading-blur));will-change:transform;animation:btn-loading-slide var(--button-loading-duration) linear infinite;animation-delay:-9999s}}--button-fg: oklch(from var(--button-fg-secondary-rest) calc(l - var(--button-fg-secondary-l-shift)) c h);--button-bg: var(--button-bg-secondary-rest);@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}}&:active{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-active)}&[selected]{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}&[priority=primary]{--button-fg: var(--button-fg-primary-rest);--button-bg: var(--button-bg-primary-rest);box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-bg: var(--button-bg-primary-hover)}}&:active{--button-bg: var(--button-bg-primary-active)}&[selected]{--button-bg: var(--button-bg-primary-hover)}}&[priority=tertiary]{--button-fg: var(--button-fg-tertiary-rest);--button-bg: transparent;box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&:active{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-active)}&[selected]{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&[priority=quaternary]{--button-fg: var(--button-fg-quaternary-rest);--button-bg: transparent;box-shadow:none;font-weight:400;letter-spacing:.06ch;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-quaternary-hover)}}&:active{--button-fg: var(--button-fg-quaternary-rest)}&[selected]{--button-fg: var(--button-fg-quaternary-hover)}}&[selected]{box-shadow:inset 0 0 0 .5px currentColor}&[disabled]{background-color:var(--bg-secondary-disabled);color:var(--fg-disabled);&[priority=primary]{background-color:var(--bg-primary-disabled);color:var(--fg-disabled-primary)}&[priority=tertiary],&[priority=quaternary]{background-color:transparent;color:var(--fg-disabled)}}}@media(forced-colors:active){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])){--anta-forced-foreground: ButtonText;color:ButtonText;background-color:ButtonFace;border:1px solid ButtonText;box-shadow:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=primary]{--anta-forced-foreground: ButtonFace;color:ButtonFace;background-color:ButtonText;border-color:ButtonText}a-button:is([priority=primary],[selected]){forced-color-adjust:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]{--anta-forced-foreground: CanvasText;color:CanvasText;background-color:Canvas;border:0}@media(hover:hover)and (pointer:fine){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]:hover:not(:focus-visible){outline:1px solid ButtonText;outline-offset:0}}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=quaternary]{--anta-forced-foreground: LinkText;color:LinkText;background-color:ButtonFace;border:0;text-decoration:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[selected]{--anta-forced-foreground: HighlightText;color:HighlightText;background-color:Highlight;border-color:Highlight}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[disabled]{--anta-forced-foreground: GrayText;color:GrayText;background-color:Canvas;border-color:GrayText;text-decoration-color:GrayText}}}@keyframes btn-loading-slide{to{transform:translate(var(--button-loading-x-period))}}
|
|
1
|
+
@layer anta{a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){--button-primary-fg: #ffffff;--bg-primary-disabled: #ece9ec;--bg-secondary-disabled: #f6f4f6;--fg-disabled-primary: #afa9b1;--fg-disabled: #afa9b1;--button-loading-stripe: 14px;--button-loading-stripe-gap: 16px;--button-loading-period: calc( var(--button-loading-stripe) + var(--button-loading-stripe-gap) );--button-loading-angle: 125deg;--button-loading-x-period: calc( var(--button-loading-period) / cos(var(--button-loading-angle) - 90deg) );--button-loading-opacity: .15;--button-loading-blur: 5px;--_src: var(--anta-seed-neutral);--_tone-pl-rest: .5;--_tone-pl-hover: .45;--_tone-pl-active: .4;--_tone-pl-c: .02;--_tone-fg-l: .46;--_tone-fg-strong-l: .4;--_tone-fg-c: .008;--_tone-fg-shift: .05;--_tone-bg-l: .54;--_tone-bg-c: .03;--_tone-a-rest: .1;--_tone-a-hover: .15;--_tone-a-active: .2;--_tone-quat-hover-l: .38;--_tone-quat-rest-a: .85;--button-bg-primary-rest: oklch(from var(--_src) var(--_tone-pl-rest) var(--_tone-pl-c) h);--button-bg-primary-hover: oklch(from var(--_src) var(--_tone-pl-hover) var(--_tone-pl-c) h);--button-bg-primary-active: oklch(from var(--_src) var(--_tone-pl-active) var(--_tone-pl-c) h);--button-fg-primary-rest: var(--button-primary-fg);--button-fg-secondary-rest: oklch(from var(--_src) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-secondary-hover: oklch(from var(--_src) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-fg-secondary-l-shift: var(--_tone-fg-shift);--button-fg-tertiary-rest: oklch(from var(--_src) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-tertiary-hover: oklch(from var(--_src) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-bg-tertiary-hover: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-rest));--button-bg-tertiary-active: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-hover));--button-fg-quaternary-rest: oklch(from var(--_src) var(--_tone-fg-l) var(--_tone-fg-c) h / var(--_tone-quat-rest-a));--button-fg-quaternary-hover: oklch(from var(--_src) var(--_tone-quat-hover-l) var(--_tone-fg-c) h);--button-bg-secondary-rest: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-rest));--button-bg-secondary-hover: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-hover));--button-bg-secondary-active: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-active));--_fs: 15px;--_lh: 20px;--_pb: 1px;--button-padding-x: 9px;--button-padding-y: calc((8px - var(--_pb)) / 2);--button-timing-in: 75ms ease-in;--button-timing-active: 50ms linear;--button-timing-out: .15s ease-out;--button-loading-duration: .5s}a-button[round],a[role=button][data-anta][round],button[data-anta][round],input[data-anta]:is([type=reset],[type=submit])[round]{--button-round: attr(round type(<length>), 999px);border-radius:var(--button-round, 999px)}a-button[tone]:not([tone=""],[tone=neutral]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral]),button[data-anta][tone]:not([tone=""],[tone=neutral]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral]){--_tone-pl-rest: .51;--_tone-pl-hover: .46;--_tone-pl-active: .41;--_tone-pl-c: .17;--_tone-fg-l: .46;--_tone-fg-strong-l: .4;--_tone-fg-c: .17;--_tone-fg-shift: .05;--_tone-bg-l: .54;--_tone-bg-c: .17;--_tone-a-rest: .1;--_tone-a-hover: .15;--_tone-a-active: .2;--_tone-quat-hover-l: .38;--_tone-quat-rest-a: .85}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]{--_src: var(--anta-seed-brand)}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]{--_src: var(--anta-seed-info)}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]{--_src: var(--anta-seed-success)}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]{--_src: var(--anta-seed-warning)}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]{--_src: var(--anta-seed-critical)}a-button[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),button[data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_src: var(--button-tone-source, attr(tone type(<color>), transparent))}.dark a-button,.dark a[role=button][data-anta],.dark button[data-anta],.dark input[data-anta]:is([type=reset],[type=submit]){--bg-primary-disabled: #272329;--bg-secondary-disabled: #1d1a1e;--fg-disabled-primary: #776e77;--fg-disabled: #635b65;--_tone-pl-rest: .4;--_tone-pl-hover: .44;--_tone-pl-active: .48;--_tone-pl-c: .015;--_tone-fg-l: .86;--_tone-fg-strong-l: .86;--_tone-fg-c: .015;--_tone-fg-shift: 0;--_tone-bg-l: .44;--_tone-bg-c: .01;--_tone-a-rest: .24;--_tone-a-hover: .34;--_tone-a-active: .44;--_tone-quat-hover-l: .9;--_tone-quat-rest-a: .85}.dark a-button[tone]:not([tone=""],[tone=neutral]),.dark a[role=button][data-anta][tone]:not([tone=""],[tone=neutral]),.dark button[data-anta][tone]:not([tone=""],[tone=neutral]),.dark input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral]){--_tone-pl-rest: .4;--_tone-pl-hover: .44;--_tone-pl-active: .48;--_tone-pl-c: .16;--_tone-fg-l: .86;--_tone-fg-strong-l: .86;--_tone-fg-c: .13;--_tone-fg-shift: 0;--_tone-bg-l: .58;--_tone-bg-c: .16;--_tone-a-rest: .215;--_tone-a-hover: .29;--_tone-a-active: .34;--_tone-quat-hover-l: .9;--_tone-quat-rest-a: .85}button[data-anta],input[data-anta]:is([type=reset],[type=submit]){box-sizing:border-box;margin:0;appearance:none;-webkit-appearance:none;border:none}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){user-select:none;display:inline-flex;align-items:center;gap:.5ch;overflow:hidden;cursor:pointer;&:has(>a-copy):not(:has(>a-icon)){cursor:copy}flex-shrink:0;color:var(--button-fg);background-color:var(--button-bg);border-radius:4px;text-decoration:none;box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 90%);font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-variation-settings:"wdth" 88,"slnt" 0,"ital" 0;font-feature-settings:"ss02","ss05","tnum";line-height:var(--_lh);letter-spacing:.05ch;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;max-width:100%;padding-inline:var(--button-padding-x);padding-block:var(--button-padding-y);min-height:28px;>a-button-label{display:inline-block;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0;line-height:var(--_lh);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}& a-icon{transition:color var(--button-timing-out)}transition:color var(--button-timing-out),background-color var(--button-timing-out);&:hover,&:focus-visible{transition:color var(--button-timing-in),background-color var(--button-timing-in);& a-icon{transition:color var(--button-timing-in)}}&:active,&[selected]{transition:color var(--button-timing-active),background-color var(--button-timing-active);& a-icon{transition:color var(--button-timing-active)}}&[disabled]{pointer-events:none;cursor:not-allowed;transition:none;& a-icon{transition:none}}&:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}&[priority=quaternary]{--button-timing-in: 0s;--button-timing-active: 0s;--button-timing-out: 0s}&[size=small]{--button-padding-x: 7px;--_fs: 13px;--_lh: 16px;--_pb: .5px;min-height:24px;& a-icon{--icon-size: 14px}}&[size=large]{--button-padding-x: 13px;--_fs: 17px;--_lh: 24px;--_pb: 1.5px;min-height:32px;& a-icon{--icon-size: 18px}}&[priority=tertiary],&[priority=quaternary]{&[underline=solid]{text-decoration:underline solid}&[underline=dashed]{text-decoration:underline dashed}&[underline=dotted]{text-decoration:underline dotted}&[underline]{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;&[selected]{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}}}}&[priority=quaternary][paddingless]{--button-padding-x: 0;--button-padding-y: 0;min-height:0}&:has(>a-icon):not(:has(>a-icon~a-icon)):not(:has(>:not(a-icon):not(a-tooltip):not(a-copy))){--button-padding-y: 5px;--button-padding-x: 5px;min-width:28px;justify-content:center;&[size=small]{--button-padding-y: 3px;--button-padding-x: 3px;min-width:24px}&[size=large]{--button-padding-y: 7px;--button-padding-x: 7px;min-width:32px}}&:is(:has(>a-icon:first-child),:has(>a-tooltip:first-child+a-icon)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip):not(a-copy))){padding-inline-start:max(0px,var(--button-padding-x) - 2px)}&:is(:has(>a-icon:last-child),:has(>a-icon+a-tooltip:last-child)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip):not(a-copy))){padding-inline-end:max(0px,var(--button-padding-x) - 2px)}&[loading]{position:relative;pointer-events:none;cursor:wait;&:before{content:"";position:absolute;top:0;bottom:0;left:calc(0px - var(--button-loading-x-period));right:0;pointer-events:none;background:repeating-linear-gradient(var(--button-loading-angle),transparent 0,transparent var(--button-loading-stripe-gap),currentColor var(--button-loading-stripe-gap),currentColor calc(var(--button-loading-stripe-gap) + var(--button-loading-stripe)));opacity:var(--button-loading-opacity);filter:blur(var(--button-loading-blur));will-change:transform;animation:btn-loading-slide var(--button-loading-duration) linear infinite;animation-delay:-9999s}}--button-fg: oklch(from var(--button-fg-secondary-rest) calc(l - var(--button-fg-secondary-l-shift)) c h);--button-bg: var(--button-bg-secondary-rest);@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}}&:active{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-active)}&[selected]{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}&[priority=primary]{--button-fg: var(--button-fg-primary-rest);--button-bg: var(--button-bg-primary-rest);box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-bg: var(--button-bg-primary-hover)}}&:active{--button-bg: var(--button-bg-primary-active)}&[selected]{--button-bg: var(--button-bg-primary-hover)}}&[priority=tertiary]{--button-fg: var(--button-fg-tertiary-rest);--button-bg: transparent;box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&:active{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-active)}&[selected]{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&[priority=quaternary]{--button-fg: var(--button-fg-quaternary-rest);--button-bg: transparent;box-shadow:none;font-weight:400;letter-spacing:.06ch;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-quaternary-hover)}}&:active{--button-fg: var(--button-fg-quaternary-rest)}&[selected]{--button-fg: var(--button-fg-quaternary-hover)}}&[selected]{box-shadow:inset 0 0 0 .5px currentColor}&[disabled]{background-color:var(--bg-secondary-disabled);color:var(--fg-disabled);&[priority=primary]{background-color:var(--bg-primary-disabled);color:var(--fg-disabled-primary)}&[priority=tertiary],&[priority=quaternary]{background-color:transparent;color:var(--fg-disabled)}}}@media(forced-colors:active){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])){--anta-forced-foreground: ButtonText;color:ButtonText;background-color:ButtonFace;border:1px solid ButtonText;box-shadow:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=primary]{--anta-forced-foreground: ButtonFace;color:ButtonFace;background-color:ButtonText;border-color:ButtonText}a-button:is([priority=primary],[selected]){forced-color-adjust:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]{--anta-forced-foreground: CanvasText;color:CanvasText;background-color:Canvas;border:0}@media(hover:hover)and (pointer:fine){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]:hover:not(:focus-visible){outline:1px solid ButtonText;outline-offset:0}}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=quaternary]{--anta-forced-foreground: LinkText;color:LinkText;background-color:ButtonFace;border:0;text-decoration:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[selected]{--anta-forced-foreground: HighlightText;color:HighlightText;background-color:Highlight;border-color:Highlight}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[disabled]{--anta-forced-foreground: GrayText;color:GrayText;background-color:Canvas;border-color:GrayText;text-decoration-color:GrayText}}}@keyframes btn-loading-slide{to{transform:translate(var(--button-loading-x-period))}}
|
package/dist/elements/a-icon.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer anta{a-loader{color:var(--text-3)}:where(a-loader,a-icon[shape=loader]){display:inline-block;inline-size:var(--loader-size, var(--icon-size, 16px));block-size:var(--loader-size, var(--icon-size, 16px));flex:none;vertical-align:middle;border-radius:50%;animation:loader-spin var(--loader-speed, .75s) linear infinite;animation-delay:-9999s}a-loader{background:conic-gradient(from 0deg,color-mix(in oklch,currentColor 6%,transparent),color-mix(in oklch,currentColor 70%,transparent))}a-icon[shape=loader]{-webkit-mask-image:conic-gradient(from 0deg,color-mix(in oklch,#000 6%,transparent),color-mix(in oklch,#000 70%,transparent));mask-image:conic-gradient(from 0deg,color-mix(in oklch,#000 6%,transparent),color-mix(in oklch,#000 75%,transparent))}a-loader[value]{background:conic-gradient(from 0deg,color-mix(in oklch,currentColor 60%,transparent) 0,color-mix(in oklch,currentColor 75%,transparent) var(--loader-value, 0%),color-mix(in oklch,currentColor 6%,transparent) var(--loader-value, 0%) 100%);animation:none}@keyframes loader-spin{to{transform:rotate(1turn)}}@media(forced-colors:active){a-loader{forced-color-adjust:none;color:CanvasText}}}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { HTMLElementBase } from '../anta_helpers';
|
|
2
|
+
import './a-loader.css';
|
|
3
|
+
/**
|
|
4
|
+
* `<a-loader>` — a declarative, icon-sized loading indicator.
|
|
5
|
+
*
|
|
6
|
+
* Its visual treatment is entirely external CSS. The wrapper supplies
|
|
7
|
+
* `--loader-value` for a determinate ring; no shadow DOM or element state is
|
|
8
|
+
* needed.
|
|
9
|
+
*/
|
|
10
|
+
export declare class ALoaderElement extends HTMLElementBase {
|
|
11
|
+
}
|
|
12
|
+
export declare function register_a_loader(): void;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { HTMLElementBase } from "../anta_helpers";
|
|
2
|
+
import "./a-loader.css";
|
|
3
|
+
class ALoaderElement extends HTMLElementBase {
|
|
4
|
+
}
|
|
5
|
+
function register_a_loader() {
|
|
6
|
+
if (typeof customElements === "undefined") return;
|
|
7
|
+
if (!customElements.get("a-loader")) {
|
|
8
|
+
customElements.define("a-loader", ALoaderElement);
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
register_a_loader();
|
|
12
|
+
export {
|
|
13
|
+
ALoaderElement,
|
|
14
|
+
register_a_loader
|
|
15
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer anta{a-progress{--progress-bg: var(--bg-4);--progress-border-color: var(--border-4);--progress-indicator-bg: var(--bg-5);--progress-indicator-edge: linear-gradient( 90deg, var(--progress-indicator-bg) 0%, var(--progress-border-color) 100% );--progress-text-color: var(--text-2);--progress-hint-color: var(--text-3)
|
|
1
|
+
@layer anta{:where(a-progress,progress[data-anta]){--progress-bg: var(--bg-4);--progress-border-color: var(--border-4);--progress-indicator-bg: var(--bg-5);--progress-indicator-edge: linear-gradient( 90deg, var(--progress-indicator-bg) 0%, var(--progress-border-color) 100% );--progress-text-color: var(--text-2);--progress-hint-color: var(--text-3);--progress-loading-angle: 125deg;--progress-loading-x-period: calc(40px + 5cqi) ;--progress-loading-period: calc( var(--progress-loading-x-period) * cos(var(--progress-loading-angle) - 90deg) );--progress-loading-stripe: calc(var(--progress-loading-period) * 2 / 5);--progress-loading-stripe-gap: calc(var(--progress-loading-period) * 3 / 5);--progress-loading-opacity: .15;--progress-loading-blur: clamp(8px, 2cqi, 16px);--progress-loading-duration: .5s;--progress-padding-block: 4px;--progress-padding-inline: 8px;--progress-min-height: 8px;--progress-label-size: 13px;--progress-label-line-height: 16px}a-progress{display:block;container-type:inline-size;padding:var(--progress-padding-block) var(--progress-padding-inline);min-height:var(--progress-min-height);background:var(--progress-bg);border:0px solid var(--progress-border-color);border-radius:0}:where(a-progress,progress[data-anta])[size=small]{--progress-padding-block: 2px;--progress-padding-inline: 6px;--progress-label-size: 12px;--progress-label-line-height: 14px}:where(a-progress,progress[data-anta])[size=large]{--progress-padding-block: 6px;--progress-padding-inline: 10px;--progress-label-size: 15px;--progress-label-line-height: 20px}a-progress[round]{--progress-round: 999px;border-radius:var(--progress-round)}@supports (border-radius: attr(round type(<length>),999px)){a-progress[round]{--progress-round: attr(round type(<length>), 999px)}}:where(a-progress,progress[data-anta])[tone=brand]{--progress-bg: var(--bg-4-brand);--progress-border-color: var(--border-4-brand);--progress-indicator-bg: var(--bg-5-brand);--progress-text-color: var(--text-2-brand);--progress-hint-color: var(--text-3-brand)}:where(a-progress,progress[data-anta])[tone=info]{--progress-bg: var(--bg-4-info);--progress-border-color: var(--border-4-info);--progress-indicator-bg: var(--bg-5-info);--progress-text-color: var(--text-2-info);--progress-hint-color: var(--text-3-info)}:where(a-progress,progress[data-anta])[tone=success]{--progress-bg: var(--bg-4-success);--progress-border-color: var(--border-4-success);--progress-indicator-bg: var(--bg-5-success);--progress-text-color: var(--text-2-success);--progress-hint-color: var(--text-3-success)}:where(a-progress,progress[data-anta])[tone=warning]{--progress-bg: var(--bg-4-warning);--progress-border-color: var(--border-4-warning);--progress-indicator-bg: var(--bg-5-warning);--progress-text-color: var(--text-2-warning);--progress-hint-color: var(--text-3-warning)}:where(a-progress,progress[data-anta])[tone=critical]{--progress-bg: var(--bg-4-critical);--progress-border-color: var(--border-4-critical);--progress-indicator-bg: var(--bg-5-critical);--progress-text-color: var(--text-2-critical);--progress-hint-color: var(--text-3-critical)}@supports (color: attr(tone type(<color>),transparent)){:where(a-progress,progress[data-anta])[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--progress-tone-source: attr(tone type(<color>), transparent);--progress-bg: oklch(from var(--progress-tone-source) .955 .02 h);--progress-border-color: oklch(from var(--progress-tone-source) .9 .04 h);--progress-indicator-bg: oklch(from var(--progress-tone-source) .935 .03 h);--progress-text-color: oklch(from var(--progress-tone-source) .43 .15 h);--progress-hint-color: color-mix(in oklch, var(--progress-text-color) 82%, transparent);.dark &{--progress-bg: oklch(from var(--progress-tone-source) .185 .05 h);--progress-border-color: oklch(from var(--progress-tone-source) .26 .06 h);--progress-indicator-bg: oklch(from var(--progress-tone-source) .205 .055 h);--progress-text-color: oklch(from var(--progress-tone-source) .77 .11 h);--progress-hint-color: color-mix(in oklch, var(--progress-text-color) 80%, transparent)}}}a-progress-label{display:flex;align-items:flex-start;gap:.5ch;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"ss02","ss05";letter-spacing:.03em;font-size:var(--progress-label-size);line-height:var(--progress-label-line-height)}a-progress-number{flex-shrink:0;color:var(--progress-text-color)}a-progress-text{flex:1 1 auto;min-width:0;color:var(--progress-text-color)}a-progress-hint{flex-shrink:0;margin-left:auto;color:var(--progress-hint-color)}progress[data-anta]{--anta-native-progress-height: calc( var(--progress-min-height) + var(--progress-padding-block) + var(--progress-padding-block) );--anta-native-progress-radius: 0px;--anta-native-progress-fill: linear-gradient( 90deg, var(--progress-indicator-bg) 0%, var(--progress-indicator-bg) calc(100% - 90px) , var(--progress-border-color) 100% );box-sizing:border-box;display:block;position:relative;container-type:inline-size;inline-size:100%;block-size:var(--anta-native-progress-height);margin:0;padding:0;border:0;border-radius:var(--anta-native-progress-radius);appearance:none;-webkit-appearance:none;-moz-appearance:none;background:var(--progress-bg);overflow:hidden;vertical-align:middle}progress[data-anta][round]{--anta-native-progress-radius: 999px}@supports (border-radius: attr(round type(<length>),999px)){progress[data-anta][round]{--anta-native-progress-radius: attr(round type(<length>), 999px)}}progress[data-anta]::-webkit-progress-bar{border-radius:var(--anta-native-progress-radius);background:var(--progress-bg)}progress[data-anta]::-webkit-progress-value{border-radius:var(--anta-native-progress-radius);background:var(--anta-native-progress-fill)}progress[data-anta]::-moz-progress-bar{border:0;border-radius:var(--anta-native-progress-radius);background:var(--anta-native-progress-fill)}progress[data-anta]:not([value]):before{content:"";position:absolute;top:0;bottom:0;left:calc(0px - var(--progress-loading-x-period));width:calc(100% + var(--progress-loading-x-period));pointer-events:none;background:repeating-linear-gradient(var(--progress-loading-angle),transparent 0,transparent var(--progress-loading-stripe-gap),var(--progress-text-color) var(--progress-loading-stripe-gap),var(--progress-text-color) calc(var(--progress-loading-stripe-gap) + var(--progress-loading-stripe)));filter:blur(var(--progress-loading-blur));opacity:var(--progress-loading-opacity);will-change:transform}@media(prefers-reduced-motion:no-preference){progress[data-anta]:not([value]):before{animation:progress-native-loading-slide var(--progress-loading-duration) linear infinite;animation-delay:-9999s}}@keyframes progress-native-loading-slide{to{transform:translate(var(--progress-loading-x-period))}}@media(forced-colors:active){:where(a-progress,progress[data-anta]){forced-color-adjust:none;--progress-bg: Canvas !important;--progress-border-color: CanvasText !important;--progress-indicator-bg: SelectedItem !important;--progress-indicator-edge: SelectedItem !important;--progress-indicator-edge-border: 1px solid SelectedItemText !important;--progress-text-color: CanvasText !important;--progress-hint-color: CanvasText !important;border:1px dotted CanvasText!important}.dark :where(a-progress,progress[data-anta]){--progress-indicator-bg: Highlight !important;--progress-indicator-edge: Highlight !important;--progress-indicator-edge-border: 1px solid HighlightText !important}}@media(forced-colors:active)and (prefers-color-scheme:dark){:where(a-progress,progress[data-anta]){--progress-indicator-bg: Highlight !important;--progress-indicator-edge: Highlight !important;--progress-indicator-edge-border: 1px solid HighlightText !important}}}
|
|
@@ -34,6 +34,31 @@ class AProgressElement extends HTMLElementBase {
|
|
|
34
34
|
background: var(--progress-indicator-edge);
|
|
35
35
|
border-right: var(--progress-indicator-edge-border, none);
|
|
36
36
|
}
|
|
37
|
+
:host(:not([value])) .indicator {
|
|
38
|
+
left: calc(0px - var(--progress-loading-x-period));
|
|
39
|
+
width: calc(100% + var(--progress-loading-x-period));
|
|
40
|
+
background: repeating-linear-gradient(
|
|
41
|
+
var(--progress-loading-angle),
|
|
42
|
+
transparent 0,
|
|
43
|
+
transparent var(--progress-loading-stripe-gap),
|
|
44
|
+
var(--progress-text-color) var(--progress-loading-stripe-gap),
|
|
45
|
+
var(--progress-text-color) calc(var(--progress-loading-stripe-gap) + var(--progress-loading-stripe))
|
|
46
|
+
);
|
|
47
|
+
filter: blur(var(--progress-loading-blur));
|
|
48
|
+
opacity: var(--progress-loading-opacity);
|
|
49
|
+
transition: none;
|
|
50
|
+
}
|
|
51
|
+
:host(:not([value])) .indicator::after { display: none; }
|
|
52
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
53
|
+
:host(:not([value])) .indicator {
|
|
54
|
+
will-change: transform;
|
|
55
|
+
animation: progress-loading-slide var(--progress-loading-duration) linear infinite;
|
|
56
|
+
animation-delay: -9999s;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
@keyframes progress-loading-slide {
|
|
60
|
+
to { transform: translateX(var(--progress-loading-x-period)); }
|
|
61
|
+
}
|
|
37
62
|
slot {
|
|
38
63
|
display: block;
|
|
39
64
|
position: relative;
|
|
@@ -52,9 +77,14 @@ class AProgressElement extends HTMLElementBase {
|
|
|
52
77
|
this.update();
|
|
53
78
|
}
|
|
54
79
|
update() {
|
|
55
|
-
const
|
|
80
|
+
const valueAttr = this.getAttribute("value");
|
|
81
|
+
if (valueAttr == null) {
|
|
82
|
+
this.indicator.style.removeProperty("--_percent");
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
const value = Number(valueAttr);
|
|
56
86
|
const max = Number(this.getAttribute("max") ?? 100);
|
|
57
|
-
const percent = max > 0 ? Math.min(100, Math.max(0, value / max * 100)) : 0;
|
|
87
|
+
const percent = Number.isFinite(value) && Number.isFinite(max) && max > 0 ? Math.min(100, Math.max(0, value / max * 100)) : 0;
|
|
58
88
|
this.indicator.style.setProperty("--_percent", `${percent}%`);
|
|
59
89
|
}
|
|
60
90
|
}
|
package/dist/elements/index.d.ts
CHANGED
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
* `customElements` (SSR), but there's no reason to load it server-side.
|
|
15
15
|
*/
|
|
16
16
|
export { AProgressElement, register_a_progress } from './a-progress';
|
|
17
|
+
export { ALoaderElement, register_a_loader } from './a-loader';
|
|
17
18
|
export { ATextElement, register_a_text } from './a-text';
|
|
18
19
|
export { AIconElement, register_a_icon } from './a-icon';
|
|
19
20
|
export { AButtonElement, register_a_button } from './a-button';
|
package/dist/elements/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { AProgressElement, register_a_progress } from "./a-progress";
|
|
2
|
+
import { ALoaderElement, register_a_loader } from "./a-loader";
|
|
2
3
|
import { ATextElement, register_a_text } from "./a-text";
|
|
3
4
|
import { AIconElement, register_a_icon } from "./a-icon";
|
|
4
5
|
import { AButtonElement, register_a_button } from "./a-button";
|
|
@@ -39,6 +40,7 @@ export {
|
|
|
39
40
|
AIconElement,
|
|
40
41
|
AInputElement,
|
|
41
42
|
AInputTimeElement,
|
|
43
|
+
ALoaderElement,
|
|
42
44
|
AMenuElement,
|
|
43
45
|
AMenuGroupElement,
|
|
44
46
|
AMenuItemElement,
|
|
@@ -66,6 +68,7 @@ export {
|
|
|
66
68
|
register_a_icon,
|
|
67
69
|
register_a_input,
|
|
68
70
|
register_a_input_time,
|
|
71
|
+
register_a_loader,
|
|
69
72
|
register_a_menu,
|
|
70
73
|
register_a_menu_group,
|
|
71
74
|
register_a_menu_item,
|
package/dist/general_types.d.ts
CHANGED
|
@@ -147,13 +147,15 @@ export interface BaseAttributes extends DOMEventHandlers {
|
|
|
147
147
|
* typed props and computed labels, use `Progress` from `@antadesign/anta`.
|
|
148
148
|
*/
|
|
149
149
|
export interface AProgressAttributes extends BaseAttributes {
|
|
150
|
-
/** Current progress value. */
|
|
151
|
-
value?: number | string;
|
|
150
|
+
/** Current progress value. Omit this attribute for indeterminate progress. */
|
|
151
|
+
value?: number | string | false;
|
|
152
152
|
/** Maximum value. Defaults to 100. */
|
|
153
153
|
max?: number | string;
|
|
154
154
|
/** Colour variant, or any literal CSS colour for a custom tone (derived in
|
|
155
155
|
* oklch). Named tones track light/dark automatically. */
|
|
156
156
|
tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
|
|
157
|
+
/** Size variant. `medium` is the default. */
|
|
158
|
+
size?: 'small' | 'medium' | 'large';
|
|
157
159
|
/** Fully-round track (`border-radius: 999px`), or a custom radius via a length
|
|
158
160
|
* value (`round="6px"`). Presence-based for the boolean form. */
|
|
159
161
|
round?: boolean | number | string;
|
|
@@ -168,6 +170,27 @@ export interface AProgressAttributes extends BaseAttributes {
|
|
|
168
170
|
/** ARIA accessible name. */
|
|
169
171
|
'aria-label'?: string;
|
|
170
172
|
}
|
|
173
|
+
/**
|
|
174
|
+
* Attributes for the `<a-loader>` custom element. For the JSX wrapper with
|
|
175
|
+
* cross-browser sizing and accessible progress semantics, use `Loader` from
|
|
176
|
+
* `@antadesign/anta`.
|
|
177
|
+
*/
|
|
178
|
+
export interface ALoaderAttributes extends BaseAttributes {
|
|
179
|
+
/** Presence selects the static, determinate gradient. Set `--loader-value`
|
|
180
|
+
* in `style` to its percentage. Omit this attribute for the rotating
|
|
181
|
+
* indeterminate gradient. */
|
|
182
|
+
value?: number | string | false;
|
|
183
|
+
/** ARIA accessible name. */
|
|
184
|
+
'aria-label'?: string;
|
|
185
|
+
/** Hides a decorative loader from screen readers. */
|
|
186
|
+
'aria-hidden'?: 'true' | 'false' | boolean;
|
|
187
|
+
/** ARIA value-now for determinate progress. */
|
|
188
|
+
'aria-valuenow'?: number | string;
|
|
189
|
+
/** ARIA value-min. */
|
|
190
|
+
'aria-valuemin'?: number | string;
|
|
191
|
+
/** ARIA value-max. */
|
|
192
|
+
'aria-valuemax'?: number | string;
|
|
193
|
+
}
|
|
171
194
|
/**
|
|
172
195
|
* Attributes for the `<a-text>` custom element.
|
|
173
196
|
*
|
package/dist/index.d.ts
CHANGED
|
@@ -18,6 +18,8 @@
|
|
|
18
18
|
*/
|
|
19
19
|
export { Progress } from './components/Progress';
|
|
20
20
|
export type { ProgressProps } from './components/Progress';
|
|
21
|
+
export { Loader } from './components/Loader';
|
|
22
|
+
export type { LoaderProps } from './components/Loader';
|
|
21
23
|
export { Text } from './components/Text';
|
|
22
24
|
export type { TextProps, ExpandMode } from './components/Text';
|
|
23
25
|
export { Title } from './components/Title';
|
|
@@ -89,8 +91,11 @@ export type { AntaIntrinsicElements } from './jsx-runtime';
|
|
|
89
91
|
* Seed interface for the icon shape registry. The generated
|
|
90
92
|
* `a-icon.shapes.d.ts` augments this interface with one key per
|
|
91
93
|
* available shape; consumers can do the same with their own generated
|
|
92
|
-
* .d.ts files (TypeScript merges them by interface name).
|
|
94
|
+
* .d.ts files (TypeScript merges them by interface name). `loader` is the
|
|
95
|
+
* animated string-shape alias; its CSS lives with the Loader component rather
|
|
96
|
+
* than the generated static SVG set.
|
|
93
97
|
*/
|
|
94
98
|
export interface IconShapes {
|
|
99
|
+
loader: true;
|
|
95
100
|
}
|
|
96
101
|
export type IconShape = keyof IconShapes;
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Progress } from "./components/Progress";
|
|
2
|
+
import { Loader } from "./components/Loader";
|
|
2
3
|
import { Text } from "./components/Text";
|
|
3
4
|
import { Title } from "./components/Title";
|
|
4
5
|
import { Tag } from "./components/Tag";
|
|
@@ -63,6 +64,7 @@ export {
|
|
|
63
64
|
InputAutocomplete,
|
|
64
65
|
InputDate,
|
|
65
66
|
InputTime,
|
|
67
|
+
Loader,
|
|
66
68
|
Menu,
|
|
67
69
|
MenuGroup,
|
|
68
70
|
MenuItem,
|
package/dist/jsx-runtime.d.ts
CHANGED
|
@@ -44,7 +44,7 @@ export declare function useSyncExternalStore<T>(subscribe: (onChange: () => void
|
|
|
44
44
|
export declare function jsx(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
|
|
45
45
|
export declare function jsxs(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
|
|
46
46
|
export { _Fragment as Fragment };
|
|
47
|
-
import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACopyAttributes, ACheckboxAttributes, ASwitchAttributes, ATooltipAttributes, AInputAttributes, ASliderAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, ABannerAttributes, AToasterAttributes, AToastAttributes, BaseAttributes } from './general_types';
|
|
47
|
+
import type { AProgressAttributes, ALoaderAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACopyAttributes, ACheckboxAttributes, ASwitchAttributes, ATooltipAttributes, AInputAttributes, ASliderAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, ABannerAttributes, AToasterAttributes, AToastAttributes, BaseAttributes } from './general_types';
|
|
48
48
|
export declare namespace JSX {
|
|
49
49
|
interface IntrinsicElements extends React.JSX.IntrinsicElements, AntaIntrinsicElements {
|
|
50
50
|
}
|
|
@@ -53,6 +53,7 @@ export declare namespace JSX {
|
|
|
53
53
|
}
|
|
54
54
|
export interface AntaIntrinsicElements {
|
|
55
55
|
'a-progress': AProgressAttributes;
|
|
56
|
+
'a-loader': ALoaderAttributes;
|
|
56
57
|
'a-progress-label': BaseAttributes;
|
|
57
58
|
'a-progress-number': BaseAttributes;
|
|
58
59
|
'a-progress-text': BaseAttributes;
|
package/dist/reset.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer anta{*,*:before,*:after{box-sizing:border-box}*{margin:0}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1,h2,h3,h4,h5,h6{color:var(--text-1);font-weight:584.62;letter-spacing:0}h1{font-size:28px;line-height:32px;margin-block:0 16px}h2{font-size:24px;line-height:28px;margin-block:32px 12px}h3{font-size:20px;line-height:24px;margin-block:24px 12px}h4{font-size:17px;line-height:20px;margin-block:20px 8px}h5{font-size:15px;line-height:20px;margin-block:16px 8px}h6{font-size:13px;line-height:16px;margin-block:16px 4px}strong{font-weight:600}dfn{font-style:normal;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:color-mix(in oklch,currentColor 50%,transparent)}code{line-height:1em}code,kbd,samp,pre{letter-spacing:0}ul,ol{padding-left:3ch}:is(ul,ol)>li{margin-bottom:.5em}:is(ul,ol)>li::marker{color:var(--text-5)}menu{list-style:none;padding:0;margin:0}menu>li{margin:0}a:not(:where([role=button])),a:not(:where([role=button])):link,a:not(:where([role=button])):visited{color:var(--link-color);text-decoration:underline;text-decoration-style:solid;text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:.5px;text-underline-offset:3px}@media(hover:hover)and (pointer:fine){a:not(:where([role=button])):hover{color:var(--link-color-hover);text-decoration-thickness:1px}}a:not(:where([role=button])):active{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent)}::selection{background:color-mix(in oklch,var(--focus-ring) 20%,transparent)}.dark ::selection{background:color-mix(in oklch,var(--focus-ring) 30%,transparent)}table{border-collapse:collapse;font-variant-numeric:lining-nums tabular-nums}caption{text-align:left;color:var(--text-3);padding-left:10px;margin-bottom:.25em}th,td{padding:5px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-4)}thead th{font-weight:600}tfoot tr:last-child>:is(th,td),table:not(:has(tfoot)) tbody tr:last-child>:is(th,td){border-bottom:none}table[data-bordered]{border-collapse:separate;border-spacing:0;border:1px solid var(--border-4);border-radius:3px}table[data-bordered] :is(th,td){border-right:1px solid var(--border-4)}table[data-bordered] tr>:is(th,td):last-child{border-right:0}}
|
|
1
|
+
@layer anta{*,*:before,*:after{box-sizing:border-box}*{margin:0}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}:focus-visible{outline:1px solid var(--focus-ring);outline-offset:2px}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1,h2,h3,h4,h5,h6{color:var(--text-1);font-weight:584.62;letter-spacing:0}h1{font-size:28px;line-height:32px;margin-block:0 16px}h2{font-size:24px;line-height:28px;margin-block:32px 12px}h3{font-size:20px;line-height:24px;margin-block:24px 12px}h4{font-size:17px;line-height:20px;margin-block:20px 8px}h5{font-size:15px;line-height:20px;margin-block:16px 8px}h6{font-size:13px;line-height:16px;margin-block:16px 4px}strong{font-weight:600}dfn{font-style:normal;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:color-mix(in oklch,currentColor 50%,transparent)}code{line-height:1em}code,kbd,samp,pre{letter-spacing:0}ul,ol{padding-left:3ch}:is(ul,ol)>li{margin-bottom:.5em}:is(ul,ol)>li::marker{color:var(--text-5)}menu{list-style:none;padding:0;margin:0}menu>li{margin:0}a:not(:where([role=button])),a:not(:where([role=button])):link,a:not(:where([role=button])):visited{color:var(--link-color);text-decoration:underline;text-decoration-style:solid;text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:.5px;text-underline-offset:3px}@media(hover:hover)and (pointer:fine){a:not(:where([role=button])):hover{color:var(--link-color-hover);text-decoration-thickness:1px}}a:not(:where([role=button])):active{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent)}::selection{background:color-mix(in oklch,var(--focus-ring) 20%,transparent)}.dark ::selection{background:color-mix(in oklch,var(--focus-ring) 30%,transparent)}table{border-collapse:collapse;font-variant-numeric:lining-nums tabular-nums}caption{text-align:left;color:var(--text-3);padding-left:10px;margin-bottom:.25em}th,td{padding:5px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-4)}thead th{font-weight:600}tfoot tr:last-child>:is(th,td),table:not(:has(tfoot)) tbody tr:last-child>:is(th,td){border-bottom:none}table[data-bordered]{border-collapse:separate;border-spacing:0;border:1px solid var(--border-4);border-radius:3px}table[data-bordered] :is(th,td){border-right:1px solid var(--border-4)}table[data-bordered] tr>:is(th,td):last-child{border-right:0}}
|
package/dist/theme-anta.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root:root,.light.light{--bg-1: #ffffff;--bg-2: #fbfafb;--bg-3: #f6f4f6;--bg-4: #f1eff1;--bg-5: #ece9ec;--bg-2-brand: #fcfcfe;--bg-3-brand: #f7f6fd;--bg-4-brand: #efeefc;--bg-5-brand: #e9e5fa;--bg-2-success: #f7fcf9;--bg-3-success: #ecf9f0;--bg-4-success: #e2f5e8;--bg-5-success: #d9f2e0;--bg-2-critical: #fefbfb;--bg-3-critical: #fdf2f2;--bg-4-critical: #fcebeb;--bg-5-critical: #fae5e5;--bg-2-warning: #fefbf6;--bg-3-warning: #fcf4e8;--bg-4-warning: #fbeeda;--bg-5-warning: #f9e7cd;--bg-2-info: #fbfcfe;--bg-3-info: #f2f7fd;--bg-4-info: #e9f3fb;--bg-5-info: #e1eefa;--text-1: #050306;--text-2: #302b31;--text-3: #635b65;--text-4: #878089;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: #48349399;--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: #1f5c3199;--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: #a01c1c99;--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: #99520099;--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: #175082b2;--text-5-info: #17508280;--border-1: #938d96;--border-2: #c1b9c1;--border-3: #d4ced4;--border-4: #e0dce0;--border-5: #ece9ec;--border-1-brand: #9081df;--border-2-brand: #bcb1f1;--border-3-brand: #d2cbf6;--border-4-brand: #ddd8f8;--border-5-brand: #e9e5fa;--border-1-success: #44c169;--border-2-success: #88d7a0;--border-3-success: #b3e5c2;--border-4-success: #c6ecd1;--border-5-success: #d9f2e0;--border-1-critical: #e56c6c;--border-2-critical: #efa4a4;--border-3-critical: #f4c2c2;--border-4-critical: #f7d4d4;--border-5-critical: #fae5e5;--border-1-warning: #d88118;--border-2-warning: #edb25a;--border-3-warning: #f3cc91;--border-4-warning: #f6dbb1;--border-5-warning: #f9e7cd;--border-1-info: #56a1e1;--border-2-info: #93c5ec;--border-3-info: #bad6f3;--border-4-info: #cfe3f7;--border-5-info: #e1eefa}.dark.dark{--bg-1: #000000;--bg-2: #0e0d0f;--bg-3: #121014;--bg-4: #161316;--bg-5: #1a171b;--bg-2-brand: #08060e;--bg-3-brand: #0f0c1d;--bg-4-brand: #130f24;--bg-5-brand: #16132b;--bg-2-success: #030b06;--bg-3-success: #051209;--bg-4-success: #06160b;--bg-5-success: #081b0e;--bg-2-critical: #120303;--bg-3-critical: #210606;--bg-4-critical: #260808;--bg-5-critical: #2e0a0b;--bg-2-warning: #110a03;--bg-3-warning: #1c1105;--bg-4-warning: #231406;--bg-5-warning: #2b1a08;--bg-2-info: #020a12;--bg-3-info: #05131f;--bg-4-info: #071725;--bg-5-info: #0c2337;--text-1: #ece9ec;--text-2: #c1b9c1;--text-3: #9f99a1;--text-4: #776e77;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: #ada0ee99;--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: #74cd8e99;--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: #e78e9099;--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: #e1a45299;--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: #7db6e899;--text-5-info: #7db6e866;--border-1: hsl(288deg 5.21% 42%);--border-2: hsl(282deg 7.04% 28%);--border-3: hsl(277.5deg 6.56% 20%);--border-4: hsl(290deg 6.52% 14%);--border-5: hsl(285deg 7.14% 10%);--border-1-brand: hsl(250.08deg 59.8% 58%);--border-2-brand: hsl(250deg 50% 42%);--border-3-brand: hsl(252.63deg 47.74% 30%);--border-4-brand: hsl(249.8deg 39.84% 19%);--border-5-brand: hsl(249deg 39.22% 14%);--border-1-success: hsl(138.18deg 49.75% 29%);--border-2-success: hsl(138.26deg 50.36% 20%);--border-3-success: hsl(137.7deg 49.59% 16%);--border-4-success: hsl(138.46deg 52% 10%);--border-5-success: hsl(138.86deg 53.85% 7.5%);--border-1-critical: hsl(0deg 56% 46%);--border-2-critical: hsl(.42deg 63% 30%);--border-3-critical: hsl(0deg 62.21% 23%);--border-4-critical: hsl(359.13deg 59% 15%);--border-5-critical: hsl(359.06deg 63% 11%);--border-1-warning: hsl(32.13deg 80.31% 34%);--border-2-warning: hsl(27.93deg 84.06% 24%);--border-3-warning: hsl(30deg 79.66% 17%);--border-4-warning: hsl(28.75deg 63.16% 12%);--border-5-warning: hsl(28.64deg 66.67% 9%);--border-1-info: hsl(207.82deg 70.2% 40%);--border-2-info: hsl(207.77deg 69.94% 29%);--border-3-info: hsl(208.04deg 69.93% 21%);--border-4-info: hsl(208.52deg 62.89% 14%);--border-5-info: hsl(207.78deg 65.85% 10.5%)}@layer anta{a-button:not([tone]),a[role=button][data-anta]:not([tone]),button[data-anta]:not([tone]),input[data-anta]:is([type=reset],[type=submit]):not([tone]){--button-bg-primary-rest: #635b65;--button-bg-primary-hover: #534c57;--button-bg-primary-active: #49424c;--button-bg-secondary-rest: #45374c12;--button-bg-secondary-hover: #44374b1a;--button-bg-secondary-active: #44374b26;--button-fg-secondary-rest: #534c57;--button-fg-secondary-hover: #49424c;--button-fg-secondary-l-shift: .05;--button-fg-tertiary-rest: #635b65;--button-fg-tertiary-hover: #534c57;--button-bg-tertiary-hover: #44374b0d;--button-bg-tertiary-active: #44374b1a;--button-fg-quaternary-rest: #635b65;--button-fg-quaternary-hover: #49424c}a-button[tone=brand],a[role=button][data-anta][tone=brand],button[data-anta][tone=brand],input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--button-bg-primary-rest: #5f4bc3;--button-bg-primary-hover: #503cb4;--button-bg-primary-active: #483493;--button-bg-secondary-rest: #7460d71a;--button-bg-secondary-hover: #7460d726;--button-bg-secondary-active: #7460d733;--button-fg-secondary-rest: #5f4bc3;--button-fg-secondary-hover: #503cb4;--button-fg-tertiary-rest: #5f4bc3;--button-fg-tertiary-hover: #503cb4;--button-bg-tertiary-hover: #7460d71a;--button-bg-tertiary-active: #7460d726;--button-fg-quaternary-rest: #5f4bc3;--button-fg-quaternary-hover: #483493}a-button[tone=critical],a[role=button][data-anta][tone=critical],button[data-anta][tone=critical],input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--button-bg-primary-rest: #c9302c;--button-bg-primary-hover: #b02120;--button-bg-primary-active: #a01c1c;--button-bg-secondary-rest: #de45451a;--button-bg-secondary-hover: #de454526;--button-bg-secondary-active: #de454533;--button-fg-secondary-rest: #c9302c;--button-fg-secondary-hover: #b02120;--button-fg-tertiary-rest: #c9302c;--button-fg-tertiary-hover: #b02120;--button-bg-tertiary-hover: #de45451a;--button-bg-tertiary-active: #de454533;--button-fg-quaternary-rest: #c9302c;--button-fg-quaternary-hover: #a01c1c}a-button[tone=info],a[role=button][data-anta][tone=info],button[data-anta][tone=info],input[data-anta]:is([type=reset],[type=submit])[tone=info]{--button-bg-primary-rest: #1f6eb2;--button-bg-primary-hover: #1a5b93;--button-bg-primary-active: #175082;--button-bg-secondary-rest: #2686d91a;--button-bg-secondary-hover: #2686d926;--button-bg-secondary-active: #2686d933;--button-fg-secondary-rest: #1f6eb2;--button-fg-secondary-hover: #1a5b93;--button-fg-tertiary-rest: #1f6eb2;--button-fg-tertiary-hover: #1a5b93;--button-bg-tertiary-hover: #2686d91a;--button-bg-tertiary-active: #2686d926;--button-fg-quaternary-rest: #1f6eb2;--button-fg-quaternary-hover: #175082}a-button[tone=success],a[role=button][data-anta][tone=success],button[data-anta][tone=success],input[data-anta]:is([type=reset],[type=submit])[tone=success]{--button-bg-primary-rest: #2a7e43;--button-bg-primary-hover: #226737;--button-bg-primary-active: #1f5c31;--button-bg-secondary-rest: #3295501a;--button-bg-secondary-hover: #32955026;--button-bg-secondary-active: #32955033;--button-fg-secondary-rest: #2a7e43;--button-fg-secondary-hover: #226737;--button-fg-tertiary-rest: #2a7e43;--button-fg-tertiary-hover: #226737;--button-bg-tertiary-hover: #3295501a;--button-bg-tertiary-active: #32955026;--button-fg-quaternary-rest: #2a7e43;--button-fg-quaternary-hover: #1f5c31}a-button[tone=warning],a[role=button][data-anta][tone=warning],button[data-anta][tone=warning],input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--button-bg-primary-rest: #c37416;--button-bg-primary-hover: #ae6613;--button-bg-primary-active: #995200;--button-bg-secondary-rest: #c374161a;--button-bg-secondary-hover: #c3741626;--button-bg-secondary-active: #c3741633;--button-fg-secondary-rest: #c37416;--button-fg-secondary-hover: #ae6613;--button-fg-tertiary-rest: #c37416;--button-fg-tertiary-hover: #ae6613;--button-bg-tertiary-hover: #c374161a;--button-bg-tertiary-active: #c3741633;--button-fg-quaternary-rest: #c37416;--button-fg-quaternary-hover: #995200}.dark a-button:not([tone]),.dark a[role=button][data-anta]:not([tone]),.dark button[data-anta]:not([tone]),.dark input[data-anta]:is([type=reset],[type=submit]):not([tone]){--button-bg-primary-rest: #534c57;--button-bg-primary-hover: #635b65;--button-bg-primary-active: #938d96;--button-bg-secondary-rest: #e4d1ef1c;--button-bg-secondary-hover: #e4d1ef24;--button-bg-secondary-active: #e4d1ef2e;--button-fg-secondary-rest: #c1b9c1;--button-fg-secondary-hover: #d4ced4;--button-fg-secondary-l-shift: 0;--button-fg-tertiary-rest: #afa9b1;--button-fg-tertiary-hover: #afa9b1;--button-bg-tertiary-hover: #e4d1ef14;--button-bg-tertiary-active: #e4d1ef21;--button-fg-quaternary-rest: #afa9b1;--button-fg-quaternary-hover: #cac4ca}.dark a-button[tone=brand],.dark a[role=button][data-anta][tone=brand],.dark button[data-anta][tone=brand],.dark input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--button-bg-primary-rest: #503cb4;--button-bg-primary-hover: #5f4bc3;--button-bg-primary-active: #7460d7;--button-bg-secondary-rest: #7460d73b;--button-bg-secondary-hover: #7460d747;--button-bg-secondary-active: #7460d754;--button-fg-secondary-rest: #c5baff;--button-fg-secondary-hover: #d2cbf6;--button-fg-tertiary-rest: #ada0ee;--button-fg-tertiary-hover: #bcb1f1;--button-bg-tertiary-hover: #7460d73b;--button-bg-tertiary-active: #7460d747;--button-fg-quaternary-rest: #ada0ee;--button-fg-quaternary-hover: #c7bef4}.dark a-button[tone=critical],.dark a[role=button][data-anta][tone=critical],.dark button[data-anta][tone=critical],.dark input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--button-bg-primary-rest: #b02120;--button-bg-primary-hover: #c9302c;--button-bg-primary-active: #de4545;--button-bg-secondary-rest: #de45453b;--button-bg-secondary-hover: #de454547;--button-bg-secondary-active: #de454554;--button-fg-secondary-rest: #ffabac;--button-fg-secondary-hover: #f4c2c2;--button-fg-tertiary-rest: #e78e90;--button-fg-tertiary-hover: #efa4a4;--button-bg-tertiary-hover: #de45453b;--button-bg-tertiary-active: #de454547;--button-fg-quaternary-rest: #e78e90;--button-fg-quaternary-hover: #ffabac}.dark a-button[tone=info],.dark a[role=button][data-anta][tone=info],.dark button[data-anta][tone=info],.dark input[data-anta]:is([type=reset],[type=submit])[tone=info]{--button-bg-primary-rest: #1a5b93;--button-bg-primary-hover: #1f6eb2;--button-bg-primary-active: #2686d9;--button-bg-secondary-rest: #2686d93b;--button-bg-secondary-hover: #2686d947;--button-bg-secondary-active: #2686d954;--button-fg-secondary-rest: #9ed2ff;--button-fg-secondary-hover: #bad6f3;--button-fg-tertiary-rest: #7db6e8;--button-fg-tertiary-hover: #93c5ec;--button-bg-tertiary-hover: #2686d93b;--button-bg-tertiary-active: #2686d947;--button-fg-quaternary-rest: #7db6e8;--button-fg-quaternary-hover: #a6cdef}.dark a-button[tone=success],.dark a[role=button][data-anta][tone=success],.dark button[data-anta][tone=success],.dark input[data-anta]:is([type=reset],[type=submit])[tone=success]{--button-bg-primary-rest: #226737;--button-bg-primary-hover: #2a7e43;--button-bg-primary-active: #329550;--button-bg-secondary-rest: #3295503b;--button-bg-secondary-hover: #32955047;--button-bg-secondary-active: #32955054;--button-fg-secondary-rest: #8ceca9;--button-fg-secondary-hover: #b3e5c2;--button-fg-tertiary-rest: #74cd8e;--button-fg-tertiary-hover: #88d7a0;--button-bg-tertiary-hover: #3295503b;--button-bg-tertiary-active: #32955047;--button-fg-quaternary-rest: #74cd8e;--button-fg-quaternary-hover: #9ddeb1}.dark a-button[tone=warning],.dark a[role=button][data-anta][tone=warning],.dark button[data-anta][tone=warning],.dark input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--button-bg-primary-rest: #7f410b;--button-bg-primary-hover: #995200;--button-bg-primary-active: #ae6613;--button-bg-secondary-rest: #c374163b;--button-bg-secondary-hover: #c3741647;--button-bg-secondary-active: #c3741654;--button-fg-secondary-rest: #f7c06e;--button-fg-secondary-hover: #f3cc91;--button-fg-tertiary-rest: #e1a452;--button-fg-tertiary-hover: #edb25a;--button-bg-tertiary-hover: #c374163b;--button-bg-tertiary-active: #c3741647;--button-fg-quaternary-rest: #e1a452;--button-fg-quaternary-hover: #f0bf75}a-checkbox[tone=brand],a-checkbox[tone-selected=brand]{--checkbox-bg-selected: #5f4bc3;--checkbox-bg-selected-hover: #503cb4;--checkbox-bg-selected-active: #483493}a-checkbox[tone=neutral],a-checkbox[tone-selected=neutral]{--checkbox-bg-selected: #878089;--checkbox-bg-selected-hover: #776e77;--checkbox-bg-selected-active: #635b65}a-checkbox[tone=info],a-checkbox[tone-selected=info]{--checkbox-bg-selected: #1f6eb2;--checkbox-bg-selected-hover: #1a5b93;--checkbox-bg-selected-active: #175082}a-checkbox[tone=success],a-checkbox[tone-selected=success]{--checkbox-bg-selected: #2a7e43;--checkbox-bg-selected-hover: #226737;--checkbox-bg-selected-active: #1f5c31}a-checkbox[tone=warning],a-checkbox[tone-selected=warning]{--checkbox-bg-selected: #c37416;--checkbox-bg-selected-hover: #ae6613;--checkbox-bg-selected-active: #995200}a-checkbox[tone=critical],a-checkbox[tone-selected=critical]{--checkbox-bg-selected: #c9302c;--checkbox-bg-selected-hover: #b02120;--checkbox-bg-selected-active: #a01c1c}a-checkbox[tone=brand]{--checkbox-bg: #fcfcfe;--checkbox-border: #bcb1f1;--checkbox-border-hover: #9e8eeb;--checkbox-border-active: #9081df}a-checkbox[tone=info]{--checkbox-bg: #fbfcfe;--checkbox-border: #93c5ec;--checkbox-border-hover: #69ace5;--checkbox-border-active: #56a1e1}a-checkbox[tone=success]{--checkbox-bg: #f7fcf9;--checkbox-border: #88d7a0;--checkbox-border-hover: #5bc87b;--checkbox-border-active: #44c169}a-checkbox[tone=warning]{--checkbox-bg: #fefbf6;--checkbox-border: #edb25a;--checkbox-border-hover: #e09127;--checkbox-border-active: #d88118}a-checkbox[tone=critical]{--checkbox-bg: #fefbfb;--checkbox-border: #efa4a4;--checkbox-border-hover: #e87f7f;--checkbox-border-active: #e56c6c}.dark a-checkbox:not([tone]):not([tone-selected]){--checkbox-border-neutral: #49424c;--checkbox-border-hover: #635b65;--checkbox-border-active: #776e77;--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65;--checkbox-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-checkbox[tone=brand],.dark a-checkbox[tone-selected=brand]{--checkbox-bg-selected: #503cb4;--checkbox-bg-selected-hover: #5f4bc3;--checkbox-bg-selected-active: #7460d7}.dark a-checkbox[tone=neutral],.dark a-checkbox[tone-selected=neutral]{--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65}.dark a-checkbox[tone=info],.dark a-checkbox[tone-selected=info]{--checkbox-bg-selected: #1a5b93;--checkbox-bg-selected-hover: #1f6eb2;--checkbox-bg-selected-active: #2686d9}.dark a-checkbox[tone=success],.dark a-checkbox[tone-selected=success]{--checkbox-bg-selected: #226737;--checkbox-bg-selected-hover: #2a7e43;--checkbox-bg-selected-active: #329550}.dark a-checkbox[tone=warning],.dark a-checkbox[tone-selected=warning]{--checkbox-bg-selected: #7f410b;--checkbox-bg-selected-hover: #995200;--checkbox-bg-selected-active: #ae6613}.dark a-checkbox[tone=critical],.dark a-checkbox[tone-selected=critical]{--checkbox-bg-selected: #b02120;--checkbox-bg-selected-hover: #c9302c;--checkbox-bg-selected-active: #de4545}.dark a-checkbox[tone=brand]{--checkbox-bg: #0b0916;--checkbox-border: #483493;--checkbox-border-hover: #5f4bc3;--checkbox-border-active: #7460d7}.dark a-checkbox[tone=info]{--checkbox-bg: #040d18;--checkbox-border: #175082;--checkbox-border-hover: #1f6eb2;--checkbox-border-active: #2686d9}.dark a-checkbox[tone=success]{--checkbox-bg: #041008;--checkbox-border: #1f5c31;--checkbox-border-hover: #2a7e43;--checkbox-border-active: #329550}.dark a-checkbox[tone=warning]{--checkbox-bg: #120a03;--checkbox-border: #6a3b0c;--checkbox-border-hover: #995200;--checkbox-border-active: #ae6613}.dark a-checkbox[tone=critical]{--checkbox-bg: #190405;--checkbox-border: #a01c1c;--checkbox-border-hover: #c9302c;--checkbox-border-active: #de4545}a-radio:not([tone]):not([tone-selected]){--radio-border-width: 1.5px;--radio-bg: var(--bg-1);--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65;--radio-border-neutral: #d4ced4;--radio-border: var(--radio-border-neutral);--radio-border-hover: #c1b9c1;--radio-border-active: #9f99a1;--radio-border-disabled: color-mix(in oklch, #44374b 10%, transparent)}a-radio[tone=brand],a-radio[tone-selected=brand],a-radio-group[tone=brand] a-radio:not([tone]),a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-bg-selected: #5f4bc3;--radio-bg-selected-hover: #503cb4;--radio-bg-selected-active: #483493}a-radio[tone=neutral],a-radio[tone-selected=neutral],a-radio-group[tone=neutral] a-radio:not([tone]),a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65}a-radio[tone=info],a-radio[tone-selected=info],a-radio-group[tone=info] a-radio:not([tone]),a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-bg-selected: #1f6eb2;--radio-bg-selected-hover: #1a5b93;--radio-bg-selected-active: #175082}a-radio[tone=success],a-radio[tone-selected=success],a-radio-group[tone=success] a-radio:not([tone]),a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-bg-selected: #2a7e43;--radio-bg-selected-hover: #226737;--radio-bg-selected-active: #1f5c31}a-radio[tone=warning],a-radio[tone-selected=warning],a-radio-group[tone=warning] a-radio:not([tone]),a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-bg-selected: #c37416;--radio-bg-selected-hover: #ae6613;--radio-bg-selected-active: #995200}a-radio[tone=critical],a-radio[tone-selected=critical],a-radio-group[tone=critical] a-radio:not([tone]),a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-bg-selected: #c9302c;--radio-bg-selected-hover: #b02120;--radio-bg-selected-active: #a01c1c}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #fcfcfe;--radio-border: #bcb1f1;--radio-border-hover: #9e8eeb;--radio-border-active: #9081df}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #fbfcfe;--radio-border: #93c5ec;--radio-border-hover: #69ace5;--radio-border-active: #56a1e1}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #f7fcf9;--radio-border: #88d7a0;--radio-border-hover: #5bc87b;--radio-border-active: #44c169}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #fefbf6;--radio-border: #edb25a;--radio-border-hover: #e09127;--radio-border-active: #d88118}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #fefbfb;--radio-border: #efa4a4;--radio-border-hover: #e87f7f;--radio-border-active: #e56c6c}.dark a-radio:not([tone]):not([tone-selected]){--radio-border-hover: #635b65;--radio-border-active: #776e77;--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65;--radio-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-radio[tone=brand],.dark a-radio[tone-selected=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]),.dark a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-bg-selected: #503cb4;--radio-bg-selected-hover: #5f4bc3;--radio-bg-selected-active: #7460d7}.dark a-radio[tone=neutral],.dark a-radio[tone-selected=neutral],.dark a-radio-group[tone=neutral] a-radio:not([tone]),.dark a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65}.dark a-radio[tone=info],.dark a-radio[tone-selected=info],.dark a-radio-group[tone=info] a-radio:not([tone]),.dark a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-bg-selected: #1a5b93;--radio-bg-selected-hover: #1f6eb2;--radio-bg-selected-active: #2686d9}.dark a-radio[tone=success],.dark a-radio[tone-selected=success],.dark a-radio-group[tone=success] a-radio:not([tone]),.dark a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-bg-selected: #226737;--radio-bg-selected-hover: #2a7e43;--radio-bg-selected-active: #329550}.dark a-radio[tone=warning],.dark a-radio[tone-selected=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]),.dark a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-bg-selected: #7f410b;--radio-bg-selected-hover: #995200;--radio-bg-selected-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio[tone-selected=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]),.dark a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-bg-selected: #b02120;--radio-bg-selected-hover: #c9302c;--radio-bg-selected-active: #de4545}.dark a-radio[tone=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #0b0916;--radio-border: #483493;--radio-border-hover: #5f4bc3;--radio-border-active: #7460d7}.dark a-radio[tone=info],.dark a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #040d18;--radio-border: #175082;--radio-border-hover: #1f6eb2;--radio-border-active: #2686d9}.dark a-radio[tone=success],.dark a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #041008;--radio-border: #1f5c31;--radio-border-hover: #2a7e43;--radio-border-active: #329550}.dark a-radio[tone=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #120a03;--radio-border: #6a3b0c;--radio-border-hover: #995200;--radio-border-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #190405;--radio-border: #a01c1c;--radio-border-hover: #c9302c;--radio-border-active: #de4545}a-tag:not([tone]){--tag-tint: #44374b;--tag-bg-solid: #776e77;--tag-edge: var(--tag-tint);--_tag-bg-alpha: 7%;--_tag-border-alpha: 15%;--_tag-edge-alpha: 25%}a-tag[tone=brand]{--tag-tint: #7460d7;--tag-bg-solid: #7460d7;--tag-edge: var(--text-2-brand);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=info]{--tag-tint: #2686d9;--tag-bg-solid: #2686d9;--tag-edge: var(--text-2-info);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=success]{--tag-tint: #329550;--tag-bg-solid: #329550;--tag-edge: var(--text-2-success);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=warning]{--tag-tint: #c37416;--tag-bg-solid: #ae6613;--tag-edge: var(--text-2-warning);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=critical]{--tag-tint: #de4545;--tag-bg-solid: #de4545;--tag-edge: var(--text-2-critical);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}.dark a-tag:not([tone]),.dark a-tag[tone=neutral]{--tag-tint: #e4d1ef;--tag-bg-solid: #635b65;--_tag-bg-alpha: 12%}.dark a-tag[tone=brand],.dark a-tag[tone=info],.dark a-tag[tone=success],.dark a-tag[tone=warning],.dark a-tag[tone=critical]{--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tag[tone=brand]{--tag-bg-solid: #5f4bc3}.dark a-tag[tone=info]{--tag-bg-solid: #1f6eb2}.dark a-tag[tone=success]{--tag-bg-solid: #2a7e43}.dark a-tag[tone=warning]{--tag-bg-solid: #995200}.dark a-tag[tone=critical]{--tag-bg-solid: #c9302c}.dark a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tabs{--tabs-track-bg: color-mix(in oklch, #e4d1ef 7%, transparent);--tab-secondary-bg: color-mix(in oklch, #e4d1ef 8%, transparent)}a-input:not([tone]){--input-bg: var(--bg-1);--input-border: var(--border-2);--input-hint: var(--text-3)}a-input[status=critical]{--input-bg: #fefbfb;--input-border: #de4545;--input-hint: #c9302c}a-input[status=warning]{--input-bg: #fefbf6;--input-border: #ae6613;--input-hint: #995200}a-input[status=success]{--input-bg: #f7fcf9;--input-border: #329550;--input-hint: #2a7e43}a-input[status=info]{--input-bg: #fbfcfe;--input-border: #2686d9;--input-hint: #175082}a-input[status=brand]{--input-bg: #fcfcfe;--input-border: #7460d7;--input-hint: #5f4bc3}.dark a-input[status=critical]{--input-bg: #1f0506;--input-border: #c9302c;--input-hint: #e25858}.dark a-input[status=warning]{--input-bg: #120a03;--input-border: #995200;--input-hint: #c37416}.dark a-input[status=success]{--input-bg: #041008;--input-border: #2a7e43;--input-hint: #3aab5c}.dark a-input[status=info]{--input-bg: #040d18;--input-border: #1f6eb2;--input-hint: #3e93dd}.dark a-input[status=brand]{--input-bg: #0b0916;--input-border: #5f4bc3;--input-hint: #8270db}a-input:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}a-input[status]:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}.dark a-input:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f}.dark a-input[status]:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-hint: var(--text-5)}.dark a-input:not([status]):not([tone]){--input-border: #49424c}.dark a-input[status=success]{--input-border: var(--border-1-success)}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: var(--border-2);--input-time-border-hover: var(--border-1);--input-time-hint: var(--text-3)}a-input-time[status=critical]{--input-time-bg: #fefbfb;--input-time-border: #de4545;--input-time-border-hover: #de4545;--input-time-hint: #c9302c}a-input-time[status=warning]{--input-time-bg: #fefbf6;--input-time-border: #ae6613;--input-time-border-hover: #ae6613;--input-time-hint: #995200}a-input-time[status=success]{--input-time-bg: #f7fcf9;--input-time-border: #329550;--input-time-border-hover: #329550;--input-time-hint: #2a7e43}a-input-time[status=info]{--input-time-bg: #fbfcfe;--input-time-border: #2686d9;--input-time-border-hover: #2686d9;--input-time-hint: #175082}a-input-time[status=brand]{--input-time-bg: #fcfcfe;--input-time-border: #7460d7;--input-time-border-hover: #7460d7;--input-time-hint: #5f4bc3}.dark a-input-time[status=critical]{--input-time-bg: #1f0506;--input-time-border: #c9302c;--input-time-border-hover: #c9302c;--input-time-hint: #e25858}.dark a-input-time[status=warning]{--input-time-bg: #120a03;--input-time-border: #995200;--input-time-border-hover: #995200;--input-time-hint: #c37416}.dark a-input-time[status=success]{--input-time-bg: #041008;--input-time-border: var(--border-1-success);--input-time-border-hover: var(--border-1-success);--input-time-hint: #3aab5c}.dark a-input-time[status=info]{--input-time-bg: #040d18;--input-time-border: #1f6eb2;--input-time-border-hover: #1f6eb2;--input-time-hint: #3e93dd}.dark a-input-time[status=brand]{--input-time-bg: #0b0916;--input-time-border: #5f4bc3;--input-time-border-hover: #5f4bc3;--input-time-hint: #8270db}a-input-time:disabled{--input-time-bg: #44374b12;--input-time-border: #44374b26;--input-time-border-hover: #44374b26;--input-time-hint: var(--text-5)}.dark a-input-time:disabled{--input-time-bg: #e4d1ef0d;--input-time-border: #e4d1ef1f;--input-time-border-hover: #e4d1ef1f}.dark a-input-time:not([status]){--input-time-border: #49424c;--input-time-border-hover: #635b65}}
|
|
1
|
+
:root:root,.light.light{--bg-1: #ffffff;--bg-2: #fbfafb;--bg-3: #f6f4f6;--bg-4: #f1eff1;--bg-5: #ece9ec;--bg-2-brand: #fcfcfe;--bg-3-brand: #f7f6fd;--bg-4-brand: #efeefc;--bg-5-brand: #e9e5fa;--bg-2-success: #f7fcf9;--bg-3-success: #ecf9f0;--bg-4-success: #e2f5e8;--bg-5-success: #d9f2e0;--bg-2-critical: #fefbfb;--bg-3-critical: #fdf2f2;--bg-4-critical: #fcebeb;--bg-5-critical: #fae5e5;--bg-2-warning: #fefbf6;--bg-3-warning: #fcf4e8;--bg-4-warning: #fbeeda;--bg-5-warning: #f9e7cd;--bg-2-info: #fbfcfe;--bg-3-info: #f2f7fd;--bg-4-info: #e9f3fb;--bg-5-info: #e1eefa;--text-1: #050306;--text-2: #302b31;--text-3: #635b65;--text-4: #878089;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: #48349399;--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: #1f5c3199;--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: #a01c1c99;--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: #99520099;--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: #175082b2;--text-5-info: #17508280;--border-1: #938d96;--border-2: #c1b9c1;--border-3: #d4ced4;--border-4: #e0dce0;--border-5: #ece9ec;--border-1-brand: #9081df;--border-2-brand: #bcb1f1;--border-3-brand: #d2cbf6;--border-4-brand: #ddd8f8;--border-5-brand: #e9e5fa;--border-1-success: #44c169;--border-2-success: #88d7a0;--border-3-success: #b3e5c2;--border-4-success: #c6ecd1;--border-5-success: #d9f2e0;--border-1-critical: #e56c6c;--border-2-critical: #efa4a4;--border-3-critical: #f4c2c2;--border-4-critical: #f7d4d4;--border-5-critical: #fae5e5;--border-1-warning: #d88118;--border-2-warning: #edb25a;--border-3-warning: #f3cc91;--border-4-warning: #f6dbb1;--border-5-warning: #f9e7cd;--border-1-info: #56a1e1;--border-2-info: #93c5ec;--border-3-info: #bad6f3;--border-4-info: #cfe3f7;--border-5-info: #e1eefa;--focus-ring: var(--text-2-brand)}.dark.dark{--bg-1: #000000;--bg-2: #0e0d0f;--bg-3: #121014;--bg-4: #161316;--bg-5: #1a171b;--bg-2-brand: #08060e;--bg-3-brand: #0f0c1d;--bg-4-brand: #130f24;--bg-5-brand: #16132b;--bg-2-success: #030b06;--bg-3-success: #051209;--bg-4-success: #06160b;--bg-5-success: #081b0e;--bg-2-critical: #120303;--bg-3-critical: #210606;--bg-4-critical: #260808;--bg-5-critical: #2e0a0b;--bg-2-warning: #110a03;--bg-3-warning: #1c1105;--bg-4-warning: #231406;--bg-5-warning: #2b1a08;--bg-2-info: #020a12;--bg-3-info: #05131f;--bg-4-info: #071725;--bg-5-info: #0c2337;--text-1: #ece9ec;--text-2: #c1b9c1;--text-3: #9f99a1;--text-4: #776e77;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: #ada0ee99;--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: #74cd8e99;--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: #e78e9099;--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: #e1a45299;--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: #7db6e899;--text-5-info: #7db6e866;--border-1: hsl(288deg 5.21% 42%);--border-2: hsl(282deg 7.04% 28%);--border-3: hsl(277.5deg 6.56% 20%);--border-4: hsl(290deg 6.52% 14%);--border-5: hsl(285deg 7.14% 10%);--border-1-brand: hsl(250.08deg 59.8% 58%);--border-2-brand: hsl(250deg 50% 42%);--border-3-brand: hsl(252.63deg 47.74% 30%);--border-4-brand: hsl(249.8deg 39.84% 19%);--border-5-brand: hsl(249deg 39.22% 14%);--border-1-success: hsl(138.18deg 49.75% 29%);--border-2-success: hsl(138.26deg 50.36% 20%);--border-3-success: hsl(137.7deg 49.59% 16%);--border-4-success: hsl(138.46deg 52% 10%);--border-5-success: hsl(138.86deg 53.85% 7.5%);--border-1-critical: hsl(0deg 56% 46%);--border-2-critical: hsl(.42deg 63% 30%);--border-3-critical: hsl(0deg 62.21% 23%);--border-4-critical: hsl(359.13deg 59% 15%);--border-5-critical: hsl(359.06deg 63% 11%);--border-1-warning: hsl(32.13deg 80.31% 34%);--border-2-warning: hsl(27.93deg 84.06% 24%);--border-3-warning: hsl(30deg 79.66% 17%);--border-4-warning: hsl(28.75deg 63.16% 12%);--border-5-warning: hsl(28.64deg 66.67% 9%);--border-1-info: hsl(207.82deg 70.2% 40%);--border-2-info: hsl(207.77deg 69.94% 29%);--border-3-info: hsl(208.04deg 69.93% 21%);--border-4-info: hsl(208.52deg 62.89% 14%);--border-5-info: hsl(207.78deg 65.85% 10.5%);--focus-ring: var(--text-2-brand)}@layer anta{a-button:not([tone]),a[role=button][data-anta]:not([tone]),button[data-anta]:not([tone]),input[data-anta]:is([type=reset],[type=submit]):not([tone]){--button-bg-primary-rest: #635b65;--button-bg-primary-hover: #534c57;--button-bg-primary-active: #49424c;--button-bg-secondary-rest: #45374c12;--button-bg-secondary-hover: #44374b1a;--button-bg-secondary-active: #44374b26;--button-fg-secondary-rest: #534c57;--button-fg-secondary-hover: #49424c;--button-fg-secondary-l-shift: .05;--button-fg-tertiary-rest: #635b65;--button-fg-tertiary-hover: #534c57;--button-bg-tertiary-hover: #44374b0d;--button-bg-tertiary-active: #44374b1a;--button-fg-quaternary-rest: #635b65;--button-fg-quaternary-hover: #49424c}a-button[tone=brand],a[role=button][data-anta][tone=brand],button[data-anta][tone=brand],input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--button-bg-primary-rest: #5f4bc3;--button-bg-primary-hover: #503cb4;--button-bg-primary-active: #483493;--button-bg-secondary-rest: #7460d71a;--button-bg-secondary-hover: #7460d726;--button-bg-secondary-active: #7460d733;--button-fg-secondary-rest: #5f4bc3;--button-fg-secondary-hover: #503cb4;--button-fg-tertiary-rest: #5f4bc3;--button-fg-tertiary-hover: #503cb4;--button-bg-tertiary-hover: #7460d71a;--button-bg-tertiary-active: #7460d726;--button-fg-quaternary-rest: #5f4bc3;--button-fg-quaternary-hover: #483493}a-button[tone=critical],a[role=button][data-anta][tone=critical],button[data-anta][tone=critical],input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--button-bg-primary-rest: #c9302c;--button-bg-primary-hover: #b02120;--button-bg-primary-active: #a01c1c;--button-bg-secondary-rest: #de45451a;--button-bg-secondary-hover: #de454526;--button-bg-secondary-active: #de454533;--button-fg-secondary-rest: #c9302c;--button-fg-secondary-hover: #b02120;--button-fg-tertiary-rest: #c9302c;--button-fg-tertiary-hover: #b02120;--button-bg-tertiary-hover: #de45451a;--button-bg-tertiary-active: #de454533;--button-fg-quaternary-rest: #c9302c;--button-fg-quaternary-hover: #a01c1c}a-button[tone=info],a[role=button][data-anta][tone=info],button[data-anta][tone=info],input[data-anta]:is([type=reset],[type=submit])[tone=info]{--button-bg-primary-rest: #1f6eb2;--button-bg-primary-hover: #1a5b93;--button-bg-primary-active: #175082;--button-bg-secondary-rest: #2686d91a;--button-bg-secondary-hover: #2686d926;--button-bg-secondary-active: #2686d933;--button-fg-secondary-rest: #1f6eb2;--button-fg-secondary-hover: #1a5b93;--button-fg-tertiary-rest: #1f6eb2;--button-fg-tertiary-hover: #1a5b93;--button-bg-tertiary-hover: #2686d91a;--button-bg-tertiary-active: #2686d926;--button-fg-quaternary-rest: #1f6eb2;--button-fg-quaternary-hover: #175082}a-button[tone=success],a[role=button][data-anta][tone=success],button[data-anta][tone=success],input[data-anta]:is([type=reset],[type=submit])[tone=success]{--button-bg-primary-rest: #2a7e43;--button-bg-primary-hover: #226737;--button-bg-primary-active: #1f5c31;--button-bg-secondary-rest: #3295501a;--button-bg-secondary-hover: #32955026;--button-bg-secondary-active: #32955033;--button-fg-secondary-rest: #2a7e43;--button-fg-secondary-hover: #226737;--button-fg-tertiary-rest: #2a7e43;--button-fg-tertiary-hover: #226737;--button-bg-tertiary-hover: #3295501a;--button-bg-tertiary-active: #32955026;--button-fg-quaternary-rest: #2a7e43;--button-fg-quaternary-hover: #1f5c31}a-button[tone=warning],a[role=button][data-anta][tone=warning],button[data-anta][tone=warning],input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--button-bg-primary-rest: #c37416;--button-bg-primary-hover: #ae6613;--button-bg-primary-active: #995200;--button-bg-secondary-rest: #c374161a;--button-bg-secondary-hover: #c3741626;--button-bg-secondary-active: #c3741633;--button-fg-secondary-rest: #c37416;--button-fg-secondary-hover: #ae6613;--button-fg-tertiary-rest: #c37416;--button-fg-tertiary-hover: #ae6613;--button-bg-tertiary-hover: #c374161a;--button-bg-tertiary-active: #c3741633;--button-fg-quaternary-rest: #c37416;--button-fg-quaternary-hover: #995200}.dark a-button:not([tone]),.dark a[role=button][data-anta]:not([tone]),.dark button[data-anta]:not([tone]),.dark input[data-anta]:is([type=reset],[type=submit]):not([tone]){--button-bg-primary-rest: #534c57;--button-bg-primary-hover: #635b65;--button-bg-primary-active: #938d96;--button-bg-secondary-rest: #e4d1ef1c;--button-bg-secondary-hover: #e4d1ef24;--button-bg-secondary-active: #e4d1ef2e;--button-fg-secondary-rest: #c1b9c1;--button-fg-secondary-hover: #d4ced4;--button-fg-secondary-l-shift: 0;--button-fg-tertiary-rest: #afa9b1;--button-fg-tertiary-hover: #afa9b1;--button-bg-tertiary-hover: #e4d1ef14;--button-bg-tertiary-active: #e4d1ef21;--button-fg-quaternary-rest: #afa9b1;--button-fg-quaternary-hover: #cac4ca}.dark a-button[tone=brand],.dark a[role=button][data-anta][tone=brand],.dark button[data-anta][tone=brand],.dark input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--button-bg-primary-rest: #503cb4;--button-bg-primary-hover: #5f4bc3;--button-bg-primary-active: #7460d7;--button-bg-secondary-rest: #7460d73b;--button-bg-secondary-hover: #7460d747;--button-bg-secondary-active: #7460d754;--button-fg-secondary-rest: #c5baff;--button-fg-secondary-hover: #d2cbf6;--button-fg-tertiary-rest: #ada0ee;--button-fg-tertiary-hover: #bcb1f1;--button-bg-tertiary-hover: #7460d73b;--button-bg-tertiary-active: #7460d747;--button-fg-quaternary-rest: #ada0ee;--button-fg-quaternary-hover: #c7bef4}.dark a-button[tone=critical],.dark a[role=button][data-anta][tone=critical],.dark button[data-anta][tone=critical],.dark input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--button-bg-primary-rest: #b02120;--button-bg-primary-hover: #c9302c;--button-bg-primary-active: #de4545;--button-bg-secondary-rest: #de45453b;--button-bg-secondary-hover: #de454547;--button-bg-secondary-active: #de454554;--button-fg-secondary-rest: #ffabac;--button-fg-secondary-hover: #f4c2c2;--button-fg-tertiary-rest: #e78e90;--button-fg-tertiary-hover: #efa4a4;--button-bg-tertiary-hover: #de45453b;--button-bg-tertiary-active: #de454547;--button-fg-quaternary-rest: #e78e90;--button-fg-quaternary-hover: #ffabac}.dark a-button[tone=info],.dark a[role=button][data-anta][tone=info],.dark button[data-anta][tone=info],.dark input[data-anta]:is([type=reset],[type=submit])[tone=info]{--button-bg-primary-rest: #1a5b93;--button-bg-primary-hover: #1f6eb2;--button-bg-primary-active: #2686d9;--button-bg-secondary-rest: #2686d93b;--button-bg-secondary-hover: #2686d947;--button-bg-secondary-active: #2686d954;--button-fg-secondary-rest: #9ed2ff;--button-fg-secondary-hover: #bad6f3;--button-fg-tertiary-rest: #7db6e8;--button-fg-tertiary-hover: #93c5ec;--button-bg-tertiary-hover: #2686d93b;--button-bg-tertiary-active: #2686d947;--button-fg-quaternary-rest: #7db6e8;--button-fg-quaternary-hover: #a6cdef}.dark a-button[tone=success],.dark a[role=button][data-anta][tone=success],.dark button[data-anta][tone=success],.dark input[data-anta]:is([type=reset],[type=submit])[tone=success]{--button-bg-primary-rest: #226737;--button-bg-primary-hover: #2a7e43;--button-bg-primary-active: #329550;--button-bg-secondary-rest: #3295503b;--button-bg-secondary-hover: #32955047;--button-bg-secondary-active: #32955054;--button-fg-secondary-rest: #8ceca9;--button-fg-secondary-hover: #b3e5c2;--button-fg-tertiary-rest: #74cd8e;--button-fg-tertiary-hover: #88d7a0;--button-bg-tertiary-hover: #3295503b;--button-bg-tertiary-active: #32955047;--button-fg-quaternary-rest: #74cd8e;--button-fg-quaternary-hover: #9ddeb1}.dark a-button[tone=warning],.dark a[role=button][data-anta][tone=warning],.dark button[data-anta][tone=warning],.dark input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--button-bg-primary-rest: #7f410b;--button-bg-primary-hover: #995200;--button-bg-primary-active: #ae6613;--button-bg-secondary-rest: #c374163b;--button-bg-secondary-hover: #c3741647;--button-bg-secondary-active: #c3741654;--button-fg-secondary-rest: #f7c06e;--button-fg-secondary-hover: #f3cc91;--button-fg-tertiary-rest: #e1a452;--button-fg-tertiary-hover: #edb25a;--button-bg-tertiary-hover: #c374163b;--button-bg-tertiary-active: #c3741647;--button-fg-quaternary-rest: #e1a452;--button-fg-quaternary-hover: #f0bf75}a-checkbox[tone=brand],a-checkbox[tone-selected=brand]{--checkbox-bg-selected: #5f4bc3;--checkbox-bg-selected-hover: #503cb4;--checkbox-bg-selected-active: #483493}a-checkbox[tone=neutral],a-checkbox[tone-selected=neutral]{--checkbox-bg-selected: #878089;--checkbox-bg-selected-hover: #776e77;--checkbox-bg-selected-active: #635b65}a-checkbox[tone=info],a-checkbox[tone-selected=info]{--checkbox-bg-selected: #1f6eb2;--checkbox-bg-selected-hover: #1a5b93;--checkbox-bg-selected-active: #175082}a-checkbox[tone=success],a-checkbox[tone-selected=success]{--checkbox-bg-selected: #2a7e43;--checkbox-bg-selected-hover: #226737;--checkbox-bg-selected-active: #1f5c31}a-checkbox[tone=warning],a-checkbox[tone-selected=warning]{--checkbox-bg-selected: #c37416;--checkbox-bg-selected-hover: #ae6613;--checkbox-bg-selected-active: #995200}a-checkbox[tone=critical],a-checkbox[tone-selected=critical]{--checkbox-bg-selected: #c9302c;--checkbox-bg-selected-hover: #b02120;--checkbox-bg-selected-active: #a01c1c}a-checkbox[tone=brand]{--checkbox-bg: #fcfcfe;--checkbox-border: #bcb1f1;--checkbox-border-hover: #9e8eeb;--checkbox-border-active: #9081df}a-checkbox[tone=info]{--checkbox-bg: #fbfcfe;--checkbox-border: #93c5ec;--checkbox-border-hover: #69ace5;--checkbox-border-active: #56a1e1}a-checkbox[tone=success]{--checkbox-bg: #f7fcf9;--checkbox-border: #88d7a0;--checkbox-border-hover: #5bc87b;--checkbox-border-active: #44c169}a-checkbox[tone=warning]{--checkbox-bg: #fefbf6;--checkbox-border: #edb25a;--checkbox-border-hover: #e09127;--checkbox-border-active: #d88118}a-checkbox[tone=critical]{--checkbox-bg: #fefbfb;--checkbox-border: #efa4a4;--checkbox-border-hover: #e87f7f;--checkbox-border-active: #e56c6c}.dark a-checkbox:not([tone]):not([tone-selected]){--checkbox-border-neutral: #49424c;--checkbox-border-hover: #635b65;--checkbox-border-active: #776e77;--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65;--checkbox-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-checkbox[tone=brand],.dark a-checkbox[tone-selected=brand]{--checkbox-bg-selected: #503cb4;--checkbox-bg-selected-hover: #5f4bc3;--checkbox-bg-selected-active: #7460d7}.dark a-checkbox[tone=neutral],.dark a-checkbox[tone-selected=neutral]{--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65}.dark a-checkbox[tone=info],.dark a-checkbox[tone-selected=info]{--checkbox-bg-selected: #1a5b93;--checkbox-bg-selected-hover: #1f6eb2;--checkbox-bg-selected-active: #2686d9}.dark a-checkbox[tone=success],.dark a-checkbox[tone-selected=success]{--checkbox-bg-selected: #226737;--checkbox-bg-selected-hover: #2a7e43;--checkbox-bg-selected-active: #329550}.dark a-checkbox[tone=warning],.dark a-checkbox[tone-selected=warning]{--checkbox-bg-selected: #7f410b;--checkbox-bg-selected-hover: #995200;--checkbox-bg-selected-active: #ae6613}.dark a-checkbox[tone=critical],.dark a-checkbox[tone-selected=critical]{--checkbox-bg-selected: #b02120;--checkbox-bg-selected-hover: #c9302c;--checkbox-bg-selected-active: #de4545}.dark a-checkbox[tone=brand]{--checkbox-bg: #0b0916;--checkbox-border: #483493;--checkbox-border-hover: #5f4bc3;--checkbox-border-active: #7460d7}.dark a-checkbox[tone=info]{--checkbox-bg: #040d18;--checkbox-border: #175082;--checkbox-border-hover: #1f6eb2;--checkbox-border-active: #2686d9}.dark a-checkbox[tone=success]{--checkbox-bg: #041008;--checkbox-border: #1f5c31;--checkbox-border-hover: #2a7e43;--checkbox-border-active: #329550}.dark a-checkbox[tone=warning]{--checkbox-bg: #120a03;--checkbox-border: #6a3b0c;--checkbox-border-hover: #995200;--checkbox-border-active: #ae6613}.dark a-checkbox[tone=critical]{--checkbox-bg: #190405;--checkbox-border: #a01c1c;--checkbox-border-hover: #c9302c;--checkbox-border-active: #de4545}a-radio:not([tone]):not([tone-selected]){--radio-border-width: 1.5px;--radio-bg: var(--bg-1);--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65;--radio-border-neutral: #d4ced4;--radio-border: var(--radio-border-neutral);--radio-border-hover: #c1b9c1;--radio-border-active: #9f99a1;--radio-border-disabled: color-mix(in oklch, #44374b 10%, transparent)}a-radio[tone=brand],a-radio[tone-selected=brand],a-radio-group[tone=brand] a-radio:not([tone]),a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-bg-selected: #5f4bc3;--radio-bg-selected-hover: #503cb4;--radio-bg-selected-active: #483493}a-radio[tone=neutral],a-radio[tone-selected=neutral],a-radio-group[tone=neutral] a-radio:not([tone]),a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65}a-radio[tone=info],a-radio[tone-selected=info],a-radio-group[tone=info] a-radio:not([tone]),a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-bg-selected: #1f6eb2;--radio-bg-selected-hover: #1a5b93;--radio-bg-selected-active: #175082}a-radio[tone=success],a-radio[tone-selected=success],a-radio-group[tone=success] a-radio:not([tone]),a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-bg-selected: #2a7e43;--radio-bg-selected-hover: #226737;--radio-bg-selected-active: #1f5c31}a-radio[tone=warning],a-radio[tone-selected=warning],a-radio-group[tone=warning] a-radio:not([tone]),a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-bg-selected: #c37416;--radio-bg-selected-hover: #ae6613;--radio-bg-selected-active: #995200}a-radio[tone=critical],a-radio[tone-selected=critical],a-radio-group[tone=critical] a-radio:not([tone]),a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-bg-selected: #c9302c;--radio-bg-selected-hover: #b02120;--radio-bg-selected-active: #a01c1c}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #fcfcfe;--radio-border: #bcb1f1;--radio-border-hover: #9e8eeb;--radio-border-active: #9081df}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #fbfcfe;--radio-border: #93c5ec;--radio-border-hover: #69ace5;--radio-border-active: #56a1e1}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #f7fcf9;--radio-border: #88d7a0;--radio-border-hover: #5bc87b;--radio-border-active: #44c169}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #fefbf6;--radio-border: #edb25a;--radio-border-hover: #e09127;--radio-border-active: #d88118}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #fefbfb;--radio-border: #efa4a4;--radio-border-hover: #e87f7f;--radio-border-active: #e56c6c}.dark a-radio:not([tone]):not([tone-selected]){--radio-border-hover: #635b65;--radio-border-active: #776e77;--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65;--radio-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-radio[tone=brand],.dark a-radio[tone-selected=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]),.dark a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-bg-selected: #503cb4;--radio-bg-selected-hover: #5f4bc3;--radio-bg-selected-active: #7460d7}.dark a-radio[tone=neutral],.dark a-radio[tone-selected=neutral],.dark a-radio-group[tone=neutral] a-radio:not([tone]),.dark a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65}.dark a-radio[tone=info],.dark a-radio[tone-selected=info],.dark a-radio-group[tone=info] a-radio:not([tone]),.dark a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-bg-selected: #1a5b93;--radio-bg-selected-hover: #1f6eb2;--radio-bg-selected-active: #2686d9}.dark a-radio[tone=success],.dark a-radio[tone-selected=success],.dark a-radio-group[tone=success] a-radio:not([tone]),.dark a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-bg-selected: #226737;--radio-bg-selected-hover: #2a7e43;--radio-bg-selected-active: #329550}.dark a-radio[tone=warning],.dark a-radio[tone-selected=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]),.dark a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-bg-selected: #7f410b;--radio-bg-selected-hover: #995200;--radio-bg-selected-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio[tone-selected=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]),.dark a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-bg-selected: #b02120;--radio-bg-selected-hover: #c9302c;--radio-bg-selected-active: #de4545}.dark a-radio[tone=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #0b0916;--radio-border: #483493;--radio-border-hover: #5f4bc3;--radio-border-active: #7460d7}.dark a-radio[tone=info],.dark a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #040d18;--radio-border: #175082;--radio-border-hover: #1f6eb2;--radio-border-active: #2686d9}.dark a-radio[tone=success],.dark a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #041008;--radio-border: #1f5c31;--radio-border-hover: #2a7e43;--radio-border-active: #329550}.dark a-radio[tone=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #120a03;--radio-border: #6a3b0c;--radio-border-hover: #995200;--radio-border-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #190405;--radio-border: #a01c1c;--radio-border-hover: #c9302c;--radio-border-active: #de4545}a-tag:not([tone]){--tag-tint: #44374b;--tag-bg-solid: #776e77;--tag-edge: var(--tag-tint);--_tag-bg-alpha: 7%;--_tag-border-alpha: 15%;--_tag-edge-alpha: 25%}a-tag[tone=brand]{--tag-tint: #7460d7;--tag-bg-solid: #7460d7;--tag-edge: var(--text-2-brand);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=info]{--tag-tint: #2686d9;--tag-bg-solid: #2686d9;--tag-edge: var(--text-2-info);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=success]{--tag-tint: #329550;--tag-bg-solid: #329550;--tag-edge: var(--text-2-success);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=warning]{--tag-tint: #c37416;--tag-bg-solid: #ae6613;--tag-edge: var(--text-2-warning);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=critical]{--tag-tint: #de4545;--tag-bg-solid: #de4545;--tag-edge: var(--text-2-critical);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}.dark a-tag:not([tone]),.dark a-tag[tone=neutral]{--tag-tint: #e4d1ef;--tag-bg-solid: #635b65;--_tag-bg-alpha: 12%}.dark a-tag[tone=brand],.dark a-tag[tone=info],.dark a-tag[tone=success],.dark a-tag[tone=warning],.dark a-tag[tone=critical]{--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tag[tone=brand]{--tag-bg-solid: #5f4bc3}.dark a-tag[tone=info]{--tag-bg-solid: #1f6eb2}.dark a-tag[tone=success]{--tag-bg-solid: #2a7e43}.dark a-tag[tone=warning]{--tag-bg-solid: #995200}.dark a-tag[tone=critical]{--tag-bg-solid: #c9302c}.dark a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tabs{--tabs-track-bg: color-mix(in oklch, #e4d1ef 7%, transparent);--tab-secondary-bg: color-mix(in oklch, #e4d1ef 8%, transparent)}a-input:not([tone]){--input-bg: var(--bg-1);--input-border: var(--border-2);--input-hint: var(--text-3)}a-input[status=critical]{--input-bg: #fefbfb;--input-border: #de4545;--input-hint: #c9302c}a-input[status=warning]{--input-bg: #fefbf6;--input-border: #ae6613;--input-hint: #995200}a-input[status=success]{--input-bg: #f7fcf9;--input-border: #329550;--input-hint: #2a7e43}a-input[status=info]{--input-bg: #fbfcfe;--input-border: #2686d9;--input-hint: #175082}a-input[status=brand]{--input-bg: #fcfcfe;--input-border: #7460d7;--input-hint: #5f4bc3}.dark a-input[status=critical]{--input-bg: #1f0506;--input-border: #c9302c;--input-hint: #e25858}.dark a-input[status=warning]{--input-bg: #120a03;--input-border: #995200;--input-hint: #c37416}.dark a-input[status=success]{--input-bg: #041008;--input-border: #2a7e43;--input-hint: #3aab5c}.dark a-input[status=info]{--input-bg: #040d18;--input-border: #1f6eb2;--input-hint: #3e93dd}.dark a-input[status=brand]{--input-bg: #0b0916;--input-border: #5f4bc3;--input-hint: #8270db}a-input:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}a-input[status]:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}.dark a-input:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f}.dark a-input[status]:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-hint: var(--text-5)}.dark a-input:not([status]):not([tone]){--input-border: #49424c}.dark a-input[status=success]{--input-border: var(--border-1-success)}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: var(--border-2);--input-time-border-hover: var(--border-1);--input-time-hint: var(--text-3)}a-input-time[status=critical]{--input-time-bg: #fefbfb;--input-time-border: #de4545;--input-time-border-hover: #de4545;--input-time-hint: #c9302c}a-input-time[status=warning]{--input-time-bg: #fefbf6;--input-time-border: #ae6613;--input-time-border-hover: #ae6613;--input-time-hint: #995200}a-input-time[status=success]{--input-time-bg: #f7fcf9;--input-time-border: #329550;--input-time-border-hover: #329550;--input-time-hint: #2a7e43}a-input-time[status=info]{--input-time-bg: #fbfcfe;--input-time-border: #2686d9;--input-time-border-hover: #2686d9;--input-time-hint: #175082}a-input-time[status=brand]{--input-time-bg: #fcfcfe;--input-time-border: #7460d7;--input-time-border-hover: #7460d7;--input-time-hint: #5f4bc3}.dark a-input-time[status=critical]{--input-time-bg: #1f0506;--input-time-border: #c9302c;--input-time-border-hover: #c9302c;--input-time-hint: #e25858}.dark a-input-time[status=warning]{--input-time-bg: #120a03;--input-time-border: #995200;--input-time-border-hover: #995200;--input-time-hint: #c37416}.dark a-input-time[status=success]{--input-time-bg: #041008;--input-time-border: var(--border-1-success);--input-time-border-hover: var(--border-1-success);--input-time-hint: #3aab5c}.dark a-input-time[status=info]{--input-time-bg: #040d18;--input-time-border: #1f6eb2;--input-time-border-hover: #1f6eb2;--input-time-hint: #3e93dd}.dark a-input-time[status=brand]{--input-time-bg: #0b0916;--input-time-border: #5f4bc3;--input-time-border-hover: #5f4bc3;--input-time-hint: #8270db}a-input-time:disabled{--input-time-bg: #44374b12;--input-time-border: #44374b26;--input-time-border-hover: #44374b26;--input-time-hint: var(--text-5)}.dark a-input-time:disabled{--input-time-bg: #e4d1ef0d;--input-time-border: #e4d1ef1f;--input-time-border-hover: #e4d1ef1f}.dark a-input-time:not([status]){--input-time-border: #49424c;--input-time-border-hover: #635b65}}
|