improve scrollbars when using dark theme (#240)

* Theme Scrollbars

Updated scrollbars to match windows webkit styling for both light and dark mode

* Update _scroll.scss

Separating linux from win32 reference, in case we want to adjust for the future and not impact the other

* Updated Scroll Color and Docs

Adding color change to dark theme scroll bars merged upstream, and updating documentation related to editor and shell updates

app/styles/_variables.scss

@@ -76,15 +76,15 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
    * Background color for custom scroll bars.
    * The color is applied to the thumb part of the scrollbar.
    *
-   * Note: Only applies to win32 platforms
+   * Note: Only applies to win32 and linux platforms
    */
   --scroll-bar-thumb-background-color: rgba(0, 0, 0, 0.2);
 
   /**
    * Background color for custom scroll bars in their active state.
    * The color is applied to the thumb part of the scrollbar.
    *
-   * Note: Only applies to win32 platforms
+   * Note: Only applies to win32 and linux platforms
    */
   --scroll-bar-thumb-background-color-active: rgba(0, 0, 0, 0.5);
 
@@ -271,8 +271,9 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
   --list-item-selected-active-badge-background-color: #{$white};
   --list-item-hover-background-color: #{$gray-100};
 
-  /** Win32 has custom scrol bars, see _scroll.scss */
+  /** Windows/Linux have custom scrollbars, see _scroll.scss */
   --win32-scroll-bar-size: 10px;
+  --linux-scroll-bar-size: 10px;
 
   /**
    * The z-index for popups. Nothing should be higher, but other z-indexes can

app/styles/themes/_dark.scss

@@ -40,16 +40,16 @@ body.theme-dark {
    * Background color for custom scroll bars.
    * The color is applied to the thumb part of the scrollbar.
    *
-   * Note: Only applies to win32 platforms
+   * Note: Only applies to win32 and linux platforms
    */
   --scroll-bar-thumb-background-color: rgba(255, 255, 255, 0.2);
 
   /**
-   * Background color for custom scroll bars in their active state.
-   * The color is applied to the thumb part of the scrollbar.
-   *
-   * Note: Only applies to win32 platforms
-   */
+    * Background color for custom scroll bars in their active state.
+    * The color is applied to the thumb part of the scrollbar.
+    *
+    * Note: Only applies to win32 and linux platforms
+    */
   --scroll-bar-thumb-background-color-active: rgba(255, 255, 255, 0.5);
 
   // Box

app/styles/ui/_scroll.scss

@@ -59,3 +59,40 @@
     }
   }
 }
+
+@include linux-context {
+  // Linux scrollbars need styled, too
+  ::-webkit-scrollbar {
+    width: var(--linux-scroll-bar-size);
+    height: var(--linux-scroll-bar-size);
+    background: transparent;
+    cursor: pointer;
+
+    &-thumb {
+      background-color: var(--scroll-bar-thumb-background-color);
+      border-radius: var(--linux-scroll-bar-size);
+
+      // This little hack allows us to have a slim scroll bar
+      // with a bigger hit area. The scroll bar width/height
+      // is 10px but we're cutting off 6px using clipping so
+      // that it appears as if it's actually only 4px.
+      border-color: transparent;
+      border-style: solid;
+      border-width: 3px;
+      background-clip: padding-box;
+
+      // ...and when it's pressed we'll up the contrast
+      &:active {
+        background-color: var(--scroll-bar-thumb-background-color-active);
+      }
+
+      // When someone hovers over, or presses the bar we'll expand it to 8px
+      &:hover,
+      &:active {
+        border-width: 1px;
+        background-color: var(--scroll-bar-thumb-background-color-active);
+        cursor: pointer;
+      }
+    }
+  }
+}

docs/technical/editor-integration.md

@@ -388,6 +388,7 @@ These editors are currently supported:
  - [Sublime Text](https://www.sublimetext.com/)
  - [Typora](https://typora.io/)
  - [SlickEdit](https://www.slickedit.com)
+ - [Code](https://github.com/elementary/code)
 
 These are defined in an enum at the top of the file:
 
@@ -400,6 +401,7 @@ export enum ExternalEditor {
   SublimeText = 'Sublime Text',
   Typora = 'Typora',
   SlickEdit = 'SlickEdit',
+  ElementaryCode = 'Code',
 }
 ```
 
@@ -435,13 +437,15 @@ export async function getAvailableEditors(): Promise<
     sublimePath,
     typoraPath,
     slickeditPath,
+    elementaryCodePath,
   ] = await Promise.all([
     getEditorPath(ExternalEditor.Atom),
     getEditorPath(ExternalEditor.VisualStudioCode),
     getEditorPath(ExternalEditor.VisualStudioCodeInsiders),
     getEditorPath(ExternalEditor.SublimeText),
     getEditorPath(ExternalEditor.Typora),
     getEditorPath(ExternalEditor.SlickEdit),
+    getEditorPath(ExternalEditor.ElementaryCode),
   ])
 
   ...

docs/technical/shell-integration.md

@@ -226,6 +226,8 @@ These shells are currently supported:
  - [Konsole](https://konsole.kde.org/)
  - [XTerm](http://invisible-island.net/xterm/)
  - [Terminology](https://www.enlightenment.org/docs/apps/terminology.md)
+ - [Deepin Terminal](https://www.deepin.org/en/original/deepin-terminal/)
+ - [Elementary Terminal](https://github.com/elementary/terminal)
 
 These are defined in an enum at the top of the file:
 
@@ -239,6 +241,8 @@ export enum Shell {
   Konsole = 'Konsole',
   Xterm = 'XTerm',
   Terminology = 'Terminology',
+  Deepin = 'Deepin Terminal',
+  Elementary = 'Elementary Terminal',
 }
 ```
 
@@ -273,6 +277,8 @@ export async function getAvailableShells(): Promise<
     konsolePath,
     xtermPath,
     terminologyPath,
+    deepinPath,
+    elementaryPath,
   ] = await Promise.all([
     getShellPath(Shell.Gnome),
     getShellPath(Shell.Mate),
@@ -282,6 +288,8 @@ export async function getAvailableShells(): Promise<
     getShellPath(Shell.Konsole),
     getShellPath(Shell.Xterm),
     getShellPath(Shell.Terminology),
+    getShellPath(Shell.Deepin),
+    getShellPath(Shell.Elementary),
   ])
 
   ...
@@ -318,6 +326,10 @@ export function launch(
       return spawn(foundShell.path, ['-e', '/bin/bash'], { cwd: path })
     case Shell.Terminology:
       return spawn(foundShell.path, ['-d', path])
+    case Shell.Deepin:
+      return spawn(foundShell.path, ['-w', path])
+    case Shell.Elementary:
+      return spawn(foundShell.path, ['-w', path])
     default:
       return assertNever(shell, `Unknown shell: ${shell}`)
   }