From 8ce099eb8503351e26758752debb40d3018f3c5a Mon Sep 17 00:00:00 2001
From: Sam Rose <11774595+sam-b-rose@users.noreply.github.com>
Date: Thu, 8 Feb 2024 11:45:23 +1300
Subject: [PATCH] Apply flat button styles for light-mobile theme

---
 .changeset/fifty-kings-run.md                 |  6 +++
 .../src/components/Button/Button.module.scss  | 25 ++++++-----
 polaris-tokens/src/themes/base/color.ts       |  5 +++
 polaris-tokens/src/themes/light-mobile.ts     | 45 +++++++++++++++++++
 4 files changed, 69 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/fifty-kings-run.md

diff --git a/.changeset/fifty-kings-run.md b/.changeset/fifty-kings-run.md
new file mode 100644
index 00000000000..b1670e260eb
--- /dev/null
+++ b/.changeset/fifty-kings-run.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'@shopify/polaris-tokens': minor
+---
+
+Applied native mobile styles to Button component for the light-mobile theme
diff --git a/polaris-react/src/components/Button/Button.module.scss b/polaris-react/src/components/Button/Button.module.scss
index 05449b57c44..fae07f1d7f1 100644
--- a/polaris-react/src/components/Button/Button.module.scss
+++ b/polaris-react/src/components/Button/Button.module.scss
@@ -35,8 +35,8 @@
   box-shadow: var(--pc-button-box-shadow);
   color: var(--pc-button-color);
 
-  font-size: var(--p-font-size-325);
-  font-weight: var(--p-font-weight-medium);
+  font-size: var(--p-font-size-350);
+  font-weight: var(--p-font-weight-semibold);
   line-height: var(--p-font-line-height-500);
 
   cursor: pointer;
@@ -45,6 +45,7 @@
 
   @media (--p-breakpoints-md-up) {
     font-size: var(--p-font-size-300);
+    font-weight: var(--p-font-weight-medium);
     line-height: var(--p-font-line-height-400);
   }
 }
@@ -125,13 +126,7 @@
 
 // VARIANTS
 .variantPrimary {
-  // stylelint-disable  -- custom button tokens
-  --pc-button-bg-gradient: linear-gradient(
-    180deg,
-    rgba(48, 48, 48, 0) 63.53%,
-    rgba(255, 255, 255, 0.15) 100%
-  );
-  // stylelint-enable
+  --pc-button-bg-gradient: var(--p-color-button-bg-gradient-primary);
   --pc-button-box-shadow: var(--p-shadow-button-primary);
   --pc-button-box-shadow_active: var(--p-shadow-button-primary-inset);
   --pc-button-bg: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand);
@@ -185,9 +180,13 @@
   --pc-button-bg_disabled: transparent;
   margin: calc(-1 * var(--pc-button-padding-block))
     calc(-1 * var(--pc-button-padding-inline));
-  font-size: var(--p-font-size-325);
+  font-size: var(--p-font-size-350);
   font-weight: var(--p-font-weight-regular);
-  line-height: var(--p-font-line-height-400);
+  line-height: var(--p-font-line-height-500);
+
+  @media (--p-breakpoints-md-up) {
+    font-size: var(--p-font-size-325);
+  }
 }
 
 .variantPlain:focus-visible,
@@ -356,7 +355,9 @@
 // INTERACTION
 .pressable:active:not(.variantTertiary, .variantPlain, .variantMonochromePlain)
   > * {
-  transform: translate3d(0, 1px, 0);
+  @media (--p-breakpoints-md-up) {
+    transform: translate3d(0, 1px, 0);
+  }
 }
 
 // UTILITIES
diff --git a/polaris-tokens/src/themes/base/color.ts b/polaris-tokens/src/themes/base/color.ts
index 28ab35294b6..e3a1d36df67 100644
--- a/polaris-tokens/src/themes/base/color.ts
+++ b/polaris-tokens/src/themes/base/color.ts
@@ -107,6 +107,7 @@ export type ColorBackgroundAlias =
   | 'avatar-three-bg-fill'
   | 'avatar-two-bg-fill'
   | 'backdrop-bg'
+  | 'button-bg-gradient-primary'
   | 'checkbox-bg-surface-disabled'
   | 'input-bg-surface-active'
   | 'input-bg-surface-hover'
@@ -1131,6 +1132,10 @@ export const color: {
   'color-backdrop-bg': {
     value: colors.blackAlpha[14],
   },
+  'color-button-bg-gradient-primary': {
+    value:
+      'linear-gradient(180deg, rgba(48, 48, 48, 0) 63.53%, rgba(255, 255, 255, 0.15) 100%)',
+  },
   'color-checkbox-bg-surface-disabled': {
     value: colors.blackAlpha[7],
   },
diff --git a/polaris-tokens/src/themes/light-mobile.ts b/polaris-tokens/src/themes/light-mobile.ts
index fce0fed2964..34f1d2cacaf 100644
--- a/polaris-tokens/src/themes/light-mobile.ts
+++ b/polaris-tokens/src/themes/light-mobile.ts
@@ -2,7 +2,16 @@ import {createVar} from '../utils';
 
 import {createMetaTheme, createMetaThemePartial} from './utils';
 
+const buttonShadow = `0 0 0 ${createVar('border-width-025')} ${createVar(
+  'color-border',
+)} inset`;
+
 export const metaThemeLightMobilePartial = createMetaThemePartial({
+  color: {
+    'color-button-bg-gradient-primary': {
+      value: 'none',
+    },
+  },
   shadow: {
     'shadow-100': {
       value: 'none',
@@ -10,6 +19,42 @@ export const metaThemeLightMobilePartial = createMetaThemePartial({
     'shadow-bevel-100': {
       value: 'none',
     },
+    'shadow-button': {
+      value: buttonShadow,
+    },
+    'shadow-button-hover': {
+      value: buttonShadow,
+    },
+    'shadow-button-inset': {
+      value: buttonShadow,
+    },
+    'shadow-button-primary': {
+      value: 'none',
+    },
+    'shadow-button-primary-hover': {
+      value: 'none',
+    },
+    'shadow-button-primary-inset': {
+      value: 'none',
+    },
+    'shadow-button-primary-critical': {
+      value: 'none',
+    },
+    'shadow-button-primary-critical-hover': {
+      value: 'none',
+    },
+    'shadow-button-primary-critical-inset': {
+      value: 'none',
+    },
+    'shadow-button-primary-success': {
+      value: 'none',
+    },
+    'shadow-button-primary-success-hover': {
+      value: 'none',
+    },
+    'shadow-button-primary-success-inset': {
+      value: 'none',
+    },
   },
   space: {
     'space-card-gap': {