Add -- prefix to CSS Custom Property for SkeletonBox (#5768)

joshblack · web-flow · commit 7b2eb4e71966 · 2025-03-13T18:09:14.000Z
diff --git a/.changeset/fuzzy-walls-tap.md b/.changeset/fuzzy-walls-tap.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Update CSS Custom Property used in skeletons to fix animation behind feature flag.
diff --git a/packages/react/src/experimental/Skeleton/SkeletonBox.module.css b/packages/react/src/experimental/Skeleton/SkeletonBox.module.css
@@ -19,7 +19,7 @@
     mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);
     mask-size: 200%;
     animation: shimmer;
-    animation-duration: var(base-duration-1000);
+    animation-duration: var(--base-duration-1000);
     animation-iteration-count: infinite;
   }
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@primer/react": patch
 +---
++
 +Update CSS Custom Property used in skeletons to fix animation behind feature flag.
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@`
`19`	`19`	`mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);`
`20`	`20`	`mask-size: 200%;`
`21`	`21`	`animation: shimmer;`
`22`		`- animation-duration: var(base-duration-1000);`
	`22`	`+ animation-duration: var(--base-duration-1000);`
`23`	`23`	`animation-iteration-count: infinite;`
`24`	`24`	`}`
`25`	`25`