Alert: Redesign with tinted background (#66918)

packages/grafana-data/src/themes/createColors.ts

@@ -280,7 +280,7 @@ export function createColors(colors: ThemeColorsInput): ThemeColors {
       color.shade = base.mode === 'light' ? darken(color.main, tonalOffset) : lighten(color.main, tonalOffset);
     }
     if (!color.transparent) {
-      color.transparent = base.mode === 'light' ? alpha(color.main, 0.08) : alpha(color.main, 0.15);
+      color.transparent = alpha(color.main, 0.15);
     }
     if (!color.contrastText) {
       color.contrastText = getContrastText(color.main);

packages/grafana-data/src/themes/palette.ts

@@ -30,8 +30,8 @@ export const palette = {
   redDarkText: '#FF5286',
   greenDarkMain: '#1A7F4B',
   greenDarkText: '#6CCF8E',
-  orangeDarkMain: '#F5B73D',
+  orangeDarkMain: '#FF9900',
-  orangeDarkText: '#F8D06B',
+  orangeDarkText: '#fbad37',
 
   blueLightMain: '#3871DC',
   blueLightText: '#1F62E0',
@@ -39,6 +39,6 @@ export const palette = {
   redLightText: '#CF0E5B',
   greenLightMain: '#1B855E',
   greenLightText: '#0A764E',
-  orangeLightMain: '#FAD34A',
+  orangeLightMain: '#FF9900',
-  orangeLightText: '#8A6C00',
+  orangeLightText: '#B5510D',
 };

packages/grafana-ui/src/components/Alert/Alert.tsx

@@ -1,5 +1,6 @@
 import { css, cx } from '@emotion/css';
 import React, { AriaRole, HTMLAttributes, ReactNode } from 'react';
+import tinycolor2 from 'tinycolor2';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -8,7 +9,6 @@ import { useTheme2 } from '../../themes';
 import { IconName } from '../../types/icon';
 import { Button } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
-import { IconButton } from '../IconButton/IconButton';
 
 export type AlertVariant = 'success' | 'warning' | 'error' | 'info';
 
@@ -73,7 +73,14 @@ export const Alert = React.forwardRef<HTMLDivElement, Props>(
         {/* If onRemove is specified, giving preference to onRemove */}
         {onRemove && !buttonContent && (
           <div className={styles.close}>
-            <IconButton aria-label="Close alert" name="times" onClick={onRemove} size="lg" type="button" />
+            <Button
+              aria-label="Close alert"
+              icon="times"
+              onClick={onRemove}
+              type="button"
+              fill="text"
+              variant="secondary"
+            />
           </div>
         )}
 
@@ -113,6 +120,7 @@ const getStyles = (
 ) => {
   const color = theme.colors[severity];
   const borderRadius = theme.shape.borderRadius();
+  const borderColor = tinycolor2(color.border).setAlpha(0.2).toString();
 
   return {
     alert: css`
@@ -122,8 +130,10 @@ const getStyles = (
       display: flex;
       flex-direction: row;
       align-items: stretch;
-      background: ${theme.colors.background.secondary};
+      background: ${color.transparent};
-      box-shadow: ${elevated ? theme.shadows.z3 : theme.shadows.z1};
+      box-shadow: ${elevated ? theme.shadows.z3 : 'none'};
+      padding: ${theme.spacing(1, 2)};
+      border: 1px solid ${borderColor};
       margin-bottom: ${theme.spacing(bottomSpacing ?? 2)};
       margin-top: ${theme.spacing(topSpacing ?? 0)};
 
@@ -139,21 +149,15 @@ const getStyles = (
       }
     `,
     icon: css`
-      padding: ${theme.spacing(2, 3)};
+      padding: ${theme.spacing(1, 2, 0, 0)};
-      background: ${color.main};
+      color: ${color.text};
-      border-radius: ${borderRadius} 0 0 ${borderRadius};
-      color: ${color.contrastText};
       display: flex;
-      align-items: center;
-      justify-content: center;
-    `,
-    title: css`
-      font-weight: ${theme.typography.fontWeightMedium};
-      color: ${theme.colors.text.primary};
     `,
+    title: css({
+      fontWeight: theme.typography.fontWeightMedium,
+    }),
     body: css`
-      color: ${theme.colors.text.secondary};
+      padding: ${theme.spacing(1, 0)};
-      padding: ${theme.spacing(2)};
       flex-grow: 1;
       display: flex;
       flex-direction: column;
@@ -162,8 +166,7 @@ const getStyles = (
       word-break: break-word;
     `,
     content: css`
-      color: ${theme.colors.text.secondary};
+      padding-top: ${hasTitle ? theme.spacing(0.5) : 0};
-      padding-top: ${hasTitle ? theme.spacing(1) : 0};
       max-height: 50vh;
       overflow-y: auto;
     `,
@@ -174,9 +177,12 @@ const getStyles = (
       align-items: center;
     `,
     close: css`
-      padding: ${theme.spacing(2, 1)};
+      position: relative;
+      color: ${theme.colors.text.secondary};
       background: none;
       display: flex;
+      top: -6px;
+      right: -14px;
     `,
   };
 };

public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx

@@ -17,7 +17,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
   alertParagraph: css`
     margin: 0 ${theme.spacing(1)} 0 0;
     line-height: ${theme.spacing(theme.components.height.sm)};
-    color: ${theme.colors.text.primary};
   `,
 });
 
@@ -31,8 +30,8 @@ export function ConnectionsRedirectNotice() {
           Data sources have a new home! You can discover new data sources or manage existing ones in the new Connections
           page, accessible from the lefthand nav.
         </p>
-        <LinkButton aria-label="Link to Connections" icon="adjust-circle" href={ROUTES.DataSources}>
+        <LinkButton aria-label="Link to Connections" icon="arrow-right" href={ROUTES.DataSources} fill="text">
-          See data sources in Connections
+          Go to connections
         </LinkButton>
       </div>
     </Alert>

public/app/features/live/LiveConnectionWarning.tsx

@@ -72,10 +72,8 @@ const getStyle = stylesFactory((theme: GrafanaTheme2) => {
       margin: 16px;
     `,
     warn: css`
-      border: 2px solid ${theme.colors.warning.main};
       max-width: 400px;
       margin: auto;
-      height: 3em;
     `,
   };
 });