fix: color for sidebar

meetio-theme · Apr 28, 2021 · 3c47821 · 3c47821
1 parent 515f5b1
commit 3c47821
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 42 deletions.
diff --git a/Meetio Theme - Hight Contrast.sublime-theme → Meetio Theme Hight Contrast.sublime-theme b/Meetio Theme - Hight Contrast.sublime-theme → Meetio Theme Hight Contrast.sublime-theme
@@ -47,7 +47,7 @@
             0.1
         ],
         "panelControlBackground": "var(background)",
-        "panelControlBorder": "color(var(panelControlBackground) blend(var(foreground) 90%))",
+        "panelControlBorder": "var(borderContrast)",
         "panelPathRowFontSize": "var(fontSizeSm)",
         "panelPathRowFontItalic": true,
         "panelPathRowColor": "var(foreground)",
@@ -57,7 +57,7 @@
         ],
         "panelRowFontSize": "var(fontSizeMd)",
         "panelRowBackground": "var(background)",
-        "panelRowColor": "color(#455A64 l(+ 20%))",
+        "panelRowColor": "color(var(background) blend(var(foreground) 30%))",
         "panelRowSelectedBackground": [
             "foreground",
             0.1
@@ -82,8 +82,8 @@
             12,
             8
         ],
-        "sidebarBackground": "color(var(background) blend(var(foreground) 96%))",
-        "sidebarBorder": "color(var(sidebarBackground) blend(var(foreground) 90%))",
+        "sidebarBackground": "var(backgroundContrast)",
+        "sidebarBorder": "var(borderContrast)",
         "sidebarHeadingFontSize": "var(fontSizeSm)",
         "sidebarLabelFontSize": "var(fontSizeMd)",
         "sidebarLabelPadding": [
@@ -92,7 +92,7 @@
         ],
         "sidebarIndent": 20,
         "sidebarIndentOffset": 14,
-        "sidebarLabelColor": "color(#455A64 l(+ 20%))",
+        "sidebarLabelColor": "color(var(background) blend(var(foreground) 30%))",
         "sidebarLabelColorHover": "var(foreground)",
         "sidebarLabelSelectedBackground": [
             "foreground",
@@ -110,9 +110,9 @@
         "sidebarIconFolderColor": "var(sidebarLabelColor)",
         "sidebarIconFolderExpandedColor": "var(sidebarLabelExpandableColor)",
         "sidebarIconFileSize": 7,
-        "statusbarBackground": "color(var(background) blend(var(foreground) 96%))",
-        "statusBarBorder": "color(var(statusbarBackground) blend(var(foreground) 90%))",
-        "statusbarLabelColor": "color(#455A64 l(+ 20%))",
+        "statusbarBackground": "var(backgroundContrast)",
+        "statusBarBorder": "var(borderContrast)",
+        "statusbarLabelColor": "color(var(background) blend(var(foreground) 30%))",
         "statusbarIconColor": "var(statusbarLabelColor)",
         "statusbarLabelBold": false,
         "statusbarLabelFontSize": "var(fontSizeSm)",
@@ -129,7 +129,7 @@
             0.5
         ],
         "tabBackground": "var(background)",
-        "tabBorder": "color(var(tabBackground) blend(var(foreground) 90%))",
+        "tabBorder": "var(borderContrast)",
         "tabBackgroundSheetModifier": "blend(var(accent) 95%)",
         "tabSelectedBorderColor": "var(accent)",
         "tabSelectedBorderSize": [
@@ -153,8 +153,8 @@
         ],
         "tabCloseSelectedColor": "var(foreground)",
         "tabCloseHoverColor": "var(accent)",
-        "titleBarBackground": "color(var(background) blend(var(foreground) 96%))",
-        "titleBarColor": "color(#455A64 l(+ 20%))",
+        "titleBarBackground": "var(backgroundContrast)",
+        "titleBarColor": "color(var(background) blend(var(foreground) 30%))",
         "tooltipBackground": "var(foreground)",
         "tooltipLabelColor": "var(background)",
         "gridLayoutBorderColor": "color(var(accent) blenda(#455A64 30%))",
@@ -173,11 +173,13 @@
         "vcsIgnored": "color(var(sidebarLabelColor) a(0.5))",
         "vcsUntracked": "color(darkseagreen a(0.9))",
         "vcsModified": "color(cornflowerblue a(0.9))",
-        "vcsMissing": "color(crimson a(0.9))",
+        "vcsMissing": "color(sandybrown a(0.9))",
         "vcsAdded": "color(darkseagreen a(0.9))",
         "vcsStaged": "color(goldenrod a(0.9))",
         "vcsDeleted": "color(red a(0.9))",
