diff --git a/packages/@adobe/spectrum-css-temp/components/button/skin.css b/packages/@adobe/spectrum-css-temp/components/button/skin.css
index 489d7bf84e3..3b3478f465b 100644
--- a/packages/@adobe/spectrum-css-temp/components/button/skin.css
+++ b/packages/@adobe/spectrum-css-temp/components/button/skin.css
@@ -16,18 +16,22 @@ governing permissions and limitations under the License.
   /* Interactions with overbackground button should match background. Not a DNA token, overridden in WHCM. */
   --spectrum-button-over-background-color: inherit;
 
+  --spectrum-actionbutton-background-color-selected: var(--spectrum-alias-toggle-color-selected);
+  --spectrum-actionbutton-background-color-selected-hover: var(--spectrum-alias-toggle-color-selected-hover);
+  --spectrum-actionbutton-background-color-selected-key-focus: var(--spectrum-alias-toggle-color-selected-key-focus);
+  --spectrum-actionbutton-background-color-selected-down: var(--spectrum-alias-toggle-color-selected-down);
   --spectrum-actionbutton-border-color-selected: var(--spectrum-actionbutton-background-color-selected);
   --spectrum-actionbutton-border-color-selected-hover: var(--spectrum-actionbutton-background-color-selected-hover);
   --spectrum-actionbutton-border-color-selected-key-focus: var(--spectrum-actionbutton-background-color-selected-key-focus);
   --spectrum-actionbutton-border-color-selected-down: var(--spectrum-actionbutton-background-color-selected-down);
-  --spectrum-actionbutton-text-color-selected: white;
-  --spectrum-actionbutton-text-color-selected-hover: white;
-  --spectrum-actionbutton-text-color-selected-key-focus: white;
-  --spectrum-actionbutton-text-color-selected-down: white;
-  --spectrum-actionbutton-icon-color-selected: white;
-  --spectrum-actionbutton-icon-color-selected-hover: white;
-  --spectrum-actionbutton-icon-color-selected-key-focus: white;
-  --spectrum-actionbutton-icon-color-selected-down: white;
+  --spectrum-actionbutton-text-color-selected: var(--spectrum-gray-50);
+  --spectrum-actionbutton-text-color-selected-hover: var(--spectrum-gray-50);
+  --spectrum-actionbutton-text-color-selected-key-focus: var(--spectrum-gray-50);
+  --spectrum-actionbutton-text-color-selected-down: var(--spectrum-gray-50);
+  --spectrum-actionbutton-icon-color-selected: var(--spectrum-gray-50);
+  --spectrum-actionbutton-icon-color-selected-hover: var(--spectrum-gray-50);
+  --spectrum-actionbutton-icon-color-selected-key-focus: var(--spectrum-gray-50);
+  --spectrum-actionbutton-icon-color-selected-down: var(--spectrum-gray-50);
 
   --spectrum-actionbutton-emphasized-background-color-selected: var(--spectrum-accent-background-color-default);
   --spectrum-actionbutton-emphasized-background-color-selected-hover: var(--spectrum-accent-background-color-hover);
@@ -112,31 +116,27 @@ governing permissions and limitations under the License.
     /* high contrast overrides all colors */
     /* xvar is passed through. without it, some postcss plugin breaks variable fallback... */
     background-color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-button-color));
-    border-color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-button-color));
+    border-color: transparent;
     color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-button-text-color));
 
     &:hover {
       background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-hover));
-      border-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-hover));
       color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-button-text-color-hover));
     }
 
     &:focus-ring {
       background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-key-focus));
-      border-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-key-focus));
       color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-button-text-color-key-focus));
     }
 
     &.is-active {
       background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-down));
-      border-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-down));
       color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-button-text-color-down));
     }
 
     &:disabled,
     &.is-disabled {
       background-color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-button-color-disabled));
