Adjust ghostish variation states

parent a6511ae1
......@@ -20,7 +20,10 @@ declare module '@rocket.chat/fuselage' {
type BoxProps = PropsWithChildren<{
is?: ElementType;
className?: string | ReturnType<typeof css> | (string | ReturnType<typeof css>)[];
className?:
| string
| ReturnType<typeof css>
| (string | ReturnType<typeof css>)[];
style?: CSSProperties;
border?: CSSProperties['border'];
borderBlock?: CSSProperties['borderBlock'];
......@@ -145,10 +148,10 @@ declare module '@rocket.chat/fuselage' {
minSize?: CSSProperties['blockSize'];
maxSize?: CSSProperties['blockSize'];
fontScale?: FontScale;
}>
& Omit<AllHTMLAttributes<HTMLOrSVGElement>, 'className'>
& Omit<SVGAttributes<SVGElement>, keyof AllHTMLAttributes<HTMLOrSVGElement>>
& RefAttributes<unknown>;
}> &
Omit<AllHTMLAttributes<HTMLOrSVGElement>, 'className'> &
Omit<SVGAttributes<SVGElement>, keyof AllHTMLAttributes<HTMLOrSVGElement>> &
RefAttributes<unknown>;
export const Box: ForwardRefExoticComponent<BoxProps>;
......@@ -182,13 +185,18 @@ declare module '@rocket.chat/fuselage' {
className?: string;
children?: any;
title?: any;
}
};
export const Badge: ForwardRefExoticComponent<BadgeProps>;
type ButtonProps = BoxProps & {
info?: boolean;
success?: boolean;
warning?: boolean;
danger?: boolean;
primary?: boolean;
ghost?: boolean;
danger?: boolean;
nude?: boolean;
ghostish?: boolean;
small?: boolean;
square?: boolean;
};
......@@ -263,7 +271,7 @@ declare module '@rocket.chat/fuselage' {
optionWidth?: BoxProps['width'];
placement?: Placements;
renderItem?: (props: OptionProps) => ReactNode;
}
};
export const Menu: ForwardRefExoticComponent<MenuProps>;
type ModalProps = BoxProps;
......@@ -305,7 +313,11 @@ declare module '@rocket.chat/fuselage' {
current?: number;
itemsPerPage?: 25 | 50 | 100;
itemsPerPageLabel?: () => string;
showingResultsLabel?: (props: { count: number; current: number; itemsPerPage: 25 | 50 | 100 }) => string;
showingResultsLabel?: (props: {
count: number;
current: number;
itemsPerPage: 25 | 50 | 100;
}) => string;
onSetCurrent?: Dispatch<SetStateAction<number>>;
onSetItemsPerPage?: Dispatch<SetStateAction<25 | 50 | 100>>;
};
......
......@@ -332,60 +332,60 @@ $ghostish: (
hover-border-color: -color('ghostish', 'hover-border-color', colors.neutral(400)),
active-background-color: -color('ghostish', 'active-background-color', colors.neutral(500)),
active-border-color: -color('ghostish', 'active-border-color', colors.neutral(500)),
focus-background-color: -color('ghostish', 'focus-background-color', colors.neutral(300)),
focus-background-color: -color('ghostish', 'focus-background-color', colors.neutral(400)),
focus-border-color: -color('ghostish', 'focus-border-color', colors.neutral(500)),
focus-shadow-color: -color('ghostish', 'focus-shadow-color', colors.neutral(100)),
disabled-background-color: -color('ghostish', 'disabled-background-color', colors.neutral(100)),
disabled-border-color: -color('ghostish', 'disabled-border-color', colors.neutral(100)),
disabled-color: -color('ghostish', 'disabled-color', colors.neutral(400)),
disabled-color: -color('ghostish', 'disabled-color', colors.neutral(200)),
);
$ghostish-info: (
background-color: -color('ghostish-info', 'background-color', transparent),
border-color: -color('ghostish-info', 'border-color', transparent),
color: -color('ghostish-info', 'color', colors.info(600)),
hover-background-color: -color('ghostish-info', 'hover-background-color', colors.info(400)),
hover-border-color: -color('ghostish-info', 'hover-border-color', colors.info(400)),
active-background-color: -color('ghostish-info', 'active-background-color', colors.info(500)),
active-border-color: -color('ghostish-info', 'active-border-color', colors.info(500)),
hover-background-color: -color('ghostish-info', 'hover-background-color', colors.info(300)),
hover-border-color: -color('ghostish-info', 'hover-border-color', colors.info(300)),
active-background-color: -color('ghostish-info', 'active-background-color', colors.info(400)),
active-border-color: -color('ghostish-info', 'active-border-color', colors.info(400)),
focus-background-color: -color('ghostish-info', 'focus-background-color', colors.info(300)),
focus-border-color: -color('ghostish-info', 'focus-border-color', colors.info(500)),
focus-border-color: -color('ghostish-info', 'focus-border-color', colors.info(400)),
focus-shadow-color: -color('ghostish-info', 'focus-shadow-color', colors.info(100)),
disabled-background-color: -color('ghostish-info', 'disabled-background-color', colors.info(100)),
disabled-border-color: -color('ghostish-info', 'disabled-border-color', colors.info(100)),
disabled-color: -color('ghostish-info', 'disabled-color', colors.info(100)),
disabled-color: -color('ghostish-info', 'disabled-color', colors.info(200)),
);
$ghostish-success: (
background-color: -color('ghostish-success', 'background-color', transparent),
border-color: -color('ghostish-success', 'border-color', transparent),
color: -color('ghostish-success', 'color', colors.success(800)),
hover-background-color: -color('ghostish-success', 'hover-background-color', colors.success(400)),
hover-border-color: -color('ghostish-success', 'hover-border-color', colors.success(400)),
active-background-color: -color('ghostish-success', 'active-background-color', colors.success(500)),
active-border-color: -color('ghostish-success', 'active-border-color', colors.success(500)),
hover-background-color: -color('ghostish-success', 'hover-background-color', colors.success(300)),
hover-border-color: -color('ghostish-success', 'hover-border-color', colors.success(300)),
active-background-color: -color('ghostish-success', 'active-background-color', colors.success(400)),
active-border-color: -color('ghostish-success', 'active-border-color', colors.success(400)),
focus-background-color: -color('ghostish-success', 'focus-background-color', colors.success(300)),
focus-border-color: -color('ghostish-success', 'focus-border-color', colors.success(500)),
focus-border-color: -color('ghostish-success', 'focus-border-color', colors.success(400)),
focus-shadow-color: -color('ghostish-success', 'focus-shadow-color', colors.success(100)),
disabled-background-color: -color('ghostish-success', 'disabled-background-color', colors.success(100)),
disabled-border-color: -color('ghostish-success', 'disabled-border-color', colors.success(100)),
disabled-color: -color('ghostish-success', 'disabled-color', colors.success(100)),
disabled-color: -color('ghostish-success', 'disabled-color', colors.success(200)),
);
$ghostish-warning: (
background-color: -color('ghostish-warning', 'background-color', transparent),
border-color: -color('ghostish-warning', 'border-color', transparent),
color: -color('ghostish-warning', 'color', colors.warning(900)),
hover-background-color: -color('ghostish-warning', 'hover-background-color', colors.warning(400)),
hover-border-color: -color('ghostish-warning', 'hover-border-color', colors.warning(400)),
active-background-color: -color('ghostish-warning', 'active-background-color', colors.warning(500)),
active-border-color: -color('ghostish-warning', 'active-border-color', colors.warning(500)),
hover-background-color: -color('ghostish-warning', 'hover-background-color', colors.warning(300)),
hover-border-color: -color('ghostish-warning', 'hover-border-color', colors.warning(300)),
active-background-color: -color('ghostish-warning', 'active-background-color', colors.warning(400)),
active-border-color: -color('ghostish-warning', 'active-border-color', colors.warning(400)),
focus-background-color: -color('ghostish-warning', 'focus-background-color', colors.warning(300)),
focus-border-color: -color('ghostish-warning', 'focus-border-color', colors.warning(500)),
focus-border-color: -color('ghostish-warning', 'focus-border-color', colors.warning(400)),
focus-shadow-color: -color('ghostish-warning', 'focus-shadow-color', colors.warning(100)),
disabled-background-color: -color('ghostish-warning', 'disabled-background-color', colors.warning(100)),
disabled-border-color: -color('ghostish-warning', 'disabled-border-color', colors.warning(100)),
disabled-color: -color('ghostish-warning', 'disabled-color', colors.warning(100)),
disabled-color: -color('ghostish-warning', 'disabled-color', colors.warning(200)),
);
$ghostish-danger: (
......@@ -397,9 +397,9 @@ $ghostish-danger: (
active-background-color: -color('ghostish-danger', 'active-background-color', colors.danger(400)),
active-border-color: -color('ghostish-danger', 'active-border-color', colors.danger(400)),
focus-background-color: -color('ghostish-danger', 'focus-background-color', colors.danger(300)),
focus-border-color: -color('ghostish-danger', 'focus-border-color', colors.danger(500)),
focus-border-color: -color('ghostish-danger', 'focus-border-color', colors.danger(400)),
focus-shadow-color: -color('ghostish-danger', 'focus-shadow-color', colors.danger(100)),
disabled-background-color: -color('ghostish-danger', 'disabled-background-color', colors.danger(100)),
disabled-border-color: -color('ghostish-danger', 'disabled-border-color', colors.danger(100)),
disabled-color: -color('ghostish-danger', 'disabled-color', colors.danger(100)),
disabled-color: -color('ghostish-danger', 'disabled-color', colors.danger(200)),
);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment