frontend/tailwind.config.js at main · TransitTracker/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
96
97
98
99
100
101
/** @type {import('tailwindcss').Config} */

const m3 = require('tailwind-m3-colors')
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  darkMode: ['class', "[class~='theme--dark']"],
  prefix: 'tw-',
  content: [
    `components/tw/**/*.vue`,
    `components/VehicleSheet/**/*.vue`,
    `components/settings/**/*.vue`,
    `components/Loading.vue`,
    `layouts/default.vue`,
    `layouts/error.vue`,
    `pages/regions/_region/download.vue`,
    `pages/regions/_region/index.vue`,
    `pages/regions/_region/map.vue`,
    `pages/regions/_region/table.vue`,
    `pages/admin.vue`,
    `pages/index.vue`,
    `./nuxt.config.js`,
  ],
  theme: {
    extend: {
      animation: {
        progress: 'progress 2s infinite linear',
      },
      backgroundImage: {
        'gradient-100': 'linear-gradient(100deg, var(--tw-gradient-stops))',
      },
      fontSize: {
        '2xs': '0.6875rem',
      },
      gradientColorStopPositions: {
        50: '50%',
        70: '70%',
      },
      keyframes: {
        progress: {
          '0%': { transform: 'translateX(0) scaleX(0)' },
          '40%': { transform: 'translateX(0) scaleX(0.4)' },
          '100%': { transform: 'translateX(100%) scaleX(0.5)' },
        },
      },
      opacity: {
        8: '.08',
        12: '.12',
        16: '.16',
        32: '.32',
        38: '.38',
      },
      outlineWidth: {
        3: '3px',
      },
      spacing: {
        4.5: '1.125rem',
        18: '4.5rem',
        100: '25rem',
      },
      transformOrigin: {
        'left-right': '0% 50%',
      },
      transitionDelay: {
        350: '350ms',
        750: '750ms',
      },
      transitionTimingFunction: {
        emphasized: '	cubic-bezier(0.2, 0.0, 0, 1.0)',
        'emphasized-decelerate': 'cubic-bezier(0.05, 0.7, 0.1, 1.0)',
        'emphasized-accelerate': 'cubic-bezier(0.3, 0.0, 0.8, 0.15)',
        standard: '	cubic-bezier(0.2, 0.0, 0, 1.0)',
        'standard-decelerate': 'cubic-bezier(0, 0, 0, 1)',
        'standard-accelerate': 'cubic-bezier(0.3, 0, 1, 1)',
        'standard-spatial': '	cubic-bezier(0.27, 1.06, 0.18, 1.00)',
        'standard-effects-fast': 'cubic-bezier(0.31, 0.94, 0.34, 1.00)',
        'standard-effects': 'cubic-bezier(0.34, 0.80, 0.34, 1.00)',
        'standard-effects-slow': 'cubic-bezier(0.34, 0.88, 0.34, 1.00)',
      },
    },
    fontFamily: {
      sans: ['Inter', ...defaultTheme.fontFamily.sans],
      heading: ['Figtree', ...defaultTheme.fontFamily.sans],
    },
  },
  corePlugins: {
    preflight: false,
  },
  plugins: [
    m3('#2374ab', '#009a8d', '', {
      /* default
    generateTones: true,
    stepTonesBy10: false,
    inverseSteps: true,
    generateShortcut: false,
    extendExistingColors: true, */
      stepTonesBy10: true,
      inverseSteps: false,
    }),
  ],
}