From 1ff9c47c7b2916d9ada2bd91d568e7f3c8413524 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 21 Apr 2023 11:09:46 +0200
Subject: [PATCH] ThemeDemo: Add transparent to ThemeDemo (#66994)

---
 .../src/components/ThemeDemos/ThemeDemo.tsx          | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
index 03827b83006..48d88651b6b 100644
--- a/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
+++ b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
@@ -121,6 +121,7 @@ export const ThemeDemo = () => {
                   <td>name</td>
                   <td>main</td>
                   <td>shade (used for hover)</td>
+                  <td>transparent</td>
                   <td>border & text</td>
                 </tr>
               </thead>
@@ -250,6 +251,17 @@ export function RichColorDemo({ theme, color }: RichColorDemoProps) {
           {color.shade}
         </div>
       </td>
+      <td>
+        <div
+          className={css`
+            background: ${color.transparent};
+            border-radius: 4px;
+            padding: 8px;
+          `}
+        >
+          {color.shade}
+        </div>
+      </td>
       <td>
         <div
           className={css`