From a5e9eee13603c85c512d0b4d519e166d8a3176ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=B9=E7=AC=91=E5=AF=92?= <renovamenzxh@gmail.com>
Date: Sat, 16 Mar 2024 02:59:36 -0400
Subject: [PATCH] refactor: simplify unocss classes

---
 src/components/AppWindow.tsx               |  10 +-
 src/components/Launchpad.tsx               |   4 +-
 src/components/Spotlight.tsx               |  84 ++++++++--------
 src/components/apps/Bear.tsx               | 111 ++++++++++-----------
 src/components/apps/FaceTime.tsx           |   7 +-
 src/components/apps/Safari.tsx             |  75 +++++++-------
 src/components/apps/Terminal.tsx           |  53 +++++-----
 src/components/apps/Typora.tsx             |   2 +-
 src/components/apps/VSCode.tsx             |   2 +-
 src/components/dock/Dock.tsx               |  16 +--
 src/components/dock/DockItem.tsx           |  14 ++-
 src/components/menus/Battery.tsx           |   2 +-
 src/components/menus/ControlCenterMenu.tsx |  15 ++-
 src/components/menus/WifiMenu.tsx          |   6 +-
 src/components/menus/base.tsx              |   2 +-
 src/pages/Boot.tsx                         |   8 +-
 src/pages/Desktop.tsx                      |   2 +-
 src/pages/Login.tsx                        |  18 ++--
 src/styles/bear.css                        |  10 +-
 src/styles/component.css                   |  30 +++---
 src/styles/typora.css                      |   4 +-
 unocss.config.ts                           |  33 +++---
 22 files changed, 248 insertions(+), 260 deletions(-)

