mirror of
https://github.com/desktop/desktop
synced 2024-10-31 11:07:25 +00:00
524 lines
18 KiB
SCSS
524 lines
18 KiB
SCSS
// 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-600};
|
|
--color-deleted: #{$red-600};
|
|
--color-modified: #{$yellow-700};
|
|
--color-renamed: #{$blue};
|
|
--color-conflicted: #{$orange};
|
|
|
|
--text-color: #{$gray-900};
|
|
--text-secondary-color: #{$gray-500};
|
|
--text-secondary-color-muted: #{lighten($gray-500, 30%)};
|
|
--background-color: #{$white};
|
|
|
|
--button-height: 25px;
|
|
|
|
--button-background: #{$blue};
|
|
--button-border-radius: 6px;
|
|
--button-hover-background: #{lighten($blue, 5%)};
|
|
--button-text-color: #{$white};
|
|
--button-focus-border-color: #{$blue-100};
|
|
|
|
--link-button-color: #{lighten($blue, 5%)};
|
|
--link-button-hover-color: #{$blue-600};
|
|
--link-button-selected-hover-color: #{$blue-200};
|
|
|
|
--secondary-button-background: #{$gray-100};
|
|
--secondary-button-border-color: var(--box-border-contrast-color);
|
|
--secondary-button-hover-border-color: var(--box-border-contrast-color);
|
|
--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};
|
|
|
|
/**
|
|
* Color for icons that are placed on top of a colored backing
|
|
* (like a circle badge icon)
|
|
*/
|
|
--badge-icon-color: #{$white};
|
|
--warning-badge-icon-color: #{$orange};
|
|
|
|
// Colors used for icons that are inside an input box
|
|
--input-icon-warning-color: #{$yellow-800};
|
|
--input-icon-error-color: #{$red-600};
|
|
--input-icon-hover-background-color: #{$gray-100};
|
|
|
|
// Colors used for icons in the commit message warning/error area
|
|
--commit-message-icon-warning-color: var(--input-icon-warning-color);
|
|
--commit-message-icon-error-color: var(--input-icon-error-color);
|
|
|
|
// Typography
|
|
//
|
|
// Font, line-height, and color for body text, headings, and more.
|
|
$emoji_fallback_fonts: 'Apple Color Emoji', 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
--font-family-sans-serif: system-ui, sans-serif, #{$emoji_fallback_fonts};
|
|
--font-family-monospace: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace, #{$emoji_fallback_fonts};
|
|
|
|
/**
|
|
* 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.
|
|
// When adding a new font-size variable, please update the fix-emoji-spacing.ts file.
|
|
--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 and linux platforms
|
|
*/
|
|
--scroll-bar-thumb-background-color: rgba(0, 0, 0, 0.2);
|
|
|
|
/**
|
|
* Background color for custom scroll bars in their active state.
|
|
* The color is applied to the thumb part of the scrollbar.
|
|
*
|
|
* Note: Only applies to win32 and linux 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};
|
|
|
|
// darkened version of gray-400 to get 3:1 contrast ratio against --box-alt-background-color
|
|
--box-border-contrast-color: #{darken($gray-400, 5%)};
|
|
--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
|
|
*/
|
|
--box-hover-background-color: #{$gray-100};
|
|
|
|
/**
|
|
* 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};
|
|
|
|
/**
|
|
* Border styles for selected boxes with active keyboard focus
|
|
*/
|
|
--box-selected-active-border: none;
|
|
|
|
/**
|
|
* 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%)};
|
|
|
|
/**
|
|
* Placeholder color for input boxes
|
|
*/
|
|
--box-placeholder-color: #{$gray-500};
|
|
|
|
/**
|
|
* Author input (co-authors)
|
|
*/
|
|
--co-author-tag-background-color: #{$blue-000};
|
|
--co-author-tag-border-color: #{$blue-200};
|
|
|
|
/**
|
|
* Commit warning badge icon
|
|
*/
|
|
--commit-warning-badge-background-color: #{$gray-000};
|
|
--commit-warning-badge-border: #{$gray-300};
|
|
|
|
/**
|
|
* 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-quint: calc(var(--spacing) * 5);
|
|
--spacing-half: calc(var(--spacing) / 2);
|
|
--spacing-third: calc(var(--spacing) / 3);
|
|
|
|
--border-radius: 6px;
|
|
// When we use the regular border radius (6px) the outline
|
|
// leaves a tiny gap in the corners so we drop down to a
|
|
// similar value than Chrome's default outline border radius.
|
|
--outlined-border-radius: 3px;
|
|
--base-border: 1px solid var(--box-border-color);
|
|
--contrast-border: 1px solid var(--box-border-contrast-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};
|
|
--toolbar-dropdown-text-warning-color: #{$yellow-800};
|
|
--toolbar-dropdown-text-hover-color: var(--box-hover-text-color);
|
|
|
|
--toolbar-tooltip-background-color: #{$gray-800};
|
|
--toolbar-tooltip-shadow-color: black;
|
|
|
|
/**
|
|
* 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};
|
|
--tab-bar-hover-background-color: #{$gray-100};
|
|
|
|
/** 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};
|
|
--list-item-hover-background-color: #{$gray-100};
|
|
|
|
/** Windows/Linux have custom scrollbars, see _scroll.scss */
|
|
--win32-scroll-bar-size: 10px;
|
|
--linux-scroll-bar-size: 10px;
|
|
|
|
/**
|
|
* The z-index for tooltips. Nothing should be higher, but other z-indexes can
|
|
* be defined in terms of it.
|
|
*
|
|
* 20 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.
|
|
*/
|
|
--tooltip-z-index: 20;
|
|
--popup-z-index: 19;
|
|
--popup-overlay-z-index: 18;
|
|
--foldout-z-index: 17;
|
|
--nudge-arrow-z-index: 16;
|
|
--drag-overlay-z-index: 15;
|
|
--side-panel-z-index: 14;
|
|
// We want second level to fall under top level when scrolling
|
|
--list-sticky-header-top-level-z-index: 11;
|
|
--list-sticky-header-second-level-z-index: 10;
|
|
|
|
/**
|
|
* 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)};
|
|
|
|
--tip-box-background-color: #{rgba($blue-500, 0.06)};
|
|
--tip-box-border-color: #{$blue-200};
|
|
|
|
/** 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)};
|
|
|
|
/**
|
|
* Blankslate actions, see `BlankslateAction` component.
|
|
*/
|
|
--primary-suggested-action-background: #{$blue-000};
|
|
--primary-suggested-action-border-color: #{$blue-200};
|
|
--suggested-action-icon-color: #{$blue-400};
|
|
|
|
/**
|
|
* 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);
|
|
|
|
--diff-empty-row-background-color: #{$gray-000};
|
|
--diff-empty-row-gutter-background-color: var(--diff-empty-row-background-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};
|
|
|
|
// Inline form errors, displayed after the input field
|
|
--input-warning-text-color: var(--dialog-warning-color);
|
|
--input-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-information-color: #{$blue-400};
|
|
--dialog-error-color: #{$red};
|
|
|
|
/** File warning */
|
|
--file-warning-background-color: #{$yellow-200};
|
|
--file-warning-color: #{$yellow-800};
|
|
--file-warning-border-color: #{rgba($yellow-700, 0.4)};
|
|
|
|
/** Tooltips */
|
|
--tooltip-background-color: #{$gray-900};
|
|
--tooltip-color: #{$gray-100};
|
|
--tooltip-shadow-color: #{rgba($gray-900, 0.65)};
|
|
|
|
/** Inline paths and code */
|
|
--path-segment-background: #{$blue-000};
|
|
--path-segment-background-focus: #{darken($blue-000, 5%)};
|
|
--path-segment-padding: var(--spacing-third);
|
|
|
|
// 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);
|
|
|
|
/** rebase progress bar */
|
|
--dialog-progress-background: #{$green};
|
|
|
|
/** merge/rebase status indicators */
|
|
--status-pending-color: #{$yellow-700};
|
|
--status-error-color: #{$red-500};
|
|
--status-success-color: #{$green-500};
|
|
|
|
// PR status icon colors
|
|
--pr-open-icon-color: #{$green-500};
|
|
--pr-draft-icon-color: #{$gray-500};
|
|
|
|
// PR review colors
|
|
--pr-timeline-line-color: var(--box-border-color);
|
|
--pr-changes-requested-icon-color: #{$white};
|
|
--pr-changes-requested-icon-background-color: #cf222e;
|
|
--pr-approved-icon-color: #{$white};
|
|
--pr-approved-icon-background-color: #2da44e;
|
|
--pr-commented-icon-color: var(--md-fg-muted-color);
|
|
--pr-commented-icon-background-color: #eaeef2;
|
|
|
|
--call-to-action-bubble-border-color: #{$green};
|
|
--call-to-action-bubble-color: #{$green};
|
|
|
|
--title-tool-tip-background-color: rgb(236, 236, 236);
|
|
--title-tool-tip-shadow: 1px 2px 5px 0px rgb(125, 125, 125, 0.5);
|
|
|
|
// Markdown colors
|
|
--md-border-default-color: #d0d7de;
|
|
--md-border-muted-color: hsla(210, 18%, 87%, 1);
|
|
--md-canvas-default-color: #ffffff;
|
|
--md-canvas-subtle-color: #f6f8fa;
|
|
--md-fg-default-color: #24292f;
|
|
--md-fg-muted-color: #57606a;
|
|
--md-danger-fg-color: #cf222e;
|
|
--md-neutral-muted-color: rgba(175, 184, 193, 0.2);
|
|
--md-accent-emphasis-color: #0969da;
|
|
--md-accent-fg-color: #0969da;
|
|
}
|
|
|
|
::backdrop {
|
|
--overlay-background-color: #{$overlay-background-color};
|
|
}
|