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

refactor(colors): better contrasts

This commit is contained in:
upsiflu 2025-01-09 15:01:26 +01:00
parent 4b97b88f8d
commit 2244d4d88a
1 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -427,11 +427,11 @@
.blue { .blue {
--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)); --background-color: color-mix(in oklab, black 60%, var(--fw-pastel-blue-1));
&.raised, .action>button { &.raised, .action>button {
--background-color: color-mix(in oklab, black 71%, var(--fw-pastel-blue-2)); --background-color: color-mix(in oklab, black 65%, var(--fw-pastel-blue-2));
--hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-blue-3)); --hover-background-color: color-mix(in oklab, black 65%, var(--fw-pastel-blue-3));
--active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-blue-4)); --active-background-color: color-mix(in oklab, black 65%, 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;
@ -440,11 +440,11 @@
.red { .red {
--color: var(--fw-pastel-red-1); --color: var(--fw-pastel-red-1);
--background-color: color-mix(in oklab, black 66%, var(--fw-pastel-red-2)); --background-color: color-mix(in oklab, black 60%, var(--fw-pastel-red-2));
&.raised, .action>button { &.raised, .action>button {
--background-color: color-mix(in oklab, black 71%, var(--fw-pastel-red-2)); --background-color: color-mix(in oklab, black 65%, var(--fw-pastel-red-2));
--hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-red-3)); --hover-background-color: color-mix(in oklab, black 65%, var(--fw-pastel-red-3));
--active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-red-4)); --active-background-color: color-mix(in oklab, black 65%, 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;
@ -453,7 +453,7 @@
.purple { .purple {
--color: var(--fw-gray-100); --color: var(--fw-gray-100);
--background-color: color-mix(in oklab, black 55%, var(--fw-pastel-purple-1)); --background-color: color-mix(in oklab, black 50%, var(--fw-pastel-purple-1));
&.raised, .action>button { &.raised, .action>button {
--background-color: color-mix(in oklab, black 61%, var(--fw-pastel-purple-2)); --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)); --hover-background-color: color-mix(in oklab, black 66%, var(--fw-pastel-purple-3));
@ -466,11 +466,11 @@
.green { .green {
--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)); --background-color: color-mix(in oklab, black 55%, var(--fw-pastel-green-1));
&.raised, .action>button { &.raised, .action>button {
--background-color: color-mix(in oklab, black 71%, var(--fw-pastel-green-2)); --background-color: color-mix(in oklab, black 60%, var(--fw-pastel-green-2));
--hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-green-3)); --hover-background-color: color-mix(in oklab, black 60%, var(--fw-pastel-green-3));
--active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-green-4)); --active-background-color: color-mix(in oklab, black 60%, 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;
@ -479,11 +479,11 @@
.yellow { .yellow {
--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)); --background-color: color-mix(in oklab, black 53%, var(--fw-pastel-yellow-3));
&.raised, .action>button { &.raised, .action>button {
--background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-2)); --background-color: color-mix(in oklab, black 45%, var(--fw-pastel-yellow-3));
--hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-3)); --hover-background-color: color-mix(in oklab, black 45%, var(--fw-pastel-yellow-2));
--active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-4)); --active-background-color: color-mix(in oklab, black 45%, var(--fw-pastel-yellow-1));
--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;