mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-21 21:47:17 +00:00
287 lines
13 KiB
JavaScript
287 lines
13 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
const plugin = require('tailwindcss/plugin');
|
|
|
|
module.exports = {
|
|
darkMode: ['class'],
|
|
content: [
|
|
'./pages/**/*.{js,jsx}',
|
|
'./components/**/*.{js,jsx}',
|
|
'./app/**/*.{js,jsx}',
|
|
'./src/**/*.{js,jsx}',
|
|
'./ee/**/*.{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',
|
|
'elevation-000': '0px 1px 0px 0px rgba(0, 0, 0, 0.10)',
|
|
'elevation-100': '0px 1px 1px 0px rgba(48, 50, 51, 0.10), 0px 0px 1px 0px rgba(48, 50, 51, 0.05)',
|
|
'elevation-200': '0px 2px 4px 0px rgba(48, 50, 51, 0.10), 0px 0px 1px 0px rgba(48, 50, 51, 0.05)',
|
|
'elevation-300': '0px 4px 8px 0px rgba(48, 50, 51, 0.10), 0px 0px 1px 0px rgba(48, 50, 51, 0.05)',
|
|
'elevation-400': '0px 8px 16px 0px rgba(48, 50, 51, 0.10), 0px 0px 1px 0px rgba(48, 50, 51, 0.05)',
|
|
'elevation-500': '0px 16px 24px 0px rgba(48, 50, 51, 0.09), 0px 0px 1px 0px rgba(48, 50, 51, 0.05)',
|
|
'elevation-600': '0px 24px 40px 0px rgba(48, 50, 51, 0.08), 0px 0px 1px 0px rgba(48, 50, 51, 0.05)',
|
|
'elevation-700': '0px 32px 50px 0px rgba(48, 50, 51, 0.08), 0px 0px 1px 0px rgba(48, 50, 51, 0.05)',
|
|
},
|
|
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'),
|
|
plugin(({ addUtilities }) => {
|
|
const newUtilities = {
|
|
'.font-display-small': {
|
|
fontFamily: 'var(--font-family-inter)',
|
|
fontWeight: 'var(--font-weight-medium)',
|
|
fontSize: 'var(--font-size-display-small)',
|
|
lineHeight: 'var(--line-height-display-medium)',
|
|
letterSpacing: 'var(--letter-spacing-display-medium)',
|
|
fontSmoothing: 'antialiased',
|
|
},
|
|
'.font-title-heavy-xx-large': {
|
|
fontFamily: 'var(--font-family-inter)',
|
|
fontWeight: 'var(--font-weight-semi-bold)',
|
|
fontSize: 'var(--font-size-xx-large)',
|
|
lineHeight: 'var(--line-height-xx-large)',
|
|
letterSpacing: 'var(--letter-spacing-xx-large)',
|
|
fontSmoothing: 'subpixel-antialiased',
|
|
},
|
|
'.font-title-xx-large': {
|
|
fontFamily: 'var(--font-family-inter)',
|
|
fontWeight: 'var(--font-weight-medium)',
|
|
fontSize: 'var(--font-size-xx-large)',
|
|
lineHeight: 'var(--line-height-xx-large)',
|
|
letterSpacing: 'var(--letter-spacing-xx-large)',
|
|
fontSmoothing: 'subpixel-antialiased',
|
|
},
|
|
'.font-body-xx-large': {
|
|
fontFamily: 'var(--font-family-inter)',
|
|
fontWeight: 'var(--font-weight-regular)',
|
|
fontSize: 'var(--font-size-xx-large)',
|
|
lineHeight: 'var(--line-height-xx-large)',
|
|
letterSpacing: 'var(--letter-spacing-xx-large)',
|
|
fontSmoothing: 'antialiased',
|
|
},
|
|
'.font-code-regular': {
|
|
fontFamily: 'var(--font-family-geist-mono)',
|
|
fontWeight: 'var(--font-weight-regular)',
|
|
fontSize: 'var(--font-size-default)',
|
|
lineHeight: 'var(--line-height-default)',
|
|
},
|
|
'.font-title-heavy-x-large': {
|
|
fontFamily: 'var(--font-family-inter)',
|
|
fontWeight: 'var(--font-weight-semi-bold)',
|
|
fontSize: 'var(--font-size-x-large)',
|
|
lineHeight: 'var(--line-height-x-large)',
|
|
letterSpacing: 'var(--letter-spacing-x-large)',
|
|
fontSmoothing: 'subpixel-antialiased',
|
|
},
|
|
'.font-title-x-large': {
|
|
fontFamily: 'var(--font-family-inter)',
|
|
fontWeight: 'var(--font-weight-medium)',
|
|
fontSize: 'var(--font-size-x-large)',
|
|
lineHeight: 'var(--line-height-x-large)',
|
|
letterSpacing: 'var(--letter-spacing-x-large)',
|
|
fontSmoothing: 'subpixel-antialiased',
|
|
},
|
|
'.font-body-x-large': {
|
|
fontFamily: 'var(--font-family-inter)',
|
|
fontWeight: 'var(--font-weight-regular)',
|
|
fontSize: 'var(--font-size-x-large)',
|
|
lineHeight: 'var(--line-height-x-large)',
|
|
letterSpacing: 'var(--letter-spacing-x-large)',
|
|
fontSmoothing: 'antialiased',
|
|
},
|
|
'.font-title-heavy-large': {
|
|
fontFamily: 'var(--font-family-inter)',
|
|
fontWeight: 'var(--font-weight-semi-bold)',
|
|
fontSize: 'var(--font-size-large)',
|
|
lineHeight: 'var(--line-height-large)',
|
|
letterSpacing: 'var(--letter-spacing-large)',
|
|
fontSmoothing: 'subpixel-antialiased',
|
|
},
|
|
'.font-title-large': {
|
|
fontFamily: 'var(--font-family-inter)',
|
|
fontWeight: 'var(--font-weight-medium)',
|
|
fontSize: 'var(--font-size-large)',
|
|
lineHeight: 'var(--line-height-large)',
|
|
letterSpacing: 'var(--letter-spacing-large)',
|
|
fontSmoothing: 'subpixel-antialiased',
|
|
},
|
|
'.font-body-large': {
|
|
fontFamily: 'var(--font-family-inter)',
|
|
fontWeight: 'var(--font-weight-regular)',
|
|
fontSize: 'var(--font-size-large)',
|
|
lineHeight: 'var(--line-height-large)',
|
|
letterSpacing: 'var(--letter-spacing-large)',
|
|
fontSmoothing: 'antialiased',
|
|
},
|
|
'.font-title-heavy-medium': {
|
|
fontFamily: 'var(--font-family-inter)',
|
|
fontWeight: 'var(--font-weight-semi-bold)',
|
|
fontSize: 'var(--font-size-default)',
|
|
lineHeight: 'var(--line-height-default)',
|
|
letterSpacing: 'var(--letter-spacing-default)',
|
|
fontSmoothing: 'subpixel-antialiased',
|
|
},
|
|
'.font-title-default': {
|
|
fontFamily: 'var(--font-family-inter)',
|
|
fontWeight: 'var(--font-weight-medium)',
|
|
fontSize: 'var(--font-size-default)',
|
|
lineHeight: 'var(--line-height-default)',
|
|
letterSpacing: 'var(--letter-spacing-default)',
|
|
fontSmoothing: 'subpixel-antialiased',
|
|
},
|
|
'.font-body-default': {
|
|
fontFamily: 'var(--font-family-inter)',
|
|
fontWeight: 'var(--font-weight-regular)',
|
|
fontSize: 'var(--font-size-default)',
|
|
lineHeight: 'var(--line-height-default)',
|
|
letterSpacing: 'var(--letter-spacing-default)',
|
|
fontSmoothing: 'antialiased',
|
|
},
|
|
'.font-title-heavy-small': {
|
|
fontFamily: 'var(--font-family-inter)',
|
|
fontWeight: 'var(--font-weight-semi-bold)',
|
|
fontSize: 'var(--font-size-small)',
|
|
lineHeight: 'var(--line-height-small)',
|
|
letterSpacing: 'var(--letter-spacing-small)',
|
|
fontSmoothing: 'subpixel-antialiased',
|
|
},
|
|
'.font-title-small': {
|
|
fontFamily: 'var(--font-family-inter)',
|
|
fontWeight: 'var(--font-weight-medium)',
|
|
fontSize: 'var(--font-size-small)',
|
|
lineHeight: 'var(--line-height-small)',
|
|
letterSpacing: 'var(--letter-spacing-small)',
|
|
fontSmoothing: 'subpixel-antialiased',
|
|
},
|
|
'.font-body-small': {
|
|
fontFamily: 'var(--font-family-inter)',
|
|
fontWeight: 'var(--font-weight-regular)',
|
|
fontSize: 'var(--font-size-small)',
|
|
lineHeight: 'var(--line-height-small)',
|
|
letterSpacing: 'var(--letter-spacing-small)',
|
|
fontSmoothing: 'antialiased',
|
|
},
|
|
'.font-title-section-title': {
|
|
fontFamily: 'var(--font-family-inter)',
|
|
fontWeight: 'var(--font-weight-semi-bold)',
|
|
fontSize: 'var(--font-size-small)',
|
|
lineHeight: 'var(--line-height-small)',
|
|
letterSpacing: 'var(--letter-spacing-small)',
|
|
fontSmoothing: 'subpixel-antialiased',
|
|
},
|
|
};
|
|
addUtilities(newUtilities, ['responsive', 'hover']);
|
|
}),
|
|
],
|
|
};
|