feat(ui): set and document global dark colors (theme-dark)

front/src/style/colors.scss

@@ -22,9 +22,12 @@
   // Blue
   --fw-blue-010: #fdfdff;
   --fw-blue-100: #65a2bb;
-  --fw-blue-400: #067cae;
+  --fw-blue-400: #0a85ae;
-  --fw-blue-500: #05719e;
+  // was --fw-blue-400: #067cae;
-  --fw-blue-600: #00638c;
+  --fw-blue-500: #05769d;
+  // was --fw-blue-500: #05719e;
+  --fw-blue-600: #00658c;
+  // was --fw-blue-600: #00638c;
   --fw-blue-700: #004f70;
   --fw-blue-800: #003f5a;
   --fw-blue-900: #1f1f2d;
@@ -174,9 +177,7 @@
 }
 :root{
   @include light-theme {
-    --fw-page-bg-color: var(--fw-beige-100);
+    .default, body {
-
-    .default {
       --color: var(--fw-gray-900);
       --background-color: var(--fw-beige-100);
       --border-color:var(--fw-gray-300);
@@ -185,11 +186,11 @@
       --hover-background-color:var(--fw-beige-200);
       --hover-border-color:var(--fw-gray-800);
 
-      --active-color:var(--fw-red-40);
+      --active-color:var(--fw-red-010);
       --active-background-color:var(--fw-beige-400);
       --active-border-color:var(--fw-gray-600);
 
-      --pressed-color:var(--fw-red-40);
+      --pressed-color:var(--fw-red-010);
       --pressed-background-color:var(--fw-gray-900);
 
       --disabled-color:var(--fw-gray-500);
@@ -202,31 +203,6 @@
       }
     }
 
-    .primary {
-      --color: var(--fw-blue-010);
-      --background-color:var(--fw-blue-400);
-      --border-color:var(--fw-blue-010);
-
-      --hover-color: var(--fw-blue-010);
-      --hover-background-color:var(--fw-blue-500);
-
-      --active-color: var(--fw-blue-010);
-      --active-background-color:var(--fw-blue-600);
-
-      --pressed-color:var(--fw-blue-010);
-      --pressed-background-color:var(--fw-blue-800);
-
-      --disabled-color:var(--fw-blue-900);
-      --disabled-background-color:var(--fw-blue-100);
-      --disabled-border-color:var(--fw-blue-100);
-
-      &.raised {
-        --background-color:var(--fw-blue-500);
-        --hover-background-color:var(--fw-blue-600);
-        --active-background-color:var(--fw-blue-700);
-      }
-    }
-
     .secondary, button {
       --color: var(--fw-gray-700);
       --background-color: var(--fw-gray-200);
@@ -255,6 +231,31 @@
       }
     }
 
+    .primary {
+      --color: var(--fw-blue-010);
+      --background-color:var(--fw-blue-400);
+      --border-color:var(--fw-blue-010);
+
+      --hover-color: var(--fw-blue-010);
+      --hover-background-color:var(--fw-blue-500);
+
+      --active-color: var(--fw-blue-010);
+      --active-background-color:var(--fw-blue-600);
+
+      --pressed-color:var(--fw-blue-010);
+      --pressed-background-color:var(--fw-blue-800);
+
+      --disabled-color:var(--fw-blue-900);
+      --disabled-background-color:color-mix(in oklab, var(--fw-blue-100) 20%, var(--fw-blue-400));
+      --disabled-border-color:transparent;
+
+      &.raised {
+        --background-color:var(--fw-blue-500);
+        --hover-background-color:var(--fw-blue-600);
+        --active-background-color:var(--fw-blue-700);
+      }
+    }
+
     .destructive {
       --color: var(--fw-red-010);
       --background-color: var(--fw-red-500);
@@ -276,7 +277,7 @@
     .blue {
       --color: var(--fw-blue-900);
       --background-color: var(--fw-pastel-blue-1);
-      .raised, button {
+      &.raised, .action>button {
         --background-color: var(--fw-pastel-blue-2);
         --hover-background-color: var(--fw-pastel-blue-3);
         --active-background-color: var(--fw-pastel-blue-4);
@@ -289,109 +290,222 @@
     .red {
       --color: var(--fw-red-900);
       --background-color: var(--fw-pastel-red-2);
+      &.raised, .action>button {
+        --background-color: var(--fw-pastel-red-2);
+        --hover-background-color: var(--fw-pastel-red-3);
+        --active-background-color: var(--fw-pastel-red-4);
+        --disabled-color: var(--fw-gray-700);
+        --disabled-border-color: var(--fw-gray-400);
+        --disabled-background-color: transparent;
+      }
     }
 
     .purple {
       --color: var(--fw-gray-970);
       --background-color: var(--fw-pastel-purple-1);
+      &.raised, .action>button {
+        --background-color: var(--fw-pastel-purple-2);
+        --hover-background-color: var(--fw-pastel-purple-3);
+        --active-background-color: var(--fw-pastel-purple-4);
+        --disabled-color: var(--fw-gray-700);
+        --disabled-border-color: var(--fw-gray-400);
+        --disabled-background-color: transparent;
+      }
     }
 
     .green {
       --color: var(--fw-gray-900);
       --background-color: var(--fw-pastel-green-1);
+      &.raised, .action>button {
+        --background-color: var(--fw-pastel-green-2);
+        --hover-background-color: var(--fw-pastel-green-3);
+        --active-background-color: var(--fw-pastel-green-4);
+        --disabled-color: var(--fw-gray-700);
+        --disabled-border-color: var(--fw-gray-400);
+        --disabled-background-color: transparent;
+      }
     }
 
     .yellow {
       --color: var(--fw-gray-900);
       --background-color: var(--fw-pastel-yellow-1);
+      &.raised, .action>button {
+        --background-color: var(--fw-pastel-yellow-2);
+        --hover-background-color: var(--fw-pastel-yellow-3);
+        --active-background-color: var(--fw-pastel-yellow-4);
+        --disabled-color: var(--fw-gray-700);
+        --disabled-border-color: var(--fw-gray-400);
+        --disabled-background-color: transparent;
+      }
     }
   }
 
   @include dark-theme {
-    .is-primary {
+    .default, body {
-      --fw-bg-color: var(--fw-blue-600);
+      --color: var(--fw-beige-100);
-      --fw-text-color: var(--fw-blue-010);
+      --background-color: var(--fw-gray-970);
+      --border-color:var(--fw-gray-700);
 
-      &.is-colored {
+      --hover-color:var(--fw-beige-400);
-        &[disabled] {
+      --hover-background-color:var(--fw-gray-950);
-          --fw-bg-color: var(--fw-blue-100) !important;
+      --hover-border-color:var(--fw-beige-400);
-          --fw-text-color: var(--fw-blue-900) !important;
-        }
 
-        &.is-hovered,
+      --active-color:var(--fw-gray-600);
-        &:hover {
+      --active-background-color:var(--fw-beige-400);
-          --fw-bg-color: var(--fw-blue-700);
+      --active-border-color:var(--fw-gray-600);
-        }
 
-        &.is-active,
+      --pressed-color:var(--fw-red-010);
-        &.active,
+      --pressed-background-color:var(--fw-gray-900);
-        &:active {
+
-          --fw-bg-color: var(--fw-blue-800);
+      --disabled-color:var(--fw-gray-500);
-          &.router-link-exact-active {
+      --disabled-background-color:var(--fw-gray-950);
-            --fw-bg-color: var(--fw-blue-900);
+      --disabled-border-color:var(--fw-gray-950);
-          }
+
-        }
+      &.raised{
+        --background-color:var(--fw-gray-800);
+        --border-color:var(--fw-gray-600);
       }
     }
 
-    .is-secondary {
+    .secondary, button {
-      --fw-bg-color: var(--fw-gray-700);
+      --color: var(--fw-gray-300);
-      --fw-text-color: var(--fw-red-010);
+      --background-color: var(--fw-gray-850);
+      --border-color:var(--fw-gray-600);
 
-      &.is-colored {
+      --hover-color:var(--fw-gray-200);
-        &.is-hovered,
+      --hover-background-color:var(--fw-gray-800);
-        &:hover {
+      --hover-border-color:var(--fw-gray-300);
-          --fw-bg-color: var(--fw-gray-950);
-        }
 
-        &.is-active,
+      --active-color:var(--fw-gray-300);
-        &.active,
+      --active-background-color:var(--fw-gray-970);
-        &:active {
+      --active-border-color:var(--fw-gray-400);
-          --fw-bg-color: var(--fw-gray-900);
+
-          &.router-link-exact-active {
+      --pressed-color:var(--fw-beige-200);
-            --fw-bg-color: var(--fw-gray-850);
+      --pressed-background-color:var(--fw-gray-900);
-          }
+
-        }
+      --disabled-color:var(--fw-gray-500);
-      }
+      --disabled-background-color:color-mix(in oklab, var(--fw-gray-900) 20%, var(--fw-gray-950));
-      &[disabled] {
+      --disabled-border-color:transparent;
-        --fw-bg-color: var(--fw-gray-600)
+
-        --fw-text-color: var(--fw-gray-950)
+      &.raised {
+        --color: var(--fw-gray-200);
+        --background-color:var(--fw-gray-700);
+        --disabled-background-color:color-mix(in oklab, var(--fw-gray-800) 80%, var(--fw-gray-700));
+        --border-color:var(--fw-gray-500);
+        --hover-background-color:color-mix(in oklab, var(--fw-gray-600) 20%, var(--fw-gray-700));
+        --active-color:var(--fw-gray-400);
+        --active-background-color:var(--fw-gray-900);
       }
     }
 
-    .is-destructive {
+    .primary {
-      --fw-bg-color: var(--fw-red-600);
+      --color: var(--fw-blue-010);
-      --fw-text-color: var(--fw-red-010);
+      --background-color:var(--fw-blue-600);
+      --border-color:var(--fw-blue-010);
 
-      &.is-colored {
+      --hover-color: var(--fw-blue-010);
-        &[disabled] {
+      --hover-background-color:var(--fw-blue-500);
-          --fw-bg-color: var(--fw-red-100) !important;
-          --fw-text-color: var(--fw-red-900) !important;
-        }
 
-        &.is-hovered,
+      --active-color: var(--fw-blue-010);
-        &:hover {
+      --active-background-color:var(--fw-blue-800);
-          --fw-bg-color: var(--fw-red-700);
-        }
 
-        &.is-active,
+      --pressed-color:var(--fw-blue-010);
-        &.active,
+      --pressed-background-color:var(--fw-blue-700);
-        &:active {
+
-          --fw-bg-color: var(--fw-red-800);
+      --disabled-color:color-mix(in oklab, var(--fw-blue-010) 10%, var(--fw-blue-100));
-        }
+      --disabled-background-color:color-mix(in oklab, var(--fw-blue-700) 50%, var(--fw-blue-600));
+      --disabled-border-color:transparent;
+
+
+      &.raised {
+        --background-color:var(--fw-blue-500);
+        --hover-background-color:var(--fw-blue-400);
+        --active-background-color:var(--fw-blue-900);
+        --disabled-background-color:color-mix(in oklab, var(--fw-blue-500) 20%, var(--fw-blue-600));
+      }
+    }
+
+    .destructive {
+      --color: var(--fw-red-010);
+      --background-color: var(--fw-red-500);
+      --border-color:var(--fw-red-500);
+
+      --hover-color:var(--fw-gray-100);
+      --hover-background-color:var(--fw-red-600);
+      --hover-border-color:var(--fw-red-600);
+
+      --active-color:var(--fw-gray-100);
+      --active-background-color:var(--fw-red-700);
+      --active-border-color:var(--fw-red-700);
+
+      --disabled-color:var(--fw-gray-500);
+      --disabled-background-color:var(--fw-gray-100);
+      --disabled-border-color:var(--fw-gray-100);
+    }
+
+    .blue {
+      --color: var(--fw-blue-900);
+      --background-color: var(--fw-pastel-blue-1);
+      &.raised, .action>button {
+        --background-color: var(--fw-pastel-blue-2);
+        --hover-background-color: var(--fw-pastel-blue-3);
+        --active-background-color: var(--fw-pastel-blue-4);
+        --disabled-color: var(--fw-gray-700);
+        --disabled-border-color: var(--fw-gray-400);
+        --disabled-background-color: transparent;
+      }
+    }
+
+    .red {
+      --color: var(--fw-red-900);
+      --background-color: var(--fw-pastel-red-2);
+      &.raised, .action>button {
+        --background-color: var(--fw-pastel-red-2);
+        --hover-background-color: var(--fw-pastel-red-3);
+        --active-background-color: var(--fw-pastel-red-4);
+        --disabled-color: var(--fw-gray-700);
+        --disabled-border-color: var(--fw-gray-400);
+        --disabled-background-color: transparent;
+      }
+    }
+
+    .purple {
+      --color: var(--fw-gray-970);
+      --background-color: var(--fw-pastel-purple-1);
+      &.raised, .action>button {
+        --background-color: var(--fw-pastel-purple-2);
+        --hover-background-color: var(--fw-pastel-purple-3);
+        --active-background-color: var(--fw-pastel-purple-4);
+        --disabled-color: var(--fw-gray-700);
+        --disabled-border-color: var(--fw-gray-400);
+        --disabled-background-color: transparent;
+      }
+    }
+
+    .green {
+      --color: var(--fw-gray-900);
+      --background-color: var(--fw-pastel-green-1);
+      &.raised, .action>button {
+        --background-color: var(--fw-pastel-green-2);
+        --hover-background-color: var(--fw-pastel-green-3);
+        --active-background-color: var(--fw-pastel-green-4);
+        --disabled-color: var(--fw-gray-700);
+        --disabled-border-color: var(--fw-gray-400);
+        --disabled-background-color: transparent;
+      }
+    }
+
+    .yellow {
+      --color: var(--fw-gray-900);
+      --background-color: var(--fw-pastel-yellow-1);
+      &.raised, .action>button {
+        --background-color: var(--fw-pastel-yellow-2);
+        --hover-background-color: var(--fw-pastel-yellow-3);
+        --active-background-color: var(--fw-pastel-yellow-4);
+        --disabled-color: var(--fw-gray-700);
+        --disabled-border-color: var(--fw-gray-400);
+        --disabled-background-color: transparent;
       }
     }
   }
 }
-
-
-.funkwhale {
-  @each $pastel in ("blue", "red", "green", "purple", "yellow") {
-    &.is-#{$pastel} {
-      --fw-pastel-1: var(--fw-pastel-#{$pastel}-1);
-      --fw-pastel-2: var(--fw-pastel-#{$pastel}-2);
-      --fw-pastel-3: var(--fw-pastel-#{$pastel}-3);
-      --fw-pastel-4: var(--fw-pastel-#{$pastel}-4);
-    }
-  }
-}

front/src/style/inc/theme.scss

@@ -3,10 +3,10 @@ $font-main: "Lato", sans-serif;
 @mixin theme($isDark) {
   $root-selectors: ();
   /* Satisfy both vitepress (docs) and funkwhale (front) convention */
-  $root-element: ":is(body.theme-dark, html.dark>body:not(.theme-light))";
+  $root-element: ":is(body.theme-dark, html.dark>body:not(.theme-light), .force-dark-theme)";
 
   @if $isDark == false {
-    $root-element: ":is(body.theme-light, html:not(.dark)>body:not(.theme-dark))";
+    $root-element: ":is(body.theme-light, html:not(.dark)>body:not(.theme-dark), .force-light-theme)";
   }
 
   // If we call `@include dark-theme {}` at the root of the file

front/ui-docs/using-color.md

@@ -53,39 +53,118 @@ import { color } from "~/composables/colors.ts";
 
 ## Base colors
 
+Keep most of the screen neutral. Secondary surfaces indicate actionability. Use them sparingly. Primary and destructive surfaces immediately catch the eye. Use them only once or twice per screen.
+
 ### Neutral
 
-<div :class="$style.swatch" v-bind="color('default solid')" />
+Use neutral colors for non-interactive surfaces
-<div :class="$style.swatch" v-bind="color('default solid interactive')" />
+
-<div :class="$style.swatch" v-bind="color('default solid raised')" />
+<Layout flex>
-<div :class="$style.swatch" v-bind="color('default solid interactive')" />
+  <div class="force-dark-theme">
+    <div v-bind="color('default solid')">
+      <div :class="$style.swatch" v-bind="color('default solid')" />
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('default solid interactive')" />
+    </div><div v-bind="color('default solid raised')">
+      <div :class="$style.swatch" v-bind="color('default solid raised')" />
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('default solid raised interactive')" />
+    </div>
+  </div>
+
+  <div class="force-light-theme">
+    <div v-bind="color('default solid')">
+      <div :class="$style.swatch" v-bind="color('default solid')" />
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('default solid interactive')" />
+    </div><div v-bind="color('default solid raised')">
+      <div :class="$style.swatch" v-bind="color('default solid raised')" />
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('default solid raised interactive')" />
+    </div>
+  </div>
+</Layout>
 
 ### Color
 
-Primary
+#### Primary
 
-<div :class="$style.swatch" v-bind="color('primary solid')" />
+Only use for at most one call-to-action on a screen
-<div :class="$style.swatch" v-bind="color('primary solid interactive')" />
-<div :class="$style.swatch" v-bind="color('primary solid raised')" />
-<div :class="$style.swatch" v-bind="color('primary solid interactive')" />
 
-Secondary
+<Layout flex>
+  <div class="force-dark-theme">
+    <div v-bind="color('default solid')">
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('primary solid')" />
+      <div :class="[$style.swatch]" v-bind="color('primary solid interactive')" />
+    </div><div v-bind="color('default solid raised')">
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('primary solid raised')" />
+      <div :class="[$style.swatch]" v-bind="color('primary solid raised interactive')" />
+    </div>
+  </div>
 
-<div :class="$style.swatch" v-bind="color('secondary solid')" />
+  <div class="force-light-theme">
-<div :class="$style.swatch" v-bind="color('secondary solid interactive')" />
+    <div v-bind="color('default solid')">
-<div :class="$style.swatch" v-bind="color('secondary solid raised')" />
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('primary solid')" />
-<div :class="$style.swatch" v-bind="color('secondary solid interactive')" />
+      <div :class="[$style.swatch]" v-bind="color('primary solid interactive')" />
+    </div><div v-bind="color('default solid raised')">
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('primary solid raised')" />
+      <div :class="[$style.swatch]" v-bind="color('primary solid raised interactive')" />
+    </div>
+  </div>
+</Layout>
 
-Destructive
+#### Secondary
 
-<div :class="$style.swatch" v-bind="color('destructive solid')" />
+Use for interactive items and colatilv surfaces such as menus and modals
-<div :class="$style.swatch" v-bind="color('destructive solid interactive')" />
+
-<div :class="$style.swatch" v-bind="color('destructive solid raised')" />
+<Layout flex>
-<div :class="$style.swatch" v-bind="color('destructive solid interactive')" />
+  <div class="force-dark-theme">
+    <div v-bind="color('default solid')">
+      <div :class="$style.swatch" v-bind="color('secondary solid')" />
+      <div :class="[$style.swatch]" v-bind="color('secondary solid interactive')" />
+    </div><div v-bind="color('default solid raised')">
+      <div :class="$style.swatch" v-bind="color('secondary solid raised')" />
+      <div :class="[$style.swatch]" v-bind="color('secondary solid raised interactive')" />
+    </div>
+  </div>
+
+  <div class="force-light-theme">
+    <div v-bind="color('default solid')">
+      <div :class="$style.swatch" v-bind="color('secondary solid')" />
+      <div :class="[$style.swatch]" v-bind="color('secondary solid interactive')" />
+    </div><div v-bind="color('default solid raised')">
+      <div :class="$style.swatch" v-bind="color('secondary solid raised')" />
+      <div :class="[$style.swatch]" v-bind="color('secondary solid raised interactive')" />
+    </div>
+  </div>
+</Layout>
+
+#### Destructive
+
+Use for dangerous actions
+
+<Layout flex>
+  <div class="force-dark-theme">
+    <div v-bind="color('default solid')">
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('destructive solid')" />
+      <div :class="[$style.swatch]" v-bind="color('destructive solid interactive')" />
+    </div><div v-bind="color('default solid raised')">
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('destructive solid raised')" />
+      <div :class="[$style.swatch]" v-bind="color('destructive solid raised interactive')" />
+    </div>
+  </div>
+
+  <div class="force-light-theme">
+    <div v-bind="color('default solid')">
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('destructive solid')" />
+      <div :class="[$style.swatch]" v-bind="color('destructive solid interactive')" />
+    </div><div v-bind="color('default solid raised')">
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('destructive solid raised')" />
+      <div :class="[$style.swatch]" v-bind="color('destructive solid raised interactive')" />
+    </div>
+  </div>
+</Layout>
 
 ### Pastel
 
-Blue, Red, Purple, Green, Yellow
+Use `Blue`, `Red`, `Purple`, `Green`, `Yellow` for user-defined tags and for friendly messages such as
+Alerts
 
 <div :class="$style.swatch" v-bind="color('blue solid interactive')" />
 <div :class="$style.swatch" v-bind="color('red solid interactive')" />
@@ -93,58 +172,143 @@ Blue, Red, Purple, Green, Yellow
 <div :class="$style.swatch" v-bind="color('green solid interactive')" />
 <div :class="$style.swatch" v-bind="color('yellow solid interactive')" />
 
----
-
 ### Variant
 
-Solid (default), Ghost, Outline
+You can de-emphasize interactive elements by hiding their background and/or outline.
+
+`Solid` (default), `Ghost`, `Outline`:
 
 <Button round shadow icon="bi-x" solid />
+
 <div :class="$style.swatch" v-bind="color('solid raised')">
-<Button round icon="bi-x" ghost />
+  <Button round icon="bi-x" ghost />
-<Spacer />
+  <Spacer />
-<Button round icon="bi-x" outline />
+  <Button round icon="bi-x" outline />
 </div>
 
 <br/>
 
 <Button round shadow icon="bi-x" primary solid />
-<div :class="$style.swatch" v-bind="color('primary solid')">
-<Button round icon="bi-x" primary ghost />
-<Spacer />
-<Button round icon="bi-x" primary outline />
-</div>
 
----
+<div :class="$style.swatch" v-bind="color('primary solid')">
+  <Button round icon="bi-x" primary ghost />
+  <Spacer />
+  <Button round icon="bi-x" primary outline />
+</div>
 
 ### Interactive and/or Raised
 
-<div v-bind="color('default solid')" style="display:inline-flex;">
+Use raised surfaces sparingly, about ¼ of the screen. Only use raised surfaces to highlight one area of a component over others. Good examples are `aside`s such as the sidebar or info-boxes.
-    <div :class="$style.swatch" v-bind="color('solid')" />
+
-    <div :class="$style.swatch" v-bind="color('solid interactive')" />
+Space out interactive surfaces.
+
+<Layout>
+
+<div class="force-light-theme">
+
+<Layout flex>
+  <div>
+    <div v-bind="color('default solid')">
+      <div :class="[$style.swatch]" v-bind="color('solid')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
+      <div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
+    </div>
+    <div v-bind="color('secondary solid')">
+      <div :class="[$style.swatch]" v-bind="color('solid')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
+      <div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
+    </div>
+    <div v-bind="color('primary solid')">
+      <div :class="[$style.swatch]" v-bind="color('solid')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
+      <div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
+    </div>
+  </div><div>
+    <div v-bind="color('default raised solid')">
+      <div :class="[$style.swatch]" v-bind="color('solid raised')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
+      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
+    </div>
+    <div v-bind="color('secondary raised solid')">
+      <div :class="[$style.swatch]" v-bind="color('solid raised')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
+      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
+    </div>
+    <div v-bind="color('primary raised solid')">
+      <div :class="[$style.swatch]" v-bind="color('solid raised')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
+      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
+    </div>
+  </div>
+</Layout>
+
 </div>
-<div v-bind="color('secondary solid')" style="display:inline-flex;">
+
-    <div :class="$style.swatch" v-bind="color('solid')" />
+<div class="force-dark-theme">
-    <div :class="$style.swatch" v-bind="color('solid interactive')" />
+
-</div>
+<Layout flex>
-<div v-bind="color('primary solid')" style="display:inline-flex;">
+  <div>
-    <div :class="$style.swatch" v-bind="color('solid')" />
+    <div v-bind="color('default solid')">
-    <div :class="$style.swatch" v-bind="color('solid interactive')" />
+      <div :class="[$style.swatch]" v-bind="color('solid')" />
-</div>
+      <div :class="[$style.swatch]" v-bind="color('solid interactive')" />
-<br/>
+      <div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
-<div v-bind="color('default raised solid')" style="display:inline-flex;">
+      <div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
-    <div :class="$style.swatch" v-bind="color('solid raised')" />
+    </div>
-    <div :class="$style.swatch" v-bind="color('solid interactive raised')" />
+    <div v-bind="color('secondary solid')">
-</div>
+      <div :class="[$style.swatch]" v-bind="color('solid')" />
-<div v-bind="color('secondary raised solid')" style="display:inline-flex;">
+      <div :class="[$style.swatch]" v-bind="color('solid interactive')" />
-    <div :class="$style.swatch" v-bind="color('solid raised')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
-    <div :class="$style.swatch" v-bind="color('solid interactive raised')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
-</div>
+    </div>
-<div v-bind="color('primary raised solid')" style="display:inline-flex;">
+    <div v-bind="color('primary solid')">
-    <div :class="$style.swatch" v-bind="color('solid raised')" />
+      <div :class="[$style.swatch]" v-bind="color('solid')" />
-    <div :class="$style.swatch" v-bind="color('solid interactive raised')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
+      <div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
+    </div><br/>Normal
+  </div><div>
+    <div v-bind="color('default raised solid')">
+      <div :class="[$style.swatch]" v-bind="color('solid raised')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
+      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
+    </div>
+    <div v-bind="color('secondary raised solid')">
+      <div :class="[$style.swatch]" v-bind="color('solid raised')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
+      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
+    </div>
+    <div v-bind="color('primary raised solid')">
+      <div :class="[$style.swatch]" v-bind="color('solid raised')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
+      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
+      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
+    </div><br/><strong>Raised</strong>
+  </div>
+</Layout>
 </div>
 
+</Layout>
+
+<Layout flex style="align-items: center;">
+
+| neutral   |
+| --------- |
+| secondary |
+| primary   |
+
+| (normal) | interactive | disabled | pressed |
+| -------- | ----------- | -------- | ------- |
+
+</Layout>
+
 ## Palette
 
 The color palette consists of Blues, Reds, Grays, Beiges, as well as pastel blue/red/green/yellow.
@@ -281,6 +445,8 @@ It's good practice to limit the scope of a variable to the module that needs it:
 
 Read more about [style modules in the corresponding vue docs](https://vuejs.org/api/sfc-css-features.html#css-modules).
 
+For testing purposes and side-by-side comparisons, you can add the classes `force-dark-theme` and `force-light-theme`.
+
 ## Semantic colors
 
 We use semantic color variables that can mean a different shade depending on the currently chosen theme
@@ -334,6 +500,7 @@ For each semantic color, we set a foreground and a background. In addition, we n
 
 <style module>
     .swatch {
+      transition:all .15s, filter 0s;
         border-radius: 2em;
         min-width: 3.2em;
         min-height: 3.2em;
@@ -344,26 +511,27 @@ For each semantic color, we set a foreground and a background. In addition, we n
         justify-items:center;
         position:relative;
 
-        &::after{
+        &::after {
           position:absolute;
           inset:13%;
           content:"fw";
           line-height:2.68em;
           font-size:80%;
           text-align: center;
-          outline: 2.5px dashed currentcolor;
-          outline-offset:-.95em;
           transform:rotate(15deg);
           letter-spacing:-.02em;
           font-weight:800;
         }
-        &:is(:not(:global(.solid)):not(:hover),:has(*))::after{
+        &:is(:not(:global(.solid)):not(:hover),:has(*))::after {
           opacity:0
         }
-
+    }
-        &:not(:hover)::after{
+    :not(:hover)>.deemphasized {
-          outline-color:transparent;
+      filter:blur(4px);
-        }
+      opacity:.5;
+      &::after {
+        opacity:0;
+      }
     }
 
     .small, .tiny {