fix(ui): more consistent alert colors (#12336)

* make alerts more consistent

* use proper import styles and include color module in package.json

* semicolon for formatting

* default alert type to prevent TypeErrors

docs-ui/components/tag.stories.js

@@ -49,14 +49,6 @@ storiesOf('UI|Tags', module)
       </Tag>
     ))
   )
-  .add(
-    'with border',
-    withInfo('A bordered tag-like thing. Use this when you want a border')(() => (
-      <Tag border priority="attention">
-        Development
-      </Tag>
-    ))
-  )
   .add(
     'with icon',
     withInfo(

package.json

@@ -28,6 +28,7 @@
     "bootstrap": "3.3.5",
     "classnames": "2.2.0",
     "clipboard": "^1.7.1",
+    "color": "^3.1.0",
     "compression-webpack-plugin": "^2.0.0",
     "create-react-class": "^15.6.2",
     "crypto-js": "3.1.5",

src/sentry/static/sentry/app/components/alert.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {cx} from 'emotion';
 import styled from 'react-emotion';
 import isPropValid from '@emotion/is-prop-valid';
+import color from 'color';
 
 import TextBlock from 'app/views/settings/components/text/textBlock';
 import InlineSvg from 'app/components/inlineSvg';
@@ -12,39 +13,24 @@ const StyledInlineSvg = styled(InlineSvg)`
   margin-right: calc(${p => p.size} / 2);
 `;
 
-const getAlertColorStyles = ({backgroundLight, border, iconColor}, textColor) => `
+const getAlertColorStyles = ({backgroundLight, border, iconColor}) => `
   background: ${backgroundLight};
   border: 1px solid ${border};
 
   svg {
     color: ${iconColor};
   }
-
-  a {
-    color: ${textColor};
-    border-bottom: 1px dotted ${textColor};
-  }
 `;
 
-const getSystemAlertColorStyles = ({background}) => `
-  background: ${background};
+const getSystemAlertColorStyles = ({backgroundLight, border, iconColor}) => `
   border: 0;
   border-radius: 0;
-  color: #fff;
-  font-weight: bold;
-  text-shadow: 0 1px 1px rgba(0,0,0, .15);
+  border-bottom: 1px solid ${color(border)
+    .alpha(0.5)
+    .string()};
 
   ${StyledInlineSvg} {
-    color: #fff;
-  }
-
-  a {
-    color: #fff;
-    border-bottom: 1px dotted rgba(255,255,255, .8);
-
-    &:hover {
-      border-bottom: 1px dotted rgba(255,255,255, 1);
-    }
+    color: ${iconColor};
   }
 `;
 
@@ -59,10 +45,13 @@ const AlertWrapper = styled('div', {shouldForwardProp: isPropValid})`
   border: 1px solid ${p => p.theme.borderDark};
   align-items: center;
 
-  ${p =>
-    p.system
-      ? p.type && getSystemAlertColorStyles(p.theme.alert[p.type])
-      : p.type && getAlertColorStyles(p.theme.alert[p.type], p.theme.gray5)};
+  a {
+    color: ${p => p.theme.textColor};
+    border-bottom: 1px dotted ${p => p.theme.textColor};
+  }
+
+  ${p => getAlertColorStyles(p.theme.alert[p.type])};
+  ${p => p.system && getSystemAlertColorStyles(p.theme.alert[p.type])};
 `;
 
 const StyledTextBlock = styled(TextBlock)`
@@ -95,6 +84,7 @@ Alert.propTypes = {
 
 Alert.defaultProps = {
   iconSize: '24px',
+  type: 'info',
 };
 
 export default Alert;

src/sentry/static/sentry/app/components/modals/integrationDetailsModal.jsx

@@ -65,7 +65,7 @@ class IntegrationDetailsModal extends React.Component {
 
   earlyAdopterLabel(provider) {
     return EARLY_ADOPTER_INTEGRATIONS.includes(provider.key) ? (
-      <StyledTag priority="attention">Early Adopter</StyledTag>
+      <StyledTag priority="warning">Early Adopter</StyledTag>
     ) : null;
   }
 

src/sentry/static/sentry/app/utils/theme.jsx

@@ -18,10 +18,12 @@ const theme = {
 
   blue: '#3B6ECC',
   blueLight: '#628BD6',
+  blueLightest: '#F5FAFE',
   blueDark: '#2F58A3',
 
   green: '#57be8c',
   greenLight: '#71D8A6',
+  greenLightest: '#f8fcf7',
   greenDark: '#3EA573',
   greenTransparent: 'rgba(87, 190, 140, 0.5)',
 
@@ -29,6 +31,7 @@ const theme = {
   yellowLightest: '#FFFDF7',
   yellowLight: '#FFF15E',
   yellowDark: '#e6bc23',
+  yellowDarkest: '#ecbb08',
 
   yellowOrange: '#f9a66d',
   yellowOrangeLight: '#FFC087',
@@ -40,6 +43,7 @@ const theme = {
 
   red: '#e03e2f',
   redLight: '#FA5849',
+  redLightest: '#FDF6F5',
   redDark: '#C72516',
 
   pink: '#F868BC',
@@ -89,39 +93,6 @@ const theme = {
     toast: 10001,
   },
 
-  alert: {
-    default: {
-      backgroundLight: '#FAF9FB',
-      background: '#BDB4C7',
-      border: '#E2DBE8',
-    },
-    info: {
-      backgroundLight: '#F5FAFE',
-      border: '#B5D6ED',
-    },
-    attention: {
-      backgroundLight: '#ECBFA6',
-      background: '#F09E71',
-      border: '#D0816D',
-    },
-    warning: {
-      backgroundLight: '#FFFDF7',
-      background: '#f9a66d',
-      border: '#E1D697',
-    },
-    success: {
-      backgroundLight: '#F8FCF7',
-      background: '#57be8c',
-      border: '#BBD6B3',
-    },
-    error: {
-      backgroundLight: '#FDF6F5',
-      border: '#E7C0BC',
-      textLight: '#92635f',
-    },
-    beta: {},
-  },
-
   grid: 8,
   fontSizeSmall: '12px',
   fontSizeMedium: '14px',
@@ -169,19 +140,41 @@ theme.success = theme.green;
 theme.error = theme.red;
 theme.disabled = theme.gray1;
 
-theme.alert.info.iconColor = theme.blue;
-theme.alert.info.background = theme.blue;
-
-theme.alert.warning.iconColor = theme.yellowDark;
-theme.alert.warning.background = theme.yellow;
-
-theme.alert.success.iconColor = theme.greenDark;
-theme.alert.success.background = theme.green;
-
-theme.alert.error.iconColor = theme.redDark;
-theme.alert.error.background = theme.red;
-
-theme.alert.beta.background = `linear-gradient(90deg, ${theme.pink}, ${theme.purple})`;
+theme.alert = {
+  default: {
+    backgroundLight: theme.offWhite,
+    background: theme.gray1,
+    border: theme.borderLight,
+  },
+  info: {
+    backgroundLight: theme.blueLightest,
+    border: theme.blueLight,
+    iconColor: theme.blue,
+    background: theme.blue,
+  },
+  warning: {
+    backgroundLight: theme.yellowLightest,
+    background: theme.yellowDarkest,
+    border: theme.yellowDark,
+    iconColor: theme.yellowDark,
+  },
+  success: {
+    backgroundLight: theme.greenLightest,
+    border: theme.green,
+    iconColor: theme.greenDark,
+    background: theme.green,
+  },
+  error: {
+    backgroundLight: theme.redLightest,
+    border: theme.redLight,
+    textLight: theme.redLight,
+    iconColor: theme.red,
+    background: theme.red,
+  },
+  beta: {
+    background: `linear-gradient(90deg, ${theme.pink}, ${theme.purple})`,
+  },
+};
 
 //alias warn to warning
 theme.alert.warn = theme.alert.warning;

src/sentry/static/sentry/app/views/settings/components/settingsNavItem.jsx

@@ -29,7 +29,7 @@ class SettingsNavItem extends React.Component {
 
     if (badge === 'new') {
       renderedBadge = (
-        <StyledTag priority="attention" size="small" border={true}>
+        <StyledTag priority="warning" size="small" border={true}>
           {badge}
         </StyledTag>
       );

tests/js/spec/components/__snapshots__/confirmDelete.spec.jsx.snap

@@ -39,7 +39,7 @@ exports[`ConfirmDelete renders 1`] = `
               type="error"
             >
               <div
-                className="ref-error css-1uh40hh-AlertWrapper e1xb5l7j1"
+                className="ref-error css-2p634r-AlertWrapper e1xb5l7j1"
                 type="error"
               >
                 <StyledTextBlock>

tests/js/spec/components/modals/__snapshots__/integrationDetailsModal.spec.jsx.snap

@@ -334,7 +334,7 @@ exports[`IntegrationDetailsModal renders simple integration 1`] = `
       type="warning"
     >
       <div
-        className="ref-warning css-3oyttp-AlertWrapper e1xb5l7j1"
+        className="ref-warning css-fcu40c-AlertWrapper e1xb5l7j1"
         type="warning"
       >
         <StyledTextBlock>

tests/js/spec/views/settings/organizationIntegrations/__snapshots__/index.spec.jsx.snap

@@ -524,11 +524,6 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                             theme={
                                               Object {
                                                 "alert": Object {
-                                                  "attention": Object {
-                                                    "background": "#F09E71",
-                                                    "backgroundLight": "#ECBFA6",
-                                                    "border": "#D0816D",
-                                                  },
                                                   "beta": Object {
                                                     "background": "linear-gradient(90deg, #F868BC, #6C5FC7)",
                                                   },
@@ -540,32 +535,32 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                   "error": Object {
                                                     "background": "#e03e2f",
                                                     "backgroundLight": "#FDF6F5",
-                                                    "border": "#E7C0BC",
-                                                    "iconColor": "#C72516",
-                                                    "textLight": "#92635f",
+                                                    "border": "#FA5849",
+                                                    "iconColor": "#e03e2f",
+                                                    "textLight": "#FA5849",
                                                   },
                                                   "info": Object {
                                                     "background": "#3B6ECC",
                                                     "backgroundLight": "#F5FAFE",
-                                                    "border": "#B5D6ED",
+                                                    "border": "#628BD6",
                                                     "iconColor": "#3B6ECC",
                                                   },
                                                   "success": Object {
                                                     "background": "#57be8c",
-                                                    "backgroundLight": "#F8FCF7",
-                                                    "border": "#BBD6B3",
+                                                    "backgroundLight": "#f8fcf7",
+                                                    "border": "#57be8c",
                                                     "iconColor": "#3EA573",
                                                   },
                                                   "warn": Object {
-                                                    "background": "#ecc844",
+                                                    "background": "#ecbb08",
                                                     "backgroundLight": "#FFFDF7",
-                                                    "border": "#E1D697",
+                                                    "border": "#e6bc23",
                                                     "iconColor": "#e6bc23",
                                                   },
                                                   "warning": Object {
-                                                    "background": "#ecc844",
+                                                    "background": "#ecbb08",
                                                     "backgroundLight": "#FFFDF7",
-                                                    "border": "#E1D697",
+                                                    "border": "#e6bc23",
                                                     "iconColor": "#e6bc23",
                                                   },
                                                 },
@@ -573,6 +568,7 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                 "blue": "#3B6ECC",
                                                 "blueDark": "#2F58A3",
                                                 "blueLight": "#628BD6",
+                                                "blueLightest": "#F5FAFE",
                                                 "borderDark": "#D1CAD8",
                                                 "borderLight": "#E2DBE8",
                                                 "borderLighter": "#f9f6fd",
@@ -674,6 +670,7 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                 "green": "#57be8c",
                                                 "greenDark": "#3EA573",
                                                 "greenLight": "#71D8A6",
+                                                "greenLightest": "#f8fcf7",
                                                 "greenTransparent": "rgba(87, 190, 140, 0.5)",
                                                 "grid": 8,
                                                 "headerFontSize": "22px",
@@ -695,6 +692,7 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                 "red": "#e03e2f",
                                                 "redDark": "#C72516",
                                                 "redLight": "#FA5849",
+                                                "redLightest": "#FDF6F5",
                                                 "settings": Object {
                                                   "containerWidth": "1440px",
                                                   "headerHeight": "115px",
@@ -738,6 +736,7 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                 "whiteDark": "#fbfbfc",
                                                 "yellow": "#ecc844",
                                                 "yellowDark": "#e6bc23",
+                                                "yellowDarkest": "#ecbb08",
                                                 "yellowLight": "#FFF15E",
                                                 "yellowLightest": "#FFFDF7",
                                                 "yellowOrange": "#f9a66d",
@@ -793,11 +792,6 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                     theme={
                                                       Object {
                                                         "alert": Object {
-                                                          "attention": Object {
-                                                            "background": "#F09E71",
-                                                            "backgroundLight": "#ECBFA6",
-                                                            "border": "#D0816D",
-                                                          },
                                                           "beta": Object {
                                                             "background": "linear-gradient(90deg, #F868BC, #6C5FC7)",
                                                           },
@@ -809,32 +803,32 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                           "error": Object {
                                                             "background": "#e03e2f",
                                                             "backgroundLight": "#FDF6F5",
-                                                            "border": "#E7C0BC",
-                                                            "iconColor": "#C72516",
-                                                            "textLight": "#92635f",
+                                                            "border": "#FA5849",
+                                                            "iconColor": "#e03e2f",
+                                                            "textLight": "#FA5849",
                                                           },
                                                           "info": Object {
                                                             "background": "#3B6ECC",
                                                             "backgroundLight": "#F5FAFE",
-                                                            "border": "#B5D6ED",
+                                                            "border": "#628BD6",
                                                             "iconColor": "#3B6ECC",
                                                           },
                                                           "success": Object {
                                                             "background": "#57be8c",
-                                                            "backgroundLight": "#F8FCF7",
-                                                            "border": "#BBD6B3",
+                                                            "backgroundLight": "#f8fcf7",
+                                                            "border": "#57be8c",
                                                             "iconColor": "#3EA573",
                                                           },
                                                           "warn": Object {
-                                                            "background": "#ecc844",
+                                                            "background": "#ecbb08",
                                                             "backgroundLight": "#FFFDF7",
-                                                            "border": "#E1D697",
+                                                            "border": "#e6bc23",
                                                             "iconColor": "#e6bc23",
                                                           },
                                                           "warning": Object {
-                                                            "background": "#ecc844",
+                                                            "background": "#ecbb08",
                                                             "backgroundLight": "#FFFDF7",
-                                                            "border": "#E1D697",
+                                                            "border": "#e6bc23",
                                                             "iconColor": "#e6bc23",
                                                           },
                                                         },
@@ -842,6 +836,7 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                         "blue": "#3B6ECC",
                                                         "blueDark": "#2F58A3",
                                                         "blueLight": "#628BD6",
+                                                        "blueLightest": "#F5FAFE",
                                                         "borderDark": "#D1CAD8",
                                                         "borderLight": "#E2DBE8",
                                                         "borderLighter": "#f9f6fd",
@@ -943,6 +938,7 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                         "green": "#57be8c",
                                                         "greenDark": "#3EA573",
                                                         "greenLight": "#71D8A6",
+                                                        "greenLightest": "#f8fcf7",
                                                         "greenTransparent": "rgba(87, 190, 140, 0.5)",
                                                         "grid": 8,
                                                         "headerFontSize": "22px",
@@ -964,6 +960,7 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                         "red": "#e03e2f",
                                                         "redDark": "#C72516",
                                                         "redLight": "#FA5849",
+                                                        "redLightest": "#FDF6F5",
                                                         "settings": Object {
                                                           "containerWidth": "1440px",
                                                           "headerHeight": "115px",
@@ -1007,6 +1004,7 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                         "whiteDark": "#fbfbfc",
                                                         "yellow": "#ecc844",
                                                         "yellowDark": "#e6bc23",
+                                                        "yellowDarkest": "#ecbb08",
                                                         "yellowLight": "#FFF15E",
                                                         "yellowLightest": "#FFFDF7",
                                                         "yellowOrange": "#f9a66d",
@@ -1990,11 +1988,6 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                             theme={
                                               Object {
                                                 "alert": Object {
-                                                  "attention": Object {
-                                                    "background": "#F09E71",
-                                                    "backgroundLight": "#ECBFA6",
-                                                    "border": "#D0816D",
-                                                  },
                                                   "beta": Object {
                                                     "background": "linear-gradient(90deg, #F868BC, #6C5FC7)",
                                                   },
@@ -2006,32 +1999,32 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                   "error": Object {
                                                     "background": "#e03e2f",
                                                     "backgroundLight": "#FDF6F5",
-                                                    "border": "#E7C0BC",
-                                                    "iconColor": "#C72516",
-                                                    "textLight": "#92635f",
+                                                    "border": "#FA5849",
+                                                    "iconColor": "#e03e2f",
+                                                    "textLight": "#FA5849",
                                                   },
                                                   "info": Object {
                                                     "background": "#3B6ECC",
                                                     "backgroundLight": "#F5FAFE",
-                                                    "border": "#B5D6ED",
+                                                    "border": "#628BD6",
                                                     "iconColor": "#3B6ECC",
                                                   },
                                                   "success": Object {
                                                     "background": "#57be8c",
-                                                    "backgroundLight": "#F8FCF7",
-                                                    "border": "#BBD6B3",
+                                                    "backgroundLight": "#f8fcf7",
+                                                    "border": "#57be8c",
                                                     "iconColor": "#3EA573",
                                                   },
                                                   "warn": Object {
-                                                    "background": "#ecc844",
+                                                    "background": "#ecbb08",
                                                     "backgroundLight": "#FFFDF7",
-                                                    "border": "#E1D697",
+                                                    "border": "#e6bc23",
                                                     "iconColor": "#e6bc23",
                                                   },
                                                   "warning": Object {
-                                                    "background": "#ecc844",
+                                                    "background": "#ecbb08",
                                                     "backgroundLight": "#FFFDF7",
-                                                    "border": "#E1D697",
+                                                    "border": "#e6bc23",
                                                     "iconColor": "#e6bc23",
                                                   },
                                                 },
@@ -2039,6 +2032,7 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                 "blue": "#3B6ECC",
                                                 "blueDark": "#2F58A3",
                                                 "blueLight": "#628BD6",
+                                                "blueLightest": "#F5FAFE",
                                                 "borderDark": "#D1CAD8",
                                                 "borderLight": "#E2DBE8",
                                                 "borderLighter": "#f9f6fd",
@@ -2140,6 +2134,7 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                 "green": "#57be8c",
                                                 "greenDark": "#3EA573",
                                                 "greenLight": "#71D8A6",
+                                                "greenLightest": "#f8fcf7",
                                                 "greenTransparent": "rgba(87, 190, 140, 0.5)",
                                                 "grid": 8,
                                                 "headerFontSize": "22px",
@@ -2161,6 +2156,7 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                 "red": "#e03e2f",
                                                 "redDark": "#C72516",
                                                 "redLight": "#FA5849",
+                                                "redLightest": "#FDF6F5",
                                                 "settings": Object {
                                                   "containerWidth": "1440px",
                                                   "headerHeight": "115px",
@@ -2204,6 +2200,7 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                 "whiteDark": "#fbfbfc",
                                                 "yellow": "#ecc844",
                                                 "yellowDark": "#e6bc23",
+                                                "yellowDarkest": "#ecbb08",
                                                 "yellowLight": "#FFF15E",
                                                 "yellowLightest": "#FFFDF7",
                                                 "yellowOrange": "#f9a66d",
@@ -2259,11 +2256,6 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                     theme={
                                                       Object {
                                                         "alert": Object {
-                                                          "attention": Object {
-                                                            "background": "#F09E71",
-                                                            "backgroundLight": "#ECBFA6",
-                                                            "border": "#D0816D",
-                                                          },
                                                           "beta": Object {
                                                             "background": "linear-gradient(90deg, #F868BC, #6C5FC7)",
                                                           },
@@ -2275,32 +2267,32 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                           "error": Object {
                                                             "background": "#e03e2f",
                                                             "backgroundLight": "#FDF6F5",
-                                                            "border": "#E7C0BC",
-                                                            "iconColor": "#C72516",
-                                                            "textLight": "#92635f",
+                                                            "border": "#FA5849",
+                                                            "iconColor": "#e03e2f",
+                                                            "textLight": "#FA5849",
                                                           },
                                                           "info": Object {
                                                             "background": "#3B6ECC",
                                                             "backgroundLight": "#F5FAFE",
-                                                            "border": "#B5D6ED",
+                                                            "border": "#628BD6",
                                                             "iconColor": "#3B6ECC",
                                                           },
                                                           "success": Object {
                                                             "background": "#57be8c",
-                                                            "backgroundLight": "#F8FCF7",
-                                                            "border": "#BBD6B3",
+                                                            "backgroundLight": "#f8fcf7",
+                                                            "border": "#57be8c",
                                                             "iconColor": "#3EA573",
                                                           },
                                                           "warn": Object {
-                                                            "background": "#ecc844",
+                                                            "background": "#ecbb08",
                                                             "backgroundLight": "#FFFDF7",
-                                                            "border": "#E1D697",
+                                                            "border": "#e6bc23",
                                                             "iconColor": "#e6bc23",
                                                           },
                                                           "warning": Object {
-                                                            "background": "#ecc844",
+                                                            "background": "#ecbb08",
                                                             "backgroundLight": "#FFFDF7",
-                                                            "border": "#E1D697",
+                                                            "border": "#e6bc23",
                                                             "iconColor": "#e6bc23",
                                                           },
                                                         },
@@ -2308,6 +2300,7 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                         "blue": "#3B6ECC",
                                                         "blueDark": "#2F58A3",
                                                         "blueLight": "#628BD6",
+                                                        "blueLightest": "#F5FAFE",
                                                         "borderDark": "#D1CAD8",
                                                         "borderLight": "#E2DBE8",
                                                         "borderLighter": "#f9f6fd",
@@ -2409,6 +2402,7 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                         "green": "#57be8c",
                                                         "greenDark": "#3EA573",
                                                         "greenLight": "#71D8A6",
+                                                        "greenLightest": "#f8fcf7",
                                                         "greenTransparent": "rgba(87, 190, 140, 0.5)",
                                                         "grid": 8,
                                                         "headerFontSize": "22px",
@@ -2430,6 +2424,7 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                         "red": "#e03e2f",
                                                         "redDark": "#C72516",
                                                         "redLight": "#FA5849",
+                                                        "redLightest": "#FDF6F5",
                                                         "settings": Object {
                                                           "containerWidth": "1440px",
                                                           "headerHeight": "115px",
@@ -2473,6 +2468,7 @@ exports[`OrganizationIntegrations render() with installed integrations Displays
                                                         "whiteDark": "#fbfbfc",
                                                         "yellow": "#ecc844",
                                                         "yellowDark": "#e6bc23",
+                                                        "yellowDarkest": "#ecbb08",
                                                         "yellowLight": "#FFF15E",
                                                         "yellowLightest": "#FFFDF7",
                                                         "yellowOrange": "#f9a66d",
@@ -3746,11 +3742,6 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                             theme={
                                               Object {
                                                 "alert": Object {
-                                                  "attention": Object {
-                                                    "background": "#F09E71",
-                                                    "backgroundLight": "#ECBFA6",
-                                                    "border": "#D0816D",
-                                                  },
                                                   "beta": Object {
                                                     "background": "linear-gradient(90deg, #F868BC, #6C5FC7)",
                                                   },
@@ -3762,32 +3753,32 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                   "error": Object {
                                                     "background": "#e03e2f",
                                                     "backgroundLight": "#FDF6F5",
-                                                    "border": "#E7C0BC",
-                                                    "iconColor": "#C72516",
-                                                    "textLight": "#92635f",
+                                                    "border": "#FA5849",
+                                                    "iconColor": "#e03e2f",
+                                                    "textLight": "#FA5849",
                                                   },
                                                   "info": Object {
                                                     "background": "#3B6ECC",
                                                     "backgroundLight": "#F5FAFE",
-                                                    "border": "#B5D6ED",
+                                                    "border": "#628BD6",
                                                     "iconColor": "#3B6ECC",
                                                   },
                                                   "success": Object {
                                                     "background": "#57be8c",
-                                                    "backgroundLight": "#F8FCF7",
-                                                    "border": "#BBD6B3",
+                                                    "backgroundLight": "#f8fcf7",
+                                                    "border": "#57be8c",
                                                     "iconColor": "#3EA573",
                                                   },
                                                   "warn": Object {
-                                                    "background": "#ecc844",
+                                                    "background": "#ecbb08",
                                                     "backgroundLight": "#FFFDF7",
-                                                    "border": "#E1D697",
+                                                    "border": "#e6bc23",
                                                     "iconColor": "#e6bc23",
                                                   },
                                                   "warning": Object {
-                                                    "background": "#ecc844",
+                                                    "background": "#ecbb08",
                                                     "backgroundLight": "#FFFDF7",
-                                                    "border": "#E1D697",
+                                                    "border": "#e6bc23",
                                                     "iconColor": "#e6bc23",
                                                   },
                                                 },
@@ -3795,6 +3786,7 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                 "blue": "#3B6ECC",
                                                 "blueDark": "#2F58A3",
                                                 "blueLight": "#628BD6",
+                                                "blueLightest": "#F5FAFE",
                                                 "borderDark": "#D1CAD8",
                                                 "borderLight": "#E2DBE8",
                                                 "borderLighter": "#f9f6fd",
@@ -3896,6 +3888,7 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                 "green": "#57be8c",
                                                 "greenDark": "#3EA573",
                                                 "greenLight": "#71D8A6",
+                                                "greenLightest": "#f8fcf7",
                                                 "greenTransparent": "rgba(87, 190, 140, 0.5)",
                                                 "grid": 8,
                                                 "headerFontSize": "22px",
@@ -3917,6 +3910,7 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                 "red": "#e03e2f",
                                                 "redDark": "#C72516",
                                                 "redLight": "#FA5849",
+                                                "redLightest": "#FDF6F5",
                                                 "settings": Object {
                                                   "containerWidth": "1440px",
                                                   "headerHeight": "115px",
@@ -3960,6 +3954,7 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                 "whiteDark": "#fbfbfc",
                                                 "yellow": "#ecc844",
                                                 "yellowDark": "#e6bc23",
+                                                "yellowDarkest": "#ecbb08",
                                                 "yellowLight": "#FFF15E",
                                                 "yellowLightest": "#FFFDF7",
                                                 "yellowOrange": "#f9a66d",
@@ -4015,11 +4010,6 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                     theme={
                                                       Object {
                                                         "alert": Object {
-                                                          "attention": Object {
-                                                            "background": "#F09E71",
-                                                            "backgroundLight": "#ECBFA6",
-                                                            "border": "#D0816D",
-                                                          },
                                                           "beta": Object {
                                                             "background": "linear-gradient(90deg, #F868BC, #6C5FC7)",
                                                           },
@@ -4031,32 +4021,32 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                           "error": Object {
                                                             "background": "#e03e2f",
                                                             "backgroundLight": "#FDF6F5",
-                                                            "border": "#E7C0BC",
-                                                            "iconColor": "#C72516",
-                                                            "textLight": "#92635f",
+                                                            "border": "#FA5849",
+                                                            "iconColor": "#e03e2f",
+                                                            "textLight": "#FA5849",
                                                           },
                                                           "info": Object {
                                                             "background": "#3B6ECC",
                                                             "backgroundLight": "#F5FAFE",
-                                                            "border": "#B5D6ED",
+                                                            "border": "#628BD6",
                                                             "iconColor": "#3B6ECC",
                                                           },
                                                           "success": Object {
                                                             "background": "#57be8c",
-                                                            "backgroundLight": "#F8FCF7",
-                                                            "border": "#BBD6B3",
+                                                            "backgroundLight": "#f8fcf7",
+                                                            "border": "#57be8c",
                                                             "iconColor": "#3EA573",
                                                           },
                                                           "warn": Object {
-                                                            "background": "#ecc844",
+                                                            "background": "#ecbb08",
                                                             "backgroundLight": "#FFFDF7",
-                                                            "border": "#E1D697",
+                                                            "border": "#e6bc23",
                                                             "iconColor": "#e6bc23",
                                                           },
                                                           "warning": Object {
-                                                            "background": "#ecc844",
+                                                            "background": "#ecbb08",
                                                             "backgroundLight": "#FFFDF7",
-                                                            "border": "#E1D697",
+                                                            "border": "#e6bc23",
                                                             "iconColor": "#e6bc23",
                                                           },
                                                         },
@@ -4064,6 +4054,7 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                         "blue": "#3B6ECC",
                                                         "blueDark": "#2F58A3",
                                                         "blueLight": "#628BD6",
+                                                        "blueLightest": "#F5FAFE",
                                                         "borderDark": "#D1CAD8",
                                                         "borderLight": "#E2DBE8",
                                                         "borderLighter": "#f9f6fd",
@@ -4165,6 +4156,7 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                         "green": "#57be8c",
                                                         "greenDark": "#3EA573",
                                                         "greenLight": "#71D8A6",
+                                                        "greenLightest": "#f8fcf7",
                                                         "greenTransparent": "rgba(87, 190, 140, 0.5)",
                                                         "grid": 8,
                                                         "headerFontSize": "22px",
@@ -4186,6 +4178,7 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                         "red": "#e03e2f",
                                                         "redDark": "#C72516",
                                                         "redLight": "#FA5849",
+                                                        "redLightest": "#FDF6F5",
                                                         "settings": Object {
                                                           "containerWidth": "1440px",
                                                           "headerHeight": "115px",
@@ -4229,6 +4222,7 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                         "whiteDark": "#fbfbfc",
                                                         "yellow": "#ecc844",
                                                         "yellowDark": "#e6bc23",
+                                                        "yellowDarkest": "#ecbb08",
                                                         "yellowLight": "#FFF15E",
                                                         "yellowLightest": "#FFFDF7",
                                                         "yellowOrange": "#f9a66d",
@@ -4512,11 +4506,6 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                             theme={
                                               Object {
                                                 "alert": Object {
-                                                  "attention": Object {
-                                                    "background": "#F09E71",
-                                                    "backgroundLight": "#ECBFA6",
-                                                    "border": "#D0816D",
-                                                  },
                                                   "beta": Object {
                                                     "background": "linear-gradient(90deg, #F868BC, #6C5FC7)",
                                                   },
@@ -4528,32 +4517,32 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                   "error": Object {
                                                     "background": "#e03e2f",
                                                     "backgroundLight": "#FDF6F5",
-                                                    "border": "#E7C0BC",
-                                                    "iconColor": "#C72516",
-                                                    "textLight": "#92635f",
+                                                    "border": "#FA5849",
+                                                    "iconColor": "#e03e2f",
+                                                    "textLight": "#FA5849",
                                                   },
                                                   "info": Object {
                                                     "background": "#3B6ECC",
                                                     "backgroundLight": "#F5FAFE",
-                                                    "border": "#B5D6ED",
+                                                    "border": "#628BD6",
                                                     "iconColor": "#3B6ECC",
                                                   },
                                                   "success": Object {
                                                     "background": "#57be8c",
-                                                    "backgroundLight": "#F8FCF7",
-                                                    "border": "#BBD6B3",
+                                                    "backgroundLight": "#f8fcf7",
+                                                    "border": "#57be8c",
                                                     "iconColor": "#3EA573",
                                                   },
                                                   "warn": Object {
-                                                    "background": "#ecc844",
+                                                    "background": "#ecbb08",
                                                     "backgroundLight": "#FFFDF7",
-                                                    "border": "#E1D697",
+                                                    "border": "#e6bc23",
                                                     "iconColor": "#e6bc23",
                                                   },
                                                   "warning": Object {
-                                                    "background": "#ecc844",
+                                                    "background": "#ecbb08",
                                                     "backgroundLight": "#FFFDF7",
-                                                    "border": "#E1D697",
+                                                    "border": "#e6bc23",
                                                     "iconColor": "#e6bc23",
                                                   },
                                                 },
@@ -4561,6 +4550,7 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                 "blue": "#3B6ECC",
                                                 "blueDark": "#2F58A3",
                                                 "blueLight": "#628BD6",
+                                                "blueLightest": "#F5FAFE",
                                                 "borderDark": "#D1CAD8",
                                                 "borderLight": "#E2DBE8",
                                                 "borderLighter": "#f9f6fd",
@@ -4662,6 +4652,7 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                 "green": "#57be8c",
                                                 "greenDark": "#3EA573",
                                                 "greenLight": "#71D8A6",
+                                                "greenLightest": "#f8fcf7",
                                                 "greenTransparent": "rgba(87, 190, 140, 0.5)",
                                                 "grid": 8,
                                                 "headerFontSize": "22px",
@@ -4683,6 +4674,7 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                 "red": "#e03e2f",
                                                 "redDark": "#C72516",
                                                 "redLight": "#FA5849",
+                                                "redLightest": "#FDF6F5",
                                                 "settings": Object {
                                                   "containerWidth": "1440px",
                                                   "headerHeight": "115px",
@@ -4726,6 +4718,7 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                 "whiteDark": "#fbfbfc",
                                                 "yellow": "#ecc844",
                                                 "yellowDark": "#e6bc23",
+                                                "yellowDarkest": "#ecbb08",
                                                 "yellowLight": "#FFF15E",
                                                 "yellowLightest": "#FFFDF7",
                                                 "yellowOrange": "#f9a66d",
@@ -4781,11 +4774,6 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                     theme={
                                                       Object {
                                                         "alert": Object {
-                                                          "attention": Object {
-                                                            "background": "#F09E71",
-                                                            "backgroundLight": "#ECBFA6",
-                                                            "border": "#D0816D",
-                                                          },
                                                           "beta": Object {
                                                             "background": "linear-gradient(90deg, #F868BC, #6C5FC7)",
                                                           },
@@ -4797,32 +4785,32 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                           "error": Object {
                                                             "background": "#e03e2f",
                                                             "backgroundLight": "#FDF6F5",
-                                                            "border": "#E7C0BC",
-                                                            "iconColor": "#C72516",
-                                                            "textLight": "#92635f",
+                                                            "border": "#FA5849",
+                                                            "iconColor": "#e03e2f",
+                                                            "textLight": "#FA5849",
                                                           },
                                                           "info": Object {
                                                             "background": "#3B6ECC",
                                                             "backgroundLight": "#F5FAFE",
-                                                            "border": "#B5D6ED",
+                                                            "border": "#628BD6",
                                                             "iconColor": "#3B6ECC",
                                                           },
                                                           "success": Object {
                                                             "background": "#57be8c",
-                                                            "backgroundLight": "#F8FCF7",
-                                                            "border": "#BBD6B3",
+                                                            "backgroundLight": "#f8fcf7",
+                                                            "border": "#57be8c",
                                                             "iconColor": "#3EA573",
                                                           },
                                                           "warn": Object {
-                                                            "background": "#ecc844",
+                                                            "background": "#ecbb08",
                                                             "backgroundLight": "#FFFDF7",
-                                                            "border": "#E1D697",
+                                                            "border": "#e6bc23",
                                                             "iconColor": "#e6bc23",
                                                           },
                                                           "warning": Object {
-                                                            "background": "#ecc844",
+                                                            "background": "#ecbb08",
                                                             "backgroundLight": "#FFFDF7",
-                                                            "border": "#E1D697",
+                                                            "border": "#e6bc23",
                                                             "iconColor": "#e6bc23",
                                                           },
                                                         },
@@ -4830,6 +4818,7 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                         "blue": "#3B6ECC",
                                                         "blueDark": "#2F58A3",
                                                         "blueLight": "#628BD6",
+                                                        "blueLightest": "#F5FAFE",
                                                         "borderDark": "#D1CAD8",
                                                         "borderLight": "#E2DBE8",
                                                         "borderLighter": "#f9f6fd",
@@ -4931,6 +4920,7 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                         "green": "#57be8c",
                                                         "greenDark": "#3EA573",
                                                         "greenLight": "#71D8A6",
+                                                        "greenLightest": "#f8fcf7",
                                                         "greenTransparent": "rgba(87, 190, 140, 0.5)",
                                                         "grid": 8,
                                                         "headerFontSize": "22px",
@@ -4952,6 +4942,7 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                         "red": "#e03e2f",
                                                         "redDark": "#C72516",
                                                         "redLight": "#FA5849",
+                                                        "redLightest": "#FDF6F5",
                                                         "settings": Object {
                                                           "containerWidth": "1440px",
                                                           "headerHeight": "115px",
@@ -4995,6 +4986,7 @@ exports[`OrganizationIntegrations render() without integrations Displays integra
                                                         "whiteDark": "#fbfbfc",
                                                         "yellow": "#ecc844",
                                                         "yellowDark": "#e6bc23",
+                                                        "yellowDarkest": "#ecbb08",
                                                         "yellowLight": "#FFF15E",
                                                         "yellowLightest": "#FFFDF7",
                                                         "yellowOrange": "#f9a66d",

tests/js/spec/views/settings/organizationIntegrations/__snapshots__/sentryAppInstallations.spec.jsx.snap

@@ -199,11 +199,6 @@ exports[`Sentry App Installations when Apps exist displays all Apps owned by the
                                   theme={
                                     Object {
                                       "alert": Object {
-                                        "attention": Object {
-                                          "background": "#F09E71",
-                                          "backgroundLight": "#ECBFA6",
-                                          "border": "#D0816D",
-                                        },
                                         "beta": Object {
                                           "background": "linear-gradient(90deg, #F868BC, #6C5FC7)",
                                         },
@@ -215,32 +210,32 @@ exports[`Sentry App Installations when Apps exist displays all Apps owned by the
                                         "error": Object {
                                           "background": "#e03e2f",
                                           "backgroundLight": "#FDF6F5",
-                                          "border": "#E7C0BC",
-                                          "iconColor": "#C72516",
-                                          "textLight": "#92635f",
+                                          "border": "#FA5849",
+                                          "iconColor": "#e03e2f",
+                                          "textLight": "#FA5849",
                                         },
                                         "info": Object {
                                           "background": "#3B6ECC",
                                           "backgroundLight": "#F5FAFE",
-                                          "border": "#B5D6ED",
+                                          "border": "#628BD6",
                                           "iconColor": "#3B6ECC",
                                         },
                                         "success": Object {
                                           "background": "#57be8c",
-                                          "backgroundLight": "#F8FCF7",
-                                          "border": "#BBD6B3",
+                                          "backgroundLight": "#f8fcf7",
+                                          "border": "#57be8c",
                                           "iconColor": "#3EA573",
                                         },
                                         "warn": Object {
-                                          "background": "#ecc844",
+                                          "background": "#ecbb08",
                                           "backgroundLight": "#FFFDF7",
-                                          "border": "#E1D697",
+                                          "border": "#e6bc23",
                                           "iconColor": "#e6bc23",
                                         },
                                         "warning": Object {
-                                          "background": "#ecc844",
+                                          "background": "#ecbb08",
                                           "backgroundLight": "#FFFDF7",
-                                          "border": "#E1D697",
+                                          "border": "#e6bc23",
                                           "iconColor": "#e6bc23",
                                         },
                                       },
@@ -248,6 +243,7 @@ exports[`Sentry App Installations when Apps exist displays all Apps owned by the
                                       "blue": "#3B6ECC",
                                       "blueDark": "#2F58A3",
                                       "blueLight": "#628BD6",
+                                      "blueLightest": "#F5FAFE",
                                       "borderDark": "#D1CAD8",
                                       "borderLight": "#E2DBE8",
                                       "borderLighter": "#f9f6fd",
@@ -349,6 +345,7 @@ exports[`Sentry App Installations when Apps exist displays all Apps owned by the
                                       "green": "#57be8c",
                                       "greenDark": "#3EA573",
                                       "greenLight": "#71D8A6",
+                                      "greenLightest": "#f8fcf7",
                                       "greenTransparent": "rgba(87, 190, 140, 0.5)",
                                       "grid": 8,
                                       "headerFontSize": "22px",
@@ -370,6 +367,7 @@ exports[`Sentry App Installations when Apps exist displays all Apps owned by the
                                       "red": "#e03e2f",
                                       "redDark": "#C72516",
                                       "redLight": "#FA5849",
+                                      "redLightest": "#FDF6F5",
                                       "settings": Object {
                                         "containerWidth": "1440px",
                                         "headerHeight": "115px",
@@ -413,6 +411,7 @@ exports[`Sentry App Installations when Apps exist displays all Apps owned by the
                                       "whiteDark": "#fbfbfc",
                                       "yellow": "#ecc844",
                                       "yellowDark": "#e6bc23",
+                                      "yellowDarkest": "#ecbb08",
                                       "yellowLight": "#FFF15E",
                                       "yellowLightest": "#FFFDF7",
                                       "yellowOrange": "#f9a66d",
@@ -468,11 +467,6 @@ exports[`Sentry App Installations when Apps exist displays all Apps owned by the
                                           theme={
                                             Object {
                                               "alert": Object {
-                                                "attention": Object {
-                                                  "background": "#F09E71",
-                                                  "backgroundLight": "#ECBFA6",
-                                                  "border": "#D0816D",
-                                                },
                                                 "beta": Object {
                                                   "background": "linear-gradient(90deg, #F868BC, #6C5FC7)",
                                                 },
@@ -484,32 +478,32 @@ exports[`Sentry App Installations when Apps exist displays all Apps owned by the
                                                 "error": Object {
                                                   "background": "#e03e2f",
                                                   "backgroundLight": "#FDF6F5",
-                                                  "border": "#E7C0BC",
-                                                  "iconColor": "#C72516",
-                                                  "textLight": "#92635f",
+                                                  "border": "#FA5849",
+                                                  "iconColor": "#e03e2f",
+                                                  "textLight": "#FA5849",
                                                 },
                                                 "info": Object {
                                                   "background": "#3B6ECC",
                                                   "backgroundLight": "#F5FAFE",
-                                                  "border": "#B5D6ED",
+                                                  "border": "#628BD6",
                                                   "iconColor": "#3B6ECC",
                                                 },
                                                 "success": Object {
                                                   "background": "#57be8c",
-                                                  "backgroundLight": "#F8FCF7",
-                                                  "border": "#BBD6B3",
+                                                  "backgroundLight": "#f8fcf7",
+                                                  "border": "#57be8c",
                                                   "iconColor": "#3EA573",
                                                 },
                                                 "warn": Object {
-                                                  "background": "#ecc844",
+                                                  "background": "#ecbb08",
                                                   "backgroundLight": "#FFFDF7",
-                                                  "border": "#E1D697",
+                                                  "border": "#e6bc23",
                                                   "iconColor": "#e6bc23",
                                                 },
                                                 "warning": Object {
-                                                  "background": "#ecc844",
+                                                  "background": "#ecbb08",
                                                   "backgroundLight": "#FFFDF7",
-                                                  "border": "#E1D697",
+                                                  "border": "#e6bc23",
                                                   "iconColor": "#e6bc23",
                                                 },
                                               },
@@ -517,6 +511,7 @@ exports[`Sentry App Installations when Apps exist displays all Apps owned by the
                                               "blue": "#3B6ECC",
                                               "blueDark": "#2F58A3",
                                               "blueLight": "#628BD6",
+                                              "blueLightest": "#F5FAFE",
                                               "borderDark": "#D1CAD8",
                                               "borderLight": "#E2DBE8",
                                               "borderLighter": "#f9f6fd",
@@ -618,6 +613,7 @@ exports[`Sentry App Installations when Apps exist displays all Apps owned by the
                                               "green": "#57be8c",
                                               "greenDark": "#3EA573",
                                               "greenLight": "#71D8A6",
+                                              "greenLightest": "#f8fcf7",
                                               "greenTransparent": "rgba(87, 190, 140, 0.5)",
                                               "grid": 8,
                                               "headerFontSize": "22px",
@@ -639,6 +635,7 @@ exports[`Sentry App Installations when Apps exist displays all Apps owned by the
                                               "red": "#e03e2f",
                                               "redDark": "#C72516",
                                               "redLight": "#FA5849",
+                                              "redLightest": "#FDF6F5",
                                               "settings": Object {
                                                 "containerWidth": "1440px",
                                                 "headerHeight": "115px",
@@ -682,6 +679,7 @@ exports[`Sentry App Installations when Apps exist displays all Apps owned by the
                                               "whiteDark": "#fbfbfc",
                                               "yellow": "#ecc844",
                                               "yellowDark": "#e6bc23",
+                                              "yellowDarkest": "#ecbb08",
                                               "yellowLight": "#FFF15E",
                                               "yellowLightest": "#FFFDF7",
                                               "yellowOrange": "#f9a66d",