fix(Blankslate): update styles to prevent SSR hydration mismatch (#4710)

* fix(Blankslate): update styles to prevent SSR mismatch

* chore: add changeset

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

.changeset/wild-maps-bathe.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Update Blankslate styles to better support server-side rendering

packages/react/src/Blankslate/Blankslate.tsx

@@ -26,16 +26,17 @@ const StyledBlankslate = styled.div`
   container-type: inline-size;
 
   .Blankslate {
-    --blankslate-outer-padding-block: var(--base-size-32);
-    --blankslate-outer-padding-inline: var(--base-size-32);
+    --blankslate-outer-padding-block: var(--base-size-32, 2rem);
+    --blankslate-outer-padding-inline: var(--base-size-32, 2rem);
+
     display: grid;
     justify-items: center;
     padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);
   }
 
   .Blankslate[data-spacious='true'] {
-    --blankslate-outer-padding-block: var(--base-size-80);
-    --blankslate-outer-padding-inline: var(--base-size-40);
+    --blankslate-outer-padding-block: var(--base-size-80, 5rem);
+    --blankslate-outer-padding-inline: var(--base-size-40, 2.5rem);
   }
 
   .Blankslate[data-border='true'] {
@@ -51,29 +52,30 @@ const StyledBlankslate = styled.div`
   .Blankslate-Heading,
   .Blankslate-Description {
     margin: 0;
-    margin-bottom: var(--stack-gap-condensed);
+    margin-bottom: var(--stack-gap-condensed, 0.5rem);
   }
 
   .Blankslate-Heading {
-    font-size: var(--text-title-size-medium);
-    font-weight: var(--text-title-weight-medium);
+    font-size: var(--text-title-size-medium, 1.25rem);
+    font-weight: var(--text-title-weight-medium, 600);
   }
 
   .Blankslate-Description {
     color: var(--fgColor-muted, ${get('colors.fg.muted')});
-    font-size: var(--text-body-size-large);
+    font-size: var(--text-body-size-large, 1rem);
+    line-height: var(--text-body-lineHeight-large, 1.5);
   }
 
   .Blankslate-Action {
-    margin-top: var(--stack-gap-normal);
+    margin-top: var(--stack-gap-normal, 1rem);
   }
 
   .Blankslate-Action:first-of-type {
-    margin-top: var(--stack-gap-spacious);
+    margin-top: var(--stack-gap-spacious, 1.5rem);
   }
 
   .Blankslate-Action:last-of-type {
-    margin-bottom: var(--stack-gap-condensed);
+    margin-bottom: var(--stack-gap-condensed, 0.5rem);
   }
 `
 
@@ -92,7 +94,7 @@ const BlankslateContainerQuery = `
   }
 
   ${StyledBlankslate} .Blankslate-Visual {
-    margin-bottom: var(--stack-gap-condensed);
+    margin-bottom: var(--stack-gap-condensed, 0.5rem);
     max-width: var(--base-size-24);
   }
 
@@ -109,15 +111,15 @@ const BlankslateContainerQuery = `
   }
 
   ${StyledBlankslate} .Blankslate-Action {
-    margin-top: var(--stack-gap-condensed);
+    margin-top: var(--stack-gap-condensed, 0.5rem);
   }
 
   ${StyledBlankslate} .Blankslate-Action:first-of-type {
-    margin-top: var(--stack-gap-normal);
+    margin-top: var(--stack-gap-normal, 1rem);
   }
 
   ${StyledBlankslate} .Blankslate-Action:last-of-type {
-    margin-bottom: calc(var(--stack-gap-condensed) / 2);
+    margin-bottom: calc(var(--stack-gap-condensed, 0.5rem) / 2);
   }
 `
 
@@ -128,7 +130,7 @@ function Blankslate({border, children, narrow, spacious}: BlankslateProps) {
         This is a workaround so we can use `@container` without upgrading `styled-components` to 6.x
         See [this comment](https://github.com/primer/react/pull/3869#discussion_r1392523030) for more info
       */}
-      <style type="text/css">{BlankslateContainerQuery}</style>
+      <style type="text/css" dangerouslySetInnerHTML={{__html: BlankslateContainerQuery}} />
       <StyledBlankslate>
         <div className="Blankslate" data-border={border} data-narrow={narrow} data-spacious={spacious}>
           {children}