Stylesheet Keys

This page contains the resources for customizing each element of the widget. In order to do that, you need the correct stylesheet KEY with the corresponding DATA TYPE. Please note that some keys are uniquely used for certain widgets, check the WIDGET column if that is the case.

A quick reminder, to use the stylesheet, you must create your widget like this :

const payment = await manager.createWidget({
    interface: "PAYMENT",
        stylesheet:{
            overrides:{
              //You write here the key and the value you want for customize an element
              //For example : 
              "usp-modal-bg-color" : "red"
          }
        }
});

await payment.mount("widget-payment"); //Add the widget-payment to the DOM

warning

Concerning the PAN and Cryptogram fields, we are currently not able to modify their font directly. It is still possible but you will have to contact our integration team.

Stylesheet Keys

Payment methods Keys

KEYS	Description	Widget	Data Type	Example
usp-accordion-item-icon-order	Specifies the positioning of icons within the Accordion Item	PAYMENT	number	0
usp-amount-container-px-size	Sets the horizontal padding size for the Amount container widget	AMOUNT	length	1rem
usp-box-bg-color	Specifies the background color for various box elements or containers	PAYMENT	color	transparent
usp-box-border-radius	Controls the degree of rounding applied to the corners of payment widgets or other box-shaped elements.	PAYMENT	length	12px
usp-brand-icon-s-size	Specifies the size of small brand icons used within the UI.		length	20px
usp-brand-icon-size	Sets the size of brand icons displayed within the user interface.		length	30px
usp-card-border-color	The color of the payment methods cards	PAYMENT	color	#f1f1f1
usp-card-border-out-color	Defines the color of the outer border of Payment Methods, providing a visual distinction from the inner border.	PAYMENT	color	#6e6e6e
usp-card-border-width	The width size of the border of the Payment Methods	PAYMENT	length	1px
usp-card-height	Sets the height of the Payment Methods	PAYMENT	length	180px
usp-card-hover-text-color	Specifies the text color of the Payment Methods when hovered over by the cursor.	PAYMENT	color	#f1f1f1
usp-card-line-half-height	Sets the height of a line dividing the Payment Methods into two sections.		length	calc(180px / 2)
usp-card-line-third-height	Sets the height of a line dividing the Payment Methods into three sections.		length	calc(180px / 3)
usp-card-text-color	Defines the default text color used within Payment Methods.	PAYMENT	color	#ffffff
usp-card-width	Sets the width of Payment Methods	PAYMENT	length	350px
usp-credit-card-form-v-spacing	Determines the vertical spacing between elements within a credit card form.	FORM	length	1rem
usp-input-group-label-color	Change the color of the credit card vault labels	PAYMENT	color	#ffffff
usp-input-group-label-size	Change the size of the credit card vault labels	PAYMENT	length	40px
usp-icon-s-size	Sets the size of small icons.		length	40px
usp-icon-size	Sets the default size of icons.		length	50px
usp-item-accordion-size	Size of the payment methods if the ACCORDION layout is used	PAYMENT	length	69px
usp-item-align-items	align-items css properties passed to item headers		center, flex-start, flex-end	center
usp-item-broken-bg-color	Specifies the background color of items that are broken or invalid.		color	#f1f1f1
usp-item-card-border-color	Defines the color of the border surrounding item cards.	PAYMENT	color
usp-item-card-border-out-color	Defines the color of the outer border surrounding item cards.	PAYMENT	color
usp-item-card-border-width	The size of the border of the payment methods	PAYMENT	length
usp-item-card-height	The width size of the payment methods	PAYMENT	length
usp-item-card-hover-text-color	Specifies the text color of item cards when hovered over.	PAYMENT	color
usp-item-card-line-half-height	Sets the height of a line dividing item cards into two sections.		length
usp-item-card-line-third-height	Sets the height of a line dividing item cards into three sections.		length
usp-item-card-text-color	Specifies the text color used within the Payment Methods	PAYMENT	color
usp-item-card-width	Sets the width of the Payment Methods	PAYMENT	length
usp-item-checkbox-visibility	Controls the visibility of checkboxes associated with items.	FORM	bool	TRUE
usp-item-default-bg-color	The default background color of the Payment Method	PAYMENT	color	#FFFFFF
usp-item-default-border-color	Specifies the default border color of the Payment Method	PAYMENT	color	#f1f1f1
usp-item-default-text-color	Specifies the color of text within default Payment Methods.	PAYMENT	color	#434748
usp-item-flex	`flex-direction` css properties passed to item headers		row, column,row-reverse, column-reverse	row
usp-item-hovered-bg-color	Specifies the background color of items when hovered over.	PAYMENT	color	#f1f1f1
usp-item-hovered-border-color	Sets the border color of a payment method when hovered over.	PAYMENT	color	#f1f1f1
usp-item-hovered-text-color	Sets the text color of a payment method when hovered over.	PAYMENT	color	#434748
usp-item-icon-visibility	Controls the visibility of icons associated with items.		boolean	TRUE
usp-item-selected-bg-color	Specifies the background color of selected items.		color	#f9f9f9
usp-item-selected-border-color	Defines the border color of selected items.		color	#f1f1f1
usp-item-selected-text-color	Specifies the color of text within selected items.		color	#434748
usp-item-shadow	Controls the shadow effect applied to items.		shadow css string	0 0px 0px #00000000
usp-item-title-font	Specifies the font used for Payment Methods titles.	PAYMENT	font
usp-item-title-text-transform	Specifies the css `text-transform` property used for Payment Methods titles.	PAYMENT	all values for CSS `text-transform`	capitalize
usp-item-content-text-size	The font-size of the pre/post accordion content text.	PAYMENT	length
usp-item-content-text-color	The color of the pre/post accordion content text.	PAYMENT	color
usp-item-content-text-font-weight	The font-weight of the pre/post accordion content text.	PAYMENT	length
usp-item-content-v-spacing	The vertical spacing around the pre/post accordion content text.	PAYMENT	length
usp-item-default-bg-color	Specifies the default background color of items.	PAYMENT	color	#FFFFFF
usp-item-default-border-color	Specifies the default border color of the payment methods	PAYMENT	color	#f1f1f1
usp-item-default-text-color	Specifies the color of text within default the payment methods	PAYMENT	color	#434748
usp-item-content-gap	The spacing between method icon and text.	PAYMENT	length	2rem
usp-item-inner-content-gap	The spacing between radio button and method icon.	PAYMENT	length	2rem
usp-list-item-spacing	The spacing between list item.	PAYMENT	length	2rem
usp-item-content-text-transform	Specifies the text transform.	PAYMENT	string	uppercase
usp-item-disabled-subtext-color	Modify the color of the warning message for minimum amount to order		string	#ffffff
usp-primary-color	Controls the color of the primary payment methods	PAYMENT	color	#1C1C1C
usp-secondary-color	Controls the color of the secondary payment methods	PAYMENT	color	#6e6e6e
usp-success-color	Defines the color used to indicate success or positive feedback.		color	#00661d
usp-text-font	Specifies the font used for text elements.		text	inherit
usp-warning-color	Defines the color used to indicate warnings or cautionary messages.		color	#EFB638

