ing

package.json

@@ -56,6 +56,7 @@
     "karma-jasmine": "~1.1.1",
     "npm-run-all": "^4.1.3",
     "primeng": "^6.0.0",
+    "primer-support": "^4.0.0",
     "protractor": "~5.3.0",
     "ts-node": "~5.0.1",
     "tslint": "~5.9.1",

src/assets/scss/styles/_app.scss

@@ -1 +1,10 @@
-@import 'globals';
+@import 'vendor';
+
+@import 'variables';
+
+@import 'mixins';
+
+@import 'globals';
+@import 'type';
+
+@import 'component';

src/assets/scss/styles/_component.scss

@@ -0,0 +1,6 @@
+@import 'component/app';
+@import 'component/window/title-bar';
+@import 'component/window/app-menu-bar';
+@import 'component/window/focus';
+@import 'component/window/zoom-info';
+@import 'component/window/toast-notification';

src/assets/scss/styles/_globals.scss

@@ -1,3 +1,18 @@
+// Globals
+//
+// This file is for things that have to apply globally, if your style
+// doesn't fit into that description it probably belongs in ui/
+
+// Reset the box-sizing, lifted from bootstrap reboot css, see:
+//   https://github.com/twbs/bootstrap/blob/bfc16c4a829ba596db28f5f42d7a3e429e6ea2e1/scss/_reboot.scss#L9
+//
+// Change from `box-sizing: content-box` to `border-box` so that when you add
+// `padding` or `border`s to an element, the overall declared `width` does not
+// change. For example, `width: 100px;` will always be `100px` despite the
+// `border: 10px solid red;` and `padding: 20px;`.
+//
+// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+
 html {
   box-sizing: border-box;
 }
@@ -21,4 +36,127 @@ body {
   margin: 0;
   padding: 0;
   overflow: hidden;
-}
+}
+
+html {
+  // Sets a specific default `font-size` for user with `rem` type scales.
+  font-size: var(--font-size);
+
+  // NB This seems to be necessary on macOS (and possibly others)
+  // for the absolutely positioned foldout to fill the window
+  // when it's being resized.
+  position: relative;
+}
+
+body {
+  // https://css-tricks.com/html-vs-body-in-css/
+  font-family: var(--font-family-sans-serif);
+  font-size: var(--font-size);
+  line-height: 1.5;
+
+  color: var(--text-color);
+  background-color: var(--background-color);
+}
+
+:not(input):not(textarea) {
+  &,
+  &::after,
+  &::before {
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: default;
+  }
+}
+
+img {
+  -webkit-user-drag: none;
+  user-select: none;
+  pointer-events: none;
+}
+
+//
+// Typography
+//
+
+// Remove top margins from headings
+//
+// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
+// margin for easier control within type scales as it avoids margin collapsing.
+//
+// From: https://github.com/twbs/bootstrap/blob/a0f10e6dcb9aef2d8e36e57f3c8b1b06034a8877/scss/_reboot.scss
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+// Regardless of platform behavior we never want buttons to be
+// app drag targets unless explicitly specified.
+button {
+  -webkit-app-region: no-drag;
+}
+
+#content {
+  display: flex;
+
+  height: 100%;
+  width: 100%;
+}
+
+.blankslate {
+  background: var(--box-alt-background-color);
+  color: var(--text-secondary-color);
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--spacing);
+}
+
+// Stretches an element to fill the entire window (such as an overlay)
+.fill-window {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+// We're using a polyfill for the upcoming CSS4 `:focus-ring` pseudo-selector.
+// This allows us to not have to override default accessibility driven focus
+// styles for buttons in the case when a user clicks on a button. This also
+// gives better visiblity to individuals who navigate with the keyboard.
+//
+// See:
+//   https://github.com/WICG/focus-ring
+//   Focus Ring! -- A11ycasts #16: https://youtu.be/ilj2P5-5CjI
+:focus:not(.focus-ring) {
+  outline: none;
+}
+
+// http://stackoverflow.com/questions/7538771/what-is-webkit-focus-ring-color
+:focus {
+  outline: auto 5px var(--focus-color);
+}
+.more-dropdown {
+  color: var(--text-color) !important;
+  margin-left: var(--spacing);
+
+  .octicon {
+    margin-left: var(--spacing-third);
+    width: 8px;
+  }
+}
+
+.brutalism {
+  background: salmon;
+}

src/assets/scss/styles/_mixins.scss

@@ -0,0 +1,6 @@
+@import 'mixins/platform';
+@import 'mixins/ellipsis';
+@import 'mixins/octicon-status';
+@import 'mixins/textboxish';
+@import 'mixins/checkboard-background';
+@import 'mixins/close-button';

src/assets/scss/styles/_type.scss

@@ -0,0 +1,8 @@
+//
+// Typography
+//
+
+.byline {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary-color);
+}

src/assets/scss/styles/_variables.scss

