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

30
packages/ui/src/styles/recipe/IinlineSize.recipe.ts
View File

@@ -1,7 +1,7 @@
import { tv } from "tailwind-variants";
export const inlineSizeRecipe = tv({
base: "relative overflow-hidden flex flex-nowrap",
base: "relative overflow-hidden flex flex-nowrap justify-center items-center box-border",
variants: {
size: {
xs: "text-xs h-inline-xs",
@@ -16,18 +16,6 @@ export const inlineSizeRecipe = tv({
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: "",
@@ -99,21 +87,5 @@ export const inlineSizeRecipe = tv({
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",
},
],
});

62
packages/ui/src/styles/recipe/ItemSize.recipe.ts
View File

@@ -1,34 +1,24 @@
import { tv } from "tailwind-variants";
export const itemSizeRecipe = tv({
base: "relative select-none overflow-hidden flex flex-nowrap justify-center items-center",
base: "relative select-none flex flex-nowrap justify-center items-center",
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",
xs: "text-xs h-item-xs px-xs gap-xs",
sm: "text-sm h-item-sm px-sm gap-sm",
md: "text-md h-item-md px-md gap-md",
lg: "text-lg h-item-lg px-lg gap-lg",
xl: "text-xl h-item-xl px-xl gap-xl",
"2xl": "text-2xl h-item-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",
default: "brand-default",
},
iconOnly: {
true: "",
false: "",
},
hasShadow: {
true: "shadow-xl",
true: "px-none",
false: "",
},
disabled: {
@@ -37,66 +27,62 @@ export const itemSizeRecipe = tv({
},
},
compoundVariants: [
{
shape: "rounded",
size: "xs",
class: "rounded-xs",
},
{ shape: "rounded", size: "xs", class: "rounded-sm" },
{
shape: "rounded",
size: "sm",
class: "rounded-sm",
},
{
shape: "rounded",
size: "md",
class: "rounded-md",
},
{
shape: "rounded",
size: "lg",
size: "md",
class: "rounded-lg",
},
{
shape: "rounded",
size: "xl",
size: "lg",
class: "rounded-xl",
},
{
shape: "rounded",
size: "2xl",
size: "xl",
class: "rounded-2xl",
},
{
shape: "rounded",
size: "2xl",
class: "rounded-3xl",
},
// --------------------------------------------------
{
iconOnly: true,
size: "xs",
class: "w-xs",
class: "w-item-xs",
},
{
iconOnly: true,
size: "sm",
class: "w-sm",
class: "w-item-sm",
},
{
iconOnly: true,
size: "md",
class: "w-md",
class: "w-item-md",
},
{
iconOnly: true,
size: "lg",
class: "w-lg",
class: "w-item-lg",
},
{
iconOnly: true,
size: "xl",
class: "w-xl",
class: "w-item-xl",
},
{
iconOnly: true,
size: "2xl",
class: "w-2xl",
class: "w-item-2xl",
},
],
});

13
packages/ui/src/styles/recipe/brand.recipe.ts Normal file
View File

@@ -0,0 +1,13 @@
import { tv } from "tailwind-variants";
export const brandRecipe = tv({
variants: {
brand: {
success: "brand-success",
danger: "brand-danger",
info: "brand-info",
warning: "brand-warning",
default: "brand-default",
},
},
});

6
packages/ui/src/styles/recipe/variant.recipe.ts
View File

@@ -6,6 +6,7 @@ export const variantRecipe = tv({
filled: "variant-filled",
outline: "variant-outline",
subtle: "variant-subtle",
ghost: "variant-ghost",
},
disabled: {
true: "",
@@ -28,5 +29,10 @@ export const variantRecipe = tv({
variant: "subtle",
class: "variant-subtle-disabled",
},
{
disabled: true,
variant: "ghost",
class: "variant-ghost-disabled",
},
],
});

50
packages/ui/src/styles/theme/global.css
View File

@@ -1,32 +1,44 @@
@theme {
--text-md: 1rem;
--text-md--line-height: calc(1.5 / 1);
--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);
--danger-bg-hover: var(--color-red-500);
--danger-bg-active: var(--color-red-400);
--danger-bg-low: var(--color-red-100);
--danger-bg-low-hover: var(--color-red-200);
--danger-bg-low-active: var(--color-red-300);
--success-bg: var(--color-emerald-600);
--success-bg-high-hover: var(--color-emerald-500);
--success-bg-high-active: var(--color-emerald-400);
--success-bg-hover: var(--color-emerald-500);
--success-bg-active: var(--color-emerald-400);
--success-bg-low: var(--color-emerald-100);
--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);
--info-bg-hover: var(--color-sky-500);
--info-bg-active: var(--color-sky-400);
--info-bg-low: var(--color-sky-100);
--info-bg-low-hover: var(--color-sky-200);
--info-bg-low-active: var(--color-sky-300);
--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);
--warning-bg-hover: var(--color-yellow-500);
--warning-bg-active: var(--color-yellow-400);
--warning-bg-low: var(--color-yellow-100);
--warning-bg-low-hover: var(--color-yellow-200);
--warning-bg-low-active: var(--color-yellow-300);
--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);
--default-bg: var(--color-neutral-700);
--default-bg-hover: var(--color-neutral-600);
--default-bg-active: var(--color-neutral-500);
--default-bg-low: var(--color-neutral-100);
--default-bg-low-hover: var(--color-neutral-200);
--default-bg-low-active: var(--color-neutral-300);
--disabled-fg: var(--color-gray-500);
--disabled-bg: var(--color-gray-200);
--disabled-border-color: var(--color-gray-500);
}

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