Token system Keys

KEYS	Description	Widget	Data Type	Example
usp-add-token-button-align	Add token button horizontal alignment. Any valid CSS `justify-content` value	PAYMENT	flex-start, flex-end, center	start
usp-token-inline-bg-color	Specifies the background color of inline tokens.	PAYMENT	color	transparent
usp-token-inline-border-color	Specifies the border color of inline tokens.	PAYMENT	color	transparent
usp-token-inline-border-radius	Sets the curvature of the corners of inline tokens.	PAYMENT	length	0
usp-token-inline-border-width	Sets the thickness of the border surrounding inline tokens.	PAYMENT	length	0
usp-token-inline-content-spacing	The vertical spacing between token content	PAYMENT	length	0.5rem
usp-token-inline-hovered-bg-color	Specifies the background color of inline tokens when hovered over.	PAYMENT	color	transparent
usp-token-inline-hovered-border-color	Specifies the border color of inline tokens when hovered over.	PAYMENT	color	#FFFFFF
usp-token-inline-hovered-border-radius	Sets the curvature of the corners of inline tokens when hovered over.	PAYMENT	length	0
usp-token-inline-hovered-border-width	Sets the thickness of the border surrounding inline tokens when hovered over.	PAYMENT	length	0
usp-token-inline-hovered-secondary-text-color	Specifies the color of secondary text within inline tokens when hovered over.	PAYMENT	color	#6e6e6e
usp-token-inline-hovered-text-color	Specifies the text color of inline tokens when hovered over.	PAYMENT	color	#000000
usp-token-inline-name-color	The color of the token name	PAYMENT	color	#1C1C1C
usp-token-inline-name-font-size	The font size of the token name	PAYMENT	length	1rem
usp-token-inline-name-font-weight	The font weight of the token name	PAYMENT	number	normal
usp-token-inline-padding	The padding of the token	PAYMENT	length	0.5rem
usp-token-inline-selected-bg-color	The background color of the selected token	PAYMENT	color	transparent
usp-token-inline-selected-border-color	The border color of the selected token	PAYMENT	color	#FFFFFF
usp-token-inline-selected-border-radius	The border radius of the selected token	PAYMENT	length	0
usp-token-inline-selected-border-width	The border width of the selected token	PAYMENT	length	0
usp-token-inline-selected-secondary-text-color	The secondary text color of the selected token	PAYMENT	color	#6e6e6e
usp-token-inline-selected-text-color	The text color of the selected token	PAYMENT	color	#000000
usp-token-inline-secondary-text-color	Specifies the color of secondary text within inline tokens.	PAYMENT	color	#6e6e6e
usp-token-inline-secondary-text-font-weight	Specifies the font-weight of secondary text within inline tokens.	PAYMENT	CSS font-weight value	bold
usp-token-inline-spacing	The horizontal spacing between tokens	PAYMENT	length	0.5rem
usp-token-inline-text-color	The global text color of the token component.	PAYMENT	color	#000000
usp-token-inline-font-size	The global font-size of the token component.	PAYMENT	length	1rem
usp-token-inline-width	The width of the token component (vertical mode only)	PAYMENT	length	320px
usp-save-token-border-width	Sets the border width for the save token button	TOKEN	length	"2px"
usp-save-token-border-radius	Sets the border radius for the save token button	TOKEN	length	"0%"
usp-save-token-padding	Sets the padding for the save token button	TOKEN	length	"0"
usp-secondary-token-actions-align	The position of the action buttons in a secondary token (vertical mode only)	PAYMENT	CSS justify-content value	flex-end
usp-token-inline-cvv-border-color	The border color of the token cvv input.	PAYMENT	color	#000000
usp-token-inline-cvv-border-radius	The border radius of the cvv token input	PAYMENT	length	1rem
usp-token-inline-cvv-border-width	The width of the border token cvv input	PAYMENT	length	1rem
usp-token-inline-margin-x	The margin x of the token component	PAYMENT	length	1rem

