MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
upsiflu 2025-02-06 16:09:33 +01:00
parent 5f4bc5f175
commit 81731df2ef
2 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
front/src/composables/color.ts
View File

@ -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 the corresponding `class` object
* @returns a function from the resulting attributes the corresponding `class` object
*/
export const color = (props: Partial<Props>, defaults?: Key[]) =>
merge(

28
front/src/style/colors.scss
View File

@ -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)) {
&:hover {
&.interactive {
&: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) {
&:hover {
&.interactive {
&: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));
border-color: var(--link-exact-active-border-color);
background-color: var(--exact-active-background-color, var(--active-background-color));
border-color: var(--exact-active-border-color);
}
}
}
@ -619,7 +630,8 @@
&:is(:active, .active) {
border-color: var(--active-background-color);
&.router-link-exact-active {
background-color: var(--exact-active-background-color);
border-color: var(--exact-active-border-color);
background-color: var(--exact-active-background-color);
}
}
&[disabled] {