mirror of
https://github.com/sergi0g/cup.git
synced 2025-11-15 08:33:49 -05:00
Fixed CSS bugs, formatted code
This commit is contained in:
Sergio
3
web/.prettierrc
Normal file
3
web/.prettierrc
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"plugins": ["prettier-plugin-tailwindcss"]
|
||||
}
|
||||
BIN
web/bun.lockb
BIN
web/bun.lockb
Binary file not shown.
@@ -14,10 +14,10 @@
|
||||
<div
|
||||
class="flex justify-center items-center min-h-screen bg-{{ theme }}-50 dark:bg-{{ theme }}-950"
|
||||
>
|
||||
<div class="lg:px-8 sm:px-6 px-4 max-w-[80rem] mx-auto h-full w-full">
|
||||
<div class="max-w-[48rem] mx-auto h-full my-8">
|
||||
<div class="mx-auto h-full w-full max-w-[80rem] px-4 sm:px-6 lg:px-8">
|
||||
<div class="mx-auto my-8 h-full max-w-[48rem]">
|
||||
<div class="flex items-center gap-1">
|
||||
<h1 class="text-5xl lg:text-6xl font-bold dark:text-white">
|
||||
<h1 class="text-5xl font-bold lg:text-6xl dark:text-white">
|
||||
Cup
|
||||
</h1>
|
||||
<svg
|
||||
@@ -86,21 +86,23 @@
|
||||
class="shadow-sm bg-white dark:bg-{{ theme }}-900 rounded-md my-8"
|
||||
>
|
||||
<dl
|
||||
class="lg:grid-cols-4 grid-cols-2 gap-1 grid overflow-hidden *:relative"
|
||||
class="grid grid-cols-2 gap-1 overflow-hidden *:relative lg:grid-cols-4"
|
||||
>
|
||||
{% for metric in metrics %}
|
||||
<div class="before:bg-{{ theme }}-200 before:dark:bg-{{ theme }}-800 after:bg-{{ theme }}-200 after:dark:bg-{{ theme }}-800 gi">
|
||||
<div
|
||||
class="xl:px-8 px-6 py-4 gap-y-2 gap-x-4 justify-between align-baseline flex flex-col h-full"
|
||||
class="before:bg-{{ theme }}-200 before:dark:bg-{{ theme }}-800 after:bg-{{ theme }}-200 after:dark:bg-{{ theme }}-800 gi"
|
||||
>
|
||||
<div
|
||||
class="flex h-full flex-col justify-between gap-x-4 gap-y-2 px-6 py-4 align-baseline xl:px-8"
|
||||
>
|
||||
<dt
|
||||
class="text-{{ theme }}-500 dark:text-{{ theme }}-400 leading-6 font-medium"
|
||||
>
|
||||
{{ metric.name }}
|
||||
</dt>
|
||||
<div class="flex gap-1 justify-between items-center">
|
||||
<div class="flex items-center justify-between gap-1">
|
||||
<dd
|
||||
class="text-black dark:text-white tracking-tight leading-10 font-medium text-3xl w-full"
|
||||
class="w-full text-3xl font-medium leading-10 tracking-tight text-black dark:text-white"
|
||||
>
|
||||
{{ metric.value }}
|
||||
</dd>
|
||||
@@ -111,7 +113,7 @@
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="size-6 text-black dark:text-white shrink-0"
|
||||
class="size-6 shrink-0 text-black dark:text-white"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
@@ -125,7 +127,7 @@
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="size-6 text-green-500 shrink-0"
|
||||
class="size-6 shrink-0 text-green-500"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
@@ -139,7 +141,7 @@
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="size-6 text-blue-500 shrink-0"
|
||||
class="size-6 shrink-0 text-blue-500"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
@@ -224,7 +226,7 @@
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="text-green-500 ml-auto"
|
||||
class="ml-auto text-green-500"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
@@ -238,7 +240,7 @@
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="text-blue-500 ml-auto"
|
||||
class="ml-auto text-blue-500"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
|
||||
@@ -34,6 +34,7 @@
|
||||
"globals": "^15.9.0",
|
||||
"postcss": "^8.4.42",
|
||||
"prettier": "^3.3.3",
|
||||
"prettier-plugin-tailwindcss": "^0.6.8",
|
||||
"tailwindcss": "^3.4.10",
|
||||
"typescript": "^5.5.3",
|
||||
"typescript-eslint": "^8.0.1",
|
||||
|
||||
@@ -15,39 +15,39 @@ function App() {
|
||||
if (!data) return <Loading onLoad={setData} />;
|
||||
return (
|
||||
<div
|
||||
className={`flex justify-center min-h-screen bg-${theme}-50 dark:bg-${theme}-950`}
|
||||
className={`flex min-h-screen justify-center bg-${theme}-50 dark:bg-${theme}-950`}
|
||||
>
|
||||
<div className="lg:px-8 sm:px-6 px-4 max-w-[80rem] mx-auto h-full w-full">
|
||||
<div className="flex flex-col max-w-[48rem] mx-auto h-full my-8">
|
||||
<div className="mx-auto h-full w-full max-w-[80rem] px-4 sm:px-6 lg:px-8">
|
||||
<div className="mx-auto my-8 flex h-full max-w-[48rem] flex-col">
|
||||
<div className="flex items-center gap-1">
|
||||
<h1 className="text-5xl lg:text-6xl font-bold dark:text-white">
|
||||
<h1 className="text-5xl font-bold lg:text-6xl dark:text-white">
|
||||
Cup
|
||||
</h1>
|
||||
<Logo />
|
||||
</div>
|
||||
<div
|
||||
className={`shadow-sm bg-white dark:bg-${theme}-900 rounded-md my-8`}
|
||||
className={`bg-white shadow-sm dark:bg-${theme}-900 my-8 rounded-md`}
|
||||
>
|
||||
<dl className="lg:grid-cols-4 md:grid-cols-2 gap-1 grid-cols-1 grid overflow-hidden *:relative">
|
||||
<dl className="grid grid-cols-1 gap-1 overflow-hidden *:relative md:grid-cols-2 lg:grid-cols-4">
|
||||
{Object.entries(data.metrics).map(([name, value]) => (
|
||||
<Statistic name={name} value={value} key={name} />
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
<div
|
||||
className={`shadow-sm bg-white dark:bg-${theme}-900 rounded-md my-8`}
|
||||
className={`bg-white shadow-sm dark:bg-${theme}-900 my-8 rounded-md`}
|
||||
>
|
||||
<div
|
||||
className={`flex justify-between items-center px-6 py-4 text-${theme}-500`}
|
||||
className={`flex items-center justify-between px-6 py-4 text-${theme}-500`}
|
||||
>
|
||||
<LastChecked datetime={data.last_updated} />
|
||||
<RefreshButton />
|
||||
</div>
|
||||
<Search onChange={setSearchQuery} />
|
||||
<ul
|
||||
className={`dark:divide-${theme}-800 divide-y dark:text-white`}
|
||||
>
|
||||
{data.images.filter((image) => image.reference.includes(searchQuery)).map((image) => (
|
||||
<ul className={`dark:divide-${theme}-800 divide-y dark:text-white`}>
|
||||
{data.images
|
||||
.filter((image) => image.reference.includes(searchQuery))
|
||||
.map((image) => (
|
||||
<Image data={image} key={image.reference} />
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@@ -62,7 +62,7 @@ export default function Image({ data }: { data: Image }) {
|
||||
<>
|
||||
<button
|
||||
onClick={handleOpen}
|
||||
className={`*:py-4 *:px-6 *:flex *:items-center *:gap-3 w-full`}
|
||||
className={`w-full *:flex *:items-center *:gap-3 *:px-6 *:py-4`}
|
||||
>
|
||||
<li className="break-all">
|
||||
<IconCube className="size-6 shrink-0" />
|
||||
@@ -70,7 +70,7 @@ export default function Image({ data }: { data: Image }) {
|
||||
{data.result.has_update == false && (
|
||||
<WithTooltip
|
||||
text="Up to date"
|
||||
className="text-green-500 ml-auto size-6 shrink-0"
|
||||
className="ml-auto size-6 shrink-0 text-green-500"
|
||||
>
|
||||
<IconCircleCheckFilled />
|
||||
</WithTooltip>
|
||||
@@ -78,7 +78,7 @@ export default function Image({ data }: { data: Image }) {
|
||||
{data.result.has_update == true && (
|
||||
<WithTooltip
|
||||
text="Update available"
|
||||
className="text-blue-500 ml-auto size-6 shrink-0"
|
||||
className="ml-auto size-6 shrink-0 text-blue-500"
|
||||
>
|
||||
<IconCircleArrowUpFilled />
|
||||
</WithTooltip>
|
||||
@@ -86,7 +86,7 @@ export default function Image({ data }: { data: Image }) {
|
||||
{data.result.has_update == null && (
|
||||
<WithTooltip
|
||||
text="Unknown"
|
||||
className="text-gray-500 ml-auto size-6 shrink-0"
|
||||
className="ml-auto size-6 shrink-0 text-gray-500"
|
||||
>
|
||||
<IconHelpCircleFilled />
|
||||
</WithTooltip>
|
||||
@@ -102,12 +102,12 @@ export default function Image({ data }: { data: Image }) {
|
||||
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
||||
<DialogPanel
|
||||
transition
|
||||
className={`relative transform overflow-hidden rounded-lg bg-white dark:bg-${theme}-900 dark:text-white text-left shadow-xl transition-all data-[closed]:translate-y-4 data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in sm:my-8 sm:w-full sm:max-w-lg md:max-w-xl lg:max-w-2xl data-[closed]:sm:translate-y-0 data-[closed]:sm:scale-95`}
|
||||
className={`relative transform overflow-hidden rounded-lg bg-white dark:bg-${theme}-900 text-left shadow-xl transition-all data-[closed]:translate-y-4 data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in sm:my-8 sm:w-full sm:max-w-lg data-[closed]:sm:translate-y-0 data-[closed]:sm:scale-95 md:max-w-xl lg:max-w-2xl dark:text-white`}
|
||||
>
|
||||
<div
|
||||
className={`py-4 px-6 flex flex-col gap-3 text-${theme}-400 dark:text-${theme}-600`}
|
||||
className={`flex flex-col gap-3 px-6 py-4 text-${theme}-400 dark:text-${theme}-600`}
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="mb-4 flex items-center gap-3">
|
||||
<IconCube className="size-6 shrink-0 text-black dark:text-white" />
|
||||
<DialogTitle className="text-black dark:text-white">
|
||||
{url ? (
|
||||
@@ -116,7 +116,7 @@ export default function Image({ data }: { data: Image }) {
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-block after:bg-white after:h-[2px] after:bottom-[4px] after:left-0 after:scale-x-0 after:block after:relative after:w-full after:transition-transform after:duration-300 hover:after:scale-x-100"
|
||||
className="inline-block after:relative after:bottom-[1px] after:left-0 after:block after:h-[2px] after:w-full after:scale-x-0 after:bg-black after:dark:bg-white after:transition-transform after:duration-300 hover:after:scale-x-100"
|
||||
>
|
||||
{data.reference}
|
||||
</a>
|
||||
@@ -133,30 +133,30 @@ export default function Image({ data }: { data: Image }) {
|
||||
<div className="flex items-center gap-3">
|
||||
{data.result.has_update == false && (
|
||||
<>
|
||||
<IconCircleCheckFilled className="text-green-500 size-6 shrink-0" />
|
||||
<IconCircleCheckFilled className="size-6 shrink-0 text-green-500" />
|
||||
Up to date
|
||||
</>
|
||||
)}
|
||||
{data.result.has_update == true && (
|
||||
<>
|
||||
<IconCircleArrowUpFilled className="text-blue-500 size-6 shrink-0" />
|
||||
<IconCircleArrowUpFilled className="size-6 shrink-0 text-blue-500" />
|
||||
Update available
|
||||
</>
|
||||
)}
|
||||
{data.result.has_update == null && (
|
||||
<>
|
||||
<IconHelpCircleFilled className="text-gray-500 size-6 shrink-0" />
|
||||
<IconHelpCircleFilled className="size-6 shrink-0 text-gray-500" />
|
||||
Unknown
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<IconStopwatch className="text-gray-500 size-6 shrink-0" />
|
||||
<div className="mb-4 flex items-center gap-3">
|
||||
<IconStopwatch className="size-6 shrink-0 text-gray-500" />
|
||||
Checked in {data.time} ms
|
||||
</div>
|
||||
{data.result.error && (
|
||||
<div className="bg-yellow-400/10 flex items-center gap-3 overflow-hidden break-all rounded-md px-3 py-2 mb-4">
|
||||
<IconAlertTriangleFilled className="text-yellow-500 size-5 shrink-0" />
|
||||
<div className="mb-4 flex items-center gap-3 overflow-hidden break-all rounded-md bg-yellow-400/10 px-3 py-2">
|
||||
<IconAlertTriangleFilled className="size-5 shrink-0 text-yellow-500" />
|
||||
{data.result.error}
|
||||
</div>
|
||||
)}
|
||||
@@ -164,7 +164,7 @@ export default function Image({ data }: { data: Image }) {
|
||||
<div className="flex flex-col gap-1">
|
||||
Pull command
|
||||
<div
|
||||
className={`bg-${theme}-50 dark:bg-${theme}-950 text-gray-500 flex items-center rounded-md px-3 py-2 font-mono mb-4 group relative`}
|
||||
className={`bg-${theme}-100 dark:bg-${theme}-950 group relative mb-4 flex items-center rounded-md px-3 py-2 font-mono text-gray-500`}
|
||||
>
|
||||
<p className="overflow-scroll">
|
||||
docker pull {data.reference}
|
||||
@@ -174,9 +174,9 @@ export default function Image({ data }: { data: Image }) {
|
||||
<IconCheck className="absolute right-3" />
|
||||
) : (
|
||||
<button
|
||||
className="absolute right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-50"
|
||||
className="duration-50 absolute right-3 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
onClick={handleCopy(
|
||||
`docker pull ${data.reference}`
|
||||
`docker pull ${data.reference}`,
|
||||
)}
|
||||
>
|
||||
<IconCopy />
|
||||
@@ -188,7 +188,7 @@ export default function Image({ data }: { data: Image }) {
|
||||
<div className="flex flex-col gap-1">
|
||||
Local digests
|
||||
<div
|
||||
className={`bg-${theme}-50 dark:bg-${theme}-950 text-gray-500 rounded-md px-3 py-2 font-mono scrollable`}
|
||||
className={`bg-${theme}-100 dark:bg-${theme}-950 scrollable rounded-md px-3 py-2 font-mono text-gray-500`}
|
||||
>
|
||||
<p className="overflow-x-scroll">
|
||||
{data.local_digests.join("\n")}
|
||||
@@ -199,7 +199,7 @@ export default function Image({ data }: { data: Image }) {
|
||||
<div className="flex flex-col gap-1">
|
||||
Remote digest
|
||||
<div
|
||||
className={`bg-${theme}-50 dark:bg-${theme}-950 text-gray-500 rounded-md px-3 py-2 font-mono`}
|
||||
className={`bg-${theme}-100 dark:bg-${theme}-950 rounded-md px-3 py-2 font-mono text-gray-500`}
|
||||
>
|
||||
<p className="overflow-x-scroll">{data.remote_digest}</p>
|
||||
</div>
|
||||
|
||||
@@ -8,22 +8,25 @@ export default function Loading({ onLoad }: { onLoad: (data: Data) => void }) {
|
||||
process.env.NODE_ENV === "production"
|
||||
? "/api/v1/full"
|
||||
: `http://${window.location.hostname}:8000/api/v1/full`,
|
||||
).then((response) => response.json().then((data) => {onLoad(data as Data)}));
|
||||
).then((response) =>
|
||||
response.json().then((data) => {
|
||||
onLoad(data as Data);
|
||||
}),
|
||||
);
|
||||
return (
|
||||
<div
|
||||
className={`flex justify-center min-h-screen bg-${theme}-50 dark:bg-${theme}-950`}
|
||||
className={`flex min-h-screen justify-center bg-${theme}-50 dark:bg-${theme}-950`}
|
||||
>
|
||||
<div className="lg:px-8 sm:px-6 px-4 max-w-[80rem] mx-auto h-full w-full absolute overflow-hidden">
|
||||
<div className="flex flex-col max-w-[48rem] mx-auto h-full my-8">
|
||||
<div className="absolute mx-auto h-full w-full max-w-[80rem] overflow-hidden px-4 sm:px-6 lg:px-8">
|
||||
<div className="mx-auto my-8 flex h-full max-w-[48rem] flex-col">
|
||||
<div className="flex items-center gap-1">
|
||||
<h1 className="text-5xl lg:text-6xl font-bold dark:text-white">
|
||||
<h1 className="text-5xl font-bold lg:text-6xl dark:text-white">
|
||||
Cup
|
||||
</h1>
|
||||
<Logo />
|
||||
</div>
|
||||
<div
|
||||
className={`h-full flex justify-center
|
||||
items-center gap-1 text-${theme}-500 dark:text-${theme}-400`}
|
||||
className={`flex h-full items-center justify-center gap-1 text-${theme}-500 dark:text-${theme}-400`}
|
||||
>
|
||||
Loading <IconLoader2 className="animate-spin" />
|
||||
</div>
|
||||
|
||||
@@ -25,25 +25,28 @@ export default function Search({
|
||||
return (
|
||||
<div className={`w-full px-6 text-${theme}-500`}>
|
||||
<div
|
||||
className={`flex items-center w-full rounded-md border border-${theme}-300 dark:border-${theme}-700 px-2 gap-1 bg-${theme}-200 dark:bg-${theme}-800 flex-nowrap peer`}
|
||||
className={`flex w-full items-center rounded-md border border-${theme}-300 dark:border-${theme}-700 gap-1 px-2 bg-${theme}-200 dark:bg-${theme}-800 peer flex-nowrap`}
|
||||
>
|
||||
<IconSearch className="size-5" />
|
||||
<div className="w-full">
|
||||
<input
|
||||
className={`w-full h-10 text-sm text-${theme}-600 dark:text-${theme}-400 focus:outline-none peer bg-transparent placeholder:text-${theme}-500`}
|
||||
className={`h-10 w-full text-sm text-${theme}-600 dark:text-${theme}-400 peer bg-transparent focus:outline-none placeholder:text-${theme}-500`}
|
||||
placeholder="Search"
|
||||
onChange={handleChange}
|
||||
value={searchQuery}
|
||||
></input>
|
||||
</div>
|
||||
{showClear && (
|
||||
<button onClick={handleClear} className={`hover:text-${theme}-600 dark:hover:text-${theme}-400`}>
|
||||
<button
|
||||
onClick={handleClear}
|
||||
className={`hover:text-${theme}-600 dark:hover:text-${theme}-400`}
|
||||
>
|
||||
<IconX className="size-5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="relative -translate-y-[8px] h-[8px] border-b-blue-600 border-b-2 w-0 peer-has-[:focus]:w-full transition-all duration-200 rounded-md left-1/2 -translate-x-1/2"
|
||||
className="relative left-1/2 h-[8px] w-0 -translate-x-1/2 -translate-y-[8px] rounded-md border-b-2 border-b-blue-600 transition-all duration-200 peer-has-[:focus]:w-full"
|
||||
style={{ clipPath: "inset(calc(100% - 2px) 0 0 0)" }}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
@@ -19,27 +19,27 @@ export default function Statistic({
|
||||
<div
|
||||
className={`before:bg-${theme}-200 before:dark:bg-${theme}-800 after:bg-${theme}-200 after:dark:bg-${theme}-800 gi`}
|
||||
>
|
||||
<div className="xl:px-8 px-6 py-4 gap-y-2 gap-x-4 justify-between align-baseline flex flex-col h-full">
|
||||
<div className="flex h-full flex-col justify-between gap-x-4 gap-y-2 px-6 py-4 align-baseline xl:px-8">
|
||||
<dt
|
||||
className={`text-${theme}-500 dark:text-${theme}-400 leading-6 font-medium`}
|
||||
className={`text-${theme}-500 dark:text-${theme}-400 font-medium leading-6`}
|
||||
>
|
||||
{name}
|
||||
</dt>
|
||||
<div className="flex gap-1 justify-between items-center">
|
||||
<dd className="text-black dark:text-white tracking-tight leading-10 font-medium text-3xl w-full">
|
||||
<div className="flex items-center justify-between gap-1">
|
||||
<dd className="w-full text-3xl font-medium leading-10 tracking-tight text-black dark:text-white">
|
||||
{value}
|
||||
</dd>
|
||||
{name == "Monitored images" && (
|
||||
<IconEyeFilled className="size-6 text-black dark:text-white shrink-0" />
|
||||
<IconEyeFilled className="size-6 shrink-0 text-black dark:text-white" />
|
||||
)}
|
||||
{name == "Up to date" && (
|
||||
<IconCircleCheckFilled className="size-6 text-green-500 shrink-0" />
|
||||
<IconCircleCheckFilled className="size-6 shrink-0 text-green-500" />
|
||||
)}
|
||||
{name == "Update available" && (
|
||||
<IconCircleArrowUpFilled className="size-6 text-blue-500 shrink-0" />
|
||||
<IconCircleArrowUpFilled className="size-6 shrink-0 text-blue-500" />
|
||||
)}
|
||||
{name == "Unknown" && (
|
||||
<IconHelpCircleFilled className="size-6 text-gray-500 shrink-0" />
|
||||
<IconHelpCircleFilled className="size-6 shrink-0 text-gray-500" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,20 +7,20 @@ export interface Data {
|
||||
};
|
||||
images: Image[];
|
||||
last_updated: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface Image {
|
||||
reference: string,
|
||||
reference: string;
|
||||
parts: {
|
||||
registry: string,
|
||||
repository: string,
|
||||
tag: string,
|
||||
},
|
||||
local_digests: string[],
|
||||
remote_digest: string,
|
||||
registry: string;
|
||||
repository: string;
|
||||
tag: string;
|
||||
};
|
||||
local_digests: string[];
|
||||
remote_digest: string;
|
||||
result: {
|
||||
has_update: boolean | null,
|
||||
error: string | null
|
||||
},
|
||||
time: number
|
||||
has_update: boolean | null;
|
||||
error: string | null;
|
||||
};
|
||||
time: number;
|
||||
}
|
||||
@@ -8,7 +8,7 @@ export default {
|
||||
safelist: [
|
||||
// Generate minimum extra CSS
|
||||
{
|
||||
pattern: /bg-(gray|neutral)-(50|500)/,
|
||||
pattern: /bg-(gray|neutral)-(50|100|500)/,
|
||||
},
|
||||
{
|
||||
pattern: /bg-(gray|neutral)-(900|950)/,
|
||||
@@ -24,11 +24,11 @@ export default {
|
||||
},
|
||||
{
|
||||
pattern: /text-(gray|neutral)-600/,
|
||||
variants: ["hover"]
|
||||
variants: ["hover"],
|
||||
},
|
||||
{
|
||||
pattern: /text-(gray|neutral)-400/,
|
||||
variants: ["hover", "dark", "dark:hover"]
|
||||
variants: ["hover", "dark", "dark:hover"],
|
||||
},
|
||||
{
|
||||
pattern: /text-(gray|neutral)-500/,
|
||||
|
||||
Reference in New Issue
Block a user