kawa/Ready2Blob
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

feat(08-02): migrate UI primitives to semantic MD3 token classes

Browse Source 
- BackendCard: border-blue-600/bg-blue-50 -> border-primary/bg-primary/10, border-gray-200/bg-white -> border-outline/bg-surface-container, text-gray-900 -> text-on-surface, text-gray-500 -> text-on-surface-container/70
- FieldRenderer: text-gray-700 -> text-on-surface-container, text-red-500 -> text-error, text-blue-500/700 -> text-primary, bg-blue-50/border-blue-200 -> bg-primary/10/border-primary/30, border-red-500 -> border-error, focus:ring-red-300 -> focus:ring-error/50, border-gray-300 -> border-outline, focus:ring-blue-300 -> focus:ring-primary/50, text-gray-500 -> text-on-surface-container/70, text-red-600 -> text-error
- PasswordField: same mapping as FieldRenderer + text-gray-400/hover:text-gray-700 -> text-on-surface-container/50 hover:text-on-surface-container
This commit is contained in:
kawa
2026-04-01 05:04:33 +02:00
parent 01752a126d
commit 4e30f2ee79
3 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ui/PasswordField.tsx
+7 -7
View File
@@ -17,14 +17,14 @@ export function PasswordField({ id, label, error, registration, placeholder, hel
return (
<div className="flex flex-col gap-1">
<div className="flex items-center gap-1">
<label htmlFor={id} className="text-sm font-medium text-gray-700">
<label htmlFor={id} className="text-sm font-medium text-on-surface-container">
{label}
</label>
{tooltipText && (
<button
type="button"
onClick={() => setShowTooltip(v => !v)}
className="text-blue-500 hover:text-blue-700 text-xs leading-none"
className="text-primary hover:text-primary text-xs leading-none"
>
<span className="sr-only">More info about {label}</span>
<span aria-hidden="true">ⓘ</span>
@@ -32,7 +32,7 @@ export function PasswordField({ id, label, error, registration, placeholder, hel
)}
</div>
{tooltipText && showTooltip && (
<p className="text-xs text-blue-700 bg-blue-50 border border-blue-200 rounded px-2 py-1.5 mt-1">
<p className="text-xs text-primary bg-primary/10 border border-primary/30 rounded px-2 py-1.5 mt-1">
{tooltipText}
</p>
)}
@@ -43,7 +43,7 @@ export function PasswordField({ id, label, error, registration, placeholder, hel
placeholder={placeholder}
className={[
'w-full rounded-md border px-3 py-2 pr-10 text-sm focus:outline-none focus:ring-2',
error ? 'border-red-500 focus:ring-red-300' : 'border-gray-300 focus:ring-blue-300',
error ? 'border-error focus:ring-error/50' : 'border-outline focus:ring-primary/50',
].join(' ')}
{...registration}
/>
@@ -51,13 +51,13 @@ export function PasswordField({ id, label, error, registration, placeholder, hel
type="button"
onClick={() => setShow(v => !v)}
aria-label={show ? 'Hide' : 'Show'}
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-700"
className="absolute right-2 top-1/2 -translate-y-1/2 text-on-surface-container/50 hover:text-on-surface-container"
>
{show ? 'Hide' : 'Show'}
</button>
</div>
{helpText && !error && <p className="text-xs text-gray-500">{helpText}</p>}
{error && <p className="text-xs text-red-600">{error.message}</p>}
{helpText && !error && <p className="text-xs text-on-surface-container/70">{helpText}</p>}
{error && <p className="text-xs text-error">{error.message}</p>}
</div>
);
}