[CalloutCard] Consolidate se23 logic and styles (#10067)

sophschneider · web-flow · commit 3a67a3fcca3c · 2023-08-16T11:19:58.000-04:00
### WHY are these changes introduced? Fixes #9924 ### WHAT is this pull request doing? Consolidates se23 beta styles for `CalloutCard`. ### How to 🎩 Compare and make sure they are identical: * This PR's [Storybook](https://5d559397bae39100201eedc1-ztjybrtfrh.chromatic.com/?path=/story/all-components-calloutcard--default) * [Production Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-calloutcard--default&globals=polarisSummerEditions2023:true)
diff --git a/polaris-react/src/components/CalloutCard/CalloutCard.scss b/polaris-react/src/components/CalloutCard/CalloutCard.scss
@@ -25,17 +25,11 @@
 }
 
 .Title {
-  margin-bottom: var(--p-space-5);
-  #{$se23} & {
-    margin-bottom: var(--p-space-2);
-  }
+  margin-bottom: var(--p-space-2);
 }
 
 .Buttons {
-  margin-top: var(--p-space-5);
-  #{$se23} & {
-    margin-top: var(--p-space-2);
-  }
+  margin-top: var(--p-space-2);
 }
 
 .Container {
@@ -46,7 +40,9 @@
   right: var(--p-space-4);
   top: var(--p-space-4);
   position: absolute;
-  #{$se23} & svg {
+
+  // stylelint-disable-next-line -- Dismiss icon color override
+  & svg {
     fill: var(--p-color-icon-subdued);
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -25,17 +25,11 @@`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`.Title {`
`28`		`- margin-bottom: var(--p-space-5);`
`29`		`- #{$se23} & {`
`30`		`- margin-bottom: var(--p-space-2);`
`31`		`- }`
	`28`	`+ margin-bottom: var(--p-space-2);`
`32`	`29`	`}`
`33`	`30`
`34`	`31`	`.Buttons {`
`35`		`- margin-top: var(--p-space-5);`
`36`		`- #{$se23} & {`
`37`		`- margin-top: var(--p-space-2);`
`38`		`- }`
	`32`	`+ margin-top: var(--p-space-2);`
`39`	`33`	`}`
`40`	`34`
`41`	`35`	`.Container {`
`@@ -46,7 +40,9 @@`
`46`	`40`	`right: var(--p-space-4);`
`47`	`41`	`top: var(--p-space-4);`
`48`	`42`	`position: absolute;`
`49`		`- #{$se23} & svg {`
	`43`	`+`
	`44`	`+ // stylelint-disable-next-line -- Dismiss icon color override`
	`45`	`+ & svg {`
`50`	`46`	`fill: var(--p-color-icon-subdued);`
`51`	`47`	`}`
`52`	`48`	`}`