Merge branch 'develop' into bump-assets-controller-version

MetaMask · Jun 4, 2024 · 9fb556f · 9fb556f
2 parents 87dd240 + be397d3
commit 9fb556f
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 74 deletions.
diff --git a/.storybook/3.COLORS.stories.mdx b/.storybook/3.COLORS.stories.mdx
@@ -78,10 +78,11 @@ var(--color-overlay-inverse) [DEPRECATED]
 
 /** User Actions */
 var(--color-primary-default)
+var(--color-primary-default-hover)
+var(--color-primary-default-pressed)
 var(--color-primary-alternative)
 var(--color-primary-muted)
 var(--color-primary-inverse)
-var(--color-primary-disabled) [DEPRECATED]
 
 var(--color-secondary-default) [DEPRECATED]
 var(--color-secondary-alternative) [DEPRECATED]
@@ -92,10 +93,11 @@ var(--color-secondary-disabled) [DEPRECATED]
 /** States */
 /** Error */
 var(--color-error-default)
+var(--color-error-default-hover)
+var(--color-error-default-pressed)
 var(--color-error-alternative)
 var(--color-error-muted)
 var(--color-error-inverse)
-var(--color-error-disabled) [DEPRECATED]
 
 /** Warning */
 var(--color-warning-default)
@@ -129,8 +131,8 @@ Another level of abstraction is component tier colors that you can define at the
   --color-text-primary: var(--color-primary-inverse);
   --color-border-primary: var(--color-primary-default);
 
-  --color-background-primary-hover: var(--color-primary-alternative);
-  --color-border-primary-hover: var(--color-primary-alternative);
+  --color-background-primary-hover: var(--color-primary-default-hover);
+  --color-border-primary-hover: var(--color-primary-default-hover);
 
   .btn-primary {
     background-color: var(--color-background-primary);

diff --git a/test/e2e/default-fixture.js b/test/e2e/default-fixture.js
@@ -70,7 +70,22 @@ function defaultFixture(inputChainId = CHAIN_IDS.LOCALHOST) {
         },
       },
       NetworkOrderController: {
-        orderedNetworkList: [],
+        orderedNetworkList: [
+          {
+            networkId: '0x1',
+            networkRpcUrl:
+              'https://mainnet.infura.io/v3/00000000000000000000000000000000',
+          },
+          {
+            networkId: '0xe708',
+            networkRpcUrl:
+              'https://linea-mainnet.infura.io/v3/00000000000000000000000000000000',
+          },
+          {
+            networkId: '0x539',
+            networkRpcUrl: 'http://localhost:8545',
+          },
+        ],
       },
       AccountOrderController: {
         pinnedAccountList: [],

diff --git a/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-background-state.json b/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-background-state.json
@@ -19,7 +19,9 @@
       "web3ShimUsageOrigins": "object"
     },
     "AnnouncementController": { "announcements": "object" },
-    "NetworkOrderController": { "orderedNetworkList": {} },
+    "NetworkOrderController": {
+      "orderedNetworkList": { "0": "object", "1": "object", "2": "object" }
+    },
     "AccountOrderController": {
       "pinnedAccountList": {},
       "hiddenAccountList": {}

diff --git a/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-ui-state.json b/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-ui-state.json
@@ -19,7 +19,9 @@
       "web3ShimUsageOrigins": "object"
     },
     "AnnouncementController": { "announcements": "object" },
-    "NetworkOrderController": { "orderedNetworkList": {} },
+    "NetworkOrderController": {
+      "orderedNetworkList": { "0": "object", "1": "object", "2": "object" }
+    },
     "AccountOrderController": {
       "pinnedAccountList": {},
       "hiddenAccountList": {}

diff --git a/ui/components/ui/button/buttons.scss b/ui/components/ui/button/buttons.scss
@@ -20,7 +20,7 @@
   &--disabled,
   &[disabled] {
     cursor: auto;
-    opacity: 0.5;
+    opacity: var(--opacity-disabled);
     pointer-events: none;
   }
 
@@ -33,23 +33,18 @@
 
 .btn-secondary {
   color: var(--color-primary-default);
-  border: 1px solid var(--color-primary-muted);
+  border: 1px solid var(--color-primary-default);
   background-color: var(--color-background-default);
 
   &:hover {
     border-color: var(--color-primary-default);
   }
 
   &:active {
-    background: var(--color-primary-muted);
+    color: var(--color-primary-inverse);
+    background: var(--color-primary-default);
     border-color: var(--color-primary-default);
   }
-
-  &--disabled,
-  &[disabled] {
-    opacity: 1;
-    color: var(--color-primary-muted);
-  }
 }
 
 .btn-warning {
@@ -86,12 +81,6 @@
     background: var(--color-error-muted);
     border-color: var(--color-error-default);
   }
-
-  &--disabled,
-  &[disabled] {
-    opacity: 1;
-    color: var(--color-error-disabled);
-  }
 }
 
 .btn-danger-primary {
@@ -109,13 +98,6 @@
     background: var(--color-error-alternative0);
     border-color: var(--color-error-alternative);
   }
