Global: update onBackground to isOnBackground (#578)

* feat(global): update onBackground attribute to isOnBackground * feat(global): update tokens import for pharos-site/.../color * feat(global): revert pharos-site onBackground changes * feat(global): remove .js on token import * feat(global): update on-background to is-on-background * feat(global): remove is-on-background from pharos-site * feat(global): change onBackground to isOnBackground * fix(global): change is-on-background to on-background in tokens
ithaka · Nov 29, 2023 · 52006f3 · 52006f3
1 parent 75c2382
commit 52006f3
Show file tree

Hide file tree

Showing 47 changed files with 272 additions and 227 deletions.
diff --git a/.changeset/light-paws-listen.md b/.changeset/light-paws-listen.md
@@ -0,0 +1,7 @@
+---
+'@ithaka/pharos': patch
+'@ithaka/pharos-site': patch
+'@ithaka/pharos-cli': patch
+---
+
+Update onBackground prop to isOnBackground
diff --git a/packages/pharos/src/components/base/form-element.scss b/packages/pharos/src/components/base/form-element.scss
@@ -51,7 +51,7 @@ $groupable-elements: radio-element checkbox-element;
     @include mixins.hidden;
   }
 
-  :host([on-background]) label[for='#{$element}'] {
+  :host([is-on-background]) label[for='#{$element}'] {
     color: var(--pharos-color-text-white);
   }
 

diff --git a/packages/pharos/src/components/button/PharosButton.react.stories.jsx b/packages/pharos/src/components/button/PharosButton.react.stories.jsx
@@ -47,7 +47,7 @@ export const Base = {
       hreflang={args.hreflang}
       label={args.label}
       large={args.large}
-      onBackground={args.onBackground}
+      isOnBackground={args.isOnBackground}
       ping={args.ping}
       pressed={args.pressed}
       target={args.target}
@@ -104,16 +104,16 @@ export const Variants = {
           gridGap: '1.5rem',
         }}
       >
-        <PharosButton name="primary-on-background" onBackground>
+        <PharosButton name="primary-is-on-background" isOnBackground>
           Primary
         </PharosButton>
-        <PharosButton name="secondary-on-background" variant="secondary" onBackground>
+        <PharosButton name="secondary-is-on-background" variant="secondary" isOnBackground>
           Secondary
         </PharosButton>
-        <PharosButton name="subtle-on-background" variant="subtle" onBackground>
+        <PharosButton name="subtle-is-on-background" variant="subtle" isOnBackground>
           Subtle
         </PharosButton>
-        <PharosButton name="overlay-on-background" variant="overlay" onBackground>
+        <PharosButton name="overlay-is-on-background" variant="overlay" isOnBackground>
           Overlay
         </PharosButton>
       </div>
@@ -166,16 +166,21 @@ export const Large = {
           gridGap: '1.5rem',
         }}
       >
-        <PharosButton name="large-primary-on-background" large onBackground>
+        <PharosButton name="large-primary-is-on-background" large isOnBackground>
           Primary
         </PharosButton>
-        <PharosButton name="large-secondary-on-background" variant="secondary" large onBackground>
+        <PharosButton
+          name="large-secondary-is-on-background"
+          variant="secondary"
+          large
+          isOnBackground
+        >
           Secondary
         </PharosButton>
-        <PharosButton name="large-subtle-on-background" variant="subtle" large onBackground>
+        <PharosButton name="large-subtle-is-on-background" variant="subtle" large isOnBackground>
           Subtle
         </PharosButton>
-        <PharosButton name="large-overlay-on-background" variant="overlay" large onBackground>
+        <PharosButton name="large-overlay-is-on-background" variant="overlay" large isOnBackground>
           Overlay
         </PharosButton>
       </div>
@@ -227,17 +232,21 @@ export const WithIcons = {
           gridGap: '1.5rem',
         }}
       >
-        <PharosButton name="primary-icon-left-on-background" iconLeft="download" onBackground>
+        <PharosButton name="primary-icon-left-is-on-background" iconLeft="download" isOnBackground>
           Icon left
         </PharosButton>
-        <PharosButton name="primary-icon-right-on-background" iconRight="chevron-down" onBackground>
+        <PharosButton
+          name="primary-icon-right-is-on-background"
+          iconRight="chevron-down"
+          isOnBackground
+        >
           Icon right
         </PharosButton>
         <PharosButton
-          name="primary-icon-both-on-background"
+          name="primary-icon-both-is-on-background"
           iconRight="chevron-down"
           iconLeft="view-gallery"
-          onBackground
+          isOnBackground
         >
           Icon both
         </PharosButton>

diff --git a/packages/pharos/src/components/button/pharos-button.scss b/packages/pharos/src/components/button/pharos-button.scss
@@ -90,23 +90,23 @@
   );
 }
 
-:host([on-background][disabled]) #button-element {
+:host([is-on-background][disabled]) #button-element {
   @include mixins.button-color(
     $color: var(--pharos-button-color-on-background-primary-text-disabled),
     $background-color: var(--pharos-button-color-on-background-primary-background-disabled),
     $border-color: var(--pharos-button-color-on-background-primary-border-disabled)
   );
 }
 
