Theme: Renames theme.palette to theme.colors (#33214)

* Theme: Rename theme.palette to theme.colors

* renaming files
This commit is contained in:
Torkel Ödegaard
2021-04-21 15:34:08 +02:00
committed by GitHub
parent c37a3bebb7
commit b929822d72
64 changed files with 391 additions and 400 deletions
@@ -139,8 +139,8 @@ function renderTitle(title: string, breadcrumbs: NavModelBreadcrumb[]) {
const getStyles = (theme: GrafanaThemeV2) => ({
headerCanvas: css`
background: ${theme.palette.background.canvas};
border-bottom: 1px solid ${theme.palette.border.weak};
background: ${theme.colors.background.canvas};
border-bottom: 1px solid ${theme.colors.border.weak};
`,
});
+3 -3
View File
@@ -8,7 +8,7 @@ import { createTheme } from '@grafana/data';
export async function toggleTheme(runtimeOnly: boolean) {
const currentTheme = config.theme;
const newTheme = createTheme({
palette: {
colors: {
mode: currentTheme.isDark ? 'light' : 'dark',
},
});
@@ -22,7 +22,7 @@ export async function toggleTheme(runtimeOnly: boolean) {
// Add css file for new theme
const newCssLink = document.createElement('link');
newCssLink.rel = 'stylesheet';
newCssLink.href = config.bootData.themePaths[newTheme.palette.mode];
newCssLink.href = config.bootData.themePaths[newTheme.colors.mode];
document.body.appendChild(newCssLink);
// Remove old css file
@@ -48,6 +48,6 @@ export async function toggleTheme(runtimeOnly: boolean) {
await service.update({
...currentPref,
theme: newTheme.palette.mode,
theme: newTheme.colors.mode,
});
}
+1 -1
View File
@@ -32,7 +32,7 @@ export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
function getCurrentUserTheme() {
return createTheme({
palette: {
colors: {
mode: config.bootData.user.lightTheme ? 'light' : 'dark',
},
});
@@ -89,7 +89,7 @@ export const OptionsPaneCategory: FC<OptionsPaneCategoryProps> = React.memo(
const getStyles = (theme: GrafanaThemeV2) => {
return {
box: css`
border-bottom: 1px solid ${theme.palette.border.weak};
border-bottom: 1px solid ${theme.colors.border.weak};
&:last-child {
border-bottom: none;
}
@@ -101,7 +101,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
margin-bottom: ${theme.spacing(2)};
`,
toggle: css`
color: ${theme.palette.text.secondary};
color: ${theme.colors.text.secondary};
margin-right: ${theme.spacing(1)};
`,
title: css`
@@ -113,15 +113,15 @@ const getStyles = (theme: GrafanaThemeV2) => {
cursor: pointer;
align-items: baseline;
padding: ${theme.spacing(1)};
color: ${theme.palette.text.primary};
color: ${theme.colors.text.primary};
font-weight: ${theme.typography.fontWeightMedium};
&:hover {
background: ${theme.palette.emphasize(theme.palette.background.primary, 0.03)};
background: ${theme.colors.emphasize(theme.colors.background.primary, 0.03)};
}
`,
headerExpanded: css`
color: ${theme.palette.text.primary};
color: ${theme.colors.text.primary};
`,
headerNested: css`
padding: ${theme.spacing(0.5, 0, 0.5, 0)};
@@ -139,7 +139,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
left: 8px;
width: 1px;
height: 100%;
background: ${theme.palette.border.weak};
background: ${theme.colors.border.weak};
}
`,
};
@@ -160,7 +160,7 @@ const getStyles = (theme: GrafanaThemeV2) => ({
`,
formBox: css`
padding: ${theme.spacing(1)};
background: ${theme.palette.background.primary};
background: ${theme.colors.background.primary};
border: 1px solid ${theme.components.panel.border};
border-bottom: none;
`,
@@ -176,12 +176,12 @@ const getStyles = (theme: GrafanaThemeV2) => ({
`,
searchNotice: css`
font-size: ${theme.typography.size.sm};
color: ${theme.palette.text.secondary};
color: ${theme.colors.text.secondary};
padding: ${theme.spacing(1)};
text-align: center;
`,
mainBox: css`
background: ${theme.palette.background.primary};
background: ${theme.colors.background.primary};
border: 1px solid ${theme.components.panel.border};
border-top: none;
flex-grow: 1;
@@ -91,7 +91,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
flex-direction: column;
flex-grow: 1;
min-height: 0;
background: ${theme.palette.background.primary};
background: ${theme.colors.background.primary};
border-right: 1px solid ${theme.components.panel.border};
`,
};
@@ -368,7 +368,7 @@ const TransformationCard: React.FC<CardProps> = (props) => {
const getStyles = (theme: GrafanaThemeV2) => {
return {
card: css`
background: ${theme.palette.background.secondary};
background: ${theme.colors.background.secondary};
width: 100%;
border: none;
padding: ${theme.spacing(1)};
@@ -379,7 +379,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
}
&:hover {
background: ${theme.palette.action.hover};
background: ${theme.colors.action.hover};
box-shadow: none;
border: none;
}
@@ -25,9 +25,9 @@ export const DiffValues: React.FC<DiffProps> = ({ diff }) => {
};
const getStyles = (theme: GrafanaThemeV2) => css`
background-color: ${theme.palette.action.hover};
background-color: ${theme.colors.action.hover};
border-radius: ${theme.shape.borderRadius()};
color: ${theme.palette.text.primary};
color: ${theme.colors.text.primary};
font-size: ${theme.typography.body.fontSize};
margin: 0 ${theme.spacing(0.5)};
padding: ${theme.spacing(0.5, 1)};
@@ -69,7 +69,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
display: flex;
flex-shrink: 0;
cursor: pointer;
background: ${theme.palette.background.secondary};
background: ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius()};
box-shadow: ${theme.shadows.z0};
align-items: center;
@@ -83,7 +83,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
})};
&:hover {
background: ${theme.palette.emphasize(theme.palette.background.secondary, 0.03)};
background: ${theme.colors.emphasize(theme.colors.background.secondary, 0.03)};
}
`,
itemContent: css`
@@ -92,7 +92,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
`,
current: css`
label: currentVisualizationItem;
border-color: ${theme.palette.primary.border};
border-color: ${theme.colors.primary.border};
`,
disabled: css`
opacity: 0.2;
@@ -116,7 +116,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
align-items: center;
`,
badge: css`
background: ${theme.palette.background.primary};
background: ${theme.colors.background.primary};
`,
};
};
@@ -59,7 +59,7 @@ const getStyles = stylesFactory((theme: GrafanaThemeV2) => {
margin: ${theme.spacing(1, 0, 2)};
`,
backdrop: css`
background-color: ${theme.palette.background.canvas};
background-color: ${theme.colors.background.canvas};
opacity: 0.8;
`,
};