From 7104782a7412af917b4c172ed0d518fdaca775d9 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Tue, 15 Oct 2024 13:38:42 +0100
Subject: [PATCH] Chore: Remove unused sass variables (#94723)

---
 .../src/themes/_variables.dark.scss.tmpl.ts   | 232 +-----------------
 .../src/themes/_variables.light.scss.tmpl.ts  | 231 +----------------
 public/sass/_variables.dark.generated.scss    | 232 +-----------------
 public/sass/_variables.light.generated.scss   | 229 +----------------
 4 files changed, 8 insertions(+), 916 deletions(-)

diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
index 2f57b80ef7a..82804c8254a 100644
--- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
@@ -12,143 +12,66 @@ export const darkThemeVarsTemplate = (theme: GrafanaTheme2) =>
 
 $theme-name: dark;
 
-$colors-action-hover: ${theme.colors.action.hover};
-$colors-action-selected: ${theme.colors.action.selected};
-
 // New Colors
 // -------------------------
-$blue-light: ${theme.colors.primary.text};
 $blue-base: ${theme.colors.primary.main};
-$blue-shade: ${theme.colors.primary.shade};
 $red-base: ${theme.colors.error.main};
-$red-shade: ${theme.colors.error.shade};
 $green-base: ${theme.colors.success.main};
-$green-shade: ${theme.colors.success.shade};
-$orange-dark: ${theme.v1.palette.orangeDark};
-
-$gray98: ${theme.v1.palette.gray98};
-$gray95: ${theme.v1.palette.gray95};
-$gray85: ${theme.v1.palette.gray85};
-$gray70: ${theme.v1.palette.gray70};
-$gray60: ${theme.v1.palette.gray60};
-$gray33: ${theme.v1.palette.gray33};
-$gray25: ${theme.v1.palette.gray25};
-$gray15: ${theme.v1.palette.gray15};
-$gray10: ${theme.v1.palette.gray10};
-$gray05: ${theme.v1.palette.gray05};
 
 // Grays
 // -------------------------
 $black: ${theme.v1.palette.black};
 $dark-1: ${theme.v1.palette.dark1};
-$dark-2: ${theme.v1.palette.dark2};
 $dark-3: ${theme.v1.palette.dark3};
-$dark-4: ${theme.v1.palette.dark4};
-$dark-5: ${theme.v1.palette.dark5};
 $dark-6: ${theme.v1.palette.dark6};
-$dark-7: ${theme.v1.palette.dark7};
-$dark-8: ${theme.v1.palette.dark8};
 $dark-9: ${theme.v1.palette.dark9};
 $dark-10: ${theme.v1.palette.dark10};
 $gray-1: ${theme.v1.palette.gray1};
 $gray-2: ${theme.v1.palette.gray2};
-$gray-3: ${theme.v1.palette.gray3};
-$gray-4: ${theme.v1.palette.gray4};
-$gray-5: ${theme.v1.palette.gray5};
 $gray-6: ${theme.v1.palette.gray6};
 
 $white: ${theme.v1.palette.white};
 
-$layer0: ${theme.colors.background.canvas};
-$layer1: ${theme.colors.background.primary};
 $layer2: ${theme.colors.background.secondary};
 
-$divider: ${theme.colors.border.weak};
-
-$border0: ${theme.colors.border.weak};
-$border1: ${theme.colors.border.medium};
-
 // Accent colors
 // -------------------------
 $blue: ${theme.v1.palette.blue85};
 $red: $red-base;
 $yellow: ${theme.v1.palette.yellow};
-$orange: ${theme.v1.palette.orange};
 $purple: ${theme.v1.palette.purple};
-$variable: ${theme.colors.primary.text};
-
-$brand-primary: ${theme.v1.palette.orange};
-$brand-success: ${theme.colors.success.main};
-$brand-warning: ${theme.colors.warning.main};
-$brand-danger: ${theme.colors.error.main};
-
-$query-red: ${theme.colors.error.text};
-$query-green: ${theme.colors.success.text};
-$query-purple: #fe85fc;
-$query-orange: ${theme.v1.palette.orange};
-
-// Status colors
-// -------------------------¨
-$online: ${theme.colors.success.text};
-$warn: ${theme.colors.warning.text};
-$critical: ${theme.colors.error.text};
 
 // Scaffolding
 // -------------------------
 $body-bg: ${theme.colors.background.canvas};
-$page-bg: ${theme.colors.background.canvas};
-$dashboard-bg: ${theme.colors.background.canvas};
 
-$text-color-strong: ${theme.colors.text.maxContrast};
 $text-color: ${theme.colors.text.primary};
-$text-color-semi-weak: ${theme.colors.text.secondary};
 $text-color-weak: ${theme.colors.text.secondary};
-$text-color-faint: ${theme.colors.text.disabled};
 $text-color-emphasis: ${theme.colors.text.maxContrast};
-$text-blue: ${theme.colors.primary.text};
 
-$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
-$textShadow: none;
-
-// gradients
-$brand-gradient-horizontal: ${theme.colors.gradients.brandHorizontal};
-$brand-gradient-vertical: ${theme.colors.gradients.brandVertical};
 
 // Links
 // -------------------------
 $link-color: ${theme.colors.text.primary};
 $link-color-disabled: ${theme.colors.text.disabled};
 $link-hover-color: ${theme.colors.text.maxContrast};
-$external-link-color: ${theme.colors.text.link};
 
 // Typography
 // -------------------------
-$headings-color: ${theme.colors.text.primary};
-$abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 
-$hr-border-color: $dark-9;
-
 // Panel
 // -------------------------
 $panel-bg: ${theme.components.panel.background};
-$panel-border: 1px solid ${theme.components.panel.borderColor};
-$panel-header-hover-bg: ${theme.colors.action.hover};
-$panel-box-shadow: ${theme.components.panel.boxShadow};
-$panel-corner: $panel-bg;
 
 // page header
 $page-header-bg: ${theme.colors.background.canvas};
 $page-header-shadow: inset 0px -4px 14px $dark-3;
 $page-header-border-color: ${theme.colors.background.canvas};
 
-$divider-border-color: $gray-1;
-
 // Graphite Target Editor
 $tight-form-func-bg: ${theme.colors.background.secondary};
-$tight-form-func-highlight-bg: ${theme.colors.emphasize(theme.colors.background.secondary, 0.03)};
 
-$modal-backdrop-bg: ${theme.colors.action.hover};
 $code-tag-bg: $dark-1;
 $code-tag-border: $dark-9;
 
@@ -159,76 +82,32 @@ $card-shadow: none;
 
 // Lists
 $list-item-bg: $card-background;
-$list-item-hover-bg: $card-background-hover;
-$list-item-shadow: $card-shadow;
 
 $empty-list-cta-bg: ${theme.colors.background.secondary};
 
 // Scrollbars
 $scrollbarBackground: #404357;
 $scrollbarBackground2: $dark-10;
-$scrollbarBorder: black;
 
 // Tables
 // -------------------------
 $table-bg-accent: ${theme.colors.background.secondary};
-$table-border: ${theme.colors.border.medium};
-$table-bg-odd: ${theme.colors.emphasize(theme.colors.background.primary, 0.02)};
-$table-bg-hover: ${theme.colors.emphasize(theme.colors.background.primary, 0.05)};
 
 // Buttons
 // -------------------------
-$btn-primary-bg: $blue-base;
-$btn-primary-bg-hl: $blue-shade;
-
-$btn-secondary-bg: $dark-6;
-$btn-secondary-bg-hl: color.adjust($dark-6, $lightness: 4%);
-
-$btn-success-bg: $green-base;
-$btn-success-bg-hl: $green-shade;
-
-$btn-danger-bg: $red-base;
-$btn-danger-bg-hl: $red-shade;
-
-$btn-inverse-bg: $dark-6;
 $btn-inverse-bg-hl: color.adjust($dark-6, $lightness: 4%);
-$btn-inverse-text-color: $link-color;
-$btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1);
-
-$btn-link-color: $gray-3;
-
-$iconContainerBackground: $black;
 
 $btn-divider-left: $dark-9;
 $btn-divider-right: $dark-3;
 
 $btn-drag-image: '../img/grab_dark.svg';
 
