Remove unused SASS variables (#12603)

* Comment out unused vars

* Remove unused sass vars

public/sass/_variables.dark.scss

@@ -93,24 +93,14 @@ $headings-color: darken($white, 11%);
 $abbr-border-color: $gray-3 !default;
 $text-muted: $text-color-weak;
 
-$blockquote-small-color: $gray-3 !default;
-$blockquote-border-color: $gray-4 !default;
-
 $hr-border-color: rgba(0, 0, 0, 0.1) !default;
 
-// Components
-$component-active-color: #fff !default;
-$component-active-bg: $brand-primary !default;
-
 // Panel
 // -------------------------
 $panel-bg: #212124;
 $panel-border-color: $dark-1;
 $panel-border: solid 1px $panel-border-color;
-$panel-drop-zone-bg: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px);
 $panel-header-hover-bg: $dark-4;
-$panel-header-menu-hover-bg: $dark-5;
-$panel-edit-shadow: 0 -30px 30px -30px $black;
 
 // page header
 $page-header-bg: linear-gradient(90deg, #292a2d, black);
@@ -205,7 +195,6 @@ $input-box-shadow-focus: rgba(102, 175, 233, 0.6);
 $input-color-placeholder: $gray-1 !default;
 $input-label-bg: $gray-blue;
 $input-label-border-color: $dark-3;
-$input-invalid-border-color: lighten($red, 5%);
 
 // Search
 $search-shadow: 0 0 30px 0 $black;
@@ -223,7 +212,6 @@ $dropdownBorder: rgba(0, 0, 0, 0.2);
 $dropdownDividerTop: transparent;
 $dropdownDividerBottom: #444;
 $dropdownDivider: $dropdownDividerBottom;
-$dropdownTitle: $link-color-disabled;
 
 $dropdownLinkColor: $text-color;
 $dropdownLinkColorHover: $white;
@@ -232,8 +220,6 @@ $dropdownLinkColorActive: $white;
 $dropdownLinkBackgroundActive: $dark-4;
 $dropdownLinkBackgroundHover: $dark-4;
 
-$dropdown-link-color: $gray-3;
-
 // COMPONENT VARIABLES
 // --------------------------------------------------
 
@@ -246,22 +232,13 @@ $horizontalComponentOffset: 180px;
 
 // Wells
 // -------------------------
-$wellBackground: #131517;
 
 $navbarHeight: 55px;
-$navbarBackgroundHighlight: $dark-3;
 $navbarBackground: $panel-bg;
 $navbarBorder: 1px solid $dark-3;
 $navbarShadow: 0 0 20px black;
 
-$navbarText: $gray-4;
 $navbarLinkColor: $gray-4;
-$navbarLinkColorHover: $white;
-$navbarLinkColorActive: $navbarLinkColorHover;
-$navbarLinkBackgroundHover: transparent;
-$navbarLinkBackgroundActive: $navbarBackground;
-$navbarBrandColor: $link-color;
-$navbarDropdownShadow: inset 0px 4px 10px -4px $body-bg;
 
 $navbarButtonBackground: $navbarBackground;
 $navbarButtonBackgroundHighlight: $body-bg;
@@ -275,20 +252,15 @@ $side-menu-bg-mobile: $side-menu-bg;
 $side-menu-item-hover-bg: $dark-2;
 $side-menu-shadow: 0 0 20px black;
 $side-menu-link-color: $link-color;
-$breadcrumb-hover-hl: #111;
 
 // Menu dropdowns
 // -------------------------
 $menu-dropdown-bg: $body-bg;
 $menu-dropdown-hover-bg: $dark-2;
-$menu-dropdown-border-color: $dark-3;
 $menu-dropdown-shadow: 5px 5px 20px -5px $black;
 
 // Breadcrumb
 // -------------------------
-$page-nav-bg: $black;
-$page-nav-shadow: 5px 5px 20px -5px $black;
-$page-nav-breadcrumb-color: $gray-3;
 
 // Tabs
 // -------------------------
@@ -296,9 +268,6 @@ $tab-border-color: $dark-4;
 
 // Pagination
 // -------------------------
-$paginationBackground: $body-bg;
-$paginationBorder: transparent;
-$paginationActiveBackground: $blue;
 
 // Form states and alerts
 // -------------------------
@@ -343,10 +312,6 @@ $info-box-color: $gray-4;
 $footer-link-color: $gray-2;
 $footer-link-hover: $gray-4;
 
-// collapse box
-$collapse-box-body-border: $dark-5;
-$collapse-box-body-error-border: $red;
-
 // json-explorer
 $json-explorer-default-color: $text-color;
 $json-explorer-string-color: #23d662;
@@ -357,7 +322,6 @@ $json-explorer-undefined-color: rgb(239, 143, 190);
 $json-explorer-function-color: #fd48cb;
 $json-explorer-rotate-time: 100ms;
 $json-explorer-toggler-opacity: 0.6;
-$json-explorer-toggler-color: #45376f;
 $json-explorer-bracket-color: #9494ff;
 $json-explorer-key-color: #23a0db;
 $json-explorer-url-color: #027bff;

public/sass/_variables.light.scss

@@ -90,25 +90,15 @@ $headings-color: $text-color;
 $abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 
-$blockquote-small-color: $gray-2 !default;
-$blockquote-border-color: $gray-3 !default;
-
 $hr-border-color: $dark-3 !default;
 
-// Components
-$component-active-color: $white !default;
-$component-active-bg: $brand-primary !default;
-
 // Panel
 // -------------------------
 
 $panel-bg: $white;
 $panel-border-color: $gray-5;
 $panel-border: solid 1px $panel-border-color;
-$panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px);
 $panel-header-hover-bg: $gray-6;
