@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/viewer/components/TokenStylePanel.tsx

@@ -9,7 +9,7 @@
  */
 
 import { useState, useEffect, useCallback } from "react";
-import clsx from "clsx";
+import { Badge } from "@fragments/ui";
 import type { DesignToken, EnhancedStyleDiffItem, TokenUsageSummary } from "../../core/index.js";
 import { CheckIcon, XIcon, LoadingIcon, FigmaIcon, WandIcon } from "./Icons.js";
 
@@ -244,9 +244,9 @@ export function TokenStylePanel({
   // Show loading state
   if (figmaLoading) {
     return (
-      <div className="flex items-center gap-2 text-tertiary p-4">
-        <SyncingIcon className="w-4 h-4 animate-spin" />
-        <span className="text-xs">Loading Figma styles...</span>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--text-tertiary)', padding: '16px' }}>
+        <SyncingIcon style={{ width: 16, height: 16, animation: 'spin 1s linear infinite' }} />
+        <span style={{ fontSize: '12px' }}>Loading Figma styles...</span>
       </div>
     );
   }
@@ -254,12 +254,12 @@ export function TokenStylePanel({
   // Show error state
   if (figmaError) {
     return (
-      <div className="flex items-center gap-2 text-tertiary p-4">
-        <XIcon className="w-4 h-4 text-red-500" />
-        <span className="text-xs">{figmaError}</span>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--text-tertiary)', padding: '16px' }}>
+        <XIcon style={{ width: 16, height: 16, color: '#ef4444' }} />
+        <span style={{ fontSize: '12px' }}>{figmaError}</span>
         <button
           onClick={onFetchFigma}
-          className="text-xs text-[--color-accent] hover:underline ml-2"
+          style={{ fontSize: '12px', color: 'var(--color-accent)', background: 'none', border: 'none', cursor: 'pointer', marginLeft: '8px', textDecoration: 'underline' }}
         >
           Retry
         </button>
@@ -270,12 +270,12 @@ export function TokenStylePanel({
   // Show idle state
   if (!figmaStyles) {
     return (
-      <div className="flex items-center gap-2 text-tertiary p-4">
-        <FigmaIcon className="w-4 h-4" />
-        <span className="text-xs">Click to load style comparison</span>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--text-tertiary)', padding: '16px' }}>
+        <FigmaIcon style={{ width: 16, height: 16 }} />
+        <span style={{ fontSize: '12px' }}>Click to load style comparison</span>
         <button
           onClick={onFetchFigma}
-          className="text-xs text-[--color-accent] hover:underline ml-2"
+          style={{ fontSize: '12px', color: 'var(--color-accent)', background: 'none', border: 'none', cursor: 'pointer', marginLeft: '8px', textDecoration: 'underline' }}
         >
           Load
         </button>
@@ -330,157 +330,149 @@ export function TokenStylePanel({
       : 100;
 
   return (
-    <div className="overflow-x-auto p-4">
+    <div style={{ overflowX: 'auto', padding: '16px' }}>
       {/* Summary Header */}
-      <div className="flex items-center justify-between mb-3">
-        <div className="flex items-center gap-4">
-          <span className="text-xs font-medium text-primary">Style Comparison</span>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '12px' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+          <span style={{ fontSize: '12px', fontWeight: 500, color: 'var(--text-primary)' }}>Style Comparison</span>
 
           {/* Token info badge */}
           {tokenData && (
-            <span className="text-xs text-tertiary">
+            <span style={{ fontSize: '12px', color: 'var(--text-tertiary)' }}>
               {tokenData.meta?.totalTokens || tokenData.tokens.length} tokens loaded
             </span>
           )}
           {tokenLoading && (
-            <span className="text-xs text-tertiary flex items-center gap-1">
-              <SyncingIcon className="w-3 h-3 animate-spin" />
+            <span style={{ fontSize: '12px', color: 'var(--text-tertiary)', display: 'flex', alignItems: 'center', gap: '4px' }}>
+              <SyncingIcon style={{ width: 12, height: 12, animation: 'spin 1s linear infinite' }} />
               Loading tokens...
             </span>
           )}
           {tokenError && !tokenLoading && (
-            <span className="text-xs text-amber-600" title={tokenError}>
+            <span style={{ fontSize: '12px', color: '#d97706' }} title={tokenError}>
               Tokens not configured
             </span>
           )}
         </div>
 
-        <div className="flex items-center gap-3">
+        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
           {/* Compliance badge */}
           {tokenData && (
-            <span
-              className={clsx(
-                "text-xs font-medium px-2 py-0.5 rounded",
-                compliancePercent >= 80
-                  ? "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300"
-                  : compliancePercent >= 50
-                  ? "bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300"
-                  : "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300"
-              )}
+            <Badge
+              variant={compliancePercent >= 80 ? 'success' : compliancePercent >= 50 ? 'warning' : 'danger'}
             >
               {compliancePercent}% token compliance
-            </span>
+            </Badge>
           )}
 
           {/* Match summary */}
-          <span
-            className={clsx(
-              "text-xs font-medium",
-              differences === 0 ? "text-green-600" : "text-amber-600"
-            )}
-          >
+          <Badge variant={differences === 0 ? 'success' : 'warning'}>
             {differences === 0 ? "All styles match" : `${differences} difference${differences !== 1 ? "s" : ""}`}
-          </span>
+          </Badge>
 
           {/* Hardcoded warning */}
           {hardcodedCount > 0 && (
-            <span className="text-xs font-medium text-red-600">
+            <Badge variant="danger">
               {hardcodedCount} hardcoded
-            </span>
+            </Badge>
           )}
         </div>
       </div>
 
       {/* Comparison Table */}
-      <table className="w-full text-xs">
+      <table style={{ width: '100%', fontSize: '12px' }}>
         <thead>
-          <tr className="border-b border-[--border-subtle]">
-            <th className="px-3 py-2 text-left text-tertiary font-medium">Property</th>
-            <th className="px-3 py-2 text-left text-tertiary font-medium">Figma</th>
+          <tr style={{ borderBottom: '1px solid var(--border)' }}>
+            <th style={{ padding: '8px 12px', textAlign: 'left', color: 'var(--text-tertiary)', fontWeight: 500 }}>Property</th>
+            <th style={{ padding: '8px 12px', textAlign: 'left', color: 'var(--text-tertiary)', fontWeight: 500 }}>Figma</th>
             {tokenData && (
-              <th className="px-3 py-2 text-left text-tertiary font-medium">Token</th>
+              <th style={{ padding: '8px 12px', textAlign: 'left', color: 'var(--text-tertiary)', fontWeight: 500 }}>Token</th>
             )}
-            <th className="px-3 py-2 text-left text-tertiary font-medium">Rendered</th>
-            <th className="px-3 py-2 text-center text-tertiary font-medium w-12">Match</th>
+            <th style={{ padding: '8px 12px', textAlign: 'left', color: 'var(--text-tertiary)', fontWeight: 500 }}>Rendered</th>
+            <th style={{ padding: '8px 12px', textAlign: 'center', color: 'var(--text-tertiary)', fontWeight: 500, width: '48px' }}>Match</th>
             {tokenData && fixableCount > 0 && (
-              <th className="px-3 py-2 text-center text-tertiary font-medium w-16">Fix</th>
+              <th style={{ padding: '8px 12px', textAlign: 'center', color: 'var(--text-tertiary)', fontWeight: 500, width: '64px' }}>Fix</th>
             )}
           </tr>
         </thead>
         <tbody>
-          {properties.map((prop) => (
+          {properties.map((prop, index) => (
             <tr
               key={prop.property}
-              className={clsx(
-                "border-b border-[--border-subtle] last:border-b-0",
-                !prop.match && "bg-amber-50 dark:bg-amber-950/20",
-                prop.isHardcoded && "bg-red-50 dark:bg-red-950/20"
-              )}
+              style={{
+                borderBottom: index < properties.length - 1 ? '1px solid var(--border)' : undefined,
+                background: prop.isHardcoded
+                  ? 'color-mix(in srgb, #ef4444 5%, transparent)'
+                  : !prop.match
+                  ? 'color-mix(in srgb, #f59e0b 5%, transparent)'
+                  : undefined,
+              }}
             >
-              <td className="px-3 py-2 font-mono text-primary">{prop.property}</td>
-              <td className="px-3 py-2">
-                <div className="flex items-center gap-2">
+              <td style={{ padding: '8px 12px', fontFamily: 'monospace', color: 'var(--text-primary)' }}>{prop.property}</td>
+              <td style={{ padding: '8px 12px' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                   {/* Color swatch */}
                   {isColorProperty(prop.property) && prop.figma !== "(not set)" && (
                     <ColorSwatch color={prop.figma} />
                   )}
-                  <span className="font-mono text-secondary truncate max-w-[120px]" title={prop.figma}>
+                  <span style={{ fontFamily: 'monospace', color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '120px' }} title={prop.figma}>
                     {prop.figma}
                   </span>
                 </div>
               </td>
               {tokenData && (
-                <td className="px-3 py-2">
+                <td style={{ padding: '8px 12px' }}>
                   {prop.figmaToken ? (
                     <TokenBadge token={prop.figmaToken} confidence={prop.figmaConfidence} />
                   ) : prop.renderedToken ? (
                     <TokenBadge token={prop.renderedToken} confidence={prop.renderedConfidence} />
                   ) : (
-                    <span className="text-tertiary">-</span>
+                    <span style={{ color: 'var(--text-tertiary)' }}>-</span>
                   )}
                 </td>
               )}
-              <td className="px-3 py-2">
-                <div className="flex items-center gap-2">
+              <td style={{ padding: '8px 12px' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                   {/* Color swatch */}
                   {isColorProperty(prop.property) && prop.rendered !== "(not set)" && (
                     <ColorSwatch color={prop.rendered} />
                   )}
-                  <span className="font-mono text-secondary truncate max-w-[120px]" title={prop.rendered}>
+                  <span style={{ fontFamily: 'monospace', color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '120px' }} title={prop.rendered}>
                     {prop.rendered}
                   </span>
                   {/* Hardcoded badge */}
                   {prop.isHardcoded && (
-                    <span className="text-[10px] px-1 py-0.5 bg-red-100 text-red-600 dark:bg-red-900 dark:text-red-300 rounded">
-                      HC
-                    </span>
+                    <Badge variant="danger">HC</Badge>
                   )}
                 </div>
               </td>
-              <td className="px-3 py-2 text-center">
+              <td style={{ padding: '8px 12px', textAlign: 'center' }}>
                 {prop.match ? (
-                  <CheckIcon className="w-4 h-4 text-green-600 mx-auto" />
+                  <CheckIcon style={{ width: 16, height: 16, color: '#16a34a', margin: '0 auto' }} />
                 ) : (
-                  <XIcon className="w-4 h-4 text-amber-600 mx-auto" />
+                  <XIcon style={{ width: 16, height: 16, color: '#d97706', margin: '0 auto' }} />
                 )}
               </td>
               {tokenData && fixableCount > 0 && (
-                <td className="px-3 py-2 text-center">
+                <td style={{ padding: '8px 12px', textAlign: 'center' }}>
                   {prop.isHardcoded && prop.figmaToken && (
                     <button
                       onClick={() => copyFix(prop.property, prop.figmaToken!.name)}
-                      className={clsx(
-                        "p-1 rounded transition-colors",
-                        copiedFix === prop.property
-                          ? "bg-green-100 text-green-600"
-                          : "hover:bg-[--bg-hover] text-tertiary hover:text-primary"
-                      )}
+                      style={{
+                        padding: '4px',
+                        borderRadius: '4px',
+                        transition: 'color 0.15s, background 0.15s',
+                        background: copiedFix === prop.property ? 'color-mix(in srgb, #22c55e 15%, transparent)' : 'transparent',
+                        color: copiedFix === prop.property ? '#16a34a' : 'var(--text-tertiary)',
+                        border: 'none',
+                        cursor: 'pointer',
+                      }}
                       title={`Copy: ${prop.property.replace(/([A-Z])/g, "-$1").toLowerCase()}: var(${prop.figmaToken.name});`}
                     >
                       {copiedFix === prop.property ? (
-                        <CheckIcon className="w-3 h-3" />
+                        <CheckIcon style={{ width: 12, height: 12 }} />
                       ) : (
-                        <WandIcon className="w-3 h-3" />
+                        <WandIcon style={{ width: 12, height: 12 }} />
                       )}
                     </button>
                   )}
@@ -493,14 +485,14 @@ export function TokenStylePanel({
 
       {/* Hardcoded fixes summary */}
       {hardcodedCount > 0 && tokenData && (
-        <div className="mt-4 p-3 bg-amber-50 dark:bg-amber-950/30 rounded-lg border border-amber-200 dark:border-amber-800">
-          <div className="flex items-start gap-2">
-            <WandIcon className="w-4 h-4 text-amber-600 mt-0.5" />
+        <div style={{ marginTop: '16px', padding: '12px', background: 'color-mix(in srgb, #f59e0b 8%, transparent)', borderRadius: '8px', border: '1px solid color-mix(in srgb, #f59e0b 20%, transparent)' }}>
+          <div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
+            <WandIcon style={{ width: 16, height: 16, color: '#d97706', marginTop: '2px' }} />
             <div>
-              <p className="text-xs font-medium text-amber-800 dark:text-amber-200">
+              <p style={{ fontSize: '12px', fontWeight: 500, color: '#92400e' }}>
                 {hardcodedCount} hardcoded value{hardcodedCount !== 1 ? "s" : ""} detected
               </p>
-              <p className="text-xs text-amber-700 dark:text-amber-300 mt-1">
+              <p style={{ fontSize: '12px', color: '#a16207', marginTop: '4px' }}>
                 These values should use design tokens for consistency and theming support.
                 Click the fix button to copy the token-based CSS.
               </p>
@@ -526,15 +518,22 @@ function TokenBadge({
 }) {
   const [showTooltip, setShowTooltip] = useState(false);
 
+  const isValueOnly = confidence === "value-only";
+
   return (
-    <div className="relative inline-block">
+    <div style={{ position: 'relative', display: 'inline-block' }}>
       <span
-        className={clsx(
-          "font-mono text-xs cursor-help px-1.5 py-0.5 rounded",
-          confidence === "value-only"
-            ? "text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30"
-            : "text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-950/30"
-        )}
+        style={{
+          fontFamily: 'monospace',
+          fontSize: '12px',
+          cursor: 'help',
+          padding: '2px 6px',
+          borderRadius: '4px',
+          color: isValueOnly ? '#d97706' : 'var(--color-accent)',
+          background: isValueOnly
+            ? 'color-mix(in srgb, #f59e0b 8%, transparent)'
+            : 'color-mix(in srgb, var(--color-accent) 8%, transparent)',
+        }}
         onMouseEnter={() => setShowTooltip(true)}
         onMouseLeave={() => setShowTooltip(false)}
       >
@@ -544,20 +543,32 @@ function TokenBadge({
       {/* Enhanced tooltip */}
       {showTooltip && (
         <div
-          className="absolute z-50 left-0 top-full mt-1 p-3 bg-[--bg-primary] border border-[--border] rounded-lg shadow-lg min-w-[280px]"
-          style={{ maxWidth: "320px" }}
+          style={{
+            position: 'absolute',
+            zIndex: 50,
+            left: 0,
+            top: '100%',
+            marginTop: '4px',
+            padding: '12px',
+            background: 'var(--bg-primary)',
+            border: '1px solid var(--border)',
+            borderRadius: '8px',
+            boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)',
+            minWidth: '280px',
+            maxWidth: '320px',
+          }}
         >
-          <div className="space-y-2 text-xs">
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', fontSize: '12px' }}>
             {/* Token name */}
             <div>
-              <span className="text-tertiary">Token:</span>
-              <span className="ml-2 font-mono text-primary font-medium">{token.name}</span>
+              <span style={{ color: 'var(--text-tertiary)' }}>Token:</span>
+              <span style={{ marginLeft: '8px', fontFamily: 'monospace', color: 'var(--text-primary)', fontWeight: 500 }}>{token.name}</span>
             </div>
 
             {/* Resolved value */}
-            <div className="flex items-center">
-              <span className="text-tertiary">Value:</span>
-              <span className="ml-2 font-mono text-secondary">{token.resolvedValue}</span>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <span style={{ color: 'var(--text-tertiary)' }}>Value:</span>
+              <span style={{ marginLeft: '8px', fontFamily: 'monospace', color: 'var(--text-secondary)' }}>{token.resolvedValue}</span>
               {token.category === "color" && (
                 <ColorSwatch color={token.resolvedValue} />
               )}
@@ -566,20 +577,20 @@ function TokenBadge({
             {/* Raw value (if different from resolved) */}
             {token.rawValue !== token.resolvedValue && (
               <div>
-                <span className="text-tertiary">Raw:</span>
-                <span className="ml-2 font-mono text-secondary">{token.rawValue}</span>
+                <span style={{ color: 'var(--text-tertiary)' }}>Raw:</span>
+                <span style={{ marginLeft: '8px', fontFamily: 'monospace', color: 'var(--text-secondary)' }}>{token.rawValue}</span>
               </div>
             )}
 
             {/* Category & Level */}
-            <div className="flex gap-4">
+            <div style={{ display: 'flex', gap: '16px' }}>
               <div>
-                <span className="text-tertiary">Category:</span>
-                <span className="ml-2 text-secondary capitalize">{token.category}</span>
+                <span style={{ color: 'var(--text-tertiary)' }}>Category:</span>
+                <span style={{ marginLeft: '8px', color: 'var(--text-secondary)', textTransform: 'capitalize' }}>{token.category}</span>
               </div>
               <div>
-                <span className="text-tertiary">Level:</span>
-                <span className="ml-2 text-secondary">
+                <span style={{ color: 'var(--text-tertiary)' }}>Level:</span>
+                <span style={{ marginLeft: '8px', color: 'var(--text-secondary)' }}>
                   {token.level === 1 ? "Base" : token.level === 2 ? "Semantic" : "Component"}
                 </span>
               </div>
@@ -587,18 +598,18 @@ function TokenBadge({
 
             {/* Theme */}
             <div>
-              <span className="text-tertiary">Theme:</span>
-              <span className="ml-2 text-secondary">{token.theme}</span>
+              <span style={{ color: 'var(--text-tertiary)' }}>Theme:</span>
+              <span style={{ marginLeft: '8px', color: 'var(--text-secondary)' }}>{token.theme}</span>
             </div>
 
             {/* Reference chain (if has references) */}
             {token.referenceChain.length > 1 && (
               <div>
-                <span className="text-tertiary">References:</span>
-                <div className="mt-1 font-mono text-secondary text-[10px] space-y-0.5">
+                <span style={{ color: 'var(--text-tertiary)' }}>References:</span>
+                <div style={{ marginTop: '4px', fontFamily: 'monospace', color: 'var(--text-secondary)', fontSize: '10px', display: 'flex', flexDirection: 'column', gap: '2px' }}>
                   {token.referenceChain.map((ref, i) => (
-                    <div key={ref} className="flex items-center">
-                      {i > 0 && <span className="mr-1 text-tertiary">→</span>}
+                    <div key={ref} style={{ display: 'flex', alignItems: 'center' }}>
+                      {i > 0 && <span style={{ marginRight: '4px', color: 'var(--text-tertiary)' }}>&rarr;</span>}
                       <span>{ref}</span>
                     </div>
                   ))}
@@ -607,9 +618,9 @@ function TokenBadge({
             )}
 
             {/* Source file */}
-            <div className="pt-1 border-t border-[--border-subtle]">
-              <span className="text-tertiary">Source:</span>
-              <span className="ml-2 font-mono text-[10px] text-tertiary truncate">
+            <div style={{ paddingTop: '4px', borderTop: '1px solid var(--border)' }}>
+              <span style={{ color: 'var(--text-tertiary)' }}>Source:</span>
+              <span style={{ marginLeft: '8px', fontFamily: 'monospace', fontSize: '10px', color: 'var(--text-tertiary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                 {token.sourceFile.split("/").slice(-2).join("/")}
                 {token.lineNumber && `:${token.lineNumber}`}
               </span>
@@ -617,8 +628,8 @@ function TokenBadge({
 
             {/* Confidence indicator */}
             {confidence === "value-only" && (
-              <div className="pt-1 text-amber-600 dark:text-amber-400">
-                ⚠️ Value match only - verify this is the correct token
+              <div style={{ paddingTop: '4px', color: '#d97706' }}>
+                Warning: Value match only - verify this is the correct token
               </div>
             )}
           </div>
@@ -631,8 +642,15 @@ function TokenBadge({
 function ColorSwatch({ color }: { color: string }) {
   return (
     <div
-      className="w-4 h-4 rounded border border-[--border] flex-shrink-0 ml-1"
-      style={{ backgroundColor: color }}
+      style={{
+        width: '16px',
+        height: '16px',
+        borderRadius: '4px',
+        border: '1px solid var(--border)',
+        flexShrink: 0,
+        marginLeft: '4px',
+        backgroundColor: color,
+      }}
       title={color}
     />
   );

package/src/viewer/components/UsageSection.tsx

@@ -16,22 +16,22 @@ export function UsageSection({ usage }: UsageSectionProps) {
   }
 
   return (
-    <section id="usage" className="scroll-mt-24">
-      <h2 className="text-base font-semibold text-primary mb-5">Usage</h2>
+    <section id="usage" style={{ scrollMarginTop: '96px' }}>
+      <h2 style={{ fontSize: '16px', fontWeight: 600, color: 'var(--text-primary)', marginBottom: '20px' }}>Usage</h2>
 
       {/* When to use / When not to use */}
       {(hasWhen || hasWhenNot) && (
-        <div className="grid md:grid-cols-2 gap-8 mb-8">
+        <div style={{ display: 'grid', gridTemplateColumns: hasWhen && hasWhenNot ? '1fr 1fr' : '1fr', gap: '32px', marginBottom: '32px' }}>
           {hasWhen && (
-            <div className="p-4 rounded-xl bg-[--color-success-bg] border border-[--color-success]/20">
-              <h3 className="text-[13px] font-medium text-[--color-success] mb-3 flex items-center gap-2">
-                <CheckIcon className="w-4 h-4" />
+            <div style={{ padding: '16px', borderRadius: '12px', background: 'var(--color-success-bg)', border: '1px solid rgba(16, 163, 127, 0.2)' }}>
+              <h3 style={{ fontSize: '13px', fontWeight: 500, color: 'var(--color-success)', marginBottom: '12px', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                <CheckIcon style={{ width: '16px', height: '16px' }} />
                 When to use
               </h3>
-              <ul className="space-y-2">
+              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '8px' }}>
                 {usage.when!.map((item, index) => (
-                  <li key={index} className="text-[13px] text-primary leading-relaxed flex items-start gap-2">
-                    <span className="text-[--color-success] mt-1.5 text-xs">•</span>
+                  <li key={index} style={{ fontSize: '13px', color: 'var(--text-primary)', lineHeight: 1.6, display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
+                    <span style={{ color: 'var(--color-success)', marginTop: '6px', fontSize: '12px' }}>&#8226;</span>
                     <span>{item}</span>
                   </li>
                 ))}
@@ -40,15 +40,15 @@ export function UsageSection({ usage }: UsageSectionProps) {
           )}
 
           {hasWhenNot && (
-            <div className="p-4 rounded-xl bg-[--color-danger-bg] border border-[--color-danger]/20">
-              <h3 className="text-[13px] font-medium text-[--color-danger] mb-3 flex items-center gap-2">
-                <XIcon className="w-4 h-4" />
+            <div style={{ padding: '16px', borderRadius: '12px', background: 'var(--color-danger-bg)', border: '1px solid rgba(239, 68, 68, 0.2)' }}>
+              <h3 style={{ fontSize: '13px', fontWeight: 500, color: 'var(--color-danger)', marginBottom: '12px', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                <XIcon style={{ width: '16px', height: '16px' }} />
                 When not to use
               </h3>
-              <ul className="space-y-2">
+              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '8px' }}>
                 {usage.whenNot!.map((item, index) => (
-                  <li key={index} className="text-[13px] text-primary leading-relaxed flex items-start gap-2">
-                    <span className="text-[--color-danger] mt-1.5 text-xs">•</span>
+                  <li key={index} style={{ fontSize: '13px', color: 'var(--text-primary)', lineHeight: 1.6, display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
+                    <span style={{ color: 'var(--color-danger)', marginTop: '6px', fontSize: '12px' }}>&#8226;</span>
                     <span>{item}</span>
                   </li>
                 ))}
@@ -60,12 +60,12 @@ export function UsageSection({ usage }: UsageSectionProps) {
 
       {/* Guidelines */}
       {hasGuidelines && (
-        <div className="mb-6">
-          <h3 className="text-[13px] font-medium text-primary mb-3">Guidelines</h3>
-          <ul className="space-y-2">
+        <div style={{ marginBottom: '24px' }}>
+          <h3 style={{ fontSize: '13px', fontWeight: 500, color: 'var(--text-primary)', marginBottom: '12px' }}>Guidelines</h3>
+          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '8px' }}>
             {usage.guidelines!.map((item, index) => (
-              <li key={index} className="text-[13px] text-secondary leading-relaxed flex items-start gap-2">
-                <span className="text-[--color-accent] mt-1.5 text-xs">•</span>
+              <li key={index} style={{ fontSize: '13px', color: 'var(--text-secondary)', lineHeight: 1.6, display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
+                <span style={{ color: 'var(--color-accent)', marginTop: '6px', fontSize: '12px' }}>&#8226;</span>
                 <span>{item}</span>
               </li>
             ))}
@@ -75,15 +75,15 @@ export function UsageSection({ usage }: UsageSectionProps) {
 
       {/* Accessibility */}
       {hasAccessibility && (
-        <div className="p-4 rounded-xl border border-[--border] bg-[--bg-secondary]">
-          <h3 className="text-[13px] font-medium text-primary mb-3 flex items-center gap-2">
-            <AccessibilityIcon className="w-4 h-4 text-secondary" />
+        <div style={{ padding: '16px', borderRadius: '12px', border: '1px solid var(--border)', background: 'var(--bg-secondary)' }}>
+          <h3 style={{ fontSize: '13px', fontWeight: 500, color: 'var(--text-primary)', marginBottom: '12px', display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <AccessibilityIcon style={{ width: '16px', height: '16px', color: 'var(--text-secondary)' }} />
             Accessibility
           </h3>
-          <ul className="space-y-2">
+          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '8px' }}>
             {usage.accessibility!.map((item, index) => (
-              <li key={index} className="text-[13px] text-secondary leading-relaxed flex items-start gap-2">
-                <span className="text-tertiary mt-1.5 text-xs">•</span>
+              <li key={index} style={{ fontSize: '13px', color: 'var(--text-secondary)', lineHeight: 1.6, display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
+                <span style={{ color: 'var(--text-tertiary)', marginTop: '6px', fontSize: '12px' }}>&#8226;</span>
                 <span>{item}</span>
               </li>
             ))}