fss-link 1.0.40 → 1.0.45

package/dist/ui/themes/qwen-light.ts

@@ -0,0 +1,144 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// ⚠️ DEPRECATED: QWEN CONTAMINATION - MARKED FOR REMOVAL
+// This file contains qwen branding contamination and should not be used.
+// FSS Link uses FSS-branded themes only.
+// TODO: Remove this file in next major version cleanup
+
+import { type ColorsTheme, Theme } from './theme.js';
+import { lightSemanticColors } from './semantic-tokens.js';
+
+const qwenLightColors: ColorsTheme = {
+  type: 'light',
+  Background: '#f8f9fa',
+  Foreground: '#5c6166',
+  LightBlue: '#55b4d4',
+  AccentBlue: '#399ee6',
+  AccentPurple: '#a37acc',
+  AccentCyan: '#4cbf99',
+  AccentGreen: '#86b300',
+  AccentYellow: '#f2ae49',
+  AccentRed: '#f07171',
+  DiffAdded: '#86b300',
+  DiffRemoved: '#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,
+  lightSemanticColors,
+);

package/dist/ui/themes/semantic-tokens.ts

@@ -0,0 +1,127 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { lightTheme, darkTheme, ansiTheme } from './theme.js';
+
+export interface SemanticColors {
+  text: {
+    primary: string;
+    secondary: string;
+    link: string;
+    accent: string;
+  };
+  background: {
+    primary: string;
+    diff: {
+      added: string;
+      removed: string;
+    };
+  };
+  border: {
+    default: string;
+    focused: string;
+  };
+  ui: {
+    comment: string;
+    symbol: string;
+    gradient: string[] | undefined;
+  };
+  status: {
+    error: string;
+    success: string;
+    warning: string;
+  };
+}
+
+export const lightSemanticColors: SemanticColors = {
+  text: {
+    primary: lightTheme.Foreground,
+    secondary: lightTheme.Gray,
+    link: lightTheme.AccentBlue,
+    accent: lightTheme.AccentPurple,
+  },
+  background: {
+    primary: lightTheme.Background,
+    diff: {
+      added: lightTheme.DiffAdded,
+      removed: lightTheme.DiffRemoved,
+    },
+  },
+  border: {
+    default: lightTheme.Gray,
+    focused: lightTheme.AccentBlue,
+  },
+  ui: {
+    comment: lightTheme.Comment,
+    symbol: lightTheme.Gray,
+    gradient: lightTheme.GradientColors,
+  },
+  status: {
+    error: lightTheme.AccentRed,
+    success: lightTheme.AccentGreen,
+    warning: lightTheme.AccentYellow,
+  },
+};
+
+export const darkSemanticColors: SemanticColors = {
+  text: {
+    primary: darkTheme.Foreground,
+    secondary: darkTheme.Gray,
+    link: darkTheme.AccentBlue,
+    accent: darkTheme.AccentPurple,
+  },
+  background: {
+    primary: darkTheme.Background,
+    diff: {
+      added: darkTheme.DiffAdded,
+      removed: darkTheme.DiffRemoved,
+    },
+  },
+  border: {
+    default: darkTheme.Gray,
+    focused: darkTheme.AccentBlue,
+  },
+  ui: {
+    comment: darkTheme.Comment,
+    symbol: darkTheme.Gray,
+    gradient: darkTheme.GradientColors,
+  },
+  status: {
+    error: darkTheme.AccentRed,
+    success: darkTheme.AccentGreen,
+    warning: darkTheme.AccentYellow,
+  },
+};
+
+export const ansiSemanticColors: SemanticColors = {
+  text: {
+    primary: ansiTheme.Foreground,
+    secondary: ansiTheme.Gray,
+    link: ansiTheme.AccentBlue,
+    accent: ansiTheme.AccentPurple,
+  },
+  background: {
+    primary: ansiTheme.Background,
+    diff: {
+      added: ansiTheme.DiffAdded,
+      removed: ansiTheme.DiffRemoved,
+    },
+  },
+  border: {
+    default: ansiTheme.Gray,
+    focused: ansiTheme.AccentBlue,
+  },
+  ui: {
+    comment: ansiTheme.Comment,
+    symbol: ansiTheme.Gray,
+    gradient: ansiTheme.GradientColors,
+  },
+  status: {
+    error: ansiTheme.AccentRed,
+    success: ansiTheme.AccentGreen,
+    warning: ansiTheme.AccentYellow,
+  },
+};

