macaraon-css を UnoCSS に置き換える

dashboard/biome.json

@@ -17,7 +17,18 @@
     "enabled": true,
     "rules": {
       "recommended": true,
-      "nursery": {},
+      "nursery": {
+        "useSortedClasses": {
+          "fix": "safe",
+          "level": "warn",
+          "options": {
+            "functions": ["clsx", "styled"]
+          }
+        }
+      },
+      "correctness": {
+        "noUnusedImports": "error"
+      },
       "style": {
         "noNonNullAssertion": "off"
       }
@@ -26,4 +37,4 @@
   "files": {
     "ignore": ["src/api/*", "package.json"]
   }
-}
+}

dashboard/package.json

@@ -20,14 +20,13 @@
   "license": "MIT",
   "devDependencies": {
     "@biomejs/biome": "1.9.2",
-    "@macaron-css/core": "1.5.2",
-    "@macaron-css/solid": "1.5.1",
-    "@macaron-css/vite": "1.5.1",
+    "@iconify-json/material-symbols": "1.2.5",
     "@tanstack/virtual-core": "3.10.8",
     "@types/node": "22.7.4",
     "jsdom": "25.0.1",
     "rollup-plugin-visualizer": "5.12.0",
     "typescript": "5.6.2",
+    "unocss": "0.63.6",
     "unplugin-fonts": "1.1.1",
     "vite": "5.4.8",
     "vite-plugin-compression": "0.5.1",
@@ -46,6 +45,7 @@
     "@solidjs/router": "0.14.7",
     "@tanstack/solid-virtual": "3.10.8",
     "@types/async-lock": "1.4.2",
+    "@unocss/reset": "0.63.6",
     "ansi-to-html": "0.7.2",
     "async-lock": "1.4.1",
     "chart.js": "4.4.4",

dashboard/src/animate.css

@@ -0,0 +1,180 @@
+@keyframes wipe-show-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes wipe-show-right {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes wipe-show-down {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes wipe-show-left {
+  from {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes wipe-hide-up {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+}
+@keyframes wipe-hide-right {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+}
+@keyframes wipe-hide-down {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+@keyframes wipe-hide-left {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+}
+@keyframes pop-show {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes pop-hide {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+@keyframes fade-show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fade-hide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes slide-show-up {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes slide-show-right {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes slide-show-down {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes slide-show-left {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes slide-hide-up {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+@keyframes slide-hide-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes slide-hide-down {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+@keyframes slide-hide-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}

dashboard/src/components/UI/Badge.tsx

@@ -1,31 +1,24 @@
-import { styled } from '@macaron-css/solid'
-import { colorVars, textVars } from '/@/theme'
+import { type ComponentProps, type ParentComponent, splitProps } from 'solid-js'
+import { clsx } from '/@/libs/clsx'
 
-const Badge = styled('div', {
-  base: {
-    height: '1.43em', // 20px
-    padding: '0 8px',
-    borderRadius: '9999px',
-    whiteSpace: 'nowrap',
+type VariantProps = {
+  variant: 'text' | 'success' | 'warn'
+}
 
-    ...textVars.caption.regular,
-  },
-  variants: {
-    variant: {
-      text: {
-        background: colorVars.primitive.blackAlpha[200],
-        color: colorVars.semantic.text.black,
-      },
-      success: {
-        background: colorVars.semantic.transparent.successHover,
-        color: colorVars.semantic.accent.success,
-      },
-      warn: {
-        background: colorVars.semantic.transparent.warnHover,
-        color: colorVars.semantic.accent.warn,
-      },
-    },
-  },
-})
+const Badge: ParentComponent<ComponentProps<'div'> & VariantProps> = (props) => {
+  const [_, rest] = splitProps(props, ['variant', 'class'])
+  return (
+    <div
+      class={clsx(
+        'caption-regular h-5 whitespace-nowrap rounded-full px-2',
+        props.variant === 'text' && 'bg-black-alpha-200 text-text-black',
+        props.variant === 'success' && 'bg-transparency-success-hover text-accent-success',
+        props.variant === 'warn' && 'bg-transparency-warn-hover text-accent-warn',
+        props.class,
+      )}
+      {...rest}
+    />
+  )
+}
 
 export default Badge