1import { GrafanaTheme, GrafanaThemeCommons, GrafanaThemeType } from '../types';
2import { GrafanaTheme2 } from './types';
3
4export function createV1Theme(theme: Omit<GrafanaTheme2, 'v1'>): GrafanaTheme {
5  const oldCommon: GrafanaThemeCommons = {
6    name: 'Grafana Default',
7    typography: {
8      fontFamily: {
9        sansSerif: theme.typography.fontFamily,
10        monospace: theme.typography.fontFamilyMonospace,
11      },
12      size: {
13        base: `${theme.typography.fontSize}px`,
14        xs: theme.typography.size.xs,
15        sm: theme.typography.size.sm,
16        md: theme.typography.size.md,
17        lg: theme.typography.size.lg,
18      },
19      heading: {
20        h1: theme.typography.h1.fontSize,
21        h2: theme.typography.h2.fontSize,
22        h3: theme.typography.h3.fontSize,
23        h4: theme.typography.h4.fontSize,
24        h5: theme.typography.h5.fontSize,
25        h6: theme.typography.h6.fontSize,
26      },
27      weight: {
28        light: theme.typography.fontWeightLight,
29        regular: theme.typography.fontWeightRegular,
30        semibold: theme.typography.fontWeightMedium,
31        bold: theme.typography.fontWeightBold,
32      },
33      lineHeight: {
34        xs: theme.typography.bodySmall.lineHeight,
35        sm: theme.typography.bodySmall.lineHeight,
36        md: theme.typography.body.lineHeight,
37        lg: theme.typography.h2.lineHeight,
38      },
39      link: {
40        decoration: 'none',
41        hoverDecoration: 'none',
42      },
43    },
44    breakpoints: {
45      xs: `${theme.breakpoints.values.xs}px`,
46      sm: `${theme.breakpoints.values.sm}px`,
47      md: `${theme.breakpoints.values.md}px`,
48      lg: `${theme.breakpoints.values.lg}px`,
49      xl: `${theme.breakpoints.values.xl}px`,
50      xxl: `${theme.breakpoints.values.xxl}px`,
51    },
52    spacing: {
53      base: theme.spacing.gridSize,
54      insetSquishMd: theme.spacing(0.5, 1),
55      d: theme.spacing(2),
56      xxs: theme.spacing(0.25),
57      xs: theme.spacing(0.5),
58      sm: theme.spacing(1),
59      md: theme.spacing(2),
60      lg: theme.spacing(3),
61      xl: theme.spacing(4),
62      gutter: theme.spacing(4),
63
64      // Next-gen forms spacing variables
65      // TODO: Move variables definition to respective components when implementing
66      formSpacingBase: theme.spacing.gridSize,
67      formMargin: `${theme.spacing.gridSize * 4}px`,
68      formFieldsetMargin: `${theme.spacing.gridSize * 2}px`,
69      formInputHeight: theme.spacing.gridSize * 4,
70      formButtonHeight: theme.spacing.gridSize * 4,
71      formInputPaddingHorizontal: `${theme.spacing.gridSize}px`,
72
73      // Used for icons do define spacing between icon and input field
74      // Applied on the right(prefix) or left(suffix)
75      formInputAffixPaddingHorizontal: `${theme.spacing.gridSize / 2}px`,
76
77      formInputMargin: `${theme.spacing.gridSize * 2}px`,
78      formLabelPadding: '0 0 0 2px',
79      formLabelMargin: `0 0 ${theme.spacing.gridSize / 2 + 'px'} 0`,
80      formValidationMessagePadding: '4px 8px',
81      formValidationMessageMargin: '4px 0 0 0',
82      inlineFormMargin: '4px',
83    },
84    border: {
85      radius: {
86        sm: theme.shape.borderRadius(1),
87        md: theme.shape.borderRadius(2),
88        lg: theme.shape.borderRadius(3),
89      },
90      width: {
91        sm: '1px',
92      },
93    },
94    height: {
95      sm: theme.spacing.gridSize * theme.components.height.sm,
96      md: theme.spacing.gridSize * theme.components.height.md,
97      lg: theme.spacing.gridSize * theme.components.height.lg,
98    },
99    panelPadding: theme.components.panel.padding * theme.spacing.gridSize,
100    panelHeaderHeight: theme.spacing.gridSize * theme.components.panel.headerHeight,
101    zIndex: theme.zIndex,
102  };
103
104  const basicColors = {
105    ...commonColorsPalette,
106    black: '#000000',
107    white: '#ffffff',
108    dark1: '#141414',
109    dark2: '#161719',
110    dark3: '#1f1f20',
111    dark4: '#212124',
112    dark5: '#222426',
113    dark6: '#262628',
114    dark7: '#292a2d',
115    dark8: '#2f2f32',
116    dark9: '#343436',
117    dark10: '#424345',
118    gray1: '#555555',
119    gray2: '#8e8e8e',
120    gray3: '#b3b3b3',
121    gray4: '#d8d9da',
122    gray5: '#ececec',
123    gray6: '#f4f5f8', // not used in dark theme
124    gray7: '#fbfbfb', // not used in dark theme
125    redBase: '#e02f44',
126    redShade: '#c4162a',
127    greenBase: '#299c46',
128    greenShade: '#23843b',
129    red: '#d44a3a',
130    yellow: '#ecbb13',
131    purple: '#9933cc',
132    variable: '#32d1df',
133    orange: '#eb7b18',
134    orangeDark: '#ff780a',
135  };
136
137  const backgrounds = {
138    bg1: theme.colors.background.primary,
139    bg2: theme.colors.background.secondary,
140    bg3: theme.colors.action.hover,
141    dashboardBg: theme.colors.background.canvas,
142    bgBlue1: theme.colors.primary.main,
143    bgBlue2: theme.colors.primary.shade,
144  };
145
146  const borders = {
147    border1: theme.colors.border.weak,
148    border2: theme.colors.border.medium,
149    border3: theme.colors.border.strong,
150  };
151
152  const textColors = {
153    textStrong: theme.colors.text.maxContrast,
154    textHeading: theme.colors.text.primary,
155    text: theme.colors.text.primary,
156    textSemiWeak: theme.colors.text.secondary,
157    textWeak: theme.colors.text.secondary,
158    textFaint: theme.colors.text.disabled,
159    textBlue: theme.colors.primary.text,
160  };
161
162  const form = {
163    // Next-gen forms functional colors
164    formLabel: theme.colors.text.primary,
165    formDescription: theme.colors.text.secondary,
166    formInputBg: theme.components.input.background,
167    formInputBgDisabled: theme.colors.action.disabledBackground,
168    formInputBorder: theme.components.input.borderColor,
169    formInputBorderHover: theme.components.input.borderHover,
170    formInputBorderActive: theme.colors.primary.border,
171    formInputBorderInvalid: theme.colors.error.border,
172    formInputPlaceholderText: theme.colors.text.disabled,
173    formInputText: theme.components.input.text,
174    formInputDisabledText: theme.colors.action.disabledText,
175    formFocusOutline: theme.colors.primary.main,
176    formValidationMessageText: theme.colors.error.contrastText,
177    formValidationMessageBg: theme.colors.error.main,
178  };
179
180  return {
181    ...oldCommon,
182    type: theme.colors.mode === 'dark' ? GrafanaThemeType.Dark : GrafanaThemeType.Light,
183    isDark: theme.isDark,
184    isLight: theme.isLight,
185    name: theme.name,
186    palette: {
187      ...basicColors,
188      brandPrimary: basicColors.orange,
189      brandSuccess: theme.colors.success.main,
190      brandWarning: theme.colors.warning.main,
191      brandDanger: theme.colors.error.main,
192      queryRed: theme.colors.error.text,
193      queryGreen: theme.colors.success.text,
194      queryPurple: '#fe85fc',
195      queryOrange: basicColors.orange,
196      online: theme.colors.success.main,
197      warn: theme.colors.success.main,
198      critical: theme.colors.success.main,
199    },
200    colors: {
201      ...backgrounds,
202      ...borders,
203      ...form,
204      ...textColors,
205
206      bodyBg: theme.colors.background.canvas,
207      panelBg: theme.components.panel.background,
208      panelBorder: theme.components.panel.borderColor,
209      pageHeaderBg: theme.colors.background.canvas,
210      pageHeaderBorder: theme.colors.background.canvas,
211
212      dropdownBg: form.formInputBg,
213      dropdownShadow: basicColors.black,
214      dropdownOptionHoverBg: backgrounds.bg2,
215
216      link: theme.colors.text.primary,
217      linkDisabled: theme.colors.text.disabled,
218      linkHover: theme.colors.text.maxContrast,
219      linkExternal: theme.colors.text.link,
220    },
221    shadows: {
222      listItem: 'none',
223    },
224    visualization: theme.visualization,
225  };
226}
227
228const commonColorsPalette = {
229  // New greys palette used by next-gen form elements
230  gray98: '#f7f8fa',
231  gray97: '#f1f5f9',
232  gray95: '#e9edf2',
233  gray90: '#dce1e6',
234  gray85: '#c7d0d9',
235  gray70: '#9fa7b3',
236  gray60: '#7b8087',
237  gray33: '#464c54',
238  gray25: '#2c3235',
239  gray15: '#202226',
240  gray10: '#141619',
241  gray05: '#0b0c0e',
242
243  // New blues palette used by next-gen form elements
244  blue95: '#5794f2', // blue95
245  blue85: '#33a2e5', // blueText
246  blue80: '#3274d9', // blue80
247  blue77: '#1f60c4', // blue77
248
249  // New reds palette used by next-gen form elements
250  red88: '#e02f44',
251};
252