Robuust Components

Appearance

Dialogs ​

Dialogs variables are shared variables between the Drawer and Modal components.

Available Variables ​

Global ​

css
:root {
  --rvc-dialog-backdrop-bg-color: rgba(0, 0, 0, 0.5);
  --rvc-dialog-padding-x: 1rem;
  --rvc-dialog-padding-y: 1rem;
}
css
:root {
  --rvc-dialog-header-bg-color: #ffffff;
}

Close Button ​

css
:root {
  --rvc-dialog-close-size: 1.5rem;
  --rvc-dialog-close-color: #4a5568;
  --rvc-dialog-close-color-hover: #2d3748;
}

Title ​

css
:root {
  --rvc-dialog-title-color: #2d3748;
  --rvc-dialog-title-font-size: 1.5rem;
  --rvc-dialog-title-font-weight: 700;
  --rvc-dialog-title-font-family: 'Inter', sans-serif;
}

Content ​

css
:root {
  --rvc-dialog-content-bg-color: #ffffff;
}
css
:root {
  --rvc-dialog-footer-bg-color: #f9fafb;
  --rvc-dialog-footer-gap: 0.5rem;
}

Customization with Tailwind CSS ​

To customize these global styles, extend your Tailwind configuration:

javascript
// tailwind.config.js
export default {
  theme: {
    extend: {
      components: (theme) => ({
        base: {
          '--rvc-base-border-radius': theme('borderRadius.lg'),
          '--rvc-base-transition-duration': theme('transitionDuration.150'),
          '--rvc-base-transition-timing-function': theme('transitionTimingFunction.ease-in-out'),
          '--rvc-base-loading-animation': theme('animation.ping'),
          '--rvc-base-border-width': theme('borderWidth.2'),
          '--rvc-base-border-color': theme('colors.gray.300'),
          '--rvc-base-box-shadow': theme('boxShadow.md'),

          // Larger Sreens
          'screen-sm': {
            '--rvc-dialog-padding-x': theme('padding.6'),
            '--rvc-dialog-padding-y': theme('padding.4'),
            '--rvc-dialog-footer-gap': theme('gap.3'),
          },
        },
      }),
    },
  },
};