primer / primitives

Color, typography, and spacing primitives in json.
https://primer.style/primitives
MIT License
311 stars 43 forks source link

Update `skeleton` pattern to work on muted bg #1053

Closed langermank closed 2 months ago

langermank commented 2 months ago

Updating the value so that its visible on muted and overlay backgrounds

changeset-bot[bot] commented 2 months ago

🦋 Changeset detected

Latest commit: d8f3b8cf5c0de88cf61d6f57af09f2de4805b50d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package | Name | Type | | ------------------ | ----- | | @primer/primitives | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions[bot] commented 2 months ago

Design Token Contrast Check

light: ✅ all checks passed

Show results table for theme: light | contrastPair | pass | contrastRatio | minimumContrastRatio | | -------------------------------------------------------------------------------------- | ---- | ------------- | -------------------- | | fgColor-default vs. bgColor-default | ✅ | 15.79:1 | 4.5:1 | | fgColor-muted vs. bgColor-default | ✅ | 6.11:1 | 4.5:1 | | fgColor-default vs. bgColor-muted | ✅ | 14.83:1 | 4.5:1 | | fgColor-muted vs. bgColor-muted | ✅ | 5.74:1 | 4.5:1 | | fgColor-default vs. bgColor-inset | ✅ | 14.83:1 | 4.5:1 | | fgColor-muted vs. bgColor-inset | ✅ | 5.74:1 | 4.5:1 | | control-fgColor-rest vs. bgColor-default | ✅ | 14.63:1 | 4.5:1 | | control-fgColor-rest vs. bgColor-muted | ✅ | 13.74:1 | 4.5:1 | | control-fgColor-rest vs. bgColor-inset | ✅ | 13.74:1 | 4.5:1 | | control-fgColor-rest vs. control-bgColor-rest | ✅ | 13.74:1 | 4.5:1 | | control-fgColor-placeholder vs. bgColor-default | ✅ | 6.11:1 | 4.5:1 | | control-fgColor-rest vs. control-bgColor-active | ✅ | 12.1:1 | 4.5:1 | | control-fgColor-rest vs. control-bgColor-hover | ✅ | 13.02:1 | 4.5:1 | | control-fgColor-rest vs. control-bgColor-selected | ✅ | 13.74:1 | 4.5:1 | | button-invisible-fgColor-rest vs. bgColor-muted | ✅ | 13.74:1 | 4.5:1 | | button-invisible-fgColor-hover vs. button-invisible-bgColor-hover on bgColor-default | ✅ | 13.16:1 | 4.5:1 | | button-invisible-fgColor-hover vs. button-invisible-bgColor-hover on bgColor-muted | ✅ | 12.45:1 | 4.5:1 | | button-invisible-iconColor-rest vs. bgColor-muted | ✅ | 5.74:1 | 4.5:1 | | button-invisible-iconColor-hover vs. button-invisible-bgColor-hover on bgColor-default | ✅ | 5.5:1 | 4.5:1 | | button-invisible-iconColor-hover vs. button-invisible-bgColor-hover on bgColor-muted | ✅ | 5.2:1 | 4.5:1 | | button-danger-fgColor-rest vs. button-danger-bgColor-rest | ✅ | 4.92:1 | 4.5:1 | | button-danger-fgColor-hover vs. button-danger-bgColor-hover | ✅ | 7.86:1 | 4.5:1 | | button-danger-fgColor-active vs. button-danger-bgColor-active | ✅ | 9.75:1 | 4.5:1 | | button-danger-iconColor-rest vs. button-danger-bgColor-rest | ✅ | 4.92:1 | 4.5:1 | | button-danger-iconColor-hover vs. button-danger-bgColor-hover | ✅ | 7.86:1 | 4.5:1 | | button-primary-fgColor-rest vs. button-primary-bgColor-rest | ✅ | 4.51:1 | 4.5:1 | | fgColor-default vs. bgColor-neutral-muted on bgColor-default | ✅ | 13.96:1 | 4.5:1 | | fgColor-default vs. bgColor-neutral-muted on bgColor-muted | ✅ | 13.2:1 | 4.5:1 | | fgColor-default vs. bgColor-accent-muted | ✅ | 13.88:1 | 4.5:1 | | fgColor-default vs. bgColor-success-muted | ✅ | 14.19:1 | 4.5:1 | | fgColor-default vs. bgColor-open-muted | ✅ | 14.19:1 | 4.5:1 | | fgColor-default vs. bgColor-danger-muted | ✅ | 13.77:1 | 4.5:1 | | fgColor-default vs. bgColor-closed-muted | ✅ | 13.77:1 | 4.5:1 | | fgColor-default vs. bgColor-attention-muted | ✅ | 14.65:1 | 4.5:1 | | fgColor-default vs. bgColor-severe-muted | ✅ | 14.26:1 | 4.5:1 | | fgColor-default vs. bgColor-done-muted | ✅ | 14.21:1 | 4.5:1 | | fgColor-default vs. bgColor-sponsors-muted | ✅ | 14.24:1 | 4.5:1 | | fgColor-neutral vs. bgColor-default | ✅ | 6.11:1 | 4.5:1 | | fgColor-neutral vs. bgColor-muted | ✅ | 5.74:1 | 4.5:1 | | fgColor-neutral vs. bgColor-inset | ✅ | 5.74:1 | 4.5:1 | | fgColor-accent vs. bgColor-default | ✅ | 5.19:1 | 4.5:1 | | fgColor-accent vs. bgColor-muted | ✅ | 4.87:1 | 4.5:1 | | fgColor-accent vs. bgColor-inset | ✅ | 4.87:1 | 4.5:1 | | fgColor-success vs. bgColor-default | ✅ | 5.07:1 | 4.5:1 | | fgColor-success vs. bgColor-muted | ✅ | 4.77:1 | 4.5:1 | | fgColor-success vs. bgColor-inset | ✅ | 4.77:1 | 4.5:1 | | fgColor-open vs. bgColor-default | ✅ | 5.07:1 | 4.5:1 | | fgColor-open vs. bgColor-muted | ✅ | 4.77:1 | 4.5:1 | | fgColor-open vs. bgColor-inset | ✅ | 4.77:1 | 4.5:1 | | fgColor-danger vs. bgColor-default | ✅ | 5.24:1 | 4.5:1 | | fgColor-danger vs. bgColor-muted | ✅ | 4.92:1 | 4.5:1 | | fgColor-danger vs. bgColor-inset | ✅ | 4.92:1 | 4.5:1 | | fgColor-closed vs. bgColor-default | ✅ | 5.24:1 | 4.5:1 | | fgColor-closed vs. bgColor-muted | ✅ | 4.92:1 | 4.5:1 | | fgColor-closed vs. bgColor-inset | ✅ | 4.92:1 | 4.5:1 | | fgColor-attention vs. bgColor-default | ✅ | 4.86:1 | 4.5:1 | | fgColor-attention vs. bgColor-muted | ✅ | 4.57:1 | 4.5:1 | | fgColor-attention vs. bgColor-inset | ✅ | 4.57:1 | 4.5:1 | | fgColor-severe vs. bgColor-default | ✅ | 5.03:1 | 4.5:1 | | fgColor-severe vs. bgColor-muted | ✅ | 4.72:1 | 4.5:1 | | fgColor-severe vs. bgColor-inset | ✅ | 4.72:1 | 4.5:1 | | fgColor-done vs. bgColor-default | ✅ | 5.04:1 | 4.5:1 | | fgColor-done vs. bgColor-muted | ✅ | 4.73:1 | 4.5:1 | | fgColor-done vs. bgColor-inset | ✅ | 4.73:1 | 4.5:1 | | fgColor-upsell vs. bgColor-default | ✅ | 5.04:1 | 4.5:1 | | fgColor-upsell vs. bgColor-muted | ✅ | 4.73:1 | 4.5:1 | | fgColor-upsell vs. bgColor-inset | ✅ | 4.73:1 | 4.5:1 | | fgColor-sponsors vs. bgColor-default | ✅ | 5.04:1 | 4.5:1 | | fgColor-sponsors vs. bgColor-muted | ✅ | 4.73:1 | 4.5:1 | | fgColor-sponsors vs. bgColor-inset | ✅ | 4.73:1 | 4.5:1 | | fgColor-neutral vs. bgColor-neutral-muted on bgColor-default | ✅ | 5.4:1 | 4.5:1 | | fgColor-neutral vs. bgColor-neutral-muted on bgColor-muted | ✅ | 5.1:1 | 4.5:1 | | fgColor-accent vs. bgColor-accent-muted | ✅ | 4.56:1 | 4.5:1 | | fgColor-success vs. bgColor-success-muted | ✅ | 4.56:1 | 4.5:1 | | fgColor-open vs. bgColor-open-muted | ✅ | 4.56:1 | 4.5:1 | | fgColor-danger vs. bgColor-danger-muted | ✅ | 4.57:1 | 4.5:1 | | fgColor-closed vs. bgColor-closed-muted | ✅ | 4.57:1 | 4.5:1 | | fgColor-attention vs. bgColor-attention-muted | ✅ | 4.51:1 | 4.5:1 | | fgColor-severe vs. bgColor-severe-muted | ✅ | 4.54:1 | 4.5:1 | | fgColor-done vs. bgColor-done-muted | ✅ | 4.53:1 | 4.5:1 | | fgColor-upsell vs. bgColor-upsell-muted | ✅ | 4.53:1 | 4.5:1 | | fgColor-sponsors vs. bgColor-sponsors-muted | ✅ | 4.55:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-neutral-emphasis | ✅ | 6.11:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-accent-emphasis | ✅ | 5.19:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-success-emphasis | ✅ | 4.51:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-open-emphasis | ✅ | 4.51:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-danger-emphasis | ✅ | 5.35:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-closed-emphasis | ✅ | 5.35:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-attention-emphasis | ✅ | 4.86:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-severe-emphasis | ✅ | 5.03:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-done-emphasis | ✅ | 5.04:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-upsell-emphasis | ✅ | 5.04:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-sponsors-emphasis | ✅ | 5.04:1 | 4.5:1 | | control-borderColor-emphasis vs. bgColor-default | ✅ | 3.45:1 | 3:1 | | control-borderColor-emphasis vs. bgColor-muted | ✅ | 3.24:1 | 3:1 | | display-gray-fgColor vs. display-gray-bgColor-muted | ✅ | 4.98:1 | 4.5:1 | | display-indigo-fgColor vs. display-indigo-bgColor-muted | ✅ | 5.06:1 | 4.5:1 | | display-blue-fgColor vs. display-blue-bgColor-muted | ✅ | 5.02:1 | 4.5:1 | | display-cyan-fgColor vs. display-cyan-bgColor-muted | ✅ | 5.2:1 | 4.5:1 | | display-teal-fgColor vs. display-teal-bgColor-muted | ✅ | 5.05:1 | 4.5:1 | | display-pine-fgColor vs. display-pine-bgColor-muted | ✅ | 5.18:1 | 4.5:1 | | display-green-fgColor vs. display-green-bgColor-muted | ✅ | 5.18:1 | 4.5:1 | | display-lime-fgColor vs. display-lime-bgColor-muted | ✅ | 5.12:1 | 4.5:1 | | display-olive-fgColor vs. display-olive-bgColor-muted | ✅ | 5.2:1 | 4.5:1 | | display-lemon-fgColor vs. display-lemon-bgColor-muted | ✅ | 5.09:1 | 4.5:1 | | display-yellow-fgColor vs. display-yellow-bgColor-muted | ✅ | 5.3:1 | 4.5:1 | | display-orange-fgColor vs. display-orange-bgColor-muted | ✅ | 5.14:1 | 4.5:1 | | display-red-fgColor vs. display-red-bgColor-muted | ✅ | 4.96:1 | 4.5:1 | | display-coral-fgColor vs. display-coral-bgColor-muted | ✅ | 5.01:1 | 4.5:1 | | display-pink-fgColor vs. display-pink-bgColor-muted | ✅ | 4.99:1 | 4.5:1 | | display-plum-fgColor vs. display-plum-bgColor-muted | ✅ | 5.01:1 | 4.5:1 | | display-purple-fgColor vs. display-purple-bgColor-muted | ✅ | 4.93:1 | 4.5:1 | | display-brown-fgColor vs. display-brown-bgColor-muted | ✅ | 5.03:1 | 4.5:1 | | display-auburn-fgColor vs. display-auburn-bgColor-muted | ✅ | 5.03:1 | 4.5:1 | | fgColor-onEmphasis vs. display-gray-bgColor-emphasis | ✅ | 4.96:1 | 4.5:1 | | fgColor-onEmphasis vs. display-indigo-bgColor-emphasis | ✅ | 4.88:1 | 4.5:1 | | fgColor-onEmphasis vs. display-blue-bgColor-emphasis | ✅ | 4.93:1 | 4.5:1 | | fgColor-onEmphasis vs. display-cyan-bgColor-emphasis | ✅ | 4.92:1 | 4.5:1 | | fgColor-onEmphasis vs. display-teal-bgColor-emphasis | ✅ | 4.85:1 | 4.5:1 | | fgColor-onEmphasis vs. display-pine-bgColor-emphasis | ✅ | 5.06:1 | 4.5:1 | | fgColor-onEmphasis vs. display-green-bgColor-emphasis | ✅ | 4.85:1 | 4.5:1 | | fgColor-onEmphasis vs. display-lime-bgColor-emphasis | ✅ | 5.03:1 | 4.5:1 | | fgColor-onEmphasis vs. display-olive-bgColor-emphasis | ✅ | 5.03:1 | 4.5:1 | | fgColor-onEmphasis vs. display-lemon-bgColor-emphasis | ✅ | 4.94:1 | 4.5:1 | | fgColor-onEmphasis vs. display-yellow-bgColor-emphasis | ✅ | 4.86:1 | 4.5:1 | | fgColor-onEmphasis vs. display-orange-bgColor-emphasis | ✅ | 5:1 | 4.5:1 | | fgColor-onEmphasis vs. display-red-bgColor-emphasis | ✅ | 4.98:1 | 4.5:1 | | fgColor-onEmphasis vs. display-coral-bgColor-emphasis | ✅ | 4.86:1 | 4.5:1 | | fgColor-onEmphasis vs. display-pink-bgColor-emphasis | ✅ | 4.85:1 | 4.5:1 | | fgColor-onEmphasis vs. display-plum-bgColor-emphasis | ✅ | 4.93:1 | 4.5:1 | | fgColor-onEmphasis vs. display-purple-bgColor-emphasis | ✅ | 4.88:1 | 4.5:1 | | fgColor-onEmphasis vs. display-brown-bgColor-emphasis | ✅ | 4.89:1 | 4.5:1 | | fgColor-onEmphasis vs. display-auburn-bgColor-emphasis | ✅ | 4.88:1 | 4.5:1 | | bgColor-default vs. display-gray-borderColor-emphasis | ✅ | 4.96:1 | 3:1 | | bgColor-default vs. display-indigo-borderColor-emphasis | ✅ | 4.88:1 | 3:1 | | bgColor-default vs. display-blue-borderColor-emphasis | ✅ | 4.93:1 | 3:1 | | bgColor-default vs. display-cyan-borderColor-emphasis | ✅ | 4.92:1 | 3:1 | | bgColor-default vs. display-teal-borderColor-emphasis | ✅ | 4.85:1 | 3:1 | | bgColor-default vs. display-pine-borderColor-emphasis | ✅ | 5.06:1 | 3:1 | | bgColor-default vs. display-green-borderColor-emphasis | ✅ | 4.85:1 | 3:1 | | bgColor-default vs. display-lime-borderColor-emphasis | ✅ | 5.03:1 | 3:1 | | bgColor-default vs. display-olive-borderColor-emphasis | ✅ | 5.03:1 | 3:1 | | bgColor-default vs. display-lemon-borderColor-emphasis | ✅ | 4.94:1 | 3:1 | | bgColor-default vs. display-yellow-borderColor-emphasis | ✅ | 4.86:1 | 3:1 | | bgColor-default vs. display-orange-borderColor-emphasis | ✅ | 5:1 | 3:1 | | bgColor-default vs. display-red-borderColor-emphasis | ✅ | 4.98:1 | 3:1 | | bgColor-default vs. display-coral-borderColor-emphasis | ✅ | 4.86:1 | 3:1 | | bgColor-default vs. display-pink-borderColor-emphasis | ✅ | 4.85:1 | 3:1 | | bgColor-default vs. display-plum-borderColor-emphasis | ✅ | 4.93:1 | 3:1 | | bgColor-default vs. display-purple-borderColor-emphasis | ✅ | 4.88:1 | 3:1 | | bgColor-default vs. display-brown-borderColor-emphasis | ✅ | 4.89:1 | 3:1 | | bgColor-default vs. display-auburn-borderColor-emphasis | ✅ | 4.88:1 | 3:1 | | bgColor-muted vs. display-gray-borderColor-emphasis | ✅ | 4.66:1 | 3:1 | | bgColor-muted vs. display-indigo-borderColor-emphasis | ✅ | 4.58:1 | 3:1 | | bgColor-muted vs. display-blue-borderColor-emphasis | ✅ | 4.63:1 | 3:1 | | bgColor-muted vs. display-cyan-borderColor-emphasis | ✅ | 4.62:1 | 3:1 | | bgColor-muted vs. display-teal-borderColor-emphasis | ✅ | 4.55:1 | 3:1 | | bgColor-muted vs. display-pine-borderColor-emphasis | ✅ | 4.76:1 | 3:1 | | bgColor-muted vs. display-green-borderColor-emphasis | ✅ | 4.56:1 | 3:1 | | bgColor-muted vs. display-lime-borderColor-emphasis | ✅ | 4.72:1 | 3:1 | | bgColor-muted vs. display-olive-borderColor-emphasis | ✅ | 4.72:1 | 3:1 | | bgColor-muted vs. display-lemon-borderColor-emphasis | ✅ | 4.64:1 | 3:1 | | bgColor-muted vs. display-yellow-borderColor-emphasis | ✅ | 4.56:1 | 3:1 | | bgColor-muted vs. display-orange-borderColor-emphasis | ✅ | 4.7:1 | 3:1 | | bgColor-muted vs. display-red-borderColor-emphasis | ✅ | 4.67:1 | 3:1 | | bgColor-muted vs. display-coral-borderColor-emphasis | ✅ | 4.56:1 | 3:1 | | bgColor-muted vs. display-pink-borderColor-emphasis | ✅ | 4.56:1 | 3:1 | | bgColor-muted vs. display-plum-borderColor-emphasis | ✅ | 4.63:1 | 3:1 | | bgColor-muted vs. display-purple-borderColor-emphasis | ✅ | 4.59:1 | 3:1 | | bgColor-muted vs. display-brown-borderColor-emphasis | ✅ | 4.59:1 | 3:1 | | bgColor-muted vs. display-auburn-borderColor-emphasis | ✅ | 4.58:1 | 3:1 | | display-gray-borderColor-emphasis vs. display-gray-bgColor-muted | ✅ | 4.19:1 | 3:1 | | display-indigo-borderColor-emphasis vs. display-indigo-bgColor-muted | ✅ | 4.05:1 | 3:1 | | display-blue-borderColor-emphasis vs. display-blue-bgColor-muted | ✅ | 4.14:1 | 3:1 | | display-cyan-borderColor-emphasis vs. display-cyan-bgColor-muted | ✅ | 4.11:1 | 3:1 | | display-teal-borderColor-emphasis vs. display-teal-bgColor-muted | ✅ | 4.09:1 | 3:1 | | display-pine-borderColor-emphasis vs. display-pine-bgColor-muted | ✅ | 4.26:1 | 3:1 | | display-green-borderColor-emphasis vs. display-green-bgColor-muted | ✅ | 4.08:1 | 3:1 | | display-lime-borderColor-emphasis vs. display-lime-bgColor-muted | ✅ | 4.22:1 | 3:1 | | display-olive-borderColor-emphasis vs. display-olive-bgColor-muted | ✅ | 4.26:1 | 3:1 | | display-lemon-borderColor-emphasis vs. display-lemon-bgColor-muted | ✅ | 4.16:1 | 3:1 | | display-yellow-borderColor-emphasis vs. display-yellow-bgColor-muted | ✅ | 4.1:1 | 3:1 | | display-orange-borderColor-emphasis vs. display-orange-bgColor-muted | ✅ | 4.19:1 | 3:1 | | display-red-borderColor-emphasis vs. display-red-bgColor-muted | ✅ | 4.08:1 | 3:1 | | display-coral-borderColor-emphasis vs. display-coral-bgColor-muted | ✅ | 4.04:1 | 3:1 | | display-pink-borderColor-emphasis vs. display-pink-bgColor-muted | ✅ | 4.1:1 | 3:1 | | display-plum-borderColor-emphasis vs. display-plum-bgColor-muted | ✅ | 4.14:1 | 3:1 | | display-purple-borderColor-emphasis vs. display-purple-bgColor-muted | ✅ | 4.04:1 | 3:1 | | display-brown-borderColor-emphasis vs. display-brown-bgColor-muted | ✅ | 4.08:1 | 3:1 | | display-auburn-borderColor-emphasis vs. display-auburn-bgColor-muted | ✅ | 4.09:1 | 3:1 |

