From 1ac32eadc5ff89fe373af316b5567b7b35424e90 Mon Sep 17 00:00:00 2001
From: Kawa <us.fame.sq@gmail.com>
Date: Wed, 1 Apr 2026 05:08:33 +0200
Subject: [PATCH] feat(08-02): migrate wizard components to semantic MD3 token
 classes

- AzureAuthToggle: border-gray-300 -> border-outline, bg-blue-600/text-white -> bg-primary/text-on-primary, bg-white/text-gray-700/hover:bg-gray-50 -> bg-surface-container/text-on-surface-container/hover:bg-surface
- SftpAuthToggle: same tab/info-tooltip mapping as AzureAuthToggle + text-gray-700 -> text-on-surface-container
- DeploymentStep: Back button border-gray-300/hover:bg-gray-50 -> border-outline/hover:bg-surface; Next bg-blue-600 -> bg-primary/text-on-primary
- OutputBlock: text-gray-700 -> text-on-surface-container, border-gray-300 -> border-outline (x2), bg-gray-900/text-gray-100 -> bg-surface-variant/text-on-surface-variant
- RemoteConfigStep: Back/Next buttons same as DeploymentStep pattern
- ReviewStep: text-green-700/bg-green-50 -> text-success/bg-success/10, bg-yellow-50/border-yellow-300 -> bg-warning/10/border-warning, text-yellow-800/900 -> text-warning, Back/Download buttons semantic tokens
- FieldRenderer (fix): text branch label text-gray-700 -> text-on-surface-container, text branch tooltip bg-blue-50/border-blue-200 -> bg-primary/10/border-primary/30
---
 src/components/ui/FieldRenderer.tsx        |  4 ++--
 src/components/wizard/AzureAuthToggle.tsx  | 10 +++++-----
 src/components/wizard/DeploymentStep.tsx   |  4 ++--
 src/components/wizard/OutputBlock.tsx      |  8 ++++----
 src/components/wizard/RemoteConfigStep.tsx |  4 ++--
 src/components/wizard/ReviewStep.tsx       | 12 ++++++------
 src/components/wizard/SftpAuthToggle.tsx   | 16 ++++++++--------
 7 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/components/ui/FieldRenderer.tsx b/src/components/ui/FieldRenderer.tsx
index 2cb1c91..bea8e8d 100644
--- a/src/components/ui/FieldRenderer.tsx
+++ b/src/components/ui/FieldRenderer.tsx
@@ -83,7 +83,7 @@ export function FieldRenderer({ field, register, error }: FieldRendererProps) {
   return (
     <div className="flex flex-col gap-1">
       <div className="flex items-center gap-1">
-        <label htmlFor={field.key} className="text-sm font-medium text-gray-700">
+        <label htmlFor={field.key} className="text-sm font-medium text-on-surface-container">
           {field.label}
           {field.required && <span className="ml-1 text-error">*</span>}
         </label>
@@ -99,7 +99,7 @@ export function FieldRenderer({ field, register, error }: FieldRendererProps) {
         )}
       </div>
       {field.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">
           {field.tooltipText}
         </p>
       )}