package/dist/ui/themes/shades-of-purple.ts

@@ -0,0 +1,352 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Shades of Purple Theme — for Highlight.js.
+ * @author Ahmad Awais <https://twitter.com/mrahmadawais/>
+ */
+import { type ColorsTheme, Theme } from './theme.js';
+import { darkSemanticColors } from './semantic-tokens.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
+  DiffAdded: '#383E45',
+  DiffRemoved: '#572244',
+  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,
+  darkSemanticColors,
+);

package/dist/ui/themes/theme-manager.test.ts

@@ -0,0 +1,99 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Patch: Unset NO_COLOR at the very top before any imports
+if (process.env['NO_COLOR'] !== undefined) {
+  delete process.env['NO_COLOR'];
+}
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { themeManager, DEFAULT_THEME } from './theme-manager.js';
+import { CustomTheme } from './theme.js';
+
+const validCustomTheme: CustomTheme = {
+  type: 'custom',
+  name: 'MyCustomTheme',
+  Background: '#000000',
+  Foreground: '#ffffff',
+  LightBlue: '#89BDCD',
+  AccentBlue: '#3B82F6',
+  AccentPurple: '#8B5CF6',
+  AccentCyan: '#06B6D4',
+  AccentGreen: '#3CA84B',
+  AccentYellow: 'yellow',
+  AccentRed: 'red',
+  DiffAdded: 'green',
+  DiffRemoved: 'red',
+  Comment: 'gray',
+  Gray: 'gray',
+};
+
+describe('ThemeManager', () => {
+  beforeEach(() => {
+    // Reset themeManager state
+    themeManager.loadCustomThemes({});
+    themeManager.setActiveTheme(DEFAULT_THEME.name);
+  });
+
+  it('should load valid custom themes', () => {
+    themeManager.loadCustomThemes({ MyCustomTheme: validCustomTheme });
+    expect(themeManager.getCustomThemeNames()).toContain('MyCustomTheme');
+    expect(themeManager.isCustomTheme('MyCustomTheme')).toBe(true);
+  });
+
+  it('should set and get the active theme', () => {
+    expect(themeManager.getActiveTheme().name).toBe(DEFAULT_THEME.name);
+    themeManager.setActiveTheme('Ayu');
+    expect(themeManager.getActiveTheme().name).toBe('Ayu');
+  });
+
+  it('should set and get a custom active theme', () => {
+    themeManager.loadCustomThemes({ MyCustomTheme: validCustomTheme });
+    themeManager.setActiveTheme('MyCustomTheme');
+    expect(themeManager.getActiveTheme().name).toBe('MyCustomTheme');
+  });
+
+  it('should return false when setting a non-existent theme', () => {
+    expect(themeManager.setActiveTheme('NonExistentTheme')).toBe(false);
+    expect(themeManager.getActiveTheme().name).toBe(DEFAULT_THEME.name);
+  });
+
+  it('should list available themes including custom themes', () => {
+    themeManager.loadCustomThemes({ MyCustomTheme: validCustomTheme });
+    const available = themeManager.getAvailableThemes();
+    expect(
+      available.some(
+        (t: { name: string; isCustom?: boolean }) =>
+          t.name === 'MyCustomTheme' && t.isCustom,
+      ),
+    ).toBe(true);
+  });
+
+  it('should get a theme by name', () => {
+    expect(themeManager.getTheme('Ayu')).toBeDefined();
+    themeManager.loadCustomThemes({ MyCustomTheme: validCustomTheme });
+    expect(themeManager.getTheme('MyCustomTheme')).toBeDefined();
+  });
+
+  it('should fall back to default theme if active theme is invalid', () => {
+    (themeManager as unknown as { activeTheme: unknown }).activeTheme = {
+      name: 'NonExistent',
+      type: 'custom',
+    };
+    expect(themeManager.getActiveTheme().name).toBe(DEFAULT_THEME.name);
+  });
+
+  it('should return NoColorTheme if NO_COLOR is set', () => {
+    const original = process.env['NO_COLOR'];
+    process.env['NO_COLOR'] = '1';
+    expect(themeManager.getActiveTheme().name).toBe('NoColor');
+    if (original === undefined) {
+      delete process.env['NO_COLOR'];
+    } else {
+      process.env['NO_COLOR'] = original;
+    }
+  });
+});