-:host([on-background][variant='secondary']:not([disabled])) #button-element {
+:host([is-on-background][variant='secondary']:not([disabled])) #button-element {
   @include mixins.button-color(
     $color: var(--pharos-button-color-on-background-secondary-text-base),
     $background-color: var(--pharos-button-color-on-background-secondary-background-base),
     $border-color: var(--pharos-button-color-on-background-secondary-border-base)
   );
 }
 
-:host([on-background][variant='subtle']:not([disabled])) #button-element {
+:host([is-on-background][variant='subtle']:not([disabled])) #button-element {
   @include mixins.button-color(
     $color: var(--pharos-button-color-on-background-subtle-text-base),
     $background-color: var(--pharos-button-color-on-background-subtle-background-base),
@@ -142,19 +142,19 @@
   padding: var(--pharos-button-padding-condensed);
 }
 
-:host([on-background][variant='primary']:not([disabled])) #button-element:hover,
-:host([on-background][variant='primary']:not([disabled])) #button-element:active,
-:host([on-background][variant='secondary']:not([disabled])) #button-element:hover,
-:host([on-background][variant='secondary']:not([disabled])) #button-element:active {
+:host([is-on-background][variant='primary']:not([disabled])) #button-element:hover,
+:host([is-on-background][variant='primary']:not([disabled])) #button-element:active,
+:host([is-on-background][variant='secondary']:not([disabled])) #button-element:hover,
+:host([is-on-background][variant='secondary']:not([disabled])) #button-element:active {
   @include mixins.button-color(
     $color: var(--pharos-button-color-on-background-primary-text-hover),
     $background-color: var(--pharos-button-color-on-background-primary-background-hover),
     $border-color: var(--pharos-button-color-on-background-primary-border-hover)
   );
 }
 
