Fix border and text-secondary colors

frontend/src/components/VItemGroup/VItem.vue

@@ -109,7 +109,7 @@ const splitAttrs = computed(() => {
       {
         [`${contextProps.direction}-bordered`]: contextProps.bordered,
         [`${contextProps.direction}-popover-item`]: isInPopover,
-        'border border-default': contextProps.bordered,
+        'border border-overlay': contextProps.bordered,
         'has-check': contextProps.showCheck,
         'font-semibold': selected && !contextProps.showCheck,
         'bg-transparent':

frontend/src/components/VTabs/VTabPanel.vue

@@ -43,7 +43,7 @@ const panelVariantStyle = computed(() =>
     :aria-labelledby="`tab-${id}`"
     role="tabpanel"
     :tabindex="isSelected ? 0 : -1"
-    class="min-h-0 overflow-y-auto border-default p-6"
+    class="min-h-0 overflow-y-auto border-overlay p-6"
     :class="[panelVariantStyle, { hidden: !isSelected }]"
   >
     <slot />

frontend/src/styles/tailwind.css

@@ -173,13 +173,14 @@
       --color-border-secondary-hover: var(--color-gray-12);
       --color-border-tertiary: var(--color-gray-12);
       --color-border-transparent-hover: var(--color-gray-3);
+      --color-border-overlay: var(--color-gray-3);
       --color-border-focus: var(--color-pink-8);
       --color-border-bg-ring: var(--color-white);
       --color-border-disabled: var(--color-gray-5);
 
       /* Text */
       --color-text: var(--color-gray-12);
-      --color-text-secondary: var(--color-gray-8);
+      --color-text-secondary: var(--color-gray-9);
       --color-text-disabled: var(--color-gray-5);
       --color-text-link: var(--color-pink-8);
       --color-text-over-dark: var(--color-white);
@@ -237,7 +238,7 @@
 
       /* Text */
       --color-text: var(--color-gray-1);
-      --color-text-secondary: var(--color-gray-5);
+      --color-text-secondary: var(--color-gray-4);
       --color-text-disabled: var(--color-gray-8);
       --color-text-link: var(--color-yellow-4);
       --color-text-over-dark: var(--color-gray-13);
@@ -291,13 +292,14 @@
     --color-border-secondary-hover: var(--color-gray-12);
     --color-border-tertiary: var(--color-gray-12);
     --color-border-transparent-hover: var(--color-gray-3);
+    --color-border-overlay: var(--color-gray-3);
     --color-border-focus: var(--color-pink-8);
     --color-border-bg-ring: var(--color-white);
     --color-border-disabled: var(--color-gray-5);
 
     /* Text */
     --color-text: var(--color-gray-12);
-    --color-text-secondary: var(--color-gray-8);
+    --color-text-secondary: var(--color-gray-9);
     --color-text-disabled: var(--color-gray-5);
     --color-text-link: var(--color-pink-8);
     --color-text-over-dark: var(--color-white);
@@ -350,13 +352,14 @@
     --color-border-secondary-hover: var(--color-gray-1);
     --color-border-tertiary: var(--color-gray-1);
     --color-border-transparent-hover: var(--color-gray-11);
+    --color-border-overlay: var(--color-gray-10);
     --color-border-focus: var(--color-yellow-4);
     --color-border-bg-ring: var(--color-gray-13);
     --color-border-disabled: var(--color-gray-8);
 
     /* Text */
     --color-text: var(--color-gray-1);
-    --color-text-secondary: var(--color-gray-5);
+    --color-text-secondary: var(--color-gray-4);
     --color-text-disabled: var(--color-gray-8);
     --color-text-link: var(--color-yellow-4);
     --color-text-over-dark: var(--color-gray-13);

frontend/tailwind.config.ts

@@ -270,6 +270,7 @@ export default {
         "secondary-hover": "var(--color-border-secondary-hover)",
         tertiary: "var(--color-border-tertiary)",
         "transparent-hover": "var(--color-border-transparent-hover)",
+        overlay: "var(--color-border-overlay)",
         focus: "var(--color-border-focus)",
         "bg-ring": "var(--color-border-bg-ring)",
         disabled: "var(--color-border-disabled)",