@@ -0,0 +1,398 @@
+// Variables
+//
+// This files contains CSS variables accessible to all selectors
+
+// Primer colors, see https://github.com/primer/primer-css/blob/master/modules/primer-support/lib/variables/color-system.scss
+@import '~primer-support/lib/variables/color-system.scss';
+
+// Extracted as a SCSS variable so that we can define the --overlay-background-color
+// on both the :root and the ::backdrop scope. The ::backdrop pseudo-element
+// doesn't inherit :root, see
+// https://bugs.chromium.org/p/chromium/issues/detail?id=594096
+$overlay-background-color: rgba(0, 0, 0, 0.4);
+
+:root {
+  --color-new: $green;
+  --color-deleted: $red;
+  --color-modified: $yellow-700;
+  --color-renamed: $blue;
+  --color-conflicted: $orange;
+
+  --text-color: $gray-900;
+  --text-secondary-color: $gray-500;
+  --background-color: $white;
+
+  --button-height: 25px;
+
+  --button-background: $blue;
+  --button-border-radius: 2px;
+  --button-hover-background: lighten($blue, 5%);
+  --button-text-color: $white;
+  --button-focus-border-color: $blue-600;
+
+  --link-button-color: $blue;
+  --link-button-hover-color: $blue-600;
+
+  --secondary-button-background: $gray-000;
+  --secondary-button-hover-background: $white;
+  --secondary-button-text-color: var(--text-color);
+  --secondary-button-focus-shadow-color: rgba($gray-200, 0.75);
+  --secondary-button-focus-border-color: $gray-300;
+
+  // Typography
+  //
+  // Font, line-height, and color for body text, headings, and more.
+  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
+  --font-family-monospace: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+
+  /**
+   * Font weight to use for semibold text
+   */
+  --font-weight-semibold: 600;
+
+  /**
+   * Font weight to use for light text
+   */
+  --font-weight-light: 300;
+
+  // Pixel value used to responsively scale all typography. Applied to the `<html>` element.
+  --font-size: 12px;
+  --font-size-sm: 11px;
+  --font-size-md: 14px;
+  --font-size-lg: 28px;
+  --font-size-xl: 32px;
+  --font-size-xxl: 42px;
+
+  /** Extra small font size, be very conservative with the use of this */
+  --font-size-xs: 9px;
+
+  /**
+   * Background color for custom scroll bars.
+   * The color is applied to the thumb part of the scrollbar.
+   *
+   * Note: Only applies to win32 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
+   */
+  --scroll-bar-thumb-background-color-active: rgba(0, 0, 0, 0.5);
+
+  // Box
+  //
+  // We use the term 'box' here to refer to a very high-level generic
+  // component that fits many use cases. A 'box' might be a list item
+  // or an item in a tab control header. It's up to each implementation
+  // to decide what states to support (active selection, selection, etc).
+
+  --box-background-color: var(--background-color);
+  --box-alt-background-color: $gray-100;
+
+  /**
+   * Background color for skeleton or "loading" boxes
+   */
+  --box-skeleton-background-color: $gray-200;
+  --skeleton-background-gradient: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
+
+  /**
+   * Border color for boxes.
+   */
+  --box-border-color: $gray-200;
+  --box-border-accent-color: $blue;
+
+  /**
+   * Background color for selected boxes without keyboard focus
+   */
+  --box-selected-background-color: #ebeef1;
+
+  /**
+   * Text color for when a user hovers over a boxe with a
+   * pointing device. Should not be used by boxes that doesn't
+   * implement a hover state since this will conflict with
+   * selection and active selection
+   */
+  --box-hover-text-color: $gray-900;
+
+  /**
+   * Background color for when a user hovers over a boxe with a
+   * pointing device. Should not be used by boxes that doesn't
+   * implement a hover state since this will conflict with
+   * selection and active selection
+   */
+
+  /**
+   * Text color for selected boxes without keyboard focus
+   */
+  --box-selected-text-color: $gray-900;
+
+  /**
+   * Border color for selected boxes without keyboard focus
+   */
+  --box-selected-border-color: $gray-400;
+
+  /**
+   * Background color for selected boxes with active keyboard focus
+   */
+  --box-selected-active-background-color: $blue;
+
+  /**
+   * Text color for selected boxes with active keyboard focus
+   */
+  --box-selected-active-text-color: $white;
+
+  /**
+   * Border color for selected boxes with active keyboard focus
+   */
+  --box-selected-active-border-color: $gray-400;
+
+  /**
+   * Gradient used to indicate that content is overflowing, intended
+   * for use when content can be expanded through other means than
+   * scrolling.
+   */
+  --box-overflow-shadow-background: linear-gradient(180deg, rgba($white, 0) 0%, rgba($white, 1) 90%, rgba($white, 1) 100%);
+
+  /**
+   * Author input (co-authors)
+   */
+  --co-author-tag-background-color: $blue-000;
+  --co-author-tag-border-color: $blue-200;
+
+  /**
+   * The height of the title bar area on Win32 platforms
+   * If changed, update titleBarHeight in 'app/src/ui/dialog/dialog.tsx'
+  */
+  --win32-title-bar-height: 28px;
+  --win32-title-bar-background-color: $gray-900;
+
+  /**
+   * The height of the title bar area on darwin platforms
+   * If changed, update titleBarHeight in 'app/src/ui/dialog/dialog.tsx'
+  */
+  --darwin-title-bar-height: 22px;
+
+  --spacing: 10px;
+  --spacing-double: calc(var(--spacing) * 2);
+  --spacing-triple: calc(var(--spacing) * 3);
+  --spacing-quad: calc(var(--spacing) * 4);
+  --spacing-half: calc(var(--spacing) / 2);
+  --spacing-third: calc(var(--spacing) / 3);
+
+  --border-radius: 3px;
+  --base-border: 1px solid var(--box-border-color);
+
+  --shadow-color: rgba(71, 83, 95, 0.19);
+  --base-box-shadow: 0 2px 7px var(--shadow-color);
+
+  --toolbar-height: 50px;
+
+  --toolbar-background-color: $gray-900;
+  --toolbar-border-color: $gray-900;
+  --toolbar-text-color: $white;
+  --toolbar-text-secondary-color: $gray-300;
+
+  --toolbar-button-color: var(--toolbar-text-color);
+  --toolbar-button-background-color: transparent;
+  --toolbar-button-border-color: black;
+  --toolbar-button-secondary-color: var(--toolbar-text-secondary-color);
+
+  --toolbar-button-hover-color: $white;
+  --toolbar-button-hover-background-color: $gray-800;
+  --toolbar-button-hover-border-color: var(--toolbar-button-border-color);
+
+  --toolbar-button-focus-background-color: $gray-800;
+
+  --toolbar-button-active-color: var(--text-color);
+  --toolbar-button-active-background-color: var(--background-color);
+  --toolbar-button-active-border-color: var(--background-color);
+
+  --toolbar-button-progress-color: $gray-800;
+  --toolbar-button-focus-progress-color: $gray-700;
+  --toolbar-button-hover-progress-color: $gray-700;
+  --toolbar-dropdown-open-progress-color: $gray-200;
+
+  /**
+   * App menu bar colors (Windows/Linux only)
+   */
+  --app-menu-button-color: var(--toolbar-text-color);
+  --app-menu-button-hover-color: var(--toolbar-button-hover-color);
+  --app-menu-button-hover-background-color: var(--toolbar-button-hover-background-color);
+  --app-menu-button-active-color: var(--toolbar-button-active-color);
+  --app-menu-button-active-background-color: var(--toolbar-button-active-background-color);
+  --app-menu-pane-color: var(--text-color);
+  --app-menu-pane-secondary-color: var(--text-secondary-color);
+  --app-menu-pane-background-color: var(--toolbar-button-active-background-color);
+  --app-menu-divider-color: var(--box-border-color);
+
+  /**
+    * Background color for badges inside of toolbar buttons.
+    * Examples of badges are the ahead/behind bubble in the
+    * push/pull button and the PR badge in the branch drop
+    * down button.
+    */
+  --toolbar-badge-background-color: $gray-600;
+  --toolbar-badge-active-background-color: $gray-200;
+
+  --tab-bar-height: 29px;
+  --tab-bar-active-color: $blue;
+  --tab-bar-background-color: $white;
+
+  /** Count bubble colors when used inside of a tab bar item */
+  --tab-bar-count-color: var(--text-color);
+  --tab-bar-count-background-color: $gray-200;
+
+  /**
+    * Badge colors when used inside of list items.
+    * Example of this is the change indicators inside
+    * of the repository list.
+    */
+  --list-item-badge-color: $gray-800;
+  --list-item-badge-background-color: $gray-200;
+  --list-item-selected-badge-color: $gray-900;
+  --list-item-selected-badge-background-color: $gray-300;
+  --list-item-selected-active-badge-color: $gray-900;
+  --list-item-selected-active-badge-background-color: $white;
+
+  /** Win32 has custom scrol bars, see _scroll.scss */
+  --win32-scroll-bar-size: 10px;
+
+  /**
+   * The z-index for popups. Nothing should be higher, but other z-indexes can
+   * be defined in terms of it.
+   *
+   * 10 seems arbitrary (because it is) but we have to go that high because
+   * codemirror is all over the place with their z-indexes and uses at least
+   * 0-6.
+   */
+  --popup-z-index: 10;
+  --popup-overlay-z-index: calc(var(--popup-z-index) - 1);
+  --foldout-z-index: calc(var(--popup-z-index) - 2);
+
+  /**
+   * Toast notifications are shown temporarily for things like the zoom
+   * percentage changing or the app toggling between full screen and normal
+   * window mode.
+   */
+  --toast-notification-color: $gray-000;
+  --toast-notification-background-color: rgba($gray-900, 0.6);
+
+  /** The highlight color used for focus rings and focus box shadows */
+  --focus-color: $blue;
+
+  /**
+   * Variables for form elements
+   */
+  --text-field-height: 25px;
+  --text-field-focus-shadow-color: rgba($blue, 0.25);
+
+  /**
+   * Diff view
+   */
+
+  --diff-line-padding-y: 2px;
+
+  --diff-text-color: $gray-900;
+  --diff-border-color: $gray-200;
+  --diff-gutter-color: $gray-200;
+  --diff-gutter-background-color: var(--background-color);
+
+  --diff-line-number-color: $gray-700;
+  --diff-line-number-column-width: 50px;
+
+  --diff-selected-background-color: $blue-400;
+  --diff-selected-border-color: $blue-600;
+  --diff-selected-gutter-color: $blue-600;
+  --diff-selected-text-color: var(--background-color);
+
+  --diff-add-background-color: darken($green-000, 2%);
+  --diff-add-border-color: $green-300;
+  --diff-add-gutter-color: $green-300;
+  --diff-add-gutter-background-color: darken($green-100, 3%);
+  --diff-add-inner-background-color: #acf2bd;
+  --diff-add-text-color: var(--diff-text-color);
+
+  --diff-delete-background-color: $red-000;
+  --diff-delete-border-color: $red-200;
+  --diff-delete-gutter-color: $red-200;
+  --diff-delete-gutter-background-color: $red-100;
+  --diff-delete-inner-background-color: #fdb8c0;
+  --diff-delete-text-color: var(--diff-text-color);
+
+  --diff-hunk-background-color: $blue-000;
+  --diff-hunk-border-color: $blue-200;
+  --diff-hunk-gutter-color: darken($blue-200, 5%);
+  --diff-hunk-gutter-background-color: $blue-100;
+  --diff-hunk-text-color: $gray;
+
+  --diff-hover-background-color: $blue-300;
+  --diff-hover-border-color: $blue-400;
+  --diff-hover-gutter-color: $blue-400;
+  --diff-hover-text-color: var(--background-color);
+
+  --diff-add-hover-background-color: $green-300;
+  --diff-add-hover-border-color: $green-400;
+  --diff-add-hover-gutter-color: $green-400;
+  --diff-add-hover-text-color: var(--text-color);
+
+  --diff-delete-hover-background-color: $red-200;
+  --diff-delete-hover-border-color: $red-300;
+  --diff-delete-hover-gutter-color: $red-300;
+  --diff-delete-hover-text-color: var(--text-color);
+
+  // Syntax highlighting text colors
+  --syntax-variable-color: #6f42c1;
+  --syntax-alt-variable-color: #24292e;
+  --syntax-keyword-color: #d73a49;
+  --syntax-atom-color: #005cc5;
+  --syntax-string-color: #032f62;
+  --syntax-qualifier-color: #6f42c1;
+  --syntax-type-color: #d73a49;
+  --syntax-comment-color: $gray-500;
+  --syntax-tag-color: #22863a;
+  --syntax-attribute-color: #6f42c1;
+  --syntax-link-color: #032f62;
+  --syntax-header-color: #0000ff;
+
+  // Note that this duration *must* match the `UndoCommitAnimationTimeout`
+  // specified in `changes/index.tsx`.
+  --undo-animation-duration: 500ms;
+
+  // Colors for form errors
+  --error-color: $red;
+  --form-error-background: $red-100;
+  --form-error-border-color: $red-200;
+  --form-error-text-color: $red-800;
+
+  /** Overlay is used as a background for both modals and foldouts */
+  --overlay-background-color: $overlay-background-color;
+
+  /** Dialog */
+  --dialog-warning-color: $yellow-600;
+  --dialog-error-color: $red;
+
+  /** Inline paths and code */
+  --path-segment-background: $blue-000;
+  --path-segment-padding: var(--spacing-third);
+
+  /** Diverging notification banner colors */
+  --notification-banner-background: $blue-000;
+  --notification-banner-border-color: $blue-200;
+  --notification-ref-background: rgba(255, 255, 255, 0.75);
+
+  // http://easings.net/#easeOutBack
+  --easing-ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+  // http://easings.net/#easeInBack
+  --easing-ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
+
+  // http://easings.net/#easeOutQuint
+  --easing-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+::backdrop {
+  --overlay-background-color: $overlay-background-color;
+}

src/assets/scss/styles/component/_app.scss

@@ -0,0 +1,27 @@
+@import '../mixins';
+
+#desktop-app {
+  // This is just a dummy wrapper needed because react doesn't like
+  // being installed into <body>, see https://github.com/facebook/react/issues/3207
+  &-container {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  // The main react component div
+  &-chrome {
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    height: 100%;
+  }
+
+  // main non-window chrome wrapper
+  &-contents {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+}

src/assets/scss/styles/component/window/_app-menu-bar.scss

@@ -0,0 +1,70 @@
+#app-menu-bar {
+  display: flex;
+
+  .toolbar-button > button {
+    padding: 0 var(--spacing);
+    border: 0;
+
+    .access-key.highlight {
+      text-decoration: underline;
+    }
+  }
+
+  .toolbar-dropdown.open > .toolbar-button > button {
+    background-color: var(--app-menu-button-active-background-color);
+    color: var(--app-menu-button-active-color);
+  }
+
+  .toolbar-dropdown:not(.open) > .toolbar-button > button {
+    color: var(--app-menu-button-color);
+    background: transparent;
+
+    &:hover,
+    &:focus {
+      color: var(--app-menu-button-hover-color);
+      background: var(--app-menu-button-hover-background-color);
+    }
+  }
+
+  #foldout-container .foldout {
+    // Normaly the foldouts have an opaque background but we're
+    // doing a little hack here to make it appear as if the menus
+    // only extend as far as is required to show all menu items.
+    // So we'll have the background of the foldout be transparent
+    // but have an opaque background on the menu pane.
+    background: transparent;
+
+    // This is yet another hack, since the foldout has to extend
+    // to 100% of the available width (or else we can't constrain
+    // the height of the menu panes) we won't be able to close
+    // the pane by clicking directly underneath it. So in order
+    // to solve that we disable pointer events on the foldout
+    // so that clicks on any part of the foldout where there's
+    // no menu pane actually end up registering on the foldout
+    // overload. We then re-enable them on the menu pane itself
+    // so that mouse events work as expected.
+    pointer-events: none;
+
+    .menu-pane {
+      --background-color: var(--app-menu-pane-background-color);
+      background: var(--background-color);
+
+      --text-color: var(--app-menu-pane-color);
+      color: var(--text-color);
+
+      --text-secondary-color: var(--app-menu-pane-secondary-color);
+
+      pointer-events: all;
+    }
+
+    .menu-item:hover {
+      &:not(.disabled) {
+        --text-color: var(--box-selected-active-text-color);
+        --text-secondary-color: var(--box-selected-active-text-color);
+
+        color: var(--text-color);
+        background-color: var(--box-selected-active-background-color);
+      }
+    }
+  }
+}