-:host([on-background][variant='subtle']:not([disabled])) #button-element:hover,
-:host([on-background][variant='subtle']:not([disabled])) #button-element:active {
+:host([is-on-background][variant='subtle']:not([disabled])) #button-element:hover,
+:host([is-on-background][variant='subtle']:not([disabled])) #button-element:active {
   @include mixins.button-color(
     $color: var(--pharos-button-color-on-background-subtle-text-hover),
     $background-color: var(--pharos-button-color-on-background-subtle-background-hover),

diff --git a/packages/pharos/src/components/button/pharos-button.test.ts b/packages/pharos/src/components/button/pharos-button.test.ts
@@ -60,7 +60,7 @@ describe('pharos-button', () => {
       parentNode.style.backgroundColor = PharosColorBlack;
 
       component = await fixture(
-        html`<test-pharos-button on-background>I am a button</test-pharos-button>`,
+        html`<test-pharos-button is-on-background>I am a button</test-pharos-button>`,
         {
           parentNode,
         }
@@ -73,7 +73,7 @@ describe('pharos-button', () => {
       parentNode.style.backgroundColor = PharosColorBlack;
 
       component = await fixture(
-        html`<test-pharos-button variant="secondary" on-background
+        html`<test-pharos-button variant="secondary" is-on-background
           >I am a button</test-pharos-button
         >`,
         {
@@ -88,7 +88,9 @@ describe('pharos-button', () => {
       parentNode.style.backgroundColor = PharosColorBlack;
 
       component = await fixture(
-        html`<test-pharos-button variant="subtle" on-background>I am a button</test-pharos-button>`,
+        html`<test-pharos-button variant="subtle" is-on-background
+          >I am a button</test-pharos-button
+        >`,
         {
           parentNode,
         }
@@ -101,7 +103,7 @@ describe('pharos-button', () => {
       parentNode.style.backgroundColor = PharosColorBlack;
 
       component = await fixture(
-        html`<test-pharos-button variant="overlay" on-background
+        html`<test-pharos-button variant="overlay" is-on-background
           >I am a button</test-pharos-button
         >`,
         {

diff --git a/packages/pharos/src/components/button/pharos-button.ts b/packages/pharos/src/components/button/pharos-button.ts
@@ -99,10 +99,10 @@ export class PharosButton extends ScopedRegistryMixin(FocusMixin(AnchorElement))
 
   /**
    * Indicates the button is on a AA compliant background.
-   * @attr on-background
+   * @attr is-on-background
    */
-  @property({ type: Boolean, reflect: true, attribute: 'on-background' })
-  public onBackground = false;
+  @property({ type: Boolean, reflect: true, attribute: 'is-on-background' })
+  public isOnBackground = false;
 
   /**
    * Indicates the button has more padding.

diff --git a/packages/pharos/src/components/button/pharos-button.wc.stories.jsx b/packages/pharos/src/components/button/pharos-button.wc.stories.jsx
@@ -32,7 +32,7 @@ export const Base = {
         hreflang=${ifDefined(args.hreflang)}
         label=${ifDefined(args.label)}
         ?large=${ifDefined(args.large)}
-        ?on-background=${ifDefined(args.onBackground)}
+        ?is-on-background=${ifDefined(args.isOnBackground)}
         ping=${ifDefined(args.ping)}
         pressed=${ifDefined(args.pressed)}
         target=${ifDefined(args.target)}
@@ -75,16 +75,22 @@ export const Variants = {
           >
         </div>
         <div style="background-color: #000000; padding: 1rem; display: grid; grid-gap: 1.5rem;">
-          <storybook-pharos-button name="primary-on-background" on-background
+          <storybook-pharos-button name="primary-is-on-background" is-on-background
             >Primary</storybook-pharos-button
           >
-          <storybook-pharos-button name="secondary-on-background" variant="secondary" on-background
+          <storybook-pharos-button
+            name="secondary-is-on-background"
+            variant="secondary"
+            is-on-background
             >Secondary</storybook-pharos-button
           >
-          <storybook-pharos-button name="subtle-on-background" variant="subtle" on-background
+          <storybook-pharos-button name="subtle-is-on-background" variant="subtle" is-on-background
             >Subtle</storybook-pharos-button
           >
-          <storybook-pharos-button name="overlay-on-background" variant="overlay" on-background
+          <storybook-pharos-button
+            name="overlay-is-on-background"
+            variant="overlay"
+            is-on-background
             >Overlay</storybook-pharos-button
           >
         </div>
@@ -127,24 +133,24 @@ export const Large = {
           </storybook-pharos-button>
         </div>
         <div style="background-color: #000000; padding: 1rem; display: grid; grid-gap: 1.5rem;">
-          <storybook-pharos-button name="large-primary-on-background" large on-background
+          <storybook-pharos-button name="large-primary-is-on-background" large is-on-background
             >Primary
           </storybook-pharos-button>
           <storybook-pharos-button
-            name="large-secondary-on-background"
+            name="large-secondary-is-on-background"
             variant="secondary"
             large
-            on-background
+            is-on-background
             >Secondary
           </storybook-pharos-button>
           <storybook-pharos-button
-            name="large-subtle-on-background"
+            name="large-subtle-is-on-background"
             variant="subtle"
             large
-            on-background
+            is-on-background
             >Subtle
           </storybook-pharos-button>
-          <storybook-pharos-button name="large-overlay" variant="overlay" large on-background
+          <storybook-pharos-button name="large-overlay" variant="overlay" large is-on-background
             >Overlay
           </storybook-pharos-button>
         </div>
@@ -190,22 +196,22 @@ export const WithIcons = {
         </div>
         <div style="background-color: #000000; padding: 1rem; display: grid; grid-gap: 1.5rem;">
           <storybook-pharos-button
-            name="primary-icon-left-on-background"
+            name="primary-icon-left-is-on-background"
             icon-left="download"
-            on-background
+            is-on-background
             >Icon left
           </storybook-pharos-button>
           <storybook-pharos-button
-            name="primary-icon-right-on-background"
+            name="primary-icon-right-is-on-background"
             icon-right="chevron-down"
-            on-background
+            is-on-background
             >Icon right
           </storybook-pharos-button>
           <storybook-pharos-button
-            name="primary-icon-both-on-background"
+            name="primary-icon-both-is-on-background"
             icon-right="chevron-down"
             icon-left="view-gallery"
-            on-background
+            is-on-background
             >Icon both
           </storybook-pharos-button>
         </div>

diff --git a/packages/pharos/src/components/button/storyArgs.ts b/packages/pharos/src/components/button/storyArgs.ts
@@ -36,7 +36,7 @@ export const defaultArgs = {
   fullWidth: false,
   iconCondensed: false,
   large: false,
-  onBackground: false,
+  isOnBackground: false,
   pressed: undefined,
   type: 'button',
   variant: 'primary',

diff --git a/packages/pharos/src/components/checkbox/PharosCheckbox.react.stories.jsx b/packages/pharos/src/components/checkbox/PharosCheckbox.react.stories.jsx
@@ -118,22 +118,22 @@ export const Validity = {
   },
 };
 
-export const OnBackground = {
+export const isOnBackground = {
   name: 'On background',
   render: () => (
     <div>
-      <div className="checkbox-example__container--on-background">
-        <PharosCheckbox name="on-background" onBackground>
+      <div className="checkbox-example__container--is-on-background">
+        <PharosCheckbox name="is-on-background" isOnBackground>
           <span slot="label">Unchecked</span>
         </PharosCheckbox>
       </div>
-      <div className="checkbox-example__container--on-background">
-        <PharosCheckbox name="on-background" onBackground checked>
+      <div className="checkbox-example__container--is-on-background">
+        <PharosCheckbox name="is-on-background" isOnBackground checked>
           <span slot="label">Checked</span>
         </PharosCheckbox>
       </div>
-      <div className="checkbox-example__container--on-background">
-        <PharosCheckbox name="indeterminate" onBackground indeterminate>
+      <div className="checkbox-example__container--is-on-background">
+        <PharosCheckbox name="indeterminate" isOnBackground indeterminate>
           <span slot="label">Indeterminate</span>
         </PharosCheckbox>
       </div>