From d8711beac5fa74d1ca96622f5d7c51ffe108ec07 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Wed, 24 Jul 2024 12:43:52 +0100 Subject: [PATCH] Chore: Migrate dashdiff styles to emotion globals (#90818) * migrate dashdiff styles to emotion globals * fix colors --- .../src/themes/GlobalStyles/GlobalStyles.tsx | 2 + .../src/themes/GlobalStyles/dashdiff.ts | 204 +++++++++++++++++ public/sass/_grafana.scss | 3 - public/sass/pages/_history.scss | 208 ------------------ 4 files changed, 206 insertions(+), 211 deletions(-) create mode 100644 packages/grafana-ui/src/themes/GlobalStyles/dashdiff.ts delete mode 100644 public/sass/pages/_history.scss diff --git a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx index 7755fc4d738..59587af744d 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx +++ b/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), diff --git a/packages/grafana-ui/src/themes/GlobalStyles/dashdiff.ts b/packages/grafana-ui/src/themes/GlobalStyles/dashdiff.ts new file mode 100644 index 00000000000..8ffb3e250b0 --- /dev/null +++ b/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', + }, + }); +} diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 318e4388da1..272f946c31a 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -18,8 +18,5 @@ @import 'components/dropdown'; @import 'components/dashboard_grid'; -// PAGES -@import 'pages/history'; - // ANGULAR @import 'angular'; diff --git a/public/sass/pages/_history.scss b/public/sass/pages/_history.scss deleted file mode 100644 index f32ca900bd5..00000000000 --- a/public/sass/pages/_history.scss +++ /dev/null @@ -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; -}