@blueprintjs/core/lib/less/variables.less

Core styles & components

/*
 * Copyright 2023 Palantir Technologies, Inc. All rights reserved.
 */

@black: #111418;

@dark-gray1: #1c2127;
@dark-gray2: #252a31;
@dark-gray3: #2f343c;
@dark-gray4: #383e47;
@dark-gray5: #404854;

@gray1: #5f6b7c;
@gray2: #738091;
@gray3: #8f99a8;
@gray4: #abb3bf;
@gray5: #c5cbd3;

@light-gray1: #d3d8de;
@light-gray2: #dce0e5;
@light-gray3: #e5e8eb;
@light-gray4: #edeff2;
@light-gray5: #f6f7f9;

@white: #ffffff;

@blue1: #184a90;
@blue2: #215db0;
@blue3: #2d72d2;
@blue4: #4c90f0;
@blue5: #8abbff;

@green1: #165a36;
@green2: #1c6e42;
@green3: #238551;
@green4: #32a467;
@green5: #72ca9b;

@orange1: #77450d;
@orange2: #935610;
@orange3: #c87619;
@orange4: #ec9a3c;
@orange5: #fbb360;

@red1: #8e292c;
@red2: #ac2f33;
@red3: #cd4246;
@red4: #e76a6e;
@red5: #fa999c;

@vermilion1: #96290d;
@vermilion2: #b83211;
@vermilion3: #d33d17;
@vermilion4: #eb6847;
@vermilion5: #ff9980;

@rose1: #a82255;
@rose2: #c22762;
@rose3: #db2c6f;
@rose4: #f5498b;
@rose5: #ff66a1;

@violet1: #5c255c;
@violet2: #7c327c;
@violet3: #9d3f9d;
@violet4: #bd6bbd;
@violet5: #d69fd6;

@indigo1: #5642a6;
@indigo2: #634dbf;
@indigo3: #7961db;
@indigo4: #9881f3;
@indigo5: #bdadff;

@cerulean1: #1f4b99;
@cerulean2: #2458b3;
@cerulean3: #2965cc;
@cerulean4: #4580e6;
@cerulean5: #669eff;

@turquoise1: #004d46;
@turquoise2: #007067;
@turquoise3: #00a396;
@turquoise4: #13c9ba;
@turquoise5: #7ae1d8;

@forest1: #1d7324;
@forest2: #238c2c;
@forest3: #29a634;
@forest4: #43bf4d;
@forest5: #62d96b;

@lime1: #43501b;
@lime2: #5a701a;
@lime3: #8eb125;
@lime4: #b6d94c;
@lime5: #d4f17e;

@gold1: #5c4405;
@gold2: #866103;
@gold3: #d1980b;
@gold4: #f0b726;
@gold5: #fbd065;

@sepia1: #5e4123;
@sepia2: #7a542e;
@sepia3: #946638;
@sepia4: #af855a;
@sepia5: #d0b090;
@pt-intent-primary: #2d72d2;
@pt-intent-success: #238551;
@pt-intent-warning: #c87619;
@pt-intent-danger: #cd4246;

@pt-app-background-color: #f6f7f9;
@pt-dark-app-background-color: #252a31;

@pt-outline-color: rgba(45, 114, 210, 0.6);

@pt-text-color: #1c2127;
@pt-text-color-muted: #5f6b7c;
@pt-text-color-disabled: rgba(95, 107, 124, 0.6);
@pt-heading-color: #1c2127;
@pt-link-color: #215db0;
@pt-dark-text-color: #f6f7f9;
@pt-dark-text-color-muted: #abb3bf;
@pt-dark-text-color-disabled: rgba(171, 179, 191, 0.6);
@pt-dark-heading-color: #f6f7f9;
@pt-dark-link-color: #8abbff;
@pt-text-selection-color: rgba(125, 188, 255, 60%);

@pt-icon-color: #5f6b7c;
@pt-icon-color-hover: #1c2127;
@pt-icon-color-disabled: rgba(95, 107, 124, 0.6);
@pt-icon-color-selected: #2d72d2;
@pt-dark-icon-color: #abb3bf;
@pt-dark-icon-color-hover: #f6f7f9;
@pt-dark-icon-color-disabled: rgba(171, 179, 191, 0.6);
@pt-dark-icon-color-selected: #2d72d2;

@pt-divider-black: rgba(17, 20, 24, 0.15);
@pt-divider-black-muted: rgba(17, 20, 24, 0.1);
@pt-dark-divider-black: rgba(17, 20, 24, 0.4);
@pt-dark-divider-white: rgba(255, 255, 255, 0.2);
@pt-dark-divider-white-muted: rgba(255, 255, 255, 0.1);

@pt-code-text-color: #5f6b7c;
@pt-dark-code-text-color: #abb3bf;
@pt-code-background-color: rgba(255, 255, 255, 0.7);
@pt-dark-code-background-color: rgba(17, 20, 24, 0.3);
@ns: bp5;
@bp-ns: bp5;

@pt-grid-size: 10px;

@icons16-family: "blueprint-icons-16";
@icons20-family: "blueprint-icons-20";

@pt-icon-size-standard: 16px;
@pt-icon-size-large: 20px;

@pt-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto",
  "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue",
  "blueprint-icons-16", sans-serif;

