Setup
Update the vueform.config.js and include tailwind theme:
js
// vueform.config.js
import tailwind from '@vueform/vueform/themes/tailwind'
export default {
theme: tailwind,
// ...
}Tailwind 2.x
Update tailwind.config.js with the following:
js
// tailwind.config.js
module.exports = {
purge: {
// ...
content: [
// ... your existing files
'./vueform.config.js', // or where `vueform.config.js` is located
'./node_modules/@vueform/vueform/themes/tailwind/**/*.vue',
'./node_modules/@vueform/vueform/themes/tailwind/**/*.js',
]
},
// ...
plugins: [
require('@vueform/vueform/tailwind')
]
}Tailwind 3.x
Update tailwind.config.js with the following:
js
// tailwind.config.js
module.exports = {
content: [
// ... your existing files
'./vueform.config.js', // or where `vueform.config.js` is located
'./node_modules/@vueform/vueform/themes/tailwind/**/*.vue',
'./node_modules/@vueform/vueform/themes/tailwind/**/*.js',
],
// ...
plugins: [
require('@vueform/vueform/tailwind')
]
}Prefix
If you are using prefixes head to Tailwind Prefix section for instructions.
Customization
The theme can be customized with the following CSS vars:
scss
:root, :before, :after, * {
--vf-primary: #07bf9b;
--vf-primary-darker: #06ac8b;
--vf-danger: #ef4444;
--vf-danger-lighter: #fee2e2;
--vf-success: #10b981;
--vf-success-lighter: #d1fae5;
--vf-gray-50: #f9fafb;
--vf-gray-100: #f3f4f6;
--vf-gray-200: #e5e7eb;
--vf-gray-300: #d1d5db;
--vf-gray-400: #9ca3af;
--vf-gray-500: #6b7280;
--vf-gray-600: #4b5563;
--vf-gray-700: #374151;
--vf-gray-800: #1f2937;
--vf-gray-900: #111827;
--vf-dark-50: #f9fafb;
--vf-dark-100: #f3f4f6;
--vf-dark-200: #e5e7eb;
--vf-dark-300: #d1d5db;
--vf-dark-400: #9ca3af;
--vf-dark-500: #6b7280;
--vf-dark-600: #4b5563;
--vf-dark-700: #374151;
--vf-dark-800: #1f2937;
--vf-dark-900: #111827;
--vf-ring-color: #07bf9b66;
--vf-ring-width: 2px;
--vf-link-color: var(--vf-primary);
--vf-link-decoration: inherit;
--vf-font-size: 1rem;
--vf-font-size-sm: 0.875rem;
--vf-font-size-lg: 1rem;
--vf-font-size-small: 0.875rem;
--vf-font-size-small-sm: 0.8125rem;
--vf-font-size-small-lg: 0.875rem;
--vf-font-size-h1: 2.125rem;
--vf-font-size-h1-sm: 2.125rem;
--vf-font-size-h1-lg: 2.125rem;
--vf-font-size-h2: 1.875rem;
--vf-font-size-h2-sm: 1.875rem;
--vf-font-size-h2-lg: 1.875rem;
--vf-font-size-h3: 1.5rem;
--vf-font-size-h3-sm: 1.5rem;
--vf-font-size-h3-lg: 1.5rem;
--vf-font-size-h4: 1.25rem;
--vf-font-size-h4-sm: 1.25rem;
--vf-font-size-h4-lg: 1.25rem;
--vf-font-size-h1-mobile: 1.5rem;
--vf-font-size-h1-mobile-sm: 1.5rem;
--vf-font-size-h1-mobile-lg: 1.5rem;
--vf-font-size-h2-mobile: 1.25rem;
--vf-font-size-h2-mobile-sm: 1.25rem;
--vf-font-size-h2-mobile-lg: 1.25rem;
--vf-font-size-h3-mobile: 1.125rem;
--vf-font-size-h3-mobile-sm: 1.125rem;
--vf-font-size-h3-mobile-lg: 1.125rem;
--vf-font-size-h4-mobile: 1rem;
--vf-font-size-h4-mobile-sm: 1rem;
--vf-font-size-h4-mobile-lg: 1rem;
--vf-font-size-blockquote: 1rem;
--vf-font-size-blockquote-sm: 0.875rem;
--vf-font-size-blockquote-lg: 1rem;
--vf-line-height: 1.5rem;
--vf-line-height-sm: 1.25rem;
--vf-line-height-lg: 1.5rem;
--vf-line-height-small: 1.25rem;
--vf-line-height-small-sm: 1.125rem;
--vf-line-height-small-lg: 1.25rem;
--vf-line-height-headings: 1.2;
--vf-line-height-headings-sm: 1.2;
--vf-line-height-headings-lg: 1.2;
--vf-line-height-blockquote: 1.5rem;
--vf-line-height-blockquote-sm: 1.25rem;
--vf-line-height-blockquote-lg: 1.5rem;
--vf-letter-spacing: 0;
--vf-letter-spacing-sm: 0;
--vf-letter-spacing-lg: 0;
--vf-letter-spacing-small: 0;
--vf-letter-spacing-small-sm: 0;
--vf-letter-spacing-small-lg: 0;
--vf-letter-spacing-headings: 0;
--vf-letter-spacing-headings-sm: 0;
--vf-letter-spacing-headings-lg: 0;
--vf-letter-spacing-blockquote: 0;
--vf-letter-spacing-blockquote-sm: 0;
--vf-letter-spacing-blockquote-lg: 0;
--vf-gutter: 1rem;
--vf-gutter-sm: 0.5rem;
--vf-gutter-lg: 1rem;
--vf-min-height-input: 2.375rem;
--vf-min-height-input-sm: 2.125rem;
--vf-min-height-input-lg: 2.875rem;
--vf-py-input: 0.375rem;
--vf-py-input-sm: 0.375rem;
--vf-py-input-lg: 0.625rem;
--vf-px-input: 0.75rem;
--vf-px-input-sm: 0.5rem;
--vf-px-input-lg: 0.875rem;
--vf-py-btn: 0.375rem;
--vf-py-btn-sm: 0.375rem;
--vf-py-btn-lg: 0.625rem;
--vf-px-btn: 0.875rem;
--vf-px-btn-sm: 0.75rem;
--vf-px-btn-lg: 1.25rem;
--vf-py-btn-small: 0.25rem;
--vf-py-btn-small-sm: 0.25rem;
--vf-py-btn-small-lg: 0.375rem;
--vf-px-btn-small: 0.625rem;
--vf-px-btn-small-sm: 0.625rem;
--vf-px-btn-small-lg: 0.75rem;
--vf-py-group-tabs: var(--vf-py-input);
--vf-py-group-tabs-sm: var(--vf-py-input-sm);
--vf-py-group-tabs-lg: var(--vf-py-input-lg);
--vf-px-group-tabs: var(--vf-px-input);
--vf-px-group-tabs-sm: var(--vf-px-input-sm);
--vf-px-group-tabs-lg: var(--vf-px-input-lg);
--vf-py-group-blocks: 0.75rem;
--vf-py-group-blocks-sm: 0.625rem;
--vf-py-group-blocks-lg: 0.875rem;
--vf-px-group-blocks: 1rem;
--vf-px-group-blocks-sm: 1rem;
--vf-px-group-blocks-lg: 1rem;
--vf-py-tag: 0;
--vf-py-tag-sm: var(--vf-py-tag);
--vf-py-tag-lg: var(--vf-py-tag);
--vf-px-tag: 0.4375rem;
--vf-px-tag-sm: var(--vf-px-tag);
--vf-px-tag-lg: var(--vf-px-tag);
--vf-py-slider-tooltip: 0.125rem;
--vf-py-slider-tooltip-sm: 0.0625rem;
--vf-py-slider-tooltip-lg: 0.1875rem;
--vf-px-slider-tooltip: 0.375rem;
--vf-px-slider-tooltip-sm: 0.3125rem;
--vf-px-slider-tooltip-lg: 0.5rem;
--vf-py-blockquote: 0.25rem;
--vf-py-blockquote-sm: 0.25rem;
--vf-py-blockquote-lg: 0.25rem;
--vf-px-blockquote: 0.75rem;
--vf-px-blockquote-sm: 0.75rem;
--vf-px-blockquote-lg: 0.75rem;
--vf-py-hr: 0.25rem;
// Space between addon and text input
--vf-space-addon: 0;
--vf-space-addon-sm: var(--vf-space-addon);
--vf-space-addon-lg: var(--vf-space-addon);
// Space between checkboxes & radios and their labels
--vf-space-checkbox: 0.375rem;
--vf-space-checkbox-sm: var(--vf-space-checkbox);
--vf-space-checkbox-lg: var(--vf-space-checkbox);
// Space between tags in `TagsElement`
--vf-space-tags: 0.1875rem;
--vf-space-tags-sm: var(--vf-space-tags);
--vf-space-tags-lg: var(--vf-space-tags);
// Space above `StaticElement` tags
--vf-space-static-tag-1: 1rem;
--vf-space-static-tag-2: 2rem;
--vf-space-static-tag-3: 3rem;
// Space between the field's top and floating label
--vf-floating-top: 0rem;
--vf-floating-top-sm: 0rem;
--vf-floating-top-lg: 0.6875rem;
--vf-bg-input: #ffffff;
--vf-bg-input-hover: var(--vf-bg-input);
--vf-bg-input-focus: var(--vf-bg-input);
--vf-bg-input-danger: var(--vf-bg-input);
--vf-bg-input-success: var(--vf-bg-input);
--vf-bg-checkbox: var(--vf-bg-input);
--vf-bg-checkbox-hover: var(--vf-bg-checkbox);
--vf-bg-checkbox-focus: var(--vf-bg-checkbox);
--vf-bg-checkbox-danger: var(--vf-bg-checkbox);
--vf-bg-checkbox-success: var(--vf-bg-checkbox);
--vf-bg-disabled: var(--vf-gray-200);
--vf-bg-selected: rgba(17,24,39,0.05); // Used eg. when select option is hovered or a checkbox is selected in `blocks` view
--vf-bg-passive: var(--vf-gray-300); // Used as a background color for eg. slider, toggle
--vf-bg-icon: var(--vf-gray-500);
--vf-bg-danger: var(--vf-danger-lighter);
--vf-bg-success: var(--vf-success-lighter);
--vf-bg-tag: var(--vf-primary);
--vf-bg-slider-handle: var(--vf-primary);
--vf-bg-toggle-handle: #ffffff;
--vf-bg-date-head: var(--vf-gray-100);
--vf-bg-addon: transparent;
--vf-bg-btn: var(--vf-primary);
--vf-bg-btn-danger: var(--vf-danger);
--vf-bg-btn-secondary: var(--vf-gray-200);
--vf-color-input: var(--vf-gray-800);
--vf-color-input-hover: var(--vf-color-input);
--vf-color-input-focus: var(--vf-color-input);
--vf-color-input-danger: var(--vf-color-input);
--vf-color-input-success: var(--vf-color-input);
--vf-color-disabled: var(--vf-gray-400);
--vf-color-placeholder: var(--vf-gray-300);
--vf-color-passive: var(--vf-gray-700); // Used when text is displayed on passive background eg. `off` toggle
--vf-color-muted: var(--vf-gray-500); // Used for helper texts eg. element description, floating label
--vf-color-floating: var(--vf-color-muted);
--vf-color-floating-focus: var(--vf-color-floating); // Used when the input is focused
--vf-color-floating-success: var(--vf-color-floating); // Used when the input is filled with success
--vf-color-floating-danger: var(--vf-color-floating); // Used when the input has error
--vf-color-on-primary: #ffffff; // Used when text is displayed on primary color
--vf-color-danger: var(--vf-danger);
--vf-color-success: var(--vf-success);
--vf-color-tag: var(--vf-color-on-primary);
--vf-color-addon: var(--vf-color-input);
--vf-color-date-head: var(--vf-gray-700);
--vf-color-btn: var(--vf-color-on-primary);
--vf-color-btn-danger: #ffffff;
--vf-color-btn-secondary: var(--vf-gray-700);
--vf-border-color-input: var(--vf-gray-300);
--vf-border-color-input-hover: var(--vf-border-color-input);
--vf-border-color-input-focus: var(--vf-primary);
--vf-border-color-input-danger: var(--vf-border-color-input);
--vf-border-color-input-success: var(--vf-border-color-input);
--vf-border-color-checkbox: var(--vf-border-color-input);
--vf-border-color-checkbox-focus: var(--vf-primary);
--vf-border-color-checkbox-hover: var(--vf-border-color-checkbox);
--vf-border-color-checkbox-danger: var(--vf-border-color-checkbox);
--vf-border-color-checkbox-success: var(--vf-border-color-checkbox);
--vf-border-color-checked: var(--vf-primary);
--vf-border-color-passive: var(--vf-gray-300); // Used as a border for passive states eg. `off` toggle
--vf-border-color-slider-tooltip: var(--vf-primary);
--vf-border-color-tag: var(--vf-primary);
--vf-border-color-btn: var(--vf-primary);
--vf-border-color-btn-danger: var(--vf-danger);
--vf-border-color-btn-secondary: var(--vf-gray-200);
--vf-border-color-blockquote: var(--vf-gray-300);
--vf-border-color-hr: var(--vf-gray-300);
--vf-border-width-input-t: 1px;
--vf-border-width-input-r: 1px;
--vf-border-width-input-b: 1px;
--vf-border-width-input-l: 1px;
--vf-border-width-radio-t: var(--vf-border-width-input-t);
--vf-border-width-radio-r: var(--vf-border-width-input-r);
--vf-border-width-radio-b: var(--vf-border-width-input-b);
--vf-border-width-radio-l: var(--vf-border-width-input-l);
--vf-border-width-checkbox-t: var(--vf-border-width-input-t);
--vf-border-width-checkbox-r: var(--vf-border-width-input-r);
--vf-border-width-checkbox-b: var(--vf-border-width-input-b);
--vf-border-width-checkbox-l: var(--vf-border-width-input-l);
--vf-border-width-dropdown: 1px;
--vf-border-width-btn: 1px;
--vf-border-width-toggle: 0.125rem;
--vf-border-width-tag: 1px;
--vf-border-width-blockquote: 3px;
--vf-shadow-input: 0px 0px 0px 0px rgba(0,0,0,0);
--vf-shadow-input-hover: 0px 0px 0px 0px rgba(0,0,0,0);
--vf-shadow-input-focus: 0px 0px 0px 0px rgba(0,0,0,0);
--vf-shadow-handles: 0px 0px 0px 0px rgba(0,0,0,0);
--vf-shadow-handles-hover: 0px 0px 0px 0px rgba(0,0,0,0);
--vf-shadow-handles-focus: 0px 0px 0px 0px rgba(0,0,0,0);
--vf-shadow-btn: 0px 0px 0px 0px rgba(0,0,0,0);
--vf-shadow-dropdown: 0px 0px 0px 0px rgba(0,0,0,0);
--vf-radius-input: 0.25rem;
--vf-radius-input-sm: var(--vf-radius-input);
--vf-radius-input-lg: var(--vf-radius-input);
--vf-radius-btn: var(--vf-radius-input);
--vf-radius-btn-sm: var(--vf-radius-input-sm);
--vf-radius-btn-lg: var(--vf-radius-input);
// Used for eg. list button, slider tooltip, info tooltip
--vf-radius-small: var(--vf-radius-input);
--vf-radius-small-sm: var(--vf-radius-input-sm);
--vf-radius-small-lg: var(--vf-radius-input);
// Used for larger inputs eg. textarea, editor, drag and drop, checkbox/radio blocks
--vf-radius-large: var(--vf-radius-input);
--vf-radius-large-sm: var(--vf-radius-input-sm);
--vf-radius-large-lg: var(--vf-radius-input);
--vf-radius-tag: var(--vf-radius-input);
--vf-radius-tag-sm: var(--vf-radius-input-sm);
--vf-radius-tag-lg: var(--vf-radius-input);
--vf-radius-checkbox: var(--vf-radius-input);
--vf-radius-checkbox-sm: var(--vf-radius-input-sm);
--vf-radius-checkbox-lg: var(--vf-radius-input);
--vf-radius-slider: var(--vf-radius-input);
--vf-radius-slider-sm: var(--vf-radius-input-sm);
--vf-radius-slider-lg: var(--vf-radius-input);
--vf-radius-image: var(--vf-radius-input);
--vf-radius-image-sm: var(--vf-radius-input-sm);
--vf-radius-image-lg: var(--vf-radius-input);
--vf-radius-gallery: var(--vf-radius-input);
--vf-radius-gallery-sm: var(--vf-radius-input-sm);
--vf-radius-gallery-lg: var(--vf-radius-input);
--vf-checkbox-size: 1rem;
--vf-checkbox-size-sm: 0.875rem;
--vf-checkbox-size-lg: 1rem;
--vf-gallery-size: 6rem;
--vf-gallery-size-sm: 5rem;
--vf-gallery-size-lg: 7rem;
--vf-toggle-width: 3rem;
--vf-toggle-width-sm: 2.75rem;
--vf-toggle-width-lg: 3rem;
--vf-toggle-height: 1.25rem;
--vf-toggle-height-sm: 1rem;
--vf-toggle-height-lg: 1.25rem;
--vf-slider-height: 0.375rem;
--vf-slider-height-sm: 0.3125rem;
--vf-slider-height-lg: 0.5rem;
--vf-slider-height-vertical: 20rem;
--vf-slider-height-vertical-sm: var(--vf-slider-height-vertical);
--vf-slider-height-vertical-lg: var(--vf-slider-height-vertical);
--vf-slider-handle-size: 1rem;
--vf-slider-handle-size-sm: 0.875rem;
--vf-slider-handle-size-lg: 1.25rem;
--vf-slider-tooltip-distance: 0.5rem;
--vf-slider-tooltip-distance-sm: 0.375rem;
--vf-slider-tooltip-distance-lg: 0.5rem;
--vf-slider-tooltip-arrow-size: 0.3125rem;
--vf-slider-tooltip-arrow-size-sm: var(--vf-slider-tooltip-arrow-size);
--vf-slider-tooltip-arrow-size-lg: var(--vf-slider-tooltip-arrow-size);
}The theme can also be customized with the following variables in tailwind.config.js and later on with CSS vars:
js
// tailwind.config.js
module.exports = {
// ...
extend: {
form: (theme) => ({
primary: '#07bf9b',
primaryDarker: '#06ac8b', // defaults to 10% darker primary
danger: theme('colors.red.500'),
dangerLighter: theme('colors.red.100'),
success: theme('colors.green.500'),
successLighter: theme('colors.green.100'),
ringColor: '#07bf9b66', // defaults to primary with `ringOpacity` alpha
ringWidth: theme('ringWidth.2'),
ringOpacity: 0.4,
linkColor: 'var(--vf-primary)',
linkDecoration: 'none',
grays: theme('colors.gray'),
darks: theme('colors.gray'),
fontSize: {
base: theme('fontSize.base'),
sm: theme('fontSize.sm'),
lg: theme('fontSize.base'),
},
smallFontSize: {
base: theme('fontSize.sm'),
sm: theme('fontSize')['0.5sm'],
lg: theme('fontSize.sm'),
},
h1FontSize: {
base: '2.125rem',
sm: '2.125rem',
lg: '2.125rem',
},
h2FontSize: {
base: '1.875rem',
sm: '1.875rem',
lg: '1.875rem',
},
h3FontSize: {
base: '1.5rem',
sm: '1.5rem',
lg: '1.5rem',
},
h4FontSize: {
base: '1.25rem',
sm: '1.25rem',
lg: '1.25rem',
},
h1MobileFontSize: {
base: '1.5rem',
sm: '1.5rem',
lg: '1.5rem',
},
h2MobileFontSize: {
base: '1.25rem',
sm: '1.25rem',
lg: '1.25rem',
},
h3MobileFontSize: {
base: '1.125rem',
sm: '1.125rem',
lg: '1.125rem',
},
h4MobileFontSize: {
base: '1rem',
sm: '1rem',
lg: '1rem',
},
blockquoteFontSize: {
base: '1rem',
sm: '0.875rem',
lg: '1rem',
},
lineHeight: {
base: theme('fontSize.base')[1].lineHeight,
sm: theme('fontSize.sm')[1].lineHeight,
lg: theme('fontSize.base')[1].lineHeight,
},
headingsLineHeight: {
base: '1.2',
sm: '1.2',
lg: '1.2',
},
blockquoteLineHeight: {
base: '1.5rem',
sm: '1.25rem',
lg: '1.5rem',
},
smallLineHeight: {
base: theme('fontSize.sm')[1].lineHeight,
sm: theme('fontSize')['0.5sm'][1].lineHeight,
lg: theme('fontSize.sm')[1].lineHeight,
},
letterSpacing: {
base: 0,
sm: 0,
lg: 0,
},
smallLetterSpacing: {
base: 0,
sm: 0,
lg: 0,
},
headingsLetterSpacing: {
base: 0,
sm: 0,
lg: 0,
},
blockquoteLetterSpacing: {
base: 0,
sm: 0,
lg: 0,
},
gutter: {
base: theme('width')['4'],
sm: theme('width')['2'],
lg: theme('width')['4'],
},
inputMinHeight: {
base: theme('height')['9.5'],
sm: theme('height')['8.5'],
lg: theme('height')['11.5'],
},
inputPy: {
base: theme('padding')['1.5'],
sm: theme('padding')['1.5'],
lg: theme('padding')['2.5'],
},
inputPx: {
base: theme('padding')['3'],
sm: theme('padding')['2'],
lg: theme('padding')['3.5'],
},
btnPy: {
base: theme('padding')['1.5'],
sm: theme('padding')['1.5'],
lg: theme('padding')['2.5'],
},
btnPx: {
base: theme('padding')['3.5'],
sm: theme('padding')['3'],
lg: theme('padding')['5'],
},
btnSmallPy: {
base: theme('padding')['1'],
sm: theme('padding')['1'],
lg: theme('padding')['1.5'],
},
btnSmallPx: {
base: theme('padding')['2.5'],
sm: theme('padding')['2.5'],
lg: theme('padding')['3'],
},
tagPy: {
base: '0px',
sm: 'var(--vf-py-tag)',
lg: 'var(--vf-py-tag)',
},
tagPx: {
base: theme('padding')['1.75'],
sm: 'var(--vf-px-tag)',
lg: 'var(--vf-px-tag)',
},
groupTabsPy: {
base: 'var(--vf-py-input)',
sm: 'var(--vf-py-input-sm)',
lg: 'var(--vf-py-input-lg)',
},
groupTabsPx: {
base: 'var(--vf-px-input)',
sm: 'var(--vf-px-input-sm)',
lg: 'var(--vf-px-input-lg)',
},
groupBlocksPy: {
base: theme('padding')['3'],
sm: theme('padding')['2.5'],
lg: theme('padding')['3.5'],
},
groupBlocksPx: {
base: theme('padding')['4'],
sm: theme('padding')['4'],
lg: theme('padding')['4'],
},
sliderTooltipPy: {
base: theme('padding')['0.5'],
sm: theme('padding')['0.25'],
lg: theme('padding')['0.75'],
},
sliderTooltipPx: {
base: theme('padding')['1.5'],
sm: theme('padding')['1.25'],
lg: theme('padding')['2'],
},
blockquotePy: {
base: '0.25rem',
sm: '0.25rem',
lg: '0.25rem',
},
blockquotePx: {
base: '0.75rem',
sm: '0.75rem',
lg: '0.75rem',
},
hrPy: {
base: '2rem',
},
spaceAddon: {
base: '0px',
sm: 'var(--vf-space-addon)',
lg: 'var(--vf-space-addon)',
},
spaceCheckbox: {
base: theme('padding')['1.5'],
sm: 'var(--vf-space-checkbox)',
lg: 'var(--vf-space-checkbox)',
},
spaceTags: {
base: theme('padding')['0.75'],
sm: 'var(--vf-space-tags)',
lg: 'var(--vf-space-tags)',
},
spaceStaticTag1: '1rem',
spaceStaticTag2: '2rem',
spaceStaticTag3: '3rem',
floatingTop: {
base: '0px',
sm: '0px',
lg: theme('padding')['2.75'],
},
borderWidths: { // can be array
input: theme('borderWidth.DEFAULT'),
dropdown: [
'var(--vf-border-width-input-t)',
'var(--vf-border-width-input-r)',
'var(--vf-border-width-input-b)',
'var(--vf-border-width-input-l)'
],
checkbox: [
'var(--vf-border-width-input-t)',
'var(--vf-border-width-input-r)',
'var(--vf-border-width-input-b)',
'var(--vf-border-width-input-l)',
],
radio: [
'var(--vf-border-width-input-t)',
'var(--vf-border-width-input-r)',
'var(--vf-border-width-input-b)',
'var(--vf-border-width-input-l)',
],
btn: [
'var(--vf-border-width-input-t)',
'var(--vf-border-width-input-r)',
'var(--vf-border-width-input-b)',
'var(--vf-border-width-input-l)',
],
toggle: theme('width')['0.5'],
tag: '1px',
blockquote: '3px',
},
inputRadius: { // can be array
base: theme('borderRadius.DEFAULT'),
sm: 'var(--vf-radius-input)',
lg: 'var(--vf-radius-input)',
},
btnRadius: { // can be array
base: 'var(--vf-radius-input)',
sm: 'var(--vf-radius-input-sm)',
lg: 'var(--vf-radius-input-lg)',
},
smallRadius: { // can be array, applies to: checkbox, tags, slider tooltips
base: 'var(--vf-radius-input)',
sm: 'var(--vf-radius-input-sm)',
lg: 'var(--vf-radius-input-lg)',
},
largeRadius: { // // can be array, applies to: drag and drop, checkbox & radio group blocks, textarea, native multiselect
base: 'var(--vf-radius-input)',
sm: 'var(--vf-radius-input-sm)',
lg: 'var(--vf-radius-input-lg)',
},
tagRadius: {
base: 'var(--vf-radius-input)',
sm: 'var(--vf-radius-input-sm)',
lg: 'var(--vf-radius-input-lg)',
},
checkboxRadius: { // can be array
base: 'var(--vf-radius-input)',
sm: 'var(--vf-radius-input-sm)',
lg: 'var(--vf-radius-input-lg)',
},
sliderRadius: { // can be array
base: 'var(--vf-radius-input)',
sm: 'var(--vf-radius-input-sm)',
lg: 'var(--vf-radius-input-lg)',
},
imageRadius: { // can be array
base: 'var(--vf-radius-input)',
sm: 'var(--vf-radius-input-sm)',
lg: 'var(--vf-radius-input-lg)',
},
galleryRadius: { // can be array
base: 'var(--vf-radius-input)',
sm: 'var(--vf-radius-input-sm)',
lg: 'var(--vf-radius-input-lg)',
},
bgColors: {
input: '#ffffff',
inputHover: 'var(--vf-bg-input)',
inputFocus: 'var(--vf-bg-input)',
inputDanger: 'var(--vf-bg-input)',
inputSuccess: 'var(--vf-bg-input)',
disabled: 'var(--vf-gray-200)',
selected: 'rgba(17,24,39,0.05)', // Option hover, cbgroup blocks selected
passive: 'var(--vf-gray-300)',
icon: 'var(--vf-gray-500)',
danger: 'var(--vf-danger-lighter)',
success: 'var(--vf-success-lighter)',
addon: 'transparent',
tag: 'var(--vf-primary)',
sliderHandle: 'var(--vf-primary)',
toggleHandle: '#ffffff',
dateHead: 'var(--vf-gray-100)',
btn: 'var(--vf-primary)',
btnDanger: 'var(--vf-danger)',
btnSecondary: 'var(--vf-gray-200)',
},
textColors: {
onPrimary: '#ffffff',
input: 'var(--vf-gray-800)',
inputHover: 'var(--vf-color-input)',
inputFocus: 'var(--vf-color-input)',
inputDanger: 'var(--vf-color-input)',
inputSuccess: 'var(--vf-color-input)',
placeholder: 'var(--vf-gray-300)',
disabled: 'var(--vf-gray-400)',
passive: 'var(--vf-gray-700)',
muted: 'var(--vf-gray-500)',
floating: 'var(--vf-color-muted)',
floatingFocus: 'var(--vf-color-floating)',
floatingSuccess: 'var(--vf-color-floating)',
floatingDanger: 'var(--vf-color-floating)',
danger: 'var(--vf-danger)',
success: 'var(--vf-success)',
addon: 'inherit',
tag: 'var(--vf-color-on-primary)',
dateHead: 'var(--vf-gray-700)',
btn: 'var(--vf-color-on-primary)',
btnDanger: '#ffffff',
btnSecondary: 'var(--vf-gray-700)',
},
borderColors: {
input: 'var(--vf-gray-300)',
inputFocus: 'var(--vf-primary)',
inputHover: 'var(--vf-border-color-input)',
inputDanger: 'var(--vf-border-color-input)',
inputSuccess: 'var(--vf-border-color-input)',
checked: 'var(--vf-primary)', // applies to checkbox & radio
btn: 'var(--vf-primary)',
tag: 'var(--vf-primary)',
sliderTooltip: 'var(--vf-primary)',
passive: 'var(--vf-gray-300)',
btnDanger: 'var(--vf-danger)',
btnSecondary: 'var(--vf-gray-200)',
blockquote: 'var(--vf-gray-300)',
hr: 'var(--vf-gray-300)',
},
shadows: {
input: '0px 0px 0px 0px rgba(0,0,0,0)',
inputHover: 'var(--vf-shadow-input)',
inputFocus: 'var(--vf-shadow-input)',
handles: '0px 0px 0px 0px rgba(0,0,0,0)',
handlesHover: 'var(--vf-shadow-input-hover)',
handlesFocus: 'var(--vf-shadow-input-focus)',
btn: 'var(--vf-shadow-input)',
dropdown: 'var(--vf-shadow-input)',
},
bgColorsDark: {
input: 'var(--vf-dark-800)',
inputHover: 'var(--vf-bg-input)',
inputFocus: 'var(--vf-bg-input)',
inputDanger: 'var(--vf-bg-input)',
inputSuccess: 'var(--vf-bg-input)',
checkbox: 'var(--vf-dark-700)',
checkboxHover: 'var(--vf-bg-checkbox)',
checkboxFocus: 'var(--vf-bg-checkbox)',
checkboxDanger: 'var(--vf-bg-checkbox)',
checkboxSuccess: 'var(--vf-bg-checkbox)',
disabled: 'var(--vf-dark-700)',
selected: 'var(--vf-dark-700)', // Option hover, cbgroup blocks selected
passive: 'var(--vf-dark-700)',
icon: 'var(--vf-dark-400)',
danger: 'var(--vf-danger-lighter)',
success: 'var(--vf-success-lighter)',
addon: 'transparent',
tag: 'var(--vf-primary)',
sliderHandle: 'var(--vf-primary)',
toggleHandle: '#ffffff',
dateHead: 'var(--vf-dark-700)',
btn: 'var(--vf-primary)',
btnDanger: 'var(--vf-danger)',
btnSecondary: 'var(--vf-dark-700)',
},
textColorsDark: {
onPrimary: '#ffffff',
input: 'var(--vf-dark-100)',
inputHover: 'var(--vf-color-input)',
inputFocus: 'var(--vf-color-input)',
inputDanger: 'var(--vf-color-input)',
inputSuccess: 'var(--vf-color-input)',
placeholder: 'var(--vf-dark-500)',
disabled: 'var(--vf-dark-500)',
passive: 'var(--vf-dark-900)',
muted: 'var(--vf-dark-500)',
floating: 'var(--vf-color-muted)',
floatingFocus: 'var(--vf-color-floating)',
floatingSuccess: 'var(--vf-color-floating)',
floatingDanger: 'var(--vf-color-floating)',
danger: 'var(--vf-danger)',
success: 'var(--vf-success)',
addon: 'initial',
tag: 'var(--vf-color-on-primary)',
dateHead: 'var(--vf-dark-200)',
btn: 'var(--vf-color-on-primary)',
btnDanger: '#ffffff',
btnSecondary: 'var(--vf-dark-300)',
},
borderColorsDark: {
input: 'var(--vf-dark-800)',
inputFocus: 'var(--vf-primary)',
inputHover: 'var(--vf-border-color-input)',
inputDanger: 'var(--vf-border-color-input)',
inputSuccess: 'var(--vf-border-color-input)',
checkbox: 'var(--vf-border-color-input)',
checkboxFocus: 'var(--vf-primary)',
checkboxHover: 'var(--vf-border-color-checkbox)',
checkboxDanger: 'var(--vf-border-color-checkbox)',
checkboxSuccess: 'var(--vf-border-color-checkbox)',
checked: 'var(--vf-primary)', // applies to checkbox & radio
btn: 'var(--vf-primary)',
tag: 'var(--vf-primary)',
sliderTooltip: 'var(--vf-primary)',
passive: 'var(--vf-dark-700)',
btnDanger: 'var(--vf-danger)',
btnSecondary: 'var(--vf-dark-700)',
blockquote: 'var(--vf-dark-700)',
hr: 'var(--vf-dark-700)',
},
shadowsDark: {
input: '0px 0px 0px 0px rgba(0,0,0,0)',
inputHover: 'var(--vf-shadow-input)',
inputFocus: 'var(--vf-shadow-input)',
handles: '0px 0px 0px 0px rgba(0,0,0,0)',
handlesHover: 'var(--vf-shadow-input-hover)',
handlesFocus: 'var(--vf-shadow-input-focus)',
btn: 'var(--vf-shadow-input)',
dropdown: 'var(--vf-shadow-input)',
},
checkboxSize: {
base: theme('width')['4'],
sm: theme('width')['3.5'],
lg: theme('width')['4'],
},
gallerySize: {
base: theme('width')['24'],
sm: theme('width')['20'],
lg: theme('width')['28'],
},
toggleWidth: {
base: theme('width')['12'],
sm: theme('width')['11'],
lg: theme('width')['12'],
},
toggleHeight: {
base: theme('height')['5'],
sm: theme('height')['4'],
lg: theme('height')['5'],
},
sliderHeight: {
base: theme('height')['1.5'],
sm: theme('height')['1.25'],
lg: theme('height')['2'],
},
sliderHeightVertical: {
base: theme('height')['80'],
sm: 'var(--vf-slider-height-vertical)',
lg: 'var(--vf-slider-height-vertical)',
},
sliderHandleSize: {
base: theme('height')['4'],
sm: theme('height')['3.5'],
lg: theme('height')['5'],
},
sliderTooltipDistance: {
base: theme('width')['2'],
sm: theme('width')['1.5'],
lg: theme('width')['2'],
},
sliderTooltipArrowSize: {
base: theme('width')['1.25'],
sm: 'var(--vf-slider-tooltip-arrow-size)',
lg: 'var(--vf-slider-tooltip-arrow-size)',
},
})
},
}