@bigtablet/design-system 1.23.0 → 1.24.1
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/index.css +637 -577
- package/dist/index.d.ts +526 -240
- package/dist/index.js +875 -660
- package/dist/next.css +28 -28
- package/dist/next.d.ts +1 -1
- package/dist/next.js +99 -147
- package/dist/styles/scss/_a11y.scss +4 -4
- package/dist/styles/scss/_breakpoints.scss +19 -13
- package/dist/styles/scss/_colors.scss +67 -55
- package/dist/styles/scss/_radius.scss +6 -5
- package/dist/styles/scss/_shadows.scss +5 -20
- package/dist/styles/scss/_spacing.scss +14 -12
- package/dist/styles/scss/_typography.scss +61 -64
- package/dist/styles/scss/_z-index.scss +6 -3
- package/dist/vanilla/bigtablet.min.css +1 -1
- package/dist/vanilla/bigtablet.min.js +2 -2
- package/package.json +148 -146
package/dist/next.css
CHANGED
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
flex-direction: column;
|
|
13
13
|
height: 100%;
|
|
14
14
|
width: 240px;
|
|
15
|
-
background: #
|
|
16
|
-
border-right: 1px solid #
|
|
17
|
-
padding:
|
|
18
|
-
gap:
|
|
15
|
+
background: #FFFFFF;
|
|
16
|
+
border-right: 1px solid #E5E5E5;
|
|
17
|
+
padding: 8px;
|
|
18
|
+
gap: 8px;
|
|
19
19
|
overflow: hidden;
|
|
20
20
|
transition: width 0.3s ease-in-out;
|
|
21
21
|
}
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
width: 56px;
|
|
24
24
|
}
|
|
25
25
|
.sidebar_brand {
|
|
26
|
-
padding:
|
|
27
|
-
margin-bottom:
|
|
28
|
-
border-bottom: 1px solid #
|
|
26
|
+
padding: 8px;
|
|
27
|
+
margin-bottom: 8px;
|
|
28
|
+
border-bottom: 1px solid #E5E5E5;
|
|
29
29
|
}
|
|
30
30
|
.sidebar_brand_link {
|
|
31
31
|
display: flex;
|
|
@@ -35,37 +35,37 @@
|
|
|
35
35
|
}
|
|
36
36
|
.sidebar_nav {
|
|
37
37
|
display: grid;
|
|
38
|
-
gap:
|
|
38
|
+
gap: 4px;
|
|
39
39
|
}
|
|
40
40
|
.sidebar_group {
|
|
41
41
|
display: grid;
|
|
42
|
-
gap:
|
|
42
|
+
gap: 4px;
|
|
43
43
|
}
|
|
44
44
|
.sidebar_item {
|
|
45
45
|
border: none;
|
|
46
46
|
display: flex;
|
|
47
47
|
align-items: center;
|
|
48
48
|
justify-content: space-between;
|
|
49
|
-
padding:
|
|
49
|
+
padding: 8px 12px;
|
|
50
50
|
border-radius: 8px;
|
|
51
|
-
color: #
|
|
51
|
+
color: #121212;
|
|
52
52
|
cursor: pointer;
|
|
53
53
|
background: transparent;
|
|
54
54
|
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
|
|
55
55
|
}
|
|
56
56
|
.sidebar_item:hover {
|
|
57
|
-
background: #
|
|
58
|
-
color: #
|
|
57
|
+
background: #F4F4F4;
|
|
58
|
+
color: #121212;
|
|
59
59
|
}
|
|
60
60
|
.sidebar_item_active {
|
|
61
|
-
background: #
|
|
62
|
-
color: #
|
|
63
|
-
box-shadow: inset 0 0 0 1px #
|
|
61
|
+
background: #FFFFFF;
|
|
62
|
+
color: #121212;
|
|
63
|
+
box-shadow: inset 0 0 0 1px #E5E5E5;
|
|
64
64
|
}
|
|
65
65
|
.sidebar_item_left {
|
|
66
66
|
display: flex;
|
|
67
67
|
align-items: center;
|
|
68
|
-
gap:
|
|
68
|
+
gap: 8px;
|
|
69
69
|
}
|
|
70
70
|
.sidebar_item_right {
|
|
71
71
|
display: flex;
|
|
@@ -82,13 +82,13 @@
|
|
|
82
82
|
transform: rotate(180deg);
|
|
83
83
|
}
|
|
84
84
|
.sidebar_label {
|
|
85
|
-
font-size:
|
|
85
|
+
font-size: 16px;
|
|
86
86
|
white-space: nowrap;
|
|
87
87
|
}
|
|
88
88
|
.sidebar_sub {
|
|
89
89
|
display: grid;
|
|
90
|
-
gap:
|
|
91
|
-
padding-left:
|
|
90
|
+
gap: 4px;
|
|
91
|
+
padding-left: 12px;
|
|
92
92
|
max-height: 0;
|
|
93
93
|
opacity: 0;
|
|
94
94
|
overflow: hidden;
|
|
@@ -106,28 +106,28 @@
|
|
|
106
106
|
.sidebar_sub_item {
|
|
107
107
|
display: flex;
|
|
108
108
|
align-items: center;
|
|
109
|
-
gap:
|
|
110
|
-
padding:
|
|
109
|
+
gap: 12px;
|
|
110
|
+
padding: 4px 12px;
|
|
111
111
|
border-radius: 8px;
|
|
112
|
-
color: #
|
|
112
|
+
color: #121212;
|
|
113
113
|
cursor: pointer;
|
|
114
114
|
background: transparent;
|
|
115
115
|
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
|
|
116
116
|
}
|
|
117
117
|
.sidebar_sub_item:hover {
|
|
118
|
-
background: #
|
|
119
|
-
color: #
|
|
118
|
+
background: #F4F4F4;
|
|
119
|
+
color: #121212;
|
|
120
120
|
}
|
|
121
121
|
.sidebar_sub_item_active {
|
|
122
|
-
color: #
|
|
122
|
+
color: #121212;
|
|
123
123
|
font-weight: 500;
|
|
124
124
|
}
|
|
125
125
|
.sidebar_sub_icon {
|
|
126
126
|
display: grid;
|
|
127
127
|
place-items: center;
|
|
128
|
-
color: #
|
|
128
|
+
color: #121212;
|
|
129
129
|
}
|
|
130
130
|
.sidebar_sub_label {
|
|
131
|
-
font-size:
|
|
131
|
+
font-size: 14px;
|
|
132
132
|
white-space: nowrap;
|
|
133
133
|
}
|
package/dist/next.d.ts
CHANGED
package/dist/next.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import './next.css';
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import Link from 'next/link';
|
|
5
|
-
import Image from 'next/image';
|
|
6
3
|
import { ChevronDown, CornerDownRight } from 'lucide-react';
|
|
4
|
+
import Image from 'next/image';
|
|
5
|
+
import Link from 'next/link';
|
|
6
|
+
import * as React from 'react';
|
|
7
7
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
8
8
|
|
|
9
9
|
// src/ui/navigation/sidebar/index.tsx
|
|
@@ -16,10 +16,13 @@ var Sidebar = ({
|
|
|
16
16
|
match = "startsWith",
|
|
17
17
|
brandHref = "/main"
|
|
18
18
|
}) => {
|
|
19
|
-
const isActive = (
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
const isActive = React.useCallback(
|
|
20
|
+
(href) => {
|
|
21
|
+
if (!activePath) return false;
|
|
22
|
+
return match === "exact" ? activePath === href : activePath.startsWith(href);
|
|
23
|
+
},
|
|
24
|
+
[activePath, match]
|
|
25
|
+
);
|
|
23
26
|
const [openGroups, setOpenGroups] = React.useState([]);
|
|
24
27
|
const [isOpen, setIsOpen] = React.useState(true);
|
|
25
28
|
const toggleSidebar = (next) => {
|
|
@@ -31,166 +34,115 @@ var Sidebar = ({
|
|
|
31
34
|
const autoOpen = items.filter(
|
|
32
35
|
(item) => item.type === "group" && item.children.some((c) => isActive(c.href))
|
|
33
36
|
).map((g) => g.id);
|
|
34
|
-
setOpenGroups(
|
|
35
|
-
|
|
36
|
-
);
|
|
37
|
-
}, [activePath, items]);
|
|
37
|
+
setOpenGroups((prev) => Array.from(/* @__PURE__ */ new Set([...prev, ...autoOpen])));
|
|
38
|
+
}, [activePath, items, isActive]);
|
|
38
39
|
const toggleGroup = (id) => {
|
|
39
|
-
setOpenGroups(
|
|
40
|
-
(prev) => prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]
|
|
41
|
-
);
|
|
40
|
+
setOpenGroups((prev) => prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]);
|
|
42
41
|
};
|
|
43
42
|
const sidebarClassName = [
|
|
44
43
|
"sidebar",
|
|
45
44
|
isOpen ? "sidebar_is_open" : "sidebar_is_closed",
|
|
46
45
|
className ?? ""
|
|
47
46
|
].filter(Boolean).join(" ");
|
|
48
|
-
return /* @__PURE__ */ jsx(
|
|
49
|
-
"
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
src: "/images/logo/bigtablet.png",
|
|
61
|
-
alt: "Bigtablet",
|
|
62
|
-
width: 96,
|
|
63
|
-
height: 30,
|
|
64
|
-
priority: true
|
|
65
|
-
}
|
|
66
|
-
)
|
|
67
|
-
] }),
|
|
68
|
-
/* @__PURE__ */ jsx(
|
|
69
|
-
"button",
|
|
70
|
-
{
|
|
71
|
-
type: "button",
|
|
72
|
-
className: "sidebar_close_btn",
|
|
73
|
-
onClick: () => toggleSidebar(false),
|
|
74
|
-
children: /* @__PURE__ */ jsx(
|
|
75
|
-
Image,
|
|
76
|
-
{
|
|
77
|
-
src: "/images/sidebar/arrow-close.svg",
|
|
78
|
-
alt: "\uC0AC\uC774\uB4DC\uBC14 \uB2EB\uAE30",
|
|
79
|
-
width: 24,
|
|
80
|
-
height: 24
|
|
81
|
-
}
|
|
82
|
-
)
|
|
83
|
-
}
|
|
84
|
-
)
|
|
85
|
-
] }),
|
|
86
|
-
/* @__PURE__ */ jsx("nav", { className: "sidebar_nav", "aria-label": "\uBA54\uC778 \uBA54\uB274", children: items.map((item) => {
|
|
87
|
-
if (item.type === "group") {
|
|
88
|
-
const open = openGroups.includes(item.id);
|
|
89
|
-
const subClassName = [
|
|
90
|
-
"sidebar_sub",
|
|
91
|
-
open && "sidebar_sub_open"
|
|
92
|
-
].filter(Boolean).join(" ");
|
|
93
|
-
const chevronClassName = [
|
|
94
|
-
"sidebar_chevron",
|
|
95
|
-
open && "sidebar_chevron_open"
|
|
96
|
-
].filter(Boolean).join(" ");
|
|
97
|
-
const subId = `sidebar_sub_${item.id}`;
|
|
98
|
-
return /* @__PURE__ */ jsxs("div", { className: "sidebar_group", children: [
|
|
99
|
-
/* @__PURE__ */ jsxs(
|
|
100
|
-
"button",
|
|
101
|
-
{
|
|
102
|
-
type: "button",
|
|
103
|
-
className: "sidebar_item",
|
|
104
|
-
"aria-expanded": open,
|
|
105
|
-
"aria-controls": subId,
|
|
106
|
-
onClick: () => toggleGroup(item.id),
|
|
107
|
-
children: [
|
|
108
|
-
/* @__PURE__ */ jsxs("div", { className: "sidebar_item_left", children: [
|
|
109
|
-
item.icon && /* @__PURE__ */ jsx("span", { className: "sidebar_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(item.icon, { size: 16 }) }),
|
|
110
|
-
/* @__PURE__ */ jsx("span", { className: "sidebar_label", children: item.label })
|
|
111
|
-
] }),
|
|
112
|
-
/* @__PURE__ */ jsx("span", { className: "sidebar_item_right", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
|
|
113
|
-
ChevronDown,
|
|
114
|
-
{
|
|
115
|
-
size: 16,
|
|
116
|
-
className: chevronClassName
|
|
117
|
-
}
|
|
118
|
-
) })
|
|
119
|
-
]
|
|
120
|
-
}
|
|
121
|
-
),
|
|
122
|
-
/* @__PURE__ */ jsx("div", { id: subId, className: subClassName, children: item.children.map((child) => {
|
|
123
|
-
const active2 = isActive(
|
|
124
|
-
child.href
|
|
125
|
-
);
|
|
126
|
-
const subItemClassName = [
|
|
127
|
-
"sidebar_sub_item",
|
|
128
|
-
active2 && "sidebar_sub_item_active"
|
|
129
|
-
].filter(Boolean).join(" ");
|
|
130
|
-
return /* @__PURE__ */ jsxs(
|
|
131
|
-
Link,
|
|
132
|
-
{
|
|
133
|
-
href: child.href,
|
|
134
|
-
className: subItemClassName,
|
|
135
|
-
"aria-current": active2 ? "page" : void 0,
|
|
136
|
-
tabIndex: open ? void 0 : -1,
|
|
137
|
-
onClick: () => onItemSelect?.(
|
|
138
|
-
child.href
|
|
139
|
-
),
|
|
140
|
-
children: [
|
|
141
|
-
/* @__PURE__ */ jsx("span", { className: "sidebar_sub_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
|
|
142
|
-
CornerDownRight,
|
|
143
|
-
{
|
|
144
|
-
size: 14
|
|
145
|
-
}
|
|
146
|
-
) }),
|
|
147
|
-
/* @__PURE__ */ jsx("span", { className: "sidebar_sub_label", children: child.label })
|
|
148
|
-
]
|
|
149
|
-
},
|
|
150
|
-
child.href
|
|
151
|
-
);
|
|
152
|
-
}) })
|
|
153
|
-
] }, item.id);
|
|
47
|
+
return /* @__PURE__ */ jsx("aside", { className: sidebarClassName, style, children: isOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
48
|
+
/* @__PURE__ */ jsxs("div", { className: "sidebar_brand", children: [
|
|
49
|
+
/* @__PURE__ */ jsxs(Link, { href: brandHref, className: "sidebar_brand_link", children: [
|
|
50
|
+
/* @__PURE__ */ jsx("div", {}),
|
|
51
|
+
/* @__PURE__ */ jsx(
|
|
52
|
+
Image,
|
|
53
|
+
{
|
|
54
|
+
src: "/images/logo/bigtablet.png",
|
|
55
|
+
alt: "Bigtablet",
|
|
56
|
+
width: 96,
|
|
57
|
+
height: 30,
|
|
58
|
+
priority: true
|
|
154
59
|
}
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
active && "sidebar_item_active"
|
|
159
|
-
].filter(Boolean).join(" ");
|
|
160
|
-
return /* @__PURE__ */ jsx(
|
|
161
|
-
Link,
|
|
162
|
-
{
|
|
163
|
-
href: item.href,
|
|
164
|
-
className: itemClassName,
|
|
165
|
-
"aria-current": active ? "page" : void 0,
|
|
166
|
-
onClick: () => onItemSelect?.(item.href),
|
|
167
|
-
children: /* @__PURE__ */ jsxs("div", { className: "sidebar_item_left", children: [
|
|
168
|
-
item.icon && /* @__PURE__ */ jsx("span", { className: "sidebar_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(item.icon, { size: 16 }) }),
|
|
169
|
-
/* @__PURE__ */ jsx("span", { className: "sidebar_label", children: item.label })
|
|
170
|
-
] })
|
|
171
|
-
},
|
|
172
|
-
item.href
|
|
173
|
-
);
|
|
174
|
-
}) })
|
|
175
|
-
] }) : /* @__PURE__ */ jsx(
|
|
60
|
+
)
|
|
61
|
+
] }),
|
|
62
|
+
/* @__PURE__ */ jsx(
|
|
176
63
|
"button",
|
|
177
64
|
{
|
|
178
65
|
type: "button",
|
|
179
|
-
className: "
|
|
180
|
-
onClick: () => toggleSidebar(
|
|
66
|
+
className: "sidebar_close_btn",
|
|
67
|
+
onClick: () => toggleSidebar(false),
|
|
181
68
|
children: /* @__PURE__ */ jsx(
|
|
182
69
|
Image,
|
|
183
70
|
{
|
|
184
|
-
src: "/images/sidebar/
|
|
185
|
-
alt: "\uC0AC\uC774\uB4DC\uBC14 \
|
|
71
|
+
src: "/images/sidebar/arrow-close.svg",
|
|
72
|
+
alt: "\uC0AC\uC774\uB4DC\uBC14 \uB2EB\uAE30",
|
|
186
73
|
width: 24,
|
|
187
74
|
height: 24
|
|
188
75
|
}
|
|
189
76
|
)
|
|
190
77
|
}
|
|
191
78
|
)
|
|
192
|
-
}
|
|
193
|
-
|
|
79
|
+
] }),
|
|
80
|
+
/* @__PURE__ */ jsx("nav", { className: "sidebar_nav", "aria-label": "\uBA54\uC778 \uBA54\uB274", children: items.map((item) => {
|
|
81
|
+
if (item.type === "group") {
|
|
82
|
+
const open = openGroups.includes(item.id);
|
|
83
|
+
const subClassName = ["sidebar_sub", open && "sidebar_sub_open"].filter(Boolean).join(" ");
|
|
84
|
+
const chevronClassName = ["sidebar_chevron", open && "sidebar_chevron_open"].filter(Boolean).join(" ");
|
|
85
|
+
const subId = `sidebar_sub_${item.id}`;
|
|
86
|
+
return /* @__PURE__ */ jsxs("div", { className: "sidebar_group", children: [
|
|
87
|
+
/* @__PURE__ */ jsxs(
|
|
88
|
+
"button",
|
|
89
|
+
{
|
|
90
|
+
type: "button",
|
|
91
|
+
className: "sidebar_item",
|
|
92
|
+
"aria-expanded": open,
|
|
93
|
+
"aria-controls": subId,
|
|
94
|
+
onClick: () => toggleGroup(item.id),
|
|
95
|
+
children: [
|
|
96
|
+
/* @__PURE__ */ jsxs("div", { className: "sidebar_item_left", children: [
|
|
97
|
+
item.icon && /* @__PURE__ */ jsx("span", { className: "sidebar_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(item.icon, { size: 16 }) }),
|
|
98
|
+
/* @__PURE__ */ jsx("span", { className: "sidebar_label", children: item.label })
|
|
99
|
+
] }),
|
|
100
|
+
/* @__PURE__ */ jsx("span", { className: "sidebar_item_right", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: 16, className: chevronClassName }) })
|
|
101
|
+
]
|
|
102
|
+
}
|
|
103
|
+
),
|
|
104
|
+
/* @__PURE__ */ jsx("div", { id: subId, className: subClassName, children: item.children.map((child) => {
|
|
105
|
+
const active2 = isActive(child.href);
|
|
106
|
+
const subItemClassName = [
|
|
107
|
+
"sidebar_sub_item",
|
|
108
|
+
active2 && "sidebar_sub_item_active"
|
|
109
|
+
].filter(Boolean).join(" ");
|
|
110
|
+
return /* @__PURE__ */ jsxs(
|
|
111
|
+
Link,
|
|
112
|
+
{
|
|
113
|
+
href: child.href,
|
|
114
|
+
className: subItemClassName,
|
|
115
|
+
"aria-current": active2 ? "page" : void 0,
|
|
116
|
+
tabIndex: open ? void 0 : -1,
|
|
117
|
+
onClick: () => onItemSelect?.(child.href),
|
|
118
|
+
children: [
|
|
119
|
+
/* @__PURE__ */ jsx("span", { className: "sidebar_sub_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CornerDownRight, { size: 14 }) }),
|
|
120
|
+
/* @__PURE__ */ jsx("span", { className: "sidebar_sub_label", children: child.label })
|
|
121
|
+
]
|
|
122
|
+
},
|
|
123
|
+
child.href
|
|
124
|
+
);
|
|
125
|
+
}) })
|
|
126
|
+
] }, item.id);
|
|
127
|
+
}
|
|
128
|
+
const active = isActive(item.href);
|
|
129
|
+
const itemClassName = ["sidebar_item", active && "sidebar_item_active"].filter(Boolean).join(" ");
|
|
130
|
+
return /* @__PURE__ */ jsx(
|
|
131
|
+
Link,
|
|
132
|
+
{
|
|
133
|
+
href: item.href,
|
|
134
|
+
className: itemClassName,
|
|
135
|
+
"aria-current": active ? "page" : void 0,
|
|
136
|
+
onClick: () => onItemSelect?.(item.href),
|
|
137
|
+
children: /* @__PURE__ */ jsxs("div", { className: "sidebar_item_left", children: [
|
|
138
|
+
item.icon && /* @__PURE__ */ jsx("span", { className: "sidebar_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(item.icon, { size: 16 }) }),
|
|
139
|
+
/* @__PURE__ */ jsx("span", { className: "sidebar_label", children: item.label })
|
|
140
|
+
] })
|
|
141
|
+
},
|
|
142
|
+
item.href
|
|
143
|
+
);
|
|
144
|
+
}) })
|
|
145
|
+
] }) : /* @__PURE__ */ jsx("button", { type: "button", className: "sidebar_open_btn", onClick: () => toggleSidebar(true), children: /* @__PURE__ */ jsx(Image, { src: "/images/sidebar/menu.svg", alt: "\uC0AC\uC774\uB4DC\uBC14 \uC5F4\uAE30", width: 24, height: 24 }) }) });
|
|
194
146
|
};
|
|
195
147
|
|
|
196
148
|
export { Sidebar };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@use "colors" as colors;
|
|
2
2
|
|
|
3
|
-
$focus_ring:
|
|
4
|
-
$focus_ring_error:
|
|
5
|
-
$focus_ring_success: 0 0 0 3px rgba(colors.$
|
|
3
|
+
$focus_ring: 0 0 0 3px rgba(colors.$color_base_brand_primary, 0.15);
|
|
4
|
+
$focus_ring_error: 0 0 0 3px rgba(colors.$color_base_status_error, 0.15);
|
|
5
|
+
$focus_ring_success: 0 0 0 3px rgba(colors.$color_base_status_success, 0.15);
|
|
6
6
|
|
|
7
|
-
$tap_min_size: 44px;
|
|
7
|
+
$tap_min_size: 44px;
|
|
@@ -1,28 +1,34 @@
|
|
|
1
|
-
$
|
|
2
|
-
$
|
|
3
|
-
$
|
|
4
|
-
$
|
|
1
|
+
$breakpoint_compact: 0px;
|
|
2
|
+
$breakpoint_medium: 600px;
|
|
3
|
+
$breakpoint_expanded: 840px;
|
|
4
|
+
$breakpoint_large: 1200px;
|
|
5
5
|
|
|
6
|
-
@mixin
|
|
7
|
-
@media (max-width: #{$
|
|
6
|
+
@mixin compact {
|
|
7
|
+
@media (max-width: #{$breakpoint_medium - 1}) {
|
|
8
8
|
@content;
|
|
9
9
|
}
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
@mixin
|
|
13
|
-
@media (min-width: $
|
|
12
|
+
@mixin medium {
|
|
13
|
+
@media (min-width: $breakpoint_medium) and (max-width: #{$breakpoint_expanded - 1}) {
|
|
14
14
|
@content;
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
@mixin
|
|
19
|
-
@media (min-width: $
|
|
18
|
+
@mixin expanded {
|
|
19
|
+
@media (min-width: $breakpoint_expanded) and (max-width: #{$breakpoint_large - 1}) {
|
|
20
20
|
@content;
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
@mixin
|
|
25
|
-
@media (min-width: $
|
|
24
|
+
@mixin large {
|
|
25
|
+
@media (min-width: $breakpoint_large) {
|
|
26
26
|
@content;
|
|
27
27
|
}
|
|
28
|
-
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// ── Convenience: min-width shortcuts ─────────────────────────────────────────
|
|
31
|
+
|
|
32
|
+
@mixin from_medium { @media (min-width: $breakpoint_medium) { @content; } }
|
|
33
|
+
@mixin from_expanded { @media (min-width: $breakpoint_expanded) { @content; } }
|
|
34
|
+
@mixin from_large { @media (min-width: $breakpoint_large) { @content; } }
|
|
@@ -1,55 +1,67 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
$
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
$
|
|
7
|
-
$
|
|
8
|
-
$
|
|
9
|
-
$
|
|
10
|
-
$
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
$
|
|
14
|
-
$
|
|
15
|
-
$
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
$
|
|
19
|
-
$
|
|
20
|
-
$
|
|
21
|
-
|
|
22
|
-
$
|
|
23
|
-
$
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
$
|
|
34
|
-
$
|
|
35
|
-
$
|
|
36
|
-
$
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
$
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
$
|
|
45
|
-
$
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
$
|
|
50
|
-
$
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
1
|
+
// ── Base colors ───────────────────────────────────────────────────────────────
|
|
2
|
+
|
|
3
|
+
$color_base_brand_primary: #121212;
|
|
4
|
+
$color_base_neutral_0: #FFFFFF;
|
|
5
|
+
$color_base_neutral_50: #F4F4F4;
|
|
6
|
+
$color_base_neutral_200: #E5E5E5;
|
|
7
|
+
$color_base_neutral_300: #999999;
|
|
8
|
+
$color_base_neutral_400: #B3B3B3;
|
|
9
|
+
$color_base_neutral_500: #888888;
|
|
10
|
+
$color_base_neutral_700: #666666;
|
|
11
|
+
$color_base_neutral_900: #121212;
|
|
12
|
+
$color_base_status_error: #EF4444;
|
|
13
|
+
$color_base_status_success: #10B981;
|
|
14
|
+
$color_base_status_warning: #F59E0B;
|
|
15
|
+
$color_base_status_info: #3B82F6;
|
|
16
|
+
$color_base_alpha_black_5: rgba(0, 0, 0, 0.05);
|
|
17
|
+
$color_base_alpha_black_8: rgba(0, 0, 0, 0.08);
|
|
18
|
+
$color_base_alpha_black_12: rgba(26, 26, 26, 0.12);
|
|
19
|
+
$color_base_alpha_black_38: rgba(26, 26, 26, 0.38);
|
|
20
|
+
$color_base_alpha_black_50: rgba(0, 0, 0, 0.50);
|
|
21
|
+
$color_base_alpha_white_5: rgba(255, 255, 255, 0.05);
|
|
22
|
+
$color_base_alpha_white_8: rgba(255, 255, 255, 0.08);
|
|
23
|
+
$color_base_alpha_white_12: rgba(255, 255, 255, 0.12);
|
|
24
|
+
|
|
25
|
+
// ── Semantic: Brand ───────────────────────────────────────────────────────────
|
|
26
|
+
|
|
27
|
+
$color_brand_primary: $color_base_brand_primary;
|
|
28
|
+
$color_brand_on_primary: $color_base_neutral_0;
|
|
29
|
+
|
|
30
|
+
// ── Semantic: Text ────────────────────────────────────────────────────────────
|
|
31
|
+
|
|
32
|
+
$color_text_heading: $color_base_neutral_900;
|
|
33
|
+
$color_text_body: $color_base_neutral_700;
|
|
34
|
+
$color_text_caption: $color_base_neutral_500;
|
|
35
|
+
$color_text_brand: $color_base_brand_primary;
|
|
36
|
+
$color_text_inverse: $color_base_neutral_0;
|
|
37
|
+
$color_text_disabled: $color_base_alpha_black_38;
|
|
38
|
+
|
|
39
|
+
// ── Semantic: Background ──────────────────────────────────────────────────────
|
|
40
|
+
|
|
41
|
+
$color_bg_solid: $color_base_neutral_0;
|
|
42
|
+
$color_bg_solid_dim: $color_base_neutral_50;
|
|
43
|
+
$color_bg_additive: $color_base_alpha_black_5;
|
|
44
|
+
$color_bg_disabled: $color_base_alpha_black_12;
|
|
45
|
+
$color_bg_overlay: $color_base_alpha_black_50;
|
|
46
|
+
|
|
47
|
+
// ── Semantic: State ───────────────────────────────────────────────────────────
|
|
48
|
+
|
|
49
|
+
$color_state_hover_on_light: $color_base_alpha_black_5;
|
|
50
|
+
$color_state_pressed_on_light: $color_base_alpha_black_12;
|
|
51
|
+
$color_state_hover_on_dark: $color_base_alpha_white_5;
|
|
52
|
+
$color_state_pressed_on_dark: $color_base_alpha_white_12;
|
|
53
|
+
|
|
54
|
+
// ── Semantic: Border ──────────────────────────────────────────────────────────
|
|
55
|
+
|
|
56
|
+
$color_border_default: $color_base_neutral_200;
|
|
57
|
+
$color_border_hover: $color_base_neutral_400;
|
|
58
|
+
$color_border_subtle: $color_base_alpha_black_8;
|
|
59
|
+
$color_border_focus: $color_base_neutral_900;
|
|
60
|
+
$color_border_disabled: #F2F2F2;
|
|
61
|
+
|
|
62
|
+
// ── Semantic: Status ──────────────────────────────────────────────────────────
|
|
63
|
+
|
|
64
|
+
$color_status_error: $color_base_status_error;
|
|
65
|
+
$color_status_success: $color_base_status_success;
|
|
66
|
+
$color_status_warning: $color_base_status_warning;
|
|
67
|
+
$color_status_info: $color_base_status_info;
|
|
@@ -1,20 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
$
|
|
3
|
-
$
|
|
4
|
-
$
|
|
5
|
-
$
|
|
6
|
-
$shadow_2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
7
|
-
|
|
8
|
-
/* Elevated Shadows (for floating elements) */
|
|
9
|
-
$shadow_elevated: 0 12px 40px -8px rgba(0, 0, 0, 0.2), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
|
|
10
|
-
$shadow_float: 0 20px 60px -15px rgba(0, 0, 0, 0.3);
|
|
11
|
-
|
|
12
|
-
/* Glow Effects (for tech/accent elements) */
|
|
13
|
-
$glow_accent: 0 0 20px rgba(59, 130, 246, 0.35);
|
|
14
|
-
$glow_accent_strong: 0 0 40px rgba(59, 130, 246, 0.5), 0 0 80px rgba(59, 130, 246, 0.25);
|
|
15
|
-
$glow_white: 0 0 20px rgba(255, 255, 255, 0.15);
|
|
16
|
-
$glow_white_strong: 0 0 40px rgba(255, 255, 255, 0.25);
|
|
17
|
-
|
|
18
|
-
/* Inner Shadows */
|
|
19
|
-
$shadow_inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
|
|
20
|
-
$shadow_inner_lg: inset 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
1
|
+
$shadow_level1: 0 1px 1px -1px rgba(0, 0, 0, 0.20), 0 3px 3px 0px rgba(0, 0, 0, 0.12);
|
|
2
|
+
$shadow_level2: 0 2px 2px -2px rgba(0, 0, 0, 0.20), 0 6px 6px 0px rgba(0, 0, 0, 0.12);
|
|
3
|
+
$shadow_level3: 0 3px 3px -3px rgba(0, 0, 0, 0.20), 0 9px 9px 0px rgba(0, 0, 0, 0.12);
|
|
4
|
+
$shadow_level4: 0 5px 5px -5px rgba(0, 0, 0, 0.20), 0 15px 15px 0px rgba(0, 0, 0, 0.12);
|
|
5
|
+
$shadow_level5: 0 8px 10px -5px rgba(0, 0, 0, 0.20), 0 20px 20px 0px rgba(0, 0, 0, 0.12);
|