typescript, color changes

Author: mdo

index.d.ts

@@ -0,0 +1,36 @@
+export interface Theme {
+  $schema?: string;
+  name: string;
+  type: 'light' | 'dark';
+  colors: Record<string, string>;
+  semanticHighlighting?: boolean;
+  semanticTokenColors?: Record<string, any>;
+  tokenColors: Array<{
+    name?: string;
+    scope?: string | string[];
+    settings: {
+      foreground?: string;
+      background?: string;
+      fontStyle?: string;
+    };
+  }>;
+  // Shiki compatibility
+  settings?: Array<{
+    settings: {
+      foreground?: string;
+      background?: string;
+    };
+  }>;
+}
+
+export const bootstrapLight: Theme;
+export const bootstrapDark: Theme;
+export const bootstrapLightVibrant: Theme;
+export const bootstrapDarkVibrant: Theme;
+
+export const themes: {
+  light: Theme;
+  dark: Theme;
+  lightVibrant: Theme;
+  darkVibrant: Theme;
+};

index.js

@@ -1,7 +1,9 @@
-export { default as bootstrapLight } from './themes/bootstrap-light.json' with { type: 'json' };
-export { default as bootstrapDark } from './themes/bootstrap-dark.json' with { type: 'json' };
-export { default as bootstrapLightVibrant } from './themes/bootstrap-light-vibrant.json' with { type: 'json' };
-export { default as bootstrapDarkVibrant } from './themes/bootstrap-dark-vibrant.json' with { type: 'json' };
+import bootstrapLight from './themes/bootstrap-light.json' with { type: 'json' };
+import bootstrapDark from './themes/bootstrap-dark.json' with { type: 'json' };
+import bootstrapLightVibrant from './themes/bootstrap-light-vibrant.json' with { type: 'json' };
+import bootstrapDarkVibrant from './themes/bootstrap-dark-vibrant.json' with { type: 'json' };
+
+export { bootstrapLight, bootstrapDark, bootstrapLightVibrant, bootstrapDarkVibrant };
 
 export const themes = {
   light: bootstrapLight,

package.json

@@ -2,7 +2,7 @@
   "name": "bootstrap-vscode-theme",
   "displayName": "Bootstrap Theme",
   "description": "Bootstrap theme for Shiki, VS Code, and more",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "publisher": "bootstrap",
   "icon": "icon.png",
   "galleryBanner": {
@@ -62,12 +62,17 @@
     "prepublishOnly": "npm run build"
   },
   "type": "module",
+  "types": "./index.d.ts",
   "exports": {
-    ".": "./index.js",
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
     "./themes/*.json": "./themes/*.json"
   },
   "files": [
     "index.js",
+    "index.d.ts",
     "themes/",
     "icon.png",
     "README.md",

src/palette.ts

@@ -290,24 +290,24 @@ export const light: Roles = {
   },
   syntax: {
     comment: gray["600"],
-    string: green["600"],
-    number: cyan["600"],
-    keyword: pink["500"],
+    string: green["600"],          // Green for strings
+    number: blue["600"],            // Blue for numbers
+    keyword: purple["600"],         // Purple for keywords (import, export, const, etc.)
     regexp: teal["600"],
-    func: indigo["500"],
-    type: violet["500"],
-    variable: orange["600"],
+    func: blue["600"],              // Blue for functions
+    type: cyan["700"],              // Cyan/teal for types
+    variable: gray["800"],          // Darker gray for variables (more neutral)
     // Extended token types
-    operator: cyan["500"],
+    operator: purple["600"],        // Purple for operators
     punctuation: gray["700"],
-    constant: yellow["600"],
-    parameter: gray["700"],
-    namespace: yellow["600"],
-    decorator: blue["500"],
+    constant: blue["600"],          // Blue for constants
+    parameter: gray["800"],         // Darker gray for parameters
+    namespace: cyan["700"],         // Cyan for namespaces
+    decorator: purple["600"],       // Purple for decorators
     escape: cyan["600"],
     invalid: red["500"],
-    tag: red["600"],
-    attribute: teal["600"]
+    tag: pink["600"],               // Pink for HTML tags
+    attribute: cyan["700"]          // Cyan for attributes
   },
   ansi: {
     black: gray["980"],
@@ -367,24 +367,24 @@ export const dark: Roles = {
   },
   syntax: {
     comment: gray["600"],
-    string: green["400"],
-    number: cyan["400"],
-    keyword: pink["400"],
+    string: indigo["300"],         // Indigo for strings/attribute values (like "button", "btn")
+    number: cyan["400"],           // Cyan for numbers
+    keyword: purple["400"],        // Purple for keywords (like @include, var, rgba)
     regexp: teal["400"],
-    func: indigo["400"],
-    type: violet["400"],
-    variable: orange["400"],
+    func: cyan["400"],             // Cyan for functions
+    type: teal["400"],             // Teal for types
+    variable: cyan["300"],         // Light cyan for variables
     // Extended token types
-    operator: cyan["500"],
-    punctuation: gray["700"],
-    constant: yellow["400"],
-    parameter: gray["400"],
-    namespace: yellow["500"],
-    decorator: blue["400"],
+    operator: purple["400"],       // Purple for operators
+    punctuation: gray["400"],      // Lighter punctuation
+    constant: cyan["400"],         // Cyan for constants
+    parameter: cyan["300"],        // Light cyan for parameters
+    namespace: teal["400"],        // Teal for namespaces
+    decorator: purple["400"],      // Purple for decorators
     escape: cyan["400"],
     invalid: red["400"],
-    tag: red["400"],
-    attribute: teal["400"]
+    tag: cyan["400"],              // Cyan for HTML tags (like <button>)
+    attribute: teal["400"]         // Teal for attributes (like type, class, disabled)
   },
   ansi: {
     black: gray["1000"],

src/theme.ts

@@ -146,6 +146,8 @@ export function makeTheme(name: string, kind: "light"|"dark", c: Roles): VSCodeT
       // ========================================
       { scope: ["comment","punctuation.definition.comment"], settings: { foreground: c.syntax.comment } },
       { scope: "comment markup.link", settings: { foreground: c.syntax.comment } },
+      { scope: "comment.line.double-slash", settings: { foreground: c.syntax.comment } },
+      { scope: ["comment.line.scss","comment.block.scss","comment.line.css","comment.block.css"], settings: { foreground: c.syntax.comment } },
 
       // ========================================
       // STRINGS