PayButton Keys

KEYS	Description	Widget	Data Type	Example
usp-pay-button-icon-size	Specifies the size of an icon within a payment button.	PAY-BUTTON	length	2rem
usp-pay-button-icon-visibility	Whether or not the method icon should be displayed.	PAY-BUTTON	boolean	TRUE
usp-pay-button-max-width	Sets the max width of a payment button.	PAY-BUTTON	length	750px
usp-pay-button-min-height	Sets the min height of a payment button.	PAY-BUTTON	length	60px
usp-pay-button-bg-color	Sets the text color of a payment button.	PAY-BUTTON	color	#FFFFFF
usp-pay-button-text-color	Sets the background color of a payment button.	PAY-BUTTON	color	lightblue
usp-pay-button-padding	Sets the padding of a payment button.	PAY-BUTTON	length	4px
usp-pay-button-border-width	Sets the border width of a payment button.	PAY-BUTTON	length	4px
usp-pay-button-border-color	Sets the border color of a payment button.	PAY-BUTTON	color	#FFFFFF
usp-pay-button-border-radius	Sets the border radius of a payment button.	PAY-BUTTON	length	0.5em
usp-pay-button-disabled-text-color	Sets the text color of a disabled payment button.	PAY-BUTTON	color	#FFFFFF
usp-pay-button-disabled-bg-color	Sets the background color of a disabled payment button.	PAY-BUTTON	color	lightblue
usp-pay-button-disabled-padding	Sets the padding of a disabled payment button.	PAY-BUTTON	length	4px
usp-pay-button-disabled-border-width	Sets the border width of a disabled payment button.	PAY-BUTTON	length	4px
usp-pay-button-disabled-border-color	Sets the border color of a disabled payment button.	PAY-BUTTON	color	#FFFFFF
usp-pay-button-disabled-border-radius	Sets the border radius of a disabled payment button.	PAY-BUTTON	length	0.5em
usp-pay-button-hovered-bg-color	Sets the text color of a hovered payment button.	PAY-BUTTON	color	#FFFFFF
usp-pay-button-hovered-text-color	Sets the background color of a hovered payment button.	PAY-BUTTON	color	lightblue
usp-pay-button-hovered-padding	Sets the padding of a hovered payment button.	PAY-BUTTON	length	4px
usp-pay-button-hovered-border-width	Sets the border width of a hovered payment button.	PAY-BUTTON	length	4px
usp-pay-button-hovered-border-color	Sets the border color of a hovered payment button.	PAY-BUTTON	color	#FFFFFF
usp-pay-button-hovered-border-radius	Sets the border radius of a hovered payment button.	PAY-BUTTON	length	0.5em
usp-x-pay-buttons-bg-color	Background color for interface	X_PAY_BUTTONS	color	transparent
usp-x-pay-buttons-border-color	Interface border color	X_PAY_BUTTONS	length	#f1f1f1
usp-x-pay-buttons-border-size	Interface border width	X_PAY_BUTTONS	color	0px
usp-x-pay-buttons-text-color	Text color if any	X_PAY_BUTTONS	length	#1C1C1C
usp-x-pay-buttons-container-padding	Padding around the X-Pay-Buttons interface container	X_PAY_BUTTONS	length	0px

