@eturnity/eturnity_reusable_components 9.22.2 → 9.25.1

package/dist/index.es3.js

@@ -78,6 +78,7 @@ const theme = (() => {
     transparentBlack1: "#162228e6",
     transparentBlack2: "#263238e5",
     transparentBlue1: "#20a4cae6",
+    transparentTeal900: "#151B1EFA",
     blueElectric: "#66dffa",
     eturnityGrey: "#263238",
     teal: "#018b7d",
@@ -123,6 +124,7 @@ const theme = (() => {
       900: "#2C2D2F"
     },
     teal: {
+      25: "#F4F8FA",
       50: "#F0F3F5",
       100: "#E1E7EA",
       200: "#D1DBE0",
@@ -171,6 +173,7 @@ const theme = (() => {
       900: "#332900"
     },
     red: {
+      25: "#FFF9F9",
       50: "#FFEBEB",
       100: "#FFDDDD",
       200: "#FFBBBB",
@@ -183,6 +186,7 @@ const theme = (() => {
       900: "#331111"
     },
     transparentWhite: {
+      50: "#ffffff16",
       100: "#ffffff24",
       200: "#ffffff48",
       300: "#ffffff64",
@@ -205,6 +209,7 @@ const theme = (() => {
       900: "#000000fa"
     },
     transparentTeal: {
+      50: "#6E8E9E16",
       100: "#6E8E9E24",
       200: "#6E8E9E48",
       300: "#6E8E9E64",
@@ -214,6 +219,29 @@ const theme = (() => {
       700: "#6E8E9Ed4",
       800: "#6E8E9Ee6",
       900: "#6E8E9Efa"
+    },
+    transparentRed: {
+      100: "#cc454524",
+      200: "#cc454548",
+      300: "#cc454564",
+      400: "#cc454580",
+      500: "#cc454596",
+      600: "#cc4545b4",
+      700: "#cc4545d4",
+      800: "#cc4545e6",
+      900: "#cc4545fa"
+    },
+    // Figma: white/000-10%, purple/400-08%, teal/400-10%, etc.
+    buttonIcon: {
+      overlayWhite10: "#ffffff1a",
+      overlayWhite20: "#ffffff33",
+      overlayBlack10: "#1622281a",
+      overlayBlack20: "#16222833",
+      overlayPurple8: "#b17bfa14",
+      overlayTeal10: "#8ca6b31a",
+      overlayTeal20: "#8ca6b333",
+      overlayRed8: "#ff656514",
+      none: "transparent"
     }
   };
   return {
@@ -259,22 +287,26 @@ const theme = (() => {
             default: {
               backgroundColor: semanticColors.purple[500],
               textColor: colors.white,
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10
             },
             hover: {
-              backgroundColor: semanticColors.purple[700],
+              backgroundColor: semanticColors.purple[600],
               textColor: colors.white,
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20
             },
             active: {
-              backgroundColor: semanticColors.purple[600],
+              backgroundColor: semanticColors.purple[700],
               textColor: colors.white,
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20
             },
             disabled: {
               textColor: colors.white,
               backgroundColor: semanticColors.grey[500],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20
             }
           },
           cancel: {
@@ -282,22 +314,26 @@ const theme = (() => {
             default: {
               backgroundColor: semanticColors.red[600],
               textColor: colors.white,
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10
             },
             hover: {
-              backgroundColor: semanticColors.red[800],
+              backgroundColor: semanticColors.red[700],
               textColor: colors.white,
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20
             },
             active: {
-              backgroundColor: semanticColors.red[700],
+              backgroundColor: semanticColors.red[800],
               textColor: colors.white,
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20
             },
             disabled: {
               textColor: colors.white,
-              backgroundColor: semanticColors.grey[500],
-              borderColor: ""
+              backgroundColor: semanticColors.transparentRed[300],
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.none
             }
           }
         },
@@ -308,22 +344,26 @@ const theme = (() => {
             default: {
               backgroundColor: semanticColors.purple[50],
               textColor: semanticColors.purple[500],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayPurple8
             },
             hover: {
               backgroundColor: semanticColors.purple[100],
-              textColor: semanticColors.purple[700],
-              borderColor: ""
+              textColor: semanticColors.purple[500],
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayPurple8
             },
             active: {
-              backgroundColor: semanticColors.purple[50],
-              textColor: semanticColors.purple[600],
-              borderColor: ""
+              backgroundColor: semanticColors.purple[200],
+              textColor: semanticColors.purple[500],
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayPurple8
             },
             disabled: {
               textColor: semanticColors.grey[600],
               backgroundColor: semanticColors.grey[300],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayPurple8
             }
           },
           cancel: {
@@ -331,22 +371,26 @@ const theme = (() => {
             default: {
               backgroundColor: semanticColors.red[50],
               textColor: semanticColors.red[600],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayRed8
             },
             hover: {
               backgroundColor: semanticColors.red[100],
               textColor: semanticColors.red[700],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayRed8
             },
             active: {
               backgroundColor: semanticColors.red[200],
               textColor: semanticColors.red[800],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayRed8
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[300],
-              borderColor: ""
+              textColor: semanticColors.red[200],
+              backgroundColor: semanticColors.red[25],
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.none
             }
           }
         },
@@ -357,22 +401,26 @@ const theme = (() => {
             default: {
               backgroundColor: colors.white,
               textColor: semanticColors.purple[500],
-              borderColor: semanticColors.grey[300]
+              borderColor: semanticColors.teal[200],
+              iconBackgroundColor: semanticColors.buttonIcon.none
             },
             hover: {
-              backgroundColor: semanticColors.purple[100],
-              textColor: semanticColors.purple[700],
-              borderColor: semanticColors.grey[300]
+              backgroundColor: colors.white,
+              textColor: semanticColors.purple[500],
+              borderColor: semanticColors.purple[300],
+              iconBackgroundColor: semanticColors.buttonIcon.none
             },
             active: {
-              backgroundColor: semanticColors.purple[100],
-              textColor: semanticColors.purple[600],
-              borderColor: semanticColors.grey[600]
+              backgroundColor: colors.white,
+              textColor: semanticColors.purple[500],
+              borderColor: semanticColors.purple[400],
+              iconBackgroundColor: semanticColors.buttonIcon.none
             },
             disabled: {
               textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[300],
-              borderColor: semanticColors.grey[300]
+              backgroundColor: colors.white,
+              borderColor: semanticColors.grey[500],
+              iconBackgroundColor: semanticColors.buttonIcon.none
             }
           },
           cancel: {
@@ -380,22 +428,26 @@ const theme = (() => {
             default: {
               backgroundColor: colors.white,
               textColor: semanticColors.red[600],
-              borderColor: semanticColors.grey[300]
+              borderColor: semanticColors.teal[200],
+              iconBackgroundColor: semanticColors.buttonIcon.none
             },
             hover: {
-              backgroundColor: semanticColors.red[100],
+              backgroundColor: colors.white,
               textColor: semanticColors.red[700],
-              borderColor: semanticColors.grey[300]
+              borderColor: semanticColors.red[700],
+              iconBackgroundColor: semanticColors.buttonIcon.none
             },
             active: {
-              backgroundColor: semanticColors.red[200],
+              backgroundColor: colors.white,
               textColor: semanticColors.red[800],
-              borderColor: semanticColors.grey[300]
+              borderColor: semanticColors.red[800],
+              iconBackgroundColor: semanticColors.buttonIcon.none
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[300],
-              borderColor: semanticColors.grey[300]
+              textColor: semanticColors.red[200],
+              backgroundColor: colors.white,
+              borderColor: semanticColors.teal[100],
+              iconBackgroundColor: semanticColors.buttonIcon.none
             }
           }
         },
@@ -406,22 +458,26 @@ const theme = (() => {
             default: {
               backgroundColor: colors.white,
               textColor: semanticColors.purple[500],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.none
             },
             hover: {
-              backgroundColor: semanticColors.purple[200],
-              textColor: semanticColors.purple[700],
-              borderColor: ""
+              backgroundColor: semanticColors.purple[100],
+              textColor: semanticColors.purple[500],
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20
             },
             active: {
-              backgroundColor: semanticColors.purple[100],
-              textColor: semanticColors.purple[600],
-              borderColor: ""
+              backgroundColor: semanticColors.purple[200],
+              textColor: semanticColors.purple[500],
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20
             },
             disabled: {
               textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[300],
-              borderColor: ""
+              backgroundColor: colors.white,
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.none
             }
           },
           cancel: {
@@ -429,44 +485,52 @@ const theme = (() => {
             default: {
               backgroundColor: colors.white,
               textColor: semanticColors.red[600],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.none
             },
             hover: {
               backgroundColor: semanticColors.red[100],
               textColor: semanticColors.red[700],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayRed8
             },
             active: {
               backgroundColor: semanticColors.red[200],
               textColor: semanticColors.red[800],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayRed8
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[300],
-              borderColor: ""
+              textColor: semanticColors.red[200],
+              backgroundColor: colors.white,
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.none
             }
           },
           tertiary: {
             default: {
               backgroundColor: "transparent",
               textColor: semanticColors.teal[800],
-              borderColor: semanticColors.teal[100]
+              borderColor: semanticColors.teal[100],
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
             },
             hover: {
               backgroundColor: semanticColors.grey[200],
               textColor: semanticColors.teal[800],
-              borderColor: semanticColors.teal[100]
+              borderColor: semanticColors.teal[100],
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20
             },
             active: {
               backgroundColor: semanticColors.grey[400],
               textColor: semanticColors.teal[800],
-              borderColor: semanticColors.teal[100]
+              borderColor: semanticColors.teal[100],
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20
             },
             disabled: {
               textColor: semanticColors.grey[600],
               backgroundColor: semanticColors.grey[500],
-              borderColor: semanticColors.grey[800]
+              borderColor: semanticColors.grey[500],
+              iconBackgroundColor: semanticColors.buttonIcon.none
             }
           }
         },
@@ -475,22 +539,26 @@ const theme = (() => {
             default: {
               backgroundColor: colors.white,
               textColor: semanticColors.teal[800],
-              borderColor: semanticColors.teal[100]
+              borderColor: semanticColors.teal[100],
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
             },
             hover: {
               backgroundColor: semanticColors.teal[50],
               textColor: semanticColors.teal[800],
-              borderColor: semanticColors.teal[100]
+              borderColor: semanticColors.teal[100],
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20
             },
             active: {
               backgroundColor: semanticColors.teal[100],
               textColor: semanticColors.teal[800],
-              borderColor: semanticColors.teal[100]
+              borderColor: semanticColors.teal[100],
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20
             },
             disabled: {
               textColor: semanticColors.grey[600],
               backgroundColor: semanticColors.grey[300],
-              borderColor: ""
+              borderColor: semanticColors.grey[500],
+              iconBackgroundColor: semanticColors.buttonIcon.none
             }
           }
         },
@@ -499,22 +567,26 @@ const theme = (() => {
             default: {
               backgroundColor: semanticColors.yellow[200],
               textColor: semanticColors.teal[800],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
             },
             hover: {
               backgroundColor: semanticColors.yellow[200],
               textColor: semanticColors.teal[800],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
             },
             active: {
               backgroundColor: semanticColors.yellow[200],
               textColor: semanticColors.teal[800],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
             },
             disabled: {
               backgroundColor: semanticColors.yellow[200],
               textColor: semanticColors.teal[400],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.none
             }
           }
         },
@@ -523,22 +595,26 @@ const theme = (() => {
             default: {
               backgroundColor: semanticColors.blue[200],
               textColor: semanticColors.teal[800],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
             },
             hover: {
               backgroundColor: semanticColors.blue[200],
               textColor: semanticColors.teal[800],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
             },
             active: {
               backgroundColor: semanticColors.blue[200],
               textColor: semanticColors.teal[800],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
             },
             disabled: {
               backgroundColor: semanticColors.blue[200],
               textColor: semanticColors.teal[400],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.none
             }
           }
         }
@@ -550,47 +626,55 @@ const theme = (() => {
           main: {
             // variant: this is the default variant
             default: {
-              backgroundColor: colors.white,
+              backgroundColor: semanticColors.teal[25],
               textColor: semanticColors.teal[800],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
             },
             hover: {
-              backgroundColor: semanticColors.purple[100],
+              backgroundColor: semanticColors.teal[100],
               textColor: semanticColors.teal[800],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20
             },
             active: {
-              backgroundColor: semanticColors.purple[100],
+              backgroundColor: semanticColors.teal[200],
               textColor: semanticColors.teal[800],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20
             },
             disabled: {
-              textColor: semanticColors.grey[800],
-              backgroundColor: semanticColors.grey[400],
-              borderColor: ""
+              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.transparentWhite[300],
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayBlack10
             }
           },
           cancel: {
             // variant
             default: {
-              backgroundColor: semanticColors.red[400],
-              textColor: semanticColors.teal[800],
-              borderColor: ""
+              backgroundColor: semanticColors.red[600],
+              textColor: colors.white,
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.none
             },
             hover: {
-              backgroundColor: semanticColors.red[100],
-              textColor: semanticColors.teal[800],
-              borderColor: ""
+              backgroundColor: semanticColors.red[700],
+              textColor: colors.white,
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.none
             },
             active: {
-              backgroundColor: semanticColors.red[200],
-              textColor: semanticColors.teal[800],
-              borderColor: ""
+              backgroundColor: semanticColors.red[800],
+              textColor: colors.white,
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.none
             },
             disabled: {
-              backgroundColor: semanticColors.grey[300],
-              textColor: semanticColors.grey[800],
-              borderColor: ""
+              backgroundColor: semanticColors.transparentRed[200],
+              textColor: semanticColors.transparentWhite[400],
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.none
             }
           }
         },
@@ -601,22 +685,26 @@ const theme = (() => {
             default: {
               backgroundColor: semanticColors.teal[800],
               textColor: semanticColors.purple[50],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10
             },
             hover: {
-              backgroundColor: semanticColors.teal[600],
+              backgroundColor: semanticColors.transparentTeal[400],
               textColor: semanticColors.purple[50],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20
             },
             active: {
-              backgroundColor: semanticColors.teal[700],
+              backgroundColor: semanticColors.transparentTeal[600],
               textColor: semanticColors.purple[50],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
-              borderColor: ""
+              textColor: semanticColors.grey[800],
+              backgroundColor: semanticColors.transparentTeal[200],
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
             }
           },
           cancel: {
@@ -624,22 +712,26 @@ const theme = (() => {
             default: {
               backgroundColor: semanticColors.red[800],
               textColor: semanticColors.red[400],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayRed8
             },
             hover: {
               backgroundColor: semanticColors.red[700],
               textColor: semanticColors.red[300],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayRed8
             },
             active: {
               backgroundColor: semanticColors.red[600],
               textColor: semanticColors.red[200],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayRed8
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
-              borderColor: ""
+              textColor: semanticColors.transparentWhite[200],
+              backgroundColor: semanticColors.transparentRed[100],
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.none
             }
           }
         },
@@ -649,46 +741,54 @@ const theme = (() => {
             // variant: this is the default variant
             default: {
               backgroundColor: "transparent",
-              textColor: semanticColors.purple[50],
-              borderColor: semanticColors.teal[500]
+              textColor: semanticColors.teal[50],
+              borderColor: semanticColors.teal[600],
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10
             },
             hover: {
-              backgroundColor: semanticColors.teal[600],
-              textColor: semanticColors.purple[50],
-              borderColor: semanticColors.teal[400]
+              backgroundColor: semanticColors.transparentTeal[400],
+              textColor: semanticColors.teal[50],
+              borderColor: semanticColors.teal[500],
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10
             },
             active: {
-              backgroundColor: semanticColors.teal[700],
-              textColor: semanticColors.purple[50],
-              borderColor: semanticColors.teal[300]
+              backgroundColor: semanticColors.transparentTeal[600],
+              textColor: semanticColors.teal[50],
+              borderColor: semanticColors.teal[400],
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
-              borderColor: semanticColors.grey[800]
+              textColor: semanticColors.grey[800],
+              backgroundColor: semanticColors.transparentTeal[100],
+              borderColor: semanticColors.grey[900],
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
             }
           },
           cancel: {
             // variant
             default: {
-              backgroundColor: semanticColors.teal[200],
-              textColor: semanticColors.red[400],
-              borderColor: semanticColors.teal[500]
+              backgroundColor: "transparent",
+              textColor: semanticColors.red[500],
+              borderColor: semanticColors.transparentTeal[500],
+              iconBackgroundColor: semanticColors.buttonIcon.none
             },
             hover: {
-              backgroundColor: semanticColors.red[700],
-              textColor: semanticColors.red[700],
-              borderColor: semanticColors.teal[400]
+              backgroundColor: semanticColors.transparentTeal[200],
+              textColor: semanticColors.red[500],
+              borderColor: semanticColors.transparentTeal[400],
+              iconBackgroundColor: semanticColors.buttonIcon.none
             },
             active: {
-              backgroundColor: semanticColors.red[600],
-              textColor: semanticColors.red[200],
-              borderColor: semanticColors.teal[300]
+              backgroundColor: semanticColors.transparentTeal[300],
+              textColor: semanticColors.red[500],
+              borderColor: semanticColors.transparentTeal[300],
+              iconBackgroundColor: semanticColors.buttonIcon.none
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
-              borderColor: semanticColors.grey[800]
+              backgroundColor: "transparent",
+              textColor: semanticColors.transparentRed[500],
+              borderColor: semanticColors.transparentTeal[300],
+              iconBackgroundColor: semanticColors.buttonIcon.none
             }
           }
         },
@@ -699,45 +799,53 @@ const theme = (() => {
             default: {
               backgroundColor: "transparent",
               textColor: semanticColors.purple[50],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10
             },
             hover: {
-              backgroundColor: semanticColors.teal[600],
+              backgroundColor: semanticColors.transparentTeal[400],
               textColor: semanticColors.purple[50],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10
             },
             active: {
-              backgroundColor: semanticColors.teal[700],
+              backgroundColor: semanticColors.transparentTeal[600],
               textColor: semanticColors.purple[50],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
-              borderColor: ""
+              textColor: semanticColors.grey[800],
+              backgroundColor: semanticColors.transparentTeal[100],
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.none
             }
           },
           cancel: {
             // variant
             default: {
-              backgroundColor: semanticColors.teal[200],
-              textColor: semanticColors.red[400],
-              borderColor: ""
+              backgroundColor: "transparent",
+              textColor: semanticColors.red[500],
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.none
             },
             hover: {
-              backgroundColor: semanticColors.red[700],
-              textColor: semanticColors.red[300],
-              borderColor: ""
+              backgroundColor: semanticColors.transparentTeal[200],
+              textColor: semanticColors.red[500],
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.none
             },
             active: {
-              backgroundColor: semanticColors.red[600],
-              textColor: semanticColors.red[200],
-              borderColor: ""
+              backgroundColor: semanticColors.transparentTeal[300],
+              textColor: semanticColors.red[500],
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.none
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
-              borderColor: ""
+              backgroundColor: "transparent",
+              textColor: semanticColors.transparentRed[500],
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.none
             }
           }
         },
@@ -746,22 +854,26 @@ const theme = (() => {
             default: {
               backgroundColor: colors.white,
               textColor: semanticColors.teal[800],
-              borderColor: semanticColors.teal[100]
+              borderColor: semanticColors.teal[100],
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
             },
             hover: {
               backgroundColor: semanticColors.teal[100],
               textColor: semanticColors.teal[800],
-              borderColor: semanticColors.teal[100]
+              borderColor: semanticColors.teal[100],
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20
             },
             active: {
               backgroundColor: semanticColors.teal[100],
               textColor: semanticColors.teal[800],
-              borderColor: semanticColors.teal[100]
+              borderColor: semanticColors.teal[100],
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20
             },
             disabled: {
               textColor: semanticColors.grey[600],
               backgroundColor: semanticColors.grey[300],
-              borderColor: ""
+              borderColor: "",
+              iconBackgroundColor: semanticColors.buttonIcon.none
             }
           }
         }