vue-storybook-components/tailwind.config.js at master · FollowJack/vue-storybook-components · 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
module.exports = {
  darkMode: 'media', // or 'media' or 'class
  options: {
    content: [
      './pages/**/*.{html,js,vue}',
      './components/**/*.{html,js,stories.js,vue}',
      './composables/**/*.{html,js,vue}',
      './layouts/**/*.{html,js,vue}',
    ],
  },
  theme: {
    fontFamily: {
      'jost': ['Jost'],
      'roboto': ['Roboto']
    },
    fontSize: {
      "copy-large": ["18px", "28px"],
      "copy-medium": ["16px", "24px"],
      "copy-small": ["14px", "24px"],
      "headline1": ["64px", "70px"],
      "headline2": ["56px", "62px"],
      "headline3": ["42px", "54px"],
    },
    extend: {
      screens: {
        'sm': '425px',
      },
      zIndex: {
        'backdrop': '100',
        'modal': '200',
        'tooltip': '300',
        'tooltip-anchor': '301',
      },
      colors: {
        // main
        'primary': "#605DEC",
        "primary-hover": "#3D3ACE",
        "primary-active": "#23209F",
        'secondary': "#F6F5FF",
        'secondary-hover': "#F6F5FF",
        "secondary-active": "#F6F5FF",
        // font
        'font-warning': '#FFB82E',
        'font-error': '#F93232',
        'font-error-hover': '#F93232',
        'font-success': '#439F6E',
        'font-black': '#212121',
        'font-white': '#FFFFFF',
        'font-gray': '#8A8894',
        'font-light-gray': '#C9C8D3',
        'font-disabled': '#C5C0DB',
        // background
        'white': '#FFFFFF',
        'disabled': '#F4F3FE',
        // stroke
        'stroke-focused': '#F845FC',
        'stroke-gray': '#BDBCDB',
        // field
        'field-form': '#F7F7FD',
        'field-title': '#9D99AC',
        'field-description': '#AAAAAA',
        'field-stroke-hover': '#E8E6F8',
        'field-stroke-focused': '#605DEC',
        'field-text-disabled': '#A5A5A7',
        'field-stroke-validation': '#FFEAC1',
        'field-stroke-loading': '#E8E6F8',
        'field-bg-validation': '#FFFBF4',
        'field-bg-error': '#FFF5F5',
        'field-bg-success': '#C0ECD4',
        'field-stroke-error': '#FFD8D8',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}