api-report.md

API Report File for "@backstage/theme"

Do not edit this file. It is a report generated by API Extractor.

import type { ComponentsProps } from '@material-ui/core/styles/props';
import { Overrides } from '@material-ui/core/styles/overrides';
import type { Palette } from '@material-ui/core/styles/createPalette';
import type { PaletteOptions } from '@material-ui/core/styles/createPalette';
import { PaletteOptions as PaletteOptions_2 } from '@mui/material/styles';
import { ReactNode } from 'react';
import { Theme } from '@mui/material/styles';
import { Theme as Theme_2 } from '@material-ui/core';
import { ThemeOptions } from '@mui/material/styles';
import { ThemeOptions as ThemeOptions_2 } from '@material-ui/core/styles';
import type { ThemeOptions as ThemeOptions_3 } from '@material-ui/core';

// @public @deprecated
export type BackstagePalette = Palette & BackstagePaletteAdditions;

// @public
export type BackstagePaletteAdditions = {
  status: {
    ok: string;
    warning: string;
    error: string;
    pending: string;
    running: string;
    aborted: string;
  };
  border: string;
  textContrast: string;
  textVerySubtle: string;
  textSubtle: string;
  highlight: string;
  errorBackground: string;
  warningBackground: string;
  infoBackground: string;
  errorText: string;
  infoText: string;
  warningText: string;
  linkHover: string;
  link: string;
  gold: string;
  navigation: {
    background: string;
    indicator: string;
    color: string;
    selectedColor: string;
    navItem?: {
      hoverBackground: string;
    };
    submenu?: {
      background: string;
    };
  };
  tabbar: {
    indicator: string;
  };
  bursts: {
    fontColor: string;
    slackChannelText: string;
    backgroundColor: {
      default: string;
    };
    gradient: {
      linear: string;
    };
  };
  pinSidebarButton: {
    icon: string;
    background: string;
  };
  banner: {
    info: string;
    error: string;
    text: string;
    link: string;
    closeButtonColor?: string;
    warning?: string;
  };
};

// @public @deprecated
export type BackstagePaletteOptions = PaletteOptions &
  BackstagePaletteAdditions;

// @public @deprecated
export interface BackstageTheme extends Theme_2 {
  // (undocumented)
  getPageTheme: (selector: PageThemeSelector) => PageTheme;
  // (undocumented)
  page: PageTheme;
  // (undocumented)
  palette: BackstagePalette;
}

// @public
export type BackstageThemeAdditions = {
  page: PageTheme;
  getPageTheme: (selector: PageThemeSelector) => PageTheme;
};

// @public @deprecated
export interface BackstageThemeOptions extends ThemeOptions_3 {
  // (undocumented)
  getPageTheme: (selector: PageThemeSelector) => PageTheme;
  // (undocumented)
  page: PageTheme;
  // (undocumented)
  palette: BackstagePaletteOptions;
}

// @public
export interface BaseThemeOptionsInput<PaletteOptions> {
  // (undocumented)
  defaultPageTheme?: string;
  // (undocumented)
  fontFamily?: string;
  // (undocumented)
  htmlFontSize?: number;
  // (undocumented)
  pageTheme?: Record<string, PageTheme>;
  // (undocumented)
  palette: PaletteOptions;
}

// @public
export const colorVariants: Record<string, string[]>;

// @public
export function createBaseThemeOptions<PaletteOptions>(
  options: BaseThemeOptionsInput<PaletteOptions>,
): {
  palette: PaletteOptions;
  typography: {
    htmlFontSize: number;
    fontFamily: string;
    h1: {
      fontSize: number;
      fontWeight: number;
      marginBottom: number;
    };
    h2: {
      fontSize: number;
      fontWeight: number;
      marginBottom: number;
    };
    h3: {
      fontSize: number;
      fontWeight: number;
      marginBottom: number;
    };
    h4: {
      fontWeight: number;
      fontSize: number;
      marginBottom: number;
    };
    h5: {
      fontWeight: number;
      fontSize: number;
      marginBottom: number;
    };
    h6: {
      fontWeight: number;
      fontSize: number;
      marginBottom: number;
    };
  };
  page: PageTheme;
  getPageTheme: ({ themeId }: PageThemeSelector) => PageTheme;
};

// @public @deprecated
export function createTheme(options: SimpleThemeOptions): Theme_2;

// @public @deprecated
export function createThemeOptions(options: SimpleThemeOptions): ThemeOptions_3;

// @public @deprecated
export function createThemeOverrides(theme: Theme_2): Overrides;

// @public
export function createUnifiedTheme(options: UnifiedThemeOptions): UnifiedTheme;

