salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reanme purple to info

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-24 15:27:51 +00:00
parent 7b022f3a06
commit 75deda304e
76 changed files with 323 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.rules
View File

@@ -62,7 +62,7 @@ All colors in the system derive from 6 primary hex values in `design-system.css`
- `--color-success` (#2CA18E) - Success Green
- `--color-warning` (#D9A12C) - Warning Amber
- `--color-danger` (#A12C40) - Danger Red
- `--color-purple` (#2C40A1) - Purple accent
- `--color-info` (#18b2c4) - Info/accent color
- `--color-gray-base` (#667085) - Neutral gray
### Tailwind Color Classes
@@ -74,7 +74,7 @@ gray-* (25-950) - Neutral scale
success-* (25-950) - Green scale
error-* (25-950) - Red scale
warning-* (25-950) - Amber scale
purple-* (25-950) - Purple scale
info-* (25-950) - Info/accent scale
```
**❌ BANNED** (These will NOT work):

4
frontend/src/components/Automation/CurrentProcessingCard.tsx
View File

@@ -326,11 +326,11 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
// PLANNER: Blue → Pink → Amber | WRITER: Navy → Blue → Pink → Green
const stageColors = [
'from-brand-500 to-brand-600', // Stage 1: Keywords → Clusters (blue)
'from-purple-500 to-purple-600', // Stage 2: Clusters → Ideas (pink)
'from-info-500 to-info-600', // Stage 2: Clusters → Ideas (pink)
'from-warning-500 to-warning-600', // Stage 3: Ideas → Tasks (amber)
'from-gray-700 to-gray-800', // Stage 4: Tasks → Content (navy)
'from-brand-500 to-brand-600', // Stage 5: Content → Image Prompts (blue)
'from-purple-500 to-purple-600', // Stage 6: Image Prompts → Images (pink)
'from-info-500 to-info-600', // Stage 6: Image Prompts → Images (pink)
'from-success-500 to-success-600', // Stage 7: Review → Published (green)
];
const stageColorClass = stageColors[(currentRun.current_stage || 1) - 1] || 'from-brand-500 to-brand-600';

4
frontend/src/components/Automation/DetailView/CreditBreakdownChart.tsx
View File

@@ -39,12 +39,12 @@ const CreditBreakdownChart: React.FC<CreditBreakdownChartProps> = ({ stages }) =
labels: chartLabels,
colors: [
'var(--color-brand-500)',
'var(--color-purple-500)',
'var(--color-info-500)',
'var(--color-warning-500)',
'var(--color-success-500)',
'var(--color-gray-500)',
'var(--color-brand-700)',
'var(--color-purple-700)',
'var(--color-info-700)',
],
legend: {
position: 'bottom',

4
frontend/src/components/Automation/DetailView/MeaningfulRunHistory.tsx
View File

@@ -43,11 +43,11 @@ const STAGE_LABELS: Record<number, { input: string; output: string }> = {
const STAGE_COLORS: Record<number, string> = {
1: 'bg-brand-500',
2: 'bg-purple-500',
2: 'bg-info-500',
3: 'bg-warning-500',
4: 'bg-gray-600',
5: 'bg-brand-400',
6: 'bg-purple-400',
6: 'bg-info-400',
7: 'bg-success-500',
};

4
frontend/src/components/Automation/DetailView/PredictiveCostAnalysis.tsx
View File

@@ -107,12 +107,12 @@ const PredictiveCostAnalysis: React.FC<PredictiveCostAnalysisProps> = ({ analysi
labels: chartLabels,
colors: [
'var(--color-brand-500)',
'var(--color-purple-500)',
'var(--color-info-500)',
'var(--color-warning-500)',
'var(--color-success-500)',
'var(--color-gray-500)',
'var(--color-brand-700)',
'var(--color-purple-700)',
'var(--color-info-700)',
],
legend: {
position: 'bottom',

4
frontend/src/components/Automation/DetailView/ProductionSummary.tsx
View File

@@ -89,8 +89,8 @@ const ProductionSummary: React.FC<ProductionSummaryProps> = ({
{
label: 'Ideas',
value: counts.ideas,
color: 'text-purple-600 dark:text-purple-400',
bgColor: 'bg-purple-50 dark:bg-purple-900/20',
color: 'text-info-600 dark:text-info-400',
bgColor: 'bg-info-50 dark:bg-info-900/20',
},
{
label: 'Content',

4
frontend/src/components/Automation/GlobalProgressBar.tsx
View File

@@ -19,11 +19,11 @@ import { BoltIcon, CheckCircleIcon, PauseIcon } from '../../icons';
// - Images→Publish: success/green
const STAGE_COLORS = [
'from-brand-500 to-brand-600', // Stage 1: Keywords → Clusters (brand/blue)
'from-purple-500 to-purple-600', // Stage 2: Clusters → Ideas (purple/pink)
'from-info-500 to-info-600', // Stage 2: Clusters → Ideas (purple/pink)
'from-warning-500 to-warning-600', // Stage 3: Ideas → Tasks (amber)
'from-gray-700 to-gray-800', // Stage 4: Tasks → Content (navy)
'from-brand-500 to-brand-600', // Stage 5: Content → Image Prompts (brand/blue)
'from-purple-500 to-purple-600', // Stage 6: Image Prompts → Images (purple/pink)
'from-info-500 to-info-600', // Stage 6: Image Prompts → Images (purple/pink)
'from-success-500 to-success-600', // Stage 7: Review Gate (green)
];

4
frontend/src/components/Automation/StageCard.tsx
View File

@@ -27,7 +27,7 @@ const StageCard: React.FC<StageCardProps> = ({
const getStatusColor = () => {
if (isActive) return 'border-brand-500 bg-brand-50 dark:bg-brand-900/20 dark:border-brand-400';
if (isComplete) return 'border-success-500 bg-success-50 dark:bg-success-900/20 dark:border-success-400';
if (pipelineData && pipelineData.pending > 0) return 'border-purple-400 bg-purple-50 dark:bg-purple-900/20 dark:border-purple-400';
if (pipelineData && pipelineData.pending > 0) return 'border-info-400 bg-info-50 dark:bg-info-900/20 dark:border-info-400';
return 'border-gray-300 bg-gray-50 dark:bg-gray-800 dark:border-gray-600';
};
@@ -58,7 +58,7 @@ const StageCard: React.FC<StageCardProps> = ({
<div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-600">
<div className="flex justify-between items-center">
<span className="text-xs text-gray-600 dark:text-gray-400">Pending:</span>
<span className="text-lg font-bold text-purple-600 dark:text-purple-400">{pipelineData.pending}</span>
<span className="text-lg font-bold text-info-600 dark:text-info-400">{pipelineData.pending}</span>
</div>
<div className="text-xs text-gray-500 dark:text-gray-500 mt-1">{getStatusText()}</div>
</div>

10
frontend/src/components/billing/CreditCostBreakdownPanel.tsx
View File

@@ -108,9 +108,9 @@ export default function CreditCostBreakdownPanel() {
{ bg: 'bg-brand-50 dark:bg-brand-900/20', text: 'text-brand-600 dark:text-brand-400', border: 'border-brand-500 dark:border-brand-400' },
{ bg: 'bg-success-50 dark:bg-success-900/20', text: 'text-success-600 dark:text-success-400', border: 'border-success-500 dark:border-success-400' },
{ bg: 'bg-brand-50 dark:bg-brand-900/20', text: 'text-brand-600 dark:text-brand-400', border: 'border-brand-500 dark:border-brand-400' },
{ bg: 'bg-purple-50 dark:bg-purple-900/20', text: 'text-purple-600 dark:text-purple-400', border: 'border-purple-500 dark:border-purple-400' },
{ bg: 'bg-info-50 dark:bg-info-900/20', text: 'text-info-600 dark:text-info-400', border: 'border-info-500 dark:border-info-400' },
{ bg: 'bg-warning-50 dark:bg-warning-900/20', text: 'text-warning-600 dark:text-warning-400', border: 'border-warning-500 dark:border-warning-400' },
{ bg: 'bg-purple-50 dark:bg-purple-900/20', text: 'text-purple-600 dark:text-purple-400', border: 'border-purple-500 dark:border-purple-400' },
{ bg: 'bg-info-50 dark:bg-info-900/20', text: 'text-info-600 dark:text-info-400', border: 'border-info-500 dark:border-info-400' },
];
return (
@@ -143,10 +143,10 @@ export default function CreditCostBreakdownPanel() {
<div className="text-xs text-gray-500 mt-1">Daily average</div>
</Card>
<Card className="p-6 border-l-4 border-purple-500 dark:border-purple-400">
<Card className="p-6 border-l-4 border-info-500 dark:border-info-400">
<div className="flex items-center gap-3 mb-2">
<div className="p-2 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
<TrendingUpIcon className="w-5 h-5 text-purple-500 dark:text-purple-400" />
<div className="p-2 bg-info-50 dark:bg-info-900/20 rounded-lg">
<TrendingUpIcon className="w-5 h-5 text-info-500 dark:text-info-400" />
</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Total Operations</div>
</div>

14
frontend/src/components/billing/CreditInsightsCharts.tsx
View File

@@ -34,7 +34,7 @@ const OPERATION_LABELS: Record<string, string> = {
const CHART_COLORS = [
'var(--color-brand-500)',
'var(--color-purple-500)',
'var(--color-info-500)',
'var(--color-success-500)',
'var(--color-warning-500)',
'var(--color-error-500)',
@@ -252,7 +252,7 @@ export default function CreditInsightsCharts({ analytics, loading, period }: Cre
show: false,
},
},
colors: ['var(--color-purple-500)'],
colors: ['var(--color-info-500)'],
plotOptions: {
bar: {
horizontal: true,
@@ -325,12 +325,12 @@ export default function CreditInsightsCharts({ analytics, loading, period }: Cre
<Card className="p-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800">
<div className="flex items-center gap-3">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<BarChart3Icon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
<div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<BarChart3Icon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div>
<div>
<div className="text-xs text-gray-600 dark:text-gray-400">Peak Usage</div>
<div className="text-xl font-bold text-purple-600 dark:text-purple-400">
<div className="text-xl font-bold text-info-600 dark:text-info-400">
{peakUsage.toLocaleString()}
</div>
<div className="text-xs text-gray-500 dark:text-gray-400">credits in one day</div>
@@ -391,8 +391,8 @@ export default function CreditInsightsCharts({ analytics, loading, period }: Cre
{/* Operations by Count - Bar Chart */}
<Card className="p-6">
<div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<BarChart3Icon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
<div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<BarChart3Icon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
Operations Count

6
frontend/src/components/billing/UsageLimitsPanel.tsx
View File

@@ -36,9 +36,9 @@ function LimitCard({ title, icon, usage, type, daysUntilReset, accentColor = 'br
info: 'var(--color-primary)',
warning: 'var(--color-warning)',
danger: 'var(--color-danger)',
purple: 'var(--color-purple)',
indigo: 'var(--color-purple)',
pink: 'var(--color-purple)',
purple: 'var(--color-info)',
indigo: 'var(--color-info)',
pink: 'var(--color-info)',
teal: 'var(--color-success)',
cyan: 'var(--color-primary)',
};

12
frontend/src/components/common/PageHeader.tsx
View File

@@ -102,16 +102,16 @@ export default function PageHeader({
const badgeColors = {
blue: { bg: 'bg-brand-600 dark:bg-brand-500', light: 'bg-brand-100 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300' },
green: { bg: 'bg-success-600 dark:bg-success-500', light: 'bg-success-100 text-success-700 dark:bg-success-500/20 dark:text-success-300' },
purple: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
purple: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300' },
orange: { bg: 'bg-warning-600 dark:bg-warning-500', light: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-300' },
red: { bg: 'bg-error-600 dark:bg-error-500', light: 'bg-error-100 text-error-700 dark:bg-error-500/20 dark:text-error-300' },
indigo: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
indigo: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300' },
yellow: { bg: 'bg-warning-600 dark:bg-warning-500', light: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-300' },
pink: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
emerald: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
cyan: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
pink: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300' },
emerald: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300' },
cyan: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300' },
amber: { bg: 'bg-warning-600 dark:bg-warning-500', light: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-300' },
teal: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
teal: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300' },
};
return (

2
frontend/src/components/common/SearchModal.tsx
View File

@@ -892,7 +892,7 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
{suggestedQuestions.map((item, idx) => (
<div
key={idx}
className="group px-3 py-2.5 rounded-lg bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-900/20 dark:to-purple-900/20 border border-indigo-200 dark:border-indigo-800 hover:border-indigo-300 dark:hover:border-indigo-700 cursor-pointer transition-all hover:shadow-md"
className="group px-3 py-2.5 rounded-lg bg-gradient-to-r from-indigo-50 to-info-50 dark:from-indigo-900/20 dark:to-info-900/20 border border-indigo-200 dark:border-indigo-800 hover:border-indigo-300 dark:hover:border-indigo-700 cursor-pointer transition-all hover:shadow-md"
onClick={() => {
navigate(item.path);
onClose();

4
frontend/src/components/common/SiteInfoBar.tsx
View File

@@ -49,7 +49,7 @@ export default function SiteInfoBar({
<span className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-brand-50 text-brand-700 dark:bg-brand-900/30 dark:text-brand-300 border border-brand-200 dark:border-brand-800">
{site.site_type || 'marketing'}
</span>
<span className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-purple-50 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300 border border-purple-200 dark:border-purple-800">
<span className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-info-50 text-info-700 dark:bg-info-900/30 dark:text-info-300 border border-info-200 dark:border-info-800">
{site.hosting_type || 'igny8_sites'}
</span>
<span className={`inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium ${
@@ -99,7 +99,7 @@ export default function SiteInfoBar({
onClick={() => navigate(`/sites/${site.id}/settings`)}
variant="outline"
size="sm"
className="border-purple-300 text-purple-700 hover:bg-purple-50 dark:border-purple-600 dark:text-purple-400 dark:hover:bg-purple-900/20"
className="border-info-300 text-info-700 hover:bg-info-50 dark:border-info-600 dark:text-info-400 dark:hover:bg-info-900/20"
startIcon={<GridIcon className="w-4 h-4" />}
>
Settings

2
frontend/src/components/content/SourceBadge.tsx
View File

@@ -9,7 +9,7 @@ interface SourceBadgeProps {
const sourceConfig = {
igny8: { label: 'IGNY8', color: 'bg-brand-100 text-brand-800 dark:bg-brand-900 dark:text-brand-300' },
wordpress: { label: 'WordPress', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300' },
wordpress: { label: 'WordPress', color: 'bg-info-100 text-info-800 dark:bg-info-900 dark:text-info-300' },
shopify: { label: 'Shopify', color: 'bg-success-100 text-success-800 dark:bg-success-900 dark:text-success-300' },
custom: { label: 'Custom', color: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300' },
};

4
frontend/src/components/content/SyncStatusBadge.tsx
View File

@@ -8,9 +8,9 @@ interface SyncStatusBadgeProps {
}
const statusConfig = {
native: { label: 'Native', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300' },
native: { label: 'Native', color: 'bg-info-100 text-info-800 dark:bg-info-900 dark:text-info-300' },
imported: { label: 'Imported', color: 'bg-warning-100 text-warning-800 dark:bg-warning-900 dark:text-warning-300' },
synced: { label: 'Synced', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300' },
synced: { label: 'Synced', color: 'bg-info-100 text-info-800 dark:bg-info-900 dark:text-info-300' },
};
export const SyncStatusBadge: React.FC<SyncStatusBadgeProps> = ({ status, className = '' }) => {

4
frontend/src/components/dashboard/AIOperationsWidget.tsx
View File

@@ -44,10 +44,10 @@ interface AIOperationsWidgetProps {
* - Images: purple/pink (matches Images module)
*/
const operationConfig: Record<string, { label: string; icon: typeof GroupIcon; gradient: string }> = {
clustering: { label: 'Clustering', icon: GroupIcon, gradient: 'from-purple-500 to-purple-600' },
clustering: { label: 'Clustering', icon: GroupIcon, gradient: 'from-info-500 to-info-600' },
ideas: { label: 'Ideas', icon: BoltIcon, gradient: 'from-warning-500 to-warning-600' },
content: { label: 'Content', icon: FileTextIcon, gradient: 'from-brand-500 to-brand-600' },
images: { label: 'Images', icon: FileIcon, gradient: 'from-purple-500 to-purple-600' },
images: { label: 'Images', icon: FileIcon, gradient: 'from-info-500 to-info-600' },
};
// Default config for unknown operation types

6
frontend/src/components/dashboard/CreditAvailabilityWidget.tsx
View File

@@ -21,10 +21,10 @@ interface CreditAvailabilityWidgetProps {
// Average credit costs per operation
const OPERATION_COSTS = {
clustering: { label: 'Clustering Runs', cost: 10, icon: GroupIcon, color: 'text-purple-600 dark:text-purple-400' },
clustering: { label: 'Clustering Runs', cost: 10, icon: GroupIcon, color: 'text-info-600 dark:text-info-400' },
ideas: { label: 'Content Ideas', cost: 2, icon: BoltIcon, color: 'text-warning-600 dark:text-warning-400' },
content: { label: 'Articles', cost: 50, icon: FileTextIcon, color: 'text-success-600 dark:text-success-400' },
images: { label: 'Images', cost: 5, icon: FileIcon, color: 'text-purple-600 dark:text-purple-400' },
images: { label: 'Images', cost: 5, icon: FileIcon, color: 'text-info-600 dark:text-info-400' },
};
export default function CreditAvailabilityWidget({
@@ -68,7 +68,7 @@ export default function CreditAvailabilityWidget({
</div>
{/* Credits Balance */}
<div className="bg-gradient-to-r from-brand-50 to-purple-50 dark:from-brand-900/20 dark:to-purple-900/20 rounded-lg p-4 mb-4">
<div className="bg-gradient-to-r from-brand-50 to-info-50 dark:from-brand-900/20 dark:to-info-900/20 rounded-lg p-4 mb-4">
<div className="flex items-center justify-between mb-2">
<span className="text-sm text-gray-600 dark:text-gray-400">Available Credits</span>
<span className="text-2xl font-bold text-brand-600 dark:text-brand-400">

8
frontend/src/components/dashboard/EnhancedMetricCard.tsx
View File

@@ -37,10 +37,10 @@ const accentColors = {
icon: "text-warning-500",
},
purple: {
bg: "bg-purple-50 dark:bg-purple-500/10",
hover: "hover:bg-purple-100 dark:hover:bg-purple-500/20",
border: "bg-purple-500",
icon: "text-purple-500",
bg: "bg-info-50 dark:bg-info-500/10",
hover: "hover:bg-info-100 dark:hover:bg-info-500/20",
border: "bg-info-500",
icon: "text-info-500",
},
red: {
bg: "bg-error-50 dark:bg-error-500/10",

4
frontend/src/components/dashboard/KeywordLibraryStatsWidget.tsx
View File

@@ -81,8 +81,8 @@ export default function KeywordLibraryStatsWidget({ stats, loading }: KeywordLib
{/* Card 2: By Country */}
<Card className="p-6">
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-lg bg-purple-100 dark:bg-purple-900/50 flex items-center justify-center">
<GlobeIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
<div className="w-10 h-10 rounded-lg bg-info-100 dark:bg-info-900/50 flex items-center justify-center">
<GlobeIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div>
<div>
<h3 className="text-sm font-semibold text-gray-900 dark:text-white">

4
frontend/src/components/dashboard/OperationsCostsWidget.tsx
View File

@@ -29,7 +29,7 @@ const operationConfig = {
clustering: {
label: 'Clustering',
icon: GroupIcon,
color: 'text-purple-600 dark:text-purple-400',
color: 'text-info-600 dark:text-info-400',
href: '/planner/clusters',
},
ideas: {
@@ -47,7 +47,7 @@ const operationConfig = {
images: {
label: 'Images',
icon: FileIcon,
color: 'text-purple-600 dark:text-purple-400',
color: 'text-info-600 dark:text-info-400',
href: '/writer/images',
},
};

4
frontend/src/components/dashboard/QuickActionsWidget.tsx
View File

@@ -42,7 +42,7 @@ const workflowSteps = [
description: 'AI groups related keywords into content clusters',
href: '/planner/keyword-opportunities', // Clustering runs from keywords page
actionLabel: 'Cluster',
gradient: 'from-purple-500 to-purple-600',
gradient: 'from-info-500 to-info-600',
buttonTone: 'brand' as const,
},
{
@@ -78,7 +78,7 @@ const workflowSteps = [
description: 'Create featured images and media for articles',
href: '/writer/images',
actionLabel: 'Images',
gradient: 'from-purple-500 to-purple-600',
gradient: 'from-info-500 to-info-600',
buttonTone: 'brand' as const,
},
{

4
frontend/src/components/dashboard/RecentActivityWidget.tsx
View File

@@ -43,10 +43,10 @@ interface RecentActivityWidgetProps {
* - sync: success/green
*/
const activityConfig: Record<string, { icon: typeof GroupIcon; gradient: string }> = {
clustering: { icon: GroupIcon, gradient: 'from-purple-500 to-purple-600' },
clustering: { icon: GroupIcon, gradient: 'from-info-500 to-info-600' },
ideas: { icon: BoltIcon, gradient: 'from-warning-500 to-warning-600' },
content: { icon: FileTextIcon, gradient: 'from-brand-500 to-brand-600' },
images: { icon: FileIcon, gradient: 'from-purple-500 to-purple-600' },
images: { icon: FileIcon, gradient: 'from-info-500 to-info-600' },
published: { icon: PaperPlaneIcon, gradient: 'from-success-500 to-success-600' },
keywords: { icon: ListIcon, gradient: 'from-brand-500 to-brand-600' },
error: { icon: AlertIcon, gradient: 'from-error-500 to-error-600' },

2
frontend/src/components/dashboard/StandardThreeWidgetFooter.tsx
View File

@@ -84,7 +84,7 @@ const getProgressBarStyle = (color: SubmoduleColor = 'blue'): React.CSSPropertie
blue: 'var(--color-primary)',
green: 'var(--color-success)',
amber: 'var(--color-warning)',
purple: 'var(--color-purple)',
purple: 'var(--color-info)',
};
return { backgroundColor: colorMap[color] };
};

4
frontend/src/components/dashboard/StandardizedModuleWidget.tsx
View File

@@ -240,7 +240,7 @@ export default function StandardizedModuleWidget({
{credits.clusteringCredits > 0 && (
<span className="text-[color:var(--color-text-dim)] dark:text-gray-400">
Clustering{' '}
<strong className="font-bold" style={{ color: 'var(--color-purple)' }}>{credits.clusteringCredits}</strong>
<strong className="font-bold" style={{ color: 'var(--color-info)' }}>{credits.clusteringCredits}</strong>
</span>
)}
{credits.ideaGenerationCredits > 0 && (
@@ -265,7 +265,7 @@ export default function StandardizedModuleWidget({
{credits.imageGenerationCredits > 0 && (
<span className="text-[color:var(--color-text-dim)] dark:text-gray-400">
Images{' '}
<strong className="font-bold" style={{ color: 'var(--color-purple)' }}>{credits.imageGenerationCredits}</strong>
<strong className="font-bold" style={{ color: 'var(--color-info)' }}>{credits.imageGenerationCredits}</strong>
</span>
)}
</div>

4
frontend/src/components/dashboard/ThreeWidgetFooter.tsx
View File

@@ -12,7 +12,7 @@
* - --color-primary: Brand blue for primary actions/bars
* - --color-success: Green for success states
* - --color-warning: Amber for warnings
* - --color-purple: Purple accent
* - --color-info: Purple accent
*/
import React from 'react';
@@ -91,7 +91,7 @@ const getProgressBarStyle = (color: SubmoduleColor = 'blue'): React.CSSPropertie
blue: 'var(--color-primary)',
green: 'var(--color-success)',
amber: 'var(--color-warning)',
purple: 'var(--color-purple)',
purple: 'var(--color-info)',
};
return { backgroundColor: colorMap[color] };
};

2
frontend/src/components/dashboard/WorkflowPipelineWidget.tsx
View File

@@ -48,7 +48,7 @@ interface WorkflowPipelineWidgetProps {
const stages = [
{ key: 'sites', label: 'Sites', icon: GridIcon, href: '/sites', gradient: '', transparent: true },
{ key: 'keywords', label: 'Keywords', icon: ListIcon, href: '/planner/keywords', gradient: 'from-brand-500 to-brand-600' },
{ key: 'clusters', label: 'Clusters', icon: GroupIcon, href: '/planner/clusters', gradient: 'from-purple-500 to-purple-600' },
{ key: 'clusters', label: 'Clusters', icon: GroupIcon, href: '/planner/clusters', gradient: 'from-info-500 to-info-600' },
{ key: 'ideas', label: 'Ideas', icon: BoltIcon, href: '/planner/ideas', gradient: 'from-warning-500 to-warning-600' },
{ key: 'tasks', label: 'Tasks', icon: CheckCircleIcon, href: '/writer/tasks', gradient: 'from-gray-700 to-gray-800' },
{ key: 'drafts', label: 'Drafts', icon: FileTextIcon, href: '/writer/content', gradient: 'from-brand-500 to-brand-600' },

2
frontend/src/components/header/UserDropdown.tsx
View File

@@ -142,7 +142,7 @@ export default function UserDropdown() {
variant="primary"
tone="brand"
endIcon={<ArrowRightIcon className="w-4 h-4" />}
className="mt-3 w-full justify-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-600"
className="mt-3 w-full justify-center bg-info-600 hover:bg-info-700 dark:bg-info-500 dark:hover:bg-info-600"
>
Sign out
</Button>

4
frontend/src/components/keywords-library/SectorCardsGrid.tsx
View File

@@ -115,8 +115,8 @@ export default function SectorCardsGrid({
{over10k.toLocaleString()}
</div>
</div>
<div className="flex flex-col items-center justify-center p-2 rounded-lg border border-purple-200 dark:border-purple-800 bg-purple-50/50 dark:bg-purple-900/10">
<div className="text-sm font-semibold text-purple-600 dark:text-purple-400">5K - 10K</div>
<div className="flex flex-col items-center justify-center p-2 rounded-lg border border-info-200 dark:border-info-800 bg-info-50/50 dark:bg-info-900/10">
<div className="text-sm font-semibold text-info-600 dark:text-info-400">5K - 10K</div>
<div className="text-base font-bold text-gray-900 dark:text-white">
{midVolume.toLocaleString()}
</div>

12
frontend/src/components/keywords-library/SectorMetricCard.tsx
View File

@@ -101,12 +101,12 @@ const STAT_CONFIG: Record<StatType, {
label: 'Long Tail',
description: '4+ words with good volume',
icon: <DocsIcon className="w-5 h-5" />,
accentColor: 'bg-purple-500',
borderColor: 'border-purple-500',
ringColor: 'ring-purple-500/20',
dotColor: 'bg-purple-500',
textColor: 'text-purple-600 dark:text-purple-400',
badgeColor: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',
accentColor: 'bg-info-500',
borderColor: 'border-info-500',
ringColor: 'ring-info-500/20',
dotColor: 'bg-info-500',
textColor: 'text-info-600 dark:text-info-400',
badgeColor: 'bg-info-100 text-info-700 dark:bg-info-900/40 dark:text-info-300',
showThreshold: true,
thresholdPrefix: 'Vol >',
},

4
frontend/src/components/keywords-library/SmartSuggestions.tsx
View File

@@ -46,7 +46,7 @@ export default function SmartSuggestions({
<div className="flex items-center gap-3">
<div className={clsx(
'w-8 h-8 rounded-lg flex items-center justify-center',
'bg-gradient-to-br from-brand-500 to-purple-500'
'bg-gradient-to-br from-brand-500 to-info-500'
)}>
<ShootingStarIcon className="w-4 h-4 text-white" />
</div>
@@ -73,7 +73,7 @@ export default function SmartSuggestions({
<div className="flex items-center gap-3">
<div className={clsx(
'w-10 h-10 rounded-lg flex items-center justify-center',
'bg-gradient-to-br from-brand-500 to-purple-500',
'bg-gradient-to-br from-brand-500 to-info-500',
hasContent && 'animate-pulse'
)}>
<ShootingStarIcon className="w-5 h-5 text-white" />

2
frontend/src/components/optimizer/OptimizationScores.tsx
View File

@@ -187,7 +187,7 @@ export const OptimizationScores: React.FC<OptimizationScoresProps> = ({
</span>
)}
{scores.has_taxonomy_mapping && (
<span className="px-2 py-0.5 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded">
<span className="px-2 py-0.5 bg-info-100 dark:bg-info-900 text-info-800 dark:text-info-200 rounded">
Taxonomy
</span>
)}

8
frontend/src/components/sites/WordPressIntegrationCard.tsx
View File

@@ -50,8 +50,8 @@ export default function WordPressIntegrationCard({
<Card className="p-6">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<GlobeIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" />
<div className="p-3 bg-info-100 dark:bg-info-900/30 rounded-lg">
<GlobeIcon className="w-6 h-6 text-info-600 dark:text-info-400" />
</div>
<div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
@@ -75,8 +75,8 @@ export default function WordPressIntegrationCard({
<div className="space-y-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<GlobeIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" />
<div className="p-3 bg-info-100 dark:bg-info-900/30 rounded-lg">
<GlobeIcon className="w-6 h-6 text-info-600 dark:text-info-400" />
</div>
<div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">

6
frontend/src/components/sites/WordPressIntegrationForm.tsx
View File

@@ -262,8 +262,8 @@ export default function WordPressIntegrationForm({
{/* Header */}
<div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-3">
<div className="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<GlobeIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" />
<div className="p-3 bg-info-100 dark:bg-info-900/30 rounded-lg">
<GlobeIcon className="w-6 h-6 text-info-600 dark:text-info-400" />
</div>
<div>
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
@@ -454,7 +454,7 @@ export default function WordPressIntegrationForm({
<div className="flex items-start justify-between">
<div className="flex-1">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
<DownloadIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
<DownloadIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
IGNY8 WP Bridge Plugin
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">

4
frontend/src/components/sites/WordPressIntegrationModal.tsx
View File

@@ -69,8 +69,8 @@ export default function WordPressIntegrationModal({
<div className="p-6">
<div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-3">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<GlobeIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
<div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<GlobeIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div>
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
{initialData ? 'Edit WordPress Integration' : 'Connect WordPress Site'}

30
frontend/src/components/ui/badge/Badge.tsx
View File

@@ -67,34 +67,34 @@ const toneStyles: Record<
"text-gray-800 ring-1 ring-gray-300 dark:ring-white/[0.08] dark:text-white/90",
},
purple: {
solid: "bg-purple-600 text-white",
soft: "bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400",
solid: "bg-info-600 text-white",
soft: "bg-info-50 text-info-700 dark:bg-info-500/15 dark:text-info-400",
outline:
"text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400",
"text-info-700 ring-1 ring-info-200 dark:ring-info-500/30 dark:text-info-400",
},
indigo: {
solid: "bg-purple-600 text-white",
soft: "bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400",
solid: "bg-info-600 text-white",
soft: "bg-info-50 text-info-700 dark:bg-info-500/15 dark:text-info-400",
outline:
"text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400",
"text-info-700 ring-1 ring-info-200 dark:ring-info-500/30 dark:text-info-400",
},
pink: {
solid: "bg-purple-600 text-white",
soft: "bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400",
solid: "bg-info-600 text-white",
soft: "bg-info-50 text-info-700 dark:bg-info-500/15 dark:text-info-400",
outline:
"text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400",
"text-info-700 ring-1 ring-info-200 dark:ring-info-500/30 dark:text-info-400",
},
teal: {
solid: "bg-purple-600 text-white",
soft: "bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400",
solid: "bg-info-600 text-white",
soft: "bg-info-50 text-info-700 dark:bg-info-500/15 dark:text-info-400",
outline:
"text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400",
"text-info-700 ring-1 ring-info-200 dark:ring-info-500/30 dark:text-info-400",
},
cyan: {
solid: "bg-purple-600 text-white",
soft: "bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400",
solid: "bg-info-600 text-white",
soft: "bg-info-50 text-info-700 dark:bg-info-500/15 dark:text-info-400",
outline:
"text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400",
"text-info-700 ring-1 ring-info-200 dark:ring-info-500/30 dark:text-info-400",
},
blue: {
solid: "bg-brand-600 text-white",

28
frontend/src/config/colors.config.ts
View File

@@ -40,8 +40,8 @@ export const CSS_VAR_COLORS = {
warningDark: '--color-warning-dark',
danger: '--color-danger',
dangerDark: '--color-danger-dark',
purple: '--color-purple',
purpleDark: '--color-purple-dark',
purple: '--color-info',
purpleDark: '--color-info-dark',
grayBase: '--color-gray-base',
grayDark: '--color-gray-dark',
} as const;
@@ -66,12 +66,12 @@ export const MODULE_COLORS = {
cssVar: CSS_VAR_COLORS.primary,
},
clusters: {
bg: 'bg-purple-500',
bgLight: 'bg-purple-50',
text: 'text-purple-500',
textDark: 'text-purple-600',
border: 'border-purple-500',
gradient: 'from-purple-500 to-purple-600',
bg: 'bg-info-500',
bgLight: 'bg-info-50',
text: 'text-info-500',
textDark: 'text-info-600',
border: 'border-info-500',
gradient: 'from-info-500 to-info-600',
cssVar: CSS_VAR_COLORS.purple,
},
ideas: {
@@ -104,12 +104,12 @@ export const MODULE_COLORS = {
cssVar: CSS_VAR_COLORS.primary,
},
images: {
bg: 'bg-purple-500',
bgLight: 'bg-purple-50',
text: 'text-purple-500',
textDark: 'text-purple-600',
border: 'border-purple-500',
gradient: 'from-purple-500 to-purple-600',
bg: 'bg-info-500',
bgLight: 'bg-info-50',
text: 'text-info-500',
textDark: 'text-info-600',
border: 'border-info-500',
gradient: 'from-info-500 to-info-600',
cssVar: CSS_VAR_COLORS.purple,
},
review: {

2
frontend/src/config/pages/content.config.tsx
View File

@@ -331,7 +331,7 @@ export const createContentPageConfig = (
{/* Prompts Icon */}
<div
className={`w-5 h-5 flex items-center justify-center flex-shrink-0 ${
hasPrompts ? 'text-purple-500 dark:text-purple-400' : 'text-gray-300 dark:text-gray-600'
hasPrompts ? 'text-info-500 dark:text-info-400' : 'text-gray-300 dark:text-gray-600'
}`}
title={hasPrompts ? 'Prompts ready' : 'No prompts'}
>

2
frontend/src/config/pages/table-actions.config.tsx
View File

@@ -260,7 +260,7 @@ const tableActionsConfigs: Record<string, TableActionsConfig> = {
{
key: 'generate_image_prompts',
label: 'Generate Image Prompts',
icon: <BoltIcon className="w-5 h-5 text-purple-500" />,
icon: <BoltIcon className="w-5 h-5 text-info-500" />,
variant: 'primary',
},
],

12
frontend/src/layout/AppHeader.tsx
View File

@@ -35,16 +35,16 @@ const SITE_WITH_ALL_SITES_ROUTES = [
const badgeColors: Record<string, { bg: string; light: string }> = {
blue: { bg: 'bg-brand-600 dark:bg-brand-500', light: 'bg-brand-100 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300' },
green: { bg: 'bg-success-600 dark:bg-success-500', light: 'bg-success-100 text-success-700 dark:bg-success-500/20 dark:text-success-300' },
purple: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
purple: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300' },
orange: { bg: 'bg-warning-600 dark:bg-warning-500', light: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-300' },
red: { bg: 'bg-error-600 dark:bg-error-500', light: 'bg-error-100 text-error-700 dark:bg-error-500/20 dark:text-error-300' },
indigo: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
indigo: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300' },
yellow: { bg: 'bg-warning-600 dark:bg-warning-500', light: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-300' },
pink: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
emerald: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
cyan: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
pink: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300' },
emerald: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300' },
cyan: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300' },
amber: { bg: 'bg-warning-600 dark:bg-warning-500', light: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-300' },
teal: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
teal: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300' },
};
const AppHeader: React.FC = () => {

2
frontend/src/layout/AppSidebar.tsx
View File

@@ -440,7 +440,7 @@ const AppSidebar: React.FC = () => {
height={30}
/>
{/* AI SEO Engine Badge */}
<span className="mt-2 px-2 py-0.5 text-xs font-medium rounded-[5px] bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300">
<span className="mt-2 px-2 py-0.5 text-xs font-medium rounded-[5px] bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300">
AI SEO Engine
</span>
</>

6
frontend/src/marketing/components/CTASection.tsx
View File

@@ -58,9 +58,9 @@ const CTASection: React.FC<CTASectionProps> = ({
return (
<section className="py-24 bg-gradient-to-b from-white via-gray-50 to-white">
<div className="max-w-5xl mx-auto px-6">
<div className="relative overflow-hidden rounded-3xl border-2 border-[var(--color-primary)]/20 bg-gradient-to-br from-[var(--color-primary)]/5 via-[var(--color-purple)]/5 to-[var(--color-success)]/5 p-10 md:p-14 shadow-xl">
<div className="absolute inset-0 bg-gradient-to-r from-[var(--color-primary)]/10 via-transparent to-[var(--color-purple)]/10" />
<div className="absolute -inset-1 bg-gradient-to-r from-[var(--color-primary)]/20 via-[var(--color-purple)]/20 to-[var(--color-success)]/20 rounded-3xl blur-xl -z-10 opacity-50" />
<div className="relative overflow-hidden rounded-3xl border-2 border-[var(--color-primary)]/20 bg-gradient-to-br from-[var(--color-primary)]/5 via-[var(--color-info)]/5 to-[var(--color-success)]/5 p-10 md:p-14 shadow-xl">
<div className="absolute inset-0 bg-gradient-to-r from-[var(--color-primary)]/10 via-transparent to-[var(--color-info)]/10" />
<div className="absolute -inset-1 bg-gradient-to-r from-[var(--color-primary)]/20 via-[var(--color-info)]/20 to-[var(--color-success)]/20 rounded-3xl blur-xl -z-10 opacity-50" />
<div className="relative flex flex-col gap-6">
<h3 className="text-3xl md:text-4xl font-semibold text-gray-900 leading-tight">
{title}

2
frontend/src/marketing/components/FeatureGrid.tsx
View File

@@ -17,7 +17,7 @@ const FeatureGrid: React.FC<FeatureGridProps> = ({ features }) => {
"from-[var(--color-primary)] to-[var(--color-primary-dark)]", // Blue
"from-[var(--color-success)] to-[var(--color-success-dark)]", // Green
"from-[var(--color-warning)] to-[var(--color-warning-dark)]", // Amber
"from-[var(--color-purple)] to-[var(--color-purple-dark)]", // Purple
"from-[var(--color-info)] to-[var(--color-info-dark)]", // Purple
];
return (

4
frontend/src/marketing/components/HeroSection.tsx
View File

@@ -59,7 +59,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({
return (
<section className="relative overflow-hidden bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
<div className="absolute inset-0 bg-gradient-to-br from-[var(--color-primary)]/10 via-transparent to-[var(--color-purple)]/10" />
<div className="absolute inset-0 bg-gradient-to-br from-[var(--color-primary)]/10 via-transparent to-[var(--color-info)]/10" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(6,147,227,0.15),transparent_50%)]" />
<div className="relative max-w-6xl mx-auto px-6 py-24 md:py-32 flex flex-col lg:flex-row gap-16 items-center">
<div className="flex-1 flex flex-col gap-6">
@@ -84,7 +84,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({
</div>
<div className="flex-1 w-full">
<div className="relative rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-white/5 to-white/10 backdrop-blur-sm shadow-2xl shadow-[var(--color-primary)]/20">
<div className="absolute -inset-1 bg-gradient-to-r from-[var(--color-primary)]/20 via-[var(--color-purple)]/20 to-[var(--color-success)]/20 rounded-3xl blur-xl -z-10" />
<div className="absolute -inset-1 bg-gradient-to-r from-[var(--color-primary)]/20 via-[var(--color-info)]/20 to-[var(--color-success)]/20 rounded-3xl blur-xl -z-10" />
<img
src={`/marketing/images/${image}`}
alt="Igny8 dashboard preview"

2
frontend/src/marketing/components/WorkflowSteps.tsx
View File

@@ -14,7 +14,7 @@ const WorkflowSteps: React.FC<WorkflowStepsProps> = ({ steps }) => {
"from-[var(--color-primary)] to-[var(--color-primary-dark)]",
"from-[var(--color-success)] to-[var(--color-success-dark)]",
"from-[var(--color-warning)] to-[var(--color-warning-dark)]",
"from-[var(--color-purple)] to-[var(--color-purple-dark)]",
"from-[var(--color-info)] to-[var(--color-info-dark)]",
];
return (

2
frontend/src/marketing/pages/CaseStudies.tsx
View File

@@ -72,7 +72,7 @@ const CaseStudies: React.FC = () => {
summary:
"Arcadia used Igny8 to align SEO, product marketing, and design. Thinker libraries ensured every asset matched product messaging; automation pushed approved content directly into Shopify, WordPress, and custom sites, plus HubSpot.",
image: "case-arcadia.png",
iconColor: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
iconColor: "from-[var(--color-info)] to-[var(--color-info-dark)]",
},
];

18
frontend/src/marketing/pages/Home.tsx
View File

@@ -48,11 +48,11 @@ const Home: React.FC = () => {
// 8-Stage Content Pipeline - matches current implementation
const workflowSteps = [
{ name: "Keywords", icon: ListBulletIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "Import & organize" },
{ name: "Clusters", icon: UserGroupIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", description: "Group related terms" },
{ name: "Clusters", icon: UserGroupIcon, color: "from-[var(--color-info)] to-[var(--color-info-dark)]", description: "Group related terms" },
{ name: "Ideas", icon: LightBulbIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Generate concepts" },
{ name: "Tasks", icon: ClipboardDocumentCheckIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Create briefs" },
{ name: "Content", icon: DocumentTextIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "AI writing" },
{ name: "Images", icon: PhotoIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", description: "Visual generation" },
{ name: "Images", icon: PhotoIcon, color: "from-[var(--color-info)] to-[var(--color-info-dark)]", description: "Visual generation" },
{ name: "Review", icon: CheckBadgeIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Quality check" },
{ name: "Published", icon: GlobeAltIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Go live" },
];
@@ -113,7 +113,7 @@ const Home: React.FC = () => {
"Real-time progress monitoring and error handling",
],
icon: BoltIcon,
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
image: "automation-dashboard.png",
link: "/product#automation",
align: "right",
@@ -159,7 +159,7 @@ const Home: React.FC = () => {
<div className="relative z-10">
<div className="relative scale-110 lg:scale-125">
{/* Soft glow behind screenshot */}
<div className="absolute -inset-6 bg-gradient-to-br from-white/20 via-[var(--color-primary)]/10 to-[var(--color-purple)]/10 rounded-3xl blur-xl" />
<div className="absolute -inset-6 bg-gradient-to-br from-white/20 via-[var(--color-primary)]/10 to-[var(--color-info)]/10 rounded-3xl blur-xl" />
{/* Device frame effect */}
<div className="absolute -inset-3 bg-gradient-to-br from-white/10 to-white/5 rounded-3xl blur-lg" />
<div className="relative rounded-2xl border-4 border-white/20 bg-white/10 backdrop-blur-sm shadow-lg overflow-hidden">
@@ -210,7 +210,7 @@ const Home: React.FC = () => {
</section>
{/* HOW IGNY8 WORKS (PIPELINE) */}
<section className="py-24 bg-gradient-to-b from-white via-[var(--color-primary)]/3 to-[var(--color-purple)]/3">
<section className="py-24 bg-gradient-to-b from-white via-[var(--color-primary)]/3 to-[var(--color-info)]/3">
<div className="max-w-7xl mx-auto px-6">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
@@ -224,7 +224,7 @@ const Home: React.FC = () => {
{/* 8-Stage Horizontal Timeline */}
<div className="relative">
{/* Enhanced connecting line with shadow */}
<div className="absolute top-12 left-0 right-0 h-1 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-purple)] via-[var(--color-warning)] via-[var(--color-success)] to-[var(--color-primary)] opacity-25 hidden md:block shadow-lg shadow-[var(--color-primary)]/20" />
<div className="absolute top-12 left-0 right-0 h-1 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-info)] via-[var(--color-warning)] via-[var(--color-success)] to-[var(--color-primary)] opacity-25 hidden md:block shadow-lg shadow-[var(--color-primary)]/20" />
<div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-8 gap-4 md:gap-3">
{workflowSteps.map((step, index) => {
@@ -258,7 +258,7 @@ const Home: React.FC = () => {
"bg-white",
"bg-gradient-to-b from-[var(--color-primary)]/1 to-white",
"bg-gradient-to-b from-[var(--color-success)]/1 to-white",
"bg-gradient-to-b from-[var(--color-purple)]/1 to-white",
"bg-gradient-to-b from-[var(--color-info)]/1 to-white",
];
return (
@@ -427,12 +427,12 @@ const Home: React.FC = () => {
const gradientColors = [
"from-[var(--color-primary)]/20 to-[var(--color-primary-dark)]/10",
"from-[var(--color-success)]/20 to-[var(--color-success-dark)]/10",
"from-[var(--color-purple)]/20 to-[var(--color-purple-dark)]/10",
"from-[var(--color-info)]/20 to-[var(--color-info-dark)]/10",
];
const borderColors = [
"border-[var(--color-primary)]/30",
"border-[var(--color-success)]/30",
"border-[var(--color-purple)]/30",
"border-[var(--color-info)]/30",
];
return (

2
frontend/src/marketing/pages/Partners.tsx
View File

@@ -116,7 +116,7 @@ const Partners: React.FC = () => {
<p className="text-sm text-gray-600 font-medium">{tier.description}</p>
<ul className="space-y-4 text-sm text-gray-700 flex-1">
{tier.benefits.map((benefit, benefitIdx) => {
const dotColors = ["bg-[var(--color-primary)]", "bg-[var(--color-success)]", "bg-[var(--color-warning)]", "bg-[var(--color-purple)]"];
const dotColors = ["bg-[var(--color-primary)]", "bg-[var(--color-success)]", "bg-[var(--color-warning)]", "bg-[var(--color-info)]"];
return (
<li key={benefit} className="flex gap-3">
<span className={`mt-1.5 size-2 rounded-full ${dotColors[benefitIdx % dotColors.length]} shadow-sm flex-shrink-0`} />

6
frontend/src/marketing/pages/Pricing.tsx
View File

@@ -427,7 +427,7 @@ const Pricing: React.FC = () => {
<div className="overflow-hidden rounded-3xl border-2 border-gray-200 bg-white shadow-lg">
<div className="overflow-x-auto">
<table className="min-w-full text-sm">
<thead className="bg-gradient-to-r from-[var(--color-primary)]/10 via-[var(--color-purple)]/10 to-[var(--color-success)]/10 sticky top-0">
<thead className="bg-gradient-to-r from-[var(--color-primary)]/10 via-[var(--color-info)]/10 to-[var(--color-success)]/10 sticky top-0">
<tr>
<th className="px-6 py-4 text-left font-semibold text-gray-900">Capability</th>
<th className="px-6 py-4 text-center font-semibold text-gray-900">Starter</th>
@@ -493,7 +493,7 @@ const Pricing: React.FC = () => {
<span className="text-gray-400">—</span>
) : (
<span className="inline-flex items-center gap-1">
<span className="size-1.5 rounded-full bg-[var(--color-purple)]"></span>
<span className="size-1.5 rounded-full bg-[var(--color-info)]"></span>
{row.scale}
</span>
)}
@@ -551,7 +551,7 @@ const Pricing: React.FC = () => {
Need more? Add packs instantly or set automation rules to pause when thresholds are hit.
</p>
</div>
<div className="rounded-3xl border-2 border-[var(--color-success)]/30 bg-gradient-to-br from-[var(--color-success)]/5 via-white to-[var(--color-purple)]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
<div className="rounded-3xl border-2 border-[var(--color-success)]/30 bg-gradient-to-br from-[var(--color-success)]/5 via-white to-[var(--color-info)]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
<div className="flex items-center gap-3 mb-4">
<div className="size-12 rounded-full bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg">
<ShieldCheckIcon className="h-6 w-6" />

26
frontend/src/marketing/pages/Product.tsx
View File

@@ -48,11 +48,11 @@ const Product: React.FC = () => {
// 8-Stage Content Pipeline - matches current implementation
const workflowSteps = [
{ name: "Keywords", icon: ListBulletIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "Import & organize" },
{ name: "Clusters", icon: UserGroupIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", description: "Group related terms" },
{ name: "Clusters", icon: UserGroupIcon, color: "from-[var(--color-info)] to-[var(--color-info-dark)]", description: "Group related terms" },
{ name: "Ideas", icon: LightBulbIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Generate concepts" },
{ name: "Tasks", icon: ClipboardDocumentCheckIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Create briefs" },
{ name: "Content", icon: DocumentTextIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "AI writing" },
{ name: "Images", icon: PhotoIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", description: "Visual generation" },
{ name: "Images", icon: PhotoIcon, color: "from-[var(--color-info)] to-[var(--color-info-dark)]", description: "Visual generation" },
{ name: "Review", icon: CheckBadgeIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Quality check" },
{ name: "Published", icon: GlobeAltIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Go live" },
];
@@ -118,7 +118,7 @@ const Product: React.FC = () => {
"Automation dashboard with pipeline visualization and controls",
],
icon: BoltIcon,
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
image: "automation-dashboard.png",
link: "#automation",
},
@@ -170,7 +170,7 @@ const Product: React.FC = () => {
{/* 8-Stage Horizontal Timeline */}
<div className="relative">
{/* Enhanced connecting line with shadow */}
<div className="absolute top-12 left-0 right-0 h-1 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-purple)] via-[var(--color-warning)] via-[var(--color-success)] to-[var(--color-primary)] opacity-25 hidden md:block shadow-lg shadow-[var(--color-primary)]/20" />
<div className="absolute top-12 left-0 right-0 h-1 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-info)] via-[var(--color-warning)] via-[var(--color-success)] to-[var(--color-primary)] opacity-25 hidden md:block shadow-lg shadow-[var(--color-primary)]/20" />
<div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-8 gap-4 md:gap-3">
{workflowSteps.map((step, index) => {
@@ -204,7 +204,7 @@ const Product: React.FC = () => {
"bg-white",
"bg-gradient-to-b from-[var(--color-primary)]/1 to-white",
"bg-gradient-to-b from-[var(--color-success)]/1 to-white",
"bg-gradient-to-b from-[var(--color-purple)]/1 to-white",
"bg-gradient-to-b from-[var(--color-info)]/1 to-white",
];
return (
@@ -283,7 +283,7 @@ const Product: React.FC = () => {
{/* Left: Content */}
<div className="z-10">
<div className="flex items-center gap-3 mb-6">
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-purple)] flex items-center justify-center text-white shadow-lg shadow-[var(--color-primary)]/30">
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-info)] flex items-center justify-center text-white shadow-lg shadow-[var(--color-primary)]/30">
<BoltIcon className="h-6 w-6" />
</div>
<h2 className="text-4xl md:text-5xl font-bold text-white">
@@ -297,12 +297,12 @@ const Product: React.FC = () => {
{/* 7 Automation Handoffs with neon glows */}
<div className="space-y-4">
{[
{ from: "Keywords", to: "Clusters", stage: 1, color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
{ from: "Clusters", to: "Ideas", stage: 2, color: "from-[var(--color-purple)] to-[var(--color-warning)]", glow: "shadow-[var(--color-purple)]/50" },
{ from: "Keywords", to: "Clusters", stage: 1, color: "from-[var(--color-primary)] to-[var(--color-info)]", glow: "shadow-[var(--color-primary)]/50" },
{ from: "Clusters", to: "Ideas", stage: 2, color: "from-[var(--color-info)] to-[var(--color-warning)]", glow: "shadow-[var(--color-info)]/50" },
{ from: "Ideas", to: "Tasks", stage: 3, color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/50" },
{ from: "Tasks", to: "Content", stage: 4, color: "from-[var(--color-success)] to-[var(--color-primary)]", glow: "shadow-[var(--color-success)]/50" },
{ from: "Content", to: "Images", stage: 5, color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
{ from: "Images", to: "Review", stage: 6, color: "from-[var(--color-purple)] to-[var(--color-warning)]", glow: "shadow-[var(--color-purple)]/50" },
{ from: "Content", to: "Images", stage: 5, color: "from-[var(--color-primary)] to-[var(--color-info)]", glow: "shadow-[var(--color-primary)]/50" },
{ from: "Images", to: "Review", stage: 6, color: "from-[var(--color-info)] to-[var(--color-warning)]", glow: "shadow-[var(--color-info)]/50" },
{ from: "Review", to: "Published", stage: 7, color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/50" },
].map((handoff, i) => (
<div key={i} className="flex items-center gap-3">
@@ -336,7 +336,7 @@ const Product: React.FC = () => {
/>
</div>
{/* Glow effect */}
<div className="absolute -inset-4 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-purple)]/20 rounded-2xl blur-2xl -z-10" />
<div className="absolute -inset-4 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-info)]/20 rounded-2xl blur-2xl -z-10" />
</div>
</div>
@@ -379,12 +379,12 @@ const Product: React.FC = () => {
const gradientColors = [
"from-[var(--color-primary)]/20 to-[var(--color-primary-dark)]/10",
"from-[var(--color-success)]/20 to-[var(--color-success-dark)]/10",
"from-[var(--color-purple)]/20 to-[var(--color-purple-dark)]/10",
"from-[var(--color-info)]/20 to-[var(--color-info-dark)]/10",
];
const borderColors = [
"border-[var(--color-primary)]/30",
"border-[var(--color-success)]/30",
"border-[var(--color-purple)]/30",
"border-[var(--color-info)]/30",
];
return (

16
frontend/src/marketing/pages/Resources.tsx
View File

@@ -95,7 +95,7 @@ const Resources: React.FC = () => {
type: "Template",
tags: ["Template", "Workflow"],
icon: DocumentTextIcon,
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
},
{
title: "Cluster Mapping Board",
@@ -132,7 +132,7 @@ const Resources: React.FC = () => {
type: "Replay",
tag: "Replay",
icon: PlayIcon,
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
},
{
title: "Editorial Control and AI Tone Systems",
@@ -167,7 +167,7 @@ const Resources: React.FC = () => {
type: "SOP Pack",
tags: ["Execution", "Prompt Pack"],
icon: ListBulletIcon,
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
},
{
title: "AI Prompt Library for Content Teams",
@@ -276,13 +276,13 @@ const Resources: React.FC = () => {
const colors = [
"from-[var(--color-primary)]/10 to-white",
"from-[var(--color-success)]/10 to-white",
"from-[var(--color-purple)]/10 to-white",
"from-[var(--color-info)]/10 to-white",
"from-[var(--color-warning)]/10 to-white",
];
const borders = [
"border-[var(--color-primary)]/30",
"border-[var(--color-success)]/30",
"border-[var(--color-purple)]/30",
"border-[var(--color-info)]/30",
"border-[var(--color-warning)]/30",
];
return (
@@ -353,13 +353,13 @@ const Resources: React.FC = () => {
const colors = [
"from-[var(--color-primary)]/10 to-white",
"from-[var(--color-success)]/10 to-white",
"from-[var(--color-purple)]/10 to-white",
"from-[var(--color-info)]/10 to-white",
"from-[var(--color-warning)]/10 to-white",
];
const borders = [
"border-[var(--color-primary)]/30",
"border-[var(--color-success)]/30",
"border-[var(--color-purple)]/30",
"border-[var(--color-info)]/30",
"border-[var(--color-warning)]/30",
];
return (
@@ -375,7 +375,7 @@ const Resources: React.FC = () => {
className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] ${
resource.tag === "Live"
? "bg-[var(--color-success)]/10 text-[var(--color-success)] border border-[var(--color-success)]/30"
: "bg-[var(--color-purple)]/10 text-[var(--color-purple)] border border-[var(--color-purple)]/30"
: "bg-[var(--color-info)]/10 text-[var(--color-info)] border border-[var(--color-info)]/30"
}`}
>
{resource.tag}

16
frontend/src/marketing/pages/Solutions.tsx
View File

@@ -100,11 +100,11 @@ const Solutions: React.FC = () => {
"Credit-based usage tracking to optimize spend and resource allocation",
"Publisher module for content calendar and scheduled publishing",
],
color: "from-[var(--color-purple)]/5 to-white",
borderColor: "border-[var(--color-purple)]/20",
iconColor: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
color: "from-[var(--color-info)]/5 to-white",
borderColor: "border-[var(--color-info)]/20",
iconColor: "from-[var(--color-info)] to-[var(--color-info-dark)]",
painColor: "bg-error-500",
outcomeColor: "bg-[var(--color-purple)]",
outcomeColor: "bg-[var(--color-info)]",
},
];
@@ -131,13 +131,13 @@ const Solutions: React.FC = () => {
title: "Cluster Analysis",
description: "AI-powered semantic clustering to group related keywords and build topical authority maps.",
icon: UserGroupIcon,
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
},
{
title: "Image Generation",
description: "AI-generated featured and in-article images based on your content with brand consistency.",
icon: PhotoIcon,
color: "from-[var(--color-primary)] to-[var(--color-purple)]",
color: "from-[var(--color-primary)] to-[var(--color-info)]",
},
{
title: "Workflow Automation",
@@ -222,8 +222,8 @@ const Solutions: React.FC = () => {
{/* Right: IGNY8 Outcomes */}
<div className="bg-white rounded-2xl border-2 border-gray-200 p-8 shadow-sm">
<div className="flex items-center gap-2 mb-6">
<CheckCircleIcon className={`h-5 w-5 ${persona.outcomeColor === 'bg-[var(--color-primary)]' ? 'text-[var(--color-primary)]' : persona.outcomeColor === 'bg-[var(--color-success)]' ? 'text-[var(--color-success)]' : 'text-[var(--color-purple)]'}`} />
<h4 className={`text-sm uppercase tracking-[0.2em] font-semibold ${persona.outcomeColor === 'bg-[var(--color-primary)]' ? 'text-[var(--color-primary)]' : persona.outcomeColor === 'bg-[var(--color-success)]' ? 'text-[var(--color-success)]' : 'text-[var(--color-purple)]'}`}>
<CheckCircleIcon className={`h-5 w-5 ${persona.outcomeColor === 'bg-[var(--color-primary)]' ? 'text-[var(--color-primary)]' : persona.outcomeColor === 'bg-[var(--color-success)]' ? 'text-[var(--color-success)]' : 'text-[var(--color-info)]'}`} />
<h4 className={`text-sm uppercase tracking-[0.2em] font-semibold ${persona.outcomeColor === 'bg-[var(--color-primary)]' ? 'text-[var(--color-primary)]' : persona.outcomeColor === 'bg-[var(--color-success)]' ? 'text-[var(--color-success)]' : 'text-[var(--color-info)]'}`}>
IGNY8 Outcomes
</h4>
</div>

6
frontend/src/marketing/pages/Tour.tsx
View File

@@ -61,7 +61,7 @@ const Tour: React.FC = () => {
{ border: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white", dot: "bg-[var(--color-primary)]" },
{ border: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white", dot: "bg-[var(--color-success)]" },
{ border: "border-[var(--color-warning)]/40", gradient: "from-[var(--color-warning)]/10 to-white", dot: "bg-[var(--color-warning)]" },
{ border: "border-[var(--color-purple)]/40", gradient: "from-[var(--color-purple)]/10 to-white", dot: "bg-[var(--color-purple)]" },
{ border: "border-[var(--color-info)]/40", gradient: "from-[var(--color-info)]/10 to-white", dot: "bg-[var(--color-info)]" },
];
const colorScheme = colors[index % colors.length];
return (
@@ -99,11 +99,11 @@ const Tour: React.FC = () => {
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 text-sm text-gray-600">
{[
{ name: "Keywords → Clusters", time: "Stage 1", highlight: "Auto-cluster by AI similarity", color: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white" },
{ name: "Clusters → Ideas", time: "Stage 2", highlight: "Generate content concepts", color: "border-[var(--color-purple)]/40", gradient: "from-[var(--color-purple)]/10 to-white" },
{ name: "Clusters → Ideas", time: "Stage 2", highlight: "Generate content concepts", color: "border-[var(--color-info)]/40", gradient: "from-[var(--color-info)]/10 to-white" },
{ name: "Ideas → Tasks", time: "Stage 3", highlight: "Create writing assignments", color: "border-[var(--color-warning)]/40", gradient: "from-[var(--color-warning)]/10 to-white" },
{ name: "Tasks → Content", time: "Stage 4", highlight: "Generate AI articles", color: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white" },
{ name: "Content → Images", time: "Stage 5", highlight: "Create featured & in-article images", color: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white" },
{ name: "Images → Review", time: "Stage 6", highlight: "Queue for editorial approval", color: "border-[var(--color-purple)]/40", gradient: "from-[var(--color-purple)]/10 to-white" },
{ name: "Images → Review", time: "Stage 6", highlight: "Queue for editorial approval", color: "border-[var(--color-info)]/40", gradient: "from-[var(--color-info)]/10 to-white" },
{ name: "Review → Published", time: "Stage 7", highlight: "Publish to your site", color: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white" },
].map((recipe) => (
<div

10
frontend/src/marketing/pages/Upcoming.tsx
View File

@@ -81,8 +81,8 @@ const Upcoming: React.FC = () => {
{
phase: "Launching Q2 2026",
badge: "In Development",
badgeColor: "bg-gradient-to-r from-[var(--color-purple)] to-[var(--color-purple-dark)] text-white",
borderColor: "border-[var(--color-purple)]/30",
badgeColor: "bg-gradient-to-r from-[var(--color-info)] to-[var(--color-info-dark)] text-white",
borderColor: "border-[var(--color-info)]/30",
features: [
{
icon: ShoppingBagIcon,
@@ -124,7 +124,7 @@ const Upcoming: React.FC = () => {
"FAQ pages mapped to search intent",
"Press and media pages",
],
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
},
],
},
@@ -188,7 +188,7 @@ const Upcoming: React.FC = () => {
"Custom white-label reports",
"API access for data export",
],
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
},
],
},
@@ -246,7 +246,7 @@ const Upcoming: React.FC = () => {
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
{phase.phase}
</h2>
<div className="w-24 h-1 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-purple)] mx-auto rounded-full" />
<div className="w-24 h-1 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-info)] mx-auto rounded-full" />
</div>
{/* Features Grid */}

2
frontend/src/marketing/styles/marketing.css
View File

@@ -136,7 +136,7 @@
--color-theme-pink-500: #ee46bc;
--color-theme-purple-500: #7a5af8;
--color-theme-info-500: #7a5af8;
--shadow-theme-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
0px 2px 4px -2px rgba(16, 24, 40, 0.06);

8
frontend/src/pages/Automation/AutomationPage.tsx
View File

@@ -52,11 +52,11 @@ import {
*/
const STAGE_CONFIG = [
{ icon: ListIcon, color: 'from-brand-500 to-brand-600', textColor: 'text-brand-600 dark:text-brand-400', bgColor: 'bg-brand-100 dark:bg-brand-900/30', hoverColor: 'hover:border-brand-500', name: 'Keywords → Clusters' },
{ icon: GroupIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-100 dark:bg-purple-900/30', hoverColor: 'hover:border-purple-500', name: 'Clusters → Ideas' },
{ icon: GroupIcon, color: 'from-info-500 to-info-600', textColor: 'text-info-600 dark:text-info-400', bgColor: 'bg-info-100 dark:bg-info-900/30', hoverColor: 'hover:border-info-500', name: 'Clusters → Ideas' },
{ icon: BoltIcon, color: 'from-warning-500 to-warning-600', textColor: 'text-warning-600 dark:text-warning-400', bgColor: 'bg-warning-100 dark:bg-warning-900/30', hoverColor: 'hover:border-warning-500', name: 'Ideas → Tasks' },
{ icon: CheckCircleIcon, color: 'from-gray-700 to-gray-800', textColor: 'text-gray-700 dark:text-gray-300', bgColor: 'bg-gray-100 dark:bg-gray-800/30', hoverColor: 'hover:border-gray-500', name: 'Tasks → Content' },
{ icon: PencilIcon, color: 'from-brand-500 to-brand-600', textColor: 'text-brand-600 dark:text-brand-400', bgColor: 'bg-brand-100 dark:bg-brand-900/30', hoverColor: 'hover:border-brand-500', name: 'Content → Image Prompts' },
{ icon: FileIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-100 dark:bg-purple-900/30', hoverColor: 'hover:border-purple-500', name: 'Image Prompts → Images' },
{ icon: FileIcon, color: 'from-info-500 to-info-600', textColor: 'text-info-600 dark:text-info-400', bgColor: 'bg-info-100 dark:bg-info-900/30', hoverColor: 'hover:border-info-500', name: 'Image Prompts → Images' },
{ icon: PaperPlaneIcon, color: 'from-success-500 to-success-600', textColor: 'text-success-600 dark:text-success-400', bgColor: 'bg-success-100 dark:bg-success-900/30', hoverColor: 'hover:border-success-500', name: 'In Review → Approved' },
];
@@ -772,7 +772,7 @@ const AutomationPage: React.FC = () => {
const progressPercent = total > 0 ? Math.min(Math.round((processed / total) * 100), 100) : 0;
// Determine the left border color based on stage
const stageBorderColors = ['border-l-brand-500', 'border-l-purple-500', 'border-l-warning-500', 'border-l-gray-600'];
const stageBorderColors = ['border-l-brand-500', 'border-l-info-500', 'border-l-warning-500', 'border-l-gray-600'];
const stageBorderColor = stageBorderColors[index] || 'border-l-brand-500';
// Check if this stage is enabled in config
@@ -908,7 +908,7 @@ const AutomationPage: React.FC = () => {
const progressPercent = total > 0 ? Math.min(Math.round((processed / total) * 100), 100) : 0;
// Determine the left border color based on stage (5=brand, 6=purple)
const stageBorderColors56 = ['border-l-brand-500', 'border-l-purple-500'];
const stageBorderColors56 = ['border-l-brand-500', 'border-l-info-500'];
const stageBorderColor = stageBorderColors56[index] || 'border-l-brand-500';
// Check if this stage is enabled in config

42
frontend/src/pages/Help/Help.tsx
View File

@@ -25,11 +25,11 @@ interface TableOfContentsItem {
function WorkflowPipeline() {
const stages = [
{ name: "Keywords", color: "bg-brand-500", description: "Import & organize search terms" },
{ name: "Clusters", color: "bg-purple-500", description: "Group related keywords" },
{ name: "Clusters", color: "bg-info-500", description: "Group related keywords" },
{ name: "Ideas", color: "bg-warning-500", description: "Generate content concepts" },
{ name: "Tasks", color: "bg-success-500", description: "Create writing assignments" },
{ name: "Content", color: "bg-brand-500", description: "AI-generate articles" },
{ name: "Images", color: "bg-purple-500", description: "Create visuals" },
{ name: "Images", color: "bg-info-500", description: "Create visuals" },
{ name: "Review", color: "bg-warning-500", description: "Edit & approve" },
{ name: "Published", color: "bg-success-500", description: "Live on your site" },
];
@@ -81,11 +81,11 @@ function WorkflowPipeline() {
function AutomationPipelineVisual() {
const automationStages = [
{ from: "Keywords", to: "Clusters", color: "border-brand-500", bg: "bg-brand-50 dark:bg-brand-900/20" },
{ from: "Clusters", to: "Ideas", color: "border-purple-500", bg: "bg-purple-50 dark:bg-purple-900/20" },
{ from: "Clusters", to: "Ideas", color: "border-info-500", bg: "bg-info-50 dark:bg-info-900/20" },
{ from: "Ideas", to: "Tasks", color: "border-warning-500", bg: "bg-warning-50 dark:bg-warning-900/20" },
{ from: "Tasks", to: "Content", color: "border-success-500", bg: "bg-success-50 dark:bg-success-900/20" },
{ from: "Content", to: "Images", color: "border-brand-500", bg: "bg-brand-50 dark:bg-brand-900/20" },
{ from: "Images", to: "Review", color: "border-purple-500", bg: "bg-purple-50 dark:bg-purple-900/20" },
{ from: "Images", to: "Review", color: "border-info-500", bg: "bg-info-50 dark:bg-info-900/20" },
{ from: "Review", to: "Published", color: "border-success-500", bg: "bg-success-50 dark:bg-success-900/20" },
];
@@ -110,7 +110,7 @@ function CreditSystemVisual() {
const operations = [
{ name: "Content Generation", credits: "Token-based", color: "bg-brand-100 dark:bg-brand-900/30 border-brand-300" },
{ name: "Image Generation (Basic)", credits: "1 credit", color: "bg-success-100 dark:bg-success-900/30 border-success-300" },
{ name: "Image Generation (Quality)", credits: "5 credits", color: "bg-purple-100 dark:bg-purple-900/30 border-purple-300" },
{ name: "Image Generation (Quality)", credits: "5 credits", color: "bg-info-100 dark:bg-info-900/30 border-info-300" },
{ name: "Image Generation (Premium)", credits: "15 credits", color: "bg-warning-100 dark:bg-warning-900/30 border-warning-300" },
{ name: "Keyword Clustering", credits: "Token-based", color: "bg-brand-100 dark:bg-brand-900/30 border-brand-300" },
{ name: "Idea Generation", credits: "Token-based", color: "bg-brand-100 dark:bg-brand-900/30 border-brand-300" },
@@ -310,7 +310,7 @@ export default function Help() {
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Table of Contents */}
<Card className="p-6 mb-8 bg-gradient-to-r from-brand-50 to-purple-50 dark:from-brand-900/10 dark:to-purple-900/10 border-brand-200 dark:border-brand-800">
<Card className="p-6 mb-8 bg-gradient-to-r from-brand-50 to-info-50 dark:from-brand-900/10 dark:to-info-900/10 border-brand-200 dark:border-brand-800">
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<ListIcon className="size-5 text-brand-600 dark:text-brand-400" />
What Do You Want to Learn?
@@ -372,7 +372,7 @@ export default function Help() {
</div>
<div className="flex gap-4">
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-purple-500 text-white flex items-center justify-center font-bold">
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-info-500 text-white flex items-center justify-center font-bold">
3
</div>
<div className="flex-1">
@@ -408,7 +408,7 @@ export default function Help() {
</div>
<div className="flex gap-4">
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-purple-500 text-white flex items-center justify-center font-bold">
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-info-500 text-white flex items-center justify-center font-bold">
6
</div>
<div className="flex-1">
@@ -494,7 +494,7 @@ export default function Help() {
</p>
</div>
<div className="border-l-4 border-purple-500 pl-4">
<div className="border-l-4 border-info-500 pl-4">
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">Key Metrics</h4>
<ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
<li>Total keywords in workflow</li>
@@ -624,7 +624,7 @@ export default function Help() {
</ul>
</div>
<div className="border-l-4 border-purple-500 pl-4">
<div className="border-l-4 border-info-500 pl-4">
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">Image Settings Tab</h4>
<ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
<li><strong>Image Quality:</strong> Basic, Quality, or Premium (powered by IGNY8 AI)</li>
@@ -862,7 +862,7 @@ export default function Help() {
</div>
</div>
<div className="border-l-4 border-purple-500 pl-4 mt-4">
<div className="border-l-4 border-info-500 pl-4 mt-4">
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">Content Statuses</h4>
<ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
<li><strong>Draft:</strong> Initial AI-generated content</li>
@@ -890,7 +890,7 @@ export default function Help() {
</p>
</div>
<div className="border-l-4 border-purple-500 pl-4">
<div className="border-l-4 border-info-500 pl-4">
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">In-Article Images</h4>
<p className="text-sm text-gray-600 dark:text-gray-400">
Additional images placed throughout the content. Enhances reader engagement and SEO.
@@ -976,7 +976,7 @@ export default function Help() {
</ul>
</div>
<div className="border-l-4 border-purple-500 pl-4">
<div className="border-l-4 border-info-500 pl-4">
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">Batch Configuration</h4>
<ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
<li>Set items per batch (5, 10, 25, 50)</li>
@@ -998,7 +998,7 @@ export default function Help() {
{/* Publisher Section */}
<div ref={(el) => (sectionRefs.current["publisher"] = el)} className="mb-12 scroll-mt-24">
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
<FileIcon className="size-8 text-purple-600 dark:text-purple-400" />
<FileIcon className="size-8 text-info-600 dark:text-info-400" />
Publisher & Calendar
</h2>
@@ -1025,7 +1025,7 @@ export default function Help() {
</ul>
</div>
<div className="border-l-4 border-purple-500 pl-4">
<div className="border-l-4 border-info-500 pl-4">
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">Publishing History</h4>
<p className="text-sm text-gray-600 dark:text-gray-400">
Track all published content with timestamps, post IDs, and sync status.
@@ -1101,7 +1101,7 @@ export default function Help() {
</ul>
</div>
<div className="border-l-4 border-purple-500 pl-4">
<div className="border-l-4 border-info-500 pl-4">
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">Image Generation</h4>
<ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
<li><strong>Basic (1 credit):</strong> Fast, cost-effective images</li>
@@ -1118,7 +1118,7 @@ export default function Help() {
{/* Account & Billing Section */}
<div ref={(el) => (sectionRefs.current["account"] = el)} className="mb-12 scroll-mt-24">
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
<GroupIcon className="size-8 text-purple-600 dark:text-purple-400" />
<GroupIcon className="size-8 text-info-600 dark:text-info-400" />
Account & Billing
</h2>
@@ -1141,7 +1141,7 @@ export default function Help() {
</p>
</div>
<div className="border-l-4 border-purple-500 pl-4">
<div className="border-l-4 border-info-500 pl-4">
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">Fixed-Cost Operations</h4>
<p className="text-sm text-gray-600 dark:text-gray-400">
Image generation uses fixed credits: 1 for Basic, 5 for Quality, and 15 for Premium.
@@ -1207,7 +1207,7 @@ export default function Help() {
</p>
</div>
<div className="bg-purple-50 dark:bg-purple-900/30 p-4 rounded-lg">
<div className="bg-info-50 dark:bg-info-900/30 p-4 rounded-lg">
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">Team Members</h4>
<p className="text-sm text-gray-600 dark:text-gray-400">
Maximum users per account. Hard limit based on plan.
@@ -1262,7 +1262,7 @@ export default function Help() {
{/* FAQ Section */}
<div ref={(el) => (sectionRefs.current["faq"] = el)} className="mb-12 scroll-mt-24">
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
<HelpCircleIcon className="size-8 text-purple-600 dark:text-purple-400" />
<HelpCircleIcon className="size-8 text-info-600 dark:text-info-400" />
Frequently Asked Questions
</h2>
@@ -1278,7 +1278,7 @@ export default function Help() {
</div>
{/* Support Section */}
<Card className="p-8 bg-gradient-to-r from-brand-500 to-purple-600 text-white">
<Card className="p-8 bg-gradient-to-r from-brand-500 to-info-600 text-white">
<div className="text-center">
<h3 className="text-2xl font-bold mb-4">Still Need Help?</h3>
<p className="text-white/90 mb-6">

8
frontend/src/pages/Optimizer/AnalysisPreview.tsx
View File

@@ -250,12 +250,12 @@ export default function AnalysisPreview() {
</div>
)}
{!scores.has_taxonomy_mapping && (
<div className="p-3 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg">
<div className="p-3 bg-info-50 dark:bg-info-900/20 border border-info-200 dark:border-info-800 rounded-lg">
<div className="flex items-start gap-2">
<span className="text-purple-600 dark:text-purple-400 font-bold">2.</span>
<span className="text-info-600 dark:text-info-400 font-bold">2.</span>
<div className="flex-1">
<div className="font-medium text-purple-900 dark:text-purple-300">Add Taxonomy Mapping</div>
<div className="text-sm text-purple-700 dark:text-purple-400 mt-1">
<div className="font-medium text-info-900 dark:text-info-300">Add Taxonomy Mapping</div>
<div className="text-sm text-info-700 dark:text-info-400 mt-1">
Categorize this content with a taxonomy for better organization and navigation.
</div>
</div>

8
frontend/src/pages/Publisher/ContentCalendar.tsx
View File

@@ -490,20 +490,20 @@ export default function ContentCalendar() {
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
{/* Review */}
<Card
className="p-4 cursor-pointer hover:border-purple-500 transition-colors group"
className="p-4 cursor-pointer hover:border-info-500 transition-colors group"
onClick={() => navigate('/writer/review')}
>
<div className="flex items-start justify-between">
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<div className="size-8 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
<PencilIcon className="w-4 h-4 text-purple-600" />
<div className="size-8 rounded-lg bg-info-100 dark:bg-info-900/30 flex items-center justify-center">
<PencilIcon className="w-4 h-4 text-info-600" />
</div>
<h3 className="text-base font-semibold text-gray-900 dark:text-white">Review</h3>
</div>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Content awaiting review before approval</p>
</div>
<p className="text-3xl font-bold text-purple-600 dark:text-purple-400">{stats.review}</p>
<p className="text-3xl font-bold text-info-600 dark:text-info-400">{stats.review}</p>
</div>
</Card>

6
frontend/src/pages/Publisher/PublishSettings.tsx
View File

@@ -225,10 +225,10 @@ export default function PublishSettings() {
</Card>
{/* Card 3: Schedule (Days + Time Slots) */}
<Card className="p-6 border-l-4 border-l-purple-500">
<Card className="p-6 border-l-4 border-l-info-500">
<div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<CalendarIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
<div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<CalendarIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div>
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Schedule</h2>
</div>

2
frontend/src/pages/Settings/Integration.tsx
View File

@@ -712,7 +712,7 @@ export default function Integration() {
</Label>
{/* Featured Image (full width) - Selectable */}
<div className="p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gradient-to-r from-purple-500 to-brand-500 text-white">
<div className="p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gradient-to-r from-info-500 to-brand-500 text-white">
<div className="flex items-center justify-between mb-2">
<div className="font-medium">Featured Image</div>
<div className="text-xs bg-white/20 px-2 py-1 rounded">

2
frontend/src/pages/Settings/WordPressIntegrationDebug.tsx
View File

@@ -478,7 +478,7 @@ export default function WordPressIntegrationDebug() {
<button
onClick={() => validatePostSync()}
disabled={loading}
className="inline-flex items-center px-3 py-1 text-xs bg-purple-100 hover:bg-purple-200 text-purple-700 rounded-md disabled:opacity-50"
className="inline-flex items-center px-3 py-1 text-xs bg-info-100 hover:bg-info-200 text-info-700 rounded-md disabled:opacity-50"
>
<SettingsIcon className="h-3 w-3 mr-1" />
Validate Content

8
frontend/src/pages/Setup/IndustriesSectorsKeywords.tsx
View File

@@ -1480,16 +1480,16 @@ export default function IndustriesSectorsKeywords() {
{/* Ahrefs Coming Soon Banner */}
{showAhrefsBanner && (
<div className="mx-6 mt-6 mb-6">
<Card className="p-4 bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800">
<Card className="p-4 bg-info-50 dark:bg-info-900/20 border-info-200 dark:border-info-800">
<div className="flex items-start gap-3">
<div className="flex-shrink-0">
<ShootingStarIcon className="w-5 h-5 text-purple-600 dark:text-purple-400 mt-0.5" />
<ShootingStarIcon className="w-5 h-5 text-info-600 dark:text-info-400 mt-0.5" />
</div>
<div className="flex-1">
<h3 className="text-sm font-medium text-purple-900 dark:text-purple-200 mb-1">
<h3 className="text-sm font-medium text-info-900 dark:text-info-200 mb-1">
Ahrefs Keyword Research - Coming March/April 2026
</h3>
<p className="text-sm text-purple-700 dark:text-purple-300">
<p className="text-sm text-info-700 dark:text-info-300">
Soon you'll be able to research keywords directly with Ahrefs API, pulling fresh data with volume, difficulty, and competition metrics. For now, browse our curated keyword library above.
</p>
</div>

32
frontend/src/pages/Sites/AIAutomationSettings.tsx
View File

@@ -485,10 +485,10 @@ export default function AIAutomationSettings({ siteId }: AIAutomationSettingsPro
</Card>
{/* Card 3: Image Generation (Style & Count only) */}
<Card className="p-5 border-l-4 border-l-purple-500">
<Card className="p-5 border-l-4 border-l-info-500">
<div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<ImageIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
<div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<ImageIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div>
<div>
<h3 className="font-semibold text-gray-900 dark:text-white">Images</h3>
@@ -546,8 +546,8 @@ export default function AIAutomationSettings({ siteId }: AIAutomationSettingsPro
<Card className="p-5 lg:col-span-2">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<BoltIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
<div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<BoltIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div>
<div>
<h3 className="font-semibold text-gray-900 dark:text-white">Automation Stages Settings</h3>
@@ -705,10 +705,10 @@ export default function AIAutomationSettings({ siteId }: AIAutomationSettingsPro
{/* Right: Schedule + Capacity stacked */}
<div className="space-y-6">
{/* Schedule Card */}
<Card className="p-5 border-l-4 border-l-purple-500">
<Card className="p-5 border-l-4 border-l-info-500">
<div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<CalendarIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
<div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<CalendarIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div>
<div>
<h3 className="font-semibold text-gray-900 dark:text-white">Schedule</h3>
@@ -861,12 +861,12 @@ export default function AIAutomationSettings({ siteId }: AIAutomationSettingsPro
</Card>
{/* Stage Configuration Explanation */}
<Card className="p-4 bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800">
<Card className="p-4 bg-info-50 dark:bg-info-900/20 border-info-200 dark:border-info-800">
<div className="flex items-start gap-3">
<BoltIcon className="w-5 h-5 text-purple-600 dark:text-purple-400 mt-0.5 flex-shrink-0" />
<div className="text-sm text-purple-800 dark:text-purple-200">
<BoltIcon className="w-5 h-5 text-info-600 dark:text-info-400 mt-0.5 flex-shrink-0" />
<div className="text-sm text-info-800 dark:text-info-200">
<p className="font-medium mb-2">Stage Configuration</p>
<ul className="list-disc list-inside space-y-1 text-purple-700 dark:text-purple-300">
<ul className="list-disc list-inside space-y-1 text-info-700 dark:text-info-300">
<li><strong>Batch:</strong> Items processed together</li>
<li><strong>Limit:</strong> Max items per automation run</li>
<li><strong>Model:</strong> Live (production) or Test mode</li>
@@ -877,12 +877,12 @@ export default function AIAutomationSettings({ siteId }: AIAutomationSettingsPro
</Card>
{/* Schedule & Capacity Explanation */}
<Card className="p-4 bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800">
<Card className="p-4 bg-info-50 dark:bg-info-900/20 border-info-200 dark:border-info-800">
<div className="flex items-start gap-3">
<CalendarIcon className="w-5 h-5 text-purple-600 dark:text-purple-400 mt-0.5 flex-shrink-0" />
<div className="text-sm text-purple-800 dark:text-purple-200">
<CalendarIcon className="w-5 h-5 text-info-600 dark:text-info-400 mt-0.5 flex-shrink-0" />
<div className="text-sm text-info-800 dark:text-info-200">
<p className="font-medium mb-2">Schedule & Capacity</p>
<ul className="list-disc list-inside space-y-1 text-purple-700 dark:text-purple-300">
<ul className="list-disc list-inside space-y-1 text-info-700 dark:text-info-300">
<li>Select days content can be published</li>
<li>Add time slots for publishing</li>
<li>Capacity = Days × Time Slots</li>

6
frontend/src/pages/Sites/Dashboard.tsx
View File

@@ -301,10 +301,10 @@ export default function SiteDashboard() {
{/* Integrations */}
<button
onClick={() => navigate(`/sites/${siteId}/settings?tab=integrations`)}
className="flex items-center gap-3 px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-purple-300 hover:bg-purple-50 dark:hover:bg-purple-900/10 transition-all group"
className="flex items-center gap-3 px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-info-300 hover:bg-info-50 dark:hover:bg-info-900/10 transition-all group"
>
<div className="size-8 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0">
<PlugInIcon className="h-4 w-4 text-purple-600 dark:text-purple-400" />
<div className="size-8 rounded-lg bg-info-100 dark:bg-info-900/30 flex items-center justify-center flex-shrink-0">
<PlugInIcon className="h-4 w-4 text-info-600 dark:text-info-400" />
</div>
<span className="flex-1 text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Integrations</span>
</button>

8
frontend/src/pages/Sites/Settings.tsx
View File

@@ -586,10 +586,10 @@ export default function SiteSettings() {
}}
className={`px-4 py-2 font-medium border-b-2 rounded-none transition-colors whitespace-nowrap ${
activeTab === 'automation'
? 'border-purple-500 text-purple-600 dark:text-purple-400'
? 'border-info-500 text-info-600 dark:text-info-400'
: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
}`}
startIcon={<CalendarIcon className={`w-4 h-4 ${activeTab === 'automation' ? 'text-purple-500' : ''}`} />}
startIcon={<CalendarIcon className={`w-4 h-4 ${activeTab === 'automation' ? 'text-info-500' : ''}`} />}
>
Automation
</Button>
@@ -855,9 +855,9 @@ export default function SiteSettings() {
</Card>
{/* Open Graph */}
<Card className="p-6 border-l-4 border-l-purple-500">
<Card className="p-6 border-l-4 border-l-info-500">
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
<PaperPlaneIcon className="w-5 h-5 text-purple-500" />
<PaperPlaneIcon className="w-5 h-5 text-info-500" />
Open Graph
</h3>
<div className="space-y-4">

6
frontend/src/pages/account/AccountSettingsPage.tsx
View File

@@ -354,7 +354,7 @@ export default function AccountSettingsPage() {
</Card>
{/* Billing Address Card */}
<Card className="p-6 border-l-4 border-l-purple-500">
<Card className="p-6 border-l-4 border-l-info-500">
<h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Billing Address</h3>
<div className="space-y-4">
<InputField
@@ -528,7 +528,7 @@ export default function AccountSettingsPage() {
</Card>
{/* Preferences Card */}
<Card className="p-6 border-l-4 border-l-purple-500">
<Card className="p-6 border-l-4 border-l-info-500">
<h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Preferences</h3>
<div className="space-y-4">
<div>
@@ -729,7 +729,7 @@ export default function AccountSettingsPage() {
<li>✗ Cannot manage billing</li>
</ul>
</div>
<div className="p-4 border-l-4 border-purple-500 bg-purple-50/50 dark:bg-purple-900/10 rounded-r-lg">
<div className="p-4 border-l-4 border-info-500 bg-info-50/50 dark:bg-info-900/10 rounded-r-lg">
<div className="flex items-center justify-between mb-2">
<h4 className="font-semibold text-gray-900 dark:text-white">Member</h4>
<Badge variant="light" color="info">Standard Access</Badge>

8
frontend/src/pages/account/ContentSettingsPage.tsx
View File

@@ -527,10 +527,10 @@ export default function ContentSettingsPage() {
{/* Image Settings Tab */}
{activeTab === 'images' && (
<div className="space-y-6 max-w-4xl">
<Card className="p-6 border-l-4 border-l-purple-500">
<Card className="p-6 border-l-4 border-l-info-500">
<div className="flex items-center gap-3 mb-6">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<ImageIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
<div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<ImageIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div>
<div>
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Image Generation</h2>
@@ -579,7 +579,7 @@ export default function ContentSettingsPage() {
{/* Row 2: Featured Image Size */}
<div>
<Label className="mb-2">Featured Image</Label>
<div className="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gradient-to-r from-purple-500 to-brand-500 text-white">
<div className="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gradient-to-r from-info-500 to-brand-500 text-white">
<div className="flex items-center justify-between mb-3">
<div className="font-medium">Featured Image Size</div>
<div className="text-xs bg-white/20 px-2 py-1 rounded">Always Enabled</div>

22
frontend/src/pages/account/PlansAndBillingPage.tsx
View File

@@ -813,7 +813,7 @@ export default function PlansAndBillingPage() {
const stageConfig = {
verifying: { color: 'bg-brand-600', label: 'Verifying Payment' },
processing: { color: 'bg-warning-600', label: 'Processing Payment' },
finalizing: { color: 'bg-purple-600', label: 'Finalizing' },
finalizing: { color: 'bg-info-600', label: 'Finalizing' },
activating: { color: 'bg-success-600', label: 'Activating Subscription' },
};
const config = stageConfig[paymentProcessing.stage];
@@ -1024,14 +1024,14 @@ export default function PlansAndBillingPage() {
<div className="text-xs text-success-600 dark:text-success-400 mt-1">Never expire</div>
</div>
<div className="p-4 bg-white/80 dark:bg-gray-800/60 rounded-xl shadow-sm">
<div className="flex items-center gap-2 text-sm text-purple-700 dark:text-purple-300 mb-1">
<TrendingUpIcon className="w-4 h-4 text-purple-600" />
<div className="flex items-center gap-2 text-sm text-info-700 dark:text-info-300 mb-1">
<TrendingUpIcon className="w-4 h-4 text-info-600" />
Used
</div>
<div className="text-2xl font-bold text-purple-900 dark:text-white">
<div className="text-2xl font-bold text-info-900 dark:text-white">
{creditBalance?.credits_used_this_month?.toLocaleString() || 0}
</div>
<div className="text-xs text-purple-600 dark:text-purple-400 mt-1">This month ({creditUsage}%)</div>
<div className="text-xs text-info-600 dark:text-info-400 mt-1">This month ({creditUsage}%)</div>
</div>
<div className="p-4 bg-white/80 dark:bg-gray-800/60 rounded-xl shadow-sm">
<div className="flex items-center gap-2 text-sm text-success-700 dark:text-success-300 mb-1">
@@ -1089,7 +1089,7 @@ export default function PlansAndBillingPage() {
<div className="h-3 bg-white/50 dark:bg-gray-800/50 rounded-full overflow-hidden">
<div
className={`h-full rounded-full transition-all duration-500 ${
creditUsage >= 90 ? 'bg-error-500' : creditUsage >= 70 ? 'bg-warning-500' : 'bg-gradient-to-r from-brand-500 to-purple-500'
creditUsage >= 90 ? 'bg-error-500' : creditUsage >= 70 ? 'bg-warning-500' : 'bg-gradient-to-r from-brand-500 to-info-500'
}`}
style={{ width: `${Math.min(creditUsage, 100)}%` }}
/>
@@ -1119,8 +1119,8 @@ export default function PlansAndBillingPage() {
</div>
<div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
<div className="flex items-center gap-3">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<UsersIcon className="w-4 h-4 text-purple-600 dark:text-purple-400" />
<div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<UsersIcon className="w-4 h-4 text-info-600 dark:text-info-400" />
</div>
<span className="text-sm text-gray-700 dark:text-gray-300">Team Members</span>
</div>
@@ -1281,8 +1281,8 @@ export default function PlansAndBillingPage() {
<Card className="p-6">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<ShootingStarIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
<div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<ShootingStarIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div>
<div>
<h3 className="font-semibold text-gray-900 dark:text-white">
@@ -1318,7 +1318,7 @@ export default function PlansAndBillingPage() {
className={`p-4 border rounded-xl flex items-center justify-between transition-colors ${
isCurrentPlan
? 'border-brand-500 bg-brand-50/50 dark:bg-brand-900/20'
: 'border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-700'
: 'border-gray-200 dark:border-gray-700 hover:border-info-300 dark:hover:border-info-700'
}`}
>
<div>

14
frontend/src/pages/account/UsageAnalyticsPage.tsx
View File

@@ -99,14 +99,14 @@ export default function UsageAnalyticsPage() {
</div>
</Card>
<Card className="p-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 border-l-4 border-l-purple-500">
<Card className="p-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 border-l-4 border-l-info-500">
<div className="flex items-center gap-3">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<TrendingUpIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
<div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<TrendingUpIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div>
<div>
<div className="text-xs text-gray-600 dark:text-gray-400">Credits Used This Month</div>
<div className="text-2xl font-bold text-purple-600 dark:text-purple-400">
<div className="text-2xl font-bold text-info-600 dark:text-info-400">
{creditBalance.credits_used_this_month.toLocaleString()}
</div>
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">spent so far</div>
@@ -214,12 +214,12 @@ export default function UsageAnalyticsPage() {
<Card className="p-6">
<div className="flex items-center gap-3 mb-3">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<BarChart3Icon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
<div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<BarChart3Icon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div>
<div className="text-sm font-medium text-gray-600 dark:text-gray-400">Avg Operations/Day</div>
</div>
<div className="text-3xl font-bold text-purple-600 dark:text-purple-400">
<div className="text-3xl font-bold text-info-600 dark:text-info-400">
{Math.round((analytics?.usage_by_type.reduce((sum, item) => sum + item.count, 0) || 0) / period)}
</div>
<div className="text-sm text-gray-500 dark:text-gray-400 mt-1">daily average</div>

18
frontend/src/pages/account/UsageDashboardPage.tsx
View File

@@ -484,10 +484,10 @@ export default function UsageDashboardPage() {
<div className="text-xs text-gray-500 dark:text-gray-400">Never expire</div>
</div>
<div>
<div className="text-3xl font-bold text-purple-700 dark:text-purple-400 mb-1">
<div className="text-3xl font-bold text-info-700 dark:text-info-400 mb-1">
{creditBalance?.credits_used_this_month.toLocaleString() || 0}
</div>
<div className="text-sm text-purple-600 dark:text-purple-300">Used This Month</div>
<div className="text-sm text-info-600 dark:text-info-300">Used This Month</div>
</div>
<div>
<div className="text-3xl font-bold text-indigo-800 dark:text-white mb-1">
@@ -520,7 +520,7 @@ export default function UsageDashboardPage() {
</div>
<div className="h-3 bg-white/50 dark:bg-gray-800/50 rounded-full overflow-hidden">
<div
className="h-full rounded-full transition-all duration-500 bg-gradient-to-r from-brand-500 to-purple-500"
className="h-full rounded-full transition-all duration-500 bg-gradient-to-r from-brand-500 to-info-500"
style={{ width: `${Math.min(creditPercentage, 100)}%` }}
/>
</div>
@@ -590,7 +590,7 @@ export default function UsageDashboardPage() {
icon={<UsersIcon className="w-4 h-4" />}
usage={usageSummary?.hard_limits?.users}
type="hard"
color="var(--color-purple-500)"
color="var(--color-info-500)"
/>
<LimitCard
title="Keywords"
@@ -644,8 +644,8 @@ export default function UsageDashboardPage() {
<Card className="p-6">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<PieChartIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
<div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<PieChartIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div>
<div>
<h3 className="font-semibold text-gray-900 dark:text-white">Credit Consumption</h3>
@@ -727,8 +727,8 @@ export default function UsageDashboardPage() {
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<FileTextIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
<div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<FileTextIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div>
<div>
<h3 className="font-semibold text-gray-900 dark:text-white">Usage Logs</h3>
@@ -910,7 +910,7 @@ export default function UsageDashboardPage() {
</div>
<div className="p-4 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
<div className="flex items-center gap-2 mb-2">
<ImageIcon className="w-4 h-4 text-purple-500" />
<ImageIcon className="w-4 h-4 text-info-500" />
<span className="font-medium text-gray-900 dark:text-white">Image Creation</span>
</div>
<p className="text-sm text-gray-600 dark:text-gray-400">1-15 credits per image (by quality)</p>

2
frontend/src/styles/README.md
View File

@@ -26,7 +26,7 @@ import "./styles/design-system.css";
--color-success /* Success green (#00B894) */
--color-warning /* Warning amber (#F59E0B) */
--color-danger /* Error red (#DC2626) */
--color-purple /* Premium purple (#7C3AED) */
--color-info /* Info/accent color (#18b2c4) */
```
### Usage

16
frontend/src/styles/cms/presets.ts
View File

@@ -35,7 +35,7 @@ export const STYLE_PRESETS: StylePreset[] = [
description: 'Clean, contemporary design with vibrant colors',
colors: {
primary: 'var(--color-primary, #2C7AA1)',
secondary: 'var(--color-purple, #2C40A1)',
secondary: 'var(--color-info, #2C40A1)',
accent: 'var(--color-success, #2CA18E)',
background: 'var(--color-white, #ffffff)',
text: 'var(--color-gray-800, #1f2937)',
@@ -126,12 +126,12 @@ export const STYLE_PRESETS: StylePreset[] = [
name: 'Elegant',
description: 'Sophisticated, refined design',
colors: {
primary: 'var(--color-purple, #2C40A1)',
secondary: 'var(--color-purple-400, #5f73d1)',
accent: 'var(--color-purple-300, #8895e0)',
background: 'var(--color-purple-50, #f0f2fc)',
text: 'var(--color-purple-900, #1a2660)',
border: 'var(--color-purple-200, #b1baeb)',
primary: 'var(--color-info, #2C40A1)',
secondary: 'var(--color-info-400, #5f73d1)',
accent: 'var(--color-info-300, #8895e0)',
background: 'var(--color-info-50, #f0f2fc)',
text: 'var(--color-info-900, #1a2660)',
border: 'var(--color-info-200, #b1baeb)',
},
typography: {
fontFamily: 'Playfair Display, serif',
@@ -151,7 +151,7 @@ export const STYLE_PRESETS: StylePreset[] = [
colors: {
primary: 'var(--color-brand-400, #4899bd)',
secondary: 'var(--color-primary, #2C7AA1)',
accent: 'var(--color-purple, #2C40A1)',
accent: 'var(--color-info, #2C40A1)',
background: 'var(--color-gray-900, #0f172a)',
text: 'var(--color-gray-100, #f1f5f9)',
border: 'var(--color-gray-800, #1e293b)',

54
frontend/src/styles/design-system.css
View File

@@ -11,7 +11,7 @@
⚠️ ONLY 6 HEX VALUES IN ENTIRE SYSTEM - Everything else derived!
⚠️ TAILWIND DEFAULT COLORS ARE DISABLED - THEY WON'T WORK!
⚠️ AI AGENTS: DO NOT USE blue-500, red-500, green-500, etc.
⚠️ USE ONLY: brand-*, success-*, warning-*, error-*, purple-*, gray-*
⚠️ USE ONLY: brand-*, success-*, warning-*, error-*, info-*, gray-*
Last Updated: 2026-01-01
=================================================================== */
@@ -36,7 +36,7 @@
--color-success: #2CA18E;
--color-warning: #D9A12C;
--color-danger: #A12C40;
--color-purple: #2C40A1;
--color-info: #2C40A1;
--color-gray-base: #667085;
*/
@@ -46,7 +46,7 @@
--color-success: #10B981;
--color-warning: #F59E0B;
--color-danger: #EF4444;
--color-purple: #7C3AED;
--color-info: #7C3AED;
--color-gray-base: #64748B;
*/
@@ -56,7 +56,7 @@
--color-success: #22C55E;
--color-warning: #FBBF24;
--color-danger: #F43F5E;
--color-purple: #8B5CF6;
--color-info: #8B5CF6;
--color-gray-base: #6B7280;
*/
@@ -66,21 +66,21 @@
--color-success: #059669;
--color-warning: #F97316;
--color-danger: #DC2626;
--color-purple: #6366F1;
--color-info: #6366F1;
--color-gray-base: #475569;
*/
--color-primary: #1c86d1;
--color-success: #3fcd9f;
--color-warning: #f87f4c;
--color-danger: #ff656f;
--color-purple: #18b2c4;
--color-info: #18b2c4;
--color-gray-base: #243249;
/*
--color-primary: #3B82F6;
--color-success: #10B981;
--color-warning: #F59E0B;
--color-danger: #DC2626;
--color-purple: #F63B82;
--color-info: #F63B82;
--color-gray-base: #30425d;
*/
@@ -108,10 +108,10 @@
--color-danger-light: color-mix(in srgb, var(--color-danger) 60%, white);
--color-danger-subtle: color-mix(in srgb, var(--color-danger) 10%, white);
/* Purple Variants (derived from --color-purple) */
--color-purple-dark: color-mix(in srgb, var(--color-purple) 75%, black);
--color-purple-light: color-mix(in srgb, var(--color-purple) 60%, white);
--color-purple-subtle: color-mix(in srgb, var(--color-purple) 10%, white);
/* Info Variants (derived from --color-info) */
--color-info-dark: color-mix(in srgb, var(--color-info) 75%, black);
--color-info-light: color-mix(in srgb, var(--color-info) 60%, white);
--color-info-subtle: color-mix(in srgb, var(--color-info) 10%, white);
/* ===================================================================
BACKGROUND COLORS (derived from primaries)
@@ -149,7 +149,7 @@
--gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
--gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
--gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
--gradient-purple: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
--gradient-info: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
--gradient-panel: linear-gradient(180deg, var(--color-panel) 0%, var(--color-panel-alt) 100%);
/* ===================================================================
@@ -274,7 +274,7 @@
- success-* (green)
- error-* (red)
- warning-* (amber)
- purple-* (premium)
- info-* (info/accent)
❌ These will NOT work: blue-*, red-*, green-*, emerald-*,
amber-*, indigo-*, pink-*, rose-*, sky-*, teal-*, etc.
@@ -448,20 +448,20 @@
--color-warning-950: color-mix(in srgb, var(--color-warning) 25%, black);
/* -----------------------------------------------------------------
PURPLE SCALE (ALL derived from --color-purple)
INFO SCALE (ALL derived from --color-info)
----------------------------------------------------------------- */
--color-purple-25: color-mix(in srgb, var(--color-purple) 2%, white);
--color-purple-50: color-mix(in srgb, var(--color-purple) 8%, white);
--color-purple-100: color-mix(in srgb, var(--color-purple) 15%, white);
--color-purple-200: color-mix(in srgb, var(--color-purple) 25%, white);
--color-purple-300: color-mix(in srgb, var(--color-purple) 40%, white);
--color-purple-400: color-mix(in srgb, var(--color-purple) 60%, white);
--color-purple-500: var(--color-purple);
--color-purple-600: color-mix(in srgb, var(--color-purple) 85%, black);
--color-purple-700: color-mix(in srgb, var(--color-purple) 70%, black);
--color-purple-800: color-mix(in srgb, var(--color-purple) 55%, black);
--color-purple-900: color-mix(in srgb, var(--color-purple) 40%, black);
--color-purple-950: color-mix(in srgb, var(--color-purple) 25%, black);
--color-info-25: color-mix(in srgb, var(--color-info) 2%, white);
--color-info-50: color-mix(in srgb, var(--color-info) 8%, white);
--color-info-100: color-mix(in srgb, var(--color-info) 15%, white);
--color-info-200: color-mix(in srgb, var(--color-info) 25%, white);
--color-info-300: color-mix(in srgb, var(--color-info) 40%, white);
--color-info-400: color-mix(in srgb, var(--color-info) 60%, white);
--color-info-500: var(--color-info);
--color-info-600: color-mix(in srgb, var(--color-info) 85%, black);
--color-info-700: color-mix(in srgb, var(--color-info) 70%, black);
--color-info-800: color-mix(in srgb, var(--color-info) 55%, black);
--color-info-900: color-mix(in srgb, var(--color-info) 40%, black);
--color-info-950: color-mix(in srgb, var(--color-info) 25%, black);
/* -----------------------------------------------------------------
INFO/BLUE-LIGHT SCALE (derived from --color-primary for consistency)
@@ -883,7 +883,7 @@ select:focus {
.igny8-header-metric-accent.blue { background: var(--color-primary); }
.igny8-header-metric-accent.green { background: var(--color-success); }
.igny8-header-metric-accent.amber { background: var(--color-warning); }
.igny8-header-metric-accent.purple { background: var(--color-purple); }
.igny8-header-metric-accent.purple { background: var(--color-info); }
/* ===================================================================

6
frontend/src/templates/ContentViewTemplate.tsx
View File

@@ -42,7 +42,7 @@ interface ParsedArticle {
}
const imageStatusClassMap: Record<string, string> = {
generated: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-200',
generated: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-200',
pending: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-200',
queued: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-200',
failed: 'bg-error-100 text-error-700 dark:bg-error-500/20 dark:text-error-200',
@@ -890,7 +890,7 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
return 'bg-brand-100 text-brand-800 dark:bg-brand-900/30 dark:text-brand-400';
}
if (statusLower === 'review') {
return 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400';
return 'bg-info-100 text-info-800 dark:bg-info-900/30 dark:text-info-400';
}
if (statusLower === 'pending' || statusLower === 'draft') {
return 'bg-warning-100 text-warning-800 dark:bg-warning-900/30 dark:text-warning-400';
@@ -1034,7 +1034,7 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
.map((category) => (
<span
key={category.id}
className="px-3 py-1 bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300 rounded-full text-xs font-medium"
className="px-3 py-1 bg-info-50 dark:bg-info-900/20 text-info-700 dark:text-info-300 rounded-full text-xs font-medium"
>
{category.name}
</span>

2
frontend/src/templates/TablePageTemplate.tsx
View File

@@ -710,7 +710,7 @@ export default function TablePageTemplate({
metric.accentColor === 'blue' ? 'bg-brand-500' :
metric.accentColor === 'green' ? 'bg-success-500' :
metric.accentColor === 'amber' ? 'bg-warning-500' :
metric.accentColor === 'purple' ? 'bg-purple-500' : 'bg-gray-500'
metric.accentColor === 'purple' ? 'bg-info-500' : 'bg-gray-500'
}`}></div>
<span className="text-[13px] font-medium text-gray-500 dark:text-gray-400 flex items-center gap-1">
{metric.label}