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

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

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

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

@@ -8,13 +8,15 @@ describe('createTheme', () => {
primary: {
main: 'rgb(240,0,0)',
},
layer0: '#123',
background: {
canvas: '#123',
},
},
});
expect(custom.palette.primary.main).toBe('rgb(240,0,0)');
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', () => {

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

@@ -13,9 +13,9 @@ const createTheme = (theme: GrafanaTheme) => {
colorSecondary: theme.v2.palette.error.main,
// UI
appBg: theme.v2.palette.layer0,
appContentBg: theme.v2.palette.layer1,
appBorderColor: theme.v2.palette.border1,
appBg: theme.v2.palette.background.canvas,
appContentBg: theme.v2.palette.background.primary,
appBorderColor: theme.v2.palette.border.medium,
appBorderRadius: theme.v2.shape.borderRadius(1),
// Typography
@@ -29,12 +29,12 @@ const createTheme = (theme: GrafanaTheme) => {
// Toolbar default and active colors
barTextColor: theme.v2.palette.text.primary,
barSelectedColor: theme.v2.palette.emphasize(theme.v2.palette.primary.text),
barBg: theme.v2.palette.layer1,
barBg: theme.v2.palette.background.primary,
// Form colors
inputBg: theme.v2.components.form.background,
inputBorder: theme.v2.components.form.border,
inputTextColor: theme.v2.components.form.text,
inputBg: theme.v2.components.input.background,
inputBorder: theme.v2.components.input.border,
inputTextColor: theme.v2.components.input.text,
inputBorderRadius: theme.v2.shape.borderRadius(1),
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;
flex-direction: row;
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};
&:before {
@@ -89,7 +89,7 @@ const getStyles = (theme: GrafanaTheme, severity: AlertVariant, elevated?: boole
left: 0;
bottom: 0;
right: 0;
background: ${theme.v2.palette.layer1};
background: ${theme.v2.palette.background.primary};
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()};
line-height: ${theme.v2.components.height.md * theme.v2.spacing.gridSize - 2}px;
font-weight: ${theme.v2.typography.fontWeightMedium};
border: 1px solid ${theme.v2.palette.border1};
border: 1px solid ${theme.v2.palette.border.medium};
white-space: nowrap;
transition: ${theme.v2.transitions.create(['background', 'box-shadow', 'border-color', 'color'], {
duration: theme.v2.transitions.duration.short,
@@ -154,11 +154,11 @@ const getStyles = (theme: GrafanaTheme) => {
`,
default: css`
color: ${theme.v2.palette.text.secondary};
background-color: ${theme.v2.palette.layer1};
background-color: ${theme.v2.palette.background.primary};
&:hover {
color: ${theme.v2.palette.text.primary};
background: ${theme.v2.palette.layer2};
background: ${theme.v2.palette.background.secondary};
}
`,
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({
display: 'flex',
width: '100%',
background: theme.v2.palette.layer2,
background: theme.v2.palette.background.secondary,
borderRadius: theme.v2.shape.borderRadius(),
position: 'relative',
pointerEvents: disabled ? 'none' : 'auto',
@@ -151,7 +151,7 @@ const getContainerStyles = stylesFactory((theme: GrafanaTheme, disabled = false,
...(!disableHover && {
'&: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',
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 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 {
radio: css`
@@ -91,9 +93,9 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
display: inline-block;
position: relative;
font-size: ${fontSize};
height: ${theme.v2.spacing(height)};
height: ${labelHeight}px;
// 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};
padding: ${theme.v2.spacing(0, padding)};
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',
flexDirection: 'row',
flexWrap: 'nowrap',
border: `1px solid ${theme.v2.components.form.border}`,
border: `1px solid ${theme.v2.components.input.border}`,
borderRadius: theme.v2.shape.borderRadius(),
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) => {
const borderColor = invalid ? theme.v2.palette.error.border : theme.v2.components.form.border;
const borderColorHover = invalid ? theme.v2.palette.error.shade : theme.v2.components.form.borderHover;
const background = theme.v2.components.form.background;
const textColor = theme.v2.components.form.text;
const borderColor = invalid ? theme.v2.palette.error.border : theme.v2.components.input.border;
const borderColorHover = invalid ? theme.v2.palette.error.shade : theme.v2.components.input.borderHover;
const background = theme.v2.components.input.background;
const textColor = theme.v2.components.input.text;
return css`
background: ${background};

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

@@ -20,18 +20,18 @@ export default {
export const Simple = () => {
return (
<div>
<RenderScenario layer="layer0" />
<RenderScenario layer="layer1" />
<RenderScenario layer="layer2" />
<RenderScenario background="canvas" />
<RenderScenario background="primary" />
<RenderScenario background="secondary" />
</div>
);
};
interface ScenarioProps {
layer: 'layer0' | 'layer1' | 'layer2';
background: 'canvas' | 'primary' | 'secondary';
}
const RenderScenario = ({ layer }: ScenarioProps) => {
const RenderScenario = ({ background }: ScenarioProps) => {
const theme = useTheme();
const sizes: IconSize[] = ['sm', 'md', 'lg', 'xl', 'xxl'];
const icons: IconName[] = ['search', 'trash-alt', 'arrow-left', 'times'];
@@ -40,7 +40,7 @@ const RenderScenario = ({ layer }: ScenarioProps) => {
<div
className={css`
padding: 30px;
background: ${theme.v2.palette[layer]};
background: ${theme.v2.palette.background[background]};
button {
margin-right: 8px;
margin-left: 8px;
@@ -48,7 +48,7 @@ const RenderScenario = ({ layer }: ScenarioProps) => {
}
`}
>
<div>{layer}</div>
<div>{background}</div>
{icons.map((icon) => {
return sizes.map((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 hoverColor = theme.v2.palette.action.hover;
const pixelSize = getSvgSize(size);
const hoverSize = pixelSize / 2;
return {
button: css`
@@ -88,10 +89,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme, size: IconSize) => {
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
z-index: -1;
bottom: -8px;
left: -8px;
right: -8px;
top: -8px;
bottom: -${hoverSize}px;
left: -${hoverSize}px;
right: -${hoverSize}px;
top: -${hoverSize}px;
background: none;
border-radius: 50%;
box-sizing: border-box;

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

@@ -31,10 +31,10 @@ const getStyles = (theme: GrafanaTheme) => {
return {
header: css`
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`
background: ${theme.v2.palette.layer2};
background: ${theme.v2.palette.background.secondary};
box-shadow: ${theme.v2.shadows.z2};
display: inline-block;
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';
export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
// rgba(1,4,9,0.8)
const backdropBackground = 'rgba(0, 0, 0, 0.5)';
const borderRadius = theme.v2.shape.borderRadius(2);
@@ -10,7 +11,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
modal: css`
position: fixed;
z-index: ${theme.v2.zIndex.modal};
background: ${theme.v2.palette.layer1};
background: ${theme.v2.palette.background.primary};
box-shadow: ${theme.v2.shadows.z4};
border-radius: ${borderRadius};
background-clip: padding-box;

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

@@ -132,7 +132,7 @@ const getStyles = (theme: GrafanaTheme) => {
return {
toolbar: css`
display: flex;
background: ${theme.v2.palette.layer0};
background: ${theme.v2.palette.background.canvas};
justify-content: flex-end;
flex-wrap: wrap;
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 singleValue = css`
label: singleValue;
color: ${theme.v2.components.form.text};
color: ${theme.v2.components.input.text};
white-space: nowrap;
overflow: hidden;
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 {
menu: css`
label: grafana-select-menu;
background: ${theme.v2.palette.layer2};
background: ${theme.v2.palette.background.secondary};
box-shadow: ${theme.v2.shadows.z3};
position: relative;
min-width: 100%;
@@ -56,7 +56,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
`,
singleValue: css`
label: grafana-select-single-value;
color: ${theme.v2.components.form.text};
color: ${theme.v2.components.input.text};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -88,7 +88,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
display: flex;
align-items: center;
line-height: 1;
background: ${theme.v2.palette.layer2};
background: ${theme.v2.palette.background.secondary};
border-radius: ${theme.v2.shape.borderRadius()};
margin: ${theme.v2.spacing(0, 1, 0, 0)};
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) => {
const { spacing } = theme;
const railColor = theme.v2.palette.border2;
const railColor = theme.v2.palette.border.strong;
const trackColor = theme.v2.palette.primary.main;
const handleColor = theme.v2.palette.primary.main;
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)};
display: flex;
align-items: center;
background: ${transparent ? 'transparent' : theme.v2.components.form.background};
border: 1px solid ${transparent ? 'transparent' : theme.v2.components.form.border};
background: ${transparent ? 'transparent' : theme.v2.components.input.background};
border: 1px solid ${transparent ? 'transparent' : theme.v2.components.input.border};
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 {
tabContent: css`
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 colors = theme.colors;
return {
tabsWrapper:
!hideBorder &&
css`
border-bottom: 1px solid ${colors.pageHeaderBorder};
border-bottom: 1px solid ${theme.v2.palette.border.weak};
`,
tabs: css`
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};
`}
>
<DemoBox bg={t.palette.layer0}>
<DemoBox bg={t.palette.background.canvas}>
<CollapsableSection label="Layers" isOpen={true}>
<DemoText>t.palette.layer0</DemoText>
<DemoBox bg={t.palette.layer1} border={t.palette.border0}>
<DemoText>t.palette.layer1 is the main & preferred content </DemoText>
<DemoBox bg={t.palette.layer2} border={t.palette.border0}>
<DemoText>t.palette.layer2 and t.palette.border.layer1</DemoText>
<DemoText>t.palette.background.canvas</DemoText>
<DemoBox bg={t.palette.background.primary} border={t.palette.border.weak}>
<DemoText>t.palette.background.primary is the main & preferred content </DemoText>
<DemoBox bg={t.palette.background.secondary} border={t.palette.border.weak}>
<DemoText>t.palette.background.secondary and t.palette.border.layer1</DemoText>
</DemoBox>
</DemoBox>
</CollapsableSection>
@@ -100,16 +100,16 @@ export const ThemeDemo = () => {
<DemoBox>
<TextColors t={t} />
</DemoBox>
<DemoBox bg={t.palette.layer1}>
<DemoBox bg={t.palette.background.primary}>
<TextColors t={t} />
</DemoBox>
<DemoBox bg={t.palette.layer2}>
<DemoBox bg={t.palette.background.secondary}>
<TextColors t={t} />
</DemoBox>
</HorizontalGroup>
</CollapsableSection>
<CollapsableSection label="Rich colors" isOpen={true}>
<DemoBox bg={t.palette.layer1}>
<DemoBox bg={t.palette.background.primary}>
<table className={colorsTableStyle}>
<thead>
<tr>
@@ -128,7 +128,7 @@ export const ThemeDemo = () => {
</DemoBox>
</CollapsableSection>
<CollapsableSection label="Forms" isOpen={true}>
<DemoBox bg={t.palette.layer1}>
<DemoBox bg={t.palette.background.primary}>
<Field label="Input label" description="Field description">
<Input placeholder="Placeholder" />
</Field>
@@ -166,7 +166,7 @@ export const ThemeDemo = () => {
</DemoBox>
</CollapsableSection>
<CollapsableSection label="Shadows" isOpen={true}>
<DemoBox bg={t.palette.layer1}>
<DemoBox bg={t.palette.background.primary}>
<HorizontalGroup>
{Object.keys(t.shadows).map((key) => (
<ShadowDemo name={key} shadow={(t.shadows as any)[key]} key={key} />
@@ -175,7 +175,7 @@ export const ThemeDemo = () => {
</DemoBox>
</CollapsableSection>
<CollapsableSection label="Buttons" isOpen={true}>
<DemoBox bg={t.palette.layer1}>
<DemoBox bg={t.palette.background.primary}>
<VerticalGroup spacing="lg">
<HorizontalGroup>
{allButtonVariants.map((variant) => (
@@ -319,7 +319,7 @@ export function ActionsDemo() {
return (
<HorizontalGroup>
<DemoBox bg={t.palette.layer0}>
<DemoBox bg={t.palette.background.canvas}>
<VerticalGroup>
<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>
</VerticalGroup>
</DemoBox>
<DemoBox bg={t.palette.layer1}>
<DemoBox bg={t.palette.background.primary}>
<VerticalGroup>
<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>
</VerticalGroup>
</DemoBox>
<DemoBox bg={t.palette.layer2}>
<DemoBox bg={t.palette.background.secondary}>
<VerticalGroup>
<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) => {
return {
container: css`
background: ${theme.v2.palette.layer2};
background: ${theme.v2.palette.background.secondary};
box-shadow: ${theme.v2.shadows.z4};
position: absolute;
z-index: ${theme.zIndex.dropdown};
width: 546px;
top: 116%;
border-radius: 2px;
border: 1px solid ${theme.v2.palette.border0};
border: 1px solid ${theme.v2.palette.border.weak};
${isReversed ? 'left' : 'right'}: 0;
@media only screen and (max-width: ${theme.breakpoints.lg}) {
@@ -35,14 +35,14 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isReversed, hideQuickRange
leftSide: css`
display: flex;
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%'};
overflow: hidden;
order: ${isReversed ? 1 : 0};
`,
rightSide: css`
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}) {
width: 100% !important;
@@ -61,11 +61,11 @@ const getNarrowScreenStyles = stylesFactory((theme: GrafanaTheme) => {
flex-direction: row;
justify-content: space-between;
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;
`,
body: css`
border-bottom: 1px solid ${theme.v2.palette.divider};
border-bottom: 1px solid ${theme.v2.palette.border.weak};
`,
form: css`
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) => {
return {
container: css`
border-top: 1px solid ${theme.v2.palette.divider};
border-top: 1px solid ${theme.v2.palette.border.weak};
padding: 11px;
display: flex;
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%;
position: absolute;
color: ${theme.palette.text.primary};
background-color: ${theme.palette.layer0};
background-color: ${theme.palette.background.canvas};
${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};
$white: ${theme.palette.white};
$layer0: ${theme.v2.palette.layer0};
$layer1: ${theme.v2.palette.layer1};
$layer2: ${theme.v2.palette.layer2};
$layer0: ${theme.v2.palette.background.canvas};
$layer1: ${theme.v2.palette.background.primary};
$layer2: ${theme.v2.palette.background.secondary};
$divider: ${theme.v2.palette.divider};
$divider: ${theme.v2.palette.border.weak};
$border0: ${theme.v2.palette.border0};
$border1: ${theme.v2.palette.border1};
$border0: ${theme.v2.palette.border.weak};
$border1: ${theme.v2.palette.border.medium};
// Accent colors
// -------------------------
@@ -141,16 +141,16 @@ $page-header-border-color: ${theme.colors.pageHeaderBorder};
$divider-border-color: $gray-1;
// Graphite Target Editor
$tight-form-func-bg: ${theme.v2.palette.layer2};
$tight-form-func-highlight-bg: ${theme.v2.palette.emphasize(theme.v2.palette.layer2, 0.03)};
$tight-form-func-bg: ${theme.v2.palette.background.secondary};
$tight-form-func-highlight-bg: ${theme.v2.palette.emphasize(theme.v2.palette.background.secondary, 0.03)};
$modal-backdrop-bg: ${theme.colors.bg3};
$code-tag-bg: $dark-1;
$code-tag-border: $dark-9;
// cards
$card-background: ${theme.v2.palette.layer2};
$card-background-hover: ${theme.v2.palette.emphasize(theme.v2.palette.layer2, 0.03)};
$card-background: ${theme.v2.palette.background.secondary};
$card-background-hover: ${theme.v2.palette.emphasize(theme.v2.palette.background.secondary, 0.03)};
$card-shadow: none;
// Lists
@@ -167,10 +167,10 @@ $scrollbarBorder: black;
// Tables
// -------------------------
$table-bg-accent: ${theme.v2.palette.layer2};
$table-border: ${theme.v2.palette.border1};
$table-bg-odd: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.02)};
$table-bg-hover: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.05)};
$table-bg-accent: ${theme.v2.palette.background.secondary};
$table-border: ${theme.v2.palette.border.medium};
$table-bg-odd: ${theme.v2.palette.emphasize(theme.v2.palette.background.primary, 0.02)};
$table-bg-hover: ${theme.v2.palette.emphasize(theme.v2.palette.background.primary, 0.05)};
// Buttons
// -------------------------
@@ -228,10 +228,10 @@ $typeahead-selected-color: $yellow;
// Dropdowns
// -------------------------
$dropdownBackground: ${theme.v2.palette.layer2};
$dropdownBorder: ${theme.v2.palette.border0};
$dropdownDividerTop: ${theme.v2.palette.divider};
$dropdownDividerBottom: ${theme.v2.palette.divider};
$dropdownBackground: ${theme.v2.palette.background.secondary};
$dropdownBorder: ${theme.v2.palette.border.weak};
$dropdownDividerTop: ${theme.v2.palette.border.weak};
$dropdownDividerBottom: ${theme.v2.palette.border.weak};
$dropdownLinkColor: $link-color;
$dropdownLinkColorHover: $white;
@@ -259,7 +259,7 @@ $side-menu-header-color: ${theme.colors.text};
// 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-shadow: ${theme.v2.shadows.z3};
@@ -284,16 +284,16 @@ $tooltipArrowWidth: 5px;
$tooltipLinkColor: $link-color;
$graph-tooltip-bg: $dark-1;
$tooltipBackground: ${theme.v2.palette.layer2};
$tooltipBackground: ${theme.v2.palette.background.secondary};
$tooltipColor: ${theme.v2.palette.text.primary};
$tooltipArrowColor: ${theme.v2.palette.layer2};
$tooltipArrowColor: ${theme.v2.palette.background.secondary};
$tooltipBackgroundError: ${theme.v2.palette.error.main};
$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-border-color: ${theme.v2.palette.border1};
$popover-header-bg: ${theme.v2.palette.layer2};
$popover-border-color: ${theme.v2.palette.border.medium};
$popover-header-bg: ${theme.v2.palette.background.secondary};
$popover-shadow: ${theme.v2.shadows.z4};
$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};
$layer0: ${theme.v2.palette.layer0};
$layer1: ${theme.v2.palette.layer1};
$layer2: ${theme.v2.palette.layer2};
$layer0: ${theme.v2.palette.background.canvas};
$layer1: ${theme.v2.palette.background.primary};
$layer2: ${theme.v2.palette.background.secondary};
$divider: ${theme.v2.palette.divider};
$divider: ${theme.v2.palette.border.weak};
$border0: ${theme.v2.palette.border0};
$border1: ${theme.v2.palette.border1};
$border0: ${theme.v2.palette.border.weak};
$border1: ${theme.v2.palette.border.medium};
// Accent colors
// -------------------------
@@ -144,8 +144,8 @@ $code-tag-bg: $gray-6;
$code-tag-border: $gray-4;
// cards
$card-background: ${theme.v2.palette.layer2};
$card-background-hover: ${theme.v2.palette.layer2};
$card-background: ${theme.v2.palette.background.secondary};
$card-background-hover: ${theme.v2.palette.background.secondary};
$card-shadow: none;
// Lists
@@ -162,10 +162,10 @@ $scrollbarBorder: $gray-7;
// Tables
// -------------------------
$table-bg-accent: ${theme.v2.palette.layer2};
$table-border: ${theme.v2.palette.border1};
$table-bg-odd: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.02)};
$table-bg-hover: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.05)};
$table-bg-accent: ${theme.v2.palette.background.secondary};
$table-border: ${theme.v2.palette.border.medium};
$table-bg-odd: ${theme.v2.palette.emphasize(theme.v2.palette.background.primary, 0.02)};
$table-bg-hover: ${theme.v2.palette.emphasize(theme.v2.palette.background.primary, 0.05)};
// Buttons
// -------------------------
@@ -223,10 +223,10 @@ $typeahead-selected-color: $yellow;
// Dropdowns
// -------------------------
$dropdownBackground: ${theme.v2.palette.layer2};
$dropdownBorder: ${theme.v2.palette.border0};
$dropdownDividerTop: ${theme.v2.palette.divider};
$dropdownDividerBottom: ${theme.v2.palette.divider};
$dropdownBackground: ${theme.v2.palette.background.secondary};
$dropdownBorder: ${theme.v2.palette.border.weak};
$dropdownDividerTop: ${theme.v2.palette.border.weak};
$dropdownDividerBottom: ${theme.v2.palette.border.weak};
$dropdownLinkColor: $dark-2;
$dropdownLinkColorHover: $link-color;
@@ -256,7 +256,7 @@ $side-menu-header-color: ${theme.palette.gray95};
// 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-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);
// Tooltips and popovers
$tooltipBackground: ${theme.v2.palette.layer2};
$tooltipBackground: ${theme.v2.palette.background.secondary};
$tooltipColor: ${theme.v2.palette.text.primary};
$tooltipArrowColor: ${theme.v2.palette.layer2};
$tooltipArrowColor: ${theme.v2.palette.background.secondary};
$tooltipBackgroundError: ${theme.v2.palette.error.main};
$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-border-color: ${theme.v2.palette.border1};
$popover-header-bg: ${theme.v2.palette.layer2};
$popover-border-color: ${theme.v2.palette.border.medium};
$popover-header-bg: ${theme.v2.palette.background.secondary};
$popover-shadow: ${theme.v2.shadows.z4};
$graph-tooltip-bg: $gray-5;

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

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

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

