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-05-07 02:15:20 +08:00
parent da0a6d0f81
commit ccc46844b6
141 changed files with 2358 additions and 1661 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/ui-web/src/styles/utility/brand.css
View File

@@ -1,40 +0,0 @@
@utility brand-info {
--brand-bg: var(--info-bg);
--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-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-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-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-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-web/src/styles/utility/font.css
View File

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

18
packages/ui-web/src/styles/utility/gap.css
View File

@@ -1,18 +0,0 @@
@utility gap-xs {
gap: calc(var(--spacing) * 0.5);
}
@utility gap-sm {
gap: calc(var(--spacing) * 1);
}
@utility gap-md {
gap: calc(var(--spacing) * 1.5);
}
@utility gap-lg {
gap: calc(var(--spacing) * 2);
}
@utility gap-xl {
gap: calc(var(--spacing) * 2.5);
}
@utility gap-2xl {
gap: calc(var(--spacing) * 3);
}

40
packages/ui-web/src/styles/utility/height.css
View File

@@ -1,40 +0,0 @@
@utility h-item-xs {
/* 24px minimum touch size for text line */
height: 24px;
}
@utility h-item-sm {
/* 28px save space for most used size */
height: 28px;
}
@utility h-item-md {
/* 34px most used size */
height: 34px;
}
@utility h-item-lg {
/* 44px maximum touch size without waste */
height: 44px;
}
@utility h-item-xl {
height: calc(var(--spacing) * 16);
}
@utility h-item-2xl {
height: calc(var(--spacing) * 16);
}
@utility h-inline-xs {
height: calc(var(--text-xs--line-height) * var(--text-xs));
}
@utility h-inline-sm {
height: calc(var(--text-sm--line-height) * var(--text-sm));
}
@utility h-inline-md {
height: calc(var(--text-md--line-height) * var(--text-md));
}
@utility h-inline-lg {
height: calc(var(--text-lg--line-height) * var(--text-lg));
}
@utility h-inline-xl {
height: calc(var(--text-xl--line-height) * var(--text-xl));
}
@utility h-inline-2xl {
height: calc(var(--text-2xl--line-height) * var(--text-2xl));
}

16
packages/ui-web/src/styles/utility/loading.css
View File

@@ -1,16 +0,0 @@
@utility loading-true {
position: "absolute";
top: "50%";
left: "50%";
transform: "translate(-50%, -50%)";
opacity: 1;
transition: "top 0.15s ease-in, opacity 0.1s ease-in";
}
@utility loading-false {
position: "absolute";
top: "-50%";
left: "50%";
transform: "translate(-50%, -50%)";
opacity: 0;
transition: "top 0.15s ease-out, opacity 0.1s ease-out";
}

21
packages/ui-web/src/styles/utility/margin.css
View File

@@ -1,21 +0,0 @@
@utility mr-none {
margin-right: 0;
}
@utility mr-sm {
margin-right: calc(var(--spacing) * 1);
}
@utility mr-sm {
margin-right: calc(var(--spacing) * 2);
}
@utility mr-md {
margin-right: calc(var(--spacing) * 3);
}
@utility mr-lg {
margin-right: calc(var(--spacing) * 4);
}
@utility mr-xl {
margin-right: calc(var(--spacing) * 2);
}
@utility mr-2xl {
margin-right: calc(var(--spacing) * 2);
}

40
packages/ui-web/src/styles/utility/padding.css
View File

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

9
packages/ui-web/src/styles/utility/skin.css
View File

@@ -1,9 +0,0 @@
@utility light {
--base-fg: var(--color-gray-950);
--base-bg: var(--color-white);
}
@utility dark {
--base-fg: var(--color-gray-50);
--base-bg: var(--color-black);
}

200
packages/ui-web/src/styles/utility/variant.css
View File

@@ -1,200 +0,0 @@
@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-hover);
--filled-bg-active: var(--brand-bg-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(--filled-fg-hover);
}
&:active {
background-color: var(--filled-bg-active);
color: var(--filled-fg-active);
}
&:focus-visible {
background-color: var(--filled-bg-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 {
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);
}
}
@utility variant-subtle {
--subtle-fg: var(--brand-bg);
--subtle-fg-hover: var(--brand-bg);
--subtle-fg-active: var(--brand-bg);
--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);
color: var(--subtle-fg);
background-color: var(--subtle-bg);
border-color: var(--subtle-border-color);
&: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);
}
}
@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 {
background-color: var(--ghost-bg-hover);
color: var(--ghost-fg-hover);
}
&:active {
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(100%);
}
}
@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-ghost-disabled {
color: var(--ghost-fg);
background-color: var(--ghost-bg);
border-color: var(--ghost-border-color);
filter: grayscale(50%);
&:hover {
color: var(--ghost-fg);
background-color: var(--ghost-bg);
border-color: var(--ghost-border-color);
filter: grayscale(50%);
}
&:active {
color: var(--ghost-fg);
background-color: var(--ghost-bg);
border-color: var(--ghost-border-color);
filter: grayscale(50%);
}
&:focus-visible {
color: var(--ghost-fg);
background-color: var(--ghost-bg);
border-color: var(--ghost-border-color);
filter: grayscale(50%);
}
}

41
packages/ui-web/src/styles/utility/width.css
View File

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