Penpot plugins API
    Preparing search index...

    Interface LibraryColor

    Represents a color element from a library in Penpot. This interface extends LibraryElement and includes properties specific to color elements.

    interface LibraryColor {
        color?: string;
        opacity?: number;
        gradient?: Gradient;
        image?: ImageData;
        asFill(): Fill;
        asStroke(): Stroke;
        id: string;
        libraryId: string;
        name: string;
        path: string;
        getPluginData(key: string): string;
        setPluginData(key: string, value: string): void;
        getPluginDataKeys(): string[];
        getSharedPluginData(namespace: string, key: string): string;
        setSharedPluginData(namespace: string, key: string, value: string): void;
        getSharedPluginDataKeys(namespace: string): string[];
    }

    Hierarchy (View Summary)

    Index

    Properties

    color? opacity? gradient? image? id libraryId name path

    Methods

    asFill asStroke getPluginData setPluginData getPluginDataKeys getSharedPluginData setSharedPluginData getSharedPluginDataKeys

    Properties

    color?: string

    The color value of the library color.

    opacity?: number

    The opacity value of the library color.

    gradient?: Gradient

    The gradient value of the library color, if it's a gradient.

    image?: ImageData

    The image data of the library color, if it's an image fill.

    id: string

    The unique identifier of the library element.

    libraryId: string

    The unique identifier of the library to which the element belongs.

    name: string

    The name of the library element.

    path: string

    The path of the library element.

    Methods

    • Converts the library color into a fill object.

      Returns Fill

      Returns a Fill object representing the color as a fill.

      const fill = libraryColor.asFill();

    • Converts the library color into a stroke object.

      Returns Stroke

      Returns a Stroke object representing the color as a stroke.

      const stroke = libraryColor.asStroke();

    • Retrieves the data for our own plugin, given a specific key.

      Parameters

      • key: string

        The key for which to retrieve the data.

      Returns string

      Returns the data associated with the key as a string.

      const data = shape.getPluginData('exampleKey');
      console.log(data);

    • Sets the plugin-specific data for the given key.

      Parameters

      • key: string

        The key for which to set the data.

      • value: string

        The data to set for the key.

      Returns void

      shape.setPluginData('exampleKey', 'exampleValue');

    • Retrieves all the keys for the plugin-specific data.

      Returns string[]

      Returns an array of strings representing all the keys.

      const keys = shape.getPluginDataKeys();
      console.log(keys);

    • If we know the namespace of an external plugin, this is the way to get their data.

      Parameters

      • namespace: string

        The namespace for the shared data.

      • key: string

        The key for which to retrieve the data.

      Returns string

      Returns the shared data associated with the key as a string.

      const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');
      console.log(sharedData);

    • Sets the shared plugin-specific data for the given namespace and key.

      Parameters

      • namespace: string

        The namespace for the shared data.

      • key: string

        The key for which to set the data.

      • value: string

        The data to set for the key.

      Returns void

      shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');

    • Retrieves all the keys for the shared plugin-specific data in the given namespace.

      Parameters

      • namespace: string

        The namespace for the shared data.

      Returns string[]

      Returns an array of strings representing all the keys in the namespace.

      const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');
      console.log(sharedKeys);

    Settings

    Member Visibility

    On This Page

    Properties
    Methods