dark: ✅ all checks passed

Show results table for theme: dark | contrastPair | pass | contrastRatio | minimumContrastRatio | | -------------------------------------------------------------------------------------- | ---- | ------------- | -------------------- | | fgColor-default vs. bgColor-default | ✅ | 17.38:1 | 4.5:1 | | fgColor-muted vs. bgColor-default | ✅ | 6.49:1 | 4.5:1 | | fgColor-default vs. bgColor-muted | ✅ | 15.9:1 | 4.5:1 | | fgColor-muted vs. bgColor-muted | ✅ | 5.94:1 | 4.5:1 | | fgColor-default vs. bgColor-inset | ✅ | 18.86:1 | 4.5:1 | | fgColor-muted vs. bgColor-inset | ✅ | 7.05:1 | 4.5:1 | | control-fgColor-rest vs. bgColor-default | ✅ | 17.38:1 | 4.5:1 | | control-fgColor-rest vs. bgColor-muted | ✅ | 15.9:1 | 4.5:1 | | control-fgColor-rest vs. bgColor-inset | ✅ | 18.86:1 | 4.5:1 | | control-fgColor-rest vs. control-bgColor-rest | ✅ | 13.67:1 | 4.5:1 | | control-fgColor-placeholder vs. bgColor-default | ✅ | 6.49:1 | 4.5:1 | | control-fgColor-rest vs. control-bgColor-active | ✅ | 12.03:1 | 4.5:1 | | control-fgColor-rest vs. control-bgColor-hover | ✅ | 12.89:1 | 4.5:1 | | control-fgColor-rest vs. control-bgColor-selected | ✅ | 13.67:1 | 4.5:1 | | button-invisible-fgColor-rest vs. bgColor-muted | ✅ | 15.9:1 | 4.5:1 | | button-invisible-fgColor-hover vs. button-invisible-bgColor-hover on bgColor-default | ✅ | 14.48:1 | 4.5:1 | | button-invisible-fgColor-hover vs. button-invisible-bgColor-hover on bgColor-muted | ✅ | 13.09:1 | 4.5:1 | | button-invisible-iconColor-rest vs. bgColor-muted | ✅ | 5.94:1 | 4.5:1 | | button-invisible-iconColor-hover vs. button-invisible-bgColor-hover on bgColor-default | ✅ | 5.41:1 | 4.5:1 | | button-invisible-iconColor-hover vs. button-invisible-bgColor-hover on bgColor-muted | ✅ | 4.89:1 | 4.5:1 | | button-danger-fgColor-rest vs. button-danger-bgColor-rest | ✅ | 4.81:1 | 4.5:1 | | button-danger-fgColor-hover vs. button-danger-bgColor-hover | ✅ | 6.45:1 | 4.5:1 | | button-danger-fgColor-active vs. button-danger-bgColor-active | ✅ | 4.95:1 | 4.5:1 | | button-danger-iconColor-rest vs. button-danger-bgColor-rest | ✅ | 4.81:1 | 4.5:1 | | button-danger-iconColor-hover vs. button-danger-bgColor-hover | ✅ | 6.45:1 | 4.5:1 | | button-primary-fgColor-rest vs. button-primary-bgColor-rest | ✅ | 4.63:1 | 4.5:1 | | fgColor-default vs. bgColor-neutral-muted on bgColor-default | ✅ | 14.48:1 | 4.5:1 | | fgColor-default vs. bgColor-neutral-muted on bgColor-muted | ✅ | 13.09:1 | 4.5:1 | | fgColor-default vs. bgColor-accent-muted on bgColor-default | ✅ | 15.57:1 | 4.5:1 | | fgColor-default vs. bgColor-accent-muted on bgColor-muted | ✅ | 14:1 | 4.5:1 | | fgColor-default vs. bgColor-success-muted on bgColor-default | ✅ | 14.59:1 | 4.5:1 | | fgColor-default vs. bgColor-success-muted on bgColor-muted | ✅ | 13.04:1 | 4.5:1 | | fgColor-default vs. bgColor-open-muted on bgColor-default | ✅ | 14.59:1 | 4.5:1 | | fgColor-default vs. bgColor-open-muted on bgColor-muted | ✅ | 13.04:1 | 4.5:1 | | fgColor-default vs. bgColor-danger-muted on bgColor-default | ✅ | 15.73:1 | 4.5:1 | | fgColor-default vs. bgColor-danger-muted on bgColor-muted | ✅ | 14.24:1 | 4.5:1 | | fgColor-default vs. bgColor-closed-muted on bgColor-default | ✅ | 15.73:1 | 4.5:1 | | fgColor-default vs. bgColor-closed-muted on bgColor-muted | ✅ | 14.24:1 | 4.5:1 | | fgColor-default vs. bgColor-attention-muted on bgColor-default | ✅ | 14.55:1 | 4.5:1 | | fgColor-default vs. bgColor-attention-muted on bgColor-muted | ✅ | 13.15:1 | 4.5:1 | | fgColor-default vs. bgColor-severe-muted on bgColor-default | ✅ | 15.68:1 | 4.5:1 | | fgColor-default vs. bgColor-severe-muted on bgColor-muted | ✅ | 14.18:1 | 4.5:1 | | fgColor-default vs. bgColor-done-muted on bgColor-default | ✅ | 14.23:1 | 4.5:1 | | fgColor-default vs. bgColor-done-muted on bgColor-muted | ✅ | 12.73:1 | 4.5:1 | | fgColor-default vs. bgColor-sponsors-muted on bgColor-default | ✅ | 15.63:1 | 4.5:1 | | fgColor-default vs. bgColor-sponsors-muted on bgColor-muted | ✅ | 14.12:1 | 4.5:1 | | fgColor-neutral vs. bgColor-default | ✅ | 6.49:1 | 4.5:1 | | fgColor-neutral vs. bgColor-muted | ✅ | 5.94:1 | 4.5:1 | | fgColor-neutral vs. bgColor-inset | ✅ | 7.05:1 | 4.5:1 | | fgColor-accent vs. bgColor-default | ✅ | 6.1:1 | 4.5:1 | | fgColor-accent vs. bgColor-muted | ✅ | 5.58:1 | 4.5:1 | | fgColor-accent vs. bgColor-inset | ✅ | 6.62:1 | 4.5:1 | | fgColor-success vs. bgColor-default | ✅ | 7.44:1 | 4.5:1 | | fgColor-success vs. bgColor-muted | ✅ | 6.81:1 | 4.5:1 | | fgColor-success vs. bgColor-inset | ✅ | 8.08:1 | 4.5:1 | | fgColor-open vs. bgColor-default | ✅ | 7.44:1 | 4.5:1 | | fgColor-open vs. bgColor-muted | ✅ | 6.81:1 | 4.5:1 | | fgColor-open vs. bgColor-inset | ✅ | 8.08:1 | 4.5:1 | | fgColor-danger vs. bgColor-default | ✅ | 5.64:1 | 4.5:1 | | fgColor-danger vs. bgColor-muted | ✅ | 5.16:1 | 4.5:1 | | fgColor-danger vs. bgColor-inset | ✅ | 6.12:1 | 4.5:1 | | fgColor-closed vs. bgColor-default | ✅ | 5.64:1 | 4.5:1 | | fgColor-closed vs. bgColor-muted | ✅ | 5.16:1 | 4.5:1 | | fgColor-closed vs. bgColor-inset | ✅ | 6.12:1 | 4.5:1 | | fgColor-attention vs. bgColor-default | ✅ | 7.49:1 | 4.5:1 | | fgColor-attention vs. bgColor-muted | ✅ | 6.85:1 | 4.5:1 | | fgColor-attention vs. bgColor-inset | ✅ | 8.13:1 | 4.5:1 | | fgColor-severe vs. bgColor-default | ✅ | 5.61:1 | 4.5:1 | | fgColor-severe vs. bgColor-muted | ✅ | 5.13:1 | 4.5:1 | | fgColor-severe vs. bgColor-inset | ✅ | 6.09:1 | 4.5:1 | | fgColor-done vs. bgColor-default | ✅ | 6.32:1 | 4.5:1 | | fgColor-done vs. bgColor-muted | ✅ | 5.78:1 | 4.5:1 | | fgColor-done vs. bgColor-inset | ✅ | 6.86:1 | 4.5:1 | | fgColor-upsell vs. bgColor-default | ✅ | 6.32:1 | 4.5:1 | | fgColor-upsell vs. bgColor-muted | ✅ | 5.78:1 | 4.5:1 | | fgColor-upsell vs. bgColor-inset | ✅ | 6.86:1 | 4.5:1 | | fgColor-sponsors vs. bgColor-default | ✅ | 5.62:1 | 4.5:1 | | fgColor-sponsors vs. bgColor-muted | ✅ | 5.14:1 | 4.5:1 | | fgColor-sponsors vs. bgColor-inset | ✅ | 6.1:1 | 4.5:1 | | fgColor-neutral vs. bgColor-neutral-muted on bgColor-default | ✅ | 5.41:1 | 4.5:1 | | fgColor-neutral vs. bgColor-neutral-muted on bgColor-muted | ✅ | 4.89:1 | 4.5:1 | | fgColor-accent vs. bgColor-accent-muted on bgColor-default | ✅ | 5.46:1 | 4.5:1 | | fgColor-accent vs. bgColor-accent-muted on bgColor-muted | ✅ | 4.91:1 | 4.5:1 | | fgColor-success vs. bgColor-success-muted on bgColor-default | ✅ | 6.25:1 | 4.5:1 | | fgColor-success vs. bgColor-success-muted on bgColor-muted | ✅ | 5.59:1 | 4.5:1 | | fgColor-open vs. bgColor-open-muted on bgColor-default | ✅ | 6.25:1 | 4.5:1 | | fgColor-open vs. bgColor-open-muted on bgColor-muted | ✅ | 5.59:1 | 4.5:1 | | fgColor-danger vs. bgColor-danger-muted on bgColor-default | ✅ | 5.1:1 | 4.5:1 | | fgColor-danger vs. bgColor-danger-muted on bgColor-muted | ✅ | 4.62:1 | 4.5:1 | | fgColor-closed vs. bgColor-closed-muted on bgColor-default | ✅ | 5.1:1 | 4.5:1 | | fgColor-closed vs. bgColor-closed-muted on bgColor-muted | ✅ | 4.62:1 | 4.5:1 | | fgColor-attention vs. bgColor-attention-muted on bgColor-default | ✅ | 6.27:1 | 4.5:1 | | fgColor-attention vs. bgColor-attention-muted on bgColor-muted | ✅ | 5.67:1 | 4.5:1 | | fgColor-severe vs. bgColor-severe-muted on bgColor-default | ✅ | 5.06:1 | 4.5:1 | | fgColor-severe vs. bgColor-severe-muted on bgColor-muted | ✅ | 4.58:1 | 4.5:1 | | fgColor-done vs. bgColor-done-muted on bgColor-default | ✅ | 5.18:1 | 4.5:1 | | fgColor-done vs. bgColor-done-muted on bgColor-muted | ✅ | 4.63:1 | 4.5:1 | | fgColor-upsell vs. bgColor-upsell-muted on bgColor-default | ✅ | 5.18:1 | 4.5:1 | | fgColor-upsell vs. bgColor-upsell-muted on bgColor-muted | ✅ | 4.63:1 | 4.5:1 | | fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-default | ✅ | 5.06:1 | 4.5:1 | | fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-muted | ✅ | 4.57:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-neutral-emphasis | ✅ | 5.3:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-accent-emphasis | ✅ | 4.63:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-success-emphasis | ✅ | 4.63:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-open-emphasis | ✅ | 4.63:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-danger-emphasis | ✅ | 4.6:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-closed-emphasis | ✅ | 4.6:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-attention-emphasis | ✅ | 4.64:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-severe-emphasis | ✅ | 4.65:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-done-emphasis | ✅ | 4.6:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-upsell-emphasis | ✅ | 4.6:1 | 4.5:1 | | fgColor-onEmphasis vs. bgColor-sponsors-emphasis | ✅ | 4.57:1 | 4.5:1 | | control-borderColor-emphasis vs. bgColor-default | ✅ | 3.56:1 | 3:1 | | control-borderColor-emphasis vs. bgColor-muted | ✅ | 3.26:1 | 3:1 | | display-gray-fgColor vs. display-gray-bgColor-muted | ✅ | 6.48:1 | 4.5:1 | | display-indigo-fgColor vs. display-indigo-bgColor-muted | ✅ | 6.48:1 | 4.5:1 | | display-blue-fgColor vs. display-blue-bgColor-muted | ✅ | 6.28:1 | 4.5:1 | | display-cyan-fgColor vs. display-cyan-bgColor-muted | ✅ | 6.53:1 | 4.5:1 | | display-teal-fgColor vs. display-teal-bgColor-muted | ✅ | 6.39:1 | 4.5:1 | | display-pine-fgColor vs. display-pine-bgColor-muted | ✅ | 6.42:1 | 4.5:1 | | display-green-fgColor vs. display-green-bgColor-muted | ✅ | 6.24:1 | 4.5:1 | | display-lime-fgColor vs. display-lime-bgColor-muted | ✅ | 6.47:1 | 4.5:1 | | display-olive-fgColor vs. display-olive-bgColor-muted | ✅ | 6.53:1 | 4.5:1 | | display-lemon-fgColor vs. display-lemon-bgColor-muted | ✅ | 6.12:1 | 4.5:1 | | display-yellow-fgColor vs. display-yellow-bgColor-muted | ✅ | 6.19:1 | 4.5:1 | | display-orange-fgColor vs. display-orange-bgColor-muted | ✅ | 6.26:1 | 4.5:1 | | display-red-fgColor vs. display-red-bgColor-muted | ✅ | 6.54:1 | 4.5:1 | | display-coral-fgColor vs. display-coral-bgColor-muted | ✅ | 6.54:1 | 4.5:1 | | display-pink-fgColor vs. display-pink-bgColor-muted | ✅ | 6.27:1 | 4.5:1 | | display-plum-fgColor vs. display-plum-bgColor-muted | ✅ | 6.49:1 | 4.5:1 | | display-purple-fgColor vs. display-purple-bgColor-muted | ✅ | 6.34:1 | 4.5:1 | | display-brown-fgColor vs. display-brown-bgColor-muted | ✅ | 6.25:1 | 4.5:1 | | display-auburn-fgColor vs. display-auburn-bgColor-muted | ✅ | 6.45:1 | 4.5:1 | | fgColor-onEmphasis vs. display-gray-bgColor-emphasis | ✅ | 6.2:1 | 4.5:1 | | fgColor-onEmphasis vs. display-indigo-bgColor-emphasis | ✅ | 6.19:1 | 4.5:1 | | fgColor-onEmphasis vs. display-blue-bgColor-emphasis | ✅ | 6.14:1 | 4.5:1 | | fgColor-onEmphasis vs. display-cyan-bgColor-emphasis | ✅ | 6.09:1 | 4.5:1 | | fgColor-onEmphasis vs. display-teal-bgColor-emphasis | ✅ | 6.17:1 | 4.5:1 | | fgColor-onEmphasis vs. display-pine-bgColor-emphasis | ✅ | 6:1 | 4.5:1 | | fgColor-onEmphasis vs. display-green-bgColor-emphasis | ✅ | 6.08:1 | 4.5:1 | | fgColor-onEmphasis vs. display-lime-bgColor-emphasis | ✅ | 6.07:1 | 4.5:1 | | fgColor-onEmphasis vs. display-olive-bgColor-emphasis | ✅ | 6.04:1 | 4.5:1 | | fgColor-onEmphasis vs. display-lemon-bgColor-emphasis | ✅ | 6.04:1 | 4.5:1 | | fgColor-onEmphasis vs. display-yellow-bgColor-emphasis | ✅ | 6:1 | 4.5:1 | | fgColor-onEmphasis vs. display-orange-bgColor-emphasis | ✅ | 6.27:1 | 4.5:1 | | fgColor-onEmphasis vs. display-red-bgColor-emphasis | ✅ | 6.09:1 | 4.5:1 | | fgColor-onEmphasis vs. display-coral-bgColor-emphasis | ✅ | 6.09:1 | 4.5:1 | | fgColor-onEmphasis vs. display-pink-bgColor-emphasis | ✅ | 6.15:1 | 4.5:1 | | fgColor-onEmphasis vs. display-plum-bgColor-emphasis | ✅ | 6.17:1 | 4.5:1 | | fgColor-onEmphasis vs. display-purple-bgColor-emphasis | ✅ | 6.22:1 | 4.5:1 | | fgColor-onEmphasis vs. display-brown-bgColor-emphasis | ✅ | 6.12:1 | 4.5:1 | | fgColor-onEmphasis vs. display-auburn-bgColor-emphasis | ✅ | 6.21:1 | 4.5:1 | | bgColor-default vs. display-gray-borderColor-emphasis | ✅ | 4.63:1 | 3:1 | | bgColor-default vs. display-indigo-borderColor-emphasis | ✅ | 4.59:1 | 3:1 | | bgColor-default vs. display-blue-borderColor-emphasis | ✅ | 4.54:1 | 3:1 | | bgColor-default vs. display-cyan-borderColor-emphasis | ✅ | 4.61:1 | 3:1 | | bgColor-default vs. display-teal-borderColor-emphasis | ✅ | 4.53:1 | 3:1 | | bgColor-default vs. display-pine-borderColor-emphasis | ✅ | 4.73:1 | 3:1 | | bgColor-default vs. display-green-borderColor-emphasis | ✅ | 4.65:1 | 3:1 | | bgColor-default vs. display-lime-borderColor-emphasis | ✅ | 4.6:1 | 3:1 | | bgColor-default vs. display-olive-borderColor-emphasis | ✅ | 4.59:1 | 3:1 | | bgColor-default vs. display-lemon-borderColor-emphasis | ✅ | 4.64:1 | 3:1 | | bgColor-default vs. display-yellow-borderColor-emphasis | ✅ | 4.57:1 | 3:1 | | bgColor-default vs. display-orange-borderColor-emphasis | ✅ | 4.59:1 | 3:1 | | bgColor-default vs. display-red-borderColor-emphasis | ✅ | 4.58:1 | 3:1 | | bgColor-default vs. display-coral-borderColor-emphasis | ✅ | 4.58:1 | 3:1 | | bgColor-default vs. display-pink-borderColor-emphasis | ✅ | 4.53:1 | 3:1 | | bgColor-default vs. display-plum-borderColor-emphasis | ✅ | 4.54:1 | 3:1 | | bgColor-default vs. display-purple-borderColor-emphasis | ✅ | 4.58:1 | 3:1 | | bgColor-default vs. display-brown-borderColor-emphasis | ✅ | 4.5:1 | 3:1 | | bgColor-default vs. display-auburn-borderColor-emphasis | ✅ | 4.64:1 | 3:1 | | bgColor-muted vs. display-gray-borderColor-emphasis | ✅ | 4.23:1 | 3:1 | | bgColor-muted vs. display-indigo-borderColor-emphasis | ✅ | 4.19:1 | 3:1 | | bgColor-muted vs. display-blue-borderColor-emphasis | ✅ | 4.15:1 | 3:1 | | bgColor-muted vs. display-cyan-borderColor-emphasis | ✅ | 4.22:1 | 3:1 | | bgColor-muted vs. display-teal-borderColor-emphasis | ✅ | 4.15:1 | 3:1 | | bgColor-muted vs. display-pine-borderColor-emphasis | ✅ | 4.32:1 | 3:1 | | bgColor-muted vs. display-green-borderColor-emphasis | ✅ | 4.26:1 | 3:1 | | bgColor-muted vs. display-lime-borderColor-emphasis | ✅ | 4.2:1 | 3:1 | | bgColor-muted vs. display-olive-borderColor-emphasis | ✅ | 4.2:1 | 3:1 | | bgColor-muted vs. display-lemon-borderColor-emphasis | ✅ | 4.24:1 | 3:1 | | bgColor-muted vs. display-yellow-borderColor-emphasis | ✅ | 4.18:1 | 3:1 | | bgColor-muted vs. display-orange-borderColor-emphasis | ✅ | 4.2:1 | 3:1 | | bgColor-muted vs. display-red-borderColor-emphasis | ✅ | 4.19:1 | 3:1 | | bgColor-muted vs. display-coral-borderColor-emphasis | ✅ | 4.19:1 | 3:1 | | bgColor-muted vs. display-pink-borderColor-emphasis | ✅ | 4.14:1 | 3:1 | | bgColor-muted vs. display-plum-borderColor-emphasis | ✅ | 4.15:1 | 3:1 | | bgColor-muted vs. display-purple-borderColor-emphasis | ✅ | 4.19:1 | 3:1 | | bgColor-muted vs. display-brown-borderColor-emphasis | ✅ | 4.12:1 | 3:1 | | bgColor-muted vs. display-auburn-borderColor-emphasis | ✅ | 4.24:1 | 3:1 | | display-gray-borderColor-emphasis vs. display-gray-bgColor-muted | ✅ | 4.17:1 | 3:1 | | display-indigo-borderColor-emphasis vs. display-indigo-bgColor-muted | ✅ | 4.07:1 | 3:1 | | display-blue-borderColor-emphasis vs. display-blue-bgColor-muted | ✅ | 4.07:1 | 3:1 | | display-cyan-borderColor-emphasis vs. display-cyan-bgColor-muted | ✅ | 4.17:1 | 3:1 | | display-teal-borderColor-emphasis vs. display-teal-bgColor-muted | ✅ | 4.1:1 | 3:1 | | display-pine-borderColor-emphasis vs. display-pine-bgColor-muted | ✅ | 4.22:1 | 3:1 | | display-green-borderColor-emphasis vs. display-green-bgColor-muted | ✅ | 4.11:1 | 3:1 | | display-lime-borderColor-emphasis vs. display-lime-bgColor-muted | ✅ | 4.14:1 | 3:1 | | display-olive-borderColor-emphasis vs. display-olive-bgColor-muted | ✅ | 4.15:1 | 3:1 | | display-lemon-borderColor-emphasis vs. display-lemon-bgColor-muted | ✅ | 4.05:1 | 3:1 | | display-yellow-borderColor-emphasis vs. display-yellow-bgColor-muted | ✅ | 4.01:1 | 3:1 | | display-orange-borderColor-emphasis vs. display-orange-bgColor-muted | ✅ | 4.06:1 | 3:1 | | display-red-borderColor-emphasis vs. display-red-bgColor-muted | ✅ | 4.13:1 | 3:1 | | display-coral-borderColor-emphasis vs. display-coral-bgColor-muted | ✅ | 4.13:1 | 3:1 | | display-pink-borderColor-emphasis vs. display-pink-bgColor-muted | ✅ | 4.04:1 | 3:1 | | display-plum-borderColor-emphasis vs. display-plum-bgColor-muted | ✅ | 4.08:1 | 3:1 | | display-purple-borderColor-emphasis vs. display-purple-bgColor-muted | ✅ | 4.13:1 | 3:1 | | display-brown-borderColor-emphasis vs. display-brown-bgColor-muted | ✅ | 3.99:1 | 3:1 | | display-auburn-borderColor-emphasis vs. display-auburn-bgColor-muted | ✅ | 4.19:1 | 3:1 |

light_high_contrast: ✅ all checks passed

Show results table for theme: light_high_contrast | contrastPair | pass | contrastRatio | minimumContrastRatio | | -------------------------------------------------------------------- | ---- | ------------- | -------------------- | | fgColor-default vs. bgColor-default | ✅ | 20.53:1 | 7:1 | | fgColor-muted vs. bgColor-default | ✅ | 8.69:1 | 7:1 | | fgColor-default vs. bgColor-muted | ✅ | 16.99:1 | 7:1 | | fgColor-muted vs. bgColor-muted | ✅ | 7.19:1 | 7:1 | | fgColor-default vs. bgColor-inset | ✅ | 18.27:1 | 7:1 | | fgColor-muted vs. bgColor-inset | ✅ | 7.73:1 | 7:1 | | control-fgColor-rest vs. bgColor-default | ✅ | 14.63:1 | 7:1 | | control-fgColor-rest vs. bgColor-muted | ✅ | 12.1:1 | 7:1 | | control-fgColor-rest vs. bgColor-inset | ✅ | 13.02:1 | 7:1 | | control-fgColor-rest vs. control-bgColor-rest | ✅ | 11.62:1 | 7:1 | | control-fgColor-placeholder vs. bgColor-default | ✅ | 8.69:1 | 7:1 | | control-fgColor-rest vs. control-bgColor-active | ✅ | 10.25:1 | 7:1 | | control-fgColor-rest vs. control-bgColor-hover | ✅ | 11:1 | 7:1 | | control-fgColor-rest vs. control-bgColor-selected | ✅ | 11.62:1 | 7:1 | | button-invisible-fgColor-rest vs. bgColor-muted | ✅ | 12.1:1 | 7:1 | | button-invisible-fgColor-hover vs. button-invisible-bgColor-hover | ✅ | 8:1 | 7:1 | | button-invisible-iconColor-rest vs. bgColor-muted | ✅ | 7.19:1 | 7:1 | | button-invisible-iconColor-hover vs. button-invisible-bgColor-hover | ✅ | 8:1 | 7:1 | | button-danger-fgColor-rest vs. button-danger-bgColor-rest | ✅ | 7.83:1 | 7:1 | | button-danger-fgColor-hover vs. button-danger-bgColor-hover | ✅ | 10.2:1 | 7:1 | | button-danger-fgColor-active vs. button-danger-bgColor-active | ✅ | 11.83:1 | 7:1 | | button-danger-iconColor-rest vs. button-danger-bgColor-rest | ✅ | 7.83:1 | 7:1 | | button-danger-iconColor-hover vs. button-danger-bgColor-hover | ✅ | 10.2:1 | 7:1 | | button-primary-fgColor-rest vs. button-primary-bgColor-rest | ✅ | 8.09:1 | 7:1 | | fgColor-default vs. bgColor-neutral-muted | ✅ | 16.31:1 | 7:1 | | fgColor-default vs. bgColor-accent-muted | ✅ | 18.46:1 | 7:1 | | fgColor-default vs. bgColor-success-muted | ✅ | 18.52:1 | 7:1 | | fgColor-default vs. bgColor-open-muted | ✅ | 18.52:1 | 7:1 | | fgColor-default vs. bgColor-danger-muted | ✅ | 18.53:1 | 7:1 | | fgColor-default vs. bgColor-closed-muted | ✅ | 18.53:1 | 7:1 | | fgColor-default vs. bgColor-attention-muted | ✅ | 18.76:1 | 7:1 | | fgColor-default vs. bgColor-severe-muted | ✅ | 18.49:1 | 7:1 | | fgColor-default vs. bgColor-done-muted | ✅ | 18.54:1 | 7:1 | | fgColor-default vs. bgColor-sponsors-muted | ✅ | 18.48:1 | 7:1 | | fgColor-neutral vs. bgColor-default | ✅ | 10.64:1 | 7:1 | | fgColor-neutral vs. bgColor-muted | ✅ | 8.8:1 | 7:1 | | fgColor-neutral vs. bgColor-inset | ✅ | 9.47:1 | 7:1 | | fgColor-accent vs. bgColor-default | ✅ | 10.18:1 | 7:1 | | fgColor-accent vs. bgColor-muted | ✅ | 8.42:1 | 7:1 | | fgColor-accent vs. bgColor-inset | ✅ | 9.06:1 | 7:1 | | fgColor-success vs. bgColor-default | ✅ | 10.23:1 | 7:1 | | fgColor-success vs. bgColor-muted | ✅ | 8.47:1 | 7:1 | | fgColor-success vs. bgColor-inset | ✅ | 9.11:1 | 7:1 | | fgColor-open vs. bgColor-default | ✅ | 10.23:1 | 7:1 | | fgColor-open vs. bgColor-muted | ✅ | 8.47:1 | 7:1 | | fgColor-open vs. bgColor-inset | ✅ | 9.11:1 | 7:1 | | fgColor-danger vs. bgColor-default | ✅ | 9.86:1 | 7:1 | | fgColor-danger vs. bgColor-muted | ✅ | 8.16:1 | 7:1 | | fgColor-danger vs. bgColor-inset | ✅ | 8.77:1 | 7:1 | | fgColor-closed vs. bgColor-default | ✅ | 9.86:1 | 7:1 | | fgColor-closed vs. bgColor-muted | ✅ | 8.16:1 | 7:1 | | fgColor-closed vs. bgColor-inset | ✅ | 8.77:1 | 7:1 | | fgColor-attention vs. bgColor-default | ✅ | 10.27:1 | 7:1 | | fgColor-attention vs. bgColor-muted | ✅ | 8.5:1 | 7:1 | | fgColor-attention vs. bgColor-inset | ✅ | 9.14:1 | 7:1 | | fgColor-severe vs. bgColor-default | ✅ | 10.24:1 | 7:1 | | fgColor-severe vs. bgColor-muted | ✅ | 8.48:1 | 7:1 | | fgColor-severe vs. bgColor-inset | ✅ | 9.12:1 | 7:1 | | fgColor-done vs. bgColor-default | ✅ | 10.15:1 | 7:1 | | fgColor-done vs. bgColor-muted | ✅ | 8.4:1 | 7:1 | | fgColor-done vs. bgColor-inset | ✅ | 9.03:1 | 7:1 | | fgColor-upsell vs. bgColor-default | ✅ | 10.15:1 | 7:1 | | fgColor-upsell vs. bgColor-muted | ✅ | 8.4:1 | 7:1 | | fgColor-upsell vs. bgColor-inset | ✅ | 9.03:1 | 7:1 | | fgColor-sponsors vs. bgColor-default | ✅ | 10.18:1 | 7:1 | | fgColor-sponsors vs. bgColor-muted | ✅ | 8.42:1 | 7:1 | | fgColor-sponsors vs. bgColor-inset | ✅ | 9.06:1 | 7:1 | | fgColor-neutral vs. bgColor-neutral-muted | ✅ | 8.45:1 | 7:1 | | fgColor-accent vs. bgColor-accent-muted | ✅ | 9.15:1 | 7:1 | | fgColor-success vs. bgColor-success-muted | ✅ | 9.23:1 | 7:1 | | fgColor-open vs. bgColor-open-muted | ✅ | 9.23:1 | 7:1 | | fgColor-danger vs. bgColor-danger-muted | ✅ | 8.89:1 | 7:1 | | fgColor-closed vs. bgColor-closed-muted | ✅ | 8.89:1 | 7:1 | | fgColor-attention vs. bgColor-attention-muted | ✅ | 9.38:1 | 7:1 | | fgColor-severe vs. bgColor-severe-muted | ✅ | 9.22:1 | 7:1 | | fgColor-done vs. bgColor-done-muted | ✅ | 9.16:1 | 7:1 | | fgColor-upsell vs. bgColor-upsell-muted | ✅ | 9.16:1 | 7:1 | | fgColor-sponsors vs. bgColor-sponsors-muted | ✅ | 9.16:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-neutral-emphasis | ✅ | 8.69:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-accent-emphasis | ✅ | 8.02:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-success-emphasis | ✅ | 8.09:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-open-emphasis | ✅ | 8.09:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-danger-emphasis | ✅ | 8.09:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-closed-emphasis | ✅ | 8.09:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-attention-emphasis | ✅ | 8.09:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-severe-emphasis | ✅ | 8.08:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-done-emphasis | ✅ | 8.05:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-upsell-emphasis | ✅ | 8.05:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-sponsors-emphasis | ✅ | 8.04:1 | 7:1 | | control-borderColor-emphasis vs. bgColor-default | ✅ | 8.69:1 | 4.5:1 | | control-borderColor-emphasis vs. bgColor-muted | ✅ | 7.19:1 | 4.5:1 | | display-gray-fgColor vs. display-gray-bgColor-muted | ✅ | 8.22:1 | 7:1 | | display-indigo-fgColor vs. display-indigo-bgColor-muted | ✅ | 8.12:1 | 7:1 | | display-blue-fgColor vs. display-blue-bgColor-muted | ✅ | 8.28:1 | 7:1 | | display-cyan-fgColor vs. display-cyan-bgColor-muted | ✅ | 8.49:1 | 7:1 | | display-teal-fgColor vs. display-teal-bgColor-muted | ✅ | 8.6:1 | 7:1 | | display-pine-fgColor vs. display-pine-bgColor-muted | ✅ | 8.47:1 | 7:1 | | display-green-fgColor vs. display-green-bgColor-muted | ✅ | 8.27:1 | 7:1 | | display-lime-fgColor vs. display-lime-bgColor-muted | ✅ | 8.3:1 | 7:1 | | display-olive-fgColor vs. display-olive-bgColor-muted | ✅ | 8.19:1 | 7:1 | | display-lemon-fgColor vs. display-lemon-bgColor-muted | ✅ | 8.55:1 | 7:1 | | display-yellow-fgColor vs. display-yellow-bgColor-muted | ✅ | 8.35:1 | 7:1 | | display-orange-fgColor vs. display-orange-bgColor-muted | ✅ | 8.3:1 | 7:1 | | display-red-fgColor vs. display-red-bgColor-muted | ✅ | 8.08:1 | 7:1 | | display-coral-fgColor vs. display-coral-bgColor-muted | ✅ | 8.31:1 | 7:1 | | display-pink-fgColor vs. display-pink-bgColor-muted | ✅ | 8.31:1 | 7:1 | | display-plum-fgColor vs. display-plum-bgColor-muted | ✅ | 8.13:1 | 7:1 | | display-purple-fgColor vs. display-purple-bgColor-muted | ✅ | 8.13:1 | 7:1 | | display-brown-fgColor vs. display-brown-bgColor-muted | ✅ | 8.15:1 | 7:1 | | display-auburn-fgColor vs. display-auburn-bgColor-muted | ✅ | 8.36:1 | 7:1 | | fgColor-onEmphasis vs. display-gray-bgColor-emphasis | ✅ | 7.75:1 | 7:1 | | fgColor-onEmphasis vs. display-indigo-bgColor-emphasis | ✅ | 7.55:1 | 7:1 | | fgColor-onEmphasis vs. display-blue-bgColor-emphasis | ✅ | 7.74:1 | 7:1 | | fgColor-onEmphasis vs. display-cyan-bgColor-emphasis | ✅ | 7.95:1 | 7:1 | | fgColor-onEmphasis vs. display-teal-bgColor-emphasis | ✅ | 7.79:1 | 7:1 | | fgColor-onEmphasis vs. display-pine-bgColor-emphasis | ✅ | 7.86:1 | 7:1 | | fgColor-onEmphasis vs. display-green-bgColor-emphasis | ✅ | 7.82:1 | 7:1 | | fgColor-onEmphasis vs. display-lime-bgColor-emphasis | ✅ | 7.76:1 | 7:1 | | fgColor-onEmphasis vs. display-olive-bgColor-emphasis | ✅ | 7.55:1 | 7:1 | | fgColor-onEmphasis vs. display-lemon-bgColor-emphasis | ✅ | 7.85:1 | 7:1 | | fgColor-onEmphasis vs. display-yellow-bgColor-emphasis | ✅ | 7.63:1 | 7:1 | | fgColor-onEmphasis vs. display-orange-bgColor-emphasis | ✅ | 7.53:1 | 7:1 | | fgColor-onEmphasis vs. display-red-bgColor-emphasis | ✅ | 7.76:1 | 7:1 | | fgColor-onEmphasis vs. display-coral-bgColor-emphasis | ✅ | 7.79:1 | 7:1 | | fgColor-onEmphasis vs. display-pink-bgColor-emphasis | ✅ | 7.68:1 | 7:1 | | fgColor-onEmphasis vs. display-plum-bgColor-emphasis | ✅ | 7.63:1 | 7:1 | | fgColor-onEmphasis vs. display-purple-bgColor-emphasis | ✅ | 7.66:1 | 7:1 | | fgColor-onEmphasis vs. display-brown-bgColor-emphasis | ✅ | 7.55:1 | 7:1 | | fgColor-onEmphasis vs. display-auburn-bgColor-emphasis | ✅ | 7.69:1 | 7:1 | | bgColor-default vs. display-gray-borderColor-emphasis | ✅ | 5.91:1 | 4.5:1 | | bgColor-default vs. display-indigo-borderColor-emphasis | ✅ | 6.1:1 | 4.5:1 | | bgColor-default vs. display-blue-borderColor-emphasis | ✅ | 5.98:1 | 4.5:1 | | bgColor-default vs. display-cyan-borderColor-emphasis | ✅ | 6.22:1 | 4.5:1 | | bgColor-default vs. display-teal-borderColor-emphasis | ✅ | 5.98:1 | 4.5:1 | | bgColor-default vs. display-pine-borderColor-emphasis | ✅ | 6.16:1 | 4.5:1 | | bgColor-default vs. display-green-borderColor-emphasis | ✅ | 6.16:1 | 4.5:1 | | bgColor-default vs. display-lime-borderColor-emphasis | ✅ | 6.09:1 | 4.5:1 | | bgColor-default vs. display-olive-borderColor-emphasis | ✅ | 6.15:1 | 4.5:1 | | bgColor-default vs. display-lemon-borderColor-emphasis | ✅ | 6.04:1 | 4.5:1 | | bgColor-default vs. display-yellow-borderColor-emphasis | ✅ | 6.27:1 | 4.5:1 | | bgColor-default vs. display-orange-borderColor-emphasis | ✅ | 6.14:1 | 4.5:1 | | bgColor-default vs. display-red-borderColor-emphasis | ✅ | 6.06:1 | 4.5:1 | | bgColor-default vs. display-coral-borderColor-emphasis | ✅ | 6.02:1 | 4.5:1 | | bgColor-default vs. display-pink-borderColor-emphasis | ✅ | 5.91:1 | 4.5:1 | | bgColor-default vs. display-plum-borderColor-emphasis | ✅ | 5.97:1 | 4.5:1 | | bgColor-default vs. display-purple-borderColor-emphasis | ✅ | 5.95:1 | 4.5:1 | | bgColor-default vs. display-brown-borderColor-emphasis | ✅ | 6.04:1 | 4.5:1 | | bgColor-default vs. display-auburn-borderColor-emphasis | ✅ | 6:1 | 4.5:1 | | bgColor-muted vs. display-gray-borderColor-emphasis | ✅ | 4.89:1 | 4.5:1 | | bgColor-muted vs. display-indigo-borderColor-emphasis | ✅ | 5.05:1 | 4.5:1 | | bgColor-muted vs. display-blue-borderColor-emphasis | ✅ | 4.95:1 | 4.5:1 | | bgColor-muted vs. display-cyan-borderColor-emphasis | ✅ | 5.15:1 | 4.5:1 | | bgColor-muted vs. display-teal-borderColor-emphasis | ✅ | 4.95:1 | 4.5:1 | | bgColor-muted vs. display-pine-borderColor-emphasis | ✅ | 5.1:1 | 4.5:1 | | bgColor-muted vs. display-green-borderColor-emphasis | ✅ | 5.1:1 | 4.5:1 | | bgColor-muted vs. display-lime-borderColor-emphasis | ✅ | 5.04:1 | 4.5:1 | | bgColor-muted vs. display-olive-borderColor-emphasis | ✅ | 5.09:1 | 4.5:1 | | bgColor-muted vs. display-lemon-borderColor-emphasis | ✅ | 5:1 | 4.5:1 | | bgColor-muted vs. display-yellow-borderColor-emphasis | ✅ | 5.19:1 | 4.5:1 | | bgColor-muted vs. display-orange-borderColor-emphasis | ✅ | 5.08:1 | 4.5:1 | | bgColor-muted vs. display-red-borderColor-emphasis | ✅ | 5.01:1 | 4.5:1 | | bgColor-muted vs. display-coral-borderColor-emphasis | ✅ | 4.98:1 | 4.5:1 | | bgColor-muted vs. display-pink-borderColor-emphasis | ✅ | 4.89:1 | 4.5:1 | | bgColor-muted vs. display-plum-borderColor-emphasis | ✅ | 4.94:1 | 4.5:1 | | bgColor-muted vs. display-purple-borderColor-emphasis | ✅ | 4.93:1 | 4.5:1 | | bgColor-muted vs. display-brown-borderColor-emphasis | ✅ | 5:1 | 4.5:1 | | bgColor-muted vs. display-auburn-borderColor-emphasis | ✅ | 4.96:1 | 4.5:1 | | display-gray-borderColor-emphasis vs. display-gray-bgColor-muted | ✅ | 4.98:1 | 4.5:1 | | display-indigo-borderColor-emphasis vs. display-indigo-bgColor-muted | ✅ | 5.06:1 | 4.5:1 | | display-blue-borderColor-emphasis vs. display-blue-bgColor-muted | ✅ | 5.02:1 | 4.5:1 | | display-cyan-borderColor-emphasis vs. display-cyan-bgColor-muted | ✅ | 5.2:1 | 4.5:1 | | display-teal-borderColor-emphasis vs. display-teal-bgColor-muted | ✅ | 5.05:1 | 4.5:1 | | display-pine-borderColor-emphasis vs. display-pine-bgColor-muted | ✅ | 5.18:1 | 4.5:1 | | display-green-borderColor-emphasis vs. display-green-bgColor-muted | ✅ | 5.18:1 | 4.5:1 | | display-lime-borderColor-emphasis vs. display-lime-bgColor-muted | ✅ | 5.12:1 | 4.5:1 | | display-olive-borderColor-emphasis vs. display-olive-bgColor-muted | ✅ | 5.2:1 | 4.5:1 | | display-lemon-borderColor-emphasis vs. display-lemon-bgColor-muted | ✅ | 5.09:1 | 4.5:1 | | display-yellow-borderColor-emphasis vs. display-yellow-bgColor-muted | ✅ | 5.3:1 | 4.5:1 | | display-orange-borderColor-emphasis vs. display-orange-bgColor-muted | ✅ | 5.14:1 | 4.5:1 | | display-red-borderColor-emphasis vs. display-red-bgColor-muted | ✅ | 4.96:1 | 4.5:1 | | display-coral-borderColor-emphasis vs. display-coral-bgColor-muted | ✅ | 5.01:1 | 4.5:1 | | display-pink-borderColor-emphasis vs. display-pink-bgColor-muted | ✅ | 4.99:1 | 4.5:1 | | display-plum-borderColor-emphasis vs. display-plum-bgColor-muted | ✅ | 5.01:1 | 4.5:1 | | display-purple-borderColor-emphasis vs. display-purple-bgColor-muted | ✅ | 4.93:1 | 4.5:1 | | display-brown-borderColor-emphasis vs. display-brown-bgColor-muted | ✅ | 5.03:1 | 4.5:1 | | display-auburn-borderColor-emphasis vs. display-auburn-bgColor-muted | ✅ | 5.03:1 | 4.5:1 |

