chore(ui): [WIP] remove stale color definitions
This commit is contained in:
upsiflu
parent
3ab5830296
commit
739bbb40e3
|
|
@ -1,22 +1,4 @@
|
||||||
:root, .funkwhale {
|
// (1) Palette
|
||||||
@include light-theme {
|
|
||||||
--fw-bg-color: var(--fw-blue-010);
|
|
||||||
--fw-text-color: var(--fw-blue-900);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include dark-theme {
|
|
||||||
--fw-bg-color: var(--fw-gray-900);
|
|
||||||
--fw-text-color: var(--fw-gray-100);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $docs {
|
|
||||||
body {
|
|
||||||
@include dark-theme {
|
|
||||||
--vp-c-bg: var(--fw-page-bg-color) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
// Blue
|
// Blue
|
||||||
|
|
@ -91,133 +73,17 @@
|
||||||
--fw-pastel-yellow-4: #efa300;
|
--fw-pastel-yellow-4: #efa300;
|
||||||
|
|
||||||
// Same in light and dark theme
|
// Same in light and dark theme
|
||||||
--fw-primary: var(--fw-blue-500);
|
|
||||||
--fw-secondary: #ff6600;
|
--fw-secondary: #ff6600;
|
||||||
--fw-destructive: var(--fw-red-500);
|
|
||||||
|
|
||||||
// Globals
|
|
||||||
--fw-page-bg-color: var(--fw-gray-960);
|
|
||||||
}
|
|
||||||
|
|
||||||
:is(.VPDoc .vp-doc, .funkwhale){
|
|
||||||
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Variants
|
|
||||||
.solid, .alert>.actions>button, button:not(:is(.ghost,.outline,.tabs-item)) {
|
|
||||||
color: var(--color);
|
|
||||||
background-color:var(--background-color);
|
|
||||||
border: 1px solid var(--background-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 {
|
|
||||||
color:var(--hover-color);
|
|
||||||
background-color:var(--hover-background-color);
|
|
||||||
border-color: var(--hover-background-color);
|
|
||||||
}
|
|
||||||
&:is(:active, .active) {
|
|
||||||
color:var(--active-color);
|
|
||||||
background-color:var(--active-background-color);
|
|
||||||
border-color: var(--active-background-color);
|
|
||||||
}
|
|
||||||
&[disabled] {
|
|
||||||
color: var(--disabled-color);
|
|
||||||
border-color: var(--disabled-border-color);
|
|
||||||
background-color:var(--disabled-background-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.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);
|
|
||||||
}
|
|
||||||
&:active {
|
|
||||||
background-color: var(--active-background-color);
|
|
||||||
}
|
|
||||||
&[disabled] {
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
&:is(:active, .active) {
|
|
||||||
border-color: var(--active-background-color);
|
|
||||||
&.router-link-exact-active {
|
|
||||||
background-color: var(--exact-active-background-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[disabled] {
|
|
||||||
color: var(--disabled-color);
|
|
||||||
border-color: var(--disabled-border-color);
|
|
||||||
background-color:var(--disabled-background-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// (2) Choosing the semantic colors from the palette
|
||||||
|
|
||||||
:root{
|
:root{
|
||||||
@include light-theme {
|
@include light-theme {
|
||||||
|
.default {
|
||||||
--link-color:var(--fw-blue-400);
|
--link-color:var(--fw-blue-400);
|
||||||
--link-hover-color:var(--fw-blue-500);
|
--link-hover-color:var(--fw-blue-500);
|
||||||
|
|
||||||
.default {
|
|
||||||
--color: var(--fw-gray-900);
|
--color: var(--fw-gray-900);
|
||||||
--background-color: var(--fw-beige-100);
|
--background-color: var(--fw-beige-100);
|
||||||
--border-color:var(--fw-gray-300);
|
--border-color:var(--fw-gray-300);
|
||||||
|
|
@ -416,9 +282,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@include dark-theme {
|
@include dark-theme {
|
||||||
|
.default {
|
||||||
--link-color:var(--fw-gray-300);
|
--link-color:var(--fw-gray-300);
|
||||||
--link-hover-color:var(--fw-gray-200);
|
--link-hover-color:var(--fw-gray-200);
|
||||||
.default, body {
|
|
||||||
--color: var(--fw-beige-100);
|
--color: var(--fw-beige-100);
|
||||||
--background-color: var(--fw-gray-970);
|
--background-color: var(--fw-gray-970);
|
||||||
--border-color:var(--fw-gray-700);
|
--border-color:var(--fw-gray-700);
|
||||||
|
|
@ -450,7 +316,7 @@
|
||||||
--link-exact-active-border-color:var(--fw-secondary);
|
--link-exact-active-border-color:var(--fw-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.secondary, button {
|
.secondary {
|
||||||
--color: var(--fw-gray-300);
|
--color: var(--fw-gray-300);
|
||||||
--background-color: var(--fw-gray-850);
|
--background-color: var(--fw-gray-850);
|
||||||
--border-color:var(--fw-gray-600);
|
--border-color:var(--fw-gray-600);
|
||||||
|
|
@ -530,12 +396,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.blue {
|
.blue {
|
||||||
--color: var(--fw-blue-900);
|
--color: var(--fw-pastel-blue-1);
|
||||||
--background-color: var(--fw-pastel-blue-1);
|
--background-color: color-mix(in oklab, black 66%, var(--fw-pastel-blue-1));
|
||||||
&.raised, .action>button {
|
&.raised, .action>button {
|
||||||
--background-color: var(--fw-pastel-blue-2);
|
--background-color: color-mix(in oklab, black 71%, var(--fw-pastel-blue-2));
|
||||||
--hover-background-color: var(--fw-pastel-blue-3);
|
--hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-blue-3));
|
||||||
--active-background-color: var(--fw-pastel-blue-4);
|
--active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-blue-4));
|
||||||
--disabled-color: var(--fw-gray-700);
|
--disabled-color: var(--fw-gray-700);
|
||||||
--disabled-border-color: var(--fw-gray-400);
|
--disabled-border-color: var(--fw-gray-400);
|
||||||
--disabled-background-color: transparent;
|
--disabled-background-color: transparent;
|
||||||
|
|
@ -543,12 +409,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.red {
|
.red {
|
||||||
--color: var(--fw-red-900);
|
--color: var(--fw-pastel-red-1);
|
||||||
--background-color: var(--fw-pastel-red-2);
|
--background-color: color-mix(in oklab, black 66%, var(--fw-pastel-red-2));
|
||||||
&.raised, .action>button {
|
&.raised, .action>button {
|
||||||
--background-color: var(--fw-pastel-red-2);
|
--background-color: color-mix(in oklab, black 71%, var(--fw-pastel-red-2));
|
||||||
--hover-background-color: var(--fw-pastel-red-3);
|
--hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-red-3));
|
||||||
--active-background-color: var(--fw-pastel-red-4);
|
--active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-red-4));
|
||||||
--disabled-color: var(--fw-gray-700);
|
--disabled-color: var(--fw-gray-700);
|
||||||
--disabled-border-color: var(--fw-gray-400);
|
--disabled-border-color: var(--fw-gray-400);
|
||||||
--disabled-background-color: transparent;
|
--disabled-background-color: transparent;
|
||||||
|
|
@ -556,12 +422,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.purple {
|
.purple {
|
||||||
--color: var(--fw-gray-970);
|
--color: var(--fw-gray-100);
|
||||||
--background-color: var(--fw-pastel-purple-1);
|
--background-color: color-mix(in oklab, black 55%, var(--fw-pastel-purple-1));
|
||||||
&.raised, .action>button {
|
&.raised, .action>button {
|
||||||
--background-color: var(--fw-pastel-purple-2);
|
--background-color: color-mix(in oklab, black 61%, var(--fw-pastel-purple-2));
|
||||||
--hover-background-color: var(--fw-pastel-purple-3);
|
--hover-background-color: color-mix(in oklab, black 66%, var(--fw-pastel-purple-3));
|
||||||
--active-background-color: var(--fw-pastel-purple-4);
|
--active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-purple-4));
|
||||||
--disabled-color: var(--fw-gray-700);
|
--disabled-color: var(--fw-gray-700);
|
||||||
--disabled-border-color: var(--fw-gray-400);
|
--disabled-border-color: var(--fw-gray-400);
|
||||||
--disabled-background-color: transparent;
|
--disabled-background-color: transparent;
|
||||||
|
|
@ -569,12 +435,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.green {
|
.green {
|
||||||
--color: var(--fw-gray-900);
|
--color: var(--fw-pastel-green-1);
|
||||||
--background-color: var(--fw-pastel-green-1);
|
--background-color: color-mix(in oklab, black 66%, var(--fw-pastel-green-1));
|
||||||
&.raised, .action>button {
|
&.raised, .action>button {
|
||||||
--background-color: var(--fw-pastel-green-2);
|
--background-color: color-mix(in oklab, black 71%, var(--fw-pastel-green-2));
|
||||||
--hover-background-color: var(--fw-pastel-green-3);
|
--hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-green-3));
|
||||||
--active-background-color: var(--fw-pastel-green-4);
|
--active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-green-4));
|
||||||
--disabled-color: var(--fw-gray-700);
|
--disabled-color: var(--fw-gray-700);
|
||||||
--disabled-border-color: var(--fw-gray-400);
|
--disabled-border-color: var(--fw-gray-400);
|
||||||
--disabled-background-color: transparent;
|
--disabled-background-color: transparent;
|
||||||
|
|
@ -582,12 +448,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.yellow {
|
.yellow {
|
||||||
--color: var(--fw-gray-900);
|
--color: var(--fw-pastel-yellow-1);
|
||||||
--background-color: var(--fw-pastel-yellow-1);
|
--background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-1));
|
||||||
&.raised, .action>button {
|
&.raised, .action>button {
|
||||||
--background-color: var(--fw-pastel-yellow-2);
|
--background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-2));
|
||||||
--hover-background-color: var(--fw-pastel-yellow-3);
|
--hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-3));
|
||||||
--active-background-color: var(--fw-pastel-yellow-4);
|
--active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-4));
|
||||||
--disabled-color: var(--fw-gray-700);
|
--disabled-color: var(--fw-gray-700);
|
||||||
--disabled-border-color: var(--fw-gray-400);
|
--disabled-border-color: var(--fw-gray-400);
|
||||||
--disabled-background-color: transparent;
|
--disabled-background-color: transparent;
|
||||||
|
|
@ -595,3 +461,121 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// (3) Applying colors
|
||||||
|
|
||||||
|
:is(.VPDoc .vp-doc, .funkwhale){
|
||||||
|
|
||||||
|
// (3a) Applying colors to everything that has no explicit color props
|
||||||
|
|
||||||
|
color: var(--color);
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// (3b) Applying colors to things with explicit Variant props
|
||||||
|
|
||||||
|
.solid, .alert>.actions>button, button:not(:is(.ghost,.outline,.tabs-item)) {
|
||||||
|
color: var(--color);
|
||||||
|
background-color:var(--background-color);
|
||||||
|
border: 1px solid var(--background-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 {
|
||||||
|
color:var(--hover-color);
|
||||||
|
background-color:var(--hover-background-color);
|
||||||
|
border-color: var(--hover-background-color);
|
||||||
|
}
|
||||||
|
&:is(:active, .active) {
|
||||||
|
color:var(--active-color);
|
||||||
|
background-color:var(--active-background-color);
|
||||||
|
border-color: var(--active-background-color);
|
||||||
|
}
|
||||||
|
&[disabled] {
|
||||||
|
color: var(--disabled-color);
|
||||||
|
border-color: var(--disabled-border-color);
|
||||||
|
background-color:var(--disabled-background-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
background-color: var(--active-background-color);
|
||||||
|
}
|
||||||
|
&[disabled] {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
&:is(:active, .active) {
|
||||||
|
border-color: var(--active-background-color);
|
||||||
|
&.router-link-exact-active {
|
||||||
|
background-color: var(--exact-active-background-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[disabled] {
|
||||||
|
color: var(--disabled-color);
|
||||||
|
border-color: var(--disabled-border-color);
|
||||||
|
background-color:var(--disabled-background-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue