| /* |
| * Licensed to the Apache Software Foundation (ASF) under one |
| * or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information |
| * regarding copyright ownership. The ASF licenses this file |
| * to you under the Apache License, Version 2.0 (the |
| * "License"); you may not use this file except in compliance |
| * with the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| |
| // Namespace appended to the beginning of each CSS class: `.#{$ns}-button`. |
| // Do not quote this value, for Less consumers. |
| $ns: bp3; |
| |
| // easily the most important variable, so it comes up top |
| // (so other variables can use it to define themselves) |
| $pt-grid-size: 10px; |
| |
| // see https://bitsofco.de/the-new-system-font-stack/ |
| $pt-font-family: 'Open Sans', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', |
| 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Icons16', |
| // support inline Palantir icons |
| sans-serif; |
| |
| $pt-font-family-monospace: monospace; |
| |
| $pt-font-size: $pt-grid-size * 1.3; |
| $pt-font-size-large: $pt-grid-size * 1.6; |
| $pt-font-size-small: $pt-grid-size * 1.2; |
| |
| // a little bit extra to ensure the height comes out to just over 18px (and browser rounds to 18px) |
| $pt-line-height: ($pt-grid-size * 1.8) / $pt-font-size + 0.0001; |
| |
| // Icon variables |
| |
| $icons16-family: 'Icons16'; |
| $icons20-family: 'Icons20'; |
| |
| $pt-icon-size-standard: 16px; |
| $pt-icon-size-large: 20px; |
| |
| // Grids & dimensions |
| |
| $pt-border-radius: 3px; |
| |
| // Buttons |
| $pt-button-height: $pt-grid-size * 3; |
| $pt-button-height-small: $pt-grid-size * 2.4; |
| $pt-button-height-smaller: $pt-grid-size * 2; |
| $pt-button-height-large: $pt-grid-size * 4; |
| |
| // Inputs |
| $pt-input-height: $pt-grid-size * 3; |
| $pt-input-height-large: $pt-grid-size * 4; |
| $pt-input-height-small: $pt-grid-size * 2.4; |
| |
| // Others |
| $pt-navbar-height: $pt-grid-size * 5; |
| |
| // Z-indices |
| $pt-z-index-base: 0; |
| $pt-z-index-content: $pt-z-index-base + 10; |
| $pt-z-index-overlay: $pt-z-index-content + 10; |
| |
| // Shadow opacities |
| $pt-border-shadow-opacity: 0.1; |
| $pt-drop-shadow-opacity: 0.16; |
| $pt-dark-border-shadow-opacity: $pt-border-shadow-opacity * 2.8; |
| $pt-dark-drop-shadow-opacity: $pt-drop-shadow-opacity * 2.8; |
| |
| // Elevations |
| // all shadow lists must be the same length to avoid flicker in transitions. |
| $pt-elevation-shadow-0: 0 0 0 transparent; |
| $pt-elevation-shadow-1: 0 1px 3px rgba($black, $pt-drop-shadow-opacity); |
| $pt-elevation-shadow-2: 0 3px 9px rgba($black, $pt-drop-shadow-opacity); |
| $pt-elevation-shadow-3: 0 5px 15px rgba($black, $pt-drop-shadow-opacity); |
| $pt-elevation-shadow-4: 0 8px 24px rgba($black, $pt-drop-shadow-opacity); |
| |
| $pt-dark-elevation-shadow-0: 0 0 0 transparent; |
| $pt-dark-elevation-shadow-1: 0 1px 3px rgba($black, $pt-dark-drop-shadow-opacity); |
| $pt-dark-elevation-shadow-2: 0 3px 9px rgba($black, $pt-dark-drop-shadow-opacity); |
| $pt-dark-elevation-shadow-3: 0 5px 15px rgba($black, $pt-dark-drop-shadow-opacity); |
| $pt-dark-elevation-shadow-4: 0 8px 24px rgba($black, $pt-dark-drop-shadow-opacity); |
| |
| // Transitions |
| $pt-transition-ease: cubic-bezier(0.4, 1, 0.75, 0.9); |
| $pt-transition-ease-bounce: cubic-bezier(0.4, 1, 0.75, 0.9); |
| $pt-transition-duration: 30ms; |
| |
| // Light theme styles |
| |
| $pt-input-box-shadow: 0 0 0 1px rgba($black, 0.12), inset 0 1px 3px 0 rgba($black, 0.12); |
| |
| $pt-dialog-box-shadow: $pt-elevation-shadow-4; |
| $pt-popover-box-shadow: $pt-elevation-shadow-3; |
| $pt-tooltip-box-shadow: $pt-popover-box-shadow; |
| |
| // Dark theme styles |
| |
| $pt-dark-input-box-shadow: 0 0 0 1px rgba($black, 0.4), inset 0 1px 3px 0 rgba($black, 0.5); |
| |
| $pt-dark-dialog-box-shadow: $pt-dark-elevation-shadow-4; |
| $pt-dark-popover-box-shadow: $pt-dark-elevation-shadow-3; |
| $pt-dark-tooltip-box-shadow: $pt-dark-popover-box-shadow; |
