@yurikilian/lex4 1.2.0 → 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -1
- package/dist/components/CanvasControls.d.ts +3 -0
- package/dist/components/CanvasControls.d.ts.map +1 -0
- package/dist/components/HeaderFooterActions.d.ts.map +1 -1
- package/dist/components/HistorySidebar.d.ts.map +1 -1
- package/dist/components/Lex4Editor.d.ts.map +1 -1
- package/dist/components/Toolbar.d.ts.map +1 -1
- package/dist/components/VariablePanel.d.ts.map +1 -1
- package/dist/components/VariablePicker.d.ts.map +1 -1
- package/dist/extensions/extension-context.d.ts.map +1 -1
- package/dist/extensions/types.d.ts +4 -1
- package/dist/extensions/types.d.ts.map +1 -1
- package/dist/extensions/variables-extension.d.ts +3 -1
- package/dist/extensions/variables-extension.d.ts.map +1 -1
- package/dist/i18n/defaults.d.ts.map +1 -1
- package/dist/i18n/pt-BR.d.ts.map +1 -1
- package/dist/i18n/types.d.ts +23 -0
- package/dist/i18n/types.d.ts.map +1 -1
- package/dist/lex4-editor.cjs +696 -564
- package/dist/lex4-editor.cjs.map +1 -1
- package/dist/lex4-editor.js +696 -564
- package/dist/lex4-editor.js.map +1 -1
- package/dist/style.css +709 -286
- package/dist/types/editor-handle.d.ts +4 -2
- package/dist/types/editor-handle.d.ts.map +1 -1
- package/dist/variables/variable-node.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/style.css
CHANGED
|
@@ -1,7 +1,62 @@
|
|
|
1
1
|
/* ───────────────────────────────────────────────────────────
|
|
2
|
-
Lex4 Editor —
|
|
2
|
+
Lex4 Editor — Tailwind + shadcn themed
|
|
3
|
+
Uses shadcn CSS variables (--color-*) for all colors.
|
|
4
|
+
Consuming apps provide values via their Tailwind/shadcn theme.
|
|
3
5
|
─────────────────────────────────────────────────────────── */
|
|
4
6
|
|
|
7
|
+
/* ── Default theme (low-priority layer, overridable) ─────── */
|
|
8
|
+
@layer lex4-defaults {
|
|
9
|
+
:root {
|
|
10
|
+
--color-primary: hsl(217 91% 60%);
|
|
11
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
12
|
+
--color-primary-glow: hsl(213 94% 68%);
|
|
13
|
+
|
|
14
|
+
--color-background: hsl(210 20% 98%);
|
|
15
|
+
--color-foreground: hsl(222 47% 11%);
|
|
16
|
+
|
|
17
|
+
--color-card: hsl(0 0% 100%);
|
|
18
|
+
--color-card-foreground: hsl(222 47% 11%);
|
|
19
|
+
|
|
20
|
+
--color-secondary: hsl(210 40% 96%);
|
|
21
|
+
--color-secondary-foreground: hsl(222 47% 11%);
|
|
22
|
+
|
|
23
|
+
--color-muted: hsl(210 40% 96%);
|
|
24
|
+
--color-muted-foreground: hsl(215 16% 47%);
|
|
25
|
+
|
|
26
|
+
--color-accent: hsl(158 64% 42%);
|
|
27
|
+
--color-accent-foreground: hsl(0 0% 100%);
|
|
28
|
+
|
|
29
|
+
--color-destructive: hsl(0 84% 60%);
|
|
30
|
+
|
|
31
|
+
--color-border: hsl(214 32% 91%);
|
|
32
|
+
--color-border-strong: hsl(213 27% 84%);
|
|
33
|
+
--color-input: hsl(214 32% 91%);
|
|
34
|
+
--color-ring: hsl(213 94% 68%);
|
|
35
|
+
|
|
36
|
+
--color-surface: hsl(210 40% 98%);
|
|
37
|
+
--color-surface-elevated: hsl(0 0% 100%);
|
|
38
|
+
--color-canvas: hsl(0 0% 100%);
|
|
39
|
+
--color-canvas-foreground: hsl(222 47% 11%);
|
|
40
|
+
|
|
41
|
+
--color-token-customer: hsl(217 91% 60%);
|
|
42
|
+
--color-token-customer-bg: hsl(214 95% 95%);
|
|
43
|
+
--color-token-proposal: hsl(21 90% 48%);
|
|
44
|
+
--color-token-proposal-bg: hsl(33 100% 92%);
|
|
45
|
+
--color-token-seller: hsl(142 71% 45%);
|
|
46
|
+
--color-token-seller-bg: hsl(138 76% 92%);
|
|
47
|
+
--color-token-company: hsl(215 25% 27%);
|
|
48
|
+
--color-token-company-bg: hsl(210 40% 96%);
|
|
49
|
+
|
|
50
|
+
--shadow-sm: 0 1px 2px 0 hsl(222 47% 11% / 0.05);
|
|
51
|
+
--shadow-md: 0 2px 8px -2px hsl(222 47% 11% / 0.08);
|
|
52
|
+
--shadow-lg: 0 16px 40px -12px hsl(222 47% 11% / 0.12);
|
|
53
|
+
--shadow-paper: 0 1px 2px hsl(222 47% 11% / 0.04), 0 8px 24px -8px hsl(222 47% 11% / 0.08);
|
|
54
|
+
|
|
55
|
+
--color-selection-bg: hsl(214 95% 87%);
|
|
56
|
+
--color-selection-text: hsl(224 71% 25%);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
5
60
|
/* ── Scoped reset ────────────────────────────────────────── */
|
|
6
61
|
.lex4-editor *,
|
|
7
62
|
.lex4-editor *::before,
|
|
@@ -29,70 +84,27 @@
|
|
|
29
84
|
padding: 0;
|
|
30
85
|
}
|
|
31
86
|
|
|
32
|
-
/* ──
|
|
87
|
+
/* ── Structural tokens (non-color) ───────────────────────── */
|
|
33
88
|
.lex4-editor {
|
|
34
|
-
|
|
35
|
-
--lex4-
|
|
36
|
-
--lex4-color-primary-light: #eff6ff;
|
|
37
|
-
--lex4-color-primary-text: #1d4ed8;
|
|
38
|
-
--lex4-color-primary-border: #93c5fd;
|
|
39
|
-
--lex4-color-primary-focus: #60a5fa;
|
|
40
|
-
|
|
41
|
-
/* Surfaces */
|
|
42
|
-
--lex4-color-bg: #ffffff;
|
|
43
|
-
--lex4-color-bg-muted: #f9fafb;
|
|
44
|
-
--lex4-color-bg-canvas: #e5e7eb;
|
|
45
|
-
|
|
46
|
-
/* Borders */
|
|
47
|
-
--lex4-color-border: #e5e7eb;
|
|
48
|
-
--lex4-color-border-light: #f3f4f6;
|
|
49
|
-
|
|
50
|
-
/* Text */
|
|
51
|
-
--lex4-color-text: #111827;
|
|
52
|
-
--lex4-color-text-secondary: #6b7280;
|
|
53
|
-
--lex4-color-text-muted: #9ca3af;
|
|
54
|
-
--lex4-color-text-disabled: #d1d5db;
|
|
55
|
-
|
|
56
|
-
/* Hover / interaction */
|
|
57
|
-
--lex4-color-hover: #f3f4f6;
|
|
58
|
-
--lex4-color-hover-text: #111827;
|
|
59
|
-
|
|
60
|
-
/* Selection (global Ctrl+A) */
|
|
61
|
-
--lex4-color-selection-bg: rgb(191 219 254);
|
|
62
|
-
--lex4-color-selection-text: rgb(30 64 175);
|
|
63
|
-
|
|
64
|
-
/* Header / footer regions */
|
|
65
|
-
--lex4-color-hf-bg: rgb(239 246 255 / 0.6);
|
|
66
|
-
--lex4-color-hf-border: #bfdbfe;
|
|
67
|
-
--lex4-color-hf-border-inner: #dbeafe;
|
|
68
|
-
|
|
69
|
-
/* Dimensions */
|
|
70
|
-
--lex4-sidebar-width: 336px;
|
|
71
|
-
--lex4-toolbar-height: auto;
|
|
72
|
-
|
|
73
|
-
/* UI font */
|
|
74
|
-
--lex4-ui-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
75
|
-
|
|
76
|
-
/* Document font */
|
|
89
|
+
--lex4-sidebar-width: 320px;
|
|
90
|
+
--lex4-ui-font-family: "Inter Variable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
77
91
|
--lex4-font-family: 'Calibri', 'Carlito', sans-serif;
|
|
78
92
|
|
|
79
|
-
/* Toolbar icon button */
|
|
80
|
-
--lex4-toolbar-btn-size: 1.75rem;
|
|
81
|
-
--lex4-toolbar-btn-radius: 0.25rem;
|
|
82
|
-
|
|
83
|
-
/* Dropdown menu */
|
|
84
|
-
--lex4-menu-width: 14rem;
|
|
85
|
-
--lex4-menu-radius: 0.5rem;
|
|
86
|
-
--lex4-menu-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
|
87
|
-
|
|
88
|
-
/* Page */
|
|
89
|
-
--lex4-page-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
|
|
90
|
-
0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
91
|
-
|
|
92
93
|
font-family: var(--lex4-ui-font-family);
|
|
93
94
|
-webkit-font-smoothing: antialiased;
|
|
94
95
|
}
|
|
95
96
|
|
|
97
|
+
/* ── Animations ──────────────────────────────────────────── */
|
|
98
|
+
@keyframes lex4-fade-in {
|
|
99
|
+
from { opacity: 0; transform: translateY(4px); }
|
|
100
|
+
to { opacity: 1; transform: translateY(0); }
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@keyframes lex4-slide-in-right {
|
|
104
|
+
from { opacity: 0; transform: translateX(8px); }
|
|
105
|
+
to { opacity: 1; transform: translateX(0); }
|
|
106
|
+
}
|
|
107
|
+
|
|
96
108
|
/* ── Root layout ─────────────────────────────────────────── */
|
|
97
109
|
.lex4-editor {
|
|
98
110
|
display: flex;
|
|
@@ -116,7 +128,7 @@
|
|
|
116
128
|
flex: 1;
|
|
117
129
|
min-height: 0;
|
|
118
130
|
overflow: hidden;
|
|
119
|
-
background-color
|
|
131
|
+
background: linear-gradient(to bottom, var(--color-surface), var(--color-background));
|
|
120
132
|
}
|
|
121
133
|
|
|
122
134
|
.lex4-canvas-scroll {
|
|
@@ -125,13 +137,40 @@
|
|
|
125
137
|
overflow: auto;
|
|
126
138
|
}
|
|
127
139
|
|
|
140
|
+
.lex4-canvas-toolbar {
|
|
141
|
+
position: sticky;
|
|
142
|
+
top: 0;
|
|
143
|
+
z-index: 15;
|
|
144
|
+
padding: 0 1.5rem;
|
|
145
|
+
background: color-mix(in srgb, var(--color-surface) 82%, transparent);
|
|
146
|
+
backdrop-filter: blur(16px);
|
|
147
|
+
-webkit-backdrop-filter: blur(16px);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.lex4-canvas-toolbar-inner {
|
|
151
|
+
display: flex;
|
|
152
|
+
align-items: center;
|
|
153
|
+
gap: 0.75rem;
|
|
154
|
+
padding: 0.625rem 0;
|
|
155
|
+
border-bottom: 1px solid var(--color-border);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.lex4-canvas-toolbar-end {
|
|
159
|
+
margin-left: auto;
|
|
160
|
+
display: flex;
|
|
161
|
+
align-items: center;
|
|
162
|
+
}
|
|
163
|
+
|
|
128
164
|
/* ── Toolbar ─────────────────────────────────────────────── */
|
|
129
165
|
.lex4-toolbar {
|
|
130
166
|
position: sticky;
|
|
131
167
|
top: 0;
|
|
132
168
|
z-index: 10;
|
|
133
|
-
|
|
134
|
-
background
|
|
169
|
+
font-size: 12px;
|
|
170
|
+
background: color-mix(in srgb, var(--color-surface-elevated) 80%, transparent);
|
|
171
|
+
backdrop-filter: blur(16px);
|
|
172
|
+
-webkit-backdrop-filter: blur(16px);
|
|
173
|
+
border-bottom: 1px solid var(--color-border);
|
|
135
174
|
}
|
|
136
175
|
|
|
137
176
|
.lex4-toolbar-row {
|
|
@@ -140,7 +179,7 @@
|
|
|
140
179
|
-moz-column-gap: 0.25rem;
|
|
141
180
|
column-gap: 0.25rem;
|
|
142
181
|
row-gap: 0.375rem;
|
|
143
|
-
padding: 0.375rem 0.
|
|
182
|
+
padding: 0.375rem 0.875rem;
|
|
144
183
|
flex-wrap: wrap;
|
|
145
184
|
}
|
|
146
185
|
|
|
@@ -160,81 +199,108 @@
|
|
|
160
199
|
margin-left: auto;
|
|
161
200
|
display: flex;
|
|
162
201
|
align-items: center;
|
|
163
|
-
gap: 0.
|
|
202
|
+
gap: 0.25rem;
|
|
164
203
|
}
|
|
165
204
|
|
|
166
|
-
.lex4-toolbar-btn {
|
|
167
|
-
display: flex;
|
|
205
|
+
.lex4-editor button.lex4-toolbar-toggle-btn {
|
|
206
|
+
display: inline-flex;
|
|
168
207
|
align-items: center;
|
|
169
208
|
justify-content: center;
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
209
|
+
gap: 0.5rem;
|
|
210
|
+
height: 2rem;
|
|
211
|
+
padding: 0 0.75rem;
|
|
212
|
+
border-radius: 0.375rem;
|
|
213
|
+
border: 1px solid var(--color-input);
|
|
214
|
+
background-color: var(--color-background);
|
|
215
|
+
color: var(--color-muted-foreground);
|
|
216
|
+
font-size: 0.75rem;
|
|
217
|
+
line-height: 1rem;
|
|
218
|
+
font-weight: 500;
|
|
219
|
+
transition: background-color 150ms, color 150ms, border-color 150ms;
|
|
220
|
+
white-space: nowrap;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.lex4-editor button.lex4-toolbar-toggle-btn:hover {
|
|
224
|
+
background-color: var(--color-secondary);
|
|
225
|
+
color: var(--color-foreground);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.lex4-editor button.lex4-toolbar-toggle-btn.active {
|
|
229
|
+
background-color: var(--color-secondary);
|
|
230
|
+
border-color: var(--color-input);
|
|
231
|
+
color: var(--color-primary);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.lex4-editor button.lex4-toolbar-toggle-btn svg {
|
|
235
|
+
width: 0.8125rem;
|
|
236
|
+
height: 0.8125rem;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.lex4-editor button.lex4-toolbar-btn {
|
|
240
|
+
display: inline-flex;
|
|
241
|
+
align-items: center;
|
|
242
|
+
justify-content: center;
|
|
243
|
+
height: 1.625rem;
|
|
244
|
+
width: 1.625rem;
|
|
245
|
+
border-radius: 0.375rem;
|
|
246
|
+
color: var(--color-muted-foreground);
|
|
174
247
|
transition: color 150ms, background-color 150ms;
|
|
175
248
|
}
|
|
176
|
-
.lex4-toolbar-btn svg {
|
|
249
|
+
.lex4-editor button.lex4-toolbar-btn svg {
|
|
177
250
|
flex-shrink: 0;
|
|
178
251
|
}
|
|
179
|
-
.lex4-toolbar-btn:hover:not(:disabled):not(.active) {
|
|
180
|
-
background-color: var(--
|
|
181
|
-
color: var(--
|
|
252
|
+
.lex4-editor button.lex4-toolbar-btn:hover:not(:disabled):not(.active) {
|
|
253
|
+
background-color: var(--color-secondary);
|
|
254
|
+
color: var(--color-foreground);
|
|
182
255
|
}
|
|
183
|
-
.lex4-toolbar-btn.active {
|
|
184
|
-
background-color: var(--
|
|
185
|
-
color: var(--
|
|
256
|
+
.lex4-editor button.lex4-toolbar-btn.active {
|
|
257
|
+
background-color: var(--color-secondary);
|
|
258
|
+
color: var(--color-primary);
|
|
186
259
|
}
|
|
187
|
-
.lex4-toolbar-btn:disabled {
|
|
188
|
-
color: var(--
|
|
260
|
+
.lex4-editor button.lex4-toolbar-btn:disabled {
|
|
261
|
+
color: color-mix(in srgb, var(--color-muted-foreground) 50%, transparent);
|
|
189
262
|
cursor: not-allowed;
|
|
190
263
|
}
|
|
191
264
|
|
|
192
265
|
.lex4-toolbar-select {
|
|
193
266
|
height: 1.75rem;
|
|
194
|
-
border-radius: 0.
|
|
195
|
-
border:
|
|
267
|
+
border-radius: 0.375rem;
|
|
268
|
+
border: none;
|
|
196
269
|
padding: 0 0.5rem;
|
|
197
270
|
font-size: 0.75rem;
|
|
198
271
|
line-height: 1rem;
|
|
199
272
|
font-weight: 500;
|
|
200
|
-
background-color:
|
|
201
|
-
color: var(--
|
|
273
|
+
background-color: transparent;
|
|
274
|
+
color: var(--color-foreground);
|
|
275
|
+
transition: background-color 150ms;
|
|
276
|
+
}
|
|
277
|
+
.lex4-toolbar-select:hover {
|
|
278
|
+
background-color: var(--color-secondary);
|
|
202
279
|
}
|
|
203
280
|
.lex4-toolbar-select:focus {
|
|
204
281
|
outline: none;
|
|
205
|
-
|
|
206
|
-
box-shadow: 0 0 0 1px var(--lex4-color-primary-focus);
|
|
282
|
+
box-shadow: 0 0 0 1px var(--color-ring);
|
|
207
283
|
}
|
|
208
284
|
|
|
209
285
|
.lex4-toolbar-select-narrow {
|
|
210
|
-
width:
|
|
286
|
+
width: 3.5rem;
|
|
211
287
|
padding: 0 0.25rem;
|
|
212
288
|
}
|
|
213
289
|
|
|
214
290
|
.lex4-toolbar-separator {
|
|
215
|
-
margin: 0 0.
|
|
291
|
+
margin: 0 0.25rem;
|
|
216
292
|
height: 1.25rem;
|
|
217
293
|
width: 1px;
|
|
218
|
-
background-color: var(--
|
|
294
|
+
background-color: var(--color-border);
|
|
219
295
|
}
|
|
220
296
|
|
|
221
297
|
.lex4-toolbar-icon {
|
|
222
|
-
color: var(--
|
|
298
|
+
color: var(--color-muted-foreground);
|
|
223
299
|
}
|
|
224
300
|
|
|
225
301
|
/* ── Header / footer row ─────────────────────────────────── */
|
|
226
|
-
.lex4-hf-row {
|
|
227
|
-
display: flex;
|
|
228
|
-
align-items: center;
|
|
229
|
-
gap: 0.25rem;
|
|
230
|
-
padding: 0.375rem 0.5rem;
|
|
231
|
-
border-top: 1px solid var(--lex4-color-border-light);
|
|
232
|
-
flex-wrap: wrap;
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
/* ── Header / footer toggle ──────────────────────────────── */
|
|
236
302
|
.lex4-hf-toggle {
|
|
237
|
-
display: flex;
|
|
303
|
+
display: inline-flex;
|
|
238
304
|
align-items: center;
|
|
239
305
|
gap: 0.375rem;
|
|
240
306
|
min-height: 1.75rem;
|
|
@@ -242,24 +308,25 @@
|
|
|
242
308
|
-webkit-user-select: none;
|
|
243
309
|
-moz-user-select: none;
|
|
244
310
|
user-select: none;
|
|
311
|
+
color: var(--color-foreground);
|
|
245
312
|
}
|
|
246
313
|
|
|
247
314
|
.lex4-hf-toggle-icon {
|
|
248
|
-
color: var(--
|
|
315
|
+
color: var(--color-muted-foreground);
|
|
249
316
|
}
|
|
250
317
|
|
|
251
318
|
.lex4-hf-toggle-label {
|
|
252
|
-
font-size: 0.
|
|
319
|
+
font-size: 0.6875rem;
|
|
253
320
|
line-height: 1rem;
|
|
254
321
|
font-weight: 500;
|
|
255
|
-
color: var(--
|
|
322
|
+
color: var(--color-foreground);
|
|
256
323
|
}
|
|
257
324
|
|
|
258
325
|
.lex4-hf-switch {
|
|
259
326
|
position: relative;
|
|
260
327
|
display: inline-flex;
|
|
261
|
-
height:
|
|
262
|
-
width: 1.
|
|
328
|
+
height: 0.9375rem;
|
|
329
|
+
width: 1.625rem;
|
|
263
330
|
align-items: center;
|
|
264
331
|
border-radius: 9999px;
|
|
265
332
|
transition: background-color 200ms;
|
|
@@ -267,8 +334,8 @@
|
|
|
267
334
|
|
|
268
335
|
.lex4-hf-switch-knob {
|
|
269
336
|
display: inline-block;
|
|
270
|
-
height: 0.
|
|
271
|
-
width: 0.
|
|
337
|
+
height: 0.6875rem;
|
|
338
|
+
width: 0.6875rem;
|
|
272
339
|
border-radius: 9999px;
|
|
273
340
|
background-color: white;
|
|
274
341
|
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
@@ -277,29 +344,38 @@
|
|
|
277
344
|
}
|
|
278
345
|
|
|
279
346
|
.lex4-hf-switch[aria-checked="true"] .lex4-hf-switch-knob {
|
|
280
|
-
transform: translateX(0.
|
|
347
|
+
transform: translateX(0.8125rem);
|
|
281
348
|
}
|
|
282
349
|
|
|
283
350
|
/* ── Settings menu (HF actions) ──────────────────────────── */
|
|
284
|
-
.lex4-settings-trigger {
|
|
351
|
+
.lex4-editor button.lex4-settings-trigger {
|
|
285
352
|
display: flex;
|
|
286
353
|
height: 1.75rem;
|
|
287
354
|
align-items: center;
|
|
288
355
|
gap: 0.25rem;
|
|
289
|
-
border-radius: 0.
|
|
290
|
-
padding: 0 0.
|
|
291
|
-
font-size: 0.
|
|
356
|
+
border-radius: 0.375rem;
|
|
357
|
+
padding: 0 0.5rem;
|
|
358
|
+
font-size: 0.6875rem;
|
|
292
359
|
line-height: 1rem;
|
|
293
|
-
color: var(--
|
|
360
|
+
color: var(--color-muted-foreground);
|
|
361
|
+
font-weight: 500;
|
|
294
362
|
transition: color 150ms, background-color 150ms;
|
|
295
363
|
}
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
364
|
+
|
|
365
|
+
.lex4-editor button.lex4-settings-trigger-icon {
|
|
366
|
+
width: 1.875rem;
|
|
367
|
+
height: 1.875rem;
|
|
368
|
+
justify-content: center;
|
|
369
|
+
padding: 0;
|
|
370
|
+
border-radius: 0.5rem;
|
|
371
|
+
}
|
|
372
|
+
.lex4-editor button.lex4-settings-trigger:hover:not([aria-expanded="true"]) {
|
|
373
|
+
background-color: var(--color-secondary);
|
|
374
|
+
color: var(--color-foreground);
|
|
299
375
|
}
|
|
300
|
-
.lex4-settings-trigger[aria-expanded="true"] {
|
|
301
|
-
background-color: var(--
|
|
302
|
-
color: var(--
|
|
376
|
+
.lex4-editor button.lex4-settings-trigger[aria-expanded="true"] {
|
|
377
|
+
background-color: var(--color-secondary);
|
|
378
|
+
color: var(--color-primary);
|
|
303
379
|
}
|
|
304
380
|
|
|
305
381
|
.lex4-settings-menu {
|
|
@@ -308,78 +384,84 @@
|
|
|
308
384
|
top: 100%;
|
|
309
385
|
margin-top: 0.25rem;
|
|
310
386
|
z-index: 50;
|
|
311
|
-
padding: 0.375rem
|
|
312
|
-
width:
|
|
313
|
-
background-color: var(--
|
|
314
|
-
border: 1px solid var(--
|
|
315
|
-
border-radius:
|
|
316
|
-
box-shadow: var(--
|
|
387
|
+
padding: 0.375rem;
|
|
388
|
+
width: 18rem;
|
|
389
|
+
background-color: var(--color-surface-elevated);
|
|
390
|
+
border: 1px solid var(--color-border);
|
|
391
|
+
border-radius: 0.5rem;
|
|
392
|
+
box-shadow: var(--shadow-lg);
|
|
317
393
|
}
|
|
318
394
|
|
|
319
395
|
.lex4-settings-label {
|
|
320
|
-
padding: 0.5rem 0.
|
|
396
|
+
padding: 0.5rem 0.625rem 0.25rem;
|
|
321
397
|
font-size: 10px;
|
|
322
398
|
font-weight: 600;
|
|
323
399
|
text-transform: uppercase;
|
|
324
400
|
letter-spacing: 0.05em;
|
|
325
|
-
color: var(--
|
|
401
|
+
color: var(--color-muted-foreground);
|
|
326
402
|
}
|
|
327
403
|
|
|
328
|
-
.lex4-settings-item {
|
|
404
|
+
.lex4-editor button.lex4-settings-item {
|
|
329
405
|
display: flex;
|
|
330
406
|
width: 100%;
|
|
331
407
|
align-items: center;
|
|
332
|
-
gap: 0.
|
|
333
|
-
padding: 0.
|
|
408
|
+
gap: 0.625rem;
|
|
409
|
+
padding: 0.5rem 0.625rem;
|
|
410
|
+
border-radius: 0.5rem;
|
|
334
411
|
font-size: 0.75rem;
|
|
335
412
|
line-height: 1rem;
|
|
336
|
-
|
|
413
|
+
margin: 0.25rem 0;
|
|
414
|
+
color: var(--color-foreground);
|
|
337
415
|
transition: background-color 150ms;
|
|
338
416
|
}
|
|
339
|
-
.lex4-settings-item:hover:not(:disabled) {
|
|
340
|
-
background-color: var(--
|
|
417
|
+
.lex4-editor button.lex4-settings-item:hover:not(:disabled) {
|
|
418
|
+
background-color: var(--color-secondary);
|
|
341
419
|
}
|
|
342
|
-
.lex4-settings-item:disabled {
|
|
343
|
-
color: var(--
|
|
420
|
+
.lex4-editor button.lex4-settings-item:disabled {
|
|
421
|
+
color: color-mix(in srgb, var(--color-muted-foreground) 50%, transparent);
|
|
344
422
|
cursor: not-allowed;
|
|
345
423
|
}
|
|
346
|
-
.lex4-settings-item svg {
|
|
424
|
+
.lex4-editor button.lex4-settings-item svg {
|
|
347
425
|
flex-shrink: 0;
|
|
348
|
-
|
|
426
|
+
width: 1rem;
|
|
427
|
+
height: 1rem;
|
|
428
|
+
margin-left: 0.5rem;
|
|
429
|
+
color: var(--color-muted-foreground);
|
|
349
430
|
}
|
|
350
|
-
.lex4-settings-item:hover:not(:disabled) svg {
|
|
351
|
-
color: var(--
|
|
431
|
+
.lex4-editor button.lex4-settings-item:hover:not(:disabled) svg {
|
|
432
|
+
color: var(--color-foreground);
|
|
352
433
|
}
|
|
353
434
|
|
|
354
435
|
.lex4-settings-divider {
|
|
355
|
-
margin: 0.25rem 0;
|
|
436
|
+
margin: 0.25rem 0.5rem;
|
|
356
437
|
height: 1px;
|
|
357
|
-
background-color: var(--
|
|
438
|
+
background-color: var(--color-border);
|
|
358
439
|
}
|
|
359
440
|
|
|
360
441
|
.lex4-settings-counter-grid {
|
|
361
442
|
display: grid;
|
|
362
|
-
grid-template-columns:
|
|
363
|
-
gap: 0.
|
|
364
|
-
padding: 0 0.
|
|
443
|
+
grid-template-columns: repeat(4, 1fr);
|
|
444
|
+
gap: 0.25rem;
|
|
445
|
+
padding: 0 0.5rem 0.5rem;
|
|
365
446
|
}
|
|
366
447
|
|
|
367
|
-
.lex4-settings-counter-btn {
|
|
368
|
-
border-radius: 0.
|
|
369
|
-
padding: 0.375rem 0
|
|
448
|
+
.lex4-editor button.lex4-settings-counter-btn {
|
|
449
|
+
border-radius: 0.375rem;
|
|
450
|
+
padding: 0.375rem 0;
|
|
370
451
|
font-size: 0.75rem;
|
|
371
|
-
|
|
372
|
-
text-align:
|
|
373
|
-
color: var(--
|
|
452
|
+
font-weight: 500;
|
|
453
|
+
text-align: center;
|
|
454
|
+
color: var(--color-muted-foreground);
|
|
374
455
|
transition: background-color 150ms, color 150ms;
|
|
375
456
|
}
|
|
376
|
-
.lex4-settings-counter-btn:hover:not([aria-checked="true"]) {
|
|
377
|
-
background-color: var(--
|
|
457
|
+
.lex4-editor button.lex4-settings-counter-btn:hover:not([aria-checked="true"]) {
|
|
458
|
+
background-color: var(--color-secondary);
|
|
378
459
|
}
|
|
379
|
-
.lex4-settings-counter-btn[aria-checked="true"] {
|
|
380
|
-
background-color: var(--
|
|
381
|
-
color: var(--
|
|
460
|
+
.lex4-editor button.lex4-settings-counter-btn[aria-checked="true"] {
|
|
461
|
+
background-color: var(--color-primary);
|
|
462
|
+
color: var(--color-primary-foreground);
|
|
382
463
|
font-weight: 500;
|
|
464
|
+
box-shadow: var(--shadow-sm);
|
|
383
465
|
}
|
|
384
466
|
|
|
385
467
|
/* ── Sidebar ─────────────────────────────────────────────── */
|
|
@@ -389,30 +471,32 @@
|
|
|
389
471
|
flex-shrink: 0;
|
|
390
472
|
flex-direction: column;
|
|
391
473
|
width: var(--lex4-sidebar-width);
|
|
392
|
-
|
|
393
|
-
|
|
474
|
+
font-size: 12px;
|
|
475
|
+
border-left: 1px solid var(--color-border);
|
|
476
|
+
background-color: var(--color-surface);
|
|
477
|
+
animation: lex4-slide-in-right 200ms ease-out;
|
|
394
478
|
}
|
|
395
479
|
|
|
396
480
|
.lex4-sidebar-header {
|
|
397
481
|
display: flex;
|
|
398
482
|
align-items: flex-start;
|
|
399
483
|
justify-content: space-between;
|
|
400
|
-
padding:
|
|
401
|
-
border-bottom: 1px solid var(--lex4-color-border);
|
|
484
|
+
padding: 1rem 1rem 0.625rem;
|
|
402
485
|
}
|
|
403
486
|
|
|
404
487
|
.lex4-sidebar-title {
|
|
405
|
-
font-size: 0.
|
|
406
|
-
line-height:
|
|
488
|
+
font-size: 0.8125rem;
|
|
489
|
+
line-height: 1.125rem;
|
|
407
490
|
font-weight: 600;
|
|
408
|
-
|
|
491
|
+
letter-spacing: -0.01em;
|
|
492
|
+
color: var(--color-foreground);
|
|
409
493
|
}
|
|
410
494
|
|
|
411
495
|
.lex4-sidebar-subtitle {
|
|
412
496
|
margin-top: 0.125rem;
|
|
413
|
-
font-size: 0.
|
|
497
|
+
font-size: 0.6875rem;
|
|
414
498
|
line-height: 1rem;
|
|
415
|
-
color: var(--
|
|
499
|
+
color: var(--color-muted-foreground);
|
|
416
500
|
}
|
|
417
501
|
|
|
418
502
|
.lex4-sidebar-actions {
|
|
@@ -421,19 +505,19 @@
|
|
|
421
505
|
gap: 0.25rem;
|
|
422
506
|
}
|
|
423
507
|
|
|
424
|
-
.lex4-sidebar-action-btn {
|
|
425
|
-
display: flex;
|
|
426
|
-
height: 1.
|
|
427
|
-
width: 1.
|
|
508
|
+
.lex4-editor button.lex4-sidebar-action-btn {
|
|
509
|
+
display: inline-flex;
|
|
510
|
+
height: 1.75rem;
|
|
511
|
+
width: 1.75rem;
|
|
428
512
|
align-items: center;
|
|
429
513
|
justify-content: center;
|
|
430
|
-
border-radius: 0.
|
|
431
|
-
color: var(--
|
|
514
|
+
border-radius: 0.5rem;
|
|
515
|
+
color: var(--color-muted-foreground);
|
|
432
516
|
transition: color 150ms, background-color 150ms;
|
|
433
517
|
}
|
|
434
|
-
.lex4-sidebar-action-btn:hover {
|
|
435
|
-
background-color: var(--
|
|
436
|
-
color: var(--
|
|
518
|
+
.lex4-editor button.lex4-sidebar-action-btn:hover {
|
|
519
|
+
background-color: var(--color-secondary);
|
|
520
|
+
color: var(--color-foreground);
|
|
437
521
|
}
|
|
438
522
|
|
|
439
523
|
.lex4-sidebar-body {
|
|
@@ -444,68 +528,129 @@
|
|
|
444
528
|
|
|
445
529
|
/* ── History sidebar ─────────────────────────────────────── */
|
|
446
530
|
.lex4-history-empty {
|
|
447
|
-
padding: 1rem
|
|
448
|
-
font-size: 0.
|
|
449
|
-
line-height:
|
|
450
|
-
color: var(--
|
|
531
|
+
padding: 1.25rem 1rem;
|
|
532
|
+
font-size: 0.8125rem;
|
|
533
|
+
line-height: 1.25rem;
|
|
534
|
+
color: var(--color-muted-foreground);
|
|
535
|
+
text-align: center;
|
|
451
536
|
}
|
|
452
537
|
|
|
453
|
-
.lex4-history-list
|
|
454
|
-
|
|
538
|
+
.lex4-history-list {
|
|
539
|
+
display: flex;
|
|
540
|
+
flex-direction: column;
|
|
541
|
+
gap: 0.5rem;
|
|
542
|
+
padding: 0 1rem 1rem;
|
|
455
543
|
}
|
|
456
544
|
|
|
457
|
-
.lex4-history-entry {
|
|
545
|
+
.lex4-editor button.lex4-history-entry {
|
|
546
|
+
position: relative;
|
|
458
547
|
width: 100%;
|
|
459
|
-
padding: 0.
|
|
548
|
+
padding: 0.75rem 0.875rem;
|
|
460
549
|
text-align: left;
|
|
461
|
-
|
|
462
|
-
|
|
550
|
+
border: 1px solid var(--color-border);
|
|
551
|
+
border-radius: 0.625rem;
|
|
552
|
+
background-color: var(--color-surface-elevated);
|
|
553
|
+
box-shadow: var(--shadow-sm);
|
|
554
|
+
transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
|
|
463
555
|
}
|
|
464
|
-
.lex4-history-entry:hover:not(.active) {
|
|
465
|
-
background-color: var(--
|
|
556
|
+
.lex4-editor button.lex4-history-entry:hover:not(.active) {
|
|
557
|
+
background-color: color-mix(in srgb, var(--color-secondary) 72%, var(--color-surface-elevated));
|
|
558
|
+
border-color: var(--color-border-strong);
|
|
466
559
|
}
|
|
467
|
-
.lex4-history-entry.active {
|
|
468
|
-
background-color: var(--
|
|
560
|
+
.lex4-editor button.lex4-history-entry.active {
|
|
561
|
+
background-color: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface-elevated));
|
|
562
|
+
border-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
|
|
563
|
+
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent);
|
|
469
564
|
}
|
|
470
565
|
|
|
471
566
|
.lex4-history-entry-row {
|
|
472
567
|
display: flex;
|
|
473
568
|
align-items: flex-start;
|
|
474
|
-
|
|
475
|
-
|
|
569
|
+
gap: 0.75rem;
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
.lex4-history-entry-dot {
|
|
573
|
+
margin-top: 0.3125rem;
|
|
574
|
+
height: 0.4375rem;
|
|
575
|
+
width: 0.4375rem;
|
|
576
|
+
border-radius: 9999px;
|
|
577
|
+
flex-shrink: 0;
|
|
578
|
+
background-color: var(--color-border-strong);
|
|
579
|
+
transition: background-color 150ms;
|
|
580
|
+
}
|
|
581
|
+
.lex4-editor button.lex4-history-entry:hover:not(.active) .lex4-history-entry-dot {
|
|
582
|
+
background-color: var(--color-muted-foreground);
|
|
583
|
+
}
|
|
584
|
+
.lex4-editor button.lex4-history-entry.active .lex4-history-entry-dot {
|
|
585
|
+
background-color: var(--color-primary);
|
|
586
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
|
|
476
587
|
}
|
|
477
588
|
|
|
478
589
|
.lex4-history-entry-content {
|
|
479
590
|
min-width: 0;
|
|
591
|
+
flex: 1;
|
|
480
592
|
}
|
|
481
593
|
|
|
482
594
|
.lex4-history-entry-label {
|
|
483
595
|
font-size: 0.75rem;
|
|
484
596
|
line-height: 1rem;
|
|
485
|
-
|
|
597
|
+
font-weight: 500;
|
|
598
|
+
color: var(--color-foreground);
|
|
486
599
|
}
|
|
487
|
-
.lex4-history-entry-label
|
|
488
|
-
font-weight:
|
|
489
|
-
color: var(--
|
|
600
|
+
.lex4-editor button.lex4-history-entry.active .lex4-history-entry-label {
|
|
601
|
+
font-weight: 500;
|
|
602
|
+
color: var(--color-primary);
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
.lex4-history-entry-meta {
|
|
606
|
+
display: flex;
|
|
607
|
+
align-items: center;
|
|
608
|
+
flex-wrap: wrap;
|
|
609
|
+
gap: 0.5rem;
|
|
610
|
+
margin-top: 0.4375rem;
|
|
490
611
|
}
|
|
491
612
|
|
|
492
613
|
.lex4-history-entry-source {
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
614
|
+
display: inline-flex;
|
|
615
|
+
align-items: center;
|
|
616
|
+
justify-content: center;
|
|
617
|
+
min-height: 1.75rem;
|
|
618
|
+
padding: 0 0.75rem;
|
|
619
|
+
border-radius: 0.375rem;
|
|
620
|
+
border: 1px solid var(--color-input);
|
|
621
|
+
background-color: var(--color-background);
|
|
622
|
+
font-size: 0.6875rem;
|
|
623
|
+
line-height: 0.875rem;
|
|
624
|
+
font-weight: 500;
|
|
625
|
+
font-family: var(--lex4-ui-font-family);
|
|
626
|
+
color: var(--color-muted-foreground);
|
|
627
|
+
white-space: nowrap;
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
.lex4-history-entry-meta-dot {
|
|
631
|
+
display: none;
|
|
497
632
|
}
|
|
498
633
|
|
|
499
634
|
.lex4-history-entry-time {
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
635
|
+
display: inline-flex;
|
|
636
|
+
align-items: center;
|
|
637
|
+
justify-content: center;
|
|
638
|
+
min-height: 1.75rem;
|
|
639
|
+
padding: 0 0.75rem;
|
|
640
|
+
border-radius: 0.375rem;
|
|
641
|
+
border: 1px solid var(--color-input);
|
|
642
|
+
background-color: var(--color-background);
|
|
643
|
+
font-size: 0.6875rem;
|
|
644
|
+
line-height: 0.875rem;
|
|
645
|
+
font-weight: 500;
|
|
646
|
+
color: var(--color-muted-foreground);
|
|
647
|
+
font-variant-numeric: tabular-nums;
|
|
648
|
+
white-space: nowrap;
|
|
504
649
|
}
|
|
505
650
|
|
|
506
651
|
/* ── Variable panel ──────────────────────────────────────── */
|
|
507
652
|
.lex4-variable-search-container {
|
|
508
|
-
padding: 0.
|
|
653
|
+
padding: 0 1rem 0.625rem;
|
|
509
654
|
}
|
|
510
655
|
|
|
511
656
|
.lex4-variable-search-wrapper {
|
|
@@ -514,30 +659,38 @@
|
|
|
514
659
|
|
|
515
660
|
.lex4-variable-search-icon {
|
|
516
661
|
position: absolute;
|
|
517
|
-
left: 0.
|
|
662
|
+
left: 0.75rem;
|
|
518
663
|
top: 50%;
|
|
519
664
|
transform: translateY(-50%);
|
|
520
|
-
color: var(--
|
|
665
|
+
color: var(--color-muted-foreground);
|
|
521
666
|
}
|
|
522
667
|
|
|
523
668
|
.lex4-variable-search-input {
|
|
524
669
|
width: 100%;
|
|
525
|
-
|
|
526
|
-
border:
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
670
|
+
height: 2rem;
|
|
671
|
+
border-radius: 0.375rem;
|
|
672
|
+
border: 1px solid var(--color-border);
|
|
673
|
+
background-color: var(--color-surface-elevated);
|
|
674
|
+
padding: 0.375rem 0.75rem 0.375rem 2.25rem;
|
|
675
|
+
font-size: 0.6875rem;
|
|
530
676
|
line-height: 1rem;
|
|
531
|
-
color: var(--
|
|
677
|
+
color: var(--color-foreground);
|
|
532
678
|
}
|
|
533
679
|
.lex4-variable-search-input:focus {
|
|
534
680
|
outline: none;
|
|
535
|
-
|
|
536
|
-
|
|
681
|
+
box-shadow: 0 0 0 1px var(--color-ring);
|
|
682
|
+
border-color: var(--color-ring);
|
|
683
|
+
}
|
|
684
|
+
|
|
685
|
+
.lex4-variable-panel-content {
|
|
686
|
+
display: flex;
|
|
687
|
+
min-height: 100%;
|
|
688
|
+
flex-direction: column;
|
|
537
689
|
}
|
|
538
690
|
|
|
539
691
|
.lex4-variable-list {
|
|
540
|
-
|
|
692
|
+
flex: 1;
|
|
693
|
+
padding: 0 1rem 1rem;
|
|
541
694
|
}
|
|
542
695
|
|
|
543
696
|
.lex4-variable-list-empty {
|
|
@@ -545,56 +698,86 @@
|
|
|
545
698
|
text-align: center;
|
|
546
699
|
font-size: 0.75rem;
|
|
547
700
|
line-height: 1rem;
|
|
548
|
-
color: var(--
|
|
701
|
+
color: var(--color-muted-foreground);
|
|
549
702
|
}
|
|
550
703
|
|
|
551
704
|
.lex4-variable-group {
|
|
552
|
-
margin-bottom:
|
|
705
|
+
margin-bottom: 1rem;
|
|
706
|
+
}
|
|
707
|
+
|
|
708
|
+
.lex4-variable-group-label {
|
|
709
|
+
font-size: 10px;
|
|
710
|
+
font-weight: 600;
|
|
711
|
+
text-transform: uppercase;
|
|
712
|
+
letter-spacing: 0.05em;
|
|
713
|
+
color: var(--color-muted-foreground);
|
|
714
|
+
margin-bottom: 0.375rem;
|
|
715
|
+
}
|
|
716
|
+
|
|
717
|
+
.lex4-variable-group-items {
|
|
553
718
|
display: flex;
|
|
554
|
-
flex-
|
|
555
|
-
gap: 0.
|
|
719
|
+
flex-wrap: wrap;
|
|
720
|
+
gap: 0.625rem;
|
|
556
721
|
}
|
|
557
722
|
|
|
558
|
-
.lex4-variable-list-item {
|
|
559
|
-
display:
|
|
560
|
-
grid-template-columns: minmax(0, 1fr) auto;
|
|
723
|
+
.lex4-editor button.lex4-variable-list-item {
|
|
724
|
+
display: inline-flex;
|
|
561
725
|
align-items: center;
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
726
|
+
justify-content: center;
|
|
727
|
+
gap: 0.375rem;
|
|
728
|
+
min-height: 1.75rem;
|
|
729
|
+
border-radius: 0.375rem;
|
|
730
|
+
border: 1px solid var(--color-input);
|
|
731
|
+
background-color: var(--color-background);
|
|
732
|
+
padding: 0 0.75rem;
|
|
566
733
|
font-size: 0.75rem;
|
|
567
734
|
line-height: 1rem;
|
|
568
|
-
|
|
735
|
+
font-weight: 500;
|
|
736
|
+
color: var(--color-foreground);
|
|
737
|
+
cursor: pointer;
|
|
738
|
+
box-shadow: none;
|
|
739
|
+
transition: background-color 150ms, border-color 150ms, color 150ms;
|
|
740
|
+
white-space: nowrap;
|
|
741
|
+
}
|
|
742
|
+
.lex4-editor button.lex4-variable-list-item::before {
|
|
743
|
+
content: '';
|
|
744
|
+
display: inline-block;
|
|
745
|
+
width: 3px;
|
|
746
|
+
height: 3px;
|
|
747
|
+
border-radius: 50%;
|
|
748
|
+
background: var(--lex4-variable-accent, var(--color-muted-foreground));
|
|
749
|
+
flex-shrink: 0;
|
|
569
750
|
}
|
|
570
|
-
.lex4-variable-list-item:hover {
|
|
571
|
-
background-color: var(--
|
|
751
|
+
.lex4-editor button.lex4-variable-list-item:hover {
|
|
752
|
+
background-color: var(--color-secondary);
|
|
753
|
+
border-color: var(--color-input);
|
|
572
754
|
}
|
|
573
755
|
|
|
574
756
|
.lex4-variable-badge {
|
|
575
757
|
display: inline-flex;
|
|
576
758
|
align-items: center;
|
|
759
|
+
gap: 0.25rem;
|
|
577
760
|
justify-self: start;
|
|
578
761
|
max-width: 100%;
|
|
579
762
|
overflow: hidden;
|
|
580
|
-
border-radius:
|
|
581
|
-
border: 1px solid var(--
|
|
582
|
-
padding: 0.
|
|
763
|
+
border-radius: 0.25rem;
|
|
764
|
+
border: 1px solid var(--color-border);
|
|
765
|
+
padding: 0.125rem 0.375rem;
|
|
583
766
|
font-size: 11px;
|
|
584
767
|
font-weight: 500;
|
|
585
|
-
color: var(--
|
|
768
|
+
color: var(--color-foreground);
|
|
586
769
|
white-space: nowrap;
|
|
587
770
|
text-overflow: ellipsis;
|
|
588
771
|
}
|
|
589
772
|
|
|
590
|
-
.lex4-variable-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
773
|
+
.lex4-variable-badge::before {
|
|
774
|
+
content: '';
|
|
775
|
+
display: inline-block;
|
|
776
|
+
width: 4px;
|
|
777
|
+
height: 4px;
|
|
778
|
+
border-radius: 50%;
|
|
779
|
+
background-color: currentColor;
|
|
780
|
+
flex-shrink: 0;
|
|
598
781
|
}
|
|
599
782
|
|
|
600
783
|
/* ── Variable picker (toolbar dropdown) ──────────────────── */
|
|
@@ -604,20 +787,32 @@
|
|
|
604
787
|
}
|
|
605
788
|
|
|
606
789
|
.lex4-variable-picker-btn {
|
|
607
|
-
height:
|
|
608
|
-
border-radius: 0.
|
|
609
|
-
border:
|
|
610
|
-
padding: 0 0.
|
|
790
|
+
height: 2rem;
|
|
791
|
+
border-radius: 0.375rem;
|
|
792
|
+
border: none;
|
|
793
|
+
padding: 0 0.625rem;
|
|
611
794
|
font-size: 0.75rem;
|
|
612
795
|
line-height: 1rem;
|
|
613
796
|
font-weight: 500;
|
|
614
|
-
background-color:
|
|
615
|
-
color: var(--
|
|
797
|
+
background-color: transparent;
|
|
798
|
+
color: var(--color-foreground);
|
|
799
|
+
display: inline-flex;
|
|
800
|
+
align-items: center;
|
|
801
|
+
gap: 0.375rem;
|
|
802
|
+
transition: background-color 150ms;
|
|
803
|
+
}
|
|
804
|
+
.lex4-variable-picker-btn:hover {
|
|
805
|
+
background-color: var(--color-secondary);
|
|
806
|
+
}
|
|
807
|
+
.lex4-variable-picker-btn svg:first-child {
|
|
808
|
+
color: var(--color-muted-foreground);
|
|
809
|
+
}
|
|
810
|
+
.lex4-variable-picker-btn svg:last-child {
|
|
811
|
+
color: var(--color-muted-foreground);
|
|
616
812
|
}
|
|
617
813
|
.lex4-variable-picker-btn:focus {
|
|
618
814
|
outline: none;
|
|
619
|
-
|
|
620
|
-
box-shadow: 0 0 0 1px var(--lex4-color-primary-focus);
|
|
815
|
+
box-shadow: 0 0 0 1px var(--color-ring);
|
|
621
816
|
}
|
|
622
817
|
.lex4-variable-picker-btn:disabled {
|
|
623
818
|
opacity: 0.5;
|
|
@@ -632,31 +827,31 @@
|
|
|
632
827
|
margin-top: 0.25rem;
|
|
633
828
|
width: min(20rem, calc(100vw - 2rem));
|
|
634
829
|
border-radius: 0.5rem;
|
|
635
|
-
border: 1px solid var(--
|
|
636
|
-
background-color: var(--
|
|
637
|
-
box-shadow:
|
|
638
|
-
|
|
830
|
+
border: 1px solid var(--color-border);
|
|
831
|
+
background-color: var(--color-surface-elevated);
|
|
832
|
+
box-shadow: var(--shadow-lg);
|
|
833
|
+
animation: lex4-fade-in 150ms ease-out;
|
|
639
834
|
}
|
|
640
835
|
|
|
641
836
|
.lex4-variable-picker-search {
|
|
642
837
|
padding: 0.625rem;
|
|
643
|
-
border-bottom: 1px solid var(--
|
|
838
|
+
border-bottom: 1px solid var(--color-border);
|
|
644
839
|
}
|
|
645
840
|
|
|
646
841
|
.lex4-variable-picker-search input {
|
|
647
842
|
width: 100%;
|
|
648
843
|
border-radius: 0.375rem;
|
|
649
|
-
border: 1px solid var(--
|
|
650
|
-
background-color: var(--
|
|
844
|
+
border: 1px solid var(--color-border);
|
|
845
|
+
background-color: var(--color-surface);
|
|
651
846
|
padding: 0.375rem 0.625rem;
|
|
652
847
|
font-size: 0.75rem;
|
|
653
848
|
line-height: 1rem;
|
|
654
|
-
color: var(--
|
|
849
|
+
color: var(--color-foreground);
|
|
655
850
|
}
|
|
656
851
|
.lex4-variable-picker-search input:focus {
|
|
657
852
|
outline: none;
|
|
658
|
-
border-color: var(--
|
|
659
|
-
box-shadow: 0 0 0 1px var(--
|
|
853
|
+
border-color: var(--color-ring);
|
|
854
|
+
box-shadow: 0 0 0 1px var(--color-ring);
|
|
660
855
|
}
|
|
661
856
|
|
|
662
857
|
.lex4-variable-picker-list {
|
|
@@ -669,7 +864,7 @@
|
|
|
669
864
|
padding: 0.25rem 0.5rem;
|
|
670
865
|
font-size: 0.75rem;
|
|
671
866
|
line-height: 1rem;
|
|
672
|
-
color: var(--
|
|
867
|
+
color: var(--color-muted-foreground);
|
|
673
868
|
}
|
|
674
869
|
|
|
675
870
|
.lex4-variable-picker-group-label {
|
|
@@ -678,7 +873,7 @@
|
|
|
678
873
|
font-weight: 600;
|
|
679
874
|
text-transform: uppercase;
|
|
680
875
|
letter-spacing: 0.05em;
|
|
681
|
-
color: var(--
|
|
876
|
+
color: var(--color-muted-foreground);
|
|
682
877
|
}
|
|
683
878
|
|
|
684
879
|
.lex4-variable-picker-option {
|
|
@@ -695,40 +890,56 @@
|
|
|
695
890
|
transition: background-color 150ms;
|
|
696
891
|
}
|
|
697
892
|
.lex4-variable-picker-option:hover {
|
|
698
|
-
background-color: var(--
|
|
893
|
+
background-color: var(--color-secondary);
|
|
699
894
|
}
|
|
700
895
|
|
|
701
896
|
.lex4-variable-picker-key {
|
|
702
897
|
min-width: 0;
|
|
703
898
|
overflow: hidden;
|
|
704
899
|
font-weight: 500;
|
|
705
|
-
color: var(--
|
|
900
|
+
color: var(--color-primary);
|
|
706
901
|
white-space: nowrap;
|
|
707
902
|
text-overflow: ellipsis;
|
|
708
903
|
}
|
|
709
904
|
|
|
710
905
|
.lex4-variable-picker-label {
|
|
711
906
|
text-align: right;
|
|
712
|
-
color: var(--
|
|
907
|
+
color: var(--color-muted-foreground);
|
|
713
908
|
}
|
|
714
909
|
|
|
715
910
|
/* ── Variable chip (inline node) ─────────────────────────── */
|
|
716
911
|
.lex4-variable-chip {
|
|
717
912
|
display: inline-flex;
|
|
718
913
|
align-items: center;
|
|
719
|
-
|
|
720
|
-
border:
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
914
|
+
gap: 0.1875rem;
|
|
915
|
+
border-radius: 0.1875rem;
|
|
916
|
+
border: 1px solid var(--lex4-variable-border, var(--color-border));
|
|
917
|
+
background-color: var(--lex4-variable-bg, color-mix(in srgb, var(--color-surface-elevated) 92%, var(--color-secondary)));
|
|
918
|
+
padding: 0.0625rem 0.3125rem;
|
|
919
|
+
font-size: 10px;
|
|
724
920
|
font-weight: 500;
|
|
725
|
-
color: var(--
|
|
921
|
+
color: var(--color-foreground);
|
|
726
922
|
-webkit-user-select: none;
|
|
727
923
|
-moz-user-select: none;
|
|
728
924
|
user-select: none;
|
|
729
925
|
cursor: default;
|
|
730
926
|
white-space: nowrap;
|
|
731
927
|
margin: 0 0.125rem;
|
|
928
|
+
transition: border-color 150ms, background-color 150ms;
|
|
929
|
+
}
|
|
930
|
+
|
|
931
|
+
.lex4-variable-chip::before {
|
|
932
|
+
content: '';
|
|
933
|
+
display: inline-block;
|
|
934
|
+
width: 4px;
|
|
935
|
+
height: 4px;
|
|
936
|
+
border-radius: 50%;
|
|
937
|
+
background-color: var(--lex4-variable-accent, var(--color-muted-foreground));
|
|
938
|
+
flex-shrink: 0;
|
|
939
|
+
}
|
|
940
|
+
|
|
941
|
+
.lex4-variable-chip:hover {
|
|
942
|
+
border-color: color-mix(in srgb, var(--lex4-variable-accent, var(--color-border-strong)) 40%, var(--color-border));
|
|
732
943
|
}
|
|
733
944
|
|
|
734
945
|
/* ── Document view ───────────────────────────────────────── */
|
|
@@ -737,7 +948,7 @@
|
|
|
737
948
|
flex-direction: column;
|
|
738
949
|
align-items: center;
|
|
739
950
|
gap: 2rem;
|
|
740
|
-
padding: 2rem
|
|
951
|
+
padding: 2rem 3rem 3rem;
|
|
741
952
|
min-height: 100%;
|
|
742
953
|
}
|
|
743
954
|
|
|
@@ -745,8 +956,12 @@
|
|
|
745
956
|
.lex4-page {
|
|
746
957
|
display: flex;
|
|
747
958
|
flex-direction: column;
|
|
748
|
-
background-color: var(--
|
|
749
|
-
|
|
959
|
+
background-color: var(--color-canvas);
|
|
960
|
+
color: var(--color-canvas-foreground);
|
|
961
|
+
box-shadow: var(--shadow-paper);
|
|
962
|
+
border-radius: 0.375rem;
|
|
963
|
+
overflow: hidden;
|
|
964
|
+
animation: lex4-fade-in 300ms ease-out;
|
|
750
965
|
}
|
|
751
966
|
|
|
752
967
|
.lex4-page,
|
|
@@ -784,7 +999,7 @@
|
|
|
784
999
|
margin: 0 0 0.5rem;
|
|
785
1000
|
font-weight: 600;
|
|
786
1001
|
line-height: 1.25;
|
|
787
|
-
color: var(--
|
|
1002
|
+
color: var(--color-foreground);
|
|
788
1003
|
}
|
|
789
1004
|
|
|
790
1005
|
.lex4-heading-h1 {
|
|
@@ -853,17 +1068,18 @@
|
|
|
853
1068
|
|
|
854
1069
|
.lex4-quote {
|
|
855
1070
|
margin: 0;
|
|
856
|
-
border-left: 4px solid var(--
|
|
1071
|
+
border-left: 4px solid var(--color-border);
|
|
857
1072
|
padding-left: 1rem;
|
|
858
|
-
color: var(--
|
|
1073
|
+
color: var(--color-muted-foreground);
|
|
859
1074
|
font-style: italic;
|
|
860
1075
|
}
|
|
861
1076
|
|
|
862
1077
|
.lex4-page-placeholder {
|
|
863
1078
|
position: absolute;
|
|
864
|
-
top: 0;
|
|
1079
|
+
top: 0.25rem;
|
|
865
1080
|
left: 0;
|
|
866
|
-
|
|
1081
|
+
font-size: 0.8125rem;
|
|
1082
|
+
color: color-mix(in srgb, var(--color-muted-foreground) 82%, transparent);
|
|
867
1083
|
pointer-events: none;
|
|
868
1084
|
-webkit-user-select: none;
|
|
869
1085
|
-moz-user-select: none;
|
|
@@ -874,25 +1090,23 @@
|
|
|
874
1090
|
.lex4-page-header {
|
|
875
1091
|
position: relative;
|
|
876
1092
|
flex-shrink: 0;
|
|
877
|
-
|
|
878
|
-
border-
|
|
879
|
-
border-bottom: 1px dashed var(--lex4-color-hf-border-inner);
|
|
1093
|
+
border-top: none;
|
|
1094
|
+
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
|
|
880
1095
|
overflow: clip;
|
|
881
1096
|
}
|
|
882
1097
|
|
|
883
1098
|
.lex4-page-footer {
|
|
884
1099
|
position: relative;
|
|
885
1100
|
flex-shrink: 0;
|
|
886
|
-
|
|
887
|
-
border-
|
|
888
|
-
border-top: 1px dashed var(--lex4-color-hf-border-inner);
|
|
1101
|
+
border-bottom: none;
|
|
1102
|
+
border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
|
|
889
1103
|
overflow: clip;
|
|
890
1104
|
}
|
|
891
1105
|
|
|
892
1106
|
.lex4-page-hf-editable {
|
|
893
1107
|
outline: none;
|
|
894
1108
|
padding: 0.5rem;
|
|
895
|
-
color: var(--
|
|
1109
|
+
color: var(--color-muted-foreground);
|
|
896
1110
|
min-height: 24px;
|
|
897
1111
|
}
|
|
898
1112
|
|
|
@@ -905,13 +1119,136 @@
|
|
|
905
1119
|
top: 0;
|
|
906
1120
|
left: 0;
|
|
907
1121
|
padding: 0.5rem;
|
|
908
|
-
|
|
1122
|
+
font-size: 10px;
|
|
1123
|
+
font-weight: 600;
|
|
1124
|
+
letter-spacing: 0.08em;
|
|
1125
|
+
text-transform: uppercase;
|
|
1126
|
+
color: color-mix(in srgb, var(--color-muted-foreground) 60%, transparent);
|
|
909
1127
|
pointer-events: none;
|
|
910
1128
|
-webkit-user-select: none;
|
|
911
1129
|
-moz-user-select: none;
|
|
912
1130
|
user-select: none;
|
|
913
1131
|
}
|
|
914
1132
|
|
|
1133
|
+
.lex4-page .lex4-page-hf-placeholder {
|
|
1134
|
+
font-family: var(--lex4-ui-font-family);
|
|
1135
|
+
}
|
|
1136
|
+
|
|
1137
|
+
.lex4-variable-create {
|
|
1138
|
+
padding: 0 1rem 1rem;
|
|
1139
|
+
}
|
|
1140
|
+
|
|
1141
|
+
.lex4-editor button.lex4-variable-create-toggle {
|
|
1142
|
+
display: inline-flex;
|
|
1143
|
+
width: 100%;
|
|
1144
|
+
align-items: center;
|
|
1145
|
+
justify-content: center;
|
|
1146
|
+
gap: 0.375rem;
|
|
1147
|
+
border: 1px dashed var(--color-border-strong);
|
|
1148
|
+
border-radius: 0.5rem;
|
|
1149
|
+
background-color: var(--color-surface-elevated);
|
|
1150
|
+
padding: 0.625rem 0.75rem;
|
|
1151
|
+
font-size: 0.625rem;
|
|
1152
|
+
color: var(--color-muted-foreground);
|
|
1153
|
+
transition: background-color 150ms, color 150ms, border-color 150ms;
|
|
1154
|
+
}
|
|
1155
|
+
|
|
1156
|
+
.lex4-editor button.lex4-variable-create-toggle:hover {
|
|
1157
|
+
background-color: var(--color-secondary);
|
|
1158
|
+
color: var(--color-foreground);
|
|
1159
|
+
border-color: var(--color-border);
|
|
1160
|
+
}
|
|
1161
|
+
|
|
1162
|
+
.lex4-variable-create-form {
|
|
1163
|
+
display: flex;
|
|
1164
|
+
flex-direction: column;
|
|
1165
|
+
gap: 0.5rem;
|
|
1166
|
+
border: 1px solid var(--color-border);
|
|
1167
|
+
border-radius: 0.5rem;
|
|
1168
|
+
background-color: var(--color-surface-elevated);
|
|
1169
|
+
padding: 0.75rem;
|
|
1170
|
+
}
|
|
1171
|
+
|
|
1172
|
+
.lex4-variable-create-title {
|
|
1173
|
+
font-size: 0.75rem;
|
|
1174
|
+
font-weight: 600;
|
|
1175
|
+
color: var(--color-foreground);
|
|
1176
|
+
}
|
|
1177
|
+
|
|
1178
|
+
.lex4-variable-create-row {
|
|
1179
|
+
display: grid;
|
|
1180
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
1181
|
+
gap: 0.5rem;
|
|
1182
|
+
}
|
|
1183
|
+
|
|
1184
|
+
.lex4-variable-create-field {
|
|
1185
|
+
display: flex;
|
|
1186
|
+
flex-direction: column;
|
|
1187
|
+
gap: 0.25rem;
|
|
1188
|
+
}
|
|
1189
|
+
|
|
1190
|
+
.lex4-variable-create-field span {
|
|
1191
|
+
font-size: 10px;
|
|
1192
|
+
font-weight: 600;
|
|
1193
|
+
text-transform: uppercase;
|
|
1194
|
+
letter-spacing: 0.05em;
|
|
1195
|
+
color: var(--color-muted-foreground);
|
|
1196
|
+
}
|
|
1197
|
+
|
|
1198
|
+
.lex4-variable-create-field input,
|
|
1199
|
+
.lex4-variable-create-field select {
|
|
1200
|
+
width: 100%;
|
|
1201
|
+
height: 2rem;
|
|
1202
|
+
border: 1px solid var(--color-border);
|
|
1203
|
+
border-radius: 0.375rem;
|
|
1204
|
+
background-color: var(--color-surface);
|
|
1205
|
+
padding: 0.375rem 0.625rem;
|
|
1206
|
+
font-size: 0.6875rem;
|
|
1207
|
+
color: var(--color-foreground);
|
|
1208
|
+
}
|
|
1209
|
+
|
|
1210
|
+
.lex4-variable-create-field input:focus,
|
|
1211
|
+
.lex4-variable-create-field select:focus {
|
|
1212
|
+
outline: none;
|
|
1213
|
+
border-color: var(--color-ring);
|
|
1214
|
+
box-shadow: 0 0 0 1px var(--color-ring);
|
|
1215
|
+
}
|
|
1216
|
+
|
|
1217
|
+
.lex4-variable-create-error {
|
|
1218
|
+
font-size: 0.6875rem;
|
|
1219
|
+
color: var(--color-destructive);
|
|
1220
|
+
}
|
|
1221
|
+
|
|
1222
|
+
.lex4-variable-create-actions {
|
|
1223
|
+
display: flex;
|
|
1224
|
+
align-items: center;
|
|
1225
|
+
justify-content: flex-end;
|
|
1226
|
+
gap: 0.5rem;
|
|
1227
|
+
}
|
|
1228
|
+
|
|
1229
|
+
.lex4-editor button.lex4-variable-create-cancel,
|
|
1230
|
+
.lex4-editor button.lex4-variable-create-submit {
|
|
1231
|
+
height: 1.875rem;
|
|
1232
|
+
border-radius: 0.375rem;
|
|
1233
|
+
padding: 0 0.625rem;
|
|
1234
|
+
font-size: 0.6875rem;
|
|
1235
|
+
font-weight: 500;
|
|
1236
|
+
}
|
|
1237
|
+
|
|
1238
|
+
.lex4-editor button.lex4-variable-create-cancel {
|
|
1239
|
+
color: var(--color-muted-foreground);
|
|
1240
|
+
}
|
|
1241
|
+
|
|
1242
|
+
.lex4-editor button.lex4-variable-create-cancel:hover {
|
|
1243
|
+
background-color: var(--color-secondary);
|
|
1244
|
+
color: var(--color-foreground);
|
|
1245
|
+
}
|
|
1246
|
+
|
|
1247
|
+
.lex4-editor button.lex4-variable-create-submit {
|
|
1248
|
+
background: var(--gradient-brand);
|
|
1249
|
+
color: var(--color-primary-foreground);
|
|
1250
|
+
}
|
|
1251
|
+
|
|
915
1252
|
.lex4-page-counter {
|
|
916
1253
|
position: absolute;
|
|
917
1254
|
right: 0.5rem;
|
|
@@ -919,18 +1256,104 @@
|
|
|
919
1256
|
font-family: var(--lex4-ui-font-family);
|
|
920
1257
|
font-size: 11px;
|
|
921
1258
|
line-height: 1rem;
|
|
922
|
-
color: var(--
|
|
1259
|
+
color: var(--color-muted-foreground);
|
|
923
1260
|
pointer-events: none;
|
|
924
1261
|
-webkit-user-select: none;
|
|
925
1262
|
-moz-user-select: none;
|
|
926
1263
|
user-select: none;
|
|
927
1264
|
}
|
|
928
1265
|
|
|
1266
|
+
/* ── Category-specific token colors ──────────────────────── */
|
|
1267
|
+
|
|
1268
|
+
/* Customer (Blue) */
|
|
1269
|
+
.lex4-variable-chip[data-variable-group="Customer"],
|
|
1270
|
+
.lex4-variable-chip[data-variable-group="customer"] {
|
|
1271
|
+
--lex4-variable-accent: var(--color-token-customer);
|
|
1272
|
+
--lex4-variable-bg: color-mix(in srgb, var(--color-token-customer-bg) 32%, var(--color-surface-elevated));
|
|
1273
|
+
--lex4-variable-border: color-mix(in srgb, var(--color-token-customer) 12%, var(--color-border));
|
|
1274
|
+
}
|
|
1275
|
+
|
|
1276
|
+
[data-variable-group="Customer"] .lex4-variable-badge,
|
|
1277
|
+
[data-variable-group="customer"] .lex4-variable-badge {
|
|
1278
|
+
--lex4-variable-accent: var(--color-token-customer);
|
|
1279
|
+
--lex4-variable-bg: color-mix(in srgb, var(--color-token-customer-bg) 32%, var(--color-surface-elevated));
|
|
1280
|
+
--lex4-variable-border: color-mix(in srgb, var(--color-token-customer) 12%, var(--color-border));
|
|
1281
|
+
}
|
|
1282
|
+
[data-variable-group="Customer"] .lex4-variable-list-item,
|
|
1283
|
+
[data-variable-group="customer"] .lex4-variable-list-item {
|
|
1284
|
+
--lex4-variable-accent: var(--color-token-customer);
|
|
1285
|
+
--lex4-variable-bg: color-mix(in srgb, var(--color-token-customer-bg) 18%, var(--color-surface-elevated));
|
|
1286
|
+
--lex4-variable-border: color-mix(in srgb, var(--color-token-customer) 10%, var(--color-border));
|
|
1287
|
+
}
|
|
1288
|
+
|
|
1289
|
+
/* Proposal (Orange) */
|
|
1290
|
+
.lex4-variable-chip[data-variable-group="Proposal"],
|
|
1291
|
+
.lex4-variable-chip[data-variable-group="proposal"] {
|
|
1292
|
+
--lex4-variable-accent: var(--color-token-proposal);
|
|
1293
|
+
--lex4-variable-bg: color-mix(in srgb, var(--color-token-proposal-bg) 32%, var(--color-surface-elevated));
|
|
1294
|
+
--lex4-variable-border: color-mix(in srgb, var(--color-token-proposal) 12%, var(--color-border));
|
|
1295
|
+
}
|
|
1296
|
+
|
|
1297
|
+
[data-variable-group="Proposal"] .lex4-variable-badge,
|
|
1298
|
+
[data-variable-group="proposal"] .lex4-variable-badge {
|
|
1299
|
+
--lex4-variable-accent: var(--color-token-proposal);
|
|
1300
|
+
--lex4-variable-bg: color-mix(in srgb, var(--color-token-proposal-bg) 32%, var(--color-surface-elevated));
|
|
1301
|
+
--lex4-variable-border: color-mix(in srgb, var(--color-token-proposal) 12%, var(--color-border));
|
|
1302
|
+
}
|
|
1303
|
+
[data-variable-group="Proposal"] .lex4-variable-list-item,
|
|
1304
|
+
[data-variable-group="proposal"] .lex4-variable-list-item {
|
|
1305
|
+
--lex4-variable-accent: var(--color-token-proposal);
|
|
1306
|
+
--lex4-variable-bg: color-mix(in srgb, var(--color-token-proposal-bg) 18%, var(--color-surface-elevated));
|
|
1307
|
+
--lex4-variable-border: color-mix(in srgb, var(--color-token-proposal) 10%, var(--color-border));
|
|
1308
|
+
}
|
|
1309
|
+
|
|
1310
|
+
/* Seller (Green) */
|
|
1311
|
+
.lex4-variable-chip[data-variable-group="Seller"],
|
|
1312
|
+
.lex4-variable-chip[data-variable-group="seller"] {
|
|
1313
|
+
--lex4-variable-accent: var(--color-token-seller);
|
|
1314
|
+
--lex4-variable-bg: color-mix(in srgb, var(--color-token-seller-bg) 32%, var(--color-surface-elevated));
|
|
1315
|
+
--lex4-variable-border: color-mix(in srgb, var(--color-token-seller) 12%, var(--color-border));
|
|
1316
|
+
}
|
|
1317
|
+
|
|
1318
|
+
[data-variable-group="Seller"] .lex4-variable-badge,
|
|
1319
|
+
[data-variable-group="seller"] .lex4-variable-badge {
|
|
1320
|
+
--lex4-variable-accent: var(--color-token-seller);
|
|
1321
|
+
--lex4-variable-bg: color-mix(in srgb, var(--color-token-seller-bg) 32%, var(--color-surface-elevated));
|
|
1322
|
+
--lex4-variable-border: color-mix(in srgb, var(--color-token-seller) 12%, var(--color-border));
|
|
1323
|
+
}
|
|
1324
|
+
[data-variable-group="Seller"] .lex4-variable-list-item,
|
|
1325
|
+
[data-variable-group="seller"] .lex4-variable-list-item {
|
|
1326
|
+
--lex4-variable-accent: var(--color-token-seller);
|
|
1327
|
+
--lex4-variable-bg: color-mix(in srgb, var(--color-token-seller-bg) 18%, var(--color-surface-elevated));
|
|
1328
|
+
--lex4-variable-border: color-mix(in srgb, var(--color-token-seller) 10%, var(--color-border));
|
|
1329
|
+
}
|
|
1330
|
+
|
|
1331
|
+
/* Company (Slate) */
|
|
1332
|
+
.lex4-variable-chip[data-variable-group="Company"],
|
|
1333
|
+
.lex4-variable-chip[data-variable-group="company"] {
|
|
1334
|
+
--lex4-variable-accent: var(--color-token-company);
|
|
1335
|
+
--lex4-variable-bg: color-mix(in srgb, var(--color-token-company-bg) 32%, var(--color-surface-elevated));
|
|
1336
|
+
--lex4-variable-border: color-mix(in srgb, var(--color-token-company) 12%, var(--color-border));
|
|
1337
|
+
}
|
|
1338
|
+
|
|
1339
|
+
[data-variable-group="Company"] .lex4-variable-badge,
|
|
1340
|
+
[data-variable-group="company"] .lex4-variable-badge {
|
|
1341
|
+
--lex4-variable-accent: var(--color-token-company);
|
|
1342
|
+
--lex4-variable-bg: color-mix(in srgb, var(--color-token-company-bg) 32%, var(--color-surface-elevated));
|
|
1343
|
+
--lex4-variable-border: color-mix(in srgb, var(--color-token-company) 12%, var(--color-border));
|
|
1344
|
+
}
|
|
1345
|
+
[data-variable-group="Company"] .lex4-variable-list-item,
|
|
1346
|
+
[data-variable-group="company"] .lex4-variable-list-item {
|
|
1347
|
+
--lex4-variable-accent: var(--color-token-company);
|
|
1348
|
+
--lex4-variable-bg: color-mix(in srgb, var(--color-token-company-bg) 18%, var(--color-surface-elevated));
|
|
1349
|
+
--lex4-variable-border: color-mix(in srgb, var(--color-token-company) 10%, var(--color-border));
|
|
1350
|
+
}
|
|
1351
|
+
|
|
929
1352
|
/* ── Global selection ────────────────────────────────────── */
|
|
930
1353
|
.lex4-editor[data-global-selection-active="true"] [data-testid^="page-body-"] [contenteditable="true"] {
|
|
931
|
-
background-color: var(--
|
|
1354
|
+
background-color: var(--color-selection-bg) !important;
|
|
932
1355
|
caret-color: transparent;
|
|
933
|
-
color: var(--
|
|
1356
|
+
color: var(--color-selection-text) !important;
|
|
934
1357
|
}
|
|
935
1358
|
|
|
936
1359
|
.lex4-editor[data-global-selection-active="true"] [data-testid^="page-body-"] [contenteditable="true"] p,
|