Yaru: Use colors from Yaru-Dark GTK theme

Background colors were previously variations of the title bar gray and
the grays from https://design.ubuntu.com/brand/colour-palette/. Now, the
sidebar and most of the window body are colored based on the Yaru-Dark
version of the Settings app. The editor itself is slightly darker for
improved contrast.

2 files changed, 90 insertions, 67 deletions

diff --git a/themes/dark/yaru.json b/themes/dark/yaru.json
index 441ec75..487a283 100644
--- a/themes/dark/yaru.json
+++ b/themes/dark/yaru.json
@@ -4,7 +4,7 @@
     {
       "name": "Global settings",
       "settings": {
-        "background": "#2b2929",
+        "background": "#383838",
         "foreground": "#FFFFFF"
       }
     },
@@ -33,7 +33,7 @@
       "name": "Number",
       "scope": "constant.numeric",
       "settings": {
-        "foreground": "#9f639a"
+        "foreground": "#55ffff"
       }
     },
     {
@@ -47,14 +47,14 @@
       "name": "Keyword",
       "scope": "keyword, modifier, variable.language.this, support.type.object, constant.language",
       "settings": {
-        "foreground": "#9f639a"
+        "foreground": "#bb90b7"
       }
     },
     {
       "name": "Function call",
       "scope": "entity.name.function, support.function",
       "settings": {
-        "foreground": "#9f639a"
+        "foreground": "#55ffff"
       }
     },
     {
@@ -76,21 +76,21 @@
       "name": "Type",
       "scope": "support.type",
       "settings": {
-        "foreground": "#55FF55"
+        "foreground": "#55ff55"
       }
     },
     {
       "name": "Type",
       "scope": "entity.name.type, entity.other.inherited-class",
       "settings": {
-        "foreground": "#55FF55"
+        "foreground": "#55ff55"
       }
     },
     {
       "name": "Comment",
       "scope": "comment",
       "settings": {
-        "foreground": "#817b7b",
+        "foreground": "#a8a8a8",
         "fontStyle": "italic"
       }
     },
@@ -98,7 +98,7 @@
       "name": "Class",
       "scope": "entity.name.type.class",
       "settings": {
-        "foreground": "#55FF55",
+        "foreground": "#55ff55",
         "fontStyle": "underline"
       }
     },
@@ -106,28 +106,28 @@
       "name": "Class variable",
       "scope": "variable.object.property, meta.field.declaration entity.name.function",
       "settings": {
-        "foreground": "#55FF55"
+        "foreground": "#55ff55"
       }
     },
     {
       "name": "Class method",
       "scope": "meta.definition.method entity.name.function",
       "settings": {
-        "foreground": "#55FF55"
+        "foreground": "#55ff55"
       }
     },
     {
       "name": "Function definition",
       "scope": "meta.function entity.name.function",
       "settings": {
-        "foreground": "#55FF55"
+        "foreground": "#55ff55"
       }
     },
     {
       "name": "Template expression",
       "scope": "template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end",
       "settings": {
-        "foreground": "#9f639a"
+        "foreground": "#bb90b7"
       }
     },
     {
@@ -155,7 +155,7 @@
       "name": "JSON constant",
       "scope": "constant.language.json",
       "settings": {
-        "foreground": "#9f639a"
+        "foreground": "#bb90b7"
       }
     },
     {
@@ -176,14 +176,14 @@
       "name": "CSS tag",
       "scope": "source.css entity.name.tag",
       "settings": {
-        "foreground": "#55FF55"
+        "foreground": "#55ff55"
       }
     },
     {
       "name": "HTML tag outer",
       "scope": "meta.tag, punctuation.definition.tag",
       "settings": {
-        "foreground": "#9f639a"
+        "foreground": "#bb90b7"
       }
     },
     {
@@ -197,14 +197,14 @@
       "name": "HTML tag attribute",
       "scope": "entity.other.attribute-name",
       "settings": {
-        "foreground": "#9f639a"
+        "foreground": "#55ffff"
       }
     },
     {
       "name": "Markdown heading",
       "scope": "markup.heading",
       "settings": {
-        "foreground": "#9f639a"
+        "foreground": "#bb90b7"
       }
     },
     {
@@ -218,7 +218,7 @@
       "name": "Markdown list item",
       "scope": "text.html.markdown beginning.punctuation.definition.list",
       "settings": {
-        "foreground": "#9f639a"
+        "foreground": "#bb90b7"
       }
     },
     {
@@ -270,14 +270,14 @@
       "name": "INI section title",
       "scope": "entity.name.section.group-title.ini",
       "settings": {
-        "foreground": "#9f639a"
+        "foreground": "#bb90b7"
       }
     },
     {
       "name": "C# class",
       "scope": "source.cs meta.class.identifier storage.type",
       "settings": {
-        "foreground": "#55FF55",
+        "foreground": "#55ff55",
         "fontStyle": "underline"
       }
     },
