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 |
Tooltip Keys
| 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
Information
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 | Widget | 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 |