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 full)

Properties

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

Methods

asFill asStroke getPluginData setPluginData getPluginDataKeys getSharedPluginData setSharedPluginData getSharedPluginDataKeys

Properties

Optionalcolor

color?: string

The color value of the library color.

Optionalopacity

opacity?: number

The opacity value of the library color.

Optionalgradient

gradient?: Gradient

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

Optionalimage

image?: ImageData

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

Readonlyid

id: string

The unique identifier of the library element.

ReadonlylibraryId

libraryId: string

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

name

name: string

The name of the library element.

path

path: string

The path of the library element.

Methods

asFill

  • asFill(): Fill

  • Converts the library color into a fill object.

    Returns Fill

    Returns a Fill object representing the color as a fill.

    Example

    const fill = libraryColor.asFill();

asStroke

  • asStroke(): Stroke

  • Converts the library color into a stroke object.

    Returns Stroke

    Returns a Stroke object representing the color as a stroke.

    Example

    const stroke = libraryColor.asStroke();

getPluginData

  • getPluginData(key): string

  • 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.

    Example

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

setPluginData

  • setPluginData(key, value): void

  • 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

    Example

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

getPluginDataKeys

  • getPluginDataKeys(): string[]

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

    Returns string[]

    Returns an array of strings representing all the keys.

    Example

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

getSharedPluginData

  • getSharedPluginData(namespace, key): string

  • 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.

    Example

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

setSharedPluginData

  • setSharedPluginData(namespace, key, value): void

  • 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

    Example

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

getSharedPluginDataKeys

  • getSharedPluginDataKeys(namespace): string[]

  • 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.

    Example

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

Settings

Member Visibility

On This Page

Properties
Methods