From e689a4d0090e5a2bd52734b0fd4a76442f1e9090 Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Mon, 3 Mar 2025 02:43:29 +0000 Subject: [PATCH] refactor: migrate utilites to v4 --- .../site/components/Common/AlertBox/index.module.css | 4 ++-- .../Breadcrumbs/BreadcrumbLink/index.module.css | 2 +- apps/site/components/Common/Button/index.module.css | 8 ++++---- apps/site/components/Common/CodeBox/index.module.css | 2 +- .../components/Common/CrossLink/index.module.css | 2 +- .../Common/LanguageDropDown/index.module.css | 5 ++--- .../components/Common/Notification/index.module.css | 2 +- .../Pagination/PaginationListItem/index.module.css | 2 +- apps/site/components/Common/Preview/index.module.css | 2 +- apps/site/components/Common/Select/index.module.css | 12 ++++++------ .../site/components/Common/Skeleton/index.module.css | 2 +- .../Containers/NavBar/NavItem/index.module.css | 2 +- .../Containers/Sidebar/SidebarItem/index.module.css | 2 +- apps/site/pages/en/about/branding.mdx | 6 +++--- apps/site/pages/es/about/branding.mdx | 6 +++--- apps/site/pages/fa/about/branding.mdx | 6 +++--- apps/site/pages/fr/about/branding.mdx | 6 +++--- apps/site/pages/id/about/branding.mdx | 6 +++--- apps/site/pages/ja/about/branding.mdx | 6 +++--- apps/site/pages/ko/about/branding.mdx | 6 +++--- apps/site/pages/pt/about/branding.mdx | 6 +++--- apps/site/pages/tr/about/branding.mdx | 6 +++--- apps/site/pages/uk/about/branding.mdx | 6 +++--- apps/site/pages/zh-cn/about/branding.mdx | 6 +++--- apps/site/pages/zh-tw/about/branding.mdx | 6 +++--- apps/site/styles/markdown.css | 4 ++-- 26 files changed, 61 insertions(+), 62 deletions(-) diff --git a/apps/site/components/Common/AlertBox/index.module.css b/apps/site/components/Common/AlertBox/index.module.css index e6604ddeeea99..1bc1ee6f48316 100644 --- 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 index 07fd2161a9878..457ca3bed841d 100644 --- 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 index 00c1d3883e3d0..d69cec213a6c1 100644 --- 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 index d989ca87e3a6a..885b185e0aa4b 100644 --- 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 index 7928a73e12009..84d0831c81288 100644 --- 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 index 66dd703d8d206..40e1a4b82b1c3 100644 --- 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 index 52016aa60fcc1..f2c2e5de40ab1 100644 --- 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 index 9476f41992fc4..9b64c72cf5dfe 100644 --- 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 index 37dbed25194ae..9e06cd44cb829 100644 --- 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 index 638404fc39d4c..e8f2ce47cf8ea 100644 --- 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 index 89c6b060fdebc..04d3a89548e02 100644 --- 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 index 639ae8dde0ac0..dab0478498032 100644 --- 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 index 5ad6ebbd364e7..dd4e874291cef 100644 --- 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 index 164988f98e4bf..0480df20afa9b 100644 --- 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 Node.js Light Stacked Logo @@ -83,7 +83,7 @@ Credit to [Angela Angelini](https://www.linkedin.com/in/angeliningl/) for design Node.js White Stacked Logo @@ -108,7 +108,7 @@ Credit to [Angela Angelini](https://www.linkedin.com/in/angeliningl/) for design White JS Icons diff --git a/apps/site/pages/es/about/branding.mdx b/apps/site/pages/es/about/branding.mdx index d3d7023e70b24..f508450ce3c18 100644 --- 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 - Logo Apilado Claro de Node.js + Logo Apilado Claro de Node.js @@ -59,7 +59,7 @@ Créditos a [Angela Angelini](https://www.linkedin.com/in/angeliningl/) por dise - Logo Apilado Blanco de Node.js + Logo Apilado Blanco de Node.js @@ -76,7 +76,7 @@ Créditos a [Angela Angelini](https://www.linkedin.com/in/angeliningl/) por dise - Iconos Blanco de JS + Iconos Blanco de JS diff --git a/apps/site/pages/fa/about/branding.mdx b/apps/site/pages/fa/about/branding.mdx index 82c3c632893c0..6106a9fc20a02 100644 --- a/apps/site/pages/fa/about/branding.mdx +++ b/apps/site/pages/fa/about/branding.mdx @@ -42,7 +42,7 @@ layout: about - لوگو تراکم‌یافته روشن Node.js + لوگو تراکم‌یافته روشن Node.js @@ -52,7 +52,7 @@ layout: about - لوگو تراکم‌یافته سفید Node.js + لوگو تراکم‌یافته سفید Node.js @@ -66,7 +66,7 @@ layout: about - آیکون‌های JS سفید + آیکون‌های JS سفید diff --git a/apps/site/pages/fr/about/branding.mdx b/apps/site/pages/fr/about/branding.mdx index 5fd4e7ee46947..464ad2cc233b4 100644 --- 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 - Logo empilé clair de Node.js + Logo empilé clair de Node.js @@ -59,7 +59,7 @@ Crédit à [Angela Angelini](https://www.linkedin.com/in/angeliningl/) pour la c - Logo empilé blanc de Node.js + Logo empilé blanc de Node.js @@ -76,7 +76,7 @@ Crédit à [Angela Angelini](https://www.linkedin.com/in/angeliningl/) pour la c - Icons JS Blanc + Icons JS Blanc diff --git a/apps/site/pages/id/about/branding.mdx b/apps/site/pages/id/about/branding.mdx index fb42878faee68..5102b01e05d3a 100644 --- 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 - Logo Terang Bertumpuk Node.js® + Logo Terang Bertumpuk Node.js® @@ -59,7 +59,7 @@ Penghargaan kepada [Angela Angelini](https://www.linkedin.com/in/angeliningl/) a - Logo Bertumpuk Putih Node.js + Logo Bertumpuk Putih Node.js @@ -76,7 +76,7 @@ Penghargaan kepada [Angela Angelini](https://www.linkedin.com/in/angeliningl/) a - Ikon JS Putih + Ikon JS Putih diff --git a/apps/site/pages/ja/about/branding.mdx b/apps/site/pages/ja/about/branding.mdx index d719926a22262..fe398b2f89dd3 100644 --- a/apps/site/pages/ja/about/branding.mdx +++ b/apps/site/pages/ja/about/branding.mdx @@ -48,7 +48,7 @@ Node.jsのロゴやシンボルマークの許可されている利用方法に - Node.jsライトスタック型ロゴ + Node.jsライトスタック型ロゴ @@ -59,7 +59,7 @@ Node.jsのロゴやシンボルマークの許可されている利用方法に - Node.jsホワイトスタック型ロゴ + Node.jsホワイトスタック型ロゴ @@ -76,7 +76,7 @@ Node.jsのロゴやシンボルマークの許可されている利用方法に - JSアイコンホワイト + JSアイコンホワイト diff --git a/apps/site/pages/ko/about/branding.mdx b/apps/site/pages/ko/about/branding.mdx index 98a99884f7c84..9aaa723ebd0f2 100644 --- a/apps/site/pages/ko/about/branding.mdx +++ b/apps/site/pages/ko/about/branding.mdx @@ -48,7 +48,7 @@ Node.js® 로고 및 마크의 허용 가능한 사용에 대한 정보는 [상 - Node.js 밝은 세로 로고 + Node.js 밝은 세로 로고 @@ -59,7 +59,7 @@ Node.js® 로고 및 마크의 허용 가능한 사용에 대한 정보는 [상 - Node.js 흰색 세로 로고 + Node.js 흰색 세로 로고 @@ -76,7 +76,7 @@ Node.js® 로고 및 마크의 허용 가능한 사용에 대한 정보는 [상 - 흰색 JS 아이콘 + 흰색 JS 아이콘 diff --git a/apps/site/pages/pt/about/branding.mdx b/apps/site/pages/pt/about/branding.mdx index 0e13c1059e342..4b88968037682 100644 --- a/apps/site/pages/pt/about/branding.mdx +++ b/apps/site/pages/pt/about/branding.mdx @@ -48,7 +48,7 @@ Crédito a [@Ang_ngl on X](https://x.com/Ang_ngl) por desenhar e contribuir com - Logótipo Claro Empilhado da Node.js + Logótipo Claro Empilhado da Node.js @@ -59,7 +59,7 @@ Crédito a [@Ang_ngl on X](https://x.com/Ang_ngl) por desenhar e contribuir com - Logótipo Empilhado Branco da Node.js + Logótipo Empilhado Branco da Node.js @@ -76,7 +76,7 @@ Crédito a [@Ang_ngl on X](https://x.com/Ang_ngl) por desenhar e contribuir com - Ícones da JS Branco + Ícones da JS Branco diff --git a/apps/site/pages/tr/about/branding.mdx b/apps/site/pages/tr/about/branding.mdx index d90bffb7e73c8..ce5b407ab0b4d 100644 --- a/apps/site/pages/tr/about/branding.mdx +++ b/apps/site/pages/tr/about/branding.mdx @@ -48,7 +48,7 @@ Roket Kaplumbağayı tasarlayıp katkıda bulunduğu için [X'de @Ang_ngl](https - Node.js Aydınlık Dikey Logo + Node.js Aydınlık Dikey Logo @@ -59,7 +59,7 @@ Roket Kaplumbağayı tasarlayıp katkıda bulunduğu için [X'de @Ang_ngl](https - Node.js Beyaz Dikey Logo + Node.js Beyaz Dikey Logo @@ -76,7 +76,7 @@ Roket Kaplumbağayı tasarlayıp katkıda bulunduğu için [X'de @Ang_ngl](https - Beyaz JS Simgeleri + Beyaz JS Simgeleri diff --git a/apps/site/pages/uk/about/branding.mdx b/apps/site/pages/uk/about/branding.mdx index d396267d3699b..b9c322802fd5f 100644 --- a/apps/site/pages/uk/about/branding.mdx +++ b/apps/site/pages/uk/about/branding.mdx @@ -48,7 +48,7 @@ layout: about - Світлий складений логотип Node.js® + Світлий складений логотип Node.js® @@ -59,7 +59,7 @@ layout: about - Білий складений логотип Node.js® + Білий складений логотип Node.js® @@ -76,7 +76,7 @@ layout: about - Білий значок JS + Білий значок JS diff --git a/apps/site/pages/zh-cn/about/branding.mdx b/apps/site/pages/zh-cn/about/branding.mdx index 8f5bb18d42dc4..787e12da75b4a 100644 --- a/apps/site/pages/zh-cn/about/branding.mdx +++ b/apps/site/pages/zh-cn/about/branding.mdx @@ -42,7 +42,7 @@ Node.js 的品牌化 - Node.js 亮色堆叠形式 Logo + Node.js 亮色堆叠形式 Logo @@ -52,7 +52,7 @@ Node.js 的品牌化 - Node.js 白色堆叠形式 Logo + Node.js 白色堆叠形式 Logo @@ -66,7 +66,7 @@ Node.js 的品牌化 - 白色 JS 图标 + 白色 JS 图标 diff --git a/apps/site/pages/zh-tw/about/branding.mdx b/apps/site/pages/zh-tw/about/branding.mdx index f5c4024ed1ebe..11beabae534cb 100644 --- a/apps/site/pages/zh-tw/about/branding.mdx +++ b/apps/site/pages/zh-tw/about/branding.mdx @@ -42,7 +42,7 @@ Node.js 的品牌形象 - Node.js® 亮色堆疊標誌 + Node.js® 亮色堆疊標誌 @@ -52,7 +52,7 @@ Node.js 的品牌形象 - Node.js® 白色堆疊標誌 + Node.js® 白色堆疊標誌 @@ -66,7 +66,7 @@ Node.js 的品牌形象 - 白色 JS 圖示 + 白色 JS 圖示 diff --git a/apps/site/styles/markdown.css b/apps/site/styles/markdown.css index 493fe2baaa7b2..90545458cbbce 100644 --- a/apps/site/styles/markdown.css +++ b/apps/site/styles/markdown.css @@ -60,7 +60,7 @@ main { code { @apply font-ibm-plex-mono - rounded-sm + rounded-xs bg-neutral-100 px-1 text-base @@ -130,7 +130,7 @@ main { w-full border-separate border-spacing-0 - rounded-sm + rounded-xs border border-neutral-200 text-left