refactor(colors): better contrasts
This commit is contained in:
parent
4b97b88f8d
commit
2244d4d88a
|
@ -427,11 +427,11 @@
|
|||
|
||||
.blue {
|
||||
--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 {
|
||||
--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));
|
||||
--background-color: color-mix(in oklab, black 65%, var(--fw-pastel-blue-2));
|
||||
--hover-background-color: color-mix(in oklab, black 65%, var(--fw-pastel-blue-3));
|
||||
--active-background-color: color-mix(in oklab, black 65%, var(--fw-pastel-blue-4));
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
|
@ -440,11 +440,11 @@
|
|||
|
||||
.red {
|
||||
--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 {
|
||||
--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));
|
||||
--background-color: color-mix(in oklab, black 65%, var(--fw-pastel-red-2));
|
||||
--hover-background-color: color-mix(in oklab, black 65%, var(--fw-pastel-red-3));
|
||||
--active-background-color: color-mix(in oklab, black 65%, var(--fw-pastel-red-4));
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
|
@ -453,7 +453,7 @@
|
|||
|
||||
.purple {
|
||||
--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 {
|
||||
--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));
|
||||
|
@ -466,11 +466,11 @@
|
|||
|
||||
.green {
|
||||
--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 {
|
||||
--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));
|
||||
--background-color: color-mix(in oklab, black 60%, var(--fw-pastel-green-2));
|
||||
--hover-background-color: color-mix(in oklab, black 60%, var(--fw-pastel-green-3));
|
||||
--active-background-color: color-mix(in oklab, black 60%, var(--fw-pastel-green-4));
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
|
@ -479,11 +479,11 @@
|
|||
|
||||
.yellow {
|
||||
--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 {
|
||||
--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));
|
||||
--background-color: color-mix(in oklab, black 45%, 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 45%, var(--fw-pastel-yellow-1));
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
|
|
Loading…
Reference in New Issue