diff --git a/src/components/AppWindow.tsx b/src/components/AppWindow.tsx
index 27b698c8..647eb4b6 100644
--- a/src/components/AppWindow.tsx
+++ b/src/components/AppWindow.tsx
@@ -86,7 +86,7 @@ const TrafficLights = ({ id, close, aspectRatio, max, setMax, setMin }: TrafficP
         <span className="icon i-gg:close text-[9px]" />
       </button>
       <button
-        className={`window-btn ${max ? "c-bg-400" : "bg-yellow-500 dark:bg-yellow-400"}`}
+        className={`window-btn ${max ? "bg-c-400" : "bg-yellow-500 dark:bg-yellow-400"}`}
         onClick={() => setMin(id)}
         onTouchEnd={() => setMin(id)}
         disabled={max}
@@ -95,7 +95,7 @@ const TrafficLights = ({ id, close, aspectRatio, max, setMax, setMin }: TrafficP
       </button>
       <button
         className={`window-btn ${
-          disableMax ? "c-bg-400" : "bg-green-500 dark:bg-green-400"
+          disableMax ? "bg-c-400" : "bg-green-500 dark:bg-green-400"
         }`}
         onClick={() => setMax(id)}
         onTouchEnd={() => setMax(id)}
@@ -191,11 +191,11 @@ const Window = (props: WindowProps) => {
       lockAspectRatioExtraHeight={props.aspectRatio ? appBarHeight : undefined}
       style={{ zIndex: props.z }}
       onMouseDown={() => props.focus(props.id)}
-      className={`absolute ${round} overflow-hidden bg-transparent w-full h-full ${border} shadow-lg shadow-black/30 ${minimized}`}
+      className={`overflow-hidden ${round} ${border} shadow-lg shadow-black/30 ${minimized}`}
       id={`window-${props.id}`}
     >
       <div
-        className="window-bar relative h-6 text-center c-bg-200"
+        className="window-bar relative h-6 text-center bg-c-200"
         onDoubleClick={() => !disableMax && props.setMax(props.id)}
       >
         <TrafficLights
@@ -206,7 +206,7 @@ const Window = (props: WindowProps) => {
           setMin={props.setMin}
           close={props.close}
         />
-        <span className="font-semibold c-text-700">{props.title}</span>
+        <span className="font-semibold text-c-700">{props.title}</span>
       </div>
       <div className="innner-window w-full overflow-y-hidden">{children}</div>
     </Rnd>
diff --git a/src/components/Launchpad.tsx b/src/components/Launchpad.tsx
index 0f817f23..47cd2ebf 100644
--- a/src/components/Launchpad.tsx
+++ b/src/components/Launchpad.tsx
@@ -28,14 +28,14 @@ export default function Launchpad({ show, toggleLaunchpad }: LaunchpadProps) {
 
   return (
     <div
-      className={`${close} z-30 transform scale-110 w-full h-full fixed overflow-hidden bg-center bg-cover`}
+      className={`${close} z-30 transform scale-110 size-full fixed overflow-hidden bg-center bg-cover`}
       id="launchpad"
       style={{
         backgroundImage: `url(${dark ? wallpapers.night : wallpapers.day})`
       }}
       onClick={() => toggleLaunchpad(false)}
     >
-      <div className="w-full h-full absolute bg-gray-900/20 backdrop-blur-2xl">
+      <div className="size-full absolute bg-gray-900/20 backdrop-blur-2xl">
         <div
           className="mx-auto flex h-7 w-64 mt-5 bg-gray-200/10"
           border="1 rounded-md gray-200/30"
diff --git a/src/components/Spotlight.tsx b/src/components/Spotlight.tsx
index ec2bffe4..afba20b4 100644
--- a/src/components/Spotlight.tsx
+++ b/src/components/Spotlight.tsx
@@ -47,7 +47,7 @@ export default function Spotlight({
   const [appList, setAppList] = useState<JSX.Element | null>(null);
 
   const textWhite = "text-white";
-  const textBlack = "c-text-black";
+  const textBlack = "text-c-black";
   const textSelected = "bg-blue-500";
 
   useClickOutside(spotlightRef, toggleSpotlight, [btnRef]);
@@ -171,7 +171,7 @@ export default function Spotlight({
         )}
         {portfolio.appList.length !== 0 && (
           <div>
-            <div className="spotlight-type mt-1.5 before:(content-empty absolute left-0 top-0 ml-2 w-63.5 border-t menu-border)">
+            <div className="spotlight-type mt-1.5 before:(content-empty absolute left-0 top-0 ml-2 w-63.5 border-t border-menu)">
               Portfolio
             </div>
             <ul className="w-full text-xs">{portfolio.appList}</ul>
@@ -268,16 +268,19 @@ export default function Spotlight({
       onClick={focusOnInput}
       ref={spotlightRef}
     >
-      <div className="w-full grid grid-cols-8 sm:grid-cols-11 h-12 sm:h-14 rounded-lg bg-transparent">
+      <div
+        className="w-full h-12 sm:h-14 rounded-lg bg-transparent"
+        grid="~ cols-8 sm:cols-11"
+      >
         <div className="col-start-1 col-span-1 flex-center">
-          <span className="i-bx:search ml-1 c-text-600 text-[28px]" />
+          <span className="i-bx:search ml-1 text-c-600 text-[28px]" />
         </div>
         <input
           id="spotlight-input"
           className={`col-start-2 col-span-7 ${
             curDetails ? "sm:col-span-9" : "sm:col-span-10"
-          } c-text-black bg-transparent no-outline px-1`}
-          text="xl sm:2xl"
+          } bg-transparent no-outline px-1`}
+          text="c-black xl sm:2xl"
           placeholder="Spotlight Search"
           value={searchText}
           onChange={handleInputChange}
@@ -295,47 +298,44 @@ export default function Spotlight({
         )}
       </div>
       {searchText !== "" && (
-        <div className="h-85 bg-transparent flex flex-row border-t menu-border">
-          <div className="flex-none w-32 sm:w-72 px-2.5 border-r menu-border overflow-y-scroll">
+        <div className="h-85 bg-transparent flex border-t border-menu">
+          <div className="flex-none w-32 sm:w-72 px-2.5 border-r border-menu overflow-y-scroll">
             {appList}
           </div>
-          <div className="flex-grow">
-            {curDetails && (
-              <div className="h-full w-full flex flex-col">
-                <div
-                  className="mx-auto w-4/5 h-56 border-b menu-border"
-                  flex="none center col"
-                >
-                  <img
-                    className="w-32 mx-auto"
-                    src={curDetails.img}
-                    alt={curDetails.title}
-                    title={curDetails.title}
-                  />
-                  <div className="mt-4 text-xl c-text-black">{curDetails.title}</div>
-                  <div className="text-xs c-text-500">
-                    {`Version: ${getRandom(0, 99)}.${getRandom(0, 999)}`}
-                  </div>
+          {curDetails && (
+            <div className="flex-grow flex flex-col">
+              <div className="mx-auto w-4/5 h-56" flex="none center col" border="b menu">
+                <img
+                  className="w-32 mx-auto"
+                  src={curDetails.img}
+                  alt={curDetails.title}
+                  title={curDetails.title}
+                />
+                <div mt-4 text="xl c-black">
+                  {curDetails.title}
                 </div>
-                <div className="flex-grow flex text-xs">
-                  <div className="flex-none flex-col vstack w-1/2 items-end c-text-500">
-                    <div>Kind</div>
-                    <div>Size</div>
-                    <div>Created</div>
-                    <div>Modified</div>
-                    <div>Last opened</div>
-                  </div>
-                  <div className="flex-grow flex-col vstack pl-2 c-text-black">
-                    <div>{curDetails.type === "app" ? "Application" : "Portfolio"}</div>
-                    <div>{`${getRandom(0, 999)} G`}</div>
-                    <div>{getRandomDate()}</div>
-                    <div>{getRandomDate()}</div>
-                    <div>{getRandomDate()}</div>
-                  </div>
+                <div text="xs c-500">
+                  {`Version: ${getRandom(0, 99)}.${getRandom(0, 999)}`}
                 </div>
               </div>
-            )}
-          </div>
+              <div className="flex-grow hstack text-xs">
+                <div className="flex-none w-1/2 text-right text-c-500">
+                  <div>Kind</div>
+                  <div>Size</div>
+                  <div>Created</div>
+                  <div>Modified</div>
+                  <div>Last opened</div>
+                </div>
+                <div className="flex-grow pl-2 text-c-black">
+                  <div>{curDetails.type === "app" ? "Application" : "Portfolio"}</div>
+                  <div>{`${getRandom(0, 999)} G`}</div>
+                  <div>{getRandomDate()}</div>
+                  <div>{getRandomDate()}</div>
+                  <div>{getRandomDate()}</div>
+                </div>
+              </div>
+            </div>
+          )}
         </div>
       )}
     </div>
diff --git a/src/components/apps/Bear.tsx b/src/components/apps/Bear.tsx
index a668fa8a..12bffe2d 100644
--- a/src/components/apps/Bear.tsx
+++ b/src/components/apps/Bear.tsx
@@ -59,7 +59,7 @@ const Highlighter = (dark: boolean): any => {
 
 const Sidebar = ({ cur, setMidBar }: SidebarProps) => {
   return (
-    <div className="w-full h-full bg-gray-700 text-white overflow-y-scroll">
+    <div text-white>
       <div className="h-12 pr-3 hstack space-x-3 justify-end">
         <span className="i-ic:baseline-cloud-off text-xl" />
         <span className="i-akar-icons:settings-vertical text-xl" />
@@ -84,46 +84,41 @@ const Sidebar = ({ cur, setMidBar }: SidebarProps) => {
 
 const Middlebar = ({ items, cur, setContent }: MiddlebarProps) => {
   return (
-    <div
-      className="w-full h-full overflow-y-scroll border-r c-border-300"
-      bg="gray-50 dark:gray-800"
-    >
-      <ul>
-        {items.map((item: BearMdData, index: number) => (
-          <li
-            key={`bear-midbar-${item.id}`}
-            className={`h-24 flex flex-col cursor-default border-l-2 ${
-              cur === index
-                ? "border-red-500 bg-white dark:bg-gray-900"
-                : "border-transparent bg-transparent"
-            } hover:(bg-white dark:bg-gray-900)`}
-            onClick={() => setContent(item.id, item.file, index)}
-          >
-            <div className="h-8 mt-3 hstack flex-none">
-              <div className="-mt-1 w-10 vstack flex-none c-text-500">
-                <span className={item.icon} />
-              </div>
-              <span className="relative text-gray-900 dark:text-gray-100 flex-grow font-bold">
-                {item.title}
-                {item.link && (
-                  <a
-                    className="absolute top-1 right-4"
-                    href={item.link}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <span className="i-ant-design:link-outlined c-text-500" />
-                  </a>
-                )}
-              </span>
-            </div>
-            <div className="h-16 ml-10 pb-2 pr-1 text-sm c-text-500 border-b c-border-300">
-              {item.excerpt}
+    <ul>
+      {items.map((item: BearMdData, index: number) => (
+        <li
+          key={`bear-midbar-${item.id}`}
+          className={`h-24 flex flex-col cursor-default border-l-2 ${
+            cur === index
+              ? "border-red-500 bg-white dark:bg-gray-900"
+              : "border-transparent bg-transparent"
+          } hover:(bg-white dark:bg-gray-900)`}
+          onClick={() => setContent(item.id, item.file, index)}
+        >
+          <div className="h-8 mt-3 hstack flex-none">
+            <div className="-mt-1 w-10 vstack flex-none text-c-500">
+              <span className={item.icon} />
             </div>
-          </li>
-        ))}
-      </ul>
-    </div>
+            <span className="relative flex-grow font-bold" text="gray-900 dark:gray-100">
+              {item.title}
+              {item.link && (
+                <a
+                  className="absolute top-1 right-4"
+                  href={item.link}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <span className="i-ant-design:link-outlined text-c-500" />
+                </a>
+              )}
+            </span>
+          </div>
+          <div className="flex-grow ml-10" p="b-2 r-1" text="sm c-500" border="b c-300">
+            {item.excerpt}
+          </div>
+        </li>
+      ))}
+    </ul>
   );
 };
 
@@ -177,19 +172,17 @@ const Content = ({ contentID, contentURL }: ContentProps) => {
   }, [contentID, contentURL, fetchMarkdown]);
 
   return (
-    <div className="markdown w-full h-full c-text-700 bg-gray-50 dark:bg-gray-800 overflow-scroll py-6">
-      <div className="w-2/3 px-2 mx-auto">
-        <ReactMarkdown
-          remarkPlugins={[remarkGfm, remarkMath]}
-          rehypePlugins={[
-            rehypeKatex,
-            [rehypeExternalLinks, { target: "_blank", rel: "noopener noreferrer" }]
-          ]}
-          components={Highlighter(dark as boolean)}
-        >
-          {storeMd[contentID]}
-        </ReactMarkdown>
-      </div>
+    <div className="markdown w-2/3 mx-auto px-2 py-6 text-c-700">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm, remarkMath]}
+        rehypePlugins={[
+          rehypeKatex,
+          [rehypeExternalLinks, { target: "_blank", rel: "noopener noreferrer" }]
+        ]}
+        components={Highlighter(dark as boolean)}
+      >
+        {storeMd[contentID]}
+      </ReactMarkdown>
     </div>
   );
 };
@@ -223,18 +216,22 @@ const Bear = () => {
   };
 
   return (
-    <div className="bear font-avenir flex w-full h-full">
-      <div className="flex-none w-44">
+    <div className="bear font-avenir flex h-full">
+      <div className="flex-none w-44 overflow-auto bg-gray-700">
         <Sidebar cur={state.curSidebar} setMidBar={setMidBar} />
       </div>
-      <div className="flex-none w-60">
+      <div
+        className="flex-none w-60 overflow-auto"
+        bg="gray-50 dark:gray-800"
+        border="r c-300"
+      >
         <Middlebar
           items={state.midbarList}
           cur={state.curMidbar}
           setContent={setContent}
         />
       </div>
-      <div className="flex-grow">
+      <div className="flex-grow overflow-auto" bg="gray-50 dark:gray-800">
         <Content contentID={state.contentID} contentURL={state.contentURL} />
       </div>
     </div>
diff --git a/src/components/apps/FaceTime.tsx b/src/components/apps/FaceTime.tsx
index 80cddfe7..8bf95158 100644
--- a/src/components/apps/FaceTime.tsx
+++ b/src/components/apps/FaceTime.tsx
@@ -30,7 +30,7 @@ const SidebarItem = ({ date, active }: SidebarItemProps) => {
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
     >
-      <div className="h-11 w-11 rounded-full bg-zinc-600 flex-center">
+      <div className="size-11 rounded-full bg-zinc-600 flex-center">
         <span className="i-ph:link-bold" text="2xl white/80" />
       </div>
 
@@ -137,7 +137,6 @@ const FaceTime = () => {
       <div className="h-full bg-zinc-800">
         {!state.curImage ? (
           <Webcam
-            className="h-full w-full"
             mirrored={true}
             audio={false}
             ref={webcamRef}
@@ -148,9 +147,7 @@ const FaceTime = () => {
             }}
           />
         ) : (
-          state.curImage && (
-            <img className="h-full w-full" src={state.curImage} alt="your-image" />
-          )
+          state.curImage && <img size-full src={state.curImage} alt="your-image" />
         )}
       </div>
     </div>
diff --git a/src/components/apps/Safari.tsx b/src/components/apps/Safari.tsx
index 9554ab3f..1b30038c 100644
--- a/src/components/apps/Safari.tsx
+++ b/src/components/apps/Safari.tsx
@@ -31,38 +31,31 @@ const NavSection = ({ width, section, setGoURL }: NavSectionProps) => {
       </div>
       <div className={`mt-3 grid grid-flow-row ${grid}`}>
         {section.sites.map((site: SiteData) => (
-          <div key={`safari-nav-${site.id}`} className="h-28 w-full flex-center">
-            <div className="h-full w-full flex flex-col">
-              <div className="h-max w-max mx-auto bg-white rounded-md">
-                {site.img ? (
-                  <img
-                    className="w-16 h-16 mx-auto rounded-md"
-                    src={site.img}
-                    alt={site.title}
-                    title={site.title}
-                    onClick={
-                      site.inner
-                        ? () => setGoURL(site.link)
-                        : () => window.open(site.link)
-                    }
-                  />
-                ) : (
-                  <div
-                    className="w-16 h-16 mx-auto rounded-md flex-center cursor-default text-black"
-                    onClick={
-                      site.inner
-                        ? () => setGoURL(site.link)
-                        : () => window.open(site.link)
-                    }
-                  >
-                    <span text="lg center">{site.title}</span>
-                  </div>
-                )}
-              </div>
-              <span m="t-2 x-auto" text="sm">
-                {site.title}
-              </span>
+          <div key={`safari-nav-${site.id}`} className="h-28 flex flex-col">
+            <div className="size-16 mx-auto rounded-md overflow-hidden bg-white">
+              {site.img ? (
+                <img
+                  src={site.img}
+                  alt={site.title}
+                  title={site.title}
+                  onClick={
+                    site.inner ? () => setGoURL(site.link) : () => window.open(site.link)
+                  }
+                />
+              ) : (
+                <div
+                  className="size-full flex-center cursor-default text-black"
+                  onClick={
+                    site.inner ? () => setGoURL(site.link) : () => window.open(site.link)
+                  }
+                >
+                  <span text-lg>{site.title}</span>
+                </div>
+              )}
             </div>
+            <span m="t-2 x-auto" text-sm>
+              {site.title}
+            </span>
           </div>
         ))}
       </div>
@@ -80,12 +73,12 @@ const NavPage = ({ width, setGoURL }: NavProps) => {
 
   return (
     <div
-      className="w-full safari-content overflow-y-scroll bg-center bg-cover c-text-black"
+      className="w-full safari-content overflow-y-scroll bg-center bg-cover text-c-black"
       style={{
         backgroundImage: `url(${dark ? wallpapers.night : wallpapers.day})`
       }}
     >
-      <div className="w-full min-h-full pt-8 c-bg-100/80 backdrop-blur-2xl">
+      <div className="w-full min-h-full pt-8 bg-c-100/80 backdrop-blur-2xl">
         {/* Favorites */}
         <NavSection section={websites.favorites} setGoURL={setGoURL} width={width} />
 
@@ -126,7 +119,7 @@ const NoInternetPage = () => {
         backgroundImage: `url(${dark ? wallpapers.night : wallpapers.day})`
       }}
     >
-      <div className="w-full h-full pb-10 backdrop-blur-2xl flex-center c-text-600 c-bg-100/80">
+      <div className="w-full h-full pb-10 backdrop-blur-2xl flex-center text-c-600 bg-c-100/80">
         <div className="text-center">
           <div className="text-2xl font-bold">You Are Not Connected to the Internet</div>
           <div className="pt-4 text-sm">
@@ -166,14 +159,14 @@ const Safari = ({ width }: SafariProps) => {
     if (keyCode === "Enter") setGoURL((e.target as HTMLInputElement).value);
   };
 
-  const buttonColor = state.goURL === "" ? "c-text-400" : "c-text-700";
+  const buttonColor = state.goURL === "" ? "text-c-400" : "text-c-700";
   const grid = (width as number) < 640 ? "grid-cols-2" : "grid-cols-3";
   const hideLast = (width as number) < 640 ? "hidden" : "flex";
 
   return (
     <div className="w-full h-full">
       {/* browser topbar */}
-      <div className={`h-10 grid ${grid} items-center c-bg-white`}>
+      <div className={`h-10 grid ${grid} items-center bg-c-white`}>
         <div className="flex px-2">
           <button
             className={`safari-btn w-7 ${buttonColor}`}
@@ -181,15 +174,15 @@ const Safari = ({ width }: SafariProps) => {
           >
             <span className="i-jam:chevron-left text-xl" />
           </button>
-          <button className="safari-btn w-7 c-text-400">
+          <button className="safari-btn w-7 text-c-400">
             <span className="i-jam:chevron-right text-xl" />
           </button>
-          <button className="safari-btn w-9 ml-3 c-text-700">
+          <button className="safari-btn w-9 ml-3 text-c-700">
             <span className="i-bi:layout-sidebar text-sm" />
           </button>
         </div>
         <div className="hstack space-x-2 px-2">
-          <button className="safari-btn w-9 -ml-10 c-text-400">
+          <button className="safari-btn w-9 -ml-10 text-c-400">
             <span className="i-fa-solid:shield-alt text-sm" />
           </button>
           <input
@@ -197,7 +190,7 @@ const Safari = ({ width }: SafariProps) => {
             value={state.currentURL}
             onChange={(e) => setState({ ...state, currentURL: e.target.value })}
             onKeyPress={pressURL}
-            className="h-6 w-full p-2 rounded font-normal no-outline text-sm text-center c-text-500 c-bg-200"
+            className="h-6 w-full p-2 rounded font-normal no-outline text-sm text-center text-c-500 bg-c-200"
             border="2 transparent focus:blue-400 dark:focus:blue-500"
             placeholder="Search or enter website name"
           />
@@ -206,7 +199,7 @@ const Safari = ({ width }: SafariProps) => {
           <button className={`safari-btn w-9 ${buttonColor}`}>
             <span className="i-ion:share-outline" />
           </button>
-          <button className="safari-btn w-9 c-text-700">
+          <button className="safari-btn w-9 text-c-700">
             <span className="i-ion:copy-outline" />
           </button>
         </div>
diff --git a/src/components/apps/Terminal.tsx b/src/components/apps/Terminal.tsx
index a4d0da8d..f2b3edae 100644
--- a/src/components/apps/Terminal.tsx
+++ b/src/components/apps/Terminal.tsx
@@ -8,8 +8,7 @@ const getEmoji = () => {
   return emojis[Math.floor(Math.random() * emojis.length)];
 };
 
-const characters =
-  "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789富强民主文明和谐自由平等公正法治爱国敬业诚信友善";
+const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789落霞与孤鹜齐飞秋水共长天一色";
 
 interface HowDareProps {
   setRMRF: (value: boolean) => void;
@@ -78,14 +77,14 @@ class HowDare extends React.Component<HowDareProps> {
     return (
       <div
         id="how-dare-container"
-        className="fixed w-full h-full bg-black text-white"
+        className="fixed size-full bg-black text-white"
         onClick={() => this.props.setRMRF(false)}
       >
         <canvas id="how-dare"></canvas>
-        <div className="font-avenir absolute text-center h-28 mx-auto -mt-20 bottom-0 left-0 right-0 top-1/2">
-          <div className="text-4xl">{this.emoji}</div>
-          <div className="text-3xl mt-4">HOW DARE YOU!</div>
-          <div className="mt-4">Click to go back</div>
+        <div className="font-avenir absolute h-28 text-center space-y-4 m-auto inset-0">
+          <div text-4xl>{this.emoji}</div>
+          <div text-3xl>HOW DARE YOU!</div>
+          <div>Click to go back</div>
         </div>
       </div>
     );
@@ -226,33 +225,31 @@ export default class Terminal extends React.Component<{}, TerminalState> {
     const help = (
       <ul className="list-disc ml-6 pb-1.5">
         <li>
-          <span className="text-red-400">cat {"<file>"}</span> - See the content of{" "}
-          {"<file>"}
+          <span text-red-400>cat {"<file>"}</span> - See the content of {"<file>"}
         </li>
         <li>
-          <span className="text-red-400">cd {"<dir>"}</span> - Move into
+          <span text-red-400>cd {"<dir>"}</span> - Move into
           {" <dir>"}, "cd .." to move to the parent directory, "cd" or "cd ~" to return to
           root
         </li>
         <li>
-          <span className="text-red-400">ls</span> - See files and directories in the
-          current directory
+          <span text-red-400>ls</span> - See files and directories in the current
+          directory
         </li>
         <li>
-          <span className="text-red-400">clear</span> - Clear the screen
+          <span text-red-400>clear</span> - Clear the screen
         </li>
         <li>
-          <span className="text-red-400">help</span> - Display this help menu
+          <span text-red-400>help</span> - Display this help menu
         </li>
         <li>
-          <span className="text-red-400">rm -rf /</span> - :)
+          <span text-red-400>rm -rf /</span> - :)
         </li>
         <li>
-          press <span className="text-red-400">up arrow / down arrow</span> - Select
-          history commands
+          press <span text-red-400>up arrow / down arrow</span> - Select history commands
         </li>
         <li>
-          press <span className="text-red-400">tab</span> - Auto complete
+          press <span text-red-400>tab</span> - Auto complete
         </li>
       </ul>
     );
@@ -349,16 +346,16 @@ export default class Terminal extends React.Component<{}, TerminalState> {
 
   generateInputRow = (id: number): void => {
     const newRow = (
-      <div key={`terminal-input-row-${id}`} className="w-full h-6 flex">
-        <div className="w-max hstack">
-          <span className="text-yellow-200">
-            zou@macbook-pro <span className="text-green-300">{this.getCurDirName()}</span>
+      <div key={`terminal-input-row-${id}`} flex>
+        <div className="w-max hstack space-x-1.5">
+          <span text-yellow-200>
+            zou@macbook-pro <span text-green-300>{this.getCurDirName()}</span>
           </span>
-          <span className="ml-1.5 text-red-400">{">"}</span>
+          <span text-red-400>{">"}</span>
         </div>
         <input
           id={`terminal-input-${id}`}
-          className="flex-1 w-full px-1 text-white outline-none bg-transparent"
+          className="flex-1 px-1 text-white outline-none bg-transparent"
           onKeyDown={this.keyPress}
           autoFocus={true}
         />
@@ -369,7 +366,7 @@ export default class Terminal extends React.Component<{}, TerminalState> {
 
   generateResultRow = (id: number, result: JSX.Element) => {
     const newRow = (
-      <div key={`terminal-result-row-${id}`} className="w-full h-max leading-5 flex">
+      <div key={`terminal-result-row-${id}`} break-all>
         {result}
       </div>
     );
@@ -379,18 +376,18 @@ export default class Terminal extends React.Component<{}, TerminalState> {
   render() {
     return (
       <div
-        className="terminal font-terminal font-normal relative w-full h-full bg-gray-800/90 overflow-y-scroll"
+        className="terminal font-terminal font-normal relative h-full bg-gray-800/90 overflow-y-scroll"
         text="white sm"
         onClick={() => this.focusOnInput(this.curInputTimes)}
       >
         {this.state.rmrf && (
           <HowDare setRMRF={(value: boolean) => this.setState({ rmrf: value })} />
         )}
-        <div className="w-full h-max pt-2 px-1.5 ">
+        <div p="y-2 x-1.5">
           <span className="text-green-300">ヽ(ˋ▽ˊ)ノ</span>: Hey, you found the terminal!
           Type `help` to get started.
         </div>
-        <div id="terminal-content" className="mt-2 px-1.5 pb-2">
+        <div id="terminal-content" p="x-1.5 b-2">
           {this.state.content}
         </div>
       </div>
diff --git a/src/components/apps/Typora.tsx b/src/components/apps/Typora.tsx
index 1bace51c..21670d19 100644
--- a/src/components/apps/Typora.tsx
+++ b/src/components/apps/Typora.tsx
@@ -28,7 +28,7 @@ const MilkdownEditor = () => {
           .markdownUpdated((_, markdown) => setTyporaMd(markdown));
 
         root.className =
-          "typora bg-white dark:bg-gray-800 c-text-700 h-full overflow-y-scroll";
+          "typora bg-white dark:bg-gray-800 text-c-700 h-full overflow-y-scroll";
       })
       .use(listener)
       .use(commonmark)
diff --git a/src/components/apps/VSCode.tsx b/src/components/apps/VSCode.tsx
index cdea21fe..2b648b05 100644
--- a/src/components/apps/VSCode.tsx
+++ b/src/components/apps/VSCode.tsx
@@ -1,7 +1,7 @@
 export default function VSCode() {
   return (
     <iframe
-      className="h-full w-full bg-vscode"
+      className="size-full bg-[#202020]"
       src="https://github1s.com/Renovamen/playground-macos/blob/main/README.md"
       title="VSCode"
     />
diff --git a/src/components/dock/Dock.tsx b/src/components/dock/Dock.tsx
index d750f91b..d6fe228a 100644
--- a/src/components/dock/Dock.tsx
+++ b/src/components/dock/Dock.tsx
@@ -35,17 +35,17 @@ export default function Dock({
 
   return (
     <div
-      className={`dock w-full sm:w-max fixed left-0 right-0 mx-auto bottom-1 ${
-        hide ? "z-0" : "z-50"
-      } overflow-x-scroll sm:overflow-x-visible`}
+      className={`dock fixed inset-x-0 mx-auto bottom-1 ${hide ? "z-0" : "z-50"}`}
+      w="full sm:max"
+      overflow="x-scroll sm:x-visible"
     >
       <ul
-        className="mx-auto w-max px-2 space-x-2 flex backdrop-blur-2xl c-border-400/40 c-bg-white/20"
-        border="1 rounded-none sm:rounded-xl"
+        className="flex space-x-2 px-2 backdrop-blur-2xl bg-c-white/20"
+        border="~ c-400/40 rounded-none sm:rounded-xl"
         onMouseMove={(e) => mouseX.set(e.nativeEvent.x)}
         onMouseLeave={() => mouseX.set(null)}
         style={{
-          height: `${(dockSize as number) + 15}px`
+          height: `${(dockSize + 15) / 16}rem`
         }}
       >
         {apps.map((app) => (
@@ -59,8 +59,8 @@ export default function Dock({
             openApp={openApp}
             isOpen={app.desktop && showApps[app.id]}
             link={app.link}
-            dockSize={dockSize as number}
-            dockMag={dockMag as number}
+            dockSize={dockSize}
+            dockMag={dockMag}
           />
         ))}
       </ul>
diff --git a/src/components/dock/DockItem.tsx b/src/components/dock/DockItem.tsx
index 6ce231ef..f466a348 100644
--- a/src/components/dock/DockItem.tsx
+++ b/src/components/dock/DockItem.tsx
@@ -97,15 +97,18 @@ export default function DockItem({
     <li
       id={`dock-${id}`}
       onClick={desktop || id === "launchpad" ? () => openApp(id) : () => {}}
-      className="hstack flex-col justify-end mb-1 transition duration-150 ease-in origin-bottom"
+      className="flex flex-col justify-end mb-1 transition duration-150 ease-in origin-bottom"
     >
-      <p className="tooltip absolute px-3 py-1 rounded-md text-sm c-text-black c-bg-300/80">
+      <p
+        className="tooltip absolute rounded-md bg-c-300/80"
+        p="x-3 y-1"
+        text="sm c-black"
+      >
         {title}
       </p>
       {link ? (
         <a href={link} target="_blank" rel="noreferrer">
           <motion.img
-            className="w-12"
             ref={imgRef}
             src={img}
             alt={title}
@@ -116,7 +119,6 @@ export default function DockItem({
         </a>
       ) : (
         <motion.img
-          className="w-12"
           ref={imgRef}
           src={img}
           alt={title}
@@ -125,7 +127,9 @@ export default function DockItem({
           style={winWidth < 640 ? {} : { width, willChange: "width" }}
         />
       )}
-      <div className={`h-1 w-1 m-0 rounded-full c-bg-800 ${isOpen ? "" : "invisible"}`} />
+      <div
+        className={`size-1 mx-auto rounded-full bg-c-800 ${isOpen ? "" : "invisible"}`}
+      />
     </li>
   );
 }
diff --git a/src/components/menus/Battery.tsx b/src/components/menus/Battery.tsx
index 7a2fc59d..26d23fe5 100644
--- a/src/components/menus/Battery.tsx
+++ b/src/components/menus/Battery.tsx
@@ -15,7 +15,7 @@ export default function Battery() {
 
   return (
     <div className="hstack space-x-2">
-      <span className="text-xs">{(batteryState.level * 100).toFixed()}%</span>
+      <span text-xs>{(batteryState.level * 100).toFixed()}%</span>
       <div className="relative hstack">
         <span className="i-bi:battery text-2xl" />
         <div className={`battery-level ${color()}`} style={{ width: `${width()}rem` }} />
diff --git a/src/components/menus/ControlCenterMenu.tsx b/src/components/menus/ControlCenterMenu.tsx
index 15fdfe43..5c64543b 100644
--- a/src/components/menus/ControlCenterMenu.tsx
+++ b/src/components/menus/ControlCenterMenu.tsx
@@ -11,12 +11,9 @@ interface SliderProps {
 
 const SliderComponent = ({ icon, value, setValue }: SliderProps) => {
   return (
-    <div className="slider flex w-full">
-      <div
-        className="w-7 h-7 flex-center c-bg-100 c-border-300"
-        border="t l b rounded-l-full"
-      >
-        <span className={`${icon} c-text-500 text-xs`} />
+    <div className="slider flex">
+      <div className="size-7 flex-center bg-c-100" border="t l b c-300 rounded-l-full">
+        <span className={icon} text="xs c-500" />
       </div>
       <Slider
         min={1}
@@ -72,8 +69,10 @@ export default function ControlCenterMenu({
 
   return (
     <div
-      className="fixed grid shadow-menu w-80 h-96 max-w-full top-9.5 right-0 sm:right-1.5 p-2.5 c-text-black c-bg-100/70 border rounded-2xl menu-border"
-      grid="cols-4 rows-5 gap-2"
+      className="w-80 h-96 max-w-full shadow-menu p-2.5 text-c-black bg-c-100/70"
+      pos="fixed top-9.5 right-0 sm:right-1.5"
+      border="~ menu rounded-2xl"
+      grid="~ cols-4 rows-5 gap-2"
       ref={controlCenterRef}
     >
       <div className="cc-grid row-span-2 col-span-2 p-2 flex flex-col justify-around">
diff --git a/src/components/menus/WifiMenu.tsx b/src/components/menus/WifiMenu.tsx
index 961df7ec..3c17ad82 100644
--- a/src/components/menus/WifiMenu.tsx
+++ b/src/components/menus/WifiMenu.tsx
@@ -17,11 +17,11 @@ export default function WifiMenu({ toggleWifiMenu, btnRef }: WifiMenuProps) {
 
   return (
     <div
-      className="menu-box flex gap-2 h-11 w-80 max-w-full right-0 sm:right-2 px-2 py-0.5"
+      className="menu-box hstack justify-between h-11 w-80 max-w-full right-0 sm:right-2 px-2 py-0.5"
       ref={wifiRef}
     >
-      <div className="w-4/5 p-2.5 font-medium">Wi-Fi</div>
-      <div className="w-1/5 py-2 text-center">
+      <div className="px-2.5 font-medium">Wi-Fi</div>
+      <div className="px-2.5">
         <label className="switch-toggle">
           <input type="checkbox" checked={wifi} onChange={toggleWIFI} />
           <span className="slider-toggle" />
diff --git a/src/components/menus/base.tsx b/src/components/menus/base.tsx
index 3915f750..f6c8f4a8 100644
--- a/src/components/menus/base.tsx
+++ b/src/components/menus/base.tsx
@@ -25,7 +25,7 @@ const MenuItemGroup = (props: MenuItemGroupProps) => {
   const border =
     props.border === false
       ? "pb-1"
-      : "after:(content-empty block pb-0 h-1.5 max-w-full mx-2 border-b c-border-400)";
+      : "after:(content-empty block pb-0 h-1.5 max-w-full mx-2 border-b border-c-400)";
   return <ul className={`relative px-1 pt-1 ${border}`}>{props.children}</ul>;
 };
 
diff --git a/src/pages/Boot.tsx b/src/pages/Boot.tsx
index 1f163f69..d74d6427 100644
--- a/src/pages/Boot.tsx
+++ b/src/pages/Boot.tsx
@@ -35,11 +35,11 @@ export default function Boot({ restart, sleep, setBooting }: BootProps) {
   };
 
   return (
-    <div className="w-full h-full bg-black flex-center flex-col" onClick={handleClick}>
-      <span className="i-fa-brands:apple text-white -mt-4 w-20 h-20 sm:w-24 sm:h-24" />
+    <div className="size-full bg-black flex-center" onClick={handleClick}>
+      <div className="i-fa-brands:apple text-white -mt-4 size-20 sm:size-24" />
       {loading && (
         <div
-          className="absolute top-1/2 left-0 right-0 w-56 h-1 sm:h-1.5 bg-gray-500 rounded overflow-hidden"
+          className="absolute top-1/2 inset-x-0 w-56 h-1 sm:h-1.5 bg-gray-500 rounded overflow-hidden"
           m="t-16 sm:t-24 x-auto"
         >
           <span
@@ -52,7 +52,7 @@ export default function Boot({ restart, sleep, setBooting }: BootProps) {
       )}
       {!restart && !loading && (
         <div
-          className="absolute top-1/2 left-0 right-0"
+          pos="absolute top-1/2 inset-x-0"
           m="t-16 sm:t-20 x-auto"
           text="sm gray-200 center"
         >
diff --git a/src/pages/Desktop.tsx b/src/pages/Desktop.tsx
index a5b6ff79..80c329e7 100644
--- a/src/pages/Desktop.tsx
+++ b/src/pages/Desktop.tsx
@@ -237,7 +237,7 @@ export default function Desktop(props: MacActions) {
 
   return (
     <div
-      className="w-full h-full overflow-hidden bg-center bg-cover"
+      className="size-full overflow-hidden bg-center bg-cover"
       style={{
         backgroundImage: `url(${dark ? wallpapers.night : wallpapers.day})`,
         filter: `brightness( ${(brightness as number) * 0.7 + 50}% )`
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 35f64ee4..3c78de46 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -28,7 +28,7 @@ export default function Login(props: MacActions) {
 
   return (
     <div
-      className="w-full h-full login text-center"
+      className="size-full login text-center"
       style={{
         background: `url(${
           dark ? wallpapers.night : wallpapers.day
@@ -38,11 +38,7 @@ export default function Login(props: MacActions) {
     >
       <div className="inline-block w-auto relative top-1/2 -mt-40">
         {/* Avatar */}
-        <img
-          className="rounded-full w-24 h-24 my-0 mx-auto"
-          src={user.avatar}
-          alt="img"
-        />
+        <img className="rounded-full size-24 my-0 mx-auto" src={user.avatar} alt="img" />
         <div className="font-semibold mt-2 text-xl text-white">{user.name}</div>
 
         {/* Password Input */}
@@ -52,7 +48,7 @@ export default function Login(props: MacActions) {
             type="password"
             placeholder="Enter Password"
             onClick={(e) => e.stopPropagation()}
-            onKeyPress={keyPress}
+            onKeyDown={keyPress}
             value={password}
             onChange={handleInputChange}
           />
@@ -65,12 +61,12 @@ export default function Login(props: MacActions) {
       </div>
 
       {/* buttons */}
-      <div className="text-sm fixed bottom-16 left-0 right-0 mx-auto flex flex-row space-x-4 w-max">
+      <div className="text-sm fixed bottom-16 inset-x-0 mx-auto flex flex-row space-x-4 w-max">
         <div
           className="hstack flex-col text-white w-24 cursor-pointer"
           onClick={(e) => props.sleepMac(e)}
         >
-          <div className="flex-center h-10 w-10 bg-gray-700 rounded-full">
+          <div className="flex-center size-10 bg-gray-700 rounded-full">
             <span className="i-gg:sleep text-[40px]" />
           </div>
           <span>Sleep</span>
@@ -79,7 +75,7 @@ export default function Login(props: MacActions) {
           className="hstack flex-col text-white w-24 cursor-pointer"
           onClick={(e) => props.restartMac(e)}
         >
-          <div className="flex-center h-10 w-10 bg-gray-700 rounded-full">
+          <div className="flex-center size-10 bg-gray-700 rounded-full">
             <span className="i-ri:restart-line text-4xl" />
           </div>
           <span>Restart</span>
@@ -88,7 +84,7 @@ export default function Login(props: MacActions) {
           className="hstack flex-col text-white w-24 cursor-pointer"
           onClick={(e) => props.shutMac(e)}
         >
-          <div className="flex-center h-10 w-10 bg-gray-700 rounded-full">
+          <div className="flex-center size-10 bg-gray-700 rounded-full">
             <span className="i-ri:shut-down-line text-4xl" />
           </div>
           <span>Shut Down</span>
diff --git a/src/styles/bear.css b/src/styles/bear.css
index f7a16fe2..ea476f58 100644
--- a/src/styles/bear.css
+++ b/src/styles/bear.css
@@ -6,7 +6,7 @@
 .bear .markdown h2,
 .bear .markdown h3,
 .bear .markdown h4 {
-  @apply font-bold relative c-text-800;
+  @apply font-bold relative text-c-800;
 }
 
 .bear .markdown h1,
@@ -20,7 +20,7 @@
 .bear .markdown h2::before,
 .bear .markdown h3::before,
 .bear .markdown h4::before {
-  @apply absolute text-sm c-text-400 -left-7 bottom-1;
+  @apply absolute text-sm text-c-400 -left-7 bottom-1;
 }
 
 .bear .markdown h1 {
@@ -91,7 +91,7 @@
 }
 
 .bear .markdown code {
-  @apply text-sm border c-border-300 rounded py-0.5 px-1 c-bg-50;
+  @apply text-sm border border-c-300 rounded py-0.5 px-1 bg-c-50;
 }
 
 .bear .markdown pre {
@@ -103,7 +103,7 @@
 }
 
 .bear .markdown pre div {
-  @apply border c-border-300 rounded;
+  @apply border border-c-300 rounded;
 }
 
 .bear .markdown .token {
@@ -120,7 +120,7 @@
 
 .bear .markdown table td,
 .bear .markdown table th {
-  @apply px-3 py-2 border c-border-300;
+  @apply px-3 py-2 border border-c-300;
 }
 
 .bear .markdown table tr {
diff --git a/src/styles/component.css b/src/styles/component.css
index a3c24074..ca5715a2 100644
--- a/src/styles/component.css
+++ b/src/styles/component.css
@@ -7,15 +7,15 @@
 /* --------- spotlight --------- */
 
 .spotlight {
-  @apply fixed z-20 h-max top-1/4 -mt-16 w-165 -ml-82.5 left-1/2 rounded-lg backdrop-blur-2xl shadow-2xl shadow-black/40 c-bg-100/80 border menu-border;
+  @apply fixed z-20 h-max top-1/4 -mt-16 w-165 -ml-82.5 left-1/2 rounded-lg backdrop-blur-2xl shadow-2xl shadow-black/40 bg-c-100/80 border border-menu;
 }
 
 .spotlight input::placeholder {
-  @apply c-text-black/40;
+  @apply text-c-black/40;
 }
 
 .spotlight .spotlight-type {
-  @apply relative hstack pl-2.5 py-2 text-xs leading-none c-text-500 font-medium;
+  @apply relative hstack pl-2.5 py-2 text-xs leading-none text-c-500 font-medium;
 }
 
 @media (max-width: 639px) {
@@ -67,15 +67,15 @@
 /* --------- slider --------- */
 
 .slider .rangeslider {
-  @apply c-bg-300 w-full h-7 shadow-none m-0 rounded-r-full border-t border-r border-b border-transparent;
+  @apply bg-c-300 w-full h-7 shadow-none m-0 rounded-r-full border-t border-r border-b border-transparent;
 }
 
 .slider .rangeslider .rangeslider__fill {
-  @apply c-bg-100 shadow-none rounded-none;
+  @apply bg-c-100 shadow-none rounded-none;
 }
 
 .slider .rangeslider .rangeslider__handle {
-  @apply border c-border-300 outline-none h-7 w-7 text-white bg-white;
+  @apply border border-c-300 outline-none size-7 text-white bg-white;
   box-shadow: -3px 0px 8px 0px rgba(17, 17, 17, 0.15);
 }
 
@@ -90,31 +90,31 @@
 
 /* The switch - the box around the slider */
 .switch-toggle {
-  @apply relative inline-block h-full w-9.5;
+  @apply relative inline-block h-5.5 w-9.5;
 }
 
 /* Hide default HTML checkbox */
 .switch-toggle input {
-  @apply w-0 h-0 opacity-0;
+  @apply size-0 opacity-0;
 }
 
 /* The slider */
-.slider-toggle {
-  @apply absolute rounded-full bg-gray-400/50 top-0 left-0 right-0 bottom-0 cursor-pointer duration-300;
+.switch-toggle .slider-toggle {
+  @apply absolute rounded-full bg-gray-400/50 inset-0 cursor-pointer duration-300;
 }
 
-.slider-toggle:before {
-  @apply content-[""] absolute rounded-full bg-white bottom-0.5 left-0.5 w-4.5 h-4.5 duration-300;
+.switch-toggle .slider-toggle:before {
+  @apply content-[""] absolute rounded-full bg-white bottom-0.5 left-0.5 size-4.5 duration-300;
 }
 
-input:checked + .slider-toggle {
+.switch-toggle input:checked + .slider-toggle {
   @apply bg-blue-500;
 }
 
-input:checked + .slider-toggle:before {
+.switch-toggle input:checked + .slider-toggle:before {
   @apply translate-x-4;
 }
 
-input:focus + .slider-toggle {
+.switch-toggle input:focus + .slider-toggle {
   box-shadow: 0 0 1px #3b82f6;
 }
diff --git a/src/styles/typora.css b/src/styles/typora.css
index 65c045d2..7f03ddfd 100644
--- a/src/styles/typora.css
+++ b/src/styles/typora.css
@@ -102,7 +102,7 @@
 
 .typora table th,
 .typora table td {
-  @apply border c-border-300 m-0 py-1.5 px3.5;
+  @apply border border-c-300 m-0 py-1.5 px3.5;
 }
 
 .typora table th {
@@ -123,7 +123,7 @@
 
 .typora :not(pre) > code,
 .typora pre {
-  @apply bg-neutral-200/80 dark:bg-gray-700/70 border c-border-300 rounded text-sm;
+  @apply bg-neutral-200/80 dark:bg-gray-700/70 border border-c-300 rounded text-sm;
 }
 
 .typora :not(pre) > code {
diff --git a/unocss.config.ts b/unocss.config.ts
index 1c9b29bd..e502aec3 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -4,7 +4,8 @@ import {
   presetIcons,
   presetUno,
   transformerDirectives,
-  transformerVariantGroup
+  transformerVariantGroup,
+  transformerAttributifyJsx
 } from "unocss";
 
 const colorReg = (prefix: string) => new RegExp("^" + prefix + "-([0-9a-z]+)(/(\\d+))?$");
@@ -33,29 +34,29 @@ export default defineConfig({
   shortcuts: [
     ["flex-center", "flex items-center justify-center"],
     ["hstack", "flex items-center"],
-    ["vstack", "flex justify-center"],
+    ["vstack", "hstack flex-col"],
     ["no-outline", "outline-none focus:outline-none"],
-    [colorReg("c-text"), (v) => colorAttr("text", v)],
-    [colorReg("c-border"), (v) => colorAttr("border", v)],
-    [colorReg("c-bg"), (v) => colorAttr("bg", v)],
+    [colorReg("text-c"), (v) => colorAttr("text", v)],
+    [colorReg("border-c"), (v) => colorAttr("border", v)],
+    [colorReg("bg-c"), (v) => colorAttr("bg", v)],
     ["shadow-menu", "shadow-md shadow-black/25 dark:shadow-black/50"],
-    ["window-btn", "w-3 h-3 text-black rounded-full flex-center no-outline"],
-    ["menu-border", "border-gray-500/50"],
+    ["window-btn", "size-3 text-black rounded-full flex-center no-outline"],
+    ["border-menu", "border-gray-500/50"],
     [
       "menu-box",
-      "fixed top-8.5 c-text-black c-bg-200/90 border menu-border rounded-lg shadow-menu"
+      "fixed top-8.5 text-c-black bg-c-200/90 border border-menu rounded-lg shadow-menu"
     ],
     [
       "safari-btn",
-      "h-6 outline-none focus:outline-none rounded flex-center border c-border-300"
+      "h-6 outline-none focus:outline-none rounded flex-center border border-c-300"
     ],
-    ["cc-btn", "flex-center rounded-full w-8 h-8 text-white bg-blue-500"],
+    ["cc-btn", "flex-center rounded-full size-8 text-white bg-blue-500"],
     [
       "cc-btn-active",
-      "flex-center rounded-full w-8 h-8 c-text-700 bg-gray-400/25 dark:bg-gray-300/25"
+      "flex-center rounded-full size-8 text-c-700 bg-gray-400/25 dark:bg-gray-300/25"
     ],
-    ["cc-text", "text-xs c-text-500"],
-    ["cc-grid", "c-bg-200/80 rounded-xl cc-grid-shadow backdrop-blur-2xl"],
+    ["cc-text", "text-xs text-c-500"],
+    ["cc-grid", "bg-c-200/80 rounded-xl cc-grid-shadow backdrop-blur-2xl"],
     ["battery-level", "absolute rounded-[1px] h-2 top-1/2 -mt-1 ml-0.5 left-0"]
   ],
   rules: [["cc-grid-shadow", { "box-shadow": "0px 1px 5px 0px rgba(0, 0, 0, 0.3)" }]],
@@ -69,5 +70,9 @@ export default defineConfig({
       }
     })
   ],
-  transformers: [transformerDirectives(), transformerVariantGroup()]
+  transformers: [
+    transformerDirectives(),
+    transformerVariantGroup(),
+    transformerAttributifyJsx()
+  ]
 });