@eturnity/eturnity_reusable_components 8.10.3-EPDM-13568.6 → 8.10.3-EPDM-14085.2

package/src/assets/theme.js

@@ -1,623 +1,47 @@
-const theme = (() => {
-  const colors = {
-    primary: '#5900CC',
-    secondary: '#FAF5FF',
+const theme = {
+  colors: {
+    primary: '#48a2d0',
+    secondary: '#fdb813',
     tertiary: '#d5d5d5',
     black: '#263238',
-    black2: '#151B1E',
     yellow: '#fdb813',
-    yellow2: '#FFEFB7',
-    yellow3: '#FFFBEE',
-    yellow4: '#FFE066',
     darkGray: '#818181',
+    gray1: '#666',
     mediumGray: '#d5d5d5',
     lightGray: '#f2f2f2',
     white: '#ffffff',
     blue: '#48a2d0',
+    blue2: '#6CD4D4',
+    red: '#ff5656',
+    pureRed: '#ff0000',
     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',
+    transparentWhite1: '#ffffff32',
+    transparentWhite2: '#ffffff16',
+    transparentWhite3: '#ffffff48',
     transparentBlack1: '#263238e6',
-    transparentBlue1: '#20a4cae6',
-    blueElectric: '#66dffa',
+    transparentBlack2: '#263238e5',
+    disabled: '#dfe1e1',
     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',
-    },
-  }
-
-  return {
-    colors,
-    semanticColors,
-    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.blue[200],
-              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',
-        },
-      },
-    },
-  }
-})()
+  },
+  screen: {
+    mobileSmall: '345px',
+    mobile: '425px',
+    mobileLarge: '530px',
+    tablet: '768px',
+    tabletLarge: '950px',
+  },
+  fonts: {
+    mainFont: '"Figtree", sans-serif',
+  },
+  borderRadius: '4px',
+}
 
 export default theme