Initial commit: Re-connected to Gitea
This commit is contained in:
45
packages/ui/src/styles/utility/brand.css
Normal file
45
packages/ui/src/styles/utility/brand.css
Normal file
@@ -0,0 +1,45 @@
|
||||
@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);
|
||||
}
|
||||
18
packages/ui/src/styles/utility/gap.css
Normal file
18
packages/ui/src/styles/utility/gap.css
Normal file
@@ -0,0 +1,18 @@
|
||||
@utility gap-xs {
|
||||
gap: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
@utility gap-sm {
|
||||
gap: calc(var(--spacing) * 2);
|
||||
}
|
||||
@utility gap-md {
|
||||
gap: calc(var(--spacing) * 3);
|
||||
}
|
||||
@utility gap-lg {
|
||||
gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
@utility gap-xl {
|
||||
gap: calc(var(--spacing) * 5);
|
||||
}
|
||||
@utility gap-2xl {
|
||||
gap: calc(var(--spacing) * 6);
|
||||
}
|
||||
36
packages/ui/src/styles/utility/height.css
Normal file
36
packages/ui/src/styles/utility/height.css
Normal file
@@ -0,0 +1,36 @@
|
||||
@utility h-xs {
|
||||
height: calc(var(--spacing) * 5);
|
||||
}
|
||||
@utility h-sm {
|
||||
height: calc(var(--spacing) * 6);
|
||||
}
|
||||
@utility h-md {
|
||||
height: calc(var(--spacing) * 8);
|
||||
}
|
||||
@utility h-lg {
|
||||
height: calc(var(--spacing) * 9);
|
||||
}
|
||||
@utility h-xl {
|
||||
height: calc(var(--spacing) * 11);
|
||||
}
|
||||
@utility h-2xl {
|
||||
height: calc(var(--spacing) * 16);
|
||||
}
|
||||
@utility h-inline-xs {
|
||||
height: var(--text-xs--line-height);
|
||||
}
|
||||
@utility h-inline-sm {
|
||||
height: var(--text-sm--line-height);
|
||||
}
|
||||
@utility h-inline-md {
|
||||
height: var(--text-base--line-height);
|
||||
}
|
||||
@utility h-inline-lg {
|
||||
height: var(--text-lg--line-height);
|
||||
}
|
||||
@utility h-inline-xl {
|
||||
height: var(--text-xl--line-height);
|
||||
}
|
||||
@utility h-inline-2xl {
|
||||
height: var(--text-2xl--line-height);
|
||||
}
|
||||
16
packages/ui/src/styles/utility/loading.css
Normal file
16
packages/ui/src/styles/utility/loading.css
Normal file
@@ -0,0 +1,16 @@
|
||||
@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/src/styles/utility/margin.css
Normal file
21
packages/ui/src/styles/utility/margin.css
Normal file
@@ -0,0 +1,21 @@
|
||||
@utility mr-none {
|
||||
margin-right: 0;
|
||||
}
|
||||
@utility mr-xs {
|
||||
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);
|
||||
}
|
||||
36
packages/ui/src/styles/utility/padding.css
Normal file
36
packages/ui/src/styles/utility/padding.css
Normal file
@@ -0,0 +1,36 @@
|
||||
@utility px-xs {
|
||||
padding-inline: calc(var(--spacing) * 2);
|
||||
}
|
||||
@utility px-sm {
|
||||
padding-inline: calc(var(--spacing) * 3);
|
||||
}
|
||||
@utility px-md {
|
||||
padding-inline: calc(var(--spacing) * 4);
|
||||
}
|
||||
@utility px-lg {
|
||||
padding-inline: calc(var(--spacing) * 5);
|
||||
}
|
||||
@utility px-xl {
|
||||
padding-inline: calc(var(--spacing) * 6);
|
||||
}
|
||||
@utility px-2xl {
|
||||
padding-inline: calc(var(--spacing) * 8);
|
||||
}
|
||||
@utility py-xs {
|
||||
padding-block: calc(var(--spacing) * 1);
|
||||
}
|
||||
@utility py-sm {
|
||||
padding-block: calc(var(--spacing) * 2);
|
||||
}
|
||||
@utility py-md {
|
||||
padding-block: calc(var(--spacing) * 3);
|
||||
}
|
||||
@utility py-lg {
|
||||
padding-block: calc(var(--spacing) * 4);
|
||||
}
|
||||
@utility py-xl {
|
||||
padding-block: calc(var(--spacing) * 5);
|
||||
}
|
||||
@utility py-2xl {
|
||||
padding-block: calc(var(--spacing) * 6);
|
||||
}
|
||||
13
packages/ui/src/styles/utility/skin.css
Normal file
13
packages/ui/src/styles/utility/skin.css
Normal file
@@ -0,0 +1,13 @@
|
||||
@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);
|
||||
}
|
||||
137
packages/ui/src/styles/utility/variant.css
Normal file
137
packages/ui/src/styles/utility/variant.css
Normal file
@@ -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%);
|
||||
}
|
||||
}
|
||||
36
packages/ui/src/styles/utility/width.css
Normal file
36
packages/ui/src/styles/utility/width.css
Normal file
@@ -0,0 +1,36 @@
|
||||
@utility w-xs {
|
||||
width: calc(var(--spacing) * 5);
|
||||
}
|
||||
@utility w-sm {
|
||||
width: calc(var(--spacing) * 6);
|
||||
}
|
||||
@utility w-md {
|
||||
width: calc(var(--spacing) * 8);
|
||||
}
|
||||
@utility w-lg {
|
||||
width: calc(var(--spacing) * 9);
|
||||
}
|
||||
@utility w-xl {
|
||||
width: calc(var(--spacing) * 11);
|
||||
}
|
||||
@utility w-2xl {
|
||||
width: calc(var(--spacing) * 16);
|
||||
}
|
||||
@utility w-inline-xs {
|
||||
width: var(--text-xs--line-height);
|
||||
}
|
||||
@utility w-inline-sm {
|
||||
width: var(--text-sm--line-height);
|
||||
}
|
||||
@utility w-inline-md {
|
||||
width: var(--text-base--line-height);
|
||||
}
|
||||
@utility w-inline-lg {
|
||||
width: var(--text-lg--line-height);
|
||||
}
|
||||
@utility w-inline-xl {
|
||||
width: var(--text-xl--line-height);
|
||||
}
|
||||
@utility w-inline-2xl {
|
||||
width: var(--text-2xl--line-height);
|
||||
}
|
||||
Reference in New Issue
Block a user