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); - } }