chore: clean up switch in global alert view

Author: geotrev

packages/notifications/src/styled/global-alert/StyledGlobalAlert.ts

@@ -33,108 +33,35 @@ const colorStyles = ({ theme, $alertType }: ThemeProps<DefaultTheme> & IStyledGl
   let anchorActiveColor;
   let focusVariable;
 
-  switch ($alertType) {
-    case 'success': {
-      borderColor = getColor({
-        variable: 'border.successEmphasis',
-        light: { offset: 100 },
-        theme
-      });
-      backgroundColor = getColor({
-        variable: 'background.successEmphasis',
-        theme
-      });
-      foregroundColor = getColor({
-        variable: 'foreground.success',
-        light: { offset: -600 },
-        theme
-      });
-      focusVariable = 'foreground.successEmphasis';
-      break;
-    }
-    case 'error': {
-      borderColor = getColor({
-        variable: 'border.dangerEmphasis',
-        light: { offset: 100 },
-        theme
-      });
-      backgroundColor = getColor({
-        variable: 'background.dangerEmphasis',
-        theme
-      });
-      foregroundColor = getColor({
-        variable: 'foreground.danger',
-        light: { offset: -600 },
-        theme
-      });
-      focusVariable = 'foreground.dangerEmphasis';
-      break;
-    }
-    case 'warning': {
-      borderColor = getColor({
-        variable: 'border.warningEmphasis',
-        light: { offset: -300 },
-        theme
-      });
-      backgroundColor = getColor({
-        variable: 'background.warningEmphasis',
-        light: { offset: -400 },
-        theme
-      });
-      const fgVariable = 'foreground.warning';
-      foregroundColor = getColor({
-        variable: fgVariable,
-        light: { offset: 100 },
-        theme
-      });
-      anchorHoverColor = getColor({
-        variable: fgVariable,
-        light: { offset: 200 },
-        theme
-      });
-      anchorActiveColor = getColor({
-        variable: fgVariable,
-        light: { offset: 300 },
-        theme
-      });
-      focusVariable = fgVariable;
-      break;
-    }
-    case 'info': {
-      borderColor = getColor({
-        variable: 'border.primaryEmphasis',
-        light: { offset: -300 },
-        theme
-      });
-      backgroundColor = getColor({
-        variable: 'background.primaryEmphasis',
-        light: { offset: -400 },
-        theme
-      });
-      const fgVariable = 'foreground.primary';
-      foregroundColor = getColor({
-        variable: fgVariable,
-        light: { offset: 100 },
-        theme
-      });
-      anchorHoverColor = getColor({
-        variable: fgVariable,
-        light: { offset: 200 },
-        theme
-      });
-      anchorActiveColor = getColor({
-        variable: fgVariable,
-        light: { offset: 300 },
-        theme
-      });
-      focusVariable = fgVariable;
-      break;
-    }
-  }
-
-  if (['success', 'error'].includes($alertType)) {
+  if (['error', 'success'].includes($alertType)) {
+    const borderVariable =
+      $alertType === 'success' ? 'border.successEmphasis' : 'border.dangerEmphasis';
+    const backgroundVariable =
+      $alertType === 'success' ? 'background.successEmphasis' : 'background.dangerEmphasis';
+    const foregroundVariable =
+      $alertType === 'success' ? 'foreground.success' : 'foreground.danger';
+
+    borderColor = getColor({ variable: borderVariable, light: { offset: 100 }, theme });
+    backgroundColor = getColor({ variable: backgroundVariable, theme });
+    foregroundColor = getColor({ variable: foregroundVariable, light: { offset: -600 }, theme });
+    focusVariable =
+      $alertType === 'success' ? 'foreground.successEmphasis' : 'foreground.dangerEmphasis';
     anchorHoverColor = theme.palette.white;
     anchorActiveColor = theme.palette.white;
+  } else {
+    const borderVariable =
+      $alertType === 'warning' ? 'border.warningEmphasis' : 'border.primaryEmphasis';
+    const backgroundVariable =
+      $alertType === 'warning' ? 'background.warningEmphasis' : 'background.primaryEmphasis';
+    const foregroundVariable =
+      $alertType === 'warning' ? 'foreground.warning' : 'foreground.primary';
+
+    borderColor = getColor({ variable: borderVariable, light: { offset: -300 }, theme });
+    backgroundColor = getColor({ variable: backgroundVariable, light: { offset: -400 }, theme });
+    foregroundColor = getColor({ variable: foregroundVariable, light: { offset: 100 }, theme });
+    anchorHoverColor = getColor({ variable: foregroundVariable, light: { offset: 200 }, theme });
+    anchorActiveColor = getColor({ variable: foregroundVariable, light: { offset: 300 }, theme });
+    focusVariable = foregroundVariable;
   }
 
   // Apply a border without affecting the element's size