-$panel-header-menu-hover-bg: $gray-4;
-$panel-edit-shadow: 0 0 30px 20px $black;
 
 // Page header
 $page-header-bg: linear-gradient(90deg, $white, $gray-7);
@@ -201,7 +191,6 @@ $input-box-shadow-focus: $blue !default;
 $input-color-placeholder: $gray-4 !default;
 $input-label-bg: $gray-5;
 $input-label-border-color: $gray-5;
-$input-invalid-border-color: lighten($red, 5%);
 
 // Sidemenu
 // -------------------------
@@ -215,15 +204,10 @@ $side-menu-link-color: $gray-6;
 // -------------------------
 $menu-dropdown-bg: $gray-7;
 $menu-dropdown-hover-bg: $gray-6;
-$menu-dropdown-border-color: $gray-4;
 $menu-dropdown-shadow: 5px 5px 10px -5px $gray-1;
 
 // Breadcrumb
 // -------------------------
-$page-nav-bg: $gray-5;
-$page-nav-shadow: 5px 5px 20px -5px $gray-4;
-$page-nav-breadcrumb-color: $black;
-$breadcrumb-hover-hl: #d9dadd;
 
 // Tabs
 // -------------------------
@@ -245,7 +229,6 @@ $dropdownBorder: $gray-4;
 $dropdownDividerTop: $gray-6;
 $dropdownDividerBottom: $white;
 $dropdownDivider: $dropdownDividerTop;
-$dropdownTitle: $gray-3;
 
 $dropdownLinkColor: $dark-3;
 $dropdownLinkColorHover: $link-color;
@@ -271,24 +254,16 @@ $horizontalComponentOffset: 180px;
 
 // Wells
 // -------------------------
-$wellBackground: $gray-3;
 
 // Navbar
 // -------------------------
 
 $navbarHeight: 52px;
-$navbarBackgroundHighlight: $white;
 $navbarBackground: $white;
 $navbarBorder: 1px solid $gray-4;
 $navbarShadow: 0 0 3px #c1c1c1;
 
-$navbarText: #444;
 $navbarLinkColor: #444;
-$navbarLinkColorHover: #000;
-$navbarLinkColorActive: #333;
-$navbarLinkBackgroundHover: transparent;
-$navbarLinkBackgroundActive: darken($navbarBackground, 6.5%);
-$navbarDropdownShadow: inset 0px 4px 7px -4px darken($body-bg, 20%);
 
 $navbarBrandColor: $navbarLinkColor;
 
@@ -299,9 +274,6 @@ $navbar-button-border: $gray-4;
 
 // Pagination
 // -------------------------
-$paginationBackground: $gray-2;
-$paginationBorder: transparent;
-$paginationActiveBackground: $blue;
 
 // Form states and alerts
 // -------------------------
@@ -346,8 +318,6 @@ $footer-link-color: $gray-3;
 $footer-link-hover: $dark-5;
 
 // collapse box
-$collapse-box-body-border: $gray-4;
-$collapse-box-body-error-border: $red;
 
 // json explorer
 $json-explorer-default-color: black;
