feat(global): update on-background to is-on-background

ithaka · Oct 25, 2023 · e70e23b · e70e23b
1 parent 7735b72
commit e70e23b
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 15 deletions.
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
@@ -85,42 +85,42 @@
   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),
     $border-color: var(--pharos-color-marble-gray-20)
   );
 }
 
-: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),
     $border-color: var(--pharos-color-text-disabled)
   );
 }
 
-: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),
     $border-color: var(--pharos-color-marble-gray-20)
   );
 }
 
-: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
@@ -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
@@ -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
@@ -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
@@ -76,7 +76,7 @@
           }
         }
       },
-      "on-background": {
+      "is-on-background": {
         "primary": {
           "background": {
             "base": { "value": "{color.interactive.primary.value}" },