@vanduo-oss/framework 1.3.9 → 1.4.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 (119) hide show
  1. package/README.md +87 -42
  2. package/css/components/affix.css +1 -1
  3. package/css/components/alerts.css +40 -40
  4. package/css/components/avatar.css +33 -33
  5. package/css/components/badges.css +42 -42
  6. package/css/components/breadcrumbs.css +5 -5
  7. package/css/components/bubble.css +4 -4
  8. package/css/components/buttons.css +124 -124
  9. package/css/components/cards.css +10 -10
  10. package/css/components/chips.css +28 -28
  11. package/css/components/code-snippet.css +18 -18
  12. package/css/components/collapsible.css +20 -20
  13. package/css/components/collections.css +21 -21
  14. package/css/components/datepicker.css +13 -13
  15. package/css/components/doc-search.css +46 -53
  16. package/css/components/doc-tabs.css +10 -10
  17. package/css/components/draggable.css +34 -34
  18. package/css/components/dropdown.css +14 -14
  19. package/css/components/expanding-cards.css +1 -1
  20. package/css/components/fab.css +7 -7
  21. package/css/components/flow.css +3 -3
  22. package/css/components/footer.css +26 -26
  23. package/css/components/forms.css +95 -83
  24. package/css/components/image-box.css +13 -17
  25. package/css/components/modals.css +8 -8
  26. package/css/components/music-player.css +26 -26
  27. package/css/components/navbar.css +27 -27
  28. package/css/components/pagination.css +15 -15
  29. package/css/components/preloader.css +10 -10
  30. package/css/components/progress.css +8 -8
  31. package/css/components/rating.css +4 -4
  32. package/css/components/sidenav.css +14 -14
  33. package/css/components/skeleton.css +10 -9
  34. package/css/components/spinner.css +10 -10
  35. package/css/components/spotlight.css +7 -7
  36. package/css/components/stepper.css +13 -13
  37. package/css/components/suggest.css +10 -10
  38. package/css/components/tabs.css +22 -22
  39. package/css/components/theme-customizer.css +87 -87
  40. package/css/components/timeline.css +14 -14
  41. package/css/components/timepicker.css +7 -7
  42. package/css/components/toast.css +31 -31
  43. package/css/components/tooltips.css +11 -11
  44. package/css/components/transfer.css +12 -12
  45. package/css/components/tree.css +9 -9
  46. package/css/components/waypoint.css +3 -3
  47. package/css/core/colors.css +34 -34
  48. package/css/core/grid.css +1 -6
  49. package/css/core/helpers.css +11 -11
  50. package/css/core/tokens.css +113 -35
  51. package/css/core/typography.css +14 -12
  52. package/css/core/vd-aliases.css +100 -52
  53. package/css/effects/morph.css +5 -5
  54. package/css/utilities/media.css +2 -2
  55. package/css/utilities/table.css +34 -34
  56. package/css/utilities/transitions.css +22 -10
  57. package/css/vanduo.css +14 -34
  58. package/dist/build-info.json +3 -3
  59. package/dist/vanduo.cjs.js +929 -289
  60. package/dist/vanduo.cjs.js.map +3 -3
  61. package/dist/vanduo.cjs.min.js +7 -7
  62. package/dist/vanduo.cjs.min.js.map +3 -3
  63. package/dist/vanduo.css +7914 -7823
  64. package/dist/vanduo.css.map +1 -1
  65. package/dist/vanduo.esm.js +929 -289
  66. package/dist/vanduo.esm.js.map +3 -3
  67. package/dist/vanduo.esm.min.js +7 -7
  68. package/dist/vanduo.esm.min.js.map +3 -3
  69. package/dist/vanduo.js +929 -289
  70. package/dist/vanduo.js.map +3 -3
  71. package/dist/vanduo.min.css +2 -2
  72. package/dist/vanduo.min.css.map +1 -1
  73. package/dist/vanduo.min.js +7 -7
  74. package/dist/vanduo.min.js.map +3 -3
  75. package/js/components/affix.js +2 -2
  76. package/js/components/bubble.js +3 -3
  77. package/js/components/code-snippet.js +129 -5
  78. package/js/components/collapsible.js +2 -3
  79. package/js/components/datepicker.js +2 -2
  80. package/js/components/doc-search.js +69 -11
  81. package/js/components/draggable.js +4 -4
  82. package/js/components/dropdown.js +2 -3
  83. package/js/components/expanding-cards.js +2 -2
  84. package/js/components/flow.js +2 -2
  85. package/js/components/font-switcher.js +23 -13
  86. package/js/components/glass.js +2 -2
  87. package/js/components/grid.js +19 -8
  88. package/js/components/image-box.js +49 -10
  89. package/js/components/lazy-load.js +81 -9
  90. package/js/components/modals.js +28 -12
  91. package/js/components/morph.js +2 -2
  92. package/js/components/music-player.js +2 -2
  93. package/js/components/navbar.js +2 -2
  94. package/js/components/pagination.js +2 -3
  95. package/js/components/parallax.js +9 -10
  96. package/js/components/preloader.js +14 -5
  97. package/js/components/rating.js +2 -2
  98. package/js/components/ripple.js +2 -2
  99. package/js/components/select.js +2 -3
  100. package/js/components/sidenav.js +43 -14
  101. package/js/components/spotlight.js +2 -2
  102. package/js/components/stepper.js +2 -2
  103. package/js/components/suggest.js +9 -3
  104. package/js/components/tabs.js +2 -2
  105. package/js/components/theme-customizer.js +151 -21
  106. package/js/components/theme-switcher.js +27 -16
  107. package/js/components/timeline.js +41 -12
  108. package/js/components/timepicker.js +2 -2
  109. package/js/components/toast.js +1 -1
  110. package/js/components/tooltips.js +4 -4
  111. package/js/components/transfer.js +2 -2
  112. package/js/components/tree.js +2 -2
  113. package/js/components/validate.js +2 -2
  114. package/js/components/vd-hex.js +12 -6
  115. package/js/components/waypoint.js +2 -2
  116. package/js/utils/helpers.js +7 -4
  117. package/js/utils/lifecycle.js +158 -83
  118. package/js/vanduo.js +203 -34
  119. package/package.json +2 -1
