Chore: SCSS cleanup (#90366)

* migrate _type styles

* migrate queryEditor styles

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

@@ -16,7 +16,7 @@ import { getJsonFormatterStyles } from './jsonFormatter';
 import { getLegacySelectStyles } from './legacySelect';
 import { getMarkdownStyles } from './markdownStyles';
 import { getPageStyles } from './page';
-import { getQueryPartStyles } from './queryPart';
+import { getQueryEditorStyles } from './queryEditor';
 import { getRcTimePickerStyles } from './rcTimePicker';
 import { getSkeletonStyles } from './skeletonStyles';
 import { getSlateStyles } from './slate';
@@ -42,7 +42,7 @@ export function GlobalStyles() {
         getCardStyles(theme),
         getMarkdownStyles(theme),
         getPageStyles(theme),
-        getQueryPartStyles(theme),
+        getQueryEditorStyles(theme),
         getRcTimePickerStyles(theme),
         getSkeletonStyles(theme),
         getSlateStyles(theme),

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

@@ -54,8 +54,9 @@ export function getElementStyles(theme: GrafanaTheme2) {
     },
 
     // Ex: 14px base font * 85% = about 12px
-    small: {
+    'small, .small': {
       fontSize: theme.typography.bodySmall.fontSize,
+      fontWeight: 'normal',
     },
 
     'b, strong': {
@@ -71,6 +72,62 @@ export function getElementStyles(theme: GrafanaTheme2) {
       fontStyle: 'normal',
     },
 
+    blockquote: {
+      padding: theme.spacing(0, 0, 0, 2),
+      margin: theme.spacing(0, 0, 2),
+      borderLeft: `5px solid ${theme.v1.palette.gray3}`,
+      p: {
+        marginBottom: 0,
+        fontSize: theme.typography.fontSize * 1.25,
+        fontWeight: 300,
+        lineHeight: 1.25,
+      },
+      small: {
+        display: 'block',
+        lineHeight: theme.typography.body.lineHeight,
+        color: theme.v1.palette.gray2,
+        '&:before': {
+          content: "'\\2014 \\00A0'",
+        },
+      },
+    },
+
+    // Quotes
+    'q:before, q:after, blockquote:before, blockquote:after': {
+      content: "''",
+    },
+
+    // Addresses
+    address: {
+      display: 'block',
+      marginBottom: theme.spacing(2),
+      fontStyle: 'normal',
+      lineHeight: theme.typography.body.lineHeight,
+    },
+
+    'a.external-link': {
+      color: theme.colors.text.link,
+      textDecoration: 'normal',
+
+      '&:hover': {
+        color: theme.colors.text.link,
+        textDecoration: 'underline',
+      },
+    },
+
+    '.link': {
+      color: theme.colors.text.primary,
+      cursor: 'pointer',
+    },
+
+    '.link:hover': {
+      color: theme.colors.text.maxContrast,
+    },
+
+    '.pointer': {
+      cursor: 'pointer',
+    },
+
     'audio, canvas, progress, video': {
       display: 'inline-block',
       verticalAlign: 'baseline',
@@ -86,6 +143,7 @@ export function getElementStyles(theme: GrafanaTheme2) {
     // Address styling not present in Safari.
     'abbr[title]': {
       borderBottom: '1px dotted',
+      cursor: 'help',
     },
     dfn: {
       fontStyle: 'italic',
@@ -105,6 +163,37 @@ export function getElementStyles(theme: GrafanaTheme2) {
       bottom: '-0.25em',
     },
 
+    hr: {
+      marginTop: theme.spacing(2),
+      marginBottom: theme.spacing(2),
+      border: 0,
+      borderTop: `1px solid ${theme.colors.border.medium}`,
+    },
+
+    'mark, .mark': {
+      background: theme.colors.warning.main,
+    },
+
+    'ul, ol': {
+      padding: 0,
+    },
+    'ul ul, ul ol, ol ol, ol ul': {
+      marginBottom: 0,
+    },
+    li: {
+      lineHeight: theme.typography.body.lineHeight,
+    },
+
+    dl: {
+      marginBottom: theme.spacing(2),
+    },
+    'dt, dd': {
+      lineHeight: theme.typography.body.lineHeight,
+    },
+    dt: {
+      fontWeight: theme.typography.fontWeightMedium,
+    },
+
     // 1. Correct color not being inherited.
     //    Known issue: affects color of disabled elements.
     // 2. Correct font properties not being inherited.
@@ -143,6 +232,10 @@ export function getElementStyles(theme: GrafanaTheme2) {
       borderSpacing: 0,
     },
 
+    th: {
+      fontWeight: theme.typography.fontWeightMedium,
+    },
+
     'td, th': {
       padding: 0,
     },

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

@@ -4,6 +4,49 @@ import { GrafanaTheme2 } from '@grafana/data';
 
 export function getMarkdownStyles(theme: GrafanaTheme2) {
   return css({
-    // TODO copy from _utils.scss
+    '.markdown-html': {
+      img: {
+        maxWidth: '100%',
+      },
+
+      'ul, ol': {
+        paddingLeft: theme.spacing(3),
+        marginBottom: theme.spacing(2),
+      },
+
+      table: {
+        marginBottom: theme.spacing(2),
+        'td, th': {
+          padding: theme.spacing(0.5, 1),
+        },
+        th: {
+          fontWeight: theme.typography.fontWeightMedium,
+          background: theme.colors.background.secondary,
+        },
+      },
+
+      'table, th, td': {
+        border: `1px solid ${theme.colors.border.medium}`,
+        borderCollapse: 'collapse',
+      },
+
+      a: {
+        color: theme.colors.text.link,
+        textDecoration: 'none',
+
+        '&:hover': {
+          color: theme.colors.text.link,
+          textDecoration: 'underline',
+        },
+      },
+
+      'p:last-child': {
+        marginBottom: 0,
+      },
+
+      'table:last-child, ul:last-child, ol:last-child': {
+        marginBottom: 0,
+      },
+    },
   });
 }

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

@@ -0,0 +1,60 @@
+import { css } from '@emotion/react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+export function getQueryEditorStyles(theme: GrafanaTheme2) {
+  return css({
+    '.query-editor-row': {
+      marginBottom: '2px',
+
+      '&--disabled': {
+        '.query-keyword': {
+          color: theme.colors.text.secondary,
+        },
+      },
+    },
+    '.query-keyword': {
+      fontWeight: theme.typography.fontWeightMedium,
+      color: `${theme.colors.primary.text} !important`,
+    },
+    '.query-part': {
+      backgroundColor: theme.colors.background.secondary,
+
+      '&:hover': {
+        background: theme.colors.emphasize(theme.colors.background.secondary, 0.03),
+      },
+    },
+    '.query-segment-operator': {
+      color: `${theme.v1.palette.orange} !important`,
+    },
+    '.tight-form-func': {
+      background: theme.colors.background.secondary,
+    },
+
+    'input[type="text"].tight-form-func-param': {
+      fontSize: theme.typography.bodySmall.fontSize,
+      background: 'transparent',
+      border: 'none',
+      margin: 0,
+      padding: 0,
+    },
+
+    '.tight-form-func-controls': {
+      textAlign: 'center',
+
+      '.fa-arrow-left': {
+        float: 'left',
+        position: 'relative',
+        top: 2,
+      },
+      '.fa-arrow-right': {
+        float: 'right',
+        position: 'relative',
+        top: 2,
+      },
+      '.fa-remove': {
+        marginLeft: '10px',
+      },
+    },
+  });
+}

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

@@ -1,15 +0,0 @@
-import { css } from '@emotion/react';
-
-import { GrafanaTheme2 } from '@grafana/data';
-
-export function getQueryPartStyles(theme: GrafanaTheme2) {
-  return css({
-    '.query-part': {
-      backgroundColor: theme.colors.background.secondary,
-
-      '&:hover': {
-        background: theme.colors.emphasize(theme.colors.background.secondary, 0.03),
-      },
-    },
-  });
-}

public/app/core/components/AccessControl/PermissionListItem.tsx

@@ -20,7 +20,7 @@ export const PermissionListItem = ({ item, permissionLevels, canSet, onRemove, o
     <tr>
       <td>{getAvatar(item)}</td>
       <td>{getDescription(item)}</td>
-      <td>{item.isInherited && <em className="muted no-wrap">Inherited from folder</em>}</td>
+      <td>{item.isInherited && <em className={styles.inherited}>Inherited from folder</em>}</td>
       <td>
         <Select
           disabled={!canSet || !item.isManaged}
@@ -103,4 +103,8 @@ const getStyles = (theme: GrafanaTheme2) => ({
   warning: css({
     color: theme.colors.warning.main,
   }),
+  inherited: css({
+    color: theme.colors.text.secondary,
+    flexWrap: 'nowrap',
+  }),
 });

public/sass/_angular.scss

@@ -2142,3 +2142,11 @@ $easing: cubic-bezier(0, 0, 0.265, 1);
   display: flex;
   align-items: flex-end;
 }
+
+.grafana-metric-options {
+  margin-top: 25px;
+}
+
+.drop-element.drop-popover.drop-function-def .drop-content {
+  max-width: 416px;
+}

public/sass/_grafana.scss

@@ -3,7 +3,6 @@
 
 // BASE
 @import 'base/reboot';
-@import 'base/type';
 @import 'base/forms';
 @import 'base/grid';
 @import 'base/font_awesome';
@@ -17,7 +16,6 @@
 @import 'components/gf-form';
 @import 'components/modals';
 @import 'components/dropdown';
-@import 'components/query_editor';
 @import 'components/dashboard_grid';
 
 // PAGES

public/sass/base/_type.scss

@@ -1,275 +0,0 @@
-//
-// Typography
-// --------------------------------------------------
-
-//
-// Horizontal rules
-//
-
-hr {
-  margin-top: $spacer-y;
-  margin-bottom: $spacer-y;
-  border: 0;
-  border-top: $border-width solid $hr-border-color;
-}
-
-//
-// Emphasis
-//
-
-small,
-.small {
-  font-size: $font-size-sm;
-  font-weight: normal;
-}
-
-.small-xs {
-  font-size: $font-size-xs;
-}
-
-mark,
-.mark {
-  background: $alert-warning-bg;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 500;
-}
-
-// Lists
-// --------------------------------------------------
-
-// Unordered and Ordered lists
-ul,
-ol {
-  padding: 0;
-}
-ul ul,
-ul ol,
-ol ol,
-ol ul {
-  margin-bottom: 0;
-}
-li {
-  line-height: $line-height-base;
-}
-
-// Remove default list styles
-ul.unstyled,
-ol.unstyled {
-  margin-left: 0;
-  list-style: none;
-}
-
-// Single-line list items
-ul.inline,
-ol.inline {
-  margin-left: 0;
-  list-style: none;
-  > li {
-    display: inline-block;
-    padding-left: 5px;
-    padding-right: 5px;
-  }
-}
-
-// Description Lists
-dl {
-  margin-bottom: $line-height-base;
-}
-dt,
-dd {
-  line-height: $line-height-base;
-}
-dt {
-  font-weight: $font-weight-semi-bold;
-}
-dd {
-  margin-left: calc($line-height-base / 2);
-}
-// Horizontal layout (like forms)
-.dl-horizontal {
-  &::after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-  dt {
-    float: left;
-    width: $horizontalComponentOffset - 20;
-    clear: left;
-    text-align: right;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  dd {
-    margin-left: $horizontalComponentOffset;
-  }
-}
-
-// MISC
-// ----
-
-// Abbreviations and acronyms
-abbr[title] {
-  cursor: help;
-  border-bottom: 1px dotted $abbr-border-color;
-}
-
-abbr.initialism {
-  font-size: 90%;
-  text-transform: uppercase;
-}
-
-// Blockquotes
-blockquote {
-  padding: 0 0 0 15px;
-  margin: 0 0 $line-height-base;
-  border-left: 5px solid $gray-3;
-  p {
-    margin-bottom: 0;
-    font-size: $font-size-base * 1.25;
-    font-weight: 300;
-    line-height: 1.25;
-  }
-  small {
-    display: block;
-    line-height: $line-height-base;
-    color: $gray-2;
-    &:before {
-      content: '\2014 \00A0';
-    }
-  }
-
-  // Float right with text-align: right
-  &.pull-right {
-    float: right;
-    padding-right: 15px;
-    padding-left: 0;
-    border-right: 5px solid $gray-3;
-    border-left: 0;
-    p,
-    small {
-      text-align: right;
-    }
-    small {
-      &:before {
-        content: '';
-      }
-      &:after {
-        content: '\00A0 \2014';
-      }
-    }
-  }
-}
-
-// Quotes
-q:before,
-q:after,
-blockquote:before,
-blockquote:after {
-  content: '';
-}
-
-// Addresses
-address {
-  display: block;
-  margin-bottom: $line-height-base;
-  font-style: normal;
-  line-height: $line-height-base;
-}
-
-a.external-link {
-  color: $external-link-color;
-  text-decoration: normal;
-
-  &:hover {
-    color: $external-link-color;
-    text-decoration: underline;
-  }
-}
-
-.link {
-  color: $link-color;
-  cursor: pointer;
-}
-
-.link:hover {
-  color: $link-hover-color;
-}
-
-.pointer {
-  cursor: pointer;
-}
-
-.markdown-html {
-  img {
-    max-width: 100%;
-  }
-
-  ul,
-  ol {
-    padding-left: $spacer * 1.5;
-    margin-bottom: $spacer;
-  }
-
-  table {
-    margin-bottom: $spacer;
-  }
-
-  table {
-    td,
-    th {
-      padding: $space-xs $space-sm;
-    }
-    th {
-      font-weight: $font-weight-semi-bold;
-      background: $table-bg-accent;
-    }
-  }
-
-  table,
-  th,
-  td {
-    border: 1px solid $table-border;
-    border-collapse: collapse;
-  }
-
-  a {
-    color: $external-link-color;
-    text-decoration: none;
-
-    &:hover {
-      color: $external-link-color;
-      text-decoration: underline;
-    }
-  }
-
-  p:last-child {
-    margin-bottom: 0;
-  }
-
-  table:last-child,
-  ul:last-child,
-  ol:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.no-wrap {
-  white-space: nowrap;
-}
-
-th {
-  font-weight: $font-weight-semi-bold;
-}
-
-canvas {
-  display: block;
-}

public/sass/components/_query_editor.scss

@@ -1,118 +0,0 @@
-.query-keyword {
-  font-weight: $font-weight-semi-bold;
-  color: $text-blue !important;
-}
-
-.query-segment-operator {
-  color: $orange !important;
-}
-
-.query-placeholder {
-  color: $gray-2;
-}
-
-.tight-form-func {
-  background: $tight-form-func-bg;
-}
-
-input[type='text'].tight-form-func-param {
-  font-size: $font-size-sm;
-  background: transparent;
-  border: none;
-  margin: 0;
-  padding: 0;
-}
-
-.tight-form-func-controls {
-  text-align: center;
-
-  .fa-arrow-left {
-    float: left;
-    position: relative;
-    top: 2px;
-  }
-  .fa-arrow-right {
-    float: right;
-    position: relative;
-    top: 2px;
-  }
-  .fa-remove {
-    margin-left: 10px;
-  }
-}
-
-.grafana-metric-options {
-  margin-top: 25px;
-}
-
-.tight-form-func {
-  background: $tight-form-func-bg;
-}
-
-.rst-text::before {
-  content: ' ';
-}
-
-.rst-unknown.rst-directive {
-  font-family: monospace;
-  margin-bottom: $space-md;
-  word-wrap: break-word;
-}
-
-.rst-interpreted_text {
-  font-family: monospace;
-  display: inline;
-}
-
-.rst-bullet-list {
-  padding-left: $space-lg;
-  margin-bottom: $space-md;
-}
-
-.rst-paragraph:last-child {
-  margin-bottom: 0;
-}
-
-.drop-element.drop-popover.drop-function-def .drop-content {
-  max-width: 416px;
-}
-
-.rst-literal-block .rst-text {
-  display: block;
-}
-
-.query-editor-row {
-  margin-bottom: 2px;
-
-  &:hover {
-    .query-editor-row__actions {
-      display: flex;
-    }
-  }
-
-  &--disabled {
-    .query-keyword {
-      color: $text-color-weak;
-    }
-  }
-}
-
-.query-editor-row__action {
-  margin-left: 3px;
-  background: transparent;
-  border: none;
-  box-shadow: none;
-
-  &:hover {
-    color: $text-color;
-  }
-}
-
-.query-editor-row__body {
-  margin: 2px 0 10px 40px;
-  background: $page-bg;
-
-  &--collapsed {
-    display: none;
-  }
-}