fix: use proper css var for focus-visible overrides

Author: graphieros

app/components/Compare/FacetBarChart.vue

@@ -366,13 +366,13 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
 
 <style scoped>
 :deep(.vue-data-ui-component svg:focus-visible) {
-  outline: 1px solid var(--accent-color) !important;
+  outline: 1px solid var(--accent) !important;
   border-radius: 0.1rem;
   outline-offset: 3px !important;
 }
 :deep(.vue-ui-user-options-button:focus-visible),
 :deep(.vue-ui-user-options :first-child:focus-visible) {
-  outline: 0.1rem solid var(--accent-color) !important;
+  outline: 0.1rem solid var(--accent) !important;
   border-radius: 0.25rem;
 }
 </style>

app/components/Compare/FacetScatterChart.vue

@@ -476,19 +476,13 @@ const step = shallowRef(0)
 
 <style scoped>
 :deep(.vue-data-ui-component svg:focus-visible) {
-  outline: 1px solid var(--accent-color) !important;
+  outline: 1px solid var(--accent) !important;
   border-radius: 0.1rem;
   outline-offset: 0;
 }
 :deep(.vue-ui-user-options-button:focus-visible),
 :deep(.vue-ui-user-options :first-child:focus-visible) {
-  outline: 0.1rem solid var(--accent-color) !important;
+  outline: 0.1rem solid var(--accent) !important;
   border-radius: 0.25rem;
 }
-/* :deep(.vue-ui-scatter .vue-data-ui-no-title-space) {
-  position: absolute;
-}
-:deep(.vue-ui-scatter .vue-ui-user-options) {
-  top: -1.5rem !important;
-} */
 </style>

app/components/Package/TrendsChart.vue

@@ -2200,13 +2200,13 @@ const isSparklineLayout = computed({
 
 <style scoped>
 :deep(.vue-data-ui-component svg:focus-visible) {
-  outline: 1px solid var(--accent-color) !important;
+  outline: 1px solid var(--accent) !important;
   border-radius: 0.1rem;
   outline-offset: 0;
 }
 :deep(.vue-ui-user-options-button:focus-visible),
 :deep(.vue-ui-user-options :first-child:focus-visible) {
-  outline: 0.1rem solid var(--accent-color) !important;
+  outline: 0.1rem solid var(--accent) !important;
   border-radius: 0.25rem;
 }
 </style>

app/components/Package/VersionDistribution.vue

@@ -682,14 +682,14 @@ const chartConfig = computed<VueUiXyConfig>(() => {
 }
 
 :deep(.vue-data-ui-component svg:focus-visible) {
-  outline: 1px solid var(--accent-color) !important;
+  outline: 1px solid var(--accent) !important;
   border-radius: 0.1rem;
   outline-offset: 0 !important;
 }
 
 :deep(.vue-ui-user-options-button:focus-visible),
 :deep(.vue-ui-user-options :first-child:focus-visible) {
-  outline: 0.1rem solid var(--accent-color) !important;
+  outline: 0.1rem solid var(--accent) !important;
   border-radius: 0.25rem;
 }
 </style>

app/components/Package/WeeklyDownloadStats.vue

@@ -511,7 +511,7 @@ const config = computed<VueUiSparklineConfig>(() => {
 }
 
 :deep(.vue-data-ui-component svg:focus-visible) {
-  outline: 0.1rem solid var(--accent-color) !important;
+  outline: 0.1rem solid var(--accent) !important;
   border-radius: 0.1rem;
   outline-offset: 3px;
 }