IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Torkel Ödegaard 2020-04-14 11:32:14 +02:00 committed by GitHub
parent 16bc5c118d
commit bc60f9c403
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
70 changed files with 457 additions and 418 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/sources/packages_api/data/grafanatheme.md
View File

@ -25,7 +25,7 @@ import { GrafanaTheme } from '@grafana/data';
| Property | Type | Description |
| --- | --- | --- |
| [background](#background-property) | <code>{</code><br/><code> dropdown: string;</code><br/><code> scrollbar: string;</code><br/><code> scrollbar2: string;</code><br/><code> pageHeader: string;</code><br/><code> }</code> | |
| [colors](#colors-property) | <code>{</code><br/><code> black: string;</code><br/><code> white: string;</code><br/><code> dark1: string;</code><br/><code> dark2: string;</code><br/><code> dark3: string;</code><br/><code> dark4: string;</code><br/><code> dark5: string;</code><br/><code> dark6: string;</code><br/><code> dark7: string;</code><br/><code> dark8: string;</code><br/><code> dark9: string;</code><br/><code> dark10: string;</code><br/><code> gray1: string;</code><br/><code> gray2: string;</code><br/><code> gray3: string;</code><br/><code> gray4: string;</code><br/><code> gray5: string;</code><br/><code> gray6: string;</code><br/><code> gray7: string;</code><br/><code> gray98: string;</code><br/><code> gray95: string;</code><br/><code> gray85: string;</code><br/><code> gray70: string;</code><br/><code> gray33: string;</code><br/><code> gray25: string;</code><br/><code> gray15: string;</code><br/><code> gray10: string;</code><br/><code> gray05: string;</code><br/><code> blue95: string;</code><br/><code> blue85: string;</code><br/><code> blue77: string;</code><br/><code> red88: string;</code><br/><code> grayBlue: string;</code><br/><code> inputBlack: string;</code><br/><code> blue: string;</code><br/><code> blueBase: string;</code><br/><code> blueShade: string;</code><br/><code> blueLight: string;</code><br/><code> blueFaint: string;</code><br/><code> redBase: string;</code><br/><code> redShade: string;</code><br/><code> greenBase: string;</code><br/><code> greenShade: string;</code><br/><code> red: string;</code><br/><code> yellow: string;</code><br/><code> purple: string;</code><br/><code> variable: string;</code><br/><code> orange: string;</code><br/><code> orangeDark: string;</code><br/><code> queryRed: string;</code><br/><code> queryGreen: string;</code><br/><code> queryPurple: string;</code><br/><code> queryKeyword: string;</code><br/><code> queryOrange: string;</code><br/><code> brandPrimary: string;</code><br/><code> brandSuccess: string;</code><br/><code> brandWarning: string;</code><br/><code> brandDanger: string;</code><br/><code> online: string;</code><br/><code> warn: string;</code><br/><code> critical: string;</code><br/><code> link: string;</code><br/><code> linkDisabled: string;</code><br/><code> linkHover: string;</code><br/><code> linkExternal: string;</code><br/><code> body: string;</code><br/><code> text: string;</code><br/><code> textStrong: string;</code><br/><code> textWeak: string;</code><br/><code> textFaint: string;</code><br/><code> textEmphasis: string;</code><br/><code> panelBg: string;</code><br/><code> bodyBg: string;</code><br/><code> pageBg: string;</code><br/><code> headingColor: string;</code><br/><code> pageHeaderBorder: string;</code><br/><code> formLabel: string;</code><br/><code> formDescription: string;</code><br/><code> formLegend: string;</code><br/><code> formInputBg: string;</code><br/><code> formInputBgDisabled: string;</code><br/><code> formInputBorder: string;</code><br/><code> formInputBorderHover: string;</code><br/><code> formInputBorderActive: string;</code><br/><code> formInputBorderInvalid: string;</code><br/><code> formFocusOutline: string;</code><br/><code> formInputText: string;</code><br/><code> formInputDisabledText: string;</code><br/><code> formInputTextStrong: string;</code><br/><code> formInputTextWhite: string;</code><br/><code> formValidationMessageText: string;</code><br/><code> formValidationMessageBg: string;</code><br/><code> formSwitchBg: string;</code><br/><code> formSwitchBgActive: string;</code><br/><code> formSwitchBgActiveHover: string;</code><br/><code> formSwitchBgHover: string;</code><br/><code> formSwitchBgDisabled: string;</code><br/><code> formSwitchDot: string;</code><br/><code> formCheckboxBg: string;</code><br/><code> formCheckboxBgChecked: string;</code><br/><code> formCheckboxBgCheckedHover: string;</code><br/><code> formCheckboxCheckmark: string;</code><br/><code> }</code> | |
| [colors](#colors-property) | <code>{</code><br/><code> black: string;</code><br/><code> white: string;</code><br/><code> dark1: string;</code><br/><code> dark2: string;</code><br/><code> dark3: string;</code><br/><code> dark4: string;</code><br/><code> dark5: string;</code><br/><code> dark6: string;</code><br/><code> dark7: string;</code><br/><code> dark8: string;</code><br/><code> dark9: string;</code><br/><code> dark10: string;</code><br/><code> gray1: string;</code><br/><code> gray2: string;</code><br/><code> gray3: string;</code><br/><code> gray4: string;</code><br/><code> gray5: string;</code><br/><code> gray6: string;</code><br/><code> gray7: string;</code><br/><code> gray98: string;</code><br/><code> gray95: string;</code><br/><code> gray85: string;</code><br/><code> gray70: string;</code><br/><code> gray33: string;</code><br/><code> gray25: string;</code><br/><code> gray15: string;</code><br/><code> gray10: string;</code><br/><code> gray05: string;</code><br/><code> blue95: string;</code><br/><code> blue85: string;</code><br/><code> blue77: string;</code><br/><code> red88: string;</code><br/><code> grayBlue: string;</code><br/><code> inputBlack: string;</code><br/><code> blue: string;</code><br/><code> blue80: string;</code><br/><code> blue77: string;</code><br/><code> blue95: string;</code><br/><code> blueFaint: string;</code><br/><code> redBase: string;</code><br/><code> redShade: string;</code><br/><code> greenBase: string;</code><br/><code> greenShade: string;</code><br/><code> red: string;</code><br/><code> yellow: string;</code><br/><code> purple: string;</code><br/><code> variable: string;</code><br/><code> orange: string;</code><br/><code> orangeDark: string;</code><br/><code> queryRed: string;</code><br/><code> queryGreen: string;</code><br/><code> queryPurple: string;</code><br/><code> queryKeyword: string;</code><br/><code> queryOrange: string;</code><br/><code> brandPrimary: string;</code><br/><code> brandSuccess: string;</code><br/><code> brandWarning: string;</code><br/><code> brandDanger: string;</code><br/><code> online: string;</code><br/><code> warn: string;</code><br/><code> critical: string;</code><br/><code> link: string;</code><br/><code> linkDisabled: string;</code><br/><code> linkHover: string;</code><br/><code> linkExternal: string;</code><br/><code> body: string;</code><br/><code> text: string;</code><br/><code> textStrong: string;</code><br/><code> textWeak: string;</code><br/><code> textFaint: string;</code><br/><code> textEmphasis: string;</code><br/><code> panelBg: string;</code><br/><code> bodyBg: string;</code><br/><code> pageBg: string;</code><br/><code> headingColor: string;</code><br/><code> pageHeaderBorder: string;</code><br/><code> formLabel: string;</code><br/><code> formDescription: string;</code><br/><code> formLegend: string;</code><br/><code> formInputBg: string;</code><br/><code> formInputBgDisabled: string;</code><br/><code> formInputBorder: string;</code><br/><code> formInputBorderHover: string;</code><br/><code> formInputBorderActive: string;</code><br/><code> formInputBorderInvalid: string;</code><br/><code> formFocusOutline: string;</code><br/><code> formInputText: string;</code><br/><code> formInputDisabledText: string;</code><br/><code> formInputTextStrong: string;</code><br/><code> formInputTextWhite: string;</code><br/><code> formValidationMessageText: string;</code><br/><code> formValidationMessageBg: string;</code><br/><code> formSwitchBg: string;</code><br/><code> formSwitchBgActive: string;</code><br/><code> formSwitchBgActiveHover: string;</code><br/><code> formSwitchBgHover: string;</code><br/><code> formSwitchBgDisabled: string;</code><br/><code> formSwitchDot: string;</code><br/><code> formCheckboxBg: string;</code><br/><code> formCheckboxBgChecked: string;</code><br/><code> formCheckboxBgCheckedHover: string;</code><br/><code> formCheckboxCheckmark: string;</code><br/><code> }</code> | |
| [isDark](#isdark-property) | <code>boolean</code> | |
| [isLight](#islight-property) | <code>boolean</code> | |
| [shadow](#shadow-property) | <code>{</code><br/><code> pageHeader: string;</code><br/><code> }</code> | |
@ -85,9 +85,9 @@ colors: {
grayBlue: string;
inputBlack: string;
blue: string;
blueBase: string;
blueShade: string;
blueLight: string;
blue80: string;
blue77: string;
blue95: string;
blueFaint: string;
redBase: string;
redShade: string;

23
packages/grafana-data/src/types/theme.ts
View File

@ -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;
};
}

2
packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx
View File

@ -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;

4
packages/grafana-ui/src/components/Button/Button.tsx
View File

@ -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),
};
}
};

2
packages/grafana-ui/src/components/Collapse/Collapse.tsx
View File

@ -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 {

3
packages/grafana-ui/src/components/Forms/Legend.tsx
View File

@ -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;
`,
};
});

12
packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
View File

@ -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;

2
packages/grafana-ui/src/components/Legend/LegendTable.tsx
View File

@ -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;

5
packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx
View File

@ -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};
`,
});

