Added dark/light theme switching support to AddressInput and AmountIn…

…put components using @radix-ui/colors and Tailwind.

packages/kit/package.json

@@ -125,6 +125,7 @@
     "@mysten/sui": "^1.18.0",
     "@mysten/suins": "^0.4.2",
     "@mysten/wallet-standard": "^0.13.20",
+    "@radix-ui/colors": "^3.0.0",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "@tanstack/react-query": "^5.62.16",
@@ -174,5 +175,5 @@
   },
   "bugs": {
     "url": "https://github.com/suiware/kit/issues"
-  } 
+  }
 }

packages/kit/src/components/AddressInput.tsx

@@ -4,6 +4,7 @@ import debounce from 'lodash.debounce'
 import { ChangeEvent, FC, useCallback, useEffect, useState } from 'react'
 import { resolveSuinsName } from '~~/helpers/suins'
 
+
 const DEBOUNCE_DELAY = 500
 
 export interface IAddressInput {

packages/kit/src/styles/main.css

@@ -15,13 +15,26 @@
   .sk-address-input, .sk-amount-input {
     @apply flex flex-col gap-1;
     & input {
-      @apply w-full rounded-lg border px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500 border-gray-300;
+
+      @apply w-full rounded-lg border px-3 py-1.5 
+             border-slate3 bg-slate1 text-slate12
+             focus:outline-none focus:ring-2 focus:ring-blue7
+             dark:border-slateDark3 dark:bg-slateDark1 dark:text-slateDark12;
+      &:hover {
+        @apply border-slate7
+               dark:border-slateDark7;
+      }
+      &:focus {
+        @apply border-blue7 dark:border-blueDark7 dark:ring-blueDark7;
+      }
       &.error {
-        @apply border-red-500 focus:ring-red-500;
+        @apply border-red7 bg-red3 focus:ring-red7
+               dark:border-redDark7 dark:bg-redDark3 dark:ring-redDark7;
       }
     }
     & span {
-      @apply text-sm text-red-500;
+      @apply text-sm text-red7
+             dark:text-redDark7;
     }
   }
 }

packages/kit/tailwind.config.mjs

@@ -1,16 +1,56 @@
+import {
+  blue,
+  blueDark,
+  red,
+  redDark,
+  slate,
+  slateDark,
+} from '@radix-ui/colors'
+
+/**
+ * Convert keys of the given object from "slate1" to "slateDark1".
+ *
+ * @param {object} obj
+ * @param {string} colorName
+ * @returns
+ */
+const prefixDarkColors = (obj, colorName) => {
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    // Extract just the number from the key
+    const numberKey = key.replace(/^[a-zA-Z]+/, '')
+    acc[`${colorName}Dark${numberKey}`] = value
+    return acc
+  }, {})
+}
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./src/**/*.{ts,tsx}",
+  // Support multiple approaches for switching between light and dark mode.
+  darkMode: [
+    'variant',
+    [
+      '@media (prefers-color-scheme: dark) { &:not(.light *) }',
+      '&:is(.dark *)',
+    ],
   ],
+  content: ['./src/**/*.{ts,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        ...slate,
+        ...blue,
+        ...red,
+        ...prefixDarkColors(slateDark, 'slate'),
+        ...prefixDarkColors(blueDark, 'blue'),
+        ...prefixDarkColors(redDark, 'red'),
+      },
+    },
   },
   plugins: [],
   corePlugins: {
     preflight: false,
   },
   experimental: {
     optimizeUniversalDefaults: true,
-  }
+  },
 }