@digiko-npm/designsystem 0.9.0 → 0.9.2
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@digiko-npm/designsystem",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.2",
|
|
4
4
|
"description": "Design system — installable, extensible, indestructible.",
|
|
5
5
|
"main": "dist/designsystem.css",
|
|
6
6
|
"style": "dist/designsystem.css",
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
"./base": "./src/base/index.css",
|
|
12
12
|
"./components": "./src/components/index.css",
|
|
13
13
|
"./components/accordion": "./src/components/accordion.css",
|
|
14
|
+
"./components/admin-layout": "./src/components/admin-layout.css",
|
|
14
15
|
"./components/alert": "./src/components/alert.css",
|
|
15
16
|
"./components/avatar": "./src/components/avatar.css",
|
|
16
17
|
"./components/badge": "./src/components/badge.css",
|
|
@@ -0,0 +1,369 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
Component: Admin Layout
|
|
3
|
+
Parent-driven sidebar + header + main content system for admin dashboards.
|
|
4
|
+
|
|
5
|
+
All width/offset decisions are controlled by a SINGLE class on .ds-admin:
|
|
6
|
+
- .ds-admin--expanded → sidebar 16rem, offsets 16rem
|
|
7
|
+
- .ds-admin--collapsed → sidebar 4rem, offsets 4rem
|
|
8
|
+
|
|
9
|
+
This guarantees sidebar, header, and main content transition in perfect sync.
|
|
10
|
+
|
|
11
|
+
Variants:
|
|
12
|
+
ds-admin--expanded Sidebar open (16rem) — default on desktop
|
|
13
|
+
ds-admin--collapsed Sidebar collapsed (4rem) — icons only
|
|
14
|
+
|
|
15
|
+
Usage:
|
|
16
|
+
<div class="ds-admin ds-admin--expanded">
|
|
17
|
+
<aside class="ds-admin__sidebar">
|
|
18
|
+
<div class="ds-admin__sidebar-header">Logo</div>
|
|
19
|
+
<nav class="ds-admin__nav">
|
|
20
|
+
<a class="ds-admin__nav-item ds-admin__nav-item--active">
|
|
21
|
+
<span class="ds-admin__nav-icon">...</span>
|
|
22
|
+
<span class="ds-admin__nav-label">Dashboard</span>
|
|
23
|
+
</a>
|
|
24
|
+
<div class="ds-admin__subnav">
|
|
25
|
+
<a class="ds-admin__subnav-item">Sub page</a>
|
|
26
|
+
</div>
|
|
27
|
+
</nav>
|
|
28
|
+
<div class="ds-admin__sidebar-footer">
|
|
29
|
+
<a class="ds-admin__footer-link">Settings</a>
|
|
30
|
+
</div>
|
|
31
|
+
</aside>
|
|
32
|
+
<header class="ds-admin__header">
|
|
33
|
+
<div class="ds-admin__header-inner">...</div>
|
|
34
|
+
</header>
|
|
35
|
+
<main class="ds-admin__main">
|
|
36
|
+
<div class="ds-admin__content">...</div>
|
|
37
|
+
</main>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
Mobile: Sidebar is hidden. Use ds-drawer for mobile menu.
|
|
41
|
+
Toggle .ds-admin__overlay when mobile menu is open.
|
|
42
|
+
|
|
43
|
+
ARIA:
|
|
44
|
+
- <aside> should have role="navigation" or aria-label="Admin navigation"
|
|
45
|
+
- Active nav item: aria-current="page"
|
|
46
|
+
- Mobile toggle: aria-expanded, aria-controls
|
|
47
|
+
========================================================================== */
|
|
48
|
+
|
|
49
|
+
/* --- Layout Variables --- */
|
|
50
|
+
.ds-admin {
|
|
51
|
+
--ds-admin-sidebar-w: 16rem;
|
|
52
|
+
--ds-admin-sidebar-w-collapsed: 4rem;
|
|
53
|
+
--ds-admin-header-h: var(--ds-size-4);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* ==========================================================================
|
|
57
|
+
Sidebar
|
|
58
|
+
========================================================================== */
|
|
59
|
+
|
|
60
|
+
.ds-admin__sidebar {
|
|
61
|
+
display: none;
|
|
62
|
+
position: fixed;
|
|
63
|
+
inset-block-start: 0;
|
|
64
|
+
inset-inline-start: 0;
|
|
65
|
+
z-index: var(--ds-z-dropdown);
|
|
66
|
+
height: 100dvh;
|
|
67
|
+
flex-direction: column;
|
|
68
|
+
border-inline-end: 1px solid var(--ds-color-border);
|
|
69
|
+
background-color: var(--ds-color-surface);
|
|
70
|
+
transition: width var(--ds-duration-normal) var(--ds-ease-default);
|
|
71
|
+
overflow: hidden;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
@media (min-width: 1024px) {
|
|
75
|
+
.ds-admin__sidebar {
|
|
76
|
+
display: flex;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.ds-admin--expanded .ds-admin__sidebar {
|
|
80
|
+
width: var(--ds-admin-sidebar-w);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.ds-admin--collapsed .ds-admin__sidebar {
|
|
84
|
+
width: var(--ds-admin-sidebar-w-collapsed);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* Centered items in collapsed state */
|
|
88
|
+
.ds-admin--collapsed .ds-admin__nav-item {
|
|
89
|
+
justify-content: center;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.ds-admin--collapsed .ds-admin__footer-link {
|
|
93
|
+
justify-content: center;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* Hide labels in collapsed state */
|
|
97
|
+
.ds-admin--collapsed .ds-admin__nav-label,
|
|
98
|
+
.ds-admin--collapsed .ds-admin__sidebar-badge {
|
|
99
|
+
display: none;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* Hide subnav in collapsed state */
|
|
103
|
+
.ds-admin--collapsed .ds-admin__subnav {
|
|
104
|
+
display: none;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* --- Sidebar Header (logo area) --- */
|
|
109
|
+
.ds-admin__sidebar-header {
|
|
110
|
+
display: flex;
|
|
111
|
+
min-height: var(--ds-admin-header-h);
|
|
112
|
+
align-items: center;
|
|
113
|
+
gap: var(--ds-space-2);
|
|
114
|
+
border-block-end: 1px solid var(--ds-color-border);
|
|
115
|
+
padding: var(--ds-space-4);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.ds-admin--collapsed .ds-admin__sidebar-header {
|
|
119
|
+
justify-content: center;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* --- Sidebar Badge (env indicator, version, etc.) --- */
|
|
123
|
+
.ds-admin__sidebar-badge {
|
|
124
|
+
border-radius: var(--ds-radius-md);
|
|
125
|
+
border: 1px solid var(--ds-color-border);
|
|
126
|
+
background-color: var(--ds-color-bg-elevated);
|
|
127
|
+
padding: var(--ds-space-0-5) var(--ds-space-1-5);
|
|
128
|
+
font-size: var(--ds-text-xs);
|
|
129
|
+
font-weight: var(--ds-weight-medium);
|
|
130
|
+
color: var(--ds-color-text-secondary);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/* --- Navigation Area --- */
|
|
134
|
+
.ds-admin__nav {
|
|
135
|
+
flex: 1;
|
|
136
|
+
overflow-y: auto;
|
|
137
|
+
padding: var(--ds-space-6) var(--ds-space-3);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.ds-admin__nav > * + * {
|
|
141
|
+
margin-block-start: var(--ds-space-1);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* --- Nav Item --- */
|
|
145
|
+
.ds-admin__nav-item {
|
|
146
|
+
display: flex;
|
|
147
|
+
align-items: center;
|
|
148
|
+
gap: var(--ds-space-3);
|
|
149
|
+
border-radius: var(--ds-radius-xl);
|
|
150
|
+
padding: var(--ds-space-2-5) var(--ds-space-3);
|
|
151
|
+
color: var(--ds-color-text-secondary);
|
|
152
|
+
transition:
|
|
153
|
+
background-color var(--ds-duration-fast) var(--ds-ease-default),
|
|
154
|
+
color var(--ds-duration-fast) var(--ds-ease-default);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.ds-admin__nav-item:hover {
|
|
158
|
+
background-color: var(--ds-color-surface-hover);
|
|
159
|
+
color: var(--ds-color-text);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.ds-admin__nav-item--active {
|
|
163
|
+
background-color: var(--ds-color-bg-elevated);
|
|
164
|
+
color: var(--ds-color-text);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/* --- Nav Icon (fixed size prevents reflow on collapse) --- */
|
|
168
|
+
.ds-admin__nav-icon {
|
|
169
|
+
display: flex;
|
|
170
|
+
align-items: center;
|
|
171
|
+
justify-content: center;
|
|
172
|
+
width: 20px;
|
|
173
|
+
height: 20px;
|
|
174
|
+
flex-shrink: 0;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
/* --- Nav Label --- */
|
|
178
|
+
.ds-admin__nav-label {
|
|
179
|
+
white-space: nowrap;
|
|
180
|
+
font-size: var(--ds-text-sm);
|
|
181
|
+
font-weight: var(--ds-weight-medium);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/* --- Sub-Navigation (nested under a parent item) --- */
|
|
185
|
+
.ds-admin__subnav {
|
|
186
|
+
display: flex;
|
|
187
|
+
flex-direction: column;
|
|
188
|
+
gap: var(--ds-space-0-5);
|
|
189
|
+
margin-inline-start: 1.75rem;
|
|
190
|
+
padding-inline-start: var(--ds-space-3);
|
|
191
|
+
padding-block: var(--ds-space-1);
|
|
192
|
+
border-inline-start: 1px solid var(--ds-color-border);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.ds-admin__subnav-item {
|
|
196
|
+
display: block;
|
|
197
|
+
padding: var(--ds-space-1-5) var(--ds-space-3);
|
|
198
|
+
font-size: var(--ds-text-sm);
|
|
199
|
+
font-weight: var(--ds-weight-medium);
|
|
200
|
+
color: var(--ds-color-text-tertiary);
|
|
201
|
+
border-radius: var(--ds-radius-lg);
|
|
202
|
+
transition:
|
|
203
|
+
background-color var(--ds-duration-fast) var(--ds-ease-default),
|
|
204
|
+
color var(--ds-duration-fast) var(--ds-ease-default);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.ds-admin__subnav-item:hover:not(.ds-admin__subnav-item--active) {
|
|
208
|
+
background-color: var(--ds-color-surface-hover);
|
|
209
|
+
color: var(--ds-color-text-secondary);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.ds-admin__subnav-item--active {
|
|
213
|
+
background-color: var(--ds-color-bg-elevated);
|
|
214
|
+
color: var(--ds-color-text);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
/* --- Sidebar Footer --- */
|
|
218
|
+
.ds-admin__sidebar-footer {
|
|
219
|
+
border-block-start: 1px solid var(--ds-color-border);
|
|
220
|
+
padding: var(--ds-space-3);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.ds-admin__sidebar-footer > * + * {
|
|
224
|
+
margin-block-start: var(--ds-space-1);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
/* --- Footer Link --- */
|
|
228
|
+
.ds-admin__footer-link {
|
|
229
|
+
display: flex;
|
|
230
|
+
width: 100%;
|
|
231
|
+
align-items: center;
|
|
232
|
+
gap: var(--ds-space-3);
|
|
233
|
+
border-radius: var(--ds-radius-xl);
|
|
234
|
+
padding: var(--ds-space-2-5) var(--ds-space-3);
|
|
235
|
+
color: var(--ds-color-text-secondary);
|
|
236
|
+
transition:
|
|
237
|
+
background-color var(--ds-duration-fast) var(--ds-ease-default),
|
|
238
|
+
color var(--ds-duration-fast) var(--ds-ease-default);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.ds-admin__footer-link:hover {
|
|
242
|
+
background-color: var(--ds-color-surface-hover);
|
|
243
|
+
color: var(--ds-color-text);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
/* ==========================================================================
|
|
247
|
+
Header
|
|
248
|
+
========================================================================== */
|
|
249
|
+
|
|
250
|
+
.ds-admin__header {
|
|
251
|
+
position: fixed;
|
|
252
|
+
inset-inline: 0;
|
|
253
|
+
inset-block-start: 0;
|
|
254
|
+
z-index: 40;
|
|
255
|
+
height: var(--ds-admin-header-h);
|
|
256
|
+
border-block-end: 1px solid var(--ds-color-border);
|
|
257
|
+
background-color: var(--ds-color-nav-bg);
|
|
258
|
+
backdrop-filter: blur(20px) saturate(1.5);
|
|
259
|
+
-webkit-backdrop-filter: blur(20px) saturate(1.5);
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.ds-admin__header-inner {
|
|
263
|
+
display: flex;
|
|
264
|
+
height: 100%;
|
|
265
|
+
align-items: center;
|
|
266
|
+
justify-content: space-between;
|
|
267
|
+
padding-inline: var(--ds-space-6);
|
|
268
|
+
margin-inline-start: 0;
|
|
269
|
+
transition: margin-inline-start var(--ds-duration-normal) var(--ds-ease-default);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
/* Hide toggle on desktop */
|
|
273
|
+
@media (min-width: 1024px) {
|
|
274
|
+
.ds-admin__header-toggle {
|
|
275
|
+
display: none;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.ds-admin--expanded .ds-admin__header-inner {
|
|
279
|
+
margin-inline-start: var(--ds-admin-sidebar-w);
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.ds-admin--collapsed .ds-admin__header-inner {
|
|
283
|
+
margin-inline-start: var(--ds-admin-sidebar-w-collapsed);
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
/* ==========================================================================
|
|
288
|
+
Main Content
|
|
289
|
+
========================================================================== */
|
|
290
|
+
|
|
291
|
+
.ds-admin__main {
|
|
292
|
+
padding-block-start: var(--ds-admin-header-h);
|
|
293
|
+
margin-inline-start: 0;
|
|
294
|
+
transition: margin-inline-start var(--ds-duration-normal) var(--ds-ease-default);
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
@media (min-width: 1024px) {
|
|
298
|
+
.ds-admin--expanded .ds-admin__main {
|
|
299
|
+
margin-inline-start: var(--ds-admin-sidebar-w);
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.ds-admin--collapsed .ds-admin__main {
|
|
303
|
+
margin-inline-start: var(--ds-admin-sidebar-w-collapsed);
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.ds-admin__content {
|
|
308
|
+
min-height: 100dvh;
|
|
309
|
+
padding: var(--ds-space-8) var(--ds-space-6);
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
@media (min-width: 768px) {
|
|
313
|
+
.ds-admin__content {
|
|
314
|
+
padding-inline: var(--ds-space-8);
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
@media (min-width: 1024px) {
|
|
319
|
+
.ds-admin__content {
|
|
320
|
+
padding-inline: var(--ds-space-12);
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.ds-admin__container {
|
|
325
|
+
max-width: 80rem;
|
|
326
|
+
margin-inline: auto;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
/* ==========================================================================
|
|
330
|
+
Mobile Overlay
|
|
331
|
+
========================================================================== */
|
|
332
|
+
|
|
333
|
+
.ds-admin__overlay {
|
|
334
|
+
position: fixed;
|
|
335
|
+
inset: 0;
|
|
336
|
+
z-index: var(--ds-z-overlay);
|
|
337
|
+
background-color: var(--ds-color-overlay);
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
@media (min-width: 1024px) {
|
|
341
|
+
.ds-admin__overlay {
|
|
342
|
+
display: none;
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
/* ==========================================================================
|
|
347
|
+
Mobile Menu (fullscreen drawer, no animation — uses ds-drawer)
|
|
348
|
+
========================================================================== */
|
|
349
|
+
|
|
350
|
+
.ds-admin__mobile-menu {
|
|
351
|
+
transition: none;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
.ds-admin__mobile-menu .ds-drawer__content {
|
|
355
|
+
width: 100vw;
|
|
356
|
+
max-width: 100vw;
|
|
357
|
+
transition: none;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.ds-admin__mobile-menu .ds-drawer__body {
|
|
361
|
+
display: flex;
|
|
362
|
+
flex-direction: column;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
@media (min-width: 1024px) {
|
|
366
|
+
.ds-admin__mobile-menu {
|
|
367
|
+
display: none !important;
|
|
368
|
+
}
|
|
369
|
+
}
|
package/src/components/index.css
CHANGED
|
@@ -19,13 +19,13 @@
|
|
|
19
19
|
background-color: color-mix(in srgb, var(--ds-color-bg-elevated) 50%, transparent);
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
/* --- Group Reveal (children appear on parent hover) --- */
|
|
23
|
-
.ds-reveal {
|
|
22
|
+
/* --- Group Reveal (children appear on parent hover) — .ds-group-reveal --- */
|
|
23
|
+
.ds-group-reveal {
|
|
24
24
|
opacity: 0;
|
|
25
25
|
transition: opacity var(--ds-duration-fast) var(--ds-ease-default);
|
|
26
26
|
}
|
|
27
|
-
.group:hover > .ds-reveal,
|
|
28
|
-
.group:hover .ds-reveal {
|
|
27
|
+
.group:hover > .ds-group-reveal,
|
|
28
|
+
.group:hover .ds-group-reveal {
|
|
29
29
|
opacity: 1;
|
|
30
30
|
}
|
|
31
31
|
|