chore(ui): clean up colors; add indicator for autofocused interactive elements

front/src/composables/color.ts

@@ -1,6 +1,5 @@
 import type { KeysOfUnion } from "type-fest"
 import type { HTMLAttributes } from "vue"
-import { key } from "~/store"
 
 export type DefaultProps =
   | { default?: true }
@@ -86,13 +85,14 @@ const merge = (classes: string[]) => (attributes: HTMLAttributes = {}) =>
  * Color classes are defined in `colors.scss`. Make sure to implement the correct style there!
  *
  * (1) Add a subset of `& (DefaultProps | ColorProps | PastelProps) & VariantProps & InteractiveProps & RaisedProps` to your `Props` type
- * (2) Call `v-bind="propsToColor(props)"` on your component template
+ * (2) Call `v-bind="color(props)"` on your component template
  * (3) Now your component accepts color props such as `secondary outline raised`.
  *
+ * Composable with `width`, `color`, `alignment`, etc.
+ *
  * @param props Your component's props (or ...rest props if you have destructured them already)
  * @param defaults These props are applied immediately and can be overridden by the user
- * @param attributes Optional: To compose width, color, alignment, etc.
+ * @returns a function from the resulting attributes the corresponding `class` object
- * @returns the corresponding `class` object
  */
 export const color = (props: Partial<Props>, defaults?: Key[]) =>
   merge(

front/src/style/colors.scss

@@ -79,6 +79,10 @@
 
 // (2) Choosing the semantic colors from the palette
 
+* {
+  --focus-background-color: color-mix(in oklab, var(--focus-ring-color) 20%, var(--background-color));
+}
+
 // Light theme
 
 :is(body.theme-light, html:not(.dark)>body:not(.theme-dark)), .force-light-theme.force-light-theme.force-light-theme {
@@ -517,13 +521,19 @@
     }
   }
 
-  // Fallback for `active` indicators
+  // Fallback for `active` indicators (pressed)
 
   [aria-pressed=true] {
     color: var(--pressed-color, var(--active-color));
     background-color: var(--pressed-background-color, var(--active-background-color));
   }
 
+  // FIndicate autofocus when using a mouse
+
+  :focus:not(:focus-visible) {
+    background-color: var(--focus-background-color);
+  }
+
   // Fallback for decorative elements without explicit color props
 
   hr {
@@ -544,8 +554,8 @@
     background-color:var(--background-color);
     border: 1px solid var(--background-color);
 
-    &.interactive:not(:has(.interactive:hover)) {
+    &.interactive {
-      &:hover {
+      &:hover:not(:has(.interactive:hover)) {
         color:var(--hover-color);
         background-color:var(--hover-background-color);
         border-color: var(--hover-background-color);
@@ -573,8 +583,8 @@
     background-color: transparent;
     border: 1px solid transparent;
 
-    &:is(button, .interactive) {
+    &.interactive {
-      &:hover {
+      &:hover:not(:has(.interactive:hover)) {
         background-color: var(--hover-background-color);
         border-color: var(--hover-background-color);
       }
@@ -584,6 +594,7 @@
         border-color: var(--pressed-background-color, var(--active-background-color));
       }
       &:active {
+        color: var(--active-color);
         background-color: var(--active-background-color);
       }
       &[disabled] {
@@ -596,8 +607,8 @@
         border-color: var(--link-active-border-color);
       } */
       &.router-link-exact-active {
-        background-color: var(--link-exact-active-background-color, var(--active-background-color));
+        background-color: var(--exact-active-background-color, var(--active-background-color));
-        border-color: var(--link-exact-active-border-color);
+        border-color: var(--exact-active-border-color);
       }
     }
   }
@@ -619,6 +630,7 @@
       &:is(:active, .active) {
         border-color: var(--active-background-color);
         &.router-link-exact-active {
+        border-color: var(--exact-active-border-color);
         background-color: var(--exact-active-background-color);
         }
       }