DurianPy-Official-Website/tailwind.config.ts at staging · DurianPy-Davao-Python-User-Group/DurianPy-Official-Website · 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
// tailwind.config.js
import type { Config } from 'tailwindcss';

const config: Config = {
  darkMode: ['class'],
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        montserrat: ['var(--font-montserrat)', 'sans-serif'],
      },
      colors: {
        'midori-green': '#36FF90',
        'mint-bliss': '#8AFFBE',
        'mint-bliss-50': '#009643',
        background: 'var(--background)',
        foreground: 'var(--foreground)',
        primary: '#FFC200',
        'dark-green': '#112018',
        white: '#FFFFFF',
        'saturated-light-green': '#00FF00',
        'light-dark-green': '#00401C',
        'medium-dark-green': '#1A3E2A',
        'black-30-opacity': 'rgba(0, 0, 0, 0.3)',
        'saturated-light-green-opacity-50': '#36FF9050',
      },
      fontSize: {
        'web-title-font': 'var(--web-title-font)',
        'web-medium-font': 'var(--web-medium-font)',
        'web-body-font': 'var(--web-body-font)',
        'tabs-navbar': 'var(--tabs-navbar)',
        'button-default': 'var(--button-default)',
        'button-hovered': 'var(--button-hovered)',
      },
      backgroundImage: {
        'radial-custom':
          'radial-gradient(at top right, #FFC201 0%, #1A3E2A 84%)',
        'gradient-ltr-lightgreen-transparent':
          'linear-gradient(to right, #36FF90,rgba(115, 115, 115, 0))',
        'gradient-utd-lightgreen-darkgreen':
          'linear-gradient(to bottom, #1C653B, #113620)',
        'gradient-ltr-darkgreen-lightgreen':
          'linear-gradient(to right, #1A3E2A, #3EB372)',
        'gradient-ltr-solid-yellow-lightyellow':
          'linear-gradient(to right, #FFC200, #FFDC6C)',
        'gradient-ltr-transparent-yellow':
          'linear-gradient(to right,rgba(138, 255, 191, 0), #FFC201)',
        'gradient-utd-transparent-black':
          'linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, rgba(0, 0, 0, 0.49) 18%, rgba(0, 0, 0, 1) 48%)',
        'gradient-middle-green-transparent':
          'linear-gradient(180deg, rgba(17,32,24,0) 0%, rgba(17,32,24,0.66) 23%, rgba(17,32,24,1) 44%, rgba(17,32,24,1) 66%, rgba(17,32,24,0) 100%)',
        'gradient-ltr-green-transparent':
          'linear-gradient(to right, #1A3E2A,rgba(26, 62, 42, 0))',
        'gradient-utd-saturatedGreen-transparent':
          'linear-gradient(to bottom, rgba(62, 179, 115, 0), #00833A)',
        'gradient-utd-nav-transparent':
          'linear-gradient(to bottom, rgba(62,179,114,0.63), rgba(166,255,205,0.63))',
        'gradient-utd-green-transparent':
          'linear-gradient(180deg, rgba(0,64,28,1), rgba(17,32,24,0.8))',
        'gradient-circle-green':
          'radial-gradient(circle, #009643 0%, rgba(0, 150, 67, 0) 100%)',
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      keyframes: {
        'accordion-down': {
          from: {
            height: '0',
          },
          to: {
            height: 'var(--radix-accordion-content-height)',
          },
        },
        'accordion-up': {
          from: {
            height: 'var(--radix-accordion-content-height)',
          },
          to: {
            height: '0',
          },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
      screens: {
        'height-1000': { raw: '(min-height: 1000px)' },
        'height-1366': { raw: '(min-height: 1366ox)' },
        'width-1912': { raw: '(min-width: 1912px)' },
        'width-1440': { raw: '(min-width: 1440px)' },
      },
    },
  },
  plugins: [
    require('tailwindcss-animate'),
    function (pluginApi: {
      addUtilities: (utilities: Record<string, any>) => void;
    }) {
      const { addUtilities } = pluginApi;
      addUtilities({
        '.text-shadow-sm': { textShadow: '1px 1px 2px rgba(0, 0, 0, 0.3)' },
        '.text-shadow-md': { textShadow: '2px 2px 4px rgba(0, 0, 0, 0.4)' },
        '.text-shadow-lg': { textShadow: '3px 3px 6px rgba(0, 0, 0, 0.5)' },
        '.text-shadow-xl': { textShadow: '4px 4px 8px rgba(0, 0, 0, 0.6)' },
      });
    },
  ],
};

export default config;