--adyen-sdk-color-label-primary | #00112c | - Label color inside payment forms, such as form instruction, form field labels and contextual / helper texts. - Fieldset title color - Input field text color - Drop-in payment method header, order payment method header, default status text color. - Bacs Edit button text color - Introduction text color for Bank Transfer, Vouchers, Blik - Donation status text color, campaign background color - UPI, ANCV, Blik, MBWay await container text color - Secondary, ghost buttons text color - (Consent) checkbox label color |
--adyen-sdk-color-label-secondary | #5c687c | - Label color for the additional information in the drop-in payment method header. - Disclaimer label color. - QR count down label color. - Readonly select and input color. |
--adyen-sdk-color-label-tertiary | #8d95a3 | - Label color for the click to pay labels. |
--adyen-sdk-color-label-disabled | #8d95a3 | - Label color for the disabled Click to Pay logout button. - Disabled segment. - Background color for the payment button in the loading state. |
--adyen-sdk-color-label-critical | #e22d2d | - Border color for the error input fields and error validation message. |
--adyen-sdk-color-label-highlight | #0070f5 | - Link button color. |
--adyen-sdk-color-label-on-color | #ffffff | - Button text color. - Donation campaign description text color. - Checkbox check color. |
--adyen-sdk-color-background-primary | #ffffff | - Background color for the Secondary pay button. - Background color for payment form elements: input element, radio, select, checkbox. - Background color for drop-in unselected payment items. |
--adyen-sdk-color-background-secondary | #f7f7f8 | - Background color for drop-in selected payment method item. - Background color for selected button inside button group (used in the Donation component). |
--adyen-sdk-color-background-secondary-hover | #eeeff1 | - Background color for ghost button hover. |
--adyen-sdk-color-background-secondary-active | #e3e5e9 | - Background color for ghost button active. |
--adyen-sdk-color-background-tertiary | #eeeff1 | - Background color for segmented control used by the UPI. |
--adyen-sdk-color-background-disabled | #eeeff1 | - Background color for disabled form elements. |
--adyen-sdk-color-background-critical-strong | #e22d2d | - Background color for drop-in remove stored payment methods confirmation button. |
--adyen-sdk-color-background-inverse-primary-hover | #5c687c | - Background color for hovering on payment button. |
--adyen-sdk-color-background-always-dark | #00112c | - Background color for the primary payment button. |
--adyen-sdk-color-background-always-dark-active | #8d95a3 | - Background color for the active and hovered primary payment button. |
--adyen-sdk-color-background-critical-strong | #e22d2d | - Drop-in remove stored card confirmation, button background color - Gift card alert background color |
--adyen-sdk-color-outline-primary | #dbdee2 | - Drop-in payment method list item unselected border color. - Highlighted issuers button box shadow color. - Payment form elements (including checkbox and radio) border color. |
--adyen-sdk-color-outline-primary-hover | #c9cdd3 | - Drop-in payment method list item hover and unselected box-shadow color. - Radio and checkbox hover not focused box-shadow color. |
--adyen-sdk-color-outline-primary-active | #00112c | - Form input elements focused box-shadow and border color. |
--adyen-sdk-color-outline-secondary | #c9cdd3 | - Drop-in selected payment item border color. - Drop-in default status container border color. - UPI, ANCV, Blik, MBWay await container border color. - QR code container border color. |
--adyen-sdk-color-outline-tertiary | #8d95a3 | - Drop-in order payment border color, surcharge text color - Gif card balance text color - UPI, ANCV, Blik, MBWay await count down text color - Radio, checkbox hover box-shadow color - Pay / regular button focus box-shadow color - Content separator color |
--adyen-sdk-color-outline-disabled | #dbdee2 | - Secondary button disabled border color |
--adyen-sdk-color-outline-critical | #e22d2d | - Drop down invalid button border color |
--adyen-sdk-color-separator-primary | #dbdee2 | - Input, select, checkbox and radio form fields invalid border color |
--adyen-sdk-text-caption-line-height | 18px | - Various places that are not body / subtitle / title |
--adyen-sdk-text-caption-font-size | 12px | - Gift card alert message font size - Drop-in payment method list item additional information text font size - Disclaimer message text font size - Form field instruction, contextual, error text font size |
--adyen-sdk-text-body-font-size | 14px | - Various places that are not title / sub title / caption |
--adyen-sdk-text-body-line-height | 20px | - Radio text line height - Payme instruction line height - Click to pay otp checkbox info line height - Form field label line height |
--adyen-sdk-text-body-font-weight | 400 | - Stored card expiry date input text font weight |
--adyen-sdk-text-body-stronger-font-weight | 500 | - Selected issuer button text font weight - Drop-in payment method list item title font weight - Drop-in order header and deducted amount font weight - Trustly description font weight - Pay button text font weight - UPI segmented control text font weight |
--adyen-sdk-text-subtitle-font-size | 16px | - Blik helper font size - Trustly description header - UPI, ANCV, Blik, MBWay await subtitle and indicator font size - QR subtitle and indicator font size - Input, drop down input fields text font size - Voucher amount font size |
--adyen-sdk-text-subtitle-font-weight | 500 | - Field set title font weight |
--adyen-sdk-text-subtitle-stronger-font-weight | 600 | - Drop-in payment method list label font weight |
--adyen-sdk-text-subtitle-line-height | 26px | - Drop-in payment method list label line height - Field set title line height |
--adyen-sdk-text-title-font-size | 16px | - Drop-in default final statuses font size - Drop-in order header font size - Drop-in payment method list item title font size - Pay button text font size - Directdebit_GB voucher result introduction font size - Donation campaign title font size |
--adyen-sdk-text-title-font-weight | 600 | - Click to pay header title font weight |
--adyen-sdk-text-title-line-height | 26px | - Stored card expiry date input text line height |
--adyen-sdk-text-title-l-font-size | 24px | - Voucher reference text font-size |
--adyen-sdk-spacer-100 | 32px | Various places for dimensions |
--adyen-sdk-spacer-110 | 40px | Various places for dimensions |
--adyen-sdk-spacer-120 | 48px | Various places for dimensions |
--adyen-sdk-spacer-130 | 56px | Various places for dimensions |
--adyen-sdk-spacer-140 | 64px | Various places for dimensions |
--adyen-sdk-spacer-000 | 0px | Various places for dimensions |
--adyen-sdk-spacer-010 | 2px | Various places for dimensions |
--adyen-sdk-spacer-020 | 4px | Various places for dimensions |
--adyen-sdk-spacer-030 | 6px | Various places for dimensions |
--adyen-sdk-spacer-040 | 8px | Various places for dimensions |
--adyen-sdk-spacer-050 | 10px | Various places for dimensions |
--adyen-sdk-spacer-060 | 12px | Various places for dimensions |
--adyen-sdk-spacer-070 | 16px | Various places for dimensions |
--adyen-sdk-spacer-080 | 20px | Various places for dimensions |
--adyen-sdk-spacer-090 | 24px | Various places for dimensions |
--adyen-sdk-border-radius-xs | 2px | Various places for border radius |
--adyen-sdk-border-radius-s | 4px | Various places for border radius |
--adyen-sdk-border-radius-m | 8px | Various places for border radius |
--adyen-sdk-border-radius-l | 12px | Various places for border radius |
--adyen-sdk-border-radius-xl | 24px | Various places for border radius |
--adyen-sdk-border-width-s | 1px | Various places for border radius |
--adyen-sdk-border-width-m | 2px | Various places for border radius |
--adyen-sdk-border-width-l | 3px | Various places for border radius |
--adyen-sdk-shadow-low | 0px 2px 4px rgba(0, 17, 44, 0.04), 0px 1px 2px rgba(0, 17, 44, 0.02) | - Box shadow for Card available brand images and voucher brand images - Box shadow for selected segment |