All files / components/Button/Button buttonTheme.js

100% Statements 2/2
100% Branches 0/0
100% Functions 0/0
100% Lines 2/2

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`,
  },
};