feat: Transform to Tauri desktop app
- Initialize Tauri v2 project with Rust backend - Restructure project: move source files to src/ directory - Add Tauri configuration for Windows, macOS, and Linux builds - Update Vite config for Tauri development workflow - Add file system and dialog permissions for native features - Update package.json with desktop build scripts - Update tsconfig.json paths for new src structure - Add Tauri and desktop badges to README - Document desktop build process and architecture
This commit is contained in:
TypoGenie
354
src/styles/minimalist.ts
Normal file
354
src/styles/minimalist.ts
Normal file
@@ -0,0 +1,354 @@
|
||||
import { StyleOption } from '../types';
|
||||
|
||||
export const minimalistStyles: StyleOption[] = [
|
||||
{
|
||||
id: 'swiss-grid',
|
||||
name: 'Swiss International',
|
||||
category: 'Minimalist',
|
||||
description: 'Objective, bold, and asymmetric. Heavy use of black and white, strong grid alignment.',
|
||||
vibe: 'Architecture, Design, Modernism',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Inter", size: 42, color: "000000", bold: true, tracking: -40, align: 'left',
|
||||
spacing: { before: 800, after: 400, line: 240 },
|
||||
border: { top: { color: "000000", space: 24, style: "single", size: 36 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Inter", size: 16, color: "000000", bold: true, allCaps: true, tracking: 40, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Inter", size: 10, color: "111111", align: 'left',
|
||||
spacing: { before: 0, after: 200, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Inter', sans-serif;
|
||||
h1 { font-size: 42pt; font-weight: 900; letter-spacing: -2px; border-top: 6px solid black; padding-top: 24px; margin-bottom: 24px; line-height: 1; }
|
||||
h2 { font-size: 16pt; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-top: 40px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.5; margin-bottom: 16px; max-width: 65ch; }
|
||||
blockquote { border-left: 4px solid black; padding-left: 20px; font-weight: 700; font-style: normal; margin-left: 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'minimalist-white',
|
||||
name: 'Minimalist White',
|
||||
category: 'Minimal',
|
||||
description: 'Ultra-clean design with maximum white space. Less is more philosophy with restrained typography that lets content breathe.',
|
||||
vibe: 'Clean, Modern, Sophisticated',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Work Sans", size: 32, color: "111111", bold: false, align: 'left',
|
||||
spacing: { before: 600, after: 300, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Work Sans", size: 14, color: "444444", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Work Sans", size: 10, color: "555555", align: 'left',
|
||||
spacing: { before: 0, after: 200, line: 320 }
|
||||
},
|
||||
accentColor: "111111"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
h1 { font-size: 32pt; font-weight: 300; color: #111111; margin-bottom: 32px; letter-spacing: -1px; }
|
||||
h2 { font-size: 14pt; font-weight: 600; color: #444444; margin-top: 40px; margin-bottom: 20px; }
|
||||
p { font-size: 10pt; line-height: 1.8; color: #555555; margin-bottom: 18px; }
|
||||
blockquote { border-left: 1px solid #DDDDDD; padding-left: 24px; margin: 32px 0; color: #666666; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'scandinavian-clean',
|
||||
name: 'Scandinavian Clean',
|
||||
category: 'Minimal',
|
||||
description: 'Inspired by Nordic design principles. Clean lines, functional typography, and subtle warmth with muted colors.',
|
||||
vibe: 'Nordic, Clean, Warm Minimal',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Poppins", size: 28, color: "2C2C2C", bold: false, align: 'left',
|
||||
spacing: { before: 480, after: 240, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Poppins", size: 14, color: "5D5D5D", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Poppins", size: 10, color: "4A4A4A", align: 'left',
|
||||
spacing: { before: 0, after: 180, line: 300 }
|
||||
},
|
||||
accentColor: "E07A5F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Poppins', sans-serif;
|
||||
h1 { font-size: 28pt; font-weight: 300; color: #2C2C2C; margin-bottom: 28px; }
|
||||
h2 { font-size: 14pt; font-weight: 600; color: #5D5D5D; margin-top: 36px; margin-bottom: 18px; }
|
||||
p { font-size: 10pt; line-height: 1.7; color: #4A4A4A; margin-bottom: 16px; font-weight: 300; }
|
||||
blockquote { border-left: 3px solid #E07A5F; padding-left: 20px; margin: 28px 0; color: #666666; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'minimalist-black',
|
||||
name: 'Minimalist Black',
|
||||
category: 'Minimal',
|
||||
description: 'Ultra-minimal dark design with stark contrasts. High-impact typography on dark backgrounds.',
|
||||
vibe: 'Dark, Minimal, Bold',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Work+Sans:wght@300;400;500&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Bebas Neue", size: 48, color: "FFFFFF", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 200 },
|
||||
shading: { fill: "0A0A0A", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Work Sans", size: 12, color: "FFFFFF", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "1A1A1A", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Work Sans", size: 10, color: "E0E0E0", align: 'left',
|
||||
spacing: { before: 0, after: 180, line: 300 },
|
||||
shading: { fill: "121212", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "FFFFFF"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
background: #0A0A0A;
|
||||
h1 { font-family: 'Bebas Neue', sans-serif; font-size: 48pt; color: #FFFFFF; background: #0A0A0A; padding: 16px 20px; margin-bottom: 24px; letter-spacing: 3px; }
|
||||
h2 { font-size: 12pt; color: #FFFFFF; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 4px; font-weight: 300; }
|
||||
p { font-size: 10pt; line-height: 1.7; color: #E0E0E0; margin-bottom: 16px; font-weight: 300; }
|
||||
blockquote { border-left: 1px solid #FFFFFF; padding-left: 24px; margin: 28px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'japanese-zen',
|
||||
name: 'Japanese Zen',
|
||||
category: 'Minimal',
|
||||
description: 'Inspired by Japanese minimalism and wabi-sabi aesthetics. Peaceful typography with intentional asymmetry.',
|
||||
vibe: 'Zen, Peaceful, Minimal',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;600;700&family=Zen+Kaku+Gothic+New:wght@300;400;500&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Shippori Mincho", size: 28, color: "2D2D2D", bold: false, align: 'left',
|
||||
spacing: { before: 560, after: 320, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Zen Kaku Gothic New", size: 12, color: "5C5C5C", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Zen Kaku Gothic New", size: 10, color: "4A4A4A", align: 'left',
|
||||
spacing: { before: 0, after: 200, line: 320 }
|
||||
},
|
||||
accentColor: "C41E3A"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Zen Kaku Gothic New', sans-serif;
|
||||
h1 { font-family: 'Shippori Mincho', serif; font-size: 28pt; color: #2D2D2D; margin-bottom: 36px; }
|
||||
h2 { font-size: 12pt; color: #5C5C5C; margin-top: 40px; margin-bottom: 20px; font-weight: 300; letter-spacing: 2px; }
|
||||
p { font-size: 10pt; line-height: 1.8; color: #4A4A4A; margin-bottom: 18px; font-weight: 300; }
|
||||
blockquote { border-left: 2px solid #C41E3A; padding-left: 24px; margin: 36px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'zen-garden',
|
||||
name: 'Zen Garden',
|
||||
category: 'Minimal',
|
||||
description: 'Inspired by Japanese rock gardens. Extreme minimalism with meditative spacing and natural balance.',
|
||||
vibe: 'Meditative, Balanced, Serene',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&family=Noto+Sans+JP:wght@300;400&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Noto Serif JP", size: 26, color: "2C2C2C", bold: false, align: 'left',
|
||||
spacing: { before: 600, after: 360, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Noto Sans JP", size: 11, color: "5C5C5C", bold: false, align: 'left',
|
||||
spacing: { before: 480, after: 240, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Noto Sans JP", size: 10, color: "4A4A4A", align: 'left',
|
||||
spacing: { before: 0, after: 240, line: 360 }
|
||||
},
|
||||
accentColor: "6B8E6B"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
h1 { font-family: 'Noto Serif JP', serif; font-size: 26pt; font-weight: 600; color: #2C2C2C; margin-bottom: 40px; }
|
||||
h2 { font-size: 11pt; color: #5C5C5C; margin-top: 48px; margin-bottom: 24px; font-weight: 300; letter-spacing: 2px; }
|
||||
p { font-size: 10pt; line-height: 2; color: #4A4A4A; margin-bottom: 20px; font-weight: 300; }
|
||||
blockquote { border-left: 1px solid #6B8E6B; padding-left: 32px; margin: 40px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'de-stijl',
|
||||
name: 'De Stijl',
|
||||
category: 'Modern',
|
||||
description: 'Inspired by the Dutch movement (Mondrian). Primary colors, thick black lines, and rigid grid geometry.',
|
||||
vibe: 'Abstract, Geometric, Primary',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Geo:wght@400&family=Arimo:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Geo", size: 32, color: "FF0000", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: {
|
||||
bottom: { color: "000000", space: 12, style: "single", size: 24 },
|
||||
left: { color: "000000", space: 12, style: "single", size: 24 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Arimo", size: 14, color: "0000FF", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "FFFF00", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Arimo", size: 10, color: "000000", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FF0000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Arimo', sans-serif;
|
||||
h1 { font-family: 'Geo', sans-serif; font-size: 32pt; color: #FF0000; border-bottom: 4px solid #000000; border-left: 4px solid #000000; padding-left: 16px; margin-bottom: 24px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #0000FF; background: #FFFF00; display: inline-block; padding: 4px 12px; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #000000; margin-bottom: 14px; }
|
||||
blockquote { border: 4px solid #000000; padding: 16px; margin: 24px 0; box-shadow: 8px 8px 0px #0000FF; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'bauhaus-construction',
|
||||
name: 'Bauhaus Construction',
|
||||
category: 'Modernism',
|
||||
description: 'Form follows function. Geometric simplicity using primary colors and heavy structural borders.',
|
||||
vibe: 'Geometric, Functional, Primary',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Jura:wght@400;700&family=Tenor+Sans&display=swap',
|
||||
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Jura", size: 32, color: "111111", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { left: { color: "D50000", space: 12, style: "single", size: 48 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Tenor Sans", size: 16, color: "111111", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 },
|
||||
shading: { fill: "FFEB3B", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Tenor Sans", size: 11, color: "212121", align: 'both',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "0000FF"
|
||||
},
|
||||
|
||||
previewCss: `
|
||||
font-family: 'Tenor Sans', sans-serif;
|
||||
h1 { font-family: 'Jura', sans-serif; font-size: 32pt; font-weight: 700; color: #111111; border-left: 12px solid #D50000; padding-left: 16px; margin-bottom: 24px; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #111111; background: #FFEB3B; display: inline-block; padding: 4px 12px; margin-top: 30px; margin-bottom: 14px; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; text-align: justify; }
|
||||
blockquote { border-top: 4px solid #0000FF; border-bottom: 4px solid #0000FF; padding: 16px 0; margin: 24px 0; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'museum-gallery',
|
||||
name: 'Museum Gallery',
|
||||
category: 'Institutional',
|
||||
description: 'Art gallery placard style. Extremely neutral sans-serifs, high contrast, small but clear text.',
|
||||
vibe: 'Neutral, Institutional, Clean',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Karla:wght@400;700&family=Work+Sans:wght@400;600&display=swap',
|
||||
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Work Sans", size: 24, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Karla", size: 12, color: "616161", bold: true, align: 'left',
|
||||
spacing: { before: 280, after: 140, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Karla", size: 10, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
|
||||
previewCss: `
|
||||
font-family: 'Karla', sans-serif;
|
||||
h1 { font-family: 'Work Sans', sans-serif; font-size: 24pt; font-weight: 700; color: #000000; margin-bottom: 20px; }
|
||||
h2 { font-size: 12pt; font-weight: 700; color: #616161; margin-top: 24px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border-left: 2px solid #000; padding-left: 16px; margin: 20px 0; color: #424242; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'wireframe-layout',
|
||||
name: 'Wireframe Layout',
|
||||
category: 'Minimal',
|
||||
description: 'Digital blueprint style. Grey backgrounds, monospaced fonts, and placeholder-like blocks.',
|
||||
vibe: 'Digital, Prototype, Structural',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Redacted+Script&family=Flow+Circular&family=Roboto+Mono&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Roboto Mono", size: 24, color: "0000FF", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "E0E0E0", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Roboto Mono", size: 14, color: "555555", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
border: { bottom: { color: "CCCCCC", space: 4, style: "single", size: 4 } }
|
||||
},
|
||||
body: {
|
||||
font: "Roboto Mono", size: 10, color: "333333", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "0000FF"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
h1 { font-size: 24pt; font-weight: 700; color: #0000FF; background: #E0E0E0; padding: 12px; margin-bottom: 24px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #555555; border-bottom: 1px solid #CCC; margin-top: 32px; margin-bottom: 16px; padding-bottom: 4px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #333333; margin-bottom: 14px; }
|
||||
blockquote { border: 1px dashed #999; padding: 16px; margin: 24px 0; background: #F9F9F9; }
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'muted-pastel',
|
||||
name: 'Muted Pastel',
|
||||
category: 'Minimal',
|
||||
description: 'Soft and calming. Very light background tints with gentle, rounded typography.',
|
||||
vibe: 'Soft, Calming, Gentle',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Quicksand:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Nunito", size: 28, color: "7986CB", bold: true, align: 'center',
|
||||
spacing: { before: 480, after: 240, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Quicksand", size: 14, color: "9575CD", bold: true, align: 'center',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Quicksand", size: 11, color: "616161", align: 'center',
|
||||
spacing: { before: 0, after: 180, line: 300 }
|
||||
},
|
||||
accentColor: "9575CD"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
background: #FDFBF7;
|
||||
h1 { font-family: 'Nunito', sans-serif; font-size: 28pt; font-weight: 700; color: #7986CB; text-align: center; margin-bottom: 32px; }
|
||||
h2 { font-size: 14pt; font-weight: 600; color: #9575CD; text-align: center; margin-top: 36px; margin-bottom: 18px; }
|
||||
p { font-size: 11pt; line-height: 1.7; color: #616161; margin-bottom: 16px; text-align: center; }
|
||||
blockquote { background: #F3E5F5; padding: 24px; border-radius: 20px; margin: 32px 40px; text-align: center; }
|
||||
`
|
||||
}
|
||||
];
|
||||
Reference in New Issue
Block a user