Add spaces to ::backdrop (#2563)

langermank · web-flow · commit 4195245722de · 2023-12-07T10:42:00.000-08:00
* add spaces

* changeset
diff --git a/.changeset/shy-ducks-work.md b/.changeset/shy-ducks-work.md
@@ -0,0 +1,5 @@
+---
+'@primer/css': patch
+---
+
+fix backdrop selector
diff --git a/src/support/mixins/color-modes.scss b/src/support/mixins/color-modes.scss
@@ -31,8 +31,8 @@
     }
 
     ::backdrop,
-    [data-color-mode="light"][data-light-theme="#{$theme-name}"]::backdrop,
-    [data-color-mode="dark"][data-dark-theme="#{$theme-name}"]::backdrop {
+    [data-color-mode="light"][data-light-theme="#{$theme-name}"] ::backdrop,
+    [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] ::backdrop {
       @content;
 
       /*! */ // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.
@@ -47,10 +47,10 @@
         @content;
       }
     }
-    
+
     ::backdrop,
-    [data-color-mode="light"][data-light-theme="#{$theme-name}"]::backdrop,
-    [data-color-mode="dark"][data-dark-theme="#{$theme-name}"]::backdrop {
+    [data-color-mode="light"][data-light-theme="#{$theme-name}"] ::backdrop,
+    [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] ::backdrop {
       @content;
 
       /*! */ // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.
@@ -64,8 +64,8 @@
         @content;
       }
     }
-    
-    [data-color-mode="auto"][data-light-theme="#{$theme-name}"]::backdrop {
+
+    [data-color-mode="auto"][data-light-theme="#{$theme-name}"] ::backdrop {
       @content;
 
       /*! */ // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.
@@ -79,8 +79,8 @@
         @content;
       }
     }
-    
-    [data-color-mode="auto"][data-light-theme="#{$theme-name}"]::backdrop {
+
+    [data-color-mode="auto"][data-light-theme="#{$theme-name}"] ::backdrop {
       @content;
 
       /*! */ // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@primer/css': patch
 +---
++
 +fix backdrop selector
Original file line number	Diff line number	Diff line change
`@@ -31,8 +31,8 @@`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`::backdrop,`
`34`		`- [data-color-mode="light"][data-light-theme="#{$theme-name}"]::backdrop,`
`35`		`- [data-color-mode="dark"][data-dark-theme="#{$theme-name}"]::backdrop {`
	`34`	`+ [data-color-mode="light"][data-light-theme="#{$theme-name}"] ::backdrop,`
	`35`	`+ [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] ::backdrop {`
`36`	`36`	`@content;`
`37`	`37`
`38`	`38`	`/! / // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.`
`@@ -47,10 +47,10 @@`
`47`	`47`	`@content;`
`48`	`48`	`}`
`49`	`49`	`}`
`50`		`-`
	`50`	`+`
`51`	`51`	`::backdrop,`
`52`		`- [data-color-mode="light"][data-light-theme="#{$theme-name}"]::backdrop,`
`53`		`- [data-color-mode="dark"][data-dark-theme="#{$theme-name}"]::backdrop {`
	`52`	`+ [data-color-mode="light"][data-light-theme="#{$theme-name}"] ::backdrop,`
	`53`	`+ [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] ::backdrop {`
`54`	`54`	`@content;`
`55`	`55`
`56`	`56`	`/! / // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.`
`@@ -64,8 +64,8 @@`
`64`	`64`	`@content;`
`65`	`65`	`}`
`66`	`66`	`}`
`67`		`-`
`68`		`- [data-color-mode="auto"][data-light-theme="#{$theme-name}"]::backdrop {`
	`67`	`+`
	`68`	`+ [data-color-mode="auto"][data-light-theme="#{$theme-name}"] ::backdrop {`
`69`	`69`	`@content;`
`70`	`70`
`71`	`71`	`/! / // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.`
`@@ -79,8 +79,8 @@`
`79`	`79`	`@content;`
`80`	`80`	`}`
`81`	`81`	`}`
`82`		`-`
`83`		`- [data-color-mode="auto"][data-light-theme="#{$theme-name}"]::backdrop {`
	`82`	`+`
	`83`	`+ [data-color-mode="auto"][data-light-theme="#{$theme-name}"] ::backdrop {`
`84`	`84`	`@content;`
`85`	`85`
`86`	`86`	`/! / // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.`