chore: alex - colors!

2025-12-02 14:39:04 -08:00
parent c50dfb17e3
commit 2734cb55b6
8 changed files with 48 additions and 15 deletions
@@ -76,6 +76,7 @@ export const availableIconsIndex = {
  'cloud-info': true,
  'cloud-provider': true,
  'cloud-upload': true,
+  code: true,
  'code-branch': true,
  cog: true,
  columns: true,
@@ -214,6 +215,7 @@ export const availableIconsIndex = {
  'pause-circle': true,
  pen: true,
  percentage: true,
+  pivot: true,
  play: true,
  plug: true,
  plus: true,
@@ -43,6 +43,7 @@
  "unicons/circle",
  "unicons/clipboard-alt",
  "unicons/clock-nine",
+  "unicons/code",
  "unicons/cloud",
  "unicons/cloud-database-tree",
  "unicons/cloud-download",
@@ -158,6 +159,7 @@
  "unicons/message",
  "unicons/palette",
  "unicons/percentage",
+  "unicons/pivot",
  "unicons/shield-exclamation",
  "unicons/plus-square",
  "unicons/x",
@@ -496,9 +496,10 @@ function getStyles(theme: GrafanaTheme2) {
      cursor: 'col-resize',
    }),
    leftPane: css({
-      // !important to override useSplitter's inline minWidth: 'min-content'
+      // !important to override useSplitter's inline styles
      minWidth: `${LEFT_PANE_MIN}px !important`,
      maxWidth: `${LEFT_PANE_MAX}px !important`,
+      overflow: 'hidden',
    }),
  };
 }
@@ -8,6 +8,7 @@ import { getDataSourceSrv } from '@grafana/runtime';
 import { SceneDataQuery } from '@grafana/scenes';
 import { Icon, IconButton, Stack, useStyles2 } from '@grafana/ui';