// @public
export function createUnifiedThemeFromV4(options: ThemeOptions_2): UnifiedTheme;

// @public @deprecated
export const darkTheme: Theme_2;

// @public
export const defaultComponentThemes: ThemeOptions['components'];

// @public
export function genPageTheme(props: {
  colors: string[];
  shape: string;
  options?: {
    fontColor?: string;
  };
}): PageTheme;

// @public @deprecated
export const lightTheme: Theme_2;

// @public
export type PageTheme = {
  colors: string[];
  shape: string;
  backgroundImage: string;
  fontColor: string;
};

// @public
export const pageTheme: Record<string, PageTheme>;

// @public
export type PageThemeSelector = {
  themeId: string;
};

// @public
export const palettes: {
  light: {
    type: 'light';
    mode: 'light';
    background: {
      default: string;
      paper: string;
    };
    status: {
      ok: string;
      warning: string;
      error: string;
      running: string;
      pending: string;
      aborted: string;
    };
    bursts: {
      fontColor: string;
      slackChannelText: string;
      backgroundColor: {
        default: string;
      };
      gradient: {
        linear: string;
      };
    };
    primary: {
      main: string;
    };
    banner: {
      info: string;
      error: string;
      text: string;
      link: string;
      closeButtonColor: string;
      warning: string;
    };
    border: string;
    textContrast: string;
    textVerySubtle: string;
    textSubtle: string;
    highlight: string;
    errorBackground: string;
    warningBackground: string;
    infoBackground: string;
    errorText: string;
    infoText: string;
    warningText: string;
    linkHover: string;
    link: string;
    gold: string;
    navigation: {
      background: string;
      indicator: string;
      color: string;
      selectedColor: string;
      navItem: {
        hoverBackground: string;
      };
      submenu: {
        background: string;
      };
    };
    pinSidebarButton: {
      icon: string;
      background: string;
    };
    tabbar: {
      indicator: string;
    };
  };
  dark: {
    type: 'dark';
    mode: 'dark';
    background: {
      default: string;
      paper: string;
    };
    status: {
      ok: string;
      warning: string;
      error: string;
      running: string;
      pending: string;
      aborted: string;
    };
    bursts: {
      fontColor: string;
      slackChannelText: string;
      backgroundColor: {
        default: string;
      };
      gradient: {
        linear: string;
      };
    };
    primary: {
      main: string;
      dark: string;
    };
    secondary: {
      main: string;
    };
    banner: {
      info: string;
      error: string;
      text: string;
      link: string;
      closeButtonColor: string;
      warning: string;
    };
    border: string;
    textContrast: string;
    textVerySubtle: string;
    textSubtle: string;
    highlight: string;
    errorBackground: string;
    warningBackground: string;
    infoBackground: string;
    errorText: string;
    infoText: string;
    warningText: string;
    linkHover: string;
    link: string;
    gold: string;
    navigation: {
      background: string;
      indicator: string;
      color: string;
      selectedColor: string;
      navItem: {
        hoverBackground: string;
      };
      submenu: {
        background: string;
      };
    };
    pinSidebarButton: {
      icon: string;
      background: string;
    };
    tabbar: {
      indicator: string;
    };
  };
};

// @public
export const shapes: Record<string, string>;

// @public @deprecated
export type SimpleThemeOptions = {
  palette: PaletteOptions;
  defaultPageTheme?: string;
  pageTheme?: Record<string, PageTheme>;
  fontFamily?: string;
  htmlFontSize?: number;
};

// @public
export const themes: {
  light: UnifiedTheme;
  dark: UnifiedTheme;
};

// @public
export function transformV5ComponentThemesToV4(
  theme: Theme,
  components?: ThemeOptions['components'],
): {
  overrides: Overrides;
  props: ComponentsProps;
};

// @public
export interface UnifiedTheme {
  // (undocumented)
  getTheme(version: string): unknown | undefined;
}

// @public
export interface UnifiedThemeOptions {
  // (undocumented)
  components?: ThemeOptions['components'];
  // (undocumented)
  defaultPageTheme?: string;
  // (undocumented)
  fontFamily?: string;
  // (undocumented)
  htmlFontSize?: number;
  // (undocumented)
  pageTheme?: Record<string, PageTheme>;
  // (undocumented)
  palette: PaletteOptions & PaletteOptions_2;
}

// @public
export function UnifiedThemeProvider(
  props: UnifiedThemeProviderProps,
): JSX.Element;

// @public
export interface UnifiedThemeProviderProps {
  // (undocumented)
  children: ReactNode;
  // (undocumented)
  noCssBaseline?: boolean;
  // (undocumented)
  theme: UnifiedTheme;
}