mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Theme: Renames theme.palette to theme.colors (#33214)
* Theme: Rename theme.palette to theme.colors * renaming files
This commit is contained in:
@@ -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};
|
||||
`,
|
||||
});
|
||||
|
||||
|
||||
@@ -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,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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};
|
||||
`,
|
||||
};
|
||||
|
||||
+2
-2
@@ -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;
|
||||
`,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user