2025-04-01 10:38:02 +09:00

40 lines
1.2 KiB
TypeScript

import { GrafanaTheme2 } from '@grafana/data';
import { create } from '@storybook/theming';
export const createStorybookTheme = (theme: GrafanaTheme2) => {
return create({
base: theme.colors.mode,
colorPrimary: theme.colors.primary.main,
colorSecondary: theme.colors.error.main,
// UI
appBg: theme.colors.background.canvas,
appContentBg: theme.colors.background.primary,
appBorderColor: theme.colors.border.medium,
appBorderRadius: 0,
// Typography
fontBase: theme.typography.fontFamily,
fontCode: theme.typography.fontFamilyMonospace,
// Text colors
textColor: theme.colors.text.primary,
textInverseColor: theme.colors.background.primary,
// Toolbar default and active colors
barTextColor: theme.colors.text.primary,
barSelectedColor: theme.colors.emphasize(theme.colors.primary.text),
barBg: theme.colors.background.primary,
// Form colors
inputBg: theme.components.input.background,
inputBorder: theme.components.input.borderColor,
inputTextColor: theme.components.input.text,
inputBorderRadius: parseInt(theme.shape.borderRadius(1), 10),
brandTitle: 'Grafana UI',
brandUrl: './',
brandImage: `public/img/grafana_text_logo-${theme.colors.mode}.svg`,
});
};