From d3b90d5b78178c38489e545f2b2d7743cfc9ee17 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Wed, 13 Feb 2019 14:58:27 +0100 Subject: [PATCH] Fixed sass vars template files --- .../src/themes/_variables.dark.scss.tmpl.ts | 770 +++++++++--------- .../src/themes/_variables.light.scss.tmpl.ts | 759 +++++++++-------- .../src/themes/_variables.scss.tmpl.ts | 322 ++++---- packages/grafana-ui/src/themes/default.ts | 6 +- 4 files changed, 926 insertions(+), 931 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 578de71301a..5b5a229a7f9 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -2,389 +2,389 @@ import { GrafanaTheme } from '../types'; -export const darkThemeVarsTemplate = (theme: GrafanaTheme) => ` - // Global values - // -------------------------------------------------- - - $theme-name: dark; - - // Grays - // ------------------------- - $black: ${theme.colors.black}; - $dark-1: ${theme.colors.dark2}; - $dark-2: ${theme.colors.dark2}; - $dark-3: ${theme.colors.dark3}; - $dark-4: ${theme.colors.dark4}; - $dark-5: ${theme.colors.dark5}; - $gray-1: ${theme.colors.gray1}; - $gray-2: ${theme.colors.gray2}; - $gray-3: ${theme.colors.gray3}; - $gray-4: ${theme.colors.gray4}; - $gray-5: ${theme.colors.gray5}; - $gray-6: ${theme.colors.gray6}; - $gray-7: ${theme.colors.gray7}; - - $gray-blue: #212327; - $input-black: #09090b; - - $white: ${theme.colors.white}; - - // Accent colors - // ------------------------- - $blue: ${theme.colors.blue}; - $blue-dark: #005f81; - $green: #299c46; - $red: #d44a3a; - $yellow: #ecbb13; - $purple: #9933cc; - $variable: #32d1df; - $orange: #eb7b18; - - $brand-primary: $orange; - $brand-success: $green; - $brand-warning: $brand-primary; - $brand-danger: $red; - - $query-red: #e24d42; - $query-green: #74e680; - $query-purple: #fe85fc; - $query-keyword: #66d9ef; - $query-orange: $orange; - - // Status colors - // ------------------------- - $online: #10a345; - $warn: #f79520; - $critical: #ed2e18; - - // Scaffolding - // ------------------------- - $body-bg: rgb(23, 24, 25); - $page-bg: rgb(22, 23, 25); - - $body-color: $gray-4; - $text-color: $gray-4; - $text-color-strong: $white; - $text-color-weak: $gray-2; - $text-color-faint: $dark-5; - $text-color-emphasis: $gray-5; - - $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); - $textShadow: none; - - // gradients - $brand-gradient: linear-gradient( - to right, - rgba(255, 213, 0, 0.7) 0%, - rgba(255, 68, 0, 0.7) 99%, - rgba(255, 68, 0, 0.7) 100% - ); - - $page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); - $edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909); - - // Links - // ------------------------- - $link-color: darken($white, 11%); - $link-color-disabled: darken($link-color, 30%); - $link-hover-color: $white; - $external-link-color: $blue; - - // Typography - // ------------------------- - $headings-color: darken($white, 11%); - $abbr-border-color: $gray-3 !default; - $text-muted: $text-color-weak; - - $hr-border-color: $dark-4; - - // Panel - // ------------------------- - $panel-bg: #212124; - $panel-border: solid 1px $dark-1; - $panel-header-hover-bg: $dark-4; - $panel-corner: $panel-bg; - - // page header - $page-header-bg: linear-gradient(90deg, #292a2d, black); - $page-header-shadow: inset 0px -4px 14px $dark-2; - $page-header-border-color: $dark-4; - - $divider-border-color: $gray-1; - - // Graphite Target Editor - $tight-form-bg: $dark-3; - $tight-form-func-bg: $dark-4; - $tight-form-func-highlight-bg: $dark-5; - - $modal-backdrop-bg: #353c42; - $code-tag-bg: $dark-1; - $code-tag-border: $dark-4; - - // cards - $card-background: linear-gradient(135deg, #2f2f32, #262628); - $card-background-hover: linear-gradient(135deg, #343436, #262628); - $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); - - // Lists - $list-item-bg: $card-background; - $list-item-hover-bg: lighten($gray-blue, 2%); - $list-item-link-color: $text-color; - $list-item-shadow: $card-shadow; - - $empty-list-cta-bg: $gray-blue; - - // Scrollbars - $scrollbarBackground: #404357; - $scrollbarBackground2: #3a3a3a; - $scrollbarBorder: black; - - // Tables - // ------------------------- - $table-bg: transparent; // overall background-color - $table-bg-accent: $dark-3; // for striping - $table-border: $dark-3; // table and cell border - - $table-bg-odd: $dark-2; - $table-bg-hover: $dark-3; - - // Buttons - // ------------------------- - $btn-primary-bg: #ff6600; - $btn-primary-bg-hl: #bc3e06; - - $btn-secondary-bg-hl: lighten($blue-dark, 5%); - $btn-secondary-bg: $blue-dark; - - $btn-success-bg: $green; - $btn-success-bg-hl: darken($green, 6%); - - $btn-warning-bg: $brand-warning; - $btn-warning-bg-hl: lighten($brand-warning, 8%); - - $btn-danger-bg: $red; - $btn-danger-bg-hl: darken($red, 8%); - - $btn-inverse-bg: $dark-3; - $btn-inverse-bg-hl: lighten($dark-3, 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-4; - $btn-divider-right: $dark-2; - - $btn-drag-image: '../img/grab_dark.svg'; - - // Forms - // ------------------------- - $input-bg: $input-black; - $input-bg-disabled: $dark-3; - - $input-color: $gray-4; - $input-border-color: $dark-3; - $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1); - $input-border-focus: $input-border-color; - $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-color-select-arrow: $white; - - // Input placeholder text color - $placeholderText: darken($text-color, 25%); - - // Search - $search-shadow: 0 0 30px 0 $black; - $search-filter-box-bg: $gray-blue; - - // Typeahead - $typeahead-shadow: 0 5px 10px 0 $black; - $typeahead-selected-bg: $dark-4; - $typeahead-selected-color: $yellow; - - // Dropdowns - // ------------------------- - $dropdownBackground: $dark-3; - $dropdownBorder: rgba(0, 0, 0, 0.2); - $dropdownDividerTop: transparent; - $dropdownDividerBottom: #444; - - $dropdownLinkColor: $text-color; - $dropdownLinkColorHover: $white; - $dropdownLinkColorActive: $white; - - $dropdownLinkBackgroundHover: $dark-4; - - // Horizontal forms & lists - // ------------------------- - $horizontalComponentOffset: 180px; - - // Navbar - // ------------------------- - $navbarHeight: 55px; - - $navbarBackground: $panel-bg; - $navbarBorder: 1px solid $dark-3; - $navbarShadow: 0 0 20px black; - - $navbarLinkColor: $gray-4; - - $navbarButtonBackground: $navbarBackground; - $navbarButtonBackgroundHighlight: $body-bg; - - $navbar-button-border: #2f2f32; - - // Sidemenu - // ------------------------- - $side-menu-bg: $black; - $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; - - // Menu dropdowns - // ------------------------- - $menu-dropdown-bg: $body-bg; - $menu-dropdown-hover-bg: $dark-2; - $menu-dropdown-shadow: 5px 5px 20px -5px $black; - - // Tabs - // ------------------------- - $tab-border-color: $dark-4; - - // Toolbar - $toolbar-bg: $input-black; - - // Form states and alerts - // ------------------------- - $warning-text-color: $warn; - $error-text-color: #e84d4d; - $success-text-color: #12d95a; - $info-text-color: $blue-dark; - - $alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); - $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); - $alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); - $alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); - - // popover - $popover-bg: $page-bg; - $popover-color: $text-color; - $popover-border-color: $dark-4; - $popover-shadow: 0 0 20px black; - - $popover-help-bg: $btn-secondary-bg; - $popover-help-color: $text-color; - - $popover-error-bg: $btn-danger-bg; - - // Tooltips and popovers - // ------------------------- - $tooltipColor: $popover-help-color; - $tooltipArrowWidth: 5px; - $tooltipLinkColor: $link-color; - $graph-tooltip-bg: $dark-1; - - $tooltipBackground: $black; - $tooltipColor: $gray-4; - $tooltipArrowColor: $tooltipBackground; - $tooltipBackgroundError: $brand-danger; - - // images - $checkboxImageUrl: '../img/checkbox.png'; - - // info box - $info-box-border-color: darken($blue, 12%); - - // 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: $dark-2; - $diff-label-fg: $white; - - $diff-group-bg: $dark-4; - $diff-arrow-color: $white; - - $diff-json-bg: $dark-4; - $diff-json-fg: $gray-5; - - $diff-json-added: #457740; - $diff-json-deleted: #a04338; - - $diff-json-old: #a04338; - $diff-json-new: #457740; - - $diff-json-changed-fg: $gray-5; - $diff-json-changed-num: $text-color; - - $diff-json-icon: $gray-7; - - //Submenu - $variable-option-bg: $blue-dark; - - //Switch Slider - // ------------------------- - $switch-bg: $input-bg; - $switch-slider-color: $dark-2; - $switch-slider-off-bg: $gray-1; - $switch-slider-on-bg: linear-gradient(90deg, $orange, $red); - $switch-slider-shadow: 0 0 3px black; - - //Checkbox - // ------------------------- - $checkbox-bg: $dark-1; - $checkbox-border: 1px solid $gray-1; - $checkbox-checked-bg: linear-gradient(0deg, $orange, $red); - $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-5; - $panel-editor-viz-item-border: 1px solid $dark-5; - $panel-editor-viz-item-shadow-hover: 0 0 4px $blue; - $panel-editor-viz-item-border-hover: 1px solid $blue; - $panel-editor-viz-item-bg: $input-black; - $panel-editor-tabs-line-color: #e3e3e3; - $panel-editor-viz-item-bg-hover: darken($blue, 47%); - - $panel-options-group-border: none; - $panel-options-group-header-bg: $gray-blue; - - $panel-grid-placeholder-bg: darken($blue, 47%); - $panel-grid-placeholder-shadow: 0 0 4px $blue; - - // logs - $logs-color-unkown: $gray-2; - - // toggle-group - $button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red); - $button-toggle-group-btn-active-shadow: inset 0 0 4px $black; - $button-toggle-group-btn-seperator-border: 1px solid $page-bg; - - $vertical-resize-handle-bg: $dark-5; - $vertical-resize-handle-dots: $gray-1; - $vertical-resize-handle-dots-hover: $gray-2; +export const darkThemeVarsTemplate = (theme: GrafanaTheme) => + `// Global values +// -------------------------------------------------- + +$theme-name: dark; + +// Grays +// ------------------------- +$black: ${theme.colors.black}; +$dark-1: ${theme.colors.dark2}; +$dark-2: ${theme.colors.dark2}; +$dark-3: ${theme.colors.dark3}; +$dark-4: ${theme.colors.dark4}; +$dark-5: ${theme.colors.dark5}; +$gray-1: ${theme.colors.gray1}; +$gray-2: ${theme.colors.gray2}; +$gray-3: ${theme.colors.gray3}; +$gray-4: ${theme.colors.gray4}; +$gray-5: ${theme.colors.gray5}; +$gray-6: ${theme.colors.gray6}; +$gray-7: ${theme.colors.gray7}; + +$gray-blue: #212327; +$input-black: #09090b; + +$white: ${theme.colors.white}; + +// Accent colors +// ------------------------- +$blue: ${theme.colors.blue}; +$blue-dark: #005f81; +$green: #299c46; +$red: #d44a3a; +$yellow: #ecbb13; +$purple: #9933cc; +$variable: #32d1df; +$orange: #eb7b18; + +$brand-primary: $orange; +$brand-success: $green; +$brand-warning: $brand-primary; +$brand-danger: $red; + +$query-red: #e24d42; +$query-green: #74e680; +$query-purple: #fe85fc; +$query-keyword: #66d9ef; +$query-orange: $orange; + +// Status colors +// ------------------------- +$online: #10a345; +$warn: #f79520; +$critical: #ed2e18; + +// Scaffolding +// ------------------------- +$body-bg: rgb(23, 24, 25); +$page-bg: rgb(22, 23, 25); + +$body-color: $gray-4; +$text-color: $gray-4; +$text-color-strong: $white; +$text-color-weak: $gray-2; +$text-color-faint: $dark-5; +$text-color-emphasis: $gray-5; + +$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); +$textShadow: none; + +// gradients +$brand-gradient: linear-gradient( + to right, + rgba(255, 213, 0, 0.7) 0%, + rgba(255, 68, 0, 0.7) 99%, + rgba(255, 68, 0, 0.7) 100% +); + +$page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); +$edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909); + +// Links +// ------------------------- +$link-color: darken($white, 11%); +$link-color-disabled: darken($link-color, 30%); +$link-hover-color: $white; +$external-link-color: $blue; + +// Typography +// ------------------------- +$headings-color: darken($white, 11%); +$abbr-border-color: $gray-3 !default; +$text-muted: $text-color-weak; + +$hr-border-color: $dark-4; + +// Panel +// ------------------------- +$panel-bg: #212124; +$panel-border: solid 1px $dark-1; +$panel-header-hover-bg: $dark-4; +$panel-corner: $panel-bg; + +// page header +$page-header-bg: linear-gradient(90deg, #292a2d, black); +$page-header-shadow: inset 0px -4px 14px $dark-2; +$page-header-border-color: $dark-4; + +$divider-border-color: $gray-1; + +// Graphite Target Editor +$tight-form-bg: $dark-3; +$tight-form-func-bg: $dark-4; +$tight-form-func-highlight-bg: $dark-5; + +$modal-backdrop-bg: #353c42; +$code-tag-bg: $dark-1; +$code-tag-border: $dark-4; + +// cards +$card-background: linear-gradient(135deg, #2f2f32, #262628); +$card-background-hover: linear-gradient(135deg, #343436, #262628); +$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); + +// Lists +$list-item-bg: $card-background; +$list-item-hover-bg: lighten($gray-blue, 2%); +$list-item-link-color: $text-color; +$list-item-shadow: $card-shadow; + +$empty-list-cta-bg: $gray-blue; + +// Scrollbars +$scrollbarBackground: #404357; +$scrollbarBackground2: #3a3a3a; +$scrollbarBorder: black; + +// Tables +// ------------------------- +$table-bg: transparent; // overall background-color +$table-bg-accent: $dark-3; // for striping +$table-border: $dark-3; // table and cell border + +$table-bg-odd: $dark-2; +$table-bg-hover: $dark-3; + +// Buttons +// ------------------------- +$btn-primary-bg: #ff6600; +$btn-primary-bg-hl: #bc3e06; + +$btn-secondary-bg-hl: lighten($blue-dark, 5%); +$btn-secondary-bg: $blue-dark; + +$btn-success-bg: $green; +$btn-success-bg-hl: darken($green, 6%); + +$btn-warning-bg: $brand-warning; +$btn-warning-bg-hl: lighten($brand-warning, 8%); + +$btn-danger-bg: $red; +$btn-danger-bg-hl: darken($red, 8%); + +$btn-inverse-bg: $dark-3; +$btn-inverse-bg-hl: lighten($dark-3, 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-4; +$btn-divider-right: $dark-2; + +$btn-drag-image: '../img/grab_dark.svg'; + +// Forms +// ------------------------- +$input-bg: $input-black; +$input-bg-disabled: $dark-3; + +$input-color: $gray-4; +$input-border-color: $dark-3; +$input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1); +$input-border-focus: $input-border-color; +$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-color-select-arrow: $white; + +// Input placeholder text color +$placeholderText: darken($text-color, 25%); + +// Search +$search-shadow: 0 0 30px 0 $black; +$search-filter-box-bg: $gray-blue; + +// Typeahead +$typeahead-shadow: 0 5px 10px 0 $black; +$typeahead-selected-bg: $dark-4; +$typeahead-selected-color: $yellow; + +// Dropdowns +// ------------------------- +$dropdownBackground: $dark-3; +$dropdownBorder: rgba(0, 0, 0, 0.2); +$dropdownDividerTop: transparent; +$dropdownDividerBottom: #444; + +$dropdownLinkColor: $text-color; +$dropdownLinkColorHover: $white; +$dropdownLinkColorActive: $white; + +$dropdownLinkBackgroundHover: $dark-4; + +// Horizontal forms & lists +// ------------------------- +$horizontalComponentOffset: 180px; + +// Navbar +// ------------------------- +$navbarHeight: 55px; + +$navbarBackground: $panel-bg; +$navbarBorder: 1px solid $dark-3; +$navbarShadow: 0 0 20px black; + +$navbarLinkColor: $gray-4; + +$navbarButtonBackground: $navbarBackground; +$navbarButtonBackgroundHighlight: $body-bg; + +$navbar-button-border: #2f2f32; + +// Sidemenu +// ------------------------- +$side-menu-bg: $black; +$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; + +// Menu dropdowns +// ------------------------- +$menu-dropdown-bg: $body-bg; +$menu-dropdown-hover-bg: $dark-2; +$menu-dropdown-shadow: 5px 5px 20px -5px $black; + +// Tabs +// ------------------------- +$tab-border-color: $dark-4; + +// Toolbar +$toolbar-bg: $input-black; + +// Form states and alerts +// ------------------------- +$warning-text-color: $warn; +$error-text-color: #e84d4d; +$success-text-color: #12d95a; +$info-text-color: $blue-dark; + +$alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); +$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); +$alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); +$alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); + +// popover +$popover-bg: $page-bg; +$popover-color: $text-color; +$popover-border-color: $dark-4; +$popover-shadow: 0 0 20px black; + +$popover-help-bg: $btn-secondary-bg; +$popover-help-color: $text-color; + +$popover-error-bg: $btn-danger-bg; + +// Tooltips and popovers +// ------------------------- +$tooltipColor: $popover-help-color; +$tooltipArrowWidth: 5px; +$tooltipLinkColor: $link-color; +$graph-tooltip-bg: $dark-1; + +$tooltipBackground: $black; +$tooltipColor: $gray-4; +$tooltipArrowColor: $tooltipBackground; +$tooltipBackgroundError: $brand-danger; + +// images +$checkboxImageUrl: '../img/checkbox.png'; + +// info box +$info-box-border-color: darken($blue, 12%); + +// 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: $dark-2; +$diff-label-fg: $white; + +$diff-group-bg: $dark-4; +$diff-arrow-color: $white; + +$diff-json-bg: $dark-4; +$diff-json-fg: $gray-5; + +$diff-json-added: #457740; +$diff-json-deleted: #a04338; + +$diff-json-old: #a04338; +$diff-json-new: #457740; + +$diff-json-changed-fg: $gray-5; +$diff-json-changed-num: $text-color; + +$diff-json-icon: $gray-7; + +//Submenu +$variable-option-bg: $blue-dark; + +//Switch Slider +// ------------------------- +$switch-bg: $input-bg; +$switch-slider-color: $dark-2; +$switch-slider-off-bg: $gray-1; +$switch-slider-on-bg: linear-gradient(90deg, $orange, $red); +$switch-slider-shadow: 0 0 3px black; + +//Checkbox +// ------------------------- +$checkbox-bg: $dark-1; +$checkbox-border: 1px solid $gray-1; +$checkbox-checked-bg: linear-gradient(0deg, $orange, $red); +$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-5; +$panel-editor-viz-item-border: 1px solid $dark-5; +$panel-editor-viz-item-shadow-hover: 0 0 4px $blue; +$panel-editor-viz-item-border-hover: 1px solid $blue; +$panel-editor-viz-item-bg: $input-black; +$panel-editor-tabs-line-color: #e3e3e3; +$panel-editor-viz-item-bg-hover: darken($blue, 47%); + +$panel-options-group-border: none; +$panel-options-group-header-bg: $gray-blue; + +$panel-grid-placeholder-bg: darken($blue, 47%); +$panel-grid-placeholder-shadow: 0 0 4px $blue; + +// logs +$logs-color-unkown: $gray-2; + +// toggle-group +$button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red); +$button-toggle-group-btn-active-shadow: inset 0 0 4px $black; +$button-toggle-group-btn-seperator-border: 1px solid $page-bg; + +$vertical-resize-handle-bg: $dark-5; +$vertical-resize-handle-dots: $gray-1; +$vertical-resize-handle-dots-hover: $gray-2; `; 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 80e425af0f8..552de0fe62c 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -2,386 +2,381 @@ import { GrafanaTheme } from '../types'; -export const lightThemeVarsTemplate = (theme: GrafanaTheme) => ` - // Global values - // -------------------------------------------------- - - $theme-name: light; - - // Grays - // ------------------------- - $black: ${theme.colors.black}; - $dark-1: ${theme.colors.dark1}; - $dark-2: ${theme.colors.dark2}; - $dark-3: ${theme.colors.dark3}; - $dark-4: ${theme.colors.dark4}; - $dark-5: ${theme.colors.dark5}; - $gray-1: ${theme.colors.gray1}; - $gray-2: ${theme.colors.gray2}; - $gray-3: ${theme.colors.gray3}; - $gray-4: ${theme.colors.gray4}; - $gray-5: ${theme.colors.gray5}; - $gray-6: ${theme.colors.gray6}; - $gray-7: ${theme.colors.gray7}; - - $white: ${theme.colors.white}; - - // Accent colors - // ------------------------- - $blue: ${theme.colors.blue}; - $blue-light: #00a8e6; - $green: #3aa655; - $red: #d44939; - $yellow: #ff851b; - $orange: #ff7941; - $purple: #9954bb; - $variable: $blue; - - $brand-primary: $orange; - $brand-success: $green; - $brand-warning: $orange; - $brand-danger: $red; - - $query-red: $red; - $query-green: $green; - $query-purple: $purple; - $query-orange: $orange; - $query-keyword: $blue; - - // Status colors - // ------------------------- - $online: #01a64f; - $warn: #f79520; - $critical: #ec2128; - - // Scaffolding - // ------------------------- - $body-bg: $gray-7; - $page-bg: $gray-7; - - $body-color: $gray-1; - $text-color: $gray-1; - $text-color-strong: $dark-2; - $text-color-weak: $gray-2; - $text-color-faint: $gray-4; - $text-color-emphasis: $dark-5; - - $text-shadow-faint: none; - $textShadow: none; - - // gradients - $brand-gradient: linear-gradient( - to right, - rgba(255, 213, 0, 1) 0%, - rgba(255, 68, 0, 1) 99%, - rgba(255, 68, 0, 1) 100% - ); - - $page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px); - $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); - - // Links - // ------------------------- - $link-color: $gray-1; - $link-color-disabled: lighten($link-color, 30%); - $link-hover-color: darken($link-color, 20%); - $external-link-color: $blue-light; - - // Typography - // ------------------------- - $headings-color: $text-color; - $abbr-border-color: $gray-2 !default; - $text-muted: $text-color-weak; - - $hr-border-color: $dark-3 !default; - - // Panel - // ------------------------- - $panel-bg: $white; - $panel-border: solid 1px $gray-5; - $panel-header-hover-bg: $gray-6; - $panel-corner: $gray-4; - - // Page header - $page-header-bg: linear-gradient(90deg, $white, $gray-7); - $page-header-shadow: inset 0px -3px 10px $gray-6; - $page-header-border-color: $gray-4; - - $divider-border-color: $gray-2; - - // Graphite Target Editor - $tight-form-bg: #eaebee; - $tight-form-func-bg: $gray-5; - $tight-form-func-highlight-bg: $gray-6; - - $modal-backdrop-bg: $body-bg; - $code-tag-bg: $gray-6; - $code-tag-border: darken($code-tag-bg, 3%); - - // cards - $card-background: linear-gradient(135deg, $gray-6, $gray-5); - $card-background-hover: linear-gradient(135deg, $gray-5, $gray-6); - $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1); - - // Lists - $list-item-bg: linear-gradient(135deg, $gray-5, $gray-6); //$card-background; - $list-item-hover-bg: darken($gray-5, 5%); - $list-item-link-color: $text-color; - $list-item-shadow: $card-shadow; - - $empty-list-cta-bg: $gray-6; - - // Scrollbars - $scrollbarBackground: $gray-5; - $scrollbarBackground2: $gray-5; - $scrollbarBorder: $gray-4; - - // Tables - // ------------------------- - $table-bg: transparent; // overall background-color - $table-bg-accent: $gray-5; // for striping - $table-border: $gray-3; // table and cell border - - $table-bg-odd: $gray-6; - $table-bg-hover: $gray-5; - - // Buttons - // ------------------------- - $btn-primary-bg: $brand-primary; - $btn-primary-bg-hl: lighten($brand-primary, 8%); - - $btn-secondary-bg: $blue; - $btn-secondary-bg-hl: lighten($blue, 4%); - - $btn-success-bg: lighten($green, 3%); - $btn-success-bg-hl: darken($green, 3%); - - $btn-warning-bg: lighten($orange, 3%); - $btn-warning-bg-hl: darken($orange, 3%); - - $btn-danger-bg: lighten($red, 3%); - $btn-danger-bg-hl: darken($red, 3%); - - $btn-inverse-bg: $gray-6; - $btn-inverse-bg-hl: darken($gray-6, 5%); - $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'; - - // Forms - // ------------------------- - $input-bg: $white; - $input-bg-disabled: $gray-5; - - $input-color: $dark-3; - $input-border-color: $gray-5; - $input-box-shadow: none; - $input-border-focus: $blue !default; - $input-box-shadow-focus: $blue !default; - $input-color-placeholder: $gray-4 !default; - $input-label-bg: $gray-5; - $input-label-border-color: $gray-5; - $input-color-select-arrow: $gray-1; - - // Input placeholder text color - $placeholderText: $gray-2; - - // search - $search-shadow: 0 5px 30px 0 $gray-4; - $search-filter-box-bg: $gray-7; - - // Typeahead - $typeahead-shadow: 0 5px 10px 0 $gray-5; - $typeahead-selected-bg: $gray-6; - $typeahead-selected-color: $yellow; - - // Dropdowns - // ------------------------- - $dropdownBackground: $white; - $dropdownBorder: $gray-4; - $dropdownDividerTop: $gray-6; - $dropdownDividerBottom: $white; - - $dropdownLinkColor: $dark-3; - $dropdownLinkColorHover: $link-color; - $dropdownLinkColorActive: $link-color; - - $dropdownLinkBackgroundHover: $gray-6; - - // Horizontal forms & lists - // ------------------------- - $horizontalComponentOffset: 180px; - - // Navbar - // ------------------------- - $navbarHeight: 52px; - - $navbarBackground: $white; - $navbarBorder: 1px solid $gray-4; - $navbarShadow: 0 0 3px #c1c1c1; - - $navbarLinkColor: #444; - - $navbarButtonBackground: lighten($navbarBackground, 3%); - $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); - - $navbar-button-border: $gray-4; - - // Sidemenu - // ------------------------- - $side-menu-bg: $dark-2; - $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6; - $side-menu-item-hover-bg: $gray-1; - $side-menu-shadow: 5px 0px 10px -5px $gray-1; - $side-menu-link-color: $gray-6; - - // Menu dropdowns - // ------------------------- - $menu-dropdown-bg: $gray-7; - $menu-dropdown-hover-bg: $gray-6; - $menu-dropdown-shadow: 5px 5px 10px -5px $gray-1; - - // Tabs - // ------------------------- - $tab-border-color: $gray-5; - - // Toolbar - $toolbar-bg: white; - - // Form states and alerts - // ------------------------- - $warning-text-color: lighten($orange, 10%); - $error-text-color: lighten($red, 10%); - $success-text-color: lighten($green, 10%); - $info-text-color: $blue; - - $alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d); - $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); - $alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d); - $alert-info-bg: $blue; - - // popover - $popover-bg: $page-bg; - $popover-color: $text-color; - $popover-border-color: $gray-5; - $popover-shadow: 0 0 20px $white; - - $popover-help-bg: $blue; - $popover-help-color: $gray-6; - - $popover-error-bg: $btn-danger-bg; - - // Tooltips and popovers - // ------------------------- - $tooltipColor: $popover-help-color; - $tooltipArrowWidth: 5px; - $tooltipLinkColor: lighten($popover-help-color, 5%); - $graph-tooltip-bg: $gray-5; - - $tooltipBackground: $gray-1; - $tooltipColor: $gray-7; - $tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip - $tooltipBackgroundError: $brand-danger; - - // images - $checkboxImageUrl: '../img/checkbox_white.png'; - - // info box - $info-box-border-color: lighten($blue, 20%); - - // footer - $footer-link-color: $gray-3; - $footer-link-hover: $dark-5; - - // json explorer - $json-explorer-default-color: black; - $json-explorer-string-color: green; - $json-explorer-number-color: blue; - $json-explorer-boolean-color: red; - $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; - $json-explorer-key-color: #00008b; - $json-explorer-url-color: blue; - - // Changelog and diff - // ------------------------- - $diff-label-bg: $gray-5; - $diff-label-fg: $gray-2; - - $diff-arrow-color: $dark-3; - $diff-group-bg: $gray-7; - - $diff-json-bg: $gray-5; - $diff-json-fg: $gray-2; - - $diff-json-added: lighten(desaturate($green, 30%), 10%); - $diff-json-deleted: desaturate($red, 35%); - - $diff-json-old: #5a372a; - $diff-json-new: #664e33; - - $diff-json-changed-fg: $gray-6; - $diff-json-changed-num: $gray-4; - - $diff-json-icon: $gray-4; - - //Submenu - $variable-option-bg: $blue-light; - - //Switch Slider - // ------------------------- - $switch-bg: $white; - $switch-slider-color: $gray-7; - $switch-slider-off-bg: $gray-5; - $switch-slider-on-bg: linear-gradient(90deg, $yellow, $red); - $switch-slider-shadow: 0 0 3px $dark-5; - - //Checkbox - // ------------------------- - $checkbox-bg: $gray-6; - $checkbox-border: 1px solid $gray-3; - $checkbox-checked-bg: linear-gradient(0deg, $yellow, $red); - $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: $white; - $panel-editor-tabs-line-color: $dark-5; - $panel-editor-viz-item-bg-hover: lighten($blue, 62%); - - $panel-options-group-border: none; - $panel-options-group-header-bg: $gray-5; - - $panel-grid-placeholder-bg: lighten($blue, 62%); - $panel-grid-placeholder-shadow: 0 0 4px $blue-light; - - // logs - $logs-color-unkown: $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-seperator-border: 1px solid $gray-6; - - $vertical-resize-handle-bg: $gray-4; - $vertical-resize-handle-dots: $gray-3; - $vertical-resize-handle-dots-hover: $gray-2; +export const lightThemeVarsTemplate = (theme: GrafanaTheme) => + `// Global values +// -------------------------------------------------- + +$theme-name: light; + +// Grays +// ------------------------- +$black: ${theme.colors.black}; +$dark-1: ${theme.colors.dark1}; +$dark-2: ${theme.colors.dark2}; +$dark-3: ${theme.colors.dark3}; +$dark-4: ${theme.colors.dark4}; +$dark-5: ${theme.colors.dark5}; +$gray-1: ${theme.colors.gray1}; +$gray-2: ${theme.colors.gray2}; +$gray-3: ${theme.colors.gray3}; +$gray-4: ${theme.colors.gray4}; +$gray-5: ${theme.colors.gray5}; +$gray-6: ${theme.colors.gray6}; +$gray-7: ${theme.colors.gray7}; + +$white: ${theme.colors.white}; + +// Accent colors +// ------------------------- +$blue: ${theme.colors.blue}; +$blue-light: #00a8e6; +$green: #3aa655; +$red: #d44939; +$yellow: #ff851b; +$orange: #ff7941; +$purple: #9954bb; +$variable: $blue; + +$brand-primary: $orange; +$brand-success: $green; +$brand-warning: $orange; +$brand-danger: $red; + +$query-red: $red; +$query-green: $green; +$query-purple: $purple; +$query-orange: $orange; +$query-keyword: $blue; + +// Status colors +// ------------------------- +$online: #01a64f; +$warn: #f79520; +$critical: #ec2128; + +// Scaffolding +// ------------------------- +$body-bg: $gray-7; +$page-bg: $gray-7; + +$body-color: $gray-1; +$text-color: $gray-1; +$text-color-strong: $dark-2; +$text-color-weak: $gray-2; +$text-color-faint: $gray-4; +$text-color-emphasis: $dark-5; + +$text-shadow-faint: none; +$textShadow: none; + +// gradients +$brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%); + +$page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px); +$edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); + +// Links +// ------------------------- +$link-color: $gray-1; +$link-color-disabled: lighten($link-color, 30%); +$link-hover-color: darken($link-color, 20%); +$external-link-color: $blue-light; + +// Typography +// ------------------------- +$headings-color: $text-color; +$abbr-border-color: $gray-2 !default; +$text-muted: $text-color-weak; + +$hr-border-color: $dark-3 !default; + +// Panel +// ------------------------- +$panel-bg: $white; +$panel-border: solid 1px $gray-5; +$panel-header-hover-bg: $gray-6; +$panel-corner: $gray-4; + +// Page header +$page-header-bg: linear-gradient(90deg, $white, $gray-7); +$page-header-shadow: inset 0px -3px 10px $gray-6; +$page-header-border-color: $gray-4; + +$divider-border-color: $gray-2; + +// Graphite Target Editor +$tight-form-bg: #eaebee; +$tight-form-func-bg: $gray-5; +$tight-form-func-highlight-bg: $gray-6; + +$modal-backdrop-bg: $body-bg; +$code-tag-bg: $gray-6; +$code-tag-border: darken($code-tag-bg, 3%); + +// cards +$card-background: linear-gradient(135deg, $gray-6, $gray-5); +$card-background-hover: linear-gradient(135deg, $gray-5, $gray-6); +$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1); + +// Lists +$list-item-bg: linear-gradient(135deg, $gray-5, $gray-6); //$card-background; +$list-item-hover-bg: darken($gray-5, 5%); +$list-item-link-color: $text-color; +$list-item-shadow: $card-shadow; + +$empty-list-cta-bg: $gray-6; + +// Scrollbars +$scrollbarBackground: $gray-5; +$scrollbarBackground2: $gray-5; +$scrollbarBorder: $gray-4; + +// Tables +// ------------------------- +$table-bg: transparent; // overall background-color +$table-bg-accent: $gray-5; // for striping +$table-border: $gray-3; // table and cell border + +$table-bg-odd: $gray-6; +$table-bg-hover: $gray-5; + +// Buttons +// ------------------------- +$btn-primary-bg: $brand-primary; +$btn-primary-bg-hl: lighten($brand-primary, 8%); + +$btn-secondary-bg: $blue; +$btn-secondary-bg-hl: lighten($blue, 4%); + +$btn-success-bg: lighten($green, 3%); +$btn-success-bg-hl: darken($green, 3%); + +$btn-warning-bg: lighten($orange, 3%); +$btn-warning-bg-hl: darken($orange, 3%); + +$btn-danger-bg: lighten($red, 3%); +$btn-danger-bg-hl: darken($red, 3%); + +$btn-inverse-bg: $gray-6; +$btn-inverse-bg-hl: darken($gray-6, 5%); +$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'; + +// Forms +// ------------------------- +$input-bg: $white; +$input-bg-disabled: $gray-5; + +$input-color: $dark-3; +$input-border-color: $gray-5; +$input-box-shadow: none; +$input-border-focus: $blue !default; +$input-box-shadow-focus: $blue !default; +$input-color-placeholder: $gray-4 !default; +$input-label-bg: $gray-5; +$input-label-border-color: $gray-5; +$input-color-select-arrow: $gray-1; + +// Input placeholder text color +$placeholderText: $gray-2; + +// search +$search-shadow: 0 5px 30px 0 $gray-4; +$search-filter-box-bg: $gray-7; + +// Typeahead +$typeahead-shadow: 0 5px 10px 0 $gray-5; +$typeahead-selected-bg: $gray-6; +$typeahead-selected-color: $yellow; + +// Dropdowns +// ------------------------- +$dropdownBackground: $white; +$dropdownBorder: $gray-4; +$dropdownDividerTop: $gray-6; +$dropdownDividerBottom: $white; + +$dropdownLinkColor: $dark-3; +$dropdownLinkColorHover: $link-color; +$dropdownLinkColorActive: $link-color; + +$dropdownLinkBackgroundHover: $gray-6; + +// Horizontal forms & lists +// ------------------------- +$horizontalComponentOffset: 180px; + +// Navbar +// ------------------------- +$navbarHeight: 52px; + +$navbarBackground: $white; +$navbarBorder: 1px solid $gray-4; +$navbarShadow: 0 0 3px #c1c1c1; + +$navbarLinkColor: #444; + +$navbarButtonBackground: lighten($navbarBackground, 3%); +$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); + +$navbar-button-border: $gray-4; + +// Sidemenu +// ------------------------- +$side-menu-bg: $dark-2; +$side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6; +$side-menu-item-hover-bg: $gray-1; +$side-menu-shadow: 5px 0px 10px -5px $gray-1; +$side-menu-link-color: $gray-6; + +// Menu dropdowns +// ------------------------- +$menu-dropdown-bg: $gray-7; +$menu-dropdown-hover-bg: $gray-6; +$menu-dropdown-shadow: 5px 5px 10px -5px $gray-1; + +// Tabs +// ------------------------- +$tab-border-color: $gray-5; + +// Toolbar +$toolbar-bg: white; + +// Form states and alerts +// ------------------------- +$warning-text-color: lighten($orange, 10%); +$error-text-color: lighten($red, 10%); +$success-text-color: lighten($green, 10%); +$info-text-color: $blue; + +$alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d); +$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); +$alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d); +$alert-info-bg: $blue; + +// popover +$popover-bg: $page-bg; +$popover-color: $text-color; +$popover-border-color: $gray-5; +$popover-shadow: 0 0 20px $white; + +$popover-help-bg: $blue; +$popover-help-color: $gray-6; + +$popover-error-bg: $btn-danger-bg; + +// Tooltips and popovers +// ------------------------- +$tooltipColor: $popover-help-color; +$tooltipArrowWidth: 5px; +$tooltipLinkColor: lighten($popover-help-color, 5%); +$graph-tooltip-bg: $gray-5; + +$tooltipBackground: $gray-1; +$tooltipColor: $gray-7; +$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip +$tooltipBackgroundError: $brand-danger; + +// images +$checkboxImageUrl: '../img/checkbox_white.png'; + +// info box +$info-box-border-color: lighten($blue, 20%); + +// footer +$footer-link-color: $gray-3; +$footer-link-hover: $dark-5; + +// json explorer +$json-explorer-default-color: black; +$json-explorer-string-color: green; +$json-explorer-number-color: blue; +$json-explorer-boolean-color: red; +$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; +$json-explorer-key-color: #00008b; +$json-explorer-url-color: blue; + +// Changelog and diff +// ------------------------- +$diff-label-bg: $gray-5; +$diff-label-fg: $gray-2; + +$diff-arrow-color: $dark-3; +$diff-group-bg: $gray-7; + +$diff-json-bg: $gray-5; +$diff-json-fg: $gray-2; + +$diff-json-added: lighten(desaturate($green, 30%), 10%); +$diff-json-deleted: desaturate($red, 35%); + +$diff-json-old: #5a372a; +$diff-json-new: #664e33; + +$diff-json-changed-fg: $gray-6; +$diff-json-changed-num: $gray-4; + +$diff-json-icon: $gray-4; + +//Submenu +$variable-option-bg: $blue-light; + +//Switch Slider +// ------------------------- +$switch-bg: $white; +$switch-slider-color: $gray-7; +$switch-slider-off-bg: $gray-5; +$switch-slider-on-bg: linear-gradient(90deg, $yellow, $red); +$switch-slider-shadow: 0 0 3px $dark-5; + +//Checkbox +// ------------------------- +$checkbox-bg: $gray-6; +$checkbox-border: 1px solid $gray-3; +$checkbox-checked-bg: linear-gradient(0deg, $yellow, $red); +$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: $white; +$panel-editor-tabs-line-color: $dark-5; +$panel-editor-viz-item-bg-hover: lighten($blue, 62%); + +$panel-options-group-border: none; +$panel-options-group-header-bg: $gray-5; + +$panel-grid-placeholder-bg: lighten($blue, 62%); +$panel-grid-placeholder-shadow: 0 0 4px $blue-light; + +// logs +$logs-color-unkown: $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-seperator-border: 1px solid $gray-6; + +$vertical-resize-handle-bg: $gray-4; +$vertical-resize-handle-dots: $gray-3; +$vertical-resize-handle-dots-hover: $gray-2; `; diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts index 671ab5bb631..0051f74b21b 100644 --- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts @@ -2,216 +2,216 @@ import { GrafanaThemeCommons } from '../types'; -export const commonThemeVarsTemplate = (theme: GrafanaThemeCommons) => ` - // Options - // - // Quickly modify global styling by enabling or disabling optional features. +export const commonThemeVarsTemplate = (theme: GrafanaThemeCommons) => + `// Options +// +// Quickly modify global styling by enabling or disabling optional features. - $enable-flex: true !default; - $enable-hover-media-query: false !default; +$enable-flex: true !default; +$enable-hover-media-query: false !default; - // Spacing - // - // Control the default styling of most Bootstrap elements by modifying these - // variables. Mostly focused on spacing. +// Spacing +// +// Control the default styling of most Bootstrap elements by modifying these +// variables. Mostly focused on spacing. - $spacer: 1rem !default; - $spacer-x: $spacer !default; - $spacer-y: $spacer !default; - $spacers: ( - 0: (x: 0, y: 0), - 1: (x: $spacer-x, y: $spacer-y), - 2: (x: ($spacer-x * 1.5), y: ($spacer-y * 1.5)), - 3: (x: ($spacer-x * 3), y: ($spacer-y * 3)) - ) - !default; - $border-width: 1px !default; +$spacer: 1rem !default; +$spacer-x: $spacer !default; +$spacer-y: $spacer !default; +$spacers: ( + 0: (x: 0, y: 0), + 1: (x: $spacer-x, y: $spacer-y), + 2: (x: ($spacer-x * 1.5), y: ($spacer-y * 1.5)), + 3: (x: ($spacer-x * 3), y: ($spacer-y * 3)) + ) + !default; +$border-width: 1px !default; - // Grid breakpoints - // - // Define the minimum and maximum dimensions at which your layout will change, - // adapting to different screen sizes, for use in media queries. +// Grid breakpoints +// +// Define the minimum and maximum dimensions at which your layout will change, +// adapting to different screen sizes, for use in media queries. - $grid-breakpoints: (xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px) !default; +$grid-breakpoints: (xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px) !default; - // Grid containers - // - // Define the maximum width of .container for different screen sizes. +// Grid containers +// +// Define the maximum width of .container for different screen sizes. - $container-max-widths: (sm: 576px, md: 720px, lg: 940px, xl: 1080px) !default; +$container-max-widths: (sm: 576px, md: 720px, lg: 940px, xl: 1080px) !default; - // Grid columns - // - // Set the number of columns and specify the width of the gutters. +// Grid columns +// +// Set the number of columns and specify the width of the gutters. - $grid-columns: 12 !default; - $grid-gutter-width: 30px !default; +$grid-columns: 12 !default; +$grid-gutter-width: 30px !default; - $enable-flex: true; +$enable-flex: true; - // Typography - // ------------------------- +// Typography +// ------------------------- - $font-family-sans-serif: ${theme.typography.fontFamily.sansSerif}; - $font-family-serif: ${theme.typography.fontFamily.serif}; - $font-family-monospace: ${theme.typography.fontFamily.monospace}; - $font-family-base: $font-family-sans-serif !default; +$font-family-sans-serif: ${theme.typography.fontFamily.sansSerif}; +$font-family-serif: ${theme.typography.fontFamily.serif}; +$font-family-monospace: ${theme.typography.fontFamily.monospace}; +$font-family-base: $font-family-sans-serif !default; - $font-size-root: 14px !default; - $font-size-base: 13px !default; +$font-size-root: 14px !default; +$font-size-base: 13px !default; - $font-size-lg: 18px !default; - $font-size-md: 14px !default; - $font-size-sm: 12px !default; - $font-size-xs: 10px !default; +$font-size-lg: 18px !default; +$font-size-md: 14px !default; +$font-size-sm: 12px !default; +$font-size-xs: 10px !default; - $line-height-base: 1.5 !default; - $font-weight-semi-bold: 500; +$line-height-base: 1.5 !default; +$font-weight-semi-bold: 500; - $font-size-h1: 2rem !default; - $font-size-h2: 1.75rem !default; - $font-size-h3: 1.5rem !default; - $font-size-h4: 1.3rem !default; - $font-size-h5: 1.2rem !default; - $font-size-h6: 1rem !default; +$font-size-h1: 2rem !default; +$font-size-h2: 1.75rem !default; +$font-size-h3: 1.5rem !default; +$font-size-h4: 1.3rem !default; +$font-size-h5: 1.2rem !default; +$font-size-h6: 1rem !default; - $display1-size: 6rem !default; - $display2-size: 5.5rem !default; - $display3-size: 4.5rem !default; - $display4-size: 3.5rem !default; +$display1-size: 6rem !default; +$display2-size: 5.5rem !default; +$display3-size: 4.5rem !default; +$display4-size: 3.5rem !default; - $display1-weight: 400 !default; - $display2-weight: 400 !default; - $display3-weight: 400 !default; - $display4-weight: 400 !default; +$display1-weight: 400 !default; +$display2-weight: 400 !default; +$display3-weight: 400 !default; +$display4-weight: 400 !default; - $lead-font-size: 1.25rem !default; - $lead-font-weight: 300 !default; +$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-weight: 400 !default; - $headings-line-height: 1.1 !default; +$headings-margin-bottom: ($spacer / 2) !default; +$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; +$headings-font-weight: 400 !default; +$headings-line-height: 1.1 !default; - $hr-border-width: $border-width !default; - $dt-font-weight: bold !default; +$hr-border-width: $border-width !default; +$dt-font-weight: bold !default; - // Components - // - // Define common padding and border radius sizes and more. +// Components +// +// Define common padding and border radius sizes and more. - $line-height-lg: (4 / 3) !default; - $line-height-sm: 1.5 !default; +$line-height-lg: (4 / 3) !default; +$line-height-sm: 1.5 !default; - $border-radius: 3px !default; - $border-radius-lg: 5px !default; - $border-radius-sm: 2px!default; +$border-radius: 3px !default; +$border-radius-lg: 5px !default; +$border-radius-sm: 2px!default; - // Page +// Page - $page-sidebar-width: 11rem; - $page-sidebar-margin: 4rem; +$page-sidebar-width: 11rem; +$page-sidebar-margin: 4rem; - // Links - // ------------------------- - $link-decoration: none !default; - $link-hover-decoration: none !default; +// Links +// ------------------------- +$link-decoration: none !default; +$link-hover-decoration: none !default; - // Tables - // - // Customizes the table component with basic values, each used across all table variations. +// Tables +// +// Customizes the table component with basic values, each used across all table variations. - $table-cell-padding: 4px 10px !default; +$table-cell-padding: 4px 10px !default; - // Forms - $input-padding-x: 10px !default; - $input-padding-y: 8px !default; - $input-line-height: 18px !default; +// Forms +$input-padding-x: 10px !default; +$input-padding-y: 8px !default; +$input-line-height: 18px !default; - $input-btn-border-width: 1px; - $input-border-radius: 0 $border-radius $border-radius 0 !default; - $input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default; +$input-btn-border-width: 1px; +$input-border-radius: 0 $border-radius $border-radius 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-sm: $border-radius-sm 0 0 $border-radius-sm !default; +$label-border-radius: $border-radius 0 0 $border-radius !default; +$label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default; - $input-padding-y-sm: 4px !default; +$input-padding-y-sm: 4px !default; - $input-padding-x-lg: 20px !default; - $input-padding-y-lg: 10px !default; +$input-padding-x-lg: 20px !default; +$input-padding-y-lg: 10px !default; - $input-height: 35px !default; +$input-height: 35px !default; - $gf-form-margin: 0.2rem; - $gf-form-input-height: 35px; +$gf-form-margin: 0.2rem; +$gf-form-input-height: 35px; - $cursor-disabled: not-allowed !default; +$cursor-disabled: not-allowed !default; - // Form validation icons - $form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") - !default; - $form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") - !default; - $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") - !default; +// Form validation icons +$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") + !default; +$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") + !default; +$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") + !default; - // Z-index master list - // ------------------------- - // Used for a bird's eye view of components dependent on the z-axis - // Try to avoid customizing these :) - $zindex-dropdown: 1000; - $zindex-navbar-fixed: 1020; - $zindex-sidemenu: 1025; - $zindex-tooltip: 1030; - $zindex-modal-backdrop: 1040; - $zindex-modal: 1050; - $zindex-typeahead: 1060; +// Z-index master list +// ------------------------- +// Used for a bird's eye view of components dependent on the z-axis +// Try to avoid customizing these :) +$zindex-dropdown: 1000; +$zindex-navbar-fixed: 1020; +$zindex-sidemenu: 1025; +$zindex-tooltip: 1030; +$zindex-modal-backdrop: 1040; +$zindex-modal: 1050; +$zindex-typeahead: 1060; - // Buttons - // +// Buttons +// - $btn-padding-x: 1rem !default; - $btn-padding-y: 0.7rem !default; - $btn-line-height: 1 !default; - $btn-font-weight: 500 !default; +$btn-padding-x: 1rem !default; +$btn-padding-y: 0.7rem !default; +$btn-line-height: 1 !default; +$btn-font-weight: 500 !default; - $btn-padding-x-sm: 0.5rem !default; - $btn-padding-y-sm: 0.25rem !default; +$btn-padding-x-sm: 0.5rem !default; +$btn-padding-y-sm: 0.25rem !default; - $btn-padding-x-lg: 21px !default; - $btn-padding-y-lg: 11px !default; +$btn-padding-x-lg: 21px !default; +$btn-padding-y-lg: 11px !default; - $btn-padding-x-xl: 21px !default; - $btn-padding-y-xl: 11px !default; +$btn-padding-x-xl: 21px !default; +$btn-padding-y-xl: 11px !default; - $btn-border-radius: 2px; +$btn-border-radius: 2px; - $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; +$btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; - // sidemenu - $side-menu-width: 60px; +// sidemenu +$side-menu-width: 60px; - // dashboard - $panel-margin: 10px; - $dashboard-padding: $panel-margin * 2; - $panel-horizontal-padding: 10; - $panel-vertical-padding: 5; - $panel-padding: 0px $panel-horizontal-padding+0px $panel-vertical-padding+0px $panel-horizontal-padding+0px; +// dashboard +$panel-margin: 10px; +$dashboard-padding: $panel-margin * 2; +$panel-horizontal-padding: 10; +$panel-vertical-padding: 5; +$panel-padding: 0px $panel-horizontal-padding+0px $panel-vertical-padding+0px $panel-horizontal-padding+0px; - // tabs - $tabs-padding: 10px 15px 9px; +// tabs +$tabs-padding: 10px 15px 9px; - $external-services: ( - github: (bgColor: #464646, borderColor: #393939, icon: ''), - gitlab: (bgColor: #fc6d26, borderColor: #e24329, icon: ''), - google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ''), - grafanacom: (bgColor: #262628, borderColor: #393939, icon: ''), - oauth: (bgColor: #262628, borderColor: #393939, icon: '') - ) - !default; +$external-services: ( + github: (bgColor: #464646, borderColor: #393939, icon: ''), + gitlab: (bgColor: #fc6d26, borderColor: #e24329, icon: ''), + google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ''), + grafanacom: (bgColor: #262628, borderColor: #393939, icon: ''), + oauth: (bgColor: #262628, borderColor: #393939, icon: '') + ) + !default; - :export { - panelHorizontalPadding: $panel-horizontal-padding; - panelVerticalPadding: $panel-vertical-padding; - } +:export { + panelhorizontalpadding: $panel-horizontal-padding; + panelverticalpadding: $panel-vertical-padding; +} `; diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts index 57ee960f3d6..104edced000 100644 --- a/packages/grafana-ui/src/themes/default.ts +++ b/packages/grafana-ui/src/themes/default.ts @@ -4,9 +4,9 @@ const theme: GrafanaThemeCommons = { name: 'Grafana Default', typography: { fontFamily: { - sansSerif: "'Roboto', Helvetica, Arial, sans-serif;", - serif: "Georgia, 'Times New Roman', Times, serif;", - monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace;", + sansSerif: "'Roboto', Helvetica, Arial, sans-serif", + serif: "Georgia, 'Times New Roman', Times, serif", + monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace", }, size: { base: '13px',