diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html
index 90e1a39..9ae6ded 100644
--- a/src/app/pages/pages.component.html
+++ b/src/app/pages/pages.component.html
@@ -1,23 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/assets/scss/styles/_variables.scss b/src/assets/scss/styles/_variables.scss
index 6c89a52..775e66a 100644
--- a/src/assets/scss/styles/_variables.scss
+++ b/src/assets/scss/styles/_variables.scss
@@ -12,32 +12,32 @@
$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;
+ --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;
+ --text-color: #{$gray-900};
+ --text-secondary-color: #{$gray-500};
+ --background-color: #{$white};
--button-height: 25px;
- --button-background: $blue;
+ --button-background: #{$blue};
--button-border-radius: 2px;
- --button-hover-background: lighten($blue, 5%);
- --button-text-color: $white;
- --button-focus-border-color: $blue-600;
+ --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;
+ --link-button-color: #{$blue};
+ --link-button-hover-color: #{$blue-600};
- --secondary-button-background: $gray-000;
- --secondary-button-hover-background: $white;
+ --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;
+ --secondary-button-focus-shadow-color: rgba(#{$gray-200}, 0.75);
+ --secondary-button-focus-border-color: #{$gray-300};
// Typography
//
@@ -90,19 +90,19 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
// to decide what states to support (active selection, selection, etc).
--box-background-color: var(--background-color);
- --box-alt-background-color: $gray-100;
+ --box-alt-background-color: #{$gray-100};
/**
* Background color for skeleton or "loading" boxes
*/
- --box-skeleton-background-color: $gray-200;
+ --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;
+ --box-border-color: #{$gray-200};
+ --box-border-accent-color: #{$blue};
/**
* Background color for selected boxes without keyboard focus
@@ -115,7 +115,7 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
* implement a hover state since this will conflict with
* selection and active selection
*/
- --box-hover-text-color: $gray-900;
+ --box-hover-text-color: #{$gray-900};
/**
* Background color for when a user hovers over a boxe with a
@@ -127,47 +127,47 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
/**
* Text color for selected boxes without keyboard focus
*/
- --box-selected-text-color: $gray-900;
+ --box-selected-text-color: #{$gray-900};
/**
* Border color for selected boxes without keyboard focus
*/
- --box-selected-border-color: $gray-400;
+ --box-selected-border-color: #{$gray-400};
/**
* Background color for selected boxes with active keyboard focus
*/
- --box-selected-active-background-color: $blue;
+ --box-selected-active-background-color: #{$blue};
/**
* Text color for selected boxes with active keyboard focus
*/
- --box-selected-active-text-color: $white;
+ --box-selected-active-text-color: #{$white};
/**
* Border color for selected boxes with active keyboard focus
*/
- --box-selected-active-border-color: $gray-400;
+ --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%);
+ --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;
+ --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;
+ --win32-title-bar-background-color: #{$gray-900};
/**
* The height of the title bar area on darwin platforms
@@ -190,30 +190,30 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
--toolbar-height: 50px;
- --toolbar-background-color: $gray-900;
- --toolbar-border-color: $gray-900;
- --toolbar-text-color: $white;
- --toolbar-text-secondary-color: $gray-300;
+ --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-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-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;
+ --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)
@@ -234,28 +234,28 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
* 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;
+ --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;
+ --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;
+ --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;
+ --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;
@@ -277,17 +277,17 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
* 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);
+ --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;
+ --focus-color: #{$blue};
/**
* Variables for form elements
*/
--text-field-height: 25px;
- --text-field-focus-shadow-color: rgba($blue, 0.25);
+ --text-field-focus-shadow-color: rgba(#{$blue}, 0.25);
/**
* Diff view
@@ -295,52 +295,52 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
--diff-line-padding-y: 2px;
- --diff-text-color: $gray-900;
- --diff-border-color: $gray-200;
- --diff-gutter-color: $gray-200;
+ --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-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-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-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-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-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-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-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-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
@@ -351,7 +351,7 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
--syntax-string-color: #032f62;
--syntax-qualifier-color: #6f42c1;
--syntax-type-color: #d73a49;
- --syntax-comment-color: $gray-500;
+ --syntax-comment-color: #{$gray-500};
--syntax-tag-color: #22863a;
--syntax-attribute-color: #6f42c1;
--syntax-link-color: #032f62;
@@ -362,25 +362,25 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
--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;
+ --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;
+ --overlay-background-color: #{$overlay-background-color};
/** Dialog */
- --dialog-warning-color: $yellow-600;
- --dialog-error-color: $red;
+ --dialog-warning-color: #{$yellow-600};
+ --dialog-error-color: #{$red};
/** Inline paths and code */
- --path-segment-background: $blue-000;
+ --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-banner-background: #{$blue-000};
+ --notification-banner-border-color: #{$blue-200};
--notification-ref-background: rgba(255, 255, 255, 0.75);
// http://easings.net/#easeOutBack
@@ -394,5 +394,5 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
}
::backdrop {
- --overlay-background-color: $overlay-background-color;
+ --overlay-background-color: #{$overlay-background-color};
}
diff --git a/src/assets/scss/styles/_app.scss b/src/assets/scss/styles/app.scss
similarity index 100%
rename from src/assets/scss/styles/_app.scss
rename to src/assets/scss/styles/app.scss
diff --git a/src/assets/scss/styles/component/_app.scss b/src/assets/scss/styles/component/_app.scss
index e063ffb..d3b0747 100644
--- a/src/assets/scss/styles/component/_app.scss
+++ b/src/assets/scss/styles/component/_app.scss
@@ -1,6 +1,6 @@
@import '../mixins';
-#desktop-app {
+#app {
// This is just a dummy wrapper needed because react doesn't like
// being installed into , see https://github.com/facebook/react/issues/3207
&-container {
diff --git a/src/assets/scss/styles/themes/_dark.scss b/src/assets/scss/styles/themes/_dark.scss
deleted file mode 100644
index 663d5cb..0000000
--- a/src/assets/scss/styles/themes/_dark.scss
+++ /dev/null
@@ -1,306 +0,0 @@
-// 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;
-}
diff --git a/src/electron/app-window.ts b/src/electron/app-window.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/electron/now.ts b/src/electron/now.ts
new file mode 100644
index 0000000..4f4145f
--- /dev/null
+++ b/src/electron/now.ts
@@ -0,0 +1,11 @@
+/**
+ * Get the time from some arbitrary fixed starting point. The time will not be
+ * based on clock time.
+ *
+ * Ideally we'd just use `performance.now` but that's a browser API and not
+ * available in our Plain Old Node main process environment.
+ */
+export function now(): number {
+ const time = process.hrtime();
+ return time[0] * 1000 + time[1] / 1000000;
+}
diff --git a/src/index.html b/src/index.html
index f979f22..34616e9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,5 +1,6 @@
+
ElectronApp
@@ -8,7 +9,9 @@
-
+
+
-
+
+
\ No newline at end of file