@atlrdsgn/kit/dist/types/kit/button/button.map.d.ts

An ever–expanding library of React components, primitives, and tools

import { ButtonSizes, ButtonColor } from './button.utils';

export declare const buttonProperties: {
    readonly core: {
        readonly textRendering: "optimizeLegibility";
        readonly fontVariantNumeric: "tabular-nums";
        readonly boxSizing: "border-box";
        readonly display: "flex";
        readonly flexDirection: "column";
        readonly justifyContent: "center";
        readonly alignItems: "center";
        readonly position: "relative";
        readonly gap: "4px";
        readonly transition: "all 0.2s ease-in-out";
        readonly willChange: "color, backgroundColor";
        readonly cursor: "pointer";
        readonly borderStyle: "solid";
        readonly userSelect: "none";
        readonly fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        readonly textAlign: "center";
        readonly whiteSpace: "nowrap";
        readonly overflow: "hidden";
        readonly textOverflow: "ellipsis";
        readonly WebkitUserSelect: "none";
        readonly WebkitTapHighlightColor: "rgba(0,0,0,0)";
        readonly MozUserSelect: "none";
        readonly MozTapHighlightColor: "rgba(0,0,0,0)";
    };
    readonly size: {
        readonly config: {
            readonly fontSize: {
                readonly XS: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                readonly SM: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                readonly MD: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                readonly LG: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            };
            readonly lineHeight: {
                readonly XS: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                readonly SM: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                readonly MD: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                readonly LG: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            };
            readonly padding: {
                readonly XS: "4px 11px";
                readonly SM: "6px 12px";
                readonly MD: "6px 14px";
                readonly LG: "8px 18px";
            };
            readonly borderWidth: {
                readonly XS: "1px";
                readonly SM: "1px";
                readonly MD: "1px";
                readonly LG: "2px";
            };
            readonly borderRadius: {
                readonly XS: "7px";
                readonly SM: "10px";
                readonly MD: "12px";
                readonly LG: "14px";
            };
        };
    };
    readonly color: {
        readonly config: {
            readonly background: {
                readonly CARBON: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                readonly JADE: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                readonly ORANGE: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                readonly SAPPHIRE: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                readonly GHOST: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            };
            readonly color: {
                readonly CARBON: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                readonly JADE: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                readonly ORANGE: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                readonly SAPPHIRE: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                readonly GHOST: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            };
            readonly borderColor: {
                readonly CARBON: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                readonly JADE: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                readonly ORANGE: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                readonly SAPPHIRE: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                readonly GHOST: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            };
            readonly boxShadow: {
                readonly CARBON: "0px 1px 2px -1px rgba(173, 181, 189, 0.25)";
                readonly JADE: "0px 1px 0px 0px rgba(27, 31, 35, 0.10)";
                readonly ORANGE: "0px 1px 0px 0px rgba(27, 31, 35, 0.10)";
                readonly SAPPHIRE: "0px 1px 0px 0px rgba(27, 31, 35, 0.10)";
                readonly GHOST: "0px 1px 0px 0px rgba(27, 31, 35, 0.10)";
            };
            readonly onHover: {
                readonly background: {
                    readonly CARBON: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    readonly JADE: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    readonly ORANGE: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    readonly SAPPHIRE: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    readonly GHOST: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                };
                readonly borderColor: {
                    readonly CARBON: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    readonly JADE: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    readonly ORANGE: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    readonly SAPPHIRE: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    readonly GHOST: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                };
                readonly boxShadow: {
                    readonly CARBON: "0px 1px 2px 0px rgba(173, 181, 189, 0.40)";
                    readonly JADE: "0px 1px 2px 0px rgba(173, 181, 189, 0.40)";
                    readonly ORANGE: "0px 1px 2px 0px rgba(173, 181, 189, 0.40)";
                    readonly SAPPHIRE: "0px 1px 2px 0px rgba(173, 181, 189, 0.40)";
                    readonly GHOST: "0px 1px 2px 0px rgba(173, 181, 189, 0.40)";
                };
            };
            readonly onFocus: {
                readonly boxShadow: {
                    readonly CARBON: "0px 0px 0px 3.5px rgba(173, 181, 189, 0.35), 0px 1px 2px 0px #ADB5BD";
                    readonly JADE: "0px 0px 0px 3.5px rgba(64, 192, 87, 0.40), 0px 1px 1px 0px rgba(166, 166, 166, 0.30)";
                    readonly ORANGE: "0px 0px 0px 3.5px rgba(253, 126, 20, 0.40), 0px 1px 1px 0px rgba(163, 163, 163, 0.30)";
                    readonly SAPPHIRE: "0px 0px 0px 3.5px rgba(103, 90, 162, 0.40), 0px 1px 1px 0px rgba(140, 140, 140, 0.30)";
                    readonly GHOST: "0px 0px 0px 3.5px rgba(173, 181, 189, 0.35), 0px 1px 2px 0px #ADB5BD";
                };
            };
        };
    };
};
export type CSSButtonProperties = keyof typeof buttonProperties;
export type CSSButtonSizes = keyof typeof ButtonSizes;
export type CSSVariantColors = keyof typeof ButtonColor;
export type CSSButtonSizeProperties = keyof typeof buttonProperties.size.config;
export type CSSButtonColorProperties = keyof typeof buttonProperties.color.config;
//# sourceMappingURL=button.map.d.ts.map