Themes ​

Themes configuration options.

Available themes (in Theme panel) can be configured with the following option:

js
// builder.config.js

export default {
  themes: [
    {
      label: 'Official themes',
      themes: [
        {
          label: 'Vueform',
          default: true,
          vars: {
            primary: '#07bf9b',
            'primary-darker': '#06ac8b',
            'color-on-primary': '#ffffff',
            danger: '#ef4444',
            'danger-lighter': '#fee2e2',
            success: '#10b981',
            'success-lighter': '#d1fae5',
            'gray-50': '#f9fafb',
            'gray-100': '#f3f4f6',
            'gray-200': '#e5e7eb',
            'gray-300': '#d1d5db',
            'gray-400': '#9ca3af',
            'gray-500': '#6b7280',
            'gray-600': '#4b5563',
            'gray-700': '#374151',
            'gray-800': '#1f2937',
            'gray-900': '#111827',
            'ring-width': '2px',
            'ring-color': '#07bf9b66',
            'link-color': 'var(--vf-primary)',
            'link-decoration': 'inherit',
            'font-size': '1rem',
            'font-size-sm': '0.875rem',
            'font-size-lg': '1rem',
            'font-size-small': '0.875rem',
            'font-size-small-sm': '0.8125rem',
            'font-size-small-lg': '0.875rem',
            'font-size-h1': '2.125rem',
            'font-size-h1-sm': '2.125rem',
            'font-size-h1-lg': '2.125rem',
            'font-size-h2': '1.875rem',
            'font-size-h2-sm': '1.875rem',
            'font-size-h2-lg': '1.875rem',
            'font-size-h3': '1.5rem',
            'font-size-h3-sm': '1.5rem',
            'font-size-h3-lg': '1.5rem',
            'font-size-h4': '1.25rem',
            'font-size-h4-sm': '1.25rem',
            'font-size-h4-lg': '1.25rem',
            'font-size-h1-mobile': '1.5rem',
            'font-size-h1-mobile-sm': '1.5rem',
            'font-size-h1-mobile-lg': '1.5rem',
            'font-size-h2-mobile': '1.25rem',
            'font-size-h2-mobile-sm': '1.25rem',
            'font-size-h2-mobile-lg': '1.25rem',
            'font-size-h3-mobile': '1.125rem',
            'font-size-h3-mobile-sm': '1.125rem',
            'font-size-h3-mobile-lg': '1.125rem',
            'font-size-h4-mobile': '1rem',
            'font-size-h4-mobile-sm': '1rem',
            'font-size-h4-mobile-lg': '1rem',
            'font-size-blockquote': '1rem',
            'font-size-blockquote-sm': '0.875rem',
            'font-size-blockquote-lg': '1rem',
            'line-height': '1.5rem',
            'line-height-sm': '1.25rem',
            'line-height-lg': '1.5rem',
            'line-height-small': '1.25rem',
            'line-height-small-sm': '1.125rem',
            'line-height-small-lg': '1.25rem',
            'line-height-headings': '1.2',
            'line-height-headings-sm': '1.2',
            'line-height-headings-lg': '1.2',
            'line-height-blockquote': '1.5rem',
            'line-height-blockquote-sm': '1.25rem',
            'line-height-blockquote-lg': '1.5rem',
            'letter-spacing': '0px',
            'letter-spacing-sm': '0px',
            'letter-spacing-lg': '0px',
            'letter-spacing-small': '0px',
            'letter-spacing-small-sm': '0px',
            'letter-spacing-small-lg': '0px',
            'letter-spacing-headings': '0px',
            'letter-spacing-headings-sm': '0px',
            'letter-spacing-headings-lg': '0px',
            'letter-spacing-blockquote': '0px',
            'letter-spacing-blockquote-sm': '0px',
            'letter-spacing-blockquote-lg': '0px',
            gutter: '1rem',
            'gutter-sm': '0.5rem',
            'gutter-lg': '1rem',
            'min-height-input': '2.375rem',
            'min-height-input-sm': '2.125rem',
            'min-height-input-lg': '2.875rem',
            'py-input': '0.375rem',
            'py-input-sm': '0.375rem',
            'py-input-lg': '0.625rem',
            'px-input': '0.75rem',
            'px-input-sm': '0.5rem',
            'px-input-lg': '0.875rem',
            'py-btn': '0.375rem',
            'py-btn-sm': '0.375rem',
            'py-btn-lg': '0.625rem',
            'px-btn': '0.875rem',
            'px-btn-sm': '0.75rem',
            'px-btn-lg': '1.25rem',
            'py-btn-small': '0.25rem',
            'py-btn-small-sm': '0.25rem',
            'py-btn-small-lg': '0.375rem',
            'px-btn-small': '0.625rem',
            'px-btn-small-sm': '0.625rem',
            'px-btn-small-lg': '0.75rem',
            'py-group-tabs': '0.375rem',
            'py-group-tabs-sm': '0.375rem',
            'py-group-tabs-lg': '0.625rem',
            'px-group-tabs': '0.75rem',
            'px-group-tabs-sm': '0.5rem',
            'px-group-tabs-lg': '0.875rem',
            'py-group-blocks': '0.75rem',
            'py-group-blocks-sm': '0.625rem',
            'py-group-blocks-lg': '0.875rem',
            'px-group-blocks': '1rem',
            'px-group-blocks-sm': '1rem',
            'px-group-blocks-lg': '1rem',
            'py-tag': '0px',
            'py-tag-sm': '0px',
            'py-tag-lg': '0px',
            'px-tag': '0.4375rem',
            'px-tag-sm': '0.4375rem',
            'px-tag-lg': '0.4375rem',
            'py-slider-tooltip': '0.125rem',
            'py-slider-tooltip-sm': '0.0625rem',
            'py-slider-tooltip-lg': '0.1875rem',
            'px-slider-tooltip': '0.375rem',
            'px-slider-tooltip-sm': '0.3125rem',
            'px-slider-tooltip-lg': '0.5rem',
            'py-blockquote': '0.25rem',
            'py-blockquote-sm': '0.25rem',
            'py-blockquote-lg': '0.25rem',
            'px-blockquote': '0.75rem',
            'px-blockquote-sm': '0.75rem',
            'px-blockquote-lg': '0.75rem',
            'py-hr': '0.25rem',
            'space-addon': '0px',
            'space-addon-sm': '0px',
            'space-addon-lg': '0px',
            'space-checkbox': '0.375rem',
            'space-checkbox-sm': '0.375rem',
            'space-checkbox-lg': '0.375rem',
            'space-tags': '0.1875rem',
            'space-tags-sm': '0.1875rem',
            'space-tags-lg': '0.1875rem',
            'space-static-tag-1': '1rem',
            'space-static-tag-2': '2rem',
            'space-static-tag-3': '3rem',
            'floating-top': '0rem',
            'floating-top-sm': '0rem',
            'floating-top-lg': '0.6875rem',
            'bg-input': '#ffffff',
            'bg-input-hover': '#ffffff',
            'bg-input-focus': '#ffffff',
            'bg-input-danger': '#ffffff',
            'bg-input-success': '#ffffff',
            'bg-disabled': 'var(--vf-gray-200)',
            'bg-selected': '#1118270d',
            'bg-passive': 'var(--vf-gray-300)',
            'bg-icon': 'var(--vf-gray-500)',
            'bg-danger': 'var(--vf-danger-lighter)',
            'bg-success': 'var(--vf-success-lighter)',
            'bg-tag': 'var(--vf-primary)',
            'bg-slider-handle': 'var(--vf-primary)',
            'bg-toggle-handle': '#ffffff',
            'bg-date-head': 'var(--vf-gray-100)',
            'bg-addon': '#ffffff00',
            'bg-btn': 'var(--vf-primary)',
            'bg-btn-danger': 'var(--vf-danger)',
            'bg-btn-secondary': 'var(--vf-gray-200)',
            'color-input': 'var(--vf-gray-800)',
            'color-input-hover': 'var(--vf-gray-800)',
            'color-input-focus': 'var(--vf-gray-800)',
            'color-input-danger': 'var(--vf-gray-800)',
            'color-input-success': 'var(--vf-gray-800)',
            'color-disabled': 'var(--vf-gray-400)',
            'color-placeholder': 'var(--vf-gray-300)',
            'color-passive': 'var(--vf-gray-700)',
            'color-muted': 'var(--vf-gray-500)',
            'color-floating': 'var(--vf-gray-500)',
            'color-floating-focus': 'var(--vf-gray-500)',
            'color-floating-success': 'var(--vf-gray-500)',
            'color-floating-danger': 'var(--vf-gray-500)',
            'color-danger': 'var(--vf-danger)',
            'color-success': 'var(--vf-success)',
            'color-tag': 'var(--vf-color-on-primary)',
            'color-addon': 'var(--vf-gray-800)',
            'color-date-head': 'var(--vf-gray-700)',
            'color-btn': 'var(--vf-color-on-primary)',
            'color-btn-danger': '#ffffff',
            'color-btn-secondary': 'var(--vf-gray-700)',
            'border-color-input': 'var(--vf-gray-300)',
            'border-color-input-hover': 'var(--vf-gray-300)',
            'border-color-input-focus': 'var(--vf-primary)',
            'border-color-input-danger': 'var(--vf-gray-300)',
            'border-color-input-success': 'var(--vf-gray-300)',
            'border-color-checked': 'var(--vf-primary)',
            'border-color-passive': 'var(--vf-gray-300)',
            'border-color-slider-tooltip': 'var(--vf-primary)',
            'border-color-tag': 'var(--vf-primary)',
            'border-color-btn': 'var(--vf-primary)',
            'border-color-btn-danger': 'var(--vf-danger)',
            'border-color-btn-secondary': 'var(--vf-gray-200)',
            'border-color-blockquote': 'var(--vf-gray-300)',
            'border-color-hr': 'var(--vf-gray-300)',
            'border-width-input-t': '1px',
            'border-width-input-r': '1px',
            'border-width-input-b': '1px',
            'border-width-input-l': '1px',
            'border-width-radio-t': '1px',
            'border-width-radio-r': '1px',
            'border-width-radio-b': '1px',
            'border-width-radio-l': '1px',
            'border-width-checkbox-t': '1px',
            'border-width-checkbox-r': '1px',
            'border-width-checkbox-b': '1px',
            'border-width-checkbox-l': '1px',
            'border-width-dropdown': '1px',
            'border-width-btn': '1px',
            'border-width-toggle': '0.125rem',
            'border-width-tag': '1px',
            'border-width-blockquote': '3px',
            'shadow-input': '0px 0px 0px 0px rgba(0,0,0,0)',
            'shadow-input-hover': '0px 0px 0px 0px rgba(0,0,0,0)',
            'shadow-input-focus': '0px 0px 0px 0px rgba(0,0,0,0)',
            'shadow-handles': '0px 0px 0px 0px rgba(0,0,0,0)',
            'shadow-handles-hover': '0px 0px 0px 0px rgba(0,0,0,0)',
            'shadow-handles-focus': '0px 0px 0px 0px rgba(0,0,0,0)',
            'shadow-btn': '0px 0px 0px 0px rgba(0,0,0,0)',
            'shadow-dropdown': '0px 0px 0px 0px rgba(0,0,0,0)',
            'radius-input': '0.25rem',
            'radius-input-sm': '0.25rem',
            'radius-input-lg': '0.25rem',
            'radius-btn': '0.25rem',
            'radius-btn-sm': '0.25rem',
            'radius-btn-lg': '0.25rem',
            'radius-small': '0.25rem',
            'radius-small-sm': '0.25rem',
            'radius-small-lg': '0.25rem',
            'radius-large': '0.25rem',
            'radius-large-sm': '0.25rem',
            'radius-large-lg': '0.25rem',
            'radius-tag': '0.25rem',
            'radius-tag-sm': '0.25rem',
            'radius-tag-lg': '0.25rem',
            'radius-checkbox': '0.25rem',
            'radius-checkbox-sm': '0.25rem',
            'radius-checkbox-lg': '0.25rem',
            'radius-slider': '0.25rem',
            'radius-slider-sm': '0.25rem',
            'radius-slider-lg': '0.25rem',
            'radius-image': '0.25rem',
            'radius-image-sm': '0.25rem',
            'radius-image-lg': '0.25rem',
            'radius-gallery': '0.25rem',
            'radius-gallery-sm': '0.25rem',
            'radius-gallery-lg': '0.25rem',
            'checkbox-size': '1rem',
            'checkbox-size-sm': '0.875rem',
            'checkbox-size-lg': '1rem',
            'gallery-size': '6rem',
            'gallery-size-sm': '5rem',
            'gallery-size-lg': '7rem',
            'toggle-width': '3rem',
            'toggle-width-sm': '2.75rem',
            'toggle-width-lg': '3rem',
            'toggle-height': '1.25rem',
            'toggle-height-sm': '1rem',
            'toggle-height-lg': '1.25rem',
            'slider-height': '0.375rem',
            'slider-height-sm': '0.3125rem',
            'slider-height-lg': '0.5rem',
            'slider-height-vertical': '20rem',
            'slider-height-vertical-sm': '20rem',
            'slider-height-vertical-lg': '20rem',
            'slider-handle-size': '1rem',
            'slider-handle-size-sm': '0.875rem',
            'slider-handle-size-lg': '1.25rem',
            'slider-tooltip-distance': '0.5rem',
            'slider-tooltip-distance-sm': '0.375rem',
            'slider-tooltip-distance-lg': '0.5rem',
            'slider-tooltip-arrow-size': '0.3125rem',
            'slider-tooltip-arrow-size-sm': '0.3125rem',
            'slider-tooltip-arrow-size-lg': '0.3125rem',
          },
        },
        {
          label: 'Bootstrap',
          vars: {
            primary: '#007bff',
            'primary-darker': '#0056b3',
            'color-on-primary': '#ffffff',
            danger: '#dc3545',
            'danger-lighter': '#f9dcdf',
            success: '#28a745',
            'success-lighter': '#c4f1ce',
            'gray-50': '#f9fafb',
            'gray-100': '#f8f9fa',
            'gray-200': '#e9ecef',
            'gray-300': '#dee2e6',
            'gray-400': '#ced4da',
            'gray-500': '#adb5bd',
            'gray-600': '#6c757d',
            'gray-700': '#495057',
            'gray-800': '#343a40',
            'gray-900': '#212529',
            'ring-width': '0.2rem',
            'ring-color': '#007bff66',
            'link-color': '#007bff',
            'link-decoration': 'underline',
            'font-size': '1rem',
            'font-size-sm': '0.875rem',
            'font-size-lg': '1.25rem',
            'font-size-small': '0.8rem',
            'font-size-small-sm': '0.7rem',
            'font-size-small-lg': '1rem',
            'font-size-h1': '2.5rem',
            'font-size-h1-sm': '2.5rem',
            'font-size-h1-lg': '2.5rem',
            'font-size-h2': '2rem',
            'font-size-h2-sm': '2rem',
            'font-size-h2-lg': '2rem',
            'font-size-h3': '1.75rem',
            'font-size-h3-sm': '1.75rem',
            'font-size-h3-lg': '1.75rem',
            'font-size-h4': '1.5rem',
            'font-size-h4-sm': '1.5rem',
            'font-size-h4-lg': '1.5rem',
            'font-size-h1-mobile': '2.5rem',
            'font-size-h1-mobile-sm': '2.5rem',
            'font-size-h1-mobile-lg': '2.5rem',
            'font-size-h2-mobile': '2rem',
            'font-size-h2-mobile-sm': '2rem',
            'font-size-h2-mobile-lg': '2rem',
            'font-size-h3-mobile': '1.75rem',
            'font-size-h3-mobile-sm': '1.75rem',
            'font-size-h3-mobile-lg': '1.75rem',
            'font-size-h4-mobile': '1.5rem',
            'font-size-h4-mobile-sm': '1.5rem',
            'font-size-h4-mobile-lg': '1.5rem',
            'font-size-blockquote': '1.25rem',
            'font-size-blockquote-sm': '1.25rem',
            'font-size-blockquote-lg': '1.25rem',
            'line-height': '1.5rem',
            'line-height-sm': '1.5rem',
            'line-height-lg': '1.5rem',
            'line-height-small': '1.5rem',
            'line-height-small-sm': '1.5rem',
            'line-height-small-lg': '1.5rem',
            'line-height-headings': '1.2rem',
            'line-height-headings-sm': '1.2rem',
            'line-height-headings-lg': '1.2rem',
            'line-height-blockquote': '1.5',
            'line-height-blockquote-sm': '1.25',
            'line-height-blockquote-lg': '2',
            'letter-spacing': '0px',
            'letter-spacing-sm': '0px',
            'letter-spacing-lg': '0px',
            'letter-spacing-small': '0px',
            'letter-spacing-small-sm': '0px',
            'letter-spacing-small-lg': '0px',
            'letter-spacing-headings': '0px',
            'letter-spacing-headings-sm': '0px',
            'letter-spacing-headings-lg': '0px',
            'letter-spacing-blockquote': '0px',
            'letter-spacing-blockquote-sm': '0px',
            'letter-spacing-blockquote-lg': '0px',
            gutter: '15px',
            'gutter-sm': '7.5px',
            'gutter-lg': '15px',
            'min-height-input': '2.375rem',
            'min-height-input-sm': '2.125rem',
            'min-height-input-lg': '2.625rem',
            'py-input': '0.375rem',
            'py-input-sm': '0.25rem',
            'py-input-lg': '0.5rem',
            'px-input': '0.75rem',
            'px-input-sm': '0.5rem',
            'px-input-lg': '1rem',
            'py-btn': '0.375rem',
            'py-btn-sm': '0.25rem',
            'py-btn-lg': '0.5rem',
            'px-btn': '0.75rem',
            'px-btn-sm': '0.5rem',
            'px-btn-lg': '1rem',
            'py-btn-small': '0.28125rem',
            'py-btn-small-sm': '0.1875rem',
            'py-btn-small-lg': '0.375rem',
            'px-btn-small': '0.5625rem',
            'px-btn-small-sm': '0.375rem',
            'px-btn-small-lg': '0.75rem',
            'py-group-tabs': '0.375rem',
            'py-group-tabs-sm': '0.25rem',
            'py-group-tabs-lg': '0.5rem',
            'px-group-tabs': '0.75rem',
            'px-group-tabs-sm': '0.5rem',
            'px-group-tabs-lg': '1rem',
            'py-group-blocks': '0.75rem',
            'py-group-blocks-sm': '0.625rem',
            'py-group-blocks-lg': '0.875rem',
            'px-group-blocks': '1rem',
            'px-group-blocks-sm': '1rem',
            'px-group-blocks-lg': '1rem',
            'py-tag': '0px',
            'py-tag-sm': '0px',
            'py-tag-lg': '0px',
            'px-tag': '0.4375rem',
            'px-tag-sm': '0.4375rem',
            'px-tag-lg': '0.4375rem',
            'py-slider-tooltip': '0.125rem',
            'py-slider-tooltip-sm': '0.0625rem',
            'py-slider-tooltip-lg': '0.1875rem',
            'px-slider-tooltip': '0.375rem',
            'px-slider-tooltip-sm': '0.3125rem',
            'px-slider-tooltip-lg': '0.5rem',
            'py-blockquote': '0.5rem',
            'py-blockquote-sm': '0.5rem',
            'py-blockquote-lg': '0.5rem',
            'px-blockquote': '1rem',
            'px-blockquote-sm': '1rem',
            'px-blockquote-lg': '1rem',
            'py-hr': '0.25rem',
            'space-addon': '0.75rem',
            'space-addon-sm': '0.75rem',
            'space-addon-lg': '0.75rem',
            'space-checkbox': '0.25rem',
            'space-checkbox-sm': '0.25rem',
            'space-checkbox-lg': '0.25rem',
            'space-tags': '0.1875rem',
            'space-tags-sm': '0.1875rem',
            'space-tags-lg': '0.1875rem',
            'space-static-tag-1': '1rem',
            'space-static-tag-2': '2rem',
            'space-static-tag-3': '3rem',
            'floating-top': '0rem',
            'floating-top-sm': '0rem',
            'floating-top-lg': '0.6875rem',
            'bg-input': '#ffffff',
            'bg-input-focus': '#ffffff',
            'bg-input-hover': '#ffffff',
            'bg-input-danger': '#ffffff',
            'bg-input-success': '#ffffff',
            'bg-disabled': '#e9ecef',
            'bg-selected': '#1118270d',
            'bg-passive': 'var(--vf-gray-300)',
            'bg-icon': 'var(--vf-gray-500)',
            'bg-danger': 'var(--vf-danger-lighter)',
            'bg-success': 'var(--vf-success-lighter)',
            'bg-tag': 'var(--vf-primary)',
            'bg-slider-handle': 'var(--vf-primary)',
            'bg-toggle-handle': '#ffffff',
            'bg-date-head': 'var(--vf-gray-100)',
            'bg-addon': '#e9ecef',
            'bg-btn': 'var(--vf-primary)',
            'bg-btn-danger': 'var(--vf-danger)',
            'bg-btn-secondary': 'var(--vf-gray-200)',
            'color-input': 'var(--vf-gray-700)',
            'color-input-focus': 'var(--vf-gray-700)',
            'color-input-hover': 'var(--vf-gray-700)',
            'color-input-danger': 'var(--vf-gray-700)',
            'color-input-success': 'var(--vf-gray-700)',
            'color-disabled': 'var(--vf-gray-700)',
            'color-placeholder': 'var(--vf-gray-600)',
            'color-passive': 'var(--vf-gray-700)',
            'color-muted': 'var(--vf-gray-600)',
            'color-floating': 'var(--vf-gray-600)',
            'color-floating-success': 'var(--vf-gray-600)',
            'color-floating-danger': 'var(--vf-gray-600)',
            'color-floating-focus': 'var(--vf-gray-600)',
            'color-danger': 'var(--vf-danger)',
            'color-success': 'var(--vf-success)',
            'color-tag': 'var(--vf-color-on-primary)',
            'color-addon': 'var(--vf-gray-700)',
            'color-date-head': 'var(--vf-gray-700)',
            'color-btn': 'var(--vf-color-on-primary)',
            'color-btn-danger': '#ffffff',
            'color-btn-secondary': 'var(--vf-gray-700)',
            'border-color-input': 'var(--vf-gray-400)',
            'border-color-input-focus': '#80bdff',
            'border-color-input-hover': 'var(--vf-gray-400)',
            'border-color-input-danger': 'var(--vf-gray-400)',
            'border-color-input-success': 'var(--vf-gray-400)',
            'border-color-checked': 'var(--vf-primary)',
            'border-color-passive': 'var(--vf-gray-300)',
            'border-color-slider-tooltip': 'var(--vf-primary)',
            'border-color-tag': 'var(--vf-primary)',
            'border-color-btn': 'var(--vf-primary)',
            'border-color-btn-danger': 'var(--vf-danger)',
            'border-color-btn-secondary': 'var(--vf-gray-200)',
            'border-color-blockquote': 'var(--vf-gray-400)',
            'border-color-hr': 'var(--vf-gray-600)',
            'border-width-input-t': '1px',
            'border-width-input-r': '1px',
            'border-width-input-b': '1px',
            'border-width-input-l': '1px',
            'border-width-radio-t': '1px',
            'border-width-radio-r': '1px',
            'border-width-radio-b': '1px',
            'border-width-radio-l': '1px',
            'border-width-checkbox-t': '1px',
            'border-width-checkbox-r': '1px',
            'border-width-checkbox-b': '1px',
            'border-width-checkbox-l': '1px',
            'border-width-dropdown': '1px',
            'border-width-btn': '1px',
            'border-width-toggle': '0.125rem',
            'border-width-tag': '1px',
            'shadow-input': 'inset 0 1px 1px rgba(0, 0, 0, 0.075)',
            'shadow-input-hover': 'inset 0 1px 1px rgba(0, 0, 0, 0.075)',
            'shadow-input-focus': '0 0 0 0.2rem rgba(0, 123, 255, 0.25)',
            'shadow-handles': '0px 0px 0px 0px rgba(0,0,0,0)',
            'shadow-handles-hover': 'inset 0 1px 1px rgba(0, 0, 0, 0.075)',
            'shadow-handles-focus': '0 0 0 0.2rem rgba(0, 123, 255, 0.25)',
            'shadow-btn': 'inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075)',
            'shadow-dropdown': '0px 0px 0px 0px rgba(0,0,0,0)',
            'radius-input': '0.25rem',
            'radius-input-sm': '0.2rem',
            'radius-input-lg': '0.3rem',
            'radius-btn': '0.25rem',
            'radius-btn-sm': '0.2rem',
            'radius-btn-lg': '0.3rem',
            'radius-small': '0.25rem',
            'radius-small-sm': '0.2rem',
            'radius-small-lg': '0.25rem',
            'radius-large': '0.25rem',
            'radius-large-sm': '0.2rem',
            'radius-large-lg': '0.25rem',
            'radius-tag': '0.25rem',
            'radius-tag-sm': '0.2rem',
            'radius-tag-lg': '0.25rem',
            'radius-checkbox': '0.25rem',
            'radius-checkbox-sm': '0.2rem',
            'radius-checkbox-lg': '0.25rem',
            'radius-slider': '0.25rem',
            'radius-slider-sm': '0.2rem',
            'radius-slider-lg': '0.25rem',
            'radius-image': '0.25rem',
            'radius-image-sm': '0.2rem',
            'radius-image-lg': '0.25rem',
            'radius-gallery': '0.25rem',
            'radius-gallery-sm': '0.2rem',
            'radius-gallery-lg': '0.25rem',
            'checkbox-size': '1rem',
            'checkbox-size-sm': '0.875rem',
            'checkbox-size-lg': '1rem',
            'gallery-size': '6rem',
            'gallery-size-sm': '5rem',
            'gallery-size-lg': '7rem',
            'toggle-width': '3rem',
            'toggle-width-sm': '2.75rem',
            'toggle-width-lg': '3rem',
            'toggle-height': '1.25rem',
            'toggle-height-sm': '1.125rem',
            'toggle-height-lg': '1.25rem',
            'slider-height': '0.375rem',
            'slider-height-sm': '0.3125rem',
            'slider-height-lg': '0.5rem',
            'slider-height-vertical': '20rem',
            'slider-height-vertical-sm': '20rem',
            'slider-height-vertical-lg': '20rem',
            'slider-handle-size': '1rem',
            'slider-handle-size-sm': '0.875rem',
            'slider-handle-size-lg': '1.25rem',
            'slider-tooltip-distance': '0.5rem',
            'slider-tooltip-distance-sm': '0.375rem',
            'slider-tooltip-distance-lg': '0.5rem',
            'slider-tooltip-arrow-size': '0.3125rem',
            'slider-tooltip-arrow-size-sm': '0.3125rem',
            'slider-tooltip-arrow-size-lg': '0.3125rem',
          },
        },
        {
          label: 'Material',
          vars: {
            primary: '#6200ee',
            'primary-darker': '#5000cc',
            'color-on-primary': '#ffffff',
            danger: '#b00020',
            'danger-lighter': '#f9e5e8',
            success: '#4caf50',
            'success-lighter': '#e8f5e9',
            'ring-width': '0px',
            'ring-color': '#673ab766',
            'link-color': 'var(--vf-primary)',
            'link-decoration': 'inherit',
            'gray-50': '#fafafa',
            'gray-100': '#f5f5f5',
            'gray-200': '#eeeeee',
            'gray-300': '#e0e0e0',
            'gray-400': '#bdbdbd',
            'gray-500': '#9e9e9e',
            'gray-600': '#757575',
            'gray-700': '#616161',
            'gray-800': '#424242',
            'gray-900': '#212121',
            'font-size': '1rem',
            'font-size-sm': '0.875rem',
            'font-size-lg': '1rem',
            'font-size-small': '0.875rem',
            'font-size-small-sm': '0.75rem',
            'font-size-small-lg': '0.875rem',
            'font-size-h1': '2.125rem',
            'font-size-h1-sm': '2.125rem',
            'font-size-h1-lg': '2.125rem',
            'font-size-h2': '1.875rem',
            'font-size-h2-sm': '1.875rem',
            'font-size-h2-lg': '1.875rem',
            'font-size-h3': '1.5rem',
            'font-size-h3-sm': '1.5rem',
            'font-size-h3-lg': '1.5rem',
            'font-size-h4': '1.25rem',
            'font-size-h4-sm': '1.25rem',
            'font-size-h4-lg': '1.25rem',
            'font-size-h1-mobile': '1.5rem',
            'font-size-h1-mobile-sm': '1.5rem',
            'font-size-h1-mobile-lg': '1.5rem',
            'font-size-h2-mobile': '1.25rem',
            'font-size-h2-mobile-sm': '1.25rem',
            'font-size-h2-mobile-lg': '1.25rem',
            'font-size-h3-mobile': '1.125rem',
            'font-size-h3-mobile-sm': '1.125rem',
            'font-size-h3-mobile-lg': '1.125rem',
            'font-size-h4-mobile': '1rem',
            'font-size-h4-mobile-sm': '1rem',
            'font-size-h4-mobile-lg': '1rem',
            'font-size-blockquote': '1rem',
            'font-size-blockquote-sm': '0.875rem',
            'font-size-blockquote-lg': '1rem',
            'line-height': '1.5rem',
            'line-height-sm': '1.25rem',
            'line-height-lg': '1.5rem',
            'line-height-small': '1.25rem',
            'line-height-small-sm': '1.125rem',
            'line-height-small-lg': '1.25rem',
            'line-height-headings': '1.2rem',
            'line-height-headings-sm': '1.2rem',
            'line-height-headings-lg': '1.2rem',
            'line-height-blockquote': '1.5rem',
            'line-height-blockquote-sm': '1.25rem',
            'line-height-blockquote-lg': '1.5rem',
            'letter-spacing': '0px',
            'letter-spacing-sm': '0px',
            'letter-spacing-lg': '0px',
            'letter-spacing-small': '0px',
            'letter-spacing-small-sm': '0px',
            'letter-spacing-small-lg': '0px',
            'letter-spacing-headings': '0px',
            'letter-spacing-headings-sm': '0px',
            'letter-spacing-headings-lg': '0px',
            'letter-spacing-blockquote': '0px',
            'letter-spacing-blockquote-sm': '0px',
            'letter-spacing-blockquote-lg': '0px',
            gutter: '1rem',
            'gutter-sm': '0.5rem',
            'gutter-lg': '1rem',
            'min-height-input': '3rem',
            'min-height-input-sm': '2.125rem',
            'min-height-input-lg': '3.5rem',
            'py-input': '0.75rem',
            'py-input-sm': '0.375rem',
            'py-input-lg': '1rem',
            'px-input': '1rem',
            'px-input-sm': '0.625rem',
            'px-input-lg': '1rem',
            'py-btn': '0.375rem',
            'py-btn-sm': '0.5rem',
            'py-btn-lg': '0.5rem',
            'px-btn': '1rem',
            'px-btn-sm': '1rem',
            'px-btn-lg': '1rem',
            'py-btn-small': '0.28125rem',
            'py-btn-small-sm': '0.375rem',
            'py-btn-small-lg': '0.375rem',
            'px-btn-small': '0.75rem',
            'px-btn-small-sm': '0.75rem',
            'px-btn-small-lg': '0.75rem',
            'py-group-tabs': '0.75rem',
            'py-group-tabs-sm': '0.375rem',
            'py-group-tabs-lg': '1rem',
            'px-group-tabs': '1rem',
            'px-group-tabs-sm': '0.625rem',
            'px-group-tabs-lg': '1rem',
            'py-group-blocks': '1rem',
            'py-group-blocks-sm': '0.75rem',
            'py-group-blocks-lg': '1.25rem',
            'px-group-blocks': '1.25rem',
            'px-group-blocks-sm': '1rem',
            'px-group-blocks-lg': '1.5rem',
            'py-tag': '0.1875rem',
            'py-tag-sm': '0.125rem',
            'py-tag-lg': '0.1875rem',
            'px-tag': '0.675rem',
            'px-tag-sm': '0.5rem',
            'px-tag-lg': '0.75rem',
            'py-slider-tooltip': '0.25rem',
            'py-slider-tooltip-sm': '0.1875rem',
            'py-slider-tooltip-lg': '0.3125rem',
            'px-slider-tooltip': '0.5rem',
            'px-slider-tooltip-sm': '0.375rem',
            'px-slider-tooltip-lg': '0.625rem',
            'py-blockquote': '0.25rem',
            'py-blockquote-sm': '0.25rem',
            'py-blockquote-lg': '0.25rem',
            'px-blockquote': '0.75rem',
            'px-blockquote-sm': '0.75rem',
            'px-blockquote-lg': '0.75rem',
            'py-hr': '0.25rem',
            'space-addon': '0px',
            'space-addon-sm': '0px',
            'space-addon-lg': '0px',
            'space-checkbox': '0.5rem',
            'space-checkbox-sm': '0.5rem',
            'space-checkbox-lg': '0.625rem',
            'space-tags': '0.1875rem',
            'space-tags-sm': '0.1875rem',
            'space-tags-lg': '0.1875rem',
            'space-static-tag-1': '1rem',
            'space-static-tag-2': '2rem',
            'space-static-tag-3': '3rem',
            'floating-top': '0.75rem',
            'floating-top-sm': '0rem',
            'floating-top-lg': '0.875rem',
            'bg-input': 'var(--vf-gray-100)',
            'bg-input-hover': '#ececec',
            'bg-input-focus': '#dcdcdc',
            'bg-input-danger': 'var(--vf-gray-100)',
            'bg-input-success': 'var(--vf-gray-100)',
            'bg-disabled': 'var(--vf-gray-50)',
            'bg-selected': '#1118270d',
            'bg-passive': 'var(--vf-gray-300)',
            'bg-icon': 'var(--vf-gray-700)',
            'bg-danger': 'var(--vf-danger-lighter)',
            'bg-success': 'var(--vf-success-lighter)',
            'bg-tag': 'var(--vf-primary)',
            'bg-slider-handle': 'var(--vf-primary)',
            'bg-toggle-handle': '#ffffff',
            'bg-date-head': 'var(--vf-gray-100)',
            'bg-addon': 'transparent',
            'bg-btn': 'var(--vf-primary)',
            'bg-btn-danger': 'var(--vf-danger)',
            'bg-btn-secondary': 'var(--vf-gray-200)',
            'color-input': 'var(--vf-gray-900)',
            'color-input-focus': 'var(--vf-gray-900)',
            'color-input-hover': 'var(--vf-gray-900)',
            'color-input-danger': 'var(--vf-gray-900)',
            'color-input-success': 'var(--vf-gray-900)',
            'color-disabled': '#afafaf',
            'color-placeholder': '#00000099',
            'color-passive': 'var(--vf-gray-700)',
            'color-muted': '#00000099',
            'color-floating': '#00000099',
            'color-floating-focus': 'var(--vf-primary)',
            'color-floating-success': 'var(--vf-success)',
            'color-floating-danger': 'var(--vf-danger)',
            'color-danger': 'var(--vf-danger)',
            'color-success': 'var(--vf-success)',
            'color-tag': 'var(--vf-color-on-primary)',
            'color-addon': 'inherit',
            'color-date-head': 'var(--vf-gray-700)',
            'color-btn': 'var(--vf-color-on-primary)',
            'color-btn-danger': '#ffffff',
            'color-btn-secondary': 'var(--vf-gray-700)',
            'border-color-input': 'var(--vf-gray-600)',
            'border-color-input-focus': 'var(--vf-primary)',
            'border-color-input-hover': 'var(--vf-gray-600)',
            'border-color-input-danger': 'var(--vf-danger)',
            'border-color-input-success': 'var(--vf-gray-600)',
            'border-color-checked': 'var(--vf-primary)',
            'border-color-passive': 'var(--vf-gray-300)',
            'border-color-slider-tooltip': 'var(--vf-primary)',
            'border-color-tag': 'var(--vf-primary)',
            'border-color-btn': 'var(--vf-primary)',
            'border-color-btn-danger': 'var(--vf-danger)',
            'border-color-btn-secondary': 'var(--vf-gray-200)',
            'border-color-blockquote': 'var(--vf-gray-300)',
            'border-color-hr': 'var(--vf-gray-400)',
            'border-width-input-t': '0px',
            'border-width-input-r': '0px',
            'border-width-input-b': '1px',
            'border-width-input-l': '0px',
            'border-width-radio-t': '2px',
            'border-width-radio-r': '2px',
            'border-width-radio-b': '2px',
            'border-width-radio-l': '2px',
            'border-width-checkbox-t': '2px',
            'border-width-checkbox-r': '2px',
            'border-width-checkbox-b': '2px',
            'border-width-checkbox-l': '2px',
            'border-width-dropdown': '0px',
            'border-width-toggle': '0.25rem',
            'border-width-btn': '1px',
            'border-width-tag': '1px',
            'border-width-blockquote': '3px',
            'shadow-input': '0px 0px 0px 0px rgba(0,0,0,0)',
            'shadow-input-hover': '0px 0px 0px 0px rgba(0,0,0,0)',
            'shadow-input-focus': '0px 0px 0px 0px rgba(0,0,0,0)',
            'shadow-handles': '0px 0px 0px 0px rgba(0,0,0,0)',
            'shadow-handles-hover': '0px 0px 0px 9px rgba(0,0,0,0.15)',
            'shadow-handles-focus': '0px 0px 0px 9px rgba(0,0,0,0.15)',
            'shadow-btn': '0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%)',
            'shadow-dropdown': '0 4px 6px 0 rgb(32 33 36 / 28%)',
            'radius-input': '0.25rem 0.25rem 0rem 0rem',
            'radius-input-sm': '0.25rem 0.25rem 0rem 0rem',
            'radius-input-lg': '0.25rem 0.25rem 0rem 0rem',
            'radius-btn': '0.25rem',
            'radius-btn-sm': '0.25rem',
            'radius-btn-lg': '0.25rem',
            'radius-small': '0.125rem',
            'radius-small-sm': '0.125rem',
            'radius-small-lg': '0.125rem',
            'radius-large': '0.5rem 0.5rem 0rem 0rem',
            'radius-large-sm': '0.5rem 0.5rem 0rem 0rem',
            'radius-large-lg': '0.5rem 0.5rem 0rem 0rem',
            'radius-tag': '999px',
            'radius-tag-sm': '999px',
            'radius-tag-lg': '999px',
            'radius-checkbox': '0.25rem',
            'radius-checkbox-sm': '0.25rem',
            'radius-checkbox-lg': '0.25rem',
            'radius-slider': '1rem',
            'radius-slider-sm': '1rem',
            'radius-slider-lg': '1rem',
            'radius-image': '0.25rem 0.25rem 0rem 0rem',
            'radius-image-sm': '0.25rem 0.25rem 0rem 0rem',
            'radius-image-lg': '0.25rem 0.25rem 0rem 0rem',
            'radius-gallery': '0.25rem 0.25rem 0rem 0rem',
            'radius-gallery-sm': '0.25rem 0.25rem 0rem 0rem',
            'radius-gallery-lg': '0.25rem 0.25rem 0rem 0rem',
            'checkbox-size': '1rem',
            'checkbox-size-sm': '0.9375rem',
            'checkbox-size-lg': '1.125rem',
            'gallery-size': '6rem',
            'gallery-size-sm': '5rem',
            'gallery-size-lg': '7rem',
            'toggle-width': '3rem',
            'toggle-width-sm': '2.75rem',
            'toggle-width-lg': '3rem',
            'toggle-height': '1rem',
            'toggle-height-sm': '1.125rem',
            'toggle-height-lg': '1.25rem',
            'slider-height': '0.375rem',
            'slider-height-sm': '0.3125rem',
            'slider-height-lg': '0.4375rem',
            'slider-height-vertical': '20rem',
            'slider-height-vertical-sm': '20rem',
            'slider-height-vertical-lg': '20rem',
            'slider-handle-size': '1.25rem',
            'slider-handle-size-sm': '1.25rem',
            'slider-handle-size-lg': '1.4375rem',
            'slider-tooltip-distance': '0.625rem',
            'slider-tooltip-distance-sm': '0.625rem',
            'slider-tooltip-distance-lg': '0.625rem',
            'slider-tooltip-arrow-size': '0.375rem',
            'slider-tooltip-arrow-size-sm': '0.375rem',
            'slider-tooltip-arrow-size-lg': '0.375rem',
          },
        },
      ],
    },
  ],
}
đŸ‘‹ Hire Vueform team for form customizations and developmentLearn more