+import { usePanelDataPaneColors } from './theme';
 import { queryItemId, transformItemId } from './utils';

 interface QueryTransformCardProps {
@@ -23,7 +24,8 @@ interface QueryTransformCardProps {

 export const QueryTransformCard = memo(
  ({ item, type, index, isSelected, onClick, onDuplicate, onRemove, onToggleVisibility }: QueryTransformCardProps) => {
-    const styles = useStyles2(getStyles);
+    const colors = usePanelDataPaneColors();
+    const styles = useStyles2(getStyles, colors);

    const getName = (): string => {
      if ((type === 'query' || type === 'expression') && 'refId' in item) {
@@ -47,7 +49,7 @@ export const QueryTransformCard = memo(
    }, [type, item]);

    const isHidden = (type === 'query' || type === 'expression') && 'hide' in item && item.hide;
-    const icon = type === 'query' ? 'database' : type === 'expression' ? 'calculator-alt' : 'process';
+    const icon = type === 'query' ? 'database' : type === 'expression' ? 'code' : 'pivot';
    const typeLabel = type === 'query' ? 'Query' : type === 'expression' ? 'Expression' : 'Transformation';
    const name = getName();

@@ -145,7 +147,7 @@ export const QueryTransformCard = memo(

 QueryTransformCard.displayName = 'QueryTransformCard';

-const getStyles = (theme: GrafanaTheme2) => {
+const getStyles = (theme: GrafanaTheme2, colors: ReturnType<typeof usePanelDataPaneColors>) => {
  const selectedClass = 'card-selected';
  const hiddenClass = 'card-hidden';

@@ -156,7 +158,7 @@ const getStyles = (theme: GrafanaTheme2) => {
      border: `1px solid ${theme.colors.border.weak}`,
      borderRadius: theme.shape.radius.default,
      overflow: 'hidden',
-      background: theme.colors.background.primary,
+      background: theme.colors.background.secondary,
      width: '100%',
      minWidth: 180,
      maxWidth: 240,
@@ -182,28 +184,27 @@ const getStyles = (theme: GrafanaTheme2) => {
      alignItems: 'center',
      justifyContent: 'space-between',
      padding: theme.spacing(0.5),
-      background: theme.colors.primary.transparent,
+      background: theme.colors.background.canvas,
      borderBottom: `1px solid ${theme.colors.border.weak}`,
+      color: colors.query.accent,
    }),
    headerTransform: css({
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      padding: theme.spacing(0.5),
-      background: theme.isDark
-        ? `${theme.visualization.getColorByName('orange')}20`
-        : `${theme.visualization.getColorByName('orange')}15`,
+      background: theme.colors.background.canvas,
      borderBottom: `1px solid ${theme.colors.border.weak}`,
+      color: colors.transform.accent,
    }),
    headerExpression: css({
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      padding: theme.spacing(0.5),
-      background: theme.isDark
-        ? `${theme.visualization.getColorByName('purple')}20`
-        : `${theme.visualization.getColorByName('purple')}15`,
+      background: theme.colors.background.canvas,
      borderBottom: `1px solid ${theme.colors.border.weak}`,
+      color: colors.expression.accent,
    }),
    headerLeft: css({
      display: 'flex',
@@ -213,13 +214,13 @@ const getStyles = (theme: GrafanaTheme2) => {
      minWidth: 0,
    }),
    headerIcon: css({
-      color: theme.colors.text.secondary,
+      color: 'inherit',
      flexShrink: 0,
    }),
    typeLabel: css({
      fontFamily: "'CommitMono', monospace",
      fontSize: theme.typography.bodySmall.fontSize,
-      color: theme.colors.text.maxContrast,
+      color: 'inherit',
      textTransform: 'uppercase',
    }),
    actionButton: css({
@@ -211,6 +211,8 @@ const getStyles = (theme: GrafanaTheme2) => {
      display: 'flex',
      flexDirection: 'column',
      height: '100%',
+      width: '100%',
+      maxWidth: '100%',
      overflow: 'hidden',
      border: `1px solid ${theme.colors.border.weak}`,
    }),
@@ -243,7 +245,7 @@ const getStyles = (theme: GrafanaTheme2) => {
    }),
    footerStat: css({
      fontFamily: monoFont,
-      fontSize: '10px',
+      fontSize: theme.typography.bodySmall.fontSize,
      color: theme.colors.text.primary,
      textTransform: 'uppercase',
      letterSpacing: '0.05em',
@@ -0,0 +1,19 @@
+/**
+ * Custom accent colors for the Panel Data Pane card types.
+ */
+export const PANEL_DATA_PANE_COLORS = {
+  query: '#FF8904', // Orange
+  expression: '#C27AFF', // Purple
+  transform: '#00D492', // Green
+} as const;
+
+/**
+ * Get panel data pane colors with proper structure for components
+ */
+export function usePanelDataPaneColors() {
+  return {
+    query: { accent: PANEL_DATA_PANE_COLORS.query },
+    expression: { accent: PANEL_DATA_PANE_COLORS.expression },
+    transform: { accent: PANEL_DATA_PANE_COLORS.transform },
+  };
+}
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.81875 4.55625L7.94375 2.68125C7.83125 2.56875 7.675 2.5 7.5 2.5C7.15625 2.5 6.875 2.78125 6.875 3.125C6.875 3.3 6.94375 3.45625 7.05625 3.56875L8.49375 5L7.0625 6.43125C6.94375 6.54375 6.875 6.7 6.875 6.875C6.875 7.21875 7.15625 7.5 7.5 7.5C7.675 7.5 7.83125 7.43125 7.94375 7.31875L9.81875 5.44375C9.93125 5.33125 10 5.175 10 5C10 4.825 9.93125 4.66875 9.81875 4.55625ZM3.125 3.125C3.125 2.78125 2.84375 2.5 2.5 2.5C2.325 2.5 2.16875 2.56875 2.05625 2.68125L0.18125 4.55625C0.06875 4.66875 0 4.825 0 5C0 5.175 0.06875 5.33125 0.18125 5.44375L2.05625 7.31875C2.16875 7.43125 2.325 7.5 2.5 7.5C2.84375 7.5 3.125 7.21875 3.125 6.875C3.125 6.7 3.05625 6.54375 2.94375 6.43125L1.50625 5L2.9375 3.56875C3.05625 3.45625 3.125 3.3 3.125 3.125ZM5.625 1.25C5.325 1.25 5.08125 1.46875 5.025 1.75625L3.775 8.00625C3.76875 8.04375 3.75 8.08125 3.75 8.125C3.75 8.46875 4.03125 8.75 4.375 8.75C4.675 8.75 4.91875 8.53125 4.975 8.24375L6.225 1.99375C6.23125 1.95625 6.25 1.91875 6.25 1.875C6.25 1.53125 5.96875 1.25 5.625 1.25Z" fill="currentColor"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.85625 4.3875L0.1875 7.05625C0.06875 7.16875 0 7.325 0 7.5C0 7.84375 0.28125 8.125 0.625 8.125C0.8 8.125 0.95625 8.05625 1.06875 7.94375L3.7375 5.275C3.375 5.05625 3.06875 4.75 2.85625 4.3875ZM9.375 5C9.03125 5 8.75 5.28125 8.75 5.625V5.99375L7.14375 4.3875C6.93125 4.75 6.625 5.05625 6.2625 5.26875L7.86875 6.875H7.5C7.15625 6.875 6.875 7.15625 6.875 7.5C6.875 7.84375 7.15625 8.125 7.5 8.125H9.375C9.71875 8.125 10 7.84375 10 7.5V5.625C10 5.28125 9.71875 5 9.375 5ZM6.875 3.125C6.875 2.0875 6.0375 1.25 5 1.25C3.9625 1.25 3.125 2.0875 3.125 3.125C3.125 4.1625 3.9625 5 5 5C6.0375 5 6.875 4.1625 6.875 3.125ZM5 3.75C4.65625 3.75 4.375 3.46875 4.375 3.125C4.375 2.78125 4.65625 2.5 5 2.5C5.34375 2.5 5.625 2.78125 5.625 3.125C5.625 3.46875 5.34375 3.75 5 3.75Z" fill="currentColor"/>
+</svg>