package/css/components/draggable.css CHANGED
@@ -5,21 +5,21 @@
5
5
 
6
6
  :root {
7
7
  /* Draggable Colors */
8
- --draggable-bg: var(--color-white);
9
- --draggable-border-color: var(--border-color);
10
- --draggable-hover-bg: var(--bg-secondary);
11
- --draggable-hover-border-color: var(--color-primary);
12
- --draggable-dragging-bg: var(--bg-secondary);
13
- --draggable-dragging-border-color: var(--color-primary);
8
+ --draggable-bg: var(--vd-color-white);
9
+ --draggable-border-color: var(--vd-border-color);
10
+ --draggable-hover-bg: var(--vd-bg-secondary);
11
+ --draggable-hover-border-color: var(--vd-color-primary);
12
+ --draggable-dragging-bg: var(--vd-bg-secondary);
13
+ --draggable-dragging-border-color: var(--vd-color-primary);
14
14
  --draggable-dragging-shadow: var(--shadow-lg);
15
15
 
16
16
  /* Drop Zone Colors */
17
- --drop-zone-bg: var(--color-primary-alpha-5);
18
- --drop-zone-border-color: var(--color-primary-alpha-30);
19
- --drop-zone-hover-bg: var(--color-primary-alpha-10);
20
- --drop-zone-hover-border-color: var(--color-primary);
21
- --drop-zone-active-bg: var(--color-primary-alpha-15);
22
- --drop-zone-active-border-color: var(--color-primary);
17
+ --drop-zone-bg: var(--vd-color-primary-alpha-5);
18
+ --drop-zone-border-color: var(--vd-color-primary-alpha-30);
19
+ --drop-zone-hover-bg: var(--vd-color-primary-alpha-10);
20
+ --drop-zone-hover-border-color: var(--vd-color-primary);
21
+ --drop-zone-active-bg: var(--vd-color-primary-alpha-15);
22
+ --drop-zone-active-border-color: var(--vd-color-primary);
23
23
 
24
24
  /* Spacing */
25
25
  --draggable-padding: 0.8125rem; /* 13px - fib */
@@ -32,24 +32,24 @@
32
32
 
33
33
  /* Dark Theme Overrides */
34
34
  [data-theme="dark"] {
35
- --draggable-bg: var(--bg-secondary);
36
- --draggable-hover-bg: var(--bg-primary);
37
- --draggable-dragging-bg: var(--bg-primary);
38
- --drop-zone-bg: var(--color-primary-alpha-10);
39
- --drop-zone-border-color: var(--color-primary-alpha-40);
40
- --drop-zone-hover-bg: var(--color-primary-alpha-15);
41
- --drop-zone-active-bg: var(--color-primary-alpha-20);
35
+ --draggable-bg: var(--vd-bg-secondary);
36
+ --draggable-hover-bg: var(--vd-bg-primary);
37
+ --draggable-dragging-bg: var(--vd-bg-primary);
38
+ --drop-zone-bg: var(--vd-color-primary-alpha-10);
39
+ --drop-zone-border-color: var(--vd-color-primary-alpha-40);
40
+ --drop-zone-hover-bg: var(--vd-color-primary-alpha-15);
41
+ --drop-zone-active-bg: var(--vd-color-primary-alpha-20);
42
42
  }
43
43
 
44
44
  @media (prefers-color-scheme: dark) {
45
45
  :root:not([data-theme]) {
46
- --draggable-bg: var(--bg-secondary);
47
- --draggable-hover-bg: var(--bg-primary);
48
- --draggable-dragging-bg: var(--bg-primary);
49
- --drop-zone-bg: var(--color-primary-alpha-10);
50
- --drop-zone-border-color: var(--color-primary-alpha-40);
51
- --drop-zone-hover-bg: var(--color-primary-alpha-15);
52
- --drop-zone-active-bg: var(--color-primary-alpha-20);
46
+ --draggable-bg: var(--vd-bg-secondary);
47
+ --draggable-hover-bg: var(--vd-bg-primary);
48
+ --draggable-dragging-bg: var(--vd-bg-primary);
49
+ --drop-zone-bg: var(--vd-color-primary-alpha-10);
50
+ --drop-zone-border-color: var(--vd-color-primary-alpha-40);
51
+ --drop-zone-hover-bg: var(--vd-color-primary-alpha-15);
52
+ --drop-zone-active-bg: var(--vd-color-primary-alpha-20);
53
53
  }
54
54
  }
55
55
 
@@ -104,13 +104,13 @@
104
104
  width: 1.25rem; /* 20px */
105
105
  height: 1.25rem; /* 20px */
106
106
  margin-right: 0.5rem; /* 8px */
107
- color: var(--text-muted);
107
+ color: var(--vd-text-muted);
108
108
  cursor: grab;
109
109
  transition: var(--draggable-transition);
110
110
  }
