diff --git a/ui-design.pen b/ui-design.pen index aa3f1ae6..329e3669 100644 --- a/ui-design.pen +++ b/ui-design.pen @@ -38421,6 +38421,1010 @@ ] } ] + }, + { + "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 } ], "themes": {