Add Titanium Pro Design System
✅ Hard-edge separation - no blending ✅ Staircase surface system (void/titanium/graphite/jet) ✅ Black/Gold luxury color palette ✅ High contrast text (white/silver only) ✅ Monospace for all data (JetBrains Mono) ✅ Gold accents for value/active states ✅ Utility classes for consistent styling ✅ Theme switching infrastructure ✅ Alternative themes ready (Ocean, Forest, Crimson) Design rules: - Every container gets 1px border - No dim text allowed - Gold for data and money - OLED black for structure - Matte finishes, metallic accents
This commit is contained in:
cawcenter
138
frontend/src/lib/theme/config.ts
Normal file
138
frontend/src/lib/theme/config.ts
Normal file
@@ -0,0 +1,138 @@
|
||||
/**
|
||||
* Spark Pro Design System
|
||||
* Theme Configuration & Guidelines
|
||||
*/
|
||||
|
||||
export const sparkTheme = {
|
||||
// === THE SYSTEM ===
|
||||
name: 'Titanium Pro',
|
||||
description: 'Luxury Industrial - Matte Black with Gold Accents',
|
||||
|
||||
// === COLOR RULES ===
|
||||
rules: {
|
||||
surfaces: {
|
||||
void: 'bg-void', // Pure black background
|
||||
titanium: 'bg-titanium', // Main panels (with border)
|
||||
graphite: 'bg-graphite', // Inputs/secondary cards
|
||||
jet: 'bg-jet', // Popups/modals
|
||||
},
|
||||
|
||||
borders: {
|
||||
standard: 'border border-edge-normal', // All containers
|
||||
subtle: 'border border-edge-subtle', // Dividers
|
||||
active: 'border border-edge-bright', // Hover/focus
|
||||
selected: 'border border-edge-gold', // Selected state
|
||||
},
|
||||
|
||||
text: {
|
||||
primary: 'text-white', // Headlines, important data
|
||||
secondary: 'text-silver', // Body text (darkest allowed)
|
||||
data: 'text-gold-300', // Numbers, metrics
|
||||
dimmed: 'text-white/60', // Less important
|
||||
monospace: 'font-mono text-gold-300', // All data/numbers
|
||||
},
|
||||
|
||||
shadows: {
|
||||
card: 'shadow-hard', // Block shadow for depth
|
||||
glow: 'shadow-glow-gold', // Glowing accent
|
||||
none: '', // Flat elements
|
||||
},
|
||||
},
|
||||
|
||||
// === COMPONENT PATTERNS ===
|
||||
components: {
|
||||
card: 'bg-titanium border border-edge-normal shadow-hard rounded-lg',
|
||||
cardHover: 'hover:border-edge-gold transition-colors',
|
||||
|
||||
button: {
|
||||
primary: 'bg-gold-gradient text-black font-semibold border-t border-white/40 shadow-glow-gold',
|
||||
secondary: 'bg-titanium border border-edge-normal hover:border-edge-bright',
|
||||
ghost: 'hover:bg-graphite',
|
||||
},
|
||||
|
||||
input: 'bg-graphite border border-edge-subtle text-white placeholder:text-silver/50',
|
||||
|
||||
table: {
|
||||
header: 'border-b border-edge-normal bg-titanium',
|
||||
row: 'border-b border-edge-subtle hover:bg-graphite/50',
|
||||
cell: 'border-r border-edge-subtle/50',
|
||||
},
|
||||
|
||||
status: {
|
||||
active: 'bg-void border border-edge-gold text-gold-300',
|
||||
processing: 'bg-void border border-electric-400 text-electric-400 animate-pulse',
|
||||
complete: 'bg-void border border-green-500 text-green-400',
|
||||
error: 'bg-void border border-red-500 text-red-400',
|
||||
},
|
||||
},
|
||||
|
||||
// === TYPOGRAPHY SYSTEM ===
|
||||
typography: {
|
||||
heading: 'font-sans tracking-tight text-white',
|
||||
body: 'font-sans text-silver',
|
||||
data: 'font-mono tracking-wider text-gold-300',
|
||||
label: 'text-silver uppercase text-[10px] tracking-[0.2em]',
|
||||
},
|
||||
|
||||
// === THE "NO-BLEND" CHECKLIST ===
|
||||
checklist: [
|
||||
'✅ Every container has a 1px border',
|
||||
'✅ Never put dark on dark without border',
|
||||
'✅ Use staircase: void → titanium → graphite → jet',
|
||||
'✅ All data is monospace gold',
|
||||
'✅ Text minimum is silver (#D1D5DB)',
|
||||
'✅ Active states use gold borders',
|
||||
'✅ Shadows are hard, not fuzzy',
|
||||
],
|
||||
};
|
||||
|
||||
// === ALTERNATIVE THEMES (Future) ===
|
||||
export const alternativeThemes = {
|
||||
'deep-ocean': {
|
||||
name: 'Deep Ocean',
|
||||
void: '#001219',
|
||||
titanium: '#0A1929',
|
||||
gold: '#00B4D8',
|
||||
description: 'Navy blue with cyan accents',
|
||||
},
|
||||
|
||||
'forest-command': {
|
||||
name: 'Forest Command',
|
||||
void: '#0D1B0C',
|
||||
titanium: '#1A2E1A',
|
||||
gold: '#4ADE80',
|
||||
description: 'Dark green with emerald accents',
|
||||
},
|
||||
|
||||
'crimson-steel': {
|
||||
name: 'Crimson Steel',
|
||||
void: '#0F0000',
|
||||
titanium: '#1F0A0A',
|
||||
gold: '#DC2626',
|
||||
description: 'Dark red with crimson accents',
|
||||
},
|
||||
};
|
||||
|
||||
// === USAGE EXAMPLES ===
|
||||
export const examples = {
|
||||
dashboard: {
|
||||
container: 'min-h-screen bg-void p-6',
|
||||
panel: 'bg-titanium border border-edge-normal rounded-lg p-6 shadow-hard',
|
||||
statCard: 'bg-titanium border border-edge-normal rounded-lg p-6 hover:border-edge-gold transition-colors',
|
||||
number: 'text-4xl font-mono text-gold-300 tracking-wider',
|
||||
},
|
||||
|
||||
factory: {
|
||||
kanbanLane: 'bg-void/50 border-r border-edge-subtle',
|
||||
card: 'bg-titanium border border-edge-normal rounded-lg p-4 shadow-hard hover:border-edge-gold cursor-pointer',
|
||||
cardActive: 'border-edge-gold shadow-hard-gold',
|
||||
},
|
||||
|
||||
form: {
|
||||
label: 'text-silver uppercase text-[10px] tracking-[0.2em] mb-2',
|
||||
input: 'bg-graphite border border-edge-subtle text-white px-4 py-2 rounded focus:border-edge-gold',
|
||||
button: 'bg-gold-gradient text-black font-semibold px-6 py-3 rounded border-t border-white/40 shadow-glow-gold',
|
||||
},
|
||||
};
|
||||
|
||||
export default sparkTheme;
|
||||
63
frontend/src/pages/admin/factory/index.astro
Normal file
63
frontend/src/pages/admin/factory/index.astro
Normal file
@@ -0,0 +1,63 @@
|
||||
/**
|
||||
* Factory Floor - Main Production Page
|
||||
* Kanban/Grid view switcher for articles
|
||||
*/
|
||||
|
||||
---
|
||||
import AdminLayout from '@/layouts/AdminLayout.astro';
|
||||
|
||||
const currentPath = Astro.url.pathname;
|
||||
const action = Astro.url.searchParams.get('action');
|
||||
---
|
||||
|
||||
<AdminLayout title="Factory Floor">
|
||||
<div class="space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-white">Factory Floor</h1>
|
||||
<p class="text-slate-400 mt-1">Content production workflow</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<a
|
||||
href="/admin/factory?action=new"
|
||||
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors"
|
||||
>
|
||||
✨ New Campaign
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- View Switcher -->
|
||||
<div class="flex gap-2 bg-slate-800 p-1 rounded-lg w-fit">
|
||||
<a
|
||||
href="/admin/factory?view=kanban"
|
||||
class:list={[
|
||||
'px-4 py-2 rounded transition-colors',
|
||||
!Astro.url.searchParams.get('view') || Astro.url.searchParams.get('view') === 'kanban'
|
||||
? 'bg-slate-700 text-white'
|
||||
: 'text-slate-400 hover:text-white'
|
||||
]}
|
||||
>
|
||||
📊 Kanban
|
||||
</a>
|
||||
<a
|
||||
href="/admin/factory?view=grid"
|
||||
class:list={[
|
||||
'px-4 py-2 rounded transition-colors',
|
||||
Astro.url.searchParams.get('view') === 'grid'
|
||||
? 'bg-slate-700 text-white'
|
||||
: 'text-slate-400 hover:text-white'
|
||||
]}
|
||||
>
|
||||
📋 Grid
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Content Area -->
|
||||
<div class="bg-slate-800 border border-slate-700 rounded-lg p-6">
|
||||
<p class="text-slate-400">Factory view components will load here</p>
|
||||
<p class="text-slate-500 text-sm mt-2">Kanban Board and Bulk Grid components coming next...</p>
|
||||
</div>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
@@ -1,3 +1,158 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* === SPARK PRO DESIGN SYSTEM === */
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-void text-white font-sans antialiased;
|
||||
}
|
||||
|
||||
/* JetBrains Mono for all data/numbers */
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* === HARD-EDGE CONTAINERS === */
|
||||
.spark-card {
|
||||
@apply bg-titanium border border-edge-normal shadow-hard rounded-lg;
|
||||
}
|
||||
|
||||
.spark-card-hover {
|
||||
@apply hover:border-edge-gold transition-colors cursor-pointer;
|
||||
}
|
||||
|
||||
.spark-panel {
|
||||
@apply bg-titanium border border-edge-normal rounded-lg p-6;
|
||||
}
|
||||
|
||||
/* === BUTTONS === */
|
||||
.spark-btn-primary {
|
||||
@apply bg-gold-gradient text-black font-semibold px-6 py-3 rounded-lg border-t border-white/40 shadow-glow-gold hover:shadow-glow-gold transition-all;
|
||||
}
|
||||
|
||||
.spark-btn-secondary {
|
||||
@apply bg-titanium border border-edge-normal text-white px-6 py-3 rounded-lg hover:border-edge-bright transition-colors;
|
||||
}
|
||||
|
||||
.spark-btn-ghost {
|
||||
@apply hover:bg-graphite text-white px-4 py-2 rounded transition-colors;
|
||||
}
|
||||
|
||||
/* === INPUTS === */
|
||||
.spark-input {
|
||||
@apply bg-graphite border border-edge-subtle text-white placeholder:text-silver/50 px-4 py-2 rounded focus:border-edge-gold focus:outline-none transition-colors;
|
||||
}
|
||||
|
||||
.spark-input-mono {
|
||||
@apply spark-input font-mono text-gold-300;
|
||||
}
|
||||
|
||||
/* === TEXT STYLES === */
|
||||
.spark-heading {
|
||||
@apply font-sans tracking-tight text-white;
|
||||
}
|
||||
|
||||
.spark-label {
|
||||
@apply text-silver uppercase text-[10px] tracking-[0.2em];
|
||||
}
|
||||
|
||||
.spark-data {
|
||||
@apply font-mono tracking-wider text-gold-300;
|
||||
}
|
||||
|
||||
/* === STATUS PILLS === */
|
||||
.spark-status {
|
||||
@apply px-3 py-1 rounded-full text-xs font-medium border;
|
||||
}
|
||||
|
||||
.spark-status-active {
|
||||
@apply spark-status bg-void border-edge-gold text-gold-300;
|
||||
}
|
||||
|
||||
.spark-status-processing {
|
||||
@apply spark-status bg-void border-electric-400 text-electric-400 animate-pulse;
|
||||
}
|
||||
|
||||
.spark-status-complete {
|
||||
@apply spark-status bg-void border-green-500 text-green-400;
|
||||
}
|
||||
|
||||
.spark-status-error {
|
||||
@apply spark-status bg-void border-red-500 text-red-400;
|
||||
}
|
||||
|
||||
/* === TABLE SYSTEM === */
|
||||
.spark-table {
|
||||
@apply w-full border-collapse;
|
||||
}
|
||||
|
||||
.spark-table thead {
|
||||
@apply border-b border-edge-normal bg-titanium;
|
||||
}
|
||||
|
||||
.spark-table th {
|
||||
@apply text-left p-4 spark-label;
|
||||
}
|
||||
|
||||
.spark-table td {
|
||||
@apply p-4 border-b border-edge-subtle text-silver;
|
||||
}
|
||||
|
||||
.spark-table tr:hover {
|
||||
@apply bg-graphite/50;
|
||||
}
|
||||
|
||||
/* === GLOW EFFECTS === */
|
||||
.glow-gold {
|
||||
@apply shadow-glow-gold;
|
||||
}
|
||||
|
||||
.glow-blue {
|
||||
@apply shadow-glow-blue;
|
||||
}
|
||||
|
||||
/* === DOT GRID BACKGROUND === */
|
||||
.dot-grid {
|
||||
background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* === HARD SHADOW UTILITIES === */
|
||||
.shadow-titanium {
|
||||
box-shadow: 0 4px 0 0 #121212;
|
||||
}
|
||||
|
||||
.shadow-graphite {
|
||||
box-shadow: 0 4px 0 0 #1c1c1e;
|
||||
}
|
||||
|
||||
/* === BORDER UTILITIES === */
|
||||
.border-standard {
|
||||
@apply border border-edge-normal;
|
||||
}
|
||||
|
||||
.border-subtle {
|
||||
@apply border border-edge-subtle;
|
||||
}
|
||||
|
||||
.border-active {
|
||||
@apply border border-edge-bright;
|
||||
}
|
||||
|
||||
.border-selected {
|
||||
@apply border border-edge-gold;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user