@eturnity/eturnity_reusable_components 8.16.8 → 8.16.9-EPDM-13618.0

package/src/assets/theme.js

@@ -1,640 +1,652 @@
-const theme = (() => {
-  const colors = {
-    primary: '#5900CC',
-    secondary: '#FAF5FF',
-    tertiary: '#d5d5d5',
-    black: '#263238',
-    black2: '#151B1E',
-    yellow: '#fdb813',
-    yellow2: '#FFEFB7',
-    yellow3: '#FFFBEE',
-    yellow4: '#FFE066',
-    darkGray: '#818181',
-    mediumGray: '#d5d5d5',
-    lightGray: '#f2f2f2',
-    white: '#ffffff',
-    blue: '#48a2d0',
-    blue1: '#e4efff',
-    blue2: '#f6faff',
-    blue3: '#6CD4D4',
-    blue4: '#66D0F3',
-    blue5: '#00B0EB',
-    brightBlue: '#0068DE',
-    ballBlue: '#2CC0EB',
-    red: '#FF5656',
-    red1: '#f5a2a2',
-    red2: '#de5959',
-    red3: '#FFCCCC',
-    red4: '#FF9A9A',
-    pureRed: '#ff0000',
-    darkRed: '#d00000',
-    cornellRed: '#a52019',
-    transparentRed10: '#ff000016',
-    transparentRed20: '#ff000032',
-    transparentRed40: '#ff000064',
-    transparentRed50: '#ff000080',
-    grey1: '#666',
-    grey2: '#c4c4c4',
-    grey3: '#b2b9c5',
-    grey4: '#dee2eb',
-    grey5: '#fafafa',
-    grey6: '#555d61',
-    grey7: '#f2f1f7',
-    grey8: '#393939',
-    grey9: '#607466',
-    grey10: '#4a5861',
-    grey11: '#656d70',
-    grey12: '#787d81',
-    grey13: '#CCCCCC',
-    grey14: '#D1DBE0',
-    grey15: '#E1E7EA',
-    grey16: '#F0F3F5',
-    grey17: '#394E58',
-    grey18: '#3E5C6A',
-    grey19: '#6E8E9E',
-    grey20: '#D9DEE9',
-    grey21: '#3E464B',
-    turquoise: '#20A4CA',
-    green: '#99db0c',
-    green2: '#e5fcb4',
-    green3: '#C2E96D',
-    seaGreen: '#008351',
-    purple: '#505ca6', // Keeping this as a standalone purple, but nested purple object below takes precedence for purple[500]
-    purple1: '#F1E5FF',
-    purple2: '#C739E4',
-    purple3: '#E9CEFE',
-    purple4: '#D0D6F5',
-    purple5: '#533181',
-    purple6: '#6F20DC',
-    orange: '#ffc338',
-    disabled: '#dfe1e1',
-    transparentWhite2: '#ffffff32',
-    transparentWhite1: '#ffffff16',
-    transparentBlack1: '#263238e6',
-    transparentBlack2: '#263238e5',
-    transparentBlue1: '#20a4cae6',
-    blueElectric: '#66dffa',
-    eturnityGrey: '#263238',
-    teal: '#018b7d',
-    slateGrey: '#495257',
-    cornflower: '#6276DF',
-    lavender: '#8392EE',
-  }
-
-  const semanticColors = {
-    purple: {
-      50: '#F5EEFF',
-      100: '#EEE4FC',
-      200: '#E8D8FE',
-      300: '#D3BBF5',
-      400: '#B17BFA',
-      500: '#6F20DC',
-      600: '#5C1FAF',
-      700: '#411083',
-      800: '#33165A',
-      900: '#190B2D',
-    },
-    beige: {
-      50: '#F9F5F2',
-      100: '#F2EBE7',
-      200: '#E6D6D0',
-      300: '#D9C2B8',
-      400: '#CDADA1',
-      500: '#C09989',
-      600: '#9A7A6E',
-      700: '#6A5247',
-      800: '#4D3D37',
-      900: '#261F1B',
-    },
-    grey: {
-      50: '#FDFDFD',
-      100: '#F8F9FB',
-      200: '#F2F3F7',
-      300: '#EBEEF3',
-      400: '#E5E8EF',
-      500: '#D9DEE9',
-      600: '#B2B5BC',
-      700: '#85888D',
-      800: '#595A5E',
-      900: '#2C2D2F',
-    },
-    teal: {
-      50: '#F0F3F5',
-      100: '#E1E7EA',
-      200: '#D1DBE0',
-      300: '#ADC0C8',
-      400: '#8CA6B3',
-      500: '#6E8E9E',
-      600: '#3E5C6A',
-      700: '#394E58',
-      800: '#263238',
-      900: '#151B1E',
-    },
-    blue: {
-      50: '#E0F6FD',
-      100: '#CCEFFB',
-      200: '#99DFF7',
-      300: '#66D0F3',
-      400: '#33C0EF',
-      500: '#00B0EB',
-      600: '#008DBC',
-      700: '#006A8D',
-      800: '#00465E',
-      900: '#00232F',
-    },
-    green: {
-      50: '#F8FFE9',
-      100: '#F2FFD6',
-      200: '#D6F19E',
-      300: '#C2E96D',
-      400: '#ADE23D',
-      500: '#99DB0C',
-      600: '#7AAF0A',
-      700: '#5C8307',
-      800: '#3D5805',
-      900: '#1F2C02',
-    },
-    yellow: {
-      50: '#FFFBEC',
-      100: '#FFF5CC',
-      200: '#FFEB99',
-      300: '#FFE066',
-      400: '#FFD633',
-      500: '#FFCC00',
-      600: '#CCA300',
-      700: '#997A00',
-      800: '#665200',
-      900: '#332900',
-    },
-    red: {
-      50: '#FFEBEB',
-      100: '#FFDDDD',
-      200: '#FFBBBB',
-      300: '#FF9A9A',
-      400: '#FF7F7F',
-      500: '#FF6565',
-      600: '#CC4545',
-      700: '#993434',
-      800: '#662222',
-      900: '#331111',
-    },
-  }
-
-  const chartGradients = {
-    simple: {
-      from: semanticColors.purple[500],
-      to: semanticColors.purple[400],
-    },
-    stacked: [
-      { from: '#F5EDFF', to: '#DEC5FF' },
-      { from: '#CAA2FF', to: '#F2E8FF' },
-      { from: '#B987FC', to: '#904AEF' },
-      { from: '#8B40F2', to: '#4A1394' },
-      { from: '#6A05F2', to: '#4905A5' },
-      { from: '#5402C3', to: '#2B0362' },
-    ],
-  }
-
-  return {
-    colors,
-    semanticColors,
-    chartGradients,
-    fonts: {
-      mainFont: '"Figtree", sans-serif',
-    },
-    screen: {
-      mobileSmall: '345px',
-      mobile: '425px',
-      mobileLarge: '530px',
-      tablet: '768px',
-      tabletLarge: '950px',
-      tabletLandscape: '1024px',
-      tabletLandscapeLarge: '1280px',
-      laptopSmall: '1440px',
-      laptopMiddle: '1680px',
-    },
-    borderRadius: '4px',
-    boxShadow: {
-      card: '0px 2px 8px 2px rgba(0, 0, 0, 0.15)',
-    },
-    mainButton: {
-      light: {
-        // theme
-        primary: {
-          // type
-          main: {
-            // variant: this is the default variant
-            default: {
-              backgroundColor: semanticColors.purple[500],
-              textColor: colors.white,
-              borderColor: '',
-            },
-            hover: {
-              backgroundColor: semanticColors.purple[700],
-              textColor: colors.white,
-              borderColor: '',
-            },
-            active: {
-              backgroundColor: semanticColors.purple[600],
-              textColor: colors.white,
-              borderColor: '',
-            },
-            disabled: {
-              textColor: colors.white,
-              backgroundColor: semanticColors.grey[500],
-              borderColor: '',
-            },
-          },
-          cancel: {
-            // variant
-            default: {
-              backgroundColor: semanticColors.red[600],
-              textColor: colors.white,
-              borderColor: '',
-            },
-            hover: {
-              backgroundColor: semanticColors.red[800],
-              textColor: colors.white,
-              borderColor: '',
-            },
-            active: {
-              backgroundColor: semanticColors.red[700],
-              textColor: colors.white,
-              borderColor: '',
-            },
-            disabled: {
-              textColor: colors.white,
-              backgroundColor: semanticColors.grey[500],
-              borderColor: '',
-            },
-          },
-        },
-        secondary: {
-          // type
-          main: {
-            // variant: this is the default variant
-            default: {
-              backgroundColor: semanticColors.purple[50],
-              textColor: semanticColors.purple[500],
-              borderColor: '',
-            },
-            hover: {
-              backgroundColor: semanticColors.purple[100],
-              textColor: semanticColors.purple[700],
-              borderColor: '',
-            },
-            active: {
-              backgroundColor: semanticColors.purple[50],
-              textColor: semanticColors.purple[600],
-              borderColor: '',
-            },
-            disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[300],
-              borderColor: '',
-            },
-          },
-          cancel: {
-            // variant
-            default: {
-              backgroundColor: semanticColors.red[50],
-              textColor: semanticColors.red[600],
-              borderColor: '',
-            },
-            hover: {
-              backgroundColor: semanticColors.red[100],
-              textColor: semanticColors.red[700],
-              borderColor: '',
-            },
-            active: {
-              backgroundColor: semanticColors.red[200],
-              textColor: semanticColors.red[800],
-              borderColor: '',
-            },
-            disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[300],
-              borderColor: '',
-            },
-          },
-        },
-        tertiary: {
-          // type
-          main: {
-            // variant: this is the default variant
-            default: {
-              backgroundColor: colors.white,
-              textColor: semanticColors.purple[500],
-              borderColor: semanticColors.grey[300],
-            },
-            hover: {
-              backgroundColor: semanticColors.purple[100],
-              textColor: semanticColors.purple[700],
-              borderColor: semanticColors.grey[300],
-            },
-            active: {
-              backgroundColor: semanticColors.blue[100],
-              textColor: semanticColors.purple[600],
-              borderColor: semanticColors.grey[600],
-            },
-            disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[300],
-              borderColor: semanticColors.grey[300],
-            },
-          },
-          cancel: {
-            // variant
-            default: {
-              backgroundColor: colors.white,
-              textColor: semanticColors.red[600],
-              borderColor: semanticColors.grey[300],
-            },
-            hover: {
-              backgroundColor: semanticColors.red[100],
-              textColor: semanticColors.red[700],
-              borderColor: semanticColors.grey[300],
-            },
-            active: {
-              backgroundColor: semanticColors.red[200],
-              textColor: semanticColors.red[800],
-              borderColor: semanticColors.grey[300],
-            },
-            disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[300],
-              borderColor: semanticColors.grey[300],
-            },
-          },
-        },
-        ghost: {
-          // type
-          main: {
-            // variant: this is the default variant
-            default: {
-              backgroundColor: colors.white,
-              textColor: semanticColors.purple[500],
-              borderColor: '',
-            },
-            hover: {
-              backgroundColor: semanticColors.blue[200],
-              textColor: semanticColors.purple[700],
-              borderColor: '',
-            },
-            active: {
-              backgroundColor: semanticColors.blue[100],
-              textColor: semanticColors.purple[600],
-              borderColor: '',
-            },
-            disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[300],
-              borderColor: '',
-            },
-          },
-          cancel: {
-            // variant
-            default: {
-              backgroundColor: colors.white,
-              textColor: semanticColors.red[600],
-              borderColor: '',
-            },
-            hover: {
-              backgroundColor: semanticColors.red[100],
-              textColor: semanticColors.red[700],
-              borderColor: '',
-            },
-            active: {
-              backgroundColor: semanticColors.red[200],
-              textColor: semanticColors.red[800],
-              borderColor: '',
-            },
-            disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[300],
-              borderColor: '',
-            },
-          },
-        },
-      },
-      dark: {
-        // theme
-        primary: {
-          // type
-          main: {
-            // variant: this is the default variant
-            default: {
-              backgroundColor: colors.white,
-              textColor: semanticColors.teal[800],
-              borderColor: '',
-            },
-            hover: {
-              backgroundColor: semanticColors.blue[100],
-              textColor: semanticColors.teal[800],
-              borderColor: '',
-            },
-            active: {
-              backgroundColor: semanticColors.blue[100],
-              textColor: semanticColors.teal[800],
-              borderColor: '',
-            },
-            disabled: {
-              textColor: semanticColors.grey[800],
-              backgroundColor: semanticColors.grey[400],
-              borderColor: '',
-            },
-          },
-          cancel: {
-            // variant
-            default: {
-              backgroundColor: semanticColors.red[400],
-              textColor: semanticColors.teal[800],
-              borderColor: '',
-            },
-            hover: {
-              backgroundColor: semanticColors.red[100],
-              textColor: semanticColors.teal[800],
-              borderColor: '',
-            },
-            active: {
-              backgroundColor: semanticColors.red[200],
-              textColor: semanticColors.teal[800],
-              borderColor: '',
-            },
-            disabled: {
-              backgroundColor: semanticColors.grey[300],
-              textColor: semanticColors.grey[800],
-              borderColor: '',
-            },
-          },
-        },
-        secondary: {
-          // type
-          main: {
-            // variant: this is the default variant
-            default: {
-              backgroundColor: semanticColors.teal[800],
-              textColor: semanticColors.purple[50],
-              borderColor: '',
-            },
-            hover: {
-              backgroundColor: semanticColors.teal[600],
-              textColor: semanticColors.purple[50],
-              borderColor: '',
-            },
-            active: {
-              backgroundColor: semanticColors.teal[700],
-              textColor: semanticColors.purple[50],
-              borderColor: '',
-            },
-            disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
-              borderColor: '',
-            },
-          },
-          cancel: {
-            // variant
-            default: {
-              backgroundColor: semanticColors.red[800],
-              textColor: semanticColors.red[400],
-              borderColor: '',
-            },
-            hover: {
-              backgroundColor: semanticColors.red[700],
-              textColor: semanticColors.red[300],
-              borderColor: '',
-            },
-            active: {
-              backgroundColor: semanticColors.red[600],
-              textColor: semanticColors.red[200],
-              borderColor: '',
-            },
-            disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
-              borderColor: '',
-            },
-          },
-        },
-        tertiary: {
-          // type
-          main: {
-            // variant: this is the default variant
-            default: {
-              backgroundColor: 'transparent',
-              textColor: semanticColors.purple[50],
-              borderColor: semanticColors.teal[500],
-            },
-            hover: {
-              backgroundColor: semanticColors.teal[600],
-              textColor: semanticColors.purple[50],
-              borderColor: semanticColors.teal[400],
-            },
-            active: {
-              backgroundColor: semanticColors.teal[700],
-              textColor: semanticColors.purple[50],
-              borderColor: semanticColors.teal[300],
-            },
-            disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
-              borderColor: semanticColors.grey[800],
-            },
-          },
-          cancel: {
-            // variant
-            default: {
-              backgroundColor: semanticColors.teal[200],
-              textColor: semanticColors.red[400],
-              borderColor: semanticColors.teal[500],
-            },
-            hover: {
-              backgroundColor: semanticColors.red[700],
-              textColor: semanticColors.red[700],
-              borderColor: semanticColors.teal[400],
-            },
-            active: {
-              backgroundColor: semanticColors.red[600],
-              textColor: semanticColors.red[200],
-              borderColor: semanticColors.teal[300],
-            },
-            disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
-              borderColor: semanticColors.grey[800],
-            },
-          },
-        },
-        ghost: {
-          // type
-          main: {
-            // variant: this is the default variant
-            default: {
-              backgroundColor: 'transparent',
-              textColor: semanticColors.purple[50],
-              borderColor: '',
-            },
-            hover: {
-              backgroundColor: semanticColors.teal[600],
-              textColor: semanticColors.purple[50],
-              borderColor: '',
-            },
-            active: {
-              backgroundColor: semanticColors.teal[700],
-              textColor: semanticColors.purple[50],
-              borderColor: '',
-            },
-            disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
-              borderColor: '',
-            },
-          },
-          cancel: {
-            // variant
-            default: {
-              backgroundColor: semanticColors.teal[200],
-              textColor: semanticColors.red[400],
-              borderColor: '',
-            },
-            hover: {
-              backgroundColor: semanticColors.red[700],
-              textColor: semanticColors.red[300],
-              borderColor: '',
-            },
-            active: {
-              backgroundColor: semanticColors.red[600],
-              textColor: semanticColors.red[200],
-              borderColor: '',
-            },
-            disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
-              borderColor: '',
-            },
-          },
-        },
-      },
-      size: {
-        large: {
-          padding: '10px 20px',
-          fontSize: '14px',
-          iconWidth: '34px',
-        },
-        medium: {
-          padding: '8px 16px',
-          fontSize: '14px',
-          iconWidth: '30px',
-        },
-        small: {
-          padding: '6px 12px',
-          fontSize: '14px',
-          iconWidth: '26px',
-        },
-      },
-    },
-  }
-})()
-
-export default theme
+const theme = (() => {
+  const colors = {
+    primary: '#5900CC',
+    secondary: '#FAF5FF',
+    tertiary: '#d5d5d5',
+    black: '#263238',
+    black2: '#151B1E',
+    yellow: '#fdb813',
+    yellow2: '#FFEFB7',
+    yellow3: '#FFFBEE',
+    yellow4: '#FFE066',
+    darkGray: '#818181',
+    mediumGray: '#d5d5d5',
+    lightGray: '#f2f2f2',
+    white: '#ffffff',
+    blue: '#48a2d0',
+    blue1: '#e4efff',
+    blue2: '#f6faff',
+    blue3: '#6CD4D4',
+    blue4: '#66D0F3',
+    blue5: '#00B0EB',
+    brightBlue: '#0068DE',
+    ballBlue: '#2CC0EB',
+    red: '#FF5656',
+    red1: '#f5a2a2',
+    red2: '#de5959',
+    red3: '#FFCCCC',
+    red4: '#FF9A9A',
+    pureRed: '#ff0000',
+    darkRed: '#d00000',
+    cornellRed: '#a52019',
+    transparentRed10: '#ff000016',
+    transparentRed20: '#ff000032',
+    transparentRed40: '#ff000064',
+    transparentRed50: '#ff000080',
+    grey1: '#666',
+    grey2: '#c4c4c4',
+    grey3: '#b2b9c5',
+    grey4: '#dee2eb',
+    grey5: '#fafafa',
+    grey6: '#555d61',
+    grey7: '#f2f1f7',
+    grey8: '#393939',
+    grey9: '#607466',
+    grey10: '#4a5861',
+    grey11: '#656d70',
+    grey12: '#787d81',
+    grey13: '#CCCCCC',
+    grey14: '#D1DBE0',
+    grey15: '#E1E7EA',
+    grey16: '#F0F3F5',
+    grey17: '#394E58',
+    grey18: '#3E5C6A',
+    grey19: '#6E8E9E',
+    grey20: '#D9DEE9',
+    grey21: '#3E464B',
+    turquoise: '#20A4CA',
+    green: '#99db0c',
+    green2: '#e5fcb4',
+    green3: '#C2E96D',
+    seaGreen: '#008351',
+    purple: '#505ca6', // Keeping this as a standalone purple, but nested purple object below takes precedence for purple[500]
+    purple1: '#F1E5FF',
+    purple2: '#C739E4',
+    purple3: '#E9CEFE',
+    purple4: '#D0D6F5',
+    purple5: '#533181',
+    purple6: '#6F20DC',
+    orange: '#ffc338',
+    disabled: '#dfe1e1',
+    transparentWhite2: '#ffffff32',
+    transparentWhite1: '#ffffff16',
+    transparentBlack1: '#263238e6',
+    transparentBlack2: '#263238e5',
+    transparentBlue1: '#20a4cae6',
+    blueElectric: '#66dffa',
+    eturnityGrey: '#263238',
+    teal: '#018b7d',
+    slateGrey: '#495257',
+    cornflower: '#6276DF',
+    lavender: '#8392EE',
+  }
+
+  const semanticColors = {
+    purple: {
+      50: '#F5EEFF',
+      100: '#EEE4FC',
+      200: '#E8D8FE',
+      300: '#D3BBF5',
+      400: '#B17BFA',
+      500: '#6F20DC',
+      600: '#5C1FAF',
+      700: '#411083',
+      800: '#33165A',
+      900: '#190B2D',
+    },
+    beige: {
+      50: '#F9F5F2',
+      100: '#F2EBE7',
+      200: '#E6D6D0',
+      300: '#D9C2B8',
+      400: '#CDADA1',
+      500: '#C09989',
+      600: '#9A7A6E',
+      700: '#6A5247',
+      800: '#4D3D37',
+      900: '#261F1B',
+    },
+    grey: {
+      50: '#FDFDFD',
+      100: '#F8F9FB',
+      200: '#F2F3F7',
+      300: '#EBEEF3',
+      400: '#E5E8EF',
+      500: '#D9DEE9',
+      600: '#B2B5BC',
+      700: '#85888D',
+      800: '#595A5E',
+      900: '#2C2D2F',
+    },
+    teal: {
+      50: '#F0F3F5',
+      100: '#E1E7EA',
+      200: '#D1DBE0',
+      300: '#ADC0C8',
+      400: '#8CA6B3',
+      500: '#6E8E9E',
+      600: '#3E5C6A',
+      700: '#394E58',
+      800: '#263238',
+      900: '#151B1E',
+    },
+    blue: {
+      50: '#E0F6FD',
+      100: '#CCEFFB',
+      200: '#99DFF7',
+      300: '#66D0F3',
+      400: '#33C0EF',
+      500: '#00B0EB',
+      600: '#008DBC',
+      700: '#006A8D',
+      800: '#00465E',
+      900: '#00232F',
+    },
+    green: {
+      50: '#F8FFE9',
+      100: '#F2FFD6',
+      200: '#D6F19E',
+      300: '#C2E96D',
+      400: '#ADE23D',
+      500: '#99DB0C',
+      600: '#7AAF0A',
+      700: '#5C8307',
+      800: '#3D5805',
+      900: '#1F2C02',
+    },
+    yellow: {
+      50: '#FFFBEC',
+      100: '#FFF5CC',
+      200: '#FFEB99',
+      300: '#FFE066',
+      400: '#FFD633',
+      500: '#FFCC00',
+      600: '#CCA300',
+      700: '#997A00',
+      800: '#665200',
+      900: '#332900',
+    },
+    red: {
+      50: '#FFEBEB',
+      100: '#FFDDDD',
+      200: '#FFBBBB',
+      300: '#FF9A9A',
+      400: '#FF7F7F',
+      500: '#FF6565',
+      600: '#CC4545',
+      700: '#993434',
+      800: '#662222',
+      900: '#331111',
+    },
+  }
+
+  const chartGradients = {
+    simple: {
+      from: semanticColors.purple[500],
+      to: semanticColors.purple[400],
+    },
+    stacked: [
+      { from: '#F5EDFF', to: '#DEC5FF' },
+      { from: '#CAA2FF', to: '#F2E8FF' },
+      { from: '#B987FC', to: '#904AEF' },
+      { from: '#8B40F2', to: '#4A1394' },
+      { from: '#6A05F2', to: '#4905A5' },
+      { from: '#5402C3', to: '#2B0362' },
+    ],
+  }
+
+  return {
+    colors,
+    semanticColors,
+    chartGradients,
+    fonts: {
+      mainFont: '"Figtree", sans-serif',
+    },
+    screen: {
+      mobileSmall: '345px',
+      mobile: '425px',
+      mobileLarge: '530px',
+      tablet: '768px',
+      tabletLarge: '950px',
+      tabletLandscape: '1024px',
+      tabletLandscapeLarge: '1280px',
+      laptopSmall: '1440px',
+      laptopMiddle: '1680px',
+    },
+    borderRadius: '4px',
+    boxShadow: {
+      card: '0px 2px 8px 2px rgba(0, 0, 0, 0.15)',
+    },
+    progressBar: {
+      light: {
+        fillColor: semanticColors.purple[500],
+        backgroundColor: semanticColors.grey[200],
+        labelColor: semanticColors.grey[700],
+      },
+      dark: {
+        fillColor: semanticColors.white,
+        backgroundColor: semanticColors.grey[700],
+        labelColor: semanticColors.grey[200],
+      },
+    },
+    mainButton: {
+      light: {
+        // theme
+        primary: {
+          // type
+          main: {
+            // variant: this is the default variant
+            default: {
+              backgroundColor: semanticColors.purple[500],
+              textColor: colors.white,
+              borderColor: '',
+            },
+            hover: {
+              backgroundColor: semanticColors.purple[700],
+              textColor: colors.white,
+              borderColor: '',
+            },
+            active: {
+              backgroundColor: semanticColors.purple[600],
+              textColor: colors.white,
+              borderColor: '',
+            },
+            disabled: {
+              textColor: colors.white,
+              backgroundColor: semanticColors.grey[500],
+              borderColor: '',
+            },
+          },
+          cancel: {
+            // variant
+            default: {
+              backgroundColor: semanticColors.red[600],
+              textColor: colors.white,
+              borderColor: '',
+            },
+            hover: {
+              backgroundColor: semanticColors.red[800],
+              textColor: colors.white,
+              borderColor: '',
+            },
+            active: {
+              backgroundColor: semanticColors.red[700],
+              textColor: colors.white,
+              borderColor: '',
+            },
+            disabled: {
+              textColor: colors.white,
+              backgroundColor: semanticColors.grey[500],
+              borderColor: '',
+            },
+          },
+        },
+        secondary: {
+          // type
+          main: {
+            // variant: this is the default variant
+            default: {
+              backgroundColor: semanticColors.purple[50],
+              textColor: semanticColors.purple[500],
+              borderColor: '',
+            },
+            hover: {
+              backgroundColor: semanticColors.purple[100],
+              textColor: semanticColors.purple[700],
+              borderColor: '',
+            },
+            active: {
+              backgroundColor: semanticColors.purple[50],
+              textColor: semanticColors.purple[600],
+              borderColor: '',
+            },
+            disabled: {
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[300],
+              borderColor: '',
+            },
+          },
+          cancel: {
+            // variant
+            default: {
+              backgroundColor: semanticColors.red[50],
+              textColor: semanticColors.red[600],
+              borderColor: '',
+            },
+            hover: {
+              backgroundColor: semanticColors.red[100],
+              textColor: semanticColors.red[700],
+              borderColor: '',
+            },
+            active: {
+              backgroundColor: semanticColors.red[200],
+              textColor: semanticColors.red[800],
+              borderColor: '',
+            },
+            disabled: {
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[300],
+              borderColor: '',
+            },
+          },
+        },
+        tertiary: {
+          // type
+          main: {
+            // variant: this is the default variant
+            default: {
+              backgroundColor: colors.white,
+              textColor: semanticColors.purple[500],
+              borderColor: semanticColors.grey[300],
+            },
+            hover: {
+              backgroundColor: semanticColors.purple[100],
+              textColor: semanticColors.purple[700],
+              borderColor: semanticColors.grey[300],
+            },
+            active: {
+              backgroundColor: semanticColors.blue[100],
+              textColor: semanticColors.purple[600],
+              borderColor: semanticColors.grey[600],
+            },
+            disabled: {
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[300],
+              borderColor: semanticColors.grey[300],
+            },
+          },
+          cancel: {
+            // variant
+            default: {
+              backgroundColor: colors.white,
+              textColor: semanticColors.red[600],
+              borderColor: semanticColors.grey[300],
+            },
+            hover: {
+              backgroundColor: semanticColors.red[100],
+              textColor: semanticColors.red[700],
+              borderColor: semanticColors.grey[300],
+            },
+            active: {
+              backgroundColor: semanticColors.red[200],
+              textColor: semanticColors.red[800],
+              borderColor: semanticColors.grey[300],
+            },
+            disabled: {
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[300],
+              borderColor: semanticColors.grey[300],
+            },
+          },
+        },
+        ghost: {
+          // type
+          main: {
+            // variant: this is the default variant
+            default: {
+              backgroundColor: colors.white,
+              textColor: semanticColors.purple[500],
+              borderColor: '',
+            },
+            hover: {
+              backgroundColor: semanticColors.blue[200],
+              textColor: semanticColors.purple[700],
+              borderColor: '',
+            },
+            active: {
+              backgroundColor: semanticColors.blue[100],
+              textColor: semanticColors.purple[600],
+              borderColor: '',
+            },
+            disabled: {
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[300],
+              borderColor: '',
+            },
+          },
+          cancel: {
+            // variant
+            default: {
+              backgroundColor: colors.white,
+              textColor: semanticColors.red[600],
+              borderColor: '',
+            },
+            hover: {
+              backgroundColor: semanticColors.red[100],
+              textColor: semanticColors.red[700],
+              borderColor: '',
+            },
+            active: {
+              backgroundColor: semanticColors.red[200],
+              textColor: semanticColors.red[800],
+              borderColor: '',
+            },
+            disabled: {
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[300],
+              borderColor: '',
+            },
+          },
+        },
+      },
+      dark: {
+        // theme
+        primary: {
+          // type
+          main: {
+            // variant: this is the default variant
+            default: {
+              backgroundColor: colors.white,
+              textColor: semanticColors.teal[800],
+              borderColor: '',
+            },
+            hover: {
+              backgroundColor: semanticColors.blue[100],
+              textColor: semanticColors.teal[800],
+              borderColor: '',
+            },
+            active: {
+              backgroundColor: semanticColors.blue[100],
+              textColor: semanticColors.teal[800],
+              borderColor: '',
+            },
+            disabled: {
+              textColor: semanticColors.grey[800],
+              backgroundColor: semanticColors.grey[400],
+              borderColor: '',
+            },
+          },
+          cancel: {
+            // variant
+            default: {
+              backgroundColor: semanticColors.red[400],
+              textColor: semanticColors.teal[800],
+              borderColor: '',
+            },
+            hover: {
+              backgroundColor: semanticColors.red[100],
+              textColor: semanticColors.teal[800],
+              borderColor: '',
+            },
+            active: {
+              backgroundColor: semanticColors.red[200],
+              textColor: semanticColors.teal[800],
+              borderColor: '',
+            },
+            disabled: {
+              backgroundColor: semanticColors.grey[300],
+              textColor: semanticColors.grey[800],
+              borderColor: '',
+            },
+          },
+        },
+        secondary: {
+          // type
+          main: {
+            // variant: this is the default variant
+            default: {
+              backgroundColor: semanticColors.teal[800],
+              textColor: semanticColors.purple[50],
+              borderColor: '',
+            },
+            hover: {
+              backgroundColor: semanticColors.teal[600],
+              textColor: semanticColors.purple[50],
+              borderColor: '',
+            },
+            active: {
+              backgroundColor: semanticColors.teal[700],
+              textColor: semanticColors.purple[50],
+              borderColor: '',
+            },
+            disabled: {
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
+              borderColor: '',
+            },
+          },
+          cancel: {
+            // variant
+            default: {
+              backgroundColor: semanticColors.red[800],
+              textColor: semanticColors.red[400],
+              borderColor: '',
+            },
+            hover: {
+              backgroundColor: semanticColors.red[700],
+              textColor: semanticColors.red[300],
+              borderColor: '',
+            },
+            active: {
+              backgroundColor: semanticColors.red[600],
+              textColor: semanticColors.red[200],
+              borderColor: '',
+            },
+            disabled: {
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
+              borderColor: '',
+            },
+          },
+        },
+        tertiary: {
+          // type
+          main: {
+            // variant: this is the default variant
+            default: {
+              backgroundColor: 'transparent',
+              textColor: semanticColors.purple[50],
+              borderColor: semanticColors.teal[500],
+            },
+            hover: {
+              backgroundColor: semanticColors.teal[600],
+              textColor: semanticColors.purple[50],
+              borderColor: semanticColors.teal[400],
+            },
+            active: {
+              backgroundColor: semanticColors.teal[700],
+              textColor: semanticColors.purple[50],
+              borderColor: semanticColors.teal[300],
+            },
+            disabled: {
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
+              borderColor: semanticColors.grey[800],
+            },
+          },
+          cancel: {
+            // variant
+            default: {
+              backgroundColor: semanticColors.teal[200],
+              textColor: semanticColors.red[400],
+              borderColor: semanticColors.teal[500],
+            },
+            hover: {
+              backgroundColor: semanticColors.red[700],
+              textColor: semanticColors.red[700],
+              borderColor: semanticColors.teal[400],
+            },
+            active: {
+              backgroundColor: semanticColors.red[600],
+              textColor: semanticColors.red[200],
+              borderColor: semanticColors.teal[300],
+            },
+            disabled: {
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
+              borderColor: semanticColors.grey[800],
+            },
+          },
+        },
+        ghost: {
+          // type
+          main: {
+            // variant: this is the default variant
+            default: {
+              backgroundColor: 'transparent',
+              textColor: semanticColors.purple[50],
+              borderColor: '',
+            },
+            hover: {
+              backgroundColor: semanticColors.teal[600],
+              textColor: semanticColors.purple[50],
+              borderColor: '',
+            },
+            active: {
+              backgroundColor: semanticColors.teal[700],
+              textColor: semanticColors.purple[50],
+              borderColor: '',
+            },
+            disabled: {
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
+              borderColor: '',
+            },
+          },
+          cancel: {
+            // variant
+            default: {
+              backgroundColor: semanticColors.teal[200],
+              textColor: semanticColors.red[400],
+              borderColor: '',
+            },
+            hover: {
+              backgroundColor: semanticColors.red[700],
+              textColor: semanticColors.red[300],
+              borderColor: '',
+            },
+            active: {
+              backgroundColor: semanticColors.red[600],
+              textColor: semanticColors.red[200],
+              borderColor: '',
+            },
+            disabled: {
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
+              borderColor: '',
+            },
+          },
+        },
+      },
+      size: {
+        large: {
+          padding: '10px 20px',
+          fontSize: '14px',
+          iconWidth: '34px',
+        },
+        medium: {
+          padding: '8px 16px',
+          fontSize: '14px',
+          iconWidth: '30px',
+        },
+        small: {
+          padding: '6px 12px',
+          fontSize: '14px',
+          iconWidth: '26px',
+        },
+      },
+    },
+  }
+})()
+
+export default theme