@@ -359,7 +329,6 @@ $json-explorer-undefined-color: rgb(202, 11, 105);
 $json-explorer-function-color: #ff20ed;
 $json-explorer-rotate-time: 100ms;
 $json-explorer-toggler-opacity: 0.6;
-$json-explorer-toggler-color: #45376f;
 $json-explorer-bracket-color: blue;
 $json-explorer-key-color: #00008b;
 $json-explorer-url-color: blue;

public/sass/_variables.scss

@@ -3,13 +3,7 @@
 // Quickly modify global styling by enabling or disabling optional features.
 
 $enable-flex: true !default;
-$enable-rounded: true !default;
-$enable-shadows: false !default;
-$enable-gradients: false !default;
-$enable-transitions: false !default;
 $enable-hover-media-query: false !default;
-$enable-grid-classes: true !default;
-$enable-print-styles: true !default;
 
 // Spacing
 //
@@ -53,9 +47,9 @@ $enable-flex: true;
 // Typography
 // -------------------------
 
-$font-family-sans-serif: "Roboto", Helvetica, Arial, sans-serif;
-$font-family-serif: Georgia, "Times New Roman", Times, serif;
-$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
+$font-family-sans-serif: 'Roboto', Helvetica, Arial, sans-serif;
+$font-family-serif: Georgia, 'Times New Roman', Times, serif;
+$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
 $font-family-base: $font-family-sans-serif !default;
 
 $font-size-root: 14px !default;
@@ -90,16 +84,12 @@ $lead-font-size: 1.25rem !default;
 $lead-font-weight: 300 !default;
 
 $headings-margin-bottom: ($spacer / 2) !default;
-$headings-font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $headings-font-weight: 400 !default;
 $headings-line-height: 1.1 !default;
 
-$blockquote-font-size: ($font-size-base * 1.25) !default;
-$blockquote-border-width: 0.25rem !default;
-
 $hr-border-width: $border-width !default;
 $dt-font-weight: bold !default;
-$list-inline-padding: 5px !default;
 
 // Components
 //
@@ -112,9 +102,6 @@ $border-radius: 3px !default;
 $border-radius-lg: 5px !default;
 $border-radius-sm: 2px!default;
 
-$caret-width: 0.3em !default;
-$caret-width-lg: $caret-width !default;
-
 // Page
 
 $page-sidebar-width: 11rem;
@@ -130,7 +117,6 @@ $link-hover-decoration: none !default;
 // Customizes the `.table` component with basic values, each used across all table variations.
 
 $table-cell-padding: 4px 10px !default;
-$table-sm-cell-padding: 0.3rem !default;
 
 // Forms
 $input-padding-x: 10px !default;
@@ -139,31 +125,18 @@ $input-line-height: 18px !default;
 
 $input-btn-border-width: 1px;
 $input-border-radius: 0 $border-radius $border-radius 0 !default;
-$input-border-radius-lg: 0 $border-radius-lg $border-radius-lg 0 !default;
 $input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default;
 
 $label-border-radius: $border-radius 0 0 $border-radius !default;
-$label-border-radius-lg: $border-radius-lg 0 0 $border-radius-lg !default;
 $label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default;
 
-$input-padding-x-sm: 7px !default;
 $input-padding-y-sm: 4px !default;
 
 $input-padding-x-lg: 20px !default;
 $input-padding-y-lg: 10px !default;
 
-$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2))
-  !default;
-$input-height-lg: (
-     ($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)
-  )
-  !default;
-$input-height-sm: (
-     ($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)
-  )
-  !default;
+$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;
 
-$form-group-margin-bottom: $spacer-y !default;
 $gf-form-margin: 0.2rem;
 
 $cursor-disabled: not-allowed !default;
@@ -221,9 +194,9 @@ $panel-padding: 0px 10px 5px 10px;
 $tabs-padding: 10px 15px 9px;
 
 $external-services: (
-    github: (bgColor: #464646, borderColor: #393939, icon: ""),
-    google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ""),
-    grafanacom: (bgColor: inherit, borderColor: #393939, icon: ""),
-    oauth: (bgColor: inherit, borderColor: #393939, icon: "")
+    github: (bgColor: #464646, borderColor: #393939, icon: ''),
+    google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ''),
+    grafanacom: (bgColor: inherit, borderColor: #393939, icon: ''),
+    oauth: (bgColor: inherit, borderColor: #393939, icon: '')
   )
   !default;