anything-llm/frontend/tailwind.config.js
Sean Hatfield 727d802779
Light/dark mode UI overhaul (#2629)
* Refactor workspace sidebar component styles (#2380)

rely on css for conditional styles

* New sidebar colors (#2381)

new sidebar colors

* Main container color update (#2382)

* Dark mode setup themes (#2411)

* setup generic tailwind theme + ability to add new themes

* add theme context

* use correct colors from design for sidebar + fix padding

* Settings sidebar UI updates (#2416)

settings sidebar ui updates

* fix sidebar resizing/truncate issue on hover

* Dark mode chat window (#2443)

* Support XLSX files (#2403)

* support xlsx files

* lint

* create seperate docs for each xlsx sheet

* lint

* use node-xlsx pkg for parsing xslx files

* lint

* update error handling

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>

* wip chat window

* ux+ux improvements and update new colors

* chat window dark mode

* remove comment

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>

* Dark mode welcome page (#2444)

* dark mode welcome page styles + refactor

* remove AI_BACKGROUND_COLOR and USER_BACKGROUND_COLOR constants

* Dark mode UI for admin and tools pages + mobile view improvements (#2454)

* dark mode ui for admin and tools pages + mobile view improvements

* lint

* ai provider pages + options darkmode ui

* placeholder generic class

* appearance settings styles

* ai providers mobile margin

* dark mode styles for agent skills + experimental features

* mobile styles on security settings

* fine tune flow ui dark mode

* workspace settings page

* lint

* Dark mode onboarding (#2461)

dark mode onboarding

* update all modals + normalize styles (#2471)

* lint

* Dark mode privacy & experimental pages (#2479)

* document watch + privacy pages ui + mobile modal darkmode

* lint

* Dark mode login screens (#2483)

* multi-user auth screen ui update

* dark mode login screen + recovery key modals

* remove unneeded import

* Workspace preset commands modals dark mode (#2484)

update workspace preset dark mode modal

* Document pinning modal ui update (#2490)

document pinning modal ui update

* Experimental agreement modal dark mode (#2491)

experimental agreement modal dark mode

* Serp options dark mode (#2492)

serp options dark mode

* field fixes

* attempt light mode wip

* setting sidebar

* Toasts and threads

* main page content and privacy page

* force rewrite for light

* add border for light mode rightside content

* more fixes

* wip

* wip

* wip light mode implementation

* wip dark light mode file picker

* document picker light mode ui

* slight ui tweaks

* light mode fine tuning flow

* light mode tweaks + qa fixes

* fix md rendering of light mode + tooltip fixes

* lint

* qa bug fixes

* Add developer hook for theme
move provider to outmost layer

* qa light mode bug fixes

* Linting and hotfixes for UI

* Light mode to dev

* accept invite light mode ui fix

* Fix onboarding inputs in dark mode

* fix close icons
last minute items

* patch z-index on tooltips

* patch light mode citations

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>
2024-11-18 15:40:18 -08:00

224 lines
7.7 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
export default {
darkMode: "class",
content: {
relative: true,
files: [
"./src/components/**/*.{js,jsx}",
"./src/hooks/**/*.js",
"./src/models/**/*.js",
"./src/pages/**/*.{js,jsx}",
"./src/utils/**/*.js",
"./src/*.jsx",
"./index.html",
"./node_modules/@tremor/**/*.{js,ts,jsx,tsx}"
]
},
theme: {
extend: {
rotate: {
"270": "270deg",
"360": "360deg"
},
colors: {
"black-900": "#141414",
accent: "#3D4147",
"sidebar-button": "#31353A",
sidebar: "#25272C",
"historical-msg-system": "rgba(255, 255, 255, 0.05);",
"historical-msg-user": "#2C2F35",
outline: "#4E5153",
"primary-button": "#46C8FF",
secondary: "#2C2F36",
"dark-input": "#18181B",
"mobile-onboarding": "#2C2F35",
"dark-highlight": "#1C1E21",
"dark-text": "#222628",
description: "#D2D5DB",
"x-button": "#9CA3AF",
royalblue: "#065986",
purple: "#4A1FB8",
magenta: "#9E165F",
danger: "#F04438",
error: "#B42318",
warn: "#854708",
success: "#05603A",
darker: "#F4F4F4",
// Generic theme colors
theme: {
bg: {
primary: 'var(--theme-bg-primary)',
secondary: 'var(--theme-bg-secondary)',
sidebar: 'var(--theme-bg-sidebar)',
container: 'var(--theme-bg-container)',
chat: 'var(--theme-bg-chat)',
"chat-input": 'var(--theme-bg-chat-input)',
},
text: {
primary: 'var(--theme-text-primary)',
secondary: 'var(--theme-text-secondary)',
},
sidebar: {
item: {
default: 'var(--theme-sidebar-item-default)',
selected: 'var(--theme-sidebar-item-selected)',
hover: 'var(--theme-sidebar-item-hover)',
},
subitem: {
default: 'var(--theme-sidebar-subitem-default)',
selected: 'var(--theme-sidebar-subitem-selected)',
hover: 'var(--theme-sidebar-subitem-hover)',
},
footer: {
icon: 'var(--theme-sidebar-footer-icon)',
'icon-hover': 'var(--theme-sidebar-footer-icon-hover)',
},
border: 'var(--theme-sidebar-border)',
},
"chat-input": {
border: 'var(--theme-chat-input-border)',
},
"action-menu": {
bg: 'var(--theme-action-menu-bg)',
"item-hover": 'var(--theme-action-menu-item-hover)',
},
settings: {
input: {
bg: 'var(--theme-settings-input-bg)',
active: 'var(--theme-settings-input-active)',
placeholder: 'var(--theme-settings-input-placeholder)',
text: 'var(--theme-settings-input-text)',
}
},
modal: {
border: 'var(--theme-modal-border)',
},
"file-picker": {
hover: 'var(--theme-file-picker-hover)',
}
},
},
backgroundImage: {
"preference-gradient":
"linear-gradient(180deg, #5A5C63 0%, rgba(90, 92, 99, 0.28) 100%);",
"chat-msg-user-gradient":
"linear-gradient(180deg, #3D4147 0%, #2C2F35 100%);",
"selected-preference-gradient":
"linear-gradient(180deg, #313236 0%, rgba(63.40, 64.90, 70.13, 0) 100%);",
"main-gradient": "linear-gradient(180deg, #3D4147 0%, #2C2F35 100%)",
"modal-gradient": "linear-gradient(180deg, #3D4147 0%, #2C2F35 100%)",
"sidebar-gradient": "linear-gradient(90deg, #5B616A 0%, #3F434B 100%)",
"login-gradient": "linear-gradient(180deg, #3D4147 0%, #2C2F35 100%)",
"menu-item-gradient":
"linear-gradient(90deg, #3D4147 0%, #2C2F35 100%)",
"menu-item-selected-gradient":
"linear-gradient(90deg, #5B616A 0%, #3F434B 100%)",
"workspace-item-gradient":
"linear-gradient(90deg, #3D4147 0%, #2C2F35 100%)",
"workspace-item-selected-gradient":
"linear-gradient(90deg, #5B616A 0%, #3F434B 100%)",
"switch-selected": "linear-gradient(146deg, #5B616A 0%, #3F434B 100%)"
},
fontFamily: {
sans: [
"plus-jakarta-sans",
"ui-sans-serif",
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
'"Segoe UI"',
"Roboto",
'"Helvetica Neue"',
"Arial",
'"Noto Sans"',
"sans-serif",
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"'
]
},
animation: {
sweep: "sweep 0.5s ease-in-out",
"pulse-glow": "pulse-glow 1.5s infinite"
},
keyframes: {
sweep: {
"0%": { transform: "scaleX(0)", transformOrigin: "bottom left" },
"100%": { transform: "scaleX(1)", transformOrigin: "bottom left" }
},
fadeIn: {
"0%": { opacity: 0 },
"100%": { opacity: 1 }
},
fadeOut: {
"0%": { opacity: 1 },
"100%": { opacity: 0 }
},
"pulse-glow": {
"0%": {
opacity: 1,
transform: "scale(1)",
boxShadow: "0 0 0 rgba(255, 255, 255, 0.0)",
backgroundColor: "rgba(255, 255, 255, 0.0)"
},
"50%": {
opacity: 1,
transform: "scale(1.1)",
boxShadow: "0 0 15px rgba(255, 255, 255, 0.2)",
backgroundColor: "rgba(255, 255, 255, 0.1)"
},
"100%": {
opacity: 1,
transform: "scale(1)",
boxShadow: "0 0 0 rgba(255, 255, 255, 0.0)",
backgroundColor: "rgba(255, 255, 255, 0.0)"
}
}
}
}
},
variants: {
extend: {
backgroundColor: ['light'],
textColor: ['light'],
}
},
// Required for rechart styles to show since they can be rendered dynamically and will be tree-shaken if not safe-listed.
safelist: [
{
pattern:
/^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
variants: ["hover", "ui-selected"]
},
{
pattern:
/^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
variants: ["hover", "ui-selected"]
},
{
pattern:
/^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
variants: ["hover", "ui-selected"]
},
{
pattern:
/^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/
},
{
pattern:
/^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/
},
{
pattern:
/^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/
}
],
plugins: [
function ({ addVariant }) {
addVariant('light', '.light &') // Add the `light:` variant
},
]
}