From 081599c32eb448646ee376ed1cc935113faf2215 Mon Sep 17 00:00:00 2001
From: David Crespo <david-crespo@users.noreply.github.com>
Date: Thu, 5 Dec 2024 12:32:34 -0600
Subject: [PATCH] chore: Convert tailwind config to typescript file (#2599)

* convert tailwind config to typescript file

* try design-system canary that fixes everything

* upgrade to non-canary design-system, fix import
---
 package-lock.json                        |  9 ++++---
 package.json                             |  2 +-
 tailwind.config.js => tailwind.config.ts | 33 +++++++-----------------
 3 files changed, 16 insertions(+), 28 deletions(-)
 rename tailwind.config.js => tailwind.config.ts (72%)

diff --git a/package-lock.json b/package-lock.json
index 617fee5ee..6af516841 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
       "dependencies": {
         "@floating-ui/react": "^0.26.23",
         "@headlessui/react": "^2.1.8",
-        "@oxide/design-system": "^1.7.2",
+        "@oxide/design-system": "^1.7.3",
         "@radix-ui/react-accordion": "^1.2.0",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-focus-guards": "1.0.1",
@@ -1725,9 +1725,10 @@
       "license": "MIT"
     },
     "node_modules/@oxide/design-system": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/@oxide/design-system/-/design-system-1.7.2.tgz",
-      "integrity": "sha512-irP+7mcZ0Mx0SQ50NcnVbdUQqqOYcqArmWGbYzEas0JnQz7hr0LSm7oUpnyDhJO3GwtUV3n2XUjmCjLgeWR1xA==",
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@oxide/design-system/-/design-system-1.7.3.tgz",
+      "integrity": "sha512-Rzl83vWFBjrXqNvNup44klI1SfLcpVXVad8TYgikD2AcvASrt8YRFCy4vw0gQFlWIGHhPCHvbgrt+CGjYi8awg==",
+      "license": "MPL 2.0",
       "dependencies": {
         "@floating-ui/react": "^0.25.1",
         "@headlessui/react": "^1.7.17",
diff --git a/package.json b/package.json
index 28614f383..e37f770ca 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.23",
     "@headlessui/react": "^2.1.8",
-    "@oxide/design-system": "^1.7.2",
+    "@oxide/design-system": "^1.7.3",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-focus-guards": "1.0.1",
diff --git a/tailwind.config.js b/tailwind.config.ts
similarity index 72%
rename from tailwind.config.js
rename to tailwind.config.ts
index 634586b46..4203962af 100644
--- a/tailwind.config.js
+++ b/tailwind.config.ts
@@ -6,20 +6,17 @@
  * Copyright Oxide Computer Company
  */
 
-// @ts-check
+import { type Config } from 'tailwindcss'
+import plugin from 'tailwindcss/plugin'
 
-/** @type {import('tailwindcss/lib/util/createPlugin').default} */
-// @ts-expect-error
-const plugin = require('tailwindcss/plugin')
-const {
-  textUtilities,
-  colorUtilities,
+import {
   borderRadiusTokens,
+  colorUtilities,
   elevationUtilities,
-} = require('@oxide/design-system/styles/dist/tailwind-tokens.js')
+  textUtilities,
+} from '@oxide/design-system/styles/dist/tailwind-tokens.ts'
 
-/** @type {import('tailwindcss/tailwind-config').TailwindConfig} */
-module.exports = {
+export default {
   corePlugins: {
     fontFamily: false,
     fontSize: false,
@@ -57,7 +54,7 @@ module.exports = {
       },
     },
     borderRadius: {
-      none: 0,
+      none: '0',
       ...borderRadiusTokens,
     },
     colors: {
@@ -66,23 +63,13 @@ module.exports = {
     },
   },
   plugins: [
-    plugin(({ addVariant, addUtilities, variants }) => {
+    plugin(({ addVariant, addUtilities }) => {
       addVariant('children', '& > *')
       addVariant('selected', '.is-selected &')
       addVariant('disabled', ['&.visually-disabled', '&:disabled'])
-      addUtilities(
-        Array.from({ length: 12 }, (_, i) => i)
-          .map((i) => ({
-            [`.grid-col-${i}`]: {
-              'grid-column': `${i}`,
-            },
-          }))
-          .reduce((p, c) => ({ ...p, ...c }), {}),
-        variants
-      )
       addUtilities(textUtilities)
       addUtilities(colorUtilities)
       addUtilities(elevationUtilities)
     }),
   ],
-}
+} satisfies Config