From a64bfa5f20eb435010e2d55b91e20b0c4f025f83 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Tue, 17 Dec 2024 15:19:47 +0100
Subject: [PATCH] fix(style): implement all necessary central color definitions
 for the Sidebar links and buttons

---
 front/src/App.vue                    |  1 -
 front/src/style/base/generic.scss    | 18 +++---
 front/src/style/colors.scss          | 84 +++++++++++++++++++++-------
 front/src/style/globals/_layout.scss |  1 -
 front/src/ui/App.vue                 |  3 +-
 front/ui-docs/using-color.md         |  6 +-
 6 files changed, 79 insertions(+), 34 deletions(-)

diff --git a/front/src/App.vue b/front/src/App.vue
index 681db295e..5d23e078e 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -90,7 +90,6 @@ const isUIv2 = useLocalStorage('ui-v2', true)
 <style>
 html, body {
   font-size: 16px;
-
 }
 
 </style>
diff --git a/front/src/style/base/generic.scss b/front/src/style/base/generic.scss
index d59b94989..6475a72c8 100644
--- a/front/src/style/base/generic.scss
+++ b/front/src/style/base/generic.scss
@@ -21,16 +21,16 @@
     }
   }
 
-  &:not(.is-raw) {
-    color: var(--link-color);
-    cursor: pointer;
-    text-decoration: underline;
+  // &:not(.is-raw) {
+  //   color: var(--link-color);
+  //   cursor: pointer;
+  //   text-decoration: underline;
 
-    &:hover,
-    &.is-hovered {
-      color: var(--link-hover-color);
-    }
-  }
+  //   &:hover,
+  //   &.is-hovered {
+  //     color: var(--link-hover-color);
+  //   }
+  // }
 }
 
 @if $docs {
diff --git a/front/src/style/colors.scss b/front/src/style/colors.scss
index ce17553fa..01a59e3ba 100644
--- a/front/src/style/colors.scss
+++ b/front/src/style/colors.scss
@@ -101,7 +101,18 @@
 
 :is(.VPDoc .vp-doc, .funkwhale){
 
-  :is(button, input):focus-visible {
+  // Fallback for Links without explicit color props
+
+  a {
+    color:var(--link-color);
+    &:hover {
+      color:var(--link-hover-color);
+    }
+  }
+
+  // Fallback for focused elements without explicit focus-outline
+
+  :is(button, input, a):focus-visible {
     outline: 3px solid var(--fw-secondary);
     outline-offset: 2px;
   }
@@ -139,30 +150,49 @@
 
   .ghost {
     color: var(--color);
+    background-color: transparent;
     border: 1px solid transparent;
 
     &.interactive{
+      &[aria-pressed=true] {
+        color: var(--pressed-color, var(--active-color));
+        background-color: var(--pressed-background-color, var(--active-background-color));
+        border-color: var(--pressed-background-color, var(--active-background-color));
+      }
       &:hover {
+        background-color: var(--hover-background-color);
         border-color: var(--hover-background-color);
       }
-      &:is(:active, .active) {
-        border-color: var(--active-background-color);
-        &.router-link-exact-active {
-          border-color: var(--exact-active-background-color);
-        }
+      &:active {
+        background-color: var(--active-background-color);
       }
       &[disabled] {
-        opacity:.9;
+        color: var(--disabled-color);
+        border-color: var(--disabled-border-color);
+        background-color:var(--disabled-background-color);
+      }
+      // Link
+      &.active {
+        border-color: var(--link-active-border-color);
+      }
+      &.router-link-exact-active {
+        background-color: var(--link-exact-active-background-color, var(--active-background-color));
+        border-color: var(--link-exact-active-border-color);
       }
     }
-
   }
 
   .outline {
     color: var(--color);
+    background-color: transparent;
     border: 1px solid var(--border-color);
 
     &.interactive{
+      &[aria-pressed=true] {
+        color: var(--pressed-color, var(--active-color));
+        background-color: var(--pressed-background-color, var(--active-background-color));
+        border-color: var(--pressed-background-color, var(--active-background-color));
+      }
       &:hover{
         border-color: var(--hover-background-color);
       }
@@ -172,12 +202,22 @@
           background-color: var(--exact-active-background-color);
         }
       }
+      &[disabled] {
+        color: var(--disabled-color);
+        border-color: var(--disabled-border-color);
+        background-color:var(--disabled-background-color);
+      }
     }
   }
 }
+
+
 :root{
   @include light-theme {
-    .default, body {
+    --link-color:var(--fw-blue-400);
+    --link-hover-color:var(--fw-blue-500);
+
+    .default {
       --color: var(--fw-gray-900);
       --background-color: var(--fw-beige-100);
       --border-color:var(--fw-gray-300);
@@ -202,11 +242,12 @@
         --border-color:var(--fw-beige-400);
       }
 
-      --link-color:var(--fw-blue-400);
-      --link-hover-color:var(--fw-blue-500);
+      --link-active-border-color:var(--fw-beige-400);
+      --link-exact-active-background-color:var(--fw-beige-400);
+      --link-exact-active-border-color:transparent;
     }
 
-    .secondary, button {
+    .secondary {
       --color: var(--fw-gray-700);
       --background-color: var(--fw-gray-200);
       --border-color:var(--fw-gray-700);
@@ -375,6 +416,8 @@
   }
 
   @include dark-theme {
+    --link-color:var(--fw-gray-300);
+    --link-hover-color:var(--fw-gray-200);
     .default, body {
       --color: var(--fw-beige-100);
       --background-color: var(--fw-gray-970);
@@ -384,12 +427,12 @@
       --hover-background-color:var(--fw-gray-950);
       --hover-border-color:var(--fw-beige-400);
 
-      --active-color:var(--fw-gray-600);
-      --active-background-color:var(--fw-beige-400);
-      --active-border-color:var(--fw-gray-600);
+      --active-color:var(--fw-gray-200);
+      --active-background-color:var(--fw-gray-700);
+      --active-border-color:var(--fw-gray-700);
 
       --pressed-color:var(--fw-red-010);
-      --pressed-background-color:var(--fw-gray-900);
+      --pressed-background-color:var(--fw-secondary);
 
       --disabled-color:var(--fw-gray-500);
       --disabled-background-color:var(--fw-gray-950);
@@ -398,10 +441,13 @@
       &.raised{
         --background-color:var(--fw-gray-900);
         --border-color:var(--fw-gray-600);
+        --link-color:var(--fw-gray-400);
+        --link-hover-color:var(--fw-gray-200);
       }
 
-      --link-color:var(--fw-gray-300);
-      --link-hover-color:var(--fw-gray-400)
+      --link-active-border-color:var(--fw-gray-700);
+      --link-exact-active-background-color:var(--fw-secondary);
+      --link-exact-active-border-color:var(--fw-secondary);
     }
 
     .secondary, button {
@@ -435,7 +481,7 @@
       }
 
       --link-color:var(--fw-gray-500);
-      --link-hover-color:var(--fw-gray-600)
+      --link-hover-color:var(--fw-gray-600);
     }
 
     .primary {
diff --git a/front/src/style/globals/_layout.scss b/front/src/style/globals/_layout.scss
index a6759410f..e95cd4250 100644
--- a/front/src/style/globals/_layout.scss
+++ b/front/src/style/globals/_layout.scss
@@ -163,7 +163,6 @@
   }
 }
 
-.main.pusher,
 .ui.vertical.segment {
   color: var(--main-color);
   background: var(--main-background);
diff --git a/front/src/ui/App.vue b/front/src/ui/App.vue
index 4a988c61d..b828aaef1 100644
--- a/front/src/ui/App.vue
+++ b/front/src/ui/App.vue
@@ -3,6 +3,7 @@ import { onMounted, nextTick, ref, defineAsyncComponent } from 'vue'
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut';
 import Sidebar from '~/ui/components/Sidebar.vue'
 import ShortcutsModal from '~/components/ShortcutsModal.vue'
+import { color } from '~/composables/colors.ts';
 
 // Fake content
 onMounted(async () => {
@@ -17,7 +18,7 @@ onKeyboardShortcut('h', () => isShortcutsModalOpen.value = !isShortcutsModalOpen
 <template>
   <div class="funkwhale grid">
     <Sidebar :openShortcutsModal = "() => isShortcutsModalOpen=true" />
-    <main>
+    <main v-bind="color('default solid')">
       <RouterView />
     </main>
     <ShortcutsModal v-model="isShortcutsModalOpen" />
diff --git a/front/ui-docs/using-color.md b/front/ui-docs/using-color.md
index a778ae01b..a8375a697 100644
--- a/front/ui-docs/using-color.md
+++ b/front/ui-docs/using-color.md
@@ -111,7 +111,7 @@ Only use for at most one call-to-action on a screen
 
 #### Secondary
 
-Use for interactive items and colatilv surfaces such as menus and modals
+Use for interactive items and non-permanent surfaces such as menus and modals
 
 <Layout flex>
   <div class="force-dark-theme">
@@ -474,7 +474,7 @@ For each semantic color, we set a foreground and a background. In addition, we n
 - solid (default for buttons)
   > affects text color, border color and background color
 
-[-> Example](#variant)
+[-> Example: #variant](#variant)
 
 **Variants can optionally be made interactive and/or raised:**
 
@@ -496,7 +496,7 @@ For each semantic color, we set a foreground and a background. In addition, we n
 - interactive-raised
   > combine `raised` and `interactive`
 
-[-> Example](#interactive-andor-raised)
+[-> Example: #interactive-and-or-raised](#interactive-and-or-raised)
 
 <style module>
     .swatch {