import { BaseTheme, BaseThemeOptions, BasicThemeName, InviteUserModalFieldsProperties, SubscriptionsFieldsProperties } from './index'; import { Color, CSSProperties, ExtendedCSSProperties } from '../Common'; import { AccountFieldsProperties, PrivacyFieldsProperties, ProfileFieldsProperties, SecurityTabsProperties, UsersFieldsProperties } from './fieldsAppearanceTypes'; export interface NavigationThemeOptionsState { color?: Color; background?: Color; borderColor?: Color; avatarColor?: Color; avatarBgColor?: Color; iconColor?: Color; iconBackground?: Color; borderBottomColor?: Color; } export interface NavigationThemeOptions extends BaseThemeOptions { header?: BaseThemeOptions; content?: BaseThemeOptions; footer?: BaseThemeOptions; groupTitleColor?: Color; groupTitleSize?: CSSProperties['fontSize']; background?: Color; headerColor?: Color; subHeaderColor?: Color; default?: Partial>; hover?: Partial; selected?: Partial; } export interface RightPanelThemeOptions { headerBackground: Color; pageBackground: Color; elementBackground: Color; profileHeader: Color; tableHeaderBackground: Color; tableBodyBackground: Color; } export interface PageThemeOptions extends BaseThemeOptions { header?: ExtendedCSSProperties; content?: ExtendedCSSProperties; cardList?: { cardListItemStyle?: ExtendedCSSProperties; }; } export interface CustomLoginStyles { loginBoxPreview?: { container?: ExtendedCSSProperties; }; } export interface AccountPageThemeOptions extends PageThemeOptions { fieldsProperties?: AccountFieldsProperties; customLogin?: CustomLoginStyles; } export interface SecurityPageThemeOptions extends PageThemeOptions { tabsProperties?: SecurityTabsProperties; } export interface ProfilePageThemeOptions extends PageThemeOptions { profileInfo?: BaseThemeOptions; basicInformation?: BaseThemeOptions; fieldsProperties?: ProfileFieldsProperties; } export interface PrivacyPageThemeOptions extends PageThemeOptions { changePasswordDialog?: { passwordMeter?: { enabled?: boolean; }; }; fieldsProperties?: PrivacyFieldsProperties; } export interface InviteUserByBulkOptions { /** By default invite user modal let you invite only 1 user. enable bulk if you want to invite up to 5 users. * Note: when inviting bulk of users, only emails and role will be shown in the form. **/ enabled?: boolean; } export interface InviteUserByEmailOptions { /** By default invite user modal show the form to invite user by email. disable this form if you want to hide it **/ enabled?: boolean; inviteBulk?: InviteUserByBulkOptions; fieldsProperties?: InviteUserModalFieldsProperties; } export interface InviteUserModalOptions { inviteByEmail?: InviteUserByEmailOptions; } export interface SearchFilterOption { visibility: 'always' | 'hidden'; } export interface SearchFilterOptions { email?: SearchFilterOption; fullName?: SearchFilterOption; username?: SearchFilterOption; phoneNumber?: SearchFilterOption; } export interface UsersPageThemeOptions extends PageThemeOptions { /** @Deprecated please use inviteUserModal.inviteByEmail.enabled = false to hide invite with email **/ hideInviteWithEmail?: boolean; inviteUserModal?: InviteUserModalOptions; fieldsProperties?: UsersFieldsProperties; searchFilterOptions?: SearchFilterOptions; } export interface SubscriptionsPageThemeOptions extends PageThemeOptions { fieldsProperties?: SubscriptionsFieldsProperties; } export interface ApplicationThemeOptions extends PageThemeOptions { cardLogoContainer?: ExtendedCSSProperties; cardSkeleton?: ExtendedCSSProperties; usersSection?: ExtendedCSSProperties; } export interface PagesThemeOptions extends PageThemeOptions { profile?: ProfilePageThemeOptions; privacy?: PrivacyPageThemeOptions; personalApiTokens?: PageThemeOptions; account?: AccountPageThemeOptions; users?: UsersPageThemeOptions; security?: SecurityPageThemeOptions; singleSignOn?: PageThemeOptions; audits?: PageThemeOptions; webhooks?: PageThemeOptions; apiTokens?: PageThemeOptions; roles?: PageThemeOptions; subscriptions?: SubscriptionsPageThemeOptions; application?: ApplicationThemeOptions; } export interface TableScrollbar { borderColor?: Color; trackColor?: Color; thumbColor?: Color; thumbHoverColor?: Color; } export interface TableTheme { /** * Direct css styling, applying css for table container, MuiPaper */ container?: ExtendedCSSProperties; /** * Direct css styling, applying css for table content, MuiBox */ content?: ExtendedCSSProperties; /** * Direct css styling, applying css for table header container, MuiBox */ headerContainer?: ExtendedCSSProperties; /** * Styling applying for table scrollbar */ scrollbar?: TableScrollbar; /** * Background color for filterButton on the header of the table, we have it on audits */ filterButtonBackground?: Color; /** * Styling applying for icon container in table empty state */ emptyStateIconContainer?: ExtendedCSSProperties; /** * Styling applying for icon in table empty state */ emptyStateIcon?: ExtendedCSSProperties; } export interface SelectTheme { /** * Styling applying for select input */ selectInput?: ExtendedCSSProperties; /** * Styling applying for select options container */ selectOptionsContainer?: ExtendedCSSProperties; /** * Styling applying for select single option */ selectOption?: ExtendedCSSProperties; } export interface SeverityChipTheme { /** * Styling applying for warning chip */ warning?: ExtendedCSSProperties; /** * Styling applying for error chip */ error?: ExtendedCSSProperties; /** * Styling applying for info chip */ info?: ExtendedCSSProperties; /** * Styling applying for success chip */ success?: ExtendedCSSProperties; } export interface TreeGraphTheme { /** * Styling applying for tree graph node */ node?: ExtendedCSSProperties; /** * Styling applying for tree graph lines color */ linesColor?: Color; } export interface DatePickerTheme { /** * Styling applying for date picker background colors */ background?: { /** * Styling applying for date picker background color */ main?: Color; /** * Styling applying for date picker items hover background color */ hover?: Color; /** * Styling applying for date picker selected items background color */ accessibility?: Color; /** * Styling applying for date picker highlited items background color */ highlighted?: Color; /** * Styling applying for date picker holidays background color */ holidays?: Color; /** * Styling applying for date picker muted items background color */ muted?: Color; /** * Styling applying for date picker selected items background color */ selected?: Color; /** * Styling applying for date picker selected in range items background color */ selectedInRange?: Color; }; /** * Styling applying for date picker text color */ text?: { /** * Styling applying for date picker default text color */ default?: Color; /** * Styling applying for date picker header text color */ header?: Color; /** * Styling applying for date picker items muted text color */ muted?: Color; /** * Styling applying for date picker selected items text color */ selected?: Color; /** * Styling applying for date picker selected in range items text color */ selectedInRange?: Color; }; /** * Styling applying for date picker border color */ borderColor?: Color; /** * Styling applying for date picker navigation icon color */ navigationIconColor?: Color; } export interface AdminPortalCommonOptions extends BaseThemeOptions { /** * Option to customize admin portal table */ tableTheme?: TableTheme; /** * Option to customize admin portal select/drop down list */ selectTheme?: SelectTheme; /** * Option to customize admin portal severity chip */ severityChipTheme?: SeverityChipTheme; /** * Option to customize admin portal tree graph theme */ treeGraphTheme?: TreeGraphTheme; /** * Option to customize admin portal drop zone */ dropZone?: ExtendedCSSProperties; /** * Option to customize admin portal date picker */ datePickerTheme?: DatePickerTheme; } export interface AdminPortalThemeOptions extends AdminPortalCommonOptions { themeName?: BasicThemeName; layout?: { fullScreenMode?: boolean; }; navigation?: NavigationThemeOptions; pages?: PagesThemeOptions; } export interface AdminPortalTheme extends BaseTheme { themeName: BasicThemeName; layout: { fullScreenMode: boolean; }; navigation: NavigationThemeOptions; rightPanel: RightPanelThemeOptions; pages: PagesThemeOptions; tableTheme: TableTheme; selectTheme: SelectTheme; severityChipTheme: SeverityChipTheme; treeGraphTheme: TreeGraphTheme; dropZone: ExtendedCSSProperties; datePickerTheme: DatePickerTheme; }