@jonmilner/ui 0.7.0 → 0.8.0
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/dist/Badge/Badge.css.mjs +8 -3
- package/dist/Badge/index.d.mts +4 -2
- package/dist/Badge/index.mjs +27 -21
- package/dist/SearchField/SearchField.css +1 -1
- package/dist/SearchField/SearchField.css.mjs +2 -2
- package/dist/SearchField/client.mjs +38 -37
- package/dist/Tabs/Tabs.css +1 -1
- package/dist/Tag/Tag.css.mjs +14 -4
- package/dist/Tag/index.d.mts +3 -1
- package/dist/Tag/index.mjs +46 -42
- package/dist/base.css +1 -1
- package/dist/brands/default.mjs +35 -9
- package/dist/brands/forced-colors.mjs +14 -0
- package/dist/contrast/contrast.mjs +36 -30
- package/dist/docs/Badge.md +13 -4
- package/dist/docs/Icon.md +1 -1
- package/dist/docs/Tag.md +12 -3
- package/dist/docs/llms.txt +1 -1
- package/dist/docs/manifest.json +71 -8
- package/dist/docs/migrations/0.8.0.md +69 -0
- package/dist/docs/theming.md +5 -1
- package/dist/styles/atoms.css +1 -1
- package/dist/styles/atoms.css.d.mts +2 -2
- package/dist/styles/atoms.css.mjs +71 -49
- package/dist/styles/subtle-fills.d.mts +29 -0
- package/dist/styles/subtle-fills.mjs +29 -0
- package/dist/tokens/contract.d.mts +1 -1
- package/dist/tokens/roles.d.mts +1 -1
- package/dist/tokens/roles.mjs +1 -21
- package/package.json +1 -1
package/dist/Badge/Badge.css.mjs
CHANGED
|
@@ -12,11 +12,16 @@ var t = "_1ixfil10", n = e({
|
|
|
12
12
|
accent: "_1ixfil13",
|
|
13
13
|
success: "_1ixfil14",
|
|
14
14
|
warning: "_1ixfil15",
|
|
15
|
-
danger: "_1ixfil16"
|
|
15
|
+
danger: "_1ixfil16",
|
|
16
|
+
done: "_1ixfil17"
|
|
17
|
+
},
|
|
18
|
+
subtle: {
|
|
19
|
+
true: "_1ixfil18",
|
|
20
|
+
false: "_1ixfil19"
|
|
16
21
|
},
|
|
17
22
|
size: {
|
|
18
|
-
sm: "
|
|
19
|
-
med: "
|
|
23
|
+
sm: "_1ixfil1a",
|
|
24
|
+
med: "_1ixfil1b"
|
|
20
25
|
}
|
|
21
26
|
},
|
|
22
27
|
defaultVariants: {},
|
package/dist/Badge/index.d.mts
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { OmitEach } from "../types.mjs";
|
|
2
2
|
import { StyleProps } from "../Box/index.mjs";
|
|
3
|
+
import { Tone } from "../styles/subtle-fills.mjs";
|
|
3
4
|
import { ComponentPropsWithRef } from "react";
|
|
4
5
|
//#region src/Badge/index.d.ts
|
|
5
6
|
export type BadgeOwnProps = {
|
|
6
7
|
size?: "sm" | "med";
|
|
7
|
-
|
|
8
|
+
subtle?: boolean;
|
|
9
|
+
variant?: Tone;
|
|
8
10
|
};
|
|
9
11
|
export type BadgeProps = StyleProps & BadgeOwnProps & OmitEach<ComponentPropsWithRef<"span">, keyof StyleProps | keyof BadgeOwnProps>;
|
|
10
|
-
export declare function Badge({ variant, size, display, paddingInline, paddingBlock, borderRadius, backgroundColor, color, className, children, ...props }: BadgeProps): import("react").JSX.Element | null;
|
|
12
|
+
export declare function Badge({ variant, subtle, size, display, paddingInline, paddingBlock, borderRadius, backgroundColor, color, className, children, ...props }: BadgeProps): import("react").JSX.Element | null;
|
|
11
13
|
//#endregion
|
package/dist/Badge/index.mjs
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { join as e } from "../styles/join.mjs";
|
|
2
2
|
import { Box as t } from "../Box/index.mjs";
|
|
3
3
|
import { Text as n } from "../Text/index.mjs";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
4
|
+
import { subtleFills as r } from "../styles/subtle-fills.mjs";
|
|
5
|
+
import { badge as i, root as a } from "./Badge.css.mjs";
|
|
6
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
6
7
|
//#region src/Badge/index.tsx
|
|
7
|
-
var
|
|
8
|
+
var s = {
|
|
8
9
|
neutral: {
|
|
9
10
|
backgroundColor: "bgMuted",
|
|
10
11
|
color: "fgMuted"
|
|
@@ -24,8 +25,12 @@ var o = {
|
|
|
24
25
|
danger: {
|
|
25
26
|
backgroundColor: "danger",
|
|
26
27
|
color: "dangerFg"
|
|
28
|
+
},
|
|
29
|
+
done: {
|
|
30
|
+
backgroundColor: "done",
|
|
31
|
+
color: "doneFg"
|
|
27
32
|
}
|
|
28
|
-
},
|
|
33
|
+
}, c = {
|
|
29
34
|
sm: {
|
|
30
35
|
paddingInline: "6",
|
|
31
36
|
paddingBlock: "4"
|
|
@@ -35,29 +40,30 @@ var o = {
|
|
|
35
40
|
paddingBlock: "6"
|
|
36
41
|
}
|
|
37
42
|
};
|
|
38
|
-
function
|
|
39
|
-
return
|
|
40
|
-
...
|
|
43
|
+
function l({ variant: l = "neutral", subtle: u = !1, size: d = "med", display: f = "inline-block", paddingInline: p = c[d].paddingInline, paddingBlock: m = c[d].paddingBlock, borderRadius: h = "sm", backgroundColor: g = (u ? r : s)[l].backgroundColor, color: _ = (u ? r : s)[l].color, className: v, children: y, ...b }) {
|
|
44
|
+
return y == null || typeof y == "boolean" || y === "" ? null : /* @__PURE__ */ o(t, {
|
|
45
|
+
...b,
|
|
41
46
|
as: "span",
|
|
42
|
-
backgroundColor:
|
|
43
|
-
borderRadius:
|
|
44
|
-
className: e(
|
|
45
|
-
variant:
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
47
|
+
backgroundColor: g,
|
|
48
|
+
borderRadius: h,
|
|
49
|
+
className: e(a, i({
|
|
50
|
+
variant: l,
|
|
51
|
+
subtle: u,
|
|
52
|
+
size: d
|
|
53
|
+
}), v),
|
|
54
|
+
color: _,
|
|
55
|
+
display: f,
|
|
56
|
+
paddingBlock: m,
|
|
57
|
+
paddingInline: p,
|
|
58
|
+
children: /* @__PURE__ */ o(n, {
|
|
53
59
|
as: "span",
|
|
54
60
|
font: "label",
|
|
55
|
-
size:
|
|
61
|
+
size: d,
|
|
56
62
|
weight: "medium",
|
|
57
63
|
wrap: "nowrap",
|
|
58
|
-
children:
|
|
64
|
+
children: y
|
|
59
65
|
})
|
|
60
66
|
});
|
|
61
67
|
}
|
|
62
68
|
//#endregion
|
|
63
|
-
export {
|
|
69
|
+
export { l as Badge };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
|
-
@layer components.search-field{._1cj8r6g0{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}.
|
|
2
|
+
@layer components.search-field{._1cj8r6g0{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}._1cj8r6g2{grid-template-columns:var(--space-8) auto minmax(0, 1fr) auto var(--space-4)}._1cj8r6g3{grid-template-columns:var(--space-12) auto minmax(0, 1fr) auto var(--space-4)}._1cj8r6g4{grid-template-columns:var(--space-16) auto minmax(0, 1fr) auto var(--space-4)}._1cj8r6g5{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-med);background-color:var(--color-bg);inline-size:100%;min-inline-size:0;color:var(--color-fg);grid-area:1/1/auto/-1;padding-block:0}._1cj8r6g5::placeholder{color:var(--color-fg-muted);opacity:1}._1cj8r6g5:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1cj8r6g5:disabled{background-color:var(--color-bg-muted);color:var(--color-fg-muted);cursor:not-allowed;border-style:dashed}._1cj8r6g5[aria-invalid=true]{border-color:var(--color-danger)}._1cj8r6g5::-webkit-search-cancel-button{appearance:none}._1cj8r6g5::-webkit-search-decoration{appearance:none}._1cj8r6g6{block-size:var(--size-sm);padding-inline-start:calc(var(--space-8) + var(--space-8) + var(--font-size-sm));padding-inline-end:var(--size-sm)}._1cj8r6g7{block-size:var(--size-med);padding-inline-start:calc(var(--space-12) + var(--space-8) + var(--font-size-med));padding-inline-end:var(--size-med)}._1cj8r6g8{block-size:var(--size-lg);padding-inline-start:calc(var(--space-16) + var(--space-8) + var(--font-size-lg));padding-inline-end:var(--size-lg)}._1cj8r6g9{pointer-events:none;color:var(--color-fg-muted);grid-area:1/2}._1cj8r6ga{border-color:#0000;grid-area:1/4}@media (forced-colors:active){._1cj8r6g5:disabled{color:graytext;border-color:graytext}}}
|
|
@@ -22,6 +22,6 @@ var t = "_1cj8r6g0", n = e({
|
|
|
22
22
|
} },
|
|
23
23
|
defaultVariants: {},
|
|
24
24
|
compoundVariants: []
|
|
25
|
-
}), i = "_1cj8r6g9";
|
|
25
|
+
}), i = "_1cj8r6g9", a = "_1cj8r6ga";
|
|
26
26
|
//#endregion
|
|
27
|
-
export {
|
|
27
|
+
export { a as clear, t as hiddenLabel, i as icon, r as input, n as root };
|
|
@@ -4,12 +4,12 @@ import { Text as t } from "../Text/index.mjs";
|
|
|
4
4
|
import { IconButton as n } from "../IconButton/index.mjs";
|
|
5
5
|
import { SearchIcon as r } from "../icons/SearchIcon.mjs";
|
|
6
6
|
import { XIcon as i } from "../icons/XIcon.mjs";
|
|
7
|
-
import { icon as a, input as o } from "./SearchField.css.mjs";
|
|
8
|
-
import { jsx as
|
|
9
|
-
import { useRef as
|
|
10
|
-
import { Input as
|
|
7
|
+
import { icon as a, input as o, root as s } from "./SearchField.css.mjs";
|
|
8
|
+
import { jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
9
|
+
import { useRef as u, useState as d } from "react";
|
|
10
|
+
import { Input as f } from "@base-ui/react/input";
|
|
11
11
|
//#region src/SearchField/client.tsx
|
|
12
|
-
var
|
|
12
|
+
var p = {
|
|
13
13
|
sm: {
|
|
14
14
|
size: "sm",
|
|
15
15
|
square: "xs"
|
|
@@ -23,52 +23,53 @@ var f = {
|
|
|
23
23
|
square: "med"
|
|
24
24
|
}
|
|
25
25
|
};
|
|
26
|
-
function
|
|
27
|
-
let
|
|
28
|
-
|
|
29
|
-
},
|
|
30
|
-
if (
|
|
26
|
+
function m({ value: m, defaultValue: h, onValueChange: g, placeholder: _, size: v, disabled: y, required: b, name: x, clearLabel: S, inputProps: { ref: C, onKeyDown: w, ...T } = {} }) {
|
|
27
|
+
let E = u(null), [D, O] = d(h), k = m ?? D, A = (e) => {
|
|
28
|
+
m === void 0 && O(e), g?.(e);
|
|
29
|
+
}, j = k !== "" && (m === void 0 || g !== void 0), M = (e) => {
|
|
30
|
+
if (w?.(e), e.defaultPrevented) return;
|
|
31
31
|
let t = e.nativeEvent.isComposing || e.keyCode === 229;
|
|
32
|
-
e.key === "Escape" &&
|
|
33
|
-
},
|
|
34
|
-
return /* @__PURE__ */
|
|
32
|
+
e.key === "Escape" && j && !t && (e.preventDefault(), e.stopPropagation(), A(""));
|
|
33
|
+
}, N = p[v];
|
|
34
|
+
return /* @__PURE__ */ l(e, {
|
|
35
35
|
alignItems: "center",
|
|
36
|
+
className: s({ size: v }),
|
|
36
37
|
display: "grid",
|
|
37
38
|
children: [
|
|
38
|
-
/* @__PURE__ */
|
|
39
|
-
...
|
|
40
|
-
name:
|
|
41
|
-
onKeyDown:
|
|
42
|
-
onValueChange:
|
|
43
|
-
placeholder:
|
|
44
|
-
ref:
|
|
45
|
-
render: /* @__PURE__ */
|
|
39
|
+
/* @__PURE__ */ c(f, {
|
|
40
|
+
...T,
|
|
41
|
+
name: x,
|
|
42
|
+
onKeyDown: M,
|
|
43
|
+
onValueChange: A,
|
|
44
|
+
placeholder: _,
|
|
45
|
+
ref: C,
|
|
46
|
+
render: /* @__PURE__ */ c(t, {
|
|
46
47
|
as: "input",
|
|
47
|
-
className: o({ size:
|
|
48
|
-
ref:
|
|
49
|
-
size:
|
|
48
|
+
className: o({ size: v }),
|
|
49
|
+
ref: E,
|
|
50
|
+
size: v
|
|
50
51
|
}),
|
|
51
|
-
required:
|
|
52
|
+
required: b,
|
|
52
53
|
type: "search",
|
|
53
|
-
value:
|
|
54
|
+
value: k
|
|
54
55
|
}),
|
|
55
|
-
/* @__PURE__ */
|
|
56
|
-
className: a
|
|
57
|
-
size:
|
|
56
|
+
/* @__PURE__ */ c(r, {
|
|
57
|
+
className: a,
|
|
58
|
+
size: v
|
|
58
59
|
}),
|
|
59
|
-
|
|
60
|
-
className: "
|
|
60
|
+
k !== "" && !y && /* @__PURE__ */ c(n, {
|
|
61
|
+
className: "_1cj8r6ga",
|
|
61
62
|
icon: i,
|
|
62
|
-
label:
|
|
63
|
-
minBlockSize:
|
|
64
|
-
minInlineSize:
|
|
63
|
+
label: S,
|
|
64
|
+
minBlockSize: N.square,
|
|
65
|
+
minInlineSize: N.square,
|
|
65
66
|
onClick: () => {
|
|
66
|
-
|
|
67
|
+
A(""), E.current?.focus();
|
|
67
68
|
},
|
|
68
|
-
size:
|
|
69
|
+
size: N.size
|
|
69
70
|
})
|
|
70
71
|
]
|
|
71
72
|
});
|
|
72
73
|
}
|
|
73
74
|
//#endregion
|
|
74
|
-
export {
|
|
75
|
+
export { m as SearchFieldControl };
|
package/dist/Tabs/Tabs.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
|
-
@layer components.tabs{.xowpd00{border-block-end:var(--space-1) solid var(--color-border)}.xowpd00[aria-orientation=vertical]{border-block-end:none;border-inline-end:var(--space-1) solid var(--color-border);flex-direction:column}.xowpd01{transition:color var(--duration-fast) var(--easing-standard)}.xowpd01[aria-selected=true]{color:var(--color-fg)}.xowpd01[aria-disabled=true]{opacity:.5}.xowpd02{border-block-end:var(--space-2) solid var(--color-accent);opacity:0;scale:calc(1 - var(--scale-lg)) 1;transition:opacity var(--duration-med) var(--easing-standard), scale var(--duration-med) var(--easing-standard);pointer-events:none;inset-block-end:calc(-1 * var(--space-1));inset-inline:0}[
|
|
2
|
+
@layer components.tabs{.xowpd00{border-block-end:var(--space-1) solid var(--color-border)}.xowpd00[aria-orientation=vertical]{border-block-end:none;border-inline-end:var(--space-1) solid var(--color-border);flex-direction:column}.xowpd01{transition:color var(--duration-fast) var(--easing-standard)}.xowpd01[aria-selected=true]{color:var(--color-fg)}.xowpd01[aria-disabled=true]{opacity:.5}.xowpd02{border-block-end:var(--space-2) solid var(--color-accent);opacity:0;scale:calc(1 - var(--scale-lg)) 1;transition:opacity var(--duration-med) var(--easing-standard), scale var(--duration-med) var(--easing-standard);pointer-events:none;inset-block-end:calc(-1 * var(--space-1));inset-inline:0}[data-orientation=vertical]>.xowpd02{inset-inline:auto;border-block-end:none;border-inline-end:var(--space-2) solid var(--color-accent);scale:1 calc(1 - var(--scale-lg));inset-block:0;inset-inline-end:calc(-1 * var(--space-1))}[aria-selected=true]>.xowpd02{opacity:1;scale:1}.xowpd03:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.xowpd03[data-orientation=vertical]{flex-basis:0}@media (hover:hover){.xowpd01:not([aria-disabled=true]):hover{color:var(--color-fg)}}@media (forced-colors:active){.xowpd01[aria-disabled=true]{color:graytext}.xowpd02{border-color:highlight}}}
|
package/dist/Tag/Tag.css.mjs
CHANGED
|
@@ -6,10 +6,20 @@ import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
|
6
6
|
//#region src/Tag/Tag.css.ts
|
|
7
7
|
var t = "_1jsyd8s0", n = "_1jsyd8s1", r = "_1jsyd8s2", i = "_1jsyd8s3", a = e({
|
|
8
8
|
defaultClassName: "_1jsyd8s4",
|
|
9
|
-
variantClassNames: {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
variantClassNames: {
|
|
10
|
+
variant: {
|
|
11
|
+
neutral: "_1jsyd8s5",
|
|
12
|
+
accent: "_1jsyd8s6",
|
|
13
|
+
success: "_1jsyd8s7",
|
|
14
|
+
warning: "_1jsyd8s8",
|
|
15
|
+
danger: "_1jsyd8s9",
|
|
16
|
+
done: "_1jsyd8sa"
|
|
17
|
+
},
|
|
18
|
+
size: {
|
|
19
|
+
sm: "_1jsyd8sb",
|
|
20
|
+
med: "_1jsyd8sc"
|
|
21
|
+
}
|
|
22
|
+
},
|
|
13
23
|
defaultVariants: {},
|
|
14
24
|
compoundVariants: []
|
|
15
25
|
});
|
package/dist/Tag/index.d.mts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { OmitEach } from "../types.mjs";
|
|
2
2
|
import { StyleProps } from "../Box/index.mjs";
|
|
3
|
+
import { Tone } from "../styles/subtle-fills.mjs";
|
|
3
4
|
import { ComponentPropsWithRef } from "react";
|
|
4
5
|
//#region src/Tag/index.d.ts
|
|
5
6
|
export type TagOwnProps = {
|
|
@@ -7,7 +8,8 @@ export type TagOwnProps = {
|
|
|
7
8
|
onRemove?: () => void;
|
|
8
9
|
removeLabel?: string;
|
|
9
10
|
size?: "sm" | "med";
|
|
11
|
+
variant?: Tone;
|
|
10
12
|
};
|
|
11
13
|
export type TagProps = StyleProps & TagOwnProps & OmitEach<ComponentPropsWithRef<"span">, keyof StyleProps | keyof TagOwnProps>;
|
|
12
|
-
export declare function Tag({ size, href, onRemove, removeLabel, display, alignItems, gap, minBlockSize, paddingInlineStart, paddingInlineEnd, borderRadius, backgroundColor, color, maxInlineSize, className, style, children, ...props }: TagProps): import("react").JSX.Element | null;
|
|
14
|
+
export declare function Tag({ variant, size, href, onRemove, removeLabel, display, alignItems, gap, minBlockSize, paddingInlineStart, paddingInlineEnd, borderRadius, backgroundColor, color, maxInlineSize, className, style, children, ...props }: TagProps): import("react").JSX.Element | null;
|
|
13
15
|
//#endregion
|
package/dist/Tag/index.mjs
CHANGED
|
@@ -2,29 +2,30 @@ import { join as e } from "../styles/join.mjs";
|
|
|
2
2
|
import { Box as t } from "../Box/index.mjs";
|
|
3
3
|
import { Clickable as n } from "../Clickable/index.mjs";
|
|
4
4
|
import { Text as r } from "../Text/index.mjs";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
5
|
+
import { subtleFills as i } from "../styles/subtle-fills.mjs";
|
|
6
|
+
import { XIcon as a } from "../icons/XIcon.mjs";
|
|
7
|
+
import { size as o } from "../tokens/scales.mjs";
|
|
8
|
+
import { label as s, link as c, root as l, tag as u } from "./Tag.css.mjs";
|
|
9
|
+
import { jsx as d, jsxs as f } from "react/jsx-runtime";
|
|
9
10
|
//#region src/Tag/index.tsx
|
|
10
|
-
function
|
|
11
|
+
function p(e) {
|
|
11
12
|
if (typeof e == "string" || typeof e == "number") return String(e);
|
|
12
13
|
if (!Array.isArray(e)) return;
|
|
13
|
-
let t = e.map(
|
|
14
|
+
let t = e.map(p);
|
|
14
15
|
return t.every((e) => e !== void 0) ? t.join("") : void 0;
|
|
15
16
|
}
|
|
16
|
-
var
|
|
17
|
+
var m = /* @__PURE__ */ new Set([...Object.keys(o), "full"]), h = /* @__PURE__ */ new Set([
|
|
17
18
|
"",
|
|
18
19
|
"none",
|
|
19
20
|
"auto",
|
|
20
21
|
"initial",
|
|
21
22
|
"unset"
|
|
22
23
|
]);
|
|
23
|
-
function
|
|
24
|
+
function g(e, t) {
|
|
24
25
|
let n = t?.maxInlineSize ?? t?.maxWidth;
|
|
25
|
-
return n == null ? typeof e != "object" || !e ?
|
|
26
|
+
return n == null ? typeof e != "object" || !e ? m.has(e) : e.base != null && Object.values(e).every((e) => e == null || m.has(e)) : !h.has(String(n).trim()) && !/-content\b/.test(String(n));
|
|
26
27
|
}
|
|
27
|
-
var
|
|
28
|
+
var _ = {
|
|
28
29
|
sm: {
|
|
29
30
|
paddingInlineStart: "6",
|
|
30
31
|
paddingInlineEnd: "6"
|
|
@@ -34,50 +35,53 @@ var g = {
|
|
|
34
35
|
paddingInlineEnd: "8"
|
|
35
36
|
}
|
|
36
37
|
};
|
|
37
|
-
function
|
|
38
|
-
if (
|
|
39
|
-
let
|
|
38
|
+
function v({ variant: o = "neutral", size: m = "med", href: h, onRemove: v, removeLabel: y, display: b = "inline-flex", alignItems: x = "center", gap: S = "2", minBlockSize: C = "xs", paddingInlineStart: w = _[m].paddingInlineStart, paddingInlineEnd: T = v ? "2" : _[m].paddingInlineEnd, borderRadius: E = "lg", backgroundColor: D = i[o].backgroundColor, color: O = i[o].color, maxInlineSize: k, className: A, style: j, children: M, ...N }) {
|
|
39
|
+
if (M == null || typeof M == "boolean" || M === "" || p(M) === "") return null;
|
|
40
|
+
let P = g(k, j), F = /* @__PURE__ */ d(r, {
|
|
40
41
|
as: "span",
|
|
41
|
-
className:
|
|
42
|
+
className: s,
|
|
42
43
|
font: "label",
|
|
43
|
-
paddingBlock:
|
|
44
|
-
size:
|
|
45
|
-
truncate:
|
|
44
|
+
paddingBlock: P ? void 0 : "4",
|
|
45
|
+
size: m,
|
|
46
|
+
truncate: P,
|
|
46
47
|
weight: "medium",
|
|
47
|
-
children:
|
|
48
|
-
}),
|
|
49
|
-
return /* @__PURE__ */
|
|
50
|
-
...
|
|
51
|
-
alignItems:
|
|
48
|
+
children: M
|
|
49
|
+
}), I = p(M), L = y ?? (I === void 0 ? void 0 : `Remove ${I}`);
|
|
50
|
+
return /* @__PURE__ */ f(t, {
|
|
51
|
+
...N,
|
|
52
|
+
alignItems: x,
|
|
52
53
|
as: "span",
|
|
53
|
-
backgroundColor:
|
|
54
|
-
borderRadius:
|
|
55
|
-
className: e(
|
|
56
|
-
|
|
54
|
+
backgroundColor: D,
|
|
55
|
+
borderRadius: E,
|
|
56
|
+
className: e(l, u({
|
|
57
|
+
variant: o,
|
|
58
|
+
size: m
|
|
59
|
+
}), A),
|
|
60
|
+
color: O,
|
|
57
61
|
"data-text-reveal": "",
|
|
58
|
-
display:
|
|
59
|
-
gap:
|
|
60
|
-
maxInlineSize:
|
|
61
|
-
minBlockSize:
|
|
62
|
-
paddingInlineEnd:
|
|
63
|
-
paddingInlineStart:
|
|
64
|
-
style:
|
|
65
|
-
children: [
|
|
62
|
+
display: b,
|
|
63
|
+
gap: S,
|
|
64
|
+
maxInlineSize: k,
|
|
65
|
+
minBlockSize: C,
|
|
66
|
+
paddingInlineEnd: T,
|
|
67
|
+
paddingInlineStart: w,
|
|
68
|
+
style: j,
|
|
69
|
+
children: [h ? /* @__PURE__ */ d(n, {
|
|
66
70
|
as: "a",
|
|
67
|
-
className:
|
|
68
|
-
href:
|
|
71
|
+
className: c,
|
|
72
|
+
href: h,
|
|
69
73
|
overflow: "hidden",
|
|
70
|
-
children:
|
|
71
|
-
}) :
|
|
74
|
+
children: F
|
|
75
|
+
}) : F, v && /* @__PURE__ */ d(n, {
|
|
72
76
|
alignSelf: "start",
|
|
73
|
-
"aria-label":
|
|
77
|
+
"aria-label": L ?? "Remove",
|
|
74
78
|
borderRadius: "full",
|
|
75
79
|
className: "_1jsyd8s3",
|
|
76
80
|
flexShrink: 0,
|
|
77
|
-
onClick:
|
|
78
|
-
children: /* @__PURE__ */
|
|
81
|
+
onClick: v,
|
|
82
|
+
children: /* @__PURE__ */ d(a, { size: m })
|
|
79
83
|
})]
|
|
80
84
|
});
|
|
81
85
|
}
|
|
82
86
|
//#endregion
|
|
83
|
-
export {
|
|
87
|
+
export { v as Tag };
|
package/dist/base.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer tokens{:root{--space-0:0rem;--space-1:.0625rem;--space-2:.125rem;--space-4:.25rem;--space-6:.375rem;--space-8:.5rem;--space-12:.75rem;--space-16:1rem;--space-20:1.25rem;--space-24:1.5rem;--space-32:2rem;--space-40:2.5rem;--space-48:3rem;--space-64:4rem;--space-80:5rem;--space-96:6rem;--size-xs:1.5rem;--size-sm:2rem;--size-med:2.5rem;--size-lg:3rem;--size-xl:3.5rem;--container-prose:40rem;--container-page:64rem;--container-wide:80rem;--radius-none:0;--radius-sm:.25rem;--radius-med:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-med:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-sm:1.25;--line-height-med:1.5;--line-height-lg:1.75;--z-index-base:0;--z-index-raised:1;--z-index-dropdown:1000;--z-index-sticky:1100;--z-index-overlay:1200;--z-index-modal:1300;--z-index-popover:1400;--z-index-toast:1500;--z-index-tooltip:1600;--duration-fast:.12s;--duration-med:.2s;--duration-slow:.32s;--easing-standard:cubic-bezier(.2, 0, 0, 1);--easing-enter:cubic-bezier(0, 0, 0, 1);--easing-exit:cubic-bezier(.3, 0, 1, 1);--distance-sm:.25rem;--distance-med:.5rem;--distance-lg:1rem;--scale-sm:.02;--scale-med:.05;--scale-lg:.1}[data-brand]{--shadow-sm:0 1px 2px color-mix(in srgb, var(--color-shadow) 12%, transparent);--shadow-med:0 2px 8px color-mix(in srgb, var(--color-shadow) 14%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 8%, transparent);--shadow-lg:0 8px 24px color-mix(in srgb, var(--color-shadow) 16%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 8%, transparent)}[data-brand][data-mode=light]{color-scheme:light}[data-brand][data-mode=dark]{--shadow-sm:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 40%, transparent);--shadow-med:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--color-shadow) 48%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 32%, transparent);--shadow-lg:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 56%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 32%, transparent);color-scheme:dark}[data-brand][data-mode=system]{color-scheme:light dark}:dir(ltr){--dir:1}:dir(rtl){--dir:-1}@media (prefers-color-scheme:dark){[data-brand][data-mode=system]{--shadow-sm:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 40%, transparent);--shadow-med:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--color-shadow) 48%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 32%, transparent);--shadow-lg:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 56%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 32%, transparent)}}@media (prefers-reduced-motion:reduce){:root{--distance-sm:0rem;--distance-med:0rem;--distance-lg:0rem;--scale-sm:0;--scale-med:0;--scale-lg:0;--duration-fast:.12s;--duration-med:.12s;--duration-slow:.12s}}}
|
|
3
3
|
|
|
4
|
-
@font-face{src:local(Arial),local(ArialMT);font-weight:400;font-style:normal;size-adjust:101.568%;ascent-override:95.3892%;descent-override:23.7511%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Arial Bold),local(Arial-BoldMT);font-weight:700;font-style:normal;size-adjust:101.637%;ascent-override:95.3241%;descent-override:23.7349%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Arial Italic),local(Arial-ItalicMT);font-weight:400;font-style:italic;size-adjust:101.637%;ascent-override:95.3241%;descent-override:23.7349%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Arial Bold Italic),local(Arial-BoldItalicMT);font-weight:700;font-style:italic;size-adjust:101.706%;ascent-override:95.2591%;descent-override:23.7187%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Menlo Regular),local(Menlo-Regular);font-weight:400;font-style:normal;size-adjust:100.137%;ascent-override:101.871%;descent-override:29.9621%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Menlo Bold),local(Menlo-Bold);font-weight:700;font-style:normal;size-adjust:100.003%;ascent-override:102.007%;descent-override:30.0022%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Menlo Italic),local(Menlo-Italic);font-weight:400;font-style:italic;size-adjust:100.137%;ascent-override:101.871%;descent-override:29.9621%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Menlo Bold Italic),local(Menlo-BoldItalic);font-weight:700;font-style:italic;size-adjust:100.003%;ascent-override:102.007%;descent-override:30.0022%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Consolas);font-weight:400;font-style:normal;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Consolas Bold),local(Consolas-Bold);font-weight:700;font-style:normal;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Consolas Italic),local(Consolas-Italic);font-weight:400;font-style:italic;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Consolas Bold Italic),local(Consolas-BoldItalic);font-weight:700;font-style:italic;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Courier New),local(CourierNewPSMT);font-weight:400;font-style:normal;size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@font-face{src:local(Courier New Bold),local(CourierNewPS-BoldMT);font-weight:700;font-style:normal;size-adjust:123.353%;ascent-override:82.6977%;descent-override:24.3229%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@font-face{src:local(Courier New Italic),local(CourierNewPS-ItalicMT);font-weight:400;font-style:italic;size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@font-face{src:local(Courier New Bold Italic),local(CourierNewPS-BoldItalicMT);font-weight:700;font-style:italic;size-adjust:123.353%;ascent-override:82.6977%;descent-override:24.3229%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@layer tokens{[data-brand=default]{--color-bg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-bg-muted:light-dark(oklch(96.8% .004 265),oklch(27% .01 265));--color-bg-raised:light-dark(oklch(100% 0 0),oklch(20.5% .008 265));--color-fg:light-dark(oklch(14.5% .006 265),oklch(98.5% .002 265));--color-fg-muted:light-dark(oklch(44.5% .014 265),oklch(71% .012 265));--color-border:light-dark(oklch(92.5% .006 265),oklch(27% .01 265));--color-border-strong:oklch(55.5% .014 265);--color-accent:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-accent-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-accent-fill:light-dark(oklch(54.6% .19 258),oklch(48.8% .18 258));--color-accent-fill-fg:oklch(100% 0 0);--color-danger:light-dark(oklch(56% .2 25),oklch(70.4% .17 25));--color-danger-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-success:light-dark(oklch(52% .135 150),oklch(76% .15 150));--color-success-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-warning:light-dark(oklch(53% .11 75),oklch(81% .145 75));--color-warning-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-focus:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-shadow:light-dark(oklch(14.5% .006 265),oklch(0% 0 0));--font-body:"Inter", "Inter Fallback Arial", sans-serif;--font-heading:"Inter", "Inter Fallback Arial", sans-serif;--font-display:"Inter", "Inter Fallback Arial", sans-serif;--font-label:"Inter", "Inter Fallback Arial", sans-serif;--font-mono:"JetBrains Mono", "JetBrains Mono Fallback Menlo", "JetBrains Mono Fallback Consolas", "JetBrains Mono Fallback Courier New", monospace;--font-trim-body-cap:.36377;--font-trim-body-baseline:.36377;--font-trim-heading-cap:.36377;--font-trim-heading-baseline:.36377;--font-trim-display-cap:.36377;--font-trim-display-baseline:.36377;--font-trim-label-cap:.36377;--font-trim-label-baseline:.36377;--font-trim-mono-cap:.37;--font-trim-mono-baseline:.36}@media (forced-colors:active){[data-brand][data-brand]{--color-bg:Canvas;--color-bg-muted:Canvas;--color-bg-raised:Canvas;--color-fg:CanvasText;--color-fg-muted:CanvasText;--color-border:CanvasText;--color-border-strong:CanvasText;--color-accent:LinkText;--color-accent-fg:Canvas;--color-accent-fill:LinkText;--color-accent-fill-fg:Canvas;--color-danger:CanvasText;--color-danger-fg:Canvas;--color-success:CanvasText;--color-success-fg:Canvas;--color-warning:CanvasText;--color-warning-fg:Canvas;--color-focus:Highlight;--color-shadow:CanvasText}}}
|
|
4
|
+
@font-face{src:local(Arial),local(ArialMT);font-weight:400;font-style:normal;size-adjust:101.568%;ascent-override:95.3892%;descent-override:23.7511%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Arial Bold),local(Arial-BoldMT);font-weight:700;font-style:normal;size-adjust:101.637%;ascent-override:95.3241%;descent-override:23.7349%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Arial Italic),local(Arial-ItalicMT);font-weight:400;font-style:italic;size-adjust:101.637%;ascent-override:95.3241%;descent-override:23.7349%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Arial Bold Italic),local(Arial-BoldItalicMT);font-weight:700;font-style:italic;size-adjust:101.706%;ascent-override:95.2591%;descent-override:23.7187%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Menlo Regular),local(Menlo-Regular);font-weight:400;font-style:normal;size-adjust:100.137%;ascent-override:101.871%;descent-override:29.9621%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Menlo Bold),local(Menlo-Bold);font-weight:700;font-style:normal;size-adjust:100.003%;ascent-override:102.007%;descent-override:30.0022%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Menlo Italic),local(Menlo-Italic);font-weight:400;font-style:italic;size-adjust:100.137%;ascent-override:101.871%;descent-override:29.9621%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Menlo Bold Italic),local(Menlo-BoldItalic);font-weight:700;font-style:italic;size-adjust:100.003%;ascent-override:102.007%;descent-override:30.0022%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Consolas);font-weight:400;font-style:normal;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Consolas Bold),local(Consolas-Bold);font-weight:700;font-style:normal;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Consolas Italic),local(Consolas-Italic);font-weight:400;font-style:italic;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Consolas Bold Italic),local(Consolas-BoldItalic);font-weight:700;font-style:italic;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Courier New),local(CourierNewPSMT);font-weight:400;font-style:normal;size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@font-face{src:local(Courier New Bold),local(CourierNewPS-BoldMT);font-weight:700;font-style:normal;size-adjust:123.353%;ascent-override:82.6977%;descent-override:24.3229%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@font-face{src:local(Courier New Italic),local(CourierNewPS-ItalicMT);font-weight:400;font-style:italic;size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@font-face{src:local(Courier New Bold Italic),local(CourierNewPS-BoldItalicMT);font-weight:700;font-style:italic;size-adjust:123.353%;ascent-override:82.6977%;descent-override:24.3229%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@layer tokens{[data-brand=default]{--color-bg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-bg-muted:light-dark(oklch(96.8% .004 265),oklch(27% .01 265));--color-bg-raised:light-dark(oklch(100% 0 0),oklch(20.5% .008 265));--color-fg:light-dark(oklch(14.5% .006 265),oklch(98.5% .002 265));--color-fg-muted:light-dark(oklch(44.5% .014 265),oklch(71% .012 265));--color-border:light-dark(oklch(92.5% .006 265),oklch(27% .01 265));--color-border-strong:oklch(55.5% .014 265);--color-accent:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-accent-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-accent-fill:light-dark(oklch(54.6% .19 258),oklch(48.8% .18 258));--color-accent-fill-fg:oklch(100% 0 0);--color-danger:light-dark(oklch(56% .2 25),oklch(70.4% .17 25));--color-danger-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-success:light-dark(oklch(52% .135 150),oklch(76% .15 150));--color-success-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-warning:light-dark(oklch(53% .11 75),oklch(81% .145 75));--color-warning-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-done:light-dark(oklch(55% .2 295),oklch(72% .15 295));--color-done-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-neutral-subtle:light-dark(oklch(96.8% .004 265),oklch(27% .01 265));--color-neutral-subtle-fg:light-dark(oklch(37% .013 265),oklch(92.5% .006 265));--color-accent-subtle:light-dark(oklch(93.2% .032 258),oklch(28.2% .09 258));--color-accent-subtle-fg:light-dark(oklch(48.8% .18 258),oklch(80.9% .095 258));--color-success-subtle:light-dark(oklch(94.5% .04 150),oklch(26% .06 150));--color-success-subtle-fg:light-dark(oklch(46.5% .12 150),oklch(84% .115 150));--color-warning-subtle:light-dark(oklch(95.5% .03 75),oklch(27% .05 75));--color-warning-subtle-fg:light-dark(oklch(47.5% .1 75),oklch(86% .105 75));--color-danger-subtle:light-dark(oklch(93.6% .032 25),oklch(25.8% .085 25));--color-danger-subtle-fg:light-dark(oklch(50.5% .19 25),oklch(80.8% .105 25));--color-done-subtle:light-dark(oklch(93.8% .032 295),oklch(28% .095 295));--color-done-subtle-fg:light-dark(oklch(49% .19 295),oklch(81.5% .1 295));--color-focus:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-shadow:light-dark(oklch(14.5% .006 265),oklch(0% 0 0));--font-body:"Inter", "Inter Fallback Arial", sans-serif;--font-heading:"Inter", "Inter Fallback Arial", sans-serif;--font-display:"Inter", "Inter Fallback Arial", sans-serif;--font-label:"Inter", "Inter Fallback Arial", sans-serif;--font-mono:"JetBrains Mono", "JetBrains Mono Fallback Menlo", "JetBrains Mono Fallback Consolas", "JetBrains Mono Fallback Courier New", monospace;--font-trim-body-cap:.36377;--font-trim-body-baseline:.36377;--font-trim-heading-cap:.36377;--font-trim-heading-baseline:.36377;--font-trim-display-cap:.36377;--font-trim-display-baseline:.36377;--font-trim-label-cap:.36377;--font-trim-label-baseline:.36377;--font-trim-mono-cap:.37;--font-trim-mono-baseline:.36}@media (forced-colors:active){[data-brand][data-brand]{--color-bg:Canvas;--color-bg-muted:Canvas;--color-bg-raised:Canvas;--color-fg:CanvasText;--color-fg-muted:CanvasText;--color-border:CanvasText;--color-border-strong:CanvasText;--color-accent:LinkText;--color-accent-fg:Canvas;--color-accent-fill:LinkText;--color-accent-fill-fg:Canvas;--color-danger:CanvasText;--color-danger-fg:Canvas;--color-success:CanvasText;--color-success-fg:Canvas;--color-warning:CanvasText;--color-warning-fg:Canvas;--color-done:CanvasText;--color-done-fg:Canvas;--color-neutral-subtle:Canvas;--color-neutral-subtle-fg:CanvasText;--color-accent-subtle:Canvas;--color-accent-subtle-fg:CanvasText;--color-success-subtle:Canvas;--color-success-subtle-fg:CanvasText;--color-warning-subtle:Canvas;--color-warning-subtle-fg:CanvasText;--color-danger-subtle:Canvas;--color-danger-subtle-fg:CanvasText;--color-done-subtle:Canvas;--color-done-subtle-fg:CanvasText;--color-focus:Highlight;--color-shadow:CanvasText}}}
|
|
5
5
|
|
|
6
6
|
@layer reset{*,:before,:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-block-size:100dvb;line-height:1.5}img,picture,video,canvas,svg{max-inline-size:100%;display:block}input,button,textarea,select{font:inherit;color:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{text-wrap:balance}}
|
package/dist/brands/default.mjs
CHANGED
|
@@ -61,11 +61,23 @@ var s = (e, t) => Object.fromEntries(Object.entries(t).map(([t, [n, r]]) => [t,
|
|
|
61
61
|
800: [.42, .085],
|
|
62
62
|
900: [.37, .07],
|
|
63
63
|
950: [.27, .05]
|
|
64
|
-
}), h = {
|
|
64
|
+
}), h = s(295, {
|
|
65
|
+
50: [.97, .014],
|
|
66
|
+
100: [.938, .032],
|
|
67
|
+
200: [.886, .06],
|
|
68
|
+
300: [.815, .1],
|
|
69
|
+
400: [.72, .15],
|
|
70
|
+
500: [.63, .19],
|
|
71
|
+
600: [.55, .2],
|
|
72
|
+
700: [.49, .19],
|
|
73
|
+
800: [.425, .165],
|
|
74
|
+
900: [.38, .14],
|
|
75
|
+
950: [.28, .095]
|
|
76
|
+
}), g = {
|
|
65
77
|
metrics: i,
|
|
66
78
|
fallback: t,
|
|
67
79
|
generic: "sans-serif"
|
|
68
|
-
},
|
|
80
|
+
}, _ = {
|
|
69
81
|
metrics: a,
|
|
70
82
|
fallback: [
|
|
71
83
|
o,
|
|
@@ -73,7 +85,7 @@ var s = (e, t) => Object.fromEntries(Object.entries(t).map(([t, [n, r]]) => [t,
|
|
|
73
85
|
r
|
|
74
86
|
],
|
|
75
87
|
generic: "monospace"
|
|
76
|
-
},
|
|
88
|
+
}, v = {
|
|
77
89
|
name: "default",
|
|
78
90
|
color: {
|
|
79
91
|
bg: e(c, u[950]),
|
|
@@ -93,16 +105,30 @@ var s = (e, t) => Object.fromEntries(Object.entries(t).map(([t, [n, r]]) => [t,
|
|
|
93
105
|
successFg: e(c, u[950]),
|
|
94
106
|
warning: e(m[600], m[400]),
|
|
95
107
|
warningFg: e(c, u[950]),
|
|
108
|
+
done: e(h[600], h[400]),
|
|
109
|
+
doneFg: e(c, u[950]),
|
|
110
|
+
neutralSubtle: e(u[100], u[800]),
|
|
111
|
+
neutralSubtleFg: e(u[700], u[200]),
|
|
112
|
+
accentSubtle: e(d[100], d[950]),
|
|
113
|
+
accentSubtleFg: e(d[700], d[300]),
|
|
114
|
+
successSubtle: e(p[100], p[950]),
|
|
115
|
+
successSubtleFg: e(p[700], p[300]),
|
|
116
|
+
warningSubtle: e(m[100], m[950]),
|
|
117
|
+
warningSubtleFg: e(m[700], m[300]),
|
|
118
|
+
dangerSubtle: e(f[100], f[950]),
|
|
119
|
+
dangerSubtleFg: e(f[700], f[300]),
|
|
120
|
+
doneSubtle: e(h[100], h[950]),
|
|
121
|
+
doneSubtleFg: e(h[700], h[300]),
|
|
96
122
|
focus: e(d[600], d[400]),
|
|
97
123
|
shadow: e(u[950], l)
|
|
98
124
|
},
|
|
99
125
|
font: {
|
|
100
|
-
body:
|
|
101
|
-
heading:
|
|
102
|
-
display:
|
|
103
|
-
label:
|
|
104
|
-
mono:
|
|
126
|
+
body: g,
|
|
127
|
+
heading: g,
|
|
128
|
+
display: g,
|
|
129
|
+
label: g,
|
|
130
|
+
mono: _
|
|
105
131
|
}
|
|
106
132
|
};
|
|
107
133
|
//#endregion
|
|
108
|
-
export {
|
|
134
|
+
export { v as defaultBrand };
|
|
@@ -17,6 +17,20 @@ var e = {
|
|
|
17
17
|
successFg: "Canvas",
|
|
18
18
|
warning: "CanvasText",
|
|
19
19
|
warningFg: "Canvas",
|
|
20
|
+
done: "CanvasText",
|
|
21
|
+
doneFg: "Canvas",
|
|
22
|
+
neutralSubtle: "Canvas",
|
|
23
|
+
neutralSubtleFg: "CanvasText",
|
|
24
|
+
accentSubtle: "Canvas",
|
|
25
|
+
accentSubtleFg: "CanvasText",
|
|
26
|
+
successSubtle: "Canvas",
|
|
27
|
+
successSubtleFg: "CanvasText",
|
|
28
|
+
warningSubtle: "Canvas",
|
|
29
|
+
warningSubtleFg: "CanvasText",
|
|
30
|
+
dangerSubtle: "Canvas",
|
|
31
|
+
dangerSubtleFg: "CanvasText",
|
|
32
|
+
doneSubtle: "Canvas",
|
|
33
|
+
doneSubtleFg: "CanvasText",
|
|
20
34
|
focus: "Highlight",
|
|
21
35
|
shadow: "CanvasText"
|
|
22
36
|
};
|