zen/core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

style(ui): update border radius and spacing across shared components

Browse Source
This commit is contained in:
Hyko
2026-04-22 14:46:30 -04:00
parent b21f0e6b67
commit c3eeb3ca73
4 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/Button.js
+2 -2
View File
@@ -15,7 +15,7 @@ const Button = ({
className = '', className = '',
...props ...props
}) => { }) => {
const baseClassName = 'cursor-pointer inline-flex items-center justify-center font-medium rounded transition-all duration-[120ms] ease-out focus:outline-none focus:ring-1 disabled:opacity-50 disabled:cursor-not-allowed'; const baseClassName = 'cursor-pointer inline-flex items-center justify-center font-medium rounded-lgtransition-all duration-[120ms] ease-out focus:outline-none focus:ring-1 disabled:opacity-50 disabled:cursor-not-allowed';
const variants = { const variants = {
primary: 'bg-neutral-900 text-white hover:bg-neutral-800 focus:ring-neutral-900/20 dark:bg-white dark:text-black dark:hover:bg-neutral-100 dark:focus:ring-white/20', primary: 'bg-neutral-900 text-white hover:bg-neutral-800 focus:ring-neutral-900/20 dark:bg-white dark:text-black dark:hover:bg-neutral-100 dark:focus:ring-white/20',
@@ -27,7 +27,7 @@ const Button = ({
}; };
const sizes = { const sizes = {
sm: 'px-[10px] py-[4px] text-[12px] gap-1.5', sm: 'px-[12px] py-[6px] text-[12px] gap-1.5',
md: 'px-[14px] py-[7px] text-[13px] gap-2', md: 'px-[14px] py-[7px] text-[13px] gap-2',
lg: 'px-6 py-3 text-base gap-2.5' lg: 'px-6 py-3 text-base gap-2.5'
}; };
src/shared/components/Card.js
+9 -9
View File
@@ -19,15 +19,15 @@ const Card = ({
const isLightDark = variant === 'lightDark'; const isLightDark = variant === 'lightDark';
const variants = { const variants = {
default: 'rounded-md bg-white dark:bg-neutral-800/30 border-neutral-200 dark:border-neutral-700/30', default: 'rounded-xl bg-white dark:bg-neutral-800/30 border-neutral-200 dark:border-neutral-700/30',
elevated: 'rounded-md bg-neutral-50/80 dark:bg-neutral-900/40 border-neutral-200 dark:border-neutral-800/50', elevated: 'rounded-xl bg-neutral-50/80 dark:bg-neutral-900/40 border-neutral-200 dark:border-neutral-800/50',
outline: 'rounded-md bg-transparent border-neutral-300 dark:border-neutral-700/50', outline: 'rounded-xl bg-transparent border-neutral-300 dark:border-neutral-700/50',
solid: 'rounded-md bg-neutral-100 dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700', solid: 'rounded-xl bg-neutral-100 dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700',
lightDark: 'rounded-md bg-white dark:bg-neutral-900/40 border-neutral-200 dark:border-neutral-800/50', lightDark: 'rounded-xl bg-white dark:bg-neutral-900/40 border-neutral-200 dark:border-neutral-800/50',
success: 'rounded-md bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-900/50', success: 'rounded-xl bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-900/50',
info: 'rounded-md bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-900/50', info: 'rounded-xl bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-900/50',
warning: 'rounded-md bg-yellow-50 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-900/50', warning: 'rounded-xl bg-yellow-50 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-900/50',
danger: 'rounded-md bg-red-50 dark:bg-red-900/30 border-red-200 dark:border-red-900/50' danger: 'rounded-xl bg-red-50 dark:bg-red-900/30 border-red-200 dark:border-red-900/50'
}; };
const variantsHover = { const variantsHover = {
src/shared/components/Input.js
+2 -2
View File
@@ -18,7 +18,7 @@ const Input = ({
step, step,
...props ...props
}) => { }) => {
const baseInputClassName = `w-full px-[10px] py-[7px] rounded text-[13px] focus:outline-none transition-all duration-[120ms] ease-out disabled:opacity-50 disabled:cursor-not-allowed bg-white border border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-1 focus:ring-neutral-500/20 dark:bg-neutral-900/60 dark:border-neutral-700/50 dark:text-white dark:placeholder-neutral-500 dark:focus:border-neutral-600 dark:focus:ring-neutral-600/20 ${ const baseInputClassName = `w-full px-[10px] py-[7px] rounded-lg text-[13px] focus:outline-none transition-all duration-[120ms] ease-out disabled:opacity-50 disabled:cursor-not-allowed bg-white border border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-1 focus:ring-neutral-500/20 dark:bg-neutral-900/60 dark:border-neutral-700/50 dark:text-white dark:placeholder-neutral-500 dark:focus:border-neutral-600 dark:focus:ring-neutral-600/20 ${
error ? 'border-red-500/50 dark:border-red-500/50' : '' error ? 'border-red-500/50 dark:border-red-500/50' : ''
} ${className}`; } ${className}`;
@@ -56,7 +56,7 @@ const Input = ({
{...props} {...props}
/> />
<div <div
className={`w-12 h-10 border rounded cursor-pointer transition-all duration-[120ms] ease-out ${ className={`w-12 h-10 border rounded-lg cursor-pointer transition-all duration-[120ms] ease-out ${
error ? 'border-red-500/50' : 'border-neutral-300 dark:border-neutral-700/50 dark:hover:border-neutral-600' error ? 'border-red-500/50' : 'border-neutral-300 dark:border-neutral-700/50 dark:hover:border-neutral-600'
} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`} } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
style={{ backgroundColor: value || '#000000' }} style={{ backgroundColor: value || '#000000' }}
src/shared/components/Textarea.js
+1 -1
View File
@@ -15,7 +15,7 @@ const Textarea = ({
rows = 4, rows = 4,
...props ...props
}) => { }) => {
const baseTextareaClassName = `w-full px-3 py-2.5 bg-white dark:bg-neutral-900/60 border rounded-xl text-sm text-neutral-900 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:border-neutral-500 dark:focus:border-neutral-600 focus:ring-1 focus:ring-neutral-500/20 dark:focus:ring-neutral-600/20 hover:bg-neutral-50 dark:hover:bg-neutral-900/80 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed resize-y ${ const baseTextareaClassName = `w-full px-3 py-2.5 bg-white dark:bg-neutral-900/60 border rounded-lg text-sm text-neutral-900 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:border-neutral-500 dark:focus:border-neutral-600 focus:ring-1 focus:ring-neutral-500/20 dark:focus:ring-neutral-600/20 hover:bg-neutral-50 dark:hover:bg-neutral-900/80 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed resize-y ${
error ? 'border-red-500/50' : 'border-neutral-300 dark:border-neutral-700/50' error ? 'border-red-500/50' : 'border-neutral-300 dark:border-neutral-700/50'
} ${className}`; } ${className}`;