From 0f93e02ae64fb9e8ceb05b87f065ae58d6db20da Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 2 May 2025 17:42:02 +0100
Subject: [PATCH] Storybook: Add viz hues to theme demo (#104889)

* add viz hues to theme demo in storybook

* don't need ThemeVizColor
---
 .../src/components/ThemeDemos/ThemeDemo.tsx   | 53 ++++++++++++++++++-
 1 file changed, 52 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
index 0e6315899df..cc243bee735 100644
--- a/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
+++ b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
@@ -2,8 +2,9 @@
 import { css, cx } from '@emotion/css';
 import { useState } from 'react';
 import * as React from 'react';
+import tinycolor from 'tinycolor2';
 
-import { GrafanaTheme2, ThemeRichColor } from '@grafana/data';
+import { GrafanaTheme2, ThemeRichColor, ThemeVizHue } from '@grafana/data';
 
 import { useTheme2 } from '../../themes/ThemeContext';
 import { allButtonVariants, Button } from '../Button';
@@ -74,6 +75,8 @@ export const ThemeDemo = () => {
     t.colors.info,
   ];
 
+  const vizColors = t.visualization.hues;
+
   const selectOptions = [
     { label: 'Item 1', value: 'Item 1' },
     { label: 'Item 2', value: 'Item 2' },
@@ -142,6 +145,27 @@ export const ThemeDemo = () => {
             </table>
           </DemoBox>
         </CollapsableSection>
+        <CollapsableSection label="Viz hues" isOpen={true}>
+          <DemoBox bg="primary">
+            <table className={colorsTableStyle}>
+              <thead>
+                <tr>
+                  <td>name</td>
+                  <td>super-light</td>
+                  <td>light</td>
+                  <td>primary</td>
+                  <td>semi-dark</td>
+                  <td>dark</td>
+                </tr>
+              </thead>
+              <tbody>
+                {vizColors.map((color) => (
+                  <VizHuesDemo key={color.name} color={color} theme={t} />
+                ))}
+              </tbody>
+            </table>
+          </DemoBox>
+        </CollapsableSection>
         <CollapsableSection label="Forms" isOpen={true}>
           <DemoBox bg="primary">
             <Field label="Input label" description="Field description">
@@ -226,6 +250,33 @@ export const ThemeDemo = () => {
   );
 };
 
+interface VizHuesDemoProps {
+  color: ThemeVizHue;
+  theme: GrafanaTheme2;
+}
+
+export function VizHuesDemo({ theme, color }: VizHuesDemoProps) {
+  return (
+    <tr>
+      <td>{color.name}</td>
+      {color.shades.map((shade) => (
+        <td>
+          <div
+            className={css({
+              background: shade.color,
+              borderRadius: theme.shape.radius.default,
+              color: tinycolor(shade.color).isLight() ? 'black' : 'white',
+              padding: theme.spacing(1),
+            })}
+          >
+            {shade.color}
+          </div>
+        </td>
+      ))}
+    </tr>
+  );
+}
+
 interface RichColorDemoProps {
   theme: GrafanaTheme2;
   color: ThemeRichColor;