src/assets/scss/styles/component/window/_focus.scss

@@ -0,0 +1,13 @@
+// On Windows we want a subtle change in the appeareance of the
+// title bar when the app looses focus.
+body.platform-win32 #desktop-app-chrome.blurred {
+  #desktop-app-title-bar {
+    // Drop the opacity of the app icon, non-hovered
+    // window controls and toolbar buttons (top level menu items)
+    .app-icon,
+    .window-controls > button:not(:hover),
+    .toolbar-dropdown:not(.open) .menu-item .label {
+      opacity: 0.6;
+    }
+  }
+}

src/assets/scss/styles/component/window/_title-bar.scss

@@ -0,0 +1,162 @@
+@import '../../mixins';
+
+#app-title-bar {
+  -webkit-app-region: drag;
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: 100%;
+
+  display: flex;
+  flex-direction: row;
+
+  @include darwin {
+    height: var(--darwin-title-bar-height);
+    background: linear-gradient(to bottom, #3b3f46 0%, #2b2e33 100%);
+    border-bottom: 1px solid #000;
+  }
+
+  @include win32 {
+    height: var(--win32-title-bar-height);
+    background: var(--win32-title-bar-background-color);
+    border-bottom: 1px solid #000;
+
+    .app-icon {
+      color: var(--toolbar-button-secondary-color);
+      margin: 0 var(--spacing);
+      align-self: center;
+    }
+  }
+
+  .resize-handle {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    -webkit-app-region: no-drag;
+
+    &.top {
+      width: 100%;
+      height: 3px;
+    }
+
+    &.left {
+      width: 3px;
+      height: var(--win32-title-bar-height);
+    }
+  }
+
+  // Window controls is the container for the three buttons minimize,
+  // maximize/restore and close. On macOS the controls are added
+  // automatically even for borderless window so we only render
+  // controls on Windows.
+  .window-controls {
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin-left: auto;
+
+    // Each button contains a single SVG element with a Windows 10-replica
+    // icon for the function it represents
+    button {
+      -webkit-app-region: no-drag;
+
+      display: inline-block;
+      position: relative;
+      width: 45px;
+      height: 100%;
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+
+      // Reset styles from global buttons
+      border: none;
+      box-shadow: none;
+      border-radius: 0;
+
+      color: #a0a0a0;
+      background-color: transparent;
+      transition: background-color 0.25s ease;
+
+      // Explicitly setting the line height to the height
+      // of the SVG illustrations helps with vertical alignment.
+      line-height: 10px;
+
+      &:focus {
+        outline: none;
+      }
+
+      &:hover {
+        background-color: #888;
+        color: #fff;
+
+        // Doing :hover:active as oposed to just :active is
+        // a conscious choice to match how the real Windows
+        // controls behave when someone hovers, clicks and then
+        // moves away from the hitbox.
+        &:active {
+          background-color: #666;
+
+          // Immediate feedback when clicking
+          transition: none;
+        }
+      }
+
+      // Close button is a special case, it needs to be red
+      // on hover and slightly lighter red on active.
+      &.close:hover {
+        background-color: #e81123;
+        color: #fff;
+
+        &:active {
+          background-color: #bf0f1d;
+
+          // Immediate feedback when clicking
+          transition: none;
+        }
+      }
+
+      /* https://css-tricks.com/cascading-svg-fill-color/ */
+      svg {
+        fill: currentColor;
+      }
+    }
+  }
+}
+
+#app-title-bar.light-title-bar {
+  @include darwin {
+    background: transparent;
+    border-bottom: none;
+  }
+
+  @include win32 {
+    background: transparent;
+    border-bottom: none;
+  }
+
+  position: fixed;
+  z-index: 1;
+
+  .window-controls {
+    button {
+      &:hover {
+        background-color: #e5e5e5;
+        color: #000;
+
+        &:active {
+          background-color: #cccccc;
+        }
+      }
+
+      &.close:hover {
+        background-color: #e81123;
+
+        svg {
+          fill: #fff;
+        }
+
+        &:active {
+          background-color: #f1707a;
+        }
+      }
+    }
+  }
+}