@@ -1,35 +1,40 @@
@utility brand-info {
--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-hover: var(--info-bg-hover);
--brand-bg-active: var(--info-bg-active);
--brand-bg-low: var(--info-bg-low);
--brand-bg-low-hover: var(--info-bg-low-hover);
--brand-bg-low-active: var(--info-bg-low-active);
}
@utility brand-danger {
--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-hover: var(--danger-bg-hover);
--brand-bg-active: var(--danger-bg-active);
--brand-bg-low: var(--danger-bg-low);
--brand-bg-low-hover: var(--danger-bg-low-hover);
--brand-bg-low-active: var(--danger-bg-low-active);
}
@utility brand-success {
--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-hover: var(--success-bg-hover);
--brand-bg-active: var(--success-bg-active);
--brand-bg-low: var(--success-bg-low);
--brand-bg-low-hover: var(--success-bg-low-hover);
--brand-bg-low-active: var(--success-bg-low-active);
}
@utility brand-warning {
--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-hover: var(--warning-bg-hover);
--brand-bg-active: var(--warning-bg-active);
--brand-bg-low: var(--warning-bg-low);
--brand-bg-low-hover: var(--warning-bg-low-hover);
--brand-bg-low-active: var(--warning-bg-low-active);
}
@utility brand-default {
--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-hover: var(--default-bg-hover);
--brand-bg-active: var(--default-bg-active);
--brand-bg-low: var(--default-bg-low);
--brand-bg-low-hover: var(--default-bg-low-hover);
--brand-bg-low-active: var(--default-bg-low-active);
}

4
packages/ui/src/styles/utility/font.css Normal file
View File

@@ -0,0 +1,4 @@
@utility text-md {
font-size: var(--text-md); /* 1rem (16px) */
line-height: var(--text-md--line-height); /* calc(1.5 / 1) */
}

10
packages/ui/src/styles/utility/gap.css
View File

@@ -2,17 +2,17 @@
gap: calc(var(--spacing) * 0.5);
}
@utility gap-sm {
gap: calc(var(--spacing) * 2);
gap: calc(var(--spacing) * 1);
}
@utility gap-md {
gap: calc(var(--spacing) * 3);
gap: calc(var(--spacing) * 1.5);
}
@utility gap-lg {
gap: calc(var(--spacing) * 4);
gap: calc(var(--spacing) * 2);
}
@utility gap-xl {
gap: calc(var(--spacing) * 5);
gap: calc(var(--spacing) * 2.5);
}
@utility gap-2xl {
gap: calc(var(--spacing) * 6);
gap: calc(var(--spacing) * 3);
}

38
packages/ui/src/styles/utility/height.css
View File

