// 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';

// This should be something like
// @media (prefers-color-scheme: dark)
// See https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
// https://www.electronjs.org/docs/api/native-theme#nativethemethemesource

// This blue passes WCAG 2 guidelines with $gray-100 fg and $gray-900 bg.
$link-color: #2e8fff;

body.theme-dark {
  --color-new: #{$green};
  --color-deleted: #{$red};
  --color-modified: #{$yellow-700};
  --color-renamed: #{$blue};
  --color-conflicted: #{$orange};

  --text-color: #{$gray-100};
  --text-secondary-color: #{$gray-400};
  --text-secondary-color-muted: #{darken($gray-500, 10%)};
  --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: #{$link-color};
  --link-button-hover-color: #{lighten($link-color, 3%)};
  --link-button-selected-hover-color: #{$link-color};

  --secondary-button-background: #{$gray-800};
  --secondary-button-border-color: var(--box-border-contrast-color);
  --secondary-button-hover-border-color: #{$gray-300};
  --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};

  /**
   * Color for icons that are placed on top of a colored backing
   * (like a circle badge icon)
   */
  --badge-icon-color: #{$gray-300};

  // Colors used for icons that are inside an input box
  --input-icon-warning-color: #{$yellow-600};
  --input-icon-error-color: #{$red-400};
  --input-icon-hover-background-color: #{$gray-800};

  // 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);

  // Colors used for the separator of commit message action buttons
  // (e.g. co-authors and Copilot buttons)
  --commit-message-action-button-separator-color: var(--box-border-contrast-color);

  /**
   * 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(255, 255, 255, 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(255, 255, 255, 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: #{darken($gray-900, 3%)};
  --box-alt-background-color: #{lighten($gray-900, 3%)};

  /**
   * 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;

  // slightly lighter of gray-500 to get 3:1 contrast ratio against
  // --box-alt-background-color
  --box-border-contrast-color: #{lighten($gray-500, 3%)};
  --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
   */
  --box-hover-background-color: #{$gray-800};

  /**
   * 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%)};

  /**
   * Gradient used to indicate that content is overflowing, intended
   * for use when content can be expanded through other means than
   * scrolling. Used in conjuction with background-size, background-attachment, background-repeat.
   */
  --no-shadow-top: #{linear-gradient($gray-900, rgba(255, 255, 255, 0))};
  --no-shadow-bottom: #{linear-gradient(rgba(255, 255, 255, 0), $gray-900)};
  --top-shadow: #{linear-gradient(0deg, rgba($gray-900, 0) 0%, rgba(black, 0.6) 90%, rgba(black, 1) 100%)};
  --bottom-shadow: #{linear-gradient(180deg, rgba($gray-900, 0) 0%, rgba(black, 0.6) 90%, rgba(black, 1) 100%) 0 100%};
  --box-overflow-shadow-background-two: #{var(--no-shadow-top), var(--no-shadow-bottom) 0 100%, var(--top-shadow), var(--bottom-shadow)};

  /**
   * Placeholder color for input boxes
   */
  --box-placeholder-color: #{$gray-400};

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

  /**
   * Commit warning badge icon
   */
  --commit-warning-badge-background-color: #{$gray-900};
  --commit-warning-badge-border-color: #{$gray-700};

  --base-border: 1px solid var(--box-border-color);
  --contrast-border: 1px solid var(--box-border-contrast-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(--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: #{$orange-600};
  --toolbar-dropdown-text-hover-color: #{$white};

  --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(--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);
  --tab-bar-hover-background-color: #{$gray-800};

  /** 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};
  --list-item-hover-background-color: #{$gray-800};

  /**
   * 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};
  --diff-linenumber-focus-color: #{$blue-200};

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

  /**
   * Blankslate actions, see `BlankslateAction` component.
   */
  --primary-suggested-action-background: #{$blue-900};
  --primary-suggested-action-border-color: #{$blue-700};
  --suggested-action-icon-color: #{$blue-400};

  /**
   * 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);

  --diff-empty-row-background-color: #{darken($gray-900, 1%)};
  --diff-empty-row-gutter-background-color: var(--diff-gutter-background-color);
  --diff-empty-hunk-handle: #{$gray-700};

  // 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};
  --syntax-quote-color: #{$green-400};

  // 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);

  --dialog-banner-success-background: rgba(22, 92, 38, 0.7);
  --dialog-banner-success-border-color: #{$green-800};
  --dialog-banner-success-text-color: var(--text-color);

  // Inline form errors, displayed after the input field
  --input-warning-text-color: var(--dialog-warning-color);
  --input-error-text-color: #{$red-300};

  /** 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-information-color: #{$blue-400};
  --dialog-error-color: #{$red-600};

  /** Banner */
  --banner-warning-background: #272216;
  --banner-warning-text-color: var(--text-color);
  --banner-warning-link-color: #6682ff;
  --banner-warning-icon-color: #{$yellow-700};

  /** File warning */
  --file-warning-background-color: #{rgba($yellow-900, 0.4)};
  --file-warning-color: #{$yellow-700};
  --file-warning-border-color: #{rgba($yellow-800, 0.4)};

  /** Tooltips */
  --tooltip-background-color: #{$gray-800};
  --tooltip-color: #{$gray-100};
  --tooltip-shadow-color: #{$black};

  /** Inline paths and code */
  --path-segment-background: #{$gray-700};
  --path-segment-background-focus: #{lighten($gray-700, 5%)};

  .blankslate-image {
    filter: #{'invert()'} grayscale(1) brightness(8) contrast(0.6);
  }

  /** 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-400};

  // PR review colors
  --pr-timeline-line-color: #{$gray-500};
  --pr-changes-requested-icon-background-color: #da3633;
  --pr-approved-icon-background-color: #2da44e;
  --pr-commented-icon-color: #8b949e;
  --pr-commented-icon-background-color: #{$gray-700};

  --call-to-action-bubble-background-color: #{$blue};
  --call-to-action-bubble-color: #{$white};

  --title-tool-tip-background-color: rgb(56, 58, 62);
  --title-tool-tip-shadow: none;

  // Markdown colors
  --md-border-default-color: #30363d;
  --md-border-muted-color: #21262d;
  --md-canvas-default-color: #0d1117;
  --md-canvas-subtle-color: #161b22;
  --md-fg-default-color: #c9d1d9;
  --md-fg-muted-color: #8b949e;
  --md-danger-fg-color: #f85149;
  --md-neutral-muted-color: rgba(110, 118, 129, 0.4);
  --md-accent-emphasis-color: #1f6feb;
  --md-accent-fg-color: #58a6ff;
}

// this emulates the cursor for the co-author input because it isn't exactly
// an input element. credit for identify the right CSS class name goes to
// this post: https://css-tricks.com/snippets/css/solarized-theme-for-codemirror-and-prettify/
.CodeMirror-cursor {
  border-left-color: currentColor;
}