111
111
 
112
112
  .vd-draggable-handle:hover {
113
- color: var(--text-primary);
113
+ color: var(--vd-text-primary);
114
114
  }
115
115
 
116
116
  .vd-draggable:active .vd-draggable-handle {
@@ -147,7 +147,7 @@
147
147
  display: block;
148
148
  text-align: center;
149
149
  padding: 1rem;
150
- color: var(--text-muted);
150
+ color: var(--vd-text-muted);
151
151
  font-style: italic;
152
152
  }
153
153
 
@@ -158,7 +158,7 @@
158
158
  left: 50%;
159
159
  transform: translate(-50%, -50%);
160
160
  font-weight: var(--font-weight-medium);
161
- color: var(--color-primary);
161
+ color: var(--vd-color-primary);
162
162
  pointer-events: none;
163
163
  }
164
164
 
@@ -168,8 +168,8 @@
168
168
  flex-wrap: wrap;
169
169
  gap: var(--draggable-margin);
170
170
  padding: var(--draggable-padding);
171
- background-color: var(--bg-secondary);
172
- border: 1px solid var(--border-color);
171
+ background-color: var(--vd-bg-secondary);
172
+ border: 1px solid var(--vd-border-color);
173
173
  border-radius: var(--btn-border-radius);
174
174
  }
175
175
 
@@ -214,7 +214,7 @@
214
214
  /* Keyboard-activated grab state (via aria-grabbed) */
215
215
  .vd-draggable[aria-grabbed="true"],
