ghost-interface/tailwind.config.js at main · ThreeDotsTech/ghost-interface · 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
const plugin = require('tailwindcss/plugin');

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{ts,tsx,jsx,js}",
  ],
  theme: {
    extend: {
      colors: {
        background: 'var(--color-background)',
        text: 'var(--color-text)',
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
        accent: 'var(--color-accent)',
        border: 'var(--color-border)',
        shadows: 'var(--color-shadows)',
      },
    }
  },
  plugins: [
    plugin(function({ addUtilities, e, theme, variants }) {
      const colors = theme('colors');
      const boxShadowUtilities = {};

      Object.keys(colors).forEach(colorName => {
        const color = colors[colorName];

        if (typeof color === 'string') {
          boxShadowUtilities[`.${e(`shadow-neu-interactive-${colorName}`)}`] = {
            boxShadow: `6px 6px 0 0 ${color}`,
            transition: 'box-shadow 0.2s ease-in-out',
            '&:hover': {
              boxShadow: `8px 8px 0 0 ${color}`,
              transition: 'box-shadow 0.2s ease-in-out',
            },
            '&:active': {
              boxShadow: `4px 4px 0 0 ${color}`,
              transition: 'box-shadow 0.2s ease-in-out',
            },
            '&:focus': {
              boxShadow: `4px 4px 0 0 ${color}`,
              transition: 'box-shadow 0.2s ease-in-out',
            }
          };
          boxShadowUtilities[`.${e(`shadow-neu-${colorName}`)}`] = {
            boxShadow: `6px 6px 0 0 ${color}`
          };
        } else {
          Object.keys(color).forEach(shade => {
            boxShadowUtilities[`.${e(`shadow-neu-interactive-${colorName}-${shade}`)}`] = {
              boxShadow: `6px 6px 0 0 ${color[shade]}`,
              transition: 'box-shadow 0.2s ease-in-out',
              '&:hover': {
                boxShadow: `8px 8px 0 0 ${color[shade]}`,
                transition: 'box-shadow 0.2s ease-in-out',
              },
              '&:active': {
                boxShadow: `4px 4px 0 0 ${color}`,
                transition: 'box-shadow 0.2s ease-in-out',
              },
              '&:focus': {
                boxShadow: `4px 4px 0 0 ${color}`,
                transition: 'box-shadow 0.2s ease-in-out',
              }
            };
            boxShadowUtilities[`.${e(`shadow-neu-${colorName}-${shade}`)}`] = {
              boxShadow: `6px 6px 0 0 ${color[shade]}`
            };
          });
        }
      });
      addUtilities(boxShadowUtilities, variants('boxShadow'));
    }),
    function({ addUtilities }) {
      addUtilities({
        '.hide-arrows::-webkit-outer-spin-button': {
          '-webkit-appearance': 'none',
          'margin': '0',
        },
        '.hide-arrows::-webkit-inner-spin-button': {
          '-webkit-appearance': 'none',
          'margin': '0',
        },
        '.hide-arrows': {
          '-moz-appearance': 'textfield', // Firefox
        },
      });
    },
  ],
};