Files
ChatApp/apps/desktop/tailwind.config.js
byGalax 825160ee46 feat(desktop): port v0.11.4-v0.15.2 from Tauri to Electron + Discord-parity audio (v0.16.0)
Chronological port of every Tauri release commit (v0.11.4 -> v0.15.2)
into the Electron rebuild, plus Discord-style audio handling that goes
beyond the Tauri original.

Highlights:
  - All 17 Tauri release commits ported (audio fixes, custom notification
    sound, Discord-style chat UX, profile banner, changelog page,
    Discord-parity call UX, screen-share echo + re-watch UX, audio-loop
    fix).
  - Native napi-rs audio-loopback addon with WASAPI process-loopback:
      * EXCLUDE_TARGET_PROCESS_TREE for full-screen shares -> peers
        never hear themselves echoed back through the capture.
      * INCLUDE_TARGET_PROCESS_TREE for window shares -> only the
        picked window's audio is captured, not the whole OS mixer
        (Discord parity).
      * HWND -> PID resolution via Win32 GetWindowThreadProcessId.
  - Discord-style screen-source picker (thumbnail grid, screens vs
    apps tabs, live-refreshing thumbnails).
  - Hash routing fix for packaged builds (file:// can't resolve
    BrowserRouter paths).
  - Tauri sources removed (apps/desktop/src-tauri).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-06 23:35:01 +02:00

136 lines
4.5 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
export default {
darkMode: 'class',
content: [
'./index.html',
'./src/**/*.{ts,tsx}',
'../../packages/ui-web/src/**/*.{ts,tsx}',
],
theme: {
extend: {
fontFamily: {
sans: [
'Inter',
'ui-sans-serif',
'system-ui',
'-apple-system',
'Segoe UI',
'Roboto',
'Helvetica Neue',
'Arial',
'sans-serif',
],
display: ['Outfit', 'Inter', 'system-ui', 'sans-serif'],
mono: [
'JetBrains Mono',
'ui-monospace',
'SFMono-Regular',
'Menlo',
'Monaco',
'Consolas',
'monospace',
],
},
colors: {
ink: {
950: '#050507',
900: '#0A0A0F',
800: '#111118',
700: '#1A1A24',
600: '#252533',
500: '#3A3A4D',
},
brand: {
50: '#EEF0FF',
100: '#DDE0FF',
200: '#C4CAFF',
300: '#9EA7FF',
400: '#7885FF',
500: '#5865F2',
600: '#4752C4',
700: '#3C45A5',
800: '#313889',
900: '#232861',
},
// Clean-Rail design tokens. RGB-tuple form so alpha modifiers
// (e.g. bg-surface/50) work under both themes.
surface: 'rgb(var(--bg-rgb) / <alpha-value>)',
'surface-2': 'rgb(var(--bg-2-rgb) / <alpha-value>)',
'surface-3': 'rgb(var(--bg-3-rgb) / <alpha-value>)',
fg: 'rgb(var(--fg-rgb) / <alpha-value>)',
'fg-muted': 'rgb(var(--fg-muted-rgb) / <alpha-value>)',
accent: 'rgb(var(--accent-rgb) / <alpha-value>)',
'accent-fg': 'rgb(var(--accent-fg-rgb) / <alpha-value>)',
// Line has baked-in theme-specific alpha — direct var, no modifier.
line: 'var(--line)',
},
animation: {
'blob-a': 'blob 22s ease-in-out infinite',
'blob-b': 'blob 28s ease-in-out infinite reverse',
'fade-in': 'fadeIn 400ms ease-out',
'slide-up': 'slideUp 350ms ease-out',
'slide-down': 'slideDown 350ms ease-out',
'pulse-ring': 'pulseRing 2s ease-out infinite',
'audio-pulse': 'audioPulse 1.3s ease-out infinite',
'live-dot': 'liveDotPulse 1.5s ease-in-out infinite',
'slide-in-call': 'slideInCall 0.4s cubic-bezier(0.22,1,0.36,1)',
'fs-hint': 'fsHintFade 3.5s ease-out forwards',
'reaction-pop': 'reactionPop 220ms cubic-bezier(0.34, 1.56, 0.64, 1)',
},
keyframes: {
blob: {
'0%, 100%': { transform: 'translate(0px, 0px) scale(1)' },
'33%': { transform: 'translate(40px, -60px) scale(1.1)' },
'66%': { transform: 'translate(-30px, 30px) scale(0.9)' },
},
fadeIn: {
from: { opacity: '0' },
to: { opacity: '1' },
},
slideUp: {
from: { opacity: '0', transform: 'translateY(8px)' },
to: { opacity: '1', transform: 'translateY(0)' },
},
slideDown: {
from: { opacity: '0', transform: 'translateY(-12px)' },
to: { opacity: '1', transform: 'translateY(0)' },
},
pulseRing: {
'0%': { transform: 'scale(0.85)', opacity: '0.6' },
'100%': { transform: 'scale(1.25)', opacity: '0' },
},
audioPulse: {
'0%': { transform: 'scale(1)', opacity: '0.8' },
'100%': { transform: 'scale(1.3)', opacity: '0' },
},
liveDotPulse: {
'0%, 100%': { opacity: '1' },
'50%': { opacity: '0.4' },
},
slideInCall: {
from: { opacity: '0', transform: 'translateY(20px)' },
to: { opacity: '1', transform: 'translateY(0)' },
},
fsHintFade: {
'0%': { opacity: '0', transform: 'translate(-50%, -6px)' },
'15%, 75%': { opacity: '1', transform: 'translate(-50%, 0)' },
'100%': { opacity: '0', transform: 'translate(-50%, -6px)' },
},
reactionPop: {
'0%': { opacity: '0', transform: 'scale(0.4)' },
'70%': { opacity: '1', transform: 'scale(1.15)' },
'100%': { opacity: '1', transform: 'scale(1)' },
},
},
boxShadow: {
glow: '0 0 40px -8px rgba(99, 102, 241, 0.35)',
'call-card': '0 20px 60px rgba(0,0,0,0.1)',
'call-card-dark': '0 20px 60px rgba(0,0,0,0.5)',
'pip-call': '0 12px 40px rgba(0,0,0,0.2), 0 0 0 3px rgba(79,70,229,0.15)',
'accept-btn': '0 4px 14px rgba(22,163,74,0.3)',
},
},
},
plugins: [],
};