mirror of
https://github.com/google-gemini/gemini-cli.git
synced 2026-03-18 10:01:29 -07:00
feat(ui): simplify colors visualizer bullets and remove redundant usage column
This commit is contained in:
Keith Guerin
@@ -100,21 +100,16 @@ describe('ColorsDisplay', () => {
|
||||
const output = lastFrame();
|
||||
|
||||
// Check for title and description
|
||||
expect(output).toContain('How themes and terminals interact:');
|
||||
expect(output).toContain('TrueColor (Hex):');
|
||||
expect(output).toContain('Theme/Terminal interaction:');
|
||||
expect(output).toContain('Hex:');
|
||||
|
||||
// Check for some color names and values
|
||||
expect(output).toContain('text.primary');
|
||||
// Check for some color names and values expect(output).toContain('text.primary');
|
||||
expect(output).toContain('#ffffff');
|
||||
expect(output).toContain('background.diff.added');
|
||||
expect(output).toContain('#003300');
|
||||
expect(output).toContain('border.default');
|
||||
expect(output).toContain('#555555');
|
||||
|
||||
// Check for some descriptions
|
||||
expect(output).toContain('Primary text color');
|
||||
expect(output).toContain('Standard border color');
|
||||
expect(output).toContain('Main terminal background color');
|
||||
unmount();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -10,29 +10,6 @@ import Gradient from 'ink-gradient';
|
||||
import { theme } from '../semantic-colors.js';
|
||||
import type { Theme } from '../themes/theme.js';
|
||||
|
||||
const COLOR_DESCRIPTIONS: Record<string, string> = {
|
||||
'text.primary': 'Primary text color (uses terminal default if blank)',
|
||||
'text.secondary': 'Secondary/dimmed text color',
|
||||
'text.link': 'Hyperlink and highlighting color',
|
||||
'text.accent': 'Accent color for emphasis',
|
||||
'text.response':
|
||||
'Color for model response text (uses terminal default if blank)',
|
||||
'background.primary': 'Main terminal background color',
|
||||
'background.message': 'Subtle background for message blocks',
|
||||
'background.input': 'Background for the input prompt',
|
||||
'background.diff.added': 'Background for added lines in diffs',
|
||||
'background.diff.removed': 'Background for removed lines in diffs',
|
||||
'border.default': 'Standard border color',
|
||||
'border.focused': 'Border color when an element is focused',
|
||||
'ui.comment': 'Color for code comments and metadata',
|
||||
'ui.symbol': 'Color for technical symbols and UI icons',
|
||||
'ui.dark': 'Deeply dimmed color for subtle UI elements',
|
||||
'ui.gradient': 'Array of colors used for UI gradients',
|
||||
'status.error': 'Color for error messages and critical status',
|
||||
'status.success': 'Color for success messages and positive status',
|
||||
'status.warning': 'Color for warnings and cautionary status',
|
||||
};
|
||||
|
||||
interface StandardColorRow {
|
||||
type: 'standard';
|
||||
name: string;
|
||||
@@ -53,8 +30,8 @@ interface BackgroundColorRow {
|
||||
|
||||
type ColorRow = StandardColorRow | GradientColorRow | BackgroundColorRow;
|
||||
|
||||
const VALUE_COLUMN_WIDTH = '10%';
|
||||
const NAME_COLUMN_WIDTH = '30%';
|
||||
const VALUE_COLUMN_WIDTH = '25%';
|
||||
const NAME_COLUMN_WIDTH = '75%';
|
||||
|
||||
interface ColorsDisplayProps {
|
||||
activeTheme: Theme;
|
||||
@@ -145,30 +122,29 @@ export const ColorsDisplay: React.FC<ColorsDisplayProps> = ({
|
||||
<Text bold color={theme.text.accent}>
|
||||
DEVELOPER TOOLS (Not visible to users)
|
||||
</Text>
|
||||
<Text color={theme.text.primary}>
|
||||
<Text bold>How themes and terminals interact:</Text>
|
||||
</Text>
|
||||
<Box marginLeft={2} flexDirection="column">
|
||||
<Box marginTop={1} flexDirection="column">
|
||||
<Text color={theme.text.primary}>
|
||||
• <Text bold>TrueColor (Hex):</Text> Modern terminals render hex
|
||||
codes exactly. They are <Text italic>not</Text> overridden by
|
||||
terminal app themes.
|
||||
</Text>
|
||||
<Text color={theme.text.primary}>
|
||||
• <Text bold>ANSI Names:</Text> Colors like 'red' or
|
||||
'green' <Text italic>are</Text> mapped to your terminal
|
||||
app's specific palette.
|
||||
</Text>
|
||||
<Text color={theme.text.primary}>
|
||||
• <Text bold>Default colors:</Text> When Value is
|
||||
'(blank)', the app uses your terminal's default
|
||||
foreground/background.
|
||||
</Text>
|
||||
<Text color={theme.text.primary}>
|
||||
• <Text bold>Compatibility:</Text> In terminals with limited color,
|
||||
hex colors are automatically approximated to the closest available
|
||||
ANSI color.
|
||||
<Text bold>Theme/Terminal interaction:</Text>
|
||||
</Text>
|
||||
<Box marginLeft={2} flexDirection="column">
|
||||
<Text color={theme.text.primary}>
|
||||
• <Text bold>Hex:</Text> Rendered exactly by modern terminals. Not
|
||||
overridden by app themes.
|
||||
</Text>
|
||||
<Text color={theme.text.primary}>
|
||||
• <Text bold>Blank:</Text> Uses your terminal's default
|
||||
foreground/background.
|
||||
</Text>
|
||||
<Text color={theme.text.primary}>
|
||||
• <Text bold>Compatibility:</Text> On older terminals, hex is
|
||||
approximated to the nearest ANSI color.
|
||||
</Text>
|
||||
<Text color={theme.text.primary}>
|
||||
• <Text bold>ANSI Names:</Text> 'red',
|
||||
'green', etc. are mapped to your terminal app's
|
||||
palette.
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@@ -184,11 +160,6 @@ export const ColorsDisplay: React.FC<ColorsDisplayProps> = ({
|
||||
Name
|
||||
</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<Text bold color={theme.text.link} dimColor>
|
||||
Usage
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* All Rows */}
|
||||
@@ -205,7 +176,6 @@ export const ColorsDisplay: React.FC<ColorsDisplayProps> = ({
|
||||
};
|
||||
|
||||
function renderStandardRow({ name, value }: StandardColorRow) {
|
||||
const description = COLOR_DESCRIPTIONS[name] || '';
|
||||
const isHex = value.startsWith('#');
|
||||
const displayColor = isHex ? value : theme.text.primary;
|
||||
|
||||
@@ -217,16 +187,11 @@ function renderStandardRow({ name, value }: StandardColorRow) {
|
||||
<Box width={NAME_COLUMN_WIDTH}>
|
||||
<Text color={displayColor}>{name}</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<Text color={theme.text.secondary}>{description}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function renderGradientRow({ name, value }: GradientColorRow) {
|
||||
const description = COLOR_DESCRIPTIONS[name] || '';
|
||||
|
||||
return (
|
||||
<Box key={name} flexDirection="row" paddingX={1}>
|
||||
<Box width={VALUE_COLUMN_WIDTH} flexDirection="column">
|
||||
@@ -241,16 +206,11 @@ function renderGradientRow({ name, value }: GradientColorRow) {
|
||||
<Text>{name}</Text>
|
||||
</Gradient>
|
||||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<Text color={theme.text.secondary}>{description}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function renderBackgroundRow({ name, value }: BackgroundColorRow) {
|
||||
const description = COLOR_DESCRIPTIONS[name] || '';
|
||||
|
||||
return (
|
||||
<Box key={name} flexDirection="row" paddingX={1}>
|
||||
<Box
|
||||
@@ -266,9 +226,6 @@ function renderBackgroundRow({ name, value }: BackgroundColorRow) {
|
||||
<Box width={NAME_COLUMN_WIDTH} paddingLeft={1}>
|
||||
<Text color={theme.text.primary}>{name}</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<Text color={theme.text.secondary}>{description}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -20,67 +20,36 @@ exports[`Initial Theme Selection > should default to a dark theme when terminal
|
||||
│ ▼ │
|
||||
│ ╭─────────────────────────────────────────────────╮ │
|
||||
│ │ DEVELOPER TOOLS (Not visible to users) │ │
|
||||
│ │ How themes and terminals interact: │ │
|
||||
│ │ • TrueColor (Hex): Modern terminals render │ │
|
||||
│ │ hex codes exactly. They are not overridden by │ │
|
||||
│ │ terminal app themes. │ │
|
||||
│ │ • ANSI Names: Colors like 'red' or 'green' │ │
|
||||
│ │ are mapped to your terminal app's specific │ │
|
||||
│ │ palette. │ │
|
||||
│ │ • Default colors: When Value is '(blank)', │ │
|
||||
│ │ the app uses your terminal's default │ │
|
||||
│ │ foreground/background. │ │
|
||||
│ │ • Compatibility: In terminals with limited │ │
|
||||
│ │ color, hex colors are automatically │ │
|
||||
│ │ approximated to the closest available ANSI │ │
|
||||
│ │ color. │ │
|
||||
│ │ │ │
|
||||
│ │ ValuName Usage │ │
|
||||
│ │ e │ │
|
||||
│ │ #… background.pMain terminal background │ │
|
||||
│ │ rimary color │ │
|
||||
│ │ … backgroundSubtle background for message │ │
|
||||
│ │ .message blocks │ │
|
||||
│ │ #… background.Background for the input │ │
|
||||
│ │ input prompt │ │
|
||||
│ │ … backgroundBackground for added lines in │ │
|
||||
│ │ .diff.addediffs │ │
|
||||
│ │ d │ │
|
||||
│ │ … backgroun Background for removed lines │ │
|
||||
│ │ d.diff.re in diffs │ │
|
||||
│ │ moved │ │
|
||||
│ │ (bltext.prim Primary text color (uses │ │
|
||||
│ │ ankary terminal default if blank) │ │
|
||||
│ │ ) │ │
|
||||
│ │ #6C7text.secondar Secondary/dimmed text │ │
|
||||
│ │ 086 y color │ │
|
||||
│ │ #89Btext.link Hyperlink and highlighting │ │
|
||||
│ │ 4FA color │ │
|
||||
│ │ #CBAtext.accent Accent color for emphasis │ │
|
||||
│ │ 6F7 │ │
|
||||
│ │ (bltext.resp Color for model response text │ │
|
||||
│ │ ankonse (uses terminal default if │ │
|
||||
│ │ ) blank) │ │
|
||||
│ │ #3d3border.defaul Standard border color │ │
|
||||
│ │ f51 t │ │
|
||||
│ │ #89 border.focBorder color when an element │ │
|
||||
│ │ B4F used is focused │ │
|
||||
│ │ A │ │
|
||||
│ │ #F3status.er Color for error messages and │ │
|
||||
│ │ 8BAror critical status │ │
|
||||
│ │ 8 │ │
|
||||
│ │ #A6 status.sucColor for success messages and │ │
|
||||
│ │ E3A cess positive status │ │
|
||||
│ │ 1 │ │
|
||||
│ │ #F9status.war Color for warnings and │ │
|
||||
│ │ E2Aning cautionary status │ │
|
||||
│ │ F │ │
|
||||
│ │ #479ui.gradien Array of colors used for UI │ │
|
||||
│ │ E4 t gradients │ │
|
||||
│ │ #847A │ │
|
||||
│ │ CE │ │
|
||||
│ │ #C367 │ │
|
||||
│ │ 7F │ │
|
||||
│ │ Theme/Terminal interaction: │ │
|
||||
│ │ • Hex: Rendered exactly by modern terminals. │ │
|
||||
│ │ Not overridden by app themes. │ │
|
||||
│ │ • Blank: Uses your terminal's default │ │
|
||||
│ │ foreground/background. │ │
|
||||
│ │ • Compatibility: On older terminals, hex is │ │
|
||||
│ │ approximated to the nearest ANSI color. │ │
|
||||
│ │ • ANSI Names: 'red', 'green', etc. are mapped │ │
|
||||
│ │ to your terminal app's palette. │ │
|
||||
│ │ │ │
|
||||
│ │ Value Name │ │
|
||||
│ │ #1E1E2E background.primary │ │
|
||||
│ │ #2a2b3c background.message │ │
|
||||
│ │ #313243 background.input │ │
|
||||
│ │ #28350B background.diff.added │ │
|
||||
│ │ #430000 background.diff.removed │ │
|
||||
│ │ (blank) text.primary │ │
|
||||
│ │ #6C7086 text.secondary │ │
|
||||
│ │ #89B4FA text.link │ │
|
||||
│ │ #CBA6F7 text.accent │ │
|
||||
│ │ (blank) text.response │ │
|
||||
│ │ #3d3f51 border.default │ │
|
||||
│ │ #89B4FA border.focused │ │
|
||||
│ │ #F38BA8 status.error │ │
|
||||
│ │ #A6E3A1 status.success │ │
|
||||
│ │ #F9E2AF status.warning │ │
|
||||
│ │ #4796E4 ui.gradient │ │
|
||||
│ │ #847ACE │ │
|
||||
│ │ #C3677F │ │
|
||||
│ ╰─────────────────────────────────────────────────╯ │
|
||||
│ │
|
||||
│ (Use Enter to select, Tab to configure scope, Esc to close) │
|
||||
@@ -109,67 +78,36 @@ exports[`Initial Theme Selection > should default to a light theme when terminal
|
||||
│ ▼ │
|
||||
│ ╭─────────────────────────────────────────────────╮ │
|
||||
│ │ DEVELOPER TOOLS (Not visible to users) │ │
|
||||
│ │ How themes and terminals interact: │ │
|
||||
│ │ • TrueColor (Hex): Modern terminals render │ │
|
||||
│ │ hex codes exactly. They are not overridden by │ │
|
||||
│ │ terminal app themes. │ │
|
||||
│ │ • ANSI Names: Colors like 'red' or 'green' │ │
|
||||
│ │ are mapped to your terminal app's specific │ │
|
||||
│ │ palette. │ │
|
||||
│ │ • Default colors: When Value is '(blank)', │ │
|
||||
│ │ the app uses your terminal's default │ │
|
||||
│ │ foreground/background. │ │
|
||||
│ │ • Compatibility: In terminals with limited │ │
|
||||
│ │ color, hex colors are automatically │ │
|
||||
│ │ approximated to the closest available ANSI │ │
|
||||
│ │ color. │ │
|
||||
│ │ │ │
|
||||
│ │ ValuName Usage │ │
|
||||
│ │ e │ │
|
||||
│ │ #… background.pMain terminal background │ │
|
||||
│ │ rimary color │ │
|
||||
│ │ … backgroundSubtle background for message │ │
|
||||
│ │ .message blocks │ │
|
||||
│ │ #… background.Background for the input │ │
|
||||
│ │ input prompt │ │
|
||||
│ │ … backgroundBackground for added lines in │ │
|
||||
│ │ .diff.addediffs │ │
|
||||
│ │ d │ │
|
||||
│ │ … backgroun Background for removed lines │ │
|
||||
│ │ d.diff.re in diffs │ │
|
||||
│ │ moved │ │
|
||||
│ │ (bltext.prim Primary text color (uses │ │
|
||||
│ │ ankary terminal default if blank) │ │
|
||||
│ │ ) │ │
|
||||
│ │ #97atext.secondar Secondary/dimmed text │ │
|
||||
│ │ 0b0 y color │ │
|
||||
│ │ #3B8text.link Hyperlink and highlighting │ │
|
||||
│ │ 2F6 color │ │
|
||||
│ │ #8B5text.accent Accent color for emphasis │ │
|
||||
│ │ CF6 │ │
|
||||
│ │ (bltext.resp Color for model response text │ │
|
||||
│ │ ankonse (uses terminal default if │ │
|
||||
│ │ ) blank) │ │
|
||||
│ │ #d2dborder.defaul Standard border color │ │
|
||||
│ │ 6dc t │ │
|
||||
│ │ #3B border.focBorder color when an element │ │
|
||||
│ │ 82F used is focused │ │
|
||||
│ │ 6 │ │
|
||||
│ │ #DDstatus.er Color for error messages and │ │
|
||||
│ │ 4C4ror critical status │ │
|
||||
│ │ C │ │
|
||||
│ │ #3C status.sucColor for success messages and │ │
|
||||
│ │ A84 cess positive status │ │
|
||||
│ │ B │ │
|
||||
│ │ #D5status.war Color for warnings and │ │
|
||||
│ │ A40ning cautionary status │ │
|
||||
│ │ A │ │
|
||||
│ │ #479ui.gradien Array of colors used for UI │ │
|
||||
│ │ E4 t gradients │ │
|
||||
│ │ #847A │ │
|
||||
│ │ CE │ │
|
||||
│ │ #C367 │ │
|
||||
│ │ 7F │ │
|
||||
│ │ Theme/Terminal interaction: │ │
|
||||
│ │ • Hex: Rendered exactly by modern terminals. │ │
|
||||
│ │ Not overridden by app themes. │ │
|
||||
│ │ • Blank: Uses your terminal's default │ │
|
||||
│ │ foreground/background. │ │
|
||||
│ │ • Compatibility: On older terminals, hex is │ │
|
||||
│ │ approximated to the nearest ANSI color. │ │
|
||||
│ │ • ANSI Names: 'red', 'green', etc. are mapped │ │
|
||||
│ │ to your terminal app's palette. │ │
|
||||
│ │ │ │
|
||||
│ │ Value Name │ │
|
||||
│ │ #FAFAFA background.primary │ │
|
||||
│ │ #eaecee background.message │ │
|
||||
│ │ #e2e4e8 background.input │ │
|
||||
│ │ #C6EAD8 background.diff.added │ │
|
||||
│ │ #FFCCCC background.diff.removed │ │
|
||||
│ │ (blank) text.primary │ │
|
||||
│ │ #97a0b0 text.secondary │ │
|
||||
│ │ #3B82F6 text.link │ │
|
||||
│ │ #8B5CF6 text.accent │ │
|
||||
│ │ (blank) text.response │ │
|
||||
│ │ #d2d6dc border.default │ │
|
||||
│ │ #3B82F6 border.focused │ │
|
||||
│ │ #DD4C4C status.error │ │
|
||||
│ │ #3CA84B status.success │ │
|
||||
│ │ #D5A40A status.warning │ │
|
||||
│ │ #4796E4 ui.gradient │ │
|
||||
│ │ #847ACE │ │
|
||||
│ │ #C3677F │ │
|
||||
│ ╰─────────────────────────────────────────────────╯ │
|
||||
│ │
|
||||
│ (Use Enter to select, Tab to configure scope, Esc to close) │
|
||||
@@ -198,67 +136,36 @@ exports[`Initial Theme Selection > should use the theme from settings even if te
|
||||
│ ▼ │
|
||||
│ ╭─────────────────────────────────────────────────╮ │
|
||||
│ │ DEVELOPER TOOLS (Not visible to users) │ │
|
||||
│ │ How themes and terminals interact: │ │
|
||||
│ │ • TrueColor (Hex): Modern terminals render │ │
|
||||
│ │ hex codes exactly. They are not overridden by │ │
|
||||
│ │ terminal app themes. │ │
|
||||
│ │ • ANSI Names: Colors like 'red' or 'green' │ │
|
||||
│ │ are mapped to your terminal app's specific │ │
|
||||
│ │ palette. │ │
|
||||
│ │ • Default colors: When Value is '(blank)', │ │
|
||||
│ │ the app uses your terminal's default │ │
|
||||
│ │ foreground/background. │ │
|
||||
│ │ • Compatibility: In terminals with limited │ │
|
||||
│ │ color, hex colors are automatically │ │
|
||||
│ │ approximated to the closest available ANSI │ │
|
||||
│ │ color. │ │
|
||||
│ │ │ │
|
||||
│ │ ValuName Usage │ │
|
||||
│ │ e │ │
|
||||
│ │ #… background.pMain terminal background │ │
|
||||
│ │ rimary color │ │
|
||||
│ │ … backgroundSubtle background for message │ │
|
||||
│ │ .message blocks │ │
|
||||
│ │ #… background.Background for the input │ │
|
||||
│ │ input prompt │ │
|
||||
│ │ … backgroundBackground for added lines in │ │
|
||||
│ │ .diff.addediffs │ │
|
||||
│ │ d │ │
|
||||
│ │ … backgroun Background for removed lines │ │
|
||||
│ │ d.diff.re in diffs │ │
|
||||
│ │ moved │ │
|
||||
│ │ (bltext.prim Primary text color (uses │ │
|
||||
│ │ ankary terminal default if blank) │ │
|
||||
│ │ ) │ │
|
||||
│ │ #6C7text.secondar Secondary/dimmed text │ │
|
||||
│ │ 086 y color │ │
|
||||
│ │ #89Btext.link Hyperlink and highlighting │ │
|
||||
│ │ 4FA color │ │
|
||||
│ │ #CBAtext.accent Accent color for emphasis │ │
|
||||
│ │ 6F7 │ │
|
||||
│ │ (bltext.resp Color for model response text │ │
|
||||
│ │ ankonse (uses terminal default if │ │
|
||||
│ │ ) blank) │ │
|
||||
│ │ #3d3border.defaul Standard border color │ │
|
||||
│ │ f51 t │ │
|
||||
│ │ #89 border.focBorder color when an element │ │
|
||||
│ │ B4F used is focused │ │
|
||||
│ │ A │ │
|
||||
│ │ #F3status.er Color for error messages and │ │
|
||||
│ │ 8BAror critical status │ │
|
||||
│ │ 8 │ │
|
||||
│ │ #A6 status.sucColor for success messages and │ │
|
||||
│ │ E3A cess positive status │ │
|
||||
│ │ 1 │ │
|
||||
│ │ #F9status.war Color for warnings and │ │
|
||||
│ │ E2Aning cautionary status │ │
|
||||
│ │ F │ │
|
||||
│ │ #479ui.gradien Array of colors used for UI │ │
|
||||
│ │ E4 t gradients │ │
|
||||
│ │ #847A │ │
|
||||
│ │ CE │ │
|
||||
│ │ #C367 │ │
|
||||
│ │ 7F │ │
|
||||
│ │ Theme/Terminal interaction: │ │
|
||||
│ │ • Hex: Rendered exactly by modern terminals. │ │
|
||||
│ │ Not overridden by app themes. │ │
|
||||
│ │ • Blank: Uses your terminal's default │ │
|
||||
│ │ foreground/background. │ │
|
||||
│ │ • Compatibility: On older terminals, hex is │ │
|
||||
│ │ approximated to the nearest ANSI color. │ │
|
||||
│ │ • ANSI Names: 'red', 'green', etc. are mapped │ │
|
||||
│ │ to your terminal app's palette. │ │
|
||||
│ │ │ │
|
||||
│ │ Value Name │ │
|
||||
│ │ #1E1E2E background.primary │ │
|
||||
│ │ #2a2b3c background.message │ │
|
||||
│ │ #313243 background.input │ │
|
||||
│ │ #28350B background.diff.added │ │
|
||||
│ │ #430000 background.diff.removed │ │
|
||||
│ │ (blank) text.primary │ │
|
||||
│ │ #6C7086 text.secondary │ │
|
||||
│ │ #89B4FA text.link │ │
|
||||
│ │ #CBA6F7 text.accent │ │
|
||||
│ │ (blank) text.response │ │
|
||||
│ │ #3d3f51 border.default │ │
|
||||
│ │ #89B4FA border.focused │ │
|
||||
│ │ #F38BA8 status.error │ │
|
||||
│ │ #A6E3A1 status.success │ │
|
||||
│ │ #F9E2AF status.warning │ │
|
||||
│ │ #4796E4 ui.gradient │ │
|
||||
│ │ #847ACE │ │
|
||||
│ │ #C3677F │ │
|
||||
│ ╰─────────────────────────────────────────────────╯ │
|
||||
│ │
|
||||
│ (Use Enter to select, Tab to configure scope, Esc to close) │
|
||||
@@ -301,67 +208,36 @@ exports[`ThemeDialog Snapshots > should render correctly in theme selection mode
|
||||
│ ▼ │
|
||||
│ ╭─────────────────────────────────────────────────╮ │
|
||||
│ │ DEVELOPER TOOLS (Not visible to users) │ │
|
||||
│ │ How themes and terminals interact: │ │
|
||||
│ │ • TrueColor (Hex): Modern terminals render │ │
|
||||
│ │ hex codes exactly. They are not overridden by │ │
|
||||
│ │ terminal app themes. │ │
|
||||
│ │ • ANSI Names: Colors like 'red' or 'green' │ │
|
||||
│ │ are mapped to your terminal app's specific │ │
|
||||
│ │ palette. │ │
|
||||
│ │ • Default colors: When Value is '(blank)', │ │
|
||||
│ │ the app uses your terminal's default │ │
|
||||
│ │ foreground/background. │ │
|
||||
│ │ • Compatibility: In terminals with limited │ │
|
||||
│ │ color, hex colors are automatically │ │
|
||||
│ │ approximated to the closest available ANSI │ │
|
||||
│ │ color. │ │
|
||||
│ │ │ │
|
||||
│ │ ValuName Usage │ │
|
||||
│ │ e │ │
|
||||
│ │ #… background.pMain terminal background │ │
|
||||
│ │ rimary color │ │
|
||||
│ │ … backgroundSubtle background for message │ │
|
||||
│ │ .message blocks │ │
|
||||
│ │ #… background.Background for the input │ │
|
||||
│ │ input prompt │ │
|
||||
│ │ … backgroundBackground for added lines in │ │
|
||||
│ │ .diff.addediffs │ │
|
||||
│ │ d │ │
|
||||
│ │ … backgroun Background for removed lines │ │
|
||||
│ │ d.diff.re in diffs │ │
|
||||
│ │ moved │ │
|
||||
│ │ (bltext.prim Primary text color (uses │ │
|
||||
│ │ ankary terminal default if blank) │ │
|
||||
│ │ ) │ │
|
||||
│ │ #6C7text.secondar Secondary/dimmed text │ │
|
||||
│ │ 086 y color │ │
|
||||
│ │ #89Btext.link Hyperlink and highlighting │ │
|
||||
│ │ 4FA color │ │
|
||||
│ │ #CBAtext.accent Accent color for emphasis │ │
|
||||
│ │ 6F7 │ │
|
||||
│ │ (bltext.resp Color for model response text │ │
|
||||
│ │ ankonse (uses terminal default if │ │
|
||||
│ │ ) blank) │ │
|
||||
│ │ #3d3border.defaul Standard border color │ │
|
||||
│ │ f51 t │ │
|
||||
│ │ #89 border.focBorder color when an element │ │
|
||||
│ │ B4F used is focused │ │
|
||||
│ │ A │ │
|
||||
│ │ #F3status.er Color for error messages and │ │
|
||||
│ │ 8BAror critical status │ │
|
||||
│ │ 8 │ │
|
||||
│ │ #A6 status.sucColor for success messages and │ │
|
||||
│ │ E3A cess positive status │ │
|
||||
│ │ 1 │ │
|
||||
│ │ #F9status.war Color for warnings and │ │
|
||||
│ │ E2Aning cautionary status │ │
|
||||
│ │ F │ │
|
||||
│ │ #479ui.gradien Array of colors used for UI │ │
|
||||
│ │ E4 t gradients │ │
|
||||
│ │ #847A │ │
|
||||
│ │ CE │ │
|
||||
│ │ #C367 │ │
|
||||
│ │ 7F │ │
|
||||
│ │ Theme/Terminal interaction: │ │
|
||||
│ │ • Hex: Rendered exactly by modern terminals. │ │
|
||||
│ │ Not overridden by app themes. │ │
|
||||
│ │ • Blank: Uses your terminal's default │ │
|
||||
│ │ foreground/background. │ │
|
||||
│ │ • Compatibility: On older terminals, hex is │ │
|
||||
│ │ approximated to the nearest ANSI color. │ │
|
||||
│ │ • ANSI Names: 'red', 'green', etc. are mapped │ │
|
||||
│ │ to your terminal app's palette. │ │
|
||||
│ │ │ │
|
||||
│ │ Value Name │ │
|
||||
│ │ #1E1E2E background.primary │ │
|
||||
│ │ #2a2b3c background.message │ │
|
||||
│ │ #313243 background.input │ │
|
||||
│ │ #28350B background.diff.added │ │
|
||||
│ │ #430000 background.diff.removed │ │
|
||||
│ │ (blank) text.primary │ │
|
||||
│ │ #6C7086 text.secondary │ │
|
||||
│ │ #89B4FA text.link │ │
|
||||
│ │ #CBA6F7 text.accent │ │
|
||||
│ │ (blank) text.response │ │
|
||||
│ │ #3d3f51 border.default │ │
|
||||
│ │ #89B4FA border.focused │ │
|
||||
│ │ #F38BA8 status.error │ │
|
||||
│ │ #A6E3A1 status.success │ │
|
||||
│ │ #F9E2AF status.warning │ │
|
||||
│ │ #4796E4 ui.gradient │ │
|
||||
│ │ #847ACE │ │
|
||||
│ │ #C3677F │ │
|
||||
│ ╰─────────────────────────────────────────────────╯ │
|
||||
│ │
|
||||
│ (Use Enter to select, Tab to configure scope, Esc to close) │
|
||||
|
||||
Reference in New Issue
Block a user