-        "vcsUnmerged": "color(slateblue a(0.9))"
+        "vcsUnmerged": "color(slateblue a(0.9))",
+        "backgroundContrast": "color(var(foreground) blend(var(background) 5%)))",
+        "borderContrast": "color(var(foreground) blend(var(background) 15%)))"
     },
     "rules": [
         {

diff --git a/Meetio Theme.hidden-theme b/Meetio Theme.hidden-theme
@@ -56,7 +56,7 @@
         ],
         "panelRowFontSize": "var(fontSizeMd)",
         "panelRowBackground": "var(background)",
-        "panelRowColor": "color(#455A64 l(+ 20%))",
+        "panelRowColor": "color(var(background) blend(var(foreground) 30%))",
         "panelRowSelectedBackground": [
             "foreground",
             0.1
@@ -91,7 +91,7 @@
         ],
         "sidebarIndent": 20,
         "sidebarIndentOffset": 14,
-        "sidebarLabelColor": "color(#455A64 l(+ 20%))",
+        "sidebarLabelColor": "color(var(background) blend(var(foreground) 30%))",
         "sidebarLabelColorHover": "var(foreground)",
         "sidebarLabelSelectedBackground": [
             "foreground",
@@ -111,7 +111,7 @@
         "sidebarIconFileSize": 7,
         "statusbarBackground": "var(background)",
         "statusBarBorder": "var(statusbarBackground)",
-        "statusbarLabelColor": "color(#455A64 l(+ 20%))",
+        "statusbarLabelColor": "color(var(background) blend(var(foreground) 30%))",
         "statusbarIconColor": "var(statusbarLabelColor)",
         "statusbarLabelBold": false,
         "statusbarLabelFontSize": "var(fontSizeSm)",
@@ -153,7 +153,7 @@
         "tabCloseSelectedColor": "var(foreground)",
         "tabCloseHoverColor": "var(accent)",
         "titleBarBackground": "var(background)",
-        "titleBarColor": "color(#455A64 l(+ 20%))",
+        "titleBarColor": "color(var(background) blend(var(foreground) 30%))",
         "tooltipBackground": "var(foreground)",
         "tooltipLabelColor": "var(background)",
         "gridLayoutBorderColor": "color(var(accent) blenda(#455A64 30%))",
@@ -172,7 +172,7 @@
         "vcsIgnored": "color(var(sidebarLabelColor) a(0.5))",
         "vcsUntracked": "color(darkseagreen a(0.9))",
         "vcsModified": "color(cornflowerblue a(0.9))",
-        "vcsMissing": "color(crimson a(0.9))",
+        "vcsMissing": "color(sandybrown a(0.9))",
         "vcsAdded": "color(darkseagreen a(0.9))",
         "vcsStaged": "color(goldenrod a(0.9))",
         "vcsDeleted": "color(red a(0.9))",

diff --git a/Meetio Theme.sublime-theme b/Meetio Theme.sublime-theme
@@ -57,7 +57,7 @@
         ],
         "panelRowFontSize": "var(fontSizeMd)",
         "panelRowBackground": "var(background)",
-        "panelRowColor": "color(#455A64 l(+ 20%))",
+        "panelRowColor": "color(var(background) blend(var(foreground) 30%))",
         "panelRowSelectedBackground": [
             "foreground",
             0.1
@@ -92,7 +92,7 @@
         ],
         "sidebarIndent": 20,
         "sidebarIndentOffset": 14,
-        "sidebarLabelColor": "color(#455A64 l(+ 20%))",
+        "sidebarLabelColor": "color(var(background) blend(var(foreground) 30%))",
         "sidebarLabelColorHover": "var(foreground)",
         "sidebarLabelSelectedBackground": [
             "foreground",
@@ -112,7 +112,7 @@
         "sidebarIconFileSize": 7,
         "statusbarBackground": "var(background)",
         "statusBarBorder": "var(statusbarBackground)",
-        "statusbarLabelColor": "color(#455A64 l(+ 20%))",
+        "statusbarLabelColor": "color(var(background) blend(var(foreground) 30%))",
         "statusbarIconColor": "var(statusbarLabelColor)",
         "statusbarLabelBold": false,
         "statusbarLabelFontSize": "var(fontSizeSm)",
@@ -154,7 +154,7 @@
         "tabCloseSelectedColor": "var(foreground)",
         "tabCloseHoverColor": "var(accent)",
         "titleBarBackground": "var(background)",
-        "titleBarColor": "color(#455A64 l(+ 20%))",
+        "titleBarColor": "color(var(background) blend(var(foreground) 30%))",
         "tooltipBackground": "var(foreground)",
         "tooltipLabelColor": "var(background)",
         "gridLayoutBorderColor": "color(var(accent) blenda(#455A64 30%))",
@@ -173,7 +173,7 @@
         "vcsIgnored": "color(var(sidebarLabelColor) a(0.5))",
         "vcsUntracked": "color(darkseagreen a(0.9))",
         "vcsModified": "color(cornflowerblue a(0.9))",
-        "vcsMissing": "color(crimson a(0.9))",
+        "vcsMissing": "color(sandybrown a(0.9))",
         "vcsAdded": "color(darkseagreen a(0.9))",
         "vcsStaged": "color(goldenrod a(0.9))",
         "vcsDeleted": "color(red a(0.9))",

diff --git a/src/index.ts b/src/index.ts
@@ -51,7 +51,7 @@ import { generateTheme, getThemeHidden, getThemeDefault, getThemeHighContrast }
         hidden: false,
     },
     {
-        name: 'Meetio Theme - Hight Contrast',
+        name: 'Meetio Theme Hight Contrast',
         settings: getThemeHighContrast(),
         hidden: false,
     },

diff --git a/src/theme.ts b/src/theme.ts
@@ -38,7 +38,7 @@ export const variables: ThemeVariables = {
     panelRowPadding: [10, 10],
     panelRowFontSize: 'var(fontSizeMd)',
     panelRowBackground: 'var(background)',
-    panelRowColor: 'color(#455A64 l(+ 20%))',
+    panelRowColor: 'color(var(background) blend(var(foreground) 30%))',
     panelRowSelectedBackground: ['foreground', 0.1],
     panelRowSelectedColor: 'var(foreground)',
     panelRowMatchColor: 'var(accent)',
@@ -54,7 +54,7 @@ export const variables: ThemeVariables = {
     sidebarLabelPadding: [14, 3],
     sidebarIndent: 20,
     sidebarIndentOffset: 14,
-    sidebarLabelColor: 'color(#455A64 l(+ 20%))',
+    sidebarLabelColor: 'color(var(background) blend(var(foreground) 30%))',
     sidebarLabelColorHover: 'var(foreground)',
     sidebarLabelSelectedBackground: ['foreground', 0.06],
     sidebarLabelSelectedColor: 'var(accent)',
@@ -66,7 +66,7 @@ export const variables: ThemeVariables = {
     sidebarIconFileSize: 7,
     statusbarBackground: 'var(background)',
     statusBarBorder: 'var(statusbarBackground)',
-    statusbarLabelColor: 'color(#455A64 l(+ 20%))',
+    statusbarLabelColor: 'color(var(background) blend(var(foreground) 30%))',
     statusbarIconColor: 'var(statusbarLabelColor)',
     statusbarLabelBold: false,
     statusbarLabelFontSize: 'var(fontSizeSm)',
@@ -92,7 +92,7 @@ export const variables: ThemeVariables = {
     tabCloseSelectedColor: 'var(foreground)',
     tabCloseHoverColor: 'var(accent)',
     titleBarBackground: 'var(background)',
-    titleBarColor: 'color(#455A64 l(+ 20%))',
+    titleBarColor: 'color(var(background) blend(var(foreground) 30%))',
     tooltipBackground: 'var(foreground)',
     tooltipLabelColor: 'var(background)',
     gridLayoutBorderColor: 'color(var(accent) blenda(#455A64 30%))',
@@ -109,7 +109,7 @@ export const variables: ThemeVariables = {
     // when a file has been changed on disk
     vcsModified: 'color(cornflowerblue a(0.9))',
     // when one or more of a folder‘s files is no longer on disk
-    vcsMissing: 'color(crimson a(0.9))',
+    vcsMissing: 'color(sandybrown a(0.9))',
     // when a new file has been newly added to the index
     vcsAdded:  'color(darkseagreen a(0.9))',
     // when a modified file has been added to the index
@@ -2280,19 +2280,15 @@ export function getThemeHighContrast(): ThemeSetting {
         extends: 'Meetio Theme.hidden-theme',
         variables: {
             ...variables,
-            titleBarBackground:
-                'color(var(background) blend(var(foreground) 96%))',
-            tabBorder: 'color(var(tabBackground) blend(var(foreground) 90%))',
-            sidebarBackground:
-                'color(var(background) blend(var(foreground) 96%))',
-            sidebarBorder:
-                'color(var(sidebarBackground) blend(var(foreground) 90%))',
-            statusbarBackground:
-                'color(var(background) blend(var(foreground) 96%))',
-            statusBarBorder:
-                'color(var(statusbarBackground) blend(var(foreground) 90%))',
-            panelControlBorder:
-                'color(var(panelControlBackground) blend(var(foreground) 90%))',
+            backgroundContrast: 'color(var(foreground) blend(var(background) 5%)))',
+            borderContrast: 'color(var(foreground) blend(var(background) 15%)))',
+            titleBarBackground: 'var(backgroundContrast)',
+            sidebarBackground: 'var(backgroundContrast)',
+            statusbarBackground: 'var(backgroundContrast)',
+            sidebarBorder: 'var(borderContrast)',
+            tabBorder: 'var(borderContrast)',
+            statusBarBorder: 'var(borderContrast)',
+            panelControlBorder: 'var(borderContrast)',
         },
         rules,
     };