Component Globals

Component Globals are global styles.

Available Variables

Border Radius

:root {
  --rvc-base-border-radius: 0.375rem;
}

Transition

:root {
  --rvc-base-transition-duration: 150;
  --rvc-base-transition-timing-function: ease-in-out;
}

Loading Animation

:root {
  --rvc-base-loading-animation: spin 1s linear infinite;
}

Border

:root {
  --rvc-base-border-width: 1px;
  --rvc-base-border-style: solid;
  --rvc-base-border-color: #e2e8f0;
  --rvc-base-border-dark-color: '#4a5568';
}

Box Shadow

:root {
  --rvc-base-box-shadow: none;
}

Customization with Tailwind CSS

To customize these global styles, extend your Tailwind configuration:

// 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 Screens
          'screen-sm': {},
        },
      }),
    },
  },
};