From 65184b897db67722b8baec4991b06ef5b4ef3adc Mon Sep 17 00:00:00 2001 From: Till Wegmueller Date: Sat, 11 Apr 2026 16:32:08 +0200 Subject: [PATCH] Add NeoCDE technical architecture plan MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Documents the full toolkit decision (Slint + layer-shika + SCTK) for building a modernized CDE desktop environment on the WayRay compositor. Covers the design token pipeline (Pencil .pen → tokens.toml → theme.slint + wrsrvd-theme.ron), WM architecture (pure protocol client, zero GUI), shell components (layer-shika layer-shell surfaces), and project structure with hard designer-AI / code-AI separation boundaries. Co-Authored-By: Claude Opus 4.6 (1M context) --- ARCHITECTURE.md | 428 +++++++ untitled.pen | 3175 +++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 3103 insertions(+), 500 deletions(-) create mode 100644 ARCHITECTURE.md diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md new file mode 100644 index 0000000..40af888 --- /dev/null +++ b/ARCHITECTURE.md @@ -0,0 +1,428 @@ +# NeoCDE — Technical Architecture Plan + +A modernized CDE (Common Desktop Environment) for Wayland, built on the WayRay compositor (`wrsrvd`) with its pluggable WM protocol. + +## System Architecture + +``` +┌─────────────────────────────────────┐ +│ wrsrvd (WayRay Compositor) │ +│ • Rendering / encoding │ +│ • Input dispatch │ +│ • wayray_wm_v1 protocol server │ +│ • wlr-layer-shell server │ +│ • SSD decoration rendering (5.1) │ +│ • Reads wrsrvd-theme.ron │ +└──────┬──────────┬───────────────────┘ + │ │ + WM Protocol │ Layer-shell / xdg-shell + │ │ +┌──────▼──────┐ ┌─▼──────────────────────────┐ +│ neocde-wm │ │ NeoCDE Shell + Apps │ +│ (wm client) │ │ • Front Panel (layer-shell) │ +│ │ │ • Taskbar (layer-shell) │ +│ • Layout │ │ • App Drawer (layer-shell) │ +│ • Focus │ │ • File Manager (xdg-shell) │ +│ • Keybinds │ │ • Terminal (xdg-shell) │ +│ • Decor │ │ • Settings (xdg-shell) │ +│ policy │ │ • Style Mgr (xdg-shell) │ +└─────────────┘ └─────────────────────────────┘ +``` + +## Toolkit Decision: Slint + layer-shika + +### Primary Stack + +| Component | Technology | +|--------------------|-------------------------------------| +| Compositor | wrsrvd (WayRay — Smithay-based) | +| WM Client | Pure Rust: wayland-client + wayray-wm-protocol | +| Shell Components | Slint + layer-shika (SCTK-based) | +| Desktop Apps | Slint (standard xdg-shell via winit)| +| Design Tokens | TOML → codegen → .slint + .ron | +| Event Loop | calloop (via layer-shika) | +| GPU Rendering | femtovg (OpenGL ES 2.0) via layer-shika | + +### Why Slint + +1. **Design/code separation**: `.slint` markup files are a declarative DSL purpose-built for separating UI design from business logic. Designer AIs edit `.slint` files; code AIs edit `.rs` files. Hard boundary. +2. **Hot reload**: `slint-viewer --auto-reload` for design iteration without recompilation. +3. **Runtime interpreter**: `slint-interpreter` crate loads `.slint` files at runtime — AI can iterate on designs without triggering a build. +4. **Design token globals**: Slint's `export global Theme { ... }` maps directly to our Pencil design variables. +5. **Rust-native**: First-class Rust API, no C FFI or GObject complexity. +6. **License**: Royalty-free for desktop applications at no cost. + +### Why Not Alternatives + +- **libcosmic (COSMIC DE toolkit)**: Proven for desktop environments but tightly coupled to COSMIC's design system. No external design file separation — styling is in Rust code. Forking an entire DE toolkit to make it look like CDE is more work than building on Slint. +- **GTK4-rs / Relm4**: LGPL licensing requires dynamic linking. C-based with GObject complexity. CSS is looser than `.slint` for AI-driven design. GTK is opinionated about HIG — CDE aesthetics fight its design philosophy. +- **iced (vanilla)**: No built-in external style file system. Styling is entirely code-based. +- **egui**: Immediate-mode paradigm is wrong for persistent desktop shell UI. +- **Xilem/Masonry**: Pre-alpha, 1-2 years from production readiness. + +## WM Architecture (neocde-wm) + +The WM is a **pure protocol client** with zero GUI dependencies. It connects to `wrsrvd` via the `wayray_wm_v1` Wayland protocol. + +**Dependencies**: `wayland-client`, `wayray-wm-protocol` only. No rendering libraries. + +**Decoration policy**: The WM sends `use_ssd` to tell the compositor to render server-side decorations. The actual CDE Motif-style title bar/border rendering is 100% the compositor's responsibility (`wrsrvd` Phase 5.1). The WM never renders pixels. + +**Two-phase transaction model** (from wayray_wm_v1): +- **Phase 1 — Manage**: Compositor sends `manage_start` → WM responds with `propose_dimensions`, `set_focus`, decoration choices, fullscreen grant/deny → WM calls `manage_done` +- **Phase 2 — Render**: After apps commit → compositor sends `render_start` → WM sends `set_position`, `set_z_top/bottom`, `show`/`hide` → WM calls `render_done` → atomic frame apply + +**CDE-specific WM behaviors**: +- Click-to-focus, raise-on-focus +- CDE floating layout with centered initial placement +- Virtual desktops (workspace switching mapped to Front Panel buttons) +- Alt+F4 close, Alt+Tab window cycling +- Interactive move/resize via `wayray_wm_seat_v1` + +## Shell Components (layer-shika) + +Shell components are **layer-shell Wayland clients** rendered by Slint via layer-shika's SCTK-based platform backend. + +### layer-shika (v0.3.1, Feb 2026) + +Architecture: +- **domain**: Core models, port traits, zero external deps +- **adapters**: SCTK for Wayland, femtovg + EGL for rendering, Slint platform integration +- **composition**: Public API with builder patterns + +Capabilities: +- Multi-surface layer shell windows (Front Panel + Taskbar = separate surfaces) +- Per-monitor instances (panel on every output) +- xdg-popup protocol (menus, tooltips) +- ext-session-lock-v1 (lock screen) +- HiDPI / fractional scaling +- Runtime `.slint` compilation via slint-interpreter + +**License**: AGPL-3.0. NeoCDE shell components must be AGPL-3.0 compatible, or negotiate with the author, or write a custom SCTK-based Slint platform backend (~500 lines following their architecture). + +### Shell Surfaces + +| Component | Layer | Purpose | +|---------------|----------|--------------------------------------| +| Front Panel | bottom | Workspace buttons, app launchers, clock | +| Taskbar | top | Window list (via wlr-foreign-toplevel) | +| App Drawer | overlay | Application launcher grid | +| Lock Screen | overlay | ext-session-lock-v1 | +| Notifications | top | Desktop notifications | + +## Design Token Pipeline + +``` +Pencil (.pen) ←── Designer AI / Pencil MCP edits here + │ + │ export (pen-to-toml tool) + ▼ +tokens.toml ←── Canonical source of truth + │ + ├── build.rs codegen ──► theme.slint (shell + apps consume) + │ + └── build.rs codegen ──► wrsrvd-theme.ron (compositor SSD rendering) +``` + +### tokens.toml (canonical format) + +Maps directly from Pencil's 70+ design variables: + +```toml +[metadata] +name = "neocde-glassy-workstation" +is_dark = true + +[colors] +window-bg = "#1E2A3AE6" +window-bg-solid = "#1E2A3AFF" +window-border = "#3A5068FF" +surface-glass = "#1E2E4280" +surface-dark = "#0E1620FF" +surface-medium = "#1A2838FF" +surface-light = "#2A3E52FF" +title-bar-bg = "#2A3E55E6" +title-bar-text = "#B0C8DCFF" +color-primary = "#4A8B82FF" +color-primary-hover = "#5BB0A4FF" +accent = "#4A8A90FF" +accent-hover = "#5AA0A8FF" +color-accent = "#C16B58FF" +color-background = "#15171AFF" +color-frame = "#24282DFF" +color-terminal-bg = "#0D0E11FF" +color-input-bg = "#0D0E11E6" +text-primary = "#C8DDE8FF" +text-secondary = "#8AA4B8FF" +text-muted = "#5A7A90FF" +color-muted = "#8B949EFF" +color-text = "#E4E7EBFF" +button-bg = "#2A3E55CC" +button-border = "#3A5A78FF" +button-hover = "#3A5068CC" +taskbar-bg = "#141E2CE6" +color-panel-bg = "#202428A6" +color-surface = "#202428A6" +danger = "#C85050FF" +success = "#50A868FF" +color-folder = "#C8A868FF" +color-folder-shadow = "#8A7040FF" +color-divider = "#2A3040FF" +desktop-bg = "#0A1018FF" +scrollbar-thumb = "#3A5A78FF" +scrollbar-bg = "#1A2838FF" +input-bg = "#0E1A28E6" +input-border = "#2A4058FF" +divider = "#2A4058FF" +color-selection = "#4A8B8233" +color-highlight-border = "#FFFFFF0D" +color-shadow-inset-dark = "#00000066" +color-shadow-inset-light = "#FFFFFF0D" +color-scrollbar-thumb = "#4A8B82FF" +color-scrollbar-track = "#24282DFF" + +[spacing] +xs = 4 +sm = 8 +md = 12 +lg = 16 +xl = 24 + +[corner-radii] +sm = 3 +md = 6 +lg = 8 +panel = 16 +inner = 0 +outer = 4 +window = 8 + +[typography] +font-ui = "IBM Plex Sans" +font-mono = "IBM Plex Mono" +font-main = "IBM Plex Mono" + +[typography.sizes] +xs = 12 +sm = 14 +md = 13 +body = 15 +lg = 20 +xl = 28 +clock = 14 + +[dimensions] +title-bar-height = 32 +front-panel-height = 80 +menu-bar-height = 28 +status-bar-height = 24 +icon-size = 64 +scrollbar-width = 16 +border-width = 1 +border-thick = 8 +``` + +### Generated theme.slint + +```slint +// Auto-generated from tokens.toml — do not hand-edit +export global Theme { + // Colors + in-out property window-bg: #1E2A3AE6; + in-out property surface-glass: #1E2E4280; + in-out property title-bar-bg: #2A3E55E6; + in-out property title-bar-text: #B0C8DCFF; + in-out property color-primary: #4A8B82FF; + in-out property text-primary: #C8DDE8FF; + in-out property text-secondary: #8AA4B8FF; + in-out property button-bg: #2A3E55CC; + in-out property button-border: #3A5A78FF; + // ... all color tokens + + // Spacing + in-out property spacing-xs: 4px; + in-out property spacing-sm: 8px; + in-out property spacing-md: 12px; + in-out property spacing-lg: 16px; + in-out property spacing-xl: 24px; + + // Corner radii + in-out property corner-sm: 3px; + in-out property corner-md: 6px; + in-out property corner-lg: 8px; + in-out property corner-panel: 16px; + in-out property corner-window: 8px; + + // Dimensions + in-out property title-bar-height: 32px; + in-out property front-panel-height: 80px; + in-out property menu-bar-height: 28px; + in-out property status-bar-height: 24px; + in-out property icon-size: 64px; + in-out property scrollbar-width: 16px; + + // Typography + in-out property font-ui: "IBM Plex Sans"; + in-out property font-mono: "IBM Plex Mono"; + in-out property font-size-xs: 12px; + in-out property font-size-sm: 14px; + in-out property font-size-md: 13px; + in-out property font-size-body: 15px; + in-out property font-size-lg: 20px; + in-out property font-size-xl: 28px; +} +``` + +### Generated wrsrvd-theme.ron (for compositor SSD) + +```ron +NeoCdeDecorations(( + title_bar: ( + height: 32, + bg: (red: 0.165, green: 0.243, blue: 0.333, alpha: 0.902), + text: (red: 0.690, green: 0.784, blue: 0.863, alpha: 1.0), + font: "IBM Plex Sans", + font_size: 13, + ), + border: ( + color: (red: 0.227, green: 0.353, blue: 0.471, alpha: 1.0), + width: 1, + corner_radius: 8, + ), + buttons: ( + close: (bg: (red: 0.784, green: 0.314, blue: 0.314, alpha: 1.0)), + minimize: (bg: (red: 0.165, green: 0.243, blue: 0.333, alpha: 0.8)), + maximize: (bg: (red: 0.165, green: 0.243, blue: 0.333, alpha: 0.8)), + ), +)) +``` + +## AI Workflow Model + +### Separation of Concerns + +``` +Designer AI (Pencil MCP, Slint editor) Code AI (Rust) +───────────────────────────────────── ────────────────────── +Edits: Edits: + designs/*.pen */src/**/*.rs + tokens/tokens.toml Cargo.toml, Cargo.lock + */ui/**/*.slint build.rs + +Never touches: Never touches: + *.rs *.slint + Cargo.toml *.pen + tokens.toml +``` + +### Two Runtime Modes + +| Mode | Use Case | How .slint is loaded | Trade-off | +|------|----------|---------------------|-----------| +| **Compiled** (production) | Release builds | `build.rs` → `slint_build::compile()` → `slint::include_modules!()` | Type-safe, fast startup, AOT | +| **Interpreted** (design iteration) | AI design workflow | `slint_interpreter::Compiler::build_from_path()` | Hot reload, no recompilation, string-keyed properties | + +## Wayland Protocols Required + +| Protocol | Purpose | Priority | +|------------------------------------|--------------------------------|----------| +| wayray_wm_v1 | WM ↔ compositor (custom) | Critical | +| wlr-layer-shell-v1 | Panel, taskbar, overlays | Critical | +| xdg-shell | Application windows | Critical | +| xdg-decoration | Server-side CDE window chrome | Critical | +| wlr-foreign-toplevel-management | Taskbar window list | Critical | +| ext-session-lock-v1 | Lock screen | High | +| wlr-output-management | Display settings | High | +| wp-fractional-scale | HiDPI support | High | +| xdg-activation-v1 | Focus management | Medium | +| wp-idle-inhibit | Screensaver prevention | Medium | +| wlr-data-control | Clipboard manager | Medium | +| ext-idle-notify | Screensaver triggering | Low | + +## Dependencies (target versions, early 2026) + +| Crate | Version | Used By | +|---------------------------|---------------|-------------------| +| slint | 1.14+ | Shell + Apps | +| slint-interpreter | 1.14+ | AI design workflow| +| slint-build | 1.14+ | build.rs codegen | +| layer-shika | 0.3+ (git) | Shell surfaces | +| smithay-client-toolkit | 0.20 | Wayland protocols | +| wayland-client | 0.31+ | WM client | +| calloop | 0.14+ | Event loop | +| toml | 0.8+ | Token parsing | +| ron | 0.8+ | RON generation | +| serde | 1.x | Serialization | + +## Project Structure + +``` +neocde/ +├── designs/ +│ └── untitled.pen # Pencil source of truth +├── images/ +│ └── *.png # Reference imagery +├── tokens/ +│ ├── tokens.toml # Canonical design tokens +│ ├── pen-to-toml/ # Tool: .pen export → tokens.toml +│ │ ├── Cargo.toml +│ │ └── src/main.rs +│ └── token-codegen/ # Shared codegen library +│ ├── Cargo.toml +│ └── src/lib.rs # generate_slint(), generate_ron() +├── neocde-wm/ # WM client (zero GUI deps) +│ ├── Cargo.toml # wayland-client, wayray-wm-protocol +│ └── src/ +│ ├── main.rs +│ ├── layout.rs # CDE floating layout +│ ├── focus.rs # Click-to-focus, raise-on-focus +│ ├── keybinds.rs # Alt+F4, Alt+Tab, workspaces +│ ├── workspaces.rs # Virtual desktops +│ └── config.rs # WM config (TOML) +├── neocde-shell/ # Shell (layer-shika + Slint) +│ ├── Cargo.toml # slint, layer-shika, sctk +│ ├── build.rs # tokens.toml → theme.slint +│ ├── ui/ # DESIGNER AI TERRITORY +│ │ ├── theme.slint # Generated from tokens +│ │ ├── components/ +│ │ │ ├── button.slint +│ │ │ ├── window-chrome.slint # CSD fallback +│ │ │ ├── input.slint +│ │ │ ├── tab-bar.slint +│ │ │ ├── menu-bar.slint +│ │ │ ├── scrollbar.slint +│ │ │ └── status-bar.slint +│ │ ├── front-panel.slint # CDE Front Panel +│ │ ├── taskbar.slint # Window list + clock +│ │ └── app-drawer.slint # App launcher +│ └── src/ # CODE AI TERRITORY +│ ├── main.rs +│ ├── panel.rs +│ ├── taskbar.rs +│ ├── clock.rs +│ └── launcher.rs +├── neocde-filemanager/ # App (Slint, xdg-shell) +│ ├── Cargo.toml +│ ├── build.rs +│ ├── ui/ +│ │ └── file-manager.slint +│ └── src/ +│ ├── main.rs +│ └── filesystem.rs +├── neocde-terminal/ # App (custom GPU or Slint) +├── neocde-settings/ # App (Slint) +│ ├── ui/ +│ │ └── style-manager.slint +│ └── src/ +└── Cargo.toml # Workspace root +``` + +## Build Order + +1. **token-codegen** — build.rs library: tokens.toml → theme.slint + wrsrvd-theme.ron +2. **neocde-shell (Front Panel only)** — proves: Pencil tokens → TOML → Slint → layer-shell → WayRay +3. **neocde-wm** — connect to wrsrvd, CDE floating layout, `use_ssd` +4. **neocde-shell (Taskbar)** — second layer-shika surface, foreign-toplevel window list +5. **neocde-filemanager** — first standard Slint app (xdg-shell) +6. **neocde-settings / Style Manager** — theme editor that writes back to tokens.toml +7. **neocde-terminal** — may need custom renderer for terminal grid performance diff --git a/untitled.pen b/untitled.pen index 82ec837..44b0914 100644 --- a/untitled.pen +++ b/untitled.pen @@ -1,18 +1,6 @@ { "version": "2.10", "children": [ - { - "type": "frame", - "id": "bi8Au", - "x": 0, - "y": 0, - "name": "Frame", - "clip": true, - "width": 800, - "height": 600, - "fill": "#FFFFFF", - "layout": "none" - }, { "type": "rectangle", "id": "szSJb", @@ -32,9 +20,8 @@ "id": "qgQvM", "x": -801, "y": 800, - "name": "Design System - CDE Glassy", - "fill": "$desktop-bg", - "cornerRadius": 12, + "name": "Design System - Glassy Workstation", + "fill": "$color-background", "gap": 60, "padding": 40, "children": [ @@ -49,27 +36,36 @@ "type": "text", "id": "sfLO3", "name": "lblButtons", - "fill": "$text-primary", + "fill": "$color-text", "content": "Buttons & Controls", - "fontFamily": "$font-main", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-lg", - "fontWeight": "bold" + "fontWeight": "600" }, { "type": "frame", "id": "mqxJC", "name": "Button/Default", "reusable": true, - "fill": "$button-bg", - "cornerRadius": "$corner-sm", + "fill": "$color-frame", + "cornerRadius": "$radius-inner", "stroke": { "align": "inside", "thickness": 1, - "fill": "$button-border" + "fill": "$color-highlight-border" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "$color-shadow-inset-light", + "offset": { + "x": 2, + "y": 2 + } }, "padding": [ - 6, - 16 + 8, + 20 ], "justifyContent": "center", "alignItems": "center", @@ -78,9 +74,9 @@ "type": "text", "id": "OswDM", "name": "btnText", - "fill": "$text-primary", + "fill": "$color-text", "content": "Button", - "fontFamily": "$font-main", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-sm", "fontWeight": "normal" } @@ -89,18 +85,18 @@ { "type": "frame", "id": "4Ke8n", - "name": "Button/Active", + "name": "Button/Primary", "reusable": true, - "fill": "$accent-dark", - "cornerRadius": "$corner-sm", + "fill": "$color-primary", + "cornerRadius": "$radius-inner", "stroke": { "align": "inside", "thickness": 1, - "fill": "$accent" + "fill": "$color-primary-hover" }, "padding": [ - 6, - 16 + 8, + 20 ], "justifyContent": "center", "alignItems": "center", @@ -109,9 +105,9 @@ "type": "text", "id": "J4fDc", "name": "btnActiveText", - "fill": "$text-primary", - "content": "Active", - "fontFamily": "$font-main", + "fill": "$color-text", + "content": "Primary", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-sm", "fontWeight": "normal" } @@ -122,16 +118,16 @@ "id": "nMjkg", "name": "Button/Small", "reusable": true, - "fill": "$button-bg", - "cornerRadius": "$corner-sm", + "fill": "$color-frame", + "cornerRadius": "$radius-inner", "stroke": { "align": "inside", "thickness": 1, - "fill": "$button-border" + "fill": "$color-highlight-border" }, "padding": [ 4, - 10 + 12 ], "justifyContent": "center", "alignItems": "center", @@ -140,9 +136,9 @@ "type": "text", "id": "gFaYH", "name": "btnSmText", - "fill": "$text-primary", + "fill": "$color-text", "content": "Small", - "fontFamily": "$font-main", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xs", "fontWeight": "normal" } @@ -153,10 +149,14 @@ "id": "ohupx", "name": "Window/CloseButton", "reusable": true, - "width": 14, - "height": 14, - "fill": "$danger", - "cornerRadius": 7, + "width": 16, + "height": 16, + "fill": "$color-accent", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$color-highlight-border" + }, "justifyContent": "center", "alignItems": "center", "children": [ @@ -164,10 +164,10 @@ "type": "text", "id": "UKOfS", "name": "closX", - "fill": "#FFFFFF", + "fill": "$color-text", "content": "×", - "fontFamily": "$font-main", - "fontSize": 10, + "fontFamily": "IBM Plex Sans", + "fontSize": 11, "fontWeight": "normal" } ] @@ -177,14 +177,13 @@ "id": "tHuug", "name": "Window/MinButton", "reusable": true, - "width": 14, - "height": 14, - "fill": "$accent-dark", - "cornerRadius": 7, + "width": 16, + "height": 16, + "fill": "$color-frame", "stroke": { "align": "inside", "thickness": 1, - "fill": "$accent" + "fill": "$color-highlight-border" }, "justifyContent": "center", "alignItems": "center", @@ -193,10 +192,10 @@ "type": "text", "id": "8rUOl", "name": "minDash", - "fill": "$text-primary", + "fill": "$color-muted", "content": "–", - "fontFamily": "$font-main", - "fontSize": 9, + "fontFamily": "IBM Plex Sans", + "fontSize": 10, "fontWeight": "normal" } ] @@ -206,14 +205,13 @@ "id": "hZcoI", "name": "Window/MaxButton", "reusable": true, - "width": 14, - "height": 14, - "fill": "$accent-dark", - "cornerRadius": 7, + "width": 16, + "height": 16, + "fill": "$color-frame", "stroke": { "align": "inside", "thickness": 1, - "fill": "$accent" + "fill": "$color-highlight-border" }, "justifyContent": "center", "alignItems": "center", @@ -222,10 +220,10 @@ "type": "text", "id": "14mfZ", "name": "maxSq", - "fill": "$text-primary", + "fill": "$color-muted", "content": "□", - "fontFamily": "$font-main", - "fontSize": 9, + "fontFamily": "IBM Plex Sans", + "fontSize": 10, "fontWeight": "normal" } ] @@ -243,11 +241,11 @@ "type": "text", "id": "KqIDo", "name": "lblWindow", - "fill": "$text-primary", + "fill": "$color-text", "content": "Window Chrome", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-lg", - "fontWeight": "bold" + "fontWeight": "600" }, { "type": "frame", @@ -255,13 +253,23 @@ "name": "Window/Chrome", "reusable": true, "clip": true, - "width": 420, - "fill": "$window-bg", - "cornerRadius": "$window-corner", + "width": 480, + "fill": "$color-frame", + "cornerRadius": "$radius-outer", "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$window-border" + "align": "outside", + "thickness": "$border-thick", + "fill": "$color-frame" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#00000099", + "offset": { + "x": 0, + "y": 16 + }, + "blur": 32 }, "layout": "vertical", "children": [ @@ -270,9 +278,9 @@ "id": "BeT1L", "name": "TitleBar", "width": "fill_container", - "fill": "$title-bar-bg", + "fill": "$color-frame", "padding": [ - 6, + 0, 10 ], "justifyContent": "space_between", @@ -289,20 +297,19 @@ "type": "frame", "id": "MtBlo", "name": "titleIcon", - "width": 14, - "height": 14, - "fill": "$accent", - "cornerRadius": 3 + "width": 16, + "height": 16, + "fill": "$color-primary" }, { "type": "text", "id": "Lp22h", "name": "titleText", - "fill": "$title-bar-text", + "fill": "$color-text", "content": "Window Title", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-sm", - "fontWeight": "bold" + "fontWeight": "600" } ] }, @@ -310,7 +317,7 @@ "type": "frame", "id": "CTFM9", "name": "titleBtns", - "gap": 6, + "gap": 4, "alignItems": "center", "children": [ { @@ -340,19 +347,19 @@ "id": "jzspB", "name": "Content", "width": "fill_container", - "height": 200, - "fill": "$surface-glass", + "height": 220, + "fill": "$color-surface", "layout": "vertical", - "padding": 12, + "padding": "$spacing-md", "children": [ { "type": "text", "id": "yy46B", "name": "contentPlaceholder", - "fill": "$text-secondary", + "fill": "$color-muted", "content": "Window content area", - "fontFamily": "IBM Plex Mono", - "fontSize": "$font-size-sm", + "fontFamily": "IBM Plex Sans", + "fontSize": "$font-size-body", "fontWeight": "normal" } ] @@ -372,11 +379,11 @@ "type": "text", "id": "Lkj1b", "name": "lblInputs", - "fill": "$text-primary", + "fill": "$color-text", "content": "Inputs & Tabs", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-lg", - "fontWeight": "bold" + "fontWeight": "600" }, { "type": "frame", @@ -384,12 +391,21 @@ "name": "Input/Default", "reusable": true, "width": 220, - "fill": "$input-bg", - "cornerRadius": "$corner-sm", + "fill": "$color-input-bg", + "cornerRadius": "$radius-inner", "stroke": { "align": "inside", "thickness": 1, - "fill": "$input-border" + "fill": "$color-frame" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "$color-shadow-inset-dark", + "offset": { + "x": 2, + "y": 2 + } }, "padding": [ 6, @@ -401,7 +417,7 @@ "type": "text", "id": "LYq3k", "name": "inputText", - "fill": "$text-muted", + "fill": "$color-muted", "content": "Input text...", "fontFamily": "IBM Plex Mono", "fontSize": "$font-size-sm", @@ -415,29 +431,25 @@ "name": "MenuBar", "reusable": true, "width": "fill_container", - "fill": "$surface-medium", - "padding": [ - 0, - 4 - ], + "fill": "$color-frame", "children": [ { "type": "frame", "id": "GX1yB", "name": "MenuItem", "padding": [ - 4, - 10 + 6, + 12 ], "children": [ { "type": "text", "id": "Ue2QC", "name": "menuText1", - "fill": "$text-secondary", + "fill": "$color-text", "content": "File", - "fontFamily": "IBM Plex Mono", - "fontSize": "$font-size-xs", + "fontFamily": "IBM Plex Sans", + "fontSize": "$font-size-sm", "fontWeight": "normal" } ] @@ -447,18 +459,18 @@ "id": "4cQHb", "name": "menuItem2", "padding": [ - 4, - 10 + 6, + 12 ], "children": [ { "type": "text", "id": "TkASg", "name": "menuText2", - "fill": "$text-secondary", + "fill": "$color-text", "content": "Edit", - "fontFamily": "IBM Plex Mono", - "fontSize": "$font-size-xs", + "fontFamily": "IBM Plex Sans", + "fontSize": "$font-size-sm", "fontWeight": "normal" } ] @@ -468,18 +480,18 @@ "id": "5NwBV", "name": "menuItem3", "padding": [ - 4, - 10 + 6, + 12 ], "children": [ { "type": "text", "id": "BHZx2", "name": "menuText3", - "fill": "$text-secondary", + "fill": "$color-text", "content": "View", - "fontFamily": "IBM Plex Mono", - "fontSize": "$font-size-xs", + "fontFamily": "IBM Plex Sans", + "fontSize": "$font-size-sm", "fontWeight": "normal" } ] @@ -497,17 +509,11 @@ "id": "JhUSn", "name": "Tab/Active", "reusable": true, - "fill": "$accent-dark", - "cornerRadius": [ - 6, - 6, - 0, - 0 - ], + "fill": "$color-terminal-bg", "stroke": { "align": "inside", - "thickness": 1, - "fill": "$accent" + "thickness": 0, + "fill": "$color-frame" }, "padding": [ 6, @@ -518,9 +524,9 @@ "type": "text", "id": "SoYUn", "name": "tabActiveText", - "fill": "$text-primary", + "fill": "$color-text", "content": "Active Tab", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xs", "fontWeight": "normal" } @@ -531,17 +537,11 @@ "id": "nA6SK", "name": "Tab/Inactive", "reusable": true, - "fill": "$button-bg", - "cornerRadius": [ - 6, - 6, - 0, - 0 - ], + "fill": "$color-frame", "stroke": { "align": "inside", - "thickness": 1, - "fill": "$button-border" + "thickness": 0, + "fill": "$color-frame" }, "padding": [ 6, @@ -552,9 +552,9 @@ "type": "text", "id": "basi4", "name": "tabInactiveText", - "fill": "$text-muted", + "fill": "$color-muted", "content": "Inactive Tab", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xs", "fontWeight": "normal" } @@ -575,28 +575,28 @@ "type": "text", "id": "lm7lq", "name": "lblMisc", - "fill": "$text-primary", + "fill": "$color-text", "content": "Icons & Taskbar", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-lg", - "fontWeight": "bold" + "fontWeight": "600" }, { "type": "frame", "id": "s44jv", "name": "FolderIcon", "reusable": true, - "width": 64, + "width": 80, "layout": "vertical", - "gap": 4, + "gap": 6, "alignItems": "center", "children": [ { "type": "frame", "id": "encLP", "name": "folderShape", - "width": 40, - "height": 32, + "width": 48, + "height": 38, "fill": { "type": "gradient", "gradientType": "linear", @@ -607,35 +607,45 @@ }, "colors": [ { - "color": "$folder-color", + "color": "$color-folder", "position": 0 }, { - "color": "$folder-shadow", + "color": "$color-folder-shadow", "position": 1 } ] }, "cornerRadius": [ - 4, - 4, 2, - 2 - ] + 2, + 1, + 1 + ], + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#00000066", + "offset": { + "x": 0, + "y": 4 + }, + "blur": 8 + } }, { "type": "frame", "id": "tpTz0", "layoutPosition": "absolute", "x": 2, - "y": -4, + "y": -6, "name": "folderTab", - "width": 18, - "height": 6, - "fill": "$folder-color", + "width": 22, + "height": 8, + "fill": "$color-folder", "cornerRadius": [ - 3, - 3, + 2, + 2, 0, 0 ] @@ -644,14 +654,15 @@ "type": "text", "id": "dL9Kk", "name": "folderLabel", - "fill": "$text-secondary", + "fill": "$color-muted", "textGrowth": "fixed-width", - "width": 64, + "width": 80, "content": "Folder", "textAlign": "center", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xs", - "fontWeight": "normal" + "fontWeight": "normal", + "letterSpacing": 1 } ] }, @@ -660,17 +671,26 @@ "id": "2jRRx", "name": "TaskbarButton", "reusable": true, - "fill": "$button-bg", - "cornerRadius": "$corner-sm", + "fill": "$color-frame", + "cornerRadius": "$radius-inner", "stroke": { "align": "inside", "thickness": 1, - "fill": "$button-border" + "fill": "$color-highlight-border" }, - "gap": 6, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "$color-shadow-inset-light", + "offset": { + "x": 2, + "y": 2 + } + }, + "gap": 8, "padding": [ - 6, - 12 + 8, + 14 ], "alignItems": "center", "children": [ @@ -678,21 +698,22 @@ "type": "icon_font", "id": "cRTVg", "name": "taskbarIcon", - "width": 14, - "height": 14, + "width": 16, + "height": 16, "iconFontName": "monitor", "iconFontFamily": "lucide", - "fill": "$accent" + "fill": "$color-primary" }, { "type": "text", "id": "hGoc9", "name": "taskbarLabel", - "fill": "$text-primary", + "fill": "$color-text", "content": "App Name", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xs", - "fontWeight": "normal" + "fontWeight": "normal", + "letterSpacing": 1 } ] }, @@ -701,17 +722,17 @@ "id": "nciO8", "name": "TaskbarButton/Active", "reusable": true, - "fill": "$accent-dark", - "cornerRadius": "$corner-sm", + "fill": "$color-primary", + "cornerRadius": "$radius-inner", "stroke": { "align": "inside", "thickness": 1, - "fill": "$accent" + "fill": "$color-primary-hover" }, - "gap": 6, + "gap": 8, "padding": [ - 6, - 12 + 8, + 14 ], "alignItems": "center", "children": [ @@ -719,21 +740,22 @@ "type": "icon_font", "id": "4xZk9", "name": "taskbarIconA", - "width": 14, - "height": 14, + "width": 16, + "height": 16, "iconFontName": "monitor", "iconFontFamily": "lucide", - "fill": "$text-primary" + "fill": "$color-text" }, { "type": "text", "id": "0vhX9", "name": "taskbarLabelA", - "fill": "$text-primary", + "fill": "$color-text", "content": "Active App", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xs", - "fontWeight": "normal" + "fontWeight": "normal", + "letterSpacing": 1 } ] }, @@ -742,15 +764,24 @@ "id": "9C107", "name": "StatusBar", "reusable": true, - "width": 300, - "fill": "$surface-dark", + "width": 360, + "fill": "$color-frame", "stroke": { "align": "inside", "thickness": 1, - "fill": "$divider" + "fill": "$color-highlight-border" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "$color-shadow-inset-dark", + "offset": { + "x": 2, + "y": 2 + } }, "padding": [ - 4, + 0, 10 ], "justifyContent": "space_between", @@ -760,21 +791,23 @@ "type": "text", "id": "LgBQm", "name": "statusLeft", - "fill": "$text-muted", + "fill": "$color-muted", "content": "Status message", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xs", - "fontWeight": "normal" + "fontWeight": "normal", + "letterSpacing": 1 }, { "type": "text", "id": "Jf8QV", "name": "statusRight", - "fill": "$text-muted", + "fill": "$color-muted", "content": "Ready", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xs", - "fontWeight": "normal" + "fontWeight": "normal", + "letterSpacing": 1 } ] }, @@ -785,7 +818,7 @@ "reusable": true, "width": 200, "height": 1, - "fill": "$divider", + "fill": "$color-divider", "layout": "none" }, { @@ -794,9 +827,8 @@ "name": "Scrollbar", "reusable": true, "width": 10, - "height": 100, - "fill": "$scrollbar-bg", - "cornerRadius": 5, + "height": 120, + "fill": "$color-scrollbar-track", "layout": "vertical", "children": [ { @@ -804,9 +836,275 @@ "id": "YoDa1", "name": "scrollThumb", "width": "fill_container", - "height": 30, - "fill": "$scrollbar-thumb", - "cornerRadius": 5 + "height": 36, + "fill": "$color-scrollbar-thumb", + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "$color-shadow-inset-light", + "offset": { + "x": 2, + "y": 2 + } + } + } + ] + } + ] + }, + { + "type": "frame", + "id": "BgmOK", + "name": "Panel & Workspaces", + "layout": "vertical", + "gap": 24, + "children": [ + { + "type": "text", + "id": "SmtrJ", + "name": "lblPanel", + "fill": "$color-text", + "content": "Panel & Workspaces", + "fontFamily": "IBM Plex Sans", + "fontSize": "$font-size-lg", + "fontWeight": "600" + }, + { + "type": "frame", + "id": "ETPtK", + "name": "WorkspaceButton", + "reusable": true, + "width": 72, + "height": 32, + "fill": "$color-frame", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$color-highlight-border" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "$color-shadow-inset-dark", + "offset": { + "x": 2, + "y": 2 + } + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "jaoJ7", + "name": "wsBtnText", + "fill": "$color-muted", + "content": "One", + "fontFamily": "IBM Plex Sans", + "fontSize": "$font-size-xs", + "fontWeight": "500", + "letterSpacing": 1 + } + ] + }, + { + "type": "frame", + "id": "Fk4hg", + "name": "WorkspaceButton/Active", + "reusable": true, + "width": 72, + "height": 32, + "fill": "$color-primary", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$color-primary-hover" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "$color-shadow-inset-light", + "offset": { + "x": 2, + "y": 2 + } + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "mYk0W", + "name": "wsBtnActiveText", + "fill": "$color-text", + "content": "One", + "fontFamily": "IBM Plex Sans", + "fontSize": "$font-size-xs", + "fontWeight": "600", + "letterSpacing": 1 + } + ] + }, + { + "type": "frame", + "id": "jrOJC", + "name": "FrontPanel", + "reusable": true, + "width": 640, + "fill": "$color-panel-bg", + "cornerRadius": "$radius-panel", + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#00000099", + "offset": { + "x": 0, + "y": 16 + }, + "blur": 32 + }, + "gap": 16, + "padding": [ + 12, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "CCZKS", + "name": "PanelIcons", + "gap": 20, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "RDdNV", + "name": "fpIcon1", + "width": 40, + "height": 40, + "iconFontName": "folder", + "iconFontFamily": "lucide", + "fill": "$color-primary" + }, + { + "type": "icon_font", + "id": "rxmP0", + "name": "fpIcon2", + "width": 40, + "height": 40, + "iconFontName": "terminal", + "iconFontFamily": "lucide", + "fill": "$color-muted" + }, + { + "type": "icon_font", + "id": "n7CpD", + "name": "fpIcon3", + "width": 40, + "height": 40, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$color-muted" + } + ] + }, + { + "type": "frame", + "id": "7sMuV", + "name": "fpDiv1", + "width": 1, + "height": 48, + "fill": "$color-divider" + }, + { + "type": "frame", + "id": "bcAOJ", + "name": "fpWorkspaces", + "gap": 4, + "alignItems": "center", + "children": [ + { + "id": "asZ8n", + "type": "ref", + "ref": "Fk4hg", + "name": "fpWs1" + }, + { + "id": "FcVTn", + "type": "ref", + "ref": "ETPtK", + "name": "fpWs2", + "descendants": { + "jaoJ7": { + "content": "Two" + } + } + }, + { + "id": "CoFEW", + "type": "ref", + "ref": "ETPtK", + "name": "fpWs3", + "descendants": { + "jaoJ7": { + "content": "Three" + } + } + }, + { + "id": "PWRBc", + "type": "ref", + "ref": "ETPtK", + "name": "fpWs4", + "descendants": { + "jaoJ7": { + "content": "Four" + } + } + } + ] + }, + { + "type": "frame", + "id": "9FkPy", + "name": "fpDiv2", + "width": 1, + "height": 48, + "fill": "$color-divider" + }, + { + "type": "frame", + "id": "arD1z", + "name": "fpClock", + "layout": "vertical", + "gap": 2, + "justifyContent": "center", + "alignItems": "end", + "children": [ + { + "type": "text", + "id": "fM7MY", + "name": "fpClockTime", + "fill": "$color-text", + "content": "14:37", + "fontFamily": "IBM Plex Mono", + "fontSize": "$font-size-sm", + "fontWeight": "600" + }, + { + "type": "text", + "id": "fFGaI", + "name": "fpClockDate", + "fill": "$color-muted", + "content": "Apr 9", + "fontFamily": "IBM Plex Mono", + "fontSize": "$font-size-xs", + "fontWeight": "normal" + } + ] } ] } @@ -823,7 +1121,7 @@ "clip": true, "width": 620, "height": 500, - "fill": "$desktop-bg", + "fill": "$color-background", "layout": "vertical", "children": [ { @@ -870,7 +1168,7 @@ "id": "aWN5o", "fill": "$text-secondary", "content": "File", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xs", "fontWeight": "normal" } @@ -890,7 +1188,7 @@ "id": "Jt3oU", "fill": "$text-secondary", "content": "Selected", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xs", "fontWeight": "normal" } @@ -910,7 +1208,7 @@ "id": "g2BrT", "fill": "$text-secondary", "content": "View", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xs", "fontWeight": "normal" } @@ -930,7 +1228,7 @@ "id": "xwWmy", "fill": "$text-secondary", "content": "Window", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xs", "fontWeight": "normal" } @@ -950,7 +1248,7 @@ "id": "7KWNQ", "fill": "$text-secondary", "content": "Help", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xs", "fontWeight": "normal" } @@ -1164,7 +1462,7 @@ "clip": true, "width": 520, "height": 500, - "fill": "$desktop-bg", + "fill": "$color-background", "layout": "vertical", "children": [ { @@ -1216,7 +1514,7 @@ "width": 56, "height": 56, "fill": "$button-bg", - "cornerRadius": "$corner-md", + "cornerRadius": "$radius-outer", "stroke": { "align": "inside", "thickness": 1, @@ -1240,9 +1538,9 @@ "type": "text", "id": "X5AcC", "fill": "$text-secondary", - "content": "Color", + "content": "Color Palette", "textAlign": "center", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xs", "fontWeight": "normal" } @@ -1263,7 +1561,7 @@ "width": 56, "height": 56, "fill": "$button-bg", - "cornerRadius": "$corner-md", + "cornerRadius": "$radius-outer", "stroke": { "align": "inside", "thickness": 1, @@ -1277,7 +1575,7 @@ "id": "sTlBD", "fill": "$text-secondary", "content": "Aa", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xl", "fontWeight": "bold" } @@ -1289,7 +1587,7 @@ "fill": "$text-secondary", "content": "Fonts", "textAlign": "center", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xs", "fontWeight": "normal" } @@ -1310,7 +1608,7 @@ "width": 56, "height": 56, "fill": "$button-bg", - "cornerRadius": "$corner-md", + "cornerRadius": "$radius-outer", "stroke": { "align": "inside", "thickness": 1, @@ -1336,7 +1634,7 @@ "fill": "$text-secondary", "content": "Backdrop", "textAlign": "center", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xs", "fontWeight": "normal" } @@ -1357,7 +1655,7 @@ "width": 56, "height": 56, "fill": "$button-bg", - "cornerRadius": "$corner-md", + "cornerRadius": "$radius-outer", "stroke": { "align": "inside", "thickness": 1, @@ -1383,7 +1681,7 @@ "fill": "$text-secondary", "content": "Network", "textAlign": "center", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xs", "fontWeight": "normal" } @@ -1404,7 +1702,7 @@ "width": 56, "height": 56, "fill": "$button-bg", - "cornerRadius": "$corner-md", + "cornerRadius": "$radius-outer", "stroke": { "align": "inside", "thickness": 1, @@ -1430,7 +1728,7 @@ "fill": "$text-secondary", "content": "Monitor", "textAlign": "center", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xs", "fontWeight": "normal" } @@ -1448,10 +1746,10 @@ { "type": "text", "id": "Oy28H", - "fill": "$text-primary", + "fill": "$color-text", "content": "File Manager", - "fontFamily": "IBM Plex Mono", - "fontSize": "$font-size-md", + "fontFamily": "IBM Plex Sans", + "fontSize": "$font-size-body", "fontWeight": "bold" }, { @@ -1580,13 +1878,14 @@ "descendants": { "LYq3k": { "content": "#30DE11", - "fill": "$text-primary" + "fill": "$text-primary", + "fontFamily": "IBM Plex Sans" } } }, { "type": "rectangle", - "cornerRadius": "$corner-sm", + "cornerRadius": "$radius-inner", "id": "9U5Wx", "name": "colorPreview", "fill": "#30DE11FF", @@ -1595,7 +1894,7 @@ "stroke": { "align": "inside", "thickness": 1, - "fill": "$window-border" + "fill": "$color-highlight-border" } } ] @@ -1618,9 +1917,9 @@ { "type": "text", "id": "nRtwu", - "fill": "$text-muted", + "fill": "$color-muted", "content": "Loading(1): ~/dev/1 ▸", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xs", "fontWeight": "normal" }, @@ -1630,20 +1929,18 @@ "name": "loadBar", "width": "fill_container", "height": 8, - "fill": "$surface-dark", - "cornerRadius": 4, + "fill": "$color-frame-dim", "stroke": { "align": "inside", "thickness": 1, - "fill": "$divider" + "fill": "$color-divider" }, "children": [ { "type": "rectangle", - "cornerRadius": 4, "id": "HymfP", "name": "loadFill", - "fill": "$accent", + "fill": "$color-primary", "width": 180, "height": 8 } @@ -1667,12 +1964,12 @@ "justifyContent": "end", "children": [ { - "id": "fo8ch", + "id": "ZpXuO", "type": "ref", - "ref": "mqxJC", + "ref": "4Ke8n", "name": "applyBtn", "descendants": { - "OswDM": { + "J4fDc": { "content": "Apply" } } @@ -1684,7 +1981,18 @@ "name": "cancelBtn", "descendants": { "OswDM": { - "content": "Cancel" + "content": "Revert" + } + } + }, + { + "id": "9AL5z", + "type": "ref", + "ref": "mqxJC", + "name": "okBtn", + "descendants": { + "OswDM": { + "content": "OK" } } } @@ -1706,7 +2014,8 @@ "name": "App - Terminal Console", "clip": true, "width": 560, - "fill": "$desktop-bg", + "height": 380, + "fill": "$color-background", "layout": "vertical", "children": [ { @@ -1715,12 +2024,23 @@ "name": "TerminalWindow", "clip": true, "width": "fill_container", - "fill": "$window-bg", - "cornerRadius": "$window-corner", + "height": "fill_container", + "fill": "$color-frame", + "cornerRadius": "$radius-outer", "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$window-border" + "align": "outside", + "thickness": "$border-thick", + "fill": "$color-frame" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#00000099", + "offset": { + "x": 0, + "y": 16 + }, + "blur": 32 }, "layout": "vertical", "children": [ @@ -1729,9 +2049,9 @@ "id": "VsmFN", "name": "termTitleBar", "width": "fill_container", - "fill": "$title-bar-bg", + "fill": "$color-frame", "padding": [ - 6, + 0, 10 ], "justifyContent": "space_between", @@ -1752,15 +2072,15 @@ "height": 14, "iconFontName": "terminal", "iconFontFamily": "lucide", - "fill": "$accent" + "fill": "$color-primary" }, { "type": "text", "id": "4ubmS", "name": "termTitleText", - "fill": "$title-bar-text", + "fill": "$color-text", "content": "Terminal Console", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-sm", "fontWeight": "bold" } @@ -1777,36 +2097,91 @@ "id": "Mmv7F", "type": "ref", "ref": "tHuug", - "name": "twb1" + "name": "twb1", + "descendants": { + "8rUOl": { + "fontFamily": "IBM Plex Mono" + } + } }, { "id": "RiEb6", "type": "ref", "ref": "hZcoI", - "name": "twb2" + "name": "twb2", + "descendants": { + "14mfZ": { + "fontFamily": "IBM Plex Mono" + } + } }, { "id": "wb0Rk", "type": "ref", "ref": "ohupx", - "name": "twb3" + "name": "twb3", + "descendants": { + "UKOfS": { + "fontFamily": "IBM Plex Mono" + } + } } ] } ] }, + { + "type": "frame", + "id": "MURMd", + "name": "termTabBar", + "width": "fill_container", + "fill": "$color-frame", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$color-divider" + }, + "children": [ + { + "id": "C2tac", + "type": "ref", + "ref": "JhUSn", + "name": "tab1", + "descendants": { + "SoYUn": { + "content": "~/dev/", + "fontFamily": "IBM Plex Mono" + } + } + }, + { + "id": "HpZQF", + "type": "ref", + "ref": "nA6SK", + "name": "tab2", + "descendants": { + "basi4": { + "content": "~/logs/", + "fontFamily": "IBM Plex Mono" + } + } + } + ] + }, { "type": "frame", "id": "37d6T", "name": "termPromptBar", "width": "fill_container", - "fill": "$surface-medium", + "fill": "$color-frame", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, - "fill": "$divider" + "fill": "$color-divider" }, "gap": 8, "padding": [ @@ -1819,7 +2194,7 @@ "type": "text", "id": "Y24KI", "name": "termPromptLabel", - "fill": "$accent", + "fill": "$color-primary", "content": "user@galaxy-ws", "fontFamily": "IBM Plex Mono", "fontSize": "$font-size-xs", @@ -1829,12 +2204,11 @@ "type": "frame", "id": "6f6P5", "name": "termPromptHex", - "fill": "$input-bg", - "cornerRadius": 3, + "fill": "$color-input-bg", "stroke": { "align": "inside", "thickness": 1, - "fill": "$input-border" + "fill": "$color-divider" }, "padding": [ 2, @@ -1857,162 +2231,179 @@ }, { "type": "frame", - "id": "lBpUW", - "name": "termBody", + "id": "tECFT", + "name": "termBodyWrap", "width": "fill_container", - "fill": "$surface-dark", - "layout": "vertical", - "gap": 6, - "padding": [ - 12, - 14 - ], + "height": "fill_container", "children": [ { "type": "frame", - "id": "Kjmur", - "name": "termLine1", + "id": "lBpUW", + "name": "termBody", "width": "fill_container", + "height": "fill_container", + "fill": "$color-terminal-bg", + "layout": "vertical", + "gap": 6, + "padding": [ + 12, + 14 + ], "children": [ + { + "type": "frame", + "id": "Kjmur", + "name": "termLine1", + "width": "fill_container", + "children": [ + { + "type": "text", + "id": "LoSzU", + "name": "termPS1", + "fill": "$color-primary", + "content": "[user@galaxy-ws ~/dev/] $ ", + "fontFamily": "IBM Plex Mono", + "fontSize": "$font-size-sm", + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Jv0Ja", + "name": "termCmd1", + "fill": "$color-text", + "content": "ls -la -h", + "fontFamily": "IBM Plex Mono", + "fontSize": "$font-size-sm", + "fontWeight": "normal" + } + ] + }, { "type": "text", - "id": "LoSzU", - "name": "termPS1", - "fill": "$accent", - "content": "[user@galaxy-ws ~/dev/] $ ", + "id": "srpIa", + "name": "termLine2", + "fill": "$color-muted", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "total 48K", "fontFamily": "IBM Plex Mono", - "fontSize": "$font-size-xs", + "fontSize": "$font-size-sm", "fontWeight": "normal" }, { "type": "text", - "id": "Jv0Ja", - "name": "termCmd1", - "fill": "$text-primary", - "content": "ls -la -h", + "id": "XW3Ab", + "name": "termLine3", + "fill": "$color-muted", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "drwxr-xr-x 12 user staff 384B Apr 9 14:37 .", "fontFamily": "IBM Plex Mono", - "fontSize": "$font-size-xs", + "fontSize": "$font-size-sm", "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "srpIa", - "name": "termLine2", - "fill": "$text-secondary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "total 48K", - "fontFamily": "IBM Plex Mono", - "fontSize": "$font-size-xs", - "fontWeight": "normal" - }, - { - "type": "text", - "id": "XW3Ab", - "name": "termLine3", - "fill": "$text-secondary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "drwxr-xr-x 12 user staff 384B Apr 9 14:37 .", - "fontFamily": "IBM Plex Mono", - "fontSize": "$font-size-xs", - "fontWeight": "normal" - }, - { - "type": "text", - "id": "JMZZ8", - "name": "termLine4", - "fill": "$text-secondary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "drwxr-xr-x 6 user staff 192B Apr 9 10:22 ..", - "fontFamily": "IBM Plex Mono", - "fontSize": "$font-size-xs", - "fontWeight": "normal" - }, - { - "type": "text", - "id": "IjtIP", - "name": "termLine5", - "fill": "$text-secondary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "-rw-r--r-- 1 user staff 2.4K Apr 9 14:35 config.yml", - "fontFamily": "IBM Plex Mono", - "fontSize": "$font-size-xs", - "fontWeight": "normal" - }, - { - "type": "text", - "id": "tjLEw", - "name": "termLine6", - "fill": "$text-secondary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "drwxr-xr-x 8 user staff 256B Apr 8 09:15 src", - "fontFamily": "IBM Plex Mono", - "fontSize": "$font-size-xs", - "fontWeight": "normal" - }, - { - "type": "text", - "id": "SMM5E", - "name": "termLine7", - "fill": "$text-secondary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "-rw-r--r-- 1 user staff 1.8K Apr 7 16:42 Makefile", - "fontFamily": "IBM Plex Mono", - "fontSize": "$font-size-xs", - "fontWeight": "normal" - }, - { - "type": "text", - "id": "ZPef8", - "name": "termLine8", - "fill": "$text-secondary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "drwxr-xr-x 4 user staff 128B Apr 6 11:30 build", - "fontFamily": "IBM Plex Mono", - "fontSize": "$font-size-xs", - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "qCXLa", - "name": "termLine9", - "width": "fill_container", - "children": [ + }, { "type": "text", - "id": "i4uM3", - "name": "termPS2", - "fill": "$accent", - "content": "[user@galaxy-ws ~/dev/] $ ", + "id": "JMZZ8", + "name": "termLine4", + "fill": "$color-muted", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "drwxr-xr-x 6 user staff 192B Apr 9 10:22 ..", "fontFamily": "IBM Plex Mono", - "fontSize": "$font-size-xs", + "fontSize": "$font-size-sm", + "fontWeight": "normal" + }, + { + "type": "text", + "id": "IjtIP", + "name": "termLine5", + "fill": "$color-muted", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "-rw-r--r-- 1 user staff 2.4K Apr 9 14:35 config.yml", + "fontFamily": "IBM Plex Mono", + "fontSize": "$font-size-sm", + "fontWeight": "normal" + }, + { + "type": "text", + "id": "tjLEw", + "name": "termLine6", + "fill": "$color-muted", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "drwxr-xr-x 8 user staff 256B Apr 8 09:15 src", + "fontFamily": "IBM Plex Mono", + "fontSize": "$font-size-sm", + "fontWeight": "normal" + }, + { + "type": "text", + "id": "SMM5E", + "name": "termLine7", + "fill": "$color-muted", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "-rw-r--r-- 1 user staff 1.8K Apr 7 16:42 Makefile", + "fontFamily": "IBM Plex Mono", + "fontSize": "$font-size-sm", + "fontWeight": "normal" + }, + { + "type": "text", + "id": "ZPef8", + "name": "termLine8", + "fill": "$color-muted", + "textGrowth": "fixed-width", + "width": "fill_container", + "content": "drwxr-xr-x 4 user staff 128B Apr 6 11:30 build", + "fontFamily": "IBM Plex Mono", + "fontSize": "$font-size-sm", "fontWeight": "normal" }, { "type": "frame", - "id": "Uso9R", - "name": "termCursor", - "width": 7, - "height": 12, - "fill": "$accent" + "id": "qCXLa", + "name": "termLine9", + "width": "fill_container", + "children": [ + { + "type": "text", + "id": "i4uM3", + "name": "termPS2", + "fill": "$color-primary", + "content": "[user@galaxy-ws ~/dev/] $ ", + "fontFamily": "IBM Plex Mono", + "fontSize": "$font-size-sm", + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "Uso9R", + "name": "termCursor", + "width": 7, + "height": 12, + "fill": "$color-primary" + } + ] + }, + { + "type": "frame", + "id": "vSaCf", + "name": "termSpacer", + "width": "fill_container", + "height": "fill_container", + "fill": "$color-terminal-bg" } ] }, { - "type": "frame", - "id": "vSaCf", - "name": "termSpacer", - "width": "fill_container", - "height": 80, - "fill": "$surface-dark" + "id": "awbVn", + "type": "ref", + "ref": "6ISmw", + "height": "fill_container", + "name": "scrollbar" } ] }, @@ -2021,13 +2412,13 @@ "id": "pzRa9", "name": "termStatus", "width": "fill_container", - "fill": "$surface-medium", + "fill": "$color-frame", "stroke": { "align": "inside", "thickness": { "top": 1 }, - "fill": "$divider" + "fill": "$color-divider" }, "padding": [ 4, @@ -2040,7 +2431,7 @@ "type": "text", "id": "ZP6P8", "name": "termStatusL", - "fill": "$text-muted", + "fill": "$color-muted", "content": "~/dev/", "fontFamily": "IBM Plex Mono", "fontSize": "$font-size-xs", @@ -2050,7 +2441,7 @@ "type": "text", "id": "76537", "name": "termStatusR", - "fill": "$text-muted", + "fill": "$color-muted", "content": "zsh | UTF-8", "fontFamily": "IBM Plex Mono", "fontSize": "$font-size-xs", @@ -2070,7 +2461,8 @@ "name": "App - Taskbar & Clock", "clip": true, "width": 900, - "fill": "$desktop-bg", + "height": 80, + "fill": "$color-background", "layout": "vertical", "children": [ { @@ -2078,16 +2470,26 @@ "id": "UG6go", "name": "Taskbar", "width": "fill_container", - "fill": "$taskbar-bg", - "cornerRadius": "$corner-md", + "fill": "$color-panel-bg", + "cornerRadius": "$radius-panel", "stroke": { "align": "inside", "thickness": 1, - "fill": "$window-border" + "fill": "$color-highlight-border" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#00000099", + "offset": { + "x": 0, + "y": 16 + }, + "blur": 32 }, "padding": [ - 6, - 12 + 12, + 24 ], "justifyContent": "space_between", "alignItems": "center", @@ -2096,9 +2498,59 @@ "type": "frame", "id": "FyQMx", "name": "taskLeft", - "gap": 6, + "gap": 4, "alignItems": "center", "children": [ + { + "type": "frame", + "id": "n2jah", + "name": "workspaces", + "gap": 2, + "alignItems": "center", + "children": [ + { + "id": "R1MGv", + "type": "ref", + "ref": "Fk4hg", + "name": "ws1", + "descendants": { + "mYk0W": { + "content": "One" + } + } + }, + { + "id": "BmAXA", + "type": "ref", + "ref": "ETPtK", + "name": "ws2", + "descendants": { + "jaoJ7": { + "content": "Two" + } + } + }, + { + "id": "781yI", + "type": "ref", + "ref": "ETPtK", + "name": "ws3", + "descendants": { + "jaoJ7": { + "content": "Three" + } + } + } + ] + }, + { + "type": "frame", + "id": "p53I6", + "name": "wsDivider", + "width": 1, + "height": 24, + "fill": "$color-divider" + }, { "id": "Bf7bU", "type": "ref", @@ -2140,42 +2592,6 @@ "content": "GearBox" } } - }, - { - "type": "frame", - "id": "mGf38", - "name": "taskDivider", - "width": 1, - "height": 24, - "fill": "$divider" - }, - { - "id": "y0tVD", - "type": "ref", - "ref": "2jRRx", - "name": "tb4", - "descendants": { - "cRTVg": { - "iconFontName": "tv" - }, - "hGoc9": { - "content": "File Manager" - } - } - }, - { - "id": "RuaTQ", - "type": "ref", - "ref": "2jRRx", - "name": "tb5", - "descendants": { - "cRTVg": { - "iconFontName": "terminal" - }, - "hGoc9": { - "content": "Settings" - } - } } ] }, @@ -2183,7 +2599,7 @@ "type": "frame", "id": "w8jRK", "name": "taskRight", - "gap": 12, + "gap": 8, "alignItems": "center", "children": [ { @@ -2192,18 +2608,18 @@ "name": "taskSep", "width": 1, "height": 24, - "fill": "$divider" + "fill": "$color-divider" }, { "type": "frame", "id": "S2Y9C", "name": "ClockWidget", - "fill": "$surface-medium", - "cornerRadius": "$corner-md", + "fill": "$color-frame", + "cornerRadius": "$radius-outer", "stroke": { "align": "inside", "thickness": 1, - "fill": "$window-border" + "fill": "$color-highlight-border" }, "gap": 16, "padding": [ @@ -2216,7 +2632,7 @@ "type": "text", "id": "jZ6nb", "name": "clockTime", - "fill": "$text-primary", + "fill": "$color-text", "content": "14:37:38", "fontFamily": "IBM Plex Mono", "fontSize": "$font-size-clock", @@ -2234,9 +2650,9 @@ "type": "text", "id": "pq083", "name": "clockLabel", - "fill": "$text-muted", + "fill": "$color-muted", "content": "IBM Plex Mono", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": 8, "fontWeight": "normal" }, @@ -2244,9 +2660,9 @@ "type": "text", "id": "nQ4nT", "name": "clockDate", - "fill": "$text-secondary", + "fill": "$color-muted", "content": "Apr 9, 2026", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xs", "fontWeight": "normal" }, @@ -2254,9 +2670,9 @@ "type": "text", "id": "RZgYB", "name": "clockTz", - "fill": "$text-muted", + "fill": "$color-muted", "content": "UTC+00 (GMT)", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": 8, "fontWeight": "normal" } @@ -2279,7 +2695,7 @@ "height": 14, "iconFontName": "wifi", "iconFontFamily": "lucide", - "fill": "$text-secondary" + "fill": "$color-muted" }, { "type": "icon_font", @@ -2289,7 +2705,7 @@ "height": 14, "iconFontName": "volume-2", "iconFontFamily": "lucide", - "fill": "$text-secondary" + "fill": "$color-muted" }, { "type": "icon_font", @@ -2299,7 +2715,7 @@ "height": 14, "iconFontName": "battery-full", "iconFontFamily": "lucide", - "fill": "$text-secondary" + "fill": "$color-muted" } ] } @@ -2317,7 +2733,7 @@ "name": "App - Action Buttons", "clip": true, "width": 180, - "fill": "$desktop-bg", + "fill": "$color-background", "layout": "vertical", "children": [ { @@ -2326,12 +2742,22 @@ "name": "ActionButtonsWindow", "clip": true, "width": "fill_container", - "fill": "$window-bg", - "cornerRadius": "$window-corner", + "fill": "$color-frame", + "cornerRadius": "$radius-outer", "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$window-border" + "align": "outside", + "thickness": "$border-thick", + "fill": "$color-frame" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#00000099", + "offset": { + "x": 0, + "y": 16 + }, + "blur": 32 }, "layout": "vertical", "children": [ @@ -2340,9 +2766,9 @@ "id": "anYic", "name": "actTitle", "width": "fill_container", - "fill": "$title-bar-bg", + "fill": "$color-frame", "padding": [ - 6, + 0, 10 ], "justifyContent": "space_between", @@ -2363,15 +2789,15 @@ "height": 12, "iconFontName": "grid-3x3", "iconFontFamily": "lucide", - "fill": "$accent" + "fill": "$color-primary" }, { "type": "text", "id": "buT3v", "name": "actTitleText", - "fill": "$title-bar-text", + "fill": "$color-text", "content": "Action Buttons", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": "$font-size-xs", "fontWeight": "bold" } @@ -2405,7 +2831,7 @@ "id": "GtV0O", "name": "actBody", "width": "fill_container", - "fill": "$surface-glass", + "fill": "$color-surface", "layout": "vertical", "gap": 6, "padding": 10, @@ -2423,12 +2849,12 @@ "name": "actBtn1", "width": "fill_container", "height": 50, - "fill": "$button-bg", - "cornerRadius": "$corner-sm", + "fill": "$color-frame", + "cornerRadius": "$radius-inner", "stroke": { "align": "inside", "thickness": 1, - "fill": "$button-border" + "fill": "$color-highlight-border" }, "layout": "vertical", "gap": 3, @@ -2443,15 +2869,15 @@ "height": 16, "iconFontName": "timer", "iconFontFamily": "lucide", - "fill": "$accent" + "fill": "$color-primary" }, { "type": "text", "id": "AFNjj", "name": "actLbl1", - "fill": "$text-secondary", + "fill": "$color-muted", "content": "Clock", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": 8, "fontWeight": "normal" } @@ -2463,12 +2889,12 @@ "name": "actBtn2", "width": "fill_container", "height": 50, - "fill": "$button-bg", - "cornerRadius": "$corner-sm", + "fill": "$color-frame", + "cornerRadius": "$radius-inner", "stroke": { "align": "inside", "thickness": 1, - "fill": "$button-border" + "fill": "$color-highlight-border" }, "layout": "vertical", "gap": 3, @@ -2483,15 +2909,15 @@ "height": 16, "iconFontName": "calculator", "iconFontFamily": "lucide", - "fill": "$accent" + "fill": "$color-primary" }, { "type": "text", "id": "KTglt", "name": "actLbl2", - "fill": "$text-secondary", + "fill": "$color-muted", "content": "Calc", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": 8, "fontWeight": "normal" } @@ -2512,12 +2938,12 @@ "name": "actBtn3", "width": "fill_container", "height": 50, - "fill": "$button-bg", - "cornerRadius": "$corner-sm", + "fill": "$color-frame", + "cornerRadius": "$radius-inner", "stroke": { "align": "inside", "thickness": 1, - "fill": "$button-border" + "fill": "$color-highlight-border" }, "layout": "vertical", "gap": 3, @@ -2532,15 +2958,15 @@ "height": 16, "iconFontName": "mail", "iconFontFamily": "lucide", - "fill": "$accent" + "fill": "$color-primary" }, { "type": "text", "id": "v2sb6", "name": "actLbl3", - "fill": "$text-secondary", + "fill": "$color-muted", "content": "Mail", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": 8, "fontWeight": "normal" } @@ -2552,12 +2978,12 @@ "name": "actBtn4", "width": "fill_container", "height": 50, - "fill": "$button-bg", - "cornerRadius": "$corner-sm", + "fill": "$color-frame", + "cornerRadius": "$radius-inner", "stroke": { "align": "inside", "thickness": 1, - "fill": "$button-border" + "fill": "$color-highlight-border" }, "layout": "vertical", "gap": 3, @@ -2572,15 +2998,15 @@ "height": 16, "iconFontName": "settings", "iconFontFamily": "lucide", - "fill": "$accent" + "fill": "$color-primary" }, { "type": "text", "id": "8QaHH", "name": "actLbl4", - "fill": "$text-secondary", + "fill": "$color-muted", "content": "Settings", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": 8, "fontWeight": "normal" } @@ -2601,12 +3027,12 @@ "name": "actBtn5", "width": "fill_container", "height": 50, - "fill": "$accent-dark", - "cornerRadius": "$corner-sm", + "fill": "$color-primary", + "cornerRadius": "$radius-inner", "stroke": { "align": "inside", "thickness": 1, - "fill": "$accent" + "fill": "$color-primary-hover" }, "layout": "vertical", "gap": 3, @@ -2621,15 +3047,15 @@ "height": 16, "iconFontName": "lock", "iconFontFamily": "lucide", - "fill": "$text-primary" + "fill": "$color-text" }, { "type": "text", "id": "dSjix", "name": "actLbl5", - "fill": "$text-primary", + "fill": "$color-text", "content": "Lock", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": 8, "fontWeight": "normal" } @@ -2641,12 +3067,12 @@ "name": "actBtn6", "width": "fill_container", "height": 50, - "fill": "$danger", - "cornerRadius": "$corner-sm", + "fill": "$color-accent", + "cornerRadius": "$radius-inner", "stroke": { "align": "inside", "thickness": 1, - "fill": "$window-border" + "fill": "$color-highlight-border" }, "layout": "vertical", "gap": 3, @@ -2669,7 +3095,7 @@ "name": "actLbl6", "fill": "#FFFFFF", "content": "Logout", - "fontFamily": "IBM Plex Mono", + "fontFamily": "IBM Plex Sans", "fontSize": 8, "fontWeight": "normal" } @@ -2682,6 +3108,1619 @@ ] } ] + }, + { + "type": "frame", + "id": "OmDHK", + "x": -801, + "y": 2186, + "name": "Screen - Desktop Space & Front Panel", + "clip": true, + "width": 1280, + "height": 800, + "fill": "$color-background", + "layout": "none", + "children": [ + { + "type": "rectangle", + "id": "WybEi", + "x": 0, + "y": 0, + "name": "grain", + "fill": { + "type": "gradient", + "gradientType": "radial", + "enabled": true, + "rotation": 0, + "size": { + "width": 1, + "height": 1 + }, + "colors": [ + { + "color": "#1E222680", + "position": 0 + }, + { + "color": "#15171AFF", + "position": 1 + } + ] + }, + "width": 1280, + "height": 800 + }, + { + "type": "frame", + "id": "hyXm1", + "x": 30, + "y": 30, + "name": "dtIcon1Frame", + "width": 80, + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "zM3I6", + "name": "dtIcon1Ic", + "width": 48, + "height": 48, + "iconFontName": "hard-drive", + "iconFontFamily": "lucide", + "fill": "$color-muted", + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#00000066", + "offset": { + "x": 0, + "y": 4 + }, + "blur": 8 + } + }, + { + "type": "text", + "id": "BhFg7", + "name": "dtIcon1Lbl", + "fill": "$color-text", + "content": "System", + "textAlign": "center", + "fontFamily": "IBM Plex Sans", + "fontSize": "$font-size-xs", + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "6iWZ4", + "x": 30, + "y": 120, + "name": "dtIcon2Frame", + "width": 80, + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "zLRBW", + "name": "dtIcon2Ic", + "width": 48, + "height": 48, + "iconFontName": "folder", + "iconFontFamily": "lucide", + "fill": "$color-folder", + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#00000066", + "offset": { + "x": 0, + "y": 4 + }, + "blur": 8 + } + }, + { + "type": "text", + "id": "qzEai", + "name": "dtIcon2Lbl", + "fill": "$color-text", + "content": "Home", + "textAlign": "center", + "fontFamily": "IBM Plex Sans", + "fontSize": "$font-size-xs", + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "6Yrz5", + "x": 30, + "y": 210, + "name": "dtIcon3Frame", + "width": 80, + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "TNuzM", + "name": "dtIcon3Ic", + "width": 48, + "height": 48, + "iconFontName": "trash-2", + "iconFontFamily": "lucide", + "fill": "$color-muted", + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#00000066", + "offset": { + "x": 0, + "y": 4 + }, + "blur": 8 + } + }, + { + "type": "text", + "id": "UfHk6", + "name": "dtIcon3Lbl", + "fill": "$color-text", + "content": "Trash", + "textAlign": "center", + "fontFamily": "IBM Plex Sans", + "fontSize": "$font-size-xs", + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "0U87N", + "x": 30, + "y": 300, + "name": "dtIcon4Frame", + "width": 80, + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "YEbwL", + "name": "dtIcon4Ic", + "width": 48, + "height": 48, + "iconFontName": "terminal", + "iconFontFamily": "lucide", + "fill": "$color-primary", + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#00000066", + "offset": { + "x": 0, + "y": 4 + }, + "blur": 8 + } + }, + { + "type": "text", + "id": "VFwJ3", + "name": "dtIcon4Lbl", + "fill": "$color-text", + "content": "Terminal", + "textAlign": "center", + "fontFamily": "IBM Plex Sans", + "fontSize": "$font-size-xs", + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "b4nhr", + "x": 240, + "y": 696, + "name": "FrontPanel", + "width": 800, + "fill": "$color-panel-bg", + "cornerRadius": "$radius-panel", + "effect": [ + { + "type": "shadow", + "shadowType": "outer", + "color": "#00000099", + "offset": { + "x": 0, + "y": 16 + }, + "blur": 32 + }, + { + "type": "background_blur", + "radius": 24 + } + ], + "gap": 16, + "padding": [ + 12, + 28 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "o4JbL", + "name": "pnlLeft", + "gap": 20, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "XHhav", + "name": "pnlFileIcon", + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "U1dlR", + "name": "pnlFileIc", + "width": 36, + "height": 36, + "iconFontName": "folder", + "iconFontFamily": "lucide", + "fill": "$color-primary" + }, + { + "type": "text", + "id": "V7YSK", + "name": "pnlFileLbl", + "fill": "$color-muted", + "content": "Files", + "fontFamily": "IBM Plex Sans", + "fontSize": 10, + "fontWeight": "500" + }, + { + "type": "ellipse", + "id": "QoeIK", + "name": "pnlFileDot", + "fill": "$color-primary", + "width": 5, + "height": 5 + } + ] + }, + { + "type": "frame", + "id": "bexGb", + "name": "pnlTermIcon", + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "UYxhH", + "name": "pnlTermIc", + "width": 36, + "height": 36, + "iconFontName": "terminal", + "iconFontFamily": "lucide", + "fill": "$color-muted" + }, + { + "type": "text", + "id": "Sp7Yx", + "name": "pnlTermLbl", + "fill": "$color-muted", + "content": "Terminal", + "fontFamily": "IBM Plex Sans", + "fontSize": 10, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "FBojK", + "name": "pnlGearIcon", + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "2zKap", + "name": "pnlGearIc", + "width": 36, + "height": 36, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$color-muted" + }, + { + "type": "text", + "id": "YQmqS", + "name": "pnlGearLbl", + "fill": "$color-muted", + "content": "Settings", + "fontFamily": "IBM Plex Sans", + "fontSize": 10, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "mjIgu", + "name": "pnlMailIcon", + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Ia0bZ", + "name": "pnlMailIc", + "width": 36, + "height": 36, + "iconFontName": "mail", + "iconFontFamily": "lucide", + "fill": "$color-muted" + }, + { + "type": "text", + "id": "oQ1FD", + "name": "pnlMailLbl", + "fill": "$color-muted", + "content": "Mail", + "fontFamily": "IBM Plex Sans", + "fontSize": 10, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "iyQ8s", + "name": "pnlDiv1", + "width": 1, + "height": 50, + "fill": "$color-divider" + }, + { + "type": "frame", + "id": "jNW0T", + "name": "pnlWsGroup", + "gap": 4, + "alignItems": "center", + "children": [ + { + "id": "Ittkb", + "type": "ref", + "ref": "Fk4hg", + "name": "ws1" + }, + { + "id": "SzZQy", + "type": "ref", + "ref": "ETPtK", + "name": "ws2", + "descendants": { + "jaoJ7": { + "content": "Two" + } + } + }, + { + "id": "cO7ez", + "type": "ref", + "ref": "ETPtK", + "name": "ws3", + "descendants": { + "jaoJ7": { + "content": "Three" + } + } + }, + { + "id": "T9VgT", + "type": "ref", + "ref": "ETPtK", + "name": "ws4", + "descendants": { + "jaoJ7": { + "content": "Four" + } + } + } + ] + }, + { + "type": "frame", + "id": "f5bT1", + "name": "pnlDiv2", + "width": 1, + "height": 50, + "fill": "$color-divider" + }, + { + "type": "frame", + "id": "quIWS", + "name": "pnlRight", + "layout": "vertical", + "gap": 2, + "justifyContent": "center", + "alignItems": "end", + "children": [ + { + "type": "text", + "id": "aLqJ5", + "name": "pnlTime", + "fill": "$color-text", + "content": "14:37:38", + "fontFamily": "IBM Plex Mono", + "fontSize": 22, + "fontWeight": "600", + "letterSpacing": 2 + }, + { + "type": "text", + "id": "8SMkO", + "name": "pnlDate", + "fill": "$color-muted", + "content": "Thu Apr 9, 2026", + "fontFamily": "IBM Plex Sans", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "XnJMq", + "name": "pnlDiv3", + "width": 1, + "height": 50, + "fill": "$color-divider" + }, + { + "type": "frame", + "id": "DLEjX", + "name": "pnlTray", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "vdIwa", + "name": "trayWifi", + "width": 18, + "height": 18, + "iconFontName": "wifi", + "iconFontFamily": "lucide", + "fill": "$color-primary" + }, + { + "type": "icon_font", + "id": "D592C", + "name": "trayVol", + "width": 18, + "height": 18, + "iconFontName": "volume-2", + "iconFontFamily": "lucide", + "fill": "$color-muted" + }, + { + "type": "icon_font", + "id": "kjQW1", + "name": "trayBatt", + "width": 18, + "height": 18, + "iconFontName": "battery-full", + "iconFontFamily": "lucide", + "fill": "$color-muted" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "IgrHZ", + "x": 579, + "y": 2186, + "name": "Screen - Application Drawer", + "clip": true, + "width": 480, + "height": 500, + "fill": "$color-background", + "layout": "none", + "children": [ + { + "type": "rectangle", + "id": "u3ike", + "x": 0, + "y": 0, + "name": "drawerBg", + "fill": "$color-background", + "width": 480, + "height": 500 + }, + { + "type": "frame", + "id": "NrMqa", + "x": 24, + "y": 24, + "name": "DrawerWindow", + "clip": true, + "width": 432, + "height": 452, + "fill": "$color-frame", + "cornerRadius": "$radius-outer", + "stroke": { + "align": "outside", + "thickness": "$border-thick", + "fill": "$color-frame" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "#00000099", + "offset": { + "x": 0, + "y": 16 + }, + "blur": 32 + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "snZbD", + "name": "drawerTitle", + "width": "fill_container", + "fill": "$color-frame", + "padding": [ + 0, + 10 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "GwBPI", + "name": "drawerTitleLeft", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CXpjj", + "name": "drawerTitleIcon", + "width": 16, + "height": 16, + "iconFontName": "layout-grid", + "iconFontFamily": "lucide", + "fill": "$color-primary" + }, + { + "type": "text", + "id": "P2lRI", + "name": "drawerTitleText", + "fill": "$color-text", + "content": "Application Drawer", + "fontFamily": "IBM Plex Sans", + "fontSize": "$font-size-sm", + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "YWOyk", + "name": "drawerTitleBtns", + "gap": 4, + "alignItems": "center", + "children": [ + { + "id": "mopmE", + "type": "ref", + "ref": "tHuug", + "name": "dtb1" + }, + { + "id": "tDGB4", + "type": "ref", + "ref": "hZcoI", + "name": "dtb2" + }, + { + "id": "1AVFh", + "type": "ref", + "ref": "ohupx", + "name": "dtb3" + } + ] + } + ] + }, + { + "type": "frame", + "id": "IRzax", + "name": "drawerSearch", + "width": "fill_container", + "fill": "$color-frame", + "gap": 8, + "padding": [ + 8, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "T3aa7", + "name": "searchIcon", + "width": 14, + "height": 14, + "iconFontName": "search", + "iconFontFamily": "lucide", + "fill": "$color-muted" + }, + { + "type": "frame", + "id": "aFYGr", + "name": "searchInput", + "width": "fill_container", + "fill": "$color-input-bg", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$color-frame" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "$color-shadow-inset-dark", + "offset": { + "x": 2, + "y": 2 + } + }, + "padding": [ + 6, + 10 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "akJwG", + "name": "searchText", + "fill": "$color-muted", + "content": "Search applications...", + "fontFamily": "IBM Plex Sans", + "fontSize": "$font-size-sm", + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "NPVYB", + "name": "AppGrid", + "width": "fill_container", + "height": "fill_container", + "fill": "$color-surface", + "layout": "vertical", + "gap": 20, + "padding": [ + 20, + 24 + ], + "children": [ + { + "type": "frame", + "id": "fwlCP", + "name": "row1", + "width": "fill_container", + "gap": 16, + "justifyContent": "space_around", + "children": [ + { + "type": "frame", + "id": "rkGrv", + "name": "app1", + "width": 80, + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "BvYeI", + "name": "app1Bg", + "width": 56, + "height": 56, + "fill": "$color-frame", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$color-highlight-border" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "$color-shadow-inset-light", + "offset": { + "x": 2, + "y": 2 + } + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Z2oCj", + "name": "app1Ic", + "width": 28, + "height": 28, + "iconFontName": "folder", + "iconFontFamily": "lucide", + "fill": "$color-folder" + } + ] + }, + { + "type": "text", + "id": "oWJqQ", + "name": "app1Lbl", + "fill": "$color-muted", + "textGrowth": "fixed-width", + "width": 80, + "content": "FILE MANAGER", + "textAlign": "center", + "fontFamily": "IBM Plex Sans", + "fontSize": 10, + "fontWeight": "500", + "letterSpacing": 1 + } + ] + }, + { + "type": "frame", + "id": "tpBkW", + "name": "app2", + "width": 80, + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "nvJUT", + "name": "app2Bg", + "width": 56, + "height": 56, + "fill": "$color-frame", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$color-highlight-border" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "$color-shadow-inset-light", + "offset": { + "x": 2, + "y": 2 + } + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "zl7UM", + "name": "app2Ic", + "width": 28, + "height": 28, + "iconFontName": "terminal", + "iconFontFamily": "lucide", + "fill": "$color-primary" + } + ] + }, + { + "type": "text", + "id": "TdkT6", + "name": "app2Lbl", + "fill": "$color-muted", + "textGrowth": "fixed-width", + "width": 80, + "content": "TERMINAL", + "textAlign": "center", + "fontFamily": "IBM Plex Sans", + "fontSize": 10, + "fontWeight": "500", + "letterSpacing": 1 + } + ] + }, + { + "type": "frame", + "id": "x3zkh", + "name": "app3", + "width": 80, + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "jS0SJ", + "name": "app3Bg", + "width": 56, + "height": 56, + "fill": "$color-frame", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$color-highlight-border" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "$color-shadow-inset-light", + "offset": { + "x": 2, + "y": 2 + } + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "XSMMR", + "name": "app3Ic", + "width": 28, + "height": 28, + "iconFontName": "settings", + "iconFontFamily": "lucide", + "fill": "$color-muted" + } + ] + }, + { + "type": "text", + "id": "K3FZ8", + "name": "app3Lbl", + "fill": "$color-muted", + "textGrowth": "fixed-width", + "width": 80, + "content": "SETTINGS", + "textAlign": "center", + "fontFamily": "IBM Plex Sans", + "fontSize": 10, + "fontWeight": "500", + "letterSpacing": 1 + } + ] + }, + { + "type": "frame", + "id": "ytB18", + "name": "app4", + "width": 80, + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "ph9Ua", + "name": "app4Bg", + "width": 56, + "height": 56, + "fill": "$color-frame", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$color-highlight-border" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "$color-shadow-inset-light", + "offset": { + "x": 2, + "y": 2 + } + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "7YFYZ", + "name": "app4Ic", + "width": 28, + "height": 28, + "iconFontName": "monitor", + "iconFontFamily": "lucide", + "fill": "$color-muted" + } + ] + }, + { + "type": "text", + "id": "S9YaO", + "name": "app4Lbl", + "fill": "$color-muted", + "textGrowth": "fixed-width", + "width": 80, + "content": "DISPLAY", + "textAlign": "center", + "fontFamily": "IBM Plex Sans", + "fontSize": 10, + "fontWeight": "500", + "letterSpacing": 1 + } + ] + } + ] + }, + { + "type": "frame", + "id": "6haFg", + "name": "row2", + "width": "fill_container", + "gap": 16, + "justifyContent": "space_around", + "children": [ + { + "type": "frame", + "id": "25Nch", + "name": "app5", + "width": 80, + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "bzleQ", + "name": "app5Bg", + "width": 56, + "height": 56, + "fill": "$color-frame", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$color-highlight-border" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "$color-shadow-inset-light", + "offset": { + "x": 2, + "y": 2 + } + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "JQsN2", + "name": "app5Ic", + "width": 28, + "height": 28, + "iconFontName": "mail", + "iconFontFamily": "lucide", + "fill": "$color-muted" + } + ] + }, + { + "type": "text", + "id": "h2JMv", + "name": "app5Lbl", + "fill": "$color-muted", + "textGrowth": "fixed-width", + "width": 80, + "content": "MAILER", + "textAlign": "center", + "fontFamily": "IBM Plex Sans", + "fontSize": 10, + "fontWeight": "500", + "letterSpacing": 1 + } + ] + }, + { + "type": "frame", + "id": "wMpQJ", + "name": "app6", + "width": 80, + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "eZeu9", + "name": "app6Bg", + "width": 56, + "height": 56, + "fill": "$color-frame", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$color-highlight-border" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "$color-shadow-inset-light", + "offset": { + "x": 2, + "y": 2 + } + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "z4cFm", + "name": "app6Ic", + "width": 28, + "height": 28, + "iconFontName": "calendar", + "iconFontFamily": "lucide", + "fill": "$color-muted" + } + ] + }, + { + "type": "text", + "id": "TMgYu", + "name": "app6Lbl", + "fill": "$color-muted", + "textGrowth": "fixed-width", + "width": 80, + "content": "CALENDAR", + "textAlign": "center", + "fontFamily": "IBM Plex Sans", + "fontSize": 10, + "fontWeight": "500", + "letterSpacing": 1 + } + ] + }, + { + "type": "frame", + "id": "BMXTs", + "name": "app7", + "width": 80, + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "POfmF", + "name": "app7Bg", + "width": 56, + "height": 56, + "fill": "$color-frame", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$color-highlight-border" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "$color-shadow-inset-light", + "offset": { + "x": 2, + "y": 2 + } + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "mdzFN", + "name": "app7Ic", + "width": 28, + "height": 28, + "iconFontName": "calculator", + "iconFontFamily": "lucide", + "fill": "$color-muted" + } + ] + }, + { + "type": "text", + "id": "8VFE8", + "name": "app7Lbl", + "fill": "$color-muted", + "textGrowth": "fixed-width", + "width": 80, + "content": "CALCULATOR", + "textAlign": "center", + "fontFamily": "IBM Plex Sans", + "fontSize": 10, + "fontWeight": "500", + "letterSpacing": 1 + } + ] + }, + { + "type": "frame", + "id": "cAXOy", + "name": "app8", + "width": 80, + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "mRA1b", + "name": "app8Bg", + "width": 56, + "height": 56, + "fill": "$color-frame", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$color-highlight-border" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "$color-shadow-inset-light", + "offset": { + "x": 2, + "y": 2 + } + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "iCET9", + "name": "app8Ic", + "width": 28, + "height": 28, + "iconFontName": "type", + "iconFontFamily": "lucide", + "fill": "$color-muted" + } + ] + }, + { + "type": "text", + "id": "S9FfJ", + "name": "app8Lbl", + "fill": "$color-muted", + "textGrowth": "fixed-width", + "width": 80, + "content": "TEXT EDITOR", + "textAlign": "center", + "fontFamily": "IBM Plex Sans", + "fontSize": 10, + "fontWeight": "500", + "letterSpacing": 1 + } + ] + } + ] + }, + { + "type": "frame", + "id": "ZxjH0", + "name": "row3", + "width": "fill_container", + "gap": 16, + "justifyContent": "space_around", + "children": [ + { + "type": "frame", + "id": "UDFMk", + "name": "app9", + "width": 80, + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "tTAoQ", + "name": "app9Bg", + "width": 56, + "height": 56, + "fill": "$color-frame", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$color-highlight-border" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "$color-shadow-inset-light", + "offset": { + "x": 2, + "y": 2 + } + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Bb88S", + "name": "app9Ic", + "width": 28, + "height": 28, + "iconFontName": "image", + "iconFontFamily": "lucide", + "fill": "$color-muted" + } + ] + }, + { + "type": "text", + "id": "lqnpt", + "name": "app9Lbl", + "fill": "$color-muted", + "textGrowth": "fixed-width", + "width": 80, + "content": "VIEWER", + "textAlign": "center", + "fontFamily": "IBM Plex Sans", + "fontSize": 10, + "fontWeight": "500", + "letterSpacing": 1 + } + ] + }, + { + "type": "frame", + "id": "xen01", + "name": "app10", + "width": 80, + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SKhu6", + "name": "app10Bg", + "width": 56, + "height": 56, + "fill": "$color-frame", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$color-highlight-border" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "$color-shadow-inset-light", + "offset": { + "x": 2, + "y": 2 + } + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "CZpqP", + "name": "app10Ic", + "width": 28, + "height": 28, + "iconFontName": "wifi", + "iconFontFamily": "lucide", + "fill": "$color-primary" + } + ] + }, + { + "type": "text", + "id": "Wm5Xb", + "name": "app10Lbl", + "fill": "$color-muted", + "textGrowth": "fixed-width", + "width": 80, + "content": "NETWORK", + "textAlign": "center", + "fontFamily": "IBM Plex Sans", + "fontSize": 10, + "fontWeight": "500", + "letterSpacing": 1 + } + ] + }, + { + "type": "frame", + "id": "gfymA", + "name": "app11", + "width": 80, + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "eOTYY", + "name": "app11Bg", + "width": 56, + "height": 56, + "fill": "$color-frame", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$color-highlight-border" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "$color-shadow-inset-light", + "offset": { + "x": 2, + "y": 2 + } + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "wFuNy", + "name": "app11Ic", + "width": 28, + "height": 28, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$color-accent" + } + ] + }, + { + "type": "text", + "id": "Z3VyS", + "name": "app11Lbl", + "fill": "$color-muted", + "textGrowth": "fixed-width", + "width": 80, + "content": "LOCK SCREEN", + "textAlign": "center", + "fontFamily": "IBM Plex Sans", + "fontSize": 10, + "fontWeight": "500", + "letterSpacing": 1 + } + ] + }, + { + "type": "frame", + "id": "Ldt6u", + "name": "app12", + "width": 80, + "layout": "vertical", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "cSFIs", + "name": "app12Bg", + "width": 56, + "height": 56, + "fill": "$color-frame", + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$color-highlight-border" + }, + "effect": { + "type": "shadow", + "shadowType": "outer", + "color": "$color-shadow-inset-light", + "offset": { + "x": 2, + "y": 2 + } + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "cTqR0", + "name": "app12Ic", + "width": 28, + "height": 28, + "iconFontName": "power", + "iconFontFamily": "lucide", + "fill": "$color-accent" + } + ] + }, + { + "type": "text", + "id": "mHPEA", + "name": "app12Lbl", + "fill": "$color-muted", + "textGrowth": "fixed-width", + "width": 80, + "content": "SHUTDOWN", + "textAlign": "center", + "fontFamily": "IBM Plex Sans", + "fontSize": 10, + "fontWeight": "500", + "letterSpacing": 1 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "QmQdN", + "name": "catBar", + "width": "fill_container", + "fill": "$color-frame", + "children": [ + { + "type": "frame", + "id": "S3VjV", + "name": "cat1", + "width": "fill_container", + "fill": "$color-primary", + "padding": [ + 8, + 16 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "o1wws", + "name": "cat1Text", + "fill": "$color-text", + "content": "ALL", + "fontFamily": "IBM Plex Sans", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 1 + } + ] + }, + { + "type": "frame", + "id": "Yz4sX", + "name": "cat2", + "width": "fill_container", + "fill": "$color-frame", + "padding": [ + 8, + 16 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "r1yQh", + "name": "cat2Text", + "fill": "$color-muted", + "content": "SYSTEM", + "fontFamily": "IBM Plex Sans", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 1 + } + ] + }, + { + "type": "frame", + "id": "ZeY34", + "name": "cat3", + "width": "fill_container", + "fill": "$color-frame", + "padding": [ + 8, + 16 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "JoljA", + "name": "cat3Text", + "fill": "$color-muted", + "content": "UTILS", + "fontFamily": "IBM Plex Sans", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 1 + } + ] + }, + { + "type": "frame", + "id": "pm2fs", + "name": "cat4", + "width": "fill_container", + "fill": "$color-frame", + "padding": [ + 8, + 16 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "nC52d", + "name": "cat4Text", + "fill": "$color-muted", + "content": "CUSTOM", + "fontFamily": "IBM Plex Sans", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 1 + } + ] + } + ] + } + ] + } + ] } ], "variables": { @@ -2751,11 +4790,11 @@ }, "font-size-clock": { "type": "number", - "value": 36 + "value": 14 }, "font-size-lg": { "type": "number", - "value": 16 + "value": 20 }, "font-size-md": { "type": "number", @@ -2763,15 +4802,15 @@ }, "font-size-sm": { "type": "number", - "value": 11 + "value": 14 }, "font-size-xl": { "type": "number", - "value": 20 + "value": 28 }, "font-size-xs": { "type": "number", - "value": 9 + "value": 12 }, "input-bg": { "type": "color", @@ -2872,6 +4911,142 @@ "window-corner": { "type": "number", "value": 8 + }, + "border-thick": { + "type": "number", + "value": 8 + }, + "color-accent": { + "type": "color", + "value": "#C16B58FF" + }, + "color-background": { + "type": "color", + "value": "#15171AFF" + }, + "color-divider": { + "type": "color", + "value": "#2A3040FF" + }, + "color-folder": { + "type": "color", + "value": "#C8A868FF" + }, + "color-folder-shadow": { + "type": "color", + "value": "#8A7040FF" + }, + "color-frame": { + "type": "color", + "value": "#24282DFF" + }, + "color-frame-dim": { + "type": "color", + "value": "#1A1D21FF" + }, + "color-highlight-border": { + "type": "color", + "value": "#FFFFFF0D" + }, + "color-input-bg": { + "type": "color", + "value": "#0D0E11E6" + }, + "color-muted": { + "type": "color", + "value": "#8B949EFF" + }, + "color-panel-bg": { + "type": "color", + "value": "#202428A6" + }, + "color-primary": { + "type": "color", + "value": "#4A8B82FF" + }, + "color-primary-hover": { + "type": "color", + "value": "#5BB0A4FF" + }, + "color-scrollbar-thumb": { + "type": "color", + "value": "#4A8B82FF" + }, + "color-scrollbar-track": { + "type": "color", + "value": "#24282DFF" + }, + "color-selection": { + "type": "color", + "value": "#4A8B8233" + }, + "color-shadow-inset-dark": { + "type": "color", + "value": "#00000066" + }, + "color-shadow-inset-light": { + "type": "color", + "value": "#FFFFFF0D" + }, + "color-surface": { + "type": "color", + "value": "#202428A6" + }, + "color-terminal-bg": { + "type": "color", + "value": "#0D0E11FF" + }, + "color-text": { + "type": "color", + "value": "#E4E7EBFF" + }, + "font-mono": { + "type": "string", + "value": "IBM Plex Mono" + }, + "font-size-body": { + "type": "number", + "value": 15 + }, + "font-ui": { + "type": "string", + "value": "IBM Plex Sans" + }, + "front-panel-height": { + "type": "number", + "value": 80 + }, + "icon-size": { + "type": "number", + "value": 64 + }, + "menu-bar-height": { + "type": "number", + "value": 28 + }, + "radius-inner": { + "type": "number", + "value": 0 + }, + "radius-outer": { + "type": "number", + "value": 4 + }, + "radius-panel": { + "type": "number", + "value": 16 + }, + "scrollbar-width": { + "type": "number", + "value": 16 + }, + "status-bar-height": { + "type": "number", + "value": 24 + }, + "title-bar-height": { + "type": "number", + "value": 32 } } } \ No newline at end of file