Skip to content

N
nexpie-grafana-theme
Commit bc60f9c4 by Torkel Ödegaard Committed by GitHub
Options

Theme: Typography variables overhaul, theme cleanup, improvents to storybook… 

Theme: Typography variables overhaul, theme cleanup, improvents to storybook ThemeColors component  (#23531)

* Began text theme refactoring

* Consolidating blue varaibles

* Theme: Typography overhaul and theme cleanup

* Theme updates, alignment and fixes

* Updated snapshots

* Restored template variable class

* Updates

* added container

* Updated snapshot
parent 16bc5c11
Showing with 407 additions and 368 deletions
packages/grafana-data/src/types/theme.ts
......@@ -67,7 +67,6 @@ export interface GrafanaThemeCommons {
formSpacingBase: number;
formMargin: string;
formFieldsetMargin: string;
formLegendMargin: string;
formInputHeight: string;
formButtonHeight: number;
formInputPaddingHorizontal: string;
......@@ -148,17 +147,13 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
// New blues palette used by next-gen form elements
blue95: string;
blue85: string;
blue80: string;
blue77: string;
// New reds palette used by next-gen form elements
red88: string;
// Accent colors
blue: string;
blueBase: string;
blueShade: string;
blueLight: string;
blueFaint: string;
redBase: string;
redShade: string;
greenBase: string;
......@@ -188,6 +183,10 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
bg3: string;
border1: string;
border2: string;
border3: string;
bgBlue1: string;
bgBlue2: string;
dashboardBg: string;
bodyBg: string;
......@@ -207,18 +206,17 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
linkExternal: string;
// Text colors
text: string;
textStrong: string;
textHeading: string;
text: string;
textSemiWeak: string;
textWeak: string;
textFaint: string;
textEmphasis: string;
headingColor: string;
textBlue: string;
// Next-gen forms functional colors
formLabel: string;
formDescription: string;
formLegend: string;
formInputBg: string;
formInputBgDisabled: string;
formInputBorder: string;
......@@ -229,8 +227,6 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
formInputText: string;
formInputDisabledText: string;
formInputPlaceholderText: string;
formInputTextStrong: string;
formInputTextWhite: string;
formValidationMessageText: string;
formValidationMessageBg: string;
formSwitchBg: string;
......@@ -244,4 +240,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
formCheckboxBgCheckedHover: string;
formCheckboxCheckmark: string;
};
shadows: {
listItem: string;
};
}
packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx
......@@ -17,7 +17,7 @@ export const AlphaNotice: FC<Props> = ({ state, text, className }) => {
const styles = cx(
className,
css`
background: linear-gradient(to bottom, ${theme.palette.blueBase}, ${theme.palette.blueShade});
background: linear-gradient(to bottom, ${theme.palette.blue85}, ${theme.palette.blue77});
color: ${theme.palette.gray7};
white-space: nowrap;
border-radius: 3px;
......
packages/grafana-ui/src/components/Button/Button.tsx
......@@ -58,8 +58,8 @@ const getPropertiesForVariant = (theme: GrafanaTheme, variant: ButtonVariant) =>
case 'primary':
default:
return {
borderColor: theme.palette.blueShade,
background: buttonVariantStyles(theme.palette.blueBase, theme.palette.blueShade, theme.palette.white),
borderColor: theme.colors.bgBlue1,
background: buttonVariantStyles(theme.colors.bgBlue1, theme.colors.bgBlue2, theme.palette.white),
};
}
};
......
packages/grafana-ui/src/components/Collapse/Collapse.tsx
......@@ -36,7 +36,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
animation: loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67) 500ms;
animation-iteration-count: 100;
left: -25%;
background: ${theme.palette.blue};
background: ${theme.palette.blue85};
}
@keyframes loader {
from {
......
packages/grafana-ui/src/components/Forms/Legend.tsx
......@@ -13,8 +13,7 @@ export const getLegendStyles = stylesFactory((theme: GrafanaTheme) => {
legend: css`
font-size: ${theme.typography.heading.h3};
font-weight: ${theme.typography.weight.regular};
margin: ${theme.spacing.formLegendMargin};
color: ${theme.colors.formLegend};
margin: 0 0 ${theme.spacing.md} 0;
`,
};
});
......
packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
......@@ -21,12 +21,12 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
const horizontalPadding = theme.spacing[size] ?? theme.spacing.md;
const c = theme.palette;
const textColor = theme.isLight ? c.gray33 : c.gray70;
const textColorHover = theme.isLight ? c.blueShade : c.blueLight;
const textColorActive = theme.isLight ? c.blueShade : c.blueLight;
const borderColor = theme.isLight ? c.gray4 : c.gray25;
const borderColorHover = theme.isLight ? c.gray70 : c.gray33;
const borderColorActive = theme.isLight ? c.blueShade : c.blueLight;
const textColor = theme.colors.textSemiWeak;
const textColorHover = theme.colors.text;
const textColorActive = theme.isLight ? c.blue77 : c.blue95;
const borderColor = theme.colors.border2;
const borderColorHover = theme.colors.border3;
const borderColorActive = theme.isLight ? c.blue77 : c.blue95;
const bg = theme.colors.bodyBg;
const bgDisabled = theme.isLight ? c.gray95 : c.gray15;
const bgActive = theme.isLight ? c.white : c.gray05;
......
packages/grafana-ui/src/components/Legend/LegendTable.tsx
......@@ -41,7 +41,7 @@ export const LegendTable: React.FunctionComponent<LegendTableProps> = ({
<th
key={columnHeader}
className={css`
color: ${theme.palette.blue};
color: ${theme.colors.textBlue};
font-weight: bold;
text-align: right;
cursor: pointer;
......
packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx
......@@ -11,7 +11,7 @@ const getStyles = (theme: GrafanaTheme) => ({
`,
logsStatsRowActive: css`
label: logs-stats-row--active;
color: ${theme.palette.blue};
color: ${theme.colors.textBlue};
position: relative;
`,
logsStatsRowLabel: css`
......@@ -46,8 +46,7 @@ const getStyles = (theme: GrafanaTheme) => ({
label: logs-stats-row__innerbar;
height: 4px;
overflow: hidden;
background: ${theme.colors.textFaint};
background: ${theme.palette.blue};
background: ${theme.colors.bgBlue1};
`,
});
......
packages/grafana-ui/src/components/Modal/getModalStyles.ts
......@@ -32,7 +32,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
opacity: 0.7;
`,
modalHeader: css`
background: ${theme.colors.bg1};
background: ${theme.colors.bg2};
border-bottom: 1px solid ${theme.colors.pageHeaderBorder};
display: flex;
height: 42px;
......
packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
......@@ -16,7 +16,7 @@ export const PanelOptionsGroup: FunctionComponent<Props> = props => {
<div className="panel-options-group__header">
<button className="panel-options-group__add-btn" onClick={props.onAdd}>
<div className="panel-options-group__add-circle">
<Icon name="plus-circle" />
<Icon name="plus" />
</div>
<span className="panel-options-group__title">{props.title}</span>
</button>
......
packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx
......@@ -6,7 +6,7 @@ import { Icon } from '../Icon/Icon';
const AddButton = (
<a className="gf-form-label query-part">
<Icon name="plus-circle" />
<Icon name="plus" />
</a>
);
......
packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx
......@@ -78,7 +78,7 @@ export const InputWithAutoFocus = () => {
setInputComponents([...inputComponents, InputComponent]);
}}
>
<Icon name="plus-circle" />
<Icon name="plus" />
</a>
</SegmentFrame>
);
......
packages/grafana-ui/src/components/Select/getSelectStyles.ts
......@@ -6,7 +6,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
const bgColor = theme.colors.formInputBg;
const menuShadowColor = theme.colors.dropdownShadow;
const optionBgHover = theme.colors.dropdownOptionHoverBg;
const multiValueContainerBg = theme.colors.bg3;
const multiValueContainerBg = theme.colors.bg2;
const multiValueColor = theme.colors.text;
return {
......
packages/grafana-ui/src/components/Table/styles.ts
......@@ -19,7 +19,7 @@ export interface TableStyles {
export const getTableStyles = stylesFactory(
(theme: GrafanaTheme): TableStyles => {
const palette = theme.palette;
const { palette, colors } = theme;
const headerBg = theme.colors.panelBorder;
const headerBorderColor = theme.isLight ? palette.gray70 : palette.gray05;
const resizerColor = theme.isLight ? palette.blue77 : palette.blue95;
......@@ -51,7 +51,7 @@ export const getTableStyles = stylesFactory(
padding: ${padding}px 10px;
cursor: pointer;
white-space: nowrap;
color: ${palette.blue};
color: ${colors.textBlue};
border-right: 1px solid ${headerBorderColor};
&:last-child {
......
packages/grafana-ui/src/components/Tabs/Tab.tsx
......@@ -42,7 +42,6 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme) => {
background: ${colors.bodyBg};
color: ${colors.link};
overflow: hidden;
cursor: not-allowed;
&::before {
display: block;
......
packages/grafana-ui/src/components/ThemeColors/ThemeColors.story.tsx
import React from 'react';
import { css, cx } from 'emotion';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { useTheme } from '../../themes/ThemeContext';
import { ThemeColors } from './ThemeColors';
export default {
title: 'General/ThemeColors',
component: () => {},
decorators: [withCenteredStory],
component: ThemeColors,
decorators: [],
parameters: {
docs: {},
},
};
interface DemoElement {
name: string;
bg: string;
border?: string;
textColor?: string;
child?: DemoElement;
}
function renderElement(el: DemoElement) {
const style = cx(
css`
padding: 36px;
background: ${el.bg};
`,
el.border
? css`
border: 1px solid ${el.border};
`
: null
);
return (
<div className={style}>
<div
className={css`
padding: 8px;
`}
>
{el.name}
</div>
{el.child && renderElement(el.child)}
</div>
);
}
export const BackgroundsAndBorders = () => {
const theme = useTheme();
const lvl1 = {
name: 'dashbord background',
bg: theme.colors.dashboardBg,
child: {
name: 'colors.bg1',
bg: theme.colors.bg1,
border: theme.colors.border1,
child: {
name:
'colors.bg2 background used for elements placed on colors.bg1. Using colors.border1 should be used on elements placed ontop of bg1',
bg: theme.colors.bg2,
border: theme.colors.border2,
child: {
name:
'colors.bg3 background used for elements placed on colors.bg2 with colors.border2 used for elements placed on bg2',
bg: theme.colors.bg3,
border: theme.colors.border2,
},
},
},
};
return <div>{renderElement(lvl1)}</div>;
export const ThemeColorsDemo = () => {
return <ThemeColors />;
};
packages/grafana-ui/src/components/ThemeColors/ThemeColors.tsx 0 → 100644
import React, { FC } from 'react';
import { css, cx } from 'emotion';
import { useTheme } from '../../themes/ThemeContext';
import { Icon } from '../Icon/Icon';
import { HorizontalGroup } from '../Layout/Layout';
interface DemoBoxProps {
bg: string;
border?: string;
textColor?: string;
}
const DemoBox: FC<DemoBoxProps> = ({ bg, border, children }) => {
const style = cx(
css`
padding: 16px 32px;
background: ${bg};
width: 100%;
`,
border
? css`
border: 1px solid ${border};
`
: null
);
return (
<div className={style}>
<div
className={css`
padding-bottom: 16px;
`}
>
{name}
</div>
{children}
</div>
);
};
const DemoText: FC<{ color?: string; bold?: boolean; size?: number }> = ({ color, bold, size, children }) => {
const style = css`
padding: 4px;
color: ${color ?? 'inherit'};
font-weight: ${bold ? 500 : 400};
font-size: ${size ?? 14}px;
`;
return <div className={style}>{children}</div>;
};
export const ThemeColors = () => {
const theme = useTheme();
return (
<div
className={css`
width: 100%;
`}
>
<DemoBox bg={theme.colors.dashboardBg}>
<DemoText>theme.colors.dashboardBg</DemoText>
<DemoBox bg={theme.colors.bg1} border={theme.colors.border1}>
<DemoText>
theme.colors.bg1 is the main & preferred content background for text and elements This box is using border1
</DemoText>
<DemoBox bg={theme.colors.bg2} border={theme.colors.border2}>
<DemoText>
colors.bg2 background used for elements placed on colors.bg1. Using colors.border1 should be used on
elements placed ontop of bg1. Ths box is using border2.
</DemoText>
<DemoBox bg={theme.colors.bg3} border={theme.colors.border2}>
<DemoText>colors.bg3 background used for elements placed on colors.bg2.</DemoText>
</DemoBox>
</DemoBox>
</DemoBox>
</DemoBox>
<HorizontalGroup>
<DemoBox bg={theme.colors.bodyBg}>
<>
Text on main body background (bg1)
<DemoText color={theme.colors.textHeading} size={24}>
textHeading Usually a bit bigger text <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.text}>
text <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.textSemiWeak}>
textSemiWeak <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.textWeak}>
textWeak <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.textFaint}>
textFaint <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.textStrong}>
textStrong <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.formInputText}>
formInputText <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.formLabel} bold>
formLabel is also bold <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.formDescription}>
formDescription <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.textBlue} bold>
textBlue usually bold
</DemoText>
<DemoText color={theme.colors.link}>link</DemoText>
<DemoText color={theme.colors.linkHover}>linkHover</DemoText>
<DemoText color={theme.colors.linkDisabled}>linkDisabled</DemoText>
<DemoText color={theme.colors.linkExternal}>linkExternal</DemoText>
</>
</DemoBox>
<DemoBox bg={theme.colors.formInputBg}>
This is inside form input bg (same as dashboard bg)
<DemoText color={theme.colors.formInputText}>formInputText</DemoText>
<DemoText color={theme.colors.formInputDisabledText}>formInputDisabledText</DemoText>
<DemoText color={theme.colors.formInputPlaceholderText}>formInputPlaceholderText</DemoText>
</DemoBox>
<DemoBox bg={theme.colors.bg2}>
Inside bg2
<DemoText color={theme.colors.text}>
text <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.textWeak}>
textWeak <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.textFaint}>
textFaint <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.textStrong}>
textStrong <Icon name="trash-alt" />
</DemoText>
</DemoBox>
</HorizontalGroup>
</div>
);
};
packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx
......@@ -110,7 +110,7 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
.react-calendar__month-view__weekdays {
background-color: inherit;
text-align: center;
color: ${theme.palette.blueShade};
color: ${theme.palette.blue77};
abbr {
border: 0;
......
packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx
......@@ -139,7 +139,7 @@ const FilterPill: React.FC<FilterPillProps> = ({ label, selected, onClick }) =>
className={css`
padding: ${theme.spacing.xxs} ${theme.spacing.sm};
color: white;
background: ${selected ? theme.palette.blueLight : theme.palette.blueShade};
background: ${selected ? theme.palette.blue95 : theme.palette.blue77};
border-radius: 16px;
display: inline-block;
cursor: pointer;
......
packages/grafana-ui/src/components/TransformersUI/FilterByRefIdTransformerEditor.tsx
......@@ -139,7 +139,7 @@ const FilterPill: React.FC<FilterPillProps> = ({ label, selected, onClick }) =>
className={css`
padding: ${theme.spacing.xxs} ${theme.spacing.sm};
color: white;
background: ${selected ? theme.palette.blueLight : theme.palette.blueShade};
background: ${selected ? theme.palette.blue95 : theme.palette.blue77};
border-radius: 16px;
display: inline-block;
cursor: pointer;
......
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
......@@ -12,10 +12,9 @@ $theme-name: dark;
// New Colors
// -------------------------
$blue-faint: ${theme.palette.blueFaint};
$blue-light: ${theme.palette.blueLight};
$blue-base: ${theme.palette.blueBase};
$blue-shade: ${theme.palette.blueShade};
$blue-light: ${theme.palette.blue95};
$blue-base: ${theme.palette.blue80};
$blue-shade: ${theme.palette.blue77};
$red-base: ${theme.palette.redBase};
$red-shade: ${theme.palette.redShade};
$green-base: ${theme.palette.greenBase};
......@@ -59,7 +58,7 @@ $white: ${theme.palette.white};
// Accent colors
// -------------------------
$blue: ${theme.palette.blue};
$blue: ${theme.palette.blue85};
$red: $red-base;
$yellow: ${theme.palette.yellow};
$orange: ${theme.palette.orange};
......@@ -92,7 +91,7 @@ $text-color: ${theme.colors.text};
$text-color-strong: ${theme.colors.textStrong};
$text-color-weak: ${theme.colors.textWeak};
$text-color-faint: ${theme.colors.textFaint};
$text-color-emphasis: ${theme.colors.textEmphasis};
$text-color-emphasis: ${theme.colors.textStrong};
$text-blue: ${theme.colors.textBlue};
$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
......@@ -111,7 +110,7 @@ $external-link-color: ${theme.colors.linkExternal};
// Typography
// -------------------------
$headings-color: ${theme.colors.headingColor};
$headings-color: ${theme.colors.textHeading};
$abbr-border-color: $gray-2 !default;
$text-muted: $text-color-weak;
......@@ -353,7 +352,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
$switch-bg: $input-bg;
$switch-slider-color: $dark-3;
$switch-slider-off-bg: $gray-1;
$switch-slider-on-bg: ${theme.palette.blueLight};
$switch-slider-on-bg: ${theme.palette.blue77};
$switch-slider-shadow: 0 0 3px black;
//Checkbox
......@@ -379,8 +378,8 @@ $panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
$panel-options-group-border: none;
$panel-options-group-header-bg: ${theme.colors.bg2};
$panel-grid-placeholder-bg: $blue-faint;
$panel-grid-placeholder-shadow: 0 0 4px $blue-shade;
$panel-grid-placeholder-bg: darken(${theme.palette.blue77}, 30%);
$panel-grid-placeholder-shadow: 0 0 4px ${theme.palette.blue80};
// logs
$logs-color-unkown: $gray-2;
......
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
......@@ -12,10 +12,9 @@ $theme-name: light;
// New Colors
// -------------------------
$blue-faint: ${theme.palette.blueFaint};
$blue-light: ${theme.palette.blueLight};
$blue-base: ${theme.palette.blueBase};
$blue-shade: ${theme.palette.blueShade};
$blue-light: ${theme.palette.blue95};
$blue-base: ${theme.palette.blue80};
$blue-shade: ${theme.palette.blue77};
$red-base: ${theme.palette.redBase};
$red-shade: ${theme.palette.redShade};
$green-base: ${theme.palette.greenBase};
......@@ -53,7 +52,7 @@ $white: ${theme.palette.white};
// Accent colors
// -------------------------
$blue: ${theme.palette.blue};
$blue: ${theme.colors.textBlue};
$red: $red-base;
$yellow: ${theme.palette.yellow};
$orange: ${theme.palette.orange};
......@@ -86,7 +85,7 @@ $text-color: ${theme.colors.text};
$text-color-strong: ${theme.colors.textStrong};
$text-color-weak: ${theme.colors.textWeak};
$text-color-faint: ${theme.colors.textFaint};
$text-color-emphasis: ${theme.colors.textEmphasis};
$text-color-emphasis: ${theme.colors.textStrong};
$text-blue: ${theme.colors.textBlue};
$text-shadow-faint: none;
......@@ -104,7 +103,7 @@ $external-link-color: ${theme.colors.linkExternal};
// Typography
// -------------------------
$headings-color: ${theme.colors.headingColor};
$headings-color: ${theme.colors.textHeading};
$abbr-border-color: $gray-2 !default;
$text-muted: $text-color-weak;
......@@ -346,7 +345,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
$switch-bg: $white;
$switch-slider-color: $gray-7;
$switch-slider-off-bg: $gray-5;
$switch-slider-on-bg: ${theme.palette.blueShade};
$switch-slider-on-bg: ${theme.palette.blue77};
$switch-slider-shadow: 0 0 3px $dark-2;
//Checkbox
......@@ -372,8 +371,8 @@ $panel-editor-viz-item-bg-hover: lighten($blue-base, 45%);
$panel-options-group-border: none;
$panel-options-group-header-bg: $gray-5;
$panel-grid-placeholder-bg: $blue-faint;
$panel-grid-placeholder-shadow: 0 0 4px $blue-light;
$panel-grid-placeholder-bg: lighten(${theme.palette.blue95}, 30%);
$panel-grid-placeholder-shadow: 0 0 4px ${theme.palette.blue95};
// logs
$logs-color-unkown: $gray-5;
......
packages/grafana-ui/src/themes/dark.ts
......@@ -22,15 +22,10 @@ const basicColors = {
gray5: '#ececec',
gray6: '#f4f5f8', // not used in dark theme
gray7: '#fbfbfb', // not used in dark theme
blueBase: '#3274d9',
blueShade: '#1f60c4',
blueLight: '#5794f2',
blueFaint: '#041126',
redBase: '#e02f44',
redShade: '#c4162a',
greenBase: '#299c46',
greenShade: '#23843b',
blue: '#33b5e5',
red: '#d44a3a',
yellow: '#ecbb13',
purple: '#9933cc',
......@@ -44,41 +39,51 @@ const backgrounds = {
bg2: basicColors.gray15,
bg3: basicColors.gray25,
dashboardBg: basicColors.gray05,
bgBlue1: basicColors.blue80,
bgBlue2: basicColors.blue77,
};
const borders = {
border1: basicColors.gray15,
border2: basicColors.gray25,
border3: basicColors.gray33,
};
const textColors = {
textStrong: basicColors.gray98,
textHeading: basicColors.gray4,
text: basicColors.gray85,
textSemiWeak: basicColors.gray70,
textWeak: basicColors.gray60,
textFaint: basicColors.gray33,
textBlue: basicColors.blue85,
};
const form = {
// Next-gen forms functional colors
formLabel: basicColors.gray70,
formLabel: textColors.textSemiWeak,
formDescription: basicColors.gray60,
formLegend: basicColors.gray85,
formInputBg: basicColors.gray05,
formInputBgDisabled: basicColors.gray10,
formInputBorder: basicColors.gray25,
formInputBorder: borders.border2,
formInputBorderHover: basicColors.gray33,
formInputBorderActive: basicColors.blue95,
formInputBorderInvalid: basicColors.red88,
formInputPlaceholderText: basicColors.gray1,
formInputPlaceholderText: textColors.textFaint,
formInputText: basicColors.gray85,
formInputDisabledText: basicColors.gray70,
formInputTextStrong: basicColors.gray85,
formInputTextWhite: basicColors.white,
formFocusOutline: basicColors.blueShade,
formFocusOutline: basicColors.blue77,
formValidationMessageText: basicColors.white,
formValidationMessageBg: basicColors.red88,
formSwitchBg: basicColors.gray25,
formSwitchBgActive: basicColors.blueLight,
formSwitchBgActive: basicColors.blue95,
formSwitchBgHover: basicColors.gray33,
formSwitchBgActiveHover: basicColors.blueBase,
formSwitchBgActiveHover: basicColors.blue80,
formSwitchBgDisabled: basicColors.gray25,
formSwitchDot: basicColors.gray15,
formCheckboxBg: basicColors.dark5,
formCheckboxBgChecked: basicColors.blueLight,
formCheckboxBgCheckedHover: basicColors.blueBase,
formCheckboxBgChecked: basicColors.blue95,
formCheckboxBgCheckedHover: basicColors.blue80,
formCheckboxCheckmark: basicColors.gray25,
};
......@@ -106,6 +111,7 @@ const darkTheme: GrafanaTheme = {
...backgrounds,
...borders,
...form,
...textColors,
bodyBg: backgrounds.bg1,
panelBg: backgrounds.bg1,
......@@ -117,19 +123,13 @@ const darkTheme: GrafanaTheme = {
dropdownShadow: basicColors.black,
dropdownOptionHoverBg: backgrounds.bg2,
// text
headingColor: basicColors.gray4,
text: basicColors.gray85,
textStrong: basicColors.white,
textWeak: basicColors.gray2,
textEmphasis: basicColors.gray5,
textFaint: basicColors.dark5,
textBlue: basicColors.blue85,
link: basicColors.gray4,
linkDisabled: basicColors.gray2,
linkHover: basicColors.white,
linkExternal: basicColors.blue,
linkExternal: basicColors.blue85,
},
shadows: {
listItem: '-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3)',
},
};
......
packages/grafana-ui/src/themes/default.ts
......@@ -3,20 +3,23 @@ import { GrafanaThemeCommons } from '@grafana/data';
export const commonColorsPalette = {
// New greys palette used by next-gen form elements
gray98: '#f7f8fa',
gray97: '#f1f5f9',
gray95: '#e9edf2',
gray90: '#dce1e6',
gray85: '#c7d0d9',
gray70: '#9fa7b3',
gray60: '#7b8087',
gray33: '#464c54',
gray25: '#343b40',
gray25: '#2c3235',
gray15: '#202226',
gray10: '#141619',
gray05: '#0b0c0e',
// New blues palette used by next-gen form elements
blue95: '#5794f2',
blue85: '#339ae5',
blue77: '#1f60c4',
blue95: '#5794f2', // blue95
blue85: '#33a2e5', // blueText
blue80: '#3274d9', // blue80
blue77: '#1f60c4', // blue77
// New reds palette used by next-gen form elements
red88: '#e02f44',
......@@ -86,7 +89,6 @@ const theme: GrafanaThemeCommons = {
formSpacingBase: SPACING_BASE,
formMargin: `${SPACING_BASE * 4}px`,
formFieldsetMargin: `${SPACING_BASE * 2}px`,
formLegendMargin: `0 0 ${SPACING_BASE * 2}px 0`,
formInputHeight: `${SPACING_BASE * 4}px`,
formButtonHeight: SPACING_BASE * 4,
formInputPaddingHorizontal: `${SPACING_BASE}px`,
......
packages/grafana-ui/src/themes/light.ts
......@@ -22,15 +22,10 @@ const basicColors = {
gray5: '#dde4ed',
gray6: '#e9edf2', // same as gray95
gray7: '#f7f8fa', // same as gray98
blueBase: '#3274d9',
blueShade: '#1f60c4',
blueLight: '#5794f2',
blueFaint: '#f5f9ff',
redBase: '#e02f44',
redShade: '#c4162a',
greenBase: '#3eb15b',
greenShade: '#369b4f',
blue: '#0083b3',
red: '#d44939',
yellow: '#ff851b',
purple: '#9954bb',
......@@ -40,19 +35,32 @@ const basicColors = {
const backgrounds = {
bg1: basicColors.white,
bg2: basicColors.gray98,
bg2: basicColors.gray97,
bg3: basicColors.gray95,
dashboardBg: basicColors.gray98,
bgBlue1: basicColors.blue80,
bgBlue2: basicColors.blue77,
};
const borders = {
border1: basicColors.gray95,
border1: basicColors.gray90,
border2: basicColors.gray85,
border3: basicColors.gray70,
};
const textColors = {
// Text colors
textStrong: basicColors.gray15,
text: basicColors.gray33,
textSemiWeak: basicColors.gray33,
textWeak: basicColors.gray60,
textFaint: basicColors.gray70,
textBlue: basicColors.blue85,
};
const form = {
formLabel: basicColors.gray33,
formDescription: basicColors.gray33,
formLabel: textColors.text,
formDescription: textColors.textWeak,
formLegend: basicColors.gray25,
formInputBg: basicColors.white,
formInputBgDisabled: basicColors.gray95,
......@@ -60,23 +68,21 @@ const form = {
formInputBorderHover: basicColors.gray70,
formInputBorderActive: basicColors.blue77,
formInputBorderInvalid: basicColors.red88,
formInputText: basicColors.gray25,
formInputPlaceholderText: basicColors.gray70,
formInputDisabledText: basicColors.gray33,
formInputTextStrong: basicColors.gray25,
formInputTextWhite: basicColors.white,
formFocusOutline: basicColors.blueLight,
formInputText: textColors.text,
formInputPlaceholderText: textColors.textFaint,
formInputDisabledText: textColors.textWeak,
formFocusOutline: basicColors.blue95,
formValidationMessageText: basicColors.white,
formValidationMessageBg: basicColors.red88,
formSwitchBg: basicColors.gray85,
formSwitchBgActive: basicColors.blueShade,
formSwitchBgActive: basicColors.blue77,
formSwitchBgHover: basicColors.gray3,
formSwitchBgActiveHover: basicColors.blueBase,
formSwitchBgActiveHover: basicColors.blue80,
formSwitchBgDisabled: basicColors.gray4,
formSwitchDot: basicColors.white,
formCheckboxBg: basicColors.white,
formCheckboxBgChecked: basicColors.blueShade,
formCheckboxBgCheckedHover: basicColors.blueBase,
formCheckboxBgChecked: basicColors.blue77,
formCheckboxBgCheckedHover: basicColors.blue80,
formCheckboxCheckmark: basicColors.white,
};
......@@ -103,6 +109,8 @@ const lightTheme: GrafanaTheme = {
colors: {
...backgrounds,
...borders,
...textColors,
...form,
bodyBg: backgrounds.bg1,
panelBg: backgrounds.bg1,
......@@ -114,22 +122,15 @@ const lightTheme: GrafanaTheme = {
dropdownShadow: basicColors.gray3,
dropdownOptionHoverBg: backgrounds.bg2,
// Text colors
text: basicColors.gray1,
textStrong: basicColors.dark2,
textWeak: basicColors.gray2,
textEmphasis: basicColors.dark5,
textFaint: basicColors.dark4,
textBlue: basicColors.blue85,
// Link colors
link: basicColors.gray1,
linkDisabled: basicColors.gray3,
linkHover: basicColors.dark1,
linkExternal: basicColors.blueLight,
headingColor: basicColors.gray1,
...form,
link: textColors.text,
linkDisabled: textColors.textWeak,
linkHover: textColors.textStrong,
linkExternal: basicColors.blue85,
textHeading: basicColors.gray25,
},
shadows: {
listItem: '-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1)',
},
};
......
packages/grafana-ui/src/themes/mixins.ts
......@@ -2,54 +2,37 @@ import { GrafanaTheme } from '@grafana/data';
import { selectThemeVariant } from './selectThemeVariant';
import { css } from 'emotion';
import { stylesFactory } from './stylesFactory';
import tinycolor from 'tinycolor2';
export function cardChrome(theme: GrafanaTheme): string {
if (theme.isDark) {
return `
background: linear-gradient(135deg, ${theme.palette.dark8}, ${theme.palette.dark6});
&:hover {
background: linear-gradient(135deg, ${theme.palette.dark9}, ${theme.palette.dark6});
}
box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
border-radius: ${theme.border.radius.md};
`;
}
return `
background: linear-gradient(135deg, ${theme.palette.gray6}, ${theme.palette.gray7});
background: ${theme.colors.bg2};
&:hover {
background: linear-gradient(135deg, ${theme.palette.gray7}, ${theme.palette.gray6});
background: ${hoverColor(theme.colors.bg2, theme)};
}
box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
box-shadow: ${theme.shadows.listItem};
border-radius: ${theme.border.radius.md};
`;
}
export function listItem(theme: GrafanaTheme): string {
if (theme.isDark) {
return `
background: ${theme.palette.dark7};
&:hover {
background: ${theme.palette.dark9};
}
box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
border-radius: ${theme.border.radius.md};
`;
}
export function hoverColor(color: string, theme: GrafanaTheme) {
return theme.isDark ? tinycolor(color).brighten(2) : tinycolor(color).darken(2);
}
export function listItem(theme: GrafanaTheme): string {
return `
background: ${theme.palette.gray7};
&:hover {
background: ${theme.palette.gray6};
}
box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
border-radius: ${theme.border.radius.md};
`;
background: ${theme.colors.bg2};
&:hover {
background: ${hoverColor(theme.colors.bg2, theme)};
}
box-shadow: ${theme.shadows.listItem};
border-radius: ${theme.border.radius.md};
`;
}
export function listItemSelected(theme: GrafanaTheme): string {
return `
background: ${theme.isLight ? theme.palette.gray6 : theme.palette.dark9};
background: ${hoverColor(theme.colors.bg2, theme)};
color: ${theme.colors.textStrong};
`;
}
......
public/app/core/components/Select/FolderPicker.tsx
......@@ -171,6 +171,7 @@ export class FolderPicker extends PureComponent<Props, State> {
defaultOptions
defaultValue={folder}
value={folder}
className={'width-20'}
allowCustomValue={enableCreateNew}
loadOptions={this.debouncedSearch}
onChange={this.onFolderChange}
......
public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap
......@@ -15,6 +15,7 @@ exports[`FolderPicker should render 1`] = `
</label>
<AsyncSelect
allowCustomValue={false}
className="width-20"
defaultOptions={true}
defaultValue={Object {}}
loadOptions={[Function]}
......
public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
......@@ -55,11 +55,12 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
const highlightColor = selectThemeVariant(
{
light: theme.palette.blueLight,
dark: theme.palette.blueShade,
light: theme.palette.blue95,
dark: theme.palette.blue77,
},
theme.type
);
return {
wrapper: css`
border-top: 1px dashed ${borderColor};
......
public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx
......@@ -111,7 +111,7 @@ export const OverrideEditor: React.FC<OverrideEditorProps> = ({ data, override,
<div className={styles.propertyPickerWrapper}>
<ValuePicker
label="Set config property"
icon="plus-circle"
icon="plus"
options={configPropertiesOptions}
variant={'link'}
onChange={o => {
......
public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
......@@ -347,7 +347,7 @@ enum Pane {
*/
const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
const { uiState } = props;
const handleColor = theme.palette.blueLight;
const handleColor = theme.palette.blue95;
const paneSpaceing = theme.spacing.md;
const resizer = css`
......
public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx
......@@ -71,7 +71,7 @@ const getStyles = (theme: GrafanaTheme) => ({
`,
name: css`
font-weight: ${theme.typography.weight.semibold};
color: ${theme.palette.blue};
color: ${theme.colors.textBlue};
`,
iconRow: css`
display: flex;
......@@ -107,7 +107,7 @@ const getStyles = (theme: GrafanaTheme) => ({
text-align: center;
font-family: ${theme.typography.fontFamily.monospace};
font-size: ${theme.typography.size.sm};
color: ${theme.palette.blueBase};
color: ${theme.palette.blue80};
border-bottom: 1px dashed ${theme.palette.gray15};
flex-grow: 0;
flex-shrink: 1;
......
public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx
......@@ -28,12 +28,10 @@ const VizTypePickerPlugin: React.FC<Props> = ({ isCurrent, plugin, onClick, disa
};
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const itemBorder = `1px solid ${theme.isLight ? theme.palette.gray85 : theme.palette.gray25}`;
return {
item: css`
background: ${theme.isLight ? theme.palette.gray98 : theme.palette.gray15};
border: ${itemBorder};
background: ${theme.colors.bg2};
border: 1px solid ${theme.colors.border2};
border-radius: 3px;
height: 100px;
width: 100%;
......@@ -49,8 +47,8 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
padding-bottom: 6px;
&:hover {
box-shadow: 0 0 4px ${theme.palette.blueLight};
border: 1px solid ${theme.palette.blueLight};
box-shadow: 0 0 4px ${theme.palette.blue95};
border: 1px solid ${theme.palette.blue95};
}
`,
current: css`
......@@ -63,7 +61,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
cursor: default;
&:hover {
box-shadow: none;
border: ${itemBorder};
border: 1px solid ${theme.colors.border2};
}
`,
name: css`
......
public/app/features/explore/AdHocFilterField.tsx
......@@ -7,7 +7,7 @@ export const DEFAULT_REMOVE_FILTER_VALUE = '-- remove filter --';
const addFilterButton = (onAddFilter: (event: React.MouseEvent) => void) => (
<button className="gf-form-label gf-form-label--btn query-part" onClick={onAddFilter}>
<Icon name="plus-circle" />
<Icon name="plus" />
</button>
);
......
public/app/features/explore/Explore.tsx
......@@ -308,15 +308,19 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
{datasourceMissing ? this.renderEmptyState() : null}
{datasourceInstance && (
<div className="explore-container">
<QueryRows exploreEvents={this.exploreEvents} exploreId={exploreId} queryKeys={queryKeys} />
<SecondaryActions
addQueryRowButtonDisabled={isLive}
// We cannot show multiple traces at the same time right now so we do not show add query button.
addQueryRowButtonHidden={mode === ExploreMode.Tracing}
richHistoryButtonActive={showRichHistory}
onClickAddQueryRowButton={this.onClickAddQueryRowButton}
onClickRichHistoryButton={this.toggleShowRichHistory}
/>
<div className="panel-container">
<div className="panel-content">
<QueryRows exploreEvents={this.exploreEvents} exploreId={exploreId} queryKeys={queryKeys} />
<SecondaryActions
addQueryRowButtonDisabled={isLive}
// We cannot show multiple traces at the same time right now so we do not show add query button.
addQueryRowButtonHidden={mode === ExploreMode.Tracing}
richHistoryButtonActive={showRichHistory}
onClickAddQueryRowButton={this.onClickAddQueryRowButton}
onClickRichHistoryButton={this.toggleShowRichHistory}
/>
</div>
</div>
<ErrorContainer queryError={queryError} />
<AutoSizer onResize={this.onResize} disableHeight>
{({ width }) => {
......
public/app/features/explore/LiveLogs.tsx
......@@ -23,13 +23,13 @@ const getStyles = (theme: GrafanaTheme) => ({
logsRowFade: css`
label: logs-row-fresh;
color: ${theme.colors.text};
background-color: ${tinycolor(theme.palette.blueLight)
background-color: ${tinycolor(theme.palette.blue95)
.setAlpha(0.25)
.toString()};
animation: fade 1s ease-out 1s 1 normal forwards;
@keyframes fade {
from {
background-color: ${tinycolor(theme.palette.blueLight)
background-color: ${tinycolor(theme.palette.blue95)
.setAlpha(0.25)
.toString()};
}
......
public/app/features/explore/SecondaryActions.tsx
......@@ -28,7 +28,7 @@ export function SecondaryActions(props: Props) {
onClick={props.onClickAddQueryRowButton}
disabled={props.addQueryRowButtonDisabled}
>
<Icon className="icon-margin-right" name="plus-circle" size="sm" />
<Icon className="icon-margin-right" name="plus" size="sm" />
<span className="btn-title">{'\xA0' + 'Add query'}</span>
</button>
)}
......
public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap
......@@ -2,7 +2,7 @@
exports[`MetaInfoText should render component 1`] = `
<div
className="css-mi7ebz"
className="css-1u65mbf"
>
<Memo(MetaInfoItem)
key="0-label"
......
public/app/features/panel/panellinks/module.html
......@@ -66,5 +66,5 @@
</div>
<div class="editor-row">
<button class="btn btn-inverse" ng-click="addLink()"><icon name="'plus-circle'"></icon> Add link</button>
<button class="btn btn-inverse" ng-click="addLink()"><icon name="'plus'"></icon> Add link</button>
</div>
public/app/features/teams/TeamGroupSync.tsx
......@@ -87,7 +87,7 @@ export class TeamGroupSync extends PureComponent<Props, State> {
<div className="page-action-bar__spacer" />
{groups.length > 0 && (
<button className="btn btn-primary pull-right" onClick={this.onToggleAdding}>
<Icon name="plus-circle" /> Add group
<Icon name="plus" /> Add group
</button>
)}
</div>
......
public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
......@@ -109,7 +109,7 @@ exports[`Render should render groups table 1`] = `
onClick={[Function]}
>
<Icon
name="plus-circle"
name="plus"
/>
Add group
</button>
......
public/app/features/variables/adhoc/picker/AdHocFilterBuilder.tsx
......@@ -71,7 +71,7 @@ function filterAddButton(key: string | null): ReactElement | undefined {
return (
<a className="gf-form-label query-part">
<Icon name="plus-circle" />
<Icon name="plus" />
</a>
);
}
public/app/plugins/datasource/cloudwatch/components/Dimensions.test.tsx
......@@ -26,9 +26,7 @@ describe('Dimensions', () => {
/>
);
expect(wrapper.html()).toEqual(
`<div class=\"gf-form\"><a class=\"gf-form-label query-part\"><div class=\"css-1cvxpvr\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"css-sr6nr\"><path d=\"M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z\"></path></svg></div></a></div>`
);
expect(wrapper.html()).toEqual(expect.stringContaining(`gf-form`));
});
});
......@@ -42,9 +40,7 @@ describe('Dimensions', () => {
loadValues={() => Promise.resolve<SelectableStrings>([])}
/>
);
expect(wrapper.html()).toEqual(
`<div class=\"gf-form\"><a class=\"gf-form-label query-part\">somekey</a></div><label class=\"gf-form-label query-segment-operator\">=</label><div class=\"gf-form\"><a class=\"gf-form-label query-part\">somevalue</a></div><div class=\"gf-form\"><a class=\"gf-form-label query-part\"><div class=\"css-1cvxpvr\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"css-sr6nr\"><path d=\"M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z\"></path></svg></div></a></div>`
);
expect(wrapper.html()).toEqual(expect.stringContaining(`gf-form`));
});
});
});
public/app/plugins/datasource/cloudwatch/components/Dimensions.tsx
......@@ -69,7 +69,7 @@ export const Dimensions: FunctionComponent<Props> = ({ dimensions, loadValues, l
allowCustomValue
Component={
<a className="gf-form-label query-part">
<Icon name="plus-circle" />
<Icon name="plus" />
</a>
}
loadOptions={() => loadKeys().then(excludeUsedKeys)}
......
public/app/plugins/datasource/cloudwatch/components/Stats.tsx
......@@ -34,7 +34,7 @@ export const Stats: FunctionComponent<Props> = ({ stats, values, onChange, varia
<Segment
Component={
<a className="gf-form-label query-part">
<Icon name="plus-circle" />
<Icon name="plus" />
</a>
}
allowCustomValue
......
public/app/plugins/datasource/cloudwatch/components/__snapshots__/Stats.test.tsx.snap
......@@ -41,7 +41,7 @@ Array [
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z"
d="M19,11H13V5a1,1,0,0,0-2,0v6H5a1,1,0,0,0,0,2h6v6a1,1,0,0,0,2,0V13h6a1,1,0,0,0,0-2Z"
/>
</svg>
</div>
......
public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html
......@@ -214,10 +214,10 @@
</div>
<div class="gf-form">
<label class="gf-form-label" ng-if="$first">
<a class="pointer" ng-click="addFiltersQuery()"><icon class="'plus-circle'"></icon></a>
<a class="pointer" ng-click="addFiltersQuery()"><icon class="'plus'"></icon></a>
</label>
<label class="gf-form-label" ng-if="!$first">
<a class="pointer" ng-click="removeFiltersQuery(filter)"><icon class="'minus-circle'"></icon></a>
<a class="pointer" ng-click="removeFiltersQuery(filter)"><icon class="'minus'"></icon></a>
</label>
</div>
</div>
......
public/app/plugins/datasource/elasticsearch/partials/metric_agg.html
......@@ -38,10 +38,10 @@
<div class="gf-form">
<label class="gf-form-label" ng-if="isFirst">
<a class="pointer" ng-click="addMetricAgg()"><icon name="'plus-circle'"></icon></a>
<a class="pointer" ng-click="addMetricAgg()"><icon name="'plus'"></icon></a>
</label>
<label class="gf-form-label" ng-if="!isSingle">
<a class="pointer" ng-click="removeMetricAgg()"><icon name="'minus-circle'"></icon></a>
<a class="pointer" ng-click="removeMetricAgg()"><icon name="'minus'"></icon></a>
</label>
</div>
</div>
......
public/app/plugins/datasource/elasticsearch/partials/pipeline_variables.html
......@@ -17,10 +17,10 @@
css-class="width-12"
></metric-segment-model>
<label class="gf-form-label">
<a class="pointer" ng-click="remove($index)"><icon name="'minus-circle'"></icon></a>
<a class="pointer" ng-click="remove($index)"><icon name="'minus'"></icon></a>
</label>
<label class="gf-form-label">
<a class="pointer" ng-click="add()"><icon name="'plus-circle'"></icon></a>
<a class="pointer" ng-click="add()"><icon name="'plus'"></icon></a>
</label>
</div>
<div class="gf-form offset-width-17" ng-if="$index !== 0">
......@@ -40,7 +40,7 @@
css-class="width-12"
></metric-segment-model>
<label class="gf-form-label">
<a class="pointer" ng-click="remove($index)"><icon name="'minus-circle'"></icon></a>
<a class="pointer" ng-click="remove($index)"><icon name="'minus'"></icon></a>
</label>
</div>
</div>
public/app/plugins/datasource/graphite/add_graphite_func.ts
......@@ -11,9 +11,9 @@ export function graphiteAddFunc($compile: any) {
'<input type="text"' + ' class="gf-form-input"' + ' spellcheck="false" style="display:none"></input>';
const buttonTemplate =
'<a class="gf-form-label query-part dropdown-toggle"' +
'<a class="gf-form-label dropdown-toggle"' +
' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown">' +
'<icon name="fa fa-plus"></i></a>';
'<icon name="\'plus\'" size="\'sm\'"></name></a>';
return {
link: function($scope: any, elem: JQuery) {
......
public/app/plugins/datasource/loki/configuration/DerivedFields.tsx
......@@ -66,11 +66,11 @@ export const DerivedFields = (props: Props) => {
})}
<div>
<Button
variant="primary"
variant="secondary"
className={css`
margin-right: 10px;
`}
icon="plus-circle"
icon="plus"
onClick={event => {
event.preventDefault();
const newDerivedFields = [...(value || []), { name: '', matcherRegex: '' }];
......
public/app/plugins/datasource/opentsdb/partials/query.editor.html
......@@ -112,7 +112,7 @@
</div>
<label class="gf-form-label query-keyword" ng-hide="ctrl.addFilterMode">
<a ng-click="ctrl.addFilter()">
<icon name="'plus-circle'"></icon>
<icon name="'plus'"></icon>
</a>
</label>
</div>
......@@ -190,7 +190,7 @@
<div class="gf-form" ng-hide="ctrl.addTagMode">
<label class="gf-form-label query-keyword">
<a ng-click="ctrl.addTag()"><icon name="'plus-circle'"></icon></a>
<a ng-click="ctrl.addTag()"><icon name="'plus'"></icon></a>
</label>
</div>
......
public/app/plugins/datasource/stackdriver/components/GroupBys.tsx
......@@ -39,7 +39,7 @@ export const GroupBys: FunctionComponent<Props> = ({ groupBys = [], values = [],
<Segment
Component={
<a className="gf-form-label query-part">
<Icon name="plus-circle" />
<Icon name="plus" />
</a>
}
allowCustomValue
......
public/app/plugins/datasource/stackdriver/components/LabelFilter.tsx
......@@ -76,7 +76,7 @@ export const LabelFilter: FunctionComponent<Props> = ({
allowCustomValue
Component={
<a className="gf-form-label query-part">
<Icon name="plus-circle" />
<Icon name="plus" />
</a>
}
options={[variableOptionGroup, ...labelsToGroupedOptions(Object.keys(labels))]}
......
public/app/plugins/datasource/testdata/partials/query.editor.html
......@@ -11,11 +11,11 @@
<input type="text" class="gf-form-input" placeholder="{{ctrl.scenario.stringInput}}" ng-model="ctrl.target.stringInput" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
<div class="gf-form">
<label class="gf-form-label query-keyword">Alias</label>
<label class="gf-form-label query-keyword width-7">Alias</label>
<input type="text" class="gf-form-input width-14" placeholder="optional" ng-model="ctrl.target.alias" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
<div ng-if="ctrl.showLabels" class="gf-form gf-form--grow">
<label class="gf-form-label query-keyword">
<label class="gf-form-label query-keyword width-7">
Labels
<info-popover mode="right-normal">
Set labels using a key=value syntax:<br/>
......@@ -62,7 +62,7 @@
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">Start value</label>
<input type="number"
class="gf-form-input width-6"
class="gf-form-input width-14"
placeholder="auto"
ng-model="ctrl.target.startValue"
step="1"
......
public/app/plugins/panel/graph/tab_display.html
......@@ -199,7 +199,7 @@
</div>
<div class="gf-form-button-row">
<button class="btn btn-inverse" ng-click="ctrl.addSeriesOverride()">
<icon name="'plus-circle'"></icon>&nbsp;Add series override<tip>Regex match example: /server[0-3]/i </tip>
<icon name="'plus'"></icon>&nbsp;Add series override<tip>Regex match example: /server[0-3]/i </tip>
</button>
</div>
</div>
public/app/plugins/panel/graph/thresholds_form.html
......@@ -99,7 +99,7 @@
<div class="gf-form-button-row">
<button class="btn btn-inverse" ng-click="ctrl.addThreshold()" ng-disabled="ctrl.disabled">
<icon name="'plus-circle'"></icon>&nbsp;Add Threshold
<icon name="'plus'"></icon>&nbsp;Add threshold
</button>
</div>
</div>
......
public/app/plugins/panel/graph/thresholds_form.ts
......@@ -61,10 +61,10 @@ export class ThresholdFormCtrl {
onThresholdTypeChange(index: number) {
// Because of the ng-model binding, threshold's color mode is already set here
if (this.panel.thresholds[index].colorMode === 'custom') {
this.panel.thresholds[index].fillColor = tinycolor(config.theme.palette.blueBase)
this.panel.thresholds[index].fillColor = tinycolor(config.theme.palette.blue85)
.setAlpha(0.2)
.toRgbString();
this.panel.thresholds[index].lineColor = tinycolor(config.theme.palette.blueShade)
this.panel.thresholds[index].lineColor = tinycolor(config.theme.palette.blue77)
.setAlpha(0.6)
.toRgbString();
}
......
public/app/plugins/panel/graph/time_regions_form.html
......@@ -83,7 +83,7 @@
<div class="gf-form-button-row">
<button class="btn btn-inverse" ng-click="ctrl.addTimeRegion()">
<icon name="'plus-circle'"></icon>&nbsp;Add time region<tip>All configured time regions refers to UTC time</tip>
<icon name="'plus'"></icon>&nbsp;Add time region<tip>All configured time regions refers to UTC time</tip>
</button>
</div>
</div>
public/app/plugins/panel/homelinks/module.tsx
......@@ -92,7 +92,8 @@ export const getStyles = stylesFactory(() => {
margin-right: ${theme.spacing.sm};
`,
footer: css`
${styleMixins.listItem(theme)}
background: ${theme.colors.bg2};
font-size: ${theme.typography.size.sm};
position: absolute;
bottom: 0;
width: 100%;
......
public/app/plugins/panel/news/NewsPanel.tsx
......@@ -4,7 +4,7 @@ import { css } from 'emotion';
// Utils & Services
import { GrafanaTheme } from '@grafana/data';
import { stylesFactory, CustomScrollbar, styleMixins } from '@grafana/ui';
import { stylesFactory, CustomScrollbar } from '@grafana/ui';
import config from 'app/core/config';
import { feedToDataFrame } from './utils';
import { sanitize } from 'app/core/utils/text';
......@@ -82,8 +82,8 @@ export class NewsPanel extends PureComponent<Props, State> {
<a href={item.link} target="_blank">
<div className={styles.title}>{item.title}</div>
<div className={styles.date}>{dateTime(item.date).format('MMM DD')} </div>
<div className={styles.content} dangerouslySetInnerHTML={{ __html: sanitize(item.content) }} />
</a>
<div className={styles.content} dangerouslySetInnerHTML={{ __html: sanitize(item.content) }} />
</div>
);
})}
......@@ -98,11 +98,11 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
height: 100%;
`,
item: css`
${styleMixins.listItem(theme)}
padding: ${theme.spacing.sm};
position: relative;
margin-bottom: 4px;
margin-right: ${theme.spacing.sm};
border-bottom: 2px solid ${theme.colors.border1};
`,
title: css`
color: ${theme.colors.linkExternal};
......@@ -113,6 +113,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
content: css`
p {
margin-bottom: 4px;
color: ${theme.colors.text};
}
`,
date: css`
......
public/app/plugins/panel/singlestat/mappings.html
......@@ -43,7 +43,7 @@
<div class="gf-form-button-row">
<button class="btn btn-inverse" ng-click="ctrl.addValueMap();">
<icon name="'plus-circle'"></icon>
<icon name="'plus'"></icon>
Add a value mapping
</button>
</div>
......@@ -66,7 +66,7 @@
<div class="gf-form-button-row">
<button class="btn btn-inverse" ng-click="ctrl.addRangeMap()">
<icon name="'plus-circle'"></icon>
<icon name="'plus'"></icon>
Add a range mapping
</button>
</div>
......
public/app/plugins/panel/table/column_options.html
......@@ -164,7 +164,7 @@
</div>
<div class="gf-form">
<label class="gf-form-label">
<a class="pointer" ng-click="editor.addValueMap(style)"><icon name="'plus-circle'"></icon></a>
<a class="pointer" ng-click="editor.addValueMap(style)"><icon name="'plus'"></icon></a>
</label>
</div>
</div>
......@@ -302,6 +302,6 @@
<div class="gf-form-button-row">
<button class="btn btn-inverse" ng-click="editor.addColumnStyle()">
<icon name="'plus-circle'"></icon>&nbsp;Add column style
<icon name="'plus'"></icon>&nbsp;Add column style
</button>
</div>
public/sass/_variables.dark.generated.scss
......@@ -15,7 +15,6 @@ $theme-name: dark;
// New Colors
// -------------------------
$blue-faint: #041126;
$blue-light: #5794f2;
$blue-base: #3274d9;
$blue-shade: #1f60c4;
......@@ -31,7 +30,7 @@ $gray85: #c7d0d9;
$gray70: #9fa7b3;
$gray60: #7b8087;
$gray33: #464c54;
$gray25: #343b40;
$gray25: #2c3235;
$gray15: #202226;
$gray10: #141619;
$gray05: #0b0c0e;
......@@ -62,12 +61,12 @@ $white: #ffffff;
// Accent colors
// -------------------------
$blue: #33b5e5;
$blue: #33a2e5;
$red: $red-base;
$yellow: #ecbb13;
$orange: #eb7b18;
$purple: #9933cc;
$variable: #339ae5;
$variable: #33a2e5;
$brand-primary: #eb7b18;
$brand-success: #299c46;
......@@ -92,11 +91,11 @@ $page-bg: #141619;
$dashboard-bg: #0b0c0e;
$text-color: #c7d0d9;
$text-color-strong: #ffffff;
$text-color-weak: #8e8e8e;
$text-color-faint: #222426;
$text-color-emphasis: #ececec;
$text-blue: #339ae5;
$text-color-strong: #f7f8fa;
$text-color-weak: #7b8087;
$text-color-faint: #464c54;
$text-color-emphasis: #f7f8fa;
$text-blue: #33a2e5;
$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
$textShadow: none;
......@@ -110,7 +109,7 @@ $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
$link-color: #d8d9da;
$link-color-disabled: #8e8e8e;
$link-hover-color: #ffffff;
$external-link-color: #33b5e5;
$external-link-color: #33a2e5;
// Typography
// -------------------------
......@@ -205,11 +204,11 @@ $input-bg: $input-black;
$input-bg-disabled: $dark-6;
$input-color: #c7d0d9;
$input-border-color: #343b40;
$input-border-color: #2c3235;
$input-box-shadow: none;
$input-border-focus: #5794f2;
$input-box-shadow-focus: $blue-light !default;
$input-color-placeholder: #555555;
$input-color-placeholder: #464c54;
$input-label-bg: #202226;
$input-color-select-arrow: $white;
......@@ -226,7 +225,7 @@ $typeahead-selected-color: $yellow;
$dropdownBackground: $panel-bg;
$dropdownBorder: #202226;
$dropdownDividerTop: transparent;
$dropdownDividerBottom: #343b40;
$dropdownDividerBottom: #2c3235;
$dropdownLinkColor: $link-color;
$dropdownLinkColorHover: $white;
......@@ -356,7 +355,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
$switch-bg: $input-bg;
$switch-slider-color: $dark-3;
$switch-slider-off-bg: $gray-1;
$switch-slider-on-bg: #5794f2;
$switch-slider-on-bg: #1f60c4;
$switch-slider-shadow: 0 0 3px black;
//Checkbox
......@@ -382,8 +381,8 @@ $panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
$panel-options-group-border: none;
$panel-options-group-header-bg: #202226;
$panel-grid-placeholder-bg: $blue-faint;
$panel-grid-placeholder-shadow: 0 0 4px $blue-shade;
$panel-grid-placeholder-bg: darken(#1f60c4, 30%);
$panel-grid-placeholder-shadow: 0 0 4px #3274d9;
// logs
$logs-color-unkown: $gray-2;
......
public/sass/_variables.light.generated.scss
......@@ -15,7 +15,6 @@ $theme-name: light;
// New Colors
// -------------------------
$blue-faint: #f5f9ff;
$blue-light: #5794f2;
$blue-base: #3274d9;
$blue-shade: #1f60c4;
......@@ -31,7 +30,7 @@ $gray85: #c7d0d9;
$gray70: #9fa7b3;
$gray60: #7b8087;
$gray33: #464c54;
$gray25: #343b40;
$gray25: #2c3235;
$gray15: #202226;
$gray10: #141619;
$gray05: #0b0c0e;
......@@ -56,12 +55,12 @@ $white: #ffffff;
// Accent colors
// -------------------------
$blue: #0083b3;
$blue: #33a2e5;
$red: $red-base;
$yellow: #ff851b;
$orange: #ff7941;
$purple: #9954bb;
$variable: #339ae5;
$variable: #33a2e5;
$brand-primary: #ff7941;
$brand-success: #3eb15b;
......@@ -85,12 +84,12 @@ $body-bg: #ffffff;
$page-bg: #ffffff;
$dashboard-bg: #f7f8fa;
$text-color: #52545c;
$text-color-strong: #41444b;
$text-color-weak: #767980;
$text-color-faint: #35373f;
$text-color-emphasis: #41444b;
$text-blue: #339ae5;
$text-color: #464c54;
$text-color-strong: #202226;
$text-color-weak: #7b8087;
$text-color-faint: #9fa7b3;
$text-color-emphasis: #202226;
$text-blue: #33a2e5;
$text-shadow-faint: none;
......@@ -100,14 +99,14 @@ $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
// Links
// -------------------------
$link-color: #52545c;
$link-color-disabled: #acb6bf;
$link-hover-color: #1e2028;
$external-link-color: #5794f2;
$link-color: #464c54;
$link-color-disabled: #7b8087;
$link-hover-color: #202226;
$external-link-color: #33a2e5;
// Typography
// -------------------------
$headings-color: #52545c;
$headings-color: #2c3235;
$abbr-border-color: $gray-2 !default;
$text-muted: $text-color-weak;
......@@ -116,14 +115,14 @@ $hr-border-color: $gray-4 !default;
// Panel
// -------------------------
$panel-bg: #ffffff;
$panel-border: 1px solid #e9edf2;
$panel-header-hover-bg: #f7f8fa;
$panel-border: 1px solid #dce1e6;
$panel-header-hover-bg: #f1f5f9;
$panel-corner: $gray-4;
// Page header
$page-header-bg: #f7f8fa;
$page-header-bg: #f1f5f9;
$page-header-shadow: inset 0px -3px 10px $gray-6;
$page-header-border-color: #e9edf2;
$page-header-border-color: #dce1e6;
$divider-border-color: $gray-2;
......@@ -197,13 +196,13 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
$input-bg: $white;
$input-bg-disabled: $gray-5;
$input-color: #343b40;
$input-color: #464c54;
$input-border-color: #c7d0d9;
$input-box-shadow: none;
$input-border-focus: #5794f2;
$input-box-shadow-focus: #5794f2;
$input-color-placeholder: #9fa7b3;
$input-label-bg: #f7f8fa;
$input-label-bg: #f1f5f9;
$input-color-select-arrow: #7b8087;
// search
......@@ -242,9 +241,9 @@ $navbar-button-border: $gray-4;
// Sidemenu
// -------------------------
$side-menu-bg: #202226;
$side-menu-border: 1px solid #343b40;
$side-menu-border: 1px solid #2c3235;
$side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
$side-menu-item-hover-bg: #343b40;
$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;
......@@ -375,8 +374,8 @@ $panel-editor-viz-item-bg-hover: lighten($blue-base, 45%);
$panel-options-group-border: none;
$panel-options-group-header-bg: $gray-5;
$panel-grid-placeholder-bg: $blue-faint;
$panel-grid-placeholder-shadow: 0 0 4px $blue-light;
$panel-grid-placeholder-bg: lighten(#5794f2, 30%);
$panel-grid-placeholder-shadow: 0 0 4px #5794f2;
// logs
$logs-color-unkown: $gray-5;
......
public/sass/components/_gf-form.scss
......@@ -112,6 +112,7 @@ $input-border: 1px solid $input-border-color;
margin-right: $space-xs;
border-radius: $input-border-radius;
justify-content: space-between;
border: none;
&--grow {
flex-grow: 1;
......
public/sass/components/_query_editor.scss
......@@ -15,35 +15,6 @@
margin: 20px 0;
}
.gf-form-query {
.gf-form,
.gf-form-filler {
margin-bottom: 2px;
}
.gf-form-switch,
.gf-form-switch label,
.gf-form-input,
.gf-form-select-wrapper,
.gf-form-filler,
.gf-form-label {
margin-right: 2px;
}
.gf-form-label {
border-right: 1px solid $input-border-color;
border-radius: $border-radius;
}
.gf-form-input {
border-radius: $border-radius;
}
.gf-form + .gf-form {
margin-left: 0;
}
}
.tight-form-func {
background: $tight-form-func-bg;
......
public/sass/pages/_dashboard.scss
......@@ -20,6 +20,10 @@ div.flot-text {
}
}
.template-variable {
color: $variable;
}
.panel-solo {
position: fixed;
bottom: 0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment