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: Variable name changes & progress (#33088)

Browse Source 
* Theme variable renames

* Fixed variable issue issue

* Fixed test

* fixed story

* More tweaks

* Updated snapshot
This commit is contained in:
Torkel Ödegaard
2021-04-17 19:17:18 +02:00
committed by GitHub
parent c46f992bfb
commit d62601e664
40 changed files with 219 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/grafana-data/src/themes/createComponents.ts
View File

@@ -9,7 +9,7 @@ export interface ThemeComponents {
md: number; md: number;
lg: number; lg: number;
}; };
form: { input: {
background: string; background: string;
border: string; border: string;
borderHover: string; borderHover: string;
@@ -32,8 +32,8 @@ export function createComponents(palette: ThemePalette, shadows: ThemeShadows):
const panel = { const panel = {
padding: 1, padding: 1,
headerHeight: 4, headerHeight: 4,
background: palette.layer1, background: palette.background.primary,
border: palette.border0, border: palette.background.primary,
boxShadow: shadows.z0, boxShadow: shadows.z0,
}; };
@@ -43,23 +43,23 @@ export function createComponents(palette: ThemePalette, shadows: ThemeShadows):
md: 4, md: 4,
lg: 6, lg: 6,
}, },
form: input:
palette.mode === 'dark' palette.mode === 'dark'
? { ? {
background: palette.layer0, background: palette.background.canvas,
border: palette.border1, border: palette.border.medium,
borderHover: palette.border2, borderHover: palette.border.strong,
text: palette.text.primary, text: palette.text.primary,
} }
: { : {
background: palette.layer1, background: palette.background.primary,
border: palette.border1, border: palette.border.medium,
borderHover: palette.border2, borderHover: palette.border.strong,
text: palette.text.primary, text: palette.text.primary,
}, },
panel, panel,
dashboard: { dashboard: {
background: palette.layer0, background: palette.background.canvas,
padding: 1, padding: 1,
}, },
}; };

57
packages/grafana-data/src/themes/createPalette.ts
View File

