From a7b40a87425d6a817aa9225cd2e61de8ee629518 Mon Sep 17 00:00:00 2001 From: crusader Date: Tue, 14 Aug 2018 21:57:33 +0900 Subject: [PATCH] ing --- package.json | 1 + src/assets/scss/styles/_app.scss | 11 +- src/assets/scss/styles/_component.scss | 6 + src/assets/scss/styles/_globals.scss | 140 +++++- src/assets/scss/styles/_mixins.scss | 6 + src/assets/scss/styles/_type.scss | 8 + src/assets/scss/styles/_variables.scss | 398 ++++++++++++++++++ src/assets/scss/styles/_vendor.scss | 0 src/assets/scss/styles/component/_app.scss | 27 ++ .../component/window/_app-menu-bar.scss | 70 +++ .../scss/styles/component/window/_focus.scss | 13 + .../styles/component/window/_title-bar.scss | 162 +++++++ .../component/window/_toast-notification.scss | 54 +++ .../styles/component/window/_zoom-info.scss | 55 +++ .../styles/mixins/_checkboard-background.scss | 7 + .../scss/styles/mixins/_close-button.scss | 35 ++ src/assets/scss/styles/mixins/_ellipsis.scss | 9 + .../scss/styles/mixins/_octicon-status.scss | 26 ++ src/assets/scss/styles/mixins/_platform.scss | 43 ++ .../scss/styles/mixins/_textboxish.scss | 37 ++ src/assets/scss/styles/themes/_dark.scss | 306 ++++++++++++++ yarn.lock | 4 + 22 files changed, 1416 insertions(+), 2 deletions(-) create mode 100644 src/assets/scss/styles/_component.scss create mode 100644 src/assets/scss/styles/_mixins.scss create mode 100644 src/assets/scss/styles/_type.scss create mode 100644 src/assets/scss/styles/_variables.scss create mode 100644 src/assets/scss/styles/_vendor.scss create mode 100644 src/assets/scss/styles/component/_app.scss create mode 100644 src/assets/scss/styles/component/window/_app-menu-bar.scss create mode 100644 src/assets/scss/styles/component/window/_focus.scss create mode 100644 src/assets/scss/styles/component/window/_title-bar.scss create mode 100644 src/assets/scss/styles/component/window/_toast-notification.scss create mode 100644 src/assets/scss/styles/component/window/_zoom-info.scss create mode 100644 src/assets/scss/styles/mixins/_checkboard-background.scss create mode 100644 src/assets/scss/styles/mixins/_close-button.scss create mode 100644 src/assets/scss/styles/mixins/_ellipsis.scss create mode 100644 src/assets/scss/styles/mixins/_octicon-status.scss create mode 100644 src/assets/scss/styles/mixins/_platform.scss create mode 100644 src/assets/scss/styles/mixins/_textboxish.scss create mode 100644 src/assets/scss/styles/themes/_dark.scss diff --git a/package.json b/package.json index c5b5d86..beda4c4 100644 --- a/package.json +++ b/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", diff --git a/src/assets/scss/styles/_app.scss b/src/assets/scss/styles/_app.scss index 2068ead..57e9427 100644 --- a/src/assets/scss/styles/_app.scss +++ b/src/assets/scss/styles/_app.scss @@ -1 +1,10 @@ -@import 'globals'; \ No newline at end of file +@import 'vendor'; + +@import 'variables'; + +@import 'mixins'; + +@import 'globals'; +@import 'type'; + +@import 'component'; \ No newline at end of file diff --git a/src/assets/scss/styles/_component.scss b/src/assets/scss/styles/_component.scss new file mode 100644 index 0000000..a41bfeb --- /dev/null +++ b/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'; diff --git a/src/assets/scss/styles/_globals.scss b/src/assets/scss/styles/_globals.scss index 2b254f2..b1af174 100644 --- a/src/assets/scss/styles/_globals.scss +++ b/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; -} \ No newline at end of file +} + +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, `

`-`

