feat: changes color scheme and utilizes semantic highlighting

.changeset/chilly-zoos-fetch.md

@@ -0,0 +1,5 @@
+---
+"consolvis-vscode-theme": major
+---
+
+Utilizes semantic highlighting and adjust color scheme

.github/workflows/release.yml

@@ -11,7 +11,7 @@ jobs:
  runs-on: ubuntu-latest
  steps:
  - name: Checkout Repo
- uses: actions/checkout@v3
+ uses: actions/checkout@v4
 
  - name: Setup Bun
  uses: oven-sh/setup-bun@v1

.gitignore

@@ -172,4 +172,4 @@ dist
 
 /themes/consolvis-vscode-theme.vsix
 
-.DS_Store
+.DS_Store

.vscode/settings.json

@@ -0,0 +1 @@
+{}

README.md

@@ -32,10 +32,6 @@ We plan to update this theme and make it better. Your feedback would be valuable
 
 ![Sample 3](https://raw.githubusercontent.com/Consolvis/consolvis-vscode-theme/main/assets/sample3.png)
 
-### TSX
-
-![Sample 4](https://raw.githubusercontent.com/Consolvis/consolvis-vscode-theme/main/assets/sample4.png)
-
 <hr>
 
 ## Installation

package.json

@@ -1,61 +1,59 @@
 {
- "name": "consolvis-vscode-theme",
- "displayName": "Consolvis Dark Theme",
- "description": "Our dark theme with orange accents",
- "version": "0.0.2",
- "publisher": "Consolvis",
- "author": "Tobias Steckenborn <[email protected]> (https://consolvis.de)",
- "icon": "./assets/consolvis_logo_dark.png",
- "repository": {
- "type": "git",
- "url": "https://github.com/Consolvis/consolvis-vscode-theme"
- },
- "engines": {
- "vscode": "^1.77.0"
- },
- "categories": [
- "Themes"
- ],
- "keywords": [
- "theme",
- "dark theme",
- "consolvis theme",
- "dark orange theme",
- "dark gray theme",
- "dark grey theme"
- ],
- "module": "index.ts",
- "type": "module",
- "contributes": {
- "themes": [
- {
- "label": "Consolvis Dark Theme",
- "uiTheme": "vs-dark",
- "path": "./themes/consolvis-dark-theme.json"
- }
- ]
- },
- "scripts": {
- "start": "bun ./src/index.ts",
- "watch": "bun --watch ./src/index.ts",
- "format": "prettier --write .",
- "package": "vsce package -o ./themes/consolvis-vscode-theme.vsix",
- "prepublishOnly": "bun start",
- "publish": "vsce publish",
- "changeset": "changeset",
- "tag": "changeset tag",
- "version": "changeset version",
- "release": "bun start && changeset publish"
- },
- "devDependencies": {
- "bun-types": "latest",
- "prettier": "3.0.0",
- "@changesets/changelog-github": "^0.4.8",
- "@changesets/cli": "^2.26.2",
- "@types/chroma-js": "^2.4.0",
- "typescript": "^5.1.6",
- "chroma-js": "^2.4.2",
- "@vscode/vsce": "^2.19.0"
- },
- "dependencies": {}
+ "name": "consolvis-vscode-theme",
+ "displayName": "Consolvis Dark Theme",
+ "description": "Our dark theme with orange accents",
+ "version": "0.0.2",
+ "publisher": "Consolvis",
+ "author": "Tobias Steckenborn <[email protected]> (https://consolvis.de)",
+ "icon": "./assets/consolvis_logo_dark.png",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/Consolvis/consolvis-vscode-theme"
+ },
+ "engines": {
+ "vscode": "^1.88.0"
+ },
+ "categories": ["Themes"],
+ "keywords": [
+ "theme",
+ "dark theme",
+ "consolvis theme",
+ "dark orange theme",
+ "dark gray theme",
+ "dark grey theme"
+ ],
+ "contributes": {
+ "themes": [
+ {
+ "label": "Consolvis Dark Theme",
+ "uiTheme": "vs-dark",
+ "path": "./themes/consolvis-dark-theme.json"
+ }
+ ],
+ "configuration": {
+ "title": "Consolvis Dark Theme"
+ }
+ },
+ "scripts": {
+ "start": "bun ./src/index.ts",
+ "package": "vsce package -o ./themes/consolvis-vscode-theme.vsix",
+ "prepublishOnly": "bun start",
+ "publish": "vsce publish",
+ "changeset": "changeset",
+ "tag": "changeset tag",
+ "version": "changeset version",
+ "release": "bun start && changeset publish"
+ },
+ "devDependencies": {
+ "@changesets/changelog-github": "^0.5.0",
+ "@changesets/cli": "^2.27.1",
+ "@types/chroma-js": "^2.4.4",
+ "@vscode/vsce": "^2.25.0",
+ "@types/vscode": "^1.88.0",
+ "bun-types": "^1.1.4",
+ "chroma-js": "^2.4.2",
+ "@biomejs/biome": "1.7.0",
+ "typescript": "^5.4.5"
+ },
+ "dependencies": {}
 }

src/colors.ts

@@ -1,107 +1,130 @@
-export default {
- accent: "#fe420d",
- neutral: [
- "#fafafa",
- "#f5f5f5",
- "#e5e5e5",
- "#d4d4d4",
- "#a3a3a3",
- "#737373",
- "#525252",
- "#404040",
- "#262626",
- "#171717",
- "#0a0a0a",
- ],
- gray: [
- "#f9fafb",
- "#f3f4f6",
- "#e5e7eb",
- "#d1d5db",
- "#9ca3af",
- "#6b7280",
- "#4b5563",
- "#374151",
- "#1f2937",
- "#111827",
- "#030712",
- ],
- cyan: [
- "#ecfeff",
- "#cffafe",
- "#a5f3fc",
- "#67e8f9",
- "#22d3ee",
- "#06b6d4",
- "#0891b2",
- "#0e7490",
- "#155e75",
- "#164e63",
- "#083344",
- ],
- blue: [
- "#eff6ff",
- "#dbeafe",
- "#bfdbfe",
- "#93c5fd",
- "#60a5fa",
- "#3b82f6",
- "#2563eb",
- "#1d4ed8",
- "#1e40af",
- "#1e3a8a",
- "#172554",
- ],
- lime: [
- "#f7fee7",
- "#ecfccb",
- "#d9f99d",
- "#bef264",
- "#a3e635",
- "#84cc16",
- "#65a30d",
- "#4d7c0f",
- "#3f6212",
- "#365314",
- "#1a2e05",
- ],
- amber: [
- "#fffbeb",
- "#fef3c7",
- "#fde68a",
- "#fcd34d",
- "#fbbf24",
- "#f59e0b",
- "#d97706",
- "#b45309",
- "#92400e",
- "#78350f",
- "#451a03",
- ],
- orange: [
- "#fff7ed",
- "#ffedd5",
- "#fed7aa",
- "#fdba74",
- "#fb923c",
- "#f97316",
- "#ea580c",
- "#c2410c",
- "#9a3412",
- "#7c2d12",
- "#431407",
- ],
- red: [
- "#fef2f2",
- "#fee2e2",
- "#fecaca",
- "#fca5a5",
- "#f87171",
- "#ef4444",
- "#dc2626",
- "#b91c1c",
- "#991b1b",
- "#7f1d1d",
- "#450a0a",
- ],
-};
+// Accent Color
+export const ACCENT_ORANGE = "#fe420d";
+
+// Neutral Colors
+export const NEUTRAL_WHITE = "#fafafa";
+export const NEUTRAL_OFF_WHITE = "#f5f5f5";
+export const NEUTRAL_LIGHT_GRAY = "#e5e5e5";
+export const NEUTRAL_GRAY = "#d4d4d4";
+export const NEUTRAL_MID_GRAY = "#a3a3a3";
+export const NEUTRAL_DARK_GRAY = "#737373";
+export const NEUTRAL_DEEP_GRAY = "#525252";
+export const NEUTRAL_DARKER_GRAY = "#404040";
+export const NEUTRAL_ALMOST_BLACK = "#262626";
+export const NEUTRAL_NEAR_BLACK = "#171717";
+export const NEUTRAL_BLACK = "#0a0a0a";
+
+// Gray Colors
+export const GRAY_PALEST = "#f9fafb";
+export const GRAY_PALER = "#f3f4f6";
+export const GRAY_LIGHT = "#e5e7eb";
+export const GRAY_MEDIUM_LIGHT = "#d1d5db";
+export const GRAY_MEDIUM = "#9ca3af";
+export const GRAY_MEDIUM_DARK = "#6b7280";
+export const GRAY_DARK = "#4b5563";
+export const GRAY_DEEP = "#374151";
+export const GRAY_DEEPER = "#1f2937";
+export const GRAY_ALMOST_BLACK = "#111827";
+export const GRAY_BLACK = "#030712";
+
+// Cyan Colors
+export const CYAN_LIGHTEST = "#ecfeff";
+export const CYAN_LIGHTER = "#cffafe";
+export const CYAN_LIGHT = "#a5f3fc";
+export const CYAN_MEDIUM_LIGHT = "#67e8f9";
+export const CYAN_MEDIUM = "#22d3ee";
+export const CYAN_MEDIUM_DARK = "#06b6d4";
+export const CYAN_DARK = "#0891b2";
+export const CYAN_DEEP = "#0e7490";
+export const CYAN_DEEPER = "#155e75";
+export const CYAN_DARKEST = "#164e63";
+export const CYAN_BLACKISH = "#083344";
+
+// Blue Colors
+export const BLUE_LIGHTEST = "#eff6ff";
+export const BLUE_LIGHTER = "#dbeafe";
+export const BLUE_LIGHT = "#bfdbfe";
+export const BLUE_MEDIUM_LIGHT = "#93c5fd";
+export const BLUE_MEDIUM = "#60a5fa";
+export const BLUE_MEDIUM_DARK = "#3b82f6";
+export const BLUE_DARK = "#2563eb";
+export const BLUE_DEEP = "#1d4ed8";
+export const BLUE_DEEPER = "#1e40af";
+export const BLUE_DARKEST = "#1e3a8a";
+export const BLUE_BLACKISH = "#172554";
+
+// Lime Colors
+export const LIME_LIGHTEST = "#f7fee7";
+export const LIME_LIGHTER = "#ecfccb";
+export const LIME_LIGHT = "#d9f99d";
+export const LIME_MEDIUM_LIGHT = "#bef264";
+export const LIME_MEDIUM = "#a3e635";
+export const LIME_MEDIUM_DARK = "#84cc16";
+export const LIME_DARK = "#65a30d";
+export const LIME_DEEP = "#4d7c0f";
+export const LIME_DEEPER = "#3f6212";
+export const LIME_DARKEST = "#365314";
+export const LIME_BLACKISH = "#1a2e05";
+
+// Amber Colors
+export const AMBER_LIGHTEST = "#fffbeb";
+export const AMBER_LIGHTER = "#fef3c7";
+export const AMBER_LIGHT = "#fde68a";
+export const AMBER_MEDIUM_LIGHT = "#fcd34d";
+export const AMBER_MEDIUM = "#fbbf24";
+export const AMBER_MEDIUM_DARK = "#f59e0b";
+export const AMBER_DARK = "#d97706";
+export const AMBER_DEEP = "#b45309";
+export const AMBER_DEEPER = "#92400e";
+export const AMBER_DARKEST = "#78350f";
+export const AMBER_BLACKISH = "#451a03";
+
+// Orange Colors
+export const ORANGE_LIGHTEST = "#fff7ed";
+export const ORANGE_LIGHTER = "#ffedd5";
+export const ORANGE_LIGHT = "#fed7aa";
+export const ORANGE_MEDIUM_LIGHT = "#fdba74";
+export const ORANGE_MEDIUM = "#fb923c";
+export const ORANGE_MEDIUM_DARK = "#f97316";
+export const ORANGE_DARK = "#ea580c";
+export const ORANGE_DEEP = "#c2410c";
+export const ORANGE_DEEPER = "#9a3412";
+export const ORANGE_DARKEST = "#7c2d12";
+export const ORANGE_BLACKISH = "#431407";
+
+// Red Colors
+export const RED_LIGHTEST = "#fef2f2";
+export const RED_LIGHTER = "#fee2e2";
+export const RED_LIGHT = "#fecaca";
+export const RED_MEDIUM_LIGHT = "#fca5a5";
+export const RED_MEDIUM = "#f87171";
+export const RED_MEDIUM_DARK = "#ef4444";
+export const RED_DARK = "#dc2626";
+export const RED_DEEP = "#b91c1c";
+export const RED_DEEPER = "#991b1b";
+export const RED_DARKEST = "#7f1d1d";
+export const RED_BLACKISH = "#450a0a";
+
+export const ERROR_FOREGROUND = "#e45454";
+export const ERROR_BACKGROUND = "#ff6464";
+export const WARNING_FOREGROUND = "#fa973a";
+export const WARNING_BACKGROUND = "#ff942f";
+export const INFO_FOREGROUND = "#00b7e4";
+export const INFO_BACKGROUND = "#00b7e4";
+export const HINT_FOREGROUND = "#2faf64";
+export const HINT_BACKGROUND = "#17a2a2";
+
+export const ADDED_FOREGROUND = LIME_MEDIUM_DARK;
+export const ADDED_BACKGROUND = LIME_LIGHT;
+export const MODIFIED_FOREGROUND = AMBER_MEDIUM_DARK;
+export const MODIFIED_BACKGROUND = AMBER_LIGHT;
+export const DELETED_FOREGROUND = RED_MEDIUM_DARK;
+export const DELETED_BACKGROUND = RED_LIGHT;
+
+export const SUCCESS_FOREGROUND = LIME_MEDIUM_DARK;
+export const SUCCESS_BACKGROUND = LIME_LIGHT;
+export const FAILURE_FOREGROUND = RED_MEDIUM_DARK;
+export const FAILURE_BACKGROUND = RED_LIGHT;
+
+export const TEAL = "#99F6E4";
+export const BLUE = "#38BDF8";