diff --git a/packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu-item.scss b/packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu-item.scss
index 6f7e12b47..ccc1f4b78 100644
--- a/packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu-item.scss
+++ b/packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu-item.scss
@@ -85,8 +85,8 @@
   color: var(--pharos-dropdown-menu-item-color-text-description);
 }
 
-:host([on-background]) .dropdown-menu-item__button,
-:host([on-background]) .dropdown-menu-item__link {
+:host([is-on-background]) .dropdown-menu-item__button,
+:host([is-on-background]) .dropdown-menu-item__link {
   @include mixins.button-color(
     $color: var(--pharos-button-color-on-background-secondary-text-base),
     $background-color: var(--pharos-color-marble-gray-20),
@@ -94,8 +94,8 @@
   );
 }
 
-:host([on-background][disabled]) .dropdown-menu-item__link,
-:host([on-background][disabled]) .dropdown-menu-item__button {
+:host([is-on-background][disabled]) .dropdown-menu-item__link,
+:host([is-on-background][disabled]) .dropdown-menu-item__button {
   @include mixins.button-color(
     $color: var(--pharos-color-ui-30),
     $background-color: var(--pharos-color-text-disabled),
@@ -103,8 +103,8 @@
   );
 }
 
-:host([on-background]) .dropdown-menu-item__link:hover,
-:host([on-background]) .dropdown-menu-item__button:hover {
+:host([is-on-background]) .dropdown-menu-item__link:hover,
+:host([is-on-background]) .dropdown-menu-item__button:hover {
   @include mixins.button-color(
     $color: var(--pharos-button-color-on-background-secondary-text-base),
     $background-color: var(--pharos-color-marble-gray-30, #4d4d4c),
@@ -112,15 +112,15 @@
   );
 }
 
-:host([on-background]) .dropdown-menu-item__button--first {
+:host([is-on-background]) .dropdown-menu-item__button--first {
   border-radius: var(--pharos-radius-base-standard) var(--pharos-radius-base-standard) 0 0;
 }
 
-:host([on-background]) .dropdown-menu-item__button--last {
+:host([is-on-background]) .dropdown-menu-item__button--last {
   border-radius: 0 0 var(--pharos-radius-base-standard) var(--pharos-radius-base-standard);
 }
 
-:host(:not([disabled], [on-background]))
+:host(:not([disabled], [is-on-background]))
   .dropdown-menu-item:hover:not(.dropdown-menu-item--active) {
   .dropdown-menu-item__link,
   .dropdown-menu-item__button {
diff --git a/packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu-item.ts b/packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu-item.ts
index ce5fc9994..310d7692c 100644
--- a/packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu-item.ts
+++ b/packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu-item.ts
@@ -73,9 +73,9 @@ export class PharosDropdownMenuItem extends ScopedRegistryMixin(FocusMixin(Pharo
 
   /**
    * Indicates the menu item is displayed on a dark background.
-   * @attr on-background
+   * @attr is-on-background
    */
-  @property({ type: Boolean, reflect: true, attribute: 'on-background' })
+  @property({ type: Boolean, reflect: true, attribute: 'is-on-background' })
   public onBackground = false;
 
   @state()
diff --git a/packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu.scss b/packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu.scss
index 407bb3531..860c63ada 100644
--- a/packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu.scss
+++ b/packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu.scss
@@ -28,7 +28,7 @@
     opacity var(--pharos-transition-duration-short) linear;
 }
 
-:host([on-background]) .dropdown-menu__list {
+:host([is-on-background]) .dropdown-menu__list {
   border: none;
 }
 
diff --git a/packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu.ts b/packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu.ts
index ca92c633f..e4f45639f 100644
--- a/packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu.ts
+++ b/packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu.ts
@@ -54,9 +54,9 @@ export class PharosDropdownMenu extends ScopedRegistryMixin(FocusMixin(OverlayEl
 
   /**
    * Indicates the menu item is displayed on a dark background.
-   * @attr on-background
+   * @attr is-on-background
    */
-  @property({ type: Boolean, reflect: true, attribute: 'on-background' })
+  @property({ type: Boolean, reflect: true, attribute: 'is-on-background' })
   public onBackground = false;
 
   @state()
diff --git a/packages/pharos/tokens/components/button.json b/packages/pharos/tokens/components/button.json
index c7133668b..84e975117 100644
--- a/packages/pharos/tokens/components/button.json
+++ b/packages/pharos/tokens/components/button.json
@@ -76,7 +76,7 @@
           }
         }
       },
-      "on-background": {
+      "is-on-background": {
         "primary": {
           "background": {
             "base": { "value": "{color.interactive.primary.value}" },