Created plain styles for sm breakpoint

Shopify · Apr 23, 2024 · cd11a8e · cd11a8e
1 parent 9fce7c3
commit cd11a8e
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 27 deletions.
diff --git a/polaris-react/src/components/Button/Button.module.css b/polaris-react/src/components/Button/Button.module.css
@@ -12,11 +12,15 @@
   --pc-button-color_active: var(--pc-button-color);
   --pc-button-color_pressed: var(--pc-button-color_active);
   --pc-button-color_disabled: var(--p-color-text-disabled);
-  --pc-button-box-shadow: transparent;
-  --pc-button-box-shadow_hover: var(--pc-button-box-shadow);
-  --pc-button-box-shadow_active: var(--pc-button-box-shadow);
-  --pc-button-box-shadow_pressed: var(--pc-button-box-shadow_active);
-  --pc-button-box-shadow_disabled: var(--pc-button-box-shadow);
+
+  @media (--p-breakpoints-md-up) {
+    --pc-button-box-shadow: transparent;
+    --pc-button-box-shadow_hover: var(--pc-button-box-shadow);
+    --pc-button-box-shadow_active: var(--pc-button-box-shadow);
+    --pc-button-box-shadow_pressed: var(--pc-button-box-shadow_active);
+    --pc-button-box-shadow_disabled: var(--pc-button-box-shadow);
+  }
+
   --pc-button-icon-fill: currentColor;
   --pc-button-icon-fill_hover: var(--pc-button-icon-fill);
   --pc-button-icon-fill_active: var(--pc-button-icon-fill);
@@ -116,24 +120,35 @@
 
 /* VARIANTS */
 .variantPrimary {
-  --pc-button-bg-gradient: var(--p-color-button-gradient-bg-fill);
-  --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);
-  --pc-button-bg_hover: var(--pc-button-bg-gradient),
-    var(--p-color-bg-fill-brand-hover);
-  --pc-button-bg_active: var(--pc-button-bg-gradient),
-    var(--p-color-bg-fill-brand-active);
-  --pc-button-bg_disabled: var(--p-color-bg-fill-brand-disabled);
+  --pc-button-bg: var(--p-color-bg-fill-brand);
   --pc-button-color: var(--p-color-text-brand-on-bg-fill);
-  --pc-button-color_disabled: var(--p-color-text-brand-on-bg-fill-disabled);
-  --pc-button-icon-fill: var(--p-color-text-brand-on-bg-fill);
-  --pc-button-icon-fill_disabled: var(--p-color-text-brand-on-bg-fill-disabled);
+  --pc-button-bg_active: var(--p-color-bg-fill-brand-active);
+  @media (--p-breakpoints-md-up) {
+    --pc-button-bg-gradient: var(--p-color-button-gradient-bg-fill);
+    --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);
+    --pc-button-bg_hover: var(--pc-button-bg-gradient),
+      var(--p-color-bg-fill-brand-hover);
+    --pc-button-bg_active: var(--pc-button-bg-gradient),
+      var(--p-color-bg-fill-brand-active);
+    --pc-button-bg_disabled: var(--p-color-bg-fill-brand-disabled);
+    --pc-button-color_disabled: var(--p-color-text-brand-on-bg-fill-disabled);
+    --pc-button-icon-fill: var(--p-color-text-brand-on-bg-fill);
+    --pc-button-icon-fill_disabled: var(
+      --p-color-text-brand-on-bg-fill-disabled
+    );
+  }
 }
 
 .variantSecondary {
-  --pc-button-box-shadow: var(--p-shadow-button);
-  --pc-button-box-shadow_active: var(--p-shadow-button-inset);
+  border: var(--p-border-width-025) solid var(--p-color-border);
+
+  @media (--p-breakpoints-md-up) {
+    --pc-button-box-shadow: var(--p-shadow-button);
+    --pc-button-box-shadow_active: var(--p-shadow-button-inset);
+    border: none;
+  }
   --pc-button-bg: var(--p-color-bg-fill);
   --pc-button-bg_hover: var(--p-color-bg-fill-hover);
   --pc-button-bg_active: var(--p-color-bg-fill-active);
@@ -152,13 +167,24 @@
 }
 
 .variantPlain {
-  --pc-button-color: var(--p-color-text-link);
-  --pc-button-color_hover: var(--p-color-text-link-hover);
-  --pc-button-color_active: var(--p-color-text-link-active);
+  --pc-button-color: var(--p-color-text-emphasis);
+  @media (--p-breakpoints-md-up) {
+    --pc-button-color: var(--p-color-text-link);
+    --pc-button-color_hover: var(--p-color-text-link-hover);
+    --pc-button-color_active: var(--p-color-text-link-active);
+  }
 }
 
 .variantPlain:is(:hover, :active, :focus-visible):not(.removeUnderline) {
-  text-decoration: underline;
+  @media (--p-breakpoints-md-up) {
+    text-decoration: underline;
+  }
+}
+
+.variantPlain:is(:active) {
+  @media (--p-breakpoints-md-down) {
+    opacity: 0.4;
+  }
 }
 
 .variantMonochromePlain {
@@ -203,12 +229,17 @@
 }
 
 .toneCritical:is(.variantPrimary) {
-  --pc-button-box-shadow: var(--p-shadow-button-primary-critical);
-  --pc-button-box-shadow_active: var(--p-shadow-button-primary-critical-inset);
   --pc-button-bg: var(--p-color-bg-fill-critical);
   --pc-button-bg_hover: var(--p-color-bg-fill-critical-hover);
   --pc-button-bg_active: var(--p-color-bg-fill-critical-active);
   --pc-button-bg_pressed: var(--p-color-bg-fill-critical-selected);
+
+  @media (--p-breakpoints-md-up) {
+    --pc-button-box-shadow: var(--p-shadow-button-primary-critical);
+    --pc-button-box-shadow_active: var(
+      --p-shadow-button-primary-critical-inset
+    );
+  }
 }
 
 /* SIZES */
@@ -346,7 +377,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-react/src/components/Button/Button.tsx b/polaris-react/src/components/Button/Button.tsx
@@ -185,7 +185,7 @@ export function Button({
   }
 
   let textVariant: TextProps['variant'] = 'bodySm';
-  if (size === 'large' || (hasPlainText && size !== 'micro')) {
+  if (size === 'large' || (mdUp && hasPlainText && size !== 'micro')) {
     textVariant = 'bodyMd';
   }