From 61e03ca9a01d867b817146f3bbf67302536327ce Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Mon, 30 Dec 2024 11:52:26 +0100
Subject: [PATCH] chore(ui): minor improvements

---
 front/src/components/ui/Toggle.vue |  6 +++---
 front/src/style/colors.scss        | 28 +++++++++++++++++---------
 front/ui-docs/designing-pages.md   | 18 ++++++++---------
 front/ui-docs/using-color.md       | 32 +++++++++++++++---------------
 4 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/front/src/components/ui/Toggle.vue b/front/src/components/ui/Toggle.vue
index 7a5773cbc..46afdcaac 100644
--- a/front/src/components/ui/Toggle.vue
+++ b/front/src/components/ui/Toggle.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { color } from "~/composables/colors.ts";
 
-import Layout from './Layout.vue';
-
 const { big } = defineProps<{
   big?: boolean
   title?: string
@@ -18,7 +16,9 @@ const diameter = big? '28px' : '20px'
     v-bind="color({}, ['interactive', 'raised'])"
     :checked = "isOn || undefined"
   >
-    <input type="checkbox" v-model="isOn" />
+    <input type="checkbox" v-model="isOn"
+      style="visibility: hidden; /* Hide even before stylesheet is loaded */"
+    />
     <span v-if="title">{{ title }}</span>
 </label>
 </template>
diff --git a/front/src/style/colors.scss b/front/src/style/colors.scss
index 7ae4fbf34..471f6146a 100644
--- a/front/src/style/colors.scss
+++ b/front/src/style/colors.scss
@@ -104,6 +104,15 @@
     --disabled-background-color:var(--fw-beige-100);
     --disabled-border-color:var(--fw-beige-100);
 
+    &.raised {
+      --background-color:var(--fw-beige-300);
+      --border-color:color-mix(in oklab, var(--fw-beige-400) 90%, currentcolor);
+    }
+
+    --link-active-border-color:var(--fw-beige-400);
+    --link-exact-active-background-color:var(--fw-beige-400);
+    --link-exact-active-border-color:transparent;
+
     --void-off-background-color: var(--fw-gray-500);
     --void-off-pin-color: var(--fw-beige-100);
     --void-on-background-color: var(--fw-blue-100);
@@ -113,15 +122,6 @@
     --void-off-hover-pin-color: var(--fw-beige-200);
     --void-on-hover-background-color: var(--fw-blue-400);
     --void-on-hover-pin-color: var(--fw-blue-010);
-
-    &.raised {
-      --background-color:var(--fw-beige-300);
-      --border-color:color-mix(in oklab, var(--fw-beige-400) 90%, currentcolor);
-    }
-
-    --link-active-border-color:var(--fw-beige-400);
-    --link-exact-active-background-color:var(--fw-beige-400);
-    --link-exact-active-border-color:transparent;
   }
 
   .secondary {
@@ -329,6 +329,16 @@
     --link-active-border-color:var(--fw-gray-700);
     --link-exact-active-background-color:var(--fw-gray-950);
     --link-exact-active-border-color:transparent;
+
+    --void-off-background-color: var(--fw-gray-800);
+    --void-off-pin-color: var(--fw-beige-100);
+    --void-on-background-color: var(--fw-blue-400);
+    --void-on-pin-color: var(--fw-beige-100);
+
+    --void-off-hover-background-color: var(--fw-gray-700);
+    --void-off-hover-pin-color: var(--fw-beige-200);
+    --void-on-hover-background-color: var(--fw-blue-400);
+    --void-on-hover-pin-color: var(--fw-blue-010);
   }
 
   .secondary {
diff --git a/front/ui-docs/designing-pages.md b/front/ui-docs/designing-pages.md
index 95c70c3ff..47ee2f05b 100644
--- a/front/ui-docs/designing-pages.md
+++ b/front/ui-docs/designing-pages.md
@@ -109,13 +109,7 @@ const user: User = {
 
 ## Grid
 
-::: details Default widths
-
-![alt text](image-1.png)
-
-:::
-
-The page grid consists of 46px wide tracks, separated by 32px wide gaps.
+The page grid consists of 46px wide tracks, separated by 32px wide gaps. [See examples on design.funkwhale.audio](https://design.funkwhale.audio/#/workspace/582e7be1-0cc7-11ed-87a1-ae44a720651d/e3a00150-0f5e-11ed-adb9-fff9e854a67c?page-id=e7a90671-0f5e-11ed-adb9-fff9e854a67c)
 
 ### Responsivity
 
@@ -127,11 +121,12 @@ The page grid consists of 46px wide tracks, separated by 32px wide gaps.
 Resize the window to observe how the items move.
 
 <Layout flex>
-<Toggle v-model="alignLeft" title="Left-align the layout"/> 
+<Toggle v-model="alignLeft" title="Left-align the layout"/>
 </Layout>
 
 ---
 
+<div class="preview" style="margin: 0 -40px; padding: 0 25px;">
 <Layout
     grid="auto / repeat(auto-fit, calc(46px * 3 + 32px * 2))"
     v-bind="attributes"
@@ -186,9 +181,11 @@ Resize the window to observe how the items move.
 </Layout>
 
 <Layout
-    grid="auto / repeat(auto-fit, calc(46px * 4 + 32px * 3))"
-    v-bind="attributes"
+grid="auto / repeat(auto-fit, calc(46px _ 4 + 32px _ 3))"
+v-bind="attributes"
+
 >
+
     <Layout flex no-gap
         style="grid-column: 1 / -1; align-self: baseline;"
     >
@@ -220,6 +217,7 @@ Resize the window to observe how the items move.
     <Activity :track="track" :user="user" />
     <Activity :track="track" :user="user" />
 </Layout>
+</div>
 
 ## Navigation
 
diff --git a/front/ui-docs/using-color.md b/front/ui-docs/using-color.md
index bfe877f46..9acd0bf84 100644
--- a/front/ui-docs/using-color.md
+++ b/front/ui-docs/using-color.md
@@ -508,13 +508,13 @@ Its structure is as follows:
 
 <Layout stack style="--width:100%; background:#0002;">
 
-<Card solid purple title="(1) Palette">
+<Card full solid purple title="(1) Palette">
 
 Defining [all funkwhale color values](#palette)
 
 </Card>
 
-<Card solid blue title="(2) Choosing the semantic colors from the palette">
+<Card full solid blue title="(2) Choosing the semantic colors from the palette">
 
 both for light and dark theme, and both normal and raised:
 
@@ -530,7 +530,7 @@ both for light and dark theme, and both normal and raised:
 
 </Card>
 
-<Card solid green title="(3) Applying colors">
+<Card full solid green title="(3) Applying colors">
 
 (for all elements not managed by vitepress)
 
@@ -586,7 +586,7 @@ Here is the meaning the styles should convey:
 
 ---
 
-<Layout flex>
+<Layout flex style="--gap:4px; margin: 0 -50px;">
 
 <Card min-content title="Default" solid default>
   <span>
@@ -595,14 +595,14 @@ Here is the meaning the styles should convey:
 
 ---
 
-  <Layout flex no-gap style="margin: 0 -22px; justify-content:space-evenly;">
-    <Layout no-gap>
+  <Layout flex  style="margin: 0 -22px; justify-content:space-evenly;">
+    <Layout >
       Here
       <Link ghost :to="here"> ghost </Link>
       <Link outline :to="here"> outline </Link>
       <Link solid raised :to="here"> solid raised </Link>
     </Layout>
-    <Layout no-gap>
+    <Layout >
       Elsewhere
       <Link ghost to="-"> ghost </Link>
       <Link outline to="-"> outline </Link>
@@ -637,14 +637,14 @@ Here is the meaning the styles should convey:
 
 ---
 
-  <Layout flex no-gap style="margin: 0 -22px; justify-content:space-evenly;">
-    <Layout no-gap>
+  <Layout flex  style="margin: 0 -22px; justify-content:space-evenly;">
+    <Layout >
       Here
       <Link ghost :to="here"> ghost </Link>
       <Link outline :to="here"> outline </Link>
       <Link solid raised :to="here"> solid raised </Link>
     </Layout>
-    <Layout no-gap>
+    <Layout >
       Elsewhere
       <Link ghost to="-"> ghost </Link>
       <Link outline to="-"> outline </Link>
@@ -679,14 +679,14 @@ Here is the meaning the styles should convey:
 
 ---
 
-  <Layout flex no-gap style="margin: 0 -22px; justify-content:space-evenly;">
-    <Layout no-gap>
+  <Layout flex  style="margin: 0 -22px; justify-content:space-evenly;">
+    <Layout >
       Here
       <Link ghost :to="here"> ghost </Link>
       <Link outline :to="here"> outline </Link>
       <Link solid raised :to="here"> solid raised </Link>
     </Layout>
-    <Layout no-gap>
+    <Layout >
       Elsewhere
       <Link ghost to="-"> ghost </Link>
       <Link outline to="-"> outline </Link>
@@ -721,14 +721,14 @@ Here is the meaning the styles should convey:
 
 ---
 
-  <Layout flex no-gap style="margin: 0 -22px; justify-content:space-evenly;">
-    <Layout no-gap>
+  <Layout flex  style="margin: 0 -22px; justify-content:space-evenly;">
+    <Layout >
       Here
       <Link ghost :to="here"> ghost </Link>
       <Link outline :to="here"> outline </Link>
       <Link solid raised :to="here"> solid raised </Link>
     </Layout>
-    <Layout no-gap>
+    <Layout >
       Elsewhere
       <Link ghost to="-"> ghost </Link>
       <Link outline to="-"> outline </Link>