{"version":3,"sources":["../src/blueprint.css"],"names":[],"mappings":"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AE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AAEjB;EACE,aAAa,EAAE;;AA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","file":"blueprint.css","sourcesContent":["@charset \"UTF-8\";\n/** Copyright 2015 Palantir Technologies, Inc. All rights reserved.\n// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy\n// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE\n// and https://github.com/palantir/blueprint/blob/master/PATENTS */\nhtml {\n  box-sizing: border-box; }\n\n*,\n*::before,\n*::after {\n  box-sizing: inherit; }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n@font-face {\n  font-family: \"Icons16\";\n  font-style: normal;\n  font-weight: normal;\n  src: url(\"../resources/icons/icons-16.eot?#iefix\") format(\"embedded-opentype\"), url(\"../resources/icons/icons-16.woff\") format(\"woff\"), url(\"../resources/icons/icons-16.ttf\") format(\"truetype\"); }\n\n@font-face {\n  font-family: \"Icons20\";\n  font-style: normal;\n  font-weight: normal;\n  src: url(\"../resources/icons/icons-20.eot?#iefix\") format(\"embedded-opentype\"), url(\"../resources/icons/icons-20.woff\") format(\"woff\"), url(\"../resources/icons/icons-20.ttf\") format(\"truetype\"); }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nTypography\n\nWeight: 2\n\nStyleguide typography\n*/\nhr {\n  margin: 20px 0;\n  border: none;\n  border-bottom: 1px solid rgba(16, 22, 26, 0.15); }\n  .pt-dark hr {\n    border-color: rgba(255, 255, 255, 0.15); }\n\n::selection {\n  background: rgba(125, 188, 255, 0.6); }\n\n/*\nUsage\n\nKeep in mind these general web typography guidelines when building your applications.\n\n- The default text color in all components is compliant with the recommended\n  [WCAG 2.0](https://www.w3.org/TR/WCAG20/) minimum contrast ratio.\n- If you choose to go with a custom text color, make sure the background behind it provides\n  proper contrast.\n- Try not to explicitly write pixel values for your font-size or line-height CSS rules.\n  Instead, reference the classes and variables we provide in Blueprint (`.pt-ui-text`,\n  `$pt-font-size-large`, etc.).\n\nWeight: 2\n\nStyleguide typography.usage\n*/\nbody {\n  text-transform: none;\n  line-height: 1.28581;\n  letter-spacing: 0;\n  font-family: -apple-system, \"BlinkMacSystemFont\", \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Open Sans\", \"Helvetica Neue\", sans-serif, \"Icons16\";\n  font-size: 14px;\n  font-weight: 400;\n  color: #182026; }\n\nsmall {\n  font-size: 12px; }\n\n/*\nFonts\n\nBlueprint does not include any fonts of its own; it will use the default sans-serif operating system\nfont. We provide a class to use the default monospace font instead.\n\nMarkup:\n<div class=\"{{.modifier}}\">Blueprint components react overlay date picker.</div>\n\n.pt-monospace-text - Use a monospace font (ideal for code)\n\nWeight: 1\n\nStyleguide typography.fonts\n*/\n.pt-monospace-text {\n  text-transform: none;\n  font-family: monospace;\n  font-size: smaller; }\n\n/*\nHeadings\n\nMarkup:\n<h1>H1 heading</h1>\n<h2>H2 heading</h2>\n<h3>H3 heading</h3>\n<h4>H4 heading</h4>\n<h5>H5 heading</h5>\n<h6>H6 heading</h6>\n\nWeight: 3\n\nStyleguide typography.headings\n*/\nh1 {\n  color: #182026;\n  font-weight: 600;\n  margin: 0 0 10px;\n  padding: 0;\n  line-height: 0.8em;\n  font-size: 40px; }\n\nh2 {\n  color: #182026;\n  font-weight: 600;\n  margin: 0 0 10px;\n  padding: 0;\n  line-height: 0.8em;\n  font-size: 27px; }\n\nh3 {\n  color: #182026;\n  font-weight: 600;\n  margin: 0 0 10px;\n  padding: 0;\n  line-height: 0.8em;\n  font-size: 24px; }\n\nh4 {\n  color: #182026;\n  font-weight: 600;\n  margin: 0 0 10px;\n  padding: 0;\n  line-height: 0.9em;\n  font-size: 20px; }\n\nh5 {\n  color: #182026;\n  font-weight: 600;\n  margin: 0 0 10px;\n  padding: 0;\n  line-height: 0.9em;\n  font-size: 17px; }\n\nh6 {\n  color: #182026;\n  font-weight: 600;\n  margin: 0 0 10px;\n  padding: 0;\n  line-height: 0.9em;\n  font-size: 15px; }\n\n/*\nUI text\n\nThe base font size for Blueprint web applications is 14px. This should be the default type size\nfor most short strings of text which are not headings or titles. If you wish to reset some\nelement's font size and line height to the default base styles, use the `.pt-ui-text` class.\nFor longer running text, see [running text styles](#typography.running-text).\n\nMarkup:\n<div class=\"{{.modifier}}\">Blueprint components react overlay date picker.</div>\n\n.pt-ui-text - Default UI text. This is applied to the document body as part of core styles.\n.pt-ui-text-large - Larger UI text.\n\nWeight: 4\n\nStyleguide typography.ui-text\n*/\n.pt-ui-text {\n  text-transform: none;\n  line-height: 1.28581;\n  letter-spacing: 0;\n  font-family: -apple-system, \"BlinkMacSystemFont\", \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Open Sans\", \"Helvetica Neue\", sans-serif, \"Icons16\";\n  font-size: 14px;\n  font-weight: 400; }\n\n.pt-ui-text-large {\n  line-height: 1.25;\n  font-size: 16px; }\n\n/*\nRunning text\n\nLarge blocks of _running text_ should use `.pt-running-text` styles.\n\nNote that `<p>` elements by default don't add any styles; they just inherit the base typography.\nThis is a conservative design; `<p>` elements are so ubiquitous that they're more often used for UI\ntext than long form text. It's up to the user to decide which blocks of text in an application\nshould get running text styles.\n\nMarkup:\n<p>\n  Default paragraphs have base typography styles.\n</p>\n<p class=\"pt-running-text\">\n  Running text is larger and more spaced out.\n  <br />\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n  labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris\n  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit\n  esse cillum dolore eu fugiat nulla pariatur.\n  <br />\n  <a href=\"#\">Excepteur sint occaecat cupidatat non proident.</a>\n</p>\n<div class=\"pt-running-text\">\n  Includes support for <strong>strong</strong>, <em>emphasized</em>, and <u>underlined</u> text.\n  <a href=\"#\">Also links!</a>\n</div>\n\nWeight: 5\n\nStyleguide typography.running-text\n*/\n.pt-running-text {\n  line-height: 1.5;\n  font-size: 16px; }\n  .pt-running-text h1 {\n    margin-top: 40px;\n    margin-bottom: 20px; }\n  .pt-running-text h2 {\n    margin-top: 40px;\n    margin-bottom: 20px; }\n  .pt-running-text h3 {\n    margin-top: 40px;\n    margin-bottom: 20px; }\n  .pt-running-text h4 {\n    margin-top: 40px;\n    margin-bottom: 20px; }\n  .pt-running-text h5 {\n    margin-top: 40px;\n    margin-bottom: 20px; }\n  .pt-running-text h6 {\n    margin-top: 40px;\n    margin-bottom: 20px; }\n\n.pt-running-text-small {\n  line-height: 1.5;\n  font-size: 14px; }\n\np {\n  margin: 0 0 10px;\n  padding: 0; }\n\n/*\nLinks\n\nSimply use an `<a href=\"\">` tag as you normally would. No class is necessary for Blueprint styles.\nLinks are underlined only when hovered.\n\nPutting an icon inside a link will cause it to inherit the link's text color.\n\nWeight: 8\n\nStyleguide typography.links\n*/\na {\n  text-decoration: none;\n  color: #106ba3; }\n  a:hover {\n    cursor: pointer;\n    text-decoration: underline;\n    color: #106ba3; }\n  a .pt-icon, a .pt-icon-standard, a .pt-icon-large {\n    color: inherit; }\n  a code,\n  .pt-dark a code {\n    color: inherit; }\n  .pt-dark a,\n  .pt-dark a:hover {\n    color: #2b95d6; }\n    .pt-dark a .pt-icon, .pt-dark a .pt-icon-standard, .pt-dark a .pt-icon-large,\n    .pt-dark a:hover .pt-icon,\n    .pt-dark a:hover .pt-icon-standard,\n    .pt-dark a:hover .pt-icon-large {\n      color: inherit; }\n\n/*\nPreformatted text\n\nUse `<pre>` for code blocks, and `<code>` for inline code. Note that `<pre>` blocks will\nretain _all_ whitespace so you'll have to format the content accordingly.\n\nMarkup:\n<code>$ npm install</code>\n<pre>\n%pt-select {\n  @include pt-button();\n  @include prefixer(appearance, none, webkit moz);\n  border-radius: $pt-border-radius;\n  height: $pt-button-height;\n  padding: 0 ($input-padding-horizontal * 3) 0 $input-padding-horizontal;\n}\n</pre>\n<pre><code>export function hasModifier(modifiers: ts.ModifiersArray, ...modifierKinds: ts.SyntaxKind[]) {\n    if (modifiers == null || modifierKinds == null) {\n        return false;\n    }\n    return modifiers.some((m) => {\n        return modifierKinds.some((k) => m.kind === k);\n    });\n}</code></pre>\n\nWeight: 6\n\nStyleguide typography.preformatted\n*/\npre,\ncode {\n  text-transform: none;\n  font-family: monospace;\n  font-size: smaller; }\n\ncode {\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2);\n  background: rgba(255, 255, 255, 0.7);\n  padding: 2px 5px;\n  color: #5c7080; }\n  .pt-dark code {\n    box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4);\n    background: rgba(16, 22, 26, 0.3);\n    color: #bfccd6; }\n\npre {\n  display: block;\n  margin: 10px 0;\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.15);\n  background: rgba(255, 255, 255, 0.7);\n  padding: 13px 15px 12px;\n  line-height: 1.4;\n  color: #182026;\n  font-size: 13px;\n  word-break: break-all;\n  word-wrap: break-word; }\n  pre > code {\n    border-radius: 0;\n    box-shadow: none;\n    background: transparent;\n    padding: 0;\n    white-space: pre-wrap;\n    color: inherit;\n    font-size: inherit; }\n  .pt-dark pre {\n    box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4);\n    background: rgba(16, 22, 26, 0.3);\n    color: #f5f8fa; }\n    .pt-dark pre > code {\n      box-shadow: none;\n      background: transparent; }\n\n/*\nBlock quotes\n\nBlock quotes are treated as running text.\n\nMarkup:\n<blockquote>\n  <p>\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in\n    voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n  </p>\n  <p>\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in\n    voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n  </p>\n</blockquote>\n\nWeight: 7\n\nStyleguide typography.blockquotes\n*/\nblockquote {\n  line-height: 1.5;\n  font-size: 16px;\n  margin: 0 0 10px;\n  border-left: solid 4px rgba(167, 182, 194, 0.5);\n  padding: 0 20px; }\n  blockquote p:last-child {\n    margin-bottom: 0; }\n  .pt-dark blockquote {\n    border-color: rgba(115, 134, 148, 0.5); }\n\n/*\nLists\n\nBlueprint provides a small amount of global styling and a few modifier classes for list elements.\n\n`<ul>` and `<ol>` elements in blocks with the `.pt-running-text` modifier class will\nautomatically assume the `.pt-list` styles to promote readability.\n\nMarkup:\n<ul class=\"{{.modifier}}\">\n  <li>Item the first</li>\n  <li>Item the second</li>\n  <li>Item the third</li>\n</ul>\n<ol class=\"{{.modifier}}\">\n  <li>Item the first</li>\n  <li>Item the second</li>\n  <li>Item the third</li>\n</ol>\n\n.pt-list - Add a little spacing between items for readability.\n.pt-list-unstyled - Remove all list styling (including indicators) so you can add your own.\n\nWeight: 8\n\nStyleguide typography.lists\n*/\nol,\nul {\n  margin: 10px 0;\n  padding-left: 40px; }\n\n.pt-list li:not(:last-child),\n.pt-running-text ul li:not(:last-child),\n.pt-running-text ol li:not(:last-child) {\n  padding-bottom: 5px; }\n\n.pt-list li :last-child,\n.pt-running-text ul li :last-child,\n.pt-running-text ol li :last-child {\n  margin-bottom: 0; }\n\n.pt-list ol,\n.pt-list ul,\n.pt-running-text ul ol,\n.pt-running-text ul ul,\n.pt-running-text ol ol,\n.pt-running-text ol ul {\n  margin-top: 5px; }\n\n.pt-list-unstyled {\n  margin: 0;\n  padding: 0;\n  list-style: none; }\n  .pt-list-unstyled li {\n    padding: 0; }\n\n/*\nText utilities\n\nBlueprint provides a small handful of class-based text utilities which can applied to any element\nthat contains text.\n\nMarkup:\n<div class=\"{{.modifier}}\" style=\"width: 320px;\">\n  Blueprint components react overlay date picker. Breadcrumbs dialog progress non-ideal state.\n</div>\n\n.pt-text-muted - Changes text color to a gentler gray.\n.pt-text-overflow-ellipsis - Truncates a single line of text with an ellipsis if it overflows its\n  container.\n\nWeight: 9\n\nStyleguide typography.utilities\n*/\n.pt-text-muted {\n  color: #5c7080; }\n  .pt-dark .pt-text-muted {\n    color: #bfccd6; }\n\n.pt-text-overflow-ellipsis {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  word-wrap: normal; }\n\n/*\nInternationalization\n\nWeight: 10\n\nStyleguide typography.intl\n*/\n/*\nRight-to-left text\n\nUse the utility class `.pt-rtl`.\n\nMarkup:\n<h4>Arabic:</h4>\n<p class=\"pt-rtl\">\n  لكل لأداء بمحاولة من. مدينة الواقعة يبق أي, وإعلان وقوعها، حول كل, حدى عجّل مشروط الخاسرة قد.\n  من الذود تكبّد بين, و لها واحدة الأراضي. عل الصفحة والروسية يتم, أي للحكومة استعملت شيء. أم وصل زهاء اليا\n</p>\n<h4>Hebrew:</h4>\n<p class=\"pt-rtl\">\n  כדי על עזרה יידיש הבהרה, מלא באגים טכניים דת. תנך או ברית ביולי. כתב בה הטבע למנוע, דת כלים פיסיקה החופשית זכר.\n  מתן החלל מאמרשיחהצפה ב. הספרות אנציקלופדיה אם זכר, על שימושי שימושיים תאולוגיה עזה\n</p>\n\nStyleguide typography.intl.rtl\n*/\n.pt-rtl {\n  text-align: right; }\n\n/*\nDark theme\n\n<!-- TODO: move me to components.dark -->\nUse the `.pt-dark` class to apply dark text colors *and* to cascade the dark theme to descendants.\nThis only applies colors to text; you'll have to set a background color yourself. Blueprint's\ndark background color is aliased as `$pt-dark-app-background-color`.\n\nWeight: 10\n\nStyleguide typography.dark\n*/\n.pt-dark {\n  color: #f5f8fa; }\n  .pt-dark h1 {\n    color: #f5f8fa; }\n  .pt-dark h2 {\n    color: #f5f8fa; }\n  .pt-dark h3 {\n    color: #f5f8fa; }\n  .pt-dark h4 {\n    color: #f5f8fa; }\n  .pt-dark h5 {\n    color: #f5f8fa; }\n  .pt-dark h6 {\n    color: #f5f8fa; }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nIcons\n\nWeight: 3\n\nStyleguide icons\n*/\n/*\nUI icons\n\nBlueprint UI icons are implemented via an icon font. They can be used anywhere text is\nused. It's easy to change their color or apply effects like text shadows via standard CSS\nproperties.\n\nTo use Blueprint UI icons, you need to apply two classes to a `<span>` element:\n- a __sizing class__, either `pt-icon-standard` (16px) or `pt-icon-large` (20px)\n- an icon __identifier class__, such as `pt-icon-projects`\n\n```html\n<span class=\"pt-icon-standard pt-icon-projects\"></span>\n```\n\n<div class=\"pt-callout pt-intent-primary pt-icon-info-sign\">\n  <h5>Non-standard sizes</h5>\n  Generally, icons should only be used at either 16px or 20px. However if a non-standard size is\n  necessary, set a `font-size` that is whole multiple of 16 or 20 with the relevant size class.\n  You can instead use the class `pt-icon` to make the icon inherit its size from surrounding text.\n</div>\n\n@react-docs Icons\n\nWeight: -1\n\nStyleguide icons.ui\n*/\n.pt-icon, .pt-icon-standard, .pt-icon-large {\n  display: inline-block;\n  color: #5c7080; }\n  .pt-dark .pt-icon, .pt-dark .pt-icon-standard, .pt-dark .pt-icon-large {\n    color: #bfccd6; }\n\nspan.pt-icon-standard {\n  line-height: 1;\n  font-family: \"Icons16\", sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  font-style: normal;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased; }\n\nspan.pt-icon-large {\n  line-height: 1;\n  font-family: \"Icons20\", sans-serif;\n  font-size: 20px;\n  font-weight: 400;\n  font-style: normal;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased; }\n\nspan.pt-icon {\n  line-height: 1;\n  font-family: \"Icons20\";\n  font-size: inherit;\n  font-weight: 400;\n  font-style: normal; }\n  span.pt-icon::before {\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased; }\n\n.pt-icon-blank::before {\n  content: \"\"; }\n\n.pt-icon-style::before {\n  content: \"\"; }\n\n.pt-icon-align-left::before {\n  content: \"\"; }\n\n.pt-icon-align-center::before {\n  content: \"\"; }\n\n.pt-icon-align-right::before {\n  content: \"\"; }\n\n.pt-icon-align-justify::before {\n  content: \"\"; }\n\n.pt-icon-bold::before {\n  content: \"\"; }\n\n.pt-icon-italic::before {\n  content: \"\"; }\n\n.pt-icon-underline::before {\n  content: \"⎁\"; }\n\n.pt-icon-search-around::before {\n  content: \"\"; }\n\n.pt-icon-graph-remove::before {\n  content: \"\"; }\n\n.pt-icon-group-objects::before {\n  content: \"\"; }\n\n.pt-icon-merge-links::before {\n  content: \"\"; }\n\n.pt-icon-layout::before {\n  content: \"\"; }\n\n.pt-icon-layout-auto::before {\n  content: \"\"; }\n\n.pt-icon-layout-circle::before {\n  content: \"\"; }\n\n.pt-icon-layout-hierarchy::before {\n  content: \"\"; }\n\n.pt-icon-layout-grid::before {\n  content: \"\"; }\n\n.pt-icon-layout-group-by::before {\n  content: \"\"; }\n\n.pt-icon-layout-skew-grid::before {\n  content: \"\"; }\n\n.pt-icon-geosearch::before {\n  content: \"\"; }\n\n.pt-icon-heatmap::before {\n  content: \"\"; }\n\n.pt-icon-drive-time::before {\n  content: \"\"; }\n\n.pt-icon-select::before {\n  content: \"\"; }\n\n.pt-icon-predictive-analysis::before {\n  content: \"\"; }\n\n.pt-icon-layers::before {\n  content: \"\"; }\n\n.pt-icon-locate::before {\n  content: \"\"; }\n\n.pt-icon-bookmark::before {\n  content: \"\"; }\n\n.pt-icon-citation::before {\n  content: \"\"; }\n\n.pt-icon-tag::before {\n  content: \"\"; }\n\n.pt-icon-clipboard::before {\n  content: \"\"; }\n\n.pt-icon-selection::before {\n  content: \"⦿\"; }\n\n.pt-icon-timeline-events::before {\n  content: \"\"; }\n\n.pt-icon-timeline-line-chart::before {\n  content: \"\"; }\n\n.pt-icon-timeline-bar-chart::before {\n  content: \"\"; }\n\n.pt-icon-applications::before {\n  content: \"\"; }\n\n.pt-icon-projects::before {\n  content: \"\"; }\n\n.pt-icon-changes::before {\n  content: \"\"; }\n\n.pt-icon-notifications::before {\n  content: \"\"; }\n\n.pt-icon-lock::before {\n  content: \"\"; }\n\n.pt-icon-unlock::before {\n  content: \"\"; }\n\n.pt-icon-user::before {\n  content: \"\"; }\n\n.pt-icon-search-template::before {\n  content: \"\"; }\n\n.pt-icon-inbox::before {\n  content: \"\"; }\n\n.pt-icon-more::before {\n  content: \"\"; }\n\n.pt-icon-help::before {\n  content: \"?\"; }\n\n.pt-icon-calendar::before {\n  content: \"\"; }\n\n.pt-icon-media::before {\n  content: \"\"; }\n\n.pt-icon-link::before {\n  content: \"\"; }\n\n.pt-icon-share::before {\n  content: \"\"; }\n\n.pt-icon-download::before {\n  content: \"\"; }\n\n.pt-icon-document::before {\n  content: \"\"; }\n\n.pt-icon-properties::before {\n  content: \"\"; }\n\n.pt-icon-import::before {\n  content: \"\"; }\n\n.pt-icon-export::before {\n  content: \"\"; }\n\n.pt-icon-minimize::before {\n  content: \"\"; }\n\n.pt-icon-maximize::before {\n  content: \"\"; }\n\n.pt-icon-tick::before {\n  content: \"✓\"; }\n\n.pt-icon-cross::before {\n  content: \"✗\"; }\n\n.pt-icon-plus::before {\n  content: \"+\"; }\n\n.pt-icon-minus::before {\n  content: \"−\"; }\n\n.pt-icon-arrow-left::before {\n  content: \"←\"; }\n\n.pt-icon-arrow-right::before {\n  content: \"→\"; }\n\n.pt-icon-exchange::before {\n  content: \"\"; }\n\n.pt-icon-comparison::before {\n  content: \"\"; }\n\n.pt-icon-list::before {\n  content: \"☰\"; }\n\n.pt-icon-filter::before {\n  content: \"\"; }\n\n.pt-icon-confirm::before {\n  content: \"\"; }\n\n.pt-icon-fork::before {\n  content: \"\"; }\n\n.pt-icon-trash::before {\n  content: \"\"; }\n\n.pt-icon-person::before {\n  content: \"\"; }\n\n.pt-icon-people::before {\n  content: \"\"; }\n\n.pt-icon-add::before {\n  content: \"\"; }\n\n.pt-icon-remove::before {\n  content: \"\"; }\n\n.pt-icon-geolocation::before {\n  content: \"\"; }\n\n.pt-icon-zoom-in::before {\n  content: \"\"; }\n\n.pt-icon-zoom-out::before {\n  content: \"\"; }\n\n.pt-icon-refresh::before {\n  content: \"\"; }\n\n.pt-icon-delete::before {\n  content: \"\"; }\n\n.pt-icon-cog::before {\n  content: \"\"; }\n\n.pt-icon-flag::before {\n  content: \"⚑\"; }\n\n.pt-icon-pin::before {\n  content: \"\"; }\n\n.pt-icon-warning-sign::before {\n  content: \"\"; }\n\n.pt-icon-error::before {\n  content: \"\"; }\n\n.pt-icon-info-sign::before {\n  content: \"ℹ\"; }\n\n.pt-icon-credit-card::before {\n  content: \"\"; }\n\n.pt-icon-edit::before {\n  content: \"✎\"; }\n\n.pt-icon-history::before {\n  content: \"\"; }\n\n.pt-icon-search::before {\n  content: \"\"; }\n\n.pt-icon-log-out::before {\n  content: \"\"; }\n\n.pt-icon-star::before {\n  content: \"★\"; }\n\n.pt-icon-star-empty::before {\n  content: \"☆\"; }\n\n.pt-icon-sort-alphabetical::before {\n  content: \"\"; }\n\n.pt-icon-sort-numerical::before {\n  content: \"\"; }\n\n.pt-icon-sort::before {\n  content: \"\"; }\n\n.pt-icon-folder-open::before {\n  content: \"\"; }\n\n.pt-icon-folder-close::before {\n  content: \"\"; }\n\n.pt-icon-folder-shared::before {\n  content: \"\"; }\n\n.pt-icon-caret-up::before {\n  content: \"⌃\"; }\n\n.pt-icon-caret-right::before {\n  content: \"〉\"; }\n\n.pt-icon-caret-down::before {\n  content: \"⌄\"; }\n\n.pt-icon-caret-left::before {\n  content: \"〈\"; }\n\n.pt-icon-menu-open::before {\n  content: \"\"; }\n\n.pt-icon-menu-closed::before {\n  content: \"\"; }\n\n.pt-icon-feed::before {\n  content: \"\"; }\n\n.pt-icon-two-columns::before {\n  content: \"\"; }\n\n.pt-icon-one-column::before {\n  content: \"\"; }\n\n.pt-icon-dot::before {\n  content: \"•\"; }\n\n.pt-icon-property::before {\n  content: \"\"; }\n\n.pt-icon-time::before {\n  content: \"⏲\"; }\n\n.pt-icon-disable::before {\n  content: \"\"; }\n\n.pt-icon-unpin::before {\n  content: \"\"; }\n\n.pt-icon-flows::before {\n  content: \"\"; }\n\n.pt-icon-new-text-box::before {\n  content: \"\"; }\n\n.pt-icon-new-link::before {\n  content: \"\"; }\n\n.pt-icon-new-object::before {\n  content: \"\"; }\n\n.pt-icon-path-search::before {\n  content: \"\"; }\n\n.pt-icon-automatic-updates::before {\n  content: \"\"; }\n\n.pt-icon-page-layout::before {\n  content: \"\"; }\n\n.pt-icon-code::before {\n  content: \"\"; }\n\n.pt-icon-map::before {\n  content: \"\"; }\n\n.pt-icon-search-text::before {\n  content: \"\"; }\n\n.pt-icon-envelope::before {\n  content: \"✉\"; }\n\n.pt-icon-paperclip::before {\n  content: \"\"; }\n\n.pt-icon-label::before {\n  content: \"\"; }\n\n.pt-icon-globe::before {\n  content: \"\"; }\n\n.pt-icon-home::before {\n  content: \"⌂\"; }\n\n.pt-icon-th::before {\n  content: \"\"; }\n\n.pt-icon-th-list::before {\n  content: \"\"; }\n\n.pt-icon-th-derived::before {\n  content: \"\"; }\n\n.pt-icon-circle::before {\n  content: \"\"; }\n\n.pt-icon-draw::before {\n  content: \"\"; }\n\n.pt-icon-insert::before {\n  content: \"\"; }\n\n.pt-icon-helper-management::before {\n  content: \"\"; }\n\n.pt-icon-send-to::before {\n  content: \"\"; }\n\n.pt-icon-eye-open::before {\n  content: \"\"; }\n\n.pt-icon-folder-shared-open::before {\n  content: \"\"; }\n\n.pt-icon-social-media::before {\n  content: \"\"; }\n\n.pt-icon-arrow-up::before {\n  content: \"↑\"; }\n\n.pt-icon-arrow-down::before {\n  content: \"↓\"; }\n\n.pt-icon-arrows-horizontal::before {\n  content: \"↔\"; }\n\n.pt-icon-arrows-vertical::before {\n  content: \"↕\"; }\n\n.pt-icon-resolve::before {\n  content: \"\"; }\n\n.pt-icon-graph::before {\n  content: \"\"; }\n\n.pt-icon-briefcase::before {\n  content: \"\"; }\n\n.pt-icon-dollar::before {\n  content: \"$\"; }\n\n.pt-icon-ninja::before {\n  content: \"\"; }\n\n.pt-icon-delta::before {\n  content: \"Δ\"; }\n\n.pt-icon-barcode::before {\n  content: \"\"; }\n\n.pt-icon-torch::before {\n  content: \"\"; }\n\n.pt-icon-widget::before {\n  content: \"\"; }\n\n.pt-icon-unresolve::before {\n  content: \"\"; }\n\n.pt-icon-offline::before {\n  content: \"\"; }\n\n.pt-icon-zoom-to-fit::before {\n  content: \"\"; }\n\n.pt-icon-add-to-artifact::before {\n  content: \"\"; }\n\n.pt-icon-map-marker::before {\n  content: \"\"; }\n\n.pt-icon-chart::before {\n  content: \"\"; }\n\n.pt-icon-control::before {\n  content: \"\"; }\n\n.pt-icon-multi-select::before {\n  content: \"\"; }\n\n.pt-icon-direction-left::before {\n  content: \"\"; }\n\n.pt-icon-direction-right::before {\n  content: \"\"; }\n\n.pt-icon-database::before {\n  content: \"\"; }\n\n.pt-icon-pie-chart::before {\n  content: \"\"; }\n\n.pt-icon-full-circle::before {\n  content: \"\"; }\n\n.pt-icon-square::before {\n  content: \"\"; }\n\n.pt-icon-print::before {\n  content: \"⎙\"; }\n\n.pt-icon-presentation::before {\n  content: \"\"; }\n\n.pt-icon-ungroup-objects::before {\n  content: \"\"; }\n\n.pt-icon-chat::before {\n  content: \"\"; }\n\n.pt-icon-comment::before {\n  content: \"\"; }\n\n.pt-icon-circle-arrow-right::before {\n  content: \"\"; }\n\n.pt-icon-circle-arrow-left::before {\n  content: \"\"; }\n\n.pt-icon-circle-arrow-up::before {\n  content: \"\"; }\n\n.pt-icon-circle-arrow-down::before {\n  content: \"\"; }\n\n.pt-icon-upload::before {\n  content: \"\"; }\n\n.pt-icon-asterisk::before {\n  content: \"*\"; }\n\n.pt-icon-cloud::before {\n  content: \"☁\"; }\n\n.pt-icon-cloud-download::before {\n  content: \"\"; }\n\n.pt-icon-cloud-upload::before {\n  content: \"\"; }\n\n.pt-icon-repeat::before {\n  content: \"\"; }\n\n.pt-icon-move::before {\n  content: \"\"; }\n\n.pt-icon-chevron-left::before {\n  content: \"\"; }\n\n.pt-icon-chevron-right::before {\n  content: \"\"; }\n\n.pt-icon-chevron-up::before {\n  content: \"\"; }\n\n.pt-icon-chevron-down::before {\n  content: \"\"; }\n\n.pt-icon-random::before {\n  content: \"\"; }\n\n.pt-icon-fullscreen::before {\n  content: \"\"; }\n\n.pt-icon-log-in::before {\n  content: \"\"; }\n\n.pt-icon-heart::before {\n  content: \"♥\"; }\n\n.pt-icon-office::before {\n  content: \"\"; }\n\n.pt-icon-duplicate::before {\n  content: \"\"; }\n\n.pt-icon-ban-circle::before {\n  content: \"\"; }\n\n.pt-icon-camera::before {\n  content: \"\"; }\n\n.pt-icon-mobile-video::before {\n  content: \"\"; }\n\n.pt-icon-video::before {\n  content: \"\"; }\n\n.pt-icon-film::before {\n  content: \"\"; }\n\n.pt-icon-settings::before {\n  content: \"\"; }\n\n.pt-icon-volume-off::before {\n  content: \"\"; }\n\n.pt-icon-volume-down::before {\n  content: \"\"; }\n\n.pt-icon-volume-up::before {\n  content: \"\"; }\n\n.pt-icon-music::before {\n  content: \"\"; }\n\n.pt-icon-step-backward::before {\n  content: \"\"; }\n\n.pt-icon-fast-backward::before {\n  content: \"\"; }\n\n.pt-icon-pause::before {\n  content: \"\"; }\n\n.pt-icon-stop::before {\n  content: \"\"; }\n\n.pt-icon-play::before {\n  content: \"\"; }\n\n.pt-icon-fast-forward::before {\n  content: \"\"; }\n\n.pt-icon-step-forward::before {\n  content: \"\"; }\n\n.pt-icon-eject::before {\n  content: \"⏏\"; }\n\n.pt-icon-record::before {\n  content: \"\"; }\n\n.pt-icon-desktop::before {\n  content: \"\"; }\n\n.pt-icon-phone::before {\n  content: \"☎\"; }\n\n.pt-icon-lightbulb::before {\n  content: \"\"; }\n\n.pt-icon-glass::before {\n  content: \"\"; }\n\n.pt-icon-tint::before {\n  content: \"\"; }\n\n.pt-icon-flash::before {\n  content: \"\"; }\n\n.pt-icon-font::before {\n  content: \"\"; }\n\n.pt-icon-header::before {\n  content: \"\"; }\n\n.pt-icon-saved::before {\n  content: \"\"; }\n\n.pt-icon-floppy-disk::before {\n  content: \"\"; }\n\n.pt-icon-book::before {\n  content: \"\"; }\n\n.pt-icon-hand-right::before {\n  content: \"\"; }\n\n.pt-icon-hand-up::before {\n  content: \"\"; }\n\n.pt-icon-hand-down::before {\n  content: \"\"; }\n\n.pt-icon-hand-left::before {\n  content: \"\"; }\n\n.pt-icon-thumbs-up::before {\n  content: \"\"; }\n\n.pt-icon-thumbs-down::before {\n  content: \"\"; }\n\n.pt-icon-box::before {\n  content: \"\"; }\n\n.pt-icon-compressed::before {\n  content: \"\"; }\n\n.pt-icon-shopping-cart::before {\n  content: \"\"; }\n\n.pt-icon-shop::before {\n  content: \"\"; }\n\n.pt-icon-layout-linear::before {\n  content: \"\"; }\n\n.pt-icon-undo::before {\n  content: \"⎌\"; }\n\n.pt-icon-redo::before {\n  content: \"\"; }\n\n.pt-icon-code-block::before {\n  content: \"\"; }\n\n.pt-icon-double-caret-vertical::before {\n  content: \"\"; }\n\n.pt-icon-double-caret-horizontal::before {\n  content: \"\"; }\n\n.pt-icon-sort-alphabetical-desc::before {\n  content: \"\"; }\n\n.pt-icon-sort-numerical-desc::before {\n  content: \"\"; }\n\n.pt-icon-take-action::before {\n  content: \"\"; }\n\n.pt-icon-contrast::before {\n  content: \"\"; }\n\n.pt-icon-eye-off::before {\n  content: \"\"; }\n\n.pt-icon-timeline-area-chart::before {\n  content: \"\"; }\n\n.pt-icon-doughnut-chart::before {\n  content: \"\"; }\n\n.pt-icon-layer::before {\n  content: \"\"; }\n\n.pt-icon-grid::before {\n  content: \"\"; }\n\n.pt-icon-polygon-filter::before {\n  content: \"\"; }\n\n.pt-icon-add-to-folder::before {\n  content: \"\"; }\n\n.pt-icon-layout-balloon::before {\n  content: \"\"; }\n\n.pt-icon-layout-sorted-clusters::before {\n  content: \"\"; }\n\n.pt-icon-sort-asc::before {\n  content: \"\"; }\n\n.pt-icon-sort-desc::before {\n  content: \"\"; }\n\n.pt-icon-small-cross::before {\n  content: \"\"; }\n\n.pt-icon-small-tick::before {\n  content: \"\"; }\n\n.pt-icon-power::before {\n  content: \"\"; }\n\n.pt-icon-column-layout::before {\n  content: \"\"; }\n\n.pt-icon-arrow-top-left::before {\n  content: \"↖\"; }\n\n.pt-icon-arrow-top-right::before {\n  content: \"↗\"; }\n\n.pt-icon-arrow-bottom-right::before {\n  content: \"↘\"; }\n\n.pt-icon-arrow-bottom-left::before {\n  content: \"↙\"; }\n\n.pt-icon-mugshot::before {\n  content: \"\"; }\n\n.pt-icon-headset::before {\n  content: \"\"; }\n\n.pt-icon-text-highlight::before {\n  content: \"\"; }\n\n.pt-icon-hand::before {\n  content: \"\"; }\n\n.pt-icon-chevron-backward::before {\n  content: \"\"; }\n\n.pt-icon-chevron-forward::before {\n  content: \"\"; }\n\n.pt-icon-rotate-document::before {\n  content: \"\"; }\n\n.pt-icon-rotate-page::before {\n  content: \"\"; }\n\n.pt-icon-badge::before {\n  content: \"\"; }\n\n.pt-icon-grid-view::before {\n  content: \"\"; }\n\n.pt-icon-function::before {\n  content: \"\"; }\n\n.pt-icon-waterfall-chart::before {\n  content: \"\"; }\n\n.pt-icon-stacked-chart::before {\n  content: \"\"; }\n\n.pt-icon-pulse::before {\n  content: \"\"; }\n\n.pt-icon-new-person::before {\n  content: \"\"; }\n\n.pt-icon-exclude-row::before {\n  content: \"\"; }\n\n.pt-icon-pivot-table::before {\n  content: \"\"; }\n\n.pt-icon-segmented-control::before {\n  content: \"\"; }\n\n.pt-icon-highlight::before {\n  content: \"\"; }\n\n.pt-icon-filter-list::before {\n  content: \"\"; }\n\n.pt-icon-cut::before {\n  content: \"\"; }\n\n.pt-icon-annotation::before {\n  content: \"\"; }\n\n.pt-icon-pivot::before {\n  content: \"\"; }\n\n.pt-icon-ring::before {\n  content: \"\"; }\n\n.pt-icon-heat-grid::before {\n  content: \"\"; }\n\n.pt-icon-gantt-chart::before {\n  content: \"\"; }\n\n.pt-icon-variable::before {\n  content: \"\"; }\n\n.pt-icon-manual::before {\n  content: \"\"; }\n\n.pt-icon-add-row-top::before {\n  content: \"\"; }\n\n.pt-icon-add-row-bottom::before {\n  content: \"\"; }\n\n.pt-icon-add-column-left::before {\n  content: \"\"; }\n\n.pt-icon-add-column-right::before {\n  content: \"\"; }\n\n.pt-icon-remove-row-top::before {\n  content: \"\"; }\n\n.pt-icon-remove-row-bottom::before {\n  content: \"\"; }\n\n.pt-icon-remove-column-left::before {\n  content: \"\"; }\n\n.pt-icon-remove-column-right::before {\n  content: \"\"; }\n\n.pt-icon-double-chevron-left::before {\n  content: \"\"; }\n\n.pt-icon-double-chevron-right::before {\n  content: \"\"; }\n\n.pt-icon-double-chevron-up::before {\n  content: \"\"; }\n\n.pt-icon-double-chevron-down::before {\n  content: \"\"; }\n\n.pt-icon-key-control::before {\n  content: \"\"; }\n\n.pt-icon-key-command::before {\n  content: \"\"; }\n\n.pt-icon-key-shift::before {\n  content: \"\"; }\n\n.pt-icon-key-backspace::before {\n  content: \"\"; }\n\n.pt-icon-key-delete::before {\n  content: \"\"; }\n\n.pt-icon-key-escape::before {\n  content: \"\"; }\n\n.pt-icon-key-enter::before {\n  content: \"\"; }\n\n.pt-icon-calculator::before {\n  content: \"\"; }\n\n.pt-icon-horizontal-bar-chart::before {\n  content: \"\"; }\n\n.pt-icon-small-plus::before {\n  content: \"\"; }\n\n.pt-icon-small-minus::before {\n  content: \"\"; }\n\n.pt-icon-step-chart::before {\n  content: \"\"; }\n\n.pt-icon-euro::before {\n  content: \"€\"; }\n\n.pt-icon-drag-handle-vertical::before {\n  content: \"\"; }\n\n.pt-icon-drag-handle-horizontal::before {\n  content: \"\"; }\n\n.pt-icon-mobile-phone::before {\n  content: \"\"; }\n\n.pt-icon-sim-card::before {\n  content: \"\"; }\n\n.pt-icon-trending-up::before {\n  content: \"\"; }\n\n.pt-icon-trending-down::before {\n  content: \"\"; }\n\n.pt-icon-curved-range-chart::before {\n  content: \"\"; }\n\n.pt-icon-vertical-bar-chart-desc::before {\n  content: \"\"; }\n\n.pt-icon-horizontal-bar-chart-desc::before {\n  content: \"\"; }\n\n.pt-icon-document-open::before {\n  content: \"\"; }\n\n.pt-icon-document-share::before {\n  content: \"\"; }\n\n.pt-icon-horizontal-distribution::before {\n  content: \"\"; }\n\n.pt-icon-vertical-distribution::before {\n  content: \"\"; }\n\n.pt-icon-alignment-left::before {\n  content: \"\"; }\n\n.pt-icon-alignment-vertical-center::before {\n  content: \"\"; }\n\n.pt-icon-alignment-right::before {\n  content: \"\"; }\n\n.pt-icon-alignment-top::before {\n  content: \"\"; }\n\n.pt-icon-alignment-horizontal-center::before {\n  content: \"\"; }\n\n.pt-icon-alignment-bottom::before {\n  content: \"\"; }\n\n.pt-icon-git-pull::before {\n  content: \"\"; }\n\n.pt-icon-git-merge::before {\n  content: \"\"; }\n\n.pt-icon-git-branch::before {\n  content: \"\"; }\n\n.pt-icon-git-commit::before {\n  content: \"\"; }\n\n.pt-icon-git-push::before {\n  content: \"\"; }\n\n.pt-icon-build::before {\n  content: \"\"; }\n\n.pt-icon-symbol-circle::before {\n  content: \"\"; }\n\n.pt-icon-symbol-square::before {\n  content: \"\"; }\n\n.pt-icon-symbol-diamond::before {\n  content: \"\"; }\n\n.pt-icon-symbol-cross::before {\n  content: \"\"; }\n\n.pt-icon-symbol-triangle-up::before {\n  content: \"\"; }\n\n.pt-icon-symbol-triangle-down::before {\n  content: \"\"; }\n\n.pt-icon-wrench::before {\n  content: \"\"; }\n\n.pt-icon-application::before {\n  content: \"\"; }\n\n.pt-icon-send-to-graph::before {\n  content: \"\"; }\n\n.pt-icon-send-to-map::before {\n  content: \"\"; }\n\n.pt-icon-join-table::before {\n  content: \"\"; }\n\n.pt-icon-derive-column::before {\n  content: \"\"; }\n\n.pt-icon-image-rotate-left::before {\n  content: \"\"; }\n\n.pt-icon-image-rotate-right::before {\n  content: \"\"; }\n\n.pt-icon-known-vehicle::before {\n  content: \"\"; }\n\n.pt-icon-unknown-vehicle::before {\n  content: \"\"; }\n\n.pt-icon-scatter-plot::before {\n  content: \"\"; }\n\n.pt-icon-oil-field::before {\n  content: \"\"; }\n\n.pt-icon-rig::before {\n  content: \"\"; }\n\n.pt-icon-map-create::before {\n  content: \"\"; }\n\n.pt-icon-key-option::before {\n  content: \"\"; }\n\n.pt-icon-list-detail-view::before {\n  content: \"\"; }\n\n.pt-icon-swap-vertical::before {\n  content: \"\"; }\n\n.pt-icon-swap-horizontal::before {\n  content: \"\"; }\n\n.pt-icon-numbered-list::before {\n  content: \"\"; }\n\n.pt-icon-new-grid-item::before {\n  content: \"\"; }\n\n.pt-icon-git-repo::before {\n  content: \"\"; }\n\n.pt-icon-git-new-branch::before {\n  content: \"\"; }\n\n.pt-icon-manually-entered-data::before {\n  content: \"\"; }\n\n.pt-icon-airplane::before {\n  content: \"\"; }\n\n.pt-icon-merge-columns::before {\n  content: \"\"; }\n\n.pt-icon-split-columns::before {\n  content: \"\"; }\n\n.pt-icon-dashboard::before {\n  content: \"\"; }\n\n.pt-icon-publish-function::before {\n  content: \"\"; }\n\n.pt-icon-path::before {\n  content: \"\"; }\n\n.pt-icon-moon::before {\n  content: \"\"; }\n\n.pt-icon-remove-column::before {\n  content: \"\"; }\n\n.pt-icon-numerical::before {\n  content: \"\"; }\n\n.pt-icon-key-tab::before {\n  content: \"\"; }\n\n.pt-icon-regression-chart::before {\n  content: \"\"; }\n\n.pt-icon-translate::before {\n  content: \"\"; }\n\n.pt-icon-eye-on::before {\n  content: \"\"; }\n\n/*\nAccessibility\n\nBlueprint strives to provide accessible components out of the box. Many of the JS components\nwill apply accessible HTML attributes to support different modes of usage.\n\nStyleguide a11y\n*/\n/*\nFocus management\n\nFocus states (that glowy blue outline around the active element) are essential for keyboard\nnavigation to indicate which element is currently active. They are less important, and\noccasionally outright intrusive, when using a mouse because you can click wherever you want at\nany time.\n\nBlueprint includes a utility that manages the appearance of focus styles. When enabled, focus styles\nwill be hidden while the user interacts using the mouse and will appear when the\n<kbd class=\"pt-key\">tab</kbd> key is pressed to begin keyboard navigation. Try this out for yourself\nbelow.\n\n**You must explictly enable this feature in your app (and you probably want to):**\n\n```ts\nimport { FocusStyleManager } from \"@blueprintjs/core\";\n\nFocusStyleManager.onlyShowFocusOnTabs();\n```\n\nNote that the focus style for text inputs (a slightly thicker colored border) is not removed by this\nutility because it is always useful to know where you're typing.\n\n@react-example FocusExample\n\nStyleguide a11y.focus\n*/\n/*\nJavaScript API\n\nThis behavior is controlled by a singleton instance called `FocusStyleManager` that lives in the\n__@blueprintjs/core__ package. It supports the following public methods:\n\n- `FocusStyleManager.isActive(): boolean`: Returns whether the `FocusStyleManager` is currently running.\n- `FocusStyleManager.onlyShowFocusOnTabs(): void`: Enable behavior which hides focus styles during mouse interaction.\n- `FocusStyleManager.alwaysShowFocus(): void`: Stop this behavior (focus styles are always visible).\n\nStyleguide a11y.focus.js\n*/\n:focus {\n  outline: rgba(19, 124, 189, 0.5) auto 2px;\n  outline-offset: 2px;\n  -moz-outline-radius: 6px; }\n\n.pt-focus-disabled :focus {\n  outline: none !important; }\n  .pt-focus-disabled :focus ~ .pt-control-indicator {\n    outline: none !important; }\n\n/*\nColor contrast\n\nColors have been designed to be accessible to as many people as possible, even those who are\nvisually impaired or experiencing any kind of colorblindness. Our colors have not only been chosen\nto go well together but to also adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards.\n\nWeight: 1\n\nStyleguide a11y.contrast\n*/\n/*\nComponents\n\nBlueprint's JavaScript components are stable and their APIs adhere to\n[semantic versioning](http://semver.org/).\nThey are distributed in the __@blueprintjs/core__ package and can be consumed as CommonJS modules\n[via NPM](https://www.npmjs.com/package/@blueprintjs/core).\n\nWeight: 6\n\nStyleguide components\n*/\n/*\nUsage\n\nWeight: -1\n\nStyleguide components.usage\n*/\n/*\nNPM installation\n\n1. Install the core package with an NPM client like `npm` or `yarn`, pulling in all relevant\ndependencies:\n\n  ```sh\n  npm install --save @blueprintjs/core\n  ```\n\n1. If you see `UNMET PEER DEPENDENCY` errors, you should manually install React:\n\n  ```sh\n  npm install --save react react-dom react-addons-css-transition-group\n  ```\n\n1. After installation, you'll be able to import the React JS components in your application:\n\n  ```\n  // extract specific components\n  import { Intent, Spinner, DatePickerFactory } from \"@blueprintjs/core\";\n  // or just take everything!\n  import * as Blueprint from \"@blueprintjs/core\";\n\n  // using JSX:\n  const mySpinner = <Spinner intent={Intent.PRIMARY} />;\n\n  // using the namespace import:\n  const anotherSpinner = <Blueprint.Spinner intent={Blueprint.Intent.PRIMARY}/>;\n\n  // use factories for React.createElement shorthand if you're not using JSX.\n  // every component provides a corresponding <Name>Factory.\n  const myDatePicker = DatePickerFactory();\n  ```\n\n1. Don't forget to include the main CSS file from each Blueprint package! Additionally, the\n`resources/` directory contains supporting media such as fonts and images.\n\n  ```html\n  <!-- in plain old reliable HTML -->\n  <!DOCTYPE HTML>\n  <html>\n    <head>\n      ...\n      <!-- include dependencies manually -->\n      <link href=\"path/to/node_modules/normalize.css/normalize.css\" rel=\"stylesheet\" />\n      <link href=\"path/to/node_modules/@blueprintjs/core/dist/blueprint.css\" rel=\"stylesheet\" />\n      ...\n    </head>\n    ...\n  </html>\n  ```\n\n  ```scss\n  // or, using node-style package resolution in a CSS file:\n  // (dependencies' stylesheets should be resolved automatically)\n  @import \"~@blueprintjs/core\";\n  ```\n\nWeight: -1\n\nStyleguide components.usage.npm\n*/\n/*\nDOM4\n\nBlueprint relies on a handful of DOM Level 4 API methods: `el.query`, `el.queryAll`, and\n`el.closest()`. `@blueprintjs/core` depends on a [polyfill library called `dom4`][dom4] to ensure\nthese methods are available. This module is conditionally loaded if Blueprint is used in a browser\nenvironment.\n\n[dom4]: https://webreflection.github.io/dom4/\n\nStyleguide components.usage.dom4\n*/\n/*\nTypeScript\n\nBlueprint is written in TypeScript and therefore its own `.d.ts` type definitions are distributed in\nthe NPM package and should be resolved automatically by the compiler. However, you'll need to\ninstall typings for Blueprint's dependencies before you can consume it:\n\n```sh\n# required for all @blueprintjs packages:\nnpm install --save @types/pure-render-decorator @types/react @types/react-dom @types/react-addons-css-transition-group\n\n# @blueprintjs/datetime requires:\nnpm install --save @types/moment\n\n# @blueprintjs/table requires:\nnpm install --save @types/es6-shim\n```\n\n<div class=\"pt-callout pt-intent-primary pt-icon-info-sign\">\n  For more information, see the TypeScript Handbook for\n  [guidance on consuming declaration files][handbook].\n</div>\n\n[handbook]: https://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html\n\nStyleguide components.usage.typescript\n*/\n/*\nVanilla JS APIs\n\nJS Components are built using React, but that does not limit their usage to just React applications.\nYou can render any component in any JavaScript application with `ReactDOM.render`. Think of it like\nusing a JQuery plugin.\n\n```\nconst myContainerElement = document.querySelector(\".my-container\");\n\n// with JSX\nReactDOM.render(\n    <Spinner className=\"pt-intent-primary pt-small\" />,\n    myContainerElement\n);\n\n// with vanilla JS, use the factory\nReactDOM.render(\n    SpinnerFactory({\n        className: \"pt-intent-primary pt-small\"\n    }),\n    myContainerElement\n);\n```\n\nTo remove the component from the DOM and clean up, unmount it:\n\n```\nReactDOM.unmountComponentAtNode(myContainerElement);\n```\n\nCheck out the [React API docs](https://facebook.github.io/react/docs/react-api.html) for more details.\n\nStyleguide components.usage.vanilla\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nAlerts\n\nAlerts notify users of important information and force them to acknowledge the alert content before\ncontinuing.\n\nAlthough similar to [dialogs](#components.dialog), alerts are more restrictive and should only be\nused for important notifications. The user can only exit the alert by clicking one of the\nconfirmation buttons — clicking the overlay or pressing the <kbd class=\"pt-key\">esc</kbd> key will\nnot close the alert.\n\nYou can only use this component in controlled mode. Use the `onClick` handlers in the primary and\nsecondary action props to handle closing the `Alert`. Optionally, display an icon next to the body\nto show the type of the alert.\n\n@react-example AlertExample\n\nStyleguide components.alert\n*/\n/*\nJavaScript API\n\nThe `Alert` component is available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#components.usage).\n\n@interface IAlertProps\n\nStyleguide components.alert.js\n*/\n.pt-alert {\n  max-width: 400px;\n  padding: 20px; }\n\n.pt-alert-body {\n  display: flex; }\n  .pt-alert-body .pt-icon {\n    margin-right: 20px;\n    font-size: 40px; }\n\n.pt-alert-footer {\n  display: flex;\n  flex-direction: row-reverse;\n  margin-top: 10px; }\n  .pt-alert-footer .pt-button {\n    margin-left: 10px; }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nBreadcrumbs\n\nBreadcrumbs identify the current resource in an application.\n\nStyleguide components.breadcrumbs\n*/\n/*\nCSS API\n\n* Begin with a `ul.pt-breadcrumbs`; each crumb should be in its own `li` as a direct descendant.\n* Breadcrumbs are typically navigation links (for example, to the parent folder in a file path), and\n  therefore should use `<a>` tags (except for the final breadcrumb).\n* Each navigation breadcrumb should use `.pt-breadcrumb`.\n* Make a breadcrumb non-interactive with the `.pt-disabled` class. You should only use this\n  state when you want to indicate that the user cannot navigate to the breadcrumb (for example, if\n  the user does not have permission to access it). Otherwise, clicking a breadcrumb should take the\n  user to that resource.\n* Mark the final breadcrumb `.pt-breadcrumb-current` for an emphasized appearance.\n* The `.pt-breadcrumbs-collapsed` button-like element can be used as the target for a dropdown menu\n  containing breadcrumbs that are collapsed due to layout constraints.\n* When adding another element (such as a [tooltip](#components.tooltip) or\n  [popover](#components.popover)) to a breadcrumb, wrap it around the contents of the `li`.\n\n\nMarkup:\n<ul class=\"pt-breadcrumbs\">\n  <li><a class=\"pt-breadcrumbs-collapsed\" href=\"#\"></a></li>\n  <li><a class=\"pt-breadcrumb pt-disabled\">Folder one</a></li>\n  <li><a class=\"pt-breadcrumb\" href=\"#\">Folder two</a></li>\n  <li><a class=\"pt-breadcrumb\" href=\"#\">Folder three</a></li>\n  <li><span class=\"pt-breadcrumb pt-breadcrumb-current\">File</span></li>\n</ul>\n\nStyleguide components.breadcrumbs.css\n*/\n/*\nJavaScript API\n\nThe `Breadcrumb` component is available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#components.usage).\n\nThe component renders an `a.pt-breadcrumb`.\nYou are responsible for constructing the `ul.pt-breadcrumbs` list.\nThe [CollapsibleList component](#components.collapsiblelist) works nicely with this component\nbecause its props are a subset of `IMenuItemProps`.\n\n@interface IBreadcrumbProps\n\nStyleguide components.breadcrumbs.js\n*/\n.pt-breadcrumbs {\n  display: inline-block;\n  margin: 0;\n  cursor: default;\n  padding: 0;\n  list-style: none;\n  vertical-align: top;\n  line-height: 30px; }\n  .pt-breadcrumbs > li {\n    float: left; }\n    .pt-breadcrumbs > li::after {\n      line-height: 1;\n      font-family: \"Icons16\", sans-serif;\n      font-size: 16px;\n      font-weight: 400;\n      font-style: normal;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      padding: 0 5px;\n      color: #5c7080;\n      content: \"\"; }\n    .pt-breadcrumbs > li:last-child::after {\n      display: none; }\n\n.pt-breadcrumb,\n.pt-breadcrumb-current,\n.pt-breadcrumbs-collapsed {\n  display: inline-block;\n  line-height: 19px;\n  font-size: 16px; }\n\n.pt-breadcrumb,\n.pt-breadcrumbs-collapsed {\n  color: #5c7080; }\n\n.pt-breadcrumb:hover {\n  text-decoration: none; }\n\n.pt-breadcrumb.pt-disabled {\n  cursor: not-allowed;\n  color: rgba(92, 112, 128, 0.5); }\n\n.pt-breadcrumb-current {\n  color: inherit;\n  font-weight: 600; }\n  .pt-breadcrumb-current .pt-input {\n    vertical-align: baseline;\n    font-size: inherit;\n    font-weight: inherit; }\n\n.pt-breadcrumbs-collapsed {\n  margin-right: 2px;\n  border: none;\n  border-radius: 3px;\n  background: #ced9e0;\n  cursor: pointer;\n  padding: 0 5px; }\n  .pt-breadcrumbs-collapsed::before {\n    line-height: 1;\n    font-family: \"Icons20\", sans-serif;\n    font-size: 20px;\n    font-weight: 400;\n    font-style: normal;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n    line-height: 19px;\n    content: \"\"; }\n  .pt-breadcrumbs-collapsed:hover {\n    background: #bfccd6;\n    text-decoration: none;\n    color: #182026; }\n\n.pt-dark .pt-breadcrumb,\n.pt-dark .pt-breadcrumbs-collapsed {\n  color: #bfccd6; }\n\n.pt-dark .pt-breadcrumbs > li::after {\n  color: #bfccd6; }\n\n.pt-dark .pt-breadcrumb.pt-disabled {\n  color: rgba(191, 204, 214, 0.5); }\n\n.pt-dark .pt-breadcrumb-current {\n  color: #f5f8fa; }\n\n.pt-dark .pt-breadcrumbs-collapsed {\n  background: rgba(16, 22, 26, 0.4); }\n  .pt-dark .pt-breadcrumbs-collapsed:hover {\n    background: rgba(16, 22, 26, 0.6);\n    color: #f5f8fa; }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nButtons\n\nButtons trigger actions when clicked.\n\nStyleguide components.button\n*/\n/*\nCSS API\n\nUse the `pt-button` class to access button styles. You should implement buttons using the\n`<button>` or `<a>` tags rather than `<div>` for the purposes of HTML accessibility and semantics.\n\n- Make sure to include `type=\"button\"` on `<button>` tags (use `type=\"submit\"` when used in a\n  `<form>`) and `role=\"button\"` on `<a>` tags for accessibility.\n- Add the attribute `tabindex=\"0\"` to make `<a>` tags focusable. `<button>` elements are\n  focusable by default.\n- For buttons implemented with `<a>` tags, add `tabindex=\"-1\"` to disabled buttons to prevent the\n  user from focusing them by pressing <kbd class=\"pt-key\">tab</kbd> on the keyboard.\n- Note that `<a>` tags do not respond to the `:disabled` attribute; use `.pt-disabled` instead.\n\nMarkup:\n<a role=\"button\" class=\"pt-button {{.modifier}}\" {{:modifier}} tabindex=\"0\">Anchor</a>\n<button type=\"button\" class=\"pt-button pt-icon-add {{.modifier}}\" {{:modifier}}>Button</button>\n\n:disabled - Disabled state\n.pt-disabled - Disabled appearance\n.pt-intent-primary - Primary intent\n.pt-intent-success - Success intent\n.pt-intent-warning - Warning intent\n.pt-intent-danger - Danger intent\n.pt-active - Active appearance\n.pt-large - Larger size\n.pt-fill - Fill parent container\n\nStyleguide components.button.css\n*/\n.pt-button {\n  display: inline-block;\n  border: 1px solid;\n  border-radius: 3px;\n  cursor: pointer;\n  padding: 0 10px;\n  vertical-align: middle;\n  font-size: 14px;\n  min-width: 30px;\n  min-height: 30px;\n  line-height: 28px;\n  /*\n  Buttons with icons\n\n  Add an icon before the button text with `pt-icon-*` classes.\n  You _do not_ need to include an icon sizing class.\n\n  Markup:\n  <button type=\"button\" class=\"pt-button pt-icon-add\">Default button</button>\n  <button type=\"button\" class=\"pt-button pt-icon-refresh\"></button>\n  <button type=\"button\" class=\"pt-button pt-large pt-icon-add\">Large button</button>\n  <button type=\"button\" class=\"pt-button pt-large pt-icon-refresh\"></button>\n\n  Weight: -1\n\n  Styleguide components.button.css.icon\n  */\n  /*\n  Advanced icon layout\n\n  You can use a `pt-icon-*` class on a button to add a single icon before the button\n  text, but for more advanced icon layouts, use `<span>` tags inside the button.\n  Add multiple icons to the same button, or move icons after the text.\n\n  To adjust margins on right-aligned icons, add the class `pt-align-right` to the icon.\n\n  Markup:\n  <button type=\"button\" class=\"pt-button pt-intent-success\">\n    Next step\n    <span class=\"pt-icon-standard pt-icon-arrow-right pt-align-right\"></span>\n  </button>\n  <button type=\"button\" class=\"pt-button\">\n    <span class=\"pt-icon-standard pt-icon-user\"></span>\n    Profile settings\n    <span class=\"pt-icon-standard pt-icon-caret-down pt-align-right\"></span>\n  </button>\n  <button type=\"button\" class=\"pt-button pt-intent-danger\">\n    Reset\n    <span class=\"pt-icon-standard pt-icon-refresh pt-align-right\"></span>\n  </button>\n  <button type=\"button\" class=\"pt-button pt-large\">\n    <span class=\"pt-icon-standard pt-icon-document\"></span>\n    upload.txt\n    <span class=\"pt-icon-standard pt-icon-cross pt-align-right\"></span>\n  </button>\n\n  Styleguide components.button.css.advanced\n  */\n  /*\n  Minimal buttons\n\n  For a subtler button that appears to fade into the UI, add the `.pt-minimal` modifier\n  to any `.pt-button`. `pt-minimal` is compatible with all other button modifiers,\n  except for `.pt-fill` (due to lack of visual affordances).\n\n  Note that minimal buttons are _not supported_ in button groups at this time.\n\n  Markup:\n  <a role=\"button\" class=\"pt-button pt-minimal {{.modifier}}\" {{:modifier}} tabindex=\"0\">Anchor</a>\n  <button type=\"button\" class=\"pt-button pt-minimal pt-icon-add {{.modifier}}\" {{:modifier}}>Button</button>\n\n  .pt-disabled - Disabled appearance\n  .pt-intent-primary - Primary intent\n  .pt-intent-success - Success intent\n  .pt-intent-warning - Warning intent\n  .pt-intent-danger - Danger intent\n\n  Styleguide components.button.css.minimal\n  */ }\n  .pt-button:disabled, .pt-button.pt-disabled {\n    cursor: not-allowed; }\n  .pt-button.pt-fill {\n    width: 100%; }\n  .pt-button:not([class*=\"pt-intent-\"]) {\n    background: #f5f8fa;\n    background: -webkit-linear-gradient( top , #ffffff, rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #f5f8fa;\n    background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #f5f8fa;\n    border-color: rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.17) rgba(16, 22, 26, 0.1);\n    box-shadow: 0 1px 1px rgba(16, 22, 26, 0.1);\n    background-clip: padding-box;\n    color: #182026; }\n    .pt-button:not([class*=\"pt-intent-\"]):hover {\n      background: #ebf1f5;\n      background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #ebf1f5;\n      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #ebf1f5;\n      border-color: rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.27) rgba(16, 22, 26, 0.2);\n      box-shadow: 0 1px 1px rgba(16, 22, 26, 0.1);\n      background-clip: padding-box; }\n    .pt-button:not([class*=\"pt-intent-\"]):active, .pt-button.pt-active:not([class*=\"pt-intent-\"]) {\n      border-color: rgba(16, 22, 26, 0.35) rgba(16, 22, 26, 0.25) rgba(16, 22, 26, 0.25) rgba(16, 22, 26, 0.25);\n      box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.1);\n      background-color: #ced9e0;\n      background-image: none; }\n    .pt-button:not([class*=\"pt-intent-\"]):disabled, .pt-button.pt-disabled:not([class*=\"pt-intent-\"]) {\n      outline: none;\n      border-color: transparent;\n      box-shadow: none;\n      background-clip: border-box;\n      background-color: rgba(206, 217, 224, 0.5);\n      background-image: none;\n      cursor: not-allowed;\n      color: rgba(92, 112, 128, 0.5); }\n  .pt-button.pt-intent-primary {\n    background: #137cbd;\n    background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #137cbd;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #137cbd;\n    border-color: rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.3) rgba(16, 22, 26, 0.1);\n    box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2);\n    background-clip: border-box;\n    color: #ffffff; }\n    .pt-button.pt-intent-primary:hover, .pt-button.pt-intent-primary:active, .pt-intent-primary.pt-button.pt-active, .pt-button.pt-intent-primary:disabled, .pt-intent-primary.pt-button.pt-disabled {\n      color: #ffffff; }\n    .pt-button.pt-intent-primary:hover {\n      background: #106ba3;\n      background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #106ba3;\n      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #106ba3;\n      box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-button.pt-intent-primary:active, .pt-intent-primary.pt-button.pt-active {\n      border-color: rgba(16, 22, 26, 0.6) rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.2);\n      box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.2);\n      background-color: #0e5a8a;\n      background-image: none; }\n    .pt-button.pt-intent-primary:disabled, .pt-intent-primary.pt-button.pt-disabled {\n      border-color: transparent;\n      box-shadow: none;\n      background-color: rgba(19, 124, 189, 0.5);\n      background-image: none; }\n    .pt-button.pt-intent-primary .pt-button-spinner .pt-spinner-head {\n      stroke: #ffffff; }\n  .pt-button.pt-intent-success {\n    background: #0f9960;\n    background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #0f9960;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #0f9960;\n    border-color: rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.3) rgba(16, 22, 26, 0.1);\n    box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2);\n    background-clip: border-box;\n    color: #ffffff; }\n    .pt-button.pt-intent-success:hover, .pt-button.pt-intent-success:active, .pt-intent-success.pt-button.pt-active, .pt-button.pt-intent-success:disabled, .pt-intent-success.pt-button.pt-disabled {\n      color: #ffffff; }\n    .pt-button.pt-intent-success:hover {\n      background: #0d8050;\n      background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #0d8050;\n      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #0d8050;\n      box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-button.pt-intent-success:active, .pt-intent-success.pt-button.pt-active {\n      border-color: rgba(16, 22, 26, 0.6) rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.2);\n      box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.2);\n      background-color: #0a6640;\n      background-image: none; }\n    .pt-button.pt-intent-success:disabled, .pt-intent-success.pt-button.pt-disabled {\n      border-color: transparent;\n      box-shadow: none;\n      background-color: rgba(15, 153, 96, 0.5);\n      background-image: none; }\n    .pt-button.pt-intent-success .pt-button-spinner .pt-spinner-head {\n      stroke: #ffffff; }\n  .pt-button.pt-intent-warning {\n    background: #d9822b;\n    background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #d9822b;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #d9822b;\n    border-color: rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.3) rgba(16, 22, 26, 0.1);\n    box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2);\n    background-clip: border-box;\n    color: #ffffff; }\n    .pt-button.pt-intent-warning:hover, .pt-button.pt-intent-warning:active, .pt-intent-warning.pt-button.pt-active, .pt-button.pt-intent-warning:disabled, .pt-intent-warning.pt-button.pt-disabled {\n      color: #ffffff; }\n    .pt-button.pt-intent-warning:hover {\n      background: #bf7326;\n      background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #bf7326;\n      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #bf7326;\n      box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-button.pt-intent-warning:active, .pt-intent-warning.pt-button.pt-active {\n      border-color: rgba(16, 22, 26, 0.6) rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.2);\n      box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.2);\n      background-color: #a66321;\n      background-image: none; }\n    .pt-button.pt-intent-warning:disabled, .pt-intent-warning.pt-button.pt-disabled {\n      border-color: transparent;\n      box-shadow: none;\n      background-color: rgba(217, 130, 43, 0.5);\n      background-image: none; }\n    .pt-button.pt-intent-warning .pt-button-spinner .pt-spinner-head {\n      stroke: #ffffff; }\n  .pt-button.pt-intent-danger {\n    background: #db3737;\n    background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #db3737;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #db3737;\n    border-color: rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.3) rgba(16, 22, 26, 0.1);\n    box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2);\n    background-clip: border-box;\n    color: #ffffff; }\n    .pt-button.pt-intent-danger:hover, .pt-button.pt-intent-danger:active, .pt-intent-danger.pt-button.pt-active, .pt-button.pt-intent-danger:disabled, .pt-intent-danger.pt-button.pt-disabled {\n      color: #ffffff; }\n    .pt-button.pt-intent-danger:hover {\n      background: #c23030;\n      background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #c23030;\n      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #c23030;\n      box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-button.pt-intent-danger:active, .pt-intent-danger.pt-button.pt-active {\n      border-color: rgba(16, 22, 26, 0.6) rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.2);\n      box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.2);\n      background-color: #a82a2a;\n      background-image: none; }\n    .pt-button.pt-intent-danger:disabled, .pt-intent-danger.pt-button.pt-disabled {\n      border-color: transparent;\n      box-shadow: none;\n      background-color: rgba(219, 55, 55, 0.5);\n      background-image: none; }\n    .pt-button.pt-intent-danger .pt-button-spinner .pt-spinner-head {\n      stroke: #ffffff; }\n  .pt-button.pt-loading {\n    position: relative; }\n    .pt-button.pt-loading[class*=\"pt-icon-\"]::before {\n      visibility: hidden; }\n    .pt-button.pt-loading .pt-button-spinner {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%); }\n    .pt-button.pt-loading > :not(.pt-button-spinner) {\n      visibility: hidden; }\n  .pt-button[class*=\"pt-icon-\"]::before {\n    line-height: 1;\n    font-family: \"Icons16\", sans-serif;\n    font-size: 16px;\n    font-weight: 400;\n    font-style: normal;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n    margin-right: 7px;\n    color: #5c7080; }\n  .pt-button .pt-icon, .pt-button .pt-icon-standard, .pt-button .pt-icon-large {\n    margin-right: 7px;\n    color: #5c7080; }\n    .pt-button .pt-icon.pt-align-right, .pt-button .pt-icon-standard.pt-align-right, .pt-button .pt-icon-large.pt-align-right {\n      margin-right: 0;\n      margin-left: 7px; }\n  .pt-dark .pt-button:not([class*=\"pt-intent-\"]) {\n    background: rgba(255, 255, 255, 0.1);\n    background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06)) left no-repeat;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06)) left no-repeat;\n    border-color: rgba(16, 22, 26, 0.6);\n    box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2);\n    background-clip: padding-box;\n    color: #f5f8fa; }\n    .pt-dark .pt-button:not([class*=\"pt-intent-\"]):hover, .pt-dark .pt-button:not([class*=\"pt-intent-\"]):active, .pt-dark .pt-button.pt-active:not([class*=\"pt-intent-\"]) {\n      color: #f5f8fa; }\n    .pt-dark .pt-button:not([class*=\"pt-intent-\"]):hover {\n      background: rgba(255, 255, 255, 0.1);\n      background: -webkit-linear-gradient( top , rgba(16, 22, 26, 0.1), rgba(16, 22, 26, 0.2)) left no-repeat, center no-repeat rgba(255, 255, 255, 0.1);\n      background: linear-gradient(to bottom, rgba(16, 22, 26, 0.1), rgba(16, 22, 26, 0.2)) left no-repeat, center no-repeat rgba(255, 255, 255, 0.1);\n      border-color: rgba(16, 22, 26, 0.8);\n      box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2);\n      background-clip: padding-box; }\n    .pt-dark .pt-button:not([class*=\"pt-intent-\"]):active, .pt-dark .pt-button.pt-active:not([class*=\"pt-intent-\"]) {\n      box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.2);\n      background-color: rgba(16, 22, 26, 0.1);\n      background-image: none; }\n    .pt-dark .pt-button:not([class*=\"pt-intent-\"]):disabled, .pt-dark .pt-button.pt-disabled:not([class*=\"pt-intent-\"]) {\n      border-color: rgba(206, 217, 224, 0.1);\n      box-shadow: none;\n      background-color: rgba(206, 217, 224, 0.1);\n      background-image: none;\n      color: rgba(191, 204, 214, 0.5); }\n    .pt-dark .pt-button:not([class*=\"pt-intent-\"]) .pt-button-spinner .pt-spinner-head {\n      background: rgba(16, 22, 26, 0.5);\n      stroke: #8a9ba8; }\n    .pt-dark .pt-button:not([class*=\"pt-intent-\"])[class*=\"pt-icon-\"]::before {\n      color: #bfccd6; }\n    .pt-dark .pt-button:not([class*=\"pt-intent-\"]) .pt-icon, .pt-dark .pt-button:not([class*=\"pt-intent-\"]) .pt-icon-standard, .pt-dark .pt-button:not([class*=\"pt-intent-\"]) .pt-icon-large {\n      color: #bfccd6; }\n  .pt-dark .pt-button[class*=\"pt-intent-\"] {\n    border-color: rgba(16, 22, 26, 0.6);\n    box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2);\n    background-clip: padding-box; }\n    .pt-dark .pt-button[class*=\"pt-intent-\"]:hover {\n      box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-dark .pt-button[class*=\"pt-intent-\"]:active, .pt-dark [class*=\"pt-intent-\"].pt-button.pt-active {\n      box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-dark .pt-button[class*=\"pt-intent-\"]:disabled, .pt-dark [class*=\"pt-intent-\"].pt-button.pt-disabled {\n      border: none;\n      box-shadow: none;\n      background-image: none;\n      color: rgba(255, 255, 255, 0.3); }\n    .pt-dark .pt-button[class*=\"pt-intent-\"] .pt-button-spinner .pt-spinner-head {\n      stroke: #8a9ba8; }\n  .pt-button:disabled::before, .pt-button.pt-disabled::before, .pt-button[class*=\"pt-intent-\"]::before {\n    color: inherit !important; }\n  .pt-button:disabled .pt-icon, .pt-button.pt-disabled .pt-icon, .pt-button:disabled .pt-icon-standard, .pt-button.pt-disabled .pt-icon-standard, .pt-button:disabled .pt-icon-large, .pt-button.pt-disabled .pt-icon-large, .pt-button[class*=\"pt-intent-\"] .pt-icon, .pt-button[class*=\"pt-intent-\"] .pt-icon-standard, .pt-button[class*=\"pt-intent-\"] .pt-icon-large {\n    color: inherit !important; }\n  .pt-button.pt-minimal {\n    border-color: transparent;\n    box-shadow: none;\n    background: none; }\n    .pt-button.pt-minimal:focus {\n      box-shadow: none; }\n    .pt-button.pt-minimal:hover {\n      border-color: transparent;\n      box-shadow: none;\n      background: rgba(167, 182, 194, 0.3);\n      text-decoration: none;\n      color: #182026; }\n    .pt-button.pt-minimal.pt-active, .pt-button.pt-minimal:active, .pt-minimal.pt-button.pt-active {\n      border-color: transparent;\n      background: rgba(115, 134, 148, 0.3);\n      color: #182026; }\n    .pt-button.pt-minimal.pt-disabled, .pt-button.pt-minimal:disabled, .pt-minimal.pt-button.pt-disabled, .pt-button.pt-minimal:disabled:hover, .pt-minimal.pt-button.pt-disabled:hover {\n      border-color: transparent;\n      background: inherit;\n      cursor: not-allowed;\n      color: rgba(92, 112, 128, 0.5); }\n    .pt-dark .pt-button.pt-minimal {\n      border-color: transparent;\n      box-shadow: none;\n      background: none;\n      color: inherit; }\n      .pt-dark .pt-button.pt-minimal:hover, .pt-dark .pt-button.pt-minimal:active, .pt-dark .pt-minimal.pt-button.pt-active, .pt-dark .pt-button.pt-minimal.pt-active {\n        border-color: transparent;\n        box-shadow: none;\n        background: none; }\n      .pt-dark .pt-button.pt-minimal:hover {\n        background: rgba(138, 155, 168, 0.15); }\n      .pt-dark .pt-button.pt-minimal:active, .pt-dark .pt-minimal.pt-button.pt-active, .pt-dark .pt-button.pt-minimal.pt-active {\n        background: rgba(138, 155, 168, 0.3);\n        color: #f5f8fa; }\n      .pt-dark .pt-button.pt-minimal.pt-disabled, .pt-dark .pt-button.pt-minimal:disabled, .pt-dark .pt-minimal.pt-button.pt-disabled, .pt-dark .pt-button.pt-minimal:disabled:hover, .pt-dark .pt-minimal.pt-button.pt-disabled:hover {\n        border-color: transparent;\n        background: inherit;\n        cursor: not-allowed;\n        color: rgba(191, 204, 214, 0.5); }\n    .pt-button.pt-minimal.pt-intent-primary {\n      color: #106ba3; }\n      .pt-button.pt-minimal.pt-intent-primary:hover, .pt-button.pt-minimal.pt-intent-primary:active, .pt-minimal.pt-intent-primary.pt-button.pt-active, .pt-button.pt-minimal.pt-intent-primary.pt-active {\n        box-shadow: none;\n        background: none;\n        color: #106ba3; }\n      .pt-button.pt-minimal.pt-intent-primary:hover {\n        background: rgba(19, 124, 189, 0.15); }\n      .pt-button.pt-minimal.pt-intent-primary:active, .pt-minimal.pt-intent-primary.pt-button.pt-active, .pt-button.pt-minimal.pt-intent-primary.pt-active {\n        background: rgba(19, 124, 189, 0.3);\n        color: #106ba3; }\n      .pt-button.pt-minimal.pt-intent-primary:disabled, .pt-minimal.pt-intent-primary.pt-button.pt-disabled, .pt-button.pt-minimal.pt-intent-primary.pt-disabled {\n        background: none;\n        color: rgba(16, 107, 163, 0.5); }\n      .pt-button.pt-minimal.pt-intent-primary .pt-button-spinner .pt-spinner-head {\n        stroke: #106ba3; }\n      .pt-dark .pt-button.pt-minimal.pt-intent-primary {\n        color: #2b95d6; }\n        .pt-dark .pt-button.pt-minimal.pt-intent-primary:hover {\n          background: rgba(19, 124, 189, 0.2);\n          color: #2b95d6; }\n        .pt-dark .pt-button.pt-minimal.pt-intent-primary:active, .pt-dark .pt-minimal.pt-intent-primary.pt-button.pt-active, .pt-dark .pt-button.pt-minimal.pt-intent-primary.pt-active {\n          background: rgba(19, 124, 189, 0.3);\n          color: #2b95d6; }\n        .pt-dark .pt-button.pt-minimal.pt-intent-primary:disabled, .pt-dark .pt-minimal.pt-intent-primary.pt-button.pt-disabled, .pt-dark .pt-button.pt-minimal.pt-intent-primary.pt-disabled {\n          color: rgba(43, 149, 214, 0.5); }\n    .pt-button.pt-minimal.pt-intent-success {\n      color: #0d8050; }\n      .pt-button.pt-minimal.pt-intent-success:hover, .pt-button.pt-minimal.pt-intent-success:active, .pt-minimal.pt-intent-success.pt-button.pt-active, .pt-button.pt-minimal.pt-intent-success.pt-active {\n        box-shadow: none;\n        background: none;\n        color: #0d8050; }\n      .pt-button.pt-minimal.pt-intent-success:hover {\n        background: rgba(15, 153, 96, 0.15); }\n      .pt-button.pt-minimal.pt-intent-success:active, .pt-minimal.pt-intent-success.pt-button.pt-active, .pt-button.pt-minimal.pt-intent-success.pt-active {\n        background: rgba(15, 153, 96, 0.3);\n        color: #0d8050; }\n      .pt-button.pt-minimal.pt-intent-success:disabled, .pt-minimal.pt-intent-success.pt-button.pt-disabled, .pt-button.pt-minimal.pt-intent-success.pt-disabled {\n        background: none;\n        color: rgba(13, 128, 80, 0.5); }\n      .pt-button.pt-minimal.pt-intent-success .pt-button-spinner .pt-spinner-head {\n        stroke: #0d8050; }\n      .pt-dark .pt-button.pt-minimal.pt-intent-success {\n        color: #15b371; }\n        .pt-dark .pt-button.pt-minimal.pt-intent-success:hover {\n          background: rgba(15, 153, 96, 0.2);\n          color: #15b371; }\n        .pt-dark .pt-button.pt-minimal.pt-intent-success:active, .pt-dark .pt-minimal.pt-intent-success.pt-button.pt-active, .pt-dark .pt-button.pt-minimal.pt-intent-success.pt-active {\n          background: rgba(15, 153, 96, 0.3);\n          color: #15b371; }\n        .pt-dark .pt-button.pt-minimal.pt-intent-success:disabled, .pt-dark .pt-minimal.pt-intent-success.pt-button.pt-disabled, .pt-dark .pt-button.pt-minimal.pt-intent-success.pt-disabled {\n          color: rgba(21, 179, 113, 0.5); }\n    .pt-button.pt-minimal.pt-intent-warning {\n      color: #bf7326; }\n      .pt-button.pt-minimal.pt-intent-warning:hover, .pt-button.pt-minimal.pt-intent-warning:active, .pt-minimal.pt-intent-warning.pt-button.pt-active, .pt-button.pt-minimal.pt-intent-warning.pt-active {\n        box-shadow: none;\n        background: none;\n        color: #bf7326; }\n      .pt-button.pt-minimal.pt-intent-warning:hover {\n        background: rgba(217, 130, 43, 0.15); }\n      .pt-button.pt-minimal.pt-intent-warning:active, .pt-minimal.pt-intent-warning.pt-button.pt-active, .pt-button.pt-minimal.pt-intent-warning.pt-active {\n        background: rgba(217, 130, 43, 0.3);\n        color: #bf7326; }\n      .pt-button.pt-minimal.pt-intent-warning:disabled, .pt-minimal.pt-intent-warning.pt-button.pt-disabled, .pt-button.pt-minimal.pt-intent-warning.pt-disabled {\n        background: none;\n        color: rgba(191, 115, 38, 0.5); }\n      .pt-button.pt-minimal.pt-intent-warning .pt-button-spinner .pt-spinner-head {\n        stroke: #bf7326; }\n      .pt-dark .pt-button.pt-minimal.pt-intent-warning {\n        color: #f29d49; }\n        .pt-dark .pt-button.pt-minimal.pt-intent-warning:hover {\n          background: rgba(217, 130, 43, 0.2);\n          color: #f29d49; }\n        .pt-dark .pt-button.pt-minimal.pt-intent-warning:active, .pt-dark .pt-minimal.pt-intent-warning.pt-button.pt-active, .pt-dark .pt-button.pt-minimal.pt-intent-warning.pt-active {\n          background: rgba(217, 130, 43, 0.3);\n          color: #f29d49; }\n        .pt-dark .pt-button.pt-minimal.pt-intent-warning:disabled, .pt-dark .pt-minimal.pt-intent-warning.pt-button.pt-disabled, .pt-dark .pt-button.pt-minimal.pt-intent-warning.pt-disabled {\n          color: rgba(242, 157, 73, 0.5); }\n    .pt-button.pt-minimal.pt-intent-danger {\n      color: #c23030; }\n      .pt-button.pt-minimal.pt-intent-danger:hover, .pt-button.pt-minimal.pt-intent-danger:active, .pt-minimal.pt-intent-danger.pt-button.pt-active, .pt-button.pt-minimal.pt-intent-danger.pt-active {\n        box-shadow: none;\n        background: none;\n        color: #c23030; }\n      .pt-button.pt-minimal.pt-intent-danger:hover {\n        background: rgba(219, 55, 55, 0.15); }\n      .pt-button.pt-minimal.pt-intent-danger:active, .pt-minimal.pt-intent-danger.pt-button.pt-active, .pt-button.pt-minimal.pt-intent-danger.pt-active {\n        background: rgba(219, 55, 55, 0.3);\n        color: #c23030; }\n      .pt-button.pt-minimal.pt-intent-danger:disabled, .pt-minimal.pt-intent-danger.pt-button.pt-disabled, .pt-button.pt-minimal.pt-intent-danger.pt-disabled {\n        background: none;\n        color: rgba(194, 48, 48, 0.5); }\n      .pt-button.pt-minimal.pt-intent-danger .pt-button-spinner .pt-spinner-head {\n        stroke: #c23030; }\n      .pt-dark .pt-button.pt-minimal.pt-intent-danger {\n        color: #f55656; }\n        .pt-dark .pt-button.pt-minimal.pt-intent-danger:hover {\n          background: rgba(219, 55, 55, 0.2);\n          color: #f55656; }\n        .pt-dark .pt-button.pt-minimal.pt-intent-danger:active, .pt-dark .pt-minimal.pt-intent-danger.pt-button.pt-active, .pt-dark .pt-button.pt-minimal.pt-intent-danger.pt-active {\n          background: rgba(219, 55, 55, 0.3);\n          color: #f55656; }\n        .pt-dark .pt-button.pt-minimal.pt-intent-danger:disabled, .pt-dark .pt-minimal.pt-intent-danger.pt-button.pt-disabled, .pt-dark .pt-button.pt-minimal.pt-intent-danger.pt-disabled {\n          color: rgba(245, 86, 86, 0.5); }\n  .pt-button.pt-large,\n  .pt-large .pt-button {\n    min-width: 40px;\n    min-height: 40px;\n    line-height: 38px;\n    padding: 0 15px;\n    font-size: 16px; }\n    .pt-button.pt-large[class*=\"pt-icon-\"]::before,\n    .pt-large .pt-button[class*=\"pt-icon-\"]::before {\n      margin-right: 10px; }\n    .pt-button.pt-large .pt-icon, .pt-button.pt-large .pt-icon-standard, .pt-button.pt-large .pt-icon-large,\n    .pt-large .pt-button .pt-icon,\n    .pt-large .pt-button .pt-icon-standard,\n    .pt-large .pt-button .pt-icon-large {\n      margin-right: 10px; }\n      .pt-button.pt-large .pt-icon.pt-align-right, .pt-button.pt-large .pt-icon-standard.pt-align-right, .pt-button.pt-large .pt-icon-large.pt-align-right,\n      .pt-large .pt-button .pt-icon.pt-align-right,\n      .pt-large .pt-button .pt-icon-standard.pt-align-right,\n      .pt-large .pt-button .pt-icon-large.pt-align-right {\n        margin-right: 0;\n        margin-left: 10px; }\n  .pt-button[class*=\"pt-icon-\"]:empty {\n    padding: 0; }\n    .pt-button[class*=\"pt-icon-\"]:empty::before {\n      margin-right: 0; }\n\na.pt-button {\n  text-align: center;\n  text-decoration: none;\n  transition: none; }\n  a.pt-button, a.pt-button:hover, a.pt-button:active, a.pt-button.pt-active {\n    color: #182026; }\n  a.pt-disabled.pt-button {\n    color: rgba(92, 112, 128, 0.5); }\n\n.pt-button.pt-active.pt-disabled, .pt-button.pt-active:disabled, .pt-active.pt-button.pt-disabled {\n  background: rgba(216, 225, 232, 0.4); }\n  .pt-dark .pt-button.pt-active.pt-disabled, .pt-dark .pt-button.pt-active:disabled, .pt-dark .pt-active.pt-button.pt-disabled {\n    background: rgba(206, 217, 224, 0.2); }\n\n/*\nJavaScript API\n\nThe `Button` and `AnchorButton` components are available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#components.usage).\n\nButton components render buttons with Blueprint classes and attributes.\nSee the [Buttons CSS docs](#components.button.css) for styling options.\n\nYou can provide your own props to these components as if they were regular JSX HTML elements. If you\nprovide a `className` prop, the class names you provide will be added alongside of the default\nBlueprint class name. If you specify other attributes that the component provides, such as a `role`\nfor an `<AnchorButton>`, you'll overide the default value.\n\n<div class=\"pt-callout pt-intent-danger pt-icon-error\">\n  <h5>Interactions with disabled buttons</h5>\n  Use `AnchorButton` if you need mouse interaction events (such as hovering) on a disabled button.\n  This is because `Button` and `AnchorButton` handle the `disabled` prop differently: `Button` uses\n  the native `disabled` attribute on the `<button>` tag so the browser disables all interactions,\n  but `AnchorButton` uses the class `.pt-disabled` because `<a>` tags do not support the `disabled`\n  attribute. As a result, the `AnchorButton` component will prevent *only* the `onClick` handler\n  when disabled but permit other events.\n</div>\n\n@react-example ButtonsExample\n\nStyleguide components.button.js\n*/\n/*\nAnchor button\n\n```\n<AnchorButton text=\"Click\" />\n// renders:\n<a class=\"pt-button\" role=\"button\" tabIndex={0}>Click</a>\n```\n\nStyleguide: components.button.js.anchor-button\n*/\n/*\nButton\n\n```\n<Button iconName=\"refresh\" />\n// renders:\n<button class=\"pt-button pt-icon-refresh\" type=\"button\"></button>\n```\n\n@interface IButtonProps\n\nStyleguide: components.button.js.button\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nButton groups\n\nButton groups arrange multiple buttons in a horizontal or vertical group.\n\nStyleguide components.button-group\n*/\n/*\nCSS API\n\nArrange multiple buttons in a group by wrapping them in `.pt-button-group`.\nYou can apply sizing directly on the button group container element.\n\nYou should implement interactive segmented controls as button groups.\n\nMarkup:\n<div class=\"pt-button-group {{.modifier}}\">\n  <a class=\"pt-button pt-icon-database\" tabindex=\"0\" role=\"button\">Queries</a>\n  <a class=\"pt-button pt-icon-function\" tabindex=\"0\" role=\"button\">Functions</a>\n  <a class=\"pt-button\" tabindex=\"0\" role=\"button\">\n    Options <span class=\"pt-icon-standard pt-icon-caret-down pt-align-right\"></span>\n  </a>\n</div>\n<br /><br />\n<div class=\"pt-button-group {{.modifier}}\">\n  <a class=\"pt-button pt-icon-chart\" tabindex=\"0\" role=\"button\"></a>\n  <a class=\"pt-button pt-icon-control\" tabindex=\"0\" role=\"button\"></a>\n  <a class=\"pt-button pt-icon-graph\" tabindex=\"0\" role=\"button\"></a>\n  <a class=\"pt-button pt-icon-camera\" tabindex=\"0\" role=\"button\"></a>\n  <a class=\"pt-button pt-icon-map\" tabindex=\"0\" role=\"button\"></a>\n  <a class=\"pt-button pt-icon-code\" tabindex=\"0\" role=\"button\"></a>\n  <a class=\"pt-button pt-icon-th\" tabindex=\"0\" role=\"button\"></a>\n  <a class=\"pt-button pt-icon-time\" tabindex=\"0\" role=\"button\"></a>\n  <a class=\"pt-button pt-icon-compressed\" tabindex=\"0\" role=\"button\"></a>\n</div>\n<br /><br />\n<div class=\"pt-button-group {{.modifier}}\">\n  <button type=\"button\" class=\"pt-button pt-intent-success\">Save</button>\n  <button type=\"button\" class=\"pt-button pt-intent-success pt-icon-caret-down\"></button>\n</div>\n\n.pt-large - Use large buttons\n.pt-minimal - Use minimal buttons. Note that these minimal buttons will not automatically\n              truncate text in an ellipsis because of the divider line added in CSS.\n\nStyleguide components.button-group.css\n*/\n.pt-button-group {\n  display: inline-flex;\n  /*\n  Responsive button groups\n\n  Add the class `pt-fill` to a button group to make all buttons expand equally to fill the\n  available space. Then add the class `pt-fixed` to individual buttons to revert them to their\n  original default sizes.\n\n  Alternatively, add the class `pt-fill` to an individual button (instead of to the container)\n  to expand it to fill the available space while other buttons retain their original sizes.\n\n  You can adjust the specific size of a button with the `flex-basis` CSS property.\n\n  Markup:\n  <div class=\"pt-button-group pt-large pt-fill\">\n    <a class=\"pt-button pt-intent-primary pt-fixed\" tabindex=\"0\" role=\"button\">Start</a>\n    <a class=\"pt-button pt-intent-primary\" tabindex=\"0\" role=\"button\">Left</a>\n    <a class=\"pt-button pt-intent-primary pt-active\" tabindex=\"0\" role=\"button\">Middle</a>\n    <a class=\"pt-button pt-intent-primary\" tabindex=\"0\" role=\"button\">Right</a>\n    <a class=\"pt-button pt-intent-primary pt-fixed\" tabindex=\"0\" role=\"button\">End</a>\n  </div>\n  <br />\n  <div class=\"pt-button-group pt-fill\">\n    <button class=\"pt-button pt-icon-arrow-left\"></button>\n    <button class=\"pt-button pt-fill\">Middle</button>\n    <button class=\"pt-button pt-icon-arrow-right\"></button>\n  </div>\n\n  Styleguide components.button-group.css.fill\n  */\n  /*\n  Vertical button groups\n\n  Add the class `pt-vertical` to create a vertical button group. The buttons in a vertical\n  group all have the same size as the widest button in the group.\n\n  Add the modifier class `pt-align-left` to left-align all button text and icons.\n\n  You can also combine vertical groups with the `pt-fill` and `pt-minimal` class modifiers.\n\n  Markup:\n  <div class=\"pt-button-group pt-vertical\" style=\"padding-right: 10px\">\n    <a class=\"pt-button pt-icon-search-template\" role=\"button\" tabindex=\"0\"></a>\n    <a class=\"pt-button pt-icon-zoom-in\" role=\"button\" tabindex=\"0\"></a>\n    <a class=\"pt-button pt-icon-zoom-out\" role=\"button\" tabindex=\"0\"></a>\n    <a class=\"pt-button pt-icon-zoom-to-fit\" role=\"button\" tabindex=\"0\"></a>\n  </div>\n  <div class=\"pt-button-group pt-vertical\" style=\"padding-right: 10px\">\n    <button type=\"button\" class=\"pt-button pt-active\">Home</button>\n    <button type=\"button\" class=\"pt-button\">Pages</button>\n    <button type=\"button\" class=\"pt-button\">Blog</button>\n    <button type=\"button\" class=\"pt-button\">Calendar</button>\n  </div>\n  <div class=\"pt-button-group pt-vertical pt-align-left pt-large\">\n    <button type=\"button\" class=\"pt-button pt-intent-primary pt-icon-document\">Text</button>\n    <button type=\"button\" class=\"pt-button pt-intent-primary pt-icon-media pt-active\">Media</button>\n    <button type=\"button\" class=\"pt-button pt-intent-primary pt-icon-link\">Sources</button>\n  </div>\n\n  Styleguide components.button-group.css.vertical\n  */ }\n  .pt-button-group .pt-button {\n    flex: 0 0 auto;\n    position: relative;\n    z-index: 0; }\n    .pt-button-group .pt-button[class*=\"pt-intent-\"] {\n      z-index: 1; }\n    .pt-button-group .pt-button:focus {\n      z-index: 2; }\n    .pt-button-group .pt-button:hover {\n      z-index: 3; }\n    .pt-button-group .pt-button:active, .pt-button-group .pt-button.pt-active, .pt-button-group .pt-button.pt-active {\n      z-index: 4; }\n    .pt-button-group .pt-button:disabled, .pt-button-group .pt-button.pt-disabled, .pt-button-group .pt-button.pt-disabled {\n      z-index: 0; }\n  .pt-button-group:not(.pt-vertical) .pt-button:not(:last-child):not(:hover):not(:active):not(.pt-active):not([class*=\"pt-intent-\"]) {\n    border-right-color: transparent; }\n  .pt-button-group:not(.pt-minimal) > .pt-popover-target:not(:first-child) .pt-button,\n  .pt-button-group:not(.pt-minimal) > .pt-button:not(:first-child) {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0; }\n  .pt-button-group:not(.pt-minimal) > .pt-popover-target:not(:last-child) .pt-button,\n  .pt-button-group:not(.pt-minimal) > .pt-button:not(:last-child) {\n    margin-right: -1px;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0; }\n  .pt-button-group.pt-minimal .pt-button {\n    border-color: transparent;\n    box-shadow: none;\n    background: none;\n    margin-right: 11px;\n    border-radius: 3px !important;\n    overflow: visible; }\n    .pt-button-group.pt-minimal .pt-button:focus {\n      box-shadow: none; }\n    .pt-button-group.pt-minimal .pt-button:hover {\n      border-color: transparent;\n      box-shadow: none;\n      background: rgba(167, 182, 194, 0.3);\n      text-decoration: none;\n      color: #182026; }\n    .pt-button-group.pt-minimal .pt-button.pt-active, .pt-button-group.pt-minimal .pt-button:active, .pt-button-group.pt-minimal .pt-button.pt-active {\n      border-color: transparent;\n      background: rgba(115, 134, 148, 0.3);\n      color: #182026; }\n    .pt-button-group.pt-minimal .pt-button.pt-disabled, .pt-button-group.pt-minimal .pt-button:disabled, .pt-button-group.pt-minimal .pt-button.pt-disabled, .pt-button-group.pt-minimal .pt-button:disabled:hover, .pt-button-group.pt-minimal .pt-button.pt-disabled:hover {\n      border-color: transparent;\n      background: inherit;\n      cursor: not-allowed;\n      color: rgba(92, 112, 128, 0.5); }\n    .pt-dark .pt-button-group.pt-minimal .pt-button {\n      border-color: transparent;\n      box-shadow: none;\n      background: none;\n      color: inherit; }\n      .pt-dark .pt-button-group.pt-minimal .pt-button:hover, .pt-dark .pt-button-group.pt-minimal .pt-button:active, .pt-dark .pt-button-group.pt-minimal .pt-button.pt-active, .pt-dark .pt-button-group.pt-minimal .pt-button.pt-active {\n        border-color: transparent;\n        box-shadow: none;\n        background: none; }\n      .pt-dark .pt-button-group.pt-minimal .pt-button:hover {\n        background: rgba(138, 155, 168, 0.15); }\n      .pt-dark .pt-button-group.pt-minimal .pt-button:active, .pt-dark .pt-button-group.pt-minimal .pt-button.pt-active, .pt-dark .pt-button-group.pt-minimal .pt-button.pt-active {\n        background: rgba(138, 155, 168, 0.3);\n        color: #f5f8fa; }\n      .pt-dark .pt-button-group.pt-minimal .pt-button.pt-disabled, .pt-dark .pt-button-group.pt-minimal .pt-button:disabled, .pt-dark .pt-button-group.pt-minimal .pt-button.pt-disabled, .pt-dark .pt-button-group.pt-minimal .pt-button:disabled:hover, .pt-dark .pt-button-group.pt-minimal .pt-button.pt-disabled:hover {\n        border-color: transparent;\n        background: inherit;\n        cursor: not-allowed;\n        color: rgba(191, 204, 214, 0.5); }\n    .pt-button-group.pt-minimal .pt-button.pt-intent-primary {\n      color: #106ba3; }\n      .pt-button-group.pt-minimal .pt-button.pt-intent-primary:hover, .pt-button-group.pt-minimal .pt-button.pt-intent-primary:active, .pt-button-group.pt-minimal .pt-intent-primary.pt-button.pt-active, .pt-button-group.pt-minimal .pt-button.pt-intent-primary.pt-active {\n        box-shadow: none;\n        background: none;\n        color: #106ba3; }\n      .pt-button-group.pt-minimal .pt-button.pt-intent-primary:hover {\n        background: rgba(19, 124, 189, 0.15); }\n      .pt-button-group.pt-minimal .pt-button.pt-intent-primary:active, .pt-button-group.pt-minimal .pt-intent-primary.pt-button.pt-active, .pt-button-group.pt-minimal .pt-button.pt-intent-primary.pt-active {\n        background: rgba(19, 124, 189, 0.3);\n        color: #106ba3; }\n      .pt-button-group.pt-minimal .pt-button.pt-intent-primary:disabled, .pt-button-group.pt-minimal .pt-intent-primary.pt-button.pt-disabled, .pt-button-group.pt-minimal .pt-button.pt-intent-primary.pt-disabled {\n        background: none;\n        color: rgba(16, 107, 163, 0.5); }\n      .pt-button-group.pt-minimal .pt-button.pt-intent-primary .pt-button-spinner .pt-spinner-head {\n        stroke: #106ba3; }\n      .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-primary {\n        color: #2b95d6; }\n        .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-primary:hover {\n          background: rgba(19, 124, 189, 0.2);\n          color: #2b95d6; }\n        .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-primary:active, .pt-dark .pt-button-group.pt-minimal .pt-intent-primary.pt-button.pt-active, .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-primary.pt-active {\n          background: rgba(19, 124, 189, 0.3);\n          color: #2b95d6; }\n        .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-primary:disabled, .pt-dark .pt-button-group.pt-minimal .pt-intent-primary.pt-button.pt-disabled, .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-primary.pt-disabled {\n          color: rgba(43, 149, 214, 0.5); }\n    .pt-button-group.pt-minimal .pt-button.pt-intent-success {\n      color: #0d8050; }\n      .pt-button-group.pt-minimal .pt-button.pt-intent-success:hover, .pt-button-group.pt-minimal .pt-button.pt-intent-success:active, .pt-button-group.pt-minimal .pt-intent-success.pt-button.pt-active, .pt-button-group.pt-minimal .pt-button.pt-intent-success.pt-active {\n        box-shadow: none;\n        background: none;\n        color: #0d8050; }\n      .pt-button-group.pt-minimal .pt-button.pt-intent-success:hover {\n        background: rgba(15, 153, 96, 0.15); }\n      .pt-button-group.pt-minimal .pt-button.pt-intent-success:active, .pt-button-group.pt-minimal .pt-intent-success.pt-button.pt-active, .pt-button-group.pt-minimal .pt-button.pt-intent-success.pt-active {\n        background: rgba(15, 153, 96, 0.3);\n        color: #0d8050; }\n      .pt-button-group.pt-minimal .pt-button.pt-intent-success:disabled, .pt-button-group.pt-minimal .pt-intent-success.pt-button.pt-disabled, .pt-button-group.pt-minimal .pt-button.pt-intent-success.pt-disabled {\n        background: none;\n        color: rgba(13, 128, 80, 0.5); }\n      .pt-button-group.pt-minimal .pt-button.pt-intent-success .pt-button-spinner .pt-spinner-head {\n        stroke: #0d8050; }\n      .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-success {\n        color: #15b371; }\n        .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-success:hover {\n          background: rgba(15, 153, 96, 0.2);\n          color: #15b371; }\n        .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-success:active, .pt-dark .pt-button-group.pt-minimal .pt-intent-success.pt-button.pt-active, .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-success.pt-active {\n          background: rgba(15, 153, 96, 0.3);\n          color: #15b371; }\n        .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-success:disabled, .pt-dark .pt-button-group.pt-minimal .pt-intent-success.pt-button.pt-disabled, .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-success.pt-disabled {\n          color: rgba(21, 179, 113, 0.5); }\n    .pt-button-group.pt-minimal .pt-button.pt-intent-warning {\n      color: #bf7326; }\n      .pt-button-group.pt-minimal .pt-button.pt-intent-warning:hover, .pt-button-group.pt-minimal .pt-button.pt-intent-warning:active, .pt-button-group.pt-minimal .pt-intent-warning.pt-button.pt-active, .pt-button-group.pt-minimal .pt-button.pt-intent-warning.pt-active {\n        box-shadow: none;\n        background: none;\n        color: #bf7326; }\n      .pt-button-group.pt-minimal .pt-button.pt-intent-warning:hover {\n        background: rgba(217, 130, 43, 0.15); }\n      .pt-button-group.pt-minimal .pt-button.pt-intent-warning:active, .pt-button-group.pt-minimal .pt-intent-warning.pt-button.pt-active, .pt-button-group.pt-minimal .pt-button.pt-intent-warning.pt-active {\n        background: rgba(217, 130, 43, 0.3);\n        color: #bf7326; }\n      .pt-button-group.pt-minimal .pt-button.pt-intent-warning:disabled, .pt-button-group.pt-minimal .pt-intent-warning.pt-button.pt-disabled, .pt-button-group.pt-minimal .pt-button.pt-intent-warning.pt-disabled {\n        background: none;\n        color: rgba(191, 115, 38, 0.5); }\n      .pt-button-group.pt-minimal .pt-button.pt-intent-warning .pt-button-spinner .pt-spinner-head {\n        stroke: #bf7326; }\n      .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-warning {\n        color: #f29d49; }\n        .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-warning:hover {\n          background: rgba(217, 130, 43, 0.2);\n          color: #f29d49; }\n        .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-warning:active, .pt-dark .pt-button-group.pt-minimal .pt-intent-warning.pt-button.pt-active, .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-warning.pt-active {\n          background: rgba(217, 130, 43, 0.3);\n          color: #f29d49; }\n        .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-warning:disabled, .pt-dark .pt-button-group.pt-minimal .pt-intent-warning.pt-button.pt-disabled, .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-warning.pt-disabled {\n          color: rgba(242, 157, 73, 0.5); }\n    .pt-button-group.pt-minimal .pt-button.pt-intent-danger {\n      color: #c23030; }\n      .pt-button-group.pt-minimal .pt-button.pt-intent-danger:hover, .pt-button-group.pt-minimal .pt-button.pt-intent-danger:active, .pt-button-group.pt-minimal .pt-intent-danger.pt-button.pt-active, .pt-button-group.pt-minimal .pt-button.pt-intent-danger.pt-active {\n        box-shadow: none;\n        background: none;\n        color: #c23030; }\n      .pt-button-group.pt-minimal .pt-button.pt-intent-danger:hover {\n        background: rgba(219, 55, 55, 0.15); }\n      .pt-button-group.pt-minimal .pt-button.pt-intent-danger:active, .pt-button-group.pt-minimal .pt-intent-danger.pt-button.pt-active, .pt-button-group.pt-minimal .pt-button.pt-intent-danger.pt-active {\n        background: rgba(219, 55, 55, 0.3);\n        color: #c23030; }\n      .pt-button-group.pt-minimal .pt-button.pt-intent-danger:disabled, .pt-button-group.pt-minimal .pt-intent-danger.pt-button.pt-disabled, .pt-button-group.pt-minimal .pt-button.pt-intent-danger.pt-disabled {\n        background: none;\n        color: rgba(194, 48, 48, 0.5); }\n      .pt-button-group.pt-minimal .pt-button.pt-intent-danger .pt-button-spinner .pt-spinner-head {\n        stroke: #c23030; }\n      .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-danger {\n        color: #f55656; }\n        .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-danger:hover {\n          background: rgba(219, 55, 55, 0.2);\n          color: #f55656; }\n        .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-danger:active, .pt-dark .pt-button-group.pt-minimal .pt-intent-danger.pt-button.pt-active, .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-danger.pt-active {\n          background: rgba(219, 55, 55, 0.3);\n          color: #f55656; }\n        .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-danger:disabled, .pt-dark .pt-button-group.pt-minimal .pt-intent-danger.pt-button.pt-disabled, .pt-dark .pt-button-group.pt-minimal .pt-button.pt-intent-danger.pt-disabled {\n          color: rgba(245, 86, 86, 0.5); }\n    .pt-button-group.pt-minimal .pt-button:focus {\n      outline-style: solid; }\n    .pt-button-group.pt-minimal .pt-button::after {\n      margin: 5px;\n      background: rgba(16, 22, 26, 0.15);\n      width: 1px;\n      height: 20px;\n      display: inline-block;\n      position: absolute;\n      top: 0;\n      left: 100%;\n      content: \"\"; }\n      .pt-dark .pt-button-group.pt-minimal .pt-button::after {\n        background: rgba(255, 255, 255, 0.15); }\n  .pt-button-group.pt-minimal > .pt-popover-target:last-child .pt-button,\n  .pt-button-group.pt-minimal > .pt-button:last-child {\n    margin-right: 0; }\n    .pt-button-group.pt-minimal > .pt-popover-target:last-child .pt-button::after,\n    .pt-button-group.pt-minimal > .pt-button:last-child::after {\n      display: none; }\n  .pt-button-group.pt-fill {\n    display: flex; }\n  .pt-button-group .pt-button.pt-fill,\n  .pt-button-group.pt-fill .pt-button:not(.pt-fixed) {\n    flex: 1 1 auto; }\n  .pt-button-group.pt-vertical {\n    flex-direction: column;\n    align-items: stretch;\n    vertical-align: top; }\n    .pt-button-group.pt-vertical .pt-button {\n      margin-right: 0 !important; }\n      .pt-button-group.pt-vertical .pt-button:not(:last-child):not(:hover):not(:active):not(.pt-active):not([class*=\"pt-intent-\"]) {\n        border-bottom-color: transparent; }\n    .pt-button-group.pt-vertical > .pt-popover-target:first-child .pt-button,\n    .pt-button-group.pt-vertical > .pt-button:first-child {\n      border-radius: 3px 3px 0 0; }\n    .pt-button-group.pt-vertical > .pt-popover-target:last-child .pt-button,\n    .pt-button-group.pt-vertical > .pt-button:last-child {\n      border-radius: 0 0 3px 3px; }\n    .pt-button-group.pt-vertical > .pt-popover-target:not(:last-child) .pt-button,\n    .pt-button-group.pt-vertical > .pt-button:not(:last-child) {\n      margin-bottom: -1px; }\n    .pt-button-group.pt-vertical.pt-minimal .pt-button:not(:last-child) {\n      margin-bottom: 11px; }\n    .pt-button-group.pt-vertical.pt-minimal .pt-button::after {\n      top: 100%;\n      right: 0;\n      left: 0;\n      width: auto;\n      height: 1px; }\n  .pt-button-group.pt-align-left .pt-button {\n    text-align: left; }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nCallouts\n\nCallouts visually highlight important content for the user.\n\nStyleguide components.callout\n*/\n/*\nCSS API\n\nCallouts use the same visual intent modifier classes as buttons. If you need a\nheading, use the `<h5>` element.\n\n<div class=\"pt-callout pt-intent-primary pt-icon-info-sign\">\n  Note that the `<h5>` heading is entirely optional.\n</div>\n\nMarkup:\n<div class=\"pt-callout {{.modifier}}\">\n  <h5>Callout Heading</h5>\n  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, delectus!\n</div>\n\n.pt-intent-primary - Primary intent\n.pt-intent-success - Success intent\n.pt-intent-warning - Warning intent\n.pt-intent-danger  - Danger intent\n.pt-icon-info-sign - With an icon\n\nStyleguide components.callout.css\n*/\n.pt-callout {\n  line-height: 1.5;\n  font-size: 14px;\n  position: relative;\n  border-radius: 3px;\n  background-color: rgba(138, 155, 168, 0.15);\n  padding: 10px 12px 9px; }\n  .pt-callout[class*=\"pt-icon-\"] {\n    padding-left: 40px; }\n    .pt-callout[class*=\"pt-icon-\"]::before {\n      line-height: 1;\n      font-family: \"Icons20\", sans-serif;\n      font-size: 20px;\n      font-weight: 400;\n      font-style: normal;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      position: absolute;\n      top: 10px;\n      left: 10px;\n      color: #5c7080; }\n  .pt-callout h5 {\n    margin-top: 0;\n    margin-bottom: 5px;\n    line-height: 20px; }\n  .pt-dark .pt-callout {\n    background-color: rgba(138, 155, 168, 0.2); }\n    .pt-dark .pt-callout[class*=\"pt-icon-\"]::before {\n      color: #bfccd6; }\n  .pt-callout.pt-intent-primary {\n    background-color: rgba(19, 124, 189, 0.15); }\n    .pt-callout.pt-intent-primary[class*=\"pt-icon-\"]::before {\n      color: #137cbd; }\n    .pt-callout.pt-intent-primary h5 {\n      color: #106ba3; }\n    .pt-dark .pt-callout.pt-intent-primary {\n      background-color: rgba(19, 124, 189, 0.25); }\n      .pt-dark .pt-callout.pt-intent-primary h5 {\n        color: #2b95d6; }\n  .pt-callout.pt-intent-success {\n    background-color: rgba(15, 153, 96, 0.15); }\n    .pt-callout.pt-intent-success[class*=\"pt-icon-\"]::before {\n      color: #0f9960; }\n    .pt-callout.pt-intent-success h5 {\n      color: #0d8050; }\n    .pt-dark .pt-callout.pt-intent-success {\n      background-color: rgba(15, 153, 96, 0.25); }\n      .pt-dark .pt-callout.pt-intent-success h5 {\n        color: #15b371; }\n  .pt-callout.pt-intent-warning {\n    background-color: rgba(217, 130, 43, 0.15); }\n    .pt-callout.pt-intent-warning[class*=\"pt-icon-\"]::before {\n      color: #d9822b; }\n    .pt-callout.pt-intent-warning h5 {\n      color: #bf7326; }\n    .pt-dark .pt-callout.pt-intent-warning {\n      background-color: rgba(217, 130, 43, 0.25); }\n      .pt-dark .pt-callout.pt-intent-warning h5 {\n        color: #f29d49; }\n  .pt-callout.pt-intent-danger {\n    background-color: rgba(219, 55, 55, 0.15); }\n    .pt-callout.pt-intent-danger[class*=\"pt-icon-\"]::before {\n      color: #db3737; }\n    .pt-callout.pt-intent-danger h5 {\n      color: #c23030; }\n    .pt-dark .pt-callout.pt-intent-danger {\n      background-color: rgba(219, 55, 55, 0.25); }\n      .pt-dark .pt-callout.pt-intent-danger h5 {\n        color: #f55656; }\n  .pt-running-text .pt-callout {\n    margin: 20px 0; }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nCards\n\nA card is a bounded unit of UI content with a solid background color.\n\nStyleguide components.card\n*/\n/*\nCSS API\n\nStart with `.pt-card` and add an elevation modifier class to apply a drop shadow that simulates\nheight in the UI.\n\nYou can also use the `.pt-elevation-*` classes by themselves to apply shadows to any arbitrary\nelement.\n\nMarkup:\n<div class=\"pt-card {{.modifier}}\">\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec dapibus et mauris,\n  vitae dictum metus.\n</div>\n\n.pt-elevation-0 - Ground floor. This level provides just a gentle border shadow.\n.pt-elevation-1 - First. Subtle drop shadow intended for static containers.\n.pt-elevation-2 - Second. An even stronger shadow, moving on up.\n.pt-elevation-3 - Third. For containers overlaying content temporarily.\n.pt-elevation-4 - Fourth. The strongest shadow, usually for overlay containers on top of backdrops.\n\nStyleguide components.card.css\n*/\n.pt-card {\n  border-radius: 3px;\n  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.15);\n  background-color: #ffffff;\n  padding: 20px;\n  transition: transform 200ms cubic-bezier(0.4, 1, 0.75, 0.9), box-shadow 200ms cubic-bezier(0.4, 1, 0.75, 0.9); }\n  .pt-card.pt-dark,\n  .pt-dark .pt-card {\n    box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4);\n    background-color: #30404d; }\n\n.pt-elevation-0 {\n  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.15); }\n  .pt-elevation-0.pt-dark,\n  .pt-dark .pt-elevation-0 {\n    box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4); }\n\n.pt-elevation-1 {\n  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 1px 1px rgba(16, 22, 26, 0.2); }\n  .pt-elevation-1.pt-dark,\n  .pt-dark .pt-elevation-1 {\n    box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 1px 1px rgba(16, 22, 26, 0.4); }\n\n.pt-elevation-2 {\n  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 1px 1px rgba(16, 22, 26, 0.2), 0 2px 6px rgba(16, 22, 26, 0.2); }\n  .pt-elevation-2.pt-dark,\n  .pt-dark .pt-elevation-2 {\n    box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 1px 1px rgba(16, 22, 26, 0.4), 0 2px 6px rgba(16, 22, 26, 0.4); }\n\n.pt-elevation-3 {\n  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2), 0 8px 24px rgba(16, 22, 26, 0.2); }\n  .pt-elevation-3.pt-dark,\n  .pt-dark .pt-elevation-3 {\n    box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 2px 4px rgba(16, 22, 26, 0.4), 0 8px 24px rgba(16, 22, 26, 0.4); }\n\n.pt-elevation-4 {\n  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 4px 8px rgba(16, 22, 26, 0.2), 0 18px 46px 6px rgba(16, 22, 26, 0.2); }\n  .pt-elevation-4.pt-dark,\n  .pt-dark .pt-elevation-4 {\n    box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 4px 8px rgba(16, 22, 26, 0.4), 0 18px 46px 6px rgba(16, 22, 26, 0.4); }\n\n/*\nInteractive cards\n\nAdd the `.pt-interactive` modifier class to make a `.pt-card` respond to user interactions. When you\nhover over cards with this class applied, the mouse changes to a pointer and the elevation shadow on\nthe card increases by two levels.\n\nUsers expect an interactive card to be a single clickable unit.\n\nMarkup:\n<div class=\"docs-card-example\">\n  <div class=\"pt-card pt-elevation-0 pt-interactive\">\n    <h5><a href=\"#\">Trader Profile</a></h5>\n    <p>Overview of employee activity, including risk model, scores and scenario alert history.</p>\n  </div>\n  <div class=\"pt-card pt-elevation-1 pt-interactive\">\n    <h5><a href=\"#\">Desk Profile</a></h5>\n    <p>Desk-level summary of trading activity and trading profiles.</p>\n  </div>\n  <div class=\"pt-card pt-elevation-2 pt-interactive\">\n    <h5><a href=\"#\">Dataset Dashboards</a></h5>\n    <p>Stats of dataset completeness and reference data join percentages.</p>\n  </div>\n</div>\n\nStyleguide components.card.css.interactive\n*/\n.pt-card.pt-interactive:hover {\n  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2), 0 8px 24px rgba(16, 22, 26, 0.2);\n  cursor: pointer; }\n  .pt-card.pt-interactive:hover.pt-dark,\n  .pt-dark .pt-card.pt-interactive:hover {\n    box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 2px 4px rgba(16, 22, 26, 0.4), 0 8px 24px rgba(16, 22, 26, 0.4); }\n\n.pt-card.pt-interactive:active {\n  opacity: 0.9;\n  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 1px 1px rgba(16, 22, 26, 0.2);\n  transition-duration: 0; }\n  .pt-card.pt-interactive:active.pt-dark,\n  .pt-dark .pt-card.pt-interactive:active {\n    box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 1px 1px rgba(16, 22, 26, 0.4); }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nCollapse\n\nThe `Collapse` element shows and hides content with a built-in slide in/out animation.\nYou might use this to create a panel of settings for your application, with sub-sections\nthat can be expanded and collapsed.\n\n@react-example CollapseExample\n\nStyleguide components.collapse\n*/\n/*\nJavaScript API\n\nThe `Collapse` component is available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#components.usage).\n\nAny content should be a child of the `Collapse` element. Content must be in the document\nflow (e.g. `position: absolute;` wouldn't work, as the parent element would inherit a height of 0).\n\nToggling the `isOpen` prop triggers the open and close animations.\nOnce the component is in the closed state, the children are no longer rendered.\n\n```\nexport interface ICollapseExampleState {\n    isOpen?: boolean;\n};\n\nexport class CollapseExample extends React.Component<{}, ICollapseExampleState> {\n    public state = {\n        isOpen: false,\n    };\n\n    public render() {\n        return (\n            <div>\n                <Button onClick={this.handleClick}>\n                    {this.state.isOpen ? \"Hide\" : \"Show\"} build logs\n                </Button>\n                <Collapse isOpen={this.state.isOpen}>\n                    <pre>\n                        Dummy text.\n                    </pre>\n                </Collapse>\n            </div>\n        );\n    }\n\n    private handleClick = () => {\n        this.setState({isOpen: !this.state.isOpen});\n    }\n}\n```\n\n@interface ICollapseProps\n\nStyleguide components.collapse.js\n*/\n.pt-collapse {\n  height: 0;\n  overflow: hidden;\n  transition: height 200ms cubic-bezier(0.4, 1, 0.75, 0.9); }\n  .pt-collapse .pt-collapse-body {\n    transition: transform 200ms cubic-bezier(0.4, 1, 0.75, 0.9); }\n\n/*\nCollapsible list\n\nThe `CollapsibleList` React component accepts a list of menu items and a count of visible items. It\nshows precisely that many items and collapses the rest into a dropdown menu. The required\n`renderVisibleItem` callback prop allows for customizing the appearance of visible items, using the\nprops from the `MenuItem` children.\n\n@react-example CollapsibleListExample\n\nStyleguide components.collapsiblelist\n*/\n/*\nJavaScript API\n\nThe `CollapsibleList` component is available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#components.usage).\n\nChildren of the `CollapsibleList` component _must_ be `MenuItem`s so they can be easily rendered\nin the dropdown. Define a `renderVisibleItem` callback to customize the appearance of visible\nitems using their [`IMenuItemProps`](#components.menu.js.menu-item).\n\n@interface ICollapsibleListProps\n\nWeight: -10\n\nStyleguide components.collapsiblelist.js\n*/\n/*\nSeparators\n\nOften a list of items calls for separators between each item.\nAdding separators to a `CollapsibleList` is easily achieved via CSS using `::after` pseudo-elements.\n\n```css.scss\n// pass `visibleItemClassName=\"my-list-item\"` to component, then...\n\n.my-list-item::after {\n  display: inline-block;\n  content: \"\";\n  // custom separator styles...\n}\n\n// remove separator after the last item\n.my-list-item:last-child::after {\n  display: none;\n}\n```\n\nStyleguide components.collapsiblelist.separator\n*/\n/*\nContext menus\n\nContext menus present the user with a custom list of actions upon right-click.\n\nYou can create context menus in either of the following ways:\n\n- by adding the `@ContextMenuTarget` [decorator](#components.context-menu.decorator) to a React\n  Component that implements `renderContextMenu(): JSX.Element`.\n- via the [imperative](#components.context-menu.js) `ContextMenu.show` and `ContextMenu.hide` API\n  methods, ideal for non-React-based applications.\n\n@react-example ContextMenuExample\n\nStyleguide components.context-menu\n*/\n/*\nJavaScript API: decorator\n\nThe `ContextMenuTarget` decorator is available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#components.usage).\n\nThe `@ContextMenuTarget` [class decorator][ts-decorator] can be applied to any `React.Component`\nclass that meets the following requirements:\n\n- It defines an instance method called `renderContextMenu()` that returns a single `JSX.Element`\n  (most likely a [`Menu`](#components.menu)).\n- Its root element supports the `\"contextmenu\"` event and the `onContextMenu` prop.\n\n  This is always true if the decorated class uses an intrinsic element, such as `<div>`, as its\n  root. If it uses a custom element as its root, you must ensure that the prop is implemented\n  correctly for that element.\n\nWhen the user triggers the `\"contextmenu\"` event on the decorated class, `renderContextMenu()` is\ncalled. If `renderContextMenu()` returns an element, the browser's native [context menu][wiki-cm] is\nblocked and the returned element is displayed instead in a `Popover` at the cursor's location.\n\n```\nimport { ContextMenuTarget, Menu, MenuItem } from \"@blueprintjs/core\";\n\n@ContextMenuTarget\nclass RightClickMe extends React.Component<{}, {}> {\n    public render() {\n      // root element must support `onContextMenu`\n      return <div>{...}</div>;\n    }\n\n    public renderContextMenu() {\n        // return a single element, or nothing to use default browser behavior\n        return (\n            <Menu>\n                <MenuItem onClick={this.handleSave} text=\"Save\" />\n                <MenuItem onClick={this.handleDelete} text=\"Delete\" />\n            </Menu>\n        );\n    }\n}\n```\n\n[ts-decorator]: https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Decorators.md\n[wiki-cm]: https://en.wikipedia.org/wiki/Context_menu\n\nStyleguide components.context-menu.decorator\n*/\n/*\nJavaScript API: imperative\n\nThe `ContextMenu` component is available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#components.usage).\n\nThe imperative API provides a single static `ContextMenu` object, enforcing the principle that only\none context menu can be open at a time.\n\n- `ContextMenu.show(menu: JSX.Element, offset: IOffset, onClose?: () => void): void` &ndash;\n  Show the given element at the given offset from the top-left corner of the viewport.\n  Showing a menu closes the previously shown one automatically.\n\n  The menu appears below-right of this point, but will flip to below-left instead if there is not\n  enough room onscreen. The optional callback is invoked when this menu closes.\n\n- `ContextMenu.hide(): void` &ndash; Hide the context menu, if it is open.\n- `ContextMenu.isOpen(): boolean` &ndash; Whether a context menu is currently visible.\n\nThis API is ideal for non-React-based apps or for programmatically triggered menus.\n\n```\nimport { ContextMenu, MenuFactory, MenuItemFactory } from \"@blueprintjs/core\";\n\nconst rightClickMe = document.query(\"#right-click-me\") as HTMLElement;\nrightClickMe.oncontextmenu = (e: MouseEvent) => {\n    // prevent the browser's native context menu\n    e.preventDefault();\n    // render a Menu without JSX...\n    const menu = MenuFactory({\n        children: [\n            MenuItemFactory({ onClick: handleSave, text: \"Save\" }),\n            MenuItemFactory({ onClick: handleDelete, text: \"Delete\" }),\n        ]\n    });\n    // mouse position is available on event\n    ContextMenu.show(menu, { left: e.clientX, top: e.clientY }, () => {\n        // menu was closed; callback optional\n    });\n};\n```\n\nStyleguide components.context-menu.js\n*/\n.pt-context-menu .pt-popover-target {\n  display: block; }\n\n.pt-context-menu-popover-target {\n  position: fixed; }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nA mixin to generate the classes for a React CSSTransitionGroup which animates any number of CSS\nproperties at once.\n\nTransitioned properties are specificed as a map of property names to lists of (inital value, final\nvalue). For enter & appear transitions, each property will transition from its initial to its final\nvalue. For leave transitions, each property will transition in reverse, from final to initial.\n\n**Simple example:**\n`@include react-transition(\"pt-popover\", (opacity: 0 1), $before: \"&\");`\nTransition named \"pt-popover\" moves opacity from 0 to 1. `\"&\"` indicates that the\nTransition classes are expected to be applied to this element, where the mixin is invoked.\n\n**Params:**\n$name: React transitionName prop\n$properties: map of CSS property to (initial, final) values\n$duration: transition duration\n$easing: transition easing function\n$delay: transition delay\n$before: selector text to insert before transition name (often to select self: &)\n$after: selector text to insert after transiton name (to select children)\n*/\n/*\nA mixin to generate the classes for one phase of a React CSSTransitionGroup.\n`$phase` must be `appear` or `enter` or `leave`.\nIf `enter` phase is given then `appear` phase will be generated at the same time.\nIf `leave` phase is given then property values are animated in reverse, from final to initial.\n\n**Example:**\n@include react-transition-phase(pt-toast, enter, $enter-translate, $before: \"&\");\n@include react-transition-phase(pt-toast, leave, $leave-blur, $pt-transition-duration * 3, $before: \"&\");\n*/\n/*\nGiven map of properties to values, set each property to the value at the given index.\n(remember that sass indices are 1-based).\n\nExample: `each-prop((opacity: 0 1), 2)` will print \"opacity: 1\"\n*/\n/*\nFormat transition class name with all the bits.\n\"enter\" phase will include \"appear\" phase in returned name.\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nDialogs\n\nDialogs present content overlaid over other parts of the UI.\n\n<div class=\"pt-callout pt-intent-primary pt-icon-info-sign\">\n  <h5>Terminology note</h5>\n  The term \"modal\" is sometimes used to mean \"dialog,\" but this is a misnomer.\n  _Modal_ is an adjective that describes parts of a UI.\n  An element is considered modal if it\n  [blocks interaction with the rest of the application](https://en.wikipedia.org/wiki/Modal_window).\n  We use the term \"dialog\" to avoid confusion with the adjective.\n</div>\n\nStyleguide components.dialog\n*/\n/*\nJavaScript API\n\nThe `Dialog` component is available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#components.usage).\n\nThere are two ways to render dialogs:\n\n- in-place in the DOM tree. This is the default behavior.\n- injected into a newly created element attached to `document.body`.\n  Set `inline={false}` to enable this.\n\n`Dialog` is implemented as a stateless React component. The children you provide to this component\nare rendered as contents inside the `.pt-dialog` element.\n\n```\ninterface IDialogExampleState {\n    isOpen: boolean;\n}\n\nclass DialogExample extends React.Component<{}, IDialogExampleState> {\n    public state = { isOpen: false };\n\n    public render() {\n        return (\n            <div>\n                <Button onClick={this.toggleDialog} text=\"Show dialog\" />\n                <Dialog\n                    iconName=\"inbox\"\n                    isOpen={this.state.isOpen}\n                    onClose={this.toggleDialog}\n                    title=\"Dialog Header\"\n                >\n                    <div className=\"pt-dialog-body\">\n                        Some content\n                    </div>\n                    <div className=\"pt-dialog-footer\">\n                        <div className=\"pt-dialog-footer-actions\">\n                            <Button text=\"Secondary\" />\n                            <Button\n                                intent={Intent.PRIMARY}\n                                onClick={this.toggleDialog}\n                                text=\"Primary\"\n                            />\n                        </div>\n                    </div>\n                </Dialog>\n            </div>\n        );\n    }\n\n    private toggleDialog = () => this.setState({ isOpen: !this.state.isOpen });\n}\n```\n\n@interface IDialogProps\n\n@react-example DialogExample\n\nStyleguide components.dialog.js\n*/\n.pt-dialog {\n  opacity: 1;\n  transform: translateX(50%) scale(1);\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  top: 25%;\n  right: 50%;\n  z-index: 20;\n  margin-bottom: 20px;\n  border-radius: 6px;\n  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 4px 8px rgba(16, 22, 26, 0.2), 0 18px 46px 6px rgba(16, 22, 26, 0.2);\n  background: #ebf1f5;\n  width: 500px;\n  padding-bottom: 20px; }\n  .pt-dialog.pt-overlay-enter, .pt-dialog.pt-overlay-appear {\n    opacity: 0;\n    transform: translateX(50%) scale(0.5); }\n  .pt-dialog.pt-overlay-enter-active, .pt-dialog.pt-overlay-appear-active {\n    opacity: 1;\n    transform: translateX(50%) scale(1);\n    transition-property: opacity, transform;\n    transition-duration: 300ms;\n    transition-timing-function: cubic-bezier(0.54, 1.12, 0.38, 1.11);\n    transition-delay: 0; }\n  .pt-dialog.pt-overlay-leave {\n    opacity: 1;\n    transform: translateX(50%) scale(1); }\n  .pt-dialog.pt-overlay-leave-active {\n    opacity: 0;\n    transform: translateX(50%) scale(0.5);\n    transition-property: opacity, transform;\n    transition-duration: 300ms;\n    transition-timing-function: cubic-bezier(0.54, 1.12, 0.38, 1.11);\n    transition-delay: 0; }\n  .pt-dialog:focus {\n    outline: 0; }\n  .pt-dialog.pt-dark,\n  .pt-dark .pt-dialog {\n    box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 4px 8px rgba(16, 22, 26, 0.4), 0 18px 46px 6px rgba(16, 22, 26, 0.4);\n    background: #293742;\n    color: #f5f8fa; }\n\n.pt-dialog-header {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  border-radius: 6px 6px 0 0;\n  box-shadow: 0 1px 0 rgba(16, 22, 26, 0.15);\n  background: #ffffff;\n  min-height: 40px;\n  padding-left: 20px; }\n  .pt-dialog-header .pt-icon-large {\n    flex: 0 0 auto;\n    margin-right: 10px;\n    color: #5c7080; }\n  .pt-dialog-header h5 {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    word-wrap: normal;\n    flex: 1 1 auto;\n    margin: 0;\n    line-height: inherit; }\n    .pt-dialog-header h5:last-child {\n      margin-right: 20px; }\n  .pt-dark .pt-dialog-header {\n    box-shadow: 0 1px 0 rgba(16, 22, 26, 0.4);\n    background: #30404d; }\n    .pt-dark .pt-dialog-header .pt-icon-large {\n      color: #bfccd6; }\n    .pt-dark .pt-dialog-header h5 {\n      color: #f5f8fa; }\n\n.pt-dialog-close-button {\n  line-height: 1;\n  font-family: \"Icons20\", sans-serif;\n  font-size: 20px;\n  font-weight: 400;\n  font-style: normal;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  color: #5c7080;\n  flex: 0 0 auto;\n  border: none;\n  background: none;\n  cursor: pointer;\n  padding: 10px; }\n  .pt-dialog-close-button:hover {\n    color: #182026; }\n  .pt-dark .pt-dialog-close-button {\n    color: #bfccd6; }\n    .pt-dark .pt-dialog-close-button:hover {\n      color: #f5f8fa; }\n\n.pt-dialog-body {\n  flex: 1 1 auto;\n  margin: 20px;\n  line-height: 18px; }\n\n.pt-dialog-footer {\n  flex: 0 0 auto;\n  margin: 0 20px; }\n\n.pt-dialog-footer-actions {\n  display: flex;\n  justify-content: flex-end; }\n  .pt-dialog-footer-actions .pt-button {\n    margin-left: 10px; }\n\n/*\nCSS API\n\nYou can create dialogs manually using the HTML markup and `pt-dialog-*` classes below.\nHowever, you should use the dialog [JavaScript APIs](#components.dialog.js) whenever possible,\nas they automatically generate some of this markup.\n\nMore examples of dialog content are shown below.\n\nMarkup:\n<div class=\"pt-dialog\">\n  <div class=\"pt-dialog-header\">\n    <span class=\"pt-icon-large pt-icon-inbox\"></span>\n    <h5>Dialog Header</h5>\n    <button aria-label=\"Close\" class=\"pt-dialog-close-button pt-icon-small-cross\"></button>\n  </div>\n  <div class=\"pt-dialog-body\">\n    This dialog hasn't been wired up with any open or close interactions.\n    It's just an example of markup and styles.\n  </div>\n  <div class=\"pt-dialog-footer\">\n    <div class=\"pt-dialog-footer-actions\">\n      <button type=\"button\" class=\"pt-button\">Secondary button</button>\n      <button type=\"submit\" class=\"pt-button pt-intent-primary\">Primary button</button>\n    </div>\n  </div>\n</div>\n\nStyleguide components.dialog.css\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n.pt-select select {\n  display: inline-block;\n  border: 1px solid;\n  border-radius: 3px;\n  cursor: pointer;\n  padding: 0 10px;\n  vertical-align: middle;\n  font-size: 14px;\n  background: #f5f8fa;\n  background: -webkit-linear-gradient( top , #ffffff, rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #f5f8fa;\n  background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #f5f8fa;\n  border-color: rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.17) rgba(16, 22, 26, 0.1);\n  box-shadow: 0 1px 1px rgba(16, 22, 26, 0.1);\n  background-clip: padding-box;\n  color: #182026;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border-radius: 3px;\n  height: 30px;\n  padding: 0 25px 0 10px; }\n  .pt-select select:hover {\n    background: #ebf1f5;\n    background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #ebf1f5;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #ebf1f5;\n    border-color: rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.27) rgba(16, 22, 26, 0.2);\n    box-shadow: 0 1px 1px rgba(16, 22, 26, 0.1);\n    background-clip: padding-box; }\n  .pt-select select:active {\n    border-color: rgba(16, 22, 26, 0.35) rgba(16, 22, 26, 0.25) rgba(16, 22, 26, 0.25) rgba(16, 22, 26, 0.25);\n    box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.1);\n    background-color: #ced9e0;\n    background-image: none; }\n  .pt-select select:disabled {\n    outline: none;\n    border-color: transparent;\n    box-shadow: none;\n    background-clip: border-box;\n    background-color: rgba(206, 217, 224, 0.5);\n    background-image: none;\n    cursor: not-allowed;\n    color: rgba(92, 112, 128, 0.5); }\n\n.pt-select.pt-large select {\n  height: 40px;\n  padding-right: 35px;\n  font-size: 16px; }\n\n.pt-dark .pt-select select {\n  background: rgba(255, 255, 255, 0.1);\n  background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06)) left no-repeat;\n  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06)) left no-repeat;\n  border-color: rgba(16, 22, 26, 0.6);\n  box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2);\n  background-clip: padding-box;\n  color: #f5f8fa; }\n  .pt-dark .pt-select select:hover, .pt-dark .pt-select select:active {\n    color: #f5f8fa; }\n  .pt-dark .pt-select select:hover {\n    background: rgba(255, 255, 255, 0.1);\n    background: -webkit-linear-gradient( top , rgba(16, 22, 26, 0.1), rgba(16, 22, 26, 0.2)) left no-repeat, center no-repeat rgba(255, 255, 255, 0.1);\n    background: linear-gradient(to bottom, rgba(16, 22, 26, 0.1), rgba(16, 22, 26, 0.2)) left no-repeat, center no-repeat rgba(255, 255, 255, 0.1);\n    border-color: rgba(16, 22, 26, 0.8);\n    box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2);\n    background-clip: padding-box; }\n  .pt-dark .pt-select select:active {\n    box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.2);\n    background-color: rgba(16, 22, 26, 0.1);\n    background-image: none; }\n  .pt-dark .pt-select select:disabled {\n    border-color: rgba(206, 217, 224, 0.1);\n    box-shadow: none;\n    background-color: rgba(206, 217, 224, 0.1);\n    background-image: none;\n    color: rgba(191, 204, 214, 0.5); }\n  .pt-dark .pt-select select .pt-button-spinner .pt-spinner-head {\n    background: rgba(16, 22, 26, 0.5);\n    stroke: #8a9ba8; }\n\n.pt-select select:disabled {\n  box-shadow: none;\n  background-color: rgba(206, 217, 224, 0.5);\n  cursor: not-allowed;\n  color: rgba(92, 112, 128, 0.5); }\n\n.pt-select::after {\n  line-height: 1;\n  font-family: \"Icons16\", sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  font-style: normal;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  position: absolute;\n  top: 0;\n  right: 7px;\n  line-height: 30px;\n  color: #5c7080;\n  content: \"⌄\";\n  pointer-events: none; }\n  .pt-disabled.pt-select::after {\n    color: rgba(92, 112, 128, 0.5); }\n\n/*\nEditable text\n\n`EditableText` looks like normal UI text, but transforms into a text input field when the user\nfocuses it.\n\nThe text input inherits all font styling from its ancestors, making the transition between reading\nand editing text seamless.\n\nYou might use this component for inline renaming, or for an [editable multiline\ndescription](#components.editable.multiline). You should not use `EditableText` when a static\nalways-editable `<input>` or `<textarea>` tag would suffice.\n\n<div class=\"pt-callout pt-intent-danger pt-icon-error\">\n  <h5>Centering the component</h5>\n  **Do not center this component** using `text-align: center`, as it will cause an infinite loop\n  in the browser ([more details](https://github.com/JedWatson/react-select/issues/540)). Instead,\n  you should center the component via flexbox or with `position` and `transform: translateX(-50%)`.\n</div>\n\n@react-example EditableTextExample\n\nStyleguide components.editable\n*/\n/*\nJavaScript API\n\nThe `EditableText` component is available in the __@blueprintjs/core__ package. Make sure to review\nthe [general usage docs for JS components](#components.usage).\n\n`EditableText` can be used like an [`input`\nelement](https://facebook.github.io/react/docs/forms.html) and supports controlled or uncontrolled\nusage through the `value` or `defaultValue` props, respectively.\n\nThe `onConfirm` and `onCancel` callbacks are invoked based on user interaction. The user presses\n<kbd class=\"pt-key\">enter</kbd> or blurs the input to confirm the current value, or presses <kbd\nclass=\"pt-key\">esc</kbd> to cancel. Canceling resets the field to the last confirmed value.\n\n`EditableText` by default supports _exactly one line of text_ and will grow or shrink horizontally\nbased on the length of text. See below for information on [multiline\nsupport](#components.editable.multiline).\n\n@interface IEditableTextProps\n\nStyleguide components.editable.js\n*/\n/*\nMultiline mode\n\n```\n<EditableText multiline minLines={3} maxLines={12} {...props} />\n```\n\nProvide the `multiline` prop to create an `EditableText` field that spans multiple lines. Multiline\nmode uses a `<textarea>` instead of an `<input type=\"text\">` to support multiple lines of text.\n\nUsers confirm text in multiline mode by pressing <kbd class=\"pt-key\">ctrl</kbd> <kbd\nclass=\"pt-key\">enter</kbd> or\n<kbd class=\"pt-key\">cmd</kbd> <kbd class=\"pt-key\">enter</kbd> rather than simply <kbd\nclass=\"pt-key\">enter</kbd>. (Pressing the <kbd class=\"pt-key\">enter</kbd> key by itself moves the\ncursor to the next line.)\n\nAdditionally, in multiline mode the component's width is fixed at 100%. It grows or shrinks\n_vertically_ instead, based on the number of lines of text. You can use the `minLines` and\n`maxLines` props to constrain the vertical size of the component.\n\n<div class=\"pt-callout pt-intent-warning pt-icon-warning-sign\">\n  <h5>Multiline prop format</h5>\n  You should declare `multiline` as a valueless boolean prop, as in the example above\n  (`<EditableText multiline ...>`). This prevents you from changing the value after declaring it,\n  which would provide a sub-optimal experience for users (multiline text does not always render\n  cleanly into a single line).\n</div>\n\nStyleguide components.editable.multiline\n*/\n.pt-editable-text {\n  display: inline-block;\n  position: relative;\n  cursor: text;\n  max-width: 100%;\n  vertical-align: top;\n  white-space: nowrap; }\n  .pt-editable-text::before {\n    position: absolute;\n    top: -3px;\n    right: -3px;\n    bottom: -3px;\n    left: -3px;\n    border-radius: 3px;\n    content: \"\";\n    transition: background-color 100ms cubic-bezier(0.4, 1, 0.75, 0.9), box-shadow 100ms cubic-bezier(0.4, 1, 0.75, 0.9); }\n  .pt-editable-text:hover::before {\n    box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.15); }\n  .pt-editable-text.pt-editable-editing::before {\n    box-shadow: 0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2);\n    background-color: #ffffff; }\n  .pt-editable-text.pt-disabled::before {\n    box-shadow: none; }\n  .pt-editable-text.pt-intent-primary .pt-editable-input,\n  .pt-editable-text.pt-intent-primary .pt-editable-content {\n    color: #137cbd; }\n  .pt-editable-text.pt-intent-primary:hover::before {\n    box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px rgba(19, 124, 189, 0.4); }\n  .pt-editable-text.pt-intent-primary.pt-editable-editing::before {\n    box-shadow: 0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n  .pt-editable-text.pt-intent-success .pt-editable-input,\n  .pt-editable-text.pt-intent-success .pt-editable-content {\n    color: #0f9960; }\n  .pt-editable-text.pt-intent-success:hover::before {\n    box-shadow: 0 0 0 0 rgba(15, 153, 96, 0), 0 0 0 0 rgba(15, 153, 96, 0), inset 0 0 0 1px rgba(15, 153, 96, 0.4); }\n  .pt-editable-text.pt-intent-success.pt-editable-editing::before {\n    box-shadow: 0 0 0 1px #0f9960, 0 0 0 3px rgba(15, 153, 96, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n  .pt-editable-text.pt-intent-warning .pt-editable-input,\n  .pt-editable-text.pt-intent-warning .pt-editable-content {\n    color: #d9822b; }\n  .pt-editable-text.pt-intent-warning:hover::before {\n    box-shadow: 0 0 0 0 rgba(217, 130, 43, 0), 0 0 0 0 rgba(217, 130, 43, 0), inset 0 0 0 1px rgba(217, 130, 43, 0.4); }\n  .pt-editable-text.pt-intent-warning.pt-editable-editing::before {\n    box-shadow: 0 0 0 1px #d9822b, 0 0 0 3px rgba(217, 130, 43, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n  .pt-editable-text.pt-intent-danger .pt-editable-input,\n  .pt-editable-text.pt-intent-danger .pt-editable-content {\n    color: #db3737; }\n  .pt-editable-text.pt-intent-danger:hover::before {\n    box-shadow: 0 0 0 0 rgba(219, 55, 55, 0), 0 0 0 0 rgba(219, 55, 55, 0), inset 0 0 0 1px rgba(219, 55, 55, 0.4); }\n  .pt-editable-text.pt-intent-danger.pt-editable-editing::before {\n    box-shadow: 0 0 0 1px #db3737, 0 0 0 3px rgba(219, 55, 55, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n  .pt-dark .pt-editable-text:hover::before {\n    box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px rgba(255, 255, 255, 0.15); }\n  .pt-dark .pt-editable-text.pt-editable-editing::before {\n    box-shadow: 0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4);\n    background-color: rgba(16, 22, 26, 0.3); }\n  .pt-dark .pt-editable-text.pt-disabled::before {\n    box-shadow: none; }\n  .pt-dark .pt-editable-text.pt-intent-primary .pt-editable-content {\n    color: #2b95d6; }\n  .pt-dark .pt-editable-text.pt-intent-primary:hover::before {\n    box-shadow: 0 0 0 0 rgba(43, 149, 214, 0), 0 0 0 0 rgba(43, 149, 214, 0), inset 0 0 0 1px rgba(43, 149, 214, 0.4); }\n  .pt-dark .pt-editable-text.pt-intent-primary.pt-editable-editing::before {\n    box-shadow: 0 0 0 1px #2b95d6, 0 0 0 3px rgba(43, 149, 214, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); }\n  .pt-dark .pt-editable-text.pt-intent-success .pt-editable-content {\n    color: #15b371; }\n  .pt-dark .pt-editable-text.pt-intent-success:hover::before {\n    box-shadow: 0 0 0 0 rgba(21, 179, 113, 0), 0 0 0 0 rgba(21, 179, 113, 0), inset 0 0 0 1px rgba(21, 179, 113, 0.4); }\n  .pt-dark .pt-editable-text.pt-intent-success.pt-editable-editing::before {\n    box-shadow: 0 0 0 1px #15b371, 0 0 0 3px rgba(21, 179, 113, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); }\n  .pt-dark .pt-editable-text.pt-intent-warning .pt-editable-content {\n    color: #f29d49; }\n  .pt-dark .pt-editable-text.pt-intent-warning:hover::before {\n    box-shadow: 0 0 0 0 rgba(242, 157, 73, 0), 0 0 0 0 rgba(242, 157, 73, 0), inset 0 0 0 1px rgba(242, 157, 73, 0.4); }\n  .pt-dark .pt-editable-text.pt-intent-warning.pt-editable-editing::before {\n    box-shadow: 0 0 0 1px #f29d49, 0 0 0 3px rgba(242, 157, 73, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); }\n  .pt-dark .pt-editable-text.pt-intent-danger .pt-editable-content {\n    color: #f55656; }\n  .pt-dark .pt-editable-text.pt-intent-danger:hover::before {\n    box-shadow: 0 0 0 0 rgba(245, 86, 86, 0), 0 0 0 0 rgba(245, 86, 86, 0), inset 0 0 0 1px rgba(245, 86, 86, 0.4); }\n  .pt-dark .pt-editable-text.pt-intent-danger.pt-editable-editing::before {\n    box-shadow: 0 0 0 1px #f55656, 0 0 0 3px rgba(245, 86, 86, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); }\n\n.pt-editable-input,\n.pt-editable-content {\n  display: inherit;\n  position: relative;\n  min-width: inherit;\n  max-width: inherit;\n  vertical-align: top;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  font: inherit;\n  resize: none; }\n\n.pt-editable-input {\n  border: none;\n  box-shadow: none;\n  background: none;\n  width: 100%;\n  padding: 0;\n  white-space: pre-wrap; }\n  .pt-editable-input:focus {\n    outline: none; }\n  .pt-editable-input::-ms-clear {\n    display: none; }\n\n.pt-editable-content {\n  overflow: hidden;\n  padding-right: 2px;\n  text-overflow: ellipsis;\n  white-space: pre; }\n  .pt-editable-editing > .pt-editable-content {\n    position: absolute;\n    left: 0;\n    visibility: hidden; }\n  .pt-editable-placeholder > .pt-editable-content {\n    color: rgba(92, 112, 128, 0.5); }\n    .pt-dark .pt-editable-placeholder > .pt-editable-content {\n      color: rgba(191, 204, 214, 0.5); }\n\n.pt-editable-text.pt-multiline {\n  display: block; }\n  .pt-editable-text.pt-multiline .pt-editable-content {\n    overflow: auto;\n    white-space: pre-wrap; }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n.pt-select select {\n  display: inline-block;\n  border: 1px solid;\n  border-radius: 3px;\n  cursor: pointer;\n  padding: 0 10px;\n  vertical-align: middle;\n  font-size: 14px;\n  background: #f5f8fa;\n  background: -webkit-linear-gradient( top , #ffffff, rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #f5f8fa;\n  background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #f5f8fa;\n  border-color: rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.17) rgba(16, 22, 26, 0.1);\n  box-shadow: 0 1px 1px rgba(16, 22, 26, 0.1);\n  background-clip: padding-box;\n  color: #182026;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border-radius: 3px;\n  height: 30px;\n  padding: 0 25px 0 10px; }\n  .pt-select select:hover {\n    background: #ebf1f5;\n    background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #ebf1f5;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #ebf1f5;\n    border-color: rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.27) rgba(16, 22, 26, 0.2);\n    box-shadow: 0 1px 1px rgba(16, 22, 26, 0.1);\n    background-clip: padding-box; }\n  .pt-select select:active {\n    border-color: rgba(16, 22, 26, 0.35) rgba(16, 22, 26, 0.25) rgba(16, 22, 26, 0.25) rgba(16, 22, 26, 0.25);\n    box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.1);\n    background-color: #ced9e0;\n    background-image: none; }\n  .pt-select select:disabled {\n    outline: none;\n    border-color: transparent;\n    box-shadow: none;\n    background-clip: border-box;\n    background-color: rgba(206, 217, 224, 0.5);\n    background-image: none;\n    cursor: not-allowed;\n    color: rgba(92, 112, 128, 0.5); }\n\n.pt-select.pt-large select {\n  height: 40px;\n  padding-right: 35px;\n  font-size: 16px; }\n\n.pt-dark .pt-select select {\n  background: rgba(255, 255, 255, 0.1);\n  background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06)) left no-repeat;\n  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06)) left no-repeat;\n  border-color: rgba(16, 22, 26, 0.6);\n  box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2);\n  background-clip: padding-box;\n  color: #f5f8fa; }\n  .pt-dark .pt-select select:hover, .pt-dark .pt-select select:active {\n    color: #f5f8fa; }\n  .pt-dark .pt-select select:hover {\n    background: rgba(255, 255, 255, 0.1);\n    background: -webkit-linear-gradient( top , rgba(16, 22, 26, 0.1), rgba(16, 22, 26, 0.2)) left no-repeat, center no-repeat rgba(255, 255, 255, 0.1);\n    background: linear-gradient(to bottom, rgba(16, 22, 26, 0.1), rgba(16, 22, 26, 0.2)) left no-repeat, center no-repeat rgba(255, 255, 255, 0.1);\n    border-color: rgba(16, 22, 26, 0.8);\n    box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2);\n    background-clip: padding-box; }\n  .pt-dark .pt-select select:active {\n    box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.2);\n    background-color: rgba(16, 22, 26, 0.1);\n    background-image: none; }\n  .pt-dark .pt-select select:disabled {\n    border-color: rgba(206, 217, 224, 0.1);\n    box-shadow: none;\n    background-color: rgba(206, 217, 224, 0.1);\n    background-image: none;\n    color: rgba(191, 204, 214, 0.5); }\n  .pt-dark .pt-select select .pt-button-spinner .pt-spinner-head {\n    background: rgba(16, 22, 26, 0.5);\n    stroke: #8a9ba8; }\n\n.pt-select select:disabled {\n  box-shadow: none;\n  background-color: rgba(206, 217, 224, 0.5);\n  cursor: not-allowed;\n  color: rgba(92, 112, 128, 0.5); }\n\n.pt-select::after {\n  line-height: 1;\n  font-family: \"Icons16\", sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  font-style: normal;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  position: absolute;\n  top: 0;\n  right: 7px;\n  line-height: 30px;\n  color: #5c7080;\n  content: \"⌄\";\n  pointer-events: none; }\n  .pt-disabled.pt-select::after {\n    color: rgba(92, 112, 128, 0.5); }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nControl groups\n\nA `.pt-control-group` renders several distinct controls as one unit, squaring the borders between\nthem. It supports any number of `.pt-button`, `.pt-input`, `.pt-input-group`, and `.pt-select`\nelements as direct children.\n\nNote that `.pt-control-group` does not cascade any modifiers to its children. For example, each\nchild must be marked individually as `.pt-large` for uniform large appearance.\n\n<div class=\"pt-callout pt-intent-success pt-icon-comparison\">\n  <h5>Control group vs. input group</h5>\n  <p>Both components group multiple elements into a single unit, but their usage patterns are\n  different.</p>\n  <p>Think of `.pt-control-group` as a parent with multiple children, each of them a\n  \"control.\"</p>\n  <p>Conversely, a `.pt-input-group` is a single control, and should function like so. A\n  button inside of an input group should only affect that input; if its reach is further, then it\n  should be promoted to live in a control group.</p>\n</div>\n\nMarkup:\n<div class=\"pt-control-group-example\">\n  <div class=\"pt-control-group\">\n    <button class=\"pt-button pt-icon-filter\">Filter</button>\n    <input type=\"text\" class=\"pt-input\" placeholder=\"Find filters...\" />\n  </div>\n  <div class=\"pt-control-group\">\n    <div class=\"pt-select\">\n      <select>\n        <option selected>Filter...</option>\n        <option value=\"1\">Issues</option>\n        <option value=\"2\">Requests</option>\n        <option value=\"3\">Features</option>\n        <option value=\"4\">Won't fixes</option>\n      </select>\n    </div>\n    <div class=\"pt-input-group\">\n      <span class=\"pt-icon pt-icon-search\"></span>\n      <input type=\"text\" class=\"pt-input\" value=\"from:ggray to:allorca\" />\n    </div>\n  </div>\n  <div class=\"pt-control-group\">\n    <div class=\"pt-input-group\">\n      <span class=\"pt-icon pt-icon-people\"></span>\n      <input type=\"text\" class=\"pt-input\" placeholder=\"Find collaborators...\" style=\"padding-right:94px\" />\n      <div class=\"pt-input-action\">\n        <button class=\"pt-button pt-minimal pt-intent-primary\">\n          can view<span class=\"pt-icon-standard pt-icon-caret-down pt-align-right\"></span>\n        </button>\n      </div>\n    </div>\n    <button class=\"pt-button pt-intent-primary\">Add</button>\n  </div>\n</div>\n\nWeight: 4\n\nStyleguide components.forms.control-group\n*/\n.pt-control-group {\n  display: flex;\n  align-items: flex-start;\n  /*\n  Vertical control groups\n\n  Add the class `pt-vertical` to create a vertical control group. Controls in a vertical group\n  will all have the same width as the widest control.\n\n  Markup:\n  <div class=\"pt-control-group pt-vertical\" style=\"width: 300px;\">\n    <div class=\"pt-input-group pt-large\">\n      <span class=\"pt-icon pt-icon-person\"></span>\n      <input type=\"text\" class=\"pt-input\" placeholder=\"Username\" />\n    </div>\n    <div class=\"pt-input-group pt-large\">\n      <span class=\"pt-icon pt-icon-lock\"></span>\n      <input type=\"password\" class=\"pt-input\" placeholder=\"Password\" />\n    </div>\n    <button class=\"pt-button pt-large pt-intent-primary\">Login</button>\n  </div>\n\n  Styleguide components.forms.control-group.vertical\n  */ }\n  .pt-control-group > * {\n    flex: 0 0 auto; }\n  .pt-control-group .pt-button,\n  .pt-control-group .pt-input,\n  .pt-control-group .pt-select select {\n    border-radius: inherit; }\n    .pt-control-group .pt-button:focus,\n    .pt-control-group .pt-input:focus,\n    .pt-control-group .pt-select select:focus {\n      z-index: 2; }\n  .pt-control-group:not(.pt-vertical) > * {\n    margin-right: -1px; }\n  .pt-control-group:not(.pt-vertical) .pt-button:not(:last-child):not(:hover):not(:active):not(.pt-active):not([class*=\"pt-intent-\"]),\n  .pt-control-group:not(.pt-vertical) .pt-input:not(:last-child):not(:hover):not(:active):not(.pt-active):not([class*=\"pt-intent-\"]) {\n    border-right-color: transparent; }\n  .pt-control-group:not(.pt-vertical) .pt-select:not(:last-child):not(:hover):not(:active):not(.pt-active):not([class*=\"pt-intent-\"]) select {\n    border-right-color: transparent; }\n  .pt-control-group > :first-child {\n    border-radius: 3px 0 0 3px; }\n  .pt-control-group > :last-child {\n    margin-right: 0;\n    border-radius: 0 3px 3px 0; }\n  .pt-control-group .pt-button,\n  .pt-control-group .pt-select {\n    z-index: 1; }\n  .pt-control-group .pt-input:focus {\n    position: relative;\n    border-radius: 3px; }\n  .pt-control-group .pt-button:focus,\n  .pt-control-group select:focus {\n    position: relative; }\n  .pt-control-group .pt-input-group > .pt-icon,\n  .pt-control-group .pt-input-group > .pt-button,\n  .pt-control-group .pt-input-group > .pt-input-action,\n  .pt-control-group .pt-select::after {\n    z-index: 3; }\n  .pt-control-group .pt-input-group .pt-button {\n    border-radius: 3px; }\n  .pt-control-group.pt-vertical {\n    flex-direction: column; }\n    .pt-control-group.pt-vertical > * {\n      margin-top: -1px;\n      width: 100%; }\n    .pt-control-group.pt-vertical .pt-button:not(:last-child):not(:hover):not(:active):not(.pt-active):not([class*=\"pt-intent-\"]),\n    .pt-control-group.pt-vertical .pt-input:not(:last-child):not(:hover):not(:active):not(.pt-active):not([class*=\"pt-intent-\"]) {\n      border-bottom-color: transparent; }\n    .pt-control-group.pt-vertical .pt-select:not(:last-child):not(:hover):not(:active):not(.pt-active):not([class*=\"pt-intent-\"]) select {\n      border-bottom-color: transparent; }\n    .pt-control-group.pt-vertical > :first-child {\n      margin-top: 0;\n      border-radius: 3px 3px 0 0; }\n    .pt-control-group.pt-vertical > :last-child {\n      border-radius: 0 0 3px 3px; }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n.pt-control {\n  display: block;\n  position: relative;\n  margin-bottom: 10px;\n  cursor: pointer;\n  min-height: 20px;\n  padding-left: 26px;\n  text-transform: none;\n  line-height: 16px;\n  /*\n  Checkboxes\n\n  Blueprint's custom checkboxes use an extra `.pt-control-indicator` element after the `<input>` to\n  achieve their custom styling. You should then wrap the whole thing in a `<label>` with the classes\n  `.pt-control.pt-checkbox`.\n\n  Note that attribute modifiers (`:checked`, `:disabled`) are applied on the internal `<input>`\n  element. Further note that `:indeterminate` can only be set via JavaScript (the `Checkbox` React\n  component supports it handily with a prop).\n\n  Weight: 2\n\n  Styleguide components.forms.checkbox\n  */\n  /*\n  CSS API\n\n  Markup:\n  <label class=\"pt-control pt-checkbox {{.modifier}}\">\n    <input type=\"checkbox\" {{:modifier}} />\n    <span class=\"pt-control-indicator\"></span>\n    Checkbox\n  </label>\n\n  :checked  - Checked\n  :disabled - Disabled. Also add <code>.pt-disabled</code> to <code>.pt-control</code> to change text color (not shown below).\n  :indeterminate - Indeterminate. Note that this style can only be achieved via JavaScript\n                   <code>input.indeterminate = true</code>.\n  .pt-align-right - Right-aligned indicator\n  .pt-large - Large\n\n  Styleguide components.forms.checkbox.css\n  */\n  /*\n  JavaScript API\n\n  The `Checkbox` component is available in the __@blueprintjs/core__ package.\n  Make sure to review the [general usage docs for JS components](#components.usage).\n\n  ```\n  // simple usage for string labels\n  <Checkbox checked={this.state.isEnabled} label=\"Enabled\" onChange={this.handleEnabledChange} />\n\n  // advanced usage for JSX content\n  <Checkbox checked={this.state.isEnabled} onChange={this.handleEnabledChange}>\n      <span className=\"pt-icon-standard pt-icon-user\" />\n      Gilad Gray\n  </Checkbox>\n  ```\n\n  Note that this component supports the full range of props available on HTML `input` elements.\n  Use `checked` instead of `value` in controlled mode to avoid typings issues.\n  The most common options are detailed below.\n\n  @interface ICheckboxProps\n\n  Styleguide: components.forms.checkbox.js\n  */\n  /*\n  Radios\n\n  Blueprint's custom radio buttons use an extra `.pt-control-indicator` element after the `<input>`\n  to achieve their custom styling. You should then wrap the whole thing in a `<label>` with the\n  classes `.pt-control.pt-radio`.\n\n  Note that attribute modifiers (`:checked`, `:disabled`) are applied on the internal `<input>`\n  element.\n\n  Weight: 2\n\n  Styleguide components.forms.radio\n  */\n  /*\n  CSS API\n\n  Markup:\n  <label class=\"pt-control pt-radio {{.modifier}}\">\n    <input type=\"radio\" name=\"docs-radio-regular\" {{:modifier}} />\n    <span class=\"pt-control-indicator\"></span>\n    Radio\n  </label>\n\n  :checked  - Selected\n  :disabled - Disabled. Also add <code>.pt-disabled</code> to <code>.pt-control</code> to change text color (not shown below).\n  .pt-align-right - Right-aligned indicator\n  .pt-large - Large\n\n  Styleguide components.forms.radio.css\n  */\n  /*\n  JavaScript API\n\n  The `Radio` and `RadioGroup` components are available in the __@blueprintjs/core__ package. Make\n  sure to review the [general usage docs for JS components](#components.usage).\n\n  Typically, radio buttons are used in a group to choose one option from several, similar to how a\n  `<select>` tag contains several `<option>` tags. As such, you can use the `RadioGroup` component\n  with a series of `Radio` children. `RadioGroup` is responsible for managing state and interaction.\n\n  ```\n  <RadioGroup\n      label=\"Meal Choice\"\n      onChange={this.handleMealChange}\n      selectedValue={this.state.mealType}\n  >\n      <Radio label=\"Soup\" value=\"one\" />\n      <Radio label=\"Salad\" value=\"two\" />\n      <Radio label=\"Sandwich\" value=\"three\" />\n  </RadioGroup>\n  ```\n\n  Note that this component supports the full range of props available on HTML `input` elements.\n  The most common options are detailed below.\n\n  @interface IRadioProps\n\n  Styleguide components.forms.radio.js\n  */\n  /*\n  Switches\n\n  A switch is simply an alternate appearance for a [checkbox](#components.forms.checkbox) that\n  simulates on/off instead of checked/unchecked.\n\n  Weight: 2\n\n  Styleguide components.forms.switch\n  */\n  /*\n  CSS API\n\n  Markup:\n  <label class=\"pt-control pt-switch {{.modifier}}\">\n    <input type=\"checkbox\" {{:modifier}} />\n    <span class=\"pt-control-indicator\"></span>\n    Switch\n  </label>\n\n  :checked  - Selected\n  :disabled - Disabled. Also add <code>.pt-disabled</code> to <code>.pt-control</code> to change text color (not shown below).\n  .pt-align-right - Right-aligned indicator\n  .pt-large - Large\n\n  Styleguide components.forms.switch.css\n  */\n  /*\n  JavaScript API\n\n  The `Switch` component is available in the __@blueprintjs/core__ package.\n  Make sure to review the [general usage docs for JS components](#components.usage).\n\n  ```\n  <Switch checked={this.state.isPublic} label=\"Public\" onChange={this.handlePublicChange} />\n  ```\n\n  Note that this component supports the full range of props available on HTML `input` elements.\n  The most common options are detailed below.\n\n  @interface ISwitchProps\n\n  Styleguide components.forms.switch.js\n  */\n  /*\n  Inline controls\n\n  Checkboxes, radios, and switches all support the `.pt-inline` modifier to make them `display:\n  inline-block`. Note that this modifier functions slightly differently on these elements than it\n  does on `.pt-label`. On `.pt-label`, it only adjusts the layout of text _within_ the label and not\n  the display of the label itself.\n\n  Here's an example of how you might group together some controls and label them.\n\n  Markup:\n  <label class=\"pt-label\">A group of related options</label>\n  <label class=\"pt-control pt-checkbox pt-inline\">\n    <input type=\"checkbox\" />\n    <span class=\"pt-control-indicator\"></span>\n    First\n  </label>\n  <label class=\"pt-control pt-checkbox pt-inline\">\n    <input type=\"checkbox\" />\n    <span class=\"pt-control-indicator\"></span>\n    Second\n  </label>\n  <label class=\"pt-control pt-checkbox pt-inline\">\n    <input type=\"checkbox\" />\n    <span class=\"pt-control-indicator\"></span>\n    Third\n  </label>\n\n  Weight: 10\n\n  Styleguide components.forms.checkbox.inline\n  */ }\n  .pt-control.pt-disabled {\n    cursor: not-allowed;\n    color: rgba(92, 112, 128, 0.5); }\n  .pt-control.pt-inline {\n    display: inline-block;\n    margin-right: 20px; }\n  .pt-control input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    z-index: -1; }\n  .pt-control .pt-control-indicator {\n    line-height: 1;\n    font-family: \"Icons16\", sans-serif;\n    font-size: 16px;\n    font-weight: 400;\n    font-style: normal;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n    background: #f5f8fa;\n    background: -webkit-linear-gradient( top , #ffffff, rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #f5f8fa;\n    background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #f5f8fa;\n    position: absolute;\n    top: 0;\n    left: 0;\n    margin: 0;\n    border: 1px solid;\n    border-color: rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.17) rgba(16, 22, 26, 0.1);\n    box-shadow: 0 1px 1px rgba(16, 22, 26, 0.1);\n    background-clip: padding-box;\n    cursor: pointer;\n    width: 16px;\n    height: 16px;\n    line-height: 16px;\n    user-select: none; }\n    .pt-control .pt-control-indicator::before {\n      position: relative;\n      top: -1px;\n      left: -1px;\n      content: \"\"; }\n  .pt-control input:checked ~ .pt-control-indicator, .pt-control.pt-checkbox input:indeterminate ~ .pt-control-indicator {\n    background: #137cbd;\n    background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #137cbd;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #137cbd;\n    border-color: rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.3) rgba(16, 22, 26, 0.1);\n    box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2);\n    background-clip: border-box;\n    color: #ffffff; }\n  .pt-control:hover .pt-control-indicator {\n    background: #ebf1f5;\n    background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #ebf1f5;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #ebf1f5;\n    border-color: rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.27) rgba(16, 22, 26, 0.2);\n    background-clip: padding-box; }\n  .pt-control:hover input:checked ~ .pt-control-indicator, .pt-control:hover .pt-control.pt-checkbox input:indeterminate ~ .pt-control-indicator, .pt-control.pt-checkbox .pt-control:hover input:indeterminate ~ .pt-control-indicator, .pt-control.pt-checkbox:hover input:indeterminate ~ .pt-control-indicator {\n    background: #106ba3;\n    background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #106ba3;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #106ba3;\n    border-color: rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.3) rgba(16, 22, 26, 0.1);\n    box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2); }\n  .pt-control input:not(:disabled):active ~ .pt-control-indicator {\n    border-color: rgba(16, 22, 26, 0.35) rgba(16, 22, 26, 0.25) rgba(16, 22, 26, 0.25) rgba(16, 22, 26, 0.25);\n    box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.1);\n    background: #ced9e0;\n    background-clip: padding-box; }\n  .pt-control input:not(:disabled):active:checked ~ .pt-control-indicator, .pt-control.pt-checkbox input:not(:disabled):active:indeterminate ~ .pt-control-indicator {\n    border-color: rgba(16, 22, 26, 0.6) rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.2);\n    box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.2);\n    background: #0e5a8a; }\n  .pt-control input:focus ~ .pt-control-indicator {\n    outline: rgba(19, 124, 189, 0.5) auto 2px;\n    outline-offset: 2px;\n    -moz-outline-radius: 6px; }\n  .pt-control input:disabled ~ .pt-control-indicator {\n    border-color: transparent;\n    box-shadow: none;\n    background: rgba(206, 217, 224, 0.5);\n    cursor: not-allowed; }\n  .pt-control input:disabled:checked ~ .pt-control-indicator, .pt-control.pt-checkbox input:disabled:indeterminate ~ .pt-control-indicator {\n    border-color: transparent;\n    box-shadow: none;\n    background: rgba(19, 124, 189, 0.5); }\n  .pt-control.pt-checkbox .pt-control-indicator {\n    border-radius: 3px;\n    font-size: 16px; }\n  .pt-control.pt-checkbox input:checked ~ .pt-control-indicator::before, .pt-control.pt-checkbox input:indeterminate ~ .pt-control-indicator::before {\n    content: \"\"; }\n  .pt-control.pt-checkbox input:indeterminate ~ .pt-control-indicator::before {\n    content: \"\"; }\n  .pt-control.pt-radio .pt-control-indicator {\n    border-radius: 50%;\n    font-size: 6px; }\n  .pt-control.pt-radio input:checked ~ .pt-control-indicator::before, .pt-control.pt-radio .pt-control.pt-checkbox input:indeterminate ~ .pt-control-indicator::before, .pt-control.pt-checkbox .pt-control.pt-radio input:indeterminate ~ .pt-control-indicator::before {\n    display: inline-block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    border-radius: 50%;\n    box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2);\n    background: #ffffff;\n    width: 1em;\n    height: 1em;\n    content: \"\"; }\n  .pt-control.pt-radio input:checked:disabled ~ .pt-control-indicator::before, .pt-control.pt-radio .pt-control.pt-checkbox input:disabled:indeterminate ~ .pt-control-indicator::before, .pt-control.pt-checkbox .pt-control.pt-radio input:disabled:indeterminate ~ .pt-control-indicator::before {\n    box-shadow: none; }\n  .pt-control.pt-radio input:focus ~ .pt-control-indicator {\n    -moz-outline-radius: 16px; }\n  .pt-control.pt-switch {\n    padding-left: 38px; }\n    .pt-control.pt-switch .pt-control-indicator {\n      border: none;\n      border-radius: 28px;\n      box-shadow: none;\n      background: rgba(167, 182, 194, 0.5);\n      width: 28px;\n      height: 16px;\n      transition: background 100ms cubic-bezier(0.4, 1, 0.75, 0.9); }\n      .pt-control.pt-switch .pt-control-indicator::before {\n        display: block;\n        top: 2px;\n        left: 2px;\n        border-radius: 16px;\n        box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 1px 1px rgba(16, 22, 26, 0.1);\n        background: #ffffff;\n        background-clip: padding-box;\n        width: 12px;\n        height: 12px;\n        content: \"\";\n        transition: left 100ms cubic-bezier(0.4, 1, 0.75, 0.9); }\n    .pt-control.pt-switch input:checked ~ .pt-control-indicator, .pt-control.pt-switch .pt-control.pt-checkbox input:indeterminate ~ .pt-control-indicator, .pt-control.pt-checkbox .pt-control.pt-switch input:indeterminate ~ .pt-control-indicator {\n      box-shadow: none;\n      background-color: #137cbd;\n      width: 28px;\n      height: 16px; }\n      .pt-control.pt-switch input:checked ~ .pt-control-indicator::before, .pt-control.pt-switch .pt-control.pt-checkbox input:indeterminate ~ .pt-control-indicator::before, .pt-control.pt-checkbox .pt-control.pt-switch input:indeterminate ~ .pt-control-indicator::before {\n        left: 14px;\n        box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-control.pt-switch:hover .pt-control-indicator {\n      background-color: rgba(115, 134, 148, 0.5); }\n    .pt-control.pt-switch:hover input:checked ~ .pt-control-indicator, .pt-control.pt-switch:hover .pt-control.pt-checkbox input:indeterminate ~ .pt-control-indicator, .pt-control.pt-checkbox .pt-control.pt-switch:hover input:indeterminate ~ .pt-control-indicator {\n      background-color: #106ba3; }\n    .pt-control.pt-switch input:not(:disabled):active ~ .pt-control-indicator {\n      box-shadow: none;\n      background-color: rgba(92, 112, 128, 0.5); }\n    .pt-control.pt-switch input:not(:disabled):active:checked ~ .pt-control-indicator, .pt-control.pt-switch .pt-control.pt-checkbox input:not(:disabled):active:indeterminate ~ .pt-control-indicator, .pt-control.pt-checkbox .pt-control.pt-switch input:not(:disabled):active:indeterminate ~ .pt-control-indicator {\n      background-color: #0e5a8a; }\n    .pt-control.pt-switch input:disabled ~ .pt-control-indicator {\n      background-color: rgba(206, 217, 224, 0.5); }\n      .pt-control.pt-switch input:disabled ~ .pt-control-indicator::before {\n        box-shadow: none;\n        background-color: rgba(255, 255, 255, 0.8); }\n    .pt-control.pt-switch input:disabled:checked ~ .pt-control-indicator, .pt-control.pt-switch .pt-control.pt-checkbox input:disabled:indeterminate ~ .pt-control-indicator, .pt-control.pt-checkbox .pt-control.pt-switch input:disabled:indeterminate ~ .pt-control-indicator {\n      background-color: rgba(19, 124, 189, 0.5); }\n  .pt-control.pt-align-right {\n    padding-right: 26px;\n    padding-left: 0; }\n    .pt-control.pt-align-right .pt-control-indicator {\n      right: 0;\n      left: auto; }\n  .pt-control.pt-large {\n    padding-left: 30px;\n    line-height: 20px;\n    font-size: 16px; }\n    .pt-control.pt-large .pt-control-indicator {\n      width: 20px;\n      height: 20px;\n      line-height: 20px;\n      font-family: \"Icons20\";\n      font-size: 20px; }\n    .pt-control.pt-large.pt-checkbox input:checked ~ .pt-control-indicator::before, .pt-control.pt-large.pt-checkbox input:indeterminate ~ .pt-control-indicator::before, .pt-control.pt-large.pt-checkbox\n    .pt-control.pt-checkbox:hover input:indeterminate ~ .pt-control-indicator::before {\n      top: 0; }\n    .pt-control.pt-large.pt-radio .pt-control-indicator {\n      font-size: 8px; }\n    .pt-control.pt-large.pt-switch {\n      padding-left: 42px; }\n      .pt-control.pt-large.pt-switch .pt-control-indicator {\n        width: 32px;\n        height: 20px; }\n        .pt-control.pt-large.pt-switch .pt-control-indicator::before {\n          width: 16px;\n          height: 16px; }\n      .pt-control.pt-large.pt-switch input:checked ~ .pt-control-indicator, .pt-control.pt-large.pt-switch .pt-control.pt-checkbox input:indeterminate ~ .pt-control-indicator, .pt-control.pt-checkbox .pt-control.pt-large.pt-switch input:indeterminate ~ .pt-control-indicator {\n        width: 32px;\n        height: 20px; }\n        .pt-control.pt-large.pt-switch input:checked ~ .pt-control-indicator::before, .pt-control.pt-large.pt-switch .pt-control.pt-checkbox input:indeterminate ~ .pt-control-indicator::before, .pt-control.pt-checkbox .pt-control.pt-large.pt-switch input:indeterminate ~ .pt-control-indicator::before {\n          left: 14px; }\n  .pt-dark .pt-control {\n    color: #f5f8fa; }\n    .pt-dark .pt-control .pt-control-indicator {\n      background: rgba(255, 255, 255, 0.1);\n      background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06)) left no-repeat;\n      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06)) left no-repeat;\n      border-color: rgba(16, 22, 26, 0.6);\n      box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-dark .pt-control input:checked ~ .pt-control-indicator, .pt-dark .pt-control.pt-checkbox input:indeterminate ~ .pt-control-indicator {\n      border-color: rgba(16, 22, 26, 0.6);\n      box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2);\n      background-clip: padding-box; }\n    .pt-dark .pt-control:hover .pt-control-indicator {\n      background: rgba(255, 255, 255, 0.1);\n      background: -webkit-linear-gradient( top , rgba(16, 22, 26, 0.1), rgba(16, 22, 26, 0.2)) left no-repeat, center no-repeat rgba(255, 255, 255, 0.1);\n      background: linear-gradient(to bottom, rgba(16, 22, 26, 0.1), rgba(16, 22, 26, 0.2)) left no-repeat, center no-repeat rgba(255, 255, 255, 0.1);\n      border-color: rgba(16, 22, 26, 0.8); }\n    .pt-dark .pt-control input:not(:disabled):active ~ .pt-control-indicator {\n      border-color: rgba(16, 22, 26, 0.8);\n      box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.2);\n      background: rgba(16, 22, 26, 0.1); }\n    .pt-dark .pt-control input:not(:disabled):active:checked ~ .pt-control-indicator, .pt-dark .pt-control.pt-checkbox input:not(:disabled):active:indeterminate ~ .pt-control-indicator {\n      border-color: rgba(16, 22, 26, 0.6);\n      box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.2);\n      background-clip: padding-box;\n      background-color: #0e5a8a; }\n    .pt-dark .pt-control input:disabled ~ .pt-control-indicator {\n      border-color: transparent;\n      box-shadow: none;\n      background: rgba(206, 217, 224, 0.1);\n      cursor: not-allowed; }\n    .pt-dark .pt-control input:disabled:checked ~ .pt-control-indicator, .pt-dark .pt-control.pt-checkbox input:disabled:indeterminate ~ .pt-control-indicator {\n      border-color: transparent;\n      box-shadow: none;\n      background: rgba(14, 90, 138, 0.5); }\n    .pt-dark .pt-control.pt-checkbox input:checked:disabled ~ .pt-control-indicator::before, .pt-dark .pt-control.pt-checkbox input:disabled:indeterminate ~ .pt-control-indicator::before {\n      color: rgba(191, 204, 214, 0.5); }\n    .pt-dark .pt-control.pt-radio input:checked:disabled ~ .pt-control-indicator::before, .pt-dark .pt-control.pt-radio .pt-control.pt-checkbox input:disabled:indeterminate ~ .pt-control-indicator::before, .pt-control.pt-checkbox .pt-dark .pt-control.pt-radio input:disabled:indeterminate ~ .pt-control-indicator::before {\n      background: rgba(191, 204, 214, 0.5); }\n    .pt-dark .pt-control.pt-switch .pt-control-indicator {\n      box-shadow: none;\n      background: rgba(16, 22, 26, 0.5); }\n      .pt-dark .pt-control.pt-switch .pt-control-indicator::before {\n        box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 1px 1px rgba(16, 22, 26, 0.2);\n        background: #30404d; }\n    .pt-dark .pt-control.pt-switch input:checked ~ .pt-control-indicator, .pt-dark .pt-control.pt-switch .pt-control.pt-checkbox input:indeterminate ~ .pt-control-indicator, .pt-control.pt-checkbox .pt-dark .pt-control.pt-switch input:indeterminate ~ .pt-control-indicator {\n      box-shadow: none;\n      background-color: #137cbd; }\n      .pt-dark .pt-control.pt-switch input:checked ~ .pt-control-indicator::before, .pt-dark .pt-control.pt-switch .pt-control.pt-checkbox input:indeterminate ~ .pt-control-indicator::before, .pt-control.pt-checkbox .pt-dark .pt-control.pt-switch input:indeterminate ~ .pt-control-indicator::before {\n        box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-dark .pt-control.pt-switch:hover .pt-control-indicator {\n      background: rgba(16, 22, 26, 0.7); }\n    .pt-dark .pt-control.pt-switch:hover input:checked ~ .pt-control-indicator, .pt-dark .pt-control.pt-switch:hover .pt-control.pt-checkbox input:indeterminate ~ .pt-control-indicator, .pt-control.pt-checkbox .pt-dark .pt-control.pt-switch:hover input:indeterminate ~ .pt-control-indicator {\n      background: #2b95d6; }\n    .pt-dark .pt-control.pt-switch input:not(:disabled):active ~ .pt-control-indicator {\n      box-shadow: none;\n      background: rgba(16, 22, 26, 0.9); }\n    .pt-dark .pt-control.pt-switch input:not(:disabled):active:checked ~ .pt-control-indicator, .pt-dark .pt-control.pt-switch .pt-control.pt-checkbox input:not(:disabled):active:indeterminate ~ .pt-control-indicator, .pt-control.pt-checkbox .pt-dark .pt-control.pt-switch input:not(:disabled):active:indeterminate ~ .pt-control-indicator {\n      background: #48aff0; }\n    .pt-dark .pt-control.pt-switch input:disabled ~ .pt-control-indicator {\n      background: rgba(206, 217, 224, 0.1); }\n      .pt-dark .pt-control.pt-switch input:disabled ~ .pt-control-indicator::before {\n        box-shadow: none;\n        background: rgba(16, 22, 26, 0.4); }\n    .pt-dark .pt-control.pt-switch input:disabled:checked ~ .pt-control-indicator, .pt-dark .pt-control.pt-switch .pt-control.pt-checkbox input:disabled:indeterminate ~ .pt-control-indicator, .pt-control.pt-checkbox .pt-dark .pt-control.pt-switch input:disabled:indeterminate ~ .pt-control-indicator {\n      background: rgba(14, 90, 138, 0.5); }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nFile upload\n\nUse the standard `input type=\"file\"` along with a `span` with class `pt-file-upload-input`.\nWrap that all in a `label` with class `pt-file-upload`.\n\n<div class=\"pt-callout pt-intent-warning pt-icon-warning-sign\">\n  <h5>Static file name</h5>\n  File name does not update on file selection. To get this behavior,\n  you must implement it separately in JS.\n</div>\n\nMarkup:\n<label class=\"pt-file-upload\">\n  <input type=\"file\" />\n  <span class=\"pt-file-upload-input\">Choose file...</span>\n</label>\n\nWeight: 10\n\nStyleguide components.forms.fileupload\n*/\n.pt-file-upload {\n  display: inline-block;\n  position: relative;\n  cursor: pointer;\n  height: 30px; }\n  .pt-file-upload input {\n    opacity: 0;\n    margin: 0;\n    min-width: 200px; }\n  .pt-file-upload .pt-file-upload-input {\n    outline: none;\n    border: none;\n    border-radius: 3px;\n    box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2);\n    background: #ffffff;\n    height: 30px;\n    padding: 0 10px;\n    vertical-align: middle;\n    line-height: 30px;\n    color: #182026;\n    font-family: -apple-system, \"BlinkMacSystemFont\", \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Open Sans\", \"Helvetica Neue\", sans-serif, \"Icons16\";\n    font-size: 14px;\n    font-weight: 400;\n    transition: box-shadow 100ms cubic-bezier(0.4, 1, 0.75, 0.9);\n    position: absolute;\n    top: 0;\n    right: 0;\n    left: 0;\n    margin-right: 70px;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    height: 30px;\n    line-height: 30px;\n    color: #5c7080;\n    user-select: none; }\n    .pt-file-upload .pt-file-upload-input::-webkit-input-placeholder {\n      opacity: 1;\n      color: rgba(92, 112, 128, 0.5); }\n    .pt-file-upload .pt-file-upload-input::-moz-placeholder {\n      opacity: 1;\n      color: rgba(92, 112, 128, 0.5); }\n    .pt-file-upload .pt-file-upload-input:-moz-placeholder {\n      opacity: 1;\n      color: rgba(92, 112, 128, 0.5); }\n    .pt-file-upload .pt-file-upload-input:-ms-input-placeholder {\n      opacity: 1;\n      color: rgba(92, 112, 128, 0.5); }\n    .pt-file-upload .pt-file-upload-input:focus {\n      box-shadow: 0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-file-upload .pt-file-upload-input:disabled, .pt-file-upload .pt-file-upload-input.pt-disabled {\n      box-shadow: none;\n      background: rgba(206, 217, 224, 0.5);\n      cursor: not-allowed;\n      color: rgba(92, 112, 128, 0.5);\n      resize: none; }\n    .pt-file-upload .pt-file-upload-input[type=\"search\"], .pt-file-upload .pt-file-upload-input.pt-round {\n      border-radius: 30px;\n      box-sizing: border-box;\n      padding-left: 10px; }\n    .pt-file-upload .pt-file-upload-input[readonly] {\n      box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.15); }\n    .pt-file-upload .pt-file-upload-input::after {\n      background: #f5f8fa;\n      background: -webkit-linear-gradient( top , #ffffff, rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #f5f8fa;\n      background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #f5f8fa;\n      border-color: rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.17) rgba(16, 22, 26, 0.1);\n      box-shadow: 0 1px 1px rgba(16, 22, 26, 0.1);\n      background-clip: padding-box;\n      color: #182026;\n      position: absolute;\n      top: 0;\n      right: 0;\n      left: 100%;\n      margin-left: -1px;\n      border-width: 1px;\n      border-style: solid;\n      border-radius: 3px;\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n      width: 70px;\n      height: 30px;\n      padding: 0 10px;\n      text-align: center;\n      line-height: 28px;\n      content: \"Browse\"; }\n      .pt-file-upload .pt-file-upload-input::after:hover {\n        background: #ebf1f5;\n        background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #ebf1f5;\n        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #ebf1f5;\n        border-color: rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.27) rgba(16, 22, 26, 0.2);\n        box-shadow: 0 1px 1px rgba(16, 22, 26, 0.1);\n        background-clip: padding-box; }\n      .pt-file-upload .pt-file-upload-input::after:active {\n        border-color: rgba(16, 22, 26, 0.35) rgba(16, 22, 26, 0.25) rgba(16, 22, 26, 0.25) rgba(16, 22, 26, 0.25);\n        box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.1);\n        background-color: #ced9e0;\n        background-image: none; }\n      .pt-file-upload .pt-file-upload-input::after:disabled {\n        outline: none;\n        border-color: transparent;\n        box-shadow: none;\n        background-clip: border-box;\n        background-color: rgba(206, 217, 224, 0.5);\n        background-image: none;\n        cursor: not-allowed;\n        color: rgba(92, 112, 128, 0.5); }\n    .pt-file-upload .pt-file-upload-input:not(:hover):not(:active)::after {\n      border-left-color: transparent; }\n    .pt-file-upload .pt-file-upload-input:hover::after {\n      background: #ebf1f5;\n      background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #ebf1f5;\n      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #ebf1f5;\n      border-color: rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.27) rgba(16, 22, 26, 0.2);\n      box-shadow: 0 1px 1px rgba(16, 22, 26, 0.1);\n      background-clip: padding-box; }\n    .pt-file-upload .pt-file-upload-input:active::after {\n      border-color: rgba(16, 22, 26, 0.35) rgba(16, 22, 26, 0.25) rgba(16, 22, 26, 0.25) rgba(16, 22, 26, 0.25);\n      box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.1);\n      background-color: #ced9e0;\n      background-image: none; }\n    .pt-dark .pt-file-upload .pt-file-upload-input {\n      box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4);\n      background: rgba(16, 22, 26, 0.3);\n      color: #f5f8fa;\n      color: #bfccd6; }\n      .pt-dark .pt-file-upload .pt-file-upload-input::-webkit-input-placeholder {\n        color: rgba(191, 204, 214, 0.5); }\n      .pt-dark .pt-file-upload .pt-file-upload-input::-moz-placeholder {\n        color: rgba(191, 204, 214, 0.5); }\n      .pt-dark .pt-file-upload .pt-file-upload-input:-moz-placeholder {\n        color: rgba(191, 204, 214, 0.5); }\n      .pt-dark .pt-file-upload .pt-file-upload-input:-ms-input-placeholder {\n        color: rgba(191, 204, 214, 0.5); }\n      .pt-dark .pt-file-upload .pt-file-upload-input:focus {\n        box-shadow: 0 0 0 1px #137cbd, 0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); }\n      .pt-dark .pt-file-upload .pt-file-upload-input:disabled, .pt-dark .pt-file-upload .pt-file-upload-input.pt-disabled {\n        box-shadow: none;\n        background: rgba(216, 225, 232, 0.1);\n        color: rgba(255, 255, 255, 0.3); }\n      .pt-dark .pt-file-upload .pt-file-upload-input[readonly] {\n        box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4); }\n      .pt-dark .pt-file-upload .pt-file-upload-input::after {\n        background: rgba(255, 255, 255, 0.1);\n        background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06)) left no-repeat;\n        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06)) left no-repeat;\n        border-color: rgba(16, 22, 26, 0.6);\n        box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2);\n        background-clip: padding-box;\n        color: #f5f8fa; }\n        .pt-dark .pt-file-upload .pt-file-upload-input::after:hover, .pt-dark .pt-file-upload .pt-file-upload-input::after:active {\n          color: #f5f8fa; }\n        .pt-dark .pt-file-upload .pt-file-upload-input::after:hover {\n          background: rgba(255, 255, 255, 0.1);\n          background: -webkit-linear-gradient( top , rgba(16, 22, 26, 0.1), rgba(16, 22, 26, 0.2)) left no-repeat, center no-repeat rgba(255, 255, 255, 0.1);\n          background: linear-gradient(to bottom, rgba(16, 22, 26, 0.1), rgba(16, 22, 26, 0.2)) left no-repeat, center no-repeat rgba(255, 255, 255, 0.1);\n          border-color: rgba(16, 22, 26, 0.8);\n          box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2);\n          background-clip: padding-box; }\n        .pt-dark .pt-file-upload .pt-file-upload-input::after:active {\n          box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.2);\n          background-color: rgba(16, 22, 26, 0.1);\n          background-image: none; }\n        .pt-dark .pt-file-upload .pt-file-upload-input::after:disabled {\n          border-color: rgba(206, 217, 224, 0.1);\n          box-shadow: none;\n          background-color: rgba(206, 217, 224, 0.1);\n          background-image: none;\n          color: rgba(191, 204, 214, 0.5); }\n        .pt-dark .pt-file-upload .pt-file-upload-input::after .pt-button-spinner .pt-spinner-head {\n          background: rgba(16, 22, 26, 0.5);\n          stroke: #8a9ba8; }\n      .pt-dark .pt-file-upload .pt-file-upload-input:hover::after {\n        background: rgba(255, 255, 255, 0.1);\n        background: -webkit-linear-gradient( top , rgba(16, 22, 26, 0.1), rgba(16, 22, 26, 0.2)) left no-repeat, center no-repeat rgba(255, 255, 255, 0.1);\n        background: linear-gradient(to bottom, rgba(16, 22, 26, 0.1), rgba(16, 22, 26, 0.2)) left no-repeat, center no-repeat rgba(255, 255, 255, 0.1);\n        border-color: rgba(16, 22, 26, 0.8);\n        box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2);\n        background-clip: padding-box; }\n      .pt-dark .pt-file-upload .pt-file-upload-input:active::after {\n        box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.2);\n        background-color: rgba(16, 22, 26, 0.1);\n        background-image: none; }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nText input groups\n\nAn input group allows you to add icons and buttons _within_ a text input to expand its\nfunctionality. For example, you might use an input group to build a visibility toggle for a password\nfield.\n\nWeight: 3\n\nStyleguide components.forms.input-group\n*/\n/*\nCSS API\n\nYou can place a single `.pt-icon` or `.pt-button.pt-icon-*` on either end of the input. The order is\ndictated by the HTML markup: an element specified before the `input` appears on the left edge, and\nvice versa. You do not need to apply sizing classes to the children&mdash;they inherit the size of\nthe parent input.\n\n<div class=\"pt-callout pt-intent-warning pt-icon-warning-sign\">\n  <h5>Icons only</h5>\n  <p>You cannot use buttons with text in the CSS API for input groups. The padding for text inputs\n  in CSS cannot accomodate buttons whose width varies due to text content. You should use icons on\n  buttons instead.</p>\n\n  Conversely, the [`InputGroup`](#components.forms.input-group.js) React component _does_ support\n  arbitrary content in its right element.\n</div>\n\nMarkup:\n<div class=\"pt-input-group {{.modifier}}\">\n  <span class=\"pt-icon pt-icon-filter\"></span>\n  <input type=\"text\" class=\"pt-input\" {{:modifier}} placeholder=\"Filter histogram...\" />\n</div>\n<div class=\"pt-input-group {{.modifier}}\">\n  <input type=\"password\" class=\"pt-input\" {{:modifier}} placeholder=\"Enter your password...\" />\n  <button class=\"pt-button pt-minimal pt-intent-warning pt-icon-lock\" {{:modifier}}></button>\n</div>\n<div class=\"pt-input-group {{.modifier}}\">\n  <span class=\"pt-icon pt-icon-search\"></span>\n  <input type=\"text\" class=\"pt-input\" {{:modifier}} placeholder=\"Search\" />\n  <button class=\"pt-button pt-minimal pt-intent-primary pt-icon-arrow-right\" {{:modifier}}></button>\n</div>\n\n:disabled - Disabled input. Must be added separately to the <code>&#60;input&#62;</code> and <code>&#60;button&#62;</code>. Also add <code>.pt-disabled</code> to <code>.pt-input-group</code> for icon coloring (not shown below).\n.pt-round - Rounded caps. Button will also be rounded.\n.pt-large - Large group. Children will adjust size accordingly.\n.pt-intent-primary - Primary intent. (All 4 intents are supported.)\n\nStyleguide components.forms.input-group.css\n*/\n.pt-input-group {\n  display: block;\n  position: relative; }\n  .pt-input-group .pt-input {\n    width: 100%; }\n    .pt-input-group .pt-input:not(:first-child) {\n      padding-left: 30px; }\n    .pt-input-group .pt-input:not(:last-child) {\n      padding-right: 30px; }\n  .pt-input-group .pt-input-action,\n  .pt-input-group > .pt-button,\n  .pt-input-group > .pt-icon {\n    position: absolute;\n    top: 0; }\n    .pt-input-group .pt-input-action:first-child,\n    .pt-input-group > .pt-button:first-child,\n    .pt-input-group > .pt-icon:first-child {\n      left: 0; }\n    .pt-input-group .pt-input-action:last-child,\n    .pt-input-group > .pt-button:last-child,\n    .pt-input-group > .pt-icon:last-child {\n      right: 0; }\n  .pt-input-group .pt-button {\n    min-width: 24px;\n    min-height: 24px;\n    line-height: 22px;\n    margin: 3px;\n    padding-top: 0;\n    padding-bottom: 0; }\n  .pt-input-group .pt-icon {\n    line-height: 1;\n    font-family: \"Icons16\", sans-serif;\n    font-size: 16px;\n    font-weight: 400;\n    font-style: normal;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n    margin: 0 7px;\n    line-height: 30px; }\n  .pt-input-group .pt-tag {\n    margin: 5px; }\n  .pt-input-group .pt-input:not(:focus) + .pt-button.pt-minimal:not(:hover):not(:focus),\n  .pt-input-group .pt-input:not(:focus) + .pt-input-action .pt-button.pt-minimal:not(:hover):not(:focus) {\n    color: #5c7080; }\n    .pt-input-group .pt-input:not(:focus) + .pt-button.pt-minimal:not(:hover):not(:focus) .pt-icon, .pt-input-group .pt-input:not(:focus) + .pt-button.pt-minimal:not(:hover):not(:focus) .pt-icon-standard, .pt-input-group .pt-input:not(:focus) + .pt-button.pt-minimal:not(:hover):not(:focus) .pt-icon-large,\n    .pt-input-group .pt-input:not(:focus) + .pt-input-action .pt-button.pt-minimal:not(:hover):not(:focus) .pt-icon,\n    .pt-input-group .pt-input:not(:focus) + .pt-input-action .pt-button.pt-minimal:not(:hover):not(:focus) .pt-icon-standard,\n    .pt-input-group .pt-input:not(:focus) + .pt-input-action .pt-button.pt-minimal:not(:hover):not(:focus) .pt-icon-large {\n      color: #5c7080; }\n  .pt-input-group .pt-input:not(:focus) + .pt-button.pt-minimal:disabled, .pt-input-group .pt-input:not(:focus) + .pt-minimal.pt-button.pt-disabled,\n  .pt-input-group .pt-input:not(:focus) + .pt-input-action .pt-button.pt-minimal:disabled,\n  .pt-input-group .pt-input:not(:focus) + .pt-input-action .pt-minimal.pt-button.pt-disabled {\n    color: rgba(92, 112, 128, 0.5) !important; }\n    .pt-input-group .pt-input:not(:focus) + .pt-button.pt-minimal:disabled .pt-icon, .pt-input-group .pt-input:not(:focus) + .pt-minimal.pt-button.pt-disabled .pt-icon, .pt-input-group .pt-input:not(:focus) + .pt-button.pt-minimal:disabled .pt-icon-standard, .pt-input-group .pt-input:not(:focus) + .pt-minimal.pt-button.pt-disabled .pt-icon-standard, .pt-input-group .pt-input:not(:focus) + .pt-button.pt-minimal:disabled .pt-icon-large, .pt-input-group .pt-input:not(:focus) + .pt-minimal.pt-button.pt-disabled .pt-icon-large,\n    .pt-input-group .pt-input:not(:focus) + .pt-input-action .pt-button.pt-minimal:disabled .pt-icon,\n    .pt-input-group .pt-input:not(:focus) + .pt-input-action .pt-minimal.pt-button.pt-disabled .pt-icon,\n    .pt-input-group .pt-input:not(:focus) + .pt-input-action .pt-button.pt-minimal:disabled .pt-icon-standard,\n    .pt-input-group .pt-input:not(:focus) + .pt-input-action .pt-minimal.pt-button.pt-disabled .pt-icon-standard,\n    .pt-input-group .pt-input:not(:focus) + .pt-input-action .pt-button.pt-minimal:disabled .pt-icon-large,\n    .pt-input-group .pt-input:not(:focus) + .pt-input-action .pt-minimal.pt-button.pt-disabled .pt-icon-large {\n      color: rgba(92, 112, 128, 0.5) !important; }\n  .pt-input-group.pt-disabled {\n    cursor: not-allowed; }\n    .pt-input-group.pt-disabled .pt-icon {\n      color: rgba(92, 112, 128, 0.5); }\n  .pt-input-group.pt-large .pt-button {\n    min-width: 30px;\n    min-height: 30px;\n    line-height: 28px;\n    margin: 5px;\n    line-height: 0; }\n  .pt-input-group.pt-large .pt-icon {\n    margin: 0 12px;\n    line-height: 40px; }\n  .pt-input-group.pt-large .pt-input {\n    height: 40px;\n    line-height: 40px;\n    font-size: 16px; }\n    .pt-input-group.pt-large .pt-input[type=\"search\"], .pt-input-group.pt-large .pt-input.pt-round {\n      padding: 0 15px; }\n    .pt-input-group.pt-large .pt-input:not(:first-child) {\n      padding-left: 40px; }\n    .pt-input-group.pt-large .pt-input:not(:last-child) {\n      padding-right: 40px; }\n  .pt-input-group.pt-round .pt-button,\n  .pt-input-group.pt-round .pt-input,\n  .pt-input-group.pt-round .pt-tag {\n    border-radius: 30px; }\n  .pt-dark .pt-input-group.pt-disabled .pt-icon {\n    color: rgba(191, 204, 214, 0.5); }\n  .pt-input-group.pt-intent-primary .pt-input {\n    box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px #137cbd, inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-input-group.pt-intent-primary .pt-input:focus {\n      box-shadow: 0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-input-group.pt-intent-primary .pt-input[readonly] {\n      box-shadow: inset 0 0 0 1px #137cbd; }\n  .pt-input-group.pt-intent-primary .pt-icon {\n    color: #137cbd; }\n  .pt-input-group.pt-intent-success .pt-input {\n    box-shadow: 0 0 0 0 rgba(15, 153, 96, 0), 0 0 0 0 rgba(15, 153, 96, 0), inset 0 0 0 1px #0f9960, inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-input-group.pt-intent-success .pt-input:focus {\n      box-shadow: 0 0 0 1px #0f9960, 0 0 0 3px rgba(15, 153, 96, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-input-group.pt-intent-success .pt-input[readonly] {\n      box-shadow: inset 0 0 0 1px #0f9960; }\n  .pt-input-group.pt-intent-success .pt-icon {\n    color: #0f9960; }\n  .pt-input-group.pt-intent-warning .pt-input {\n    box-shadow: 0 0 0 0 rgba(217, 130, 43, 0), 0 0 0 0 rgba(217, 130, 43, 0), inset 0 0 0 1px #d9822b, inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-input-group.pt-intent-warning .pt-input:focus {\n      box-shadow: 0 0 0 1px #d9822b, 0 0 0 3px rgba(217, 130, 43, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-input-group.pt-intent-warning .pt-input[readonly] {\n      box-shadow: inset 0 0 0 1px #d9822b; }\n  .pt-input-group.pt-intent-warning .pt-icon {\n    color: #d9822b; }\n  .pt-input-group.pt-intent-danger .pt-input {\n    box-shadow: 0 0 0 0 rgba(219, 55, 55, 0), 0 0 0 0 rgba(219, 55, 55, 0), inset 0 0 0 1px #db3737, inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-input-group.pt-intent-danger .pt-input:focus {\n      box-shadow: 0 0 0 1px #db3737, 0 0 0 3px rgba(219, 55, 55, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-input-group.pt-intent-danger .pt-input[readonly] {\n      box-shadow: inset 0 0 0 1px #db3737; }\n  .pt-input-group.pt-intent-danger .pt-icon {\n    color: #db3737; }\n\n/*\nJavaScript API\n\nThe `InputGroup` component is available in the __@blueprintjs/core__ package. Make sure to review\nthe [general usage docs for JS components](#components.usage).\n\nThe `InputGroup` React Component encapsulates the `.pt-input-group`\n[CSS API](#components.forms.input-group.css): it supports one non-interactive icon on the left side\nand one arbitrary element on the right side. Unlike the CSS API, the React Component supports\n_content of any length_ on the right side, not just icon buttons, because it is able to measure the\ncontent and ensure there is always space for it.\n\n`InputGroup` can be used just like a standard React `input` element, in controlled or uncontrolled\nfashion. In addition to its own content props, it supports all valid props for HTML `input` elements\nand proxies them to that element in the DOM; the most common ones are detailed below.\n\n@interface IInputGroupProps\n\n@react-example InputGroupExample\n\nStyleguide components.forms.input-group.js\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nText inputs\n\nUse the `pt-input` class on an `input[type=\"text\"]`. You should also specify `dir=\"auto\"` [to better\nsupport RTL languages](http://www.w3.org/International/questions/qa-html-dir#dirauto) (in all\nbrowsers except Internet Explorer).\n\nMarkup:\n<input class=\"pt-input {{.modifier}}\" {{:modifier}} type=\"text\" placeholder=\"Text input\" dir=\"auto\" />\n\n:disabled - Disabled\n:readonly - Readonly\n.pt-round - Rounded ends\n.pt-large - Larger size\n.pt-intent-primary - Primary intent\n.pt-intent-success - Success intent\n.pt-intent-warning - Warning intent\n.pt-intent-danger - Danger intent\n.pt-fill - Take up full width of parent element\n\nWeight: 3\n\nStyleguide components.forms.input\n*/\n.pt-input {\n  outline: none;\n  border: none;\n  border-radius: 3px;\n  box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2);\n  background: #ffffff;\n  height: 30px;\n  padding: 0 10px;\n  vertical-align: middle;\n  line-height: 30px;\n  color: #182026;\n  font-family: -apple-system, \"BlinkMacSystemFont\", \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Open Sans\", \"Helvetica Neue\", sans-serif, \"Icons16\";\n  font-size: 14px;\n  font-weight: 400;\n  transition: box-shadow 100ms cubic-bezier(0.4, 1, 0.75, 0.9); }\n  .pt-input::-webkit-input-placeholder {\n    opacity: 1;\n    color: rgba(92, 112, 128, 0.5); }\n  .pt-input::-moz-placeholder {\n    opacity: 1;\n    color: rgba(92, 112, 128, 0.5); }\n  .pt-input:-moz-placeholder {\n    opacity: 1;\n    color: rgba(92, 112, 128, 0.5); }\n  .pt-input:-ms-input-placeholder {\n    opacity: 1;\n    color: rgba(92, 112, 128, 0.5); }\n  .pt-input:focus {\n    box-shadow: 0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n  .pt-input:disabled, .pt-input.pt-disabled {\n    box-shadow: none;\n    background: rgba(206, 217, 224, 0.5);\n    cursor: not-allowed;\n    color: rgba(92, 112, 128, 0.5);\n    resize: none; }\n  .pt-input[type=\"search\"], .pt-input.pt-round {\n    border-radius: 30px;\n    box-sizing: border-box;\n    padding-left: 10px; }\n  .pt-input[readonly] {\n    box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.15); }\n  .pt-input.pt-large {\n    height: 40px;\n    line-height: 40px;\n    font-size: 16px; }\n    .pt-input.pt-large[type=\"search\"], .pt-input.pt-large.pt-round {\n      padding: 0 15px; }\n  .pt-input.pt-fill {\n    width: 100%; }\n  .pt-dark .pt-input {\n    box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4);\n    background: rgba(16, 22, 26, 0.3);\n    color: #f5f8fa; }\n    .pt-dark .pt-input::-webkit-input-placeholder {\n      color: rgba(191, 204, 214, 0.5); }\n    .pt-dark .pt-input::-moz-placeholder {\n      color: rgba(191, 204, 214, 0.5); }\n    .pt-dark .pt-input:-moz-placeholder {\n      color: rgba(191, 204, 214, 0.5); }\n    .pt-dark .pt-input:-ms-input-placeholder {\n      color: rgba(191, 204, 214, 0.5); }\n    .pt-dark .pt-input:focus {\n      box-shadow: 0 0 0 1px #137cbd, 0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); }\n    .pt-dark .pt-input:disabled, .pt-dark .pt-input.pt-disabled {\n      box-shadow: none;\n      background: rgba(216, 225, 232, 0.1);\n      color: rgba(255, 255, 255, 0.3); }\n    .pt-dark .pt-input[readonly] {\n      box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4); }\n  .pt-input.pt-intent-primary {\n    box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px #137cbd, inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-input.pt-intent-primary:focus {\n      box-shadow: 0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-input.pt-intent-primary[readonly] {\n      box-shadow: inset 0 0 0 1px #137cbd; }\n    .pt-dark .pt-input.pt-intent-primary {\n      box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px #137cbd, inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); }\n      .pt-dark .pt-input.pt-intent-primary:focus {\n        box-shadow: 0 0 0 1px #137cbd, 0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); }\n      .pt-dark .pt-input.pt-intent-primary[readonly] {\n        box-shadow: inset 0 0 0 1px #137cbd; }\n  .pt-input.pt-intent-success {\n    box-shadow: 0 0 0 0 rgba(15, 153, 96, 0), 0 0 0 0 rgba(15, 153, 96, 0), inset 0 0 0 1px #0f9960, inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-input.pt-intent-success:focus {\n      box-shadow: 0 0 0 1px #0f9960, 0 0 0 3px rgba(15, 153, 96, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-input.pt-intent-success[readonly] {\n      box-shadow: inset 0 0 0 1px #0f9960; }\n    .pt-dark .pt-input.pt-intent-success {\n      box-shadow: 0 0 0 0 rgba(15, 153, 96, 0), 0 0 0 0 rgba(15, 153, 96, 0), 0 0 0 0 rgba(15, 153, 96, 0), inset 0 0 0 1px #0f9960, inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); }\n      .pt-dark .pt-input.pt-intent-success:focus {\n        box-shadow: 0 0 0 1px #0f9960, 0 0 0 1px #0f9960, 0 0 0 3px rgba(15, 153, 96, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); }\n      .pt-dark .pt-input.pt-intent-success[readonly] {\n        box-shadow: inset 0 0 0 1px #0f9960; }\n  .pt-input.pt-intent-warning {\n    box-shadow: 0 0 0 0 rgba(217, 130, 43, 0), 0 0 0 0 rgba(217, 130, 43, 0), inset 0 0 0 1px #d9822b, inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-input.pt-intent-warning:focus {\n      box-shadow: 0 0 0 1px #d9822b, 0 0 0 3px rgba(217, 130, 43, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-input.pt-intent-warning[readonly] {\n      box-shadow: inset 0 0 0 1px #d9822b; }\n    .pt-dark .pt-input.pt-intent-warning {\n      box-shadow: 0 0 0 0 rgba(217, 130, 43, 0), 0 0 0 0 rgba(217, 130, 43, 0), 0 0 0 0 rgba(217, 130, 43, 0), inset 0 0 0 1px #d9822b, inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); }\n      .pt-dark .pt-input.pt-intent-warning:focus {\n        box-shadow: 0 0 0 1px #d9822b, 0 0 0 1px #d9822b, 0 0 0 3px rgba(217, 130, 43, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); }\n      .pt-dark .pt-input.pt-intent-warning[readonly] {\n        box-shadow: inset 0 0 0 1px #d9822b; }\n  .pt-input.pt-intent-danger {\n    box-shadow: 0 0 0 0 rgba(219, 55, 55, 0), 0 0 0 0 rgba(219, 55, 55, 0), inset 0 0 0 1px #db3737, inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-input.pt-intent-danger:focus {\n      box-shadow: 0 0 0 1px #db3737, 0 0 0 3px rgba(219, 55, 55, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2); }\n    .pt-input.pt-intent-danger[readonly] {\n      box-shadow: inset 0 0 0 1px #db3737; }\n    .pt-dark .pt-input.pt-intent-danger {\n      box-shadow: 0 0 0 0 rgba(219, 55, 55, 0), 0 0 0 0 rgba(219, 55, 55, 0), 0 0 0 0 rgba(219, 55, 55, 0), inset 0 0 0 1px #db3737, inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); }\n      .pt-dark .pt-input.pt-intent-danger:focus {\n        box-shadow: 0 0 0 1px #db3737, 0 0 0 1px #db3737, 0 0 0 3px rgba(219, 55, 55, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); }\n      .pt-dark .pt-input.pt-intent-danger[readonly] {\n        box-shadow: inset 0 0 0 1px #db3737; }\n  .pt-input::-ms-clear {\n    display: none; }\n\n/*\nSearch field\n\nChanging the `<input>` element's `type` attribute to `\"search\"` styles it to look like a search\nfield, giving it a rounded appearance. This style is equivalent to the `.pt-round` modifier, but it\nis applied automatically for `[type=\"search\"]` inputs.\n\nNote that some browsers also implement a handler for the <kbd class=\"pt-key\">esc</kbd> key to clear\nthe text in a search field.\n\nMarkup:\n<div class=\"pt-input-group {{.modifier}}\">\n  <span class=\"pt-icon pt-icon-search\"></span>\n  <input class=\"pt-input\" {{:modifier}} type=\"search\" placeholder=\"Search input\" dir=\"auto\" />\n</div>\n\n:disabled - Disabled. Also add <code>.pt-disabled</code> to <code>.pt-input-group</code> for icon coloring (not shown below).\n.pt-large - Large\n\nStyleguide components.forms.input.search\n*/\n/*\nText areas\n\nText areas are similar to text inputs, but they are resizable.\n\nYou should also specify `dir=\"auto\"` on text areas\n[to better support RTL languages](http://www.w3.org/International/questions/qa-html-dir#dirauto)\n(in all browsers except Internet Explorer).\n\nMarkup:\n<textarea class=\"pt-input {{.modifier}}\" {{:modifier}} dir=\"auto\"></textarea>\n\n:disabled - Disabled\n:readonly - Readonly\n.pt-large - Larger font size\n.pt-intent-primary - Primary intent\n.pt-intent-danger  - Danger intent\n.pt-fill  - Take up full width of parent element\n\nWeight: 3\n\nStyleguide components.forms.textarea\n*/\ntextarea.pt-input {\n  max-width: 100%;\n  height: auto;\n  padding: 10px;\n  line-height: 1.28581; }\n  textarea.pt-input.pt-large {\n    line-height: 1.28581;\n    font-size: 16px; }\n  .pt-dark textarea.pt-input {\n    box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4);\n    background: rgba(16, 22, 26, 0.3);\n    color: #f5f8fa; }\n    .pt-dark textarea.pt-input::-webkit-input-placeholder {\n      color: rgba(191, 204, 214, 0.5); }\n    .pt-dark textarea.pt-input::-moz-placeholder {\n      color: rgba(191, 204, 214, 0.5); }\n    .pt-dark textarea.pt-input:-moz-placeholder {\n      color: rgba(191, 204, 214, 0.5); }\n    .pt-dark textarea.pt-input:-ms-input-placeholder {\n      color: rgba(191, 204, 214, 0.5); }\n    .pt-dark textarea.pt-input:focus {\n      box-shadow: 0 0 0 1px #137cbd, 0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4); }\n    .pt-dark textarea.pt-input:disabled, .pt-dark textarea.pt-input.pt-disabled {\n      box-shadow: none;\n      background: rgba(216, 225, 232, 0.1);\n      color: rgba(255, 255, 255, 0.3); }\n    .pt-dark textarea.pt-input[readonly] {\n      box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4); }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nLabels\n\nAdd labels to inputs to enhance the usability of your forms.\n\nPutting the `<input>` element _inside_ a `<label>` element also increases the area where the user\ncan click to activate the control. Notice how in the example below, clicking a `<label>` below\nfocuses its `<input>`.\n\nMarkup:\n<label class=\"pt-label {{.modifier}}\">\n  Label A\n  <input class=\"pt-input\" style=\"width: 200px;\" type=\"text\" placeholder=\"Text input\" dir=\"auto\" />\n</label>\n<label class=\"pt-label {{.modifier}}\">\n  Label B\n  <div class=\"pt-input-group\">\n    <span class=\"pt-icon pt-icon-calendar\"></span>\n    <input class=\"pt-input\" style=\"width: 200px;\" type=\"text\" placeholder=\"Input group\" dir=\"auto\" />\n  </div>\n</label>\n\n.pt-inline - Inline\n\nWeight: 1\n\nStyleguide components.forms.label\n*/\n/*\nDisabled labels\n\nAdd the `.pt-label` and `.pt-disabled` class modifiers to a `<label>` to make the label appear\ndisabled.\n\nThis styles the label text, but does not disable any nested children like inputs or selects. You\nmust add the `:disabled` attribute directly to any nested elements to disable them. Similarly the respective\n`pt-*` form control will need a `.pt-disabled` modifier. See the examples below.\n\nMarkup:\n<label class=\"pt-label pt-disabled\">\n  Label A\n  <input disabled class=\"pt-input\" style=\"width: 200px;\" type=\"text\" placeholder=\"Text input\" dir=\"auto\" />\n</label>\n<label class=\"pt-label pt-disabled\">\n  Label B\n  <div class=\"pt-input-group pt-disabled\">\n    <span class=\"pt-icon pt-icon-calendar\"></span>\n    <input disabled class=\"pt-input\" style=\"width: 200px;\" type=\"text\" placeholder=\"Input group\" dir=\"auto\" />\n  </div>\n</label>\n<label class=\"pt-label pt-disabled\">\n  Label C\n  <div class=\"pt-select pt-disabled\">\n    <select disabled>\n      <option selected>Choose an item...</option>\n      <option value=\"1\">One</option>\n    </select>\n  </div>\n</label>\n\nWeight: 1\n\nStyleguide components.forms.label.disabled\n*/\nlabel.pt-label {\n  display: block;\n  margin: 0 0 10px; }\n  label.pt-label .pt-input,\n  label.pt-label .pt-select {\n    display: block;\n    margin-top: 5px;\n    text-transform: none; }\n  label.pt-label .pt-select select {\n    width: 100%;\n    vertical-align: top;\n    font-weight: 400; }\n  label.pt-label.pt-inline {\n    line-height: 30px; }\n    label.pt-label.pt-inline .pt-input,\n    label.pt-label.pt-inline .pt-input-group,\n    label.pt-label.pt-inline .pt-select {\n      display: inline-block;\n      margin: 0 0 0 5px;\n      vertical-align: top; }\n    label.pt-label.pt-inline .pt-input-group .pt-input {\n      margin-left: 0; }\n    label.pt-label.pt-inline.pt-large {\n      line-height: 40px; }\n  label.pt-label.pt-disabled {\n    color: rgba(92, 112, 128, 0.5); }\n  .pt-dark label.pt-label {\n    color: #f5f8fa; }\n    .pt-dark label.pt-label.pt-disabled {\n      color: rgba(191, 204, 214, 0.5); }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nA mixin to generate the classes for a React CSSTransitionGroup which animates any number of CSS\nproperties at once.\n\nTransitioned properties are specificed as a map of property names to lists of (inital value, final\nvalue). For enter & appear transitions, each property will transition from its initial to its final\nvalue. For leave transitions, each property will transition in reverse, from final to initial.\n\n**Simple example:**\n`@include react-transition(\"pt-popover\", (opacity: 0 1), $before: \"&\");`\nTransition named \"pt-popover\" moves opacity from 0 to 1. `\"&\"` indicates that the\nTransition classes are expected to be applied to this element, where the mixin is invoked.\n\n**Params:**\n$name: React transitionName prop\n$properties: map of CSS property to (initial, final) values\n$duration: transition duration\n$easing: transition easing function\n$delay: transition delay\n$before: selector text to insert before transition name (often to select self: &)\n$after: selector text to insert after transiton name (to select children)\n*/\n/*\nA mixin to generate the classes for one phase of a React CSSTransitionGroup.\n`$phase` must be `appear` or `enter` or `leave`.\nIf `enter` phase is given then `appear` phase will be generated at the same time.\nIf `leave` phase is given then property values are animated in reverse, from final to initial.\n\n**Example:**\n@include react-transition-phase(pt-toast, enter, $enter-translate, $before: \"&\");\n@include react-transition-phase(pt-toast, leave, $leave-blur, $pt-transition-duration * 3, $before: \"&\");\n*/\n/*\nGiven map of properties to values, set each property to the value at the given index.\n(remember that sass indices are 1-based).\n\nExample: `each-prop((opacity: 0 1), 2)` will print \"opacity: 1\"\n*/\n/*\nFormat transition class name with all the bits.\n\"enter\" phase will include \"appear\" phase in returned name.\n*/\n/*\nSelects\n\nStyling `<select>` tags requires a wrapper element to customize the dropdown caret. Put class\nmodifiers on the wrapper and attribute modifiers directly on the `<select>`.\n\n<div class=\"pt-callout pt-intent-primary pt-icon-info-sign\">\n  Check out [Dropdown Menus](#components.menu.js.dropdown) for a simple JavaScript alternative\n  to the `<select>` tag.\n</div>\n\nMarkup:\n<div class=\"pt-select {{.modifier}}\">\n  <select {{:modifier}}>\n    <option selected>Choose an item...</option>\n    <option value=\"1\">One</option>\n    <option value=\"2\">Two</option>\n    <option value=\"3\">Three</option>\n    <option value=\"4\">Four</option>\n  </select>\n</div>\n\n:disabled - Disabled. Also add <code>.pt-disabled</code> to <code>.pt-select</code> for icon coloring (not shown below).\n.pt-large - Large\n.pt-fill - Expand to fill parent container\n\nWeight: 5\n\nStyleguide components.forms.select\n*/\n.pt-select {\n  display: inline-block;\n  position: relative;\n  vertical-align: middle;\n  letter-spacing: normal; }\n  .pt-select select::-ms-expand {\n    display: none; }\n  .pt-select.pt-large::after {\n    top: 0;\n    right: 12px;\n    line-height: 40px; }\n  .pt-select.pt-fill,\n  .pt-select.pt-fill select {\n    width: 100%; }\n  .pt-dark .pt-select option {\n    background-color: #30404d;\n    color: #f5f8fa; }\n  .pt-dark .pt-select::after {\n    color: #bfccd6; }\n\n/*\nLabeled static dropdown\n\nYou can label `<select>` tags, similar to how you label any other form control.\n\nMarkup:\n<label class=\"pt-label {{.modifier}}\">\n  Label A\n  <div class=\"pt-select\">\n    <select>\n      <option selected>Choose an item...</option>\n      <option value=\"1\">One</option>\n    </select>\n  </div>\n</label>\n\n.pt-inline - Inline\n\nStyleguide components.forms.select.labeled\n*/\n/*\nForm controls\n\nThe following controls often appear inside HTML forms. Blueprint does not strictly require the use\nof any `<form>` elements, so you can use these controls anywhere in the UI.\n\nMany of the components in this section provide React components for simpler idiomatic usage. These\nReact components try to transparently mirror the underlying HTML element, so they support the full\nrange of appropriate HTML props. If you provide a `className` prop, the class names you provide will\nbe added to the default Blueprint class name. If you specify other attributes that the component\nprovides, you'll overide the default value.\n\nStyleguide components.forms\n*/\nform {\n  display: block; }\n\n/*\n * Copyright 2016 Palantir Technologies, Inc. All rights reserved.\n */\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nHotkeys\n\nHotkeys enable you to create interactions based on user keyboard events.\n\nTo add hotkeys to your React component, use the `@HotkeyTarget` class decorator\nand add a `renderHotkeys()` method. The decorator will call `renderHotkeys()`\nand attach the appropriate key listeners.\n\n### Hotkey scope\n\n`Hotkey`s can have either local or global scope. Local hotkeys will only be\ntriggered when the target is focused, while global hotkeys can be triggered no\nmatter which element is focused.\n\nAdditionally, any keyboard input that occurs inside a text input (such as a\n`<textarea>`, `<input>`, or `<div contenteditable>`) is ignored.\n\n### Hotkey dialog\n\nIf you define hotkeys for your page, you'll want to display the hotkeys in a\nnice format for the user. If you register any global or local hotkeys, we\nautomatically attach a hotkey for <kbd class=\"pt-key\">?</kbd>, which will\ndisplay the hotkeys dialog.\n\nThe dialog will always include all available global hotkeys, and if you are\nfocused on an element that has any hotkeys, those will be shown as well.\n\nIf you would like to change the style of the dialog (for example, to apply the\ndark theme class), call the `setHotkeysDialogProps` function with\n`IDialogProps`.\n\nStyleguide components.hotkeys\n*/\n/*\nPiano example\n\nAlso known as the keyboard keyboard. First, click the keys or press\n<span class=\"pt-key-combo\">\n  <kbd class=\"pt-key pt-modifier-key\">\n    <span class=\"pt-icon-standard pt-icon-key-shift\"></span>\n    shift\n  </kbd><kbd class=\"pt-key\">P</kbd>\n</span>\nto focus the piano, then press the keys on your keyboard to play some music!\n\n@react-example HotkeyPiano\n\nWeight: 0\n\nStyleguide components.hotkeys.piano\n*/\n/*\nJavaScript API\n\n1. Add the `@HotkeysTarget` class decorator to your react component.\n1. Implement the `renderHotkeys()` method.\n1. Define your `<Hotkey>`s inside a `<Hotkeys>` element.\n\n```\nimport { Hotkey, Hotkeys, HotkeysTarget } from \"@blueprintjs/core\";\nimport * as React from \"react\";\n\n@HotkeysTarget\nexport class MyComponent extends React.Component<{}, {}> {\n    public render() {\n        return <div>Whatever content</div>;\n    }\n\n    public renderHotkeys() {\n        return <Hotkeys>\n            <Hotkey\n                global={true}\n                combo=\"shift + a\"\n                label=\"Be awesome all the time\"\n                onKeyDown={() => console.log(\"Awesome!\")}\n            />\n            <Hotkey\n                group=\"Fancy Shortcuts\"\n                combo=\"shift + f\"\n                label=\"Be fancy only when focused\"\n                onKeyDown={() => console.log(\"So Fancy!\")}\n            />\n        </Hotkeys>;\n    }\n}\n```\n\nWeight: 1\n\nStyleguide components.hotkeys.api\n*/\n/*\nDecorator\n\nThe `@HotkeysTarget` decorator allows you to easily add global and local\nhotkeys to any React component. Add the decorator to the top of the class and\nmake sure to implement the `renderHotkeys` method.\n\n@interface IHotkeysTarget\n\nWeight: 2\n\nStyleguide components.hotkeys.api.hotkeys-target\n*/\n/*\nHotkeys\n\nWrap your `Hotkey`s in the `Hotkeys` element. For example:\n\n```\n<Hotkeys>\n  <Hotkey label=\"Quit\" combo=\"ctrl+q\" global onKeyDown={handleQuit} />\n  <Hotkey label=\"Save\" combo=\"ctrl+s\" group=\"File\" onKeyDown={handleSave} />\n</Hotkey>\n```\n\n@interface IHotkeysProps\n\nWeight: 3\n\nStyleguide components.hotkeys.api.hotkeys\n*/\n/*\nHotkey\n\n@interface IHotkeyProps\n\nWeight: 4\n\nStyleguide components.hotkeys.api.hotkey\n*/\n/*\nKey combos\n\nEach hotkey must be assigned a key combo that will trigger its events. A key\ncombo consists of zero or more modifier keys (`alt`, `ctrl`, `shift`, `meta`,\n`cmd`) and exactly one action key, such as `A`, `return`, or `up`.\n\nSome key combos have aliases. For example, `shift + 1` can equivalently be\nexpressed as `!` and `cmd` is equal to `meta`. However, normal alphabetic\ncharacters do not have this aliasing, so `X` is equivalent to `x` but is not\nequivalent to `shift + x`.\n\n\n##### Examples of valid key combos\n\n* `cmd+plus`\n* `!` or, equivalently `shift+1`\n* `return` or, equivalently `enter`\n* `alt + shift + x`\n* `ctrl + left`\n\nNote that spaces are ignored.\n\n##### Named keys\n\n* `plus`\n* `minus`\n* `backspace`\n* `tab`\n* `enter`\n* `capslock`\n* `esc`\n* `space`\n* `pageup`\n* `pagedown`\n* `end`\n* `home`\n* `left`\n* `up`\n* `right`\n* `down`\n* `ins`\n* `del`\n\n##### Aliased keys\n\n* `option` &rarr; `alt`\n* `cmd` &rarr; `meta`\n* `command` &rarr; `meta`\n* `return` &rarr; `enter`\n* `escape` &rarr; `esc`\n* `win` &rarr; `meta`\n\nThe special modifier `mod` will choose the OS-preferred modifier key — `cmd`\nfor macOS and iOS, or `ctrl` for Windows and Linux.\n\n##### Hotkey tester\n\nBelow is a little widget to quickly help you try out hotkey combos and see how\nthey will look in the dialog. See the key combos section above for more about\nspecifying key combo props.\n\n@react-example HotkeyTester\n\nWeight: 5\n\nStyleguide components.hotkeys.api.hotkey-tester\n*/\n.pt-key {\n  display: inline-block;\n  border-radius: 2px;\n  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 1px 1px rgba(16, 22, 26, 0.2), 0 2px 6px rgba(16, 22, 26, 0.2);\n  background: #ffffff;\n  min-width: 25px;\n  height: 25px;\n  padding: 3px 5px;\n  vertical-align: middle;\n  text-align: center;\n  line-height: 20px;\n  color: #5c7080;\n  font-family: -apple-system, \"BlinkMacSystemFont\", \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Open Sans\", \"Helvetica Neue\", sans-serif, \"Icons16\";\n  font-size: 12px; }\n  .pt-key.pt-modifier-key {\n    padding: 3px 8px 3px 6px; }\n    .pt-key.pt-modifier-key .pt-icon-standard {\n      margin-right: 5px; }\n  .pt-dark .pt-key {\n    box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 1px 1px rgba(16, 22, 26, 0.4), 0 2px 6px rgba(16, 22, 26, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);\n    background: #394b59;\n    color: #bfccd6; }\n\n.pt-key-combo .pt-key:not(:last-child) {\n  margin-right: 5px; }\n\n.pt-hotkey-dialog {\n  top: 40px;\n  padding-bottom: 0; }\n  .pt-hotkey-dialog .pt-dialog-body {\n    margin: 0;\n    padding: 0; }\n  .pt-hotkey-dialog .pt-key-combo {\n    flex: 1 0 auto;\n    width: 160px;\n    text-align: right; }\n\n.pt-hotkey-column {\n  margin: auto;\n  max-height: 80vh;\n  overflow-y: auto;\n  padding: 30px; }\n  .pt-hotkey-column .pt-hotkey-group {\n    margin-bottom: 30px; }\n    .pt-hotkey-column .pt-hotkey-group:not(:first-child) {\n      margin-top: 50px; }\n\n.pt-hotkey {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  margin-right: 0;\n  margin-left: 0; }\n  .pt-hotkey:not(:last-child) {\n    margin-bottom: 10px; }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nSubmenus\n\nTo add a submenu to a `Menu`, simply nest `MenuItem`s within another `MenuItem`.\nThe submenu opens to the right of its parent by default, but will adjust and flip to the left if\nthere is not enough room to the right.\n\n```\n<MenuItem text=\"Submenu\">\n  <MenuItem text=\"Child one\" />\n  <MenuItem text=\"Child two\" />\n  <MenuItem text=\"Child three\" />\n</MenuItem>\n```\n\nAlternatively, you can pass an array of `IMenuItemProps` to the `submenu` prop:\n\n```\nReact.createElement(MenuItem, {\n    submenu: [\n        { text: \"Child one\" },\n        { text: \"Child two\" },\n        { text: \"Child three\" },\n    ],\n    text: \"parent\",\n});\n```\n\n<div class=\"pt-callout pt-intent-warning pt-icon-warning-sign\">\n  <h5>JavaScript only</h5>\n  Submenus are only supported in the React components. They cannot be created with CSS alone because\n  they rely on the [`Popover`](#components.popover) component for positioning and transitions.\n</div>\n\nWeight: 2\n\nStyleguide components.menu.js.submenu\n*/\n.pt-submenu > .pt-popover-target {\n  display: inherit; }\n  .pt-submenu > .pt-popover-target > .pt-menu-item {\n    padding-right: 26px; }\n    .pt-submenu > .pt-popover-target > .pt-menu-item::after {\n      line-height: 1;\n      font-family: \"Icons16\", sans-serif;\n      font-size: 16px;\n      font-weight: 400;\n      font-style: normal;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      position: absolute;\n      right: 5px;\n      content: \"〉\"; }\n      .pt-large .pt-submenu > .pt-popover-target > .pt-menu-item::after {\n        line-height: 20px; }\n\n.pt-submenu .pt-popover {\n  position: relative;\n  top: -5px;\n  left: 5px; }\n  .pt-submenu .pt-popover.pt-align-left {\n    right: 5px;\n    left: auto; }\n\n/*\nMenus\n\nMenus display lists of interactive items.\n\nStyleguide components.menu\n*/\n/*\nJavaScript API\n\nThe `Menu`, `MenuItem`, and `MenuDivider` components are available in the __@blueprintjs/core__\npackage. Make sure to review the [general usage docs for JS components](#components.usage).\n\nThe Menu API includes three stateless React components:\n\n- [`Menu`](#components.menu.js.menu)\n- [`MenuItem`](#components.menu.js.menu-item)\n- [`MenuDivider`](#components.menu.js.menu-divider)\n\n### Sample Usage\n\n```\nconst { Menu, MenuItem, MenuDivider } = BlueprintComponents;\n\nclass MenuExample extends React.Component<{}, {}> {\n    public render() {\n        return (\n            <Menu>\n                <MenuItem\n                    iconName=\"new-text-box\"\n                    onClick={this.handleClick}\n                    text=\"New text box\" />\n                <MenuItem\n                    iconName=\"new-object\"\n                    onClick={this.handleClick}\n                    text=\"New object\" />\n                <MenuItem\n                    iconName=\"new-link\"\n                    onClick={this.handleClick}\n                    text=\"New link\" />\n                <MenuDivider />\n                <MenuItem text=\"Settings...\" iconName=\"cog\" />\n            </Menu>\n        );\n    }\n\n    private handleClick(e: React.MouseEvent) {\n        console.log(\"clicked\", (e.target as HTMLElement).textContent);\n    }\n}\n```\n\n@react-example MenuExample\n\nStyleguide components.menu.js\n*/\n/*\nMenu\n\nA `Menu`'s children (menu items and dividers) are rendered as the contents of a `.pt-menu` element.\n\nYou can add the `pt-large` class to the `Menu` to make a larger version of the menu.\n\n@interface IMenuProps\n\nStyleguide components.menu.js.menu\n*/\n/*\nMenu item\n\nA `MenuItem` is a single interactive item in a `Menu`.\n\nThis component renders an `a.pt-menu-item`. Make the `MenuItem` a link by providing the `href`,\n`target`, and `onClick` props as necessary.\n\nCreate submenus by nesting `MenuItem`s inside each other as `children`, or by providing a `submenu`\nprop with an array of `MenuItem`s.\n\n@interface IMenuItemProps\n\nStyleguide components.menu.js.menu-item\n*/\n/*\nMenu divider\n\nUse `MenuDivider` to separate menu sections. Optionally, add a title to the divider.\n\n@interface IMenuDividerProps\n\nWeight: 1\n\nStyleguide components.menu.js.menu-divider\n*/\n/*\nDropdown menus\n\nThe `Menu` component by itself simply renders a menu list. To make a dropdown menu, use a `Menu`\nelement as the `content` property of a `Popover`:\n\n```\n<Popover content={<Menu>...</Menu>} position={Position.RIGHT_TOP}>\n    <Button iconName=\"share\" text=\"Open in...\" />\n</Popover>\n```\n\nWhen the user clicks a menu item that is not disabled and is not part of a submenu, the popover is\nautomatically dismissed (in other words, the menu closes). This is because the `MenuItem` component\nadds the `pt-popover-dismiss` class to these items by default (see [Popover JavaScript\nAPI](#components.popover.js) for more information). If you want to opt out of this behavior, you can\nadd the `shouldDismissPopover` prop to a `MenuItem`.\n\nNotice that selecting the menu item labeled **Table** in the example below does not automatically\ndismiss the `Popover`. Selecting other menu items does dismiss the popover.\n\n@react-example DropdownMenuExample\n\nWeight: 3\n\nStyleguide components.menu.js.dropdown\n*/\n/*\nCSS API\n\nMenus can be constructed manually using the HTML markup and `pt-menu-*` classes below. However, you\nshould use the menu [React components](#components.menu.js) instead wherever possible, as they\nabstract away the tedious parts of implementing a menu.\n\n- Begin with a `ul.pt-menu`. Each `li` child denotes a single entry in the menu.\n\n- Put a `.pt-menu-item` element inside an `li` to create a clickable entry. Use either `<button>` or\n`<a>` tags for menu items to denote interactivity.\n\n- Add icons to menu items the same way you would to buttons: simply add the appropriate\n`pt-icon-<name>` class*.\n\n- Make menu items non-interactive with the class `pt-disabled`.\n\n- Wrap menu item text in a `<span>` element for proper alignment. (Note that React automatically\ndoes this.)\n\n- Add a right-aligned label to a menu item by adding a `span.pt-menu-item-label` inside the\n`.pt-menu-item`, after the content. Add an icon to the label by adding icon classes to the label\nelement (`pt-icon-standard` size is recommended).\n\n- Add a divider between items with `li.pt-menu-divider`.\n\n- If you want the popover to close when the user clicks a menu item, add the class\n`pt-popover-dismiss` to any relevant menu items.\n\n<small>\\* You do not need to add a `pt-icon-<sizing>` class to menu items&mdash;icon sizing is\ndefined as part of `.pt-menu-item`.</small>\n\n<div class=\"pt-callout pt-intent-primary pt-icon-info-sign\">\n  Note that the following examples are `display: inline-block`; you may need to adjust\n  menu width in your own usage.\n</div>\n\nMarkup:\n<ul class=\"pt-menu {{.modifier}} pt-elevation-1\">\n  <li>\n    <a class=\"pt-menu-item pt-icon-people\" tabindex=\"0\">Share...</a>\n  </li>\n  <li>\n    <a class=\"pt-menu-item pt-icon-circle-arrow-right\" tabindex=\"0\">Move...</a>\n  </li>\n  <li>\n    <a class=\"pt-menu-item pt-icon-edit\" tabindex=\"0\">Rename</a>\n  </li>\n  <li class=\"pt-menu-divider\"></li>\n  <li>\n    <a class=\"pt-menu-item pt-icon-trash pt-intent-danger\" tabindex=\"0\">Delete</a>\n  </li>\n</ul>\n\n.pt-large - Large size (only supported on <code>.pt-menu</code>)\n\nStyleguide components.menu.css\n*/\n.pt-menu {\n  margin: 0;\n  border-radius: 3px;\n  background: #ffffff;\n  min-width: 180px;\n  padding: 5px;\n  list-style: none;\n  text-align: left;\n  color: #182026; }\n\n.pt-menu-divider {\n  display: block;\n  margin: 5px;\n  border-top: 1px solid rgba(16, 22, 26, 0.15); }\n  .pt-dark .pt-menu-divider {\n    border-top-color: rgba(255, 255, 255, 0.15); }\n\n.pt-menu-item {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  word-wrap: normal;\n  display: block;\n  border-radius: 2px;\n  padding: 7px;\n  line-height: 16px;\n  color: inherit;\n  user-select: none; }\n  .pt-menu-item:not(.pt-disabled):hover, .pt-submenu > .pt-popover-open > .pt-menu-item:not(.pt-disabled) {\n    background: #137cbd;\n    cursor: pointer;\n    color: #ffffff; }\n  .pt-menu-item.pt-disabled {\n    cursor: not-allowed;\n    color: rgba(92, 112, 128, 0.5); }\n  .pt-dark .pt-menu-item {\n    color: inherit; }\n    .pt-dark .pt-menu-item.pt-disabled {\n      color: rgba(191, 204, 214, 0.5); }\n  .pt-menu-item::before {\n    line-height: 1;\n    font-family: \"Icons16\", sans-serif;\n    font-size: 16px;\n    font-weight: 400;\n    font-style: normal;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n    float: left;\n    margin-right: 7px; }\n  .pt-menu-item::before, .pt-menu-item::after {\n    color: #5c7080; }\n  .pt-menu-item .pt-menu-item-label {\n    color: #5c7080; }\n  .pt-menu-item:not(.pt-disabled):hover::before, .pt-submenu > .pt-popover-open > .pt-menu-item:not(.pt-disabled)::before, .pt-menu-item:not(.pt-disabled):hover::after, .pt-submenu > .pt-popover-open > .pt-menu-item:not(.pt-disabled)::after,\n  .pt-menu-item:not(.pt-disabled):hover .pt-menu-item-label, .pt-submenu > .pt-popover-open > .pt-menu-item:not(.pt-disabled) .pt-menu-item-label {\n    color: #ffffff; }\n  .pt-menu-item:not(.pt-disabled):hover.pt-intent-primary, .pt-submenu > .pt-popover-open > .pt-menu-item:not(.pt-disabled).pt-intent-primary {\n    background-color: #137cbd; }\n  .pt-menu-item:not(.pt-disabled):hover.pt-intent-success, .pt-submenu > .pt-popover-open > .pt-menu-item:not(.pt-disabled).pt-intent-success {\n    background-color: #0f9960; }\n  .pt-menu-item:not(.pt-disabled):hover.pt-intent-warning, .pt-submenu > .pt-popover-open > .pt-menu-item:not(.pt-disabled).pt-intent-warning {\n    background-color: #d9822b; }\n  .pt-menu-item:not(.pt-disabled):hover.pt-intent-danger, .pt-submenu > .pt-popover-open > .pt-menu-item:not(.pt-disabled).pt-intent-danger {\n    background-color: #db3737; }\n  .pt-menu-item.pt-disabled {\n    outline: none;\n    cursor: not-allowed;\n    color: rgba(92, 112, 128, 0.5); }\n    .pt-menu-item.pt-disabled::before, .pt-menu-item.pt-disabled::after {\n      color: rgba(92, 112, 128, 0.5); }\n    .pt-menu-item.pt-disabled .pt-menu-item-label {\n      color: rgba(92, 112, 128, 0.5); }\n  .pt-large .pt-menu-item {\n    padding: 10px 7px;\n    line-height: 20px;\n    font-size: 16px; }\n    .pt-large .pt-menu-item::before {\n      line-height: 1;\n      font-family: \"Icons20\", sans-serif;\n      font-size: 20px;\n      font-weight: 400;\n      font-style: normal;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      margin-right: 10px; }\n\na.pt-menu-item, a.pt-menu-item:hover, .pt-submenu > .pt-popover-open > a.pt-menu-item {\n  text-decoration: none; }\n\nbutton.pt-menu-item {\n  border: none;\n  background: none;\n  width: 100%;\n  text-align: left; }\n\n.pt-menu-item-label {\n  float: right;\n  margin-left: 7px; }\n\n/*\nSection headers\n\nAdd an `li.pt-menu-header`. Wrap the text in an `<h6>` tag for proper typography and borders.\n\nMarkup:\n<ul class=\"pt-menu pt-elevation-1\">\n  <li class=\"pt-menu-header\"><h6>Layouts</h6></li>\n  <li><button type=\"button\" class=\"pt-menu-item pt-icon-layout-auto\">Auto</button></li>\n  <li><button type=\"button\" class=\"pt-menu-item pt-icon-layout-circle\">Circle</button></li>\n  <li><button type=\"button\" class=\"pt-menu-item pt-icon-layout-grid\">Grid</button></li>\n  <li class=\"pt-menu-header\"><h6>Views</h6></li>\n  <li><button type=\"button\" class=\"pt-menu-item pt-icon-history\">History</button></li>\n  <li><button type=\"button\" class=\"pt-menu-item pt-icon-star\">Favorites</button></li>\n  <li><button type=\"button\" class=\"pt-menu-item pt-icon-envelope\">Messages</button></li>\n</ul>\n\nStyleguide components.menu.css.header\n*/\n.pt-menu-header {\n  display: block;\n  margin: 5px;\n  border-top: 1px solid rgba(16, 22, 26, 0.15);\n  cursor: default;\n  padding-left: 2px; }\n  .pt-dark .pt-menu-header {\n    border-top-color: rgba(255, 255, 255, 0.15); }\n  .pt-menu-header:first-of-type {\n    border-top: none; }\n  .pt-menu-header > h6 {\n    color: #182026;\n    font-weight: 600;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    word-wrap: normal;\n    margin: 0;\n    padding: 10px 7px 0 1px;\n    line-height: 17px; }\n  .pt-menu-header:first-of-type > h6 {\n    padding-top: 0; }\n  .pt-large .pt-menu-header > h6 {\n    padding-top: 15px;\n    padding-bottom: 5px;\n    font-size: 18px; }\n  .pt-large .pt-menu-header:first-of-type > h6 {\n    padding-top: 0; }\n\n.pt-dark .pt-menu {\n  background: #30404d;\n  color: #f5f8fa; }\n\n.pt-dark .pt-menu-item::before, .pt-dark .pt-menu-item::after {\n  color: #bfccd6; }\n\n.pt-dark .pt-menu-item .pt-menu-item-label {\n  color: #bfccd6; }\n\n.pt-dark .pt-menu-item:hover::before, .pt-dark .pt-submenu > .pt-popover-open > .pt-menu-item::before, .pt-dark .pt-menu-item:hover::after, .pt-dark .pt-submenu > .pt-popover-open > .pt-menu-item::after {\n  color: #ffffff; }\n\n.pt-dark .pt-menu-item.pt-disabled, .pt-dark .pt-menu-item.pt-disabled:hover, .pt-dark .pt-submenu > .pt-popover-open > .pt-disabled.pt-menu-item {\n  color: rgba(191, 204, 214, 0.5); }\n  .pt-dark .pt-menu-item.pt-disabled::before, .pt-dark .pt-menu-item.pt-disabled::after, .pt-dark .pt-menu-item.pt-disabled:hover::before, .pt-dark .pt-submenu > .pt-popover-open > .pt-disabled.pt-menu-item::before, .pt-dark .pt-menu-item.pt-disabled:hover::after, .pt-dark .pt-submenu > .pt-popover-open > .pt-disabled.pt-menu-item::after {\n    color: rgba(191, 204, 214, 0.5); }\n  .pt-dark .pt-menu-item.pt-disabled .pt-menu-item-label, .pt-dark .pt-menu-item.pt-disabled:hover .pt-menu-item-label, .pt-dark .pt-submenu > .pt-popover-open > .pt-disabled.pt-menu-item .pt-menu-item-label {\n    color: rgba(191, 204, 214, 0.5); }\n\n.pt-dark .pt-menu-divider,\n.pt-dark .pt-menu-header {\n  border-color: rgba(255, 255, 255, 0.15); }\n\n.pt-dark .pt-menu-header > h6 {\n  color: #f5f8fa; }\n\n.pt-label .pt-menu {\n  margin-top: 5px; }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nNavbars\n\nNavbars present useful navigation controls at the top of an application.\n\nThe `Navbar` component can have up to two groups of elements: a left-aligned group and a\nright-aligned group. These groups can contain multiple elements, which are laid out horizontally.\n\nStyleguide components.navbar\n*/\n/*\nCSS API\n\nUse the following classes to construct a navbar:\n\n- `nav.pt-navbar` &ndash; The parent element. Use a `<nav>` element for accessibility.\n- `.pt-navbar-group.pt-align-(left|right)` &ndash; Left- or right-aligned group.\n- `.pt-navbar-heading` &ndash; Larger text for your application title.\n- `.pt-navbar-divider` &ndash; Thin vertical line that can be placed between groups of elements.\n\nMarkup:\n<nav class=\"pt-navbar {{.modifier}}\">\n  <div class=\"pt-navbar-group pt-align-left\">\n    <div class=\"pt-navbar-heading\">Blueprint</div>\n    <input class=\"pt-input\" placeholder=\"Search files...\" type=\"text\" />\n  </div>\n  <div class=\"pt-navbar-group pt-align-right\">\n    <button class=\"pt-button pt-minimal pt-icon-home\">Home</button>\n    <button class=\"pt-button pt-minimal pt-icon-document\">Files</button>\n    <span class=\"pt-navbar-divider\"></span>\n    <button class=\"pt-button pt-minimal pt-icon-user\"></button>\n    <button class=\"pt-button pt-minimal pt-icon-notifications\"></button>\n    <button class=\"pt-button pt-minimal pt-icon-cog\"></button>\n  </div>\n</nav>\n\n.pt-dark - Dark theme.\n\nStyleguide components.navbar.css\n*/\n.pt-navbar {\n  position: relative;\n  z-index: 10;\n  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 1px 1px rgba(16, 22, 26, 0.2);\n  background-color: #ffffff;\n  height: 50px;\n  padding: 0 15px; }\n  .pt-navbar.pt-dark,\n  .pt-dark .pt-navbar {\n    background-color: #394b59; }\n  .pt-navbar.pt-dark {\n    box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), 0 1px 1px rgba(16, 22, 26, 0.4); }\n  .pt-dark .pt-navbar {\n    box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 1px 1px rgba(16, 22, 26, 0.4); }\n  .pt-navbar.pt-fixed-top {\n    position: fixed;\n    top: 0;\n    right: 0;\n    left: 0; }\n  .pt-navbar .pt-logo {\n    margin-right: 15px;\n    width: 20px; }\n\n.pt-navbar-heading {\n  margin-right: 15px;\n  font-size: 16px; }\n\n.pt-navbar-group {\n  display: flex;\n  align-items: center;\n  height: 50px; }\n  .pt-navbar-group.pt-align-left {\n    float: left; }\n  .pt-navbar-group.pt-align-right {\n    float: right; }\n\n.pt-navbar-divider {\n  margin: 0 10px;\n  border-left: 1px solid rgba(16, 22, 26, 0.15);\n  height: 20px; }\n  .pt-dark .pt-navbar-divider {\n    border-left-color: rgba(255, 255, 255, 0.15); }\n\n/*\nFixed to viewport top\n\nAdd the `.pt-fixed-top` class to the `.pt-navbar` to attach it to the top of the viewport using\n`position: fixed; top: 0;`. This is so-called \"sticky\" behavior: the navbar stays at the top of the\nscreen as the user scrolls through the document.\n\nThis modifier is not illustrated here because it breaks the documentation flow.\n\n<div class=\"pt-callout pt-intent-danger pt-icon-error\">\n  <h5>Body padding required</h5>\n  The fixed navbar will lie on top of your other content unless you add padding to the top of the\n  `<body>` element equal to the height of the navbar. Use the `$pt-navbar-height` Sass variable to\n  access the height of the navbar (50px).\n</div>\n\nStyleguide components.navbar.css.fixed-top\n*/\n/*\nFixed width\n\nIf your application is inside a fixed-width container (instead of spanning the entire viewport), you\ncan align the navbar to match.\n\nWrap your `.pt-navbar-group`s in an element with your desired `width` and `margin: 0 auto;` to\nhorizontally center it.\n\nMarkup:\n<nav class=\"pt-navbar pt-dark\">\n  <div style=\"margin: 0 auto; width: 480px;\"> <!-- ADD ME -->\n    <div class=\"pt-navbar-group pt-align-left\">\n      <div class=\"pt-navbar-heading\">Blueprint</div>\n    </div>\n    <div class=\"pt-navbar-group pt-align-right\">\n      <button class=\"pt-button pt-minimal pt-icon-home\">Home</button>\n      <button class=\"pt-button pt-minimal pt-icon-document\">Files</button>\n      <span class=\"pt-navbar-divider\"></span>\n      <button class=\"pt-button pt-minimal pt-icon-user\"></button>\n      <button class=\"pt-button pt-minimal pt-icon-notifications\"></button>\n      <button class=\"pt-button pt-minimal pt-icon-cog\"></button>\n    </div>\n  </div>\n</nav>\n\nStyleguide components.navbar.css.fixed-width\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nNon-ideal state\n\n[Non-ideal UI states](https://github.com/palantir/blueprint/wiki/Non-ideal-UI-states)\ninform the user that some content is unavailable. There are several types of non-ideal states,\nincluding:\n\n* blank states (when a container has just been created and has no data in it yet,\n  or when a container's contents have been intentionally removed)\n* loading states (when a container is preparing to populate with data).\n  A good practice is to show a spinner for this state, with optional explanatory text\n  below the spinner.\n* error states (when something went wrong&mdash;for instance, 404 and 500 HTTP errors).\n  In this case, a good practice is to add a call to action directing the user what to do next.\n\nStyleguide components.nonidealstate\n*/\n/*\nCSS API\n\nYou may use the provided styles without using the [React component](#components.nonidealstate.js).\nSee the example below.\n\nMarkup:\n<div class=\"pt-non-ideal-state\">\n  <div class=\"pt-non-ideal-state-visual pt-non-ideal-state-icon\">\n    <span class=\"pt-icon pt-icon-folder-open\"></span>\n  </div>\n  <h4 class=\"pt-non-ideal-state-title\">This Folder Is Empty</h4>\n  <div class=\"pt-non-ideal-state-description\">\n    Create a new file to populate the folder.\n  </div>\n</div>\n\nStyleguide components.nonidealstate.css\n*/\n/*\nJavaScript API\n\nThe `NonIdealState` component is available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#components.usage).\n\nA `NonIdealState` component's props determine the content displayed. The content should\nreflect the situation the user is in: no files found, an empty document, a 404 error, etc.\n\n@interface INonIdealStateProps\n\n@react-example NonIdealStateExample\n\nStyleguide components.nonidealstate.js\n*/\n.pt-non-ideal-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto;\n  width: 100%;\n  max-width: 400px; }\n\n.pt-non-ideal-state-visual {\n  margin-bottom: 20px; }\n\n.pt-non-ideal-state-icon .pt-icon {\n  color: rgba(92, 112, 128, 0.5);\n  font-size: 60px; }\n  .pt-dark .pt-non-ideal-state-icon .pt-icon {\n    color: rgba(191, 204, 214, 0.5); }\n\n.pt-non-ideal-state-title {\n  margin-bottom: 0; }\n\n.pt-non-ideal-state-description {\n  margin-top: 15px;\n  text-align: center; }\n\n.pt-non-ideal-state-action {\n  margin-top: 15px; }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nOverlays\n\n`Overlay` is a generic low-level component for rendering content _above_ its siblings, or above the\nentire application.\n\nIt combines a [`Portal`](#components.portal.js), which allows the JSX children to be rendered at a\ndifferent place in the DOM tree, with a\n[`CSSTransitionGroup`](https://facebook.github.io/react/docs/animation.html) to support elegant\nenter and leave transitions.\n\nAn optional \"backdrop\" element can be rendered behind the overlaid children to provide modal\nbehavior, whereby the overlay prevents interaction with anything behind it.\n\n`Overlay` is the backbone of the [`Dialog`](#components.dialog) component. In most use cases, the\n`Dialog` component should be sufficient; only use `Overlay` directly if an existing component _truly\ndoes not_ meet your needs.\n\n@react-example OverlayExample\n\nStyleguide components.overlay\n*/\n/*\nJavaScript API\n\nThe `Overlay` component is available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#components.usage).\n\n`Overlay` is a controlled component that renders its children only when `isOpen={true}`. The\noptional backdrop element will be inserted before the children if `hasBackdrop={true}`.\n\nThe `onClose` callback prop is invoked when user interaction causes the overlay to close,\nbut your application is responsible for updating the state that actually closes the overlay.\n\n<div class=\"pt-callout pt-intent-primary pt-icon-info-sign\">\n  <h5>A note about overlay content positioning</h5>\n  When rendered inline, content will automatically be set to `position: absolute` to respect\n  document flow. Otherwise, content will be set to `position: fixed` to cover the entire viewport.\n</div>\n\n```\n<div>\n    <Button text=\"Show overlay\" onClick={this.toggleOverlay} />\n    <Overlay isOpen={this.state.isOpen} onClose={this.toggleOverlay}>\n        Overlaid contents...\n    </Overlay>\n</div>\n```\n\n\n@interface IOverlayProps\n\nStyleguide components.overlay.js\n*/\n/*\nScrollable overlays\n\nOverlays rely heavily on fixed and absolute positioning. By default, a large overlay will not cause\nthe page to scroll, and any overflowing content will be hidden. Fortunately, Blueprint makes\nscrolling support very easy: simply pass `\"pt-overlay-scroll-container\"` as the Overlay `className`,\nand we'll take care of the rest.\n\n```\n<Overlay className=\"pt-overlay-scroll-container\" ... />\n```\n\nThe `Dialog` component does this automatically internally, except when it is used `inline`.\n\nStyleguide components.overlay.scroll\n*/\nbody.pt-overlay-open {\n  overflow: hidden; }\n\n.pt-overlay-backdrop {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  opacity: 1;\n  z-index: 20;\n  background-color: rgba(16, 22, 26, 0.7);\n  overflow: auto; }\n  .pt-overlay-backdrop.pt-overlay-enter, .pt-overlay-backdrop.pt-overlay-appear {\n    opacity: 0; }\n  .pt-overlay-backdrop.pt-overlay-enter-active, .pt-overlay-backdrop.pt-overlay-appear-active {\n    opacity: 1;\n    transition-property: opacity;\n    transition-duration: 200ms;\n    transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);\n    transition-delay: 0; }\n  .pt-overlay-backdrop.pt-overlay-leave {\n    opacity: 1; }\n  .pt-overlay-backdrop.pt-overlay-leave-active {\n    opacity: 0;\n    transition-property: opacity;\n    transition-duration: 200ms;\n    transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);\n    transition-delay: 0; }\n  .pt-overlay-backdrop:focus {\n    outline: none; }\n\n.pt-overlay-content {\n  position: fixed; }\n\n.pt-overlay-inline .pt-overlay-backdrop,\n.pt-overlay-inline .pt-overlay-content {\n  position: absolute; }\n\n.pt-overlay-scroll-container.pt-overlay-open {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 20;\n  overflow: auto; }\n  .pt-overlay-scroll-container.pt-overlay-open .pt-overlay-content {\n    position: absolute; }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nA mixin to generate the classes for a React CSSTransitionGroup which animates any number of CSS\nproperties at once.\n\nTransitioned properties are specificed as a map of property names to lists of (inital value, final\nvalue). For enter & appear transitions, each property will transition from its initial to its final\nvalue. For leave transitions, each property will transition in reverse, from final to initial.\n\n**Simple example:**\n`@include react-transition(\"pt-popover\", (opacity: 0 1), $before: \"&\");`\nTransition named \"pt-popover\" moves opacity from 0 to 1. `\"&\"` indicates that the\nTransition classes are expected to be applied to this element, where the mixin is invoked.\n\n**Params:**\n$name: React transitionName prop\n$properties: map of CSS property to (initial, final) values\n$duration: transition duration\n$easing: transition easing function\n$delay: transition delay\n$before: selector text to insert before transition name (often to select self: &)\n$after: selector text to insert after transiton name (to select children)\n*/\n/*\nA mixin to generate the classes for one phase of a React CSSTransitionGroup.\n`$phase` must be `appear` or `enter` or `leave`.\nIf `enter` phase is given then `appear` phase will be generated at the same time.\nIf `leave` phase is given then property values are animated in reverse, from final to initial.\n\n**Example:**\n@include react-transition-phase(pt-toast, enter, $enter-translate, $before: \"&\");\n@include react-transition-phase(pt-toast, leave, $leave-blur, $pt-transition-duration * 3, $before: \"&\");\n*/\n/*\nGiven map of properties to values, set each property to the value at the given index.\n(remember that sass indices are 1-based).\n\nExample: `each-prop((opacity: 0 1), 2)` will print \"opacity: 1\"\n*/\n/*\nFormat transition class name with all the bits.\n\"enter\" phase will include \"appear\" phase in returned name.\n*/\n/*\nPopovers\n\nPopovers display floating content next to a target element.\n\n@react-example PopoverExample\n\nStyleguide components.popover\n*/\n/*\nJavaScript API\n\nThe `Popover` component is available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#components.usage).\n\nWhen creating a popover, you must specify both:\n- its _content_, by setting the `content` prop, and\n- its _target_, as a single child element.\n\nThe target acts as the trigger for the popover. The popover's position on the page is based on the\nlocation of the target.\n\nInternally, the child of a `Popover` component is wrapped in a `<span>` and rendered inline in the\nHTML in the component's place.\n\n<div class=\"pt-callout pt-intent-warning pt-icon-warning-sign\">\n  <h5>Button targets</h5>\n  Buttons make great popover targets, but the `disabled` attribute on a `<button>` blocks all\n  events, which interferes with the popover functioning. If you need to disable a button that\n  triggers a popover, you should use [`AnchorButton`](#components.button.js.anchor-button) instead.\n  See the [callout here](#components.button.js) for more details.\n</div>\n\n```\nconst { Popover, PopoverInteractionKind, Position } = BlueprintComponents;\n\nexport class PopoverExample extends React.Component<{}, {}> {\n    public render() {\n        let popoverContent = (\n            <div>\n                <h5>Popover Title</h5>\n                <p>...</p>\n                <button className=\"pt-button pt-popover-dismiss\">Dismiss</button>\n            </div>\n        );\n\n        // popover content gets no padding by default, so we can add the\n        // .pt-popover-content-sizing class to get nice padding between\n        // the edge of the popover and our popover content. We also get\n        // a default width for our content if the popover is inline.\n        return (\n            <Popover content={popoverContent}\n                     interactionKind={PopoverInteractionKind.CLICK}\n                     popoverClassName=\"pt-popover-content-sizing\"\n                     position={Position.RIGHT}\n                     useSmartPositioning={false}>\n                <button className=\"pt-button pt-intent-primary\">Popover Target</button>\n            </Popover>\n        );\n    }\n}\n```\n\n@interface IPopoverProps\n\nWeight: -10\n\nStyleguide components.popover.js\n*/\n/*\nControlled mode\n\nIf you prefer to have more control over your popover's behavior, you can specify the `isOpen`\nproperty to use the component in __controlled mode__. You are now in charge of the component's\nstate.\n\nProviding a non-null value for `isOpen` disables all automatic interaction and instead invokes\nthe `onInteraction` callback prop any time the opened state _would have changed_ in response to\nuser interaction under the current `interactionKind`. As a result, the `isDisabled` prop is\nincompatible with `isOpen`, and an error is thrown if both are set.\n\nNote that there are cases where `onInteraction` is invoked with an unchanged open state.\nIt is important to pay attention to the value of the `nextOpenState` parameter and determine\nin your application logic whether you should care about a particular invocation (for instance,\nif the `nextOpenState` is not the same as the `Popover`'s current state).\n\n##### Example Controlled Usage\n\n```\nconst { Popover, Position } = BlueprintComponent;\n\nexport class ControlledPopoverExample extends React.Component<{}, {isOpen: boolean}> {\n    public state = {\n        isOpen: false\n    };\n\n    public render() {\n        let popoverContent = (\n            <div>\n                <h5>Popover Title</h5>\n                <p>...</p>\n                <button class=\"pt-button pt-popover-dismiss\">Close Popover</button>\n            </div>\n        );\n\n        return (\n            <Popover content={popoverContent}\n                     interactionKind={PopoverInteractionKind.CLICK}\n                     isOpen={this.state.isOpen}\n                     onInteraction={(state) => this.handleInteraction(state)}\n                     position={Position.RIGHT}\n                     useSmartPositioning={false}>\n                <button className=\"pt-button pt-intent-primary\">Popover Target</button>\n            </Popover>\n        );\n    }\n\n    private handleInteraction(nextOpenState: boolean) {\n        this.setState({ isOpen: nextOpenState });\n    }\n}\n```\n\nWeight: -10\n\nStyleguide components.popover.js.controlled\n*/\n/*\nInline popovers\n\nBy default, popover contents are rendered in a newly created element appended to `document.body`.\n\nThis works well for most layouts, because you want popovers to appear above everything else in your\napplication without having to manually adjust z-indices. For these \"detached\" popovers, we use the\n[Tether](http://github.hubspot.com/tether/) library to handle positioning popovers correctly\nrelative to their targets. Tether is great at maintaining position in complex, dynamic UIs.\n\nHowever, there are cases where it's preferable to render the popover contents inline.\n\nTake, for example, a scrolling table where certain cells have tooltips attached to them. As row\nitems go out of view, you want their tooltips to slide out of the viewport as well. This is best\naccomplished with inline popovers. Enable this feature by setting `inline={true}`.\n\nIt is also important to note that \"inline\" popovers are much more performant than \"detached\" ones,\nparticularly in response to page scrolling, because their position does not need to be recomputed on\nevery interaction.\n\nWeight: -9\n\nStyleguide components.popover.js.inline\n*/\n/*\nOpening & closing popovers\n\n<div class=\"pt-callout pt-intent-success pt-icon-info-sign\">\n  <h5>Conditionally styling popover targets</h5>\n  When a popover is open, the target has a `.pt-popover-open` class applied to it.\n  You can use this to style the target differently depending on whether the popover is open.\n</div>\n\nThe different interaction kinds specify whether the popover closes when the user interacts with the\ntarget or the rest of the document, but by default, a user interacting with a popover's *contents*\ndoes __not__ close the popover.\n\nTo enable click-to-close behavior on an element inside a popover, simply add the class\n`pt-popover-dismiss` to that element. The \"Dismiss\" button in the demo [above](#components.popover)\nhas this class. To enable this behavior on the entire popover, pass the\n`popoverClassName=\"pt-popover-dismiss\"` prop.\n\nNote that dismiss elements won't have any effect in a popover with\n`PopoverInteractionKind.HOVER_TARGET_ONLY` because there is no way to interact with the popover\ncontent itself (the popover is dismissed the moment the user mouses away from the target).\n\nStyleguide components.popover.js.closing\n*/\n/*\nModal popovers\n\nSetting the `isModal` prop to `true` will:\n\n- Render a transparent backdrop beneath the popover that covers the entire viewport and prevents\n  interaction with the document until the popover is closed. This is useful for preventing stray\n  clicks or hovers in your app when the user tries to close a popover.\n- Focus the popover when opened to allow keyboard accessibility.\n\nClicking the backdrop will:\n\n- _in uncontrolled mode_, close the popover.\n- _in controlled mode_, invoke the `onInteraction` callback with an argument of `false`.\n\nModal behavior is only available for popovers with `interactionKind={PopoverInteractionKind.CLICK}`\nand an error is thrown if used otherwise.\n\nBy default, the popover backdrop is invisible, but you can easily add your own styles to\n`.pt-popover-backdrop` to customize the appearance of the backdrop (for example, you could give it\na translucent background color, like the backdrop for the [`Dialog`](#components.dialog) component).\n\nThe backdrop element has the same opacity fade transition as the `Dialog` backdrop.\n\n<div class=\"pt-callout pt-intent-danger pt-icon-error\">\n  <h5>Dangerous edge case</h5>\n  Rendering a `<Popover isOpen={true} isModal={true}>` outside the viewport bounds can easily break\n  your application by covering the UI with an invisible non-interactive backdrop. This edge case\n  must be handled by your application code or simply avoided if possible.\n</div>\n\nStyleguide components.popover.js.modal\n*/\n/*\nSizing popovers\n\nPopovers by default have a max-width but no max-height. To constrain the height of a popover\nand make its content scrollable, set the appropriate CSS rules on `.pt-popover-content`:\n\n```css.less\n// pass \"my-popover\" to `popoverClassName` prop.\n.my-popover .pt-popover-content {\n  max-height: $pt-grid-size * 30;\n  overflow-y: auto;\n}\n```\n\nStyleguide components.popover.js.sizing\n*/\n/*\nSVG popover\n\n`SVGPopover` is a convenience component provided for SVG contexts. It is a simple wrapper around\n`Popover` that sets `rootElementTag=\"g\"`.\n\nStyleguide components.popover.js.svg\n*/\n/*\nMinimal popovers\n\nYou can create a minimal popover with the `pt-minimal` modifier: `popoverClassName=\"pt-minimal\"`.\nThis removes the arrow from the popover and makes the transitions more subtle.\n\nThis minimal style is recommended for popovers that are not triggered by an obvious action like the\nuser clicking or hovering over something. For example, a minimal popover is useful for making\ntypeahead menus where the menu appears almost instantly after the user starts typing.\n\nMinimal popovers are also useful for context menus that require quick enter and leave animations to\nsupport fast workflows. You can see an example in the [Context Menus](#components.context-menu)\ndocumentation.\n\nStyleguide components.popover.js.minimal\n*/\n.pt-popover {\n  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2), 0 8px 24px rgba(16, 22, 26, 0.2);\n  transform: scale(1);\n  display: inline-block;\n  z-index: 20;\n  border-radius: 3px;\n  /*\n  Dark theme\n\n  The `Popover` component automatically detects whether its trigger is nested inside a `.pt-dark`\n  container and applies the same class to itself. You can also explicitly apply the dark theme to\n  the React component by providing the prop `popoverClassName=\"pt-dark\"`.\n\n  As a result, any component that you place inside a `Popover` (such as a `Menu`) automatically\n  inherits the dark theme styles. Note that `Tooltip` uses `Popover` internally, so it also benefits\n  from this behavior.\n\n  This behavior can be disabled when the `Popover` is not rendered inline via the `inheritDarkTheme`\n  prop.\n\n  Weight: 10\n\n  Styleguide components.popover.js.dark\n  */ }\n  .pt-popover .pt-popover-arrow {\n    position: absolute;\n    width: 30px;\n    height: 30px; }\n    .pt-popover .pt-popover-arrow::before {\n      margin: 5px;\n      width: 20px;\n      height: 20px; }\n  .pt-tether-element-attached-bottom.pt-tether-target-attached-top > .pt-popover {\n    margin-top: -17px;\n    margin-bottom: 17px; }\n    .pt-tether-element-attached-bottom.pt-tether-target-attached-top > .pt-popover > .pt-popover-arrow {\n      bottom: -11px; }\n      .pt-tether-element-attached-bottom.pt-tether-target-attached-top > .pt-popover > .pt-popover-arrow svg {\n        transform: rotate(-90deg); }\n  .pt-tether-element-attached-left.pt-tether-target-attached-right > .pt-popover {\n    margin-left: 17px; }\n    .pt-tether-element-attached-left.pt-tether-target-attached-right > .pt-popover > .pt-popover-arrow {\n      left: -11px; }\n      .pt-tether-element-attached-left.pt-tether-target-attached-right > .pt-popover > .pt-popover-arrow svg {\n        transform: rotate(0); }\n  .pt-tether-element-attached-top.pt-tether-target-attached-bottom > .pt-popover {\n    margin-top: 17px; }\n    .pt-tether-element-attached-top.pt-tether-target-attached-bottom > .pt-popover > .pt-popover-arrow {\n      top: -11px; }\n      .pt-tether-element-attached-top.pt-tether-target-attached-bottom > .pt-popover > .pt-popover-arrow svg {\n        transform: rotate(90deg); }\n  .pt-tether-element-attached-right.pt-tether-target-attached-left > .pt-popover {\n    margin-right: 17px;\n    margin-left: -17px; }\n    .pt-tether-element-attached-right.pt-tether-target-attached-left > .pt-popover > .pt-popover-arrow {\n      right: -11px; }\n      .pt-tether-element-attached-right.pt-tether-target-attached-left > .pt-popover > .pt-popover-arrow svg {\n        transform: rotate(180deg); }\n  .pt-tether-element-attached-middle > .pt-popover > .pt-popover-arrow {\n    top: 50%;\n    transform: translateY(-50%); }\n  .pt-tether-element-attached-center > .pt-popover > .pt-popover-arrow {\n    right: 50%;\n    transform: translateX(50%); }\n  .pt-tether-element-attached-top.pt-tether-target-attached-top > .pt-popover > .pt-popover-arrow {\n    top: -0.3934px; }\n  .pt-tether-element-attached-right.pt-tether-target-attached-right > .pt-popover > .pt-popover-arrow {\n    right: -0.3934px; }\n  .pt-tether-element-attached-left.pt-tether-target-attached-left > .pt-popover > .pt-popover-arrow {\n    left: -0.3934px; }\n  .pt-tether-element-attached-bottom.pt-tether-target-attached-bottom > .pt-popover > .pt-popover-arrow {\n    bottom: -0.3934px; }\n  .pt-tether-element-attached-top.pt-tether-element-attached-left > .pt-popover {\n    transform-origin: top left; }\n  .pt-tether-element-attached-top.pt-tether-element-attached-center > .pt-popover {\n    transform-origin: top center; }\n  .pt-tether-element-attached-top.pt-tether-element-attached-right > .pt-popover {\n    transform-origin: top right; }\n  .pt-tether-element-attached-middle.pt-tether-element-attached-left > .pt-popover {\n    transform-origin: center left; }\n  .pt-tether-element-attached-middle.pt-tether-element-attached-center > .pt-popover {\n    transform-origin: center center; }\n  .pt-tether-element-attached-middle.pt-tether-element-attached-right > .pt-popover {\n    transform-origin: center right; }\n  .pt-tether-element-attached-bottom.pt-tether-element-attached-left > .pt-popover {\n    transform-origin: bottom left; }\n  .pt-tether-element-attached-bottom.pt-tether-element-attached-center > .pt-popover {\n    transform-origin: bottom center; }\n  .pt-tether-element-attached-bottom.pt-tether-element-attached-right > .pt-popover {\n    transform-origin: bottom right; }\n  .pt-popover .pt-popover-content {\n    background: #ffffff;\n    color: inherit; }\n  .pt-popover .pt-popover-arrow::before {\n    box-shadow: 1px 1px 6px rgba(16, 22, 26, 0.2); }\n  .pt-popover .pt-popover-arrow-border {\n    fill: #10161a;\n    fill-opacity: 0.1; }\n  .pt-popover .pt-popover-arrow-fill {\n    fill: #ffffff; }\n  .pt-popover-enter > .pt-popover, .pt-popover-appear > .pt-popover {\n    transform: scale(0.3); }\n  .pt-popover-enter-active > .pt-popover, .pt-popover-appear-active > .pt-popover {\n    transform: scale(1);\n    transition-property: transform;\n    transition-duration: 300ms;\n    transition-timing-function: cubic-bezier(0.54, 1.12, 0.38, 1.11);\n    transition-delay: 0; }\n  .pt-popover-leave > .pt-popover {\n    transform: scale(1); }\n  .pt-popover-leave-active > .pt-popover {\n    transform: scale(0.3);\n    transition-property: transform;\n    transition-duration: 300ms;\n    transition-timing-function: cubic-bezier(0.54, 1.12, 0.38, 1.11);\n    transition-delay: 0; }\n  .pt-popover .pt-popover-content {\n    position: relative;\n    border-radius: 3px; }\n  .pt-popover.pt-popover-content-sizing .pt-popover-content {\n    max-width: 350px;\n    padding: 20px; }\n  .pt-popover-target .pt-popover.pt-popover-content-sizing {\n    width: 350px; }\n  .pt-popover.pt-minimal {\n    margin: 0 !important; }\n    .pt-popover.pt-minimal .pt-popover-arrow {\n      display: none; }\n    .pt-popover.pt-minimal.pt-popover {\n      transform: scale(1); }\n      .pt-popover-enter > .pt-popover.pt-minimal.pt-popover, .pt-popover-appear > .pt-popover.pt-minimal.pt-popover {\n        transform: scale(1); }\n      .pt-popover-enter-active > .pt-popover.pt-minimal.pt-popover, .pt-popover-appear-active > .pt-popover.pt-minimal.pt-popover {\n        transform: scale(1);\n        transition-property: transform;\n        transition-duration: 100ms;\n        transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);\n        transition-delay: 0; }\n      .pt-popover-leave > .pt-popover.pt-minimal.pt-popover {\n        transform: scale(1); }\n      .pt-popover-leave-active > .pt-popover.pt-minimal.pt-popover {\n        transform: scale(1);\n        transition-property: transform;\n        transition-duration: 100ms;\n        transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);\n        transition-delay: 0; }\n  .pt-popover.pt-dark,\n  .pt-dark .pt-popover {\n    box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 2px 4px rgba(16, 22, 26, 0.4), 0 8px 24px rgba(16, 22, 26, 0.4); }\n    .pt-popover.pt-dark .pt-popover-content,\n    .pt-dark .pt-popover .pt-popover-content {\n      background: #30404d;\n      color: inherit; }\n    .pt-popover.pt-dark .pt-popover-arrow::before,\n    .pt-dark .pt-popover .pt-popover-arrow::before {\n      box-shadow: 1px 1px 6px rgba(16, 22, 26, 0.4); }\n    .pt-popover.pt-dark .pt-popover-arrow-border,\n    .pt-dark .pt-popover .pt-popover-arrow-border {\n      fill: #10161a;\n      fill-opacity: 0.2; }\n    .pt-popover.pt-dark .pt-popover-arrow-fill,\n    .pt-dark .pt-popover .pt-popover-arrow-fill {\n      fill: #30404d; }\n\n.pt-popover-arrow::before {\n  display: block;\n  position: absolute;\n  transform: rotate(45deg);\n  border-radius: 2px;\n  content: \"\"; }\n\n.pt-tether-pinned .pt-popover-arrow {\n  display: none; }\n\n.pt-popover-backdrop {\n  background: rgba(255, 255, 255, 0); }\n\n.pt-transition-container {\n  opacity: 1;\n  z-index: 20; }\n  .pt-transition-container.pt-popover-enter, .pt-transition-container.pt-popover-appear {\n    opacity: 0; }\n  .pt-transition-container.pt-popover-enter-active, .pt-transition-container.pt-popover-appear-active {\n    opacity: 1;\n    transition-property: opacity;\n    transition-duration: 100ms;\n    transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);\n    transition-delay: 0; }\n  .pt-transition-container.pt-popover-leave {\n    opacity: 1; }\n  .pt-transition-container.pt-popover-leave-active {\n    opacity: 0;\n    transition-property: opacity;\n    transition-duration: 100ms;\n    transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);\n    transition-delay: 0; }\n  .pt-transition-container:focus {\n    outline: none; }\n  .pt-transition-container.pt-popover-leave .pt-popover-content {\n    pointer-events: none; }\n\n.pt-popover-target {\n  display: inline-block;\n  position: relative;\n  vertical-align: top; }\n  .pt-popover-target > .pt-popover-target {\n    display: inline-block; }\n  .pt-popover-target .pt-transition-container {\n    position: absolute; }\n    .pt-popover-target .pt-transition-container.pt-tether-element-attached-bottom.pt-tether-target-attached-top {\n      bottom: 100%; }\n    .pt-popover-target .pt-transition-container.pt-tether-element-attached-left.pt-tether-target-attached-right {\n      left: 100%; }\n    .pt-popover-target .pt-transition-container.pt-tether-element-attached-top.pt-tether-target-attached-bottom {\n      top: 100%; }\n    .pt-popover-target .pt-transition-container.pt-tether-element-attached-right.pt-tether-target-attached-left {\n      right: 100%; }\n    .pt-popover-target .pt-transition-container.pt-tether-element-attached-top.pt-tether-target-attached-top {\n      top: 0; }\n    .pt-popover-target .pt-transition-container.pt-tether-element-attached-right.pt-tether-target-attached-right {\n      right: 0; }\n    .pt-popover-target .pt-transition-container.pt-tether-element-attached-bottom.pt-tether-target-attached-bottom {\n      bottom: 0; }\n    .pt-popover-target .pt-transition-container.pt-tether-element-attached-left.pt-tether-target-attached-left {\n      left: 0; }\n    .pt-popover-target .pt-transition-container.pt-tether-element-attached-middle {\n      top: 50%;\n      transform: translateY(-50%); }\n    .pt-popover-target .pt-transition-container.pt-tether-element-attached-center {\n      left: 50%;\n      transform: translateX(-50%); }\n\n.pt-button-group.pt-vertical .pt-popover-target {\n  display: block; }\n\n.pt-button-group:not(.pt-vertical) .pt-popover-target,\n.pt-button-group:not(.pt-vertical) .pt-tether-target {\n  float: left; }\n\n/*\nPortals\n\nThe `Portal` component renders its children into a new \"subtree\" outside of the current component\nhierarchy. It is essential piece of [`Overlay`](#components.overlay), responsible for ensuring that\nthe overlay contents cover the application below. In most cases you do not need to use a `Portal`\ndirectly; this documentation is provided simply for reference.\n\nStyleguide components.portal\n*/\n/*\nJavaScript API\n\nThe `Portal` component is available in the __@blueprintjs/core__ package. Make sure to review the\n[general usage docs for JS components](#components.usage).\n\nThe `Portal` component functions like a declarative `appendChild()`, or jQuery's `$.fn.appendTo()`.\nThe children of a `Portal` component are appended to the `<body>` element.\n\n`Portal` is used inside [`Overlay`](#components.overlay) to actually overlay the content on the\napplication.\n\n<div class=\"pt-callout pt-intent-warning pt-icon-warning-sign\">\n  <h5>A note about responsive layouts</h5>\n  For a single-page app, if the `<body>` is styled with `width: 100%` and `height: 100%`, a `Portal`\n  may take up extra whitespace and cause the window to undesirably scroll. To fix this, instead\n  apply `position: absolute` to the `<body>` tag.\n</div>\n\n@interface IPortalProps\n\nStyleguide components.portal.js\n*/\n.pt-portal {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0; }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nProgress\n\nBlueprint provides two ways to indicate progress: a horizontal progress bar and a circular spinner.\n\nStyleguide components.progress\n*/\n/*\nProgress bars\n\nProgress bars can indicate determinate progress towards the completion of a task or an indeterminate\nloading state.\n\nStyleguide components.progress.bar\n*/\n/*\nCSS API\n\nSet the current progress of the bar via a `width` style rule on the inner `.pt-progress-meter`\nelement. This is a very simple CSS-only component, and input validation for `width` values is\nlimited: values above `100%` appear as 100% progress and values below `0%` appear as 0%.\n\nOmitting `width` will result in an \"indeterminate\" progress meter that fills the entire bar.\n\nMarkup:\n<div class=\"pt-progress-bar {{.modifier}}\">\n  <div class=\"pt-progress-meter\" style=\"width: 25%\"></div>\n</div>\n<div class=\"pt-progress-bar pt-intent-primary {{.modifier}}\">\n  <div class=\"pt-progress-meter\" style=\"width: 50%\"></div>\n</div>\n<div class=\"pt-progress-bar pt-intent-success {{.modifier}}\">\n  <div class=\"pt-progress-meter\" style=\"width: 75%\"></div>\n</div>\n<div class=\"pt-progress-bar pt-intent-danger {{.modifier}}\">\n  <div class=\"pt-progress-meter\" style=\"width: 100%\"></div>\n</div>\n\n.pt-no-stripes   - No stripes\n.pt-no-animation - No animation\n\nStyleguide components.progress.bar.css\n*/\n/*\nJavaScript API\n\nThe `ProgressBar` component is available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#components.usage).\n\nA `ProgressBar` is a simple stateless component that renders the appropriate HTML markup.\nIt supports a `value` prop between 0 and 1 that determines the width of the progress meter.\nOmitting `value` will result in an \"indeterminate\" progress meter that fills the entire bar.\n\nNote that the CSS modifiers described in the [CSS API](#components.progress.bar.css)\nare supported via the `className` prop.\n\n@interface IProgressBarProps\n\n@react-example ProgressExample\n\nStyleguide components.progress.bar.js\n*/\n@-webkit-keyframes linear-progress-bar-stripes {\n  from {\n    background-position: 0 0; }\n  to {\n    background-position: 30px 0; } }\n\n@-moz-keyframes linear-progress-bar-stripes {\n  from {\n    background-position: 0 0; }\n  to {\n    background-position: 30px 0; } }\n\n@keyframes linear-progress-bar-stripes {\n  from {\n    background-position: 0 0; }\n  to {\n    background-position: 30px 0; } }\n\n.pt-progress-bar {\n  display: block;\n  position: relative;\n  border-radius: 40px;\n  background: rgba(92, 112, 128, 0.2);\n  width: 100%;\n  height: 8px;\n  overflow: hidden; }\n  .pt-progress-bar .pt-progress-meter {\n    background-color: rgba(255, 255, 255, 0.2);\n    background-image: -webkit-linear-gradient(-225deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%);\n    background-image: linear-gradient(-45deg,rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%);\n    display: inline-block;\n    position: absolute;\n    border-radius: 40px;\n    background-color: rgba(92, 112, 128, 0.8);\n    background-size: 30px 30px;\n    width: 100%;\n    height: 100%;\n    transition: width 200ms cubic-bezier(0.4, 1, 0.75, 0.9); }\n  .pt-progress-bar:not(.pt-no-animation):not(.pt-no-stripes) .pt-progress-meter {\n    -webkit-animation: linear-progress-bar-stripes 300ms linear infinite reverse;\n    -moz-animation: linear-progress-bar-stripes 300ms linear infinite reverse;\n    animation: linear-progress-bar-stripes 300ms linear infinite reverse; }\n  .pt-progress-bar.pt-no-stripes .pt-progress-meter {\n    background-image: none; }\n\n.pt-dark .pt-progress-bar,\n.pt-progress-bar.pt-dark {\n  background: rgba(16, 22, 26, 0.5); }\n  .pt-dark .pt-progress-bar .pt-progress-meter,\n  .pt-progress-bar.pt-dark .pt-progress-meter {\n    background-color: #8a9ba8; }\n\n.pt-progress-bar.pt-intent-primary .pt-progress-meter {\n  background-color: #137cbd; }\n\n.pt-progress-bar.pt-intent-success .pt-progress-meter {\n  background-color: #0f9960; }\n\n.pt-progress-bar.pt-intent-warning .pt-progress-meter {\n  background-color: #d9822b; }\n\n.pt-progress-bar.pt-intent-danger .pt-progress-meter {\n  background-color: #db3737; }\n\n/*\nSkeletons\n\nSkeletons allow you to show a loading state that mimics the shape of your yet-to-load content.\n\nWeight: 1\n\nStyleguide components.progress.skeleton\n*/\n/*\nCSS API\n\nApply the class `.pt-skeleton` to elements that you would like to cover up with a loading animation.\nThe skeleton inherits the dimensions of whatever element the class is applied to. This means that\nwhen using skeletons to show loading text, you should use some sort of placeholder text that is\napproximately the length of your expected text.\n\n<div class=\"pt-callout pt-intent-warning pt-icon-warning-sign\">\n  <h5>Manually disable focusable elements</h5>\n  When using the `.pt-skeleton` class on focusable elements such as inputs and buttons, be sure to\n  disable the element, via either the `disabled` or `tabindex=\"-1\"` attributes. Failing to do so\n  will allow these skeleton elements to be focused when they shouldn't be.\n</div>\n\nMarkup:\n<div class=\"pt-card\">\n  <h5><a class=\"{{.modifier}}\" href=\"#\" tabindex=\"-1\">Card heading</a></h5>\n  <p class=\"{{.modifier}}\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget tortor felis.\n    Fusce dapibus metus in dapibus mollis. Quisque eget ex diam.\n  </p>\n  <button type=\"button\" class=\"pt-button {{.modifier}}\" tabindex=\"-1\">Submit</button>\n</div>\n\n.pt-skeleton - Covers up your element with a skeleton animation.\n\nStyleguide components.progress.skeleton.css\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n@keyframes glow {\n  0%,\n  100% {\n    border-color: rgba(167, 182, 194, 0.2);\n    background-color: rgba(167, 182, 194, 0.2); }\n  50% {\n    border-color: rgba(92, 112, 128, 0.2);\n    background-color: rgba(92, 112, 128, 0.2); } }\n\n/* stylelint-disable declaration-no-important */\n.pt-skeleton {\n  border-color: rgba(167, 182, 194, 0.2) !important;\n  border-radius: 2px;\n  box-shadow: none !important;\n  background: rgba(167, 182, 194, 0.2) !important;\n  background-clip: padding-box !important;\n  cursor: default;\n  color: transparent !important;\n  animation: 2000ms linear infinite glow;\n  pointer-events: none;\n  user-select: none; }\n\n/* stylelint-enable declaration-no-important */\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nSliders\n\nA slider is a numeric input for choosing one or two numbers between lower and upper bounds.\nThe `Slider` component also has a labeled axis that supports custom formatting.\n\nTo adjust a slider value, the user clicks and drags a handle or clicks the axis to move the nearest\nhandle to that spot. Users can also use arrow keys on the keyboard to adjust the value.\n\nUse `Slider` for choosing a single value and `RangeSlider` for choosing two values.\n\nStyleguide components.slider\n*/\n/*\nSingle slider\n\n@react-example SliderExample\n\nWeight: -1\n\nStyleguide components.slider.single\n*/\n/*\nJavaScript API\n\nThe `Slider` component is available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#components.usage).\n\n`Slider` is a controlled component, so the `value` prop determines its current appearance. Provide\nan `onChange` handler to receive updates and an `onRelease` handler to determine when the user has\nstopped interacting with the slider.\n\n@interface ISliderProps\n\nStyleguide components.slider.single.js\n*/\n.pt-slider {\n  position: relative;\n  cursor: default;\n  width: 100%;\n  min-width: 150px;\n  height: 40px;\n  outline: none;\n  user-select: none; }\n  .pt-slider:hover {\n    cursor: pointer; }\n  .pt-slider:active {\n    cursor: grabbing; }\n  .pt-slider.pt-disabled {\n    opacity: 0.5;\n    cursor: not-allowed; }\n  .pt-slider.pt-slider-unlabeled {\n    height: 16px; }\n\n.pt-slider-track,\n.pt-slider-progress {\n  position: absolute;\n  top: 5px;\n  right: 0;\n  left: 0;\n  border-radius: 3px;\n  background: rgba(92, 112, 128, 0.2);\n  height: 6px; }\n  .pt-dark .pt-slider-track, .pt-dark\n  .pt-slider-progress {\n    background: rgba(16, 22, 26, 0.5); }\n\n.pt-slider-progress,\n.pt-dark .pt-slider-progress {\n  background: #137cbd; }\n\n.pt-slider-handle {\n  background: #f5f8fa;\n  background: -webkit-linear-gradient( top , #ffffff, rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #f5f8fa;\n  background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #f5f8fa;\n  border-color: rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.1) rgba(16, 22, 26, 0.17) rgba(16, 22, 26, 0.1);\n  box-shadow: 0 1px 1px rgba(16, 22, 26, 0.1);\n  background-clip: padding-box;\n  color: #182026;\n  position: absolute;\n  top: 0;\n  left: 0;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 3px;\n  cursor: pointer;\n  width: 16px;\n  height: 16px; }\n  .pt-slider-handle:hover {\n    background: #ebf1f5;\n    background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #ebf1f5;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #ebf1f5;\n    border-color: rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.27) rgba(16, 22, 26, 0.2);\n    box-shadow: 0 1px 1px rgba(16, 22, 26, 0.1);\n    background-clip: padding-box; }\n  .pt-slider-handle:active {\n    border-color: rgba(16, 22, 26, 0.35) rgba(16, 22, 26, 0.25) rgba(16, 22, 26, 0.25) rgba(16, 22, 26, 0.25);\n    box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.1);\n    background-color: #ced9e0;\n    background-image: none; }\n  .pt-slider-handle:disabled {\n    outline: none;\n    border-color: transparent;\n    box-shadow: none;\n    background-clip: border-box;\n    background-color: rgba(206, 217, 224, 0.5);\n    background-image: none;\n    cursor: not-allowed;\n    color: rgba(92, 112, 128, 0.5); }\n  .pt-slider-handle:focus {\n    z-index: 1; }\n  .pt-slider-handle:hover {\n    background: #ebf1f5;\n    background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #ebf1f5;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #ebf1f5;\n    border-color: rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.2) rgba(16, 22, 26, 0.27) rgba(16, 22, 26, 0.2);\n    box-shadow: 0 1px 1px rgba(16, 22, 26, 0.1);\n    background-clip: padding-box;\n    z-index: 2;\n    cursor: grab; }\n  .pt-slider-handle.pt-active {\n    border-color: rgba(16, 22, 26, 0.35) rgba(16, 22, 26, 0.25) rgba(16, 22, 26, 0.25) rgba(16, 22, 26, 0.25);\n    box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.1);\n    background-color: #ced9e0;\n    background-image: none;\n    cursor: grabbing; }\n  .pt-disabled .pt-slider-handle {\n    border-color: #bfccd6;\n    box-shadow: none;\n    background: #bfccd6;\n    pointer-events: none; }\n  .pt-dark .pt-slider-handle {\n    background: rgba(255, 255, 255, 0.1);\n    background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06)) left no-repeat;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06)) left no-repeat;\n    border-color: rgba(16, 22, 26, 0.6);\n    box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2);\n    background-clip: padding-box;\n    color: #f5f8fa; }\n    .pt-dark .pt-slider-handle:hover, .pt-dark .pt-slider-handle:active {\n      color: #f5f8fa; }\n    .pt-dark .pt-slider-handle:hover {\n      background: rgba(255, 255, 255, 0.1);\n      background: -webkit-linear-gradient( top , rgba(16, 22, 26, 0.1), rgba(16, 22, 26, 0.2)) left no-repeat, center no-repeat rgba(255, 255, 255, 0.1);\n      background: linear-gradient(to bottom, rgba(16, 22, 26, 0.1), rgba(16, 22, 26, 0.2)) left no-repeat, center no-repeat rgba(255, 255, 255, 0.1);\n      border-color: rgba(16, 22, 26, 0.8);\n      box-shadow: 0 1px 1px rgba(16, 22, 26, 0.2);\n      background-clip: padding-box; }\n    .pt-dark .pt-slider-handle:active {\n      box-shadow: inset 0 1px 1px rgba(16, 22, 26, 0.2);\n      background-color: rgba(16, 22, 26, 0.1);\n      background-image: none; }\n    .pt-dark .pt-slider-handle:disabled {\n      border-color: rgba(206, 217, 224, 0.1);\n      box-shadow: none;\n      background-color: rgba(206, 217, 224, 0.1);\n      background-image: none;\n      color: rgba(191, 204, 214, 0.5); }\n    .pt-dark .pt-slider-handle .pt-button-spinner .pt-spinner-head {\n      background: rgba(16, 22, 26, 0.5);\n      stroke: #8a9ba8; }\n    .pt-dark .pt-slider-handle, .pt-dark .pt-slider-handle:hover {\n      background-color: #394b59; }\n    .pt-dark .pt-slider-handle.pt-active {\n      background-color: #293742; }\n  .pt-dark .pt-disabled .pt-slider-handle {\n    border-color: #5c7080;\n    box-shadow: none;\n    background: #5c7080; }\n  .pt-slider-handle .pt-slider-label {\n    transform: translate(-50%, 19px);\n    margin-left: 7px;\n    border-radius: 3px;\n    box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2), 0 8px 24px rgba(16, 22, 26, 0.2);\n    background: #394b59;\n    color: #f5f8fa; }\n    .pt-dark .pt-slider-handle .pt-slider-label {\n      box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 2px 4px rgba(16, 22, 26, 0.4), 0 8px 24px rgba(16, 22, 26, 0.4);\n      background: #e1e8ed;\n      color: #394b59; }\n    .pt-disabled .pt-slider-handle .pt-slider-label {\n      box-shadow: none; }\n\n.pt-slider-label {\n  display: inline-block;\n  padding: 2px 5px;\n  vertical-align: top;\n  line-height: 1;\n  font-size: 12px;\n  position: absolute;\n  transform: translate(-50%, 20px); }\n\n/*\nRange slider\n\n`RangeSlider` allows the user to choose a range between upper and lower bounds. The component\nfunctions identically to `Slider` except that the user can select both ends of the range. It exposes\nits selected value as `[number, number]`: a two-element array with minimum and maximum range bounds.\n\n@react-example RangeSliderExample\n\nStyleguide components.slider.range\n*/\n/*\nJavaScript API\n\nThe `RangeSlider` component is available in the __@blueprintjs/core__ package. Make sure to review\nthe [general usage docs for JS components](#components.usage).\n\n`RangeSlider` is a controlled component, so the `value` prop determines its current appearance.\nProvide an `onChange` handler to receive updates and an `onRelease` handler to determine when the\nuser has stopped interacting with the slider.\n\n@interface IRangeSliderProps\n\nStyleguide components.slider.range.js\n*/\n.pt-range-slider .pt-slider-handle {\n  width: 8px; }\n  .pt-range-slider .pt-slider-handle:first-of-type {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0; }\n  .pt-range-slider .pt-slider-handle:last-of-type {\n    margin-left: 7px;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0; }\n    .pt-range-slider .pt-slider-handle:last-of-type .pt-slider-label {\n      margin-left: 0; }\n\n.pt-range-slider .pt-slider-progress {\n  border-radius: 0; }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nSpinners\n\nSpinners indicate indeterminate progress.\n\nStyleguide components.progress.spinner\n*/\n/*\nCSS API\n\nYou can create spinners manually by inserting their whole markup into your HTML.\nSpinners created via markup use same modifier classes as the\n[React `Spinner` component](#components.progress.spinner.js).\n\nMarkup:\n<div class=\"pt-spinner {{.modifier}}\">\n  <div class=\"pt-spinner-svg-container\">\n    <svg viewBox=\"0 0 100 100\">\n      <path class=\"pt-spinner-track\" d=\"M 50,50 m 0,-44.5 a 44.5,44.5 0 1 1 0,89 a 44.5,44.5 0 1 1 0,-89\"></path>\n      <path class=\"pt-spinner-head\" d=\"M 94.5 50 A 44.5 44.5 0 0 0 50 5.5\"></path>\n    </svg>\n  </div>\n</div>\n\n.pt-small - Small spinner\n.pt-large - Large spinner\n\nStyleguide components.progress.spinner.css\n*/\n/*\nJavaScript API\n\nThe `Spinner` component is available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#components.usage).\n\nA `Spinner` is a simple stateless component that renders HTML/SVG markup.\nIt supports a `value` prop between 0 and 1 that determines how much of the track is filled by the\nhead. When this prop is defined, the spinner head will not spin but it will smoothly animate as\n`value` updates. Omitting `value` will result in an \"indeterminate\" spinner where the head spins\nindefinitely (this is the default appearance).\n\nNote that the CSS modifiers described in the [CSS API](#components.progress.spinner.css)\nare supported via the `className` prop.\n\n<div class=\"pt-callout pt-intent-warning pt-icon-warning-sign\">\n  <h5>IE11 compatibility note</h5>\n  IE11 [does not support CSS transitions on SVG elements][msdn-css-svg] so spinners with known\n  `value` will not smoothly transition as `value` changes. Indeterminate spinners still animate\n  correctly because they rely on CSS animations, not transitions.\n</div>\n\n@interface ISpinnerProps\n\n@react-example SpinnerExample\n\n[msdn-css-svg]: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/csstransitionsforsvgelements/?q=svg\n\nStyleguide components.progress.spinner.js\n*/\n/*\nSVG spinner\n\nUse the `SVGSpinner` component to render a spinner inside an SVG element.\n\n<div class=\"pt-callout pt-intent-primary pt-icon-info-sign\">\n  <h5>Sizing note</h5>\n  Because of the way SVG elements are sized, you may need to manually scale the spinner inside your\n  SVG to make it an appropriate size.\n</div>\n\nStyleguide components.progress.spinner.js.svg\n*/\n.pt-spinner:not(.pt-svg-spinner) {\n  width: 50px; }\n  .pt-spinner:not(.pt-svg-spinner) .pt-spinner-svg-container {\n    animation-duration: 400ms; }\n\n.pt-spinner.pt-svg-spinner {\n  animation-duration: 400ms; }\n\n.pt-spinner .pt-svg-spinner-transform-group {\n  transform: scale(0.5); }\n\n.pt-spinner path {\n  stroke-width: 5; }\n\n.pt-spinner path {\n  fill-opacity: 0; }\n\n.pt-spinner .pt-spinner-head {\n  transition: stroke-dashoffset 200ms cubic-bezier(0.4, 1, 0.75, 0.9);\n  stroke: rgba(92, 112, 128, 0.8);\n  stroke-linecap: round; }\n\n.pt-spinner .pt-spinner-track {\n  stroke: rgba(92, 112, 128, 0.2); }\n\n.pt-spinner.pt-small:not(.pt-svg-spinner) {\n  width: 24px; }\n  .pt-spinner.pt-small:not(.pt-svg-spinner) .pt-spinner-svg-container {\n    animation-duration: 400ms; }\n\n.pt-spinner.pt-small.pt-svg-spinner {\n  animation-duration: 400ms; }\n\n.pt-spinner.pt-small .pt-svg-spinner-transform-group {\n  transform: scale(0.24); }\n\n.pt-spinner.pt-small path {\n  stroke-width: 12; }\n\n.pt-spinner.pt-large:not(.pt-svg-spinner) {\n  width: 100px; }\n  .pt-spinner.pt-large:not(.pt-svg-spinner) .pt-spinner-svg-container {\n    animation-duration: 450ms; }\n\n.pt-spinner.pt-large.pt-svg-spinner {\n  animation-duration: 450ms; }\n\n.pt-spinner.pt-large .pt-svg-spinner-transform-group {\n  transform: scale(1); }\n\n.pt-spinner.pt-large path {\n  stroke-width: 3; }\n\n.pt-spinner:not(.pt-svg-spinner) {\n  display: inline-block; }\n  .pt-spinner:not(.pt-svg-spinner) .pt-spinner-svg-container {\n    position: relative;\n    width: 100%;\n    height: 0;\n    padding: 0;\n    padding-bottom: 100%;\n    animation: pt-spinner-animation 400ms linear infinite; }\n  .pt-spinner:not(.pt-svg-spinner).pt-no-spin .pt-spinner-svg-container {\n    animation: none; }\n  .pt-spinner:not(.pt-svg-spinner) svg {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%; }\n\n.pt-svg-spinner {\n  transform-origin: center;\n  animation: pt-spinner-animation 400ms linear infinite; }\n  .pt-svg-spinner.pt-no-spin {\n    animation: none; }\n\n.pt-svg-spinner-transform-group {\n  transform-origin: center; }\n\n.pt-dark .pt-spinner .pt-spinner-head {\n  stroke: #8a9ba8; }\n\n.pt-dark .pt-spinner .pt-spinner-track {\n  stroke: rgba(16, 22, 26, 0.5); }\n\n.pt-spinner.pt-intent-primary .pt-spinner-head {\n  stroke: #137cbd; }\n\n.pt-spinner.pt-intent-success .pt-spinner-head {\n  stroke: #0f9960; }\n\n.pt-spinner.pt-intent-warning .pt-spinner-head {\n  stroke: #d9822b; }\n\n.pt-spinner.pt-intent-danger .pt-spinner-head {\n  stroke: #db3737; }\n\n@keyframes pt-spinner-animation {\n  from {\n    transform: rotate(0deg); }\n  to {\n    transform: rotate(360deg); } }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nTable (HTML)\n\nThis component adds Blueprint styling to native HTML tables.\n\n<div class=\"pt-callout pt-intent-primary pt-icon-info-sign\">\n  <h5>This is not @blueprintjs/table</h5>\n  This table component is a simple CSS-only skin for HTML `<table>` elements.\n  It is ideal for basic static tables. If you're looking for more complex\n  spreadsheet-like features, check out [**@blueprintjs/table**](#components.table-js).\n</div>\n\nStyleguide components.table\n*/\n/*\nCSS API\n\nApply the `pt-table` class to a `<table>` element. You can apply modifiers as additional classes.\n\nMarkup:\n<table class=\"pt-table {{.modifier}}\">\n  <thead>\n    <th>Project</th>\n    <th>Description</th>\n    <th>Technologies</th>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Blueprint</td>\n      <td>CSS framework and UI toolkit</td>\n      <td>Sass, TypeScript, React</td>\n    </tr>\n    <tr>\n      <td>TSLint</td>\n      <td>Static analysis linter for TypeScript</td>\n      <td>TypeScript</td>\n    </tr>\n    <tr>\n      <td>Plottable</td>\n      <td>Composable charting library built on top of D3</td>\n      <td>SVG, TypeScript, D3</td>\n    </tr>\n  </tbody>\n</table>\n\n.pt-condensed - Condensed appearance\n.pt-striped   - Striped appearance\n.pt-bordered  - Bordered appearance\n.pt-interactive  - Enables hover styles on rows\n\nStyleguide components.table.css\n*/\ntable.pt-table {\n  border-spacing: 0;\n  font-size: 14px; }\n  table.pt-table th,\n  table.pt-table td {\n    padding: 11px;\n    vertical-align: top;\n    text-align: left; }\n  table.pt-table th {\n    color: #182026;\n    font-weight: 600; }\n  table.pt-table td {\n    color: #182026; }\n  table.pt-table tbody tr:first-child td {\n    box-shadow: inset 0 1px 0 0 rgba(16, 22, 26, 0.15); }\n  table.pt-table.pt-condensed th,\n  table.pt-table.pt-condensed td {\n    padding-top: 6px;\n    padding-bottom: 6px; }\n  table.pt-table.pt-striped tbody tr:nth-child(odd) td {\n    background: rgba(191, 204, 214, 0.2); }\n  table.pt-table.pt-bordered th:not(:first-child) {\n    box-shadow: inset 1px 0 0 0 rgba(16, 22, 26, 0.15); }\n  table.pt-table.pt-bordered tbody tr td {\n    box-shadow: inset 0 1px 0 0 rgba(16, 22, 26, 0.15); }\n    table.pt-table.pt-bordered tbody tr td:not(:first-child) {\n      box-shadow: inset 1px 1px 0 0 rgba(16, 22, 26, 0.15); }\n  table.pt-table.pt-bordered.pt-striped tbody tr:not(:first-child) td {\n    box-shadow: none; }\n    table.pt-table.pt-bordered.pt-striped tbody tr:not(:first-child) td:not(:first-child) {\n      box-shadow: inset 1px 0 0 0 rgba(16, 22, 26, 0.15); }\n  table.pt-table.pt-interactive tbody tr:hover td {\n    background-color: rgba(191, 204, 214, 0.4);\n    cursor: pointer; }\n  .pt-dark table.pt-table th {\n    color: #f5f8fa; }\n  .pt-dark table.pt-table td {\n    color: #f5f8fa; }\n  .pt-dark table.pt-table tbody tr:first-child td {\n    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15); }\n  .pt-dark table.pt-table.pt-striped tbody tr:nth-child(odd) td {\n    background: rgba(92, 112, 128, 0.15); }\n  .pt-dark table.pt-table.pt-bordered th:not(:first-child) {\n    box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.15); }\n  .pt-dark table.pt-table.pt-bordered tbody tr td {\n    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15); }\n    .pt-dark table.pt-table.pt-bordered tbody tr td:not(:first-child) {\n      box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.15); }\n  .pt-dark table.pt-table.pt-bordered.pt-striped tbody tr:not(:first-child) td {\n    box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.15); }\n    .pt-dark table.pt-table.pt-bordered.pt-striped tbody tr:not(:first-child) td:first-child {\n      box-shadow: none; }\n  .pt-dark table.pt-table.pt-interactive tbody tr:hover td {\n    background-color: rgba(92, 112, 128, 0.3);\n    cursor: pointer; }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nTabs\n\nTabs allow the user to switch between panels of content.\n\nStyleguide components.tabs\n*/\n/*\nCSS API\n\nIn addition to the [JavaScript API](#components.tabs.js), Blueprint also offers tab styles with the\nclass `pt-tabs`. You should add the proper accessibility attributes (`role`, `aria-selected`, and\n`aria-hidden`) if you choose to implement tabs with CSS.\n\n`.pt-tab-panel` elements with `aria-hidden=\"true\"` are hidden automatically by the Blueprint CSS.\nYou may also simply omit hidden tabs from your markup to improve performance (the `Tabs`\nJavaScript component does this by default).\n\nMarkup:\n<div class=\"pt-tabs\">\n    <ul class=\"pt-tab-list {{.modifier}}\" role=\"tablist\">\n        <li class=\"pt-tab\" role=\"tab\" aria-selected=\"true\">Selected tab</li>\n        <li class=\"pt-tab\" role=\"tab\">Another tab</li>\n        <li class=\"pt-tab\" role=\"tab\" aria-disabled=\"true\">Disabled tab</li>\n    </ul>\n    <div class=\"pt-tab-panel\" role=\"tabpanel\">Selected panel</div>\n    <div class=\"pt-tab-panel\" role=\"tabpanel\" aria-hidden=\"true\">Another panel</div>\n    <div class=\"pt-tab-panel\" role=\"tabpanel\" aria-hidden=\"true\">Disabled panel</div>\n</div>\n\n.pt-large - Large tabs\n\nStyleguide components.tabs.css\n*/\n/*\nJavaScript API\n\nThe `Tabs`, `TabList`, `Tab`, and `TabPanel` components are available in the __@blueprintjs/core__\npackage. Make sure to review the [general usage docs for JS components](#components.usage).\n\nFour components are necessary to render tabs: `Tabs`, `TabList`, `Tab`, and `TabPanel`.\n\nFor performance reasons, only the currently active `TabPanel` is rendered into the DOM. When the\nuser switches tabs, data stored in the DOM is lost. This is not an issue in React applications\nbecause of how the library manages the virtual DOM for you.\n\n### Sample Usage\n\n```\n<Tabs>\n    <TabList>\n        <Tab>First tab</Tab>\n        <Tab>Second tab</Tab>\n        <Tab>Third tab</Tab>\n        <Tab isDisabled={true}>Fourth tab</Tab>\n    </TabList>\n    <TabPanel>\n        First panel\n    </TabPanel>\n    <TabPanel>\n        Second panel\n    </TabPanel>\n    <TabPanel>\n        Third panel\n    </TabPanel>\n    <TabPanel>\n        Fourth panel\n    </TabPanel>\n</Tabs>\n```\n\nEvery component accepts a `className` prop that can be used to set additional classes on the\ncomponent's root element. You can get larger tabs by using the `pt-large` class on `TabList`.\n\nYou can use the `Tabs` API in controlled or uncontrolled mode. The props you supply will differ\nbetween these approaches.\n\n@react-example TabsExample\n\nStyleguide components.tabs.js\n*/\n/*\nTabs props\n\n@interface ITabsProps\n\nStyleguide components.tabs.js.tabs\n*/\n/*\nTab props\n\n@interface ITabProps\n\nStyleguide components.tabs.js.tab\n*/\n/*\nUsage with React Router\n\nOften, you'll want to link tab navigation to overall app navigation, including updating the URL.\n[react-router](https://github.com/reactjs/react-router) is the standard routing solution for React\napplications. Here's how you might configure tabs to work with it:\n\n```\nimport { render } from \"react-dom\";\nimport { Router, Route } from \"react-router\";\nimport { Tabs, TabList, Tab, TabPanel } from \"@blueprintjs/core\";\n\nconst App = () => { ... };\n\n// keys are necessary in JSX.Element lists to keep React happy\nconst contents = [\n    <TabList key={0}>\n        <Tab>Home</Tab>\n        <Tab>Projects</Tab>\n    </TabList>,\n    <TabPanel key={1}>\n        home things\n    </TabPanel>,\n    <TabPanel key={2}>\n        projects things\n    </TabPanel>,\n];\n\n// using SFCs from TS 1.8, but easy to do without them\nexport const Home = () => <Tabs selectedTabIndex={0}>{contents}</Tabs>;\nexport const Projects = () => <Tabs selectedTabIndex={1}>{contents}</Tabs>;\n\nrender(\n    <Router path=\"/\" component={App}>\n        <Route path=\"home\" component={Home}/>\n        <Route path=\"projects\" component={Projects}/>\n    </Router>,\n    document.querySelector(\"#app\")\n);\n```\n\nWeight: 3\n\nStyleguide components.tabs.js.router\n*/\n.pt-tabs.pt-vertical {\n  display: flex; }\n  .pt-tabs.pt-vertical > .pt-tab-list {\n    flex-direction: column;\n    align-items: flex-start; }\n    .pt-tabs.pt-vertical > .pt-tab-list .pt-tab {\n      width: 100%;\n      padding: 0 10px; }\n    .pt-tabs.pt-vertical > .pt-tab-list .pt-tab-indicator-wrapper .pt-tab-indicator {\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      border-radius: 3px;\n      background-color: rgba(19, 124, 189, 0.2);\n      height: auto; }\n  .pt-tabs.pt-vertical > .pt-tab-panel {\n    margin-top: 0;\n    padding-left: 20px; }\n\n.pt-tab-list {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: flex-end;\n  position: relative;\n  margin: 0;\n  border: none;\n  padding: 0;\n  list-style: none; }\n  .pt-tab-list.pt-large .pt-tab {\n    line-height: 40px;\n    font-size: 16px; }\n\n.pt-tab {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  word-wrap: normal;\n  flex: 0 0 auto;\n  position: relative;\n  cursor: pointer;\n  max-width: 100%;\n  vertical-align: top;\n  line-height: 30px;\n  color: #182026;\n  font-size: 14px; }\n  .pt-tab-indicator-wrapper ~ .pt-tab {\n    box-shadow: none !important; }\n  .pt-tab:not(:last-of-type) {\n    margin-right: 20px; }\n  .pt-tab[aria-disabled=\"true\"] {\n    cursor: not-allowed;\n    color: rgba(92, 112, 128, 0.5); }\n  .pt-tab[aria-selected=\"true\"] {\n    border-radius: 0;\n    box-shadow: inset 0 -3px 0 #106ba3; }\n  .pt-tab[aria-selected=\"true\"], .pt-tab:not([aria-disabled=\"true\"]):hover {\n    color: #106ba3; }\n  .pt-tab:focus {\n    -moz-outline-radius: 0; }\n\n.pt-tab-panel {\n  margin-top: 20px; }\n  .pt-tab-panel[aria-hidden=\"true\"] {\n    display: none; }\n\n.pt-tab-indicator-wrapper {\n  position: absolute;\n  top: 0;\n  left: 0;\n  transform: translateX(0), translateY(0);\n  transition: height, transform, width;\n  transition-duration: 200ms;\n  transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);\n  pointer-events: none; }\n  .pt-tab-indicator-wrapper .pt-tab-indicator {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: #106ba3;\n    height: 3px; }\n  .pt-tab-indicator-wrapper.pt-no-animation {\n    transition: none; }\n\n.pt-dark .pt-tab {\n  color: #f5f8fa; }\n  .pt-dark .pt-tab[aria-disabled=\"true\"] {\n    color: rgba(191, 204, 214, 0.5); }\n  .pt-dark .pt-tab[aria-selected=\"true\"] {\n    box-shadow: inset 0 -3px 0 #2b95d6; }\n  .pt-dark .pt-tab[aria-selected=\"true\"], .pt-dark .pt-tab:not([aria-disabled=\"true\"]):hover {\n    color: #2b95d6; }\n\n.pt-dark .pt-tab-indicator {\n  background-color: #2b95d6; }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nTags\n\nTags are great for lists of strings.\n\nStyleguide components.tag\n*/\n/*\nCSS API\n\nAn optional \"remove\" button can be added inside a tag as a `button.pt-tag-remove`. Also add the\nclass `.pt-tag-removable` to the `.pt-tag` itself to adjust padding. The button is a separate\nelement to support interaction handlers in your framework of choice.\n\nA simple `.pt-tag` without the remove button can easily function as a badge.\n\nMarkup:\n<p>\n  <span class=\"pt-tag {{.modifier}}\">125</span>\n  <span class=\"pt-tag {{.modifier}}\">Done</span>\n  <span class=\"pt-tag pt-tag-removable {{.modifier}}\">\n    Tracking\n    <button class=\"pt-tag-remove\"></button>\n  </span>\n  <span class=\"pt-tag pt-tag-removable {{.modifier}}\">\n    Crushed\n    <button class=\"pt-tag-remove\"></button>\n  </span>\n</p>\n<span class=\"pt-tag pt-tag-removable {{.modifier}}\">\n  A rather long string of text that wraps to multiple lines\n  demonstrates the position of the remove button.\n  <button class=\"pt-tag-remove\"></button>\n</span>\n\n.pt-large - Large\n.pt-round - Rounded corners, ideal for badges\n.pt-intent-primary - Primary intent\n.pt-intent-success - Success intent\n.pt-intent-warning - Warning intent\n.pt-intent-danger  - Danger intent\n\nStyleguide components.tag.css\n*/\n.pt-tag {\n  display: inline-block;\n  position: relative;\n  border: none;\n  border-radius: 3px;\n  box-shadow: none;\n  background: #5c7080;\n  min-width: 20px;\n  padding: 2px 6px;\n  line-height: 16px;\n  color: #f5f8fa;\n  font-size: 12px;\n  /*\n  Minimal tags\n\n  Add the `.pt-minimal` modifier for a lighter tag appearance. The translucent background color\n  will adapt to its container's background color.\n\n  Markup:\n  <div class=\"pt-tag pt-minimal {{.modifier}}\">125</div>\n  <div class=\"pt-tag pt-minimal {{.modifier}}\">Done</div>\n  <div class=\"pt-tag pt-minimal pt-tag-removable {{.modifier}}\">\n    Tracking\n    <button class=\"pt-tag-remove\"></button>\n  </div>\n\n  .pt-large - Large\n  .pt-round - Rounded corners, ideal for badges\n  .pt-intent-primary - Primary intent\n  .pt-intent-success - Success intent\n  .pt-intent-warning - Warning intent\n  .pt-intent-danger  - Danger intent\n\n  Styleguide components.tag.css.minimal\n  */ }\n  .pt-tag.pt-round {\n    border-radius: 10px; }\n  .pt-dark .pt-tag:not([class*=\"pt-intent-\"]) {\n    background: #bfccd6;\n    color: #182026; }\n  .pt-tag.pt-tag-removable {\n    padding-right: 20px; }\n  .pt-tag.pt-intent-primary {\n    background: #137cbd;\n    color: #ffffff; }\n  .pt-tag.pt-intent-success {\n    background: #0f9960;\n    color: #ffffff; }\n  .pt-tag.pt-intent-warning {\n    background: #d9822b;\n    color: #ffffff; }\n  .pt-tag.pt-intent-danger {\n    background: #db3737;\n    color: #ffffff; }\n  .pt-tag.pt-large,\n  .pt-large .pt-tag {\n    min-width: 30px;\n    padding: 5px 10px;\n    line-height: 20px;\n    font-size: 14px; }\n    .pt-tag.pt-large.pt-round,\n    .pt-large .pt-tag.pt-round {\n      border-radius: 15px; }\n    .pt-tag.pt-large.pt-tag-removable,\n    .pt-large .pt-tag.pt-tag-removable {\n      padding-right: 30px; }\n  .pt-tag.pt-minimal:not([class*=\"pt-intent-\"]) {\n    background: rgba(138, 155, 168, 0.2);\n    color: #182026; }\n    .pt-dark .pt-tag.pt-minimal:not([class*=\"pt-intent-\"]) {\n      background: rgba(138, 155, 168, 0.2);\n      color: #f5f8fa; }\n  .pt-tag.pt-minimal.pt-intent-primary {\n    background: rgba(19, 124, 189, 0.15);\n    color: #106ba3; }\n  .pt-dark .pt-tag.pt-minimal.pt-intent-primary {\n    background: rgba(19, 124, 189, 0.2);\n    color: #2b95d6; }\n  .pt-tag.pt-minimal.pt-intent-success {\n    background: rgba(15, 153, 96, 0.15);\n    color: #0d8050; }\n  .pt-dark .pt-tag.pt-minimal.pt-intent-success {\n    background: rgba(15, 153, 96, 0.2);\n    color: #15b371; }\n  .pt-tag.pt-minimal.pt-intent-warning {\n    background: rgba(217, 130, 43, 0.15);\n    color: #bf7326; }\n  .pt-dark .pt-tag.pt-minimal.pt-intent-warning {\n    background: rgba(217, 130, 43, 0.2);\n    color: #f29d49; }\n  .pt-tag.pt-minimal.pt-intent-danger {\n    background: rgba(219, 55, 55, 0.15);\n    color: #c23030; }\n  .pt-dark .pt-tag.pt-minimal.pt-intent-danger {\n    background: rgba(219, 55, 55, 0.2);\n    color: #f55656; }\n\n.pt-tag-remove {\n  line-height: 1;\n  font-family: \"Icons16\", sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  font-style: normal;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  position: absolute;\n  top: 0;\n  right: 0;\n  opacity: 0.5;\n  border: none;\n  background: none;\n  cursor: pointer;\n  padding: 2px;\n  color: #ffffff; }\n  .pt-tag-remove:hover {\n    opacity: 0.8;\n    background: none;\n    text-decoration: none; }\n  .pt-tag-remove::before {\n    content: \"\"; }\n  .pt-dark .pt-tag:not(.pt-minimal):not([class*=\"pt-intent-\"]) .pt-tag-remove {\n    color: #182026; }\n  .pt-large .pt-tag-remove {\n    line-height: 1;\n    font-family: \"Icons20\", sans-serif;\n    font-size: 20px;\n    font-weight: 400;\n    font-style: normal;\n    margin-left: 5px;\n    padding: 5px; }\n  .pt-minimal .pt-tag-remove {\n    color: inherit; }\n    .pt-intent-primary .pt-minimal .pt-tag-remove {\n      color: #137cbd; }\n    .pt-dark .pt-intent-primary .pt-minimal .pt-tag-remove {\n      color: #137cbd; }\n    .pt-intent-success .pt-minimal .pt-tag-remove {\n      color: #0f9960; }\n    .pt-dark .pt-intent-success .pt-minimal .pt-tag-remove {\n      color: #0f9960; }\n    .pt-intent-warning .pt-minimal .pt-tag-remove {\n      color: #d9822b; }\n    .pt-dark .pt-intent-warning .pt-minimal .pt-tag-remove {\n      color: #d9822b; }\n    .pt-intent-danger .pt-minimal .pt-tag-remove {\n      color: #db3737; }\n    .pt-dark .pt-intent-danger .pt-minimal .pt-tag-remove {\n      color: #db3737; }\n\n/*\nJavaScript API\n\nThe `Tag` component is available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#components.usage).\n\nTag components render `.pt-tag` elements with optional close buttons. Provide tag content as `children`.\n\nYou can provide your own props to these components as if they were regular JSX HTML elements. If\nyou provide a `className` prop, the class names you provide will be added alongside of the default\nBlueprint class name.\n\n```\n<Tag intent={Intent.PRIMARY} onRemove={this.deleteTag}>Done</Tag>\n// renders:\n<span class=\"pt-tag pt-intent-primary pt-tag-removable\">\n  Done\n  <button class=\"pt-tag-remove\" onClick={this.deleteTag}></button>\n</span>\n```\n\n@interface ITagProps\n\n@react-example TagExample\n\nStyleguide components.tag.js\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nA mixin to generate the classes for a React CSSTransitionGroup which animates any number of CSS\nproperties at once.\n\nTransitioned properties are specificed as a map of property names to lists of (inital value, final\nvalue). For enter & appear transitions, each property will transition from its initial to its final\nvalue. For leave transitions, each property will transition in reverse, from final to initial.\n\n**Simple example:**\n`@include react-transition(\"pt-popover\", (opacity: 0 1), $before: \"&\");`\nTransition named \"pt-popover\" moves opacity from 0 to 1. `\"&\"` indicates that the\nTransition classes are expected to be applied to this element, where the mixin is invoked.\n\n**Params:**\n$name: React transitionName prop\n$properties: map of CSS property to (initial, final) values\n$duration: transition duration\n$easing: transition easing function\n$delay: transition delay\n$before: selector text to insert before transition name (often to select self: &)\n$after: selector text to insert after transiton name (to select children)\n*/\n/*\nA mixin to generate the classes for one phase of a React CSSTransitionGroup.\n`$phase` must be `appear` or `enter` or `leave`.\nIf `enter` phase is given then `appear` phase will be generated at the same time.\nIf `leave` phase is given then property values are animated in reverse, from final to initial.\n\n**Example:**\n@include react-transition-phase(pt-toast, enter, $enter-translate, $before: \"&\");\n@include react-transition-phase(pt-toast, leave, $leave-blur, $pt-transition-duration * 3, $before: \"&\");\n*/\n/*\nGiven map of properties to values, set each property to the value at the given index.\n(remember that sass indices are 1-based).\n\nExample: `each-prop((opacity: 0 1), 2)` will print \"opacity: 1\"\n*/\n/*\nFormat transition class name with all the bits.\n\"enter\" phase will include \"appear\" phase in returned name.\n*/\n/*\nToasts\n\nA toast is a lightweight, ephemeral notice from an application in direct response to a user's action.\n\n`Toast`s have a built-in timeout of five seconds. Users can also dismiss them manually by clicking the &times; button.\nHovering the cursor over a toast prevents it from disappearing. When the cursor leaves the toast, the toast's timeout restarts.\nSimilarly, focusing the toast (for example, by hitting the <kbd class=\"pt-key\">tab</kbd> key) halts the timeout, and\nblurring restarts the timeout.\n\nYou can add one additional action button to a toast. You might use this to undo the user's action, for example.\n\nYou can also apply the same visual intent styles to `Toast`s that you can to [`Button`s](components.button.css).\n\nToasts can be configured to appear at either the top or the bottom of an application window, and it is possible to\nhave more than one toast onscreen at a time.\n\n@react-example ToastExample\n\nStyleguide components.toaster\n*/\n/*\nJavaScript API\n\nThe `Toast` and `Toaster` components are available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#components.usage).\n\nThe `Toaster` component provides the static `create` method that returns a new `Toaster` instance, rendered into an\nelement attached to `<body>`. (You can also specify the element to render into if desired.) A `Toaster` instance\nhas a collection of methods to show and hide toasts in its given container.\n\nYour application can contain several `Toaster` instances and easily share them across the codebase as modules.\n\n```\n// toaster.ts\nimport { Position, Toaster } from \"@blueprintjs/core\";\n\nexport const OurToaster = Toaster.create({\n    className: \"my-toaster\",\n    position: Position.BOTTOM_RIGHT,\n});\n```\n\n```\n// application.ts\nimport { OurToaster } from \"./toaster\";\n\nconst key = OurToaster.show({ message: \"Toasted!\" });\nOurToaster.update(key, { message: \"Still toasted!\" });\n```\n\n<div class=\"pt-callout pt-intent-primary pt-icon-info-sign\">\n  <h5>Working with multiple toasters</h5>\n  You can have multiple toasters in a single application, but you must ensure that each has a unique\n  `position` to prevent overlap.\n</div>\n\n<div class=\"pt-callout pt-intent-primary pt-icon-info-sign\">\n  <h5>Toaster focus</h5>\n  `Toaster` always disables `Overlay`'s `enforceFocus` behavior (meaning that you're not blocked\n  from accessing other parts of the application while a toast is active), and by default also\n  disables `autoFocus` (meaning that focus will not switch to a toast when it appears). You can\n  enable `autoFocus` for a `Toaster` via a prop, if desired.\n</div>\n\nStyleguide components.toaster.js\n*/\n/*\nStatic method\n\n```ts\nToaster.create(props?: IToasterProps, container = document.body): IToaster\n```\n\nCreate a new `Toaster` instance. The `Toaster` will be rendered into a new element appended to the\ngiven `container`. The `container` determines which element toasts are positioned relative to; the\ndefault value of `<body>` allows them to use the entire viewport.\n\nNote that the return type is `IToaster`, which is a minimal interface that exposes only the instance\nmethods detailed below. It can be thought of as `Toaster` minus the `React.Component` methods,\nbecause the `Toaster` should not be treated as a normal React component.\n\n@interface IToasterProps\n\nStyleguide components.toaster.js.create\n*/\n/*\nInstance methods\n\n<div class=\"docs-interface-name\">IToaster</div>\n\n- `show(props: IToastProps): string` &ndash; Show a new toast to the user.\n  Returns the unique key of the new toast.\n- `update(key: string, props: IToastProps): void` &ndash;\n  Updates the toast with the given key to use the new props.\n  Updating a key that does not exist is effectively a no-op.\n- `dismiss(key: string): void` &ndash; Dismiss the given toast instantly.\n- `clear(): void` &ndash; Dismiss all toasts instantly.\n- `getToasts(): IToastProps[]` &ndash; Returns the options for all current toasts.\n\n@interface IToastProps\n\nStyleguide components.toaster.js.instance\n*/\n/*\nReact component\n\nThe `Toaster` React component is a stateful container for a single list of toasts. Internally, it\nuses [`Overlay`](#components.overlay) to manage children and transitions. It can be vertically\naligned along the top or bottom edge of its container (new toasts will slide in from that edge) and\nhorizontally aligned along the left edge, center, or right edge of its container.\n\nYou should use [`Toaster.create`](#components.toaster.js.create), rather than using the `Toaster`\ncomponent API directly in React, to avoid having to use `ref` to access the instance.\n\n```\nimport { Button, Position, Toaster } from \"@blueprintjs/core\";\n\nclass MyComponent extends React.Component<{}, {}> {\n    private toaster: Toaster;\n    private refHandlers = {\n        toaster: (ref: Toaster) => this.toaster = ref,\n    };\n\n    public render() {\n        return (\n            <div>\n                <Button onClick={this.addToast} text=\"Procure toast\" />\n                <Toaster position={Position.TOP_RIGHT} ref={this.refHandlers.toaster} />\n            </div>\n        )\n    }\n\n    private addToast = () => {\n        this.toaster.show({ message: \"Toasted!\" });\n    }\n}\n```\n\nStyleguide components.toaster.js.react\n*/\n.pt-toast {\n  display: flex;\n  align-items: flex-start;\n  position: relative !important;\n  margin: 15px 0 0;\n  border-radius: 3px;\n  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2), 0 8px 24px rgba(16, 22, 26, 0.2);\n  background-color: #ffffff;\n  min-width: 300px;\n  max-width: 500px;\n  pointer-events: all; }\n  .pt-toast.pt-toast-enter, .pt-toast.pt-toast-appear {\n    transform: translateY(-40px); }\n  .pt-toast.pt-toast-enter-active, .pt-toast.pt-toast-appear-active {\n    transform: translateY(0);\n    transition-property: transform;\n    transition-duration: 300ms;\n    transition-timing-function: cubic-bezier(0.54, 1.12, 0.38, 1.11);\n    transition-delay: 0; }\n  .pt-toast.pt-toast-enter ~ .pt-toast, .pt-toast.pt-toast-appear ~ .pt-toast {\n    transform: translateY(-40px); }\n  .pt-toast.pt-toast-enter-active ~ .pt-toast, .pt-toast.pt-toast-appear-active ~ .pt-toast {\n    transform: translateY(0);\n    transition-property: transform;\n    transition-duration: 300ms;\n    transition-timing-function: cubic-bezier(0.54, 1.12, 0.38, 1.11);\n    transition-delay: 0; }\n  .pt-toast.pt-toast-leave {\n    opacity: 1;\n    filter: blur(0); }\n  .pt-toast.pt-toast-leave-active {\n    opacity: 0;\n    filter: blur(10px);\n    transition-property: opacity, filter;\n    transition-duration: 300ms;\n    transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);\n    transition-delay: 0; }\n  .pt-toast.pt-toast-leave ~ .pt-toast {\n    transform: translateY(0); }\n  .pt-toast.pt-toast-leave-active ~ .pt-toast {\n    transform: translateY(-40px);\n    transition-property: transform;\n    transition-duration: 100ms;\n    transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);\n    transition-delay: 50ms; }\n  .pt-toast .pt-button-group {\n    flex: 0 0 auto;\n    padding: 5px;\n    padding-left: 0; }\n  .pt-toast > .pt-icon-standard {\n    padding: 12px;\n    padding-right: 0; }\n  .pt-toast.pt-dark,\n  .pt-dark .pt-toast {\n    box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 2px 4px rgba(16, 22, 26, 0.4), 0 8px 24px rgba(16, 22, 26, 0.4);\n    background-color: #394b59; }\n  .pt-toast[class*=\"pt-intent-\"] a {\n    color: rgba(255, 255, 255, 0.7); }\n    .pt-toast[class*=\"pt-intent-\"] a:hover {\n      color: #ffffff; }\n  .pt-toast[class*=\"pt-intent-\"] > .pt-icon-standard {\n    color: #ffffff; }\n  .pt-toast[class*=\"pt-intent-\"] .pt-button, .pt-toast[class*=\"pt-intent-\"] .pt-button::before, .pt-toast[class*=\"pt-intent-\"] .pt-button:active, .pt-toast[class*=\"pt-intent-\"] .pt-button.pt-active {\n    color: rgba(255, 255, 255, 0.7) !important; }\n  .pt-toast[class*=\"pt-intent-\"] .pt-button:focus {\n    outline-color: rgba(255, 255, 255, 0.5); }\n  .pt-toast[class*=\"pt-intent-\"] .pt-button:hover {\n    background-color: rgba(255, 255, 255, 0.15) !important;\n    color: #ffffff !important; }\n  .pt-toast[class*=\"pt-intent-\"] .pt-button:active, .pt-toast[class*=\"pt-intent-\"] .pt-button.pt-active {\n    background-color: rgba(255, 255, 255, 0.3) !important;\n    color: #ffffff !important; }\n  .pt-toast[class*=\"pt-intent-\"] .pt-button::after {\n    background: rgba(255, 255, 255, 0.3) !important; }\n  .pt-toast.pt-intent-primary {\n    background-color: #137cbd;\n    color: #ffffff; }\n  .pt-toast.pt-intent-success {\n    background-color: #0f9960;\n    color: #ffffff; }\n  .pt-toast.pt-intent-warning {\n    background-color: #d9822b;\n    color: #ffffff; }\n  .pt-toast.pt-intent-danger {\n    background-color: #db3737;\n    color: #ffffff; }\n\n.pt-toast-message {\n  flex: 1 1 auto;\n  padding: 11px; }\n\n.pt-toast-container {\n  position: fixed;\n  right: 0;\n  left: 0;\n  z-index: 40;\n  padding: 0 15px 15px;\n  pointer-events: none; }\n  .pt-toast-container > span {\n    display: flex;\n    flex-direction: column;\n    align-items: center; }\n  .pt-toast-container.pt-toast-container-top {\n    top: 0; }\n  .pt-toast-container.pt-toast-container-bottom {\n    bottom: 0; }\n    .pt-toast-container.pt-toast-container-bottom > span {\n      flex-direction: column-reverse; }\n  .pt-toast-container.pt-toast-container-left > span {\n    align-items: flex-start; }\n  .pt-toast-container.pt-toast-container-right > span {\n    align-items: flex-end; }\n\n.pt-toast-container-bottom .pt-toast.pt-toast-enter:not(.pt-toast-enter-active),\n.pt-toast-container-bottom .pt-toast.pt-toast-enter:not(.pt-toast-enter-active) ~ .pt-toast,\n.pt-toast-container-bottom .pt-toast.pt-toast-leave-active ~ .pt-toast {\n  transform: translateY(55px); }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nA mixin to generate the classes for a React CSSTransitionGroup which animates any number of CSS\nproperties at once.\n\nTransitioned properties are specificed as a map of property names to lists of (inital value, final\nvalue). For enter & appear transitions, each property will transition from its initial to its final\nvalue. For leave transitions, each property will transition in reverse, from final to initial.\n\n**Simple example:**\n`@include react-transition(\"pt-popover\", (opacity: 0 1), $before: \"&\");`\nTransition named \"pt-popover\" moves opacity from 0 to 1. `\"&\"` indicates that the\nTransition classes are expected to be applied to this element, where the mixin is invoked.\n\n**Params:**\n$name: React transitionName prop\n$properties: map of CSS property to (initial, final) values\n$duration: transition duration\n$easing: transition easing function\n$delay: transition delay\n$before: selector text to insert before transition name (often to select self: &)\n$after: selector text to insert after transiton name (to select children)\n*/\n/*\nA mixin to generate the classes for one phase of a React CSSTransitionGroup.\n`$phase` must be `appear` or `enter` or `leave`.\nIf `enter` phase is given then `appear` phase will be generated at the same time.\nIf `leave` phase is given then property values are animated in reverse, from final to initial.\n\n**Example:**\n@include react-transition-phase(pt-toast, enter, $enter-translate, $before: \"&\");\n@include react-transition-phase(pt-toast, leave, $leave-blur, $pt-transition-duration * 3, $before: \"&\");\n*/\n/*\nGiven map of properties to values, set each property to the value at the given index.\n(remember that sass indices are 1-based).\n\nExample: `each-prop((opacity: 0 1), 2)` will print \"opacity: 1\"\n*/\n/*\nFormat transition class name with all the bits.\n\"enter\" phase will include \"appear\" phase in returned name.\n*/\n/*\nTooltips\n\nTooltips display a small string of text next to a target element.\n\n@react-example TooltipExample\n\nStyleguide components.tooltip\n*/\n/*\nJavaScript API\n\nThe `Tooltip` component is available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#components.usage).\n\nWhen creating a tooltip, you must specify both:\n- its _content_, by setting the `content` prop, and\n- its _target_, as a single child element or as plain text\n\nWhen the user hovers over the target, the content is displayed in a tooltip above the target.\n\nContent can be a `string` or a single `JSX.Element` (typically used to format said string),\nbut you should keep it simple. If you need more space, consider using a popover instead of a tooltip.\n\n<div class=\"pt-callout pt-intent-warning pt-icon-warning-sign\">\n  <h5>Button targets</h5>\n  Buttons make great tooltip targets, but the `disabled` attribute will prevent all events so the enclosing `Tooltip`\n  will not know when to respond. Use [`AnchorButton`](#components.button.js.anchor-button) instead;\n  see the [callout here](#components.button.js) for more details.\n</div>\n\n@interface ITooltipProps\n\nWeight: -10\n\nStyleguide components.tooltip.js\n*/\n/*\nControlled mode\n\nThe `Tooltip` component supports controlled mode in exactly the same way the `Popover` component\ndoes. Please refer to the [controlled mode documentation](#components.popover.js.controlled) for\n`Popover` for details.\n\nStyleguide components.tooltip.js.controlled\n*/\n/*\nInline tooltips\n\nInline tooltips (with `inline={true}`) do not have a set width, and therefore will not break long\ncontent into multiple lines. This is enforced with `white-space: nowrap`.\n\nIf you want to create an inline tooltip with content spanning multiple lines, you must override the\ndefault styles and set an appropriate size for `.pt-tooltip`.\n\nStyleguide components.tooltip.js.inline\n*/\n/*\nCombining with popover\n\nYou can give a single target both a popover and a tooltip. You must put the `Tooltip` inside the\n`Popover` (and the target inside the `Tooltip`).\n\nThis order is required because when the popover is open, the tooltip is disabled, to prevent both\nelements from appearing at the same time.\n\n```\n<Popover content={<h1>Popover!</h1>} position={Position.RIGHT}>\n    <Tooltip content=\"I has a popover!\" position={Position.RIGHT}>\n        <button className=\"pt-button pt-intent-success\">Hover and click me</button>\n    </Tooltip>\n</Popover>\n```\n\nStyleguide components.tooltip.js.popover\n*/\n/*\nSVG tooltip\n\n`SVGTooltip` is a convenience component provided for SVG contexts. It is a simple wrapper around\n`Tooltip` that sets `rootElementTag=\"g\"`.\n\nStyleguide components.tooltip.js.svg\n*/\n.pt-tooltip {\n  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2), 0 8px 24px rgba(16, 22, 26, 0.2);\n  transform: scale(1);\n  /*\n  Dark theme\n\n  If the trigger for a tooltip is nested inside a `.pt-dark` container, the tooltip will\n  automatically have the dark theme applied as well.\n\n  You can also explicitly apply the dark theme to a tooltip by adding the prop\n  `tooltipClassName=\"pt-dark\"`.\n\n  Weight: 10\n\n  Styleguide components.tooltip.js.dark\n  */ }\n  .pt-tooltip .pt-popover-arrow {\n    position: absolute;\n    width: 22px;\n    height: 22px; }\n    .pt-tooltip .pt-popover-arrow::before {\n      margin: 4px;\n      width: 14px;\n      height: 14px; }\n  .pt-tether-element-attached-bottom.pt-tether-target-attached-top > .pt-tooltip {\n    margin-top: -11px;\n    margin-bottom: 11px; }\n    .pt-tether-element-attached-bottom.pt-tether-target-attached-top > .pt-tooltip > .pt-popover-arrow {\n      bottom: -8px; }\n      .pt-tether-element-attached-bottom.pt-tether-target-attached-top > .pt-tooltip > .pt-popover-arrow svg {\n        transform: rotate(-90deg); }\n  .pt-tether-element-attached-left.pt-tether-target-attached-right > .pt-tooltip {\n    margin-left: 11px; }\n    .pt-tether-element-attached-left.pt-tether-target-attached-right > .pt-tooltip > .pt-popover-arrow {\n      left: -8px; }\n      .pt-tether-element-attached-left.pt-tether-target-attached-right > .pt-tooltip > .pt-popover-arrow svg {\n        transform: rotate(0); }\n  .pt-tether-element-attached-top.pt-tether-target-attached-bottom > .pt-tooltip {\n    margin-top: 11px; }\n    .pt-tether-element-attached-top.pt-tether-target-attached-bottom > .pt-tooltip > .pt-popover-arrow {\n      top: -8px; }\n      .pt-tether-element-attached-top.pt-tether-target-attached-bottom > .pt-tooltip > .pt-popover-arrow svg {\n        transform: rotate(90deg); }\n  .pt-tether-element-attached-right.pt-tether-target-attached-left > .pt-tooltip {\n    margin-right: 11px;\n    margin-left: -11px; }\n    .pt-tether-element-attached-right.pt-tether-target-attached-left > .pt-tooltip > .pt-popover-arrow {\n      right: -8px; }\n      .pt-tether-element-attached-right.pt-tether-target-attached-left > .pt-tooltip > .pt-popover-arrow svg {\n        transform: rotate(180deg); }\n  .pt-tether-element-attached-middle > .pt-tooltip > .pt-popover-arrow {\n    top: 50%;\n    transform: translateY(-50%); }\n  .pt-tether-element-attached-center > .pt-tooltip > .pt-popover-arrow {\n    right: 50%;\n    transform: translateX(50%); }\n  .pt-tether-element-attached-top.pt-tether-target-attached-top > .pt-tooltip > .pt-popover-arrow {\n    top: -0.22183px; }\n  .pt-tether-element-attached-right.pt-tether-target-attached-right > .pt-tooltip > .pt-popover-arrow {\n    right: -0.22183px; }\n  .pt-tether-element-attached-left.pt-tether-target-attached-left > .pt-tooltip > .pt-popover-arrow {\n    left: -0.22183px; }\n  .pt-tether-element-attached-bottom.pt-tether-target-attached-bottom > .pt-tooltip > .pt-popover-arrow {\n    bottom: -0.22183px; }\n  .pt-tether-element-attached-top.pt-tether-element-attached-left > .pt-tooltip {\n    transform-origin: top left; }\n  .pt-tether-element-attached-top.pt-tether-element-attached-center > .pt-tooltip {\n    transform-origin: top center; }\n  .pt-tether-element-attached-top.pt-tether-element-attached-right > .pt-tooltip {\n    transform-origin: top right; }\n  .pt-tether-element-attached-middle.pt-tether-element-attached-left > .pt-tooltip {\n    transform-origin: center left; }\n  .pt-tether-element-attached-middle.pt-tether-element-attached-center > .pt-tooltip {\n    transform-origin: center center; }\n  .pt-tether-element-attached-middle.pt-tether-element-attached-right > .pt-tooltip {\n    transform-origin: center right; }\n  .pt-tether-element-attached-bottom.pt-tether-element-attached-left > .pt-tooltip {\n    transform-origin: bottom left; }\n  .pt-tether-element-attached-bottom.pt-tether-element-attached-center > .pt-tooltip {\n    transform-origin: bottom center; }\n  .pt-tether-element-attached-bottom.pt-tether-element-attached-right > .pt-tooltip {\n    transform-origin: bottom right; }\n  .pt-tooltip .pt-popover-content {\n    background: #394b59;\n    color: #f5f8fa; }\n  .pt-tooltip .pt-popover-arrow::before {\n    box-shadow: 1px 1px 6px rgba(16, 22, 26, 0.2); }\n  .pt-tooltip .pt-popover-arrow-border {\n    fill: #10161a;\n    fill-opacity: 0.1; }\n  .pt-tooltip .pt-popover-arrow-fill {\n    fill: #394b59; }\n  .pt-popover-enter > .pt-tooltip, .pt-popover-appear > .pt-tooltip {\n    transform: scale(0.8); }\n  .pt-popover-enter-active > .pt-tooltip, .pt-popover-appear-active > .pt-tooltip {\n    transform: scale(1);\n    transition-property: transform;\n    transition-duration: 200ms;\n    transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);\n    transition-delay: 0; }\n  .pt-popover-leave > .pt-tooltip {\n    transform: scale(1); }\n  .pt-popover-leave-active > .pt-tooltip {\n    transform: scale(0.8);\n    transition-property: transform;\n    transition-duration: 200ms;\n    transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);\n    transition-delay: 0; }\n  .pt-tooltip .pt-popover-content {\n    padding: 10px 12px; }\n  .pt-tooltip.pt-dark,\n  .pt-dark .pt-tooltip {\n    box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 2px 4px rgba(16, 22, 26, 0.4), 0 8px 24px rgba(16, 22, 26, 0.4); }\n    .pt-tooltip.pt-dark .pt-popover-content,\n    .pt-dark .pt-tooltip .pt-popover-content {\n      background: #e1e8ed;\n      color: #394b59; }\n    .pt-tooltip.pt-dark .pt-popover-arrow::before,\n    .pt-dark .pt-tooltip .pt-popover-arrow::before {\n      box-shadow: 1px 1px 6px rgba(16, 22, 26, 0.4); }\n    .pt-tooltip.pt-dark .pt-popover-arrow-border,\n    .pt-dark .pt-tooltip .pt-popover-arrow-border {\n      fill: #10161a;\n      fill-opacity: 0.2; }\n    .pt-tooltip.pt-dark .pt-popover-arrow-fill,\n    .pt-dark .pt-tooltip .pt-popover-arrow-fill {\n      fill: #e1e8ed; }\n  .pt-tooltip.pt-intent-primary .pt-popover-content {\n    background: #137cbd;\n    color: #ffffff; }\n  .pt-tooltip.pt-intent-primary .pt-popover-arrow-fill {\n    fill: #137cbd; }\n  .pt-tooltip.pt-intent-success .pt-popover-content {\n    background: #0f9960;\n    color: #ffffff; }\n  .pt-tooltip.pt-intent-success .pt-popover-arrow-fill {\n    fill: #0f9960; }\n  .pt-tooltip.pt-intent-warning .pt-popover-content {\n    background: #d9822b;\n    color: #ffffff; }\n  .pt-tooltip.pt-intent-warning .pt-popover-arrow-fill {\n    fill: #d9822b; }\n  .pt-tooltip.pt-intent-danger .pt-popover-content {\n    background: #db3737;\n    color: #ffffff; }\n  .pt-tooltip.pt-intent-danger .pt-popover-arrow-fill {\n    fill: #db3737; }\n\n.pt-popover-target .pt-tooltip {\n  white-space: nowrap; }\n\n.pt-tooltip-indicator {\n  border-bottom: dotted 1px;\n  cursor: help; }\n\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nColors\n\nHex values for these colors can be accessed in JavaScript. The global version of the module exposes\nthe `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from \"@blueprintjs/core\"`.\n\nStyleguide colors\n*/\n/*\nGray scale\n\nBlack, white and everything in between. The gray scale should be used for\nthe main UI frame: containers, headers, sections, boxes, etc.\nIf you need to call attention to a particular element (buttons, icons, tooltips, etc.),\nuse one of the [core colors](#colors.core).\n\n@react-docs GrayscalePalette\n\nWeight: -1\n\nStyleguide colors.grays\n*/\n/*\nCore colors\n\nCore colors are reserved for user interface design. Use these to help call\nattention to specific UI elements, such as buttons, callouts, icons, etc.\nEach core color is mapped to what we call a __visual intent__. We use intents\nto convey the status of UI elements:\n\n- _Blue_ (intent: primary) elevates elements from the typical gray scale UI frame.\n- _Green_ (intent: success) indicates successful operations.\n- _Orange_ (intent: warning) indicates warnings and intermediate states.\n- _Red_ (intent: danger) indicates errors and potentially destructive operations.\n\nCore colors are also designed to:\n\n- go well together and be used alongside each other in any application.\n- adhere to [WCAG 2.0](https://www.w3.org/TR/WCAG20/) standards, and therefore are\n  highly accessible to visually impaired and color blind users.\n\n@react-docs CoreColorsPalette\n\nStyleguide colors.core\n*/\n/*\nExtended colors\n\nExtended colors should typically be reserved for data visualizations: any time\nyou need to represent data of some sort, you can use these.\nThese colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)\naccessibility standards and should therefore not be used for typical user\ninterface design — take a look at [core colors](#colors.core) instead.\n\n@react-docs ExtendedColorsPalette\n\nStyleguide colors.extended\n*/\n/*\nColor aliases\n\nThese variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint\nitself to ensure consistent color usage across components.\n\n<table class=pt-table>\n  <thead>\n    <tr>\n      <th></th>\n      <th>Variable</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-primary\"></div></td>\n      <td><code>$pt-intent-primary</code></td>\n      <td>Primary intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-success\"></div></td>\n      <td><code>$pt-intent-success</code></td>\n      <td>Success intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-warning\"></div></td>\n      <td><code>$pt-intent-warning</code></td>\n      <td>Warning intent color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-intent-danger\"></div></td>\n      <td><code>$pt-intent-danger</code></td>\n      <td>Danger intent color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-app-background-color\"></div></td>\n      <td><code>$pt-app-background-color</code></td>\n      <td>Application background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-app-background-color\"></div></td>\n      <td><code>$pt-dark-app-background-color</code></td>\n      <td>Dark theme application background color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color\"></div></td>\n      <td><code>$pt-text-color</code></td>\n      <td>Default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-muted\"></div></td>\n      <td><code>$pt-text-color-muted</code></td>\n      <td>Muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-color-disabled\"></div></td>\n      <td><code>$pt-text-color-disabled</code></td>\n      <td>Disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-heading-color\"></div></td>\n      <td><code>$pt-heading-color</code></td>\n      <td>Text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-link-color\"></div></td>\n      <td><code>$pt-link-color</code></td>\n      <td>Text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color\"></div></td>\n      <td><code>$pt-dark-text-color</code></td>\n      <td>Dark theme default text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-muted\"></div></td>\n      <td><code>$pt-dark-text-color-muted</code></td>\n      <td>Dark theme muted text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-text-color-disabled\"></div></td>\n      <td><code>$pt-dark-text-color-disabled</code></td>\n      <td>Dark theme disabled text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-heading-color\"></div></td>\n      <td><code>$pt-dark-heading-color</code></td>\n      <td>Dark theme text color for headers</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-link-color\"></div></td>\n      <td><code>$pt-dark-link-color</code></td>\n      <td>Dark theme text color for links</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-text-selection-color\"></div></td>\n      <td><code>$pt-text-selection-color</code></td>\n      <td>Text selection color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color\"></div></td>\n      <td><code>$pt-icon-color</code></td>\n      <td>Default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-hover\"></div></td>\n      <td><code>$pt-icon-color-hover</code></td>\n      <td>Hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-disabled\"></div></td>\n      <td><code>$pt-icon-color-disabled</code></td>\n      <td>Disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-icon-color-selected\"></div></td>\n      <td><code>$pt-icon-color-selected</code></td>\n      <td>Selected icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color\"></div></td>\n      <td><code>$pt-dark-icon-color</code></td>\n      <td>Dark theme default icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-hover\"></div></td>\n      <td><code>$pt-dark-icon-color-hover</code></td>\n      <td>Dark theme hovered icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-disabled\"></div></td>\n      <td><code>$pt-dark-icon-color-disabled</code></td>\n      <td>Dark theme disabled icon color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-icon-color-selected\"></div></td>\n      <td><code>$pt-dark-icon-color-selected</code></td>\n      <td>Dark theme selected icon color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-divider-black\"></div></td>\n      <td><code>$pt-divider-black</code></td>\n      <td>Black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-black\"></div></td>\n      <td><code>$pt-dark-divider-black</code></td>\n      <td>Dark theme black divider color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-divider-white\"></div></td>\n      <td><code>$pt-dark-divider-white</code></td>\n      <td>Dark theme white divider color</td>\n    </tr>\n\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-text-color\"></div></td>\n      <td><code>$pt-code-text-color</code></td>\n      <td>Code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-code-background-color\"></div></td>\n      <td><code>$pt-code-background-color</code></td>\n      <td>Code background color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-text-color\"></div></td>\n      <td><code>$pt-dark-code-text-color</code></td>\n      <td>Dark theme code text color</td>\n    </tr>\n    <tr>\n      <td><div class=\"docs-color-bubble alias-dark-code-background-color\"></div></td>\n      <td><code>$pt-dark-code-background-color</code></td>\n      <td>Dark theme code background color</td>\n    </tr>\n  </tbody>\n</table>\n\nStyleguide variables.colors\n*/\n/*\nColor schemes\n\nUse the following color scheme generators to produce color schemes for your data visualizations.\nFirst, choose the kind of scheme based on the type of your data, then customize the number of values\nusing the forms below. Finally, copy the colors array into your application and make it live!\n\nThe following schemes have been carefully crafted to be visually striking and easily understandable\nwhile remaining accessible to visually impaired and color blind users.\n\nStyleguide colors.schemes\n*/\n/*\nSequential color schemes\n\nSequential color schemes imply order and are best suited for representing data that\nranges from low-to-high values either on an ordinal or on a numerical scale.\n\nWeight: -1\n\n@react-docs SequentialSchemePalette\n\nStyleguide colors.schemes.sequential\n*/\n/*\nDiverging color schemes\n\nDiverging color schemes put equal emphasis on mid-range values and extremes\nat both ends of the data range.\n\n@react-docs DivergingSchemePalette\n\nStyleguide colors.schemes.diverging\n*/\n/*\nQualitative color schemes\n\nQualitative color schemes use a series of unrelated colors to create a\nscheme that does not imply order, merely difference in kind.\n\n@react-docs QualitativeSchemePalette\n\nStyleguide colors.schemes.qualitative\n*/\n/*\nVariables\n\nAvailable for use with Sass and Less.\n\n```css.scss\n@import \"path/to/@blueprintjs/core/dist/variables\";\n```\n\nThe Sass `$` convention is used in this documentation for consistency with the original source code.\nEvery variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.\n\nWeight: 4\n\nStyleguide variables\n*/\n/*\nFont variables\n\nTypically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for\ntext, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the\nrare cases where custom styling is necessary and should be used sparingly:\n\n- `$pt-font-family`\n- `$pt-font-family-monospace`\n- `$pt-font-size`\n- `$pt-font-size-small`\n- `$pt-font-size-large`\n- `$pt-line-height`\n\nSee the [Fonts section](#typography.fonts) for more information and usage guidelines.\n\nStyleguide variables.fonts\n*/\n/*\nIcon variables\n\nMost icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on\ncomponents like `.pt-button`. In rare cases, you may need direct access to the content\nstring that generates each icon in the icon font. Blueprint provides these variables with\nstraightforward names (see the [Icons section](#icons) for the full list of identifiers):\n\n- `$pt-icon-style`\n- `$pt-icon-align-left`\n- `$pt-icon-align-center`\n- ...\n\nVariables are also provided for the two icon font families and their pixel sizes:\n\n- `@icons16-family`\n- `@icons20-family`\n- `$pt-icon-size-standard`\n- `$pt-icon-size-large`\n\nStyleguide variables.icons\n*/\n/*\nGrids & dimensions\n\nSizes of common components. Most sizing variables are based on `$pt-grid-size`, which has\na value of `10px`. Custom components should adhere to the relevant `height` variable.\n\n- `$pt-grid-size`\n- `$pt-border-radius`\n- `$pt-button-height`\n- `$pt-button-height-large`\n- `$pt-input-height`\n- `$pt-input-height-large`\n- `$pt-navbar-height`\n\nWeight: 1\n\nStyleguide variables.dimensions\n*/\n/*\nGrid system\n\nBlueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`\nvariable to generate layout & sizing style rules in your CSS codebase.\n\nIn lieu of a full grid system, you should try to use the __CSS3 Flexible Box layout model__ (a.k.a.\n\"flexbox\"). It's quite powerful on its own and allows you to build robust, responsive layouts\nwithout writing much CSS. Here are some resources for learning flexbox:\n   - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)\n   - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nStyleguide variables.dimensions.grid\n*/\n/*\nLayering\n\nBlueprint provides variables for three z-index layers. This should be enough for most use cases,\nespecially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)\ncomponents such as dialogs and popovers use these z-index values to configure their stacking\ncontexts.\n\n- `$pt-z-index-base`\n- `$pt-z-index-content`\n- `$pt-z-index-overlay`\n\n[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n\nWeight: 1\n\nStyleguide variables.layering\n*/\n/*\nLight theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\nlight theme components.\n\n- `$pt-dialog-box-shadow`\n- `$pt-input-box-shadow`\n- `$pt-popover-box-shadow`\n- `$pt-tooltip-box-shadow`\n\nWeight: 2\n\nStyleguide variables.light\n*/\n/*\nDark theme styles\n\nUse these when you need to build custom UI components that look similar to Blueprint's\ndark theme components.\n\n- `$pt-dark-dialog-box-shadow`\n- `$pt-dark-input-box-shadow`\n- `$pt-dark-popover-box-shadow`\n- `$pt-dark-tooltip-box-shadow`\n\nWeight: 3\n\nStyleguide variables.dark\n*/\n/*\nTrees\n\nTrees display hierarchical data.\n\nStyleguide components.tree\n*/\n/*\nJavaScript API\n\nThe `Tree` component is available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#components.usage).\n\n`Tree` is a stateless component. Its contents are dictated by the `contents` prop, which is an array\nof `ITreeNode`s (see [below](#components.tree.js.treenode)). The tree is multi-rooted if `contents`\ncontains more than one top-level object.\n\nA variety of interaction callbacks are also exposed as props. All interaction callbacks supply a\nparameter `nodePath`, which is an array of numbers representing a node's position in the tree. For\nexample, `[2, 0]` represents the first child (`0`) of the third top-level node (`2`).\n\n@interface ITreeProps\n\n@react-example TreeExample\n\nStyleguide components.tree.js\n*/\n/*\nTree node interface\n\n`ITreeNode` objects determine the contents, appearance, and state of each node in the tree.\n\nFor example, `iconName` controls the icon displayed for the node, and `isExpanded` determines\nwhether the node's children are shown.\n\n@interface ITreeNodeProps\n\nStyleguide components.tree.js.treenode\n*/\n/*\nCSS API\n\nSee below for the [JavaScript API](#components.tree.js) for the `Tree` React component. However, you\nmay also use the provided styles by themselves, without using the component.\n\n<div class=\"pt-callout pt-intent-primary pt-icon-info-sign\">\n  Note that the following examples set a maximum width and background color for the tree;\nyou may want to do this as well in your own usage.\n</div>\n\nMarkup:\n<div class=\"pt-tree pt-elevation-0\">\n  <ul class=\"pt-tree-node-list pt-tree-root\">\n    <li class=\"pt-tree-node pt-tree-node-expanded\">\n      <div class=\"pt-tree-node-content\">\n        <span class=\"pt-tree-node-caret pt-tree-node-caret-open pt-icon-standard\"></span>\n        <span class=\"pt-tree-node-icon pt-icon-standard pt-icon-folder-close\"></span>\n        <span class=\"pt-tree-node-label\">Label</span>\n        <span class=\"pt-tree-node-secondary-label\">Secondary label</span>\n      </div>\n      <ul class=\"pt-tree-node-list\">\n        <li class=\"pt-tree-node\">\n          <div class=\"pt-tree-node-content\">\n            <span class=\"pt-tree-node-caret-none pt-icon-standard\"></span>\n            <span class=\"pt-tree-node-icon pt-icon-standard pt-icon-document\"></span>\n          <span class=\"pt-tree-node-label\">A Document</span>\n          </div>\n        </li>\n        <li class=\"pt-tree-node\">\n          <div class=\"pt-tree-node-content\">\n            <span class=\"pt-tree-node-caret-none pt-icon-standard\"></span>\n            <span class=\"pt-tree-node-icon pt-icon-standard pt-icon-document\"></span>\n            <span class=\"pt-tree-node-label\">Another Document</span>\n          </div>\n        </li>\n      </ul>\n    </li>\n  </ul>\n</div>\n\nStyleguide components.tree.css\n*/\n.pt-tree-node-list {\n  margin: 0;\n  padding-left: 0;\n  list-style: none; }\n\n.pt-tree-root {\n  position: relative;\n  background-color: transparent;\n  cursor: default;\n  padding-left: 0; }\n\n.pt-tree-node-content-0 {\n  padding-left: 0px; }\n\n.pt-tree-node-content-1 {\n  padding-left: 23px; }\n\n.pt-tree-node-content-2 {\n  padding-left: 46px; }\n\n.pt-tree-node-content-3 {\n  padding-left: 69px; }\n\n.pt-tree-node-content-4 {\n  padding-left: 92px; }\n\n.pt-tree-node-content-5 {\n  padding-left: 115px; }\n\n.pt-tree-node-content-6 {\n  padding-left: 138px; }\n\n.pt-tree-node-content-7 {\n  padding-left: 161px; }\n\n.pt-tree-node-content-8 {\n  padding-left: 184px; }\n\n.pt-tree-node-content-9 {\n  padding-left: 207px; }\n\n.pt-tree-node-content-10 {\n  padding-left: 230px; }\n\n.pt-tree-node-content-11 {\n  padding-left: 253px; }\n\n.pt-tree-node-content-12 {\n  padding-left: 276px; }\n\n.pt-tree-node-content-13 {\n  padding-left: 299px; }\n\n.pt-tree-node-content-14 {\n  padding-left: 322px; }\n\n.pt-tree-node-content-15 {\n  padding-left: 345px; }\n\n.pt-tree-node-content-16 {\n  padding-left: 368px; }\n\n.pt-tree-node-content-17 {\n  padding-left: 391px; }\n\n.pt-tree-node-content-18 {\n  padding-left: 414px; }\n\n.pt-tree-node-content-19 {\n  padding-left: 437px; }\n\n.pt-tree-node-content-20 {\n  padding-left: 460px; }\n\n.pt-tree-node-content {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 30px;\n  padding-right: 5px; }\n  .pt-tree-node-content:hover {\n    background-color: rgba(191, 204, 214, 0.4); }\n\n.pt-tree-node-caret,\n.pt-tree-node-caret-none {\n  position: relative;\n  min-width: 30px;\n  line-height: 30px !important; }\n\n.pt-tree-node-caret {\n  color: #5c7080;\n  cursor: pointer;\n  text-align: center; }\n  .pt-tree-node-caret:hover {\n    color: #182026; }\n  .pt-dark .pt-tree-node-caret {\n    color: #bfccd6; }\n    .pt-dark .pt-tree-node-caret:hover {\n      color: #f5f8fa; }\n  .pt-tree-node-caret::before {\n    display: inline-block;\n    content: \"\";\n    transition: transform 200ms cubic-bezier(0.4, 1, 0.75, 0.9); }\n  .pt-tree-node-caret.pt-tree-node-caret-open::before {\n    transform: rotate(90deg); }\n\n.pt-tree-node-icon {\n  position: relative;\n  margin-right: 7px;\n  color: #5c7080; }\n\n.pt-tree-node-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  word-wrap: normal;\n  flex: 1 1 auto;\n  position: relative;\n  user-select: none; }\n  .pt-tree-node-label span {\n    display: inline; }\n\n.pt-tree-node-secondary-label {\n  padding: 0 5px;\n  line-height: 30px;\n  user-select: none; }\n\n.pt-tree-node.pt-tree-node-selected > .pt-tree-node-content {\n  background-color: #137cbd; }\n  .pt-tree-node.pt-tree-node-selected > .pt-tree-node-content,\n  .pt-tree-node.pt-tree-node-selected > .pt-tree-node-content .pt-icon, .pt-tree-node.pt-tree-node-selected > .pt-tree-node-content .pt-icon-standard, .pt-tree-node.pt-tree-node-selected > .pt-tree-node-content .pt-icon-large {\n    color: #ffffff; }\n  .pt-tree-node.pt-tree-node-selected > .pt-tree-node-content .pt-tree-node-caret::before {\n    color: rgba(255, 255, 255, 0.7); }\n  .pt-tree-node.pt-tree-node-selected > .pt-tree-node-content .pt-tree-node-caret:hover::before {\n    color: #ffffff; }\n\n.pt-dark .pt-tree-node-content:hover {\n  background-color: rgba(92, 112, 128, 0.3); }\n\n.pt-dark .pt-tree-node.pt-tree-node-selected > .pt-tree-node-content {\n  background-color: #137cbd; }\n\n/*\nDark theme\n\nBlueprint provides two UI color themes: light and dark. The light theme is active by default. The\ndark theme can be applied by adding the class `pt-dark` to a container element to theme all nested\nelements.\n\nOnce applied, the dark theme will cascade to nested `.pt-*` elements inside a `.pt-dark` container.\nThere is no way to nest light-themed elements inside a dark container.\n\nMost elements only support the dark theme when nested inside a `.pt-dark` container because it does\nnot make sense to mark individual elements as dark. The dark container is therefore responsible for\nsetting a dark background color.\n\nThe following elements and components support the `.pt-dark` class directly (i.e, `.pt-app.pt-dark`)\nand can be used as a container for nested dark children:\n\n- `.pt-app`\n- `.pt-card`\n- Overlays: `Dialog`, `Popover`, `Tooltip`, `Toast`\n  - `Popover` and `Tooltip` will automatically detect when their trigger is inside a `.pt-dark`\n    container and add the same class to themselves.\n\nRather than illustrating dark components inline, this documentation site provides a site-wide switch\nin the top right corner of the page to enable the dark theme. Try it out as you read the docs.\n\nWeight: 10\n\nStyleguide components.usage.dark\n*/\n"]}