@eturnity/eturnity_reusable_components 9.22.2 → 9.25.1

package/src/assets/theme.js

@@ -77,6 +77,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',
@@ -215,6 +220,29 @@ const theme = (() => {
       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 {
@@ -261,21 +289,25 @@ const theme = (() => {
               backgroundColor: semanticColors.purple[500],
               textColor: colors.white,
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10,
             },
             hover: {
-              backgroundColor: semanticColors.purple[700],
+              backgroundColor: semanticColors.purple[600],
               textColor: colors.white,
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20,
             },
             active: {
-              backgroundColor: semanticColors.purple[600],
+              backgroundColor: semanticColors.purple[700],
               textColor: colors.white,
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20,
             },
             disabled: {
               textColor: colors.white,
               backgroundColor: semanticColors.grey[500],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20,
             },
           },
           cancel: {
@@ -284,21 +316,25 @@ const theme = (() => {
               backgroundColor: semanticColors.red[600],
               textColor: colors.white,
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10,
             },
             hover: {
-              backgroundColor: semanticColors.red[800],
+              backgroundColor: semanticColors.red[700],
               textColor: colors.white,
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20,
             },
             active: {
-              backgroundColor: semanticColors.red[700],
+              backgroundColor: semanticColors.red[800],
               textColor: colors.white,
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20,
             },
             disabled: {
               textColor: colors.white,
-              backgroundColor: semanticColors.grey[500],
+              backgroundColor: semanticColors.transparentRed[300],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.none,
             },
           },
         },
@@ -310,21 +346,25 @@ const theme = (() => {
               backgroundColor: semanticColors.purple[50],
               textColor: semanticColors.purple[500],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayPurple8,
             },
             hover: {
               backgroundColor: semanticColors.purple[100],
-              textColor: semanticColors.purple[700],
+              textColor: semanticColors.purple[500],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayPurple8,
             },
             active: {
-              backgroundColor: semanticColors.purple[50],
-              textColor: semanticColors.purple[600],
+              backgroundColor: semanticColors.purple[200],
+              textColor: semanticColors.purple[500],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayPurple8,
             },
             disabled: {
               textColor: semanticColors.grey[600],
               backgroundColor: semanticColors.grey[300],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayPurple8,
             },
           },
           cancel: {
@@ -333,21 +373,25 @@ const theme = (() => {
               backgroundColor: semanticColors.red[50],
               textColor: semanticColors.red[600],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayRed8,
             },
             hover: {
               backgroundColor: semanticColors.red[100],
               textColor: semanticColors.red[700],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayRed8,
             },
             active: {
               backgroundColor: semanticColors.red[200],
               textColor: semanticColors.red[800],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayRed8,
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[300],
+              textColor: semanticColors.red[200],
+              backgroundColor: semanticColors.red[25],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.none,
             },
           },
         },
@@ -358,22 +402,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: {
@@ -381,22 +429,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,
             },
           },
         },
@@ -408,21 +460,25 @@ const theme = (() => {
               backgroundColor: colors.white,
               textColor: semanticColors.purple[500],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.none,
             },
             hover: {
-              backgroundColor: semanticColors.purple[200],
-              textColor: semanticColors.purple[700],
+              backgroundColor: semanticColors.purple[100],
+              textColor: semanticColors.purple[500],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20,
             },
             active: {
-              backgroundColor: semanticColors.purple[100],
-              textColor: semanticColors.purple[600],
+              backgroundColor: semanticColors.purple[200],
+              textColor: semanticColors.purple[500],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20,
             },
             disabled: {
               textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[300],
+              backgroundColor: colors.white,
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.none,
             },
           },
           cancel: {
@@ -431,21 +487,25 @@ const theme = (() => {
               backgroundColor: colors.white,
               textColor: semanticColors.red[600],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.none,
             },
             hover: {
               backgroundColor: semanticColors.red[100],
               textColor: semanticColors.red[700],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayRed8,
             },
             active: {
               backgroundColor: semanticColors.red[200],
               textColor: semanticColors.red[800],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayRed8,
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[300],
+              textColor: semanticColors.red[200],
+              backgroundColor: colors.white,
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.none,
             },
           },
           tertiary: {
@@ -453,21 +513,25 @@ const theme = (() => {
               backgroundColor: 'transparent',
               textColor: semanticColors.teal[800],
               borderColor: semanticColors.teal[100],
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
             },
             hover: {
               backgroundColor: semanticColors.grey[200],
               textColor: semanticColors.teal[800],
               borderColor: semanticColors.teal[100],
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20,
             },
             active: {
               backgroundColor: semanticColors.grey[400],
               textColor: semanticColors.teal[800],
               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,
             },
           },
         },
@@ -477,21 +541,25 @@ const theme = (() => {
               backgroundColor: colors.white,
               textColor: semanticColors.teal[800],
               borderColor: semanticColors.teal[100],
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
             },
             hover: {
               backgroundColor: semanticColors.teal[50],
               textColor: semanticColors.teal[800],
               borderColor: semanticColors.teal[100],
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20,
             },
             active: {
               backgroundColor: semanticColors.teal[100],
               textColor: semanticColors.teal[800],
               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,
             },
           },
         },
@@ -501,21 +569,25 @@ const theme = (() => {
               backgroundColor: semanticColors.yellow[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
             },
             hover: {
               backgroundColor: semanticColors.yellow[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
             },
             active: {
               backgroundColor: semanticColors.yellow[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
             },
             disabled: {
               backgroundColor: semanticColors.yellow[200],
               textColor: semanticColors.teal[400],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.none,
             },
           },
         },
@@ -525,21 +597,25 @@ const theme = (() => {
               backgroundColor: semanticColors.blue[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
             },
             hover: {
               backgroundColor: semanticColors.blue[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
             },
             active: {
               backgroundColor: semanticColors.blue[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
             },
             disabled: {
               backgroundColor: semanticColors.blue[200],
               textColor: semanticColors.teal[400],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.none,
             },
           },
         },
@@ -551,47 +627,55 @@ const theme = (() => {
           main: {
             // variant: this is the default variant
             default: {
-              backgroundColor: colors.white,
+              backgroundColor: semanticColors.teal[25],
               textColor: semanticColors.teal[800],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
             },
             hover: {
-              backgroundColor: semanticColors.purple[100],
+              backgroundColor: semanticColors.teal[100],
               textColor: semanticColors.teal[800],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20,
             },
             active: {
-              backgroundColor: semanticColors.purple[100],
+              backgroundColor: semanticColors.teal[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20,
             },
             disabled: {
-              textColor: semanticColors.grey[800],
-              backgroundColor: semanticColors.grey[400],
+              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.transparentWhite[300],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayBlack10,
             },
           },
           cancel: {
             // variant
             default: {
-              backgroundColor: semanticColors.red[400],
-              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.red[600],
+              textColor: colors.white,
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.none,
             },
             hover: {
-              backgroundColor: semanticColors.red[100],
-              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.red[700],
+              textColor: colors.white,
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.none,
             },
             active: {
-              backgroundColor: semanticColors.red[200],
-              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.red[800],
+              textColor: colors.white,
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.none,
             },
             disabled: {
-              backgroundColor: semanticColors.grey[300],
-              textColor: semanticColors.grey[800],
+              backgroundColor: semanticColors.transparentRed[200],
+              textColor: semanticColors.transparentWhite[400],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.none,
             },
           },
         },
@@ -603,21 +687,25 @@ const theme = (() => {
               backgroundColor: semanticColors.teal[800],
               textColor: semanticColors.purple[50],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10,
             },
             hover: {
-              backgroundColor: semanticColors.teal[600],
+              backgroundColor: semanticColors.transparentTeal[400],
               textColor: semanticColors.purple[50],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20,
             },
             active: {
-              backgroundColor: semanticColors.teal[700],
+              backgroundColor: semanticColors.transparentTeal[600],
               textColor: semanticColors.purple[50],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20,
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
+              textColor: semanticColors.grey[800],
+              backgroundColor: semanticColors.transparentTeal[200],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
             },
           },
           cancel: {
@@ -626,21 +714,25 @@ const theme = (() => {
               backgroundColor: semanticColors.red[800],
               textColor: semanticColors.red[400],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayRed8,
             },
             hover: {
               backgroundColor: semanticColors.red[700],
               textColor: semanticColors.red[300],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayRed8,
             },
             active: {
               backgroundColor: semanticColors.red[600],
               textColor: semanticColors.red[200],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayRed8,
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
+              textColor: semanticColors.transparentWhite[200],
+              backgroundColor: semanticColors.transparentRed[100],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.none,
             },
           },
         },
@@ -650,46 +742,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,
             },
           },
         },
@@ -701,44 +801,52 @@ const theme = (() => {
               backgroundColor: 'transparent',
               textColor: semanticColors.purple[50],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10,
             },
             hover: {
-              backgroundColor: semanticColors.teal[600],
+              backgroundColor: semanticColors.transparentTeal[400],
               textColor: semanticColors.purple[50],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10,
             },
             active: {
-              backgroundColor: semanticColors.teal[700],
+              backgroundColor: semanticColors.transparentTeal[600],
               textColor: semanticColors.purple[50],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10,
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
+              textColor: semanticColors.grey[800],
+              backgroundColor: semanticColors.transparentTeal[100],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.none,
             },
           },
           cancel: {
             // variant
             default: {
-              backgroundColor: semanticColors.teal[200],
-              textColor: semanticColors.red[400],
+              backgroundColor: 'transparent',
+              textColor: semanticColors.red[500],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.none,
             },
             hover: {
-              backgroundColor: semanticColors.red[700],
-              textColor: semanticColors.red[300],
+              backgroundColor: semanticColors.transparentTeal[200],
+              textColor: semanticColors.red[500],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.none,
             },
             active: {
-              backgroundColor: semanticColors.red[600],
-              textColor: semanticColors.red[200],
+              backgroundColor: semanticColors.transparentTeal[300],
+              textColor: semanticColors.red[500],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.none,
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
+              backgroundColor: 'transparent',
+              textColor: semanticColors.transparentRed[500],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.none,
             },
           },
         },
@@ -748,21 +856,25 @@ const theme = (() => {
               backgroundColor: colors.white,
               textColor: semanticColors.teal[800],
               borderColor: semanticColors.teal[100],
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10,
             },
             hover: {
               backgroundColor: semanticColors.teal[100],
               textColor: semanticColors.teal[800],
               borderColor: semanticColors.teal[100],
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20,
             },
             active: {
               backgroundColor: semanticColors.teal[100],
               textColor: semanticColors.teal[800],
               borderColor: semanticColors.teal[100],
+              iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20,
             },
             disabled: {
               textColor: semanticColors.grey[600],
               backgroundColor: semanticColors.grey[300],
               borderColor: '',
+              iconBackgroundColor: semanticColors.buttonIcon.none,
             },
           },
         },