2a69b37958
# Pull Request Template ## Description This PR includes the following updates: 1. Updated the design system color tokens by introducing new tokens for surfaces, overlays, buttons, labels, and cards, along with refinements to existing shades. 2. Refreshed both light and dark themes with adjusted background, border, and solid colors. 3. Replaced static Inter font files with the Inter variable font (including italic), supporting weights from 100–900. 4. Added custom font weights (420, 440, 460, 520) along with custom typography classes to enable more fine-grained and consistent typography control. ## Type of change - [x] New feature (non-breaking change which adds functionality) ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Pranav <pranav@chatwoot.com>
277 lines
7.5 KiB
JavaScript
277 lines
7.5 KiB
JavaScript
const { slateDark } = require('@radix-ui/colors');
|
|
import { colors } from './theme/colors';
|
|
import { icons } from './theme/icons';
|
|
const defaultTheme = require('tailwindcss/defaultTheme');
|
|
const {
|
|
iconsPlugin,
|
|
getIconCollections,
|
|
} = require('@egoist/tailwindcss-icons');
|
|
|
|
const defaultSansFonts = [
|
|
'-apple-system',
|
|
'system-ui',
|
|
'BlinkMacSystemFont',
|
|
'"Segoe UI"',
|
|
'Roboto',
|
|
'"Helvetica Neue"',
|
|
'Tahoma',
|
|
'Arial',
|
|
'sans-serif !important',
|
|
];
|
|
|
|
const tailwindConfig = {
|
|
darkMode: 'class',
|
|
content: [
|
|
'./enterprise/app/views/**/*.html.erb',
|
|
'./app/javascript/widget/**/*.vue',
|
|
'./app/javascript/v3/**/*.vue',
|
|
'./app/javascript/dashboard/**/*.vue',
|
|
'./app/javascript/portal/**/*.vue',
|
|
'./app/javascript/shared/**/*.vue',
|
|
'./app/javascript/survey/**/*.vue',
|
|
'./app/javascript/dashboard/components-next/**/*.vue',
|
|
'./app/javascript/dashboard/helper/**/*.js',
|
|
'./app/javascript/dashboard/composables/**/*.js',
|
|
'./app/javascript/dashboard/components-next/**/*.js',
|
|
'./app/javascript/dashboard/routes/dashboard/**/**/*.js',
|
|
'./app/views/**/*.html.erb',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: defaultSansFonts,
|
|
inter: ['Inter', ...defaultSansFonts],
|
|
interDisplay: ['InterDisplay', ...defaultSansFonts],
|
|
},
|
|
fontWeight: {
|
|
420: '420',
|
|
440: '440',
|
|
460: '460',
|
|
520: '520',
|
|
},
|
|
typography: {
|
|
bubble: {
|
|
css: {
|
|
color: 'rgb(var(--slate-12))',
|
|
lineHeight: '1.6',
|
|
fontSize: '14px',
|
|
'*': {
|
|
'&:first-child': {
|
|
marginTop: '0',
|
|
},
|
|
},
|
|
overflowWrap: 'anywhere',
|
|
|
|
strong: {
|
|
color: 'rgb(var(--slate-12))',
|
|
fontWeight: '700',
|
|
},
|
|
|
|
b: {
|
|
color: 'rgb(var(--slate-12))',
|
|
fontWeight: '700',
|
|
},
|
|
|
|
h1: {
|
|
color: 'rgb(var(--slate-12))',
|
|
fontWeight: '700',
|
|
fontSize: '1.25rem',
|
|
'&:first-child': {
|
|
marginTop: '0',
|
|
},
|
|
},
|
|
h2: {
|
|
color: 'rgb(var(--slate-12))',
|
|
fontWeight: '700',
|
|
fontSize: '1rem',
|
|
'&:first-child': {
|
|
marginTop: '0',
|
|
},
|
|
},
|
|
h3: {
|
|
color: 'rgb(var(--slate-12))',
|
|
fontWeight: '700',
|
|
fontSize: '1rem',
|
|
'&:first-child': {
|
|
marginTop: '0',
|
|
},
|
|
},
|
|
hr: {
|
|
marginTop: '1.5em',
|
|
marginBottom: '1.5em',
|
|
},
|
|
a: {
|
|
color: 'rgb(var(--slate-12))',
|
|
textDecoration: 'underline',
|
|
},
|
|
ul: {
|
|
paddingInlineStart: '0.625em',
|
|
},
|
|
ol: {
|
|
paddingInlineStart: '0.625em',
|
|
},
|
|
'ul li': {
|
|
margin: '0 0 0.5em 1em',
|
|
listStyleType: 'disc',
|
|
'[dir="rtl"] &': {
|
|
margin: '0 1em 0.5em 0',
|
|
},
|
|
},
|
|
'ol li': {
|
|
margin: '0 0 0.5em 1em',
|
|
listStyleType: 'decimal',
|
|
'[dir="rtl"] &': {
|
|
margin: '0 1em 0.5em 0',
|
|
},
|
|
},
|
|
blockquote: {
|
|
color: 'rgb(var(--slate-11))',
|
|
borderLeft: `4px solid rgb(var(--black-alpha-1))`,
|
|
paddingLeft: '1em',
|
|
'[dir="rtl"] &': {
|
|
borderLeft: 'none',
|
|
paddingLeft: '0',
|
|
borderRight: `4px solid rgb(var(--black-alpha-1))`,
|
|
paddingRight: '1em',
|
|
},
|
|
'[dir="ltr"] &': {
|
|
borderRight: 'none',
|
|
paddingRight: '0',
|
|
},
|
|
},
|
|
code: {
|
|
backgroundColor: 'rgb(var(--alpha-3))',
|
|
color: 'rgb(var(--slate-11))',
|
|
padding: '0.2em 0.4em',
|
|
borderRadius: '4px',
|
|
fontSize: '0.95em',
|
|
'&::before': {
|
|
content: `none`,
|
|
},
|
|
'&::after': {
|
|
content: `none`,
|
|
},
|
|
},
|
|
pre: {
|
|
backgroundColor: 'rgb(var(--alpha-3))',
|
|
padding: '1em',
|
|
borderRadius: '6px',
|
|
overflowX: 'auto',
|
|
},
|
|
table: {
|
|
width: '100%',
|
|
borderCollapse: 'collapse',
|
|
},
|
|
th: {
|
|
padding: '0.75em',
|
|
color: 'rgb(var(--slate-12))',
|
|
border: `none`,
|
|
textAlign: 'start',
|
|
fontWeight: '600',
|
|
},
|
|
tr: {
|
|
border: `none`,
|
|
},
|
|
td: {
|
|
padding: '0.75em',
|
|
border: `none`,
|
|
},
|
|
img: {
|
|
maxWidth: '100%',
|
|
height: 'auto',
|
|
marginTop: 'unset',
|
|
marginBottom: 'unset',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
screens: {
|
|
xs: '480px',
|
|
sm: '640px',
|
|
md: '768px',
|
|
lg: '1024px',
|
|
xl: '1280px',
|
|
'2xl': '1536px',
|
|
'3xl': '1900px',
|
|
},
|
|
fontSize: {
|
|
...defaultTheme.fontSize,
|
|
xxs: '0.625rem',
|
|
},
|
|
colors: {
|
|
transparent: 'transparent',
|
|
white: '#fff',
|
|
'modal-backdrop-light': 'rgba(0, 0, 0, 0.4)',
|
|
'modal-backdrop-dark': 'rgba(0, 0, 0, 0.6)',
|
|
current: 'currentColor',
|
|
...colors,
|
|
body: slateDark.slate7,
|
|
},
|
|
keyframes: {
|
|
...defaultTheme.keyframes,
|
|
wiggle: {
|
|
'0%': { transform: 'translateX(0)' },
|
|
'15%': { transform: 'translateX(0.375rem)' },
|
|
'30%': { transform: 'translateX(-0.375rem)' },
|
|
'45%': { transform: 'translateX(0.375rem)' },
|
|
'60%': { transform: 'translateX(-0.375rem)' },
|
|
'75%': { transform: 'translateX(0.375rem)' },
|
|
'90%': { transform: 'translateX(-0.375rem)' },
|
|
'100%': { transform: 'translateX(0)' },
|
|
},
|
|
'fade-in-up': {
|
|
'0%': { opacity: 0, transform: 'translateY(0.5rem)' },
|
|
'100%': { opacity: 1, transform: 'translateY(0)' },
|
|
},
|
|
'loader-pulse': {
|
|
'0%': { opacity: 0.4 },
|
|
'50%': { opacity: 1 },
|
|
'100%': { opacity: 0.4 },
|
|
},
|
|
'card-select': {
|
|
'0%, 100%': {
|
|
transform: 'translateX(0)',
|
|
},
|
|
'50%': {
|
|
transform: 'translateX(1px)',
|
|
},
|
|
},
|
|
shake: {
|
|
'0%, 100%': { transform: 'translateX(0)' },
|
|
'25%': { transform: 'translateX(0.234375rem)' },
|
|
'50%': { transform: 'translateX(-0.234375rem)' },
|
|
'75%': { transform: 'translateX(0.234375rem)' },
|
|
},
|
|
},
|
|
animation: {
|
|
...defaultTheme.animation,
|
|
wiggle: 'wiggle 0.5s ease-in-out',
|
|
'fade-in-up': 'fade-in-up 0.3s ease-out',
|
|
'loader-pulse': 'loader-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
'card-select': 'card-select 0.25s ease-in-out',
|
|
shake: 'shake 0.3s ease-in-out 0s 2',
|
|
},
|
|
},
|
|
plugins: [
|
|
// eslint-disable-next-line
|
|
require('@tailwindcss/typography'),
|
|
iconsPlugin({
|
|
collections: {
|
|
woot: { icons },
|
|
...getIconCollections([
|
|
'lucide',
|
|
'logos',
|
|
'ri',
|
|
'ph',
|
|
'material-symbols',
|
|
'teenyicons',
|
|
'fluent',
|
|
]),
|
|
},
|
|
}),
|
|
],
|
|
};
|
|
|
|
module.exports = tailwindConfig;
|