mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
6f02b51561
* Search: Improving search look and feel * Fixed issue with tag filter beeing cramped and wrapping tags * Minor tag polish * fixed type
137 lines
3.7 KiB
TypeScript
137 lines
3.7 KiB
TypeScript
import defaultTheme, { commonColorsPalette } from './default';
|
|
import { GrafanaThemeType, GrafanaTheme } from '@grafana/data';
|
|
|
|
const basicColors = {
|
|
...commonColorsPalette,
|
|
black: '#000000',
|
|
white: '#ffffff',
|
|
dark1: '#1e2028',
|
|
dark2: '#41444b',
|
|
dark3: '#303133', // not used in light theme
|
|
dark4: '#35373f', // not used in light theme
|
|
dark5: '#41444b', // not used in light theme
|
|
dark6: '#41444b', // not used in light theme
|
|
dark7: '#41444b', // not used in light theme
|
|
dark8: '#2f2f32', // not used in light theme
|
|
dark9: '#343436', // not used in light theme
|
|
dark10: '#424345', // not used in light theme
|
|
gray1: '#52545c',
|
|
gray2: '#767980',
|
|
gray3: '#acb6bf',
|
|
gray4: '#c7d0d9',
|
|
gray5: '#dde4ed',
|
|
gray6: '#e9edf2', // same as gray95
|
|
gray7: '#f7f8fa', // same as gray98
|
|
redBase: '#e02f44',
|
|
redShade: '#c4162a',
|
|
greenBase: '#3eb15b',
|
|
greenShade: '#369b4f',
|
|
red: '#d44939',
|
|
yellow: '#ff851b',
|
|
purple: '#9954bb',
|
|
orange: '#ff7941',
|
|
orangeDark: '#ed5700',
|
|
};
|
|
|
|
const backgrounds = {
|
|
bg1: basicColors.white,
|
|
bg2: basicColors.gray97,
|
|
bg3: basicColors.gray90,
|
|
dashboardBg: basicColors.gray98,
|
|
bgBlue1: basicColors.blue80,
|
|
bgBlue2: basicColors.blue77,
|
|
};
|
|
|
|
const borders = {
|
|
border1: basicColors.gray90,
|
|
border2: basicColors.gray85,
|
|
border3: basicColors.gray70,
|
|
};
|
|
|
|
const textColors = {
|
|
// Text colors
|
|
textStrong: basicColors.gray15,
|
|
text: basicColors.gray33,
|
|
textSemiWeak: basicColors.gray33,
|
|
textWeak: basicColors.gray60,
|
|
textFaint: basicColors.gray70,
|
|
textBlue: basicColors.blue85,
|
|
};
|
|
|
|
const form = {
|
|
formLabel: textColors.text,
|
|
formDescription: textColors.textWeak,
|
|
formLegend: basicColors.gray25,
|
|
formInputBg: basicColors.white,
|
|
formInputBgDisabled: basicColors.gray95,
|
|
formInputBorder: basicColors.gray85,
|
|
formInputBorderHover: basicColors.gray70,
|
|
formInputBorderActive: basicColors.blue77,
|
|
formInputBorderInvalid: basicColors.red88,
|
|
formInputText: textColors.text,
|
|
formInputPlaceholderText: textColors.textFaint,
|
|
formInputDisabledText: textColors.textWeak,
|
|
formFocusOutline: basicColors.blue95,
|
|
formValidationMessageText: basicColors.white,
|
|
formValidationMessageBg: basicColors.red88,
|
|
formSwitchBg: basicColors.gray85,
|
|
formSwitchBgActive: basicColors.blue77,
|
|
formSwitchBgHover: basicColors.gray3,
|
|
formSwitchBgActiveHover: basicColors.blue80,
|
|
formSwitchBgDisabled: basicColors.gray4,
|
|
formSwitchDot: basicColors.white,
|
|
formCheckboxBgChecked: basicColors.blue77,
|
|
formCheckboxBgCheckedHover: basicColors.blue80,
|
|
formCheckboxCheckmark: basicColors.white,
|
|
};
|
|
|
|
const lightTheme: GrafanaTheme = {
|
|
...defaultTheme,
|
|
type: GrafanaThemeType.Light,
|
|
isDark: false,
|
|
isLight: true,
|
|
name: 'Grafana Light',
|
|
palette: {
|
|
...basicColors,
|
|
brandPrimary: basicColors.orange,
|
|
brandSuccess: basicColors.greenBase,
|
|
brandWarning: basicColors.orange,
|
|
brandDanger: basicColors.redBase,
|
|
queryRed: basicColors.redBase,
|
|
queryGreen: basicColors.greenBase,
|
|
queryPurple: basicColors.purple,
|
|
queryOrange: basicColors.orange,
|
|
online: basicColors.greenShade,
|
|
warn: '#f79520',
|
|
critical: basicColors.redShade,
|
|
},
|
|
colors: {
|
|
...backgrounds,
|
|
...borders,
|
|
...textColors,
|
|
...form,
|
|
|
|
bodyBg: backgrounds.bg1,
|
|
panelBg: backgrounds.bg1,
|
|
pageHeaderBg: backgrounds.bg2,
|
|
pageHeaderBorder: borders.border1,
|
|
panelBorder: borders.border1,
|
|
|
|
dropdownBg: form.formInputBg,
|
|
dropdownShadow: basicColors.gray3,
|
|
dropdownOptionHoverBg: backgrounds.bg2,
|
|
|
|
// Link colors
|
|
link: textColors.text,
|
|
linkDisabled: textColors.textWeak,
|
|
linkHover: textColors.textStrong,
|
|
linkExternal: basicColors.blue85,
|
|
textHeading: basicColors.gray25,
|
|
},
|
|
shadows: {
|
|
listItem: 'none',
|
|
},
|
|
};
|
|
|
|
export default lightTheme;
|