vue-dockable-desktop 1.1.2 → 1.3.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.
Files changed (12) hide show
  1. package/CHANGELOG.md +151 -0
  2. package/README.md +20 -5
  3. package/dist/composables/useLibraryMessage.d.ts +10 -0
  4. package/dist/core/messages.d.ts +8 -0
  5. package/dist/core/panelDom.d.ts +8 -2
  6. package/dist/index.cjs +2 -2
  7. package/dist/index.cjs.map +1 -1
  8. package/dist/index.d.ts +1 -1
  9. package/dist/index.js +689 -613
  10. package/dist/index.js.map +1 -1
  11. package/dist/styles.css +211 -163
  12. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -16,6 +16,13 @@
16
16
  */
17
17
 
18
18
  :root {
19
+ /* The font of all the library's chrome. `inherit` hands it to the host page instead.
20
+ Neither Outfit nor Inter is loaded by the library: load one yourself, or override this on
21
+ :root (menus, flyouts and toasts teleport to <body>, so :root is what reaches everything).
22
+ A skin picks its own font through --vdd-skin-font-family, never by declaring --vdd-font-family
23
+ itself: that would override the consumer's :root value on the element carrying data-vdd-skin.
24
+ This resolves on <html>, which <VddDesktop> gives data-vdd-skin too. */
25
+ --vdd-font-family: var(--vdd-skin-font-family, 'Outfit', 'Inter', system-ui, -apple-system, sans-serif);
19
26
  --vdd-styles-loaded: 1; /* sentinel — checked at mount to detect missing CSS import */
20
27
  --vdd-z-base: 1000; /* base for floating windows + all chrome overlays; override via WindowManagerProvider's zIndexBase */
21
28
  --vdd-bg-primary: #090b11;
@@ -25,8 +32,12 @@
25
32
  --vdd-text-primary: #f1f5f9;
26
33
  --vdd-text-secondary: #94a3b8;
27
34
  --vdd-border-color: rgba(255, 255, 255, 0.08);
28
- --vdd-accent-color: #38bdf8; /* Modern Cyan/Sky-blue accent */
29
- --vdd-accent-glow: rgba(56, 189, 248, 0.15);
35
+ /* Branding: an app sets --vdd-brand-accent / --vdd-brand-on-accent on :root, and every skin reads
36
+ them first (var(--vdd-brand-accent, <skin colour>)). The library only reads them — declared
37
+ here or in a skin, they would override the app's value on the element carrying data-vdd-skin.
38
+ Every tint of the accent is a color-mix() of --vdd-accent-color, never a copied rgba(). */
39
+ --vdd-accent-color: var(--vdd-brand-accent, #38bdf8); /* Modern Cyan/Sky-blue accent */
40
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
30
41
  --vdd-header-button-gap: 4px; /* Configurable gap spacing between titlebar action buttons */
31
42
  /* Window skins variables */
32
43
  --vdd-window-bg: rgba(20, 22, 28, var(--vdd-window-opacity, 0.85));
@@ -125,27 +136,27 @@
125
136
  --vdd-sidebar-border: rgba(255, 255, 255, 0.08);
126
137
  --vdd-sidebar-card-bg: rgba(255, 255, 255, 0.03);
127
138
  --vdd-sidebar-card-border: rgba(255, 255, 255, 0.08);
128
- --vdd-sidebar-card-active-bg: rgba(56, 189, 248, 0.06);
129
- --vdd-sidebar-card-active-border: rgba(56, 189, 248, 0.3);
139
+ --vdd-sidebar-card-active-bg: color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
140
+ --vdd-sidebar-card-active-border: color-mix(in srgb, var(--vdd-accent-color) 30%, transparent);
130
141
  --vdd-sidebar-text-title: #f8f9fa;
131
142
  --vdd-sidebar-text-muted: #8a90a0;
132
143
  --vdd-sidebar-badge-bg: #2d3139;
133
144
  --vdd-sidebar-badge-text: #b0b5c0;
134
- --vdd-sidebar-btn-front-border: #38bdf8;
135
- --vdd-sidebar-btn-front-text: #38bdf8;
145
+ --vdd-sidebar-btn-front-border: var(--vdd-accent-color);
146
+ --vdd-sidebar-btn-front-text: var(--vdd-accent-color);
136
147
  --vdd-sidebar-btn-front-bg: transparent;
137
- --vdd-sidebar-btn-front-hover-bg: rgba(56, 189, 248, 0.1);
138
- --vdd-tab-icon-active: #38bdf8;
148
+ --vdd-sidebar-btn-front-hover-bg: color-mix(in srgb, var(--vdd-accent-color) 10%, transparent);
149
+ --vdd-tab-icon-active: var(--vdd-accent-color);
139
150
  --vdd-tab-icon-inactive: #9ea4b0;
140
151
  --vdd-tab-btn-active-bg: #1e2024; /* Seamless merge look */
141
152
  --vdd-sidebar-btn-hover-bg: rgba(255, 255, 255, 0.05);
142
- --vdd-sidebar-card-hover-border: rgba(56, 189, 248, 0.25);
153
+ --vdd-sidebar-card-hover-border: color-mix(in srgb, var(--vdd-accent-color) 25%, transparent);
143
154
  --vdd-sidebar-card-hover-bg: rgba(255, 255, 255, 0.04);
144
- --vdd-sidebar-card-active-shadow: rgba(56, 189, 248, 0.08);
155
+ --vdd-sidebar-card-active-shadow: color-mix(in srgb, var(--vdd-accent-color) 8%, transparent);
145
156
  --vdd-sidebar-drawer-header-bg: rgba(0, 0, 0, 0.12);
146
157
  --vdd-toolbar-btn-hover-bg: rgba(255, 255, 255, 0.06);
147
- --vdd-toolbar-btn-radio-active-bg: rgba(56, 189, 248, 0.14);
148
- --vdd-toolbar-btn-toggle-active-bg: rgba(56, 189, 248, 0.08);
158
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 14%, transparent);
159
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 8%, transparent);
149
160
  --vdd-toolbar-separator-color: rgba(255, 255, 255, 0.09);
150
161
  /* Sidebar active-tab design tokens */
151
162
  --vdd-tab-btn-active-shadow: none;
@@ -203,15 +214,37 @@
203
214
  overflow: hidden;
204
215
  }
205
216
 
217
+ /* Form controls don't inherit a font by default. Only the library's own controls (those with a
218
+ vdd- class) are told to, never the consumer's inputs and buttons inside a panel. Without it the
219
+ rail and toolbar buttons kept the browser's button font whatever --vdd-font-family said
220
+ (rdd 6.4.0; found by the M15 branding gate). */
221
+ :where(button, input, select, textarea)[class*="vdd-"] {
222
+ font-family: inherit;
223
+ }
224
+
206
225
  /* Cosmetic properties are scoped to the library's own root element only — never
207
226
  the consumer's page, html/body, or their own mount div. */
208
227
  .vdd-workspace {
209
228
  background-color: var(--vdd-bg-primary);
210
229
  color: var(--vdd-text-primary);
211
- font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
230
+ font-family: var(--vdd-font-family);
212
231
  -webkit-font-smoothing: antialiased;
213
232
  }
214
233
 
234
+ /* Chrome rendered outside the workspace root — the sidebar and toolbar around it, and the
235
+ modals, drawers, toasts, menus and flyouts mounted beside it or teleported to <body> — does
236
+ not inherit from .vdd-workspace, so it reads the token itself. Without this it took the host
237
+ page's body font. */
238
+ .vdd-sidebar-layout,
239
+ .vdd-toolbar-strip,
240
+ .vdd-modal-overlay,
241
+ .vdd-side-panel,
242
+ .vdd-toast-container,
243
+ .vdd-toolbar-group-flyout,
244
+ .vdd-panel-toolbar-search__dropdown {
245
+ font-family: var(--vdd-font-family);
246
+ }
247
+
215
248
  /* Workspace Panel Container */
216
249
  .vdd-workspace-panel {
217
250
  background-color: var(--vdd-bg-panel);
@@ -280,6 +313,13 @@
280
313
  transition: background-color 0.1s ease, color 0.1s ease;
281
314
  }
282
315
 
