vault-interface/tailwind.config.js at main · Stakingverse/vault-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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    'src/**/*.{js,ts,tsx}',
  ],
  safelist: [
    { pattern: /text-[htn]\d+[bm]?/ },
    { pattern: /(bg|text|border)-(dark|light|white|black|(primary|secondary)(-(start|end))?|background|error|warning|success(-light)?)/ },
  ],
  darkMode: [ 'class', '.body-dark-theme' ],
  theme: {
    colors: {
      dark: 'rgb(var(--color-dark-rgb) / <alpha-value>)',
      light: 'rgb(var(--color-light-rgb) / <alpha-value>)',
      black: 'rgb(var(--color-black-rgb) / <alpha-value>)',
      white: 'rgb(var(--color-white-rgb) / <alpha-value>)',
      primary: 'rgb(var(--color-primary-rgb) / <alpha-value>)',
      secondary: 'rgb(var(--color-secondary-rgb) / <alpha-value>)',
      background: 'rgb(var(--color-background-rgb) / <alpha-value>)',
      error: 'rgb(var(--color-error-rgb) / <alpha-value>)',
      warning: 'rgb(var(--color-warning-rgb) / <alpha-value>)',
      success: 'rgb(var(--color-success-rgb) / <alpha-value>)',
      'success-light': 'rgb(var(--color-success-light-rgb) / <alpha-value>)',
      'primary-start': 'rgb(var(--color-primary-start-rgb) / <alpha-value>)',
      'primary-end': 'rgb(var(--color-primary-end-rgb) / <alpha-value>)',
      'secondary-start': 'rgb(var(--color-secondary-start-rgb) / <alpha-value>)',
      'secondary-end': 'rgb(var(--color-secondary-end-rgb) / <alpha-value>)',
      transparent: 'rgb(255 255 255 / 0)',
    },
    spacing: {
      'px': '1px',
      0: '0',
      4: '4rem',
      6: '6rem',
      8: '8rem',
      12: '12rem',
      16: '16rem',
      18: '18rem',
      20: '20rem',
      24: '24rem',
      32: '32rem',
      36: '36rem',
      40: '40rem',
      48: '48rem',
      56: '56rem',
      60: '60rem',
      64: '64rem',
      72: '72rem',
      80: '80rem',
      96: '96rem',
      'full': '100%',
    },
    borderWidth: {
      DEFAULT: '1px',
      '0': '0',
      '2': '2rem',
    },
    borderRadius: {
      2: '2rem',
      4: '4rem',
      6: '6rem',
      8: '8rem',
      12: '12rem',
      16: '16rem',
      24: '24rem',
      72: '72rem',
      'full': '100%',
    },
    fontSize: {
      // headers
      'h100': [ '100rem', { lineHeight: '110rem', fontWeight: '700' } ],
      'h90': [ '90rem', { lineHeight: '100rem', fontWeight: '700' } ],
      'h60': [ '60rem', { lineHeight: '72rem', fontWeight: '700' } ],
      'h48': [ '48rem', { lineHeight: '56rem', fontWeight: '700' } ],
      'h40': [ '40rem', { lineHeight: '48rem', fontWeight: '700' } ],
      'h32': [ '32rem', { lineHeight: '44rem', fontWeight: '700' } ],
      'h24': [ '24rem', { lineHeight: '32rem', fontWeight: '700' } ],
      'h22': [ '22rem', { lineHeight: '26rem', fontWeight: '700' } ],
      'h20': [ '20rem', { lineHeight: '24rem', fontWeight: '700' } ],
      // text
      't40m': [ '40rem', { lineHeight: '48rem', fontWeight: '500' } ],
      't20b': [ '20rem', { lineHeight: '32rem', fontWeight: '700' } ],
      't18m': [ '18rem', { lineHeight: '24rem', fontWeight: '500' } ],
      't18b': [ '18rem', { lineHeight: '24rem', fontWeight: '700' } ],
      't16m': [ '16rem', { lineHeight: '22rem', fontWeight: '500' } ],
      't16b': [ '16rem', { lineHeight: '22rem', fontWeight: '700' } ],
      't14': [ '14rem', { lineHeight: '20rem', fontWeight: '400' } ],
      't14m': [ '14rem', { lineHeight: '20rem', fontWeight: '500' } ],
      't14b': [ '14rem', { lineHeight: '20rem', fontWeight: '700' } ],
      't12': [ '12rem', { lineHeight: '18rem', fontWeight: '400' } ],
      't12m': [ '12rem', { lineHeight: '18rem', fontWeight: '500' } ],
      't12b': [ '12rem', { lineHeight: '18rem', fontWeight: '700' } ],
      // notes = {
      'n10': [ '10rem', { lineHeight: '16rem', fontWeight: '400' } ],
      'n10m': [ '10rem', { lineHeight: '16rem', fontWeight: '500' } ],
      'n10b': [ '10rem', { lineHeight: '16rem', fontWeight: '700' } ],
    },
    screens: {
      'mobile': { raw: '(max-width: 999px)' },
      'ex-mobile': { raw: '(min-width: 1000px)' },
      'retina': { raw: 'only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi)' },
    },
    extend: {
      opacity: {
        '02': '0.02',
        '03': '0.03',
        '04': '0.04',
        '05': '0.05',
      },
    },
  },
}