blueprint-modern.scss

/*

Copyright 2021-present Palantir Technologies, Inc. All rights reserved.
Licensed under the Apache License, Version 2.0.

*/

// Import files in the same order that they are documented in the docs
@import "~@blueprintjs/colors/lib/scss/colors";
@import "common/variables";

@import "reset";
@import "typography";
@import "accessibility/focus-states";

// Extended color pallete
$blue6: #99c4ff;
$green6: #7cd7a2;
$orange6: #f5c186;
$red6: #ffa1a4;

// Button variables and overrides
$button-active-minimal-intent-text-modern: (
  "primary": $blue1,
  "success": $green1,
  "warning": $orange1,
  "danger": $red1
);

$dark-minimal-button-intents-modern: (
  "primary": (rgba($blue3, 0.2), $blue5, rgba($blue3, 0.3), $blue6),
  "success": (rgba($green3, 0.2), $green5, rgba($green3, 0.3), $green6),
  "warning": (rgba($orange3, 0.2), $orange5, rgba($orange3, 0.3), $orange6),
  "danger": (rgba($red3, 0.2), $red5, rgba($red3, 0.3), $red6)
);
$minimal-button-background-color-hover: rgba($gray3, 0.15);
$minimal-button-background-color-active: rgba($gray3, 0.3);

// Checkbox and Radio variable overrides
$dark-control-background-color: $gray4;
$dark-control-background-color-hover: $gray3;
$dark-control-background-color-active: linear-gradient(0deg, rgba($white, 0.1), rgba($white, 0.1)),
  linear-gradient(0deg, $gray2, $gray2);

// Editable text variable overrides
$input-placeholder-color: $gray1;
$dark-input-placeholder-color: $gray4;

// Input variables and overrides
$dark-input-intent-box-shadow-colors: (
  "primary": $blue4,
  "success": $green4,
  "warning": $orange4,
  "danger" : $red4,
);
$dark-input-shadow-color-focus: $blue4;

// Menu variables
$menu-item-intent-colors-modern: (
  "primary": (rgba($blue3, 0.1), $blue2, rgba($blue3, 0.2), $blue1),
  "success": (rgba($green3, 0.1), $green2, rgba($green3, 0.2), $green1),
  "warning": (rgba($orange3, 0.1), $orange2, rgba($orange3, 0.2), $orange1),
  "danger" : (rgba($red3, 0.1), $red2, rgba($red3, 0.2), $red1),
);

// Slider variable overrides
$button-box-shadow-overlay:
  0 0 0 1px rgba($black, 0.5),
  0 1px 1px rgba($black, 0.5);

// Switch variable overrides
$switch-indicator-background-color: rgba($gray3, 0.3);
$switch-checked-background-color-hover: $blue2;
$switch-checked-background-color-active: $blue1;

// Tag variables
$tag-intent-colors-modern: (
  "primary": ($pt-intent-primary, $blue2, $blue1, $white, $white),
  "success": ($pt-intent-success, $green2, $green1, $white, $white),
  "warning": ($orange5, $orange4, $orange3, $pt-text-color, $pt-text-color),
  "danger": ($pt-intent-danger, $red2, $red1, $white, $white)
);

$minimal-tag-intent-colors-modern: (
  "primary": ($pt-intent-primary, $blue2, $blue1, $blue1),
  "success": ($pt-intent-success, $green2, $green1, $green1),
  "warning": ($pt-intent-warning, $orange2, $orange1, $orange1),
  "danger": ($pt-intent-danger, $red2, $red1, $red1)
);

$minimal-dark-tag-intent-colors-modern: (
  "primary": ($pt-intent-primary, $blue5, $blue6, $blue6),
  "success": ($pt-intent-success, $green5, $green6, $green6),
  "warning": ($pt-intent-warning, $orange5, $orange6, $orange6),
  "danger": ($pt-intent-danger, $red5, $red1, $red6, $red6)
);

// Toast variables
$toast-intent-button-colors-modern: (
  "primary": ($pt-intent-primary, $white, $blue2, $blue1, rgba($white, 0.7)),
  "success": ($pt-intent-success, $white, $green2, $green1, rgba($white, 0.7)),
  "warning": ($orange5, $dark-gray1, $orange4, $orange3, rgba($dark-gray1, 0.7)),
  "danger": ($pt-intent-danger, $white, $red2, $red1, rgba($white, 0.7))
);

// Tree variables
$tree-intent-icon-colors-modern: (
  "primary": $blue5,
  "success": $green5,
  "warning": $orange5,
  "danger" : $red5,
);


@import "components/index";

