@ztwoint/z-ui 0.1.35 → 0.1.37
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/components/assets/icons/chevron-down.js +5 -5
- package/dist/components/assets/icons/chevron-up-icon.js +4 -8
- package/dist/components/assets/icons/circles-icon.js +1 -1
- package/dist/components/assets/icons/database-copy.js +11 -16
- package/dist/components/assets/icons/sidebar-left-show-copy.js +1 -1
- package/dist/components/assets/icons/window-left-copy.js +9 -14
- package/dist/components/collapsible-side-nav-bar/popover/popover-content.js +1 -1
- package/dist/components/collapsible-side-nav-bar/side-nav-bar-item.js +64 -64
- package/dist/css/config/colors/semantic-colors.css +17 -21
- package/dist/css/config/typography/2xl.css +2 -2
- package/dist/css/config/typography/3xl.css +2 -2
- package/dist/css/config/typography/4xl.css +2 -2
- package/dist/css/config/typography/base.css +2 -2
- package/dist/css/config/typography/lg.css +2 -2
- package/dist/css/config/typography/sm.css +2 -2
- package/dist/css/config/typography/xl.css +2 -2
- package/dist/css/config/typography/xs.css +2 -2
- package/dist/css/styles/tailwind.css +1 -1
- package/package.json +1 -1
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { jsxs as n, jsx as
|
|
2
|
-
function s({ fill:
|
|
1
|
+
import { jsxs as n, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
function s({ fill: r = "currentColor", title: e = "", ...t }) {
|
|
3
3
|
return /* @__PURE__ */ n("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
|
|
4
|
-
/* @__PURE__ */
|
|
5
|
-
/* @__PURE__ */
|
|
4
|
+
/* @__PURE__ */ o("title", { children: e }),
|
|
5
|
+
/* @__PURE__ */ o("g", { fill: r, children: /* @__PURE__ */ o(
|
|
6
6
|
"path",
|
|
7
7
|
{
|
|
8
8
|
d: "M2.45 5.25l4.55 4.55 4.55-4.55",
|
|
9
9
|
fill: "none",
|
|
10
|
-
stroke:
|
|
10
|
+
stroke: r,
|
|
11
11
|
strokeLinecap: "round",
|
|
12
12
|
strokeLinejoin: "round",
|
|
13
13
|
strokeWidth: "2"
|
|
@@ -1,16 +1,12 @@
|
|
|
1
1
|
import { jsxs as n, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
const s = ({
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
...t
|
|
6
|
-
}) => /* @__PURE__ */ n("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
|
|
7
|
-
/* @__PURE__ */ r("title", { children: o }),
|
|
8
|
-
/* @__PURE__ */ r("g", { fill: e, children: /* @__PURE__ */ r(
|
|
2
|
+
const s = ({ fill: o = "currentColor", title: e = "", ...t }) => /* @__PURE__ */ n("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
|
|
3
|
+
/* @__PURE__ */ r("title", { children: e }),
|
|
4
|
+
/* @__PURE__ */ r("g", { fill: o, children: /* @__PURE__ */ r(
|
|
9
5
|
"path",
|
|
10
6
|
{
|
|
11
7
|
d: "M11.55 8.75l-4.55-4.55-4.55 4.55",
|
|
12
8
|
fill: "none",
|
|
13
|
-
stroke:
|
|
9
|
+
stroke: o,
|
|
14
10
|
strokeLinecap: "round",
|
|
15
11
|
strokeLinejoin: "round",
|
|
16
12
|
strokeWidth: "2"
|
|
@@ -1,41 +1,36 @@
|
|
|
1
|
-
import { jsxs as r, jsx as
|
|
2
|
-
function d({
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}) {
|
|
8
|
-
return t = t || e, /* @__PURE__ */ r("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...s, children: [
|
|
9
|
-
/* @__PURE__ */ o("title", { children: n }),
|
|
10
|
-
/* @__PURE__ */ r("g", { fill: e, children: [
|
|
11
|
-
/* @__PURE__ */ o(
|
|
1
|
+
import { jsxs as r, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
function d({ fill: o = "currentColor", secondaryfill: e, title: n = "", ...s }) {
|
|
3
|
+
return e = e || o, /* @__PURE__ */ r("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...s, children: [
|
|
4
|
+
/* @__PURE__ */ t("title", { children: n }),
|
|
5
|
+
/* @__PURE__ */ r("g", { fill: o, children: [
|
|
6
|
+
/* @__PURE__ */ t(
|
|
12
7
|
"path",
|
|
13
8
|
{
|
|
14
9
|
d: "M2.8 3.85v6.3c0 0.97 1.88 1.75 4.2 1.75s4.2-0.78 4.2-1.75v-6.3",
|
|
15
10
|
fill: "none",
|
|
16
|
-
stroke:
|
|
11
|
+
stroke: o,
|
|
17
12
|
strokeLinecap: "round",
|
|
18
13
|
strokeLinejoin: "round",
|
|
19
14
|
strokeWidth: "2"
|
|
20
15
|
}
|
|
21
16
|
),
|
|
22
|
-
/* @__PURE__ */
|
|
17
|
+
/* @__PURE__ */ t(
|
|
23
18
|
"path",
|
|
24
19
|
{
|
|
25
20
|
d: "M7 2.1a4.2 1.75 0 1 0 0 3.5 4.2 1.75 0 1 0 0-3.5z",
|
|
26
21
|
fill: "none",
|
|
27
|
-
stroke:
|
|
22
|
+
stroke: e,
|
|
28
23
|
strokeLinecap: "round",
|
|
29
24
|
strokeLinejoin: "round",
|
|
30
25
|
strokeWidth: "2"
|
|
31
26
|
}
|
|
32
27
|
),
|
|
33
|
-
/* @__PURE__ */
|
|
28
|
+
/* @__PURE__ */ t(
|
|
34
29
|
"path",
|
|
35
30
|
{
|
|
36
31
|
d: "M11.2 7c0 0.97-1.88 1.75-4.2 1.75s-4.2-0.78-4.2-1.75",
|
|
37
32
|
fill: "none",
|
|
38
|
-
stroke:
|
|
33
|
+
stroke: o,
|
|
39
34
|
strokeLinecap: "round",
|
|
40
35
|
strokeLinejoin: "round",
|
|
41
36
|
strokeWidth: "2"
|
|
@@ -2,7 +2,7 @@ import { jsxs as r, jsx as o } from "react/jsx-runtime";
|
|
|
2
2
|
function d({
|
|
3
3
|
fill: t = "currentColor",
|
|
4
4
|
secondaryfill: e,
|
|
5
|
-
title: h = "
|
|
5
|
+
title: h = "",
|
|
6
6
|
...n
|
|
7
7
|
}) {
|
|
8
8
|
return e = e || t, /* @__PURE__ */ r("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...n, children: [
|
|
@@ -1,25 +1,20 @@
|
|
|
1
|
-
import { jsxs as r, jsx as
|
|
2
|
-
function
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}) {
|
|
8
|
-
return t = t || e, /* @__PURE__ */ r("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...i, children: [
|
|
9
|
-
/* @__PURE__ */ o("title", { children: n }),
|
|
10
|
-
/* @__PURE__ */ r("g", { fill: e, children: [
|
|
11
|
-
/* @__PURE__ */ o(
|
|
1
|
+
import { jsxs as r, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
function s({ fill: o = "currentColor", secondaryfill: t, title: n = "", ...i }) {
|
|
3
|
+
return t = t || o, /* @__PURE__ */ r("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...i, children: [
|
|
4
|
+
/* @__PURE__ */ e("title", { children: n }),
|
|
5
|
+
/* @__PURE__ */ r("g", { fill: o, children: [
|
|
6
|
+
/* @__PURE__ */ e(
|
|
12
7
|
"path",
|
|
13
8
|
{
|
|
14
9
|
d: "M11.9 4.9v4.2q0 2.1-2.1 2.1h-5.6q-2.1 0-2.1-2.1v-4.2q0-2.1 2.1-2.1h5.6q2.1 0 2.1 2.1z",
|
|
15
10
|
fill: "none",
|
|
16
|
-
stroke:
|
|
11
|
+
stroke: o,
|
|
17
12
|
strokeLinecap: "round",
|
|
18
13
|
strokeLinejoin: "round",
|
|
19
14
|
strokeWidth: "2"
|
|
20
15
|
}
|
|
21
16
|
),
|
|
22
|
-
/* @__PURE__ */
|
|
17
|
+
/* @__PURE__ */ e(
|
|
23
18
|
"path",
|
|
24
19
|
{
|
|
25
20
|
d: "M5.6 4.9v4.2h-1.4v-4.2z",
|
|
@@ -34,5 +29,5 @@ function d({
|
|
|
34
29
|
] });
|
|
35
30
|
}
|
|
36
31
|
export {
|
|
37
|
-
|
|
32
|
+
s as default
|
|
38
33
|
};
|
|
@@ -59,7 +59,7 @@ const C = o.forwardRef(
|
|
|
59
59
|
{
|
|
60
60
|
ref: u,
|
|
61
61
|
className: n(
|
|
62
|
-
"fixed z-[9999] px-3 py-2 text-sm bg-white text-gray-900 rounded-lg shadow-lg border border-gray-200 min-w-[
|
|
62
|
+
"fixed z-[9999] px-3 py-2 text-sm bg-white text-gray-900 rounded-lg shadow-lg border border-gray-200 min-w-[256px] max-w-[256px]",
|
|
63
63
|
"pointer-events-auto select-none",
|
|
64
64
|
c[l],
|
|
65
65
|
f
|
|
@@ -1,44 +1,44 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as l, jsx as r, Fragment as D } from "react/jsx-runtime";
|
|
2
2
|
import * as d from "react";
|
|
3
|
-
import { cn as
|
|
3
|
+
import { cn as m } from "../../lib/utils.js";
|
|
4
4
|
import { useZ2SideNavBar as B } from "./context.js";
|
|
5
5
|
import { ChevronUpIcon as M } from "../assets/icons/chevron-up-icon.js";
|
|
6
|
-
import
|
|
6
|
+
import P from "../assets/icons/sub-nav-indicator.js";
|
|
7
7
|
import { Z2Popover as A } from "./popover/popover.js";
|
|
8
8
|
import R from "../assets/icons/chevron-down.js";
|
|
9
9
|
import { Z2PopoverTrigger as E } from "./popover/popover-trigger.js";
|
|
10
10
|
import { Z2PopoverContent as F } from "./popover/popover-content.js";
|
|
11
11
|
const K = d.forwardRef(
|
|
12
12
|
({
|
|
13
|
-
className:
|
|
14
|
-
children:
|
|
15
|
-
icon:
|
|
16
|
-
label:
|
|
13
|
+
className: g,
|
|
14
|
+
children: p,
|
|
15
|
+
icon: f,
|
|
16
|
+
label: i,
|
|
17
17
|
href: N,
|
|
18
|
-
isActive:
|
|
19
|
-
onClick:
|
|
20
|
-
tooltip:
|
|
21
|
-
subItems:
|
|
22
|
-
...
|
|
23
|
-
},
|
|
24
|
-
const { isCollapsed:
|
|
25
|
-
/* @__PURE__ */ r("div", { className: "text-
|
|
26
|
-
/* @__PURE__ */ r("div", { className: "space-y-1", children:
|
|
27
|
-
const
|
|
28
|
-
|
|
29
|
-
},
|
|
18
|
+
isActive: h = !1,
|
|
19
|
+
onClick: v,
|
|
20
|
+
tooltip: u,
|
|
21
|
+
subItems: s,
|
|
22
|
+
...C
|
|
23
|
+
}, b) => {
|
|
24
|
+
const { isCollapsed: o } = B(), [t, k] = d.useState(!1), c = i && !o, n = s && s.length > 0, y = d.useMemo(() => o ? n ? /* @__PURE__ */ l("div", { className: "text-left", children: [
|
|
25
|
+
/* @__PURE__ */ r("div", { className: "text-neutral-secondary mt-2 mb-1", children: u || i }),
|
|
26
|
+
/* @__PURE__ */ r("div", { className: "space-y-1", children: s.map((e) => {
|
|
27
|
+
const x = (a) => {
|
|
28
|
+
a.preventDefault(), a.stopPropagation(), e.onClick ? e.onClick() : e.href && (window.location.href = e.href);
|
|
29
|
+
}, Z = /* @__PURE__ */ l(
|
|
30
30
|
"div",
|
|
31
31
|
{
|
|
32
|
-
className:
|
|
32
|
+
className: m(
|
|
33
33
|
"cursor-pointer transition-colors flex items-center gap-1.5 self-stretch rounded-lg p-2",
|
|
34
34
|
{
|
|
35
|
-
"hover:!bg-
|
|
36
|
-
"hover:!bg-
|
|
35
|
+
"hover:!bg-(--color-neutral-75) bg-(--color-neutral-75) text-neutral-primary": e.isActive,
|
|
36
|
+
"hover:!bg-(--color-neutral-75) text-neutral-secondary": !e.isActive
|
|
37
37
|
}
|
|
38
38
|
),
|
|
39
39
|
onClick: e.onClick,
|
|
40
40
|
children: [
|
|
41
|
-
/* @__PURE__ */ r(
|
|
41
|
+
/* @__PURE__ */ r(P, { className: "text-(--color-neutral-150)" }),
|
|
42
42
|
/* @__PURE__ */ r("div", { className: "px-0.5 text-ellipsis leading-none-medium-sm", children: e.label })
|
|
43
43
|
]
|
|
44
44
|
},
|
|
@@ -49,83 +49,84 @@ const K = d.forwardRef(
|
|
|
49
49
|
{
|
|
50
50
|
href: e.href,
|
|
51
51
|
className: "block mt-2",
|
|
52
|
-
onClick:
|
|
53
|
-
children:
|
|
52
|
+
onClick: x,
|
|
53
|
+
children: Z
|
|
54
54
|
},
|
|
55
55
|
e.id
|
|
56
56
|
) : /* @__PURE__ */ r(
|
|
57
57
|
"div",
|
|
58
58
|
{
|
|
59
|
-
onClick:
|
|
59
|
+
onClick: x,
|
|
60
60
|
role: "button",
|
|
61
61
|
tabIndex: 0,
|
|
62
62
|
className: "block",
|
|
63
|
-
onKeyDown: (
|
|
64
|
-
(
|
|
63
|
+
onKeyDown: (a) => {
|
|
64
|
+
(a.key === "Enter" || a.key === " ") && (a.preventDefault(), x(a));
|
|
65
65
|
},
|
|
66
|
-
children:
|
|
66
|
+
children: Z
|
|
67
67
|
},
|
|
68
68
|
e.id
|
|
69
69
|
);
|
|
70
70
|
}) })
|
|
71
|
-
] }) :
|
|
71
|
+
] }) : u || i : null, [o, n, u, i, s]), w = d.useCallback(
|
|
72
72
|
(e) => {
|
|
73
73
|
e.stopPropagation(), k(!t);
|
|
74
74
|
},
|
|
75
75
|
[t]
|
|
76
76
|
), S = d.useCallback(() => {
|
|
77
|
-
n && !
|
|
78
|
-
}, [n,
|
|
79
|
-
if (
|
|
80
|
-
const e = /* @__PURE__ */
|
|
77
|
+
n && !o ? k(!t) : v && v();
|
|
78
|
+
}, [n, o, t, v]);
|
|
79
|
+
if (o) {
|
|
80
|
+
const e = /* @__PURE__ */ l(
|
|
81
81
|
"div",
|
|
82
82
|
{
|
|
83
|
-
className:
|
|
83
|
+
className: m(
|
|
84
84
|
"flex items-center justify-center gap-1.5 rounded-lg cursor-pointer transition-all duration-200",
|
|
85
85
|
"p-2 justify-center gap-1.5 self-stretch relative",
|
|
86
|
-
"hover:bg-
|
|
87
|
-
|
|
88
|
-
|
|
86
|
+
"hover:bg-(--color-neutral-75) text-neutral-secondary hover:text-neutral-primary",
|
|
87
|
+
h && "bg-(--color-neutral-75) text-neutral-primary",
|
|
88
|
+
g
|
|
89
89
|
),
|
|
90
90
|
onClick: S,
|
|
91
|
-
...
|
|
91
|
+
...C,
|
|
92
92
|
children: [
|
|
93
|
-
|
|
94
|
-
|
|
93
|
+
f && /* @__PURE__ */ r("span", { className: "nav-item-icon flex-shrink-0 flex items-center justify-center w-3.5 h-3.5", children: f }),
|
|
94
|
+
p
|
|
95
95
|
]
|
|
96
96
|
}
|
|
97
97
|
);
|
|
98
|
-
return
|
|
98
|
+
return y ? /* @__PURE__ */ l(A, { children: [
|
|
99
99
|
/* @__PURE__ */ r(E, { children: e }),
|
|
100
|
-
/* @__PURE__ */ r(F, { side: "right", children:
|
|
100
|
+
/* @__PURE__ */ r(F, { side: "right", children: y })
|
|
101
101
|
] }) : /* @__PURE__ */ r("div", { children: e });
|
|
102
102
|
}
|
|
103
|
-
const j = /* @__PURE__ */
|
|
103
|
+
const j = /* @__PURE__ */ l(
|
|
104
104
|
"div",
|
|
105
105
|
{
|
|
106
|
-
className:
|
|
106
|
+
className: m(
|
|
107
107
|
"nav-item-container flex flex-col justify-center items-center gap-1.5 rounded-lg relative overflow-hidden p-0 w-full"
|
|
108
108
|
),
|
|
109
109
|
children: [
|
|
110
|
-
/* @__PURE__ */
|
|
110
|
+
/* @__PURE__ */ l(
|
|
111
111
|
"div",
|
|
112
112
|
{
|
|
113
|
-
className:
|
|
114
|
-
"nav-item-main flex items-center
|
|
113
|
+
className: m(
|
|
114
|
+
"nav-item-main flex items-center gap-1.5 self-stretch rounded-lg cursor-pointer transition-all duration-200 p-2 relative",
|
|
115
115
|
{
|
|
116
116
|
// Background colors based on state
|
|
117
|
-
"hover:bg-
|
|
117
|
+
"hover:bg-(--color-neutral-75) text-neutral-secondary hover:text-neutral-primary": !h && !(c && n && t),
|
|
118
118
|
// Focused state for expanded nav with sub items (matching component design)
|
|
119
|
-
"text-
|
|
119
|
+
"text-neutral-primary bg-(--color-neutral-75)": h || c && n && t
|
|
120
120
|
},
|
|
121
|
-
|
|
121
|
+
g
|
|
122
122
|
),
|
|
123
123
|
onClick: S,
|
|
124
|
-
...
|
|
124
|
+
...C,
|
|
125
125
|
children: [
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
126
|
+
f && /* @__PURE__ */ r("span", { className: "nav-item-icon flex-shrink-0 flex items-center justify-center w-3.5 h-3.5", children: f }),
|
|
127
|
+
c && i && /* @__PURE__ */ r("div", { className: "nav-item-label-container flex items-center gap-2.5 flex-1 px-0.5 relative", children: /* @__PURE__ */ r("div", { className: "nav-item-label flex-1 truncate text-sm font-medium leading-none tracking-tight text-black relative line-clamp-1", children: i }) }),
|
|
128
|
+
!c || !i ? /* @__PURE__ */ r("div", { className: "flex items-center gap-2.5 flex-1 px-0.5 relative", children: p }) : p,
|
|
129
|
+
c && n && /* @__PURE__ */ r(D, { children: t ? /* @__PURE__ */ r(
|
|
129
130
|
M,
|
|
130
131
|
{
|
|
131
132
|
className: "w-3.5 h-3.5 cursor-pointer text-(--color-neutral-600)",
|
|
@@ -137,26 +138,25 @@ const K = d.forwardRef(
|
|
|
137
138
|
className: "w-3.5 h-3.5 text-(--color-neutral-600) cursor-pointer",
|
|
138
139
|
onClick: w
|
|
139
140
|
}
|
|
140
|
-
) })
|
|
141
|
-
u
|
|
141
|
+
) })
|
|
142
142
|
]
|
|
143
143
|
}
|
|
144
144
|
),
|
|
145
|
-
|
|
145
|
+
c && n && t && /* @__PURE__ */ l("div", { className: "sub-nav-container flex items-start gap-0 self-stretch p-0", children: [
|
|
146
146
|
/* @__PURE__ */ r("div", { className: "divider-group flex w-2 items-center gap-2.5 self-stretch" }),
|
|
147
|
-
/* @__PURE__ */ r("div", { className: "sub-nav-list flex flex-col items-start gap-1.5 flex-1", children:
|
|
147
|
+
/* @__PURE__ */ r("div", { className: "sub-nav-list flex flex-col items-start gap-1.5 flex-1", children: s.map((e) => /* @__PURE__ */ l(
|
|
148
148
|
"div",
|
|
149
149
|
{
|
|
150
|
-
className:
|
|
150
|
+
className: m(
|
|
151
151
|
"cursor-pointer transition-colors flex items-center gap-1.5 self-stretch rounded-lg p-2",
|
|
152
152
|
{
|
|
153
|
-
"hover:!bg-
|
|
154
|
-
"hover:!bg-
|
|
153
|
+
"hover:!bg-(--color-neutral-75) bg-(--color-neutral-75) text-neutral-primary": e.isActive,
|
|
154
|
+
"hover:!bg-(--color-neutral-75) text-neutral-secondary": !e.isActive
|
|
155
155
|
}
|
|
156
156
|
),
|
|
157
157
|
onClick: e.onClick,
|
|
158
158
|
children: [
|
|
159
|
-
/* @__PURE__ */ r(
|
|
159
|
+
/* @__PURE__ */ r(P, { className: "text-(--color-neutral-150)" }),
|
|
160
160
|
/* @__PURE__ */ r("div", { className: "px-0.5 text-ellipsis leading-none-medium-sm", children: e.label })
|
|
161
161
|
]
|
|
162
162
|
},
|
|
@@ -166,7 +166,7 @@ const K = d.forwardRef(
|
|
|
166
166
|
]
|
|
167
167
|
}
|
|
168
168
|
);
|
|
169
|
-
return N ? /* @__PURE__ */ r("a", { href: N, children: j }) : /* @__PURE__ */ r("div", { ref:
|
|
169
|
+
return N ? /* @__PURE__ */ r("a", { href: N, children: j }) : /* @__PURE__ */ r("div", { ref: b, children: j });
|
|
170
170
|
}
|
|
171
171
|
);
|
|
172
172
|
K.displayName = "Z2SideNavBarItem";
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
/* Semantic Colors - Design System Foundation */
|
|
2
2
|
|
|
3
3
|
:root {
|
|
4
|
-
|
|
5
|
-
/* Background Colors - Neutral */
|
|
4
|
+
/* Background Colors - Neutral */
|
|
6
5
|
--background-neutral-default: var(--neutral-0);
|
|
7
6
|
--background-neutral-on-top: var(--neutral-0);
|
|
8
7
|
--background-neutral-light: var(--neutral-25);
|
|
@@ -119,17 +118,15 @@
|
|
|
119
118
|
}
|
|
120
119
|
|
|
121
120
|
.dark {
|
|
122
|
-
|
|
123
|
-
|
|
124
121
|
/* Background Colors - Neutral - Dark Mode */
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
122
|
+
--background-neutral-default: var(--neutral-0);
|
|
123
|
+
--background-neutral-on-top: var(--neutral-50);
|
|
124
|
+
--background-neutral-light: var(--neutral-25);
|
|
125
|
+
--background-neutral-medium: var(--neutral-25);
|
|
126
|
+
--background-neutral-high: var(--neutral-100);
|
|
127
|
+
--background-neutral-pressed: var(--neutral-75);
|
|
128
|
+
--background-neutral-hover: var(--neutral-50);
|
|
129
|
+
--background-neutral-focused: var(--neutral-25);
|
|
133
130
|
/* Surface Colors - Neutral - Dark Mode */
|
|
134
131
|
--surface-neutral-default: var(--neutral-0);
|
|
135
132
|
--surface-neutral-hover: var(--neutral-75);
|
|
@@ -239,16 +236,15 @@
|
|
|
239
236
|
|
|
240
237
|
/* Tailwind v4 Theme Integration */
|
|
241
238
|
@theme inline {
|
|
242
|
-
|
|
243
239
|
/* Background Colors - Neutral */
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
240
|
+
--color-background-neutral-default: var(--background-neutral-default);
|
|
241
|
+
--color-background-neutral-on-top: var(--background-neutral-on-top);
|
|
242
|
+
--color-background-neutral-light: var(--background-neutral-light);
|
|
243
|
+
--color-background-neutral-medium: var(--background-neutral-medium);
|
|
244
|
+
--color-background-neutral-high: var(--background-neutral-high);
|
|
245
|
+
--color-background-neutral-pressed: var(--background-neutral-pressed);
|
|
246
|
+
--color-background-neutral-hover: var(--background-neutral-hover);
|
|
247
|
+
--color-background-neutral-focused: var(--background-neutral-focused);
|
|
252
248
|
/* Surface Colors - Neutral */
|
|
253
249
|
--color-surface-neutral-default: var(--surface-neutral-default);
|
|
254
250
|
--color-surface-neutral-hover: var(--surface-neutral-hover);
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
font-size: 1.5rem;
|
|
12
12
|
line-height: 2rem;
|
|
13
13
|
letter-spacing: -0.05rem;
|
|
14
|
-
font-weight:
|
|
14
|
+
font-weight: 450;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.leading-normal-semibold-2xl {
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
font-size: 1.5rem;
|
|
63
63
|
line-height: 1.5rem;
|
|
64
64
|
letter-spacing: -0.05rem;
|
|
65
|
-
font-weight:
|
|
65
|
+
font-weight: 450;
|
|
66
66
|
overflow-y: visible;
|
|
67
67
|
}
|
|
68
68
|
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
font-size: 2rem;
|
|
12
12
|
line-height: 2.25rem;
|
|
13
13
|
letter-spacing: -0.1rem;
|
|
14
|
-
font-weight:
|
|
14
|
+
font-weight: 450;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.leading-normal-semibold-3xl {
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
font-size: 2rem;
|
|
63
63
|
line-height: 2rem;
|
|
64
64
|
letter-spacing: -0.1rem;
|
|
65
|
-
font-weight:
|
|
65
|
+
font-weight: 450;
|
|
66
66
|
overflow-y: visible;
|
|
67
67
|
}
|
|
68
68
|
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
font-size: 2.25rem;
|
|
12
12
|
line-height: 2.5rem;
|
|
13
13
|
letter-spacing: -0.1rem;
|
|
14
|
-
font-weight:
|
|
14
|
+
font-weight: 450;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.leading-normal-semibold-4xl {
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
font-size: 2.25rem;
|
|
63
63
|
line-height: 2.25rem;
|
|
64
64
|
letter-spacing: -0.1rem;
|
|
65
|
-
font-weight:
|
|
65
|
+
font-weight: 450;
|
|
66
66
|
overflow-y: visible;
|
|
67
67
|
}
|
|
68
68
|
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
font-size: 1rem;
|
|
12
12
|
line-height: 1.5rem;
|
|
13
13
|
letter-spacing: -0.025rem;
|
|
14
|
-
font-weight:
|
|
14
|
+
font-weight: 450;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.leading-normal-semibold {
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
font-size: 1rem;
|
|
63
63
|
line-height: 1rem;
|
|
64
64
|
letter-spacing: -0.025rem;
|
|
65
|
-
font-weight:
|
|
65
|
+
font-weight: 450;
|
|
66
66
|
overflow-y: visible;
|
|
67
67
|
}
|
|
68
68
|
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
font-size: 1.125rem;
|
|
12
12
|
line-height: 1.75rem;
|
|
13
13
|
letter-spacing: -0.025rem;
|
|
14
|
-
font-weight:
|
|
14
|
+
font-weight: 450;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.leading-normal-semibold-lg {
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
font-size: 1.125rem;
|
|
63
63
|
line-height: 1.125rem;
|
|
64
64
|
letter-spacing: -0.025rem;
|
|
65
|
-
font-weight:
|
|
65
|
+
font-weight: 450;
|
|
66
66
|
overflow-y: visible;
|
|
67
67
|
}
|
|
68
68
|
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
font-size: 0.875rem;
|
|
12
12
|
line-height: 1.25rem;
|
|
13
13
|
letter-spacing: -0.025rem;
|
|
14
|
-
font-weight:
|
|
14
|
+
font-weight: 450;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.leading-normal-semibold-sm {
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
font-size: 0.875rem;
|
|
63
63
|
line-height: 0.875rem;
|
|
64
64
|
letter-spacing: -0.025rem;
|
|
65
|
-
font-weight:
|
|
65
|
+
font-weight: 450;
|
|
66
66
|
overflow-y: visible;
|
|
67
67
|
}
|
|
68
68
|
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
font-size: 1.25rem;
|
|
12
12
|
line-height: 1.75rem;
|
|
13
13
|
letter-spacing: -0.05rem;
|
|
14
|
-
font-weight:
|
|
14
|
+
font-weight: 450;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.leading-normal-semibold-xl {
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
font-size: 1.25rem;
|
|
63
63
|
line-height: 1.25rem;
|
|
64
64
|
letter-spacing: -0.05rem;
|
|
65
|
-
font-weight:
|
|
65
|
+
font-weight: 450;
|
|
66
66
|
overflow-y: visible;
|
|
67
67
|
}
|
|
68
68
|
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
font-size: 0.75rem;
|
|
12
12
|
line-height: 1rem;
|
|
13
13
|
letter-spacing: -0.0125rem;
|
|
14
|
-
font-weight:
|
|
14
|
+
font-weight: 450;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.leading-normal-semibold-xs {
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
font-size: 0.75rem;
|
|
63
63
|
line-height: 0.75rem;
|
|
64
64
|
letter-spacing: -0.0125rem;
|
|
65
|
-
font-weight:
|
|
65
|
+
font-weight: 450;
|
|
66
66
|
overflow-y: visible;
|
|
67
67
|
}
|
|
68
68
|
|