Upgrade to Tailwind 4

FilecoinFoundationWeb · Feb 10, 2025 · 3c1ba96 · 3c1ba96
1 parent 0dbce65
commit 3c1ba96
Show file tree

Hide file tree

Showing 39 changed files with 2,593 additions and 2,114 deletions.
diff --git a/apps/site/.prettierrc.json b/apps/site/.prettierrc.json
@@ -1,6 +1,8 @@
 {
   "singleQuote": true,
   "semi": false,
+  "tailwindStyleSheet": "./src/app/_styles/globals.css",
+  "tailwindFunctions": ["clsx"],
   "overrides": [
     {
       "files": "*.md",

diff --git a/apps/site/package.json b/apps/site/package.json
@@ -26,11 +26,11 @@
     "@radix-ui/react-popover": "^1.1.4",
     "@sentry/nextjs": "^8.52.0",
     "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/postcss": "^4.0.0",
     "@tailwindcss/typography": "^0.5.15",
     "@tanstack/react-table": "^8.20.6",
     "@vercel/speed-insights": "^1.1.0",
     "airtable": "^0.12.2",
-    "autoprefixer": "^10.4.20",
     "camelcase-keys": "^9.1.3",
     "clsx": "^2.1.1",
     "crypto-js": "^4.2.0",
@@ -60,7 +60,7 @@
     "schema-dts": "^1.1.2",
     "slugify": "^1.6.6",
     "swr": "^2.3.0",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "usehooks-ts": "^3.1.0",
     "zod": "^3.24.1"
   },
@@ -90,8 +90,7 @@
     "husky": "^9.1.7",
     "postcss": "^8.4.41",
     "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.9",
-    "sass": "^1.83.0",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "turbo": "^2.3.3",
     "typescript": "^5.7.2",
     "yaml-loader": "^0.8.1"

diff --git a/apps/site/postcss.config.js b/apps/site/postcss.config.js
@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }
diff --git a/apps/site/src/app/_components/AlternatingImageCard.tsx b/apps/site/src/app/_components/AlternatingImageCard.tsx
@@ -33,13 +33,13 @@ export function AlternatingImageCard({
       <Image
         src={image.data}
         alt={image.alt}
-        className="h-48 flex-shrink-0 rounded-lg object-cover sm:h-64 lg:h-auto lg:w-1/3"
+        className="h-48 shrink-0 rounded-lg object-cover sm:h-64 lg:h-auto lg:w-1/3"
         sizes={buildImageSizeProp({
           startSize: '100vw',
           lg: '33vw',
         })}
       />
-      <div className="flex-grow">
+      <div className="grow">
         <BasicCard>{children}</BasicCard>
       </div>
     </Tag>

diff --git a/apps/site/src/app/_components/BreadCrumbsLayout.tsx b/apps/site/src/app/_components/BreadCrumbsLayout.tsx
@@ -6,7 +6,7 @@ import type { LayoutProps } from '@/layout'
 
 export function BreadCrumbsLayout({ children }: LayoutProps) {
   return (
-    <div className="flex flex-grow flex-col gap-8">
+    <div className="flex grow flex-col gap-8">
       <BreadCrumbs />
       {children}
     </div>

diff --git a/apps/site/src/app/_components/FocusAreaCard.tsx b/apps/site/src/app/_components/FocusAreaCard.tsx
@@ -22,7 +22,7 @@ export function FocusAreaCard({
       <Image
         src={image.data}
         alt={image.alt}
-        className="aspect-video w-full rounded object-cover sm:w-60 sm:shrink-0 md:w-80 lg:w-full"
+        className="aspect-video w-full rounded-sm object-cover sm:w-60 sm:shrink-0 md:w-80 lg:w-full"
         sizes={buildImageSizeProp({
           startSize: '100vw',
           sm: '250px',

diff --git a/apps/site/src/app/_components/Form/FormCheckbox.tsx b/apps/site/src/app/_components/Form/FormCheckbox.tsx
@@ -29,18 +29,18 @@ export function FormCheckbox({
       <Checkbox
         {...rest}
         className={clsx(
-          'group cursor-pointer focus:outline-none',
+          'group cursor-pointer focus:outline-hidden',
           TOUCH_TARGET.touchAreaPadding,
           TOUCH_TARGET.touchAreaOffset,
         )}
       >
         <div
           className={clsx(
             TOUCH_TARGET.visibleElementSize,
-            'rounded bg-brand-100 p-0.5 text-brand-100 hover:bg-brand-200 group-focus:bg-brand-200 group-focus:outline group-focus:outline-1 group-focus:outline-offset-2 group-focus:outline-brand-100 group-data-[disabled]:cursor-not-allowed group-data-[checked]:bg-brand-400 hover:group-data-[checked]:bg-brand-500',
+            'rounded-sm bg-brand-100 p-0.5 text-brand-100 hover:bg-brand-200 group-focus:bg-brand-200 group-focus:outline group-focus:outline-1 group-focus:outline-offset-2 group-focus:outline-brand-100 group-data-disabled:cursor-not-allowed group-data-checked:bg-brand-400 group-data-checked:hover:bg-brand-500',
           )}
         >
-          <span className="hidden group-data-[checked]:block">
+          <span className="hidden group-data-checked:block">
             <Icon component={Check} size={16} weight="bold" />
           </span>
         </div>

diff --git a/apps/site/src/app/_components/Form/FormInput.tsx b/apps/site/src/app/_components/Form/FormInput.tsx
@@ -30,7 +30,7 @@ export function FormInput({
         {...rest}
         invalid={Boolean(error)}
         className={clsx(
-          'block w-full rounded-lg border border-brand-300 bg-brand-800 px-3.5 py-3 focus:brand-outline placeholder:text-brand-300 hover:border-brand-400 placeholder:hover:text-brand-400 focus:text-brand-100 placeholder:focus:text-brand-100 data-[disabled]:cursor-not-allowed',
+          'block w-full rounded-lg border border-brand-300 bg-brand-800 px-3.5 py-3 focus:brand-outline placeholder:text-brand-300 hover:border-brand-400 hover:placeholder:text-brand-400 focus:text-brand-100 focus:placeholder:text-brand-100 data-disabled:cursor-not-allowed',
           error && 'border-red-400',
         )}
       />

diff --git a/apps/site/src/app/_components/Form/FormTextarea/FormTextarea.tsx b/apps/site/src/app/_components/Form/FormTextarea/FormTextarea.tsx
@@ -52,7 +52,7 @@ export function FormTextarea({
         {...rest}
         invalid={Boolean(error)}
         className={clsx(
-          'block min-h-44 w-full rounded-lg border border-brand-300 bg-brand-800 px-3.5 py-3 focus:brand-outline placeholder:text-brand-300 hover:border-brand-400 placeholder:hover:text-brand-400 focus:text-brand-100 placeholder:focus:text-brand-100 data-[disabled]:cursor-not-allowed',
+          'block min-h-44 w-full rounded-lg border border-brand-300 bg-brand-800 px-3.5 py-3 focus:brand-outline placeholder:text-brand-300 hover:border-brand-400 hover:placeholder:text-brand-400 focus:text-brand-100 focus:placeholder:text-brand-100 data-disabled:cursor-not-allowed',
           error && 'border-red-400',
         )}
       />

diff --git a/apps/site/src/app/_components/KeyMemberCard.tsx b/apps/site/src/app/_components/KeyMemberCard.tsx
@@ -62,10 +62,10 @@ function KeyMemberImage({
     alt: `Photo of ${name}`,
     quality: 100,
     sizes: '150px',
-    className: 'rounded object-cover',
+    className: 'rounded-sm object-cover',
   }
 
-  const containerClass = 'aspect-[3/4] w-32 shrink-0'
+  const containerClass = 'aspect-3/4 w-32 shrink-0'
   const isStaticImage = typeof image === 'object'
 
   if (isStaticImage) {

diff --git a/apps/site/src/app/_components/Listbox/ListboxOption.tsx b/apps/site/src/app/_components/Listbox/ListboxOption.tsx
@@ -26,7 +26,7 @@ export function ListboxOption<Value extends OptionType>({
       as={as}
       value={option}
       disabled={option.disabled}
-      className="group flex cursor-default items-center justify-between gap-12 px-5 py-2 data-[disabled]:cursor-not-allowed ui-active:bg-brand-500"
+      className="group flex cursor-default items-center justify-between gap-12 px-5 py-2 data-disabled:cursor-not-allowed ui-active:bg-brand-500"
     >
       <span>
         {option.name}
@@ -35,7 +35,7 @@ export function ListboxOption<Value extends OptionType>({
         )}
       </span>
 
-      <span className="invisible mb-px group-data-[selected]:visible">
+      <span className="invisible mb-px group-data-selected:visible">
         <Icon component={Check} size={20} />
       </span>
     </HeadlessUIListboxOption>

diff --git a/apps/site/src/app/_components/MarkdownContent.tsx b/apps/site/src/app/_components/MarkdownContent.tsx
@@ -13,8 +13,6 @@ import { buildImageSizeProp } from '@/utils/buildImageSizeProp'
 
 import { SmartTextLink } from '@/components/TextLink/SmartTextLink'
 
-import styles from '@/security/maturity-model/components/TableOfContents.module.scss'
-
 type PluggableList = Parameters<typeof ReactMarkdown>[0]['rehypePlugins']
 
 export type MarkdownContentProps = {
@@ -113,7 +111,7 @@ function addTableOfContentsHeader(nodeTree: HtmlElementNode) {
   const headerNode = {
     type: 'element',
     tagName: 'p',
-    properties: { className: styles.tableOfContentsHeader },
+    properties: { className: 'toc-header' },
     children: [{ type: 'text', value: 'Table of Contents' }],
   }
 

diff --git a/apps/site/src/app/_components/Navigation/MobileNavigation/LinkItem.tsx b/apps/site/src/app/_components/Navigation/MobileNavigation/LinkItem.tsx
@@ -10,7 +10,6 @@ import { isExternalLink } from '@/utils/linkUtils'
 
 import { BaseLink } from '@/components/BaseLink'
 import { Icon } from '@/components/Icon'
-import styles from '@/components/TextLink/TextLink.module.scss'
 
 export type LinkItemProps = {
   label: string
@@ -25,16 +24,12 @@ export function LinkItem({ label, href, nested, setOpen }: LinkItemProps) {
     nested && 'ml-6',
     isExternal && 'inline-flex items-center gap-1',
   )
-  const linkStyles = clsx(
-    styles.base,
-    "relative before:absolute before:inset-0 before:-m-3.5 before:content-['']",
-  )
 
   return (
     <li className={containerStyles}>
       <BaseLink
         href={href}
-        className={linkStyles}
+        className="text-link relative before:absolute before:inset-0 before:-m-3.5 before:content-['']"
         onClick={() => setOpen(false)}
       >
         {label}

diff --git a/apps/site/src/app/_components/Navigation/MobileNavigation/MobileNavigation.tsx b/apps/site/src/app/_components/Navigation/MobileNavigation/MobileNavigation.tsx
@@ -32,7 +32,7 @@ export function MobileNavigation() {
         <div className="flex flex-col gap-12 px-6 py-8">
           <div className="flex items-center justify-between">
             <Link
-              className="flex-shrink-0 focus:brand-outline"
+              className="shrink-0 focus:brand-outline"
               href={PATHS.HOME.path}
               aria-label="Go to homepage"
               onClick={() => setOpen(false)}

diff --git a/apps/site/src/app/_components/Navigation/Navigation.tsx b/apps/site/src/app/_components/Navigation/Navigation.tsx
@@ -11,7 +11,7 @@ export function Navigation() {
   return (
     <nav className="mb-6 flex justify-between gap-12 lg:items-center">
       <Link
-        className="flex-shrink-0 focus:brand-outline"
+        className="shrink-0 focus:brand-outline"
         href={PATHS.HOME.path}
         aria-label="Go to homepage"
       >

diff --git a/apps/site/src/app/_components/NavigationPopover.tsx b/apps/site/src/app/_components/NavigationPopover.tsx
@@ -34,7 +34,7 @@ export function NavigationPopover({
       </PopoverButton>
       <PopoverPanel
         transition
-        className="z-10 transition duration-200 ease-out data-[closed]:translate-y-1 data-[open]:translate-y-0 data-[closed]:opacity-0 data-[open]:opacity-100"
+        className="z-10 transition duration-200 ease-out data-closed:translate-y-1 data-open:translate-y-0 data-closed:opacity-0 data-open:opacity-100"
         anchor={{
           to: 'bottom',
           gap: SPACE_BETWEEN_PANEL_AND_BUTTON,

diff --git a/apps/site/src/app/_components/Pagination.tsx b/apps/site/src/app/_components/Pagination.tsx
@@ -84,7 +84,7 @@ export function Pagination({
           aria-disabled={!canGoBack}
           disabled={!canGoBack}
           className={clsx(
-            'flex items-center gap-x-1.5 rounded bg-brand-300 p-1 px-2 transition',
+            'flex items-center gap-x-1.5 rounded-sm bg-brand-300 p-1 px-2 transition',
             canGoBack
               ? 'hover:bg-brand-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white'
               : 'cursor-not-allowed',
@@ -111,7 +111,7 @@ export function Pagination({
               <button
                 aria-label={`Go to page ${item}`}
                 className={clsx(
-                  'h-full w-full rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-white',
+                  'h-full w-full rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-white',
                   item === currentPage
                     ? 'bg-brand-800 text-brand-100'
                     : 'bg-brand-300 text-brand-700 hover:bg-brand-400',
@@ -139,7 +139,7 @@ export function Pagination({
           aria-disabled={!canGoForward}
           disabled={!canGoForward}
           className={clsx(
-            'flex items-center gap-x-1.5 rounded bg-brand-300 p-1 px-2 transition',
+            'flex items-center gap-x-1.5 rounded-sm bg-brand-300 p-1 px-2 transition',
             canGoForward
               ? 'hover:bg-brand-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white'
               : 'cursor-not-allowed',

diff --git a/apps/site/src/app/_components/SearchInput.tsx b/apps/site/src/app/_components/SearchInput.tsx
@@ -14,7 +14,7 @@ export function SearchInput({ query, onChange }: SearchInputProps) {
       <Label className="sr-only">Search</Label>
       <div className="relative">
         <Input
-          className="peer form-input block w-full rounded-lg border border-brand-300 bg-brand-800 px-11 py-3 focus:brand-outline placeholder:text-brand-300 hover:border-brand-400 placeholder:hover:text-brand-400 focus:text-brand-100 placeholder:focus:text-brand-100 [&::-webkit-search-cancel-button]:appearance-none"
+          className="peer form-input block w-full rounded-lg border border-brand-300 bg-brand-800 px-11 py-3 focus:brand-outline placeholder:text-brand-300 hover:border-brand-400 hover:placeholder:text-brand-400 focus:text-brand-100 focus:placeholder:text-brand-100 [&::-webkit-search-cancel-button]:appearance-none"
           placeholder="Search"
           type="search"
           value={query}
@@ -25,7 +25,7 @@ export function SearchInput({ query, onChange }: SearchInputProps) {
         </div>
         {query && (
           <Button
-            className="absolute right-1 top-1 flex size-[42px] items-center justify-center rounded text-brand-300 focus:brand-outline peer-hover:text-brand-400 peer-focus:text-brand-100"
+            className="absolute right-1 top-1 flex size-[42px] items-center justify-center rounded-sm text-brand-300 focus:brand-outline peer-hover:text-brand-400 peer-focus:text-brand-100"
             aria-label="Clear search input"
             onClick={() => onChange('')}
           >

diff --git a/apps/site/src/app/_components/StatisticCard.tsx b/apps/site/src/app/_components/StatisticCard.tsx
@@ -5,7 +5,7 @@ import type { StatisticData } from '@/orbit/data/statisticsData'
 export function StatisticCard({ icon, value, description }: StatisticData) {
   return (
     <li className="flex min-h-32 rounded-lg border border-brand-300 p-1">
-      <figure className="grid w-1/3 place-items-center rounded bg-brand-500">
+      <figure className="grid w-1/3 place-items-center rounded-sm bg-brand-500">
         <Icon component={icon} color="brand-200" size={40} />
       </figure>
 

diff --git a/apps/site/src/app/_components/Table/Table.css b/apps/site/src/app/_components/Table/Table.css
@@ -0,0 +1,80 @@
+.table-container {
+  width: 100%;
+  overflow-x: auto;
+  border-radius: 0.5rem;
+
+  &:focus {
+    outline: 2px solid var(--brand-outline-color);
+  }
+
+  &[data-freeze-header] {
+    max-height: 100vh;
+
+    thead td,
+    thead th {
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      background: inherit;
+    }
+  }
+
+  &[data-freeze-column] {
+    td:first-child,
+    th:first-child {
+      position: sticky;
+      left: 0;
+      z-index: 10;
+      background: inherit;
+    }
+  }
+
+  &[data-freeze-header][data-freeze-column] {
+    thead th:first-child {
+      z-index: 20;
+    }
+  }
+}
+
+.table {
+  isolation: isolate;
+  height: 100%;
+  min-width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  tr {
+    height: 52px;
+    background-color: var(--color-brand-800);
+  }
+
+  tbody tr {
+    &:nth-child(odd) {
+      background-color: var(--color-brand-700);
+    }
+
+    &:nth-child(even) {
+      background-color: var(--color-brand-800);
+    }
+  }
+
+  td,
+  th {
+    padding-inline: 1.25rem;
+    text-align: left;
+    font-weight: normal;
+    white-space: nowrap;
+
+    &:first-child {
+      padding-left: 2.5rem;
+    }
+
+    &:last-child {
+      padding-right: 2.5rem;
+    }
+  }
+
+  thead th {
+    border-bottom: 1px solid var(--color-brand-500);
+  }
+}