2
packages/grafana-ui/src/components/Modal/getModalStyles.ts
View File

@ -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;

2
packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
View File

@ -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>

2
packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx
View File

@ -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>
);

2
packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx
View File

@ -78,7 +78,7 @@ export const InputWithAutoFocus = () => {
setInputComponents([...inputComponents, InputComponent]);
}}
>
<Icon name="plus-circle" />
<Icon name="plus" />
</a>
</SegmentFrame>
);

2
packages/grafana-ui/src/components/Select/getSelectStyles.ts
View File

@ -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 {

4
packages/grafana-ui/src/components/Table/styles.ts
View File

@ -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 {

1
packages/grafana-ui/src/components/Tabs/Tab.tsx
View File

@ -42,7 +42,6 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme) => {
background: ${colors.bodyBg};
color: ${colors.link};
overflow: hidden;
cursor: not-allowed;
&::before {
display: block;

71
packages/grafana-ui/src/components/ThemeColors/ThemeColors.story.tsx
View File

@ -1,76 +1,15 @@
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 />;
};

143
packages/grafana-ui/src/components/ThemeColors/ThemeColors.tsx Normal file
View File

@ -0,0 +1,143 @@
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>
);
};

2
packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx
View File

@ -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;

100
packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap
View File

