diff --git a/packages/cli/src/ui/components/__snapshots__/ThemeDialog.test.tsx.snap b/packages/cli/src/ui/components/__snapshots__/ThemeDialog.test.tsx.snap index 2b9090e237..258e994bfa 100644 --- a/packages/cli/src/ui/components/__snapshots__/ThemeDialog.test.tsx.snap +++ b/packages/cli/src/ui/components/__snapshots__/ThemeDialog.test.tsx.snap @@ -11,12 +11,12 @@ exports[`Initial Theme Selection > should default to a dark theme when terminal │ ● 4. Default Dark (Matches terminal) │ 3 a, b = 0, 1 │ │ │ 5. Dracula Dark │ 4 for _ in range(n): │ │ │ 6. GitHub Dark │ 5 a, b = b, a + b │ │ -│ 7. Holiday Dark │ 6 return a │ │ -│ 8. Shades Of Purple Dark │ │ │ -│ 9. Solarized Dark │ 1 - print("Hello, " + name) │ │ -│ 10. Tokyo Night Dark │ 1 + print(f"Hello, {name}!") │ │ -│ 11. ANSI Light │ │ │ -│ 12. Ayu Light └─────────────────────────────────────────────────┘ │ +│ 7. GitHub Dark Colorblind Dark │ 6 return a │ │ +│ 8. Holiday Dark │ │ │ +│ 9. Shades Of Purple Dark │ 1 - print("Hello, " + name) │ │ +│ 10. Solarized Dark │ 1 + print(f"Hello, {name}!") │ │ +│ 11. Tokyo Night Dark │ │ │ +│ 12. ANSI Light └─────────────────────────────────────────────────┘ │ │ ▼ │ │ │ │ (Use Enter to select, Tab to configure scope, Esc to close) │ @@ -34,14 +34,14 @@ exports[`Initial Theme Selection > should default to a light theme when terminal │ 2. Ayu Light │ 1 # function │ │ │ ● 3. Default Light │ 2 def fibonacci(n): │ │ │ 4. GitHub Light │ 3 a, b = 0, 1 │ │ -│ 5. Google Code Light │ 4 for _ in range(n): │ │ -│ 6. Solarized Light │ 5 a, b = b, a + b │ │ -│ 7. Xcode Light │ 6 return a │ │ -│ 8. ANSI Dark (Incompatible) │ │ │ -│ 9. Atom One Dark (Incompatible) │ 1 - print("Hello, " + name) │ │ -│ 10. Ayu Dark (Incompatible) │ 1 + print(f"Hello, {name}!") │ │ -│ 11. Default Dark (Incompatible) │ │ │ -│ 12. Dracula Dark (Incompatible) └─────────────────────────────────────────────────┘ │ +│ 5. GitHub Light Colorblind Light (Mat… │ 4 for _ in range(n): │ │ +│ 6. Google Code Light │ 5 a, b = b, a + b │ │ +│ 7. Solarized Light │ 6 return a │ │ +│ 8. Xcode Light │ │ │ +│ 9. ANSI Dark (Incompatible) │ 1 - print("Hello, " + name) │ │ +│ 10. Atom One Dark (Incompatible) │ 1 + print(f"Hello, {name}!") │ │ +│ 11. Ayu Dark (Incompatible) │ │ │ +│ 12. Default Dark (Incompatible) └─────────────────────────────────────────────────┘ │ │ ▼ │ │ │ │ (Use Enter to select, Tab to configure scope, Esc to close) │ @@ -61,12 +61,12 @@ exports[`Initial Theme Selection > should use the theme from settings even if te │ 4. Default Dark (Matches terminal) │ 3 a, b = 0, 1 │ │ │ 5. Dracula Dark │ 4 for _ in range(n): │ │ │ 6. GitHub Dark │ 5 a, b = b, a + b │ │ -│ 7. Holiday Dark │ 6 return a │ │ -│ 8. Shades Of Purple Dark │ │ │ -│ 9. Solarized Dark │ 1 - print("Hello, " + name) │ │ -│ 10. Tokyo Night Dark │ 1 + print(f"Hello, {name}!") │ │ -│ 11. ANSI Light │ │ │ -│ 12. Ayu Light └─────────────────────────────────────────────────┘ │ +│ 7. GitHub Dark Colorblind Dark │ 6 return a │ │ +│ 8. Holiday Dark │ │ │ +│ 9. Shades Of Purple Dark │ 1 - print("Hello, " + name) │ │ +│ 10. Solarized Dark │ 1 + print(f"Hello, {name}!") │ │ +│ 11. Tokyo Night Dark │ │ │ +│ 12. ANSI Light └─────────────────────────────────────────────────┘ │ │ ▼ │ │ │ │ (Use Enter to select, Tab to configure scope, Esc to close) │ @@ -100,12 +100,12 @@ exports[`ThemeDialog Snapshots > should render correctly in theme selection mode │ 4. Default Dark │ 3 a, b = 0, 1 │ │ │ 5. Dracula Dark │ 4 for _ in range(n): │ │ │ 6. GitHub Dark │ 5 a, b = b, a + b │ │ -│ 7. Holiday Dark │ 6 return a │ │ -│ 8. Shades Of Purple Dark │ │ │ -│ 9. Solarized Dark │ 1 - print("Hello, " + name) │ │ -│ 10. Tokyo Night Dark │ 1 + print(f"Hello, {name}!") │ │ -│ 11. ANSI Light │ │ │ -│ 12. Ayu Light └─────────────────────────────────────────────────┘ │ +│ 7. GitHub Dark Colorblind Dark │ 6 return a │ │ +│ 8. Holiday Dark │ │ │ +│ 9. Shades Of Purple Dark │ 1 - print("Hello, " + name) │ │ +│ 10. Solarized Dark │ 1 + print(f"Hello, {name}!") │ │ +│ 11. Tokyo Night Dark │ │ │ +│ 12. ANSI Light └─────────────────────────────────────────────────┘ │ │ ▼ │ │ │ │ (Use Enter to select, Tab to configure scope, Esc to close) │ @@ -125,12 +125,12 @@ exports[`ThemeDialog Snapshots > should render correctly in theme selection mode │ 4. Default Dark │ 3 a, b = 0, 1 │ │ │ 5. Dracula Dark │ 4 for _ in range(n): │ │ │ 6. GitHub Dark │ 5 a, b = b, a + b │ │ -│ 7. Holiday Dark │ 6 return a │ │ -│ 8. Shades Of Purple Dark │ │ │ -│ 9. Solarized Dark │ 1 - print("Hello, " + name) │ │ -│ 10. Tokyo Night Dark │ 1 + print(f"Hello, {name}!") │ │ -│ 11. ANSI Light │ │ │ -│ 12. Ayu Light └─────────────────────────────────────────────────┘ │ +│ 7. GitHub Dark Colorblind Dark │ 6 return a │ │ +│ 8. Holiday Dark │ │ │ +│ 9. Shades Of Purple Dark │ 1 - print("Hello, " + name) │ │ +│ 10. Solarized Dark │ 1 + print(f"Hello, {name}!") │ │ +│ 11. Tokyo Night Dark │ │ │ +│ 12. ANSI Light └─────────────────────────────────────────────────┘ │ │ ▼ │ │ ╭─────────────────────────────────────────────────╮ │ │ │ DEVELOPER TOOLS (Not visible to users) │ │ diff --git a/packages/cli/src/ui/themes/builtin/dark/github-dark-colorblind.ts b/packages/cli/src/ui/themes/builtin/dark/github-dark-colorblind.ts new file mode 100644 index 0000000000..1af6fba87b --- /dev/null +++ b/packages/cli/src/ui/themes/builtin/dark/github-dark-colorblind.ts @@ -0,0 +1,147 @@ +/** + * @license + * Copyright 2025 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import { type ColorsTheme, Theme } from '../../theme.js'; +import { interpolateColor } from '../../color-utils.js'; + +const githubDarkColorblindColors: ColorsTheme = { + type: 'dark', + Background: '#0d1117', + Foreground: '#e6edf3', + LightBlue: '#a5d6ff', + AccentBlue: '#79c0ff', + AccentPurple: '#d2a8ff', + AccentCyan: '#a5d6ff', + AccentGreen: '#a5d6ff', + AccentYellow: '#d29922', + AccentRed: '#f0883e', + DiffAdded: '#0d161f', + DiffRemoved: '#1d150e', + Comment: '#7d8590', + Gray: '#7d8590', + DarkGray: interpolateColor('#7d8590', '#0d1117', 0.5), + GradientColors: ['#58a6ff', '#f0883e'], +}; + +export const GitHubDarkColorblind: Theme = new Theme( + 'GitHub Dark Colorblind', + 'dark', + { + hljs: { + display: 'block', + overflowX: 'auto', + padding: '0.5em', + color: githubDarkColorblindColors.Foreground, + background: githubDarkColorblindColors.Background, + }, + 'hljs-comment': { + color: githubDarkColorblindColors.Comment, + fontStyle: 'italic', + }, + 'hljs-quote': { + color: githubDarkColorblindColors.Comment, + fontStyle: 'italic', + }, + 'hljs-keyword': { + color: githubDarkColorblindColors.AccentRed, + fontWeight: 'bold', + }, + 'hljs-selector-tag': { + color: githubDarkColorblindColors.AccentRed, + fontWeight: 'bold', + }, + 'hljs-subst': { + color: githubDarkColorblindColors.Foreground, + }, + 'hljs-number': { + color: githubDarkColorblindColors.LightBlue, + }, + 'hljs-literal': { + color: githubDarkColorblindColors.LightBlue, + }, + 'hljs-variable': { + color: githubDarkColorblindColors.Foreground, + }, + 'hljs-template-variable': { + color: githubDarkColorblindColors.Foreground, + }, + 'hljs-tag .hljs-attr': { + color: githubDarkColorblindColors.AccentYellow, + }, + 'hljs-string': { + color: githubDarkColorblindColors.AccentCyan, + }, + 'hljs-doctag': { + color: githubDarkColorblindColors.AccentCyan, + }, + 'hljs-title': { + color: githubDarkColorblindColors.AccentPurple, + fontWeight: 'bold', + }, + 'hljs-section': { + color: githubDarkColorblindColors.AccentPurple, + fontWeight: 'bold', + }, + 'hljs-selector-id': { + color: githubDarkColorblindColors.AccentPurple, + fontWeight: 'bold', + }, + 'hljs-type': { + color: githubDarkColorblindColors.AccentGreen, + fontWeight: 'bold', + }, + 'hljs-class .hljs-title': { + color: githubDarkColorblindColors.AccentGreen, + fontWeight: 'bold', + }, + 'hljs-tag': { + color: githubDarkColorblindColors.AccentGreen, + }, + 'hljs-name': { + color: githubDarkColorblindColors.AccentGreen, + }, + 'hljs-attribute': { + color: githubDarkColorblindColors.LightBlue, + }, + 'hljs-regexp': { + color: githubDarkColorblindColors.AccentCyan, + }, + 'hljs-link': { + color: githubDarkColorblindColors.AccentCyan, + }, + 'hljs-symbol': { + color: githubDarkColorblindColors.AccentPurple, + }, + 'hljs-bullet': { + color: githubDarkColorblindColors.AccentPurple, + }, + 'hljs-built_in': { + color: githubDarkColorblindColors.LightBlue, + }, + 'hljs-builtin-name': { + color: githubDarkColorblindColors.LightBlue, + }, + 'hljs-meta': { + color: githubDarkColorblindColors.LightBlue, + fontWeight: 'bold', + }, + 'hljs-deletion': { + background: '#682d0f', + color: githubDarkColorblindColors.AccentRed, + }, + 'hljs-addition': { + background: '#0c2d6b', + color: githubDarkColorblindColors.AccentGreen, + }, + 'hljs-emphasis': { + fontStyle: 'italic', + }, + 'hljs-strong': { + fontWeight: 'bold', + }, + }, + githubDarkColorblindColors, +); diff --git a/packages/cli/src/ui/themes/builtin/light/github-light-colorblind.ts b/packages/cli/src/ui/themes/builtin/light/github-light-colorblind.ts new file mode 100644 index 0000000000..eb36fd32d8 --- /dev/null +++ b/packages/cli/src/ui/themes/builtin/light/github-light-colorblind.ts @@ -0,0 +1,147 @@ +/** + * @license + * Copyright 2025 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import { type ColorsTheme, Theme } from '../../theme.js'; +import { interpolateColor } from '../../color-utils.js'; + +const githubLightColorblindColors: ColorsTheme = { + type: 'light', + Background: '#ffffff', + Foreground: '#1f2328', + LightBlue: '#0a3069', + AccentBlue: '#0550ae', + AccentPurple: '#8250df', + AccentCyan: '#0a3069', + AccentGreen: '#0969da', + AccentYellow: '#9a6700', + AccentRed: '#bc4c00', + DiffAdded: '#ddf4ff', + DiffRemoved: '#fff1e5', + Comment: '#656d76', + Gray: '#656d76', + DarkGray: interpolateColor('#656d76', '#ffffff', 0.5), + GradientColors: ['#0969da', '#bc4c00'], +}; + +export const GitHubLightColorblind: Theme = new Theme( + 'GitHub Light Colorblind', + 'light', + { + hljs: { + display: 'block', + overflowX: 'auto', + padding: '0.5em', + color: githubLightColorblindColors.Foreground, + background: githubLightColorblindColors.Background, + }, + 'hljs-comment': { + color: githubLightColorblindColors.Comment, + fontStyle: 'italic', + }, + 'hljs-quote': { + color: githubLightColorblindColors.Comment, + fontStyle: 'italic', + }, + 'hljs-keyword': { + color: githubLightColorblindColors.AccentRed, + fontWeight: 'bold', + }, + 'hljs-selector-tag': { + color: githubLightColorblindColors.AccentRed, + fontWeight: 'bold', + }, + 'hljs-subst': { + color: githubLightColorblindColors.Foreground, + }, + 'hljs-number': { + color: githubLightColorblindColors.LightBlue, + }, + 'hljs-literal': { + color: githubLightColorblindColors.LightBlue, + }, + 'hljs-variable': { + color: githubLightColorblindColors.Foreground, + }, + 'hljs-template-variable': { + color: githubLightColorblindColors.Foreground, + }, + 'hljs-tag .hljs-attr': { + color: githubLightColorblindColors.AccentYellow, + }, + 'hljs-string': { + color: githubLightColorblindColors.AccentCyan, + }, + 'hljs-doctag': { + color: githubLightColorblindColors.AccentCyan, + }, + 'hljs-title': { + color: githubLightColorblindColors.AccentPurple, + fontWeight: 'bold', + }, + 'hljs-section': { + color: githubLightColorblindColors.AccentPurple, + fontWeight: 'bold', + }, + 'hljs-selector-id': { + color: githubLightColorblindColors.AccentPurple, + fontWeight: 'bold', + }, + 'hljs-type': { + color: githubLightColorblindColors.AccentGreen, + fontWeight: 'bold', + }, + 'hljs-class .hljs-title': { + color: githubLightColorblindColors.AccentGreen, + fontWeight: 'bold', + }, + 'hljs-tag': { + color: githubLightColorblindColors.AccentGreen, + }, + 'hljs-name': { + color: githubLightColorblindColors.AccentGreen, + }, + 'hljs-attribute': { + color: githubLightColorblindColors.LightBlue, + }, + 'hljs-regexp': { + color: githubLightColorblindColors.AccentCyan, + }, + 'hljs-link': { + color: githubLightColorblindColors.AccentCyan, + }, + 'hljs-symbol': { + color: githubLightColorblindColors.AccentPurple, + }, + 'hljs-bullet': { + color: githubLightColorblindColors.AccentPurple, + }, + 'hljs-built_in': { + color: githubLightColorblindColors.LightBlue, + }, + 'hljs-builtin-name': { + color: githubLightColorblindColors.LightBlue, + }, + 'hljs-meta': { + color: githubLightColorblindColors.LightBlue, + fontWeight: 'bold', + }, + 'hljs-deletion': { + background: '#fff1e5', + color: githubLightColorblindColors.AccentRed, + }, + 'hljs-addition': { + background: '#ddf4ff', + color: githubLightColorblindColors.AccentGreen, + }, + 'hljs-emphasis': { + fontStyle: 'italic', + }, + 'hljs-strong': { + fontWeight: 'bold', + }, + }, + githubLightColorblindColors, +); diff --git a/packages/cli/src/ui/themes/theme-manager.ts b/packages/cli/src/ui/themes/theme-manager.ts index 9f0a7e528a..83848142d6 100644 --- a/packages/cli/src/ui/themes/theme-manager.ts +++ b/packages/cli/src/ui/themes/theme-manager.ts @@ -10,6 +10,8 @@ import { AtomOneDark } from './builtin/dark/atom-one-dark.js'; import { Dracula } from './builtin/dark/dracula-dark.js'; import { GitHubDark } from './builtin/dark/github-dark.js'; import { GitHubLight } from './builtin/light/github-light.js'; +import { GitHubDarkColorblind } from './builtin/dark/github-dark-colorblind.js'; +import { GitHubLightColorblind } from './builtin/light/github-light-colorblind.js'; import { GoogleCode } from './builtin/light/googlecode-light.js'; import { Holiday } from './builtin/dark/holiday-dark.js'; import { DefaultLight } from './builtin/light/default-light.js'; @@ -79,6 +81,8 @@ class ThemeManager { DefaultDark, GitHubDark, GitHubLight, + GitHubDarkColorblind, + GitHubLightColorblind, GoogleCode, Holiday, ShadesOfPurple,