@gcsa/design-tokens 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -0
- package/css/console.css +183 -0
- package/css/tokens.css +190 -0
- package/dist/index.d.ts +57 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +54 -0
- package/package.json +31 -0
package/README.md
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
# @gcsa/design-tokens
|
|
2
|
+
|
|
3
|
+
GCSA 控制台与生态产品的共享设计 token（CSS 变量 + TypeScript 常量）。
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
pnpm install
|
|
7
|
+
pnpm build
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
```css
|
|
11
|
+
@import '@gcsa/design-tokens/css/tokens.css';
|
|
12
|
+
@import '@gcsa/design-tokens/css/console.css';
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
import { GCSA_CONSOLE_COLORS, GCSA_CONSOLE_LAYOUT } from '@gcsa/design-tokens';
|
|
17
|
+
```
|
package/css/console.css
ADDED
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
@import './tokens.css';
|
|
2
|
+
|
|
3
|
+
/* GcsaConfigProvider root — fill app viewport so shell can isolate content scroll */
|
|
4
|
+
.gcsa-console-root {
|
|
5
|
+
width: 100%;
|
|
6
|
+
max-width: 100%;
|
|
7
|
+
height: 100%;
|
|
8
|
+
min-height: 0;
|
|
9
|
+
overflow-x: hidden;
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.gcsa-console-root > .gcsa-console-shell {
|
|
15
|
+
flex: 1 1 auto;
|
|
16
|
+
min-height: 0;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.gcsa-console-shell {
|
|
20
|
+
position: relative;
|
|
21
|
+
height: 100%;
|
|
22
|
+
min-height: 0;
|
|
23
|
+
overflow: hidden;
|
|
24
|
+
display: flex;
|
|
25
|
+
background: var(--gcsa-color-bg-base);
|
|
26
|
+
color: var(--gcsa-color-text);
|
|
27
|
+
font-family: var(--gcsa-font-body);
|
|
28
|
+
--gcsa-shell-sider-width: var(--gcsa-console-sider-width);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.gcsa-console-shell--sidebar-collapsed {
|
|
32
|
+
--gcsa-shell-sider-width: var(--gcsa-console-sider-width-collapsed);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.gcsa-console-shell__scrim {
|
|
36
|
+
display: none;
|
|
37
|
+
margin: 0;
|
|
38
|
+
padding: 0;
|
|
39
|
+
border: none;
|
|
40
|
+
cursor: pointer;
|
|
41
|
+
appearance: none;
|
|
42
|
+
-webkit-appearance: none;
|
|
43
|
+
font: inherit;
|
|
44
|
+
color: inherit;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.gcsa-console-shell__sidebar {
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-direction: column;
|
|
50
|
+
flex-shrink: 0;
|
|
51
|
+
width: var(--gcsa-shell-sider-width);
|
|
52
|
+
min-height: 0;
|
|
53
|
+
border-right: 1px solid var(--gcsa-color-border);
|
|
54
|
+
background:
|
|
55
|
+
linear-gradient(180deg, var(--gcsa-color-shell-glow) 0%, transparent 58.5%),
|
|
56
|
+
var(--gcsa-color-bg-shell-deep);
|
|
57
|
+
overflow: hidden;
|
|
58
|
+
transition:
|
|
59
|
+
width var(--gcsa-motion-base) var(--gcsa-ease-out),
|
|
60
|
+
transform var(--gcsa-motion-base) var(--gcsa-ease-out);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.gcsa-console-shell__main {
|
|
64
|
+
flex: 1;
|
|
65
|
+
min-width: 0;
|
|
66
|
+
min-height: 0;
|
|
67
|
+
display: flex;
|
|
68
|
+
flex-direction: column;
|
|
69
|
+
overflow: hidden;
|
|
70
|
+
background: var(--gcsa-color-bg-base);
|
|
71
|
+
transition: margin var(--gcsa-motion-base) var(--gcsa-ease-out);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.gcsa-console-shell__header {
|
|
75
|
+
flex-shrink: 0;
|
|
76
|
+
min-height: var(--gcsa-console-header-height);
|
|
77
|
+
max-width: 100%;
|
|
78
|
+
overflow: hidden;
|
|
79
|
+
border-bottom: 1px solid var(--gcsa-color-border-subtle);
|
|
80
|
+
background: var(--gcsa-color-bg-base);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.gcsa-console-shell__content {
|
|
84
|
+
flex: 1;
|
|
85
|
+
min-height: 0;
|
|
86
|
+
min-width: 0;
|
|
87
|
+
max-width: 100%;
|
|
88
|
+
overflow-x: hidden;
|
|
89
|
+
overflow-y: auto;
|
|
90
|
+
padding: var(--gcsa-space-5) var(--gcsa-space-6) var(--gcsa-space-7);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.gcsa-console-shell__content-inner {
|
|
94
|
+
width: 100%;
|
|
95
|
+
max-width: var(--gcsa-console-content-max-width);
|
|
96
|
+
min-width: 0;
|
|
97
|
+
margin: 0 auto;
|
|
98
|
+
animation: gcsa-console-content-in var(--gcsa-motion-slow) var(--gcsa-ease-out);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
@keyframes gcsa-console-content-in {
|
|
102
|
+
from {
|
|
103
|
+
opacity: 0;
|
|
104
|
+
transform: translateY(8px);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
to {
|
|
108
|
+
opacity: 1;
|
|
109
|
+
transform: translateY(0);
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
[data-gcsa-theme='light'] .gcsa-console-shell__sidebar {
|
|
114
|
+
border-right-color: var(--gcsa-color-border-subtle);
|
|
115
|
+
background:
|
|
116
|
+
linear-gradient(180deg, var(--gcsa-color-shell-glow) 0%, transparent 52%),
|
|
117
|
+
var(--gcsa-color-bg-shell-deep);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
[data-gcsa-theme='light'] .gcsa-console-shell__header {
|
|
121
|
+
background: var(--gcsa-color-bg-shell);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* Desktop: sidebar stays in viewport; only .gcsa-console-shell__content scrolls */
|
|
125
|
+
@media (min-width: 961px) {
|
|
126
|
+
.gcsa-console-shell__sidebar {
|
|
127
|
+
position: sticky;
|
|
128
|
+
top: 0;
|
|
129
|
+
align-self: flex-start;
|
|
130
|
+
height: 100%;
|
|
131
|
+
max-height: 100vh;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
@media (max-width: 960px) {
|
|
136
|
+
.gcsa-console-shell {
|
|
137
|
+
--gcsa-shell-sider-width: var(--gcsa-console-sider-width);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.gcsa-console-shell__scrim {
|
|
141
|
+
display: block;
|
|
142
|
+
position: fixed;
|
|
143
|
+
inset: 0;
|
|
144
|
+
z-index: calc(var(--gcsa-z-sticky) - 1);
|
|
145
|
+
background: var(--gcsa-color-scrim-soft);
|
|
146
|
+
opacity: 0;
|
|
147
|
+
pointer-events: none;
|
|
148
|
+
transition: opacity var(--gcsa-motion-base) var(--gcsa-ease-out);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.gcsa-console-shell--sidebar-open .gcsa-console-shell__scrim {
|
|
152
|
+
opacity: 1;
|
|
153
|
+
pointer-events: auto;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.gcsa-console-shell__sidebar {
|
|
157
|
+
position: fixed;
|
|
158
|
+
top: 0;
|
|
159
|
+
left: 0;
|
|
160
|
+
bottom: 0;
|
|
161
|
+
z-index: var(--gcsa-z-sticky);
|
|
162
|
+
width: min(var(--gcsa-console-sider-width), 88vw);
|
|
163
|
+
transform: translateX(-105%);
|
|
164
|
+
box-shadow: var(--gcsa-shadow-md);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.gcsa-console-shell--sidebar-open .gcsa-console-shell__sidebar {
|
|
168
|
+
transform: translateX(0);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.gcsa-console-shell__content {
|
|
172
|
+
padding: var(--gcsa-space-4) var(--gcsa-space-4) var(--gcsa-space-6);
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
@media (prefers-reduced-motion: reduce) {
|
|
177
|
+
.gcsa-console-shell__sidebar,
|
|
178
|
+
.gcsa-console-shell__scrim,
|
|
179
|
+
.gcsa-console-shell__content-inner {
|
|
180
|
+
animation: none;
|
|
181
|
+
transition: none;
|
|
182
|
+
}
|
|
183
|
+
}
|
package/css/tokens.css
ADDED
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* GCSA console design tokens — import once per app.
|
|
3
|
+
* @import '@gcsa/design-tokens/css/tokens.css';
|
|
4
|
+
*
|
|
5
|
+
* Theme: set data-gcsa-theme="dark" | "light" on .gcsa-console-root (via GcsaConfigProvider).
|
|
6
|
+
* Portal popups mount to document.body — also set data-gcsa-theme on html (syncDocument) or use .gcsa-portal-scope.
|
|
7
|
+
*/
|
|
8
|
+
:root {
|
|
9
|
+
--gcsa-space-1: 4px;
|
|
10
|
+
--gcsa-space-2: 8px;
|
|
11
|
+
--gcsa-space-3: 12px;
|
|
12
|
+
--gcsa-space-4: 16px;
|
|
13
|
+
--gcsa-space-5: 24px;
|
|
14
|
+
--gcsa-space-6: 32px;
|
|
15
|
+
--gcsa-space-7: 48px;
|
|
16
|
+
|
|
17
|
+
--gcsa-motion-fast: 150ms;
|
|
18
|
+
--gcsa-motion-base: 200ms;
|
|
19
|
+
--gcsa-motion-slow: 280ms;
|
|
20
|
+
--gcsa-motion-modal: 250ms;
|
|
21
|
+
--gcsa-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
|
22
|
+
--gcsa-ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
23
|
+
--gcsa-ease-modal: cubic-bezier(0.08, 0.82, 0.17, 1);
|
|
24
|
+
|
|
25
|
+
--gcsa-z-dropdown: 1000;
|
|
26
|
+
--gcsa-z-sticky: 1100;
|
|
27
|
+
--gcsa-z-modal: 1200;
|
|
28
|
+
--gcsa-z-toast: 1300;
|
|
29
|
+
|
|
30
|
+
--gcsa-radius-sm: 8px;
|
|
31
|
+
--gcsa-radius-md: 12px;
|
|
32
|
+
--gcsa-radius-lg: 16px;
|
|
33
|
+
|
|
34
|
+
--gcsa-font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
|
|
35
|
+
--gcsa-font-brand: 'Orbitron', 'Plus Jakarta Sans', sans-serif;
|
|
36
|
+
--gcsa-font-mono: 'Fira Code', ui-monospace, monospace;
|
|
37
|
+
|
|
38
|
+
--gcsa-font-size-xs: 11px;
|
|
39
|
+
--gcsa-font-size-sm: 12px;
|
|
40
|
+
--gcsa-font-size-base: 14px;
|
|
41
|
+
--gcsa-font-size-md: 15px;
|
|
42
|
+
--gcsa-font-size-lg: 16px;
|
|
43
|
+
--gcsa-font-size-xl: 18px;
|
|
44
|
+
--gcsa-font-size-2xl: 22px;
|
|
45
|
+
--gcsa-font-size-3xl: 28px;
|
|
46
|
+
|
|
47
|
+
--gcsa-line-height-tight: 1.35;
|
|
48
|
+
--gcsa-line-height-snug: 1.4;
|
|
49
|
+
--gcsa-line-height-base: 1.5;
|
|
50
|
+
--gcsa-line-height-relaxed: 1.65;
|
|
51
|
+
|
|
52
|
+
--gcsa-console-sider-width: 240px;
|
|
53
|
+
--gcsa-console-sider-width-collapsed: 72px;
|
|
54
|
+
--gcsa-console-header-height: 60px;
|
|
55
|
+
--gcsa-console-content-max-width: 1280px;
|
|
56
|
+
--gcsa-console-shell-breakpoint: 960px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Dark (default console) */
|
|
60
|
+
:root,
|
|
61
|
+
[data-gcsa-theme='dark'] {
|
|
62
|
+
/* Figma dark foundation tokens (00 · Cover & Foundations). */
|
|
63
|
+
--gcsa-color-bg-base: #030407;
|
|
64
|
+
--gcsa-color-bg-shell: #030407;
|
|
65
|
+
--gcsa-color-bg-shell-deep: #040c13;
|
|
66
|
+
--gcsa-color-bg-surface: #121316;
|
|
67
|
+
--gcsa-color-bg-elevated: #1a1b1f;
|
|
68
|
+
--gcsa-color-bg-input: #121316;
|
|
69
|
+
--gcsa-color-bg-hover: rgba(255, 255, 255, 0.06);
|
|
70
|
+
|
|
71
|
+
--gcsa-color-border: rgba(255, 255, 255, 0.14);
|
|
72
|
+
--gcsa-color-border-subtle: rgba(255, 255, 255, 0.08);
|
|
73
|
+
--gcsa-color-border-strong: rgba(0, 187, 204, 0.48);
|
|
74
|
+
|
|
75
|
+
--gcsa-color-primary: #00bbcc;
|
|
76
|
+
--gcsa-color-primary-hover: #3ecfd6;
|
|
77
|
+
--gcsa-color-primary-muted: rgba(0, 187, 204, 0.14);
|
|
78
|
+
--gcsa-color-primary-muted-strong: rgba(0, 187, 204, 0.2);
|
|
79
|
+
|
|
80
|
+
--gcsa-color-text: #ffffff;
|
|
81
|
+
--gcsa-color-text-heading: #ffffff;
|
|
82
|
+
--gcsa-color-text-secondary: rgba(255, 255, 255, 0.6);
|
|
83
|
+
--gcsa-color-text-muted: rgba(255, 255, 255, 0.6);
|
|
84
|
+
--gcsa-color-text-on-surface: #ffffff;
|
|
85
|
+
--gcsa-color-on-primary: #030407;
|
|
86
|
+
|
|
87
|
+
--gcsa-color-destructive: #e24444;
|
|
88
|
+
--gcsa-color-destructive-text: #e24444;
|
|
89
|
+
--gcsa-color-danger: #e24444;
|
|
90
|
+
--gcsa-color-accent: #00c0a6;
|
|
91
|
+
--gcsa-color-success: #00c0a6;
|
|
92
|
+
--gcsa-color-warning: #f59e0b;
|
|
93
|
+
--gcsa-color-info: #41b7ec;
|
|
94
|
+
|
|
95
|
+
--gcsa-color-success-muted: rgba(0, 192, 166, 0.14);
|
|
96
|
+
--gcsa-color-warning-muted: rgba(245, 158, 11, 0.14);
|
|
97
|
+
--gcsa-color-info-muted: rgba(65, 183, 236, 0.12);
|
|
98
|
+
--gcsa-color-danger-muted: rgba(226, 68, 68, 0.12);
|
|
99
|
+
--gcsa-color-danger-muted-strong: rgba(226, 68, 68, 0.18);
|
|
100
|
+
|
|
101
|
+
--gcsa-color-success-border: rgba(0, 192, 166, 0.35);
|
|
102
|
+
--gcsa-color-warning-border: rgba(245, 158, 11, 0.35);
|
|
103
|
+
--gcsa-color-info-border: rgba(65, 183, 236, 0.35);
|
|
104
|
+
--gcsa-color-danger-border: rgba(226, 68, 68, 0.35);
|
|
105
|
+
|
|
106
|
+
--gcsa-color-menu-hover: rgba(255, 255, 255, 0.06);
|
|
107
|
+
--gcsa-color-menu-active: rgba(0, 187, 204, 0.08);
|
|
108
|
+
--gcsa-color-shell-glow: rgba(0, 187, 204, 0.12);
|
|
109
|
+
--gcsa-color-row-hover: rgba(255, 255, 255, 0.04);
|
|
110
|
+
|
|
111
|
+
--gcsa-color-scrim: rgba(0, 2, 5, 0.72);
|
|
112
|
+
--gcsa-color-scrim-soft: rgba(0, 2, 5, 0.55);
|
|
113
|
+
|
|
114
|
+
--gcsa-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
|
|
115
|
+
--gcsa-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
|
|
116
|
+
--gcsa-shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 187, 204, 0.12);
|
|
117
|
+
--gcsa-shadow-glow: 0 0 18px rgba(0, 187, 204, 0.22);
|
|
118
|
+
|
|
119
|
+
--gcsa-focus-ring: 0 0 0 2px var(--gcsa-color-bg-base), 0 0 0 4px rgba(0, 187, 204, 0.45);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* Light (white console) */
|
|
123
|
+
[data-gcsa-theme='light'] {
|
|
124
|
+
--gcsa-color-bg-base: #f4f7fb;
|
|
125
|
+
--gcsa-color-bg-shell: #ffffff;
|
|
126
|
+
--gcsa-color-bg-shell-deep: #eef2f6;
|
|
127
|
+
--gcsa-color-bg-surface: #ffffff;
|
|
128
|
+
--gcsa-color-bg-elevated: #f8fafc;
|
|
129
|
+
--gcsa-color-bg-input: #ffffff;
|
|
130
|
+
--gcsa-color-bg-hover: #f1f5f9;
|
|
131
|
+
|
|
132
|
+
--gcsa-color-border: rgba(15, 23, 42, 0.1);
|
|
133
|
+
--gcsa-color-border-subtle: rgba(15, 23, 42, 0.06);
|
|
134
|
+
--gcsa-color-border-strong: rgba(0, 150, 166, 0.32);
|
|
135
|
+
|
|
136
|
+
--gcsa-color-primary: #009aaa;
|
|
137
|
+
--gcsa-color-primary-hover: #00bbcc;
|
|
138
|
+
--gcsa-color-primary-muted: rgba(0, 187, 204, 0.1);
|
|
139
|
+
--gcsa-color-primary-muted-strong: rgba(0, 187, 204, 0.16);
|
|
140
|
+
|
|
141
|
+
--gcsa-color-text: rgba(15, 23, 42, 0.92);
|
|
142
|
+
--gcsa-color-text-heading: rgba(15, 23, 42, 0.96);
|
|
143
|
+
--gcsa-color-text-secondary: rgba(71, 85, 105, 0.85);
|
|
144
|
+
--gcsa-color-text-muted: rgba(100, 116, 139, 0.88);
|
|
145
|
+
--gcsa-color-text-on-surface: rgba(51, 65, 85, 0.9);
|
|
146
|
+
--gcsa-color-on-primary: #ffffff;
|
|
147
|
+
|
|
148
|
+
--gcsa-color-destructive: #dc2626;
|
|
149
|
+
--gcsa-color-destructive-text: #dc2626;
|
|
150
|
+
--gcsa-color-danger: #dc2626;
|
|
151
|
+
--gcsa-color-accent: #007a68;
|
|
152
|
+
--gcsa-color-success: #007a68;
|
|
153
|
+
--gcsa-color-warning: #d97706;
|
|
154
|
+
--gcsa-color-info: #0284c7;
|
|
155
|
+
|
|
156
|
+
--gcsa-color-success-muted: rgba(0, 122, 104, 0.1);
|
|
157
|
+
--gcsa-color-warning-muted: rgba(217, 119, 6, 0.1);
|
|
158
|
+
--gcsa-color-info-muted: rgba(2, 132, 199, 0.1);
|
|
159
|
+
--gcsa-color-danger-muted: rgba(220, 38, 38, 0.08);
|
|
160
|
+
--gcsa-color-danger-muted-strong: rgba(220, 38, 38, 0.14);
|
|
161
|
+
|
|
162
|
+
--gcsa-color-success-border: rgba(0, 122, 104, 0.28);
|
|
163
|
+
--gcsa-color-warning-border: rgba(217, 119, 6, 0.28);
|
|
164
|
+
--gcsa-color-info-border: rgba(2, 132, 199, 0.28);
|
|
165
|
+
--gcsa-color-danger-border: rgba(220, 38, 38, 0.28);
|
|
166
|
+
|
|
167
|
+
--gcsa-color-menu-hover: rgba(0, 187, 204, 0.08);
|
|
168
|
+
--gcsa-color-menu-active: rgba(0, 187, 204, 0.1);
|
|
169
|
+
--gcsa-color-shell-glow: rgba(0, 187, 204, 0.06);
|
|
170
|
+
--gcsa-color-row-hover: rgba(0, 187, 204, 0.06);
|
|
171
|
+
|
|
172
|
+
--gcsa-color-scrim: rgba(15, 23, 42, 0.45);
|
|
173
|
+
--gcsa-color-scrim-soft: rgba(15, 23, 42, 0.32);
|
|
174
|
+
|
|
175
|
+
--gcsa-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
|
|
176
|
+
--gcsa-shadow-md: 0 12px 32px rgba(15, 23, 42, 0.1);
|
|
177
|
+
--gcsa-shadow-modal: 0 16px 48px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.04);
|
|
178
|
+
--gcsa-shadow-glow: 0 0 18px rgba(0, 187, 204, 0.12);
|
|
179
|
+
|
|
180
|
+
--gcsa-focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 150, 166, 0.45);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
@media (prefers-reduced-motion: reduce) {
|
|
184
|
+
:root {
|
|
185
|
+
--gcsa-motion-fast: 0ms;
|
|
186
|
+
--gcsa-motion-base: 0ms;
|
|
187
|
+
--gcsa-motion-slow: 0ms;
|
|
188
|
+
--gcsa-motion-modal: 0ms;
|
|
189
|
+
}
|
|
190
|
+
}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/** 管理后台统一色板 — 与 gcsa 主站 adminColors 对齐 */
|
|
2
|
+
export declare const GCSA_CONSOLE_COLORS: {
|
|
3
|
+
readonly bgBase: "#000205";
|
|
4
|
+
readonly bgShell: "#061018";
|
|
5
|
+
readonly bgShellDeep: "#040c13";
|
|
6
|
+
readonly bgSurface: "#0a1520";
|
|
7
|
+
readonly bgElevated: "#0f1c28";
|
|
8
|
+
readonly bgInput: "rgba(10, 21, 32, 0.96)";
|
|
9
|
+
readonly bgHover: "rgba(15, 28, 40, 0.92)";
|
|
10
|
+
readonly border: "rgba(0, 187, 204, 0.14)";
|
|
11
|
+
readonly borderSubtle: "rgba(20, 36, 47, 0.9)";
|
|
12
|
+
readonly borderStrong: "rgba(0, 187, 204, 0.28)";
|
|
13
|
+
readonly primary: "#00BBCC";
|
|
14
|
+
readonly primaryHover: "#3ecfd6";
|
|
15
|
+
readonly primaryMuted: "rgba(0, 187, 204, 0.14)";
|
|
16
|
+
readonly primaryMutedStrong: "rgba(0, 187, 204, 0.2)";
|
|
17
|
+
readonly text: "rgba(236, 240, 244, 0.92)";
|
|
18
|
+
readonly textHeading: "rgba(248, 250, 252, 0.96)";
|
|
19
|
+
readonly textSecondary: "rgba(148, 163, 184, 0.78)";
|
|
20
|
+
readonly textMuted: "rgba(148, 163, 184, 0.62)";
|
|
21
|
+
readonly textOnSurface: "rgba(203, 213, 225, 0.88)";
|
|
22
|
+
readonly menuHover: "rgba(0, 187, 204, 0.08)";
|
|
23
|
+
readonly shellGlow: "rgba(0, 187, 204, 0.06)";
|
|
24
|
+
readonly destructive: "#ef4444";
|
|
25
|
+
readonly destructiveText: "#ff6b7a";
|
|
26
|
+
readonly accent: "#008674";
|
|
27
|
+
readonly success: "#008674";
|
|
28
|
+
readonly warning: "#f59e0b";
|
|
29
|
+
readonly info: "#38bdf8";
|
|
30
|
+
};
|
|
31
|
+
export declare const GCSA_CONSOLE_LAYOUT: {
|
|
32
|
+
readonly siderWidth: 220;
|
|
33
|
+
readonly siderCollapsedWidth: 80;
|
|
34
|
+
readonly headerHeight: 62;
|
|
35
|
+
readonly radiusSm: 8;
|
|
36
|
+
readonly radiusMd: 12;
|
|
37
|
+
readonly radiusLg: 16;
|
|
38
|
+
};
|
|
39
|
+
export declare const GCSA_FONT_SIZES: {
|
|
40
|
+
readonly xs: 11;
|
|
41
|
+
readonly sm: 12;
|
|
42
|
+
readonly base: 14;
|
|
43
|
+
readonly md: 15;
|
|
44
|
+
readonly lg: 16;
|
|
45
|
+
readonly xl: 18;
|
|
46
|
+
readonly '2xl': 22;
|
|
47
|
+
readonly '3xl': 28;
|
|
48
|
+
};
|
|
49
|
+
export declare const GCSA_LINE_HEIGHTS: {
|
|
50
|
+
readonly tight: 1.35;
|
|
51
|
+
readonly snug: 1.4;
|
|
52
|
+
readonly base: 1.5;
|
|
53
|
+
readonly relaxed: 1.65;
|
|
54
|
+
};
|
|
55
|
+
export type GcsaConsoleColorKey = keyof typeof GCSA_CONSOLE_COLORS;
|
|
56
|
+
export type GcsaConsoleTheme = 'dark' | 'light';
|
|
57
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BtB,CAAC;AAEX,eAAO,MAAM,mBAAmB;;;;;;;CAOtB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;CASlB,CAAC;AAEX,eAAO,MAAM,iBAAiB;;;;;CAKpB,CAAC;AAEX,MAAM,MAAM,mBAAmB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAEnE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
/** 管理后台统一色板 — 与 gcsa 主站 adminColors 对齐 */
|
|
2
|
+
export const GCSA_CONSOLE_COLORS = {
|
|
3
|
+
bgBase: '#000205',
|
|
4
|
+
bgShell: '#061018',
|
|
5
|
+
bgShellDeep: '#040c13',
|
|
6
|
+
bgSurface: '#0a1520',
|
|
7
|
+
bgElevated: '#0f1c28',
|
|
8
|
+
bgInput: 'rgba(10, 21, 32, 0.96)',
|
|
9
|
+
bgHover: 'rgba(15, 28, 40, 0.92)',
|
|
10
|
+
border: 'rgba(0, 187, 204, 0.14)',
|
|
11
|
+
borderSubtle: 'rgba(20, 36, 47, 0.9)',
|
|
12
|
+
borderStrong: 'rgba(0, 187, 204, 0.28)',
|
|
13
|
+
primary: '#00BBCC',
|
|
14
|
+
primaryHover: '#3ecfd6',
|
|
15
|
+
primaryMuted: 'rgba(0, 187, 204, 0.14)',
|
|
16
|
+
primaryMutedStrong: 'rgba(0, 187, 204, 0.2)',
|
|
17
|
+
text: 'rgba(236, 240, 244, 0.92)',
|
|
18
|
+
textHeading: 'rgba(248, 250, 252, 0.96)',
|
|
19
|
+
textSecondary: 'rgba(148, 163, 184, 0.78)',
|
|
20
|
+
textMuted: 'rgba(148, 163, 184, 0.62)',
|
|
21
|
+
textOnSurface: 'rgba(203, 213, 225, 0.88)',
|
|
22
|
+
menuHover: 'rgba(0, 187, 204, 0.08)',
|
|
23
|
+
shellGlow: 'rgba(0, 187, 204, 0.06)',
|
|
24
|
+
destructive: '#ef4444',
|
|
25
|
+
destructiveText: '#ff6b7a',
|
|
26
|
+
accent: '#008674',
|
|
27
|
+
success: '#008674',
|
|
28
|
+
warning: '#f59e0b',
|
|
29
|
+
info: '#38bdf8'
|
|
30
|
+
};
|
|
31
|
+
export const GCSA_CONSOLE_LAYOUT = {
|
|
32
|
+
siderWidth: 220,
|
|
33
|
+
siderCollapsedWidth: 80,
|
|
34
|
+
headerHeight: 62,
|
|
35
|
+
radiusSm: 8,
|
|
36
|
+
radiusMd: 12,
|
|
37
|
+
radiusLg: 16
|
|
38
|
+
};
|
|
39
|
+
export const GCSA_FONT_SIZES = {
|
|
40
|
+
xs: 11,
|
|
41
|
+
sm: 12,
|
|
42
|
+
base: 14,
|
|
43
|
+
md: 15,
|
|
44
|
+
lg: 16,
|
|
45
|
+
xl: 18,
|
|
46
|
+
'2xl': 22,
|
|
47
|
+
'3xl': 28
|
|
48
|
+
};
|
|
49
|
+
export const GCSA_LINE_HEIGHTS = {
|
|
50
|
+
tight: 1.35,
|
|
51
|
+
snug: 1.4,
|
|
52
|
+
base: 1.5,
|
|
53
|
+
relaxed: 1.65
|
|
54
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@gcsa/design-tokens",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "GCSA design tokens — CSS variables and TS constants for console and marketing surfaces.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"license": "UNLICENSED",
|
|
7
|
+
"files": [
|
|
8
|
+
"css",
|
|
9
|
+
"dist",
|
|
10
|
+
"README.md"
|
|
11
|
+
],
|
|
12
|
+
"exports": {
|
|
13
|
+
"./css": "./css/tokens.css",
|
|
14
|
+
"./css/tokens.css": "./css/tokens.css",
|
|
15
|
+
"./css/console.css": "./css/console.css",
|
|
16
|
+
".": {
|
|
17
|
+
"types": "./dist/index.d.ts",
|
|
18
|
+
"import": "./dist/index.js"
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
"publishConfig": {
|
|
22
|
+
"access": "public"
|
|
23
|
+
},
|
|
24
|
+
"devDependencies": {
|
|
25
|
+
"typescript": "^5.8.3"
|
|
26
|
+
},
|
|
27
|
+
"scripts": {
|
|
28
|
+
"build": "tsc -p tsconfig.json",
|
|
29
|
+
"typecheck": "tsc -p tsconfig.json --noEmit"
|
|
30
|
+
}
|
|
31
|
+
}
|