diff --git a/src/App.css b/src/App.css index 88339c3..cbb287c 100644 --- a/src/App.css +++ b/src/App.css @@ -1,6 +1,129 @@ @import "tailwindcss"; -/* Custom animations for shimmer effect */ +/* ============================================ + THEME DEFINITION - Tailwind v4 + Semantic color system that references Tailwind colors + ============================================ */ + +@theme { + /* PRIMARY - Main brand color (references Blue) */ + --color-primary-50: var(--color-blue-50); + --color-primary-100: var(--color-blue-100); + --color-primary-200: var(--color-blue-200); + --color-primary-300: var(--color-blue-300); + --color-primary-400: var(--color-blue-400); + --color-primary-500: var(--color-blue-500); + --color-primary-600: var(--color-blue-600); + --color-primary-700: var(--color-blue-700); + --color-primary-800: var(--color-blue-800); + --color-primary-900: var(--color-blue-900); + --color-primary-950: var(--color-blue-950); + + /* SUCCESS - Positive states, completion (references Green) */ + --color-success-50: var(--color-green-50); + --color-success-100: var(--color-green-100); + --color-success-200: var(--color-green-200); + --color-success-300: var(--color-green-300); + --color-success-400: var(--color-green-400); + --color-success-500: var(--color-green-500); + --color-success-600: var(--color-green-600); + --color-success-700: var(--color-green-700); + --color-success-800: var(--color-green-800); + --color-success-900: var(--color-green-900); + --color-success-950: var(--color-green-950); + + /* WARNING - Caution, waiting states (references Amber) */ + --color-warning-50: var(--color-amber-50); + --color-warning-100: var(--color-amber-100); + --color-warning-200: var(--color-amber-200); + --color-warning-300: var(--color-amber-300); + --color-warning-400: var(--color-amber-400); + --color-warning-500: var(--color-amber-500); + --color-warning-600: var(--color-amber-600); + --color-warning-700: var(--color-amber-700); + --color-warning-800: var(--color-amber-800); + --color-warning-900: var(--color-amber-900); + --color-warning-950: var(--color-amber-950); + + /* DANGER - Errors, destructive actions (references Red) */ + --color-danger-50: var(--color-red-50); + --color-danger-100: var(--color-red-100); + --color-danger-200: var(--color-red-200); + --color-danger-300: var(--color-red-300); + --color-danger-400: var(--color-red-400); + --color-danger-500: var(--color-red-500); + --color-danger-600: var(--color-red-600); + --color-danger-700: var(--color-red-700); + --color-danger-800: var(--color-red-800); + --color-danger-900: var(--color-red-900); + --color-danger-950: var(--color-red-950); + + /* INFO - Informational states (references Cyan) */ + --color-info-50: var(--color-cyan-50); + --color-info-100: var(--color-cyan-100); + --color-info-200: var(--color-cyan-200); + --color-info-300: var(--color-cyan-300); + --color-info-400: var(--color-cyan-400); + --color-info-500: var(--color-cyan-500); + --color-info-600: var(--color-cyan-600); + --color-info-700: var(--color-cyan-700); + --color-info-800: var(--color-cyan-800); + --color-info-900: var(--color-cyan-900); + --color-info-950: var(--color-cyan-950); + + /* ACCENT - Progress, sewing states (references Purple) */ + --color-accent-50: var(--color-purple-50); + --color-accent-100: var(--color-purple-100); + --color-accent-200: var(--color-purple-200); + --color-accent-300: var(--color-purple-300); + --color-accent-400: var(--color-purple-400); + --color-accent-500: var(--color-purple-500); + --color-accent-600: var(--color-purple-600); + --color-accent-700: var(--color-purple-700); + --color-accent-800: var(--color-purple-800); + --color-accent-900: var(--color-purple-900); + --color-accent-950: var(--color-purple-950); + + /* SECONDARY - Upload operations (references Orange) */ + --color-secondary-50: var(--color-orange-50); + --color-secondary-100: var(--color-orange-100); + --color-secondary-200: var(--color-orange-200); + --color-secondary-300: var(--color-orange-300); + --color-secondary-400: var(--color-orange-400); + --color-secondary-500: var(--color-orange-500); + --color-secondary-600: var(--color-orange-600); + --color-secondary-700: var(--color-orange-700); + --color-secondary-800: var(--color-orange-800); + --color-secondary-900: var(--color-orange-900); + --color-secondary-950: var(--color-orange-950); + + /* TERTIARY - Pattern canvas theme (references Teal) */ + --color-tertiary-500: var(--color-teal-500); + --color-tertiary-600: var(--color-teal-600); + + /* Canvas/Konva-specific colors for embroidery rendering */ + --color-canvas-grid: #e0e0e0; + --color-canvas-origin: #888888; + --color-canvas-hoop: #2196F3; + --color-canvas-bounds: #ff0000; + --color-canvas-position: #ff0000; +} + +/* Dark Mode Overrides - Media Query */ +@media (prefers-color-scheme: dark) { + @theme { + /* Canvas colors adjusted for dark mode */ + --color-canvas-grid: #404040; + --color-canvas-origin: #999999; + /* hoop, bounds, position stay the same for visibility */ + } +} + +/* ============================================ + CUSTOM ANIMATIONS + ============================================ */ + +/* Shimmer effect for progress bars */ @keyframes shimmer { 0% { transform: translateX(-100%); @@ -44,13 +167,13 @@ } } -/* Pulse glow effect */ +/* Pulse glow effect - uses primary-600 */ @keyframes pulseGlow { 0%, 100% { - box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); + box-shadow: 0 0 0 0 rgb(37 99 235 / 0.4); /* primary-600 with 40% opacity */ } 50% { - box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); + box-shadow: 0 0 0 8px rgb(37 99 235 / 0); /* primary-600 fully transparent */ } } diff --git a/src/App.tsx b/src/App.tsx index c9bb4cc..9a6f49c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -67,7 +67,7 @@ function App() { }, [resumedPattern, resumeFileName, pesData, setPattern, setPatternOffset]); return ( -
+
diff --git a/src/components/AppHeader.tsx b/src/components/AppHeader.tsx index d11ab61..1ffacad 100644 --- a/src/components/AppHeader.tsx +++ b/src/components/AppHeader.tsx @@ -86,18 +86,18 @@ export function AppHeader() { }, [showErrorPopover, setErrorPopover]); return ( -
+
{/* Machine Connection Status - Responsive width column */}
-
+

Respira

{isConnected && machineInfo?.serialNumber && ( )} {isPolling && ( - + )}
@@ -124,7 +124,7 @@ export function AppHeader() { <> @@ -35,17 +35,17 @@ export function ConnectionPrompt() { } return ( -
+
- +
-

Browser Not Supported

-

+

Browser Not Supported

+

Your browser doesn't support Web Bluetooth, which is required to connect to your embroidery machine.

-

Please try one of these options:

-
    +

    Please try one of these options:

    +
    • Use a supported browser (Chrome, Edge, or Opera)
    • Download the Desktop app from{' '} @@ -53,7 +53,7 @@ export function ConnectionPrompt() { href="https://github.com/jhbruhn/respira/releases/latest" target="_blank" rel="noopener noreferrer" - className="font-semibold underline hover:text-amber-900 dark:hover:text-amber-50 transition-colors" + className="font-semibold underline hover:text-warning-900 dark:hover:text-warning-50 transition-colors" > GitHub Releases diff --git a/src/components/ErrorPopover.tsx b/src/components/ErrorPopover.tsx index 6f09705..25e8ebd 100644 --- a/src/components/ErrorPopover.tsx +++ b/src/components/ErrorPopover.tsx @@ -17,24 +17,24 @@ export const ErrorPopover = forwardRef( const isInfo = isPairingErr || errorDetails?.isInformational; const bgColor = isInfo - ? 'bg-blue-50 dark:bg-blue-900/95 border-blue-600 dark:border-blue-500' - : 'bg-red-50 dark:bg-red-900/95 border-red-600 dark:border-red-500'; + ? 'bg-info-50 dark:bg-info-900/95 border-info-600 dark:border-info-500' + : 'bg-danger-50 dark:bg-danger-900/95 border-danger-600 dark:border-danger-500'; const iconColor = isInfo - ? 'text-blue-600 dark:text-blue-400' - : 'text-red-600 dark:text-red-400'; + ? 'text-info-600 dark:text-info-400' + : 'text-danger-600 dark:text-danger-400'; const textColor = isInfo - ? 'text-blue-900 dark:text-blue-200' - : 'text-red-900 dark:text-red-200'; + ? 'text-info-900 dark:text-info-200' + : 'text-danger-900 dark:text-danger-200'; const descColor = isInfo - ? 'text-blue-800 dark:text-blue-300' - : 'text-red-800 dark:text-red-300'; + ? 'text-info-800 dark:text-info-300' + : 'text-danger-800 dark:text-danger-300'; const listColor = isInfo - ? 'text-blue-700 dark:text-blue-300' - : 'text-red-700 dark:text-red-300'; + ? 'text-info-700 dark:text-info-300' + : 'text-danger-700 dark:text-danger-300'; const Icon = isInfo ? InformationCircleIcon : ExclamationTriangleIcon; const title = errorDetails?.title || (isPairingErr ? 'Pairing Required' : 'Error'); diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx index 16754f7..3eedd4e 100644 --- a/src/components/FileUpload.tsx +++ b/src/components/FileUpload.tsx @@ -171,8 +171,8 @@ export function FileUpload() { const boundsCheck = checkPatternFitsInHoop(); - const borderColor = pesData ? 'border-orange-600 dark:border-orange-500' : 'border-gray-400 dark:border-gray-600'; - const iconColor = pesData ? 'text-orange-600 dark:text-orange-400' : 'text-gray-600 dark:text-gray-400'; + const borderColor = pesData ? 'border-secondary-600 dark:border-secondary-500' : 'border-gray-400 dark:border-gray-600'; + const iconColor = pesData ? 'text-secondary-600 dark:text-secondary-400' : 'text-gray-600 dark:text-gray-400'; return (
      @@ -191,8 +191,8 @@ export function FileUpload() {
      {resumeAvailable && resumeFileName && ( -
      -

      +

      +

      Cached: "{resumeFileName}"

      @@ -249,7 +249,7 @@ export function FileUpload() {
      @@ -303,13 +303,13 @@ export function FileUpload() { marginTop: (pesData && (boundsCheck.error || !canUploadPattern(machineStatus))) ? '12px' : '0px' }}> {pesData && !canUploadPattern(machineStatus) && ( -
      +
      Cannot upload while {getMachineStateCategory(machineStatus)}
      )} {pesData && boundsCheck.error && ( -
      +
      Pattern too large: {boundsCheck.error}
      )} @@ -319,13 +319,13 @@ export function FileUpload() {
      Uploading - + {uploadProgress > 0 ? uploadProgress.toFixed(1) + '%' : 'Starting...'}
      diff --git a/src/components/KonvaComponents.tsx b/src/components/KonvaComponents.tsx index d9bce9d..146471d 100644 --- a/src/components/KonvaComponents.tsx +++ b/src/components/KonvaComponents.tsx @@ -4,6 +4,7 @@ import type { PesPatternData } from '../formats/import/pesImporter'; import { getThreadColor } from '../formats/import/pesImporter'; import type { MachineInfo } from '../types/machine'; import { MOVE } from '../formats/import/constants'; +import { canvasColors } from '../utils/cssVariables'; interface GridProps { gridSize: number; @@ -34,9 +35,7 @@ export const Grid = memo(({ gridSize, bounds, machineInfo }: GridProps) => { return { verticalLines, horizontalLines }; }, [gridSize, bounds, machineInfo]); - // Detect dark mode - const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; - const gridColor = isDarkMode ? '#404040' : '#e0e0e0'; + const gridColor = canvasColors.grid(); return ( @@ -63,8 +62,7 @@ export const Grid = memo(({ gridSize, bounds, machineInfo }: GridProps) => { Grid.displayName = 'Grid'; export const Origin = memo(() => { - const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; - const originColor = isDarkMode ? '#999' : '#888'; + const originColor = canvasColors.origin(); return ( @@ -84,6 +82,7 @@ export const Hoop = memo(({ machineInfo }: HoopProps) => { const { maxWidth, maxHeight } = machineInfo; const hoopLeft = -maxWidth / 2; const hoopTop = -maxHeight / 2; + const hoopColor = canvasColors.hoop(); return ( @@ -92,7 +91,7 @@ export const Hoop = memo(({ machineInfo }: HoopProps) => { y={hoopTop} width={maxWidth} height={maxHeight} - stroke="#2196F3" + stroke={hoopColor} strokeWidth={3} dash={[10, 5]} /> @@ -103,7 +102,7 @@ export const Hoop = memo(({ machineInfo }: HoopProps) => { fontSize={14} fontFamily="sans-serif" fontStyle="bold" - fill="#2196F3" + fill={hoopColor} /> ); @@ -119,6 +118,7 @@ export const PatternBounds = memo(({ bounds }: PatternBoundsProps) => { const { minX, maxX, minY, maxY } = bounds; const width = maxX - minX; const height = maxY - minY; + const boundsColor = canvasColors.bounds(); return ( { y={minY} width={width} height={height} - stroke="#ff0000" + stroke={boundsColor} strokeWidth={2} dash={[5, 5]} /> @@ -231,6 +231,7 @@ export const CurrentPosition = memo(({ currentStitchIndex, stitches }: CurrentPo } const [x, y] = stitches[currentStitchIndex]; + const positionColor = canvasColors.position(); return ( @@ -238,14 +239,14 @@ export const CurrentPosition = memo(({ currentStitchIndex, stitches }: CurrentPo x={x} y={y} radius={8} - fill="rgba(255, 0, 0, 0.3)" - stroke="#ff0000" + fill={`${positionColor}4d`} + stroke={positionColor} strokeWidth={3} /> - - - - + + + + ); }); diff --git a/src/components/MachineConnection.tsx b/src/components/MachineConnection.tsx index af8cb5f..dee49b5 100644 --- a/src/components/MachineConnection.tsx +++ b/src/components/MachineConnection.tsx @@ -61,16 +61,16 @@ export function MachineConnection({ }; const statusBadgeColors = { - idle: 'bg-cyan-100 dark:bg-cyan-900/30 text-cyan-800 dark:text-cyan-300', - info: 'bg-cyan-100 dark:bg-cyan-900/30 text-cyan-800 dark:text-cyan-300', - active: 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300', - waiting: 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300', - warning: 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300', - complete: 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300', - success: 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300', - interrupted: 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300', - error: 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300', - danger: 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300', + idle: 'bg-info-100 dark:bg-info-900/30 text-info-800 dark:text-info-300', + info: 'bg-info-100 dark:bg-info-900/30 text-info-800 dark:text-info-300', + active: 'bg-warning-100 dark:bg-warning-900/30 text-warning-800 dark:text-warning-300', + waiting: 'bg-warning-100 dark:bg-warning-900/30 text-warning-800 dark:text-warning-300', + warning: 'bg-warning-100 dark:bg-warning-900/30 text-warning-800 dark:text-warning-300', + complete: 'bg-success-100 dark:bg-success-900/30 text-success-800 dark:text-success-300', + success: 'bg-success-100 dark:bg-success-900/30 text-success-800 dark:text-success-300', + interrupted: 'bg-danger-100 dark:bg-danger-900/30 text-danger-800 dark:text-danger-300', + error: 'bg-danger-100 dark:bg-danger-900/30 text-danger-800 dark:text-danger-300', + danger: 'bg-danger-100 dark:bg-danger-900/30 text-danger-800 dark:text-danger-300', }; // Only show error info when connected AND there's an actual error @@ -90,15 +90,15 @@ export function MachineConnection({
      ) : ( -
      +
      - +

      Machine Info

      @@ -110,21 +110,21 @@ export function MachineConnection({ {/* Error/Info Display */} {errorInfo && ( errorInfo.isInformational ? ( -

      +
      - +
      -
      {errorInfo.title}
      +
      {errorInfo.title}
      ) : ( -
      +
      - ⚠️ + ⚠️
      -
      {errorInfo.title}
      -
      +
      {errorInfo.title}
      +
      Error Code: 0x{machineError.toString(16).toUpperCase().padStart(2, '0')}
      @@ -148,14 +148,14 @@ export function MachineConnection({ {/* Machine Info */} {machineInfo && (
      -
      +
      Max Area {(machineInfo.maxWidth / 10).toFixed(1)} × {(machineInfo.maxHeight / 10).toFixed(1)} mm
      {machineInfo.totalCount !== undefined && ( -
      +
      Total Stitches {machineInfo.totalCount.toLocaleString()} diff --git a/src/components/PatternCanvas.tsx b/src/components/PatternCanvas.tsx index 9869f2a..2b14a8d 100644 --- a/src/components/PatternCanvas.tsx +++ b/src/components/PatternCanvas.tsx @@ -213,8 +213,8 @@ export function PatternCanvas() { setPatternOffset(newOffset.x, newOffset.y); }, [setPatternOffset]); - const borderColor = pesData ? 'border-teal-600 dark:border-teal-500' : 'border-gray-400 dark:border-gray-600'; - const iconColor = pesData ? 'text-teal-600 dark:text-teal-400' : 'text-gray-600 dark:text-gray-400'; + const borderColor = pesData ? 'border-tertiary-600 dark:border-tertiary-500' : 'border-gray-400 dark:border-gray-600'; + const iconColor = pesData ? 'text-tertiary-600 dark:text-tertiary-400' : 'text-gray-600 dark:text-gray-400'; return (
      @@ -231,7 +231,7 @@ export function PatternCanvas() { )}
      -
      +
      {containerSize.width > 0 && ( )}
      -
      +
      X: {(localPatternOffset.x / 10).toFixed(1)}mm, Y: {(localPatternOffset.y / 10).toFixed(1)}mm
      @@ -402,17 +402,17 @@ export function PatternCanvas() { {/* Zoom Controls Overlay */}
      - - {Math.round(stageScale * 100)}% - -
      diff --git a/src/components/PatternInfo.tsx b/src/components/PatternInfo.tsx index efff798..cbb3d17 100644 --- a/src/components/PatternInfo.tsx +++ b/src/components/PatternInfo.tsx @@ -9,14 +9,14 @@ export function PatternInfo({ pesData, showThreadBlocks = false }: PatternInfoPr return ( <>
      -
      +
      Size {((pesData.bounds.maxX - pesData.bounds.minX) / 10).toFixed(1)} x{' '} {((pesData.bounds.maxY - pesData.bounds.minY) / 10).toFixed(1)} mm
      -
      +
      Stitches {pesData.penStitches?.stitches.length.toLocaleString() || pesData.stitchCount.toLocaleString()} @@ -30,7 +30,7 @@ export function PatternInfo({ pesData, showThreadBlocks = false }: PatternInfoPr )}
      -
      +
      {showThreadBlocks ? 'Colors / Blocks' : 'Colors'} diff --git a/src/components/PatternPreviewPlaceholder.tsx b/src/components/PatternPreviewPlaceholder.tsx index 2cebbd4..b46bdd2 100644 --- a/src/components/PatternPreviewPlaceholder.tsx +++ b/src/components/PatternPreviewPlaceholder.tsx @@ -15,8 +15,8 @@ export function PatternPreviewPlaceholder() { -
      - +
      +
      @@ -27,15 +27,15 @@ export function PatternPreviewPlaceholder() {

      -
      +
      Drag to Position
      -
      +
      Zoom & Pan
      -
      +
      Real-time Preview
      diff --git a/src/components/PatternSummaryCard.tsx b/src/components/PatternSummaryCard.tsx index a094f35..cd809e0 100644 --- a/src/components/PatternSummaryCard.tsx +++ b/src/components/PatternSummaryCard.tsx @@ -34,9 +34,9 @@ export function PatternSummaryCard() { const canDelete = canDeletePattern(machineStatus); return ( -
      +
      - +

      Active Pattern

      @@ -51,7 +51,7 @@ export function PatternSummaryCard() {