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

style(ui): update semantic color variants to use opacity-based tailwind classes

Browse Source
This commit is contained in:
Hyko
2026-04-22 16:07:46 -04:00
parent 072ed33ca3
commit 1bdabd8417
5 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/Button.js
+3 -3
View File
@@ -20,10 +20,10 @@ const Button = ({
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',
secondary: 'bg-transparent border border-neutral-300 text-neutral-700 hover:bg-neutral-100 focus:ring-neutral-500/20 dark:bg-neutral-800/60 dark:border-neutral-700/50 dark:text-white dark:hover:bg-neutral-800/80 dark:focus:ring-neutral-600/20',
danger: 'bg-red-50 border border-red-200 text-red-700 hover:bg-red-100 focus:ring-red-500/20 dark:bg-red-500/20 dark:border-red-500/30 dark:text-red-400 dark:hover:bg-red-500/30 dark:focus:ring-red-500/20',
danger: 'bg-red-700/10 border border-red-800/30 text-red-700 hover:bg-red-700/15 focus:ring-red-700/20 dark:bg-red-600/10 dark:border-red-600/20 dark:text-red-600 dark:hover:bg-red-600/15 dark:focus:ring-red-600/20',
ghost: 'text-neutral-600 hover:text-neutral-900 hover:bg-neutral-100 focus:ring-neutral-500/20 dark:text-neutral-400 dark:hover:text-white dark:hover:bg-neutral-700/30 dark:focus:ring-neutral-600/20',
success: 'bg-green-50 border border-green-200 text-green-700 hover:bg-green-100 focus:ring-green-500/20 dark:bg-green-500/20 dark:border-green-500/30 dark:text-green-400 dark:hover:bg-green-500/30 dark:focus:ring-green-500/20',
warning: 'bg-yellow-50 border border-yellow-200 text-yellow-700 hover:bg-yellow-100 focus:ring-yellow-500/20 dark:bg-yellow-500/20 dark:border-yellow-500/30 dark:text-yellow-400 dark:hover:bg-yellow-500/30 dark:focus:ring-yellow-500/20'
success: 'bg-green-700/10 border border-green-800/30 text-green-700 hover:bg-green-700/15 focus:ring-green-700/20 dark:bg-green-600/10 dark:border-green-600/20 dark:text-green-600 dark:hover:bg-green-600/15 dark:focus:ring-green-600/20',
warning: 'bg-yellow-700/10 border border-yellow-800/30 text-yellow-700 hover:bg-yellow-700/15 focus:ring-yellow-700/20 dark:bg-yellow-600/10 dark:border-yellow-600/20 dark:text-yellow-600 dark:hover:bg-yellow-600/15 dark:focus:ring-yellow-600/20'
};
const sizes = {
src/shared/components/Card.js
+8 -8
View File
@@ -24,10 +24,10 @@ const Card = ({
outline: 'rounded-xl bg-transparent border-neutral-300 dark:border-neutral-700/50',
solid: 'rounded-xl bg-neutral-100 dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700',
lightDark: 'rounded-xl bg-white dark:bg-neutral-900/40 border-neutral-200 dark:border-neutral-800/50',
success: 'rounded-xl bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-900/50',
info: 'rounded-xl bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-900/50',
warning: 'rounded-xl bg-yellow-50 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-900/50',
danger: 'rounded-xl bg-red-50 dark:bg-red-900/30 border-red-200 dark:border-red-900/50'
success: 'rounded-xl bg-green-700/10 dark:bg-green-600/10 border-green-800/30 dark:border-green-600/20',
info: 'rounded-xl bg-blue-700/10 dark:bg-blue-600/10 border-blue-800/30 dark:border-blue-600/20',
warning: 'rounded-xl bg-yellow-700/10 dark:bg-yellow-600/10 border-yellow-800/30 dark:border-yellow-600/20',
danger: 'rounded-xl bg-red-700/10 dark:bg-red-600/10 border-red-800/30 dark:border-red-600/20'
};
const variantsHover = {
@@ -36,10 +36,10 @@ const Card = ({
outline: 'hover:border-neutral-400 dark:hover:border-neutral-600/50',
solid: 'hover:bg-neutral-200 dark:hover:bg-neutral-700/80',
lightDark: 'hover:bg-neutral-50/90 hover:border-neutral-300/80 dark:hover:bg-neutral-900/50 dark:hover:border-neutral-700/50',
success: 'hover:bg-green-100 dark:hover:bg-green-900/40 hover:border-green-300 dark:hover:border-green-900/50',
info: 'hover:bg-blue-100 dark:hover:bg-blue-900/40 hover:border-blue-300 dark:hover:border-blue-900/50',
warning: 'hover:bg-yellow-100 dark:hover:bg-yellow-900/40 hover:border-yellow-300 dark:hover:border-yellow-900/50',
danger: 'hover:bg-red-100 dark:hover:bg-red-900/40 hover:border-red-300 dark:hover:border-red-900/50'
success: 'hover:bg-green-700/15 dark:hover:bg-green-600/15 hover:border-green-800/40 dark:hover:border-green-600/30',
info: 'hover:bg-blue-700/15 dark:hover:bg-blue-600/15 hover:border-blue-800/40 dark:hover:border-blue-600/30',
warning: 'hover:bg-yellow-700/15 dark:hover:bg-yellow-600/15 hover:border-yellow-800/40 dark:hover:border-yellow-600/30',
danger: 'hover:bg-red-700/15 dark:hover:bg-red-600/15 hover:border-red-800/40 dark:hover:border-red-600/30'
};
const paddings = {
src/shared/components/PasswordStrengthIndicator.js
+10 -10
View File
@@ -99,15 +99,15 @@ export default function PasswordStrengthIndicator({ password = '', showRequireme
switch (strength) {
case 0:
case 1:
return 'text-red-700 dark:text-red-400';
return 'text-red-700 dark:text-red-600';
case 2:
return 'text-orange-700 dark:text-orange-400';
return 'text-orange-700 dark:text-orange-600';
case 3:
return 'text-yellow-700 dark:text-yellow-500';
return 'text-yellow-700 dark:text-yellow-600';
case 4:
return 'text-blue-700 dark:text-blue-400';
return 'text-blue-700 dark:text-blue-600';
case 5:
return 'text-green-700 dark:text-green-400';
return 'text-green-700 dark:text-green-600';
default:
return 'text-neutral-600 dark:text-neutral-400';
}
@@ -144,7 +144,7 @@ export default function PasswordStrengthIndicator({ password = '', showRequireme
{!requirements.length && (
<div className="flex items-center space-x-2">
<div className="w-1.5 h-1.5 rounded-full flex-shrink-0 bg-red-500" />
<span className="text-xs text-red-700 dark:text-red-400">
<span className="text-xs text-red-700 dark:text-red-600">
Au moins 8 caractères
</span>
</div>
@@ -152,7 +152,7 @@ export default function PasswordStrengthIndicator({ password = '', showRequireme
{!requirements.maxLength && (
<div className="flex items-center space-x-2">
<div className="w-1.5 h-1.5 rounded-full flex-shrink-0 bg-red-500" />
<span className="text-xs text-red-700 dark:text-red-400">
<span className="text-xs text-red-700 dark:text-red-600">
Maximum 128 caractères
</span>
</div>
@@ -160,7 +160,7 @@ export default function PasswordStrengthIndicator({ password = '', showRequireme
{!requirements.uppercase && (
<div className="flex items-center space-x-2">
<div className="w-1.5 h-1.5 rounded-full flex-shrink-0 bg-red-500" />
<span className="text-xs text-red-700 dark:text-red-400">
<span className="text-xs text-red-700 dark:text-red-600">
Au moins une majuscule
</span>
</div>
@@ -168,7 +168,7 @@ export default function PasswordStrengthIndicator({ password = '', showRequireme
{!requirements.lowercase && (
<div className="flex items-center space-x-2">
<div className="w-1.5 h-1.5 rounded-full flex-shrink-0 bg-red-500" />
<span className="text-xs text-red-700 dark:text-red-400">
<span className="text-xs text-red-700 dark:text-red-600">
Au moins une minuscule
</span>
</div>
@@ -176,7 +176,7 @@ export default function PasswordStrengthIndicator({ password = '', showRequireme
{!requirements.number && (
<div className="flex items-center space-x-2">
<div className="w-1.5 h-1.5 rounded-full flex-shrink-0 bg-red-500" />
<span className="text-xs text-red-700 dark:text-red-400">
<span className="text-xs text-red-700 dark:text-red-600">
Au moins un chiffre
</span>
</div>
src/shared/components/Switch.js
+2 -2
View File
@@ -27,9 +27,9 @@ const Switch = ({
aria-checked={checked}
disabled={disabled}
onClick={(e) => { e.stopPropagation(); !disabled && onChange?.(!checked); }}
className={`relative flex-shrink-0 w-11 h-6 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900 ${
className={`relative flex-shrink-0 w-11 h-6 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900 ${
checked
? 'bg-blue-600'
? 'bg-blue-700'
: 'bg-neutral-300 dark:bg-neutral-600'
} ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
>
src/shared/components/TagInput.js
+1 -1
View File
@@ -102,7 +102,7 @@ const TagInput = ({
<div
className={`relative min-h-[42px] w-full flex flex-wrap items-center gap-1.5 px-3 py-2 rounded-xl border text-sm bg-white dark:bg-neutral-900 cursor-text transition-shadow ${
isOpen
? 'border-blue-500 ring-2 ring-blue-500/20'
? 'border-blue-700 ring-2 ring-blue-700/20'
: error
? 'border-red-400 dark:border-red-500'
: 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600'