mirror of
https://github.com/google-gemini/gemini-cli.git
synced 2026-05-13 13:22:35 -07:00
feat(ui): narrow background boxes and update title in colors visualizer
This commit is contained in:
Keith Guerin
@@ -100,7 +100,7 @@ describe('ColorsDisplay', () => {
|
|||||||
const output = lastFrame();
|
const output = lastFrame();
|
||||||
|
|
||||||
// Check for title and description
|
// Check for title and description
|
||||||
expect(output).toContain('Theme/Terminal interaction:');
|
expect(output).toContain('How do colors get applied?');
|
||||||
expect(output).toContain('Hex:');
|
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');
|
||||||
|
|||||||
@@ -30,8 +30,8 @@ interface BackgroundColorRow {
|
|||||||
|
|
||||||
type ColorRow = StandardColorRow | GradientColorRow | BackgroundColorRow;
|
type ColorRow = StandardColorRow | GradientColorRow | BackgroundColorRow;
|
||||||
|
|
||||||
const VALUE_COLUMN_WIDTH = '25%';
|
const VALUE_COLUMN_WIDTH = 10;
|
||||||
const NAME_COLUMN_WIDTH = '75%';
|
const NAME_COLUMN_WIDTH = '30%';
|
||||||
|
|
||||||
interface ColorsDisplayProps {
|
interface ColorsDisplayProps {
|
||||||
activeTheme: Theme;
|
activeTheme: Theme;
|
||||||
@@ -124,7 +124,7 @@ export const ColorsDisplay: React.FC<ColorsDisplayProps> = ({
|
|||||||
</Text>
|
</Text>
|
||||||
<Box marginTop={1} flexDirection="column">
|
<Box marginTop={1} flexDirection="column">
|
||||||
<Text color={theme.text.primary}>
|
<Text color={theme.text.primary}>
|
||||||
<Text bold>Theme/Terminal interaction:</Text>
|
<Text bold>How do colors get applied?</Text>
|
||||||
</Text>
|
</Text>
|
||||||
<Box marginLeft={2} flexDirection="column">
|
<Box marginLeft={2} flexDirection="column">
|
||||||
<Text color={theme.text.primary}>
|
<Text color={theme.text.primary}>
|
||||||
|
|||||||
@@ -18,39 +18,49 @@ exports[`Initial Theme Selection > should default to a dark theme when terminal
|
|||||||
│ 11. Ayu Light │ │ │
|
│ 11. Ayu Light │ │ │
|
||||||
│ 12. Default Light └─────────────────────────────────────────────────┘ │
|
│ 12. Default Light └─────────────────────────────────────────────────┘ │
|
||||||
│ ▼ │
|
│ ▼ │
|
||||||
│ ╭─────────────────────────────────────────────────╮ │
|
│ ╭────────────────────────────────────────────────╮ │
|
||||||
│ │ DEVELOPER TOOLS (Not visible to users) │ │
|
│ │ DEVELOPER TOOLS (Not visible to users) │ │
|
||||||
│ │ │ │
|
│ │ │ │
|
||||||
│ │ Theme/Terminal interaction: │ │
|
│ │ How do colors get applied? │ │
|
||||||
│ │ • Hex: Rendered exactly by modern terminals. │ │
|
│ │ • Hex: Rendered exactly by modern terminals. │ │
|
||||||
│ │ Not overridden by app themes. │ │
|
│ │ Not overridden by app themes. │ │
|
||||||
│ │ • Blank: Uses your terminal's default │ │
|
│ │ • Blank: Uses your terminal's default │ │
|
||||||
│ │ foreground/background. │ │
|
│ │ foreground/background. │ │
|
||||||
│ │ • Compatibility: On older terminals, hex is │ │
|
│ │ • Compatibility: On older terminals, hex is │ │
|
||||||
│ │ approximated to the nearest ANSI color. │ │
|
│ │ approximated to the nearest ANSI color. │ │
|
||||||
│ │ • ANSI Names: 'red', 'green', etc. are mapped │ │
|
│ │ • ANSI Names: 'red', 'green', etc. are │ │
|
||||||
│ │ to your terminal app's palette. │ │
|
│ │ mapped to your terminal app's palette. │ │
|
||||||
│ │ │ │
|
│ │ │ │
|
||||||
│ │ Value Name │ │
|
│ │ Value Name │ │
|
||||||
│ │ #1E1E2E background.primary │ │
|
│ │ #1E1E2E background.p │ │
|
||||||
│ │ #2a2b3c background.message │ │
|
│ │ rimary │ │
|
||||||
│ │ #313243 background.input │ │
|
│ │ #2a2b3c background.m │ │
|
||||||
│ │ #28350B background.diff.added │ │
|
│ │ essage │ │
|
||||||
│ │ #430000 background.diff.removed │ │
|
│ │ #313243 background.i │ │
|
||||||
│ │ (blank) text.primary │ │
|
│ │ nput │ │
|
||||||
│ │ #6C7086 text.secondary │ │
|
│ │ #28350B background.d │ │
|
||||||
│ │ #89B4FA text.link │ │
|
│ │ iff.added │ │
|
||||||
│ │ #CBA6F7 text.accent │ │
|
│ │ #430000 background.d │ │
|
||||||
│ │ (blank) text.response │ │
|
│ │ iff.removed │ │
|
||||||
│ │ #3d3f51 border.default │ │
|
│ │ (blank) text.primary │ │
|
||||||
│ │ #89B4FA border.focused │ │
|
│ │ #6C7086 text.secondar │ │
|
||||||
│ │ #F38BA8 status.error │ │
|
│ │ y │ │
|
||||||
│ │ #A6E3A1 status.success │ │
|
│ │ #89B4FA text.link │ │
|
||||||
│ │ #F9E2AF status.warning │ │
|
│ │ #CBA6F7 text.accent │ │
|
||||||
│ │ #4796E4 ui.gradient │ │
|
│ │ (blank) text.response │ │
|
||||||
│ │ #847ACE │ │
|
│ │ #3d3f51 border.defaul │ │
|
||||||
│ │ #C3677F │ │
|
│ │ t │ │
|
||||||
│ ╰─────────────────────────────────────────────────╯ │
|
│ │ #89B4FA border.focuse │ │
|
||||||
|
│ │ d │ │
|
||||||
|
│ │ #F38BA8 status.error │ │
|
||||||
|
│ │ #A6E3A1 status.succes │ │
|
||||||
|
│ │ s │ │
|
||||||
|
│ │ #F9E2AF status.warnin │ │
|
||||||
|
│ │ g │ │
|
||||||
|
│ │ #4796E4 ui.gradient │ │
|
||||||
|
│ │ #847ACE │ │
|
||||||
|
│ │ #C3677F │ │
|
||||||
|
│ ╰────────────────────────────────────────────────╯ │
|
||||||
│ │
|
│ │
|
||||||
│ (Use Enter to select, Tab to configure scope, Esc to close) │
|
│ (Use Enter to select, Tab to configure scope, Esc to close) │
|
||||||
│ │
|
│ │
|
||||||
@@ -76,39 +86,49 @@ exports[`Initial Theme Selection > should default to a light theme when terminal
|
|||||||
│ 11. Default Dark (Incompatible) │ │ │
|
│ 11. Default Dark (Incompatible) │ │ │
|
||||||
│ 12. Dracula Dark (Incompatible) └─────────────────────────────────────────────────┘ │
|
│ 12. Dracula Dark (Incompatible) └─────────────────────────────────────────────────┘ │
|
||||||
│ ▼ │
|
│ ▼ │
|
||||||
│ ╭─────────────────────────────────────────────────╮ │
|
│ ╭────────────────────────────────────────────────╮ │
|
||||||
│ │ DEVELOPER TOOLS (Not visible to users) │ │
|
│ │ DEVELOPER TOOLS (Not visible to users) │ │
|
||||||
│ │ │ │
|
│ │ │ │
|
||||||
│ │ Theme/Terminal interaction: │ │
|
│ │ How do colors get applied? │ │
|
||||||
│ │ • Hex: Rendered exactly by modern terminals. │ │
|
│ │ • Hex: Rendered exactly by modern terminals. │ │
|
||||||
│ │ Not overridden by app themes. │ │
|
│ │ Not overridden by app themes. │ │
|
||||||
│ │ • Blank: Uses your terminal's default │ │
|
│ │ • Blank: Uses your terminal's default │ │
|
||||||
│ │ foreground/background. │ │
|
│ │ foreground/background. │ │
|
||||||
│ │ • Compatibility: On older terminals, hex is │ │
|
│ │ • Compatibility: On older terminals, hex is │ │
|
||||||
│ │ approximated to the nearest ANSI color. │ │
|
│ │ approximated to the nearest ANSI color. │ │
|
||||||
│ │ • ANSI Names: 'red', 'green', etc. are mapped │ │
|
│ │ • ANSI Names: 'red', 'green', etc. are │ │
|
||||||
│ │ to your terminal app's palette. │ │
|
│ │ mapped to your terminal app's palette. │ │
|
||||||
│ │ │ │
|
│ │ │ │
|
||||||
│ │ Value Name │ │
|
│ │ Value Name │ │
|
||||||
│ │ #FAFAFA background.primary │ │
|
│ │ #FAFAFA background.p │ │
|
||||||
│ │ #eaecee background.message │ │
|
│ │ rimary │ │
|
||||||
│ │ #e2e4e8 background.input │ │
|
│ │ #eaecee background.m │ │
|
||||||
│ │ #C6EAD8 background.diff.added │ │
|
│ │ essage │ │
|
||||||
│ │ #FFCCCC background.diff.removed │ │
|
│ │ #e2e4e8 background.i │ │
|
||||||
│ │ (blank) text.primary │ │
|
│ │ nput │ │
|
||||||
│ │ #97a0b0 text.secondary │ │
|
│ │ #C6EAD8 background.d │ │
|
||||||
│ │ #3B82F6 text.link │ │
|
│ │ iff.added │ │
|
||||||
│ │ #8B5CF6 text.accent │ │
|
│ │ #FFCCCC background.d │ │
|
||||||
│ │ (blank) text.response │ │
|
│ │ iff.removed │ │
|
||||||
│ │ #d2d6dc border.default │ │
|
│ │ (blank) text.primary │ │
|
||||||
│ │ #3B82F6 border.focused │ │
|
│ │ #97a0b0 text.secondar │ │
|
||||||
│ │ #DD4C4C status.error │ │
|
│ │ y │ │
|
||||||
│ │ #3CA84B status.success │ │
|
│ │ #3B82F6 text.link │ │
|
||||||
│ │ #D5A40A status.warning │ │
|
│ │ #8B5CF6 text.accent │ │
|
||||||
│ │ #4796E4 ui.gradient │ │
|
│ │ (blank) text.response │ │
|
||||||
│ │ #847ACE │ │
|
│ │ #d2d6dc border.defaul │ │
|
||||||
│ │ #C3677F │ │
|
│ │ t │ │
|
||||||
│ ╰─────────────────────────────────────────────────╯ │
|
│ │ #3B82F6 border.focuse │ │
|
||||||
|
│ │ d │ │
|
||||||
|
│ │ #DD4C4C status.error │ │
|
||||||
|
│ │ #3CA84B status.succes │ │
|
||||||
|
│ │ s │ │
|
||||||
|
│ │ #D5A40A status.warnin │ │
|
||||||
|
│ │ g │ │
|
||||||
|
│ │ #4796E4 ui.gradient │ │
|
||||||
|
│ │ #847ACE │ │
|
||||||
|
│ │ #C3677F │ │
|
||||||
|
│ ╰────────────────────────────────────────────────╯ │
|
||||||
│ │
|
│ │
|
||||||
│ (Use Enter to select, Tab to configure scope, Esc to close) │
|
│ (Use Enter to select, Tab to configure scope, Esc to close) │
|
||||||
│ │
|
│ │
|
||||||
@@ -134,39 +154,49 @@ exports[`Initial Theme Selection > should use the theme from settings even if te
|
|||||||
│ 11. Ayu Light │ │ │
|
│ 11. Ayu Light │ │ │
|
||||||
│ 12. Default Light └─────────────────────────────────────────────────┘ │
|
│ 12. Default Light └─────────────────────────────────────────────────┘ │
|
||||||
│ ▼ │
|
│ ▼ │
|
||||||
│ ╭─────────────────────────────────────────────────╮ │
|
│ ╭────────────────────────────────────────────────╮ │
|
||||||
│ │ DEVELOPER TOOLS (Not visible to users) │ │
|
│ │ DEVELOPER TOOLS (Not visible to users) │ │
|
||||||
│ │ │ │
|
│ │ │ │
|
||||||
│ │ Theme/Terminal interaction: │ │
|
│ │ How do colors get applied? │ │
|
||||||
│ │ • Hex: Rendered exactly by modern terminals. │ │
|
│ │ • Hex: Rendered exactly by modern terminals. │ │
|
||||||
│ │ Not overridden by app themes. │ │
|
│ │ Not overridden by app themes. │ │
|
||||||
│ │ • Blank: Uses your terminal's default │ │
|
│ │ • Blank: Uses your terminal's default │ │
|
||||||
│ │ foreground/background. │ │
|
│ │ foreground/background. │ │
|
||||||
│ │ • Compatibility: On older terminals, hex is │ │
|
│ │ • Compatibility: On older terminals, hex is │ │
|
||||||
│ │ approximated to the nearest ANSI color. │ │
|
│ │ approximated to the nearest ANSI color. │ │
|
||||||
│ │ • ANSI Names: 'red', 'green', etc. are mapped │ │
|
│ │ • ANSI Names: 'red', 'green', etc. are │ │
|
||||||
│ │ to your terminal app's palette. │ │
|
│ │ mapped to your terminal app's palette. │ │
|
||||||
│ │ │ │
|
│ │ │ │
|
||||||
│ │ Value Name │ │
|
│ │ Value Name │ │
|
||||||
│ │ #1E1E2E background.primary │ │
|
│ │ #1E1E2E background.p │ │
|
||||||
│ │ #2a2b3c background.message │ │
|
│ │ rimary │ │
|
||||||
│ │ #313243 background.input │ │
|
│ │ #2a2b3c background.m │ │
|
||||||
│ │ #28350B background.diff.added │ │
|
│ │ essage │ │
|
||||||
│ │ #430000 background.diff.removed │ │
|
│ │ #313243 background.i │ │
|
||||||
│ │ (blank) text.primary │ │
|
│ │ nput │ │
|
||||||
│ │ #6C7086 text.secondary │ │
|
│ │ #28350B background.d │ │
|
||||||
│ │ #89B4FA text.link │ │
|
│ │ iff.added │ │
|
||||||
│ │ #CBA6F7 text.accent │ │
|
│ │ #430000 background.d │ │
|
||||||
│ │ (blank) text.response │ │
|
│ │ iff.removed │ │
|
||||||
│ │ #3d3f51 border.default │ │
|
│ │ (blank) text.primary │ │
|
||||||
│ │ #89B4FA border.focused │ │
|
│ │ #6C7086 text.secondar │ │
|
||||||
│ │ #F38BA8 status.error │ │
|
│ │ y │ │
|
||||||
│ │ #A6E3A1 status.success │ │
|
│ │ #89B4FA text.link │ │
|
||||||
│ │ #F9E2AF status.warning │ │
|
│ │ #CBA6F7 text.accent │ │
|
||||||
│ │ #4796E4 ui.gradient │ │
|
│ │ (blank) text.response │ │
|
||||||
│ │ #847ACE │ │
|
│ │ #3d3f51 border.defaul │ │
|
||||||
│ │ #C3677F │ │
|
│ │ t │ │
|
||||||
│ ╰─────────────────────────────────────────────────╯ │
|
│ │ #89B4FA border.focuse │ │
|
||||||
|
│ │ d │ │
|
||||||
|
│ │ #F38BA8 status.error │ │
|
||||||
|
│ │ #A6E3A1 status.succes │ │
|
||||||
|
│ │ s │ │
|
||||||
|
│ │ #F9E2AF status.warnin │ │
|
||||||
|
│ │ g │ │
|
||||||
|
│ │ #4796E4 ui.gradient │ │
|
||||||
|
│ │ #847ACE │ │
|
||||||
|
│ │ #C3677F │ │
|
||||||
|
│ ╰────────────────────────────────────────────────╯ │
|
||||||
│ │
|
│ │
|
||||||
│ (Use Enter to select, Tab to configure scope, Esc to close) │
|
│ (Use Enter to select, Tab to configure scope, Esc to close) │
|
||||||
│ │
|
│ │
|
||||||
@@ -206,39 +236,49 @@ exports[`ThemeDialog Snapshots > should render correctly in theme selection mode
|
|||||||
│ 11. Ayu Light │ │ │
|
│ 11. Ayu Light │ │ │
|
||||||
│ 12. Default Light └─────────────────────────────────────────────────┘ │
|
│ 12. Default Light └─────────────────────────────────────────────────┘ │
|
||||||
│ ▼ │
|
│ ▼ │
|
||||||
│ ╭─────────────────────────────────────────────────╮ │
|
│ ╭────────────────────────────────────────────────╮ │
|
||||||
│ │ DEVELOPER TOOLS (Not visible to users) │ │
|
│ │ DEVELOPER TOOLS (Not visible to users) │ │
|
||||||
│ │ │ │
|
│ │ │ │
|
||||||
│ │ Theme/Terminal interaction: │ │
|
│ │ How do colors get applied? │ │
|
||||||
│ │ • Hex: Rendered exactly by modern terminals. │ │
|
│ │ • Hex: Rendered exactly by modern terminals. │ │
|
||||||
│ │ Not overridden by app themes. │ │
|
│ │ Not overridden by app themes. │ │
|
||||||
│ │ • Blank: Uses your terminal's default │ │
|
│ │ • Blank: Uses your terminal's default │ │
|
||||||
│ │ foreground/background. │ │
|
│ │ foreground/background. │ │
|
||||||
│ │ • Compatibility: On older terminals, hex is │ │
|
│ │ • Compatibility: On older terminals, hex is │ │
|
||||||
│ │ approximated to the nearest ANSI color. │ │
|
│ │ approximated to the nearest ANSI color. │ │
|
||||||
│ │ • ANSI Names: 'red', 'green', etc. are mapped │ │
|
│ │ • ANSI Names: 'red', 'green', etc. are │ │
|
||||||
│ │ to your terminal app's palette. │ │
|
│ │ mapped to your terminal app's palette. │ │
|
||||||
│ │ │ │
|
│ │ │ │
|
||||||
│ │ Value Name │ │
|
│ │ Value Name │ │
|
||||||
│ │ #1E1E2E background.primary │ │
|
│ │ #1E1E2E background.p │ │
|
||||||
│ │ #2a2b3c background.message │ │
|
│ │ rimary │ │
|
||||||
│ │ #313243 background.input │ │
|
│ │ #2a2b3c background.m │ │
|
||||||
│ │ #28350B background.diff.added │ │
|
│ │ essage │ │
|
||||||
│ │ #430000 background.diff.removed │ │
|
│ │ #313243 background.i │ │
|
||||||
│ │ (blank) text.primary │ │
|
│ │ nput │ │
|
||||||
│ │ #6C7086 text.secondary │ │
|
│ │ #28350B background.d │ │
|
||||||
│ │ #89B4FA text.link │ │
|
│ │ iff.added │ │
|
||||||
│ │ #CBA6F7 text.accent │ │
|
│ │ #430000 background.d │ │
|
||||||
│ │ (blank) text.response │ │
|
│ │ iff.removed │ │
|
||||||
│ │ #3d3f51 border.default │ │
|
│ │ (blank) text.primary │ │
|
||||||
│ │ #89B4FA border.focused │ │
|
│ │ #6C7086 text.secondar │ │
|
||||||
│ │ #F38BA8 status.error │ │
|
│ │ y │ │
|
||||||
│ │ #A6E3A1 status.success │ │
|
│ │ #89B4FA text.link │ │
|
||||||
│ │ #F9E2AF status.warning │ │
|
│ │ #CBA6F7 text.accent │ │
|
||||||
│ │ #4796E4 ui.gradient │ │
|
│ │ (blank) text.response │ │
|
||||||
│ │ #847ACE │ │
|
│ │ #3d3f51 border.defaul │ │
|
||||||
│ │ #C3677F │ │
|
│ │ t │ │
|
||||||
│ ╰─────────────────────────────────────────────────╯ │
|
│ │ #89B4FA border.focuse │ │
|
||||||
|
│ │ d │ │
|
||||||
|
│ │ #F38BA8 status.error │ │
|
||||||
|
│ │ #A6E3A1 status.succes │ │
|
||||||
|
│ │ s │ │
|
||||||
|
│ │ #F9E2AF status.warnin │ │
|
||||||
|
│ │ g │ │
|
||||||
|
│ │ #4796E4 ui.gradient │ │
|
||||||
|
│ │ #847ACE │ │
|
||||||
|
│ │ #C3677F │ │
|
||||||
|
│ ╰────────────────────────────────────────────────╯ │
|
||||||
│ │
|
│ │
|
||||||
│ (Use Enter to select, Tab to configure scope, Esc to close) │
|
│ (Use Enter to select, Tab to configure scope, Esc to close) │
|
||||||
│ │
|
│ │
|
||||||
|
|||||||
Reference in New Issue
Block a user