-
-  &--disabled,
-  &[disabled] {
-    opacity: 1;
-    border-color: var(--color-error-disabled);
-    background-color: var(--color-error-disabled);
-  }
 }
 
 .btn-default {
@@ -134,8 +116,7 @@
 
   &--disabled,
   &[disabled] {
-    opacity: 1;
-    color: var(--color-text-muted);
+    opacity: var(--opacity-disabled);
   }
 }
 
@@ -153,12 +134,6 @@
     background: var(--color-primary-alternative);
     border-color: var(--color-primary-alternative);
   }
-
-  &--disabled,
-  &[disabled] {
-    border-color: var(--color-primary-disabled);
-    background-color: var(--color-primary-disabled);
-  }
 }
 
 .btn-link {
@@ -179,9 +154,7 @@
   &--disabled,
   &[disabled] {
     cursor: auto;
-    opacity: 1;
     pointer-events: none;
-    color: var(--color-primary-disabled);
   }
 }
 
@@ -207,7 +180,7 @@
 button[disabled],
 input[type="submit"][disabled] {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--opacity-disabled);
 }
 
 .btn--rounded {
@@ -226,12 +199,6 @@ input[type="submit"][disabled] {
       box-shadow: var(--shadow-size-sm) var(--color-primary-shadow);
     }
 
-    &--disabled,
-    &[disabled] {
-      border-color: var(--color-primary-disabled);
-      color: var(--color-primary-disabled);
-    }
-
     &:active {
       border-color: var(--color-primary-alternative);
     }
@@ -244,12 +211,6 @@ input[type="submit"][disabled] {
       box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
     }
 
-    &--disabled,
-    &[disabled] {
-      border-color: var(--color-border-muted);
-      color: var(--color-text-muted);
-    }
-
     &:active {
       border-color: var(--color-text-alternative);
     }
@@ -262,12 +223,6 @@ input[type="submit"][disabled] {
       box-shadow: var(--shadow-size-sm) var(--color-error-shadow);
     }
 
-    &--disabled,
-    &[disabled] {
-      border-color: var(--color-error-disabled);
-      color: var(--color-error-disabled);
-    }
-
     &:active {
       border-color: var(--color-error-alternative);
     }
@@ -298,11 +253,6 @@ input[type="submit"][disabled] {
       box-shadow: var(--shadow-size-sm) var(--color-primary-shadow);
     }
 
-    &--disabled,
-    &[disabled] {
-      background-color: var(--color-primary-disabled);
-    }
-
     &:active {
       background-color: var(--color-primary-alternative);
     }
@@ -315,11 +265,6 @@ input[type="submit"][disabled] {
       box-shadow: var(--shadow-size-sm) var(--color-error-shadow);
     }
 
-    &--disabled,
-    &[disabled] {
-      background-color: var(--color-error-disabled);
-    }
-
     &:active {
       background-color: var(--color-error-alternative);
     }
@@ -346,8 +291,6 @@ input[type="submit"][disabled] {
   &--disabled,
   &[disabled] {
     cursor: auto;
-    opacity: 1;
     pointer-events: none;
-    color: var(--color-primary-disabled);
   }
 }
diff --git a/ui/css/design-system/_colors.scss b/ui/css/design-system/_colors.scss
@@ -16,12 +16,10 @@ $color-map: (
   'primary-alternative': --color-primary-alternative,
   'primary-muted': --color-primary-muted,
   'primary-inverse': --color-primary-inverse,
-  'primary-disabled': --color-primary-disabled,
   'error-default': --color-error-default,
   'error-alternative': --color-error-alternative,
   'error-muted': --color-error-muted,
   'error-inverse': --color-error-inverse,
-  'error-disabled': --color-error-disabled,
   'warning-default': --color-warning-default,
   'warning-alternative': --color-warning-alternative,
   'warning-muted': --color-warning-muted,

diff --git a/ui/helpers/constants/design-system.ts b/ui/helpers/constants/design-system.ts
@@ -22,12 +22,10 @@ export enum Color {
   primaryAlternative = 'primary-alternative',
   primaryMuted = 'primary-muted',
   primaryInverse = 'primary-inverse',
-  primaryDisabled = 'primary-disabled',
   errorDefault = 'error-default',
   errorAlternative = 'error-alternative',
   errorMuted = 'error-muted',
   errorInverse = 'error-inverse',
-  errorDisabled = 'error-disabled',
   warningDefault = 'warning-default',
   warningAlternative = 'warning-alternative',
   warningMuted = 'warning-muted',