-      border-color: xvar(--spectrum-high-contrast-gray-text, var(--spectrum-button-color-disabled));
       color: xvar(--spectrum-high-contrast-gray-text, var(--spectrum-button-text-color-disabled));
     }
   }
@@ -194,34 +194,50 @@ governing permissions and limitations under the License.
         --spectrum-button-text-color: black;
         --spectrum-button-text-color-disabled: rgba(255, 255, 255, 0.55);
       }
+
+      &[data-style=outline] {
+        --spectrum-button-color: rgba(255, 255, 255, 0.9);
+        --spectrum-button-color-hover: white;
+        --spectrum-button-color-down: white;
+        --spectrum-button-color-key-focus: white;
+        --spectrum-button-color-disabled: rgba(255, 255, 255, 0.25);
+        --spectrum-button-text-color: white;
+        --spectrum-button-text-color-hover: white;
+        --spectrum-button-text-color-down: white;
+        --spectrum-button-text-color-key-focus: white;
+        --spectrum-button-text-color-disabled: rgba(255, 255, 255, 0.55);
+        --spectrum-button-background-color-hover: rgba(255, 255, 255, 0.1);
+        --spectrum-button-background-color-down: rgba(255, 255, 255, 0.15);
+        --spectrum-button-background-color-key-focus: rgba(255, 255, 255, 0.1);
+      }
     }
 
     &[data-variant=secondary] {
       &[data-style=fill] {
-        --spectrum-button-color: rgba(255, 255, 255, 0.1);
-        --spectrum-button-color-hover: rgba(255, 255, 255, 0.25);
-        --spectrum-button-color-down: rgba(255, 255, 255, 0.4);
-        --spectrum-button-color-key-focus: rgba(255, 255, 255, 0.25);
+        --spectrum-button-color: rgba(255, 255, 255, 0.07);
+        --spectrum-button-color-hover: rgba(255, 255, 255, 0.1);
+        --spectrum-button-color-down: rgba(255, 255, 255, 0.15);
+        --spectrum-button-color-key-focus: rgba(255, 255, 255, 0.1);
         --spectrum-button-color-disabled: rgba(255, 255, 255, 0.1);
         --spectrum-button-text-color: white;
         --spectrum-button-text-color-disabled: rgba(255, 255, 255, 0.55);
       }
-    }
 
-    &[data-style=outline] {
-      --spectrum-button-color: rgba(255, 255, 255, 0.25);
-      --spectrum-button-color-hover: rgba(255, 255, 255, 0.4);
-      --spectrum-button-color-down: rgba(255, 255, 255, 0.55);
-      --spectrum-button-color-key-focus: rgba(255, 255, 255, 0.4);
-      --spectrum-button-color-disabled: rgba(255, 255, 255, 0.25);
-      --spectrum-button-text-color: white;
-      --spectrum-button-text-color-hover: white;
-      --spectrum-button-text-color-down: white;
-      --spectrum-button-text-color-key-focus: white;
-      --spectrum-button-text-color-disabled: rgba(255, 255, 255, 0.55);
-      --spectrum-button-background-color-hover: rgba(255, 255, 255, 0.25);
-      --spectrum-button-background-color-down: rgba(255, 255, 255, 0.4);
-      --spectrum-button-background-color-key-focus: rgba(255, 255, 255, 0.25);
+      &[data-style=outline] {
+        --spectrum-button-color: rgba(255, 255, 255, 0.25);
+        --spectrum-button-color-hover: rgba(255, 255, 255, 0.4);
+        --spectrum-button-color-down: rgba(255, 255, 255, 0.55);
+        --spectrum-button-color-key-focus: rgba(255, 255, 255, 0.4);
+        --spectrum-button-color-disabled: rgba(255, 255, 255, 0.25);
+        --spectrum-button-text-color: white;
+        --spectrum-button-text-color-hover: white;
+        --spectrum-button-text-color-down: white;
+        --spectrum-button-text-color-key-focus: white;
+        --spectrum-button-text-color-disabled: rgba(255, 255, 255, 0.55);
+        --spectrum-button-background-color-hover: rgba(255, 255, 255, 0.1);
+        --spectrum-button-background-color-down: rgba(255, 255, 255, 0.15);
+        --spectrum-button-background-color-key-focus: rgba(255, 255, 255, 0.1);
+      }
     }
   }
 
