react-color-pikr/dist/components/ColorPicker.styles.d.ts

A modern, customizable React color picker component library with 8-digit HEX alpha support

import React from 'react';
export declare const colorPickerStyles: {
    colorPicker: {
        fontFamily: string;
        background: string;
        borderRadius: string;
        boxShadow: string;
        padding: string;
        userSelect: "none";
    };
    colorPickerDisabled: {
        opacity: number;
        pointerEvents: "none";
    };
    colorPreview: {
        marginBottom: string;
    };
    colorPreviewCurrent: {
        width: string;
        height: string;
        borderRadius: string;
        border: string;
        background: string;
        transition: string;
        boxShadow: string;
        cursor: string;
    };
    saturationArea: {
        position: "relative";
        marginBottom: string;
        borderRadius: string;
        cursor: string;
        overflow: string;
    };
    saturationOverlay: {
        position: "absolute";
        top: number;
        left: number;
        right: number;
        bottom: number;
    };
    saturationPointer: {
        position: "absolute";
        width: string;
        height: string;
        border: string;
        borderRadius: string;
        boxShadow: string;
        transform: string;
        pointerEvents: "none";
        cursor: string;
        transition: string;
    };
    hueSlider: {
        position: "relative";
        height: string;
        marginBottom: string;
        borderRadius: string;
        background: string;
        cursor: string;
    };
    huePointer: {
        position: "absolute";
        top: string;
        width: string;
        height: string;
        border: string;
        borderRadius: string;
        boxShadow: string;
        transform: string;
        pointerEvents: "none";
        cursor: string;
        transition: string;
    };
    alphaSlider: {
        position: "relative";
        height: string;
        marginBottom: string;
        borderRadius: string;
        cursor: string;
    };
    alphaBackground: {
        position: "absolute";
        top: number;
        left: number;
        right: number;
        bottom: number;
        background: string;
        borderRadius: string;
    };
    alphaOverlay: {
        position: "absolute";
        top: number;
        left: number;
        right: number;
        bottom: number;
        borderRadius: string;
    };
    alphaPointer: {
        position: "absolute";
        top: string;
        width: string;
        height: string;
        border: string;
        borderRadius: string;
        boxShadow: string;
        transform: string;
        pointerEvents: "none";
        cursor: string;
        transition: string;
    };
    formatToggle: {
        display: string;
        gap: string;
        marginBottom: string;
    };
    formatButton: {
        padding: string;
        border: string;
        borderRadius: string;
        background: string;
        color: string;
        fontSize: string;
        fontWeight: string;
        cursor: string;
        transition: string;
        fontFamily: string;
    };
    formatButtonActive: {
        background: string;
        color: string;
        borderColor: string;
    };
    formatButtonDisabled: {
        opacity: number;
        cursor: string;
    };
    colorInput: {
        width: string;
        padding: string;
        border: string;
        borderRadius: string;
        fontSize: string;
        fontFamily: string;
        background: string;
        color: string;
        marginBottom: string;
        transition: string;
        boxSizing: "border-box";
    };
    colorInputFocused: {
        borderColor: string;
        outline: string;
    };
    presets: {
        display: string;
        flexWrap: "wrap";
        gap: string;
        marginTop: string;
    };
    presetSwatch: {
        width: string;
        height: string;
        borderRadius: string;
        border: string;
        cursor: string;
        boxShadow: string;
        transition: string;
    };
    presetSwatchSelected: {
        transform: string;
        boxShadow: string;
    };
    checkerboard: {
        backgroundImage: string;
        backgroundSize: string;
        backgroundPosition: string;
    };
};
export declare const combineStyles: (...styles: Array<React.CSSProperties | undefined>) => React.CSSProperties;