mirror of
https://github.com/grafana/grafana.git
synced 2025-01-21 22:13:38 -06:00
66485b3e70
* GraphNG: Use new theme props * Minor fix to letterspacing in button * Minor tweaks * Updated * Revert to roboto * Added concept of a dark or white base * Style updates * Sass * Updated light text blue * updates * reverting button group design * Fixed tests * updates * Updated tests
50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
//@ts-ignore
|
|
import { create } from '@storybook/theming/create';
|
|
import lightTheme from '../src/themes/light';
|
|
import darkTheme from '../src/themes/dark';
|
|
import { GrafanaTheme } from '@grafana/data';
|
|
import '../src/components/Icon/iconBundle';
|
|
|
|
const createTheme = (theme: GrafanaTheme) => {
|
|
return create({
|
|
base: theme.name.includes('Light') ? 'light' : 'dark',
|
|
|
|
colorPrimary: theme.v2.palette.primary.main,
|
|
colorSecondary: theme.v2.palette.error.main,
|
|
|
|
// UI
|
|
appBg: theme.v2.palette.layer0,
|
|
appContentBg: theme.v2.palette.layer1,
|
|
appBorderColor: theme.v2.palette.border1,
|
|
appBorderRadius: theme.v2.shape.borderRadius(1),
|
|
|
|
// Typography
|
|
fontBase: theme.v2.typography.fontFamily,
|
|
fontCode: theme.v2.typography.fontFamilyMonospace,
|
|
|
|
// Text colors
|
|
textColor: theme.v2.palette.primary.text,
|
|
textInverseColor: theme.v2.palette.primary.contrastText,
|
|
|
|
// Toolbar default and active colors
|
|
barTextColor: theme.v2.palette.text.primary,
|
|
barSelectedColor: theme.v2.palette.emphasize(theme.v2.palette.primary.text),
|
|
barBg: theme.v2.palette.layer1,
|
|
|
|
// Form colors
|
|
inputBg: theme.v2.components.form.background,
|
|
inputBorder: theme.v2.components.form.border,
|
|
inputTextColor: theme.v2.components.form.text,
|
|
inputBorderRadius: theme.v2.shape.borderRadius(1),
|
|
|
|
brandTitle: 'Grafana UI',
|
|
brandUrl: './',
|
|
brandImage: 'public/img/grafana_icon.svg',
|
|
});
|
|
};
|
|
|
|
const GrafanaLight = createTheme(lightTheme);
|
|
const GrafanaDark = createTheme(darkTheme);
|
|
|
|
export { GrafanaLight, GrafanaDark };
|