@@ -252,18 +268,18 @@ governing permissions and limitations under the License.
         --spectrum-button-text-color-down: black;
         --spectrum-button-text-color-key-focus: black;
         --spectrum-button-text-color-disabled: rgba(0, 0, 0, 0.55);
-        --spectrum-button-background-color-hover: rgba(0, 0, 0, 0.25);
-        --spectrum-button-background-color-down: rgba(0, 0, 0, 0.4);
-        --spectrum-button-background-color-key-focus: rgba(0, 0, 0, 0.25);
+        --spectrum-button-background-color-hover: rgba(0, 0, 0, 0.1);
+        --spectrum-button-background-color-down: rgba(0, 0, 0, 0.15);
+        --spectrum-button-background-color-key-focus: rgba(0, 0, 0, 0.1);
       }
     }
 
     &[data-variant=secondary] {
       &[data-style=fill] {
-        --spectrum-button-color: rgba(0, 0, 0, 0.1);
-        --spectrum-button-color-hover: rgba(0, 0, 0, 0.25);
-        --spectrum-button-color-down: rgba(0, 0, 0, 0.4);
-        --spectrum-button-color-key-focus: rgba(0, 0, 0, 0.25);
+        --spectrum-button-color: rgba(0, 0, 0, 0.07);
+        --spectrum-button-color-hover: rgba(0, 0, 0, 0.1);
+        --spectrum-button-color-down: rgba(0, 0, 0, 0.15);
+        --spectrum-button-color-key-focus: rgba(0, 0, 0, 0.1);
         --spectrum-button-color-disabled: rgba(0, 0, 0, 0.1);
         --spectrum-button-text-color: black;
         --spectrum-button-text-color-disabled: rgba(0, 0, 0, 0.55);
@@ -280,9 +296,9 @@ governing permissions and limitations under the License.
         --spectrum-button-text-color-down: black;
         --spectrum-button-text-color-key-focus: black;
         --spectrum-button-text-color-disabled: rgba(0, 0, 0, 0.55);
-        --spectrum-button-background-color-hover: rgba(0, 0, 0, 0.25);
-        --spectrum-button-background-color-down: rgba(0, 0, 0, 0.4);
-        --spectrum-button-background-color-key-focus: rgba(0, 0, 0, 0.25);
+        --spectrum-button-background-color-hover: rgba(0, 0, 0, 0.1);
+        --spectrum-button-background-color-down: rgba(0, 0, 0, 0.15);
+        --spectrum-button-background-color-key-focus: rgba(0, 0, 0, 0.1);
       }
     }
   }
