fix(style): add missing colors for items that sometimes have a transparent background
This commit is contained in:
upsiflu
parent
ac90c20b20
commit
3e31002df9
|
|
@ -167,6 +167,7 @@
|
|||
|
||||
.primary {
|
||||
--color: var(--fw-blue-010);
|
||||
--color-over-transparent: var(--background-color);
|
||||
--background-color:var(--fw-blue-400);
|
||||
--border-color:var(--fw-blue-010);
|
||||
&> .primary {
|
||||
|
|
@ -200,6 +201,7 @@
|
|||
|
||||
.destructive {
|
||||
--color: var(--fw-red-010);
|
||||
--color-over-transparent: var(--background-color);
|
||||
--background-color: var(--fw-red-500);
|
||||
--border-color:var(--fw-red-010);
|
||||
|
||||
|
|
@ -223,6 +225,7 @@
|
|||
|
||||
.blue {
|
||||
--color: var(--fw-blue-900);
|
||||
--color-over-transparent: var(--background-color);
|
||||
--background-color: var(--fw-pastel-blue-1);
|
||||
&.raised, .action>button {
|
||||
--background-color: var(--fw-pastel-blue-2);
|
||||
|
|
@ -239,6 +242,7 @@
|
|||
|
||||
.red {
|
||||
--color: var(--fw-red-900);
|
||||
--color-over-transparent: var(--background-color);
|
||||
--background-color: var(--fw-pastel-red-2);
|
||||
&.raised, .action>button {
|
||||
--background-color: var(--fw-pastel-red-2);
|
||||
|
|
@ -255,6 +259,7 @@
|
|||
|
||||
.purple {
|
||||
--color: var(--fw-gray-970);
|
||||
--color-over-transparent: var(--background-color);
|
||||
--background-color: var(--fw-pastel-purple-1);
|
||||
&.raised, .action>button {
|
||||
--background-color: var(--fw-pastel-purple-2);
|
||||
|
|
@ -271,6 +276,7 @@
|
|||
|
||||
.green {
|
||||
--color: var(--fw-gray-900);
|
||||
--color-over-transparent: var(--background-color);
|
||||
--background-color: var(--fw-pastel-green-1);
|
||||
&.raised, .action>button {
|
||||
--background-color: var(--fw-pastel-green-2);
|
||||
|
|
@ -287,6 +293,7 @@
|
|||
|
||||
.yellow {
|
||||
--color: var(--fw-gray-900);
|
||||
--color-over-transparent: var(--background-color);
|
||||
--background-color: var(--fw-pastel-yellow-1);
|
||||
&.raised, .action>button {
|
||||
--background-color: var(--fw-pastel-yellow-2);
|
||||
|
|
@ -395,6 +402,7 @@
|
|||
|
||||
.primary {
|
||||
--color: var(--fw-blue-010);
|
||||
--color-over-transparent: var(--background-color);
|
||||
--background-color:var(--fw-blue-600);
|
||||
--border-color:var(--fw-blue-100);
|
||||
|
||||
|
|
@ -422,6 +430,7 @@
|
|||
|
||||
.destructive {
|
||||
--color: var(--fw-red-010);
|
||||
--color-over-transparent: var(--background-color);
|
||||
--background-color: var(--fw-red-500);
|
||||
--border-color:var(--fw-red-100);
|
||||
|
||||
|
|
@ -440,6 +449,7 @@
|
|||
|
||||
.blue {
|
||||
--color: var(--fw-pastel-blue-1);
|
||||
--color-over-transparent: var(--background-color);
|
||||
--background-color: color-mix(in oklab, black 60%, var(--fw-pastel-blue-1));
|
||||
&.raised, .action>button {
|
||||
--background-color: color-mix(in oklab, black 65%, var(--fw-pastel-blue-2));
|
||||
|
|
@ -453,6 +463,7 @@
|
|||
|
||||
.red {
|
||||
--color: var(--fw-pastel-red-1);
|
||||
--color-over-transparent: var(--background-color);
|
||||
--background-color: color-mix(in oklab, black 60%, var(--fw-pastel-red-2));
|
||||
&.raised, .action>button {
|
||||
--background-color: color-mix(in oklab, black 65%, var(--fw-pastel-red-2));
|
||||
|
|
@ -466,6 +477,7 @@
|
|||
|
||||
.purple {
|
||||
--color: var(--fw-gray-100);
|
||||
--color-over-transparent: var(--background-color);
|
||||
--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));
|
||||
|
|
@ -479,6 +491,7 @@
|
|||
|
||||
.green {
|
||||
--color: var(--fw-pastel-green-1);
|
||||
--color-over-transparent: var(--background-color);
|
||||
--background-color: color-mix(in oklab, black 55%, var(--fw-pastel-green-1));
|
||||
&.raised, .action>button {
|
||||
--background-color: color-mix(in oklab, black 60%, var(--fw-pastel-green-2));
|
||||
|
|
@ -492,6 +505,7 @@
|
|||
|
||||
.yellow {
|
||||
--color: var(--fw-pastel-yellow-1);
|
||||
--color-over-transparent: var(--background-color);
|
||||
--background-color: color-mix(in oklab, black 53%, var(--fw-pastel-yellow-3));
|
||||
&.raised, .action>button {
|
||||
--background-color: color-mix(in oklab, black 45%, var(--fw-pastel-yellow-3));
|
||||
|
|
@ -557,7 +571,7 @@
|
|||
|
||||
&.interactive {
|
||||
&:hover:not(:has(.interactive:hover)) {
|
||||
color:var(--hover-color);
|
||||
color:var(--hover-color, var(--color));
|
||||
background-color:var(--hover-background-color);
|
||||
border-color: var(--hover-background-color);
|
||||
}
|
||||
|
|
@ -580,12 +594,13 @@
|
|||
}
|
||||
|
||||
.ghost {
|
||||
color: var(--color);
|
||||
color: var(--color-over-transparent, var(--color));
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&.interactive {
|
||||
&:hover:not(:has(.interactive:hover)) {
|
||||
color: var(--hover-color, var(--color));
|
||||
background-color: var(--hover-background-color);
|
||||
border-color: var(--hover-background-color);
|
||||
}
|
||||
|
|
@ -614,12 +629,13 @@
|
|||
}
|
||||
|
||||
.outline {
|
||||
color: var(--color);
|
||||
color: var(--color-over-transparent, var(--color));
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
&.interactive, button {
|
||||
&:hover {
|
||||
color:var(--hover-color, var(--color));
|
||||
border-color: var(--hover-border-color);
|
||||
}
|
||||
&[aria-pressed=true] {
|
||||
|
|
|
|||
Loading…
Reference in New Issue