@eturnity/eturnity_reusable_components 8.22.4 → 8.22.6

package/dist/main.es8.js

@@ -1,42 +1,776 @@
-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",
-    red: "#ff5656",
     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",
-    eturnityGrey: "#263238"
-  },
-  screen: {
-    mobileSmall: "345px",
-    mobile: "425px",
-    mobileLarge: "530px",
-    tablet: "768px",
-    tabletLarge: "950px"
-  },
-  borderRadius: "4px"
-};
+    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.purple[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.purple[200],
+              textColor: semanticColors.purple[700],
+              borderColor: ""
+            },
+            active: {
+              backgroundColor: semanticColors.purple[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: ""
+            }
+          }
+        },
+        protag: {
+          main: {
+            default: {
+              backgroundColor: semanticColors.yellow[300],
+              textColor: semanticColors.teal[800],
+              borderColor: "transparent"
+            },
+            hover: {
+              backgroundColor: semanticColors.yellow[300],
+              textColor: semanticColors.teal[800],
+              borderColor: ""
+            },
+            active: {
+              backgroundColor: semanticColors.yellow[300],
+              textColor: semanticColors.teal[800],
+              borderColor: ""
+            },
+            disabled: {
+              backgroundColor: semanticColors.yellow[300],
+              textColor: semanticColors.teal[400],
+              borderColor: ""
+            }
+          }
+        },
+        filter: {
+          main: {
+            default: {
+              backgroundColor: colors.white,
+              textColor: semanticColors.teal[800],
+              borderColor: semanticColors.teal[100]
+            },
+            hover: {
+              backgroundColor: semanticColors.teal[50],
+              textColor: semanticColors.teal[800],
+              borderColor: semanticColors.teal[100]
+            },
+            active: {
+              backgroundColor: semanticColors.teal[100],
+              textColor: semanticColors.teal[800],
+              borderColor: semanticColors.teal[100]
+            },
+            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.purple[100],
+              textColor: semanticColors.teal[800],
+              borderColor: ""
+            },
+            active: {
+              backgroundColor: semanticColors.purple[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]
+            }
+          }
+        },
+        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: ""
+            }
+          }
+        },
+        filter: {
+          main: {
+            default: {
+              backgroundColor: colors.white,
+              textColor: semanticColors.teal[800],
+              borderColor: semanticColors.teal[100]
+            },
+            hover: {
+              backgroundColor: semanticColors.teal[100],
+              textColor: semanticColors.teal[800],
+              borderColor: semanticColors.teal[100]
+            },
+            active: {
+              backgroundColor: semanticColors.teal[100],
+              textColor: semanticColors.teal[800],
+              borderColor: semanticColors.teal[100]
+            },
+            disabled: {
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[300],
+              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"
+        },
+        tiny: {
+          padding: "2px 5px",
+          fontSize: "10px",
+          iconWidth: "18px"
+        }
+      }
+    }
+  };
+})();
 export {
   theme as default
 };