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