jpmschweitzer/clide
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update design handoff with framework-free token exports

Browse Source 
New tokens/ directory with YAML palette + syntax files for all
four themes, plus a pure dart:ui Dart file (no Material). README
updated to reflect the no-Material constraint and open typography
question.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
jpmschweitzer
2026-04-22 16:29:17 +02:00
co-authored by Claude
parent 272b59e752
commit de9a7b9745
6 changed files with 520 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/claude-design/tokens/clide.yaml
+55
View File
@@ -0,0 +1,55 @@
# clide theme · clide
# cool near-black + periwinkle · default
#
# Flat palette. Raw hex values — no wrappers, no framework.
# Layer your semantic roles on top of these keys; surface tokens consume
# the semantic layer, not palette directly.
name: clide
dark: true
subtitle: "cool near-black + periwinkle · default"
palette:
bg: "#20202C"
bgSunken: "#1A1A24"
surface: "#242838"
surfaceHi: "#2C3046"
border: "#343850"
borderHi: "#3C445C"
textHi: "#E6E8F2"
text: "#B1BBE3"
textDim: "#78809C"
textMute: "#545C84"
accent: "#78A0F8"
accentPress: "#6C90DC"
accentSoft: "rgba(120,160,248,0.13)"
onAccent: "#0D1020"
ok: "#7DD3A8"
warn: "#E6C370"
err: "#E87D7D"
info: "#78A0F8"
syntax:
keyword: "#C792EA"
type: "#78A0F8"
string: "#A8D99B"
number: "#E6C370"
comment: "#545C84"
method: "#82B1FF"
punct: "#78809C"
# Suggested semantic roles (rename to whatever your pipeline uses):
#
# text -> palette.textHi
# textMuted -> palette.textDim
# textSubtle -> palette.textMute
# bg -> palette.bg
# bgSurface -> palette.surface
# bgHover -> palette.surfaceHi
# divider -> palette.border
# brand -> palette.accent
# brandOn -> palette.onAccent
# status.ok -> palette.ok
# status.warn -> palette.warn
# status.err -> palette.err
# status.info -> palette.info
docs/claude-design/tokens/clide_tokens.dart
+215
View File
@@ -0,0 +1,215 @@
// clide_tokens.dart
//
// Raw token values for the four default clide themes — framework-free.
// No Material, no Cupertino, no ThemeData. Just colors, organized into a
// flat palette + syntax block. Wire these into your theme pipeline
// (YAML palette -> semantic roles -> surface tokens).
//
// Mirror of bundle/tokens/*.yaml · keep them in sync.
import 'dart:ui' show Color;
class ClideTheme {
const ClideTheme({
required this.name,
required this.dark,
required this.subtitle,
required this.palette,
required this.syntax,
});
final String name;
final bool dark;
final String subtitle;
final ClidePalette palette;
final ClideSyntax syntax;
}
class ClidePalette {
const ClidePalette({
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.onAccent,
required this.ok,
required this.warn,
required this.err,
required this.info,
});
final Color bg, bgSunken, surface, surfaceHi;
final Color border, borderHi;
final Color textHi, text, textDim, textMute;
final Color accent, accentPress, accentSoft, onAccent;
final Color ok, warn, err, info;
}
class ClideSyntax {
const ClideSyntax({
required this.keyword,
required this.type,
required this.string,
required this.number,
required this.comment,
required this.method,
required this.punct,
});
final Color keyword, type, string, number, comment, method, punct;
}
class ClideThemes {
// ─── clide ───────────────────────────────────────────────────────
static const clide = ClideTheme(
name: 'clide',
dark: true,
subtitle: 'cool near-black + periwinkle · default',
palette: ClidePalette(
bg: Color(0xFF20202C),
bgSunken: Color(0xFF1A1A24),
surface: Color(0xFF242838),
surfaceHi: Color(0xFF2C3046),
border: Color(0xFF343850),
borderHi: Color(0xFF3C445C),
textHi: Color(0xFFE6E8F2),
text: Color(0xFFB1BBE3),
textDim: Color(0xFF78809C),
textMute: Color(0xFF545C84),
accent: Color(0xFF78A0F8),
accentPress: Color(0xFF6C90DC),
accentSoft: Color(0x2178A0F8),
onAccent: Color(0xFF0D1020),
ok: Color(0xFF7DD3A8),
warn: Color(0xFFE6C370),
err: Color(0xFFE87D7D),
info: Color(0xFF78A0F8),
),
syntax: ClideSyntax(
keyword: Color(0xFFC792EA),
type: Color(0xFF78A0F8),
string: Color(0xFFA8D99B),
number: Color(0xFFE6C370),
comment: Color(0xFF545C84),
method: Color(0xFF82B1FF),
punct: Color(0xFF78809C),
),
);
// ─── midnight ────────────────────────────────────────────────────
static const midnight = ClideTheme(
name: 'midnight',
dark: true,
subtitle: 'VS Code-adjacent muted dark',
palette: ClidePalette(
bg: Color(0xFF1E1E1E),
bgSunken: Color(0xFF181818),
surface: Color(0xFF252526),
surfaceHi: Color(0xFF2D2D2E),
border: Color(0xFF333333),
borderHi: Color(0xFF3F3F3F),
textHi: Color(0xFFD4D4D4),
text: Color(0xFFBBBBBB),
textDim: Color(0xFF858585),
textMute: Color(0xFF6A6A6A),
accent: Color(0xFF569CD6),
accentPress: Color(0xFF4785BD),
accentSoft: Color(0x21569CD6),
onAccent: Color(0xFF0B1220),
ok: Color(0xFF89D185),
warn: Color(0xFFD7BA7D),
err: Color(0xFFF48771),
info: Color(0xFF569CD6),
),
syntax: ClideSyntax(
keyword: Color(0xFFC586C0),
type: Color(0xFF4EC9B0),
string: Color(0xFFCE9178),
number: Color(0xFFB5CEA8),
comment: Color(0xFF6A9955),
method: Color(0xFFDCDCAA),
punct: Color(0xFF858585),
),
);
// ─── paper ───────────────────────────────────────────────────────
static const paper = ClideTheme(
name: 'paper',
dark: false,
subtitle: 'drafting sheet · red-pencil accent · light',
palette: ClidePalette(
bg: Color(0xFFF4F1EA),
bgSunken: Color(0xFFECE7DB),
surface: Color(0xFFFBF8F1),
surfaceHi: Color(0xFFECE7DB),
border: Color(0xFF1A1A1A),
borderHi: Color(0xFF4A4A4A),
textHi: Color(0xFF1A1A1A),
text: Color(0xFF4A4A4A),
textDim: Color(0xFF8A8A82),
textMute: Color(0xFFA8A89E),
accent: Color(0xFFC14B2A),
accentPress: Color(0xFFA03D20),
accentSoft: Color(0x21C14B2A),
onAccent: Color(0xFFFBF8F1),
ok: Color(0xFF2D8A52),
warn: Color(0xFFB88A2A),
err: Color(0xFFB03A2A),
info: Color(0xFF2A6FC1),
),
syntax: ClideSyntax(
keyword: Color(0xFF7B3F8C),
type: Color(0xFF2A6FC1),
string: Color(0xFF2D8A52),
number: Color(0xFFB88A2A),
comment: Color(0xFF8A8A82),
method: Color(0xFF1E5D9E),
punct: Color(0xFF4A4A4A),
),
);
// ─── terminal ────────────────────────────────────────────────────
static const terminal = ClideTheme(
name: 'terminal',
dark: true,
subtitle: 'near-black + amber · tmux feel',
palette: ClidePalette(
bg: Color(0xFF0A0A0A),
bgSunken: Color(0xFF000000),
surface: Color(0xFF111111),
surfaceHi: Color(0xFF181818),
border: Color(0xFF242424),
borderHi: Color(0xFF2E2E2E),
textHi: Color(0xFFE6E6E6),
text: Color(0xFFBDBDBD),
textDim: Color(0xFF7A7A7A),
textMute: Color(0xFF4A4A4A),
accent: Color(0xFFE0B050),
accentPress: Color(0xFFC29438),
accentSoft: Color(0x21E0B050),
onAccent: Color(0xFF000000),
ok: Color(0xFF8FDC9B),
warn: Color(0xFFE0B050),
err: Color(0xFFE05050),
info: Color(0xFFA3C4FF),
),
syntax: ClideSyntax(
keyword: Color(0xFFE05050),
type: Color(0xFFE0B050),
string: Color(0xFF8FDC9B),
number: Color(0xFFC792EA),
comment: Color(0xFF4A4A4A),
method: Color(0xFFA3C4FF),
punct: Color(0xFF7A7A7A),
),
);
static const all = [clide, midnight, paper, terminal];
static const defaultTheme = clide;
}
docs/claude-design/tokens/midnight.yaml
+55
View File
@@ -0,0 +1,55 @@
# clide theme · midnight
# VS Code-adjacent muted dark
#
# Flat palette. Raw hex values — no wrappers, no framework.
# Layer your semantic roles on top of these keys; surface tokens consume
# the semantic layer, not palette directly.
name: midnight
dark: true
subtitle: "VS Code-adjacent muted dark"
palette:
bg: "#1E1E1E"
bgSunken: "#181818"
surface: "#252526"
surfaceHi: "#2D2D2E"
border: "#333333"
borderHi: "#3F3F3F"
textHi: "#D4D4D4"
text: "#BBBBBB"
textDim: "#858585"
textMute: "#6A6A6A"
accent: "#569CD6"
accentPress: "#4785BD"
accentSoft: "rgba(86,156,214,0.13)"
onAccent: "#0B1220"
ok: "#89D185"
warn: "#D7BA7D"
err: "#F48771"
info: "#569CD6"
syntax:
keyword: "#C586C0"
type: "#4EC9B0"
string: "#CE9178"
number: "#B5CEA8"
comment: "#6A9955"
method: "#DCDCAA"
punct: "#858585"
# Suggested semantic roles (rename to whatever your pipeline uses):
#
# text -> palette.textHi
# textMuted -> palette.textDim
# textSubtle -> palette.textMute
# bg -> palette.bg
# bgSurface -> palette.surface
# bgHover -> palette.surfaceHi
# divider -> palette.border
# brand -> palette.accent
# brandOn -> palette.onAccent
# status.ok -> palette.ok
# status.warn -> palette.warn
# status.err -> palette.err
# status.info -> palette.info
docs/claude-design/tokens/paper.yaml
+55
View File
@@ -0,0 +1,55 @@
# clide theme · paper
# drafting sheet · red-pencil accent · light
#
# Flat palette. Raw hex values — no wrappers, no framework.
# Layer your semantic roles on top of these keys; surface tokens consume
# the semantic layer, not palette directly.
name: paper
dark: false
subtitle: "drafting sheet · red-pencil accent · light"
palette:
bg: "#F4F1EA"
bgSunken: "#ECE7DB"
surface: "#FBF8F1"
surfaceHi: "#ECE7DB"
border: "#1A1A1A"
borderHi: "#4A4A4A"
textHi: "#1A1A1A"
text: "#4A4A4A"
textDim: "#8A8A82"
textMute: "#A8A89E"
accent: "#C14B2A"
accentPress: "#A03D20"
accentSoft: "rgba(193,75,42,0.13)"
onAccent: "#FBF8F1"
ok: "#2D8A52"
warn: "#B88A2A"
err: "#B03A2A"
info: "#2A6FC1"
syntax:
keyword: "#7B3F8C"
type: "#2A6FC1"
string: "#2D8A52"
number: "#B88A2A"
comment: "#8A8A82"
method: "#1E5D9E"
punct: "#4A4A4A"
# Suggested semantic roles (rename to whatever your pipeline uses):
#
# text -> palette.textHi
# textMuted -> palette.textDim
# textSubtle -> palette.textMute
# bg -> palette.bg
# bgSurface -> palette.surface
# bgHover -> palette.surfaceHi
# divider -> palette.border
# brand -> palette.accent
# brandOn -> palette.onAccent
# status.ok -> palette.ok
# status.warn -> palette.warn
# status.err -> palette.err
# status.info -> palette.info
docs/claude-design/tokens/terminal.yaml
+55
View File
@@ -0,0 +1,55 @@
# clide theme · terminal
# near-black + amber · tmux feel
#
# Flat palette. Raw hex values — no wrappers, no framework.
# Layer your semantic roles on top of these keys; surface tokens consume
# the semantic layer, not palette directly.
name: terminal
dark: true
subtitle: "near-black + amber · tmux feel"
palette:
bg: "#0A0A0A"
bgSunken: "#000000"
surface: "#111111"
surfaceHi: "#181818"
border: "#242424"
borderHi: "#2E2E2E"
textHi: "#E6E6E6"
text: "#BDBDBD"
textDim: "#7A7A7A"
textMute: "#4A4A4A"
accent: "#E0B050"
accentPress: "#C29438"
accentSoft: "rgba(224,176,80,0.13)"
onAccent: "#000000"
ok: "#8FDC9B"
warn: "#E0B050"
err: "#E05050"
info: "#A3C4FF"
syntax:
keyword: "#E05050"
type: "#E0B050"
string: "#8FDC9B"
number: "#C792EA"
comment: "#4A4A4A"
method: "#A3C4FF"
punct: "#7A7A7A"
# Suggested semantic roles (rename to whatever your pipeline uses):
#
# text -> palette.textHi
# textMuted -> palette.textDim
# textSubtle -> palette.textMute
# bg -> palette.bg
# bgSurface -> palette.surface
# bgHover -> palette.surfaceHi
# divider -> palette.border
# brand -> palette.accent
# brandOn -> palette.onAccent
# status.ok -> palette.ok
# status.warn -> palette.warn
# status.err -> palette.err
# status.info -> palette.info