// Mixin helpers used across multiple components
@mixin pt-button-minimal-dark-intent-modern(
  $hover-color,
  $hover-text,
  $active-color,
  $active-text
) {
  &:hover:not(:disabled) {
    background: $hover-color;
    color: $hover-text;
  }

  &:active:not(:disabled) {
    background: $active-color;
    color: $active-text;
  }
}

// Contrast for breadcrumbs
.#{$ns}-breadcrumbs-collapsed {
  background: rgba($gray3, 0.15);

  &:hover {
    background: rgba($gray3, 0.3);
  }
}


.#{$ns}-dark {
  .#{$ns}-breadcrumbs {
    > li::after {
      background: svg-icon("16px/chevron-right.svg", (path: (fill: $pt-dark-icon-color)));
    }
  }
  .#{$ns}-breadcrumbs-collapsed {
    background: rgba($gray3, 0.2);

    &::before {
      background: svg-icon("16px/more.svg", (circle: (fill: $pt-dark-icon-color))) center no-repeat;
    }

    &:hover {
      background: rgba($gray3, 0.3);
    }
  }
}

// Contrast for buttons
.#{$ns}-button {
  // Use dark text for warning intent
  &.#{$ns}-intent-warning:not([class*="#{$ns}-minimal"]) {
    &:not(:disabled) {
      background: $orange5;
      color: $pt-text-color;

      .#{$ns}-icon>svg:not([fill]) {
        color: rgba($dark-gray1, 0.7);
      }

      &:hover {
        background: $orange4;
      }

      &:active {
        background: $orange3;
      }
    }

    &:disabled {
      color: $pt-text-color-disabled;

      .#{$ns}-dark & {
        color: $pt-dark-text-color-disabled;
      }
    }
  }


  &.#{$ns}-minimal {
    @mixin pt-button-minimal-intent-modern($active-text-color) {
      &:active:not(:disabled) {
        color: $active-text-color;
      }
    }

    @each $intent, $colors in $button-intents {
      &.#{$ns}-intent-#{$intent} {
        @include pt-button-minimal-intent-modern(
          map-get($button-active-minimal-intent-text-modern, $intent),
        );
      }
    }

    .#{$ns}-dark & {
      &:not([class*="#{$ns}-intent-"]):not(:disabled) {
        color: $white;
      }

      @each $intent, $color in $dark-minimal-button-intents-modern {
        &.#{$ns}-intent-#{$intent} {
          @include pt-button-minimal-dark-intent-modern($color...);
        }
      }
    }
  }
}

// Contrast for callouts
.#{$ns}-callout {
  background-color: rgba($gray3, 0.15);

  .#{$ns}-dark & {
    background-color: rgba($gray3, 0.2);

    &.#{$ns}-callout-icon:not([class*="#{$ns}-intent-"]) > .#{$ns}-icon:first-child {
      color: $pt-dark-icon-color;
    }
  }

  @each $intent, $color in $pt-intent-colors {
    &.#{$ns}-intent-#{$intent} {
      background-color: rgba($color, 0.1);

      .#{$ns}-dark & {
        background-color: rgba($color, 0.2);
      }
    }
  }
}

// Contrast for checkboxes and radio buttons
.#{$ns}-control {
  input:focus ~ .#{$ns}-control-indicator {
    outline: $blue3 auto 2px;
  }

  &.#{$ns}-checkbox, &.#{$ns}-radio {
    .#{$ns}-control-indicator {
      box-shadow:
        inset 0 0 0 $button-border-width rgba($black, 0.5),
        inset 0 (-$button-border-width) 0 rgba($black, 0.1);
    }
  }

  .#{$ns}-dark & {
    input:focus ~ .#{$ns}-control-indicator {
      outline: $blue5 auto 2px;
    }

    &.#{$ns}-checkbox, &.#{$ns}-radio {
      input:not(:disabled):not(:checked) ~ .#{$ns}-control-indicator {
        box-shadow: $dark-button-box-shadow-active;
      }

      input:not(:disabled):active:checked ~ .#{$ns}-control-indicator {
        background: linear-gradient(180deg, rgba($white, 0.1) 0%, rgba($white, 0) 100%),
          linear-gradient(0deg, $blue1, $blue1);
      }
    }
  }
}


// Contrast for disabled editable text
.#{$ns}-editable-text.#{$ns}-disabled {
  > .#{$ns}-editable-text-content {
    color: $pt-text-color-disabled;

    .#{$ns}-dark & {
      color: $pt-dark-text-color-disabled;
    }
  }
}

