BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: introduced a token-based theming system across the UI

Browse Source 
* feat: added themes system

* feat: smart sidebar auto-hide for files/diff tabs + lower files sidebar threshold

* feat: added Checkbox component and update theming

- Add reusable Checkbox component for toggles across UI
- Replace several inputs with Checkbox in settings and commands panels
- Add DiffIcon and apply surface/border theming to key UI areas

* feat: Add convert-vscode-theme.cjs to convert VS Code themes to OpenChamber format

* refactor: remove unused permission logic from ChatInput

- Remove unused permission rules parsing logic from ChatInput
- Memoize renderTheme in DiffWorkerProvider to avoid unnecessary recalculations
- Remove forceOpaque helper in vscode theme adapter

* fix: guard VSCode theme loading in MarkdownRenderer

* feat: add custom user themes loading and reload

- Load user themes from ~/.config/openchamber/themes at runtime
- Expose /api/config/themes to fetch custom themes
- Allow theme reloading from Settings → Theme → Reload themes in the UI
This commit is contained in:
Bohdan Triapitsyn
2026-02-01 18:29:34 +02:00
committed by GitHub
parent 5bb2c56bc0
commit ddedc02687
147 changed files with 9853 additions and 2435 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/lib/shiki/appThemeRegistry.ts
+95
View File
@@ -0,0 +1,95 @@
import { registerCustomTheme } from '@pierre/diffs';
import type { Theme } from '@/types/theme';
import type { VSCodeTextMateTheme, VSCodeTokenColorRule } from './vscodeTextMateTheme';
import { buildTextMateThemeFromAppTheme } from './textMateThemeFromAppTheme';
export type ShikiThemeRegistrationResolvedLike = VSCodeTextMateTheme & {
settings: VSCodeTokenColorRule[];
fg: string;
bg: string;
};
const isHex8 = (value: string): boolean => /^#[0-9a-fA-F]{8}$/.test(value);
const stripAlpha = (value: string): string => {
if (isHex8(value)) {
return value.slice(0, 7);
}
return value;
};
function withStableStringId<T extends object>(value: T, id: string): T {
Object.defineProperty(value, 'toString', {
value: () => id,
enumerable: false,
configurable: true,
});
Object.defineProperty(value, Symbol.toPrimitive, {
value: () => id,
enumerable: false,
configurable: true,
});
return value;
}
const resolvedThemeCache = new Map<string, ShikiThemeRegistrationResolvedLike>();
const registeredPierreThemes = new Set<string>();
const toResolvedTheme = (raw: VSCodeTextMateTheme, id: string): ShikiThemeRegistrationResolvedLike => {
const bgRaw = raw.colors?.['editor.background'];
const fgRaw = raw.colors?.['editor.foreground'];
const bg = bgRaw ? stripAlpha(bgRaw) : undefined;
const fg = fgRaw ? stripAlpha(fgRaw) : undefined;
if (!bg || !fg) {
throw new Error(`Theme "${id}" is missing editor.background/editor.foreground`);
}
const settings = raw.tokenColors ?? [];
return withStableStringId(
{
...raw,
name: id,
fg,
bg,
settings,
},
id,
);
};
const buildTextMateTheme = (theme: Theme): VSCodeTextMateTheme => {
return buildTextMateThemeFromAppTheme(theme);
};
export const getResolvedShikiTheme = (theme: Theme): ShikiThemeRegistrationResolvedLike => {
const cached = resolvedThemeCache.get(theme.metadata.id);
if (cached) {
return cached;
}
const raw = buildTextMateTheme(theme);
const resolved = toResolvedTheme(raw, theme.metadata.id);
resolvedThemeCache.set(theme.metadata.id, resolved);
return resolved;
};
export const ensurePierreThemeRegistered = (theme: Theme): void => {
const id = theme.metadata.id;
if (registeredPierreThemes.has(id)) {
return;
}
const resolved = getResolvedShikiTheme(theme);
registerCustomTheme(id, async () => resolved);
registeredPierreThemes.add(id);
};
export const getStreamdownThemePair = (light: Theme, dark: Theme) => {
return [getResolvedShikiTheme(light), getResolvedShikiTheme(dark)] as const;
};
packages/ui/src/lib/shiki/flexokiThemes.ts
-96
View File
@@ -1,96 +0,0 @@
import flexokiDarkRawJson from './themes/flexoki-dark.json';
import flexokiLightRawJson from './themes/flexoki-light.json';
export const FLEXOKI_SHIKI_DARK_THEME_NAME = 'flexoki-dark';
export const FLEXOKI_SHIKI_LIGHT_THEME_NAME = 'flexoki-light';
type VSCodeTokenColorRule = {
name?: string;
scope?: string | string[];
settings: Record<string, string | undefined>;
};
type VSCodeTextMateTheme = {
name: string;
type: 'dark' | 'light';
colors?: Record<string, string>;
tokenColors?: VSCodeTokenColorRule[];
semanticHighlighting?: boolean;
semanticTokenColors?: Record<string, string>;
};
type ShikiThemeRegistrationResolvedLike = VSCodeTextMateTheme & {
settings: VSCodeTokenColorRule[];
fg: string;
bg: string;
};
const flexokiDarkRaw = flexokiDarkRawJson as VSCodeTextMateTheme;
const flexokiLightRaw = flexokiLightRawJson as VSCodeTextMateTheme;
function withStableStringId<T extends object>(value: T, id: string): T {
Object.defineProperty(value, 'toString', {
value: () => id,
enumerable: false,
configurable: true,
});
Object.defineProperty(value, Symbol.toPrimitive, {
value: () => id,
enumerable: false,
configurable: true,
});
return value;
}
function toResolvedTheme(
raw: VSCodeTextMateTheme,
name: string,
type: VSCodeTextMateTheme['type']
): ShikiThemeRegistrationResolvedLike {
const bg = raw.colors?.['editor.background'];
const fg = raw.colors?.['editor.foreground'];
if (!bg || !fg) {
throw new Error(
`Flexoki Shiki theme "${name}" is missing editor.background/editor.foreground`
);
}
const settings = raw.tokenColors ?? [];
return {
...raw,
name,
type,
fg,
bg,
settings,
};
}
export const flexokiDarkTheme = toResolvedTheme(
flexokiDarkRaw,
FLEXOKI_SHIKI_DARK_THEME_NAME,
'dark'
);
export const flexokiLightTheme = toResolvedTheme(
flexokiLightRaw,
FLEXOKI_SHIKI_LIGHT_THEME_NAME,
'light'
);
withStableStringId(flexokiDarkTheme, FLEXOKI_SHIKI_DARK_THEME_NAME);
withStableStringId(flexokiLightTheme, FLEXOKI_SHIKI_LIGHT_THEME_NAME);
export const flexokiThemeNames = {
dark: FLEXOKI_SHIKI_DARK_THEME_NAME,
light: FLEXOKI_SHIKI_LIGHT_THEME_NAME,
} as const;
export const flexokiStreamdownThemes = [
flexokiLightTheme,
flexokiDarkTheme,
] as const;
packages/ui/src/lib/shiki/registerFlexokiThemes.ts
-15
View File
@@ -1,15 +0,0 @@
import { registerCustomTheme } from '@pierre/diffs';
import { flexokiDarkTheme, flexokiLightTheme, flexokiThemeNames } from './flexokiThemes';
let hasRegistered = false;
export function ensureFlexokiThemesRegistered(): void {
if (hasRegistered) return;
registerCustomTheme(flexokiThemeNames.dark, async () => flexokiDarkTheme);
registerCustomTheme(flexokiThemeNames.light, async () => flexokiLightTheme);
hasRegistered = true;
}
packages/ui/src/lib/shiki/textMateThemeFromAppTheme.ts
+482
View File
@@ -0,0 +1,482 @@
import type { Theme } from '@/types/theme';
import type { VSCodeTextMateTheme, VSCodeTokenColorRule } from './vscodeTextMateTheme';
const isHex6 = (value: string): boolean => /^#[0-9a-fA-F]{6}$/.test(value);
const isHex8 = (value: string): boolean => /^#[0-9a-fA-F]{8}$/.test(value);
const addAlpha = (value: string, alphaHex: string): string => {
if (!/^[0-9a-fA-F]{2}$/.test(alphaHex)) {
return value;
}
if (isHex6(value)) {
return `${value}${alphaHex}`;
}
if (isHex8(value)) {
return `${value.slice(0, 7)}${alphaHex}`;
}
return value;
};
const pick = (value: string | undefined, fallback: string): string => {
if (typeof value === 'string' && value.trim().length > 0) {
return value;
}
return fallback;
};
const buildTokenColors = (theme: Theme): VSCodeTokenColorRule[] => {
const base = theme.colors.syntax.base;
const tokens = theme.colors.syntax.tokens ?? {};
const t = (key: string, fallback: string): string => pick(tokens[key], fallback);
return [
{
name: 'plain',
scope: ['source', 'support.type.property-name.css'],
settings: { foreground: base.foreground },
},
{
name: 'classes',
scope: ['entity.name.type.class'],
settings: { foreground: t('className', t('class', base.function)) },
},
{
name: 'interfaces',
scope: ['entity.name.type.interface', 'entity.name.type'],
settings: { foreground: t('interface', base.type) },
},
{
name: 'structs',
scope: ['entity.name.type.struct'],
settings: { foreground: t('struct', base.function) },
},
{
name: 'enums',
scope: ['entity.name.type.enum'],
settings: { foreground: t('enum', base.function) },
},
{
name: 'keys',
scope: ['meta.object-literal.key', 'support.type.property-name'],
settings: { foreground: t('key', base.function) },
},
{
name: 'methods',
scope: ['entity.name.function.method', 'meta.function.method'],
settings: { foreground: t('method', theme.colors.status.success) },
},
{
name: 'functions',
scope: ['entity.name.function', 'support.function', 'meta.function-call.generic'],
settings: { foreground: base.function, fontStyle: 'bold' },
},
{
name: 'variables',
scope: ['variable', 'meta.variable', 'variable.other.object.property'],
settings: { foreground: base.variable },
},
{
name: 'variablesOther',
scope: ['variable.other.object', 'variable.other.readwrite.alias'],
settings: { foreground: t('variableOther', t('method', theme.colors.status.success)) },
},
{
name: 'globalVariables',
scope: ['variable.other.global', 'variable.language.this'],
settings: { foreground: t('variableGlobal', base.number) },
},
{
name: 'localVariables',
scope: ['variable.other.local'],
settings: { foreground: t('variableLocal', theme.colors.surface.elevated) },
},
{
name: 'parameters',
scope: ['variable.parameter', 'meta.parameter'],
settings: { foreground: t('parameter', base.foreground) },
},
{
name: 'properties',
scope: ['variable.other.property', 'meta.property'],
settings: { foreground: t('variableProperty', theme.colors.status.info) },
},
{
name: 'strings',
scope: ['string', 'string.other.link', 'markup.inline.raw.string.markdown'],
settings: { foreground: base.string },
},
{
name: 'stringEscapeSequences',
scope: ['constant.character.escape', 'constant.other.placeholder'],
settings: { foreground: t('stringEscape', base.foreground) },
},
{
name: 'keywords',
scope: ['keyword'],
settings: { foreground: base.keyword },
},
{
name: 'keywordsControl',
scope: ['keyword.control.import', 'keyword.control.from', 'keyword.import'],
settings: { foreground: t('keywordImport', base.operator) },
},
{
name: 'storageModifiers',
scope: ['storage.modifier', 'keyword.modifier', 'storage.type'],
settings: { foreground: t('storageModifier', base.keyword) },
},
{
name: 'comments',
scope: ['comment', 'punctuation.definition.comment'],
settings: { foreground: base.comment },
},
{
name: 'docComments',
scope: ['comment.documentation', 'comment.line.documentation'],
settings: { foreground: t('commentDoc', theme.colors.surface.mutedForeground) },
},
{
name: 'numbers',
scope: ['constant.numeric'],
settings: { foreground: base.number },
},
{
name: 'booleans',
scope: ['constant.language.boolean', 'constant.language.json'],
settings: { foreground: t('boolean', base.type) },
},
{
name: 'operators',
scope: ['keyword.operator'],
settings: { foreground: base.operator },
},
{
name: 'macros',
scope: ['entity.name.function.preprocessor', 'meta.preprocessor'],
settings: { foreground: t('macro', base.keyword) },
},
{
name: 'preprocessor',
scope: ['meta.preprocessor'],
settings: { foreground: t('preprocessor', t('label', base.number)) },
},
{
name: 'urls',
scope: ['markup.underline.link'],
settings: { foreground: t('url', theme.colors.status.info) },
},
{
name: 'tags',
scope: ['entity.name.tag'],
settings: { foreground: t('tag', base.keyword) },
},
{
name: 'jsxTags',
scope: ['support.class.component'],
settings: { foreground: t('jsxTag', t('label', base.number)) },
},
{
name: 'attributes',
scope: ['entity.other.attribute-name', 'meta.attribute'],
settings: { foreground: t('tagAttribute', base.type) },
},
{
name: 'types',
scope: ['support.type'],
settings: { foreground: base.type },
},
{
name: 'constants',
scope: ['variable.other.constant', 'variable.readonly'],
settings: { foreground: t('constant', base.foreground) },
},
{
name: 'labels',
scope: ['entity.name.label', 'punctuation.definition.label'],
settings: { foreground: t('label', t('variableGlobal', base.number)) },
},
{
name: 'namespaces',
scope: ['entity.name.namespace', 'storage.modifier.namespace', 'markup.bold.markdown'],
settings: { foreground: t('namespace', base.type) },
},
{
name: 'modules',
scope: ['entity.name.module', 'storage.modifier.module'],
settings: { foreground: t('module', base.operator) },
},
{
name: 'typeParameters',
scope: ['variable.type.parameter', 'variable.parameter.type'],
settings: { foreground: t('typeParameter', base.function) },
},
{
name: 'exceptions',
scope: ['keyword.control.exception', 'keyword.control.trycatch'],
settings: { foreground: t('exception', t('label', base.number)) },
},
{
name: 'decorators',
scope: ['meta.decorator', 'punctuation.decorator', 'entity.name.function.decorator'],
settings: { foreground: t('decorator', base.type) },
},
{
name: 'calls',
scope: ['variable.function'],
settings: { foreground: base.foreground },
},
{
name: 'punctuation',
scope: [
'punctuation',
'punctuation.terminator',
'punctuation.definition.tag',
'punctuation.separator',
'punctuation.definition.string',
'punctuation.section.block',
],
settings: { foreground: t('punctuation', base.comment) },
},
{
name: 'yellow',
scope: [
'storage.type.numeric.go',
'storage.type.byte.go',
'storage.type.boolean.go',
'storage.type.string.go',
'storage.type.uintptr.go',
'storage.type.error.go',
'storage.type.rune.go',
'constant.language.go',
'support.class.dart',
'keyword.other.documentation',
'storage.modifier.import.java',
'punctuation.definition.list.begin.markdown',
'punctuation.definition.quote.begin.markdown',
'meta.separator.markdown',
'entity.name.section.markdown',
],
settings: { foreground: base.type },
},
{
name: 'green',
scope: [],
settings: { foreground: t('method', theme.colors.status.success) },
},
{
name: 'cyan',
scope: [
'markup.italic.markdown',
'support.type.python',
'variable.legacy.builtin.python',
'support.constant.property-value.css',
'storage.modifier.attribute.swift',
],
settings: { foreground: base.string },
},
{
name: 'blue',
scope: [],
settings: { foreground: base.keyword },
},
{
name: 'purple',
scope: ['keyword.channel.go', 'keyword.other.platform.os.swift'],
settings: { foreground: base.number },
},
{
name: 'magenta',
scope: ['punctuation.definition.heading.markdown'],
settings: { foreground: t('label', t('variableGlobal', base.number)) },
},
{
name: 'red',
scope: [],
settings: { foreground: base.operator },
},
{
name: 'orange',
scope: [],
settings: { foreground: base.function },
},
];
};
const buildColors = (theme: Theme): Record<string, string> => {
const s = theme.colors.surface;
const i = theme.colors.interactive;
const st = theme.colors.status;
const base = theme.colors.syntax.base;
const hl = theme.colors.syntax.highlights ?? {};
const diffAddedBg = pick(hl.diffAddedBackground, st.successBackground);
const diffRemovedBg = pick(hl.diffRemovedBackground, st.errorBackground);
return {
'editor.background': s.background,
'editor.foreground': s.foreground,
'editor.hoverHighlightBackground': pick(i.hover, s.subtle),
'editor.lineHighlightBackground': s.muted,
'editor.selectionBackground': i.selection,
'editor.selectionHighlightBackground': i.selection,
'editor.findMatchBackground': base.type,
'editor.findMatchHighlightBackground': addAlpha(base.type, 'cc'),
'editor.findRangeHighlightBackground': s.muted,
'editor.inactiveSelectionBackground': s.elevated,
'editor.lineHighlightBorder': s.elevated,
'editor.rangeHighlightBackground': pick(i.active, i.borderHover),
'notifications.background': s.elevated,
'editorInlayHint.typeBackground': s.subtle,
'editorInlayHint.typeForeground': s.foreground,
'editorWhitespace.foreground': i.borderHover,
'editorIndentGuide.background1': s.subtle,
'editorHoverWidget.background': s.elevated,
'editorLineNumber.activeForeground': pick(hl.lineNumberActive, s.foreground),
'editorLineNumber.foreground': pick(hl.lineNumber, s.mutedForeground),
'editorGutter.background': s.background,
'editorGutter.modifiedBackground': st.info,
'editorGutter.addedBackground': st.success,
'editorGutter.deletedBackground': st.error,
'editorBracketMatch.background': s.elevated,
'editorBracketMatch.border': s.subtle,
'editorError.foreground': st.error,
'editorWarning.foreground': st.warning,
'editorInfo.foreground': st.info,
'diffEditor.insertedTextBackground': diffAddedBg,
'diffEditor.removedTextBackground': diffRemovedBg,
'editorGroupHeader.tabsBackground': s.background,
'editorGroup.border': i.border,
'tab.activeBackground': s.background,
'tab.inactiveBackground': s.muted,
'tab.inactiveForeground': s.mutedForeground,
'tab.activeForeground': s.foreground,
'tab.hoverBackground': s.subtle,
'tab.unfocusedHoverBackground': s.subtle,
'tab.border': i.border,
'tab.activeModifiedBorder': base.type,
'tab.inactiveModifiedBorder': st.info,
'tab.unfocusedActiveModifiedBorder': base.type,
'tab.unfocusedInactiveModifiedBorder': st.info,
'editorWidget.background': s.muted,
'editorWidget.border': i.border,
'editorSuggestWidget.background': s.background,
'editorSuggestWidget.border': i.border,
'editorSuggestWidget.foreground': s.foreground,
'editorSuggestWidget.highlightForeground': s.mutedForeground,
'editorSuggestWidget.selectedBackground': s.subtle,
'peekView.border': i.border,
'peekViewEditor.background': s.background,
'peekViewEditor.matchHighlightBackground': s.subtle,
'peekViewResult.background': s.muted,
'peekViewResult.fileForeground': s.foreground,
'peekViewResult.lineForeground': s.mutedForeground,
'peekViewResult.matchHighlightBackground': s.subtle,
'peekViewResult.selectionBackground': s.elevated,
'peekViewResult.selectionForeground': s.mutedForeground,
'peekViewTitle.background': s.subtle,
'peekViewTitleDescription.foreground': s.mutedForeground,
'peekViewTitleLabel.foreground': s.foreground,
'merge.currentHeaderBackground': st.success,
'merge.currentContentBackground': pick(hl.diffAdded, st.success),
'merge.incomingHeaderBackground': st.info,
'merge.incomingContentBackground': pick(hl.diffModified, st.info),
'merge.border': i.border,
'merge.commonContentBackground': s.subtle,
'merge.commonHeaderBackground': s.muted,
'panel.background': s.background,
'panel.border': i.border,
'panelTitle.activeBorder': i.borderHover,
'panelTitle.activeForeground': s.foreground,
'panelTitle.inactiveForeground': s.mutedForeground,
'statusBar.background': s.background,
'statusBar.foreground': s.foreground,
'statusBar.border': i.border,
'statusBar.debuggingBackground': st.error,
'statusBar.debuggingForeground': st.errorForeground,
'statusBar.noFolderBackground': s.subtle,
'statusBar.noFolderForeground': s.mutedForeground,
'titleBar.activeBackground': s.background,
'titleBar.activeForeground': s.foreground,
'titleBar.inactiveBackground': s.muted,
'titleBar.inactiveForeground': s.mutedForeground,
'titleBar.border': i.border,
'menu.foreground': s.foreground,
'menu.background': s.background,
'menu.selectionForeground': s.foreground,
'menu.selectionBackground': s.subtle,
'menu.border': i.border,
'editorInlayHint.foreground': s.mutedForeground,
'editorInlayHint.background': s.subtle,
'terminal.foreground': s.foreground,
'terminal.background': s.background,
'terminalCursor.foreground': s.foreground,
'terminalCursor.background': s.background,
'terminal.ansiRed': pick(hl.diffRemoved, st.error),
'terminal.ansiGreen': pick(hl.diffAdded, st.success),
'terminal.ansiYellow': st.warning,
'terminal.ansiBlue': pick(hl.diffModified, st.info),
'terminal.ansiMagenta': base.keyword,
'terminal.ansiCyan': base.type,
'activityBar.background': s.background,
'activityBar.foreground': s.foreground,
'activityBar.inactiveForeground': s.mutedForeground,
'activityBar.activeBorder': s.foreground,
'activityBar.border': i.border,
'sideBar.background': s.background,
'sideBar.foreground': s.foreground,
'sideBar.border': i.border,
'sideBarTitle.foreground': s.foreground,
'sideBarSectionHeader.background': s.muted,
'sideBarSectionHeader.foreground': s.foreground,
'sideBarSectionHeader.border': i.border,
'sideBar.activeBackground': s.subtle,
'sideBar.activeForeground': s.foreground,
'sideBar.hoverBackground': s.muted,
'sideBar.hoverForeground': s.foreground,
'list.warningForeground': st.warning,
'list.errorForeground': st.error,
'list.inactiveSelectionBackground': s.subtle,
'list.activeSelectionBackground': s.elevated,
'list.inactiveSelectionForeground': s.foreground,
'list.activeSelectionForeground': s.foreground,
'list.hoverForeground': s.foreground,
'list.hoverBackground': s.muted,
'input.background': s.muted,
'input.foreground': s.foreground,
'input.border': i.border,
'input.placeholderForeground': s.mutedForeground,
'inputOption.activeBorder': i.border,
'inputOption.activeBackground': s.elevated,
'inputOption.activeForeground': s.foreground,
'inputValidation.infoBackground': st.infoBackground,
'inputValidation.infoBorder': st.infoBorder,
'inputValidation.warningBackground': st.warningBackground,
'inputValidation.warningBorder': st.warningBorder,
'inputValidation.errorBackground': st.errorBackground,
'inputValidation.errorBorder': st.errorBorder,
'dropdown.background': s.muted,
'dropdown.foreground': s.foreground,
'dropdown.border': i.border,
'dropdown.listBackground': s.background,
'badge.background': theme.colors.primary.base,
'activityBarBadge.background': theme.colors.primary.base,
'button.background': theme.colors.primary.base,
'button.foreground': pick(theme.colors.primary.foreground, s.background),
'badge.foreground': pick(theme.colors.primary.foreground, s.background),
'activityBarBadge.foreground': pick(theme.colors.primary.foreground, s.background),
};
};
export function buildTextMateThemeFromAppTheme(theme: Theme): VSCodeTextMateTheme {
return {
name: theme.metadata.name,
type: theme.metadata.variant,
colors: buildColors(theme),
tokenColors: buildTokenColors(theme),
};
}
packages/ui/src/lib/shiki/themes/flexoki-dark.json
-547
View File
@@ -1,547 +0,0 @@
{
"name": "Flexoki",
"type": "dark",
"colors": {
"editor.background": "#100F0F",
"editor.foreground": "#CECDC3",
"editor.hoverHighlightBackground": "#343331",
"editor.lineHighlightBackground": "#1C1B1A",
"editor.selectionBackground": "#CECDC333",
"editor.selectionHighlightBackground": "#CECDC333",
"editor.findMatchBackground": "#AD8301",
"editor.findMatchHighlightBackground": "#AD8301cc",
"editor.findRangeHighlightBackground": "#1C1B1A",
"editor.inactiveSelectionBackground": "#282726",
"editor.lineHighlightBorder": "#282726",
"editor.rangeHighlightBackground": "#403E3C",
"notifications.background": "#282726",
"editorInlayHint.typeBackground": "#343331",
"editorInlayHint.typeForeground": "#CECDC3",
"editorWhitespace.foreground": "#403E3C",
"editorIndentGuide.background1": "#343331",
"editorHoverWidget.background": "#282726",
"editorLineNumber.activeForeground": "#CECDC3",
"editorLineNumber.foreground": "#403E3C",
"editorGutter.background": "#100F0F",
"editorGutter.modifiedBackground": "#3AA99F",
"editorGutter.addedBackground": "#879A39",
"editorGutter.deletedBackground": "#D14D41",
"editorBracketMatch.background": "#282726",
"editorBracketMatch.border": "#343331",
"editorError.foreground": "#D14D41",
"editorWarning.foreground": "#DA702C",
"editorInfo.foreground": "#4385BE",
"diffEditor.insertedTextBackground": "#66800B99",
"diffEditor.removedTextBackground": "#AF302999",
"editorGroupHeader.tabsBackground": "#100F0F",
"editorGroup.border": "#343331",
"tab.activeBackground": "#100F0F",
"tab.inactiveBackground": "#1C1B1A",
"tab.inactiveForeground": "#878580",
"tab.activeForeground": "#CECDC3",
"tab.hoverBackground": "#343331",
"tab.unfocusedHoverBackground": "#343331",
"tab.border": "#343331",
"tab.activeModifiedBorder": "#D0A215",
"tab.inactiveModifiedBorder": "#4385BE",
"tab.unfocusedActiveModifiedBorder": "#AD8301",
"tab.unfocusedInactiveModifiedBorder": "#205EA6",
"editorWidget.background": "#1C1B1A",
"editorWidget.border": "#343331",
"editorSuggestWidget.background": "#100F0F",
"editorSuggestWidget.border": "#343331",
"editorSuggestWidget.foreground": "#CECDC3",
"editorSuggestWidget.highlightForeground": "#878580",
"editorSuggestWidget.selectedBackground": "#343331",
"peekView.border": "#343331",
"peekViewEditor.background": "#100F0F",
"peekViewEditor.matchHighlightBackground": "#403E3C",
"peekViewResult.background": "#1C1B1A",
"peekViewResult.fileForeground": "#CECDC3",
"peekViewResult.lineForeground": "#878580",
"peekViewResult.matchHighlightBackground": "#403E3C",
"peekViewResult.selectionBackground": "#282726",
"peekViewResult.selectionForeground": "#575653",
"peekViewTitle.background": "#343331",
"peekViewTitleDescription.foreground": "#878580",
"peekViewTitleLabel.foreground": "#CECDC3",
"merge.currentHeaderBackground": "#879A39",
"merge.currentContentBackground": "#66800B",
"merge.incomingHeaderBackground": "#3AA99F",
"merge.incomingContentBackground": "#24837B",
"merge.border": "#343331",
"merge.commonContentBackground": "#403E3C",
"merge.commonHeaderBackground": "#343331",
"panel.background": "#100F0F",
"panel.border": "#343331",
"panelTitle.activeBorder": "#403E3C",
"panelTitle.activeForeground": "#CECDC3",
"panelTitle.inactiveForeground": "#878580",
"statusBar.background": "#100F0F",
"statusBar.foreground": "#CECDC3",
"statusBar.border": "#343331",
"statusBar.debuggingBackground": "#D14D41",
"statusBar.debuggingForeground": "#CECDC3",
"statusBar.noFolderBackground": "#403E3C",
"statusBar.noFolderForeground": "#575653",
"titleBar.activeBackground": "#100F0F",
"titleBar.activeForeground": "#CECDC3",
"titleBar.inactiveBackground": "#1C1B1A",
"titleBar.inactiveForeground": "#878580",
"titleBar.border": "#343331",
"menu.foreground": "#CECDC3",
"menu.background": "#100F0F",
"menu.selectionForeground": "#CECDC3",
"menu.selectionBackground": "#343331",
"menu.border": "#343331",
"editorInlayHint.foreground": "#878580",
"editorInlayHint.background": "#343331",
"terminal.foreground": "#CECDC3",
"terminal.background": "#100F0F",
"terminalCursor.foreground": "#CECDC3",
"terminalCursor.background": "#100F0F",
"terminal.ansiRed": "#D14D41",
"terminal.ansiGreen": "#879A39",
"terminal.ansiYellow": "#D0A215",
"terminal.ansiBlue": "#4385BE",
"terminal.ansiMagenta": "#3AA99F",
"terminal.ansiCyan": "#3AA99F",
"activityBar.background": "#100F0F",
"activityBar.foreground": "#CECDC3",
"activityBar.inactiveForeground": "#878580",
"activityBar.activeBorder": "#CECDC3",
"activityBar.border": "#343331",
"sideBar.background": "#100F0F",
"sideBar.foreground": "#CECDC3",
"sideBar.border": "#343331",
"sideBarTitle.foreground": "#CECDC3",
"sideBarSectionHeader.background": "#1C1B1A",
"sideBarSectionHeader.foreground": "#CECDC3",
"sideBarSectionHeader.border": "#343331",
"sideBar.activeBackground": "#403E3C",
"sideBar.activeForeground": "#CECDC3",
"sideBar.hoverBackground": "#343331",
"sideBar.hoverForeground": "#878580",
"sideBar.folderIcon.foreground": "#879A39",
"sideBar.fileIcon.foreground": "#4385BE",
"list.warningForeground": "#DA702C",
"list.errorForeground": "#D14D41",
"list.inactiveSelectionBackground": "#343331",
"list.activeSelectionBackground": "#403E3C",
"list.inactiveSelectionForeground": "#CECDC3",
"list.activeSelectionForeground": "#CECDC3",
"list.hoverForeground": "#CECDC3",
"list.hoverBackground": "#343331",
"input.background": "#1C1B1A",
"input.foreground": "#CECDC3",
"input.border": "#343331",
"input.placeholderForeground": "#878580",
"inputOption.activeBorder": "#343331",
"inputOption.activeBackground": "#282726",
"inputOption.activeForeground": "#CECDC3",
"inputValidation.infoBackground": "#3AA99F",
"inputValidation.infoBorder": "#24837B",
"inputValidation.warningBackground": "#DA702C",
"inputValidation.warningBorder": "#BC5215",
"inputValidation.errorBackground": "#D14D41",
"inputValidation.errorBorder": "#AF3029",
"dropdown.background": "#1C1B1A",
"dropdown.foreground": "#CECDC3",
"dropdown.border": "#343331",
"dropdown.listBackground": "#100F0F",
"badge.background": "#3AA99F",
"activityBarBadge.background": "#3AA99F",
"button.background": "#3AA99F",
"button.foreground": "#100F0F",
"badge.foreground": "#100F0F",
"activityBarBadge.foreground": "#100F0F"
},
"tokenColors": [
{
"name": "plain",
"scope": ["source", "support.type.property-name.css"],
"settings": {
"foreground": "#CECDC3"
}
},
{
"name": "classes",
"scope": ["entity.name.type.class"],
"settings": {
"foreground": "#DA702C"
}
},
{
"name": "interfaces",
"scope": ["entity.name.type.interface", "entity.name.type"],
"settings": {
"foreground": "#D0A215"
}
},
{
"name": "structs",
"scope": ["entity.name.type.struct"],
"settings": {
"foreground": "#DA702C"
}
},
{
"name": "enums",
"scope": ["entity.name.type.enum"],
"settings": {
"foreground": "#DA702C"
}
},
{
"name": "keys",
"scope": ["meta.object-literal.key", "support.type.property-name"],
"settings": {
"foreground": "#DA702C"
}
},
{
"name": "methods",
"scope": ["entity.name.function.method", "meta.function.method"],
"settings": {
"foreground": "#879A39"
}
},
{
"name": "functions",
"scope": [
"entity.name.function",
"support.function",
"meta.function-call.generic"
],
"settings": {
"foreground": "#DA702C",
"fontStyle": "bold"
}
},
{
"name": "variables",
"scope": ["variable", "meta.variable", "variable.other.object.property"],
"settings": {
"foreground": "#CECDC3"
}
},
{
"name": "variablesOther",
"scope": ["variable.other.object", "variable.other.readwrite.alias"],
"settings": {
"foreground": "#879A39"
}
},
{
"name": "globalVariables",
"scope": ["variable.other.global", "variable.language.this"],
"settings": {
"foreground": "#CE5D97"
}
},
{
"name": "localVariables",
"scope": ["variable.other.local"],
"settings": {
"foreground": "#282726"
}
},
{
"name": "parameters",
"scope": ["variable.parameter", "meta.parameter"],
"settings": {
"foreground": "#CECDC3"
}
},
{
"name": "properties",
"scope": ["variable.other.property", "meta.property"],
"settings": {
"foreground": "#4385BE"
}
},
{
"name": "strings",
"scope": [
"string",
"string.other.link",
"markup.inline.raw.string.markdown"
],
"settings": {
"foreground": "#3AA99F"
}
},
{
"name": "stringEscapeSequences",
"scope": ["constant.character.escape", "constant.other.placeholder"],
"settings": {
"foreground": "#CECDC3"
}
},
{
"name": "keywords",
"scope": ["keyword"],
"settings": {
"foreground": "#879A39"
}
},
{
"name": "keywordsControl",
"scope": [
"keyword.control.import",
"keyword.control.from",
"keyword.import"
],
"settings": {
"foreground": "#D14D41"
}
},
{
"name": "storageModifiers",
"scope": ["storage.modifier", "keyword.modifier", "storage.type"],
"settings": {
"foreground": "#4385BE"
}
},
{
"name": "comments",
"scope": ["comment", "punctuation.definition.comment"],
"settings": {
"foreground": "#878580"
}
},
{
"name": "docComments",
"scope": ["comment.documentation", "comment.line.documentation"],
"settings": {
"foreground": "#575653"
}
},
{
"name": "numbers",
"scope": ["constant.numeric"],
"settings": {
"foreground": "#8B7EC8"
}
},
{
"name": "booleans",
"scope": ["constant.language.boolean", "constant.language.json"],
"settings": {
"foreground": "#D0A215"
}
},
{
"name": "operators",
"scope": ["keyword.operator"],
"settings": {
"foreground": "#D14D41"
}
},
{
"name": "macros",
"scope": ["entity.name.function.preprocessor", "meta.preprocessor"],
"settings": {
"foreground": "#4385BE"
}
},
{
"name": "preprocessor",
"scope": ["meta.preprocessor"],
"settings": {
"foreground": "#CE5D97"
}
},
{
"name": "urls",
"scope": ["markup.underline.link"],
"settings": {
"foreground": "#4385BE"
}
},
{
"name": "tags",
"scope": ["entity.name.tag"],
"settings": {
"foreground": "#4385BE"
}
},
{
"name": "jsxTags",
"scope": ["support.class.component"],
"settings": {
"foreground": "#CE5D97"
}
},
{
"name": "attributes",
"scope": ["entity.other.attribute-name", "meta.attribute"],
"settings": {
"foreground": "#D0A215"
}
},
{
"name": "types",
"scope": ["support.type"],
"settings": {
"foreground": "#D0A215"
}
},
{
"name": "constants",
"scope": ["variable.other.constant", "variable.readonly"],
"settings": {
"foreground": "#CECDC3"
}
},
{
"name": "labels",
"scope": ["entity.name.label", "punctuation.definition.label"],
"settings": {
"foreground": "#CE5D97"
}
},
{
"name": "namespaces",
"scope": [
"entity.name.namespace",
"storage.modifier.namespace",
"markup.bold.markdown"
],
"settings": {
"foreground": "#D0A215"
}
},
{
"name": "modules",
"scope": ["entity.name.module", "storage.modifier.module"],
"settings": {
"foreground": "#D14D41"
}
},
{
"name": "typeParameters",
"scope": ["variable.type.parameter", "variable.parameter.type"],
"settings": {
"foreground": "#DA702C"
}
},
{
"name": "exceptions",
"scope": ["keyword.control.exception", "keyword.control.trycatch"],
"settings": {
"foreground": "#CE5D97"
}
},
{
"name": "decorators",
"scope": [
"meta.decorator",
"punctuation.decorator",
"entity.name.function.decorator"
],
"settings": {
"foreground": "#D0A215"
}
},
{
"name": "calls",
"scope": ["variable.function"],
"settings": {
"foreground": "#CECDC3"
}
},
{
"name": "punctuation",
"scope": [
"punctuation",
"punctuation.terminator",
"punctuation.definition.tag",
"punctuation.separator",
"punctuation.definition.string",
"punctuation.section.block"
],
"settings": {
"foreground": "#878580"
}
},
{
"name": "yellow",
"scope": [
"storage.type.numeric.go",
"storage.type.byte.go",
"storage.type.boolean.go",
"storage.type.string.go",
"storage.type.uintptr.go",
"storage.type.error.go",
"storage.type.rune.go",
"constant.language.go",
"support.class.dart",
"keyword.other.documentation",
"storage.modifier.import.java",
"punctuation.definition.list.begin.markdown",
"punctuation.definition.quote.begin.markdown",
"meta.separator.markdown",
"entity.name.section.markdown"
],
"settings": {
"foreground": "#D0A215"
}
},
{
"name": "green",
"scope": [],
"settings": {
"foreground": "#879A39"
}
},
{
"name": "cyan",
"scope": [
"markup.italic.markdown",
"support.type.python",
"variable.legacy.builtin.python",
"support.constant.property-value.css",
"storage.modifier.attribute.swift"
],
"settings": {
"foreground": "#3AA99F"
}
},
{
"name": "blue",
"scope": [],
"settings": {
"foreground": "#4385BE"
}
},
{
"name": "purple",
"scope": ["keyword.channel.go", "keyword.other.platform.os.swift"],
"settings": {
"foreground": "#8B7EC8"
}
},
{
"name": "magenta",
"scope": ["punctuation.definition.heading.markdown"],
"settings": {
"foreground": "#CE5D97"
}
},
{
"name": "red",
"scope": [],
"settings": {
"foreground": "#D14D41"
}
},
{
"name": "orange",
"scope": [],
"settings": {
"foreground": "#DA702C"
}
}
]
}
packages/ui/src/lib/shiki/themes/flexoki-light.json
-547
View File
@@ -1,547 +0,0 @@
{
"name": "Flexoki",
"type": "light",
"colors": {
"editor.background": "#FFFCF0",
"editor.foreground": "#100F0F",
"editor.hoverHighlightBackground": "#DAD8CE",
"editor.lineHighlightBackground": "#F2F0E5",
"editor.selectionBackground": "#100F0F44",
"editor.selectionHighlightBackground": "#100F0F44",
"editor.findMatchBackground": "#D0A215",
"editor.findMatchHighlightBackground": "#D0A215cc",
"editor.findRangeHighlightBackground": "#F2F0E5",
"editor.inactiveSelectionBackground": "#E6E4D9",
"editor.lineHighlightBorder": "#E6E4D9",
"editor.rangeHighlightBackground": "#CECDC3",
"notifications.background": "#E6E4D9",
"editorInlayHint.typeBackground": "#DAD8CE",
"editorInlayHint.typeForeground": "#100F0F",
"editorWhitespace.foreground": "#CECDC3",
"editorIndentGuide.background1": "#DAD8CE",
"editorHoverWidget.background": "#E6E4D9",
"editorLineNumber.activeForeground": "#100F0F",
"editorLineNumber.foreground": "#CECDC3",
"editorGutter.background": "#FFFCF0",
"editorGutter.modifiedBackground": "#24837B",
"editorGutter.addedBackground": "#66800B",
"editorGutter.deletedBackground": "#AF3029",
"editorBracketMatch.background": "#E6E4D9",
"editorBracketMatch.border": "#DAD8CE",
"editorError.foreground": "#AF3029",
"editorWarning.foreground": "#BC5215",
"editorInfo.foreground": "#205EA6",
"diffEditor.insertedTextBackground": "#879A3999",
"diffEditor.removedTextBackground": "#D14D4199",
"editorGroupHeader.tabsBackground": "#FFFCF0",
"editorGroup.border": "#DAD8CE",
"tab.activeBackground": "#FFFCF0",
"tab.inactiveBackground": "#F2F0E5",
"tab.inactiveForeground": "#6F6E69",
"tab.activeForeground": "#100F0F",
"tab.hoverBackground": "#DAD8CE",
"tab.unfocusedHoverBackground": "#DAD8CE",
"tab.border": "#DAD8CE",
"tab.activeModifiedBorder": "#AD8301",
"tab.inactiveModifiedBorder": "#205EA6",
"tab.unfocusedActiveModifiedBorder": "#D0A215",
"tab.unfocusedInactiveModifiedBorder": "#4385BE",
"editorWidget.background": "#F2F0E5",
"editorWidget.border": "#DAD8CE",
"editorSuggestWidget.background": "#FFFCF0",
"editorSuggestWidget.border": "#DAD8CE",
"editorSuggestWidget.foreground": "#100F0F",
"editorSuggestWidget.highlightForeground": "#6F6E69",
"editorSuggestWidget.selectedBackground": "#DAD8CE",
"peekView.border": "#DAD8CE",
"peekViewEditor.background": "#FFFCF0",
"peekViewEditor.matchHighlightBackground": "#CECDC3",
"peekViewResult.background": "#F2F0E5",
"peekViewResult.fileForeground": "#100F0F",
"peekViewResult.lineForeground": "#6F6E69",
"peekViewResult.matchHighlightBackground": "#CECDC3",
"peekViewResult.selectionBackground": "#E6E4D9",
"peekViewResult.selectionForeground": "#B7B5AC",
"peekViewTitle.background": "#DAD8CE",
"peekViewTitleDescription.foreground": "#6F6E69",
"peekViewTitleLabel.foreground": "#100F0F",
"merge.currentHeaderBackground": "#66800B",
"merge.currentContentBackground": "#879A39",
"merge.incomingHeaderBackground": "#24837B",
"merge.incomingContentBackground": "#3AA99F",
"merge.border": "#DAD8CE",
"merge.commonContentBackground": "#CECDC3",
"merge.commonHeaderBackground": "#DAD8CE",
"panel.background": "#FFFCF0",
"panel.border": "#DAD8CE",
"panelTitle.activeBorder": "#CECDC3",
"panelTitle.activeForeground": "#100F0F",
"panelTitle.inactiveForeground": "#6F6E69",
"statusBar.background": "#FFFCF0",
"statusBar.foreground": "#100F0F",
"statusBar.border": "#DAD8CE",
"statusBar.debuggingBackground": "#AF3029",
"statusBar.debuggingForeground": "#100F0F",
"statusBar.noFolderBackground": "#CECDC3",
"statusBar.noFolderForeground": "#B7B5AC",
"titleBar.activeBackground": "#FFFCF0",
"titleBar.activeForeground": "#100F0F",
"titleBar.inactiveBackground": "#F2F0E5",
"titleBar.inactiveForeground": "#6F6E69",
"titleBar.border": "#DAD8CE",
"menu.foreground": "#100F0F",
"menu.background": "#FFFCF0",
"menu.selectionForeground": "#100F0F",
"menu.selectionBackground": "#DAD8CE",
"menu.border": "#DAD8CE",
"editorInlayHint.foreground": "#6F6E69",
"editorInlayHint.background": "#DAD8CE",
"terminal.foreground": "#100F0F",
"terminal.background": "#FFFCF0",
"terminalCursor.foreground": "#100F0F",
"terminalCursor.background": "#FFFCF0",
"terminal.ansiRed": "#AF3029",
"terminal.ansiGreen": "#66800B",
"terminal.ansiYellow": "#AD8301",
"terminal.ansiBlue": "#205EA6",
"terminal.ansiMagenta": "#24837B",
"terminal.ansiCyan": "#24837B",
"activityBar.background": "#FFFCF0",
"activityBar.foreground": "#100F0F",
"activityBar.inactiveForeground": "#6F6E69",
"activityBar.activeBorder": "#100F0F",
"activityBar.border": "#DAD8CE",
"sideBar.background": "#FFFCF0",
"sideBar.foreground": "#100F0F",
"sideBar.border": "#DAD8CE",
"sideBarTitle.foreground": "#100F0F",
"sideBarSectionHeader.background": "#F2F0E5",
"sideBarSectionHeader.foreground": "#100F0F",
"sideBarSectionHeader.border": "#DAD8CE",
"sideBar.activeBackground": "#CECDC3",
"sideBar.activeForeground": "#100F0F",
"sideBar.hoverBackground": "#DAD8CE",
"sideBar.hoverForeground": "#6F6E69",
"sideBar.folderIcon.foreground": "#66800B",
"sideBar.fileIcon.foreground": "#205EA6",
"list.warningForeground": "#BC5215",
"list.errorForeground": "#AF3029",
"list.inactiveSelectionBackground": "#DAD8CE",
"list.activeSelectionBackground": "#CECDC3",
"list.inactiveSelectionForeground": "#100F0F",
"list.activeSelectionForeground": "#100F0F",
"list.hoverForeground": "#100F0F",
"list.hoverBackground": "#DAD8CE",
"input.background": "#F2F0E5",
"input.foreground": "#100F0F",
"input.border": "#DAD8CE",
"input.placeholderForeground": "#6F6E69",
"inputOption.activeBorder": "#DAD8CE",
"inputOption.activeBackground": "#E6E4D9",
"inputOption.activeForeground": "#100F0F",
"inputValidation.infoBackground": "#24837B",
"inputValidation.infoBorder": "#3AA99F",
"inputValidation.warningBackground": "#BC5215",
"inputValidation.warningBorder": "#DA702C",
"inputValidation.errorBackground": "#AF3029",
"inputValidation.errorBorder": "#D14D41",
"dropdown.background": "#F2F0E5",
"dropdown.foreground": "#100F0F",
"dropdown.border": "#DAD8CE",
"dropdown.listBackground": "#FFFCF0",
"badge.background": "#24837B",
"activityBarBadge.background": "#24837B",
"button.background": "#24837B",
"button.foreground": "#FFFCF0",
"badge.foreground": "#FFFCF0",
"activityBarBadge.foreground": "#FFFCF0"
},
"tokenColors": [
{
"name": "plain",
"scope": ["source", "support.type.property-name.css"],
"settings": {
"foreground": "#100F0F"
}
},
{
"name": "classes",
"scope": ["entity.name.type.class"],
"settings": {
"foreground": "#BC5215"
}
},
{
"name": "interfaces",
"scope": ["entity.name.type.interface", "entity.name.type"],
"settings": {
"foreground": "#AD8301"
}
},
{
"name": "structs",
"scope": ["entity.name.type.struct"],
"settings": {
"foreground": "#BC5215"
}
},
{
"name": "enums",
"scope": ["entity.name.type.enum"],
"settings": {
"foreground": "#BC5215"
}
},
{
"name": "keys",
"scope": ["meta.object-literal.key", "support.type.property-name"],
"settings": {
"foreground": "#BC5215"
}
},
{
"name": "methods",
"scope": ["entity.name.function.method", "meta.function.method"],
"settings": {
"foreground": "#66800B"
}
},
{
"name": "functions",
"scope": [
"entity.name.function",
"support.function",
"meta.function-call.generic"
],
"settings": {
"foreground": "#BC5215",
"fontStyle": "bold"
}
},
{
"name": "variables",
"scope": ["variable", "meta.variable", "variable.other.object.property"],
"settings": {
"foreground": "#100F0F"
}
},
{
"name": "variablesOther",
"scope": ["variable.other.object", "variable.other.readwrite.alias"],
"settings": {
"foreground": "#66800B"
}
},
{
"name": "globalVariables",
"scope": ["variable.other.global", "variable.language.this"],
"settings": {
"foreground": "#A02F6F"
}
},
{
"name": "localVariables",
"scope": ["variable.other.local"],
"settings": {
"foreground": "#E6E4D9"
}
},
{
"name": "parameters",
"scope": ["variable.parameter", "meta.parameter"],
"settings": {
"foreground": "#100F0F"
}
},
{
"name": "properties",
"scope": ["variable.other.property", "meta.property"],
"settings": {
"foreground": "#205EA6"
}
},
{
"name": "strings",
"scope": [
"string",
"string.other.link",
"markup.inline.raw.string.markdown"
],
"settings": {
"foreground": "#24837B"
}
},
{
"name": "stringEscapeSequences",
"scope": ["constant.character.escape", "constant.other.placeholder"],
"settings": {
"foreground": "#100F0F"
}
},
{
"name": "keywords",
"scope": ["keyword"],
"settings": {
"foreground": "#66800B"
}
},
{
"name": "keywordsControl",
"scope": [
"keyword.control.import",
"keyword.control.from",
"keyword.import"
],
"settings": {
"foreground": "#AF3029"
}
},
{
"name": "storageModifiers",
"scope": ["storage.modifier", "keyword.modifier", "storage.type"],
"settings": {
"foreground": "#205EA6"
}
},
{
"name": "comments",
"scope": ["comment", "punctuation.definition.comment"],
"settings": {
"foreground": "#6F6E69"
}
},
{
"name": "docComments",
"scope": ["comment.documentation", "comment.line.documentation"],
"settings": {
"foreground": "#B7B5AC"
}
},
{
"name": "numbers",
"scope": ["constant.numeric"],
"settings": {
"foreground": "#5E409D"
}
},
{
"name": "booleans",
"scope": ["constant.language.boolean", "constant.language.json"],
"settings": {
"foreground": "#AD8301"
}
},
{
"name": "operators",
"scope": ["keyword.operator"],
"settings": {
"foreground": "#AF3029"
}
},
{
"name": "macros",
"scope": ["entity.name.function.preprocessor", "meta.preprocessor"],
"settings": {
"foreground": "#205EA6"
}
},
{
"name": "preprocessor",
"scope": ["meta.preprocessor"],
"settings": {
"foreground": "#A02F6F"
}
},
{
"name": "urls",
"scope": ["markup.underline.link"],
"settings": {
"foreground": "#205EA6"
}
},
{
"name": "tags",
"scope": ["entity.name.tag"],
"settings": {
"foreground": "#205EA6"
}
},
{
"name": "jsxTags",
"scope": ["support.class.component"],
"settings": {
"foreground": "#A02F6F"
}
},
{
"name": "attributes",
"scope": ["entity.other.attribute-name", "meta.attribute"],
"settings": {
"foreground": "#AD8301"
}
},
{
"name": "types",
"scope": ["support.type"],
"settings": {
"foreground": "#AD8301"
}
},
{
"name": "constants",
"scope": ["variable.other.constant", "variable.readonly"],
"settings": {
"foreground": "#100F0F"
}
},
{
"name": "labels",
"scope": ["entity.name.label", "punctuation.definition.label"],
"settings": {
"foreground": "#A02F6F"
}
},
{
"name": "namespaces",
"scope": [
"entity.name.namespace",
"storage.modifier.namespace",
"markup.bold.markdown"
],
"settings": {
"foreground": "#AD8301"
}
},
{
"name": "modules",
"scope": ["entity.name.module", "storage.modifier.module"],
"settings": {
"foreground": "#AF3029"
}
},
{
"name": "typeParameters",
"scope": ["variable.type.parameter", "variable.parameter.type"],
"settings": {
"foreground": "#BC5215"
}
},
{
"name": "exceptions",
"scope": ["keyword.control.exception", "keyword.control.trycatch"],
"settings": {
"foreground": "#A02F6F"
}
},
{
"name": "decorators",
"scope": [
"meta.decorator",
"punctuation.decorator",
"entity.name.function.decorator"
],
"settings": {
"foreground": "#AD8301"
}
},
{
"name": "calls",
"scope": ["variable.function"],
"settings": {
"foreground": "#100F0F"
}
},
{
"name": "punctuation",
"scope": [
"punctuation",
"punctuation.terminator",
"punctuation.definition.tag",
"punctuation.separator",
"punctuation.definition.string",
"punctuation.section.block"
],
"settings": {
"foreground": "#6F6E69"
}
},
{
"name": "yellow",
"scope": [
"storage.type.numeric.go",
"storage.type.byte.go",
"storage.type.boolean.go",
"storage.type.string.go",
"storage.type.uintptr.go",
"storage.type.error.go",
"storage.type.rune.go",
"constant.language.go",
"support.class.dart",
"keyword.other.documentation",
"storage.modifier.import.java",
"punctuation.definition.list.begin.markdown",
"punctuation.definition.quote.begin.markdown",
"meta.separator.markdown",
"entity.name.section.markdown"
],
"settings": {
"foreground": "#AD8301"
}
},
{
"name": "green",
"scope": [],
"settings": {
"foreground": "#66800B"
}
},
{
"name": "cyan",
"scope": [
"markup.italic.markdown",
"support.type.python",
"variable.legacy.builtin.python",
"support.constant.property-value.css",
"storage.modifier.attribute.swift"
],
"settings": {
"foreground": "#24837B"
}
},
{
"name": "blue",
"scope": [],
"settings": {
"foreground": "#205EA6"
}
},
{
"name": "purple",
"scope": ["keyword.channel.go", "keyword.other.platform.os.swift"],
"settings": {
"foreground": "#5E409D"
}
},
{
"name": "magenta",
"scope": ["punctuation.definition.heading.markdown"],
"settings": {
"foreground": "#A02F6F"
}
},
{
"name": "red",
"scope": [],
"settings": {
"foreground": "#AF3029"
}
},
{
"name": "orange",
"scope": [],
"settings": {
"foreground": "#BC5215"
}
}
]
}
packages/ui/src/lib/shiki/vscodeTextMateTheme.ts
+14
View File
@@ -0,0 +1,14 @@
export type VSCodeTokenColorRule = {
name?: string;
scope?: string | string[];
settings: Record<string, string | undefined>;
};
export type VSCodeTextMateTheme = {
name: string;
type: 'dark' | 'light';
colors?: Record<string, string>;
tokenColors?: VSCodeTokenColorRule[];
semanticHighlighting?: boolean;
semanticTokenColors?: Record<string, string>;
};
packages/ui/src/lib/theme/themes/aura-dark.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "aura-dark",
"name": "Aura",
"description": "Aura",
"version": "1.0.0",
"variant": "dark",
"tags": [ "dark", "palette" ]
},
"colors": {
"primary": {
"base": "#A277FF",
"hover": "#8D68DD",
"active": "#B08BFF",
"foreground": "#15141B",
"muted": "#A277FF80",
"emphasis": "#8D68DD"
},
"surface": {
"background": "#15141B",
"foreground": "#EDECEE",
"muted": "#1A1921",
"mutedForeground": "#9c9393",
"elevated": "#201e2b",
"elevatedForeground": "#EDECEE",
"overlay": "#FFFFFF20",
"subtle": "#25232f"
},
"interactive": {
"border": "#2D2B38",
"borderHover": "#47415a",
"borderFocus": "#4E496C",
"selection": "#95abe02d",
"selectionForeground": "#FFFFFF",
"focus": "#A277FF",
"focusRing": "#A277FF40",
"cursor": "#FFFFFF",
"hover": "#7887ac2d",
"active": "#95abe02d"
},
"status": {
"error": "#FF6767",
"errorForeground": "#15141B",
"errorBackground": "#FF676720",
"errorBorder": "#FF676750",
"warning": "#FFCA85",
"warningForeground": "#15141B",
"warningBackground": "#FFCA8520",
"warningBorder": "#FFCA8550",
"success": "#61FFCA",
"successForeground": "#15141B",
"successBackground": "#61FFCA20",
"successBorder": "#61FFCA50",
"info": "#82E2FF",
"infoForeground": "#15141B",
"infoBackground": "#82E2FF20",
"infoBorder": "#82E2FF50"
},
"syntax": {
"base": {
"background": "#1A1921",
"foreground": "#EDECEE",
"comment": "#6D6D6D",
"keyword": "#A277FF",
"string": "#61FFCA",
"number": "#FF6767",
"function": "#A277FF",
"variable": "#EDECEE",
"type": "#FFCA85",
"operator": "#FF6767"
},
"tokens": {
"boolean": "#FFCA85",
"class": "#A277FF",
"className": "#A277FF",
"commentDoc": "#606061",
"constant": "#82E2FF",
"decorator": "#FFCA85",
"enum": "#A277FF",
"exception": "#FF6767",
"functionCall": "#A277FF",
"interface": "#FFCA85",
"jsxTag": "#A277FF",
"key": "#A277FF",
"keywordImport": "#FF6767",
"label": "#FF6767",
"macro": "#82E2FF",
"method": "#61FFCA",
"module": "#FF6767",
"namespace": "#FFCA85",
"parameter": "#EDECEE",
"preprocessor": "#FF6767",
"punctuation": "#6D6D6D",
"regex": "#61FFCA",
"storageModifier": "#82E2FF",
"stringEscape": "#FFFFFF",
"struct": "#A277FF",
"tag": "#A277FF",
"tagAttribute": "#FFCA85",
"tagAttributeValue": "#61FFCA",
"typeParameter": "#FFCA85",
"url": "#A277FF",
"variableGlobal": "#A277FF",
"variableLocal": "#121118",
"variableOther": "#61FFCA",
"variableProperty": "#82E2FF"
},
"highlights": {
"diffAdded": "#61FFCA",
"diffAddedBackground": "#162620",
"diffModified": "#82E2FF",
"diffModifiedBackground": "#1E1D2A",
"diffRemoved": "#FF6767",
"diffRemovedBackground": "#26161A",
"lineNumber": "#3E3A56",
"lineNumberActive": "#FFFFFF"
}
},
"markdown": {
"heading1": "#e7d7f4",
"heading2": "#e7e0ee",
"heading3": "#ece7f0",
"heading4": "#EDECEE",
"link": "#A277FF",
"linkHover": "#F694FF",
"inlineCode": "#61FFCA",
"inlineCodeBackground": "#1A1921",
"blockquote": "#6D6D6D",
"blockquoteBorder": "#2D2B38",
"listMarker": "#A277FF99"
},
"chat": {
"userMessage": "#EDECEE",
"userMessageBackground": "#393647",
"assistantMessage": "#EDECEE",
"assistantMessageBackground": "#15141B",
"timestamp": "#6D6D6D",
"divider": "#2D2B38"
},
"tools": {
"background": "#1A192180",
"border": "#43415480",
"headerHover": "#0F0E14",
"icon": "#6D6D6D",
"title": "#EDECEE",
"description": "#6D6D6D",
"edit": {
"added": "#61FFCA",
"addedBackground": "#61FFCA25",
"removed": "#FF6767",
"removedBackground": "#FF676725",
"lineNumber": "#3E3A56"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/aura-light.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "aura-light",
"name": "Aura",
"description": "Aura",
"version": "1.0.0",
"variant": "light",
"tags": [ "light", "palette" ]
},
"colors": {
"primary": {
"base": "#A277FF",
"hover": "#B38FFF",
"active": "#8D68DD",
"foreground": "#F5F0FF",
"muted": "#A277FF80",
"emphasis": "#B38FFF"
},
"surface": {
"background": "#F5F0FF",
"foreground": "#2D2640",
"muted": "#EFE8FC",
"mutedForeground": "#5C5270",
"elevated": "#f1ebfb",
"elevatedForeground": "#2D2640",
"overlay": "#15101F20",
"subtle": "#EFE8FC"
},
"interactive": {
"border": "#E0D6F2",
"borderHover": "#D5C9EB",
"borderFocus": "#A593C8",
"selection": "#bdb2d74c",
"selectionForeground": "#15101F",
"focus": "#A277FF",
"focusRing": "#A277FF40",
"cursor": "#15101F",
"hover": "#bdb2d72d",
"active": "#bdb2d74c"
},
"status": {
"error": "#D94F4F",
"errorForeground": "#F5F0FF",
"errorBackground": "#D94F4F20",
"errorBorder": "#D94F4F50",
"warning": "#D9A24A",
"warningForeground": "#F5F0FF",
"warningBackground": "#D9A24A20",
"warningBorder": "#D9A24A50",
"success": "#40BF7A",
"successForeground": "#F5F0FF",
"successBackground": "#40BF7A20",
"successBorder": "#40BF7A50",
"info": "#5BB8D9",
"infoForeground": "#F5F0FF",
"infoBackground": "#5BB8D920",
"infoBorder": "#5BB8D950"
},
"syntax": {
"base": {
"background": "#EFE8FC",
"foreground": "#2D2640",
"comment": "#5C5270",
"keyword": "#A277FF",
"string": "#40BF7A",
"number": "#D94F4F",
"function": "#A277FF",
"variable": "#2D2640",
"type": "#D9A24A",
"operator": "#D94F4F"
},
"tokens": {
"boolean": "#D9A24A",
"class": "#A277FF",
"className": "#A277FF",
"commentDoc": "#A9A1B8",
"constant": "#5BB8D9",
"decorator": "#D9A24A",
"enum": "#A277FF",
"exception": "#D94F4F",
"functionCall": "#A277FF",
"interface": "#D9A24A",
"jsxTag": "#A277FF",
"key": "#A277FF",
"keywordImport": "#D94F4F",
"label": "#D94F4F",
"macro": "#5BB8D9",
"method": "#40BF7A",
"module": "#D94F4F",
"namespace": "#D9A24A",
"parameter": "#2D2640",
"preprocessor": "#D94F4F",
"punctuation": "#5C5270",
"regex": "#40BF7A",
"storageModifier": "#5BB8D9",
"stringEscape": "#15101F",
"struct": "#A277FF",
"tag": "#A277FF",
"tagAttribute": "#D9A24A",
"tagAttributeValue": "#40BF7A",
"typeParameter": "#D9A24A",
"url": "#A277FF",
"variableGlobal": "#A277FF",
"variableLocal": "#FAF7FF",
"variableOther": "#40BF7A",
"variableProperty": "#5BB8D9"
},
"highlights": {
"diffAdded": "#40BF7A",
"diffAddedBackground": "#E8F5ED",
"diffModified": "#5BB8D9",
"diffModifiedBackground": "#E8E4F5",
"diffRemoved": "#D94F4F",
"diffRemovedBackground": "#FAE8E8",
"lineNumber": "#C0B3DC",
"lineNumberActive": "#15101F"
}
},
"markdown": {
"heading1": "#A277FF",
"heading2": "#A277FF",
"heading3": "#D9A24A",
"heading4": "#2D2640",
"link": "#A277FF",
"linkHover": "#C17AC8",
"inlineCode": "#40BF7A",
"inlineCodeBackground": "#EFE8FC",
"blockquote": "#6D6D6D",
"blockquoteBorder": "#E0D6F2",
"listMarker": "#A277FF99"
},
"chat": {
"userMessage": "#2D2640",
"userMessageBackground": "#EFE8FC",
"assistantMessage": "#2D2640",
"assistantMessageBackground": "#F5F0FF",
"timestamp": "#5C5270",
"divider": "#E0D6F2"
},
"tools": {
"background": "#EFE8FC80",
"border": "#bdb5cd80",
"headerHover": "#FDFCFF",
"icon": "#5C5270",
"title": "#2D2640",
"description": "#5C5270",
"edit": {
"added": "#40BF7A",
"addedBackground": "#40BF7A25",
"removed": "#D94F4F",
"removedBackground": "#D94F4F25",
"lineNumber": "#C0B3DC"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/ayu-dark.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "ayu-dark",
"name": "Ayu",
"description": "Ayu",
"version": "1.0.0",
"variant": "dark",
"tags": [ "dark", "palette" ]
},
"colors": {
"primary": {
"base": "#3FB7E3",
"hover": "#389FC5",
"active": "#5BC1E7",
"foreground": "#0F1419",
"muted": "#3FB7E380",
"emphasis": "#389FC5"
},
"surface": {
"background": "#0F1419",
"foreground": "#D6DAE0",
"muted": "#18222C",
"mutedForeground": "#A3ADBA",
"elevated": "#17202a",
"elevatedForeground": "#D6DAE0",
"overlay": "#FBFBFD20",
"subtle": "#1e252d"
},
"interactive": {
"border": "#2B3440",
"borderHover": "#323C49",
"borderFocus": "#56647C",
"selection": "#c7c7df1d",
"selectionForeground": "#FBFBFD",
"focus": "#3FB7E3",
"focusRing": "#3FB7E340",
"cursor": "#FBFBFD",
"hover": "#b6b6cc1d",
"active": "#b8b8ce1d"
},
"status": {
"error": "#F58572",
"errorForeground": "#0F1419",
"errorBackground": "#F5857220",
"errorBorder": "#F5857250",
"warning": "#E4A75C",
"warningForeground": "#0F1419",
"warningBackground": "#E4A75C20",
"warningBorder": "#E4A75C50",
"success": "#78D05C",
"successForeground": "#0F1419",
"successBackground": "#78D05C20",
"successBorder": "#78D05C50",
"info": "#66C6F1",
"infoForeground": "#0F1419",
"infoBackground": "#66C6F120",
"infoBorder": "#66C6F150"
},
"syntax": {
"base": {
"background": "#18222C",
"foreground": "#D6DAE0",
"comment": "#A3ADBA",
"keyword": "#3FB7E3",
"string": "#B1C74A",
"number": "#F2856F",
"function": "#3FB7E3",
"variable": "#D6DAE0",
"type": "#E4A75C",
"operator": "#F2856F"
},
"tokens": {
"boolean": "#E4A75C",
"class": "#3FB7E3",
"className": "#3FB7E3",
"commentDoc": "#8D96A2",
"constant": "#66C6F1",
"decorator": "#E4A75C",
"enum": "#3FB7E3",
"exception": "#F2856F",
"functionCall": "#3FB7E3",
"interface": "#E4A75C",
"jsxTag": "#3FB7E3",
"key": "#3FB7E3",
"keywordImport": "#F2856F",
"label": "#F2856F",
"macro": "#66C6F1",
"method": "#78D05C",
"module": "#F2856F",
"namespace": "#E4A75C",
"parameter": "#D6DAE0",
"preprocessor": "#F2856F",
"punctuation": "#A3ADBA",
"regex": "#B1C74A",
"storageModifier": "#66C6F1",
"stringEscape": "#FBFBFD",
"struct": "#3FB7E3",
"tag": "#3FB7E3",
"tagAttribute": "#E4A75C",
"tagAttributeValue": "#B1C74A",
"typeParameter": "#E4A75C",
"url": "#66C6F1",
"variableGlobal": "#3FB7E3",
"variableLocal": "#0B1015",
"variableOther": "#78D05C",
"variableProperty": "#66C6F1"
},
"highlights": {
"diffAdded": "#78D05C",
"diffAddedBackground": "#132F27",
"diffModified": "#66C6F1",
"diffModifiedBackground": "#1B2632",
"diffRemoved": "#F58572",
"diffRemovedBackground": "#361D20",
"lineNumber": "#415063",
"lineNumberActive": "#FBFBFD"
}
},
"markdown": {
"heading1": "#D6DAE0",
"heading2": "#D6DAE0",
"heading3": "#D6DAE0",
"heading4": "#D6DAE0",
"link": "#66C6F1",
"linkHover": "#3FB7E3",
"inlineCode": "#B1C74A",
"inlineCodeBackground": "#161d23",
"blockquote": "#E4A75C",
"blockquoteBorder": "#2B3440",
"listMarker": "#3FB7E399"
},
"chat": {
"userMessage": "#D6DAE0",
"userMessageBackground": "#1d2935",
"assistantMessage": "#D6DAE0",
"assistantMessageBackground": "#0F1419",
"timestamp": "#A3ADBA",
"divider": "#2B3440"
},
"tools": {
"background": "#18222C80",
"border": "#414e5f80",
"headerHover": "#080C10",
"icon": "#A3ADBA",
"title": "#D6DAE0",
"description": "#A3ADBA",
"edit": {
"added": "#78D05C",
"addedBackground": "#78D05C25",
"removed": "#F58572",
"removedBackground": "#F5857225",
"lineNumber": "#415063"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/ayu-light.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "ayu-light",
"name": "Ayu",
"description": "Ayu",
"version": "1.0.0",
"variant": "light",
"tags": [ "light", "palette" ]
},
"colors": {
"primary": {
"base": "#4AA8C8",
"hover": "#6EB8D1",
"active": "#4394B0",
"foreground": "#FDFAF4",
"muted": "#4AA8C880",
"emphasis": "#6EB8D1"
},
"surface": {
"background": "#FDFAF4",
"foreground": "#394049",
"muted": "#f7f3eb",
"mutedForeground": "#6a727c",
"elevated": "#faf6ed",
"elevatedForeground": "#4F5964",
"overlay": "#1B232B20",
"subtle": "#FFF7E5"
},
"interactive": {
"border": "#E6DDCF",
"borderHover": "#DCD3C5",
"borderFocus": "#B09F8F",
"selection": "#9fb2c43e",
"selectionForeground": "#171e25",
"focus": "#4AA8C8",
"focusRing": "#4AA8C840",
"cursor": "#1B232B",
"hover": "#9fb2c42c",
"active": "#9fb2c43e"
},
"status": {
"error": "#E6656A",
"errorForeground": "#FDFAF4",
"errorBackground": "#E6656A20",
"errorBorder": "#E6656A50",
"warning": "#EA9F41",
"warningForeground": "#FDFAF4",
"warningBackground": "#EA9F4120",
"warningBorder": "#EA9F4150",
"success": "#5FB978",
"successForeground": "#FDFAF4",
"successBackground": "#5FB97820",
"successBorder": "#5FB97850",
"info": "#2F9BCE",
"infoForeground": "#FDFAF4",
"infoBackground": "#2F9BCE20",
"infoBorder": "#2F9BCE50"
},
"syntax": {
"base": {
"background": "#FCF9F3",
"foreground": "#4F5964",
"comment": "#77818D",
"keyword": "#4AA8C8",
"string": "#7FAD00",
"number": "#EF7D71",
"function": "#4AA8C8",
"variable": "#4F5964",
"type": "#ED982E",
"operator": "#EF7D71"
},
"tokens": {
"boolean": "#ED982E",
"class": "#4AA8C8",
"className": "#4AA8C8",
"commentDoc": "#BABEC1",
"constant": "#2F9BCE",
"decorator": "#ED982E",
"enum": "#4AA8C8",
"exception": "#EF7D71",
"functionCall": "#4AA8C8",
"interface": "#ED982E",
"jsxTag": "#4AA8C8",
"key": "#4AA8C8",
"keywordImport": "#EF7D71",
"label": "#EF7D71",
"macro": "#2F9BCE",
"method": "#5FB978",
"module": "#EF7D71",
"namespace": "#ED982E",
"parameter": "#4F5964",
"preprocessor": "#EF7D71",
"punctuation": "#77818D",
"regex": "#7FAD00",
"storageModifier": "#2F9BCE",
"stringEscape": "#1B232B",
"struct": "#4AA8C8",
"tag": "#4AA8C8",
"tagAttribute": "#ED982E",
"tagAttributeValue": "#7FAD00",
"typeParameter": "#ED982E",
"url": "#2F9BCE",
"variableGlobal": "#4AA8C8",
"variableLocal": "#FBF8F2",
"variableOther": "#5FB978",
"variableProperty": "#2F9BCE"
},
"highlights": {
"diffAdded": "#5FB978",
"diffAddedBackground": "#EEF5E4",
"diffModified": "#2F9BCE",
"diffModifiedBackground": "#E3EDF3",
"diffRemoved": "#E6656A",
"diffRemovedBackground": "#FDE5E5",
"lineNumber": "#C6BFAF",
"lineNumberActive": "#1B232B"
}
},
"markdown": {
"heading1": "#394049",
"heading2": "#394049",
"heading3": "#394049",
"heading4": "#394049",
"link": "#2F9BCE",
"linkHover": "#4AA8C8",
"inlineCode": "#7FAD00",
"inlineCodeBackground": "#FCF9F3",
"blockquote": "#ED982E",
"blockquoteBorder": "#E6DDCF",
"listMarker": "#4AA8C899"
},
"chat": {
"userMessage": "#4F5964",
"userMessageBackground": "#fff7e5",
"assistantMessage": "#4F5964",
"assistantMessageBackground": "#FDFAF4",
"timestamp": "#77818D",
"divider": "#E6DDCF"
},
"tools": {
"background": "#FCF9F380",
"border": "#cec6b980",
"headerHover": "#FAF7F1",
"icon": "#77818D",
"title": "#4F5964",
"description": "#77818D",
"edit": {
"added": "#5FB978",
"addedBackground": "#5FB97825",
"removed": "#E6656A",
"removedBackground": "#E6656A25",
"lineNumber": "#C6BFAF"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/carbonfox-dark.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "carbonfox-dark",
"name": "Carbonfox",
"description": "Carbonfox",
"version": "1.0.0",
"variant": "dark",
"tags": [ "dark", "palette" ]
},
"colors": {
"primary": {
"base": "#33B1FF",
"hover": "#2F9ADC",
"active": "#52BDFF",
"foreground": "#161616",
"muted": "#33B1FF80",
"emphasis": "#2F9ADC"
},
"surface": {
"background": "#161616",
"foreground": "#F2F4F8",
"muted": "#222222",
"mutedForeground": "#b4b3b3",
"elevated": "#222222",
"elevatedForeground": "#F2F4F8",
"overlay": "#FFFFFF20",
"subtle": "#292828"
},
"interactive": {
"border": "#393939",
"borderHover": "#4C4C4C",
"borderFocus": "#4589FF",
"selection": "#ffffff20",
"selectionForeground": "#FFFFFF",
"focus": "#4589FF",
"focusRing": "#4589FF40",
"cursor": "#FFFFFF",
"hover": "#ffffff12",
"active": "#ffffff12"
},
"status": {
"error": "#FF8389",
"errorForeground": "#161616",
"errorBackground": "#FF838920",
"errorBorder": "#FF838950",
"warning": "#F1C21B",
"warningForeground": "#161616",
"warningBackground": "#F1C21B20",
"warningBorder": "#F1C21B50",
"success": "#42BE65",
"successForeground": "#161616",
"successBackground": "#42BE6520",
"successBorder": "#42BE6550",
"info": "#78A9FF",
"infoForeground": "#161616",
"infoBackground": "#78A9FF20",
"infoBorder": "#78A9FF50"
},
"syntax": {
"base": {
"background": "#262626",
"foreground": "#F2F4F8",
"comment": "#8D8D8D",
"keyword": "#78A9FF",
"string": "#42BE65",
"number": "#FF8389",
"function": "#78A9FF",
"variable": "#F2F4F8",
"type": "#08BDBA",
"operator": "#FF8389"
},
"tokens": {
"boolean": "#08BDBA",
"class": "#78A9FF",
"className": "#78A9FF",
"commentDoc": "#7B7B7B",
"constant": "#BE95FF",
"decorator": "#08BDBA",
"enum": "#78A9FF",
"exception": "#FF8389",
"functionCall": "#78A9FF",
"interface": "#08BDBA",
"jsxTag": "#78A9FF",
"key": "#78A9FF",
"keywordImport": "#FF8389",
"label": "#FF8389",
"macro": "#78A9FF",
"method": "#42BE65",
"module": "#FF8389",
"namespace": "#08BDBA",
"parameter": "#F2F4F8",
"preprocessor": "#FF8389",
"punctuation": "#8D8D8D",
"regex": "#42BE65",
"storageModifier": "#78A9FF",
"stringEscape": "#FFFFFF",
"struct": "#78A9FF",
"tag": "#78A9FF",
"tagAttribute": "#08BDBA",
"tagAttributeValue": "#42BE65",
"typeParameter": "#08BDBA",
"url": "#33B1FF",
"variableGlobal": "#78A9FF",
"variableLocal": "#0D0D0D",
"variableOther": "#42BE65",
"variableProperty": "#BE95FF"
},
"highlights": {
"diffAdded": "#42BE65",
"diffAddedBackground": "#0E3A22",
"diffModified": "#78A9FF",
"diffModifiedBackground": "#78A9FF20",
"diffRemoved": "#FF8389",
"diffRemovedBackground": "#4D1A1F",
"lineNumber": "#4C4C4C",
"lineNumberActive": "#FFFFFF"
}
},
"markdown": {
"heading1": "#F2F4F8",
"heading2": "#F2F4F8",
"heading3": "#F2F4F8",
"heading4": "#F2F4F8",
"link": "#33B1FF",
"linkHover": "#78A9FF",
"inlineCode": "#42BE65",
"inlineCodeBackground": "#1e1e1e",
"blockquote": "#8D8D8D",
"blockquoteBorder": "#393939",
"listMarker": "#33B1FF99"
},
"chat": {
"userMessage": "#F2F4F8",
"userMessageBackground": "#262626",
"assistantMessage": "#F2F4F8",
"assistantMessageBackground": "#161616",
"timestamp": "#8D8D8D",
"divider": "#393939"
},
"tools": {
"background": "#26262680",
"border": "#4e4c4c80",
"headerHover": "#000000",
"icon": "#8D8D8D",
"title": "#F2F4F8",
"description": "#8D8D8D",
"edit": {
"added": "#42BE65",
"addedBackground": "#42BE6525",
"removed": "#FF8389",
"removedBackground": "#FF838925",
"lineNumber": "#4C4C4C"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/carbonfox-light.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "carbonfox-light",
"name": "Carbonfox",
"description": "Carbonfox",
"version": "1.0.0",
"variant": "light",
"tags": [ "light", "palette" ]
},
"colors": {
"primary": {
"base": "#0072C3",
"hover": "#338ECF",
"active": "#0061A6",
"foreground": "#FFFFFF",
"muted": "#0072C380",
"emphasis": "#338ECF"
},
"surface": {
"background": "#FFFFFF",
"foreground": "#161616",
"muted": "#F4F4F4",
"mutedForeground": "#525252",
"elevated": "#f4f4f7",
"elevatedForeground": "#161616",
"overlay": "#00000020",
"subtle": "#f2f2f8"
},
"interactive": {
"border": "#DCDCDC",
"borderHover": "#D0D0D0",
"borderFocus": "#0F62FE",
"selection": "#cacfd87f",
"selectionForeground": "#000000",
"focus": "#0F62FE",
"focusRing": "#0F62FE40",
"cursor": "#000000",
"hover": "#43424214",
"active": "#43424212"
},
"status": {
"error": "#DA1E28",
"errorForeground": "#FFFFFF",
"errorBackground": "#DA1E2820",
"errorBorder": "#DA1E2850",
"warning": "#F1C21B",
"warningForeground": "#FFFFFF",
"warningBackground": "#F1C21B20",
"warningBorder": "#F1C21B50",
"success": "#198038",
"successForeground": "#FFFFFF",
"successBackground": "#19803820",
"successBorder": "#19803850",
"info": "#0043CE",
"infoForeground": "#FFFFFF",
"infoBackground": "#0043CE20",
"infoBorder": "#0043CE50"
},
"syntax": {
"base": {
"background": "#F4F4F4",
"foreground": "#161616",
"comment": "#525252",
"keyword": "#0043CE",
"string": "#198038",
"number": "#DA1E28",
"function": "#0043CE",
"variable": "#161616",
"type": "#007D79",
"operator": "#DA1E28"
},
"tokens": {
"boolean": "#007D79",
"class": "#0043CE",
"className": "#0043CE",
"commentDoc": "#A9A9A9",
"constant": "#6929C4",
"decorator": "#007D79",
"enum": "#0043CE",
"exception": "#DA1E28",
"functionCall": "#0043CE",
"interface": "#007D79",
"jsxTag": "#0043CE",
"key": "#0043CE",
"keywordImport": "#DA1E28",
"label": "#DA1E28",
"macro": "#0043CE",
"method": "#198038",
"module": "#DA1E28",
"namespace": "#007D79",
"parameter": "#161616",
"preprocessor": "#DA1E28",
"punctuation": "#525252",
"regex": "#198038",
"storageModifier": "#0043CE",
"stringEscape": "#000000",
"struct": "#0043CE",
"tag": "#0043CE",
"tagAttribute": "#007D79",
"tagAttributeValue": "#198038",
"typeParameter": "#007D79",
"url": "#0072C3",
"variableGlobal": "#0043CE",
"variableLocal": "#E8E8E8",
"variableOther": "#198038",
"variableProperty": "#6929C4"
},
"highlights": {
"diffAdded": "#198038",
"diffAddedBackground": "#19803820",
"diffModified": "#0043CE",
"diffModifiedBackground": "#0043CE20",
"diffRemoved": "#DA1E28",
"diffRemovedBackground": "#DA1E2820",
"lineNumber": "#D0D0D0",
"lineNumberActive": "#000000"
}
},
"markdown": {
"heading1": "#161616",
"heading2": "#161616",
"heading3": "#161616",
"heading4": "#161616",
"link": "#0072C3",
"linkHover": "#0043CE",
"inlineCode": "#198038",
"inlineCodeBackground": "#F4F4F4",
"blockquote": "#525252",
"blockquoteBorder": "#DCDCDC",
"listMarker": "#0072C399"
},
"chat": {
"userMessage": "#161616",
"userMessageBackground": "#f4f4f7",
"assistantMessage": "#161616",
"assistantMessageBackground": "#FFFFFF",
"timestamp": "#525252",
"divider": "#DCDCDC"
},
"tools": {
"background": "#F4F4F480",
"border": "#bdbbbb80",
"headerHover": "#DCDCDC",
"icon": "#525252",
"title": "#161616",
"description": "#525252",
"edit": {
"added": "#198038",
"addedBackground": "#19803825",
"removed": "#DA1E28",
"removedBackground": "#DA1E2825",
"lineNumber": "#D0D0D0"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/catppuccin-dark.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "catppuccin-dark",
"name": "Catppuccin",
"description": "Catppuccin",
"version": "1.0.0",
"variant": "dark",
"tags": [ "dark", "palette" ]
},
"colors": {
"primary": {
"base": "#7d8fff",
"hover": "#9EA6DF",
"active": "#BEC6FE",
"foreground": "#1E1E2E",
"muted": "#B4BEFE80",
"emphasis": "#9EA6DF"
},
"surface": {
"background": "#1E1E2E",
"foreground": "#CDD6F4",
"muted": "#2a273b",
"mutedForeground": "#c3cbea",
"elevated": "#282841",
"elevatedForeground": "#CDD6F4",
"overlay": "#F4F2FF20",
"subtle": "#2f2f50"
},
"interactive": {
"border": "#35324A",
"borderHover": "#393655",
"borderFocus": "#575379",
"selection": "#8883ae5c",
"selectionForeground": "#F4F2FF",
"focus": "#B4BEFE",
"focusRing": "#B4BEFE40",
"cursor": "#F4F2FF",
"hover": "#a19ace20",
"active": "#a19ace20"
},
"status": {
"error": "#F38BA8",
"errorForeground": "#1E1E2E",
"errorBackground": "#F38BA820",
"errorBorder": "#F38BA850",
"warning": "#F4B8E4",
"warningForeground": "#1E1E2E",
"warningBackground": "#F4B8E420",
"warningBorder": "#F4B8E450",
"success": "#A6D189",
"successForeground": "#1E1E2E",
"successBackground": "#A6D18920",
"successBorder": "#A6D18950",
"info": "#89DCEB",
"infoForeground": "#1E1E2E",
"infoBackground": "#89DCEB20",
"infoBorder": "#89DCEB50"
},
"syntax": {
"base": {
"background": "#211F31",
"foreground": "#CDD6F4",
"comment": "#A6ADC8",
"keyword": "#B4BEFE",
"string": "#A6E3A1",
"number": "#F38BA8",
"function": "#B4BEFE",
"variable": "#CDD6F4",
"type": "#F9E2AF",
"operator": "#F38BA8"
},
"tokens": {
"boolean": "#F9E2AF",
"class": "#B4BEFE",
"className": "#B4BEFE",
"commentDoc": "#9298B1",
"constant": "#89DCEB",
"decorator": "#F9E2AF",
"enum": "#B4BEFE",
"exception": "#F38BA8",
"functionCall": "#B4BEFE",
"interface": "#F9E2AF",
"jsxTag": "#B4BEFE",
"key": "#B4BEFE",
"keywordImport": "#F38BA8",
"label": "#F38BA8",
"macro": "#89DCEB",
"method": "#A6D189",
"module": "#F38BA8",
"namespace": "#F9E2AF",
"parameter": "#CDD6F4",
"preprocessor": "#F38BA8",
"punctuation": "#A6ADC8",
"regex": "#A6E3A1",
"storageModifier": "#89DCEB",
"stringEscape": "#F4F2FF",
"struct": "#B4BEFE",
"tag": "#B4BEFE",
"tagAttribute": "#F9E2AF",
"tagAttributeValue": "#A6E3A1",
"typeParameter": "#F9E2AF",
"url": "#89DCEB",
"variableGlobal": "#B4BEFE",
"variableLocal": "#1C1C29",
"variableOther": "#A6D189",
"variableProperty": "#89DCEB"
},
"highlights": {
"diffAdded": "#A6D189",
"diffAddedBackground": "#1D2C30",
"diffModified": "#89DCEB",
"diffModifiedBackground": "#232538",
"diffRemoved": "#F38BA8",
"diffRemovedBackground": "#2C1F2A",
"lineNumber": "#47436D",
"lineNumberActive": "#F4F2FF"
}
},
"markdown": {
"heading1": "#CDD6F4",
"heading2": "#CDD6F4",
"heading3": "#CDD6F4",
"heading4": "#CDD6F4",
"link": "#89DCEB",
"linkHover": "#B4BEFE",
"inlineCode": "#A6E3A1",
"inlineCodeBackground": "#2d2a42",
"blockquote": "#F9E2AF",
"blockquoteBorder": "#35324A",
"listMarker": "#B4BEFE99"
},
"chat": {
"userMessage": "#CDD6F4",
"userMessageBackground": "#3a3a5b",
"assistantMessage": "#CDD6F4",
"assistantMessageBackground": "#1E1E2E",
"timestamp": "#A6ADC8",
"divider": "#35324A"
},
"tools": {
"background": "#211F3180",
"border": "#534e7180",
"headerHover": "#191926",
"icon": "#A6ADC8",
"title": "#CDD6F4",
"description": "#A6ADC8",
"edit": {
"added": "#A6D189",
"addedBackground": "#A6D18925",
"removed": "#F38BA8",
"removedBackground": "#F38BA825",
"lineNumber": "#47436D"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/catppuccin-light.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "catppuccin-light",
"name": "Catppuccin",
"description": "Catppuccin",
"version": "1.0.0",
"variant": "light",
"tags": [ "light", "palette" ]
},
"colors": {
"primary": {
"base": "#7287FD",
"hover": "#8C99F6",
"active": "#6677DD",
"foreground": "#F5E0DC",
"muted": "#7287FD80",
"emphasis": "#8C99F6"
},
"surface": {
"background": "#fff6f4",
"foreground": "#2e314a",
"muted": "#f8ebe9",
"mutedForeground": "#6C6F85",
"elevated": "#fbefea",
"elevatedForeground": "#4C4F69",
"overlay": "#1F1F2A20",
"subtle": "#FDEEEE"
},
"interactive": {
"border": "#E0CFD3",
"borderHover": "#D6C4C8",
"borderFocus": "#AB97A1",
"selection": "#ffffff",
"selectionForeground": "#1F1F2A",
"focus": "#7287FD",
"focusRing": "#7287FD40",
"cursor": "#1F1F2A",
"hover": "#ffffff8f",
"active": "#ffffff"
},
"status": {
"error": "#D20F39",
"errorForeground": "#F5E0DC",
"errorBackground": "#D20F3920",
"errorBorder": "#D20F3950",
"warning": "#DF8E1D",
"warningForeground": "#F5E0DC",
"warningBackground": "#DF8E1D20",
"warningBorder": "#DF8E1D50",
"success": "#40A02B",
"successForeground": "#F5E0DC",
"successBackground": "#40A02B20",
"successBorder": "#40A02B50",
"info": "#04A5E5",
"infoForeground": "#F5E0DC",
"infoBackground": "#04A5E520",
"infoBorder": "#04A5E550"
},
"syntax": {
"base": {
"background": "#F2D8D4",
"foreground": "#4C4F69",
"comment": "#6C6F85",
"keyword": "#7287FD",
"string": "#40A02B",
"number": "#D20F39",
"function": "#7287FD",
"variable": "#4C4F69",
"type": "#DF8E1D",
"operator": "#D20F39"
},
"tokens": {
"boolean": "#DF8E1D",
"class": "#7287FD",
"className": "#7287FD",
"commentDoc": "#B1A8B1",
"constant": "#04A5E5",
"decorator": "#DF8E1D",
"enum": "#7287FD",
"exception": "#D20F39",
"functionCall": "#7287FD",
"interface": "#DF8E1D",
"jsxTag": "#7287FD",
"key": "#7287FD",
"keywordImport": "#D20F39",
"label": "#D20F39",
"macro": "#04A5E5",
"method": "#40A02B",
"module": "#D20F39",
"namespace": "#DF8E1D",
"parameter": "#4C4F69",
"preprocessor": "#D20F39",
"punctuation": "#6C6F85",
"regex": "#40A02B",
"storageModifier": "#04A5E5",
"stringEscape": "#1F1F2A",
"struct": "#7287FD",
"tag": "#7287FD",
"tagAttribute": "#DF8E1D",
"tagAttributeValue": "#40A02B",
"typeParameter": "#DF8E1D",
"url": "#04A5E5",
"variableGlobal": "#7287FD",
"variableLocal": "#F9E8E4",
"variableOther": "#40A02B",
"variableProperty": "#04A5E5"
},
"highlights": {
"diffAdded": "#40A02B",
"diffAddedBackground": "#EDF5E6",
"diffModified": "#04A5E5",
"diffModifiedBackground": "#E4E2F6",
"diffRemoved": "#D20F39",
"diffRemovedBackground": "#FDE1E3",
"lineNumber": "#C2AEB4",
"lineNumberActive": "#1F1F2A"
}
},
"markdown": {
"heading1": "#2e314a",
"heading2": "#2e314a",
"heading3": "#2e314a",
"heading4": "#2e314a",
"link": "#04A5E5",
"linkHover": "#7287FD",
"inlineCode": "#40A02B",
"inlineCodeBackground": "#f6eeec",
"blockquote": "#DF8E1D",
"blockquoteBorder": "#E0CFD3",
"listMarker": "#7287FD99"
},
"chat": {
"userMessage": "#2e314a",
"userMessageBackground": "#ffffff",
"assistantMessage": "#4C4F69",
"assistantMessageBackground": "#F5E0DC",
"timestamp": "#6C6F85",
"divider": "#E0CFD3"
},
"tools": {
"background": "#F2D8D480",
"border": "#cbbec180",
"headerHover": "#FDEEEE",
"icon": "#6C6F85",
"title": "#4C4F69",
"description": "#6C6F85",
"edit": {
"added": "#40A02B",
"addedBackground": "#40A02B25",
"removed": "#D20F39",
"removedBackground": "#D20F3925",
"lineNumber": "#C2AEB4"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/dracula-dark.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "dracula-dark",
"name": "Dracula",
"description": "Dracula",
"version": "1.0.0",
"variant": "dark",
"tags": [ "dark", "palette" ]
},
"colors": {
"primary": {
"base": "#BD93F9",
"hover": "#A480D8",
"active": "#C7A3FA",
"foreground": "#14151F",
"muted": "#BD93F980",
"emphasis": "#A480D8"
},
"surface": {
"background": "#14151F",
"foreground": "#F8F8F2",
"muted": "#181926",
"mutedForeground": "#B6B9E4",
"elevated": "#161722",
"elevatedForeground": "#F8F8F2",
"overlay": "#FFFFFF20",
"subtle": "#222436"
},
"interactive": {
"border": "#2D2F3C",
"borderHover": "#303244",
"borderFocus": "#4A4D6D",
"selection": "#30334b",
"selectionForeground": "#FFFFFF",
"focus": "#BD93F9",
"focusRing": "#BD93F940",
"cursor": "#FFFFFF",
"hover": "#30334ba3",
"active": "#30334b"
},
"status": {
"error": "#FF5555",
"errorForeground": "#14151F",
"errorBackground": "#FF555520",
"errorBorder": "#FF555550",
"warning": "#FFB86C",
"warningForeground": "#14151F",
"warningBackground": "#FFB86C20",
"warningBorder": "#FFB86C50",
"success": "#50FA7B",
"successForeground": "#14151F",
"successBackground": "#50FA7B20",
"successBorder": "#50FA7B50",
"info": "#8BE9FD",
"infoForeground": "#14151F",
"infoBackground": "#8BE9FD20",
"infoBorder": "#8BE9FD50"
},
"syntax": {
"base": {
"background": "#181926",
"foreground": "#F8F8F2",
"comment": "#B6B9E4",
"keyword": "#BD93F9",
"string": "#50FA7B",
"number": "#FF79C6",
"function": "#BD93F9",
"variable": "#F8F8F2",
"type": "#FFB86C",
"operator": "#FF79C6"
},
"tokens": {
"boolean": "#FFB86C",
"class": "#BD93F9",
"className": "#BD93F9",
"commentDoc": "#9EA0C6",
"constant": "#8BE9FD",
"decorator": "#FFB86C",
"enum": "#BD93F9",
"exception": "#FF79C6",
"functionCall": "#BD93F9",
"interface": "#FFB86C",
"jsxTag": "#BD93F9",
"key": "#BD93F9",
"keywordImport": "#FF79C6",
"label": "#FF79C6",
"macro": "#8BE9FD",
"method": "#50FA7B",
"module": "#FF79C6",
"namespace": "#FFB86C",
"parameter": "#F8F8F2",
"preprocessor": "#FF79C6",
"punctuation": "#B6B9E4",
"regex": "#50FA7B",
"storageModifier": "#8BE9FD",
"stringEscape": "#FFFFFF",
"struct": "#BD93F9",
"tag": "#BD93F9",
"tagAttribute": "#FFB86C",
"tagAttributeValue": "#50FA7B",
"typeParameter": "#FFB86C",
"url": "#8BE9FD",
"variableGlobal": "#BD93F9",
"variableLocal": "#161722",
"variableOther": "#50FA7B",
"variableProperty": "#8BE9FD"
},
"highlights": {
"diffAdded": "#50FA7B",
"diffAddedBackground": "#1F2A2F",
"diffModified": "#8BE9FD",
"diffModifiedBackground": "#24253A",
"diffRemoved": "#FF5555",
"diffRemovedBackground": "#2D1F27",
"lineNumber": "#3B3D55",
"lineNumberActive": "#FFFFFF"
}
},
"markdown": {
"heading1": "#F8F8F2",
"heading2": "#F8F8F2",
"heading3": "#F8F8F2",
"heading4": "#F8F8F2",
"link": "#8BE9FD",
"linkHover": "#BD93F9",
"inlineCode": "#4aeb72",
"inlineCodeBackground": "#202132",
"blockquote": "#FFB86C",
"blockquoteBorder": "#2D2F3C",
"listMarker": "#BD93F999"
},
"chat": {
"userMessage": "#F8F8F2",
"userMessageBackground": "#222436",
"assistantMessage": "#F8F8F2",
"assistantMessageBackground": "#14151F",
"timestamp": "#B6B9E4",
"divider": "#2D2F3C"
},
"tools": {
"background": "#18192680",
"border": "#494c6180",
"headerHover": "#191A26",
"icon": "#B6B9E4",
"title": "#F8F8F2",
"description": "#B6B9E4",
"edit": {
"added": "#50FA7B",
"addedBackground": "#50FA7B25",
"removed": "#FF5555",
"removedBackground": "#FF555525",
"lineNumber": "#3B3D55"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/dracula-light.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "dracula-light",
"name": "Dracula",
"description": "Dracula",
"version": "1.0.0",
"variant": "light",
"tags": [ "light", "palette" ]
},
"colors": {
"primary": {
"base": "#7C6BF5",
"hover": "#9587F4",
"active": "#6A5CD2",
"foreground": "#F8F8F2",
"muted": "#7C6BF580",
"emphasis": "#9587F4"
},
"surface": {
"background": "#F8F8F2",
"foreground": "#1F1F2F",
"muted": "#eff1eb",
"mutedForeground": "#52526B",
"elevated": "#eeeee5",
"elevatedForeground": "#1F1F2F",
"overlay": "#05040C20",
"subtle": "#edeee7"
},
"interactive": {
"border": "#E2E3DA",
"borderHover": "#D8D9D0",
"borderFocus": "#B0B2A7",
"selection": "#c2bcea63",
"selectionForeground": "#05040C",
"focus": "#7C6BF5",
"focusRing": "#7C6BF540",
"cursor": "#05040C",
"hover": "#c2bcea38",
"active": "#c2bcea63"
},
"status": {
"error": "#D9536F",
"errorForeground": "#F8F8F2",
"errorBackground": "#D9536F20",
"errorBorder": "#D9536F50",
"warning": "#F7A14D",
"warningForeground": "#F8F8F2",
"warningBackground": "#F7A14D20",
"warningBorder": "#F7A14D50",
"success": "#2FBF71",
"successForeground": "#F8F8F2",
"successBackground": "#2FBF7120",
"successBorder": "#2FBF7150",
"info": "#1D7FC5",
"infoForeground": "#F8F8F2",
"infoBackground": "#1D7FC520",
"infoBorder": "#1D7FC550"
},
"syntax": {
"base": {
"background": "#F1F2ED",
"foreground": "#1F1F2F",
"comment": "#52526B",
"keyword": "#7C6BF5",
"string": "#2FBF71",
"number": "#D16090",
"function": "#7C6BF5",
"variable": "#1F1F2F",
"type": "#F7A14D",
"operator": "#D16090"
},
"tokens": {
"boolean": "#F7A14D",
"class": "#7C6BF5",
"className": "#7C6BF5",
"commentDoc": "#A5A5AF",
"constant": "#1D7FC5",
"decorator": "#F7A14D",
"enum": "#7C6BF5",
"exception": "#D16090",
"functionCall": "#7C6BF5",
"interface": "#F7A14D",
"jsxTag": "#7C6BF5",
"key": "#7C6BF5",
"keywordImport": "#D16090",
"label": "#D16090",
"macro": "#1D7FC5",
"method": "#2FBF71",
"module": "#D16090",
"namespace": "#F7A14D",
"parameter": "#1F1F2F",
"preprocessor": "#D16090",
"punctuation": "#52526B",
"regex": "#2FBF71",
"storageModifier": "#1D7FC5",
"stringEscape": "#05040C",
"struct": "#7C6BF5",
"tag": "#7C6BF5",
"tagAttribute": "#F7A14D",
"tagAttributeValue": "#2FBF71",
"typeParameter": "#F7A14D",
"url": "#1D7FC5",
"variableGlobal": "#7C6BF5",
"variableLocal": "#F6F6F1",
"variableOther": "#2FBF71",
"variableProperty": "#1D7FC5"
},
"highlights": {
"diffAdded": "#2FBF71",
"diffAddedBackground": "#E4F5E6",
"diffModified": "#1D7FC5",
"diffModifiedBackground": "#DEDFE9",
"diffRemoved": "#D9536F",
"diffRemovedBackground": "#FAE4EB",
"lineNumber": "#C4C6BC",
"lineNumberActive": "#05040C"
}
},
"markdown": {
"heading1": "#1F1F2F",
"heading2": "#1F1F2F",
"heading3": "#1F1F2F",
"heading4": "#1F1F2F",
"link": "#1D7FC5",
"linkHover": "#7C6BF5",
"inlineCode": "#2FBF71",
"inlineCodeBackground": "#F1F2ED",
"blockquote": "#F7A14D",
"blockquoteBorder": "#E2E3DA",
"listMarker": "#7C6BF599"
},
"chat": {
"userMessage": "#1F1F2F",
"userMessageBackground": "#F1F2ED",
"assistantMessage": "#1F1F2F",
"assistantMessageBackground": "#F8F8F2",
"timestamp": "#52526B",
"divider": "#E2E3DA"
},
"tools": {
"background": "#F1F2ED80",
"border": "#E2E3DA80",
"headerHover": "#F2F2EC",
"icon": "#52526B",
"title": "#1F1F2F",
"description": "#52526B",
"edit": {
"added": "#2FBF71",
"addedBackground": "#2FBF7125",
"removed": "#D9536F",
"removedBackground": "#D9536F25",
"lineNumber": "#C4C6BC"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/flexoki-dark.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "flexoki-dark",
"name": "Flexoki",
"description": "An inky color scheme for prose and code - dark variant",
"version": "1.0.0",
"variant": "dark",
"tags": ["dark", "warm", "natural", "ink"]
},
"colors": {
"primary": {
"base": "#EC8B49",
"hover": "#DA702C",
"active": "#F9AE77",
"foreground": "#100F0F",
"muted": "#EC8B4980",
"emphasis": "#F9AE77"
},
"surface": {
"background": "#100F0F",
"foreground": "#CECDC3",
"muted": "#1C1B1A",
"mutedForeground": "#878580",
"elevated": "#1C1A19",
"elevatedForeground": "#CECDC3",
"overlay": "#00000080",
"subtle": "#1e1d1c"
},
"interactive": {
"border": "#343331",
"borderHover": "#403E3C",
"borderFocus": "#EC8B49",
"selection": "#f4f4f41f",
"selectionForeground": "#CECDC3",
"focus": "#EC8B49",
"focusRing": "#EC8B4950",
"cursor": "#CECDC3",
"hover": "#ffffff18",
"active": "#ffffff1f"
},
"status": {
"error": "#D14D41",
"errorForeground": "#100F0F",
"errorBackground": "#AF302920",
"errorBorder": "#AF302950",
"warning": "#DA702C",
"warningForeground": "#100F0F",
"warningBackground": "#BC521520",
"warningBorder": "#BC521550",
"success": "#A0AF54",
"successForeground": "#100F0F",
"successBackground": "#66800B20",
"successBorder": "#66800B50",
"info": "#4385BE",
"infoForeground": "#100F0F",
"infoBackground": "#205EA620",
"infoBorder": "#205EA650"
},
"syntax": {
"base": {
"background": "#1C1B1A",
"foreground": "#CECDC3",
"comment": "#878580",
"keyword": "#4385BE",
"string": "#3AA99F",
"number": "#8B7EC8",
"function": "#DA702C",
"variable": "#CECDC3",
"type": "#D0A215",
"operator": "#D14D41"
},
"tokens": {
"commentDoc": "#575653",
"stringEscape": "#CECDC3",
"keywordImport": "#D14D41",
"storageModifier": "#4385BE",
"functionCall": "#DA702C",
"method": "#879A39",
"variableProperty": "#4385BE",
"variableOther": "#879A39",
"variableGlobal": "#CE5D97",
"variableLocal": "#282726",
"parameter": "#CECDC3",
"constant": "#CECDC3",
"class": "#DA702C",
"className": "#DA702C",
"interface": "#D0A215",
"struct": "#DA702C",
"enum": "#DA702C",
"typeParameter": "#DA702C",
"namespace": "#D0A215",
"module": "#D14D41",
"tag": "#4385BE",
"jsxTag": "#CE5D97",
"tagAttribute": "#D0A215",
"tagAttributeValue": "#3AA99F",
"boolean": "#D0A215",
"decorator": "#D0A215",
"label": "#CE5D97",
"punctuation": "#878580",
"macro": "#4385BE",
"preprocessor": "#CE5D97",
"regex": "#3AA99F",
"url": "#4385BE",
"key": "#DA702C",
"exception": "#CE5D97"
},
"highlights": {
"diffAdded": "#879A39",
"diffAddedBackground": "#66800B20",
"diffRemoved": "#D14D41",
"diffRemovedBackground": "#AF302920",
"diffModified": "#4385BE",
"diffModifiedBackground": "#205EA620",
"lineNumber": "#403E3C",
"lineNumberActive": "#CECDC3"
}
},
"markdown": {
"heading1": "#fbf9e6",
"heading2": "#e6e4d2",
"heading3": "#CECDC3",
"heading4": "#CECDC3",
"link": "#4385BE",
"linkHover": "#205EA6",
"inlineCode": "#A0AF53",
"inlineCodeBackground": "#1C1B1A",
"blockquote": "#878580",
"blockquoteBorder": "#343331",
"listMarker": "#D0A21599"
},
"chat": {
"userMessage": "#CECDC3",
"userMessageBackground": "#2d1d15",
"assistantMessage": "#CECDC3",
"assistantMessageBackground": "#100F0F",
"timestamp": "#878580",
"divider": "#343331"
},
"tools": {
"background": "#1C1B1A50",
"border": "#42403e9d",
"headerHover": "#34333150",
"icon": "#aca7a1",
"title": "#CECDC3",
"description": "#878580",
"edit": {
"added": "#879A39",
"addedBackground": "#66800B25",
"removed": "#D14D41",
"removedBackground": "#AF302925",
"lineNumber": "#403E3C"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/flexoki-dark.ts
-197
View File
@@ -1,197 +0,0 @@
import type { Theme } from '@/types/theme';
export const flexokiDarkTheme: Theme = {
metadata: {
id: 'flexoki-dark',
name: 'Flexoki Dark',
description: 'An inky color scheme for prose and code - dark variant',
author: 'Steph Ango',
version: '1.0.0',
variant: 'dark',
tags: ['dark', 'warm', 'natural', 'ink']
},
colors: {
primary: {
base: '#EC8B49',
hover: '#DA702C',
active: '#F9AE77',
foreground: '#100F0F',
muted: '#EC8B4980',
emphasis: '#F9AE77'
},
surface: {
background: '#100F0F',
foreground: '#CECDC3',
muted: '#1C1B1A',
mutedForeground: '#878580',
elevated: '#282726',
elevatedForeground: '#CECDC3',
overlay: '#00000080',
subtle: '#343331'
},
interactive: {
border: '#343331',
borderHover: '#403E3C',
borderFocus: '#EC8B49',
selection: '#CECDC330',
selectionForeground: '#CECDC3',
focus: '#EC8B49',
focusRing: '#EC8B4950',
cursor: '#CECDC3',
hover: '#343331',
active: '#403E3C'
},
status: {
error: '#D14D41',
errorForeground: '#100F0F',
errorBackground: '#AF302920',
errorBorder: '#AF302950',
warning: '#DA702C',
warningForeground: '#100F0F',
warningBackground: '#BC521520',
warningBorder: '#BC521550',
success: '#A0AF54',
successForeground: '#100F0F',
successBackground: '#66800B20',
successBorder: '#66800B50',
info: '#4385BE',
infoForeground: '#100F0F',
infoBackground: '#205EA620',
infoBorder: '#205EA650'
},
syntax: {
base: {
background: '#1C1B1A',
foreground: '#CECDC3',
comment: '#878580',
keyword: '#4385BE',
string: '#3AA99F',
number: '#8B7EC8',
function: '#DA702C',
variable: '#CECDC3',
type: '#D0A215',
operator: '#D14D41'
},
tokens: {
commentDoc: '#575653',
stringEscape: '#CECDC3',
keywordImport: '#D14D41',
storageModifier: '#4385BE',
functionCall: '#DA702C',
method: '#879A39',
variableProperty: '#4385BE',
variableOther: '#879A39',
variableGlobal: '#CE5D97',
variableLocal: '#282726',
parameter: '#CECDC3',
constant: '#CECDC3',
class: '#DA702C',
className: '#DA702C',
interface: '#D0A215',
struct: '#DA702C',
enum: '#DA702C',
typeParameter: '#DA702C',
namespace: '#D0A215',
module: '#D14D41',
tag: '#4385BE',
jsxTag: '#CE5D97',
tagAttribute: '#D0A215',
tagAttributeValue: '#3AA99F',
boolean: '#D0A215',
decorator: '#D0A215',
label: '#CE5D97',
punctuation: '#878580',
macro: '#4385BE',
preprocessor: '#CE5D97',
regex: '#3AA99F',
url: '#4385BE',
key: '#DA702C',
exception: '#CE5D97'
},
highlights: {
diffAdded: '#879A39',
diffAddedBackground: '#66800B20',
diffRemoved: '#D14D41',
diffRemovedBackground: '#AF302920',
diffModified: '#4385BE',
diffModifiedBackground: '#205EA620',
lineNumber: '#403E3C',
lineNumberActive: '#CECDC3'
}
},
markdown: {
heading1: '#D0A215',
heading2: '#DA702C',
heading3: '#4385BE',
heading4: '#CECDC3',
link: '#4385BE',
linkHover: '#205EA6',
inlineCode: '#A0AF54',
inlineCodeBackground: '#1C1B1A',
blockquote: '#878580',
blockquoteBorder: '#343331',
listMarker: '#D0A21599'
},
chat: {
userMessage: '#CECDC3',
userMessageBackground: '#282726',
assistantMessage: '#CECDC3',
assistantMessageBackground: '#100F0F',
timestamp: '#878580',
divider: '#343331'
},
tools: {
background: '#1C1B1A50',
border: '#34333180',
headerHover: '#34333150',
icon: '#878580',
title: '#CECDC3',
description: '#878580',
edit: {
added: '#879A39',
addedBackground: '#66800B25',
removed: '#D14D41',
removedBackground: '#AF302925',
lineNumber: '#403E3C'
}
}
},
config: {
fonts: {
sans: '"IBM Plex Mono", monospace',
mono: '"IBM Plex Mono", monospace',
heading: '"IBM Plex Mono", monospace'
},
radius: {
none: '0',
sm: '0.125rem',
md: '0.375rem',
lg: '0.5rem',
xl: '0.75rem',
full: '9999px'
},
transitions: {
fast: '150ms ease',
normal: '250ms ease',
slow: '350ms ease'
}
}
};
packages/ui/src/lib/theme/themes/flexoki-light.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "flexoki-light",
"name": "Flexoki",
"description": "An inky color scheme for prose and code - light variant",
"version": "1.0.0",
"variant": "light",
"tags": ["light", "warm", "natural", "paper"]
},
"colors": {
"primary": {
"base": "#EC8B49",
"hover": "#F9AE77",
"active": "#DA702C",
"foreground": "#FFFCF0",
"muted": "#EC8B4980",
"emphasis": "#F9AE77"
},
"surface": {
"background": "#FFFCF0",
"foreground": "#100F0F",
"muted": "#F2F0E5",
"mutedForeground": "#474643",
"elevated": "#fdf6ec",
"elevatedForeground": "#100F0F",
"overlay": "#100F0F20",
"subtle": "#f9f1e4"
},
"interactive": {
"border": "#DAD8CE",
"borderHover": "#CECDC3",
"borderFocus": "#EC8B49",
"selection": "#76736f30",
"selectionForeground": "#100F0F",
"focus": "#EC8B49",
"focusRing": "#EC8B4940",
"cursor": "#100F0F",
"hover": "#76736f20",
"active": "#76736f20"
},
"status": {
"error": "#AF3029",
"errorForeground": "#FFFCF0",
"errorBackground": "#D14D4120",
"errorBorder": "#D14D4150",
"warning": "#BC5215",
"warningForeground": "#FFFCF0",
"warningBackground": "#DA702C20",
"warningBorder": "#DA702C50",
"success": "#66800B",
"successForeground": "#FFFCF0",
"successBackground": "#879A3920",
"successBorder": "#879A3950",
"info": "#205EA6",
"infoForeground": "#FFFCF0",
"infoBackground": "#4385BE20",
"infoBorder": "#4385BE50"
},
"syntax": {
"base": {
"background": "#F2F0E5",
"foreground": "#100F0F",
"comment": "#6F6E69",
"keyword": "#205EA6",
"string": "#24837B",
"number": "#5E409D",
"function": "#BC5215",
"variable": "#100F0F",
"type": "#AD8301",
"operator": "#AF3029"
},
"tokens": {
"commentDoc": "#B7B5AC",
"stringEscape": "#100F0F",
"keywordImport": "#AF3029",
"storageModifier": "#205EA6",
"functionCall": "#BC5215",
"method": "#66800B",
"variableProperty": "#205EA6",
"variableOther": "#66800B",
"variableGlobal": "#A02F6F",
"variableLocal": "#E6E4D9",
"parameter": "#100F0F",
"constant": "#100F0F",
"class": "#BC5215",
"className": "#BC5215",
"interface": "#AD8301",
"struct": "#BC5215",
"enum": "#BC5215",
"typeParameter": "#BC5215",
"namespace": "#AD8301",
"module": "#AF3029",
"tag": "#205EA6",
"jsxTag": "#A02F6F",
"tagAttribute": "#AD8301",
"tagAttributeValue": "#24837B",
"boolean": "#AD8301",
"decorator": "#AD8301",
"label": "#A02F6F",
"punctuation": "#6F6E69",
"macro": "#205EA6",
"preprocessor": "#A02F6F",
"regex": "#24837B",
"url": "#205EA6",
"key": "#BC5215",
"exception": "#A02F6F"
},
"highlights": {
"diffAdded": "#66800B",
"diffAddedBackground": "#879A3920",
"diffRemoved": "#AF3029",
"diffRemovedBackground": "#D14D4120",
"diffModified": "#205EA6",
"diffModifiedBackground": "#4385BE20",
"lineNumber": "#CECDC3",
"lineNumberActive": "#100F0F"
}
},
"markdown": {
"heading1": "#100F0F",
"heading2": "#100F0F",
"heading3": "#100F0F",
"heading4": "#100F0F",
"link": "#205EA6",
"linkHover": "#4385BE",
"inlineCode": "#24837B",
"inlineCodeBackground": "#F2F0E5",
"blockquote": "#6F6E69",
"blockquoteBorder": "#DAD8CE",
"listMarker": "#AD830199"
},
"chat": {
"userMessage": "#100F0F",
"userMessageBackground": "#f9f1e4",
"assistantMessage": "#100F0F",
"assistantMessageBackground": "#FFFCF0",
"timestamp": "#6F6E69",
"divider": "#DAD8CE"
},
"tools": {
"background": "#F2F0E550",
"border": "#b4b2a980",
"headerHover": "#DAD8CE",
"icon": "#6F6E69",
"title": "#100F0F",
"description": "#6F6E69",
"edit": {
"added": "#66800B",
"addedBackground": "#66800B25",
"removed": "#AF3029",
"removedBackground": "#AF302925",
"lineNumber": "#CECDC3"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/flexoki-light.ts
-197
View File
@@ -1,197 +0,0 @@
import type { Theme } from '@/types/theme';
export const flexokiLightTheme: Theme = {
metadata: {
id: 'flexoki-light',
name: 'Flexoki Light',
description: 'An inky color scheme for prose and code - light variant',
author: 'Steph Ango',
version: '1.0.0',
variant: 'light',
tags: ['light', 'warm', 'natural', 'paper']
},
colors: {
primary: {
base: '#EC8B49',
hover: '#F9AE77',
active: '#DA702C',
foreground: '#FFFCF0',
muted: '#EC8B4980',
emphasis: '#F9AE77'
},
surface: {
background: '#FFFCF0',
foreground: '#100F0F',
muted: '#F2F0E5',
mutedForeground: '#6F6E69',
elevated: '#E6E4D9',
elevatedForeground: '#100F0F',
overlay: '#100F0F20',
subtle: '#DAD8CE'
},
interactive: {
border: '#DAD8CE',
borderHover: '#CECDC3',
borderFocus: '#EC8B49',
selection: '#100F0F44',
selectionForeground: '#100F0F',
focus: '#EC8B49',
focusRing: '#EC8B4940',
cursor: '#100F0F',
hover: '#DAD8CE',
active: '#CECDC3'
},
status: {
error: '#AF3029',
errorForeground: '#FFFCF0',
errorBackground: '#D14D4120',
errorBorder: '#D14D4150',
warning: '#BC5215',
warningForeground: '#FFFCF0',
warningBackground: '#DA702C20',
warningBorder: '#DA702C50',
success: '#66800B',
successForeground: '#FFFCF0',
successBackground: '#879A3920',
successBorder: '#879A3950',
info: '#205EA6',
infoForeground: '#FFFCF0',
infoBackground: '#4385BE20',
infoBorder: '#4385BE50'
},
syntax: {
base: {
background: '#F2F0E5',
foreground: '#100F0F',
comment: '#6F6E69',
keyword: '#205EA6',
string: '#24837B',
number: '#5E409D',
function: '#BC5215',
variable: '#100F0F',
type: '#AD8301',
operator: '#AF3029'
},
tokens: {
commentDoc: '#B7B5AC',
stringEscape: '#100F0F',
keywordImport: '#AF3029',
storageModifier: '#205EA6',
functionCall: '#BC5215',
method: '#66800B',
variableProperty: '#205EA6',
variableOther: '#66800B',
variableGlobal: '#A02F6F',
variableLocal: '#E6E4D9',
parameter: '#100F0F',
constant: '#100F0F',
class: '#BC5215',
className: '#BC5215',
interface: '#AD8301',
struct: '#BC5215',
enum: '#BC5215',
typeParameter: '#BC5215',
namespace: '#AD8301',
module: '#AF3029',
tag: '#205EA6',
jsxTag: '#A02F6F',
tagAttribute: '#AD8301',
tagAttributeValue: '#24837B',
boolean: '#AD8301',
decorator: '#AD8301',
label: '#A02F6F',
punctuation: '#6F6E69',
macro: '#205EA6',
preprocessor: '#A02F6F',
regex: '#24837B',
url: '#205EA6',
key: '#BC5215',
exception: '#A02F6F'
},
highlights: {
diffAdded: '#66800B',
diffAddedBackground: '#879A3920',
diffRemoved: '#AF3029',
diffRemovedBackground: '#D14D4120',
diffModified: '#205EA6',
diffModifiedBackground: '#4385BE20',
lineNumber: '#CECDC3',
lineNumberActive: '#100F0F'
}
},
markdown: {
heading1: '#AD8301',
heading2: '#BC5215',
heading3: '#205EA6',
heading4: '#100F0F',
link: '#205EA6',
linkHover: '#4385BE',
inlineCode: '#24837B',
inlineCodeBackground: '#F2F0E5',
blockquote: '#6F6E69',
blockquoteBorder: '#DAD8CE',
listMarker: '#AD830199'
},
chat: {
userMessage: '#100F0F',
userMessageBackground: '#F2F0E5',
assistantMessage: '#100F0F',
assistantMessageBackground: '#FFFCF0',
timestamp: '#6F6E69',
divider: '#DAD8CE'
},
tools: {
background: '#F2F0E550',
border: '#DAD8CE80',
headerHover: '#DAD8CE',
icon: '#6F6E69',
title: '#100F0F',
description: '#6F6E69',
edit: {
added: '#66800B',
addedBackground: '#66800B25',
removed: '#AF3029',
removedBackground: '#AF302925',
lineNumber: '#CECDC3'
}
}
},
config: {
fonts: {
sans: '"IBM Plex Mono", monospace',
mono: '"IBM Plex Mono", monospace',
heading: '"IBM Plex Mono", monospace'
},
radius: {
none: '0',
sm: '0.125rem',
md: '0.375rem',
lg: '0.5rem',
xl: '0.75rem',
full: '9999px'
},
transitions: {
fast: '150ms ease',
normal: '250ms ease',
slow: '350ms ease'
}
}
};
packages/ui/src/lib/theme/themes/gruvbox-dark.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "gruvbox-dark",
"name": "Gruvbox",
"description": "Gruvbox",
"version": "1.0.0",
"variant": "dark",
"tags": [ "dark", "palette" ]
},
"colors": {
"primary": {
"base": "#83A598",
"hover": "#759287",
"active": "#95B09F",
"foreground": "#282828",
"muted": "#83A59880",
"emphasis": "#759287"
},
"surface": {
"background": "#282828",
"foreground": "#EBDBB2",
"muted": "#32302F",
"mutedForeground": "#A89984",
"elevated": "#25292b",
"elevatedForeground": "#EBDBB2",
"overlay": "#FBF1C720",
"subtle": "#3e3c3a"
},
"interactive": {
"border": "#504945",
"borderHover": "#5A524B",
"borderFocus": "#7C6F64",
"selection": "#5a5647db",
"selectionForeground": "#FBF1C7",
"focus": "#83A598",
"focusRing": "#83A59840",
"cursor": "#FBF1C7",
"hover": "#5a5647d9",
"active": "#5a5647ec"
},
"status": {
"error": "#FB4934",
"errorForeground": "#282828",
"errorBackground": "#FB493420",
"errorBorder": "#FB493450",
"warning": "#FABD2F",
"warningForeground": "#282828",
"warningBackground": "#FABD2F20",
"warningBorder": "#FABD2F50",
"success": "#B8BB26",
"successForeground": "#282828",
"successBackground": "#B8BB2620",
"successBorder": "#B8BB2650",
"info": "#D3869B",
"infoForeground": "#282828",
"infoBackground": "#D3869B20",
"infoBorder": "#D3869B50"
},
"syntax": {
"base": {
"background": "#32302F",
"foreground": "#EBDBB2",
"comment": "#A89984",
"keyword": "#83A598",
"string": "#B8BB26",
"number": "#FB4934",
"function": "#83A598",
"variable": "#EBDBB2",
"type": "#FABD2F",
"operator": "#FB4934"
},
"tokens": {
"boolean": "#FABD2F",
"class": "#83A598",
"className": "#83A598",
"commentDoc": "#958876",
"constant": "#D3869B",
"decorator": "#FABD2F",
"enum": "#83A598",
"exception": "#FB4934",
"functionCall": "#83A598",
"interface": "#FABD2F",
"jsxTag": "#83A598",
"key": "#83A598",
"keywordImport": "#FB4934",
"label": "#FB4934",
"macro": "#8EC07C",
"method": "#B8BB26",
"module": "#FB4934",
"namespace": "#FABD2F",
"parameter": "#EBDBB2",
"preprocessor": "#FB4934",
"punctuation": "#A89984",
"regex": "#B8BB26",
"storageModifier": "#8EC07C",
"stringEscape": "#FBF1C7",
"struct": "#83A598",
"tag": "#83A598",
"tagAttribute": "#FABD2F",
"tagAttributeValue": "#B8BB26",
"typeParameter": "#FABD2F",
"url": "#8EC07C",
"variableGlobal": "#83A598",
"variableLocal": "#1D2021",
"variableOther": "#B8BB26",
"variableProperty": "#D3869B"
},
"highlights": {
"diffAdded": "#B8BB26",
"diffAddedBackground": "#2A3325",
"diffModified": "#D3869B",
"diffModifiedBackground": "#32302F",
"diffRemoved": "#FB4934",
"diffRemovedBackground": "#3C2222",
"lineNumber": "#70665D",
"lineNumberActive": "#FBF1C7"
}
},
"markdown": {
"heading1": "#EBDBB2",
"heading2": "#EBDBB2",
"heading3": "#EBDBB2",
"heading4": "#EBDBB2",
"link": "#8EC07C",
"linkHover": "#83A598",
"inlineCode": "#B8BB26",
"inlineCodeBackground": "#32302F",
"blockquote": "#928374",
"blockquoteBorder": "#504945",
"listMarker": "#83A59899"
},
"chat": {
"userMessage": "#EBDBB2",
"userMessageBackground": "#3e3c3a",
"assistantMessage": "#EBDBB2",
"assistantMessageBackground": "#282828",
"timestamp": "#A89984",
"divider": "#504945"
},
"tools": {
"background": "#32302F80",
"border": "#6e645e80",
"headerHover": "#141617",
"icon": "#A89984",
"title": "#EBDBB2",
"description": "#A89984",
"edit": {
"added": "#B8BB26",
"addedBackground": "#B8BB2625",
"removed": "#FB4934",
"removedBackground": "#FB493425",
"lineNumber": "#70665D"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/gruvbox-light.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "gruvbox-light",
"name": "Gruvbox",
"description": "Gruvbox",
"version": "1.0.0",
"variant": "light",
"tags": [ "light", "palette" ]
},
"colors": {
"primary": {
"base": "#076678",
"hover": "#388288",
"active": "#0C5D6C",
"foreground": "#FBF1C7",
"muted": "#07667880",
"emphasis": "#388288"
},
"surface": {
"background": "#FBF1C7",
"foreground": "#3C3836",
"muted": "#F2E5BC",
"mutedForeground": "#7C6F64",
"elevated": "#efebcd",
"elevatedForeground": "#3C3836",
"overlay": "#28282820",
"subtle": "#FDF9E8"
},
"interactive": {
"border": "#D5C4A1",
"borderHover": "#C9B897",
"borderFocus": "#A89984",
"selection": "#fffdfdec",
"selectionForeground": "#282828",
"focus": "#076678",
"focusRing": "#07667840",
"cursor": "#282828",
"hover": "#fffdfdb3",
"active": "#fffdfdcf"
},
"status": {
"error": "#9D0006",
"errorForeground": "#FBF1C7",
"errorBackground": "#9D000620",
"errorBorder": "#9D000650",
"warning": "#B57614",
"warningForeground": "#FBF1C7",
"warningBackground": "#B5761420",
"warningBorder": "#B5761450",
"success": "#79740E",
"successForeground": "#FBF1C7",
"successBackground": "#79740E20",
"successBorder": "#79740E50",
"info": "#8F3F71",
"infoForeground": "#FBF1C7",
"infoBackground": "#8F3F7120",
"infoBorder": "#8F3F7150"
},
"syntax": {
"base": {
"background": "#F2E5BC",
"foreground": "#3C3836",
"comment": "#7C6F64",
"keyword": "#076678",
"string": "#79740E",
"number": "#9D0006",
"function": "#076678",
"variable": "#3C3836",
"type": "#B57614",
"operator": "#9D0006"
},
"tokens": {
"boolean": "#B57614",
"class": "#076678",
"className": "#076678",
"commentDoc": "#BCB096",
"constant": "#8F3F71",
"decorator": "#B57614",
"enum": "#076678",
"exception": "#9D0006",
"functionCall": "#076678",
"interface": "#B57614",
"jsxTag": "#076678",
"key": "#076678",
"keywordImport": "#9D0006",
"label": "#9D0006",
"macro": "#427B58",
"method": "#79740E",
"module": "#9D0006",
"namespace": "#B57614",
"parameter": "#3C3836",
"preprocessor": "#9D0006",
"punctuation": "#7C6F64",
"regex": "#79740E",
"storageModifier": "#427B58",
"stringEscape": "#282828",
"struct": "#076678",
"tag": "#076678",
"tagAttribute": "#B57614",
"tagAttributeValue": "#79740E",
"typeParameter": "#B57614",
"url": "#427B58",
"variableGlobal": "#076678",
"variableLocal": "#F9F5D7",
"variableOther": "#79740E",
"variableProperty": "#8F3F71"
},
"highlights": {
"diffAdded": "#79740E",
"diffAddedBackground": "#DDE3B1",
"diffModified": "#8F3F71",
"diffModifiedBackground": "#EBDFB5",
"diffRemoved": "#9D0006",
"diffRemovedBackground": "#E8C7C3",
"lineNumber": "#B0A285",
"lineNumberActive": "#282828"
}
},
"markdown": {
"heading1": "#3C3836",
"heading2": "#3C3836",
"heading3": "#3C3836",
"heading4": "#3C3836",
"link": "#427B58",
"linkHover": "#076678",
"inlineCode": "#79740E",
"inlineCodeBackground": "#F2E5BC",
"blockquote": "#928374",
"blockquoteBorder": "#D5C4A1",
"listMarker": "#07667899"
},
"chat": {
"userMessage": "#3C3836",
"userMessageBackground": "#FDF9E8",
"assistantMessage": "#3C3836",
"assistantMessageBackground": "#FBF1C7",
"timestamp": "#7C6F64",
"divider": "#D5C4A1"
},
"tools": {
"background": "#F2E5BC80",
"border": "#a6997e80",
"headerHover": "#FDF9E8",
"icon": "#7C6F64",
"title": "#3C3836",
"description": "#7C6F64",
"edit": {
"added": "#79740E",
"addedBackground": "#79740E25",
"removed": "#9D0006",
"removedBackground": "#9D000625",
"lineNumber": "#B0A285"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/index.ts
+25 -12
View File
@@ -1,21 +1,34 @@
import type { Theme } from '@/types/theme';
import { flexokiLightTheme } from './flexoki-light';
import { flexokiDarkTheme } from './flexoki-dark';
import { presetThemes } from './presets';
import flexokiLightRaw from './flexoki-light.json';
import flexokiDarkRaw from './flexoki-dark.json';
export const themes: Theme[] = [
flexokiLightTheme,
flexokiDarkTheme,
];
export const flexokiLightTheme = flexokiLightRaw as Theme;
export const flexokiDarkTheme = flexokiDarkRaw as Theme;
export {
flexokiLightTheme,
flexokiDarkTheme,
};
export const DEFAULT_LIGHT_THEME_ID = 'flexoki-light' as const;
export const DEFAULT_DARK_THEME_ID = 'flexoki-dark' as const;
export const themes: Theme[] = [flexokiLightTheme, flexokiDarkTheme, ...presetThemes];
export function getThemeById(id: string): Theme | undefined {
return themes.find(theme => theme.metadata.id === id);
// Back-compat for a short-lived rename.
const resolvedId =
id === 'app-light' ? 'flexoki-light' :
id === 'app-dark' ? 'flexoki-dark' :
id;
return themes.find(theme => theme.metadata.id === resolvedId);
}
export function getDefaultTheme(prefersDark: boolean): Theme {
return prefersDark ? flexokiDarkTheme : flexokiLightTheme;
const variant: Theme['metadata']['variant'] = prefersDark ? 'dark' : 'light';
const defaultId = prefersDark ? DEFAULT_DARK_THEME_ID : DEFAULT_LIGHT_THEME_ID;
const defaultTheme = getThemeById(defaultId);
if (defaultTheme && defaultTheme.metadata.variant === variant) {
return defaultTheme;
}
return themes.find((theme) => theme.metadata.variant === variant) ?? themes[0] ?? flexokiLightTheme;
}
packages/ui/src/lib/theme/themes/kanagawa-dark.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "kanagawa-dark",
"name": "Kanagawa",
"description": "A color scheme inspired by Japanese art and ink painting - dark variant",
"version": "1.0.0",
"variant": "dark",
"tags": ["dark", "japanese", "ink", "elegant"]
},
"colors": {
"primary": {
"base": "#7FB4CA",
"hover": "#9DC5E0",
"active": "#658594",
"foreground": "#1F1F28",
"muted": "#7FB4CA80",
"emphasis": "#7E9CD8"
},
"surface": {
"background": "#1F1F28",
"foreground": "#DCD7BA",
"muted": "#23232d",
"mutedForeground": "#807f78",
"elevated": "#2A2A37",
"elevatedForeground": "#DCD7BA",
"overlay": "#16161DCC",
"subtle": "#2f2f3d"
},
"interactive": {
"border": "#363646",
"borderHover": "#54546D",
"borderFocus": "#7FB4CA",
"selection": "#729fb333",
"selectionForeground": "#DCD7BA",
"focus": "#7FB4CA",
"focusRing": "#7FB4CA50",
"cursor": "#DCD7BA",
"hover": "#363646",
"active": "#54546D"
},
"status": {
"error": "#E82424",
"errorForeground": "#DCD7BA",
"errorBackground": "#E8242420",
"errorBorder": "#E8242450",
"warning": "#FF9E3B",
"warningForeground": "#1F1F28",
"warningBackground": "#FF9E3B20",
"warningBorder": "#FF9E3B50",
"success": "#98BB6C",
"successForeground": "#1F1F28",
"successBackground": "#98BB6C20",
"successBorder": "#98BB6C50",
"info": "#7E9CD8",
"infoForeground": "#1F1F28",
"infoBackground": "#7E9CD820",
"infoBorder": "#7E9CD850"
},
"syntax": {
"base": {
"background": "#16161D",
"foreground": "#DCD7BA",
"comment": "#54546D",
"keyword": "#7E9CD8",
"string": "#98BB6C",
"number": "#FF9E3B",
"function": "#E6C384",
"variable": "#DCD7BA",
"type": "#C8C093",
"operator": "#C34043"
},
"tokens": {
"commentDoc": "#727169",
"stringEscape": "#DCD7BA",
"keywordImport": "#957FB8",
"storageModifier": "#7E9CD8",
"functionCall": "#E6C384",
"method": "#76946A",
"variableProperty": "#7E9CD8",
"variableOther": "#76946A",
"variableGlobal": "#D27E99",
"variableLocal": "#2A2A37",
"parameter": "#DCD7BA",
"constant": "#DCD7BA",
"class": "#E6C384",
"className": "#E6C384",
"interface": "#C8C093",
"struct": "#E6C384",
"enum": "#E6C384",
"typeParameter": "#E6C384",
"namespace": "#C8C093",
"module": "#C34043",
"tag": "#7E9CD8",
"jsxTag": "#D27E99",
"tagAttribute": "#C8C093",
"tagAttributeValue": "#98BB6C",
"boolean": "#C8C093",
"decorator": "#C8C093",
"label": "#D27E99",
"punctuation": "#54546D",
"macro": "#7E9CD8",
"preprocessor": "#D27E99",
"regex": "#98BB6C",
"url": "#7E9CD8",
"key": "#E6C384",
"exception": "#D27E99"
},
"highlights": {
"diffAdded": "#98BB6C",
"diffAddedBackground": "#76946A20",
"diffRemoved": "#C34043",
"diffRemovedBackground": "#E8242420",
"diffModified": "#7E9CD8",
"diffModifiedBackground": "#7E9CD820",
"lineNumber": "#363646",
"lineNumberActive": "#DCD7BA"
}
},
"markdown": {
"heading1": "#DCD7BA",
"heading2": "#DCD7BA",
"heading3": "#DCD7BA",
"heading4": "#DCD7BA",
"link": "#7FB4CA",
"linkHover": "#7E9CD8",
"inlineCode": "#98BB6C",
"inlineCodeBackground": "#16161D",
"blockquote": "#54546D",
"blockquoteBorder": "#363646",
"listMarker": "#FF9E3B99"
},
"chat": {
"userMessage": "#DCD7BA",
"userMessageBackground": "#2A2A37",
"assistantMessage": "#DCD7BA",
"assistantMessageBackground": "#2f2f3d",
"timestamp": "#54546D",
"divider": "#363646"
},
"tools": {
"background": "#16161D50",
"border": "#4a4a5f80",
"headerHover": "#36364650",
"icon": "#afad9c",
"title": "#DCD7BA",
"description": "#5A595B",
"edit": {
"added": "#98BB6C",
"addedBackground": "#98BB6C25",
"removed": "#C34043",
"removedBackground": "#C3404325",
"lineNumber": "#56566d"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/kanagawa-light.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "kanagawa-light",
"name": "Kanagawa",
"description": "A color scheme inspired by Japanese art and ink painting - light variant (Lotus)",
"version": "1.0.0",
"variant": "light",
"tags": ["light", "japanese", "lotus", "elegant"]
},
"colors": {
"primary": {
"base": "#4D699B",
"hover": "#6693BF",
"active": "#5D57A3",
"foreground": "#F2ECBC",
"muted": "#4D699B80",
"emphasis": "#6693BF"
},
"surface": {
"background": "#F2ECBC",
"foreground": "#545464",
"muted": "#E7DBA0",
"mutedForeground": "#717169",
"elevated": "#eae4bf",
"elevatedForeground": "#545464",
"overlay": "#54546433",
"subtle": "#f4fff0"
},
"interactive": {
"border": "#bfbaa4",
"borderHover": "#8A8980",
"borderFocus": "#4D699B",
"selection": "#e9f3e5cf",
"selectionForeground": "#545464",
"focus": "#4D699B",
"focusRing": "#4D699B40",
"cursor": "#545464",
"hover": "#e9f3e5a9",
"active": "#e9f3e5cf"
},
"status": {
"error": "#E82424",
"errorForeground": "#F2ECBC",
"errorBackground": "#E8242420",
"errorBorder": "#E8242450",
"warning": "#DE9800",
"warningForeground": "#545464",
"warningBackground": "#DE980020",
"warningBorder": "#DE980050",
"success": "#6F894E",
"successForeground": "#F2ECBC",
"successBackground": "#98BB6C20",
"successBorder": "#6F894E50",
"info": "#4D699B",
"infoForeground": "#F2ECBC",
"infoBackground": "#6693BF20",
"infoBorder": "#4D699B50"
},
"syntax": {
"base": {
"background": "#DCD5AC",
"foreground": "#545464",
"comment": "#716E61",
"keyword": "#4D699B",
"string": "#6F894E",
"number": "#836F4A",
"function": "#CC6D00",
"variable": "#545464",
"type": "#77713F",
"operator": "#C84053"
},
"tokens": {
"commentDoc": "#8A8980",
"stringEscape": "#545464",
"keywordImport": "#624C83",
"storageModifier": "#4D699B",
"functionCall": "#CC6D00",
"method": "#6E915F",
"variableProperty": "#4D699B",
"variableOther": "#6E915F",
"variableGlobal": "#B35B79",
"variableLocal": "#D5CEA3",
"parameter": "#545464",
"constant": "#545464",
"class": "#CC6D00",
"className": "#CC6D00",
"interface": "#77713F",
"struct": "#CC6D00",
"enum": "#CC6D00",
"typeParameter": "#CC6D00",
"namespace": "#77713F",
"module": "#C84053",
"tag": "#4D699B",
"jsxTag": "#B35B79",
"tagAttribute": "#77713F",
"tagAttributeValue": "#6F894E",
"boolean": "#77713F",
"decorator": "#77713F",
"label": "#B35B79",
"punctuation": "#716E61",
"macro": "#4D699B",
"preprocessor": "#B35B79",
"regex": "#6F894E",
"url": "#4D699B",
"key": "#CC6D00",
"exception": "#B35B79"
},
"highlights": {
"diffAdded": "#6F894E",
"diffAddedBackground": "#6F894E20",
"diffRemoved": "#C84053",
"diffRemovedBackground": "#C8405320",
"diffModified": "#4D699B",
"diffModifiedBackground": "#4D699B20",
"lineNumber": "#8A8980",
"lineNumberActive": "#545464"
}
},
"markdown": {
"heading1": "#545464",
"heading2": "#545464",
"heading3": "#545464",
"heading4": "#545464",
"link": "#5D57A3",
"linkHover": "#4D699B",
"inlineCode": "#6F894E",
"inlineCodeBackground": "#e7e2c7",
"blockquote": "#716E61",
"blockquoteBorder": "#716E61",
"listMarker": "#836F4A99"
},
"chat": {
"userMessage": "#545464",
"userMessageBackground": "#e6f2e1",
"assistantMessage": "#545464",
"assistantMessageBackground": "#F2ECBC",
"timestamp": "#716E61",
"divider": "#716E61"
},
"tools": {
"background": "#DCD5AC50",
"border": "#716E6180",
"headerHover": "#716E61",
"icon": "#8A8980",
"title": "#545464",
"description": "#8A8980",
"edit": {
"added": "#6F894E",
"addedBackground": "#6F894E25",
"removed": "#C84053",
"removedBackground": "#C8405325",
"lineNumber": "#8A8980"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/mono-dark.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "mono-dark",
"name": "Mono",
"description": "A pure monochromatic theme - dark variant with shades of grey",
"version": "1.0.0",
"variant": "dark",
"tags": ["dark", "monochrome", "minimal", "grayscale"]
},
"colors": {
"primary": {
"base": "#FFFFFF",
"hover": "#E5E5E5",
"active": "#CCCCCC",
"foreground": "#000000",
"muted": "#FFFFFF80",
"emphasis": "#FFFFFF"
},
"surface": {
"background": "#000000",
"foreground": "#E5E5E5",
"muted": "#0A0A0A",
"mutedForeground": "#808080",
"elevated": "#141414",
"elevatedForeground": "#E5E5E5",
"overlay": "#00000080",
"subtle": "#1A1A1A"
},
"interactive": {
"border": "#222222",
"borderHover": "#333333",
"borderFocus": "#FFFFFF",
"selection": "#ffffff1f",
"selectionForeground": "#E5E5E5",
"focus": "#FFFFFF",
"focusRing": "#FFFFFF50",
"cursor": "#E5E5E5",
"hover": "#ffffff1f",
"active": "#ffffff1f"
},
"status": {
"error": "#666666",
"errorForeground": "#000000",
"errorBackground": "#ffffff10",
"errorBorder": "#ffffff20",
"warning": "#999999",
"warningForeground": "#000000",
"warningBackground": "#ffffff12",
"warningBorder": "#ffffff25",
"success": "#E5E5E5",
"successForeground": "#000000",
"successBackground": "#ffffff18",
"successBorder": "#ffffff30",
"info": "#A6A6A6",
"infoForeground": "#000000",
"infoBackground": "#ffffff14",
"infoBorder": "#ffffff28"
},
"syntax": {
"base": {
"background": "#0A0A0A",
"foreground": "#E5E5E5",
"comment": "#666666",
"keyword": "#FFFFFF",
"string": "#B3B3B3",
"number": "#999999",
"function": "#E5E5E5",
"variable": "#CCCCCC",
"type": "#D9D9D9",
"operator": "#808080"
},
"tokens": {
"commentDoc": "#595959",
"stringEscape": "#E5E5E5",
"keywordImport": "#FFFFFF",
"storageModifier": "#E5E5E5",
"functionCall": "#D9D9D9",
"method": "#CCCCCC",
"variableProperty": "#B3B3B3",
"variableOther": "#CCCCCC",
"variableGlobal": "#999999",
"variableLocal": "#1A1A1A",
"parameter": "#CCCCCC",
"constant": "#E5E5E5",
"class": "#FFFFFF",
"className": "#FFFFFF",
"interface": "#D9D9D9",
"struct": "#E5E5E5",
"enum": "#E5E5E5",
"typeParameter": "#D9D9D9",
"namespace": "#CCCCCC",
"module": "#B3B3B3",
"tag": "#E5E5E5",
"jsxTag": "#FFFFFF",
"tagAttribute": "#B3B3B3",
"tagAttributeValue": "#999999",
"boolean": "#CCCCCC",
"decorator": "#999999",
"label": "#808080",
"punctuation": "#666666",
"macro": "#D9D9D9",
"preprocessor": "#B3B3B3",
"regex": "#A6A6A6",
"url": "#CCCCCC",
"key": "#E5E5E5",
"exception": "#999999"
},
"highlights": {
"diffAdded": "#E5E5E5",
"diffAddedBackground": "#ffffff18",
"diffRemoved": "#666666",
"diffRemovedBackground": "#ffffff0d",
"diffModified": "#B3B3B3",
"diffModifiedBackground": "#ffffff12",
"lineNumber": "#404040",
"lineNumberActive": "#E5E5E5"
}
},
"markdown": {
"heading1": "#FFFFFF",
"heading2": "#F2F2F2",
"heading3": "#E5E5E5",
"heading4": "#D9D9D9",
"link": "#CCCCCC",
"linkHover": "#FFFFFF",
"inlineCode": "#B3B3B3",
"inlineCodeBackground": "#1A1A1A",
"blockquote": "#808080",
"blockquoteBorder": "#333333",
"listMarker": "#99999999"
},
"chat": {
"userMessage": "#E5E5E5",
"userMessageBackground": "#1A1A1A",
"assistantMessage": "#E5E5E5",
"assistantMessageBackground": "#000000",
"timestamp": "#808080",
"divider": "#333333"
},
"tools": {
"background": "#0A0A0A50",
"border": "#4040409d",
"headerHover": "#33333350",
"icon": "#A6A6A6",
"title": "#E5E5E5",
"description": "#808080",
"edit": {
"added": "#E5E5E5",
"addedBackground": "#ffffff20",
"removed": "#666666",
"removedBackground": "#ffffff10",
"lineNumber": "#404040"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/mono-light.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "mono-light",
"name": "Mono",
"description": "A pure monochromatic theme - light variant with shades of grey",
"version": "1.0.0",
"variant": "light",
"tags": ["light", "monochrome", "minimal", "grayscale"]
},
"colors": {
"primary": {
"base": "#000000",
"hover": "#1A1A1A",
"active": "#333333",
"foreground": "#FFFFFF",
"muted": "#00000080",
"emphasis": "#000000"
},
"surface": {
"background": "#FFFFFF",
"foreground": "#1A1A1A",
"muted": "#F5F5F5",
"mutedForeground": "#666666",
"elevated": "#FAFAFA",
"elevatedForeground": "#1A1A1A",
"overlay": "#00000020",
"subtle": "#F0F0F0"
},
"interactive": {
"border": "#D9D9D9",
"borderHover": "#B3B3B3",
"borderFocus": "#000000",
"selection": "#00000015",
"selectionForeground": "#1A1A1A",
"focus": "#000000",
"focusRing": "#00000040",
"cursor": "#1A1A1A",
"hover": "#00000010",
"active": "#00000015"
},
"status": {
"error": "#999999",
"errorForeground": "#FFFFFF",
"errorBackground": "#00000008",
"errorBorder": "#00000015",
"warning": "#666666",
"warningForeground": "#FFFFFF",
"warningBackground": "#0000000a",
"warningBorder": "#00000018",
"success": "#1A1A1A",
"successForeground": "#FFFFFF",
"successBackground": "#00000012",
"successBorder": "#00000020",
"info": "#595959",
"infoForeground": "#FFFFFF",
"infoBackground": "#0000000c",
"infoBorder": "#0000001a"
},
"syntax": {
"base": {
"background": "#F5F5F5",
"foreground": "#1A1A1A",
"comment": "#999999",
"keyword": "#000000",
"string": "#4D4D4D",
"number": "#666666",
"function": "#1A1A1A",
"variable": "#333333",
"type": "#262626",
"operator": "#808080"
},
"tokens": {
"commentDoc": "#ABABAB",
"stringEscape": "#1A1A1A",
"keywordImport": "#000000",
"storageModifier": "#1A1A1A",
"functionCall": "#262626",
"method": "#333333",
"variableProperty": "#4D4D4D",
"variableOther": "#333333",
"variableGlobal": "#666666",
"variableLocal": "#E5E5E5",
"parameter": "#333333",
"constant": "#1A1A1A",
"class": "#000000",
"className": "#000000",
"interface": "#262626",
"struct": "#1A1A1A",
"enum": "#1A1A1A",
"typeParameter": "#262626",
"namespace": "#333333",
"module": "#4D4D4D",
"tag": "#1A1A1A",
"jsxTag": "#000000",
"tagAttribute": "#4D4D4D",
"tagAttributeValue": "#666666",
"boolean": "#333333",
"decorator": "#666666",
"label": "#808080",
"punctuation": "#999999",
"macro": "#262626",
"preprocessor": "#4D4D4D",
"regex": "#595959",
"url": "#333333",
"key": "#1A1A1A",
"exception": "#666666"
},
"highlights": {
"diffAdded": "#1A1A1A",
"diffAddedBackground": "#00000012",
"diffRemoved": "#999999",
"diffRemovedBackground": "#00000008",
"diffModified": "#595959",
"diffModifiedBackground": "#0000000c",
"lineNumber": "#CCCCCC",
"lineNumberActive": "#1A1A1A"
}
},
"markdown": {
"heading1": "#000000",
"heading2": "#0D0D0D",
"heading3": "#1A1A1A",
"heading4": "#262626",
"link": "#333333",
"linkHover": "#000000",
"inlineCode": "#4D4D4D",
"inlineCodeBackground": "#E5E5E5",
"blockquote": "#808080",
"blockquoteBorder": "#D9D9D9",
"listMarker": "#66666699"
},
"chat": {
"userMessage": "#1A1A1A",
"userMessageBackground": "#E5E5E5",
"assistantMessage": "#1A1A1A",
"assistantMessageBackground": "#FFFFFF",
"timestamp": "#808080",
"divider": "#D9D9D9"
},
"tools": {
"background": "#F5F5F550",
"border": "#B3B3B380",
"headerHover": "#D9D9D9",
"icon": "#666666",
"title": "#1A1A1A",
"description": "#808080",
"edit": {
"added": "#1A1A1A",
"addedBackground": "#00000015",
"removed": "#999999",
"removedBackground": "#0000000a",
"lineNumber": "#CCCCCC"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/mono-plus-dark.json
+155
View File
@@ -0,0 +1,155 @@
{
"metadata": {
"id": "mono-plus-dark",
"name": "Mono Plus",
"description": "A pure monochromatic theme - dark variant with slight colors added",
"version": "1.0.0",
"variant": "dark",
"tags": ["dark", "monochrome", "minimal"]
},
"colors": {
"primary": {
"base": "#a2bee8",
"hover": "#E5E5E5",
"active": "#CCCCCC",
"foreground": "#000000",
"muted": "#FFFFFF80",
"emphasis": "#FFFFFF"
},
"surface": {
"background": "#000000",
"foreground": "#E5E5E5",
"muted": "#0A0A0A",
"mutedForeground": "#808080",
"elevated": "#141414",
"elevatedForeground": "#E5E5E5",
"overlay": "#00000080",
"subtle": "#1A1A1A"
},
"interactive": {
"border": "#222222",
"borderHover": "#333333",
"borderFocus": "#FFFFFF",
"selection": "#ffffff1f",
"selectionForeground": "#E5E5E5",
"focus": "#FFFFFF",
"focusRing": "#FFFFFF50",
"cursor": "#E5E5E5",
"hover": "#ffffff1f",
"active": "#ffffff1f"
},
"status": {
"error": "#9e6a6a",
"errorForeground": "#0a0a0a",
"errorBackground": "#9e6a6a20",
"errorBorder": "#9e6a6a50",
"warning": "#9e8a6a",
"warningForeground": "#0a0a0a",
"warningBackground": "#9e8a6a20",
"warningBorder": "#9e8a6a50",
"success": "#6a8e6a",
"successForeground": "#0a0a0a",
"successBackground": "#6a8e6a20",
"successBorder": "#6a8e6a50",
"info": "#6a7e9e",
"infoForeground": "#0a0a0a",
"infoBackground": "#6a7e9e20",
"infoBorder": "#6a7e9e50"
},
"syntax": {
"base": {
"background": "#0a0a0a",
"foreground": "#d4d4d4",
"comment": "#8c8c8c",
"keyword": "#dccdbeff",
"string": "#b6d8e6ff",
"number": "#e3bdadff",
"function": "#a2bee8",
"variable": "#d4d4d4",
"type": "#edcbb8ff",
"operator": "#dccdbeff"
},
"tokens": {
"commentDoc": "#8c8c8c",
"stringEscape": "#b6d8e6ff",
"keywordImport": "#dccdbeff",
"storageModifier": "#dccdbeff",
"functionCall": "#a2bee8",
"method": "#a2bee8",
"variableProperty": "#c0dcc0ff",
"variableOther": "#d4d4d4",
"class": "#edcbb8ff",
"className": "#edcbb8ff",
"interface": "#edcbb8ff",
"tag": "#a2bee8",
"boolean": "#e3bdadff",
"url": "#b6d8e6ff",
"key": "#c0dcc0ff"
},
"highlights": {
"diffAdded": "#6a8e6a",
"diffAddedBackground": "#6a8e6a20",
"diffRemoved": "#9e6a6a",
"diffRemovedBackground": "#9e6a6a20",
"lineNumber": "#7c7c7c",
"lineNumberActive": "#d4d4d4"
}
},
"markdown": {
"heading1": "#FFFFFF",
"heading2": "#F2F2F2",
"heading3": "#E5E5E5",
"heading4": "#D9D9D9",
"link": "#CCCCCC",
"linkHover": "#a2bee8",
"inlineCode": "#a2bee8",
"inlineCodeBackground": "#1A1A1A",
"blockquote": "#808080",
"blockquoteBorder": "#333333",
"listMarker": "#99999999"
},
"chat": {
"userMessage": "#E5E5E5",
"userMessageBackground": "#1A1A1A",
"assistantMessage": "#E5E5E5",
"assistantMessageBackground": "#000000",
"timestamp": "#808080",
"divider": "#333333"
},
"tools": {
"background": "#0A0A0A50",
"border": "#4040409d",
"headerHover": "#33333350",
"icon": "#A6A6A6",
"title": "#E5E5E5",
"description": "#808080",
"edit": {
"added": "#6a8e6a",
"addedBackground": "#6a8e6a20",
"removed": "#9e6a6a",
"removedBackground": "#9e6a6a20",
"lineNumber": "#2a2a2a"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/mono-plus-light.json
+155
View File
@@ -0,0 +1,155 @@
{
"metadata": {
"id": "mono-plus-light",
"name": "Mono Plus",
"description": "A pure monochromatic theme - light variant with slight colors added",
"version": "1.0.0",
"variant": "light",
"tags": ["light", "monochrome", "minimal"]
},
"colors": {
"primary": {
"base": "#4a6a9e",
"hover": "#1A1A1A",
"active": "#333333",
"foreground": "#FFFFFF",
"muted": "#00000080",
"emphasis": "#000000"
},
"surface": {
"background": "#FFFFFF",
"foreground": "#1A1A1A",
"muted": "#F5F5F5",
"mutedForeground": "#666666",
"elevated": "#FAFAFA",
"elevatedForeground": "#1A1A1A",
"overlay": "#00000020",
"subtle": "#F0F0F0"
},
"interactive": {
"border": "#D9D9D9",
"borderHover": "#B3B3B3",
"borderFocus": "#000000",
"selection": "#00000015",
"selectionForeground": "#1A1A1A",
"focus": "#000000",
"focusRing": "#00000040",
"cursor": "#1A1A1A",
"hover": "#00000010",
"active": "#00000015"
},
"status": {
"error": "#8a5a5a",
"errorForeground": "#fafafa",
"errorBackground": "#8a5a5a18",
"errorBorder": "#8a5a5a40",
"warning": "#8a7a5a",
"warningForeground": "#fafafa",
"warningBackground": "#8a7a5a18",
"warningBorder": "#8a7a5a40",
"success": "#5a7a5a",
"successForeground": "#fafafa",
"successBackground": "#5a7a5a18",
"successBorder": "#5a7a5a40",
"info": "#5a6a8a",
"infoForeground": "#fafafa",
"infoBackground": "#5a6a8a18",
"infoBorder": "#5a6a8a40"
},
"syntax": {
"base": {
"background": "#f5f5f5",
"foreground": "#2a2a2a",
"comment": "#8c8c8c",
"keyword": "#6a5a4a",
"string": "#4a6a7a",
"number": "#7a5a4a",
"function": "#4a6a9e",
"variable": "#2a2a2a",
"type": "#6a5040",
"operator": "#6a5a4a"
},
"tokens": {
"commentDoc": "#8c8c8c",
"stringEscape": "#4a6a7a",
"keywordImport": "#6a5a4a",
"storageModifier": "#6a5a4a",
"functionCall": "#4a6a9e",
"method": "#4a6a9e",
"variableProperty": "#4a6a4a",
"variableOther": "#2a2a2a",
"class": "#6a5040",
"className": "#6a5040",
"interface": "#6a5040",
"tag": "#4a6a9e",
"boolean": "#7a5a4a",
"url": "#4a6a7a",
"key": "#4a6a4a"
},
"highlights": {
"diffAdded": "#5a7a5a",
"diffAddedBackground": "#5a7a5a18",
"diffRemoved": "#8a5a5a",
"diffRemovedBackground": "#8a5a5a18",
"lineNumber": "#b0b0b0",
"lineNumberActive": "#2a2a2a"
}
},
"markdown": {
"heading1": "#000000",
"heading2": "#0D0D0D",
"heading3": "#1A1A1A",
"heading4": "#262626",
"link": "#333333",
"linkHover": "#4a6a9e",
"inlineCode": "#4a6a9e",
"inlineCodeBackground": "#f1efef",
"blockquote": "#808080",
"blockquoteBorder": "#D9D9D9",
"listMarker": "#66666699"
},
"chat": {
"userMessage": "#1A1A1A",
"userMessageBackground": "#E5E5E5",
"assistantMessage": "#1A1A1A",
"assistantMessageBackground": "#FFFFFF",
"timestamp": "#808080",
"divider": "#D9D9D9"
},
"tools": {
"background": "#F5F5F550",
"border": "#B3B3B380",
"headerHover": "#D9D9D9",
"icon": "#666666",
"title": "#1A1A1A",
"description": "#808080",
"edit": {
"added": "#5a7a5a",
"addedBackground": "#5a7a5a18",
"removed": "#8a5a5a",
"removedBackground": "#8a5a5a18",
"lineNumber": "#d0d0d0"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/monokai-dark.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "monokai-dark",
"name": "Monokai",
"description": "Monokai",
"version": "1.0.0",
"variant": "dark",
"tags": [ "dark", "palette" ]
},
"colors": {
"primary": {
"base": "#AE81FF",
"hover": "#9973DD",
"active": "#BA94FF",
"foreground": "#23241E",
"muted": "#AE81FF80",
"emphasis": "#9973DD"
},
"surface": {
"background": "#23241E",
"foreground": "#F8F8F2",
"muted": "#282a20",
"mutedForeground": "#C5C5C0",
"elevated": "#21221a",
"elevatedForeground": "#F8F8F2",
"overlay": "#FFFFFF20",
"subtle": "#36372a"
},
"interactive": {
"border": "#343528",
"borderHover": "#393A2D",
"borderFocus": "#555741",
"selection": "#434d3cfe",
"selectionForeground": "#FFFFFF",
"focus": "#AE81FF",
"focusRing": "#AE81FF40",
"cursor": "#FFFFFF",
"hover": "#36372a",
"active": "#36382e"
},
"status": {
"error": "#F92672",
"errorForeground": "#23241E",
"errorBackground": "#F9267220",
"errorBorder": "#F9267250",
"warning": "#FD971F",
"warningForeground": "#23241E",
"warningBackground": "#FD971F20",
"warningBorder": "#FD971F50",
"success": "#A6E22E",
"successForeground": "#23241E",
"successBackground": "#A6E22E20",
"successBorder": "#A6E22E50",
"info": "#66D9EF",
"infoForeground": "#23241E",
"infoBackground": "#66D9EF20",
"infoBorder": "#66D9EF50"
},
"syntax": {
"base": {
"background": "#27281F",
"foreground": "#F8F8F2",
"comment": "#C5C5C0",
"keyword": "#AE81FF",
"string": "#A6E22E",
"number": "#F92672",
"function": "#AE81FF",
"variable": "#F8F8F2",
"type": "#FD971F",
"operator": "#F92672"
},
"tokens": {
"boolean": "#FD971F",
"class": "#AE81FF",
"className": "#AE81FF",
"commentDoc": "#ADADA8",
"constant": "#66D9EF",
"decorator": "#FD971F",
"enum": "#AE81FF",
"exception": "#F92672",
"functionCall": "#AE81FF",
"interface": "#FD971F",
"jsxTag": "#AE81FF",
"key": "#AE81FF",
"keywordImport": "#F92672",
"label": "#F92672",
"macro": "#66D9EF",
"method": "#A6E22E",
"module": "#F92672",
"namespace": "#FD971F",
"parameter": "#F8F8F2",
"preprocessor": "#F92672",
"punctuation": "#C5C5C0",
"regex": "#A6E22E",
"storageModifier": "#66D9EF",
"stringEscape": "#FFFFFF",
"struct": "#AE81FF",
"tag": "#AE81FF",
"tagAttribute": "#FD971F",
"tagAttributeValue": "#A6E22E",
"typeParameter": "#FD971F",
"url": "#66D9EF",
"variableGlobal": "#AE81FF",
"variableLocal": "#25261F",
"variableOther": "#A6E22E",
"variableProperty": "#66D9EF"
},
"highlights": {
"diffAdded": "#A6E22E",
"diffAddedBackground": "#1E2A1D",
"diffModified": "#66D9EF",
"diffModifiedBackground": "#2F2F24",
"diffRemoved": "#F92672",
"diffRemovedBackground": "#301C24",
"lineNumber": "#454639",
"lineNumberActive": "#FFFFFF"
}
},
"markdown": {
"heading1": "#F8F8F2",
"heading2": "#F8F8F2",
"heading3": "#F8F8F2",
"heading4": "#F8F8F2",
"link": "#66D9EF",
"linkHover": "#AE81FF",
"inlineCode": "#A6E22E",
"inlineCodeBackground": "#27281F",
"blockquote": "#FD971F",
"blockquoteBorder": "#343528",
"listMarker": "#AE81FF99"
},
"chat": {
"userMessage": "#F8F8F2",
"userMessageBackground": "#36372a",
"assistantMessage": "#F8F8F2",
"assistantMessageBackground": "#23241E",
"timestamp": "#C5C5C0",
"divider": "#343528"
},
"tools": {
"background": "#27281F80",
"border": "#4d4f3c80",
"headerHover": "#292A23",
"icon": "#C5C5C0",
"title": "#F8F8F2",
"description": "#C5C5C0",
"edit": {
"added": "#A6E22E",
"addedBackground": "#A6E22E25",
"removed": "#bd215a",
"removedBackground": "#F9267225",
"lineNumber": "#505142"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/monokai-light.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "monokai-light",
"name": "Monokai",
"description": "Monokai",
"version": "1.0.0",
"variant": "light",
"tags": [ "light", "palette" ]
},
"colors": {
"primary": {
"base": "#BF7BFF",
"hover": "#CB94FB",
"active": "#A76CDB",
"foreground": "#FDF8EC",
"muted": "#BF7BFF80",
"emphasis": "#CB94FB"
},
"surface": {
"background": "#FDF8EC",
"foreground": "#292318",
"muted": "#F8F2E6",
"mutedForeground": "#6D5C40",
"elevated": "#FBF5E8",
"elevatedForeground": "#292318",
"overlay": "#1C150C20",
"subtle": "#F7EFDD"
},
"interactive": {
"border": "#E9E0CF",
"borderHover": "#DFD5C3",
"borderFocus": "#B6A893",
"selection": "#1C150C22",
"selectionForeground": "#1C150C",
"focus": "#BF7BFF",
"focusRing": "#BF7BFF40",
"cursor": "#1C150C",
"hover": "#e6e0d5",
"active": "#FBF5E8"
},
"status": {
"error": "#E54B4B",
"errorForeground": "#FDF8EC",
"errorBackground": "#E54B4B20",
"errorBorder": "#E54B4B50",
"warning": "#F1A948",
"warningForeground": "#FDF8EC",
"warningBackground": "#F1A94820",
"warningBorder": "#F1A94850",
"success": "#4FB54B",
"successForeground": "#FDF8EC",
"successBackground": "#4FB54B20",
"successBorder": "#4FB54B50",
"info": "#2D9AD7",
"infoForeground": "#FDF8EC",
"infoBackground": "#2D9AD720",
"infoBorder": "#2D9AD750"
},
"syntax": {
"base": {
"background": "#F8F2E6",
"foreground": "#292318",
"comment": "#6D5C40",
"keyword": "#BF7BFF",
"string": "#4FB54B",
"number": "#D9487C",
"function": "#BF7BFF",
"variable": "#292318",
"type": "#F1A948",
"operator": "#D9487C"
},
"tokens": {
"boolean": "#F1A948",
"class": "#BF7BFF",
"className": "#BF7BFF",
"commentDoc": "#B5AA96",
"constant": "#2D9AD7",
"decorator": "#F1A948",
"enum": "#BF7BFF",
"exception": "#D9487C",
"functionCall": "#BF7BFF",
"interface": "#F1A948",
"jsxTag": "#BF7BFF",
"key": "#BF7BFF",
"keywordImport": "#D9487C",
"label": "#D9487C",
"macro": "#2D9AD7",
"method": "#4FB54B",
"module": "#D9487C",
"namespace": "#F1A948",
"parameter": "#292318",
"preprocessor": "#D9487C",
"punctuation": "#6D5C40",
"regex": "#4FB54B",
"storageModifier": "#2D9AD7",
"stringEscape": "#1C150C",
"struct": "#BF7BFF",
"tag": "#BF7BFF",
"tagAttribute": "#F1A948",
"tagAttributeValue": "#4FB54B",
"typeParameter": "#F1A948",
"url": "#2D9AD7",
"variableGlobal": "#BF7BFF",
"variableLocal": "#FBF5E8",
"variableOther": "#4FB54B",
"variableProperty": "#2D9AD7"
},
"highlights": {
"diffAdded": "#4FB54B",
"diffAddedBackground": "#E8F7E1",
"diffModified": "#2D9AD7",
"diffModifiedBackground": "#E9E0D0",
"diffRemoved": "#E54B4B",
"diffRemovedBackground": "#FDE5E4",
"lineNumber": "#CABFAD",
"lineNumberActive": "#1C150C"
}
},
"markdown": {
"heading1": "#292318",
"heading2": "#292318",
"heading3": "#292318",
"heading4": "#292318",
"link": "#2D9AD7",
"linkHover": "#BF7BFF",
"inlineCode": "#4FB54B",
"inlineCodeBackground": "#F8F2E6",
"blockquote": "#F1A948",
"blockquoteBorder": "#E9E0CF",
"listMarker": "#BF7BFF99"
},
"chat": {
"userMessage": "#292318",
"userMessageBackground": "#F8F2E6",
"assistantMessage": "#292318",
"assistantMessageBackground": "#FDF8EC",
"timestamp": "#6D5C40",
"divider": "#E9E0CF"
},
"tools": {
"background": "#F8F2E680",
"border": "#d0c8b880",
"headerHover": "#F7EFDD",
"icon": "#6D5C40",
"title": "#292318",
"description": "#6D5C40",
"edit": {
"added": "#4FB54B",
"addedBackground": "#4FB54B25",
"removed": "#E54B4B",
"removedBackground": "#E54B4B25",
"lineNumber": "#bfb5a4"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/nightowl-dark.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "nightowl-dark",
"name": "Night Owl",
"description": "Night Owl",
"version": "1.0.0",
"variant": "dark",
"tags": [ "dark", "palette" ]
},
"colors": {
"primary": {
"base": "#82AAFF",
"hover": "#6F94DF",
"active": "#95B7FF",
"foreground": "#011627",
"muted": "#82AAFF80",
"emphasis": "#6F94DF"
},
"surface": {
"background": "#011627",
"foreground": "#D6DEEB",
"muted": "#0B253A",
"mutedForeground": "#7a9ebc",
"elevated": "#001122",
"elevatedForeground": "#D6DEEB",
"overlay": "#FFFFFF20",
"subtle": "#0f283f"
},
"interactive": {
"border": "#1D3B53",
"borderHover": "#234561",
"borderFocus": "#82AAFF",
"selection": "#555d6d94",
"selectionForeground": "#FFFFFF",
"focus": "#82AAFF",
"focusRing": "#82AAFF40",
"cursor": "#FFFFFF",
"hover": "#555d6d68",
"active": "#555d6d94"
},
"status": {
"error": "#EF5350",
"errorForeground": "#011627",
"errorBackground": "#EF535020",
"errorBorder": "#EF535050",
"warning": "#ECC48D",
"warningForeground": "#011627",
"warningBackground": "#ECC48D20",
"warningBorder": "#ECC48D50",
"success": "#C5E478",
"successForeground": "#011627",
"successBackground": "#C5E47820",
"successBorder": "#C5E47850",
"info": "#82AAFF",
"infoForeground": "#011627",
"infoBackground": "#82AAFF20",
"infoBorder": "#82AAFF50"
},
"syntax": {
"base": {
"background": "#0B253A",
"foreground": "#D6DEEB",
"comment": "#5F7E97",
"keyword": "#82AAFF",
"string": "#ECC48D",
"number": "#F78C6C",
"function": "#82AAFF",
"variable": "#D6DEEB",
"type": "#C5E478",
"operator": "#F78C6C"
},
"tokens": {
"boolean": "#C5E478",
"class": "#82AAFF",
"className": "#82AAFF",
"commentDoc": "#516E86",
"constant": "#7FDBCA",
"decorator": "#C5E478",
"enum": "#82AAFF",
"exception": "#F78C6C",
"functionCall": "#82AAFF",
"interface": "#C5E478",
"jsxTag": "#82AAFF",
"key": "#82AAFF",
"keywordImport": "#F78C6C",
"label": "#F78C6C",
"macro": "#82AAFF",
"method": "#C5E478",
"module": "#F78C6C",
"namespace": "#C5E478",
"parameter": "#D6DEEB",
"preprocessor": "#F78C6C",
"punctuation": "#5F7E97",
"regex": "#ECC48D",
"storageModifier": "#82AAFF",
"stringEscape": "#FFFFFF",
"struct": "#82AAFF",
"tag": "#82AAFF",
"tagAttribute": "#C5E478",
"tagAttributeValue": "#ECC48D",
"typeParameter": "#C5E478",
"url": "#7FDBCA",
"variableGlobal": "#82AAFF",
"variableLocal": "#001122",
"variableOther": "#C5E478",
"variableProperty": "#7FDBCA"
},
"highlights": {
"diffAdded": "#C5E478",
"diffAddedBackground": "#0A2E1A",
"diffModified": "#82AAFF",
"diffModifiedBackground": "#0B253A",
"diffRemoved": "#EF5350",
"diffRemovedBackground": "#2D1B1B",
"lineNumber": "#82AAFF",
"lineNumberActive": "#FFFFFF"
}
},
"markdown": {
"heading1": "#D6DEEB",
"heading2": "#D6DEEB",
"heading3": "#D6DEEB",
"heading4": "#D6DEEB",
"link": "#7FDBCA",
"linkHover": "#82AAFF",
"inlineCode": "#C5E478",
"inlineCodeBackground": "#0B253A",
"blockquote": "#5F7E97",
"blockquoteBorder": "#1D3B53",
"listMarker": "#82AAFF99"
},
"chat": {
"userMessage": "#D6DEEB",
"userMessageBackground": "#0f283f",
"assistantMessage": "#D6DEEB",
"assistantMessageBackground": "#011627",
"timestamp": "#5F7E97",
"divider": "#1D3B53"
},
"tools": {
"background": "#0B253A80",
"border": "#24496780",
"headerHover": "#000C17",
"icon": "#5F7E97",
"title": "#D6DEEB",
"description": "#5F7E97",
"edit": {
"added": "#C5E478",
"addedBackground": "#C5E47825",
"removed": "#EF5350",
"removedBackground": "#EF535025",
"lineNumber": "#58698f"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/nightowl-light.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "nightowl-light",
"name": "Night Owl",
"description": "Night Owl",
"version": "1.0.0",
"variant": "light",
"tags": [ "light", "palette" ]
},
"colors": {
"primary": {
"base": "#4876D6",
"hover": "#6C91DD",
"active": "#4168BA",
"foreground": "#FBFBFB",
"muted": "#4876D680",
"emphasis": "#6C91DD"
},
"surface": {
"background": "#FBFBFB",
"foreground": "#403F53",
"muted": "#F0F0F0",
"mutedForeground": "#555a5a",
"elevated": "#FFFFFF",
"elevatedForeground": "#403F53",
"overlay": "#1A1A1A20",
"subtle": "#F0F0F0"
},
"interactive": {
"border": "#D9D9D9",
"borderHover": "#CCCCCC",
"borderFocus": "#4876D6",
"selection": "#706e6e22",
"selectionForeground": "#1A1A1A",
"focus": "#4876D6",
"focusRing": "#4876D640",
"cursor": "#1A1A1A",
"hover": "#706e6e16",
"active": "#706e6e22"
},
"status": {
"error": "#DE3D3B",
"errorForeground": "#FBFBFB",
"errorBackground": "#DE3D3B20",
"errorBorder": "#DE3D3B50",
"warning": "#C96765",
"warningForeground": "#FBFBFB",
"warningBackground": "#C9676520",
"warningBorder": "#C9676550",
"success": "#2AA298",
"successForeground": "#FBFBFB",
"successBackground": "#2AA29820",
"successBorder": "#2AA29850",
"info": "#4876D6",
"infoForeground": "#FBFBFB",
"infoBackground": "#4876D620",
"infoBorder": "#4876D650"
},
"syntax": {
"base": {
"background": "#F0F0F0",
"foreground": "#403F53",
"comment": "#7A8181",
"keyword": "#4876D6",
"string": "#C96765",
"number": "#AA0982",
"function": "#4876D6",
"variable": "#403F53",
"type": "#994CC3",
"operator": "#AA0982"
},
"tokens": {
"boolean": "#994CC3",
"class": "#4876D6",
"className": "#4876D6",
"commentDoc": "#BBBEBE",
"constant": "#2AA298",
"decorator": "#994CC3",
"enum": "#4876D6",
"exception": "#AA0982",
"functionCall": "#4876D6",
"interface": "#994CC3",
"jsxTag": "#4876D6",
"key": "#4876D6",
"keywordImport": "#AA0982",
"label": "#AA0982",
"macro": "#4876D6",
"method": "#2AA298",
"module": "#AA0982",
"namespace": "#994CC3",
"parameter": "#403F53",
"preprocessor": "#AA0982",
"punctuation": "#7A8181",
"regex": "#C96765",
"storageModifier": "#4876D6",
"stringEscape": "#1A1A1A",
"struct": "#4876D6",
"tag": "#4876D6",
"tagAttribute": "#994CC3",
"tagAttributeValue": "#C96765",
"typeParameter": "#994CC3",
"url": "#2AA298",
"variableGlobal": "#4876D6",
"variableLocal": "#FFFFFF",
"variableOther": "#2AA298",
"variableProperty": "#2AA298"
},
"highlights": {
"diffAdded": "#2AA298",
"diffAddedBackground": "#EAF8F6",
"diffModified": "#4876D6",
"diffModifiedBackground": "#E8F0FC",
"diffRemoved": "#DE3D3B",
"diffRemovedBackground": "#FBE9E9",
"lineNumber": "#4876D6",
"lineNumberActive": "#1A1A1A"
}
},
"markdown": {
"heading1": "#403F53",
"heading2": "#403F53",
"heading3": "#403F53",
"heading4": "#403F53",
"link": "#2AA298",
"linkHover": "#4876D6",
"inlineCode": "#2AA298",
"inlineCodeBackground": "#F0F0F0",
"blockquote": "#7A8181",
"blockquoteBorder": "#D9D9D9",
"listMarker": "#4876D699"
},
"chat": {
"userMessage": "#403F53",
"userMessageBackground": "#F0F0F0",
"assistantMessage": "#403F53",
"assistantMessageBackground": "#FBFBFB",
"timestamp": "#7A8181",
"divider": "#D9D9D9"
},
"tools": {
"background": "#F0F0F080",
"border": "#D9D9D980",
"headerHover": "#FFFFFF",
"icon": "#7A8181",
"title": "#403F53",
"description": "#7A8181",
"edit": {
"added": "#2AA298",
"addedBackground": "#2AA29825",
"removed": "#DE3D3B",
"removedBackground": "#DE3D3B25",
"lineNumber": "#4876D6"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/nord-dark.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "nord-dark",
"name": "Nord",
"description": "Nord",
"version": "1.0.0",
"variant": "dark",
"tags": [ "dark", "palette" ]
},
"colors": {
"primary": {
"base": "#88C0D0",
"hover": "#78A9B8",
"active": "#99C9D7",
"foreground": "#1F2430",
"muted": "#88C0D080",
"emphasis": "#78A9B8"
},
"surface": {
"background": "#1F2430",
"foreground": "#E5E9F0",
"muted": "#222938",
"mutedForeground": "#A4ADBF",
"elevated": "#1C202A",
"elevatedForeground": "#E5E9F0",
"overlay": "#F8FAFC20",
"subtle": "#272f40"
},
"interactive": {
"border": "#343A47",
"borderHover": "#383F50",
"borderFocus": "#545B78",
"selection": "#3e4a56fe",
"selectionForeground": "#F8FAFC",
"focus": "#88C0D0",
"focusRing": "#88C0D040",
"cursor": "#F8FAFC",
"hover": "#3e4a5692",
"active": "#3e4a56fe"
},
"status": {
"error": "#BF616A",
"errorForeground": "#1F2430",
"errorBackground": "#BF616A20",
"errorBorder": "#BF616A50",
"warning": "#D08770",
"warningForeground": "#1F2430",
"warningBackground": "#D0877020",
"warningBorder": "#D0877050",
"success": "#A3BE8C",
"successForeground": "#1F2430",
"successBackground": "#A3BE8C20",
"successBorder": "#A3BE8C50",
"info": "#81A1C1",
"infoForeground": "#1F2430",
"infoBackground": "#81A1C120",
"infoBorder": "#81A1C150"
},
"syntax": {
"base": {
"background": "#222938",
"foreground": "#E5E9F0",
"comment": "#A4ADBF",
"keyword": "#88C0D0",
"string": "#A3BE8C",
"number": "#D57780",
"function": "#88C0D0",
"variable": "#E5E9F0",
"type": "#EAC196",
"operator": "#D57780"
},
"tokens": {
"boolean": "#EAC196",
"class": "#88C0D0",
"className": "#88C0D0",
"commentDoc": "#9098AA",
"constant": "#81A1C1",
"decorator": "#EAC196",
"enum": "#88C0D0",
"exception": "#D57780",
"functionCall": "#88C0D0",
"interface": "#EAC196",
"jsxTag": "#88C0D0",
"key": "#88C0D0",
"keywordImport": "#D57780",
"label": "#D57780",
"macro": "#81A1C1",
"method": "#A3BE8C",
"module": "#D57780",
"namespace": "#EAC196",
"parameter": "#E5E9F0",
"preprocessor": "#D57780",
"punctuation": "#A4ADBF",
"regex": "#A3BE8C",
"storageModifier": "#81A1C1",
"stringEscape": "#F8FAFC",
"struct": "#88C0D0",
"tag": "#88C0D0",
"tagAttribute": "#EAC196",
"tagAttributeValue": "#A3BE8C",
"typeParameter": "#EAC196",
"url": "#81A1C1",
"variableGlobal": "#88C0D0",
"variableLocal": "#1C202A",
"variableOther": "#A3BE8C",
"variableProperty": "#81A1C1"
},
"highlights": {
"diffAdded": "#A3BE8C",
"diffAddedBackground": "#1F2E33",
"diffModified": "#81A1C1",
"diffModifiedBackground": "#222B3A",
"diffRemoved": "#BF616A",
"diffRemovedBackground": "#2E212A",
"lineNumber": "#434A62",
"lineNumberActive": "#F8FAFC"
}
},
"markdown": {
"heading1": "#E5E9F0",
"heading2": "#E5E9F0",
"heading3": "#E5E9F0",
"heading4": "#E5E9F0",
"link": "#81A1C1",
"linkHover": "#88C0D0",
"inlineCode": "#A3BE8C",
"inlineCodeBackground": "#252c3c",
"blockquote": "#D08770",
"blockquoteBorder": "#343A47",
"listMarker": "#88C0D099"
},
"chat": {
"userMessage": "#E5E9F0",
"userMessageBackground": "#272f40",
"assistantMessage": "#E5E9F0",
"assistantMessageBackground": "#1F2430",
"timestamp": "#A4ADBF",
"divider": "#343A47"
},
"tools": {
"background": "#22293880",
"border": "#454e5f80",
"headerHover": "#181C24",
"icon": "#A4ADBF",
"title": "#E5E9F0",
"description": "#A4ADBF",
"edit": {
"added": "#A3BE8C",
"addedBackground": "#A3BE8C25",
"removed": "#BF616A",
"removedBackground": "#BF616A25",
"lineNumber": "#4a526b"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/nord-light.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "nord-light",
"name": "Nord",
"description": "Nord",
"version": "1.0.0",
"variant": "light",
"tags": [ "light", "palette" ]
},
"colors": {
"primary": {
"base": "#5E81AC",
"hover": "#7A97BA",
"active": "#557399",
"foreground": "#ECEFF4",
"muted": "#5E81AC80",
"emphasis": "#7A97BA"
},
"surface": {
"background": "#ECEFF4",
"foreground": "#2E3440",
"muted": "#E4E8F0",
"mutedForeground": "#4C566A",
"elevated": "#e7ebf5",
"elevatedForeground": "#2E3440",
"overlay": "#1F253020",
"subtle": "#dee4f0"
},
"interactive": {
"border": "#D5DBE7",
"borderHover": "#C9D0DE",
"borderFocus": "#9CA4BA",
"selection": "#c6ccd881",
"selectionForeground": "#1F2530",
"focus": "#5E81AC",
"focusRing": "#5E81AC40",
"cursor": "#1F2530",
"hover": "#c6ccd84a",
"active": "#c6ccd881"
},
"status": {
"error": "#BF616A",
"errorForeground": "#ECEFF4",
"errorBackground": "#BF616A20",
"errorBorder": "#BF616A50",
"warning": "#D08770",
"warningForeground": "#ECEFF4",
"warningBackground": "#D0877020",
"warningBorder": "#D0877050",
"success": "#8FBCBB",
"successForeground": "#ECEFF4",
"successBackground": "#8FBCBB20",
"successBorder": "#8FBCBB50",
"info": "#81A1C1",
"infoForeground": "#ECEFF4",
"infoBackground": "#81A1C120",
"infoBorder": "#81A1C150"
},
"syntax": {
"base": {
"background": "#E4E8F0",
"foreground": "#2E3440",
"comment": "#4C566A",
"keyword": "#5E81AC",
"string": "#A3BE8C",
"number": "#BF616A",
"function": "#5E81AC",
"variable": "#2E3440",
"type": "#D08770",
"operator": "#BF616A"
},
"tokens": {
"boolean": "#D08770",
"class": "#5E81AC",
"className": "#5E81AC",
"commentDoc": "#9CA3AF",
"constant": "#81A1C1",
"decorator": "#D08770",
"enum": "#5E81AC",
"exception": "#BF616A",
"functionCall": "#5E81AC",
"interface": "#D08770",
"jsxTag": "#5E81AC",
"key": "#5E81AC",
"keywordImport": "#BF616A",
"label": "#BF616A",
"macro": "#81A1C1",
"method": "#8FBCBB",
"module": "#BF616A",
"namespace": "#D08770",
"parameter": "#2E3440",
"preprocessor": "#BF616A",
"punctuation": "#4C566A",
"regex": "#A3BE8C",
"storageModifier": "#81A1C1",
"stringEscape": "#1F2530",
"struct": "#5E81AC",
"tag": "#5E81AC",
"tagAttribute": "#D08770",
"tagAttributeValue": "#A3BE8C",
"typeParameter": "#D08770",
"url": "#81A1C1",
"variableGlobal": "#5E81AC",
"variableLocal": "#F1F3F8",
"variableOther": "#8FBCBB",
"variableProperty": "#81A1C1"
},
"highlights": {
"diffAdded": "#8FBCBB",
"diffAddedBackground": "#E4F0E4",
"diffModified": "#81A1C1",
"diffModifiedBackground": "#DFE6F2",
"diffRemoved": "#BF616A",
"diffRemovedBackground": "#F4E1E4",
"lineNumber": "#B2BACC",
"lineNumberActive": "#1F2530"
}
},
"markdown": {
"heading1": "#2E3440",
"heading2": "#2E3440",
"heading3": "#2E3440",
"heading4": "#2E3440",
"link": "#81A1C1",
"linkHover": "#5E81AC",
"inlineCode": "#4f7034",
"inlineCodeBackground": "#E4E8F0",
"blockquote": "#D08770",
"blockquoteBorder": "#D5DBE7",
"listMarker": "#5E81AC99"
},
"chat": {
"userMessage": "#2E3440",
"userMessageBackground": "#dee4f0",
"assistantMessage": "#2E3440",
"assistantMessageBackground": "#ECEFF4",
"timestamp": "#4C566A",
"divider": "#D5DBE7"
},
"tools": {
"background": "#E4E8F080",
"border": "#b8bfcc80",
"headerHover": "#F6F8FC",
"icon": "#4C566A",
"title": "#2E3440",
"description": "#4C566A",
"edit": {
"added": "#8FBCBB",
"addedBackground": "#8FBCBB25",
"removed": "#BF616A",
"removedBackground": "#BF616A25",
"lineNumber": "#b7bfd1"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/onedarkpro-dark.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "onedarkpro-dark",
"name": "One Dark Pro",
"description": "One Dark Pro",
"version": "1.0.0",
"variant": "dark",
"tags": [ "dark", "palette" ]
},
"colors": {
"primary": {
"base": "#61AFEF",
"hover": "#579AD1",
"active": "#77BAF1",
"foreground": "#1E222A",
"muted": "#61AFEF80",
"emphasis": "#579AD1"
},
"surface": {
"background": "#1E222A",
"foreground": "#ABB2BF",
"muted": "#212631",
"mutedForeground": "#939bad",
"elevated": "#232832",
"elevatedForeground": "#ABB2BF",
"overlay": "#F6F7FB20",
"subtle": "#2E3442"
},
"interactive": {
"border": "#323848",
"borderHover": "#363D52",
"borderFocus": "#555C79",
"selection": "#a8aec533",
"selectionForeground": "#F6F7FB",
"focus": "#61AFEF",
"focusRing": "#61AFEF40",
"cursor": "#F6F7FB",
"hover": "#a8aec525",
"active": "#a8aec533"
},
"status": {
"error": "#E06C75",
"errorForeground": "#1E222A",
"errorBackground": "#E06C7520",
"errorBorder": "#E06C7550",
"warning": "#E5C07B",
"warningForeground": "#1E222A",
"warningBackground": "#E5C07B20",
"warningBorder": "#E5C07B50",
"success": "#98C379",
"successForeground": "#1E222A",
"successBackground": "#98C37920",
"successBorder": "#98C37950",
"info": "#56B6C2",
"infoForeground": "#1E222A",
"infoBackground": "#56B6C220",
"infoBorder": "#56B6C250"
},
"syntax": {
"base": {
"background": "#212631",
"foreground": "#ABB2BF",
"comment": "#818899",
"keyword": "#61AFEF",
"string": "#98C379",
"number": "#E06C75",
"function": "#61AFEF",
"variable": "#ABB2BF",
"type": "#E5C07B",
"operator": "#E06C75"
},
"tokens": {
"boolean": "#E5C07B",
"class": "#61AFEF",
"className": "#61AFEF",
"commentDoc": "#727988",
"constant": "#56B6C2",
"decorator": "#E5C07B",
"enum": "#61AFEF",
"exception": "#E06C75",
"functionCall": "#61AFEF",
"interface": "#E5C07B",
"jsxTag": "#61AFEF",
"key": "#61AFEF",
"keywordImport": "#E06C75",
"label": "#E06C75",
"macro": "#56B6C2",
"method": "#98C379",
"module": "#E06C75",
"namespace": "#E5C07B",
"parameter": "#ABB2BF",
"preprocessor": "#E06C75",
"punctuation": "#818899",
"regex": "#98C379",
"storageModifier": "#56B6C2",
"stringEscape": "#F6F7FB",
"struct": "#61AFEF",
"tag": "#61AFEF",
"tagAttribute": "#E5C07B",
"tagAttributeValue": "#98C379",
"typeParameter": "#E5C07B",
"url": "#56B6C2",
"variableGlobal": "#61AFEF",
"variableLocal": "#1B1F27",
"variableOther": "#98C379",
"variableProperty": "#56B6C2"
},
"highlights": {
"diffAdded": "#98C379",
"diffAddedBackground": "#1C2A26",
"diffModified": "#56B6C2",
"diffModifiedBackground": "#232836",
"diffRemoved": "#E06C75",
"diffRemovedBackground": "#2A1C22",
"lineNumber": "#424967",
"lineNumberActive": "#F6F7FB"
}
},
"markdown": {
"heading1": "#ABB2BF",
"heading2": "#ABB2BF",
"heading3": "#ABB2BF",
"heading4": "#ABB2BF",
"link": "#56B6C2",
"linkHover": "#61AFEF",
"inlineCode": "#a0c288",
"inlineCodeBackground": "#232937",
"blockquote": "#E5C07B",
"blockquoteBorder": "#323848",
"listMarker": "#61AFEF99"
},
"chat": {
"userMessage": "#ABB2BF",
"userMessageBackground": "#2e3442",
"assistantMessage": "#ABB2BF",
"assistantMessageBackground": "#1E222A",
"timestamp": "#818899",
"divider": "#323848"
},
"tools": {
"background": "#21263180",
"border": "#41495e80",
"headerHover": "#171B23",
"icon": "#818899",
"title": "#ABB2BF",
"description": "#818899",
"edit": {
"added": "#98C379",
"addedBackground": "#98C37925",
"removed": "#E06C75",
"removedBackground": "#E06C7525",
"lineNumber": "#545c81"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/onedarkpro-light.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "onedarkpro-light",
"name": "One Dark Pro",
"description": "One Dark Pro",
"version": "1.0.0",
"variant": "light",
"tags": [ "light", "palette" ]
},
"colors": {
"primary": {
"base": "#528BFF",
"hover": "#73A0FE",
"active": "#4879DC",
"foreground": "#F5F6F8",
"muted": "#528BFF80",
"emphasis": "#73A0FE"
},
"surface": {
"background": "#F5F6F8",
"foreground": "#2B303B",
"muted": "#EEF0F4",
"mutedForeground": "#6B717F",
"elevated": "#f0f5fa",
"elevatedForeground": "#2B303B",
"overlay": "#0E111820",
"subtle": "#eaedf4"
},
"interactive": {
"border": "#DEE2EB",
"borderHover": "#D4D9E3",
"borderFocus": "#A6ADBF",
"selection": "#d8dde6",
"selectionForeground": "#0E1118",
"focus": "#528BFF",
"focusRing": "#528BFF40",
"cursor": "#0E1118",
"hover": "#d8dde6c2",
"active": "#FAFBFC"
},
"status": {
"error": "#E06C75",
"errorForeground": "#F5F6F8",
"errorBackground": "#E06C7520",
"errorBorder": "#E06C7550",
"warning": "#D19A66",
"warningForeground": "#F5F6F8",
"warningBackground": "#D19A6620",
"warningBorder": "#D19A6650",
"success": "#4FA66D",
"successForeground": "#F5F6F8",
"successBackground": "#4FA66D20",
"successBorder": "#4FA66D50",
"info": "#61AFEF",
"infoForeground": "#F5F6F8",
"infoBackground": "#61AFEF20",
"infoBorder": "#61AFEF50"
},
"syntax": {
"base": {
"background": "#EEF0F4",
"foreground": "#2B303B",
"comment": "#6B717F",
"keyword": "#528BFF",
"string": "#4FA66D",
"number": "#D85462",
"function": "#528BFF",
"variable": "#2B303B",
"type": "#D19A66",
"operator": "#D85462"
},
"tokens": {
"boolean": "#D19A66",
"class": "#528BFF",
"className": "#528BFF",
"commentDoc": "#B0B4BC",
"constant": "#61AFEF",
"decorator": "#D19A66",
"enum": "#528BFF",
"exception": "#D85462",
"functionCall": "#528BFF",
"interface": "#D19A66",
"jsxTag": "#528BFF",
"key": "#528BFF",
"keywordImport": "#D85462",
"label": "#D85462",
"macro": "#61AFEF",
"method": "#4FA66D",
"module": "#D85462",
"namespace": "#D19A66",
"parameter": "#2B303B",
"preprocessor": "#D85462",
"punctuation": "#6B717F",
"regex": "#4FA66D",
"storageModifier": "#61AFEF",
"stringEscape": "#0E1118",
"struct": "#528BFF",
"tag": "#528BFF",
"tagAttribute": "#D19A66",
"tagAttributeValue": "#4FA66D",
"typeParameter": "#D19A66",
"url": "#61AFEF",
"variableGlobal": "#528BFF",
"variableLocal": "#FAFBFC",
"variableOther": "#4FA66D",
"variableProperty": "#61AFEF"
},
"highlights": {
"diffAdded": "#4FA66D",
"diffAddedBackground": "#E5F4EA",
"diffModified": "#61AFEF",
"diffModifiedBackground": "#E4E8F4",
"diffRemoved": "#E06C75",
"diffRemovedBackground": "#FDE7EA",
"lineNumber": "#BEC4D0",
"lineNumberActive": "#0E1118"
}
},
"markdown": {
"heading1": "#2B303B",
"heading2": "#2B303B",
"heading3": "#2B303B",
"heading4": "#2B303B",
"link": "#61AFEF",
"linkHover": "#528BFF",
"inlineCode": "#327d4c",
"inlineCodeBackground": "#EEF0F4",
"blockquote": "#D19A66",
"blockquoteBorder": "#DEE2EB",
"listMarker": "#528BFF99"
},
"chat": {
"userMessage": "#2B303B",
"userMessageBackground": "#eaedf4",
"assistantMessage": "#2B303B",
"assistantMessageBackground": "#F5F6F8",
"timestamp": "#6B717F",
"divider": "#DEE2EB"
},
"tools": {
"background": "#EEF0F480",
"border": "#c4c8d080",
"headerHover": "#FFFFFF",
"icon": "#6B717F",
"title": "#2B303B",
"description": "#6B717F",
"edit": {
"added": "#4FA66D",
"addedBackground": "#4FA66D25",
"removed": "#E06C75",
"removedBackground": "#E06C7525",
"lineNumber": "#afb5c1"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/presets.ts
+69
View File
@@ -0,0 +1,69 @@
import type { Theme } from '@/types/theme';
import aura_dark_Raw from './aura-dark.json';
import aura_light_Raw from './aura-light.json';
import ayu_dark_Raw from './ayu-dark.json';
import ayu_light_Raw from './ayu-light.json';
import carbonfox_dark_Raw from './carbonfox-dark.json';
import carbonfox_light_Raw from './carbonfox-light.json';
import catppuccin_dark_Raw from './catppuccin-dark.json';
import catppuccin_light_Raw from './catppuccin-light.json';
import dracula_dark_Raw from './dracula-dark.json';
import dracula_light_Raw from './dracula-light.json';
import gruvbox_dark_Raw from './gruvbox-dark.json';
import gruvbox_light_Raw from './gruvbox-light.json';
import kanagawa_dark_Raw from './kanagawa-dark.json';
import kanagawa_light_Raw from './kanagawa-light.json';
import monokai_dark_Raw from './monokai-dark.json';
import monokai_light_Raw from './monokai-light.json';
import nightowl_dark_Raw from './nightowl-dark.json';
import nightowl_light_Raw from './nightowl-light.json';
import nord_dark_Raw from './nord-dark.json';
import nord_light_Raw from './nord-light.json';
import onedarkpro_dark_Raw from './onedarkpro-dark.json';
import onedarkpro_light_Raw from './onedarkpro-light.json';
import solarized_dark_Raw from './solarized-dark.json';
import solarized_light_Raw from './solarized-light.json';
import tokyonight_dark_Raw from './tokyonight-dark.json';
import tokyonight_light_Raw from './tokyonight-light.json';
import vesper_dark_Raw from './vesper-dark.json';
import vesper_light_Raw from './vesper-light.json';
import mono_plus_dark_Raw from './mono-plus-dark.json';
import mono_plus_light_Raw from './mono-plus-light.json';
import mono_dark_Raw from './mono-dark.json';
import mono_light_Raw from './mono-light.json';
export const presetThemes: Theme[] = [
aura_dark_Raw as Theme,
aura_light_Raw as Theme,
ayu_dark_Raw as Theme,
ayu_light_Raw as Theme,
carbonfox_dark_Raw as Theme,
carbonfox_light_Raw as Theme,
catppuccin_dark_Raw as Theme,
catppuccin_light_Raw as Theme,
dracula_dark_Raw as Theme,
dracula_light_Raw as Theme,
gruvbox_dark_Raw as Theme,
gruvbox_light_Raw as Theme,
kanagawa_dark_Raw as Theme,
kanagawa_light_Raw as Theme,
monokai_dark_Raw as Theme,
monokai_light_Raw as Theme,
nightowl_dark_Raw as Theme,
nightowl_light_Raw as Theme,
nord_dark_Raw as Theme,
nord_light_Raw as Theme,
onedarkpro_dark_Raw as Theme,
onedarkpro_light_Raw as Theme,
solarized_dark_Raw as Theme,
solarized_light_Raw as Theme,
tokyonight_dark_Raw as Theme,
tokyonight_light_Raw as Theme,
vesper_dark_Raw as Theme,
vesper_light_Raw as Theme,
mono_plus_dark_Raw as Theme,
mono_plus_light_Raw as Theme,
mono_dark_Raw as Theme,
mono_light_Raw as Theme,
];
packages/ui/src/lib/theme/themes/solarized-dark.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "solarized-dark",
"name": "Solarized",
"description": "Solarized",
"version": "1.0.0",
"variant": "dark",
"tags": [ "dark", "palette" ]
},
"colors": {
"primary": {
"base": "#278BD2",
"hover": "#5C65AC",
"active": "#8285C9",
"foreground": "#001F27",
"muted": "#6C71C480",
"emphasis": "#5C65AC"
},
"surface": {
"background": "#001e25",
"foreground": "#93A1A1",
"muted": "#02232e",
"mutedForeground": "#89999a",
"elevated": "#052832",
"elevatedForeground": "#93A1A1",
"overlay": "#FDF6E320",
"subtle": "#042b34"
},
"interactive": {
"border": "#20373F",
"borderHover": "#243E47",
"borderFocus": "#3A5A6B",
"selection": "#98afbd33",
"selectionForeground": "#FDF6E3",
"focus": "#6C71C4",
"focusRing": "#6C71C440",
"cursor": "#FDF6E3",
"hover": "#98afbd25",
"active": "#98afbd33"
},
"status": {
"error": "#DC322F",
"errorForeground": "#001F27",
"errorBackground": "#DC322F20",
"errorBorder": "#DC322F50",
"warning": "#B58900",
"warningForeground": "#001F27",
"warningBackground": "#B5890020",
"warningBorder": "#B5890050",
"success": "#859900",
"successForeground": "#001F27",
"successBackground": "#85990020",
"successBorder": "#85990050",
"info": "#2AA198",
"infoForeground": "#001F27",
"infoBackground": "#2AA19820",
"infoBorder": "#2AA19850"
},
"syntax": {
"base": {
"background": "#022733",
"foreground": "#93A1A1",
"comment": "#6C7F80",
"keyword": "#6C71C4",
"string": "#859900",
"number": "#D33682",
"function": "#6C71C4",
"variable": "#93A1A1",
"type": "#B58900",
"operator": "#D33682"
},
"tokens": {
"boolean": "#B58900",
"class": "#6C71C4",
"className": "#6C71C4",
"commentDoc": "#5C7173",
"constant": "#2AA198",
"decorator": "#B58900",
"enum": "#6C71C4",
"exception": "#D33682",
"functionCall": "#6C71C4",
"interface": "#B58900",
"jsxTag": "#6C71C4",
"key": "#6C71C4",
"keywordImport": "#D33682",
"label": "#D33682",
"macro": "#2AA198",
"method": "#859900",
"module": "#D33682",
"namespace": "#B58900",
"parameter": "#93A1A1",
"preprocessor": "#D33682",
"punctuation": "#6C7F80",
"regex": "#859900",
"storageModifier": "#2AA198",
"stringEscape": "#FDF6E3",
"struct": "#6C71C4",
"tag": "#6C71C4",
"tagAttribute": "#B58900",
"tagAttributeValue": "#859900",
"typeParameter": "#B58900",
"url": "#2AA198",
"variableGlobal": "#6C71C4",
"variableLocal": "#01222B",
"variableOther": "#859900",
"variableProperty": "#2AA198"
},
"highlights": {
"diffAdded": "#859900",
"diffAddedBackground": "#0F2F29",
"diffModified": "#2AA198",
"diffModifiedBackground": "#0F3844",
"diffRemoved": "#DC322F",
"diffRemovedBackground": "#321C1C",
"lineNumber": "#2D4958",
"lineNumberActive": "#FDF6E3"
}
},
"markdown": {
"heading1": "#93A1A1",
"heading2": "#93A1A1",
"heading3": "#93A1A1",
"heading4": "#93A1A1",
"link": "#2AA198",
"linkHover": "#6C71C4",
"inlineCode": "#859900",
"inlineCodeBackground": "#022733",
"blockquote": "#B58900",
"blockquoteBorder": "#20373F",
"listMarker": "#6C71C499"
},
"chat": {
"userMessage": "#93A1A1",
"userMessageBackground": "#042B34",
"assistantMessage": "#93A1A1",
"assistantMessageBackground": "#001F27",
"timestamp": "#6C7F80",
"divider": "#20373F"
},
"tools": {
"background": "#02273380",
"border": "#2b495380",
"headerHover": "#032830",
"icon": "#6C7F80",
"title": "#93A1A1",
"description": "#6C7F80",
"edit": {
"added": "#859900",
"addedBackground": "#85990025",
"removed": "#DC322F",
"removedBackground": "#DC322F25",
"lineNumber": "#345567"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/solarized-light.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "solarized-light",
"name": "Solarized",
"description": "Solarized",
"version": "1.0.0",
"variant": "light",
"tags": [ "light", "palette" ]
},
"colors": {
"primary": {
"base": "#268BD2",
"hover": "#51A0D5",
"active": "#217EBC",
"foreground": "#FDF6E3",
"muted": "#268BD280",
"emphasis": "#51A0D5"
},
"surface": {
"background": "#FDF6E3",
"foreground": "#586E75",
"muted": "#F6EFDA",
"mutedForeground": "#667678",
"elevated": "#FAF3DC",
"elevatedForeground": "#586E75",
"overlay": "#07364220",
"subtle": "#F6EFDA"
},
"interactive": {
"border": "#E3E0CD",
"borderHover": "#D9D4C2",
"borderFocus": "#ACA58F",
"selection": "#10647a22",
"selectionForeground": "#073642",
"focus": "#268BD2",
"focusRing": "#268BD240",
"cursor": "#073642",
"hover": "#10647a14",
"active": "#10647a22"
},
"status": {
"error": "#DC322F",
"errorForeground": "#FDF6E3",
"errorBackground": "#DC322F20",
"errorBorder": "#DC322F50",
"warning": "#B58900",
"warningForeground": "#FDF6E3",
"warningBackground": "#B5890020",
"warningBorder": "#B5890050",
"success": "#859900",
"successForeground": "#FDF6E3",
"successBackground": "#85990020",
"successBorder": "#85990050",
"info": "#2AA198",
"infoForeground": "#FDF6E3",
"infoBackground": "#2AA19820",
"infoBorder": "#2AA19850"
},
"syntax": {
"base": {
"background": "#F6EFDA",
"foreground": "#586E75",
"comment": "#7A8C8E",
"keyword": "#268BD2",
"string": "#859900",
"number": "#D33682",
"function": "#268BD2",
"variable": "#586E75",
"type": "#B58900",
"operator": "#D33682"
},
"tokens": {
"boolean": "#B58900",
"class": "#268BD2",
"className": "#268BD2",
"commentDoc": "#BCC1B9",
"constant": "#2AA198",
"decorator": "#B58900",
"enum": "#268BD2",
"exception": "#D33682",
"functionCall": "#268BD2",
"interface": "#B58900",
"jsxTag": "#268BD2",
"key": "#268BD2",
"keywordImport": "#D33682",
"label": "#D33682",
"macro": "#2AA198",
"method": "#859900",
"module": "#D33682",
"namespace": "#B58900",
"parameter": "#586E75",
"preprocessor": "#D33682",
"punctuation": "#7A8C8E",
"regex": "#859900",
"storageModifier": "#2AA198",
"stringEscape": "#073642",
"struct": "#268BD2",
"tag": "#268BD2",
"tagAttribute": "#B58900",
"tagAttributeValue": "#859900",
"typeParameter": "#B58900",
"url": "#2AA198",
"variableGlobal": "#268BD2",
"variableLocal": "#FAF3DC",
"variableOther": "#859900",
"variableProperty": "#2AA198"
},
"highlights": {
"diffAdded": "#859900",
"diffAddedBackground": "#EEF5D6",
"diffModified": "#2AA198",
"diffModifiedBackground": "#E3ECF3",
"diffRemoved": "#DC322F",
"diffRemovedBackground": "#FDE4DD",
"lineNumber": "#C5C0AD",
"lineNumberActive": "#073642"
}
},
"markdown": {
"heading1": "#586E75",
"heading2": "#586E75",
"heading3": "#586E75",
"heading4": "#586E75",
"link": "#2AA198",
"linkHover": "#268BD2",
"inlineCode": "#859900",
"inlineCodeBackground": "#F6EFDA",
"blockquote": "#B58900",
"blockquoteBorder": "#E3E0CD",
"listMarker": "#268BD299"
},
"chat": {
"userMessage": "#586E75",
"userMessageBackground": "#F6EFDA",
"assistantMessage": "#586E75",
"assistantMessageBackground": "#FDF6E3",
"timestamp": "#7A8C8E",
"divider": "#E3E0CD"
},
"tools": {
"background": "#F6EFDA80",
"border": "#d1cebc80",
"headerHover": "#F6EDD4",
"icon": "#7A8C8E",
"title": "#586E75",
"description": "#7A8C8E",
"edit": {
"added": "#859900",
"addedBackground": "#85990025",
"removed": "#DC322F",
"removedBackground": "#DC322F25",
"lineNumber": "#c3bead"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/tokyonight-dark.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "tokyonight-dark",
"name": "Tokyonight",
"description": "Tokyonight",
"version": "1.0.0",
"variant": "dark",
"tags": [ "dark", "palette" ]
},
"colors": {
"primary": {
"base": "#7AA2F7",
"hover": "#6A8CD6",
"active": "#8BADF8",
"foreground": "#0F111A",
"muted": "#7AA2F780",
"emphasis": "#6A8CD6"
},
"surface": {
"background": "#0F111A",
"foreground": "#C0CAF5",
"muted": "#111428",
"mutedForeground": "#7A88CF",
"elevated": "#131629",
"elevatedForeground": "#C0CAF5",
"overlay": "#EAEAFF20",
"subtle": "#171b30"
},
"interactive": {
"border": "#25283B",
"borderHover": "#292C43",
"borderFocus": "#45496F",
"selection": "#b3b3cc33",
"selectionForeground": "#EAEAFF",
"focus": "#7AA2F7",
"focusRing": "#7AA2F740",
"cursor": "#EAEAFF",
"hover": "#272E49",
"active": "#262C46"
},
"status": {
"error": "#F7768E",
"errorForeground": "#0F111A",
"errorBackground": "#F7768E20",
"errorBorder": "#F7768E50",
"warning": "#E0AF68",
"warningForeground": "#0F111A",
"warningBackground": "#E0AF6820",
"warningBorder": "#E0AF6850",
"success": "#9ECE6A",
"successForeground": "#0F111A",
"successBackground": "#9ECE6A20",
"successBorder": "#9ECE6A50",
"info": "#7DCFFF",
"infoForeground": "#0F111A",
"infoBackground": "#7DCFFF20",
"infoBorder": "#7DCFFF50"
},
"syntax": {
"base": {
"background": "#111428",
"foreground": "#C0CAF5",
"comment": "#7A88CF",
"keyword": "#BB9AF7",
"string": "#9ECE6A",
"number": "#FF9E64",
"function": "#BB9AF7",
"variable": "#C0CAF5",
"type": "#E0AF68",
"operator": "#FF9E64"
},
"tokens": {
"boolean": "#E0AF68",
"class": "#BB9AF7",
"className": "#BB9AF7",
"commentDoc": "#6A76B4",
"constant": "#7DCFFF",
"decorator": "#E0AF68",
"enum": "#BB9AF7",
"exception": "#FF9E64",
"functionCall": "#BB9AF7",
"interface": "#E0AF68",
"jsxTag": "#BB9AF7",
"key": "#BB9AF7",
"keywordImport": "#FF9E64",
"label": "#FF9E64",
"macro": "#7DCFFF",
"method": "#9ECE6A",
"module": "#FF9E64",
"namespace": "#E0AF68",
"parameter": "#C0CAF5",
"preprocessor": "#FF9E64",
"punctuation": "#7A88CF",
"regex": "#9ECE6A",
"storageModifier": "#7DCFFF",
"stringEscape": "#EAEAFF",
"struct": "#BB9AF7",
"tag": "#BB9AF7",
"tagAttribute": "#E0AF68",
"tagAttributeValue": "#9ECE6A",
"typeParameter": "#E0AF68",
"url": "#7DCFFF",
"variableGlobal": "#BB9AF7",
"variableLocal": "#101324",
"variableOther": "#9ECE6A",
"variableProperty": "#7DCFFF"
},
"highlights": {
"diffAdded": "#9ECE6A",
"diffAddedBackground": "#1C2A38",
"diffModified": "#7DCFFF",
"diffModifiedBackground": "#24283B",
"diffRemoved": "#F7768E",
"diffRemovedBackground": "#2A1F32",
"lineNumber": "#343755",
"lineNumberActive": "#EAEAFF"
}
},
"markdown": {
"heading1": "#C0CAF5",
"heading2": "#C0CAF5",
"heading3": "#C0CAF5",
"heading4": "#C0CAF5",
"link": "#7DCFFF",
"linkHover": "#7AA2F7",
"inlineCode": "#9ECE6A",
"inlineCodeBackground": "#111428",
"blockquote": "#E0AF68",
"blockquoteBorder": "#25283B",
"listMarker": "#7AA2F799"
},
"chat": {
"userMessage": "#C0CAF5",
"userMessageBackground": "#171b30",
"assistantMessage": "#C0CAF5",
"assistantMessageBackground": "#0F111A",
"timestamp": "#7A88CF",
"divider": "#25283B"
},
"tools": {
"background": "#11142880",
"border": "#393e5c80",
"headerHover": "#13172A",
"icon": "#7A88CF",
"title": "#C0CAF5",
"description": "#7A88CF",
"edit": {
"added": "#9ECE6A",
"addedBackground": "#9ECE6A25",
"removed": "#F7768E",
"removedBackground": "#F7768E25",
"lineNumber": "#3e4266"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/tokyonight-light.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "tokyonight-light",
"name": "Tokyonight",
"description": "Tokyonight",
"version": "1.0.0",
"variant": "light",
"tags": [ "light", "palette" ]
},
"colors": {
"primary": {
"base": "#2E7DE9",
"hover": "#5291E9",
"active": "#2B70D0",
"foreground": "#E1E2E7",
"muted": "#2E7DE980",
"emphasis": "#5291E9"
},
"surface": {
"background": "#E1E2E7",
"foreground": "#273153",
"muted": "#DEE0EA",
"mutedForeground": "#5C6390",
"elevated": "#dee0ee",
"elevatedForeground": "#273153",
"overlay": "#1C254420",
"subtle": "#dadce6"
},
"interactive": {
"border": "#CDD0DC",
"borderHover": "#C3C6D2",
"borderFocus": "#9599A8",
"selection": "#939cbf47",
"selectionForeground": "#1C2544",
"focus": "#2E7DE9",
"focusRing": "#2E7DE940",
"cursor": "#1C2544",
"hover": "#7b86ad2a",
"active": "#7b86ad47"
},
"status": {
"error": "#C94060",
"errorForeground": "#E1E2E7",
"errorBackground": "#C9406020",
"errorBorder": "#C9406050",
"warning": "#8C6C3E",
"warningForeground": "#E1E2E7",
"warningBackground": "#8C6C3E20",
"warningBorder": "#8C6C3E50",
"success": "#587539",
"successForeground": "#E1E2E7",
"successBackground": "#58753920",
"successBorder": "#58753950",
"info": "#007197",
"infoForeground": "#E1E2E7",
"infoBackground": "#00719720",
"infoBorder": "#00719750"
},
"syntax": {
"base": {
"background": "#DEE0EA",
"foreground": "#273153",
"comment": "#5C6390",
"keyword": "#9854F1",
"string": "#587539",
"number": "#B15C00",
"function": "#9854F1",
"variable": "#273153",
"type": "#3760BF",
"operator": "#B15C00"
},
"tokens": {
"boolean": "#3760BF",
"class": "#9854F1",
"className": "#9854F1",
"commentDoc": "#9FA3BC",
"constant": "#007197",
"decorator": "#3760BF",
"enum": "#9854F1",
"exception": "#B15C00",
"functionCall": "#9854F1",
"interface": "#3760BF",
"jsxTag": "#9854F1",
"key": "#9854F1",
"keywordImport": "#B15C00",
"label": "#B15C00",
"macro": "#007197",
"method": "#587539",
"module": "#B15C00",
"namespace": "#3760BF",
"parameter": "#273153",
"preprocessor": "#B15C00",
"punctuation": "#5C6390",
"regex": "#587539",
"storageModifier": "#007197",
"stringEscape": "#1C2544",
"struct": "#9854F1",
"tag": "#9854F1",
"tagAttribute": "#3760BF",
"tagAttributeValue": "#587539",
"typeParameter": "#3760BF",
"url": "#007197",
"variableGlobal": "#9854F1",
"variableLocal": "#E5E6EE",
"variableOther": "#587539",
"variableProperty": "#007197"
},
"highlights": {
"diffAdded": "#587539",
"diffAddedBackground": "#DFE7DA",
"diffModified": "#007197",
"diffModifiedBackground": "#CFD1DD",
"diffRemoved": "#C94060",
"diffRemovedBackground": "#F4DADD",
"lineNumber": "#AEB2BF",
"lineNumberActive": "#1C2544"
}
},
"markdown": {
"heading1": "#9854F1",
"heading2": "#B15C00",
"heading3": "#8C6C3E",
"heading4": "#273153",
"link": "#007197",
"linkHover": "#2E7DE9",
"inlineCode": "#587539",
"inlineCodeBackground": "#DEE0EA",
"blockquote": "#8C6C3E",
"blockquoteBorder": "#CDD0DC",
"listMarker": "#2E7DE999"
},
"chat": {
"userMessage": "#273153",
"userMessageBackground": "#dcdee9",
"assistantMessage": "#273153",
"assistantMessageBackground": "#E1E2E7",
"timestamp": "#5C6390",
"divider": "#CDD0DC"
},
"tools": {
"background": "#DEE0EA80",
"border": "#a5a8b580",
"headerHover": "#E9EAF1",
"icon": "#5C6390",
"title": "#273153",
"description": "#5C6390",
"edit": {
"added": "#587539",
"addedBackground": "#58753925",
"removed": "#C94060",
"removedBackground": "#C9406025",
"lineNumber": "#9b9ea9"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/vesper-dark.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "vesper-dark",
"name": "Vesper",
"description": "Vesper",
"version": "1.0.0",
"variant": "dark",
"tags": [ "dark", "palette" ]
},
"colors": {
"primary": {
"base": "#FFC799",
"hover": "#DBAC84",
"active": "#FFCFA8",
"foreground": "#101010",
"muted": "#FFC79980",
"emphasis": "#DBAC84"
},
"surface": {
"background": "#101010",
"foreground": "#FFFFFF",
"muted": "#141414",
"mutedForeground": "#A0A0A0",
"elevated": "#110f0f",
"elevatedForeground": "#FFFFFF",
"overlay": "#FFFFFF20",
"subtle": "#232323"
},
"interactive": {
"border": "#1C1C1C",
"borderHover": "#202020",
"borderFocus": "#383838",
"selection": "#b1adad33",
"selectionForeground": "#FFFFFF",
"focus": "#FFC799",
"focusRing": "#FFC79940",
"cursor": "#FFFFFF",
"hover": "#ffffff1c",
"active": "#ffffff33"
},
"status": {
"error": "#FF8080",
"errorForeground": "#101010",
"errorBackground": "#FF808020",
"errorBorder": "#FF808050",
"warning": "#FFC799",
"warningForeground": "#101010",
"warningBackground": "#FFC79920",
"warningBorder": "#FFC79950",
"success": "#99FFE4",
"successForeground": "#101010",
"successBackground": "#99FFE420",
"successBorder": "#99FFE450",
"info": "#FFC799",
"infoForeground": "#101010",
"infoBackground": "#FFC79920",
"infoBorder": "#FFC79950"
},
"syntax": {
"base": {
"background": "#141414",
"foreground": "#FFFFFF",
"comment": "#A0A0A0",
"keyword": "#FFC799",
"string": "#99FFE4",
"number": "#FF8080",
"function": "#FFC799",
"variable": "#FFFFFF",
"type": "#FFC799",
"operator": "#FF8080"
},
"tokens": {
"boolean": "#FFC799",
"class": "#FFC799",
"className": "#FFC799",
"commentDoc": "#8A8A8A",
"constant": "#A0A0A0",
"decorator": "#FFC799",
"enum": "#FFC799",
"exception": "#FF8080",
"functionCall": "#FFC799",
"interface": "#FFC799",
"jsxTag": "#FFC799",
"key": "#FFC799",
"keywordImport": "#FF8080",
"label": "#FF8080",
"macro": "#8B8B8B",
"method": "#99FFE4",
"module": "#FF8080",
"namespace": "#FFC799",
"parameter": "#FFFFFF",
"preprocessor": "#FF8080",
"punctuation": "#A0A0A0",
"regex": "#99FFE4",
"storageModifier": "#8B8B8B",
"stringEscape": "#FFFFFF",
"struct": "#FFC799",
"tag": "#FFC799",
"tagAttribute": "#FFC799",
"tagAttributeValue": "#99FFE4",
"typeParameter": "#FFC799",
"url": "#A0A0A0",
"variableGlobal": "#FFC799",
"variableLocal": "#0C0C0C",
"variableOther": "#99FFE4",
"variableProperty": "#A0A0A0"
},
"highlights": {
"diffAdded": "#99FFE4",
"diffAddedBackground": "#0D2818",
"diffModified": "#FFC799",
"diffModifiedBackground": "#141414",
"diffRemoved": "#FF8080",
"diffRemovedBackground": "#281A1A",
"lineNumber": "#282828",
"lineNumberActive": "#FFFFFF"
}
},
"markdown": {
"heading1": "#FFFFFF",
"heading2": "#FFFFFF",
"heading3": "#FFFFFF",
"heading4": "#FFFFFF",
"link": "#A0A0A0",
"linkHover": "#FFC799",
"inlineCode": "#A0A0A0",
"inlineCodeBackground": "#141414",
"blockquote": "#FFFFFF",
"blockquoteBorder": "#1C1C1C",
"listMarker": "#FFFFFF99"
},
"chat": {
"userMessage": "#FFFFFF",
"userMessageBackground": "#232323",
"assistantMessage": "#FFFFFF",
"assistantMessageBackground": "#101010",
"timestamp": "#A0A0A0",
"divider": "#1C1C1C"
},
"tools": {
"background": "#14141480",
"border": "#48474780",
"headerHover": "#080808",
"icon": "#A0A0A0",
"title": "#FFFFFF",
"description": "#A0A0A0",
"edit": {
"added": "#99FFE4",
"addedBackground": "#99FFE425",
"removed": "#FF8080",
"removedBackground": "#FF808025",
"lineNumber": "#615f5f"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/themes/vesper-light.json
+176
View File
@@ -0,0 +1,176 @@
{
"metadata": {
"id": "vesper-light",
"name": "Vesper",
"description": "Vesper",
"version": "1.0.0",
"variant": "light",
"tags": [ "light", "palette" ]
},
"colors": {
"primary": {
"base": "#f5a666",
"hover": "#FFD2AD",
"active": "#D9A982",
"foreground": "#FFFFFF",
"muted": "#FFC79980",
"emphasis": "#FFD2AD"
},
"surface": {
"background": "#FFFFFF",
"foreground": "#101010",
"muted": "#F8F8F8",
"mutedForeground": "#646363",
"elevated": "#F0F0F0",
"elevatedForeground": "#101010",
"overlay": "#00000020",
"subtle": "#f5f3f3"
},
"interactive": {
"border": "#E8E8E8",
"borderHover": "#E0E0E0",
"borderFocus": "#C0C0C0",
"selection": "#5e5b5b22",
"selectionForeground": "#000000",
"focus": "#FFC799",
"focusRing": "#FFC79940",
"cursor": "#000000",
"hover": "#5e5c5c22",
"active": "#48474722"
},
"status": {
"error": "#FF8080",
"errorForeground": "#FFFFFF",
"errorBackground": "#FF808020",
"errorBorder": "#FF808050",
"warning": "#f4994e",
"warningForeground": "#FFFFFF",
"warningBackground": "#FFC79920",
"warningBorder": "#FFC79950",
"success": "#12b489",
"successForeground": "#FFFFFF",
"successBackground": "#99FFE420",
"successBorder": "#99FFE450",
"info": "#62bced",
"infoForeground": "#FFFFFF",
"infoBackground": "#FFC79920",
"infoBorder": "#FFC79950"
},
"syntax": {
"base": {
"background": "#F8F8F8",
"foreground": "#101010",
"comment": "#A0A0A0",
"keyword": "#FFC799",
"string": "#55d9b6",
"number": "#FF8080",
"function": "#FFC799",
"variable": "#101010",
"type": "#FFC799",
"operator": "#FF8080"
},
"tokens": {
"boolean": "#FFC799",
"class": "#FFC799",
"className": "#FFC799",
"commentDoc": "#D0D0D0",
"constant": "#A0A0A0",
"decorator": "#FFC799",
"enum": "#FFC799",
"exception": "#FF8080",
"functionCall": "#FFC799",
"interface": "#FFC799",
"jsxTag": "#FFC799",
"key": "#FFC799",
"keywordImport": "#FF8080",
"label": "#FF8080",
"macro": "#A0A0A0",
"method": "#74e8c9",
"module": "#FF8080",
"namespace": "#FFC799",
"parameter": "#101010",
"preprocessor": "#FF8080",
"punctuation": "#A0A0A0",
"regex": "#67e7c5",
"storageModifier": "#A0A0A0",
"stringEscape": "#000000",
"struct": "#FFC799",
"tag": "#FFC799",
"tagAttribute": "#FFC799",
"tagAttributeValue": "#6adebf",
"typeParameter": "#FFC799",
"url": "#A0A0A0",
"variableGlobal": "#FFC799",
"variableLocal": "#F0F0F0",
"variableOther": "#49dcb5",
"variableProperty": "#A0A0A0"
},
"highlights": {
"diffAdded": "#56d8b5",
"diffAddedBackground": "#E8F5E8",
"diffModified": "#FFC799",
"diffModifiedBackground": "#F0F0F0",
"diffRemoved": "#FF8080",
"diffRemovedBackground": "#F5E8E8",
"lineNumber": "#D0D0D0",
"lineNumberActive": "#000000"
}
},
"markdown": {
"heading1": "#101010",
"heading2": "#101010",
"heading3": "#101010",
"heading4": "#101010",
"link": "#A0A0A0",
"linkHover": "#FFC799",
"inlineCode": "#796363",
"inlineCodeBackground": "#F8F8F8",
"blockquote": "#101010",
"blockquoteBorder": "#E8E8E8",
"listMarker": "#10101099"
},
"chat": {
"userMessage": "#101010",
"userMessageBackground": "#F8F8F8",
"assistantMessage": "#101010",
"assistantMessageBackground": "#FFFFFF",
"timestamp": "#A0A0A0",
"divider": "#E8E8E8"
},
"tools": {
"background": "#F8F8F880",
"border": "#d0cece80",
"headerHover": "#E8E8E8",
"icon": "#A0A0A0",
"title": "#101010",
"description": "#A0A0A0",
"edit": {
"added": "#40d7af",
"addedBackground": "#99FFE425",
"removed": "#FF8080",
"removedBackground": "#FF808025",
"lineNumber": "#b4b2b2"
}
}
},
"config": {
"fonts": {
"sans": "\"IBM Plex Mono\", monospace",
"mono": "\"IBM Plex Mono\", monospace",
"heading": "\"IBM Plex Mono\", monospace"
},
"radius": {
"none": "0",
"sm": "0.125rem",
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"transitions": {
"fast": "150ms ease",
"normal": "250ms ease",
"slow": "350ms ease"
}
}
}
packages/ui/src/lib/theme/vscode/adapter.ts
+292 -79
View File
@@ -1,56 +1,98 @@
import type { Theme } from '@/types/theme';
import type { ThemeMode } from '@/types/theme';
import { flexokiDarkTheme, flexokiLightTheme } from '@/lib/theme/themes';
import { getDefaultTheme } from '@/lib/theme/themes';
export type VSCodeThemeKind = 'light' | 'dark' | 'high-contrast';
export type VSCodeThemeColorToken =
// Editor core
| 'editor.background'
| 'editor.foreground'
| 'editor.selectionBackground'
| 'editor.selectionForeground'
| 'editor.lineHighlightBackground'
| 'editorCursor.foreground'
// UI borders and focus
| 'focusBorder'
| 'contrastBorder'
| 'widget.border'
// Diff editor
| 'diffEditor.insertedTextBackground'
| 'diffEditor.insertedTextBorder'
| 'diffEditor.insertedLineBackground'
| 'diffEditor.removedTextBackground'
| 'diffEditor.removedLineBackground'
| 'gitDecoration.addedResourceForeground'
| 'gitDecoration.deletedResourceForeground'
| 'gitDecoration.modifiedResourceForeground'
// Sidebar
| 'sideBar.background'
| 'sideBar.foreground'
| 'sideBar.border'
// Panel (bottom area)
| 'panel.background'
| 'panel.foreground'
| 'panel.border'
// Inputs
| 'input.background'
| 'input.foreground'
| 'input.border'
| 'input.placeholderForeground'
// Buttons
| 'button.background'
| 'button.foreground'
| 'button.hoverBackground'
| 'button.secondaryBackground'
| 'button.secondaryForeground'
// Text
| 'textLink.foreground'
| 'textLink.activeForeground'
| 'descriptionForeground'
| 'foreground'
// Terminal colors (for syntax)
| 'terminal.ansiRed'
| 'terminal.ansiGreen'
| 'terminal.ansiBlue'
| 'terminal.ansiYellow'
| 'terminal.ansiCyan'
| 'terminal.ansiMagenta'
// Editor diagnostics
| 'editorError.foreground'
| 'editorError.background'
| 'editorWarning.foreground'
| 'editorWarning.background'
| 'editorInfo.foreground'
| 'editorInfo.background'
// Testing
| 'testing.iconPassed'
| 'testing.iconFailed'
// Badge
| 'badge.background'
| 'badge.foreground'
// Status bar
| 'statusBar.background'
| 'statusBar.foreground'
// Lists
| 'list.hoverBackground'
| 'list.activeSelectionBackground'
| 'list.activeSelectionForeground'
| 'list.inactiveSelectionBackground'
// Preformatted text (code)
| 'textPreformat.foreground'
| 'textPreformat.background';
| 'textPreformat.background'
// Editor widgets
| 'editorWidget.background'
| 'editorWidget.foreground'
| 'editorWidget.border'
// Dropdown
| 'dropdown.background'
| 'dropdown.border'
// Editor gutter
| 'editorLineNumber.foreground'
| 'editorLineNumber.activeForeground'
// Scrollbar
| 'scrollbarSlider.background'
| 'scrollbarSlider.hoverBackground';
export type VSCodeThemePalette = {
kind: VSCodeThemeKind;
@@ -64,52 +106,94 @@ export type VSCodeThemePayload = {
};
const VARIABLE_MAP: Record<VSCodeThemeColorToken, string> = {
// Editor core
'editor.background': '--vscode-editor-background',
'editor.foreground': '--vscode-editor-foreground',
'editor.selectionBackground': '--vscode-editor-selectionBackground',
'editor.selectionForeground': '--vscode-editor-selectionForeground',
'editor.lineHighlightBackground': '--vscode-editor-lineHighlightBackground',
'editorCursor.foreground': '--vscode-editorCursor-foreground',
// UI borders and focus
focusBorder: '--vscode-focusBorder',
contrastBorder: '--vscode-contrastBorder',
'widget.border': '--vscode-widget-border',
// Diff editor
'diffEditor.insertedTextBackground': '--vscode-diffEditor-insertedTextBackground',
'diffEditor.insertedTextBorder': '--vscode-diffEditor-insertedTextBorder',
'diffEditor.insertedLineBackground': '--vscode-diffEditor-insertedLineBackground',
'diffEditor.removedTextBackground': '--vscode-diffEditor-removedTextBackground',
'diffEditor.removedLineBackground': '--vscode-diffEditor-removedLineBackground',
'gitDecoration.addedResourceForeground': '--vscode-gitDecoration-addedResourceForeground',
'gitDecoration.deletedResourceForeground': '--vscode-gitDecoration-deletedResourceForeground',
'gitDecoration.modifiedResourceForeground': '--vscode-gitDecoration-modifiedResourceForeground',
// Sidebar
'sideBar.background': '--vscode-sideBar-background',
'sideBar.foreground': '--vscode-sideBar-foreground',
'sideBar.border': '--vscode-sideBar-border',
// Panel
'panel.background': '--vscode-panel-background',
'panel.foreground': '--vscode-panel-foreground',
'panel.border': '--vscode-panel-border',
// Inputs
'input.background': '--vscode-input-background',
'input.foreground': '--vscode-input-foreground',
'input.border': '--vscode-input-border',
'input.placeholderForeground': '--vscode-input-placeholderForeground',
// Buttons
'button.background': '--vscode-button-background',
'button.foreground': '--vscode-button-foreground',
'button.hoverBackground': '--vscode-button-hoverBackground',
'button.secondaryBackground': '--vscode-button-secondaryBackground',
'button.secondaryForeground': '--vscode-button-secondaryForeground',
// Text
'textLink.foreground': '--vscode-textLink-foreground',
'textLink.activeForeground': '--vscode-textLink-activeForeground',
descriptionForeground: '--vscode-descriptionForeground',
foreground: '--vscode-foreground',
// Terminal
'terminal.ansiRed': '--vscode-terminal-ansiRed',
'terminal.ansiGreen': '--vscode-terminal-ansiGreen',
'terminal.ansiBlue': '--vscode-terminal-ansiBlue',
'terminal.ansiYellow': '--vscode-terminal-ansiYellow',
'terminal.ansiCyan': '--vscode-terminal-ansiCyan',
'terminal.ansiMagenta': '--vscode-terminal-ansiMagenta',
// Diagnostics
'editorError.foreground': '--vscode-editorError-foreground',
'editorError.background': '--vscode-editorError-background',
'editorWarning.foreground': '--vscode-editorWarning-foreground',
'editorWarning.background': '--vscode-editorWarning-background',
'editorInfo.foreground': '--vscode-editorInfo-foreground',
'editorInfo.background': '--vscode-editorInfo-background',
// Testing
'testing.iconPassed': '--vscode-testing-iconPassed',
'testing.iconFailed': '--vscode-testing-iconFailed',
// Badge
'badge.background': '--vscode-badge-background',
'badge.foreground': '--vscode-badge-foreground',
// Status bar
'statusBar.background': '--vscode-statusBar-background',
'statusBar.foreground': '--vscode-statusBar-foreground',
// Lists
'list.hoverBackground': '--vscode-list-hoverBackground',
'list.activeSelectionBackground': '--vscode-list-activeSelectionBackground',
'list.activeSelectionForeground': '--vscode-list-activeSelectionForeground',
'list.inactiveSelectionBackground': '--vscode-list-inactiveSelectionBackground',
// Preformat
'textPreformat.foreground': '--vscode-textPreformat-foreground',
'textPreformat.background': '--vscode-textPreformat-background',
// Editor widgets
'editorWidget.background': '--vscode-editorWidget-background',
'editorWidget.foreground': '--vscode-editorWidget-foreground',
'editorWidget.border': '--vscode-editorWidget-border',
// Dropdown
'dropdown.background': '--vscode-dropdown-background',
'dropdown.border': '--vscode-dropdown-border',
// Editor gutter
'editorLineNumber.foreground': '--vscode-editorLineNumber-foreground',
'editorLineNumber.activeForeground': '--vscode-editorLineNumber-activeForeground',
// Scrollbar
'scrollbarSlider.background': '--vscode-scrollbarSlider-background',
'scrollbarSlider.hoverBackground': '--vscode-scrollbarSlider-hoverBackground',
};
const normalizeColor = (value?: string | null): string | undefined => {
@@ -154,8 +238,6 @@ const applyAlpha = (color: string, opacity: number): string => {
return color;
};
const forceOpaque = (color: string): string => applyAlpha(color, 1);
const readKind = (preferred?: VSCodeThemeKind): VSCodeThemeKind => {
if (preferred === 'light' || preferred === 'dark' || preferred === 'high-contrast') {
return preferred;
@@ -199,48 +281,135 @@ export const readVSCodeThemePalette = (
};
export const buildVSCodeThemeFromPalette = (palette: VSCodeThemePalette): Theme => {
const base = palette.kind === 'light' ? flexokiLightTheme : flexokiDarkTheme;
const base = getDefaultTheme(palette.kind === 'dark');
const isDark = palette.kind === 'dark' || palette.kind === 'high-contrast';
const read = (token: VSCodeThemeColorToken, fallback: string): string =>
palette.colors[token] ?? fallback;
const sidebarBg = read('sideBar.background', base.colors.surface.background);
const panelBg = read('panel.background', read('editor.background', base.colors.surface.elevated));
const panelFg = read('panel.foreground', read('editor.foreground', base.colors.surface.foreground));
const background = sidebarBg;
const foreground = read('editor.foreground', base.colors.surface.foreground);
// Use descriptionForeground for muted text with reduced opacity for less prominence
// This makes inactive tabs and secondary text clearly distinguishable from active/primary text
const rawMutedFg = read('descriptionForeground', base.colors.surface.mutedForeground);
const mutedFg = applyAlpha(rawMutedFg, palette.kind === 'light' ? 0.55 : 0.5);
// Prefer stable UI colors for accent to avoid theme-specific diff values.
// ===========================================
// SURFACE COLORS - Layered backgrounds
// ===========================================
// Main app background: sidebar is the outermost container
const background = read('sideBar.background', base.colors.surface.background);
// Main foreground text color
const foreground = read('foreground', read('editor.foreground', base.colors.surface.foreground));
// Elevated surfaces: panels, cards, dialogs - use editorWidget or panel
const elevated = read('editorWidget.background', read('panel.background', read('editor.background', base.colors.surface.elevated)));
const elevatedForeground = read('editorWidget.foreground', read('panel.foreground', foreground));
// Muted background: used for inactive/deemphasized areas - use list inactive selection
const muted = read('list.inactiveSelectionBackground', read('editor.lineHighlightBackground', base.colors.surface.muted));
// Muted foreground: secondary text - description foreground is perfect semantic match
const mutedForeground = read('descriptionForeground', read('input.placeholderForeground', base.colors.surface.mutedForeground));
// Subtle: used for input backgrounds, user message bubbles - input.background is the semantic match
const subtle = read('input.background', read('dropdown.background', elevated));
// Overlay: modal backdrops, status bar
const overlay = read('statusBar.background', base.colors.surface.overlay);
// ===========================================
// PRIMARY / ACCENT COLORS
// ===========================================
const accent = read('button.background', read('textLink.foreground', base.colors.primary.base));
const accentFg = read('button.foreground', base.colors.primary.foreground || base.colors.surface.background);
const hoverBg = read('list.hoverBackground', read('editor.selectionBackground', base.colors.interactive.hover));
const activeBg = read('list.activeSelectionBackground', hoverBg);
const selection = read('editor.selectionBackground', activeBg);
const selectionFg = read('editor.selectionForeground', foreground);
const focus = read('focusBorder', accent);
// Build a visible border color: prefer contrastBorder (high-contrast themes), then sideBar.border, panel.border, input.border
// If the chosen border is too transparent or matches background, derive one from foreground
const rawBorder = read('contrastBorder', '') ||
read('sideBar.border', '') ||
const accentHover = read('button.hoverBackground', accent);
const accentForeground = read('button.foreground', base.colors.primary.foreground || background);
const accentMuted = read('textLink.foreground', accent);
// ===========================================
// INTERACTIVE COLORS
// ===========================================
// Border: Use widget.border (most generic), then input.border, panel.border
// DO NOT reduce opacity - these are already properly set by VS Code themes
const border = read('widget.border', '') ||
read('input.border', '') ||
read('panel.border', '') ||
read('input.border', base.colors.interactive.border);
// Ensure border has enough visibility by applying minimum opacity
const border = rawBorder ? applyAlpha(forceOpaque(rawBorder), palette.kind === 'light' ? 0.15 : 0.2) : applyAlpha(foreground, palette.kind === 'light' ? 0.1 : 0.15);
const focusRing = applyAlpha(focus, palette.kind === 'light' ? 0.35 : 0.45);
read('sideBar.border', '') ||
read('contrastBorder', base.colors.interactive.border);
// For high-contrast or missing borders, derive from foreground
const effectiveBorder = border || applyAlpha(foreground, isDark ? 0.25 : 0.2);
// Hover/active backgrounds
const hoverBg = read('list.hoverBackground', base.colors.interactive.hover);
const activeBg = read('list.activeSelectionBackground', hoverBg);
// Selection
const selection = read('editor.selectionBackground', base.colors.interactive.selection);
const selectionForeground = read('editor.selectionForeground', read('list.activeSelectionForeground', foreground));
// Focus
const focus = read('focusBorder', accent);
const focusRing = applyAlpha(focus, isDark ? 0.45 : 0.35);
// Cursor
const cursor = read('editorCursor.foreground', base.colors.interactive.cursor);
// ===========================================
// STATUS COLORS
// ===========================================
const errorColor = read('editorError.foreground', read('testing.iconFailed', base.colors.status.error));
const errorBg = read('editorError.background', applyAlpha(errorColor, isDark ? 0.16 : 0.12));
const warningColor = read('editorWarning.foreground', base.colors.status.warning);
const warningBg = read('editorWarning.background', applyAlpha(warningColor, isDark ? 0.16 : 0.12));
const successColor = read('testing.iconPassed', read('gitDecoration.addedResourceForeground', base.colors.status.success));
const successBg = applyAlpha(successColor, isDark ? 0.16 : 0.12);
const infoColor = read('editorInfo.foreground', base.colors.status.info);
const infoBg = read('editorInfo.background', applyAlpha(infoColor, isDark ? 0.16 : 0.12));
// ===========================================
// SYNTAX / CODE COLORS
// ===========================================
const syntaxComment = read('editorLineNumber.foreground', mutedForeground);
const syntaxString = read('textPreformat.foreground', read('terminal.ansiGreen', base.colors.syntax.base.string));
const syntaxKeyword = read('terminal.ansiBlue', accent);
const syntaxNumber = read('terminal.ansiYellow', base.colors.syntax.base.number);
const syntaxFunction = read('terminal.ansiCyan', base.colors.syntax.base.function);
const syntaxVariable = read('terminal.ansiMagenta', foreground);
const syntaxType = read('terminal.ansiYellow', base.colors.syntax.base.type);
// ===========================================
// TOOLS SECTION - For tool cards, diffs, etc.
// ===========================================
// Tools border should be visible! Use border directly without extra opacity reduction
const toolsBorder = effectiveBorder;
const toolsBackground = applyAlpha(muted, 0.5);
const toolsHeaderHover = applyAlpha(hoverBg, 0.5);
// Diff colors from VS Code diff editor
const diffAddedBg = read('diffEditor.insertedLineBackground', read('diffEditor.insertedTextBackground', successBg));
const diffRemovedBg = read('diffEditor.removedLineBackground', read('diffEditor.removedTextBackground', errorBg));
const diffAddedColor = read('gitDecoration.addedResourceForeground', successColor);
const diffRemovedColor = read('gitDecoration.deletedResourceForeground', errorColor);
const diffModifiedColor = read('gitDecoration.modifiedResourceForeground', infoColor);
// ===========================================
// BADGES
// ===========================================
const badgeBg = read('badge.background', accent);
const badgeFg = read('badge.foreground', foreground);
const success = read('testing.iconPassed', base.colors.status.success);
const successBg = applyAlpha(success, palette.kind === 'light' ? 0.12 : 0.16);
const successBorder = applyAlpha(success, palette.kind === 'light' ? 0.35 : 0.45);
const inlineCode = read('textPreformat.foreground', read('terminal.ansiGreen', base.colors.syntax.base.string));
// Tailwind's `--accent` drives hovered/selected menu items in Radix/shadcn; prefer VS Code list hover/selection.
const subtle = hoverBg;
const badgeFg = read('badge.foreground', accentForeground);
// ===========================================
// CHAT COLORS
// ===========================================
// User messages: same as chat input (subtle surface)
const userMessageBg = subtle;
return {
...base,
metadata: {
@@ -250,37 +419,35 @@ export const buildVSCodeThemeFromPalette = (palette: VSCodeThemePalette): Theme
description: 'Mirrors your current VS Code color theme',
author: 'VS Code',
version: '1.0.0',
variant: palette.kind === 'light' ? 'light' : 'dark',
variant: isDark ? 'dark' : 'light',
tags: ['vscode', 'auto'],
},
colors: {
...base.colors,
primary: {
base: accent,
hover: read('button.hoverBackground', accent),
active: read('button.hoverBackground', accent),
foreground: accentFg,
muted: read('textLink.foreground', accent),
hover: accentHover,
active: accentHover,
foreground: accentForeground,
muted: accentMuted,
emphasis: accent,
},
surface: {
...base.colors.surface,
background,
foreground,
muted: activeBg,
mutedForeground: mutedFg,
elevated: panelBg,
elevatedForeground: panelFg,
overlay: read('statusBar.background', base.colors.surface.overlay),
muted,
mutedForeground,
elevated,
elevatedForeground,
overlay,
subtle,
},
interactive: {
...base.colors.interactive,
border,
borderHover: border,
border: effectiveBorder,
borderHover: effectiveBorder,
borderFocus: focus,
selection,
selectionForeground: selectionFg,
selectionForeground,
focus,
focusRing,
cursor,
@@ -288,48 +455,94 @@ export const buildVSCodeThemeFromPalette = (palette: VSCodeThemePalette): Theme
active: activeBg,
},
status: {
...base.colors.status,
error: read('editorError.foreground', base.colors.status.error),
errorForeground: read('editorError.foreground', base.colors.status.errorForeground),
errorBackground: read('editorError.background', base.colors.status.errorBackground),
errorBorder: read('editorError.foreground', base.colors.status.errorBorder),
warning: read('editorWarning.foreground', base.colors.status.warning),
warningForeground: read('editorWarning.foreground', base.colors.status.warningForeground),
warningBackground: read('editorWarning.background', base.colors.status.warningBackground),
warningBorder: read('editorWarning.foreground', base.colors.status.warningBorder),
success,
successForeground: success,
error: errorColor,
errorForeground: errorColor,
errorBackground: errorBg,
errorBorder: applyAlpha(errorColor, isDark ? 0.45 : 0.35),
warning: warningColor,
warningForeground: warningColor,
warningBackground: warningBg,
warningBorder: applyAlpha(warningColor, isDark ? 0.45 : 0.35),
success: successColor,
successForeground: successColor,
successBackground: successBg,
successBorder,
info: read('editorInfo.foreground', base.colors.status.info),
infoForeground: read('editorInfo.foreground', base.colors.status.infoForeground),
infoBackground: read('editorInfo.background', base.colors.status.infoBackground),
infoBorder: read('editorInfo.foreground', base.colors.status.infoBorder),
successBorder: applyAlpha(successColor, isDark ? 0.45 : 0.35),
info: infoColor,
infoForeground: infoColor,
infoBackground: infoBg,
infoBorder: applyAlpha(infoColor, isDark ? 0.45 : 0.35),
},
syntax: {
...base.colors.syntax,
base: {
...base.colors.syntax.base,
background,
background: elevated,
foreground,
comment: read('editor.lineHighlightBackground', base.colors.syntax.base.comment),
keyword: accent,
string: inlineCode,
number: read('terminal.ansiYellow', base.colors.syntax.base.number),
function: read('terminal.ansiBlue', base.colors.syntax.base.function),
variable: read('terminal.ansiCyan', base.colors.syntax.base.variable),
type: read('terminal.ansiCyan', base.colors.syntax.base.type),
comment: syntaxComment,
keyword: syntaxKeyword,
string: syntaxString,
number: syntaxNumber,
function: syntaxFunction,
variable: syntaxVariable,
type: syntaxType,
operator: accent,
},
},
// Explicit tools section - cssGenerator will use these values directly
tools: {
background: toolsBackground,
border: toolsBorder,
headerHover: toolsHeaderHover,
icon: mutedForeground,
title: foreground,
description: applyAlpha(mutedForeground, 0.8),
edit: {
added: diffAddedColor,
addedBackground: diffAddedBg,
removed: diffRemovedColor,
removedBackground: diffRemovedBg,
modified: diffModifiedColor,
modifiedBackground: applyAlpha(diffModifiedColor, isDark ? 0.16 : 0.12),
lineNumber: syntaxComment,
},
},
// Explicit chat section
chat: {
userMessage: foreground,
userMessageBackground: userMessageBg,
assistantMessage: foreground,
assistantMessageBackground: background,
timestamp: mutedForeground,
divider: effectiveBorder,
},
// Badges
badges: {
...(base.colors.badges || {}),
default: {
bg: badgeBg,
fg: badgeFg,
border: border,
border: effectiveBorder,
},
},
// Markdown colors
markdown: {
heading1: foreground,
heading2: foreground,
heading3: foreground,
heading4: foreground,
link: accentMuted,
linkHover: read('textLink.activeForeground', accentHover),
inlineCode: syntaxString,
inlineCodeBackground: subtle,
blockquote: mutedForeground,
blockquoteBorder: effectiveBorder,
listMarker: applyAlpha(accent, 0.6),
},
// Scrollbar
scrollbar: {
track: 'transparent',
thumb: read('scrollbarSlider.background', applyAlpha(foreground, isDark ? 0.2 : 0.15)),
thumbHover: read('scrollbarSlider.hoverBackground', applyAlpha(foreground, isDark ? 0.35 : 0.25)),
},
},
};
};