fix: border color

Signed-off-by: Innei <i@innei.in>

cssAsPlugin.js

@@ -0,0 +1,23 @@
+// https://github.com/tailwindlabs/tailwindcss-intellisense/issues/227#issuecomment-1462034856
+// cssAsPlugin.js
+const postcss = require('postcss')
+const postcssJs = require('postcss-js')
+const { readFileSync } = require('fs')
+
+require.extensions['.css'] = function (module, filename) {
+  module.exports = ({ addBase, addComponents, addUtilities }) => {
+    const css = readFileSync(filename, 'utf8')
+    const root = postcss.parse(css)
+    const jss = postcssJs.objectify(root)
+
+    if ('@layer base' in jss) {
+      addBase(jss['@layer base'])
+    }
+    if ('@layer components' in jss) {
+      addComponents(jss['@layer components'])
+    }
+    if ('@layer utilities' in jss) {
+      addUtilities(jss['@layer utilities'])
+    }
+  }
+}

package.json

@@ -149,6 +149,7 @@
     "lint-staged": "15.2.2",
     "postcss": "8.4.38",
     "postcss-import": "16.1.0",
+    "postcss-js": "4.0.1",
     "postcss-nested": "6.0.1",
     "postcss-preset-env": "9.5.2",
     "postcss-prune-var": "1.1.2",

src/components/ui/input/Input.tsx

@@ -20,7 +20,7 @@ export const Input = forwardRef<
       className={clsxm(
         'min-w-0 flex-auto appearance-none rounded-lg border ring-accent/20 duration-200 sm:text-sm',
         'bg-base-100 px-3 py-[calc(theme(spacing.2)-1px)] placeholder:text-zinc-400 focus:outline-none focus:ring-2',
-        'border-zinc-900/10 dark:border-zinc-700',
+        'border-border',
         'focus:border-accent/80 dark:bg-zinc-700/[0.15] dark:text-zinc-200 dark:placeholder:text-zinc-500',
         props.type === 'password' ? 'font-mono' : 'font-[system-ui]',
         className,

src/components/ui/modal/stacked/modal.tsx

@@ -207,21 +207,19 @@ export const Modal: Component<{
                 )}
                 onClick={stopPropagation}
               >
-                <Dialog.Title className="shrink-0 px-4 py-2 text-lg font-medium">
-                  {title}
-                </Dialog.Title>
+                <div className="relative flex flex-1 items-center">
+                  <Dialog.Title className="shrink-0 grow items-center px-4 py-1 text-lg font-medium">
+                    {title}
+                  </Dialog.Title>
+                  <Dialog.DialogClose className="p-2" onClick={close}>
+                    <CloseIcon />
+                  </Dialog.DialogClose>
+                </div>
                 <Divider className="my-2 shrink-0 border-slate-200 opacity-80 dark:border-neutral-800" />
 
                 <div className="min-h-0 shrink grow overflow-auto px-4 py-2">
                   {finalChildren}
                 </div>
-
-                <Dialog.DialogClose
-                  onClick={close}
-                  className="absolute right-0 top-0 z-[9] p-5"
-                >
-                  <CloseIcon />
-                </Dialog.DialogClose>
               </m.div>
             </div>
           </Dialog.Content>

src/components/ui/select/Select.tsx

@@ -43,15 +43,15 @@ export const Select = function Select<T>(
     >
       <SelectImpl.Trigger
         className={clsxm(
-          'inline-flex w-full items-center justify-between gap-1 rounded-lg border border-neutral-400/50 dark:border-neutral-700',
+          'border-border inline-flex w-full items-center justify-between gap-1 rounded-lg border',
           'p-2',
           'text-[0.9em]',
 
           className,
         )}
       >
         <SelectImpl.Value placeholder={placeholder} />
-        <SelectImpl.Icon>
+        <SelectImpl.Icon className="flex items-center">
           {isLoading ? (
             <i className="icon-[mingcute--loading-line] animate-spin" />
           ) : (

src/styles/tailwindcss.css

@@ -99,13 +99,6 @@ a {
   }
 }
 
-@layer components {
-  .scrollbar-none::-webkit-scrollbar {
-    width: 0 !important;
-    height: 0 !important;
-  }
-}
-
 .prose p:last-child {
   margin-bottom: 0;
 }

src/styles/theme.css

@@ -1,4 +1,16 @@
 @layer components {
+  /* Extend Tailwind classnames */
+  .border-border {
+    @apply border-zinc-900/10 dark:border-zinc-700;
+  }
+}
+
+@layer components {
+  .scrollbar-none::-webkit-scrollbar {
+    width: 0 !important;
+    height: 0 !important;
+  }
+
   .shiro-link--underline,
   .shiro-timeline a {
     color: currentColor;

tailwind.config.ts

@@ -6,6 +6,8 @@ import type { CSSRuleObject, PluginAPI } from 'tailwindcss/types/config'
 import { addDynamicIconSelectors } from '@iconify/tailwind'
 import typography from '@tailwindcss/typography'
 
+require('./cssAsPlugin')
+
 const UIKitColors = {
   red: {
     light: '#FF3B30',
@@ -297,6 +299,8 @@ const twConfig: Config = {
 
     require('tailwind-scrollbar'),
     require('@tailwindcss/container-queries'),
+    require('./src/styles/theme.css'),
+    require('./src/styles/uikit.css'),
   ],
 }