@@ -285,35 +285,35 @@
       "name": "C# class method",
       "scope": "source.cs meta.method.identifier entity.name.function",
       "settings": {
-        "foreground": "#55FF55"
+        "foreground": "#55ff55"
       }
     },
     {
       "name": "C# function call",
       "scope": "source.cs meta.method-call meta.method, source.cs entity.name.function",
       "settings": {
-        "foreground": "#9f639a"
+        "foreground": "#55ffff"
       }
     },
     {
       "name": "C# type",
       "scope": "source.cs storage.type",
       "settings": {
-        "foreground": "#55FF55"
+        "foreground": "#55ff55"
       }
     },
     {
       "name": "C# return type",
       "scope": "source.cs meta.method.return-type",
       "settings": {
-        "foreground": "#55FF55"
+        "foreground": "#55ff55"
       }
     },
     {
       "name": "C# preprocessor",
       "scope": "source.cs meta.preprocessor",
       "settings": {
-        "foreground": "#817b7b"
+        "foreground": "#a8a8a8"
       }
     },
     {
@@ -326,7 +326,7 @@
     {
       "name": "Global settings",
       "settings": {
-        "background": "#2b2929",
+        "background": "#383838",
         "foreground": "#FFFFFF"
       }
     }
@@ -334,48 +334,49 @@
   "colors": {
     "focusBorder": "#e95420",
     "foreground": "#FFFFFF",
-    "dropdown.background": "#444141",
-    "input.background": "#444141",
+    "dropdown.background": "#595959",
+    "input.background": "#595959",
     "inputOption.activeBorder": "#e95420",
-    "list.activeSelectionBackground": "#e9542080",
+    "list.activeSelectionBackground": "#e95420",
     "list.dropBackground": "#e9542080",
     "list.focusBackground": "#e9542080",
-    "list.hoverBackground": "#FFFFFF1a",
-    "list.inactiveSelectionBackground": "#FFFFFF33",
-    "activityBar.background": "#3c3939",
+    "list.hoverBackground": "#575757",
+    "list.inactiveSelectionBackground": "#575757",
+    "activityBar.background": "#575757",
     "activityBar.dropBackground": "#e9542080",
     "activityBarBadge.background": "#e95420",
-    "sideBar.background": "#2b2929",
-    "sideBarSectionHeader.background": "#3c3939",
+    "sideBar.background": "#3f3f3f",
+    "sideBarSectionHeader.background": "#575757",
     "editorGroup.dropBackground": "#e9542080",
     "editorGroup.focusedEmptyBorder": "#e95420",
-    "editorGroupHeader.tabsBackground": "#2b2929",
+    "editorGroupHeader.tabsBackground": "#383838",
     "tab.border": "#00000033",
     "tab.activeBorder": "#e95420",
-    "tab.inactiveBackground": "#3c3939",
-    "editor.background": "#111111",
+    "tab.inactiveBackground": "#383838",
+    "editor.background": "#2f2f2f",
     "editor.foreground": "#FFFFFF",
     "editorLineNumber.foreground": "#FFFFFF4d",
     "editorLineNumber.activeForeground": "#e95420",
+    "editor.selectionBackground": "#5e2750",
     "editor.lineHighlightBorder": "#FFFFFF1a",
     "editor.rangeHighlightBackground": "#FFFFFF0d",
-    "editorWidget.background": "#333131",
-    "editorHoverWidget.background": "#333131",
-    "editorMarkerNavigation.background": "#333131",
+    "editorWidget.background": "#434343",
+    "editorHoverWidget.background": "#434343",
+    "editorMarkerNavigation.background": "#434343",
     "peekView.border": "#e95420",
-    "peekViewEditor.background": "#222020",
-    "peekViewResult.background": "#333131",
-    "peekViewTitle.background": "#2b2929",
-    "panel.background": "#111111",
+    "peekViewEditor.background": "#2c2c2c",
+    "peekViewResult.background": "#434343",
+    "peekViewTitle.background": "#383838",
+    "panel.background": "#383838",
     "panel.border": "#FFFFFF1a",
     "panelTitle.activeBorder": "#FFFFFF80",
     "panelTitle.inactiveForeground": "#FFFFFF80",
-    "statusBar.background": "#222020",
+    "statusBar.background": "#2f2f2f",
     "statusBar.debuggingBackground": "#e95420",
-    "statusBar.noFolderBackground": "#222020",
+    "statusBar.noFolderBackground": "#2c2c2c",
     "statusBarItem.activeBackground": "#e9542080",
     "statusBarItem.hoverBackground": "#FFFFFF1a",
-    "titleBar.activeBackground": "#222020",
+    "titleBar.activeBackground": "#2b2929",
     "pickerGroup.border": "#FFFFFF1a",
     "terminal.ansiBlack": "#000000",
     "terminal.ansiBlue": "#0000aa",
@@ -393,8 +394,13 @@
     "terminal.ansiRed": "#aa0000",
     "terminal.ansiWhite": "#aaaaaa",
     "terminal.ansiYellow": "#aa5500",
-    "debugToolBar.background": "#3c3939",
+    "debugToolBar.background": "#4e4e4e",
     "selection.background": "#e95420",
-    "terminal.background": "#300a24"
+    "menu.background": "#494949",
+    "menu.selectionBackground": "#575757",
+    "menubar.selectionBackground": "#494949",
+    "tab.unfocusedInactiveBackground": "#383838",
+    "terminal.background": "#300a24",
+    "titleBar.inactiveBackground": "#3d3a3a"
   }
 }
