Press n or j to go to the next uncovered block, b, p or k for the previous block.
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 | 15x 15x | import { darken, lighten } from 'polished'; export const buttonDarkTheme = { btnTypes: { default: { normal: { color: '#161616', backgroundColor: '#ced4da', }, hover: { backgroundColor: lighten(0.05, '#ced4da'), }, active: { backgroundColor: darken(0.05, '#ced4da'), }, }, primary: { normal: { color: '#161616', backgroundColor: '#42A5F5', }, hover: { backgroundColor: lighten(0.05, '#42A5F5'), }, active: { backgroundColor: darken(0.05, '#42A5F5'), }, }, danger: { normal: { color: '#161616', backgroundColor: '#CF6679', }, hover: { backgroundColor: lighten(0.05, '#CF6679'), }, active: { backgroundColor: darken(0.05, '#CF6679'), }, }, }, }; export const buttonBaseTheme = { btnTypes: { default: { normal: { color: '#fff', backgroundColor: '#868e96', }, hover: { backgroundColor: lighten(0.05, '#868e96'), }, active: { backgroundColor: darken(0.05, '#868e96'), }, }, primary: { normal: { color: '#fff', backgroundColor: '#1E88E5', }, hover: { backgroundColor: lighten(0.05, '#1E88E5'), }, active: { backgroundColor: darken(0.05, '#1E88E5'), }, }, danger: { normal: { color: '#fff', backgroundColor: '#F4511E', }, hover: { backgroundColor: lighten(0.05, '#F4511E'), }, active: { backgroundColor: darken(0.05, '#F4511E'), }, }, }, sizings: { s: { padding: '0 1rem', lineHeight: '1.75rem', fontSize: '.875rem', }, m: { padding: '0 1.875rem', fontSize: '1rem', lineHeight: '2.375rem', }, l: { padding: '0 2.5rem', lineHeight: '3.375rem', fontSize: '1.375rem', }, }, common: { fontWeight: '600', fontFamily: `'Inter var', sans-serif`, }, }; |