- styled<
Type extends Function
| (keyof IntrinsicElements)
| ComponentType<any>,
Composers extends
(string | Function | ComponentType<any> | { [name: string]: unknown })[],
CSS = CSS<
{},
{
colors: {
activeBg: "#e7e7e7";
background: "white";
blue1: "#038bf4";
blue2: "#b7d6f5";
blue3: "#dbe6ff";
blue4: "#33b4ff";
blue5: "#30a2e6";
border: "#d5d5d5";
buttonBorder: "#bababa";
choiceActiveBg: "#f3f3f3";
choiceActiveText: "#313131";
choiceBg: "#ffffff";
choiceBorder: "#cfcfcf";
choiceText: "#999999";
focusColor: "#dcaf00";
green1: "#3ec234";
green1Darker: "#38af2f";
grey1: "#737373";
headerBg: "#efeff0";
headerBorder: "#c8c8c9";
headerText: "#484848";
icon: "#636363";
inactiveBg: "#d3d3de";
inactiveDarkBg: "#999";
inputDisabledBg: "#f3f3f3";
inputDisabledText: "#959595";
mainColor: "#008ad2";
mainColorAlt: "#006AA9";
modalBg: "#f7f7f7";
modalButtonBg: "#f8f8f8";
modalButtonBorder: "#c2c2c2";
orange1: "#ff7200";
orange1Darker: "#cc5b00";
pink1: "#ff388f";
pinky1: "#f5c0b7";
pinky2: "#e07b67";
pinky3: "#ffe1db";
popText: "#666";
purple1: "#7357e8";
red1: "#ea2700";
scrollbarsBg: "transparent";
scrollbarsThumb: "#737373";
selectorActive: "#008ad2";
selectorText: "#606060";
sub: "#959595";
tableStripedBg: "#fafafa";
text: "#323232";
text2: "#181818";
text3: "#000000";
toggleBgDisabled: "#f0f0f0";
toggleHandleBg: "#e0e0e0";
toggleHandleBgDisabled: "#deae84";
toggleHandleBorder: "#cdcdcd";
toggleHandleBorderDisabled: "#c29f7d";
toolbarBg: "#f8f8f8";
toolbarBorder: "#ababab";
toolButtonText: "#666e80";
yellow1: "#ffde9d";
yellow2: "#e4a429";
yellow3: "#fff5db";
};
},
DefaultThemeMap,
{
mx: (
value: string | number,
) => { marginLeft: string | number; marginRight: string | number };
my: (
value: string | number,
) => { marginBottom: string | number; marginTop: string | number };
px: (
value: string | number,
) => { paddingLeft: string | number; paddingRight: string | number };
py: (
value: string | number,
) => { paddingBottom: string | number; paddingTop: string | number };
size: (
value: string | number,
) => { height: string | number; width: string | number };
},
>,
>(
type: Type,
...composers: {
[K in string | number | symbol]: string extends Composers[K<K>]
? Composers[K<K>]
: Composers[K<K>] extends string | Function | ComponentType<any>
? any[any]
: RemoveIndex<CSS> & {
compoundVariants?: (
(
"variants" extends keyof (...)[(...)]
? { [Name in (...) | (...) | (...)]?: (...) | (...) | (...) }
: WideObject
) & { css: CSS }
)[];
defaultVariants?: "variants" extends keyof Composers[K<K>]
? {
[Name in string | number | symbol]?: String | Widen<keyof (...)>
}
: WideObject;
variants?: {
[key: string]: { [key: string]: CSS; [key: number]: CSS };
};
} & CSS & {
[K2 in string
| number
| symbol]: K2 extends | "compoundVariants"
| "defaultVariants"
| "variants"
? unknown
: K2 extends keyof CSS ? CSS[K2<K2>] : unknown
}
},
): StyledComponent<
Type,
StyledComponentProps<Composers>,
CSS<
{},
{
colors: {
activeBg: "#e7e7e7";
background: "white";
blue1: "#038bf4";
blue2: "#b7d6f5";
blue3: "#dbe6ff";
blue4: "#33b4ff";
blue5: "#30a2e6";
border: "#d5d5d5";
buttonBorder: "#bababa";
choiceActiveBg: "#f3f3f3";
choiceActiveText: "#313131";
choiceBg: "#ffffff";
choiceBorder: "#cfcfcf";
choiceText: "#999999";
focusColor: "#dcaf00";
green1: "#3ec234";
green1Darker: "#38af2f";
grey1: "#737373";
headerBg: "#efeff0";
headerBorder: "#c8c8c9";
headerText: "#484848";
icon: "#636363";
inactiveBg: "#d3d3de";
inactiveDarkBg: "#999";
inputDisabledBg: "#f3f3f3";
inputDisabledText: "#959595";
mainColor: "#008ad2";
mainColorAlt: "#006AA9";
modalBg: "#f7f7f7";
modalButtonBg: "#f8f8f8";
modalButtonBorder: "#c2c2c2";
orange1: "#ff7200";
orange1Darker: "#cc5b00";
pink1: "#ff388f";
pinky1: "#f5c0b7";
pinky2: "#e07b67";
pinky3: "#ffe1db";
popText: "#666";
purple1: "#7357e8";
red1: "#ea2700";
scrollbarsBg: "transparent";
scrollbarsThumb: "#737373";
selectorActive: "#008ad2";
selectorText: "#606060";
sub: "#959595";
tableStripedBg: "#fafafa";
text: "#323232";
text2: "#181818";
text3: "#000000";
toggleBgDisabled: "#f0f0f0";
toggleHandleBg: "#e0e0e0";
toggleHandleBgDisabled: "#deae84";
toggleHandleBorder: "#cdcdcd";
toggleHandleBorderDisabled: "#c29f7d";
toolbarBg: "#f8f8f8";
toolbarBorder: "#ababab";
toolButtonText: "#666e80";
yellow1: "#ffde9d";
yellow2: "#e4a429";
yellow3: "#fff5db";
};
},
DefaultThemeMap,
{
mx: (
value: string | number,
) => { marginLeft: string | number; marginRight: string | number };
my: (
value: string | number,
) => { marginBottom: string | number; marginTop: string | number };
px: (
value: string | number,
) => { paddingLeft: string | number; paddingRight: string | number };
py: (
value: string | number,
) => { paddingBottom: string | number; paddingTop: string | number };
size: (
value: string | number,
) => { height: string | number; width: string | number };
},
>,
> Type Parameters
- Type extends Function | (keyof IntrinsicElements) | ComponentType<any>
- Composers extends (string | Function | ComponentType<any> | { [name: string]: unknown })[]
- CSS = CSS<
{},
{
colors: {
activeBg: "#e7e7e7";
background: "white";
blue1: "#038bf4";
blue2: "#b7d6f5";
blue3: "#dbe6ff";
blue4: "#33b4ff";
blue5: "#30a2e6";
border: "#d5d5d5";
buttonBorder: "#bababa";
choiceActiveBg: "#f3f3f3";
choiceActiveText: "#313131";
choiceBg: "#ffffff";
choiceBorder: "#cfcfcf";
choiceText: "#999999";
focusColor: "#dcaf00";
green1: "#3ec234";
green1Darker: "#38af2f";
grey1: "#737373";
headerBg: "#efeff0";
headerBorder: "#c8c8c9";
headerText: "#484848";
icon: "#636363";
inactiveBg: "#d3d3de";
inactiveDarkBg: "#999";
inputDisabledBg: "#f3f3f3";
inputDisabledText: "#959595";
mainColor: "#008ad2";
mainColorAlt: "#006AA9";
modalBg: "#f7f7f7";
modalButtonBg: "#f8f8f8";
modalButtonBorder: "#c2c2c2";
orange1: "#ff7200";
orange1Darker: "#cc5b00";
pink1: "#ff388f";
pinky1: "#f5c0b7";
pinky2: "#e07b67";
pinky3: "#ffe1db";
popText: "#666";
purple1: "#7357e8";
red1: "#ea2700";
scrollbarsBg: "transparent";
scrollbarsThumb: "#737373";
selectorActive: "#008ad2";
selectorText: "#606060";
sub: "#959595";
tableStripedBg: "#fafafa";
text: "#323232";
text2: "#181818";
text3: "#000000";
toggleBgDisabled: "#f0f0f0";
toggleHandleBg: "#e0e0e0";
toggleHandleBgDisabled: "#deae84";
toggleHandleBorder: "#cdcdcd";
toggleHandleBorderDisabled: "#c29f7d";
toolbarBg: "#f8f8f8";
toolbarBorder: "#ababab";
toolButtonText: "#666e80";
yellow1: "#ffde9d";
yellow2: "#e4a429";
yellow3: "#fff5db";
};
},
DefaultThemeMap,
{
mx: (
value: string | number,
) => { marginLeft: string | number; marginRight: string | number };
my: (
value: string | number,
) => { marginBottom: string | number; marginTop: string | number };
px: (
value: string | number,
) => { paddingLeft: string | number; paddingRight: string | number };
py: (
value: string | number,
) => { paddingBottom: string | number; paddingTop: string | number };
size: (
value: string | number,
) => { height: string | number; width: string | number };
},
>
Parameters
- type: Type
- ...composers: {
[K in string | number | symbol]: string extends Composers[K<K>]
? Composers[K<K>]
: Composers[K<K>] extends string | Function | ComponentType<any>
? any[any]
: RemoveIndex<CSS> & {
compoundVariants?: (
(
"variants" extends keyof (...)[(...)]
? { [Name in (...) | (...) | (...)]?: (...) | (...) | (...) }
: WideObject
) & { css: CSS }
)[];
defaultVariants?: "variants" extends keyof Composers[K<K>]
? {
[Name in string | number | symbol]?: String | Widen<keyof (...)>
}
: WideObject;
variants?: { [key: string]: { [key: string]: CSS; [key: number]: CSS } };
} & CSS & {
[K2 in string
| number
| symbol]: K2 extends | "compoundVariants"
| "defaultVariants"
| "variants"
? unknown
: K2 extends keyof CSS ? CSS[K2<K2>] : unknown
}
}
Returns StyledComponent<
Type,
StyledComponentProps<Composers>,
CSS<
{},
{
colors: {
activeBg: "#e7e7e7";
background: "white";
blue1: "#038bf4";
blue2: "#b7d6f5";
blue3: "#dbe6ff";
blue4: "#33b4ff";
blue5: "#30a2e6";
border: "#d5d5d5";
buttonBorder: "#bababa";
choiceActiveBg: "#f3f3f3";
choiceActiveText: "#313131";
choiceBg: "#ffffff";
choiceBorder: "#cfcfcf";
choiceText: "#999999";
focusColor: "#dcaf00";
green1: "#3ec234";
green1Darker: "#38af2f";
grey1: "#737373";
headerBg: "#efeff0";
headerBorder: "#c8c8c9";
headerText: "#484848";
icon: "#636363";
inactiveBg: "#d3d3de";
inactiveDarkBg: "#999";
inputDisabledBg: "#f3f3f3";
inputDisabledText: "#959595";
mainColor: "#008ad2";
mainColorAlt: "#006AA9";
modalBg: "#f7f7f7";
modalButtonBg: "#f8f8f8";
modalButtonBorder: "#c2c2c2";
orange1: "#ff7200";
orange1Darker: "#cc5b00";
pink1: "#ff388f";
pinky1: "#f5c0b7";
pinky2: "#e07b67";
pinky3: "#ffe1db";
popText: "#666";
purple1: "#7357e8";
red1: "#ea2700";
scrollbarsBg: "transparent";
scrollbarsThumb: "#737373";
selectorActive: "#008ad2";
selectorText: "#606060";
sub: "#959595";
tableStripedBg: "#fafafa";
text: "#323232";
text2: "#181818";
text3: "#000000";
toggleBgDisabled: "#f0f0f0";
toggleHandleBg: "#e0e0e0";
toggleHandleBgDisabled: "#deae84";
toggleHandleBorder: "#cdcdcd";
toggleHandleBorderDisabled: "#c29f7d";
toolbarBg: "#f8f8f8";
toolbarBorder: "#ababab";
toolButtonText: "#666e80";
yellow1: "#ffde9d";
yellow2: "#e4a429";
yellow3: "#fff5db";
};
},
DefaultThemeMap,
{
mx: (
value: string | number,
) => { marginLeft: string | number; marginRight: string | number };
my: (
value: string | number,
) => { marginBottom: string | number; marginTop: string | number };
px: (
value: string | number,
) => { paddingLeft: string | number; paddingRight: string | number };
py: (
value: string | number,
) => { paddingBottom: string | number; paddingTop: string | number };
size: (
value: string | number,
) => { height: string | number; width: string | number };
},
>,
>