public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* Began text theme refactoring

* Consolidating blue varaibles

* Theme: Typography overhaul and theme cleanup

* Theme updates, alignment and fixes

* Updated snapshots

* Restored template variable class

* Updates

* added container

* Updated snapshot
This commit is contained in:
Torkel Ödegaard
2020-04-14 11:32:14 +02:00
committed by GitHub
parent 16bc5c118d
commit bc60f9c403
70 changed files with 457 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-data/src/types/theme.ts
+11 -12
View File
@@ -67,7 +67,6 @@ export interface GrafanaThemeCommons {
formSpacingBase: number;
formMargin: string;
formFieldsetMargin: string;
formLegendMargin: string;
formInputHeight: string;
formButtonHeight: number;
formInputPaddingHorizontal: string;
@@ -148,17 +147,13 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
// New blues palette used by next-gen form elements
blue95: string;
blue85: string;
blue80: string;
blue77: string;
// New reds palette used by next-gen form elements
red88: string;
// Accent colors
blue: string;
blueBase: string;
blueShade: string;
blueLight: string;
blueFaint: string;
redBase: string;
redShade: string;
greenBase: string;
@@ -188,6 +183,10 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
bg3: string;
border1: string;
border2: string;
border3: string;
bgBlue1: string;
bgBlue2: string;
dashboardBg: string;
bodyBg: string;
@@ -207,18 +206,17 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
linkExternal: string;
// Text colors
text: string;
textStrong: string;
textHeading: string;
text: string;
textSemiWeak: string;
textWeak: string;
textFaint: string;
textEmphasis: string;
headingColor: string;
textBlue: string;
// Next-gen forms functional colors
formLabel: string;
formDescription: string;
formLegend: string;
formInputBg: string;
formInputBgDisabled: string;
formInputBorder: string;
@@ -229,8 +227,6 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
formInputText: string;
formInputDisabledText: string;
formInputPlaceholderText: string;
formInputTextStrong: string;
formInputTextWhite: string;
formValidationMessageText: string;
formValidationMessageBg: string;
formSwitchBg: string;
@@ -244,4 +240,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
formCheckboxBgCheckedHover: string;
formCheckboxCheckmark: string;
};
shadows: {
listItem: string;
};
}
packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ export const AlphaNotice: FC<Props> = ({ state, text, className }) => {
const styles = cx(
className,
css`
background: linear-gradient(to bottom, ${theme.palette.blueBase}, ${theme.palette.blueShade});
background: linear-gradient(to bottom, ${theme.palette.blue85}, ${theme.palette.blue77});
color: ${theme.palette.gray7};
white-space: nowrap;
border-radius: 3px;
packages/grafana-ui/src/components/Button/Button.tsx
+2 -2
View File
@@ -58,8 +58,8 @@ const getPropertiesForVariant = (theme: GrafanaTheme, variant: ButtonVariant) =>
case 'primary':
default:
return {
borderColor: theme.palette.blueShade,
background: buttonVariantStyles(theme.palette.blueBase, theme.palette.blueShade, theme.palette.white),
borderColor: theme.colors.bgBlue1,
background: buttonVariantStyles(theme.colors.bgBlue1, theme.colors.bgBlue2, theme.palette.white),
};
}
};
packages/grafana-ui/src/components/Collapse/Collapse.tsx
+1 -1
View File
@@ -36,7 +36,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
animation: loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67) 500ms;
animation-iteration-count: 100;
left: -25%;
background: ${theme.palette.blue};
background: ${theme.palette.blue85};
}
@keyframes loader {
from {
packages/grafana-ui/src/components/Forms/Legend.tsx
+1 -2
View File
@@ -13,8 +13,7 @@ export const getLegendStyles = stylesFactory((theme: GrafanaTheme) => {
legend: css`
font-size: ${theme.typography.heading.h3};
font-weight: ${theme.typography.weight.regular};
margin: ${theme.spacing.formLegendMargin};
color: ${theme.colors.formLegend};
margin: 0 0 ${theme.spacing.md} 0;
`,
};
});
packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
+6 -6
View File
@@ -21,12 +21,12 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
const horizontalPadding = theme.spacing[size] ?? theme.spacing.md;
const c = theme.palette;
const textColor = theme.isLight ? c.gray33 : c.gray70;
const textColorHover = theme.isLight ? c.blueShade : c.blueLight;
const textColorActive = theme.isLight ? c.blueShade : c.blueLight;
const borderColor = theme.isLight ? c.gray4 : c.gray25;
const borderColorHover = theme.isLight ? c.gray70 : c.gray33;
const borderColorActive = theme.isLight ? c.blueShade : c.blueLight;
const textColor = theme.colors.textSemiWeak;
const textColorHover = theme.colors.text;
const textColorActive = theme.isLight ? c.blue77 : c.blue95;
const borderColor = theme.colors.border2;
const borderColorHover = theme.colors.border3;
const borderColorActive = theme.isLight ? c.blue77 : c.blue95;
const bg = theme.colors.bodyBg;
const bgDisabled = theme.isLight ? c.gray95 : c.gray15;
const bgActive = theme.isLight ? c.white : c.gray05;
packages/grafana-ui/src/components/Legend/LegendTable.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ export const LegendTable: React.FunctionComponent<LegendTableProps> = ({
<th
key={columnHeader}
className={css`
color: ${theme.palette.blue};
color: ${theme.colors.textBlue};
font-weight: bold;
text-align: right;
cursor: pointer;
packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx
+2 -3
View File
@@ -11,7 +11,7 @@ const getStyles = (theme: GrafanaTheme) => ({
`,
logsStatsRowActive: css`
label: logs-stats-row--active;
color: ${theme.palette.blue};
color: ${theme.colors.textBlue};
position: relative;
`,
logsStatsRowLabel: css`
@@ -46,8 +46,7 @@ const getStyles = (theme: GrafanaTheme) => ({
label: logs-stats-row__innerbar;
height: 4px;
overflow: hidden;
background: ${theme.colors.textFaint};
background: ${theme.palette.blue};
background: ${theme.colors.bgBlue1};
`,
});
packages/grafana-ui/src/components/Modal/getModalStyles.ts
+1 -1
View File
@@ -32,7 +32,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
opacity: 0.7;
`,
modalHeader: css`
background: ${theme.colors.bg1};
background: ${theme.colors.bg2};
border-bottom: 1px solid ${theme.colors.pageHeaderBorder};
display: flex;
height: 42px;
packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ export const PanelOptionsGroup: FunctionComponent<Props> = props => {
<div className="panel-options-group__header">
<button className="panel-options-group__add-btn" onClick={props.onAdd}>
<div className="panel-options-group__add-circle">
<Icon name="plus-circle" />
<Icon name="plus" />
</div>
<span className="panel-options-group__title">{props.title}</span>
</button>
packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ import { Icon } from '../Icon/Icon';
const AddButton = (
<a className="gf-form-label query-part">
<Icon name="plus-circle" />
<Icon name="plus" />
</a>
);
packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx
+1 -1
View File
@@ -78,7 +78,7 @@ export const InputWithAutoFocus = () => {
setInputComponents([...inputComponents, InputComponent]);
}}
>
<Icon name="plus-circle" />
<Icon name="plus" />
</a>
</SegmentFrame>
);
packages/grafana-ui/src/components/Select/getSelectStyles.ts
+1 -1
View File
@@ -6,7 +6,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
const bgColor = theme.colors.formInputBg;
const menuShadowColor = theme.colors.dropdownShadow;
const optionBgHover = theme.colors.dropdownOptionHoverBg;
const multiValueContainerBg = theme.colors.bg3;
const multiValueContainerBg = theme.colors.bg2;
const multiValueColor = theme.colors.text;
return {
packages/grafana-ui/src/components/Table/styles.ts
+2 -2
View File
@@ -19,7 +19,7 @@ export interface TableStyles {
export const getTableStyles = stylesFactory(
(theme: GrafanaTheme): TableStyles => {
const palette = theme.palette;
const { palette, colors } = theme;
const headerBg = theme.colors.panelBorder;
const headerBorderColor = theme.isLight ? palette.gray70 : palette.gray05;
const resizerColor = theme.isLight ? palette.blue77 : palette.blue95;
@@ -51,7 +51,7 @@ export const getTableStyles = stylesFactory(
padding: ${padding}px 10px;
cursor: pointer;
white-space: nowrap;
color: ${palette.blue};
color: ${colors.textBlue};
border-right: 1px solid ${headerBorderColor};
&:last-child {
packages/grafana-ui/src/components/Tabs/Tab.tsx
-1
View File
@@ -42,7 +42,6 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme) => {
background: ${colors.bodyBg};
color: ${colors.link};
overflow: hidden;
cursor: not-allowed;
&::before {
display: block;
packages/grafana-ui/src/components/ThemeColors/ThemeColors.story.tsx
+5 -66
View File
@@ -1,76 +1,15 @@
import React from 'react';
import { css, cx } from 'emotion';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { useTheme } from '../../themes/ThemeContext';
import { ThemeColors } from './ThemeColors';
export default {
title: 'General/ThemeColors',
component: () => {},
decorators: [withCenteredStory],
component: ThemeColors,
decorators: [],
parameters: {
docs: {},
},
};
interface DemoElement {
name: string;
bg: string;
border?: string;
textColor?: string;
child?: DemoElement;
}
function renderElement(el: DemoElement) {
const style = cx(
css`
padding: 36px;
background: ${el.bg};
`,
el.border
? css`
border: 1px solid ${el.border};
`
: null
);
return (
<div className={style}>
<div
className={css`
padding: 8px;
`}
>
{el.name}
</div>
{el.child && renderElement(el.child)}
</div>
);
}
export const BackgroundsAndBorders = () => {
const theme = useTheme();
const lvl1 = {
name: 'dashbord background',
bg: theme.colors.dashboardBg,
child: {
name: 'colors.bg1',
bg: theme.colors.bg1,
border: theme.colors.border1,
child: {
name:
'colors.bg2 background used for elements placed on colors.bg1. Using colors.border1 should be used on elements placed ontop of bg1',
bg: theme.colors.bg2,
border: theme.colors.border2,
child: {
name:
'colors.bg3 background used for elements placed on colors.bg2 with colors.border2 used for elements placed on bg2',
bg: theme.colors.bg3,
border: theme.colors.border2,
},
},
},
};
return <div>{renderElement(lvl1)}</div>;
export const ThemeColorsDemo = () => {
return <ThemeColors />;
};
packages/grafana-ui/src/components/ThemeColors/ThemeColors.tsx
+143
View File
@@ -0,0 +1,143 @@
import React, { FC } from 'react';
import { css, cx } from 'emotion';
import { useTheme } from '../../themes/ThemeContext';
import { Icon } from '../Icon/Icon';
import { HorizontalGroup } from '../Layout/Layout';
interface DemoBoxProps {
bg: string;
border?: string;
textColor?: string;
}
const DemoBox: FC<DemoBoxProps> = ({ bg, border, children }) => {
const style = cx(
css`
padding: 16px 32px;
background: ${bg};
width: 100%;
`,
border
? css`
border: 1px solid ${border};
`
: null
);
return (
<div className={style}>
<div
className={css`
padding-bottom: 16px;
`}
>
{name}
</div>
{children}
</div>
);
};
const DemoText: FC<{ color?: string; bold?: boolean; size?: number }> = ({ color, bold, size, children }) => {
const style = css`
padding: 4px;
color: ${color ?? 'inherit'};
font-weight: ${bold ? 500 : 400};
font-size: ${size ?? 14}px;
`;
return <div className={style}>{children}</div>;
};
export const ThemeColors = () => {
const theme = useTheme();
return (
<div
className={css`
width: 100%;
`}
>
<DemoBox bg={theme.colors.dashboardBg}>
<DemoText>theme.colors.dashboardBg</DemoText>
<DemoBox bg={theme.colors.bg1} border={theme.colors.border1}>
<DemoText>
theme.colors.bg1 is the main & preferred content background for text and elements This box is using border1
</DemoText>
<DemoBox bg={theme.colors.bg2} border={theme.colors.border2}>
<DemoText>
colors.bg2 background used for elements placed on colors.bg1. Using colors.border1 should be used on
elements placed ontop of bg1. Ths box is using border2.
</DemoText>
<DemoBox bg={theme.colors.bg3} border={theme.colors.border2}>
<DemoText>colors.bg3 background used for elements placed on colors.bg2.</DemoText>
</DemoBox>
</DemoBox>
</DemoBox>
</DemoBox>
<HorizontalGroup>
<DemoBox bg={theme.colors.bodyBg}>
<>
Text on main body background (bg1)
<DemoText color={theme.colors.textHeading} size={24}>
textHeading Usually a bit bigger text <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.text}>
text <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.textSemiWeak}>
textSemiWeak <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.textWeak}>
textWeak <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.textFaint}>
textFaint <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.textStrong}>
textStrong <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.formInputText}>
formInputText <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.formLabel} bold>
formLabel is also bold <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.formDescription}>
formDescription <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.textBlue} bold>
textBlue usually bold
</DemoText>
<DemoText color={theme.colors.link}>link</DemoText>
<DemoText color={theme.colors.linkHover}>linkHover</DemoText>
<DemoText color={theme.colors.linkDisabled}>linkDisabled</DemoText>
<DemoText color={theme.colors.linkExternal}>linkExternal</DemoText>
</>
</DemoBox>
<DemoBox bg={theme.colors.formInputBg}>
This is inside form input bg (same as dashboard bg)
<DemoText color={theme.colors.formInputText}>formInputText</DemoText>
<DemoText color={theme.colors.formInputDisabledText}>formInputDisabledText</DemoText>
<DemoText color={theme.colors.formInputPlaceholderText}>formInputPlaceholderText</DemoText>
</DemoBox>
<DemoBox bg={theme.colors.bg2}>
Inside bg2
<DemoText color={theme.colors.text}>
text <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.textWeak}>
textWeak <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.textFaint}>
textFaint <Icon name="trash-alt" />
</DemoText>
<DemoText color={theme.colors.textStrong}>
textStrong <Icon name="trash-alt" />
</DemoText>
</DemoBox>
</HorizontalGroup>
</div>
);
};
packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx
+1 -1
View File
@@ -110,7 +110,7 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
.react-calendar__month-view__weekdays {
background-color: inherit;
text-align: center;
color: ${theme.palette.blueShade};
color: ${theme.palette.blue77};
abbr {
border: 0;
packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap
+50 -50
View File
@@ -70,10 +70,13 @@ exports[`TimePicker renders buttons correctly 1`] = `
"colors": Object {
"bg1": "#141619",
"bg2": "#202226",
"bg3": "#343b40",
"bg3": "#2c3235",
"bgBlue1": "#3274d9",
"bgBlue2": "#1f60c4",
"bodyBg": "#141619",
"border1": "#202226",
"border2": "#343b40",
"border2": "#2c3235",
"border3": "#464c54",
"dashboardBg": "#0b0c0e",
"dropdownBg": "#0b0c0e",
"dropdownOptionHoverBg": "#202226",
@@ -81,45 +84,42 @@ exports[`TimePicker renders buttons correctly 1`] = `
"formCheckboxBg": "#222426",
"formCheckboxBgChecked": "#5794f2",
"formCheckboxBgCheckedHover": "#3274d9",
"formCheckboxCheckmark": "#343b40",
"formCheckboxCheckmark": "#2c3235",
"formDescription": "#7b8087",
"formFocusOutline": "#1f60c4",
"formInputBg": "#0b0c0e",
"formInputBgDisabled": "#141619",
"formInputBorder": "#343b40",
"formInputBorder": "#2c3235",
"formInputBorderActive": "#5794f2",
"formInputBorderHover": "#464c54",
"formInputBorderInvalid": "#e02f44",
"formInputDisabledText": "#9fa7b3",
"formInputPlaceholderText": "#555555",
"formInputPlaceholderText": "#464c54",
"formInputText": "#c7d0d9",
"formInputTextStrong": "#c7d0d9",
"formInputTextWhite": "#ffffff",
"formLabel": "#9fa7b3",
"formLegend": "#c7d0d9",
"formSwitchBg": "#343b40",
"formSwitchBg": "#2c3235",
"formSwitchBgActive": "#5794f2",
"formSwitchBgActiveHover": "#3274d9",
"formSwitchBgDisabled": "#343b40",
"formSwitchBgDisabled": "#2c3235",
"formSwitchBgHover": "#464c54",
"formSwitchDot": "#202226",
"formValidationMessageBg": "#e02f44",
"formValidationMessageText": "#ffffff",
"headingColor": "#d8d9da",
"link": "#d8d9da",
"linkDisabled": "#8e8e8e",
"linkExternal": "#33b5e5",
"linkExternal": "#33a2e5",
"linkHover": "#ffffff",
"pageHeaderBg": "#202226",
"pageHeaderBorder": "#202226",
"panelBg": "#141619",
"panelBorder": "#202226",
"text": "#c7d0d9",
"textBlue": "#339ae5",
"textEmphasis": "#ececec",
"textFaint": "#222426",
"textStrong": "#ffffff",
"textWeak": "#8e8e8e",
"textBlue": "#33a2e5",
"textFaint": "#464c54",
"textHeading": "#d8d9da",
"textSemiWeak": "#9fa7b3",
"textStrong": "#f7f8fa",
"textWeak": "#7b8087",
},
"height": Object {
"lg": "48px",
@@ -131,14 +131,10 @@ exports[`TimePicker renders buttons correctly 1`] = `
"name": "Grafana Dark",
"palette": Object {
"black": "#000000",
"blue": "#33b5e5",
"blue77": "#1f60c4",
"blue85": "#339ae5",
"blue80": "#3274d9",
"blue85": "#33a2e5",
"blue95": "#5794f2",
"blueBase": "#3274d9",
"blueFaint": "#041126",
"blueLight": "#5794f2",
"blueShade": "#1f60c4",
"brandDanger": "#e02f44",
"brandPrimary": "#eb7b18",
"brandSuccess": "#299c46",
@@ -159,7 +155,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
"gray10": "#141619",
"gray15": "#202226",
"gray2": "#8e8e8e",
"gray25": "#343b40",
"gray25": "#2c3235",
"gray3": "#b3b3b3",
"gray33": "#464c54",
"gray4": "#d8d9da",
@@ -169,7 +165,9 @@ exports[`TimePicker renders buttons correctly 1`] = `
"gray7": "#fbfbfb",
"gray70": "#9fa7b3",
"gray85": "#c7d0d9",
"gray90": "#dce1e6",
"gray95": "#e9edf2",
"gray97": "#f1f5f9",
"gray98": "#f7f8fa",
"greenBase": "#299c46",
"greenShade": "#23843b",
@@ -192,6 +190,9 @@ exports[`TimePicker renders buttons correctly 1`] = `
},
"panelHeaderHeight": 28,
"panelPadding": 8,
"shadows": Object {
"listItem": "-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3)",
},
"spacing": Object {
"d": "14px",
"formButtonHeight": 32,
@@ -202,7 +203,6 @@ exports[`TimePicker renders buttons correctly 1`] = `
"formInputPaddingHorizontal": "8px",
"formLabelMargin": "0 0 4px 0",
"formLabelPadding": "0 0 0 2px",
"formLegendMargin": "0 0 16px 0",
"formMargin": "32px",
"formSpacingBase": 8,
"formValidationMessageMargin": "4px 0 0 0",
@@ -384,10 +384,13 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"colors": Object {
"bg1": "#141619",
"bg2": "#202226",
"bg3": "#343b40",
"bg3": "#2c3235",
"bgBlue1": "#3274d9",
"bgBlue2": "#1f60c4",
"bodyBg": "#141619",
"border1": "#202226",
"border2": "#343b40",
"border2": "#2c3235",
"border3": "#464c54",
"dashboardBg": "#0b0c0e",
"dropdownBg": "#0b0c0e",
"dropdownOptionHoverBg": "#202226",
@@ -395,45 +398,42 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"formCheckboxBg": "#222426",
"formCheckboxBgChecked": "#5794f2",
"formCheckboxBgCheckedHover": "#3274d9",
"formCheckboxCheckmark": "#343b40",
"formCheckboxCheckmark": "#2c3235",
"formDescription": "#7b8087",
"formFocusOutline": "#1f60c4",
"formInputBg": "#0b0c0e",
"formInputBgDisabled": "#141619",
"formInputBorder": "#343b40",
"formInputBorder": "#2c3235",
"formInputBorderActive": "#5794f2",
"formInputBorderHover": "#464c54",
"formInputBorderInvalid": "#e02f44",
"formInputDisabledText": "#9fa7b3",
"formInputPlaceholderText": "#555555",
"formInputPlaceholderText": "#464c54",
"formInputText": "#c7d0d9",
"formInputTextStrong": "#c7d0d9",
"formInputTextWhite": "#ffffff",
"formLabel": "#9fa7b3",
"formLegend": "#c7d0d9",
"formSwitchBg": "#343b40",
"formSwitchBg": "#2c3235",
"formSwitchBgActive": "#5794f2",
"formSwitchBgActiveHover": "#3274d9",
"formSwitchBgDisabled": "#343b40",
"formSwitchBgDisabled": "#2c3235",
"formSwitchBgHover": "#464c54",
"formSwitchDot": "#202226",
"formValidationMessageBg": "#e02f44",
"formValidationMessageText": "#ffffff",
"headingColor": "#d8d9da",
"link": "#d8d9da",
"linkDisabled": "#8e8e8e",
"linkExternal": "#33b5e5",
"linkExternal": "#33a2e5",
"linkHover": "#ffffff",
"pageHeaderBg": "#202226",
"pageHeaderBorder": "#202226",
"panelBg": "#141619",
"panelBorder": "#202226",
"text": "#c7d0d9",
"textBlue": "#339ae5",
"textEmphasis": "#ececec",
"textFaint": "#222426",
"textStrong": "#ffffff",
"textWeak": "#8e8e8e",
"textBlue": "#33a2e5",
"textFaint": "#464c54",
"textHeading": "#d8d9da",
"textSemiWeak": "#9fa7b3",
"textStrong": "#f7f8fa",
"textWeak": "#7b8087",
},
"height": Object {
"lg": "48px",
@@ -445,14 +445,10 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"name": "Grafana Dark",
"palette": Object {
"black": "#000000",
"blue": "#33b5e5",
"blue77": "#1f60c4",
"blue85": "#339ae5",
"blue80": "#3274d9",
"blue85": "#33a2e5",
"blue95": "#5794f2",
"blueBase": "#3274d9",
"blueFaint": "#041126",
"blueLight": "#5794f2",
"blueShade": "#1f60c4",
"brandDanger": "#e02f44",
"brandPrimary": "#eb7b18",
"brandSuccess": "#299c46",
@@ -473,7 +469,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"gray10": "#141619",
"gray15": "#202226",
"gray2": "#8e8e8e",
"gray25": "#343b40",
"gray25": "#2c3235",
"gray3": "#b3b3b3",
"gray33": "#464c54",
"gray4": "#d8d9da",
@@ -483,7 +479,9 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"gray7": "#fbfbfb",
"gray70": "#9fa7b3",
"gray85": "#c7d0d9",
"gray90": "#dce1e6",
"gray95": "#e9edf2",
"gray97": "#f1f5f9",
"gray98": "#f7f8fa",
"greenBase": "#299c46",
"greenShade": "#23843b",
@@ -506,6 +504,9 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
},
"panelHeaderHeight": 28,
"panelPadding": 8,
"shadows": Object {
"listItem": "-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3)",
},
"spacing": Object {
"d": "14px",
"formButtonHeight": 32,
@@ -516,7 +517,6 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"formInputPaddingHorizontal": "8px",
"formLabelMargin": "0 0 4px 0",
"formLabelPadding": "0 0 0 2px",
"formLegendMargin": "0 0 16px 0",
"formMargin": "32px",
"formSpacingBase": 8,
"formValidationMessageMargin": "4px 0 0 0",
packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx
+1 -1
View File
@@ -139,7 +139,7 @@ const FilterPill: React.FC<FilterPillProps> = ({ label, selected, onClick }) =>
className={css`
padding: ${theme.spacing.xxs} ${theme.spacing.sm};
color: white;
background: ${selected ? theme.palette.blueLight : theme.palette.blueShade};
background: ${selected ? theme.palette.blue95 : theme.palette.blue77};
border-radius: 16px;
display: inline-block;
cursor: pointer;
packages/grafana-ui/src/components/TransformersUI/FilterByRefIdTransformerEditor.tsx
+1 -1
View File
@@ -139,7 +139,7 @@ const FilterPill: React.FC<FilterPillProps> = ({ label, selected, onClick }) =>
className={css`
padding: ${theme.spacing.xxs} ${theme.spacing.sm};
color: white;
background: ${selected ? theme.palette.blueLight : theme.palette.blueShade};
background: ${selected ? theme.palette.blue95 : theme.palette.blue77};
border-radius: 16px;
display: inline-block;
cursor: pointer;
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+9 -10
View File
@@ -12,10 +12,9 @@ $theme-name: dark;
// New Colors
// -------------------------
$blue-faint: ${theme.palette.blueFaint};
$blue-light: ${theme.palette.blueLight};
$blue-base: ${theme.palette.blueBase};
$blue-shade: ${theme.palette.blueShade};
$blue-light: ${theme.palette.blue95};
$blue-base: ${theme.palette.blue80};
$blue-shade: ${theme.palette.blue77};
$red-base: ${theme.palette.redBase};
$red-shade: ${theme.palette.redShade};
$green-base: ${theme.palette.greenBase};
@@ -59,7 +58,7 @@ $white: ${theme.palette.white};
// Accent colors
// -------------------------
$blue: ${theme.palette.blue};
$blue: ${theme.palette.blue85};
$red: $red-base;
$yellow: ${theme.palette.yellow};
$orange: ${theme.palette.orange};
@@ -92,7 +91,7 @@ $text-color: ${theme.colors.text};
$text-color-strong: ${theme.colors.textStrong};
$text-color-weak: ${theme.colors.textWeak};
$text-color-faint: ${theme.colors.textFaint};
$text-color-emphasis: ${theme.colors.textEmphasis};
$text-color-emphasis: ${theme.colors.textStrong};
$text-blue: ${theme.colors.textBlue};
$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
@@ -111,7 +110,7 @@ $external-link-color: ${theme.colors.linkExternal};
// Typography
// -------------------------
$headings-color: ${theme.colors.headingColor};
$headings-color: ${theme.colors.textHeading};
$abbr-border-color: $gray-2 !default;
$text-muted: $text-color-weak;
@@ -353,7 +352,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
$switch-bg: $input-bg;
$switch-slider-color: $dark-3;
$switch-slider-off-bg: $gray-1;
$switch-slider-on-bg: ${theme.palette.blueLight};
$switch-slider-on-bg: ${theme.palette.blue77};
$switch-slider-shadow: 0 0 3px black;
//Checkbox
@@ -379,8 +378,8 @@ $panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
$panel-options-group-border: none;
$panel-options-group-header-bg: ${theme.colors.bg2};
$panel-grid-placeholder-bg: $blue-faint;
$panel-grid-placeholder-shadow: 0 0 4px $blue-shade;
$panel-grid-placeholder-bg: darken(${theme.palette.blue77}, 30%);
$panel-grid-placeholder-shadow: 0 0 4px ${theme.palette.blue80};
// logs
$logs-color-unkown: $gray-2;
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+9 -10
View File
@@ -12,10 +12,9 @@ $theme-name: light;
// New Colors
// -------------------------
$blue-faint: ${theme.palette.blueFaint};
$blue-light: ${theme.palette.blueLight};
$blue-base: ${theme.palette.blueBase};
$blue-shade: ${theme.palette.blueShade};
$blue-light: ${theme.palette.blue95};
$blue-base: ${theme.palette.blue80};
$blue-shade: ${theme.palette.blue77};
$red-base: ${theme.palette.redBase};
$red-shade: ${theme.palette.redShade};
$green-base: ${theme.palette.greenBase};
@@ -53,7 +52,7 @@ $white: ${theme.palette.white};
// Accent colors
// -------------------------
$blue: ${theme.palette.blue};
$blue: ${theme.colors.textBlue};
$red: $red-base;
$yellow: ${theme.palette.yellow};
$orange: ${theme.palette.orange};
@@ -86,7 +85,7 @@ $text-color: ${theme.colors.text};
$text-color-strong: ${theme.colors.textStrong};
$text-color-weak: ${theme.colors.textWeak};
$text-color-faint: ${theme.colors.textFaint};
$text-color-emphasis: ${theme.colors.textEmphasis};
$text-color-emphasis: ${theme.colors.textStrong};
$text-blue: ${theme.colors.textBlue};
$text-shadow-faint: none;
@@ -104,7 +103,7 @@ $external-link-color: ${theme.colors.linkExternal};
// Typography
// -------------------------
$headings-color: ${theme.colors.headingColor};
$headings-color: ${theme.colors.textHeading};
$abbr-border-color: $gray-2 !default;
$text-muted: $text-color-weak;
@@ -346,7 +345,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
$switch-bg: $white;
$switch-slider-color: $gray-7;
$switch-slider-off-bg: $gray-5;
$switch-slider-on-bg: ${theme.palette.blueShade};
$switch-slider-on-bg: ${theme.palette.blue77};
$switch-slider-shadow: 0 0 3px $dark-2;
//Checkbox
@@ -372,8 +371,8 @@ $panel-editor-viz-item-bg-hover: lighten($blue-base, 45%);
$panel-options-group-border: none;
$panel-options-group-header-bg: $gray-5;
$panel-grid-placeholder-bg: $blue-faint;
$panel-grid-placeholder-shadow: 0 0 4px $blue-light;
$panel-grid-placeholder-bg: lighten(${theme.palette.blue95}, 30%);
$panel-grid-placeholder-shadow: 0 0 4px ${theme.palette.blue95};
// logs
$logs-color-unkown: $gray-5;
packages/grafana-ui/src/themes/dark.ts
+26 -26
View File
@@ -22,15 +22,10 @@ const basicColors = {
gray5: '#ececec',
gray6: '#f4f5f8', // not used in dark theme
gray7: '#fbfbfb', // not used in dark theme
blueBase: '#3274d9',
blueShade: '#1f60c4',
blueLight: '#5794f2',
blueFaint: '#041126',
redBase: '#e02f44',
redShade: '#c4162a',
greenBase: '#299c46',
greenShade: '#23843b',
blue: '#33b5e5',
red: '#d44a3a',
yellow: '#ecbb13',
purple: '#9933cc',
@@ -44,41 +39,51 @@ const backgrounds = {
bg2: basicColors.gray15,
bg3: basicColors.gray25,
dashboardBg: basicColors.gray05,
bgBlue1: basicColors.blue80,
bgBlue2: basicColors.blue77,
};
const borders = {
border1: basicColors.gray15,
border2: basicColors.gray25,
border3: basicColors.gray33,
};
const textColors = {
textStrong: basicColors.gray98,
textHeading: basicColors.gray4,
text: basicColors.gray85,
textSemiWeak: basicColors.gray70,
textWeak: basicColors.gray60,
textFaint: basicColors.gray33,
textBlue: basicColors.blue85,
};
const form = {
// Next-gen forms functional colors
formLabel: basicColors.gray70,
formLabel: textColors.textSemiWeak,
formDescription: basicColors.gray60,
formLegend: basicColors.gray85,
formInputBg: basicColors.gray05,
formInputBgDisabled: basicColors.gray10,
formInputBorder: basicColors.gray25,
formInputBorder: borders.border2,
formInputBorderHover: basicColors.gray33,
formInputBorderActive: basicColors.blue95,
formInputBorderInvalid: basicColors.red88,
formInputPlaceholderText: basicColors.gray1,
formInputPlaceholderText: textColors.textFaint,
formInputText: basicColors.gray85,
formInputDisabledText: basicColors.gray70,
formInputTextStrong: basicColors.gray85,
formInputTextWhite: basicColors.white,
formFocusOutline: basicColors.blueShade,
formFocusOutline: basicColors.blue77,
formValidationMessageText: basicColors.white,
formValidationMessageBg: basicColors.red88,
formSwitchBg: basicColors.gray25,
formSwitchBgActive: basicColors.blueLight,
formSwitchBgActive: basicColors.blue95,
formSwitchBgHover: basicColors.gray33,
formSwitchBgActiveHover: basicColors.blueBase,
formSwitchBgActiveHover: basicColors.blue80,
formSwitchBgDisabled: basicColors.gray25,
formSwitchDot: basicColors.gray15,
formCheckboxBg: basicColors.dark5,
formCheckboxBgChecked: basicColors.blueLight,
formCheckboxBgCheckedHover: basicColors.blueBase,
formCheckboxBgChecked: basicColors.blue95,
formCheckboxBgCheckedHover: basicColors.blue80,
formCheckboxCheckmark: basicColors.gray25,
};
@@ -106,6 +111,7 @@ const darkTheme: GrafanaTheme = {
...backgrounds,
...borders,
...form,
...textColors,
bodyBg: backgrounds.bg1,
panelBg: backgrounds.bg1,
@@ -117,19 +123,13 @@ const darkTheme: GrafanaTheme = {
dropdownShadow: basicColors.black,
dropdownOptionHoverBg: backgrounds.bg2,
// text
headingColor: basicColors.gray4,
text: basicColors.gray85,
textStrong: basicColors.white,
textWeak: basicColors.gray2,
textEmphasis: basicColors.gray5,
textFaint: basicColors.dark5,
textBlue: basicColors.blue85,
link: basicColors.gray4,
linkDisabled: basicColors.gray2,
linkHover: basicColors.white,
linkExternal: basicColors.blue,
linkExternal: basicColors.blue85,
},
shadows: {
listItem: '-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3)',
},
};
packages/grafana-ui/src/themes/default.ts
+7 -5
View File
@@ -3,20 +3,23 @@ import { GrafanaThemeCommons } from '@grafana/data';
export const commonColorsPalette = {
// New greys palette used by next-gen form elements
gray98: '#f7f8fa',
gray97: '#f1f5f9',
gray95: '#e9edf2',
gray90: '#dce1e6',
gray85: '#c7d0d9',
gray70: '#9fa7b3',
gray60: '#7b8087',
gray33: '#464c54',
gray25: '#343b40',
gray25: '#2c3235',
gray15: '#202226',
gray10: '#141619',
gray05: '#0b0c0e',
// New blues palette used by next-gen form elements
blue95: '#5794f2',
blue85: '#339ae5',
blue77: '#1f60c4',
blue95: '#5794f2', // blue95
blue85: '#33a2e5', // blueText
blue80: '#3274d9', // blue80
blue77: '#1f60c4', // blue77
// New reds palette used by next-gen form elements
red88: '#e02f44',
@@ -86,7 +89,6 @@ const theme: GrafanaThemeCommons = {
formSpacingBase: SPACING_BASE,
formMargin: `${SPACING_BASE * 4}px`,
formFieldsetMargin: `${SPACING_BASE * 2}px`,
formLegendMargin: `0 0 ${SPACING_BASE * 2}px 0`,
formInputHeight: `${SPACING_BASE * 4}px`,
formButtonHeight: SPACING_BASE * 4,
formInputPaddingHorizontal: `${SPACING_BASE}px`,
packages/grafana-ui/src/themes/light.ts
+35 -34
View File
@@ -22,15 +22,10 @@ const basicColors = {
gray5: '#dde4ed',
gray6: '#e9edf2', // same as gray95
gray7: '#f7f8fa', // same as gray98
blueBase: '#3274d9',
blueShade: '#1f60c4',
blueLight: '#5794f2',
blueFaint: '#f5f9ff',
redBase: '#e02f44',
redShade: '#c4162a',
greenBase: '#3eb15b',
greenShade: '#369b4f',
blue: '#0083b3',
red: '#d44939',
yellow: '#ff851b',
purple: '#9954bb',
@@ -40,19 +35,32 @@ const basicColors = {
const backgrounds = {
bg1: basicColors.white,
bg2: basicColors.gray98,
bg2: basicColors.gray97,
bg3: basicColors.gray95,
dashboardBg: basicColors.gray98,
bgBlue1: basicColors.blue80,
bgBlue2: basicColors.blue77,
};
const borders = {
border1: basicColors.gray95,
border1: basicColors.gray90,
border2: basicColors.gray85,
border3: basicColors.gray70,
};
const textColors = {
// Text colors
textStrong: basicColors.gray15,
text: basicColors.gray33,
textSemiWeak: basicColors.gray33,
textWeak: basicColors.gray60,
textFaint: basicColors.gray70,
textBlue: basicColors.blue85,
};
const form = {
formLabel: basicColors.gray33,
formDescription: basicColors.gray33,
formLabel: textColors.text,
formDescription: textColors.textWeak,
formLegend: basicColors.gray25,
formInputBg: basicColors.white,
formInputBgDisabled: basicColors.gray95,
@@ -60,23 +68,21 @@ const form = {
formInputBorderHover: basicColors.gray70,
formInputBorderActive: basicColors.blue77,
formInputBorderInvalid: basicColors.red88,
formInputText: basicColors.gray25,
formInputPlaceholderText: basicColors.gray70,
formInputDisabledText: basicColors.gray33,
formInputTextStrong: basicColors.gray25,
formInputTextWhite: basicColors.white,
formFocusOutline: basicColors.blueLight,
formInputText: textColors.text,
formInputPlaceholderText: textColors.textFaint,
formInputDisabledText: textColors.textWeak,
formFocusOutline: basicColors.blue95,
formValidationMessageText: basicColors.white,
formValidationMessageBg: basicColors.red88,
formSwitchBg: basicColors.gray85,
formSwitchBgActive: basicColors.blueShade,
formSwitchBgActive: basicColors.blue77,
formSwitchBgHover: basicColors.gray3,
formSwitchBgActiveHover: basicColors.blueBase,
formSwitchBgActiveHover: basicColors.blue80,
formSwitchBgDisabled: basicColors.gray4,
formSwitchDot: basicColors.white,
formCheckboxBg: basicColors.white,
formCheckboxBgChecked: basicColors.blueShade,
formCheckboxBgCheckedHover: basicColors.blueBase,
formCheckboxBgChecked: basicColors.blue77,
formCheckboxBgCheckedHover: basicColors.blue80,
formCheckboxCheckmark: basicColors.white,
};
@@ -103,6 +109,8 @@ const lightTheme: GrafanaTheme = {
colors: {
...backgrounds,
...borders,
...textColors,
...form,
bodyBg: backgrounds.bg1,
panelBg: backgrounds.bg1,
@@ -114,22 +122,15 @@ const lightTheme: GrafanaTheme = {
dropdownShadow: basicColors.gray3,
dropdownOptionHoverBg: backgrounds.bg2,
// Text colors
text: basicColors.gray1,
textStrong: basicColors.dark2,
textWeak: basicColors.gray2,
textEmphasis: basicColors.dark5,
textFaint: basicColors.dark4,
textBlue: basicColors.blue85,
// Link colors
link: basicColors.gray1,
linkDisabled: basicColors.gray3,
linkHover: basicColors.dark1,
linkExternal: basicColors.blueLight,
headingColor: basicColors.gray1,
...form,
link: textColors.text,
linkDisabled: textColors.textWeak,
linkHover: textColors.textStrong,
linkExternal: basicColors.blue85,
textHeading: basicColors.gray25,
},
shadows: {
listItem: '-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1)',
},
};
packages/grafana-ui/src/themes/mixins.ts
+16 -33
View File
@@ -2,54 +2,37 @@ import { GrafanaTheme } from '@grafana/data';
import { selectThemeVariant } from './selectThemeVariant';
import { css } from 'emotion';
import { stylesFactory } from './stylesFactory';
import tinycolor from 'tinycolor2';
export function cardChrome(theme: GrafanaTheme): string {
if (theme.isDark) {
return `
background: linear-gradient(135deg, ${theme.palette.dark8}, ${theme.palette.dark6});
&:hover {
background: linear-gradient(135deg, ${theme.palette.dark9}, ${theme.palette.dark6});
}
box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
border-radius: ${theme.border.radius.md};
`;
}
return `
background: linear-gradient(135deg, ${theme.palette.gray6}, ${theme.palette.gray7});
background: ${theme.colors.bg2};
&:hover {
background: linear-gradient(135deg, ${theme.palette.gray7}, ${theme.palette.gray6});
background: ${hoverColor(theme.colors.bg2, theme)};
}
box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
box-shadow: ${theme.shadows.listItem};
border-radius: ${theme.border.radius.md};
`;
}
export function listItem(theme: GrafanaTheme): string {
if (theme.isDark) {
return `
background: ${theme.palette.dark7};
&:hover {
background: ${theme.palette.dark9};
}
box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
border-radius: ${theme.border.radius.md};
`;
}
export function hoverColor(color: string, theme: GrafanaTheme) {
return theme.isDark ? tinycolor(color).brighten(2) : tinycolor(color).darken(2);
}
export function listItem(theme: GrafanaTheme): string {
return `
background: ${theme.palette.gray7};
&:hover {
background: ${theme.palette.gray6};
}
box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
border-radius: ${theme.border.radius.md};
`;
background: ${theme.colors.bg2};
&:hover {
background: ${hoverColor(theme.colors.bg2, theme)};
}
box-shadow: ${theme.shadows.listItem};
border-radius: ${theme.border.radius.md};
`;
}
export function listItemSelected(theme: GrafanaTheme): string {
return `
background: ${theme.isLight ? theme.palette.gray6 : theme.palette.dark9};
background: ${hoverColor(theme.colors.bg2, theme)};
color: ${theme.colors.textStrong};
`;
}