diff --git a/@packages/@ui/locale-pipeline-admin/src/components/LocaleFileSelector.tsx b/@packages/@ui/locale-pipeline-admin/src/components/LocaleFileSelector.tsx
index 12e758fec..5bebb684d 100644
--- a/@packages/@ui/locale-pipeline-admin/src/components/LocaleFileSelector.tsx
+++ b/@packages/@ui/locale-pipeline-admin/src/components/LocaleFileSelector.tsx
@@ -66,7 +66,7 @@ const FilterInput = styled.div`
   align-items: center;
   gap: ${(props) => props.theme.spacing.xs};
   padding: ${(props) => props.theme.spacing.xs} ${(props) => props.theme.spacing.sm};
-  border: 1px solid ${(props) => props.theme.colors.border};
+  border: 1px solid ${(props) => props.theme.colors.border.toString()};
   border-radius: ${(props) => props.theme.borderRadius.sm};
   flex: 1;
   max-width: 250px;
@@ -82,7 +82,7 @@ const FilterInput = styled.div`
 `;
 
 const CategoryGroup = styled.div`
-  border: 1px solid ${(props) => props.theme.colors.border};
+  border: 1px solid ${(props) => props.theme.colors.border.toString()};
   border-radius: ${(props) => props.theme.borderRadius.md};
   overflow: hidden;
 `;
@@ -93,7 +93,7 @@ const CategoryHeader = styled.div`
   justify-content: space-between;
   padding: ${(props) => props.theme.spacing.sm} ${(props) => props.theme.spacing.md};
   background: ${(props) => props.theme.colors.surface};
-  border-bottom: 1px solid ${(props) => props.theme.colors.border};
+  border-bottom: 1px solid ${(props) => props.theme.colors.border.toString()};
   font-weight: ${(props) => props.theme.typography.fontWeight.medium};
   font-size: ${(props) => props.theme.typography.fontSize.sm};
   cursor: pointer;
@@ -129,7 +129,7 @@ const FileRow = styled.label<{ $selected: boolean }>`
   }
 
   &:not(:last-child) {
-    border-bottom: 1px solid ${(props) => props.theme.colors.border}50;
+    border-bottom: 1px solid ${(props) => `${props.theme.colors.border}50`};
   }
 `;
 
@@ -201,8 +201,8 @@ const LoadingState = styled.div`
 
 const ErrorState = styled.div`
   padding: ${(props) => props.theme.spacing.lg};
-  color: ${(props) => props.theme.colors.error};
-  background: ${(props) => props.theme.colors.error}10;
+  color: ${(props) => props.theme.colors.error.toString()};
+  background: ${(props) => `${props.theme.colors.error}10`};
   border-radius: ${(props) => props.theme.borderRadius.md};
 `;
 
diff --git a/@packages/@ui/locale-pipeline-admin/src/components/LocalePathSelector.tsx b/@packages/@ui/locale-pipeline-admin/src/components/LocalePathSelector.tsx
index 9101f178f..827094ea0 100644
--- a/@packages/@ui/locale-pipeline-admin/src/components/LocalePathSelector.tsx
+++ b/@packages/@ui/locale-pipeline-admin/src/components/LocalePathSelector.tsx
@@ -68,7 +68,7 @@ const FilterInput = styled.div`
   align-items: center;
   gap: ${(props) => props.theme.spacing.xs};
   padding: ${(props) => props.theme.spacing.xs} ${(props) => props.theme.spacing.sm};
-  border: 1px solid ${(props) => props.theme.colors.border};
+  border: 1px solid ${(props) => props.theme.colors.border.toString()};
   border-radius: ${(props) => props.theme.borderRadius.sm};
   flex: 1;
   max-width: 250px;
@@ -84,7 +84,7 @@ const FilterInput = styled.div`
 `;
 
 const CategoryGroup = styled.div`
-  border: 1px solid ${(props) => props.theme.colors.border};
+  border: 1px solid ${(props) => props.theme.colors.border.toString()};
   border-radius: ${(props) => props.theme.borderRadius.md};
   overflow: hidden;
 `;
@@ -95,7 +95,7 @@ const CategoryHeader = styled.div`
   justify-content: space-between;
   padding: ${(props) => props.theme.spacing.sm} ${(props) => props.theme.spacing.md};
   background: ${(props) => props.theme.colors.surface};
-  border-bottom: 1px solid ${(props) => props.theme.colors.border};
+  border-bottom: 1px solid ${(props) => props.theme.colors.border.toString()};
   font-weight: ${(props) => props.theme.typography.fontWeight.medium};
   font-size: ${(props) => props.theme.typography.fontSize.sm};
   cursor: pointer;
@@ -132,7 +132,7 @@ const FileRow = styled.div<{ $selected: boolean; $expanded?: boolean }>`
   }
 
   &:not(:last-child) {
-    border-bottom: 1px solid ${(props) => props.theme.colors.border}50;
+    border-bottom: 1px solid ${(props) => `${props.theme.colors.border}50`};
   }
 `;
 
@@ -206,7 +206,7 @@ const statusLabels: Record<CacheStatus, string> = {
 
 const KeysContainer = styled.div`
   background: ${(props) => props.theme.colors.background.secondary};
