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-22 17:03:54 +08:00
parent 8e76dd7a7b
commit 5c6d8c6b92
49 changed files with 203 additions and 1442 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
packages/ui/src/styles/recipe/IinlineRoot.recipe.ts Normal file
View File

@@ -0,0 +1,119 @@
import { tv } from "tailwind-variants";
export const inlineRootRecipe = tv({
base: "relative overflow-hidden flex flex-nowrap",
variants: {
size: {
xs: "text-xs h-inline-xs",
sm: "text-sm h-inline-sm",
md: "text-md h-inline-md",
lg: "text-lg h-inline-lg",
xl: "text-xl h-inline-xl",
"2xl": "text-2xl h-inline-2xl",
},
shape: {
square: "rounded-none",
rounded: "",
circle: "rounded-full",
},
variant: {
filled: "variant-filled",
outline: "variant-outline",
subtle: "variant-subtle",
},
brand: {
success: "brand-success",
danger: "brand-danger",
info: "brand-info",
warning: "brand-warning",
emphasis: "brand-emphasis",
},
iconOnly: {
true: "",
false: "",
},
disabled: {
true: "",
false: "",
},
},
compoundVariants: [
{
shape: "rounded",
size: "xs",
class: "rounded-xs",
},
{
shape: "rounded",
size: "sm",
class: "rounded-sm",
},
{
shape: "rounded",
size: "md",
class: "rounded-md",
},
{
shape: "rounded",
size: "lg",
class: "rounded-lg",
},
{
shape: "rounded",
size: "xl",
class: "rounded-xl",
},
{
shape: "rounded",
size: "2xl",
class: "rounded-2xl",
},
// --------------------------------------------------
{
iconOnly: true,
size: "xs",
class: "w-inline-xs",
},
{
iconOnly: true,
size: "sm",
class: "w-inline-sm",
},
{
iconOnly: true,
size: "md",
class: "w-inline-md",
},
{
iconOnly: true,
size: "lg",
class: "w-inline-lg",
},
{
iconOnly: true,
size: "xl",
class: "w-inline-xl",
},
{
iconOnly: true,
size: "2xl",
class: "w-inline-2xl",
},
// --------------------------------------------------
{
disabled: true,
variant: "filled",
class: "variant-filled-disabled",
},
{
disabled: true,
variant: "outline",
class: "variant-outline-disabled",
},
{
disabled: true,
variant: "subtle",
class: "variant-subtle-disabled",
},
],
});

102
packages/ui/src/styles/recipe/ItemRoot.recipe.ts Normal file
View File

@@ -0,0 +1,102 @@
import { tv } from "tailwind-variants";
export const itemRootRecipe = tv({
base: "relative select-none overflow-hidden flex flex-nowrap",
variants: {
size: {
xs: "text-xs h-xs px-xs gap-xs",
sm: "text-sm h-sm px-sm gap-sm",
md: "text-md h-md px-md gap-md",
lg: "text-lg h-lg px-lg gap-lg",
xl: "text-xl h-xl px-xl gap-xl",
"2xl": "text-2xl h-2xl px-2xl gap-2xl",
},
shape: {
square: "rounded-none",
rounded: "",
circle: "rounded-full",
},
brand: {
success: "brand-success",
danger: "brand-danger",
info: "brand-info",
warning: "brand-warning",
emphasis: "brand-emphasis",
},
iconOnly: {
true: "",
false: "",
},
hasShadow: {
true: "shadow-xl",
false: "",
},
disabled: {
true: "",
false: "",
},
},
compoundVariants: [
{
shape: "rounded",
size: "xs",
class: "rounded-xs",
},
{
shape: "rounded",
size: "sm",
class: "rounded-sm",
},
{
shape: "rounded",
size: "md",
class: "rounded-md",
},
{
shape: "rounded",
size: "lg",
class: "rounded-lg",
},
{
shape: "rounded",
size: "xl",
class: "rounded-xl",
},
{
shape: "rounded",
size: "2xl",
class: "rounded-2xl",
},
// --------------------------------------------------
{
iconOnly: true,
size: "xs",
class: "w-xs",
},
{
iconOnly: true,
size: "sm",
class: "w-sm",
},
{
iconOnly: true,
size: "md",
class: "w-md",
},
{
iconOnly: true,
size: "lg",
class: "w-lg",
},
{
iconOnly: true,
size: "xl",
class: "w-xl",
},
{
iconOnly: true,
size: "2xl",
class: "w-2xl",
},
],
});