// Contrast for HTML tables
table.#{$ns}-html-table {
  &.#{$ns}-html-table-striped {
    tbody tr:nth-child(odd) td {
      background: rgba($gray3, 0.15);
    }
  }

  &.#{$ns}-interactive {
    tbody tr {
      &:hover td {
        background-color: rgba($gray3, 0.3);
        cursor: pointer;
      }

      &:active td {
        background-color: rgba($gray3, 0.35);
      }
    }
  }
}

// Contrast for inputs
.#{$ns}-input-group {
  .#{$ns}-input {
    // Use intent-styled box-shadows for default intent
    box-shadow: input-transition-shadow($input-shadow-color-focus),
        inset border-shadow(1, $gray2),
        $pt-input-box-shadow;

    &:focus {
      box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
    }

    .#{$ns}-dark & {
      box-shadow: dark-input-transition-shadow($dark-input-shadow-color-focus),
        inset border-shadow(1, $gray3),
        $pt-dark-input-box-shadow;

      &:focus {
        box-shadow: dark-input-transition-shadow($dark-input-shadow-color-focus, true),
                      $pt-dark-input-box-shadow;
      }
    }
  }

  @each $intent, $color in $dark-input-intent-box-shadow-colors {
    &.#{$ns}-intent-#{$intent} {
      .#{$ns}-input {
        @include pt-dark-input-intent($color);
      }
    }
  }
}

// Contrast for menus
.#{$ns}-menu-item {
  @mixin menu-item-intent-modern(
    $hover-background-color,
    $hover-text-color,
    $active-background-color,
    $active-text-color) {
    &:hover {
      background: $hover-background-color;
      color: $hover-text-color;

      .#{$ns}-menu-item-label {
        color: $hover-text-color;
      }
    }

    &:active {
      background: $active-background-color;
      color: $active-text-color;
    }
  }

  &:not([class*="#{$ns}-intent-"]) {
    &:hover {
      background: rgba($gray3, 0.1);
    }

    &:active {
      background: rgba($gray3, 0.2);

      .#{$ns}-menu-item-label {
        color: $pt-text-color;
      }
    }
  }

  @each $intent, $color in $menu-item-intent-colors-modern {
    &.#{$ns}-intent-#{$intent} {
      @include menu-item-intent-modern($color...);
    }
  }

  .#{$ns}-dark & {
    &:not([class*="#{$ns}-intent-"]) {
      &:hover {
        .#{$ns}-icon:first-child {
          color: $pt-dark-icon-color;
        }
      }

      &:active {
        .#{$ns}-menu-item-label {
          color: $light-gray5;
        }
      }
    }

    @each $intent, $color in $dark-minimal-button-intents-modern {
      &.#{$ns}-intent-#{$intent} {
        @include pt-button-minimal-dark-intent-modern($color...);

        &:hover {
          .#{$ns}-menu-item-label {
            color: nth($color, 2);
          }
        }

        &:active {
          .#{$ns}-menu-item-label {
            color: nth($color, 4);
          }
        }
      }
    }
  }
}

// Contrast for sliders
.#{$ns}-slider-handle {
  .#{$ns}-dark & {
    background-color: $gray4;

    &:hover {
      background-color: $gray3;
    }

    &:active,
    &.#{$ns}-active {
      background:
        linear-gradient(0deg, rgba($white, 0.1), rgba($white, 0.1)),
        linear-gradient(0deg, $gray2, $gray2);
    }
  }
}