@@ -1,36 +1,40 @@
@utility h-xs {
height: calc(var(--spacing) * 5);
@utility h-item-xs {
/* 24px minimum touch size for text line */
height: 24px;
}
@utility h-sm {
height: calc(var(--spacing) * 6);
@utility h-item-sm {
/* 30px save space for most used size */
height: 30px;
}
@utility h-md {
height: calc(var(--spacing) * 8);
@utility h-item-md {
/* 34px most used size */
height: 34px;
}
@utility h-lg {
height: calc(var(--spacing) * 9);
@utility h-item-lg {
/* 46px maximum touch size without waste */
height: 46px;
}
@utility h-xl {
height: calc(var(--spacing) * 11);
@utility h-item-xl {
height: calc(var(--spacing) * 16);
}
@utility h-2xl {
@utility h-item-2xl {
height: calc(var(--spacing) * 16);
}
@utility h-inline-xs {
height: var(--text-xs--line-height);
height: calc(var(--text-xs--line-height) * var(--text-xs));
}
@utility h-inline-sm {
height: var(--text-sm--line-height);
height: calc(var(--text-sm--line-height) * var(--text-sm));
}
@utility h-inline-md {
height: var(--text-base--line-height);
height: calc(var(--text-md--line-height) * var(--text-md));
}
@utility h-inline-lg {
height: var(--text-lg--line-height);
height: calc(var(--text-lg--line-height) * var(--text-lg));
}
@utility h-inline-xl {
height: var(--text-xl--line-height);
height: calc(var(--text-xl--line-height) * var(--text-xl));
}
@utility h-inline-2xl {
height: var(--text-2xl--line-height);
height: calc(var(--text-2xl--line-height) * var(--text-2xl));
}

2
packages/ui/src/styles/utility/margin.css
View File

@@ -1,7 +1,7 @@
@utility mr-none {
margin-right: 0;
}
@utility mr-xs {
@utility mr-sm {
margin-right: calc(var(--spacing) * 1);
}
@utility mr-sm {

28
packages/ui/src/styles/utility/padding.css
View File

@@ -1,36 +1,40 @@
@utility px-none {
padding-inline: 0px;
}
@utility px-xs {
padding-inline: calc(var(--spacing) * 2);
padding-inline: 6px;
}
@utility px-sm {
padding-inline: calc(var(--spacing) * 3);
padding-inline: 8px;
}
@utility px-md {
padding-inline: calc(var(--spacing) * 4);
padding-inline: 10px;
}
@utility px-lg {
padding-inline: calc(var(--spacing) * 5);
padding-inline: 12px;
}
@utility px-xl {
padding-inline: calc(var(--spacing) * 6);
padding-inline: var(--radius-xl);
}
@utility px-2xl {
padding-inline: calc(var(--spacing) * 8);
padding-inline: var(--radius-2xl);
}
@utility py-xs {
padding-block: calc(var(--spacing) * 1);
/* 2px correspond to rounded-xs */
padding-block: var(--radius-xs);
}
@utility py-sm {
padding-block: calc(var(--spacing) * 2);
padding-block: var(--radius-sm);
}
@utility py-md {
padding-block: calc(var(--spacing) * 3);
padding-block: var(--radius-md);
}
@utility py-lg {
padding-block: calc(var(--spacing) * 4);
padding-block: var(--radius-lg);
}
@utility py-xl {
padding-block: calc(var(--spacing) * 5);
padding-block: var(--radius-xl);
}
@utility py-2xl {
padding-block: calc(var(--spacing) * 6);
padding-block: var(--radius-2xl);
}

4
packages/ui/src/styles/utility/skin.css
View File

@@ -1,13 +1,9 @@
@utility light {
--base-fg: var(--color-gray-950);
--base-bg: var(--color-white);
--base-fg-subtext: var(--color-gray-500);
--base-bg-subtext: var(--color-gray-200);
}
@utility dark {
--base-fg: var(--color-gray-50);
--base-bg: var(--color-black);
--base-fg-subtext: var(--color-gray-400);
--base-bg-subtext: var(--color-gray-600);
}

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%);
}
}

39
packages/ui/src/styles/utility/width.css
View File

@@ -1,36 +1,41 @@
@utility w-xs {
width: calc(var(--spacing) * 5);
}
@utility w-sm {
@utility w-item-xs {
/* 24px minimum touch size for text line */
width: calc(var(--spacing) * 6);
}
@utility w-md {
width: calc(var(--spacing) * 8);
@utility w-item-sm {
/* 30px save space for most used size */
width: calc(var(--spacing) * 7.5);
}
@utility w-lg {
width: calc(var(--spacing) * 9);
@utility w-item-md {
/* 34px most used size */
width: calc(var(--spacing) * 8.5);
}
@utility w-xl {
width: calc(var(--spacing) * 11);
@utility w-item-lg {
/* 46px maximum touch size without waste */
width: calc(var(--spacing) * 11.5);
}
@utility w-2xl {
@utility w-item-xl {
width: calc(var(--spacing) * 16);
}
@utility w-item-2xl {
width: calc(var(--spacing) * 16);
}
/* ---------------------------------------------------- */
@utility w-inline-xs {
width: var(--text-xs--line-height);
width: calc(var(--text-xs--line-height) * var(--text-xs));
}
@utility w-inline-sm {
width: var(--text-sm--line-height);
width: calc(var(--text-sm--line-height) * var(--text-sm));
}
@utility w-inline-md {
width: var(--text-base--line-height);
width: calc(var(--text-md--line-height) * var(--text-md));
}
@utility w-inline-lg {
width: var(--text-lg--line-height);
width: calc(var(--text-lg--line-height) * var(--text-lg));
}
@utility w-inline-xl {
width: var(--text-xl--line-height);
width: calc(var(--text-xl--line-height) * var(--text-xl));
}
@utility w-inline-2xl {
width: var(--text-2xl--line-height);
width: calc(var(--text-2xl--line-height) * var(--text-2xl));
}