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-03-24 18:22:47 +08:00
parent ef6fe2e16c
commit 3a7b48e483
19 changed files with 163 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/ui/src/styles/recipe/IinlineRoot.recipe.ts → packages/ui/src/styles/recipe/IinlineSize.recipe.ts
View File

@@ -1,6 +1,6 @@
import { tv } from "tailwind-variants";
export const inlineRootRecipe = tv({
export const inlineSizeRecipe = tv({
base: "relative overflow-hidden flex flex-nowrap",
variants: {
size: {

6
packages/ui/src/styles/recipe/ItemRoot.recipe.ts → packages/ui/src/styles/recipe/ItemSize.recipe.ts
View File

@@ -1,7 +1,7 @@
import { tv } from "tailwind-variants";
export const itemRootRecipe = tv({
base: "relative select-none overflow-hidden flex flex-nowrap",
export const itemSizeRecipe = tv({
base: "relative select-none overflow-hidden flex flex-nowrap justify-center items-center",
variants: {
size: {
xs: "text-xs h-xs px-xs gap-xs",
@@ -21,7 +21,7 @@ export const itemRootRecipe = tv({
danger: "brand-danger",
info: "brand-info",
warning: "brand-warning",
emphasis: "brand-emphasis",
default: "brand-default",
},
iconOnly: {
true: "",

32
packages/ui/src/styles/theme/global.css Normal file
View File

@@ -0,0 +1,32 @@
@theme {
--color-transparent: transparent;
--danger-bg: var(--color-red-600);
--danger-bg-high-hover: var(--color-red-500);
--danger-bg-high-active: var(--color-red-400);
--danger-bg-low-hover: var(--color-red-100);
--danger-bg-low-active: var(--color-red-200);
--success-bg: var(--color-emerald-600);
--success-bg-high-hover: var(--color-emerald-500);
--success-bg-high-active: var(--color-emerald-400);
--success-bg-low-hover: var(--color-emerald-100);
--success-bg-low-active: var(--color-emerald-200);
--info-bg: var(--color-sky-600);
--info-bg-high-hover: var(--color-sky-500);
--info-bg-high-active: var(--color-sky-400);
--info-bg-low-hover: var(--color-sky-100);
--info-bg-low-active: var(--color-sky-200);
--warning-bg: var(--color-yellow-600);
--warning-bg-high-hover: var(--color-yellow-500);
--warning-bg-high-active: var(--color-yellow-400);
--warning-bg-low-hover: var(--color-yellow-100);
--warning-bg-low-active: var(--color-yellow-200);
--default-bg: var(--color-neutral-800);
--default-bg-high-hover: var(--color-neutral-700);
--default-bg-high-active: var(--color-neutral-600);
--default-bg-low-hover: var(--color-neutral-100);
--default-bg-low-active: var(--color-neutral-200);
}

33
packages/ui/src/styles/theme/theme-base.css
View File

@@ -1,33 +0,0 @@
@theme {
--color-transparent: transparent;
--danger-fg: var(--base-fg);
--danger-bg-low-hover: var(--color-red-100);
--danger-bg-low-active: var(--color-red-200);
--danger-bg: var(--color-red-600);
--danger-bg-high-hover: var(--color-red-700);
--danger-bg-high-active: var(--color-red-800);
--success-fg: var(--base-fg);
--success-bg-low-hover: var(--color-green-100);
--success-bg-low-active: var(--color-green-200);
--success-bg: var(--color-green-600);
--success-bg-high-hover: var(--color-green-700);
--success-bg-high-active: var(--color-green-800);
--info-fg: var(--base-fg);
--info-bg-low-hover: var(--color-sky-100);
--info-bg-low-active: var(--color-sky-200);
--info-bg: var(--color-sky-600);
--info-bg-high-hover: var(--color-sky-700);
--info-bg-high-active: var(--color-sky-800);
--warning-fg: var(--base-fg);
--warning-bg-low-hover: var(--color-amber-100);
--warning-bg-low-active: var(--color-amber-200);
--warning-bg: var(--color-amber-600);
--warning-bg-high-hover: var(--color-amber-700);
--warning-bg-high-active: var(--color-amber-800);
--default-fg: var(--base-fg);
--default-bg-low-hover: var(--color-gray-100);
--default-bg-low-active: var(--color-gray-200);
--default-bg: var(--color-gray-600);
--default-bgr-high-hover: var(--color-gray-700);
--default-bg-high-active: var(--color-gray-800);
}

25
packages/ui/src/styles/theme/theme-variant.css
View File

@@ -1,25 +0,0 @@
@theme {
--filled-fg: var(--color-white);
--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-border-color: var(--color-transparent);
--outline-fg: var(--base-fg);
--outline-fg-hover: var(--brand-bg);
--outline-fg-active: var(--brand-bg);
--outline-bg: var(--color-transparent);
--outline-bg-hover: var(--brand-bg-low-hover);
--outline-bg-active: var(--brand-bg-low-active);
--outline-border-color: var(--brand-bg);
--subtle-fg: var(--base-fg);
--subtle-fg-hover: var(--brand-bg);
--subtle-fg-active: var(--brand-bg);
--subtle-bg: var(--color-transparent);
--subtle-bg-hover: var(--brand-bg-low-hover);
--subtle-bg-active: var(--brand-bg-low-active);
--subtle-border-color: var(--color-transparent);
}

20
packages/ui/src/styles/utility/brand.css
View File

@@ -1,35 +1,35 @@
@utility brand-info {
--brand-bg-low-hover: var(--info-bg-low-hover);
--brand-bg-low-active: var(--info-bg-low-active);
--brand-bg: var(--info-bg);
--brand-bg-high-hover: var(--info-bg-high-hover);
--brand-bg-high-active: var(--info-bg-high-active);
--brand-bg-low-hover: var(--info-bg-low-hover);
--brand-bg-low-active: var(--info-bg-low-active);
}
@utility brand-danger {
--brand-bg-low-hover: var(--danger-bg-low-hover);
--brand-bg-low-active: var(--danger-bg-low-active);
--brand-bg: var(--danger-bg);
--brand-bg-high-hover: var(--danger-bg-high-hover);
--brand-bg-high-active: var(--danger-bg-high-active);
--brand-bg-low-hover: var(--danger-bg-low-hover);
--brand-bg-low-active: var(--danger-bg-low-active);
}
@utility brand-success {
--brand-bg-low-hover: var(--success-bg-low-hover);
--brand-bg-low-active: var(--success-bg-low-active);
--brand-bg: var(--success-bg);
--brand-bg-high-hover: var(--success-bg-high-hover);
--brand-bg-high-active: var(--success-bg-high-active);
--brand-bg-low-hover: var(--success-bg-low-hover);
--brand-bg-low-active: var(--success-bg-low-active);
}
@utility brand-warning {
--brand-bg-low-hover: var(--warning-bg-low-hover);
--brand-bg-low-active: var(--warning-bg-low-active);
--brand-bg: var(--warning-bg);
--brand-bg-high-hover: var(--warning-bg-high-hover);
--brand-bg-high-active: var(--warning-bg-high-active);
--brand-bg-low-hover: var(--warning-bg-low-hover);
--brand-bg-low-active: var(--warning-bg-low-active);
}
@utility brand-default {
--brand-bg-low-hover: var(--default-bg-low-hover);
--brand-bg-low-active: var(--default-bg-low-active);
--brand-bg: var(--default-bg);
--brand-bg-high-hover: var(--default-bg-high-hover);
--brand-bg-high-active: var(--default-bg-high-active);
--brand-bg-low-hover: var(--default-bg-low-hover);
--brand-bg-low-active: var(--default-bg-low-active);
}

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

@@ -1,27 +1,44 @@
@utility variant-filled {
--filled-fg: var(--color-white);
--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-border-color: var(--color-transparent);
color: var(--filled-fg);
background-color: var(--filled-bg);
border-color: var(--filled-border-color);
&:hover {
background-color: var(--filled-bg-hover);
color: var(--filid-fg-hover);
color: var(--filled-fg-hover);
}
&:active {
background-color: var(--filled-bg-active);
color: var(--filid-fg-active);
color: var(--filled-fg-active);
}
&:focus-visible {
background-color: var(--filled-bg-hover);
color: var(--filid-fg-hover);
color: var(--filled-fg-hover);
}
}
@utility variant-outline {
--outline-fg: var(--brand-bg);
--outline-fg-hover: var(--brand-bg);
--outline-fg-active: var(--brand-bg);
--outline-bg: var(--color-transparent);
--outline-bg-hover: var(--brand-bg-low-hover);
--outline-bg-active: var(--brand-bg-low-active);
--outline-border-color: var(--brand-bg);
color: var(--outline-fg);
background-color: var(--outline-bg);
border: solid 1px;
border-color: var(--outline-border-color);
&:hover {
@@ -41,6 +58,14 @@
}
@utility variant-subtle {
--subtle-fg: var(--brand-bg);
--subtle-fg-hover: var(--brand-bg);
--subtle-fg-active: var(--brand-bg);
--subtle-bg: var(--color-transparent);
--subtle-bg-hover: var(--brand-bg-low-hover);
--subtle-bg-active: var(--brand-bg-low-active);
--subtle-border-color: var(--color-transparent);
color: var(--subtle-fg);
background-color: var(--subtle-bg);
border-color: var(--subtle-border-color);