refactor: migrate utilites to v4

nodejs · Mar 3, 2025 · e689a4d · e689a4d
1 parent 6966e08
commit e689a4d
Show file tree

Hide file tree

Showing 26 changed files with 61 additions and 62 deletions.
diff --git a/apps/site/components/Common/AlertBox/index.module.css b/apps/site/components/Common/AlertBox/index.module.css
@@ -5,7 +5,7 @@
     flex-row
     items-center
     gap-2
-    rounded
+    rounded-sm
     px-4
     py-3
     text-sm
@@ -33,7 +33,7 @@
   }
 
   .title {
-    @apply rounded-sm
+    @apply rounded-xs
       px-1.5;
   }
 

diff --git a/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css b/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
@@ -5,7 +5,7 @@
     truncate;
 
   &.active {
-    @apply rounded
+    @apply rounded-sm
       bg-green-600
       px-2
       py-1

diff --git a/apps/site/components/Common/Button/index.module.css b/apps/site/components/Common/Button/index.module.css
@@ -27,7 +27,7 @@
   }
 
   &.neutral {
-    @apply rounded
+    @apply rounded-sm
       bg-neutral-900
       text-white
       dark:text-neutral-200;
@@ -47,12 +47,12 @@
   }
 
   &.primary {
-    @apply rounded
+    @apply rounded-sm
       border
       border-green-600
       bg-green-600
       text-white
-      shadow-sm;
+      shadow-xs;
 
     &:hover:not([aria-disabled='true']) {
       @apply border-green-700
@@ -102,7 +102,7 @@
       border-green-600/30
       bg-green-600/10
       text-white
-      shadow-sm;
+      shadow-xs;
 
     &::before {
       @apply bg-gradient-glow-backdrop

diff --git a/apps/site/components/Common/CodeBox/index.module.css b/apps/site/components/Common/CodeBox/index.module.css
@@ -2,7 +2,7 @@
 
 .root {
   @apply w-full
-    rounded
+    rounded-sm
     border
     border-neutral-900
     bg-neutral-950;

diff --git a/apps/site/components/Common/CrossLink/index.module.css b/apps/site/components/Common/CrossLink/index.module.css
@@ -6,7 +6,7 @@
     items-start
     gap-2
     truncate
-    rounded
+    rounded-sm
     border
     border-solid
     border-neutral-300

diff --git a/apps/site/components/Common/LanguageDropDown/index.module.css b/apps/site/components/Common/LanguageDropDown/index.module.css
@@ -19,8 +19,7 @@
   @apply max-h-80
     w-48
     overflow-hidden
-    rounded
-    border
+    rounded-sm border
     border-neutral-200
     bg-white
     shadow-lg
@@ -40,7 +39,7 @@
     text-sm
     font-medium
     text-neutral-800
-    outline-none
+    outline-hidden
     data-[highlighted]:bg-green-600
     data-[highlighted]:text-white
     dark:text-white;

diff --git a/apps/site/components/Common/Notification/index.module.css b/apps/site/components/Common/Notification/index.module.css
@@ -2,7 +2,7 @@
 
 .root {
   @apply m-6
-    rounded
+    rounded-sm
     border
     border-neutral-200
     bg-white

diff --git a/apps/site/components/Common/Pagination/PaginationListItem/index.module.css b/apps/site/components/Common/Pagination/PaginationListItem/index.module.css
@@ -7,7 +7,7 @@
     size-10
     items-center
     justify-center
-    rounded
+    rounded-sm
     px-3
     py-2.5
     text-neutral-800

diff --git a/apps/site/components/Common/Preview/index.module.css b/apps/site/components/Common/Preview/index.module.css
@@ -6,7 +6,7 @@
     flex
     aspect-[1.90/1]
     items-center
-    rounded
+    rounded-sm
     border
     border-neutral-900
     bg-neutral-950;

diff --git a/apps/site/components/Common/Select/index.module.css b/apps/site/components/Common/Select/index.module.css
@@ -15,14 +15,14 @@
   }
 
   .trigger {
-    @apply inline-flex
+    @apply r
+      ounded-sm
+      inline-flex
       h-11
       w-full
       min-w-[17rem]
-      items-center
-      justify-between
+      items-center justify-between
       gap-2
-      rounded
       border
       border-neutral-300
       bg-white
@@ -33,7 +33,7 @@
       font-medium
       text-neutral-900
       shadow-xs
-      outline-none
+      outline-hidden
       focus:border-neutral-500
       focus:ring-1
       focus:ring-neutral-500
@@ -86,7 +86,7 @@
     @apply text-neutral-800
       data-[highlighted]:bg-green-500
       data-[highlighted]:text-white
-      data-[highlighted]:outline-none
+      data-[highlighted]:outline-hidden
       dark:text-neutral-200
       dark:data-[highlighted]:bg-green-600
       dark:data-[highlighted]:text-white;

diff --git a/apps/site/components/Common/Skeleton/index.module.css b/apps/site/components/Common/Skeleton/index.module.css
@@ -10,7 +10,7 @@
     bg-clip-border
     text-transparent
     shadow-none
-    outline-none
+    outline-hidden
     select-none;
 }
 

diff --git a/apps/site/components/Containers/NavBar/NavItem/index.module.css b/apps/site/components/Containers/NavBar/NavItem/index.module.css
@@ -4,7 +4,7 @@
   @apply inline-flex
     items-center
     gap-2
-    rounded
+    rounded-sm
     px-3
     py-2
     motion-safe:transition-colors;

diff --git a/apps/site/components/Containers/Sidebar/SidebarItem/index.module.css b/apps/site/components/Containers/Sidebar/SidebarItem/index.module.css
@@ -28,7 +28,7 @@
 }
 
 .active {
-  @apply rounded
+  @apply rounded-sm
     bg-green-600
     text-white
     dark:text-white;

diff --git a/apps/site/pages/en/about/branding.mdx b/apps/site/pages/en/about/branding.mdx
@@ -66,7 +66,7 @@ Credit to [Angela Angelini](https://www.linkedin.com/in/angeliningl/) for design
         <img
           alt="Node.js Light Stacked Logo"
           src="/static/logos/nodejsStackedLight.svg"
-          className="h-[164px] w-[267px] rounded-sm bg-neutral-950 p-2 dark:bg-transparent"
+          className="h-[164px] w-[267px] rounded-xs bg-neutral-950 p-2 dark:bg-transparent"
           width="267"
           height="164"
         />
@@ -83,7 +83,7 @@ Credit to [Angela Angelini](https://www.linkedin.com/in/angeliningl/) for design
         <img
           alt="Node.js White Stacked Logo"
           src="/static/logos/nodejsStackedWhite.svg"
-          className="rounded-sm bg-neutral-950 p-2 dark:bg-transparent"
+          className="rounded-xs bg-neutral-950 p-2 dark:bg-transparent"
         />
       </td>
     </tr>
@@ -108,7 +108,7 @@ Credit to [Angela Angelini](https://www.linkedin.com/in/angeliningl/) for design
         <img
           alt="White JS Icons"
           src="/static/logos/jsIconWhite.svg"
-          className="height-[80px] mx-auto w-[71px] rounded-sm bg-neutral-950 p-2 dark:bg-transparent"
+          className="height-[80px] mx-auto w-[71px] rounded-xs bg-neutral-950 p-2 dark:bg-transparent"
           width="71"
           height="80"
         />

diff --git a/apps/site/pages/es/about/branding.mdx b/apps/site/pages/es/about/branding.mdx
@@ -48,7 +48,7 @@ Créditos a [Angela Angelini](https://www.linkedin.com/in/angeliningl/) por dise
     </td>
 
     <td>
-      <img alt="Logo Apilado Claro de Node.js" src="/static/logos/nodejsStackedLight.svg" className="h-[164px] w-[267px] rounded-sm bg-neutral-950 p-2 dark:bg-transparent" width="267" height="164" />
+      <img alt="Logo Apilado Claro de Node.js" src="/static/logos/nodejsStackedLight.svg" className="h-[164px] w-[267px] rounded-xs bg-neutral-950 p-2 dark:bg-transparent" width="267" height="164" />
     </td>
 
   </tr>
@@ -59,7 +59,7 @@ Créditos a [Angela Angelini](https://www.linkedin.com/in/angeliningl/) por dise
     </td>
 
     <td>
-      <img alt="Logo Apilado Blanco de Node.js" src="/static/logos/nodejsStackedWhite.svg" className="rounded-sm bg-neutral-950 p-2 dark:bg-transparent" />
+      <img alt="Logo Apilado Blanco de Node.js" src="/static/logos/nodejsStackedWhite.svg" className="rounded-xs bg-neutral-950 p-2 dark:bg-transparent" />
     </td>
 
   </tr>
@@ -76,7 +76,7 @@ Créditos a [Angela Angelini](https://www.linkedin.com/in/angeliningl/) por dise
     </td>
 
     <td>
-      <img alt="Iconos Blanco de JS" src="/static/logos/jsIconWhite.svg" className="height-[80px] mx-auto w-[71px] rounded-sm bg-neutral-950 p-2 dark:bg-transparent" width="71" height="80" />
+      <img alt="Iconos Blanco de JS" src="/static/logos/jsIconWhite.svg" className="height-[80px] mx-auto w-[71px] rounded-xs bg-neutral-950 p-2 dark:bg-transparent" width="71" height="80" />
     </td>
 
   </tr>

diff --git a/apps/site/pages/fa/about/branding.mdx b/apps/site/pages/fa/about/branding.mdx
@@ -42,7 +42,7 @@ layout: about
   </td>
 
   <td>
-    <img alt="لوگو تراکم‌یافته روشن Node.js" src="/static/logos/nodejsStackedLight.svg" className="h-[164px] w-[267px] rounded-sm bg-neutral-950 p-2 dark:bg-transparent" width="267" height="164" />
+    <img alt="لوگو تراکم‌یافته روشن Node.js" src="/static/logos/nodejsStackedLight.svg" className="h-[164px] w-[267px] rounded-xs bg-neutral-950 p-2 dark:bg-transparent" width="267" height="164" />
   </td>
 </tr>
 
@@ -52,7 +52,7 @@ layout: about
   </td>
 
   <td>
-    <img alt="لوگو تراکم‌یافته سفید Node.js" src="/static/logos/nodejsStackedWhite.svg" className="rounded-sm bg-neutral-950 p-2 dark:bg-transparent" />
+    <img alt="لوگو تراکم‌یافته سفید Node.js" src="/static/logos/nodejsStackedWhite.svg" className="rounded-xs bg-neutral-950 p-2 dark:bg-transparent" />
   </td>
 </tr>
 </table>
@@ -66,7 +66,7 @@ layout: about
   </td>
 
   <td>
-    <img alt="آیکون‌های JS سفید" src="/static/logos/jsIconWhite.svg" className="height-[80px] mx-auto w-[71px] rounded-sm bg-neutral-950 p-2 dark:bg-transparent" width="71" height="80" />
+    <img alt="آیکون‌های JS سفید" src="/static/logos/jsIconWhite.svg" className="height-[80px] mx-auto w-[71px] rounded-xs bg-neutral-950 p-2 dark:bg-transparent" width="71" height="80" />
   </td>
 </tr>
 </table>
diff --git a/apps/site/pages/fr/about/branding.mdx b/apps/site/pages/fr/about/branding.mdx
@@ -48,7 +48,7 @@ Crédit à [Angela Angelini](https://www.linkedin.com/in/angeliningl/) pour la c
     </td>
 
     <td>
-      <img alt="Logo empilé clair de Node.js" src="/static/logos/nodejsStackedLight.svg" className="h-[164px] w-[267px] rounded-sm bg-neutral-950 p-2 dark:bg-transparent" width="267" height="164" />
+      <img alt="Logo empilé clair de Node.js" src="/static/logos/nodejsStackedLight.svg" className="h-[164px] w-[267px] rounded-xs bg-neutral-950 p-2 dark:bg-transparent" width="267" height="164" />
     </td>
 
   </tr>
@@ -59,7 +59,7 @@ Crédit à [Angela Angelini](https://www.linkedin.com/in/angeliningl/) pour la c
     </td>
 
     <td>
-      <img alt="Logo empilé blanc de Node.js" src="/static/logos/nodejsStackedWhite.svg" className="rounded-sm bg-neutral-950 p-2 dark:bg-transparent" />
+      <img alt="Logo empilé blanc de Node.js" src="/static/logos/nodejsStackedWhite.svg" className="rounded-xs bg-neutral-950 p-2 dark:bg-transparent" />
     </td>
 
   </tr>
@@ -76,7 +76,7 @@ Crédit à [Angela Angelini](https://www.linkedin.com/in/angeliningl/) pour la c
     </td>
 
     <td>
-      <img alt="Icons JS Blanc" src="/static/logos/jsIconWhite.svg" className="height-[80px] mx-auto w-[71px] rounded-sm bg-neutral-950 p-2 dark:bg-transparent" width="71" height="80" />
+      <img alt="Icons JS Blanc" src="/static/logos/jsIconWhite.svg" className="height-[80px] mx-auto w-[71px] rounded-xs bg-neutral-950 p-2 dark:bg-transparent" width="71" height="80" />
     </td>
 
   </tr>

diff --git a/apps/site/pages/id/about/branding.mdx b/apps/site/pages/id/about/branding.mdx
@@ -48,7 +48,7 @@ Penghargaan kepada [Angela Angelini](https://www.linkedin.com/in/angeliningl/) a
     </td>
 
     <td>
-      <img alt="Logo Terang Bertumpuk Node.js®" src="/static/logos/nodejsStackedLight.svg" className="h-[164px] w-[267px] rounded-sm bg-neutral-950 p-2 dark:bg-transparent" width="267" height="164" />
+      <img alt="Logo Terang Bertumpuk Node.js®" src="/static/logos/nodejsStackedLight.svg" className="h-[164px] w-[267px] rounded-xs bg-neutral-950 p-2 dark:bg-transparent" width="267" height="164" />
     </td>
 
   </tr>
@@ -59,7 +59,7 @@ Penghargaan kepada [Angela Angelini](https://www.linkedin.com/in/angeliningl/) a
     </td>
 
     <td>
-      <img alt="Logo Bertumpuk Putih Node.js" src="/static/logos/nodejsStackedWhite.svg" className="rounded-sm bg-neutral-950 p-2 dark:bg-transparent" />
+      <img alt="Logo Bertumpuk Putih Node.js" src="/static/logos/nodejsStackedWhite.svg" className="rounded-xs bg-neutral-950 p-2 dark:bg-transparent" />
     </td>
 
   </tr>
@@ -76,7 +76,7 @@ Penghargaan kepada [Angela Angelini](https://www.linkedin.com/in/angeliningl/) a
     </td>
 
     <td>
-      <img alt="Ikon JS Putih" src="/static/logos/jsIconWhite.svg" className="height-[80px] mx-auto w-[71px] rounded-sm bg-neutral-950 p-2 dark:bg-transparent" width="71" height="80" />
+      <img alt="Ikon JS Putih" src="/static/logos/jsIconWhite.svg" className="height-[80px] mx-auto w-[71px] rounded-xs bg-neutral-950 p-2 dark:bg-transparent" width="71" height="80" />
     </td>
 
   </tr>

diff --git a/apps/site/pages/ja/about/branding.mdx b/apps/site/pages/ja/about/branding.mdx
@@ -48,7 +48,7 @@ Node.jsのロゴやシンボルマークの許可されている利用方法に
     </td>
 
     <td>
-      <img alt="Node.jsライトスタック型ロゴ" src="/static/logos/nodejsStackedLight.svg" className="h-[164px] w-[267px] rounded-sm bg-neutral-950 p-2 dark:bg-transparent" width="267" height="164" />
+      <img alt="Node.jsライトスタック型ロゴ" src="/static/logos/nodejsStackedLight.svg" className="h-[164px] w-[267px] rounded-xs bg-neutral-950 p-2 dark:bg-transparent" width="267" height="164" />
     </td>
 
   </tr>
@@ -59,7 +59,7 @@ Node.jsのロゴやシンボルマークの許可されている利用方法に
     </td>
 
     <td>
-      <img alt="Node.jsホワイトスタック型ロゴ" src="/static/logos/nodejsStackedWhite.svg" className="rounded-sm bg-neutral-950 p-2 dark:bg-transparent" />
+      <img alt="Node.jsホワイトスタック型ロゴ" src="/static/logos/nodejsStackedWhite.svg" className="rounded-xs bg-neutral-950 p-2 dark:bg-transparent" />
     </td>
 
   </tr>
@@ -76,7 +76,7 @@ Node.jsのロゴやシンボルマークの許可されている利用方法に
     </td>
 
     <td>
-      <img alt="JSアイコンホワイト" src="/static/logos/jsIconWhite.svg" className="height-[80px] mx-auto w-[71px] rounded-sm bg-neutral-950 p-2 dark:bg-transparent" width="71" height="80" />
+      <img alt="JSアイコンホワイト" src="/static/logos/jsIconWhite.svg" className="height-[80px] mx-auto w-[71px] rounded-xs bg-neutral-950 p-2 dark:bg-transparent" width="71" height="80" />
     </td>
 
   </tr>

diff --git a/apps/site/pages/ko/about/branding.mdx b/apps/site/pages/ko/about/branding.mdx
@@ -48,7 +48,7 @@ Node.js® 로고 및 마크의 허용 가능한 사용에 대한 정보는 [상
     </td>
 
     <td>
-      <img alt="Node.js 밝은 세로 로고" src="/static/logos/nodejsStackedLight.svg" className="h-[164px] w-[267px] rounded-sm bg-neutral-950 p-2 dark:bg-transparent" width="267" height="164" />
+      <img alt="Node.js 밝은 세로 로고" src="/static/logos/nodejsStackedLight.svg" className="h-[164px] w-[267px] rounded-xs bg-neutral-950 p-2 dark:bg-transparent" width="267" height="164" />
     </td>
 
   </tr>
@@ -59,7 +59,7 @@ Node.js® 로고 및 마크의 허용 가능한 사용에 대한 정보는 [상
     </td>
 
     <td>
-      <img alt="Node.js 흰색 세로 로고" src="/static/logos/nodejsStackedWhite.svg" className="rounded-sm bg-neutral-950 p-2 dark:bg-transparent" />
+      <img alt="Node.js 흰색 세로 로고" src="/static/logos/nodejsStackedWhite.svg" className="rounded-xs bg-neutral-950 p-2 dark:bg-transparent" />
     </td>
 
   </tr>
@@ -76,7 +76,7 @@ Node.js® 로고 및 마크의 허용 가능한 사용에 대한 정보는 [상
     </td>
 
     <td>
-      <img alt="흰색 JS 아이콘" src="/static/logos/jsIconWhite.svg" className="height-[80px] mx-auto w-[71px] rounded-sm bg-neutral-950 p-2 dark:bg-transparent" width="71" height="80" />
+      <img alt="흰색 JS 아이콘" src="/static/logos/jsIconWhite.svg" className="height-[80px] mx-auto w-[71px] rounded-xs bg-neutral-950 p-2 dark:bg-transparent" width="71" height="80" />
     </td>
 
   </tr>