316
+ /* Tabs take keyboard focus (one tab stop per group). The ring shows for keyboard focus only,
317
+ so clicking a tab looks as it always did. */
318
+ .vdd-workspace-tab:focus-visible {
319
+ outline: 2px solid var(--vdd-accent-color, #38bdf8);
320
+ outline-offset: -2px;
321
+ }
322
+
283
323
  .vdd-workspace-tab > .vdd-text-truncate {
284
324
  margin-right: 12px;
285
325
  }
@@ -569,7 +609,7 @@ body.vdd-resizing-col-active * {
569
609
  .vdd-taskbar-glassmorphic-item:hover {
570
610
  background: var(--vdd-taskbar-item-hover-bg) !important;
571
611
  border-color: var(--vdd-accent-color, #38bdf8) !important;
572
- box-shadow: 0 6px 16px rgba(56, 189, 248, 0.15);
612
+ box-shadow: 0 6px 16px color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
573
613
  }
574
614
 
575
615
  /* Minimalist Taskbar Icon-Only & Premium Tooltip Rules */
@@ -626,7 +666,7 @@ body.vdd-resizing-col-active * {
626
666
  padding: 8px !important;
627
667
  border-radius: 6px;
628
668
  font-size: 11px !important;
629
- font-family: 'Outfit', 'Inter', system-ui, sans-serif;
669
+ font-family: var(--vdd-font-family);
630
670
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
631
671
  border: 1px solid var(--vdd-taskbar-item-border, rgba(255, 255, 255, 0.1)) !important;
632
672
  animation: vdd-tooltip-fade-in 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
@@ -804,7 +844,7 @@ body.vdd-resizing-col-active * {
804
844
  }
805
845
 
806
846
  .vdd-floating-window-title {
807
- font-family: 'Outfit', sans-serif;
847
+ font-family: var(--vdd-font-family);
808
848
  font-size: 0.78rem;
809
849
  font-weight: 600;
810
850
  color: var(--vdd-window-text);
@@ -841,7 +881,7 @@ body.vdd-resizing-col-active * {
841
881
  padding: 4px 0;
842
882
  min-width: 220px;
843
883
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
844
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
884
+ font-family: var(--vdd-font-family);
845
885
  font-size: 13px;
846
886
  animation: vdd-context-menu-in 0.1s cubic-bezier(0.16, 1, 0.3, 1);
847
887
  outline: none;
@@ -978,7 +1018,7 @@ body.vdd-resizing-col-active * {
978
1018
  /* Translucent overlay preview highlighting the grid section about to split */
979
1019
  .vdd-dock-preview-highlight {
980
1020
  position: absolute;
981
- background-color: rgba(56, 189, 248, 0.2) !important; /* neon cyan overlay */
1021
+ background-color: color-mix(in srgb, var(--vdd-accent-color) 20%, transparent) !important; /* accent overlay */
982
1022
  border: 1.5px dashed var(--vdd-accent-color) !important;
983
1023
  transition: all 0.1s ease-out;
984
1024
  pointer-events: none;
@@ -1014,7 +1054,7 @@ body.vdd-resizing-col-active * {
1014
1054
  .vdd-dock-target-box--active {
1015
1055
  background-color: var(--vdd-accent-color) !important;
1016
1056
  border-color: #ffffff !important;
1017
- color: #090b11 !important;
1057
+ color: var(--vdd-brand-on-accent, #090b11) !important;
1018
1058
  transform: scale(1.12);
1019
1059
  box-shadow: 0 0 12px var(--vdd-accent-color);
1020
1060
  }
@@ -1095,6 +1135,8 @@ body.vdd-dragging-active {
1095
1135
 
1096
1136
 
1097
1137
  [data-color-scheme="light"] {
1138
+ /* The default skin's light-mode accent (the blue its light tokens were already drawn in). */
1139
+ --vdd-accent-color: var(--vdd-brand-accent, #0066cc);
1098
1140
  --vdd-bg-primary: #f8f9fa;
1099
1141
  --vdd-bg-workspace: #f1f5f9;
1100
1142
  --vdd-bg-panel: #ffffff;
@@ -1108,27 +1150,27 @@ body.vdd-dragging-active {
1108
1150
  --vdd-sidebar-border: rgba(0, 0, 0, 0.08);
1109
1151
  --vdd-sidebar-card-bg: #ffffff;
1110
1152
  --vdd-sidebar-card-border: rgba(0, 0, 0, 0.08);
1111
- --vdd-sidebar-card-active-bg: rgba(0, 102, 204, 0.05);
1112
- --vdd-sidebar-card-active-border: rgba(0, 102, 204, 0.3);
1153
+ --vdd-sidebar-card-active-bg: color-mix(in srgb, var(--vdd-accent-color) 5%, transparent);
1154
+ --vdd-sidebar-card-active-border: color-mix(in srgb, var(--vdd-accent-color) 30%, transparent);
1113
1155
  --vdd-sidebar-text-title: #212529;
1114
1156
  --vdd-sidebar-text-muted: #6c757d;
1115
1157
  --vdd-sidebar-badge-bg: #e9ecef;
1116
1158
  --vdd-sidebar-badge-text: #495057;
1117
- --vdd-sidebar-btn-front-border: #0066cc;
1118
- --vdd-sidebar-btn-front-text: #0066cc;
1159
+ --vdd-sidebar-btn-front-border: var(--vdd-accent-color);
1160
+ --vdd-sidebar-btn-front-text: var(--vdd-accent-color);
1119
1161
  --vdd-sidebar-btn-front-bg: transparent;
1120
- --vdd-sidebar-btn-front-hover-bg: rgba(0, 102, 204, 0.08);
1121
- --vdd-tab-icon-active: #0066cc;
1162
+ --vdd-sidebar-btn-front-hover-bg: color-mix(in srgb, var(--vdd-accent-color) 8%, transparent);
1163
+ --vdd-tab-icon-active: var(--vdd-accent-color);
1122
1164
  --vdd-tab-icon-inactive: #555c66;
1123
1165
  --vdd-tab-btn-active-bg: #f8f9fa; /* Seamless merge look */
1124
1166
  --vdd-sidebar-btn-hover-bg: rgba(0, 0, 0, 0.05);
1125
- --vdd-sidebar-card-hover-border: rgba(0, 102, 204, 0.3);
1167
+ --vdd-sidebar-card-hover-border: color-mix(in srgb, var(--vdd-accent-color) 30%, transparent);
1126
1168
  --vdd-sidebar-card-hover-bg: rgba(0, 0, 0, 0.03);
1127
- --vdd-sidebar-card-active-shadow: rgba(0, 102, 204, 0.08);
1169
+ --vdd-sidebar-card-active-shadow: color-mix(in srgb, var(--vdd-accent-color) 8%, transparent);
1128
1170
  --vdd-sidebar-drawer-header-bg: rgba(0, 0, 0, 0.04);
1129
1171
  --vdd-toolbar-btn-hover-bg: rgba(0, 0, 0, 0.05);
1130
- --vdd-toolbar-btn-radio-active-bg: rgba(0, 102, 204, 0.1);
1131
- --vdd-toolbar-btn-toggle-active-bg: rgba(0, 102, 204, 0.06);
1172
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 10%, transparent);
1173
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
1132
1174
  --vdd-toolbar-separator-color: rgba(0, 0, 0, 0.1);
1133
1175
  /* Light skin window overrides */
1134
1176
  --vdd-window-bg: rgba(243, 244, 246, var(--vdd-window-opacity, 0.9));
@@ -1163,7 +1205,7 @@ body.vdd-dragging-active {
1163
1205
  --vdd-close-btn-hover-color: #212529;
1164
1206
  --vdd-close-btn-color: #6c757d;
1165
1207
  --vdd-close-btn-active-color: #212529;
1166
- --vdd-tab-indicator-focused: #0066cc;
1208
+ --vdd-tab-indicator-focused: var(--vdd-accent-color);
1167
1209
  --vdd-tab-indicator-unfocused: rgba(0, 0, 0, 0.25);
1168
1210
  --vdd-tab-bg-active-focused: var(--vdd-bg-panel);
1169
1211
  --vdd-tab-bg-active-unfocused: rgba(220, 224, 230, 0.65);
@@ -1181,7 +1223,7 @@ body.vdd-dragging-active {
1181
1223
  --vdd-taskbar-item-bg: rgba(255, 255, 255, 0.65);
1182
1224
  --vdd-taskbar-item-hover-bg: rgba(255, 255, 255, 0.85);
1183
1225
  --vdd-taskbar-item-border: rgba(0, 0, 0, 0.08);
1184
- --vdd-taskbar-item-text: #0066cc;
1226
+ --vdd-taskbar-item-text: var(--vdd-accent-color);
1185
1227
  /* Light skin scrollbar theme variables */
1186
1228
  --vdd-scrollbar-thumb: rgba(0, 0, 0, 0.15);
1187
1229
  --vdd-scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
@@ -1190,7 +1232,7 @@ body.vdd-dragging-active {
1190
1232
  --vdd-panel-card-bg: rgba(0, 0, 0, 0.03);
1191
1233
  --vdd-panel-card-border: rgba(0, 0, 0, 0.08);
1192
1234
  --vdd-panel-text: #212529;
1193
- --vdd-panel-title-color: #0066cc;
1235
+ --vdd-panel-title-color: var(--vdd-accent-color);
1194
1236
  /* ── Panel Overlay — Toolbar (light) ── */
1195
1237
  --vdd-panel-toolbar-fg: rgba(0, 0, 0, 0.55);
1196
1238
  --vdd-panel-toolbar-fg-hover: rgba(0, 0, 0, 0.85);
@@ -1211,27 +1253,29 @@ body.vdd-dragging-active {
1211
1253
  SKIN 1: VS Code (Default Variables matching :root)
1212
1254
  -------------------------------------------------------------------------- */
1213
1255
  [data-vdd-skin="vscode"] {
1214
- /* Inherits everything from :root */
1256
+ --vdd-skin-font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif; /* VS Code's workbench font */
1257
+ /* Otherwise inherits everything from :root */
1215
1258
  }
1216
1259
 
1217
1260
  /* --------------------------------------------------------------------------
1218
1261
  SKIN 2: macOS / Glassmorphic Preset
1219
1262
  -------------------------------------------------------------------------- */
1220
1263
  [data-vdd-skin="macos"] {
1264
+ --vdd-skin-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* San Francisco */
1221
1265
  --vdd-bg-workspace: #1a1a24;
1222
1266
  --vdd-bg-panel: rgba(30, 30, 40, 0.45);
1223
1267
  --vdd-bg-tab-bar: rgba(18, 18, 24, 0.3);
1224
1268
  --vdd-window-bg: rgba(25, 25, 35, var(--vdd-window-opacity, 0.7));
1225
1269
  --vdd-window-border: rgba(255, 255, 255, 0.1);
1226
1270
  --vdd-window-header-bg: rgba(0, 0, 0, 0.15);
1227
- --vdd-accent-color: #38bdf8;
1228
- --vdd-accent-glow: rgba(56, 189, 248, 0.25);
1271
+ --vdd-accent-color: var(--vdd-brand-accent, #38bdf8);
1272
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 25%, transparent);
1229
1273
  --vdd-border-panel: rgba(255, 255, 255, 0.08);
1230
1274
  --vdd-bg-tab-inactive: transparent;
1231
1275
  --vdd-text-tab-inactive: #94a3b8;
1232
1276
  --vdd-text-tab-active: #ffffff;
1233
1277
  --vdd-window-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
1234
- --vdd-window-shadow-focused: 0 24px 50px rgba(56, 189, 248, 0.15);
1278
+ --vdd-window-shadow-focused: 0 24px 50px color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
1235
1279
  --vdd-panel-card-bg: rgba(255, 255, 255, 0.03);
1236
1280
  --vdd-panel-card-border: rgba(255, 255, 255, 0.08);
1237
1281
  }
@@ -1244,19 +1288,19 @@ body.vdd-dragging-active {
1244
1288
  --vdd-window-bg: rgba(255, 255, 255, var(--vdd-window-opacity, 0.85));
1245
1289
  --vdd-window-border: rgba(0, 0, 0, 0.12);
1246
1290
  --vdd-window-header-bg: rgba(243, 244, 246, 0.5);
1247
- --vdd-accent-color: #0066cc;
1248
- --vdd-accent-glow: rgba(0, 102, 204, 0.15);
1291
+ --vdd-accent-color: var(--vdd-brand-accent, #0066cc);
1292
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
1249
1293
  --vdd-border-panel: rgba(0, 0, 0, 0.1);
1250
1294
  --vdd-bg-tab-inactive: transparent;
1251
1295
  --vdd-text-tab-inactive: #4b5563;
1252
1296
  --vdd-text-tab-active: #111827;
1253
1297
  --vdd-window-text: #111827;
1254
1298
  --vdd-window-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
1255
- --vdd-window-shadow-focused: 0 16px 36px rgba(0, 102, 204, 0.18);
1299
+ --vdd-window-shadow-focused: 0 16px 36px color-mix(in srgb, var(--vdd-accent-color) 18%, transparent);
1256
1300
  --vdd-panel-card-bg: rgba(0, 0, 0, 0.04);
1257
1301
  --vdd-panel-card-border: rgba(0, 0, 0, 0.08);
1258
1302
  --vdd-panel-text: #111827;
1259
- --vdd-panel-title-color: #0066cc;
1303
+ --vdd-panel-title-color: var(--vdd-accent-color);
1260
1304
  --vdd-close-btn-color: #4b5563;
1261
1305
  --vdd-close-btn-active-color: #111827;
1262
1306
  }
@@ -1366,14 +1410,15 @@ body.vdd-dragging-active {
1366
1410
  SKIN 3: Chrome / Browser-Style Preset
1367
1411
  -------------------------------------------------------------------------- */
1368
1412
  [data-vdd-skin="chrome"] {
1413
+ --vdd-skin-font-family: 'Google Sans Text', 'Google Sans', Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif; /* Google's UI fonts */
1369
1414
  --vdd-bg-workspace: #202124;
1370
1415
  --vdd-bg-panel: #292a2d;
1371
1416
  --vdd-bg-tab-bar: #202124;
1372
1417
  --vdd-window-bg: rgba(41, 42, 45, var(--vdd-window-opacity, 1.0));
1373
1418
  --vdd-window-border: #3c4043;
1374
1419
  --vdd-window-header-bg: #202124;
1375
- --vdd-accent-color: #8ab4f8;
1376
- --vdd-accent-glow: rgba(138, 180, 248, 0.15);
1420
+ --vdd-accent-color: var(--vdd-brand-accent, #8ab4f8);
1421
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
1377
1422
  --vdd-border-panel: #3c4043;
1378
1423
  --vdd-bg-tab-inactive: #202124;
1379
1424
  --vdd-text-tab-inactive: #9aa0a6;
@@ -1382,9 +1427,9 @@ body.vdd-dragging-active {
1382
1427
  --vdd-panel-card-border: #3c4043;
1383
1428
  --vdd-window-text: #ffffff;
1384
1429
  --vdd-panel-text: #e8eaed;
1385
- --vdd-tab-icon-active: #8ab4f8;
1386
- --vdd-toolbar-btn-radio-active-bg: rgba(138, 180, 248, 0.14);
1387
- --vdd-toolbar-btn-toggle-active-bg: rgba(138, 180, 248, 0.08);
1430
+ --vdd-tab-icon-active: var(--vdd-accent-color);
1431
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 14%, transparent);
1432
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 8%, transparent);
1388
1433
  }
1389
1434
 
1390
1435
  [data-vdd-skin="chrome"][data-color-scheme="light"] {
@@ -1394,8 +1439,8 @@ body.vdd-dragging-active {
1394
1439
  --vdd-window-bg: rgba(255, 255, 255, var(--vdd-window-opacity, 1.0));
1395
1440
  --vdd-window-border: #cbd5e1;
1396
1441
  --vdd-window-header-bg: #dee1e6;
1397
- --vdd-accent-color: #1a73e8;
1398
- --vdd-accent-glow: rgba(26, 115, 232, 0.15);
1442
+ --vdd-accent-color: var(--vdd-brand-accent, #1a73e8);
1443
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
1399
1444
  --vdd-border-panel: #dadce0;
1400
1445
  --vdd-bg-tab-inactive: #dee1e6;
1401
1446
  --vdd-text-tab-inactive: #474747;
@@ -1404,12 +1449,12 @@ body.vdd-dragging-active {
1404
1449
  --vdd-panel-card-border: #dadce0;
1405
1450
  --vdd-window-text: #1f1f1f;
1406
1451
  --vdd-panel-text: #1f1f1f;
1407
- --vdd-panel-title-color: #1a73e8;
1452
+ --vdd-panel-title-color: var(--vdd-accent-color);
1408
1453
  --vdd-close-btn-color: #474747;
1409
1454
  --vdd-close-btn-active-color: #1f1f1f;
1410
- --vdd-tab-icon-active: #1a73e8;
1411
- --vdd-toolbar-btn-radio-active-bg: rgba(26, 115, 232, 0.12);
1412
- --vdd-toolbar-btn-toggle-active-bg: rgba(26, 115, 232, 0.07);
1455
+ --vdd-tab-icon-active: var(--vdd-accent-color);
1456
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 12%, transparent);
1457
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 7%, transparent);
1413
1458
  }
1414
1459
 
1415
1460
  /* Chrome tab angled geometry shapes */
@@ -1430,14 +1475,15 @@ body.vdd-dragging-active {
1430
1475
  SKIN 4: Fluent Slate Preset
1431
1476
  -------------------------------------------------------------------------- */
1432
1477
  [data-vdd-skin="slate"] {
1478
+ --vdd-skin-font-family: 'Segoe UI Variable Text', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif; /* Fluent's stack */
1433
1479
  --vdd-bg-workspace: #0f172a;
1434
1480
  --vdd-bg-panel: #1e293b;
1435
1481
  --vdd-bg-tab-bar: #0f172a;
1436
1482
  --vdd-window-bg: rgba(30, 41, 59, var(--vdd-window-opacity, 1.0));
1437
1483
  --vdd-window-border: #334155;
1438
1484
  --vdd-window-header-bg: #1e293b;
1439
- --vdd-accent-color: #38bdf8;
1440
- --vdd-accent-glow: rgba(56, 189, 248, 0.15);
1485
+ --vdd-accent-color: var(--vdd-brand-accent, #38bdf8);
1486
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
1441
1487
  --vdd-border-panel: #334155;
1442
1488
  --vdd-bg-tab-inactive: #1e293b;
1443
1489
  --vdd-text-tab-inactive: #64748b;
@@ -1455,8 +1501,8 @@ body.vdd-dragging-active {
1455
1501
  --vdd-window-bg: rgba(255, 255, 255, var(--vdd-window-opacity, 1.0));
1456
1502
  --vdd-window-border: #cbd5e1;
1457
1503
  --vdd-window-header-bg: #f8fafc;
1458
- --vdd-accent-color: #0078d4;
1459
- --vdd-accent-glow: rgba(0, 120, 212, 0.15);
1504
+ --vdd-accent-color: var(--vdd-brand-accent, #0078d4);
1505
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
1460
1506
  --vdd-border-panel: #e2e8f0;
1461
1507
  --vdd-bg-tab-inactive: #f8fafc;
1462
1508
  --vdd-text-tab-inactive: #475569;
@@ -1465,12 +1511,12 @@ body.vdd-dragging-active {
1465
1511
  --vdd-panel-card-border: #cbd5e1;
1466
1512
  --vdd-window-text: #0f172a;
1467
1513
  --vdd-panel-text: #0f172a;
1468
- --vdd-panel-title-color: #0078d4;
1514
+ --vdd-panel-title-color: var(--vdd-accent-color);
1469
1515
  --vdd-close-btn-color: #475569;
1470
1516
  --vdd-close-btn-active-color: #0f172a;
1471
- --vdd-tab-icon-active: #0078d4;
1472
- --vdd-toolbar-btn-radio-active-bg: rgba(0, 120, 212, 0.10);
1473
- --vdd-toolbar-btn-toggle-active-bg: rgba(0, 120, 212, 0.06);
1517
+ --vdd-tab-icon-active: var(--vdd-accent-color);
1518
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 10%, transparent);
1519
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
1474
1520
  }
1475
1521
 
1476
1522
  [data-vdd-skin="slate"] .vdd-workspace-tab.vdd-active::before {
@@ -1483,14 +1529,15 @@ body.vdd-dragging-active {
1483
1529
  SKIN 5: Nordic Frost Preset (Nord Theme)
1484
1530
  -------------------------------------------------------------------------- */
1485
1531
  [data-vdd-skin="nord"] {
1532
+ --vdd-skin-font-family: 'Avenir Next', 'Nunito', 'Segoe UI', system-ui, sans-serif; /* no official font: a softer humanist sans */
1486
1533
  --vdd-bg-workspace: #2e3440;
1487
1534
  --vdd-bg-panel: #3b4252;
1488
1535
  --vdd-bg-tab-bar: #2e3440;
1489
1536
  --vdd-window-bg: rgba(59, 66, 82, var(--vdd-window-opacity, 1.0));
1490
1537
  --vdd-window-border: #434c5e;
1491
1538
  --vdd-window-header-bg: #2e3440;
1492
- --vdd-accent-color: #88c0d0;
1493
- --vdd-accent-glow: rgba(136, 192, 208, 0.2);
1539
+ --vdd-accent-color: var(--vdd-brand-accent, #88c0d0);
1540
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 20%, transparent);
1494
1541
  --vdd-border-panel: #434c5e;
1495
1542
  --vdd-bg-tab-inactive: #2e3440;
1496
1543
  --vdd-text-tab-inactive: #d8dee9;
@@ -1498,14 +1545,14 @@ body.vdd-dragging-active {
1498
1545
  --vdd-panel-card-bg: #2e3440;
1499
1546
  --vdd-panel-card-border: #4c566a;
1500
1547
  --vdd-close-btn-color: #d8dee9;
1501
- --vdd-close-btn-active-color: #88c0d0;
1502
- --vdd-scrollbar-thumb: rgba(136, 192, 208, 0.25);
1503
- --vdd-scrollbar-thumb-hover: rgba(136, 192, 208, 0.4);
1548
+ --vdd-close-btn-active-color: var(--vdd-accent-color);
1549
+ --vdd-scrollbar-thumb: color-mix(in srgb, var(--vdd-accent-color) 25%, transparent);
1550
+ --vdd-scrollbar-thumb-hover: color-mix(in srgb, var(--vdd-accent-color) 40%, transparent);
1504
1551
  --vdd-window-text: #eceff4;
1505
1552
  --vdd-panel-text: #eceff4;
1506
- --vdd-tab-icon-active: #88c0d0;
1507
- --vdd-toolbar-btn-radio-active-bg: rgba(136, 192, 208, 0.14);
1508
- --vdd-toolbar-btn-toggle-active-bg: rgba(136, 192, 208, 0.08);
1553
+ --vdd-tab-icon-active: var(--vdd-accent-color);
1554
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 14%, transparent);
1555
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 8%, transparent);
1509
1556
  }
1510
1557
 
1511
1558
  [data-vdd-skin="nord"][data-color-scheme="light"] {
@@ -1515,8 +1562,8 @@ body.vdd-dragging-active {
1515
1562
  --vdd-window-bg: rgba(236, 239, 244, var(--vdd-window-opacity, 1.0));
1516
1563
  --vdd-window-border: #d8dee9;
1517
1564
  --vdd-window-header-bg: #e5e9f0;
1518
- --vdd-accent-color: #5e81ac;
1519
- --vdd-accent-glow: rgba(94, 129, 172, 0.15);
1565
+ --vdd-accent-color: var(--vdd-brand-accent, #5e81ac);
1566
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
1520
1567
  --vdd-border-panel: #d8dee9;
1521
1568
  --vdd-bg-tab-inactive: #e5e9f0;
1522
1569
  --vdd-text-tab-inactive: #4c566a;
@@ -1524,15 +1571,15 @@ body.vdd-dragging-active {
1524
1571
  --vdd-panel-card-bg: #e5e9f0;
1525
1572
  --vdd-panel-card-border: #d8dee9;
1526
1573
  --vdd-close-btn-color: #4c566a;
1527
- --vdd-close-btn-active-color: #5e81ac;
1528
- --vdd-scrollbar-thumb: rgba(94, 129, 172, 0.2);
1529
- --vdd-scrollbar-thumb-hover: rgba(94, 129, 172, 0.35);
1574
+ --vdd-close-btn-active-color: var(--vdd-accent-color);
1575
+ --vdd-scrollbar-thumb: color-mix(in srgb, var(--vdd-accent-color) 20%, transparent);
1576
+ --vdd-scrollbar-thumb-hover: color-mix(in srgb, var(--vdd-accent-color) 35%, transparent);
1530
1577
  --vdd-window-text: #2e3440;
1531
1578
  --vdd-panel-text: #2e3440;
1532
- --vdd-panel-title-color: #5e81ac;
1533
- --vdd-tab-icon-active: #5e81ac;
1534
- --vdd-toolbar-btn-radio-active-bg: rgba(94, 129, 172, 0.12);
1535
- --vdd-toolbar-btn-toggle-active-bg: rgba(94, 129, 172, 0.07);
1579
+ --vdd-panel-title-color: var(--vdd-accent-color);
1580
+ --vdd-tab-icon-active: var(--vdd-accent-color);
1581
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 12%, transparent);
1582
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 7%, transparent);
1536
1583
  }
1537
1584
 
1538
1585
  /* --------------------------------------------------------------------------
@@ -1546,8 +1593,8 @@ body.vdd-dragging-active {
1546
1593
  --vdd-window-border: #1a1a1a;
1547
1594
  --vdd-window-border-focused: #333333;
1548
1595
  --vdd-window-header-bg: #000000;
1549
- --vdd-accent-color: #ffffff;
1550
- --vdd-accent-glow: rgba(255, 255, 255, 0.08);
1596
+ --vdd-accent-color: var(--vdd-brand-accent, #ffffff);
1597
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 8%, transparent);
1551
1598
  --vdd-border-panel: #1a1a1a;
1552
1599
  --vdd-bg-tab-inactive: #000000;
1553
1600
  --vdd-text-tab-inactive: #737373;
@@ -1560,9 +1607,9 @@ body.vdd-dragging-active {
1560
1607
  --vdd-scrollbar-thumb-hover: rgba(255, 255, 255, 0.35);
1561
1608
  --vdd-window-text: #ffffff;
1562
1609
  --vdd-panel-text: #ffffff;
1563
- --vdd-tab-icon-active: #ffffff;
1564
- --vdd-toolbar-btn-radio-active-bg: rgba(255, 255, 255, 0.10);
1565
- --vdd-toolbar-btn-toggle-active-bg: rgba(255, 255, 255, 0.06);
1610
+ --vdd-tab-icon-active: var(--vdd-accent-color);
1611
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 10%, transparent);
1612
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
1566
1613
  }
1567
1614
 
1568
1615
  [data-vdd-skin="obsidian"][data-color-scheme="light"] {
@@ -1573,8 +1620,8 @@ body.vdd-dragging-active {
1573
1620
  --vdd-window-border: #e5e5e5;
1574
1621
  --vdd-window-border-focused: #a3a3a3;
1575
1622
  --vdd-window-header-bg: #ffffff;
1576
- --vdd-accent-color: #000000;
1577
- --vdd-accent-glow: rgba(0, 0, 0, 0.05);
1623
+ --vdd-accent-color: var(--vdd-brand-accent, #000000);
1624
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 5%, transparent);
1578
1625
  --vdd-border-panel: #eaeaea;
1579
1626
  --vdd-bg-tab-inactive: #ffffff;
1580
1627
  --vdd-text-tab-inactive: #737373;
@@ -1587,10 +1634,10 @@ body.vdd-dragging-active {
1587
1634
  --vdd-scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
1588
1635
  --vdd-window-text: #000000;
1589
1636
  --vdd-panel-text: #000000;
1590
- --vdd-panel-title-color: #000000;
1591
- --vdd-tab-icon-active: #000000;
1592
- --vdd-toolbar-btn-radio-active-bg: rgba(0, 0, 0, 0.10);
1593
- --vdd-toolbar-btn-toggle-active-bg: rgba(0, 0, 0, 0.06);
1637
+ --vdd-panel-title-color: var(--vdd-accent-color);
1638
+ --vdd-tab-icon-active: var(--vdd-accent-color);
1639
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 10%, transparent);
1640
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
1594
1641
  }
1595
1642
 
1596
1643
  /* Obsidian custom borderless panel elevations */
@@ -1599,7 +1646,7 @@ body.vdd-dragging-active {
1599
1646
  border-radius: 6px;
1600
1647
  }
1601
1648
  [data-vdd-skin="obsidian"] .vdd-floating-window.vdd-window-focused {
1602
- box-shadow: 0 24px 50px rgba(255, 255, 255, 0.06), 0 0 1px rgba(255, 255, 255, 0.4) !important;
1649
+ box-shadow: 0 24px 50px color-mix(in srgb, var(--vdd-accent-color) 6%, transparent), 0 0 1px color-mix(in srgb, var(--vdd-accent-color) 40%, transparent) !important;
1603
1650
  }
1604
1651
  [data-vdd-skin="obsidian"][data-color-scheme="light"] .vdd-floating-window {
1605
1652
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1) !important;
@@ -1612,15 +1659,16 @@ body.vdd-dragging-active {
1612
1659
  SKIN 7: Tokyo Night Preset
1613
1660
  -------------------------------------------------------------------------- */
1614
1661
  [data-vdd-skin="tokyo"] {
1662
+ --vdd-skin-font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* no official font: a terminal/editor feel */
1615
1663
  --vdd-bg-workspace: #1a1b26;
1616
1664
  --vdd-bg-panel: #24283c;
1617
1665
  --vdd-bg-tab-bar: #1f2335;
1618
1666
  --vdd-window-bg: rgba(36, 40, 60, var(--vdd-window-opacity, 1.0));
1619
1667
  --vdd-window-border: #383e5a;
1620
- --vdd-window-border-focused: #7aa2f7;
1668
+ --vdd-window-border-focused: var(--vdd-accent-color);
1621
1669
  --vdd-window-header-bg: #1f2335;
1622
- --vdd-accent-color: #bb9af7;
1623
- --vdd-accent-glow: rgba(187, 154, 247, 0.25);
1670
+ --vdd-accent-color: var(--vdd-brand-accent, #bb9af7);
1671
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 25%, transparent);
1624
1672
  --vdd-border-panel: #383e5a;
1625
1673
  --vdd-bg-tab-inactive: #1f2335;
1626
1674
  --vdd-text-tab-inactive: #787c99;
@@ -1628,14 +1676,14 @@ body.vdd-dragging-active {
1628
1676
  --vdd-panel-card-bg: #1a1b26;
1629
1677
  --vdd-panel-card-border: #383e5a;
1630
1678
  --vdd-close-btn-color: #787c99;
1631
- --vdd-close-btn-active-color: #7aa2f7;
1632
- --vdd-scrollbar-thumb: rgba(122, 162, 247, 0.25);
1633
- --vdd-scrollbar-thumb-hover: rgba(187, 154, 247, 0.4);
1679
+ --vdd-close-btn-active-color: var(--vdd-accent-color);
1680
+ --vdd-scrollbar-thumb: color-mix(in srgb, var(--vdd-accent-color) 25%, transparent);
1681
+ --vdd-scrollbar-thumb-hover: color-mix(in srgb, var(--vdd-accent-color) 40%, transparent);
1634
1682
  --vdd-window-text: #c0caf5;
1635
1683
  --vdd-panel-text: #c0caf5;
1636
- --vdd-tab-icon-active: #7aa2f7;
1637
- --vdd-toolbar-btn-radio-active-bg: rgba(122, 162, 247, 0.14);
1638
- --vdd-toolbar-btn-toggle-active-bg: rgba(122, 162, 247, 0.08);
1684
+ --vdd-tab-icon-active: var(--vdd-accent-color);
1685
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 14%, transparent);
1686
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 8%, transparent);
1639
1687
  }
1640
1688
 
1641
1689
  [data-vdd-skin="tokyo"][data-color-scheme="light"] {
@@ -1644,10 +1692,10 @@ body.vdd-dragging-active {
1644
1692
  --vdd-bg-tab-bar: #d5d6db;
1645
1693
  --vdd-window-bg: rgba(242, 244, 248, var(--vdd-window-opacity, 1.0));
1646
1694
  --vdd-window-border: #b4b5b9;
1647
- --vdd-window-border-focused: #385af6;
1695
+ --vdd-window-border-focused: var(--vdd-accent-color);
1648
1696
  --vdd-window-header-bg: #d5d6db;
1649
- --vdd-accent-color: #9854f1;
1650
- --vdd-accent-glow: rgba(152, 84, 241, 0.15);
1697
+ --vdd-accent-color: var(--vdd-brand-accent, #9854f1);
1698
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
1651
1699
  --vdd-border-panel: #b4b5b9;
1652
1700
  --vdd-bg-tab-inactive: #d5d6db;
1653
1701
  --vdd-text-tab-inactive: #565a6e;
@@ -1655,15 +1703,15 @@ body.vdd-dragging-active {
1655
1703
  --vdd-panel-card-bg: #e1e2e7;
1656
1704
  --vdd-panel-card-border: #b4b5b9;
1657
1705
  --vdd-close-btn-color: #565a6e;
1658
- --vdd-close-btn-active-color: #385af6;
1659
- --vdd-scrollbar-thumb: rgba(56, 90, 246, 0.2);
1660
- --vdd-scrollbar-thumb-hover: rgba(152, 84, 241, 0.35);
1706
+ --vdd-close-btn-active-color: var(--vdd-accent-color);
1707
+ --vdd-scrollbar-thumb: color-mix(in srgb, var(--vdd-accent-color) 20%, transparent);
1708
+ --vdd-scrollbar-thumb-hover: color-mix(in srgb, var(--vdd-accent-color) 35%, transparent);
1661
1709
  --vdd-window-text: #383e56;
1662
1710
  --vdd-panel-text: #383e56;
1663
- --vdd-panel-title-color: #9854f1;
1664
- --vdd-tab-icon-active: #385af6;
1665
- --vdd-toolbar-btn-radio-active-bg: rgba(56, 90, 246, 0.12);
1666
- --vdd-toolbar-btn-toggle-active-bg: rgba(56, 90, 246, 0.07);
1711
+ --vdd-panel-title-color: var(--vdd-accent-color);
1712
+ --vdd-tab-icon-active: var(--vdd-accent-color);
1713
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 12%, transparent);
1714
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 7%, transparent);
1667
1715
  }
1668
1716
 
1669
1717
  /* ==========================================================================
@@ -1707,11 +1755,11 @@ body.vdd-dragging-active {
1707
1755
  slate — Fluent Pill (floating capsule, accent-tinted)
1708
1756
  -------------------------------------------------------------------------- */
1709
1757
  [data-vdd-skin="slate"] {
1710
- --vdd-tab-btn-active-bg: rgba(96, 165, 250, 0.14);
1758
+ --vdd-tab-btn-active-bg: color-mix(in srgb, var(--vdd-accent-color) 14%, transparent);
1711
1759
  --vdd-tab-btn-active-width: 36px;
1712
1760
  --vdd-tab-btn-active-radius: 8px;
1713
1761
  --vdd-tab-accent-bar-width: 0px;
1714
- --vdd-toolbar-btn-radio-active-bg: rgba(96, 165, 250, 0.14);
1762
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 14%, transparent);
1715
1763
  --vdd-toolbar-accent-bar-width: 0px;
1716
1764
  }
1717
1765
  [data-vdd-skin="slate"] .vdd-sidebar-tab-btn.vdd-active {
@@ -1724,8 +1772,8 @@ body.vdd-dragging-active {
1724
1772
  border-radius: 8px !important;
1725
1773
  }
1726
1774
  [data-vdd-skin="slate"][data-color-scheme="light"] {
1727
- --vdd-tab-btn-active-bg: rgba(0, 120, 212, 0.12);
1728
- --vdd-toolbar-btn-radio-active-bg: rgba(0, 120, 212, 0.12);
1775
+ --vdd-tab-btn-active-bg: color-mix(in srgb, var(--vdd-accent-color) 12%, transparent);
1776
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 12%, transparent);
1729
1777
  }
1730
1778
 
1731
1779
  /* --------------------------------------------------------------------------
@@ -1796,78 +1844,78 @@ body.vdd-dragging-active {
1796
1844
  obsidian — Deep Glow (near-black fill, 2 px bar, inner glow, icon shadow)
1797
1845
  -------------------------------------------------------------------------- */
1798
1846
  [data-vdd-skin="obsidian"] {
1799
- --vdd-tab-btn-active-bg: rgba(255, 255, 255, 0.03);
1800
- --vdd-tab-btn-active-shadow: inset 0 0 12px rgba(255, 255, 255, 0.06);
1801
- --vdd-tab-btn-active-glow: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
1847
+ --vdd-tab-btn-active-bg: color-mix(in srgb, var(--vdd-accent-color) 3%, transparent);
1848
+ --vdd-tab-btn-active-shadow: inset 0 0 12px color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
1849
+ --vdd-tab-btn-active-glow: drop-shadow(0 0 5px color-mix(in srgb, var(--vdd-accent-color) 50%, transparent));
1802
1850
  --vdd-tab-accent-bar-width: 2px;
1803
- --vdd-toolbar-btn-radio-active-bg: rgba(255, 255, 255, 0.03);
1804
- --vdd-toolbar-btn-active-shadow: inset 0 0 12px rgba(255, 255, 255, 0.06);
1805
- --vdd-toolbar-btn-active-glow: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
1851
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 3%, transparent);
1852
+ --vdd-toolbar-btn-active-shadow: inset 0 0 12px color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
1853
+ --vdd-toolbar-btn-active-glow: drop-shadow(0 0 5px color-mix(in srgb, var(--vdd-accent-color) 50%, transparent));
1806
1854
  --vdd-toolbar-accent-bar-width: 2px;
1807
1855
  }
1808
1856
  [data-vdd-skin="obsidian"] .vdd-sidebar-tabs-strip.vdd-left .vdd-sidebar-tab-btn.vdd-active {
1809
- box-shadow: var(--vdd-tab-btn-active-shadow), inset 3px 0 8px rgba(255, 255, 255, 0.08) !important;
1857
+ box-shadow: var(--vdd-tab-btn-active-shadow), inset 3px 0 8px color-mix(in srgb, var(--vdd-accent-color) 8%, transparent) !important;
1810
1858
  }
1811
1859
  [data-vdd-skin="obsidian"] .vdd-sidebar-tabs-strip.vdd-right .vdd-sidebar-tab-btn.vdd-active {
1812
- box-shadow: var(--vdd-tab-btn-active-shadow), inset -3px 0 8px rgba(255, 255, 255, 0.08) !important;
1860
+ box-shadow: var(--vdd-tab-btn-active-shadow), inset -3px 0 8px color-mix(in srgb, var(--vdd-accent-color) 8%, transparent) !important;
1813
1861
  }
1814
1862
  [data-vdd-skin="obsidian"] .vdd-toolbar-strip.vdd-left .vdd-toolbar-btn-radio.vdd-active,
1815
1863
  [data-vdd-skin="obsidian"] .vdd-toolbar-strip.vdd-left .vdd-toolbar-btn-group.vdd-active {
1816
- box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 3px 0 8px rgba(255, 255, 255, 0.08) !important;
1864
+ box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 3px 0 8px color-mix(in srgb, var(--vdd-accent-color) 8%, transparent) !important;
1817
1865
  }
1818
1866
  [data-vdd-skin="obsidian"] .vdd-toolbar-strip.vdd-right .vdd-toolbar-btn-radio.vdd-active,
1819
1867
  [data-vdd-skin="obsidian"] .vdd-toolbar-strip.vdd-right .vdd-toolbar-btn-group.vdd-active {
1820
- box-shadow: var(--vdd-toolbar-btn-active-shadow), inset -3px 0 8px rgba(255, 255, 255, 0.08) !important;
1868
+ box-shadow: var(--vdd-toolbar-btn-active-shadow), inset -3px 0 8px color-mix(in srgb, var(--vdd-accent-color) 8%, transparent) !important;
1821
1869
  }
1822
1870
  [data-vdd-skin="obsidian"] .vdd-toolbar-strip.vdd-top .vdd-toolbar-btn-radio.vdd-active,
1823
1871
  [data-vdd-skin="obsidian"] .vdd-toolbar-strip.vdd-top .vdd-toolbar-btn-group.vdd-active {
1824
- box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 0 -3px 8px rgba(255, 255, 255, 0.08) !important;
1872
+ box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 0 -3px 8px color-mix(in srgb, var(--vdd-accent-color) 8%, transparent) !important;
1825
1873
  }
1826
1874
  [data-vdd-skin="obsidian"] .vdd-toolbar-strip.vdd-bottom .vdd-toolbar-btn-radio.vdd-active,
1827
1875
  [data-vdd-skin="obsidian"] .vdd-toolbar-strip.vdd-bottom .vdd-toolbar-btn-group.vdd-active {
1828
- box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 0 3px 8px rgba(255, 255, 255, 0.08) !important;
1876
+ box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 0 3px 8px color-mix(in srgb, var(--vdd-accent-color) 8%, transparent) !important;
1829
1877
  }
1830
1878
  [data-vdd-skin="obsidian"][data-color-scheme="light"] {
1831
- --vdd-tab-btn-active-shadow: inset 0 0 12px rgba(0, 0, 0, 0.06);
1832
- --vdd-tab-btn-active-glow: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
1833
- --vdd-toolbar-btn-active-shadow: inset 0 0 12px rgba(0, 0, 0, 0.06);
1834
- --vdd-toolbar-btn-active-glow: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
1879
+ --vdd-tab-btn-active-shadow: inset 0 0 12px color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
1880
+ --vdd-tab-btn-active-glow: drop-shadow(0 0 4px color-mix(in srgb, var(--vdd-accent-color) 40%, transparent));
1881
+ --vdd-toolbar-btn-active-shadow: inset 0 0 12px color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
1882
+ --vdd-toolbar-btn-active-glow: drop-shadow(0 0 4px color-mix(in srgb, var(--vdd-accent-color) 40%, transparent));
1835
1883
  }
1836
1884
 
1837
1885
  /* --------------------------------------------------------------------------
1838
1886
  tokyo — Neon Pulse (accent-blue tint, vivid neon glow)
1839
1887
  -------------------------------------------------------------------------- */
1840
1888
  [data-vdd-skin="tokyo"] {
1841
- --vdd-tab-btn-active-bg: rgba(122, 162, 247, 0.10);
1842
- --vdd-tab-btn-active-shadow: inset 0 0 16px rgba(122, 162, 247, 0.12);
1843
- --vdd-tab-btn-active-glow: drop-shadow(0 0 6px rgba(122, 162, 247, 0.65));
1889
+ --vdd-tab-btn-active-bg: color-mix(in srgb, var(--vdd-accent-color) 10%, transparent);
1890
+ --vdd-tab-btn-active-shadow: inset 0 0 16px color-mix(in srgb, var(--vdd-accent-color) 12%, transparent);
1891
+ --vdd-tab-btn-active-glow: drop-shadow(0 0 6px color-mix(in srgb, var(--vdd-accent-color) 65%, transparent));
1844
1892
  --vdd-tab-accent-bar-width: 2px;
1845
- --vdd-toolbar-btn-radio-active-bg: rgba(122, 162, 247, 0.10);
1846
- --vdd-toolbar-btn-active-shadow: inset 0 0 16px rgba(122, 162, 247, 0.12);
1847
- --vdd-toolbar-btn-active-glow: drop-shadow(0 0 6px rgba(122, 162, 247, 0.65));
1893
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 10%, transparent);
1894
+ --vdd-toolbar-btn-active-shadow: inset 0 0 16px color-mix(in srgb, var(--vdd-accent-color) 12%, transparent);
1895
+ --vdd-toolbar-btn-active-glow: drop-shadow(0 0 6px color-mix(in srgb, var(--vdd-accent-color) 65%, transparent));
1848
1896
  --vdd-toolbar-accent-bar-width: 2px;
1849
1897
  }
1850
1898
  [data-vdd-skin="tokyo"] .vdd-sidebar-tabs-strip.vdd-left .vdd-sidebar-tab-btn.vdd-active {
1851
- box-shadow: var(--vdd-tab-btn-active-shadow), inset 3px 0 12px rgba(122, 162, 247, 0.18) !important;
1899
+ box-shadow: var(--vdd-tab-btn-active-shadow), inset 3px 0 12px color-mix(in srgb, var(--vdd-accent-color) 18%, transparent) !important;
1852
1900
  }
1853
1901
  [data-vdd-skin="tokyo"] .vdd-sidebar-tabs-strip.vdd-right .vdd-sidebar-tab-btn.vdd-active {
1854
- box-shadow: var(--vdd-tab-btn-active-shadow), inset -3px 0 12px rgba(122, 162, 247, 0.18) !important;
1902
+ box-shadow: var(--vdd-tab-btn-active-shadow), inset -3px 0 12px color-mix(in srgb, var(--vdd-accent-color) 18%, transparent) !important;
1855
1903
  }
1856
1904
  [data-vdd-skin="tokyo"] .vdd-toolbar-strip.vdd-left .vdd-toolbar-btn-radio.vdd-active,
1857
1905
  [data-vdd-skin="tokyo"] .vdd-toolbar-strip.vdd-left .vdd-toolbar-btn-group.vdd-active {
1858
- box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 3px 0 12px rgba(122, 162, 247, 0.18) !important;
1906
+ box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 3px 0 12px color-mix(in srgb, var(--vdd-accent-color) 18%, transparent) !important;
1859
1907
  }
1860
1908
  [data-vdd-skin="tokyo"] .vdd-toolbar-strip.vdd-right .vdd-toolbar-btn-radio.vdd-active,
1861
1909
  [data-vdd-skin="tokyo"] .vdd-toolbar-strip.vdd-right .vdd-toolbar-btn-group.vdd-active {
1862
- box-shadow: var(--vdd-toolbar-btn-active-shadow), inset -3px 0 12px rgba(122, 162, 247, 0.18) !important;
1910
+ box-shadow: var(--vdd-toolbar-btn-active-shadow), inset -3px 0 12px color-mix(in srgb, var(--vdd-accent-color) 18%, transparent) !important;
1863
1911
  }
1864
1912
  [data-vdd-skin="tokyo"] .vdd-toolbar-strip.vdd-top .vdd-toolbar-btn-radio.vdd-active,
1865
1913
  [data-vdd-skin="tokyo"] .vdd-toolbar-strip.vdd-top .vdd-toolbar-btn-group.vdd-active {
1866
- box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 0 -3px 12px rgba(122, 162, 247, 0.18) !important;
1914
+ box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 0 -3px 12px color-mix(in srgb, var(--vdd-accent-color) 18%, transparent) !important;
1867
1915
  }
1868
1916
  [data-vdd-skin="tokyo"] .vdd-toolbar-strip.vdd-bottom .vdd-toolbar-btn-radio.vdd-active,
1869
1917
  [data-vdd-skin="tokyo"] .vdd-toolbar-strip.vdd-bottom .vdd-toolbar-btn-group.vdd-active {
1870
- box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 0 3px 12px rgba(122, 162, 247, 0.18) !important;
1918
+ box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 0 3px 12px color-mix(in srgb, var(--vdd-accent-color) 18%, transparent) !important;
1871
1919
  }
1872
1920
 
1873
1921
  /* --------------------------------------------------------------------------
@@ -1876,12 +1924,12 @@ body.vdd-dragging-active {
1876
1924
  A contained chip that floats inside the strip — not an edge-connecting bridge.
1877
1925
  -------------------------------------------------------------------------- */
1878
1926
  [data-vdd-skin="macos"] {
1879
- --vdd-tab-btn-active-bg: rgba(56, 189, 248, 0.2);
1927
+ --vdd-tab-btn-active-bg: color-mix(in srgb, var(--vdd-accent-color) 20%, transparent);
1880
1928
  --vdd-tab-btn-active-width: 36px;
1881
1929
  --vdd-tab-btn-active-radius: 10px;
1882
1930
  --vdd-tab-btn-active-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
1883
1931
  --vdd-tab-accent-bar-width: 0px;
1884
- --vdd-toolbar-btn-radio-active-bg: rgba(56, 189, 248, 0.2);
1932
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 20%, transparent);
1885
1933
  --vdd-toolbar-btn-active-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
1886
1934
  --vdd-toolbar-accent-bar-width: 0px;
1887
1935
  }
@@ -1895,10 +1943,10 @@ body.vdd-dragging-active {
1895
1943
  border-radius: 10px !important;
1896
1944
  }
1897
1945
  [data-vdd-skin="macos"][data-color-scheme="light"] {
1898
- --vdd-tab-btn-active-bg: rgba(0, 102, 204, 0.16);
1899
- --vdd-tab-btn-active-shadow: inset 0 0 0 1px rgba(0, 102, 204, 0.3);
1900
- --vdd-toolbar-btn-radio-active-bg: rgba(0, 102, 204, 0.16);
1901
- --vdd-toolbar-btn-active-shadow: inset 0 0 0 1px rgba(0, 102, 204, 0.3);
1946
+ --vdd-tab-btn-active-bg: color-mix(in srgb, var(--vdd-accent-color) 16%, transparent);
1947
+ --vdd-tab-btn-active-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vdd-accent-color) 30%, transparent);
1948
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 16%, transparent);
1949
+ --vdd-toolbar-btn-active-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vdd-accent-color) 30%, transparent);
1902
1950
  }
1903
1951
 
1904
1952
  /* ─── Sidebar structure ──────────────────────────────────────────────────────
@@ -2443,7 +2491,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
2443
2491
  height: 80px;
2444
2492
  border: 2px dashed var(--vdd-accent-color, #38bdf8);
2445
2493
  border-radius: 8px;
2446
- background: rgba(56, 189, 248, 0.06);
2494
+ background: color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
2447
2495
  pointer-events: auto;
2448
2496
  z-index: calc(var(--vdd-z-base, 1000) + 9000);
2449
2497
  opacity: 0.55;
@@ -2455,7 +2503,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
2455
2503
  .vdd-corner-zone--bottom-right { bottom: 0; right: 0; }
2456
2504
  .vdd-corner-zone--hovered {
2457
2505
  opacity: 1;
2458
- background: rgba(56, 189, 248, 0.18);
2506
+ background: color-mix(in srgb, var(--vdd-accent-color) 18%, transparent);
2459
2507
  border-style: solid;
2460
2508
  }
2461
2509
 
@@ -2605,16 +2653,16 @@ html.vdd-no-animations [class*="vdd-"]::after {
2605
2653
 
2606
2654
  /* obsidian & tokyo — flip the inset glow X offset sign */
2607
2655
  [dir="rtl"] [data-vdd-skin="obsidian"] .vdd-sidebar-tabs-strip.vdd-left .vdd-sidebar-tab-btn.vdd-active {
2608
- box-shadow: var(--vdd-tab-btn-active-shadow), inset -3px 0 8px rgba(255, 255, 255, 0.08) !important;
2656
+ box-shadow: var(--vdd-tab-btn-active-shadow), inset -3px 0 8px color-mix(in srgb, var(--vdd-accent-color) 8%, transparent) !important;
2609
2657
  }
2610
2658
  [dir="rtl"] [data-vdd-skin="obsidian"] .vdd-sidebar-tabs-strip.vdd-right .vdd-sidebar-tab-btn.vdd-active {
2611
- box-shadow: var(--vdd-tab-btn-active-shadow), inset 3px 0 8px rgba(255, 255, 255, 0.08) !important;
2659
+ box-shadow: var(--vdd-tab-btn-active-shadow), inset 3px 0 8px color-mix(in srgb, var(--vdd-accent-color) 8%, transparent) !important;
2612
2660
  }
2613
2661
  [dir="rtl"] [data-vdd-skin="tokyo"] .vdd-sidebar-tabs-strip.vdd-left .vdd-sidebar-tab-btn.vdd-active {
2614
- box-shadow: var(--vdd-tab-btn-active-shadow), inset -3px 0 12px rgba(122, 162, 247, 0.18) !important;
2662
+ box-shadow: var(--vdd-tab-btn-active-shadow), inset -3px 0 12px color-mix(in srgb, var(--vdd-accent-color) 18%, transparent) !important;
2615
2663
  }
2616
2664
  [dir="rtl"] [data-vdd-skin="tokyo"] .vdd-sidebar-tabs-strip.vdd-right .vdd-sidebar-tab-btn.vdd-active {
2617
- box-shadow: var(--vdd-tab-btn-active-shadow), inset 3px 0 12px rgba(122, 162, 247, 0.18) !important;
2665
+ box-shadow: var(--vdd-tab-btn-active-shadow), inset 3px 0 12px color-mix(in srgb, var(--vdd-accent-color) 18%, transparent) !important;
2618
2666
  }
2619
2667
 
2620
2668
  /* chrome — swap the capsule border-radius when strips change sides */
@@ -3142,7 +3190,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
3142
3190
  .vdd-btn-primary {
3143
3191
  background: var(--vdd-accent-color, #38bdf8);
3144
3192
  border: 1px solid var(--vdd-accent-color, #38bdf8);
3145
- color: #090b11;
3193
+ color: var(--vdd-brand-on-accent, #090b11);
3146
3194
  }
3147
3195
 
3148
3196
  .vdd-btn-primary:hover {
@@ -3150,7 +3198,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
3150
3198
  }
3151
3199
 
3152
3200
  [data-color-scheme="light"] .vdd-btn-primary {
3153
- color: #ffffff;
3201
+ color: var(--vdd-brand-on-accent, #ffffff);
3154
3202
  }
3155
3203
 
3156
3204
  /* ============================================================
@@ -3313,23 +3361,23 @@ html.vdd-no-animations [class*="vdd-"]::after {
3313
3361
  }
3314
3362
 
3315
3363
  [data-vdd-skin="slate"] {
3316
- --vdd-panel-toolbar-btn-active-color: #60a5fa;
3317
- --vdd-panel-toolbar-btn-active-bg: rgba(96, 165, 250, 0.15);
3364
+ --vdd-panel-toolbar-btn-active-color: var(--vdd-accent-color);
3365
+ --vdd-panel-toolbar-btn-active-bg: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
3318
3366
  }
3319
3367
 
3320
3368
  [data-vdd-skin="nord"] {
3321
- --vdd-panel-toolbar-btn-active-color: #88c0d0;
3322
- --vdd-panel-toolbar-btn-active-bg: rgba(136, 192, 208, 0.15);
3369
+ --vdd-panel-toolbar-btn-active-color: var(--vdd-accent-color);
3370
+ --vdd-panel-toolbar-btn-active-bg: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
3323
3371
  }
3324
3372
 
3325
3373
  [data-vdd-skin="obsidian"] {
3326
- --vdd-panel-toolbar-btn-active-color: #a78bfa;
3327
- --vdd-panel-toolbar-btn-active-bg: rgba(167, 139, 250, 0.15);
3374
+ --vdd-panel-toolbar-btn-active-color: var(--vdd-accent-color);
3375
+ --vdd-panel-toolbar-btn-active-bg: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
3328
3376
  }
3329
3377
 
3330
3378
  [data-vdd-skin="tokyo"] {
3331
- --vdd-panel-toolbar-btn-active-color: #7aa2f7;
3332
- --vdd-panel-toolbar-btn-active-bg: rgba(122, 162, 247, 0.15);
3379
+ --vdd-panel-toolbar-btn-active-color: var(--vdd-accent-color);
3380
+ --vdd-panel-toolbar-btn-active-bg: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
3333
3381
  }
3334
3382
 
3335
3383
  /* ==========================================================================
@@ -3744,7 +3792,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
3744
3792
  height: 80px;
3745
3793
  border: 2px dashed var(--vdd-accent-color, #38bdf8);
3746
3794
  border-radius: 8px;
3747
- background: rgba(56, 189, 248, 0.06);
3795
+ background: color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
3748
3796
  pointer-events: none;
3749
3797
  z-index: 200;
3750
3798
  opacity: 0.55;
@@ -3753,7 +3801,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
3753
3801
 
3754
3802
  .vdd-panel-float-dropzone--hovered {
3755
3803
  opacity: 1;
3756
- background: rgba(56, 189, 248, 0.18);
3804
+ background: color-mix(in srgb, var(--vdd-accent-color) 18%, transparent);
3757
3805
  border-style: solid;
3758
3806
  }
3759
3807