Saga: Add new spacing tokens to the theme (#69319)

packages/grafana-data/src/themes/createSpacing.ts

@@ -15,7 +15,7 @@ export type ThemeSpacingArgument = number | string;
  * The different signatures imply different meaning for their arguments that can't be expressed structurally.
  * We express the difference with variable names.
  * tslint:disable:unified-signatures */
-export interface ThemeSpacing {
+export interface ThemeSpacing extends SpacingTokens {
   (): string;
   (value: ThemeSpacingArgument): string;
   (topBottom: ThemeSpacingArgument, rightLeft: ThemeSpacingArgument): string;
@@ -29,6 +29,14 @@ export interface ThemeSpacing {
   gridSize: number;
 }
 
+// Possible spacing token options
+export type ThemeSpacingTokens = 0 | 0.25 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 4 | 5 | 6 | 8 | 10;
+
+// Spacing tokens as represented in the theme
+type SpacingTokens = {
+  [key in `x${Exclude<ThemeSpacingTokens, 0.25 | 0.5 | 1.5 | 2.5> | '0_25' | '0_5' | '1_5' | '2_5'}`]: string;
+};
+
 /** @internal */
 export function createSpacing(options: ThemeSpacingOptions = {}): ThemeSpacing {
   const { gridSize = 8 } = options;
@@ -67,5 +75,22 @@ export function createSpacing(options: ThemeSpacingOptions = {}): ThemeSpacing {
 
   spacing.gridSize = gridSize;
 
+  // Design system spacing tokens
+  // Added in v10.2 of Grafana, if using spacing in a plugin that needs compatibility with older versions
+  // use the spacing function instead.
+  spacing.x0 = '0px';
+  spacing.x0_25 = '2px';
+  spacing.x0_5 = '4px';
+  spacing.x1 = '8px';
+  spacing.x1_5 = '12px';
+  spacing.x2 = '16px';
+  spacing.x2_5 = '20px';
+  spacing.x3 = '24px';
+  spacing.x4 = '32px';
+  spacing.x5 = '40px';
+  spacing.x6 = '48px';
+  spacing.x8 = '64px';
+  spacing.x10 = '80px';
+
   return spacing;
 }

packages/grafana-data/src/themes/index.ts

@@ -8,7 +8,7 @@ export type { ThemeShadows } from './createShadows';
 export type { ThemeShape } from './createShape';
 export type { ThemeTypography, ThemeTypographyVariant, ThemeTypographyVariantTypes } from './createTypography';
 export type { ThemeTransitions } from './createTransitions';
-export type { ThemeSpacing } from './createSpacing';
+export type { ThemeSpacing, ThemeSpacingTokens } from './createSpacing';
 export type { ThemeZIndices } from './zIndex';
 export type { ThemeVisualizationColors, ThemeVizColor, ThemeVizHue } from './createVisualizationColors';
 

packages/grafana-ui/src/components/IconButton/IconButton.tsx

@@ -121,7 +121,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2, size, variant: IconButton
     button: css({
       zIndex: 0,
       position: 'relative',
-      margin: theme.spacing(0, 0.5, 0, 0),
+      margin: `0 ${theme.spacing.x0_5} 0 0`,
       boxShadow: 'none',
       border: 'none',
       display: 'inline-flex',