dark_high_contrast: ✅ all checks passed

Show results table for theme: dark_high_contrast | contrastPair | pass | contrastRatio | minimumContrastRatio | | -------------------------------------------------------------------- | ---- | ------------- | -------------------- | | fgColor-default vs. bgColor-default | ✅ | 20.53:1 | 7:1 | | fgColor-muted vs. bgColor-default | ✅ | 10.88:1 | 7:1 | | fgColor-default vs. bgColor-muted | ✅ | 17.31:1 | 7:1 | | fgColor-muted vs. bgColor-muted | ✅ | 9.17:1 | 7:1 | | fgColor-default vs. bgColor-inset | ✅ | 20.53:1 | 7:1 | | fgColor-muted vs. bgColor-inset | ✅ | 10.88:1 | 7:1 | | control-fgColor-rest vs. bgColor-default | ✅ | 20.53:1 | 7:1 | | control-fgColor-rest vs. bgColor-muted | ✅ | 17.31:1 | 7:1 | | control-fgColor-rest vs. bgColor-inset | ✅ | 20.53:1 | 7:1 | | control-fgColor-rest vs. control-bgColor-rest | ✅ | 14.03:1 | 7:1 | | control-fgColor-placeholder vs. bgColor-default | ✅ | 10.88:1 | 7:1 | | control-fgColor-rest vs. control-bgColor-active | ✅ | 12.02:1 | 7:1 | | control-fgColor-rest vs. control-bgColor-hover | ✅ | 13.1:1 | 7:1 | | control-fgColor-rest vs. control-bgColor-selected | ✅ | 14.03:1 | 7:1 | | button-invisible-fgColor-rest vs. bgColor-muted | ✅ | 17.31:1 | 7:1 | | button-invisible-fgColor-hover vs. button-invisible-bgColor-hover | ✅ | 17.31:1 | 7:1 | | button-invisible-iconColor-rest vs. bgColor-muted | ✅ | 11.96:1 | 7:1 | | button-invisible-iconColor-hover vs. button-invisible-bgColor-hover | ✅ | 11.96:1 | 7:1 | | button-danger-fgColor-rest vs. button-danger-bgColor-rest | ✅ | 7.62:1 | 7:1 | | button-danger-fgColor-hover vs. button-danger-bgColor-hover | ✅ | 7.51:1 | 7:1 | | button-danger-fgColor-active vs. button-danger-bgColor-active | ✅ | 7.51:1 | 7:1 | | button-danger-iconColor-rest vs. button-danger-bgColor-rest | ✅ | 7.62:1 | 7:1 | | button-danger-iconColor-hover vs. button-danger-bgColor-hover | ✅ | 7.51:1 | 7:1 | | button-primary-fgColor-rest vs. button-primary-bgColor-rest | ✅ | 7.58:1 | 7:1 | | fgColor-default vs. bgColor-neutral-muted | ✅ | 14.88:1 | 7:1 | | fgColor-default vs. bgColor-accent-muted on bgColor-default | ✅ | 18.36:1 | 7:1 | | fgColor-default vs. bgColor-accent-muted on bgColor-muted | ✅ | 14.58:1 | 7:1 | | fgColor-default vs. bgColor-success-muted on bgColor-default | ✅ | 17.09:1 | 7:1 | | fgColor-default vs. bgColor-success-muted on bgColor-muted | ✅ | 13.4:1 | 7:1 | | fgColor-default vs. bgColor-open-muted on bgColor-default | ✅ | 17.09:1 | 7:1 | | fgColor-default vs. bgColor-open-muted on bgColor-muted | ✅ | 13.4:1 | 7:1 | | fgColor-default vs. bgColor-danger-muted on bgColor-default | ✅ | 18.45:1 | 7:1 | | fgColor-default vs. bgColor-danger-muted on bgColor-muted | ✅ | 14.86:1 | 7:1 | | fgColor-default vs. bgColor-closed-muted on bgColor-default | ✅ | 18.45:1 | 7:1 | | fgColor-default vs. bgColor-closed-muted on bgColor-muted | ✅ | 14.86:1 | 7:1 | | fgColor-default vs. bgColor-attention-muted on bgColor-default | ✅ | 16.71:1 | 7:1 | | fgColor-default vs. bgColor-attention-muted on bgColor-muted | ✅ | 13.12:1 | 7:1 | | fgColor-default vs. bgColor-severe-muted on bgColor-default | ✅ | 18.48:1 | 7:1 | | fgColor-default vs. bgColor-severe-muted on bgColor-muted | ✅ | 14.9:1 | 7:1 | | fgColor-default vs. bgColor-done-muted on bgColor-default | ✅ | 17.06:1 | 7:1 | | fgColor-default vs. bgColor-done-muted on bgColor-muted | ✅ | 13.46:1 | 7:1 | | fgColor-default vs. bgColor-sponsors-muted on bgColor-default | ✅ | 18.52:1 | 7:1 | | fgColor-default vs. bgColor-sponsors-muted on bgColor-muted | ✅ | 14.79:1 | 7:1 | | fgColor-neutral vs. bgColor-default | ✅ | 14.18:1 | 7:1 | | fgColor-neutral vs. bgColor-muted | ✅ | 11.96:1 | 7:1 | | fgColor-neutral vs. bgColor-inset | ✅ | 14.18:1 | 7:1 | | fgColor-accent vs. bgColor-default | ✅ | 9.9:1 | 7:1 | | fgColor-accent vs. bgColor-muted | ✅ | 8.34:1 | 7:1 | | fgColor-accent vs. bgColor-inset | ✅ | 9.9:1 | 7:1 | | fgColor-success vs. bgColor-default | ✅ | 10.8:1 | 7:1 | | fgColor-success vs. bgColor-muted | ✅ | 9.11:1 | 7:1 | | fgColor-success vs. bgColor-inset | ✅ | 10.8:1 | 7:1 | | fgColor-open vs. bgColor-default | ✅ | 10.8:1 | 7:1 | | fgColor-open vs. bgColor-muted | ✅ | 9.11:1 | 7:1 | | fgColor-open vs. bgColor-inset | ✅ | 10.8:1 | 7:1 | | fgColor-danger vs. bgColor-default | ✅ | 9.68:1 | 7:1 | | fgColor-danger vs. bgColor-muted | ✅ | 8.16:1 | 7:1 | | fgColor-danger vs. bgColor-inset | ✅ | 9.68:1 | 7:1 | | fgColor-closed vs. bgColor-default | ✅ | 9.68:1 | 7:1 | | fgColor-closed vs. bgColor-muted | ✅ | 8.16:1 | 7:1 | | fgColor-closed vs. bgColor-inset | ✅ | 9.68:1 | 7:1 | | fgColor-attention vs. bgColor-default | ✅ | 11.26:1 | 7:1 | | fgColor-attention vs. bgColor-muted | ✅ | 9.49:1 | 7:1 | | fgColor-attention vs. bgColor-inset | ✅ | 11.26:1 | 7:1 | | fgColor-severe vs. bgColor-default | ✅ | 9.65:1 | 7:1 | | fgColor-severe vs. bgColor-muted | ✅ | 8.14:1 | 7:1 | | fgColor-severe vs. bgColor-inset | ✅ | 9.65:1 | 7:1 | | fgColor-done vs. bgColor-default | ✅ | 10.79:1 | 7:1 | | fgColor-done vs. bgColor-muted | ✅ | 9.1:1 | 7:1 | | fgColor-done vs. bgColor-inset | ✅ | 10.79:1 | 7:1 | | fgColor-upsell vs. bgColor-default | ✅ | 10.79:1 | 7:1 | | fgColor-upsell vs. bgColor-muted | ✅ | 9.1:1 | 7:1 | | fgColor-upsell vs. bgColor-inset | ✅ | 10.79:1 | 7:1 | | fgColor-sponsors vs. bgColor-default | ✅ | 9.85:1 | 7:1 | | fgColor-sponsors vs. bgColor-muted | ✅ | 8.3:1 | 7:1 | | fgColor-sponsors vs. bgColor-inset | ✅ | 9.85:1 | 7:1 | | fgColor-neutral vs. bgColor-neutral-muted | ✅ | 10.28:1 | 7:1 | | fgColor-accent vs. bgColor-accent-muted on bgColor-default | ✅ | 8.85:1 | 7:1 | | fgColor-accent vs. bgColor-accent-muted on bgColor-muted | ✅ | 7.03:1 | 7:1 | | fgColor-success vs. bgColor-success-muted on bgColor-default | ✅ | 8.99:1 | 7:1 | | fgColor-success vs. bgColor-success-muted on bgColor-muted | ✅ | 7.05:1 | 7:1 | | fgColor-open vs. bgColor-open-muted on bgColor-default | ✅ | 8.99:1 | 7:1 | | fgColor-open vs. bgColor-open-muted on bgColor-muted | ✅ | 7.05:1 | 7:1 | | fgColor-danger vs. bgColor-danger-muted on bgColor-default | ✅ | 8.7:1 | 7:1 | | fgColor-danger vs. bgColor-danger-muted on bgColor-muted | ✅ | 7.01:1 | 7:1 | | fgColor-closed vs. bgColor-closed-muted on bgColor-default | ✅ | 8.7:1 | 7:1 | | fgColor-closed vs. bgColor-closed-muted on bgColor-muted | ✅ | 7.01:1 | 7:1 | | fgColor-attention vs. bgColor-attention-muted on bgColor-default | ✅ | 9.16:1 | 7:1 | | fgColor-attention vs. bgColor-attention-muted on bgColor-muted | ✅ | 7.2:1 | 7:1 | | fgColor-severe vs. bgColor-severe-muted on bgColor-default | ✅ | 8.69:1 | 7:1 | | fgColor-severe vs. bgColor-severe-muted on bgColor-muted | ✅ | 7:1 | 7:1 | | fgColor-done vs. bgColor-done-muted on bgColor-default | ✅ | 8.96:1 | 7:1 | | fgColor-done vs. bgColor-done-muted on bgColor-muted | ✅ | 7.07:1 | 7:1 | | fgColor-upsell vs. bgColor-upsell-muted on bgColor-default | ✅ | 8.96:1 | 7:1 | | fgColor-upsell vs. bgColor-upsell-muted on bgColor-muted | ✅ | 7.07:1 | 7:1 | | fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-default | ✅ | 8.88:1 | 7:1 | | fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-muted | ✅ | 7.09:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-neutral-emphasis | ✅ | 9.84:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-accent-emphasis | ✅ | 7.51:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-success-emphasis | ✅ | 7.58:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-open-emphasis | ✅ | 7.58:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-danger-emphasis | ✅ | 7.51:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-closed-emphasis | ✅ | 7.51:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-attention-emphasis | ✅ | 7.51:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-severe-emphasis | ✅ | 7.46:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-done-emphasis | ✅ | 7.5:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-upsell-emphasis | ✅ | 7.5:1 | 7:1 | | fgColor-onEmphasis vs. bgColor-sponsors-emphasis | ✅ | 7.5:1 | 7:1 | | control-borderColor-emphasis vs. bgColor-default | ✅ | 10.88:1 | 4.5:1 | | control-borderColor-emphasis vs. bgColor-muted | ✅ | 9.17:1 | 4.5:1 | | display-gray-fgColor vs. display-gray-bgColor-muted | ✅ | 9.23:1 | 7:1 | | display-indigo-fgColor vs. display-indigo-bgColor-muted | ✅ | 9.1:1 | 7:1 | | display-blue-fgColor vs. display-blue-bgColor-muted | ✅ | 9:1 | 7:1 | | display-cyan-fgColor vs. display-cyan-bgColor-muted | ✅ | 9.07:1 | 7:1 | | display-teal-fgColor vs. display-teal-bgColor-muted | ✅ | 9.35:1 | 7:1 | | display-pine-fgColor vs. display-pine-bgColor-muted | ✅ | 9.17:1 | 7:1 | | display-green-fgColor vs. display-green-bgColor-muted | ✅ | 9:1 | 7:1 | | display-lime-fgColor vs. display-lime-bgColor-muted | ✅ | 9.07:1 | 7:1 | | display-olive-fgColor vs. display-olive-bgColor-muted | ✅ | 9.05:1 | 7:1 | | display-lemon-fgColor vs. display-lemon-bgColor-muted | ✅ | 8.74:1 | 7:1 | | display-yellow-fgColor vs. display-yellow-bgColor-muted | ✅ | 8.84:1 | 7:1 | | display-orange-fgColor vs. display-orange-bgColor-muted | ✅ | 9.02:1 | 7:1 | | display-red-fgColor vs. display-red-bgColor-muted | ✅ | 9.37:1 | 7:1 | | display-coral-fgColor vs. display-coral-bgColor-muted | ✅ | 9.17:1 | 7:1 | | display-pink-fgColor vs. display-pink-bgColor-muted | ✅ | 9.16:1 | 7:1 | | display-plum-fgColor vs. display-plum-bgColor-muted | ✅ | 9:1 | 7:1 | | display-purple-fgColor vs. display-purple-bgColor-muted | ✅ | 9.18:1 | 7:1 | | display-brown-fgColor vs. display-brown-bgColor-muted | ✅ | 8.91:1 | 7:1 | | display-auburn-fgColor vs. display-auburn-bgColor-muted | ✅ | 9.14:1 | 7:1 | | fgColor-onEmphasis vs. display-gray-bgColor-emphasis | ✅ | 8.41:1 | 7:1 | | fgColor-onEmphasis vs. display-indigo-bgColor-emphasis | ✅ | 8.59:1 | 7:1 | | fgColor-onEmphasis vs. display-blue-bgColor-emphasis | ✅ | 8.6:1 | 7:1 | | fgColor-onEmphasis vs. display-cyan-bgColor-emphasis | ✅ | 8.5:1 | 7:1 | | fgColor-onEmphasis vs. display-teal-bgColor-emphasis | ✅ | 8.52:1 | 7:1 | | fgColor-onEmphasis vs. display-pine-bgColor-emphasis | ✅ | 8.21:1 | 7:1 | | fgColor-onEmphasis vs. display-green-bgColor-emphasis | ✅ | 8.3:1 | 7:1 | | fgColor-onEmphasis vs. display-lime-bgColor-emphasis | ✅ | 8.56:1 | 7:1 | | fgColor-onEmphasis vs. display-olive-bgColor-emphasis | ✅ | 8.41:1 | 7:1 | | fgColor-onEmphasis vs. display-lemon-bgColor-emphasis | ✅ | 8.25:1 | 7:1 | | fgColor-onEmphasis vs. display-yellow-bgColor-emphasis | ✅ | 8.47:1 | 7:1 | | fgColor-onEmphasis vs. display-orange-bgColor-emphasis | ✅ | 8.41:1 | 7:1 | | fgColor-onEmphasis vs. display-red-bgColor-emphasis | ✅ | 8.57:1 | 7:1 | | fgColor-onEmphasis vs. display-coral-bgColor-emphasis | ✅ | 8.32:1 | 7:1 | | fgColor-onEmphasis vs. display-pink-bgColor-emphasis | ✅ | 8.5:1 | 7:1 | | fgColor-onEmphasis vs. display-plum-bgColor-emphasis | ✅ | 8.51:1 | 7:1 | | fgColor-onEmphasis vs. display-purple-bgColor-emphasis | ✅ | 8.52:1 | 7:1 | | fgColor-onEmphasis vs. display-brown-bgColor-emphasis | ✅ | 8.43:1 | 7:1 | | fgColor-onEmphasis vs. display-auburn-bgColor-emphasis | ✅ | 8.3:1 | 7:1 | | bgColor-default vs. display-gray-borderColor-emphasis | ✅ | 7.81:1 | 4.5:1 | | bgColor-default vs. display-indigo-borderColor-emphasis | ✅ | 7.92:1 | 4.5:1 | | bgColor-default vs. display-blue-borderColor-emphasis | ✅ | 7.61:1 | 4.5:1 | | bgColor-default vs. display-cyan-borderColor-emphasis | ✅ | 7.85:1 | 4.5:1 | | bgColor-default vs. display-teal-borderColor-emphasis | ✅ | 7.67:1 | 4.5:1 | | bgColor-default vs. display-pine-borderColor-emphasis | ✅ | 7.8:1 | 4.5:1 | | bgColor-default vs. display-green-borderColor-emphasis | ✅ | 7.66:1 | 4.5:1 | | bgColor-default vs. display-lime-borderColor-emphasis | ✅ | 7.8:1 | 4.5:1 | | bgColor-default vs. display-olive-borderColor-emphasis | ✅ | 7.84:1 | 4.5:1 | | bgColor-default vs. display-lemon-borderColor-emphasis | ✅ | 7.61:1 | 4.5:1 | | bgColor-default vs. display-yellow-borderColor-emphasis | ✅ | 7.65:1 | 4.5:1 | | bgColor-default vs. display-orange-borderColor-emphasis | ✅ | 7.7:1 | 4.5:1 | | bgColor-default vs. display-red-borderColor-emphasis | ✅ | 7.85:1 | 4.5:1 | | bgColor-default vs. display-coral-borderColor-emphasis | ✅ | 7.61:1 | 4.5:1 | | bgColor-default vs. display-pink-borderColor-emphasis | ✅ | 7.63:1 | 4.5:1 | | bgColor-default vs. display-plum-borderColor-emphasis | ✅ | 7.83:1 | 4.5:1 | | bgColor-default vs. display-purple-borderColor-emphasis | ✅ | 7.62:1 | 4.5:1 | | bgColor-default vs. display-brown-borderColor-emphasis | ✅ | 7.65:1 | 4.5:1 | | bgColor-default vs. display-auburn-borderColor-emphasis | ✅ | 7.75:1 | 4.5:1 | | bgColor-muted vs. display-gray-borderColor-emphasis | ✅ | 6.58:1 | 4.5:1 | | bgColor-muted vs. display-indigo-borderColor-emphasis | ✅ | 6.68:1 | 4.5:1 | | bgColor-muted vs. display-blue-borderColor-emphasis | ✅ | 6.42:1 | 4.5:1 | | bgColor-muted vs. display-cyan-borderColor-emphasis | ✅ | 6.62:1 | 4.5:1 | | bgColor-muted vs. display-teal-borderColor-emphasis | ✅ | 6.46:1 | 4.5:1 | | bgColor-muted vs. display-pine-borderColor-emphasis | ✅ | 6.58:1 | 4.5:1 | | bgColor-muted vs. display-green-borderColor-emphasis | ✅ | 6.46:1 | 4.5:1 | | bgColor-muted vs. display-lime-borderColor-emphasis | ✅ | 6.58:1 | 4.5:1 | | bgColor-muted vs. display-olive-borderColor-emphasis | ✅ | 6.61:1 | 4.5:1 | | bgColor-muted vs. display-lemon-borderColor-emphasis | ✅ | 6.41:1 | 4.5:1 | | bgColor-muted vs. display-yellow-borderColor-emphasis | ✅ | 6.45:1 | 4.5:1 | | bgColor-muted vs. display-orange-borderColor-emphasis | ✅ | 6.49:1 | 4.5:1 | | bgColor-muted vs. display-red-borderColor-emphasis | ✅ | 6.62:1 | 4.5:1 | | bgColor-muted vs. display-coral-borderColor-emphasis | ✅ | 6.42:1 | 4.5:1 | | bgColor-muted vs. display-pink-borderColor-emphasis | ✅ | 6.43:1 | 4.5:1 | | bgColor-muted vs. display-plum-borderColor-emphasis | ✅ | 6.6:1 | 4.5:1 | | bgColor-muted vs. display-purple-borderColor-emphasis | ✅ | 6.42:1 | 4.5:1 | | bgColor-muted vs. display-brown-borderColor-emphasis | ✅ | 6.45:1 | 4.5:1 | | bgColor-muted vs. display-auburn-borderColor-emphasis | ✅ | 6.53:1 | 4.5:1 | | display-gray-borderColor-emphasis vs. display-gray-bgColor-muted | ✅ | 6.48:1 | 4.5:1 | | display-indigo-borderColor-emphasis vs. display-indigo-bgColor-muted | ✅ | 6.48:1 | 4.5:1 | | display-blue-borderColor-emphasis vs. display-blue-bgColor-muted | ✅ | 6.28:1 | 4.5:1 | | display-cyan-borderColor-emphasis vs. display-cyan-bgColor-muted | ✅ | 6.53:1 | 4.5:1 | | display-teal-borderColor-emphasis vs. display-teal-bgColor-muted | ✅ | 6.39:1 | 4.5:1 | | display-pine-borderColor-emphasis vs. display-pine-bgColor-muted | ✅ | 6.42:1 | 4.5:1 | | display-green-borderColor-emphasis vs. display-green-bgColor-muted | ✅ | 6.24:1 | 4.5:1 | | display-lime-borderColor-emphasis vs. display-lime-bgColor-muted | ✅ | 6.47:1 | 4.5:1 | | display-olive-borderColor-emphasis vs. display-olive-bgColor-muted | ✅ | 6.53:1 | 4.5:1 | | display-lemon-borderColor-emphasis vs. display-lemon-bgColor-muted | ✅ | 6.12:1 | 4.5:1 | | display-yellow-borderColor-emphasis vs. display-yellow-bgColor-muted | ✅ | 6.19:1 | 4.5:1 | | display-orange-borderColor-emphasis vs. display-orange-bgColor-muted | ✅ | 6.26:1 | 4.5:1 | | display-red-borderColor-emphasis vs. display-red-bgColor-muted | ✅ | 6.54:1 | 4.5:1 | | display-coral-borderColor-emphasis vs. display-coral-bgColor-muted | ✅ | 6.34:1 | 4.5:1 | | display-pink-borderColor-emphasis vs. display-pink-bgColor-muted | ✅ | 6.27:1 | 4.5:1 | | display-plum-borderColor-emphasis vs. display-plum-bgColor-muted | ✅ | 6.49:1 | 4.5:1 | | display-purple-borderColor-emphasis vs. display-purple-bgColor-muted | ✅ | 6.34:1 | 4.5:1 | | display-brown-borderColor-emphasis vs. display-brown-bgColor-muted | ✅ | 6.25:1 | 4.5:1 | | display-auburn-borderColor-emphasis vs. display-auburn-bgColor-muted | ✅ | 6.45:1 | 4.5:1 |
github-actions[bot] commented 2 months ago