diff --git a/src/components/wizard/AzureAuthToggle.tsx b/src/components/wizard/AzureAuthToggle.tsx
index 321995a..a7393f9 100644
--- a/src/components/wizard/AzureAuthToggle.tsx
+++ b/src/components/wizard/AzureAuthToggle.tsx
@@ -22,15 +22,15 @@ export function AzureAuthToggle({ register, errors }: AzureAuthToggleProps) {
   return (
     <div className="flex flex-col gap-3">
       {/* Segmented control */}
-      <div className="flex rounded-md border border-gray-300 overflow-hidden">
+      <div className="flex rounded-md border border-outline overflow-hidden">
         <button
           type="button"
           onClick={() => setAuthMethod('sas')}
           className={[
             'flex-1 py-1.5 text-sm font-medium transition-colors',
             authMethod === 'sas'
-              ? 'bg-blue-600 text-white'
-              : 'bg-white text-gray-700 hover:bg-gray-50',
+              ? 'bg-primary text-on-primary'
+              : 'bg-surface-container text-on-surface-container hover:bg-surface',
           ].join(' ')}
         >
           SAS URL
@@ -41,8 +41,8 @@ export function AzureAuthToggle({ register, errors }: AzureAuthToggleProps) {
           className={[
             'flex-1 py-1.5 text-sm font-medium transition-colors',
             authMethod === 'key'
-              ? 'bg-blue-600 text-white'
-              : 'bg-white text-gray-700 hover:bg-gray-50',
+              ? 'bg-primary text-on-primary'
+              : 'bg-surface-container text-on-surface-container hover:bg-surface',
           ].join(' ')}
         >
           Access Key
diff --git a/src/components/wizard/DeploymentStep.tsx b/src/components/wizard/DeploymentStep.tsx
index bd4cbfa..9d783ca 100644
--- a/src/components/wizard/DeploymentStep.tsx
+++ b/src/components/wizard/DeploymentStep.tsx
@@ -91,14 +91,14 @@ export function DeploymentStep() {
         <button
           type="button"
           onClick={() => dispatch({ type: 'SET_STEP', payload: 1 })}
-          className="px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-50"
+          className="px-4 py-2 text-sm border border-outline rounded-md hover:bg-surface"
         >
           Back
         </button>
         <button
           type="button"
           onClick={() => dispatch({ type: 'SET_STEP', payload: 3 })}
-          className="px-4 py-2 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700"
+          className="px-4 py-2 text-sm bg-primary text-on-primary rounded-md hover:bg-primary"
         >
           Next / Review
         </button>
diff --git a/src/components/wizard/OutputBlock.tsx b/src/components/wizard/OutputBlock.tsx
index c52bcd7..1a5e821 100644
--- a/src/components/wizard/OutputBlock.tsx
+++ b/src/components/wizard/OutputBlock.tsx
@@ -23,13 +23,13 @@ export function OutputBlock({ label, content, filename, disabled = false }: Outp
   return (
     <div className="mb-6">
       <div className="flex items-center justify-between mb-1">
-        <span className="text-sm font-medium text-gray-700">{label}</span>
+        <span className="text-sm font-medium text-on-surface-container">{label}</span>
         <div className="flex gap-2">
           <button
             type="button"
             disabled={disabled}
             onClick={handleCopy}
-            className="text-xs px-2 py-1 rounded border border-gray-300 disabled:opacity-40"
+            className="text-xs px-2 py-1 rounded border border-outline disabled:opacity-40"
           >
             {copied ? 'Copied!' : 'Copy'}
           </button>
@@ -38,14 +38,14 @@ export function OutputBlock({ label, content, filename, disabled = false }: Outp
               type="button"
               disabled={disabled}
               onClick={() => downloadFile(content, filename)}
-              className="text-xs px-2 py-1 rounded border border-gray-300 disabled:opacity-40"
+              className="text-xs px-2 py-1 rounded border border-outline disabled:opacity-40"
             >
               Download
             </button>
           )}
         </div>
       </div>
-      <pre className="bg-gray-900 text-gray-100 rounded p-4 text-xs overflow-x-auto whitespace-pre-wrap">
+      <pre className="bg-surface-variant text-on-surface-variant rounded p-4 text-xs overflow-x-auto whitespace-pre-wrap">
         <code>{content}</code>
       </pre>
     </div>
diff --git a/src/components/wizard/RemoteConfigStep.tsx b/src/components/wizard/RemoteConfigStep.tsx
index cd53a1e..0c865cd 100644
--- a/src/components/wizard/RemoteConfigStep.tsx
+++ b/src/components/wizard/RemoteConfigStep.tsx
@@ -110,13 +110,13 @@ export function RemoteConfigStep() {
           <button
             type="button"
             onClick={() => dispatch({ type: 'SET_STEP', payload: 0 })}
-            className="px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-50"
+            className="px-4 py-2 text-sm border border-outline rounded-md hover:bg-surface"
           >
             Back
           </button>
           <button
             type="submit"
-            className="px-4 py-2 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700"
+            className="px-4 py-2 text-sm bg-primary text-on-primary rounded-md hover:bg-primary"
           >
             Next
           </button>
diff --git a/src/components/wizard/ReviewStep.tsx b/src/components/wizard/ReviewStep.tsx
index ba92c7d..670bd79 100644
--- a/src/components/wizard/ReviewStep.tsx
+++ b/src/components/wizard/ReviewStep.tsx
@@ -72,16 +72,16 @@ export function ReviewStep() {
   return (
     <div>
       {/* SECU-02: client-side only notice */}
-      <p className="text-sm text-green-700 bg-green-50 rounded p-3 mb-6">
+      <p className="text-sm text-success bg-success/10 rounded p-3 mb-6">
         No data is sent to any server. All file generation happens in your browser.
       </p>
 
       {/* SECU-01: security acknowledgement gate */}
-      <div className="bg-yellow-50 border border-yellow-300 rounded p-4 mb-6">
-        <p className="text-sm text-yellow-800 font-medium mb-2">
+      <div className="bg-warning/10 border border-warning rounded p-4 mb-6">
+        <p className="text-sm text-warning font-medium mb-2">
           Security warning: generated files contain credentials in plain text.
         </p>
-        <label className="flex items-center gap-2 text-sm text-yellow-900 cursor-pointer">
+        <label className="flex items-center gap-2 text-sm text-warning cursor-pointer">
           <input
             type="checkbox"
             checked={acknowledged}
@@ -128,7 +128,7 @@ export function ReviewStep() {
         <button
           type="button"
           onClick={() => dispatch({ type: 'SET_STEP', payload: 2 })}
-          className="px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-50"
+          className="px-4 py-2 text-sm border border-outline rounded-md hover:bg-surface"
         >
           Back
         </button>
@@ -139,7 +139,7 @@ export function ReviewStep() {
         type="button"
         disabled={!acknowledged}
         onClick={handleDownloadZip}
-        className="w-full py-2 px-4 bg-blue-600 text-white rounded font-medium disabled:opacity-40 disabled:cursor-not-allowed hover:bg-blue-700"
+        className="w-full py-2 px-4 bg-primary text-on-primary rounded font-medium disabled:opacity-40 disabled:cursor-not-allowed hover:bg-primary"
       >
         Download All (ZIP)
       </button>
diff --git a/src/components/wizard/SftpAuthToggle.tsx b/src/components/wizard/SftpAuthToggle.tsx
index 2af5184..71972de 100644
--- a/src/components/wizard/SftpAuthToggle.tsx
+++ b/src/components/wizard/SftpAuthToggle.tsx
@@ -20,33 +20,33 @@ export function SftpAuthToggle({ register, errors }: SftpAuthToggleProps) {
     <div className="flex flex-col gap-3">
       {/* Auth method label + ⓘ button */}
       <div className="flex items-center gap-1">
-        <span className="text-sm font-medium text-gray-700">Authentication Method</span>
+        <span className="text-sm font-medium text-on-surface-container">Authentication Method</span>
         <button
           type="button"
           onClick={() => setShowAuthTip(v => !v)}
           aria-label="More info about authentication methods"
-          className="text-blue-500 hover:text-blue-700 text-xs leading-none"
+          className="text-primary hover:text-primary text-xs leading-none"
         >
           ⓘ
         </button>
       </div>
       {showAuthTip && (
-        <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">
           Password auth sends your password to the SFTP server on each connection.
           Key-based auth uses a private key (more secure — the server only stores your public key).
           Paste the full private key PEM content (including the -----BEGIN/END----- lines) if using key-based auth.
         </p>
       )}
       {/* Segmented control */}
-      <div className="flex rounded-md border border-gray-300 overflow-hidden">
+      <div className="flex rounded-md border border-outline overflow-hidden">
         <button
           type="button"
           onClick={() => setAuthMethod('password')}
           className={[
             'flex-1 py-1.5 text-sm font-medium transition-colors',
             authMethod === 'password'
-              ? 'bg-blue-600 text-white'
-              : 'bg-white text-gray-700 hover:bg-gray-50',
+              ? 'bg-primary text-on-primary'
+              : 'bg-surface-container text-on-surface-container hover:bg-surface',
           ].join(' ')}
         >
           Password
@@ -57,8 +57,8 @@ export function SftpAuthToggle({ register, errors }: SftpAuthToggleProps) {
           className={[
             'flex-1 py-1.5 text-sm font-medium transition-colors',
             authMethod === 'key'
-              ? 'bg-blue-600 text-white'
-              : 'bg-white text-gray-700 hover:bg-gray-50',
+              ? 'bg-primary text-on-primary'
+              : 'bg-surface-container text-on-surface-container hover:bg-surface',
           ].join(' ')}
         >
           Private Key