-$navbar-btn-gicon-brightness: brightness(0.5);
-
-$btn-active-box-shadow: 0px 0px 4px rgba(255, 120, 10, 0.5);
-
 // Forms
 // -------------------------
 $input-bg: ${theme.components.input.background};
-$input-bg-disabled: ${theme.colors.action.disabledBackground};
 
 $input-color: ${theme.components.input.text};
 $input-border-color: ${theme.components.input.borderColor};
-$input-box-shadow: none;
-$input-border-focus: ${theme.colors.primary.border};
-$input-box-shadow-focus: ${theme.colors.primary.border} !default;
-$input-color-placeholder: ${theme.colors.text.disabled};
-$input-label-bg: ${theme.colors.background.secondary};
-$input-color-select-arrow: $white;
-
-// Search
-$search-shadow: 0 0 30px 0 $black;
-
-// Typeahead
-$typeahead-shadow: 0 5px 10px 0 $black;
-$typeahead-selected-bg: $dark-9;
-$typeahead-selected-color: $yellow;
 
 // Dropdowns
 // -------------------------
@@ -236,48 +115,20 @@ $dropdownBackground: ${theme.colors.background.primary};
 $dropdownBorder: ${theme.colors.border.weak};
 $dropdownDividerTop: ${theme.colors.border.weak};
 $dropdownDividerBottom: ${theme.colors.border.weak};
-$dropdownShadow: ${theme.shadows.z3};
 
 $dropdownLinkColor: $link-color;
 $dropdownLinkColorHover: $white;
 $dropdownLinkColorActive: $white;
 $dropdownLinkBackgroundHover: $dark-9;
 
-// Horizontal forms & lists
-// -------------------------
-$horizontalComponentOffset: 180px;
-
-// Navbar
-// -------------------------
-$navbarHeight: 55px;
-$navbarBorder: 1px solid $dark-6;
-
-// Sidemenu
-// -------------------------
-$side-menu-bg: $panel-bg;
-$side-menu-bg-mobile: $panel-bg;
-$side-menu-border: none;
-$side-menu-item-hover-bg: ${theme.colors.background.secondary};
-$side-menu-shadow: 0 0 30px #111;
-$side-menu-icon-color: ${theme.v1.palette.gray70};
-$side-menu-header-color: ${theme.colors.text.primary};
-
 // Menu dropdowns
 // -------------------------
 $menu-dropdown-bg: ${theme.colors.background.primary};
 $menu-dropdown-hover-bg: ${theme.colors.action.hover};
 $menu-dropdown-shadow: ${theme.shadows.z3};
 
-// Tabs
-// -------------------------
-$tab-border-color: $dark-9;
-
 // Form states and alerts
 // -------------------------
-$warning-text-color: ${theme.colors.warning.text};
-$error-text-color: ${theme.colors.error.text};
-$success-text-color: ${theme.colors.success.text};
-
 $alert-error-bg: ${theme.colors.error.main};
 $alert-success-bg: ${theme.colors.success.main};
 $alert-warning-bg: ${theme.colors.warning.main};
@@ -285,16 +136,12 @@ $alert-info-bg: ${theme.colors.warning.main};
 
 // Tooltips and popovers
 // -------------------------
-$tooltipArrowWidth: 5px;
 $tooltipLinkColor: $link-color;
-$tooltipExternalLinkColor: $external-link-color;
+$tooltipExternalLinkColor: ${theme.colors.text.link};
 $graph-tooltip-bg: $dark-1;
 
 $tooltipBackground: ${theme.components.tooltip.background};
 $tooltipColor: ${theme.components.tooltip.text};
-$tooltipArrowColor: ${theme.components.tooltip.background};
-$tooltipBackgroundError: ${theme.colors.error.main};
-$tooltipShadow: ${theme.shadows.z2};
 
 $popover-bg: ${theme.colors.background.primary};
 $popover-color: ${theme.colors.text.primary};
@@ -304,10 +151,7 @@ $popover-shadow: ${theme.shadows.z3};
 
 $popover-help-bg: $tooltipBackground;
 $popover-help-color: $text-color;
-$popover-error-bg: $btn-danger-bg;
-
-$popover-code-bg: $popover-bg;
-$popover-code-boxshadow: $tooltipShadow;
+$popover-error-bg: $red-base;
 
 // images
 $checkboxImageUrl: '../img/checkbox.png';
@@ -315,46 +159,6 @@ $checkboxImageUrl: '../img/checkbox.png';
 // info box
 $info-box-border-color: $blue-base;
 
-// footer
-$footer-link-color: $gray-2;
-$footer-link-hover: $gray-4;
-
-// json-explorer
-$json-explorer-default-color: $text-color;
-$json-explorer-string-color: #23d662;
-$json-explorer-number-color: $variable;
-$json-explorer-boolean-color: $variable;
-$json-explorer-null-color: #eec97d;
-$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-bracket-color: #9494ff;
-$json-explorer-key-color: #23a0db;
-$json-explorer-url-color: #027bff;
-
-// Changelog and diff
-// -------------------------
-$diff-label-bg: ${theme.colors.action.hover};
-$diff-label-fg: $white;
-
-$diff-group-bg: ${theme.colors.background.secondary};
-$diff-arrow-color: $white;
-
-$diff-json-bg: ${theme.colors.background.secondary};
-$diff-json-fg: ${theme.colors.text.primary};
-
-$diff-json-added: $blue-shade;
-$diff-json-deleted: $red-shade;
-
-$diff-json-old: #a04338;
-$diff-json-new: #457740;
-
-$diff-json-changed-fg: $gray-5;
-$diff-json-changed-num: $text-color;
-
-$diff-json-icon: $gray-5;
-
 //Switch Slider
 // -------------------------
 $switch-bg: $input-bg;
