-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.js
135 lines (134 loc) · 5.4 KB
/
tailwind.config.js
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
const defaultTheme = require('tailwindcss/defaultTheme');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
extend: {
fontFamily: {
header: ['VeneerSoft', 'sans-serif'],
sans: ['Roboto', ...defaultTheme.fontFamily.sans],
serif: ['Roboto Slab', ...defaultTheme.fontFamily.serif],
},
colors: {
skin: {
primary: 'var(--primary-color)',
'primary-variant': 'var(--primary-color-variant)',
'primary-dark': 'var(--primary-color-dark)',
'primary-dark-variant': 'var(--primary-color-dark-variant)',
secondary: 'var(--secondary-color)',
'secondary-variant': 'var(--secondary-color-variant)',
error: 'var(--error-color)',
success: 'var(--success-color)',
bg: {
base: 'var(--color-bg-base)',
surface: 'var(--color-bg-surface)',
error: 'var(--color-bg-error)',
},
on: {
primary: 'var(--color-text-on-primary)',
secondary: 'var(--color-text-on-secondary)',
background: 'var(--color-text-on-background)',
'background-muted': 'var(--color-text-on-background-muted)',
surface: 'var(--color-text-on-surface)',
'surface-muted': 'var(--color-text-on-surface-muted)',
surface: 'var(--color-text-on-surface)',
error: 'var(--color-text-on-error)',
success: 'var(--color-text-on-success)',
},
},
vca: {
base: {
DEFAULT: '#008FC3',
50: '#93E2FF',
100: '#7CDCFF',
200: '#4ED0FF',
300: '#20C3FF',
400: '#00B1F1',
500: '#008FC3',
600: '#006D95',
700: '#004C67',
800: '#002A39',
900: '#00080B',
},
dark: {
DEFAULT: '#002E6D',
50: '#0068F7',
100: '#0062E7',
200: '#0055C9',
300: '#0048AA',
400: '#003B8C',
500: '#002E6D',
600: '#00214E',
700: '#001430',
800: '#000711',
900: '#000000',
},
},
green: {
100: '#eaf7f6',
200: '#c9ebe6',
300: '#a8ded7',
400: '#86d1c8',
500: '#45b7a9',
600: '#38968a',
700: '#2c746b',
800: '#1f534d',
900: '#13322e',
},
orange: {
100: '#ffded4',
200: '#ffc3b1',
300: '#ffa78d',
400: '#ff8c69',
500: '#ff5522',
600: '#fd3a00',
700: '#da3200',
800: '#b62a00',
900: '#922200',
},
purple: {
100: '#dda4e6',
200: '#d388df',
300: '#c86cd7',
400: '#be50d0',
500: '#992eaa',
600: '#80268e',
700: '#661f72',
800: '#4d1756',
900: '#34103a',
},
},
backgroundColor: {
skin: {
base: 'var(--color-bg-base)',
surface: 'var(--color-bg-surface)',
error: 'var(--color-bg-error)',
},
},
textColor: {
skin: {
'on-primary': 'var(--color-text-on-primary)',
'on-primary-dark': 'var(--color-text-on-primary-dark)',
'on-secondary': 'var(--color-text-on-secondary)',
'on-background': 'var(--color-text-on-background)',
'on-background-muted': 'var(--color-text-on-background-muted)',
'on-surface': 'var(--color-text-on-surface)',
'on-surface-faded': 'var(--color-text-on-surface-faded)',
'on-surface-muted': 'var(--color-text-on-surface-muted)',
'on-surface': 'var(--color-text-on-surface)',
'on-error': 'var(--color-text-on-error)',
'on-success': 'var(--color-text-on-success)',
},
},
boxShadow: {
bottom: '0px 10px 10px -5px rgba(0, 0, 0, 0.25);',
right: '10px 0px 10px -5px rgba(0, 0, 0, 0.15)',
},
zIndex: { 100: '100', 200: '200' },
},
},
plugins: [
require('@tailwindcss/typography'), // typography
],
};