import { AlertId, BuiltInColors, CardActionId, EnterpriseProvider, FieldId, MenuId, OAuthProvider, OrganizationPreviewId, PhoneCodeChannel, ProfilePageId, ProfileSectionId, SamlIdpSlug, SelectId, TransparentColor, UserPreviewId, Web3Provider } from "@clerk/shared/types"; import * as CSS from "csstype"; //#region src/internal/appearance.d.ts type CSSProperties = CSS.PropertiesFallback; type CSSPropertiesWithMultiValues = { [K in keyof CSSProperties]: CSSProperties[K] }; type CSSPseudos = { [K in CSS.Pseudos as `&${K}`]?: CSSObject }; interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudos {} type UserDefinedStyle = string | CSSObject; type Shade = '25' | '50' | '100' | '150' | '200' | '300' | '400' | '500' | '600' | '700' | '750' | '800' | '850' | '900' | '950'; type ColorScale = Record; type AlphaColorScale = { [K in Shade]: T }; type ColorScaleWithRequiredBase = Partial> & { '500': T; }; type CssColorOrScale = string | ColorScaleWithRequiredBase; type CssColorOrAlphaScale = string | AlphaColorScale; type CssColor = string | TransparentColor | BuiltInColors; type CssLengthUnit = string; type FontSizeScale = { xs?: string; sm?: string; md?: string; lg?: string; xl?: string; }; type FontWeightNamedValue = CSS.Properties['fontWeight']; type FontWeightNumericValue = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; type FontWeightScale = { normal?: FontWeightNamedValue | FontWeightNumericValue; medium?: FontWeightNamedValue | FontWeightNumericValue; semibold?: FontWeightNamedValue | FontWeightNumericValue; bold?: FontWeightNamedValue | FontWeightNumericValue; }; type WebSafeFont = 'Arial' | 'Brush Script MT' | 'Courier New' | 'Garamond' | 'Georgia' | 'Helvetica' | 'Tahoma' | 'Times New Roman' | 'Trebuchet MS' | 'Verdana'; type FontFamily = string | WebSafeFont; type LoadingState = 'loading'; type ErrorState = 'error'; type OpenState = 'open'; type ActiveState = 'active'; type ElementState = LoadingState | ErrorState | OpenState | ActiveState; type ControlState = ErrorState; /** * A type that describes the states and the ids that we will combine * in order to create all theming combinations * If jsx exists, the element can also receive a typed function that returns a JSX.Element */ type ConfigOptions = { states: ElementState; ids: string; jsx: any; }; type WithOptions = { ids: Ids; states: States; jsx: Jsx; }; /** * Create a type union of all state + id combinations */ type StateSelectors = S extends never ? never : `${E}__${S}`; /** * Create a type union consisting of the base element with all valid ids appended */ type IdSelectors = Id extends never ? never : `${E}__${Id}`; /** * Create a type union consisting of all base, base+state, base+id, base+id+state combinations */ type ElementPartsKeys = StateSelectors | IdSelectors | StateSelectors, Opts['states']>; /** * Create an object type mapping base elements and part combinations (base, base+state, base+id, base+id+state) * to the value they can accept (usually a style rule, a string class or jsx) */ type Selectors = Partial> | Partial, UserDefinedStyle>>; /** * Convert a kebab-cased key from ElementsConfig into a camelCased Elements key */ type ElementObjectKey = K extends `${infer Parent}-${infer Rest}` ? `${Parent}${Capitalize}` : K; /** * A map that describes the possible combinations we need to generate * for each unique base element * Kebab-case is used to differentiate between the container and child elements */ type ElementsConfig = { button: WithOptions; input: WithOptions; checkbox: WithOptions; radio: WithOptions; table: WithOptions; rootBox: WithOptions; cardBox: WithOptions; card: WithOptions; actionCard: WithOptions; popoverBox: WithOptions; disclosureRoot: WithOptions; disclosureTrigger: WithOptions; disclosureContentRoot: WithOptions; disclosureContentInner: WithOptions; disclosureContent: WithOptions; collapsible: WithOptions; collapsibleInner: WithOptions; lineItemsRoot: WithOptions; lineItemsDivider: WithOptions; lineItemsGroup: WithOptions<'primary' | 'secondary' | 'tertiary'>; lineItemsTitle: WithOptions<'primary' | 'secondary' | 'tertiary'>; lineItemsTitleDescription: WithOptions; lineItemsDescription: WithOptions<'primary' | 'secondary' | 'tertiary'>; lineItemsDescriptionInner: WithOptions; lineItemsDescriptionText: WithOptions; lineItemsDescriptionSuffix: WithOptions; lineItemsDescriptionPrefix: WithOptions; lineItemsCopyButton: WithOptions; lineItemsDowngradeNotice: WithOptions; logoBox: WithOptions; logoImage: WithOptions; logoGroup: WithOptions; logoGroupItem: WithOptions; logoGroupItemContainer: WithOptions; logoGroupIcon: WithOptions; logoGroupSeparator: WithOptions; listGroup: WithOptions; listGroupHeader: WithOptions; listGroupHeaderTitle: WithOptions; listGroupContent: WithOptions; listGroupItem: WithOptions; listGroupItemLabel: WithOptions; header: WithOptions; headerTitle: WithOptions; headerSubtitle: WithOptions; headerBackLink: WithOptions; backRow: WithOptions; backLink: WithOptions; main: WithOptions; footer: WithOptions; footerItem: WithOptions; footerAction: WithOptions; footerActionText: WithOptions; footerActionLink: WithOptions; footerPages: WithOptions; footerPagesLink: WithOptions<'help' | 'terms' | 'privacy'>; socialButtonsRoot: WithOptions; socialButtons: WithOptions; socialButtonsIconButton: WithOptions; socialButtonsBlockButton: WithOptions; socialButtonsBlockButtonText: WithOptions; socialButtonsProviderIcon: WithOptions; socialButtonsProviderInitialIcon: WithOptions; lastAuthenticationStrategyBadge: WithOptions; enterpriseButtonsProviderIcon: WithOptions; providerIcon: WithOptions; providerInitialIcon: WithOptions; alternativeMethods: WithOptions; alternativeMethodsBlockButton: WithOptions; alternativeMethodsBlockButtonText: WithOptions; alternativeMethodsBlockButtonArrow: WithOptions; checkoutFormLineItemsRoot: WithOptions; checkoutFormPromoCodeRoot: WithOptions; checkoutFormPromoCodeInput: WithOptions; checkoutFormPromoCodeApplyButton: WithOptions; checkoutFormPromoCodeErrorText: WithOptions; checkoutFormPromoCodeRemoveButton: WithOptions; checkoutFormElementsRoot: WithOptions; checkoutSuccessRoot: WithOptions; checkoutSuccessRings: WithOptions; checkoutSuccessBadge: WithOptions; checkoutSuccessTitle: WithOptions; checkoutSuccessDescription: WithOptions; otpCodeField: WithOptions; otpCodeFieldInputs: WithOptions; otpCodeFieldInput: WithOptions; otpCodeFieldInputContainer: WithOptions; otpCodeFieldErrorText: WithOptions; otpCodeFieldSuccessText: WithOptions; dividerRow: WithOptions; dividerColumn: WithOptions; dividerText: WithOptions; dividerLine: WithOptions; drawerBackdrop: WithOptions; drawerRoot: WithOptions; drawerContent: WithOptions; drawerHeader: WithOptions; drawerTitle: WithOptions; drawerBody: WithOptions; drawerFooter: WithOptions; drawerFooterTitle: WithOptions; drawerFooterDescription: WithOptions; drawerClose: WithOptions; drawerConfirmationBackdrop: WithOptions; drawerConfirmationRoot: WithOptions; drawerConfirmationTitle: WithOptions; drawerConfirmationDescription: WithOptions; drawerConfirmationActions: WithOptions; formHeader: WithOptions; formHeaderTitle: WithOptions; formHeaderSubtitle: WithOptions; formResendCodeLink: WithOptions; actionBlockedIconBox: WithOptions; actionBlockedIcon: WithOptions; actionBlockedLink: WithOptions; actionBlockedTraceIdBox: WithOptions; actionBlockedTraceIdLabel: WithOptions; actionBlockedTraceId: WithOptions; verificationLinkStatusBox: WithOptions; verificationLinkStatusIconBox: WithOptions; verificationLinkStatusIcon: WithOptions; verificationLinkStatusText: WithOptions; form: WithOptions; formContainer: WithOptions; formFieldRow: WithOptions; formField: WithOptions; formFieldLabelRow: WithOptions; formFieldLabel: WithOptions; formFieldRadioGroup: WithOptions; formFieldRadioGroupItem: WithOptions; formFieldRadioInput: WithOptions; formFieldRadioLabel: WithOptions; formFieldRadioLabelTitle: WithOptions; formFieldRadioLabelDescription: WithOptions; formFieldCheckboxInput: WithOptions; formFieldCheckboxLabel: WithOptions; formFieldAction: WithOptions; formFieldInput: WithOptions; formFieldErrorText: WithOptions; formFieldWarningText: WithOptions; formFieldSuccessText: WithOptions; formFieldInfoText: WithOptions; formFieldHintText: WithOptions; formButtonPrimary: WithOptions; formButtonReset: WithOptions; formFieldInputGroup: WithOptions; formFieldInputShowPasswordButton: WithOptions; formFieldInputShowPasswordIcon: WithOptions; formFieldInputCopyToClipboardButton: WithOptions; formFieldInputCopyToClipboardIcon: WithOptions; searchInput: WithOptions; searchInputClearButton: WithOptions; phoneInputBox: WithOptions; formInputGroup: WithOptions; segmentedControlRoot: WithOptions; segmentedControlButton: WithOptions; switchRoot: WithOptions; switchIndicator: WithOptions; switchThumb: WithOptions; switchLabel: WithOptions; avatarBox: WithOptions; avatarImage: WithOptions; avatarImageActions: WithOptions; avatarImageActionsUpload: WithOptions; avatarImageActionsRemove: WithOptions; userButtonBox: WithOptions; userButtonOuterIdentifier: WithOptions; userButtonTrigger: WithOptions; userButtonAvatarBox: WithOptions; userButtonAvatarImage: WithOptions; userButtonPopoverRootBox: WithOptions; userButtonPopoverCard: WithOptions; userButtonPopoverMain: WithOptions; userButtonPopoverActions: WithOptions<'singleSession' | 'multiSession'>; userButtonPopoverActionButton: WithOptions<'manageAccount' | 'addAccount' | 'signOut' | 'signOutAll'>; userButtonPopoverActionButtonIconBox: WithOptions<'manageAccount' | 'addAccount' | 'signOut' | 'signOutAll'>; userButtonPopoverActionButtonIcon: WithOptions<'manageAccount' | 'addAccount' | 'signOut' | 'signOutAll'>; userButtonPopoverCustomItemButton: WithOptions; userButtonPopoverCustomItemButtonIconBox: WithOptions; userButtonPopoverActionItemButtonIcon: WithOptions; userButtonPopoverFooter: WithOptions; userButtonPopoverFooterPagesLink: WithOptions<'terms' | 'privacy'>; organizationSwitcherTrigger: WithOptions<'personal' | 'organization', 'open'>; organizationSwitcherTriggerIcon: WithOptions; organizationSwitcherPopoverRootBox: WithOptions; organizationSwitcherPopoverCard: WithOptions; organizationSwitcherPopoverMain: WithOptions; organizationSwitcherPopoverActions: WithOptions; organizationSwitcherPopoverInvitationActions: WithOptions; organizationSwitcherPopoverInvitationActionsBox: WithOptions; organizationSwitcherPopoverActionButton: WithOptions<'manageOrganization' | 'createOrganization' | 'switchOrganization'>; organizationSwitcherPreviewButton: WithOptions<'personal' | 'organization'>; organizationSwitcherInvitationAcceptButton: WithOptions; organizationSwitcherPopoverActionButtonIconBox: WithOptions<'manageOrganization' | 'createOrganization'>; organizationSwitcherPopoverActionButtonIcon: WithOptions<'manageOrganization' | 'createOrganization'>; organizationSwitcherPopoverFooter: WithOptions; organizationProfileMembersSearchInputIcon: WithOptions; organizationProfileMembersSearchInput: WithOptions; organizationProfileSecuritySsoBadge: WithOptions; organizationProfileSecuritySsoDescription: WithOptions; organizationProfileSecuritySsoConfigureButton: WithOptions; organizationProfileSecuritySsoDetailRows: WithOptions; organizationProfileSecuritySsoDetailRow: WithOptions; organizationProfileSecuritySsoDetailRowLabel: WithOptions; organizationProfileSecuritySsoDetailRowChip: WithOptions; organizationProfileSecuritySsoDetailRowLink: WithOptions; organizationProfileSecuritySsoProviderIcon: WithOptions; organizationProfileSecuritySsoConnectionRow: WithOptions; organizationProfileSecuritySsoConnectionPage: WithOptions; organizationProfileSecuritySsoBypassDescription: WithOptions; organizationProfileSecuritySsoBypassCountLabel: WithOptions; organizationProfileSecuritySsoBypassCountBadge: WithOptions; organizationProfileSecuritySsoBypassPage: WithOptions; organizationProfileSecuritySsoBypassSearchInput: WithOptions; organizationProfileSecuritySsoBypassSearchInputIcon: WithOptions; organizationProfileSecuritySsoBypassAddButton: WithOptions; organizationProfileSecuritySsoBypassEmailInput: WithOptions; organizationProfileSecuritySsoBypassRoleWarning: WithOptions; organizationProfileSecuritySsoBypassFailure: WithOptions; organizationProfileSecuritySsoBypassBulkResult: WithOptions; organizationListPreviewItems: WithOptions; organizationListPreviewItem: WithOptions; organizationListPreviewButton: WithOptions; organizationListPreviewItemActionButton: WithOptions; organizationListCreateOrganizationActionButton: WithOptions; taskChooseOrganizationPreviewItem: WithOptions; taskChooseOrganizationPreviewItems: WithOptions; taskChooseOrganizationCreateOrganizationActionButton: WithOptions; taskChooseOrganizationPreviewButton: WithOptions; taskSetupMfaMethodSelectionItem: WithOptions; taskSetupMfaMethodSelectionItems: WithOptions; taskSetupMfaPhoneSelectionItems: WithOptions; taskSetupMfaPhoneSelectionItem: WithOptions; taskSetupMfaPhoneSelectionAddPhoneAction: WithOptions; userAvatarBox: WithOptions; userAvatarImage: WithOptions; userPreview: WithOptions; userPreviewAvatarContainer: WithOptions; userPreviewAvatarBox: WithOptions; userPreviewAvatarImage: WithOptions; userPreviewAvatarIcon: WithOptions; userPreviewTextContainer: WithOptions; userPreviewMainIdentifier: WithOptions; userPreviewMainIdentifierText: WithOptions; userPreviewSecondaryIdentifier: WithOptions; organizationPreview: WithOptions; organizationPreviewAvatarContainer: WithOptions; organizationPreviewAvatarBox: WithOptions; organizationPreviewAvatarImage: WithOptions; organizationPreviewTextContainer: WithOptions; organizationPreviewMainIdentifier: WithOptions; organizationPreviewSecondaryIdentifier: WithOptions; organizationAvatarUploaderContainer: WithOptions; membersPageInviteButton: WithOptions; identityPreview: WithOptions; identityPreviewText: WithOptions; identityPreviewEditButton: WithOptions; identityPreviewEditButtonIcon: WithOptions; passkeyIcon: WithOptions<'firstFactor'>; accountSwitcherActionButton: WithOptions<'addAccount' | 'signOutAll'>; accountSwitcherActionButtonIconBox: WithOptions<'addAccount' | 'signOutAll'>; accountSwitcherActionButtonIcon: WithOptions<'addAccount' | 'signOutAll'>; pricingTable: WithOptions; pricingTableCard: WithOptions; pricingTableCardHeader: WithOptions; pricingTableCardTitleContainer: WithOptions; pricingTableCardTitle: WithOptions; pricingTableCardBadge: WithOptions; pricingTableCardDescription: WithOptions; pricingTableCardFeeContainer: WithOptions; pricingTableCardFee: WithOptions; pricingTableCardFeePeriod: WithOptions; pricingTableCardPeriodToggle: WithOptions; pricingTableCardFeePeriodNotice: WithOptions; pricingTableCardBody: WithOptions; pricingTableCardFeatures: WithOptions; pricingTableCardFeaturesList: WithOptions; pricingTableCardFeaturesListItem: WithOptions; pricingTableCardFeaturesListItemContent: WithOptions; pricingTableCardFeaturesListItemTitle: WithOptions; pricingTableCardStatusRow: WithOptions; pricingTableCardStatus: WithOptions; pricingTableCardFooter: WithOptions; pricingTableCardFooterButton: WithOptions; pricingTableCardFooterNotice: WithOptions; pricingTableMatrix: WithOptions; pricingTableMatrixTable: WithOptions; pricingTableMatrixRowGroup: WithOptions; pricingTableMatrixRowGroupHeader: WithOptions; pricingTableMatrixRowGroupBody: WithOptions; pricingTableMatrixRow: WithOptions; pricingTableMatrixRowHeader: WithOptions; pricingTableMatrixRowBody: WithOptions; pricingTableMatrixColumnHeader: WithOptions; pricingTableMatrixCell: WithOptions; pricingTableMatrixCellFooter: WithOptions; pricingTableMatrixAvatar: WithOptions; pricingTableMatrixBadge: WithOptions; pricingTableMatrixPlanName: WithOptions; pricingTableMatrixFee: WithOptions; pricingTableMatrixFeePeriod: WithOptions; pricingTableMatrixFeePeriodNotice: WithOptions; pricingTableMatrixFeePeriodNoticeInner: WithOptions; pricingTableMatrixFeePeriodNoticeLabel: WithOptions; pricingTableMatrixFooter: WithOptions; planDetailHeader: WithOptions; planDetailAvatar: WithOptions; planDetailBadgeAvatarTitleDescriptionContainer: WithOptions; planDetailBadgeContainer: WithOptions; planDetailBadge: WithOptions; planDetailTitle: WithOptions; planDetailTitleDescriptionContainer: WithOptions; planDetailDescription: WithOptions; planDetailAction: WithOptions; planDetailFeeContainer: WithOptions; planDetailFee: WithOptions; planDetailFeePeriod: WithOptions; planDetailFeePeriodNotice: WithOptions; planDetailFeePeriodNoticeInner: WithOptions; planDetailFeePeriodNoticeLabel: WithOptions; planDetailCaption: WithOptions; planDetailFeatures: WithOptions; planDetailFeaturesList: WithOptions; planDetailFeaturesListItem: WithOptions; planDetailFeaturesListItemContent: WithOptions; planDetailFeaturesListItemTitle: WithOptions; planDetailFeaturesListItemDescription: WithOptions; planDetailPeriodToggle: WithOptions; alert: WithOptions; alertIcon: WithOptions; alertText: WithOptions; alertTextContainer: WithOptions; tagInputContainer: WithOptions; tagPillIcon: WithOptions; tagPillContainer: WithOptions; tabPanel: WithOptions; tabButton: WithOptions; tabListContainer: WithOptions; tableHead: WithOptions; tableBody: WithOptions; tableRow: WithOptions; tableHeaderCell: WithOptions; tableBodyCell: WithOptions; paginationButton: WithOptions; paginationButtonIcon: WithOptions; paginationRowText: WithOptions<'allRowsCount' | 'rowsCount' | 'displaying'>; selectButton: WithOptions; selectSearchInput: WithOptions; selectButtonIcon: WithOptions; selectOptionsContainer: WithOptions; selectOption: WithOptions; paymentMethodRow: WithOptions; paymentMethodRowIcon: WithOptions; paymentMethodRowText: WithOptions; paymentMethodRowType: WithOptions; paymentMethodRowValue: WithOptions; paymentMethodRowBadge: WithOptions<'default' | 'expired'>; statementRoot: WithOptions; statementHeader: WithOptions; statementHeaderTitle: WithOptions; statementHeaderBadge: WithOptions; statementBody: WithOptions; statementSection: WithOptions; statementSectionHeader: WithOptions; statementHeaderTitleContainer: WithOptions; statementSectionHeaderTitle: WithOptions; statementSectionContent: WithOptions; statementSectionContentItem: WithOptions; statementSectionContentDetailsList: WithOptions; statementSectionContentDetailsListItem: WithOptions; statementSectionContentDetailsListItemLabelContainer: WithOptions; statementSectionContentDetailsListItemLabel: WithOptions; statementSectionContentDetailsListItemValue: WithOptions; statementSectionContentDetailsHeader: WithOptions; statementSectionContentDetailsHeaderItem: WithOptions; statementSectionContentDetailsHeaderItemIcon: WithOptions; statementSectionContentDetailsHeaderTitle: WithOptions; statementSectionContentDetailsHeaderDescription: WithOptions; statementSectionContentDetailsHeaderSecondaryTitle: WithOptions; statementSectionContentDetailsHeaderSecondaryDescription: WithOptions; statementFooter: WithOptions; statementFooterLabel: WithOptions; statementFooterValueContainer: WithOptions; statementFooterCurrency: WithOptions; statementFooterValue: WithOptions; statementCopyButton: WithOptions; menuButton: WithOptions; menuButtonEllipsis: WithOptions; menuButtonEllipsisBordered: WithOptions; menuList: WithOptions; menuItem: WithOptions; paymentAttemptRoot: WithOptions; paymentAttemptHeader: WithOptions; paymentAttemptHeaderTitleContainer: WithOptions; paymentAttemptHeaderTitle: WithOptions; paymentAttemptHeaderBadge: WithOptions; paymentAttemptBody: WithOptions; paymentAttemptFooter: WithOptions; paymentAttemptFooterLabel: WithOptions; paymentAttemptFooterValueContainer: WithOptions; paymentAttemptFooterCurrency: WithOptions; paymentAttemptFooterValue: WithOptions; paymentAttemptCopyButton: WithOptions; modalBackdrop: WithOptions; modalContent: WithOptions; modalCloseButton: WithOptions; profileSection: WithOptions; profileSectionItemList: WithOptions; profileSectionItem: WithOptions; profileSectionHeader: WithOptions; profileSectionTitle: WithOptions; profileSectionTitleText: WithOptions; profileSectionSubtitle: WithOptions; profileSectionSubtitleText: WithOptions; profileSectionContent: WithOptions; profileSectionPrimaryButton: WithOptions; profileSectionButtonGroup: WithOptions; profilePage: WithOptions; profilePageContent: WithOptions; formattedPhoneNumber: WithOptions; formattedPhoneNumberFlag: WithOptions; formattedPhoneNumberText: WithOptions; formattedDate: WithOptions<'tableCell'>; scrollBox: WithOptions; navbar: WithOptions; navbarButtons: WithOptions; navbarButton: WithOptions; navbarButtonIcon: WithOptions; navbarButtonText: WithOptions; navbarMobileMenuRow: WithOptions; navbarMobileMenuButton: WithOptions; navbarMobileMenuButtonIcon: WithOptions; pageScrollBox: WithOptions; page: WithOptions; activeDevice: WithOptions<'current'>; activeDeviceListItem: WithOptions<'current'>; activeDeviceIcon: WithOptions<'mobile' | 'desktop'>; impersonationFab: WithOptions; impersonationFabIcon: WithOptions; impersonationFabIconContainer: WithOptions; impersonationFabTitle: WithOptions; impersonationFabActionLink: WithOptions; tooltip: WithOptions; tooltipContent: WithOptions; tooltipText: WithOptions; invitationsSentIconBox: WithOptions; invitationsSentIcon: WithOptions; qrCodeRow: WithOptions; qrCodeContainer: WithOptions; badge: WithOptions<'primary' | 'actionRequired'>; notificationBadge: WithOptions; buttonArrowIcon: WithOptions; spinner: WithOptions; apiKeys: WithOptions; apiKeysHeader: WithOptions; apiKeysSearchBox: WithOptions; apiKeysSearchInput: WithOptions; apiKeysAddButton: WithOptions; apiKeysTable: WithOptions; apiKeysCopyButton: WithOptions; apiKeysRevealButton: WithOptions; apiKeysCreateForm: WithOptions; apiKeysCreateFormNameInput: WithOptions; apiKeysCreateFormDescriptionInput: WithOptions; apiKeysCreateFormExpirationInput: WithOptions; apiKeysCreateFormSubmitButton: WithOptions; apiKeysCreateFormExpirationCaption: WithOptions; apiKeysRevokeModal: WithOptions; apiKeysRevokeModalInput: WithOptions; apiKeysRevokeModalSubmitButton: WithOptions; apiKeysCopyModal: WithOptions; apiKeysCopyModalInput: WithOptions; apiKeysCopyModalSubmitButton: WithOptions; subscriptionDetailsCard: WithOptions; subscriptionDetailsCardHeader: WithOptions; subscriptionDetailsCardBadge: WithOptions; subscriptionDetailsCardTitle: WithOptions; subscriptionDetailsCardBody: WithOptions; subscriptionDetailsCardFooter: WithOptions; subscriptionDetailsCardActions: WithOptions; subscriptionDetailsActionButton: WithOptions; subscriptionDetailsCancelButton: WithOptions; subscriptionDetailsDetailRow: WithOptions; subscriptionDetailsDetailRowLabel: WithOptions; subscriptionDetailsDetailRowValue: WithOptions; enterpriseConnectionsRoot: WithOptions; enterpriseConnectionButton: WithOptions; enterpriseConnectionButtonText: WithOptions; configureSSOConnectionScopeBanner: WithOptions; configureSSOHeader: WithOptions; configureSSOHeaderBackButton: WithOptions; configureSSOMobileNavbar: WithOptions; configureSSOStepper: WithOptions; configureSSOStepperItem: WithOptions; configureSSOStepperItemBullet: WithOptions; configureSSOStepperItemLabel: WithOptions; configureSSOStepperSeparator: WithOptions; configureSSOStep: WithOptions; configureSSOStepHeader: WithOptions; configureSSOStepHeaderTitle: WithOptions; configureSSOStepHeaderDescription: WithOptions; configureSSOStepBody: WithOptions; configureSSOStepSection: WithOptions; configureSSOStepCounter: WithOptions; configureSSOFooter: WithOptions; configureSSOFooterPreviousButton: WithOptions; configureSSOFooterContinueButton: WithOptions; configureSSOFooterResetButton: WithOptions; configureSSOProviderGroup: WithOptions; configureSSOProviderGroupLabel: WithOptions; configureSSOProviderGrid: WithOptions; configureSSOProviderCard: WithOptions; configureSSOProviderCardRadio: WithOptions; configureSSOProviderCardIcon: WithOptions; configureSSOProviderCardLabel: WithOptions; configureSSOVerifyDomainErrorRoot: WithOptions; configureSSOVerifyDomainErrorIcon: WithOptions; configureSSOVerifyDomainErrorTitle: WithOptions; configureSSOVerifyDomainErrorSubtitle: WithOptions; configureSSOVerifyDomainList: WithOptions; configureSSOVerifyDomainSuggestion: WithOptions; configureSSOVerifyDomainCard: WithOptions<'verified' | 'unverified' | 'expired'>; configureSSOVerifyDomainCardBadge: WithOptions<'verified' | 'unverified' | 'expired' | 'claimed'>; configureSSOVerifyDomainCardCheckbox: WithOptions; configureSSOVerifyDomainCardRemoveButton: WithOptions; configureSSOVerifyDomainCardTxtRecord: WithOptions; configureSSOVerifyDomainCardTxtRecordValue: WithOptions; configureSSOVerifyDomainCardExpired: WithOptions; configureSSOEmailVerificationForm: WithOptions; configureSSOEmailVerificationIcon: WithOptions; configureSSOEmailVerificationTitle: WithOptions; configureSSOEmailVerificationSubtitle: WithOptions; configureSSOEmailVerificationInput: WithOptions; configureSSOEmailVerificationError: WithOptions; configureSSOInstructionsHeading: WithOptions; configureSSOInstructionsList: WithOptions; configureSSOInstructionsListItem: WithOptions; configureSSOAttributeMappingTable: WithOptions; configureSSOAttributeMappingBadge: WithOptions; configureSSOCertificateUploadButton: WithOptions; configureSSOCertificateFileBadge: WithOptions; configureSSOCertificateFileName: WithOptions; configureSSOCertificateRemoveButton: WithOptions; configureSSOTestUrlOpenButton: WithOptions; configureSSOTestRefreshButton: WithOptions; configureSSOTestResultsTable: WithOptions; configureSSOTestResultsRow: WithOptions; configureSSOTestResultsEmpty: WithOptions; configureSSOTestResultsLoadingSpinner: WithOptions; configureSSOTestRunStatusBadge: WithOptions; configureSSOTestRunFullMessage: WithOptions; configureSSOTestRunFullMessageCopyButton: WithOptions; configureSSOTestRunHowToFixSection: WithOptions; configureSSOTestRunHowToFixDocsLink: WithOptions; configureSSOTestRunParsedUserInfo: WithOptions; configureSSOTestError: WithOptions; configureSSOActivate: WithOptions; configureSSOActivateIcon: WithOptions; configureSSOActivateTitle: WithOptions; configureSSOActivateSubtitle: WithOptions; configureSSOActivateButton: WithOptions; configureSSOActivateSkipButton: WithOptions; configureSSOResetConnectionDialog: WithOptions; configureSSOResetConnectionDialogCancelButton: WithOptions; configureSSOResetConnectionDialogConfirmationInput: WithOptions; configureSSOResetConnectionDialogSubmitButton: WithOptions; configureSSOChangeProviderDialog: WithOptions; configureSSOChangeProviderDialogCancelButton: WithOptions; configureSSOChangeProviderDialogConfirmButton: WithOptions; configureSSORemoveDomainDialog: WithOptions; configureSSORemoveDomainDialogCancelButton: WithOptions; configureSSORemoveDomainDialogSubmitButton: WithOptions; configureDirectorySyncConnectionCard: WithOptions; configureDirectorySyncConnectionCardName: WithOptions; configureDirectorySyncConnectionCardDomains: WithOptions; configureDirectorySyncConnectionCardDomainBadge: WithOptions; configureDirectorySyncInstructionsToggle: WithOptions; configureDirectorySyncInstructionsList: WithOptions; configureDirectorySyncInstructionsListItem: WithOptions; configureDirectorySyncFieldLabel: WithOptions; configureDirectorySyncEndpointUrlInput: WithOptions; configureDirectorySyncTokenInput: WithOptions; configureDirectorySyncGenerateTokenButton: WithOptions; configureDirectorySyncTokenNotice: WithOptions; configureDirectorySyncRetryButton: WithOptions; configureDirectorySyncAttributeMappingTable: WithOptions; configureDirectorySyncAttributeMappingHeader: WithOptions; configureDirectorySyncAttributeMappingValue: WithOptions; configureDirectorySyncUsersList: WithOptions; configureDirectorySyncUsersRow: WithOptions; configureDirectorySyncUserIdentifier: WithOptions; configureDirectorySyncUserName: WithOptions; configureDirectorySyncUserTimestamp: WithOptions; configureDirectorySyncUserStatusBadge: WithOptions; configureDirectorySyncUsersEmpty: WithOptions; configureDirectorySyncCompleteButton: WithOptions; web3SolanaWalletButtonsRoot: WithOptions; web3SolanaWalletButtons: WithOptions; web3SolanaWalletButtonsIconButton: WithOptions; web3SolanaWalletButtonsBlockButton: WithOptions; web3SolanaWalletButtonsBlockButtonText: WithOptions; web3SolanaWalletButtonsWalletIcon: WithOptions; web3SolanaWalletButtonsWalletInitialIcon: WithOptions; walletIcon: WithOptions; walletInitialIcon: WithOptions; }; type Elements = { [k in keyof ElementsConfig]: Selectors & string, ElementsConfig[k]> }[keyof ElementsConfig]; type Variables = { /** * The primary color used throughout the components. Set this to your brand color. * * @default '#2F3037' */ colorPrimary?: CssColorOrScale; /** * The color of text appearing on top of an element that with a background color of {@link Variables.colorPrimary}, * eg: solid primary buttons. * * @default 'white' */ colorPrimaryForeground?: CssColor; /** * The color used to indicate errors or destructive actions. Set this to your brand's danger color. * * @default '#EF4444' */ colorDanger?: CssColorOrScale; /** * The color used to indicate an action that completed successfully or a positive result. * * @default '#22C543' */ colorSuccess?: CssColorOrScale; /** * The color used for potentially destructive actions or when the user's attention is required. * * @default '#F36B16' */ colorWarning?: CssColorOrScale; /** * The color that will be used as the neutral color for all the components. To achieve sufficient contrast, * light themes should be using dark shades ('black'), while dark themes should be using light shades ('white'). * This option applies to borders, backgrounds for hovered elements, hovered dropdown options etc. * * @default 'black' */ colorNeutral?: CssColorOrAlphaScale; /** * The default text color. * * @default 'inherit' */ colorForeground?: CssColor; /** * The background color for elements of lower importance, eg: a muted background. * his color is a lighter shade of {@link Variables.background} and {@link Variables.colorNeutral}. */ colorMuted?: CssColor; /** * The text color for elements of lower importance, eg: a subtitle text. * This color is a lighter shade of {@link Variables.colorForeground}. * * @default '#747686' */ colorMutedForeground?: CssColor; /** * The background color for the card container. * * @default 'white' */ colorBackground?: CssColor; /** * The default text color inside input elements. To customize the input background color instead, use {@link Variables.colorInput}. * * @default 'black' */ colorInputForeground?: CssColor; /** * The background color for all input elements. * * @default 'white' */ colorInput?: CssColor; /** * The color of the avatar shimmer * * @default 'rgba(255, 255, 255, 0.36)' */ colorShimmer?: CssColor; /** * The color of the ring when an interactive element is focused rendered at 15% opacity. * * @default {@link Variables.colorNeutral} at 15% opacity */ colorRing?: CssColor; /** * The base shadow color used in the components. * * @default '#000000' */ colorShadow?: CssColor; /** * The base border color used in the components. * * @default {@link Variables.colorNeutral} */ colorBorder?: CssColor; /** * The background color of the modal backdrop rendered at 73% opacity. * * @default {@link Variables.colorNeutral} at 73% opacity */ colorModalBackdrop?: CssColor; /** * The default font that will be used in all components. * This can be the name of a custom font loaded by your code or the name of a web-safe font ((@link WebSafeFont}) * If a specific fontFamily is not provided, the components will inherit the font of the parent element. * * @default 'inherit' * * @example * { fontFamily: 'Montserrat' } */ fontFamily?: FontFamily; /** * The default font that will be used in all buttons. See {@link Variables.fontFamily} for details. * If not provided, {@link Variables.fontFamily} will be used instead. * * @default 'inherit' */ fontFamilyButtons?: FontFamily; /** * The default monospace font that will be used for monospaced text (e.g. code, OTP inputs). * See {@link Variables.fontFamily} for details on accepted values. * * @default 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace' */ fontFamilyMono?: FontFamily; /** * The value will be used as the base `md` to calculate all the other scale values (`xs`, `sm`, `lg` and `xl`). * By default, this value is relative to the root fontSize of the html element. * * @default '0.8125rem' */ fontSize?: CssLengthUnit | FontSizeScale; /** * The font weight the components will use. By default, the components will use the 400, 500, 600 and 700 weights * for normal, medium, semibold and bold text respectively. * You can override the default weights by passing a {@link FontWeightScale} object * * @default { normal: 400, medium: 500, semibold: 600, bold: 700 }; */ fontWeight?: FontWeightScale; /** * The size that will be used as the `md` base borderRadius value. This is used as the base to calculate the `sm`, `lg`, `xl`, * our components use. As a general rule, the bigger an element is, the larger its borderRadius is going to be. * eg: the Card element uses 'xl' * * @default '0.375rem' */ borderRadius?: CssLengthUnit; /** * The base spacing that all margins, paddings and gaps between the elements are derived from. * * @default '1rem' */ spacing?: CssLengthUnit; }; type BaseThemeTaggedType = { __type: 'prebuilt_appearance'; }; type BaseTheme = (BaseThemeTaggedType | 'clerk' | 'simple') & { cssLayerName?: string; }; type Theme = { /** * A theme used as the base theme for the components. * For further customization, you can use the {@link Theme.options}, {@link Theme.variables} and {@link Theme.elements} props. * * Supports both object-based themes and string-based themes: * * @example * import { dark } from "@clerk/ui/themes"; * appearance={{ theme: dark }} * * @example * // Use string-based theme * appearance={{ theme: 'clerk' }} * appearance={{ theme: 'simple' }} */ theme?: BaseTheme | BaseTheme[]; /** * Configuration options that affect the layout of the components, allowing * customizations that hard to implement with just CSS. * Eg: placing the logo outside the card element */ options?: Options; /** * General theme overrides. This styles will be merged with our base theme. * Can override global styles like colors, fonts etc. * Eg: `colorPrimary: 'blue'` */ variables?: Variables; /** * Fine-grained theme overrides. Useful when you want to style * specific elements or elements that under a specific state. * Eg: `formButtonPrimary__loading: { backgroundColor: 'gray' }` */ elements?: Elements; /** * The appearance of the CAPTCHA widget. * This will be used to style the CAPTCHA widget. * Eg: `captcha: { theme: 'dark' }` */ captcha?: CaptchaAppearanceOptions; }; type Options = { /** * Controls whether the logo will be rendered inside or outside the component card. * To customise the logo further, you can use {@link Appearance.elements} * * @default inside */ logoPlacement?: 'inside' | 'outside' | 'none'; /** * The URL of your custom logo the components will display. * By default, the components will use the logo you've set in the Clerk Dashboard. * This option is helpful when you need to display different logos for different themes, * eg: white logo on dark themes, black logo on light themes * To customise the logo further, you can use {@link Appearance.elements} * * @default undefined */ logoImageUrl?: string; /** * Controls where the browser will redirect to after the user clicks the application logo, * usually found in the SignIn and SignUp components. * If a URL is provided, it will be used as the `href` of the link. * If a value is not passed in, the components will use the Home URL as set in the Clerk dashboard * * @default undefined */ logoLinkUrl?: string; /** * Controls the variant that will be used for the social buttons. * By default, the components will use block buttons if you have less than * 3 social providers enabled, otherwise icon buttons will be used. * To customise the social buttons further, you can use {@link Appearance.elements} * * @default auto */ socialButtonsVariant?: 'auto' | 'iconButton' | 'blockButton'; /** * Controls whether the social buttons will be rendered above or below the card form. * To customise the social button container further, you can use {@link Appearance.elements} * * @default 'top' */ socialButtonsPlacement?: 'top' | 'bottom'; /** * Controls whether the SignIn or SignUp forms will include optional fields. * You can make a field required or optional through the {@link https://dashboard.clerk.com|Clerk dashboard}. * * @default false */ showOptionalFields?: boolean; /** * This options enables the "Terms" link which is, by default, displayed on the bottom-right corner of the * prebuilt components. Clicking the link will open the passed URL in a new tab */ termsPageUrl?: string; /** * This options enables the "Help" link which is, by default, displayed on the bottom-right corner of the * prebuilt components. Clicking the link will open the passed URL in a new tab */ helpPageUrl?: string; /** * This options enables the "Privacy" link which is, by default, displayed on the bottom-right corner of the * prebuilt components. Clicking the link will open the passed URL in a new tab */ privacyPageUrl?: string; /** * This option enables the shimmer animation for the avatars of and * * @default true */ shimmer?: boolean; /** * This option enables/disables animations for the components. If you want to disable animations, you can set this to false. * Also the prefers-reduced-motion media query is respected and animations are disabled if the user has set it to reduce motion regardless of this option. * * @default true */ animations?: boolean; /** * This option disables development mode warning. * We don't recommend disabling this unless you want to see a preview of how the components will look in production. * * @default false */ unsafe_disableDevelopmentModeWarnings?: boolean; /** * Controls whether inputs will automatically receive focus when a component is mounted. * Set to false to prevent the components from auto-focusing any input fields. * * @default true */ autoFocus?: boolean; /** * Controls the visual elevation of card-based components. * * - `'raised'` (default) — the card renders with its border, box-shadow, border-radius, and padding. * - `'flush'` — removes the card border, box-shadow, border-radius, outer padding, and footer * background so the component sits flat against its container. * * Applies to all card-based components including ``, ``, * ``, ``, ``, * ``, ``, and session task components. * * Does **not** affect profile components (``, ``) * or popover components (``, ``), which always render as raised. * * When a component is opened as a modal, it always renders as raised regardless of this setting. * * @default 'raised' */ elevation?: 'raised' | 'flush'; }; type CaptchaAppearanceOptions = { /** * The widget theme. Can take the following values: light, dark, auto. * * @default 'auto' */ theme?: 'auto' | 'light' | 'dark'; /** * The widget size. Can take the following values: normal, flexible, compact. * * @default 'normal' */ size?: 'normal' | 'flexible' | 'compact'; /** * Language to display, must be either: auto (default) to use the language that the visitor has chosen, or an ISO 639-1 two-letter language code (e.g. en) or language and country code (e.g. en-US). * Refer to the list of supported languages for more information: https://developers.cloudflare.com/turnstile/reference/supported-languages */ language?: string; }; type SignInTheme = Theme; type SignUpTheme = Theme; type UserButtonTheme = Theme; type UserAvatarTheme = Theme; type UserProfileTheme = Theme; type OrganizationSwitcherTheme = Theme; type OrganizationListTheme = Theme; type OrganizationProfileTheme = Theme; type CreateOrganizationTheme = Theme; type UserVerificationTheme = Theme; type WaitlistTheme = Theme; type PricingTableTheme = Theme; type CheckoutTheme = Theme; type PlanDetailTheme = Theme; type SubscriptionDetailsTheme = Theme; type APIKeysTheme = Theme; type OAuthConsentTheme = Theme; type OAuthDeviceVerificationTheme = Theme; type TaskChooseOrganizationTheme = Theme; type GlobalAppearanceOptions = { /** * The name of the CSS layer for Clerk component styles. * This is useful for advanced CSS customization, allowing you to control the cascade and prevent style conflicts by isolating Clerk's styles within a specific layer. * For more information on CSS layers, see the [MDN documentation on @layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer). */ cssLayerName?: string; }; type Appearance = T & GlobalAppearanceOptions & { /** * Theme overrides that only apply to the `` component */ signIn?: T; /** * Theme overrides that only apply to the `` component */ signUp?: T; /** * Theme overrides that only apply to the `` component */ userAvatar?: T; /** * Theme overrides that only apply to the `` component */ userButton?: T; /** * Theme overrides that only apply to the `` component */ userProfile?: T; /** * Theme overrides that only apply to the `` component */ userVerification?: T; /** * Theme overrides that only apply to the `` component */ organizationSwitcher?: T; /** * Theme overrides that only apply to the `` component */ organizationList?: T; /** * Theme overrides that only apply to the `` component */ organizationProfile?: T; /** * Theme overrides that only apply to the `` component */ createOrganization?: T; /** * Theme overrides that only apply to the `` component */ oneTap?: T; /** * Theme overrides that only apply to the `` component */ waitlist?: T; /** * Theme overrides that only apply to the `` component */ pricingTable?: T; /** * Theme overrides that only apply to the `` component */ checkout?: T; /** * Theme overrides that only apply to the `` component */ apiKeys?: T; /** * Theme overrides that only apply to the `` component */ configureSSO?: T; /** * Theme overrides that only apply to the `` component */ configureDirectorySync?: T; /** * Theme overrides that only apply to the `` component */ __internal_oauthConsent?: T; /** * Theme overrides that only apply to the `` component */ oauthDeviceVerification?: T; /** * Theme overrides that only apply to the `` component */ taskChooseOrganization?: T; /** * Theme overrides that only apply to the `` component */ taskResetPassword?: T; /** * Theme overrides that only apply to the `` component */ enableOrganizations?: T; }; //#endregion export { APIKeysTheme, AlphaColorScale, Appearance, BaseTheme, CaptchaAppearanceOptions, CheckoutTheme, ColorScale, ColorScaleWithRequiredBase, CreateOrganizationTheme, CssColorOrAlphaScale, CssColorOrScale, ElementObjectKey, ElementState, Elements, ElementsConfig, FontFamily, IdSelectors, OAuthConsentTheme, OAuthDeviceVerificationTheme, Options, OrganizationListTheme, OrganizationProfileTheme, OrganizationSwitcherTheme, PlanDetailTheme, PricingTableTheme, SignInTheme, SignUpTheme, StateSelectors, SubscriptionDetailsTheme, TaskChooseOrganizationTheme, Theme, UserAvatarTheme, UserButtonTheme, UserProfileTheme, UserVerificationTheme, Variables, WaitlistTheme }; //# sourceMappingURL=appearance.d.ts.map