216
216
  .vd-draggable-item[aria-grabbed="true"] {
217
- outline: 2px solid var(--color-primary);
217
+ outline: 2px solid var(--vd-color-primary);
218
218
  outline-offset: 2px;
219
219
  background-color: var(--draggable-dragging-bg);
220
220
  border-color: var(--draggable-dragging-border-color);
@@ -268,7 +268,7 @@
268
268
  /* Accessibility */
269
269
  .vd-draggable:focus-visible,
270
270
  .vd-draggable-item:focus-visible {
271
- outline: 2px solid var(--color-primary);
271
+ outline: 2px solid var(--vd-color-primary);
272
272
  outline-offset: 2px;
273
273
  }
274
274
 
package/css/components/dropdown.css CHANGED
@@ -5,14 +5,14 @@
5
5
 
6
6
  :root {
7
7
  /* Dropdown Colors */
8
- --dropdown-bg: var(--color-white);
9
- --dropdown-border-color: var(--border-color);
10
- --dropdown-item-color: var(--text-primary);
11
- --dropdown-item-hover-bg: var(--bg-secondary);
12
- --dropdown-item-hover-color: var(--text-primary);
13
- --dropdown-item-active-bg: var(--color-primary-alpha-10);
14
- --dropdown-item-active-color: var(--color-primary);
15
- --dropdown-item-disabled-color: var(--text-muted);
8
+ --dropdown-bg: var(--vd-color-white);
9
+ --dropdown-border-color: var(--vd-border-color);
10
+ --dropdown-item-color: var(--vd-text-primary);
11
+ --dropdown-item-hover-bg: var(--vd-bg-secondary);
12
+ --dropdown-item-hover-color: var(--vd-text-primary);
13
+ --dropdown-item-active-bg: var(--vd-color-primary-alpha-10);
14
+ --dropdown-item-active-color: var(--vd-color-primary);
15
+ --dropdown-item-disabled-color: var(--vd-text-muted);
16
16
 
17
17
  /* Dropdown Spacing (Fibonacci) */
18
18
  --dropdown-padding-y: 0.5rem; /* 8px - fib */
@@ -31,14 +31,14 @@
31
31
 
32
32
  /* Dark Theme Overrides */
33
33
  [data-theme="dark"] {
34
- --dropdown-bg: var(--bg-secondary);
35
- --dropdown-item-hover-bg: var(--bg-primary);
34
+ --dropdown-bg: var(--vd-bg-secondary);
35
+ --dropdown-item-hover-bg: var(--vd-bg-primary);
36
36
  }
37
37
 
38
38
  @media (prefers-color-scheme: dark) {
39
39
  :root:not([data-theme]) {
40
- --dropdown-bg: var(--bg-secondary);
41
- --dropdown-item-hover-bg: var(--bg-primary);
40
+ --dropdown-bg: var(--vd-bg-secondary);
41
+ --dropdown-item-hover-bg: var(--vd-bg-primary);
42
42
  }
43
43
  }
44
44
 
@@ -199,7 +199,7 @@
199
199
  }
200
200
 
201
201
  .vd-dropdown-item:focus-visible {
202
- outline: 2px solid var(--color-primary);
202
+ outline: 2px solid var(--vd-color-primary);
203
203
  outline-offset: -2px;
204
204
  }
205
205
 
@@ -233,7 +233,7 @@
233
233
  margin-bottom: 0;
234
234
  font-size: var(--font-size-sm);
235
235
  font-weight: var(--font-weight-semibold);
236
- color: var(--text-muted);
236
+ color: var(--vd-text-muted);
237
237
  white-space: nowrap;
238
238
  text-transform: uppercase;
239
239
  letter-spacing: 0.05em;
package/css/components/expanding-cards.css CHANGED
@@ -136,7 +136,7 @@
136
136
  height: 40px;
137
137
  border-radius: 100%;
138
138
  background-color: #fff;
139
- color: var(--vd-expanding-card-bg-default, var(--color-primary, #3b82f6));
139
+ color: var(--vd-expanding-card-bg-default, var(--vd-color-primary, #3b82f6));
140
140
  }
141
141
 
142
142
  .vd-expanding-card-info {
package/css/components/fab.css CHANGED
@@ -11,9 +11,9 @@
11
11
  --fab-icon-size: 1.5rem;
12
12
 
13
13
  /* FAB Colors */
14
- --fab-bg: var(--color-primary, #0d6efd);
14
+ --fab-bg: var(--vd-color-primary, #0d6efd);
15
15
  --fab-color: #fff;
16
- --fab-hover-bg: var(--color-primary-dark, #0b5ed7);
16
+ --fab-hover-bg: var(--vd-color-primary-dark, #0b5ed7);
17
17
  --fab-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);
18
18
  --fab-hover-shadow: 0 5px 13px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0, 0, 0, 0.2);
19
19
 
@@ -58,7 +58,7 @@
58
58
 
59
59
  .vd-fab-glass {
60
60
  background: var(--vd-glass-bg-light);
61
- color: var(--text-primary);
61
+ color: var(--vd-text-primary);
62
62
  border: 1px solid var(--vd-glass-border-light);
63
63
  box-shadow: var(--vd-glass-shadow);
64
64
  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
@@ -159,17 +159,17 @@
159
159
  /* ========== Color Variants ========== */
160
160
 
161
161
  .vd-fab-secondary {
162
- --fab-bg: var(--color-gray-600, #6c757d);
163
- --fab-hover-bg: var(--color-gray-700, #5c636a);
162
+ --fab-bg: var(--vd-color-gray-600, #6c757d);
163
+ --fab-hover-bg: var(--vd-color-gray-700, #5c636a);
164
164
  }
165
165
 
166
166
  .vd-fab-success {
167
- --fab-bg: var(--color-success, #198754);
167
+ --fab-bg: var(--vd-color-success, #198754);
168
168
  --fab-hover-bg: #157347;
169
169
  }
170
170
 
171
171
  .vd-fab-danger {
172
- --fab-bg: var(--color-danger, #dc3545);
172
+ --fab-bg: var(--vd-color-danger, #dc3545);
173
173
  --fab-hover-bg: #bb2d3b;
174
174
  }
175
175
 
package/css/components/flow.css CHANGED
@@ -18,7 +18,7 @@
18
18
  --flow-control-offset: 0.8125rem; /* 13px - fib */
19
19
 
20
20
  /* Flow Colors */
21
- --flow-bg: var(--bg-primary, #fff);
21
+ --flow-bg: var(--vd-bg-primary, #fff);
22
22
  --flow-indicator-bg: rgba(255, 255, 255, 0.5);
23
23
  --flow-indicator-active-bg: #fff;
24
24
  --flow-control-bg: rgba(0, 0, 0, 0.3);
@@ -39,14 +39,14 @@
39
39
 
40
40
  /* Dark Theme */
41
41
  [data-theme="dark"] {
42
- --flow-bg: var(--bg-primary, #1a1a2e);
42
+ --flow-bg: var(--vd-bg-primary, #1a1a2e);
43
43
  --flow-control-bg: rgba(255, 255, 255, 0.2);
44
44
  --flow-control-hover-bg: rgba(255, 255, 255, 0.35);
45
45
  }
46
46
 
47
47
  @media (prefers-color-scheme: dark) {
48
48
  :root:not([data-theme]) {
49
- --flow-bg: var(--bg-primary, #1a1a2e);
49
+ --flow-bg: var(--vd-bg-primary, #1a1a2e);
50
50
  --flow-control-bg: rgba(255, 255, 255, 0.2);
51
51
  --flow-control-hover-bg: rgba(255, 255, 255, 0.35);
52
52
  }
package/css/components/footer.css CHANGED
@@ -5,14 +5,14 @@
5
5
 
6
6
  :root {
7
7
  /* Footer Colors */
8
- --footer-bg: var(--bg-secondary);
9
- --footer-bg-dark: var(--bg-dark);
10
- --footer-text-color: var(--text-primary);
11
- --footer-text-color-dark: var(--text-inverse);
12
- --footer-link-color: var(--text-secondary);
13
- --footer-link-hover-color: var(--color-primary);
14
- --footer-border-color: var(--border-color);
15
- --footer-heading-color: var(--text-primary);
8
+ --footer-bg: var(--vd-bg-secondary);
9
+ --footer-bg-dark: var(--vd-bg-dark);
10
+ --footer-text-color: var(--vd-text-primary);
11
+ --footer-text-color-dark: var(--vd-text-inverse);
12
+ --footer-link-color: var(--vd-text-secondary);
13
+ --footer-link-hover-color: var(--vd-color-primary);
14
+ --footer-border-color: var(--vd-border-color);
15
+ --footer-heading-color: var(--vd-text-primary);
16
16
 
17
17
  /* Footer Spacing (Fibonacci) */
18
18
  --footer-padding-y: 3.4375rem; /* 55px - fib */
@@ -24,18 +24,18 @@
24
24
 
25
25
  /* Dark Theme Overrides */
26
26
  [data-theme="dark"] {
27
- --footer-bg: var(--bg-secondary);
28
- --footer-text-color: var(--text-primary);
29
- --footer-link-color: var(--text-secondary);
30
- --footer-heading-color: var(--text-primary);
27
+ --footer-bg: var(--vd-bg-secondary);
28
+ --footer-text-color: var(--vd-text-primary);
29
+ --footer-link-color: var(--vd-text-secondary);
30
+ --footer-heading-color: var(--vd-text-primary);
31
31
  }
32
32
 
33
33
  @media (prefers-color-scheme: dark) {
34
34
  :root:not([data-theme]) {
35
- --footer-bg: var(--bg-secondary);
36
- --footer-text-color: var(--text-primary);
37
- --footer-link-color: var(--text-secondary);
38
- --footer-heading-color: var(--text-primary);
35
+ --footer-bg: var(--vd-bg-secondary);
36
+ --footer-text-color: var(--vd-text-primary);
37
+ --footer-link-color: var(--vd-text-secondary);
38
+ --footer-heading-color: var(--vd-text-primary);
39
39
  }
40
40
  }
41
41
 
@@ -89,7 +89,7 @@
89
89
  }
90
90
 
91
91
  .vd-footer-link:focus {
92
- outline: 2px solid var(--color-primary);
92
+ outline: 2px solid var(--vd-color-primary);
93
93
  outline-offset: 2px;
94
94
  border-radius: 0.25rem;
95
95
  }
@@ -116,7 +116,7 @@
116
116
  border-top: 1px solid var(--footer-border-color);
117
117
  text-align: center;
118
118
  font-size: var(--font-size-sm);
119
- color: var(--text-muted);
119
+ color: var(--vd-text-muted);
120
120
  }
121
121
 
122
122
  .vd-footer-copyright-left {
@@ -177,7 +177,7 @@
177
177
  }
178
178
 
179
179
  .vd-footer-dark .vd-footer-link:hover {
180
- color: var(--color-primary-light);
180
+ color: var(--vd-color-primary-light);
181
181
  }
182
182
 
183
183
  .vd-footer-dark .vd-footer-copyright {
@@ -242,8 +242,8 @@
242
242
  }
243
243
 
244
244
  .vd-footer-social-link:hover {
245
- background-color: var(--color-primary);
246
- color: var(--color-white);
245
+ background-color: var(--vd-color-primary);
246
+ color: var(--vd-color-white);
247
247
  transform: translateY(-2px);
248
248
  }
249
249
 
@@ -253,8 +253,8 @@
253
253
  }
254
254
 
255
255
  .vd-footer-dark .vd-footer-social-link:hover {
256
- background-color: var(--color-primary);
257
- color: var(--color-white);
256
+ background-color: var(--vd-color-primary);
257
+ color: var(--vd-color-white);
258
258
  }
259
259
 
260
260
  /* Responsive Footer */
@@ -284,7 +284,7 @@
284
284
 
285
285
  .vd-footer-made-with-text {
286
286
  font-size: var(--font-size-sm);
287
- color: var(--text-muted);
287
+ color: var(--vd-text-muted);
288
288
  font-weight: var(--font-weight-medium);
289
289
  letter-spacing: 0.02em;
290
290
  }
@@ -307,7 +307,7 @@
307
307
  }
308
308
 
309
309
  .vd-footer-kilo-link:focus {
310
- outline: 2px solid var(--color-primary);
310
+ outline: 2px solid var(--vd-color-primary);
311
311
  outline-offset: 2px;
312
312
  }
313
313
 
@@ -341,7 +341,7 @@
341
341
  }
342
342
 
343
343
  .vd-footer-bmac-link:focus {
344
- outline: 2px solid var(--color-primary);
344
+ outline: 2px solid var(--vd-color-primary);
345
345
  outline-offset: 2px;
346
346
  border-radius: 0.25rem;
347
347
  }