@mui/x-data-grid/constants/cssVariables.d.mts

The Community plan edition of the MUI X Data Grid components.

declare const keys: {
  readonly spacingUnit: '--DataGrid-t-spacing-unit';
  readonly colors: {
    readonly border: {
      readonly base: '--DataGrid-t-color-border-base';
    };
    readonly foreground: {
      readonly base: '--DataGrid-t-color-foreground-base';
      readonly muted: '--DataGrid-t-color-foreground-muted';
      readonly accent: '--DataGrid-t-color-foreground-accent';
      readonly disabled: '--DataGrid-t-color-foreground-disabled';
      readonly error: '--DataGrid-t-color-foreground-error';
    };
    readonly background: {
      readonly base: '--DataGrid-t-color-background-base';
      readonly overlay: '--DataGrid-t-color-background-overlay';
      readonly backdrop: '--DataGrid-t-color-background-backdrop';
    };
    readonly interactive: {
      readonly hover: '--DataGrid-t-color-interactive-hover';
      readonly hoverOpacity: '--DataGrid-t-color-interactive-hover-opacity';
      readonly focus: '--DataGrid-t-color-interactive-focus';
      readonly focusOpacity: '--DataGrid-t-color-interactive-focus-opacity';
      readonly disabled: '--DataGrid-t-color-interactive-disabled';
      readonly disabledOpacity: '--DataGrid-t-color-interactive-disabled-opacity';
      readonly selected: '--DataGrid-t-color-interactive-selected';
      readonly selectedOpacity: '--DataGrid-t-color-interactive-selected-opacity';
    };
  };
  readonly header: {
    readonly background: {
      readonly base: '--DataGrid-t-header-background-base';
    };
  };
  readonly cell: {
    readonly background: {
      readonly pinned: '--DataGrid-t-cell-background-pinned';
    };
  };
  readonly radius: {
    readonly base: '--DataGrid-t-radius-base';
  };
  readonly typography: {
    readonly font: {
      readonly body: '--DataGrid-t-typography-font-body';
      readonly small: '--DataGrid-t-typography-font-small';
      readonly large: '--DataGrid-t-typography-font-large';
    };
    readonly fontFamily: {
      readonly base: '--DataGrid-t-typography-font-family-base';
    };
    readonly fontWeight: {
      readonly light: '--DataGrid-t-typography-font-weight-light';
      readonly regular: '--DataGrid-t-typography-font-weight-regular';
      readonly medium: '--DataGrid-t-typography-font-weight-medium';
      readonly bold: '--DataGrid-t-typography-font-weight-bold';
    };
  };
  readonly transitions: {
    readonly easing: {
      readonly easeIn: '--DataGrid-t-transition-easing-ease-in';
      readonly easeOut: '--DataGrid-t-transition-easing-ease-out';
      readonly easeInOut: '--DataGrid-t-transition-easing-ease-in-out';
    };
    readonly duration: {
      readonly short: '--DataGrid-t-transition-duration-short';
      readonly base: '--DataGrid-t-transition-duration-base';
      readonly long: '--DataGrid-t-transition-duration-long';
    };
  };
  readonly shadows: {
    readonly base: '--DataGrid-t-shadow-base';
    readonly overlay: '--DataGrid-t-shadow-overlay';
  };
  readonly zIndex: {
    readonly panel: '--DataGrid-t-z-index-panel';
    readonly menu: '--DataGrid-t-z-index-menu';
    readonly modal: '--DataGrid-t-z-index-modal';
  };
};
export type GridCSSVariablesInterface = { [E in CreateObjectEntries<typeof keys> as E['value']]: string | number };
type Entry = {
  key: string;
  value: unknown;
};
type EmptyEntry<TValue> = {
  key: '';
  value: TValue;
};
type CreateObjectEntries<TValue, TValueInitial = TValue> = TValue extends object ? { [TKey in keyof TValue]-?: TKey extends string ? OmitItself<TValue[TKey], TValueInitial> extends infer TNestedValue ? TNestedValue extends Entry ? {
  key: `${TKey}.${TNestedValue['key']}`;
  value: TNestedValue['value'];
} : never : never : never }[keyof TValue] : EmptyEntry<TValue>;
type OmitItself<TValue, TValueInitial> = TValue extends TValueInitial ? EmptyEntry<TValue> : CreateObjectEntries<TValue, TValueInitial>;
export declare const vars: {
  spacingUnit: '--DataGrid-t-spacing-unit';
  colors: {
    readonly border: {
      readonly base: '--DataGrid-t-color-border-base';
    };
    readonly foreground: {
      readonly base: '--DataGrid-t-color-foreground-base';
      readonly muted: '--DataGrid-t-color-foreground-muted';
      readonly accent: '--DataGrid-t-color-foreground-accent';
      readonly disabled: '--DataGrid-t-color-foreground-disabled';
      readonly error: '--DataGrid-t-color-foreground-error';
    };
    readonly background: {
      readonly base: '--DataGrid-t-color-background-base';
      readonly overlay: '--DataGrid-t-color-background-overlay';
      readonly backdrop: '--DataGrid-t-color-background-backdrop';
    };
    readonly interactive: {
      readonly hover: '--DataGrid-t-color-interactive-hover';
      readonly hoverOpacity: '--DataGrid-t-color-interactive-hover-opacity';
      readonly focus: '--DataGrid-t-color-interactive-focus';
      readonly focusOpacity: '--DataGrid-t-color-interactive-focus-opacity';
      readonly disabled: '--DataGrid-t-color-interactive-disabled';
      readonly disabledOpacity: '--DataGrid-t-color-interactive-disabled-opacity';
      readonly selected: '--DataGrid-t-color-interactive-selected';
      readonly selectedOpacity: '--DataGrid-t-color-interactive-selected-opacity';
    };
  };
  header: {
    readonly background: {
      readonly base: '--DataGrid-t-header-background-base';
    };
  };
  cell: {
    readonly background: {
      readonly pinned: '--DataGrid-t-cell-background-pinned';
    };
  };
  radius: {
    readonly base: '--DataGrid-t-radius-base';
  };
  typography: {
    readonly font: {
      readonly body: '--DataGrid-t-typography-font-body';
      readonly small: '--DataGrid-t-typography-font-small';
      readonly large: '--DataGrid-t-typography-font-large';
    };
    readonly fontFamily: {
      readonly base: '--DataGrid-t-typography-font-family-base';
    };
    readonly fontWeight: {
      readonly light: '--DataGrid-t-typography-font-weight-light';
      readonly regular: '--DataGrid-t-typography-font-weight-regular';
      readonly medium: '--DataGrid-t-typography-font-weight-medium';
      readonly bold: '--DataGrid-t-typography-font-weight-bold';
    };
  };
  transitions: {
    readonly easing: {
      readonly easeIn: '--DataGrid-t-transition-easing-ease-in';
      readonly easeOut: '--DataGrid-t-transition-easing-ease-out';
      readonly easeInOut: '--DataGrid-t-transition-easing-ease-in-out';
    };
    readonly duration: {
      readonly short: '--DataGrid-t-transition-duration-short';
      readonly base: '--DataGrid-t-transition-duration-base';
      readonly long: '--DataGrid-t-transition-duration-long';
    };
  };
  shadows: {
    readonly base: '--DataGrid-t-shadow-base';
    readonly overlay: '--DataGrid-t-shadow-overlay';
  };
  zIndex: {
    readonly panel: '--DataGrid-t-z-index-panel';
    readonly menu: '--DataGrid-t-z-index-menu';
    readonly modal: '--DataGrid-t-z-index-modal';
  };
  breakpoints: {
    values: {
      xs: number;
      sm: number;
      md: number;
      lg: number;
      xl: number;
    };
    up: (key: any) => string;
  };
  spacing: typeof spacing;
  transition: typeof transition;
  keys: {
    readonly spacingUnit: '--DataGrid-t-spacing-unit';
    readonly colors: {
      readonly border: {
        readonly base: '--DataGrid-t-color-border-base';
      };
      readonly foreground: {
        readonly base: '--DataGrid-t-color-foreground-base';
        readonly muted: '--DataGrid-t-color-foreground-muted';
        readonly accent: '--DataGrid-t-color-foreground-accent';
        readonly disabled: '--DataGrid-t-color-foreground-disabled';
        readonly error: '--DataGrid-t-color-foreground-error';
      };
      readonly background: {
        readonly base: '--DataGrid-t-color-background-base';
        readonly overlay: '--DataGrid-t-color-background-overlay';
        readonly backdrop: '--DataGrid-t-color-background-backdrop';
      };
      readonly interactive: {
        readonly hover: '--DataGrid-t-color-interactive-hover';
        readonly hoverOpacity: '--DataGrid-t-color-interactive-hover-opacity';
        readonly focus: '--DataGrid-t-color-interactive-focus';
        readonly focusOpacity: '--DataGrid-t-color-interactive-focus-opacity';
        readonly disabled: '--DataGrid-t-color-interactive-disabled';
        readonly disabledOpacity: '--DataGrid-t-color-interactive-disabled-opacity';
        readonly selected: '--DataGrid-t-color-interactive-selected';
        readonly selectedOpacity: '--DataGrid-t-color-interactive-selected-opacity';
      };
    };
    readonly header: {
      readonly background: {
        readonly base: '--DataGrid-t-header-background-base';
      };
    };
    readonly cell: {
      readonly background: {
        readonly pinned: '--DataGrid-t-cell-background-pinned';
      };
    };
    readonly radius: {
      readonly base: '--DataGrid-t-radius-base';
    };
    readonly typography: {
      readonly font: {
        readonly body: '--DataGrid-t-typography-font-body';
        readonly small: '--DataGrid-t-typography-font-small';
        readonly large: '--DataGrid-t-typography-font-large';
      };
      readonly fontFamily: {
        readonly base: '--DataGrid-t-typography-font-family-base';
      };
      readonly fontWeight: {
        readonly light: '--DataGrid-t-typography-font-weight-light';
        readonly regular: '--DataGrid-t-typography-font-weight-regular';
        readonly medium: '--DataGrid-t-typography-font-weight-medium';
        readonly bold: '--DataGrid-t-typography-font-weight-bold';
      };
    };
    readonly transitions: {
      readonly easing: {
        readonly easeIn: '--DataGrid-t-transition-easing-ease-in';
        readonly easeOut: '--DataGrid-t-transition-easing-ease-out';
        readonly easeInOut: '--DataGrid-t-transition-easing-ease-in-out';
      };
      readonly duration: {
        readonly short: '--DataGrid-t-transition-duration-short';
        readonly base: '--DataGrid-t-transition-duration-base';
        readonly long: '--DataGrid-t-transition-duration-long';
      };
    };
    readonly shadows: {
      readonly base: '--DataGrid-t-shadow-base';
      readonly overlay: '--DataGrid-t-shadow-overlay';
    };
    readonly zIndex: {
      readonly panel: '--DataGrid-t-z-index-panel';
      readonly menu: '--DataGrid-t-z-index-menu';
      readonly modal: '--DataGrid-t-z-index-modal';
    };
  };
};
declare function spacing(a?: number, b?: number, c?: number, d?: number): string;
declare function transition(props: string[], options?: {
  duration?: string;
  easing?: string;
  delay?: number;
}): string;
export {};