Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.ripio.com/llms.txt

Use this file to discover all available pages before exploring further.

​
Settings

​
Customize your theme - UI

The Widget allows you to configure the theme of the user interface so that the styles are adjusted to the Partner’s brand style, and to the UX of its platform. The theme is set in the partner’s setting, and for this to be possible, the partner must send Ripio a CSS file with the variables corresponding to its brand style. Below is a template with the default values of the theme, it is recommended to copy and modify the necessary values: theme.css 
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap");

:root {
  /* Color names */
  --indigo: #380574;
  --purply-blue: #7908ff;
  --purply-light: #f7f1ff;
  --pale-lilac: #ececf0;
  --light-periwinkle: #d8d9e2;
  --white: #ffffff;
  --red: #d21a30;
  --pink-red: #ff0050;
  --pink: #f5afcb;
  --light-pink: #f8f3ff;
  --dark-sky-blue: #309be5;
  --dark-grey: #1f1f1f;
  --charcoal-grey: #242424;
  --bluey-grey: #a5a7af;
  --lighter-grey: #efebf4;
  --light-grey: #f9f4ff;
  --aqua-blue: #01c9e8;
  --aqua-green: #22c55e;
  --yellow-orange: #ffb300;
  --neutral-100: #757575;
  --neutral-80: #6c6c6c;
  --neutral-50: #a5a7af;
  --neutral-20: #fff6e0;
  --neutral-10: #f8f8f9;

  /* Palette */
  --ripio-color-base: var(--white);
  --ripio-color-text: var(--dark-grey);
  --ripio-color-primary: var(--purply-blue);
  --ripio-color-primary-light: var(--purply-light);
  --ripio-color-success: var(--aqua-green);
  --ripio-color-warning: var(--red);
  --ripio-color-info: var(--light-periwinkle);
  --ripio-color-disabled: var(--light-periwinkle);
  --ripio-color-neutral-120: var(--charcoal-grey);
  --ripio-color-neutral-100: var(--neutral-100);
  --ripio-color-neutral-80: var(--neutral-80);
  --ripio-color-neutral-50: var(--neutral-50);
  --ripio-color-neutral-20: var(--neutral-20);
  --ripio-color-neutral-10: var(--neutral-10);
  --ripio-color-neutral: var(--white);

  /* Widget Container */
  --ripio-widget-bg-color: var(--white);
  --ripio-widget-border-radius: 24px;
  --ripio-widget-box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.06);

  /* Typography */
  --ripio-font-family: "Lato";

  --ripio-font-size-display-l: 64px;
  --ripio-font-size-display-md: 48px;
  --ripio-font-size-headline-l: 32px;
  --ripio-font-size-headline-md: 24px;
  --ripio-font-size-subheadline-l: 24px;
  --ripio-font-size-subheadline-md: 22px;
  --ripio-font-size-subheadline-sm: 20px;
  --ripio-font-size-body-l: 18px;
  --ripio-font-size-body-md: 16px;
  --ripio-font-size-body-sm: 14px;
  --ripio-font-size-label-l: 16px;
  --ripio-font-size-label-md: 14px;
  --ripio-font-size-label-sm: 12px;
  --ripio-font-size-label-xs: 13px;

  --ripio-line-height-display-l: 76px;
  --ripio-line-height-display-md: 56px;
  --ripio-line-height-headline-l: 40px;
  --ripio-line-height-headline-md: 32px;
  --ripio-line-height-subheadline-l: 32px;
  --ripio-line-height-subheadline-md: 28px;
  --ripio-line-height-subheadline-sm: 28px;
  --ripio-line-height-body-l: 24px;
  --ripio-line-height-body-md: 24px;
  --ripio-line-height-body-sm: 20px;
  --ripio-line-height-label-l: 32px;
  --ripio-line-height-label-md: 20px;
  --ripio-line-height-label-sm: 16px;
  --ripio-line-height-label-xs: 15.6px;

  --ripio-text-color-neutral: var(--ripio-color-neutral-80);
  --ripio-text-color-neutral-100: var(--ripio-color-neutral-100);
  --ripio-text-color-primary: var(--ripio-color-primary);
  --ripio-text-color-base: var(--ripio-color-text);
  --ripio-text-color-base-light: var(--ripio-color-neutral-120);
  --ripio-text-color-warning: var(--ripio-color-warning);
  --ripio-text-color-success: var(--ripio-color-success);

  /* Spinner */
  --ripio-spinner-border-color: var(--ripio-color-primary);

  /* Button */
  --ripio-btn-bg-color-primary: var(--ripio-color-primary);
  --ripio-btn-bg-color-secondary: var(--ripio-color-base);
  --ripio-btn-bg-color-tertiary: var(--ripio-color-primary-light);
  --ripio-btn-bg-color-disabled: var(--ripio-color-disabled);
  --ripio-btn-text-color-primary: var(--ripio-color-base);
  --ripio-btn-text-color-secondary: var(--ripio-color-primary);
  --ripio-btn-text-color-tertiary: var(--ripio-color-primary);
  --ripio-btn-font-size: 16px;
  --ripio-btn-line-height: 24px;
  --ripio-btn-border-radius: 28px;

  /* Input */
  --ripio-input-font-size-md: 14px;
  --ripio-input-line-height-md: 16px;

  --ripio-input-font-size-l: 32px;
  --ripio-input-line-height-l: 40px;

  --ripio-input-font-size-l-mobile: 24px;
  --ripio-input-line-height-l-mobile: 30px;

  --ripio-input-border-width: 1px;
  --ripio-input-border-radius: 12px;
  --ripio-input-code-border-radius: 15px;

  --ripio-input-bg-color-disabled: var(--ripio-color-disabled);
  --ripio-input-border-color-focus: var(--ripio-color-primary);
  --ripio-input-border-color-info: var(--ripio-color-info);
  --ripio-input-border-color-warning: var(--ripio-color-warning);
  --ripio-input-border-color-success: var(--ripio-color-success);

  /* Dropdown */

  --ripio-dropdown-menu-bg-color: var(--ripio-color-base);
  --ripio-dropdown-menu-box-shadow: 0px 5px 60px 0px rgba(0, 0, 0, 0.04);
  --ripio-dropdown-menu-box-shadow-scrollable: 0px 16px 20px -8px rgba(17, 12, 34, 0.1),
    inset 0px -40px 60px -60px rgba(17, 12, 34, 0.6);
  --ripio-dropdown-menu-border-radius: 8px;
  --ripio-dropdown-menu-border-width: 1px;

  --ripio-dropdown-option-bg-color: var(--ripio-color-base);
  --ripio-dropdown-option-bg-color-selected: var(--ripio-color-neutral-10);
  --ripio-dropdown-option-border-radius: 8px;
  --ripio-dropdown-option-text-color: var(--ripio-color-neutral-80);
  --ripio-dropdown-option-text-color-selected: var(--ripio-color-neutral-120);
  --ripio-dropdown-option-font-size: 14px;
  --ripio-dropdown-option-line-height: 18px;

  --ripio-dropdown-input-bg-color-disabled: var(--ripio-color-disabled);
  --ripio-dropdown-input-border-radius: 12px;
  --ripio-dropdown-input-border-width: 1px;

  --ripio-dropdown-currency-input-bg-color: var(--light-grey);
  --ripio-dropdown-currency-input-bg-color-focused: var(--lighter-grey);
  --ripio-dropdown-currency-menu-box-shadow: 0px 5px 60px 0px rgba(0, 0, 0, 0.04);
  --ripio-dropdown-currency-menu-box-shadow-scrollable: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow),
    inset 0px -40px 60px -60px rgba(17, 12, 34, 0.6);
  --ripio-dropdown-currency-input-border-radius: 25px;

  /* Card */
  --ripio-card-border-radius-base: 18px;
  --ripio-card-box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.06);
  --ripio-card-bg-color: var(--ripio-color-base);

  /* Card option */
  --ripio-card-option-box-shadow: 0px 5px 60px 0px #0000000a;

  /* Box */
  --ripio-box-bg-color-info: var(--ripio-color-neutral-10);
  --ripio-box-bg-color-warning: var(--ripio-color-neutral-20);
  --ripio-box-border-radius-warning: 18px;
  --ripio-box-border-radius-info: 10px;

  --ripio-border-color-neutral-80: var(--ripio-color-neutral-80);
  --ripio-border-color-neutral-120: var(--ripio-color-neutral-120);

  --ripio-border-radius-card-option: 18px;

  /* Alert */
  --ripio-alert-border-radius-info: 18px;
  --ripio-alert-bg-color-info: var(--ripio-color-primary-light);

  /* Divider */
  --ripio-divider-bg-color: var(--neutral-100);

  /* Toast */
  --ripio-toast-bg-color: var(--ripio-color-neutral-120);
  --ripio-toast-color: var(--ripio-color-neutral);
  --ripio-toast-border-radius: 12px;
}