@@ -593,9 +609,9 @@ governing permissions and limitations under the License.
 .spectrum-ActionButton--staticWhite {
   mix-blend-mode: screen;
   --spectrum-actionbutton-static-background-color: var(--spectrum-actionbutton-static-white-background-color);
-  --spectrum-actionbutton-static-background-color-hover: rgba(255, 255, 255, 0.25);
-  --spectrum-actionbutton-static-background-color-focus: rgba(255, 255, 255, 0.25);
-  --spectrum-actionbutton-static-background-color-active: rgba(255, 255, 255, 0.4);
+  --spectrum-actionbutton-static-background-color-hover: rgba(255, 255, 255, 0.1);
+  --spectrum-actionbutton-static-background-color-focus: rgba(255, 255, 255, 0.1);
+  --spectrum-actionbutton-static-background-color-active: rgba(255, 255, 255, 0.15);
   --spectrum-actionbutton-static-background-color-disabled: var(--spectrum-actionbutton-static-white-background-color-disabled);
   --spectrum-actionbutton-static-background-color-selected: rgba(255, 255, 255, 0.9);
   --spectrum-actionbutton-static-background-color-selected-hover: white;
@@ -622,9 +638,9 @@ governing permissions and limitations under the License.
 .spectrum-ActionButton--staticBlack {
   mix-blend-mode: multiply;
   --spectrum-actionbutton-static-background-color: var(--spectrum-actionbutton-static-black-background-color);
-  --spectrum-actionbutton-static-background-color-hover: rgba(0, 0, 0, 0.25);
-  --spectrum-actionbutton-static-background-color-focus: rgba(0, 0, 0, 0.25);
-  --spectrum-actionbutton-static-background-color-active: rgba(0, 0, 0, 0.4);
+  --spectrum-actionbutton-static-background-color-hover: rgba(0, 0, 0, 0.1);
+  --spectrum-actionbutton-static-background-color-focus: rgba(0, 0, 0, 0.1);
+  --spectrum-actionbutton-static-background-color-active: rgba(0, 0, 0, 0.15);
   --spectrum-actionbutton-static-background-color-selected: rgba(0, 0, 0, 0.9);
   --spectrum-actionbutton-static-background-color-disabled: var(--spectrum-actionbutton-static-black-background-color-disabled);
   --spectrum-actionbutton-static-background-color-selected-hover: black;
diff --git a/packages/@adobe/spectrum-css-temp/vars/express.css b/packages/@adobe/spectrum-css-temp/vars/express.css
index 232fe7ca4c6..9140da3a7ef 100644
--- a/packages/@adobe/spectrum-css-temp/vars/express.css
+++ b/packages/@adobe/spectrum-css-temp/vars/express.css
@@ -46,6 +46,7 @@
   --spectrum-alias-toggle-color-selected: var(--spectrum-gray-800);
   --spectrum-alias-toggle-color-selected-hover: var(--spectrum-gray-900);
   --spectrum-alias-toggle-color-selected-key-focus: var(--spectrum-gray-900);
+  --spectrum-alias-toggle-color-selected-down: var(--spectrum-gray-900);
 
   --spectrum-actionbutton-icon-color: var(--spectrum-global-color-gray-800);
   --spectrum-actionbutton-background-color: var(--spectrum-global-color-gray-200);
@@ -55,11 +56,6 @@
   --spectrum-actionbutton-background-color-disabled: var(--spectrum-global-color-gray-200);
   --spectrum-actionbutton-border-color-disabled: var(--spectrum-global-color-gray-200);
 
-  --spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-default);
-  --spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-hover);
-  --spectrum-actionbutton-background-color-selected-key-focus: var(--spectrum-neutral-background-color-key-focus);
-  --spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-down);
-
   --spectrum-actionbutton-border-color: var(--spectrum-actionbutton-background-color);
   --spectrum-actionbutton-border-color-hover: var(--spectrum-actionbutton-background-color-hover);
   --spectrum-actionbutton-border-color-key-focus: var(--spectrum-actionbutton-background-color-key-focus);
@@ -78,8 +74,8 @@
   --spectrum-actionbutton-static-black-border-color-down: transparent;
   --spectrum-actionbutton-static-black-border-color-disabled: transparent;
   --spectrum-actionbutton-static-black-border-color-selected-disabled: transparent;
-  --spectrum-actionbutton-static-black-background-color: rgba(0, 0, 0, 0.1);
-  --spectrum-actionbutton-static-black-background-color-disabled: rgba(0, 0, 0, 0.1);
+  --spectrum-actionbutton-static-black-background-color: rgba(0, 0, 0, 0.07);
+  --spectrum-actionbutton-static-black-background-color-disabled: rgba(0, 0, 0, 0.07);
 
   --spectrum-actionbutton-static-white-border-color: transparent;
   --spectrum-actionbutton-static-white-border-color-hover: transparent;
