cae821ef4c
* feat: add theming system design file with 3 frames Design frames for Settings > Appearance panel, Command Palette theme switching, and live theme editing flow visualization. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add Rust backend for vault-native theming system Theme files live in _themes/*.json with colors, typography, and spacing sections. Vault-level settings (.laputa/settings.json) store the active theme. Built-in themes (default, dark, minimal) are seeded on vault creation. All 6 Tauri commands registered: list_themes, get_theme, get_vault_settings, save_vault_settings, set_active_theme, create_theme. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add frontend theme engine, settings UI, and command palette integration Wire up useThemeManager hook to load themes via Tauri IPC, apply CSS custom properties to :root, and support switching/creating themes. Add Appearance section to Settings panel with color swatches and theme cards. Register theme switch and create commands in the command registry. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: use .to_string() instead of format! for string literal (clippy) * style: cargo fmt on theme.rs --------- Co-authored-by: Test <test@test.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
1 line
11 KiB
Plaintext
1 line
11 KiB
Plaintext
{"children":[{"children":[{"alignItems":"center","children":[{"content":"Settings","fill":"#37352F","fontSize":16,"fontWeight":"600","id":"o6HJK","type":"text"},{"fill":"#787774","height":16,"iconFontFamily":"lucide","iconFontName":"x","id":"zgXAf","type":"icon_font","width":16}],"height":56,"id":"mxSw1","justifyContent":"space_between","name":"Header","padding":[0,24],"stroke":{"align":"inside","fill":"#E9E9E7","thickness":{"bottom":1}},"type":"frame","width":"fill_container"},{"children":[{"content":"Appearance","fill":"#37352F","fontSize":13,"fontWeight":"600","id":"NhMui","type":"text"},{"content":"Choose a theme for your vault. Themes are JSON files in _themes/ — edit them to customize.","fill":"#787774","fontSize":12,"id":"atYQn","lineHeight":1.5,"textGrowth":"fixed-width","type":"text","width":"fill_container"},{"children":[{"alignItems":"center","children":[{"children":[{"fill":"#FFFFFF","height":32,"type":"rectangle","width":20},{"fill":"#F7F6F3","height":32,"type":"rectangle","width":20}],"cornerRadius":4,"height":32,"type":"frame","width":40},{"children":[{"content":"Default","fill":"#37352F","fontSize":13,"fontWeight":"500","type":"text"},{"content":"Light theme with warm tones","fill":"#787774","fontSize":11,"type":"text"}],"gap":2,"layout":"vertical","type":"frame","width":"fill_container"},{"content":"Active","fill":"#155DFF","fontSize":11,"fontWeight":"500","type":"text"}],"cornerRadius":6,"gap":12,"height":56,"name":"Theme Item — Default (Active)","padding":[0,12],"stroke":{"align":"inside","fill":"#155DFF","thickness":2},"type":"frame","width":"fill_container"},{"alignItems":"center","children":[{"children":[{"fill":"#1a1a2e","height":32,"type":"rectangle","width":20},{"fill":"#0f0f1a","height":32,"type":"rectangle","width":20}],"cornerRadius":4,"height":32,"type":"frame","width":40},{"children":[{"content":"Dark","fill":"#37352F","fontSize":13,"fontWeight":"500","type":"text"},{"content":"Dark variant with deep navy tones","fill":"#787774","fontSize":11,"type":"text"}],"gap":2,"layout":"vertical","type":"frame","width":"fill_container"}],"cornerRadius":6,"gap":12,"height":56,"name":"Theme Item — Dark","padding":[0,12],"stroke":{"align":"inside","fill":"#E9E9E7","thickness":1},"type":"frame","width":"fill_container"},{"alignItems":"center","children":[{"children":[{"fill":"#FAFAFA","height":32,"type":"rectangle","width":20},{"fill":"#111111","height":32,"type":"rectangle","width":20}],"cornerRadius":4,"height":32,"type":"frame","width":40},{"children":[{"content":"Minimal","fill":"#37352F","fontSize":13,"fontWeight":"500","type":"text"},{"content":"High contrast, minimal chrome","fill":"#787774","fontSize":11,"type":"text"}],"gap":2,"layout":"vertical","type":"frame","width":"fill_container"}],"cornerRadius":6,"gap":12,"height":56,"name":"Theme Item — Minimal","padding":[0,12],"stroke":{"align":"inside","fill":"#E9E9E7","thickness":1},"type":"frame","width":"fill_container"}],"gap":8,"layout":"vertical","name":"Theme List","type":"frame","width":"fill_container"},{"children":[{"alignItems":"center","children":[{"fill":"#787774","height":14,"iconFontFamily":"lucide","iconFontName":"plus","type":"icon_font","width":14},{"content":"New Theme","fill":"#37352F","fontSize":12,"fontWeight":"500","type":"text"}],"cornerRadius":6,"gap":6,"height":32,"name":"New Theme Button","padding":[0,12],"stroke":{"align":"inside","fill":"#E9E9E7","thickness":1},"type":"frame"},{"alignItems":"center","children":[{"fill":"#787774","height":14,"iconFontFamily":"lucide","iconFontName":"pencil","type":"icon_font","width":14},{"content":"Open in Editor","fill":"#37352F","fontSize":12,"fontWeight":"500","type":"text"}],"cornerRadius":6,"gap":6,"height":32,"name":"Open in Editor Button","padding":[0,12],"stroke":{"align":"inside","fill":"#E9E9E7","thickness":1},"type":"frame"}],"gap":8,"name":"Actions","type":"frame","width":"fill_container"}],"gap":20,"layout":"vertical","name":"Body","padding":24,"type":"frame","width":"fill_container"},{"alignItems":"center","children":[{"alignItems":"center","children":[{"content":"Cancel","fill":"#37352F","fontSize":13,"type":"text"}],"cornerRadius":6,"height":32,"padding":[0,16],"stroke":{"align":"inside","fill":"#E9E9E7","thickness":1},"type":"frame"},{"alignItems":"center","children":[{"content":"Save","fill":"#FFFFFF","fontSize":13,"type":"text"}],"cornerRadius":6,"fill":"#155DFF","height":32,"padding":[0,16],"type":"frame"}],"gap":8,"height":56,"justifyContent":"end","name":"Footer","padding":[0,24],"stroke":{"align":"inside","fill":"#E9E9E7","thickness":{"top":1}},"type":"frame","width":"fill_container"}],"fill":"#FFFFFF","layout":"vertical","name":"Settings — Appearance","type":"frame","width":520,"x":0,"y":0},{"children":[{"alignItems":"center","children":[{"content":"Switch theme...","fill":"#787774","fontSize":15,"type":"text"}],"height":44,"name":"Search","padding":[0,16],"stroke":{"align":"inside","fill":"#E9E9E7","thickness":{"bottom":1}},"type":"frame","width":"fill_container"},{"children":[{"content":"APPEARANCE","fill":"#787774","fontSize":11,"fontWeight":"600","letterSpacing":0.8,"type":"text"},{"alignItems":"center","children":[{"children":[{"fill":"#FFFFFF","height":16,"type":"rectangle","width":10},{"fill":"#F7F6F3","height":16,"type":"rectangle","width":10}],"cornerRadius":3,"height":16,"type":"frame","width":20},{"content":"Switch to Default","fill":"#37352F","fontSize":13,"type":"text"},{"fill":"#155DFF","height":14,"iconFontFamily":"lucide","iconFontName":"check","type":"icon_font","width":14}],"cornerRadius":6,"fill":"#EBEBEA","gap":8,"height":36,"name":"Row — Active","padding":[0,12],"type":"frame","width":"fill_container"},{"alignItems":"center","children":[{"children":[{"fill":"#1a1a2e","height":16,"type":"rectangle","width":10},{"fill":"#0f0f1a","height":16,"type":"rectangle","width":10}],"cornerRadius":3,"height":16,"type":"frame","width":20},{"content":"Switch to Dark","fill":"#37352F","fontSize":13,"type":"text"}],"cornerRadius":6,"gap":8,"height":36,"name":"Row — Dark","padding":[0,12],"type":"frame","width":"fill_container"},{"alignItems":"center","children":[{"children":[{"fill":"#FAFAFA","height":16,"type":"rectangle","width":10},{"fill":"#111111","height":16,"type":"rectangle","width":10}],"cornerRadius":3,"height":16,"type":"frame","width":20},{"content":"Switch to Minimal","fill":"#37352F","fontSize":13,"type":"text"}],"cornerRadius":6,"gap":8,"height":36,"name":"Row — Minimal","padding":[0,12],"type":"frame","width":"fill_container"},{"alignItems":"center","children":[{"fill":"#787774","height":16,"iconFontFamily":"lucide","iconFontName":"plus","type":"icon_font","width":16},{"content":"New Theme","fill":"#37352F","fontSize":13,"type":"text"}],"cornerRadius":6,"gap":8,"height":36,"name":"Row — New Theme","padding":[0,12],"type":"frame","width":"fill_container"}],"layout":"vertical","name":"Results","padding":[4,0],"type":"frame","width":"fill_container"},{"alignItems":"center","children":[{"content":"↑↓ navigate","fill":"#787774","fontSize":11,"type":"text"},{"content":"↵ select","fill":"#787774","fontSize":11,"type":"text"},{"content":"esc close","fill":"#787774","fontSize":11,"type":"text"}],"gap":16,"height":28,"name":"Footer","padding":[0,16],"stroke":{"align":"inside","fill":"#E9E9E7","thickness":{"top":1}},"type":"frame","width":"fill_container"}],"cornerRadius":12,"fill":"#FFFFFF","layout":"vertical","name":"Command Palette — Theme Switching","stroke":{"align":"inside","fill":"#E9E9E7","thickness":1},"type":"frame","width":520,"x":620,"y":0},{"children":[{"children":[{"alignItems":"center","children":[{"fill":"#787774","height":14,"iconFontFamily":"lucide","iconFontName":"file","type":"icon_font","width":14},{"content":"_themes/default.json","fill":"#37352F","fontSize":12,"fontWeight":"500","type":"text"}],"gap":8,"height":36,"padding":[0,12],"stroke":{"align":"inside","fill":"#E9E9E7","thickness":{"bottom":1}},"type":"frame","width":"fill_container"},{"children":[{"content":"{","fill":"#37352F","fontFamily":"IBM Plex Mono","fontSize":12,"type":"text"},{"content":" \"name\": \"Default\",","fill":"#37352F","fontFamily":"IBM Plex Mono","fontSize":12,"type":"text"},{"content":" \"colors\": {","fill":"#37352F","fontFamily":"IBM Plex Mono","fontSize":12,"type":"text"},{"content":" \"background\": \"#FFFFFF\",","fill":"#155DFF","fontFamily":"IBM Plex Mono","fontSize":12,"fontWeight":"600","type":"text"},{"content":" \"sidebar-background\": \"#F7F6F3\",","fill":"#37352F","fontFamily":"IBM Plex Mono","fontSize":12,"type":"text"},{"content":" \"accent\": \"#155DFF\"","fill":"#37352F","fontFamily":"IBM Plex Mono","fontSize":12,"type":"text"},{"content":" }","fill":"#37352F","fontFamily":"IBM Plex Mono","fontSize":12,"type":"text"},{"content":"}","fill":"#37352F","fontFamily":"IBM Plex Mono","fontSize":12,"type":"text"}],"gap":2,"layout":"vertical","padding":16,"type":"frame","width":"fill_container"}],"cornerRadius":8,"fill":"#FFFFFF","layout":"vertical","name":"Editor — Theme JSON","stroke":{"align":"inside","fill":"#E9E9E7","thickness":1},"type":"frame","width":400},{"alignItems":"center","children":[{"fill":"#787774","height":24,"iconFontFamily":"lucide","iconFontName":"arrow-right","type":"icon_font","width":24},{"content":"~300ms","fill":"#787774","fontSize":10,"fontWeight":"500","type":"text"}],"justifyContent":"center","layout":"vertical","name":"Arrow","type":"frame","width":40},{"children":[{"alignItems":"center","children":[{"fill":"#FF5F57","height":8,"type":"ellipse","width":8},{"fill":"#FEBC2E","height":8,"type":"ellipse","width":8},{"fill":"#28C840","height":8,"type":"ellipse","width":8}],"fill":"#F7F6F3","gap":6,"height":28,"padding":[0,8],"stroke":{"align":"inside","fill":"#E9E9E7","thickness":{"bottom":1}},"type":"frame","width":"fill_container"},{"children":[{"children":[{"cornerRadius":4,"fill":"#EBEBEA","height":20,"type":"frame","width":"fill_container"},{"cornerRadius":4,"height":20,"type":"frame","width":"fill_container"},{"cornerRadius":4,"height":20,"type":"frame","width":"fill_container"}],"fill":"#F7F6F3","gap":4,"height":"fill_container","layout":"vertical","padding":[8,6],"stroke":{"align":"inside","fill":"#E9E9E7","thickness":{"right":1}},"type":"frame","width":80},{"children":[{"cornerRadius":2,"fill":"#37352F","height":12,"type":"frame","width":160},{"cornerRadius":2,"fill":"#F0F0EF","height":8,"type":"frame","width":"fill_container"},{"cornerRadius":2,"fill":"#F0F0EF","height":8,"type":"frame","width":220},{"cornerRadius":2,"fill":"#F0F0EF","height":8,"type":"frame","width":180}],"gap":8,"height":"fill_container","layout":"vertical","padding":16,"type":"frame","width":"fill_container"}],"height":260,"type":"frame","width":"fill_container"},{"alignItems":"center","children":[{"fill":"#38A169","height":6,"type":"ellipse","width":6},{"content":"Live — CSS variables update instantly","fill":"#787774","fontSize":10,"type":"text"}],"gap":6,"height":28,"padding":[0,12],"stroke":{"align":"inside","fill":"#E9E9E7","thickness":{"top":1}},"type":"frame","width":"fill_container"}],"cornerRadius":8,"fill":"#FFFFFF","layout":"vertical","name":"App Preview","stroke":{"align":"inside","fill":"#E9E9E7","thickness":1},"type":"frame","width":380}],"fill":"#F0F0EF","gap":24,"name":"Live Theme Editing Flow","padding":24,"type":"frame","width":900,"x":0,"y":700}],"variables":{}} |