chore: cleanup unused files and scripts
- Removed legacy TypeScript templates (replaced by JSON) - Removed unused PowerShell and CJS maintenance scripts - Removed debug logs and unused components - Files moved to local _TRASH/ directory (excluded from git)
This commit is contained in:
TypoGenie
2
.gitignore
vendored
2
.gitignore
vendored
@@ -22,3 +22,5 @@ dist-ssr
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
_TRASH/
|
||||
|
||||
@@ -1,94 +0,0 @@
|
||||
# Template Audit Script
|
||||
# Analyzes all templates against research-paper.json reference
|
||||
|
||||
$reference = Get-Content "src-tauri\templates\academic\research-paper.json" | ConvertFrom-Json
|
||||
$templateFiles = Get-ChildItem -Path "src-tauri\templates" -Recurse -Filter "*.json"
|
||||
|
||||
$requiredElements = @('h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'blockquote', 'code', 'pre',
|
||||
'ul', 'ol', 'li', 'strong', 'em', 'a', 'table', 'th', 'td',
|
||||
'hr', 'img', 'del', 'sup', 'sub', 'mark', 'footnote', 'footnoteRef')
|
||||
|
||||
$requiredColors = @('text', 'textSecondary', 'background', 'accent', 'border', 'codeBg', 'blockquoteBorder')
|
||||
$requiredFonts = @('heading', 'body', 'code')
|
||||
|
||||
Write-Host "`n=== TEMPLATE AUDIT REPORT ===" -ForegroundColor Cyan
|
||||
Write-Host "Reference: research-paper.json with $($requiredElements.Count) elements`n" -ForegroundColor Green
|
||||
|
||||
$issues = @()
|
||||
|
||||
foreach ($file in $templateFiles) {
|
||||
try {
|
||||
$template = Get-Content $file.FullName | ConvertFrom-Json
|
||||
$templateName = "$($template.category)/$($template.id)"
|
||||
|
||||
# Check elements
|
||||
$missingElements = @()
|
||||
$elementKeys = if ($template.elements) { $template.elements.PSObject.Properties.Name | Where-Object { $_ -notlike "_comment*" } } else { @() }
|
||||
|
||||
foreach ($element in $requiredElements) {
|
||||
if ($element -notin $elementKeys) {
|
||||
$missingElements += $element
|
||||
}
|
||||
}
|
||||
|
||||
# Check colors
|
||||
$missingColors = @()
|
||||
$colorKeys = if ($template.typography.colors) { $template.typography.colors.PSObject.Properties.Name | Where-Object { $_ -notlike "_comment*" } } else { @() }
|
||||
|
||||
foreach ($color in $requiredColors) {
|
||||
if ($color -notin $colorKeys) {
|
||||
$missingColors += $color
|
||||
}
|
||||
}
|
||||
|
||||
# Check fonts
|
||||
$missingFonts = @()
|
||||
$fontKeys = if ($template.typography.fonts) { $template.typography.fonts.PSObject.Properties.Name | Where-Object { $_ -notlike "_comment*" } } else { @() }
|
||||
|
||||
foreach ($font in $requiredFonts) {
|
||||
if ($font -notin $fontKeys) {
|
||||
$missingFonts += $font
|
||||
}
|
||||
}
|
||||
|
||||
# Report issues
|
||||
if ($missingElements.Count -gt 0 -or $missingColors.Count -gt 0 -or $missingFonts.Count -gt 0) {
|
||||
$issue = [PSCustomObject]@{
|
||||
Template = $templateName
|
||||
MissingElements = $missingElements.Count
|
||||
MissingColors = $missingColors.Count
|
||||
MissingFonts = $missingFonts.Count
|
||||
ElementsList = ($missingElements -join ', ')
|
||||
ColorsList = ($missingColors -join ', ')
|
||||
FontsList = ($missingFonts -join ', ')
|
||||
}
|
||||
$issues += $issue
|
||||
|
||||
Write-Host "❌ $templateName" -ForegroundColor Red
|
||||
if ($missingElements.Count -gt 0) {
|
||||
Write-Host " Missing $($missingElements.Count) elements: $($missingElements -join ', ')" -ForegroundColor Yellow
|
||||
}
|
||||
if ($missingColors.Count -gt 0) {
|
||||
Write-Host " Missing $($missingColors.Count) colors: $($missingColors -join ', ')" -ForegroundColor Yellow
|
||||
}
|
||||
if ($missingFonts.Count -gt 0) {
|
||||
Write-Host " Missing $($missingFonts.Count) fonts: $($missingFonts -join ', ')" -ForegroundColor Yellow
|
||||
}
|
||||
} else {
|
||||
Write-Host "✅ $templateName" -ForegroundColor Green
|
||||
}
|
||||
|
||||
} catch {
|
||||
Write-Host "❌ Error parsing $($file.Name): $_" -ForegroundColor Red
|
||||
}
|
||||
}
|
||||
|
||||
Write-Host "`n=== SUMMARY ===" -ForegroundColor Cyan
|
||||
Write-Host "Total templates: $($templateFiles.Count)" -ForegroundColor White
|
||||
Write-Host "Templates with issues: $($issues.Count)" -ForegroundColor Yellow
|
||||
Write-Host "Templates complete: $($templateFiles.Count - $issues.Count)" -ForegroundColor Green
|
||||
|
||||
if ($issues.Count -gt 0) {
|
||||
Write-Host "`nTemplates needing fixes:" -ForegroundColor Yellow
|
||||
$issues | Format-Table Template, MissingElements, MissingColors, MissingFonts -AutoSize
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const rootDir = 'd:\\gdfhbfgdbnbdfbdf\\typogenie\\src-tauri\\templates';
|
||||
|
||||
function walk(dir) {
|
||||
const files = fs.readdirSync(dir, { withFileTypes: true });
|
||||
files.forEach(dirent => {
|
||||
const fullPath = path.join(dir, dirent.name);
|
||||
if (dirent.isDirectory()) {
|
||||
walk(fullPath);
|
||||
} else if (dirent.name.endsWith('.json')) {
|
||||
let content = fs.readFileSync(fullPath, 'utf8');
|
||||
let changed = false;
|
||||
|
||||
// 1. Fix orphaned sides: "bottom": { ... } -> "borderBottom": { ... }
|
||||
// Only if it looks like a border object (color, width, style)
|
||||
const sides = ['top', 'bottom', 'left', 'right'];
|
||||
sides.forEach(side => {
|
||||
const capitalizedSide = side.charAt(0).toUpperCase() + side.slice(1);
|
||||
// Look for "side": { ... } that isn't already "borderSide"
|
||||
// and has border-like properties
|
||||
const orphanRegex = new RegExp(`(?<!"border)${side}":\\s*{([^}]*"color"[^}]*)}`, 'g');
|
||||
if (orphanRegex.test(content)) {
|
||||
content = content.replace(orphanRegex, `"border${capitalizedSide}": {${'$1'}}`);
|
||||
changed = true;
|
||||
}
|
||||
});
|
||||
|
||||
// 2. Fix trailing braces: "borderSide": { ... } } -> "borderSide": { ... }
|
||||
// We repeat this several times to catch cases where multiple borders were nested
|
||||
let braceChanged = true;
|
||||
while (braceChanged) {
|
||||
braceChanged = false;
|
||||
const trailingBraceRegex = /("border(?:Top|Bottom|Left|Right)":\s*{[^}]*})\s*}/g;
|
||||
if (trailingBraceRegex.test(content)) {
|
||||
content = content.replace(trailingBraceRegex, '$1');
|
||||
braceChanged = true;
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (changed) {
|
||||
// Try to validate
|
||||
try {
|
||||
JSON.parse(content);
|
||||
} catch (e) {
|
||||
// If still broken, let's try a last ditch effort to remove any double closing braces in elements
|
||||
// that follow a border side and a comma or newline
|
||||
content = content.replace(/("border(?:Top|Bottom|Left|Right)":\s*{[^}]*})\s*},\s*}/g, '$1\n },');
|
||||
try { JSON.parse(content); } catch (e2) { }
|
||||
}
|
||||
fs.writeFileSync(fullPath, content, { encoding: 'utf8' });
|
||||
console.log(`Deep Cleaned: ${fullPath}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
walk(rootDir);
|
||||
console.log('Finished deep template cleanup.');
|
||||
BIN
debug_output.txt
BIN
debug_output.txt
Binary file not shown.
@@ -1,48 +0,0 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const templatesDirs = [
|
||||
'd:\\gdfhbfgdbnbdfbdf\\typogenie\\src-tauri\\target\\debug\\templates',
|
||||
'd:\\gdfhbfgdbnbdfbdf\\typogenie\\src-tauri\\target\\release\\templates'
|
||||
];
|
||||
|
||||
const ids = new Map(); // id -> filename
|
||||
|
||||
function scanDir(dir) {
|
||||
if (!fs.existsSync(dir)) {
|
||||
console.log(`Directory not found: ${dir}`);
|
||||
return;
|
||||
}
|
||||
console.log(`Scanning: ${dir}`);
|
||||
const files = fs.readdirSync(dir, { withFileTypes: true });
|
||||
|
||||
files.forEach(dirent => {
|
||||
const fullPath = path.join(dir, dirent.name);
|
||||
if (dirent.isDirectory()) {
|
||||
scanDir(fullPath);
|
||||
} else if (dirent.name.endsWith('.json')) {
|
||||
try {
|
||||
const content = fs.readFileSync(fullPath, 'utf8');
|
||||
const json = JSON.parse(content);
|
||||
// Handle array or object
|
||||
const template = Array.isArray(json) ? json[0] : json;
|
||||
|
||||
if (template.id) {
|
||||
if (ids.has(template.id)) {
|
||||
console.error(`[DUPLICATE ID] ${template.id} found in ${dirent.name} AND ${ids.get(template.id)}`);
|
||||
} else {
|
||||
ids.set(template.id, dirent.name);
|
||||
console.log(`[OK] ${dirent.name} (ID: ${template.id})`);
|
||||
}
|
||||
} else {
|
||||
console.error(`[MISSING ID] ${dirent.name}`);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`[FAIL] ${dirent.name}: ${e.message}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Only scan one directory (debug) to check for uniqueness within the app load
|
||||
scanDir('d:\\gdfhbfgdbnbdfbdf\\typogenie\\src-tauri\\target\\debug\\templates');
|
||||
@@ -1,111 +0,0 @@
|
||||
# Script to add missing advanced elements to all Academic templates
|
||||
# Adds: del, sup, sub, mark, footnote, footnoteRef
|
||||
|
||||
$academicTemplates = @(
|
||||
"academic\academic-journal.json",
|
||||
"academic\arctic-base.json",
|
||||
"academic\botanical-textbook.json",
|
||||
"academic\chemistry-lab.json",
|
||||
"academic\dark-academia.json",
|
||||
"academic\education-friendly.json",
|
||||
"academic\emergency-room.json",
|
||||
"academic\furniture-manual.json",
|
||||
"academic\history-textbook.json",
|
||||
"academic\kids-education.json",
|
||||
"academic\mathematics-paper.json",
|
||||
"academic\medical-professional.json",
|
||||
"academic\phd-thesis.json",
|
||||
"academic\scantron-test.json",
|
||||
"academic\scientific-journal.json",
|
||||
"academic\weather-radar.json"
|
||||
)
|
||||
|
||||
$advancedElements = @{
|
||||
"del" = @{
|
||||
"_comment_del" = "~~strikethrough~~ - deleted text"
|
||||
"del" = @{
|
||||
"font" = "body"
|
||||
"strikethrough" = $true
|
||||
}
|
||||
}
|
||||
"sup" = @{
|
||||
"_comment_sup" = "^superscript^ - superscript text"
|
||||
"sup" = @{
|
||||
"font" = "body"
|
||||
"size" = 8
|
||||
"superScript" = $true
|
||||
}
|
||||
}
|
||||
"sub" = @{
|
||||
"_comment_sub" = "~subscript~ - subscript text"
|
||||
"sub" = @{
|
||||
"font" = "body"
|
||||
"size" = 8
|
||||
"subScript" = $true
|
||||
}
|
||||
}
|
||||
"mark" = @{
|
||||
"_comment_mark" = "==highlighted text== - marked/highlighted text"
|
||||
"mark" = @{
|
||||
"font" = "body"
|
||||
"background" = "accent"
|
||||
"color" = "FFFFFF"
|
||||
}
|
||||
}
|
||||
"footnote" = @{
|
||||
"_comment_footnote" = "[^1] - footnote references"
|
||||
"footnote" = @{
|
||||
"font" = "body"
|
||||
"size" = 9
|
||||
"color" = "textSecondary"
|
||||
"superScript" = $true
|
||||
}
|
||||
}
|
||||
"footnoteRef" = @{
|
||||
"_comment_footnote_ref" = "Footnote content at bottom of page"
|
||||
"footnoteRef" = @{
|
||||
"font" = "body"
|
||||
"size" = 9
|
||||
"color" = "textSecondary"
|
||||
"spacing" = @{
|
||||
"before" = 6
|
||||
"after" = 6
|
||||
"line" = 1.2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
foreach ($templatePath in $academicTemplates) {
|
||||
$fullPath = "src-tauri\templates\$templatePath"
|
||||
|
||||
try {
|
||||
$content = Get-Content $fullPath -Raw | ConvertFrom-Json
|
||||
|
||||
# Add missing elements
|
||||
$modified = $false
|
||||
foreach ($elementName in @('del', 'sup', 'sub', 'mark', 'footnote', 'footnoteRef')) {
|
||||
if (-not $content.elements.PSObject.Properties.Name.Contains($elementName)) {
|
||||
$elementData = $advancedElements[$elementName]
|
||||
foreach ($prop in $elementData.Keys) {
|
||||
$content.elements | Add-Member -MemberType NoteProperty -Name $prop -Value $elementData[$prop] -Force
|
||||
}
|
||||
$modified = $true
|
||||
}
|
||||
}
|
||||
|
||||
if ($modified) {
|
||||
# Write back with proper formatting
|
||||
$json = $content | ConvertTo-Json -Depth 10
|
||||
[System.IO.File]::WriteAllLines($fullPath, $json)
|
||||
Write-Host "✅ Updated: $templatePath" -ForegroundColor Green
|
||||
} else {
|
||||
Write-Host "⏭️ Skipped: $templatePath (already complete)" -ForegroundColor Yellow
|
||||
}
|
||||
|
||||
} catch {
|
||||
Write-Host "❌ Error updating $templatePath`: $_" -ForegroundColor Red
|
||||
}
|
||||
}
|
||||
|
||||
Write-Host "`n✅ Academic templates update complete!" -ForegroundColor Green
|
||||
28
fix_bom.cjs
28
fix_bom.cjs
@@ -1,28 +0,0 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const rootDir = 'd:\\gdfhbfgdbnbdfbdf\\typogenie\\src-tauri\\templates';
|
||||
|
||||
function walk(dir) {
|
||||
const files = fs.readdirSync(dir, { withFileTypes: true });
|
||||
files.forEach(dirent => {
|
||||
const fullPath = path.join(dir, dirent.name);
|
||||
if (dirent.isDirectory()) {
|
||||
walk(fullPath);
|
||||
} else if (dirent.name.endsWith('.json')) {
|
||||
let content = fs.readFileSync(fullPath, 'utf8');
|
||||
// Remove BOM
|
||||
if (content.charCodeAt(0) === 0xFEFF) {
|
||||
content = content.slice(1);
|
||||
console.log(`Cleaned BOM: ${fullPath}`);
|
||||
}
|
||||
// Trim whitespace
|
||||
content = content.trim();
|
||||
fs.writeFileSync(fullPath, content, { encoding: 'utf8' });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
walk(rootDir);
|
||||
console.log('Finished cleaning BOMs and trimming JSON files.');
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const rootDir = 'd:\\gdfhbfgdbnbdfbdf\\typogenie\\src-tauri\\templates';
|
||||
|
||||
function walk(dir) {
|
||||
const files = fs.readdirSync(dir, { withFileTypes: true });
|
||||
files.forEach(dirent => {
|
||||
const fullPath = path.join(dir, dirent.name);
|
||||
if (dirent.isDirectory()) {
|
||||
walk(fullPath);
|
||||
} else if (dirent.name.endsWith('.json')) {
|
||||
let content = fs.readFileSync(fullPath, 'utf8');
|
||||
let changed = false;
|
||||
|
||||
// Fix invalid "white" color
|
||||
if (content.includes('"color": "white"')) {
|
||||
content = content.replace(/"color": "white"/g, '"color": "background"');
|
||||
changed = true;
|
||||
}
|
||||
if (content.includes('"background": "white"')) {
|
||||
content = content.replace(/"background": "white"/g, '"background": "background"');
|
||||
changed = true;
|
||||
}
|
||||
|
||||
// Fix border alignment from nested "border": { "bottom": ... } to "borderBottom": ...
|
||||
// This is a bit tricky with regex but let's try a simple one for the common cases
|
||||
const borderSides = ['top', 'bottom', 'left', 'right'];
|
||||
borderSides.forEach(side => {
|
||||
const searchStr = new RegExp(`"border":\\s*{\\s*"${side}":\\s*{([^}]*)}`, 'g');
|
||||
// Capture the content inside the side object
|
||||
if (searchStr.test(content)) {
|
||||
content = content.replace(searchStr, (match, p1) => {
|
||||
const capitalizedSide = side.charAt(0).toUpperCase() + side.slice(1);
|
||||
return `"border${capitalizedSide}": {${p1}}`;
|
||||
});
|
||||
changed = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (changed) {
|
||||
fs.writeFileSync(fullPath, content, { encoding: 'utf8' });
|
||||
console.log(`Updated: ${fullPath}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
walk(rootDir);
|
||||
console.log('Finished mass-correction of templates.');
|
||||
@@ -1,208 +0,0 @@
|
||||
# Script to port Core templates to new JSON format
|
||||
# Reconstructs all 11 core templates with full 23-element structure
|
||||
|
||||
$baseTemplate = Get-Content "src-tauri\templates\core\default.json" -Raw | ConvertFrom-Json
|
||||
|
||||
$coreTemplates = @(
|
||||
@{
|
||||
id="circus-sideshow"; name="Circus Sideshow"; category="Entertainment";
|
||||
desc="Big top aesthetic. Ornamental fonts with red and cream stripe vibes."; vibe="Fun, Ornamental, Striped";
|
||||
fonts="https://fonts.googleapis.com/css2?family=Rye&family=Sancreek&family=Roboto+Slab&display=swap";
|
||||
heading="Sancreek"; heading2="Rye"; body="Roboto Slab";
|
||||
text="212121"; accent="D32F2F"; bg="FFF8E1"; secondary="1A237E";
|
||||
h1Size=40; h1Align="center"; h1Color="D32F2F";
|
||||
h2Size=18; h2Align="center"; h2Color="1A237E";
|
||||
bodyAlign="center"
|
||||
},
|
||||
@{
|
||||
id="environmental-green"; name="Environmental Green"; category="Sustainability";
|
||||
desc="Nature-inspired design for environmental and sustainability communications. Organic feel with earthy green palette."; vibe="Natural, Sustainable, Organic";
|
||||
fonts="https://fonts.googleapis.com/css2?family=Bitter:wght@400;500;700&family=Karla:wght@400;500;700&display=swap";
|
||||
heading="Bitter"; heading2="Bitter"; body="Karla";
|
||||
text="3E4A3D"; accent="2E7D32"; bg="FFFFFF"; secondary="388E3C";
|
||||
h1Size=26; h1Align="left"; h1Color="2E7D32";
|
||||
h2Size=14; h2Align="left"; h2Color="388E3C";
|
||||
bodyAlign="left"
|
||||
},
|
||||
@{
|
||||
id="highway-interstate"; name="Highway Interstate"; category="Urban";
|
||||
desc="Road signage aesthetic. Reflective white text on deep highway green backgrounds."; vibe="Functional, Travel, Signage";
|
||||
fonts="https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&family=Public+Sans:wght@400;700&display=swap";
|
||||
heading="Overpass"; heading2="Public Sans"; body="Public Sans";
|
||||
text="212121"; accent="00695C"; bg="FFFFFF"; secondary="004D40";
|
||||
h1Size=36; h1Align="left"; h1Color="FFFFFF"; h1Bg="00695C";
|
||||
h2Size=18; h2Align="left"; h2Color="004D40";
|
||||
bodyAlign="left"
|
||||
},
|
||||
@{
|
||||
id="jungle-explorer"; name="Jungle Explorer"; category="Adventure";
|
||||
desc="Safari expedition style. Khaki, olive drab, and canvas textures."; vibe="Adventure, Khaki, Nature";
|
||||
fonts="https://fonts.googleapis.com/css2?family=Stardos+Stencil&family=Domine:wght@400;700&display=swap";
|
||||
heading="Stardos Stencil"; heading2="Domine"; body="Domine";
|
||||
text="1B1B1B"; accent="827717"; bg="F0F4C3"; secondary="558B2F";
|
||||
h1Size=36; h1Align="left"; h1Color="33691E";
|
||||
h2Size=16; h2Align="left"; h2Color="558B2F";
|
||||
bodyAlign="left"
|
||||
},
|
||||
@{
|
||||
id="public-transit"; name="Public Transit"; category="Urban";
|
||||
desc="Subway map and transit signage aesthetic. Clean, highly legible sans-serifs with color-coded lines."; vibe="Urban, Functional, Color-coded";
|
||||
fonts="https://fonts.googleapis.com/css2?family=Mukta:wght@400;700&family=Hanken+Grotesk:wght@400;700&display=swap";
|
||||
heading="Hanken Grotesk"; heading2="Mukta"; body="Mukta";
|
||||
text="212121"; accent="FFC107"; bg="FFFFFF"; secondary="000000";
|
||||
h1Size=32; h1Align="left"; h1Color="000000";
|
||||
h2Size=18; h2Align="left"; h2Color="000000"; h2Bg="EEEEEE";
|
||||
bodyAlign="left"
|
||||
},
|
||||
@{
|
||||
id="silent-film-intertitle"; name="Silent Film Intertitle"; category="Cinema";
|
||||
desc="1920s cinema cards. White decorative text on black backgrounds with ornate borders."; vibe="Cinema, Vintage, Dramatic";
|
||||
fonts="https://fonts.googleapis.com/css2?family=Gye-Gye&family=Sorts+Mill+Goudy&display=swap";
|
||||
heading="Gye-Gye"; heading2="Sorts Mill Goudy"; body="Sorts Mill Goudy";
|
||||
text="000000"; accent="000000"; bg="FFFFFF"; secondary="212121";
|
||||
h1Size=32; h1Align="center"; h1Color="FFFFFF"; h1Bg="000000";
|
||||
h2Size=18; h2Align="center"; h2Color="EEEEEE"; h2Bg="212121";
|
||||
bodyAlign="center"; bodySize=14
|
||||
},
|
||||
@{
|
||||
id="sports-dynamic"; name="Sports Dynamic"; category="Sports";
|
||||
desc="Energetic and bold design for sports and athletic content. Dynamic typography with high-impact colors."; vibe="Energetic, Bold, Athletic";
|
||||
fonts="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rubik:wght@400;500;700&display=swap";
|
||||
heading="Bebas Neue"; heading2="Rubik"; body="Rubik";
|
||||
text="333333"; accent="D32F2F"; bg="FFFFFF"; secondary="1A1A1A";
|
||||
h1Size=36; h1Align="left"; h1Color="D32F2F";
|
||||
h2Size=14; h2Align="left"; h2Color="1A1A1A";
|
||||
bodyAlign="left"
|
||||
},
|
||||
@{
|
||||
id="steampunk-inventor"; name="Steampunk Inventor"; category="Fantasy";
|
||||
desc="Brass and gear aesthetic. Victorian fonts with industrial metallic colors."; vibe="Mechanical, Brass, Victorian";
|
||||
fonts="https://fonts.googleapis.com/css2?family=Rye&family=Lora:wght@400;700&display=swap";
|
||||
heading="Rye"; heading2="Lora"; body="Lora";
|
||||
text="3E2723"; accent="B8860B"; bg="EFEBE9"; secondary="8D6E63";
|
||||
h1Size=30; h1Align="left"; h1Color="5D4037";
|
||||
h2Size=16; h2Align="left"; h2Color="8D6E63";
|
||||
bodyAlign="left"
|
||||
},
|
||||
@{
|
||||
id="subway-tile"; name="Subway Tile"; category="Urban";
|
||||
desc="Classic station ceramics. Clean white backgrounds, heavy black text, and tile-like framing."; vibe="Clean, Ceramic, Urban";
|
||||
fonts="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;600&family=Lexend:wght@400;700&display=swap";
|
||||
heading="Lexend"; heading2="Work Sans"; body="Work Sans";
|
||||
text="424242"; accent="000000"; bg="FFFFFF"; secondary="212121";
|
||||
h1Size=36; h1Align="center"; h1Color="000000";
|
||||
h2Size=16; h2Align="left"; h2Color="212121";
|
||||
bodyAlign="left"
|
||||
},
|
||||
@{
|
||||
id="taxi-cab"; name="Taxi Cab"; category="Urban";
|
||||
desc="Yellow cab aesthetic. Checkerboard patterns (simulated) and bold black on yellow."; vibe="Urban, Yellow, Bold";
|
||||
fonts="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Roboto:wght@400;700&display=swap";
|
||||
heading="Archivo Black"; heading2="Roboto"; body="Roboto";
|
||||
text="212121"; accent="FFEB3B"; bg="212121"; secondary="000000";
|
||||
h1Size=36; h1Align="center"; h1Color="000000"; h1Bg="FFEB3B";
|
||||
h2Size=18; h2Align="center"; h2Color="000000"; h2Bg="FFFFFF";
|
||||
bodyAlign="left"; bodyColor="FFFFFF"; bodySize=12
|
||||
},
|
||||
@{
|
||||
id="varsity-team"; name="Varsity Team"; category="Sport";
|
||||
desc="College sports jersey style. Block lettering with athletic gold and navy."; vibe="Athletic, College, Bold";
|
||||
fonts="https://fonts.googleapis.com/css2?family=Graduate&family=Saira:wght@400;700&display=swap";
|
||||
heading="Graduate"; heading2="Saira"; body="Saira";
|
||||
text="212121"; accent="FDD835"; bg="FFFFFF"; secondary="1A237E";
|
||||
h1Size=36; h1Align="center"; h1Color="FDD835"; h1Bg="1A237E";
|
||||
h2Size=20; h2Align="center"; h2Color="1A237E";
|
||||
bodyAlign="center"; bodySize=12
|
||||
}
|
||||
)
|
||||
|
||||
foreach ($t in $coreTemplates) {
|
||||
$new = $baseTemplate.PSObject.Copy()
|
||||
|
||||
# Metadata
|
||||
$new.id = $t.id
|
||||
$new.name = $t.name
|
||||
$new.category = $t.category
|
||||
$new.description = $t.desc
|
||||
$new.vibe = $t.vibe
|
||||
$new.googleFontsImport = $t.fonts
|
||||
|
||||
# Typography
|
||||
$new.typography.colors.text = $t.text
|
||||
$new.typography.colors.accent = $t.accent
|
||||
$new.typography.colors.background = $t.bg
|
||||
$new.typography.colors.textSecondary = $t.secondary
|
||||
$new.typography.colors.blockquoteBorder = $t.accent
|
||||
|
||||
$new.typography.fonts.heading = $t.heading
|
||||
$new.typography.fonts.body = $t.body
|
||||
|
||||
# Elements - H1
|
||||
$new.elements.h1.font = "heading"
|
||||
$new.elements.h1.size = $t.h1Size
|
||||
$new.elements.h1.align = $t.h1Align
|
||||
$new.elements.h1.color = if ($t.h1Color) { $t.h1Color } else { "text" }
|
||||
|
||||
if ($t.h1Bg) {
|
||||
$new.elements.h1 | Add-Member -MemberType NoteProperty -Name "background" -Value $t.h1Bg -Force
|
||||
$new.elements.h1 | Add-Member -MemberType NoteProperty -Name "padding" -Value 16 -Force
|
||||
}
|
||||
|
||||
# Elements - H2
|
||||
$new.elements.h2.font = if ($t.heading2) { $t.heading2 } else { "heading" }
|
||||
$new.elements.h2.size = $t.h2Size
|
||||
$new.elements.h2.align = $t.h2Align
|
||||
$new.elements.h2.color = if ($t.h2Color) { $t.h2Color } else { "textSecondary" }
|
||||
|
||||
if ($t.h2Bg) {
|
||||
$new.elements.h2 | Add-Member -MemberType NoteProperty -Name "background" -Value $t.h2Bg -Force
|
||||
$new.elements.h2 | Add-Member -MemberType NoteProperty -Name "padding" -Value 8 -Force
|
||||
$new.elements.h2 | Add-Member -MemberType NoteProperty -Name "display" -Value "inline-block" -Force
|
||||
}
|
||||
|
||||
# Elements - Body
|
||||
$new.elements.p.align = $t.bodyAlign
|
||||
$new.elements.p.color = if ($t.bodyColor) { $t.bodyColor } else { "text" }
|
||||
if ($t.bodySize) { $new.elements.p.size = $t.bodySize }
|
||||
|
||||
# Special borders
|
||||
if ($t.id -eq "highway-interstate") {
|
||||
$borderVal = @{ top=@{color="FFFFFF"; width=2; style="single"}; bottom=@{color="FFFFFF"; width=2; style="single"} }
|
||||
$new.elements.h1 | Add-Member -MemberType NoteProperty -Name "border" -Value $borderVal -Force
|
||||
}
|
||||
if ($t.id -eq "jungle-explorer") {
|
||||
$borderVal = @{ bottom=@{color="827717"; width=4; style="solid"} }
|
||||
$new.elements.h1 | Add-Member -MemberType NoteProperty -Name "border" -Value $borderVal -Force
|
||||
}
|
||||
if ($t.id -eq "public-transit") {
|
||||
$borderVal = @{ bottom=@{color="FFC107"; width=6; style="solid"} }
|
||||
$new.elements.h1 | Add-Member -MemberType NoteProperty -Name "border" -Value $borderVal -Force
|
||||
}
|
||||
if ($t.id -eq "silent-film-intertitle") {
|
||||
$borderVal = @{ top=@{color="FFFFFF"; width=4; style="double"}; bottom=@{color="FFFFFF"; width=4; style="double"}; left=@{color="FFFFFF"; width=4; style="double"}; right=@{color="FFFFFF"; width=4; style="double"} }
|
||||
$new.elements.h1 | Add-Member -MemberType NoteProperty -Name "border" -Value $borderVal -Force
|
||||
}
|
||||
if ($t.id -eq "steampunk-inventor") {
|
||||
$borderVal = @{ bottom=@{color="B8860B"; width=6; style="double"} }
|
||||
$new.elements.h1 | Add-Member -MemberType NoteProperty -Name "border" -Value $borderVal -Force
|
||||
}
|
||||
if ($t.id -eq "subway-tile") {
|
||||
$borderVal = @{ top=@{color="000000"; width=4; style="solid"}; bottom=@{color="000000"; width=4; style="solid"}; left=@{color="000000"; width=4; style="solid"}; right=@{color="000000"; width=4; style="solid"} }
|
||||
$new.elements.h1 | Add-Member -MemberType NoteProperty -Name "border" -Value $borderVal -Force
|
||||
}
|
||||
if ($t.id -eq "taxi-cab") {
|
||||
$borderVal = @{ top=@{color="000000"; width=6; style="dashed"}; bottom=@{color="000000"; width=6; style="dashed"} }
|
||||
$new.elements.h1 | Add-Member -MemberType NoteProperty -Name "border" -Value $borderVal -Force
|
||||
}
|
||||
if ($t.id -eq "varsity-team") {
|
||||
$borderVal = @{ top=@{color="FDD835"; width=4; style="solid"}; bottom=@{color="FDD835"; width=4; style="solid"} }
|
||||
$new.elements.h1 | Add-Member -MemberType NoteProperty -Name "border" -Value $borderVal -Force
|
||||
}
|
||||
|
||||
|
||||
# Save file
|
||||
$path = "src-tauri\templates\core\$($t.id).json"
|
||||
$json = $new | ConvertTo-Json -Depth 10
|
||||
[System.IO.File]::WriteAllLines($path, $json)
|
||||
Write-Host "✅ Created $path" -ForegroundColor Green
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
# Master script to rebuild all remaining templates with modern structure
|
||||
$baseTemplate = Get-Content "src-tauri\templates\core\default.json" -Raw | ConvertFrom-Json
|
||||
|
||||
$templates = @(
|
||||
@{path="corporate\professional.json"; id="professional"; name="Professional Business"; category="Corporate"; desc="Professional business formatting for corporate documents, reports, and proposals. Clean sans-serif typography with authoritative presence."; vibe="Corporate, Trustworthy, Polished"; fonts="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap"; heading="Open Sans"; body="Open Sans"; text="1A202C"; accent="2C5282"},
|
||||
@{path="creative\modern-portfolio.json"; id="modern-portfolio"; name="Modern Portfolio"; category="Creative"; desc="Bold, contemporary design for creative portfolios and showcases. Geometric fonts with striking visual hierarchy."; vibe="Creative, Bold, Contemporary"; fonts="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap"; heading="Space Grotesk"; body="Space Grotesk"; text="1A1A1A"; accent="E94560"},
|
||||
@{path="editorial\classic-newspaper.json"; id="classic-newspaper"; name="Classic Newspaper"; category="Editorial"; desc="Traditional newspaper-style formatting with column layout and classic serif typography."; vibe="Editorial, Timeless, Authoritative"; fonts="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap"; heading="Merriweather"; body="Merriweather"; text="1A1A1A"; accent="8B0000"},
|
||||
@{path="industrial\brutalist.json"; id="brutalist"; name="Brutalist"; category="Industrial"; desc="Raw, bold, unapologetic design inspired by brutalist architecture. Monospace typography with aggressive spacing."; vibe="Bold, Raw, Unrefined"; fonts="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap"; heading="Roboto Mono"; body="Roboto Mono"; text="000000"; accent="FF4500"},
|
||||
@{path="lifestyle\elegant-magazine.json"; id="elegant-magazine"; name="Elegant Magazine"; category="Lifestyle"; desc="Sophisticated magazine layout with elegant serif typography and generous whitespace."; vibe="Sophisticated, Luxurious, Refined"; fonts="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap"; heading="Cormorant Garamond"; body="Cormorant Garamond"; text="2B2B2B"; accent="D4A574"},
|
||||
@{path="tech\tech-startup.json"; id="tech-startup"; name="Tech Startup"; category="Tech"; desc="Modern, clean design for tech companies and startups. Sans-serif typography with vibrant accents."; vibe="Innovative, Modern, Dynamic"; fonts="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&display=swap"; heading="Plus Jakarta Sans"; body="Plus Jakarta Sans"; text="0F172A"; accent="6366F1"},
|
||||
@{path="vintage\retro-typewriter.json"; id="retro-typewriter"; name="Retro Typewriter"; category="Vintage"; desc="Vintage typewriter aesthetic with monospace fonts and classic styling."; vibe="Nostalgic, Classic, Authentic"; fonts="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap"; heading="Courier Prime"; body="Courier Prime"; text="2C2C2C"; accent="5C4033"}
|
||||
)
|
||||
|
||||
foreach ($t in $templates) {
|
||||
$new = $baseTemplate.PSObject.Copy()
|
||||
|
||||
# Update metadata
|
||||
$new.id = $t.id
|
||||
$new.name = $t.name
|
||||
$new.category = $t.category
|
||||
$new.description = $t.desc
|
||||
$new.vibe = $t.vibe
|
||||
$new.googleFontsImport = $t.fonts
|
||||
|
||||
# Update typography
|
||||
$new.typography.fonts.heading = $t.heading
|
||||
$new.typography.fonts.body = $t.body
|
||||
$new.typography.colors.text = $t.text
|
||||
$new.typography.colors.accent = $t.accent
|
||||
$new.typography.colors.blockquoteBorder = $t.accent
|
||||
|
||||
# Write to file
|
||||
$json = $new | ConvertTo-Json -Depth 10
|
||||
$fullPath = "src-tauri\templates\$($t.path)"
|
||||
[System.IO.File]::WriteAllLines($fullPath, $json)
|
||||
Write-Host "✅ Created $($t.path)" -ForegroundColor Green
|
||||
}
|
||||
|
||||
Write-Host "`n✅ All templates rebuilt successfully!" -ForegroundColor Green
|
||||
@@ -1,43 +0,0 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const rootDir = 'd:\\gdfhbfgdbnbdfbdf\\typogenie\\src-tauri\\templates';
|
||||
|
||||
function walk(dir) {
|
||||
const files = fs.readdirSync(dir, { withFileTypes: true });
|
||||
files.forEach(dirent => {
|
||||
const fullPath = path.join(dir, dirent.name);
|
||||
if (dirent.isDirectory()) {
|
||||
walk(fullPath);
|
||||
} else if (dirent.name.endsWith('.json')) {
|
||||
let content = fs.readFileSync(fullPath, 'utf8');
|
||||
let changed = false;
|
||||
|
||||
try {
|
||||
const json = JSON.parse(content);
|
||||
if (json.page && json.page.columns !== 1) {
|
||||
json.page.columns = 1;
|
||||
// Also remove gutter if it exists
|
||||
if (json.page.gutter) delete json.page.gutter;
|
||||
content = JSON.stringify(json, null, 4);
|
||||
changed = true;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`Error parsing ${fullPath}: ${e.message}`);
|
||||
// Fallback to regex if JSON is slightly broken (though surgery should have fixed it)
|
||||
if (content.includes('"columns":')) {
|
||||
content = content.replace(/"columns":\s*\d+/g, '"columns": 1');
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (changed) {
|
||||
fs.writeFileSync(fullPath, content, { encoding: 'utf8' });
|
||||
console.log(`Removed columns from: ${fullPath}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
walk(rootDir);
|
||||
console.log('Finished removing columns from all templates.');
|
||||
@@ -1,60 +0,0 @@
|
||||
$templatesDir = "d:\gdfhbfgdbnbdfbdf\typogenie\src-tauri\templates"
|
||||
$files = Get-ChildItem -Path $templatesDir -Recurse -Filter *.json
|
||||
|
||||
foreach ($file in $files) {
|
||||
try {
|
||||
$content = Get-Content -Path $file.FullName -Raw
|
||||
|
||||
# 1. Extract Font Names using Regex
|
||||
$headingFont = "Unknown"
|
||||
$bodyFont = "Unknown"
|
||||
$codeFont = "Unknown"
|
||||
|
||||
if ($content -match '"heading":\s*"([^"]+)"') { $headingFont = $matches[1] }
|
||||
if ($content -match '"body":\s*"([^"]+)"') { $bodyFont = $matches[1] }
|
||||
if ($content -match '"code":\s*"([^"]+)"') { $codeFont = $matches[1] }
|
||||
|
||||
if ($headingFont -eq "Unknown" -or $bodyFont -eq "Unknown") {
|
||||
Write-Host "Skipping $($file.Name) - Could not parse fonts" -ForegroundColor Yellow
|
||||
continue
|
||||
}
|
||||
|
||||
# 2. Build Google Fonts URL
|
||||
# Standard weights + italics: 300, 400, 500, 600, 700
|
||||
$weights = "ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700"
|
||||
|
||||
$fonts = @($headingFont, $bodyFont, $codeFont) | Select-Object -Unique
|
||||
$urlParts = @()
|
||||
|
||||
foreach ($font in $fonts) {
|
||||
# Handle fonts that might not be Google Fonts (e.g. system fonts)?
|
||||
# Assuming all current templates use Google Fonts as per design.
|
||||
$encodedFont = $font -replace ' ', '+'
|
||||
$urlParts += "family=$encodedFont`:$weights"
|
||||
}
|
||||
|
||||
$fullUrl = "https://fonts.googleapis.com/css2?" + ($urlParts -join "&") + "&display=swap"
|
||||
|
||||
# 3. Repair the broken line
|
||||
# Look for "googleFontsImport": "https: OR "googleFontsImport": "https:\s*
|
||||
# The previous regex stripping might have left it as `"https:` (no closing quote) or `"https:""` if there was a quote after?
|
||||
# Inspecting previous output: `"googleFontsImport": "https:`
|
||||
|
||||
if ($content -match '"googleFontsImport":\s*"https:') {
|
||||
$newLine = '"googleFontsImport": "' + $fullUrl + '",'
|
||||
$newContent = $content -replace '"googleFontsImport":\s*"https:.*', $newLine
|
||||
|
||||
# Double check we didn't add double commas or break structure
|
||||
# The original often had a comma after. The regex `.*` eats the rest of the line.
|
||||
# My replacement adds a comma.
|
||||
|
||||
Set-Content -Path $file.FullName -Value $newContent -Force
|
||||
Write-Host "Restored: $($file.Name)" -ForegroundColor Green
|
||||
} else {
|
||||
Write-Host "No repair needed or pattern not found: $($file.Name)" -ForegroundColor Gray
|
||||
}
|
||||
|
||||
} catch {
|
||||
Write-Host "Error processing $($file.Name): $($_.Exception.Message)" -ForegroundColor Red
|
||||
}
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
// Convert TypeScript templates to JSON format for user editing
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const sourceDir = path.join(__dirname, '../src/styles/templates');
|
||||
const outputDir = path.join(__dirname, '../src-tauri/templates');
|
||||
|
||||
// Ensure output directory exists
|
||||
if (!fs.existsSync(outputDir)) {
|
||||
fs.mkdirSync(outputDir, { recursive: true });
|
||||
}
|
||||
|
||||
// Get all category directories
|
||||
const categories = fs.readdirSync(sourceDir, { withFileTypes: true })
|
||||
.filter(dirent => dirent.isDirectory())
|
||||
.map(dirent => dirent.name);
|
||||
|
||||
console.log(`Found ${categories.length} categories: ${categories.join(', ')}\n`);
|
||||
|
||||
for (const category of categories) {
|
||||
const categorySourcePath = path.join(sourceDir, category);
|
||||
const categoryOutputPath = path.join(outputDir, category);
|
||||
|
||||
// Create category directory in output
|
||||
if (!fs.existsSync(categoryOutputPath)) {
|
||||
fs.mkdirSync(categoryOutputPath, { recursive: true });
|
||||
}
|
||||
|
||||
// Get all template files in category
|
||||
const templateFiles = fs.readdirSync(categorySourcePath)
|
||||
.filter(file => file.endsWith('.ts') && file !== 'index.ts');
|
||||
|
||||
console.log(`Processing category "${category}" (${templateFiles.length} templates)...`);
|
||||
|
||||
for (const file of templateFiles) {
|
||||
const sourceFile = path.join(categorySourcePath, file);
|
||||
const content = fs.readFileSync(sourceFile, 'utf8');
|
||||
|
||||
// Extract the template object using regex
|
||||
const templateMatch = content.match(/export\s+const\s+\w+\s*:\s*StyleOption\s*=\s*(\{[\s\S]*?\});\s*$/);
|
||||
|
||||
if (templateMatch) {
|
||||
let templateObj = templateMatch[1];
|
||||
|
||||
// Convert template literals to regular strings
|
||||
templateObj = templateObj.replace(/previewCss:\s*`[\s\S]*?`/, (match) => {
|
||||
const css = match.replace(/previewCss:\s*`/, '').replace(/`$/, '');
|
||||
return `previewCss: ${JSON.stringify(css.trim())}`;
|
||||
});
|
||||
|
||||
// Convert single quotes to double quotes for JSON
|
||||
templateObj = templateObj.replace(/'/g, '"');
|
||||
|
||||
// Remove trailing commas
|
||||
templateObj = templateObj.replace(/,(\s*[}\]])/g, '$1');
|
||||
|
||||
// Fix unquoted keys
|
||||
templateObj = templateObj.replace(/([{,]\s*)(\w+):/g, '$1"$2":');
|
||||
|
||||
try {
|
||||
const template = JSON.parse(templateObj);
|
||||
|
||||
// Validate required fields
|
||||
if (template.id && template.name && template.wordConfig) {
|
||||
const outputFile = path.join(categoryOutputPath, `${template.id}.json`);
|
||||
fs.writeFileSync(outputFile, JSON.stringify(template, null, 2));
|
||||
console.log(` ✓ ${template.id}.json`);
|
||||
} else {
|
||||
console.log(` ✗ ${file} - missing required fields`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(` ✗ ${file} - parse error: ${error.message}`);
|
||||
}
|
||||
} else {
|
||||
console.log(` ✗ ${file} - could not extract template`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log('\nDone! Templates converted to JSON format.');
|
||||
console.log(`Output directory: ${outputDir}`);
|
||||
@@ -1,186 +0,0 @@
|
||||
# TypoGenie Templates
|
||||
|
||||
Templates in TypoGenie are stored as JSON files in the `TypoGenie-Data/templates/` folder.
|
||||
|
||||
## Folder Structure
|
||||
|
||||
```
|
||||
TypoGenie-Data/
|
||||
└── templates/
|
||||
├── minimalist/
|
||||
│ ├── swiss-grid.json
|
||||
│ └── minimalist-white.json
|
||||
├── tech/
|
||||
│ ├── tech-startup.json
|
||||
│ └── code-editor.json
|
||||
└── my-category/ ← Create new folders for custom categories!
|
||||
└── my-template.json
|
||||
```
|
||||
|
||||
- Each **subfolder** in `templates/` is a category
|
||||
- Each **.json file** in a category folder is a template
|
||||
- Categories and templates are automatically discovered when the app loads
|
||||
|
||||
## Template JSON Format
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "my-template",
|
||||
"name": "My Template Name",
|
||||
"category": "My Category",
|
||||
"description": "A short description of this template",
|
||||
"vibe": "Keywords describing the style",
|
||||
"googleFontsImport": "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap",
|
||||
"wordConfig": {
|
||||
"heading1": {
|
||||
"font": "Inter",
|
||||
"size": 28,
|
||||
"color": "000000",
|
||||
"bold": true,
|
||||
"align": "left",
|
||||
"spacing": { "before": 400, "after": 200, "line": 240 }
|
||||
},
|
||||
"heading2": {
|
||||
"font": "Inter",
|
||||
"size": 16,
|
||||
"color": "333333",
|
||||
"bold": true,
|
||||
"align": "left",
|
||||
"spacing": { "before": 320, "after": 160, "line": 240 }
|
||||
},
|
||||
"body": {
|
||||
"font": "Inter",
|
||||
"size": 10,
|
||||
"color": "444444",
|
||||
"align": "left",
|
||||
"spacing": { "before": 0, "after": 160, "line": 280 }
|
||||
},
|
||||
"accentColor": "6366F1"
|
||||
},
|
||||
"previewCss": "font-family: 'Inter', sans-serif; h1 { font-size: 28pt; font-weight: 700; } h2 { font-size: 16pt; font-weight: 700; } p { font-size: 10pt; line-height: 1.6; }"
|
||||
}
|
||||
```
|
||||
|
||||
## Field Reference
|
||||
|
||||
### Required Fields
|
||||
|
||||
- **id**: Unique identifier for the template (used in filenames, no spaces)
|
||||
- **name**: Display name shown in the app
|
||||
- **category**: Category name (should match the folder name)
|
||||
- **description**: Brief description of the template
|
||||
- **wordConfig**: Microsoft Word styling configuration
|
||||
- **heading1**: Style for H1 headings
|
||||
- **heading2**: Style for H2 headings
|
||||
- **body**: Style for body text
|
||||
- **accentColor**: Accent color for borders and highlights (hex, no #)
|
||||
- **previewCss**: CSS for the live preview (single line, no line breaks)
|
||||
|
||||
### Optional Fields
|
||||
|
||||
- **vibe**: Descriptive keywords for the template
|
||||
- **googleFontsImport**: Google Fonts URL for web preview
|
||||
|
||||
## Text Configuration Options
|
||||
|
||||
### Font Settings
|
||||
- **font**: Font family name (must be installed on user's system for Word)
|
||||
- **size**: Font size in points (pt)
|
||||
- **color**: Hex color code (without #)
|
||||
- **bold**: true/false
|
||||
- **italic**: true/false
|
||||
- **allCaps**: true/false (transform text to uppercase)
|
||||
- **tracking**: Character spacing (in twips, optional)
|
||||
- **align**: "left", "center", "right", or "both" (justify)
|
||||
|
||||
### Spacing
|
||||
- **spacing.before**: Space before paragraph (in twips)
|
||||
- **spacing.after**: Space after paragraph (in twips)
|
||||
- **spacing.line**: Line spacing (in twips, 240 = single, 360 = 1.5, 480 = double)
|
||||
|
||||
### Borders (Optional)
|
||||
```json
|
||||
"border": {
|
||||
"top": { "color": "000000", "space": 10, "style": "single", "size": 12 },
|
||||
"bottom": { "color": "000000", "space": 10, "style": "single", "size": 12 },
|
||||
"left": { "color": "000000", "space": 10, "style": "single", "size": 24 },
|
||||
"right": { "color": "000000", "space": 10, "style": "single", "size": 12 }
|
||||
}
|
||||
```
|
||||
|
||||
Border styles: `"single"`, `"double"`, `"dotted"`, `"dashed"`, `"thick"`
|
||||
|
||||
### Shading/Background (Optional)
|
||||
```json
|
||||
"shading": {
|
||||
"fill": "F0F0F0",
|
||||
"color": "auto",
|
||||
"style": "clear"
|
||||
}
|
||||
```
|
||||
|
||||
## Adding Custom Templates
|
||||
|
||||
1. Create a new folder in `TypoGenie-Data/templates/` (or use existing)
|
||||
2. Create a `.json` file with your template configuration
|
||||
3. Click the **Refresh** button in the app, or restart the app
|
||||
4. Your template will appear in the style selector!
|
||||
|
||||
## Tips
|
||||
|
||||
- Use Google Fonts that have good Microsoft Word equivalents
|
||||
- Test your template with both A4 and Letter paper sizes
|
||||
- The previewCss should match the wordConfig styling as closely as possible
|
||||
- Use hex colors without the # prefix
|
||||
- Keep template IDs lowercase with hyphens (e.g., `my-awesome-template`)
|
||||
|
||||
## Example: Dark Theme Template
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "dark-mode",
|
||||
"name": "Dark Mode",
|
||||
"category": "Modern",
|
||||
"description": "Dark theme with high contrast for reduced eye strain",
|
||||
"vibe": "Dark, Modern, Accessible",
|
||||
"googleFontsImport": "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap",
|
||||
"wordConfig": {
|
||||
"heading1": {
|
||||
"font": "Inter",
|
||||
"size": 32,
|
||||
"color": "FFFFFF",
|
||||
"bold": true,
|
||||
"align": "left",
|
||||
"spacing": { "before": 400, "after": 200, "line": 240 },
|
||||
"shading": { "fill": "1A1A1A", "color": "auto", "style": "clear" }
|
||||
},
|
||||
"heading2": {
|
||||
"font": "Inter",
|
||||
"size": 18,
|
||||
"color": "E0E0E0",
|
||||
"bold": true,
|
||||
"align": "left",
|
||||
"spacing": { "before": 320, "after": 160, "line": 240 }
|
||||
},
|
||||
"body": {
|
||||
"font": "Inter",
|
||||
"size": 11,
|
||||
"color": "CCCCCC",
|
||||
"align": "left",
|
||||
"spacing": { "before": 0, "after": 160, "line": 280 },
|
||||
"shading": { "fill": "121212", "color": "auto", "style": "clear" }
|
||||
},
|
||||
"accentColor": "6366F1"
|
||||
},
|
||||
"previewCss": "font-family: 'Inter', sans-serif; background: #121212; color: #CCCCCC; h1 { font-size: 32pt; font-weight: 700; color: #FFFFFF; background: #1A1A1A; padding: 16px; margin-bottom: 24px; } h2 { font-size: 18pt; font-weight: 700; color: #E0E0E0; margin-top: 32px; margin-bottom: 16px; } p { font-size: 11pt; line-height: 1.6; color: #CCCCCC; margin-bottom: 14px; }"
|
||||
}
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
- **Template not showing**: Check that the JSON is valid (use a JSON validator)
|
||||
- **Fonts not working**: Ensure the font is installed on your system
|
||||
- **Preview looks different from Word**: Adjust previewCss to match wordConfig
|
||||
- **Category not showing**: Make sure the folder contains at least one valid .json file
|
||||
|
||||
Click **Refresh** in the app to reload templates without restarting!
|
||||
@@ -1,272 +0,0 @@
|
||||
import React, { useRef, useEffect, useState, useCallback } from 'react';
|
||||
|
||||
interface CustomScrollbarProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
horizontal?: boolean;
|
||||
}
|
||||
|
||||
export const CustomScrollbar: React.FC<CustomScrollbarProps> = ({
|
||||
children,
|
||||
className = '',
|
||||
horizontal = false
|
||||
}) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const thumbRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [isHoveringContainer, setIsHoveringContainer] = useState(false);
|
||||
const [isHoveringTrack, setIsHoveringTrack] = useState(false);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [thumbSize, setThumbSize] = useState(40);
|
||||
|
||||
// Drag state
|
||||
const dragState = useRef({
|
||||
isActive: false,
|
||||
startMouse: 0,
|
||||
startScroll: 0,
|
||||
trackSize: 0,
|
||||
maxScroll: 0
|
||||
});
|
||||
|
||||
// Update thumb size
|
||||
const updateMetrics = useCallback(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
if (horizontal) {
|
||||
const ratio = container.clientWidth / Math.max(container.scrollWidth, 1);
|
||||
setThumbSize(Math.max(40, ratio * container.clientWidth));
|
||||
} else {
|
||||
const ratio = container.clientHeight / Math.max(container.scrollHeight, 1);
|
||||
setThumbSize(Math.max(40, ratio * container.clientHeight));
|
||||
}
|
||||
|
||||
updateThumbVisual();
|
||||
}, [horizontal]);
|
||||
|
||||
// Update thumb position from scroll
|
||||
const updateThumbVisual = useCallback(() => {
|
||||
const container = containerRef.current;
|
||||
const thumb = thumbRef.current;
|
||||
if (!container || !thumb) return;
|
||||
|
||||
if (dragState.current.isActive) return;
|
||||
|
||||
if (horizontal) {
|
||||
const maxScroll = container.scrollWidth - container.clientWidth;
|
||||
const trackSize = container.clientWidth - thumbSize;
|
||||
if (maxScroll <= 0 || trackSize <= 0) {
|
||||
thumb.style.transform = 'translateX(0px)';
|
||||
return;
|
||||
}
|
||||
const ratio = container.scrollLeft / maxScroll;
|
||||
thumb.style.transform = `translateX(${ratio * trackSize}px)`;
|
||||
} else {
|
||||
const maxScroll = container.scrollHeight - container.clientHeight;
|
||||
const trackSize = container.clientHeight - thumbSize;
|
||||
if (maxScroll <= 0 || trackSize <= 0) {
|
||||
thumb.style.transform = 'translateY(0px)';
|
||||
return;
|
||||
}
|
||||
const ratio = container.scrollTop / maxScroll;
|
||||
thumb.style.transform = `translateY(${ratio * trackSize}px)`;
|
||||
}
|
||||
}, [horizontal, thumbSize]);
|
||||
|
||||
// Setup
|
||||
useEffect(() => {
|
||||
updateMetrics();
|
||||
|
||||
const handleResize = () => updateMetrics();
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
const observer = new MutationObserver(() => updateMetrics());
|
||||
if (containerRef.current) {
|
||||
observer.observe(containerRef.current, { childList: true, subtree: true });
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
observer.disconnect();
|
||||
};
|
||||
}, [updateMetrics]);
|
||||
|
||||
// Scroll listener
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const onScroll = () => {
|
||||
if (!dragState.current.isActive) {
|
||||
updateThumbVisual();
|
||||
}
|
||||
};
|
||||
|
||||
container.addEventListener('scroll', onScroll, { passive: true });
|
||||
return () => container.removeEventListener('scroll', onScroll);
|
||||
}, [updateThumbVisual]);
|
||||
|
||||
// Drag handling - DIRECT synchronous updates
|
||||
useEffect(() => {
|
||||
if (!isDragging) {
|
||||
// Restore transition when not dragging
|
||||
if (thumbRef.current) {
|
||||
thumbRef.current.style.transition = 'opacity 0.15s, width 0.15s, height 0.15s';
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const container = containerRef.current;
|
||||
const thumb = thumbRef.current;
|
||||
if (!container || !thumb) return;
|
||||
|
||||
const state = dragState.current;
|
||||
state.isActive = true;
|
||||
|
||||
// REMOVE transition during drag for instant response
|
||||
thumb.style.transition = 'none';
|
||||
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
const mousePos = horizontal ? e.clientX : e.clientY;
|
||||
const deltaMouse = mousePos - state.startMouse;
|
||||
const scrollRatio = deltaMouse / state.trackSize;
|
||||
const newScroll = state.startScroll + (scrollRatio * state.maxScroll);
|
||||
const clampedScroll = Math.max(0, Math.min(newScroll, state.maxScroll));
|
||||
|
||||
if (horizontal) {
|
||||
container.scrollLeft = clampedScroll;
|
||||
const visualRatio = state.maxScroll > 0 ? clampedScroll / state.maxScroll : 0;
|
||||
thumb.style.transform = `translateX(${visualRatio * state.trackSize}px)`;
|
||||
} else {
|
||||
container.scrollTop = clampedScroll;
|
||||
const visualRatio = state.maxScroll > 0 ? clampedScroll / state.maxScroll : 0;
|
||||
thumb.style.transform = `translateY(${visualRatio * state.trackSize}px)`;
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
state.isActive = false;
|
||||
setIsDragging(false);
|
||||
// Transition will be restored by effect cleanup
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
state.isActive = false;
|
||||
};
|
||||
}, [isDragging, horizontal]);
|
||||
|
||||
const handleThumbMouseDown = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const container = containerRef.current;
|
||||
const thumb = thumbRef.current;
|
||||
if (!container || !thumb) return;
|
||||
|
||||
const state = dragState.current;
|
||||
|
||||
if (horizontal) {
|
||||
state.startMouse = e.clientX;
|
||||
state.startScroll = container.scrollLeft;
|
||||
state.trackSize = container.clientWidth - thumbSize;
|
||||
state.maxScroll = container.scrollWidth - container.clientWidth;
|
||||
} else {
|
||||
state.startMouse = e.clientY;
|
||||
state.startScroll = container.scrollTop;
|
||||
state.trackSize = container.clientHeight - thumbSize;
|
||||
state.maxScroll = container.scrollHeight - container.clientHeight;
|
||||
}
|
||||
|
||||
// Remove transition immediately on mouse down
|
||||
thumb.style.transition = 'none';
|
||||
setIsDragging(true);
|
||||
};
|
||||
|
||||
const handleTrackClick = (e: React.MouseEvent) => {
|
||||
if (e.target === thumbRef.current) return;
|
||||
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const rect = container.getBoundingClientRect();
|
||||
|
||||
if (horizontal) {
|
||||
const clickX = e.clientX - rect.left;
|
||||
const percentage = clickX / rect.width;
|
||||
container.scrollTo({
|
||||
left: percentage * (container.scrollWidth - container.clientWidth),
|
||||
behavior: 'smooth'
|
||||
});
|
||||
} else {
|
||||
const clickY = e.clientY - rect.top;
|
||||
const percentage = clickY / rect.height;
|
||||
container.scrollTo({
|
||||
top: percentage * (container.scrollHeight - container.clientHeight),
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const isActive = isHoveringTrack || isDragging;
|
||||
const opacity = isActive ? 0.6 : (isHoveringContainer ? 0.2 : 0);
|
||||
const size = isActive ? '6px' : '2px';
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative ${className}`}
|
||||
onMouseEnter={() => setIsHoveringContainer(true)}
|
||||
onMouseLeave={() => {
|
||||
setIsHoveringContainer(false);
|
||||
if (!isDragging) setIsHoveringTrack(false);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="h-full w-full overflow-auto scrollbar-hide"
|
||||
style={{
|
||||
scrollbarWidth: 'none',
|
||||
msOverflowStyle: 'none',
|
||||
overflowX: horizontal ? 'auto' : 'hidden',
|
||||
overflowY: horizontal ? 'hidden' : 'auto'
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`absolute cursor-pointer z-10 ${horizontal ? 'bottom-0 left-0 right-0 h-4' : 'top-0 right-0 bottom-0 w-4'}`}
|
||||
style={{ opacity }}
|
||||
onMouseEnter={() => setIsHoveringTrack(true)}
|
||||
onMouseLeave={() => { if (!isDragging) setIsHoveringTrack(false); }}
|
||||
onClick={handleTrackClick}
|
||||
>
|
||||
<div
|
||||
ref={thumbRef}
|
||||
className="absolute rounded-full bg-zinc-400 cursor-grab active:cursor-grabbing"
|
||||
style={{
|
||||
[horizontal ? 'left' : 'top']: 0,
|
||||
[horizontal ? 'bottom' : 'right']: '4px',
|
||||
[horizontal ? 'width' : 'height']: thumbSize,
|
||||
[horizontal ? 'height' : 'width']: size,
|
||||
opacity: isActive ? 0.9 : 0.5,
|
||||
transition: 'opacity 0.15s, width 0.15s, height 0.15s',
|
||||
transform: horizontal ? 'translateX(0px)' : 'translateY(0px)',
|
||||
willChange: 'transform'
|
||||
}}
|
||||
onMouseDown={handleThumbMouseDown}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none !important;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,153 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const academicJournal: StyleOption = {
|
||||
id: 'academic-journal',
|
||||
name: 'Academic Journal',
|
||||
category: 'Academic',
|
||||
description: 'Scholarly and rigorous design for academic papers and research publications. Traditional serif typography optimized for extended reading.',
|
||||
vibe: 'Scholarly, Serious, Traditional',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Source+Sans+3:wght@400;600&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Libre Baskerville',
|
||||
body: 'Libre Baskerville',
|
||||
code: 'Source Sans 3'
|
||||
},
|
||||
colors: {
|
||||
text: '1A1A1A',
|
||||
textSecondary: '333333',
|
||||
background: 'FFFFFF',
|
||||
accent: '800000',
|
||||
border: '800000',
|
||||
codeBg: 'F5F5F5',
|
||||
blockquoteBorder: '333333'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 18,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
align: 'center',
|
||||
spacing: { before: 18, after: 12, line: 1.2 }
|
||||
},
|
||||
h2: {
|
||||
font: 'heading',
|
||||
size: 13,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 7, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
italic: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '333333',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '333333',
|
||||
bold: true,
|
||||
italic: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '333333',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 6, after: 3, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '1A1A1A',
|
||||
align: 'both',
|
||||
spacing: { before: 0, after: 7, line: 1.7 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 9,
|
||||
color: '333333',
|
||||
spacing: { before: 10, after: 10, line: 1.5 },
|
||||
padding: 10,
|
||||
borderLeft: { color: '800000', width: 3, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: '333333',
|
||||
background: 'F5F5F5'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: '333333',
|
||||
background: 'F5F5F5',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '1A1A1A',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '800000',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '1A1A1A',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: '800000', width: 1, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,157 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const arcticBase: StyleOption = {
|
||||
id: 'arctic-base',
|
||||
name: 'Arctic Base',
|
||||
category: 'Scientific',
|
||||
description: 'Polar research station. Stark white and ice blues with minimal sterile typography.',
|
||||
vibe: 'Cold, Sterile, Blue',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Iceland&family=Roboto:wght@300;400&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Iceland',
|
||||
body: 'Roboto',
|
||||
code: 'Roboto'
|
||||
},
|
||||
colors: {
|
||||
text: '455A64',
|
||||
textSecondary: '78909C',
|
||||
background: 'FFFFFF',
|
||||
accent: '0288D1',
|
||||
border: '01579B',
|
||||
codeBg: 'E3F2FD',
|
||||
blockquoteBorder: '0277BD'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 36,
|
||||
color: '01579B',
|
||||
bold: false,
|
||||
align: 'left',
|
||||
background: 'E1F5FE',
|
||||
spacing: { before: 20, after: 10, line: 1.2 },
|
||||
borderLeft: { color: '01579B', width: 4, style: 'solid' },
|
||||
padding: 12
|
||||
},
|
||||
h2: {
|
||||
font: 'body',
|
||||
size: 18,
|
||||
color: '0277BD',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
allCaps: true,
|
||||
spacing: { before: 16, after: 8, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'body',
|
||||
size: 16,
|
||||
color: '0288D1',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 7, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'body',
|
||||
size: 14,
|
||||
color: '0288D1',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '039BE5',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '039BE5',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '455A64',
|
||||
align: 'left',
|
||||
spacing: { before: 0, after: 8, line: 1.6 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '0277BD',
|
||||
spacing: { before: 12, after: 12, line: 1.5 },
|
||||
padding: 16,
|
||||
background: 'F0F8FF',
|
||||
border: { color: 'B3E5FC', width: 1, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '01579B',
|
||||
background: 'E3F2FD'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '01579B',
|
||||
background: 'E3F2FD',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '455A64',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '0288D1',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '01579B',
|
||||
bold: true,
|
||||
background: 'E1F5FE',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '455A64',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: '81D4FA', width: 2, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,156 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const botanicalTextbook: StyleOption = {
|
||||
id: 'botanical-textbook',
|
||||
name: 'Botanical Textbook',
|
||||
category: 'Scientific',
|
||||
description: 'Vintage science textbook aesthetic. Academic yet organic, like a 19th-century flora guide.',
|
||||
vibe: 'Vintage, Scientific, Organic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Alice&family=Gentium+Book+Basic:wght@400;700&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Alice',
|
||||
body: 'Gentium Book Basic',
|
||||
code: 'Gentium Book Basic'
|
||||
},
|
||||
colors: {
|
||||
text: '1B1B1B',
|
||||
textSecondary: '33691E',
|
||||
background: 'FFFFFF',
|
||||
accent: '827717',
|
||||
border: '827717',
|
||||
codeBg: 'F9FBE7',
|
||||
blockquoteBorder: '827717'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 28,
|
||||
color: '33691E',
|
||||
bold: false,
|
||||
align: 'left',
|
||||
spacing: { before: 20, after: 10, line: 1.2 },
|
||||
border: { color: '827717', width: 2, style: 'single' }
|
||||
},
|
||||
h2: {
|
||||
font: 'body',
|
||||
size: 14,
|
||||
color: '558B2F',
|
||||
bold: true,
|
||||
italic: true,
|
||||
align: 'left',
|
||||
spacing: { before: 15, after: 7.5, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'body',
|
||||
size: 13,
|
||||
color: '558B2F',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '689F38',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '689F38',
|
||||
bold: true,
|
||||
italic: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '7CB342',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 6, after: 3, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '1B1B1B',
|
||||
align: 'both',
|
||||
spacing: { before: 0, after: 8, line: 1.7 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '33691E',
|
||||
spacing: { before: 10, after: 10, line: 1.5 },
|
||||
padding: 16,
|
||||
background: 'F9FBE7',
|
||||
borderLeft: { color: '827717', width: 4, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '33691E',
|
||||
background: 'F9FBE7'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '33691E',
|
||||
background: 'F9FBE7',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '1B1B1B',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '558B2F',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '33691E',
|
||||
bold: true,
|
||||
background: 'F0F4C3',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '1B1B1B',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: '827717', width: 1, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,153 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const chemistryLab: StyleOption = {
|
||||
id: 'chemistry-lab',
|
||||
name: 'Chemistry Lab',
|
||||
category: 'Scientific',
|
||||
description: 'Clean, molecular design. Modern thin typography suitable for diagrams and formulas.',
|
||||
vibe: 'Scientific, Modern, Molecular',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Advent+Pro:wght@400;600;700&family=Heebo:wght@300;400;500&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Advent Pro',
|
||||
body: 'Heebo',
|
||||
code: 'Advent Pro'
|
||||
},
|
||||
colors: {
|
||||
text: '37474F',
|
||||
textSecondary: '546E7A',
|
||||
background: 'FFFFFF',
|
||||
accent: '00BCD4',
|
||||
border: '00BCD4',
|
||||
codeBg: 'E0F7FA',
|
||||
blockquoteBorder: '00BCD4'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 32,
|
||||
color: '00BCD4',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 20, after: 10, line: 1.2 }
|
||||
},
|
||||
h2: {
|
||||
font: 'body',
|
||||
size: 16,
|
||||
color: '0097A7',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 16, after: 8, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'body',
|
||||
size: 14,
|
||||
color: '00838F',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 7, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '00838F',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '006064',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '006064',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '37474F',
|
||||
align: 'left',
|
||||
spacing: { before: 0, after: 8, line: 1.6 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '0097A7',
|
||||
spacing: { before: 12, after: 12, line: 1.5 },
|
||||
padding: 16,
|
||||
background: 'E0F7FA',
|
||||
border: { color: '00BCD4', width: 1, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: '00838F',
|
||||
background: 'E0F7FA'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: '00838F',
|
||||
background: 'E0F7FA',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '37474F',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '00BCD4',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '00BCD4',
|
||||
bold: true,
|
||||
background: 'E0F7FA',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '37474F',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: 'B2EBF2', width: 2, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,156 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const darkAcademia: StyleOption = {
|
||||
id: 'dark-academia',
|
||||
name: 'Dark Academia',
|
||||
category: 'Academic',
|
||||
description: 'Moody, literary aesthetic. Tweed textures, old libraries, and classic serif typography.',
|
||||
vibe: 'Moody, Scholarly, Literary',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Alegreya:wght@400;700&family=Alegreya+SC:wght@400;700&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Alegreya SC',
|
||||
body: 'Alegreya',
|
||||
code: 'Alegreya'
|
||||
},
|
||||
colors: {
|
||||
text: '212121',
|
||||
textSecondary: '4E342E',
|
||||
background: 'F5F1E8',
|
||||
accent: '5D4037',
|
||||
border: '5D4037',
|
||||
codeBg: 'EFEBE9',
|
||||
blockquoteBorder: '3E2723'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 28,
|
||||
color: '3E2723',
|
||||
bold: true,
|
||||
align: 'center',
|
||||
spacing: { before: 24, after: 14, line: 1.2 },
|
||||
border: { color: '5D4037', width: 4, style: 'double' }
|
||||
},
|
||||
h2: {
|
||||
font: 'body',
|
||||
size: 16,
|
||||
color: '4E342E',
|
||||
bold: true,
|
||||
italic: true,
|
||||
align: 'left',
|
||||
spacing: { before: 18, after: 9, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'body',
|
||||
size: 14,
|
||||
color: '4E342E',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 15, after: 7.5, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '5D4037',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '5D4037',
|
||||
bold: true,
|
||||
italic: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '6D4C41',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
align: 'both',
|
||||
spacing: { before: 0, after: 9, line: 1.8 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '4E342E',
|
||||
italic: true,
|
||||
spacing: { before: 14, after: 14, line: 1.6 },
|
||||
padding: 10,
|
||||
borderLeft: { color: '3E2723', width: 2, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '3E2723',
|
||||
background: 'EFEBE9'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '3E2723',
|
||||
background: 'EFEBE9',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '5D4037',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '3E2723',
|
||||
bold: true,
|
||||
background: 'EFEBE9',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: '5D4037', width: 2, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,156 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const educationFriendly: StyleOption = {
|
||||
id: 'education-friendly',
|
||||
name: 'Education Friendly',
|
||||
category: 'Education',
|
||||
description: 'Approachable and clear design for educational materials. High readability with friendly colors suitable for learning environments.',
|
||||
vibe: 'Friendly, Educational, Accessible',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Nunito',
|
||||
body: 'Nunito',
|
||||
code: 'Nunito'
|
||||
},
|
||||
colors: {
|
||||
text: '424242',
|
||||
textSecondary: '616161',
|
||||
background: 'FFFFFF',
|
||||
accent: '5E35B1',
|
||||
border: '7E57C2',
|
||||
codeBg: 'EDE7F6',
|
||||
blockquoteBorder: '7E57C2'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 24,
|
||||
color: '5E35B1',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
background: 'EDE7F6',
|
||||
spacing: { before: 20, after: 10, line: 1.2 },
|
||||
padding: 16,
|
||||
border: { color: 'D1C4E9', width: 1, style: 'solid' }
|
||||
},
|
||||
h2: {
|
||||
font: 'heading',
|
||||
size: 14,
|
||||
color: '7E57C2',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 15, after: 7.5, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'heading',
|
||||
size: 13,
|
||||
color: '7E57C2',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: '9575CD',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '9575CD',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: 'B39DDB',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 6, after: 3, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '424242',
|
||||
align: 'left',
|
||||
spacing: { before: 0, after: 8, line: 1.7 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '5E35B1',
|
||||
spacing: { before: 10, after: 10, line: 1.5 },
|
||||
padding: 16,
|
||||
background: 'F3E5F5',
|
||||
borderLeft: { color: '7E57C2', width: 4, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '5E35B1',
|
||||
background: 'EDE7F6'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '5E35B1',
|
||||
background: 'EDE7F6',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '424242',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '5E35B1',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '5E35B1',
|
||||
bold: true,
|
||||
background: 'EDE7F6',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '424242',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: 'D1C4E9', width: 2, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,155 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const emergencyRoom: StyleOption = {
|
||||
id: 'emergency-room',
|
||||
name: 'Emergency Room',
|
||||
category: 'Medical',
|
||||
description: 'Hospital signage. Sterile white, urgent red, and clean blue.',
|
||||
vibe: 'Sterile, Urgent, Clean',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Assistant:wght@400;700&family=Heebo:wght@400;700&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Assistant',
|
||||
body: 'Heebo',
|
||||
code: 'Heebo'
|
||||
},
|
||||
colors: {
|
||||
text: '424242',
|
||||
textSecondary: '616161',
|
||||
background: 'FFFFFF',
|
||||
accent: 'D50000',
|
||||
border: 'D50000',
|
||||
codeBg: 'FFEBEE',
|
||||
blockquoteBorder: 'D50000'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 36,
|
||||
color: 'D50000',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 20, after: 10, line: 1.2 },
|
||||
border: { color: 'D50000', width: 4, style: 'single' }
|
||||
},
|
||||
h2: {
|
||||
font: 'body',
|
||||
size: 18,
|
||||
color: '2962FF',
|
||||
bold: true,
|
||||
allCaps: true,
|
||||
align: 'left',
|
||||
spacing: { before: 16, after: 8, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'body',
|
||||
size: 15,
|
||||
color: '2962FF',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 7, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'body',
|
||||
size: 13,
|
||||
color: '2979FF',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '2979FF',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '448AFF',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '424242',
|
||||
align: 'left',
|
||||
spacing: { before: 0, after: 8, line: 1.6 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: 'D50000',
|
||||
spacing: { before: 12, after: 12, line: 1.5 },
|
||||
padding: 16,
|
||||
background: 'FFEBEE',
|
||||
borderLeft: { color: 'D50000', width: 6, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: 'D50000',
|
||||
background: 'FFEBEE'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: 'D50000',
|
||||
background: 'FFEBEE',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '424242',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '2962FF',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: 'D50000',
|
||||
bold: true,
|
||||
background: 'FFEBEE',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '424242',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: 'EF5350', width: 3, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,157 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const furnitureManual: StyleOption = {
|
||||
id: 'furniture-manual',
|
||||
name: 'Furniture Manual',
|
||||
category: 'Instructional',
|
||||
description: 'Flat-pack assembly guide. Clean, heavy line art vibes with friendly sans-serifs.',
|
||||
vibe: 'Clean, Instructional, Neutral',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Varela+Round&family=Hind:wght@300;600&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Varela Round',
|
||||
body: 'Hind',
|
||||
code: 'Hind'
|
||||
},
|
||||
colors: {
|
||||
text: '424242',
|
||||
textSecondary: '616161',
|
||||
background: 'FFFFFF',
|
||||
accent: '000000',
|
||||
border: '000000',
|
||||
codeBg: 'F5F5F5',
|
||||
blockquoteBorder: '000000'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 32,
|
||||
color: '000000',
|
||||
bold: false,
|
||||
align: 'left',
|
||||
spacing: { before: 20, after: 10, line: 1.2 }
|
||||
},
|
||||
h2: {
|
||||
font: 'heading',
|
||||
size: 16,
|
||||
color: '000000',
|
||||
bold: false,
|
||||
align: 'left',
|
||||
background: 'F5F5F5',
|
||||
spacing: { before: 16, after: 8, line: 1.2 },
|
||||
borderLeft: { color: '000000', width: 4, style: 'single' },
|
||||
border: { color: '000000', width: 2, style: 'single' },
|
||||
padding: 8
|
||||
},
|
||||
h3: {
|
||||
font: 'heading',
|
||||
size: 14,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 7, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: '212121',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '424242',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '616161',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '424242',
|
||||
align: 'left',
|
||||
spacing: { before: 0, after: 8, line: 1.6 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: '212121',
|
||||
spacing: { before: 12, after: 12, line: 1.5 },
|
||||
padding: 20,
|
||||
background: 'F5F5F5',
|
||||
border: { color: '000000', width: 2, style: 'single' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '000000',
|
||||
background: 'F5F5F5'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '000000',
|
||||
background: 'F5F5F5',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '424242',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '000000',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
background: 'F5F5F5',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '424242',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: '000000', width: 2, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,154 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const historyTextbook: StyleOption = {
|
||||
id: 'history-textbook',
|
||||
name: 'History Textbook',
|
||||
category: 'Academic',
|
||||
description: 'Classic textbook design. Sepia tones, distinct serif headers, and wide margins for notes.',
|
||||
vibe: 'Classic, Educational, Historical',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&family=Sorts+Mill+Goudy&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Goudy Bookletter 1911',
|
||||
body: 'Sorts Mill Goudy',
|
||||
code: 'Sorts Mill Goudy'
|
||||
},
|
||||
colors: {
|
||||
text: '212121',
|
||||
textSecondary: '3E2723',
|
||||
background: 'FFF8E1',
|
||||
accent: '8D6E63',
|
||||
border: '8D6E63',
|
||||
codeBg: 'FFF3E0',
|
||||
blockquoteBorder: '8D6E63'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 28,
|
||||
color: '5D4037',
|
||||
bold: false,
|
||||
align: 'left',
|
||||
spacing: { before: 20, after: 10, line: 1.2 },
|
||||
border: { color: '8D6E63', width: 2, style: 'single' }
|
||||
},
|
||||
h2: {
|
||||
font: 'body',
|
||||
size: 16,
|
||||
color: '3E2723',
|
||||
bold: false,
|
||||
align: 'left',
|
||||
spacing: { before: 15, after: 7.5, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'body',
|
||||
size: 14,
|
||||
color: '4E342E',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '5D4037',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '6D4C41',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '795548',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 6, after: 3, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
align: 'left',
|
||||
spacing: { before: 0, after: 8, line: 1.7 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '3E2723',
|
||||
spacing: { before: 10, after: 10, line: 1.5 },
|
||||
padding: 16,
|
||||
background: 'FFFFFF',
|
||||
border: { color: '8D6E63', width: 1, style: 'single' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '5D4037',
|
||||
background: 'FFF3E0'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '5D4037',
|
||||
background: 'FFF3E0',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '5D4037',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '5D4037',
|
||||
bold: true,
|
||||
background: 'FFF3E0',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: '8D6E63', width: 1, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
import { academicJournal } from './academic-journal';
|
||||
import { arcticBase } from './arctic-base';
|
||||
import { botanicalTextbook } from './botanical-textbook';
|
||||
import { chemistryLab } from './chemistry-lab';
|
||||
import { darkAcademia } from './dark-academia';
|
||||
import { educationFriendly } from './education-friendly';
|
||||
import { emergencyRoom } from './emergency-room';
|
||||
import { furnitureManual } from './furniture-manual';
|
||||
import { historyTextbook } from './history-textbook';
|
||||
import { kidsEducation } from './kids-education';
|
||||
import { mathematicsPaper } from './mathematics-paper';
|
||||
import { medicalProfessional } from './medical-professional';
|
||||
import { phdThesis } from './phd-thesis';
|
||||
import { scantronTest } from './scantron-test';
|
||||
import { scientificJournal } from './scientific-journal';
|
||||
import { weatherRadar } from './weather-radar';
|
||||
|
||||
export const academicStyles: StyleOption[] = [
|
||||
academicJournal,
|
||||
arcticBase,
|
||||
botanicalTextbook,
|
||||
chemistryLab,
|
||||
darkAcademia,
|
||||
educationFriendly,
|
||||
emergencyRoom,
|
||||
furnitureManual,
|
||||
historyTextbook,
|
||||
kidsEducation,
|
||||
mathematicsPaper,
|
||||
medicalProfessional,
|
||||
phdThesis,
|
||||
scantronTest,
|
||||
scientificJournal,
|
||||
weatherRadar
|
||||
];
|
||||
@@ -1,156 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const kidsEducation: StyleOption = {
|
||||
id: 'kids-education',
|
||||
name: 'Kids Education',
|
||||
category: 'Education',
|
||||
description: 'Fun and engaging design for children\'s educational content. Rounded typography with bright, cheerful colors.',
|
||||
vibe: 'Educational, Fun, Engaging',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Fredoka',
|
||||
body: 'Fredoka',
|
||||
code: 'Fredoka'
|
||||
},
|
||||
colors: {
|
||||
text: '495057',
|
||||
textSecondary: '6C757D',
|
||||
background: 'FFFFFF',
|
||||
accent: 'FF6B6B',
|
||||
border: 'FF6B6B',
|
||||
codeBg: 'FFF9DB',
|
||||
blockquoteBorder: '4ECDC4'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 32,
|
||||
color: 'FF6B6B',
|
||||
bold: true,
|
||||
align: 'center',
|
||||
background: 'FFF9DB',
|
||||
spacing: { before: 20, after: 12, line: 1.2 },
|
||||
padding: 16,
|
||||
border: { color: 'FFE066', width: 2, style: 'solid' }
|
||||
},
|
||||
h2: {
|
||||
font: 'heading',
|
||||
size: 18,
|
||||
color: '4ECDC4',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 16, after: 8, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'heading',
|
||||
size: 15,
|
||||
color: '45B7D1',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 7, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'heading',
|
||||
size: 13,
|
||||
color: '45B7D1',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: '96CEB4',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '96CEB4',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '495057',
|
||||
align: 'left',
|
||||
spacing: { before: 0, after: 9, line: 1.8 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '4ECDC4',
|
||||
spacing: { before: 10, after: 10, line: 1.6 },
|
||||
padding: 16,
|
||||
background: 'E3F9F8',
|
||||
borderLeft: { color: '4ECDC4', width: 6, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 11,
|
||||
color: 'FF6B6B',
|
||||
background: 'FFF9DB'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 11,
|
||||
color: 'FF6B6B',
|
||||
background: 'FFF9DB',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '495057',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: 'FF6B6B',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: 'FF6B6B',
|
||||
bold: true,
|
||||
background: 'FFF9DB',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '495057',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: 'FFE066', width: 3, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,154 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const mathematicsPaper: StyleOption = {
|
||||
id: 'mathematics-paper',
|
||||
name: 'Mathematics Paper',
|
||||
category: 'Academic',
|
||||
description: 'Inspired by LaTeX and Computer Modern. Serif-heavy, precise, and highly legible for academic rigor.',
|
||||
vibe: 'Academic, Rigorous, Formal',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Domine:wght@400;700&family=Noticia+Text:wght@400;700&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Domine',
|
||||
body: 'Noticia Text',
|
||||
code: 'Noticia Text'
|
||||
},
|
||||
colors: {
|
||||
text: '212121',
|
||||
textSecondary: '424242',
|
||||
background: 'FFFFFF',
|
||||
accent: '000000',
|
||||
border: '000000',
|
||||
codeBg: 'F5F5F5',
|
||||
blockquoteBorder: '000000'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 24,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
align: 'center',
|
||||
spacing: { before: 20, after: 12, line: 1.2 }
|
||||
},
|
||||
h2: {
|
||||
font: 'heading',
|
||||
size: 14,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 16, after: 8, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 7, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '424242',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '616161',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
align: 'both',
|
||||
spacing: { before: 0, after: 8, line: 1.6 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '212121',
|
||||
italic: true,
|
||||
spacing: { before: 12, after: 12, line: 1.5 },
|
||||
padding: 10,
|
||||
background: 'F5F5F5',
|
||||
borderLeft: { color: '000000', width: 3, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '000000',
|
||||
background: 'F5F5F5'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '000000',
|
||||
background: 'F5F5F5',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '000000',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
background: 'F5F5F5',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: '000000', width: 1, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,153 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const medicalProfessional: StyleOption = {
|
||||
id: 'medical-professional',
|
||||
name: 'Medical Professional',
|
||||
category: 'Healthcare',
|
||||
description: 'Clean, clinical design for healthcare and medical documentation. Emphasizes clarity and professionalism with calming blue accents.',
|
||||
vibe: 'Clinical, Professional, Trustworthy',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Open Sans',
|
||||
body: 'Open Sans',
|
||||
code: 'Open Sans'
|
||||
},
|
||||
colors: {
|
||||
text: '37474F',
|
||||
textSecondary: '546E7A',
|
||||
background: 'FFFFFF',
|
||||
accent: '1565C0',
|
||||
border: '0D47A1',
|
||||
codeBg: 'E3F2FD',
|
||||
blockquoteBorder: '1565C0'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 20,
|
||||
color: '1565C0',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 18, after: 10, line: 1.2 }
|
||||
},
|
||||
h2: {
|
||||
font: 'heading',
|
||||
size: 13,
|
||||
color: '0D47A1',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 7, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: '1565C0',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '1976D2',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '1976D2',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '2196F3',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 6, after: 3, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '37474F',
|
||||
align: 'left',
|
||||
spacing: { before: 0, after: 8, line: 1.6 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '1565C0',
|
||||
spacing: { before: 10, after: 10, line: 1.5 },
|
||||
padding: 16,
|
||||
background: 'E3F2FD',
|
||||
borderLeft: { color: '1565C0', width: 4, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: '0D47A1',
|
||||
background: 'E3F2FD'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: '0D47A1',
|
||||
background: 'E3F2FD',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '37474F',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '1565C0',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '1565C0',
|
||||
bold: true,
|
||||
background: 'E3F2FD',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '37474F',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: '90CAF9', width: 1, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,154 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const phdThesis: StyleOption = {
|
||||
id: 'phd-thesis',
|
||||
name: 'PhD Thesis',
|
||||
category: 'Academic',
|
||||
description: 'The pinnacle of academic formatting. Extremely legible serif body, double spacing, and rigorous margin structure.',
|
||||
vibe: 'Formal, Scholarly, Prestigious',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Tinos:wght@400;700&family=Crimson+Text:wght@400;600&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Tinos',
|
||||
body: 'Crimson Text',
|
||||
code: 'Crimson Text'
|
||||
},
|
||||
colors: {
|
||||
text: '000000',
|
||||
textSecondary: '424242',
|
||||
background: 'FFFFFF',
|
||||
accent: '000000',
|
||||
border: '000000',
|
||||
codeBg: 'F5F5F5',
|
||||
blockquoteBorder: '000000'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 24,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
allCaps: true,
|
||||
align: 'center',
|
||||
spacing: { before: 24, after: 12, line: 1.2 }
|
||||
},
|
||||
h2: {
|
||||
font: 'heading',
|
||||
size: 14,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '424242',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '616161',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 6, after: 3, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '000000',
|
||||
align: 'both',
|
||||
spacing: { before: 0, after: 0, line: 2.0 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '000000',
|
||||
italic: true,
|
||||
spacing: { before: 12, after: 12, line: 2.0 },
|
||||
padding: 10,
|
||||
indent: 40
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 11,
|
||||
color: '000000',
|
||||
background: 'F5F5F5'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 11,
|
||||
color: '000000',
|
||||
background: 'F5F5F5',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 2.0 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 2.0 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '000000',
|
||||
spacing: { before: 4, after: 4, line: 2.0 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '000000',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
background: 'F5F5F5',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '000000',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: '000000', width: 1, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,156 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const scantronTest: StyleOption = {
|
||||
id: 'scantron-test',
|
||||
name: 'Scantron Test',
|
||||
category: 'Academic',
|
||||
description: 'Standardized testing sheet. Salmon pinks and greens with bubble-filling aesthetics.',
|
||||
vibe: 'Academic, Retro, Bureaucratic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Roboto Mono',
|
||||
body: 'Roboto Mono',
|
||||
code: 'Roboto Mono'
|
||||
},
|
||||
colors: {
|
||||
text: '212121',
|
||||
textSecondary: '424242',
|
||||
background: 'FFF3E0',
|
||||
accent: 'EF5350',
|
||||
border: 'B71C1C',
|
||||
codeBg: 'FFEBEE',
|
||||
blockquoteBorder: 'B71C1C'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 28,
|
||||
color: 'B71C1C',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 20, after: 10, line: 1.2 },
|
||||
border: { color: 'EF5350', width: 2, style: 'single' }
|
||||
},
|
||||
h2: {
|
||||
font: 'heading',
|
||||
size: 14,
|
||||
color: '1B5E20',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
background: 'C8E6C9',
|
||||
spacing: { before: 16, after: 8, line: 1.2 },
|
||||
padding: 4
|
||||
},
|
||||
h3: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: '2E7D32',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 7, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '388E3C',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '43A047',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '4CAF50',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '212121',
|
||||
align: 'left',
|
||||
spacing: { before: 0, after: 8, line: 1.6 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: 'B71C1C',
|
||||
spacing: { before: 12, after: 12, line: 1.5 },
|
||||
padding: 16,
|
||||
background: 'FFEBEE',
|
||||
border: { color: 'B71C1C', width: 1, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: 'B71C1C',
|
||||
background: 'FFEBEE'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: 'B71C1C',
|
||||
background: 'FFEBEE',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '212121',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: 'B71C1C',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: 'B71C1C',
|
||||
bold: true,
|
||||
background: 'FFEBEE',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '212121',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: 'EF5350', width: 2, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,152 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const scientificJournal: StyleOption = {
|
||||
id: 'scientific-journal',
|
||||
name: 'Scientific Journal',
|
||||
category: 'Academic',
|
||||
description: 'Precise design for scientific publications. Clear hierarchy optimized for data-heavy content and citations.',
|
||||
vibe: 'Scientific, Precise, Academic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Literata:wght@400;500;700&family=Fira+Sans:wght@400;500;600&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Literata',
|
||||
body: 'Literata',
|
||||
code: 'Fira Sans'
|
||||
},
|
||||
colors: {
|
||||
text: '262626',
|
||||
textSecondary: '4A4A4A',
|
||||
background: 'FFFFFF',
|
||||
accent: '0066CC',
|
||||
border: '0066CC',
|
||||
codeBg: 'F5F5F5',
|
||||
blockquoteBorder: '0066CC'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 18,
|
||||
color: '1A1A1A',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 18, after: 10, line: 1.3 }
|
||||
},
|
||||
h2: {
|
||||
font: 'code',
|
||||
size: 12,
|
||||
color: '1A1A1A',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 6, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'code',
|
||||
size: 11,
|
||||
color: '262626',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '333333',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '424242',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: '4A4A4A',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 6, after: 3, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '262626',
|
||||
align: 'both',
|
||||
spacing: { before: 0, after: 7, line: 1.6 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 9,
|
||||
color: '4A4A4A',
|
||||
spacing: { before: 8, after: 8, line: 1.4 },
|
||||
padding: 10,
|
||||
borderLeft: { color: '0066CC', width: 2, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: '0066CC',
|
||||
background: 'F5F5F5'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: '0066CC',
|
||||
background: 'F5F5F5',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '262626',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '0066CC',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '1A1A1A',
|
||||
bold: true,
|
||||
background: 'F5F5F5',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '262626',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: '0066CC', width: 1, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,159 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const weatherRadar: StyleOption = {
|
||||
id: 'weather-radar',
|
||||
name: 'Weather Radar',
|
||||
category: 'Scientific',
|
||||
description: 'Meteorological map aesthetic. Deep map green backgrounds with rainbow radar text colors.',
|
||||
vibe: 'Scientific, Map, Storm',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;700&family=Sarpanch:wght@400;700&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Chakra Petch',
|
||||
body: 'Chakra Petch',
|
||||
code: 'Sarpanch'
|
||||
},
|
||||
colors: {
|
||||
text: 'E0F2F1',
|
||||
textSecondary: 'B2DFDB',
|
||||
background: '455A64',
|
||||
accent: 'FF1744',
|
||||
border: 'FF1744',
|
||||
codeBg: '37474F',
|
||||
blockquoteBorder: 'FFEA00'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 32,
|
||||
color: 'FF1744',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
background: '263238',
|
||||
spacing: { before: 20, after: 10, line: 1.2 },
|
||||
borderLeft: { color: 'FF1744', width: 8, style: 'solid' },
|
||||
padding: 16
|
||||
},
|
||||
h2: {
|
||||
font: 'code',
|
||||
size: 16,
|
||||
color: '00E676',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
background: '37474F',
|
||||
spacing: { before: 16, after: 8, line: 1.2 },
|
||||
padding: 8
|
||||
},
|
||||
h3: {
|
||||
font: 'code',
|
||||
size: 14,
|
||||
color: '69F0AE',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 7, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'code',
|
||||
size: 12,
|
||||
color: '69F0AE',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'code',
|
||||
size: 11,
|
||||
color: 'B9F6CA',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: 'B9F6CA',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: 'E0F2F1',
|
||||
align: 'left',
|
||||
spacing: { before: 0, after: 8, line: 1.5 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: 'FFEA00',
|
||||
spacing: { before: 12, after: 12, line: 1.5 },
|
||||
padding: 16,
|
||||
background: '263238',
|
||||
border: { color: 'FFEA00', width: 2, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: 'FFEA00',
|
||||
background: '37474F'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: 'FFEA00',
|
||||
background: '37474F',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: 'E0F2F1',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: 'FFEA00',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: 'FF1744',
|
||||
bold: true,
|
||||
background: '263238',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: 'E0F2F1',
|
||||
background: '37474F',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: 'FFEA00', width: 2, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const circusSideshow: StyleOption = {
|
||||
id: 'circus-sideshow',
|
||||
name: 'Circus Sideshow',
|
||||
category: 'Entertainment',
|
||||
description: 'Big top aesthetic. Ornamental fonts with red and cream stripe vibes.',
|
||||
vibe: 'Fun, Ornamental, Striped',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Rye&family=Sancreek&family=Roboto+Slab&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Sancreek", size: 40, color: "D32F2F", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Rye", size: 18, color: "1A237E", bold: false, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Roboto Slab", size: 11, color: "212121", align: 'center',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D32F2F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Roboto Slab', serif;
|
||||
background: #FFF8E1;
|
||||
h1 { font-family: 'Sancreek', cursive; font-size: 40pt; color: #D32F2F; text-align: center; margin-bottom: 24px; text-shadow: 2px 2px 0px #FBC02D; }
|
||||
h2 { font-family: 'Rye', serif; font-size: 18pt; color: #1A237E; text-align: center; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; text-align: center; }
|
||||
blockquote { border: 4px double #D32F2F; padding: 20px; margin: 24px auto; background: #FFF; border-radius: 16px; font-family: 'Sancreek', cursive; font-size: 14pt; color: #1A237E; text-align: center; max-width: 80%; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const environmentalGreen: StyleOption = {
|
||||
id: 'environmental-green',
|
||||
name: 'Environmental Green',
|
||||
category: 'Sustainability',
|
||||
description: 'Nature-inspired design for environmental and sustainability communications. Organic feel with earthy green palette.',
|
||||
vibe: 'Natural, Sustainable, Organic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Bitter:wght@400;500;700&family=Karla:wght@400;500;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Bitter", size: 26, color: "2E7D32", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Bitter", size: 14, color: "388E3C", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Karla", size: 10, color: "3E4A3D", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "2E7D32"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Karla', sans-serif;
|
||||
h1 { font-family: 'Bitter', serif; font-size: 26pt; font-weight: 700; color: #2E7D32; margin-bottom: 24px; }
|
||||
h2 { font-family: 'Bitter', serif; font-size: 14pt; font-weight: 700; color: #388E3C; margin-top: 30px; margin-bottom: 14px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #3E4A3D; margin-bottom: 14px; }
|
||||
blockquote { background: #E8F5E9; padding: 16px; border-left: 4px solid #2E7D32; margin: 20px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,37 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const highwayInterstate: StyleOption = {
|
||||
id: 'highway-interstate',
|
||||
name: 'Highway Interstate',
|
||||
category: 'Urban',
|
||||
description: 'Road signage aesthetic. Reflective white text on deep highway green backgrounds.',
|
||||
vibe: 'Functional, Travel, Signage',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&family=Public+Sans:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Overpass", size: 36, color: "FFFFFF", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "00695C", color: "auto", style: "clear" },
|
||||
border: {
|
||||
bottom: { color: "FFFFFF", space: 4, style: "single", size: 12 },
|
||||
top: { color: "FFFFFF", space: 4, style: "single", size: 12 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Public Sans", size: 18, color: "004D40", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Public Sans", size: 11, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "00695C"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Public Sans', sans-serif;
|
||||
h1 { font-family: 'Overpass', sans-serif; font-size: 36pt; font-weight: 700; color: #FFFFFF; background: #00695C; padding: 16px; border-top: 2px solid #FFF; border-bottom: 2px solid #FFF; margin-bottom: 24px; border-radius: 8px; }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #004D40; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
|
||||
p { font-size: 11pt; line-height: 1.5; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { background: #FFEB3B; color: #000; padding: 16px; margin: 24px 0; border: 4px solid #000; transform: skewX(-10deg); width: fit-content; }
|
||||
`
|
||||
};
|
||||
@@ -1,26 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
import { circusSideshow } from './circus-sideshow';
|
||||
import { environmentalGreen } from './environmental-green';
|
||||
import { highwayInterstate } from './highway-interstate';
|
||||
import { jungleExplorer } from './jungle-explorer';
|
||||
import { publicTransit } from './public-transit';
|
||||
import { silentFilmIntertitle } from './silent-film-intertitle';
|
||||
import { sportsDynamic } from './sports-dynamic';
|
||||
import { steampunkInventor } from './steampunk-inventor';
|
||||
import { subwayTile } from './subway-tile';
|
||||
import { taxiCab } from './taxi-cab';
|
||||
import { varsityTeam } from './varsity-team';
|
||||
|
||||
export const coreStyles: StyleOption[] = [
|
||||
circusSideshow,
|
||||
environmentalGreen,
|
||||
highwayInterstate,
|
||||
jungleExplorer,
|
||||
publicTransit,
|
||||
silentFilmIntertitle,
|
||||
sportsDynamic,
|
||||
steampunkInventor,
|
||||
subwayTile,
|
||||
taxiCab,
|
||||
varsityTeam
|
||||
];
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const jungleExplorer: StyleOption = {
|
||||
id: 'jungle-explorer',
|
||||
name: 'Jungle Explorer',
|
||||
category: 'Adventure',
|
||||
description: 'Safari expedition style. Khaki, olive drab, and canvas textures.',
|
||||
vibe: 'Adventure, Khaki, Nature',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Stardos+Stencil&family=Domine:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Stardos Stencil", size: 36, color: "33691E", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "827717", space: 6, style: "thick", size: 18 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Domine", size: 16, color: "558B2F", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Domine", size: 11, color: "1B1B1B", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "827717"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Domine', serif;
|
||||
background: #F0F4C3; /* Khaki tint */
|
||||
h1 { font-family: 'Stardos Stencil', cursive; font-size: 36pt; font-weight: 700; color: #33691E; border-bottom: 4px solid #827717; padding-bottom: 12px; margin-bottom: 24px; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #558B2F; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #1B1B1B; margin-bottom: 14px; }
|
||||
blockquote { background: #DCEDC8; padding: 20px; border-left: 6px solid #33691E; margin: 24px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const publicTransit: StyleOption = {
|
||||
id: 'public-transit',
|
||||
name: 'Public Transit',
|
||||
category: 'Urban',
|
||||
description: 'Subway map and transit signage aesthetic. Clean, highly legible sans-serifs with color-coded lines.',
|
||||
vibe: 'Urban, Functional, Color-coded',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Mukta:wght@400;700&family=Hanken+Grotesk:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Hanken Grotesk", size: 32, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "FFC107", space: 8, style: "single", size: 24 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Mukta", size: 18, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "EEEEEE", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Mukta", size: 11, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FFC107"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Mukta', sans-serif;
|
||||
h1 { font-family: 'Hanken Grotesk', sans-serif; font-size: 32pt; font-weight: 700; color: #000000; border-bottom: 6px solid #FFC107; padding-bottom: 12px; margin-bottom: 24px; }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #000000; background: #EEEEEE; padding: 4px 12px; margin-top: 32px; margin-bottom: 16px; display: inline-block; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border-left: 6px solid #F44336; padding-left: 16px; margin: 24px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const silentFilmIntertitle: StyleOption = {
|
||||
id: 'silent-film-intertitle',
|
||||
name: 'Silent Film Intertitle',
|
||||
category: 'Cinema',
|
||||
description: '1920s cinema cards. White decorative text on black backgrounds with ornate borders.',
|
||||
vibe: 'Cinema, Vintage, Dramatic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Gye-Gye&family=Sorts+Mill+Goudy&display=swap',
|
||||
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Gye-Gye", size: 32, color: "FFFFFF", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 },
|
||||
shading: { fill: "000000", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Sorts Mill Goudy", size: 18, color: "EEEEEE", bold: false, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "212121", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Sorts Mill Goudy", size: 14, color: "000000", align: 'center',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
|
||||
previewCss: `
|
||||
font-family: 'Sorts Mill Goudy', serif;
|
||||
h1 { font-family: 'Gye-Gye', sans-serif; font-size: 32pt; color: #FFFFFF; background: #000000; padding: 20px; text-align: center; margin-bottom: 24px; border: 4px double #FFF; }
|
||||
h2 { font-size: 18pt; color: #EEEEEE; background: #212121; display: inline-block; padding: 10px 20px; margin-top: 30px; margin-bottom: 16px; border-radius: 8px; }
|
||||
p { font-size: 14pt; line-height: 1.6; color: #000000; margin-bottom: 14px; text-align: center; }
|
||||
blockquote { border: 2px solid #000; padding: 20px; margin: 24px 0; font-style: italic; text-align: center; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const sportsDynamic: StyleOption = {
|
||||
id: 'sports-dynamic',
|
||||
name: 'Sports Dynamic',
|
||||
category: 'Sports',
|
||||
description: 'Energetic and bold design for sports and athletic content. Dynamic typography with high-impact colors.',
|
||||
vibe: 'Energetic, Bold, Athletic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rubik:wght@400;500;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Bebas Neue", size: 36, color: "D32F2F", bold: false, align: 'left',
|
||||
spacing: { before: 360, after: 200, line: 220 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Rubik", size: 14, color: "1A1A1A", bold: true, align: 'left',
|
||||
spacing: { before: 280, after: 140, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Rubik", size: 10, color: "333333", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D32F2F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Rubik', sans-serif;
|
||||
h1 { font-family: 'Bebas Neue', sans-serif; font-size: 36pt; color: #D32F2F; margin-bottom: 24px; letter-spacing: 2px; text-transform: uppercase; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #1A1A1A; margin-top: 28px; margin-bottom: 14px; text-transform: uppercase; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #333333; margin-bottom: 14px; }
|
||||
blockquote { background: #FFEBEE; padding: 16px; border-left: 6px solid #D32F2F; margin: 20px 0; font-weight: 500; }
|
||||
`
|
||||
};
|
||||
@@ -1,37 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const steampunkInventor: StyleOption = {
|
||||
id: 'steampunk-inventor',
|
||||
name: 'Steampunk Inventor',
|
||||
category: 'Fantasy',
|
||||
description: 'Brass and gear aesthetic. Victorian fonts with industrial metallic colors.',
|
||||
vibe: 'Mechanical, Brass, Victorian',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Rye&family=Lora:wght@400;700&display=swap',
|
||||
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Rye", size: 30, color: "5D4037", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 240, line: 240 },
|
||||
border: { bottom: { color: "B8860B", space: 8, style: "single", size: 24 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Lora", size: 16, color: "8D6E63", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Lora", size: 11, color: "3E2723", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "B8860B"
|
||||
},
|
||||
|
||||
previewCss: `
|
||||
font-family: 'Lora', serif;
|
||||
background: #EFEBE9;
|
||||
h1 { font-family: 'Rye', serif; font-size: 30pt; color: #5D4037; border-bottom: 6px double #B8860B; padding-bottom: 12px; margin-bottom: 24px; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #8D6E63; margin-top: 30px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1px; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #3E2723; margin-bottom: 14px; }
|
||||
blockquote { background: #D7CCC8; padding: 16px; border: 2px solid #5D4037; border-radius: 4px; margin: 24px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,38 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const subwayTile: StyleOption = {
|
||||
id: 'subway-tile',
|
||||
name: 'Subway Tile',
|
||||
category: 'Urban',
|
||||
description: 'Classic station ceramics. Clean white backgrounds, heavy black text, and tile-like framing.',
|
||||
vibe: 'Clean, Ceramic, Urban',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;600&family=Lexend:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Lexend", size: 36, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: {
|
||||
top: { color: "000000", space: 12, style: "single", size: 4 },
|
||||
bottom: { color: "000000", space: 12, style: "single", size: 4 },
|
||||
left: { color: "000000", space: 12, style: "single", size: 4 },
|
||||
right: { color: "000000", space: 12, style: "single", size: 4 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Work Sans", size: 16, color: "212121", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Work Sans", size: 11, color: "424242", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
h1 { font-family: 'Lexend', sans-serif; font-size: 36pt; font-weight: 700; color: #000000; border: 4px solid #000000; padding: 16px; margin-bottom: 24px; text-align: center; background: #FFFFFF; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #212121; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #424242; margin-bottom: 14px; }
|
||||
blockquote { border-left: 8px solid #000; padding-left: 16px; margin: 24px 0; background: #F5F5F5; }
|
||||
`
|
||||
};
|
||||
@@ -1,40 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const taxiCab: StyleOption = {
|
||||
id: 'taxi-cab',
|
||||
name: 'Taxi Cab',
|
||||
category: 'Urban',
|
||||
description: 'Yellow cab aesthetic. Checkerboard patterns (simulated) and bold black on yellow.',
|
||||
vibe: 'Urban, Yellow, Bold',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Archivo+Black&family=Roboto:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Archivo Black", size: 36, color: "000000", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "FFEB3B", color: "auto", style: "clear" },
|
||||
border: {
|
||||
top: { color: "000000", space: 4, style: "dashed", size: 24 }, // Simulates checkers
|
||||
bottom: { color: "000000", space: 4, style: "dashed", size: 24 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Roboto", size: 18, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "FFFFFF", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Roboto", size: 12, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FFEB3B"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background: #212121;
|
||||
padding: 20px;
|
||||
h1 { font-family: 'Archivo Black', sans-serif; font-size: 36pt; color: #000000; background: #FFEB3B; padding: 16px; margin-bottom: 24px; text-align: center; border-top: 6px dashed #000; border-bottom: 6px dashed #000; }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #000000; background: #FFFFFF; padding: 8px; margin-top: 32px; margin-bottom: 16px; text-align: center; display: inline-block; }
|
||||
p { font-size: 12pt; line-height: 1.5; color: #FFFFFF; margin-bottom: 14px; }
|
||||
blockquote { background: #FFEB3B; color: #000; padding: 16px; margin: 24px 0; font-weight: 700; }
|
||||
`
|
||||
};
|
||||
@@ -1,38 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const varsityTeam: StyleOption = {
|
||||
id: 'varsity-team',
|
||||
name: 'Varsity Team',
|
||||
category: 'Sport',
|
||||
description: 'College sports jersey style. Block lettering with athletic gold and navy.',
|
||||
vibe: 'Athletic, College, Bold',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Graduate&family=Saira:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Graduate", size: 36, color: "FDD835", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 },
|
||||
shading: { fill: "1A237E", color: "auto", style: "clear" },
|
||||
border: {
|
||||
top: { color: "FDD835", space: 8, style: "single", size: 24 },
|
||||
bottom: { color: "FDD835", space: 8, style: "single", size: 24 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Saira", size: 20, color: "1A237E", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Saira", size: 12, color: "212121", align: 'center',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FDD835"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Saira', sans-serif;
|
||||
h1 { font-family: 'Graduate', serif; font-size: 36pt; color: #FDD835; background: #1A237E; border-top: 4px solid #FDD835; border-bottom: 4px solid #FDD835; padding: 20px; text-align: center; margin-bottom: 24px; }
|
||||
h2 { font-size: 20pt; font-weight: 700; color: #1A237E; text-align: center; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
|
||||
p { font-size: 12pt; line-height: 1.5; color: #212121; margin-bottom: 14px; text-align: center; }
|
||||
blockquote { border: 2px dashed #1A237E; padding: 16px; margin: 24px 0; background: #E8EAF6; }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const annualReport: StyleOption = {
|
||||
id: 'annual-report',
|
||||
name: 'Annual Report',
|
||||
category: 'Corporate',
|
||||
description: 'Trustworthy and substantial. Deep navy blues, clean sans-serifs, and grid-like precision.',
|
||||
vibe: 'Financial, Serious, Trust',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;700;900&family=Merriweather:wght@300;400&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Libre Franklin", size: 32, color: "0D2B46", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Libre Franklin", size: 16, color: "A0A0A0", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Merriweather", size: 10, color: "333333", align: 'both',
|
||||
spacing: { before: 0, after: 160, line: 300 }
|
||||
},
|
||||
accentColor: "0D2B46"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Merriweather', serif;
|
||||
h1 { font-family: 'Libre Franklin', sans-serif; font-size: 32pt; font-weight: 900; color: #0D2B46; margin-bottom: 24px; }
|
||||
h2 { font-family: 'Libre Franklin', sans-serif; font-size: 16pt; font-weight: 700; color: #A0A0A0; text-transform: uppercase; margin-top: 32px; margin-bottom: 16px; border-bottom: 1px solid #CCC; padding-bottom: 4px; }
|
||||
p { font-size: 10pt; line-height: 1.8; color: #333333; margin-bottom: 14px; text-align: justify; }
|
||||
blockquote { border-left: 4px solid #0D2B46; padding-left: 16px; margin: 24px 0; color: #0D2B46; font-style: italic; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const corporateExecutive: StyleOption = {
|
||||
id: 'corporate-executive',
|
||||
name: 'Corporate Executive',
|
||||
category: 'Corporate',
|
||||
description: 'Authoritative and professional. Designed for board reports, executive summaries, and high-stakes business communications.',
|
||||
vibe: 'Executive, Formal, Trustworthy',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;600;700&family=Source+Sans+3:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Source Serif 4", size: 24, color: "1A237E", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Source Sans 3", size: 14, color: "303F9F", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Source Sans 3", size: 10, color: "333333", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "1A237E"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Source Sans 3', sans-serif;
|
||||
h1 { font-family: 'Source Serif 4', serif; font-size: 24pt; font-weight: 700; color: #1A237E; margin-bottom: 24px; border-bottom: 2px solid #1A237E; padding-bottom: 8px; }
|
||||
h2 { font-size: 14pt; font-weight: 600; color: #303F9F; margin-top: 30px; margin-bottom: 12px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #333333; margin-bottom: 14px; }
|
||||
blockquote { border-left: 4px solid #1A237E; padding-left: 16px; color: #1A237E; margin: 20px 0; font-style: italic; }
|
||||
`
|
||||
};
|
||||
@@ -1,35 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const creditCardPlatinum: StyleOption = {
|
||||
id: 'credit-card-platinum',
|
||||
name: 'Credit Card Platinum',
|
||||
category: 'Financial',
|
||||
description: 'Premium card aesthetic. Silver/gradient shading with OCR-style raised numbering fonts.',
|
||||
vibe: 'Premium, Silver, Metallic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Krub:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Krub", size: 32, color: "E0E0E0", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "424242", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Share Tech Mono", size: 18, color: "C0C0C0", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true,
|
||||
tracking: 100
|
||||
},
|
||||
body: {
|
||||
font: "Krub", size: 11, color: "616161", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "C0C0C0"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Krub', sans-serif;
|
||||
h1 { font-size: 32pt; font-weight: 700; color: #E0E0E0; background: linear-gradient(135deg, #616161, #212121); padding: 16px; margin-bottom: 24px; border-radius: 12px; }
|
||||
h2 { font-family: 'Share Tech Mono', monospace; font-size: 18pt; color: #757575; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 3px; text-shadow: 1px 1px 0 #FFF; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #616161; margin-bottom: 14px; }
|
||||
blockquote { border-left: 4px solid #C0C0C0; padding-left: 16px; margin: 24px 0; background: #F5F5F5; }
|
||||
`
|
||||
};
|
||||
@@ -1,38 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const currencyBill: StyleOption = {
|
||||
id: 'currency-bill',
|
||||
name: 'Currency Bill',
|
||||
category: 'Official',
|
||||
description: 'Banknote aesthetic. Intricate guilloche-style borders and emerald green serif fonts.',
|
||||
vibe: 'Financial, Secure, Green',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@700&family=Noto+Serif:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Playfair Display SC", size: 36, color: "1B5E20", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: {
|
||||
top: { color: "2E7D32", space: 6, style: "double", size: 12 },
|
||||
bottom: { color: "2E7D32", space: 6, style: "double", size: 12 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Noto Serif", size: 16, color: "388E3C", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Noto Serif", size: 11, color: "1B5E20", align: 'both',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "2E7D32"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Noto Serif', serif;
|
||||
background: #E8F5E9;
|
||||
h1 { font-family: 'Playfair Display SC', serif; font-size: 36pt; font-weight: 700; color: #1B5E20; text-align: center; border-top: 4px double #2E7D32; border-bottom: 4px double #2E7D32; padding: 12px 0; margin-bottom: 24px; letter-spacing: 2px; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #388E3C; text-align: center; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #1B5E20; margin-bottom: 14px; text-align: justify; }
|
||||
blockquote { border: 1px solid #2E7D32; padding: 20px; margin: 24px 0; background: #C8E6C9; text-align: center; border-radius: 50%; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
|
||||
`
|
||||
};
|
||||
@@ -1,30 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
import { annualReport } from './annual-report';
|
||||
import { corporateExecutive } from './corporate-executive';
|
||||
import { creditCardPlatinum } from './credit-card-platinum';
|
||||
import { currencyBill } from './currency-bill';
|
||||
import { legalContract } from './legal-contract';
|
||||
import { legalPleading } from './legal-pleading';
|
||||
import { passportOfficial } from './passport-official';
|
||||
import { policeBlotter } from './police-blotter';
|
||||
import { politicalCampaign } from './political-campaign';
|
||||
import { stockTicker } from './stock-ticker';
|
||||
import { techMemo } from './tech-memo';
|
||||
import { topSecretRedacted } from './top-secret-redacted';
|
||||
import { whiteboardStrategy } from './whiteboard-strategy';
|
||||
|
||||
export const corporateStyles: StyleOption[] = [
|
||||
annualReport,
|
||||
corporateExecutive,
|
||||
creditCardPlatinum,
|
||||
currencyBill,
|
||||
legalContract,
|
||||
legalPleading,
|
||||
passportOfficial,
|
||||
policeBlotter,
|
||||
politicalCampaign,
|
||||
stockTicker,
|
||||
techMemo,
|
||||
topSecretRedacted,
|
||||
whiteboardStrategy
|
||||
];
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const legalContract: StyleOption = {
|
||||
id: 'legal-contract',
|
||||
name: 'Legal Contract',
|
||||
category: 'Corporate',
|
||||
description: 'Binding agreement style. Serif fonts, justified text, and numbered section aesthetics.',
|
||||
vibe: 'Legal, Binding, Formal',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Tinos:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Tinos", size: 14, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 240, after: 240, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
heading2: {
|
||||
font: "Tinos", size: 12, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 240, after: 120, line: 240 },
|
||||
underline: true
|
||||
},
|
||||
body: {
|
||||
font: "Tinos", size: 11, color: "000000", align: 'both',
|
||||
spacing: { before: 0, after: 120, line: 240 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Tinos', serif;
|
||||
h1 { font-size: 14pt; font-weight: 700; color: #000000; text-align: center; text-transform: uppercase; margin-bottom: 16px; }
|
||||
h2 { font-size: 12pt; font-weight: 700; color: #000000; text-decoration: underline; margin-top: 24px; margin-bottom: 12px; }
|
||||
p { font-size: 11pt; line-height: 1.4; color: #000000; margin-bottom: 12px; text-align: justify; }
|
||||
blockquote { margin: 20px 40px; border: 1px solid #000; padding: 10px; }
|
||||
`
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const legalPleading: StyleOption = {
|
||||
id: 'legal-pleading',
|
||||
name: 'Legal Pleading',
|
||||
category: 'Professional',
|
||||
description: 'Courtroom document style. Rigid framing, double spacing, and traditional serif fonts.',
|
||||
vibe: 'Legal, Strict, Formal',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&family=Courier+Prime&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "EB Garamond", size: 14, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 240, after: 240, line: 240 },
|
||||
allCaps: true,
|
||||
border: { bottom: { color: "000000", space: 4, style: "single", size: 4 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "EB Garamond", size: 12, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 240, after: 120, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Courier Prime", size: 12, color: "000000", align: 'both',
|
||||
spacing: { before: 0, after: 0, line: 480 },
|
||||
border: { left: { color: "BDBDBD", space: 12, style: "single", size: 4 } }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Courier Prime', monospace;
|
||||
line-height: 2.0;
|
||||
h1 { font-family: 'EB Garamond', serif; font-size: 14pt; font-weight: 700; color: #000000; text-align: center; text-decoration: underline; text-transform: uppercase; margin-bottom: 24px; }
|
||||
h2 { font-family: 'EB Garamond', serif; font-size: 12pt; font-weight: 700; color: #000000; margin-top: 24px; margin-bottom: 12px; }
|
||||
p { font-size: 12pt; color: #000000; margin-bottom: 0px; text-align: justify; border-left: 1px solid #BDBDBD; padding-left: 15px; }
|
||||
blockquote { margin-left: 40px; border-left: 1px solid #BDBDBD; padding-left: 15px; }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const passportOfficial: StyleOption = {
|
||||
id: 'passport-official',
|
||||
name: 'Passport Official',
|
||||
category: 'Government',
|
||||
description: 'International travel document aesthetic. Machine-readable fonts with secure, bureaucratic vibes.',
|
||||
vibe: 'Official, Secure, Monospace',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Martian+Mono:wght@400;700&family=Courier+Prime&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Martian Mono", size: 22, color: "1A237E", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Martian Mono", size: 12, color: "B71C1C", bold: true, align: 'left',
|
||||
spacing: { before: 280, after: 140, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Courier Prime", size: 10, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 140, line: 260 }
|
||||
},
|
||||
accentColor: "B71C1C"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Courier Prime', monospace;
|
||||
h1 { font-family: 'Martian Mono', monospace; font-size: 22pt; font-weight: 700; color: #1A237E; margin-bottom: 24px; letter-spacing: -1px; }
|
||||
h2 { font-family: 'Martian Mono', monospace; font-size: 12pt; font-weight: 700; color: #B71C1C; margin-top: 28px; margin-bottom: 14px; text-transform: uppercase; }
|
||||
p { font-size: 10pt; line-height: 1.5; color: #212121; margin-bottom: 12px; }
|
||||
blockquote { border: 1px dashed #1A237E; padding: 16px; margin: 20px 0; background: #E8EAF6; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const policeBlotter: StyleOption = {
|
||||
id: 'police-blotter',
|
||||
name: 'Police Blotter',
|
||||
category: 'Official',
|
||||
description: 'Law enforcement paperwork. Carbon copy blue fonts on stark white forms.',
|
||||
vibe: 'Official, Blue, Bureaucratic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Courier+Prime&family=Special+Elite&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Special Elite", size: 26, color: "0D47A1", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
heading2: {
|
||||
font: "Courier Prime", size: 14, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "E3F2FD", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Courier Prime", size: 11, color: "1A237E", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "0D47A1"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Courier Prime', monospace;
|
||||
h1 { font-family: 'Special Elite', cursive; font-size: 26pt; color: #0D47A1; margin-bottom: 24px; text-transform: uppercase; text-decoration: underline; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #000000; background: #E3F2FD; display: block; padding: 4px; margin-top: 32px; margin-bottom: 16px; border: 1px solid #0D47A1; }
|
||||
p { font-size: 11pt; line-height: 1.5; color: #1A237E; margin-bottom: 14px; }
|
||||
blockquote { border: 1px solid #000; padding: 16px; margin: 24px 0; background: #FAFAFA; }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const politicalCampaign: StyleOption = {
|
||||
id: 'political-campaign',
|
||||
name: 'Political Campaign',
|
||||
category: 'Professional',
|
||||
description: 'Bold, patriotic design for campaigns. Strong headers with red, white, and blue motifs.',
|
||||
vibe: 'Patriotic, Bold, Official',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Francois+One&family=Cabin:wght@400;600;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Francois One", size: 36, color: "0D47A1", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "D32F2F", space: 8, style: "single", size: 12 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Cabin", size: 16, color: "D32F2F", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Cabin", size: 11, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D32F2F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Cabin', sans-serif;
|
||||
h1 { font-family: 'Francois One', sans-serif; font-size: 36pt; color: #0D47A1; border-bottom: 4px solid #D32F2F; padding-bottom: 12px; margin-bottom: 24px; text-transform: uppercase; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #D32F2F; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { background: #E3F2FD; padding: 20px; border-left: 8px solid #0D47A1; margin: 24px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const stockTicker: StyleOption = {
|
||||
id: 'stock-ticker',
|
||||
name: 'Stock Ticker',
|
||||
category: 'Financial',
|
||||
description: 'LED moving message sign. Dot matrix fonts with bright green/red on black.',
|
||||
vibe: 'Financial, Digital, LED',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=DotGothic16&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "DotGothic16", size: 32, color: "00E676", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "000000", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "DotGothic16", size: 18, color: "FF1744", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "000000", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "DotGothic16", size: 12, color: "E0E0E0", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 },
|
||||
shading: { fill: "212121", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "00E676"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'DotGothic16', sans-serif;
|
||||
background: #212121;
|
||||
h1 { font-size: 32pt; color: #00E676; background: #000000; padding: 12px; margin-bottom: 24px; border-bottom: 2px solid #333; }
|
||||
h2 { font-size: 18pt; color: #FF1744; background: #000000; padding: 8px; margin-top: 32px; margin-bottom: 16px; display: inline-block; }
|
||||
p { font-size: 12pt; line-height: 1.5; color: #E0E0E0; margin-bottom: 14px; }
|
||||
blockquote { border-left: 4px solid #00E676; padding-left: 16px; margin: 24px 0; color: #B9F6CA; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const techMemo: StyleOption = {
|
||||
id: 'tech-memo',
|
||||
name: 'Tech Memorandum',
|
||||
category: 'Corporate',
|
||||
description: 'Modern, functional, and authoritative. Uses shading for headers to create distinct sections.',
|
||||
vibe: 'Corporate, Tech, Strategy',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Roboto", size: 24, color: "0F172A", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "F1F5F9", color: "auto", style: "clear" },
|
||||
border: { left: { color: "2563EB", space: 10, style: "single", size: 48 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Roboto", size: 14, color: "2563EB", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Roboto", size: 10, color: "334155", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "2563EB"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Roboto', sans-serif;
|
||||
h1 { font-size: 24pt; font-weight: 700; background: #F1F5F9; color: #0F172A; padding: 12px 16px; border-left: 8px solid #2563EB; margin-bottom: 20px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #2563EB; margin-top: 30px; margin-bottom: 12px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #334155; margin-bottom: 14px; }
|
||||
blockquote { background: #EFF6FF; padding: 16px; border-radius: 4px; color: #1E40AF; border-left: 4px solid #2563EB; margin: 20px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,39 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const topSecretRedacted: StyleOption = {
|
||||
id: 'top-secret-redacted',
|
||||
name: 'Top Secret Redacted',
|
||||
category: 'Government',
|
||||
description: 'Declassified document style. Typewriter fonts with "blacked out" highlight effects.',
|
||||
vibe: 'Secret, Classified, Rough',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Special+Elite&family=Courier+Prime:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Special Elite", size: 28, color: "000000", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 },
|
||||
border: {
|
||||
top: { color: "000000", space: 6, style: "single", size: 24 },
|
||||
bottom: { color: "000000", space: 6, style: "single", size: 24 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Courier Prime", size: 14, color: "B71C1C", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "000000", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Courier Prime", size: 11, color: "000000", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Courier Prime', monospace;
|
||||
background: #F5F5F5;
|
||||
h1 { font-family: 'Special Elite', cursive; font-size: 28pt; color: #000000; border-top: 4px solid #000; border-bottom: 4px solid #000; padding: 16px 0; text-align: center; margin-bottom: 28px; text-transform: uppercase; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #B71C1C; background: #000000; display: inline-block; padding: 4px 12px; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #000000; margin-bottom: 14px; }
|
||||
blockquote { background: #000; color: #000; padding: 10px; margin: 20px 0; user-select: none; }
|
||||
blockquote:hover { color: #FFF; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const whiteboardStrategy: StyleOption = {
|
||||
id: 'whiteboard-strategy',
|
||||
name: 'Whiteboard Strategy',
|
||||
category: 'Business',
|
||||
description: 'Brainstorming session. Dry-erase marker fonts in standard office colors (Black, Blue, Red).',
|
||||
vibe: 'Corporate, Brainstorm, Sketch',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Patrick+Hand&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Architects Daughter", size: 36, color: "D32F2F", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "1976D2", space: 4, style: "single", size: 12 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Patrick Hand", size: 20, color: "1976D2", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Patrick Hand", size: 14, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D32F2F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Patrick Hand', cursive;
|
||||
background: #FFFFFF;
|
||||
h1 { font-family: 'Architects Daughter', cursive; font-size: 36pt; font-weight: 700; color: #D32F2F; border-bottom: 3px solid #1976D2; padding-bottom: 10px; margin-bottom: 24px; text-align: center; }
|
||||
h2 { font-size: 20pt; font-weight: 700; color: #1976D2; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 14pt; line-height: 1.5; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border: 2px solid #388E3C; padding: 16px; margin: 24px 0; border-radius: 16px; color: #388E3C; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const bauhausPoster: StyleOption = {
|
||||
id: 'bauhaus-poster',
|
||||
name: 'Bauhaus Poster',
|
||||
category: 'Creative',
|
||||
description: 'Geometric minimalism. Primary colors, angled text, and strong diagonal compositions.',
|
||||
vibe: 'Artistic, Geometric, Modernist',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&family=Jost:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Josefin Sans", size: 36, color: "D50000", bold: true, align: 'right',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "000000", space: 8, style: "single", size: 36 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Jost", size: 16, color: "2962FF", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "FFEB3B", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Jost", size: 11, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D50000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Jost', sans-serif;
|
||||
h1 { font-family: 'Josefin Sans', sans-serif; font-size: 36pt; font-weight: 700; color: #D50000; text-align: right; border-bottom: 8px solid #000; padding-bottom: 10px; margin-bottom: 24px; text-transform: uppercase; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #2962FF; background: #FFEB3B; padding: 8px 16px; margin-top: 32px; margin-bottom: 16px; display: inline-block; transform: rotate(-1deg); }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border-left: 10px solid #D50000; padding-left: 20px; margin: 24px 0; font-style: italic; }
|
||||
`
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const blueprintCyanotype: StyleOption = {
|
||||
id: 'blueprint-cyanotype',
|
||||
name: 'Blueprint Cyanotype',
|
||||
category: 'Creative',
|
||||
description: 'Architectural blueprint style. White lines on a deep cyan blue background.',
|
||||
vibe: 'Technical, Blue, Schematic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Roboto+Mono:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Architects Daughter", size: 32, color: "FFFFFF", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "FFFFFF", space: 4, style: "single", size: 12 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Roboto Mono", size: 14, color: "FFFFFF", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Roboto Mono", size: 10, color: "E0F7FA", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FFFFFF"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
background: #0047AB; /* Cobalt/Blueprint Blue */
|
||||
color: #FFFFFF;
|
||||
h1 { font-family: 'Architects Daughter', cursive; font-size: 32pt; font-weight: 700; color: #FFFFFF; text-align: center; border-bottom: 2px solid #FFFFFF; margin-bottom: 24px; padding-bottom: 8px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #FFFFFF; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; border: 1px solid #FFF; display: inline-block; padding: 4px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #E0F7FA; margin-bottom: 14px; }
|
||||
blockquote { border: 1px dashed #FFFFFF; padding: 16px; margin: 24px 0; background: #003380; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const brickToy: StyleOption = {
|
||||
id: 'brick-toy',
|
||||
name: 'Brick Toy',
|
||||
category: 'Playful',
|
||||
description: 'Plastic building block aesthetic. Primary red, blue, and yellow with chunky text.',
|
||||
vibe: 'Playful, Primary, Chunky',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Titan+One&family=Nunito:wght@400;800&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Titan One", size: 36, color: "D32F2F", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "FFEB3B", color: "auto", style: "clear" } // Yellow background
|
||||
},
|
||||
heading2: {
|
||||
font: "Nunito", size: 18, color: "FFFFFF", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "1976D2", color: "auto", style: "clear" } // Blue background
|
||||
},
|
||||
body: {
|
||||
font: "Nunito", size: 12, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D32F2F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Nunito', sans-serif;
|
||||
h1 { font-family: 'Titan One', cursive; font-size: 36pt; color: #D32F2F; background: #FFEB3B; padding: 16px; border-radius: 8px; text-align: center; margin-bottom: 24px; border: 4px solid #D32F2F; }
|
||||
h2 { font-size: 18pt; font-weight: 800; color: #FFFFFF; background: #1976D2; padding: 8px 16px; border-radius: 4px; display: inline-block; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 12pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border: 4px dotted #D32F2F; padding: 16px; margin: 24px 0; background: #E3F2FD; }
|
||||
`
|
||||
};
|
||||
@@ -1,39 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const brutalistMono: StyleOption = {
|
||||
id: 'brutalist-mono',
|
||||
name: 'Brutalist Lab',
|
||||
category: 'Creative',
|
||||
description: 'Raw, monospaced aesthetic. Boxes, thick outlines, and typewriter vibes.',
|
||||
vibe: 'Code, Industrial, Raw',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Space Mono", size: 24, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: {
|
||||
top: { color: "000000", space: 12, style: "single", size: 24 },
|
||||
bottom: { color: "000000", space: 12, style: "single", size: 24 },
|
||||
left: { color: "000000", space: 12, style: "single", size: 24 },
|
||||
right: { color: "000000", space: 12, style: "single", size: 24 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Space Mono", size: 14, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "E0E0E0", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Space Mono", size: 10, color: "111111", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Space Mono', monospace;
|
||||
h1 { font-size: 24pt; font-weight: 700; color: #000000; border: 4px solid #000; padding: 16px; margin-bottom: 24px; text-transform: uppercase; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #000000; background: #E0E0E0; padding: 8px; margin-top: 32px; margin-bottom: 16px; display: inline-block; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #111111; margin-bottom: 14px; }
|
||||
blockquote { border-left: 6px solid #000; padding-left: 16px; margin: 24px 0; font-weight: 700; }
|
||||
`
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const glitchArt: StyleOption = {
|
||||
id: 'glitch-art',
|
||||
name: 'Glitch Art',
|
||||
category: 'Creative',
|
||||
description: 'Digital distortion aesthetic. Monospaced fonts with neon colors and "broken" styling.',
|
||||
vibe: 'Digital, Glitch, Cyber',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Rubik+Glitch&family=Share+Tech+Mono&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Rubik Glitch", size: 40, color: "D500F9", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "121212", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Share Tech Mono", size: 18, color: "00E5FF", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Share Tech Mono", size: 11, color: "BDBDBD", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 },
|
||||
shading: { fill: "000000", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "00E5FF"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
background: #000000;
|
||||
color: #BDBDBD;
|
||||
h1 { font-family: 'Rubik Glitch', cursive; font-size: 40pt; color: #D500F9; background: #121212; padding: 10px; margin-bottom: 24px; text-shadow: 2px 0 #00E5FF; }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #00E5FF; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 2px; }
|
||||
p { font-size: 11pt; line-height: 1.5; color: #BDBDBD; margin-bottom: 14px; }
|
||||
blockquote { border: 1px solid #D500F9; padding: 16px; margin: 24px 0; color: #D500F9; box-shadow: 4px 4px 0 #00E5FF; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const grunge90s: StyleOption = {
|
||||
id: 'grunge-90s',
|
||||
name: 'Grunge 90s',
|
||||
category: 'Creative',
|
||||
description: 'Distressed and edgy. David Carson inspired typography with overlapping elements and grit.',
|
||||
vibe: 'Dirty, Edgy, Chaotic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Special+Elite&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Permanent Marker", size: 36, color: "333333", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Special Elite", size: 18, color: "8B0000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
border: { bottom: { color: "000000", space: 4, style: "dashed", size: 12 } }
|
||||
},
|
||||
body: {
|
||||
font: "Special Elite", size: 11, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "8B0000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Special Elite', cursive;
|
||||
background-color: #F0F0F0;
|
||||
h1 { font-family: 'Permanent Marker', cursive; font-size: 36pt; color: #333333; text-align: center; margin-bottom: 24px; transform: rotate(1deg); opacity: 0.9; }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #8B0000; margin-top: 32px; margin-bottom: 16px; border-bottom: 2px dashed #000; display: inline-block; transform: skewX(-5deg); }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border: 3px solid #000; padding: 16px; margin: 24px 0; background: #D3D3D3; transform: rotate(-1deg); }
|
||||
`
|
||||
};
|
||||
@@ -1,30 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
import { bauhausPoster } from './bauhaus-poster';
|
||||
import { blueprintCyanotype } from './blueprint-cyanotype';
|
||||
import { brickToy } from './brick-toy';
|
||||
import { brutalistMono } from './brutalist-mono';
|
||||
import { glitchArt } from './glitch-art';
|
||||
import { grunge90s } from './grunge-90s';
|
||||
import { kindergartenArt } from './kindergarten-art';
|
||||
import { origamiPaper } from './origami-paper';
|
||||
import { popArtComic } from './pop-art-comic';
|
||||
import { risographPrint } from './risograph-print';
|
||||
import { streetArtGraffiti } from './street-art-graffiti';
|
||||
import { vaporwaveAesthetic } from './vaporwave-aesthetic';
|
||||
import { watercolorWash } from './watercolor-wash';
|
||||
|
||||
export const creativeStyles: StyleOption[] = [
|
||||
bauhausPoster,
|
||||
blueprintCyanotype,
|
||||
brickToy,
|
||||
brutalistMono,
|
||||
glitchArt,
|
||||
grunge90s,
|
||||
kindergartenArt,
|
||||
origamiPaper,
|
||||
popArtComic,
|
||||
risographPrint,
|
||||
streetArtGraffiti,
|
||||
vaporwaveAesthetic,
|
||||
watercolorWash
|
||||
];
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const kindergartenArt: StyleOption = {
|
||||
id: 'kindergarten-art',
|
||||
name: 'Kindergarten Art',
|
||||
category: 'Playful',
|
||||
description: 'Child-like crayon aesthetic. Primary colors, rounded fonts, and large friendly text.',
|
||||
vibe: 'Childish, Fun, Primary',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Chewy&family=Balsamiq+Sans:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Chewy", size: 40, color: "2962FF", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Balsamiq Sans", size: 18, color: "D50000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Balsamiq Sans", size: 14, color: "111111", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 320 }
|
||||
},
|
||||
accentColor: "FFD600"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Balsamiq Sans', cursive;
|
||||
h1 { font-family: 'Chewy', cursive; font-size: 40pt; color: #2962FF; text-align: center; margin-bottom: 24px; transform: rotate(-2deg); }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #D50000; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 14pt; line-height: 1.6; color: #111111; margin-bottom: 14px; }
|
||||
blockquote { border: 4px dashed #FFD600; padding: 20px; margin: 24px 0; border-radius: 20px; background: #FFFDE7; }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const origamiPaper: StyleOption = {
|
||||
id: 'origami-paper',
|
||||
name: 'Origami Paper',
|
||||
category: 'Creative',
|
||||
description: 'Folded paper aesthetic. Sharp angles, subtle shadows, and crisp typography.',
|
||||
vibe: 'Delicate, Sharp, Paper',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Cormorant+Unicase:wght@400;700&family=Muli:wght@300;400&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Cormorant Unicase", size: 32, color: "37474F", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Cormorant Unicase", size: 16, color: "546E7A", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Muli", size: 10, color: "455A64", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "37474F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Muli', sans-serif;
|
||||
background: #FAFAFA;
|
||||
h1 { font-family: 'Cormorant Unicase', serif; font-size: 32pt; font-weight: 700; color: #37474F; text-align: center; margin-bottom: 24px; text-shadow: 1px 1px 0 #CCC; }
|
||||
h2 { font-family: 'Cormorant Unicase', serif; font-size: 16pt; color: #546E7A; margin-top: 32px; margin-bottom: 16px; border-bottom: 1px solid #CFD8DC; display: inline-block; padding-bottom: 4px; }
|
||||
p { font-size: 10pt; line-height: 1.7; color: #455A64; margin-bottom: 14px; }
|
||||
blockquote { background: #FFF; padding: 20px; border: 1px solid #ECEFF1; box-shadow: 2px 2px 5px rgba(0,0,0,0.05); margin: 24px 0; transform: rotate(1deg); }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const popArtComic: StyleOption = {
|
||||
id: 'pop-art-comic',
|
||||
name: 'Pop Art Comic',
|
||||
category: 'Creative',
|
||||
description: 'Roy Lichtenstein inspired. Bold black outlines, halftone vibes, and primary colors.',
|
||||
vibe: 'Comic, Bold, Pop',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Bangers", size: 42, color: "000000", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "FFFF00", color: "auto", style: "clear" } // Yellow back
|
||||
},
|
||||
heading2: {
|
||||
font: "Bangers", size: 24, color: "FFFFFF", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "FF0000", color: "auto", style: "clear" } // Red back
|
||||
},
|
||||
body: {
|
||||
font: "Comic Neue", size: 12, color: "000000", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Comic Neue', sans-serif;
|
||||
h1 { font-family: 'Bangers', cursive; font-size: 42pt; color: #000000; background: #FFFF00; padding: 10px; border: 4px solid #000; box-shadow: 5px 5px 0 #000; margin-bottom: 24px; display: inline-block; }
|
||||
h2 { font-family: 'Bangers', cursive; font-size: 24pt; color: #FFFFFF; background: #FF0000; padding: 5px 15px; border: 3px solid #000; margin-top: 32px; margin-bottom: 16px; display: inline-block; transform: rotate(-2deg); }
|
||||
p { font-size: 12pt; line-height: 1.5; color: #000000; margin-bottom: 14px; font-weight: 700; }
|
||||
blockquote { background: #FFFFFF; border: 3px solid #000; padding: 20px; border-radius: 50% / 20%; margin: 24px 0; text-align: center; }
|
||||
`
|
||||
};
|
||||
@@ -1,35 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const risographPrint: StyleOption = {
|
||||
id: 'risograph-print',
|
||||
name: 'Risograph Print',
|
||||
category: 'Creative',
|
||||
description: 'Independent publishing style. Grainy textures, misalignment, and vibrant spot colors (Pink/Teal).',
|
||||
vibe: 'Artistic, Indie, Textured',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Eb+Garamond:ital,wght@0,400;0,700;1,400&family=Karla:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Eb Garamond", size: 42, color: "FF007F", bold: true, align: 'left', // Riso Pink
|
||||
spacing: { before: 400, after: 200, line: 200 },
|
||||
italic: true
|
||||
},
|
||||
heading2: {
|
||||
font: "Karla", size: 14, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "00A9FF", color: "auto", style: "clear" } // Riso Blue background
|
||||
},
|
||||
body: {
|
||||
font: "Karla", size: 10, color: "1A1A1A", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FF007F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Karla', sans-serif;
|
||||
background: #FFFEF0;
|
||||
h1 { font-family: 'Eb Garamond', serif; font-size: 42pt; font-weight: 700; font-style: italic; color: #FF007F; margin-bottom: 24px; mix-blend-mode: multiply; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #000000; background: #00A9FF; display: inline-block; padding: 4px 10px; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #1A1A1A; margin-bottom: 14px; }
|
||||
blockquote { border-left: 6px solid #FF007F; padding-left: 16px; margin: 24px 0; color: #555; font-style: italic; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const streetArtGraffiti: StyleOption = {
|
||||
id: 'street-art-graffiti',
|
||||
name: 'Street Art Graffiti',
|
||||
category: 'Creative',
|
||||
description: 'Urban street style. Spray paint fonts, dripping effects, and concrete vibes.',
|
||||
vibe: 'Urban, Rebel, Spray',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Rock+Salt&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Permanent Marker", size: 48, color: "000000", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "FFFF00", color: "auto", style: "clear" } // Hazard Yellow
|
||||
},
|
||||
heading2: {
|
||||
font: "Rock Salt", size: 18, color: "FF0000", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Permanent Marker", size: 12, color: "333333", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Permanent Marker', cursive;
|
||||
background: #F0F0F0;
|
||||
h1 { font-size: 48pt; color: #000000; text-align: center; background: #FFFF00; padding: 10px; transform: rotate(-2deg); margin-bottom: 24px; box-shadow: 4px 4px 0 #000; }
|
||||
h2 { font-family: 'Rock Salt', cursive; font-size: 18pt; color: #FF0000; margin-top: 32px; margin-bottom: 16px; transform: rotate(1deg); }
|
||||
p { font-size: 12pt; line-height: 1.6; color: #333333; margin-bottom: 14px; }
|
||||
blockquote { border-left: 5px solid #000; padding-left: 16px; margin: 24px 0; font-family: 'Rock Salt', cursive; font-size: 10pt; }
|
||||
`
|
||||
};
|
||||
@@ -1,35 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const vaporwaveAesthetic: StyleOption = {
|
||||
id: 'vaporwave-aesthetic',
|
||||
name: 'Vaporwave Aesthetic',
|
||||
category: 'Creative',
|
||||
description: 'Nostalgic 80s/90s internet culture. Pink and cyan gradients, wide tracking, and ironic luxury.',
|
||||
vibe: 'Nostalgic, Digital, Surreal',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Varela+Round&family=Montserrat:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Montserrat", size: 32, color: "FF71CE", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
allCaps: true,
|
||||
tracking: 100 // Wide spacing
|
||||
},
|
||||
heading2: {
|
||||
font: "Varela Round", size: 16, color: "01CDFE", bold: false, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Montserrat", size: 10, color: "B967FF", align: 'center',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "01CDFE"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
background: #F0F0FF;
|
||||
h1 { font-size: 32pt; font-weight: 700; color: #FF71CE; text-align: center; margin-bottom: 24px; letter-spacing: 4px; text-shadow: 2px 2px #01CDFE; text-transform: uppercase; }
|
||||
h2 { font-family: 'Varela Round', sans-serif; font-size: 16pt; color: #01CDFE; text-align: center; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #B967FF; margin-bottom: 14px; text-align: center; }
|
||||
blockquote { border: 2px solid #FF71CE; padding: 16px; margin: 24px 0; background: #E0FFFF; color: #01CDFE; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const watercolorWash: StyleOption = {
|
||||
id: 'watercolor-wash',
|
||||
name: 'Watercolor Wash',
|
||||
category: 'Creative',
|
||||
description: 'Artistic and fluid. Soft blended colors and painterly fonts.',
|
||||
vibe: 'Artistic, Soft, Fluid',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Amatic+SC:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Kalam", size: 36, color: "7986CB", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Amatic SC", size: 24, color: "4DB6AC", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Kalam", size: 12, color: "616161", align: 'center',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "7986CB"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Kalam', cursive;
|
||||
h1 { font-size: 36pt; font-weight: 700; color: #7986CB; text-align: center; margin-bottom: 24px; text-shadow: 2px 2px 4px rgba(121, 134, 203, 0.3); }
|
||||
h2 { font-family: 'Amatic SC', cursive; font-size: 24pt; font-weight: 700; color: #4DB6AC; text-align: center; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 12pt; line-height: 1.6; color: #616161; margin-bottom: 14px; text-align: center; }
|
||||
blockquote { border: 2px solid #E0F2F1; background: #E8EAF6; padding: 20px; border-radius: 50% 20% / 10% 40%; margin: 24px 0; text-align: center; }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const artNouveauOrganic: StyleOption = {
|
||||
id: 'art-nouveau-organic',
|
||||
name: 'Art Nouveau Organic',
|
||||
category: 'Classic',
|
||||
description: 'Inspired by the Art Nouveau movement (1890-1910). Flowing organic lines with nature-inspired elegance and whiplash curves.',
|
||||
vibe: 'Organic, Flowing, Decorative',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:wght@400&family=Fanwood+Text:wght@400&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Sorts Mill Goudy", size: 32, color: "4A5D23", bold: false, align: 'center',
|
||||
spacing: { before: 480, after: 280, line: 240 },
|
||||
border: { bottom: { color: "8FA876", space: 10, style: "single", size: 8 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Sorts Mill Goudy", size: 16, color: "6B7F4A", bold: false, align: 'left',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Fanwood Text", size: 11, color: "3D4A2D", align: 'both',
|
||||
spacing: { before: 0, after: 180, line: 320 }
|
||||
},
|
||||
accentColor: "8FA876"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Fanwood Text', serif;
|
||||
h1 { font-family: 'Sorts Mill Goudy', serif; font-size: 32pt; color: #4A5D23; text-align: center; border-bottom: 2px solid #8FA876; padding-bottom: 16px; margin-bottom: 32px; }
|
||||
h2 { font-family: 'Sorts Mill Goudy', serif; font-size: 16pt; color: #6B7F4A; margin-top: 36px; margin-bottom: 18px; font-style: italic; }
|
||||
p { font-size: 11pt; line-height: 1.8; color: #3D4A2D; margin-bottom: 16px; text-align: justify; }
|
||||
blockquote { background: #F4F7F0; padding: 20px; border-left: 3px solid #8FA876; margin: 28px 0; font-style: italic; }
|
||||
`
|
||||
};
|
||||
@@ -1,35 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const artsCraftsHeritage: StyleOption = {
|
||||
id: 'arts-crafts-heritage',
|
||||
name: 'Arts & Crafts Heritage',
|
||||
category: 'Classic',
|
||||
description: 'Inspired by William Morris and the Arts & Crafts movement (1880s-1900). Emphasizes craftsmanship, natural forms, and medieval aesthetics with readable typography.',
|
||||
vibe: 'Artisan, Literary, Handcrafted',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=EB+Garamond:wght@400;500&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Cormorant Garamond", size: 28, color: "2F4F4F", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 },
|
||||
border: {
|
||||
bottom: { color: "556B2F", space: 8, style: "single", size: 8 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Cormorant Garamond", size: 16, color: "556B2F", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "EB Garamond", size: 11, color: "3C3C3C", align: 'both',
|
||||
spacing: { before: 0, after: 160, line: 320 }
|
||||
},
|
||||
accentColor: "556B2F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'EB Garamond', serif;
|
||||
h1 { font-family: 'Cormorant Garamond', serif; font-size: 28pt; font-weight: 700; color: #2F4F4F; text-align: center; border-bottom: 2px solid #556B2F; padding-bottom: 16px; margin-bottom: 28px; }
|
||||
h2 { font-family: 'Cormorant Garamond', serif; font-size: 16pt; font-weight: 700; color: #556B2F; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 11pt; line-height: 1.8; color: #3C3C3C; margin-bottom: 14px; text-align: justify; }
|
||||
blockquote { background: #F5F5DC; padding: 20px; border-left: 4px solid #556B2F; margin: 24px 0; font-style: italic; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const baroqueSplendor: StyleOption = {
|
||||
id: 'baroque-splendor',
|
||||
name: 'Baroque Splendor',
|
||||
category: 'Classic',
|
||||
description: 'Heavy, dramatic 17th-century luxury. Deep golds and crimsons with deeply flourished script.',
|
||||
vibe: 'Luxurious, Dramatic, Heavy',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Mrs+Saint+Delafield&family=Mate:wght@400;500&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Mrs Saint Delafield", size: 48, color: "800000", bold: false, align: 'center',
|
||||
spacing: { before: 520, after: 320, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Mate", size: 16, color: "B8860B", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Mate", size: 12, color: "3D2B1F", align: 'both',
|
||||
spacing: { before: 0, after: 180, line: 320 }
|
||||
},
|
||||
accentColor: "B8860B"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Mate', serif;
|
||||
h1 { font-family: 'Mrs Saint Delafield', cursive; font-size: 48pt; color: #800000; text-align: center; margin-bottom: 36px; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #B8860B; text-align: center; margin-top: 40px; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2px; }
|
||||
p { font-size: 12pt; line-height: 1.8; color: #3D2B1F; margin-bottom: 16px; text-align: justify; }
|
||||
blockquote { background: #FFF8E7; border: 2px double #B8860B; padding: 24px; margin: 32px 0; text-align: center; font-style: italic; }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const cottagecoreJournal: StyleOption = {
|
||||
id: 'cottagecore-journal',
|
||||
name: 'Cottagecore Journal',
|
||||
category: 'Aesthetic',
|
||||
description: 'Whimsical countryside diary. Handwritten fonts with soft sage greens and earthy browns.',
|
||||
vibe: 'Whimsical, Nature, Handmade',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Patrick+Hand&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Amatic SC", size: 40, color: "33691E", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Patrick Hand", size: 18, color: "5D4037", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Patrick Hand", size: 14, color: "424242", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "33691E"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Patrick Hand', cursive;
|
||||
background: #F1F8E9;
|
||||
h1 { font-family: 'Amatic SC', cursive; font-size: 40pt; font-weight: 700; color: #33691E; text-align: center; margin-bottom: 24px; }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #5D4037; text-align: center; margin-top: 30px; margin-bottom: 14px; border-bottom: 1px dashed #8D6E63; display: inline-block; }
|
||||
p { font-size: 14pt; line-height: 1.6; color: #424242; margin-bottom: 14px; }
|
||||
blockquote { background: #FFF; border: 1px dotted #33691E; padding: 20px; border-radius: 10px; margin: 24px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const dutchGoldenAge: StyleOption = {
|
||||
id: 'dutch-golden-age',
|
||||
name: 'Dutch Golden Age',
|
||||
category: 'Classic',
|
||||
description: 'Inspired by 17th century Dutch art and typography. Rich, painterly aesthetics with Rembrandt-era elegance.',
|
||||
vibe: 'Classical, Rich, Painterly',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Pirata+One&family=Gentium+Book+Plus:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Pirata One", size: 32, color: "3E2723", bold: false, align: 'center',
|
||||
spacing: { before: 480, after: 280, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Gentium Book Plus", size: 14, color: "5D4037", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Gentium Book Plus", size: 11, color: "4E342E", align: 'both',
|
||||
spacing: { before: 0, after: 180, line: 320 }
|
||||
},
|
||||
accentColor: "BF8040"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Gentium Book Plus', serif;
|
||||
h1 { font-family: 'Pirata One', cursive; font-size: 32pt; color: #3E2723; text-align: center; margin-bottom: 32px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #5D4037; margin-top: 36px; margin-bottom: 18px; }
|
||||
p { font-size: 11pt; line-height: 1.8; color: #4E342E; margin-bottom: 16px; text-align: justify; }
|
||||
blockquote { background: #EFEBE9; padding: 20px; border: 1px solid #BF8040; margin: 28px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const fashionMagazine: StyleOption = {
|
||||
id: 'fashion-magazine',
|
||||
name: 'Fashion Magazine',
|
||||
category: 'Editorial',
|
||||
description: 'Trendy and bold. High-contrast typography with oversized lettering and pink accents.',
|
||||
vibe: 'Trendy, Loud, Pink',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Raleway:wght@300;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Abril Fatface", size: 48, color: "E91E63", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 200 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Raleway", size: 14, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true,
|
||||
tracking: 200
|
||||
},
|
||||
body: {
|
||||
font: "Raleway", size: 10, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "E91E63"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Raleway', sans-serif;
|
||||
h1 { font-family: 'Abril Fatface', cursive; font-size: 48pt; color: #E91E63; margin-bottom: 24px; line-height: 0.9; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #000000; text-transform: uppercase; letter-spacing: 4px; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #212121; margin-bottom: 14px; font-weight: 300; }
|
||||
blockquote { border-left: 10px solid #E91E63; padding-left: 20px; margin: 24px 0; font-family: 'Abril Fatface', cursive; font-size: 18pt; }
|
||||
`
|
||||
};
|
||||
@@ -1,35 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const filmScript: StyleOption = {
|
||||
id: 'film-script',
|
||||
name: 'Film Script',
|
||||
category: 'Editorial',
|
||||
description: 'Hollywood screenplay format. Courier font, specific margins, and character name centering.',
|
||||
vibe: 'Cinematic, Format, Draft',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Courier Prime", size: 12, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 240, after: 240, line: 240 },
|
||||
allCaps: true,
|
||||
underline: true
|
||||
},
|
||||
heading2: {
|
||||
font: "Courier Prime", size: 12, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 480, after: 0, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Courier Prime", size: 12, color: "000000", align: 'left',
|
||||
spacing: { before: 0, after: 0, line: 240 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Courier Prime', monospace;
|
||||
h1 { font-size: 12pt; font-weight: 700; color: #000000; text-decoration: underline; text-transform: uppercase; margin-bottom: 12px; }
|
||||
h2 { font-size: 12pt; font-weight: 700; color: #000000; text-transform: uppercase; text-align: center; margin-top: 24px; margin-bottom: 0px; }
|
||||
p { font-size: 12pt; line-height: 1; color: #000000; margin-bottom: 12px; }
|
||||
blockquote { margin: 0 40px; text-align: center; }
|
||||
`
|
||||
};
|
||||
@@ -1,38 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
import { artNouveauOrganic } from './art-nouveau-organic';
|
||||
import { artsCraftsHeritage } from './arts-crafts-heritage';
|
||||
import { baroqueSplendor } from './baroque-splendor';
|
||||
import { cottagecoreJournal } from './cottagecore-journal';
|
||||
import { dutchGoldenAge } from './dutch-golden-age';
|
||||
import { fashionMagazine } from './fashion-magazine';
|
||||
import { filmScript } from './film-script';
|
||||
import { indieZine } from './indie-zine';
|
||||
import { literaryReview } from './literary-review';
|
||||
import { luxuryEditorial } from './luxury-editorial';
|
||||
import { neoGothicRevival } from './neo-gothic-revival';
|
||||
import { newspaperClassic } from './newspaper-classic';
|
||||
import { newspaperModern } from './newspaper-modern';
|
||||
import { newspaperTabloid } from './newspaper-tabloid';
|
||||
import { nyEditor } from './ny-editor';
|
||||
import { rococoRomance } from './rococo-romance';
|
||||
import { victorianOrnate } from './victorian-ornate';
|
||||
|
||||
export const editorialStyles: StyleOption[] = [
|
||||
artNouveauOrganic,
|
||||
artsCraftsHeritage,
|
||||
baroqueSplendor,
|
||||
cottagecoreJournal,
|
||||
dutchGoldenAge,
|
||||
fashionMagazine,
|
||||
filmScript,
|
||||
indieZine,
|
||||
literaryReview,
|
||||
luxuryEditorial,
|
||||
neoGothicRevival,
|
||||
newspaperClassic,
|
||||
newspaperModern,
|
||||
newspaperTabloid,
|
||||
nyEditor,
|
||||
rococoRomance,
|
||||
victorianOrnate
|
||||
];
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const indieZine: StyleOption = {
|
||||
id: 'indie-zine',
|
||||
name: 'Indie Zine',
|
||||
category: 'Editorial',
|
||||
description: 'DIY photocopier aesthetic. Typewriter fonts, cut-out look, and rebellious asymmetry.',
|
||||
vibe: 'DIY, Rebellious, Rough',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Special+Elite&family=Rock+Salt&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Rock Salt", size: 28, color: "000000", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "D1C4E9", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Special Elite", size: 14, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
border: { bottom: { color: "000000", space: 4, style: "single", size: 12 } }
|
||||
},
|
||||
body: {
|
||||
font: "Special Elite", size: 10, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Special Elite', cursive;
|
||||
h1 { font-family: 'Rock Salt', cursive; font-size: 28pt; color: #000000; background: #D1C4E9; padding: 10px; transform: rotate(-2deg); margin-bottom: 24px; display: inline-block; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #000000; border-bottom: 2px solid #000; margin-top: 32px; margin-bottom: 16px; width: fit-content; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border: 2px dashed #000; padding: 16px; margin: 24px 0; transform: rotate(1deg); }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const literaryReview: StyleOption = {
|
||||
id: 'literary-review',
|
||||
name: 'Literary Review',
|
||||
category: 'Editorial',
|
||||
description: 'Classic bookish aesthetic. Dense serif text, elegant headers, perfect for long-form essays.',
|
||||
vibe: 'Intellectual, Dense, Classic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,700;1,400&family=Sorts+Mill+Goudy&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Crimson Pro", size: 30, color: "4A148C", bold: true, align: 'center',
|
||||
spacing: { before: 480, after: 280, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Crimson Pro", size: 14, color: "000000", bold: false, align: 'center',
|
||||
spacing: { before: 360, after: 180, line: 240 },
|
||||
smallCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Sorts Mill Goudy", size: 11, color: "212121", align: 'both',
|
||||
spacing: { before: 0, after: 160, line: 300 }
|
||||
},
|
||||
accentColor: "4A148C"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Sorts Mill Goudy', serif;
|
||||
h1 { font-family: 'Crimson Pro', serif; font-size: 30pt; font-weight: 700; color: #4A148C; text-align: center; margin-bottom: 32px; }
|
||||
h2 { font-family: 'Crimson Pro', serif; font-size: 14pt; color: #000000; text-align: center; margin-top: 36px; margin-bottom: 18px; font-variant: small-caps; }
|
||||
p { font-size: 11pt; line-height: 1.8; color: #212121; margin-bottom: 16px; text-align: justify; }
|
||||
blockquote { margin: 24px 40px; font-style: italic; color: #4A148C; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const luxuryEditorial: StyleOption = {
|
||||
id: 'luxury-editorial',
|
||||
name: 'Luxury Editorial',
|
||||
category: 'Editorial',
|
||||
description: 'High-fashion magazine inspired design. Elegant serifs with sophisticated spacing and premium feel for upscale content.',
|
||||
vibe: 'Fashion, Premium, Sophisticated',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;700&family=Montserrat:wght@300;400;500&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Cormorant", size: 36, color: "1C1C1C", bold: false, align: 'center',
|
||||
spacing: { before: 480, after: 280, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Montserrat", size: 11, color: "1C1C1C", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Montserrat", size: 10, color: "3A3A3A", align: 'left',
|
||||
spacing: { before: 0, after: 180, line: 300 }
|
||||
},
|
||||
accentColor: "B8860B"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
h1 { font-family: 'Cormorant', serif; font-size: 36pt; font-weight: 500; color: #1C1C1C; text-align: center; margin-bottom: 32px; letter-spacing: 2px; }
|
||||
h2 { font-size: 11pt; font-weight: 500; color: #1C1C1C; margin-top: 36px; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 3px; }
|
||||
p { font-size: 10pt; line-height: 1.7; color: #3A3A3A; margin-bottom: 16px; font-weight: 300; }
|
||||
blockquote { border-top: 1px solid #B8860B; border-bottom: 1px solid #B8860B; padding: 24px 0; margin: 32px 0; text-align: center; font-family: 'Cormorant', serif; font-size: 14pt; font-style: italic; }
|
||||
`
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const neoGothicRevival: StyleOption = {
|
||||
id: 'neo-gothic-revival',
|
||||
name: 'Neo-Gothic Revival',
|
||||
category: 'Classic',
|
||||
description: 'Inspired by Gothic architecture and medieval manuscripts. Dark, dramatic typography with ecclesiastical gravitas.',
|
||||
vibe: 'Medieval, Dramatic, Historic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Spectral:wght@400;500;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Cinzel Decorative", size: 28, color: "1A1A1A", bold: true, align: 'center',
|
||||
spacing: { before: 480, after: 280, line: 240 },
|
||||
border: {
|
||||
top: { color: "4A0E0E", space: 12, style: "single", size: 16 },
|
||||
bottom: { color: "4A0E0E", space: 12, style: "single", size: 16 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Cinzel Decorative", size: 14, color: "4A0E0E", bold: false, align: 'left',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Spectral", size: 11, color: "2C2C2C", align: 'both',
|
||||
spacing: { before: 0, after: 180, line: 320 }
|
||||
},
|
||||
accentColor: "4A0E0E"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Spectral', serif;
|
||||
h1 { font-family: 'Cinzel Decorative', cursive; font-size: 28pt; font-weight: 700; color: #1A1A1A; text-align: center; border-top: 3px solid #4A0E0E; border-bottom: 3px solid #4A0E0E; padding: 20px 0; margin-bottom: 32px; }
|
||||
h2 { font-family: 'Cinzel Decorative', cursive; font-size: 14pt; color: #4A0E0E; margin-top: 36px; margin-bottom: 18px; }
|
||||
p { font-size: 11pt; line-height: 1.8; color: #2C2C2C; margin-bottom: 16px; text-align: justify; }
|
||||
blockquote { background: #F5F5EB; padding: 20px; border-left: 4px solid #4A0E0E; margin: 28px 0; font-style: italic; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const newspaperClassic: StyleOption = {
|
||||
id: 'newspaper-classic',
|
||||
name: 'Newspaper Classic',
|
||||
category: 'Editorial',
|
||||
description: 'Traditional newspaper layout with strong typographic hierarchy. Bold headlines, readable body text, and authoritative presence.',
|
||||
vibe: 'News, Authority, Information',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=PT+Serif:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Playfair Display", size: 36, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 240, after: 160, line: 220 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Playfair Display", size: 16, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 240, after: 120, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "PT Serif", size: 10, color: "1A1A1A", align: 'both',
|
||||
spacing: { before: 0, after: 120, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'PT Serif', serif;
|
||||
h1 { font-family: 'Playfair Display', serif; font-size: 36pt; font-weight: 900; color: #000000; text-align: center; border-bottom: 2px solid #000000; padding-bottom: 12px; margin-bottom: 20px; }
|
||||
h2 { font-family: 'Playfair Display', serif; font-size: 16pt; font-weight: 700; color: #000000; margin-top: 24px; margin-bottom: 12px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #1A1A1A; margin-bottom: 10px; text-align: justify; }
|
||||
blockquote { font-size: 14pt; font-style: italic; text-align: center; margin: 24px 40px; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const newspaperModern: StyleOption = {
|
||||
id: 'newspaper-modern',
|
||||
name: 'Newspaper Modern',
|
||||
category: 'Editorial',
|
||||
description: 'Contemporary newspaper design balancing tradition with modern sensibilities. Clean grid-based layout.',
|
||||
vibe: 'Modern, Editorial, Informative',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "DM Serif Display", size: 36, color: "1A1A1A", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 200, line: 220 }
|
||||
},
|
||||
heading2: {
|
||||
font: "DM Sans", size: 12, color: "1A1A1A", bold: true, align: 'left',
|
||||
spacing: { before: 280, after: 140, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "DM Sans", size: 10, color: "333333", align: 'both',
|
||||
spacing: { before: 0, after: 140, line: 280 }
|
||||
},
|
||||
accentColor: "DC2626"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
h1 { font-family: 'DM Serif Display', serif; font-size: 36pt; color: #1A1A1A; margin-bottom: 24px; }
|
||||
h2 { font-size: 12pt; font-weight: 700; color: #1A1A1A; margin-top: 28px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #333333; margin-bottom: 12px; text-align: justify; }
|
||||
blockquote { font-size: 16pt; font-style: italic; font-family: 'DM Serif Display', serif; text-align: center; margin: 28px 20px; color: #DC2626; }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const newspaperTabloid: StyleOption = {
|
||||
id: 'newspaper-tabloid',
|
||||
name: 'Newspaper Tabloid',
|
||||
category: 'Editorial',
|
||||
description: 'Sensationalist news design. Condensed, heavy headers with urgent red accents.',
|
||||
vibe: 'Urgent, Bold, Sensational',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Antonio:wght@700&family=Pathway+Extreme:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Antonio", size: 42, color: "FFFFFF", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 200, line: 200 },
|
||||
shading: { fill: "D50000", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Antonio", size: 20, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 280, after: 140, line: 220 }
|
||||
},
|
||||
body: {
|
||||
font: "Pathway Extreme", size: 10, color: "111111", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D50000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Pathway Extreme', sans-serif;
|
||||
h1 { font-family: 'Antonio', sans-serif; font-size: 42pt; font-weight: 700; color: #FFFFFF; background: #D50000; padding: 12px 16px; margin-bottom: 24px; text-transform: uppercase; line-height: 1; }
|
||||
h2 { font-family: 'Antonio', sans-serif; font-size: 20pt; font-weight: 700; color: #000000; margin-top: 28px; margin-bottom: 14px; text-transform: uppercase; }
|
||||
p { font-size: 10pt; line-height: 1.5; color: #111111; margin-bottom: 14px; }
|
||||
blockquote { font-size: 14pt; font-weight: 700; font-style: italic; color: #000000; border-left: 6px solid #D50000; padding-left: 16px; margin: 24px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const nyEditor: StyleOption = {
|
||||
id: 'ny-editor',
|
||||
name: 'The Editorial',
|
||||
category: 'Editorial',
|
||||
description: 'High-contrast serifs, centered headers, delicate borders. Feels like a premium magazine feature.',
|
||||
vibe: 'Luxury, Fashion, Literature',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400;1,400&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Playfair Display", size: 36, color: "111111", bold: true, italic: true, align: 'center',
|
||||
spacing: { before: 600, after: 400, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Playfair Display", size: 14, color: "444444", bold: true, allCaps: true, tracking: 100, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "DDDDDD", space: 8, style: "single", size: 4 } }
|
||||
},
|
||||
body: {
|
||||
font: "Lora", size: 11, color: "333333", align: 'both',
|
||||
spacing: { before: 0, after: 200, line: 320 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Lora', serif;
|
||||
h1 { font-family: 'Playfair Display', serif; font-size: 36pt; font-weight: 700; font-style: italic; text-align: center; margin-bottom: 30px; }
|
||||
h2 { font-family: 'Playfair Display', serif; font-size: 14pt; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; text-align: center; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-top: 40px; color: #444; }
|
||||
p { font-size: 11pt; line-height: 1.8; text-align: justify; margin-bottom: 20px; }
|
||||
blockquote { font-family: 'Playfair Display', serif; font-size: 18pt; font-style: italic; text-align: center; color: #555; margin: 40px 20px; border: none; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const rococoRomance: StyleOption = {
|
||||
id: 'rococo-romance',
|
||||
name: 'Rococo Romance',
|
||||
category: 'Classic',
|
||||
description: 'Inspired by 18th-century Rococo. Light, playful, and intricate with pastel tones and swirling elegance.',
|
||||
vibe: 'Romantic, Ornate, Pastel',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Playfair+Display+SC:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Pinyon Script", size: 36, color: "D87093", bold: false, align: 'center',
|
||||
spacing: { before: 480, after: 280, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Playfair Display SC", size: 14, color: "C0A080", bold: true, align: 'center',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Playfair Display SC", size: 10, color: "555555", align: 'center',
|
||||
spacing: { before: 0, after: 180, line: 320 }
|
||||
},
|
||||
accentColor: "FFB6C1"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Playfair Display SC', serif;
|
||||
h1 { font-family: 'Pinyon Script', cursive; font-size: 36pt; color: #D87093; text-align: center; margin-bottom: 32px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #C0A080; text-align: center; margin-top: 36px; margin-bottom: 18px; letter-spacing: 2px; }
|
||||
p { font-size: 10pt; line-height: 1.8; color: #555555; margin-bottom: 16px; text-align: center; }
|
||||
blockquote { border: 1px solid #FFB6C1; padding: 20px; border-radius: 50% 50% 50% 50% / 10% 10% 10% 10%; margin: 28px 40px; text-align: center; }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const victorianOrnate: StyleOption = {
|
||||
id: 'victorian-ornate',
|
||||
name: 'Victorian Ornate',
|
||||
category: 'Classic',
|
||||
description: 'Inspired by the decorative exuberance of the Victorian era (1837-1901). Features rich typography with ornamental borders and jewel-tone accents.',
|
||||
vibe: 'Traditional, Formal, Heritage',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Crimson+Text:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Playfair Display", size: 26, color: "2C1810", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "8B4513", space: 8, style: "double", size: 12 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Playfair Display", size: 16, color: "5D3A1A", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Crimson Text", size: 11, color: "3D2914", align: 'both',
|
||||
spacing: { before: 0, after: 160, line: 320 }
|
||||
},
|
||||
accentColor: "8B4513"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Crimson Text', serif;
|
||||
h1 { font-family: 'Playfair Display', serif; font-size: 26pt; font-weight: 700; color: #2C1810; text-align: center; border-bottom: 4px double #8B4513; padding-bottom: 12px; margin-bottom: 24px; }
|
||||
h2 { font-family: 'Playfair Display', serif; font-size: 16pt; font-weight: 700; color: #5D3A1A; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 11pt; line-height: 1.8; color: #3D2914; margin-bottom: 14px; text-align: justify; }
|
||||
blockquote { background: #FDF5E6; padding: 20px; border: 1px solid #D4A574; color: #5D3A1A; margin: 24px 0; font-style: italic; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const automotiveBold: StyleOption = {
|
||||
id: 'automotive-bold',
|
||||
name: 'Automotive Bold',
|
||||
category: 'Automotive',
|
||||
description: 'Powerful design for automotive and motorsport industries. Bold typography with dynamic energy and speed.',
|
||||
vibe: 'Powerful, Dynamic, Bold',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Teko:wght@400;500;700&family=Barlow:wght@400;500;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Teko", size: 40, color: "B71C1C", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 200, line: 200 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Teko", size: 20, color: "212121", bold: true, align: 'left',
|
||||
spacing: { before: 280, after: 140, line: 220 }
|
||||
},
|
||||
body: {
|
||||
font: "Barlow", size: 10, color: "37474F", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "B71C1C"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Barlow', sans-serif;
|
||||
h1 { font-family: 'Teko', sans-serif; font-size: 40pt; font-weight: 700; color: #B71C1C; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 2px; }
|
||||
h2 { font-family: 'Teko', sans-serif; font-size: 20pt; font-weight: 500; color: #212121; margin-top: 28px; margin-bottom: 14px; text-transform: uppercase; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #37474F; margin-bottom: 14px; }
|
||||
blockquote { background: #FFEBEE; padding: 16px; border-left: 6px solid #B71C1C; margin: 20px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const constructionIndustrial: StyleOption = {
|
||||
id: 'construction-industrial',
|
||||
name: 'Construction Industrial',
|
||||
category: 'Industrial',
|
||||
description: 'Bold and sturdy design for construction and industrial companies. Strong typography with safety-inspired colors.',
|
||||
vibe: 'Strong, Industrial, Professional',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&family=Roboto:wght@400;500&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Oswald", size: 28, color: "212121", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "FFC107", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Oswald", size: 16, color: "FF8F00", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Roboto", size: 10, color: "37474F", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FF8F00"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Roboto', sans-serif;
|
||||
h1 { font-family: 'Oswald', sans-serif; font-size: 28pt; font-weight: 700; color: #212121; background: #FFC107; padding: 16px 20px; margin-bottom: 24px; text-transform: uppercase; }
|
||||
h2 { font-family: 'Oswald', sans-serif; font-size: 16pt; font-weight: 700; color: #FF8F00; margin-top: 30px; margin-bottom: 14px; text-transform: uppercase; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #37474F; margin-bottom: 14px; }
|
||||
blockquote { background: #FFF8E1; padding: 16px; border-left: 6px solid #FF8F00; margin: 20px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const electricVehicle: StyleOption = {
|
||||
id: 'electric-vehicle',
|
||||
name: 'Electric Vehicle',
|
||||
category: 'Automotive',
|
||||
description: 'Sustainable tech design for electric vehicle and clean energy content. Eco-modern with electric accents.',
|
||||
vibe: 'Sustainable, Modern, Electric',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Electrolize&family=Mulish:wght@400;600;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Electrolize", size: 28, color: "10B981", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Mulish", size: 14, color: "1E293B", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Mulish", size: 10, color: "475569", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "10B981"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Mulish', sans-serif;
|
||||
h1 { font-family: 'Electrolize', sans-serif; font-size: 28pt; color: #10B981; margin-bottom: 24px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #1E293B; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #475569; margin-bottom: 14px; }
|
||||
blockquote { background: #ECFDF5; padding: 16px; border-left: 4px solid #10B981; margin: 20px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,18 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
import { constructionIndustrial } from './construction-industrial';
|
||||
import { automotiveBold } from './automotive-bold';
|
||||
import { electricVehicle } from './electric-vehicle';
|
||||
import { tacticalMilitary } from './tactical-military';
|
||||
import { logisticsFreight } from './logistics-freight';
|
||||
import { industrialSafety } from './industrial-safety';
|
||||
import { nightVision } from './night-vision';
|
||||
|
||||
export const industrialStyles: StyleOption[] = [
|
||||
constructionIndustrial,
|
||||
automotiveBold,
|
||||
electricVehicle,
|
||||
tacticalMilitary,
|
||||
logisticsFreight,
|
||||
industrialSafety,
|
||||
nightVision
|
||||
];
|
||||
@@ -1,35 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const industrialSafety: StyleOption = {
|
||||
id: 'industrial-safety',
|
||||
name: 'Industrial Safety',
|
||||
category: 'Industrial',
|
||||
description: 'Construction site signage. Heavy blacks and yellow caution stripes.',
|
||||
vibe: 'Safety, Bold, Construction',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Anton&family=Roboto:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Anton", size: 48, color: "000000", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "FFD600", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Roboto", size: 16, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
border: { bottom: { color: "000000", space: 4, style: "thick", size: 24 } },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Roboto", size: 11, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FFD600"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Roboto', sans-serif;
|
||||
h1 { font-family: 'Anton', sans-serif; font-size: 48pt; color: #000000; background: repeating-linear-gradient(45deg, #FFD600, #FFD600 10px, #FFC400 10px, #FFC400 20px); text-align: center; padding: 20px; margin-bottom: 24px; text-transform: uppercase; border: 4px solid #000; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #000000; margin-top: 32px; margin-bottom: 16px; border-bottom: 4px solid #000; text-transform: uppercase; }
|
||||
p { font-size: 11pt; line-height: 1.5; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border: 2px solid #000; background: #FFF9C4; padding: 16px; margin: 24px 0; font-weight: 700; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const logisticsFreight: StyleOption = {
|
||||
id: 'logistics-freight',
|
||||
name: 'Logistics Freight',
|
||||
category: 'Industrial',
|
||||
description: 'Shipping and cargo aesthetic. Stenciled, heavy typography with industrial orange and slate blue.',
|
||||
vibe: 'Industrial, Heavy, Shipping',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Saira+Stencil+One&family=Saira:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Saira Stencil One", size: 36, color: "E65100", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Saira", size: 16, color: "263238", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Saira", size: 10, color: "455A64", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "E65100"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Saira', sans-serif;
|
||||
h1 { font-family: 'Saira Stencil One', sans-serif; font-size: 36pt; color: #E65100; margin-bottom: 24px; }
|
||||
h2 { font-size: 16pt; font-weight: 600; color: #263238; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
|
||||
p { font-size: 10pt; line-height: 1.5; color: #455A64; margin-bottom: 14px; }
|
||||
blockquote { background: #FFF3E0; padding: 16px; border-left: 8px solid #263238; margin: 20px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const nightVision: StyleOption = {
|
||||
id: 'night-vision',
|
||||
name: 'Night Vision',
|
||||
category: 'Tactical',
|
||||
description: 'Military optics style. Grainy bright greens on dark green background.',
|
||||
vibe: 'Tactical, Green, Grainy',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Wallpoet&family=Roboto+Mono:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Wallpoet", size: 32, color: "76FF03", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 },
|
||||
shading: { fill: "1B5E20", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Roboto Mono", size: 16, color: "CCFF90", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
border: { bottom: { color: "76FF03", space: 4, style: "dotted", size: 12 } }
|
||||
},
|
||||
body: {
|
||||
font: "Roboto Mono", size: 10, color: "B2FF59", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 },
|
||||
shading: { fill: "000000", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "76FF03"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
background: #000000;
|
||||
h1 { font-family: 'Wallpoet', cursive; font-size: 32pt; color: #76FF03; background: #1B5E20; padding: 16px; text-align: center; margin-bottom: 24px; text-shadow: 0 0 10px #76FF03; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #CCFF90; margin-top: 32px; margin-bottom: 16px; border-bottom: 2px dotted #76FF03; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #B2FF59; margin-bottom: 14px; }
|
||||
blockquote { border-left: 4px solid #76FF03; padding-left: 16px; margin: 24px 0; color: #64DD17; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const tacticalMilitary: StyleOption = {
|
||||
id: 'tactical-military',
|
||||
name: 'Tactical Military',
|
||||
category: 'Industrial',
|
||||
description: 'Military-spec aesthetic. Stencil typography with olive drab and technical readouts.',
|
||||
vibe: 'Tactical, Sturdy, Regulated',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Quantico:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Allerta Stencil", size: 28, color: "33691E", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "558B2F", space: 6, style: "single", size: 16 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Quantico", size: 14, color: "558B2F", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Quantico", size: 10, color: "1B1B1B", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "33691E"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Quantico', sans-serif;
|
||||
background: #F1F8E9;
|
||||
h1 { font-family: 'Allerta Stencil', sans-serif; font-size: 28pt; color: #33691E; border-bottom: 4px solid #558B2F; padding-bottom: 12px; margin-bottom: 24px; text-transform: uppercase; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #558B2F; margin-top: 30px; margin-bottom: 14px; text-transform: uppercase; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #1B1B1B; margin-bottom: 14px; }
|
||||
blockquote { border: 2px solid #33691E; padding: 16px; margin: 20px 0; background: #DCEDC8; font-family: 'Quantico', sans-serif; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const aviationClassic: StyleOption = {
|
||||
id: 'aviation-classic',
|
||||
name: 'Aviation Classic',
|
||||
category: 'Transport',
|
||||
description: 'Vintage aviation inspired design. Classic military typography with heritage color palette.',
|
||||
vibe: 'Heritage, Classic, Aviation',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Stencil&family=Public+Sans:wght@400;500;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Stencil", size: 28, color: "1B4D3E", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Public Sans", size: 13, color: "8B0000", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Public Sans", size: 10, color: "363636", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "8B0000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Public Sans', sans-serif;
|
||||
h1 { font-family: 'Stencil', sans-serif; font-size: 28pt; color: #1B4D3E; margin-bottom: 24px; letter-spacing: 3px; }
|
||||
h2 { font-size: 13pt; font-weight: 600; color: #8B0000; margin-top: 30px; margin-bottom: 14px; text-transform: uppercase; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #363636; margin-bottom: 14px; }
|
||||
blockquote { background: #F5F5DC; padding: 16px; border-left: 4px solid #1B4D3E; margin: 20px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const bistroChalkboard: StyleOption = {
|
||||
id: 'bistro-chalkboard',
|
||||
name: 'Bistro Chalkboard',
|
||||
category: 'Food',
|
||||
description: 'French cafe menu. White chalk text on slate black.',
|
||||
vibe: 'French, Food, Chalk',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Homemade+Apple&family=Caveat:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Homemade Apple", size: 32, color: "FFFFFF", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "212121", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Caveat", size: 20, color: "E0E0E0", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Caveat", size: 14, color: "BDBDBD", align: 'center',
|
||||
spacing: { before: 0, after: 160, line: 280 },
|
||||
shading: { fill: "263238", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "FFFFFF"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Caveat', cursive;
|
||||
background: #212121;
|
||||
color: #FFFFFF;
|
||||
h1 { font-family: 'Homemade Apple', cursive; font-size: 32pt; color: #FFFFFF; text-align: center; margin-bottom: 24px; border-bottom: 1px solid #757575; padding-bottom: 12px; }
|
||||
h2 { font-size: 20pt; font-weight: 700; color: #E0E0E0; text-align: center; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 14pt; line-height: 1.5; color: #BDBDBD; margin-bottom: 14px; text-align: center; }
|
||||
blockquote { border: 1px dashed #FFFFFF; padding: 16px; margin: 24px 0; font-style: italic; text-align: center; }
|
||||
`
|
||||
};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user