Compare commits
2
Commits
1a5e682dc8
...
272b59e752
| Author | SHA1 | Date | |
|---|---|---|---|
  jpmschweitzerandClaude
|
272b59e752 | ||
|
jpmschweitzerandClaude
|
ae1c3d8a34 |
@@ -111,4 +111,27 @@ Core, rendering, IPC, kernel, panel manager.
|
||||
- **Cost:** Replay-buffer memory per subsystem (cheap — most emit seldom). Back-pressure on firehose streams ([Q-002](questions-architecture.md#q-002-back-pressure-on-event-streams)), authorisation granularity ([Q-001](questions-architecture.md#q-001-authorisation-granularity)), and event persistence ([Q-003](questions-architecture.md#q-003-event-persistence-audit-undo)) are all deferred until Tier 1 is in real use.
|
||||
- **Raised by:** 2026-04-20 planning.
|
||||
|
||||
### D-043: Design handoff — adopt token palettes, reject Material wrapper
|
||||
- **Date:** 2026-04-22
|
||||
- **Decision:** The claude.ai/design handoff (`docs/claude-design/`) delivers hi-fi mockups, interaction flows, a design system, and four theme palettes (clide, midnight, paper, terminal) as Dart files using `MaterialApp`/`ThemeData`. We adopt the colour tokens, layout annotations, typography direction, and syntax highlighting palettes. We reject the `MaterialApp` wrapper — tokens are translated into our existing YAML theme pipeline and `SurfaceTokens` (per [D-007](#d-007-app-root-is-bare-widgetsapp)). The design files stay in `docs/claude-design/` as reference; they are not runtime assets.
|
||||
- **Rationale:** The design's value is in the palette + layout + component vocabulary, not in the delivery format. Material's `ThemeData` fights our bare-`WidgetsApp` + `CustomPaint` stance. Translating tokens preserves design intent without absorbing Material's widget opinions.
|
||||
- **Cost:** Manual translation of four theme files into YAML. Ongoing: any design refresh needs the same translation pass.
|
||||
- **Cross-reference:** [D-007](#d-007-app-root-is-bare-widgetsapp), [D-009](#d-009-three-tier-theme-pipeline), [R-012](rejected.md#r-012-materialapp-wrapper-from-design-handoff).
|
||||
- **Raised by:** 2026-04-22 design handoff review.
|
||||
|
||||
### D-044: Four bundled themes — clide, midnight, paper, terminal
|
||||
- **Date:** 2026-04-22
|
||||
- **Decision:** Ship four bundled themes replacing the single summer-night preset. `clide` (cool near-black + periwinkle, default), `midnight` (VS Code-adjacent muted dark), `paper` (drafting-sheet light), `terminal` (near-black + amber). All share the same semantic token names. Source palettes in `docs/claude-design/themes/`; runtime YAML under `lib/kernel/src/theme/themes/`.
|
||||
- **Rationale:** Summer-night was a placeholder carried from the legacy TUI. The design system delivers a coherent set of four that covers dark, muted-dark, light, and monochrome workflows.
|
||||
- **Cost:** Summer-night users lose their theme (acceptable — it was dev-only). Four YAML files to maintain.
|
||||
- **Cross-reference:** [D-043](#d-043-design-handoff-adopt-token-palettes-reject-material-wrapper), [D-022](accessibility.md#d-022-wcag-aa-contrast-gate-on-bundled-themes).
|
||||
- **Raised by:** 2026-04-22 design handoff review.
|
||||
|
||||
### D-045: Syntax highlighting tokens in the theme pipeline
|
||||
- **Date:** 2026-04-22
|
||||
- **Decision:** Add syntax-role colour tokens to `SurfaceTokens`: keyword, type, string, number, comment, method, punctuation. Each bundled theme defines these. The editor and diff views consume them; tree-sitter (when it lands per [Q-015](questions-architecture.md#q-015-editor-tab-full-lsp-vs-tree-sitter-only)) maps grammar scopes to these tokens.
|
||||
- **Rationale:** The design system ships syntax palettes per theme. Adding them now means the token surface is ready when syntax highlighting lands.
|
||||
- **Cost:** Seven new fields on `SurfaceTokens`. Default resolution falls back to semantic roles (keyword → accent, comment → textMuted, etc.) so themes that don't declare syntax tokens still compile.
|
||||
- **Raised by:** 2026-04-22 design handoff review.
|
||||
|
||||
---
|
||||
|
||||
@@ -65,4 +65,10 @@ ticket persistence.
|
||||
- **Context:** Kanban's lack of a sync event breaks settled-reach's SQLite-authoritative approach the moment two devs collaborate.
|
||||
- **Source:** 2026-04-21 planning.
|
||||
|
||||
### Q-025: Body text face — mono everywhere vs Josefin Sans UI + mono code
|
||||
- **Status:** Open
|
||||
- **Question:** The design handoff uses JetBrains Mono for all UI text (tab labels, file paths, status bar, sidebar labels), reserving Josefin Sans only for display/title text. Our current implementation uses Josefin Sans as the ambient UI face with JetBrains Mono only for code/terminal/diff surfaces. Which direction?
|
||||
- **Context:** The design's "mono everywhere" rationale: clide is an IDE for people who like grids. The current Josefin Sans rationale: visual distinction between chrome text and code text, warmer feel. Both are valid — this is a feel decision, not a technical one.
|
||||
- **Source:** 2026-04-22 design handoff review.
|
||||
|
||||
---
|
||||
|
||||
@@ -55,4 +55,9 @@ future reference.
|
||||
- **Reason:** If the Python port under `tools/scripts/plan` outlasts pql's feature parity, delete it. The deletion commit should be one changeset: remove `tools/scripts/plan`, remove its Makefile target (`decisions-validate` rewires to `pql decisions validate`), add a `CHANGELOG.md` entry under Removed, and verify `.pql/pql.db` still opens under the new `pql` binary.
|
||||
- **Cross-reference:** [D-040](process.md#d-040-python-stopgap-under-toolsscriptsplan)
|
||||
|
||||
### R-012: MaterialApp wrapper from design handoff
|
||||
- **Rejected:** 2026-04-22
|
||||
- **Reason:** The design handoff delivers theme files as `MaterialApp`/`ThemeData` Dart classes. This is the delivery format of claude.ai/design, not a design intent. Adopting Material's widget system would contradict [D-007](architecture.md#d-007-app-root-is-bare-widgetsapp) (bare WidgetsApp, no Material/Cupertino). We translate the palette tokens and syntax roles into our existing YAML + `SurfaceTokens` pipeline.
|
||||
- **Cross-reference:** [D-043](architecture.md#d-043-design-handoff-adopt-token-palettes-reject-material-wrapper)
|
||||
|
||||
---
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,134 @@
|
||||
# clide · design handoff
|
||||
|
||||
Bundle for importing into the clide repo and driving further work with Claude Code.
|
||||
|
||||
---
|
||||
|
||||
## What's in here
|
||||
|
||||
```
|
||||
bundle/
|
||||
├─ README.md ← this file
|
||||
├─ Wireframe.html ← architectural snapshot of current code
|
||||
├─ Wireframe - Flows.html ← 8 interaction storyboards
|
||||
├─ Clide Hi-Fi.html ← 3 hi-fi scenes · 4 swappable themes
|
||||
├─ Clide Design System.html ← tokens · type · components · syntax
|
||||
│
|
||||
├─ themes/ ← DROP-IN Dart files
|
||||
│ ├─ clide_theme.dart (default · cool near-black + periwinkle)
|
||||
│ ├─ midnight_theme.dart (VS Code-adjacent muted dark)
|
||||
│ ├─ paper_theme.dart (drafting-sheet light)
|
||||
│ └─ terminal_theme.dart (near-black + amber)
|
||||
│
|
||||
└─ png/ ← flat renders for tickets / PRs
|
||||
├─ wireframe-layout.png
|
||||
├─ wireframe-flows.png
|
||||
├─ design-system.png
|
||||
├─ hifi-clide-main.png
|
||||
├─ hifi-clide-editor.png
|
||||
├─ hifi-clide-welcome.png
|
||||
├─ hifi-midnight-main.png
|
||||
├─ hifi-paper-main.png
|
||||
└─ hifi-terminal-main.png
|
||||
```
|
||||
|
||||
All four HTML files are **fully self-contained** — fonts, JS, CSS inlined. Open them with any browser, commit them to the repo, or hand their paths to `claude` directly.
|
||||
|
||||
---
|
||||
|
||||
## Using this with Claude Code
|
||||
|
||||
Drop the bundle into the repo (e.g. `docs/design/`) and point Claude at it:
|
||||
|
||||
```bash
|
||||
claude "read docs/design/README.md and docs/design/Clide\ Design\ System.html,
|
||||
then implement the Clide theme from docs/design/themes/clide_theme.dart
|
||||
so it's wired through kernel/theme.dart"
|
||||
```
|
||||
|
||||
Claude Code can parse the HTML natively and see every token value, component, and layout annotation. It can also read the Dart theme files without conversion.
|
||||
|
||||
---
|
||||
|
||||
## Design intent, in one pass
|
||||
|
||||
### 1 · Typography
|
||||
|
||||
- **Display** — `Josefin Sans 300` for titles, section heads, and the wordmark. Light weight is load-bearing; using 400+ changes the feel entirely.
|
||||
- **UI + code** — `JetBrains Mono 400/500` for everything else. Tab labels, file paths, status bar, editor. Monospace is a deliberate choice — clide is an IDE for people who like their grids.
|
||||
|
||||
### 2 · Layout (classicPreset)
|
||||
|
||||
Three columns + statusbar. Every box in the frame is a `SlotHost` slot populated by `TabContribution`s sorted by priority (lower = leftmost tab).
|
||||
|
||||
```
|
||||
┌────────────┬──────────────────────┬──────────────┐
|
||||
│ sidebar │ workspace │ context │
|
||||
│ 240 px │ flex │ 300 px │
|
||||
│ 180–400 │ │ 220–420 │
|
||||
├────────────┴──────────────────────┴──────────────┤
|
||||
│ statusbar · 24 px │
|
||||
└──────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
See `Wireframe.html` for the full architectural breakdown — every red-pencil annotation cites the source file it came from.
|
||||
|
||||
### 3 · Themes
|
||||
|
||||
Four presets ship by default. `clide` is the reference — the other three are variations on the same component vocabulary, differing only in token values.
|
||||
|
||||
| name | bg | accent | feel |
|
||||
|------------|-----------|-----------|-------------------------------|
|
||||
| `clide` | `#20202C` | `#78A0F8` | cool near-black + periwinkle |
|
||||
| `midnight` | `#1E1E1E` | `#569CD6` | VS Code-adjacent |
|
||||
| `paper` | `#F4F1EA` | `#C14B2A` | drafting sheet · light |
|
||||
| `terminal` | `#0A0A0A` | `#E0B050` | near-black + amber |
|
||||
|
||||
All four share the same semantic token names (`bg`, `surface`, `border`, `text`, `accent`, `ok/warn/err/info`, syntax roles). A widget written against the tokens will render correctly in all four.
|
||||
|
||||
### 4 · Drop-in usage
|
||||
|
||||
```dart
|
||||
import 'themes/clide_theme.dart';
|
||||
|
||||
MaterialApp(
|
||||
theme: ClideTheme.data,
|
||||
home: const ClideApp(),
|
||||
);
|
||||
```
|
||||
|
||||
The `ClideTheme.tokens` object exposes semantic colors for cases where a Material widget can't carry the meaning — e.g. syntax highlighting, git status markers, Claude message kinds.
|
||||
|
||||
---
|
||||
|
||||
## Screens in the hi-fi
|
||||
|
||||
| # | screen | purpose |
|
||||
|---|--------------------------------|----------------------------------------------------------|
|
||||
| 1 | **Main IDE · at rest** | cold-start settled · all slots populated · Claude primary |
|
||||
| 2 | **Editor · with Claude panel** | file editor in workspace · Claude as context-column tab |
|
||||
| 3 | **Welcome · no project** | first-run landing · start actions + recent projects |
|
||||
|
||||
Open `Clide Hi-Fi.html` and use the floating Tweaks panel (bottom-right, toggle from the toolbar) to swap between themes live.
|
||||
|
||||
---
|
||||
|
||||
## Flows not yet realized
|
||||
|
||||
From `Wireframe - Flows.html` — things with commands/contracts wired but no UI yet:
|
||||
|
||||
- **Project picker** (cold start with no `lastProject`)
|
||||
- **Multi-buffer editor tabs** (editor is single-buffer today)
|
||||
- **Toolbar slot** (`Slots.toolbar` reserved, no preset renders it)
|
||||
- **Command palette keybinding** (`⌘⇧P` not bound by default)
|
||||
- **Secondary Claude panes** (command exists; UI wiring pending)
|
||||
|
||||
These are the highest-leverage next design targets.
|
||||
|
||||
---
|
||||
|
||||
## File integrity
|
||||
|
||||
All HTMLs render offline, no network required after first open. Fonts are bundled as CSS and fall back to system monospace if Josefin Sans or JetBrains Mono are blocked.
|
||||
|
||||
Generated by the design pass · refreshed 2026-04
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
@@ -0,0 +1,186 @@
|
||||
// clide_theme.dart
|
||||
//
|
||||
// Default theme for clide.
|
||||
// Sampled from the Clide Web session dashboard — cool near-black canvas
|
||||
// with a single periwinkle accent.
|
||||
//
|
||||
// Usage:
|
||||
// MaterialApp(theme: ClideTheme.data, ...)
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class ClideTheme {
|
||||
// ─── palette ──────────────────────────────────────────────────────────
|
||||
static const _bg = Color(0xFF20202C); // page / editor canvas
|
||||
static const _bgSunken = Color(0xFF1A1A24); // sidebar, gutters
|
||||
static const _surface = Color(0xFF242838); // cards, table header, pills
|
||||
static const _surfaceHi = Color(0xFF2C3046); // hover, selected row
|
||||
static const _border = Color(0xFF343850);
|
||||
static const _borderHi = Color(0xFF3C445C);
|
||||
|
||||
static const _textHi = Color(0xFFE6E8F2); // primary text
|
||||
static const _text = Color(0xFFB1BBE3); // section titles, labels
|
||||
static const _textDim = Color(0xFF78809C); // secondary
|
||||
static const _textMute = Color(0xFF545C84); // small-caps labels
|
||||
|
||||
static const _accent = Color(0xFF78A0F8); // periwinkle primary
|
||||
static const _accentPress = Color(0xFF6C90DC);
|
||||
static const _accentSoft = Color(0x2278A0F8); // 13% accent for fills
|
||||
|
||||
static const _ok = Color(0xFF7DD3A8);
|
||||
static const _warn = Color(0xFFE6C370);
|
||||
static const _err = Color(0xFFE87D7D);
|
||||
static const _info = _accent;
|
||||
|
||||
// syntax (Dart-biased)
|
||||
static const _synKeyword = Color(0xFFC792EA); // class, const, final
|
||||
static const _synType = Color(0xFF78A0F8); // Widget, BuildContext
|
||||
static const _synString = Color(0xFFA8D99B);
|
||||
static const _synNumber = Color(0xFFE6C370);
|
||||
static const _synComment = Color(0xFF545C84);
|
||||
static const _synMethod = Color(0xFF82B1FF);
|
||||
static const _synPunct = Color(0xFF78809C);
|
||||
|
||||
// ─── exposed tokens ───────────────────────────────────────────────────
|
||||
static const tokens = ClideTokens(
|
||||
bg: _bg, bgSunken: _bgSunken, surface: _surface, surfaceHi: _surfaceHi,
|
||||
border: _border, borderHi: _borderHi,
|
||||
textHi: _textHi, text: _text, textDim: _textDim, textMute: _textMute,
|
||||
accent: _accent, accentPress: _accentPress, accentSoft: _accentSoft,
|
||||
ok: _ok, warn: _warn, err: _err, info: _info,
|
||||
synKeyword: _synKeyword, synType: _synType, synString: _synString,
|
||||
synNumber: _synNumber, synComment: _synComment, synMethod: _synMethod,
|
||||
synPunct: _synPunct,
|
||||
);
|
||||
|
||||
// ─── ThemeData ────────────────────────────────────────────────────────
|
||||
static ThemeData get data => ThemeData(
|
||||
useMaterial3: true,
|
||||
brightness: Brightness.dark,
|
||||
scaffoldBackgroundColor: _bg,
|
||||
canvasColor: _bg,
|
||||
|
||||
colorScheme: const ColorScheme.dark(
|
||||
brightness: Brightness.dark,
|
||||
primary: _accent,
|
||||
onPrimary: Color(0xFF0D1020),
|
||||
secondary: _synKeyword,
|
||||
onSecondary: Color(0xFF0D1020),
|
||||
surface: _surface,
|
||||
onSurface: _textHi,
|
||||
surfaceContainerHighest: _surfaceHi,
|
||||
outline: _border,
|
||||
outlineVariant: _borderHi,
|
||||
error: _err,
|
||||
onError: Color(0xFF0D1020),
|
||||
),
|
||||
|
||||
textTheme: const TextTheme(
|
||||
// Josefin Sans Light for display; JetBrains Mono for code/body.
|
||||
displayLarge: TextStyle(fontFamily: 'Josefin Sans', fontWeight: FontWeight.w300, fontSize: 48, height: 1.1, letterSpacing: 0.2, color: _textHi),
|
||||
displayMedium: TextStyle(fontFamily: 'Josefin Sans', fontWeight: FontWeight.w300, fontSize: 34, height: 1.15, letterSpacing: 0.2, color: _textHi),
|
||||
headlineSmall: TextStyle(fontFamily: 'Josefin Sans', fontWeight: FontWeight.w400, fontSize: 20, height: 1.2, letterSpacing: 0.2, color: _textHi),
|
||||
titleMedium: TextStyle(fontFamily: 'Josefin Sans', fontWeight: FontWeight.w400, fontSize: 14, height: 1.3, letterSpacing: 0.3, color: _text),
|
||||
labelSmall: TextStyle(fontFamily: 'JetBrains Mono', fontWeight: FontWeight.w500, fontSize: 10, height: 1.2, letterSpacing: 1.0, color: _textMute),
|
||||
bodyMedium: TextStyle(fontFamily: 'JetBrains Mono', fontWeight: FontWeight.w400, fontSize: 12, height: 1.45, color: _textHi),
|
||||
bodySmall: TextStyle(fontFamily: 'JetBrains Mono', fontWeight: FontWeight.w400, fontSize: 11, height: 1.4, color: _text),
|
||||
),
|
||||
|
||||
dividerTheme: const DividerThemeData(color: _border, thickness: 1, space: 1),
|
||||
|
||||
cardTheme: CardThemeData(
|
||||
color: _surface,
|
||||
elevation: 0,
|
||||
shape: RoundedRectangleBorder(
|
||||
side: const BorderSide(color: _border),
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
),
|
||||
margin: EdgeInsets.zero,
|
||||
),
|
||||
|
||||
inputDecorationTheme: InputDecorationTheme(
|
||||
isDense: true,
|
||||
filled: true,
|
||||
fillColor: _bgSunken,
|
||||
hintStyle: const TextStyle(color: _textMute),
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
borderSide: const BorderSide(color: _border),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
borderSide: const BorderSide(color: _border),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
borderSide: const BorderSide(color: _accent, width: 1.5),
|
||||
),
|
||||
),
|
||||
|
||||
elevatedButtonTheme: ElevatedButtonThemeData(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: _accent,
|
||||
foregroundColor: const Color(0xFF0D1020),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
|
||||
textStyle: const TextStyle(fontFamily: 'JetBrains Mono', fontSize: 12, fontWeight: FontWeight.w500),
|
||||
),
|
||||
),
|
||||
textButtonTheme: TextButtonThemeData(
|
||||
style: TextButton.styleFrom(
|
||||
foregroundColor: _accent,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
|
||||
textStyle: const TextStyle(fontFamily: 'JetBrains Mono', fontSize: 12),
|
||||
),
|
||||
),
|
||||
|
||||
// Pill-style chips (matches the Projects row in the dashboard).
|
||||
chipTheme: ChipThemeData(
|
||||
backgroundColor: _surface,
|
||||
side: const BorderSide(color: _borderHi),
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
|
||||
labelStyle: const TextStyle(fontFamily: 'JetBrains Mono', fontSize: 11, color: _text),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||||
),
|
||||
|
||||
iconTheme: const IconThemeData(color: _textDim, size: 14),
|
||||
|
||||
tooltipTheme: TooltipThemeData(
|
||||
decoration: BoxDecoration(
|
||||
color: _surfaceHi,
|
||||
border: Border.all(color: _borderHi),
|
||||
borderRadius: BorderRadius.circular(3),
|
||||
),
|
||||
textStyle: const TextStyle(fontFamily: 'JetBrains Mono', fontSize: 11, color: _textHi),
|
||||
),
|
||||
|
||||
scrollbarTheme: ScrollbarThemeData(
|
||||
thumbColor: WidgetStatePropertyAll(_border),
|
||||
thickness: const WidgetStatePropertyAll(6),
|
||||
radius: const Radius.circular(3),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Raw color tokens — use when Material widgets can't carry the meaning.
|
||||
class ClideTokens {
|
||||
const ClideTokens({
|
||||
required this.bg, required this.bgSunken,
|
||||
required this.surface, required this.surfaceHi,
|
||||
required this.border, required this.borderHi,
|
||||
required this.textHi, required this.text,
|
||||
required this.textDim, required this.textMute,
|
||||
required this.accent, required this.accentPress, required this.accentSoft,
|
||||
required this.ok, required this.warn, required this.err, required this.info,
|
||||
required this.synKeyword, required this.synType, required this.synString,
|
||||
required this.synNumber, required this.synComment,
|
||||
required this.synMethod, required this.synPunct,
|
||||
});
|
||||
final Color bg, bgSunken, surface, surfaceHi;
|
||||
final Color border, borderHi;
|
||||
final Color textHi, text, textDim, textMute;
|
||||
final Color accent, accentPress, accentSoft;
|
||||
final Color ok, warn, err, info;
|
||||
final Color synKeyword, synType, synString, synNumber, synComment, synMethod, synPunct;
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
// midnight_theme.dart
|
||||
//
|
||||
// Midnight — classic dark, VS Code-adjacent, maximally muted. Gets out of the way.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'clide_theme.dart' show ClideTokens;
|
||||
|
||||
class MidnightTheme {
|
||||
static const _bg = Color(0xFF1E1E1E);
|
||||
static const _bgSunken = Color(0xFF181818);
|
||||
static const _surface = Color(0xFF252526);
|
||||
static const _surfaceHi = Color(0xFF2D2D2E);
|
||||
static const _border = Color(0xFF333333);
|
||||
static const _borderHi = Color(0xFF3F3F3F);
|
||||
|
||||
static const _textHi = Color(0xFFD4D4D4);
|
||||
static const _text = Color(0xFFBBBBBB);
|
||||
static const _textDim = Color(0xFF858585);
|
||||
static const _textMute = Color(0xFF6A6A6A);
|
||||
|
||||
static const _accent = Color(0xFF569CD6); // muted azure
|
||||
static const _accentPress = Color(0xFF4785BD);
|
||||
static const _accentSoft = Color(0x22569CD6);
|
||||
|
||||
static const _ok = Color(0xFF89D185);
|
||||
static const _warn = Color(0xFFD7BA7D);
|
||||
static const _err = Color(0xFFF48771);
|
||||
static const _info = _accent;
|
||||
|
||||
static const _synKeyword = Color(0xFFC586C0);
|
||||
static const _synType = Color(0xFF4EC9B0);
|
||||
static const _synString = Color(0xFFCE9178);
|
||||
static const _synNumber = Color(0xFFB5CEA8);
|
||||
static const _synComment = Color(0xFF6A9955);
|
||||
static const _synMethod = Color(0xFFDCDCAA);
|
||||
static const _synPunct = Color(0xFF858585);
|
||||
|
||||
static const tokens = ClideTokens(
|
||||
bg: _bg, bgSunken: _bgSunken, surface: _surface, surfaceHi: _surfaceHi,
|
||||
border: _border, borderHi: _borderHi,
|
||||
textHi: _textHi, text: _text, textDim: _textDim, textMute: _textMute,
|
||||
accent: _accent, accentPress: _accentPress, accentSoft: _accentSoft,
|
||||
ok: _ok, warn: _warn, err: _err, info: _info,
|
||||
synKeyword: _synKeyword, synType: _synType, synString: _synString,
|
||||
synNumber: _synNumber, synComment: _synComment, synMethod: _synMethod,
|
||||
synPunct: _synPunct,
|
||||
);
|
||||
|
||||
static ThemeData get data => ThemeData(
|
||||
useMaterial3: true,
|
||||
brightness: Brightness.dark,
|
||||
scaffoldBackgroundColor: _bg,
|
||||
canvasColor: _bg,
|
||||
colorScheme: const ColorScheme.dark(
|
||||
primary: _accent, onPrimary: Color(0xFF0B1220),
|
||||
secondary: _synKeyword, onSecondary: Color(0xFF0B1220),
|
||||
surface: _surface, onSurface: _textHi,
|
||||
surfaceContainerHighest: _surfaceHi,
|
||||
outline: _border, outlineVariant: _borderHi,
|
||||
error: _err, onError: Color(0xFF0B1220),
|
||||
),
|
||||
textTheme: const TextTheme(
|
||||
displayLarge: TextStyle(fontFamily: 'Josefin Sans', fontWeight: FontWeight.w300, fontSize: 48, color: _textHi),
|
||||
displayMedium: TextStyle(fontFamily: 'Josefin Sans', fontWeight: FontWeight.w300, fontSize: 34, color: _textHi),
|
||||
headlineSmall: TextStyle(fontFamily: 'Josefin Sans', fontWeight: FontWeight.w400, fontSize: 20, color: _textHi),
|
||||
titleMedium: TextStyle(fontFamily: 'Josefin Sans', fontWeight: FontWeight.w400, fontSize: 14, color: _text),
|
||||
labelSmall: TextStyle(fontFamily: 'JetBrains Mono', fontWeight: FontWeight.w500, fontSize: 10, letterSpacing: 1.0, color: _textMute),
|
||||
bodyMedium: TextStyle(fontFamily: 'JetBrains Mono', fontWeight: FontWeight.w400, fontSize: 12, height: 1.45, color: _textHi),
|
||||
bodySmall: TextStyle(fontFamily: 'JetBrains Mono', fontWeight: FontWeight.w400, fontSize: 11, color: _text),
|
||||
),
|
||||
dividerTheme: const DividerThemeData(color: _border, thickness: 1, space: 1),
|
||||
iconTheme: const IconThemeData(color: _textDim, size: 14),
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
// paper_theme.dart
|
||||
//
|
||||
// Paper — carries the wireframe aesthetic into the product.
|
||||
// Off-white drafting sheet, near-black ink, red-pencil accent for annotations.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'clide_theme.dart' show ClideTokens;
|
||||
|
||||
class PaperTheme {
|
||||
static const _bg = Color(0xFFF4F1EA); // paper
|
||||
static const _bgSunken = Color(0xFFECE7DB); // paper-2
|
||||
static const _surface = Color(0xFFFBF8F1);
|
||||
static const _surfaceHi = Color(0xFFECE7DB);
|
||||
static const _border = Color(0xFF1A1A1A);
|
||||
static const _borderHi = Color(0xFF4A4A4A);
|
||||
|
||||
static const _textHi = Color(0xFF1A1A1A); // ink
|
||||
static const _text = Color(0xFF4A4A4A); // ink-2
|
||||
static const _textDim = Color(0xFF8A8A82); // ink-3
|
||||
static const _textMute = Color(0xFFA8A89E);
|
||||
|
||||
static const _accent = Color(0xFFC14B2A); // red pencil
|
||||
static const _accentPress = Color(0xFFA03D20);
|
||||
static const _accentSoft = Color(0x22C14B2A);
|
||||
|
||||
static const _ok = Color(0xFF2D8A52);
|
||||
static const _warn = Color(0xFFB88A2A);
|
||||
static const _err = Color(0xFFB03A2A);
|
||||
static const _info = Color(0xFF2A6FC1);
|
||||
|
||||
// Syntax tuned for cream paper — desaturated so code reads like print.
|
||||
static const _synKeyword = Color(0xFF7B3F8C);
|
||||
static const _synType = Color(0xFF2A6FC1);
|
||||
static const _synString = Color(0xFF2D8A52);
|
||||
static const _synNumber = Color(0xFFB88A2A);
|
||||
static const _synComment = Color(0xFF8A8A82);
|
||||
static const _synMethod = Color(0xFF1E5D9E);
|
||||
static const _synPunct = Color(0xFF4A4A4A);
|
||||
|
||||
static const tokens = ClideTokens(
|
||||
bg: _bg, bgSunken: _bgSunken, surface: _surface, surfaceHi: _surfaceHi,
|
||||
border: _border, borderHi: _borderHi,
|
||||
textHi: _textHi, text: _text, textDim: _textDim, textMute: _textMute,
|
||||
accent: _accent, accentPress: _accentPress, accentSoft: _accentSoft,
|
||||
ok: _ok, warn: _warn, err: _err, info: _info,
|
||||
synKeyword: _synKeyword, synType: _synType, synString: _synString,
|
||||
synNumber: _synNumber, synComment: _synComment, synMethod: _synMethod,
|
||||
synPunct: _synPunct,
|
||||
);
|
||||
|
||||
static ThemeData get data => ThemeData(
|
||||
useMaterial3: true,
|
||||
brightness: Brightness.light,
|
||||
scaffoldBackgroundColor: _bg,
|
||||
canvasColor: _bg,
|
||||
colorScheme: const ColorScheme.light(
|
||||
primary: _accent, onPrimary: Color(0xFFFBF8F1),
|
||||
secondary: _info, onSecondary: Color(0xFFFBF8F1),
|
||||
surface: _surface, onSurface: _textHi,
|
||||
surfaceContainerHighest: _surfaceHi,
|
||||
outline: _border, outlineVariant: _borderHi,
|
||||
error: _err, onError: Color(0xFFFBF8F1),
|
||||
),
|
||||
textTheme: const TextTheme(
|
||||
displayLarge: TextStyle(fontFamily: 'Josefin Sans', fontWeight: FontWeight.w300, fontSize: 48, color: _textHi),
|
||||
displayMedium: TextStyle(fontFamily: 'Josefin Sans', fontWeight: FontWeight.w300, fontSize: 34, color: _textHi),
|
||||
headlineSmall: TextStyle(fontFamily: 'Josefin Sans', fontWeight: FontWeight.w400, fontSize: 20, color: _textHi),
|
||||
titleMedium: TextStyle(fontFamily: 'Josefin Sans', fontWeight: FontWeight.w400, fontSize: 14, color: _text),
|
||||
labelSmall: TextStyle(fontFamily: 'JetBrains Mono', fontWeight: FontWeight.w500, fontSize: 10, letterSpacing: 1.0, color: _textDim),
|
||||
bodyMedium: TextStyle(fontFamily: 'JetBrains Mono', fontWeight: FontWeight.w400, fontSize: 12, height: 1.45, color: _textHi),
|
||||
bodySmall: TextStyle(fontFamily: 'JetBrains Mono', fontWeight: FontWeight.w400, fontSize: 11, color: _text),
|
||||
),
|
||||
dividerTheme: const DividerThemeData(color: _border, thickness: 1, space: 1),
|
||||
iconTheme: const IconThemeData(color: _text, size: 14),
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
// terminal_theme.dart
|
||||
//
|
||||
// Terminal — near-black bg, high-contrast mono, single amber accent.
|
||||
// For users who want the IDE to read like a tmux window.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'clide_theme.dart' show ClideTokens;
|
||||
|
||||
class TerminalTheme {
|
||||
static const _bg = Color(0xFF0A0A0A);
|
||||
static const _bgSunken = Color(0xFF000000);
|
||||
static const _surface = Color(0xFF111111);
|
||||
static const _surfaceHi = Color(0xFF181818);
|
||||
static const _border = Color(0xFF242424);
|
||||
static const _borderHi = Color(0xFF2E2E2E);
|
||||
|
||||
static const _textHi = Color(0xFFE6E6E6);
|
||||
static const _text = Color(0xFFBDBDBD);
|
||||
static const _textDim = Color(0xFF7A7A7A);
|
||||
static const _textMute = Color(0xFF4A4A4A);
|
||||
|
||||
static const _accent = Color(0xFFE0B050); // amber
|
||||
static const _accentPress = Color(0xFFC29438);
|
||||
static const _accentSoft = Color(0x22E0B050);
|
||||
|
||||
static const _ok = Color(0xFF8FDC9B);
|
||||
static const _warn = Color(0xFFE0B050);
|
||||
static const _err = Color(0xFFE05050);
|
||||
static const _info = Color(0xFFA3C4FF);
|
||||
|
||||
// Classic 16-color palette feel
|
||||
static const _synKeyword = Color(0xFFE05050);
|
||||
static const _synType = Color(0xFFE0B050);
|
||||
static const _synString = Color(0xFF8FDC9B);
|
||||
static const _synNumber = Color(0xFFC792EA);
|
||||
static const _synComment = Color(0xFF4A4A4A);
|
||||
static const _synMethod = Color(0xFFA3C4FF);
|
||||
static const _synPunct = Color(0xFF7A7A7A);
|
||||
|
||||
static const tokens = ClideTokens(
|
||||
bg: _bg, bgSunken: _bgSunken, surface: _surface, surfaceHi: _surfaceHi,
|
||||
border: _border, borderHi: _borderHi,
|
||||
textHi: _textHi, text: _text, textDim: _textDim, textMute: _textMute,
|
||||
accent: _accent, accentPress: _accentPress, accentSoft: _accentSoft,
|
||||
ok: _ok, warn: _warn, err: _err, info: _info,
|
||||
synKeyword: _synKeyword, synType: _synType, synString: _synString,
|
||||
synNumber: _synNumber, synComment: _synComment, synMethod: _synMethod,
|
||||
synPunct: _synPunct,
|
||||
);
|
||||
|
||||
static ThemeData get data => ThemeData(
|
||||
useMaterial3: true,
|
||||
brightness: Brightness.dark,
|
||||
scaffoldBackgroundColor: _bg,
|
||||
canvasColor: _bg,
|
||||
colorScheme: const ColorScheme.dark(
|
||||
primary: _accent, onPrimary: Color(0xFF000000),
|
||||
secondary: _info, onSecondary: Color(0xFF000000),
|
||||
surface: _surface, onSurface: _textHi,
|
||||
surfaceContainerHighest: _surfaceHi,
|
||||
outline: _border, outlineVariant: _borderHi,
|
||||
error: _err, onError: Color(0xFF000000),
|
||||
),
|
||||
textTheme: const TextTheme(
|
||||
displayLarge: TextStyle(fontFamily: 'Josefin Sans', fontWeight: FontWeight.w300, fontSize: 48, color: _textHi),
|
||||
displayMedium: TextStyle(fontFamily: 'Josefin Sans', fontWeight: FontWeight.w300, fontSize: 34, color: _textHi),
|
||||
headlineSmall: TextStyle(fontFamily: 'Josefin Sans', fontWeight: FontWeight.w400, fontSize: 20, color: _textHi),
|
||||
titleMedium: TextStyle(fontFamily: 'Josefin Sans', fontWeight: FontWeight.w400, fontSize: 14, color: _text),
|
||||
// Terminal mockups go full-mono even for display.
|
||||
labelSmall: TextStyle(fontFamily: 'JetBrains Mono', fontWeight: FontWeight.w500, fontSize: 10, letterSpacing: 1.0, color: _textMute),
|
||||
bodyMedium: TextStyle(fontFamily: 'JetBrains Mono', fontWeight: FontWeight.w400, fontSize: 12, height: 1.45, color: _textHi),
|
||||
bodySmall: TextStyle(fontFamily: 'JetBrains Mono', fontWeight: FontWeight.w400, fontSize: 11, color: _text),
|
||||
),
|
||||
dividerTheme: const DividerThemeData(color: _border, thickness: 1, space: 1),
|
||||
iconTheme: const IconThemeData(color: _textDim, size: 14),
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user