@@ -369,36 +173,4 @@ $checkbox-bg: $dark-1;
 $checkbox-border: 1px solid $gray-1;
 $checkbox-checked-bg: linear-gradient(0deg, #eb7b18, #d44a3a);
 $checkbox-color: $dark-1;
-
-//Panel Edit
-// -------------------------
-$panel-editor-shadow: 0 0 20px black;
-$panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
-$panel-editor-viz-item-shadow: 0 0 8px $dark-10;
-$panel-editor-viz-item-border: 1px solid $dark-10;
-$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
-$panel-editor-viz-item-border-hover: 1px solid $blue-light;
-$panel-editor-viz-item-bg: $input-bg;
-$panel-editor-tabs-line-color: #e3e3e3;
-
-$panel-editor-viz-item-bg-hover: color.adjust($blue-base, $lightness: -46%);
-
-$panel-grid-placeholder-bg: color.adjust(${theme.v1.palette.blue77}, $lightness: -30%);
-$panel-grid-placeholder-shadow: 0 0 4px ${theme.v1.palette.blue80};
-
-// logs
-$logs-color-unknown: $gray-2;
-
-// toggle-group
-$button-toggle-group-btn-active-bg: linear-gradient(90deg, #eb7b18, #d44a3a);
-$button-toggle-group-btn-active-shadow: inset 0 0 4px $black;
-$button-toggle-group-btn-separator-border: 1px solid $dark-2;
-
-$vertical-resize-handle-bg: $dark-10;
-$vertical-resize-handle-dots: $gray-1;
-$vertical-resize-handle-dots-hover: $gray-2;
-
-// Calendar
-$calendar-bg-days: $input-bg;
-$calendar-bg-now: $dark-10;
 `;
diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
index 85d5ce94f54..a88d28df02c 100644
--- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
@@ -4,8 +4,6 @@ import { GrafanaTheme2 } from '@grafana/data';
 
 import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
 
-import { styleMixins } from '.';
-
 export const lightThemeVarsTemplate = (theme: GrafanaTheme2) =>
   `${renderGeneratedFileBanner('grafana-ui/src/themes/light.ts', 'grafana-ui/src/themes/_variable.light.scss.tmpl.ts')}
 @use 'sass:color';
@@ -14,42 +12,20 @@ export const lightThemeVarsTemplate = (theme: GrafanaTheme2) =>
 
 $theme-name: light;
 
-$colors-action-hover: ${theme.colors.action.hover};
-$colors-action-selected: ${theme.colors.action.selected};
-
 // New Colors
 // -------------------------
-$blue-light: ${theme.colors.primary.text};
 $blue-base: ${theme.colors.primary.main};
-$blue-shade: ${theme.colors.primary.shade};
 $red-base: ${theme.colors.error.main};
-$red-shade: ${theme.colors.error.shade};
 $green-base: ${theme.colors.success.main};
-$green-shade: ${theme.colors.success.shade};
-$orange-dark: ${theme.v1.palette.orangeDark};
-
-$gray98: ${theme.v1.palette.gray98};
-$gray95: ${theme.v1.palette.gray95};
-$gray85: ${theme.v1.palette.gray85};
-$gray70: ${theme.v1.palette.gray70};
-$gray60: ${theme.v1.palette.gray60};
-$gray33: ${theme.v1.palette.gray33};
-$gray25: ${theme.v1.palette.gray25};
-$gray15: ${theme.v1.palette.gray15};
-$gray10: ${theme.v1.palette.gray10};
-$gray05: ${theme.v1.palette.gray05};
 
 // Grays
 // -------------------------
 $black: ${theme.v1.palette.black};
 
-$dark-1: ${theme.v1.palette.dark1};
 $dark-2: ${theme.v1.palette.dark2};
-$dark-4: ${theme.v1.palette.dark4};
 $dark-10: ${theme.v1.palette.dark10};
 $gray-1: ${theme.v1.palette.gray1};
 $gray-2: ${theme.v1.palette.gray2};
-$gray-3: ${theme.v1.palette.gray3};
 $gray-4: ${theme.v1.palette.gray4};
 $gray-5: ${theme.v1.palette.gray5};
 $gray-6: ${theme.v1.palette.gray6};
@@ -57,95 +33,45 @@ $gray-7: ${theme.v1.palette.gray7};
 
 $white: ${theme.v1.palette.white};
 
-$layer0: ${theme.colors.background.canvas};
-$layer1: ${theme.colors.background.primary};
 $layer2: ${theme.colors.background.secondary};
 
-$divider: ${theme.colors.border.weak};
-$border0: ${theme.colors.border.weak};
-$border1: ${theme.colors.border.medium};
-
 // Accent colors
 // -------------------------
 $blue: ${theme.colors.primary.text};
 $red: $red-base;
 $yellow: ${theme.v1.palette.yellow};
-$orange: ${theme.v1.palette.orange};
 $purple: ${theme.v1.palette.purple};
-$variable: ${theme.colors.primary.text};
-
-$brand-primary: ${theme.v1.palette.orange};
-$brand-success: ${theme.colors.success.main};
-$brand-warning: ${theme.colors.warning.main};
-$brand-danger: ${theme.colors.error.main};
-
-$query-red: ${theme.colors.error.text};
-$query-green: ${theme.colors.success.text};
-$query-purple: #fe85fc;
-$query-orange: ${theme.v1.palette.orange};
-
-// Status colors
-// -------------------------
-$online: ${theme.colors.success.text};
-$warn: ${theme.colors.warning.text};
-$critical: ${theme.colors.error.text};
-
 
 // Scaffolding
 // -------------------------
 $body-bg: ${theme.colors.background.canvas};
-$page-bg: ${theme.colors.background.canvas};
-$dashboard-bg: ${theme.colors.background.canvas};
 
 $text-color: ${theme.colors.text.primary};
-$text-color-strong: ${theme.colors.text.maxContrast};
-$text-color-semi-weak: ${theme.colors.text.secondary};
 $text-color-weak: ${theme.colors.text.secondary};
-$text-color-faint: ${theme.colors.text.disabled};
 $text-color-emphasis: ${theme.colors.text.maxContrast};
-$text-blue: ${theme.colors.primary.text};
-
-$text-shadow-faint: none;
-
-// gradients
-$brand-gradient-horizontal: ${theme.colors.gradients.brandHorizontal};
-$brand-gradient-vertical: ${theme.colors.gradients.brandVertical};
 
 // Links
 // -------------------------
 $link-color: ${theme.colors.text.primary};
 $link-color-disabled: ${theme.colors.text.disabled};
 $link-hover-color: ${theme.colors.text.maxContrast};
-$external-link-color: ${theme.colors.text.link};
 
 // Typography
 // -------------------------
-$headings-color: ${theme.colors.text.primary};
-$abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 
-$hr-border-color: $gray-4 !default;
-
 // Panel
 // -------------------------
 $panel-bg: ${theme.components.panel.background};
-$panel-border: 1px solid ${theme.components.panel.borderColor};
-$panel-header-hover-bg: ${theme.colors.action.hover};
-$panel-box-shadow: ${theme.components.panel.boxShadow};
-$panel-corner: $panel-bg;
 
 // Page header
 $page-header-bg: ${theme.colors.background.canvas};
 $page-header-shadow: inset 0px -3px 10px $gray-6;
 $page-header-border-color: ${theme.colors.background.canvas};
 
-$divider-border-color: $gray-2;
-
 // Graphite Target Editor
 $tight-form-func-bg: ${theme.colors.background.secondary};
-$tight-form-func-highlight-bg: ${styleMixins.hoverColor(theme.colors.background.secondary, theme)};
 
-$modal-backdrop-bg: ${theme.colors.background.primary};
 $code-tag-bg: $gray-6;
 $code-tag-border: $gray-4;
 
@@ -156,76 +82,32 @@ $card-shadow: none;
 
 // Lists
 $list-item-bg: $gray-7;
-$list-item-hover-bg: $gray-6;
-$list-item-shadow: $card-shadow;
 
 $empty-list-cta-bg: $gray-6;
 
 // Scrollbars
 $scrollbarBackground: $gray-4;
 $scrollbarBackground2: $gray-4;
-$scrollbarBorder: $gray-7;
 
 // Tables
 // -------------------------
 $table-bg-accent: ${theme.colors.background.secondary};
-$table-border: ${theme.colors.border.medium};
-$table-bg-odd: ${theme.colors.emphasize(theme.colors.background.primary, 0.02)};
-$table-bg-hover: ${theme.colors.emphasize(theme.colors.background.primary, 0.05)};
 
 // Buttons
 // -------------------------
-$btn-secondary-bg: $gray-5;
-$btn-secondary-bg-hl: $gray-4;
-
-$btn-primary-bg: $blue-base;
-$btn-primary-bg-hl: $blue-shade;
-
-$btn-success-bg: $green-base;
-$btn-success-bg-hl: $green-shade;
-
-$btn-danger-bg: $red-base;
-$btn-danger-bg-hl: $red-shade;
-
-$btn-inverse-bg: $gray-5;
 $btn-inverse-bg-hl: $gray-4;
-$btn-inverse-text-color: $gray-1;
-$btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
-
-$btn-link-color: $gray-1;
-
-$iconContainerBackground: $white;
 
 $btn-divider-left: $gray-4;
 $btn-divider-right: $gray-7;
 
 $btn-drag-image: '../img/grab_light.svg';
 
-$navbar-btn-gicon-brightness: brightness(1.5);
-
-$btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
-
 // Forms
 // -------------------------
 $input-bg: ${theme.components.input.background};
-$input-bg-disabled: ${theme.colors.action.disabledBackground};
 
 $input-color: ${theme.components.input.text};
 $input-border-color: ${theme.components.input.borderColor};
-$input-box-shadow: none;
-$input-border-focus: ${theme.v1.palette.blue95};
-$input-box-shadow-focus: ${theme.v1.palette.blue95};
-$input-color-placeholder: ${theme.colors.text.disabled};
-$input-label-bg: ${theme.colors.background.secondary};
-$input-color-select-arrow: ${theme.v1.palette.gray60};
-
-// search
-$search-shadow: 0 1px 5px 0 $gray-5;
-
-// Typeahead
-$typeahead-shadow: 0 5px 10px 0 $gray-5;
-$typeahead-selected-bg: $gray-6;
-$typeahead-selected-color: $yellow;
 
 // Dropdowns
 // -------------------------
@@ -233,7 +115,6 @@ $dropdownBackground: ${theme.colors.background.primary};
 $dropdownBorder: ${theme.colors.border.weak};
 $dropdownDividerTop: ${theme.colors.border.weak};
 $dropdownDividerBottom: ${theme.colors.border.weak};
-$dropdownShadow: ${theme.shadows.z3};
 
 $dropdownLinkColor: $dark-2;
 $dropdownLinkColorHover: $link-color;
@@ -241,42 +122,14 @@ $dropdownLinkColorActive: $link-color;
 
 $dropdownLinkBackgroundHover: $gray-6;
 
-// Horizontal forms & lists
-// -------------------------
-$horizontalComponentOffset: 180px;
-
-// Navbar
-// -------------------------
-$navbarHeight: 52px;
-$navbarBorder: 1px solid $gray-5;
-
-// Sidemenu
-// -------------------------
-$side-menu-bg: ${theme.v1.palette.gray15};
-$side-menu-border: 1px solid ${theme.v1.palette.gray25};
-$side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
-$side-menu-item-hover-bg: ${theme.v1.palette.gray25};
-$side-menu-shadow: 5px 0px 10px -5px $gray-1;
-$side-menu-link-color: $gray-4;
-$side-menu-icon-color: ${theme.v1.palette.gray70};
-$side-menu-header-color: ${theme.v1.palette.gray95};
-
 // Menu dropdowns
 // -------------------------
 $menu-dropdown-bg: ${theme.colors.background.primary};
 $menu-dropdown-hover-bg: ${theme.colors.action.hover};
 $menu-dropdown-shadow: ${theme.shadows.z3};
 
-// Tabs
-// -------------------------
-$tab-border-color: $gray-5;
-
 // Form states and alerts
 // -------------------------
-$warning-text-color: ${theme.colors.warning.text};
-$error-text-color: ${theme.colors.error.text};
-$success-text-color: ${theme.colors.success.text};
-
 $alert-error-bg: ${theme.colors.error.main};
 $alert-success-bg: ${theme.colors.success.main};
 $alert-warning-bg: ${theme.colors.warning.main};
@@ -285,9 +138,6 @@ $alert-info-bg: ${theme.colors.warning.main};
 // Tooltips and popovers
 $tooltipBackground: ${theme.components.tooltip.background};
 $tooltipColor: ${theme.components.tooltip.text};
-$tooltipArrowColor: ${theme.components.tooltip.background};
-$tooltipBackgroundError: ${theme.colors.error.main};
-$tooltipShadow: ${theme.shadows.z2};
 
 $popover-bg: ${theme.colors.background.primary};
 $popover-color: ${theme.colors.text.primary};
@@ -297,63 +147,19 @@ $popover-shadow: ${theme.shadows.z3};
 
 $graph-tooltip-bg: $gray-5;
 
-$tooltipArrowWidth: 5px;
 $tooltipLinkColor: color.adjust($tooltipColor, $lightness: 5%);
 $tooltipExternalLinkColor: #6E9FFF;
 
-$popover-error-bg: $btn-danger-bg;
+$popover-error-bg: $red-base;
 $popover-help-bg: $tooltipBackground;
 $popover-help-color: $tooltipColor;
 
-$popover-code-bg: ${theme.colors.background.primary};
-$popover-code-boxshadow: 0 0 5px $gray60;
-
 // images
 $checkboxImageUrl: '../img/checkbox_white.png';
 
 // info box
 $info-box-border-color: $blue-base;
 
-// footer
-$footer-link-color: $gray-1;
-$footer-link-hover: $dark-2;
-
-// json explorer
-$json-explorer-default-color: black;
-$json-explorer-string-color: green;
-$json-explorer-number-color: $blue-base;
-$json-explorer-boolean-color: $red-base;
-$json-explorer-null-color: #855a00;
-$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-bracket-color: $blue-base;
-$json-explorer-key-color: #00008b;
-$json-explorer-url-color: $blue-base;
-
-// Changelog and diff
-// -------------------------
-$diff-label-bg: ${theme.colors.action.hover};
-$diff-label-fg: $gray-2;
-
-$diff-arrow-color: $dark-2;
-$diff-group-bg: ${theme.colors.background.secondary};
-
-$diff-json-bg: ${theme.colors.background.secondary};
-$diff-json-fg: ${theme.colors.text.primary};
-
-$diff-json-added: $blue-shade;
-$diff-json-deleted: $red-shade;
-
-$diff-json-old: #5a372a;
-$diff-json-new: #664e33;
-
-$diff-json-changed-fg: $gray-7;
-$diff-json-changed-num: $gray-4;
-
-$diff-json-icon: $gray-4;
-
 //Switch Slider
 // -------------------------
 $switch-bg: $white;
@@ -365,40 +171,7 @@ $switch-slider-shadow: 0 0 3px $dark-2;
 //Checkbox
 // -------------------------
 $checkbox-bg: $gray-6;
-$checkbox-border: 1px solid $gray-3;
+$checkbox-border: 1px solid ${theme.v1.palette.gray3};
 $checkbox-checked-bg: linear-gradient(0deg, #ff9830, #e55400);
 $checkbox-color: $gray-7;
-
-//Panel Edit
-// -------------------------
-$panel-editor-shadow: 0px 0px 8px $gray-3;
-$panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3);
-$panel-editor-viz-item-shadow: 0 0 4px $gray-3;
-$panel-editor-viz-item-border: 1px solid $gray-3;
-$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
-$panel-editor-viz-item-border-hover: 1px solid $blue-light;
-$panel-editor-viz-item-bg: $card-background;
-$panel-editor-tabs-line-color: $dark-2;
-
-$panel-editor-viz-item-bg-hover: color.adjust($blue-base, $lightness: 45%);
-
-$panel-grid-placeholder-bg: color.adjust(${theme.v1.palette.blue95}, $lightness: 30%);
-$panel-grid-placeholder-shadow: 0 0 4px ${theme.v1.palette.blue95};
-
-// logs
-$logs-color-unknown: $gray-5;
-
-// toggle-group
-$button-toggle-group-btn-active-bg: $brand-primary;
-$button-toggle-group-btn-active-shadow: inset 0 0 4px $white;
-$button-toggle-group-btn-separator-border: 1px solid $gray-6;
-
-$vertical-resize-handle-bg: $gray-4;
-$vertical-resize-handle-dots: $gray-3;
-$vertical-resize-handle-dots-hover: $gray-2;
-
-// Calendar
-$calendar-bg-days: $white;
-$calendar-bg-now: $gray-6;
-
 `;
diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss
index 868c07b7a73..c37a2c3def4 100644
--- a/public/sass/_variables.dark.generated.scss
+++ b/public/sass/_variables.dark.generated.scss
@@ -14,143 +14,66 @@
 
 $theme-name: dark;
 
-$colors-action-hover: rgba(204, 204, 220, 0.16);
-$colors-action-selected: rgba(204, 204, 220, 0.12);
-
 // New Colors
 // -------------------------
-$blue-light: #6E9FFF;
 $blue-base: #3D71D9;
-$blue-shade: rgb(90, 134, 222);
 $red-base: #D10E5C;
-$red-shade: rgb(215, 50, 116);
 $green-base: #1A7F4B;
-$green-shade: rgb(60, 146, 102);
-$orange-dark: #ff780a;
-
-$gray98: #f7f8fa;
-$gray95: #e9edf2;
-$gray85: #c7d0d9;
-$gray70: #9fa7b3;
-$gray60: #7b8087;
-$gray33: #464c54;
-$gray25: #2c3235;
-$gray15: #202226;
-$gray10: #141619;
-$gray05: #0b0c0e;
 
 // Grays
 // -------------------------
 $black: #000000;
 $dark-1: #141414;
-$dark-2: #161719;
 $dark-3: #1f1f20;
-$dark-4: #212124;
-$dark-5: #222426;
 $dark-6: #262628;
-$dark-7: #292a2d;
-$dark-8: #2f2f32;
 $dark-9: #343436;
 $dark-10: #424345;
 $gray-1: #555555;
 $gray-2: #8e8e8e;
-$gray-3: #b3b3b3;
-$gray-4: #d8d9da;
-$gray-5: #ececec;
 $gray-6: #f4f5f8;
 
 $white: #ffffff;
 
-$layer0: #111217;
-$layer1: #181b1f;
 $layer2: #22252b;
 
-$divider: rgba(204, 204, 220, 0.12);
-
-$border0: rgba(204, 204, 220, 0.12);
-$border1: rgba(204, 204, 220, 0.20);
-
 // Accent colors
 // -------------------------
 $blue: #33a2e5;
 $red: $red-base;
 $yellow: #ecbb13;
-$orange: #eb7b18;
 $purple: #9933cc;
-$variable: #6E9FFF;
-
-$brand-primary: #eb7b18;
-$brand-success: #1A7F4B;
-$brand-warning: #FF9900;
-$brand-danger: #D10E5C;
-
-$query-red: #FF5286;
-$query-green: #6CCF8E;
-$query-purple: #fe85fc;
-$query-orange: #eb7b18;
-
-// Status colors
-// -------------------------¨
-$online: #6CCF8E;
-$warn: #fbad37;
-$critical: #FF5286;
 
 // Scaffolding
 // -------------------------
 $body-bg: #111217;
-$page-bg: #111217;
-$dashboard-bg: #111217;
 
-$text-color-strong: #FFFFFF;
 $text-color: rgb(204, 204, 220);
-$text-color-semi-weak: rgba(204, 204, 220, 0.65);
 $text-color-weak: rgba(204, 204, 220, 0.65);
-$text-color-faint: rgba(204, 204, 220, 0.6);
 $text-color-emphasis: #FFFFFF;
-$text-blue: #6E9FFF;
 
-$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
-$textShadow: none;
-
-// gradients
-$brand-gradient-horizontal: linear-gradient(270deg, #F55F3E 0%, #FF8833 100%);
-$brand-gradient-vertical: linear-gradient(0.01deg, #F55F3E 0.01%, #FF8833 99.99%);
 
 // Links
 // -------------------------
 $link-color: rgb(204, 204, 220);
 $link-color-disabled: rgba(204, 204, 220, 0.6);
 $link-hover-color: #FFFFFF;
-$external-link-color: #6E9FFF;
 
 // Typography
 // -------------------------
-$headings-color: rgb(204, 204, 220);
-$abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 
-$hr-border-color: $dark-9;
-
 // Panel
 // -------------------------
 $panel-bg: #181b1f;
-$panel-border: 1px solid rgba(204, 204, 220, 0.12);
-$panel-header-hover-bg: rgba(204, 204, 220, 0.16);
-$panel-box-shadow: none;
-$panel-corner: $panel-bg;
 
 // page header
 $page-header-bg: #111217;
 $page-header-shadow: inset 0px -4px 14px $dark-3;
 $page-header-border-color: #111217;
 
-$divider-border-color: $gray-1;
-
 // Graphite Target Editor
 $tight-form-func-bg: #22252b;
-$tight-form-func-highlight-bg: rgb(40, 43, 49);
 
-$modal-backdrop-bg: rgba(204, 204, 220, 0.16);
 $code-tag-bg: $dark-1;
 $code-tag-border: $dark-9;
 
@@ -161,76 +84,32 @@ $card-shadow: none;
 
 // Lists
 $list-item-bg: $card-background;
-$list-item-hover-bg: $card-background-hover;
-$list-item-shadow: $card-shadow;
 
 $empty-list-cta-bg: #22252b;
 
 // Scrollbars
 $scrollbarBackground: #404357;
 $scrollbarBackground2: $dark-10;
-$scrollbarBorder: black;
 
 // Tables
 // -------------------------
 $table-bg-accent: #22252b;
-$table-border: rgba(204, 204, 220, 0.20);
-$table-bg-odd: rgb(28, 31, 35);
-$table-bg-hover: rgb(35, 38, 42);
 
 // Buttons
 // -------------------------
-$btn-primary-bg: $blue-base;
-$btn-primary-bg-hl: $blue-shade;
-
-$btn-secondary-bg: $dark-6;
-$btn-secondary-bg-hl: color.adjust($dark-6, $lightness: 4%);
-
-$btn-success-bg: $green-base;
-$btn-success-bg-hl: $green-shade;
-
-$btn-danger-bg: $red-base;
-$btn-danger-bg-hl: $red-shade;
-
-$btn-inverse-bg: $dark-6;
 $btn-inverse-bg-hl: color.adjust($dark-6, $lightness: 4%);
-$btn-inverse-text-color: $link-color;
-$btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1);
-
-$btn-link-color: $gray-3;
-
-$iconContainerBackground: $black;
 
 $btn-divider-left: $dark-9;
 $btn-divider-right: $dark-3;
 
 $btn-drag-image: '../img/grab_dark.svg';
 
-$navbar-btn-gicon-brightness: brightness(0.5);
-
-$btn-active-box-shadow: 0px 0px 4px rgba(255, 120, 10, 0.5);
-
 // Forms
 // -------------------------
 $input-bg: #111217;
-$input-bg-disabled: rgba(204, 204, 220, 0.04);
 
 $input-color: rgb(204, 204, 220);
 $input-border-color: rgba(204, 204, 220, 0.20);
-$input-box-shadow: none;
-$input-border-focus: #6E9FFF;
-$input-box-shadow-focus: #6E9FFF !default;
-$input-color-placeholder: rgba(204, 204, 220, 0.6);
-$input-label-bg: #22252b;
-$input-color-select-arrow: $white;
-
-// Search
-$search-shadow: 0 0 30px 0 $black;
-
-// Typeahead
-$typeahead-shadow: 0 5px 10px 0 $black;
-$typeahead-selected-bg: $dark-9;
-$typeahead-selected-color: $yellow;
 
 // Dropdowns
 // -------------------------
@@ -238,48 +117,20 @@ $dropdownBackground: #181b1f;
 $dropdownBorder: rgba(204, 204, 220, 0.12);
 $dropdownDividerTop: rgba(204, 204, 220, 0.12);
 $dropdownDividerBottom: rgba(204, 204, 220, 0.12);
-$dropdownShadow: 0px 8px 24px rgb(1, 4, 9);
 
 $dropdownLinkColor: $link-color;
 $dropdownLinkColorHover: $white;
 $dropdownLinkColorActive: $white;
 $dropdownLinkBackgroundHover: $dark-9;
 
-// Horizontal forms & lists
-// -------------------------
-$horizontalComponentOffset: 180px;
-
-// Navbar
-// -------------------------
-$navbarHeight: 55px;
-$navbarBorder: 1px solid $dark-6;
-
-// Sidemenu
-// -------------------------
-$side-menu-bg: $panel-bg;
-$side-menu-bg-mobile: $panel-bg;
-$side-menu-border: none;
-$side-menu-item-hover-bg: #22252b;
-$side-menu-shadow: 0 0 30px #111;
-$side-menu-icon-color: #9fa7b3;
-$side-menu-header-color: rgb(204, 204, 220);
-
 // 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);
 
-// Tabs
-// -------------------------
-$tab-border-color: $dark-9;
-
 // Form states and alerts
 // -------------------------
-$warning-text-color: #fbad37;
-$error-text-color: #FF5286;
-$success-text-color: #6CCF8E;
-
 $alert-error-bg: #D10E5C;
 $alert-success-bg: #1A7F4B;
 $alert-warning-bg: #FF9900;
@@ -287,16 +138,12 @@ $alert-info-bg: #FF9900;
 
 // Tooltips and popovers
 // -------------------------
-$tooltipArrowWidth: 5px;
 $tooltipLinkColor: $link-color;
-$tooltipExternalLinkColor: $external-link-color;
+$tooltipExternalLinkColor: #6E9FFF;
 $graph-tooltip-bg: $dark-1;
 
 $tooltipBackground: #22252b;
 $tooltipColor: rgb(204, 204, 220);
-$tooltipArrowColor: #22252b;
-$tooltipBackgroundError: #D10E5C;
-$tooltipShadow: 0px 4px 8px rgba(1, 4, 9, 0.75);
 
 $popover-bg: #181b1f;
 $popover-color: rgb(204, 204, 220);
@@ -306,10 +153,7 @@ $popover-shadow: 0px 8px 24px rgb(1, 4, 9);
 
 $popover-help-bg: $tooltipBackground;
 $popover-help-color: $text-color;
-$popover-error-bg: $btn-danger-bg;
-
-$popover-code-bg: $popover-bg;
-$popover-code-boxshadow: $tooltipShadow;
+$popover-error-bg: $red-base;
 
 // images
 $checkboxImageUrl: '../img/checkbox.png';
@@ -317,46 +161,6 @@ $checkboxImageUrl: '../img/checkbox.png';
 // info box
 $info-box-border-color: $blue-base;
 
-// footer
-$footer-link-color: $gray-2;
-$footer-link-hover: $gray-4;
-
-// json-explorer
-$json-explorer-default-color: $text-color;
-$json-explorer-string-color: #23d662;
-$json-explorer-number-color: $variable;
-$json-explorer-boolean-color: $variable;
-$json-explorer-null-color: #eec97d;
-$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-bracket-color: #9494ff;
-$json-explorer-key-color: #23a0db;
-$json-explorer-url-color: #027bff;
-
-// Changelog and diff
-// -------------------------
-$diff-label-bg: rgba(204, 204, 220, 0.16);
-$diff-label-fg: $white;
-
-$diff-group-bg: #22252b;
-$diff-arrow-color: $white;
-
-$diff-json-bg: #22252b;
-$diff-json-fg: rgb(204, 204, 220);
-
-$diff-json-added: $blue-shade;
-$diff-json-deleted: $red-shade;
-
-$diff-json-old: #a04338;
-$diff-json-new: #457740;
-
-$diff-json-changed-fg: $gray-5;
-$diff-json-changed-num: $text-color;
-
-$diff-json-icon: $gray-5;
-
 //Switch Slider
 // -------------------------
 $switch-bg: $input-bg;
@@ -371,35 +175,3 @@ $checkbox-bg: $dark-1;
 $checkbox-border: 1px solid $gray-1;
 $checkbox-checked-bg: linear-gradient(0deg, #eb7b18, #d44a3a);
 $checkbox-color: $dark-1;
-
-//Panel Edit
-// -------------------------
-$panel-editor-shadow: 0 0 20px black;
-$panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
-$panel-editor-viz-item-shadow: 0 0 8px $dark-10;
-$panel-editor-viz-item-border: 1px solid $dark-10;
-$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
-$panel-editor-viz-item-border-hover: 1px solid $blue-light;
-$panel-editor-viz-item-bg: $input-bg;
-$panel-editor-tabs-line-color: #e3e3e3;
-
-$panel-editor-viz-item-bg-hover: color.adjust($blue-base, $lightness: -46%);
-
-$panel-grid-placeholder-bg: color.adjust(#1f60c4, $lightness: -30%);
-$panel-grid-placeholder-shadow: 0 0 4px #3274d9;
-
-// logs
-$logs-color-unknown: $gray-2;
-
-// toggle-group
-$button-toggle-group-btn-active-bg: linear-gradient(90deg, #eb7b18, #d44a3a);
-$button-toggle-group-btn-active-shadow: inset 0 0 4px $black;
-$button-toggle-group-btn-separator-border: 1px solid $dark-2;
-
-$vertical-resize-handle-bg: $dark-10;
-$vertical-resize-handle-dots: $gray-1;
-$vertical-resize-handle-dots-hover: $gray-2;
-
-// Calendar
-$calendar-bg-days: $input-bg;
-$calendar-bg-now: $dark-10;
diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss
index 7d4fac1eb15..1e317ffa7ab 100644
--- a/public/sass/_variables.light.generated.scss
+++ b/public/sass/_variables.light.generated.scss
@@ -14,42 +14,20 @@
 
 $theme-name: light;
 
-$colors-action-hover: rgba(36, 41, 46, 0.12);
-$colors-action-selected: rgba(36, 41, 46, 0.08);
-
 // New Colors
 // -------------------------
-$blue-light: #1F62E0;
 $blue-base: #3871DC;
-$blue-shade: rgb(44, 90, 176);
 $red-base: #E0226E;
-$red-shade: rgb(179, 27, 88);
 $green-base: #1B855E;
-$green-shade: rgb(21, 106, 75);
-$orange-dark: #ff780a;
-
-$gray98: #f7f8fa;
-$gray95: #e9edf2;
-$gray85: #c7d0d9;
-$gray70: #9fa7b3;
-$gray60: #7b8087;
-$gray33: #464c54;
-$gray25: #2c3235;
-$gray15: #202226;
-$gray10: #141619;
-$gray05: #0b0c0e;
 
 // Grays
 // -------------------------
 $black: #000000;
 
-$dark-1: #141414;
 $dark-2: #161719;
-$dark-4: #212124;
 $dark-10: #424345;
 $gray-1: #555555;
 $gray-2: #8e8e8e;
-$gray-3: #b3b3b3;
 $gray-4: #d8d9da;
 $gray-5: #ececec;
 $gray-6: #f4f5f8;
@@ -57,95 +35,45 @@ $gray-7: #fbfbfb;
 
 $white: #ffffff;
 
-$layer0: #F4F5F5;
-$layer1: #FFFFFF;
 $layer2: #F4F5F5;
 
-$divider: rgba(36, 41, 46, 0.12);
-$border0: rgba(36, 41, 46, 0.12);
-$border1: rgba(36, 41, 46, 0.30);
-
 // Accent colors
 // -------------------------
 $blue: #1F62E0;
 $red: $red-base;
 $yellow: #ecbb13;
-$orange: #eb7b18;
 $purple: #9933cc;
-$variable: #1F62E0;
-
-$brand-primary: #eb7b18;
-$brand-success: #1B855E;
-$brand-warning: #FF9900;
-$brand-danger: #E0226E;
-
-$query-red: #CF0E5B;
-$query-green: #0A764E;
-$query-purple: #fe85fc;
-$query-orange: #eb7b18;
-
-// Status colors
-// -------------------------
-$online: #0A764E;
-$warn: #B5510D;
-$critical: #CF0E5B;
-
 
 // Scaffolding
 // -------------------------
 $body-bg: #F4F5F5;
-$page-bg: #F4F5F5;
-$dashboard-bg: #F4F5F5;
 
 $text-color: rgba(36, 41, 46, 1);
-$text-color-strong: #000000;
-$text-color-semi-weak: rgba(36, 41, 46, 0.75);
 $text-color-weak: rgba(36, 41, 46, 0.75);
-$text-color-faint: rgba(36, 41, 46, 0.64);
 $text-color-emphasis: #000000;
-$text-blue: #1F62E0;
-
-$text-shadow-faint: none;
-
-// gradients
-$brand-gradient-horizontal: linear-gradient(90deg, #FF8833 0%, #F53E4C 100%);
-$brand-gradient-vertical: linear-gradient(0.01deg, #F53E4C -31.2%, #FF8833 113.07%);
 
 // Links
 // -------------------------
 $link-color: rgba(36, 41, 46, 1);
 $link-color-disabled: rgba(36, 41, 46, 0.64);
 $link-hover-color: #000000;
-$external-link-color: #1F62E0;
 
 // Typography
 // -------------------------
-$headings-color: rgba(36, 41, 46, 1);
-$abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 
-$hr-border-color: $gray-4 !default;
-
 // Panel
 // -------------------------
 $panel-bg: #FFFFFF;
-$panel-border: 1px solid rgba(36, 41, 46, 0.12);
-$panel-header-hover-bg: rgba(36, 41, 46, 0.12);
-$panel-box-shadow: none;
-$panel-corner: $panel-bg;
 
 // Page header
 $page-header-bg: #F4F5F5;
 $page-header-shadow: inset 0px -3px 10px $gray-6;
 $page-header-border-color: #F4F5F5;
 
-$divider-border-color: $gray-2;
-
 // Graphite Target Editor
 $tight-form-func-bg: #F4F5F5;
-$tight-form-func-highlight-bg: #eff0f0;
 
-$modal-backdrop-bg: #FFFFFF;
 $code-tag-bg: $gray-6;
 $code-tag-border: $gray-4;
 
@@ -156,76 +84,32 @@ $card-shadow: none;
 
 // Lists
 $list-item-bg: $gray-7;
-$list-item-hover-bg: $gray-6;
-$list-item-shadow: $card-shadow;
 
 $empty-list-cta-bg: $gray-6;
 
 // Scrollbars
 $scrollbarBackground: $gray-4;
 $scrollbarBackground2: $gray-4;
-$scrollbarBorder: $gray-7;
 
 // Tables
 // -------------------------
 $table-bg-accent: #F4F5F5;
-$table-border: rgba(36, 41, 46, 0.30);
-$table-bg-odd: rgb(249, 249, 249);
-$table-bg-hover: rgb(242, 242, 242);
 
 // Buttons
 // -------------------------
-$btn-secondary-bg: $gray-5;
-$btn-secondary-bg-hl: $gray-4;
-
-$btn-primary-bg: $blue-base;
-$btn-primary-bg-hl: $blue-shade;
-
-$btn-success-bg: $green-base;
-$btn-success-bg-hl: $green-shade;
-
-$btn-danger-bg: $red-base;
-$btn-danger-bg-hl: $red-shade;
-
-$btn-inverse-bg: $gray-5;
 $btn-inverse-bg-hl: $gray-4;
-$btn-inverse-text-color: $gray-1;
-$btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
-
-$btn-link-color: $gray-1;
-
-$iconContainerBackground: $white;
 
 $btn-divider-left: $gray-4;
 $btn-divider-right: $gray-7;
 
 $btn-drag-image: '../img/grab_light.svg';
 
-$navbar-btn-gicon-brightness: brightness(1.5);
-
-$btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
-
 // Forms
 // -------------------------
 $input-bg: #FFFFFF;
-$input-bg-disabled: rgba(36, 41, 46, 0.04);
 
 $input-color: rgba(36, 41, 46, 1);
 $input-border-color: rgba(36, 41, 46, 0.30);
-$input-box-shadow: none;
-$input-border-focus: #5794f2;
-$input-box-shadow-focus: #5794f2;
-$input-color-placeholder: rgba(36, 41, 46, 0.64);
-$input-label-bg: #F4F5F5;
-$input-color-select-arrow: #7b8087;
-
-// search
-$search-shadow: 0 1px 5px 0 $gray-5;
-
-// Typeahead
-$typeahead-shadow: 0 5px 10px 0 $gray-5;
-$typeahead-selected-bg: $gray-6;
-$typeahead-selected-color: $yellow;
 
 // Dropdowns
 // -------------------------
@@ -233,7 +117,6 @@ $dropdownBackground: #FFFFFF;
 $dropdownBorder: rgba(36, 41, 46, 0.12);
 $dropdownDividerTop: rgba(36, 41, 46, 0.12);
 $dropdownDividerBottom: rgba(36, 41, 46, 0.12);
-$dropdownShadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18);
 
 $dropdownLinkColor: $dark-2;
 $dropdownLinkColorHover: $link-color;
@@ -241,42 +124,14 @@ $dropdownLinkColorActive: $link-color;
 
 $dropdownLinkBackgroundHover: $gray-6;
 
-// Horizontal forms & lists
-// -------------------------
-$horizontalComponentOffset: 180px;
-
-// Navbar
-// -------------------------
-$navbarHeight: 52px;
-$navbarBorder: 1px solid $gray-5;
-
-// Sidemenu
-// -------------------------
-$side-menu-bg: #202226;
-$side-menu-border: 1px solid #2c3235;
-$side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
-$side-menu-item-hover-bg: #2c3235;
-$side-menu-shadow: 5px 0px 10px -5px $gray-1;
-$side-menu-link-color: $gray-4;
-$side-menu-icon-color: #9fa7b3;
-$side-menu-header-color: #e9edf2;
-
 // Menu dropdowns
 // -------------------------
 $menu-dropdown-bg: #FFFFFF;
 $menu-dropdown-hover-bg: rgba(36, 41, 46, 0.12);
 $menu-dropdown-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18);
 
-// Tabs
-// -------------------------
-$tab-border-color: $gray-5;
-
 // Form states and alerts
 // -------------------------
-$warning-text-color: #B5510D;
-$error-text-color: #CF0E5B;
-$success-text-color: #0A764E;
-
 $alert-error-bg: #E0226E;
 $alert-success-bg: #1B855E;
 $alert-warning-bg: #FF9900;
@@ -285,9 +140,6 @@ $alert-info-bg: #FF9900;
 // Tooltips and popovers
 $tooltipBackground: #F4F5F5;
 $tooltipColor: rgba(36, 41, 46, 1);
-$tooltipArrowColor: #F4F5F5;
-$tooltipBackgroundError: #E0226E;
-$tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.2);
 
 $popover-bg: #FFFFFF;
 $popover-color: rgba(36, 41, 46, 1);
@@ -297,63 +149,19 @@ $popover-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18);
 
 $graph-tooltip-bg: $gray-5;
 
-$tooltipArrowWidth: 5px;
 $tooltipLinkColor: color.adjust($tooltipColor, $lightness: 5%);
 $tooltipExternalLinkColor: #6E9FFF;
 
-$popover-error-bg: $btn-danger-bg;
+$popover-error-bg: $red-base;
 $popover-help-bg: $tooltipBackground;
 $popover-help-color: $tooltipColor;
 
-$popover-code-bg: #FFFFFF;
-$popover-code-boxshadow: 0 0 5px $gray60;
-
 // images
 $checkboxImageUrl: '../img/checkbox_white.png';
 
 // info box
 $info-box-border-color: $blue-base;
 
-// footer
-$footer-link-color: $gray-1;
-$footer-link-hover: $dark-2;
-
-// json explorer
-$json-explorer-default-color: black;
-$json-explorer-string-color: green;
-$json-explorer-number-color: $blue-base;
-$json-explorer-boolean-color: $red-base;
-$json-explorer-null-color: #855a00;
-$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-bracket-color: $blue-base;
-$json-explorer-key-color: #00008b;
-$json-explorer-url-color: $blue-base;
-
-// Changelog and diff
-// -------------------------
-$diff-label-bg: rgba(36, 41, 46, 0.12);
-$diff-label-fg: $gray-2;
-
-$diff-arrow-color: $dark-2;
-$diff-group-bg: #F4F5F5;
-
-$diff-json-bg: #F4F5F5;
-$diff-json-fg: rgba(36, 41, 46, 1);
-
-$diff-json-added: $blue-shade;
-$diff-json-deleted: $red-shade;
-
-$diff-json-old: #5a372a;
-$diff-json-new: #664e33;
-
-$diff-json-changed-fg: $gray-7;
-$diff-json-changed-num: $gray-4;
-
-$diff-json-icon: $gray-4;
-
 //Switch Slider
 // -------------------------
 $switch-bg: $white;
@@ -365,39 +173,6 @@ $switch-slider-shadow: 0 0 3px $dark-2;
 //Checkbox
 // -------------------------
 $checkbox-bg: $gray-6;
-$checkbox-border: 1px solid $gray-3;
+$checkbox-border: 1px solid #b3b3b3;
 $checkbox-checked-bg: linear-gradient(0deg, #ff9830, #e55400);
 $checkbox-color: $gray-7;
-
-//Panel Edit
-// -------------------------
-$panel-editor-shadow: 0px 0px 8px $gray-3;
-$panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3);
-$panel-editor-viz-item-shadow: 0 0 4px $gray-3;
-$panel-editor-viz-item-border: 1px solid $gray-3;
-$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
-$panel-editor-viz-item-border-hover: 1px solid $blue-light;
-$panel-editor-viz-item-bg: $card-background;
-$panel-editor-tabs-line-color: $dark-2;
-
-$panel-editor-viz-item-bg-hover: color.adjust($blue-base, $lightness: 45%);
-
-$panel-grid-placeholder-bg: color.adjust(#5794f2, $lightness: 30%);
-$panel-grid-placeholder-shadow: 0 0 4px #5794f2;
-
-// logs
-$logs-color-unknown: $gray-5;
-
-// toggle-group
-$button-toggle-group-btn-active-bg: $brand-primary;
-$button-toggle-group-btn-active-shadow: inset 0 0 4px $white;
-$button-toggle-group-btn-separator-border: 1px solid $gray-6;
-
-$vertical-resize-handle-bg: $gray-4;
-$vertical-resize-handle-dots: $gray-3;
-$vertical-resize-handle-dots-hover: $gray-2;
-
-// Calendar
-$calendar-bg-days: $white;
-$calendar-bg-now: $gray-6;
-