From 8ce927455e0a835809b1c91a4e6ff8af8cbd7d56 Mon Sep 17 00:00:00 2001
From: Sophie Schneider <sophie.schneider@shopify.com>
Date: Fri, 11 Aug 2023 12:08:12 -0400
Subject: [PATCH] [KeyboardKey] Consolidate se23 logic and styles (#10010)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris/issues/9941

### WHAT is this pull request doing?

Consolidates se23 beta styles for `KeyboardKey`.

### How to 🎩

Compare:

* This PR's
[Storybook](https://5d559397bae39100201eedc1-xmguxoqurw.chromatic.com/?path=/story/all-components-keyboardkey--all)
* [Production
Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-keyboardkey--all&globals=polarisSummerEditions2023:true)
---
 .changeset/tall-chicken-repeat.md             |  2 +-
 .../components/KeyboardKey/KeyboardKey.scss   | 26 ++++---------------
 2 files changed, 6 insertions(+), 22 deletions(-)

diff --git a/.changeset/tall-chicken-repeat.md b/.changeset/tall-chicken-repeat.md
index 0f999951d4d..fe2d4516700 100644
--- a/.changeset/tall-chicken-repeat.md
+++ b/.changeset/tall-chicken-repeat.md
@@ -2,4 +2,4 @@
 '@shopify/polaris': major
 ---
 
-Removed Summer Editions experimental styles and code for the following components: `Avatar`, `AccountConnection`, `ActionList`, `ActionMenu`, `Autocomplete`, `Breadcrumbs`, `Text`
+Removed Summer Editions experimental styles and code for the following components: `Avatar`, `AccountConnection`, `ActionList`, `ActionMenu`, `Autocomplete`, `Breadcrumbs`, `Text`, `KeyboardKey`
diff --git a/polaris-react/src/components/KeyboardKey/KeyboardKey.scss b/polaris-react/src/components/KeyboardKey/KeyboardKey.scss
index ce3616442f3..47474c93401 100644
--- a/polaris-react/src/components/KeyboardKey/KeyboardKey.scss
+++ b/polaris-react/src/components/KeyboardKey/KeyboardKey.scss
@@ -7,12 +7,11 @@ $key-base-dimension: 28px;
   display: inline-flex;
   justify-content: center;
   margin: 0 var(--p-space-05) var(--p-space-05);
+  margin-bottom: 0;
   padding: 0 var(--p-space-2);
-  background: var(--p-color-bg-inset);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  box-shadow: 0 var(--p-space-025) 0 rgba(0, 0, 0, 0.15);
+  background: var(--p-color-bg-secondary-experimental);
   border-radius: var(--p-border-radius-1);
-  color: var(--p-color-text);
+  color: var(--p-color-text-subdued);
   font-size: var(--p-font-size-100);
   font-weight: var(--p-font-weight-medium);
   font-family: var(--p-font-family-sans);
@@ -20,28 +19,13 @@ $key-base-dimension: 28px;
   text-align: center;
   min-width: $key-base-dimension;
   user-select: none;
-
-  #{$se23} & {
-    background: var(--p-color-bg-secondary-experimental);
-    border-radius: var(--p-border-radius-1);
-    color: var(--p-color-text-subdued);
-    box-shadow: none;
-    margin-bottom: 0;
-  }
 }
 
 .small {
-  background: var(--p-color-bg-app-selected);
-  border-radius: var(--p-border-radius-05);
   box-shadow: none;
-  line-height: unset;
-  padding: 0 var(--p-space-1);
+  line-height: var(--p-font-size-200);
+  padding: var(--p-space-05) var(--p-space-1);
   font-size: var(--p-font-size-75);
   height: var(--p-space-5);
   min-width: var(--p-space-5);
-
-  #{$se23} & {
-    line-height: var(--p-font-size-200);
-    padding: var(--p-space-05) var(--p-space-1);
-  }
 }