v0.6.0 BigUpdate
This commit is contained in:
@@ -0,0 +1,250 @@
|
||||
---
|
||||
name: GhostEditor Desktop
|
||||
colors:
|
||||
surface: '#0b1326'
|
||||
surface-dim: '#0b1326'
|
||||
surface-bright: '#31394d'
|
||||
surface-container-lowest: '#060e20'
|
||||
surface-container-low: '#131b2e'
|
||||
surface-container: '#171f33'
|
||||
surface-container-high: '#222a3d'
|
||||
surface-container-highest: '#2d3449'
|
||||
on-surface: '#dae2fd'
|
||||
on-surface-variant: '#bdc8d1'
|
||||
inverse-surface: '#dae2fd'
|
||||
inverse-on-surface: '#283044'
|
||||
outline: '#87929a'
|
||||
outline-variant: '#3e484f'
|
||||
surface-tint: '#7bd0ff'
|
||||
primary: '#8ed5ff'
|
||||
on-primary: '#00354a'
|
||||
primary-container: '#38bdf8'
|
||||
on-primary-container: '#004965'
|
||||
inverse-primary: '#00668a'
|
||||
secondary: '#c0c1ff'
|
||||
on-secondary: '#1000a9'
|
||||
secondary-container: '#3131c0'
|
||||
on-secondary-container: '#b0b2ff'
|
||||
tertiary: '#56e5a9'
|
||||
on-tertiary: '#003824'
|
||||
tertiary-container: '#30c88f'
|
||||
on-tertiary-container: '#004e34'
|
||||
error: '#ffb4ab'
|
||||
on-error: '#690005'
|
||||
error-container: '#93000a'
|
||||
on-error-container: '#ffdad6'
|
||||
primary-fixed: '#c4e7ff'
|
||||
primary-fixed-dim: '#7bd0ff'
|
||||
on-primary-fixed: '#001e2c'
|
||||
on-primary-fixed-variant: '#004c69'
|
||||
secondary-fixed: '#e1e0ff'
|
||||
secondary-fixed-dim: '#c0c1ff'
|
||||
on-secondary-fixed: '#07006c'
|
||||
on-secondary-fixed-variant: '#2f2ebe'
|
||||
tertiary-fixed: '#6ffbbe'
|
||||
tertiary-fixed-dim: '#4edea3'
|
||||
on-tertiary-fixed: '#002113'
|
||||
on-tertiary-fixed-variant: '#005236'
|
||||
background: '#0b1326'
|
||||
on-background: '#dae2fd'
|
||||
surface-variant: '#2d3449'
|
||||
typography:
|
||||
headline-lg:
|
||||
fontFamily: Space Grotesk
|
||||
fontSize: 18px
|
||||
fontWeight: '600'
|
||||
lineHeight: 24px
|
||||
letterSpacing: -0.01em
|
||||
headline-md:
|
||||
fontFamily: Space Grotesk
|
||||
fontSize: 15px
|
||||
fontWeight: '600'
|
||||
lineHeight: 20px
|
||||
letterSpacing: -0.005em
|
||||
headline-sm:
|
||||
fontFamily: Space Grotesk
|
||||
fontSize: 13px
|
||||
fontWeight: '500'
|
||||
lineHeight: 18px
|
||||
body-lg:
|
||||
fontFamily: Inter
|
||||
fontSize: 13px
|
||||
fontWeight: '400'
|
||||
lineHeight: 20px
|
||||
body-md:
|
||||
fontFamily: Inter
|
||||
fontSize: 12px
|
||||
fontWeight: '400'
|
||||
lineHeight: 18px
|
||||
body-sm:
|
||||
fontFamily: Inter
|
||||
fontSize: 11px
|
||||
fontWeight: '400'
|
||||
lineHeight: 16px
|
||||
code-editor:
|
||||
fontFamily: JetBrains Mono
|
||||
fontSize: 13px
|
||||
fontWeight: '400'
|
||||
lineHeight: 22px
|
||||
code-gutter:
|
||||
fontFamily: JetBrains Mono
|
||||
fontSize: 11px
|
||||
fontWeight: '400'
|
||||
lineHeight: 22px
|
||||
label-md:
|
||||
fontFamily: JetBrains Mono
|
||||
fontSize: 11px
|
||||
fontWeight: '500'
|
||||
lineHeight: 14px
|
||||
letterSpacing: 0.02em
|
||||
label-sm:
|
||||
fontFamily: JetBrains Mono
|
||||
fontSize: 10px
|
||||
fontWeight: '500'
|
||||
lineHeight: 12px
|
||||
letterSpacing: 0.03em
|
||||
status-indicator:
|
||||
fontFamily: JetBrains Mono
|
||||
fontSize: 10px
|
||||
fontWeight: '600'
|
||||
lineHeight: 12px
|
||||
rounded:
|
||||
sm: 0.125rem
|
||||
DEFAULT: 0.25rem
|
||||
md: 0.375rem
|
||||
lg: 0.5rem
|
||||
xl: 0.75rem
|
||||
full: 9999px
|
||||
spacing:
|
||||
gutter-xs: 0.25rem
|
||||
gutter-sm: 0.5rem
|
||||
gutter-md: 0.75rem
|
||||
gutter-lg: 1rem
|
||||
panel-padding-compact: 0.375rem
|
||||
panel-padding-default: 0.75rem
|
||||
window-bar-height: 2.25rem
|
||||
status-bar-height: 1.625rem
|
||||
sidebar-min-width: 15rem
|
||||
sidebar-default-width: 18rem
|
||||
sidebar-max-width: 26rem
|
||||
page-canvas-padding: 2rem
|
||||
---
|
||||
|
||||
## Brand & Style
|
||||
|
||||
This design system defines an engineering-grade, native-feeling desktop IDE engineered specifically for rigorous academic, standard-compliant (ГОСТ / md2gost), and technical document authoring.
|
||||
|
||||
### Personality & Tone
|
||||
- **Precision-Engineered:** Every line, margin, and rule feels calibrated with CAD-like certainty. There are no ornamental flourishes or arbitrary paddings.
|
||||
- **Academic Authority Meets Modern Tooling:** Bridges the gap between contemporary developer tooling (VS Code, Obsidian) and the strict, formal demands of state academic and technical publishing standards.
|
||||
- **Unobtrusive Immersion:** The dark UI recedes into the background, leaving center stage for high-contrast, mathematically correct A4 sheet previews and clean markdown source code.
|
||||
|
||||
### Design Style Movement
|
||||
- **Technical Studio Minimalism with Skeuomorphic Document Fidelity:** A high-density dark workspace environment composed of tonal layers, precise 1px borders, and low-saturation slate panels. This directly contrasts with an authentic physical paper canvas viewport simulating A4 aspect ratios, metric margins, and physical paper drop shadows.
|
||||
|
||||
## Colors
|
||||
|
||||
The palette establishes an ergonomic, fatigue-reducing environment for long-form writing and technical auditing.
|
||||
|
||||
### Palette Roles
|
||||
- **Primary (`#38bdf8` - Sky Blue):** Active cursor cues, focused outline nodes, live sync indicators, and interactive syntax tokens.
|
||||
- **Secondary (`#6366f1` - Indigo):** Structural elements, secondary selection bounds, active tabs, and git branch states.
|
||||
- **Tertiary / Success (`#10b981` - Emerald):** Passed ГОСТ compliance rules, healthy compilation states, and PlantUML render success.
|
||||
- **Warning (`#f59e0b` - Amber):** Lint warnings, missing references, table overflow notices, and unformatted bib items.
|
||||
- **Critical / Error (`#f43f5e` - Rose):** ГОСТ structural violations, syntax errors, and missing image anchors.
|
||||
- **Neutrals (Slate Tiers):**
|
||||
- Deepest Base (`#0b0f19`): Main application backdrop, title bar, and canvas workspace gutter.
|
||||
- Surface Level 1 (`#0f172a`): Primary sidebars, status bar, and panel trays.
|
||||
- Surface Level 2 (`#1e293b`): Active pane backgrounds, editor gutters, and menu flyouts.
|
||||
- Borders & Dividers (`#334155`): Strict 1px panel separations and tab dividers.
|
||||
- Muted Text (`#64748b`): Line numbers, metadata tags, and disabled states.
|
||||
- Primary UI Text (`#f1f5f9`): High-legibility UI labels, inspector values, and navigation titles.
|
||||
|
||||
### Document Preview Isolation
|
||||
- **Paper Canvas (`#ffffff`):** Pure print white, explicitly decoupled from the UI theme.
|
||||
- **Paper Ink (`#000000` to `#111827`):** High-density text reproduction conforming to strict print standards.
|
||||
|
||||
## Typography
|
||||
|
||||
The type system separates application chrome, markdown code editing, and compiled document rendering into three distinct semantic layers:
|
||||
|
||||
1. **Application Shell (`Space Grotesk` & `Inter`):** Space Grotesk provides structured, technical authority to section headers, panel drawers, and modal dialogs. Inter maintains neutral, uncompromised legibility for inspector panels, tree views, and configuration screens.
|
||||
2. **Editor Core (`JetBrains Mono`):** Dedicated to the markdown source pane, status metrics, and terminal diagnostics. It uses ligatures, fixed character bounds, and balanced punctuation to keep dense markdown, LaTeX math equations, and ГОСТ macro tags aligned.
|
||||
3. **Print Output Pane (Independent Document Engine):** The live ГОСТ preview bypasses application UI font rules entirely. It renders in true `Times New Roman` (or standard metrically equivalent `Liberation Serif` fallback) with explicit 14pt sizing, 1.5 line pitch, and standard 1.25cm paragraph indents as required by standard specifications.
|
||||
|
||||
## Layout & Spacing
|
||||
|
||||
This layout uses a continuous, rigid docked IDE grid without floating fluid gutters. The viewport is divided into distinct, resizable operational sectors:
|
||||
|
||||
### Grid & Pane Distribution
|
||||
- **Top Window Bar (36px):** Native OS controls, project switcher, build trigger, and quick layout toggles.
|
||||
- **Left Tool Palette & Sidebar (Collapsible, 240px–416px):** Accommodates file navigation, ГОСТ table-of-contents hierarchy, diagnostics inspector, and diagram snippets.
|
||||
- **Center Editor Workcell (Split 50/50 Default):**
|
||||
- **Left Sub-cell (Source):** Full-bleed markdown code buffer with fixed line gutters and diagnostic minimap.
|
||||
- **Right Sub-cell (Canvas):** Dark virtual desk (`#0b0f19`) containing an A4 sheet rendered to scale (ratio 1:1.414) with dynamic zoom levels.
|
||||
- **Bottom Status Ribbon (26px):** Persistent hardware and compilation state (active ГОСТ profile, word/page totals, syntax engine, PlantUML daemon state).
|
||||
|
||||
### Spacing Rules
|
||||
- UI density is compact; standard horizontal padding between metadata elements is 6px to 8px.
|
||||
- Pane splitters are 1px visual rules backed by a 5px interactive hit zone.
|
||||
- Paper canvas maintains an isolated virtual viewport with centered dynamic padding (minimum 32px on all sides) to preserve document boundary clarity.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
This system avoids expressive blur-heavy shadows in the application chrome, relying instead on mechanical surface layering and razor-sharp separation:
|
||||
|
||||
### Tonal Hierarchy
|
||||
- **Level 0 (App Shell/Workspace Cavity):** `#0b0f19` — the deepest recessed floor, visible beneath the canvas and title bar.
|
||||
- **Level 1 (Side Panels & Status Bar):** `#0f172a` — anchored static modules, bordered with 1px `#334155` solid strokes.
|
||||
- **Level 2 (Active Editor & Tool Panels):** `#1e293b` — interactive focal spaces.
|
||||
- **Level 3 (Overlays & Menus):** `#1e293b` with a 1px border of `#475569` and a precise drop shadow: `0 4px 16px -2px rgba(0, 0, 0, 0.5)`.
|
||||
|
||||
### Document Skeuomorphism
|
||||
The central preview pane treats the A4 sheet as a tangible physical substrate:
|
||||
- **Sheet Surface:** Solid `#ffffff`.
|
||||
- **Sheet Elevation:** A layered, neutral shadow that conveys true physical weight:
|
||||
- `box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 12px 32px -4px rgba(0, 0, 0, 0.65);`
|
||||
- **Page Breaks:** Explicit 16px gap between consecutive A4 sheets in continuous preview mode, showing paper borders and cut lines.
|
||||
|
||||
## Shapes
|
||||
|
||||
The design system uses a strict **Soft (`roundedness: 1`)** geometric model to preserve an industrial, engineering-focused look.
|
||||
|
||||
### Radii Tokens
|
||||
- **Base (0.25rem / 4px):** Form inputs, buttons, status chips, inspector rows, and tree nodes.
|
||||
- **Large (0.5rem / 8px):** Dialog windows, hover popovers, and quick-picker modals.
|
||||
- **Zero (0px):** Editor panes, status bar, title bar, tabs, preview paper, and pane divider rails.
|
||||
|
||||
Sharp geometric discipline ensures that nested panels lock cleanly into the desktop frame without wasteful dead corner space.
|
||||
|
||||
## Components
|
||||
|
||||
### Action Controls (Buttons)
|
||||
- **Primary Action (e.g., "Build PDF / ГОСТ"):** Solid `#38bdf8` fill, `#0f172a` bold text, 4px corner radius, 28px height. Focus states apply a 2px outer ring in `#38bdf8` with 2px offset.
|
||||
- **Secondary / Ghost Action:** Flat background with a 1px `#334155` border, `#f1f5f9` text, transitioning to `#1e293b` fill on hover.
|
||||
- **Icon Quick-actions:** 24x24px bounds, 0px border, transparent background, `#94a3b8` icon fill, transitioning to `#ffffff` with a `#334155` background on hover.
|
||||
|
||||
### Status Indicators & Badges
|
||||
- **Format Audit Badges:** Monospace text in 10px uppercase, padding 2px 6px, radius 2px.
|
||||
- *Compliant:* `#10b981` text over `rgba(16, 185, 129, 0.1)` background with `rgba(16, 185, 129, 0.25)` border.
|
||||
- *Non-compliant:* `#f43f5e` text over `rgba(244, 63, 94, 0.1)` background with `rgba(244, 63, 94, 0.25)` border.
|
||||
- **Compiler Daemon Light:** 6px circular dot with a soft radial glow when compiling, turning solid emerald when idle and amber during recalculation.
|
||||
|
||||
### Editor & Workspace Tabs
|
||||
- **Tab Header:** 32px height, 0px border radius, separated by 1px `#334155` vertical rules.
|
||||
- **Active Tab:** `#1e293b` background with a top 2px indicator line in `#38bdf8`.
|
||||
- **Inactive Tab:** `#0f172a` background with `#94a3b8` text.
|
||||
|
||||
### Tree Navigation (File Explorer & Outline)
|
||||
- 24px row height with a strict hierarchical indentation of 12px per level.
|
||||
- Left-aligned indicator caret with hover highlights spanning the full panel width (`rgba(51, 65, 85, 0.4)`).
|
||||
- Active item uses `#38bdf8` text with a subtle `rgba(56, 189, 248, 0.08)` background fill and a 2px left-border accent.
|
||||
|
||||
### Input Fields & Search Bars
|
||||
- Background `#0b0f19`, border 1px solid `#334155`, text `#f1f5f9`, font JetBrains Mono 12px.
|
||||
- Focused state transitions border to `#38bdf8` without changing the bounding box dimensions.
|
||||
|
||||
### Diagnostics & Validation Panel
|
||||
- List view segmented by file position `[Line:Col]`.
|
||||
- Severity icons: 12px monospace indicators (`[E]` in Rose, `[W]` in Amber, `[I]` in Sky Blue).
|
||||
- Direct click jumps the markdown source line and centers the preview canvas on the corresponding page section.
|
||||
Reference in New Issue
Block a user