From 6cede325354d67b940d582be1e4f25eb1df26694 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 27 Sep 2023 20:19:46 +0200
Subject: [PATCH] Theme: Add borderTransparent to ThemeRichColor use in Box
 borders (#75407)

* Theme: Add borderTransparent to ThemeRichColor use in Box borders

* Fix spelling

* Update comment

* Update DashboardEmpty

* Restore prev value
---
 packages/grafana-data/src/themes/createColors.ts          | 3 +++
 packages/grafana-data/src/themes/types.ts                 | 2 ++
 packages/grafana-ui/src/components/Badge/Badge.tsx        | 4 ++--
 packages/grafana-ui/src/components/Layout/Box/Box.tsx     | 2 +-
 public/app/features/dashboard/dashgrid/DashboardEmpty.tsx | 8 ++++----
 5 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/grafana-data/src/themes/createColors.ts b/packages/grafana-data/src/themes/createColors.ts
index 849a6841077..4e2382347d2 100644
--- a/packages/grafana-data/src/themes/createColors.ts
+++ b/packages/grafana-data/src/themes/createColors.ts
@@ -294,6 +294,9 @@ export function createColors(colors: ThemeColorsInput): ThemeColors {
     if (!color.contrastText) {
       color.contrastText = getContrastText(color.main);
     }
+    if (!color.borderTransparent) {
+      color.borderTransparent = alpha(color.border, 0.25);
+    }
     return color as ThemeRichColor;
   };
 
diff --git a/packages/grafana-data/src/themes/types.ts b/packages/grafana-data/src/themes/types.ts
index b4fb4ff9b3d..f586937cf3c 100644
--- a/packages/grafana-data/src/themes/types.ts
+++ b/packages/grafana-data/src/themes/types.ts
@@ -49,6 +49,8 @@ export interface ThemeRichColor {
   border: string;
   /** Used subtly colored backgrounds */
   transparent: string;
+  /** Used for weak colored borders like larger alert/banner boxes and smaller badges and tags */
+  borderTransparent: string;
   /** Text color for text ontop of main */
   contrastText: string;
 }
diff --git a/packages/grafana-ui/src/components/Badge/Badge.tsx b/packages/grafana-ui/src/components/Badge/Badge.tsx
index 2588821fa58..d8cb863dea7 100644
--- a/packages/grafana-ui/src/components/Badge/Badge.tsx
+++ b/packages/grafana-ui/src/components/Badge/Badge.tsx
@@ -46,11 +46,11 @@ const getStyles = (theme: GrafanaTheme2, color: BadgeColor) => {
 
   if (theme.isDark) {
     bgColor = tinycolor(sourceColor).setAlpha(0.15).toString();
-    borderColor = tinycolor(sourceColor).darken(30).toString();
+    borderColor = tinycolor(sourceColor).setAlpha(0.25).toString();
     textColor = tinycolor(sourceColor).lighten(15).toString();
   } else {
     bgColor = tinycolor(sourceColor).setAlpha(0.15).toString();
-    borderColor = tinycolor(sourceColor).lighten(20).toString();
+    borderColor = tinycolor(sourceColor).setAlpha(0.25).toString();
     textColor = tinycolor(sourceColor).darken(20).toString();
   }
 
diff --git a/packages/grafana-ui/src/components/Layout/Box/Box.tsx b/packages/grafana-ui/src/components/Layout/Box/Box.tsx
index 6c604f8b10a..51527ca877e 100644
--- a/packages/grafana-ui/src/components/Layout/Box/Box.tsx
+++ b/packages/grafana-ui/src/components/Layout/Box/Box.tsx
@@ -136,7 +136,7 @@ const customBorderColor = (color: BorderColor, theme: GrafanaTheme2) => {
     case 'success':
     case 'info':
     case 'warning':
-      return theme.colors[color].border;
+      return theme.colors[color].borderTransparent;
     default:
       return color ? theme.colors.border[color] : undefined;
   }
diff --git a/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx b/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx
index 3b5c057a314..22fa9fe0261 100644
--- a/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx
@@ -27,7 +27,7 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
     <Flex alignItems="center" justifyContent="center">
       <div className={styles.wrapper}>
         <Flex alignItems="stretch" justifyContent="center" gap={4} direction="column">
-          <Box borderStyle="dashed" borderColor="info" padding={4}>
+          <Box borderColor="strong" borderStyle="dashed" padding={4}>
             <Flex direction="column" alignItems="center" gap={2}>
               <Text element="h1" textAlignment="center" weight="medium">
                 <Trans i18nKey="dashboard.empty.add-visualization-header">
@@ -60,7 +60,7 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
           </Box>
           <Flex direction={{ xs: 'column', md: 'row' }} wrap="wrap" gap={4}>
             {config.featureToggles.vizAndWidgetSplit && (
-              <Box borderStyle="dashed" borderColor="info" padding={3} grow={1}>
+              <Box borderColor="strong" borderStyle="dashed" padding={3} grow={1}>
                 <Flex direction="column" alignItems="center" gap={1}>
                   <Text element="h3" textAlignment="center" weight="medium">
                     <Trans i18nKey="dashboard.empty.add-widget-header">Add a widget</Trans>
@@ -85,7 +85,7 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
                 </Flex>
               </Box>
             )}
-            <Box borderStyle="dashed" borderColor="info" padding={3} grow={1}>
+            <Box borderColor="strong" borderStyle="dashed" padding={3} grow={1}>
               <Flex direction="column" alignItems="center" gap={1}>
                 <Text element="h3" textAlignment="center" weight="medium">
                   <Trans i18nKey="dashboard.empty.add-library-panel-header">Import panel</Trans>
@@ -111,7 +111,7 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
                 </Button>
               </Flex>
             </Box>
-            <Box borderStyle="dashed" borderColor="info" padding={3} grow={1}>
+            <Box borderColor="strong" borderStyle="dashed" padding={3} grow={1}>
               <Flex direction="column" alignItems="center" gap={1}>
                 <Text element="h3" textAlignment="center" weight="medium">
                   <Trans i18nKey="dashboard.empty.import-a-dashboard-header">Import a dashboard</Trans>