@@ -36,18 +36,18 @@ const basicColors = {
};
const backgrounds = {
bg1: v2.palette.layer1,
bg2: v2.palette.layer2,
bg1: v2.palette.background.primary,
bg2: v2.palette.background.secondary,
bg3: v2.palette.action.hover,
dashboardBg: v2.palette.layer0,
dashboardBg: v2.palette.background.canvas,
bgBlue1: basicColors.blue80,
bgBlue2: basicColors.blue77,
};
const borders = {
border1: v2.palette.border0,
border2: v2.palette.border1,
border3: v2.palette.border2,
border1: v2.palette.border.weak,
border2: v2.palette.border.medium,
border3: v2.palette.border.strong,
};
const textColors = {
@@ -113,7 +113,7 @@ const lightTheme: GrafanaTheme = {
...textColors,
...form,
bodyBg: backgrounds.bg1,
bodyBg: v2.palette.background.canvas,
panelBg: backgrounds.bg1,
pageHeaderBg: backgrounds.bg2,
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 {
return {
outline: 'none',
boxShadow: `${theme.shadows.z1}`,
transition: theme.transitions.create('box-shadow'),
boxShadow: `none`,
};
}
@@ -58,7 +57,7 @@ export function getFocusStyles(theme: GrafanaThemeV2): CSSObject {
return {
outline: '2px dotted transparent',
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)`,
};
}

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

@@ -12,7 +12,7 @@ const PaddedStory: React.FunctionComponent<{}> = ({ children }) => {
padding: '20px',
display: 'flex',
minHeight: '80vh',
background: `${theme.v2.palette.layer1}`,
background: `${theme.v2.palette.background.primary}`,
}}
>
<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) => ({
headerCanvas: css`
background: ${theme.v2.palette.layer0};
border-bottom: 1px solid ${theme.v2.palette.border0};
background: ${theme.v2.palette.background.canvas};
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`] = `
<div
className="panel-container css-bopjp7"
className="panel-container css-ozhi9g"
>
<AddPanelWidgetHandle
onCancel={[Function]}
@@ -15,7 +15,7 @@ exports[`Render should render component 1`] = `
"libraryPanelsWrapper": "css-18m13of",
"noMargin": "css-u023fv",
"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) => {
return {
box: css`
border-bottom: 1px solid ${theme.v2.palette.divider};
border-bottom: 1px solid ${theme.v2.palette.border.weak};
&:last-child {
border-bottom: none;
}
@@ -102,7 +102,7 @@ const getStyles = (theme: GrafanaTheme) => {
margin-bottom: ${theme.spacing.formSpacingBase * 2}px;
`,
toggle: css`
color: ${theme.colors.textWeak};
color: ${theme.v2.palette.text.secondary};
margin-right: ${theme.spacing.sm};
`,
title: css`
@@ -113,23 +113,22 @@ const getStyles = (theme: GrafanaTheme) => {
display: flex;
cursor: pointer;
align-items: baseline;
padding: ${theme.spacing.sm};
padding: ${theme.v2.spacing(1)};
color: ${theme.v2.palette.text.primary};
font-weight: ${theme.typography.weight.semibold};
font-weight: ${theme.v2.typography.fontWeightMedium};
&: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`
color: ${theme.v2.palette.text.primary};
`,
headerNested: css`
padding-left: 0;
padding-right: 0;
padding: ${theme.v2.spacing(0.5, 0, 0.5, 0)};
`,
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`
position: relative;
@@ -141,7 +140,7 @@ const getStyles = (theme: GrafanaTheme) => {
left: 8px;
width: 1px;
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`
background: ${theme.colors.bg1};
border: 1px solid ${theme.colors.border1};
border: 1px solid ${theme.v2.components.panel.border};
border-top: none;
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 (
<div className={styles.wrapper}>
<TabsBar className={styles.tabBar}>
<TabsBar className={styles.tabBar} hideBorder>
{tabs.map((tab) => {
return (
<Tab
@@ -91,12 +91,8 @@ const getStyles = (theme: GrafanaTheme) => {
flex-direction: column;
flex-grow: 1;
min-height: 0;
background: ${theme.colors.panelBg};
border-right: 1px solid ${theme.colors.pageHeaderBorder};
.toolbar {
background: transparent;
}
background: ${theme.v2.palette.background.primary};
border-right: 1px solid ${theme.v2.components.panel.border};
`,
};
};

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

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

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

@@ -137,7 +137,7 @@ const getQueryEditorRowTitleStyles = stylesFactory((theme: GrafanaTheme) => {
&:hover {
.query-name-wrapper {
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 {

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

@@ -64,7 +64,7 @@ $layer2: #22252b;
$divider: rgba(201, 209, 217, 0.10);
$border0: #181b1f;
$border0: rgba(201, 209, 217, 0.10);
$border1: rgba(201, 209, 217, 0.15);
// Accent colors
@@ -94,8 +94,8 @@ $critical: #e02f44;
// Scaffolding
// -------------------------
$body-bg: #181b1f;
$page-bg: #181b1f;
$body-bg: #111217;
$page-bg: #111217;
$dashboard-bg: #111217;
$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;
// page header
$page-header-bg: #22252b;
$page-header-bg: #111217;
$page-header-shadow: inset 0px -4px 14px $dark-3;
$page-header-border-color: #181b1f;
$page-header-border-color: #111217;
$divider-border-color: $gray-1;
@@ -232,7 +232,7 @@ $typeahead-selected-color: $yellow;
// Dropdowns
// -------------------------
$dropdownBackground: #22252b;
$dropdownBorder: #181b1f;
$dropdownBorder: rgba(201, 209, 217, 0.10);
$dropdownDividerTop: 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);
$border0: #fff;
$border0: rgba(36, 41, 46, 0.12);
$border1: rgba(36, 41, 46, 0.30);
// Accent colors
@@ -89,8 +89,8 @@ $critical: #c4162a;
// Scaffolding
// -------------------------
$body-bg: #fff;
$page-bg: #fff;
$body-bg: #F4F5F5;
$page-bg: #F4F5F5;
$dashboard-bg: #F4F5F5;
$text-color: rgba(36, 41, 46, 1);
@@ -133,7 +133,7 @@ $panel-corner: $panel-bg;
// Page header
$page-header-bg: #F4F5F5;
$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;
@@ -226,7 +226,7 @@ $typeahead-selected-color: $yellow;
// Dropdowns
// -------------------------
$dropdownBackground: #F4F5F5;
$dropdownBorder: #fff;
$dropdownBorder: rgba(36, 41, 46, 0.12);
$dropdownDividerTop: rgba(36, 41, 46, 0.12);
$dropdownDividerBottom: rgba(36, 41, 46, 0.12);