@@ -87,8 +83,8 @@
   --spectrum-actionbutton-static-white-border-color-down: transparent;
   --spectrum-actionbutton-static-white-border-color-disabled: transparent;
   --spectrum-actionbutton-static-white-border-color-selected-disabled: transparent;
-  --spectrum-actionbutton-static-white-background-color: rgba(255, 255, 255, 0.1);
-  --spectrum-actionbutton-static-white-background-color-disabled: rgba(255, 255, 255, 0.1);
+  --spectrum-actionbutton-static-white-background-color: rgba(255, 255, 255, 0.07);
+  --spectrum-actionbutton-static-white-background-color-disabled: rgba(255, 255, 255, 0.07);
 
   --spectrum-fieldbutton-background-color: var(--spectrum-actionbutton-background-color);
   --spectrum-fieldbutton-background-color-hover: var(--spectrum-actionbutton-background-color-hover);
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-global.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-global.css
index a41eb38bc6a..4500c6debfc 100644
--- a/packages/@adobe/spectrum-css-temp/vars/spectrum-global.css
+++ b/packages/@adobe/spectrum-css-temp/vars/spectrum-global.css
@@ -619,11 +619,8 @@
   --spectrum-alias-toggle-color-selected: var(--spectrum-gray-700);
   --spectrum-alias-toggle-color-selected-hover: var(--spectrum-gray-800);
   --spectrum-alias-toggle-color-selected-key-focus: var(--spectrum-gray-800);
+  --spectrum-alias-toggle-color-selected-down: var(--spectrum-gray-900);
 
-  --spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-subdued-background-color-default);
-  --spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover);
-  --spectrum-actionbutton-background-color-selected-key-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
-  --spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-subdued-background-color-down);
   --spectrum-actionbutton-background-color-disabled: transparent;
   --spectrum-actionbutton-border-color-disabled: var(--spectrum-gray-300);
 
