extracted terminal to a widget

This commit is contained in:
2026-02-17 18:46:18 +00:00
parent c6999ea66f
commit 0746844d6f
98 changed files with 487 additions and 3513 deletions
@@ -1,308 +0,0 @@
# Terminal Plugin Spec
This document describes the Terminal plugin implementation, architecture, and integration points. It is a reference for continuing work later.
## Goals
- Provide a browser terminal (xterm.js) inside Officer.
- Support two execution modes:
- Host mode: shell runs on the host machine.
- Sandbox mode: shell runs inside a Docker sidecar container.
- Keep host mode working and optional; sandbox is enabled via admin settings.
- Keep all terminal logic self-contained in the plugin.
- Allow the terminal UI to be rendered anywhere with a reusable component.
## File Layout
- `src/workspaces/plugins/Terminal/index.ts`
- Exports plugin metadata, client screen, and server websocket handler.
- `src/workspaces/plugins/Terminal/client/TerminalView.tsx`
- Reusable terminal component (xterm + websocket bridge).
- `src/workspaces/plugins/Terminal/client/Screen/index.tsx`
- Page wrapper that renders `TerminalView` inside `DashboardLayout`.
- `src/workspaces/plugins/Terminal/client/index.ts`
- Exports `Screen` and `TerminalView`.
- `src/workspaces/plugins/Terminal/server/websocket.ts`
- WebSocket handler for terminal sessions and sidecar orchestration.
- `src/workspaces/plugins/Terminal/server/pty-sidecar.mjs`
- Node sidecar process that owns `node-pty` and shell spawn.
- `src/workspaces/plugins/Terminal/server/Dockerfile.terminal-sidecar`
- Docker image for sandbox mode.
- `src/workspaces/plugins/Terminal/server/templates/.zshrc`
- `src/workspaces/plugins/Terminal/server/templates/starship-officer.toml`
- Template configs copied into user home for stable shell UX.
## Client Architecture
### TerminalView
`TerminalView` is the reusable component that can be rendered anywhere.
Props:
- `className?: string`
- `style?: CSSProperties`
- `wsPath?: string` (default: `/api/terminal/ws`)
- `fontSize?: number` (default: 14)
- `fontFamily?: string`
- `theme?: { background?; foreground?; cursor?; selectionBackground? }`
- `autoFocus?: boolean` (default: true)
- `onReady?: (term: XTerm) => void`
- `onExit?: () => void`
- `onDisconnect?: () => void`
Behavior:
- Initializes xterm after mount for StrictMode compatibility.
- Connects to websocket at `wsPath`, appending `token` from localStorage.
- Sends `resize` on open, and on ResizeObserver changes.
- Forwards terminal input as `{ type: 'input', data }` JSON.
- Writes server output on `{ type: 'output', data }`.
- Emits `onExit` when `{ type: 'exit' }` is received.
- Emits `onDisconnect` when the websocket closes.
### Screen
`Screen` is a thin wrapper around `TerminalView` for the full-page route:
```
<DashboardLayout>
<TerminalView className="h-full w-full p-2" />
</DashboardLayout>
```
This matches plugin conventions used by FileBrowser.
## Server Architecture
### WebSocket Flow
The terminal websocket is mounted in `src/server.tsx`:
- Path: `/api/terminal/ws`
- Auth: `token` query parameter, validated with `verify()`.
- Server handler: `terminalWebsocket` from `plugins/Terminal/server`.
Message formats between client and server:
- Client -> server:
- `{ type: 'input', data: string }`
- `{ type: 'resize', cols: number, rows: number }`
- Server -> client:
- `{ type: 'output', data: string }`
- `{ type: 'exit' }`
### Sidecar Model
The Bun server does not spawn PTYs directly. Instead it proxies to a Node sidecar
that runs `node-pty` for reliability.
There are two sidecar modes:
1. Host mode
- Spawns a local Node sidecar on the host via Bun.
- Sidecar binds to `127.0.0.1`.
2. Docker sandbox mode
- Runs a Docker container per user.
- Container binds to `0.0.0.0` and is mapped to a host port.
- Container runs the same Node sidecar and shell inside the container.
### Mode Selection
- Settings are stored in `~/.config/officer.dev/server-settings.json`.
- `terminalSandboxed: true` enables Docker mode.
- If `terminalSandboxed` is falsy, host mode is used.
### Sidecar Handshake
On websocket open:
- Determine user home: `getHomeDir(email)`.
- Ensure the home directory exists.
- Determine mode (host or docker).
- Connect to sidecar on a port (host: default 5337; docker: user-specific).
- Send init payload to sidecar:
```
{
type: 'init',
shell: { command, args, name },
cwd,
homeDir,
userLabel
}
```
- `userLabel` is the email used by the prompt template.
- `cwd` and `homeDir` are `/home/officer` in Docker, or the user home on host.
### Docker Container Lifecycle
Containers are named `officer-terminal-${userId}` and stored per user in:
`data/terminal-containers.json`
Rules:
- Reuse an existing container if it exists and is running.
- Restart the container if it exists but stopped.
- Start a new container if none exists; allocate a port starting at 54000.
- Containers are left running for reuse when websocket closes.
### Docker Image
- Tag: `officer-terminal-sidecar:v1`
- Built from `Dockerfile.terminal-sidecar` when missing.
Includes:
- zsh, git, curl, ca-certificates
- oh-my-zsh
- starship
- fortune-mod, cowsay
- eza
- node, ws, node-pty
### Shell Configuration
Templates are copied into the user's home if missing:
- `.zshrc`
- `.config/starship-officer.toml`
This provides a stable base for all users while allowing per-user customization.
Prompt requirement:
- Format: `email@domain:officer.dev`
- Email colored in button blue (#0891B2)
## Plugin Conventions
- `index.ts` exports `plugin` metadata with `id` matching folder name.
- Client exports use `Widget`/`Screen` conventions. Terminal only exports `Screen`
and `TerminalView` (no widget).
- Server exports a websocket handler (not a router). This is a special-case
plugin that is mounted in `src/server.tsx`.
## Known Constraints
- Terminal mode is global via server settings; no per-component mode selection.
- `TerminalView` builds the websocket URL from `window.location` and localStorage
token; custom auth is not supported yet.
- Sidecar connection retries are bounded; errors are printed to the terminal.
## Potential Future Enhancements
- Allow `TerminalView` to request mode/cwd via websocket init payload.
- Add a read-only mode or initial command support.
- Add per-component theme presets or allow app-level defaults.
- Add better telemetry/logging for sidecar startup failures.
## API Contract
This section describes the messages across each layer.
### Client <-> Server (Bun)
Client -> server:
- `input`
- `{ type: 'input', data: string }`
- `data` is raw terminal input from xterm.
- `resize`
- `{ type: 'resize', cols: number, rows: number }`
Server -> client:
- `output`
- `{ type: 'output', data: string }`
- `data` is raw PTY output to be written to xterm.
- `exit`
- `{ type: 'exit' }`
- Signals terminal process termination.
### Server <-> Sidecar (Node)
Server -> sidecar:
- `init`
- `{ type: 'init', shell, cwd, homeDir, userLabel }`
- `shell`: `{ command: string; args: string[]; name: string }`
- `cwd`: initial current working directory
- `homeDir`: home directory to set in the sidecar
- `userLabel`: email for the prompt template
- `input`
- `{ type: 'input', data: string }`
- `resize`
- `{ type: 'resize', cols: number, rows: number }`
Sidecar -> server:
- `output`
- `{ type: 'output', data: string }`
- `exit`
- `{ type: 'exit' }`
## Sequence Diagram
```
Client (xterm) Bun Server Sidecar (Node) Shell
| | | |
| WS connect | | |
|---------------> | | |
| | connect sidecar | |
| |-------------------> | |
| | init (shell/cwd) | |
| |-------------------> | spawn PTY |
| | |----------------->|
| input | | |
|---------------> | input | |
| |-------------------> | write to PTY |
| output | | |
|<--------------- | output | read from PTY |
| |<------------------- | |
| resize | | |
|---------------> | resize | |
| |-------------------> | set PTY size |
```
## Docker Troubleshooting
Common failure modes and checks:
- Docker not installed or not in PATH
- `ensureDockerImage()` will throw. Install Docker or fix PATH.
- Image build fails
- Build uses `Dockerfile.terminal-sidecar` and tag `officer-terminal-sidecar:v1`.
- Check for network access (apt), and that build context is the plugin folder.
- Container starts but sidecar is unreachable
- Container binds to `0.0.0.0`, host maps `127.0.0.1:${port}:${port}`.
- Port is user-specific, stored in `data/terminal-containers.json`.
- Verify with `docker ps` and `docker logs` for the container name.
- Permissions inside container
- Container runs with host UID/GID derived from the mounted user home.
- If home dir ownership is incorrect, zsh history may fail to write.
- Shell missing
- Container must have zsh installed; the Dockerfile includes zsh.
- Host mode resolves shell from `$SHELL` or known paths.
## Per-User Template Rules
Templates are copied into user home on first launch only.
Files:
- `.zshrc`
- `.config/starship-officer.toml`
Rules:
- If a file already exists, it is not overwritten.
- This lets the admin provide a stable default while allowing user customization.
- To reset a user to defaults, delete the per-user files and reconnect.
@@ -1,10 +0,0 @@
import { DashboardLayout } from '@/Screens/Dashboard/Layout';
import { TerminalView } from '../TerminalView';
export const Terminal = () => {
return (
<DashboardLayout>
<TerminalView className="h-full w-full p-2" />
</DashboardLayout>
);
};
@@ -1,2 +0,0 @@
export { Terminal as Screen } from './Screen';
export { TerminalView } from './TerminalView';
-8
View File
@@ -1,8 +0,0 @@
export { Screen } from './client';
export { terminalWebsocket } from './server';
export const plugin = {
id: 'Terminal',
name: 'Terminal',
description: 'Browser-based terminal emulator',
};
@@ -1,35 +0,0 @@
FROM node:20-bookworm-slim
RUN apt-get update \
&& apt-get install -y python3 make g++ zsh git curl ca-certificates fortune-mod cowsay \
&& rm -rf /var/lib/apt/lists/*
WORKDIR /app
COPY pty-sidecar.mjs /app/pty-sidecar.mjs
COPY templates /opt/terminal-templates
RUN npm init -y \
&& npm install ws@8.18.1 node-pty@1.1.0
RUN curl -fsSL https://starship.rs/install.sh | sh -s -- -y -b /usr/local/bin
RUN git clone --depth 1 https://github.com/ohmyzsh/ohmyzsh.git /opt/oh-my-zsh
ENV EZA_VERSION=0.18.15
RUN curl -fsSL "https://github.com/eza-community/eza/releases/download/v${EZA_VERSION}/eza_x86_64-unknown-linux-gnu.tar.gz" -o /tmp/eza.tar.gz \
&& tar -xzf /tmp/eza.tar.gz -C /tmp \
&& mv /tmp/eza /usr/local/bin/eza \
&& chmod +x /usr/local/bin/eza \
&& rm -rf /tmp/eza.tar.gz /tmp/completions /tmp/man
WORKDIR /home/officer
ENV TERMINAL_PTY_PORT=5337
ENV PATH="/usr/games:${PATH}"
EXPOSE 5337
CMD ["node", "/app/pty-sidecar.mjs"]
@@ -1 +0,0 @@
export { terminalWebsocket } from './websocket';
@@ -1,178 +0,0 @@
import http from 'node:http';
import { existsSync } from 'node:fs';
import { cp, mkdir } from 'node:fs/promises';
import { join, dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
import { WebSocketServer } from 'ws';
import * as pty from 'node-pty';
const __dirname = dirname(fileURLToPath(import.meta.url));
const isDocker = existsSync('/opt/terminal-templates/.zshrc');
const templateDir = isDocker ? '/opt/terminal-templates' : join(__dirname, 'templates');
const ohMyZshSource = isDocker ? '/opt/oh-my-zsh' : null;
const port = Number(process.env.TERMINAL_PTY_PORT ?? '5337');
const host = process.env.TERMINAL_PTY_HOST ?? '127.0.0.1';
const server = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('terminal-sidecar');
});
const wss = new WebSocketServer({ server });
const sendJson = (ws, msg) => {
try {
ws.send(JSON.stringify(msg));
} catch {
// ignore
}
};
const ensureUserFiles = async (homeDir) => {
await mkdir(homeDir, { recursive: true });
await mkdir(join(homeDir, '.config'), { recursive: true });
await mkdir(join(homeDir, '.local', 'bin'), { recursive: true });
const zshrcPath = join(homeDir, '.zshrc');
if (!existsSync(zshrcPath)) {
await cp(join(templateDir, '.zshrc'), zshrcPath);
}
const starshipPath = join(homeDir, '.config', 'starship-officer.toml');
if (!existsSync(starshipPath)) {
await cp(join(templateDir, 'starship-officer.toml'), starshipPath);
}
const ohMyZshPath = join(homeDir, '.oh-my-zsh');
if (!existsSync(ohMyZshPath)) {
if (ohMyZshSource && existsSync(ohMyZshSource)) {
await cp(ohMyZshSource, ohMyZshPath, { recursive: true });
} else {
// Clone oh-my-zsh on first run (host mode)
const proc = Bun.spawn({
cmd: ['git', 'clone', '--depth=1', 'https://github.com/ohmyzsh/ohmyzsh.git', ohMyZshPath],
stdout: 'ignore',
stderr: 'ignore',
});
await proc.exited;
}
}
// Install starship on host if missing (not needed in Docker)
if (!isDocker) {
const starshipBin = join(homeDir, '.local', 'bin', 'starship');
if (!existsSync(starshipBin)) {
const installProc = Bun.spawn({
cmd: ['sh', '-c', 'curl -sS https://starship.rs/install.sh | sh -s -- -y -b "$HOME/.local/bin"'],
env: { ...process.env, HOME: homeDir },
stdout: 'ignore',
stderr: 'ignore',
});
await installProc.exited;
}
}
};
wss.on('connection', (ws) => {
let term = null;
let initialized = false;
const cleanup = () => {
if (term) {
try {
term.kill();
} catch {
// ignore
}
}
term = null;
};
ws.on('message', async (data) => {
let msg;
try {
msg = JSON.parse(typeof data === 'string' ? data : data.toString());
} catch {
return;
}
if (msg.type === 'init' && !initialized) {
const shell = msg.shell ?? { command: '/bin/bash', args: ['-i'] };
const cwd = msg.cwd ?? process.cwd();
const homeDir = msg.homeDir ?? process.cwd();
const userLabel = msg.userLabel ?? 'officer';
const prompt = `${userLabel} in %~ %# `;
const bashPrompt = `${userLabel} \w \$ `;
try {
await ensureUserFiles(homeDir);
} catch {
// ignore
}
try {
term = pty.spawn(shell.command, shell.args ?? [], {
name: 'xterm-256color',
cols: 80,
rows: 24,
cwd,
env: {
...process.env,
HOME: homeDir,
ZDOTDIR: homeDir,
ZSH: `${homeDir}/.oh-my-zsh`,
SHELL: shell.command,
USER: userLabel,
LOGNAME: userLabel,
OFFICER_TERMINAL_USER: userLabel,
PROMPT: prompt,
PS1: bashPrompt,
TERM: 'xterm-256color',
},
});
} catch (err) {
const message = err instanceof Error ? err.message : 'Failed to start terminal';
sendJson(ws, { type: 'output', data: `\r\n[Terminal error] ${message}\r\n` });
sendJson(ws, { type: 'exit' });
return;
}
initialized = true;
term.onData((output) => {
sendJson(ws, { type: 'output', data: output });
});
term.onExit(() => {
sendJson(ws, { type: 'exit' });
cleanup();
});
return;
}
if (!term) return;
switch (msg.type) {
case 'input':
term.write(msg.data ?? '');
break;
case 'resize':
if (msg.cols > 0 && msg.rows > 0) term.resize(msg.cols, msg.rows);
break;
case 'cwd':
if (msg.path) term.write(`cd ${JSON.stringify(msg.path)}\r`);
break;
}
});
ws.on('close', () => {
cleanup();
});
});
server.listen(port, host, () => {
console.log(`[terminal-sidecar] listening on ${host}:${port}`);
});
@@ -1,73 +0,0 @@
# If you come from bash you might have to change your $PATH.
export PATH=$HOME/.local/bin:$PATH
# Path to your Oh My Zsh installation.
export ZSH="$HOME/.oh-my-zsh"
# Set name of the theme to load --- if set to "random", it will
# load a random theme each time Oh My Zsh is loaded, in which case,
# to know which specific one was loaded, run: echo $RANDOM_THEME
# See https://github.com/ohmyzsh/ohmyzsh/wiki/Themes
ZSH_THEME=""
# Which plugins would you like to load?
# Standard plugins can be found in $ZSH/plugins/
# Custom plugins may be added to $ZSH_CUSTOM/plugins/
# Example format: plugins=(rails git textmate ruby lighthouse)
# Add wisely, as too many plugins slow down shell startup.
plugins=(git)
source $ZSH/oh-my-zsh.sh
# ============================================================================
# STARSHIP PROMPT
# ============================================================================
if [[ -n "$OFFICER_TERMINAL_USER" ]]; then
export STARSHIP_CONFIG="$HOME/.config/starship-officer.toml"
fi
# Auto-install starship if not available (host mode)
if ! command -v starship &> /dev/null; then
if [[ ! -x "$HOME/.local/bin/starship" ]]; then
mkdir -p "$HOME/.local/bin"
echo "Installing starship..."
curl -sS https://starship.rs/install.sh | sh -s -- -y -b "$HOME/.local/bin" 2>/dev/null
fi
export PATH="$HOME/.local/bin:$PATH"
fi
eval "$(starship init zsh)"
# ============================================================================
# EZA ALIASES (colors and icons for ls)
# ============================================================================
alias ls='eza --icons'
alias la='eza --icons -la'
alias ll='eza --icons -l'
alias lll='eza --icons -lA'
alias lh='eza --icons -lhA'
alias ltr='eza --icons -ltr'
alias l='eza --icons -la'
# Other common aliases (oh-my-zsh standard)
alias grep='grep --color=auto'
alias less='less -R'
alias diff='diff --color=auto'
alias cp='cp -iv'
alias mv='mv -iv'
alias rm='rm -i'
alias mkdir='mkdir -p'
alias which='which -a'
alias history='fc -l 1'
alias n="nvim"
alias vim="n"
alias sz="source ~/.zshrc"
alias ld="lazydocker"
alias hr="hyprctl reload"
alias hir="omarchy-restart-hypridle"
alias setupmines="WINEPREFIX=~/wine/minesweeper winecfg"
alias httpserver="python -m http.server 8888"
clear
fortune | cowsay
@@ -1,20 +0,0 @@
format = "$env_var:$hostname $directory $character"
[env_var]
variable = "OFFICER_TERMINAL_USER"
format = "[$env_value]($style)"
style = "bold #0891B2"
[hostname]
ssh_only = false
format = "[officer.dev]($style)"
style = "bold yellow"
[directory]
truncation_length = 3
truncate_to_repo = false
style = "blue"
[character]
success_symbol = ">"
error_symbol = ">"
@@ -1,378 +0,0 @@
import type { ServerWebSocket } from 'bun';
import { mkdirSync, existsSync, statSync } from 'node:fs';
import { dirname } from 'node:path';
import { homedir } from 'node:os';
import { join } from 'node:path';
import { fileURLToPath } from 'node:url';
import { getHomeDir } from '@@/data-path';
type WSData = { userId: number; email: string };
type ShellInfo = { command: string; args: string[]; name: string };
type TerminalMode = 'host' | 'docker';
type BridgeSession = {
client: ServerWebSocket<WSData>;
sidecar: WebSocket | null;
mode: TerminalMode;
dockerId?: string;
port: number;
};
type ContainerInfo = {
userId: number;
email: string;
dockerId: string;
port: number;
};
const sessions = new Map<ServerWebSocket<WSData>, BridgeSession>();
const defaultSidecarPort = Number(process.env.TERMINAL_PTY_PORT ?? '5337');
const containerMapPath = join(getHomeDir(''), '..', 'terminal-containers.json');
let sidecarProcess: Bun.Subprocess | null = null;
let dockerImageReady = false;
let containersCache: Record<string, ContainerInfo> | null = null;
const resolveShell = (): ShellInfo => {
const envShell = process.env.SHELL?.trim();
if (envShell) {
const shellName = envShell.split('/').pop() ?? envShell;
return {
command: envShell,
args: shellName === 'zsh' ? ['-d', '-i'] : shellName === 'bash' ? ['-i'] : ['-i'],
name: shellName,
};
}
const candidates = ['/bin/zsh', '/usr/bin/zsh', '/bin/bash', '/usr/bin/bash'];
for (const candidate of candidates) {
if (existsSync(candidate)) {
const shellName = candidate.split('/').pop() ?? candidate;
return {
command: candidate,
args: shellName === 'zsh' ? ['-d', '-i'] : shellName === 'bash' ? ['-i'] : ['-i'],
name: shellName,
};
}
}
try {
const proc = Bun.spawnSync(['which', 'zsh'], { stdout: 'pipe', stderr: 'pipe' });
if (proc.exitCode === 0) {
const command = proc.stdout.toString().trim();
return { command, args: ['-d', '-i'], name: 'zsh' };
}
} catch {
// fall through
}
return { command: 'bash', args: ['-i'], name: 'bash' };
};
const sendOutput = (ws: ServerWebSocket<WSData>, data: string) => {
try {
ws.send(JSON.stringify({ type: 'output', data }));
} catch {
// ws already closed
}
};
const startSidecar = (port: number) => {
if (sidecarProcess) return;
const nodePath = Bun.which('node') ?? 'node';
const sidecarPath = fileURLToPath(new URL('./pty-sidecar.mjs', import.meta.url));
sidecarProcess = Bun.spawn({
cmd: [nodePath, sidecarPath],
env: { ...process.env, TERMINAL_PTY_PORT: String(port), TERMINAL_PTY_HOST: '127.0.0.1' },
stdout: 'inherit',
stderr: 'inherit',
});
sidecarProcess.exited.then(() => {
sidecarProcess = null;
});
};
const connectSidecar = async (port: number, mode: TerminalMode): Promise<WebSocket> => {
if (mode === 'host') startSidecar(port);
const delays = mode === 'docker' ? [200, 300, 500, 800, 1200, 1600, 2000] : [50, 150, 300, 600, 1200];
let lastError: Error | null = null;
for (const delay of delays) {
try {
const ws = await new Promise<WebSocket>((resolve, reject) => {
const socket = new WebSocket(`ws://127.0.0.1:${port}`);
const timeout = setTimeout(() => {
try {
socket.close();
} catch {
// ignore
}
reject(new Error('Terminal sidecar timeout'));
}, 2000);
socket.addEventListener('open', () => {
clearTimeout(timeout);
resolve(socket);
});
socket.addEventListener('error', () => {
clearTimeout(timeout);
reject(new Error('Terminal sidecar connection failed'));
});
});
return ws;
} catch (err) {
lastError = err instanceof Error ? err : new Error('Terminal sidecar connection failed');
await new Promise((resolve) => setTimeout(resolve, delay));
}
}
throw lastError ?? new Error('Terminal sidecar connection failed');
};
const getSettings = async (): Promise<{ terminalSandboxed?: boolean }> => {
const settingsPath = `${homedir()}/.config/officer.dev/server-settings.json`;
return await Bun.file(settingsPath)
.json()
.catch(() => ({}));
};
const prebuildDockerImage = async () => {
ensureDockerImage();
};
const ensureDockerImage = () => {
if (dockerImageReady) return;
const dockerPath = Bun.which('docker');
if (!dockerPath) throw new Error('Docker not found');
const tag = 'officer-terminal-sidecar:v1';
const inspect = Bun.spawnSync({ cmd: [dockerPath, 'image', 'inspect', tag], stdout: 'ignore', stderr: 'ignore' });
if (inspect.exitCode === 0) {
dockerImageReady = true;
return;
}
const dockerfilePath = fileURLToPath(new URL('./Dockerfile.terminal-sidecar', import.meta.url));
const build = Bun.spawnSync({
cmd: [dockerPath, 'build', '-f', dockerfilePath, '-t', tag, '.'],
cwd: fileURLToPath(new URL('./', import.meta.url)),
stdout: 'inherit',
stderr: 'inherit',
});
if (build.exitCode !== 0) throw new Error('Failed to build terminal sandbox image');
dockerImageReady = true;
};
const startDockerSidecar = (port: number, homeDir: string, userId: number): { dockerId: string } => {
ensureDockerImage();
const dockerPath = Bun.which('docker') ?? 'docker';
const dockerId = `officer-terminal-${userId}`;
const tag = 'officer-terminal-sidecar:v1';
let userArgs: string[] = [];
try {
const stats = statSync(homeDir);
userArgs = ['--user', `${stats.uid}:${stats.gid}`];
} catch {
userArgs = [];
}
const run = Bun.spawnSync({
cmd: [
dockerPath,
'run',
'-d',
'--name',
dockerId,
'--restart',
'unless-stopped',
...userArgs,
'-p',
`127.0.0.1:${port}:${port}`,
'-e',
`TERMINAL_PTY_PORT=${port}`,
'-e',
'TERMINAL_PTY_HOST=0.0.0.0',
'-v',
`${homeDir}:/home/officer`,
'-w',
'/home/officer',
tag,
],
stdout: 'inherit',
stderr: 'inherit',
});
if (run.exitCode !== 0) throw new Error('Failed to start terminal sandbox container');
return { dockerId };
};
const stopDockerSidecar = (dockerId: string) => {
const dockerPath = Bun.which('docker') ?? 'docker';
Bun.spawnSync({ cmd: [dockerPath, 'rm', '-f', dockerId], stdout: 'ignore', stderr: 'ignore' });
};
const readDockerLogs = (dockerId: string) => {
const dockerPath = Bun.which('docker') ?? 'docker';
const logs = Bun.spawnSync({ cmd: [dockerPath, 'logs', '--tail', '200', dockerId], stdout: 'pipe', stderr: 'pipe' });
if (logs.exitCode !== 0) return '';
return logs.stdout.toString().trim();
};
const loadContainerMap = async (): Promise<Record<string, ContainerInfo>> => {
if (containersCache) return containersCache;
const data = await Bun.file(containerMapPath)
.json()
.catch(() => ({}));
containersCache = data as Record<string, ContainerInfo>;
return containersCache;
};
const saveContainerMap = async (map: Record<string, ContainerInfo>) => {
containersCache = map;
await Bun.write(containerMapPath, JSON.stringify(map, null, 2));
};
const getAvailablePort = (map: Record<string, ContainerInfo>, userId: number) => {
const base = 54000;
const used = new Set(Object.values(map).map((item) => item.port));
let port = base + (userId % 1000);
while (used.has(port)) port += 1;
return port;
};
const dockerContainerExists = (dockerId: string) => {
const dockerPath = Bun.which('docker') ?? 'docker';
const result = Bun.spawnSync({ cmd: [dockerPath, 'ps', '-a', '-q', '-f', `name=${dockerId}`], stdout: 'pipe' });
return result.exitCode === 0 && result.stdout.toString().trim().length > 0;
};
const dockerContainerRunning = (dockerId: string) => {
const dockerPath = Bun.which('docker') ?? 'docker';
const result = Bun.spawnSync({ cmd: [dockerPath, 'ps', '-q', '-f', `name=${dockerId}`], stdout: 'pipe' });
return result.exitCode === 0 && result.stdout.toString().trim().length > 0;
};
const dockerStart = (dockerId: string) => {
const dockerPath = Bun.which('docker') ?? 'docker';
const result = Bun.spawnSync({ cmd: [dockerPath, 'start', dockerId], stdout: 'ignore', stderr: 'ignore' });
return result.exitCode === 0;
};
const ensureDockerContainer = async (email: string, userId: number, homeDir: string) => {
const map = await loadContainerMap();
const existing = map[email];
if (existing && dockerContainerRunning(existing.dockerId)) return existing;
if (existing && dockerContainerExists(existing.dockerId)) {
if (dockerStart(existing.dockerId)) return existing;
}
const port = existing?.port ?? getAvailablePort(map, userId);
const docker = startDockerSidecar(port, homeDir, userId);
const next = { userId, email, dockerId: docker.dockerId, port };
map[email] = next;
await saveContainerMap(map);
return next;
};
void prebuildDockerImage();
export const terminalWebsocket = {
async open(ws: ServerWebSocket<WSData>) {
const { email } = ws.data;
const cwd = getHomeDir(email);
const userRoot = dirname(cwd);
mkdirSync(userRoot, { recursive: true });
mkdirSync(cwd, { recursive: true });
const shell = resolveShell();
const settings = await getSettings();
const mode: TerminalMode = settings.terminalSandboxed ? 'docker' : 'host';
const containerHome = '/home/officer';
const containerShell: ShellInfo = { command: '/bin/zsh', args: ['-d', '-i'], name: 'zsh' };
const port =
mode === 'docker' ? (await ensureDockerContainer(email, ws.data.userId, cwd)).port : defaultSidecarPort;
let sidecar: WebSocket | null = null;
let dockerId: string | undefined;
try {
if (mode === 'docker') {
const info = await ensureDockerContainer(email, ws.data.userId, cwd);
dockerId = info.dockerId;
}
sidecar = await connectSidecar(port, mode);
} catch (err) {
const message = err instanceof Error ? err.message : 'Failed to connect terminal sidecar';
sendOutput(ws, `\r\n[Terminal error] ${message}\r\n`);
if (dockerId) {
const logs = readDockerLogs(dockerId);
if (logs) {
sendOutput(ws, `\r\n[Docker logs]\r\n${logs}\r\n`);
}
}
sendOutput(ws, '\r\n[Process exited]\r\n');
if (dockerId) stopDockerSidecar(dockerId);
return;
}
sessions.set(ws, { client: ws, sidecar, mode, dockerId, port });
sidecar.addEventListener('message', (ev) => {
try {
if (typeof ev.data === 'string') {
ws.send(ev.data);
} else {
ws.send(new TextDecoder().decode(ev.data));
}
} catch {
// ws already closed
}
});
const initCwd = mode === 'docker' ? containerHome : cwd;
const initHome = mode === 'docker' ? containerHome : cwd;
const initShell = mode === 'docker' ? containerShell : shell;
sidecar.send(
JSON.stringify({
type: 'init',
shell: initShell,
cwd: initCwd,
homeDir: initHome,
userLabel: email,
}),
);
},
message(ws: ServerWebSocket<WSData>, raw: string | Buffer) {
const session = sessions.get(ws);
if (!session?.sidecar || session.sidecar.readyState !== WebSocket.OPEN) return;
try {
const payload = typeof raw === 'string' ? raw : raw.toString();
session.sidecar.send(payload);
} catch {
// ignore
}
},
close(ws: ServerWebSocket<WSData>) {
const session = sessions.get(ws);
if (session?.sidecar) {
try {
session.sidecar.close();
} catch {
// ignore
}
}
if (session?.dockerId) {
// keep sandbox containers running for reuse
}
sessions.delete(ws);
},
drain() {},
};
-3
View File
@@ -7,9 +7,6 @@
"./FileBrowser": "./FileBrowser/index.ts",
"./FileBrowser/client": "./FileBrowser/client/index.ts",
"./FileBrowser/server": "./FileBrowser/server/index.ts",
"./Terminal": "./Terminal/index.ts",
"./Terminal/client": "./Terminal/client/index.ts",
"./Terminal/server": "./Terminal/server/index.ts",
"./Chat": "./Chat/index.ts",
"./Chat/client": "./Chat/client/index.ts",
"./ChatHistory": "./ChatHistory/index.ts",
@@ -1,2 +0,0 @@
import './variables.css';
import './prose.css';
@@ -1 +0,0 @@
export const meta = { id: 'CatppuccinLatte', name: 'Catppuccin Latte', description: 'Warm pastel tones on a creamy light canvas.' };
@@ -1,124 +0,0 @@
/* File Viewer — Markdown Prose */
[data-color-theme="CatppuccinLatte"] .file-viewer-md {
color: #4c4f69;
}
[data-color-theme="CatppuccinLatte"] .file-viewer-md h1 {
border-bottom-color: rgba(204, 208, 218, 0.4);
}
[data-color-theme="CatppuccinLatte"] .file-viewer-md h2 {
border-bottom-color: rgba(204, 208, 218, 0.3);
}
[data-color-theme="CatppuccinLatte"] .file-viewer-md a {
color: #1e66f5;
}
[data-color-theme="CatppuccinLatte"] .file-viewer-md a:hover {
color: #04a5e5;
}
[data-color-theme="CatppuccinLatte"] .file-viewer-md strong {
color: #4c4f69;
}
[data-color-theme="CatppuccinLatte"] .file-viewer-md blockquote {
border-left-color: #1e66f5;
background: rgba(30, 102, 245, 0.06);
color: #6c6f85;
}
[data-color-theme="CatppuccinLatte"] .file-viewer-md li::marker {
color: #1e66f5;
}
[data-color-theme="CatppuccinLatte"] .file-viewer-md hr {
background: rgba(204, 208, 218, 0.4);
}
[data-color-theme="CatppuccinLatte"] .file-viewer-md th {
background: rgba(30, 102, 245, 0.08);
border-color: rgba(204, 208, 218, 0.4);
}
[data-color-theme="CatppuccinLatte"] .file-viewer-md td {
border-color: rgba(204, 208, 218, 0.3);
}
[data-color-theme="CatppuccinLatte"] .file-viewer-md tr:nth-child(even) {
background: rgba(204, 208, 218, 0.1);
}
[data-color-theme="CatppuccinLatte"] .file-viewer-md input[type="checkbox"] {
accent-color: #1e66f5;
}
/* Skills — Markdown Prose */
[data-color-theme="CatppuccinLatte"] .skill-md {
color: #4c4f69;
}
[data-color-theme="CatppuccinLatte"] .skill-md h1 {
border-bottom-color: rgba(204, 208, 218, 0.4);
}
[data-color-theme="CatppuccinLatte"] .skill-md h2 {
border-bottom-color: rgba(204, 208, 218, 0.3);
}
[data-color-theme="CatppuccinLatte"] .skill-md a {
color: #1e66f5;
}
[data-color-theme="CatppuccinLatte"] .skill-md a:hover {
color: #04a5e5;
}
[data-color-theme="CatppuccinLatte"] .skill-md strong {
color: #4c4f69;
}
[data-color-theme="CatppuccinLatte"] .skill-md blockquote {
border-left-color: #1e66f5;
background: rgba(30, 102, 245, 0.06);
color: #6c6f85;
}
[data-color-theme="CatppuccinLatte"] .skill-md li::marker {
color: #1e66f5;
}
[data-color-theme="CatppuccinLatte"] .skill-md code {
background: rgba(30, 102, 245, 0.1);
color: #1e66f5;
}
[data-color-theme="CatppuccinLatte"] .skill-md pre {
background: #e6e9ef;
}
[data-color-theme="CatppuccinLatte"] .skill-md pre code {
color: #4c4f69;
}
[data-color-theme="CatppuccinLatte"] .skill-md hr {
background: rgba(204, 208, 218, 0.4);
}
[data-color-theme="CatppuccinLatte"] .skill-md th {
background: rgba(30, 102, 245, 0.08);
border-color: rgba(204, 208, 218, 0.4);
}
[data-color-theme="CatppuccinLatte"] .skill-md td {
border-color: rgba(204, 208, 218, 0.3);
}
[data-color-theme="CatppuccinLatte"] .skill-md tr:nth-child(even) {
background: rgba(204, 208, 218, 0.1);
}
[data-color-theme="CatppuccinLatte"] .skill-md input[type="checkbox"] {
accent-color: #1e66f5;
}
@@ -1,92 +0,0 @@
@layer base {
[data-color-theme="CatppuccinLatte"] {
/* Brand colors */
--duck-yellow: #df8e1d;
--duck-orange: #d20f39;
--duck-teal: #1e66f5;
--duck-forest: #6c6f85;
--duck-dark: #4c4f69;
--duck-beige: #dce0e8;
/* Page background */
--pixel-grid-color: rgba(30, 102, 245, 0.08);
/* Glass surfaces */
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(30, 102, 245, 0.2);
--dock-bg: rgba(0, 0, 0, 0.15);
--dock-border: rgba(30, 102, 245, 0.1);
--dock-tooltip-bg: rgba(0, 0, 0, 0.75);
/* Card component */
--card-bg: rgba(230, 233, 239, 0.92);
--card-grid-color: rgba(30, 102, 245, 0.06);
--cta: 219.9 91.5% 53.9%;
--cta-foreground: 220 23.1% 94.9%;
--naturegreen: 197.1 96.6% 45.7%;
--naturegreen-foreground: 220 23.1% 94.9%;
--background: 220 23.1% 94.9%;
--foreground: 233.8 16% 35.5%;
--card: 220 22% 92%;
--card-foreground: 233.8 16% 35.5%;
--popover: 220 22% 92%;
--popover-foreground: 233.8 16% 35.5%;
--primary: 219.9 91.5% 53.9%;
--primary-foreground: 220 23.1% 94.9%;
--secondary: 222.9 15.9% 82.7%;
--secondary-foreground: 233.8 16% 35.5%;
--muted: 220 20.7% 88.6%;
--muted-foreground: 232.8 10.4% 47.3%;
--accent: 197.1 96.6% 45.7%;
--accent-foreground: 220 23.1% 94.9%;
--destructive: 347.1 86.7% 44.1%;
--destructive-foreground: 220 23.1% 94.9%;
--success: 109.2 57.6% 39.8%;
--success-foreground: 220 23.1% 94.9%;
--brand: 219.9 91.5% 53.9%;
--brand-foreground: 220 23.1% 94.9%;
--brand-muted: 220 20.7% 88.6%;
--warning: 34.9 77% 49.4%;
--warning-foreground: 233.8 16% 35.5%;
--border: 222.9 15.9% 82.7%;
--input: 222.9 15.9% 82.7%;
--ring: 219.9 91.5% 53.9%;
--radius: 0.5rem;
/* Chart gradients */
--chart-primary: 219.9 91.5% 53.9%;
--chart-secondary: 34.9 77% 49.4%;
/* Status colors */
--status-success: 109.2 57.6% 39.8%;
--status-warning: 34.9 77% 49.4%;
--status-in-progress: 219.9 91.5% 53.9%;
--sidebar-background: 220 22% 92%;
--sidebar-foreground: 232.8 10.4% 47.3%;
--sidebar-primary: 219.9 91.5% 53.9%;
--sidebar-primary-foreground: 220 23.1% 94.9%;
--sidebar-accent: 220 20.7% 88.6%;
--sidebar-accent-foreground: 233.8 16% 35.5%;
--sidebar-border: 222.9 15.9% 82.7%;
--sidebar-ring: 219.9 91.5% 53.9%;
/* Hover Effect */
--ctahover: 197.1 96.6% 45.7%;
}
}
@@ -1,2 +0,0 @@
import './variables.css';
import './prose.css';
@@ -1 +0,0 @@
export const meta = { id: 'CatppuccinMocha', name: 'Catppuccin Mocha', description: 'Rich dark chocolate with pastel neon accents.' };
@@ -1,124 +0,0 @@
/* File Viewer — Markdown Prose */
[data-color-theme="CatppuccinMocha"] .file-viewer-md {
color: #cdd6f4;
}
[data-color-theme="CatppuccinMocha"] .file-viewer-md h1 {
border-bottom-color: rgba(69, 71, 90, 0.4);
}
[data-color-theme="CatppuccinMocha"] .file-viewer-md h2 {
border-bottom-color: rgba(69, 71, 90, 0.3);
}
[data-color-theme="CatppuccinMocha"] .file-viewer-md a {
color: #89b4fa;
}
[data-color-theme="CatppuccinMocha"] .file-viewer-md a:hover {
color: #89dceb;
}
[data-color-theme="CatppuccinMocha"] .file-viewer-md strong {
color: #cdd6f4;
}
[data-color-theme="CatppuccinMocha"] .file-viewer-md blockquote {
border-left-color: #89b4fa;
background: rgba(137, 180, 250, 0.06);
color: #7f849c;
}
[data-color-theme="CatppuccinMocha"] .file-viewer-md li::marker {
color: #89b4fa;
}
[data-color-theme="CatppuccinMocha"] .file-viewer-md hr {
background: rgba(69, 71, 90, 0.4);
}
[data-color-theme="CatppuccinMocha"] .file-viewer-md th {
background: rgba(137, 180, 250, 0.08);
border-color: rgba(69, 71, 90, 0.4);
}
[data-color-theme="CatppuccinMocha"] .file-viewer-md td {
border-color: rgba(69, 71, 90, 0.3);
}
[data-color-theme="CatppuccinMocha"] .file-viewer-md tr:nth-child(even) {
background: rgba(69, 71, 90, 0.1);
}
[data-color-theme="CatppuccinMocha"] .file-viewer-md input[type="checkbox"] {
accent-color: #89b4fa;
}
/* Skills — Markdown Prose */
[data-color-theme="CatppuccinMocha"] .skill-md {
color: #cdd6f4;
}
[data-color-theme="CatppuccinMocha"] .skill-md h1 {
border-bottom-color: rgba(69, 71, 90, 0.4);
}
[data-color-theme="CatppuccinMocha"] .skill-md h2 {
border-bottom-color: rgba(69, 71, 90, 0.3);
}
[data-color-theme="CatppuccinMocha"] .skill-md a {
color: #89b4fa;
}
[data-color-theme="CatppuccinMocha"] .skill-md a:hover {
color: #89dceb;
}
[data-color-theme="CatppuccinMocha"] .skill-md strong {
color: #cdd6f4;
}
[data-color-theme="CatppuccinMocha"] .skill-md blockquote {
border-left-color: #89b4fa;
background: rgba(137, 180, 250, 0.06);
color: #7f849c;
}
[data-color-theme="CatppuccinMocha"] .skill-md li::marker {
color: #89b4fa;
}
[data-color-theme="CatppuccinMocha"] .skill-md code {
background: rgba(137, 180, 250, 0.1);
color: #89b4fa;
}
[data-color-theme="CatppuccinMocha"] .skill-md pre {
background: #181825;
}
[data-color-theme="CatppuccinMocha"] .skill-md pre code {
color: #cdd6f4;
}
[data-color-theme="CatppuccinMocha"] .skill-md hr {
background: rgba(69, 71, 90, 0.4);
}
[data-color-theme="CatppuccinMocha"] .skill-md th {
background: rgba(137, 180, 250, 0.08);
border-color: rgba(69, 71, 90, 0.4);
}
[data-color-theme="CatppuccinMocha"] .skill-md td {
border-color: rgba(69, 71, 90, 0.3);
}
[data-color-theme="CatppuccinMocha"] .skill-md tr:nth-child(even) {
background: rgba(69, 71, 90, 0.1);
}
[data-color-theme="CatppuccinMocha"] .skill-md input[type="checkbox"] {
accent-color: #89b4fa;
}
@@ -1,92 +0,0 @@
@layer base {
[data-color-theme="CatppuccinMocha"] {
/* Brand colors */
--duck-yellow: #f9e2af;
--duck-orange: #fab387;
--duck-teal: #89b4fa;
--duck-forest: #7f849c;
--duck-dark: #cdd6f4;
--duck-beige: #313244;
/* Page background */
--pixel-grid-color: rgba(137, 180, 250, 0.06);
/* Glass surfaces */
--glass-bg: rgba(0, 0, 0, 0.25);
--glass-border: rgba(137, 180, 250, 0.12);
--dock-bg: rgba(0, 0, 0, 0.35);
--dock-border: rgba(137, 180, 250, 0.08);
--dock-tooltip-bg: rgba(0, 0, 0, 0.9);
/* Card component */
--card-bg: rgba(24, 24, 37, 0.92);
--card-grid-color: rgba(137, 180, 250, 0.04);
--cta: 217.2 91.9% 75.9%;
--cta-foreground: 240 21.1% 14.9%;
--naturegreen: 189.2 71% 72.9%;
--naturegreen-foreground: 240 21.1% 14.9%;
--background: 240 21.1% 14.9%;
--foreground: 226.2 63.9% 88%;
--card: 240 21.3% 12%;
--card-foreground: 226.2 63.9% 88%;
--popover: 240 21.3% 12%;
--popover-foreground: 226.2 63.9% 88%;
--primary: 217.2 91.9% 75.9%;
--primary-foreground: 240 21.1% 14.9%;
--secondary: 234.3 13.2% 31.2%;
--secondary-foreground: 226.2 63.9% 88%;
--muted: 236.8 16.2% 22.9%;
--muted-foreground: 229.7 12.8% 55.5%;
--accent: 189.2 71% 72.9%;
--accent-foreground: 240 21.1% 14.9%;
--destructive: 343.3 81.2% 74.9%;
--destructive-foreground: 240 21.1% 14.9%;
--success: 115.5 54.1% 76.1%;
--success-foreground: 240 21.1% 14.9%;
--brand: 217.2 91.9% 75.9%;
--brand-foreground: 240 21.1% 14.9%;
--brand-muted: 236.8 16.2% 22.9%;
--warning: 41.4 86% 83.1%;
--warning-foreground: 240 21.1% 14.9%;
--border: 234.3 13.2% 31.2%;
--input: 234.3 13.2% 31.2%;
--ring: 217.2 91.9% 75.9%;
--radius: 0.5rem;
/* Chart gradients */
--chart-primary: 217.2 91.9% 75.9%;
--chart-secondary: 41.4 86% 83.1%;
/* Status colors */
--status-success: 115.5 54.1% 76.1%;
--status-warning: 41.4 86% 83.1%;
--status-in-progress: 217.2 91.9% 75.9%;
--sidebar-background: 240 21.3% 12%;
--sidebar-foreground: 229.7 12.8% 55.5%;
--sidebar-primary: 217.2 91.9% 75.9%;
--sidebar-primary-foreground: 240 21.1% 14.9%;
--sidebar-accent: 236.8 16.2% 22.9%;
--sidebar-accent-foreground: 226.2 63.9% 88%;
--sidebar-border: 234.3 13.2% 31.2%;
--sidebar-ring: 217.2 91.9% 75.9%;
/* Hover Effect */
--ctahover: 189.2 71% 72.9%;
}
}
-4
View File
@@ -1,4 +0,0 @@
import './variables.css';
import './prose.css';
document.documentElement.style.setProperty('--page-bg-image', 'url(/static/landscape1.jpg)');
-1
View File
@@ -1 +0,0 @@
export const meta = { id: 'DuckPond', name: 'Duck Pond', description: 'Warm greens and teals inspired by a forest pond.' };
-264
View File
@@ -1,264 +0,0 @@
/* File Viewer — Markdown Prose */
.file-viewer-md {
color: #14532d;
font-size: 0.95rem;
line-height: 1.75;
}
.file-viewer-md h1 {
font-size: 2em;
font-weight: 700;
margin: 1.5em 0 0.5em;
padding-bottom: 0.3em;
border-bottom: 2px solid rgba(20, 83, 45, 0.12);
letter-spacing: -0.02em;
}
.file-viewer-md h2 {
font-size: 1.5em;
font-weight: 600;
margin: 1.4em 0 0.4em;
padding-bottom: 0.25em;
border-bottom: 1px solid rgba(20, 83, 45, 0.08);
}
.file-viewer-md h3 {
font-size: 1.25em;
font-weight: 600;
margin: 1.2em 0 0.4em;
}
.file-viewer-md h4, .file-viewer-md h5, .file-viewer-md h6 {
font-size: 1.05em;
font-weight: 600;
margin: 1em 0 0.3em;
}
.file-viewer-md p {
margin: 0.75em 0;
}
.file-viewer-md a {
color: #0891b2;
text-decoration: underline;
text-underline-offset: 2px;
}
.file-viewer-md a:hover {
color: #0e7490;
}
.file-viewer-md strong {
font-weight: 600;
color: #14532d;
}
.file-viewer-md blockquote {
margin: 1em 0;
padding: 0.5em 1em;
border-left: 3px solid #0891b2;
background: rgba(8, 145, 178, 0.05);
border-radius: 0 0.5rem 0.5rem 0;
color: #166534;
}
.file-viewer-md ul, .file-viewer-md ol {
margin: 0.75em 0;
padding-left: 1.75em;
}
.file-viewer-md li {
margin: 0.25em 0;
}
.file-viewer-md li::marker {
color: #0891b2;
}
.file-viewer-md hr {
border: none;
height: 1px;
background: rgba(20, 83, 45, 0.12);
margin: 2em 0;
}
.file-viewer-md table {
width: 100%;
border-collapse: collapse;
margin: 1em 0;
font-size: 0.9em;
}
.file-viewer-md th {
background: rgba(8, 145, 178, 0.08);
font-weight: 600;
text-align: left;
padding: 0.5em 0.75em;
border: 1px solid rgba(20, 83, 45, 0.12);
}
.file-viewer-md td {
padding: 0.5em 0.75em;
border: 1px solid rgba(20, 83, 45, 0.08);
}
.file-viewer-md tr:nth-child(even) {
background: rgba(20, 83, 45, 0.02);
}
.file-viewer-md img {
max-width: 100%;
border-radius: 0.5rem;
margin: 1em 0;
}
.file-viewer-md input[type="checkbox"] {
accent-color: #0891b2;
margin-right: 0.5em;
}
/* Skills — Markdown Prose */
.skill-md {
color: #14532d;
font-size: 0.95rem;
line-height: 1.75;
}
.skill-md h1 {
font-size: 2em;
font-weight: 700;
margin: 1.5em 0 0.5em;
padding-bottom: 0.3em;
border-bottom: 2px solid rgba(20, 83, 45, 0.12);
letter-spacing: -0.02em;
}
.skill-md h2 {
font-size: 1.5em;
font-weight: 600;
margin: 1.4em 0 0.4em;
padding-bottom: 0.25em;
border-bottom: 1px solid rgba(20, 83, 45, 0.08);
}
.skill-md h3 {
font-size: 1.25em;
font-weight: 600;
margin: 1.2em 0 0.4em;
}
.skill-md h4, .skill-md h5, .skill-md h6 {
font-size: 1.05em;
font-weight: 600;
margin: 1em 0 0.3em;
}
.skill-md p {
margin: 0.75em 0;
}
.skill-md a {
color: #0891b2;
text-decoration: underline;
text-underline-offset: 2px;
}
.skill-md a:hover {
color: #0e7490;
}
.skill-md strong {
font-weight: 600;
color: #14532d;
}
.skill-md blockquote {
margin: 1em 0;
padding: 0.5em 1em;
border-left: 3px solid #0891b2;
background: rgba(8, 145, 178, 0.05);
border-radius: 0 0.5rem 0.5rem 0;
color: #166534;
}
.skill-md ul, .skill-md ol {
margin: 0.75em 0;
padding-left: 1.75em;
}
.skill-md li {
margin: 0.25em 0;
}
.skill-md li::marker {
color: #0891b2;
}
.skill-md code {
padding: 0.15em 0.4em;
border-radius: 0.25rem;
background: rgba(8, 145, 178, 0.1);
color: #0891b2;
font-size: 0.85em;
font-family: ui-monospace, monospace;
}
.skill-md pre {
margin: 1em 0;
padding: 1em;
border-radius: 0.5rem;
background: #0d1117;
overflow-x: auto;
font-size: 0.875rem;
line-height: 1.6;
}
.skill-md pre code {
padding: 0;
border-radius: 0;
background: none;
color: #e6edf3;
font-size: inherit;
}
.skill-md hr {
border: none;
height: 1px;
background: rgba(20, 83, 45, 0.12);
margin: 2em 0;
}
.skill-md table {
width: 100%;
border-collapse: collapse;
margin: 1em 0;
font-size: 0.9em;
}
.skill-md th {
background: rgba(8, 145, 178, 0.08);
font-weight: 600;
text-align: left;
padding: 0.5em 0.75em;
border: 1px solid rgba(20, 83, 45, 0.12);
}
.skill-md td {
padding: 0.5em 0.75em;
border: 1px solid rgba(20, 83, 45, 0.08);
}
.skill-md tr:nth-child(even) {
background: rgba(20, 83, 45, 0.02);
}
.skill-md img {
max-width: 100%;
border-radius: 0.5rem;
margin: 1em 0;
}
.skill-md input[type="checkbox"] {
accent-color: #0891b2;
margin-right: 0.5em;
}
@@ -1,164 +0,0 @@
@layer base {
:root {
/* Duck brand hex colors */
--duck-yellow: #F4C430;
--duck-orange: #EA580C;
--duck-teal: #0891B2;
--duck-forest: #166534;
--duck-dark: #14532D;
--duck-beige: #E7D4B5;
/* Page background (--page-bg-image set via client.ts to avoid bundler url() resolution) */
--pixel-grid-color: rgba(20, 83, 45, 0.1);
/* Glass surfaces */
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
--dock-bg: rgba(0, 0, 0, 0.15);
--dock-border: rgba(255, 255, 255, 0.1);
--dock-tooltip-bg: rgba(0, 0, 0, 0.75);
/* Card component */
--card-bg: rgba(255, 255, 255, 0.9);
--card-grid-color: rgba(20, 83, 45, 0.08);
--cta: 211 74.77% 45.58%;
--cta-foreground: 0 0% 100%;
--naturegreen: 145 79% 38%;
--naturegreen-foreground: 0 0% 100%;
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 211 74.77% 45.58%;
--accent-foreground: 0 0% 0%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--success: 142.1 76.2% 36.3%;
--success-foreground: 355.7 100% 97.3%;
--brand: 145 79% 38%;
--brand-foreground: 0 0% 100%;
--brand-muted: 145 40% 90%;
--warning: 43 96% 56%;
--warning-foreground: 0 0% 0%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
/* Chart gradients */
--chart-primary: 211 82% 64%;
--chart-secondary: 211 82% 84%;
/* Status colors */
--status-success: 142 76% 36%;
--status-warning: 43 96% 56%;
--status-in-progress: 211 82% 64%;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
/* Hover Effect */
--ctahover: 211 91.53% 34.82%;
}
.dark {
/* Page background */
--pixel-grid-color: rgba(200, 230, 210, 0.08);
/* Glass surfaces */
--glass-bg: rgba(0, 0, 0, 0.2);
--glass-border: rgba(255, 255, 255, 0.1);
--dock-bg: rgba(0, 0, 0, 0.3);
--dock-border: rgba(255, 255, 255, 0.08);
--dock-tooltip-bg: rgba(0, 0, 0, 0.85);
/* Card component */
--card-bg: rgba(10, 20, 15, 0.9);
--card-grid-color: rgba(200, 230, 210, 0.06);
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 211 82% 64%;
--accent-foreground: 0 0% 0%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--success: 142.1 76.2% 36.3%;
--success-foreground: 355.7 100% 97.3%;
--brand: 145 60% 45%;
--brand-foreground: 0 0% 100%;
--brand-muted: 145 30% 25%;
--warning: 43 96% 56%;
--warning-foreground: 0 0% 0%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
/* Chart gradients */
--chart-primary: 211 82% 64%;
--chart-secondary: 211 82% 84%;
/* Status colors */
--status-success: 142 76% 36%;
--status-warning: 43 96% 56%;
--status-in-progress: 211 82% 64%;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
}
@@ -1,2 +0,0 @@
import './variables.css';
import './prose.css';
@@ -1 +0,0 @@
export const meta = { id: 'Everforest', name: 'Everforest', description: 'Soft earthy greens from a quiet forest floor.' };
-124
View File
@@ -1,124 +0,0 @@
/* File Viewer — Markdown Prose */
[data-color-theme="Everforest"] .file-viewer-md {
color: #d3c6aa;
}
[data-color-theme="Everforest"] .file-viewer-md h1 {
border-bottom-color: rgba(61, 72, 77, 0.4);
}
[data-color-theme="Everforest"] .file-viewer-md h2 {
border-bottom-color: rgba(61, 72, 77, 0.3);
}
[data-color-theme="Everforest"] .file-viewer-md a {
color: #a7c080;
}
[data-color-theme="Everforest"] .file-viewer-md a:hover {
color: #83c092;
}
[data-color-theme="Everforest"] .file-viewer-md strong {
color: #d3c6aa;
}
[data-color-theme="Everforest"] .file-viewer-md blockquote {
border-left-color: #a7c080;
background: rgba(167, 192, 128, 0.06);
color: #859289;
}
[data-color-theme="Everforest"] .file-viewer-md li::marker {
color: #a7c080;
}
[data-color-theme="Everforest"] .file-viewer-md hr {
background: rgba(61, 72, 77, 0.4);
}
[data-color-theme="Everforest"] .file-viewer-md th {
background: rgba(167, 192, 128, 0.08);
border-color: rgba(61, 72, 77, 0.4);
}
[data-color-theme="Everforest"] .file-viewer-md td {
border-color: rgba(61, 72, 77, 0.3);
}
[data-color-theme="Everforest"] .file-viewer-md tr:nth-child(even) {
background: rgba(61, 72, 77, 0.1);
}
[data-color-theme="Everforest"] .file-viewer-md input[type="checkbox"] {
accent-color: #a7c080;
}
/* Skills — Markdown Prose */
[data-color-theme="Everforest"] .skill-md {
color: #d3c6aa;
}
[data-color-theme="Everforest"] .skill-md h1 {
border-bottom-color: rgba(61, 72, 77, 0.4);
}
[data-color-theme="Everforest"] .skill-md h2 {
border-bottom-color: rgba(61, 72, 77, 0.3);
}
[data-color-theme="Everforest"] .skill-md a {
color: #a7c080;
}
[data-color-theme="Everforest"] .skill-md a:hover {
color: #83c092;
}
[data-color-theme="Everforest"] .skill-md strong {
color: #d3c6aa;
}
[data-color-theme="Everforest"] .skill-md blockquote {
border-left-color: #a7c080;
background: rgba(167, 192, 128, 0.06);
color: #859289;
}
[data-color-theme="Everforest"] .skill-md li::marker {
color: #a7c080;
}
[data-color-theme="Everforest"] .skill-md code {
background: rgba(167, 192, 128, 0.1);
color: #a7c080;
}
[data-color-theme="Everforest"] .skill-md pre {
background: #272e33;
}
[data-color-theme="Everforest"] .skill-md pre code {
color: #d3c6aa;
}
[data-color-theme="Everforest"] .skill-md hr {
background: rgba(61, 72, 77, 0.4);
}
[data-color-theme="Everforest"] .skill-md th {
background: rgba(167, 192, 128, 0.08);
border-color: rgba(61, 72, 77, 0.4);
}
[data-color-theme="Everforest"] .skill-md td {
border-color: rgba(61, 72, 77, 0.3);
}
[data-color-theme="Everforest"] .skill-md tr:nth-child(even) {
background: rgba(61, 72, 77, 0.1);
}
[data-color-theme="Everforest"] .skill-md input[type="checkbox"] {
accent-color: #a7c080;
}
@@ -1,92 +0,0 @@
@layer base {
[data-color-theme="Everforest"] {
/* Brand colors */
--duck-yellow: #dbbc7f;
--duck-orange: #e69875;
--duck-teal: #a7c080;
--duck-forest: #859289;
--duck-dark: #d3c6aa;
--duck-beige: #374247;
/* Page background */
--pixel-grid-color: rgba(167, 192, 128, 0.06);
/* Glass surfaces */
--glass-bg: rgba(0, 0, 0, 0.25);
--glass-border: rgba(167, 192, 128, 0.12);
--dock-bg: rgba(0, 0, 0, 0.35);
--dock-border: rgba(167, 192, 128, 0.08);
--dock-tooltip-bg: rgba(0, 0, 0, 0.9);
/* Card component */
--card-bg: rgba(39, 46, 51, 0.92);
--card-grid-color: rgba(167, 192, 128, 0.04);
--cta: 83.4 33.7% 62.7%;
--cta-foreground: 205.7 13.5% 20.4%;
--naturegreen: 134.8 32.6% 63.3%;
--naturegreen-foreground: 205.7 13.5% 20.4%;
--background: 205.7 13.5% 20.4%;
--foreground: 41 31.8% 74.7%;
--card: 205 13.3% 17.6%;
--card-foreground: 41 31.8% 74.7%;
--popover: 205 13.3% 17.6%;
--popover-foreground: 41 31.8% 74.7%;
--primary: 83.4 33.7% 62.7%;
--primary-foreground: 205.7 13.5% 20.4%;
--secondary: 198.8 11.6% 27.1%;
--secondary-foreground: 41 31.8% 74.7%;
--muted: 198.8 12.7% 24.7%;
--muted-foreground: 138.5 5.6% 54.7%;
--accent: 134.8 32.6% 63.3%;
--accent-foreground: 205.7 13.5% 20.4%;
--destructive: 358.8 67.5% 69.8%;
--destructive-foreground: 41 31.8% 74.7%;
--success: 134.8 32.6% 63.3%;
--success-foreground: 205.7 13.5% 20.4%;
--brand: 83.4 33.7% 62.7%;
--brand-foreground: 205.7 13.5% 20.4%;
--brand-muted: 198.8 12.7% 24.7%;
--warning: 39.8 56.1% 67.8%;
--warning-foreground: 205.7 13.5% 20.4%;
--border: 198.8 11.6% 27.1%;
--input: 198.8 11.6% 27.1%;
--ring: 83.4 33.7% 62.7%;
--radius: 0.5rem;
/* Chart gradients */
--chart-primary: 83.4 33.7% 62.7%;
--chart-secondary: 39.8 56.1% 67.8%;
/* Status colors */
--status-success: 134.8 32.6% 63.3%;
--status-warning: 39.8 56.1% 67.8%;
--status-in-progress: 83.4 33.7% 62.7%;
--sidebar-background: 205 13.3% 17.6%;
--sidebar-foreground: 138.5 5.6% 54.7%;
--sidebar-primary: 83.4 33.7% 62.7%;
--sidebar-primary-foreground: 205.7 13.5% 20.4%;
--sidebar-accent: 198.8 12.7% 24.7%;
--sidebar-accent-foreground: 41 31.8% 74.7%;
--sidebar-border: 198.8 11.6% 27.1%;
--sidebar-ring: 83.4 33.7% 62.7%;
/* Hover Effect */
--ctahover: 134.8 32.6% 63.3%;
}
}
-2
View File
@@ -1,2 +0,0 @@
import './variables.css';
import './prose.css';
-1
View File
@@ -1 +0,0 @@
export const meta = { id: 'Gruvbox', name: 'Gruvbox', description: 'Retro warm tones with earthy browns and muted accents.' };
-124
View File
@@ -1,124 +0,0 @@
/* File Viewer — Markdown Prose */
[data-color-theme="Gruvbox"] .file-viewer-md {
color: #ebdbb2;
}
[data-color-theme="Gruvbox"] .file-viewer-md h1 {
border-bottom-color: rgba(80, 73, 69, 0.4);
}
[data-color-theme="Gruvbox"] .file-viewer-md h2 {
border-bottom-color: rgba(80, 73, 69, 0.3);
}
[data-color-theme="Gruvbox"] .file-viewer-md a {
color: #83a598;
}
[data-color-theme="Gruvbox"] .file-viewer-md a:hover {
color: #8ec07c;
}
[data-color-theme="Gruvbox"] .file-viewer-md strong {
color: #ebdbb2;
}
[data-color-theme="Gruvbox"] .file-viewer-md blockquote {
border-left-color: #83a598;
background: rgba(131, 165, 152, 0.06);
color: #a89984;
}
[data-color-theme="Gruvbox"] .file-viewer-md li::marker {
color: #83a598;
}
[data-color-theme="Gruvbox"] .file-viewer-md hr {
background: rgba(80, 73, 69, 0.4);
}
[data-color-theme="Gruvbox"] .file-viewer-md th {
background: rgba(131, 165, 152, 0.08);
border-color: rgba(80, 73, 69, 0.4);
}
[data-color-theme="Gruvbox"] .file-viewer-md td {
border-color: rgba(80, 73, 69, 0.3);
}
[data-color-theme="Gruvbox"] .file-viewer-md tr:nth-child(even) {
background: rgba(80, 73, 69, 0.1);
}
[data-color-theme="Gruvbox"] .file-viewer-md input[type="checkbox"] {
accent-color: #83a598;
}
/* Skills — Markdown Prose */
[data-color-theme="Gruvbox"] .skill-md {
color: #ebdbb2;
}
[data-color-theme="Gruvbox"] .skill-md h1 {
border-bottom-color: rgba(80, 73, 69, 0.4);
}
[data-color-theme="Gruvbox"] .skill-md h2 {
border-bottom-color: rgba(80, 73, 69, 0.3);
}
[data-color-theme="Gruvbox"] .skill-md a {
color: #83a598;
}
[data-color-theme="Gruvbox"] .skill-md a:hover {
color: #8ec07c;
}
[data-color-theme="Gruvbox"] .skill-md strong {
color: #ebdbb2;
}
[data-color-theme="Gruvbox"] .skill-md blockquote {
border-left-color: #83a598;
background: rgba(131, 165, 152, 0.06);
color: #a89984;
}
[data-color-theme="Gruvbox"] .skill-md li::marker {
color: #83a598;
}
[data-color-theme="Gruvbox"] .skill-md code {
background: rgba(131, 165, 152, 0.1);
color: #83a598;
}
[data-color-theme="Gruvbox"] .skill-md pre {
background: #1d2021;
}
[data-color-theme="Gruvbox"] .skill-md pre code {
color: #ebdbb2;
}
[data-color-theme="Gruvbox"] .skill-md hr {
background: rgba(80, 73, 69, 0.4);
}
[data-color-theme="Gruvbox"] .skill-md th {
background: rgba(131, 165, 152, 0.08);
border-color: rgba(80, 73, 69, 0.4);
}
[data-color-theme="Gruvbox"] .skill-md td {
border-color: rgba(80, 73, 69, 0.3);
}
[data-color-theme="Gruvbox"] .skill-md tr:nth-child(even) {
background: rgba(80, 73, 69, 0.1);
}
[data-color-theme="Gruvbox"] .skill-md input[type="checkbox"] {
accent-color: #83a598;
}
@@ -1,92 +0,0 @@
@layer base {
[data-color-theme="Gruvbox"] {
/* Brand colors */
--duck-yellow: #fabd2f;
--duck-orange: #fe8019;
--duck-teal: #83a598;
--duck-forest: #a89984;
--duck-dark: #ebdbb2;
--duck-beige: #3c3836;
/* Page background */
--pixel-grid-color: rgba(131, 165, 152, 0.06);
/* Glass surfaces */
--glass-bg: rgba(0, 0, 0, 0.25);
--glass-border: rgba(131, 165, 152, 0.12);
--dock-bg: rgba(0, 0, 0, 0.35);
--dock-border: rgba(131, 165, 152, 0.08);
--dock-tooltip-bg: rgba(0, 0, 0, 0.9);
/* Card component */
--card-bg: rgba(29, 32, 33, 0.92);
--card-grid-color: rgba(131, 165, 152, 0.04);
--cta: 157.1 15.9% 58%;
--cta-foreground: 0 0% 15.7%;
--naturegreen: 104.1 35.1% 62%;
--naturegreen-foreground: 0 0% 15.7%;
--background: 0 0% 15.7%;
--foreground: 43.2 58.8% 81%;
--card: 195 6.5% 12.2%;
--card-foreground: 43.2 58.8% 81%;
--popover: 195 6.5% 12.2%;
--popover-foreground: 43.2 58.8% 81%;
--primary: 157.1 15.9% 58%;
--primary-foreground: 0 0% 15.7%;
--secondary: 21.8 7.4% 29.2%;
--secondary-foreground: 43.2 58.8% 81%;
--muted: 20 5.3% 22.4%;
--muted-foreground: 35 17.1% 58.8%;
--accent: 104.1 35.1% 62%;
--accent-foreground: 0 0% 15.7%;
--destructive: 6.3 96.1% 59.4%;
--destructive-foreground: 43.2 58.8% 81%;
--success: 61.2 66.2% 44.1%;
--success-foreground: 0 0% 15.7%;
--brand: 157.1 15.9% 58%;
--brand-foreground: 0 0% 15.7%;
--brand-muted: 20 5.3% 22.4%;
--warning: 42 95.3% 58.2%;
--warning-foreground: 0 0% 15.7%;
--border: 21.8 7.4% 29.2%;
--input: 21.8 7.4% 29.2%;
--ring: 157.1 15.9% 58%;
--radius: 0.5rem;
/* Chart gradients */
--chart-primary: 157.1 15.9% 58%;
--chart-secondary: 42 95.3% 58.2%;
/* Status colors */
--status-success: 61.2 66.2% 44.1%;
--status-warning: 42 95.3% 58.2%;
--status-in-progress: 157.1 15.9% 58%;
--sidebar-background: 195 6.5% 12.2%;
--sidebar-foreground: 35 17.1% 58.8%;
--sidebar-primary: 157.1 15.9% 58%;
--sidebar-primary-foreground: 0 0% 15.7%;
--sidebar-accent: 20 5.3% 22.4%;
--sidebar-accent-foreground: 43.2 58.8% 81%;
--sidebar-border: 21.8 7.4% 29.2%;
--sidebar-ring: 157.1 15.9% 58%;
/* Hover Effect */
--ctahover: 104.1 35.1% 62%;
}
}
-2
View File
@@ -1,2 +0,0 @@
import './variables.css';
import './prose.css';
-1
View File
@@ -1 +0,0 @@
export const meta = { id: 'Kanagawa', name: 'Kanagawa', description: 'Deep indigo waves and ink-wash inspired hues.' };
-124
View File
@@ -1,124 +0,0 @@
/* File Viewer — Markdown Prose */
[data-color-theme="Kanagawa"] .file-viewer-md {
color: #dcd7ba;
}
[data-color-theme="Kanagawa"] .file-viewer-md h1 {
border-bottom-color: rgba(42, 42, 55, 0.4);
}
[data-color-theme="Kanagawa"] .file-viewer-md h2 {
border-bottom-color: rgba(42, 42, 55, 0.3);
}
[data-color-theme="Kanagawa"] .file-viewer-md a {
color: #7e9cd8;
}
[data-color-theme="Kanagawa"] .file-viewer-md a:hover {
color: #7fb4ca;
}
[data-color-theme="Kanagawa"] .file-viewer-md strong {
color: #dcd7ba;
}
[data-color-theme="Kanagawa"] .file-viewer-md blockquote {
border-left-color: #7e9cd8;
background: rgba(126, 156, 216, 0.06);
color: #727169;
}
[data-color-theme="Kanagawa"] .file-viewer-md li::marker {
color: #7e9cd8;
}
[data-color-theme="Kanagawa"] .file-viewer-md hr {
background: rgba(42, 42, 55, 0.4);
}
[data-color-theme="Kanagawa"] .file-viewer-md th {
background: rgba(126, 156, 216, 0.08);
border-color: rgba(42, 42, 55, 0.4);
}
[data-color-theme="Kanagawa"] .file-viewer-md td {
border-color: rgba(42, 42, 55, 0.3);
}
[data-color-theme="Kanagawa"] .file-viewer-md tr:nth-child(even) {
background: rgba(42, 42, 55, 0.1);
}
[data-color-theme="Kanagawa"] .file-viewer-md input[type="checkbox"] {
accent-color: #7e9cd8;
}
/* Skills — Markdown Prose */
[data-color-theme="Kanagawa"] .skill-md {
color: #dcd7ba;
}
[data-color-theme="Kanagawa"] .skill-md h1 {
border-bottom-color: rgba(42, 42, 55, 0.4);
}
[data-color-theme="Kanagawa"] .skill-md h2 {
border-bottom-color: rgba(42, 42, 55, 0.3);
}
[data-color-theme="Kanagawa"] .skill-md a {
color: #7e9cd8;
}
[data-color-theme="Kanagawa"] .skill-md a:hover {
color: #7fb4ca;
}
[data-color-theme="Kanagawa"] .skill-md strong {
color: #dcd7ba;
}
[data-color-theme="Kanagawa"] .skill-md blockquote {
border-left-color: #7e9cd8;
background: rgba(126, 156, 216, 0.06);
color: #727169;
}
[data-color-theme="Kanagawa"] .skill-md li::marker {
color: #7e9cd8;
}
[data-color-theme="Kanagawa"] .skill-md code {
background: rgba(126, 156, 216, 0.1);
color: #7e9cd8;
}
[data-color-theme="Kanagawa"] .skill-md pre {
background: #16161d;
}
[data-color-theme="Kanagawa"] .skill-md pre code {
color: #dcd7ba;
}
[data-color-theme="Kanagawa"] .skill-md hr {
background: rgba(42, 42, 55, 0.4);
}
[data-color-theme="Kanagawa"] .skill-md th {
background: rgba(126, 156, 216, 0.08);
border-color: rgba(42, 42, 55, 0.4);
}
[data-color-theme="Kanagawa"] .skill-md td {
border-color: rgba(42, 42, 55, 0.3);
}
[data-color-theme="Kanagawa"] .skill-md tr:nth-child(even) {
background: rgba(42, 42, 55, 0.1);
}
[data-color-theme="Kanagawa"] .skill-md input[type="checkbox"] {
accent-color: #7e9cd8;
}
@@ -1,92 +0,0 @@
@layer base {
[data-color-theme="Kanagawa"] {
/* Brand colors */
--duck-yellow: #ffa066;
--duck-orange: #ff5d62;
--duck-teal: #7e9cd8;
--duck-forest: #727169;
--duck-dark: #dcd7ba;
--duck-beige: #223249;
/* Page background */
--pixel-grid-color: rgba(126, 156, 216, 0.06);
/* Glass surfaces */
--glass-bg: rgba(0, 0, 0, 0.25);
--glass-border: rgba(126, 156, 216, 0.12);
--dock-bg: rgba(0, 0, 0, 0.35);
--dock-border: rgba(126, 156, 216, 0.08);
--dock-tooltip-bg: rgba(0, 0, 0, 0.9);
/* Card component */
--card-bg: rgba(22, 22, 29, 0.92);
--card-grid-color: rgba(126, 156, 216, 0.04);
--cta: 220 53.6% 67.1%;
--cta-foreground: 240 12.7% 13.9%;
--naturegreen: 197.6 41.4% 64.5%;
--naturegreen-foreground: 240 12.7% 13.9%;
--background: 240 12.7% 13.9%;
--foreground: 51.2 32.7% 79.6%;
--card: 240 13.7% 10%;
--card-foreground: 51.2 32.7% 79.6%;
--popover: 240 13.7% 10%;
--popover-foreground: 51.2 32.7% 79.6%;
--primary: 220 53.6% 67.1%;
--primary-foreground: 240 12.7% 13.9%;
--secondary: 240 13.4% 19%;
--secondary-foreground: 51.2 32.7% 79.6%;
--muted: 215.4 36.4% 21%;
--muted-foreground: 53.3 4.1% 42.9%;
--accent: 197.6 41.4% 64.5%;
--accent-foreground: 240 12.7% 13.9%;
--destructive: 0 81% 52.5%;
--destructive-foreground: 51.2 32.7% 79.6%;
--success: 86.6 36.7% 57.8%;
--success-foreground: 240 12.7% 13.9%;
--brand: 220 53.6% 67.1%;
--brand-foreground: 240 12.7% 13.9%;
--brand-muted: 215.4 36.4% 21%;
--warning: 22.7 100% 70%;
--warning-foreground: 240 12.7% 13.9%;
--border: 240 13.4% 19%;
--input: 240 13.4% 19%;
--ring: 220 53.6% 67.1%;
--radius: 0.5rem;
/* Chart gradients */
--chart-primary: 220 53.6% 67.1%;
--chart-secondary: 22.7 100% 70%;
/* Status colors */
--status-success: 86.6 36.7% 57.8%;
--status-warning: 22.7 100% 70%;
--status-in-progress: 220 53.6% 67.1%;
--sidebar-background: 240 13.7% 10%;
--sidebar-foreground: 53.3 4.1% 42.9%;
--sidebar-primary: 220 53.6% 67.1%;
--sidebar-primary-foreground: 240 12.7% 13.9%;
--sidebar-accent: 215.4 36.4% 21%;
--sidebar-accent-foreground: 51.2 32.7% 79.6%;
--sidebar-border: 240 13.4% 19%;
--sidebar-ring: 220 53.6% 67.1%;
/* Hover Effect */
--ctahover: 197.6 41.4% 64.5%;
}
}
@@ -1,2 +0,0 @@
import './variables.css';
import './prose.css';
@@ -1 +0,0 @@
export const meta = { id: 'MatteBlack', name: 'Matte Black', description: 'Pure minimal monochrome with a matte finish.' };
-124
View File
@@ -1,124 +0,0 @@
/* File Viewer — Markdown Prose */
[data-color-theme="MatteBlack"] .file-viewer-md {
color: #e0e0e0;
}
[data-color-theme="MatteBlack"] .file-viewer-md h1 {
border-bottom-color: rgba(42, 42, 42, 0.4);
}
[data-color-theme="MatteBlack"] .file-viewer-md h2 {
border-bottom-color: rgba(42, 42, 42, 0.3);
}
[data-color-theme="MatteBlack"] .file-viewer-md a {
color: #ffffff;
}
[data-color-theme="MatteBlack"] .file-viewer-md a:hover {
color: #d0d0d0;
}
[data-color-theme="MatteBlack"] .file-viewer-md strong {
color: #e0e0e0;
}
[data-color-theme="MatteBlack"] .file-viewer-md blockquote {
border-left-color: #ffffff;
background: rgba(255, 255, 255, 0.06);
color: #9a9a9a;
}
[data-color-theme="MatteBlack"] .file-viewer-md li::marker {
color: #ffffff;
}
[data-color-theme="MatteBlack"] .file-viewer-md hr {
background: rgba(42, 42, 42, 0.4);
}
[data-color-theme="MatteBlack"] .file-viewer-md th {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(42, 42, 42, 0.4);
}
[data-color-theme="MatteBlack"] .file-viewer-md td {
border-color: rgba(42, 42, 42, 0.3);
}
[data-color-theme="MatteBlack"] .file-viewer-md tr:nth-child(even) {
background: rgba(42, 42, 42, 0.1);
}
[data-color-theme="MatteBlack"] .file-viewer-md input[type="checkbox"] {
accent-color: #ffffff;
}
/* Skills — Markdown Prose */
[data-color-theme="MatteBlack"] .skill-md {
color: #e0e0e0;
}
[data-color-theme="MatteBlack"] .skill-md h1 {
border-bottom-color: rgba(42, 42, 42, 0.4);
}
[data-color-theme="MatteBlack"] .skill-md h2 {
border-bottom-color: rgba(42, 42, 42, 0.3);
}
[data-color-theme="MatteBlack"] .skill-md a {
color: #ffffff;
}
[data-color-theme="MatteBlack"] .skill-md a:hover {
color: #d0d0d0;
}
[data-color-theme="MatteBlack"] .skill-md strong {
color: #e0e0e0;
}
[data-color-theme="MatteBlack"] .skill-md blockquote {
border-left-color: #ffffff;
background: rgba(255, 255, 255, 0.06);
color: #9a9a9a;
}
[data-color-theme="MatteBlack"] .skill-md li::marker {
color: #ffffff;
}
[data-color-theme="MatteBlack"] .skill-md code {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
}
[data-color-theme="MatteBlack"] .skill-md pre {
background: #121212;
}
[data-color-theme="MatteBlack"] .skill-md pre code {
color: #e0e0e0;
}
[data-color-theme="MatteBlack"] .skill-md hr {
background: rgba(42, 42, 42, 0.4);
}
[data-color-theme="MatteBlack"] .skill-md th {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(42, 42, 42, 0.4);
}
[data-color-theme="MatteBlack"] .skill-md td {
border-color: rgba(42, 42, 42, 0.3);
}
[data-color-theme="MatteBlack"] .skill-md tr:nth-child(even) {
background: rgba(42, 42, 42, 0.1);
}
[data-color-theme="MatteBlack"] .skill-md input[type="checkbox"] {
accent-color: #ffffff;
}
@@ -1,92 +0,0 @@
@layer base {
[data-color-theme="MatteBlack"] {
/* Brand colors */
--duck-yellow: #e0e0e0;
--duck-orange: #cccccc;
--duck-teal: #ffffff;
--duck-forest: #9a9a9a;
--duck-dark: #e0e0e0;
--duck-beige: #1a1a1a;
/* Page background */
--pixel-grid-color: rgba(255, 255, 255, 0.06);
/* Glass surfaces */
--glass-bg: rgba(0, 0, 0, 0.25);
--glass-border: rgba(255, 255, 255, 0.12);
--dock-bg: rgba(0, 0, 0, 0.35);
--dock-border: rgba(255, 255, 255, 0.08);
--dock-tooltip-bg: rgba(0, 0, 0, 0.9);
/* Card component */
--card-bg: rgba(18, 18, 18, 0.92);
--card-grid-color: rgba(255, 255, 255, 0.04);
--cta: 0 0% 100%;
--cta-foreground: 0 0% 3.9%;
--naturegreen: 0 0% 81.6%;
--naturegreen-foreground: 0 0% 3.9%;
--background: 0 0% 3.9%;
--foreground: 0 0% 87.8%;
--card: 0 0% 7.1%;
--card-foreground: 0 0% 87.8%;
--popover: 0 0% 7.1%;
--popover-foreground: 0 0% 87.8%;
--primary: 0 0% 100%;
--primary-foreground: 0 0% 3.9%;
--secondary: 0 0% 16.5%;
--secondary-foreground: 0 0% 87.8%;
--muted: 0 0% 10.2%;
--muted-foreground: 0 0% 60.4%;
--accent: 0 0% 81.6%;
--accent-foreground: 0 0% 3.9%;
--destructive: 0 100% 63.3%;
--destructive-foreground: 0 0% 87.8%;
--success: 0 0% 60%;
--success-foreground: 0 0% 3.9%;
--brand: 0 0% 100%;
--brand-foreground: 0 0% 3.9%;
--brand-muted: 0 0% 10.2%;
--warning: 0 0% 80%;
--warning-foreground: 0 0% 3.9%;
--border: 0 0% 16.5%;
--input: 0 0% 16.5%;
--ring: 0 0% 100%;
--radius: 0.5rem;
/* Chart gradients */
--chart-primary: 0 0% 100%;
--chart-secondary: 0 0% 80%;
/* Status colors */
--status-success: 0 0% 60%;
--status-warning: 0 0% 80%;
--status-in-progress: 0 0% 100%;
--sidebar-background: 0 0% 7.1%;
--sidebar-foreground: 0 0% 60.4%;
--sidebar-primary: 0 0% 100%;
--sidebar-primary-foreground: 0 0% 3.9%;
--sidebar-accent: 0 0% 10.2%;
--sidebar-accent-foreground: 0 0% 87.8%;
--sidebar-border: 0 0% 16.5%;
--sidebar-ring: 0 0% 100%;
/* Hover Effect */
--ctahover: 0 0% 81.6%;
}
}
-2
View File
@@ -1,2 +0,0 @@
import './variables.css';
import './prose.css';
-1
View File
@@ -1 +0,0 @@
export const meta = { id: 'Nord', name: 'Nord', description: 'Cool arctic blues and frosty Nordic tones.' };
-124
View File
@@ -1,124 +0,0 @@
/* File Viewer — Markdown Prose */
[data-color-theme="Nord"] .file-viewer-md {
color: #eceff4;
}
[data-color-theme="Nord"] .file-viewer-md h1 {
border-bottom-color: rgba(67, 76, 94, 0.4);
}
[data-color-theme="Nord"] .file-viewer-md h2 {
border-bottom-color: rgba(67, 76, 94, 0.3);
}
[data-color-theme="Nord"] .file-viewer-md a {
color: #88c0d0;
}
[data-color-theme="Nord"] .file-viewer-md a:hover {
color: #8fbcbb;
}
[data-color-theme="Nord"] .file-viewer-md strong {
color: #eceff4;
}
[data-color-theme="Nord"] .file-viewer-md blockquote {
border-left-color: #88c0d0;
background: rgba(136, 192, 208, 0.06);
color: #d8dee9;
}
[data-color-theme="Nord"] .file-viewer-md li::marker {
color: #88c0d0;
}
[data-color-theme="Nord"] .file-viewer-md hr {
background: rgba(67, 76, 94, 0.4);
}
[data-color-theme="Nord"] .file-viewer-md th {
background: rgba(136, 192, 208, 0.08);
border-color: rgba(67, 76, 94, 0.4);
}
[data-color-theme="Nord"] .file-viewer-md td {
border-color: rgba(67, 76, 94, 0.3);
}
[data-color-theme="Nord"] .file-viewer-md tr:nth-child(even) {
background: rgba(67, 76, 94, 0.1);
}
[data-color-theme="Nord"] .file-viewer-md input[type="checkbox"] {
accent-color: #88c0d0;
}
/* Skills — Markdown Prose */
[data-color-theme="Nord"] .skill-md {
color: #eceff4;
}
[data-color-theme="Nord"] .skill-md h1 {
border-bottom-color: rgba(67, 76, 94, 0.4);
}
[data-color-theme="Nord"] .skill-md h2 {
border-bottom-color: rgba(67, 76, 94, 0.3);
}
[data-color-theme="Nord"] .skill-md a {
color: #88c0d0;
}
[data-color-theme="Nord"] .skill-md a:hover {
color: #8fbcbb;
}
[data-color-theme="Nord"] .skill-md strong {
color: #eceff4;
}
[data-color-theme="Nord"] .skill-md blockquote {
border-left-color: #88c0d0;
background: rgba(136, 192, 208, 0.06);
color: #d8dee9;
}
[data-color-theme="Nord"] .skill-md li::marker {
color: #88c0d0;
}
[data-color-theme="Nord"] .skill-md code {
background: rgba(136, 192, 208, 0.1);
color: #88c0d0;
}
[data-color-theme="Nord"] .skill-md pre {
background: #3b4252;
}
[data-color-theme="Nord"] .skill-md pre code {
color: #eceff4;
}
[data-color-theme="Nord"] .skill-md hr {
background: rgba(67, 76, 94, 0.4);
}
[data-color-theme="Nord"] .skill-md th {
background: rgba(136, 192, 208, 0.08);
border-color: rgba(67, 76, 94, 0.4);
}
[data-color-theme="Nord"] .skill-md td {
border-color: rgba(67, 76, 94, 0.3);
}
[data-color-theme="Nord"] .skill-md tr:nth-child(even) {
background: rgba(67, 76, 94, 0.1);
}
[data-color-theme="Nord"] .skill-md input[type="checkbox"] {
accent-color: #88c0d0;
}
-92
View File
@@ -1,92 +0,0 @@
@layer base {
[data-color-theme="Nord"] {
/* Brand colors */
--duck-yellow: #ebcb8b;
--duck-orange: #d08770;
--duck-teal: #88c0d0;
--duck-forest: #d8dee9;
--duck-dark: #eceff4;
--duck-beige: #3b4252;
/* Page background */
--pixel-grid-color: rgba(136, 192, 208, 0.06);
/* Glass surfaces */
--glass-bg: rgba(0, 0, 0, 0.25);
--glass-border: rgba(136, 192, 208, 0.12);
--dock-bg: rgba(0, 0, 0, 0.35);
--dock-border: rgba(136, 192, 208, 0.08);
--dock-tooltip-bg: rgba(0, 0, 0, 0.9);
/* Card component */
--card-bg: rgba(59, 66, 82, 0.92);
--card-grid-color: rgba(136, 192, 208, 0.04);
--cta: 193.3 43.4% 67.5%;
--cta-foreground: 220 16.4% 21.6%;
--naturegreen: 178.7 25.1% 64.9%;
--naturegreen-foreground: 220 16.4% 21.6%;
--background: 220 16.4% 21.6%;
--foreground: 217.5 26.7% 94.1%;
--card: 221.7 16.3% 27.6%;
--card-foreground: 217.5 26.7% 94.1%;
--popover: 221.7 16.3% 27.6%;
--popover-foreground: 217.5 26.7% 94.1%;
--primary: 193.3 43.4% 67.5%;
--primary-foreground: 220 16.4% 21.6%;
--secondary: 220 16.8% 31.6%;
--secondary-foreground: 217.5 26.7% 94.1%;
--muted: 221.7 16.3% 27.6%;
--muted-foreground: 218.8 27.9% 88%;
--accent: 178.7 25.1% 64.9%;
--accent-foreground: 220 16.4% 21.6%;
--destructive: 354.3 42.3% 56.5%;
--destructive-foreground: 217.5 26.7% 94.1%;
--success: 92.4 27.8% 64.7%;
--success-foreground: 220 16.4% 21.6%;
--brand: 193.3 43.4% 67.5%;
--brand-foreground: 220 16.4% 21.6%;
--brand-muted: 221.7 16.3% 27.6%;
--warning: 40 70.6% 73.3%;
--warning-foreground: 220 16.4% 21.6%;
--border: 220 16.8% 31.6%;
--input: 220 16.8% 31.6%;
--ring: 193.3 43.4% 67.5%;
--radius: 0.5rem;
/* Chart gradients */
--chart-primary: 193.3 43.4% 67.5%;
--chart-secondary: 40 70.6% 73.3%;
/* Status colors */
--status-success: 92.4 27.8% 64.7%;
--status-warning: 40 70.6% 73.3%;
--status-in-progress: 193.3 43.4% 67.5%;
--sidebar-background: 221.7 16.3% 27.6%;
--sidebar-foreground: 218.8 27.9% 88%;
--sidebar-primary: 193.3 43.4% 67.5%;
--sidebar-primary-foreground: 220 16.4% 21.6%;
--sidebar-accent: 220 16.8% 31.6%;
--sidebar-accent-foreground: 217.5 26.7% 94.1%;
--sidebar-border: 220 16.5% 35.7%;
--sidebar-ring: 193.3 43.4% 67.5%;
/* Hover Effect */
--ctahover: 178.7 25.1% 64.9%;
}
}
@@ -1,2 +0,0 @@
import './variables.css';
import './prose.css';
-1
View File
@@ -1 +0,0 @@
export const meta = { id: 'OsakaJade', name: 'Osaka Jade', description: 'Electric jade and neon cyan on a midnight canvas.' };
-124
View File
@@ -1,124 +0,0 @@
/* File Viewer — Markdown Prose */
[data-color-theme="OsakaJade"] .file-viewer-md {
color: #c5cdd9;
}
[data-color-theme="OsakaJade"] .file-viewer-md h1 {
border-bottom-color: rgba(41, 46, 66, 0.4);
}
[data-color-theme="OsakaJade"] .file-viewer-md h2 {
border-bottom-color: rgba(41, 46, 66, 0.3);
}
[data-color-theme="OsakaJade"] .file-viewer-md a {
color: #2ac3de;
}
[data-color-theme="OsakaJade"] .file-viewer-md a:hover {
color: #0db9d7;
}
[data-color-theme="OsakaJade"] .file-viewer-md strong {
color: #c5cdd9;
}
[data-color-theme="OsakaJade"] .file-viewer-md blockquote {
border-left-color: #2ac3de;
background: rgba(42, 195, 222, 0.06);
color: #565f89;
}
[data-color-theme="OsakaJade"] .file-viewer-md li::marker {
color: #2ac3de;
}
[data-color-theme="OsakaJade"] .file-viewer-md hr {
background: rgba(41, 46, 66, 0.4);
}
[data-color-theme="OsakaJade"] .file-viewer-md th {
background: rgba(42, 195, 222, 0.08);
border-color: rgba(41, 46, 66, 0.4);
}
[data-color-theme="OsakaJade"] .file-viewer-md td {
border-color: rgba(41, 46, 66, 0.3);
}
[data-color-theme="OsakaJade"] .file-viewer-md tr:nth-child(even) {
background: rgba(41, 46, 66, 0.1);
}
[data-color-theme="OsakaJade"] .file-viewer-md input[type="checkbox"] {
accent-color: #2ac3de;
}
/* Skills — Markdown Prose */
[data-color-theme="OsakaJade"] .skill-md {
color: #c5cdd9;
}
[data-color-theme="OsakaJade"] .skill-md h1 {
border-bottom-color: rgba(41, 46, 66, 0.4);
}
[data-color-theme="OsakaJade"] .skill-md h2 {
border-bottom-color: rgba(41, 46, 66, 0.3);
}
[data-color-theme="OsakaJade"] .skill-md a {
color: #2ac3de;
}
[data-color-theme="OsakaJade"] .skill-md a:hover {
color: #0db9d7;
}
[data-color-theme="OsakaJade"] .skill-md strong {
color: #c5cdd9;
}
[data-color-theme="OsakaJade"] .skill-md blockquote {
border-left-color: #2ac3de;
background: rgba(42, 195, 222, 0.06);
color: #565f89;
}
[data-color-theme="OsakaJade"] .skill-md li::marker {
color: #2ac3de;
}
[data-color-theme="OsakaJade"] .skill-md code {
background: rgba(42, 195, 222, 0.1);
color: #2ac3de;
}
[data-color-theme="OsakaJade"] .skill-md pre {
background: #16161e;
}
[data-color-theme="OsakaJade"] .skill-md pre code {
color: #c5cdd9;
}
[data-color-theme="OsakaJade"] .skill-md hr {
background: rgba(41, 46, 66, 0.4);
}
[data-color-theme="OsakaJade"] .skill-md th {
background: rgba(42, 195, 222, 0.08);
border-color: rgba(41, 46, 66, 0.4);
}
[data-color-theme="OsakaJade"] .skill-md td {
border-color: rgba(41, 46, 66, 0.3);
}
[data-color-theme="OsakaJade"] .skill-md tr:nth-child(even) {
background: rgba(41, 46, 66, 0.1);
}
[data-color-theme="OsakaJade"] .skill-md input[type="checkbox"] {
accent-color: #2ac3de;
}
@@ -1,92 +0,0 @@
@layer base {
[data-color-theme="OsakaJade"] {
/* Brand colors */
--duck-yellow: #e0af68;
--duck-orange: #f7768e;
--duck-teal: #2ac3de;
--duck-forest: #565f89;
--duck-dark: #c5cdd9;
--duck-beige: #1f2335;
/* Page background */
--pixel-grid-color: rgba(42, 195, 222, 0.06);
/* Glass surfaces */
--glass-bg: rgba(0, 0, 0, 0.25);
--glass-border: rgba(42, 195, 222, 0.12);
--dock-bg: rgba(0, 0, 0, 0.35);
--dock-border: rgba(42, 195, 222, 0.08);
--dock-tooltip-bg: rgba(0, 0, 0, 0.9);
/* Card component */
--card-bg: rgba(22, 22, 30, 0.92);
--card-grid-color: rgba(42, 195, 222, 0.04);
--cta: 189 73.2% 51.8%;
--cta-foreground: 235 18.8% 12.5%;
--naturegreen: 188.9 88.6% 44.7%;
--naturegreen-foreground: 235 18.8% 12.5%;
--background: 235 18.8% 12.5%;
--foreground: 216 20.8% 81.2%;
--card: 240 15.4% 10.2%;
--card-foreground: 216 20.8% 81.2%;
--popover: 240 15.4% 10.2%;
--popover-foreground: 216 20.8% 81.2%;
--primary: 189 73.2% 51.8%;
--primary-foreground: 235 18.8% 12.5%;
--secondary: 228 23.4% 21%;
--secondary-foreground: 216 20.8% 81.2%;
--muted: 229.1 26.2% 16.5%;
--muted-foreground: 229.4 22.9% 43.7%;
--accent: 188.9 88.6% 44.7%;
--accent-foreground: 235 18.8% 12.5%;
--destructive: 348.8 89% 71.6%;
--destructive-foreground: 216 20.8% 81.2%;
--success: 88.8 50.5% 61.2%;
--success-foreground: 235 18.8% 12.5%;
--brand: 189 73.2% 51.8%;
--brand-foreground: 235 18.8% 12.5%;
--brand-muted: 229.1 26.2% 16.5%;
--warning: 35.5 65.9% 64.3%;
--warning-foreground: 235 18.8% 12.5%;
--border: 228 23.4% 21%;
--input: 228 23.4% 21%;
--ring: 189 73.2% 51.8%;
--radius: 0.5rem;
/* Chart gradients */
--chart-primary: 189 73.2% 51.8%;
--chart-secondary: 35.5 65.9% 64.3%;
/* Status colors */
--status-success: 88.8 50.5% 61.2%;
--status-warning: 35.5 65.9% 64.3%;
--status-in-progress: 189 73.2% 51.8%;
--sidebar-background: 240 15.4% 10.2%;
--sidebar-foreground: 229.4 22.9% 43.7%;
--sidebar-primary: 189 73.2% 51.8%;
--sidebar-primary-foreground: 235 18.8% 12.5%;
--sidebar-accent: 229.1 26.2% 16.5%;
--sidebar-accent-foreground: 216 20.8% 81.2%;
--sidebar-border: 228 23.4% 21%;
--sidebar-ring: 189 73.2% 51.8%;
/* Hover Effect */
--ctahover: 188.9 88.6% 44.7%;
}
}
@@ -1,2 +0,0 @@
import './variables.css';
import './prose.css';
-1
View File
@@ -1 +0,0 @@
export const meta = { id: 'Ristretto', name: 'Ristretto', description: 'Warm coffee tones with amber and burnt orange.' };
-124
View File
@@ -1,124 +0,0 @@
/* File Viewer — Markdown Prose */
[data-color-theme="Ristretto"] .file-viewer-md {
color: #ebe5df;
}
[data-color-theme="Ristretto"] .file-viewer-md h1 {
border-bottom-color: rgba(95, 87, 79, 0.4);
}
[data-color-theme="Ristretto"] .file-viewer-md h2 {
border-bottom-color: rgba(95, 87, 79, 0.3);
}
[data-color-theme="Ristretto"] .file-viewer-md a {
color: #fc9867;
}
[data-color-theme="Ristretto"] .file-viewer-md a:hover {
color: #fbb360;
}
[data-color-theme="Ristretto"] .file-viewer-md strong {
color: #ebe5df;
}
[data-color-theme="Ristretto"] .file-viewer-md blockquote {
border-left-color: #fc9867;
background: rgba(252, 152, 103, 0.06);
color: #ada49d;
}
[data-color-theme="Ristretto"] .file-viewer-md li::marker {
color: #fc9867;
}
[data-color-theme="Ristretto"] .file-viewer-md hr {
background: rgba(95, 87, 79, 0.4);
}
[data-color-theme="Ristretto"] .file-viewer-md th {
background: rgba(252, 152, 103, 0.08);
border-color: rgba(95, 87, 79, 0.4);
}
[data-color-theme="Ristretto"] .file-viewer-md td {
border-color: rgba(95, 87, 79, 0.3);
}
[data-color-theme="Ristretto"] .file-viewer-md tr:nth-child(even) {
background: rgba(95, 87, 79, 0.1);
}
[data-color-theme="Ristretto"] .file-viewer-md input[type="checkbox"] {
accent-color: #fc9867;
}
/* Skills — Markdown Prose */
[data-color-theme="Ristretto"] .skill-md {
color: #ebe5df;
}
[data-color-theme="Ristretto"] .skill-md h1 {
border-bottom-color: rgba(95, 87, 79, 0.4);
}
[data-color-theme="Ristretto"] .skill-md h2 {
border-bottom-color: rgba(95, 87, 79, 0.3);
}
[data-color-theme="Ristretto"] .skill-md a {
color: #fc9867;
}
[data-color-theme="Ristretto"] .skill-md a:hover {
color: #fbb360;
}
[data-color-theme="Ristretto"] .skill-md strong {
color: #ebe5df;
}
[data-color-theme="Ristretto"] .skill-md blockquote {
border-left-color: #fc9867;
background: rgba(252, 152, 103, 0.06);
color: #ada49d;
}
[data-color-theme="Ristretto"] .skill-md li::marker {
color: #fc9867;
}
[data-color-theme="Ristretto"] .skill-md code {
background: rgba(252, 152, 103, 0.1);
color: #fc9867;
}
[data-color-theme="Ristretto"] .skill-md pre {
background: #352f2a;
}
[data-color-theme="Ristretto"] .skill-md pre code {
color: #ebe5df;
}
[data-color-theme="Ristretto"] .skill-md hr {
background: rgba(95, 87, 79, 0.4);
}
[data-color-theme="Ristretto"] .skill-md th {
background: rgba(252, 152, 103, 0.08);
border-color: rgba(95, 87, 79, 0.4);
}
[data-color-theme="Ristretto"] .skill-md td {
border-color: rgba(95, 87, 79, 0.3);
}
[data-color-theme="Ristretto"] .skill-md tr:nth-child(even) {
background: rgba(95, 87, 79, 0.1);
}
[data-color-theme="Ristretto"] .skill-md input[type="checkbox"] {
accent-color: #fc9867;
}
@@ -1,92 +0,0 @@
@layer base {
[data-color-theme="Ristretto"] {
/* Brand colors */
--duck-yellow: #fbb360;
--duck-orange: #fc9867;
--duck-teal: #fc9867;
--duck-forest: #ada49d;
--duck-dark: #ebe5df;
--duck-beige: #4d4743;
/* Page background */
--pixel-grid-color: rgba(252, 152, 103, 0.06);
/* Glass surfaces */
--glass-bg: rgba(0, 0, 0, 0.25);
--glass-border: rgba(252, 152, 103, 0.12);
--dock-bg: rgba(0, 0, 0, 0.35);
--dock-border: rgba(252, 152, 103, 0.08);
--dock-tooltip-bg: rgba(0, 0, 0, 0.9);
/* Card component */
--card-bg: rgba(53, 47, 42, 0.92);
--card-grid-color: rgba(252, 152, 103, 0.04);
--cta: 19.7 96.1% 69.6%;
--cta-foreground: 34.3 5.8% 23.7%;
--naturegreen: 32.1 95.1% 68%;
--naturegreen-foreground: 34.3 5.8% 23.7%;
--background: 34.3 5.8% 23.7%;
--foreground: 30 23.1% 89.8%;
--card: 27.3 11.6% 18.6%;
--card-foreground: 30 23.1% 89.8%;
--popover: 27.3 11.6% 18.6%;
--popover-foreground: 30 23.1% 89.8%;
--primary: 19.7 96.1% 69.6%;
--primary-foreground: 34.3 5.8% 23.7%;
--secondary: 30 9.2% 34.1%;
--secondary-foreground: 30 23.1% 89.8%;
--muted: 24 6.9% 28.2%;
--muted-foreground: 26.3 8.9% 64.7%;
--accent: 32.1 95.1% 68%;
--accent-foreground: 34.3 5.8% 23.7%;
--destructive: 0 57.2% 63.3%;
--destructive-foreground: 30 23.1% 89.8%;
--success: 113.6 13.5% 59.2%;
--success-foreground: 34.3 5.8% 23.7%;
--brand: 19.7 96.1% 69.6%;
--brand-foreground: 34.3 5.8% 23.7%;
--brand-muted: 24 6.9% 28.2%;
--warning: 32.1 95.1% 68%;
--warning-foreground: 34.3 5.8% 23.7%;
--border: 30 9.2% 34.1%;
--input: 30 9.2% 34.1%;
--ring: 19.7 96.1% 69.6%;
--radius: 0.5rem;
/* Chart gradients */
--chart-primary: 19.7 96.1% 69.6%;
--chart-secondary: 32.1 95.1% 68%;
/* Status colors */
--status-success: 113.6 13.5% 59.2%;
--status-warning: 32.1 95.1% 68%;
--status-in-progress: 19.7 96.1% 69.6%;
--sidebar-background: 27.3 11.6% 18.6%;
--sidebar-foreground: 26.3 8.9% 64.7%;
--sidebar-primary: 19.7 96.1% 69.6%;
--sidebar-primary-foreground: 34.3 5.8% 23.7%;
--sidebar-accent: 24 6.9% 28.2%;
--sidebar-accent-foreground: 30 23.1% 89.8%;
--sidebar-border: 30 9.2% 34.1%;
--sidebar-ring: 19.7 96.1% 69.6%;
/* Hover Effect */
--ctahover: 32.1 95.1% 68%;
}
}
-2
View File
@@ -1,2 +0,0 @@
import './variables.css';
import './prose.css';
-1
View File
@@ -1 +0,0 @@
export const meta = { id: 'RosePine', name: 'Rose Pine', description: 'Romantic purples and dusty rose on a moonlit base.' };
-124
View File
@@ -1,124 +0,0 @@
/* File Viewer — Markdown Prose */
[data-color-theme="RosePine"] .file-viewer-md {
color: #e0def4;
}
[data-color-theme="RosePine"] .file-viewer-md h1 {
border-bottom-color: rgba(38, 35, 58, 0.4);
}
[data-color-theme="RosePine"] .file-viewer-md h2 {
border-bottom-color: rgba(38, 35, 58, 0.3);
}
[data-color-theme="RosePine"] .file-viewer-md a {
color: #c4a7e7;
}
[data-color-theme="RosePine"] .file-viewer-md a:hover {
color: #ebbcba;
}
[data-color-theme="RosePine"] .file-viewer-md strong {
color: #e0def4;
}
[data-color-theme="RosePine"] .file-viewer-md blockquote {
border-left-color: #c4a7e7;
background: rgba(196, 167, 231, 0.06);
color: #908caa;
}
[data-color-theme="RosePine"] .file-viewer-md li::marker {
color: #c4a7e7;
}
[data-color-theme="RosePine"] .file-viewer-md hr {
background: rgba(38, 35, 58, 0.4);
}
[data-color-theme="RosePine"] .file-viewer-md th {
background: rgba(196, 167, 231, 0.08);
border-color: rgba(38, 35, 58, 0.4);
}
[data-color-theme="RosePine"] .file-viewer-md td {
border-color: rgba(38, 35, 58, 0.3);
}
[data-color-theme="RosePine"] .file-viewer-md tr:nth-child(even) {
background: rgba(38, 35, 58, 0.1);
}
[data-color-theme="RosePine"] .file-viewer-md input[type="checkbox"] {
accent-color: #c4a7e7;
}
/* Skills — Markdown Prose */
[data-color-theme="RosePine"] .skill-md {
color: #e0def4;
}
[data-color-theme="RosePine"] .skill-md h1 {
border-bottom-color: rgba(38, 35, 58, 0.4);
}
[data-color-theme="RosePine"] .skill-md h2 {
border-bottom-color: rgba(38, 35, 58, 0.3);
}
[data-color-theme="RosePine"] .skill-md a {
color: #c4a7e7;
}
[data-color-theme="RosePine"] .skill-md a:hover {
color: #ebbcba;
}
[data-color-theme="RosePine"] .skill-md strong {
color: #e0def4;
}
[data-color-theme="RosePine"] .skill-md blockquote {
border-left-color: #c4a7e7;
background: rgba(196, 167, 231, 0.06);
color: #908caa;
}
[data-color-theme="RosePine"] .skill-md li::marker {
color: #c4a7e7;
}
[data-color-theme="RosePine"] .skill-md code {
background: rgba(196, 167, 231, 0.1);
color: #c4a7e7;
}
[data-color-theme="RosePine"] .skill-md pre {
background: #1f1d2e;
}
[data-color-theme="RosePine"] .skill-md pre code {
color: #e0def4;
}
[data-color-theme="RosePine"] .skill-md hr {
background: rgba(38, 35, 58, 0.4);
}
[data-color-theme="RosePine"] .skill-md th {
background: rgba(196, 167, 231, 0.08);
border-color: rgba(38, 35, 58, 0.4);
}
[data-color-theme="RosePine"] .skill-md td {
border-color: rgba(38, 35, 58, 0.3);
}
[data-color-theme="RosePine"] .skill-md tr:nth-child(even) {
background: rgba(38, 35, 58, 0.1);
}
[data-color-theme="RosePine"] .skill-md input[type="checkbox"] {
accent-color: #c4a7e7;
}
@@ -1,92 +0,0 @@
@layer base {
[data-color-theme="RosePine"] {
/* Brand colors */
--duck-yellow: #f6c177;
--duck-orange: #eb6f92;
--duck-teal: #c4a7e7;
--duck-forest: #908caa;
--duck-dark: #e0def4;
--duck-beige: #26233a;
/* Page background */
--pixel-grid-color: rgba(196, 167, 231, 0.06);
/* Glass surfaces */
--glass-bg: rgba(0, 0, 0, 0.25);
--glass-border: rgba(196, 167, 231, 0.12);
--dock-bg: rgba(0, 0, 0, 0.35);
--dock-border: rgba(196, 167, 231, 0.08);
--dock-tooltip-bg: rgba(0, 0, 0, 0.9);
/* Card component */
--card-bg: rgba(31, 29, 46, 0.92);
--card-grid-color: rgba(196, 167, 231, 0.04);
--cta: 267.2 57.1% 78%;
--cta-foreground: 249.2 22% 11.6%;
--naturegreen: 2.4 55.1% 82.5%;
--naturegreen-foreground: 249.2 22% 11.6%;
--background: 249.2 22% 11.6%;
--foreground: 245.5 50% 91.4%;
--card: 247.1 22.7% 14.7%;
--card-foreground: 245.5 50% 91.4%;
--popover: 247.1 22.7% 14.7%;
--popover-foreground: 245.5 50% 91.4%;
--primary: 267.2 57.1% 78%;
--primary-foreground: 249.2 22% 11.6%;
--secondary: 247.8 24.7% 18.2%;
--secondary-foreground: 245.5 50% 91.4%;
--muted: 247.8 24.7% 18.2%;
--muted-foreground: 248 15% 60.8%;
--accent: 2.4 55.1% 82.5%;
--accent-foreground: 249.2 22% 11.6%;
--destructive: 343.1 75.6% 67.8%;
--destructive-foreground: 245.5 50% 91.4%;
--success: 189 43.5% 72.9%;
--success-foreground: 249.2 22% 11.6%;
--brand: 267.2 57.1% 78%;
--brand-foreground: 249.2 22% 11.6%;
--brand-muted: 247.8 24.7% 18.2%;
--warning: 35 87.6% 71.6%;
--warning-foreground: 249.2 22% 11.6%;
--border: 247.8 24.7% 18.2%;
--input: 247.8 24.7% 18.2%;
--ring: 267.2 57.1% 78%;
--radius: 0.5rem;
/* Chart gradients */
--chart-primary: 267.2 57.1% 78%;
--chart-secondary: 35 87.6% 71.6%;
/* Status colors */
--status-success: 189 43.5% 72.9%;
--status-warning: 35 87.6% 71.6%;
--status-in-progress: 267.2 57.1% 78%;
--sidebar-background: 247.1 22.7% 14.7%;
--sidebar-foreground: 248 15% 60.8%;
--sidebar-primary: 267.2 57.1% 78%;
--sidebar-primary-foreground: 249.2 22% 11.6%;
--sidebar-accent: 247.8 24.7% 18.2%;
--sidebar-accent-foreground: 245.5 50% 91.4%;
--sidebar-border: 248.6 14.7% 28%;
--sidebar-ring: 267.2 57.1% 78%;
/* Hover Effect */
--ctahover: 2.4 55.1% 82.5%;
}
}
@@ -1,2 +0,0 @@
import './variables.css';
import './prose.css';
@@ -1 +0,0 @@
export const meta = { id: 'TokyoNight', name: 'Tokyo Night', description: 'Moonlight blues and soft purples from a Tokyo evening.' };
-124
View File
@@ -1,124 +0,0 @@
/* File Viewer — Markdown Prose */
[data-color-theme="TokyoNight"] .file-viewer-md {
color: #c8d3f5;
}
[data-color-theme="TokyoNight"] .file-viewer-md h1 {
border-bottom-color: rgba(59, 66, 97, 0.4);
}
[data-color-theme="TokyoNight"] .file-viewer-md h2 {
border-bottom-color: rgba(59, 66, 97, 0.3);
}
[data-color-theme="TokyoNight"] .file-viewer-md a {
color: #82aaff;
}
[data-color-theme="TokyoNight"] .file-viewer-md a:hover {
color: #86e1fc;
}
[data-color-theme="TokyoNight"] .file-viewer-md strong {
color: #c8d3f5;
}
[data-color-theme="TokyoNight"] .file-viewer-md blockquote {
border-left-color: #82aaff;
background: rgba(130, 170, 255, 0.06);
color: #828bb8;
}
[data-color-theme="TokyoNight"] .file-viewer-md li::marker {
color: #82aaff;
}
[data-color-theme="TokyoNight"] .file-viewer-md hr {
background: rgba(59, 66, 97, 0.4);
}
[data-color-theme="TokyoNight"] .file-viewer-md th {
background: rgba(130, 170, 255, 0.08);
border-color: rgba(59, 66, 97, 0.4);
}
[data-color-theme="TokyoNight"] .file-viewer-md td {
border-color: rgba(59, 66, 97, 0.3);
}
[data-color-theme="TokyoNight"] .file-viewer-md tr:nth-child(even) {
background: rgba(59, 66, 97, 0.1);
}
[data-color-theme="TokyoNight"] .file-viewer-md input[type="checkbox"] {
accent-color: #82aaff;
}
/* Skills — Markdown Prose */
[data-color-theme="TokyoNight"] .skill-md {
color: #c8d3f5;
}
[data-color-theme="TokyoNight"] .skill-md h1 {
border-bottom-color: rgba(59, 66, 97, 0.4);
}
[data-color-theme="TokyoNight"] .skill-md h2 {
border-bottom-color: rgba(59, 66, 97, 0.3);
}
[data-color-theme="TokyoNight"] .skill-md a {
color: #82aaff;
}
[data-color-theme="TokyoNight"] .skill-md a:hover {
color: #86e1fc;
}
[data-color-theme="TokyoNight"] .skill-md strong {
color: #c8d3f5;
}
[data-color-theme="TokyoNight"] .skill-md blockquote {
border-left-color: #82aaff;
background: rgba(130, 170, 255, 0.06);
color: #828bb8;
}
[data-color-theme="TokyoNight"] .skill-md li::marker {
color: #82aaff;
}
[data-color-theme="TokyoNight"] .skill-md code {
background: rgba(130, 170, 255, 0.1);
color: #82aaff;
}
[data-color-theme="TokyoNight"] .skill-md pre {
background: #1e2030;
}
[data-color-theme="TokyoNight"] .skill-md pre code {
color: #c8d3f5;
}
[data-color-theme="TokyoNight"] .skill-md hr {
background: rgba(59, 66, 97, 0.4);
}
[data-color-theme="TokyoNight"] .skill-md th {
background: rgba(130, 170, 255, 0.08);
border-color: rgba(59, 66, 97, 0.4);
}
[data-color-theme="TokyoNight"] .skill-md td {
border-color: rgba(59, 66, 97, 0.3);
}
[data-color-theme="TokyoNight"] .skill-md tr:nth-child(even) {
background: rgba(59, 66, 97, 0.1);
}
[data-color-theme="TokyoNight"] .skill-md input[type="checkbox"] {
accent-color: #82aaff;
}
@@ -1,92 +0,0 @@
@layer base {
[data-color-theme="TokyoNight"] {
/* Brand colors */
--duck-yellow: #ffc777;
--duck-orange: #ff966c;
--duck-teal: #82aaff;
--duck-forest: #828bb8;
--duck-dark: #c8d3f5;
--duck-beige: #2f334d;
/* Page background */
--pixel-grid-color: rgba(130, 170, 255, 0.06);
/* Glass surfaces */
--glass-bg: rgba(0, 0, 0, 0.25);
--glass-border: rgba(130, 170, 255, 0.12);
--dock-bg: rgba(0, 0, 0, 0.35);
--dock-border: rgba(130, 170, 255, 0.08);
--dock-tooltip-bg: rgba(0, 0, 0, 0.9);
/* Card component */
--card-bg: rgba(30, 32, 48, 0.92);
--card-grid-color: rgba(130, 170, 255, 0.04);
--cta: 220.8 100% 75.5%;
--cta-foreground: 232.5 22.9% 13.7%;
--naturegreen: 193.7 95.2% 75.7%;
--naturegreen-foreground: 232.5 22.9% 13.7%;
--background: 234 22.7% 17.3%;
--foreground: 225.3 69.2% 87.3%;
--card: 233.3 23.1% 15.3%;
--card-foreground: 225.3 69.2% 87.3%;
--popover: 233.3 23.1% 15.3%;
--popover-foreground: 225.3 69.2% 87.3%;
--primary: 220.8 100% 75.5%;
--primary-foreground: 232.5 22.9% 13.7%;
--secondary: 228.9 24.4% 30.6%;
--secondary-foreground: 225.3 69.2% 87.3%;
--muted: 232 24.2% 24.3%;
--muted-foreground: 230 27.6% 61.6%;
--accent: 193.7 95.2% 75.7%;
--accent-foreground: 232.5 22.9% 13.7%;
--destructive: 349.6 54.3% 50.2%;
--destructive-foreground: 225.3 69.2% 87.3%;
--success: 84.4 66.4% 73.1%;
--success-foreground: 232.5 22.9% 13.7%;
--brand: 220.8 100% 75.5%;
--brand-foreground: 232.5 22.9% 13.7%;
--brand-muted: 232 24.2% 24.3%;
--warning: 35.3 100% 73.3%;
--warning-foreground: 234 22.7% 17.3%;
--border: 228.9 24.4% 30.6%;
--input: 228.9 24.4% 30.6%;
--ring: 220.8 100% 75.5%;
--radius: 0.5rem;
/* Chart gradients */
--chart-primary: 220.8 100% 75.5%;
--chart-secondary: 35.3 100% 73.3%;
/* Status colors */
--status-success: 84.4 66.4% 73.1%;
--status-warning: 35.3 100% 73.3%;
--status-in-progress: 220.8 100% 75.5%;
--sidebar-background: 233.3 23.1% 15.3%;
--sidebar-foreground: 230 27.6% 61.6%;
--sidebar-primary: 220.8 100% 75.5%;
--sidebar-primary-foreground: 232.5 22.9% 13.7%;
--sidebar-accent: 232 24.2% 24.3%;
--sidebar-accent-foreground: 225.3 69.2% 87.3%;
--sidebar-border: 228.9 24.4% 30.6%;
--sidebar-ring: 220.8 100% 75.5%;
/* Hover Effect */
--ctahover: 193.7 95.2% 75.7%;
}
}
-14
View File
@@ -1,14 +0,0 @@
export const themes = [
{ id: 'DuckPond', name: 'Duck Pond' },
{ id: 'TokyoNight', name: 'Tokyo Night' },
{ id: 'CatppuccinLatte', name: 'Catppuccin Latte' },
{ id: 'CatppuccinMocha', name: 'Catppuccin Mocha' },
{ id: 'Everforest', name: 'Everforest' },
{ id: 'Gruvbox', name: 'Gruvbox' },
{ id: 'Kanagawa', name: 'Kanagawa' },
{ id: 'MatteBlack', name: 'Matte Black' },
{ id: 'Nord', name: 'Nord' },
{ id: 'OsakaJade', name: 'Osaka Jade' },
{ id: 'Ristretto', name: 'Ristretto' },
{ id: 'RosePine', name: 'Rose Pine' },
] as const;
-31
View File
@@ -1,31 +0,0 @@
{
"name": "themes",
"private": true,
"exports": {
".": "./index.ts",
"./DuckPond": "./DuckPond/index.ts",
"./DuckPond/client": "./DuckPond/client.ts",
"./TokyoNight": "./TokyoNight/index.ts",
"./TokyoNight/client": "./TokyoNight/client.ts",
"./CatppuccinLatte": "./CatppuccinLatte/index.ts",
"./CatppuccinLatte/client": "./CatppuccinLatte/client.ts",
"./CatppuccinMocha": "./CatppuccinMocha/index.ts",
"./CatppuccinMocha/client": "./CatppuccinMocha/client.ts",
"./Everforest": "./Everforest/index.ts",
"./Everforest/client": "./Everforest/client.ts",
"./Gruvbox": "./Gruvbox/index.ts",
"./Gruvbox/client": "./Gruvbox/client.ts",
"./Kanagawa": "./Kanagawa/index.ts",
"./Kanagawa/client": "./Kanagawa/client.ts",
"./MatteBlack": "./MatteBlack/index.ts",
"./MatteBlack/client": "./MatteBlack/client.ts",
"./Nord": "./Nord/index.ts",
"./Nord/client": "./Nord/client.ts",
"./OsakaJade": "./OsakaJade/index.ts",
"./OsakaJade/client": "./OsakaJade/client.ts",
"./Ristretto": "./Ristretto/index.ts",
"./Ristretto/client": "./Ristretto/client.ts",
"./RosePine": "./RosePine/index.ts",
"./RosePine/client": "./RosePine/client.ts"
}
}
+7
View File
@@ -0,0 +1,7 @@
{
"name": "widgets",
"private": true,
"exports": {
"./TerminalView": "./TerminalView.tsx"
}
}