diff --git a/packages/styles/src/placeholders/_modes.scss b/packages/styles/src/placeholders/_modes.scss
index 4dcdbf2145..2bb8abd34f 100644
--- a/packages/styles/src/placeholders/_modes.scss
+++ b/packages/styles/src/placeholders/_modes.scss
@@ -1,10 +1,10 @@
 @use '../tokens/temp/mode' as mode;
 @use './../mixins/tokens';
 
-%post-light {
+%color-mode-light {
   @include tokens.from(mode.$post-light);
 }
 
-%post-dark {
+%color-mode-dark {
   @include tokens.from(mode.$post-dark);
 }
diff --git a/packages/styles/src/tokens/_modes.scss b/packages/styles/src/tokens/_modes.scss
index 610b1ffe2e..acbce91f5c 100644
--- a/packages/styles/src/tokens/_modes.scss
+++ b/packages/styles/src/tokens/_modes.scss
@@ -11,10 +11,10 @@
 
 :root,
 [data-color-mode='light'] {
-  @extend %post-light;
+  @extend %color-mode-light;
 }
 
 [data-color-mode='dark'] {
-  @extend %post-dark;
+  @extend %color-mode-dark;
   color-scheme: dark;
 }