@crossed/ui
Version:
A universal & performant styling library for React Native, Next.js & React
231 lines • 6.15 kB
TypeScript
/**
* Copyright (c) Paymium.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root of this projects source tree.
*/
export declare const buttonSizeStyles: {
default: import("@crossed/styled").CrossedMethods<{
':disabled': {
opacity: number;
};
web: {
base: {
boxSizing: "border-box";
};
':focus-visible': {
outlineWidth: "2px";
outlineOffset: "2px";
outlineStyle: "solid";
};
};
base: {
display: "flex";
borderRadius: number;
borderWidth: number;
borderStyle: "solid";
borderColor: string;
flexDirection: "row";
alignItems: "center";
justifyContent: "center";
backgroundColor: string;
gap: number;
};
}>;
sm: import("@crossed/styled").CrossedMethods<{
base: {
height: number;
paddingHorizontal: 8;
};
}>;
md: import("@crossed/styled").CrossedMethods<{
base: {
height: number;
paddingHorizontal: 16;
};
}>;
lg: import("@crossed/styled").CrossedMethods<{
base: {
height: number;
paddingHorizontal: 24;
};
}>;
};
export declare const buttonPrimaryStyles: {
root: import("@crossed/styled").CrossedMethods<{
base: {
backgroundColor: "#4737FF";
borderColor: "#4737FF";
};
':hover': {
backgroundColor: "#2606C0";
borderColor: "#2606C0";
};
':active': {
backgroundColor: "#1E078F";
borderColor: "#1E078F";
};
web: {
':focus-visible': {
outlineColor: "#9088F7";
};
};
}>;
text: import("@crossed/styled").CrossedMethods<{
base: {
color: "white";
};
}>;
textHover: import("@crossed/styled").CrossedMethods<{
base: {
color: "white";
};
}>;
textActive: import("@crossed/styled").CrossedMethods<{
base: {
color: "white";
};
}>;
};
export declare const buttonSecondaryStyles: {
root: import("@crossed/styled").CrossedMethods<{
base: {
borderColor: "#E8E6FF";
backgroundColor: "#E8E6FF";
};
':hover': {
borderColor: "#D1CDFF";
backgroundColor: "#D1CDFF";
};
':active': {
borderColor: "#BCB6FF";
backgroundColor: "#E8E6FF";
};
web: {
':focus-visible': {
outlineColor: "#9088F7" | "#4737FF";
};
};
}>;
text: import("@crossed/styled").CrossedMethods<{
base: {
color: "#9088F7" | "#4737FF";
};
}>;
textHover: import("@crossed/styled").CrossedMethods<{
base: {
color: "#9088F7" | "#4737FF";
};
}>;
textActive: import("@crossed/styled").CrossedMethods<{
base: {
color: "#9088F7" | "#4737FF";
};
}>;
};
export declare const buttonTertiaryStyles: {
root: import("@crossed/styled").CrossedMethods<{
base: {
borderColor: "transparent";
backgroundColor: "transparent";
};
':hover': {
borderColor: "transparent";
backgroundColor: "#E8E6FF";
};
':active': {
borderColor: "transparent";
backgroundColor: "transparent";
};
web: {
':focus-visible': {
outlineColor: "#9088F7";
backgroundColor: "#DAD9EC" | "#2D2D61";
};
};
}>;
text: import("@crossed/styled").CrossedMethods<{
base: {
color: "#9088F7" | "#4737FF";
};
}>;
textHover: import("@crossed/styled").CrossedMethods<{
base: {
color: "#A6A1E9" | "#2606C0";
};
}>;
textActive: import("@crossed/styled").CrossedMethods<{
base: {
color: "#CDCBEC" | "#1E078F";
};
}>;
};
export declare const buttonSuccessStyles: {
root: import("@crossed/styled").CrossedMethods<{
base: {
borderColor: "#3ABB7D";
backgroundColor: "#3ABB7D";
};
':hover': {
borderColor: "#188551";
backgroundColor: "#188551";
};
':active': {
borderColor: "#188551";
backgroundColor: "#188551";
};
web: {
':focus-visible': {
outlineColor: "#3ABB7D";
};
};
}>;
text: import("@crossed/styled").CrossedMethods<{
base: {
color: "white";
};
}>;
textHover: import("@crossed/styled").CrossedMethods<{}>;
textActive: import("@crossed/styled").CrossedMethods<{}>;
};
export declare const buttonErrorStyles: {
root: import("@crossed/styled").CrossedMethods<{
base: {
backgroundColor: "#EF4444";
borderColor: "#EF4444";
};
':hover': {
backgroundColor: "#D73636";
borderColor: "#D73636";
};
':active': {
backgroundColor: "#A21A1A";
borderColor: "#A21A1A";
};
web: {
':focus-visible': {
outlineColor: "#EF4444";
};
};
}>;
text: import("@crossed/styled").CrossedMethods<{
base: {
color: "white";
};
}>;
textHover: import("@crossed/styled").CrossedMethods<{}>;
textActive: import("@crossed/styled").CrossedMethods<{}>;
};
export declare const textStyles: {
default: import("@crossed/styled").CrossedMethods<{
base: {
fontWeight: "bold";
};
}>;
disabled: import("@crossed/styled").CrossedMethods<{
base: {
pointerEvents: "none";
};
}>;
};
//# sourceMappingURL=styles.d.ts.map