folinhilo/defgov
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mm

Browse Source
This commit is contained in:
folinhilo
2026-04-23 18:17:17 +08:00
parent 3a7b48e483
commit 9890864e5c
76 changed files with 1096 additions and 1631 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
packages/ui/src/styles/utility/variant.css
View File

@@ -3,8 +3,8 @@
--filled-fg-hover: var(--color-white);
--filled-fg-active: var(--color-white);
--filled-bg: var(--brand-bg);
--filled-bg-hover: var(--brand-bg-high-hover);
--filled-bg-active: var(--brand-bg-high-active);
--filled-bg-hover: var(--brand-bg-hover);
--filled-bg-active: var(--brand-bg-active);
--filled-border-color: var(--color-transparent);
color: var(--filled-fg);
@@ -61,7 +61,7 @@
--subtle-fg: var(--brand-bg);
--subtle-fg-hover: var(--brand-bg);
--subtle-fg-active: var(--brand-bg);
--subtle-bg: var(--color-transparent);
--subtle-bg: var(--brand-bg-low);
--subtle-bg-hover: var(--brand-bg-low-hover);
--subtle-bg-active: var(--brand-bg-low-active);
--subtle-border-color: var(--color-transparent);
@@ -86,31 +86,60 @@
}
}
@utility variant-filled-disabled {
color: var(--filled-fg);
background-color: var(--filled-bg);
border-color: var(--filled-border-color);
filter: grayscale(50%);
@utility variant-ghost {
--ghost-fg: var(--brand-bg);
--ghost-fg-hover: var(--brand-bg);
--ghost-fg-active: var(--brand-bg);
--ghost-bg: var(--color-transparent);
--ghost-bg-hover: var(--brand-bg-low);
--ghost-bg-active: var(--brand-bg-low-hover);
--ghost-border-color: var(--color-transparent);
color: var(--ghost-fg);
background-color: var(--ghost-bg);
border-color: var(--ghost-border-color);
&:hover {
color: var(--filled-fg);
background-color: var(--filled-bg);
border-color: var(--filled-border-color);
filter: grayscale(50%);
background-color: var(--ghost-bg-hover);
color: var(--ghost-fg-hover);
}
&:active {
color: var(--filled-fg);
background-color: var(--filled-bg);
border-color: var(--filled-border-color);
filter: grayscale(50%);
background-color: var(--ghost-bg-active);
color: var(--ghost-fg-active);
}
&:focus-visible {
background-color: var(--ghost-bg-hover);
color: var(--ghost-fg-hover);
}
}
@utility variant-filled-disabled {
color: var(--disabled-fg);
background-color: var(--disabled-bg);
border-color: var(--disabled-border-color);
filter: grayscale(100%);
&:hover {
color: var(--disabled-fg);
background-color: var(--disabled-bg);
border-color: var(--disabled-border-color);
filter: grayscale(100%);
}
&:active {
color: var(--disabled-fg);
background-color: var(--disabled-bg);
border-color: var(--disabled-border-color);
filter: grayscale(100%);
}
&:focus-visible {
color: var(--filled-fg);
background-color: var(--filled-bg);
border-color: var(--filled-border-color);
filter: grayscale(50%);
filter: grayscale(100%);
}
}
@@ -142,30 +171,30 @@
}
}
@utility variant-subtle-disabled {
color: var(--subtle-fg);
background-color: var(--subtle-bg);
border-color: var(--subtle-border-color);
@utility variant-ghost-disabled {
color: var(--ghost-fg);
background-color: var(--ghost-bg);
border-color: var(--ghost-border-color);
filter: grayscale(50%);
&:hover {
color: var(--subtle-fg);
background-color: var(--subtle-bg);
border-color: var(--subtle-border-color);
color: var(--ghost-fg);
background-color: var(--ghost-bg);
border-color: var(--ghost-border-color);
filter: grayscale(50%);
}
&:active {
color: var(--subtle-fg);
background-color: var(--subtle-bg);
border-color: var(--subtle-border-color);
color: var(--ghost-fg);
background-color: var(--ghost-bg);
border-color: var(--ghost-border-color);
filter: grayscale(50%);
}
&:focus-visible {
color: var(--subtle-fg);
background-color: var(--subtle-bg);
border-color: var(--subtle-border-color);
color: var(--ghost-fg);
background-color: var(--ghost-bg);
border-color: var(--ghost-border-color);
filter: grayscale(50%);
}
}