@aquiferre/theme-kit 0.1.1 → 0.1.3
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/base.css +5 -1
- package/components.css +241 -22
- package/composables.d.ts +4 -0
- package/composables.ts +50 -0
- package/index.d.ts +3 -0
- package/index.ts +2 -0
- package/package.json +11 -3
- package/plugin.d.ts +13 -0
- package/plugin.ts +100 -0
- package/tailwind.preset.js +33 -0
- package/theme.d.ts +24 -0
- package/theme.ts +1 -1
- package/variables.css +62 -1
package/base.css
CHANGED
|
@@ -11,7 +11,11 @@
|
|
|
11
11
|
padding: 0;
|
|
12
12
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
13
13
|
min-height: 100vh;
|
|
14
|
-
@apply
|
|
14
|
+
@apply text-text-primary antialiased;
|
|
15
|
+
background-color: var(--color-body-bg);
|
|
16
|
+
background-image: radial-gradient(circle at 50% 0%, var(--color-body-gradient) 0%, var(--color-body-bg) 60%);
|
|
17
|
+
background-attachment: fixed;
|
|
18
|
+
transition: background-color 0.3s ease, background-image 0.3s ease;
|
|
15
19
|
}
|
|
16
20
|
|
|
17
21
|
::-webkit-scrollbar {
|
package/components.css
CHANGED
|
@@ -3,9 +3,10 @@
|
|
|
3
3
|
@layer components {
|
|
4
4
|
/* ========== Navbar ========== */
|
|
5
5
|
.navbar {
|
|
6
|
-
@apply bg-bg-
|
|
7
|
-
flex items-center justify-between px-6 shadow-xs
|
|
8
|
-
|
|
6
|
+
@apply bg-bg-glass backdrop-blur-xl border-b border-navbar-border
|
|
7
|
+
flex items-center justify-between px-6 shadow-xs
|
|
8
|
+
sticky top-0 z-50;
|
|
9
|
+
height: 56px;
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
.navbar-brand {
|
|
@@ -21,13 +22,29 @@
|
|
|
21
22
|
flex items-center justify-center text-text-inverse text-xs font-medium;
|
|
22
23
|
}
|
|
23
24
|
|
|
25
|
+
/* ========== Navigation Links ========== */
|
|
26
|
+
.nav-link {
|
|
27
|
+
@apply text-sm font-medium text-text-secondary transition-colors duration-200 cursor-pointer pb-1;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.nav-link:hover {
|
|
31
|
+
@apply text-text-primary;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.nav-link.active {
|
|
35
|
+
@apply font-medium;
|
|
36
|
+
border-bottom: 2px solid var(--color-accent-primary);
|
|
37
|
+
}
|
|
38
|
+
|
|
24
39
|
/* ========== Card Components ========== */
|
|
25
40
|
.card {
|
|
26
41
|
@apply bg-bg-elevated border border-border-primary rounded-xl shadow-sm overflow-hidden;
|
|
27
42
|
}
|
|
28
43
|
|
|
29
44
|
.card-glass {
|
|
30
|
-
@apply bg-bg-glass
|
|
45
|
+
@apply bg-bg-glass rounded-xl;
|
|
46
|
+
backdrop-filter: blur(12px);
|
|
47
|
+
border: 1px solid var(--color-glass-border);
|
|
31
48
|
}
|
|
32
49
|
|
|
33
50
|
.card-hover {
|
|
@@ -43,8 +60,8 @@
|
|
|
43
60
|
.input {
|
|
44
61
|
background-color: var(--color-input-bg);
|
|
45
62
|
color: var(--color-input-text);
|
|
46
|
-
@apply border border-border-primary rounded-md px-3 py-1
|
|
47
|
-
text-
|
|
63
|
+
@apply border border-border-primary rounded-md px-3 py-1
|
|
64
|
+
text-xs leading-[18px]
|
|
48
65
|
transition-all duration-200
|
|
49
66
|
focus:outline-none focus:border-border-focus focus:ring-2;
|
|
50
67
|
--tw-ring-color: color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
|
|
@@ -80,17 +97,16 @@
|
|
|
80
97
|
/* ========== Button Components ========== */
|
|
81
98
|
.btn {
|
|
82
99
|
@apply inline-flex items-center justify-center
|
|
83
|
-
font-semibold rounded-md px-3 py-1
|
|
100
|
+
font-semibold rounded-md px-3 py-1 text-xs leading-[18px]
|
|
84
101
|
transition-all duration-200
|
|
85
102
|
focus:outline-none focus:ring-2 focus:ring-offset-2
|
|
86
103
|
disabled:opacity-50 disabled:cursor-not-allowed;
|
|
87
104
|
}
|
|
88
105
|
|
|
89
106
|
.btn-primary {
|
|
90
|
-
@apply btn text-text-
|
|
91
|
-
hover:
|
|
107
|
+
@apply btn text-text-primary bg-accent-primary
|
|
108
|
+
hover:bg-accent-primary-hover
|
|
92
109
|
focus:ring-accent-primary;
|
|
93
|
-
background: linear-gradient(to right, var(--color-accent-primary), var(--color-accent-secondary));
|
|
94
110
|
}
|
|
95
111
|
|
|
96
112
|
.btn-secondary {
|
|
@@ -100,9 +116,15 @@
|
|
|
100
116
|
}
|
|
101
117
|
|
|
102
118
|
.btn-danger {
|
|
103
|
-
@apply btn
|
|
104
|
-
|
|
119
|
+
@apply btn border rounded-lg
|
|
120
|
+
text-accent-danger
|
|
105
121
|
focus:ring-accent-danger;
|
|
122
|
+
border-color: color-mix(in srgb, var(--color-accent-danger) 30%, transparent);
|
|
123
|
+
background-color: transparent;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.btn-danger:hover {
|
|
127
|
+
background-color: color-mix(in srgb, var(--color-accent-danger) 10%, transparent);
|
|
106
128
|
}
|
|
107
129
|
|
|
108
130
|
.btn-ghost {
|
|
@@ -123,10 +145,34 @@
|
|
|
123
145
|
@apply btn p-1.5;
|
|
124
146
|
}
|
|
125
147
|
|
|
148
|
+
.btn-glass {
|
|
149
|
+
background-color: rgba(255, 255, 255, 0.05);
|
|
150
|
+
@apply btn border rounded-lg
|
|
151
|
+
text-text-secondary hover:text-text-primary;
|
|
152
|
+
border-color: var(--color-glass-border);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.btn-glass:hover {
|
|
156
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/* Light/neutral fallback for btn-glass */
|
|
160
|
+
[data-theme="light"] .btn-glass,
|
|
161
|
+
[data-theme="neutral"] .btn-glass {
|
|
162
|
+
@apply btn-secondary;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.btn-outline {
|
|
166
|
+
@apply btn border rounded-lg
|
|
167
|
+
text-text-secondary hover:text-text-primary
|
|
168
|
+
hover:bg-bg-hover;
|
|
169
|
+
border-color: var(--color-border-primary);
|
|
170
|
+
}
|
|
171
|
+
|
|
126
172
|
/* ========== Table Components ========== */
|
|
127
173
|
.table-container {
|
|
128
|
-
@apply overflow-
|
|
129
|
-
|
|
174
|
+
@apply overflow-hidden rounded-xl bg-bg-glass border border-navbar-border;
|
|
175
|
+
backdrop-filter: blur(12px);
|
|
130
176
|
}
|
|
131
177
|
|
|
132
178
|
.table {
|
|
@@ -134,23 +180,27 @@
|
|
|
134
180
|
}
|
|
135
181
|
|
|
136
182
|
.table-header {
|
|
137
|
-
|
|
183
|
+
background-color: var(--color-table-header-bg);
|
|
138
184
|
}
|
|
139
185
|
|
|
140
186
|
.table-header-cell {
|
|
141
|
-
@apply px-
|
|
187
|
+
@apply px-2 py-[10px] text-left text-xs leading-[18px] font-medium text-text-secondary uppercase tracking-wider;
|
|
142
188
|
}
|
|
143
189
|
|
|
144
190
|
.table-body {
|
|
145
|
-
@apply
|
|
191
|
+
@apply divide-y divide-table-divider;
|
|
146
192
|
}
|
|
147
193
|
|
|
148
194
|
.table-row {
|
|
149
|
-
|
|
195
|
+
transition: background-color 0.15s ease;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.table-row:hover {
|
|
199
|
+
background-color: var(--color-table-row-hover);
|
|
150
200
|
}
|
|
151
201
|
|
|
152
202
|
.table-cell {
|
|
153
|
-
@apply px-
|
|
203
|
+
@apply px-2 py-[10px] whitespace-nowrap text-xs leading-[18px] text-text-primary;
|
|
154
204
|
}
|
|
155
205
|
|
|
156
206
|
.table-empty {
|
|
@@ -159,7 +209,7 @@
|
|
|
159
209
|
|
|
160
210
|
/* ========== Sidebar Components ========== */
|
|
161
211
|
.sidebar {
|
|
162
|
-
@apply bg-
|
|
212
|
+
@apply bg-transparent min-h-screen border-r border-sidebar-border;
|
|
163
213
|
}
|
|
164
214
|
|
|
165
215
|
.sidebar-item {
|
|
@@ -281,11 +331,14 @@
|
|
|
281
331
|
}
|
|
282
332
|
|
|
283
333
|
.pagination-btn {
|
|
284
|
-
@apply btn-ghost px-3 py-1
|
|
334
|
+
@apply btn-ghost px-3 py-1 text-xs leading-[18px];
|
|
285
335
|
}
|
|
286
336
|
|
|
287
337
|
.pagination-btn-active {
|
|
288
|
-
@apply pagination-btn
|
|
338
|
+
@apply pagination-btn;
|
|
339
|
+
background-color: color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
|
|
340
|
+
border: 1px solid color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
|
|
341
|
+
color: var(--color-accent-primary);
|
|
289
342
|
}
|
|
290
343
|
|
|
291
344
|
.pagination-btn-disabled {
|
|
@@ -385,4 +438,170 @@
|
|
|
385
438
|
.form-hint {
|
|
386
439
|
@apply text-text-tertiary text-xs mt-1;
|
|
387
440
|
}
|
|
441
|
+
|
|
442
|
+
/* ========== Glass Morphism Components ========== */
|
|
443
|
+
.panel-glass {
|
|
444
|
+
@apply bg-bg-glass rounded-xl;
|
|
445
|
+
backdrop-filter: blur(12px);
|
|
446
|
+
border: 1px solid var(--color-glass-border);
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
.input-glass {
|
|
450
|
+
background-color: var(--color-input-bg);
|
|
451
|
+
@apply border rounded-lg px-3 py-1 text-xs leading-[18px] text-text-primary
|
|
452
|
+
transition-all duration-200
|
|
453
|
+
focus:outline-none focus:border-accent-primary;
|
|
454
|
+
border-color: var(--color-glass-border);
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
.input-glass::placeholder {
|
|
458
|
+
color: var(--color-input-placeholder);
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
.select-glass {
|
|
462
|
+
@apply input-glass appearance-none cursor-pointer;
|
|
463
|
+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
|
464
|
+
background-position: right 0.5rem center;
|
|
465
|
+
background-repeat: no-repeat;
|
|
466
|
+
background-size: 1.5em 1.5em;
|
|
467
|
+
padding-right: 2.5rem;
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
.navbar-glass {
|
|
471
|
+
/* Deprecated: .navbar now includes glass + sticky by default. Keep for backward compat. */
|
|
472
|
+
@apply navbar;
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
.sidebar-glass {
|
|
476
|
+
@apply bg-bg-glass backdrop-blur-xl border-r border-border-primary;
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
/* ========== System Color Components ========== */
|
|
480
|
+
.avatar-gradient {
|
|
481
|
+
@apply w-8 h-8 rounded-full bg-gradient-primary
|
|
482
|
+
flex items-center justify-center text-text-inverse text-xs font-medium;
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
.divider-gradient {
|
|
486
|
+
@apply h-px bg-gradient-divider my-4;
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
/* ========== Icon Utility ========== */
|
|
490
|
+
.icon {
|
|
491
|
+
@apply text-system-primary;
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
.icon-sm {
|
|
495
|
+
@apply w-4 h-4;
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
.icon-md {
|
|
499
|
+
@apply w-5 h-5;
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
.icon-lg {
|
|
503
|
+
@apply w-6 h-6;
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
.badge-system {
|
|
507
|
+
@apply px-2 py-0.5 text-[10px] rounded font-medium;
|
|
508
|
+
}
|
|
509
|
+
|
|
510
|
+
/* 语义化系统色组件 */
|
|
511
|
+
.badge-system-primary {
|
|
512
|
+
background-color: color-mix(in srgb, var(--color-system-primary) 20%, transparent);
|
|
513
|
+
border-color: color-mix(in srgb, var(--color-system-primary) 40%, transparent);
|
|
514
|
+
color: var(--color-system-primary);
|
|
515
|
+
@apply badge-system border;
|
|
516
|
+
}
|
|
517
|
+
.badge-system-secondary {
|
|
518
|
+
background-color: color-mix(in srgb, var(--color-system-secondary) 20%, transparent);
|
|
519
|
+
border-color: color-mix(in srgb, var(--color-system-secondary) 40%, transparent);
|
|
520
|
+
color: var(--color-system-secondary);
|
|
521
|
+
@apply badge-system border;
|
|
522
|
+
}
|
|
523
|
+
.badge-system-tertiary {
|
|
524
|
+
background-color: color-mix(in srgb, var(--color-system-tertiary) 20%, transparent);
|
|
525
|
+
border-color: color-mix(in srgb, var(--color-system-tertiary) 40%, transparent);
|
|
526
|
+
color: var(--color-system-tertiary);
|
|
527
|
+
@apply badge-system border;
|
|
528
|
+
}
|
|
529
|
+
.badge-system-info {
|
|
530
|
+
background-color: color-mix(in srgb, var(--color-system-info) 20%, transparent);
|
|
531
|
+
border-color: color-mix(in srgb, var(--color-system-info) 40%, transparent);
|
|
532
|
+
color: var(--color-system-info);
|
|
533
|
+
@apply badge-system border;
|
|
534
|
+
}
|
|
535
|
+
.badge-system-warning {
|
|
536
|
+
background-color: color-mix(in srgb, var(--color-system-warning) 20%, transparent);
|
|
537
|
+
border-color: color-mix(in srgb, var(--color-system-warning) 40%, transparent);
|
|
538
|
+
color: var(--color-system-warning);
|
|
539
|
+
@apply badge-system border;
|
|
540
|
+
}
|
|
541
|
+
.badge-system-success {
|
|
542
|
+
background-color: color-mix(in srgb, var(--color-system-success) 20%, transparent);
|
|
543
|
+
border-color: color-mix(in srgb, var(--color-system-success) 40%, transparent);
|
|
544
|
+
color: var(--color-system-success);
|
|
545
|
+
@apply badge-system border;
|
|
546
|
+
}
|
|
547
|
+
.badge-system-danger {
|
|
548
|
+
background-color: color-mix(in srgb, var(--color-system-danger) 20%, transparent);
|
|
549
|
+
border-color: color-mix(in srgb, var(--color-system-danger) 40%, transparent);
|
|
550
|
+
color: var(--color-system-danger);
|
|
551
|
+
@apply badge-system border;
|
|
552
|
+
}
|
|
553
|
+
|
|
554
|
+
.status-dot-system {
|
|
555
|
+
@apply w-2 h-2 rounded-full;
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
/* 语义化系统色状态点 */
|
|
559
|
+
.status-dot-primary { @apply status-dot-system bg-system-primary; }
|
|
560
|
+
.status-dot-secondary { @apply status-dot-system bg-system-secondary; }
|
|
561
|
+
.status-dot-tertiary { @apply status-dot-system bg-system-tertiary; }
|
|
562
|
+
.status-dot-info { @apply status-dot-system bg-system-info; }
|
|
563
|
+
.status-dot-warning { @apply status-dot-system bg-system-warning; }
|
|
564
|
+
.status-dot-success { @apply status-dot-system bg-system-success; }
|
|
565
|
+
.status-dot-danger { @apply status-dot-system bg-system-danger; }
|
|
566
|
+
|
|
567
|
+
.icon-box-system {
|
|
568
|
+
@apply w-10 h-10 rounded-lg flex items-center justify-center shrink-0;
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
/* 语义化系统色图标容器 */
|
|
572
|
+
.icon-box-system-primary {
|
|
573
|
+
background-color: color-mix(in srgb, var(--color-system-primary) 15%, transparent);
|
|
574
|
+
border-color: color-mix(in srgb, var(--color-system-primary) 30%, transparent);
|
|
575
|
+
@apply icon-box-system border;
|
|
576
|
+
}
|
|
577
|
+
.icon-box-system-secondary {
|
|
578
|
+
background-color: color-mix(in srgb, var(--color-system-secondary) 15%, transparent);
|
|
579
|
+
border-color: color-mix(in srgb, var(--color-system-secondary) 30%, transparent);
|
|
580
|
+
@apply icon-box-system border;
|
|
581
|
+
}
|
|
582
|
+
.icon-box-system-tertiary {
|
|
583
|
+
background-color: color-mix(in srgb, var(--color-system-tertiary) 15%, transparent);
|
|
584
|
+
border-color: color-mix(in srgb, var(--color-system-tertiary) 30%, transparent);
|
|
585
|
+
@apply icon-box-system border;
|
|
586
|
+
}
|
|
587
|
+
.icon-box-system-info {
|
|
588
|
+
background-color: color-mix(in srgb, var(--color-system-info) 15%, transparent);
|
|
589
|
+
border-color: color-mix(in srgb, var(--color-system-info) 30%, transparent);
|
|
590
|
+
@apply icon-box-system border;
|
|
591
|
+
}
|
|
592
|
+
.icon-box-system-warning {
|
|
593
|
+
background-color: color-mix(in srgb, var(--color-system-warning) 15%, transparent);
|
|
594
|
+
border-color: color-mix(in srgb, var(--color-system-warning) 30%, transparent);
|
|
595
|
+
@apply icon-box-system border;
|
|
596
|
+
}
|
|
597
|
+
.icon-box-system-success {
|
|
598
|
+
background-color: color-mix(in srgb, var(--color-system-success) 15%, transparent);
|
|
599
|
+
border-color: color-mix(in srgb, var(--color-system-success) 30%, transparent);
|
|
600
|
+
@apply icon-box-system border;
|
|
601
|
+
}
|
|
602
|
+
.icon-box-system-danger {
|
|
603
|
+
background-color: color-mix(in srgb, var(--color-system-danger) 15%, transparent);
|
|
604
|
+
border-color: color-mix(in srgb, var(--color-system-danger) 30%, transparent);
|
|
605
|
+
@apply icon-box-system border;
|
|
606
|
+
}
|
|
388
607
|
}
|
package/composables.d.ts
ADDED
package/composables.ts
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { inject } from 'vue'
|
|
2
|
+
import type { SystemColors } from './plugin'
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* 获取系统色配置
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```vue
|
|
9
|
+
* <script setup>
|
|
10
|
+
* import { useSystemColors } from '@aquiferre/theme-kit'
|
|
11
|
+
*
|
|
12
|
+
* const colors = useSystemColors()
|
|
13
|
+
* // colors.primary === '#3b82f6'
|
|
14
|
+
* </script>
|
|
15
|
+
*
|
|
16
|
+
* <template>
|
|
17
|
+
* <span :style="{ color: colors.primary }">系统标签</span>
|
|
18
|
+
* </template>
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
export function useSystemColors(): SystemColors {
|
|
22
|
+
const colors = inject<SystemColors>('theme-kit-system-colors', {
|
|
23
|
+
primary: '#3b82f6',
|
|
24
|
+
secondary: '#f59e0b',
|
|
25
|
+
tertiary: '#10b981',
|
|
26
|
+
info: '#06b6d4',
|
|
27
|
+
warning: '#f59e0b',
|
|
28
|
+
success: '#10b981',
|
|
29
|
+
danger: '#ef4444',
|
|
30
|
+
})
|
|
31
|
+
return colors
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* 获取单个系统色
|
|
36
|
+
*
|
|
37
|
+
* @example
|
|
38
|
+
* ```vue
|
|
39
|
+
* <script setup>
|
|
40
|
+
* import { useSystemColor } from '@aquiferre/theme-kit'
|
|
41
|
+
*
|
|
42
|
+
* const primaryColor = useSystemColor('primary')
|
|
43
|
+
* // primaryColor === '#3b82f6'
|
|
44
|
+
* </script>
|
|
45
|
+
* ```
|
|
46
|
+
*/
|
|
47
|
+
export function useSystemColor(key: keyof SystemColors = 'primary'): string {
|
|
48
|
+
const colors = useSystemColors()
|
|
49
|
+
return colors[key] || colors.primary
|
|
50
|
+
}
|
package/index.d.ts
ADDED
package/index.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,17 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aquiferre/theme-kit",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "index.ts",
|
|
7
|
+
"types": "index.d.ts",
|
|
7
8
|
"exports": {
|
|
8
|
-
".":
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./index.d.ts",
|
|
11
|
+
"default": "./index.ts"
|
|
12
|
+
},
|
|
9
13
|
"./base.css": "./base.css",
|
|
10
14
|
"./variables.css": "./variables.css",
|
|
11
15
|
"./components.css": "./components.css",
|
|
12
16
|
"./tailwind.preset": "./tailwind.preset.js"
|
|
13
17
|
},
|
|
14
|
-
"files": ["*.css", "*.ts", "*.js"],
|
|
18
|
+
"files": ["*.css", "*.ts", "*.js", "*.d.ts"],
|
|
19
|
+
"peerDependencies": {
|
|
20
|
+
"pinia": "^2.0.0",
|
|
21
|
+
"vue": "^3.0.0"
|
|
22
|
+
},
|
|
15
23
|
"publishConfig": {
|
|
16
24
|
"access": "public"
|
|
17
25
|
}
|
package/plugin.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { App, Plugin } from 'vue'
|
|
2
|
+
|
|
3
|
+
export interface SystemColors {
|
|
4
|
+
primary: string
|
|
5
|
+
secondary?: string
|
|
6
|
+
tertiary?: string
|
|
7
|
+
info?: string
|
|
8
|
+
warning?: string
|
|
9
|
+
success?: string
|
|
10
|
+
danger?: string
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export declare const ThemeKitPlugin: Plugin
|
package/plugin.ts
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import type { App, Plugin } from 'vue'
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* 系统色配置接口
|
|
5
|
+
* 各应用可以根据自己的业务语义配置颜色
|
|
6
|
+
*/
|
|
7
|
+
export interface SystemColors {
|
|
8
|
+
/** 主系统色 (当前应用的主色) */
|
|
9
|
+
primary: string
|
|
10
|
+
/** 次要系统色 */
|
|
11
|
+
secondary?: string
|
|
12
|
+
/** 第三系统色 */
|
|
13
|
+
tertiary?: string
|
|
14
|
+
/** 信息色 */
|
|
15
|
+
info?: string
|
|
16
|
+
/** 警告色 */
|
|
17
|
+
warning?: string
|
|
18
|
+
/** 成功色 */
|
|
19
|
+
success?: string
|
|
20
|
+
/** 危险色 */
|
|
21
|
+
danger?: string
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* ThemeKit Vue 插件
|
|
26
|
+
* 允许各应用动态注入自己的系统色配置
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* ```typescript
|
|
30
|
+
* // app-portal/main.ts
|
|
31
|
+
* import { ThemeKitPlugin } from '@aquiferre/theme-kit'
|
|
32
|
+
*
|
|
33
|
+
* app.use(ThemeKitPlugin, {
|
|
34
|
+
* systemColors: {
|
|
35
|
+
* primary: '#3b82f6', // IDSS 蓝
|
|
36
|
+
* secondary: '#f59e0b', // RDSS 琥珀
|
|
37
|
+
* tertiary: '#10b981', // PDSS 绿
|
|
38
|
+
* }
|
|
39
|
+
* })
|
|
40
|
+
* ```
|
|
41
|
+
*/
|
|
42
|
+
export const ThemeKitPlugin: Plugin = {
|
|
43
|
+
install(app: App, options: { systemColors: SystemColors }) {
|
|
44
|
+
const defaultColors: SystemColors = {
|
|
45
|
+
primary: '#3b82f6', // 默认蓝色
|
|
46
|
+
secondary: '#f59e0b',
|
|
47
|
+
tertiary: '#10b981',
|
|
48
|
+
info: '#06b6d4',
|
|
49
|
+
warning: '#f59e0b',
|
|
50
|
+
success: '#10b981',
|
|
51
|
+
danger: '#ef4444',
|
|
52
|
+
}
|
|
53
|
+
const colors: SystemColors = Object.assign({}, defaultColors, options.systemColors)
|
|
54
|
+
|
|
55
|
+
// 提供全局访问
|
|
56
|
+
app.provide('theme-kit-system-colors', colors)
|
|
57
|
+
|
|
58
|
+
// 同时设置 CSS 变量 (供 Tailwind 使用)
|
|
59
|
+
if (typeof document !== 'undefined') {
|
|
60
|
+
const root = document.documentElement
|
|
61
|
+
|
|
62
|
+
// 系统语义色变量
|
|
63
|
+
root.style.setProperty('--system-color-primary', colors.primary)
|
|
64
|
+
if (colors.secondary) root.style.setProperty('--system-color-secondary', colors.secondary)
|
|
65
|
+
if (colors.tertiary) root.style.setProperty('--system-color-tertiary', colors.tertiary)
|
|
66
|
+
if (colors.info) root.style.setProperty('--system-color-info', colors.info)
|
|
67
|
+
if (colors.warning) root.style.setProperty('--system-color-warning', colors.warning)
|
|
68
|
+
if (colors.success) root.style.setProperty('--system-color-success', colors.success)
|
|
69
|
+
if (colors.danger) root.style.setProperty('--system-color-danger', colors.danger)
|
|
70
|
+
|
|
71
|
+
// RGB 版本 (用于 rgba() 发光效果)
|
|
72
|
+
const rgb = hexToRgb(colors.primary)
|
|
73
|
+
if (rgb) root.style.setProperty('--color-system-primary-rgb', `${rgb.r}, ${rgb.g}, ${rgb.b}`)
|
|
74
|
+
|
|
75
|
+
// 贯通 accent-primary: 按钮/头像/导航等交互元素统一使用系统主色
|
|
76
|
+
const cleanHex = colors.primary.slice(0, 7) // 去掉可能的 alpha 后缀
|
|
77
|
+
root.style.setProperty('--color-accent-primary', cleanHex)
|
|
78
|
+
root.style.setProperty('--color-accent-primary-hover', darkenHex(cleanHex, 0.12))
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/** Convert hex color to RGB object */
|
|
84
|
+
function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
|
|
85
|
+
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
|
|
86
|
+
return result
|
|
87
|
+
? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) }
|
|
88
|
+
: null
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/** Darken a hex color by a fraction (0-1) */
|
|
92
|
+
function darkenHex(hex: string, amount: number): string {
|
|
93
|
+
const rgb = hexToRgb(hex)
|
|
94
|
+
if (!rgb) return hex
|
|
95
|
+
const clamp = (v: number) => Math.max(0, Math.min(255, Math.round(v)))
|
|
96
|
+
const r = clamp(rgb.r * (1 - amount))
|
|
97
|
+
const g = clamp(rgb.g * (1 - amount))
|
|
98
|
+
const b = clamp(rgb.b * (1 - amount))
|
|
99
|
+
return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
|
|
100
|
+
}
|
package/tailwind.preset.js
CHANGED
|
@@ -35,6 +35,20 @@ export default {
|
|
|
35
35
|
'input-bg': 'var(--color-input-bg)',
|
|
36
36
|
'input-text': 'var(--color-input-text)',
|
|
37
37
|
'input-placeholder': 'var(--color-input-placeholder)',
|
|
38
|
+
// Table & Navbar theme-aware colors
|
|
39
|
+
'table-divider': 'var(--color-table-divider)',
|
|
40
|
+
'table-row-hover': 'var(--color-table-row-hover)',
|
|
41
|
+
'table-header-bg': 'var(--color-table-header-bg)',
|
|
42
|
+
'navbar-border': 'var(--color-navbar-border)',
|
|
43
|
+
'glass-border': 'var(--color-glass-border)',
|
|
44
|
+
// System Colors - 语义化,由各应用动态注入
|
|
45
|
+
'system-primary': 'var(--color-system-primary)',
|
|
46
|
+
'system-secondary': 'var(--color-system-secondary)',
|
|
47
|
+
'system-tertiary': 'var(--color-system-tertiary)',
|
|
48
|
+
'system-info': 'var(--color-system-info)',
|
|
49
|
+
'system-warning': 'var(--color-system-warning)',
|
|
50
|
+
'system-success': 'var(--color-system-success)',
|
|
51
|
+
'system-danger': 'var(--color-system-danger)',
|
|
38
52
|
},
|
|
39
53
|
boxShadow: {
|
|
40
54
|
xs: 'var(--shadow-xs)',
|
|
@@ -42,6 +56,25 @@ export default {
|
|
|
42
56
|
md: 'var(--shadow-md)',
|
|
43
57
|
lg: 'var(--shadow-lg)',
|
|
44
58
|
xl: 'var(--shadow-xl)',
|
|
59
|
+
// Glow effects for semantic system colors
|
|
60
|
+
'glow-primary': '0 0 12px rgba(var(--color-system-primary-rgb, 59 130 246), 0.4)',
|
|
61
|
+
'glow-secondary': '0 0 12px rgba(var(--color-system-secondary-rgb, 245 158 11), 0.4)',
|
|
62
|
+
'glow-tertiary': '0 0 12px rgba(var(--color-system-tertiary-rgb, 16 185 129), 0.4)',
|
|
63
|
+
'glow-info': '0 0 12px rgba(var(--color-system-info-rgb, 6 182 212), 0.4)',
|
|
64
|
+
'glow-warning': '0 0 12px rgba(var(--color-system-warning-rgb, 245 158 11), 0.4)',
|
|
65
|
+
'glow-success': '0 0 12px rgba(var(--color-system-success-rgb, 16 185 129), 0.4)',
|
|
66
|
+
'glow-danger': '0 0 12px rgba(var(--color-system-danger-rgb, 239 68 68), 0.4)',
|
|
67
|
+
},
|
|
68
|
+
backgroundImage: {
|
|
69
|
+
'gradient-primary': 'linear-gradient(to right, var(--color-accent-primary), var(--color-accent-secondary))',
|
|
70
|
+
'gradient-divider': 'linear-gradient(to right, transparent, var(--color-border-primary), transparent)',
|
|
71
|
+
'gradient-system-primary': 'linear-gradient(135deg, var(--color-system-primary), color-mix(in srgb, var(--color-system-primary) 70%, var(--color-accent-secondary)))',
|
|
72
|
+
'gradient-system-secondary': 'linear-gradient(135deg, var(--color-system-secondary), color-mix(in srgb, var(--color-system-secondary) 70%, var(--color-accent-secondary)))',
|
|
73
|
+
'gradient-system-tertiary': 'linear-gradient(135deg, var(--color-system-tertiary), color-mix(in srgb, var(--color-system-tertiary) 70%, var(--color-accent-secondary)))',
|
|
74
|
+
'gradient-system-info': 'linear-gradient(135deg, var(--color-system-info), color-mix(in srgb, var(--color-system-info) 70%, var(--color-accent-secondary)))',
|
|
75
|
+
'gradient-system-warning': 'linear-gradient(135deg, var(--color-system-warning), color-mix(in srgb, var(--color-system-warning) 70%, var(--color-accent-secondary)))',
|
|
76
|
+
'gradient-system-success': 'linear-gradient(135deg, var(--color-system-success), color-mix(in srgb, var(--color-system-success) 70%, var(--color-accent-secondary)))',
|
|
77
|
+
'gradient-system-danger': 'linear-gradient(135deg, var(--color-system-danger), color-mix(in srgb, var(--color-system-danger) 70%, var(--color-accent-secondary)))',
|
|
45
78
|
},
|
|
46
79
|
borderRadius: {
|
|
47
80
|
sm: 'var(--radius-sm)',
|
package/theme.d.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { type Ref } from 'vue'
|
|
2
|
+
import type { Store } from 'pinia'
|
|
3
|
+
|
|
4
|
+
export type ThemeMode = 'light' | 'dark' | 'neutral'
|
|
5
|
+
|
|
6
|
+
export interface ThemeInfo {
|
|
7
|
+
mode: ThemeMode
|
|
8
|
+
label: string
|
|
9
|
+
icon: string
|
|
10
|
+
description: string
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export declare const themeList: ThemeInfo[]
|
|
14
|
+
|
|
15
|
+
interface ThemeStore {
|
|
16
|
+
theme: Ref<ThemeMode>
|
|
17
|
+
themeList: ThemeInfo[]
|
|
18
|
+
currentThemeInfo: ThemeInfo | undefined
|
|
19
|
+
toggle: () => void
|
|
20
|
+
setTheme: (t: ThemeMode) => void
|
|
21
|
+
getSystemTheme: () => ThemeMode
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export declare const useThemeStore: () => ThemeStore
|
package/theme.ts
CHANGED
package/variables.css
CHANGED
|
@@ -10,6 +10,13 @@
|
|
|
10
10
|
--color-bg-overlay: rgba(0, 0, 0, 0.5);
|
|
11
11
|
--color-bg-hover: #f1f5f9;
|
|
12
12
|
|
|
13
|
+
/* Table & Navbar theme-aware variables */
|
|
14
|
+
--color-table-divider: var(--color-border-secondary);
|
|
15
|
+
--color-table-row-hover: var(--color-bg-hover);
|
|
16
|
+
--color-table-header-bg: var(--color-bg-tertiary);
|
|
17
|
+
--color-navbar-border: var(--color-border-primary);
|
|
18
|
+
--color-glass-border: var(--color-border-primary);
|
|
19
|
+
|
|
13
20
|
--color-text-primary: #0f172a;
|
|
14
21
|
--color-text-secondary: #475569;
|
|
15
22
|
--color-text-tertiary: #94a3b8;
|
|
@@ -39,6 +46,22 @@
|
|
|
39
46
|
--color-input-text: #1e293b;
|
|
40
47
|
--color-input-placeholder: #94a3b8;
|
|
41
48
|
|
|
49
|
+
/* System Colors - 语义化,由各应用动态注入 */
|
|
50
|
+
--color-system-primary: var(--system-color-primary, #3b82f6);
|
|
51
|
+
--color-system-secondary: var(--system-color-secondary, #f59e0b);
|
|
52
|
+
--color-system-tertiary: var(--system-color-tertiary, #10b981);
|
|
53
|
+
--color-system-info: var(--system-color-info, #06b6d4);
|
|
54
|
+
--color-system-warning: var(--system-color-warning, #f59e0b);
|
|
55
|
+
--color-system-success: var(--system-color-success, #10b981);
|
|
56
|
+
--color-system-danger: var(--system-color-danger, #ef4444);
|
|
57
|
+
|
|
58
|
+
/* System Primary RGB (for rgba glow effects, set by ThemeKitPlugin) */
|
|
59
|
+
--color-system-primary-rgb: 59, 130, 246;
|
|
60
|
+
|
|
61
|
+
/* Body Background Gradient */
|
|
62
|
+
--color-body-bg: #ffffff;
|
|
63
|
+
--color-body-gradient: color-mix(in srgb, var(--color-system-primary) 5%, #f0f0f0);
|
|
64
|
+
|
|
42
65
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
43
66
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
44
67
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
@@ -60,10 +83,16 @@
|
|
|
60
83
|
--color-sidebar-bg: #161616;
|
|
61
84
|
--color-bg-secondary: #1e1e28;
|
|
62
85
|
--color-bg-tertiary: #282838;
|
|
63
|
-
--color-bg-glass: rgba(
|
|
86
|
+
--color-bg-glass: rgba(30, 30, 30, 0.6);
|
|
64
87
|
--color-bg-overlay: rgba(0, 0, 0, 0.7);
|
|
65
88
|
--color-bg-hover: #1e1e28;
|
|
66
89
|
|
|
90
|
+
--color-table-divider: rgba(255, 255, 255, 0.04);
|
|
91
|
+
--color-table-row-hover: rgba(255, 255, 255, 0.03);
|
|
92
|
+
--color-table-header-bg: transparent;
|
|
93
|
+
--color-navbar-border: rgba(255, 255, 255, 0.05);
|
|
94
|
+
--color-glass-border: rgba(255, 255, 255, 0.1);
|
|
95
|
+
|
|
67
96
|
--color-text-primary: #f0f0f5;
|
|
68
97
|
--color-text-secondary: #a0a0b0;
|
|
69
98
|
--color-text-tertiary: #7a7a8a;
|
|
@@ -92,6 +121,19 @@
|
|
|
92
121
|
--color-input-text: #f0f0f5;
|
|
93
122
|
--color-input-placeholder: #7a7a8a;
|
|
94
123
|
|
|
124
|
+
/* System Colors - 语义化 (Brighter for dark theme) */
|
|
125
|
+
--color-system-primary: var(--system-color-primary, #60a5fa);
|
|
126
|
+
--color-system-secondary: var(--system-color-secondary, #fbbf24);
|
|
127
|
+
--color-system-tertiary: var(--system-color-tertiary, #34d399);
|
|
128
|
+
--color-system-info: var(--system-color-info, #22d3ee);
|
|
129
|
+
--color-system-warning: var(--system-color-warning, #fbbf24);
|
|
130
|
+
--color-system-success: var(--system-color-success, #34d399);
|
|
131
|
+
--color-system-danger: var(--system-color-danger, #f87171);
|
|
132
|
+
|
|
133
|
+
/* Body Background Gradient (dark) */
|
|
134
|
+
--color-body-bg: #0a0a0a;
|
|
135
|
+
--color-body-gradient: color-mix(in srgb, var(--color-system-primary) 12%, #0a0a0a);
|
|
136
|
+
|
|
95
137
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
|
|
96
138
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
|
|
97
139
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
|
|
@@ -109,6 +151,12 @@
|
|
|
109
151
|
--color-bg-overlay: rgba(0, 0, 0, 0.4);
|
|
110
152
|
--color-bg-hover: #d9d9d9;
|
|
111
153
|
|
|
154
|
+
--color-table-divider: var(--color-border-secondary);
|
|
155
|
+
--color-table-row-hover: var(--color-bg-hover);
|
|
156
|
+
--color-table-header-bg: var(--color-bg-tertiary);
|
|
157
|
+
--color-navbar-border: var(--color-border-primary);
|
|
158
|
+
--color-glass-border: var(--color-border-primary);
|
|
159
|
+
|
|
112
160
|
--color-text-primary: #2d2d2d;
|
|
113
161
|
--color-text-secondary: #5c5c5c;
|
|
114
162
|
--color-text-tertiary: #8a8a8a;
|
|
@@ -138,6 +186,19 @@
|
|
|
138
186
|
--color-input-text: #2d2d2d;
|
|
139
187
|
--color-input-placeholder: #8a8a8a;
|
|
140
188
|
|
|
189
|
+
/* System Colors - 语义化 (Muted for neutral theme) */
|
|
190
|
+
--color-system-primary: var(--system-color-primary, #5a8abf);
|
|
191
|
+
--color-system-secondary: var(--system-color-secondary, #d4a574);
|
|
192
|
+
--color-system-tertiary: var(--system-color-tertiary, #5a9a7a);
|
|
193
|
+
--color-system-info: var(--system-color-info, #4a8a9a);
|
|
194
|
+
--color-system-warning: var(--system-color-warning, #d4a574);
|
|
195
|
+
--color-system-success: var(--system-color-success, #5a9a7a);
|
|
196
|
+
--color-system-danger: var(--system-color-danger, #c47a7a);
|
|
197
|
+
|
|
198
|
+
/* Body Background Gradient (neutral) */
|
|
199
|
+
--color-body-bg: #e8e8e8;
|
|
200
|
+
--color-body-gradient: color-mix(in srgb, var(--color-system-primary) 6%, #e0e0e0);
|
|
201
|
+
|
|
141
202
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
142
203
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
143
204
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|