Forms: Introduce new spacing variables to GrafanaTheme (#19875)

* Introduce next-gen form spacing variables
* Update snapshots

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

@@ -202,6 +202,15 @@ exports[`Render should render with base threshold 1`] = `
                             },
                             "spacing": Object {
                               "d": "14px",
+                              "formFieldsetMargin": "16px",
+                              "formInputAffixPaddingHorizontal": "4px",
+                              "formInputHeight": "32px",
+                              "formInputMargin": "16px",
+                              "formInputPaddingHorizontal": "8px",
+                              "formLabelMargin": "0 0 4px 0",
+                              "formLabelPadding": "0 0 0 2px",
+                              "formLegendMargin": "16px",
+                              "formMargin": "32px",
                               "gutter": "30px",
                               "insetSquishMd": "4px 8px",
                               "lg": "24px",
@@ -399,6 +408,15 @@ exports[`Render should render with base threshold 1`] = `
                                   },
                                   "spacing": Object {
                                     "d": "14px",
+                                    "formFieldsetMargin": "16px",
+                                    "formInputAffixPaddingHorizontal": "4px",
+                                    "formInputHeight": "32px",
+                                    "formInputMargin": "16px",
+                                    "formInputPaddingHorizontal": "8px",
+                                    "formLabelMargin": "0 0 4px 0",
+                                    "formLabelPadding": "0 0 0 2px",
+                                    "formLegendMargin": "16px",
+                                    "formMargin": "32px",
                                     "gutter": "30px",
                                     "insetSquishMd": "4px 8px",
                                     "lg": "24px",

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

@@ -21,6 +21,8 @@ export const commonColorsPalette = {
   red88: '#e02f44',
 };
 
+const SPACING_BASE = 8;
+
 const theme: GrafanaThemeCommons = {
   name: 'Grafana Default',
   typography: {
@@ -77,6 +79,22 @@ const theme: GrafanaThemeCommons = {
     lg: '24px',
     xl: '32px',
     gutter: '30px',
+
+    // Next-gen forms spacing variables
+    // TODO: Move variables definition to respective components when implementing
+    formMargin: `${SPACING_BASE * 4}px`,
+    formFieldsetMargin: `${SPACING_BASE * 2}px`,
+    formLegendMargin: `${SPACING_BASE * 2}px`,
+    formInputHeight: `${SPACING_BASE * 4}px`,
+    formInputPaddingHorizontal: `${SPACING_BASE}px`,
+
+    // Used for icons do define spacing between icon and input field
+    // Applied on the right(prefix) or left(suffix)
+    formInputAffixPaddingHorizontal: `${SPACING_BASE / 2}px`,
+
+    formInputMargin: `${SPACING_BASE * 2}px`,
+    formLabelPadding: '0 0 0 2px',
+    formLabelMargin: '0 0 4px 0',
   },
   border: {
     radius: {

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

@@ -61,6 +61,20 @@ export interface GrafanaThemeCommons {
     lg: string;
     xl: string;
     gutter: string;
+
+    // Next-gen forms spacing variables
+    // TODO: Move variables definition to respective components when implementing
+    formMargin: string;
+    formFieldsetMargin: string;
+    formLegendMargin: string;
+    formInputHeight: string;
+    formInputPaddingHorizontal: string;
+    // Used for icons do define spacing between icon and input field
+    // Applied on the right(prefix) or left(suffix)
+    formInputAffixPaddingHorizontal: string;
+    formInputMargin: string;
+    formLabelPadding: string;
+    formLabelMargin: string;
   };
   border: {
     radius: {