style changes

Author: mProjectsCode

src/ECTheme.ts

@@ -24,29 +24,33 @@ export const EC_THEME: ExpressiveCodeEngineConfig['styleOverrides'] = {
 	uiPaddingInline: 'var(--size-4-4)',
 	uiSelectionBackground: 'var(--text-selection)',
 	uiSelectionForeground: 'var(--text-normal)',
+	gutterBorderColor: 'var(--shiki-gutter-border-color)',
+	gutterBorderWidth: 'var(--shiki-gutter-border-width)',
+	gutterForeground: 'var(--shiki-gutter-text-color)',
+	gutterHighlightForeground: 'var(--shiki-gutter-text-color-highlight)',
 	textMarkers: {
-		delBackground: 'rgba(var(--shiki-highlight-red-rgb), var(--shiki-highlight-opacity))',
-		delBorderColor: 'rgba(var(--shiki-highlight-red-rgb), 1)',
+		delBackground: 'var(--shiki-highlight-red-background)',
+		delBorderColor: 'var(--shiki-highlight-red)',
 		delDiffIndicatorColor: 'rgba(var(--shiki-highlight-red-rgb), 1)',
 		inlineMarkerBorderWidth: 'var(--border-width)',
-		insBackground: 'rgba(var(--shiki-highlight-green-rgb), var(--shiki-highlight-opacity))',
-		insBorderColor: 'rgba(var(--shiki-highlight-green-rgb), 1)',
+		insBackground: 'var(--shiki-highlight-green-background)',
+		insBorderColor: 'var(--shiki-highlight-green)',
 		insDiffIndicatorColor: 'rgba(var(--shiki-highlight-green-rgb), 1)',
 		lineDiffIndicatorMarginLeft: '0.3rem',
 		lineMarkerAccentMargin: '0rem',
 		lineMarkerAccentWidth: '0.15rem',
 		lineMarkerLabelColor: 'white',
 		lineMarkerLabelPaddingInline: '0.2rem',
-		markBackground: 'rgba(var(--shiki-highlight-neutral-rgb), var(--shiki-highlight-opacity))',
-		markBorderColor: 'rgba(var(--shiki-highlight-neutral-rgb), 1)',
+		markBackground: 'var(--shiki-highlight-neutral-background)',
+		markBorderColor: 'var(--shiki-highlight-neutral)',
 	},
 	frames: {
 		editorActiveTabBackground: 'var(--code-background)',
 		editorActiveTabBorderColor: 'transparent',
 		editorActiveTabForeground: 'var(--text-normal)',
 		editorActiveTabIndicatorBottomColor: 'transparent',
 		editorActiveTabIndicatorHeight: '2px',
-		editorActiveTabIndicatorTopColor: 'rgb(var(--shiki-highlight-neutral-rgb), 1)',
+		editorActiveTabIndicatorTopColor: 'var(--shiki-highlight-neutral)',
 		editorBackground: 'var(--code-background)',
 		editorTabBarBackground: 'var(--color-primary)',
 		editorTabBarBorderBottomColor: 'transparent',

styles.css

@@ -15,18 +15,24 @@ body {
 	--shiki-code-block-border-radius: var(--code-radius);
 	--shiki-code-block-border-width: 0px; /* this has to have a unit */
 
-	--shiki-highlight-red-rgb: var(--color-red-rgb);
-	--shiki-highlight-green-rgb: var(--color-green-rgb);
-	--shiki-highlight-neutral-rgb: var(--mono-rgb-100);
+	--shiki-code-block-spacing: var(--p-spacing);
 
-	--shiki-highlight-opacity: 0.1;
+	--shiki-highlight-red: rgba(var(--color-red-rgb), 0.5);
+	--shiki-highlight-green: rgba(var(--color-green-rgb), 0.5);
+	--shiki-highlight-neutral: var(--code-normal);
+	--shiki-highlight-red-background: rgba(var(--color-red-rgb), 0.05);
+	--shiki-highlight-green-background: rgba(var(--color-green-rgb), 0.05);
+	--shiki-highlight-neutral-background: rgba(var(--mono-rgb-100), 0.05);
 
 	--shiki-terminal-dots-color: var(--text-faint);
 
 	--shiki-tooltip-background: var(--background-modifier-message);
 	--shiki-tooltip-text-color: #fafafa;
 
-	--shiki-code-block-spacing: var(--p-spacing);
+	--shiki-gutter-border-color: var(--background-modifier-border);
+	--shiki-gutter-border-width: var(--border-width);
+	--shiki-gutter-text-color: var(--text-faint);
+	--shiki-gutter-text-color-highlight: var(--code-normal);
 }
 
 /* Disable ligatures in code blocks, as they can cause incorrect highlighting */