@ -70,10 +70,13 @@ exports[`TimePicker renders buttons correctly 1`] = `
"colors": Object {
"bg1": "#141619",
"bg2": "#202226",
"bg3": "#343b40",
"bg3": "#2c3235",
"bgBlue1": "#3274d9",
"bgBlue2": "#1f60c4",
"bodyBg": "#141619",
"border1": "#202226",
"border2": "#343b40",
"border2": "#2c3235",
"border3": "#464c54",
"dashboardBg": "#0b0c0e",
"dropdownBg": "#0b0c0e",
"dropdownOptionHoverBg": "#202226",
@ -81,45 +84,42 @@ exports[`TimePicker renders buttons correctly 1`] = `
"formCheckboxBg": "#222426",
"formCheckboxBgChecked": "#5794f2",
"formCheckboxBgCheckedHover": "#3274d9",
"formCheckboxCheckmark": "#343b40",
"formCheckboxCheckmark": "#2c3235",
"formDescription": "#7b8087",
"formFocusOutline": "#1f60c4",
"formInputBg": "#0b0c0e",
"formInputBgDisabled": "#141619",
"formInputBorder": "#343b40",
"formInputBorder": "#2c3235",
"formInputBorderActive": "#5794f2",
"formInputBorderHover": "#464c54",
"formInputBorderInvalid": "#e02f44",
"formInputDisabledText": "#9fa7b3",
"formInputPlaceholderText": "#555555",
"formInputPlaceholderText": "#464c54",
"formInputText": "#c7d0d9",
"formInputTextStrong": "#c7d0d9",
"formInputTextWhite": "#ffffff",
"formLabel": "#9fa7b3",
"formLegend": "#c7d0d9",
"formSwitchBg": "#343b40",
"formSwitchBg": "#2c3235",
"formSwitchBgActive": "#5794f2",
"formSwitchBgActiveHover": "#3274d9",
"formSwitchBgDisabled": "#343b40",
"formSwitchBgDisabled": "#2c3235",
"formSwitchBgHover": "#464c54",
"formSwitchDot": "#202226",
"formValidationMessageBg": "#e02f44",
"formValidationMessageText": "#ffffff",
"headingColor": "#d8d9da",
"link": "#d8d9da",
"linkDisabled": "#8e8e8e",
"linkExternal": "#33b5e5",
"linkExternal": "#33a2e5",
"linkHover": "#ffffff",
"pageHeaderBg": "#202226",
"pageHeaderBorder": "#202226",
"panelBg": "#141619",
"panelBorder": "#202226",
"text": "#c7d0d9",
"textBlue": "#339ae5",
"textEmphasis": "#ececec",
"textFaint": "#222426",
"textStrong": "#ffffff",
"textWeak": "#8e8e8e",
"textBlue": "#33a2e5",
"textFaint": "#464c54",
"textHeading": "#d8d9da",
"textSemiWeak": "#9fa7b3",
"textStrong": "#f7f8fa",
"textWeak": "#7b8087",
},
"height": Object {
"lg": "48px",
@ -131,14 +131,10 @@ exports[`TimePicker renders buttons correctly 1`] = `
"name": "Grafana Dark",
"palette": Object {
"black": "#000000",
"blue": "#33b5e5",
"blue77": "#1f60c4",
"blue85": "#339ae5",
"blue80": "#3274d9",
"blue85": "#33a2e5",
"blue95": "#5794f2",
"blueBase": "#3274d9",
"blueFaint": "#041126",
"blueLight": "#5794f2",
"blueShade": "#1f60c4",
"brandDanger": "#e02f44",
"brandPrimary": "#eb7b18",
"brandSuccess": "#299c46",
@ -159,7 +155,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
"gray10": "#141619",
"gray15": "#202226",
"gray2": "#8e8e8e",
"gray25": "#343b40",
"gray25": "#2c3235",
"gray3": "#b3b3b3",
"gray33": "#464c54",
"gray4": "#d8d9da",
@ -169,7 +165,9 @@ exports[`TimePicker renders buttons correctly 1`] = `
"gray7": "#fbfbfb",
"gray70": "#9fa7b3",
"gray85": "#c7d0d9",
"gray90": "#dce1e6",
"gray95": "#e9edf2",
"gray97": "#f1f5f9",
"gray98": "#f7f8fa",
"greenBase": "#299c46",
"greenShade": "#23843b",
@ -192,6 +190,9 @@ exports[`TimePicker renders buttons correctly 1`] = `
},
"panelHeaderHeight": 28,
"panelPadding": 8,
"shadows": Object {
"listItem": "-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3)",
},
"spacing": Object {
"d": "14px",
"formButtonHeight": 32,
@ -202,7 +203,6 @@ exports[`TimePicker renders buttons correctly 1`] = `
"formInputPaddingHorizontal": "8px",
"formLabelMargin": "0 0 4px 0",
"formLabelPadding": "0 0 0 2px",
"formLegendMargin": "0 0 16px 0",
"formMargin": "32px",
"formSpacingBase": 8,
"formValidationMessageMargin": "4px 0 0 0",
@ -384,10 +384,13 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"colors": Object {
"bg1": "#141619",
"bg2": "#202226",
"bg3": "#343b40",
"bg3": "#2c3235",
"bgBlue1": "#3274d9",
"bgBlue2": "#1f60c4",
"bodyBg": "#141619",
"border1": "#202226",
"border2": "#343b40",
"border2": "#2c3235",
"border3": "#464c54",
"dashboardBg": "#0b0c0e",
"dropdownBg": "#0b0c0e",
"dropdownOptionHoverBg": "#202226",
@ -395,45 +398,42 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"formCheckboxBg": "#222426",
"formCheckboxBgChecked": "#5794f2",
"formCheckboxBgCheckedHover": "#3274d9",
"formCheckboxCheckmark": "#343b40",
"formCheckboxCheckmark": "#2c3235",
"formDescription": "#7b8087",
"formFocusOutline": "#1f60c4",
"formInputBg": "#0b0c0e",
"formInputBgDisabled": "#141619",
"formInputBorder": "#343b40",
"formInputBorder": "#2c3235",
"formInputBorderActive": "#5794f2",
"formInputBorderHover": "#464c54",
"formInputBorderInvalid": "#e02f44",
"formInputDisabledText": "#9fa7b3",
"formInputPlaceholderText": "#555555",
"formInputPlaceholderText": "#464c54",
"formInputText": "#c7d0d9",
"formInputTextStrong": "#c7d0d9",
"formInputTextWhite": "#ffffff",
"formLabel": "#9fa7b3",
"formLegend": "#c7d0d9",
"formSwitchBg": "#343b40",
"formSwitchBg": "#2c3235",
"formSwitchBgActive": "#5794f2",
"formSwitchBgActiveHover": "#3274d9",
"formSwitchBgDisabled": "#343b40",
"formSwitchBgDisabled": "#2c3235",
"formSwitchBgHover": "#464c54",
"formSwitchDot": "#202226",
"formValidationMessageBg": "#e02f44",
"formValidationMessageText": "#ffffff",
"headingColor": "#d8d9da",
"link": "#d8d9da",
"linkDisabled": "#8e8e8e",
"linkExternal": "#33b5e5",
"linkExternal": "#33a2e5",
"linkHover": "#ffffff",
"pageHeaderBg": "#202226",
"pageHeaderBorder": "#202226",
"panelBg": "#141619",
"panelBorder": "#202226",
"text": "#c7d0d9",
"textBlue": "#339ae5",
"textEmphasis": "#ececec",
"textFaint": "#222426",
"textStrong": "#ffffff",
"textWeak": "#8e8e8e",
"textBlue": "#33a2e5",
"textFaint": "#464c54",
"textHeading": "#d8d9da",
"textSemiWeak": "#9fa7b3",
"textStrong": "#f7f8fa",
"textWeak": "#7b8087",
},
"height": Object {
"lg": "48px",
@ -445,14 +445,10 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"name": "Grafana Dark",
"palette": Object {
"black": "#000000",
"blue": "#33b5e5",
"blue77": "#1f60c4",
"blue85": "#339ae5",
"blue80": "#3274d9",
"blue85": "#33a2e5",
"blue95": "#5794f2",
"blueBase": "#3274d9",
"blueFaint": "#041126",
"blueLight": "#5794f2",
"blueShade": "#1f60c4",
"brandDanger": "#e02f44",
"brandPrimary": "#eb7b18",
"brandSuccess": "#299c46",
@ -473,7 +469,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"gray10": "#141619",
"gray15": "#202226",
"gray2": "#8e8e8e",
"gray25": "#343b40",
"gray25": "#2c3235",
"gray3": "#b3b3b3",
"gray33": "#464c54",
"gray4": "#d8d9da",
@ -483,7 +479,9 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"gray7": "#fbfbfb",
"gray70": "#9fa7b3",
"gray85": "#c7d0d9",
"gray90": "#dce1e6",
"gray95": "#e9edf2",
"gray97": "#f1f5f9",
"gray98": "#f7f8fa",
"greenBase": "#299c46",
"greenShade": "#23843b",
@ -506,6 +504,9 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
},
"panelHeaderHeight": 28,
"panelPadding": 8,
"shadows": Object {
"listItem": "-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3)",
},
"spacing": Object {
"d": "14px",
"formButtonHeight": 32,
@ -516,7 +517,6 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"formInputPaddingHorizontal": "8px",
"formLabelMargin": "0 0 4px 0",
"formLabelPadding": "0 0 0 2px",
"formLegendMargin": "0 0 16px 0",
"formMargin": "32px",
"formSpacingBase": 8,
"formValidationMessageMargin": "4px 0 0 0",

2
packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx
View File

@ -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;

2
packages/grafana-ui/src/components/TransformersUI/FilterByRefIdTransformerEditor.tsx
View File

@ -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;

19
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
View File

@ -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;

19
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
View File

@ -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;

52
packages/grafana-ui/src/themes/dark.ts
View File

@ -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)',
},
};

12
packages/grafana-ui/src/themes/default.ts
View File

@ -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`,

69
packages/grafana-ui/src/themes/light.ts
View File

@ -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)',
},
};

49
packages/grafana-ui/src/themes/mixins.ts
View File

@ -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};
`;
}

1
public/app/core/components/Select/FolderPicker.tsx
View File

@ -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}

1
public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap
View File

@ -15,6 +15,7 @@ exports[`FolderPicker should render 1`] = `
</label>
<AsyncSelect
allowCustomValue={false}
className="width-20"
defaultOptions={true}
defaultValue={Object {}}
loadOptions={[Function]}

5
public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
View File

@ -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};

2
public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx
View File

@ -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 => {

2
public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
View File

@ -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`

4
public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx
View File

@ -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;

12
public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx
View File

@ -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`

2
public/app/features/explore/AdHocFilterField.tsx
View File

@ -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>
);

22
public/app/features/explore/Explore.tsx
View File

@ -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 }) => {

4
public/app/features/explore/LiveLogs.tsx
View File

@ -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()};
}

2
public/app/features/explore/SecondaryActions.tsx
View File

@ -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>
)}

2
public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap
View File

@ -2,7 +2,7 @@
exports[`MetaInfoText should render component 1`] = `
<div
className="css-mi7ebz"
className="css-1u65mbf"
>
<Memo(MetaInfoItem)
key="0-label"

