@rovela-ai/sdk 0.15.4 → 0.16.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.
|
@@ -7,8 +7,9 @@
|
|
|
7
7
|
* Usage: Wrap admin content with class="rovela-admin-theme"
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
-
/*
|
|
11
|
-
@import
|
|
10
|
+
/* Plus Jakarta Sans arrives via next/font (template app/admin/layout.tsx sets
|
|
11
|
+
--admin-font-jakarta on the segment). No render-blocking @import — the
|
|
12
|
+
system stack below is the graceful fallback for stores on older templates. */
|
|
12
13
|
|
|
13
14
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
14
15
|
DESIGN TOKENS - CSS Variables
|
|
@@ -19,11 +20,18 @@
|
|
|
19
20
|
COLOR PALETTE - Rovela Brand
|
|
20
21
|
───────────────────────────────────────────────────────────────────────── */
|
|
21
22
|
|
|
22
|
-
/* Primary - Emerald
|
|
23
|
+
/* Primary - Emerald. The accent is SCARCE by design: one primary button per
|
|
24
|
+
view, active nav, links. Status colors never borrow it. */
|
|
23
25
|
--admin-primary: 163 86% 37%; /* #0CAF7D */
|
|
24
26
|
--admin-primary-hover: 163 86% 32%; /* Darker on hover */
|
|
25
|
-
--admin-primary-
|
|
27
|
+
--admin-primary-active: 163 88% 28%; /* Pressed */
|
|
28
|
+
--admin-primary-light: 163 60% 93%; /* Tint for active nav / selections */
|
|
26
29
|
--admin-primary-foreground: 0 0% 100%; /* White text on primary */
|
|
30
|
+
/* Accent alias — several class families (setup guide, highlights) reference
|
|
31
|
+
--admin-accent; it was previously UNDEFINED and those tints silently
|
|
32
|
+
failed. It aliases primary: one accent, everywhere. */
|
|
33
|
+
--admin-accent: 163 86% 37%;
|
|
34
|
+
--admin-accent-deep: 163 88% 26%; /* Readable accent text on tints */
|
|
27
35
|
|
|
28
36
|
/* Backgrounds - Aligned with Rovela platform */
|
|
29
37
|
--admin-background: 36 36% 95%; /* Warm Cream #F7F3ED - matches platform */
|
|
@@ -32,15 +40,16 @@
|
|
|
32
40
|
--admin-sidebar: 36 20% 97%; /* Very light warm gray - blends with content */
|
|
33
41
|
--admin-sidebar-hover: 36 15% 93%; /* Subtle hover */
|
|
34
42
|
--admin-sidebar-border: 36 15% 88%; /* Very subtle border */
|
|
35
|
-
--admin-sidebar-active: 163
|
|
36
|
-
--admin-sidebar-active-text: 163
|
|
37
|
-
|
|
38
|
-
/* Text Colors
|
|
39
|
-
|
|
40
|
-
--admin-foreground
|
|
41
|
-
--admin-foreground-
|
|
42
|
-
--admin-
|
|
43
|
-
--admin-sidebar-foreground
|
|
43
|
+
--admin-sidebar-active: 163 60% 93%; /* Tinted emerald for active */
|
|
44
|
+
--admin-sidebar-active-text: 163 88% 26%; /* Deep emerald — readable on tint */
|
|
45
|
+
|
|
46
|
+
/* Text Colors — warm ink family (matches the platform's #2D3436 lineage;
|
|
47
|
+
the previous cool 220-hue grays clashed with the cream ground). */
|
|
48
|
+
--admin-foreground: 190 12% 17%; /* Warm near-black ink */
|
|
49
|
+
--admin-foreground-muted: 190 6% 42%; /* Secondary text (4.5:1 on cream) */
|
|
50
|
+
--admin-foreground-subtle: 190 5% 58%; /* Tertiary/placeholder */
|
|
51
|
+
--admin-sidebar-foreground: 190 10% 22%; /* Dark text for light sidebar */
|
|
52
|
+
--admin-sidebar-foreground-muted: 190 6% 44%; /* Medium gray for inactive */
|
|
44
53
|
--admin-sidebar-logo-filter: none; /* Colored logo on light sidebar */
|
|
45
54
|
|
|
46
55
|
/* Borders - Warm gray to match Rovela platform */
|
|
@@ -48,39 +57,53 @@
|
|
|
48
57
|
--admin-border-hover: 36 15% 82%; /* Darker on hover */
|
|
49
58
|
--admin-border-focus: 163 86% 37%; /* Primary on focus */
|
|
50
59
|
|
|
51
|
-
/* Status
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
--admin-
|
|
56
|
-
--admin-
|
|
57
|
-
--admin-
|
|
58
|
-
--admin-
|
|
59
|
-
--admin-
|
|
60
|
-
--admin-
|
|
61
|
-
--admin-
|
|
62
|
-
--admin-
|
|
63
|
-
--admin-
|
|
60
|
+
/* Status TONES — ONE recipe everywhere: `-light` = tinted background,
|
|
61
|
+
`-dark` = darker readable foreground (4.5:1 on its tint). Badges,
|
|
62
|
+
alerts and status chips all consume these pairs; never raw base colors
|
|
63
|
+
as text and never `base / 0.1` alpha tints (the old second recipe). */
|
|
64
|
+
--admin-success: 160 84% 33%; /* Green base (icons, accents) */
|
|
65
|
+
--admin-success-light: 152 48% 92%; /* #E2F5EC tinted bg */
|
|
66
|
+
--admin-success-dark: 159 83% 26%; /* #0B7A57 readable fg */
|
|
67
|
+
--admin-warning: 40 90% 50%; /* Amber base */
|
|
68
|
+
--admin-warning-light: 40 86% 92%; /* #FCF0D8 tinted bg */
|
|
69
|
+
--admin-warning-dark: 39 70% 31%; /* #8A6116 readable fg */
|
|
70
|
+
--admin-error: 4 74% 52%; /* Red base */
|
|
71
|
+
--admin-error-light: 5 81% 94%; /* #FCE5E3 tinted bg */
|
|
72
|
+
--admin-error-dark: 5 61% 44%; /* #B3372C readable fg */
|
|
73
|
+
--admin-error-foreground: 0 0% 100%; /* On solid error surfaces */
|
|
74
|
+
--admin-info: 210 70% 46%; /* Blue base */
|
|
75
|
+
--admin-info-light: 209 70% 94%; /* #E3EFFA tinted bg */
|
|
76
|
+
--admin-info-dark: 211 63% 40%; /* #2563A8 readable fg */
|
|
77
|
+
/* Attention — "needs a human" (unfulfilled, action required). Distinct from
|
|
78
|
+
warning: olive, calmer, non-alarming. New in the 2026-07 redesign. */
|
|
79
|
+
--admin-attention: 74 55% 40%;
|
|
80
|
+
--admin-attention-light: 70 48% 90%; /* #EEF2D9 tinted bg */
|
|
81
|
+
--admin-attention-dark: 71 58% 27%; /* #5F6E1D readable fg */
|
|
64
82
|
|
|
65
83
|
/* ─────────────────────────────────────────────────────────────────────────
|
|
66
84
|
TYPOGRAPHY - Plus Jakarta Sans
|
|
67
85
|
───────────────────────────────────────────────────────────────────────── */
|
|
68
|
-
--admin-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
86
|
+
--admin-font-sans: var(--admin-font-jakarta, 'Plus Jakarta Sans'), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
69
87
|
--admin-font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;
|
|
70
88
|
|
|
71
89
|
/* Override store font variables to use Rovela's Plus Jakarta Sans in admin */
|
|
72
90
|
--font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
73
91
|
--font-body: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
74
92
|
|
|
75
|
-
/* Font Sizes
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
--admin-text-
|
|
81
|
-
--admin-text-
|
|
82
|
-
--admin-text-
|
|
83
|
-
--admin-text-
|
|
93
|
+
/* Font Sizes — the Polaris inversion (2026-07 redesign): headings barely
|
|
94
|
+
bigger than body, hierarchy through WEIGHT. 13px is the working size;
|
|
95
|
+
20px page titles are the only large text. Deliberate collapses:
|
|
96
|
+
2xl == 3xl (both 20px) so legacy consumers of either land on the same
|
|
97
|
+
page-title size. */
|
|
98
|
+
--admin-text-2xs: 0.6875rem; /* 11px - micro (counters, footnotes) */
|
|
99
|
+
--admin-text-xs: 0.75rem; /* 12px - meta, badges, helper text */
|
|
100
|
+
--admin-text-sm: 0.8125rem; /* 13px - body & tables (working size) */
|
|
101
|
+
--admin-text-base: 0.8125rem; /* 13px - base for admin (was 14) */
|
|
102
|
+
--admin-text-md: 0.875rem; /* 14px - card/section headings */
|
|
103
|
+
--admin-text-lg: 0.9375rem; /* 15px - modal titles, prominent rows */
|
|
104
|
+
--admin-text-xl: 1rem; /* 16px - rare emphasis */
|
|
105
|
+
--admin-text-2xl: 1.25rem; /* 20px - stat values, page titles */
|
|
106
|
+
--admin-text-3xl: 1.25rem; /* 20px - page titles (was 26) */
|
|
84
107
|
|
|
85
108
|
/* Font Weights */
|
|
86
109
|
--admin-font-normal: 400;
|
|
@@ -93,10 +116,10 @@
|
|
|
93
116
|
--admin-leading-normal: 1.5;
|
|
94
117
|
--admin-leading-relaxed: 1.625;
|
|
95
118
|
|
|
96
|
-
/* Letter Spacing */
|
|
97
|
-
--admin-tracking-tight: -0.
|
|
119
|
+
/* Letter Spacing — negative tracking only at 20px+; eyebrows get +0.06em */
|
|
120
|
+
--admin-tracking-tight: -0.01em;
|
|
98
121
|
--admin-tracking-normal: 0;
|
|
99
|
-
--admin-tracking-wide: 0.
|
|
122
|
+
--admin-tracking-wide: 0.06em;
|
|
100
123
|
|
|
101
124
|
/* ─────────────────────────────────────────────────────────────────────────
|
|
102
125
|
SPACING SCALE (8px base)
|
|
@@ -123,13 +146,17 @@
|
|
|
123
146
|
/* ─────────────────────────────────────────────────────────────────────────
|
|
124
147
|
BORDERS & RADIUS - Aligned with Rovela platform scale
|
|
125
148
|
───────────────────────────────────────────────────────────────────────── */
|
|
149
|
+
/* One radius language (2026-07 redesign): 6px controls & badges, 10px
|
|
150
|
+
cards & tables, 12px modals. Never larger on functional surfaces — the
|
|
151
|
+
oversized-radius look is the #1 generic-dashboard tell. sm == md is a
|
|
152
|
+
deliberate collapse (both are "control" radius). */
|
|
126
153
|
--admin-radius-none: 0;
|
|
127
|
-
--admin-radius-xs: 0.25rem; /* 4px -
|
|
128
|
-
--admin-radius-sm: 0.
|
|
129
|
-
--admin-radius-md: 0.
|
|
130
|
-
--admin-radius-lg:
|
|
131
|
-
--admin-radius-xl:
|
|
132
|
-
--admin-radius-2xl:
|
|
154
|
+
--admin-radius-xs: 0.25rem; /* 4px - tiny elements */
|
|
155
|
+
--admin-radius-sm: 0.375rem; /* 6px - controls, badges, inputs */
|
|
156
|
+
--admin-radius-md: 0.375rem; /* 6px - buttons (was 12) */
|
|
157
|
+
--admin-radius-lg: 0.625rem; /* 10px - cards, tables (was 16) */
|
|
158
|
+
--admin-radius-xl: 0.75rem; /* 12px - modals (was 24) */
|
|
159
|
+
--admin-radius-2xl: 1rem; /* 16px (was 32) */
|
|
133
160
|
--admin-radius-full: 9999px; /* Pills, avatars */
|
|
134
161
|
|
|
135
162
|
/* Border Widths */
|
|
@@ -139,19 +166,22 @@
|
|
|
139
166
|
/* ─────────────────────────────────────────────────────────────────────────
|
|
140
167
|
SHADOWS - Aligned with Rovela platform shadow system
|
|
141
168
|
───────────────────────────────────────────────────────────────────────── */
|
|
142
|
-
/* Fine-grained elevation scale
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
--admin-shadow-
|
|
146
|
-
--admin-shadow-
|
|
147
|
-
--admin-shadow-
|
|
148
|
-
--admin-shadow-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
--shadow-rovela-
|
|
169
|
+
/* Fine-grained elevation scale — whispers, not drops. Hairline borders do
|
|
170
|
+
the separating; shadows only hint at elevation (cards) or float layers
|
|
171
|
+
(dropdowns, modals). */
|
|
172
|
+
--admin-shadow-xs: 0 1px 2px 0 rgb(24 34 33 / 0.03);
|
|
173
|
+
--admin-shadow-sm: 0 1px 2px rgb(24 34 33 / 0.04);
|
|
174
|
+
--admin-shadow-md: 0 2px 8px -2px rgb(24 34 33 / 0.08);
|
|
175
|
+
--admin-shadow-lg: 0 8px 24px -8px rgb(24 34 33 / 0.14);
|
|
176
|
+
--admin-shadow-xl: 0 16px 40px -12px rgb(24 34 33 / 0.18);
|
|
177
|
+
--admin-shadow-2xl: 0 24px 48px -12px rgb(24 34 33 / 0.22);
|
|
178
|
+
|
|
179
|
+
/* Platform shadow aliases — SAME values as the scale above (they were a
|
|
180
|
+
duplicated parallel system; now they alias). */
|
|
181
|
+
--shadow-rovela-sm: var(--admin-shadow-sm);
|
|
182
|
+
--shadow-rovela-md: var(--admin-shadow-md);
|
|
183
|
+
--shadow-rovela-lg: var(--admin-shadow-lg);
|
|
184
|
+
--shadow-rovela-xl: var(--admin-shadow-xl);
|
|
155
185
|
|
|
156
186
|
/* Colored Shadows - Primary emerald glow */
|
|
157
187
|
--admin-shadow-primary-sm: 0 2px 8px 0 hsl(163 86% 37% / 0.12);
|
|
@@ -168,17 +198,21 @@
|
|
|
168
198
|
/* ─────────────────────────────────────────────────────────────────────────
|
|
169
199
|
TRANSITIONS & ANIMATIONS - Aligned with Rovela platform timing
|
|
170
200
|
───────────────────────────────────────────────────────────────────────── */
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
--admin-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
--admin-transition-
|
|
178
|
-
--admin-transition-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
--admin-transition-
|
|
201
|
+
/* Snappy, decisive timing (2026-07 redesign): 140ms for color/state
|
|
202
|
+
feedback, 180ms for anything that moves. 250ms read as laggy at admin
|
|
203
|
+
interaction density. */
|
|
204
|
+
--admin-ease: cubic-bezier(0.2, 0, 0.2, 1);
|
|
205
|
+
--admin-transition-fast: 140ms var(--admin-ease);
|
|
206
|
+
--admin-transition-base: 180ms var(--admin-ease);
|
|
207
|
+
--admin-transition-slow: 280ms var(--admin-ease);
|
|
208
|
+
--admin-transition-slower: 360ms var(--admin-ease);
|
|
209
|
+
|
|
210
|
+
/* Specific transitions */
|
|
211
|
+
--admin-transition-colors: color 140ms var(--admin-ease), background-color 140ms var(--admin-ease), border-color 140ms var(--admin-ease), fill 140ms var(--admin-ease), stroke 140ms var(--admin-ease);
|
|
212
|
+
--admin-transition-opacity: opacity 140ms var(--admin-ease);
|
|
213
|
+
--admin-transition-shadow: box-shadow 180ms var(--admin-ease);
|
|
214
|
+
--admin-transition-transform: transform 180ms var(--admin-ease);
|
|
215
|
+
--admin-transition-all: color 140ms var(--admin-ease), background-color 140ms var(--admin-ease), border-color 140ms var(--admin-ease), box-shadow 180ms var(--admin-ease), transform 120ms var(--admin-ease), opacity 140ms var(--admin-ease);
|
|
182
216
|
|
|
183
217
|
/* Rovela Easing - matches platform timing */
|
|
184
218
|
--admin-ease-rovela: cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
@@ -221,230 +255,13 @@
|
|
|
221
255
|
}
|
|
222
256
|
|
|
223
257
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
224
|
-
DARK MODE
|
|
258
|
+
NO DARK MODE — deliberate (2026-07 redesign).
|
|
259
|
+
The Rovela platform is light-only (forcedTheme="light"); the admin matches.
|
|
260
|
+
The previous dark support was ~210 triplicated lines (media query + .dark
|
|
261
|
+
class + .dark ancestor) that fractured the brand and doubled the QA surface.
|
|
262
|
+
Do not reintroduce without a platform-wide dark-mode decision.
|
|
225
263
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
226
264
|
|
|
227
|
-
/* Dark mode via prefers-color-scheme media query */
|
|
228
|
-
@media (prefers-color-scheme: dark) {
|
|
229
|
-
.rovela-admin-theme:not(.light) {
|
|
230
|
-
/* Backgrounds - Dark blue-gray palette */
|
|
231
|
-
--admin-background: 200 10% 10%; /* Dark blue-gray */
|
|
232
|
-
--admin-background-subtle: 200 10% 14%; /* Slightly lighter */
|
|
233
|
-
--admin-card: 200 10% 14%; /* Card surfaces */
|
|
234
|
-
--admin-sidebar: 200 10% 12%; /* Slightly lighter than content bg */
|
|
235
|
-
--admin-sidebar-hover: 200 10% 18%; /* Visible hover */
|
|
236
|
-
--admin-sidebar-border: 200 10% 20%; /* Subtle border */
|
|
237
|
-
--admin-sidebar-active: 163 86% 15%; /* Dark primary bg for active */
|
|
238
|
-
--admin-sidebar-active-text: 163 86% 45%; /* Primary color text */
|
|
239
|
-
|
|
240
|
-
/* Text Colors - Inverted for dark mode */
|
|
241
|
-
--admin-foreground: 36 36% 95%; /* Cream text */
|
|
242
|
-
--admin-foreground-muted: 196 6% 60%; /* Muted text */
|
|
243
|
-
--admin-foreground-subtle: 196 6% 50%; /* Subtle text */
|
|
244
|
-
--admin-sidebar-foreground: 200 10% 90%; /* Light text for dark sidebar */
|
|
245
|
-
--admin-sidebar-foreground-muted: 200 10% 60%; /* Muted gray for inactive */
|
|
246
|
-
--admin-sidebar-logo-filter: brightness(0) invert(1); /* White logo on dark sidebar */
|
|
247
|
-
|
|
248
|
-
/* Primary - Brighter emerald for dark mode */
|
|
249
|
-
--admin-primary: 163 86% 45%; /* Brighter emerald */
|
|
250
|
-
--admin-primary-hover: 163 86% 50%; /* Even brighter on hover */
|
|
251
|
-
--admin-primary-light: 163 86% 20%; /* Muted primary for backgrounds */
|
|
252
|
-
--admin-primary-foreground: 200 10% 10%; /* Dark text on primary */
|
|
253
|
-
|
|
254
|
-
/* Borders - Darker warm gray */
|
|
255
|
-
--admin-border: 200 10% 20%; /* Dark border */
|
|
256
|
-
--admin-border-hover: 200 10% 25%; /* Slightly lighter on hover */
|
|
257
|
-
--admin-border-focus: 163 86% 45%; /* Brighter primary on focus */
|
|
258
|
-
|
|
259
|
-
/* Status Colors - Adjusted for dark mode visibility */
|
|
260
|
-
--admin-success: 168 100% 40%; /* Brighter teal */
|
|
261
|
-
--admin-success-light: 168 100% 15%; /* Dark teal bg */
|
|
262
|
-
--admin-success-dark: 168 100% 60%; /* Light teal text */
|
|
263
|
-
--admin-warning: 43 97% 50%; /* Adjusted yellow */
|
|
264
|
-
--admin-warning-light: 43 97% 15%; /* Dark yellow bg */
|
|
265
|
-
--admin-warning-dark: 43 97% 70%; /* Light yellow text */
|
|
266
|
-
--admin-error: 0 100% 65%; /* Brighter red */
|
|
267
|
-
--admin-error-light: 0 100% 15%; /* Dark red bg */
|
|
268
|
-
--admin-error-dark: 0 100% 75%; /* Light red text */
|
|
269
|
-
--admin-info: 199 89% 55%; /* Brighter blue */
|
|
270
|
-
--admin-info-light: 199 89% 15%; /* Dark blue bg */
|
|
271
|
-
--admin-info-dark: 199 89% 70%; /* Light blue text */
|
|
272
|
-
|
|
273
|
-
/* Shadows - More visible in dark mode */
|
|
274
|
-
--admin-shadow-sm: 0 2px 4px rgb(0 0 0 / 0.3);
|
|
275
|
-
--admin-shadow-md: 0 4px 12px rgb(0 0 0 / 0.4);
|
|
276
|
-
--admin-shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
|
|
277
|
-
--admin-shadow-xl: 0 16px 48px rgb(0 0 0 / 0.6);
|
|
278
|
-
|
|
279
|
-
/* Standard variable mappings for dark mode */
|
|
280
|
-
--background: var(--admin-background);
|
|
281
|
-
--foreground: var(--admin-foreground);
|
|
282
|
-
--card: var(--admin-card);
|
|
283
|
-
--card-foreground: var(--admin-foreground);
|
|
284
|
-
--popover: var(--admin-card);
|
|
285
|
-
--popover-foreground: var(--admin-foreground);
|
|
286
|
-
--primary: var(--admin-primary);
|
|
287
|
-
--primary-foreground: var(--admin-primary-foreground);
|
|
288
|
-
--secondary: var(--admin-background-subtle);
|
|
289
|
-
--secondary-foreground: var(--admin-foreground);
|
|
290
|
-
--muted: var(--admin-background-subtle);
|
|
291
|
-
--muted-foreground: var(--admin-foreground-muted);
|
|
292
|
-
--accent: var(--admin-primary-light);
|
|
293
|
-
--accent-foreground: var(--admin-primary);
|
|
294
|
-
--border: var(--admin-border);
|
|
295
|
-
--input: var(--admin-border);
|
|
296
|
-
--ring: var(--admin-primary);
|
|
297
|
-
--destructive: var(--admin-error);
|
|
298
|
-
--destructive-foreground: 0 0% 100%;
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
/* Explicit dark mode class (for manual toggle) */
|
|
303
|
-
.rovela-admin-theme.dark {
|
|
304
|
-
/* Backgrounds - Dark blue-gray palette */
|
|
305
|
-
--admin-background: 200 10% 10%;
|
|
306
|
-
--admin-background-subtle: 200 10% 14%;
|
|
307
|
-
--admin-card: 200 10% 14%;
|
|
308
|
-
--admin-sidebar: 200 10% 12%; /* Slightly lighter than content bg */
|
|
309
|
-
--admin-sidebar-hover: 200 10% 18%; /* Visible hover */
|
|
310
|
-
--admin-sidebar-border: 200 10% 20%; /* Subtle border */
|
|
311
|
-
--admin-sidebar-active: 163 86% 15%; /* Dark primary bg for active */
|
|
312
|
-
--admin-sidebar-active-text: 163 86% 45%; /* Primary color text */
|
|
313
|
-
|
|
314
|
-
/* Text Colors */
|
|
315
|
-
--admin-foreground: 36 36% 95%;
|
|
316
|
-
--admin-foreground-muted: 196 6% 60%;
|
|
317
|
-
--admin-foreground-subtle: 196 6% 50%;
|
|
318
|
-
--admin-sidebar-foreground: 200 10% 90%; /* Light text for dark sidebar */
|
|
319
|
-
--admin-sidebar-foreground-muted: 200 10% 60%; /* Muted gray for inactive */
|
|
320
|
-
--admin-sidebar-logo-filter: brightness(0) invert(1); /* White logo on dark sidebar */
|
|
321
|
-
|
|
322
|
-
/* Primary */
|
|
323
|
-
--admin-primary: 163 86% 45%;
|
|
324
|
-
--admin-primary-hover: 163 86% 50%;
|
|
325
|
-
--admin-primary-light: 163 86% 20%;
|
|
326
|
-
--admin-primary-foreground: 200 10% 10%;
|
|
327
|
-
|
|
328
|
-
/* Borders */
|
|
329
|
-
--admin-border: 200 10% 20%;
|
|
330
|
-
--admin-border-hover: 200 10% 25%;
|
|
331
|
-
--admin-border-focus: 163 86% 45%;
|
|
332
|
-
|
|
333
|
-
/* Status Colors */
|
|
334
|
-
--admin-success: 168 100% 40%;
|
|
335
|
-
--admin-success-light: 168 100% 15%;
|
|
336
|
-
--admin-success-dark: 168 100% 60%;
|
|
337
|
-
--admin-warning: 43 97% 50%;
|
|
338
|
-
--admin-warning-light: 43 97% 15%;
|
|
339
|
-
--admin-warning-dark: 43 97% 70%;
|
|
340
|
-
--admin-error: 0 100% 65%;
|
|
341
|
-
--admin-error-light: 0 100% 15%;
|
|
342
|
-
--admin-error-dark: 0 100% 75%;
|
|
343
|
-
--admin-info: 199 89% 55%;
|
|
344
|
-
--admin-info-light: 199 89% 15%;
|
|
345
|
-
--admin-info-dark: 199 89% 70%;
|
|
346
|
-
|
|
347
|
-
/* Shadows */
|
|
348
|
-
--admin-shadow-sm: 0 2px 4px rgb(0 0 0 / 0.3);
|
|
349
|
-
--admin-shadow-md: 0 4px 12px rgb(0 0 0 / 0.4);
|
|
350
|
-
--admin-shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
|
|
351
|
-
--admin-shadow-xl: 0 16px 48px rgb(0 0 0 / 0.6);
|
|
352
|
-
|
|
353
|
-
/* Standard variable mappings */
|
|
354
|
-
--background: var(--admin-background);
|
|
355
|
-
--foreground: var(--admin-foreground);
|
|
356
|
-
--card: var(--admin-card);
|
|
357
|
-
--card-foreground: var(--admin-foreground);
|
|
358
|
-
--popover: var(--admin-card);
|
|
359
|
-
--popover-foreground: var(--admin-foreground);
|
|
360
|
-
--primary: var(--admin-primary);
|
|
361
|
-
--primary-foreground: var(--admin-primary-foreground);
|
|
362
|
-
--secondary: var(--admin-background-subtle);
|
|
363
|
-
--secondary-foreground: var(--admin-foreground);
|
|
364
|
-
--muted: var(--admin-background-subtle);
|
|
365
|
-
--muted-foreground: var(--admin-foreground-muted);
|
|
366
|
-
--accent: var(--admin-primary-light);
|
|
367
|
-
--accent-foreground: var(--admin-primary);
|
|
368
|
-
--border: var(--admin-border);
|
|
369
|
-
--input: var(--admin-border);
|
|
370
|
-
--ring: var(--admin-primary);
|
|
371
|
-
--destructive: var(--admin-error);
|
|
372
|
-
--destructive-foreground: 0 0% 100%;
|
|
373
|
-
}
|
|
374
|
-
|
|
375
|
-
/* Dark mode when .dark class is on ancestor (next-themes pattern) */
|
|
376
|
-
.dark .rovela-admin-theme {
|
|
377
|
-
/* Backgrounds - Dark blue-gray palette */
|
|
378
|
-
--admin-background: 200 10% 10%;
|
|
379
|
-
--admin-background-subtle: 200 10% 14%;
|
|
380
|
-
--admin-card: 200 10% 14%;
|
|
381
|
-
--admin-sidebar: 200 10% 12%; /* Slightly lighter than content bg */
|
|
382
|
-
--admin-sidebar-hover: 200 10% 18%; /* Visible hover */
|
|
383
|
-
--admin-sidebar-border: 200 10% 20%; /* Subtle border */
|
|
384
|
-
--admin-sidebar-active: 163 86% 15%; /* Dark primary bg for active */
|
|
385
|
-
--admin-sidebar-active-text: 163 86% 45%; /* Primary color text */
|
|
386
|
-
|
|
387
|
-
/* Text Colors */
|
|
388
|
-
--admin-foreground: 36 36% 95%;
|
|
389
|
-
--admin-foreground-muted: 196 6% 60%;
|
|
390
|
-
--admin-foreground-subtle: 196 6% 50%;
|
|
391
|
-
--admin-sidebar-foreground: 200 10% 90%; /* Light text for dark sidebar */
|
|
392
|
-
--admin-sidebar-foreground-muted: 200 10% 60%; /* Muted gray for inactive */
|
|
393
|
-
--admin-sidebar-logo-filter: brightness(0) invert(1); /* White logo on dark sidebar */
|
|
394
|
-
|
|
395
|
-
/* Primary */
|
|
396
|
-
--admin-primary: 163 86% 45%;
|
|
397
|
-
--admin-primary-hover: 163 86% 50%;
|
|
398
|
-
--admin-primary-light: 163 86% 20%;
|
|
399
|
-
--admin-primary-foreground: 200 10% 10%;
|
|
400
|
-
|
|
401
|
-
/* Borders */
|
|
402
|
-
--admin-border: 200 10% 20%;
|
|
403
|
-
--admin-border-hover: 200 10% 25%;
|
|
404
|
-
--admin-border-focus: 163 86% 45%;
|
|
405
|
-
|
|
406
|
-
/* Status Colors */
|
|
407
|
-
--admin-success: 168 100% 40%;
|
|
408
|
-
--admin-success-light: 168 100% 15%;
|
|
409
|
-
--admin-success-dark: 168 100% 60%;
|
|
410
|
-
--admin-warning: 43 97% 50%;
|
|
411
|
-
--admin-warning-light: 43 97% 15%;
|
|
412
|
-
--admin-warning-dark: 43 97% 70%;
|
|
413
|
-
--admin-error: 0 100% 65%;
|
|
414
|
-
--admin-error-light: 0 100% 15%;
|
|
415
|
-
--admin-error-dark: 0 100% 75%;
|
|
416
|
-
--admin-info: 199 89% 55%;
|
|
417
|
-
--admin-info-light: 199 89% 15%;
|
|
418
|
-
--admin-info-dark: 199 89% 70%;
|
|
419
|
-
|
|
420
|
-
/* Shadows */
|
|
421
|
-
--admin-shadow-sm: 0 2px 4px rgb(0 0 0 / 0.3);
|
|
422
|
-
--admin-shadow-md: 0 4px 12px rgb(0 0 0 / 0.4);
|
|
423
|
-
--admin-shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
|
|
424
|
-
--admin-shadow-xl: 0 16px 48px rgb(0 0 0 / 0.6);
|
|
425
|
-
|
|
426
|
-
/* Standard variable mappings */
|
|
427
|
-
--background: var(--admin-background);
|
|
428
|
-
--foreground: var(--admin-foreground);
|
|
429
|
-
--card: var(--admin-card);
|
|
430
|
-
--card-foreground: var(--admin-foreground);
|
|
431
|
-
--popover: var(--admin-card);
|
|
432
|
-
--popover-foreground: var(--admin-foreground);
|
|
433
|
-
--primary: var(--admin-primary);
|
|
434
|
-
--primary-foreground: var(--admin-primary-foreground);
|
|
435
|
-
--secondary: var(--admin-background-subtle);
|
|
436
|
-
--secondary-foreground: var(--admin-foreground);
|
|
437
|
-
--muted: var(--admin-background-subtle);
|
|
438
|
-
--muted-foreground: var(--admin-foreground-muted);
|
|
439
|
-
--accent: var(--admin-primary-light);
|
|
440
|
-
--accent-foreground: var(--admin-primary);
|
|
441
|
-
--border: var(--admin-border);
|
|
442
|
-
--input: var(--admin-border);
|
|
443
|
-
--ring: var(--admin-primary);
|
|
444
|
-
--destructive: var(--admin-error);
|
|
445
|
-
--destructive-foreground: 0 0% 100%;
|
|
446
|
-
}
|
|
447
|
-
|
|
448
265
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
449
266
|
BASE STYLES
|
|
450
267
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
@@ -465,6 +282,53 @@
|
|
|
465
282
|
border-color: hsl(var(--admin-border));
|
|
466
283
|
}
|
|
467
284
|
|
|
285
|
+
/* ═══════════════════════════════════════════════════════════════════════════
|
|
286
|
+
SCOPE FENCE — storefront-bleed isolation (2026-07 redesign, load-bearing)
|
|
287
|
+
|
|
288
|
+
The admin renders inside the merchant's own Next app: the storefront's
|
|
289
|
+
globals.css (brand fonts, `@layer base` heading sizes — often display
|
|
290
|
+
clamp() sizes of 56-96px) is in scope on /admin. Historically only
|
|
291
|
+
.admin-page-title / .admin-card-title neutralized this, so any BARE
|
|
292
|
+
heading inherited merchant typography (the documented giant-h1 bug class).
|
|
293
|
+
|
|
294
|
+
This fence pins every bare element to the admin system STRUCTURALLY:
|
|
295
|
+
selectors here are (0,1,1) — they beat the store's layered base rules AND
|
|
296
|
+
single-class Tailwind utilities regardless of load order, while any
|
|
297
|
+
.admin-* class (0,2,0) still wins over the fence. Bare headings are
|
|
298
|
+
deliberately modest (hierarchy through weight — the Polaris inversion);
|
|
299
|
+
pages that want the real page-title anatomy use .admin-page-title.
|
|
300
|
+
═══════════════════════════════════════════════════════════════════════════ */
|
|
301
|
+
|
|
302
|
+
.rovela-admin-theme :is(h1, h2, h3, h4, h5, h6) {
|
|
303
|
+
font-family: var(--admin-font-sans);
|
|
304
|
+
color: hsl(var(--admin-foreground));
|
|
305
|
+
line-height: 1.35;
|
|
306
|
+
letter-spacing: var(--admin-tracking-normal);
|
|
307
|
+
}
|
|
308
|
+
.rovela-admin-theme h1 {
|
|
309
|
+
font-size: var(--admin-text-2xl); /* 20px */
|
|
310
|
+
font-weight: var(--admin-font-semibold);
|
|
311
|
+
letter-spacing: var(--admin-tracking-tight);
|
|
312
|
+
}
|
|
313
|
+
.rovela-admin-theme h2 {
|
|
314
|
+
font-size: var(--admin-text-lg); /* 15px */
|
|
315
|
+
font-weight: var(--admin-font-semibold);
|
|
316
|
+
}
|
|
317
|
+
.rovela-admin-theme h3 {
|
|
318
|
+
font-size: var(--admin-text-md); /* 14px */
|
|
319
|
+
font-weight: var(--admin-font-semibold);
|
|
320
|
+
}
|
|
321
|
+
.rovela-admin-theme :is(h4, h5, h6) {
|
|
322
|
+
font-size: var(--admin-text-base); /* 13px */
|
|
323
|
+
font-weight: var(--admin-font-semibold);
|
|
324
|
+
}
|
|
325
|
+
.rovela-admin-theme :is(p, span, li, td, th, dt, dd, label, a) {
|
|
326
|
+
font-family: var(--admin-font-sans);
|
|
327
|
+
}
|
|
328
|
+
.rovela-admin-theme :is(button, input, select, textarea) {
|
|
329
|
+
font-family: var(--admin-font-sans);
|
|
330
|
+
}
|
|
331
|
+
|
|
468
332
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
469
333
|
LAYOUT STRUCTURE
|
|
470
334
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
@@ -531,7 +395,7 @@
|
|
|
531
395
|
|
|
532
396
|
.rovela-admin-theme .admin-heading-1 {
|
|
533
397
|
font-size: var(--admin-text-3xl);
|
|
534
|
-
font-weight: var(--admin-font-
|
|
398
|
+
font-weight: var(--admin-font-semibold);
|
|
535
399
|
line-height: var(--admin-leading-tight);
|
|
536
400
|
letter-spacing: var(--admin-tracking-tight);
|
|
537
401
|
color: hsl(var(--admin-foreground));
|
|
@@ -554,8 +418,8 @@
|
|
|
554
418
|
unlayered (like the rest of admin-theme.css), so it wins over the store's
|
|
555
419
|
layered base heading regardless of the store's typography. */
|
|
556
420
|
.rovela-admin-theme .admin-page-title {
|
|
557
|
-
font-size: var(--admin-text-3xl);
|
|
558
|
-
font-weight: var(--admin-font-
|
|
421
|
+
font-size: var(--admin-text-3xl); /* 20px — the only large text */
|
|
422
|
+
font-weight: var(--admin-font-semibold);
|
|
559
423
|
line-height: var(--admin-leading-tight);
|
|
560
424
|
letter-spacing: var(--admin-tracking-tight);
|
|
561
425
|
color: hsl(var(--admin-foreground));
|
|
@@ -586,7 +450,7 @@
|
|
|
586
450
|
Without this rule, browsers render the bare <h3> at ~1.17em and the title
|
|
587
451
|
reads oversized against the .admin-text-sm body. */
|
|
588
452
|
.rovela-admin-theme .admin-card-title {
|
|
589
|
-
font-size: var(--admin-text-
|
|
453
|
+
font-size: var(--admin-text-md); /* 14px semibold — card headings */
|
|
590
454
|
font-weight: var(--admin-font-semibold);
|
|
591
455
|
line-height: var(--admin-leading-tight);
|
|
592
456
|
color: hsl(var(--admin-foreground));
|
|
@@ -645,19 +509,21 @@
|
|
|
645
509
|
border-color: hsl(var(--admin-border-hover));
|
|
646
510
|
}
|
|
647
511
|
|
|
512
|
+
/* Card anatomy: 16px internal metrics everywhere (Polaris card spec) so
|
|
513
|
+
sibling cards share a baseline grid. */
|
|
648
514
|
.rovela-admin-theme .admin-card-header {
|
|
649
|
-
padding: var(--admin-space-
|
|
650
|
-
border-bottom: var(--admin-border-width) solid hsl(var(--admin-border));
|
|
515
|
+
padding: var(--admin-space-4);
|
|
516
|
+
border-bottom: var(--admin-border-width) solid hsl(var(--admin-border) / 0.6);
|
|
651
517
|
}
|
|
652
518
|
|
|
653
519
|
.rovela-admin-theme .admin-card-body {
|
|
654
|
-
padding: var(--admin-space-
|
|
520
|
+
padding: var(--admin-space-4);
|
|
655
521
|
}
|
|
656
522
|
|
|
657
523
|
.rovela-admin-theme .admin-card-footer {
|
|
658
|
-
padding: var(--admin-space-
|
|
659
|
-
border-top: var(--admin-border-width) solid hsl(var(--admin-border));
|
|
660
|
-
background: hsl(var(--admin-background-subtle) / 0.
|
|
524
|
+
padding: var(--admin-space-3) var(--admin-space-4);
|
|
525
|
+
border-top: var(--admin-border-width) solid hsl(var(--admin-border) / 0.6);
|
|
526
|
+
background: hsl(var(--admin-background-subtle) / 0.35);
|
|
661
527
|
}
|
|
662
528
|
|
|
663
529
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
@@ -667,7 +533,7 @@
|
|
|
667
533
|
.rovela-admin-theme .admin-input {
|
|
668
534
|
display: flex;
|
|
669
535
|
width: 100%;
|
|
670
|
-
height: 2.
|
|
536
|
+
height: 2.25rem; /* 36px — form-context control height */
|
|
671
537
|
padding: 0 var(--admin-space-3);
|
|
672
538
|
font-family: var(--admin-font-sans);
|
|
673
539
|
font-size: var(--admin-text-base);
|
|
@@ -786,13 +652,18 @@
|
|
|
786
652
|
BUTTON COMPONENTS
|
|
787
653
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
788
654
|
|
|
655
|
+
/* Buttons — the premium press model (2026-07 redesign): NO glows, NO upward
|
|
656
|
+
hover lift (both read as template flair). Feedback is a decisive shade
|
|
657
|
+
change on hover, a 0.5px downward press + darker shade on :active (the
|
|
658
|
+
button physically responds under the cursor), and a soft accent ring on
|
|
659
|
+
keyboard focus. One primary per view. */
|
|
789
660
|
.rovela-admin-theme .admin-btn {
|
|
790
661
|
display: inline-flex;
|
|
791
662
|
align-items: center;
|
|
792
663
|
justify-content: center;
|
|
793
664
|
gap: var(--admin-space-2);
|
|
794
|
-
height: 2.
|
|
795
|
-
padding: 0 var(--admin-space-
|
|
665
|
+
height: 2.25rem; /* 36px form-context (was 40) */
|
|
666
|
+
padding: 0 var(--admin-space-3-5);
|
|
796
667
|
font-family: var(--admin-font-sans);
|
|
797
668
|
font-size: var(--admin-text-base);
|
|
798
669
|
font-weight: var(--admin-font-medium);
|
|
@@ -810,73 +681,75 @@
|
|
|
810
681
|
cursor: not-allowed;
|
|
811
682
|
}
|
|
812
683
|
|
|
684
|
+
.rovela-admin-theme .admin-btn:active:not(:disabled) {
|
|
685
|
+
transform: translateY(0.5px);
|
|
686
|
+
}
|
|
687
|
+
|
|
813
688
|
.rovela-admin-theme .admin-btn:focus-visible {
|
|
814
|
-
outline:
|
|
815
|
-
|
|
689
|
+
outline: none;
|
|
690
|
+
box-shadow: 0 0 0 3px hsl(var(--admin-primary) / 0.25);
|
|
816
691
|
}
|
|
817
692
|
|
|
818
|
-
/* Primary Button
|
|
693
|
+
/* Primary Button */
|
|
819
694
|
.rovela-admin-theme .admin-btn-primary {
|
|
820
695
|
background: hsl(var(--admin-primary));
|
|
821
696
|
color: hsl(var(--admin-primary-foreground));
|
|
822
|
-
box-shadow:
|
|
697
|
+
box-shadow: var(--admin-shadow-xs);
|
|
823
698
|
}
|
|
824
699
|
|
|
825
700
|
.rovela-admin-theme .admin-btn-primary:hover:not(:disabled) {
|
|
826
701
|
background: hsl(var(--admin-primary-hover));
|
|
827
|
-
box-shadow: 0 0 20px hsl(var(--admin-primary) / 0.4), 0 4px 12px hsl(var(--admin-primary) / 0.25);
|
|
828
|
-
transform: translateY(-1px);
|
|
829
702
|
}
|
|
830
703
|
|
|
831
704
|
.rovela-admin-theme .admin-btn-primary:active:not(:disabled) {
|
|
832
|
-
background: hsl(var(--admin-primary-
|
|
833
|
-
box-shadow: 0 0 10px hsl(var(--admin-primary) / 0.3);
|
|
834
|
-
transform: translateY(0);
|
|
705
|
+
background: hsl(var(--admin-primary-active));
|
|
835
706
|
}
|
|
836
707
|
|
|
837
|
-
/* Secondary Button */
|
|
708
|
+
/* Secondary Button — white + hairline */
|
|
838
709
|
.rovela-admin-theme .admin-btn-secondary {
|
|
839
710
|
background: hsl(var(--admin-card));
|
|
840
711
|
color: hsl(var(--admin-foreground));
|
|
841
712
|
border-color: hsl(var(--admin-border));
|
|
713
|
+
box-shadow: var(--admin-shadow-xs);
|
|
842
714
|
}
|
|
843
715
|
|
|
844
716
|
.rovela-admin-theme .admin-btn-secondary:hover:not(:disabled) {
|
|
845
|
-
background: hsl(
|
|
717
|
+
background: hsl(36 30% 98%);
|
|
846
718
|
border-color: hsl(var(--admin-border-hover));
|
|
847
719
|
}
|
|
848
720
|
|
|
849
721
|
.rovela-admin-theme .admin-btn-secondary:active:not(:disabled) {
|
|
850
|
-
background: hsl(var(--admin-background-subtle));
|
|
851
|
-
box-shadow: var(--admin-shadow-inner);
|
|
722
|
+
background: hsl(var(--admin-background-subtle) / 0.6);
|
|
852
723
|
}
|
|
853
724
|
|
|
854
725
|
/* Ghost Button */
|
|
855
726
|
.rovela-admin-theme .admin-btn-ghost {
|
|
856
727
|
background: transparent;
|
|
857
|
-
color: hsl(var(--admin-foreground));
|
|
728
|
+
color: hsl(var(--admin-foreground-muted));
|
|
858
729
|
}
|
|
859
730
|
|
|
860
731
|
.rovela-admin-theme .admin-btn-ghost:hover:not(:disabled) {
|
|
861
|
-
background: hsl(var(--admin-
|
|
732
|
+
background: hsl(var(--admin-foreground) / 0.05);
|
|
733
|
+
color: hsl(var(--admin-foreground));
|
|
862
734
|
}
|
|
863
735
|
|
|
864
|
-
/* Destructive Button
|
|
736
|
+
/* Destructive Button — solid error surface */
|
|
865
737
|
.rovela-admin-theme .admin-btn-destructive {
|
|
866
738
|
background: hsl(var(--admin-error));
|
|
867
|
-
color:
|
|
868
|
-
box-shadow:
|
|
739
|
+
color: hsl(var(--admin-error-foreground));
|
|
740
|
+
box-shadow: var(--admin-shadow-xs);
|
|
869
741
|
}
|
|
870
742
|
|
|
871
743
|
.rovela-admin-theme .admin-btn-destructive:hover:not(:disabled) {
|
|
872
744
|
background: hsl(var(--admin-error-dark));
|
|
873
|
-
box-shadow: 0 0 20px hsl(var(--admin-error) / 0.4), 0 4px 12px hsl(var(--admin-error) / 0.25);
|
|
874
|
-
transform: translateY(-1px);
|
|
875
745
|
}
|
|
876
746
|
|
|
877
747
|
.rovela-admin-theme .admin-btn-destructive:active:not(:disabled) {
|
|
878
|
-
|
|
879
|
-
|
|
748
|
+
background: hsl(var(--admin-error-dark));
|
|
749
|
+
}
|
|
750
|
+
|
|
751
|
+
.rovela-admin-theme .admin-btn-destructive:focus-visible {
|
|
752
|
+
box-shadow: 0 0 0 3px hsl(var(--admin-error) / 0.3);
|
|
880
753
|
}
|
|
881
754
|
|
|
882
755
|
/* Button Sizes */
|
|
@@ -906,6 +779,9 @@
|
|
|
906
779
|
BADGE COMPONENTS
|
|
907
780
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
908
781
|
|
|
782
|
+
/* Badges — six tones, ONE recipe (tinted bg + darker fg), 6px radius (a
|
|
783
|
+
soft rectangle, not a pill — pills at 12px read as noise in dense tables),
|
|
784
|
+
past-tense ≤2-word labels. The same status is the same color everywhere. */
|
|
909
785
|
.rovela-admin-theme .admin-badge {
|
|
910
786
|
display: inline-flex;
|
|
911
787
|
align-items: center;
|
|
@@ -914,10 +790,15 @@
|
|
|
914
790
|
font-size: var(--admin-text-xs);
|
|
915
791
|
font-weight: var(--admin-font-medium);
|
|
916
792
|
line-height: var(--admin-leading-normal);
|
|
917
|
-
border-radius: var(--admin-radius-
|
|
793
|
+
border-radius: var(--admin-radius-sm);
|
|
918
794
|
white-space: nowrap;
|
|
919
795
|
}
|
|
920
796
|
|
|
797
|
+
.rovela-admin-theme .admin-badge-attention {
|
|
798
|
+
background: hsl(var(--admin-attention-light));
|
|
799
|
+
color: hsl(var(--admin-attention-dark));
|
|
800
|
+
}
|
|
801
|
+
|
|
921
802
|
.rovela-admin-theme .admin-badge-success {
|
|
922
803
|
background: hsl(var(--admin-success-light));
|
|
923
804
|
color: hsl(var(--admin-success-dark));
|
|
@@ -1042,28 +923,31 @@
|
|
|
1042
923
|
background: hsl(var(--admin-card));
|
|
1043
924
|
}
|
|
1044
925
|
|
|
926
|
+
/* Index-table anatomy (2026-07 redesign): 13px cells with tabular numerals,
|
|
927
|
+
~38px rows (8px vertical padding), 1px hairline separators — never zebra —
|
|
928
|
+
quiet row hover, sentence-case 12px header labels (uppercase shouting was
|
|
929
|
+
the old look; weight + color carry the hierarchy now). */
|
|
1045
930
|
.rovela-admin-theme .admin-table {
|
|
1046
931
|
width: 100%;
|
|
1047
932
|
border-collapse: collapse;
|
|
1048
933
|
font-size: var(--admin-text-base);
|
|
934
|
+
font-variant-numeric: tabular-nums;
|
|
1049
935
|
}
|
|
1050
936
|
|
|
1051
937
|
.rovela-admin-theme .admin-table th {
|
|
1052
|
-
padding: var(--admin-space-
|
|
938
|
+
padding: var(--admin-space-2-5) var(--admin-space-4);
|
|
1053
939
|
font-size: var(--admin-text-xs);
|
|
1054
940
|
font-weight: var(--admin-font-semibold);
|
|
1055
|
-
text-transform: uppercase;
|
|
1056
|
-
letter-spacing: var(--admin-tracking-wide);
|
|
1057
941
|
color: hsl(var(--admin-foreground-muted));
|
|
1058
942
|
background: transparent;
|
|
1059
943
|
text-align: left;
|
|
1060
|
-
border-bottom:
|
|
944
|
+
border-bottom: var(--admin-border-width) solid hsl(var(--admin-border));
|
|
1061
945
|
}
|
|
1062
946
|
|
|
1063
947
|
.rovela-admin-theme .admin-table td {
|
|
1064
|
-
padding: var(--admin-space-4);
|
|
948
|
+
padding: var(--admin-space-2) var(--admin-space-4);
|
|
1065
949
|
color: hsl(var(--admin-foreground));
|
|
1066
|
-
border-bottom: var(--admin-border-width) solid hsl(var(--admin-border));
|
|
950
|
+
border-bottom: var(--admin-border-width) solid hsl(var(--admin-border) / 0.6);
|
|
1067
951
|
vertical-align: middle;
|
|
1068
952
|
}
|
|
1069
953
|
|
|
@@ -1072,11 +956,11 @@
|
|
|
1072
956
|
}
|
|
1073
957
|
|
|
1074
958
|
.rovela-admin-theme .admin-table tbody tr {
|
|
1075
|
-
transition: var(--admin-
|
|
959
|
+
transition: background-color 100ms var(--admin-ease);
|
|
1076
960
|
}
|
|
1077
961
|
|
|
1078
962
|
.rovela-admin-theme .admin-table tbody tr:hover {
|
|
1079
|
-
background: hsl(
|
|
963
|
+
background: hsl(36 30% 97.5%);
|
|
1080
964
|
}
|
|
1081
965
|
|
|
1082
966
|
.rovela-admin-theme .admin-table-empty {
|
|
@@ -1089,13 +973,18 @@
|
|
|
1089
973
|
SIDEBAR COMPONENTS
|
|
1090
974
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
1091
975
|
|
|
976
|
+
/* Sidebar (2026-07 redesign): 240px light surface, 32px rows, 18px icons,
|
|
977
|
+
tinted-emerald active state (one of the few sanctioned accent uses),
|
|
978
|
+
uppercase 11px eyebrow group labels. Labels always visible — no icon rail
|
|
979
|
+
for a merchant audience. */
|
|
1092
980
|
.rovela-admin-theme .admin-sidebar {
|
|
1093
981
|
display: flex;
|
|
1094
982
|
flex-direction: column;
|
|
1095
|
-
width:
|
|
983
|
+
width: 15rem; /* 240px (was 256) */
|
|
1096
984
|
min-height: 100vh;
|
|
1097
985
|
background: hsl(var(--admin-sidebar));
|
|
1098
986
|
color: hsl(var(--admin-sidebar-foreground));
|
|
987
|
+
border-right: var(--admin-border-width) solid hsl(var(--admin-sidebar-border));
|
|
1099
988
|
flex-shrink: 0;
|
|
1100
989
|
}
|
|
1101
990
|
|
|
@@ -1190,28 +1079,27 @@
|
|
|
1190
1079
|
}
|
|
1191
1080
|
|
|
1192
1081
|
.rovela-admin-theme .admin-sidebar-section-title {
|
|
1193
|
-
/*
|
|
1194
|
-
|
|
1195
|
-
padding: var(--admin-space-1) var(--admin-space-
|
|
1196
|
-
padding-top: var(--admin-space-
|
|
1197
|
-
font-size: var(--admin-text-
|
|
1198
|
-
font-weight: var(--admin-font-
|
|
1199
|
-
text-transform:
|
|
1200
|
-
letter-spacing: var(--admin-tracking-
|
|
1201
|
-
color: hsl(var(--admin-sidebar-foreground-muted) / 0.
|
|
1082
|
+
/* Eyebrow group label — the platform's signature uppercase-tracked micro
|
|
1083
|
+
type. Encodes grouping structurally instead of extra whitespace. */
|
|
1084
|
+
padding: var(--admin-space-1) var(--admin-space-2-5);
|
|
1085
|
+
padding-top: var(--admin-space-3);
|
|
1086
|
+
font-size: var(--admin-text-2xs);
|
|
1087
|
+
font-weight: var(--admin-font-semibold);
|
|
1088
|
+
text-transform: uppercase;
|
|
1089
|
+
letter-spacing: var(--admin-tracking-wide);
|
|
1090
|
+
color: hsl(var(--admin-sidebar-foreground-muted) / 0.75);
|
|
1202
1091
|
}
|
|
1203
1092
|
|
|
1204
1093
|
.rovela-admin-theme .admin-sidebar-item {
|
|
1205
1094
|
display: flex;
|
|
1206
1095
|
align-items: center;
|
|
1207
|
-
gap: var(--admin-space-
|
|
1208
|
-
/*
|
|
1209
|
-
|
|
1210
|
-
padding 12px + leading) — well above the 32px admin standard. */
|
|
1211
|
-
padding: var(--admin-space-1-5) var(--admin-space-3);
|
|
1096
|
+
gap: var(--admin-space-2-5);
|
|
1097
|
+
/* 32px row: 13px/500 label + 18px icon + 7px vertical padding. */
|
|
1098
|
+
padding: 0.4375rem var(--admin-space-2-5);
|
|
1212
1099
|
font-size: var(--admin-text-sm);
|
|
1100
|
+
font-weight: var(--admin-font-medium);
|
|
1213
1101
|
color: hsl(var(--admin-sidebar-foreground-muted));
|
|
1214
|
-
border-radius: var(--admin-radius-
|
|
1102
|
+
border-radius: var(--admin-radius-sm);
|
|
1215
1103
|
transition: var(--admin-transition-colors);
|
|
1216
1104
|
cursor: pointer;
|
|
1217
1105
|
text-decoration: none;
|
|
@@ -1219,14 +1107,23 @@
|
|
|
1219
1107
|
}
|
|
1220
1108
|
|
|
1221
1109
|
.rovela-admin-theme .admin-sidebar-item:hover {
|
|
1222
|
-
background: hsl(var(--admin-
|
|
1110
|
+
background: hsl(var(--admin-foreground) / 0.04);
|
|
1223
1111
|
color: hsl(var(--admin-sidebar-foreground));
|
|
1224
1112
|
}
|
|
1225
1113
|
|
|
1114
|
+
.rovela-admin-theme .admin-sidebar-item:active {
|
|
1115
|
+
background: hsl(var(--admin-foreground) / 0.07);
|
|
1116
|
+
}
|
|
1117
|
+
|
|
1118
|
+
.rovela-admin-theme .admin-sidebar-item:focus-visible {
|
|
1119
|
+
outline: none;
|
|
1120
|
+
box-shadow: inset 0 0 0 2px hsl(var(--admin-primary) / 0.35);
|
|
1121
|
+
}
|
|
1122
|
+
|
|
1226
1123
|
.rovela-admin-theme .admin-sidebar-item.active {
|
|
1227
1124
|
background: hsl(var(--admin-sidebar-active));
|
|
1228
1125
|
color: hsl(var(--admin-sidebar-active-text));
|
|
1229
|
-
font-weight: var(--admin-font-
|
|
1126
|
+
font-weight: var(--admin-font-semibold);
|
|
1230
1127
|
}
|
|
1231
1128
|
|
|
1232
1129
|
.rovela-admin-theme .admin-sidebar-item.active .admin-sidebar-item-icon {
|
|
@@ -1234,16 +1131,16 @@
|
|
|
1234
1131
|
}
|
|
1235
1132
|
|
|
1236
1133
|
.rovela-admin-theme .admin-sidebar-item-icon {
|
|
1237
|
-
width: 1.
|
|
1238
|
-
height: 1.
|
|
1134
|
+
width: 1.125rem;
|
|
1135
|
+
height: 1.125rem;
|
|
1239
1136
|
flex-shrink: 0;
|
|
1240
1137
|
}
|
|
1241
1138
|
|
|
1242
1139
|
/* Sidebar item icon (svg) - ensure consistent sizing */
|
|
1243
1140
|
.rovela-admin-theme .admin-sidebar-item svg,
|
|
1244
1141
|
.rovela-admin-theme .admin-sidebar-item-svg {
|
|
1245
|
-
width: 1.
|
|
1246
|
-
height: 1.
|
|
1142
|
+
width: 1.125rem;
|
|
1143
|
+
height: 1.125rem;
|
|
1247
1144
|
flex-shrink: 0;
|
|
1248
1145
|
}
|
|
1249
1146
|
|
|
@@ -1271,18 +1168,24 @@
|
|
|
1271
1168
|
gap: var(--admin-space-1-5);
|
|
1272
1169
|
}
|
|
1273
1170
|
|
|
1171
|
+
/* Footer links behave like nav rows (hover surface, radius) — consistent
|
|
1172
|
+
interaction grammar top to bottom of the sidebar. */
|
|
1274
1173
|
.rovela-admin-theme .admin-sidebar-footer-link {
|
|
1275
1174
|
display: flex;
|
|
1276
1175
|
align-items: center;
|
|
1277
|
-
gap: var(--admin-space-2);
|
|
1176
|
+
gap: var(--admin-space-2-5);
|
|
1177
|
+
padding: 0.375rem var(--admin-space-2-5);
|
|
1278
1178
|
font-size: var(--admin-text-sm);
|
|
1279
|
-
|
|
1179
|
+
font-weight: var(--admin-font-medium);
|
|
1180
|
+
border-radius: var(--admin-radius-sm);
|
|
1181
|
+
color: hsl(var(--admin-sidebar-foreground-muted));
|
|
1280
1182
|
text-decoration: none;
|
|
1281
1183
|
transition: var(--admin-transition-colors);
|
|
1282
1184
|
}
|
|
1283
1185
|
|
|
1284
1186
|
.rovela-admin-theme .admin-sidebar-footer-link:hover {
|
|
1285
|
-
|
|
1187
|
+
background: hsl(var(--admin-foreground) / 0.04);
|
|
1188
|
+
color: hsl(var(--admin-sidebar-foreground));
|
|
1286
1189
|
}
|
|
1287
1190
|
|
|
1288
1191
|
/* Powered by Rovela link */
|
|
@@ -2017,10 +1920,13 @@
|
|
|
2017
1920
|
min-width: 0;
|
|
2018
1921
|
}
|
|
2019
1922
|
|
|
1923
|
+
/* Stat/KPI card — the calm band (2026-07 redesign): 11px uppercase label,
|
|
1924
|
+
20px tabular value, no gradient washes (functional surfaces stay flat),
|
|
1925
|
+
hover only hints when the card links somewhere. */
|
|
2020
1926
|
.rovela-admin-theme .admin-stat-card {
|
|
2021
1927
|
display: block;
|
|
2022
1928
|
position: relative;
|
|
2023
|
-
padding: var(--admin-space-
|
|
1929
|
+
padding: var(--admin-space-4);
|
|
2024
1930
|
background: hsl(var(--admin-card));
|
|
2025
1931
|
border: var(--admin-border-width) solid hsl(var(--admin-border));
|
|
2026
1932
|
border-radius: var(--admin-radius-lg);
|
|
@@ -2035,46 +1941,37 @@
|
|
|
2035
1941
|
border-color: hsl(var(--admin-border-hover));
|
|
2036
1942
|
}
|
|
2037
1943
|
|
|
2038
|
-
.rovela-admin-theme .admin-stat-card::before {
|
|
2039
|
-
content: '';
|
|
2040
|
-
position: absolute;
|
|
2041
|
-
inset: 0;
|
|
2042
|
-
background: linear-gradient(135deg, hsl(var(--admin-primary) / 0.03) 0%, transparent 60%);
|
|
2043
|
-
opacity: 0;
|
|
2044
|
-
transition: var(--admin-transition-opacity);
|
|
2045
|
-
pointer-events: none;
|
|
2046
|
-
}
|
|
2047
|
-
|
|
2048
|
-
.rovela-admin-theme .admin-stat-card:hover::before {
|
|
2049
|
-
opacity: 1;
|
|
2050
|
-
}
|
|
2051
|
-
|
|
2052
1944
|
.rovela-admin-theme .admin-stat-icon {
|
|
2053
1945
|
display: flex;
|
|
2054
1946
|
align-items: center;
|
|
2055
1947
|
justify-content: center;
|
|
2056
1948
|
flex-shrink: 0;
|
|
2057
|
-
width: 2.
|
|
2058
|
-
height: 2.
|
|
2059
|
-
background: hsl(var(--admin-primary
|
|
2060
|
-
color: hsl(var(--admin-
|
|
2061
|
-
border-radius: var(--admin-radius-
|
|
1949
|
+
width: 2.25rem;
|
|
1950
|
+
height: 2.25rem;
|
|
1951
|
+
background: hsl(var(--admin-primary) / 0.08);
|
|
1952
|
+
color: hsl(var(--admin-accent-deep));
|
|
1953
|
+
border-radius: var(--admin-radius-sm);
|
|
2062
1954
|
}
|
|
2063
1955
|
|
|
2064
1956
|
.rovela-admin-theme .admin-stat-icon svg {
|
|
2065
|
-
width: 1.
|
|
2066
|
-
height: 1.
|
|
1957
|
+
width: 1.125rem;
|
|
1958
|
+
height: 1.125rem;
|
|
2067
1959
|
}
|
|
2068
1960
|
|
|
2069
1961
|
.rovela-admin-theme .admin-stat-value {
|
|
2070
1962
|
font-size: var(--admin-text-2xl);
|
|
2071
|
-
font-weight: var(--admin-font-
|
|
1963
|
+
font-weight: var(--admin-font-semibold);
|
|
1964
|
+
letter-spacing: var(--admin-tracking-tight);
|
|
1965
|
+
font-variant-numeric: tabular-nums;
|
|
2072
1966
|
color: hsl(var(--admin-foreground));
|
|
2073
1967
|
line-height: 1.2;
|
|
2074
1968
|
}
|
|
2075
1969
|
|
|
2076
1970
|
.rovela-admin-theme .admin-stat-label {
|
|
2077
|
-
font-size: var(--admin-text-
|
|
1971
|
+
font-size: var(--admin-text-2xs);
|
|
1972
|
+
font-weight: var(--admin-font-semibold);
|
|
1973
|
+
text-transform: uppercase;
|
|
1974
|
+
letter-spacing: var(--admin-tracking-wide);
|
|
2078
1975
|
color: hsl(var(--admin-foreground-muted));
|
|
2079
1976
|
}
|
|
2080
1977
|
|
|
@@ -2273,21 +2170,11 @@
|
|
|
2273
2170
|
}
|
|
2274
2171
|
|
|
2275
2172
|
/* Active indicator bar for nav items */
|
|
2173
|
+
/* Left indicator bar RETIRED (2026-07 redesign): the tinted active surface
|
|
2174
|
+
carries the state on its own; bar + tint was double signaling. Rule kept
|
|
2175
|
+
(display:none) because AdminNav still renders the element. */
|
|
2276
2176
|
.rovela-admin-theme .admin-sidebar-indicator {
|
|
2277
|
-
|
|
2278
|
-
left: 0;
|
|
2279
|
-
top: 50%;
|
|
2280
|
-
transform: translateY(-50%);
|
|
2281
|
-
height: 1.5rem;
|
|
2282
|
-
width: 3px;
|
|
2283
|
-
border-radius: 0 var(--admin-radius-full) var(--admin-radius-full) 0;
|
|
2284
|
-
background: hsl(var(--admin-sidebar-active-text));
|
|
2285
|
-
opacity: 0;
|
|
2286
|
-
transition: opacity 0.2s var(--admin-ease-rovela);
|
|
2287
|
-
}
|
|
2288
|
-
|
|
2289
|
-
.rovela-admin-theme .admin-sidebar-item.active .admin-sidebar-indicator {
|
|
2290
|
-
opacity: 1;
|
|
2177
|
+
display: none;
|
|
2291
2178
|
}
|
|
2292
2179
|
|
|
2293
2180
|
/* View store link button */
|
|
@@ -2444,28 +2331,28 @@
|
|
|
2444
2331
|
|
|
2445
2332
|
/* Status-specific badge variants for orders */
|
|
2446
2333
|
.rovela-admin-theme .admin-badge-pending {
|
|
2447
|
-
background: hsl(var(--admin-warning)
|
|
2448
|
-
color: hsl(var(--admin-warning));
|
|
2334
|
+
background: hsl(var(--admin-warning-light));
|
|
2335
|
+
color: hsl(var(--admin-warning-dark));
|
|
2449
2336
|
}
|
|
2450
2337
|
|
|
2451
2338
|
.rovela-admin-theme .admin-badge-paid {
|
|
2452
|
-
background: hsl(var(--admin-success)
|
|
2453
|
-
color: hsl(var(--admin-success));
|
|
2339
|
+
background: hsl(var(--admin-success-light));
|
|
2340
|
+
color: hsl(var(--admin-success-dark));
|
|
2454
2341
|
}
|
|
2455
2342
|
|
|
2456
2343
|
.rovela-admin-theme .admin-badge-shipped {
|
|
2457
|
-
background: hsl(var(--admin-info)
|
|
2458
|
-
color: hsl(var(--admin-info));
|
|
2344
|
+
background: hsl(var(--admin-info-light));
|
|
2345
|
+
color: hsl(var(--admin-info-dark));
|
|
2459
2346
|
}
|
|
2460
2347
|
|
|
2461
2348
|
.rovela-admin-theme .admin-badge-delivered {
|
|
2462
|
-
background: hsl(var(--admin-
|
|
2463
|
-
color: hsl(var(--admin-
|
|
2349
|
+
background: hsl(var(--admin-success-light));
|
|
2350
|
+
color: hsl(var(--admin-success-dark));
|
|
2464
2351
|
}
|
|
2465
2352
|
|
|
2466
2353
|
.rovela-admin-theme .admin-badge-cancelled {
|
|
2467
|
-
background: hsl(var(--admin-error)
|
|
2468
|
-
color: hsl(var(--admin-error));
|
|
2354
|
+
background: hsl(var(--admin-error-light));
|
|
2355
|
+
color: hsl(var(--admin-error-dark));
|
|
2469
2356
|
}
|
|
2470
2357
|
|
|
2471
2358
|
.rovela-admin-theme .admin-badge-refunded {
|
|
@@ -2475,13 +2362,13 @@
|
|
|
2475
2362
|
|
|
2476
2363
|
/* Out of stock variant */
|
|
2477
2364
|
.rovela-admin-theme .admin-badge-out-of-stock {
|
|
2478
|
-
background: hsl(var(--admin-error)
|
|
2479
|
-
color: hsl(var(--admin-error));
|
|
2365
|
+
background: hsl(var(--admin-error-light));
|
|
2366
|
+
color: hsl(var(--admin-error-dark));
|
|
2480
2367
|
}
|
|
2481
2368
|
|
|
2482
2369
|
.rovela-admin-theme .admin-badge-low-stock {
|
|
2483
|
-
background: hsl(var(--admin-warning)
|
|
2484
|
-
color: hsl(var(--admin-warning));
|
|
2370
|
+
background: hsl(var(--admin-warning-light));
|
|
2371
|
+
color: hsl(var(--admin-warning-dark));
|
|
2485
2372
|
}
|
|
2486
2373
|
|
|
2487
2374
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
@@ -2583,17 +2470,18 @@
|
|
|
2583
2470
|
TABLE HEADER STYLES
|
|
2584
2471
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
2585
2472
|
|
|
2473
|
+
/* Duplicate of .admin-table th kept for the components that target
|
|
2474
|
+
.admin-table-header directly — values MUST stay in lockstep with the
|
|
2475
|
+
canonical table header above. */
|
|
2586
2476
|
.rovela-admin-theme .admin-table-header {
|
|
2587
2477
|
background: transparent;
|
|
2588
|
-
border-bottom:
|
|
2478
|
+
border-bottom: var(--admin-border-width) solid hsl(var(--admin-border));
|
|
2589
2479
|
}
|
|
2590
2480
|
|
|
2591
2481
|
.rovela-admin-theme .admin-table-header th {
|
|
2592
|
-
padding: var(--admin-space-
|
|
2482
|
+
padding: var(--admin-space-2-5) var(--admin-space-4);
|
|
2593
2483
|
font-size: var(--admin-text-xs);
|
|
2594
2484
|
font-weight: var(--admin-font-semibold);
|
|
2595
|
-
text-transform: uppercase;
|
|
2596
|
-
letter-spacing: var(--admin-tracking-wide);
|
|
2597
2485
|
color: hsl(var(--admin-foreground-muted));
|
|
2598
2486
|
text-align: left;
|
|
2599
2487
|
background: transparent;
|
|
@@ -2655,13 +2543,13 @@
|
|
|
2655
2543
|
}
|
|
2656
2544
|
|
|
2657
2545
|
.rovela-admin-theme .admin-badge-active {
|
|
2658
|
-
background: hsl(var(--admin-success)
|
|
2659
|
-
color: hsl(var(--admin-success));
|
|
2546
|
+
background: hsl(var(--admin-success-light));
|
|
2547
|
+
color: hsl(var(--admin-success-dark));
|
|
2660
2548
|
}
|
|
2661
2549
|
|
|
2662
2550
|
.rovela-admin-theme .admin-badge-archived {
|
|
2663
|
-
background: hsl(var(--admin-error)
|
|
2664
|
-
color: hsl(var(--admin-error));
|
|
2551
|
+
background: hsl(var(--admin-error-light));
|
|
2552
|
+
color: hsl(var(--admin-error-dark));
|
|
2665
2553
|
}
|
|
2666
2554
|
|
|
2667
2555
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
@@ -2669,13 +2557,13 @@
|
|
|
2669
2557
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
2670
2558
|
|
|
2671
2559
|
.rovela-admin-theme .admin-badge-verified {
|
|
2672
|
-
background: hsl(var(--admin-success)
|
|
2673
|
-
color: hsl(var(--admin-success));
|
|
2560
|
+
background: hsl(var(--admin-success-light));
|
|
2561
|
+
color: hsl(var(--admin-success-dark));
|
|
2674
2562
|
}
|
|
2675
2563
|
|
|
2676
2564
|
.rovela-admin-theme .admin-badge-unverified {
|
|
2677
|
-
background: hsl(var(--admin-warning)
|
|
2678
|
-
color: hsl(var(--admin-warning));
|
|
2565
|
+
background: hsl(var(--admin-warning-light));
|
|
2566
|
+
color: hsl(var(--admin-warning-dark));
|
|
2679
2567
|
}
|
|
2680
2568
|
|
|
2681
2569
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
@@ -3500,16 +3388,18 @@
|
|
|
3500
3388
|
cursor: not-allowed;
|
|
3501
3389
|
}
|
|
3502
3390
|
|
|
3391
|
+
/* Active chip: solid emerald (the ops-console + platform pill grammar) —
|
|
3392
|
+
unambiguous selected state, no squinting at outline tints. */
|
|
3503
3393
|
.rovela-admin-theme .admin-chip-active {
|
|
3504
3394
|
border-color: hsl(var(--admin-primary));
|
|
3505
|
-
color: hsl(var(--admin-primary));
|
|
3506
|
-
background: hsl(var(--admin-primary)
|
|
3395
|
+
color: hsl(var(--admin-primary-foreground));
|
|
3396
|
+
background: hsl(var(--admin-primary));
|
|
3507
3397
|
}
|
|
3508
3398
|
|
|
3509
3399
|
.rovela-admin-theme .admin-chip-active:hover:not(:disabled) {
|
|
3510
|
-
border-color: hsl(var(--admin-primary));
|
|
3511
|
-
background: hsl(var(--admin-primary)
|
|
3512
|
-
color: hsl(var(--admin-primary));
|
|
3400
|
+
border-color: hsl(var(--admin-primary-hover));
|
|
3401
|
+
background: hsl(var(--admin-primary-hover));
|
|
3402
|
+
color: hsl(var(--admin-primary-foreground));
|
|
3513
3403
|
}
|
|
3514
3404
|
|
|
3515
3405
|
/* Bulk action bar — replaces the filter row when one or more rows are
|
|
@@ -3658,15 +3548,17 @@
|
|
|
3658
3548
|
color: hsl(var(--admin-foreground-muted));
|
|
3659
3549
|
}
|
|
3660
3550
|
|
|
3661
|
-
/* Danger button
|
|
3551
|
+
/* Danger button — ALIAS of .admin-btn-destructive (it was a redundant near
|
|
3552
|
+
duplicate; values must stay in lockstep with the destructive button). */
|
|
3662
3553
|
.rovela-admin-theme .admin-btn-danger {
|
|
3663
3554
|
background: hsl(var(--admin-error));
|
|
3664
|
-
color: hsl(var(--admin-error-foreground
|
|
3665
|
-
border: 1px solid
|
|
3555
|
+
color: hsl(var(--admin-error-foreground));
|
|
3556
|
+
border: 1px solid transparent;
|
|
3557
|
+
box-shadow: var(--admin-shadow-xs);
|
|
3666
3558
|
}
|
|
3667
3559
|
|
|
3668
3560
|
.rovela-admin-theme .admin-btn-danger:hover:not(:disabled) {
|
|
3669
|
-
background: hsl(var(--admin-error)
|
|
3561
|
+
background: hsl(var(--admin-error-dark));
|
|
3670
3562
|
}
|
|
3671
3563
|
|
|
3672
3564
|
.rovela-admin-theme .admin-btn-danger:disabled {
|