​
Usage

The file with the theme can be assembled only with the values that need to be overwritten, the variables that are not overwritten will use the default value displayed in the template above.

​
Customize the typography

To use a font it is necessary to be able to import it from a static host and then modify the variable that owns font-family. Example:
  • Font: Monserrat
  • Host: https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root {
  /* Typography */
  --ripio-font-family: "Montserrat";
}
Default UI theme Default UI theme! Customized UI theme Customized UI theme!

​
Customize Buttons

In case we want to modify the styles of the buttons, only variables starting with --ripio-btn modify the buttons. Example: Primary Button 
:root {
  /* Button */
  --ripio-btn-bg-color-primary: #787878;
  --ripio-btn-font-size: 14px;
  --ripio-btn-border-radius: 5px;
}
Default UI theme Example of primary button default! Customized UI theme Example of primary button modified! Secondary Button 
:root {
  /* Button */
  --ripio-btn-bg-color-secondary: #edbe73;
  --ripio-btn-text-color-secondary: #ffffff;
}
Default UI theme Example of secondary button default! Customized UI theme Example of secondary button modified! Tertiary Button 
:root {
  /* Button */
  --ripio-btn-bg-color-tertiary: #bbcdff;
  --ripio-btn-text-color-tertiary: #034cf5;
}
Default UI theme Example of tertiary button default! Customized UI theme Example of tertiary button modified!