@pt-font-family-monospace: monospace;

@pt-font-size: 10px * 1.4;
@pt-font-size-large: 10px * 1.6;
@pt-font-size-small: 10px * 1.2;

@pt-line-height: 1.28581;

@pt-border-radius: 2px;

@pt-button-height: 10px * 3;
@pt-button-height-small: 10px * 2.4;
@pt-button-height-smaller: 10px * 2;
@pt-button-height-large: 10px * 4;

@pt-input-height: 10px * 3;
@pt-input-height-large: 10px * 4;
@pt-input-height-small: 10px * 2.4;

@pt-navbar-height: 10px * 5;

@pt-z-index-base: 0;
@pt-z-index-content: 0 + 10;
@pt-z-index-overlay: 0 + 10 + 10;
@pt-z-index-dialog-header: 0 + 10 + 10 + 10;

@pt-border-shadow-opacity: 0.1;
@pt-drop-shadow-opacity: 0.2;
@pt-dark-border-shadow-opacity: 0.1 * 2;
@pt-dark-drop-shadow-opacity: 0.2 * 2;

@pt-elevation-shadow-0: 0 0 0 1px rgba(17, 20, 24, 0.15);
@pt-elevation-shadow-1: 0 0 0 1px rgba(17, 20, 24, 0.1),
  0 1px 1px rgba(17, 20, 24, 0.2);
@pt-elevation-shadow-2: 0 0 0 1px rgba(17, 20, 24, 0.1),
  0 1px 1px rgba(17, 20, 24, 0.2), 0 2px 6px rgba(17, 20, 24, 0.2);
@pt-elevation-shadow-3: 0 0 0 1px rgba(17, 20, 24, 0.1),
  0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2);
@pt-elevation-shadow-4: 0 0 0 1px rgba(17, 20, 24, 0.1),
  0 4px 8px rgba(17, 20, 24, 0.2), 0 18px 46px 6px rgba(17, 20, 24, 0.2);

@pt-dark-elevation-shadow-0: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
@pt-dark-elevation-shadow-1: inset 0 0 0 1px rgba(255, 255, 255, 0.2),
  0 1px 1px 0 rgba(17, 20, 24, 0.2 * 2);
@pt-dark-elevation-shadow-2: inset 0 0 0 1px rgba(255, 255, 255, 0.2),
  0 1px 1px rgba(17, 20, 24, 0.2 * 2), 0 2px 6px rgba(17, 20, 24, 0.2 * 2);
@pt-dark-elevation-shadow-3: inset 0 0 0 1px rgba(255, 255, 255, 0.2),
  0 2px 4px rgba(17, 20, 24, 0.2 * 2), 0 8px 24px rgba(17, 20, 24, 0.2 * 2);
@pt-dark-elevation-shadow-4: inset 0 0 0 1px rgba(255, 255, 255, 0.2),
  0 4px 8px rgba(17, 20, 24, 0.2 * 2), 0 18px 46px 6px rgba(17, 20, 24, 0.2 * 2);

@pt-transition-ease: cubic-bezier(0.4, 1, 0.75, 0.9);
@pt-transition-ease-bounce: cubic-bezier(0.54, 1.12, 0.38, 1.11);
@pt-transition-duration: 100ms;

@pt-input-box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.2),
  inset 0 1px 1px rgba(17, 20, 24, 0.5);

@pt-dialog-box-shadow: 0 0 0 1px rgba(17, 20, 24, 0.1),
  0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2);
@pt-popover-box-shadow: 0 0 0 1px rgba(17, 20, 24, 0.1),
  0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2);
@pt-tooltip-box-shadow: 0 0 0 1px rgba(17, 20, 24, 0.1),
  0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2);
@pt-toast-box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.2),
  0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2);

@pt-dark-input-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2),
  inset 0 -1px 1px 0 #8f99a8;
@pt-dark-input-intent-box-shadow-colors: {
  primary: #4c90f0;
  success: #32a467;
  warning: #ec9a3c;
  danger: #e76a6e;
};

@pt-dark-dialog-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2),
  0 2px 4px rgba(17, 20, 24, 0.2 * 2), 0 8px 24px rgba(17, 20, 24, 0.2 * 2);
@pt-dark-popover-border-color: hsl(215, 3%, 38%);
@pt-dark-popover-box-shadow: 0 0 0 1px hsl(215, 3%, 38%),
  inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(17, 20, 24, 0.2 * 2),
  0 8px 24px rgba(17, 20, 24, 0.2 * 2);
@pt-dark-tooltip-box-shadow: 0 2px 4px rgba(17, 20, 24, 0.2 * 2),
  0 8px 24px rgba(17, 20, 24, 0.2 * 2);
@pt-dark-toast-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2),
  0 2px 4px rgba(17, 20, 24, 0.2 * 2), 0 8px 24px rgba(17, 20, 24, 0.2 * 2);

@pt-high-contrast-mode-border-color: buttonborder;
@pt-high-contrast-mode-active-background-color: highlight;
@pt-high-contrast-mode-active-text-color: highlight;
@pt-high-contrast-mode-disabled-border-color: graytext;
@pt-high-contrast-mode-disabled-text-color: graytext;
@pt-high-contrast-mode-disabled-background-color: graytext;