diff --git a/packages/@react-spectrum/actionbar/src/actionbar.css b/packages/@react-spectrum/actionbar/src/actionbar.css
index 73e2082e1a7..49560200b61 100644
--- a/packages/@react-spectrum/actionbar/src/actionbar.css
+++ b/packages/@react-spectrum/actionbar/src/actionbar.css
@@ -63,7 +63,7 @@
   }
 
   &.react-spectrum-ActionBar--emphasized .react-spectrum-ActionBar-bar {
-    background: var(--spectrum-informative-background-color-default);
+    background: var(--spectrum-global-color-static-blue-700);
     color: white;
     box-shadow: 0 2px 6px var(--spectrum-alias-dropshadow-color);
     border: none;
diff --git a/packages/@react-spectrum/actiongroup/chromatic/ActionGroup.chromatic.tsx b/packages/@react-spectrum/actiongroup/chromatic/ActionGroup.chromatic.tsx
index 10469088557..19b77f5b2cb 100644
--- a/packages/@react-spectrum/actiongroup/chromatic/ActionGroup.chromatic.tsx
+++ b/packages/@react-spectrum/actiongroup/chromatic/ActionGroup.chromatic.tsx
@@ -97,7 +97,7 @@ storiesOf('ActionGroup', module)
   .add(
     'staticColor=white',
     () => (
-      <View backgroundColor="static-seafoam-600" padding="size-1000">
+      <View backgroundColor="static-blue-700" padding="size-1000">
         {render({staticColor: 'white', defaultSelectedKeys: ['1']}, viewItems)}
       </View>
     )
@@ -105,7 +105,7 @@ storiesOf('ActionGroup', module)
   .add(
     'staticColor=white, isQuiet',
     () => (
-      <View backgroundColor="static-seafoam-600" padding="size-1000">
+      <View backgroundColor="static-blue-700" padding="size-1000">
         {render({staticColor: 'white', isQuiet: true, defaultSelectedKeys: ['1']}, viewItems)}
       </View>
     )
diff --git a/packages/@react-spectrum/actiongroup/docs/ActionGroup.mdx b/packages/@react-spectrum/actiongroup/docs/ActionGroup.mdx
index b3782af3995..a8fd94903d0 100644
--- a/packages/@react-spectrum/actiongroup/docs/ActionGroup.mdx
+++ b/packages/@react-spectrum/actiongroup/docs/ActionGroup.mdx
@@ -438,7 +438,7 @@ with the background.
 
 ```tsx example
 <Flex wrap gap="size-250">
-  <View backgroundColor="static-seafoam-700" padding="size-500">
+  <View backgroundColor="static-blue-700" padding="size-500">
     <ActionGroup staticColor="white">
       <Item key="edit">
         <Draw />
diff --git a/packages/@react-spectrum/actiongroup/stories/ActionGroup.stories.tsx b/packages/@react-spectrum/actiongroup/stories/ActionGroup.stories.tsx
index 5ffafc232a0..9b15fbcca76 100644
--- a/packages/@react-spectrum/actiongroup/stories/ActionGroup.stories.tsx
+++ b/packages/@react-spectrum/actiongroup/stories/ActionGroup.stories.tsx
@@ -163,7 +163,7 @@ storiesOf('ActionGroup', module)
   .add(
     'staticColor=white',
     () => (
-      <View backgroundColor="static-seafoam-600" padding="size-1000">
+      <View backgroundColor="static-blue-700" padding="size-1000">
         {render({staticColor: 'white', defaultSelectedKeys: ['1']}, viewItems)}
       </View>
     )
@@ -171,7 +171,7 @@ storiesOf('ActionGroup', module)
   .add(
     'staticColor=white, isQuiet',
     () => (
-      <View backgroundColor="static-seafoam-600" padding="size-1000">
+      <View backgroundColor="static-blue-700" padding="size-1000">
         {render({staticColor: 'white', isQuiet: true, defaultSelectedKeys: ['1']}, viewItems)}
       </View>
     )
diff --git a/packages/@react-spectrum/button/chromatic/ActionButton.chromatic.tsx b/packages/@react-spectrum/button/chromatic/ActionButton.chromatic.tsx
index b2b596aeea8..035fa1820ff 100644
--- a/packages/@react-spectrum/button/chromatic/ActionButton.chromatic.tsx
+++ b/packages/@react-spectrum/button/chromatic/ActionButton.chromatic.tsx
@@ -74,7 +74,7 @@ storiesOf('Button/ActionButton', module)
   .add(
     'staticColor: white',
     () => (
-      <View backgroundColor="static-seafoam-600" padding="size-1000">
+      <View backgroundColor="static-blue-700" padding="size-1000">
         <Flex direction="column" rowGap="size-150">
           <ActionButton staticColor="white">
             <Add />
@@ -116,7 +116,7 @@ storiesOf('Button/ActionButton', module)
   .add(
     'Japanese, icon + text, staticColor: white',
     () => (
-      <View backgroundColor="static-seafoam-600" padding="size-1000">
+      <View backgroundColor="static-blue-700" padding="size-1000">
         <Flex direction="column" rowGap="size-150">
           <ActionButton staticColor="white">
             <Add />
diff --git a/packages/@react-spectrum/button/chromatic/Button.chromatic.tsx b/packages/@react-spectrum/button/chromatic/Button.chromatic.tsx
index 83e28a5ce6d..9c791db4f7f 100644
--- a/packages/@react-spectrum/button/chromatic/Button.chromatic.tsx
+++ b/packages/@react-spectrum/button/chromatic/Button.chromatic.tsx
@@ -20,6 +20,7 @@ import React from 'react';
 import {storiesOf} from '@storybook/react';
 import styles from '@adobe/spectrum-css-temp/components/button/vars.css';
 import {Text} from '@react-spectrum/text';
+import {View} from '@react-spectrum/view';
 
 let states = [
   {UNSAFE_className: classNames(styles, 'is-hovered'), 'data-hover': true},
@@ -124,9 +125,9 @@ function render(props: any = {}) {
         let button = <Button key={key} {...props} {...c}>{key}</Button>;
         if (props.variant === 'overBackground' || c.staticColor === 'white') {
           return (
-            <div style={{backgroundColor: 'rgb(15, 121, 125)', color: 'rgb(15, 121, 125)', padding: '15px 20px', display: 'inline-block'}}>
+            <View backgroundColor="static-blue-700" UNSAFE_style={{padding: '15px 20px', display: 'inline-block'}}>
               {button}
-            </div>
+            </View>
           );
         }
         if (c.staticColor === 'black') {
diff --git a/packages/@react-spectrum/button/chromatic/ToggleButton.chromatic.tsx b/packages/@react-spectrum/button/chromatic/ToggleButton.chromatic.tsx
index bbb3925d95a..43918701899 100644
--- a/packages/@react-spectrum/button/chromatic/ToggleButton.chromatic.tsx
+++ b/packages/@react-spectrum/button/chromatic/ToggleButton.chromatic.tsx
@@ -38,7 +38,7 @@ storiesOf('Button/ToggleButton', module)
     </Grid>
   ))
   .add('staticColor = white', () => (
-    <View backgroundColor="static-seafoam-600" padding="size-1000">
+    <View backgroundColor="static-blue-700" padding="size-1000">
       <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
         {combinations.map(c => <ToggleButton {...c} staticColor="white">Button</ToggleButton>)}
       </Grid>
diff --git a/packages/@react-spectrum/button/docs/ActionButton.mdx b/packages/@react-spectrum/button/docs/ActionButton.mdx
index 1351ba57b1e..dee4b976458 100644
--- a/packages/@react-spectrum/button/docs/ActionButton.mdx
+++ b/packages/@react-spectrum/button/docs/ActionButton.mdx
@@ -120,7 +120,7 @@ with the background.
 
 ```tsx example
 <Flex wrap gap="size-250">
-  <View backgroundColor="static-seafoam-700" padding="size-500">
+  <View backgroundColor="static-blue-700" padding="size-500">
     <ActionButton staticColor="white">
       <Edit />
       <Text>Edit</Text>
diff --git a/packages/@react-spectrum/button/docs/Button.mdx b/packages/@react-spectrum/button/docs/Button.mdx
index 0eb90d43574..ee29e18ce6f 100644
--- a/packages/@react-spectrum/button/docs/Button.mdx
+++ b/packages/@react-spectrum/button/docs/Button.mdx
@@ -135,7 +135,7 @@ function Example() {
 
 ```tsx example
 <Flex wrap gap="size-250">
-  <View backgroundColor="static-seafoam-700" padding="size-500">
+  <View backgroundColor="static-blue-700" padding="size-500">
     <Flex wrap gap="size-200">
       <Button variant="primary" staticColor="white" style="fill">Save</Button>
       <Button variant="primary" staticColor="white" style="outline">Save</Button>
diff --git a/packages/@react-spectrum/button/docs/ToggleButton.mdx b/packages/@react-spectrum/button/docs/ToggleButton.mdx
index e6c63e5c176..eec07f074b9 100644
--- a/packages/@react-spectrum/button/docs/ToggleButton.mdx
+++ b/packages/@react-spectrum/button/docs/ToggleButton.mdx
@@ -141,7 +141,7 @@ with the background.
 
 ```tsx example
 <Flex wrap gap="size-250">
-  <View backgroundColor="static-seafoam-700" padding="size-500">
+  <View backgroundColor="static-blue-700" padding="size-500">
     <ToggleButton staticColor="white">
       <Pin />
       <Text>Pin</Text>
diff --git a/packages/@react-spectrum/button/stories/ActionButton.stories.tsx b/packages/@react-spectrum/button/stories/ActionButton.stories.tsx
index e0aaf012896..aacefb522e2 100644
--- a/packages/@react-spectrum/button/stories/ActionButton.stories.tsx
+++ b/packages/@react-spectrum/button/stories/ActionButton.stories.tsx
@@ -60,7 +60,7 @@ storiesOf('Button/ActionButton', module)
   .add(
     'staticColor: white',
     () => (
-      <View backgroundColor="static-seafoam-600" padding="size-1000">
+      <View backgroundColor="static-blue-700" padding="size-1000">
         <Flex direction="column" rowGap="size-150">
           {renderWithIcon({staticColor: 'white'})}
           {renderWithIcon({staticColor: 'white', isQuiet: true})}
diff --git a/packages/@react-spectrum/button/stories/Button.stories.tsx b/packages/@react-spectrum/button/stories/Button.stories.tsx
index a921fca157c..2a3c6e9d275 100644
--- a/packages/@react-spectrum/button/stories/Button.stories.tsx
+++ b/packages/@react-spectrum/button/stories/Button.stories.tsx
@@ -20,6 +20,7 @@ import {SpectrumButtonProps} from '@react-types/button';
 import {storiesOf} from '@storybook/react';
 import {Text} from '@react-spectrum/text';
 import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip';
+import {View} from '@react-spectrum/view';
 
 const parameters = {
   args: {
@@ -104,9 +105,9 @@ function render<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>
 
   if (props.variant === 'overBackground' || props.staticColor === 'white') {
     return (
-      <div style={{backgroundColor: 'rgb(15, 121, 125)', color: 'rgb(15, 121, 125)', padding: '15px 20px', display: 'inline-block'}}>
+      <View backgroundColor="static-blue-700" UNSAFE_style={{padding: '15px 20px', display: 'inline-block'}}>
         {buttons}
-      </div>
+      </View>
     );
   }
 
@@ -139,9 +140,9 @@ function renderIconText<T extends ElementType = 'button'>(props: SpectrumButtonP
 
   if (props.variant === 'overBackground' || props.staticColor === 'white') {
     return (
-      <div style={{backgroundColor: 'rgb(15, 121, 125)', color: 'rgb(15, 121, 125)', padding: '15px 20px', display: 'inline-block'}}>
+      <View backgroundColor="static-blue-700" UNSAFE_style={{padding: '15px 20px', display: 'inline-block'}}>
         {buttons}
-      </div>
+      </View>
     );
   }
 
@@ -178,9 +179,9 @@ function renderIconOnly<T extends ElementType = 'button'>(props: SpectrumButtonP
 
   if (props.variant === 'overBackground' || props.staticColor === 'white') {
     return (
-      <div style={{backgroundColor: 'rgb(15, 121, 125)', color: 'rgb(15, 121, 125)', padding: '15px 20px', display: 'inline-block'}}>
+      <View backgroundColor="static-blue-700" UNSAFE_style={{padding: '15px 20px', display: 'inline-block'}}>
         {buttons}
-      </div>
+      </View>
     );
   }
 
diff --git a/packages/@react-spectrum/button/stories/ToggleButton.stories.tsx b/packages/@react-spectrum/button/stories/ToggleButton.stories.tsx
index 9600bf088ac..75f410b27df 100644
--- a/packages/@react-spectrum/button/stories/ToggleButton.stories.tsx
+++ b/packages/@react-spectrum/button/stories/ToggleButton.stories.tsx
@@ -34,7 +34,7 @@ storiesOf('Button/ToggleButton', module)
   .add(
     'staticColor: white',
     args => (
-      <View backgroundColor="static-seafoam-600" padding="size-1000">
+      <View backgroundColor="static-blue-700" padding="size-1000">
         <Flex direction="column" rowGap="size-150">
           {render({...args, staticColor: 'white'})}
         </Flex>