32
packages/ui/src/styles/recipe/variant.recipe.ts Normal file
View File

@@ -0,0 +1,32 @@
import { tv } from "tailwind-variants";
export const variantRecipe = tv({
variants: {
variant: {
filled: "variant-filled",
outline: "variant-outline",
subtle: "variant-subtle",
},
disabled: {
true: "",
false: "",
},
},
compoundVariants: [
{
disabled: true,
variant: "filled",
class: "variant-filled-disabled",
},
{
disabled: true,
variant: "outline",
class: "variant-outline-disabled",
},
{
disabled: true,
variant: "subtle",
class: "variant-subtle-disabled",
},
],
});

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

@@ -1,11 +1,11 @@
@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);
--danger-border-color: var(--color-transparent);
--success-fg: var(--base-fg);
--success-bg-low-hover: var(--color-green-100);
--success-bg-low-active: var(--color-green-200);
@@ -18,19 +18,16 @@
--info-bg: var(--color-sky-600);
--info-bg-high-hover: var(--color-sky-700);
--info-bg-high-active: var(--color-sky-800);
--info-border-color: var(--color-transparent);
--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);
--warning-border-color: var(--color-transparent);
--emphasis-fg: var(--base-fg);
--emphasis-bg-low-hover: var(--color-gray-100);
--emphasis-bg-low-active: var(--color-gray-200);
--emphasis-bg: var(--color-gray-600);
--emphasis-bgr-high-hover: var(--color-gray-700);
--emphasis-bg-high-active: var(--color-gray-800);
--emphasis-border-color: var(--color-transparent);
--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);
}

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

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

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

@@ -1,45 +1,35 @@
@utility brand-info {
--brand-fg: var(--info-fg);
--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-border-color: var(--info-border-color);
}
@utility brand-danger {
--brand-fg: var(--danger-fg);
--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-border-color: var(--danger-border-color);
}
@utility brand-success {
--brand-fg: var(--success-fg);
--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-border-color: var(--success-border-color);
}
@utility brand-warning {
--brand-fg: var(--warning-fg);
--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-border-color: var(--warning-border-color);
}
@utility brand-emphasis {
--brand-fg: var(--emphasis-fg);
--brand-bg-low-hover: var(--emphasis-bg-low-hover);
--brand-bg-low-active: var(--emphasis-bg-low-active);
--brand-bg: var(--emphasis-bg);
--brand-bg-high-hover: var(--emphasis-bg-high-hover);
--brand-bg-high-active: var(--emphasis-bg-high-active);
--brand-border-color: var(--emphasis-border-color);
@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);
}

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

@@ -5,14 +5,17 @@
&:hover {
background-color: var(--filled-bg-hover);
color: var(--filid-fg-hover);
}
&:active {
background-color: var(--filled-bg-active);
color: var(--filid-fg-active);
}
&:focus-visible {
background-color: var(--filled-bg-hover);
color: var(--filid-fg-hover);
}
}
@@ -23,14 +26,17 @@
&:hover {
background-color: var(--outline-bg-hover);
color: var(--outline-fg-hover);
}
&:active {
background-color: var(--outline-bg-active);
color: var(--outline-fg-active);
}
&:focus-visible {
background-color: var(--outline-bg-hover);
color: var(--outline-fg-hover);
}
}
@@ -41,14 +47,17 @@
&:hover {
background-color: var(--subtle-bg-hover);
color: var(--subtle-fg-hover);
}
&:active {
background-color: var(--subtle-bg-active);
color: var(--subtle-fg-active);
}
&:focus-visible {
background-color: var(--subtle-bg-hover);
color: var(--subtle-fg-hover);
}
}