mirror of
https://github.com/QwenLM/qwen-code.git
synced 2025-12-21 01:07:46 +00:00
pre-release commit
This commit is contained in:
koalazf.99
146
packages/cli/src/ui/themes/ansi-light.ts
Normal file
146
packages/cli/src/ui/themes/ansi-light.ts
Normal file
@@ -0,0 +1,146 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { type ColorsTheme, Theme } from './theme.js';
|
||||
|
||||
const ansiLightColors: ColorsTheme = {
|
||||
type: 'light',
|
||||
Background: 'white',
|
||||
Foreground: 'black',
|
||||
LightBlue: 'blue',
|
||||
AccentBlue: 'blue',
|
||||
AccentPurple: 'purple',
|
||||
AccentCyan: 'cyan',
|
||||
AccentGreen: 'green',
|
||||
AccentYellow: 'orange',
|
||||
AccentRed: 'red',
|
||||
Comment: 'gray',
|
||||
Gray: 'gray',
|
||||
GradientColors: ['blue', 'green'],
|
||||
};
|
||||
|
||||
export const ANSILight: Theme = new Theme(
|
||||
'ANSI Light',
|
||||
'light',
|
||||
{
|
||||
hljs: {
|
||||
display: 'block',
|
||||
overflowX: 'auto',
|
||||
padding: '0.5em',
|
||||
background: 'white',
|
||||
color: 'black',
|
||||
},
|
||||
'hljs-keyword': {
|
||||
color: 'blue',
|
||||
},
|
||||
'hljs-literal': {
|
||||
color: 'blue',
|
||||
},
|
||||
'hljs-symbol': {
|
||||
color: 'blue',
|
||||
},
|
||||
'hljs-name': {
|
||||
color: 'blue',
|
||||
},
|
||||
'hljs-link': {
|
||||
color: 'blue',
|
||||
},
|
||||
'hljs-built_in': {
|
||||
color: 'cyan',
|
||||
},
|
||||
'hljs-type': {
|
||||
color: 'cyan',
|
||||
},
|
||||
'hljs-number': {
|
||||
color: 'green',
|
||||
},
|
||||
'hljs-class': {
|
||||
color: 'green',
|
||||
},
|
||||
'hljs-string': {
|
||||
color: 'red',
|
||||
},
|
||||
'hljs-meta-string': {
|
||||
color: 'red',
|
||||
},
|
||||
'hljs-regexp': {
|
||||
color: 'magenta',
|
||||
},
|
||||
'hljs-template-tag': {
|
||||
color: 'magenta',
|
||||
},
|
||||
'hljs-subst': {
|
||||
color: 'black',
|
||||
},
|
||||
'hljs-function': {
|
||||
color: 'black',
|
||||
},
|
||||
'hljs-title': {
|
||||
color: 'black',
|
||||
},
|
||||
'hljs-params': {
|
||||
color: 'black',
|
||||
},
|
||||
'hljs-formula': {
|
||||
color: 'black',
|
||||
},
|
||||
'hljs-comment': {
|
||||
color: 'gray',
|
||||
},
|
||||
'hljs-quote': {
|
||||
color: 'gray',
|
||||
},
|
||||
'hljs-doctag': {
|
||||
color: 'gray',
|
||||
},
|
||||
'hljs-meta': {
|
||||
color: 'gray',
|
||||
},
|
||||
'hljs-meta-keyword': {
|
||||
color: 'gray',
|
||||
},
|
||||
'hljs-tag': {
|
||||
color: 'gray',
|
||||
},
|
||||
'hljs-variable': {
|
||||
color: 'purple',
|
||||
},
|
||||
'hljs-template-variable': {
|
||||
color: 'purple',
|
||||
},
|
||||
'hljs-attr': {
|
||||
color: 'blue',
|
||||
},
|
||||
'hljs-attribute': {
|
||||
color: 'blue',
|
||||
},
|
||||
'hljs-builtin-name': {
|
||||
color: 'blue',
|
||||
},
|
||||
'hljs-section': {
|
||||
color: 'orange',
|
||||
},
|
||||
'hljs-bullet': {
|
||||
color: 'orange',
|
||||
},
|
||||
'hljs-selector-tag': {
|
||||
color: 'orange',
|
||||
},
|
||||
'hljs-selector-id': {
|
||||
color: 'orange',
|
||||
},
|
||||
'hljs-selector-class': {
|
||||
color: 'orange',
|
||||
},
|
||||
'hljs-selector-attr': {
|
||||
color: 'orange',
|
||||
},
|
||||
'hljs-selector-pseudo': {
|
||||
color: 'orange',
|
||||
},
|
||||
},
|
||||
ansiLightColors,
|
||||
);
|
||||
155
packages/cli/src/ui/themes/ansi.ts
Normal file
155
packages/cli/src/ui/themes/ansi.ts
Normal file
@@ -0,0 +1,155 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { type ColorsTheme, Theme } from './theme.js';
|
||||
|
||||
const ansiColors: ColorsTheme = {
|
||||
type: 'dark',
|
||||
Background: 'black',
|
||||
Foreground: 'white',
|
||||
LightBlue: 'bluebright',
|
||||
AccentBlue: 'blue',
|
||||
AccentPurple: 'magenta',
|
||||
AccentCyan: 'cyan',
|
||||
AccentGreen: 'green',
|
||||
AccentYellow: 'yellow',
|
||||
AccentRed: 'red',
|
||||
Comment: 'gray',
|
||||
Gray: 'gray',
|
||||
GradientColors: ['cyan', 'green'],
|
||||
};
|
||||
|
||||
export const ANSI: Theme = new Theme(
|
||||
'ANSI',
|
||||
'dark', // Consistent with its color palette base
|
||||
{
|
||||
hljs: {
|
||||
display: 'block',
|
||||
overflowX: 'auto',
|
||||
padding: '0.5em',
|
||||
background: 'black', // Mapped from #1E1E1E
|
||||
color: 'white', // Mapped from #DCDCDC
|
||||
},
|
||||
'hljs-keyword': {
|
||||
color: 'blue', // Mapped from #569CD6
|
||||
},
|
||||
'hljs-literal': {
|
||||
color: 'blue', // Mapped from #569CD6
|
||||
},
|
||||
'hljs-symbol': {
|
||||
color: 'blue', // Mapped from #569CD6
|
||||
},
|
||||
'hljs-name': {
|
||||
color: 'blue', // Mapped from #569CD6
|
||||
},
|
||||
'hljs-link': {
|
||||
color: 'blue', // Mapped from #569CD6
|
||||
// textDecoration is ignored by Theme class
|
||||
},
|
||||
'hljs-built_in': {
|
||||
color: 'cyan', // Mapped from #4EC9B0
|
||||
},
|
||||
'hljs-type': {
|
||||
color: 'cyan', // Mapped from #4EC9B0
|
||||
},
|
||||
'hljs-number': {
|
||||
color: 'green', // Mapped from #B8D7A3
|
||||
},
|
||||
'hljs-class': {
|
||||
color: 'green', // Mapped from #B8D7A3
|
||||
},
|
||||
'hljs-string': {
|
||||
color: 'yellow', // Mapped from #D69D85
|
||||
},
|
||||
'hljs-meta-string': {
|
||||
color: 'yellow', // Mapped from #D69D85
|
||||
},
|
||||
'hljs-regexp': {
|
||||
color: 'red', // Mapped from #9A5334
|
||||
},
|
||||
'hljs-template-tag': {
|
||||
color: 'red', // Mapped from #9A5334
|
||||
},
|
||||
'hljs-subst': {
|
||||
color: 'white', // Mapped from #DCDCDC
|
||||
},
|
||||
'hljs-function': {
|
||||
color: 'white', // Mapped from #DCDCDC
|
||||
},
|
||||
'hljs-title': {
|
||||
color: 'white', // Mapped from #DCDCDC
|
||||
},
|
||||
'hljs-params': {
|
||||
color: 'white', // Mapped from #DCDCDC
|
||||
},
|
||||
'hljs-formula': {
|
||||
color: 'white', // Mapped from #DCDCDC
|
||||
},
|
||||
'hljs-comment': {
|
||||
color: 'green', // Mapped from #57A64A
|
||||
// fontStyle is ignored by Theme class
|
||||
},
|
||||
'hljs-quote': {
|
||||
color: 'green', // Mapped from #57A64A
|
||||
// fontStyle is ignored by Theme class
|
||||
},
|
||||
'hljs-doctag': {
|
||||
color: 'green', // Mapped from #608B4E
|
||||
},
|
||||
'hljs-meta': {
|
||||
color: 'gray', // Mapped from #9B9B9B
|
||||
},
|
||||
'hljs-meta-keyword': {
|
||||
color: 'gray', // Mapped from #9B9B9B
|
||||
},
|
||||
'hljs-tag': {
|
||||
color: 'gray', // Mapped from #9B9B9B
|
||||
},
|
||||
'hljs-variable': {
|
||||
color: 'magenta', // Mapped from #BD63C5
|
||||
},
|
||||
'hljs-template-variable': {
|
||||
color: 'magenta', // Mapped from #BD63C5
|
||||
},
|
||||
'hljs-attr': {
|
||||
color: 'bluebright', // Mapped from #9CDCFE
|
||||
},
|
||||
'hljs-attribute': {
|
||||
color: 'bluebright', // Mapped from #9CDCFE
|
||||
},
|
||||
'hljs-builtin-name': {
|
||||
color: 'bluebright', // Mapped from #9CDCFE
|
||||
},
|
||||
'hljs-section': {
|
||||
color: 'yellow', // Mapped from gold
|
||||
},
|
||||
'hljs-emphasis': {
|
||||
// fontStyle is ignored by Theme class
|
||||
},
|
||||
'hljs-strong': {
|
||||
// fontWeight is ignored by Theme class
|
||||
},
|
||||
'hljs-bullet': {
|
||||
color: 'yellow', // Mapped from #D7BA7D
|
||||
},
|
||||
'hljs-selector-tag': {
|
||||
color: 'yellow', // Mapped from #D7BA7D
|
||||
},
|
||||
'hljs-selector-id': {
|
||||
color: 'yellow', // Mapped from #D7BA7D
|
||||
},
|
||||
'hljs-selector-class': {
|
||||
color: 'yellow', // Mapped from #D7BA7D
|
||||
},
|
||||
'hljs-selector-attr': {
|
||||
color: 'yellow', // Mapped from #D7BA7D
|
||||
},
|
||||
'hljs-selector-pseudo': {
|
||||
color: 'yellow', // Mapped from #D7BA7D
|
||||
},
|
||||
},
|
||||
ansiColors,
|
||||
);
|
||||
143
packages/cli/src/ui/themes/atom-one-dark.ts
Normal file
143
packages/cli/src/ui/themes/atom-one-dark.ts
Normal file
@@ -0,0 +1,143 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { type ColorsTheme, Theme } from './theme.js';
|
||||
|
||||
const atomOneDarkColors: ColorsTheme = {
|
||||
type: 'dark',
|
||||
Background: '#282c34',
|
||||
Foreground: '#abb2bf',
|
||||
LightBlue: '#61aeee',
|
||||
AccentBlue: '#61aeee',
|
||||
AccentPurple: '#c678dd',
|
||||
AccentCyan: '#56b6c2',
|
||||
AccentGreen: '#98c379',
|
||||
AccentYellow: '#e6c07b',
|
||||
AccentRed: '#e06c75',
|
||||
Comment: '#5c6370',
|
||||
Gray: '#5c6370',
|
||||
GradientColors: ['#61aeee', '#98c379'],
|
||||
};
|
||||
|
||||
export const AtomOneDark: Theme = new Theme(
|
||||
'Atom One',
|
||||
'dark',
|
||||
{
|
||||
hljs: {
|
||||
display: 'block',
|
||||
overflowX: 'auto',
|
||||
padding: '0.5em',
|
||||
color: atomOneDarkColors.Foreground,
|
||||
background: atomOneDarkColors.Background,
|
||||
},
|
||||
'hljs-comment': {
|
||||
color: atomOneDarkColors.Comment,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-quote': {
|
||||
color: atomOneDarkColors.Comment,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-doctag': {
|
||||
color: atomOneDarkColors.AccentPurple,
|
||||
},
|
||||
'hljs-keyword': {
|
||||
color: atomOneDarkColors.AccentPurple,
|
||||
},
|
||||
'hljs-formula': {
|
||||
color: atomOneDarkColors.AccentPurple,
|
||||
},
|
||||
'hljs-section': {
|
||||
color: atomOneDarkColors.AccentRed,
|
||||
},
|
||||
'hljs-name': {
|
||||
color: atomOneDarkColors.AccentRed,
|
||||
},
|
||||
'hljs-selector-tag': {
|
||||
color: atomOneDarkColors.AccentRed,
|
||||
},
|
||||
'hljs-deletion': {
|
||||
color: atomOneDarkColors.AccentRed,
|
||||
},
|
||||
'hljs-subst': {
|
||||
color: atomOneDarkColors.AccentRed,
|
||||
},
|
||||
'hljs-literal': {
|
||||
color: atomOneDarkColors.AccentCyan,
|
||||
},
|
||||
'hljs-string': {
|
||||
color: atomOneDarkColors.AccentGreen,
|
||||
},
|
||||
'hljs-regexp': {
|
||||
color: atomOneDarkColors.AccentGreen,
|
||||
},
|
||||
'hljs-addition': {
|
||||
color: atomOneDarkColors.AccentGreen,
|
||||
},
|
||||
'hljs-attribute': {
|
||||
color: atomOneDarkColors.AccentGreen,
|
||||
},
|
||||
'hljs-meta-string': {
|
||||
color: atomOneDarkColors.AccentGreen,
|
||||
},
|
||||
'hljs-built_in': {
|
||||
color: atomOneDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-class .hljs-title': {
|
||||
color: atomOneDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-attr': {
|
||||
color: atomOneDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-variable': {
|
||||
color: atomOneDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-template-variable': {
|
||||
color: atomOneDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-type': {
|
||||
color: atomOneDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-selector-class': {
|
||||
color: atomOneDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-selector-attr': {
|
||||
color: atomOneDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-selector-pseudo': {
|
||||
color: atomOneDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-number': {
|
||||
color: atomOneDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-symbol': {
|
||||
color: atomOneDarkColors.AccentBlue,
|
||||
},
|
||||
'hljs-bullet': {
|
||||
color: atomOneDarkColors.AccentBlue,
|
||||
},
|
||||
'hljs-link': {
|
||||
color: atomOneDarkColors.AccentBlue,
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
'hljs-meta': {
|
||||
color: atomOneDarkColors.AccentBlue,
|
||||
},
|
||||
'hljs-selector-id': {
|
||||
color: atomOneDarkColors.AccentBlue,
|
||||
},
|
||||
'hljs-title': {
|
||||
color: atomOneDarkColors.AccentBlue,
|
||||
},
|
||||
'hljs-emphasis': {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-strong': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
atomOneDarkColors,
|
||||
);
|
||||
135
packages/cli/src/ui/themes/ayu-light.ts
Normal file
135
packages/cli/src/ui/themes/ayu-light.ts
Normal file
@@ -0,0 +1,135 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { type ColorsTheme, Theme } from './theme.js';
|
||||
|
||||
const ayuLightColors: ColorsTheme = {
|
||||
type: 'light',
|
||||
Background: '#f8f9fa',
|
||||
Foreground: '#5c6166',
|
||||
LightBlue: '#55b4d4',
|
||||
AccentBlue: '#399ee6',
|
||||
AccentPurple: '#a37acc',
|
||||
AccentCyan: '#4cbf99',
|
||||
AccentGreen: '#86b300',
|
||||
AccentYellow: '#f2ae49',
|
||||
AccentRed: '#f07171',
|
||||
Comment: '#ABADB1',
|
||||
Gray: '#CCCFD3',
|
||||
GradientColors: ['#399ee6', '#86b300'],
|
||||
};
|
||||
|
||||
export const AyuLight: Theme = new Theme(
|
||||
'Ayu Light',
|
||||
'light',
|
||||
{
|
||||
hljs: {
|
||||
display: 'block',
|
||||
overflowX: 'auto',
|
||||
padding: '0.5em',
|
||||
background: ayuLightColors.Background,
|
||||
color: ayuLightColors.Foreground,
|
||||
},
|
||||
'hljs-comment': {
|
||||
color: ayuLightColors.Comment,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-quote': {
|
||||
color: ayuLightColors.AccentCyan,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-string': {
|
||||
color: ayuLightColors.AccentGreen,
|
||||
},
|
||||
'hljs-constant': {
|
||||
color: ayuLightColors.AccentCyan,
|
||||
},
|
||||
'hljs-number': {
|
||||
color: ayuLightColors.AccentPurple,
|
||||
},
|
||||
'hljs-keyword': {
|
||||
color: ayuLightColors.AccentYellow,
|
||||
},
|
||||
'hljs-selector-tag': {
|
||||
color: ayuLightColors.AccentYellow,
|
||||
},
|
||||
'hljs-attribute': {
|
||||
color: ayuLightColors.AccentYellow,
|
||||
},
|
||||
'hljs-variable': {
|
||||
color: ayuLightColors.Foreground,
|
||||
},
|
||||
'hljs-variable.language': {
|
||||
color: ayuLightColors.LightBlue,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-title': {
|
||||
color: ayuLightColors.AccentBlue,
|
||||
},
|
||||
'hljs-section': {
|
||||
color: ayuLightColors.AccentGreen,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-type': {
|
||||
color: ayuLightColors.LightBlue,
|
||||
},
|
||||
'hljs-class .hljs-title': {
|
||||
color: ayuLightColors.AccentBlue,
|
||||
},
|
||||
'hljs-tag': {
|
||||
color: ayuLightColors.LightBlue,
|
||||
},
|
||||
'hljs-name': {
|
||||
color: ayuLightColors.AccentBlue,
|
||||
},
|
||||
'hljs-builtin-name': {
|
||||
color: ayuLightColors.AccentYellow,
|
||||
},
|
||||
'hljs-meta': {
|
||||
color: ayuLightColors.AccentYellow,
|
||||
},
|
||||
'hljs-symbol': {
|
||||
color: ayuLightColors.AccentRed,
|
||||
},
|
||||
'hljs-bullet': {
|
||||
color: ayuLightColors.AccentYellow,
|
||||
},
|
||||
'hljs-regexp': {
|
||||
color: ayuLightColors.AccentCyan,
|
||||
},
|
||||
'hljs-link': {
|
||||
color: ayuLightColors.LightBlue,
|
||||
},
|
||||
'hljs-deletion': {
|
||||
color: ayuLightColors.AccentRed,
|
||||
},
|
||||
'hljs-addition': {
|
||||
color: ayuLightColors.AccentGreen,
|
||||
},
|
||||
'hljs-emphasis': {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-strong': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-literal': {
|
||||
color: ayuLightColors.AccentCyan,
|
||||
},
|
||||
'hljs-built_in': {
|
||||
color: ayuLightColors.AccentRed,
|
||||
},
|
||||
'hljs-doctag': {
|
||||
color: ayuLightColors.AccentRed,
|
||||
},
|
||||
'hljs-template-variable': {
|
||||
color: ayuLightColors.AccentCyan,
|
||||
},
|
||||
'hljs-selector-id': {
|
||||
color: ayuLightColors.AccentRed,
|
||||
},
|
||||
},
|
||||
ayuLightColors,
|
||||
);
|
||||
109
packages/cli/src/ui/themes/ayu.ts
Normal file
109
packages/cli/src/ui/themes/ayu.ts
Normal file
@@ -0,0 +1,109 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { type ColorsTheme, Theme } from './theme.js';
|
||||
|
||||
const ayuDarkColors: ColorsTheme = {
|
||||
type: 'dark',
|
||||
Background: '#0b0e14',
|
||||
Foreground: '#bfbdb6',
|
||||
LightBlue: '#59C2FF',
|
||||
AccentBlue: '#39BAE6',
|
||||
AccentPurple: '#D2A6FF',
|
||||
AccentCyan: '#95E6CB',
|
||||
AccentGreen: '#AAD94C',
|
||||
AccentYellow: '#FFB454',
|
||||
AccentRed: '#F26D78',
|
||||
Comment: '#646A71',
|
||||
Gray: '##3D4149',
|
||||
GradientColors: ['#FFB454', '#F26D78'],
|
||||
};
|
||||
|
||||
export const AyuDark: Theme = new Theme(
|
||||
'Ayu',
|
||||
'dark',
|
||||
{
|
||||
hljs: {
|
||||
display: 'block',
|
||||
overflowX: 'auto',
|
||||
padding: '0.5em',
|
||||
background: ayuDarkColors.Background,
|
||||
color: ayuDarkColors.Foreground,
|
||||
},
|
||||
'hljs-keyword': {
|
||||
color: ayuDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-literal': {
|
||||
color: ayuDarkColors.AccentPurple,
|
||||
},
|
||||
'hljs-symbol': {
|
||||
color: ayuDarkColors.AccentCyan,
|
||||
},
|
||||
'hljs-name': {
|
||||
color: ayuDarkColors.LightBlue,
|
||||
},
|
||||
'hljs-link': {
|
||||
color: ayuDarkColors.AccentBlue,
|
||||
},
|
||||
'hljs-function .hljs-keyword': {
|
||||
color: ayuDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-subst': {
|
||||
color: ayuDarkColors.Foreground,
|
||||
},
|
||||
'hljs-string': {
|
||||
color: ayuDarkColors.AccentGreen,
|
||||
},
|
||||
'hljs-title': {
|
||||
color: ayuDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-type': {
|
||||
color: ayuDarkColors.AccentBlue,
|
||||
},
|
||||
'hljs-attribute': {
|
||||
color: ayuDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-bullet': {
|
||||
color: ayuDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-addition': {
|
||||
color: ayuDarkColors.AccentGreen,
|
||||
},
|
||||
'hljs-variable': {
|
||||
color: ayuDarkColors.Foreground,
|
||||
},
|
||||
'hljs-template-tag': {
|
||||
color: ayuDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-template-variable': {
|
||||
color: ayuDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-comment': {
|
||||
color: ayuDarkColors.Comment,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-quote': {
|
||||
color: ayuDarkColors.AccentCyan,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-deletion': {
|
||||
color: ayuDarkColors.AccentRed,
|
||||
},
|
||||
'hljs-meta': {
|
||||
color: ayuDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-doctag': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-strong': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-emphasis': {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
},
|
||||
ayuDarkColors,
|
||||
);
|
||||
106
packages/cli/src/ui/themes/default-light.ts
Normal file
106
packages/cli/src/ui/themes/default-light.ts
Normal file
@@ -0,0 +1,106 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { lightTheme, Theme } from './theme.js';
|
||||
|
||||
export const DefaultLight: Theme = new Theme(
|
||||
'Default Light',
|
||||
'light',
|
||||
{
|
||||
hljs: {
|
||||
display: 'block',
|
||||
overflowX: 'auto',
|
||||
padding: '0.5em',
|
||||
background: lightTheme.Background,
|
||||
color: lightTheme.Foreground,
|
||||
},
|
||||
'hljs-comment': {
|
||||
color: lightTheme.Comment,
|
||||
},
|
||||
'hljs-quote': {
|
||||
color: lightTheme.Comment,
|
||||
},
|
||||
'hljs-variable': {
|
||||
color: lightTheme.Foreground,
|
||||
},
|
||||
'hljs-keyword': {
|
||||
color: lightTheme.AccentBlue,
|
||||
},
|
||||
'hljs-selector-tag': {
|
||||
color: lightTheme.AccentBlue,
|
||||
},
|
||||
'hljs-built_in': {
|
||||
color: lightTheme.AccentBlue,
|
||||
},
|
||||
'hljs-name': {
|
||||
color: lightTheme.AccentBlue,
|
||||
},
|
||||
'hljs-tag': {
|
||||
color: lightTheme.AccentBlue,
|
||||
},
|
||||
'hljs-string': {
|
||||
color: lightTheme.AccentRed,
|
||||
},
|
||||
'hljs-title': {
|
||||
color: lightTheme.AccentRed,
|
||||
},
|
||||
'hljs-section': {
|
||||
color: lightTheme.AccentRed,
|
||||
},
|
||||
'hljs-attribute': {
|
||||
color: lightTheme.AccentRed,
|
||||
},
|
||||
'hljs-literal': {
|
||||
color: lightTheme.AccentRed,
|
||||
},
|
||||
'hljs-template-tag': {
|
||||
color: lightTheme.AccentRed,
|
||||
},
|
||||
'hljs-template-variable': {
|
||||
color: lightTheme.AccentRed,
|
||||
},
|
||||
'hljs-type': {
|
||||
color: lightTheme.AccentRed,
|
||||
},
|
||||
'hljs-addition': {
|
||||
color: lightTheme.AccentGreen,
|
||||
},
|
||||
'hljs-deletion': {
|
||||
color: lightTheme.AccentRed,
|
||||
},
|
||||
'hljs-selector-attr': {
|
||||
color: lightTheme.AccentCyan,
|
||||
},
|
||||
'hljs-selector-pseudo': {
|
||||
color: lightTheme.AccentCyan,
|
||||
},
|
||||
'hljs-meta': {
|
||||
color: lightTheme.AccentCyan,
|
||||
},
|
||||
'hljs-doctag': {
|
||||
color: lightTheme.Gray,
|
||||
},
|
||||
'hljs-attr': {
|
||||
color: lightTheme.AccentRed,
|
||||
},
|
||||
'hljs-symbol': {
|
||||
color: lightTheme.AccentCyan,
|
||||
},
|
||||
'hljs-bullet': {
|
||||
color: lightTheme.AccentCyan,
|
||||
},
|
||||
'hljs-link': {
|
||||
color: lightTheme.AccentCyan,
|
||||
},
|
||||
'hljs-emphasis': {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-strong': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
lightTheme,
|
||||
);
|
||||
149
packages/cli/src/ui/themes/default.ts
Normal file
149
packages/cli/src/ui/themes/default.ts
Normal file
@@ -0,0 +1,149 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { darkTheme, Theme } from './theme.js';
|
||||
|
||||
export const DefaultDark: Theme = new Theme(
|
||||
'Default',
|
||||
'dark',
|
||||
{
|
||||
hljs: {
|
||||
display: 'block',
|
||||
overflowX: 'auto',
|
||||
padding: '0.5em',
|
||||
background: darkTheme.Background,
|
||||
color: darkTheme.Foreground,
|
||||
},
|
||||
'hljs-keyword': {
|
||||
color: darkTheme.AccentBlue,
|
||||
},
|
||||
'hljs-literal': {
|
||||
color: darkTheme.AccentBlue,
|
||||
},
|
||||
'hljs-symbol': {
|
||||
color: darkTheme.AccentBlue,
|
||||
},
|
||||
'hljs-name': {
|
||||
color: darkTheme.AccentBlue,
|
||||
},
|
||||
'hljs-link': {
|
||||
color: darkTheme.AccentBlue,
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
'hljs-built_in': {
|
||||
color: darkTheme.AccentCyan,
|
||||
},
|
||||
'hljs-type': {
|
||||
color: darkTheme.AccentCyan,
|
||||
},
|
||||
'hljs-number': {
|
||||
color: darkTheme.AccentGreen,
|
||||
},
|
||||
'hljs-class': {
|
||||
color: darkTheme.AccentGreen,
|
||||
},
|
||||
'hljs-string': {
|
||||
color: darkTheme.AccentYellow,
|
||||
},
|
||||
'hljs-meta-string': {
|
||||
color: darkTheme.AccentYellow,
|
||||
},
|
||||
'hljs-regexp': {
|
||||
color: darkTheme.AccentRed,
|
||||
},
|
||||
'hljs-template-tag': {
|
||||
color: darkTheme.AccentRed,
|
||||
},
|
||||
'hljs-subst': {
|
||||
color: darkTheme.Foreground,
|
||||
},
|
||||
'hljs-function': {
|
||||
color: darkTheme.Foreground,
|
||||
},
|
||||
'hljs-title': {
|
||||
color: darkTheme.Foreground,
|
||||
},
|
||||
'hljs-params': {
|
||||
color: darkTheme.Foreground,
|
||||
},
|
||||
'hljs-formula': {
|
||||
color: darkTheme.Foreground,
|
||||
},
|
||||
'hljs-comment': {
|
||||
color: darkTheme.Comment,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-quote': {
|
||||
color: darkTheme.Comment,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-doctag': {
|
||||
color: darkTheme.Comment,
|
||||
},
|
||||
'hljs-meta': {
|
||||
color: darkTheme.Gray,
|
||||
},
|
||||
'hljs-meta-keyword': {
|
||||
color: darkTheme.Gray,
|
||||
},
|
||||
'hljs-tag': {
|
||||
color: darkTheme.Gray,
|
||||
},
|
||||
'hljs-variable': {
|
||||
color: darkTheme.AccentPurple,
|
||||
},
|
||||
'hljs-template-variable': {
|
||||
color: darkTheme.AccentPurple,
|
||||
},
|
||||
'hljs-attr': {
|
||||
color: darkTheme.LightBlue,
|
||||
},
|
||||
'hljs-attribute': {
|
||||
color: darkTheme.LightBlue,
|
||||
},
|
||||
'hljs-builtin-name': {
|
||||
color: darkTheme.LightBlue,
|
||||
},
|
||||
'hljs-section': {
|
||||
color: darkTheme.AccentYellow,
|
||||
},
|
||||
'hljs-emphasis': {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-strong': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-bullet': {
|
||||
color: darkTheme.AccentYellow,
|
||||
},
|
||||
'hljs-selector-tag': {
|
||||
color: darkTheme.AccentYellow,
|
||||
},
|
||||
'hljs-selector-id': {
|
||||
color: darkTheme.AccentYellow,
|
||||
},
|
||||
'hljs-selector-class': {
|
||||
color: darkTheme.AccentYellow,
|
||||
},
|
||||
'hljs-selector-attr': {
|
||||
color: darkTheme.AccentYellow,
|
||||
},
|
||||
'hljs-selector-pseudo': {
|
||||
color: darkTheme.AccentYellow,
|
||||
},
|
||||
'hljs-addition': {
|
||||
backgroundColor: '#144212',
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
},
|
||||
'hljs-deletion': {
|
||||
backgroundColor: '#600',
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
darkTheme,
|
||||
);
|
||||
120
packages/cli/src/ui/themes/dracula.ts
Normal file
120
packages/cli/src/ui/themes/dracula.ts
Normal file
@@ -0,0 +1,120 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { type ColorsTheme, Theme } from './theme.js';
|
||||
|
||||
const draculaColors: ColorsTheme = {
|
||||
type: 'dark',
|
||||
Background: '#282a36',
|
||||
Foreground: '#f8f8f2',
|
||||
LightBlue: '#8be9fd',
|
||||
AccentBlue: '#8be9fd',
|
||||
AccentPurple: '#ff79c6',
|
||||
AccentCyan: '#8be9fd',
|
||||
AccentGreen: '#50fa7b',
|
||||
AccentYellow: '#f1fa8c',
|
||||
AccentRed: '#ff5555',
|
||||
Comment: '#6272a4',
|
||||
Gray: '#6272a4',
|
||||
GradientColors: ['#ff79c6', '#8be9fd'],
|
||||
};
|
||||
|
||||
export const Dracula: Theme = new Theme(
|
||||
'Dracula',
|
||||
'dark',
|
||||
{
|
||||
hljs: {
|
||||
display: 'block',
|
||||
overflowX: 'auto',
|
||||
padding: '0.5em',
|
||||
background: draculaColors.Background,
|
||||
color: draculaColors.Foreground,
|
||||
},
|
||||
'hljs-keyword': {
|
||||
color: draculaColors.AccentBlue,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-selector-tag': {
|
||||
color: draculaColors.AccentBlue,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-literal': {
|
||||
color: draculaColors.AccentBlue,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-section': {
|
||||
color: draculaColors.AccentBlue,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-link': {
|
||||
color: draculaColors.AccentBlue,
|
||||
},
|
||||
'hljs-function .hljs-keyword': {
|
||||
color: draculaColors.AccentPurple,
|
||||
},
|
||||
'hljs-subst': {
|
||||
color: draculaColors.Foreground,
|
||||
},
|
||||
'hljs-string': {
|
||||
color: draculaColors.AccentYellow,
|
||||
},
|
||||
'hljs-title': {
|
||||
color: draculaColors.AccentYellow,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-name': {
|
||||
color: draculaColors.AccentYellow,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-type': {
|
||||
color: draculaColors.AccentYellow,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-attribute': {
|
||||
color: draculaColors.AccentYellow,
|
||||
},
|
||||
'hljs-symbol': {
|
||||
color: draculaColors.AccentYellow,
|
||||
},
|
||||
'hljs-bullet': {
|
||||
color: draculaColors.AccentYellow,
|
||||
},
|
||||
'hljs-addition': {
|
||||
color: draculaColors.AccentGreen,
|
||||
},
|
||||
'hljs-variable': {
|
||||
color: draculaColors.AccentYellow,
|
||||
},
|
||||
'hljs-template-tag': {
|
||||
color: draculaColors.AccentYellow,
|
||||
},
|
||||
'hljs-template-variable': {
|
||||
color: draculaColors.AccentYellow,
|
||||
},
|
||||
'hljs-comment': {
|
||||
color: draculaColors.Comment,
|
||||
},
|
||||
'hljs-quote': {
|
||||
color: draculaColors.Comment,
|
||||
},
|
||||
'hljs-deletion': {
|
||||
color: draculaColors.AccentRed,
|
||||
},
|
||||
'hljs-meta': {
|
||||
color: draculaColors.Comment,
|
||||
},
|
||||
'hljs-doctag': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-strong': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-emphasis': {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
},
|
||||
draculaColors,
|
||||
);
|
||||
143
packages/cli/src/ui/themes/github-dark.ts
Normal file
143
packages/cli/src/ui/themes/github-dark.ts
Normal file
@@ -0,0 +1,143 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { type ColorsTheme, Theme } from './theme.js';
|
||||
|
||||
const githubDarkColors: ColorsTheme = {
|
||||
type: 'dark',
|
||||
Background: '#24292e',
|
||||
Foreground: '#d1d5da',
|
||||
LightBlue: '#79B8FF',
|
||||
AccentBlue: '#79B8FF',
|
||||
AccentPurple: '#B392F0',
|
||||
AccentCyan: '#9ECBFF',
|
||||
AccentGreen: '#85E89D',
|
||||
AccentYellow: '#FFAB70',
|
||||
AccentRed: '#F97583',
|
||||
Comment: '#6A737D',
|
||||
Gray: '#6A737D',
|
||||
GradientColors: ['#79B8FF', '#85E89D'],
|
||||
};
|
||||
|
||||
export const GitHubDark: Theme = new Theme(
|
||||
'GitHub',
|
||||
'dark',
|
||||
{
|
||||
hljs: {
|
||||
display: 'block',
|
||||
overflowX: 'auto',
|
||||
padding: '0.5em',
|
||||
color: githubDarkColors.Foreground,
|
||||
background: githubDarkColors.Background,
|
||||
},
|
||||
'hljs-comment': {
|
||||
color: githubDarkColors.Comment,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-quote': {
|
||||
color: githubDarkColors.Comment,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-keyword': {
|
||||
color: githubDarkColors.AccentRed,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-selector-tag': {
|
||||
color: githubDarkColors.AccentRed,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-subst': {
|
||||
color: githubDarkColors.Foreground,
|
||||
},
|
||||
'hljs-number': {
|
||||
color: githubDarkColors.LightBlue,
|
||||
},
|
||||
'hljs-literal': {
|
||||
color: githubDarkColors.LightBlue,
|
||||
},
|
||||
'hljs-variable': {
|
||||
color: githubDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-template-variable': {
|
||||
color: githubDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-tag .hljs-attr': {
|
||||
color: githubDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-string': {
|
||||
color: githubDarkColors.AccentCyan,
|
||||
},
|
||||
'hljs-doctag': {
|
||||
color: githubDarkColors.AccentCyan,
|
||||
},
|
||||
'hljs-title': {
|
||||
color: githubDarkColors.AccentPurple,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-section': {
|
||||
color: githubDarkColors.AccentPurple,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-selector-id': {
|
||||
color: githubDarkColors.AccentPurple,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-type': {
|
||||
color: githubDarkColors.AccentGreen,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-class .hljs-title': {
|
||||
color: githubDarkColors.AccentGreen,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-tag': {
|
||||
color: githubDarkColors.AccentGreen,
|
||||
},
|
||||
'hljs-name': {
|
||||
color: githubDarkColors.AccentGreen,
|
||||
},
|
||||
'hljs-attribute': {
|
||||
color: githubDarkColors.LightBlue,
|
||||
},
|
||||
'hljs-regexp': {
|
||||
color: githubDarkColors.AccentCyan,
|
||||
},
|
||||
'hljs-link': {
|
||||
color: githubDarkColors.AccentCyan,
|
||||
},
|
||||
'hljs-symbol': {
|
||||
color: githubDarkColors.AccentPurple,
|
||||
},
|
||||
'hljs-bullet': {
|
||||
color: githubDarkColors.AccentPurple,
|
||||
},
|
||||
'hljs-built_in': {
|
||||
color: githubDarkColors.LightBlue,
|
||||
},
|
||||
'hljs-builtin-name': {
|
||||
color: githubDarkColors.LightBlue,
|
||||
},
|
||||
'hljs-meta': {
|
||||
color: githubDarkColors.LightBlue,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-deletion': {
|
||||
background: '#86181D',
|
||||
color: githubDarkColors.AccentRed,
|
||||
},
|
||||
'hljs-addition': {
|
||||
background: '#144620',
|
||||
color: githubDarkColors.AccentGreen,
|
||||
},
|
||||
'hljs-emphasis': {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-strong': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
githubDarkColors,
|
||||
);
|
||||
145
packages/cli/src/ui/themes/github-light.ts
Normal file
145
packages/cli/src/ui/themes/github-light.ts
Normal file
@@ -0,0 +1,145 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { type ColorsTheme, Theme } from './theme.js';
|
||||
|
||||
const githubLightColors: ColorsTheme = {
|
||||
type: 'light',
|
||||
Background: '#f8f8f8',
|
||||
Foreground: '#24292E',
|
||||
LightBlue: '#0086b3',
|
||||
AccentBlue: '#458',
|
||||
AccentPurple: '#900',
|
||||
AccentCyan: '#009926',
|
||||
AccentGreen: '#008080',
|
||||
AccentYellow: '#990073',
|
||||
AccentRed: '#d14',
|
||||
Comment: '#998',
|
||||
Gray: '#999',
|
||||
GradientColors: ['#458', '#008080'],
|
||||
};
|
||||
|
||||
export const GitHubLight: Theme = new Theme(
|
||||
'GitHub Light',
|
||||
'light',
|
||||
{
|
||||
hljs: {
|
||||
display: 'block',
|
||||
overflowX: 'auto',
|
||||
padding: '0.5em',
|
||||
color: githubLightColors.Foreground,
|
||||
background: githubLightColors.Background,
|
||||
},
|
||||
'hljs-comment': {
|
||||
color: githubLightColors.Comment,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-quote': {
|
||||
color: githubLightColors.Comment,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-keyword': {
|
||||
color: githubLightColors.Foreground,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-selector-tag': {
|
||||
color: githubLightColors.Foreground,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-subst': {
|
||||
color: githubLightColors.Foreground,
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
'hljs-number': {
|
||||
color: githubLightColors.AccentGreen,
|
||||
},
|
||||
'hljs-literal': {
|
||||
color: githubLightColors.AccentGreen,
|
||||
},
|
||||
'hljs-variable': {
|
||||
color: githubLightColors.AccentGreen,
|
||||
},
|
||||
'hljs-template-variable': {
|
||||
color: githubLightColors.AccentGreen,
|
||||
},
|
||||
'hljs-tag .hljs-attr': {
|
||||
color: githubLightColors.AccentGreen,
|
||||
},
|
||||
'hljs-string': {
|
||||
color: githubLightColors.AccentRed,
|
||||
},
|
||||
'hljs-doctag': {
|
||||
color: githubLightColors.AccentRed,
|
||||
},
|
||||
'hljs-title': {
|
||||
color: githubLightColors.AccentPurple,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-section': {
|
||||
color: githubLightColors.AccentPurple,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-selector-id': {
|
||||
color: githubLightColors.AccentPurple,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-type': {
|
||||
color: githubLightColors.AccentBlue,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-class .hljs-title': {
|
||||
color: githubLightColors.AccentBlue,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-tag': {
|
||||
color: githubLightColors.AccentBlue,
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
'hljs-name': {
|
||||
color: githubLightColors.AccentBlue,
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
'hljs-attribute': {
|
||||
color: githubLightColors.AccentBlue,
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
'hljs-regexp': {
|
||||
color: githubLightColors.AccentCyan,
|
||||
},
|
||||
'hljs-link': {
|
||||
color: githubLightColors.AccentCyan,
|
||||
},
|
||||
'hljs-symbol': {
|
||||
color: githubLightColors.AccentYellow,
|
||||
},
|
||||
'hljs-bullet': {
|
||||
color: githubLightColors.AccentYellow,
|
||||
},
|
||||
'hljs-built_in': {
|
||||
color: githubLightColors.LightBlue,
|
||||
},
|
||||
'hljs-builtin-name': {
|
||||
color: githubLightColors.LightBlue,
|
||||
},
|
||||
'hljs-meta': {
|
||||
color: githubLightColors.Gray,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-deletion': {
|
||||
background: '#fdd',
|
||||
},
|
||||
'hljs-addition': {
|
||||
background: '#dfd',
|
||||
},
|
||||
'hljs-emphasis': {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-strong': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
githubLightColors,
|
||||
);
|
||||
142
packages/cli/src/ui/themes/googlecode.ts
Normal file
142
packages/cli/src/ui/themes/googlecode.ts
Normal file
@@ -0,0 +1,142 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { lightTheme, Theme, type ColorsTheme } from './theme.js';
|
||||
|
||||
const googleCodeColors: ColorsTheme = {
|
||||
type: 'light',
|
||||
Background: 'white',
|
||||
Foreground: 'black',
|
||||
LightBlue: '#066',
|
||||
AccentBlue: '#008',
|
||||
AccentPurple: '#606',
|
||||
AccentCyan: '#066',
|
||||
AccentGreen: '#080',
|
||||
AccentYellow: '#660',
|
||||
AccentRed: '#800',
|
||||
Comment: '#5f6368',
|
||||
Gray: lightTheme.Gray,
|
||||
GradientColors: ['#066', '#606'],
|
||||
};
|
||||
|
||||
export const GoogleCode: Theme = new Theme(
|
||||
'Google Code',
|
||||
'light',
|
||||
{
|
||||
hljs: {
|
||||
display: 'block',
|
||||
overflowX: 'auto',
|
||||
padding: '0.5em',
|
||||
background: googleCodeColors.Background,
|
||||
color: googleCodeColors.Foreground,
|
||||
},
|
||||
'hljs-comment': {
|
||||
color: googleCodeColors.AccentRed,
|
||||
},
|
||||
'hljs-quote': {
|
||||
color: googleCodeColors.AccentRed,
|
||||
},
|
||||
'hljs-keyword': {
|
||||
color: googleCodeColors.AccentBlue,
|
||||
},
|
||||
'hljs-selector-tag': {
|
||||
color: googleCodeColors.AccentBlue,
|
||||
},
|
||||
'hljs-section': {
|
||||
color: googleCodeColors.AccentBlue,
|
||||
},
|
||||
'hljs-title': {
|
||||
color: googleCodeColors.AccentPurple,
|
||||
},
|
||||
'hljs-name': {
|
||||
color: googleCodeColors.AccentBlue,
|
||||
},
|
||||
'hljs-variable': {
|
||||
color: googleCodeColors.AccentYellow,
|
||||
},
|
||||
'hljs-template-variable': {
|
||||
color: googleCodeColors.AccentYellow,
|
||||
},
|
||||
'hljs-string': {
|
||||
color: googleCodeColors.AccentGreen,
|
||||
},
|
||||
'hljs-selector-attr': {
|
||||
color: googleCodeColors.AccentGreen,
|
||||
},
|
||||
'hljs-selector-pseudo': {
|
||||
color: googleCodeColors.AccentGreen,
|
||||
},
|
||||
'hljs-regexp': {
|
||||
color: googleCodeColors.AccentGreen,
|
||||
},
|
||||
'hljs-literal': {
|
||||
color: googleCodeColors.AccentCyan,
|
||||
},
|
||||
'hljs-symbol': {
|
||||
color: googleCodeColors.AccentCyan,
|
||||
},
|
||||
'hljs-bullet': {
|
||||
color: googleCodeColors.AccentCyan,
|
||||
},
|
||||
'hljs-meta': {
|
||||
color: googleCodeColors.AccentCyan,
|
||||
},
|
||||
'hljs-number': {
|
||||
color: googleCodeColors.AccentCyan,
|
||||
},
|
||||
'hljs-link': {
|
||||
color: googleCodeColors.AccentCyan,
|
||||
},
|
||||
'hljs-doctag': {
|
||||
color: googleCodeColors.AccentPurple,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-type': {
|
||||
color: googleCodeColors.AccentPurple,
|
||||
},
|
||||
'hljs-attr': {
|
||||
color: googleCodeColors.AccentPurple,
|
||||
},
|
||||
'hljs-built_in': {
|
||||
color: googleCodeColors.AccentPurple,
|
||||
},
|
||||
'hljs-builtin-name': {
|
||||
color: googleCodeColors.AccentPurple,
|
||||
},
|
||||
'hljs-params': {
|
||||
color: googleCodeColors.AccentPurple,
|
||||
},
|
||||
'hljs-attribute': {
|
||||
color: googleCodeColors.Foreground,
|
||||
},
|
||||
'hljs-subst': {
|
||||
color: googleCodeColors.Foreground,
|
||||
},
|
||||
'hljs-formula': {
|
||||
backgroundColor: '#eee',
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-selector-id': {
|
||||
color: googleCodeColors.AccentYellow,
|
||||
},
|
||||
'hljs-selector-class': {
|
||||
color: googleCodeColors.AccentYellow,
|
||||
},
|
||||
'hljs-addition': {
|
||||
backgroundColor: '#baeeba',
|
||||
},
|
||||
'hljs-deletion': {
|
||||
backgroundColor: '#ffc8bd',
|
||||
},
|
||||
'hljs-strong': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-emphasis': {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
},
|
||||
googleCodeColors,
|
||||
);
|
||||
91
packages/cli/src/ui/themes/no-color.ts
Normal file
91
packages/cli/src/ui/themes/no-color.ts
Normal file
@@ -0,0 +1,91 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { Theme, ColorsTheme } from './theme.js';
|
||||
|
||||
const noColorColorsTheme: ColorsTheme = {
|
||||
type: 'ansi',
|
||||
Background: '',
|
||||
Foreground: '',
|
||||
LightBlue: '',
|
||||
AccentBlue: '',
|
||||
AccentPurple: '',
|
||||
AccentCyan: '',
|
||||
AccentGreen: '',
|
||||
AccentYellow: '',
|
||||
AccentRed: '',
|
||||
Comment: '',
|
||||
Gray: '',
|
||||
};
|
||||
|
||||
export const NoColorTheme: Theme = new Theme(
|
||||
'No Color',
|
||||
'dark',
|
||||
{
|
||||
hljs: {
|
||||
display: 'block',
|
||||
overflowX: 'auto',
|
||||
padding: '0.5em',
|
||||
},
|
||||
'hljs-keyword': {},
|
||||
'hljs-literal': {},
|
||||
'hljs-symbol': {},
|
||||
'hljs-name': {},
|
||||
'hljs-link': {
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
'hljs-built_in': {},
|
||||
'hljs-type': {},
|
||||
'hljs-number': {},
|
||||
'hljs-class': {},
|
||||
'hljs-string': {},
|
||||
'hljs-meta-string': {},
|
||||
'hljs-regexp': {},
|
||||
'hljs-template-tag': {},
|
||||
'hljs-subst': {},
|
||||
'hljs-function': {},
|
||||
'hljs-title': {},
|
||||
'hljs-params': {},
|
||||
'hljs-formula': {},
|
||||
'hljs-comment': {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-quote': {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-doctag': {},
|
||||
'hljs-meta': {},
|
||||
'hljs-meta-keyword': {},
|
||||
'hljs-tag': {},
|
||||
'hljs-variable': {},
|
||||
'hljs-template-variable': {},
|
||||
'hljs-attr': {},
|
||||
'hljs-attribute': {},
|
||||
'hljs-builtin-name': {},
|
||||
'hljs-section': {},
|
||||
'hljs-emphasis': {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-strong': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-bullet': {},
|
||||
'hljs-selector-tag': {},
|
||||
'hljs-selector-id': {},
|
||||
'hljs-selector-class': {},
|
||||
'hljs-selector-attr': {},
|
||||
'hljs-selector-pseudo': {},
|
||||
'hljs-addition': {
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
},
|
||||
'hljs-deletion': {
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
noColorColorsTheme,
|
||||
);
|
||||
109
packages/cli/src/ui/themes/qwen-dark.ts
Normal file
109
packages/cli/src/ui/themes/qwen-dark.ts
Normal file
@@ -0,0 +1,109 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { type ColorsTheme, Theme } from './theme.js';
|
||||
|
||||
const qwenDarkColors: ColorsTheme = {
|
||||
type: 'dark',
|
||||
Background: '#0b0e14',
|
||||
Foreground: '#bfbdb6',
|
||||
LightBlue: '#59C2FF',
|
||||
AccentBlue: '#39BAE6',
|
||||
AccentPurple: '#D2A6FF',
|
||||
AccentCyan: '#95E6CB',
|
||||
AccentGreen: '#AAD94C',
|
||||
AccentYellow: '#FFD700',
|
||||
AccentRed: '#F26D78',
|
||||
Comment: '#646A71',
|
||||
Gray: '#3D4149',
|
||||
GradientColors: ['#FFD700', '#da7959'],
|
||||
};
|
||||
|
||||
export const QwenDark: Theme = new Theme(
|
||||
'Qwen Dark',
|
||||
'dark',
|
||||
{
|
||||
hljs: {
|
||||
display: 'block',
|
||||
overflowX: 'auto',
|
||||
padding: '0.5em',
|
||||
background: qwenDarkColors.Background,
|
||||
color: qwenDarkColors.Foreground,
|
||||
},
|
||||
'hljs-keyword': {
|
||||
color: qwenDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-literal': {
|
||||
color: qwenDarkColors.AccentPurple,
|
||||
},
|
||||
'hljs-symbol': {
|
||||
color: qwenDarkColors.AccentCyan,
|
||||
},
|
||||
'hljs-name': {
|
||||
color: qwenDarkColors.LightBlue,
|
||||
},
|
||||
'hljs-link': {
|
||||
color: qwenDarkColors.AccentBlue,
|
||||
},
|
||||
'hljs-function .hljs-keyword': {
|
||||
color: qwenDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-subst': {
|
||||
color: qwenDarkColors.Foreground,
|
||||
},
|
||||
'hljs-string': {
|
||||
color: qwenDarkColors.AccentGreen,
|
||||
},
|
||||
'hljs-title': {
|
||||
color: qwenDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-type': {
|
||||
color: qwenDarkColors.AccentBlue,
|
||||
},
|
||||
'hljs-attribute': {
|
||||
color: qwenDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-bullet': {
|
||||
color: qwenDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-addition': {
|
||||
color: qwenDarkColors.AccentGreen,
|
||||
},
|
||||
'hljs-variable': {
|
||||
color: qwenDarkColors.Foreground,
|
||||
},
|
||||
'hljs-template-tag': {
|
||||
color: qwenDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-template-variable': {
|
||||
color: qwenDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-comment': {
|
||||
color: qwenDarkColors.Comment,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-quote': {
|
||||
color: qwenDarkColors.AccentCyan,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-deletion': {
|
||||
color: qwenDarkColors.AccentRed,
|
||||
},
|
||||
'hljs-meta': {
|
||||
color: qwenDarkColors.AccentYellow,
|
||||
},
|
||||
'hljs-doctag': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-strong': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-emphasis': {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
},
|
||||
qwenDarkColors,
|
||||
);
|
||||
135
packages/cli/src/ui/themes/qwen-light.ts
Normal file
135
packages/cli/src/ui/themes/qwen-light.ts
Normal file
@@ -0,0 +1,135 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { type ColorsTheme, Theme } from './theme.js';
|
||||
|
||||
const qwenLightColors: ColorsTheme = {
|
||||
type: 'light',
|
||||
Background: '#f8f9fa',
|
||||
Foreground: '#5c6166',
|
||||
LightBlue: '#55b4d4',
|
||||
AccentBlue: '#399ee6',
|
||||
AccentPurple: '#a37acc',
|
||||
AccentCyan: '#4cbf99',
|
||||
AccentGreen: '#86b300',
|
||||
AccentYellow: '#f2ae49',
|
||||
AccentRed: '#f07171',
|
||||
Comment: '#ABADB1',
|
||||
Gray: '#CCCFD3',
|
||||
GradientColors: ['#399ee6', '#86b300'],
|
||||
};
|
||||
|
||||
export const QwenLight: Theme = new Theme(
|
||||
'Qwen Light',
|
||||
'light',
|
||||
{
|
||||
hljs: {
|
||||
display: 'block',
|
||||
overflowX: 'auto',
|
||||
padding: '0.5em',
|
||||
background: qwenLightColors.Background,
|
||||
color: qwenLightColors.Foreground,
|
||||
},
|
||||
'hljs-comment': {
|
||||
color: qwenLightColors.Comment,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-quote': {
|
||||
color: qwenLightColors.AccentCyan,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-string': {
|
||||
color: qwenLightColors.AccentGreen,
|
||||
},
|
||||
'hljs-constant': {
|
||||
color: qwenLightColors.AccentCyan,
|
||||
},
|
||||
'hljs-number': {
|
||||
color: qwenLightColors.AccentPurple,
|
||||
},
|
||||
'hljs-keyword': {
|
||||
color: qwenLightColors.AccentYellow,
|
||||
},
|
||||
'hljs-selector-tag': {
|
||||
color: qwenLightColors.AccentYellow,
|
||||
},
|
||||
'hljs-attribute': {
|
||||
color: qwenLightColors.AccentYellow,
|
||||
},
|
||||
'hljs-variable': {
|
||||
color: qwenLightColors.Foreground,
|
||||
},
|
||||
'hljs-variable.language': {
|
||||
color: qwenLightColors.LightBlue,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-title': {
|
||||
color: qwenLightColors.AccentBlue,
|
||||
},
|
||||
'hljs-section': {
|
||||
color: qwenLightColors.AccentGreen,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-type': {
|
||||
color: qwenLightColors.LightBlue,
|
||||
},
|
||||
'hljs-class .hljs-title': {
|
||||
color: qwenLightColors.AccentBlue,
|
||||
},
|
||||
'hljs-tag': {
|
||||
color: qwenLightColors.LightBlue,
|
||||
},
|
||||
'hljs-name': {
|
||||
color: qwenLightColors.AccentBlue,
|
||||
},
|
||||
'hljs-builtin-name': {
|
||||
color: qwenLightColors.AccentYellow,
|
||||
},
|
||||
'hljs-meta': {
|
||||
color: qwenLightColors.AccentYellow,
|
||||
},
|
||||
'hljs-symbol': {
|
||||
color: qwenLightColors.AccentRed,
|
||||
},
|
||||
'hljs-bullet': {
|
||||
color: qwenLightColors.AccentYellow,
|
||||
},
|
||||
'hljs-regexp': {
|
||||
color: qwenLightColors.AccentCyan,
|
||||
},
|
||||
'hljs-link': {
|
||||
color: qwenLightColors.LightBlue,
|
||||
},
|
||||
'hljs-deletion': {
|
||||
color: qwenLightColors.AccentRed,
|
||||
},
|
||||
'hljs-addition': {
|
||||
color: qwenLightColors.AccentGreen,
|
||||
},
|
||||
'hljs-emphasis': {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-strong': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-literal': {
|
||||
color: qwenLightColors.AccentCyan,
|
||||
},
|
||||
'hljs-built_in': {
|
||||
color: qwenLightColors.AccentRed,
|
||||
},
|
||||
'hljs-doctag': {
|
||||
color: qwenLightColors.AccentRed,
|
||||
},
|
||||
'hljs-template-variable': {
|
||||
color: qwenLightColors.AccentCyan,
|
||||
},
|
||||
'hljs-selector-id': {
|
||||
color: qwenLightColors.AccentRed,
|
||||
},
|
||||
},
|
||||
qwenLightColors,
|
||||
);
|
||||
348
packages/cli/src/ui/themes/shades-of-purple.ts
Normal file
348
packages/cli/src/ui/themes/shades-of-purple.ts
Normal file
@@ -0,0 +1,348 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* Shades of Purple Theme — for Highlightjs.
|
||||
* @author Ahmad Awais <https://twitter.com/mrahmadawais/>
|
||||
*/
|
||||
import { type ColorsTheme, Theme } from './theme.js';
|
||||
|
||||
const shadesOfPurpleColors: ColorsTheme = {
|
||||
type: 'dark',
|
||||
// Required colors for ColorsTheme interface
|
||||
Background: '#2d2b57', // Main background
|
||||
Foreground: '#e3dfff', // Default text color (hljs, hljs-subst)
|
||||
LightBlue: '#847ace', // Light blue/purple accent
|
||||
AccentBlue: '#a599e9', // Borders, secondary blue
|
||||
AccentPurple: '#ac65ff', // Comments (main purple)
|
||||
AccentCyan: '#a1feff', // Names
|
||||
AccentGreen: '#A5FF90', // Strings and many others
|
||||
AccentYellow: '#fad000', // Title, main yellow
|
||||
AccentRed: '#ff628c', // Error/deletion accent
|
||||
Comment: '#B362FF', // Comment color (same as AccentPurple)
|
||||
Gray: '#726c86', // Gray color
|
||||
GradientColors: ['#4d21fc', '#847ace', '#ff628c'],
|
||||
};
|
||||
|
||||
// Additional colors from CSS that don't fit in the ColorsTheme interface
|
||||
const additionalColors = {
|
||||
AccentYellowAlt: '#f8d000', // Attr yellow (slightly different)
|
||||
AccentOrange: '#fb9e00', // Keywords, built_in, meta
|
||||
AccentPink: '#fa658d', // Numbers, literals
|
||||
AccentLightPurple: '#c991ff', // For params and properties
|
||||
AccentDarkPurple: '#6943ff', // For operators
|
||||
AccentTeal: '#2ee2fa', // For special constructs
|
||||
};
|
||||
|
||||
export const ShadesOfPurple = new Theme(
|
||||
'Shades Of Purple',
|
||||
'dark',
|
||||
{
|
||||
// Base styles
|
||||
hljs: {
|
||||
display: 'block',
|
||||
overflowX: 'auto',
|
||||
background: shadesOfPurpleColors.Background,
|
||||
color: shadesOfPurpleColors.Foreground,
|
||||
},
|
||||
|
||||
// Title elements
|
||||
'hljs-title': {
|
||||
color: shadesOfPurpleColors.AccentYellow,
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
|
||||
// Names
|
||||
'hljs-name': {
|
||||
color: shadesOfPurpleColors.AccentCyan,
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
|
||||
// Tags
|
||||
'hljs-tag': {
|
||||
color: shadesOfPurpleColors.Foreground,
|
||||
},
|
||||
|
||||
// Attributes
|
||||
'hljs-attr': {
|
||||
color: additionalColors.AccentYellowAlt,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
|
||||
// Built-ins, selector tags, sections
|
||||
'hljs-built_in': {
|
||||
color: additionalColors.AccentOrange,
|
||||
},
|
||||
'hljs-selector-tag': {
|
||||
color: additionalColors.AccentOrange,
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
'hljs-section': {
|
||||
color: additionalColors.AccentOrange,
|
||||
},
|
||||
|
||||
// Keywords
|
||||
'hljs-keyword': {
|
||||
color: additionalColors.AccentOrange,
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
|
||||
// Default text and substitutions
|
||||
'hljs-subst': {
|
||||
color: shadesOfPurpleColors.Foreground,
|
||||
},
|
||||
|
||||
// Strings and related elements (all green)
|
||||
'hljs-string': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-attribute': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-symbol': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-bullet': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-addition': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-code': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-regexp': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-selector-class': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-selector-attr': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-selector-pseudo': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-template-tag': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-quote': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-deletion': {
|
||||
color: shadesOfPurpleColors.AccentRed,
|
||||
},
|
||||
|
||||
// Meta elements
|
||||
'hljs-meta': {
|
||||
color: additionalColors.AccentOrange,
|
||||
},
|
||||
'hljs-meta-string': {
|
||||
color: additionalColors.AccentOrange,
|
||||
},
|
||||
|
||||
// Comments
|
||||
'hljs-comment': {
|
||||
color: shadesOfPurpleColors.AccentPurple,
|
||||
},
|
||||
|
||||
// Literals and numbers
|
||||
'hljs-literal': {
|
||||
color: additionalColors.AccentPink,
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
'hljs-number': {
|
||||
color: additionalColors.AccentPink,
|
||||
},
|
||||
|
||||
// Emphasis and strong
|
||||
'hljs-emphasis': {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-strong': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
// Diff-specific classes
|
||||
'hljs-diff': {
|
||||
color: shadesOfPurpleColors.Foreground,
|
||||
},
|
||||
'hljs-meta.hljs-diff': {
|
||||
color: shadesOfPurpleColors.AccentBlue,
|
||||
},
|
||||
'hljs-ln': {
|
||||
color: shadesOfPurpleColors.Gray,
|
||||
},
|
||||
|
||||
// Additional elements that might be needed
|
||||
'hljs-type': {
|
||||
color: shadesOfPurpleColors.AccentYellow,
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
'hljs-variable': {
|
||||
color: shadesOfPurpleColors.AccentYellow,
|
||||
},
|
||||
'hljs-template-variable': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-function .hljs-keyword': {
|
||||
color: additionalColors.AccentOrange,
|
||||
},
|
||||
'hljs-link': {
|
||||
color: shadesOfPurpleColors.LightBlue,
|
||||
},
|
||||
'hljs-doctag': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
// Function parameters
|
||||
'hljs-params': {
|
||||
color: additionalColors.AccentLightPurple,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
|
||||
// Class definitions
|
||||
'hljs-class': {
|
||||
color: shadesOfPurpleColors.AccentCyan,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
// Function definitions
|
||||
'hljs-function': {
|
||||
color: shadesOfPurpleColors.AccentCyan,
|
||||
},
|
||||
|
||||
// Object properties
|
||||
'hljs-property': {
|
||||
color: shadesOfPurpleColors.AccentBlue,
|
||||
},
|
||||
|
||||
// Operators
|
||||
'hljs-operator': {
|
||||
color: additionalColors.AccentDarkPurple,
|
||||
},
|
||||
|
||||
// Punctuation (if supported by the parser)
|
||||
'hljs-punctuation': {
|
||||
color: shadesOfPurpleColors.Gray,
|
||||
},
|
||||
|
||||
// CSS ID selectors
|
||||
'hljs-selector-id': {
|
||||
color: shadesOfPurpleColors.AccentYellow,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
// Character literals
|
||||
'hljs-char': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
|
||||
// Escape sequences
|
||||
'hljs-escape': {
|
||||
color: additionalColors.AccentPink,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
// Meta keywords
|
||||
'hljs-meta-keyword': {
|
||||
color: additionalColors.AccentOrange,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
// Built-in names
|
||||
'hljs-builtin-name': {
|
||||
color: additionalColors.AccentTeal,
|
||||
},
|
||||
|
||||
// Modules
|
||||
'hljs-module': {
|
||||
color: shadesOfPurpleColors.AccentCyan,
|
||||
},
|
||||
|
||||
// Namespaces
|
||||
'hljs-namespace': {
|
||||
color: shadesOfPurpleColors.LightBlue,
|
||||
},
|
||||
|
||||
// Important annotations
|
||||
'hljs-important': {
|
||||
color: shadesOfPurpleColors.AccentRed,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
// Formulas (for LaTeX, etc.)
|
||||
'hljs-formula': {
|
||||
color: shadesOfPurpleColors.AccentCyan,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
|
||||
// Language-specific additions
|
||||
// Python decorators
|
||||
'hljs-decorator': {
|
||||
color: additionalColors.AccentTeal,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
// Ruby symbols
|
||||
'hljs-symbol.ruby': {
|
||||
color: additionalColors.AccentPink,
|
||||
},
|
||||
|
||||
// SQL keywords
|
||||
'hljs-keyword.sql': {
|
||||
color: additionalColors.AccentOrange,
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
|
||||
// Markdown specific
|
||||
'hljs-section.markdown': {
|
||||
color: shadesOfPurpleColors.AccentYellow,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
// JSON keys
|
||||
'hljs-attr.json': {
|
||||
color: shadesOfPurpleColors.AccentCyan,
|
||||
},
|
||||
|
||||
// XML/HTML specific
|
||||
'hljs-tag .hljs-name': {
|
||||
color: shadesOfPurpleColors.AccentRed,
|
||||
},
|
||||
'hljs-tag .hljs-attr': {
|
||||
color: additionalColors.AccentYellowAlt,
|
||||
},
|
||||
|
||||
// Line highlighting (if line numbers are enabled)
|
||||
'hljs.hljs-line-numbers': {
|
||||
borderRight: `1px solid ${shadesOfPurpleColors.Gray}`,
|
||||
},
|
||||
'hljs.hljs-line-numbers .hljs-ln-numbers': {
|
||||
color: shadesOfPurpleColors.Gray,
|
||||
paddingRight: '1em',
|
||||
},
|
||||
'hljs.hljs-line-numbers .hljs-ln-code': {
|
||||
paddingLeft: '1em',
|
||||
},
|
||||
|
||||
// Selection styling
|
||||
'hljs::selection': {
|
||||
background: shadesOfPurpleColors.AccentBlue + '40', // 40 = 25% opacity
|
||||
},
|
||||
'hljs ::-moz-selection': {
|
||||
background: shadesOfPurpleColors.AccentBlue + '40',
|
||||
},
|
||||
|
||||
// Highlighted lines (for emphasis)
|
||||
'hljs .hljs-highlight': {
|
||||
background: shadesOfPurpleColors.AccentPurple + '20', // 20 = 12.5% opacity
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
shadesOfPurpleColors,
|
||||
);
|
||||
141
packages/cli/src/ui/themes/theme-manager.ts
Normal file
141
packages/cli/src/ui/themes/theme-manager.ts
Normal file
@@ -0,0 +1,141 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { AyuDark } from './ayu.js';
|
||||
import { AyuLight } from './ayu-light.js';
|
||||
import { AtomOneDark } from './atom-one-dark.js';
|
||||
import { Dracula } from './dracula.js';
|
||||
import { GitHubDark } from './github-dark.js';
|
||||
import { GitHubLight } from './github-light.js';
|
||||
import { GoogleCode } from './googlecode.js';
|
||||
import { DefaultLight } from './default-light.js';
|
||||
import { DefaultDark } from './default.js';
|
||||
import { ShadesOfPurple } from './shades-of-purple.js';
|
||||
import { XCode } from './xcode.js';
|
||||
import { QwenLight } from './qwen-light.js';
|
||||
import { QwenDark } from './qwen-dark.js';
|
||||
import { Theme, ThemeType } from './theme.js';
|
||||
import { ANSI } from './ansi.js';
|
||||
import { ANSILight } from './ansi-light.js';
|
||||
import { NoColorTheme } from './no-color.js';
|
||||
import process from 'node:process';
|
||||
|
||||
export interface ThemeDisplay {
|
||||
name: string;
|
||||
type: ThemeType;
|
||||
}
|
||||
|
||||
export const DEFAULT_THEME: Theme = QwenDark;
|
||||
|
||||
class ThemeManager {
|
||||
private readonly availableThemes: Theme[];
|
||||
private activeTheme: Theme;
|
||||
|
||||
constructor() {
|
||||
this.availableThemes = [
|
||||
AyuDark,
|
||||
AyuLight,
|
||||
AtomOneDark,
|
||||
Dracula,
|
||||
DefaultLight,
|
||||
DefaultDark,
|
||||
GitHubDark,
|
||||
GitHubLight,
|
||||
GoogleCode,
|
||||
QwenLight,
|
||||
QwenDark,
|
||||
ShadesOfPurple,
|
||||
XCode,
|
||||
ANSI,
|
||||
ANSILight,
|
||||
];
|
||||
this.activeTheme = DEFAULT_THEME;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a list of available theme names.
|
||||
*/
|
||||
getAvailableThemes(): ThemeDisplay[] {
|
||||
// Separate Qwen themes
|
||||
const qwenThemes = this.availableThemes.filter(
|
||||
(theme) => theme.name === QwenLight.name || theme.name === QwenDark.name,
|
||||
);
|
||||
const otherThemes = this.availableThemes.filter(
|
||||
(theme) => theme.name !== QwenLight.name && theme.name !== QwenDark.name,
|
||||
);
|
||||
|
||||
// Sort other themes by type and then name
|
||||
const sortedOtherThemes = otherThemes.sort((a, b) => {
|
||||
const typeOrder = (type: ThemeType): number => {
|
||||
switch (type) {
|
||||
case 'dark':
|
||||
return 1;
|
||||
case 'light':
|
||||
return 2;
|
||||
default:
|
||||
return 3;
|
||||
}
|
||||
};
|
||||
|
||||
const typeComparison = typeOrder(a.type) - typeOrder(b.type);
|
||||
if (typeComparison !== 0) {
|
||||
return typeComparison;
|
||||
}
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
|
||||
// Combine Qwen themes first, then sorted others
|
||||
const sortedThemes = [...qwenThemes, ...sortedOtherThemes];
|
||||
|
||||
return sortedThemes.map((theme) => ({
|
||||
name: theme.name,
|
||||
type: theme.type,
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the active theme.
|
||||
* @param themeName The name of the theme to activate.
|
||||
* @returns True if the theme was successfully set, false otherwise.
|
||||
*/
|
||||
setActiveTheme(themeName: string | undefined): boolean {
|
||||
const foundTheme = this.findThemeByName(themeName);
|
||||
|
||||
if (foundTheme) {
|
||||
this.activeTheme = foundTheme;
|
||||
return true;
|
||||
} else {
|
||||
// If themeName is undefined, it means we want to set the default theme.
|
||||
// If findThemeByName returns undefined (e.g. default theme is also not found for some reason)
|
||||
// then this will return false.
|
||||
if (themeName === undefined) {
|
||||
this.activeTheme = DEFAULT_THEME;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
findThemeByName(themeName: string | undefined): Theme | undefined {
|
||||
if (!themeName) {
|
||||
return DEFAULT_THEME;
|
||||
}
|
||||
return this.availableThemes.find((theme) => theme.name === themeName);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the currently active theme object.
|
||||
*/
|
||||
getActiveTheme(): Theme {
|
||||
if (process.env.NO_COLOR) {
|
||||
return NoColorTheme;
|
||||
}
|
||||
return this.activeTheme;
|
||||
}
|
||||
}
|
||||
|
||||
// Export an instance of the ThemeManager
|
||||
export const themeManager = new ThemeManager();
|
||||
341
packages/cli/src/ui/themes/theme.ts
Normal file
341
packages/cli/src/ui/themes/theme.ts
Normal file
@@ -0,0 +1,341 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import type { CSSProperties } from 'react';
|
||||
|
||||
export type ThemeType = 'light' | 'dark' | 'ansi';
|
||||
|
||||
export interface ColorsTheme {
|
||||
type: ThemeType;
|
||||
Background: string;
|
||||
Foreground: string;
|
||||
LightBlue: string;
|
||||
AccentBlue: string;
|
||||
AccentPurple: string;
|
||||
AccentCyan: string;
|
||||
AccentGreen: string;
|
||||
AccentYellow: string;
|
||||
AccentRed: string;
|
||||
Comment: string;
|
||||
Gray: string;
|
||||
GradientColors?: string[];
|
||||
}
|
||||
|
||||
export const lightTheme: ColorsTheme = {
|
||||
type: 'light',
|
||||
Background: '#FAFAFA',
|
||||
Foreground: '#3C3C43',
|
||||
LightBlue: '#89BDCD',
|
||||
AccentBlue: '#3B82F6',
|
||||
AccentPurple: '#8B5CF6',
|
||||
AccentCyan: '#06B6D4',
|
||||
AccentGreen: '#3CA84B',
|
||||
AccentYellow: '#D5A40A',
|
||||
AccentRed: '#DD4C4C',
|
||||
Comment: '#008000',
|
||||
Gray: '#B7BECC',
|
||||
GradientColors: ['#4796E4', '#847ACE', '#C3677F'],
|
||||
};
|
||||
|
||||
export const darkTheme: ColorsTheme = {
|
||||
type: 'dark',
|
||||
Background: '#1E1E2E',
|
||||
Foreground: '#CDD6F4',
|
||||
LightBlue: '#ADD8E6',
|
||||
AccentBlue: '#89B4FA',
|
||||
AccentPurple: '#CBA6F7',
|
||||
AccentCyan: '#89DCEB',
|
||||
AccentGreen: '#A6E3A1',
|
||||
AccentYellow: '#F9E2AF',
|
||||
AccentRed: '#F38BA8',
|
||||
Comment: '#6C7086',
|
||||
Gray: '#6C7086',
|
||||
GradientColors: ['#4796E4', '#847ACE', '#C3677F'],
|
||||
};
|
||||
|
||||
export const ansiTheme: ColorsTheme = {
|
||||
type: 'ansi',
|
||||
Background: 'black',
|
||||
Foreground: 'white',
|
||||
LightBlue: 'blue',
|
||||
AccentBlue: 'blue',
|
||||
AccentPurple: 'magenta',
|
||||
AccentCyan: 'cyan',
|
||||
AccentGreen: 'green',
|
||||
AccentYellow: 'yellow',
|
||||
AccentRed: 'red',
|
||||
Comment: 'gray',
|
||||
Gray: 'gray',
|
||||
};
|
||||
|
||||
export class Theme {
|
||||
/**
|
||||
* The default foreground color for text when no specific highlight rule applies.
|
||||
* This is an Ink-compatible color string (hex or name).
|
||||
*/
|
||||
readonly defaultColor: string;
|
||||
/**
|
||||
* Stores the mapping from highlight.js class names (e.g., 'hljs-keyword')
|
||||
* to Ink-compatible color strings (hex or name).
|
||||
*/
|
||||
protected readonly _colorMap: Readonly<Record<string, string>>;
|
||||
|
||||
// --- Static Helper Data ---
|
||||
|
||||
// Mapping from common CSS color names (lowercase) to hex codes (lowercase)
|
||||
// Excludes names directly supported by Ink
|
||||
private static readonly cssNameToHexMap: Readonly<Record<string, string>> = {
|
||||
aliceblue: '#f0f8ff',
|
||||
antiquewhite: '#faebd7',
|
||||
aqua: '#00ffff',
|
||||
aquamarine: '#7fffd4',
|
||||
azure: '#f0ffff',
|
||||
beige: '#f5f5dc',
|
||||
bisque: '#ffe4c4',
|
||||
blanchedalmond: '#ffebcd',
|
||||
blueviolet: '#8a2be2',
|
||||
brown: '#a52a2a',
|
||||
burlywood: '#deb887',
|
||||
cadetblue: '#5f9ea0',
|
||||
chartreuse: '#7fff00',
|
||||
chocolate: '#d2691e',
|
||||
coral: '#ff7f50',
|
||||
cornflowerblue: '#6495ed',
|
||||
cornsilk: '#fff8dc',
|
||||
crimson: '#dc143c',
|
||||
darkblue: '#00008b',
|
||||
darkcyan: '#008b8b',
|
||||
darkgoldenrod: '#b8860b',
|
||||
darkgray: '#a9a9a9',
|
||||
darkgrey: '#a9a9a9',
|
||||
darkgreen: '#006400',
|
||||
darkkhaki: '#bdb76b',
|
||||
darkmagenta: '#8b008b',
|
||||
darkolivegreen: '#556b2f',
|
||||
darkorange: '#ff8c00',
|
||||
darkorchid: '#9932cc',
|
||||
darkred: '#8b0000',
|
||||
darksalmon: '#e9967a',
|
||||
darkseagreen: '#8fbc8f',
|
||||
darkslateblue: '#483d8b',
|
||||
darkslategray: '#2f4f4f',
|
||||
darkslategrey: '#2f4f4f',
|
||||
darkturquoise: '#00ced1',
|
||||
darkviolet: '#9400d3',
|
||||
deeppink: '#ff1493',
|
||||
deepskyblue: '#00bfff',
|
||||
dimgray: '#696969',
|
||||
dimgrey: '#696969',
|
||||
dodgerblue: '#1e90ff',
|
||||
firebrick: '#b22222',
|
||||
floralwhite: '#fffaf0',
|
||||
forestgreen: '#228b22',
|
||||
fuchsia: '#ff00ff',
|
||||
gainsboro: '#dcdcdc',
|
||||
ghostwhite: '#f8f8ff',
|
||||
gold: '#ffd700',
|
||||
goldenrod: '#daa520',
|
||||
greenyellow: '#adff2f',
|
||||
honeydew: '#f0fff0',
|
||||
hotpink: '#ff69b4',
|
||||
indianred: '#cd5c5c',
|
||||
indigo: '#4b0082',
|
||||
ivory: '#fffff0',
|
||||
khaki: '#f0e68c',
|
||||
lavender: '#e6e6fa',
|
||||
lavenderblush: '#fff0f5',
|
||||
lawngreen: '#7cfc00',
|
||||
lemonchiffon: '#fffacd',
|
||||
lightblue: '#add8e6',
|
||||
lightcoral: '#f08080',
|
||||
lightcyan: '#e0ffff',
|
||||
lightgoldenrodyellow: '#fafad2',
|
||||
lightgray: '#d3d3d3',
|
||||
lightgrey: '#d3d3d3',
|
||||
lightgreen: '#90ee90',
|
||||
lightpink: '#ffb6c1',
|
||||
lightsalmon: '#ffa07a',
|
||||
lightseagreen: '#20b2aa',
|
||||
lightskyblue: '#87cefa',
|
||||
lightslategray: '#778899',
|
||||
lightslategrey: '#778899',
|
||||
lightsteelblue: '#b0c4de',
|
||||
lightyellow: '#ffffe0',
|
||||
lime: '#00ff00',
|
||||
limegreen: '#32cd32',
|
||||
linen: '#faf0e6',
|
||||
maroon: '#800000',
|
||||
mediumaquamarine: '#66cdaa',
|
||||
mediumblue: '#0000cd',
|
||||
mediumorchid: '#ba55d3',
|
||||
mediumpurple: '#9370db',
|
||||
mediumseagreen: '#3cb371',
|
||||
mediumslateblue: '#7b68ee',
|
||||
mediumspringgreen: '#00fa9a',
|
||||
mediumturquoise: '#48d1cc',
|
||||
mediumvioletred: '#c71585',
|
||||
midnightblue: '#191970',
|
||||
mintcream: '#f5fffa',
|
||||
mistyrose: '#ffe4e1',
|
||||
moccasin: '#ffe4b5',
|
||||
navajowhite: '#ffdead',
|
||||
navy: '#000080',
|
||||
oldlace: '#fdf5e6',
|
||||
olive: '#808000',
|
||||
olivedrab: '#6b8e23',
|
||||
orange: '#ffa500',
|
||||
orangered: '#ff4500',
|
||||
orchid: '#da70d6',
|
||||
palegoldenrod: '#eee8aa',
|
||||
palegreen: '#98fb98',
|
||||
paleturquoise: '#afeeee',
|
||||
palevioletred: '#db7093',
|
||||
papayawhip: '#ffefd5',
|
||||
peachpuff: '#ffdab9',
|
||||
peru: '#cd853f',
|
||||
pink: '#ffc0cb',
|
||||
plum: '#dda0dd',
|
||||
powderblue: '#b0e0e6',
|
||||
purple: '#800080',
|
||||
rebeccapurple: '#663399',
|
||||
rosybrown: '#bc8f8f',
|
||||
royalblue: '#4169e1',
|
||||
saddlebrown: '#8b4513',
|
||||
salmon: '#fa8072',
|
||||
sandybrown: '#f4a460',
|
||||
seagreen: '#2e8b57',
|
||||
seashell: '#fff5ee',
|
||||
sienna: '#a0522d',
|
||||
silver: '#c0c0c0',
|
||||
skyblue: '#87ceeb',
|
||||
slateblue: '#6a5acd',
|
||||
slategray: '#708090',
|
||||
slategrey: '#708090',
|
||||
snow: '#fffafa',
|
||||
springgreen: '#00ff7f',
|
||||
steelblue: '#4682b4',
|
||||
tan: '#d2b48c',
|
||||
teal: '#008080',
|
||||
thistle: '#d8bfd8',
|
||||
tomato: '#ff6347',
|
||||
turquoise: '#40e0d0',
|
||||
violet: '#ee82ee',
|
||||
wheat: '#f5deb3',
|
||||
whitesmoke: '#f5f5f5',
|
||||
yellowgreen: '#9acd32',
|
||||
};
|
||||
|
||||
// Define the set of Ink's named colors for quick lookup
|
||||
private static readonly inkSupportedNames = new Set([
|
||||
'black',
|
||||
'red',
|
||||
'green',
|
||||
'yellow',
|
||||
'blue',
|
||||
'cyan',
|
||||
'magenta',
|
||||
'white',
|
||||
'gray',
|
||||
'grey',
|
||||
'blackbright',
|
||||
'redbright',
|
||||
'greenbright',
|
||||
'yellowbright',
|
||||
'bluebright',
|
||||
'cyanbright',
|
||||
'magentabright',
|
||||
'whitebright',
|
||||
]);
|
||||
|
||||
/**
|
||||
* Creates a new Theme instance.
|
||||
* @param name The name of the theme.
|
||||
* @param rawMappings The raw CSSProperties mappings from a react-syntax-highlighter theme object.
|
||||
*/
|
||||
constructor(
|
||||
readonly name: string,
|
||||
readonly type: ThemeType,
|
||||
rawMappings: Record<string, CSSProperties>,
|
||||
readonly colors: ColorsTheme,
|
||||
) {
|
||||
this._colorMap = Object.freeze(this._buildColorMap(rawMappings)); // Build and freeze the map
|
||||
|
||||
// Determine the default foreground color
|
||||
const rawDefaultColor = rawMappings['hljs']?.color;
|
||||
this.defaultColor =
|
||||
(rawDefaultColor ? Theme._resolveColor(rawDefaultColor) : undefined) ??
|
||||
''; // Default to empty string if not found or resolvable
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the Ink-compatible color string for a given highlight.js class name.
|
||||
* @param hljsClass The highlight.js class name (e.g., 'hljs-keyword', 'hljs-string').
|
||||
* @returns The corresponding Ink color string (hex or name) if it exists.
|
||||
*/
|
||||
getInkColor(hljsClass: string): string | undefined {
|
||||
return this._colorMap[hljsClass];
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolves a CSS color value (name or hex) into an Ink-compatible color string.
|
||||
* @param colorValue The raw color string (e.g., 'blue', '#ff0000', 'darkkhaki').
|
||||
* @returns An Ink-compatible color string (hex or name), or undefined if not resolvable.
|
||||
*/
|
||||
private static _resolveColor(colorValue: string): string | undefined {
|
||||
const lowerColor = colorValue.toLowerCase();
|
||||
|
||||
// 1. Check if it's already a hex code
|
||||
if (lowerColor.startsWith('#')) {
|
||||
return lowerColor; // Use hex directly
|
||||
}
|
||||
// 2. Check if it's an Ink supported name (lowercase)
|
||||
else if (Theme.inkSupportedNames.has(lowerColor)) {
|
||||
return lowerColor; // Use Ink name directly
|
||||
}
|
||||
// 3. Check if it's a known CSS name we can map to hex
|
||||
else if (Theme.cssNameToHexMap[lowerColor]) {
|
||||
return Theme.cssNameToHexMap[lowerColor]; // Use mapped hex
|
||||
}
|
||||
|
||||
// 4. Could not resolve
|
||||
console.warn(
|
||||
`[Theme] Could not resolve color "${colorValue}" to an Ink-compatible format.`,
|
||||
);
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds the internal map from highlight.js class names to Ink-compatible color strings.
|
||||
* This method is protected and primarily intended for use by the constructor.
|
||||
* @param hljsTheme The raw CSSProperties mappings from a react-syntax-highlighter theme object.
|
||||
* @returns An Ink-compatible theme map (Record<string, string>).
|
||||
*/
|
||||
protected _buildColorMap(
|
||||
hljsTheme: Record<string, CSSProperties>,
|
||||
): Record<string, string> {
|
||||
const inkTheme: Record<string, string> = {};
|
||||
for (const key in hljsTheme) {
|
||||
// Ensure the key starts with 'hljs-' or is 'hljs' for the base style
|
||||
if (!key.startsWith('hljs-') && key !== 'hljs') {
|
||||
continue; // Skip keys not related to highlighting classes
|
||||
}
|
||||
|
||||
const style = hljsTheme[key];
|
||||
if (style?.color) {
|
||||
const resolvedColor = Theme._resolveColor(style.color);
|
||||
if (resolvedColor !== undefined) {
|
||||
// Use the original key from the hljsTheme (e.g., 'hljs-keyword')
|
||||
inkTheme[key] = resolvedColor;
|
||||
}
|
||||
// If color is not resolvable, it's omitted from the map,
|
||||
// allowing fallback to the default foreground color.
|
||||
}
|
||||
// We currently only care about the 'color' property for Ink rendering.
|
||||
// Other properties like background, fontStyle, etc., are ignored.
|
||||
}
|
||||
return inkTheme;
|
||||
}
|
||||
}
|
||||
150
packages/cli/src/ui/themes/xcode.ts
Normal file
150
packages/cli/src/ui/themes/xcode.ts
Normal file
@@ -0,0 +1,150 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { type ColorsTheme, Theme } from './theme.js';
|
||||
|
||||
const xcodeColors: ColorsTheme = {
|
||||
type: 'light',
|
||||
Background: '#fff',
|
||||
Foreground: 'black',
|
||||
LightBlue: '#0E0EFF',
|
||||
AccentBlue: '#1c00cf',
|
||||
AccentPurple: '#aa0d91',
|
||||
AccentCyan: '#3F6E74',
|
||||
AccentGreen: '#007400',
|
||||
AccentYellow: '#836C28',
|
||||
AccentRed: '#c41a16',
|
||||
Comment: '#007400',
|
||||
Gray: '#c0c0c0',
|
||||
GradientColors: ['#1c00cf', '#007400'],
|
||||
};
|
||||
|
||||
export const XCode: Theme = new Theme(
|
||||
'Xcode',
|
||||
'light',
|
||||
{
|
||||
hljs: {
|
||||
display: 'block',
|
||||
overflowX: 'auto',
|
||||
padding: '0.5em',
|
||||
background: xcodeColors.Background,
|
||||
color: xcodeColors.Foreground,
|
||||
},
|
||||
'xml .hljs-meta': {
|
||||
color: xcodeColors.Gray,
|
||||
},
|
||||
'hljs-comment': {
|
||||
color: xcodeColors.Comment,
|
||||
},
|
||||
'hljs-quote': {
|
||||
color: xcodeColors.Comment,
|
||||
},
|
||||
'hljs-tag': {
|
||||
color: xcodeColors.AccentPurple,
|
||||
},
|
||||
'hljs-attribute': {
|
||||
color: xcodeColors.AccentPurple,
|
||||
},
|
||||
'hljs-keyword': {
|
||||
color: xcodeColors.AccentPurple,
|
||||
},
|
||||
'hljs-selector-tag': {
|
||||
color: xcodeColors.AccentPurple,
|
||||
},
|
||||
'hljs-literal': {
|
||||
color: xcodeColors.AccentPurple,
|
||||
},
|
||||
'hljs-name': {
|
||||
color: xcodeColors.AccentPurple,
|
||||
},
|
||||
'hljs-variable': {
|
||||
color: xcodeColors.AccentCyan,
|
||||
},
|
||||
'hljs-template-variable': {
|
||||
color: xcodeColors.AccentCyan,
|
||||
},
|
||||
'hljs-code': {
|
||||
color: xcodeColors.AccentRed,
|
||||
},
|
||||
'hljs-string': {
|
||||
color: xcodeColors.AccentRed,
|
||||
},
|
||||
'hljs-meta-string': {
|
||||
color: xcodeColors.AccentRed,
|
||||
},
|
||||
'hljs-regexp': {
|
||||
color: xcodeColors.LightBlue,
|
||||
},
|
||||
'hljs-link': {
|
||||
color: xcodeColors.LightBlue,
|
||||
},
|
||||
'hljs-title': {
|
||||
color: xcodeColors.AccentBlue,
|
||||
},
|
||||
'hljs-symbol': {
|
||||
color: xcodeColors.AccentBlue,
|
||||
},
|
||||
'hljs-bullet': {
|
||||
color: xcodeColors.AccentBlue,
|
||||
},
|
||||
'hljs-number': {
|
||||
color: xcodeColors.AccentBlue,
|
||||
},
|
||||
'hljs-section': {
|
||||
color: xcodeColors.AccentYellow,
|
||||
},
|
||||
'hljs-meta': {
|
||||
color: xcodeColors.AccentYellow,
|
||||
},
|
||||
'hljs-class .hljs-title': {
|
||||
color: xcodeColors.AccentPurple,
|
||||
},
|
||||
'hljs-type': {
|
||||
color: xcodeColors.AccentPurple,
|
||||
},
|
||||
'hljs-built_in': {
|
||||
color: xcodeColors.AccentPurple,
|
||||
},
|
||||
'hljs-builtin-name': {
|
||||
color: xcodeColors.AccentPurple,
|
||||
},
|
||||
'hljs-params': {
|
||||
color: xcodeColors.AccentPurple,
|
||||
},
|
||||
'hljs-attr': {
|
||||
color: xcodeColors.AccentYellow,
|
||||
},
|
||||
'hljs-subst': {
|
||||
color: xcodeColors.Foreground,
|
||||
},
|
||||
'hljs-formula': {
|
||||
backgroundColor: '#eee',
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-addition': {
|
||||
backgroundColor: '#baeeba',
|
||||
},
|
||||
'hljs-deletion': {
|
||||
backgroundColor: '#ffc8bd',
|
||||
},
|
||||
'hljs-selector-id': {
|
||||
color: xcodeColors.AccentYellow,
|
||||
},
|
||||
'hljs-selector-class': {
|
||||
color: xcodeColors.AccentYellow,
|
||||
},
|
||||
'hljs-doctag': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-strong': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
'hljs-emphasis': {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
},
|
||||
xcodeColors,
|
||||
);
|
||||
Reference in New Issue
Block a user