Radio/Toggle/Checkboxes buttons or Overlay effects Keys

KEYS	Description	Widget	Data Type	Example
usp-alert-border-width	Defines the border size for the content of the Alert Component		border	2px 2px 2px 8px
usp-alert-border-radius	Defines the border radius for the Alert Component		number	4px
usp-alert-padding	Defines the padding size for the content of the Alert Component		number	8px
usp-button-bg-color	Defines the background color of buttons throughout the UI.		color	#f1f1f1
usp-button-bg-color	Defines the background color of buttons throughout the UI.		color	#f1f1f1
usp-button-border-color	Specifies the border color of buttons.		color	transparent
usp-button-border-radius	Determines the curvature of the button's corners.		length	6px
usp-button-border-width	Sets the thickness of the button's border.		length	0
usp-button-disabled-bg-color	Defines the background color of disabled buttons.		color	#F5F5F5
usp-button-disabled-text-color	Specifies the text color of disabled buttons.		color	#6e6e6e
usp-button-font-weight	Specifies the font weight of text within buttons.		number	400
usp-button-hovered-bg-color	Defines the background color of buttons when hovered over by the cursor.		color	#5e5e5e
usp-button-hovered-border-color	Specifies the border color of buttons when hovered over.		color	transparent
usp-button-hovered-border-width	Sets the thickness of the button's border when hovered over.		length	0
usp-button-hovered-text-color	Specifies the text color of buttons when hovered over.		color	#FAFAFA
usp-button-margin	Controls the margin space around buttons.		length	0
usp-button-padding	Specifies the internal padding within buttons.		length	0.5rem 1rem
usp-button-text-color	Defines the color of text within buttons.		color	#292929
usp-button-width	Sets the width of buttons.		length	auto
usp-checkbox-bg-color	The color of the checkbox for saving the card	FORM	color	#cfcfcf
usp-checkbox-border-radius	Sets the curvature of the corners of checkbox elements.	FORM	length	0,5
usp-checkbox-selected-bg-color	The color of the checkbox after selection	FORM	color	#07a434
usp-checkbox-size	Controls the size of `save card` checkbox	FORM	color	12px
usp-opacity-disabled	Specifies the opacity level for disabled elements.		number	.30
usp-opacity-widget-disabled	Specifies the opacity level for disabled widgets.		number	.30
usp-overlay-bg-color	Specifies the background color of overlays.		color	rgba(255255255.8)
usp-overlay-paragraph-color	Specifies the color of paragraphs within overlays.		color	#707070
usp-overlay-text-color	Defines the text color used within overlays.		color	#292929
usp-overlay-title-color	Specifies the color of titles within overlays.		color	#262626
usp-overlay-width	Specifies the width of overlays.		length	10px
usp-overlay-height	Specifies the height of overlays.		length	10px
usp-overlay-position	Specifies the position of overlays.		string	absolute
usp-pay-button-use-partner-ui	Specifies whether to use the partner's UI for payment buttons.		boolean	FALSE
usp-radio-bg-color	Specifies the background color of radio buttons.		color	#cfcfcf
usp-radio-border-radius	Sets the curvature of the corners of radio buttons.		length	50%
usp-radio-selected-bg-color	Specifies the background color of selected radio buttons.		color	#07a434
usp-radio-focus-bg-color	Specifies the background color of focus radio buttons.		color	#07a434
usp-radio-size	Sets the size of radio buttons.		length	12px
usp-radio-border-width	Sets the border width of radio buttons.		length	1px
usp-radio-inner-border-width	Sets the border padding of radio buttons.		length	1px
usp-radio-border-width-selected	Sets the border width of selected radio buttons.		length	2px
usp-radio-inner-border-width-selected	Sets the border padding of selected radio buttons.		length	2px
usp-radio-inner-border-width-focus	Sets the border padding of focus radio buttons.		length	2px
usp-radio-border-style	Sets the border style of radio buttons.		string	dotted
usp-radio-border-style-selected	Sets the border style of selected radio buttons.		string	dashed
usp-radio-border-style-focus	Sets the border style of focus radio buttons.		string	dashed
usp-radio-border-color	Specifies the border color of radio buttons.		color	#9E1027
usp-radio-border-color-selected	Specifies the border color of selected radio buttons.		color	#27AE60
usp-radio-border-color-focus	Specifies the border color of focus radio buttons.		color	#27AE60
usp-radio-inner-border-color	Specifies the padding color of border radio buttons.		color	#9E1027
usp-radio-inner-border-color-selected	Specifies the padding color of border selected radio buttons.		color	#27AE60
usp-radio-inner-border-color-focus	Specifies the padding color of border selected radio buttons.		color	#27AE60
usp-radio-shadow	Sets the shadow of radio buttons.		shadow	10px 5px 5px red
usp-radio-shadow-selected	Sets the shadow of selected radio buttons.		shadow	10px 5px 5px blue
usp-radio-shadow-focus	Sets the shadow of focus radio buttons.		shadow	10px 5px 5px pink
usp-text-font	Specifies the font used for text elements.		text	inherit
usp-toggle-bg-color	Specifies the background color of toggle switches.		color	#cfcfcf
usp-toggle-border-radius	Sets the curvature of the corners of toggle switches.		length	0,5
usp-toggle-selected-bg-color	Specifies the background color of selected toggle switches.		color	#27AE60
usp-toggle-thumb-bg-color	Specifies the background color of the thumb (slider) of toggle switches.		color	#FFFFFF
usp-toggle-size	Sets the size of toggle switches.		length	12px

