​
3.0.67

​
Features

  • [UI Customization]: Introducing Themes! Now you can customize the look and feel of Velt components using CSS variables. This enables you to match Velt’s UI with your application’s design system.

    • The following components now support theming (others will be added soon):

      • Comment Components
      • Recording Components
      • Reactions

    • You can customize:

      • Border radius
      • Spacing
      • Typography
      • Colors for light and dark modes
        • Base Colors
        • Accent Colors
        • Text Shades
        • Background Shades
        • Border Shades
        • Status Colors (error, warning, success)
        • Transparent colors

    • Learn more about UI Customization here.

--velt-border-radius-2xs: 0.125rem; // 2px
--velt-border-radius-xs: 0.25rem; // 4px
--velt-border-radius-sm: 0.5rem; // 8px
--velt-border-radius-md: 0.75rem; // 12px
--velt-border-radius-lg: 1rem; // 16px
--velt-border-radius-xl: 1.25rem; // 20px
--velt-border-radius-2xl: 1.5rem; // 24px
--velt-border-radius-3xl: 2rem; // 32px
--velt-border-radius-full: 5rem; // 80px
  • Example of theme customisation:
    • You can update the following variables in <body> tag to change the theme.
    • For testing, try copy pasting the following sample themes in body tag:
    body {
  --velt-light-mode-accent: #0BA528;
  --velt-light-mode-accent-text: #0BA528;
  --velt-light-mode-accent-hover: #08841F;
  --velt-light-mode-accent-foreground: #FFFFFF;
  --velt-light-mode-accent-light: #DFF9E4;
  --velt-light-mode-accent-transparent: rgba(11, 165, 40, 0.08);

  --velt-dark-mode-accent: #0BA528;
  --velt-dark-mode-accent-text: #0BA528;
  --velt-dark-mode-accent-hover: #08841F;
  --velt-dark-mode-accent-foreground: #FFFFFF;
  --velt-dark-mode-accent-light: #DFF9E4;
  --velt-dark-mode-accent-transparent: rgba(11, 165, 40, 0.08);

  --velt-border-radius-2xs: 2px;
  --velt-border-radius-xs: 2px;
  --velt-border-radius-sm: 2px;
  --velt-border-radius-md: 2px;
  --velt-border-radius-lg: 2px;
  --velt-border-radius-xl: 2px;
  --velt-border-radius-2xl: 2px;
  --velt-border-radius-3xl: 2px;
  --velt-border-radius-full: 2px;
}

Was this page helpful?

Nov 18 2024