` 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; +} diff --git a/src/assets/scss/styles/_mixins.scss b/src/assets/scss/styles/_mixins.scss new file mode 100644 index 0000000..2547663 --- /dev/null +++ b/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'; diff --git a/src/assets/scss/styles/_type.scss b/src/assets/scss/styles/_type.scss new file mode 100644 index 0000000..e603c67 --- /dev/null +++ b/src/assets/scss/styles/_type.scss @@ -0,0 +1,8 @@ +// +// Typography +// + +.byline { + font-size: var(--font-size-sm); + color: var(--text-secondary-color); +} diff --git a/src/assets/scss/styles/_variables.scss b/src/assets/scss/styles/_variables.scss new file mode 100644 index 0000000..6c89a52 --- /dev/null +++ b/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 `` 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; +} diff --git a/src/assets/scss/styles/_vendor.scss b/src/assets/scss/styles/_vendor.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/scss/styles/component/_app.scss b/src/assets/scss/styles/component/_app.scss new file mode 100644 index 0000000..e063ffb --- /dev/null +++ b/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 , 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; + } +} diff --git a/src/assets/scss/styles/component/window/_app-menu-bar.scss b/src/assets/scss/styles/component/window/_app-menu-bar.scss new file mode 100644 index 0000000..419ec0b --- /dev/null +++ b/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); + } + } + } +} diff --git a/src/assets/scss/styles/component/window/_focus.scss b/src/assets/scss/styles/component/window/_focus.scss new file mode 100644 index 0000000..296fadd --- /dev/null +++ b/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; + } + } +} diff --git a/src/assets/scss/styles/component/window/_title-bar.scss b/src/assets/scss/styles/component/window/_title-bar.scss new file mode 100644 index 0000000..a354d65 --- /dev/null +++ b/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; + } + } + } + } +} diff --git a/src/assets/scss/styles/component/window/_toast-notification.scss b/src/assets/scss/styles/component/window/_toast-notification.scss new file mode 100644 index 0000000..69f1e17 --- /dev/null +++ b/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; + } +} diff --git a/src/assets/scss/styles/component/window/_zoom-info.scss b/src/assets/scss/styles/component/window/_zoom-info.scss new file mode 100644 index 0000000..0e9a54a --- /dev/null +++ b/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; + } + } +} diff --git a/src/assets/scss/styles/mixins/_checkboard-background.scss b/src/assets/scss/styles/mixins/_checkboard-background.scss new file mode 100644 index 0000000..0fbf63c --- /dev/null +++ b/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=); +} diff --git a/src/assets/scss/styles/mixins/_close-button.scss b/src/assets/scss/styles/mixins/_close-button.scss new file mode 100644 index 0000000..e0bf14c --- /dev/null +++ b/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 . + .octicon { + pointer-events: none; + } + + &:hover { + color: var(--text-color); + } + + &:focus { + outline: 0; + } + } +} diff --git a/src/assets/scss/styles/mixins/_ellipsis.scss b/src/assets/scss/styles/mixins/_ellipsis.scss new file mode 100644 index 0000000..eac16ac --- /dev/null +++ b/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; +} diff --git a/src/assets/scss/styles/mixins/_octicon-status.scss b/src/assets/scss/styles/mixins/_octicon-status.scss new file mode 100644 index 0000000..b2cd2a3 --- /dev/null +++ b/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); + } +} diff --git a/src/assets/scss/styles/mixins/_platform.scss b/src/assets/scss/styles/mixins/_platform.scss new file mode 100644 index 0000000..0191bdd --- /dev/null +++ b/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; + } +} diff --git a/src/assets/scss/styles/mixins/_textboxish.scss b/src/assets/scss/styles/mixins/_textboxish.scss new file mode 100644 index 0000000..f470c0d --- /dev/null +++ b/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; + } +} diff --git a/src/assets/scss/styles/themes/_dark.scss b/src/assets/scss/styles/themes/_dark.scss new file mode 100644 index 0000000..663d5cb --- /dev/null +++ b/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; +} diff --git a/yarn.lock b/yarn.lock index 9671c2b..ea2c91a 100644 --- a/yarn.lock +++ b/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"