Loader elements Keys

KEYS	Description	Widget	Data Type	Example
usp-loader-color	Change the color of the loading animation of the form widget	PAYMENT/FORM	color	#1C1C1C
usp-loader-l-size	Change the size of the loading animation	PAYMENT/FORM	length	75px
usp-loader-size	Determines the size or dimensions of the loading animation.	PAYMENT/FORM	length	55px

Input fields Keys

KEYS	Description	Widget	Data Type	Example
usp-input-width	Specifies the width of the input field	FORM	length	"300px"
usp-input-bg-color	Defines the background color of an input field in the form widget.	FORM	color	#FFFFFF
usp-input-border-color	Specifies the border color of an input field in the form widget.	FORM	color	#ACACAC
usp-input-border-radius	Sets the border radius or rounded corners of an input field.	FORM	length	4px
usp-input-border-width	Specifies the border width of an input field.	FORM	length	1px
usp-input-focused-border-color	Sets the border color of an input field when it is focused and clicked.	FORM	color	#7A7A7A
usp-input-height	Defines the height of an input field.	FORM	length	2.6rem
usp-input-l-width	Sets the width of the input to large	FORM	length	500px
usp-input-m-width	Sets the width of the input to medium	FORM	length	290px
usp-input-s-width	Sets the width of the input to small	FORM	length	110px
usp-input-xs-width	Sets the width of the input to extra small	FORM	length	90px
usp-input-placeholder-color	The color of the placeholder texts in the input elements.	FORM	color	#ACACAC
usp-input-text-color	Specifies the color of text entered into input fields.		color	#000000

