chore(ui): [WIP] remove stale color definitions
This commit is contained in:
upsiflu
parent
3ab5830296
commit
739bbb40e3
|
|
@ -1,22 +1,4 @@
|
|||
:root, .funkwhale {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
// (1) Palette
|
||||
|
||||
:root {
|
||||
// Blue
|
||||
|
|
@ -91,133 +73,17 @@
|
|||
--fw-pastel-yellow-4: #efa300;
|
||||
|
||||
// Same in light and dark theme
|
||||
--fw-primary: var(--fw-blue-500);
|
||||
--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{
|
||||
@include light-theme {
|
||||
--link-color:var(--fw-blue-400);
|
||||
--link-hover-color:var(--fw-blue-500);
|
||||
|
||||
.default {
|
||||
--link-color:var(--fw-blue-400);
|
||||
--link-hover-color:var(--fw-blue-500);
|
||||
|
||||
--color: var(--fw-gray-900);
|
||||
--background-color: var(--fw-beige-100);
|
||||
--border-color:var(--fw-gray-300);
|
||||
|
|
@ -237,7 +103,7 @@
|
|||
--disabled-background-color:var(--fw-beige-100);
|
||||
--disabled-border-color:var(--fw-beige-100);
|
||||
|
||||
&.raised{
|
||||
&.raised {
|
||||
--background-color:var(--fw-beige-300);
|
||||
--border-color:var(--fw-beige-400);
|
||||
}
|
||||
|
|
@ -416,9 +282,9 @@
|
|||
}
|
||||
|
||||
@include dark-theme {
|
||||
--link-color:var(--fw-gray-300);
|
||||
--link-hover-color:var(--fw-gray-200);
|
||||
.default, body {
|
||||
.default {
|
||||
--link-color:var(--fw-gray-300);
|
||||
--link-hover-color:var(--fw-gray-200);
|
||||
--color: var(--fw-beige-100);
|
||||
--background-color: var(--fw-gray-970);
|
||||
--border-color:var(--fw-gray-700);
|
||||
|
|
@ -450,7 +316,7 @@
|
|||
--link-exact-active-border-color:var(--fw-secondary);
|
||||
}
|
||||
|
||||
.secondary, button {
|
||||
.secondary {
|
||||
--color: var(--fw-gray-300);
|
||||
--background-color: var(--fw-gray-850);
|
||||
--border-color:var(--fw-gray-600);
|
||||
|
|
@ -530,12 +396,12 @@
|
|||
}
|
||||
|
||||
.blue {
|
||||
--color: var(--fw-blue-900);
|
||||
--background-color: var(--fw-pastel-blue-1);
|
||||
--color: var(--fw-pastel-blue-1);
|
||||
--background-color: color-mix(in oklab, black 66%, 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);
|
||||
--background-color: color-mix(in oklab, black 71%, var(--fw-pastel-blue-2));
|
||||
--hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-blue-3));
|
||||
--active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-blue-4));
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
|
|
@ -543,12 +409,12 @@
|
|||
}
|
||||
|
||||
.red {
|
||||
--color: var(--fw-red-900);
|
||||
--background-color: var(--fw-pastel-red-2);
|
||||
--color: var(--fw-pastel-red-1);
|
||||
--background-color: color-mix(in oklab, black 66%, 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);
|
||||
--background-color: color-mix(in oklab, black 71%, var(--fw-pastel-red-2));
|
||||
--hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-red-3));
|
||||
--active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-red-4));
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
|
|
@ -556,12 +422,12 @@
|
|||
}
|
||||
|
||||
.purple {
|
||||
--color: var(--fw-gray-970);
|
||||
--background-color: var(--fw-pastel-purple-1);
|
||||
--color: var(--fw-gray-100);
|
||||
--background-color: color-mix(in oklab, black 55%, 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);
|
||||
--background-color: color-mix(in oklab, black 61%, var(--fw-pastel-purple-2));
|
||||
--hover-background-color: color-mix(in oklab, black 66%, var(--fw-pastel-purple-3));
|
||||
--active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-purple-4));
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
|
|
@ -569,12 +435,12 @@
|
|||
}
|
||||
|
||||
.green {
|
||||
--color: var(--fw-gray-900);
|
||||
--background-color: var(--fw-pastel-green-1);
|
||||
--color: var(--fw-pastel-green-1);
|
||||
--background-color: color-mix(in oklab, black 66%, 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);
|
||||
--background-color: color-mix(in oklab, black 71%, var(--fw-pastel-green-2));
|
||||
--hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-green-3));
|
||||
--active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-green-4));
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
|
|
@ -582,12 +448,12 @@
|
|||
}
|
||||
|
||||
.yellow {
|
||||
--color: var(--fw-gray-900);
|
||||
--background-color: var(--fw-pastel-yellow-1);
|
||||
--color: var(--fw-pastel-yellow-1);
|
||||
--background-color: color-mix(in oklab, black 71%, 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);
|
||||
--background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-2));
|
||||
--hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-3));
|
||||
--active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-4));
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--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