grafana/public/sass/_variables.dark.generated.scss

/***
 * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
 *
 * Do not modify this file!
 * - Edit grafana-ui/src/themes/dark.ts to regenerate
 * - Edit grafana-ui/src/themes/_variables.dark.scss.tmpl.ts to update template
 *
 * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
 */

@use 'sass:color';
// Global values
// --------------------------------------------------

$theme-name: dark;

// New Colors
// -------------------------
$blue-base: #3d71d9;
$red-base: #d10e5c;
$green-base: #1a7f4b;

// Grays
// -------------------------
$black: #000000;
$dark-1: #141414;
$dark-3: #1f1f20;
$dark-6: #262628;
$dark-9: #343436;
$dark-10: #424345;
$gray-1: #555555;
$gray-2: #8e8e8e;
$gray-6: #f4f5f8;

$white: #ffffff;

$layer2: #22252b;

// Accent colors
// -------------------------
$blue: #33a2e5;
$red: $red-base;
$yellow: #ecbb13;
$purple: #9933cc;

// Scaffolding
// -------------------------
$body-bg: #111217;

$text-color: rgb(204, 204, 220);
$text-color-weak: rgba(204, 204, 220, 0.65);
$text-color-emphasis: #ffffff;


// Links
// -------------------------
$link-color: rgb(204, 204, 220);
$link-color-disabled: rgba(204, 204, 220, 0.6);
$link-hover-color: #ffffff;

// Typography
// -------------------------
$text-muted: $text-color-weak;

// Panel
// -------------------------
$panel-bg: #181b1f;

// page header
$page-header-bg: #111217;
$page-header-shadow: inset 0px -4px 14px $dark-3;
$page-header-border-color: #111217;

// Graphite Target Editor
$tight-form-func-bg: #22252b;

$code-tag-bg: $dark-1;
$code-tag-border: $dark-9;

// cards
$card-background: #22252b;
$card-background-hover: rgb(40, 43, 49);
$card-shadow: none;

// Lists
$list-item-bg: $card-background;

$empty-list-cta-bg: #22252b;

// Scrollbars
$scrollbarBackground: #404357;
$scrollbarBackground2: $dark-10;

// Tables
// -------------------------
$table-bg-accent: #22252b;

// Buttons
// -------------------------
$btn-inverse-bg-hl: color.adjust($dark-6, $lightness: 4%);

$btn-divider-left: $dark-9;
$btn-divider-right: $dark-3;

$btn-drag-image: '../img/grab_dark.svg';

// Forms
// -------------------------
$input-bg: #111217;

$input-color: rgb(204, 204, 220);
$input-border-color: rgba(204, 204, 220, 0.2);

// Dropdowns
// -------------------------
$dropdownBackground: #181b1f;
$dropdownBorder: rgba(204, 204, 220, 0.12);
$dropdownDividerTop: rgba(204, 204, 220, 0.12);
$dropdownDividerBottom: rgba(204, 204, 220, 0.12);

$dropdownLinkColor: $link-color;
$dropdownLinkColorHover: $white;
$dropdownLinkColorActive: $white;
$dropdownLinkBackgroundHover: $dark-9;

// Menu dropdowns
// -------------------------
$menu-dropdown-bg: #181b1f;
$menu-dropdown-hover-bg: rgba(204, 204, 220, 0.16);
$menu-dropdown-shadow: 0px 8px 24px rgb(1, 4, 9);

// Form states and alerts
// -------------------------
$alert-error-bg: #d10e5c;
$alert-success-bg: #1a7f4b;
$alert-warning-bg: #ff9900;
$alert-info-bg: #ff9900;

// Tooltips and popovers
// -------------------------
$tooltipLinkColor: $link-color;
$tooltipExternalLinkColor: #6e9fff;
$graph-tooltip-bg: $dark-1;

$tooltipBackground: #22252b;
$tooltipColor: rgb(204, 204, 220);

$popover-bg: #181b1f;
$popover-color: rgb(204, 204, 220);
$popover-border-color: rgba(204, 204, 220, 0.12);
$popover-header-bg: #22252b;
$popover-shadow: 0px 8px 24px rgb(1, 4, 9);

$popover-help-bg: $tooltipBackground;
$popover-help-color: $text-color;
$popover-error-bg: $red-base;

// images
$checkboxImageUrl: '../img/checkbox.png';

// info box
$info-box-border-color: $blue-base;

//Switch Slider
// -------------------------
$switch-bg: $input-bg;
$switch-slider-color: $dark-3;
$switch-slider-off-bg: $gray-1;
$switch-slider-on-bg: #5794f2;
$switch-slider-shadow: 0 0 3px black;

//Checkbox
// -------------------------
$checkbox-bg: $dark-1;
$checkbox-border: 1px solid $gray-1;
$checkbox-checked-bg: linear-gradient(0deg, #eb7b18, #d44a3a);
$checkbox-color: $dark-1;