\ No newline at end of file
diff --git a/themes/src/dark/yaru.ts b/themes/src/dark/yaru.ts
index 6a274a1..3252d31 100644
--- a/themes/src/dark/yaru.ts
+++ b/themes/src/dark/yaru.ts
@@ -3,33 +3,34 @@ import { generateTheme, IColorSet } from 'vscode-theme-generator';
 
 const themeName = 'Yaru [beta]';
 const colors = {
-  black: '#111111',
   white: '#FFFFFF',
-  blue: '#5555FF',
+  cyan: '#55ffff',
   red: '#FF5555',
-  green: '#55FF55',
-  yellow: '#FFFF33',
-  ubuntuGray: '#2b2929',
-  ubuntuMediumGray: '#1e1d1d',
-  ubuntuDarkGray: '#111111',
+  green: '#55ff55',
   ubuntuOrange: '#e95420',
-  lightAubergine: '#77216f',
-  lighterAubergine: '#9f639a',
+  lightAubergine: '#bb90b7',
   midAubergine: '#5e2750',
-  darkAubergine: '#2c001e'
+  darkAubergine: '#300a24',
+  titleBarGray: '#2b2929',
+  inactiveTitleBarGray: '#3d3a3a',
+  menuGray: '#494949',
+  bodyGray: '#383838',
+  editorGray: '#2f2f2f',
+  sideBarGray: '#3f3f3f',
+  highlightGray: '#575757'
 }
 
 const colorSet: IColorSet = {
   base: {
-    background: colors.ubuntuGray,
+    background: colors.bodyGray,
     foreground: colors.white,
     color1: colors.ubuntuOrange,
     color2: colors.red,
     color3: colors.green,
-    color4: colors.lighterAubergine
+    color4: colors.cyan
   },
   syntax: {
-    keyword: colors.lighterAubergine
+    keyword: colors.lightAubergine,
   },
   terminal: {
     black: '#000000',
@@ -49,12 +50,28 @@ const colorSet: IColorSet = {
     brightCyan: '#55ffff',
     brightWhite: '#ffffff',
   },
+  ui: {
+    selection: colors.midAubergine
+  },
   overrides: {
-    'editor.background': colors.ubuntuDarkGray,
-    'editorGroupHeader.tabsBackground': colors.ubuntuGray,
-    'panel.background': colors.ubuntuDarkGray,
-    'sideBar.background': colors.ubuntuGray,
-    'terminal.background': '#300a24',
+    'activityBar.background': colors.highlightGray,
+    'editor.background': colors.editorGray,
+    'editorGroupHeader.tabsBackground': colors.bodyGray,
+    'list.activeSelectionBackground': colors.ubuntuOrange,
+    'list.hoverBackground': colors.highlightGray,
+    'list.inactiveSelectionBackground': colors.highlightGray,
+    'menu.background': colors.menuGray,
+    'menu.selectionBackground': colors.highlightGray,
+    'menubar.selectionBackground': colors.menuGray,
+    'panel.background': colors.bodyGray,
+    'sideBar.background': colors.sideBarGray,
+    'sideBarSectionHeader.background': colors.highlightGray,
+    'statusBar.background': colors.editorGray,
+    'tab.inactiveBackground': colors.bodyGray,
+    'tab.unfocusedInactiveBackground': colors.bodyGray,
+    'terminal.background': colors.darkAubergine,
+    'titleBar.activeBackground': colors.titleBarGray,
+    'titleBar.inactiveBackground': colors.inactiveTitleBarGray,
   }
 };