@eturnity/eturnity_reusable_components 8.7.5-EPIC-8593 → 8.7.5-EPIC-8593.0

package/src/assets/svgIcons/virtual_storage.svg

@@ -1,4 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.0497 8.45352H8.91235V10.296H11.0497V8.45352Z" fill="white"/>
-<path d="M15.0927 6.53724C14.9069 6.52637 14.7205 6.52637 14.5347 6.53724C14.1318 5.37717 13.336 4.39446 12.2851 3.75918C11.2341 3.12389 9.99417 2.876 8.77976 3.05841C7.56535 3.24082 6.45293 3.84205 5.635 4.75806C4.81708 5.67406 4.34512 6.84719 4.30082 8.07442C4.30975 8.30745 4.33437 8.5396 4.37452 8.76931C4.18359 8.73213 3.98989 8.711 3.79544 8.70614C3.3069 8.6797 2.8181 8.75309 2.35886 8.92183C1.89963 9.09058 1.4796 9.35114 1.12442 9.68762C0.769239 10.0241 0.486352 10.4294 0.293029 10.8789C0.0997049 11.3283 0 11.8124 0 12.3017C0 12.7909 0.0997049 13.2751 0.293029 13.7245C0.486352 14.1739 0.769239 14.5793 1.12442 14.9157C1.4796 15.2522 1.89963 15.5128 2.35886 15.6815C2.8181 15.8503 3.3069 15.9237 3.79544 15.8972H15.0927C15.726 15.9273 16.3587 15.8285 16.9527 15.6068C17.5467 15.3852 18.0895 15.0453 18.5483 14.6078C19.007 14.1703 19.3723 13.6442 19.6218 13.0614C19.8713 12.4786 20 11.8512 20 11.2172C20 10.5833 19.8713 9.95588 19.6218 9.37308C19.3723 8.79029 19.007 8.26419 18.5483 7.82666C18.0895 7.38912 17.5467 7.04925 16.9527 6.82761C16.3587 6.60598 15.726 6.50719 15.0927 6.53724ZM12.6711 13.4862H7.31202V7.05314H8.80709V6.21085H11.1655V7.05314H12.6711V13.4862Z" fill="white"/>
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.59874 3.5716C2.59874 1.86991 3.99228 0.5 5.69942 0.5C6.96139 0.5 8.05087 1.24777 8.53416 2.32521C8.55682 2.37573 8.61524 2.40008 8.66716 2.38086C8.95792 2.27322 9.27253 2.2144 9.60046 2.2144C11.0682 2.2144 12.2677 3.39242 12.2677 4.8574C12.2677 4.89866 12.2667 4.93972 12.2648 4.98056C12.2628 5.02358 12.2874 5.06359 12.3268 5.08102C13.2863 5.5057 14.0015 6.36512 14.0015 7.429C14.0015 8.97487 12.5184 10.072 10.9008 10.072H8.90013C8.8449 10.072 8.80013 10.1168 8.80013 10.172V10.8579C8.80013 11.134 8.57627 11.3579 8.30013 11.3579C8.02398 11.3579 7.80013 11.134 7.80013 10.8579V8.28629C7.80013 8.01015 8.02398 7.78629 8.30013 7.78629C8.57627 7.78629 8.80013 8.01015 8.80013 8.28629V8.972C8.80013 9.02723 8.8449 9.072 8.90012 9.072H10.9008C12.1559 9.072 13.0015 8.25022 13.0015 7.429C13.0015 6.76283 12.4629 6.10939 11.5719 5.87241L11.1882 5.77033C11.1351 5.75621 11.1033 5.70189 11.117 5.64869L11.2163 5.26419C11.2498 5.13461 11.2677 4.99842 11.2677 4.8574C11.2677 3.95528 10.5266 3.2144 9.60046 3.2144C9.212 3.2144 8.85633 3.3447 8.57361 3.56289L8.04049 3.97434C7.98042 4.0207 7.89262 3.98589 7.88064 3.91096L7.77438 3.24596C7.61695 2.26077 6.75113 1.5 5.69942 1.5C4.53393 1.5 3.59874 2.43277 3.59874 3.5716C3.59874 3.8152 3.64116 4.04798 3.71875 4.26386L3.92307 4.83232C3.94729 4.89973 3.89488 4.97 3.82337 4.96599L3.22024 4.93219C3.18007 4.92994 3.13956 4.9288 3.09874 4.9288C1.93324 4.9288 0.998047 5.86157 0.998047 7.0004C0.998047 8.13923 1.93324 9.072 3.09874 9.072H5.09943C5.15466 9.072 5.19943 9.02723 5.19943 8.972V6.57184C5.19943 6.2957 5.42329 6.07184 5.69943 6.07184C5.97557 6.07184 6.19943 6.2957 6.19943 6.57184V13.0008C6.19943 13.277 5.97557 13.5008 5.69943 13.5008C5.42329 13.5008 5.19943 13.277 5.19943 13.0008V10.172C5.19943 10.1168 5.15466 10.072 5.09943 10.072H3.09874C1.39159 10.072 -0.00195312 8.70209 -0.00195312 7.0004C-0.00195312 5.49315 1.09133 4.24619 2.52745 3.98091C2.58088 3.97104 2.6182 3.92161 2.61297 3.86752C2.60355 3.77007 2.59874 3.67135 2.59874 3.5716Z" fill="#263238"/>
 </svg>

package/src/assets/theme.js

@@ -1,58 +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',
+    blue1: '#e4efff',
+    blue2: '#f6faff',
+    blue3: '#6CD4D4',
+    blue4: '#66D0F3',
+    blue5: '#00B0EB',
+    brightBlue: '#0068DE',
+    ballBlue: '#2CC0EB',
     red: '#FF5656',
     red1: '#f5a2a2',
     red2: '#de5959',
     red3: '#FFCCCC',
-    red4: '#FFEBEB',
+    red4: '#FF9A9A',
     pureRed: '#ff0000',
-    blue1: '#e4efff',
-    brightBlue: '#0068DE',
+    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',
-    purple: '#505ca6',
+    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',
-    purple7: '#F5EEFF',
-    purple8: '#B17BFA',
-    transparentWhite1: '#ffffff32',
-    transparentWhite2: '#ffffff16',
-    transparentWhite3: '#ffffff48',
-    transparentBlack1: '#263238e6',
+    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