Skip to content

Commit

Permalink
Improve color contrast on CircularSpinner (#2298)
Browse files Browse the repository at this point in the history 
## Summary:
Update `CircularSpinner` color to `offBlack50` for a higher contrast. This aligns with the [Figma component](https://www.figma.com/design/pmQkmkD4FwfIjEPVVtFn9Q/Add-our-color-tokens-in-Wonder-Blocks-to-Figma?node-id=1654-25&t=yMni3FwChqE5x2w1-4) as well!

Issue: WB-1743

## Test plan:
1. Confirm the CircularSpinner is using offBlack50 (`?path=/story/packages-progressspinner-circularspinner--default`)

<img width="1703" alt="Screenshot 2024-08-22 at 1 25 19 PM" src="https://github.com/user-attachments/assets/05aad430-2b54-4627-bfa0-f098bc029b68">

Author: beaesguerra

Reviewers: jandrade

Required Reviewers:

Approved By: jandrade

Checks: ✅ codecov/project, ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️  Publish npm snapshot, ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot

Pull Request URL: #2298
  • Loading branch information
@beaesguerra
beaesguerra authored Aug 26, 2024
1 parent bc00eb4 commit 688c65d
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 5 deletions.
5 changes: 5 additions & 0 deletions .changeset/neat-shoes-approve.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@khanacademy/wonder-blocks-progress-spinner": patch
---

Update CircularSpinner color to offBlack50 for improved color contrast for accessibility
8 changes: 4 additions & 4 deletions packages/wonder-blocks-button/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2188,7 +2188,7 @@ exports[`ButtonCore kind:secondary size:medium spinner:true 1`] = `
class=""
d="M10.598.943c-.093-.449-.362-.748-.732-.875a1.314 1.314 0 0 0-.723-.033C3.83 1.417 0 6.317 0 11.864 0 18.538 5.398 24 12 24c6.598 0 12-5.471 12-12.16a1.333 1.333 0 0 0-.154-.548c-.193-.368-.544-.606-1.023-.606-.472 0-.825.229-1.035.585-.117.2-.169.39-.189.582-.124 5.472-4.294 9.73-9.599 9.73-5.349 0-9.599-4.3-9.599-9.72 0-4.46 3.036-8.299 7.28-9.444.127-.036.291-.107.458-.232.373-.28.57-.711.46-1.244z"
fill-rule="nonzero"
style="transform-origin: 50% 50%; animation-name: [object Object]; animation-duration: 1.1s; animation-iteration-count: infinite; animation-timing-function: linear; fill: rgba(33,36,44,0.16);"
style="transform-origin: 50% 50%; animation-name: [object Object]; animation-duration: 1.1s; animation-iteration-count: infinite; animation-timing-function: linear; fill: rgba(33,36,44,0.50);"
/>
</svg>
</div>
Expand Down Expand Up @@ -2228,7 +2228,7 @@ exports[`ButtonCore kind:secondary size:small spinner:true 1`] = `
class=""
d="M7.237.741C7.165.393 6.95.154 6.656.053A1.01 1.01 0 0 0 6.18.01c-.053.009-.053.009-.087.017C2.553.949 0 4.214 0 7.91 0 12.36 3.598 16 8 16c4.4 0 8-3.647 8-8.112a1.02 1.02 0 0 0-.118-.423.877.877 0 0 0-.808-.48.909.909 0 0 0-.81.46c-.09.151-.13.296-.146.455-.08 3.493-2.737 6.207-6.118 6.207-3.41 0-6.118-2.74-6.118-6.196 0-2.843 1.936-5.291 4.644-6.022.1-.028.224-.082.352-.177a.928.928 0 0 0 .36-.97z"
fill-rule="nonzero"
style="transform-origin: 50% 50%; animation-name: [object Object]; animation-duration: 1.1s; animation-iteration-count: infinite; animation-timing-function: linear; fill: rgba(33,36,44,0.16);"
style="transform-origin: 50% 50%; animation-name: [object Object]; animation-duration: 1.1s; animation-iteration-count: infinite; animation-timing-function: linear; fill: rgba(33,36,44,0.50);"
/>
</svg>
</div>
Expand Down Expand Up @@ -3276,7 +3276,7 @@ exports[`ButtonCore kind:tertiary size:medium spinner:true 1`] = `
class=""
d="M10.598.943c-.093-.449-.362-.748-.732-.875a1.314 1.314 0 0 0-.723-.033C3.83 1.417 0 6.317 0 11.864 0 18.538 5.398 24 12 24c6.598 0 12-5.471 12-12.16a1.333 1.333 0 0 0-.154-.548c-.193-.368-.544-.606-1.023-.606-.472 0-.825.229-1.035.585-.117.2-.169.39-.189.582-.124 5.472-4.294 9.73-9.599 9.73-5.349 0-9.599-4.3-9.599-9.72 0-4.46 3.036-8.299 7.28-9.444.127-.036.291-.107.458-.232.373-.28.57-.711.46-1.244z"
fill-rule="nonzero"
style="transform-origin: 50% 50%; animation-name: [object Object]; animation-duration: 1.1s; animation-iteration-count: infinite; animation-timing-function: linear; fill: rgba(33,36,44,0.16);"
style="transform-origin: 50% 50%; animation-name: [object Object]; animation-duration: 1.1s; animation-iteration-count: infinite; animation-timing-function: linear; fill: rgba(33,36,44,0.50);"
/>
</svg>
</div>
Expand Down Expand Up @@ -3316,7 +3316,7 @@ exports[`ButtonCore kind:tertiary size:small spinner:true 1`] = `
class=""
d="M7.237.741C7.165.393 6.95.154 6.656.053A1.01 1.01 0 0 0 6.18.01c-.053.009-.053.009-.087.017C2.553.949 0 4.214 0 7.91 0 12.36 3.598 16 8 16c4.4 0 8-3.647 8-8.112a1.02 1.02 0 0 0-.118-.423.877.877 0 0 0-.808-.48.909.909 0 0 0-.81.46c-.09.151-.13.296-.146.455-.08 3.493-2.737 6.207-6.118 6.207-3.41 0-6.118-2.74-6.118-6.196 0-2.843 1.936-5.291 4.644-6.022.1-.028.224-.082.352-.177a.928.928 0 0 0 .36-.97z"
fill-rule="nonzero"
style="transform-origin: 50% 50%; animation-name: [object Object]; animation-duration: 1.1s; animation-iteration-count: infinite; animation-timing-function: linear; fill: rgba(33,36,44,0.16);"
style="transform-origin: 50% 50%; animation-name: [object Object]; animation-duration: 1.1s; animation-iteration-count: infinite; animation-timing-function: linear; fill: rgba(33,36,44,0.50);"
/>
</svg>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/wonder-blocks-progress-spinner/src/components/circular-spinner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const paths = {

const colors = {
light: color.white,
dark: color.offBlack16,
dark: color.offBlack50,
} as const;

const StyledPath = addStyle("path");
Expand Down

0 comments on commit 688c65d

Please sign in to comment.