feat(ui): [WIP] remove more stale color definitions
This commit is contained in:
upsiflu
parent
85004fa40e
commit
b806f97fe1
|
|
@ -78,386 +78,388 @@
|
|||
|
||||
// (2) Choosing the semantic colors from the palette
|
||||
|
||||
:root{
|
||||
@include light-theme {
|
||||
.default {
|
||||
--link-color:var(--fw-blue-400);
|
||||
--link-hover-color:var(--fw-blue-500);
|
||||
// Light theme
|
||||
|
||||
--color: var(--fw-gray-900);
|
||||
--background-color: var(--fw-beige-100);
|
||||
:is(body.theme-light, html:not(.dark)>body:not(.theme-dark)), .force-light-theme.force-light-theme.force-light-theme {
|
||||
.default, .funkwhale {
|
||||
--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);
|
||||
|
||||
--hover-color:var(--fw-gray-800);
|
||||
--hover-background-color:var(--fw-beige-200);
|
||||
--hover-border-color:var(--fw-gray-800);
|
||||
|
||||
--active-color:var(--fw-red-010);
|
||||
--active-background-color:var(--fw-beige-400);
|
||||
--active-border-color:var(--fw-gray-600);
|
||||
|
||||
--pressed-color:var(--fw-red-010);
|
||||
--pressed-background-color:var(--fw-gray-900);
|
||||
|
||||
--disabled-color:var(--fw-gray-500);
|
||||
--disabled-background-color:var(--fw-beige-100);
|
||||
--disabled-border-color:var(--fw-beige-100);
|
||||
|
||||
&.raised {
|
||||
--background-color:var(--fw-beige-300);
|
||||
--border-color:var(--fw-beige-400);
|
||||
}
|
||||
|
||||
--link-active-border-color:var(--fw-beige-400);
|
||||
--link-exact-active-background-color:var(--fw-beige-400);
|
||||
--link-exact-active-border-color:transparent;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
--color: var(--fw-gray-700);
|
||||
--background-color: var(--fw-gray-200);
|
||||
--border-color:var(--fw-gray-700);
|
||||
|
||||
--hover-color:var(--fw-gray-800);
|
||||
--hover-background-color:var(--fw-gray-300);
|
||||
--hover-border-color:var(--fw-gray-800);
|
||||
|
||||
--active-color:var(--fw-gray-970);
|
||||
--active-background-color:var(--fw-gray-400);
|
||||
--active-border-color:var(--fw-gray-400);
|
||||
|
||||
--pressed-color:var(--fw-beige-200);
|
||||
--pressed-background-color:var(--fw-gray-900);
|
||||
|
||||
--disabled-color:var(--fw-gray-500);
|
||||
--disabled-background-color:var(--fw-gray-100);
|
||||
--disabled-border-color:var(--fw-gray-100);
|
||||
|
||||
&.raised {
|
||||
--background-color:var(--fw-gray-300);
|
||||
--border-color:var(--fw-gray-300);
|
||||
|
||||
--hover-color:var(--fw-gray-800);
|
||||
--hover-background-color:var(--fw-beige-200);
|
||||
--hover-border-color:var(--fw-gray-800);
|
||||
|
||||
--active-color:var(--fw-red-010);
|
||||
--active-background-color:var(--fw-beige-400);
|
||||
--active-border-color:var(--fw-gray-600);
|
||||
|
||||
--pressed-color:var(--fw-red-010);
|
||||
--pressed-background-color:var(--fw-gray-900);
|
||||
|
||||
--disabled-color:var(--fw-gray-500);
|
||||
--disabled-background-color:var(--fw-beige-100);
|
||||
--disabled-border-color:var(--fw-beige-100);
|
||||
|
||||
&.raised {
|
||||
--background-color:var(--fw-beige-300);
|
||||
--border-color:var(--fw-beige-400);
|
||||
}
|
||||
|
||||
--link-active-border-color:var(--fw-beige-400);
|
||||
--link-exact-active-background-color:var(--fw-beige-400);
|
||||
--link-exact-active-border-color:transparent;
|
||||
--hover-background-color:var(--fw-gray-400);
|
||||
--active-background-color:var(--fw-gray-500);
|
||||
}
|
||||
|
||||
.secondary {
|
||||
--color: var(--fw-gray-700);
|
||||
--background-color: var(--fw-gray-200);
|
||||
--border-color:var(--fw-gray-700);
|
||||
--link-color:var(--fw-blue-600);
|
||||
--link-hover-color:var(--fw-blue-700);
|
||||
}
|
||||
|
||||
--hover-color:var(--fw-gray-800);
|
||||
--hover-background-color:var(--fw-gray-300);
|
||||
--hover-border-color:var(--fw-gray-800);
|
||||
|
||||
--active-color:var(--fw-gray-970);
|
||||
--active-background-color:var(--fw-gray-400);
|
||||
--active-border-color:var(--fw-gray-400);
|
||||
|
||||
--pressed-color:var(--fw-beige-200);
|
||||
--pressed-background-color:var(--fw-gray-900);
|
||||
|
||||
--disabled-color:var(--fw-gray-500);
|
||||
--disabled-background-color:var(--fw-gray-100);
|
||||
--disabled-border-color:var(--fw-gray-100);
|
||||
|
||||
&.raised {
|
||||
--background-color:var(--fw-gray-300);
|
||||
--border-color:var(--fw-gray-300);
|
||||
--hover-background-color:var(--fw-gray-400);
|
||||
--active-background-color:var(--fw-gray-500);
|
||||
}
|
||||
|
||||
--link-color:var(--fw-blue-600);
|
||||
--link-hover-color:var(--fw-blue-700);
|
||||
.primary {
|
||||
--color: var(--fw-blue-010);
|
||||
--background-color:var(--fw-blue-400);
|
||||
--border-color:var(--fw-blue-400);
|
||||
&> .primary {
|
||||
--border-color:var(--fw-blue-010);
|
||||
}
|
||||
|
||||
.primary {
|
||||
--color: var(--fw-blue-010);
|
||||
--background-color:var(--fw-blue-400);
|
||||
--border-color:var(--fw-blue-400);
|
||||
&> .primary {
|
||||
--border-color:var(--fw-blue-010);
|
||||
}
|
||||
--hover-color: var(--fw-blue-010);
|
||||
--hover-background-color:var(--fw-blue-500);
|
||||
|
||||
--hover-color: var(--fw-blue-010);
|
||||
--hover-background-color:var(--fw-blue-500);
|
||||
--active-color: var(--fw-blue-010);
|
||||
--active-background-color:var(--fw-blue-600);
|
||||
|
||||
--active-color: var(--fw-blue-010);
|
||||
--active-background-color:var(--fw-blue-600);
|
||||
--pressed-color:var(--fw-blue-010);
|
||||
--pressed-background-color:var(--fw-blue-900);
|
||||
|
||||
--pressed-color:var(--fw-blue-010);
|
||||
--pressed-background-color:var(--fw-blue-800);
|
||||
--disabled-color:var(--fw-blue-900);
|
||||
--disabled-background-color:color-mix(in oklab, var(--fw-blue-100) 20%, var(--fw-blue-400));
|
||||
--disabled-border-color:transparent;
|
||||
|
||||
--disabled-color:var(--fw-blue-900);
|
||||
--disabled-background-color:color-mix(in oklab, var(--fw-blue-100) 20%, var(--fw-blue-400));
|
||||
--disabled-border-color:transparent;
|
||||
|
||||
&.raised {
|
||||
--background-color:var(--fw-blue-500);
|
||||
--hover-background-color:var(--fw-blue-600);
|
||||
--active-background-color:var(--fw-blue-700);
|
||||
}
|
||||
|
||||
&:not(:is(.ghost, .outline)) {
|
||||
--link-color:var(--fw-blue-010);
|
||||
--link-hover-color:white;
|
||||
}
|
||||
&.raised {
|
||||
--background-color:var(--fw-blue-500);
|
||||
--hover-background-color:var(--fw-blue-600);
|
||||
--active-background-color:var(--fw-blue-700);
|
||||
}
|
||||
|
||||
.destructive {
|
||||
--color: var(--fw-red-010);
|
||||
--background-color: var(--fw-red-500);
|
||||
--border-color:var(--fw-red-500);
|
||||
|
||||
--hover-color:var(--fw-gray-100);
|
||||
--hover-background-color:var(--fw-red-600);
|
||||
--hover-border-color:var(--fw-red-600);
|
||||
|
||||
--active-color:var(--fw-gray-100);
|
||||
--active-background-color:var(--fw-red-700);
|
||||
--active-border-color:var(--fw-red-700);
|
||||
|
||||
--disabled-color:var(--fw-gray-500);
|
||||
--disabled-background-color:var(--fw-gray-100);
|
||||
--disabled-border-color:var(--fw-gray-100);
|
||||
|
||||
&:not(:is(.ghost, .outline)) {
|
||||
--link-color:var(--fw-blue-010);
|
||||
--link-hover-color:white;
|
||||
}
|
||||
}
|
||||
|
||||
.blue {
|
||||
--color: var(--fw-blue-900);
|
||||
--background-color: 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);
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
|
||||
--link-color:var(--fw-blue-010);
|
||||
--link-hover-color:white;
|
||||
}
|
||||
|
||||
.red {
|
||||
--color: var(--fw-red-900);
|
||||
--background-color: 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);
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
|
||||
--link-color:var(--fw-blue-010);
|
||||
--link-hover-color:white;
|
||||
}
|
||||
|
||||
.purple {
|
||||
--color: var(--fw-gray-970);
|
||||
--background-color: 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);
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
|
||||
--link-color:var(--fw-blue-010);
|
||||
--link-hover-color:white;
|
||||
}
|
||||
|
||||
.green {
|
||||
--color: var(--fw-gray-900);
|
||||
--background-color: 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);
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
|
||||
--link-color:var(--fw-blue-010);
|
||||
--link-hover-color:white;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
--color: var(--fw-gray-900);
|
||||
--background-color: 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);
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
|
||||
&:not(:is(.ghost, .outline)) {
|
||||
--link-color:var(--fw-blue-010);
|
||||
--link-hover-color:white;
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
.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);
|
||||
.destructive {
|
||||
--color: var(--fw-red-010);
|
||||
--background-color: var(--fw-red-500);
|
||||
--border-color:var(--fw-red-500);
|
||||
|
||||
--hover-color:var(--fw-beige-400);
|
||||
--hover-background-color:var(--fw-gray-950);
|
||||
--hover-border-color:var(--fw-beige-400);
|
||||
--hover-color:var(--fw-gray-100);
|
||||
--hover-background-color:var(--fw-red-600);
|
||||
--hover-border-color:var(--fw-red-600);
|
||||
|
||||
--active-color:var(--fw-gray-200);
|
||||
--active-background-color:var(--fw-gray-700);
|
||||
--active-border-color:var(--fw-gray-700);
|
||||
--active-color:var(--fw-gray-100);
|
||||
--active-background-color:var(--fw-red-700);
|
||||
--active-border-color:var(--fw-red-700);
|
||||
|
||||
--pressed-color:var(--fw-red-010);
|
||||
--pressed-background-color:var(--fw-secondary);
|
||||
--disabled-color:var(--fw-gray-500);
|
||||
--disabled-background-color:var(--fw-gray-100);
|
||||
--disabled-border-color:var(--fw-gray-100);
|
||||
|
||||
--disabled-color:var(--fw-gray-500);
|
||||
--disabled-background-color:var(--fw-gray-950);
|
||||
--disabled-border-color:var(--fw-gray-950);
|
||||
&:not(:is(.ghost, .outline)) {
|
||||
--link-color:var(--fw-blue-010);
|
||||
--link-hover-color:white;
|
||||
}
|
||||
}
|
||||
|
||||
&.raised{
|
||||
--background-color:var(--fw-gray-900);
|
||||
--border-color:var(--fw-gray-600);
|
||||
--link-color:var(--fw-gray-400);
|
||||
--link-hover-color:var(--fw-gray-200);
|
||||
}
|
||||
|
||||
--link-active-border-color:var(--fw-gray-700);
|
||||
--link-exact-active-background-color:var(--fw-secondary);
|
||||
--link-exact-active-border-color:var(--fw-secondary);
|
||||
.blue {
|
||||
--color: var(--fw-blue-900);
|
||||
--background-color: 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);
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
--color: var(--fw-gray-300);
|
||||
--background-color: var(--fw-gray-850);
|
||||
--link-color:var(--fw-blue-010);
|
||||
--link-hover-color:white;
|
||||
}
|
||||
|
||||
.red {
|
||||
--color: var(--fw-red-900);
|
||||
--background-color: 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);
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
|
||||
--link-color:var(--fw-blue-010);
|
||||
--link-hover-color:white;
|
||||
}
|
||||
|
||||
.purple {
|
||||
--color: var(--fw-gray-970);
|
||||
--background-color: 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);
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
|
||||
--link-color:var(--fw-blue-010);
|
||||
--link-hover-color:white;
|
||||
}
|
||||
|
||||
.green {
|
||||
--color: var(--fw-gray-900);
|
||||
--background-color: 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);
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
|
||||
--link-color:var(--fw-blue-010);
|
||||
--link-hover-color:white;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
--color: var(--fw-gray-900);
|
||||
--background-color: 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);
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
|
||||
--link-color:var(--fw-blue-010);
|
||||
--link-hover-color:white;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark theme
|
||||
|
||||
:is(body.theme-dark, html.dark>body:not(.theme-light)), .force-dark-theme.force-dark-theme.force-dark-theme {
|
||||
.default, .funkwhale {
|
||||
--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);
|
||||
|
||||
--hover-color:var(--fw-beige-400);
|
||||
--hover-background-color:var(--fw-gray-950);
|
||||
--hover-border-color:var(--fw-beige-400);
|
||||
|
||||
--active-color:var(--fw-gray-200);
|
||||
--active-background-color:var(--fw-gray-700);
|
||||
--active-border-color:var(--fw-gray-700);
|
||||
|
||||
--pressed-color:var(--fw-red-010);
|
||||
--pressed-background-color:var(--fw-secondary);
|
||||
|
||||
--disabled-color:var(--fw-gray-500);
|
||||
--disabled-background-color:var(--fw-gray-950);
|
||||
--disabled-border-color:var(--fw-gray-950);
|
||||
|
||||
&.raised{
|
||||
--background-color:var(--fw-gray-900);
|
||||
--border-color:var(--fw-gray-600);
|
||||
|
||||
--hover-color:var(--fw-gray-200);
|
||||
--hover-background-color:var(--fw-gray-800);
|
||||
--hover-border-color:var(--fw-gray-300);
|
||||
|
||||
--active-color:var(--fw-gray-300);
|
||||
--active-background-color:var(--fw-gray-970);
|
||||
--active-border-color:var(--fw-gray-400);
|
||||
|
||||
--pressed-color:var(--fw-beige-200);
|
||||
--pressed-background-color:var(--fw-gray-900);
|
||||
|
||||
--disabled-color:var(--fw-gray-500);
|
||||
--disabled-background-color:color-mix(in oklab, var(--fw-gray-900) 20%, var(--fw-gray-950));
|
||||
--disabled-border-color:transparent;
|
||||
|
||||
&.raised {
|
||||
--color: var(--fw-gray-200);
|
||||
--background-color:var(--fw-gray-700);
|
||||
--disabled-background-color:color-mix(in oklab, var(--fw-gray-800) 80%, var(--fw-gray-700));
|
||||
--border-color:var(--fw-gray-500);
|
||||
--hover-background-color:color-mix(in oklab, var(--fw-gray-600) 20%, var(--fw-gray-700));
|
||||
--active-color:var(--fw-gray-400);
|
||||
--active-background-color:var(--fw-gray-900);
|
||||
}
|
||||
|
||||
--link-color:var(--fw-gray-500);
|
||||
--link-hover-color:var(--fw-gray-600);
|
||||
--link-color:var(--fw-gray-400);
|
||||
--link-hover-color:var(--fw-gray-200);
|
||||
}
|
||||
|
||||
.primary {
|
||||
--color: var(--fw-blue-010);
|
||||
--background-color:var(--fw-blue-600);
|
||||
--border-color:var(--fw-blue-010);
|
||||
--link-active-border-color:var(--fw-gray-700);
|
||||
--link-exact-active-background-color:var(--fw-secondary);
|
||||
--link-exact-active-border-color:var(--fw-secondary);
|
||||
}
|
||||
|
||||
--hover-color: var(--fw-blue-010);
|
||||
--hover-background-color:var(--fw-blue-500);
|
||||
.secondary {
|
||||
--color: var(--fw-gray-300);
|
||||
--background-color: var(--fw-gray-850);
|
||||
--border-color:var(--fw-gray-600);
|
||||
|
||||
--active-color: var(--fw-blue-010);
|
||||
--active-background-color:var(--fw-blue-800);
|
||||
--hover-color:var(--fw-gray-200);
|
||||
--hover-background-color:var(--fw-gray-800);
|
||||
--hover-border-color:var(--fw-gray-300);
|
||||
|
||||
--pressed-color:var(--fw-blue-010);
|
||||
--pressed-background-color:var(--fw-blue-700);
|
||||
--active-color:color-mix(in oklab, var(--fw-gray-200) 50%, var(--fw-gray-300));
|
||||
--active-background-color:color-mix(in oklab, var(--fw-gray-950), var(--fw-gray-970));
|
||||
--active-border-color:var(--fw-gray-400);
|
||||
|
||||
--disabled-color:color-mix(in oklab, var(--fw-blue-010) 10%, var(--fw-blue-100));
|
||||
--disabled-background-color:color-mix(in oklab, var(--fw-blue-700) 50%, var(--fw-blue-600));
|
||||
--disabled-border-color:transparent;
|
||||
--pressed-color:var(--fw-beige-200);
|
||||
--pressed-background-color:var(--fw-gray-900);
|
||||
|
||||
--disabled-color:var(--fw-gray-500);
|
||||
--disabled-background-color:color-mix(in oklab, var(--fw-gray-900) 20%, var(--fw-gray-950));
|
||||
--disabled-border-color:transparent;
|
||||
|
||||
&.raised {
|
||||
--background-color:var(--fw-blue-500);
|
||||
--hover-background-color:var(--fw-blue-400);
|
||||
--active-background-color:var(--fw-blue-900);
|
||||
--disabled-background-color:color-mix(in oklab, var(--fw-blue-500) 20%, var(--fw-blue-600));
|
||||
}
|
||||
&.raised {
|
||||
--color: var(--fw-gray-200);
|
||||
--background-color:var(--fw-gray-700);
|
||||
--disabled-background-color:color-mix(in oklab, var(--fw-gray-800) 80%, var(--fw-gray-700));
|
||||
--border-color:var(--fw-gray-500);
|
||||
--hover-background-color:color-mix(in oklab, var(--fw-gray-600) 20%, var(--fw-gray-700));
|
||||
--active-color:var(--fw-gray-400);
|
||||
--active-background-color:var(--fw-gray-900);
|
||||
}
|
||||
|
||||
.destructive {
|
||||
--color: var(--fw-red-010);
|
||||
--background-color: var(--fw-red-500);
|
||||
--border-color:var(--fw-red-500);
|
||||
--link-color:var(--fw-gray-500);
|
||||
--link-hover-color:var(--fw-gray-600);
|
||||
}
|
||||
|
||||
--hover-color:var(--fw-gray-100);
|
||||
--hover-background-color:var(--fw-red-600);
|
||||
--hover-border-color:var(--fw-red-600);
|
||||
.primary {
|
||||
--color: var(--fw-blue-010);
|
||||
--background-color:var(--fw-blue-600);
|
||||
--border-color:var(--fw-blue-010);
|
||||
|
||||
--active-color:var(--fw-gray-100);
|
||||
--active-background-color:var(--fw-red-700);
|
||||
--active-border-color:var(--fw-red-700);
|
||||
--hover-color: var(--fw-blue-010);
|
||||
--hover-background-color:var(--fw-blue-500);
|
||||
|
||||
--disabled-color:var(--fw-gray-500);
|
||||
--disabled-background-color:var(--fw-gray-100);
|
||||
--disabled-border-color:var(--fw-gray-100);
|
||||
--active-color: var(--fw-blue-010);
|
||||
--active-background-color:var(--fw-blue-800);
|
||||
|
||||
--pressed-color:var(--fw-blue-010);
|
||||
--pressed-background-color:var(--fw-blue-700);
|
||||
|
||||
--disabled-color:color-mix(in oklab, var(--fw-blue-010) 10%, var(--fw-blue-100));
|
||||
--disabled-background-color:color-mix(in oklab, var(--fw-blue-700) 50%, var(--fw-blue-600));
|
||||
--disabled-border-color:transparent;
|
||||
|
||||
|
||||
&.raised {
|
||||
--background-color:var(--fw-blue-500);
|
||||
--hover-background-color:var(--fw-blue-400);
|
||||
--active-background-color:var(--fw-blue-900);
|
||||
--disabled-background-color:color-mix(in oklab, var(--fw-blue-500) 20%, var(--fw-blue-600));
|
||||
}
|
||||
}
|
||||
|
||||
.blue {
|
||||
--color: var(--fw-pastel-blue-1);
|
||||
--background-color: color-mix(in oklab, black 66%, 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));
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
.destructive {
|
||||
--color: var(--fw-red-010);
|
||||
--background-color: var(--fw-red-500);
|
||||
--border-color:var(--fw-red-500);
|
||||
|
||||
--hover-color:var(--fw-gray-100);
|
||||
--hover-background-color:var(--fw-red-600);
|
||||
--hover-border-color:var(--fw-red-600);
|
||||
|
||||
--active-color:var(--fw-gray-100);
|
||||
--active-background-color:var(--fw-red-700);
|
||||
--active-border-color:var(--fw-red-700);
|
||||
|
||||
--disabled-color:var(--fw-gray-500);
|
||||
--disabled-background-color:var(--fw-gray-100);
|
||||
--disabled-border-color:var(--fw-gray-100);
|
||||
}
|
||||
|
||||
.blue {
|
||||
--color: var(--fw-pastel-blue-1);
|
||||
--background-color: color-mix(in oklab, black 66%, 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));
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.red {
|
||||
--color: var(--fw-pastel-red-1);
|
||||
--background-color: color-mix(in oklab, black 66%, 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));
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
.red {
|
||||
--color: var(--fw-pastel-red-1);
|
||||
--background-color: color-mix(in oklab, black 66%, 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));
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.purple {
|
||||
--color: var(--fw-gray-100);
|
||||
--background-color: color-mix(in oklab, black 55%, 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));
|
||||
--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;
|
||||
}
|
||||
.purple {
|
||||
--color: var(--fw-gray-100);
|
||||
--background-color: color-mix(in oklab, black 55%, 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));
|
||||
--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;
|
||||
}
|
||||
}
|
||||
|
||||
.green {
|
||||
--color: var(--fw-pastel-green-1);
|
||||
--background-color: color-mix(in oklab, black 66%, 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));
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
.green {
|
||||
--color: var(--fw-pastel-green-1);
|
||||
--background-color: color-mix(in oklab, black 66%, 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));
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.yellow {
|
||||
--color: var(--fw-pastel-yellow-1);
|
||||
--background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-1));
|
||||
&.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));
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
.yellow {
|
||||
--color: var(--fw-pastel-yellow-1);
|
||||
--background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-1));
|
||||
&.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));
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue