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: Refactoring theme colors variables (#23513)

Browse Source 
* Theme: Typography updates

* Updated

* Updated snapshot

* Renamed colors to palette

* Introduce colors namespace

* Massive theme color move

* Removing color selection logic with more abstract concepts

* Updates

* Minor sidemenu change
This commit is contained in:
Torkel Ödegaard 2020-04-12 15:05:49 +02:00 committed by GitHub
parent 0fd5945542
commit 1ba8f1647e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
104 changed files with 769 additions and 734 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -112,13 +112,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
type: GrafanaThemeType;
isDark: boolean;
isLight: boolean;
background: {
dropdown: string;
scrollbar: string;
scrollbar2: string;
pageHeader: string;
};
colors: {
palette: {
black: string;
white: string;
dark1: string;
@ -160,7 +154,6 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
red88: string;
grayBlue: string;
inputBlack: string;
// Accent colors
blue: string;
@ -192,6 +185,24 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
online: string;
warn: string;
critical: string;
};
colors: {
bg1: string;
bg2: string;
bg3: string;
border1: string;
border2: string;
dashboardBg: string;
bodyBg: string;
panelBg: string;
panelBorder: string;
pageHeaderBg: string;
pageHeaderBorder: string;
dropdownBg: string;
dropdownShadow: string;
dropdownOptionHoverBg: string;
// Link colors
link: string;
@ -200,25 +211,13 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
linkExternal: string;
// Text colors
body: string;
text: string;
textStrong: string;
textWeak: string;
textFaint: string;
textEmphasis: string;
// panel
panelBg: string;
panelBorder: string;
// TODO: move to background section
bodyBg: string;
pageBg: string;
pageHeaderBg: string;
headingColor: string;
pageHeaderBorder: string;
// Next-gen forms functional colors
formLabel: string;
formDescription: string;
@ -248,7 +247,4 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
formCheckboxBgCheckedHover: string;
formCheckboxCheckmark: string;
};
shadow: {
pageHeader: string;
};
}

12
packages/grafana-ui/.storybook/storybookTheme.ts
View File

@ -9,12 +9,12 @@ const createTheme = (theme: GrafanaTheme) => {
return create({
base: theme.name.includes('Light') ? 'light' : 'dark',
colorPrimary: theme.colors.brandPrimary,
colorSecondary: theme.colors.brandPrimary,
colorPrimary: theme.palette.brandPrimary,
colorSecondary: theme.palette.brandPrimary,
// UI
appBg: theme.colors.pageBg,
appContentBg: theme.colors.pageBg,
appBg: theme.colors.bodyBg,
appContentBg: theme.colors.bodyBg,
appBorderColor: theme.colors.pageHeaderBorder,
appBorderRadius: 4,
@ -28,8 +28,8 @@ const createTheme = (theme: GrafanaTheme) => {
// Toolbar default and active colors
barTextColor: theme.colors.formInputBorderActive,
barSelectedColor: theme.colors.brandPrimary,
barBg: theme.colors.pageBg,
barSelectedColor: theme.palette.brandPrimary,
barBg: theme.colors.pageHeaderBg,
// Form colors
inputBg: theme.colors.formInputBg,

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

@ -16,8 +16,8 @@ export const AlphaNotice: FC<Props> = ({ state, text, className }) => {
const styles = cx(
className,
css`
background: linear-gradient(to bottom, ${theme.colors.blueBase}, ${theme.colors.blueShade});
color: ${theme.colors.gray7};
background: linear-gradient(to bottom, ${theme.palette.blueBase}, ${theme.palette.blueShade});
color: ${theme.palette.gray7};
white-space: nowrap;
border-radius: 3px;
text-shadow: none;

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

@ -115,7 +115,7 @@ export abstract class BigValueLayout {
panelStyles.background = `linear-gradient(120deg, ${bgColor2}, ${bgColor3})`;
break;
case BigValueColorMode.Value:
panelStyles.background = `${theme.colors.panelBg}`;
panelStyles.background = `transparent`;
break;
}

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

@ -25,7 +25,7 @@ const buttonVariantStyles = (from: string, to: string, textColor: string) => css
const getPropertiesForVariant = (theme: GrafanaTheme, variant: ButtonVariant) => {
switch (variant) {
case 'secondary':
const from = theme.isLight ? theme.colors.gray7 : theme.colors.gray15;
const from = theme.isLight ? theme.palette.gray7 : theme.palette.gray15;
const to = theme.isLight
? tinycolor(from)
.darken(5)
@ -34,14 +34,14 @@ const getPropertiesForVariant = (theme: GrafanaTheme, variant: ButtonVariant) =>
.lighten(4)
.toString();
return {
borderColor: theme.isLight ? theme.colors.gray85 : theme.colors.gray25,
background: buttonVariantStyles(from, to, theme.isLight ? theme.colors.gray25 : theme.colors.gray4),
borderColor: theme.isLight ? theme.palette.gray85 : theme.palette.gray25,
background: buttonVariantStyles(from, to, theme.isLight ? theme.palette.gray25 : theme.palette.gray4),
};
case 'destructive':
return {
borderColor: theme.colors.redShade,
background: buttonVariantStyles(theme.colors.redBase, theme.colors.redShade, theme.colors.white),
borderColor: theme.palette.redShade,
background: buttonVariantStyles(theme.palette.redBase, theme.palette.redShade, theme.palette.white),
};
case 'link':
@ -58,8 +58,8 @@ const getPropertiesForVariant = (theme: GrafanaTheme, variant: ButtonVariant) =>
case 'primary':
default:
return {
borderColor: theme.colors.blueShade,
background: buttonVariantStyles(theme.colors.blueBase, theme.colors.blueShade, theme.colors.white),
borderColor: theme.palette.blueShade,
background: buttonVariantStyles(theme.palette.blueBase, theme.palette.blueShade, theme.palette.white),
};
}
};

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

@ -16,7 +16,7 @@ const getCallToActionCardStyles = stylesFactory((theme: GrafanaTheme) => ({
wrapper: css`
label: call-to-action-card;
padding: ${theme.spacing.lg};
background: ${selectThemeVariant({ light: theme.colors.gray6, dark: theme.colors.grayBlue }, theme.type)};
background: ${selectThemeVariant({ light: theme.palette.gray6, dark: theme.palette.grayBlue }, theme.type)};
border-radius: ${theme.border.radius.md};
display: flex;
flex-direction: column;

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

@ -13,7 +13,7 @@ interface TooltipContainerProps {
}
const getTooltipContainerStyles = stylesFactory((theme: GrafanaTheme) => {
const bgColor = selectThemeVariant({ light: theme.colors.gray5, dark: theme.colors.dark1 }, theme.type);
const bgColor = selectThemeVariant({ light: theme.palette.gray5, dark: theme.palette.dark1 }, theme.type);
return {
wrapper: css`
overflow: hidden;

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.colors.blue};
background: ${theme.palette.blue};
}
@keyframes loader {
from {

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

@ -33,8 +33,8 @@ export const ColorSwatch: FunctionComponent<ColorSwatchProps> = ({
const selectedSwatchBorder = selectThemeVariant(
{
light: theme.colors.white,
dark: theme.colors.black,
light: theme.palette.white,
dark: theme.palette.black,
},
theme.type
);

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

@ -17,8 +17,8 @@ const SpectrumPalettePointer: React.FunctionComponent<SpectrumPalettePointerProp
const pointerColor = selectThemeVariant(
{
light: theme.colors.dark3,
dark: theme.colors.gray2,
light: theme.palette.dark3,
dark: theme.palette.gray2,
},
theme.type
);

30
packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
View File

@ -31,7 +31,7 @@ export interface ContextMenuProps {
const getContextMenuStyles = stylesFactory((theme: GrafanaTheme) => {
const linkColor = selectThemeVariant(
{
light: theme.colors.dark2,
light: theme.palette.dark2,
dark: theme.colors.text,
},
theme.type
@ -39,35 +39,35 @@ const getContextMenuStyles = stylesFactory((theme: GrafanaTheme) => {
const linkColorHover = selectThemeVariant(
{
light: theme.colors.link,
dark: theme.colors.white,
dark: theme.palette.white,
},
theme.type
);
const wrapperBg = selectThemeVariant(
{
light: theme.colors.gray7,
dark: theme.colors.dark2,
light: theme.palette.gray7,
dark: theme.palette.dark2,
},
theme.type
);
const wrapperShadow = selectThemeVariant(
{
light: theme.colors.gray3,
dark: theme.colors.black,
light: theme.palette.gray3,
dark: theme.palette.black,
},
theme.type
);
const itemColor = selectThemeVariant(
{
light: theme.colors.black,
dark: theme.colors.white,
light: theme.palette.black,
dark: theme.palette.white,
},
theme.type
);
const groupLabelColor = selectThemeVariant(
{
light: theme.colors.gray1,
light: theme.palette.gray1,
dark: theme.colors.textWeak,
},
theme.type
@ -75,22 +75,22 @@ const getContextMenuStyles = stylesFactory((theme: GrafanaTheme) => {
const itemBgHover = selectThemeVariant(
{
light: theme.colors.gray5,
dark: theme.colors.dark7,
light: theme.palette.gray5,
dark: theme.palette.dark7,
},
theme.type
);
const headerBg = selectThemeVariant(
{
light: theme.colors.white,
dark: theme.colors.dark1,
light: theme.palette.white,
dark: theme.palette.dark1,
},
theme.type
);
const headerSeparator = selectThemeVariant(
{
light: theme.colors.white,
dark: theme.colors.dark7,
light: theme.palette.white,
dark: theme.palette.dark7,
},
theme.type
);

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

@ -35,10 +35,10 @@ const plugins = [
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
editor: css`
.token.builtInVariable {
color: ${theme.colors.queryGreen};
color: ${theme.palette.queryGreen};
}
.token.variable {
color: ${theme.colors.queryKeyword};
color: ${theme.palette.queryKeyword};
}
`,
}));

24
packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
View File

@ -18,48 +18,48 @@ interface DataLinkSuggestionsProps {
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const wrapperBg = selectThemeVariant(
{
light: theme.colors.white,
dark: theme.colors.dark2,
light: theme.palette.white,
dark: theme.palette.dark2,
},
theme.type
);
const wrapperShadow = selectThemeVariant(
{
light: theme.colors.gray5,
dark: theme.colors.black,
light: theme.palette.gray5,
dark: theme.palette.black,
},
theme.type
);
const itemColor = selectThemeVariant(
{
light: theme.colors.black,
dark: theme.colors.white,
light: theme.palette.black,
dark: theme.palette.white,
},
theme.type
);
const itemDocsColor = selectThemeVariant(
{
light: theme.colors.dark3,
dark: theme.colors.gray2,
light: theme.palette.dark3,
dark: theme.palette.gray2,
},
theme.type
);
const itemBgHover = selectThemeVariant(
{
light: theme.colors.gray5,
dark: theme.colors.dark7,
light: theme.palette.gray5,
dark: theme.palette.dark7,
},
theme.type
);
const itemBgActive = selectThemeVariant(
{
light: theme.colors.gray6,
dark: theme.colors.dark9,
light: theme.palette.gray6,
dark: theme.palette.dark9,
},
theme.type
);

8
packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx
View File

@ -111,16 +111,16 @@ export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({ li
const getDataLinksInlineEditorStyles = stylesFactory((theme: GrafanaTheme) => {
const borderColor = selectThemeVariant(
{
light: theme.colors.gray85,
dark: theme.colors.dark9,
light: theme.palette.gray85,
dark: theme.palette.dark9,
},
theme.type
);
const shadow = selectThemeVariant(
{
light: theme.colors.gray85,
dark: theme.colors.black,
light: theme.palette.gray85,
dark: theme.palette.black,
},
theme.type
);

10
packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx
View File

@ -56,15 +56,15 @@ export const DataLinksListItem: FC<DataLinksListItemProps> = ({
const getDataLinkListItemStyles = stylesFactory((theme: GrafanaTheme) => {
const borderColor = selectThemeVariant(
{
light: theme.colors.gray85,
dark: theme.colors.dark9,
light: theme.palette.gray85,
dark: theme.palette.dark9,
},
theme.type
);
const bg = selectThemeVariant(
{
light: theme.colors.white,
dark: theme.colors.dark1,
light: theme.palette.white,
dark: theme.palette.dark1,
},
theme.type
);
@ -92,7 +92,7 @@ const getDataLinkListItemStyles = stylesFactory((theme: GrafanaTheme) => {
font-size: ${theme.typography.size.sm};
`,
remove: css`
color: ${theme.colors.red88};
color: ${theme.palette.red88};
`,
};
});

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

@ -104,7 +104,7 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = props => {
);
const notValidStyle = css`
box-shadow: inset 0 0px 5px ${theme.colors.red};
box-shadow: inset 0 0px 5px ${theme.palette.red};
`;
const inputStyle = cx({ [`width-20`]: true, [notValidStyle]: !isValidUrl });

13
packages/grafana-ui/src/components/Drawer/Drawer.tsx
View File

@ -3,7 +3,7 @@ import { GrafanaTheme } from '@grafana/data';
import RcDrawer from 'rc-drawer';
import { css } from 'emotion';
import CustomScrollbar from '../CustomScrollbar/CustomScrollbar';
import { stylesFactory, useTheme, selectThemeVariant } from '../../themes';
import { stylesFactory, useTheme } from '../../themes';
export interface Props {
children: ReactNode;
@ -24,17 +24,12 @@ export interface Props {
const getStyles = stylesFactory((theme: GrafanaTheme, scollableContent: boolean) => {
const closeButtonWidth = '50px';
const borderColor = selectThemeVariant(
{
light: theme.colors.gray4,
dark: theme.colors.dark9,
},
theme.type
);
const borderColor = theme.colors.border2;
return {
drawer: css`
.drawer-content {
background-color: ${theme.colors.pageBg};
background-color: ${theme.colors.bodyBg};
display: flex;
flex-direction: column;
overflow: hidden;

6
packages/grafana-ui/src/components/FieldConfigs/FieldConfigItemHeaderTitle.tsx
View File

@ -37,8 +37,8 @@ export const FieldConfigItemHeaderTitle: React.FC<FieldConfigItemHeaderTitleProp
const getFieldConfigItemHeaderTitleStyles = stylesFactory((theme: GrafanaTheme) => {
const headerBg = selectThemeVariant(
{
light: theme.colors.white,
dark: theme.colors.dark1,
light: theme.palette.white,
dark: theme.palette.dark1,
},
theme.type
);
@ -57,7 +57,7 @@ const getFieldConfigItemHeaderTitleStyles = stylesFactory((theme: GrafanaTheme)
flex-grow: 0;
flex-shrink: 0;
cursor: pointer;
color: ${theme.colors.red88};
color: ${theme.palette.red88};
`,
};
});

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

@ -19,7 +19,7 @@ export interface RadioButtonProps {
const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButtonSize, fullWidth?: boolean) => {
const { fontSize, height } = getPropertiesForButtonSize(theme, size);
const horizontalPadding = theme.spacing[size] ?? theme.spacing.md;
const c = theme.colors;
const c = theme.palette;
const textColor = theme.isLight ? c.gray33 : c.gray70;
const textColorHover = theme.isLight ? c.blueShade : c.blueLight;
@ -27,7 +27,7 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
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 bg = c.pageBg;
const bg = theme.colors.bodyBg;
const bgDisabled = theme.isLight ? c.gray95 : c.gray15;
const bgActive = theme.isLight ? c.white : c.gray05;

6
packages/grafana-ui/src/components/Forms/commonStyles.ts
View File

@ -6,7 +6,7 @@ import { IconName } from '../../types';
export const getFocusCss = (theme: GrafanaTheme) => `
outline: 2px dotted transparent;
outline-offset: 2px;
box-shadow: 0 0 0 2px ${theme.colors.pageBg}, 0 0 0px 4px ${theme.colors.formFocusOutline};
box-shadow: 0 0 0 2px ${theme.colors.bodyBg}, 0 0 0px 4px ${theme.colors.formFocusOutline};
transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
`;
@ -18,7 +18,7 @@ export const getFocusStyle = (theme: GrafanaTheme) => css`
export const sharedInputStyle = (theme: GrafanaTheme, invalid = false) => {
const colors = theme.colors;
const borderColor = invalid ? colors.redBase : colors.formInputBorder;
const borderColor = invalid ? theme.palette.redBase : colors.formInputBorder;
return css`
background-color: ${colors.formInputBg};
@ -36,7 +36,7 @@ export const sharedInputStyle = (theme: GrafanaTheme, invalid = false) => {
&:-webkit-autofill:focus {
/* Welcome to 2005. This is a HACK to get rid od Chromes default autofill styling */
box-shadow: 0 0 0 2px ${theme.colors.pageBg}, 0 0 0px 4px ${theme.colors.formFocusOutline},
box-shadow: 0 0 0 2px ${theme.colors.bodyBg}, 0 0 0px 4px ${theme.colors.formFocusOutline},
inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px ${colors.formInputBg}!important;
}

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

@ -102,8 +102,8 @@ export class Gauge extends PureComponent<Props> {
const backgroundColor = selectThemeVariant(
{
dark: theme.colors.dark8,
light: theme.colors.gray6,
dark: theme.palette.dark8,
light: theme.palette.gray6,
},
theme.type
);

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

@ -63,8 +63,8 @@ export const GraphLegend: React.FunctionComponent<GraphLegendProps> = ({
const legendTableEvenRowBackground = selectThemeVariant(
{
dark: theme.colors.dark6,
light: theme.colors.gray5,
dark: theme.palette.dark6,
light: theme.palette.gray5,
},
theme.type
);

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

@ -79,7 +79,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
text-align: right;
`,
yAxisLabel: css`
color: ${theme.colors.gray2};
color: ${theme.palette.gray2};
`,
};
});

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

@ -24,8 +24,8 @@ const IconWrapper: React.FC<{ name: IconName }> = ({ name }) => {
const theme = useTheme();
const borderColor = selectThemeVariant(
{
light: theme.colors.gray5,
dark: theme.colors.dark6,
light: theme.palette.gray5,
dark: theme.palette.dark6,
},
theme.type
);

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

@ -26,7 +26,7 @@ const getIconStyles = stylesFactory((theme: GrafanaTheme) => {
fill: currentColor;
`,
orange: css`
fill: ${theme.colors.orange};
fill: ${theme.palette.orange};
`,
};
});

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

@ -35,7 +35,7 @@ function renderScenario(surface: string, theme: GrafanaTheme, sizes: IconSize[],
bg = theme.colors.bodyBg;
break;
case 'panel':
bg = theme.colors.pageBg;
bg = theme.colors.bodyBg;
break;
case 'header': {
bg = theme.colors.pageHeaderBg;

6
packages/grafana-ui/src/components/IconButton/IconButton.tsx
View File

@ -46,11 +46,11 @@ export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
function getHoverColor(theme: GrafanaTheme, surface: SurfaceType): string {
switch (surface) {
case 'body':
return theme.isLight ? theme.colors.gray95 : theme.colors.gray15;
return theme.isLight ? theme.palette.gray95 : theme.palette.gray15;
case 'panel':
return theme.isLight ? theme.colors.gray6 : theme.colors.gray25;
return theme.isLight ? theme.palette.gray6 : theme.palette.gray25;
case 'header':
return theme.isLight ? theme.colors.gray85 : theme.colors.gray25;
return theme.isLight ? theme.palette.gray85 : theme.palette.gray25;
}
}

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

@ -29,7 +29,7 @@ interface StyleDeps {
}
export const getInputStyles = stylesFactory(({ theme, invalid = false }: StyleDeps) => {
const colors = theme.colors;
const { palette, colors } = theme;
const borderRadius = theme.border.radius.sm;
const height = theme.spacing.formInputHeight;
@ -47,6 +47,7 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false }: StyleDe
height: 100%;
/* Min width specified for prefix/suffix classes used outside React component*/
min-width: ${prefixSuffixStaticWidth};
color: ${theme.colors.textWeak};
`;
return {
@ -62,7 +63,7 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false }: StyleDe
> .prefix,
.suffix,
.input {
border-color: ${invalid ? colors.redBase : colors.formInputBorder};
border-color: ${invalid ? palette.redBase : colors.formInputBorder};
}
// only show number buttons on hover

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

@ -40,7 +40,7 @@ export const LegendTable: React.FunctionComponent<LegendTableProps> = ({
<th
key={columnHeader}
className={css`
color: ${theme.colors.blue};
color: ${theme.palette.blue};
font-weight: bold;
text-align: right;
cursor: pointer;

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

@ -41,7 +41,7 @@ export interface Props extends Themeable {
}
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const bgColor = selectThemeVariant({ light: theme.colors.gray7, dark: theme.colors.dark2 }, theme.type);
const bgColor = selectThemeVariant({ light: theme.palette.gray7, dark: theme.palette.dark2 }, theme.type);
return {
hoverBackground: css`
label: hoverBackground;

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

@ -15,8 +15,8 @@ const STATS_ROW_LIMIT = 5;
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const borderColor = selectThemeVariant(
{
light: theme.colors.gray5,
dark: theme.colors.dark9,
light: theme.palette.gray5,
dark: theme.palette.dark9,
},
theme.type
);

4
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.colors.blue};
color: ${theme.palette.blue};
position: relative;
`,
logsStatsRowLabel: css`
@ -47,7 +47,7 @@ const getStyles = (theme: GrafanaTheme) => ({
height: 4px;
overflow: hidden;
background: ${theme.colors.textFaint};
background: ${theme.colors.blue};
background: ${theme.palette.blue};
`,
});

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

@ -22,7 +22,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
label: logs-label;
display: flex;
padding: 0 2px;
background-color: ${selectThemeVariant({ light: theme.colors.gray5, dark: theme.colors.dark6 }, theme.type)};
background-color: ${selectThemeVariant({ light: theme.palette.gray5, dark: theme.palette.dark6 }, theme.type)};
border-radius: ${theme.border.radius};
margin: 1px 4px 0 0;
text-overflow: ellipsis;

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

@ -44,7 +44,7 @@ interface State {
}
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const bgColor = selectThemeVariant({ light: theme.colors.gray7, dark: theme.colors.dark2 }, theme.type);
const bgColor = selectThemeVariant({ light: theme.palette.gray7, dark: theme.palette.dark2 }, theme.type);
return {
topVerticalAlign: css`
label: topVerticalAlign;

18
packages/grafana-ui/src/components/Logs/LogRowContext.tsx
View File

@ -24,30 +24,30 @@ interface LogRowContextProps {
const getLogRowContextStyles = (theme: GrafanaTheme) => {
const gradientTop = selectThemeVariant(
{
light: theme.colors.white,
dark: theme.colors.dark1,
light: theme.palette.white,
dark: theme.palette.dark1,
},
theme.type
);
const gradientBottom = selectThemeVariant(
{
light: theme.colors.gray7,
dark: theme.colors.dark2,
light: theme.palette.gray7,
dark: theme.palette.dark2,
},
theme.type
);
const boxShadowColor = selectThemeVariant(
{
light: theme.colors.gray5,
dark: theme.colors.black,
light: theme.palette.gray5,
dark: theme.palette.black,
},
theme.type
);
const borderColor = selectThemeVariant(
{
light: theme.colors.gray5,
dark: theme.colors.dark9,
light: theme.palette.gray5,
dark: theme.palette.dark9,
},
theme.type
);
@ -60,7 +60,7 @@ const getLogRowContextStyles = (theme: GrafanaTheme) => {
height: 250px;
z-index: 2;
overflow: hidden;
background: ${theme.colors.pageBg};
background: ${theme.colors.bodyBg};
background: linear-gradient(180deg, ${gradientTop} 0%, ${gradientBottom} 104.25%);
box-shadow: 0px 2px 4px ${boxShadowColor}, 0px 0px 2px ${boxShadowColor};
border: 1px solid ${borderColor};

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

@ -33,8 +33,8 @@ interface Props extends Themeable {
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const outlineColor = selectThemeVariant(
{
light: theme.colors.white,
dark: theme.colors.black,
light: theme.palette.white,
dark: theme.palette.black,
},
theme.type
);

20
packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
View File

@ -6,9 +6,9 @@ import { selectThemeVariant } from '../../themes/selectThemeVariant';
import { stylesFactory } from '../../themes';
export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: LogLevel) => {
let logColor = selectThemeVariant({ light: theme.colors.gray5, dark: theme.colors.gray2 }, theme.type);
const borderColor = selectThemeVariant({ light: theme.colors.gray5, dark: theme.colors.gray2 }, theme.type);
const bgColor = selectThemeVariant({ light: theme.colors.gray5, dark: theme.colors.dark4 }, theme.type);
let logColor = selectThemeVariant({ light: theme.palette.gray5, dark: theme.palette.gray2 }, theme.type);
const borderColor = selectThemeVariant({ light: theme.palette.gray5, dark: theme.palette.gray2 }, theme.type);
const bgColor = selectThemeVariant({ light: theme.palette.gray5, dark: theme.palette.dark4 }, theme.type);
const context = css`
label: context;
visibility: hidden;
@ -27,7 +27,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
break;
case LogLevel.warning:
case LogLevel.warn:
logColor = theme.colors.yellow;
logColor = theme.palette.yellow;
break;
case LogLevel.info:
logColor = '#7eb26d';
@ -45,12 +45,12 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
label: logs-row__match-highlight;
background: inherit;
padding: inherit;
color: ${theme.colors.yellow};
background-color: rgba(${theme.colors.yellow}, 0.1);
color: ${theme.palette.yellow};
background-color: rgba(${theme.palette.yellow}, 0.1);
`,
logsRowMatchHighLightPreview: css`
label: logs-row__match-highlight--preview;
background-color: rgba(${theme.colors.yellow}, 0.2);
background-color: rgba(${theme.palette.yellow}, 0.2);
border-bottom-style: dotted;
`,
logsRowsTable: css`
@ -76,7 +76,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
margin-left: 10px;
text-decoration: underline;
&:hover {
color: ${theme.colors.yellow};
color: ${theme.palette.yellow};
}
}
}
@ -92,7 +92,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
}
&:hover {
background: ${theme.colors.pageBg};
background: ${theme.colors.bodyBg};
}
`,
logsRowDuplicates: css`
@ -158,7 +158,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
logsDetailsIcon: css`
label: logs-row-details__icon;
position: relative;
color: ${theme.colors.gray3};
color: ${theme.palette.gray3};
svg {
margin-right: ${theme.spacing.md};
}

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

@ -1,20 +1,15 @@
import { css } from 'emotion';
import { GrafanaTheme } from '@grafana/data';
import { selectThemeVariant, stylesFactory } from '../../themes';
import { stylesFactory } from '../../themes';
export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
const backdropBackground = selectThemeVariant(
{
light: theme.colors.bodyBg,
dark: theme.colors.gray25,
},
theme.type
);
const backdropBackground = theme.colors.bg1;
return {
modal: css`
position: fixed;
z-index: ${theme.zIndex.modal};
background: ${theme.colors.pageBg};
background: ${theme.colors.bodyBg};
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
background-clip: padding-box;
outline: none;
@ -37,8 +32,8 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
opacity: 0.7;
`,
modalHeader: css`
background: ${theme.colors.pageHeaderBg};
box-shadow: ${theme.shadow.pageHeader};
background: ${theme.colors.bg1};
box-shadow: 0 0 20px ${theme.colors.dropdownShadow};
border-bottom: 1px solid ${theme.colors.pageHeaderBorder};
display: flex;
height: 42px;

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

@ -16,7 +16,7 @@ const getStyles = memoizeOne((theme: GrafanaTheme) => {
selectButton: css`
label: selectButton;
.select-button-value {
color: ${theme.colors.orange};
color: ${theme.palette.orange};
}
`,
};

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

@ -27,7 +27,7 @@ export const MultiValueRemove: React.FC<MultiValueRemoveProps> = ({ children, in
const styles = getSelectStyles(theme);
return (
<div {...innerProps} className={styles.multiValueRemove}>
<Icon name="times" />
<Icon name="times" size="sm" />
</div>
);
};

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

@ -20,8 +20,8 @@ interface State {
const getSelectOptionGroupStyles = stylesFactory((theme: GrafanaTheme) => {
const optionBorder = selectThemeVariant(
{
light: theme.colors.gray4,
dark: theme.colors.dark9,
light: theme.palette.gray4,
dark: theme.palette.dark9,
},
theme.type
);

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

@ -1,14 +1,13 @@
import { stylesFactory } from '../../themes/stylesFactory';
import { selectThemeVariant as stv } from '../../themes/selectThemeVariant';
import { css } from 'emotion';
import { GrafanaTheme } from '@grafana/data';
export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
const bgColor = stv({ light: theme.colors.white, dark: theme.colors.formInputBg }, theme.type);
const menuShadowColor = stv({ light: theme.colors.gray4, dark: theme.colors.black }, theme.type);
const optionBgHover = stv({ light: theme.colors.gray7, dark: theme.colors.gray10 }, theme.type);
const multiValueContainerBg = stv({ light: theme.colors.gray6, dark: theme.colors.gray05 }, theme.type);
const multiValueColor = stv({ light: theme.colors.gray25, dark: theme.colors.gray85 }, theme.type);
const bgColor = theme.colors.formInputBg;
const menuShadowColor = theme.colors.dropdownShadow;
const optionBgHover = theme.colors.dropdownOptionHoverBg;
const multiValueContainerBg = theme.colors.bg3;
const multiValueColor = theme.colors.text;
return {
menu: css`
@ -87,12 +86,13 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
line-height: 1;
background: ${multiValueContainerBg};
border-radius: ${theme.border.radius.sm};
padding: ${theme.spacing.xs} ${theme.spacing.xxs} ${theme.spacing.xs} ${theme.spacing.sm};
margin: ${theme.spacing.xxs} ${theme.spacing.xs} ${theme.spacing.xxs} 0;
margin: 0 ${theme.spacing.sm} 0 0;
padding: ${theme.spacing.xxs} 0 ${theme.spacing.xxs} ${theme.spacing.sm};
color: ${multiValueColor};
font-size: ${theme.typography.size.sm};
`,
multiValueRemove: css`
margin-left: ${theme.spacing.xs};
margin: 0 ${theme.spacing.xs};
`,
};
});

18
packages/grafana-ui/src/components/Slider/Slider.tsx
View File

@ -21,7 +21,7 @@ export interface Props {
}
const getStyles = stylesFactory((theme: GrafanaTheme, isHorizontal: boolean) => {
const trackColor = theme.isLight ? theme.colors.gray5 : theme.colors.dark6;
const trackColor = theme.isLight ? theme.palette.gray5 : theme.palette.dark6;
const container = isHorizontal
? css`
width: 100%;
@ -39,28 +39,28 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isHorizontal: boolean) =>
margin-top: -10px;
}
.rc-slider-handle {
border: solid 2px ${theme.colors.blue77};
background-color: ${theme.colors.blue77};
border: solid 2px ${theme.palette.blue77};
background-color: ${theme.palette.blue77};
}
.rc-slider-handle:hover {
border-color: ${theme.colors.blue77};
border-color: ${theme.palette.blue77};
}
.rc-slider-handle:focus {
border-color: ${theme.colors.blue77};
border-color: ${theme.palette.blue77};
box-shadow: none;
}
.rc-slider-handle:active {
border-color: ${theme.colors.blue77};
border-color: ${theme.palette.blue77};
box-shadow: none;
}
.rc-slider-handle-click-focused:focus {
border-color: ${theme.colors.blue77};
border-color: ${theme.palette.blue77};
}
.rc-slider-dot-active {
border-color: ${theme.colors.blue77};
border-color: ${theme.palette.blue77};
}
.rc-slider-track {
background-color: ${theme.colors.blue77};
background-color: ${theme.palette.blue77};
}
.rc-slider-rail {
background-color: ${trackColor};

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

@ -19,10 +19,10 @@ export interface TableStyles {
export const getTableStyles = stylesFactory(
(theme: GrafanaTheme): TableStyles => {
const colors = theme.colors;
const headerBg = colors.panelBorder;
const headerBorderColor = theme.isLight ? colors.gray70 : colors.gray05;
const resizerColor = theme.isLight ? colors.blue77 : colors.blue95;
const palette = theme.palette;
const headerBg = theme.colors.panelBorder;
const headerBorderColor = theme.isLight ? palette.gray70 : palette.gray05;
const resizerColor = theme.isLight ? palette.blue77 : palette.blue95;
const padding = 6;
const lineHeight = theme.typography.lineHeight.md;
const bodyFontSize = 14;
@ -51,7 +51,7 @@ export const getTableStyles = stylesFactory(
padding: ${padding}px 10px;
cursor: pointer;
white-space: nowrap;
color: ${colors.blue};
color: ${palette.blue};
border-right: 1px solid ${headerBorderColor};
&:last-child {

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

@ -38,8 +38,8 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme) => {
}
`,
activeStyle: css`
border-color: ${colors.orange} ${colors.pageHeaderBorder} transparent;
background: ${colors.pageBg};
border-color: ${theme.palette.orange} ${colors.pageHeaderBorder} transparent;
background: ${colors.bodyBg};
color: ${colors.link};
overflow: hidden;
cursor: not-allowed;

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

@ -38,7 +38,7 @@ const getTagStyles = (theme: GrafanaTheme, name: string) => {
line-height: ${theme.typography.lineHeight.xs};
vertical-align: baseline;
background-color: ${color};
color: ${theme.colors.white};
color: ${theme.palette.white};
white-space: nowrap;
text-shadow: none;
padding: 3px 6px;

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

@ -16,7 +16,7 @@ const getStyles = stylesFactory(({ theme, name }: { theme: GrafanaTheme; name: s
return {
itemStyle: css`
background-color: ${color};
color: ${theme.colors.white};
color: ${theme.palette.white};
border: 1px solid ${borderColor};
border-radius: 3px;
padding: 3px 6px;

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

@ -34,7 +34,7 @@ const getTextAreaStyle = stylesFactory((theme: GrafanaTheme, invalid = false) =>
border-radius: ${theme.border.radius.sm};
padding: ${theme.spacing.formSpacingBase / 4}px ${theme.spacing.formSpacingBase}px;
width: 100%;
border-color: ${invalid ? theme.colors.redBase : theme.colors.formInputBorder};
border-color: ${invalid ? theme.palette.redBase : theme.colors.formInputBorder};
`
),
};

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

@ -0,0 +1,76 @@
import React from 'react';
import { css, cx } from 'emotion';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { useTheme } from '../../themes/ThemeContext';
export default {
title: 'General/ThemeColors',
component: () => {},
decorators: [withCenteredStory],
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>;
};

10
packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.tsx
View File

@ -2,7 +2,7 @@ import React, { FC } from 'react';
import RcTimePicker from 'rc-time-picker';
import { css, cx } from 'emotion';
import { dateTime, DateTime, dateTimeAsMoment, GrafanaTheme } from '@grafana/data';
import { useTheme, Icon, selectThemeVariant as stv } from '../../index';
import { useTheme, Icon } from '../../index';
import { stylesFactory } from '../../themes';
import { inputSizes, getFocusCss } from '../Forms/commonStyles';
import { FormInputSize } from '../Forms/types';
@ -16,9 +16,9 @@ interface Props {
}
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const bgColor = stv({ light: theme.colors.white, dark: theme.colors.formInputBg }, theme.type);
const menuShadowColor = stv({ light: theme.colors.gray4, dark: theme.colors.black }, theme.type);
const optionBgHover = stv({ light: theme.colors.gray7, dark: theme.colors.gray10 }, theme.type);
const bgColor = theme.colors.formInputBg;
const menuShadowColor = theme.colors.dropdownShadow;
const optionBgHover = theme.colors.dropdownOptionHoverBg;
const borderRadius = theme.border.radius.sm;
const borderColor = theme.colors.formInputBorder;
return {
@ -40,7 +40,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
outline-width: 2px;
&.rc-time-picker-panel-select-option-selected {
background-color: inherit;
border: 1px solid ${theme.colors.orange};
border: 1px solid ${theme.palette.orange};
border-radius: ${borderRadius};
}

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

@ -82,7 +82,7 @@ const getLabelStyles = stylesFactory((theme: GrafanaTheme) => {
display: inline-block;
`,
utc: css`
color: ${theme.colors.orange};
color: ${theme.palette.orange};
font-size: 75%;
padding: 3px;
font-weight: ${theme.typography.weight.semibold};

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

@ -109,7 +109,7 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
.react-calendar__month-view__weekdays {
background-color: inherit;
text-align: center;
color: ${theme.colors.blueShade};
color: ${theme.palette.blueShade};
abbr {
border: 0;
@ -139,9 +139,9 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
.react-calendar__tile--active,
.react-calendar__tile--active:hover {
color: ${theme.colors.white};
color: ${theme.palette.white};
font-weight: ${theme.typography.weight.semibold};
background: ${theme.colors.blue95};
background: ${theme.palette.blue95};
box-shadow: none;
border: 0px;
}
@ -150,12 +150,12 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
.react-calendar__tile--rangeStart {
padding: 0;
border: 0px;
color: ${theme.colors.white};
color: ${theme.palette.white};
font-weight: ${theme.typography.weight.semibold};
background: ${theme.colors.blue95};
background: ${theme.palette.blue95};
abbr {
background-color: ${theme.colors.blue77};
background-color: ${theme.palette.blue77};
border-radius: 100px;
display: block;
padding-top: 2px;

4
packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimeRangeOption.tsx
View File

@ -6,8 +6,8 @@ import { useTheme, stylesFactory, selectThemeVariant } from '../../../themes';
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const background = selectThemeVariant(
{
light: theme.colors.gray7,
dark: theme.colors.dark3,
light: theme.palette.gray7,
dark: theme.palette.dark3,
},
theme.type
);

6
packages/grafana-ui/src/components/TimePicker/TimePickerContent/__snapshots__/TimePickerContent.test.tsx.snap
View File

@ -2,7 +2,7 @@
exports[`TimePickerContent renders correctly in full screen 1`] = `
<div
className="css-1fbt695"
className="css-1l5oyux"
>
<div
className="css-13dsoi7"
@ -93,7 +93,7 @@ exports[`TimePickerContent renders correctly in full screen 1`] = `
exports[`TimePickerContent renders correctly in narrow screen 1`] = `
<div
className="css-1fbt695"
className="css-1l5oyux"
>
<div
className="css-13dsoi7"
@ -184,7 +184,7 @@ exports[`TimePickerContent renders correctly in narrow screen 1`] = `
exports[`TimePickerContent renders recent absolute ranges correctly 1`] = `
<div
className="css-1fbt695"
className="css-1l5oyux"
>
<div
className="css-13dsoi7"

24
packages/grafana-ui/src/components/TimePicker/TimePickerContent/colors.ts
View File

@ -5,29 +5,17 @@ export const getThemeColors = (theme: GrafanaTheme) => {
return {
border: selectThemeVariant(
{
light: theme.colors.gray4,
dark: theme.colors.gray25,
},
theme.type
),
background: selectThemeVariant(
{
dark: theme.colors.dark2,
light: theme.background.dropdown,
},
theme.type
),
shadow: selectThemeVariant(
{
light: theme.colors.gray85,
dark: theme.colors.black,
light: theme.palette.gray4,
dark: theme.palette.gray25,
},
theme.type
),
background: theme.colors.dropdownBg,
shadow: theme.colors.dropdownShadow,
formBackground: selectThemeVariant(
{
dark: theme.colors.gray15,
light: theme.colors.gray98,
dark: theme.palette.gray15,
light: theme.palette.gray98,
},
theme.type
),

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

@ -50,12 +50,6 @@ exports[`TimePicker renders buttons correctly 1`] = `
onZoom={[Function]}
theme={
Object {
"background": Object {
"dropdown": "#1f1f20",
"pageHeader": "linear-gradient(90deg, #292a2d, #000000)",
"scrollbar": "#343436",
"scrollbar2": "#343436",
},
"border": Object {
"radius": Object {
"lg": "5px",
@ -74,32 +68,16 @@ exports[`TimePicker renders buttons correctly 1`] = `
"xs": "0",
},
"colors": Object {
"black": "#000000",
"blue": "#33b5e5",
"blue77": "#1f60c4",
"blue85": "#3274d9",
"blue95": "#5794f2",
"blueBase": "#3274d9",
"blueFaint": "#041126",
"blueLight": "#5794f2",
"blueShade": "#1f60c4",
"body": "#d8d9da",
"bodyBg": "#0b0c0e",
"brandDanger": "#e02f44",
"brandPrimary": "#eb7b18",
"brandSuccess": "#299c46",
"brandWarning": "#eb7b18",
"critical": "#e02f44",
"dark1": "#141414",
"dark10": "#424345",
"dark2": "#161719",
"dark3": "#1f1f20",
"dark4": "#212124",
"dark5": "#222426",
"dark6": "#262628",
"dark7": "#292a2d",
"dark8": "#2f2f32",
"dark9": "#343436",
"bg1": "#141619",
"bg2": "#202226",
"bg3": "#343b40",
"bodyBg": "#141619",
"border1": "#202226",
"border2": "#343b40",
"dashboardBg": "#0b0c0e",
"dropdownBg": "#0b0c0e",
"dropdownOptionHoverBg": "#202226",
"dropdownShadow": "#000000",
"formCheckboxBg": "#222426",
"formCheckboxBgChecked": "#5794f2",
"formCheckboxBgCheckedHover": "#3274d9",
@ -127,6 +105,54 @@ exports[`TimePicker renders buttons correctly 1`] = `
"formSwitchDot": "#202226",
"formValidationMessageBg": "#e02f44",
"formValidationMessageText": "#ffffff",
"headingColor": "#d8d9da",
"link": "#d8d9da",
"linkDisabled": "#8e8e8e",
"linkExternal": "#33b5e5",
"linkHover": "#ffffff",
"pageHeaderBg": "#202226",
"pageHeaderBorder": "#202226",
"panelBg": "#141619",
"panelBorder": "#202226",
"text": "#c7d0d9",
"textEmphasis": "#ececec",
"textFaint": "#222426",
"textStrong": "#ffffff",
"textWeak": "#8e8e8e",
},
"height": Object {
"lg": "48px",
"md": "32px",
"sm": "24px",
},
"isDark": true,
"isLight": false,
"name": "Grafana Dark",
"palette": Object {
"black": "#000000",
"blue": "#33b5e5",
"blue77": "#1f60c4",
"blue85": "#3274d9",
"blue95": "#5794f2",
"blueBase": "#3274d9",
"blueFaint": "#041126",
"blueLight": "#5794f2",
"blueShade": "#1f60c4",
"brandDanger": "#e02f44",
"brandPrimary": "#eb7b18",
"brandSuccess": "#299c46",
"brandWarning": "#eb7b18",
"critical": "#e02f44",
"dark1": "#141414",
"dark10": "#424345",
"dark2": "#161719",
"dark3": "#1f1f20",
"dark4": "#212124",
"dark5": "#222426",
"dark6": "#262628",
"dark7": "#292a2d",
"dark8": "#2f2f32",
"dark9": "#343436",
"gray05": "#0b0c0e",
"gray1": "#555555",
"gray10": "#141619",
@ -147,20 +173,9 @@ exports[`TimePicker renders buttons correctly 1`] = `
"grayBlue": "#212327",
"greenBase": "#299c46",
"greenShade": "#23843b",
"headingColor": "#d8d9da",
"inputBlack": "#0b0c0e",
"link": "#d8d9da",
"linkDisabled": "#8e8e8e",
"linkExternal": "#33b5e5",
"linkHover": "#ffffff",
"online": "#299c46",
"orange": "#eb7b18",
"orangeDark": "#ff780a",
"pageBg": "#141619",
"pageHeaderBg": "#202226",
"pageHeaderBorder": "#202226",
"panelBg": "#141619",
"panelBorder": "#202226",
"purple": "#9933cc",
"queryGreen": "#74e680",
"queryKeyword": "#66d9ef",
@ -171,29 +186,13 @@ exports[`TimePicker renders buttons correctly 1`] = `
"red88": "#e02f44",
"redBase": "#e02f44",
"redShade": "#c4162a",
"text": "#c7d0d9",
"textEmphasis": "#ececec",
"textFaint": "#222426",
"textStrong": "#ffffff",
"textWeak": "#8e8e8e",
"variable": "#32d1df",
"warn": "#f79520",
"white": "#ffffff",
"yellow": "#ecbb13",
},
"height": Object {
"lg": "48px",
"md": "32px",
"sm": "24px",
},
"isDark": true,
"isLight": false,
"name": "Grafana Dark",
"panelHeaderHeight": 28,
"panelPadding": 8,
"shadow": Object {
"pageHeader": "inset 0px -4px 14px #1f1f20",
},
"spacing": Object {
"d": "14px",
"formButtonHeight": 32,
@ -366,12 +365,6 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
onZoom={[Function]}
theme={
Object {
"background": Object {
"dropdown": "#1f1f20",
"pageHeader": "linear-gradient(90deg, #292a2d, #000000)",
"scrollbar": "#343436",
"scrollbar2": "#343436",
},
"border": Object {
"radius": Object {
"lg": "5px",
@ -390,32 +383,16 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"xs": "0",
},
"colors": Object {
"black": "#000000",
"blue": "#33b5e5",
"blue77": "#1f60c4",
"blue85": "#3274d9",
"blue95": "#5794f2",
"blueBase": "#3274d9",
"blueFaint": "#041126",
"blueLight": "#5794f2",
"blueShade": "#1f60c4",
"body": "#d8d9da",
"bodyBg": "#0b0c0e",
"brandDanger": "#e02f44",
"brandPrimary": "#eb7b18",
"brandSuccess": "#299c46",
"brandWarning": "#eb7b18",
"critical": "#e02f44",
"dark1": "#141414",
"dark10": "#424345",
"dark2": "#161719",
"dark3": "#1f1f20",
"dark4": "#212124",
"dark5": "#222426",
"dark6": "#262628",
"dark7": "#292a2d",
"dark8": "#2f2f32",
"dark9": "#343436",
"bg1": "#141619",
"bg2": "#202226",
"bg3": "#343b40",
"bodyBg": "#141619",
"border1": "#202226",
"border2": "#343b40",
"dashboardBg": "#0b0c0e",
"dropdownBg": "#0b0c0e",
"dropdownOptionHoverBg": "#202226",
"dropdownShadow": "#000000",
"formCheckboxBg": "#222426",
"formCheckboxBgChecked": "#5794f2",
"formCheckboxBgCheckedHover": "#3274d9",
@ -443,6 +420,54 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"formSwitchDot": "#202226",
"formValidationMessageBg": "#e02f44",
"formValidationMessageText": "#ffffff",
"headingColor": "#d8d9da",
"link": "#d8d9da",
"linkDisabled": "#8e8e8e",
"linkExternal": "#33b5e5",
"linkHover": "#ffffff",
"pageHeaderBg": "#202226",
"pageHeaderBorder": "#202226",
"panelBg": "#141619",
"panelBorder": "#202226",
"text": "#c7d0d9",
"textEmphasis": "#ececec",
"textFaint": "#222426",
"textStrong": "#ffffff",
"textWeak": "#8e8e8e",
},
"height": Object {
"lg": "48px",
"md": "32px",
"sm": "24px",
},
"isDark": true,
"isLight": false,
"name": "Grafana Dark",
"palette": Object {
"black": "#000000",
"blue": "#33b5e5",
"blue77": "#1f60c4",
"blue85": "#3274d9",
"blue95": "#5794f2",
"blueBase": "#3274d9",
"blueFaint": "#041126",
"blueLight": "#5794f2",
"blueShade": "#1f60c4",
"brandDanger": "#e02f44",
"brandPrimary": "#eb7b18",
"brandSuccess": "#299c46",
"brandWarning": "#eb7b18",
"critical": "#e02f44",
"dark1": "#141414",
"dark10": "#424345",
"dark2": "#161719",
"dark3": "#1f1f20",
"dark4": "#212124",
"dark5": "#222426",
"dark6": "#262628",
"dark7": "#292a2d",
"dark8": "#2f2f32",
"dark9": "#343436",
"gray05": "#0b0c0e",
"gray1": "#555555",
"gray10": "#141619",
@ -463,20 +488,9 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"grayBlue": "#212327",
"greenBase": "#299c46",
"greenShade": "#23843b",
"headingColor": "#d8d9da",
"inputBlack": "#0b0c0e",
"link": "#d8d9da",
"linkDisabled": "#8e8e8e",
"linkExternal": "#33b5e5",
"linkHover": "#ffffff",
"online": "#299c46",
"orange": "#eb7b18",
"orangeDark": "#ff780a",
"pageBg": "#141619",
"pageHeaderBg": "#202226",
"pageHeaderBorder": "#202226",
"panelBg": "#141619",
"panelBorder": "#202226",
"purple": "#9933cc",
"queryGreen": "#74e680",
"queryKeyword": "#66d9ef",
@ -487,29 +501,13 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"red88": "#e02f44",
"redBase": "#e02f44",
"redShade": "#c4162a",
"text": "#c7d0d9",
"textEmphasis": "#ececec",
"textFaint": "#222426",
"textStrong": "#ffffff",
"textWeak": "#8e8e8e",
"variable": "#32d1df",
"warn": "#f79520",
"white": "#ffffff",
"yellow": "#ecbb13",
},
"height": Object {
"lg": "48px",
"md": "32px",
"sm": "24px",
},
"isDark": true,
"isLight": false,
"name": "Grafana Dark",
"panelHeaderHeight": 28,
"panelPadding": 8,
"shadow": Object {
"pageHeader": "inset 0px -4px 14px #1f1f20",
},
"spacing": Object {
"d": "14px",
"formButtonHeight": 32,

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

@ -138,7 +138,7 @@ const FilterPill: React.FC<FilterPillProps> = ({ label, selected, onClick }) =>
className={css`
padding: ${theme.spacing.xxs} ${theme.spacing.sm};
color: white;
background: ${selected ? theme.colors.blueLight : theme.colors.blueShade};
background: ${selected ? theme.palette.blueLight : theme.palette.blueShade};
border-radius: 16px;
display: inline-block;
cursor: pointer;

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

@ -138,7 +138,7 @@ const FilterPill: React.FC<FilterPillProps> = ({ label, selected, onClick }) =>
className={css`
padding: ${theme.spacing.xxs} ${theme.spacing.sm};
color: white;
background: ${selected ? theme.colors.blueLight : theme.colors.blueShade};
background: ${selected ? theme.palette.blueLight : theme.palette.blueShade};
border-radius: 16px;
display: inline-block;
cursor: pointer;

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

@ -159,8 +159,8 @@ const getFieldNameStyles = stylesFactory((theme: GrafanaTheme) => ({
width: 35%;
padding: 0 8px;
border-radius: 3px;
background-color: ${theme.isDark ? theme.colors.grayBlue : theme.colors.gray6};
border: 1px solid ${theme.isDark ? theme.colors.dark6 : theme.colors.gray5};
background-color: ${theme.isDark ? theme.palette.grayBlue : theme.palette.gray6};
border: 1px solid ${theme.isDark ? theme.palette.dark6 : theme.palette.gray5};
`,
right: css`
width: 65%;

6
packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx
View File

@ -11,16 +11,16 @@ const getStyles = (theme: GrafanaTheme, height: number, visible: boolean) => {
padding: ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.md};
border-radius: ${theme.border.radius.md};
border: ${selectThemeVariant(
{ light: `solid 1px ${theme.colors.gray5}`, dark: `solid 1px ${theme.colors.dark1}` },
{ light: `solid 1px ${theme.palette.gray5}`, dark: `solid 1px ${theme.palette.dark1}` },
theme.type
)};
overflow-y: scroll;
overflow-x: hidden;
outline: none;
background: ${selectThemeVariant({ light: theme.colors.white, dark: theme.colors.dark4 }, theme.type)};
background: ${selectThemeVariant({ light: theme.palette.white, dark: theme.palette.dark4 }, theme.type)};
color: ${theme.colors.text};
box-shadow: ${selectThemeVariant(
{ light: `0 5px 10px 0 ${theme.colors.gray5}`, dark: `0 5px 10px 0 ${theme.colors.black}` },
{ light: `0 5px 10px 0 ${theme.palette.gray5}`, dark: `0 5px 10px 0 ${theme.palette.black}` },
theme.type
)};
visibility: ${visible === true ? 'visible' : 'hidden'};

6
packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx
View File

@ -38,13 +38,13 @@ const getStyles = (theme: GrafanaTheme) => ({
typeaheadItemSelected: css`
label: type-ahead-item-selected;
background-color: ${selectThemeVariant({ light: theme.colors.gray6, dark: theme.colors.dark9 }, theme.type)};
background-color: ${selectThemeVariant({ light: theme.palette.gray6, dark: theme.palette.dark9 }, theme.type)};
`,
typeaheadItemMatch: css`
label: type-ahead-item-match;
color: ${theme.colors.yellow};
border-bottom: 1px solid ${theme.colors.yellow};
color: ${theme.palette.yellow};
border-bottom: 1px solid ${theme.palette.yellow};
padding: inherit;
background: inherit;
`,

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

@ -12,84 +12,84 @@ $theme-name: dark;
// New Colors
// -------------------------
$blue-faint: ${theme.colors.blueFaint};
$blue-light: ${theme.colors.blueLight};
$blue-base: ${theme.colors.blueBase};
$blue-shade: ${theme.colors.blueShade};
$red-base: ${theme.colors.redBase};
$red-shade: ${theme.colors.redShade};
$green-base: ${theme.colors.greenBase};
$green-shade: ${theme.colors.greenShade};
$orange-dark: ${theme.colors.orangeDark};
$blue-faint: ${theme.palette.blueFaint};
$blue-light: ${theme.palette.blueLight};
$blue-base: ${theme.palette.blueBase};
$blue-shade: ${theme.palette.blueShade};
$red-base: ${theme.palette.redBase};
$red-shade: ${theme.palette.redShade};
$green-base: ${theme.palette.greenBase};
$green-shade: ${theme.palette.greenShade};
$orange-dark: ${theme.palette.orangeDark};
$gray98: ${theme.colors.gray98};
$gray95: ${theme.colors.gray95};
$gray85: ${theme.colors.gray85};
$gray70: ${theme.colors.gray70};
$gray60: ${theme.colors.gray60};
$gray33: ${theme.colors.gray33};
$gray25: ${theme.colors.gray25};
$gray15: ${theme.colors.gray15};
$gray10: ${theme.colors.gray10};
$gray05: ${theme.colors.gray05};
$gray98: ${theme.palette.gray98};
$gray95: ${theme.palette.gray95};
$gray85: ${theme.palette.gray85};
$gray70: ${theme.palette.gray70};
$gray60: ${theme.palette.gray60};
$gray33: ${theme.palette.gray33};
$gray25: ${theme.palette.gray25};
$gray15: ${theme.palette.gray15};
$gray10: ${theme.palette.gray10};
$gray05: ${theme.palette.gray05};
// Grays
// -------------------------
$black: ${theme.colors.black};
$dark-1: ${theme.colors.dark1};
$dark-2: ${theme.colors.dark2};
$dark-3: ${theme.colors.dark3};
$dark-4: ${theme.colors.dark4};
$dark-5: ${theme.colors.dark5};
$dark-6: ${theme.colors.dark6};
$dark-7: ${theme.colors.dark7};
$dark-8: ${theme.colors.dark8};
$dark-9: ${theme.colors.dark9};
$dark-10: ${theme.colors.dark10};
$gray-1: ${theme.colors.gray1};
$gray-2: ${theme.colors.gray2};
$gray-3: ${theme.colors.gray3};
$gray-4: ${theme.colors.gray4};
$gray-5: ${theme.colors.gray5};
$gray-6: ${theme.colors.gray6};
$black: ${theme.palette.black};
$dark-1: ${theme.palette.dark1};
$dark-2: ${theme.palette.dark2};
$dark-3: ${theme.palette.dark3};
$dark-4: ${theme.palette.dark4};
$dark-5: ${theme.palette.dark5};
$dark-6: ${theme.palette.dark6};
$dark-7: ${theme.palette.dark7};
$dark-8: ${theme.palette.dark8};
$dark-9: ${theme.palette.dark9};
$dark-10: ${theme.palette.dark10};
$gray-1: ${theme.palette.gray1};
$gray-2: ${theme.palette.gray2};
$gray-3: ${theme.palette.gray3};
$gray-4: ${theme.palette.gray4};
$gray-5: ${theme.palette.gray5};
$gray-6: ${theme.palette.gray6};
$gray-blue: ${theme.colors.grayBlue};
$gray-blue: ${theme.palette.grayBlue};
$input-black: ${theme.colors.formInputBg};
$white: ${theme.colors.white};
$white: ${theme.palette.white};
// Accent colors
// -------------------------
$blue: ${theme.colors.blue};
$blue: ${theme.palette.blue};
$red: $red-base;
$yellow: ${theme.colors.yellow};
$orange: ${theme.colors.orange};
$purple: ${theme.colors.purple};
$variable: ${theme.colors.variable};
$yellow: ${theme.palette.yellow};
$orange: ${theme.palette.orange};
$purple: ${theme.palette.purple};
$variable: ${theme.palette.variable};
$brand-primary: ${theme.colors.brandPrimary};
$brand-success: ${theme.colors.brandSuccess};
$brand-warning: ${theme.colors.brandWarning};
$brand-danger: ${theme.colors.brandDanger};
$brand-primary: ${theme.palette.brandPrimary};
$brand-success: ${theme.palette.brandSuccess};
$brand-warning: ${theme.palette.brandWarning};
$brand-danger: ${theme.palette.brandDanger};
$query-red: ${theme.colors.queryRed};
$query-green: ${theme.colors.queryGreen};
$query-purple: ${theme.colors.queryPurple};
$query-orange: ${theme.colors.orange};
$query-keyword: ${theme.colors.queryKeyword};
$query-red: ${theme.palette.queryRed};
$query-green: ${theme.palette.queryGreen};
$query-purple: ${theme.palette.queryPurple};
$query-orange: ${theme.palette.orange};
$query-keyword: ${theme.palette.queryKeyword};
// Status colors
// -------------------------
$online: ${theme.colors.online};
$warn: ${theme.colors.warn};
$critical: ${theme.colors.critical};
$online: ${theme.palette.online};
$warn: ${theme.palette.warn};
$critical: ${theme.palette.critical};
// Scaffolding
// -------------------------
$body-bg: ${theme.colors.bodyBg};
$page-bg: ${theme.colors.pageBg};
$page-bg: ${theme.colors.bodyBg};
$dashboard-bg: ${theme.colors.dashboardBg};
$body-color: ${theme.colors.body};
$text-color: ${theme.colors.text};
$text-color-strong: ${theme.colors.textStrong};
$text-color-weak: ${theme.colors.textWeak};
@ -122,7 +122,7 @@ $hr-border-color: $dark-9;
// -------------------------
$panel-bg: ${theme.colors.panelBg};
$panel-border: 1px solid ${theme.colors.panelBorder};
$panel-header-hover-bg: ${theme.colors.gray15};
$panel-header-hover-bg: ${theme.colors.bg3};
$panel-corner: $panel-bg;
// page header
@ -148,7 +148,6 @@ $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.
// Lists
$list-item-bg: $card-background;
$list-item-hover-bg: $card-background-hover;
$list-item-link-color: $text-color;
$list-item-shadow: $card-shadow;
$empty-list-cta-bg: $gray-blue;
@ -204,13 +203,13 @@ $input-bg: $input-black;
$input-bg-disabled: $dark-6;
$input-color: ${theme.colors.formInputText};
$input-border-color: ${theme.colors.gray15};
$input-border-color: ${theme.palette.gray15};
$input-box-shadow: inset 1px 0px 4px 0px rgba(150, 150, 150, 0.1);
$input-border-focus: ${theme.colors.blue95};
$input-border-focus: ${theme.palette.blue95};
$input-box-shadow-focus: $blue-light !default;
$input-color-placeholder: ${theme.colors.formInputPlaceholderText};
$input-label-bg: ${theme.colors.gray15};
$input-label-border-color: ${theme.colors.gray15};
$input-label-bg: ${theme.palette.gray15};
$input-label-border-color: ${theme.palette.gray15};
$input-color-select-arrow: $white;
// Search
@ -226,12 +225,11 @@ $typeahead-selected-color: $yellow;
$dropdownBackground: $panel-bg;
$dropdownBorder: ${theme.colors.panelBorder};
$dropdownDividerTop: transparent;
$dropdownDividerBottom: ${theme.colors.gray25};
$dropdownDividerBottom: ${theme.palette.gray25};
$dropdownLinkColor: $text-color;
$dropdownLinkColor: $link-color;
$dropdownLinkColorHover: $white;
$dropdownLinkColorActive: $white;
$dropdownLinkBackgroundHover: $dark-9;
// Horizontal forms & lists
@ -253,7 +251,7 @@ $side-menu-bg-mobile: $panel-bg;
$side-menu-border: none;
$side-menu-item-hover-bg: $dark-3;
$side-menu-shadow: 0 0 20px black;
$side-menu-link-color: $link-color;
$side-menu-link-color: ${theme.palette.gray70};
// Menu dropdowns
// -------------------------

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

@ -12,77 +12,77 @@ $theme-name: light;
// New Colors
// -------------------------
$blue-faint: ${theme.colors.blueFaint};
$blue-light: ${theme.colors.blueLight};
$blue-base: ${theme.colors.blueBase};
$blue-shade: ${theme.colors.blueShade};
$red-base: ${theme.colors.redBase};
$red-shade: ${theme.colors.redShade};
$green-base: ${theme.colors.greenBase};
$green-shade: ${theme.colors.greenShade};
$orange-dark: ${theme.colors.orangeDark};
$blue-faint: ${theme.palette.blueFaint};
$blue-light: ${theme.palette.blueLight};
$blue-base: ${theme.palette.blueBase};
$blue-shade: ${theme.palette.blueShade};
$red-base: ${theme.palette.redBase};
$red-shade: ${theme.palette.redShade};
$green-base: ${theme.palette.greenBase};
$green-shade: ${theme.palette.greenShade};
$orange-dark: ${theme.palette.orangeDark};
$gray98: ${theme.colors.gray98};
$gray95: ${theme.colors.gray95};
$gray85: ${theme.colors.gray85};
$gray70: ${theme.colors.gray70};
$gray60: ${theme.colors.gray60};
$gray33: ${theme.colors.gray33};
$gray25: ${theme.colors.gray25};
$gray15: ${theme.colors.gray15};
$gray10: ${theme.colors.gray10};
$gray05: ${theme.colors.gray05};
$gray98: ${theme.palette.gray98};
$gray95: ${theme.palette.gray95};
$gray85: ${theme.palette.gray85};
$gray70: ${theme.palette.gray70};
$gray60: ${theme.palette.gray60};
$gray33: ${theme.palette.gray33};
$gray25: ${theme.palette.gray25};
$gray15: ${theme.palette.gray15};
$gray10: ${theme.palette.gray10};
$gray05: ${theme.palette.gray05};
// Grays
// -------------------------
$black: ${theme.colors.black};
$black: ${theme.palette.black};
$dark-1: ${theme.colors.dark1};
$dark-2: ${theme.colors.dark2};
$dark-4: ${theme.colors.dark4};
$dark-10: ${theme.colors.dark10};
$gray-1: ${theme.colors.gray1};
$gray-2: ${theme.colors.gray2};
$gray-3: ${theme.colors.gray3};
$gray-4: ${theme.colors.gray4};
$gray-5: ${theme.colors.gray5};
$gray-6: ${theme.colors.gray6};
$gray-7: ${theme.colors.gray7};
$dark-1: ${theme.palette.dark1};
$dark-2: ${theme.palette.dark2};
$dark-4: ${theme.palette.dark4};
$dark-10: ${theme.palette.dark10};
$gray-1: ${theme.palette.gray1};
$gray-2: ${theme.palette.gray2};
$gray-3: ${theme.palette.gray3};
$gray-4: ${theme.palette.gray4};
$gray-5: ${theme.palette.gray5};
$gray-6: ${theme.palette.gray6};
$gray-7: ${theme.palette.gray7};
$white: ${theme.colors.white};
$white: ${theme.palette.white};
// Accent colors
// -------------------------
$blue: ${theme.colors.blue};
$blue: ${theme.palette.blue};
$red: $red-base;
$yellow: ${theme.colors.yellow};
$orange: ${theme.colors.orange};
$purple: ${theme.colors.purple};
$variable: ${theme.colors.variable};
$yellow: ${theme.palette.yellow};
$orange: ${theme.palette.orange};
$purple: ${theme.palette.purple};
$variable: ${theme.palette.variable};
$brand-primary: ${theme.colors.brandPrimary};
$brand-success: ${theme.colors.brandSuccess};
$brand-warning: ${theme.colors.brandWarning};
$brand-danger: ${theme.colors.brandDanger};
$brand-primary: ${theme.palette.brandPrimary};
$brand-success: ${theme.palette.brandSuccess};
$brand-warning: ${theme.palette.brandWarning};
$brand-danger: ${theme.palette.brandDanger};
$query-red: ${theme.colors.queryRed};
$query-green: ${theme.colors.queryGreen};
$query-purple: ${theme.colors.queryPurple};
$query-orange: ${theme.colors.orange};
$query-keyword: ${theme.colors.queryKeyword};
$query-red: ${theme.palette.queryRed};
$query-green: ${theme.palette.queryGreen};
$query-purple: ${theme.palette.queryPurple};
$query-orange: ${theme.palette.orange};
$query-keyword: ${theme.palette.queryKeyword};
// Status colors
// -------------------------
$online: ${theme.colors.online};
$warn: ${theme.colors.warn};
$critical: ${theme.colors.critical};
$online: ${theme.palette.online};
$warn: ${theme.palette.warn};
$critical: ${theme.palette.critical};
// Scaffolding
// -------------------------
$body-bg: ${theme.colors.bodyBg};
$page-bg: ${theme.colors.pageBg};
$page-bg: ${theme.colors.bodyBg};
$dashboard-bg: ${theme.colors.dashboardBg};
$body-color: ${theme.colors.body};
$text-color: ${theme.colors.text};
$text-color-strong: ${theme.colors.textStrong};
$text-color-weak: ${theme.colors.textWeak};
@ -140,7 +140,6 @@ $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.
// Lists
$list-item-bg: $gray-7;
$list-item-hover-bg: $gray-6;
$list-item-link-color: $text-color;
$list-item-shadow: $card-shadow;
$empty-list-cta-bg: $gray-6;
@ -196,14 +195,14 @@ $input-bg: $white;
$input-bg-disabled: $gray-5;
$input-color: ${theme.colors.formInputText};
$input-border-color: ${theme.colors.gray95};
$input-border-color: ${theme.palette.gray95};
$input-box-shadow: none;
$input-border-focus: ${theme.colors.blue95};
$input-box-shadow-focus: ${theme.colors.blue95};
$input-border-focus: ${theme.palette.blue95};
$input-box-shadow-focus: ${theme.palette.blue95};
$input-color-placeholder: ${theme.colors.formInputPlaceholderText};
$input-label-bg: ${theme.colors.gray95};
$input-label-border-color: ${theme.colors.gray95};
$input-color-select-arrow: ${theme.colors.gray60};
$input-label-bg: ${theme.palette.gray95};
$input-label-border-color: ${theme.palette.gray95};
$input-color-select-arrow: ${theme.palette.gray60};
// search
$search-shadow: 0 1px 5px 0 $gray-5;
@ -240,12 +239,12 @@ $navbar-button-border: $gray-4;
// Sidemenu
// -------------------------
$side-menu-bg: ${theme.colors.gray15};
$side-menu-border: 1px solid ${theme.colors.gray25};
$side-menu-bg: ${theme.palette.gray15};
$side-menu-border: 1px solid ${theme.palette.gray25};
$side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
$side-menu-item-hover-bg: ${theme.colors.gray25};
$side-menu-item-hover-bg: ${theme.palette.gray25};
$side-menu-shadow: 5px 0px 10px -5px $gray-1;
$side-menu-link-color: $gray-6;
$side-menu-link-color: $gray-4;
// Menu dropdowns
// -------------------------

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

@ -40,15 +40,57 @@ const basicColors = {
orangeDark: '#ff780a',
};
const backgrounds = {
bg1: basicColors.gray10,
bg2: basicColors.gray15,
bg3: basicColors.gray25,
dashboardBg: basicColors.gray05,
};
const borders = {
border1: basicColors.gray15,
border2: basicColors.gray25,
};
const form = {
// Next-gen forms functional colors
formLabel: basicColors.gray70,
formDescription: basicColors.gray60,
formLegend: basicColors.gray85,
formInputBg: basicColors.gray05,
formInputBgDisabled: basicColors.gray10,
formInputBorder: basicColors.gray25,
formInputBorderHover: basicColors.gray33,
formInputBorderActive: basicColors.blue95,
formInputBorderInvalid: basicColors.red88,
formInputPlaceholderText: basicColors.gray1,
formInputText: basicColors.gray85,
formInputDisabledText: basicColors.gray70,
formInputTextStrong: basicColors.gray85,
formInputTextWhite: basicColors.white,
formFocusOutline: basicColors.blueShade,
formValidationMessageText: basicColors.white,
formValidationMessageBg: basicColors.red88,
formSwitchBg: basicColors.gray25,
formSwitchBgActive: basicColors.blueLight,
formSwitchBgHover: basicColors.gray33,
formSwitchBgActiveHover: basicColors.blueBase,
formSwitchBgDisabled: basicColors.gray25,
formSwitchDot: basicColors.gray15,
formCheckboxBg: basicColors.dark5,
formCheckboxBgChecked: basicColors.blueLight,
formCheckboxBgCheckedHover: basicColors.blueBase,
formCheckboxCheckmark: basicColors.gray25,
};
const darkTheme: GrafanaTheme = {
...defaultTheme,
type: GrafanaThemeType.Dark,
isDark: true,
isLight: false,
name: 'Grafana Dark',
colors: {
palette: {
...basicColors,
inputBlack: basicColors.gray05,
brandPrimary: basicColors.orange,
brandSuccess: basicColors.greenBase,
brandWarning: basicColors.orange,
@ -61,66 +103,34 @@ const darkTheme: GrafanaTheme = {
online: basicColors.greenBase,
warn: '#f79520',
critical: basicColors.redBase,
},
colors: {
...backgrounds,
...borders,
...form,
body: basicColors.gray4,
bodyBg: backgrounds.bg1,
panelBg: backgrounds.bg1,
pageHeaderBg: backgrounds.bg2,
pageHeaderBorder: borders.border1,
panelBorder: borders.border1,
dropdownBg: form.formInputBg,
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,
link: basicColors.gray4,
linkDisabled: basicColors.gray2,
linkHover: basicColors.white,
linkExternal: basicColors.blue,
headingColor: basicColors.gray4,
// Backgrounds
bodyBg: basicColors.gray05,
pageBg: basicColors.gray10,
pageHeaderBg: basicColors.gray15,
panelBg: basicColors.gray10,
// Borders
pageHeaderBorder: basicColors.gray15,
panelBorder: basicColors.gray15,
// Next-gen forms functional colors
formLabel: basicColors.gray70,
formDescription: basicColors.gray60,
formLegend: basicColors.gray85,
formInputBg: basicColors.gray05,
formInputBgDisabled: basicColors.gray10,
formInputBorder: basicColors.gray25,
formInputBorderHover: basicColors.gray33,
formInputBorderActive: basicColors.blue95,
formInputBorderInvalid: basicColors.red88,
formInputPlaceholderText: basicColors.gray1,
formInputText: basicColors.gray85,
formInputDisabledText: basicColors.gray70,
formInputTextStrong: basicColors.gray85,
formInputTextWhite: basicColors.white,
formFocusOutline: basicColors.blueShade,
formValidationMessageText: basicColors.white,
formValidationMessageBg: basicColors.red88,
formSwitchBg: basicColors.gray25,
formSwitchBgActive: basicColors.blueLight,
formSwitchBgHover: basicColors.gray33,
formSwitchBgActiveHover: basicColors.blueBase,
formSwitchBgDisabled: basicColors.gray25,
formSwitchDot: basicColors.gray15,
formCheckboxBg: basicColors.dark5,
formCheckboxBgChecked: basicColors.blueLight,
formCheckboxBgCheckedHover: basicColors.blueBase,
formCheckboxCheckmark: basicColors.gray25,
},
background: {
dropdown: basicColors.dark3,
scrollbar: basicColors.dark9,
scrollbar2: basicColors.dark9,
pageHeader: `linear-gradient(90deg, ${basicColors.dark7}, ${basicColors.black})`,
},
shadow: {
pageHeader: `inset 0px -4px 14px ${basicColors.dark3}`,
},
};

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

@ -20,8 +20,8 @@ const basicColors = {
gray3: '#acb6bf',
gray4: '#c7d0d9',
gray5: '#dde4ed',
gray6: '#e9edf2',
gray7: '#f7f8fa',
gray6: '#e9edf2', // same as gray95
gray7: '#f7f8fa', // same as gray98
grayBlue: '#212327', // not used in light theme
blueBase: '#3274d9',
blueShade: '#1f60c4',
@ -40,16 +40,57 @@ const basicColors = {
orangeDark: '#ed5700',
};
const backgrounds = {
bg1: basicColors.white,
bg2: basicColors.gray98,
bg3: basicColors.gray95,
dashboardBg: basicColors.gray98,
};
const borders = {
border1: basicColors.gray95,
border2: basicColors.gray85,
};
const form = {
formLabel: basicColors.gray33,
formDescription: basicColors.gray33,
formLegend: basicColors.gray25,
formInputBg: basicColors.white,
formInputBgDisabled: basicColors.gray95,
formInputBorder: basicColors.gray85,
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,
formValidationMessageText: basicColors.white,
formValidationMessageBg: basicColors.red88,
formSwitchBg: basicColors.gray85,
formSwitchBgActive: basicColors.blueShade,
formSwitchBgHover: basicColors.gray3,
formSwitchBgActiveHover: basicColors.blueBase,
formSwitchBgDisabled: basicColors.gray4,
formSwitchDot: basicColors.white,
formCheckboxBg: basicColors.white,
formCheckboxBgChecked: basicColors.blueShade,
formCheckboxBgCheckedHover: basicColors.blueBase,
formCheckboxCheckmark: basicColors.white,
};
const lightTheme: GrafanaTheme = {
...defaultTheme,
type: GrafanaThemeType.Light,
isDark: false,
isLight: true,
name: 'Grafana Light',
colors: {
palette: {
...basicColors,
variable: basicColors.blue,
inputBlack: '#09090b',
brandPrimary: basicColors.orange,
brandSuccess: basicColors.greenBase,
brandWarning: basicColors.orange,
@ -62,15 +103,22 @@ const lightTheme: GrafanaTheme = {
online: basicColors.greenShade,
warn: '#f79520',
critical: basicColors.redShade,
},
colors: {
...backgrounds,
...borders,
// Backgrounds
bodyBg: basicColors.gray7,
pageBg: basicColors.white,
pageHeaderBg: basicColors.gray95,
panelBg: basicColors.white,
bodyBg: backgrounds.bg1,
panelBg: backgrounds.bg1,
pageHeaderBg: backgrounds.bg2,
pageHeaderBorder: borders.border1,
panelBorder: borders.border1,
dropdownBg: form.formInputBg,
dropdownShadow: basicColors.gray3,
dropdownOptionHoverBg: backgrounds.bg2,
// Text colors
body: basicColors.gray1,
text: basicColors.gray1,
textStrong: basicColors.dark2,
textWeak: basicColors.gray2,
@ -84,47 +132,7 @@ const lightTheme: GrafanaTheme = {
linkExternal: basicColors.blueLight,
headingColor: basicColors.gray1,
// Borders
panelBorder: basicColors.gray95,
pageHeaderBorder: basicColors.gray4,
// Next-gen forms functional colors
formLabel: basicColors.gray33,
formDescription: basicColors.gray33,
formLegend: basicColors.gray25,
formInputBg: basicColors.white,
formInputBgDisabled: basicColors.gray95,
formInputBorder: basicColors.gray85,
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,
formValidationMessageText: basicColors.white,
formValidationMessageBg: basicColors.red88,
formSwitchBg: basicColors.gray85,
formSwitchBgActive: basicColors.blueShade,
formSwitchBgHover: basicColors.gray3,
formSwitchBgActiveHover: basicColors.blueBase,
formSwitchBgDisabled: basicColors.gray4,
formSwitchDot: basicColors.white,
formCheckboxBg: basicColors.white,
formCheckboxBgChecked: basicColors.blueShade,
formCheckboxBgCheckedHover: basicColors.blueBase,
formCheckboxCheckmark: basicColors.white,
},
background: {
dropdown: basicColors.white,
scrollbar: basicColors.gray5,
scrollbar2: basicColors.gray5,
pageHeader: `linear-gradient(90deg, ${basicColors.white}, ${basicColors.gray7})`,
},
shadow: {
pageHeader: `inset 0px -3px 10px ${basicColors.gray6}`,
...form,
},
};

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

@ -6,9 +6,9 @@ import { stylesFactory } from './stylesFactory';
export function cardChrome(theme: GrafanaTheme): string {
if (theme.isDark) {
return `
background: linear-gradient(135deg, ${theme.colors.dark8}, ${theme.colors.dark6});
background: linear-gradient(135deg, ${theme.palette.dark8}, ${theme.palette.dark6});
&:hover {
background: linear-gradient(135deg, ${theme.colors.dark9}, ${theme.colors.dark6});
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};
@ -16,9 +16,9 @@ export function cardChrome(theme: GrafanaTheme): string {
}
return `
background: linear-gradient(135deg, ${theme.colors.gray6}, ${theme.colors.gray7});
background: linear-gradient(135deg, ${theme.palette.gray6}, ${theme.palette.gray7});
&:hover {
background: linear-gradient(135deg, ${theme.colors.gray7}, ${theme.colors.gray6});
background: linear-gradient(135deg, ${theme.palette.gray7}, ${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};
@ -28,9 +28,9 @@ export function cardChrome(theme: GrafanaTheme): string {
export function listItem(theme: GrafanaTheme): string {
if (theme.isDark) {
return `
background: ${theme.colors.dark7};
background: ${theme.palette.dark7};
&:hover {
background: ${theme.colors.dark9};
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};
@ -38,9 +38,9 @@ export function listItem(theme: GrafanaTheme): string {
}
return `
background: ${theme.colors.gray7};
background: ${theme.palette.gray7};
&:hover {
background: ${theme.colors.gray6};
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};
@ -49,7 +49,7 @@ export function listItem(theme: GrafanaTheme): string {
export function listItemSelected(theme: GrafanaTheme): string {
return `
background: ${theme.isLight ? theme.colors.gray6 : theme.colors.dark9};
background: ${theme.isLight ? theme.palette.gray6 : theme.palette.dark9};
color: ${theme.colors.textStrong};
`;
}
@ -57,22 +57,22 @@ export function listItemSelected(theme: GrafanaTheme): string {
export const panelEditorNestedListStyles = stylesFactory((theme: GrafanaTheme) => {
const borderColor = selectThemeVariant(
{
light: theme.colors.gray85,
dark: theme.colors.dark9,
light: theme.palette.gray85,
dark: theme.palette.dark9,
},
theme.type
);
const shadow = selectThemeVariant(
{
light: theme.colors.gray85,
dark: theme.colors.black,
light: theme.palette.gray85,
dark: theme.palette.black,
},
theme.type
);
const headerBg = selectThemeVariant(
{
light: theme.colors.white,
dark: theme.colors.dark1,
light: theme.palette.white,
dark: theme.palette.dark1,
},
theme.type
);

4
packages/grafana-ui/src/utils/storybook/CombinationsRowRenderer.tsx
View File

@ -42,8 +42,8 @@ const CombinationsRowRenderer: React.FunctionComponent<CombinationsRowRendererPr
const borderColor = selectThemeVariant(
{
dark: theme.colors.dark8,
light: theme.colors.gray5,
dark: theme.palette.dark8,
light: theme.palette.gray5,
},
theme.type
);

10
public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
View File

@ -74,7 +74,7 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
};
const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
const borderColor = theme.isLight ? theme.colors.gray85 : theme.colors.gray25;
const borderColor = theme.colors.border2;
return {
wrapper: css`
@ -84,7 +84,7 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
padding: ${theme.spacing.sm};
border-radius: ${theme.border.radius.sm};
border: 1px solid ${borderColor};
background: ${theme.colors.pageBg};
background: ${theme.colors.bodyBg};
`,
collapseIcon: css`
color: ${theme.colors.textWeak};
@ -97,15 +97,15 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
title: css`
font-weight: ${theme.typography.weight.semibold};
color: ${theme.colors.blue95};
color: ${theme.palette.blue95};
margin-left: ${theme.spacing.sm};
`,
content: css`
border: 1px solid ${borderColor};
margin-top: -1px;
background: ${theme.colors.pageBg};
background: ${theme.colors.bodyBg};
margin-left: ${theme.spacing.xl};
border-top: 1px solid ${theme.colors.pageBg};
border-top: 1px solid ${theme.colors.bodyBg};
border-radis: 0 ${theme.border.radius.sm};
padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.lg};
`,

2
public/app/features/admin/LicenseChrome.tsx
View File

@ -7,7 +7,7 @@ const title = { fontWeight: 500, fontSize: '26px', lineHeight: '123%' };
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const backgroundUrl = theme.isDark ? 'public/img/licensing/header_dark.svg' : 'public/img/licensing/header_light.svg';
const footerBg = theme.isDark ? theme.colors.dark9 : theme.colors.gray6;
const footerBg = theme.isDark ? theme.palette.dark9 : theme.palette.gray6;
return {
container: css`

2
public/app/features/admin/UserOrgs.tsx
View File

@ -79,7 +79,7 @@ const getOrgRowStyles = stylesFactory((theme: GrafanaTheme) => {
removeButton: css`
margin-right: 0.6rem;
text-decoration: underline;
color: ${theme.colors.blue95};
color: ${theme.palette.blue95};
`,
label: css`
font-weight: 500;

3
public/app/features/dashboard/components/Inspector/InspectHeader.tsx
View File

@ -56,7 +56,8 @@ export const InspectHeader: FC<Props> = ({
};
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const headerBackground = theme.isLight ? theme.colors.gray95 : theme.colors.gray15;
const headerBackground = theme.colors.bg2;
return {
header: css`
background-color: ${headerBackground};

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

@ -47,16 +47,16 @@ export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> =
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const borderColor = selectThemeVariant(
{
light: theme.colors.gray85,
dark: theme.colors.dark9,
light: theme.palette.gray85,
dark: theme.palette.dark9,
},
theme.type
);
const highlightColor = selectThemeVariant(
{
light: theme.colors.blueLight,
dark: theme.colors.blueShade,
light: theme.palette.blueLight,
dark: theme.palette.blueShade,
},
theme.type
);

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

@ -269,7 +269,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
flex-direction: column;
flex-grow: 1;
min-height: 0;
background: ${theme.colors.pageBg};
background: ${theme.colors.bodyBg};
border-left: 1px solid ${theme.colors.pageHeaderBorder};
`,
tabsButton: css``,

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

@ -127,16 +127,16 @@ export const OverrideEditor: React.FC<OverrideEditorProps> = ({ data, override,
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const borderColor = selectThemeVariant(
{
light: theme.colors.gray85,
dark: theme.colors.dark9,
light: theme.palette.gray85,
dark: theme.palette.dark9,
},
theme.type
);
const shadow = selectThemeVariant(
{
light: theme.colors.gray85,
dark: theme.colors.black,
light: theme.palette.gray85,
dark: theme.palette.black,
},
theme.type
);

4
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.colors.blueLight;
const handleColor = theme.palette.blueLight;
const paneSpaceing = theme.spacing.md;
const resizer = css`
@ -376,7 +376,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
left: 0;
right: 0;
bottom: 0;
background: ${theme.colors.bodyBg};
background: ${theme.colors.dashboardBg};
display: flex;
flex-direction: column;
`,

4
public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx
View File

@ -90,7 +90,7 @@ export const VisualizationTabUnconnected: FC<Props> = ({ panel, plugin, changePa
const getStyles = stylesFactory((theme: GrafanaTheme) => {
return {
icon: css`
color: ${theme.colors.gray33};
color: ${theme.palette.gray33};
`,
wrapper: css`
display: flex;
@ -104,7 +104,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
flex-shrink: 1;
`,
searchClear: css`
color: ${theme.colors.gray60};
color: ${theme.palette.gray60};
cursor: pointer;
`,
visList: css`

2
public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
View File

@ -77,7 +77,7 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
const getStyles = stylesFactory((theme: GrafanaTheme) => {
return {
json: css`
background: ${theme.isLight ? theme.colors.gray7 : theme.colors.black};
background: ${theme.isLight ? theme.palette.gray7 : theme.palette.black};
padding: ${theme.spacing.sm} 0 ${theme.spacing.sm} ${theme.spacing.md};
height: 400px;
`,

10
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.colors.blue};
color: ${theme.palette.blue};
`,
iconRow: css`
display: flex;
@ -107,8 +107,8 @@ const getStyles = (theme: GrafanaTheme) => ({
text-align: center;
font-family: ${theme.typography.fontFamily.monospace};
font-size: ${theme.typography.size.sm};
color: ${theme.colors.blueBase};
border-bottom: 1px dashed ${theme.colors.gray15};
color: ${theme.palette.blueBase};
border-bottom: 1px dashed ${theme.palette.gray15};
flex-grow: 0;
flex-shrink: 1;
`,
@ -116,8 +116,8 @@ const getStyles = (theme: GrafanaTheme) => ({
debug: css`
margin-top: ${theme.spacing.md};
padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm};
border: 1px dashed ${theme.colors.gray15};
background: ${theme.colors.gray05};
border: 1px dashed ${theme.palette.gray15};
background: ${theme.palette.gray05};
border-radius: ${theme.border.radius.sm};
width: 100%;
height: 300px;

2
public/app/features/dashboard/panel_editor/QueryEditorRowTitle.tsx
View File

@ -42,7 +42,7 @@ const getQueryEditorRowTitleStyles = stylesFactory((theme: GrafanaTheme) => {
return {
refId: css`
font-weight: ${theme.typography.weight.semibold};
color: ${theme.colors.blue95};
color: ${theme.palette.blue95};
cursor: pointer;
display: flex;
align-items: center;

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

@ -28,11 +28,11 @@ const VizTypePickerPlugin: React.FC<Props> = ({ isCurrent, plugin, onClick, disa
};
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const itemBorder = `1px solid ${theme.isLight ? theme.colors.gray85 : theme.colors.gray25}`;
const itemBorder = `1px solid ${theme.isLight ? theme.palette.gray85 : theme.palette.gray25}`;
return {
item: css`
background: ${theme.isLight ? theme.colors.gray98 : theme.colors.gray15};
background: ${theme.isLight ? theme.palette.gray98 : theme.palette.gray15};
border: ${itemBorder};
border-radius: 3px;
height: 100px;
@ -49,13 +49,13 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
padding-bottom: 6px;
&:hover {
box-shadow: 0 0 4px ${theme.colors.blueLight};
border: 1px solid ${theme.colors.blueLight};
box-shadow: 0 0 4px ${theme.palette.blueLight};
border: 1px solid ${theme.palette.blueLight};
}
`,
current: css`
box-shadow: 0 0 6px ${theme.colors.orange} !important;
border: 1px solid ${theme.colors.orange} !important;
box-shadow: 0 0 6px ${theme.palette.orange} !important;
border: 1px solid ${theme.palette.orange} !important;
`,
disabled: css`
opacity: 0.2;

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

@ -24,11 +24,11 @@ const getStyles = (theme: GrafanaTheme) => ({
padding: 10px 0;
border-radius: ${theme.border.radius.md};
text-align: center;
background-color: ${selectThemeVariant({ light: theme.colors.white, dark: theme.colors.dark4 }, theme.type)};
background-color: ${selectThemeVariant({ light: theme.palette.white, dark: theme.palette.dark4 }, theme.type)};
`,
disclaimerIcon: css`
label: disclaimer-icon;
color: ${theme.colors.yellow};
color: ${theme.palette.yellow};
margin-right: ${theme.spacing.xs};
`,
showAllTimeSeries: css`

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.colors.blueLight)
background-color: ${tinycolor(theme.palette.blueLight)
.setAlpha(0.25)
.toString()};
animation: fade 1s ease-out 1s 1 normal forwards;
@keyframes fade {
from {
background-color: ${tinycolor(theme.colors.blueLight)
background-color: ${tinycolor(theme.palette.blueLight)
.setAlpha(0.25)
.toString()};
}

20
public/app/features/explore/LiveTailButton.tsx
View File

@ -10,11 +10,11 @@ import { GrafanaTheme } from '@grafana/data';
import { ResponsiveButton } from './ResponsiveButton';
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const bgColor = selectThemeVariant({ light: theme.colors.gray5, dark: theme.colors.dark1 }, theme.type);
const orangeLighter = tinycolor(theme.colors.orangeDark)
const bgColor = selectThemeVariant({ light: theme.palette.gray5, dark: theme.palette.dark1 }, theme.type);
const orangeLighter = tinycolor(theme.palette.orangeDark)
.lighten(10)
.toString();
const pulseTextColor = tinycolor(theme.colors.orangeDark)
const pulseTextColor = tinycolor(theme.palette.orangeDark)
.desaturate(90)
.toString();
return {
@ -28,13 +28,13 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
`,
isLive: css`
label: isLive;
border-color: ${theme.colors.orangeDark};
color: ${theme.colors.orangeDark};
border-color: ${theme.palette.orangeDark};
color: ${theme.palette.orangeDark};
background: transparent;
&:focus {
background: transparent;
border-color: ${theme.colors.orangeDark};
color: ${theme.colors.orangeDark};
border-color: ${theme.palette.orangeDark};
color: ${theme.palette.orangeDark};
}
&:hover {
background-color: ${bgColor};
@ -47,12 +47,12 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
`,
isPaused: css`
label: isPaused;
border-color: ${theme.colors.orangeDark};
border-color: ${theme.palette.orangeDark};
background: transparent;
animation: pulse 3s ease-out 0s infinite normal forwards;
&:focus {
background: transparent;
border-color: ${theme.colors.orangeDark};
border-color: ${theme.palette.orangeDark};
}
&:hover {
background-color: ${bgColor};
@ -66,7 +66,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
color: ${pulseTextColor};
}
50% {
color: ${theme.colors.orangeDark};
color: ${theme.palette.orangeDark};
}
100% {
color: ${pulseTextColor};

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

@ -50,8 +50,8 @@ interface RichHistoryState {
}
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const borderColor = theme.isLight ? theme.colors.gray5 : theme.colors.dark6;
const tabContentBg = theme.colors.pageBg;
const borderColor = theme.isLight ? theme.palette.gray5 : theme.palette.dark6;
const tabContentBg = theme.colors.bodyBg;
return {
container: css`
height: 100%;

12
public/app/features/explore/RichHistory/RichHistoryCard.tsx
View File

@ -27,16 +27,16 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
const rigtColumnWidth = '240px';
const rigtColumnContentWidth = '170px';
const borderColor = theme.isLight ? theme.colors.gray5 : theme.colors.gray25;
const borderColor = theme.isLight ? theme.palette.gray5 : theme.palette.gray25;
/* If datasource was removed, card will have inactive color */
const cardColor = theme.isLight
? isRemoved
? theme.colors.gray95
: theme.colors.white
? theme.palette.gray95
: theme.palette.white
: isRemoved
? theme.colors.gray15
: theme.colors.gray05;
? theme.palette.gray15
: theme.palette.gray05;
return {
queryCard: css`
@ -47,7 +47,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
background-color: ${cardColor};
border-radius: ${theme.border.radius.sm};
.starred {
color: ${theme.colors.orange};
color: ${theme.palette.orange};
}
`,
cardRow: css`

12
public/app/features/explore/RichHistory/RichHistoryContainer.tsx
View File

@ -22,12 +22,12 @@ import { RichHistory, Tabs } from './RichHistory';
import { deleteRichHistory } from '../state/actions';
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const containerBackground = theme.isLight ? theme.colors.gray95 : theme.colors.gray15;
const containerBorderColor = theme.isLight ? theme.colors.gray5 : theme.colors.dark6;
const handleBackground = theme.isLight ? theme.colors.white : theme.colors.gray15;
const handleDots = theme.isLight ? theme.colors.gray85 : theme.colors.gray33;
const handleBackgroundHover = theme.isLight ? theme.colors.gray85 : theme.colors.gray33;
const handleDotsHover = theme.isLight ? theme.colors.gray70 : theme.colors.dark7;
const containerBackground = theme.isLight ? theme.palette.gray95 : theme.palette.gray15;
const containerBorderColor = theme.isLight ? theme.palette.gray5 : theme.palette.dark6;
const handleBackground = theme.isLight ? theme.palette.white : theme.palette.gray15;
const handleDots = theme.isLight ? theme.palette.gray85 : theme.palette.gray33;
const handleBackgroundHover = theme.isLight ? theme.palette.gray85 : theme.palette.gray33;
const handleDotsHover = theme.isLight ? theme.palette.gray70 : theme.palette.dark7;
return {
container: css`

2
public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
View File

@ -37,7 +37,7 @@ export interface Props {
}
const getStyles = stylesFactory((theme: GrafanaTheme, height: number) => {
const bgColor = theme.isLight ? theme.colors.gray5 : theme.colors.dark4;
const bgColor = theme.isLight ? theme.palette.gray5 : theme.palette.dark4;
/* 134px is based on the width of the Query history tabs bar, so the content is aligned to right side of the tab */
const cardWidth = '100% - 134px';

2
public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
View File

@ -29,7 +29,7 @@ export interface Props {
}
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const bgColor = theme.isLight ? theme.colors.gray5 : theme.colors.dark4;
const bgColor = theme.isLight ? theme.palette.gray5 : theme.palette.dark4;
return {
container: css`
display: flex;

2
public/app/features/search/components/DashboardSearch.tsx
View File

@ -193,7 +193,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
&:hover {
cursor: pointer;
color: ${theme.colors.white};
color: ${theme.palette.white};
}
@media only screen and (max-width: ${theme.breakpoints.md}) {

19
public/app/features/search/components/SearchField.tsx
View File

@ -17,18 +17,19 @@ const getSearchFieldStyles = (theme: GrafanaTheme) => ({
width: 100%;
height: 55px; /* this variable is not part of GrafanaTheme yet*/
display: flex;
background-color: ${theme.colors.formInputBg};
background-color: ${theme.colors.panelBg};
border-bottom: 1px solid ${theme.colors.panelBorder};
position: relative;
box-shadow: 0 0 10px ${theme.isLight ? theme.colors.gray85 : theme.colors.black};
align-items: center;
`,
input: css`
max-width: 653px;
padding: ${theme.spacing.md} ${theme.spacing.md} ${theme.spacing.sm} ${theme.spacing.md};
padding: 0 ${theme.spacing.md};
height: 51px;
box-sizing: border-box;
outline: none;
background-color: ${theme.colors.formInputBg};
background: ${theme.colors.formInputBg};
background-color: ${theme.colors.panelBg};
background: ${theme.colors.panelBg};
flex-grow: 10;
`,
spacer: css`
@ -37,10 +38,8 @@ const getSearchFieldStyles = (theme: GrafanaTheme) => ({
icon: cx(
css`
color: ${theme.colors.textWeak};
font-size: ${theme.typography.size.lg};
padding: ${theme.spacing.md} ${theme.spacing.md} ${theme.spacing.sm} ${theme.spacing.md};
`,
'pointer'
padding: 0 ${theme.spacing.md};
`
),
});
@ -54,7 +53,7 @@ export const SearchField: React.FunctionComponent<SearchFieldProps> = ({ query,
{/* based on it GrafanaCtrl (L256) decides whether or not hide search */}
<div className={`${styles.wrapper} search-field-wrapper`}>
<div className={styles.icon}>
<Icon name="search" />
<Icon name="search" size="lg" />
</div>
<input

2
public/app/features/search/components/SearchResults.tsx
View File

@ -82,7 +82,7 @@ const getSectionStyles = stylesFactory((theme: GrafanaTheme) => {
`,
section: css`
background: ${theme.colors.panelBg};
border-bottom: solid 1px ${theme.isLight ? theme.colors.gray95 : theme.colors.gray25};
border-bottom: solid 1px ${theme.isLight ? theme.palette.gray95 : theme.palette.gray25};
padding: 0px 4px 4px 4px;
margin-bottom: 3px;
`,

7
public/app/features/search/components/SearchWrapper.tsx
View File

@ -30,10 +30,5 @@ export const SearchWrapper: FC = () => {
};
}, [isOpen]);
return isOpen ? (
<>
<div className="search-backdrop" />
<DashboardSearch onCloseSearch={() => setIsOpen(false)} payload={payload} />
</>
) : null;
return isOpen ? <DashboardSearch onCloseSearch={() => setIsOpen(false)} payload={payload} /> : null;
};

12
public/app/plugins/datasource/graphite/MetricTankMetaInspector.tsx
View File

@ -117,9 +117,9 @@ export class MetricTankMetaInspector extends PureComponent<Props, State> {
const getStyles = stylesFactory(() => {
const { theme } = config;
const borderColor = theme.isDark ? theme.colors.gray25 : theme.colors.gray85;
const background = theme.isDark ? theme.colors.dark1 : theme.colors.white;
const headerBg = theme.isDark ? theme.colors.gray15 : theme.colors.gray85;
const borderColor = theme.isDark ? theme.palette.gray25 : theme.palette.gray85;
const background = theme.isDark ? theme.palette.dark1 : theme.palette.white;
const headerBg = theme.isDark ? theme.palette.gray15 : theme.palette.gray85;
return {
metaItem: css`
@ -160,14 +160,14 @@ const getStyles = stylesFactory(() => {
width: 60px;
`,
bucketRetention: css`
background: linear-gradient(0deg, ${theme.colors.blue85}, ${theme.colors.blue95});
background: linear-gradient(0deg, ${theme.palette.blue85}, ${theme.palette.blue95});
text-align: center;
color: ${theme.colors.white};
color: ${theme.palette.white};
margin-right: ${theme.spacing.md};
border-radius: ${theme.border.radius.md};
`,
bucketRetentionActive: css`
background: linear-gradient(0deg, ${theme.colors.greenBase}, ${theme.colors.greenShade});
background: linear-gradient(0deg, ${theme.palette.greenBase}, ${theme.palette.greenShade});
`,
};
});

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.colors.blueBase)
this.panel.thresholds[index].fillColor = tinycolor(config.theme.palette.blueBase)
.setAlpha(0.2)
.toRgbString();
this.panel.thresholds[index].lineColor = tinycolor(config.theme.colors.blueShade)
this.panel.thresholds[index].lineColor = tinycolor(config.theme.palette.blueShade)
.setAlpha(0.6)
.toRgbString();
}

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

@ -89,10 +89,10 @@ $critical: #e02f44;
// Scaffolding
// -------------------------
$body-bg: #0b0c0e;
$body-bg: #141619;
$page-bg: #141619;
$dashboard-bg: #0b0c0e;
$body-color: #d8d9da;
$text-color: #c7d0d9;
$text-color-strong: #ffffff;
$text-color-weak: #8e8e8e;
@ -125,7 +125,7 @@ $hr-border-color: $dark-9;
// -------------------------
$panel-bg: #141619;
$panel-border: 1px solid #202226;
$panel-header-hover-bg: #202226;
$panel-header-hover-bg: #343b40;
$panel-corner: $panel-bg;
// page header
@ -151,7 +151,6 @@ $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.
// Lists
$list-item-bg: $card-background;
$list-item-hover-bg: $card-background-hover;
$list-item-link-color: $text-color;
$list-item-shadow: $card-shadow;
$empty-list-cta-bg: $gray-blue;
@ -231,10 +230,9 @@ $dropdownBorder: #202226;
$dropdownDividerTop: transparent;
$dropdownDividerBottom: #343b40;
$dropdownLinkColor: $text-color;
$dropdownLinkColor: $link-color;
$dropdownLinkColorHover: $white;
$dropdownLinkColorActive: $white;
$dropdownLinkBackgroundHover: $dark-9;
// Horizontal forms & lists
@ -256,7 +254,7 @@ $side-menu-bg-mobile: $panel-bg;
$side-menu-border: none;
$side-menu-item-hover-bg: $dark-3;
$side-menu-shadow: 0 0 20px black;
$side-menu-link-color: $link-color;
$side-menu-link-color: #9fa7b3;
// Menu dropdowns
// -------------------------

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

@ -82,10 +82,10 @@ $critical: #c4162a;
// Scaffolding
// -------------------------
$body-bg: #f7f8fa;
$body-bg: #ffffff;
$page-bg: #ffffff;
$dashboard-bg: #f7f8fa;
$body-color: #52545c;
$text-color: #52545c;
$text-color-strong: #41444b;
$text-color-weak: #767980;
@ -121,9 +121,9 @@ $panel-header-hover-bg: $gray-6;
$panel-corner: $gray-4;
// Page header
$page-header-bg: #e9edf2;
$page-header-bg: #f7f8fa;
$page-header-shadow: inset 0px -3px 10px $gray-6;
$page-header-border-color: #c7d0d9;
$page-header-border-color: #e9edf2;
$divider-border-color: $gray-2;
@ -143,7 +143,6 @@ $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.
// Lists
$list-item-bg: $gray-7;
$list-item-hover-bg: $gray-6;
$list-item-link-color: $text-color;
$list-item-shadow: $card-shadow;
$empty-list-cta-bg: $gray-6;
@ -248,7 +247,7 @@ $side-menu-border: 1px solid #343b40;
$side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
$side-menu-item-hover-bg: #343b40;
$side-menu-shadow: 5px 0px 10px -5px $gray-1;
$side-menu-link-color: $gray-6;
$side-menu-link-color: $gray-4;
// Menu dropdowns
// -------------------------

2
public/sass/base/_reboot.scss
View File

@ -73,7 +73,7 @@ body {
font-size: $font-size-base;
line-height: $line-height-base;
// Go easy on the eyes and use something other than `#000` for text
color: $body-color;
color: $text-color;
// By default, `<body>` has no `background-color` so we set one as a best practice.
background-color: $body-bg;
height: 100%;

2
public/sass/components/_dashboard_settings.scss
View File

@ -7,7 +7,7 @@
right: 0;
bottom: 0;
z-index: $zindex-sidemenu;
background: $body-bg;
background: $dashboard-bg;
display: flex;
flex-direction: column;
}

2
public/sass/components/_navbar.scss
View File

@ -45,7 +45,6 @@
white-space: nowrap;
display: block;
margin: 0;
color: $headings-color;
font-size: $font-size-lg;
min-height: $navbarHeight;
line-height: $navbarHeight;
@ -74,7 +73,6 @@
}
.navbar-page-btn__folder {
color: $text-color-weak;
display: none;
padding-right: 8px;

20
public/sass/components/_search.scss
View File

@ -1,14 +1,3 @@
.search-backdrop {
position: fixed;
right: 0;
left: 0;
bottom: 0;
top: 0;
z-index: $zindex-modal-backdrop;
background-color: $black;
@include opacity(60);
}
.search-container {
left: 0;
top: 0;
@ -16,7 +5,7 @@
bottom: 0;
z-index: ($zindex-modal-backdrop + 10);
position: fixed;
background: $body-bg;
background: $dashboard-bg;
}
// Search
@ -94,6 +83,9 @@
position: relative;
flex-grow: 10;
margin-bottom: $space-md;
background: $panel-bg;
border: $panel-border;
border-radius: 3px;
// Fix for search scroller in mobile view
height: unset;
@ -191,10 +183,6 @@
padding: 0 10px;
}
.search-item__body-title {
color: $list-item-link-color;
}
.search-item__body-folder-title {
color: $text-color-weak;
font-size: $font-size-xs;

Some files were not shown because too many files have changed in this diff Show More