// Contrast for switches
.#{$ns}-control.#{$ns}-switch {

  // Switch background styles
  input:not(:disabled):hover ~ .#{$ns}-control-indicator {
    background-color: rgba($gray3, 0.5);
  }

  input:not(:disabled):active ~ .#{$ns}-control-indicator {
    background-color: rgba($gray3, 0.6);
  }

  // Checked switch background styles
  input:checked:not(:disabled) ~ .#{$ns}-control-indicator {
    background: $blue3;
  }

  input:checked:not(:disabled):hover ~ .#{$ns}-control-indicator {
    background: $blue2;
  }

  input:checked:not(:disabled):active ~ .#{$ns}-control-indicator {
    background: $blue1;
  }

  // Switch handle styles
  .#{$ns}-control-indicator::before {
    background: linear-gradient(180deg, rgba($white, 0.8) 0%, rgba($white, 0) 100%),
  linear-gradient(0deg, $light-gray5, $light-gray5);
  }

  input:not(:disabled):hover ~ .#{$ns}-control-indicator::before {
    background: linear-gradient(180deg, rgba($white, 0.5) 0%, rgba($white, 0) 100%),
    linear-gradient(0deg, $light-gray4, $light-gray4);
  }

  input:not(:disabled):active ~ .#{$ns}-control-indicator::before {
    background: $light-gray2;
  }

  // Dark switch styles
  .#{$ns}-dark & {
    // Dark switch background styles
    input:not(:disabled) ~ .#{$ns}-control-indicator {
      background: rgba($black, 0.5);
    }

    input:not(:disabled):hover ~ .#{$ns}-control-indicator {
      background: rgba($black, 0.65);
    }

    input:not(:disabled):active ~ .#{$ns}-control-indicator {
      background: rgba($black, 0.8);
    }

    // Dark checked switch background styles
    input:checked:not(:disabled) ~ .#{$ns}-control-indicator {
      background: $blue3;
    }

    input:checked:not(:disabled):hover ~ .#{$ns}-control-indicator {
      background: $blue2;
    }

    input:checked:not(:disabled):active ~ .#{$ns}-control-indicator {
      background: $blue1;
    }

    // Dark switch handle styles
    input:not(:disabled):not(:checked) ~ .#{$ns}-control-indicator::before {
      background: $gray4;
    }

    input:not(:disabled):not(:checked):hover ~ .#{$ns}-control-indicator::before {
      background: $gray3;
    }

    input:not(:disabled):not(:checked):active ~ .#{$ns}-control-indicator::before {
      background: linear-gradient(0deg, rgba($white, 0.1), rgba($white, 0.1)),
      linear-gradient(0deg, $gray2, $gray2);
    }

    // Dark checked switch handle styles
    input:checked:not(:disabled) ~ .#{$ns}-control-indicator::before {
      background: linear-gradient(180deg, rgba($white, 0.8) 0%, rgba($white, 0) 100%),
      linear-gradient(0deg, $light-gray5, $light-gray5);
    }

    input:checked:not(:disabled):hover ~ .#{$ns}-control-indicator::before {
      background: linear-gradient(180deg, rgba($white, 0.5) 0%, rgba($white, 0) 100%),
      linear-gradient(0deg, $light-gray4, $light-gray4);
    }

    input:checked:not(:disabled):active ~ .#{$ns}-control-indicator::before {
      background: $light-gray2;
    }
  }
}

