// Variables
//
// This files contains CSS variables accessible to all selectors

// Primer colors, see https://github.com/primer/primer-css/blob/master/modules/primer-support/lib/variables/color-system.scss
@import '~primer-support/lib/variables/color-system.scss';

// Extracted as a SCSS variable so that we can define the --overlay-background-color
// on both the :root and the ::backdrop scope. The ::backdrop pseudo-element
// doesn't inherit :root, see
// https://bugs.chromium.org/p/chromium/issues/detail?id=594096
$overlay-background-color: rgba(0, 0, 0, 0.4);

:root {
  --color-new: #{$green};
  --color-deleted: #{$red};
  --color-modified: #{$yellow-700};
  --color-renamed: #{$blue};
  --color-conflicted: #{$orange};

  --text-color: #{$gray-900};
  --text-secondary-color: #{$gray-500};
  --background-color: #{$white};

  --button-height: 25px;

  --button-background: #{$blue};
  --button-border-radius: 2px;
  --button-hover-background: lighten(#{$blue}, 5%);
  --button-text-color: #{$white};
  --button-focus-border-color: #{$blue-600};

  --link-button-color: #{$blue};
  --link-button-hover-color: #{$blue-600};

  --secondary-button-background: #{$gray-000};
  --secondary-button-hover-background: #{$white};
  --secondary-button-text-color: var(--text-color);
  --secondary-button-focus-shadow-color: rgba(#{$gray-200}, 0.75);
  --secondary-button-focus-border-color: #{$gray-300};

  // Typography
  //
  // Font, line-height, and color for body text, headings, and more.
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-family-monospace: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /**
   * Font weight to use for semibold text
   */
  --font-weight-semibold: 600;

  /**
   * Font weight to use for light text
   */
  --font-weight-light: 300;

  // Pixel value used to responsively scale all typography. Applied to the `<html>` element.
  --font-size: 12px;
  --font-size-sm: 11px;
  --font-size-md: 14px;
  --font-size-lg: 28px;
  --font-size-xl: 32px;
  --font-size-xxl: 42px;

  /** Extra small font size, be very conservative with the use of this */
  --font-size-xs: 9px;

  /**
   * Background color for custom scroll bars.
   * The color is applied to the thumb part of the scrollbar.
   *
   * Note: Only applies to win32 platforms
   */
  --scroll-bar-thumb-background-color: rgba(0, 0, 0, 0.2);

  /**
   * Background color for custom scroll bars in their active state.
   * The color is applied to the thumb part of the scrollbar.
   *
   * Note: Only applies to win32 platforms
   */
  --scroll-bar-thumb-background-color-active: rgba(0, 0, 0, 0.5);

  // Box
  //
  // We use the term 'box' here to refer to a very high-level generic
  // component that fits many use cases. A 'box' might be a list item
  // or an item in a tab control header. It's up to each implementation
  // to decide what states to support (active selection, selection, etc).

  --box-background-color: var(--background-color);
  --box-alt-background-color: #{$gray-100};

  /**
   * Background color for skeleton or "loading" boxes
   */
  --box-skeleton-background-color: #{$gray-200};
  --skeleton-background-gradient: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);

  /**
   * Border color for boxes.
   */
  --box-border-color: #{$gray-200};
  --box-border-accent-color: #{$blue};

  /**
   * Background color for selected boxes without keyboard focus
   */
  --box-selected-background-color: #ebeef1;

  /**
   * Text color for when a user hovers over a boxe with a
   * pointing device. Should not be used by boxes that doesn't
   * implement a hover state since this will conflict with
   * selection and active selection
   */
  --box-hover-text-color: #{$gray-900};

  /**
   * Background color for when a user hovers over a boxe with a
   * pointing device. Should not be used by boxes that doesn't
   * implement a hover state since this will conflict with
   * selection and active selection
   */

  /**
   * Text color for selected boxes without keyboard focus
   */
  --box-selected-text-color: #{$gray-900};

  /**
   * Border color for selected boxes without keyboard focus
   */
  --box-selected-border-color: #{$gray-400};

  /**
   * Background color for selected boxes with active keyboard focus
   */
  --box-selected-active-background-color: #{$blue};

  /**
   * Text color for selected boxes with active keyboard focus
   */
  --box-selected-active-text-color: #{$white};

  /**
   * Border color for selected boxes with active keyboard focus
   */
  --box-selected-active-border-color: #{$gray-400};

  /**
   * Gradient used to indicate that content is overflowing, intended
   * for use when content can be expanded through other means than
   * scrolling.
   */
  --box-overflow-shadow-background: linear-gradient(180deg, rgba(#{$white}, 0) 0%, rgba(#{$white}, 1) 90%, rgba(#{$white}, 1) 100%);

  /**
   * Author input (co-authors)
   */
  --co-author-tag-background-color: #{$blue-000};
  --co-author-tag-border-color: #{$blue-200};

  /**
   * The height of the title bar area on Win32 platforms
   * If changed, update titleBarHeight in 'app/src/ui/dialog/dialog.tsx'
  */
  --win32-title-bar-height: 28px;
  --win32-title-bar-background-color: #{$gray-900};

  /**
   * The height of the title bar area on darwin platforms
   * If changed, update titleBarHeight in 'app/src/ui/dialog/dialog.tsx'
  */
  --darwin-title-bar-height: 22px;

  --spacing: 10px;
  --spacing-double: calc(var(--spacing) * 2);
  --spacing-triple: calc(var(--spacing) * 3);
  --spacing-quad: calc(var(--spacing) * 4);
  --spacing-half: calc(var(--spacing) / 2);
  --spacing-third: calc(var(--spacing) / 3);

  --border-radius: 3px;
  --base-border: 1px solid var(--box-border-color);

  --shadow-color: rgba(71, 83, 95, 0.19);
  --base-box-shadow: 0 2px 7px var(--shadow-color);

  --toolbar-height: 50px;

  --toolbar-background-color: #{$gray-900};
  --toolbar-border-color: #{$gray-900};
  --toolbar-text-color: #{$white};
  --toolbar-text-secondary-color: #{$gray-300};

  --toolbar-button-color: var(--toolbar-text-color);
  --toolbar-button-background-color: transparent;
  --toolbar-button-border-color: black;
  --toolbar-button-secondary-color: var(--toolbar-text-secondary-color);

  --toolbar-button-hover-color: #{$white};
  --toolbar-button-hover-background-color: #{$gray-800};
  --toolbar-button-hover-border-color: var(--toolbar-button-border-color);

  --toolbar-button-focus-background-color: #{$gray-800};

  --toolbar-button-active-color: var(--text-color);
  --toolbar-button-active-background-color: var(--background-color);
  --toolbar-button-active-border-color: var(--background-color);

  --toolbar-button-progress-color: #{$gray-800};
  --toolbar-button-focus-progress-color: #{$gray-700};
  --toolbar-button-hover-progress-color: #{$gray-700};
  --toolbar-dropdown-open-progress-color: #{$gray-200};

  /**
   * App menu bar colors (Windows/Linux only)
   */
  --app-menu-button-color: var(--toolbar-text-color);
  --app-menu-button-hover-color: var(--toolbar-button-hover-color);
  --app-menu-button-hover-background-color: var(--toolbar-button-hover-background-color);
  --app-menu-button-active-color: var(--toolbar-button-active-color);
  --app-menu-button-active-background-color: var(--toolbar-button-active-background-color);
  --app-menu-pane-color: var(--text-color);
  --app-menu-pane-secondary-color: var(--text-secondary-color);
  --app-menu-pane-background-color: var(--toolbar-button-active-background-color);
  --app-menu-divider-color: var(--box-border-color);

  /**
    * Background color for badges inside of toolbar buttons.
    * Examples of badges are the ahead/behind bubble in the
    * push/pull button and the PR badge in the branch drop
    * down button.
    */
  --toolbar-badge-background-color: #{$gray-600};
  --toolbar-badge-active-background-color: #{$gray-200};

  --tab-bar-height: 29px;
  --tab-bar-active-color: #{$blue};
  --tab-bar-background-color: #{$white};

  /** Count bubble colors when used inside of a tab bar item */
  --tab-bar-count-color: var(--text-color);
  --tab-bar-count-background-color: #{$gray-200};

  /**
    * Badge colors when used inside of list items.
    * Example of this is the change indicators inside
    * of the repository list.
    */
  --list-item-badge-color: #{$gray-800};
  --list-item-badge-background-color: #{$gray-200};
  --list-item-selected-badge-color: #{$gray-900};
  --list-item-selected-badge-background-color: #{$gray-300};
  --list-item-selected-active-badge-color: #{$gray-900};
  --list-item-selected-active-badge-background-color: #{$white};

  /** Win32 has custom scrol bars, see _scroll.scss */
  --win32-scroll-bar-size: 10px;

  /**
   * The z-index for popups. Nothing should be higher, but other z-indexes can
   * be defined in terms of it.
   *
   * 10 seems arbitrary (because it is) but we have to go that high because
   * codemirror is all over the place with their z-indexes and uses at least
   * 0-6.
   */
  --popup-z-index: 10;
  --popup-overlay-z-index: calc(var(--popup-z-index) - 1);
  --foldout-z-index: calc(var(--popup-z-index) - 2);

  /**
   * Toast notifications are shown temporarily for things like the zoom
   * percentage changing or the app toggling between full screen and normal
   * window mode.
   */
  --toast-notification-color: #{$gray-000};
  --toast-notification-background-color: rgba(#{$gray-900}, 0.6);

  /** The highlight color used for focus rings and focus box shadows */
  --focus-color: #{$blue};

  /**
   * Variables for form elements
   */
  --text-field-height: 25px;
  --text-field-focus-shadow-color: rgba(#{$blue}, 0.25);

  /**
   * Diff view
   */

  --diff-line-padding-y: 2px;

  --diff-text-color: #{$gray-900};
  --diff-border-color: #{$gray-200};
  --diff-gutter-color: #{$gray-200};
  --diff-gutter-background-color: var(--background-color);

  --diff-line-number-color: #{$gray-700};
  --diff-line-number-column-width: 50px;

  --diff-selected-background-color: #{$blue-400};
  --diff-selected-border-color: #{$blue-600};
  --diff-selected-gutter-color: #{$blue-600};
  --diff-selected-text-color: var(--background-color);

  --diff-add-background-color: darken(#{$green-000}, 2%);
  --diff-add-border-color: #{$green-300};
  --diff-add-gutter-color: #{$green-300};
  --diff-add-gutter-background-color: darken(#{$green-100}, 3%);
  --diff-add-inner-background-color: #acf2bd;
  --diff-add-text-color: var(--diff-text-color);

  --diff-delete-background-color: #{$red-000};
  --diff-delete-border-color: #{$red-200};
  --diff-delete-gutter-color: #{$red-200};
  --diff-delete-gutter-background-color: #{$red-100};
  --diff-delete-inner-background-color: #fdb8c0;
  --diff-delete-text-color: var(--diff-text-color);

  --diff-hunk-background-color: #{$blue-000};
  --diff-hunk-border-color: #{$blue-200};
  --diff-hunk-gutter-color: darken(#{$blue-200}, 5%);
  --diff-hunk-gutter-background-color: #{$blue-100};
  --diff-hunk-text-color: #{$gray};

  --diff-hover-background-color: #{$blue-300};
  --diff-hover-border-color: #{$blue-400};
  --diff-hover-gutter-color: #{$blue-400};
  --diff-hover-text-color: var(--background-color);

  --diff-add-hover-background-color: #{$green-300};
  --diff-add-hover-border-color: #{$green-400};
  --diff-add-hover-gutter-color: #{$green-400};
  --diff-add-hover-text-color: var(--text-color);

  --diff-delete-hover-background-color: #{$red-200};
  --diff-delete-hover-border-color: #{$red-300};
  --diff-delete-hover-gutter-color: #{$red-300};
  --diff-delete-hover-text-color: var(--text-color);

  // Syntax highlighting text colors
  --syntax-variable-color: #6f42c1;
  --syntax-alt-variable-color: #24292e;
  --syntax-keyword-color: #d73a49;
  --syntax-atom-color: #005cc5;
  --syntax-string-color: #032f62;
  --syntax-qualifier-color: #6f42c1;
  --syntax-type-color: #d73a49;
  --syntax-comment-color: #{$gray-500};
  --syntax-tag-color: #22863a;
  --syntax-attribute-color: #6f42c1;
  --syntax-link-color: #032f62;
  --syntax-header-color: #0000ff;

  // Note that this duration *must* match the `UndoCommitAnimationTimeout`
  // specified in `changes/index.tsx`.
  --undo-animation-duration: 500ms;

  // Colors for form errors
  --error-color: #{$red};
  --form-error-background: #{$red-100};
  --form-error-border-color: #{$red-200};
  --form-error-text-color: #{$red-800};

  /** Overlay is used as a background for both modals and foldouts */
  --overlay-background-color: #{$overlay-background-color};

  /** Dialog */
  --dialog-warning-color: #{$yellow-600};
  --dialog-error-color: #{$red};

  /** Inline paths and code */
  --path-segment-background: #{$blue-000};
  --path-segment-padding: var(--spacing-third);

  /** Diverging notification banner colors */
  --notification-banner-background: #{$blue-000};
  --notification-banner-border-color: #{$blue-200};
  --notification-ref-background: rgba(255, 255, 255, 0.75);

  // http://easings.net/#easeOutBack
  --easing-ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  // http://easings.net/#easeInBack
  --easing-ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);

  // http://easings.net/#easeOutQuint
  --easing-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
}

::backdrop {
  --overlay-background-color: #{$overlay-background-color};
}
