frontend/tailwind.config.ts at main · Dorisio/frontend · 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import type { Config } from 'tailwindcss';

const config: Config = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      white: '#ffffff',
      black: '#000000',
      // ClickHouse Design System Colors
      primary: '#faff69',
      'primary-active': '#e6eb52',
      'primary-disabled': '#3a3a1f',
      ink: '#ffffff',
      body: '#cccccc',
      'body-strong': '#e6e6e6',
      muted: '#888888',
      'muted-soft': '#5a5a5a',
      hairline: '#2a2a2a',
      'hairline-strong': '#3a3a3a',
      canvas: '#0a0a0a',
      'surface-soft': '#121212',
      'surface-card': '#1a1a1a',
      'surface-elevated': '#242424',
      'surface-yellow-band': '#faff69',
      'on-primary': '#0a0a0a',
      'on-dark': '#ffffff',
      'on-yellow': '#0a0a0a',
      'accent-emerald': '#22c55e',
      'accent-rose': '#ef4444',
      'accent-blue': '#3b82f6',
      success: '#22c55e',
      warning: '#f59e0b',
      error: '#ef4444',
    },
    extend: {
      fontSize: {
        'display-xl': '72px',
        'display-lg': '56px',
        'display-md': '40px',
        'display-sm': '32px',
        'title-lg': '24px',
        'title-md': '18px',
        'title-sm': '16px',
        'stat-display': '56px',
        'body-md': '16px',
        'body-sm': '14px',
        caption: '13px',
        'caption-uppercase': '12px',
      },
      fontWeight: {
        display: '700',
        title: '600',
        body: '400',
      },
      borderRadius: {
        xs: '4px',
        sm: '6px',
        md: '8px',
        lg: '12px',
        pill: '9999px',
      },
      spacing: {
        xxs: '4px',
        xs: '8px',
        sm: '12px',
        md: '16px',
        lg: '24px',
        xl: '32px',
        xxl: '48px',
        section: '96px',
      },
      letterSpacing: {
        tight: '-2.5px',
        tighter: '-2px',
        'tighter-1.5': '-1.5px',
        'tighter-1': '-1px',
        'tighter-0.3': '-0.3px',
      },
      lineHeight: {
        tight: '1.05',
        tighter: '1.1',
        snug: '1.15',
        normal: '1.2',
        relaxed: '1.3',
        loose: '1.4',
        looser: '1.55',
      },
    },
  },
  plugins: [],
};

export default config;