Design Token Diff

/css/functional/themes/dark-colorblind.css

```diff --- /home/runner/work/primitives/primitives/base/dist/css/functional/themes/dark-colorblind.css 2024-09-12 02:12:28.807159802 +0000 +++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-colorblind.css 2024-09-12 02:12:14.679183377 +0000 @@ -308,7 +308,7 @@ --selectMenu-borderColor: #3d444d; --selectMenu-bgColor-active: #0c2d6b; --sideNav-bgColor-selected: #212830; - --skeletonLoader-bgColor: #151b23; + --skeletonLoader-bgColor: #656c7633; --timelineBadge-bgColor: #212830; --treeViewItem-leadingVisual-iconColor-rest: #9198a1; --underlineNav-borderColor-active: #f78166; @@ -877,7 +877,7 @@ --selectMenu-borderColor: #3d444d; --selectMenu-bgColor-active: #0c2d6b; --sideNav-bgColor-selected: #212830; - --skeletonLoader-bgColor: #151b23; + --skeletonLoader-bgColor: #656c7633; --timelineBadge-bgColor: #212830; --treeViewItem-leadingVisual-iconColor-rest: #9198a1; --underlineNav-borderColor-active: #f78166; ```

/css/functional/themes/dark-dimmed.css

```diff --- /home/runner/work/primitives/primitives/base/dist/css/functional/themes/dark-dimmed.css 2024-09-12 02:12:27.519162009 +0000 +++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-dimmed.css 2024-09-12 02:12:13.379185067 +0000 @@ -308,7 +308,7 @@ --selectMenu-borderColor: #3d444d; --selectMenu-bgColor-active: #143d79; --sideNav-bgColor-selected: #212830; - --skeletonLoader-bgColor: #262c36; + --skeletonLoader-bgColor: #656c7633; --timelineBadge-bgColor: #262c36; --treeViewItem-leadingVisual-iconColor-rest: #9198a1; --underlineNav-borderColor-active: #ec775c; @@ -877,7 +877,7 @@ --selectMenu-borderColor: #3d444d; --selectMenu-bgColor-active: #143d79; --sideNav-bgColor-selected: #212830; - --skeletonLoader-bgColor: #262c36; + --skeletonLoader-bgColor: #656c7633; --timelineBadge-bgColor: #262c36; --treeViewItem-leadingVisual-iconColor-rest: #9198a1; --underlineNav-borderColor-active: #ec775c; ```