2
public/app/features/panel/panellinks/module.html
View File

@ -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>

2
public/app/features/teams/TeamGroupSync.tsx
View File

@ -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>

2
public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
View File

@ -109,7 +109,7 @@ exports[`Render should render groups table 1`] = `
onClick={[Function]}
>
<Icon
name="plus-circle"
name="plus"
/>
Add group
</button>

2
public/app/features/variables/adhoc/picker/AdHocFilterBuilder.tsx
View File

@ -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>
);
}

8
public/app/plugins/datasource/cloudwatch/components/Dimensions.test.tsx
View File

@ -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`));
});
});
});

2
public/app/plugins/datasource/cloudwatch/components/Dimensions.tsx
View File

@ -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)}

2
public/app/plugins/datasource/cloudwatch/components/Stats.tsx
View File

@ -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

2
public/app/plugins/datasource/cloudwatch/components/__snapshots__/Stats.test.tsx.snap
View File

@ -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>

4
public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html
View File

@ -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>

4
public/app/plugins/datasource/elasticsearch/partials/metric_agg.html
View File

@ -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>

6
public/app/plugins/datasource/elasticsearch/partials/pipeline_variables.html
View File

@ -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>

4
public/app/plugins/datasource/graphite/add_graphite_func.ts
View File

@ -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) {

4
public/app/plugins/datasource/loki/configuration/DerivedFields.tsx
View File

@ -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: '' }];

