mangrove-atlas/tailwind.config.mjs at develop · Vizzuality/mangrove-atlas · 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
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import scrollBar from 'tailwind-scrollbar-hide';
import defaultTheme from 'tailwindcss/defaultTheme';
import animate from 'tailwindcss-animate';

const tailwindConfig = {
  content: [
    './app/**/*.{js,jsx,ts,tsx,mdx}',
    './pages/**/*.{js,jsx,ts,tsx,mdx}',
    './src/**/*.{js,jsx,ts,tsx,mdx}',
    './components/**/*.{js,jsx,ts,tsx,mdx}',
  ],
  plugins: [animate, forms, typography, scrollBar],
  theme: {
    extend: {
      screens: {
        xs: '480px',
      },
      fontFamily: {
        inter: ['var(--font-inter)', 'sans-serif'],
        sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans],
      },
      spacing: {
        7.5: '1.875rem',
        18: '4.5rem',
      },
      fontSize: {
        xxs: '0.625rem', // * 10px
        '2lg': '1.188rem', // * 19px
        '2.75xl': '1.688rem', // * 27px
      },
      colors: {
        black: '#000000',
        grey: {
          50: '#F3F5F5',
          75: '#CDD0D0',
          100: '#D8D8D8',
          400: '#939393',
          800: '#808080',
        },
        brand: {
          100: '#F3F5F5',
          400: '#00C5BD',
          600: '#00AFA7',
          800: '#00857F',
          900: '#003C39',
        },
        blue: {
          400: '#7996F3',
        },
        yellow: {
          400: '#D7D367',
        },
      },
      boxShadow: {
        card: 'rgba(0, 0, 0, 0.08) 0px 4px 12px 4px',
        light: '0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 12px rgba(0, 0, 0, 0.08)',
        soft: '0px 2px 5px 0px rgba(7, 127, 172, 0.43)',
        medium: '0px 4px 12px 0px rgba(168, 168, 168, 0.25)',
        '3xl': '0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 12px rgba(0, 0, 0, 0.08)',
        control: '0px 4px 12px 0px rgba(0, 0, 0, 0.08)',
        // White button focus state: keep the control drop shadow, then an inset
        // white gap + a 2px brand ring at 40% opacity (Figma Button/White/A focused).
        'control-focus':
          '0px 4px 12px 0px rgba(0, 0, 0, 0.08), inset 0 0 0 2px #fff, inset 0 0 0 4px rgba(0, 133, 127, 0.4)',
        border: '0px 40px 80px 0px rgba(0, 60, 57, 0.15), 0px 0px 0px 1px rgba(0, 0, 0, 0.10)',
      },
      width: {
        7.5: '1.875rem',
        10.5: '2.625rem',
        22: '5.5rem',
      },
      borderRadius: {
        '3xl': '1.25rem', // 20px
        '4xl': '1.5rem', // 24px
      },
      opacity: {
        15: '0.15',
      },
      letterSpacing: {
        2.5: '0.625rem',
      },
      keyframes: {
        'reverse-slide': {
          '0%, 20%, 40%, 60%, 80%': {
            left: '-600px',
          },
          '95%': {
            left: '100px',
          },
        },
        'collapsible-down': {
          from: { height: '0' },
          to: { height: 'var(--radix-collapsible-content-height)' },
        },
        'collapsible-up': {
          from: { height: 'var(--radix-collapsible-content-height)' },
          to: { height: '0' },
        },
      },
      animation: {
        'reverse-slide': 'reverse-slide 0.5s ease-in-out',
        'collapsible-down': 'collapsible-down 300ms ease-out',
        'collapsible-up': 'collapsible-up 300ms ease-out',
      },
    },
  },
};
export default tailwindConfig;