Chore: Migrate dashdiff styles to emotion globals (#90818)

* migrate dashdiff styles to emotion globals

* fix colors

packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx

@@ -7,6 +7,7 @@ import { getAlertingStyles } from './alerting';
 import { getAgularPanelStyles } from './angularPanelStyles';
 import { getCardStyles } from './card';
 import { getCodeStyles } from './code';
+import { getDashDiffStyles } from './dashdiff';
 import { getElementStyles } from './elements';
 import { getExtraStyles } from './extra';
 import { getFilterTableStyles } from './filterTable';
@@ -33,6 +34,7 @@ export function GlobalStyles() {
         getAgularPanelStyles(theme),
         getAlertingStyles(theme),
         getCodeStyles(theme),
+        getDashDiffStyles(theme),
         getElementStyles(theme),
         getExtraStyles(theme),
         getFilterTableStyles(theme),

packages/grafana-ui/src/themes/GlobalStyles/dashdiff.ts

@@ -0,0 +1,204 @@
+import { css } from '@emotion/react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+export function getDashDiffStyles(theme: GrafanaTheme2) {
+  return css({
+    '.delta-html': {
+      background: theme.colors.background.secondary,
+      paddingTop: '5px',
+      paddingBottom: '5px',
+      userSelect: 'none',
+    },
+
+    '.diff-line': {
+      color: theme.colors.text.primary,
+      fontFamily: theme.typography.fontFamilyMonospace,
+      fontSize: theme.typography.size.sm,
+      lineHeight: 2,
+      marginBottom: 0,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      position: 'relative',
+
+      '&:after': {
+        left: '-40px',
+      },
+    },
+
+    '.diff-line-number': {
+      color: theme.colors.text.secondary,
+      display: 'inline-block',
+      fontSize: theme.typography.size.xs,
+      lineHeight: 2.3,
+      textAlign: 'right',
+      width: '30px',
+    },
+
+    '.diff-line-number-hide': {
+      visibility: 'hidden',
+    },
+
+    '.diff-line-icon': {
+      color: theme.colors.text.primary,
+      fontSize: theme.typography.size.xs,
+      float: 'right',
+      position: 'relative',
+      top: '2px',
+      right: '10px',
+    },
+
+    '.diff-json-new, .diff-json-old, .diff-json-deleted, .diff-json-added': {
+      color: theme.v1.palette.gray5,
+
+      '.diff-line-number': {
+        color: theme.colors.text.primary,
+      },
+    },
+
+    '.diff-json-new': {
+      backgroundColor: theme.isDark ? '#457740' : '#664e33',
+    },
+    '.diff-json-old': {
+      backgroundColor: theme.isDark ? '#a04338' : '#5a372a',
+    },
+    '.diff-json-added': {
+      backgroundColor: theme.colors.primary.shade,
+    },
+    '.diff-json-deleted': {
+      backgroundColor: theme.colors.error.shade,
+    },
+
+    '.diff-value': {
+      userSelect: 'all',
+    },
+
+    // Basic
+    '.diff-circle': {
+      marginRight: '0.5em',
+      '*': {
+        marginBottom: '1px',
+      },
+    },
+    '.diff-circle-changed': {
+      color: '#f59433',
+    },
+    '.diff-circle-added': {
+      color: '#29d761',
+    },
+    '.diff-circle-deleted': {
+      color: '#fd474a',
+    },
+
+    '.diff-item-added, .diff-item-deleted': {
+      listStyle: 'none',
+    },
+
+    '.diff-group': {
+      background: theme.colors.background.secondary,
+      fontSize: '16px',
+      fontStyle: 'normal',
+      padding: '10px 15px',
+      margin: theme.spacing(2, 0),
+
+      '.diff-group': {
+        padding: '0 5px',
+      },
+    },
+
+    '.diff-group-name': {
+      display: 'inline-block',
+      width: '100%',
+      fontSize: '16px',
+      paddingLeft: '1.75em',
+      margin: '0 0 14px 0',
+    },
+
+    '.diff-summary-key': {
+      paddingLeft: '0.25em',
+    },
+
+    '.diff-list': {
+      paddingLeft: '40px',
+
+      '.diff-list': {
+        paddingLeft: 0,
+      },
+    },
+
+    '.diff-item': {
+      color: theme.v1.palette.gray2,
+      lineHeight: 2.5,
+
+      '> div': {
+        display: 'inline',
+      },
+    },
+
+    '.diff-item-changeset': {
+      listStyle: 'none',
+    },
+
+    '.diff-label': {
+      backgroundColor: theme.colors.action.hover,
+      borderRadius: '3px',
+      color: theme.colors.text.primary,
+      display: 'inline',
+      fontSize: `${theme.typography.fontSize}px`,
+      margin: '0 5px',
+      padding: '3px 8px',
+    },
+
+    '.diff-linenum': {
+      float: 'right',
+    },
+
+    '.diff-arrow': {
+      color: theme.colors.text.primary,
+    },
+
+    '.diff-block': {
+      width: '100%',
+      display: 'inline-block',
+    },
+
+    '.diff-block-title': {
+      fontSize: '16px',
+      display: 'inline-block',
+    },
+
+    '.diff-title': {
+      fontSize: '16px',
+    },
+
+    '.diff-change-container': {
+      margin: '0 0',
+      paddingLeft: '3em',
+      paddingRight: 0,
+    },
+
+    '.diff-change-group': {
+      width: '100%',
+      color: theme.colors.text.primary,
+      marginBottom: '14px',
+    },
+
+    '.diff-change-item': {
+      display: 'inline-block',
+    },
+
+    '.diff-change-title': {
+      fontSize: '16px',
+    },
+
+    '.bullet-position-container': {
+      position: 'relative',
+      left: '-6px',
+    },
+
+    '.diff-list-circle': {
+      marginBottom: '3px',
+    },
+  });
+}

public/sass/_grafana.scss

@@ -18,8 +18,5 @@
 @import 'components/dropdown';
 @import 'components/dashboard_grid';
 
-// PAGES
-@import 'pages/history';
-
 // ANGULAR
 @import 'angular';

public/sass/pages/_history.scss

@@ -1,208 +0,0 @@
-// JSON
-@for $i from 0 through 16 {
-  .diff-indent-#{$i} {
-    padding-left: $i * 21px;
-    margin-left: 10px;
-  }
-}
-
-.delta-html {
-  background: $diff-json-bg;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  user-select: none;
-}
-
-.diff-line {
-  color: $diff-json-fg;
-  font-family: $font-family-monospace;
-  font-size: $font-size-sm;
-  line-height: 2;
-  margin-bottom: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  position: relative;
-
-  &:after {
-    left: -40px;
-  }
-}
-
-.diff-line-number {
-  color: $text-muted;
-  display: inline-block;
-  font-size: $font-size-xs;
-  line-height: 2.3;
-  text-align: right;
-  width: 30px;
-}
-
-.diff-line-number-hide {
-  visibility: hidden;
-}
-
-.diff-line-icon {
-  color: $diff-json-icon;
-  font-size: $font-size-xs;
-  float: right;
-  position: relative;
-  top: 2px;
-  right: 10px;
-}
-
-.diff-json-new,
-.diff-json-old,
-.diff-json-deleted,
-.diff-json-added {
-  color: $diff-json-changed-fg;
-
-  .diff-line-number {
-    color: $diff-json-changed-num;
-  }
-}
-
-.diff-json-new {
-  background-color: $diff-json-new;
-}
-.diff-json-old {
-  background-color: $diff-json-old;
-}
-.diff-json-added {
-  background-color: $diff-json-added;
-}
-.diff-json-deleted {
-  background-color: $diff-json-deleted;
-}
-
-.diff-value {
-  user-select: all;
-}
-
-// Basic
-.diff-circle {
-  margin-right: 0.5em;
-  * {
-    margin-bottom: 1px;
-  }
-}
-.diff-circle-changed {
-  color: #f59433;
-}
-.diff-circle-added {
-  color: #29d761;
-}
-.diff-circle-deleted {
-  color: #fd474a;
-}
-
-.diff-item-added,
-.diff-item-deleted {
-  list-style: none;
-}
-
-.diff-group {
-  background: $diff-group-bg;
-  font-size: 16px;
-  font-style: normal;
-  padding: 10px 15px;
-  margin: $space-md 0;
-
-  .diff-group {
-    padding: 0 5px;
-  }
-}
-
-.diff-group-name {
-  display: inline-block;
-  width: 100%;
-  font-size: 16px;
-  padding-left: 1.75em;
-  margin: 0 0 14px 0;
-}
-
-.diff-summary-key {
-  padding-left: 0.25em;
-}
-
-.diff-list {
-  padding-left: 40px;
-
-  .diff-list {
-    padding-left: 0;
-  }
-}
-
-.diff-item {
-  color: $gray-2;
-  line-height: 2.5;
-
-  > div {
-    display: inline;
-  }
-}
-
-.diff-item-changeset {
-  list-style: none;
-}
-
-.diff-label {
-  background-color: $diff-label-bg;
-  border-radius: 3px;
-  color: $diff-label-fg;
-  display: inline;
-  font-size: $font-size-base;
-  margin: 0 5px;
-  padding: 3px 8px;
-}
-
-.diff-linenum {
-  float: right;
-}
-
-.diff-arrow {
-  color: $diff-arrow-color;
-}
-
-.diff-block {
-  width: 100%;
-  display: inline-block;
-}
-
-.diff-block-title {
-  font-size: 16px;
-  display: inline-block;
-}
-
-.diff-title {
-  font-size: 16px;
-}
-
-.diff-change-container {
-  margin: 0 0;
-  padding-left: 3em;
-  padding-right: 0;
-}
-
-.diff-change-group {
-  width: 100%;
-  color: $text-color;
-  margin-bottom: 14px;
-}
-
-.diff-change-item {
-  display: inline-block;
-}
-
-.diff-change-title {
-  font-size: 16px;
-}
-
-.bullet-position-container {
-  position: relative;
-  left: -6px;
-}
-
-.diff-list-circle {
-  margin-bottom: 3px;
-}