KEYS	Description	Widget	Data Type	Example
usp-tooltip-hidden	Determines the visibility or display of tooltips in the form widget.		boolean	TRUE
usp-tooltip-icon-s-size	Specifies the size of a small icon within a tooltip.	FORM	length	16px
usp-tooltip-icon-size	Determines the size of an icon within a tooltip.	FORM	length	20px
usp-tooltip-is-modal	Specifies whether a tooltip is displayed as a modal or popup.	FORM	boolean	TRUE
usp-tooltip-max-width	Sets the maximum width of a tooltip.	FORM	length	200px
usp-tooltip-min-width	Sets the minimum width of a tooltip.	FORM	length	350px

Modals Keys

warning

In order to fully customize the modal, you should use the advanced modal style. To do this, simply add this line to your layout :

{
    layout: {
        modalStyle: 'advanced'
    }
}

KEYS	Description	Widget	Data Type	Example
usp-modal-bg-color	Sets the background color of the modal	MODAL	color	"#EFEFEF"
usp-modal-button-primary-bg-color	Defines the background color for the primary button	BUTTON	color	"#1F2933"
usp-modal-button-primary-border-color	Sets the border color for the primary button	BUTTON	color	"transparent"
usp-modal-button-primary-border-width	Specifies the border width for the primary button	BUTTON	length	"2px"
usp-modal-button-primary-font-weight	Defines the font weight for the primary button	BUTTON	weight	"normal"
usp-modal-button-primary-hover-bg-color	Specifies the background color for the primary button on hover	BUTTON	color	"#3E4C59"
usp-modal-button-primary-hover-border-color	Sets the border color for the primary button on hover	BUTTON	color	"#9AA5B1"
usp-modal-button-primary-hover-border-width	Specifies the border width for the primary button on hover	BUTTON	length	"2px"
usp-modal-button-primary-hover-font-weight	Defines the font weight for the primary button on hover	BUTTON	weight	"normal"
usp-modal-button-primary-hover-text-color	Sets the text color for the primary button on hover	BUTTON	color	"#F5F7FA"
usp-modal-button-primary-text-color	Sets the text color for the primary button	BUTTON	color	"#F5F7FA"
usp-modal-button-secondary-bg-color	Defines the background color for the secondary button	BUTTON	color	"#F5F7FA"
usp-modal-button-secondary-border-color	Sets the border color for the secondary button	BUTTON	color	"transparent"
usp-modal-button-secondary-border-width	Specifies the border width for the secondary button	BUTTON	length	"2px"
usp-modal-button-secondary-font-weight	Defines the font weight for the secondary button	BUTTON	weight	"normal"
usp-modal-button-secondary-hover-bg-color	Specifies the background color for the secondary button on hover	BUTTON	color	"#E4E7EB"
usp-modal-button-secondary-hover-border-color	Sets the border color for the secondary button on hover	BUTTON	color	"#9AA5B1"
usp-modal-button-secondary-hover-border-width	Specifies the border width for the secondary button on hover	BUTTON	length	"2px"
usp-modal-button-secondary-hover-text-color	Sets the text color for the secondary button on hover	BUTTON	color	"#3E4C59"
usp-modal-button-secondary-text-color	Sets the text color for the secondary button	BUTTON	color	"#3E4C59"
usp-modal-close-right-position	Positions the close button from the right	MODAL	length	"0.5rem"
usp-modal-close-top-position	Positions the close button from the top	MODAL	length	"1rem"
usp-modal-content-padding	Sets the padding for the modal content	MODAL	length	"0"
usp-modal-footer-align	Defines the alignment of the modal footer content	MODAL	alignment	"center"
usp-modal-footer-bg-color	Sets the background color of the modal footer	MODAL	color	"transparent"
usp-modal-footer-padding	Specifies the padding inside the modal footer	MODAL	length	"1rem"
usp-modal-header-bg-color	Specifies the background color of the modal header	MODAL	color	"white"
usp-modal-header-border-radius	Specifies the border radius for the modal header	MODAL	border	"0 0 8px 8px"
usp-modal-header-font-size	Defines the font size for the modal header text	MODAL	length	"20px"
usp-modal-header-font-weight	Specifies the font weight for the modal header text	MODAL	weight	"500"
usp-modal-header-padding	Sets the padding inside the modal header	MODAL	length	"1rem"
usp-modal-header-shadow	Adds a shadow effect to the modal header	MODAL	shadow	"0 2px 4px 0 rgba(0, 0, 0, 0.1)"
usp-modal-overlay-bg-color	Specifies the background color of the modal overlay	MODAL	color	"rgba(0, 0, 0, 0.75)"
usp-modal-overlay-paragraph-color	Specifies the color of the paragraph of the modal overlay	MODAL	color	"rgba(0, 0, 0, 0.75)"
usp-modal-padding	Specifies the padding inside the modal	MODAL	length	"1rem"
usp-modal-text-color	Defines the text color used within modal windows	MODAL	color	"#000000"
usp-wallet-deletion-modal-hide-token	Specifies whether the deletion modal hides tokens	MODAL	boolean	TRUE

