carbon-components-svelte/src/Theme/Theme.svelte.d.ts

Svelte implementation of the Carbon Design System

import { SvelteComponentTyped } from "svelte";

export declare const themes: Record<CarbonTheme, string>;

export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";

export type ThemeProps<Tokens = Record<string, any>> = {
  /**
   * Set the current Carbon theme.
   * @default "white"
   */
  theme?: CarbonTheme;

  /**
   * Customize a theme with your own tokens.
   * @see https://carbondesignsystem.com/elements/themes/overview/#customizing-a-theme
   * @default {}
   */
  tokens?: Tokens;

  /**
   * Set to `true` to persist the theme using window.localStorage
   * @default false
   */
  persist?: boolean;

  /**
   * Specify the local storage key
   * @default "theme"
   */
  persistKey?: string;

  /**
   * Render a toggle, select, or dropdown to control the theme.
   * @default undefined
   */
  render?: "toggle" | "select" | "dropdown";

  /**
   * Override the default toggle props.
   * @default { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, }
   */
  toggle?: import("../Toggle/Toggle.svelte").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme] };

  /**
   * Override the default select props.
   * @default { themes: themeKeys, labelText: "Themes", hideLabel: false, }
   */
  select?: import("../Select/Select.svelte").SelectProps<CarbonTheme> & { themes?: CarbonTheme[] };

  /**
   * Override the default dropdown props.
   * @default { themes: themeKeys, labelText: "Themes", hideLabel: false, }
   */
  dropdown?: Omit<import("../Dropdown/Dropdown.svelte").DropdownProps, "items" | "selectedId"> & { themes?: CarbonTheme[] };

  children?: (this: void, ...args: [{ theme: CarbonTheme }]) => void;
};

export default class Theme<Tokens = Record<string, any>> extends SvelteComponentTyped<
  ThemeProps<Tokens>,
  {
    update: CustomEvent<{
        theme: CarbonTheme;
      }>;
  },
  { default: { theme: CarbonTheme } }
> {}