@getmicdrop/svelte-components 5.5.1 → 5.5.5

package/dist/telemetry.spec.js

@@ -74,6 +74,7 @@ describe('Telemetry Module', () => {
   let originalWindow;
   let originalDocument;
   let mockSpan;
+  let mockTracer;
 
   beforeEach(async () => {
     vi.resetModules();
@@ -82,6 +83,20 @@ describe('Telemetry Module', () => {
     originalWindow = global.window;
     originalDocument = global.document;
 
+    // Create mock span
+    mockSpan = {
+      setAttribute: vi.fn(),
+      setStatus: vi.fn(),
+      recordException: vi.fn(),
+      end: vi.fn(),
+      name: 'test-span',
+    };
+
+    // Create mock tracer
+    mockTracer = {
+      startSpan: vi.fn().mockReturnValue(mockSpan),
+    };
+
     // Setup mock window
     global.window = {
       location: {
@@ -107,15 +122,6 @@ describe('Telemetry Module', () => {
       platform: 'test-platform',
     };
 
-    // Create mock span
-    mockSpan = {
-      setAttribute: vi.fn(),
-      setStatus: vi.fn(),
-      recordException: vi.fn(),
-      end: vi.fn(),
-      name: 'test-span',
-    };
-
     // Re-import with fresh mocks
     telemetry = await import('./telemetry.js');
   });
@@ -207,6 +213,11 @@ describe('Telemetry Module', () => {
     it('can be called with page path and title', () => {
       expect(() => telemetry.trackPageView('/test-page', 'Test Page Title')).not.toThrow();
     });
+
+    it('returns early when tracer is not initialized', () => {
+      const result = telemetry.trackPageView('/test');
+      expect(result).toBeUndefined();
+    });
   });
 
   describe('trackEvent', () => {
@@ -435,9 +446,10 @@ describe('Telemetry with traces disabled', () => {
   });
 
   it('initTelemetry returns early when tracing is disabled', () => {
-    const consoleSpy = vi.spyOn(console, 'log');
-    telemetry.initTelemetry();
-    expect(consoleSpy).toHaveBeenCalledWith('[Telemetry] Tracing is disabled');
+    // Should return early without throwing when traces are disabled
+    expect(() => telemetry.initTelemetry({ tracesEnabled: false })).not.toThrow();
+    // Verify tracer is not initialized (trackPageView should be a no-op)
+    expect(() => telemetry.trackPageView('/test')).not.toThrow();
   });
 });
 
@@ -659,3 +671,474 @@ describe('Telemetry beforeunload event', () => {
     }
   });
 });
+
+describe('getTelemetryConfig', () => {
+  let telemetry;
+
+  beforeEach(async () => {
+    vi.resetModules();
+
+    global.window = {
+      location: {
+        pathname: '/performers',
+        search: '',
+        hash: '',
+        href: 'http://localhost/performers',
+      },
+      addEventListener: vi.fn(),
+      __TRACE_CONTEXT__: null,
+    };
+
+    global.document = {
+      readyState: 'complete',
+      title: 'Test',
+      referrer: '',
+      addEventListener: vi.fn(),
+    };
+
+    global.navigator = {
+      userAgent: 'test',
+      language: 'en',
+      platform: 'test',
+    };
+
+    telemetry = await import('./telemetry.js');
+  });
+
+  afterEach(() => {
+    vi.unstubAllEnvs();
+    vi.clearAllMocks();
+  });
+
+  it('exports getTelemetryConfig function', () => {
+    expect(telemetry.getTelemetryConfig).toBeDefined();
+    expect(typeof telemetry.getTelemetryConfig).toBe('function');
+  });
+
+  it('returns telemetry configuration object', () => {
+    const config = telemetry.getTelemetryConfig();
+    expect(config).toBeDefined();
+    expect(config).toHaveProperty('serviceName');
+    expect(config).toHaveProperty('serviceVersion');
+    expect(config).toHaveProperty('environment');
+    expect(config).toHaveProperty('tracesEnabled');
+  });
+});
+
+describe('setupAutoTelemetry', () => {
+  let telemetry;
+
+  beforeEach(async () => {
+    vi.resetModules();
+
+    global.window = {
+      location: {
+        pathname: '/performers',
+        search: '',
+        hash: '',
+        href: 'http://localhost/performers',
+      },
+      addEventListener: vi.fn(),
+      __TRACE_CONTEXT__: null,
+    };
+
+    global.document = {
+      readyState: 'complete',
+      title: 'Test',
+      referrer: '',
+      addEventListener: vi.fn(),
+    };
+
+    global.navigator = {
+      userAgent: 'test',
+      language: 'en',
+      platform: 'test',
+    };
+
+    telemetry = await import('./telemetry.js');
+  });
+
+  afterEach(() => {
+    vi.unstubAllEnvs();
+    vi.clearAllMocks();
+  });
+
+  it('exports setupAutoTelemetry function', () => {
+    expect(telemetry.setupAutoTelemetry).toBeDefined();
+    expect(typeof telemetry.setupAutoTelemetry).toBe('function');
+  });
+
+  it('can be called without errors', () => {
+    expect(() => telemetry.setupAutoTelemetry()).not.toThrow();
+  });
+
+  it('does not throw when window is undefined', () => {
+    const tempWindow = global.window;
+    delete global.window;
+
+    expect(() => telemetry.setupAutoTelemetry()).not.toThrow();
+
+    global.window = tempWindow;
+  });
+});
+
+describe('Telemetry tracking with initialized tracer', () => {
+  let telemetry;
+  let mockSpan;
+  let mockTracer;
+  let mockTracerProvider;
+
+  beforeEach(async () => {
+    vi.resetModules();
+
+    // Create mock span
+    mockSpan = {
+      setAttribute: vi.fn().mockReturnThis(),
+      setStatus: vi.fn().mockReturnThis(),
+      recordException: vi.fn().mockReturnThis(),
+      end: vi.fn(),
+      name: 'test-span',
+    };
+
+    // Create mock tracer
+    mockTracer = {
+      startSpan: vi.fn().mockReturnValue(mockSpan),
+    };
+
+    // Create mock tracer provider
+    mockTracerProvider = {
+      addSpanProcessor: vi.fn(),
+      register: vi.fn(),
+      getTracer: vi.fn().mockReturnValue(mockTracer),
+      shutdown: vi.fn().mockResolvedValue(undefined),
+    };
+
+    // Mock WebTracerProvider to return our mock
+    vi.doMock('@opentelemetry/sdk-trace-web', () => ({
+      WebTracerProvider: vi.fn().mockImplementation(() => mockTracerProvider),
+    }));
+
+    // Mock registerInstrumentations to avoid instrumentation errors
+    vi.doMock('@opentelemetry/instrumentation', () => ({
+      registerInstrumentations: vi.fn(),
+    }));
+
+    global.window = {
+      location: {
+        pathname: '/performers',
+        search: '?test=1',
+        hash: '#section',
+        href: 'http://localhost/performers?test=1#section',
+      },
+      addEventListener: vi.fn(),
+      __TRACE_CONTEXT__: null,
+    };
+
+    global.document = {
+      readyState: 'complete',
+      title: 'Test Page',
+      referrer: 'http://localhost/',
+      addEventListener: vi.fn(),
+    };
+
+    global.navigator = {
+      userAgent: 'test-agent',
+      language: 'en-US',
+      platform: 'test-platform',
+    };
+
+    telemetry = await import('./telemetry.js');
+
+    // Initialize telemetry to set up tracer
+    telemetry.initTelemetry();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    vi.doUnmock('@opentelemetry/sdk-trace-web');
+    vi.doUnmock('@opentelemetry/instrumentation');
+  });
+
+  describe('trackPageView with tracer', () => {
+    it('creates a span with page attributes', () => {
+      telemetry.trackPageView('/test-page', 'Test Title');
+
+      expect(mockTracer.startSpan).toHaveBeenCalledWith('page_view', expect.objectContaining({
+        attributes: expect.objectContaining({
+          'page.path': '/test-page',
+          'page.title': 'Test Title',
+        }),
+      }));
+      expect(mockSpan.end).toHaveBeenCalled();
+    });
+
+    it('uses document title when pageTitle is not provided', () => {
+      telemetry.trackPageView('/test-page');
+
+      expect(mockTracer.startSpan).toHaveBeenCalledWith('page_view', expect.objectContaining({
+        attributes: expect.objectContaining({
+          'page.title': 'Test Page',
+        }),
+      }));
+    });
+  });
+
+  describe('trackEvent with tracer', () => {
+    it('creates a span with event attributes', () => {
+      telemetry.trackEvent('button_click', { button_id: 'submit' });
+
+      expect(mockTracer.startSpan).toHaveBeenCalledWith('event.button_click', expect.objectContaining({
+        attributes: expect.objectContaining({
+          'event.name': 'button_click',
+          'button_id': 'submit',
+        }),
+      }));
+      expect(mockSpan.end).toHaveBeenCalled();
+    });
+
+    it('creates a span without additional attributes', () => {
+      telemetry.trackEvent('page_load');
+
+      expect(mockTracer.startSpan).toHaveBeenCalledWith('event.page_load', expect.objectContaining({
+        attributes: expect.objectContaining({
+          'event.name': 'page_load',
+        }),
+      }));
+    });
+  });
+
+  describe('trackError with tracer', () => {
+    it('creates a span with error details', () => {
+      const error = new Error('Test error');
+      error.stack = 'Error: Test error\n    at line 1';
+
+      telemetry.trackError(error, { component: 'TestComponent' });
+
+      expect(mockTracer.startSpan).toHaveBeenCalledWith('error', expect.objectContaining({
+        attributes: expect.objectContaining({
+          'error.message': 'Test error',
+          'error.stack': error.stack,
+          'error.type': 'Error',
+        }),
+      }));
+      expect(mockSpan.setStatus).toHaveBeenCalledWith({ code: 2, message: 'Test error' });
+      expect(mockSpan.recordException).toHaveBeenCalledWith(error);
+      expect(mockSpan.end).toHaveBeenCalled();
+    });
+
+    it('handles error without stack trace', () => {
+      const error = { message: 'Simple error', name: 'SimpleError' };
+
+      telemetry.trackError(error);
+
+      expect(mockTracer.startSpan).toHaveBeenCalledWith('error', expect.objectContaining({
+        attributes: expect.objectContaining({
+          'error.message': 'Simple error',
+          'error.type': 'SimpleError',
+        }),
+      }));
+    });
+
+    it('handles string error', () => {
+      telemetry.trackError('String error');
+
+      expect(mockTracer.startSpan).toHaveBeenCalledWith('error', expect.objectContaining({
+        attributes: expect.objectContaining({
+          'error.message': 'String error',
+        }),
+      }));
+    });
+  });
+
+  describe('trackAPICall with tracer', () => {
+    it('creates a span for successful API call', () => {
+      telemetry.trackAPICall('GET', '/api/users', 200, 150, { user_id: '123' });
+
+      expect(mockTracer.startSpan).toHaveBeenCalledWith('api_call', expect.objectContaining({
+        attributes: expect.objectContaining({
+          'http.method': 'GET',
+          'http.url': '/api/users',
+          'http.status_code': 200,
+          'http.duration_ms': 150,
+          'user_id': '123',
+        }),
+      }));
+      expect(mockSpan.setStatus).toHaveBeenCalledWith({ code: 0 });
+      expect(mockSpan.end).toHaveBeenCalled();
+    });
+
+    it('creates a span for failed API call with 4xx', () => {
+      telemetry.trackAPICall('GET', '/api/users', 404, 50);
+
+      expect(mockSpan.setStatus).toHaveBeenCalledWith({ code: 2 });
+    });
+
+    it('creates a span for failed API call with 5xx', () => {
+      telemetry.trackAPICall('POST', '/api/users', 500, 100);
+
+      expect(mockSpan.setStatus).toHaveBeenCalledWith({ code: 2 });
+    });
+  });
+
+  describe('trackUserAction with tracer', () => {
+    it('creates a span for user action', () => {
+      telemetry.trackUserAction('login', { method: 'email' });
+
+      expect(mockTracer.startSpan).toHaveBeenCalledWith('user.login', expect.objectContaining({
+        attributes: expect.objectContaining({
+          'user.action': 'login',
+          'user.metadata': JSON.stringify({ method: 'email' }),
+        }),
+      }));
+      expect(mockSpan.end).toHaveBeenCalled();
+    });
+
+    it('creates a span without metadata', () => {
+      telemetry.trackUserAction('logout');
+
+      expect(mockTracer.startSpan).toHaveBeenCalledWith('user.logout', expect.objectContaining({
+        attributes: expect.objectContaining({
+          'user.action': 'logout',
+        }),
+      }));
+    });
+  });
+
+  describe('trackPerformerAction with tracer', () => {
+    it('creates a span for performer action', () => {
+      telemetry.trackPerformerAction('profile_update', { field: 'bio' });
+
+      expect(mockTracer.startSpan).toHaveBeenCalledWith('performer.profile_update', expect.objectContaining({
+        attributes: expect.objectContaining({
+          'performer.action': 'profile_update',
+          'performer.metadata': JSON.stringify({ field: 'bio' }),
+        }),
+      }));
+      expect(mockSpan.end).toHaveBeenCalled();
+    });
+
+    it('creates a span without metadata', () => {
+      telemetry.trackPerformerAction('gig_accepted');
+
+      expect(mockTracer.startSpan).toHaveBeenCalledWith('performer.gig_accepted', expect.objectContaining({
+        attributes: expect.objectContaining({
+          'performer.action': 'gig_accepted',
+        }),
+      }));
+    });
+  });
+
+  describe('shutdownTelemetry with tracer', () => {
+    it('shuts down successfully', async () => {
+      await telemetry.shutdownTelemetry();
+
+      expect(mockTracerProvider.shutdown).toHaveBeenCalled();
+      // Debug logging is now controlled by consoleDebug config flag
+    });
+  });
+});
+
+describe('connectWithSSRTrace functionality', () => {
+  let telemetry;
+  let mockSpan;
+  let mockTracer;
+  let mockTracerProvider;
+
+  beforeEach(async () => {
+    vi.resetModules();
+
+    // Create mock span
+    mockSpan = {
+      setAttribute: vi.fn().mockReturnThis(),
+      setStatus: vi.fn().mockReturnThis(),
+      recordException: vi.fn().mockReturnThis(),
+      end: vi.fn(),
+      name: 'client.init',
+    };
+
+    // Create mock tracer
+    mockTracer = {
+      startSpan: vi.fn().mockReturnValue(mockSpan),
+    };
+
+    // Create mock tracer provider
+    mockTracerProvider = {
+      addSpanProcessor: vi.fn(),
+      register: vi.fn(),
+      getTracer: vi.fn().mockReturnValue(mockTracer),
+      shutdown: vi.fn().mockResolvedValue(undefined),
+    };
+
+    // Mock WebTracerProvider to return our mock
+    vi.doMock('@opentelemetry/sdk-trace-web', () => ({
+      WebTracerProvider: vi.fn().mockImplementation(() => mockTracerProvider),
+    }));
+
+    // Mock registerInstrumentations
+    vi.doMock('@opentelemetry/instrumentation', () => ({
+      registerInstrumentations: vi.fn(),
+    }));
+
+    global.window = {
+      location: {
+        pathname: '/performers',
+        search: '',
+        hash: '',
+        href: 'http://localhost/performers',
+      },
+      addEventListener: vi.fn(),
+      __TRACE_CONTEXT__: {
+        traceId: 'test-trace-123',
+        spanId: 'test-span-456',
+        traceFlags: 1,
+      },
+    };
+
+    global.document = {
+      readyState: 'complete',
+      title: 'Test Page',
+      referrer: 'http://localhost/',
+      addEventListener: vi.fn(),
+    };
+
+    global.navigator = {
+      userAgent: 'test-agent',
+      language: 'en-US',
+      platform: 'test-platform',
+    };
+
+    telemetry = await import('./telemetry.js');
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    vi.doUnmock('@opentelemetry/sdk-trace-web');
+    vi.doUnmock('@opentelemetry/instrumentation');
+  });
+
+  it('connects with SSR trace context when available', () => {
+    // Manually call initTelemetry which should also trigger connectWithSSRTrace
+    telemetry.initTelemetry();
+    telemetry.setupAutoTelemetry();
+
+    // Check that a span was created with SSR trace context
+    expect(mockTracer.startSpan).toHaveBeenCalledWith('client.init', expect.objectContaining({
+      attributes: expect.objectContaining({
+        'span.kind': 'client',
+        'client.type': 'browser',
+        'ssr.trace_id': 'test-trace-123',
+        'ssr.span_id': 'test-span-456',
+      }),
+      links: expect.arrayContaining([
+        expect.objectContaining({
+          context: expect.objectContaining({
+            traceId: 'test-trace-123',
+            spanId: 'test-span-456',
+            traceFlags: 1,
+          }),
+        }),
+      ]),
+    }));
+    expect(mockSpan.end).toHaveBeenCalled();
+  });
+});

package/dist/tokens/__tests__/colors.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=colors.test.d.ts.map

package/dist/tokens/__tests__/colors.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.test.d.ts","sourceRoot":"","sources":["../../../src/lib/tokens/__tests__/colors.test.ts"],"names":[],"mappings":""}

package/dist/tokens/__tests__/colors.test.js

@@ -0,0 +1,152 @@
+import { describe, it, expect } from 'vitest';
+import { backgroundColors, textColors, brandColors, accentColors, strokeColors, uiColors, sidebarColors, lightColors, darkColors, colors, legacyAliases } from '../colors';
+describe('Background Colors', () => {
+    it('has light theme background colors', () => {
+        expect(backgroundColors.light['bg-primary']).toBe('0 0% 100%');
+        expect(backgroundColors.light['bg-secondary']).toBe('220 7% 97%');
+        expect(backgroundColors.light['bg-tertiary']).toBe('220 7% 94%');
+        expect(backgroundColors.light['bg-quaternary']).toBe('220 6% 91%');
+    });
+    it('has dark theme background colors', () => {
+        expect(backgroundColors.dark['bg-primary']).toBe('220 20% 18%');
+        expect(backgroundColors.dark['bg-secondary']).toBe('221 50% 10%');
+        expect(backgroundColors.dark['bg-tertiary']).toBe('221 50% 6%');
+        expect(backgroundColors.dark['bg-quaternary']).toBe('0 0% 0%');
+    });
+});
+describe('Text Colors', () => {
+    it('has light theme text colors', () => {
+        expect(textColors.light['text-primary']).toBe('221 50% 10%');
+        expect(textColors.light['text-secondary']).toBe('220 20% 18%');
+        expect(textColors.light['text-tertiary']).toBe('221 9% 44%');
+        expect(textColors.light['text-head']).toBe('221 9% 44%');
+    });
+    it('has dark theme text colors', () => {
+        expect(textColors.dark['text-primary']).toBe('220 7% 97%');
+        expect(textColors.dark['text-secondary']).toBe('220 7% 94%');
+        expect(textColors.dark['text-tertiary']).toBe('220 6% 91%');
+        expect(textColors.dark['text-head']).toBe('220 9% 70%');
+    });
+});
+describe('Brand Colors', () => {
+    it('has light theme brand color', () => {
+        expect(brandColors.light['brand-primary']).toBe('209 99% 50%');
+    });
+    it('has dark theme brand color', () => {
+        expect(brandColors.dark['brand-primary']).toBe('220 89% 63%');
+    });
+});
+describe('Accent Colors', () => {
+    it('has light theme accent colors', () => {
+        expect(accentColors.light['accent-warning']).toBe('28 100% 59%');
+        expect(accentColors.light['accent-danger']).toBe('0 100% 70%');
+        expect(accentColors.light['accent-success']).toBe('131 77% 35%');
+    });
+    it('has dark theme accent colors', () => {
+        expect(accentColors.dark['accent-warning']).toBe('30 100% 70%');
+        expect(accentColors.dark['accent-danger']).toBe('0 100% 70%');
+        expect(accentColors.dark['accent-success']).toBe('142 71% 45%');
+    });
+});
+describe('Stroke Colors', () => {
+    it('has light theme stroke colors', () => {
+        expect(strokeColors.light['stroke-primary']).toBe('216 6% 84%');
+        expect(strokeColors.light['stroke-secondary']).toBe('216 6% 84%');
+        expect(strokeColors.light['border']).toBe('220 13% 91%');
+    });
+    it('has dark theme stroke colors', () => {
+        expect(strokeColors.dark['stroke-primary']).toBe('220 20% 28%');
+        expect(strokeColors.dark['stroke-secondary']).toBe('220 20% 28%');
+        expect(strokeColors.dark['border']).toBe('215 27.9% 16.9%');
+    });
+});
+describe('UI Colors', () => {
+    it('has light theme UI colors', () => {
+        expect(uiColors.light['card']).toBeDefined();
+        expect(uiColors.light['popover']).toBeDefined();
+        expect(uiColors.light['muted']).toBeDefined();
+        expect(uiColors.light['hover-primary']).toBeDefined();
+    });
+    it('has dark theme UI colors', () => {
+        expect(uiColors.dark['card']).toBeDefined();
+        expect(uiColors.dark['popover']).toBeDefined();
+        expect(uiColors.dark['muted']).toBeDefined();
+        expect(uiColors.dark['hover-primary']).toBeDefined();
+    });
+});
+describe('Sidebar Colors', () => {
+    it('has light theme sidebar colors', () => {
+        expect(sidebarColors.light['sidebar-background']).toBeDefined();
+        expect(sidebarColors.light['sidebar-foreground']).toBeDefined();
+        expect(sidebarColors.light['sidebar-border']).toBeDefined();
+        expect(sidebarColors.light['sidebar-primary']).toBeDefined();
+        expect(sidebarColors.light['sidebar-primary-foreground']).toBeDefined();
+    });
+    it('has dark theme sidebar colors', () => {
+        expect(sidebarColors.dark['sidebar-background']).toBeDefined();
+        expect(sidebarColors.dark['sidebar-foreground']).toBeDefined();
+        expect(sidebarColors.dark['sidebar-border']).toBeDefined();
+        expect(sidebarColors.dark['sidebar-primary']).toBeDefined();
+        expect(sidebarColors.dark['sidebar-primary-foreground']).toBeDefined();
+    });
+});
+describe('Combined Color Objects', () => {
+    it('lightColors contains all color categories', () => {
+        // Background
+        expect(lightColors['bg-primary']).toBeDefined();
+        // Text
+        expect(lightColors['text-primary']).toBeDefined();
+        // Brand
+        expect(lightColors['brand-primary']).toBeDefined();
+        // Accent
+        expect(lightColors['accent-warning']).toBeDefined();
+        // Stroke
+        expect(lightColors['stroke-primary']).toBeDefined();
+        // UI
+        expect(lightColors['card']).toBeDefined();
+        // Sidebar
+        expect(lightColors['sidebar-background']).toBeDefined();
+    });
+    it('darkColors contains all color categories', () => {
+        expect(darkColors['bg-primary']).toBeDefined();
+        expect(darkColors['text-primary']).toBeDefined();
+        expect(darkColors['brand-primary']).toBeDefined();
+        expect(darkColors['accent-warning']).toBeDefined();
+        expect(darkColors['stroke-primary']).toBeDefined();
+        expect(darkColors['card']).toBeDefined();
+        expect(darkColors['sidebar-background']).toBeDefined();
+    });
+    it('colors object has light and dark themes', () => {
+        expect(colors.light).toEqual(lightColors);
+        expect(colors.dark).toEqual(darkColors);
+    });
+    it('colors object has legacy aliases', () => {
+        expect(colors.aliases).toEqual(legacyAliases);
+    });
+});
+describe('Legacy Aliases', () => {
+    it('maps PascalCase to kebab-case', () => {
+        expect(legacyAliases['BG-Primary']).toBe('bg-primary');
+        expect(legacyAliases['BG-Secondary']).toBe('bg-secondary');
+        expect(legacyAliases['Text-Primary']).toBe('text-primary');
+        expect(legacyAliases['Brand-Primary']).toBe('brand-primary');
+        expect(legacyAliases['Accent-Warning']).toBe('accent-warning');
+        expect(legacyAliases['Accent-Danger']).toBe('accent-danger');
+        expect(legacyAliases['Accent-Success']).toBe('accent-success');
+        expect(legacyAliases['Stroke-Primary']).toBe('stroke-primary');
+    });
+    it('has typo-preserved legacy alias for tertiary', () => {
+        // Note: Original has typo "Tartiary"
+        expect(legacyAliases['Text-Tartiary']).toBe('text-tertiary');
+    });
+});
+describe('Color Value Format', () => {
+    it('uses HSL channel format (H S% L%)', () => {
+        // All values should be in "H S% L%" format for Tailwind compatibility
+        const hslPattern = /^\d+(\.\d+)?\s+\d+(\.\d+)?%\s+\d+(\.\d+)?%$/;
+        expect(lightColors['bg-primary']).toMatch(hslPattern);
+        expect(lightColors['text-primary']).toMatch(hslPattern);
+        expect(darkColors['bg-primary']).toMatch(hslPattern);
+        expect(darkColors['text-primary']).toMatch(hslPattern);
+    });
+});