ts-analytics/crosswind.config.ts at main · stacksjs/ts-analytics · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import type { CrosswindOptions } from '@cwcss/crosswind'

export default {
  content: [
    './resources/views/**/*.stx',
    './resources/layouts/**/*.stx',
    './resources/components/**/*.stx',
  ],
  output: './public/assets/crosswind.css',
  minify: false,
  theme: {
    extend: {
      colors: {
        bg: {
          DEFAULT: 'var(--bg)',
          2: 'var(--bg2)',
          3: 'var(--bg3)',
        },
        text: {
          DEFAULT: 'var(--text)',
          2: 'var(--text2)',
        },
        muted: 'var(--muted)',
        border: 'var(--border)',
        accent: {
          DEFAULT: 'var(--accent)',
          2: 'var(--accent2)',
        },
        success: 'var(--success)',
        warning: 'var(--warning)',
        error: 'var(--error)',
      },
    },
  },
  shortcuts: {
    'stat-card': 'bg-bg-2 border border-border rounded-xl p-5 transition-colors duration-200 hover:border-accent',
    'panel': 'bg-bg-2 border border-border rounded-xl p-6',
    'panel-header': 'flex justify-between items-center mb-4',
    'panel-title': 'flex items-center gap-2 font-semibold text-sm text-text',
    'icon-btn': 'bg-transparent border-none p-1.5 cursor-pointer text-muted inline-flex items-center justify-center rounded-md transition-all duration-150 hover:bg-bg-3 hover:text-text',
    'date-range-btn': 'py-1.5 px-3 bg-bg-3 border border-transparent rounded-md text-text-2 text-xs font-medium cursor-pointer transition-all duration-150 hover:bg-bg hover:text-text',
    'date-range-btn-active': 'bg-accent text-white border-accent',
    'filter-select': 'py-2 pr-8 pl-3 bg-bg-2 border border-border rounded-lg text-text text-[0.8125rem] cursor-pointer transition-colors duration-150 appearance-none hover:border-muted focus:outline-none focus:border-accent',
    'badge': 'inline-flex items-center py-0.5 px-2 rounded-full text-[0.6875rem] font-medium',
    'badge-success': 'bg-success/15 text-success',
    'badge-warning': 'bg-warning/15 text-warning',
    'badge-error': 'bg-error/15 text-error',
    'badge-info': 'bg-accent/15 text-accent',
    'btn': 'inline-flex items-center justify-center gap-2 py-2 px-4 rounded-md text-sm font-medium cursor-pointer transition-all duration-150 border border-transparent',
    'btn-primary': 'bg-accent text-white hover:bg-accent-2',
    'btn-secondary': 'bg-bg-3 text-text border-border hover:bg-bg',
    'btn-danger': 'bg-error text-white hover:opacity-90',
    'empty-state': 'text-center p-8 text-muted',
    'progress-bar': 'h-1.5 bg-bg-3 rounded-sm overflow-hidden',
    'progress-bar-fill': 'h-full bg-accent rounded-sm transition-[width] duration-300',
    'tab-btn': 'py-2 px-4 bg-transparent border-none text-muted text-sm font-medium cursor-pointer border-b-2 border-b-transparent transition-all duration-150 hover:text-text',
    'tab-btn-active': 'text-accent border-b-accent',
    'form-input': 'w-full py-2.5 px-3 bg-bg-2 border border-border rounded-md text-text text-sm transition-colors duration-150 focus:outline-none focus:border-accent',
    'modal-overlay': 'fixed inset-0 bg-black/70 flex items-center justify-center z-[1000] p-4',
    'modal-content': 'bg-bg border border-border rounded-xl w-full max-w-[600px] max-h-[90vh] overflow-y-auto',
    'modal-header': 'flex justify-between items-center px-6 py-4 border-b border-border',
    'modal-body': 'p-6',
    'modal-footer': 'flex justify-end gap-3 px-6 py-4 border-t border-border',
    'session-card': 'bg-bg-2 border border-border rounded-lg p-4 cursor-pointer transition-all duration-150 hover:border-accent hover:bg-bg-3',
    'vital-card': 'bg-bg-2 border border-border rounded-lg p-4 text-center',
    'error-card': 'bg-bg-2 border border-border rounded-lg p-4 cursor-pointer transition-all duration-150 hover:border-accent',
    'tooltip': 'absolute bg-bg border border-border rounded-lg py-2 px-3 text-xs shadow-lg pointer-events-none z-[100]',
  },
  safelist: [
    'spinning',
    'pulse',
    'realtime-dot',
    'good',
    'needs-improvement',
    'poor',
  ],
} satisfies CrosswindOptions