src/assets/scss/styles/component/window/_toast-notification.scss

@@ -0,0 +1,54 @@
+.toast-notification-container {
+  pointer-events: none;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+
+  .toast-notification {
+    padding: var(--spacing) var(--spacing-double);
+    min-width: 100px;
+    background: var(--toast-notification-background-color);
+    color: var(--toast-notification-color);
+    text-align: center;
+    border-radius: 100px;
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-semibold);
+
+    // This is so sad but CodeMirror uses z-indexes like crazy
+    // and we need to make sure we stay above all of that.
+    z-index: 20;
+  }
+
+  kbd {
+    border-radius: var(--border-radius);
+    border: var(--base-border);
+    display: inline-block;
+    font-family: var(--font-family-monospace);
+    padding: var(--spacing-half);
+    line-height: 1;
+  }
+}
+
+.toast-animation {
+  &-appear {
+    transform: scale(0.25);
+    opacity: 0.1;
+  }
+  &-appear-active {
+    transform: scale(1);
+    opacity: 1;
+    transition: all 100ms ease-out;
+  }
+
+  &-leave-active {
+    opacity: 0;
+    transition: all 250ms ease-out;
+  }
+}

src/assets/scss/styles/component/window/_zoom-info.scss

@@ -0,0 +1,55 @@
+#window-zoom-info {
+  pointer-events: none;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+
+  & > div {
+    padding: var(--spacing);
+    min-width: 100px;
+    background: var(--toast-notification-background-color);
+    color: var(--toast-notification-color);
+    text-align: center;
+    border-radius: 100px;
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-semibold);
+
+    // This is so sad but CodeMirror uses z-indexes like crazy
+    // and we need to make sure we stay above all of that.
+    z-index: 20;
+  }
+
+  .zoom-in {
+    &-appear {
+      transform: scale(0.25);
+      opacity: 0;
+    }
+  }
+
+  .zoom-out {
+    &-appear {
+      transform: scale(1.75);
+      opacity: 0;
+    }
+  }
+
+  .zoom-in,
+  .zoom-out {
+    &-leave-active {
+      opacity: 0;
+      transition: opacity 100ms ease-out;
+    }
+    &-appear-active {
+      transform: scale(1);
+      opacity: 1;
+      transition: all 100ms ease-out;
+    }
+  }
+}