-  border-top: 1px solid ${(props) => props.theme.colors.border};
+  border-top: 1px solid ${(props) => props.theme.colors.border.toString()};
 `;
 
 const KeyRow = styled.label<{ $selected: boolean; $depth: number }>`
@@ -227,7 +227,7 @@ const KeyRow = styled.label<{ $selected: boolean; $depth: number }>`
   }
 
   &:not(:last-child) {
-    border-bottom: 1px solid ${(props) => props.theme.colors.border}30;
+    border-bottom: 1px solid ${(props) => `${props.theme.colors.border}30`};
   }
 `;
 
@@ -253,8 +253,8 @@ const LoadingState = styled.div`
 
 const ErrorState = styled.div`
   padding: ${(props) => props.theme.spacing.lg};
-  color: ${(props) => props.theme.colors.error};
-  background: ${(props) => props.theme.colors.error}10;
+  color: ${(props) => props.theme.colors.error.toString()};
+  background: ${(props) => `${props.theme.colors.error}10`};
   border-radius: ${(props) => props.theme.borderRadius.md};
 `;
 
diff --git a/@packages/@ui/locale-pipeline-admin/src/components/PipelineProgress.tsx b/@packages/@ui/locale-pipeline-admin/src/components/PipelineProgress.tsx
index 145037ff1..f84bb4f40 100644
--- a/@packages/@ui/locale-pipeline-admin/src/components/PipelineProgress.tsx
+++ b/@packages/@ui/locale-pipeline-admin/src/components/PipelineProgress.tsx
@@ -33,7 +33,7 @@ const ProgressValue = styled.span`
 
 const ProgressBarContainer = styled.div`
   height: 8px;
-  background: ${(props) => props.theme.colors.border};
+  background: ${(props) => props.theme.colors.border.toString()};
   border-radius: ${(props) => props.theme.borderRadius.full};
   overflow: hidden;
 `;
@@ -47,11 +47,11 @@ const ProgressBarFill = styled.div<{ $progress: number; $status: string }>`
   background: ${(props) => {
     switch (props.$status) {
       case 'completed':
-        return props.theme.colors.success;
+        return props.theme.colors.success.toString();
       case 'failed':
-        return props.theme.colors.error;
+        return props.theme.colors.error.toString();
       default:
-        return props.theme.colors.primary;
+        return props.theme.colors.primary.toString();
     }
   }};
 `;
@@ -70,9 +70,9 @@ const SummaryItem = styled.div<{ $variant: 'success' | 'error' | 'neutral' }>`
   color: ${(props) => {
     switch (props.$variant) {
       case 'success':
-        return props.theme.colors.success;
+        return props.theme.colors.success.toString();
       case 'error':
-        return props.theme.colors.error;
+        return props.theme.colors.error.toString();
       default:
         return props.theme.colors.text.secondary;
     }
@@ -82,7 +82,7 @@ const SummaryItem = styled.div<{ $variant: 'success' | 'error' | 'neutral' }>`
 const ResultsList = styled.div`
   max-height: 200px;
   overflow-y: auto;
-  border: 1px solid ${(props) => props.theme.colors.border};
+  border: 1px solid ${(props) => props.theme.colors.border.toString()};
   border-radius: ${(props) => props.theme.borderRadius.md};
 `;
 
@@ -94,15 +94,15 @@ const ResultRow = styled.div<{ $status: FileResultStatus }>`
   font-size: ${(props) => props.theme.typography.fontSize.sm};
 
   &:not(:last-child) {
-    border-bottom: 1px solid ${(props) => props.theme.colors.border}50;
+    border-bottom: 1px solid ${(props) => `${props.theme.colors.border}50`};
   }
 
   color: ${(props) => {
     switch (props.$status) {
       case 'passed':
-        return props.theme.colors.success;
+        return props.theme.colors.success.toString();
       case 'failed':
-        return props.theme.colors.error;
+        return props.theme.colors.error.toString();
       default:
         return props.theme.colors.text.secondary;
     }
diff --git a/features/marketplace/frontend-public/src/features/subscription/components/TrialExpiringModal.spec.tsx b/features/marketplace/frontend-public/src/features/subscription/components/TrialExpiringModal.spec.tsx
index 384544ebf..297510cc5 100755
--- a/features/marketplace/frontend-public/src/features/subscription/components/TrialExpiringModal.spec.tsx
+++ b/features/marketplace/frontend-public/src/features/subscription/components/TrialExpiringModal.spec.tsx
@@ -6,7 +6,7 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, within } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { ThemeProvider } from 'styled-components';
 import { TrialExpiringModal } from './TrialExpiringModal';
 import { format, parseISO } from 'date-fns';