-
Notifications
You must be signed in to change notification settings - Fork 0
/
buttons.js
107 lines (96 loc) · 3.12 KB
/
buttons.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
const Chroma = require('./chroma/index');
const getColors = require('./helpers/colors');
module.exports = ({addComponents, theme}) => {
const colors = getColors(theme, true).withShades;
const white = colors.white;
const black = colors.black;
const defaultShade = 500;
const buttonsColors = [];
const addFocusStyles = (color, shades) => ({
[color == 'black' || color == 'white' || typeof shades === 'string' ? '' : `@apply ring-${color}-300`]: '',
});
for(let color in colors) {
let shades = colors[color];
let defaultHex = shades[defaultShade];
let defaultContrast = Chroma.contrast(defaultHex);
buttonsColors.push({
[`.btn-${color}`]: {
backgroundColor: defaultHex,
color: defaultContrast,
'&.active': {backgroundColor: Chroma.darken(defaultHex, 50)},
'&:enabled:hover, &:not(button):hover': {
backgroundColor: Chroma.darken(defaultHex, (defaultShade/100)*4),
},
'&:enabled:focus, &:not(button):focus': addFocusStyles(color, shades)
},
[`.btn-outline-${color}`]: {
backgroundColor: 'transparent',
color: defaultHex,
borderColor: defaultHex,
borderWidth: theme('borderWidth.DEFAULT'),
'&.active': {backgroundColor: Chroma.darken(defaultHex, 50)},
'&:enabled:hover, &:not(button):hover': {
backgroundColor: defaultHex,
color: defaultContrast,
},
'&:enabled:focus, &:not(button):focus': addFocusStyles(color, shades)
},
})
for(let shade in shades) {
let colorHex = shades[shade];
let colorContrast = Chroma.contrast(colorHex);
buttonsColors.push({
[`.btn-${color}-${shade}`]: {
backgroundColor: colorHex,
color: colorContrast,
'&.active': {backgroundColor: Chroma.darken(colorHex, 50)},
'&:enabled:hover, &:not(button):hover': {
backgroundColor: Chroma.darken(colorHex, (shade/100)*4),
},
'&:enabled:focus, &:not(button):focus': addFocusStyles(color, shades)
},
[`.btn-outline-${color}-${shade}`]: {
backgroundColor: 'transparent',
color: colorHex,
borderColor: colorHex,
borderWidth: theme('borderWidth.DEFAULT'),
'&.active': {backgroundColor: Chroma.darken(colorHex, 50)},
'&:enabled:hover, &:not(button):hover': {
backgroundColor: colorHex,
color: colorContrast,
},
'&:enabled:focus, &:not(button):focus': addFocusStyles(color, shades)
},
});
}
}
addComponents({
'.btn': {
padding: `${theme('spacing')['1.5']} ${theme('spacing.3')}`,
borderRadius: '.3rem',
fontWeight: theme('fontWeight.600'),
borderWidth: '1px',
borderColor: 'transparent',
outline: 'none !important',
'@apply transition-all ease-in-out text-center inline-block': '',
},
'.btn:focus': {
'@apply ring-4': '',
}
});
addComponents({
'.btn-md': {
padding: `${theme('spacing')['1.5']} ${theme('spacing.3')}`,
fontSize: `1rem`,
},
'.btn-sm': {
padding: `${theme('spacing.1')} ${theme('spacing.2')}`,
fontSize: `${theme('fontSize.sm')}`,
},
'.btn-xs': {
padding: `${theme('spacing')['0.5']} ${theme('spacing.2')}`,
fontSize: `${theme('fontSize.xs')}`,
}
}, ['responsive']);
addComponents(buttonsColors, ['responsive']);
};