From 9228b16844b8d6fa5b7bda97a6d141fb9286ef68 Mon Sep 17 00:00:00 2001 From: Innei Date: Thu, 28 Mar 2024 16:58:42 +0800 Subject: [PATCH] fix: border color Signed-off-by: Innei --- cssAsPlugin.js | 23 +++++++++++++++++++++++ package.json | 1 + pnpm-lock.yaml | 3 +++ src/components/ui/input/Input.tsx | 2 +- src/components/ui/modal/stacked/modal.tsx | 18 ++++++++---------- src/components/ui/select/Select.tsx | 4 ++-- src/styles/tailwindcss.css | 7 ------- src/styles/theme.css | 12 ++++++++++++ tailwind.config.ts | 4 ++++ 9 files changed, 54 insertions(+), 20 deletions(-) create mode 100644 cssAsPlugin.js diff --git a/cssAsPlugin.js b/cssAsPlugin.js new file mode 100644 index 0000000000..5a4ad19feb --- /dev/null +++ b/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']) + } + } +} diff --git a/package.json b/package.json index c6d35c3c62..ca1c6a5f73 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9f9d0bb074..c18dec79ae 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -352,6 +352,9 @@ devDependencies: postcss-import: specifier: 16.1.0 version: 16.1.0(postcss@8.4.38) + postcss-js: + specifier: 4.0.1 + version: 4.0.1(postcss@8.4.38) postcss-nested: specifier: 6.0.1 version: 6.0.1(postcss@8.4.38) diff --git a/src/components/ui/input/Input.tsx b/src/components/ui/input/Input.tsx index 596fce12d7..5db8bf7adc 100644 --- a/src/components/ui/input/Input.tsx +++ b/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, diff --git a/src/components/ui/modal/stacked/modal.tsx b/src/components/ui/modal/stacked/modal.tsx index 3430033a37..aaee0e6165 100644 --- a/src/components/ui/modal/stacked/modal.tsx +++ b/src/components/ui/modal/stacked/modal.tsx @@ -207,21 +207,19 @@ export const Modal: Component<{ )} onClick={stopPropagation} > - - {title} - +
+ + {title} + + + + +
{finalChildren}
- - - - diff --git a/src/components/ui/select/Select.tsx b/src/components/ui/select/Select.tsx index c75bfaf036..3025d921b6 100644 --- a/src/components/ui/select/Select.tsx +++ b/src/components/ui/select/Select.tsx @@ -43,7 +43,7 @@ export const Select = function Select( > ( )} > - + {isLoading ? ( ) : ( diff --git a/src/styles/tailwindcss.css b/src/styles/tailwindcss.css index 96e5f272b4..1653dad6d6 100644 --- a/src/styles/tailwindcss.css +++ b/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; } diff --git a/src/styles/theme.css b/src/styles/theme.css index f0e13894ba..c7091dd20d 100644 --- a/src/styles/theme.css +++ b/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; diff --git a/tailwind.config.ts b/tailwind.config.ts index ed0ac831b9..5fd6ea297b 100644 --- a/tailwind.config.ts +++ b/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'), ], }