4
public/app/plugins/datasource/opentsdb/partials/query.editor.html
View File

@ -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>

2
public/app/plugins/datasource/stackdriver/components/GroupBys.tsx
View File

@ -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

2
public/app/plugins/datasource/stackdriver/components/LabelFilter.tsx
View File

@ -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))]}

6
public/app/plugins/datasource/testdata/partials/query.editor.html vendored
View File

@ -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"

2
public/app/plugins/panel/graph/tab_display.html
View File

@ -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>

2
public/app/plugins/panel/graph/thresholds_form.html
View File

@ -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>

4
public/app/plugins/panel/graph/thresholds_form.ts
View File

@ -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();
}

2
public/app/plugins/panel/graph/time_regions_form.html
View File

@ -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>

3
public/app/plugins/panel/homelinks/module.tsx
View File

@ -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%;

7
public/app/plugins/panel/news/NewsPanel.tsx
View File

@ -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`

4
public/app/plugins/panel/singlestat/mappings.html
View File

@ -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>

4
public/app/plugins/panel/table/column_options.html
View File

@ -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>

31
public/sass/_variables.dark.generated.scss
View File

@ -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;

49
public/sass/_variables.light.generated.scss
View File

@ -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;

1
public/sass/components/_gf-form.scss
View File

@ -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;

29
public/sass/components/_query_editor.scss
View File

@ -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;

4
public/sass/pages/_dashboard.scss
View File

@ -20,6 +20,10 @@ div.flot-text {
}
}
.template-variable {
color: $variable;
}
.panel-solo {
position: fixed;
bottom: 0;