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

fix(style): implement all necessary central color definitions for the Sidebar links and buttons

This commit is contained in:
upsiflu 2024-12-17 15:19:47 +01:00
parent 17ff21ab4f
commit a64bfa5f20
6 changed files with 79 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
front/src/App.vue
View File

@ -90,7 +90,6 @@ const isUIv2 = useLocalStorage('ui-v2', true)
<style>
html, body {
font-size: 16px;
}
</style>

18
front/src/style/base/generic.scss
View File

@ -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 {

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

@ -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 {

1
front/src/style/globals/_layout.scss
View File

@ -163,7 +163,6 @@
}
}
.main.pusher,
.ui.vertical.segment {
color: var(--main-color);
background: var(--main-background);

3
front/src/ui/App.vue
View File

@ -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" />

6
front/ui-docs/using-color.md
View File

@ -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 {