@eturnity/eturnity_reusable_components 8.7.5-EPDM-12618.3 → 8.7.5-EPIC-8593.0

package/src/assets/theme.js

@@ -1,46 +1,623 @@
-const theme = {
-  colors: {
-    primary: '#48a2d0',
-    secondary: '#fdb813',
+const theme = (() => {
+  const colors = {
+    primary: '#5900CC',
+    secondary: '#FAF5FF',
     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',
-    transparentWhite1: '#ffffff32',
-    transparentWhite2: '#ffffff16',
-    transparentWhite3: '#ffffff48',
-    transparentBlack1: '#263238e6',
+    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',
+    transparentBlue1: '#20a4cae6',
+    blueElectric: '#66dffa',
     eturnityGrey: '#263238',
-  },
-  screen: {
-    mobileSmall: '345px',
-    mobile: '425px',
-    mobileLarge: '530px',
-    tablet: '768px',
-    tabletLarge: '950px',
-  },
-  fonts: {
-    mainFont: '"Figtree", sans-serif',
-  },
-  borderRadius: '4px',
-}
+    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',
+        },
+      },
+    },
+  }
+})()
 
 export default theme