Initial commit: Re-connected to Gitea

2026-03-22 04:39:45 +08:00
commit 8e76dd7a7b
103 changed files with 7132 additions and 0 deletions
--- a/packages/ui/src/styles/utility/variant.css
+++ b/packages/ui/src/styles/utility/variant.css
@@ -0,0 +1,137 @@
+@utility variant-filled {
+  color: var(--filled-fg);
+  background-color: var(--filled-bg);
+  border-color: var(--filled-border-color);
+
+  &:hover {
+    background-color: var(--filled-bg-hover);
+  }
+
+  &:active {
+    background-color: var(--filled-bg-active);
+  }
+
+  &:focus-visible {
+    background-color: var(--filled-bg-hover);
+  }
+}
+
+@utility variant-outline {
+  color: var(--outline-fg);
+  background-color: var(--outline-bg);
+  border-color: var(--outline-border-color);
+
+  &:hover {
+    background-color: var(--outline-bg-hover);
+  }
+
+  &:active {
+    background-color: var(--outline-bg-active);
+  }
+
+  &:focus-visible {
+    background-color: var(--outline-bg-hover);
+  }
+}
+
+@utility variant-subtle {
+  color: var(--subtle-fg);
+  background-color: var(--subtle-bg);
+  border-color: var(--subtle-border-color);
+
+  &:hover {
+    background-color: var(--subtle-bg-hover);
+  }
+
+  &:active {
+    background-color: var(--subtle-bg-active);
+  }
+
+  &:focus-visible {
+    background-color: var(--subtle-bg-hover);
+  }
+}
+
+@utility variant-filled-disabled {
+  color: var(--filled-fg);
+  background-color: var(--filled-bg);
+  border-color: var(--filled-border-color);
+  filter: grayscale(50%);
+
+  &:hover {
+    color: var(--filled-fg);
+    background-color: var(--filled-bg);
+    border-color: var(--filled-border-color);
+    filter: grayscale(50%);
+  }
+
+  &:active {
+    color: var(--filled-fg);
+    background-color: var(--filled-bg);
+    border-color: var(--filled-border-color);
+    filter: grayscale(50%);
+  }
+
+  &:focus-visible {
+    color: var(--filled-fg);
+    background-color: var(--filled-bg);
+    border-color: var(--filled-border-color);
+    filter: grayscale(50%);
+  }
+}
+
+@utility variant-outline-disabled {
+  color: var(--outline-fg);
+  background-color: var(--outline-bg);
+  border-color: var(--outline-border-color);
+  filter: grayscale(50%);
+
+  &:hover {
+    color: var(--outline-fg);
+    background-color: var(--outline-bg);
+    border-color: var(--outline-border-color);
+    filter: grayscale(50%);
+  }
+
+  &:active {
+    color: var(--outline-fg);
+    background-color: var(--outline-bg);
+    border-color: var(--outline-border-color);
+    filter: grayscale(50%);
+  }
+
+  &:focus-visible {
+    color: var(--outline-fg);
+    background-color: var(--outline-bg);
+    border-color: var(--outline-border-color);
+    filter: grayscale(50%);
+  }
+}
+
+@utility variant-subtle-disabled {
+  color: var(--subtle-fg);
+  background-color: var(--subtle-bg);
+  border-color: var(--subtle-border-color);
+  filter: grayscale(50%);
+
+  &:hover {
+    color: var(--subtle-fg);
+    background-color: var(--subtle-bg);
+    border-color: var(--subtle-border-color);
+    filter: grayscale(50%);
+  }
+
+  &:active {
+    color: var(--subtle-fg);
+    background-color: var(--subtle-bg);
+    border-color: var(--subtle-border-color);
+    filter: grayscale(50%);
+  }
+
+  &:focus-visible {
+    color: var(--subtle-fg);
+    background-color: var(--subtle-bg);
+    border-color: var(--subtle-border-color);
+    filter: grayscale(50%);
+  }
+}