@@ -26,15 +26,20 @@ export interface ThemePaletteBase<TColor> {
maxContrast: string; maxContrast: string;
}; };
layer0: string; background: {
layer1: string; /** Dashboard and body background */
layer2: string; canvas: string;
/** Primary content pane background (panels etc) */
primary: string;
/** Cards and elements that need to stand out on the primary background */
secondary: string;
};
divider: string; border: {
weak: string;
border0: string; medium: string;
border1: string; strong: string;
border2: string; };
gradients: { gradients: {
brandVertical: string; brandVertical: string;
@@ -119,15 +124,17 @@ class DarkPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
text: colors.orangeDarkText, text: colors.orangeDarkText,
}; };
layer0 = colors.gray05; background = {
layer1 = colors.gray10; canvas: colors.gray05,
layer2 = colors.gray15; primary: colors.gray10,
secondary: colors.gray15,
};
divider = `rgba(${this.whiteBase}, 0.10)`; border = {
weak: `rgba(${this.whiteBase}, 0.10)`,
border0 = this.layer1; medium: `rgba(${this.whiteBase}, 0.15)`,
border1 = `rgba(${this.whiteBase}, 0.15)`; strong: `rgba(${this.whiteBase}, 0.20)`,
border2 = `rgba(${this.whiteBase}, 0.20)`; };
action = { action = {
hover: `rgba(${this.whiteBase}, 0.08)`, hover: `rgba(${this.whiteBase}, 0.08)`,
@@ -195,15 +202,19 @@ class LightPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
maxContrast: colors.black, maxContrast: colors.black,
}; };
layer0 = colors.gray90; background = {
layer1 = colors.white; canvas: colors.gray90,
layer2 = colors.gray100; primary: colors.white,
secondary: colors.gray100,
};
divider = `rgba(${this.blackBase}, 0.12)`; border = {
weak: `rgba(${this.blackBase}, 0.12)`,
medium: `rgba(${this.blackBase}, 0.30)`,
strong: `rgba(${this.blackBase}, 0.40)`,
};
border0 = this.layer1; divider = this.border.weak;
border1 = `rgba(${this.blackBase}, 0.30)`;
border2 = `rgba(${this.blackBase}, 0.40)`;
action = { action = {
hover: `rgba(${this.blackBase}, 0.04)`, hover: `rgba(${this.blackBase}, 0.04)`,

6
packages/grafana-data/src/themes/createTheme.test.ts
View File

@@ -8,13 +8,15 @@ describe('createTheme', () => {
primary: { primary: {
main: 'rgb(240,0,0)', main: 'rgb(240,0,0)',
}, },
layer0: '#123', background: {
canvas: '#123',
},
}, },
}); });
expect(custom.palette.primary.main).toBe('rgb(240,0,0)'); expect(custom.palette.primary.main).toBe('rgb(240,0,0)');
expect(custom.palette.primary.shade).toBe('rgb(242, 38, 38)'); expect(custom.palette.primary.shade).toBe('rgb(242, 38, 38)');
expect(custom.palette.layer0).toBe('#123'); expect(custom.palette.background.canvas).toBe('#123');
}); });
it('create default theme', () => { it('create default theme', () => {

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

@@ -13,9 +13,9 @@ const createTheme = (theme: GrafanaTheme) => {
colorSecondary: theme.v2.palette.error.main, colorSecondary: theme.v2.palette.error.main,
// UI // UI
appBg: theme.v2.palette.layer0, appBg: theme.v2.palette.background.canvas,
appContentBg: theme.v2.palette.layer1, appContentBg: theme.v2.palette.background.primary,
appBorderColor: theme.v2.palette.border1, appBorderColor: theme.v2.palette.border.medium,
appBorderRadius: theme.v2.shape.borderRadius(1), appBorderRadius: theme.v2.shape.borderRadius(1),
// Typography // Typography
@@ -29,12 +29,12 @@ const createTheme = (theme: GrafanaTheme) => {
// Toolbar default and active colors // Toolbar default and active colors
barTextColor: theme.v2.palette.text.primary, barTextColor: theme.v2.palette.text.primary,
barSelectedColor: theme.v2.palette.emphasize(theme.v2.palette.primary.text), barSelectedColor: theme.v2.palette.emphasize(theme.v2.palette.primary.text),
barBg: theme.v2.palette.layer1, barBg: theme.v2.palette.background.primary,
// Form colors // Form colors
inputBg: theme.v2.components.form.background, inputBg: theme.v2.components.input.background,
inputBorder: theme.v2.components.form.border, inputBorder: theme.v2.components.input.border,
inputTextColor: theme.v2.components.form.text, inputTextColor: theme.v2.components.input.text,
inputBorderRadius: theme.v2.shape.borderRadius(1), inputBorderRadius: theme.v2.shape.borderRadius(1),
brandTitle: 'Grafana UI', brandTitle: 'Grafana UI',

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

@@ -79,7 +79,7 @@ const getStyles = (theme: GrafanaTheme, severity: AlertVariant, elevated?: boole
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
background: ${theme.v2.palette.layer2}; background: ${theme.v2.palette.background.secondary};
box-shadow: ${elevated ? theme.v2.shadows.z4 : theme.v2.shadows.z1}; box-shadow: ${elevated ? theme.v2.shadows.z4 : theme.v2.shadows.z1};
&:before { &:before {
@@ -89,7 +89,7 @@ const getStyles = (theme: GrafanaTheme, severity: AlertVariant, elevated?: boole
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
background: ${theme.v2.palette.layer1}; background: ${theme.v2.palette.background.primary};
z-index: -1; z-index: -1;
} }
`, `,

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

@@ -118,7 +118,7 @@ const getStyles = (theme: GrafanaTheme) => {
border-radius: ${theme.v2.shape.borderRadius()}; border-radius: ${theme.v2.shape.borderRadius()};
line-height: ${theme.v2.components.height.md * theme.v2.spacing.gridSize - 2}px; line-height: ${theme.v2.components.height.md * theme.v2.spacing.gridSize - 2}px;
font-weight: ${theme.v2.typography.fontWeightMedium}; font-weight: ${theme.v2.typography.fontWeightMedium};
border: 1px solid ${theme.v2.palette.border1}; border: 1px solid ${theme.v2.palette.border.medium};
white-space: nowrap; white-space: nowrap;
transition: ${theme.v2.transitions.create(['background', 'box-shadow', 'border-color', 'color'], { transition: ${theme.v2.transitions.create(['background', 'box-shadow', 'border-color', 'color'], {
duration: theme.v2.transitions.duration.short, duration: theme.v2.transitions.duration.short,
@@ -154,11 +154,11 @@ const getStyles = (theme: GrafanaTheme) => {
`, `,
default: css` default: css`
color: ${theme.v2.palette.text.secondary}; color: ${theme.v2.palette.text.secondary};
background-color: ${theme.v2.palette.layer1}; background-color: ${theme.v2.palette.background.primary};
&:hover { &:hover {
color: ${theme.v2.palette.text.primary}; color: ${theme.v2.palette.text.primary};
background: ${theme.v2.palette.layer2}; background: ${theme.v2.palette.background.secondary};
} }
`, `,
active: css` active: css`

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

@@ -140,7 +140,7 @@ const getContainerStyles = stylesFactory((theme: GrafanaTheme, disabled = false,
return css({ return css({
display: 'flex', display: 'flex',
width: '100%', width: '100%',
background: theme.v2.palette.layer2, background: theme.v2.palette.background.secondary,
borderRadius: theme.v2.shape.borderRadius(), borderRadius: theme.v2.shape.borderRadius(),
position: 'relative', position: 'relative',
pointerEvents: disabled ? 'none' : 'auto', pointerEvents: disabled ? 'none' : 'auto',
@@ -151,7 +151,7 @@ const getContainerStyles = stylesFactory((theme: GrafanaTheme, disabled = false,
...(!disableHover && { ...(!disableHover && {
'&:hover': { '&:hover': {
background: theme.v2.palette.emphasize(theme.v2.palette.layer2, 0.03), background: theme.v2.palette.emphasize(theme.v2.palette.background.secondary, 0.03),
cursor: 'pointer', cursor: 'pointer',
zIndex: 1, zIndex: 1,
}, },

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

@@ -57,7 +57,9 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
const textColor = theme.v2.palette.text.secondary; const textColor = theme.v2.palette.text.secondary;
const textColorHover = theme.v2.palette.text.primary; const textColorHover = theme.v2.palette.text.primary;
const bg = theme.colors.bodyBg; const bg = theme.v2.components.input.background;
// remove the group inner padding (set on RadioButtonGroup)
const labelHeight = height * theme.v2.spacing.gridSize - 4;
return { return {
radio: css` radio: css`
@@ -91,9 +93,9 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
display: inline-block; display: inline-block;
position: relative; position: relative;
font-size: ${fontSize}; font-size: ${fontSize};
height: ${theme.v2.spacing(height)}; height: ${labelHeight}px;
// Deduct border from line-height for perfect vertical centering on windows and linux // Deduct border from line-height for perfect vertical centering on windows and linux
line-height: ${theme.v2.spacing(height)}; line-height: ${labelHeight - 2}px;
color: ${textColor}; color: ${textColor};
padding: ${theme.v2.spacing(0, padding)}; padding: ${theme.v2.spacing(0, padding)};
border-radius: ${theme.v2.shape.borderRadius()}; border-radius: ${theme.v2.shape.borderRadius()};

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

@@ -75,7 +75,7 @@ const getStyles = (theme: GrafanaTheme) => {
display: 'inline-flex', display: 'inline-flex',
flexDirection: 'row', flexDirection: 'row',
flexWrap: 'nowrap', flexWrap: 'nowrap',
border: `1px solid ${theme.v2.components.form.border}`, border: `1px solid ${theme.v2.components.input.border}`,
borderRadius: theme.v2.shape.borderRadius(), borderRadius: theme.v2.shape.borderRadius(),
padding: '2px', padding: '2px',
}), }),

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

@@ -10,10 +10,10 @@ export const getFocusStyle = (theme: GrafanaTheme) => css`
`; `;
export const sharedInputStyle = (theme: GrafanaTheme, invalid = false) => { export const sharedInputStyle = (theme: GrafanaTheme, invalid = false) => {
const borderColor = invalid ? theme.v2.palette.error.border : theme.v2.components.form.border; const borderColor = invalid ? theme.v2.palette.error.border : theme.v2.components.input.border;
const borderColorHover = invalid ? theme.v2.palette.error.shade : theme.v2.components.form.borderHover; const borderColorHover = invalid ? theme.v2.palette.error.shade : theme.v2.components.input.borderHover;
const background = theme.v2.components.form.background; const background = theme.v2.components.input.background;
const textColor = theme.v2.components.form.text; const textColor = theme.v2.components.input.text;
return css` return css`
background: ${background}; background: ${background};

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

@@ -20,18 +20,18 @@ export default {
export const Simple = () => { export const Simple = () => {
return ( return (
<div> <div>
<RenderScenario layer="layer0" /> <RenderScenario background="canvas" />
<RenderScenario layer="layer1" /> <RenderScenario background="primary" />
<RenderScenario layer="layer2" /> <RenderScenario background="secondary" />
</div> </div>
); );
}; };
interface ScenarioProps { interface ScenarioProps {
layer: 'layer0' | 'layer1' | 'layer2'; background: 'canvas' | 'primary' | 'secondary';
} }
const RenderScenario = ({ layer }: ScenarioProps) => { const RenderScenario = ({ background }: ScenarioProps) => {
const theme = useTheme(); const theme = useTheme();
const sizes: IconSize[] = ['sm', 'md', 'lg', 'xl', 'xxl']; const sizes: IconSize[] = ['sm', 'md', 'lg', 'xl', 'xxl'];
const icons: IconName[] = ['search', 'trash-alt', 'arrow-left', 'times']; const icons: IconName[] = ['search', 'trash-alt', 'arrow-left', 'times'];
@@ -40,7 +40,7 @@ const RenderScenario = ({ layer }: ScenarioProps) => {
<div <div
className={css` className={css`
padding: 30px; padding: 30px;
background: ${theme.v2.palette[layer]}; background: ${theme.v2.palette.background[background]};
button { button {
margin-right: 8px; margin-right: 8px;
margin-left: 8px; margin-left: 8px;
@@ -48,7 +48,7 @@ const RenderScenario = ({ layer }: ScenarioProps) => {
} }
`} `}
> >
<div>{layer}</div> <div>{background}</div>
{icons.map((icon) => { {icons.map((icon) => {
return sizes.map((size) => ( return sizes.map((size) => (
<span key={icon + size}> <span key={icon + size}>

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

@@ -54,6 +54,7 @@ IconButton.displayName = 'IconButton';
const getStyles = stylesFactory((theme: GrafanaTheme, size: IconSize) => { const getStyles = stylesFactory((theme: GrafanaTheme, size: IconSize) => {
const hoverColor = theme.v2.palette.action.hover; const hoverColor = theme.v2.palette.action.hover;
const pixelSize = getSvgSize(size); const pixelSize = getSvgSize(size);
const hoverSize = pixelSize / 2;
return { return {
button: css` button: css`
@@ -88,10 +89,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme, size: IconSize) => {
transition-duration: 0.2s; transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
z-index: -1; z-index: -1;
bottom: -8px; bottom: -${hoverSize}px;
left: -8px; left: -${hoverSize}px;
right: -8px; right: -${hoverSize}px;
top: -8px; top: -${hoverSize}px;
background: none; background: none;
border-radius: 50%; border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;

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

@@ -31,10 +31,10 @@ const getStyles = (theme: GrafanaTheme) => {
return { return {
header: css` header: css`
padding: ${theme.v2.spacing(0.5, 0.5, 1, 0.5)}; padding: ${theme.v2.spacing(0.5, 0.5, 1, 0.5)};
border-bottom: 1px solid ${theme.v2.palette.border1}; border-bottom: 1px solid ${theme.v2.palette.border.medium};
`, `,
wrapper: css` wrapper: css`
background: ${theme.v2.palette.layer2}; background: ${theme.v2.palette.background.secondary};
box-shadow: ${theme.v2.shadows.z2}; box-shadow: ${theme.v2.shadows.z2};
display: inline-block; display: inline-block;
border-radius: ${theme.v2.shape.borderRadius()}; border-radius: ${theme.v2.shape.borderRadius()};

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

@@ -3,6 +3,7 @@ import { GrafanaTheme } from '@grafana/data';
import { stylesFactory } from '../../themes'; import { stylesFactory } from '../../themes';
export const getModalStyles = stylesFactory((theme: GrafanaTheme) => { export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
// rgba(1,4,9,0.8)
const backdropBackground = 'rgba(0, 0, 0, 0.5)'; const backdropBackground = 'rgba(0, 0, 0, 0.5)';
const borderRadius = theme.v2.shape.borderRadius(2); const borderRadius = theme.v2.shape.borderRadius(2);
@@ -10,7 +11,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
modal: css` modal: css`
position: fixed; position: fixed;
z-index: ${theme.v2.zIndex.modal}; z-index: ${theme.v2.zIndex.modal};
background: ${theme.v2.palette.layer1}; background: ${theme.v2.palette.background.primary};
box-shadow: ${theme.v2.shadows.z4}; box-shadow: ${theme.v2.shadows.z4};
border-radius: ${borderRadius}; border-radius: ${borderRadius};
background-clip: padding-box; background-clip: padding-box;

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

@@ -132,7 +132,7 @@ const getStyles = (theme: GrafanaTheme) => {
return { return {
toolbar: css` toolbar: css`
display: flex; display: flex;
background: ${theme.v2.palette.layer0}; background: ${theme.v2.palette.background.canvas};
justify-content: flex-end; justify-content: flex-end;
flex-wrap: wrap; flex-wrap: wrap;
padding: ${theme.v2.spacing(0, 1, 1, 2)}; padding: ${theme.v2.spacing(0, 1, 1, 2)};

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

@@ -11,7 +11,7 @@ import { GrafanaTheme } from '@grafana/data';
const getStyles = stylesFactory((theme: GrafanaTheme) => { const getStyles = stylesFactory((theme: GrafanaTheme) => {
const singleValue = css` const singleValue = css`
label: singleValue; label: singleValue;
color: ${theme.v2.components.form.text}; color: ${theme.v2.components.input.text};
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

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

@@ -6,7 +6,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
return { return {
menu: css` menu: css`
label: grafana-select-menu; label: grafana-select-menu;
background: ${theme.v2.palette.layer2}; background: ${theme.v2.palette.background.secondary};
box-shadow: ${theme.v2.shadows.z3}; box-shadow: ${theme.v2.shadows.z3};
position: relative; position: relative;
min-width: 100%; min-width: 100%;
@@ -56,7 +56,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
`, `,
singleValue: css` singleValue: css`
label: grafana-select-single-value; label: grafana-select-single-value;
color: ${theme.v2.components.form.text}; color: ${theme.v2.components.input.text};
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -88,7 +88,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 1; line-height: 1;
background: ${theme.v2.palette.layer2}; background: ${theme.v2.palette.background.secondary};
border-radius: ${theme.v2.shape.borderRadius()}; border-radius: ${theme.v2.shape.borderRadius()};
margin: ${theme.v2.spacing(0, 1, 0, 0)}; margin: ${theme.v2.spacing(0, 1, 0, 0)};
padding: ${theme.v2.spacing(0.25, 0, 0.25, 1)}; padding: ${theme.v2.spacing(0.25, 0, 0.25, 1)};

2
packages/grafana-ui/src/components/Slider/styles.ts
View File

@@ -12,7 +12,7 @@ export const getFocusStyle = (theme: GrafanaTheme) => css`
export const getStyles = stylesFactory((theme: GrafanaTheme, isHorizontal: boolean) => { export const getStyles = stylesFactory((theme: GrafanaTheme, isHorizontal: boolean) => {
const { spacing } = theme; const { spacing } = theme;
const railColor = theme.v2.palette.border2; const railColor = theme.v2.palette.border.strong;
const trackColor = theme.v2.palette.primary.main; const trackColor = theme.v2.palette.primary.main;
const handleColor = theme.v2.palette.primary.main; const handleColor = theme.v2.palette.primary.main;
const blueOpacity = theme.v2.palette.primary.transparent; const blueOpacity = theme.v2.palette.primary.transparent;

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

@@ -127,8 +127,8 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme, transparent?: boolea
height: ${theme.v2.spacing(theme.v2.components.height.md)}; height: ${theme.v2.spacing(theme.v2.components.height.md)};
display: flex; display: flex;
align-items: center; align-items: center;
background: ${transparent ? 'transparent' : theme.v2.components.form.background}; background: ${transparent ? 'transparent' : theme.v2.components.input.background};
border: 1px solid ${transparent ? 'transparent' : theme.v2.components.form.border}; border: 1px solid ${transparent ? 'transparent' : theme.v2.components.input.border};
border-radius: ${theme.v2.shape.borderRadius()}; border-radius: ${theme.v2.shape.borderRadius()};
`, `,
}; };

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

@@ -11,7 +11,7 @@ const getTabContentStyle = stylesFactory((theme: GrafanaTheme) => {
return { return {
tabContent: css` tabContent: css`
padding: ${theme.spacing.sm}; padding: ${theme.spacing.sm};
background: ${theme.v2.palette.layer1}; background: ${theme.v2.palette.background.primary};
`, `,
}; };
}); });

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

@@ -12,13 +12,11 @@ export interface Props {
} }
const getTabsBarStyles = stylesFactory((theme: GrafanaTheme, hideBorder = false) => { const getTabsBarStyles = stylesFactory((theme: GrafanaTheme, hideBorder = false) => {
const colors = theme.colors;
return { return {
tabsWrapper: tabsWrapper:
!hideBorder && !hideBorder &&
css` css`
border-bottom: 1px solid ${colors.pageHeaderBorder}; border-bottom: 1px solid ${theme.v2.palette.border.weak};
`, `,
tabs: css` tabs: css`
position: relative; position: relative;

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

@@ -85,13 +85,13 @@ export const ThemeDemo = () => {
color: ${t.palette.text.primary}; color: ${t.palette.text.primary};
`} `}
> >
<DemoBox bg={t.palette.layer0}> <DemoBox bg={t.palette.background.canvas}>
<CollapsableSection label="Layers" isOpen={true}> <CollapsableSection label="Layers" isOpen={true}>
<DemoText>t.palette.layer0</DemoText> <DemoText>t.palette.background.canvas</DemoText>
<DemoBox bg={t.palette.layer1} border={t.palette.border0}> <DemoBox bg={t.palette.background.primary} border={t.palette.border.weak}>
<DemoText>t.palette.layer1 is the main & preferred content </DemoText> <DemoText>t.palette.background.primary is the main & preferred content </DemoText>
<DemoBox bg={t.palette.layer2} border={t.palette.border0}> <DemoBox bg={t.palette.background.secondary} border={t.palette.border.weak}>
<DemoText>t.palette.layer2 and t.palette.border.layer1</DemoText> <DemoText>t.palette.background.secondary and t.palette.border.layer1</DemoText>
</DemoBox> </DemoBox>
</DemoBox> </DemoBox>
</CollapsableSection> </CollapsableSection>
@@ -100,16 +100,16 @@ export const ThemeDemo = () => {
<DemoBox> <DemoBox>
<TextColors t={t} /> <TextColors t={t} />
</DemoBox> </DemoBox>
<DemoBox bg={t.palette.layer1}> <DemoBox bg={t.palette.background.primary}>
<TextColors t={t} /> <TextColors t={t} />
</DemoBox> </DemoBox>
<DemoBox bg={t.palette.layer2}> <DemoBox bg={t.palette.background.secondary}>
<TextColors t={t} /> <TextColors t={t} />
</DemoBox> </DemoBox>
</HorizontalGroup> </HorizontalGroup>
</CollapsableSection> </CollapsableSection>
<CollapsableSection label="Rich colors" isOpen={true}> <CollapsableSection label="Rich colors" isOpen={true}>
<DemoBox bg={t.palette.layer1}> <DemoBox bg={t.palette.background.primary}>
<table className={colorsTableStyle}> <table className={colorsTableStyle}>
<thead> <thead>
<tr> <tr>
@@ -128,7 +128,7 @@ export const ThemeDemo = () => {
</DemoBox> </DemoBox>
</CollapsableSection> </CollapsableSection>
<CollapsableSection label="Forms" isOpen={true}> <CollapsableSection label="Forms" isOpen={true}>
<DemoBox bg={t.palette.layer1}> <DemoBox bg={t.palette.background.primary}>
<Field label="Input label" description="Field description"> <Field label="Input label" description="Field description">
<Input placeholder="Placeholder" /> <Input placeholder="Placeholder" />
</Field> </Field>
@@ -166,7 +166,7 @@ export const ThemeDemo = () => {
</DemoBox> </DemoBox>
</CollapsableSection> </CollapsableSection>
<CollapsableSection label="Shadows" isOpen={true}> <CollapsableSection label="Shadows" isOpen={true}>
<DemoBox bg={t.palette.layer1}> <DemoBox bg={t.palette.background.primary}>
<HorizontalGroup> <HorizontalGroup>
{Object.keys(t.shadows).map((key) => ( {Object.keys(t.shadows).map((key) => (
<ShadowDemo name={key} shadow={(t.shadows as any)[key]} key={key} /> <ShadowDemo name={key} shadow={(t.shadows as any)[key]} key={key} />
@@ -175,7 +175,7 @@ export const ThemeDemo = () => {
</DemoBox> </DemoBox>
</CollapsableSection> </CollapsableSection>
<CollapsableSection label="Buttons" isOpen={true}> <CollapsableSection label="Buttons" isOpen={true}>
<DemoBox bg={t.palette.layer1}> <DemoBox bg={t.palette.background.primary}>
<VerticalGroup spacing="lg"> <VerticalGroup spacing="lg">
<HorizontalGroup> <HorizontalGroup>
{allButtonVariants.map((variant) => ( {allButtonVariants.map((variant) => (
@@ -319,7 +319,7 @@ export function ActionsDemo() {
return ( return (
<HorizontalGroup> <HorizontalGroup>
<DemoBox bg={t.palette.layer0}> <DemoBox bg={t.palette.background.canvas}>
<VerticalGroup> <VerticalGroup>
<div className={item}>item</div> <div className={item}>item</div>
<div className={item}>item</div> <div className={item}>item</div>
@@ -328,7 +328,7 @@ export function ActionsDemo() {
<div className={cx(item, focused)}>item focused</div> <div className={cx(item, focused)}>item focused</div>
</VerticalGroup> </VerticalGroup>
</DemoBox> </DemoBox>
<DemoBox bg={t.palette.layer1}> <DemoBox bg={t.palette.background.primary}>
<VerticalGroup> <VerticalGroup>
<div className={item}>item</div> <div className={item}>item</div>
<div className={item}>item</div> <div className={item}>item</div>
@@ -337,7 +337,7 @@ export function ActionsDemo() {
<div className={cx(item, focused)}>item focused</div> <div className={cx(item, focused)}>item focused</div>
</VerticalGroup> </VerticalGroup>
</DemoBox> </DemoBox>
<DemoBox bg={t.palette.layer2}> <DemoBox bg={t.palette.background.secondary}>
<VerticalGroup> <VerticalGroup>
<div className={item}>item</div> <div className={item}>item</div>
<div className={item}>item</div> <div className={item}>item</div>

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

@@ -14,14 +14,14 @@ import { TimePickerFooter } from './TimePickerFooter';
const getStyles = stylesFactory((theme: GrafanaTheme, isReversed, hideQuickRanges, isContainerTall) => { const getStyles = stylesFactory((theme: GrafanaTheme, isReversed, hideQuickRanges, isContainerTall) => {
return { return {
container: css` container: css`
background: ${theme.v2.palette.layer2}; background: ${theme.v2.palette.background.secondary};
box-shadow: ${theme.v2.shadows.z4}; box-shadow: ${theme.v2.shadows.z4};
position: absolute; position: absolute;
z-index: ${theme.zIndex.dropdown}; z-index: ${theme.zIndex.dropdown};
width: 546px; width: 546px;
top: 116%; top: 116%;
border-radius: 2px; border-radius: 2px;
border: 1px solid ${theme.v2.palette.border0}; border: 1px solid ${theme.v2.palette.border.weak};
${isReversed ? 'left' : 'right'}: 0; ${isReversed ? 'left' : 'right'}: 0;
@media only screen and (max-width: ${theme.breakpoints.lg}) { @media only screen and (max-width: ${theme.breakpoints.lg}) {
@@ -35,14 +35,14 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isReversed, hideQuickRange
leftSide: css` leftSide: css`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-right: ${isReversed ? 'none' : `1px solid ${theme.v2.palette.divider}`}; border-right: ${isReversed ? 'none' : `1px solid ${theme.v2.palette.border.weak}`};
width: ${!hideQuickRanges ? '60%' : '100%'}; width: ${!hideQuickRanges ? '60%' : '100%'};
overflow: hidden; overflow: hidden;
order: ${isReversed ? 1 : 0}; order: ${isReversed ? 1 : 0};
`, `,
rightSide: css` rightSide: css`
width: 40% !important; width: 40% !important;
border-right: ${isReversed ? `1px solid ${theme.v2.palette.divider}` : 'none'}; border-right: ${isReversed ? `1px solid ${theme.v2.palette.border.weak}` : 'none'};
@media only screen and (max-width: ${theme.breakpoints.lg}) { @media only screen and (max-width: ${theme.breakpoints.lg}) {
width: 100% !important; width: 100% !important;
@@ -61,11 +61,11 @@ const getNarrowScreenStyles = stylesFactory((theme: GrafanaTheme) => {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid ${theme.v2.palette.divider}; border-bottom: 1px solid ${theme.v2.palette.border.weak};
padding: 7px 9px 7px 9px; padding: 7px 9px 7px 9px;
`, `,
body: css` body: css`
border-bottom: 1px solid ${theme.v2.palette.divider}; border-bottom: 1px solid ${theme.v2.palette.border.weak};
`, `,
form: css` form: css`
padding: 7px 9px 7px 9px; padding: 7px 9px 7px 9px;

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

@@ -85,7 +85,7 @@ export const TimePickerFooter: FC<Props> = (props) => {
const getStyle = stylesFactory((theme: GrafanaTheme) => { const getStyle = stylesFactory((theme: GrafanaTheme) => {
return { return {
container: css` container: css`
border-top: 1px solid ${theme.v2.palette.divider}; border-top: 1px solid ${theme.v2.palette.border.weak};
padding: 11px; padding: 11px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;

2
packages/grafana-ui/src/themes/GlobalStyles/elements.ts
View File

@@ -18,7 +18,7 @@ export function getElementStyles(theme: GrafanaThemeV2) {
width: 100%; width: 100%;
position: absolute; position: absolute;
color: ${theme.palette.text.primary}; color: ${theme.palette.text.primary};
background-color: ${theme.palette.layer0}; background-color: ${theme.palette.background.canvas};
${getVariantStyles(theme.typography.body)} ${getVariantStyles(theme.typography.body)}
} }

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

@@ -55,14 +55,14 @@ $gray-6: ${theme.palette.gray6};
$input-black: ${theme.colors.formInputBg}; $input-black: ${theme.colors.formInputBg};
$white: ${theme.palette.white}; $white: ${theme.palette.white};
$layer0: ${theme.v2.palette.layer0}; $layer0: ${theme.v2.palette.background.canvas};
$layer1: ${theme.v2.palette.layer1}; $layer1: ${theme.v2.palette.background.primary};
$layer2: ${theme.v2.palette.layer2}; $layer2: ${theme.v2.palette.background.secondary};
$divider: ${theme.v2.palette.divider}; $divider: ${theme.v2.palette.border.weak};
$border0: ${theme.v2.palette.border0}; $border0: ${theme.v2.palette.border.weak};
$border1: ${theme.v2.palette.border1}; $border1: ${theme.v2.palette.border.medium};
// Accent colors // Accent colors
// ------------------------- // -------------------------
@@ -141,16 +141,16 @@ $page-header-border-color: ${theme.colors.pageHeaderBorder};
$divider-border-color: $gray-1; $divider-border-color: $gray-1;
// Graphite Target Editor // Graphite Target Editor
$tight-form-func-bg: ${theme.v2.palette.layer2}; $tight-form-func-bg: ${theme.v2.palette.background.secondary};
$tight-form-func-highlight-bg: ${theme.v2.palette.emphasize(theme.v2.palette.layer2, 0.03)}; $tight-form-func-highlight-bg: ${theme.v2.palette.emphasize(theme.v2.palette.background.secondary, 0.03)};
$modal-backdrop-bg: ${theme.colors.bg3}; $modal-backdrop-bg: ${theme.colors.bg3};
$code-tag-bg: $dark-1; $code-tag-bg: $dark-1;
$code-tag-border: $dark-9; $code-tag-border: $dark-9;
// cards // cards
$card-background: ${theme.v2.palette.layer2}; $card-background: ${theme.v2.palette.background.secondary};
$card-background-hover: ${theme.v2.palette.emphasize(theme.v2.palette.layer2, 0.03)}; $card-background-hover: ${theme.v2.palette.emphasize(theme.v2.palette.background.secondary, 0.03)};
$card-shadow: none; $card-shadow: none;
// Lists // Lists
@@ -167,10 +167,10 @@ $scrollbarBorder: black;
// Tables // Tables
// ------------------------- // -------------------------
$table-bg-accent: ${theme.v2.palette.layer2}; $table-bg-accent: ${theme.v2.palette.background.secondary};
$table-border: ${theme.v2.palette.border1}; $table-border: ${theme.v2.palette.border.medium};
$table-bg-odd: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.02)}; $table-bg-odd: ${theme.v2.palette.emphasize(theme.v2.palette.background.primary, 0.02)};
$table-bg-hover: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.05)}; $table-bg-hover: ${theme.v2.palette.emphasize(theme.v2.palette.background.primary, 0.05)};
// Buttons // Buttons
// ------------------------- // -------------------------
@@ -228,10 +228,10 @@ $typeahead-selected-color: $yellow;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
$dropdownBackground: ${theme.v2.palette.layer2}; $dropdownBackground: ${theme.v2.palette.background.secondary};
$dropdownBorder: ${theme.v2.palette.border0}; $dropdownBorder: ${theme.v2.palette.border.weak};
$dropdownDividerTop: ${theme.v2.palette.divider}; $dropdownDividerTop: ${theme.v2.palette.border.weak};
$dropdownDividerBottom: ${theme.v2.palette.divider}; $dropdownDividerBottom: ${theme.v2.palette.border.weak};
$dropdownLinkColor: $link-color; $dropdownLinkColor: $link-color;
$dropdownLinkColorHover: $white; $dropdownLinkColorHover: $white;
@@ -259,7 +259,7 @@ $side-menu-header-color: ${theme.colors.text};
// Menu dropdowns // Menu dropdowns
// ------------------------- // -------------------------
$menu-dropdown-bg: ${theme.v2.palette.layer2}; $menu-dropdown-bg: ${theme.v2.palette.background.secondary};
$menu-dropdown-hover-bg: ${theme.v2.palette.action.hover}; $menu-dropdown-hover-bg: ${theme.v2.palette.action.hover};
$menu-dropdown-shadow: ${theme.v2.shadows.z3}; $menu-dropdown-shadow: ${theme.v2.shadows.z3};
@@ -284,16 +284,16 @@ $tooltipArrowWidth: 5px;
$tooltipLinkColor: $link-color; $tooltipLinkColor: $link-color;
$graph-tooltip-bg: $dark-1; $graph-tooltip-bg: $dark-1;
$tooltipBackground: ${theme.v2.palette.layer2}; $tooltipBackground: ${theme.v2.palette.background.secondary};
$tooltipColor: ${theme.v2.palette.text.primary}; $tooltipColor: ${theme.v2.palette.text.primary};
$tooltipArrowColor: ${theme.v2.palette.layer2}; $tooltipArrowColor: ${theme.v2.palette.background.secondary};
$tooltipBackgroundError: ${theme.v2.palette.error.main}; $tooltipBackgroundError: ${theme.v2.palette.error.main};
$tooltipShadow: ${theme.v2.shadows.z2}; $tooltipShadow: ${theme.v2.shadows.z2};
$popover-bg: ${theme.v2.palette.layer2}; $popover-bg: ${theme.v2.palette.background.secondary};
$popover-color: ${theme.v2.palette.text.primary}; $popover-color: ${theme.v2.palette.text.primary};
$popover-border-color: ${theme.v2.palette.border1}; $popover-border-color: ${theme.v2.palette.border.medium};
$popover-header-bg: ${theme.v2.palette.layer2}; $popover-header-bg: ${theme.v2.palette.background.secondary};
$popover-shadow: ${theme.v2.shadows.z4}; $popover-shadow: ${theme.v2.shadows.z4};
$popover-help-bg: $tooltipBackground; $popover-help-bg: $tooltipBackground;

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

@@ -51,14 +51,14 @@ $gray-7: ${theme.palette.gray7};
$white: ${theme.palette.white}; $white: ${theme.palette.white};
$layer0: ${theme.v2.palette.layer0}; $layer0: ${theme.v2.palette.background.canvas};
$layer1: ${theme.v2.palette.layer1}; $layer1: ${theme.v2.palette.background.primary};
$layer2: ${theme.v2.palette.layer2}; $layer2: ${theme.v2.palette.background.secondary};
$divider: ${theme.v2.palette.divider}; $divider: ${theme.v2.palette.border.weak};
$border0: ${theme.v2.palette.border0}; $border0: ${theme.v2.palette.border.weak};
$border1: ${theme.v2.palette.border1}; $border1: ${theme.v2.palette.border.medium};
// Accent colors // Accent colors
// ------------------------- // -------------------------
@@ -144,8 +144,8 @@ $code-tag-bg: $gray-6;
$code-tag-border: $gray-4; $code-tag-border: $gray-4;
// cards // cards
$card-background: ${theme.v2.palette.layer2}; $card-background: ${theme.v2.palette.background.secondary};
$card-background-hover: ${theme.v2.palette.layer2}; $card-background-hover: ${theme.v2.palette.background.secondary};
$card-shadow: none; $card-shadow: none;
// Lists // Lists
@@ -162,10 +162,10 @@ $scrollbarBorder: $gray-7;
// Tables // Tables
// ------------------------- // -------------------------
$table-bg-accent: ${theme.v2.palette.layer2}; $table-bg-accent: ${theme.v2.palette.background.secondary};
$table-border: ${theme.v2.palette.border1}; $table-border: ${theme.v2.palette.border.medium};
$table-bg-odd: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.02)}; $table-bg-odd: ${theme.v2.palette.emphasize(theme.v2.palette.background.primary, 0.02)};
$table-bg-hover: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.05)}; $table-bg-hover: ${theme.v2.palette.emphasize(theme.v2.palette.background.primary, 0.05)};
// Buttons // Buttons
// ------------------------- // -------------------------
@@ -223,10 +223,10 @@ $typeahead-selected-color: $yellow;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
$dropdownBackground: ${theme.v2.palette.layer2}; $dropdownBackground: ${theme.v2.palette.background.secondary};
$dropdownBorder: ${theme.v2.palette.border0}; $dropdownBorder: ${theme.v2.palette.border.weak};
$dropdownDividerTop: ${theme.v2.palette.divider}; $dropdownDividerTop: ${theme.v2.palette.border.weak};
$dropdownDividerBottom: ${theme.v2.palette.divider}; $dropdownDividerBottom: ${theme.v2.palette.border.weak};
$dropdownLinkColor: $dark-2; $dropdownLinkColor: $dark-2;
$dropdownLinkColorHover: $link-color; $dropdownLinkColorHover: $link-color;
@@ -256,7 +256,7 @@ $side-menu-header-color: ${theme.palette.gray95};
// Menu dropdowns // Menu dropdowns
// ------------------------- // -------------------------
$menu-dropdown-bg: ${theme.v2.palette.layer2}; $menu-dropdown-bg: ${theme.v2.palette.background.secondary};
$menu-dropdown-hover-bg: ${theme.v2.palette.action.hover}; $menu-dropdown-hover-bg: ${theme.v2.palette.action.hover};
$menu-dropdown-shadow: ${theme.v2.shadows.z3}; $menu-dropdown-shadow: ${theme.v2.shadows.z3};
@@ -276,16 +276,16 @@ $alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); $alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
// Tooltips and popovers // Tooltips and popovers
$tooltipBackground: ${theme.v2.palette.layer2}; $tooltipBackground: ${theme.v2.palette.background.secondary};
$tooltipColor: ${theme.v2.palette.text.primary}; $tooltipColor: ${theme.v2.palette.text.primary};
$tooltipArrowColor: ${theme.v2.palette.layer2}; $tooltipArrowColor: ${theme.v2.palette.background.secondary};
$tooltipBackgroundError: ${theme.v2.palette.error.main}; $tooltipBackgroundError: ${theme.v2.palette.error.main};
$tooltipShadow: ${theme.v2.shadows.z2}; $tooltipShadow: ${theme.v2.shadows.z2};
$popover-bg: ${theme.v2.palette.layer2}; $popover-bg: ${theme.v2.palette.background.secondary};
$popover-color: ${theme.v2.palette.text.primary}; $popover-color: ${theme.v2.palette.text.primary};
$popover-border-color: ${theme.v2.palette.border1}; $popover-border-color: ${theme.v2.palette.border.medium};
$popover-header-bg: ${theme.v2.palette.layer2}; $popover-header-bg: ${theme.v2.palette.background.secondary};
$popover-shadow: ${theme.v2.shadows.z4}; $popover-shadow: ${theme.v2.shadows.z4};
$graph-tooltip-bg: $gray-5; $graph-tooltip-bg: $gray-5;

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

@@ -37,18 +37,18 @@ const basicColors = {
}; };
const backgrounds = { const backgrounds = {
bg1: v2.palette.layer1, bg1: v2.palette.background.primary,
bg2: v2.palette.layer2, bg2: v2.palette.background.secondary,
bg3: v2.palette.action.hover, bg3: v2.palette.action.hover,
dashboardBg: v2.palette.layer0, dashboardBg: v2.palette.background.canvas,
bgBlue1: v2.palette.primary.main, bgBlue1: v2.palette.primary.main,
bgBlue2: v2.palette.primary.shade, bgBlue2: v2.palette.primary.shade,
}; };
const borders = { const borders = {
border1: v2.palette.border0, border1: v2.palette.border.weak,
border2: v2.palette.border1, border2: v2.palette.border.medium,
border3: v2.palette.border2, border3: v2.palette.border.strong,
}; };
const textColors = { const textColors = {
@@ -114,11 +114,11 @@ const darkTheme: GrafanaTheme = {
...form, ...form,
...textColors, ...textColors,
bodyBg: backgrounds.bg1, bodyBg: v2.palette.background.canvas,
panelBg: backgrounds.bg1, panelBg: v2.components.panel.background,
pageHeaderBg: backgrounds.bg2, panelBorder: v2.components.panel.border,
pageHeaderBorder: borders.border1, pageHeaderBg: v2.palette.background.canvas,
panelBorder: borders.border1, pageHeaderBorder: v2.palette.background.canvas,
dropdownBg: form.formInputBg, dropdownBg: form.formInputBg,
dropdownShadow: basicColors.black, dropdownShadow: basicColors.black,

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

@@ -36,18 +36,18 @@ const basicColors = {
}; };
const backgrounds = { const backgrounds = {
bg1: v2.palette.layer1, bg1: v2.palette.background.primary,
bg2: v2.palette.layer2, bg2: v2.palette.background.secondary,
bg3: v2.palette.action.hover, bg3: v2.palette.action.hover,
dashboardBg: v2.palette.layer0, dashboardBg: v2.palette.background.canvas,
bgBlue1: basicColors.blue80, bgBlue1: basicColors.blue80,
bgBlue2: basicColors.blue77, bgBlue2: basicColors.blue77,
}; };
const borders = { const borders = {
border1: v2.palette.border0, border1: v2.palette.border.weak,
border2: v2.palette.border1, border2: v2.palette.border.medium,
border3: v2.palette.border2, border3: v2.palette.border.strong,
}; };
const textColors = { const textColors = {
@@ -113,7 +113,7 @@ const lightTheme: GrafanaTheme = {
...textColors, ...textColors,
...form, ...form,
bodyBg: backgrounds.bg1, bodyBg: v2.palette.background.canvas,
panelBg: backgrounds.bg1, panelBg: backgrounds.bg1,
pageHeaderBg: backgrounds.bg2, pageHeaderBg: backgrounds.bg2,
pageHeaderBorder: borders.border1, pageHeaderBorder: borders.border1,

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

@@ -49,8 +49,7 @@ export const focusCss = (theme: GrafanaTheme) => `
export function getMouseFocusStyles(theme: GrafanaThemeV2): CSSObject { export function getMouseFocusStyles(theme: GrafanaThemeV2): CSSObject {
return { return {
outline: 'none', outline: 'none',
boxShadow: `${theme.shadows.z1}`, boxShadow: `none`,
transition: theme.transitions.create('box-shadow'),
}; };
} }
@@ -58,7 +57,7 @@ export function getFocusStyles(theme: GrafanaThemeV2): CSSObject {
return { return {
outline: '2px dotted transparent', outline: '2px dotted transparent',
outlineOffset: '2px', outlineOffset: '2px',
boxShadow: `0 0 0 2px ${theme.palette.layer0}, 0 0 0px 4px ${theme.palette.primary.main}`, boxShadow: `0 0 0 2px ${theme.palette.background.canvas}, 0 0 0px 4px ${theme.palette.primary.main}`,
transition: `all 0.2s cubic-bezier(0.19, 1, 0.22, 1)`, transition: `all 0.2s cubic-bezier(0.19, 1, 0.22, 1)`,
}; };
} }

2
packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx
View File

@@ -12,7 +12,7 @@ const PaddedStory: React.FunctionComponent<{}> = ({ children }) => {
padding: '20px', padding: '20px',
display: 'flex', display: 'flex',
minHeight: '80vh', minHeight: '80vh',
background: `${theme.v2.palette.layer1}`, background: `${theme.v2.palette.background.primary}`,
}} }}
> >
<GlobalStyles /> <GlobalStyles />

4
public/app/core/components/PageHeader/PageHeader.tsx
View File

@@ -139,8 +139,8 @@ function renderTitle(title: string, breadcrumbs: NavModelBreadcrumb[]) {
const getStyles = (theme: GrafanaTheme) => ({ const getStyles = (theme: GrafanaTheme) => ({
headerCanvas: css` headerCanvas: css`
background: ${theme.v2.palette.layer0}; background: ${theme.v2.palette.background.canvas};
border-bottom: 1px solid ${theme.v2.palette.border0}; border-bottom: 1px solid ${theme.v2.palette.border.weak};
`, `,
}); });

4
public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
View File

@@ -2,7 +2,7 @@
exports[`Render should render component 1`] = ` exports[`Render should render component 1`] = `
<div <div
className="panel-container css-bopjp7" className="panel-container css-ozhi9g"
> >
<AddPanelWidgetHandle <AddPanelWidgetHandle
onCancel={[Function]} onCancel={[Function]}
@@ -15,7 +15,7 @@ exports[`Render should render component 1`] = `
"libraryPanelsWrapper": "css-18m13of", "libraryPanelsWrapper": "css-18m13of",
"noMargin": "css-u023fv", "noMargin": "css-u023fv",
"panelSearchInput": "css-2ug8g3", "panelSearchInput": "css-2ug8g3",
"wrapper": "css-bopjp7", "wrapper": "css-ozhi9g",
} }
} }
> >

17
public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
View File

@@ -90,7 +90,7 @@ export const OptionsPaneCategory: FC<OptionsPaneCategoryProps> = React.memo(
const getStyles = (theme: GrafanaTheme) => { const getStyles = (theme: GrafanaTheme) => {
return { return {
box: css` box: css`
border-bottom: 1px solid ${theme.v2.palette.divider}; border-bottom: 1px solid ${theme.v2.palette.border.weak};
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
@@ -102,7 +102,7 @@ const getStyles = (theme: GrafanaTheme) => {
margin-bottom: ${theme.spacing.formSpacingBase * 2}px; margin-bottom: ${theme.spacing.formSpacingBase * 2}px;
`, `,
toggle: css` toggle: css`
color: ${theme.colors.textWeak}; color: ${theme.v2.palette.text.secondary};
margin-right: ${theme.spacing.sm}; margin-right: ${theme.spacing.sm};
`, `,
title: css` title: css`
@@ -113,23 +113,22 @@ const getStyles = (theme: GrafanaTheme) => {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
align-items: baseline; align-items: baseline;
padding: ${theme.spacing.sm}; padding: ${theme.v2.spacing(1)};
color: ${theme.v2.palette.text.primary}; color: ${theme.v2.palette.text.primary};
font-weight: ${theme.typography.weight.semibold}; font-weight: ${theme.v2.typography.fontWeightMedium};
&:hover { &:hover {
background: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.03)}; background: ${theme.v2.palette.emphasize(theme.v2.palette.background.primary, 0.03)};
} }
`, `,
headerExpanded: css` headerExpanded: css`
color: ${theme.v2.palette.text.primary}; color: ${theme.v2.palette.text.primary};
`, `,
headerNested: css` headerNested: css`
padding-left: 0; padding: ${theme.v2.spacing(0.5, 0, 0.5, 0)};
padding-right: 0;
`, `,
body: css` body: css`
padding: ${theme.spacing.sm} ${theme.spacing.md} ${theme.spacing.sm} ${theme.spacing.xl}; padding: ${theme.v2.spacing(1, 2, 1, 4)};
`, `,
bodyNested: css` bodyNested: css`
position: relative; position: relative;
@@ -141,7 +140,7 @@ const getStyles = (theme: GrafanaTheme) => {
left: 8px; left: 8px;
width: 1px; width: 1px;
height: 100%; height: 100%;
background: ${theme.colors.pageHeaderBorder}; background: ${theme.v2.palette.border.weak};
} }
`, `,
}; };

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

@@ -180,7 +180,7 @@ const getStyles = (theme: GrafanaTheme) => ({
`, `,
mainBox: css` mainBox: css`
background: ${theme.colors.bg1}; background: ${theme.colors.bg1};
border: 1px solid ${theme.colors.border1}; border: 1px solid ${theme.v2.components.panel.border};
border-top: none; border-top: none;
flex-grow: 1; flex-grow: 1;
`, `,

10
public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
View File

@@ -36,7 +36,7 @@ export const PanelEditorTabs: FC<PanelEditorTabsProps> = React.memo(({ panel, da
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
<TabsBar className={styles.tabBar}> <TabsBar className={styles.tabBar} hideBorder>
{tabs.map((tab) => { {tabs.map((tab) => {
return ( return (
<Tab <Tab
@@ -91,12 +91,8 @@ const getStyles = (theme: GrafanaTheme) => {
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
min-height: 0; min-height: 0;
background: ${theme.colors.panelBg}; background: ${theme.v2.palette.background.primary};
border-right: 1px solid ${theme.colors.pageHeaderBorder}; border-right: 1px solid ${theme.v2.components.panel.border};
.toolbar {
background: transparent;
}
`, `,
}; };
}; };

4
public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx
View File

@@ -69,7 +69,7 @@ const getStyles = (theme: GrafanaTheme) => {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
background: ${theme.v2.palette.layer2}; background: ${theme.v2.palette.background.secondary};
border-radius: ${theme.v2.shape.borderRadius()}; border-radius: ${theme.v2.shape.borderRadius()};
box-shadow: ${theme.v2.shadows.z0}; box-shadow: ${theme.v2.shadows.z0};
align-items: center; align-items: center;
@@ -83,7 +83,7 @@ const getStyles = (theme: GrafanaTheme) => {
})}; })};
&:hover { &:hover {
background: ${styleMixins.hoverColor(theme.v2.palette.layer2, theme)}; background: ${styleMixins.hoverColor(theme.v2.palette.background.secondary, theme)};
} }
`, `,
itemContent: css` itemContent: css`

2
public/app/features/query/components/QueryEditorRowTitle.tsx
View File

@@ -137,7 +137,7 @@ const getQueryEditorRowTitleStyles = stylesFactory((theme: GrafanaTheme) => {
&:hover { &:hover {
.query-name-wrapper { .query-name-wrapper {
background: ${theme.v2.palette.action.hover}; background: ${theme.v2.palette.action.hover};
border: 1px dashed ${theme.v2.palette.border1}; border: 1px dashed ${theme.v2.palette.border.medium};
} }
.query-name-edit-icon { .query-name-edit-icon {

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

@@ -64,7 +64,7 @@ $layer2: #22252b;
$divider: rgba(201, 209, 217, 0.10); $divider: rgba(201, 209, 217, 0.10);
$border0: #181b1f; $border0: rgba(201, 209, 217, 0.10);
$border1: rgba(201, 209, 217, 0.15); $border1: rgba(201, 209, 217, 0.15);
// Accent colors // Accent colors
@@ -94,8 +94,8 @@ $critical: #e02f44;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
$body-bg: #181b1f; $body-bg: #111217;
$page-bg: #181b1f; $page-bg: #111217;
$dashboard-bg: #111217; $dashboard-bg: #111217;
$text-color-strong: #fff; $text-color-strong: #fff;
@@ -137,9 +137,9 @@ $panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0
$panel-corner: $panel-bg; $panel-corner: $panel-bg;
// page header // page header
$page-header-bg: #22252b; $page-header-bg: #111217;
$page-header-shadow: inset 0px -4px 14px $dark-3; $page-header-shadow: inset 0px -4px 14px $dark-3;
$page-header-border-color: #181b1f; $page-header-border-color: #111217;
$divider-border-color: $gray-1; $divider-border-color: $gray-1;
@@ -232,7 +232,7 @@ $typeahead-selected-color: $yellow;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
$dropdownBackground: #22252b; $dropdownBackground: #22252b;
$dropdownBorder: #181b1f; $dropdownBorder: rgba(201, 209, 217, 0.10);
$dropdownDividerTop: rgba(201, 209, 217, 0.10); $dropdownDividerTop: rgba(201, 209, 217, 0.10);
$dropdownDividerBottom: rgba(201, 209, 217, 0.10); $dropdownDividerBottom: rgba(201, 209, 217, 0.10);

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

@@ -59,7 +59,7 @@ $layer2: #F4F5F5;
$divider: rgba(36, 41, 46, 0.12); $divider: rgba(36, 41, 46, 0.12);
$border0: #fff; $border0: rgba(36, 41, 46, 0.12);
$border1: rgba(36, 41, 46, 0.30); $border1: rgba(36, 41, 46, 0.30);
// Accent colors // Accent colors
@@ -89,8 +89,8 @@ $critical: #c4162a;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
$body-bg: #fff; $body-bg: #F4F5F5;
$page-bg: #fff; $page-bg: #F4F5F5;
$dashboard-bg: #F4F5F5; $dashboard-bg: #F4F5F5;
$text-color: rgba(36, 41, 46, 1); $text-color: rgba(36, 41, 46, 1);
@@ -133,7 +133,7 @@ $panel-corner: $panel-bg;
// Page header // Page header
$page-header-bg: #F4F5F5; $page-header-bg: #F4F5F5;
$page-header-shadow: inset 0px -3px 10px $gray-6; $page-header-shadow: inset 0px -3px 10px $gray-6;
$page-header-border-color: #fff; $page-header-border-color: rgba(36, 41, 46, 0.12);
$divider-border-color: $gray-2; $divider-border-color: $gray-2;
@@ -226,7 +226,7 @@ $typeahead-selected-color: $yellow;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
$dropdownBackground: #F4F5F5; $dropdownBackground: #F4F5F5;
$dropdownBorder: #fff; $dropdownBorder: rgba(36, 41, 46, 0.12);
$dropdownDividerTop: rgba(36, 41, 46, 0.12); $dropdownDividerTop: rgba(36, 41, 46, 0.12);
$dropdownDividerBottom: rgba(36, 41, 46, 0.12); $dropdownDividerBottom: rgba(36, 41, 46, 0.12);