// Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. @import "color-aliases"; @import "mixins"; // ---------------------------------------------------------------------------- // This file is part of the public Sass API of @blueprintjs/core. // As such, it comes with important considerations: // // - Changes to these variable names and values are generally considered breaking changes. // - A limited subset of Sass syntax is supported. All syntax inluded here must be able to get parsed by the // `generate-css-variables` script in @blueprintjs/node-build-scripts. For example, "sass:math" is unsupported. // ---------------------------------------------------------------------------- // Namespace appended to the beginning of each CSS class: `.#{$ns}-button`. // N.B. No quotes around this string value, for Less syntax compatibility. Also, this cannot be overriden // (the JS components have this class prefix hard-coded), so it does not have the `!default` modifier. $ns: bp5; // Alias for BP users outside this repo $bp-ns: $ns; // easily the most important variable, so it comes up top // (so other variables can use it to define themselves) $pt-grid-size: 10px !default; // Icon variables $icons16-family: "blueprint-icons-16" !default; $icons20-family: "blueprint-icons-20" !default; $pt-icon-size-standard: 16px !default; $pt-icon-size-large: 20px !default; // Typography // see https://bitsofco.de/the-new-system-font-stack/ $pt-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", $icons16-family, // support inline Blueprint icons sans-serif !default; $pt-font-family-monospace: monospace !default; $pt-font-size: $pt-grid-size * 1.4 !default; $pt-font-size-large: $pt-grid-size * 1.6 !default; $pt-font-size-small: $pt-grid-size * 1.2 !default; // a little bit extra to ensure the height comes out to just over 18px (and browser rounds to 18px) // equivalent to: math.div($pt-grid-size * 1.8, $pt-font-size) + 0.0001 $pt-line-height: 1.28581 !default; // Grids & dimensions // equivalent to: floor(math.div($pt-grid-size, 5)) $pt-border-radius: 2px !default; // Buttons $pt-button-height: $pt-grid-size * 3 !default; $pt-button-height-small: $pt-grid-size * 2.4 !default; $pt-button-height-smaller: $pt-grid-size * 2 !default; $pt-button-height-large: $pt-grid-size * 4 !default; // Inputs $pt-input-height: $pt-grid-size * 3 !default; $pt-input-height-large: $pt-grid-size * 4 !default; $pt-input-height-small: $pt-grid-size * 2.4 !default; // Others $pt-navbar-height: $pt-grid-size * 5 !default; // Z-indices $pt-z-index-base: 0 !default; $pt-z-index-content: $pt-z-index-base + 10 !default; $pt-z-index-overlay: $pt-z-index-content + 10 !default; $pt-z-index-dialog-header: $pt-z-index-overlay + 10 !default; // Shadow opacities $pt-border-shadow-opacity: 0.1 !default; $pt-drop-shadow-opacity: 0.2 !default; $pt-dark-border-shadow-opacity: $pt-border-shadow-opacity * 2 !default; $pt-dark-drop-shadow-opacity: $pt-drop-shadow-opacity * 2 !default; // Elevations $pt-elevation-shadow-0: 0 0 0 1px $pt-divider-black !default; $pt-elevation-shadow-1: border-shadow($pt-border-shadow-opacity), 0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default; $pt-elevation-shadow-2: border-shadow($pt-border-shadow-opacity), 0 1px 1px rgba($black, $pt-drop-shadow-opacity), 0 2px 6px rgba($black, $pt-drop-shadow-opacity) !default; $pt-elevation-shadow-3: border-shadow($pt-border-shadow-opacity), 0 2px 4px rgba($black, $pt-drop-shadow-opacity), 0 8px 24px rgba($black, $pt-drop-shadow-opacity) !default; $pt-elevation-shadow-4: border-shadow($pt-border-shadow-opacity), 0 4px 8px rgba($black, $pt-drop-shadow-opacity), 0 18px 46px 6px rgba($black, $pt-drop-shadow-opacity) !default; $pt-dark-elevation-shadow-0: inset 0 0 0 1px rgba($white, 0.2) !default; $pt-dark-elevation-shadow-1: inset 0 0 0 1px rgba($white, 0.2), 0 1px 1px 0 rgba($black, $pt-dark-drop-shadow-opacity) !default; $pt-dark-elevation-shadow-2: inset 0 0 0 1px rgba($white, 0.2), 0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity), 0 2px 6px rgba($black, $pt-dark-drop-shadow-opacity) !default; $pt-dark-elevation-shadow-3: inset 0 0 0 1px rgba($white, 0.2), 0 2px 4px rgba($black, $pt-dark-drop-shadow-opacity), 0 8px 24px rgba($black, $pt-dark-drop-shadow-opacity) !default; $pt-dark-elevation-shadow-4: inset 0 0 0 1px rgba($white, 0.2), 0 4px 8px rgba($black, $pt-dark-drop-shadow-opacity), 0 18px 46px 6px rgba($black, $pt-dark-drop-shadow-opacity) !default; // Transitions $pt-transition-ease: cubic-bezier(0.4, 1, 0.75, 0.9) !default; $pt-transition-ease-bounce: cubic-bezier(0.54, 1.12, 0.38, 1.11) !default; $pt-transition-duration: 100ms !default; // Light theme styles $pt-input-box-shadow: inset 0 0 0 1px rgba($black, 0.2), inset 0 1px 1px rgba($black, 0.5) !default; $pt-dialog-box-shadow: $pt-elevation-shadow-3 !default; $pt-popover-box-shadow: $pt-elevation-shadow-3 !default; $pt-tooltip-box-shadow: $pt-popover-box-shadow !default; // Equivalent to $pt-dark-elevation-shadow-3, but swaps the outset border for an inset one $pt-toast-box-shadow: inset border-shadow(0.2), 0 2px 4px rgba($black, $pt-drop-shadow-opacity), 0 8px 24px rgba($black, $pt-drop-shadow-opacity) !default; // Dark theme styles $pt-dark-input-box-shadow: inset 0 0 0 1px rgba($white, 0.2), inset 0 -1px 1px 0 $gray3 !default; $pt-dark-input-intent-box-shadow-colors: ( "primary": $blue4, "success": $green4, "warning": $orange4, "danger": $red4, ) !default; $pt-dark-dialog-box-shadow: $pt-dark-elevation-shadow-3 !default; // Dark popover borders are outset, so they can't use rgba($white, 0.3). // They also can't use $gray1 because its blue tint is noticeably different from other white borders in dark theme. // Instead, we create a new color tuned to match semi-transparent white borders on a dark theme background. $pt-dark-popover-border-color: hsl(215deg, 3%, 38%) !default; $pt-dark-popover-box-shadow: 0 0 0 1px $pt-dark-popover-border-color, $pt-dark-elevation-shadow-3 !default; // Equivalent to $pt-dark-elevation-shadow-3 without the inset border $pt-dark-tooltip-box-shadow: 0 2px 4px rgba($black, $pt-dark-drop-shadow-opacity), 0 8px 24px rgba($black, $pt-dark-drop-shadow-opacity) !default; $pt-dark-toast-box-shadow: $pt-dark-elevation-shadow-3 !default; // Colors used for Windows high contrast mode // Because high contrast mode doesn't actually obey any colors we define, but uses system colors, // we define these variables in terms of System colors so that it's easier to understand the intent. // See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/system_color_keywords for more info on system colors. $pt-high-contrast-mode-border-color: buttonborder; $pt-high-contrast-mode-active-background-color: highlight; $pt-high-contrast-mode-active-text-color: highlight; $pt-high-contrast-mode-disabled-border-color: graytext; $pt-high-contrast-mode-disabled-text-color: graytext; $pt-high-contrast-mode-disabled-background-color: graytext;