Forms: Introduce new color variables to GrafanaTheme (#19874)

* Introduce new color primitives for next-gen forms
* Introduce next-gen form functional colors palette
* Update snapshot

packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap

@@ -98,6 +98,9 @@ exports[`Render should render with base threshold 1`] = `
                             "colors": Object {
                               "black": "#000000",
                               "blue": "#33b5e5",
+                              "blue77": "#1f60c4",
+                              "blue85": "#3274d9",
+                              "blue95": "#5794f2",
                               "blueBase": "#3274d9",
                               "blueFaint": "#041126",
                               "blueLight": "#5794f2",
@@ -119,13 +122,37 @@ exports[`Render should render with base threshold 1`] = `
                               "dark7": "#292a2d",
                               "dark8": "#2f2f32",
                               "dark9": "#343436",
+                              "formDescription": "#9fa7b3",
+                              "formInputBg": "#202226",
+                              "formInputBgDisabled": "#141619",
+                              "formInputBorder": "#343b40",
+                              "formInputBorderActive": "#5794f2",
+                              "formInputBorderHover": "#464c54",
+                              "formInputBorderInvalid": "#e02f44",
+                              "formInputFocusOutline": "#1f60c4",
+                              "formInputText": "#9fa7b3",
+                              "formInputTextStrong": "#c7d0d9",
+                              "formInputTextWhite": "#ffffff",
+                              "formLabel": "#9fa7b3",
+                              "formLegend": "#c7d0d9",
+                              "formValidationMessageBg": "#e02f44",
+                              "formValidationMessageText": "#ffffff",
+                              "gray05": "#0b0c0e",
                               "gray1": "#555555",
+                              "gray10": "#141619",
+                              "gray15": "#202226",
                               "gray2": "#8e8e8e",
+                              "gray25": "#343b40",
                               "gray3": "#b3b3b3",
+                              "gray33": "#464c54",
                               "gray4": "#d8d9da",
                               "gray5": "#ececec",
                               "gray6": "#f4f5f8",
                               "gray7": "#fbfbfb",
+                              "gray70": "#9fa7b3",
+                              "gray85": "#c7d0d9",
+                              "gray95": "#e9edf2",
+                              "gray98": "#f7f8fa",
                               "grayBlue": "#212327",
                               "greenBase": "#299c46",
                               "greenShade": "#23843b",
@@ -147,6 +174,7 @@ exports[`Render should render with base threshold 1`] = `
                               "queryPurple": "#fe85fc",
                               "queryRed": "#e02f44",
                               "red": "#d44a3a",
+                              "red88": "#e02f44",
                               "redBase": "#e02f44",
                               "redShade": "#c4162a",
                               "text": "#d8d9da",
@@ -267,6 +295,9 @@ exports[`Render should render with base threshold 1`] = `
                                   "colors": Object {
                                     "black": "#000000",
                                     "blue": "#33b5e5",
+                                    "blue77": "#1f60c4",
+                                    "blue85": "#3274d9",
+                                    "blue95": "#5794f2",
                                     "blueBase": "#3274d9",
                                     "blueFaint": "#041126",
                                     "blueLight": "#5794f2",
@@ -288,13 +319,37 @@ exports[`Render should render with base threshold 1`] = `
                                     "dark7": "#292a2d",
                                     "dark8": "#2f2f32",
                                     "dark9": "#343436",
+                                    "formDescription": "#9fa7b3",
+                                    "formInputBg": "#202226",
+                                    "formInputBgDisabled": "#141619",
+                                    "formInputBorder": "#343b40",
+                                    "formInputBorderActive": "#5794f2",
+                                    "formInputBorderHover": "#464c54",
+                                    "formInputBorderInvalid": "#e02f44",
+                                    "formInputFocusOutline": "#1f60c4",
+                                    "formInputText": "#9fa7b3",
+                                    "formInputTextStrong": "#c7d0d9",
+                                    "formInputTextWhite": "#ffffff",
+                                    "formLabel": "#9fa7b3",
+                                    "formLegend": "#c7d0d9",
+                                    "formValidationMessageBg": "#e02f44",
+                                    "formValidationMessageText": "#ffffff",
+                                    "gray05": "#0b0c0e",
                                     "gray1": "#555555",
+                                    "gray10": "#141619",
+                                    "gray15": "#202226",
                                     "gray2": "#8e8e8e",
+                                    "gray25": "#343b40",
                                     "gray3": "#b3b3b3",
+                                    "gray33": "#464c54",
                                     "gray4": "#d8d9da",
                                     "gray5": "#ececec",
                                     "gray6": "#f4f5f8",
                                     "gray7": "#fbfbfb",
+                                    "gray70": "#9fa7b3",
+                                    "gray85": "#c7d0d9",
+                                    "gray95": "#e9edf2",
+                                    "gray98": "#f7f8fa",
                                     "grayBlue": "#212327",
                                     "greenBase": "#299c46",
                                     "greenShade": "#23843b",
@@ -316,6 +371,7 @@ exports[`Render should render with base threshold 1`] = `
                                     "queryPurple": "#fe85fc",
                                     "queryRed": "#e02f44",
                                     "red": "#d44a3a",
+                                    "red88": "#e02f44",
                                     "redBase": "#e02f44",
                                     "redShade": "#c4162a",
                                     "text": "#d8d9da",

packages/grafana-ui/src/themes/dark.ts

@@ -1,7 +1,8 @@
-import defaultTheme from './default';
+import defaultTheme, { commonColorsPalette } from './default';
 import { GrafanaTheme, GrafanaThemeType } from '../types/theme';
 
 const basicColors = {
+  ...commonColorsPalette,
   black: '#000000',
   white: '#ffffff',
   dark1: '#141414',
@@ -74,6 +75,23 @@ const darkTheme: GrafanaTheme = {
     linkExternal: basicColors.blue,
     headingColor: basicColors.gray4,
     pageHeaderBorder: basicColors.dark9,
+
+    // Next-gen forms functional colors
+    formLabel: basicColors.gray70,
+    formDescription: basicColors.gray70,
+    formLegend: basicColors.gray85,
+    formInputBg: basicColors.gray15,
+    formInputBgDisabled: basicColors.gray10,
+    formInputBorder: basicColors.gray25,
+    formInputBorderHover: basicColors.gray33,
+    formInputBorderActive: basicColors.blue95,
+    formInputBorderInvalid: basicColors.red88,
+    formInputFocusOutline: basicColors.blue77,
+    formInputText: basicColors.gray70,
+    formInputTextStrong: basicColors.gray85,
+    formInputTextWhite: basicColors.white,
+    formValidationMessageText: basicColors.white,
+    formValidationMessageBg: basicColors.red88,
   },
   background: {
     dropdown: basicColors.dark3,

packages/grafana-ui/src/themes/default.ts

@@ -1,5 +1,26 @@
 import { GrafanaThemeCommons } from '../types/theme';
 
+export const commonColorsPalette = {
+  // New greys palette used by next-gen form elements
+  gray98: '#f7f8fa',
+  gray95: '#e9edf2',
+  gray85: '#c7d0d9',
+  gray70: '#9fa7b3',
+  gray33: '#464c54',
+  gray25: '#343b40',
+  gray15: '#202226',
+  gray10: '#141619',
+  gray05: '#0b0c0e',
+
+  // New blues palette used by next-gen form elements
+  blue95: '#5794f2',
+  blue85: '#3274d9',
+  blue77: '#1f60c4',
+
+  // New reds palette used by next-gen form elements
+  red88: '#e02f44',
+};
+
 const theme: GrafanaThemeCommons = {
   name: 'Grafana Default',
   typography: {

packages/grafana-ui/src/themes/light.ts

@@ -1,7 +1,8 @@
-import defaultTheme from './default';
+import defaultTheme, { commonColorsPalette } from './default';
 import { GrafanaTheme, GrafanaThemeType } from '../types/theme';
 
 const basicColors = {
+  ...commonColorsPalette,
   black: '#000000',
   white: '#ffffff',
   dark1: '#1e2028',
@@ -75,6 +76,23 @@ const lightTheme: GrafanaTheme = {
     linkExternal: basicColors.blueLight,
     headingColor: basicColors.gray1,
     pageHeaderBorder: basicColors.gray4,
+
+    // Next-gen forms functional colors
+    formLabel: basicColors.gray33,
+    formDescription: basicColors.gray33,
+    formLegend: basicColors.gray25,
+    formInputBg: basicColors.white,
+    formInputBgDisabled: basicColors.gray95,
+    formInputBorder: basicColors.gray85,
+    formInputBorderHover: basicColors.gray70,
+    formInputBorderActive: basicColors.blue77,
+    formInputBorderInvalid: basicColors.red88,
+    formInputFocusOutline: basicColors.blue95,
+    formInputText: basicColors.gray33,
+    formInputTextStrong: basicColors.gray25,
+    formInputTextWhite: basicColors.white,
+    formValidationMessageText: basicColors.white,
+    formValidationMessageBg: basicColors.red88,
   },
   background: {
     dropdown: basicColors.white,

packages/grafana-ui/src/types/theme.ts

@@ -120,6 +120,26 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     gray5: string;
     gray6: string;
     gray7: string;
+
+    // New greys palette used by next-gen form elements
+    gray98: string;
+    gray95: string;
+    gray85: string;
+    gray70: string;
+    gray33: string;
+    gray25: string;
+    gray15: string;
+    gray10: string;
+    gray05: string;
+
+    // New blues palette used by next-gen form elements
+    blue95: string;
+    blue85: string;
+    blue77: string;
+
+    // New reds palette used by next-gen form elements
+    red88: string;
+
     grayBlue: string;
     inputBlack: string;
 
@@ -174,6 +194,23 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     headingColor: string;
 
     pageHeaderBorder: string;
+
+    // Next-gen forms functional colors
+    formLabel: string;
+    formDescription: string;
+    formLegend: string;
+    formInputBg: string;
+    formInputBgDisabled: string;
+    formInputBorder: string;
+    formInputBorderHover: string;
+    formInputBorderActive: string;
+    formInputBorderInvalid: string;
+    formInputFocusOutline: string;
+    formInputText: string;
+    formInputTextStrong: string;
+    formInputTextWhite: string;
+    formValidationMessageText: string;
+    formValidationMessageBg: string;
   };
   shadow: {
     pageHeader: string;