💄 Adjust outlined buttons background color (#1289)

Author: arkadiy93

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/amplify-component-lib",
-  "version": "13.1.2",
+  "version": "13.1.3",
   "description": "Frontend Typescript components for the Amplify team",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/molecules/Button/tokens/danger.ts

@@ -19,7 +19,7 @@ export const DANGER_TOKENS: ButtonTokens = {
     disabled: DISABLED_TOKENS.filled,
   },
   outlined: {
-    backgroundColor: colors.ui.background__default.rgba,
+    backgroundColor: 'transparent',
     color: colors.interactive.danger__resting.rgba,
     borderColor: colors.interactive.danger__resting.rgba,
     outlineColor: colors.interactive.danger__resting.rgba,
@@ -30,7 +30,7 @@ export const DANGER_TOKENS: ButtonTokens = {
       borderColor: colors.interactive.danger__hover.rgba,
     },
     pressed: {
-      backgroundColor: colors.ui.background__default.rgba,
+      backgroundColor: 'transparent',
       color: colors.interactive.danger__hover.rgba,
       borderColor: colors.interactive.danger__hover.rgba,
     },

src/molecules/Button/tokens/disabled.ts

@@ -6,7 +6,7 @@ export const DISABLED_TOKENS = {
     color: colors.interactive.disabled__text.rgba,
   },
   outlined: {
-    backgroundColor: colors.ui.background__default.rgba,
+    backgroundColor: 'transparent',
     color: colors.interactive.disabled__text.rgba,
     borderColor: colors.interactive.disabled__text.rgba,
   },

src/molecules/Button/tokens/primary.ts

@@ -20,7 +20,7 @@ export const PRIMARY_TOKENS: ButtonTokens = {
     disabled: DISABLED_TOKENS.filled,
   },
   outlined: {
-    backgroundColor: colors.ui.background__default.rgba,
+    backgroundColor: 'transparent',
     color: colors.interactive.primary__resting.rgba,
     borderColor: colors.interactive.primary__resting.rgba,
     outlineColor: colors.interactive.primary__resting.rgba,
@@ -31,7 +31,7 @@ export const PRIMARY_TOKENS: ButtonTokens = {
       borderColor: colors.interactive.primary__hover.rgba,
     },
     pressed: {
-      backgroundColor: colors.ui.background__default.rgba,
+      backgroundColor: 'transparent',
       color: colors.interactive.primary__pressed.rgba,
       borderColor: colors.interactive.primary__pressed.rgba,
     },