@skygraph/styles 0.2.4 → 0.6.6
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 +98 -98
- package/components/autocomplete.css +35 -35
- package/components/autofield.css +67 -67
- package/components/avatar.css +37 -37
- package/components/badge.css +102 -102
- package/components/breadcrumb.css +29 -29
- package/components/button.css +181 -181
- package/components/calendar.css +408 -408
- package/components/carousel.css +102 -102
- package/components/cascader.css +380 -380
- package/components/charts.css +408 -408
- package/components/checkbox.css +114 -114
- package/components/collapse.css +166 -166
- package/components/colorpicker.css +252 -252
- package/components/context-menu.css +95 -95
- package/components/descriptions.css +82 -82
- package/components/diagram.css +435 -435
- package/components/drawer.css +124 -124
- package/components/dropdown.css +110 -110
- package/components/empty.css +25 -25
- package/components/event-timeline.css +134 -134
- package/components/field.css +35 -35
- package/components/form.css +115 -115
- package/components/gantt.css +166 -166
- package/components/input-number.css +76 -76
- package/components/input-password.css +104 -104
- package/components/input.css +211 -211
- package/components/list.css +366 -366
- package/components/mentions.css +54 -54
- package/components/menu.css +326 -326
- package/components/modal.css +1 -0
- package/components/notification.css +128 -128
- package/components/pagination.css +162 -162
- package/components/popconfirm.css +95 -95
- package/components/progress.css +116 -116
- package/components/radio.css +95 -95
- package/components/rate.css +48 -48
- package/components/resource-calendar.css +224 -224
- package/components/result.css +45 -45
- package/components/schema-form-editor.css +433 -433
- package/components/search-input.css +112 -112
- package/components/segmented.css +76 -76
- package/components/select.css +181 -181
- package/components/skeleton.css +72 -72
- package/components/slider.css +51 -51
- package/components/spin.css +102 -102
- package/components/steps.css +194 -194
- package/components/switch.css +75 -75
- package/components/table.css +9 -1
- package/components/tabs.css +137 -137
- package/components/tag.css +61 -61
- package/components/textarea.css +22 -22
- package/components/timeline.css +169 -169
- package/components/timepicker.css +224 -224
- package/components/tooltip.css +91 -91
- package/components/transfer.css +140 -140
- package/components/tree.css +601 -601
- package/components/treeselect.css +221 -221
- package/components/upload.css +124 -124
- package/index.css +70 -70
- package/index.d.ts +9 -9
- package/package.json +1 -1
- package/print.css +88 -88
- package/reset.css +17 -17
- package/themes/dark.css +17 -17
- package/themes/default.css +14 -14
- package/tokens.css +310 -310
- package/transitions.css +158 -158
package/tokens.css
CHANGED
|
@@ -1,310 +1,310 @@
|
|
|
1
|
-
/* SkyGraph Design Tokens */
|
|
2
|
-
|
|
3
|
-
:root {
|
|
4
|
-
/* === Palette (theme-independent) === */
|
|
5
|
-
--sg-blue-1: #e6f4ff;
|
|
6
|
-
--sg-blue-2: #bae0ff;
|
|
7
|
-
--sg-blue-3: #91caff;
|
|
8
|
-
--sg-blue-4: #69b1ff;
|
|
9
|
-
--sg-blue-5: #4096ff;
|
|
10
|
-
--sg-blue-6: #1677ff;
|
|
11
|
-
--sg-blue-7: #0958d9;
|
|
12
|
-
--sg-blue-8: #003eb3;
|
|
13
|
-
--sg-blue-9: #002c8c;
|
|
14
|
-
--sg-blue-10: #001d66;
|
|
15
|
-
|
|
16
|
-
--sg-gray-1: #ffffff;
|
|
17
|
-
--sg-gray-2: #fafafa;
|
|
18
|
-
--sg-gray-3: #f5f5f5;
|
|
19
|
-
--sg-gray-4: #f0f0f0;
|
|
20
|
-
--sg-gray-5: #d9d9d9;
|
|
21
|
-
--sg-gray-6: #bfbfbf;
|
|
22
|
-
--sg-gray-7: #8c8c8c;
|
|
23
|
-
--sg-gray-8: #595959;
|
|
24
|
-
--sg-gray-9: #262626;
|
|
25
|
-
--sg-gray-10: #141414;
|
|
26
|
-
|
|
27
|
-
--sg-red-1: #fff2f0;
|
|
28
|
-
--sg-red-5: #ff4d4f;
|
|
29
|
-
--sg-red-6: #f5222d;
|
|
30
|
-
|
|
31
|
-
--sg-green-1: #f6ffed;
|
|
32
|
-
--sg-green-5: #73d13d;
|
|
33
|
-
--sg-green-6: #52c41a;
|
|
34
|
-
|
|
35
|
-
--sg-orange-1: #fffbe6;
|
|
36
|
-
--sg-orange-5: #faad14;
|
|
37
|
-
--sg-orange-6: #d48806;
|
|
38
|
-
|
|
39
|
-
/* === Sizing (theme-independent) === */
|
|
40
|
-
--sg-font-size-sm: 12px;
|
|
41
|
-
--sg-font-size: 14px;
|
|
42
|
-
--sg-font-size-lg: 16px;
|
|
43
|
-
--sg-font-size-xl: 20px;
|
|
44
|
-
|
|
45
|
-
--sg-line-height: 1.5714;
|
|
46
|
-
|
|
47
|
-
--sg-height-sm: 24px;
|
|
48
|
-
--sg-height-md: 32px;
|
|
49
|
-
--sg-height-lg: 40px;
|
|
50
|
-
|
|
51
|
-
--sg-border-radius-sm: 4px;
|
|
52
|
-
--sg-border-radius: 6px;
|
|
53
|
-
--sg-border-radius-lg: 8px;
|
|
54
|
-
|
|
55
|
-
--sg-padding-xs: 4px;
|
|
56
|
-
--sg-padding-sm: 8px;
|
|
57
|
-
--sg-padding-md: 12px;
|
|
58
|
-
--sg-padding-lg: 16px;
|
|
59
|
-
--sg-padding-xl: 24px;
|
|
60
|
-
|
|
61
|
-
--sg-margin-xs: 4px;
|
|
62
|
-
--sg-margin-sm: 8px;
|
|
63
|
-
--sg-margin-md: 16px;
|
|
64
|
-
--sg-margin-lg: 24px;
|
|
65
|
-
|
|
66
|
-
--sg-transition-duration: 0.2s;
|
|
67
|
-
--sg-transition-timing: cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
68
|
-
|
|
69
|
-
/* Curated transition shorthands.
|
|
70
|
-
* `*-fast` (~120ms) — micro-interactions: button hovers, tiny color swaps,
|
|
71
|
-
* toolbar fades, edge hover stroke widens.
|
|
72
|
-
* `*-medium` (~180ms) — primary interactions: card lift on hover,
|
|
73
|
-
* node selection ring, dashboard widget elevation.
|
|
74
|
-
* Use them in `transition: <prop> var(--sg-transition-*)`. */
|
|
75
|
-
--sg-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
76
|
-
--sg-transition-medium: 180ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
77
|
-
|
|
78
|
-
/* === Z-index scale === */
|
|
79
|
-
--sg-z-base: 1;
|
|
80
|
-
--sg-z-sticky: 3;
|
|
81
|
-
--sg-z-sticky-fixed: 5;
|
|
82
|
-
--sg-z-loading: 10;
|
|
83
|
-
--sg-z-modal: 1000;
|
|
84
|
-
--sg-z-tooltip: 1000;
|
|
85
|
-
--sg-z-dropdown: 1050;
|
|
86
|
-
--sg-z-notification: 1060;
|
|
87
|
-
|
|
88
|
-
/* === Component tokens === */
|
|
89
|
-
--sg-color-star: #fadb14;
|
|
90
|
-
|
|
91
|
-
/* Input-family aliases shared by Input / Select / TreeSelect / Cascader.
|
|
92
|
-
* These are public component tokens, so scoped overrides work consistently
|
|
93
|
-
* across all trigger-like controls. */
|
|
94
|
-
--sg-input-height: var(--sg-height-md);
|
|
95
|
-
--sg-input-padding: var(--sg-padding-xs) var(--sg-padding-md);
|
|
96
|
-
--sg-input-font-size: var(--sg-font-size);
|
|
97
|
-
--sg-input-color: var(--sg-color-text);
|
|
98
|
-
--sg-input-bg: var(--sg-color-bg-container);
|
|
99
|
-
--sg-input-border: var(--sg-color-border);
|
|
100
|
-
--sg-input-radius: var(--sg-border-radius);
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
/* === Semantic tokens — Light theme (default) === */
|
|
104
|
-
:root,
|
|
105
|
-
[data-sg-theme='light'] {
|
|
106
|
-
--sg-color-bg: var(--sg-gray-1);
|
|
107
|
-
--sg-color-bg-secondary: var(--sg-gray-2);
|
|
108
|
-
--sg-color-bg-elevated: var(--sg-gray-1);
|
|
109
|
-
--sg-color-bg-container: var(--sg-gray-1);
|
|
110
|
-
--sg-color-bg-hover: var(--sg-gray-3);
|
|
111
|
-
--sg-color-bg-disabled: var(--sg-gray-3);
|
|
112
|
-
|
|
113
|
-
--sg-color-text: rgba(0, 0, 0, 0.88);
|
|
114
|
-
--sg-color-text-secondary: rgba(0, 0, 0, 0.65);
|
|
115
|
-
--sg-color-text-tertiary: rgba(0, 0, 0, 0.45);
|
|
116
|
-
--sg-color-text-quaternary: rgba(0, 0, 0, 0.25);
|
|
117
|
-
--sg-color-text-disabled: rgba(0, 0, 0, 0.25);
|
|
118
|
-
--sg-color-text-placeholder: rgba(0, 0, 0, 0.25);
|
|
119
|
-
|
|
120
|
-
--sg-color-border: var(--sg-gray-5);
|
|
121
|
-
--sg-color-border-secondary: var(--sg-gray-4);
|
|
122
|
-
|
|
123
|
-
/* Subtle fills (tracks, clear buttons, skeletons) */
|
|
124
|
-
--sg-color-fill: rgba(0, 0, 0, 0.15);
|
|
125
|
-
--sg-color-fill-secondary: rgba(0, 0, 0, 0.06);
|
|
126
|
-
--sg-color-fill-tertiary: rgba(0, 0, 0, 0.06);
|
|
127
|
-
--sg-color-fill-quaternary: rgba(0, 0, 0, 0.02);
|
|
128
|
-
|
|
129
|
-
--sg-color-primary: var(--sg-blue-6);
|
|
130
|
-
--sg-color-primary-hover: var(--sg-blue-5);
|
|
131
|
-
--sg-color-primary-active: var(--sg-blue-7);
|
|
132
|
-
--sg-color-primary-bg: var(--sg-blue-1);
|
|
133
|
-
|
|
134
|
-
--sg-color-error: var(--sg-red-5);
|
|
135
|
-
--sg-color-error-bg: var(--sg-red-1);
|
|
136
|
-
--sg-color-success: var(--sg-green-6);
|
|
137
|
-
--sg-color-success-bg: var(--sg-green-1);
|
|
138
|
-
--sg-color-warning: var(--sg-orange-5);
|
|
139
|
-
--sg-color-warning-bg: var(--sg-orange-1);
|
|
140
|
-
|
|
141
|
-
--sg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
142
|
-
--sg-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
143
|
-
--sg-shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.12);
|
|
144
|
-
|
|
145
|
-
--sg-color-white: #ffffff;
|
|
146
|
-
--sg-color-overlay: rgba(0, 0, 0, 0.45);
|
|
147
|
-
--sg-color-tooltip-bg: rgba(0, 0, 0, 0.85);
|
|
148
|
-
--sg-color-tooltip-text: #ffffff;
|
|
149
|
-
|
|
150
|
-
/* Skeleton — base bar fill + shimmer highlight (light theme).
|
|
151
|
-
* Kept distinct from --sg-color-bg-hover so loading placeholders stay
|
|
152
|
-
* clearly visible on white surfaces and don't fight the hover palette. */
|
|
153
|
-
--sg-skeleton-bg: #e2e8f0;
|
|
154
|
-
--sg-skeleton-shimmer: #f8fafc;
|
|
155
|
-
|
|
156
|
-
/* === Visualization layer (light) ===
|
|
157
|
-
* Re-mappable per theme. Components use these via `var(--sg-*)` so
|
|
158
|
-
* dark theme overrides cascade automatically. */
|
|
159
|
-
|
|
160
|
-
/* Diagram — canvas, grid, nodes, edges, lasso */
|
|
161
|
-
--sg-diagram-canvas-bg: var(--sg-color-bg);
|
|
162
|
-
--sg-diagram-grid-line-color: rgba(0, 0, 0, 0.04);
|
|
163
|
-
--sg-diagram-grid-line-color-strong: rgba(0, 0, 0, 0.08);
|
|
164
|
-
--sg-diagram-node-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
|
|
165
|
-
--sg-diagram-node-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
|
|
166
|
-
--sg-diagram-node-shadow-selected:
|
|
167
|
-
0 0 0 2px var(--sg-color-primary-bg), 0 6px 16px rgba(22, 119, 255, 0.18),
|
|
168
|
-
0 1px 3px rgba(0, 0, 0, 0.08);
|
|
169
|
-
--sg-diagram-node-shadow-dragging: 0 12px 28px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
170
|
-
--sg-diagram-edge-color: var(--sg-gray-6);
|
|
171
|
-
--sg-diagram-edge-color-hover: var(--sg-color-text-secondary);
|
|
172
|
-
--sg-diagram-edge-color-selected: var(--sg-color-primary);
|
|
173
|
-
--sg-diagram-lasso-stroke: var(--sg-color-primary);
|
|
174
|
-
--sg-diagram-lasso-fill: rgba(22, 119, 255, 0.08);
|
|
175
|
-
|
|
176
|
-
/* Charts — tooltip, crosshair, brush, legend */
|
|
177
|
-
--sg-chart-tooltip-bg: var(--sg-color-bg-elevated);
|
|
178
|
-
--sg-chart-tooltip-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
|
|
179
|
-
--sg-chart-crosshair-color: rgba(0, 0, 0, 0.32);
|
|
180
|
-
--sg-chart-brush-fill: rgba(22, 119, 255, 0.1);
|
|
181
|
-
--sg-chart-brush-stroke: var(--sg-color-primary);
|
|
182
|
-
--sg-chart-legend-hover-bg: var(--sg-color-bg-hover);
|
|
183
|
-
|
|
184
|
-
/* Dashboard — widget elevation, editor affordances */
|
|
185
|
-
--sg-dashboard-widget-shadow: var(--sg-shadow-sm);
|
|
186
|
-
--sg-dashboard-widget-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
|
|
187
|
-
--sg-dashboard-editor-grid-color: rgba(22, 119, 255, 0.06);
|
|
188
|
-
--sg-dashboard-editor-widget-border: var(--sg-color-primary);
|
|
189
|
-
--sg-dashboard-editor-drop-zone-bg: rgba(22, 119, 255, 0.06);
|
|
190
|
-
--sg-dashboard-editor-drop-zone-border: var(--sg-color-primary);
|
|
191
|
-
|
|
192
|
-
/* Gantt — bars, today marker, dependency arrows */
|
|
193
|
-
--sg-gantt-bar-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
|
194
|
-
--sg-gantt-bar-shadow-hover:
|
|
195
|
-
0 3px 8px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.22);
|
|
196
|
-
--sg-gantt-today-marker-color: var(--sg-color-error);
|
|
197
|
-
--sg-gantt-today-marker-bg: rgba(245, 34, 45, 0.06);
|
|
198
|
-
--sg-gantt-dep-color: var(--sg-color-text-tertiary);
|
|
199
|
-
|
|
200
|
-
/* Timeline / EventTimeline — connector + event dot */
|
|
201
|
-
--sg-timeline-tail-color: var(--sg-color-border-secondary);
|
|
202
|
-
--sg-event-timeline-dot-shadow: 0 0 0 3px var(--sg-color-bg), 0 1px 3px rgba(22, 119, 255, 0.3);
|
|
203
|
-
--sg-event-timeline-dot-shadow-hover:
|
|
204
|
-
0 0 0 3px var(--sg-color-bg), 0 2px 8px rgba(22, 119, 255, 0.45);
|
|
205
|
-
|
|
206
|
-
/* ResourceCalendar — today, lane separators, conflict overlay */
|
|
207
|
-
--sg-rcal-today-bg: rgba(22, 119, 255, 0.05);
|
|
208
|
-
--sg-rcal-today-marker-color: var(--sg-color-primary);
|
|
209
|
-
--sg-rcal-lane-divider: var(--sg-color-border-secondary);
|
|
210
|
-
--sg-rcal-conflict-overlay-bg: rgba(245, 34, 45, 0.1);
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
/* === Semantic tokens — Dark theme === */
|
|
214
|
-
[data-sg-theme='dark'] {
|
|
215
|
-
--sg-color-bg: var(--sg-gray-10);
|
|
216
|
-
--sg-color-bg-secondary: #1f1f1f;
|
|
217
|
-
--sg-color-bg-elevated: #1f1f1f;
|
|
218
|
-
--sg-color-bg-container: #1f1f1f;
|
|
219
|
-
--sg-color-bg-hover: #2a2a2a;
|
|
220
|
-
--sg-color-bg-disabled: rgba(255, 255, 255, 0.08);
|
|
221
|
-
|
|
222
|
-
--sg-color-text: rgba(255, 255, 255, 0.88);
|
|
223
|
-
--sg-color-text-secondary: rgba(255, 255, 255, 0.65);
|
|
224
|
-
--sg-color-text-tertiary: rgba(255, 255, 255, 0.45);
|
|
225
|
-
--sg-color-text-quaternary: rgba(255, 255, 255, 0.25);
|
|
226
|
-
--sg-color-text-disabled: rgba(255, 255, 255, 0.25);
|
|
227
|
-
--sg-color-text-placeholder: rgba(255, 255, 255, 0.25);
|
|
228
|
-
|
|
229
|
-
--sg-color-border: #424242;
|
|
230
|
-
--sg-color-border-secondary: #303030;
|
|
231
|
-
|
|
232
|
-
--sg-color-fill: rgba(255, 255, 255, 0.15);
|
|
233
|
-
--sg-color-fill-secondary: rgba(255, 255, 255, 0.08);
|
|
234
|
-
--sg-color-fill-tertiary: rgba(255, 255, 255, 0.06);
|
|
235
|
-
--sg-color-fill-quaternary: rgba(255, 255, 255, 0.04);
|
|
236
|
-
|
|
237
|
-
--sg-color-primary: var(--sg-blue-5);
|
|
238
|
-
--sg-color-primary-hover: var(--sg-blue-6);
|
|
239
|
-
--sg-color-primary-active: var(--sg-blue-7);
|
|
240
|
-
--sg-color-primary-bg: rgba(22, 119, 255, 0.15);
|
|
241
|
-
|
|
242
|
-
--sg-color-error: #dc4446;
|
|
243
|
-
--sg-color-error-bg: rgba(220, 68, 70, 0.1);
|
|
244
|
-
--sg-color-success: #49aa19;
|
|
245
|
-
--sg-color-success-bg: rgba(73, 170, 25, 0.1);
|
|
246
|
-
--sg-color-warning: #d89614;
|
|
247
|
-
--sg-color-warning-bg: rgba(216, 150, 20, 0.1);
|
|
248
|
-
|
|
249
|
-
--sg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.16);
|
|
250
|
-
--sg-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
|
|
251
|
-
--sg-shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.48);
|
|
252
|
-
|
|
253
|
-
--sg-color-overlay: rgba(0, 0, 0, 0.65);
|
|
254
|
-
--sg-color-tooltip-bg: #434343;
|
|
255
|
-
--sg-color-tooltip-text: #ffffff;
|
|
256
|
-
|
|
257
|
-
/* Skeleton — dark theme bars need brighter fills to stay readable. */
|
|
258
|
-
--sg-skeleton-bg: rgba(255, 255, 255, 0.08);
|
|
259
|
-
--sg-skeleton-shimmer: rgba(255, 255, 255, 0.18);
|
|
260
|
-
|
|
261
|
-
/* === Visualization layer (dark) ===
|
|
262
|
-
* Shadows are stronger and use lower-alpha bright tints; canvas grid
|
|
263
|
-
* lines use white-alpha so they read against dark bg. */
|
|
264
|
-
|
|
265
|
-
--sg-diagram-canvas-bg: var(--sg-color-bg);
|
|
266
|
-
--sg-diagram-grid-line-color: rgba(255, 255, 255, 0.04);
|
|
267
|
-
--sg-diagram-grid-line-color-strong: rgba(255, 255, 255, 0.08);
|
|
268
|
-
--sg-diagram-node-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
|
|
269
|
-
--sg-diagram-node-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
|
|
270
|
-
--sg-diagram-node-shadow-selected:
|
|
271
|
-
0 0 0 2px var(--sg-color-primary-bg), 0 6px 16px rgba(64, 150, 255, 0.3),
|
|
272
|
-
0 1px 3px rgba(0, 0, 0, 0.4);
|
|
273
|
-
--sg-diagram-node-shadow-dragging: 0 12px 28px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
|
|
274
|
-
--sg-diagram-edge-color: var(--sg-gray-7);
|
|
275
|
-
--sg-diagram-edge-color-hover: var(--sg-color-text-secondary);
|
|
276
|
-
--sg-diagram-edge-color-selected: var(--sg-color-primary);
|
|
277
|
-
--sg-diagram-lasso-stroke: var(--sg-color-primary);
|
|
278
|
-
--sg-diagram-lasso-fill: rgba(64, 150, 255, 0.12);
|
|
279
|
-
|
|
280
|
-
--sg-chart-tooltip-bg: var(--sg-color-bg-elevated);
|
|
281
|
-
--sg-chart-tooltip-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
282
|
-
--sg-chart-crosshair-color: rgba(255, 255, 255, 0.4);
|
|
283
|
-
--sg-chart-brush-fill: rgba(64, 150, 255, 0.16);
|
|
284
|
-
--sg-chart-brush-stroke: var(--sg-color-primary);
|
|
285
|
-
--sg-chart-legend-hover-bg: var(--sg-color-bg-hover);
|
|
286
|
-
|
|
287
|
-
--sg-dashboard-widget-shadow: var(--sg-shadow-sm);
|
|
288
|
-
--sg-dashboard-widget-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
289
|
-
--sg-dashboard-editor-grid-color: rgba(64, 150, 255, 0.08);
|
|
290
|
-
--sg-dashboard-editor-widget-border: var(--sg-color-primary);
|
|
291
|
-
--sg-dashboard-editor-drop-zone-bg: rgba(64, 150, 255, 0.1);
|
|
292
|
-
--sg-dashboard-editor-drop-zone-border: var(--sg-color-primary);
|
|
293
|
-
|
|
294
|
-
--sg-gantt-bar-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
295
|
-
--sg-gantt-bar-shadow-hover:
|
|
296
|
-
0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14);
|
|
297
|
-
--sg-gantt-today-marker-color: var(--sg-color-error);
|
|
298
|
-
--sg-gantt-today-marker-bg: rgba(220, 68, 70, 0.1);
|
|
299
|
-
--sg-gantt-dep-color: var(--sg-color-text-tertiary);
|
|
300
|
-
|
|
301
|
-
--sg-timeline-tail-color: var(--sg-color-border-secondary);
|
|
302
|
-
--sg-event-timeline-dot-shadow: 0 0 0 3px var(--sg-color-bg), 0 1px 3px rgba(64, 150, 255, 0.45);
|
|
303
|
-
--sg-event-timeline-dot-shadow-hover:
|
|
304
|
-
0 0 0 3px var(--sg-color-bg), 0 2px 10px rgba(64, 150, 255, 0.65);
|
|
305
|
-
|
|
306
|
-
--sg-rcal-today-bg: rgba(64, 150, 255, 0.08);
|
|
307
|
-
--sg-rcal-today-marker-color: var(--sg-color-primary);
|
|
308
|
-
--sg-rcal-lane-divider: var(--sg-color-border-secondary);
|
|
309
|
-
--sg-rcal-conflict-overlay-bg: rgba(220, 68, 70, 0.16);
|
|
310
|
-
}
|
|
1
|
+
/* SkyGraph Design Tokens */
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
/* === Palette (theme-independent) === */
|
|
5
|
+
--sg-blue-1: #e6f4ff;
|
|
6
|
+
--sg-blue-2: #bae0ff;
|
|
7
|
+
--sg-blue-3: #91caff;
|
|
8
|
+
--sg-blue-4: #69b1ff;
|
|
9
|
+
--sg-blue-5: #4096ff;
|
|
10
|
+
--sg-blue-6: #1677ff;
|
|
11
|
+
--sg-blue-7: #0958d9;
|
|
12
|
+
--sg-blue-8: #003eb3;
|
|
13
|
+
--sg-blue-9: #002c8c;
|
|
14
|
+
--sg-blue-10: #001d66;
|
|
15
|
+
|
|
16
|
+
--sg-gray-1: #ffffff;
|
|
17
|
+
--sg-gray-2: #fafafa;
|
|
18
|
+
--sg-gray-3: #f5f5f5;
|
|
19
|
+
--sg-gray-4: #f0f0f0;
|
|
20
|
+
--sg-gray-5: #d9d9d9;
|
|
21
|
+
--sg-gray-6: #bfbfbf;
|
|
22
|
+
--sg-gray-7: #8c8c8c;
|
|
23
|
+
--sg-gray-8: #595959;
|
|
24
|
+
--sg-gray-9: #262626;
|
|
25
|
+
--sg-gray-10: #141414;
|
|
26
|
+
|
|
27
|
+
--sg-red-1: #fff2f0;
|
|
28
|
+
--sg-red-5: #ff4d4f;
|
|
29
|
+
--sg-red-6: #f5222d;
|
|
30
|
+
|
|
31
|
+
--sg-green-1: #f6ffed;
|
|
32
|
+
--sg-green-5: #73d13d;
|
|
33
|
+
--sg-green-6: #52c41a;
|
|
34
|
+
|
|
35
|
+
--sg-orange-1: #fffbe6;
|
|
36
|
+
--sg-orange-5: #faad14;
|
|
37
|
+
--sg-orange-6: #d48806;
|
|
38
|
+
|
|
39
|
+
/* === Sizing (theme-independent) === */
|
|
40
|
+
--sg-font-size-sm: 12px;
|
|
41
|
+
--sg-font-size: 14px;
|
|
42
|
+
--sg-font-size-lg: 16px;
|
|
43
|
+
--sg-font-size-xl: 20px;
|
|
44
|
+
|
|
45
|
+
--sg-line-height: 1.5714;
|
|
46
|
+
|
|
47
|
+
--sg-height-sm: 24px;
|
|
48
|
+
--sg-height-md: 32px;
|
|
49
|
+
--sg-height-lg: 40px;
|
|
50
|
+
|
|
51
|
+
--sg-border-radius-sm: 4px;
|
|
52
|
+
--sg-border-radius: 6px;
|
|
53
|
+
--sg-border-radius-lg: 8px;
|
|
54
|
+
|
|
55
|
+
--sg-padding-xs: 4px;
|
|
56
|
+
--sg-padding-sm: 8px;
|
|
57
|
+
--sg-padding-md: 12px;
|
|
58
|
+
--sg-padding-lg: 16px;
|
|
59
|
+
--sg-padding-xl: 24px;
|
|
60
|
+
|
|
61
|
+
--sg-margin-xs: 4px;
|
|
62
|
+
--sg-margin-sm: 8px;
|
|
63
|
+
--sg-margin-md: 16px;
|
|
64
|
+
--sg-margin-lg: 24px;
|
|
65
|
+
|
|
66
|
+
--sg-transition-duration: 0.2s;
|
|
67
|
+
--sg-transition-timing: cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
68
|
+
|
|
69
|
+
/* Curated transition shorthands.
|
|
70
|
+
* `*-fast` (~120ms) — micro-interactions: button hovers, tiny color swaps,
|
|
71
|
+
* toolbar fades, edge hover stroke widens.
|
|
72
|
+
* `*-medium` (~180ms) — primary interactions: card lift on hover,
|
|
73
|
+
* node selection ring, dashboard widget elevation.
|
|
74
|
+
* Use them in `transition: <prop> var(--sg-transition-*)`. */
|
|
75
|
+
--sg-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
76
|
+
--sg-transition-medium: 180ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
77
|
+
|
|
78
|
+
/* === Z-index scale === */
|
|
79
|
+
--sg-z-base: 1;
|
|
80
|
+
--sg-z-sticky: 3;
|
|
81
|
+
--sg-z-sticky-fixed: 5;
|
|
82
|
+
--sg-z-loading: 10;
|
|
83
|
+
--sg-z-modal: 1000;
|
|
84
|
+
--sg-z-tooltip: 1000;
|
|
85
|
+
--sg-z-dropdown: 1050;
|
|
86
|
+
--sg-z-notification: 1060;
|
|
87
|
+
|
|
88
|
+
/* === Component tokens === */
|
|
89
|
+
--sg-color-star: #fadb14;
|
|
90
|
+
|
|
91
|
+
/* Input-family aliases shared by Input / Select / TreeSelect / Cascader.
|
|
92
|
+
* These are public component tokens, so scoped overrides work consistently
|
|
93
|
+
* across all trigger-like controls. */
|
|
94
|
+
--sg-input-height: var(--sg-height-md);
|
|
95
|
+
--sg-input-padding: var(--sg-padding-xs) var(--sg-padding-md);
|
|
96
|
+
--sg-input-font-size: var(--sg-font-size);
|
|
97
|
+
--sg-input-color: var(--sg-color-text);
|
|
98
|
+
--sg-input-bg: var(--sg-color-bg-container);
|
|
99
|
+
--sg-input-border: var(--sg-color-border);
|
|
100
|
+
--sg-input-radius: var(--sg-border-radius);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* === Semantic tokens — Light theme (default) === */
|
|
104
|
+
:root,
|
|
105
|
+
[data-sg-theme='light'] {
|
|
106
|
+
--sg-color-bg: var(--sg-gray-1);
|
|
107
|
+
--sg-color-bg-secondary: var(--sg-gray-2);
|
|
108
|
+
--sg-color-bg-elevated: var(--sg-gray-1);
|
|
109
|
+
--sg-color-bg-container: var(--sg-gray-1);
|
|
110
|
+
--sg-color-bg-hover: var(--sg-gray-3);
|
|
111
|
+
--sg-color-bg-disabled: var(--sg-gray-3);
|
|
112
|
+
|
|
113
|
+
--sg-color-text: rgba(0, 0, 0, 0.88);
|
|
114
|
+
--sg-color-text-secondary: rgba(0, 0, 0, 0.65);
|
|
115
|
+
--sg-color-text-tertiary: rgba(0, 0, 0, 0.45);
|
|
116
|
+
--sg-color-text-quaternary: rgba(0, 0, 0, 0.25);
|
|
117
|
+
--sg-color-text-disabled: rgba(0, 0, 0, 0.25);
|
|
118
|
+
--sg-color-text-placeholder: rgba(0, 0, 0, 0.25);
|
|
119
|
+
|
|
120
|
+
--sg-color-border: var(--sg-gray-5);
|
|
121
|
+
--sg-color-border-secondary: var(--sg-gray-4);
|
|
122
|
+
|
|
123
|
+
/* Subtle fills (tracks, clear buttons, skeletons) */
|
|
124
|
+
--sg-color-fill: rgba(0, 0, 0, 0.15);
|
|
125
|
+
--sg-color-fill-secondary: rgba(0, 0, 0, 0.06);
|
|
126
|
+
--sg-color-fill-tertiary: rgba(0, 0, 0, 0.06);
|
|
127
|
+
--sg-color-fill-quaternary: rgba(0, 0, 0, 0.02);
|
|
128
|
+
|
|
129
|
+
--sg-color-primary: var(--sg-blue-6);
|
|
130
|
+
--sg-color-primary-hover: var(--sg-blue-5);
|
|
131
|
+
--sg-color-primary-active: var(--sg-blue-7);
|
|
132
|
+
--sg-color-primary-bg: var(--sg-blue-1);
|
|
133
|
+
|
|
134
|
+
--sg-color-error: var(--sg-red-5);
|
|
135
|
+
--sg-color-error-bg: var(--sg-red-1);
|
|
136
|
+
--sg-color-success: var(--sg-green-6);
|
|
137
|
+
--sg-color-success-bg: var(--sg-green-1);
|
|
138
|
+
--sg-color-warning: var(--sg-orange-5);
|
|
139
|
+
--sg-color-warning-bg: var(--sg-orange-1);
|
|
140
|
+
|
|
141
|
+
--sg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
142
|
+
--sg-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
143
|
+
--sg-shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.12);
|
|
144
|
+
|
|
145
|
+
--sg-color-white: #ffffff;
|
|
146
|
+
--sg-color-overlay: rgba(0, 0, 0, 0.45);
|
|
147
|
+
--sg-color-tooltip-bg: rgba(0, 0, 0, 0.85);
|
|
148
|
+
--sg-color-tooltip-text: #ffffff;
|
|
149
|
+
|
|
150
|
+
/* Skeleton — base bar fill + shimmer highlight (light theme).
|
|
151
|
+
* Kept distinct from --sg-color-bg-hover so loading placeholders stay
|
|
152
|
+
* clearly visible on white surfaces and don't fight the hover palette. */
|
|
153
|
+
--sg-skeleton-bg: #e2e8f0;
|
|
154
|
+
--sg-skeleton-shimmer: #f8fafc;
|
|
155
|
+
|
|
156
|
+
/* === Visualization layer (light) ===
|
|
157
|
+
* Re-mappable per theme. Components use these via `var(--sg-*)` so
|
|
158
|
+
* dark theme overrides cascade automatically. */
|
|
159
|
+
|
|
160
|
+
/* Diagram — canvas, grid, nodes, edges, lasso */
|
|
161
|
+
--sg-diagram-canvas-bg: var(--sg-color-bg);
|
|
162
|
+
--sg-diagram-grid-line-color: rgba(0, 0, 0, 0.04);
|
|
163
|
+
--sg-diagram-grid-line-color-strong: rgba(0, 0, 0, 0.08);
|
|
164
|
+
--sg-diagram-node-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
|
|
165
|
+
--sg-diagram-node-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
|
|
166
|
+
--sg-diagram-node-shadow-selected:
|
|
167
|
+
0 0 0 2px var(--sg-color-primary-bg), 0 6px 16px rgba(22, 119, 255, 0.18),
|
|
168
|
+
0 1px 3px rgba(0, 0, 0, 0.08);
|
|
169
|
+
--sg-diagram-node-shadow-dragging: 0 12px 28px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
170
|
+
--sg-diagram-edge-color: var(--sg-gray-6);
|
|
171
|
+
--sg-diagram-edge-color-hover: var(--sg-color-text-secondary);
|
|
172
|
+
--sg-diagram-edge-color-selected: var(--sg-color-primary);
|
|
173
|
+
--sg-diagram-lasso-stroke: var(--sg-color-primary);
|
|
174
|
+
--sg-diagram-lasso-fill: rgba(22, 119, 255, 0.08);
|
|
175
|
+
|
|
176
|
+
/* Charts — tooltip, crosshair, brush, legend */
|
|
177
|
+
--sg-chart-tooltip-bg: var(--sg-color-bg-elevated);
|
|
178
|
+
--sg-chart-tooltip-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
|
|
179
|
+
--sg-chart-crosshair-color: rgba(0, 0, 0, 0.32);
|
|
180
|
+
--sg-chart-brush-fill: rgba(22, 119, 255, 0.1);
|
|
181
|
+
--sg-chart-brush-stroke: var(--sg-color-primary);
|
|
182
|
+
--sg-chart-legend-hover-bg: var(--sg-color-bg-hover);
|
|
183
|
+
|
|
184
|
+
/* Dashboard — widget elevation, editor affordances */
|
|
185
|
+
--sg-dashboard-widget-shadow: var(--sg-shadow-sm);
|
|
186
|
+
--sg-dashboard-widget-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
|
|
187
|
+
--sg-dashboard-editor-grid-color: rgba(22, 119, 255, 0.06);
|
|
188
|
+
--sg-dashboard-editor-widget-border: var(--sg-color-primary);
|
|
189
|
+
--sg-dashboard-editor-drop-zone-bg: rgba(22, 119, 255, 0.06);
|
|
190
|
+
--sg-dashboard-editor-drop-zone-border: var(--sg-color-primary);
|
|
191
|
+
|
|
192
|
+
/* Gantt — bars, today marker, dependency arrows */
|
|
193
|
+
--sg-gantt-bar-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
|
194
|
+
--sg-gantt-bar-shadow-hover:
|
|
195
|
+
0 3px 8px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.22);
|
|
196
|
+
--sg-gantt-today-marker-color: var(--sg-color-error);
|
|
197
|
+
--sg-gantt-today-marker-bg: rgba(245, 34, 45, 0.06);
|
|
198
|
+
--sg-gantt-dep-color: var(--sg-color-text-tertiary);
|
|
199
|
+
|
|
200
|
+
/* Timeline / EventTimeline — connector + event dot */
|
|
201
|
+
--sg-timeline-tail-color: var(--sg-color-border-secondary);
|
|
202
|
+
--sg-event-timeline-dot-shadow: 0 0 0 3px var(--sg-color-bg), 0 1px 3px rgba(22, 119, 255, 0.3);
|
|
203
|
+
--sg-event-timeline-dot-shadow-hover:
|
|
204
|
+
0 0 0 3px var(--sg-color-bg), 0 2px 8px rgba(22, 119, 255, 0.45);
|
|
205
|
+
|
|
206
|
+
/* ResourceCalendar — today, lane separators, conflict overlay */
|
|
207
|
+
--sg-rcal-today-bg: rgba(22, 119, 255, 0.05);
|
|
208
|
+
--sg-rcal-today-marker-color: var(--sg-color-primary);
|
|
209
|
+
--sg-rcal-lane-divider: var(--sg-color-border-secondary);
|
|
210
|
+
--sg-rcal-conflict-overlay-bg: rgba(245, 34, 45, 0.1);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
/* === Semantic tokens — Dark theme === */
|
|
214
|
+
[data-sg-theme='dark'] {
|
|
215
|
+
--sg-color-bg: var(--sg-gray-10);
|
|
216
|
+
--sg-color-bg-secondary: #1f1f1f;
|
|
217
|
+
--sg-color-bg-elevated: #1f1f1f;
|
|
218
|
+
--sg-color-bg-container: #1f1f1f;
|
|
219
|
+
--sg-color-bg-hover: #2a2a2a;
|
|
220
|
+
--sg-color-bg-disabled: rgba(255, 255, 255, 0.08);
|
|
221
|
+
|
|
222
|
+
--sg-color-text: rgba(255, 255, 255, 0.88);
|
|
223
|
+
--sg-color-text-secondary: rgba(255, 255, 255, 0.65);
|
|
224
|
+
--sg-color-text-tertiary: rgba(255, 255, 255, 0.45);
|
|
225
|
+
--sg-color-text-quaternary: rgba(255, 255, 255, 0.25);
|
|
226
|
+
--sg-color-text-disabled: rgba(255, 255, 255, 0.25);
|
|
227
|
+
--sg-color-text-placeholder: rgba(255, 255, 255, 0.25);
|
|
228
|
+
|
|
229
|
+
--sg-color-border: #424242;
|
|
230
|
+
--sg-color-border-secondary: #303030;
|
|
231
|
+
|
|
232
|
+
--sg-color-fill: rgba(255, 255, 255, 0.15);
|
|
233
|
+
--sg-color-fill-secondary: rgba(255, 255, 255, 0.08);
|
|
234
|
+
--sg-color-fill-tertiary: rgba(255, 255, 255, 0.06);
|
|
235
|
+
--sg-color-fill-quaternary: rgba(255, 255, 255, 0.04);
|
|
236
|
+
|
|
237
|
+
--sg-color-primary: var(--sg-blue-5);
|
|
238
|
+
--sg-color-primary-hover: var(--sg-blue-6);
|
|
239
|
+
--sg-color-primary-active: var(--sg-blue-7);
|
|
240
|
+
--sg-color-primary-bg: rgba(22, 119, 255, 0.15);
|
|
241
|
+
|
|
242
|
+
--sg-color-error: #dc4446;
|
|
243
|
+
--sg-color-error-bg: rgba(220, 68, 70, 0.1);
|
|
244
|
+
--sg-color-success: #49aa19;
|
|
245
|
+
--sg-color-success-bg: rgba(73, 170, 25, 0.1);
|
|
246
|
+
--sg-color-warning: #d89614;
|
|
247
|
+
--sg-color-warning-bg: rgba(216, 150, 20, 0.1);
|
|
248
|
+
|
|
249
|
+
--sg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.16);
|
|
250
|
+
--sg-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
|
|
251
|
+
--sg-shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.48);
|
|
252
|
+
|
|
253
|
+
--sg-color-overlay: rgba(0, 0, 0, 0.65);
|
|
254
|
+
--sg-color-tooltip-bg: #434343;
|
|
255
|
+
--sg-color-tooltip-text: #ffffff;
|
|
256
|
+
|
|
257
|
+
/* Skeleton — dark theme bars need brighter fills to stay readable. */
|
|
258
|
+
--sg-skeleton-bg: rgba(255, 255, 255, 0.08);
|
|
259
|
+
--sg-skeleton-shimmer: rgba(255, 255, 255, 0.18);
|
|
260
|
+
|
|
261
|
+
/* === Visualization layer (dark) ===
|
|
262
|
+
* Shadows are stronger and use lower-alpha bright tints; canvas grid
|
|
263
|
+
* lines use white-alpha so they read against dark bg. */
|
|
264
|
+
|
|
265
|
+
--sg-diagram-canvas-bg: var(--sg-color-bg);
|
|
266
|
+
--sg-diagram-grid-line-color: rgba(255, 255, 255, 0.04);
|
|
267
|
+
--sg-diagram-grid-line-color-strong: rgba(255, 255, 255, 0.08);
|
|
268
|
+
--sg-diagram-node-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
|
|
269
|
+
--sg-diagram-node-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
|
|
270
|
+
--sg-diagram-node-shadow-selected:
|
|
271
|
+
0 0 0 2px var(--sg-color-primary-bg), 0 6px 16px rgba(64, 150, 255, 0.3),
|
|
272
|
+
0 1px 3px rgba(0, 0, 0, 0.4);
|
|
273
|
+
--sg-diagram-node-shadow-dragging: 0 12px 28px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
|
|
274
|
+
--sg-diagram-edge-color: var(--sg-gray-7);
|
|
275
|
+
--sg-diagram-edge-color-hover: var(--sg-color-text-secondary);
|
|
276
|
+
--sg-diagram-edge-color-selected: var(--sg-color-primary);
|
|
277
|
+
--sg-diagram-lasso-stroke: var(--sg-color-primary);
|
|
278
|
+
--sg-diagram-lasso-fill: rgba(64, 150, 255, 0.12);
|
|
279
|
+
|
|
280
|
+
--sg-chart-tooltip-bg: var(--sg-color-bg-elevated);
|
|
281
|
+
--sg-chart-tooltip-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
282
|
+
--sg-chart-crosshair-color: rgba(255, 255, 255, 0.4);
|
|
283
|
+
--sg-chart-brush-fill: rgba(64, 150, 255, 0.16);
|
|
284
|
+
--sg-chart-brush-stroke: var(--sg-color-primary);
|
|
285
|
+
--sg-chart-legend-hover-bg: var(--sg-color-bg-hover);
|
|
286
|
+
|
|
287
|
+
--sg-dashboard-widget-shadow: var(--sg-shadow-sm);
|
|
288
|
+
--sg-dashboard-widget-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
289
|
+
--sg-dashboard-editor-grid-color: rgba(64, 150, 255, 0.08);
|
|
290
|
+
--sg-dashboard-editor-widget-border: var(--sg-color-primary);
|
|
291
|
+
--sg-dashboard-editor-drop-zone-bg: rgba(64, 150, 255, 0.1);
|
|
292
|
+
--sg-dashboard-editor-drop-zone-border: var(--sg-color-primary);
|
|
293
|
+
|
|
294
|
+
--sg-gantt-bar-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
295
|
+
--sg-gantt-bar-shadow-hover:
|
|
296
|
+
0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14);
|
|
297
|
+
--sg-gantt-today-marker-color: var(--sg-color-error);
|
|
298
|
+
--sg-gantt-today-marker-bg: rgba(220, 68, 70, 0.1);
|
|
299
|
+
--sg-gantt-dep-color: var(--sg-color-text-tertiary);
|
|
300
|
+
|
|
301
|
+
--sg-timeline-tail-color: var(--sg-color-border-secondary);
|
|
302
|
+
--sg-event-timeline-dot-shadow: 0 0 0 3px var(--sg-color-bg), 0 1px 3px rgba(64, 150, 255, 0.45);
|
|
303
|
+
--sg-event-timeline-dot-shadow-hover:
|
|
304
|
+
0 0 0 3px var(--sg-color-bg), 0 2px 10px rgba(64, 150, 255, 0.65);
|
|
305
|
+
|
|
306
|
+
--sg-rcal-today-bg: rgba(64, 150, 255, 0.08);
|
|
307
|
+
--sg-rcal-today-marker-color: var(--sg-color-primary);
|
|
308
|
+
--sg-rcal-lane-divider: var(--sg-color-border-secondary);
|
|
309
|
+
--sg-rcal-conflict-overlay-bg: rgba(220, 68, 70, 0.16);
|
|
310
|
+
}
|