From 5efeafd8af577455b70a00e5c507da0fc9d89240 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Thu, 21 Mar 2024 15:56:16 -0400
Subject: [PATCH] docs(button): use static background colors from design

Use the example background color tokens for the static white and black
variants, that are used on the s2 design spec. Note; the seafoam-1000
and seafoam-200 token names couldn't be used here as we don't want them
to change between light and dark themes.
---
 .../button/metadata/button-staticcolor.yml    | 24 +++++++++----------
 components/button/stories/button.stories.js   |  6 ++---
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/components/button/metadata/button-staticcolor.yml b/components/button/metadata/button-staticcolor.yml
index 0c0e51cc35b..0ad274bb08b 100644
--- a/components/button/metadata/button-staticcolor.yml
+++ b/components/button/metadata/button-staticcolor.yml
@@ -54,7 +54,7 @@ examples:
   - id: button-staticcolor
     name: Static White
     markup: |
-      <div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); --spectrum-alias-heading-text-color: white; padding: 15px 20px;">
+      <div style="background-color: rgb(5, 108, 92); --mod-heading-font-color: white; padding: 15px 20px;">
         <div class="spectrum-Examples">
           <div class="spectrum-Examples-item">
             <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
@@ -144,7 +144,7 @@ examples:
   - id: button-staticcolor
     name: Static White - Disabled
     markup: |
-      <div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;">
+      <div style="background-color: rgb(5, 108, 92); padding: 15px 20px;">
         <button class="spectrum-Button spectrum-Button--staticWhite" disabled>
           <span class="spectrum-Button-label">Edit</span>
         </button>
@@ -166,7 +166,7 @@ examples:
   - id: button-staticcolor
     name: Static White - Secondary
     markup: |
-      <div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;">
+      <div style="background-color: rgb(5, 108, 92); padding: 15px 20px;">
         <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--secondary">
           <span class="spectrum-Button-label">Edit</span>
         </button>
@@ -188,7 +188,7 @@ examples:
   - id: button-staticcolor
     name: Static Black
     markup: |
-      <div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
+      <div style="background-color: rgb(211, 246, 234); padding: 15px 20px;">
         <div class="spectrum-Examples">
           <div class="spectrum-Examples-item">
             <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
@@ -278,7 +278,7 @@ examples:
   - id: button-staticcolor
     name: Static Black - Disabled
     markup: |
-      <div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
+      <div style="background-color: rgb(211, 246, 234); padding: 15px 20px;">
         <button class="spectrum-Button spectrum-Button--staticBlack" disabled>
           <span class="spectrum-Button-label">Edit</span>
         </button>
@@ -300,7 +300,7 @@ examples:
   - id: button-staticcolor
     name: Static Black - Secondary
     markup: |
-      <div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
+      <div style="background-color: rgb(211, 246, 234); color: rgb(181, 209, 211); padding: 15px 20px;">
         <button class="spectrum-Button spectrum-Button--staticBlack spectrum-Button--secondary">
           <span class="spectrum-Button-label">Edit</span>
         </button>
@@ -322,7 +322,7 @@ examples:
   - id: button-staticcolor
     name: Static White - Outline
     markup: |
-      <div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); --spectrum-alias-heading-text-color: white; padding: 15px 20px;">
+      <div style="background-color: rgb(5, 108, 92); --mod-heading-font-color: white; padding: 15px 20px;">
         <div class="spectrum-Examples">
           <div class="spectrum-Examples-item">
             <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
@@ -412,7 +412,7 @@ examples:
   - id: button-staticcolor
     name: Static White - Outline, Disabled
     markup: |
-      <div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;">
+      <div style="background-color: rgb(5, 108, 92); padding: 15px 20px;">
         <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite" disabled>
           <span class="spectrum-Button-label">Edit</span>
         </button>
@@ -434,7 +434,7 @@ examples:
   - id: button-staticcolor
     name: Static White - Outline, Secondary
     markup: |
-      <div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;">
+      <div style="background-color: rgb(5, 108, 92); padding: 15px 20px;">
         <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--secondary">
           <span class="spectrum-Button-label">Edit</span>
         </button>
@@ -456,7 +456,7 @@ examples:
   - id: button-staticcolor
     name: Static Black - Outline
     markup: |
-      <div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
+      <div style="background-color: rgb(211, 246, 234); padding: 15px 20px;">
         <div class="spectrum-Examples">
           <div class="spectrum-Examples-item">
             <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
@@ -546,7 +546,7 @@ examples:
   - id: button-staticcolor
     name: Static Black - Outline, Disabled
     markup: |
-      <div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
+      <div style="background-color: rgb(211, 246, 234); padding: 15px 20px;">
         <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticBlack" disabled>
           <span class="spectrum-Button-label">Edit</span>
         </button>
@@ -568,7 +568,7 @@ examples:
   - id: button-staticcolor
     name: Static Black - Outline, Secondary
     markup: |
-      <div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
+      <div style="background-color: rgb(211, 246, 234); padding: 15px 20px;">
         <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticBlack spectrum-Button--secondary">
           <span class="spectrum-Button-label">Edit</span>
         </button>
diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js
index 7e0b7cc859d..7eab4e473e1 100644
--- a/components/button/stories/button.stories.js
+++ b/components/button/stories/button.stories.js
@@ -167,7 +167,7 @@ const CustomButton = ({
 		<div
 			style=${ifDefined(styleMap({
 				padding: "1rem",
-				backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined,
+				backgroundColor: staticColor === "white" ? "rgb(5, 108, 92)" : staticColor === "black" ? "rgb(211, 246, 234)" : undefined,
 				...customStyles
 			}))}
 		>
@@ -260,7 +260,7 @@ const PendingButton = ({
 			<div
 				style=${ifDefined(styleMap({
 					padding: "1rem",
-					backgroundColor: "rgb(15, 121, 125)",
+					backgroundColor: "rgb(5, 108, 92)",
 					...customStyles
 				}))}
 			>
@@ -280,7 +280,7 @@ const PendingButton = ({
 					<div
 						style=${ifDefined(styleMap({
 							padding: "1rem",
-							backgroundColor: "rgb(15, 121, 125)",
+							backgroundColor: "rgb(5, 108, 92)",
 							...customStyles
 						}))}
 					>