Icons Keys

KEYS	Description	Widget	Data Type	Example
usp-icon-actions-align	The alignment of the action icons container		flex-start, flex-end, center	flex-start
usp-icon-actions-gap	The spacing between the action icons		number	0.5rem
usp-icon-actions-icon-size	The size of a action icon		length	20px
usp-icon-actions-width	The width of the action icons container		length	90px
usp-icon-s-size	Defines the size of small icons	MODAL	length	"24px"

Other elements Keys

KEYS	Description	Data Type	Example
usp-accent-color	The primary color used to highlight or emphasize certain elements throughout the user interface.	color	#1C1C1C
usp-accent-contrast-color	A contrasting color to the primary accent color, often used for text or icons to ensure readability and visual appeal.	color	#FFFFFF
usp-debugger-height	Sets the height of the debugger tool, often used for troubleshooting or testing purposes.	length	190px
usp-debugger-width	Sets the width of the debugger tool.	length	560px
usp-error-color	Defines the color used to indicate errors or invalid input.	color	#9E1027
usp-favorite-color	Specifies the color used to indicate favorite or preferred items or options.	color	#D4CE21
usp-header-bg-color	Sets the background color of header elements within the UI.	color	#1C1C1C
usp-header-text-color	Defines the text color used within header elements.	color	#f1f1f1
usp-item-broken-bg-color	Specifies the background color of items that are broken or invalid.	color	#f1f1f1
usp-text-font-weight	Specifies the font weight of text elements.	number	400
usp-text-l-size	Sets the large size of text elements.	length	1.1rem
usp-text-s-size	Sets the small size of text elements.	length	0.8rem
usp-text-selected-font-weight	Specifies the font weight of selected text elements.	number	400
usp-text-size	Sets the default size of text elements. (Careful, on IOS, if < 16px, you should add <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> on your html page in order to avoid unwanted behavior)	length	1rem
usp-text-xl-size	Sets the extra-large size of text elements.	length	1.3rem
usp-text-xs-size	Sets the extra-small size of text elements.	length	0.7rem
usp-title-font	Specifies the font used for titles.	font	inherit
usp-title-font-weight	Specifies the font weight of titles.	number	400
usp-toggle-disabled-bg-color	Defines the background color of disabled toggle switches.	color	#EBEBEB
usp-token-inline-actions-width	Specifies the width of inline actions associated with tokens.	length	90px
usp-token-inline-selected-secondary-text-colo	Specifies the color of secondary text within selected inline tokens.	color
usp-token-inline-text-color	Specifies the text color of inline tokens.	boolean	#000000
usp-z-absolute-top	Specifies the Z-index for elements positioned at the topmost layer.	number	901

Stylesheet Keys​

Payment methods Keys​

Token system Keys​

PayButton Keys​

Radio/Toggle/Checkboxes buttons or Overlay effects Keys​

Loader elements Keys​

Input fields Keys​

Tooltip Keys​

Modals Keys​

Icons Keys​

Other elements Keys​

Stylesheet Keys

Payment methods Keys

Token system Keys

PayButton Keys

Radio/Toggle/Checkboxes buttons or Overlay effects Keys

Loader elements Keys

Input fields Keys

Tooltip Keys

Modals Keys

Icons Keys

Other elements Keys