/css/functional/themes/dark-high-contrast.css

```diff --- /home/runner/work/primitives/primitives/base/dist/css/functional/themes/dark-high-contrast.css 2024-09-12 02:12:29.471158664 +0000 +++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-high-contrast.css 2024-09-12 02:12:15.347182508 +0000 @@ -308,7 +308,7 @@ --selectMenu-borderColor: #b7bdc8; --selectMenu-bgColor-active: #1e60d5; --sideNav-bgColor-selected: #212830; - --skeletonLoader-bgColor: #151b23; + --skeletonLoader-bgColor: #2a313c; --timelineBadge-bgColor: #212830; --treeViewItem-leadingVisual-iconColor-rest: #b7bdc8; --underlineNav-borderColor-active: #ff967d; @@ -877,7 +877,7 @@ --selectMenu-borderColor: #b7bdc8; --selectMenu-bgColor-active: #1e60d5; --sideNav-bgColor-selected: #212830; - --skeletonLoader-bgColor: #151b23; + --skeletonLoader-bgColor: #2a313c; --timelineBadge-bgColor: #212830; --treeViewItem-leadingVisual-iconColor-rest: #b7bdc8; --underlineNav-borderColor-active: #ff967d; ```

/css/functional/themes/dark-tritanopia.css

```diff --- /home/runner/work/primitives/primitives/base/dist/css/functional/themes/dark-tritanopia.css 2024-09-12 02:12:28.179160878 +0000 +++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-tritanopia.css 2024-09-12 02:12:14.051184193 +0000 @@ -308,7 +308,7 @@ --selectMenu-borderColor: #3d444d; --selectMenu-bgColor-active: #0c2d6b; --sideNav-bgColor-selected: #212830; - --skeletonLoader-bgColor: #151b23; + --skeletonLoader-bgColor: #656c7633; --timelineBadge-bgColor: #212830; --treeViewItem-leadingVisual-iconColor-rest: #9198a1; --underlineNav-borderColor-active: #f78166; @@ -877,7 +877,7 @@ --selectMenu-borderColor: #3d444d; --selectMenu-bgColor-active: #0c2d6b; --sideNav-bgColor-selected: #212830; - --skeletonLoader-bgColor: #151b23; + --skeletonLoader-bgColor: #656c7633; --timelineBadge-bgColor: #212830; --treeViewItem-leadingVisual-iconColor-rest: #9198a1; --underlineNav-borderColor-active: #f78166; ```

