IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-12 08:35:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Joao Silva 2023-08-01 17:02:00 +01:00 committed by GitHub
parent d3b481dac8
commit 74f3352770
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/grafana-data/src/themes/createSpacing.ts
View File

@ -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;
}

2
packages/grafana-data/src/themes/index.ts
View File

@ -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';

2
packages/grafana-ui/src/components/IconButton/IconButton.tsx
View File

@ -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',