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

Chore: Migrate usage of v1 theme to v2 (#58154)

Browse Source
This commit is contained in:
kay delaney
2022-11-03 18:15:55 +00:00
committed by GitHub
parent c1b10e4f0c
commit a8c181bf6a
42 changed files with 390 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx
View File

@@ -3,48 +3,48 @@ import React from 'react';
import ReactDiffViewer, { ReactDiffViewerProps, DiffMethod } from 'react-diff-viewer';
import tinycolor from 'tinycolor2';
import { useTheme } from '@grafana/ui';
import { useTheme2 } from '@grafana/ui';
export const DiffViewer: React.FC<ReactDiffViewerProps> = ({ oldValue, newValue }) => {
const theme = useTheme();
const theme = useTheme2();
const styles = {
variables: {
// the light theme supplied by ReactDiffViewer is very similar to Grafana
// the dark theme needs some tweaks.
dark: {
diffViewerBackground: theme.colors.dashboardBg,
diffViewerColor: theme.colors.text,
addedBackground: tinycolor(theme.palette.greenShade).setAlpha(0.3).toString(),
diffViewerBackground: theme.colors.background.canvas,
diffViewerColor: theme.colors.text.primary,
addedBackground: tinycolor(theme.v1.palette.greenShade).setAlpha(0.3).toString(),
addedColor: 'white',
removedBackground: tinycolor(theme.palette.redShade).setAlpha(0.3).toString(),
removedBackground: tinycolor(theme.v1.palette.redShade).setAlpha(0.3).toString(),
removedColor: 'white',
wordAddedBackground: tinycolor(theme.palette.greenBase).setAlpha(0.4).toString(),
wordRemovedBackground: tinycolor(theme.palette.redBase).setAlpha(0.4).toString(),
addedGutterBackground: tinycolor(theme.palette.greenShade).setAlpha(0.2).toString(),
removedGutterBackground: tinycolor(theme.palette.redShade).setAlpha(0.2).toString(),
gutterBackground: theme.colors.bg1,
gutterBackgroundDark: theme.colors.bg1,
highlightBackground: tinycolor(theme.colors.bgBlue1).setAlpha(0.4).toString(),
highlightGutterBackground: tinycolor(theme.colors.bgBlue2).setAlpha(0.2).toString(),
codeFoldGutterBackground: theme.colors.bg2,
codeFoldBackground: theme.colors.bg2,
emptyLineBackground: theme.colors.bg2,
gutterColor: theme.colors.textFaint,
addedGutterColor: theme.colors.text,
removedGutterColor: theme.colors.text,
codeFoldContentColor: theme.colors.textFaint,
diffViewerTitleBackground: theme.colors.bg2,
diffViewerTitleColor: theme.colors.textFaint,
diffViewerTitleBorderColor: theme.colors.border3,
wordAddedBackground: tinycolor(theme.v1.palette.greenBase).setAlpha(0.4).toString(),
wordRemovedBackground: tinycolor(theme.v1.palette.redBase).setAlpha(0.4).toString(),
addedGutterBackground: tinycolor(theme.v1.palette.greenShade).setAlpha(0.2).toString(),
removedGutterBackground: tinycolor(theme.v1.palette.redShade).setAlpha(0.2).toString(),
gutterBackground: theme.colors.background.primary,
gutterBackgroundDark: theme.colors.background.primary,
highlightBackground: tinycolor(theme.colors.primary.main).setAlpha(0.4).toString(),
highlightGutterBackground: tinycolor(theme.colors.primary.shade).setAlpha(0.2).toString(),
codeFoldGutterBackground: theme.colors.background.secondary,
codeFoldBackground: theme.colors.background.secondary,
emptyLineBackground: theme.colors.background.secondary,
gutterColor: theme.colors.text.disabled,
addedGutterColor: theme.colors.text.primary,
removedGutterColor: theme.colors.text.primary,
codeFoldContentColor: theme.colors.text.disabled,
diffViewerTitleBackground: theme.colors.background.secondary,
diffViewerTitleColor: theme.colors.text.disabled,
diffViewerTitleBorderColor: theme.colors.border.strong,
},
},
codeFold: {
fontSize: theme.typography.size.sm,
fontSize: theme.typography.bodySmall.fontSize,
},
gutter: `
pre {
color: ${tinycolor(theme.colors.textFaint).setAlpha(1).toString()};
color: ${tinycolor(theme.colors.text.disabled).setAlpha(1).toString()};
opacity: 0.61;
}
`,
@@ -53,7 +53,7 @@ export const DiffViewer: React.FC<ReactDiffViewerProps> = ({ oldValue, newValue
return (
<div
className={css`
font-size: ${theme.typography.size.sm};
font-size: ${theme.typography.bodySmall.fontSize};
// prevent global styles interfering with diff viewer
pre {
all: revert;