@import '../../../sass/_variables.scss'; @import "px-defaults-design/_settings.defaults.scss"; @import "px-mixins-design/_tools.mixins.scss"; $predix-font-family: "GE Inspira Sans", sans-serif !default; //@import "px-typography-design/_base.typography.scss"; body { color: var(--px-base-text-color, $gray14); background: var(--px-base-background-color, $white); } html { font-family: $predix-font-family; font-size : $inuit-base-font-size; } :root { // Defaults --px-base-text-color : #{$gray15}; --px-base-background-color : #{$white}; // Actionable Text & Icons --px-actionable-text-color : #{$primary-default}; --px-actionable-text-color--hover : #{$primary-hover}; --px-actionable-text-color--active : #{$primary-pressed}; --px-selectable-text-color : #{$select-default}; --px-selectable-text-color--hover : #{$select-hover}; --px-selectable-text-color--active : #{$select-pressed}; --px-actionable-alt-text-color : #{$gray15}; --px-actionable-alt-text-color--hover : #{$primary-default}; --px-actionable-alt-text-color--active : #{$primary-pressed}; --px-actionable-disabled-text-color : rgba($gray8, 0.5); // Button Group --px-btn-group-text-color : #{$white}; --px-btn-group-background-color : #{$select-default}; --px-btn-group-background-color--hover : #{$gray6}; --px-btn-group-background-color--pressed : #{$gray8}; --px-btn-group-border-color : transparent; --px-btn-group-border-color--hover : transparent; --px-btn-group-border-color--pressed : transparent; // Buttons --px-btn-color : #{$gray15}; --px-btn-background : #{$gray3}; --px-btn-background--hover : #{$gray6}; --px-btn-background--pressed : #{$gray8}; --px-btn-border-color : transparent; --px-btn-border-color--hover : transparent; --px-btn-border-color--pressed : transparent; --px-btn-shadow : none; --px-btn-shadow--light : none; --px-btn-primary-color : #{$white}; --px-btn-primary-background : #{$gray14}; --px-btn-primary-background--hover : #{$gray16}; --px-btn-primary-background--pressed : #{$gray18}; --px-btn-primary-border-color : transparent; --px-btn-tertiary-color : #{$primary-default}; --px-btn-tertiary-color--hover : #{$primary-hover}; --px-btn-tertiary-color--pressed : #{$primary-pressed}; --px-btn-tertiary-background : #{$white}; --px-btn-tertiary-background--hover : #{$gray4}; --px-btn-tertiary-background--pressed : #{$gray7}; --px-btn-tertiary-border-color : #{$gray8}; --px-btn-disabled-color : rgba($gray8,0.5); --px-btn-disabled-background : transparent; --px-btn-disabled-border-color : rgba($gray8,0.4); --px-btn-call-to-action-color : #{$white}; --px-btn-call-to-action-background : #{$primary-default}; --px-btn-call-to-action-background--hover : #{$primary-hover}; --px-btn-call-to-action-background--pressed : #{$primary-pressed}; --px-btn-call-to-action-disabled-color : #{$white}; --px-btn-call-to-action-disabled-background : #{$cyan5}; --px-btn-icon-border : 0 solid; --px-btn-icon-background : transparent; --px-btn-bare-color : #{$gray15}; --px-btn-bare-color--hover : #{$primary-default}; --px-btn-bare-color--pressed : #{$primary-pressed}; --px-btn-primary-bare-color--visited : #{$primary-default}; --px-btn-primary-bare-color--hover : #{$primary-hover}; --px-btn-primary-bare-color--pressed : #{$primary-pressed}; // Code --px-code-text-color : #{$blue8}; --px-code-background-color : #{$gray1}; --px-code-border-color : transparent; // Forms --px-input-text-color : #{$gray15}; --px-input-label-text-color : #{$gray10}; --px-input-text-color--placeholder : rgba($gray8,0.6); --px-input-text-color--placeholder--focused : rgba($gray8,0.6); --px-input-text-color--help : #{$gray10}; --px-input-background-color : transparent; --px-input-background-color--hover : #{$gray3}; --px-input-background-color--disabled : transparent; --px-input-background-color--focused : #{$primary-light}; --px-input-border-color--outer : #{$gray8}; --px-input-border-color--outer--focused : #{$primary-default}; --px-input-text-color--focused : #{$gray15}; --px-input-text-color--disabled : rgba($gray8,0.5); --px-input-border-color--disabled : rgba($gray8,0.4); --px-input-textarea-background--focused : #{$primary-light}; --px-select-text-color : #{$gray15}; --px-select-background-color : #{$gray3}; --px-select-background-color--hover : #{$gray6}; --px-select-background-color--active : #{$gray8}; --px-select-border-color : transparent; --px-select-text-color : #{$gray15}; --px-multiselect-background-color : #{$gray1}; --px-validation-warning-text-color : #{$status-orange3}; --px-validation-warning-background-color : #{$status-orange1}; --px-validation-error-text-color : #{$status-red3}; --px-validation-error-background-color : #{$status-red1}; --px-validation-success-text-color : #{$status-green3}; --px-validation-success-background-color : #{$status-green1}; // Headings --px-headings-heading-page-color : #{$gray15}; --px-headings-heading-section-color : #{$gray10}; --px-headings-heading-subsection-color : #{$gray15}; --px-headings-heading-subsection-background : rgba($gray8, 0.15); --px-headings-label-color : #{$gray10}; --px-headings-value-color : #{$gray15}; // List UI --px-list-ui-border-color : #{$gray10}; --px-list-ui-separator-color : #{$gray5}; // Tables --px-table-border-color : #{$gray10}; --px-table-separator-color : #{$gray5}; // Toggle --px-toggle__background--checked : #{$primary-default}; --px-toggle__background--checked--hover : #{$primary-hover}; --px-toggle__background--checked--pressed : #{$primary-pressed}; --px-toggle__background--checked--disabled : rgba($gray8,0.5); --px-toggle__background--unchecked : #{$gray3}; --px-toggle__background--unchecked--hover : #{$gray5}; --px-toggle__background--unchecked--pressed : #{$gray9}; --px-toggle__background--unchecked--disabled : #{$white}; --px-toggle__background-border--unchecked : #{$gray8}; --px-toggle__background-border--unchecked--hover : #{$gray10}; --px-toggle__background-border--unchecked--pressed : #{$gray12}; --px-toggle__background-border--unchecked--disabled : rgba($gray8,0.5); --px-toggle__switch : #{$white}; --px-toggle__switch--hover : #{$gray4}; --px-toggle__switch--pressed : #{$gray7}; --px-toggle__switch--disabled : #{$white}; --px-toggle__switch-border : #{$gray8}; --px-toggle__switch-border--hover : #{$gray10}; --px-toggle__switch-border--pressed : #{$gray12}; --px-toggle__switch-border--disabled : rgba($gray8,0.5); /***********************************/ /* Default Theme for Px Components */ /***********************************/ // Alert Label --px-alert-label-border-color : transparent; --px-alert-label-text-color--important : #{$white}; --px-alert-label-background-color--important : #{$status-red3}; --px-alert-label-text-color--warning : #{$white}; --px-alert-label-background-color--warning : #{$status-orange3}; --px-alert-label-text-color--error : #{$yellow10}; --px-alert-label-background-color--error : #{$status-yellow3}; --px-alert-label-text-color--information : #{$white}; --px-alert-label-background-color--information : #{$status-blue3}; --px-alert-label-text-color--healthy : #{$white}; --px-alert-label-background-color--healthy : #{$status-green3}; --px-alert-label-text-color--unknown : #{$white}; --px-alert-label-background-color--unknown : #{$neutral-gray3}; // Alert Message --px-alert-message-background-color : #{$white}; --px-alert-message-text-color : #{$gray15}; --px-alert-message-color--important : #{$status-red3}; --px-alert-message-color--warning : #{$status-orange3}; --px-alert-message-color--error : #{$status-yellow3}; --px-alert-message-color--information : #{$status-blue3}; --px-alert-message-color--unknown : #{$neutral-gray3}; --px-alert-message-dismiss-icon-color : #{$gray8}; // App Nav --px-app-nav-background-color : #{$gray2}; --px-app-nav-item-background-color--collapsed : #{$white}; --px-app-nav-item-background-color--empty : #{$gray4}; --px-app-nav-item-background-color--hover : #{$gray4}; --px-app-nav-item-background-color--pressed : #{$gray5}; --px-app-nav-item-background-color--selected : #{$white}; --px-app-nav-item-background-color : #{$gray2}; --px-app-nav-item-icon-color--collapsed : #{$gray15}; --px-app-nav-item-icon-color--hover : #{$gray15}; --px-app-nav-item-icon-color--pressed : #{$gray15}; --px-app-nav-item-icon-color--selected : #{$gray15}; --px-app-nav-item-icon-color : #{$gray15}; --px-app-nav-item-stripe-color--selected : #{$select-default}; --px-app-nav-item-text-color--collapsed : #{$gray15}; --px-app-nav-item-text-color--hover : #{$gray15}; --px-app-nav-item-text-color--pressed : #{$gray15}; --px-app-nav-item-text-color--selected : #{$gray15}; --px-app-nav-item-text-color : #{$gray15}; --px-app-nav-subitem-background-color--hover : #{$gray1}; --px-app-nav-subitem-background-color--selected : #{$select-default}; --px-app-nav-subitem-background-color : #{$white}; --px-app-nav-subitem-text-color--collapsed : #{$gray15}; --px-app-nav-subitem-text-color--hover : #{$gray15}; --px-app-nav-subitem-text-color--selected : #{$white}; --px-app-nav-subitem-text-color : #{$gray15}; --px-app-nav-subitem-background-color--collapsed : #{$gray2}; --px-app-nav-subitem-background-color--collapsed-hover : #{$gray4}; --px-app-nav-subitem-text-color--parent-collapsed-selected : #{$gray15}; --px-app-nav-subitem-background-color--parent-collapsed-selected : #{$gray2}; --px-app-nav-subitem-accent-color--parent-collapsed-selected : #{$select-default}; --px-app-nav-subitem-background-color--parent-collapsed-hover : #{$gray1}; --px-app-nav-subitem-background-color--parent-collapsed-selected : #{$select-default}; --px-app-nav-subitem-text-color--parent-collapsed-selected : #{$white}; --px-app-nav-subitem-text-color--parent-collapsed-not-selected : #{$gray15}; --px-app-nav-subitem-background-color--parent-collapsed-not-selected: #{$white}; // Branding Bar --px-ge-svg-logo-color : #{$gray8}; --px-branding-bar-background-color : #{$gray17}; --px-branding-bar-logo-and-title-text-color : #{$gray8}; // Card --px-card-background-color : #{$gray1}; --px-card-border-color : #{$gray3}; --px-card-header-color : #{$gray10}; --px-card-icon-color : #{$gray10}; --px-card-action-icon-color : #{$gray10}; --px-card-action-icon-color--hover : #{$primary-default}; --px-card-action-icon-color--pressed : #{$primary-pressed}; // Deck Selector --px-deck-selector-border-color : #{$gray3}; --px-deck-selector-shadow-color : rgba($black, 0.2); --px-deck-selector-background-color : #{$white}; --px-deck-selector-text-color : #{$gray15}; --px-deck-selector-background-color--hover : #{$gray1}; --px-deck-selector-text-color--hover : #{$gray15}; --px-deck-selector-background-color--selected : #{$select-default}; --px-deck-selector-text-color--selected : #{$white}; --px-deck-selector-li-border : #{$gray2}; // Breadcrumbs --px-breadcrumbs-chevron-color : #{$gray4}; //// Charts // Percent Circle --px-percent-circle-fill-color : #{$cyan6}; --px-percent-circle-background-color : #{$gray5}; --px-percent-circle-text-color : #{$gray15}; // Simple Bar Chart --px-simple-bar-chart-text-color : #{$gray15}; --px-simple-bar-chart-background-color : transparent; --px-simple-bar-chart-axis-color : #{$gray10}; // Simple Horizontal Bar Chart --px-simple-horizontal-bar-chart-background-color : transparent; --px-simple-horizontal-bar-chart-legend-text-color : #{$gray15}; --px-simple-horizontal-bar-chart-label-text-color : #{$gray15}; --px-simple-horizontal-bar-chart-axis-color : #{$gray10}; // Simple Line Chart --px-simple-line-chart-background-color : transparent; --px-simple-line-chart-border-color : #{$gray10}; --px-simple-line-chart-grid-color : #{$gray3}; --px-simple-line-chart-bottom-color : transparent; --px-simple-line-chart-axis-bar-color : #{$gray1}; --px-simple-line-chart-axis-label-color : #{$gray10}; --px-simple-line-chart-axis-label-font-weight : normal; --px-simple-line-chart-line-color : #{$cyan6}; --px-simple-line-chart-threshold-line-color : #{$orange5}; // Simple Win-Loss Chart --px-win-loss-border-color : #{$gray10}; --px-win-loss-background-color : transparent; --px-win-loss-positive-fill-color : #{$yellow-green4}; --px-win-loss-negative-fill-color : #{$red4}; // Chip --px-chip-background-color : transparent; --px-chip-background-color--hover : rgba($gray10,0.2); --px-chip-background-color--selected : #{$white}; --px-chip-border-color : #{$gray8}; --px-chip-border-color--hover : #{$gray8}; --px-chip-border-color--selected : #{$primary-default}; --px-chip-text-color : #{$gray10}; --px-chip-text-color--selected : #{$primary-default}; --px-chip-icon-color : #{$gray10}; --px-chip-icon-color--hover : #{$primary-default}; // Clipboard --px-clipboard-icon-color : #{$gray15}; --px-clipboard-icon-color--hover : #{$primary-default}; --px-clipboard-icon-color--pressed : #{$primary-pressed}; --px-clipboard-icon-color--copied : #{$status-green3}; // Context Browser --px-context-browser-header-background-color : #{$gray1}; --px-context-browser-header-border-color : #{$gray3}; --px-context-browser-header-text-color : #{$select-default}; --px-context-browser-icon-stroke : #{$gray15}; --px-context-browser-item-text-color : #{$gray15}; --px-context-browser-item-background-color--hover : #{$gray1}; --px-context-browser-item-background-color--selected : #{$select-default}; --px-context-browser-item-color--selected : #{$white}; --px-context-browser-item-text-color--selected : #{$white}; --px-context-browser-icon-stroke--item-selected : #{$white}; --px-context-browser-panel-border-color : #{$gray3}; --px-context-browser-panel-background-color : #{$white}; --px-context-browser-loading-background-color : #{$primary-default}; --px-context-browser-loading-foreground-color : #{$cyan1}; --px-context-browser-icon-select-stroke : #{$yellow-green8}; --px-context-browser-icon-select-fill : #{$yellow-green5}; --px-context-browser-icon-favorite-stroke : #{$yellow8}; --px-context-browser-icon-favorite-fill : #{$yellow5}; --px-context-browser-trigger-hover-background : #{$gray3}; --px-context-browser-trigger-icon-color : #{$gray15}; // Data Table --px-data-table-border-color : #{$gray10}; --px-data-table-separator-color : #{$gray5}; --px-data-table-header-text-color : inherit; --px-data-table-header-background-color : inherit; --px-data-table-background-color-striped--even : rgba($gray8,0.1); --px-data-table-cell-border-validation--failed : #{$status-red3}; --px-data-table-cell-border-color--edit : #{$primary-default}; --px-data-table-cell-border-color--selected : rgba($gray8,0.2); --px-data-table-cell-border-validation--failed : #{$status-red3}; --px-data-table-cell-background-color--selected : rgba($gray8,0.2); --px-data-table-cell-background-color--edit : transparent; --px-data-table-cell-text-color--selected : #{$gray15}; --px-data-table-cell-text-color-validation--failed : #{$status-red3}; --px-data-table-cell-text-color--sorted : #{$select-default}; --px-data-table-cell-text-color--editing : #{$gray15}; --px-data-table-results-text-color--none : #{$gray8}; --px-data-table-insertion-indicator-td-background-color : #{$primary-default}; --px-data-table-text-input-background-color--filter : #{$white}; --px-data-table-tr--filter : #{$white}; --px-data-table-text-color--dragged : #{$primary-default}; --px-data-table-text-color--hover : #{$primary-hover}; --px-data-table-highlight--high : rgba($status-red3,0.25); --px-data-table-highlight--medium : rgba($status-yellow3,0.25); --px-data-table-highlight--low : rgba($status-blue3,0.25); //// Datetime Components // Calendar Picker --px-calendar-background-color--hover : rgba($gray6,0.2); --px-calendar-background-color--pressed : #{$select-pressed}; --px-calendar-background-color--selected : #{$select-default}; --px-calendar-title-color : #{$gray10}; --px-calendar-text-color : #{$gray15}; --px-calendar-text-color--hover : #{$gray15}; --px-calendar-text-color--selected : #{$white}; --px-calendar-alt-background-color : #{$select-light}; --px-calendar-sub-labels--text-color : #{$gray6}; --px-calendar-today-border : #{$select-default}; //Common --px-datetime-icon-color : #{$gray10}; --px-datetime-read-only-text-color : #{$gray5}; --px-datetime-entry-selected : #{$cyan2}; --px-datetime-preset-title-color : #{$gray10}; --px-datetime-dropdown-content-color : var(--px-base-text-color); // Datetime Field --dt-field-background-color-fix : #{$white}; // Datetime Picker --px-datetime-picker-border-color : #{$gray3}; --px-datetime-picker-background-color : #{$white}; // // Datetime Range Field --px-datetime-range-field-to-color : #{$gray10}; // Datetime Range Panel --px-range-panel-border-color : #{$gray3}; --px-range-panel-background-color : #{$white}; // Demo Snippet --px-demo-snippet-background-color : #{$gray2}; // Dropdown --px-dropdown-bg-color : #{$white}; --px-dropdown-bg-color--hover : #{$gray1}; --px-dropdown-bg-color--selected : #{$select-default}; --px-dropdown-text-color--disabled : #{$gray4}; --px-dropdown-text-color--selected : #{$white}; --px-dropdown-border-color : #{$gray3}; --px-dropdown-text-color : #{$gray15}; // File Upload --px-file-upload-file-list-color : #{$gray10}; --px-file-upload-validation-color : #{$status-red3}; --px-file-upload-dropzone-background-color : #{$primary-light}; // Heatmap Grid --px-heatmap-grid-start-color : #{$gray1}; --px-heatmap-grid-end-color : #{$status-red3}; --px-heatmap-grid-table-border-color : #{$gray4}; // Inbox --px-inbox-border-color : #{$gray3}; --px-inbox-secondary-text-color : #{$gray10}; --px-inbox-li-background-color : #{$gray1}; --px-inbox-li-background-color--selected : #{$select-default}; --px-inbox-li-text-color--selected : #{$white}; --px-inbox-icon-outline-color : #{$white}; --px-inbox-alert-color : #{$status-red3}; --px-inbox-warning-color : #{$status-orange3}; --px-inbox-error-color : #{$status-yellow3}; --px-inbox-information-color : #{$status-blue3}; --px-inbox-height : 100vh; --px-inbox-list-width : 320px; // KPI --px-kpi-text-color : #{$gray15}; --px-kpi-secondary-text-color : #{$gray10}; --px-kpi-border-color : #{$gray10}; --px-kpi-separator-color : #{$gray5}; // Login --px-login-text-color : #{$gray5}; // Map --px-map-icon-unknown-color : #{$neutral-gray5}; --px-map-icon-info-color : #{$primary-default}; --px-map-icon-warning-color : #{$status-orange3}; --px-map-icon-important-color : #{$status-red3}; --px-map-icon-border-color : #{$white}; --px-map-icon-symbol-color : #{$white}; --px-map-marker-group-cluster-path-size : 10px; --px-map-marker-group-cluster-font-size : 15px; --px-map-marker-group-cluster-font-color : #{$primary-default}; --px-map-marker-group-cluster-font-weight : normal; --px-map-marker-group-cluster-font-color : inherit; --px-map-marker-group-cluster-font-size : inherit; --px-map-marker-group-cluster-font-weight : inherit; --px-map-marker-group-cluster-line-height : inherit; --px-map-marker-group-cluster-border-size : 5px; --px-map-marker-group-cluster-border-color : rgba($black,0.3); --px-map-marker-group-cluster-polygon-stroke-color : #{$blue3}; --px-map-marker-group-cluster-polygon-fill-color : #{$blue5}; --px-map-marker-group-cluster-background-color : #{$white}; --px-map-control-button-background-color : #{$white}; --px-map-control-button-text-color : #{$primary-default}; --px-map-control-button-border-width : 3px; --px-map-control-button-border-color : rgba($black,.3); --px-map-control-button-background-color--hover : #{$gray2}; --px-map-control-button-text-color--hover : #{$primary-hover}; --px-map-control-button-border-color--disabled : #{$gray4}; --px-map-control-button-text-color--disabled : #{$gray4}; --px-map-info-control-background-color : #{$white}; --px-map-info-control-border-color : #{$gray4}; --px-map-data-box-border-color__top : #{$gray4}; --px-map-data-box-border-color__left : #{$gray4}; --px-map-popup-content-wrapper-border : #{$gray6}; --px-map-marker-locate-icon-color : #{$primary-default}; --px-map-marker-locate-icon-border-color : #{$white}; --px-map-marker-locate-icon-accuracy-color : #{$black}; --px-map-marker-locate-icon-accuracy-opacity : 0.3; // Modal --px-modal-background-color : #{$white}; --px-modal-overlay-color : rgba($black, .7); --px-modal-border-color : transparent; --px-modal-text-color : #{$gray15}; --px-modal-btn--disabled : #{$gray4}; // Overlay --px-overlay-color : rgba($black, .65); // Popover --px-popover-background-color : #{$white}; --px-popover-border-color : #{$gray3}; --px-popover-text-color : #{$gray15}; --px-popover-shadow-color : rgba($black,0.15); // Progress Bar --px-progress-bar-fill-color : #{$primary-default}; --px-progress-bar-background-color : #{$cyan1}; // Slider --px-slider-border-color : transparent; --px-slider-border-color--disabled : rgba($gray8,0.5); --px-slider-border-color--selected : #{$primary-default}; --px-slider-background-color : rgba($gray8,0.4); --px-slider-background-color--disabled : #{$white}; --px-slider-background-color--selected : #{$primary-default}; --px-slider-background-color--hover : #{$primary-hover}; --px-slider-background-color--pressed : #{$primary-pressed}; --px-slider-progress-border-color--disabled : rgba($gray8,0.5); --px-slider-progress-background-color--disabled : rgba($gray8,0.5); --px-handle-stroke-color : #{$gray8}; --px-handle-stroke-color--hover : #{$gray8}; --px-handle-stroke-color--active : #{$gray8}; --px-handle-color--disabled : rgba($gray8,0.5); --px-handle-background-color : #{$white}; --px-handle-background-color--hover : #{$gray4}; --px-handle-background-color--active : #{$gray7}; --px-handle-background-color--disabled : #{$white}; --px-slider-label-color : #{$gray15}; // Spinner --px-spinner-fill-color : #{$primary-default}; --px-spinner-background-color : #{$cyan1}; // Table View --px-table-row-color : inherit; --px-table-row-background-color : #{$white}; --px-table-row-selected-background-color : #{$select-default}; --px-table-row-selected-color : #{$white}; --px-table-row-title-color : inherit; --px-table-row-subtitle-color : #{$gray8}; --px-table-row-body-color : #{$gray10}; --px-table-row-label-color : #{$gray10}; --px-table-row-header-color : inherit; --px-table-row-header-background-color : #{$gray2}; --px-table-row-border-color : #{$gray10}; --px-table-row-separator-color : #{$gray5}; --px-table-row-button-color-alert : #{$status-red3}; --px-table-row-button-color-alert-hover : #{$status-red2}; --px-table-row-button-color-alert-pressed : #{$status-red4}; --px-table-row-button-color-warn : #{$status-orange3}; --px-table-row-button-color-warn-hover : #{$status-orange2}; --px-table-row-button-color-warn-pressed : #{$status-orange4}; --px-table-row-button-color-primary : #{$primary-default}; --px-table-row-button-color-primary-hover : #{$primary-hover}; --px-table-row-button-color-primary-pressed : #{$primary-pressed}; --px-table-row-button-color-info : #{$gray10}; --px-table-row-button-color-info-hover : #{$gray8}; --px-table-row-button-color-info-pressed : #{$gray12}; --px-table-row-button-font-color : #{$white}; // Tabs --px-tab-color : #{$gray10}; --px-tab-color--hover : #{$select-default}; --px-tab-color--active : #{$select-pressed}; --px-tab-color--selected : #{$select-default}; --px-tab-border-color : #{$gray5}; // Tile --px-tile-background-color : #{$gray1}; --px-tile-thumbnail-background-color : #{$white}; --px-tile-overlay-background-color : #{$gray17}; --px-tile-overlay-text-color : #{$gray1}; // Timeline --px-timeline-border-color : #{$gray10}; --px-timeline-text-color : #{$gray15}; --px-timeline-alt-text-color : #{$gray10}; --px-timeline-quote-mark-color : #{$gray2}; // Tree --px-tree-text-color--hover : #{$gray15}; --px-tree-background-color--hover : #{$gray1}; --px-tree-text-color--selected : #{$white}; --px-tree-background-color--selected : #{$select-default}; // Tooltip --px-tooltip-background-color : #{$white}; --px-tooltip-text-color : #{$gray15}; --px-tooltip-border-color : #{$gray3}; --px-tooltip-shadow-color : rgba($black,0.15); // Typeahead --px-typeahead-background-color : #{$white}; --px-typeahead-background-color--hover : #{$gray1}; --px-typeahead-background-color--selected : #{$select-default}; --px-typeahead-border-color : #{$gray3}; --px-typeahead-box-shadow-color : rgba($black,0.15); --px-typeahead-text-color : #{$gray15}; --px-typeahead-text-color--hover : #{$gray15}; --px-typeahead-text-color--selected : #{$white}; --px-typeahead-icon-color : #{$gray15}; --px-typeahead-icon-color--disabled : rgba($gray8, 0.5); // View Header --px-view-header-background-color : #{$gray2}; --px-view-header-title-color : #{$gray15}; --px-view-header-subtitle-color : #{$gray10}; // // Vis --px-vis-font-family : "GE Inspira Sans"; --px-vis-axis-brush-outline-color : #{$primary-default}; --px-vis-axis-brush-fill-color : #{$gray7}; --px-vis-axis-brush-fill-opacity : 0.3; --px-vis-axis-color : #{$gray10}; --px-vis-axis-title-color : #{$gray10}; --px-vis-axis-common-tick-color : #{$gray10}; --px-vis-axis-inline-title-color : #{$gray5}; --px-vis-axis-inline-type-color : #{$white}; --px-vis-axis-inline-box-color : #{$gray5}; --px-dynamic-menu-icon-color : #{$primary-default}; --px-dynamic-menu-background-color : #{$white}; --px-dynamic-menu-border-color : #{$gray3}; --px-dynamic-menu-text-color : #{$gray15}; --px-dynamic-menu-item-background-color : #{$select-default}; --px-dynamic-menu-item-text-color : #{$white}; --px-vis-nav-brush-outline-color : #{$gray10}; --px-vis-nav-brush-fill-color : #{$gray10}; --px-vis-nav-brush-opacity : 0.2; --px-vis-nav-brush-gradient-fill-color : #{$gray10}; --px-vis-nav-brush-gradient-opacity-1 : 0.1; --px-vis-nav-brush-gradient-opacity-2 : 0.8; --px-vis-nav-brush-handle-fill-color : #{$white}; --px-vis-nav-brush-handle-lines-color : #{$gray10}; --px-vis-nav-brush-handle-fill-color-hover : #{$gray10}; --px-vis-nav-brush-handle-lines-color-hover : #{$gray12}; --px-vis-nav-brush-handle-fill-color-press : #{$gray12}; --px-vis-nav-brush-handle-lines-color-press : #{$gray14}; --px-vis-cursor-line-color : #{$gray7}; --px-vis-event-line-color : #{$gray8}; --px-vis-event-icon-color : #{$gray10}; --px-vis-gridlines-color : #{$gray3}; --px-vis-pie-empty-color : #{$neutral-gray2}; --px-vis-threshold-color : #{$gray12}; --px-vis-zoom-brush-outline-color : #{$gray7}; --px-vis-zoom-brush-fill-color : #{$gray2}; --px-vis-zoom-brush-fill-opacity : 0.5; --px-vis-lasso-outline-color : #{$gray12}; --px-vis-lasso-fill-color : none; --px-vis-lasso-fill-opacity : 0.5; // Vis CSS --px-vis-pie-title-color : #{$gray10}; --px-vis-pie-title-value-color : #{$gray15}; --px-vis-pie-title-font-size : 45px; --px-vis-pie-title-value-font-size : 45px; --px-vis-register-series-name : #{$gray10}; --px-vis-register-data-value : #{$gray15}; --px-vis-register-box : #{$gray3}; --px-vis-toolbar-icon-color : #{$gray15}; --px-vis-toolbar-selected-color : #{$primary-default}; --px-vis-toolbar-hover-color : #{$primary-hover}; --px-vis-toolbar-active-color : #{$primary-default}; --px-vis-toolbar-subrow-background-color : rgba($gray6, 0.5); --px-vis-toolbar-submenu-z-index : 2; // Vis Data Vis // Colors MUST start at 0 and cannot contain gaps. --px-vis-series-color-0 : #{$cyan6}; --px-vis-series-color-1 : #{$orange6}; --px-vis-series-color-2 : #{$yellow-green6}; --px-vis-series-color-3 : #{$violet6}; --px-vis-series-color-4 : #{$salmon6}; --px-vis-series-color-5 : #{$blue6}; --px-vis-series-color-6 : #{$purple6}; --px-vis-series-color-7 : #{$teal6}; --px-vis-series-color-8 : #{$pink6}; --px-vis-series-color-9 : #{$green6}; --px-vis-series-color-10 : #{$red6}; --px-vis-series-color-11 : #{$aqua6}; --px-vis-series-color-12 : #{$yellow6}; --px-vis-series-color-13 : #{$neutral-gray6}; --px-vis-series-color-14 : #{$brown6}; --px-vis-series-color-15 : #{$cyan4}; --px-vis-series-color-16 : #{$orange4}; --px-vis-series-color-17 : #{$yellow-green4}; --px-vis-series-color-18 : #{$violet4}; --px-vis-series-color-19 : #{$salmon4}; --px-vis-series-color-20 : #{$blue4}; --px-vis-series-color-21 : #{$purple4}; --px-vis-series-color-22 : #{$teal4}; --px-vis-series-color-23 : #{$pink4}; --px-vis-series-color-24 : #{$green4}; --px-vis-series-color-25 : #{$red4}; --px-vis-series-color-26 : #{$aqua4}; --px-vis-series-color-27 : #{$yellow4}; --px-vis-series-color-28 : #{$neutral-gray4}; --px-vis-series-color-29 : #{$brown4}; --px-vis-series-color-30 : #{$cyan2}; --px-vis-series-color-31 : #{$orange2}; --px-vis-series-color-32 : #{$yellow-green2}; --px-vis-series-color-33 : #{$violet2}; --px-vis-series-color-34 : #{$salmon2}; --px-vis-series-color-35 : #{$blue2}; --px-vis-series-color-36 : #{$purple2}; --px-vis-series-color-37 : #{$teal2}; --px-vis-series-color-38 : #{$pink2}; --px-vis-series-color-39 : #{$green2}; --px-vis-series-color-40 : #{$red2}; --px-vis-series-color-41 : #{$aqua2}; --px-vis-series-color-42 : #{$yellow2}; --px-vis-series-color-43 : #{$neutral-gray2}; --px-vis-series-color-44 : #{$brown2}; --px-vis-series-color-45 : #{$cyan8}; --px-vis-series-color-46 : #{$orange8}; --px-vis-series-color-47 : #{$yellow-green8}; --px-vis-series-color-48 : #{$violet8}; --px-vis-series-color-49 : #{$salmon8}; --px-vis-series-color-50 : #{$blue8}; --px-vis-series-color-51 : #{$purple8}; --px-vis-series-color-52 : #{$teal8}; --px-vis-series-color-53 : #{$pink8}; --px-vis-series-color-54 : #{$green8}; --px-vis-series-color-55 : #{$red8}; --px-vis-series-color-56 : #{$aqua8}; --px-vis-series-color-57 : #{$yellow8}; --px-vis-series-color-58 : #{$neutral-gray8}; --px-vis-series-color-59 : #{$brown8}; --px-vis-series-color-60 : #{$cyan5}; --px-vis-series-color-61 : #{$orange5}; --px-vis-series-color-62 : #{$yellow-green5}; --px-vis-series-color-63 : #{$violet5}; --px-vis-series-color-64 : #{$salmon5}; --px-vis-series-color-65 : #{$blue5}; --px-vis-series-color-66 : #{$purple5}; --px-vis-series-color-67 : #{$teal5}; --px-vis-series-color-68 : #{$pink5}; --px-vis-series-color-69 : #{$green5}; --px-vis-series-color-70 : #{$red5}; --px-vis-series-color-71 : #{$aqua5}; --px-vis-series-color-72 : #{$yellow5}; --px-vis-series-color-73 : #{$neutral-gray5}; --px-vis-series-color-74 : #{$brown5}; --px-vis-series-color-75 : #{$cyan3}; --px-vis-series-color-76 : #{$orange3}; --px-vis-series-color-77 : #{$yellow-green3}; --px-vis-series-color-78 : #{$violet3}; --px-vis-series-color-79 : #{$salmon3}; --px-vis-series-color-80 : #{$blue3}; --px-vis-series-color-81 : #{$purple3}; --px-vis-series-color-82 : #{$teal3}; --px-vis-series-color-83 : #{$pink3}; --px-vis-series-color-84 : #{$green3}; --px-vis-series-color-85 : #{$red3}; --px-vis-series-color-86 : #{$aqua3}; --px-vis-series-color-87 : #{$yellow3}; --px-vis-series-color-88 : #{$neutral-gray3}; --px-vis-series-color-89 : #{$brown3}; --px-vis-series-color-90 : #{$cyan1}; --px-vis-series-color-91 : #{$orange1}; --px-vis-series-color-92 : #{$yellow-green1}; --px-vis-series-color-93 : #{$violet1}; --px-vis-series-color-94 : #{$salmon1}; --px-vis-series-color-95 : #{$blue1}; --px-vis-series-color-96 : #{$purple1}; --px-vis-series-color-97 : #{$teal1}; --px-vis-series-color-98 : #{$pink1}; --px-vis-series-color-99 : #{$green1}; --px-vis-series-color-100 : #{$red1}; --px-vis-series-color-101 : #{$aqua1}; --px-vis-series-color-102 : #{$yellow1}; --px-vis-series-color-103 : #{$neutral-gray1}; --px-vis-series-color-104 : #{$brown1}; --px-vis-series-color-105 : #{$cyan9}; --px-vis-series-color-106 : #{$orange9}; --px-vis-series-color-107 : #{$yellow-green9}; --px-vis-series-color-108 : #{$violet9}; --px-vis-series-color-109 : #{$salmon9}; --px-vis-series-color-110 : #{$blue9}; --px-vis-series-color-111 : #{$purple9}; --px-vis-series-color-112 : #{$teal9}; --px-vis-series-color-113 : #{$pink9}; --px-vis-series-color-114 : #{$green9}; --px-vis-series-color-115 : #{$red9}; --px-vis-series-color-116 : #{$aqua9}; --px-vis-series-color-117 : #{$yellow9}; --px-vis-series-color-118 : #{$neutral-gray9}; --px-vis-series-color-119 : #{$brown9}; --px-vis-series-color-120 : #{$cyan7}; --px-vis-series-color-121 : #{$orange7}; --px-vis-series-color-122 : #{$yellow-green7}; --px-vis-series-color-123 : #{$violet7}; --px-vis-series-color-124 : #{$salmon7}; --px-vis-series-color-125 : #{$blue7}; --px-vis-series-color-126 : #{$purple7}; --px-vis-series-color-127 : #{$teal7}; --px-vis-series-color-128 : #{$pink7}; --px-vis-series-color-129 : #{$green7}; --px-vis-series-color-130 : #{$red7}; --px-vis-series-color-131 : #{$aqua7}; --px-vis-series-color-132 : #{$yellow7}; --px-vis-series-color-133 : #{$neutral-gray7}; --px-vis-series-color-134 : #{$brown7}; --px-vis-series-color-135 : #{$cyan10}; --px-vis-series-color-136 : #{$orange10}; --px-vis-series-color-137 : #{$yellow-green10}; --px-vis-series-color-138 : #{$violet10}; --px-vis-series-color-139 : #{$salmon10}; --px-vis-series-color-140 : #{$blue10}; --px-vis-series-color-141 : #{$purple10}; --px-vis-series-color-142 : #{$teal10}; --px-vis-series-color-143 : #{$pink10}; --px-vis-series-color-144 : #{$green10}; --px-vis-series-color-145 : #{$red10}; --px-vis-series-color-146 : #{$aqua10}; --px-vis-series-color-147 : #{$yellow10}; --px-vis-series-color-148 : #{$neutral-gray10}; --px-vis-series-color-149 : #{$brown10}; // Gauge styles --px-gauge-fill-error-color : #{$status-red3}; --px-gauge-fill-anomaly-color : #{$status-yellow3}; --px-gauge-fill-abnormal-color : #{$status-orange3}; --px-gauge-fill-normal-color : #{$status-blue3}; --px-gauge-empty-color : #{$gray5}; --px-gauge-needle-color : #{$gray15}; }