src/assets/scss/styles/mixins/_checkboard-background.scss

@@ -0,0 +1,7 @@
+/**
+ * Draw a checkboard in the background
+ * (useful to see the transparent part of an image)
+ */
+@mixin checkboard-background {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEX5+fn///8pDrwNAAAAFElEQVQI12NgsP/AQAz+f4CBGAwAJIIdTTn0+w0AAAAASUVORK5CYII=);
+}

src/assets/scss/styles/mixins/_close-button.scss

@@ -0,0 +1,35 @@
+@mixin close-button {
+  .close {
+    flex-shrink: 0;
+
+    border: 0;
+    height: 16px;
+    width: 16px;
+
+    // Set the left margin to auto so that flexbox positions the button
+    // on the right hand side of the dialog and add a -10px right hand
+    // side margin to put the button where it should be (we use a double
+    // margin for the header itself).
+    margin: 0 calc(var(--spacing) * -1) 0 auto;
+    padding: 0;
+    background: transparent;
+
+    color: var(--text-secondary-color);
+    cursor: pointer;
+
+    // Let the button deal with all mouse events.
+    // Without this the octicon resets the cursor when
+    // hovering over the <path>.
+    .octicon {
+      pointer-events: none;
+    }
+
+    &:hover {
+      color: var(--text-color);
+    }
+
+    &:focus {
+      outline: 0;
+    }
+  }
+}