// Contrast for tags
.#{$ns}-tag {
  @mixin pt-tag-modern(
    $background-color,
    $hover-color,
    $active-color,
    $text-color,
    $cross-button-color
  ) {
    background: $background-color;
    color: $text-color;
    &.#{$ns}-interactive {
      &:hover {
        background-color: $hover-color;
      }

      &:active {
        background-color: $active-color;
      }
    }

    .#{$ns}-tag-remove > .#{$ns}-icon:first-child {
      color: rgba($cross-button-color, 0.7);

      &:hover {
        color: $cross-button-color;
      }

      &:active {
        color: $cross-button-color;
      }
    }
  }

  @mixin pt-tag-minimal-intent-modern(
    $background-color,
    $text-color,
    $hover-text-color,
    $active-text-color
  ) {
    background-color: rgba($background-color, 0.1);
    color: $text-color;

    &.#{$ns}-interactive {
      &:hover {
        background-color: rgba($background-color, 0.2);
        color: $hover-text-color;
      }

      &:active {
        background-color: rgba($background-color, 0.3);
        color: $active-text-color;
      }
    }

    .#{$ns}-tag-remove > .#{$ns}-icon:first-child {
      color: $text-color;

      &:hover {
        color: $hover-text-color;
      }

      &:active {
        color: $active-text-color;
      }
    }
  }

  @mixin pt-tag-minimal-dark-intent-modern (
    $background-color,
    $text-color,
    $hover-text-color,
    $active-text-color,
  ) {
    .#{$ns}-dark & {
      background-color: rgba($background-color, 0.2);
      color: $text-color;

      &.#{$ns}-interactive {
        &:hover {
          background-color: rgba($background-color, 0.3);
          color: $hover-text-color;
        }

        &:active {
          background-color: rgba($background-color, 0.35);
          color: $active-text-color;
        }
      }

      .#{$ns}-tag-remove > .#{$ns}-icon:first-child {
        color: $text-color;

        &:hover {
          color: $hover-text-color;
        }

        &:active {
          color: $active-text-color;
        }
      }
    }
  }

  // Contrast for default intent
  color: $white;

  &.#{$ns}-interactive {
    &:hover {
      background: $dark-gray5;
    }

    &:active {
      background: $dark-gray4;
    }
  }

  .#{$ns}-tag-remove > .#{$ns}-icon:first-child {
    color: rgba($white, 0.7);

    &:hover {
      color: $white;
    }

    &:active {
      color: $white;
    }
  }

  // Dark mode contrast for default intent
  .#{$ns}-dark &:not([class*="#{$ns}-intent-"]) {
    background: $gray5;
    color: $pt-text-color;

    &.#{$ns}-interactive {
      &:hover {
        background: $gray4;
      }

      &:active {
        background: $gray3;
      }
    }

    .#{$ns}-tag-remove > .#{$ns}-icon:first-child {
      color: rgba($dark-gray1, 0.7);

      &:hover {
        color: $dark-gray1;
      }

      &:active {
        color: $dark-gray1;
      }
    }
  }

  // Light mode contrast for intents
  @each $intent, $color in $tag-intent-colors-modern {
    &.#{$ns}-intent-#{$intent} {
      @include pt-tag-modern($color...);
    }
  }

  // Minimal style contrast
  &.#{$ns}-minimal {
    // Minimal style for default intent
    background-color: rgba($gray3, 0.15);
    color: $pt-text-color;
    &.#{$ns}-interactive {
      &:hover {
        background-color: rgba($gray3, 0.3);
        color: $black;
      }

      &:active {
        background-color: rgba($gray3, 0.35);
        color: $black;
      }

      .#{$ns}-tag-remove > .#{$ns}-icon:first-child {
        color: $gray1;

        &:hover {
          color: $dark-gray1;
        }

        &:active {
          color: $dark-gray1;
        }
      }
    }

    // Minimal dark style for default intent
    .#{$ns}-dark & {
      background-color: rgba($gray3, 0.15);
      color: $light-gray1;

      &.#{$ns}-interactive {
        &:hover {
          background-color: rgba($gray3, 0.3);
          color: $white;
        }

        &:active {
          background-color: rgba($gray3, 0.35);
          color: $white;
        }
      }

      .#{$ns}-tag-remove > .#{$ns}-icon:first-child {
        color: $gray4;

        &:hover {
          color: $light-gray1;
        }

        &:active {
          color: $light-gray1;
        }
      }
    }

    @each $intent, $color in $minimal-tag-intent-colors-modern {
      &.#{$ns}-intent-#{$intent} {
        @include pt-tag-minimal-intent-modern($color...);
      }
    }

    @each $intent, $color in $minimal-dark-tag-intent-colors-modern {
      &.#{$ns}-intent-#{$intent} {
        @include pt-tag-minimal-dark-intent-modern($color...);
      }
    }
  }
}

// Contrast for toasts
.#{$ns}-toast {
  // HACK needs !important to override the existing hack
  /* stylelint-disable declaration-no-important */
  @mixin pt-toast-intent-button-colors-modern (
    $background-color,
    $text-color,
    $hover-color,
    $active-color,
    $icon-color,
  ) {
    .#{$ns}-icon:first-child {
      color: $icon-color;
    }

    .#{$ns}-button {
      background-color: $background-color !important;
      color: $text-color !important;

      &:hover {
        background-color: $hover-color !important;
        color: $text-color !important;
      }

      &:active {
        background-color: $active-color !important;
        color: $text-color !important;
      }

      &:last-child > .#{$ns}-icon-cross {
        color: rgba($text-color, 0.7) !important;
      }
    }
  }
  /* stylelint-enable declaration-no-important */


  // Contrast for default intent
  &:not([class*="#{$ns}-intent-"]) {
    // Contrast for default intent in dark mode
    &.#{$ns}-dark,
    .#{$ns}-dark & {
      .#{$ns}-button .#{$ns}-icon {
        color: rgba($white, 0.7);
      }
    }
  }

  &.#{$ns}-intent-warning {
    background-color: $orange5;
    color: $dark-gray1;
  }

  @each $intent, $color in $toast-intent-button-colors-modern {
    &.#{$ns}-intent-#{$intent} {
      @include pt-toast-intent-button-colors-modern($color...);
    }
  }
}

// Contrast for trees
.#{$ns}-tree-node-content {
  background: none;

  &:hover {
    background-color: rgba($gray3, 0.15);
  }

  &:active {
    background-color: rgba($gray3, 0.3);
  }

  .#{$ns}-dark & .#{$ns}-icon {
    @each $intent, $color in $tree-intent-icon-colors-modern {
      &.#{$ns}-intent-#{$intent} {
        color: $color;
      }
    }
  }

  .#{$ns}-tree-node.#{$ns}-tree-node-selected > & {
    #{$icon-classes} {
      color: $white;
    }
  }
}