/css/functional/themes/dark.css

```diff --- /home/runner/work/primitives/primitives/base/dist/css/functional/themes/dark.css 2024-09-12 02:12:26.839163174 +0000 +++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark.css 2024-09-12 02:12:12.711185936 +0000 @@ -308,7 +308,7 @@ --selectMenu-borderColor: #3d444d; --selectMenu-bgColor-active: #0c2d6b; --sideNav-bgColor-selected: #212830; - --skeletonLoader-bgColor: #151b23; + --skeletonLoader-bgColor: #656c7633; --timelineBadge-bgColor: #212830; --treeViewItem-leadingVisual-iconColor-rest: #9198a1; --underlineNav-borderColor-active: #f78166; @@ -877,7 +877,7 @@ --selectMenu-borderColor: #3d444d; --selectMenu-bgColor-active: #0c2d6b; --sideNav-bgColor-selected: #212830; - --skeletonLoader-bgColor: #151b23; + --skeletonLoader-bgColor: #656c7633; --timelineBadge-bgColor: #212830; --treeViewItem-leadingVisual-iconColor-rest: #9198a1; --underlineNav-borderColor-active: #f78166; ```

/css/functional/themes/light-colorblind.css

```diff --- /home/runner/work/primitives/primitives/base/dist/css/functional/themes/light-colorblind.css 2024-09-12 02:12:25.551165381 +0000 +++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-colorblind.css 2024-09-12 02:12:11.439187590 +0000 @@ -309,7 +309,7 @@ --selectMenu-borderColor: #ffffff00; --selectMenu-bgColor-active: #b6e3ff; --sideNav-bgColor-selected: #ffffff; - --skeletonLoader-bgColor: #f6f8fa; + --skeletonLoader-bgColor: #818b981a; --timelineBadge-bgColor: #f6f8fa; --treeViewItem-leadingVisual-iconColor-rest: #54aeff; --underlineNav-borderColor-active: #fd8c73; @@ -878,7 +878,7 @@ --selectMenu-borderColor: #ffffff00; --selectMenu-bgColor-active: #b6e3ff; --sideNav-bgColor-selected: #ffffff; - --skeletonLoader-bgColor: #f6f8fa; + --skeletonLoader-bgColor: #818b981a; --timelineBadge-bgColor: #f6f8fa; --treeViewItem-leadingVisual-iconColor-rest: #54aeff; --underlineNav-borderColor-active: #fd8c73; ```