src/assets/scss/styles/mixins/_ellipsis.scss

@@ -0,0 +1,9 @@
+/**
+ * Enable end-of-line text truncation when text overflows
+ * the horizontal boundary of its container.
+ */
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

src/assets/scss/styles/mixins/_octicon-status.scss

@@ -0,0 +1,26 @@
+@mixin octicon-status {
+  .status {
+    &-new {
+      fill: var(--color-new);
+    }
+    &-copied {
+      fill: var(--color-new);
+    }
+    &-modified {
+      fill: var(--color-modified);
+    }
+    &-renamed {
+      fill: var(--color-renamed);
+    }
+    &-deleted {
+      fill: var(--color-deleted);
+    }
+    &-conflicted {
+      fill: var(--color-conflicted);
+    }
+  }
+
+  .line-endings {
+    fill: var(--color-conflicted);
+  }
+}

src/assets/scss/styles/mixins/_platform.scss

@@ -0,0 +1,43 @@
+// A mixin which takes a content block that should only
+// be applied when the current (real or emulated) operating
+// system is windows
+//
+// This helper mixin is useful in so far that it allows us
+// to keep platform specific styles next to cross-platform
+// styles instead of splitting them out and possibly forgetting
+// about them.
+@mixin win32 {
+  body.platform-win32 & {
+    @content;
+  }
+}
+
+// An exact copy of the win32 mixin except that it allows for
+// writing base-level rules
+@mixin win32-context {
+  body.platform-win32 {
+    @content;
+  }
+}
+
+// A mixin which takes a content block that should only
+// be applied when the current (real or emulated) operating
+// system is macOS.
+//
+// This helper mixin is useful in so far that it allows us
+// to keep platform specific styles next to cross-platform
+// styles instead of splitting them out and possibly forgetting
+// about them.
+@mixin darwin {
+  body.platform-darwin & {
+    @content;
+  }
+}
+
+// An exact copy of the darwin mixin except that it allows for
+// writing base-level rules
+@mixin darwin-context {
+  body.platform-darwin {
+    @content;
+  }
+}

src/assets/scss/styles/mixins/_textboxish.scss

@@ -0,0 +1,37 @@
+@import './platform';
+
+// Essentially all the styles needed to transform a text box
+// input element into something that doesn't look horrendous.
+// It's a mix in because the styles are shared between inputs
+// and select components.
+@mixin textboxish {
+  border: 1px solid var(--box-border-color);
+  border-radius: var(--border-radius);
+  background: var(--box-background-color);
+  color: currentColor;
+  font-size: var(--font-size);
+  font-family: var(--font-family-sans-serif);
+  height: var(--text-field-height);
+  padding: 0 var(--spacing-half);
+
+  &:focus {
+    @include textboxish-focus-styles;
+  }
+}
+
+@mixin textboxish-focus-styles {
+  outline: none;
+  border-color: var(--focus-color);
+  box-shadow: 0 0 0 1px var(--text-field-focus-shadow-color);
+}
+
+@mixin textboxish-disabled-styles {
+  background: var(--box-alt-background-color);
+  color: var(--text-secondary-color);
+}
+
+@mixin textboxish-disabled {
+  &:disabled {
+    @include textboxish-disabled-styles;
+  }
+}

src/assets/scss/styles/themes/_dark.scss

