asrient.github.io/tailwind.config.js at main · asrient/asrient.github.io · 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
/** @type {import('tailwindcss').Config} */

import { readFileSync, readdirSync } from 'fs';

const THEMES_PATH = 'config/themes';

const colors = {};

// temporary hack for dark mode
const explicitSafeList = [];

// ADD HERE MANUALLY ALL THE DARK MODE ACCENT COLORS USED
const DARK_MODE_ENABLE = [
  'bg-accent-1',
  'bg-accent-2',
  'bg-accent-3',
  'bg-accent-4',
  'bg-accent-5',
  'border-accent-2',
  'border-accent-3',
  'text-accent-2',
  'text-accent-3',
  'text-accent-5',
  'border-accent-4'
]

function importTheme(themeData, themeName) {
  // import colors from theme
  Object.keys(themeData?.light || []).forEach((color) => {
    colors[`${color}-${themeName}`] = themeData.light[color];
  });
  Object.keys(themeData?.dark || []).forEach((color) => {
    colors[`${color}-${themeName}-dark`] = themeData.dark[color];
  });

  DARK_MODE_ENABLE.forEach((item) => {
    explicitSafeList.push(`dark:${item}-${themeName}-dark`);
  })
}

readdirSync(THEMES_PATH).map((filename) => {
  const themePath = `${THEMES_PATH}/${filename}`;
  const themeName = filename.split('.')[0];
  const themeData = JSON.parse(readFileSync(themePath, 'utf8'));
  importTheme(themeData, themeName);
});

module.exports = {
  content: ['./components/**/*.tsx', './pages/**/*.tsx'],
  darkMode: ['class'],
  theme: {
    extend: {
      fontFamily: {
        'brand': ['Kulim Park', 'sans-serif']
      },
      colors: {
        ...colors,
        success: '#0070f3',
        cyan: '#79FFE1',
      },
      spacing: {
        28: '7rem',
      },
      letterSpacing: {
        tighter: '-.04em',
      },
      lineHeight: {
        tight: 1.2,
      },
      fontSize: {
        '5xl': '2.5rem',
        '6xl': '2.75rem',
        '7xl': '4.5rem',
        '8xl': '6.25rem',
      },
      boxShadow: {
        sm: '0 5px 10px rgba(0, 0, 0, 0.12)',
        md: '0 8px 30px rgba(0, 0, 0, 0.12)',
      },
      backgroundImage: {
        'homepage-hero-1': "url('/assets/img/homepage-hero-1.jpg')",
        'iphone-frame': "url('/assets/img/iPhone-frame.png')",
      }
    },
  },
  plugins: [],
  safelist: [
    {
      pattern: /.*-accent-.*/,
    },
    ...explicitSafeList
  ]
}