mirror of
https://github.com/lingble/chatwoot.git
synced 2025-10-29 18:22:53 +00:00
6d3ecfe3c1
This PR has the initial version of the new sidebar targeted for the next major redesign of the app. This PR includes the following changes - Components in the `layouts-next` and `base-next` directories in `dashboard/components` - Two generic components `Avatar` and `Icon` - `SidebarGroup` component to manage expandable sidebar groups with nested navigation items. This includes handling active states, transitions, and permissions. - `SidebarGroupHeader` component to display the header of each navigation group with optional icons and active state indication. - `SidebarGroupLeaf` component for individual navigation items within a group, supporting icons and active state. - `SidebarGroupSeparator` component to visually separate nested navigation items. (They look a lot like header) - `SidebarGroupEmptyLeaf` component to render empty state of any navigation groups. ---- Co-authored-by: Pranav <pranav@chatwoot.com> Co-authored-by: Pranav <pranavrajs@gmail.com>
128 lines
3.6 KiB
JavaScript
128 lines
3.6 KiB
JavaScript
const { slateDark } = require('@radix-ui/colors');
|
|
import { colors } from './theme/colors';
|
|
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/views/**/*.html.erb',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: defaultSansFonts,
|
|
inter: ['Inter', ...defaultSansFonts],
|
|
interDisplay: ['Inter Display', ...defaultSansFonts],
|
|
},
|
|
},
|
|
screens: {
|
|
xs: '480px',
|
|
sm: '640px',
|
|
md: '768px',
|
|
lg: '1024px',
|
|
xl: '1280px',
|
|
'2xl': '1536px',
|
|
},
|
|
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: {
|
|
alert: {
|
|
body: `<path d="M1.81348 0.9375L1.69727 7.95117H0.302734L0.179688 0.9375H1.81348ZM1 11.1025C0.494141 11.1025 0.0908203 10.7061 0.0976562 10.2207C0.0908203 9.72852 0.494141 9.33203 1 9.33203C1.49219 9.33203 1.89551 9.72852 1.90234 10.2207C1.89551 10.7061 1.49219 11.1025 1 11.1025Z" fill="currentColor" />`,
|
|
width: 2,
|
|
height: 12,
|
|
},
|
|
},
|
|
},
|
|
...getIconCollections(['lucide', 'logos', 'ri']),
|
|
},
|
|
}),
|
|
],
|
|
};
|
|
|
|
module.exports = tailwindConfig;
|