@@ -0,0 +1,306 @@
+// Variables
+//
+// This files contains CSS variables accessible to all selectors
+
+// Primer colors, see https://github.com/primer/primer-css/blob/master/modules/primer-support/lib/variables/color-system.scss
+@import '~primer-support/lib/variables/color-system.scss';
+
+body.theme-dark {
+  --color-new: $green;
+  --color-deleted: $red;
+  --color-modified: $yellow-700;
+  --color-renamed: $blue;
+  --color-conflicted: $orange;
+
+  --text-color: $gray-300;
+  --text-secondary-color: $gray-400;
+  --background-color: $gray-900;
+
+  --button-background: $blue;
+  --button-hover-background: lighten($blue, 5%);
+  --button-text-color: $white;
+  --button-focus-border-color: $blue-600;
+
+  --link-button-color: lighten($blue-400, 3%);
+  --link-button-hover-color: $blue-400;
+
+  --secondary-button-background: $gray-800;
+  --secondary-button-hover-background: var(--secondary-button-background);
+  --secondary-button-text-color: var(--text-color);
+  --secondary-button-focus-shadow-color: rgba($gray-200, 0.75);
+  --secondary-button-focus-border-color: $gray-300;
+
+  /**
+   * Background color for custom scroll bars.
+   * The color is applied to the thumb part of the scrollbar.
+   *
+   * Note: Only applies to win32 platforms
+   */
+  --scroll-bar-thumb-background-color: rgba(0, 0, 0, 0.7);
+
+  /**
+   * 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
+   */
+  --scroll-bar-thumb-background-color-active: rgba(0, 0, 0, 0.8);
+
+  // Box
+  //
+  // We use the term 'box' here to refer to a very high-level generic
+  // component that fits many use cases. A 'box' might be a list item
+  // or an item in a tab control header. It's up to each implementation
+  // to decide what states to support (active selection, selection, etc).
+
+  --box-background-color: darken($gray-900, 3%);
+  --box-alt-background-color: $gray-800;
+
+  /**
+   * Background color for skeleton or "loading" boxes
+   */
+  --box-skeleton-background-color: $gray-700;
+  --skeleton-background-gradient: -webkit-linear-gradient(left, rgba(36, 41, 46, 0) 0%, rgba(36, 41, 46, 0.5) 50%, rgba(36, 41, 46, 0) 100%);
+
+  /**
+   * Border color for boxes.
+   */
+  --box-border-color: #141414;
+  --box-border-accent-color: $blue;
+
+  /**
+   * Background color for selected boxes without keyboard focus
+   */
+  --box-selected-background-color: $gray-700;
+
+  /**
+   * Text color for when a user hovers over a boxe with a
+   * pointing device. Should not be used by boxes that doesn't
+   * implement a hover state since this will conflict with
+   * selection and active selection
+   */
+  --box-hover-text-color: var(--text-color);
+
+  /**
+   * Background color for when a user hovers over a boxe with a
+   * pointing device. Should not be used by boxes that doesn't
+   * implement a hover state since this will conflict with
+   * selection and active selection
+   */
+
+  /**
+   * Text color for selected boxes without keyboard focus
+   */
+  --box-selected-text-color: var(--text-color);
+
+  /**
+   * Border color for selected boxes without keyboard focus
+   */
+  --box-selected-border-color: $gray-400;
+
+  /**
+   * Background color for selected boxes with active keyboard focus
+   */
+  --box-selected-active-background-color: $blue;
+
+  /**
+   * Text color for selected boxes with active keyboard focus
+   */
+  --box-selected-active-text-color: $white;
+
+  /**
+   * Border color for selected boxes with active keyboard focus
+   */
+  --box-selected-active-border-color: $gray-400;
+
+  /**
+   * Gradient used to indicate that content is overflowing, intended
+   * for use when content can be expanded through other means than
+   * scrolling.
+   */
+  --box-overflow-shadow-background: linear-gradient(180deg, rgba($gray-900, 0) 0%, rgba($gray-900, 1) 90%, rgba($gray-900, 1) 100%);
+
+  /**
+   * Author input (co-authors)
+   */
+  --co-author-tag-background-color: $blue-800;
+  --co-author-tag-border-color: $blue-700;
+
+  --base-border: 1px solid var(--box-border-color);
+
+  --shadow-color: rgba(black, 0.5);
+  --base-box-shadow: 0 2px 7px var(--shadow-color);
+
+  --toolbar-background-color: darken($gray-900, 3%);
+  --toolbar-border-color: var(--box-border-color);
+  --toolbar-text-color: var(--text-color);
+  --toolbar-text-secondary-color: var(--text-secondary-color);
+
+  --toolbar-button-color: var(--toolbar-text-color);
+  --toolbar-button-background-color: transparent;
+  --toolbar-button-border-color: var(--box-border-color);
+  --toolbar-button-secondary-color: var(--toolbar-text-secondary-color);
+
+  --toolbar-button-hover-color: $white;
+  --toolbar-button-hover-background-color: $gray-800;
+  --toolbar-button-hover-border-color: var(--toolbar-button-border-color);
+
+  --toolbar-button-focus-background-color: $gray-800;
+
+  --toolbar-button-active-color: var(--text-color);
+  --toolbar-button-active-background-color: var(--background-color);
+  --toolbar-button-active-border-color: var(--box-border-color);
+
+  --toolbar-button-progress-color: $gray-800;
+  --toolbar-button-focus-progress-color: $gray-700;
+  --toolbar-button-hover-progress-color: $gray-700;
+  --toolbar-dropdown-open-progress-color: $gray-200;
+
+  /**
+    * App menu bar colors (Windows/Linux only)
+    */
+  --app-menu-button-color: var(--toolbar-text-color);
+  --app-menu-button-hover-color: var(--toolbar-button-hover-color);
+  --app-menu-button-hover-background-color: var(--toolbar-button-hover-background-color);
+  --app-menu-button-active-color: var(--text-color);
+  --app-menu-button-active-background-color: $gray-800;
+  --app-menu-pane-color: var(--text-color);
+  --app-menu-pane-secondary-color: var(--text-secondary-color);
+  --app-menu-pane-background-color: $gray-800;
+  --app-menu-divider-color: $gray-600;
+
+  /**
+   * Background color for badges inside of toolbar buttons.
+   * Examples of badges are the ahead/behind bubble in the
+   * push/pull button and the PR badge in the branch drop
+   * down button.
+   */
+  --toolbar-badge-background-color: $gray-700;
+  --toolbar-badge-active-background-color: $gray-700;
+
+  --tab-bar-active-color: $blue;
+  --tab-bar-background-color: var(--box-background-color);
+
+  /** Count bubble colors when used inside of a tab bar item */
+  --tab-bar-count-color: var(--text-color);
+  --tab-bar-count-background-color: $gray-700;
+
+  /**
+    * Badge colors when used inside of list items.
+    * Example of this is the ahead/behind indicators inside
+    * of the repository list.
+    */
+  --list-item-badge-color: var(--text-color);
+  --list-item-badge-background-color: $gray-600;
+  --list-item-selected-badge-color: $white;
+  --list-item-selected-badge-background-color: $gray-500;
+  --list-item-selected-active-badge-color: $gray-900;
+  --list-item-selected-active-badge-background-color: $white;
+
+  /**
+   * Toast notifications are shown temporarily for things like the zoom
+   * percentage changing or the app toggling between full screen and normal
+   * window mode.
+   */
+  --toast-notification-color: var(--text-color);
+  --toast-notification-background-color: rgba(black, 0.8);
+
+  /** The highlight color used for focus rings and focus box shadows */
+  --focus-color: $blue;
+
+  /**
+   * Variables for form elements
+   */
+  --text-field-focus-shadow-color: rgba($blue, 0.25);
+
+  /**
+   * Diff view
+   */
+
+  --diff-text-color: var(--text-color);
+  --diff-border-color: $gray-800;
+  --diff-gutter-color: $gray-800;
+  --diff-gutter-background-color: darken($gray-900, 3%);
+
+  --diff-line-number-color: var(--text-secondary-color);
+  --diff-line-number-column-width: 50px;
+
+  --diff-selected-background-color: $blue-700;
+  --diff-selected-border-color: $blue-600;
+  --diff-selected-gutter-color: $blue-600;
+  --diff-selected-text-color: var(--text-color);
+
+  --diff-add-background-color: darken($green-900, 3%);
+  --diff-add-border-color: darken($green-900, 2%);
+  --diff-add-gutter-color: darken($green-900, 2%);
+  --diff-add-gutter-background-color: darken($green-900, 8%);
+  --diff-add-inner-background-color: $green-600;
+  --diff-add-text-color: var(--diff-text-color);
+
+  --diff-delete-background-color: darken($red-900, 15%);
+  --diff-delete-border-color: darken($red-900, 10%);
+  --diff-delete-gutter-color: darken($red-900, 10%);
+  --diff-delete-gutter-background-color: darken($red-900, 20%);
+  --diff-delete-inner-background-color: $red-700;
+  --diff-delete-text-color: $red-100;
+
+  --diff-hunk-background-color: darken($gray-900, 3%);
+  --diff-hunk-border-color: lighten($gray-900, 3%);
+  --diff-hunk-gutter-color: lighten($gray-900, 3%);
+  --diff-hunk-gutter-background-color: darken($gray-900, 6%);
+  --diff-hunk-text-color: var(--text-secondary-color);
+
+  --diff-hover-background-color: $blue-500;
+  --diff-hover-border-color: $blue-400;
+  --diff-hover-gutter-color: $blue-400;
+  --diff-hover-text-color: var(--diff-text-color);
+
+  --diff-add-hover-background-color: $green-900;
+  --diff-add-hover-border-color: $green-700;
+  --diff-add-hover-gutter-color: $green-700;
+  --diff-add-hover-text-color: var(--text-color);
+
+  --diff-delete-hover-background-color: $red-800;
+  --diff-delete-hover-border-color: $red-700;
+  --diff-delete-hover-gutter-color: $red-700;
+  --diff-delete-hover-text-color: var(--text-color);
+
+  // Syntax highlighting text colors
+  --syntax-variable-color: $purple-300;
+  --syntax-alt-variable-color: $blue-300;
+  --syntax-keyword-color: $red-300;
+  --syntax-atom-color: $blue-300;
+  --syntax-string-color: $orange-300;
+  --syntax-qualifier-color: $purple-300;
+  --syntax-type-color: $red-300;
+  --syntax-comment-color: $gray-400;
+  --syntax-tag-color: $green-400;
+  --syntax-attribute-color: $purple-300;
+  --syntax-link-color: $blue-300;
+  --syntax-header-color: $red-300;
+
+  // Colors for form errors
+  --error-color: $red;
+  --form-error-background: darken($red-900, 3%);
+  --form-error-border-color: $red-900;
+  --form-error-text-color: var(--text-color);
+
+  /** Overlay is used as a background for both modals and foldouts */
+  --overlay-background-color: rgba(0, 0, 0, 0.5);
+
+  /** Dialog */
+  --dialog-warning-color: $yellow-600;
+  --dialog-error-color: $red-600;
+
+  /** Inline paths and code */
+  --path-segment-background: $gray-700;
+
+  .blankslate-image {
+    filter: #{'invert()'} grayscale(1) brightness(8) contrast(0.6);
+  }
+
+  /** Diverging notification banner colors */
+  --notification-banner-background: $gray-800;
+  --notification-banner-border-color: $gray-700;
+  --notification-ref-background: $gray-700;
+}

yarn.lock

@@ -5328,6 +5328,10 @@ primeng@^6.0.0:
   version "6.1.0"
   resolved "https://nexus.loafle.net/repository/npm-all/primeng/-/primeng-6.1.0.tgz#3bf003ccd76d1c034df0a0b7ea68a8856e858d27"
 
+primer-support@^4.0.0:
+  version "4.6.0"
+  resolved "https://nexus.loafle.net/repository/npm-all/primer-support/-/primer-support-4.6.0.tgz#42ad30ebea31f7fabb529127b32864d6cbfc2b3c"
+
 process-nextick-args@~1.0.6:
   version "1.0.7"
   resolved "https://nexus.loafle.net/repository/npm-all/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"