From 2734cb55b6bc636d4332d1bb61dddf756b3330e0 Mon Sep 17 00:00:00 2001 From: Alex Spencer <52186778+alexjonspencer1@users.noreply.github.com> Date: Tue, 2 Dec 2025 14:39:04 -0800 Subject: [PATCH] chore: alex - colors! --- packages/grafana-data/src/types/icon.ts | 2 ++ public/app/core/icons/cached.json | 2 ++ .../PanelDataPane/PanelDataPane.tsx | 3 ++- .../PanelDataPane/QueryTransformCard.tsx | 27 ++++++++++--------- .../PanelDataPane/QueryTransformList.tsx | 4 ++- .../panel-edit/PanelDataPane/theme.ts | 19 +++++++++++++ public/img/icons/unicons/code.svg | 3 +++ public/img/icons/unicons/pivot.svg | 3 +++ 8 files changed, 48 insertions(+), 15 deletions(-) create mode 100644 public/app/features/dashboard-scene/panel-edit/PanelDataPane/theme.ts create mode 100644 public/img/icons/unicons/code.svg create mode 100644 public/img/icons/unicons/pivot.svg diff --git a/packages/grafana-data/src/types/icon.ts b/packages/grafana-data/src/types/icon.ts index b49be0d5363..20bac62604e 100644 --- a/packages/grafana-data/src/types/icon.ts +++ b/packages/grafana-data/src/types/icon.ts @@ -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, diff --git a/public/app/core/icons/cached.json b/public/app/core/icons/cached.json index e78419e6d72..82dcbcf114d 100644 --- a/public/app/core/icons/cached.json +++ b/public/app/core/icons/cached.json @@ -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", diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx index 63f3d51d8bc..ad56c0e2696 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx @@ -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', }), }; } diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformCard.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformCard.tsx index d4f469c5077..fd6893bbf01 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformCard.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformCard.tsx @@ -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) => { 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({ diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx index 9b558a56002..d0abd0313b9 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx @@ -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', diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/theme.ts b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/theme.ts new file mode 100644 index 00000000000..f8eb2413d1e --- /dev/null +++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/theme.ts @@ -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 }, + }; +} diff --git a/public/img/icons/unicons/code.svg b/public/img/icons/unicons/code.svg new file mode 100644 index 00000000000..184e5c608f6 --- /dev/null +++ b/public/img/icons/unicons/code.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/icons/unicons/pivot.svg b/public/img/icons/unicons/pivot.svg new file mode 100644 index 00000000000..c653969cf87 --- /dev/null +++ b/public/img/icons/unicons/pivot.svg @@ -0,0 +1,3 @@ + + +