mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-21 21:47:17 +00:00
10c3bb6302
* test init :: shadecn , tailwind * fix :: warnings * fix :: theming * fix : theming * fix : proper styling * feat :: added base button component * adding storybook for button * updates * netlify node and npm version correction * completed button styles and configg updates * adding more storybook controls dark mode etc * updates * added storybook to gitignore * cleanups * revert changes * restructured files * update netlify config * config change * build command * build command * check * add toml file in frontend * updates * update toml file * update * update toml file * update toml file * revert few changes , review updates * loader size fix * fix : typo * fix : keep button width same on loading * made background as transparent * cleanup * revert * adding prefix * code structure updation * removed unused packages * updated border for buttons * update : review comments * replace clsx with classnames * temp commit for filename change * temp commit * reverting name change commits * fix : auoprefixer warning --------- Co-authored-by: Adish M <[email protected]>
122 lines
5.8 KiB
JavaScript
122 lines
5.8 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
darkMode: ['class'],
|
|
content: ['./pages/**/*.{js,jsx}', './components/**/*.{js,jsx}', './app/**/*.{js,jsx}', './src/**/*.{js,jsx}'],
|
|
prefix: 'tw-',
|
|
corePlugins: {
|
|
preflight: false,
|
|
},
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
'page-default': 'var(--page-default)',
|
|
'page-weak': 'var(--page-weak)',
|
|
'background-surface-layer-01': 'var(--background-surface-layer-01)',
|
|
'background-surface-layer-02': 'var(--background-surface-layer-02)',
|
|
'background-surface-layer-03': 'var(--background-surface-layer-03)',
|
|
'background-accent-strong': 'var(--background-accent-strong)',
|
|
'background-accent-weak': 'var(--background-accent-weak)',
|
|
'background-success-strong': 'var(--background-success-strong)',
|
|
'background-success-weak': 'var(--background-success-weak)',
|
|
'background-error-strong': 'var(--background-error-strong)',
|
|
'background-error-weak': 'var(--background-error-weak)',
|
|
'background-warning-stong': 'var(--background-warning-stong)',
|
|
'background-warning-weak': 'var(--background-warning-weak)',
|
|
'background-inverse': 'var(--background-Inverse)',
|
|
'text-default': 'var(--text-default)',
|
|
'text-medium': 'var(--text-medium)',
|
|
'text-placeholder': 'var(--text-placeholder)',
|
|
'text-inverse': 'var(--text-inverse)',
|
|
'text-brand': 'var(--text-brand)',
|
|
'text-accent': 'var(--text-brand)',
|
|
'text-selected': 'var(--text-selected)',
|
|
'text-success': 'var(--text-success)',
|
|
'text-warning': 'var(--text-warning)',
|
|
'text-danger': 'var(--text-danger)',
|
|
'text-on-solid': 'var(--text-on-solid)',
|
|
'text-disabled': 'var(--text-disabled)',
|
|
'text-disabled-on-solid': 'var(--text-disabled-on-solid)',
|
|
'icon-strong': 'var(--icon-strong)',
|
|
'icon-default': 'var(--icon-default)',
|
|
'icon-weak': 'var(--icon-weak)',
|
|
'icon-inverse': 'var(--icon-inverse)',
|
|
'icon-on-solid': 'var(--icon-on-solid)',
|
|
'icon-accent': 'var(--icon-accent)',
|
|
'icon-brand': 'var(--icon-brand)',
|
|
'icon-success': 'var(--icon-success)',
|
|
'icon-warning': 'var(--icon-warning)',
|
|
'icon-danger': 'var(--icon-danger)',
|
|
'icon-disabled': 'var(--icon-disabled)',
|
|
'border-strong': 'var(--border-strong)',
|
|
'border-default': 'var(--border-default)',
|
|
'border-weak': 'var(--border-weak)',
|
|
'border-accent-strong': 'var(--border-accent-strong)',
|
|
'border-accent-weak': 'var(--border-accent-weak)',
|
|
'border-success-strong': 'var(--border-success-strong)',
|
|
'border-success-weak': 'var(--border-success-weak)',
|
|
'border-warning-strong': 'var(--border-warning-strong)',
|
|
'border-warning-weak': 'var(--border-warning-weak)',
|
|
'border-danger-strong': 'var(--border-danger-strong)',
|
|
'border-danger-weak': 'var(--border-danger-weak)',
|
|
'border-disabled': 'var(--border-disabled)',
|
|
'interactive-weak': 'var(--interactive-weak)',
|
|
'interactive-default': 'var(--interactive-default)',
|
|
'interactive-hover': 'var(--interactive-hover)',
|
|
'interactive-selected': 'var(--interactive-selected)',
|
|
'interactive-disabled': 'var(--interactive-disabled)',
|
|
'interactive-focus-outline': 'var(--interactive-focus-outline)',
|
|
'interactive-focus-inner-shadow': 'var(--interactive-focus-inner-shadow)',
|
|
'button-primary': 'var(--button-primary)',
|
|
'button-primary-hover': 'var(--button-primary-hover)',
|
|
'button-primary-pressed': 'var(--button-primary-pressed)',
|
|
'button-primary-disabled': 'var(--button-primary-disabled)',
|
|
'button-secondary': 'var(--button-secondary)',
|
|
'button-secondary-hover': 'var(--button-secondary-hover)',
|
|
'button-secondary-pressed': 'var(--button-secondary-pressed)',
|
|
'button-secondary-disabled': 'var(--button-secondary-disabled)',
|
|
'button-outline': 'var(--button-outline)',
|
|
'button-outline-hover': 'var(--button-outline-hover)',
|
|
'button-outline-pressed': 'var(--button-outline-pressed)',
|
|
'button-outline-disabled': 'var(--button-outline-disabled)',
|
|
'button-danger-primary': 'var(--button-danger-primary)',
|
|
'button-danger-primary-hover': 'var(--button-danger-primary-hover)',
|
|
'button-danger-primary-pressed': 'var(--button-danger-primary-pressed)',
|
|
'button-danger-primary-disabled': 'var(--button-danger-primary-disabled)',
|
|
'button-danger-secondary': 'var(--button-danger-secondary)',
|
|
'button-danger-secondary-hover': 'var(--button-danger-secondary-hover)',
|
|
'button-danger-secondary-pressed': 'var(--button-danger-secondary-pressed)',
|
|
'button-danger-secondary-disabled': 'var(--button-danger-secondary-disabled)',
|
|
'switch-tab': 'var(--switch-tab)',
|
|
'switch-tag': 'var(--switch-tag)',
|
|
'switch-background-off': 'var(--switch-background-off)',
|
|
'switch-background-on': 'var(--switch-background-on)',
|
|
'slider-handle': 'var(--slider-handle)',
|
|
'slider-track': 'var(--slider-track)',
|
|
'slider-fill': 'var(--slider-fill)',
|
|
},
|
|
boxShadow: {
|
|
'interactive-focus-outline': ' 0px 0px 0px 2px var(--interactive-focus-outline)',
|
|
'interactive-focus-outline-inset': 'inset 0px 0px 0px 2px #fff',
|
|
},
|
|
fontSize: {
|
|
sm: ['11px', '16px'],
|
|
base: ['12px', '18px'],
|
|
lg: ['14px', '20px'],
|
|
xl: ['16px', '24px'],
|
|
},
|
|
fontWeight: {
|
|
thin: '100',
|
|
hairline: '100',
|
|
extralight: '200',
|
|
light: '300',
|
|
normal: '400',
|
|
medium: '500',
|
|
semibold: '600',
|
|
bold: '700',
|
|
extrabold: '800',
|
|
black: '900',
|
|
},
|
|
},
|
|
},
|
|
plugins: [require('tailwindcss-animate')],
|
|
};
|