/css/functional/themes/light-high-contrast.css

```diff --- /home/runner/work/primitives/primitives/base/dist/css/functional/themes/light-high-contrast.css 2024-09-12 02:12:26.219164236 +0000 +++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-high-contrast.css 2024-09-12 02:12:12.091186743 +0000 @@ -309,7 +309,7 @@ --selectMenu-borderColor: #ffffff00; --selectMenu-bgColor-active: #9cd7ff; --sideNav-bgColor-selected: #ffffff; - --skeletonLoader-bgColor: #e6eaef; + --skeletonLoader-bgColor: #dae0e7; --timelineBadge-bgColor: #e6eaef; --treeViewItem-leadingVisual-iconColor-rest: #368cf9; --underlineNav-borderColor-active: #cd3425; @@ -878,7 +878,7 @@ --selectMenu-borderColor: #ffffff00; --selectMenu-bgColor-active: #9cd7ff; --sideNav-bgColor-selected: #ffffff; - --skeletonLoader-bgColor: #e6eaef; + --skeletonLoader-bgColor: #dae0e7; --timelineBadge-bgColor: #e6eaef; --treeViewItem-leadingVisual-iconColor-rest: #368cf9; --underlineNav-borderColor-active: #cd3425; ```

/css/functional/themes/light-tritanopia.css

```diff --- /home/runner/work/primitives/primitives/base/dist/css/functional/themes/light-tritanopia.css 2024-09-12 02:12:24.887166518 +0000 +++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-tritanopia.css 2024-09-12 02:12:10.771188458 +0000 @@ -309,7 +309,7 @@ --selectMenu-borderColor: #ffffff00; --selectMenu-bgColor-active: #b6e3ff; --sideNav-bgColor-selected: #ffffff; - --skeletonLoader-bgColor: #f6f8fa; + --skeletonLoader-bgColor: #818b981a; --timelineBadge-bgColor: #f6f8fa; --treeViewItem-leadingVisual-iconColor-rest: #54aeff; --underlineNav-borderColor-active: #fd8c73; @@ -878,7 +878,7 @@ --selectMenu-borderColor: #ffffff00; --selectMenu-bgColor-active: #b6e3ff; --sideNav-bgColor-selected: #ffffff; - --skeletonLoader-bgColor: #f6f8fa; + --skeletonLoader-bgColor: #818b981a; --timelineBadge-bgColor: #f6f8fa; --treeViewItem-leadingVisual-iconColor-rest: #54aeff; --underlineNav-borderColor-active: #fd8c73; ```

/css/functional/themes/light.css

```diff --- /home/runner/work/primitives/primitives/base/dist/css/functional/themes/light.css 2024-09-12 02:12:23.923168178 +0000 +++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light.css 2024-09-12 02:12:09.819189697 +0000 @@ -309,7 +309,7 @@ --selectMenu-borderColor: #ffffff00; --selectMenu-bgColor-active: #b6e3ff; --sideNav-bgColor-selected: #ffffff; - --skeletonLoader-bgColor: #f6f8fa; + --skeletonLoader-bgColor: #818b981a; --timelineBadge-bgColor: #f6f8fa; --treeViewItem-leadingVisual-iconColor-rest: #54aeff; --underlineNav-borderColor-active: #fd8c73; @@ -878,7 +878,7 @@ --selectMenu-borderColor: #ffffff00; --selectMenu-bgColor-active: #b6e3ff; --sideNav-bgColor-selected: #ffffff; - --skeletonLoader-bgColor: #f6f8fa; + --skeletonLoader-bgColor: #818b981a; --timelineBadge-bgColor: #f6f8fa; --treeViewItem-leadingVisual-iconColor-rest: #54aeff; --underlineNav-borderColor-active: #fd8c73; ```