primitives icon indicating copy to clipboard operation
primitives copied to clipboard

Support updated high contrast themes

Open langermank opened this issue 1 year ago • 3 comments

  • Minor changes to prepare for adding more borders to high contrast themes
  • Adds tooltip pattern to allow for an inverse style in dark high contrast

langermank avatar Jul 25 '24 00:07 langermank

🦋 Changeset detected

Latest commit: 087bd58bc83f955c28a6dc14f2a6d33b9b2f79e6

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

changeset-bot[bot] avatar Jul 25 '24 00:07 changeset-bot[bot]

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 5.33:1 4.5:1
fgColor-default vs. bgColor-muted 14.83:1 4.5:1
fgColor-muted vs. bgColor-muted 5.01:1 4.5:1
fgColor-default vs. bgColor-inset 14.83:1 4.5:1
fgColor-muted vs. bgColor-inset 5.01:1 4.5:1
control-fgColor-rest vs. bgColor-default 14.65:1 4.5:1
control-fgColor-rest vs. bgColor-muted 13.76:1 4.5:1
control-fgColor-rest vs. bgColor-inset 13.76:1 4.5:1
control-fgColor-rest vs. control-bgColor-rest 13.76:1 4.5:1
control-fgColor-placeholder vs. control-bgColor-rest 4.58:1 4.5:1
control-fgColor-rest vs. control-bgColor-active 12.22:1 4.5:1
control-fgColor-rest vs. control-bgColor-hover 12.92:1 4.5:1
control-fgColor-rest vs. control-bgColor-selected 13.76:1 4.5:1
fgColor-default vs. bgColor-neutral-muted on bgColor-default 13.95:1 4.5:1
fgColor-default vs. bgColor-neutral-muted on bgColor-muted 13.21: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.38:1 4.5:1
fgColor-neutral vs. bgColor-muted 6:1 4.5:1
fgColor-neutral vs. bgColor-inset 6: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.64:1 4.5:1
fgColor-neutral vs. bgColor-neutral-muted on bgColor-muted 5.34: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 4.54: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.27:1 3:1
control-borderColor-emphasis vs. bgColor-muted 3.08: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 16.01:1 4.5:1
fgColor-muted vs. bgColor-default 6.31:1 4.5:1
fgColor-default vs. bgColor-muted 14.63:1 4.5:1
fgColor-muted vs. bgColor-muted 5.76:1 4.5:1
fgColor-default vs. bgColor-inset 17.37:1 4.5:1
fgColor-muted vs. bgColor-inset 6.84:1 4.5:1
control-fgColor-rest vs. bgColor-default 12.26:1 4.5:1
control-fgColor-rest vs. bgColor-muted 11.2:1 4.5:1
control-fgColor-rest vs. bgColor-inset 13.3:1 4.5:1
control-fgColor-rest vs. control-bgColor-rest 9.86:1 4.5:1
control-fgColor-placeholder vs. control-bgColor-rest 4.58:1 4.5:1
control-fgColor-rest vs. control-bgColor-active 7.87:1 4.5:1
control-fgColor-rest vs. control-bgColor-hover 8.84:1 4.5:1
control-fgColor-rest vs. control-bgColor-selected 11.2:1 4.5:1
fgColor-default vs. bgColor-neutral-muted on bgColor-default 9.83:1 4.5:1
fgColor-default vs. bgColor-neutral-muted on bgColor-muted 8.98:1 4.5:1
fgColor-default vs. bgColor-accent-muted on bgColor-default 14.34:1 4.5:1
fgColor-default vs. bgColor-accent-muted on bgColor-muted 12.91:1 4.5:1
fgColor-default vs. bgColor-success-muted on bgColor-default 13.44:1 4.5:1
fgColor-default vs. bgColor-success-muted on bgColor-muted 12:1 4.5:1
fgColor-default vs. bgColor-open-muted on bgColor-default 13.44:1 4.5:1
fgColor-default vs. bgColor-open-muted on bgColor-muted 12:1 4.5:1
fgColor-default vs. bgColor-danger-muted on bgColor-default 14.49:1 4.5:1
fgColor-default vs. bgColor-danger-muted on bgColor-muted 13.09:1 4.5:1
fgColor-default vs. bgColor-closed-muted on bgColor-default 14.49:1 4.5:1
fgColor-default vs. bgColor-closed-muted on bgColor-muted 13.09:1 4.5:1
fgColor-default vs. bgColor-attention-muted on bgColor-default 13.4:1 4.5:1
fgColor-default vs. bgColor-attention-muted on bgColor-muted 12.08:1 4.5:1
fgColor-default vs. bgColor-severe-muted on bgColor-default 14.45:1 4.5:1
fgColor-default vs. bgColor-severe-muted on bgColor-muted 13.03:1 4.5:1
fgColor-default vs. bgColor-done-muted on bgColor-default 13.11:1 4.5:1
fgColor-default vs. bgColor-done-muted on bgColor-muted 11.71:1 4.5:1
fgColor-default vs. bgColor-sponsors-muted on bgColor-default 14.4:1 4.5:1
fgColor-default vs. bgColor-sponsors-muted on bgColor-muted 12.98:1 4.5:1
fgColor-neutral vs. bgColor-default 9.63:1 4.5:1
fgColor-neutral vs. bgColor-muted 8.8:1 4.5:1
fgColor-neutral vs. bgColor-inset 10.45: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.8: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.8: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.91:1 4.5:1
fgColor-neutral vs. bgColor-neutral-muted on bgColor-muted 5.4: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.92: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.58: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.58: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.61: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.61: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.65: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.57: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.62: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.62: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.56:1 4.5:1
fgColor-onEmphasis vs. bgColor-neutral-emphasis 4.59: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.66:1 3:1
control-borderColor-emphasis vs. bgColor-muted 3.35: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.21:1 3:1
bgColor-muted vs. display-teal-borderColor-emphasis 4.14:1 3:1
bgColor-muted vs. display-pine-borderColor-emphasis 4.32:1 3:1
bgColor-muted vs. display-green-borderColor-emphasis 4.25:1 3:1
bgColor-muted vs. display-lime-borderColor-emphasis 4.2:1 3:1
bgColor-muted vs. display-olive-borderColor-emphasis 4.19: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.18:1 3:1
bgColor-muted vs. display-coral-borderColor-emphasis 4.18: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.18: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 18.91:1 7:1
fgColor-default vs. bgColor-muted 17.26:1 7:1
fgColor-muted vs. bgColor-muted 15.89:1 7:1
fgColor-default vs. bgColor-inset 20.53:1 7:1
fgColor-muted vs. bgColor-inset 18.91:1 7:1
control-fgColor-rest vs. bgColor-default 18.91:1 7:1
control-fgColor-rest vs. bgColor-muted 15.89:1 7:1
control-fgColor-rest vs. bgColor-inset 18.91:1 7:1
control-fgColor-rest vs. control-bgColor-rest 15.89:1 7:1
control-fgColor-placeholder vs. control-bgColor-rest 7.08:1 7:1
control-fgColor-rest vs. control-bgColor-active 12.89:1 7:1
control-fgColor-rest vs. control-bgColor-hover 14.34:1 7:1
control-fgColor-rest vs. control-bgColor-selected 9.19:1 7:1
fgColor-default vs. bgColor-neutral-muted 17.26: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 11.33:1 7:1
fgColor-neutral vs. bgColor-muted 9.52:1 7:1
fgColor-neutral vs. bgColor-inset 11.33:1 7:1
fgColor-accent vs. bgColor-default 10.18:1 7:1
fgColor-accent vs. bgColor-muted 8.56:1 7:1
fgColor-accent vs. bgColor-inset 10.18:1 7:1
fgColor-success vs. bgColor-default 10.23:1 7:1
fgColor-success vs. bgColor-muted 8.6:1 7:1
fgColor-success vs. bgColor-inset 10.23:1 7:1
fgColor-open vs. bgColor-default 10.23:1 7:1
fgColor-open vs. bgColor-muted 8.6:1 7:1
fgColor-open vs. bgColor-inset 10.23:1 7:1
fgColor-danger vs. bgColor-default 9.86:1 7:1
fgColor-danger vs. bgColor-muted 8.28:1 7:1
fgColor-danger vs. bgColor-inset 9.86:1 7:1
fgColor-closed vs. bgColor-default 9.86:1 7:1
fgColor-closed vs. bgColor-muted 8.28:1 7:1
fgColor-closed vs. bgColor-inset 9.86:1 7:1
fgColor-attention vs. bgColor-default 10.27:1 7:1
fgColor-attention vs. bgColor-muted 8.63:1 7:1
fgColor-attention vs. bgColor-inset 10.27:1 7:1
fgColor-severe vs. bgColor-default 10.24:1 7:1
fgColor-severe vs. bgColor-muted 8.61:1 7:1
fgColor-severe vs. bgColor-inset 10.24:1 7:1
fgColor-done vs. bgColor-default 10.15:1 7:1
fgColor-done vs. bgColor-muted 8.53:1 7:1
fgColor-done vs. bgColor-inset 10.15:1 7:1
fgColor-upsell vs. bgColor-default 10.15:1 7:1
fgColor-upsell vs. bgColor-muted 8.53:1 7:1
fgColor-upsell vs. bgColor-inset 10.15:1 7:1
fgColor-sponsors vs. bgColor-default 10.18:1 7:1
fgColor-sponsors vs. bgColor-muted 8.56:1 7:1
fgColor-sponsors vs. bgColor-inset 10.18:1 7:1
fgColor-neutral vs. bgColor-neutral-muted 9.52: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 7.79: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 15.41:1 4.5:1
control-borderColor-emphasis vs. bgColor-muted 12.95: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.97:1 4.5:1
bgColor-muted vs. display-indigo-borderColor-emphasis 5.13:1 4.5:1
bgColor-muted vs. display-blue-borderColor-emphasis 5.03:1 4.5:1
bgColor-muted vs. display-cyan-borderColor-emphasis 5.23:1 4.5:1
bgColor-muted vs. display-teal-borderColor-emphasis 5.03:1 4.5:1
bgColor-muted vs. display-pine-borderColor-emphasis 5.18:1 4.5:1
bgColor-muted vs. display-green-borderColor-emphasis 5.18:1 4.5:1
bgColor-muted vs. display-lime-borderColor-emphasis 5.12:1 4.5:1
bgColor-muted vs. display-olive-borderColor-emphasis 5.17:1 4.5:1
bgColor-muted vs. display-lemon-borderColor-emphasis 5.08:1 4.5:1
bgColor-muted vs. display-yellow-borderColor-emphasis 5.27:1 4.5:1
bgColor-muted vs. display-orange-borderColor-emphasis 5.16:1 4.5:1
bgColor-muted vs. display-red-borderColor-emphasis 5.09:1 4.5:1
bgColor-muted vs. display-coral-borderColor-emphasis 5.06:1 4.5:1
bgColor-muted vs. display-pink-borderColor-emphasis 4.97:1 4.5:1
bgColor-muted vs. display-plum-borderColor-emphasis 5.02:1 4.5:1
bgColor-muted vs. display-purple-borderColor-emphasis 5:1 4.5:1
bgColor-muted vs. display-brown-borderColor-emphasis 5.08:1 4.5:1
bgColor-muted vs. display-auburn-borderColor-emphasis 5.04: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 19.05:1 7:1
fgColor-muted vs. bgColor-default 17.57:1 7:1
fgColor-default vs. bgColor-muted 16.61:1 7:1
fgColor-muted vs. bgColor-muted 15.32:1 7:1
fgColor-default vs. bgColor-inset 19.99:1 7:1
fgColor-muted vs. bgColor-inset 18.43:1 7:1
control-fgColor-rest vs. bgColor-default 17.57:1 7:1
control-fgColor-rest vs. bgColor-muted 15.32:1 7:1
control-fgColor-rest vs. bgColor-inset 18.43:1 7:1
control-fgColor-rest vs. control-bgColor-rest 9.04:1 7:1
control-fgColor-placeholder vs. control-bgColor-rest 8.23:1 7:1
control-fgColor-rest vs. control-bgColor-active 9.74:1 7:1
control-fgColor-rest vs. control-bgColor-hover 7.39:1 7:1
control-fgColor-rest vs. control-bgColor-selected 12.74:1 7:1
fgColor-default vs. bgColor-neutral-muted on bgColor-default 17.32:1 7:1
fgColor-default vs. bgColor-neutral-muted on bgColor-muted 14.74:1 7:1
fgColor-default vs. bgColor-accent-muted on bgColor-default 16.9:1 7:1
fgColor-default vs. bgColor-accent-muted on bgColor-muted 14.31:1 7:1
fgColor-default vs. bgColor-success-muted on bgColor-default 15.69:1 7:1
fgColor-default vs. bgColor-success-muted on bgColor-muted 13.14:1 7:1
fgColor-default vs. bgColor-open-muted on bgColor-default 15.69:1 7:1
fgColor-default vs. bgColor-open-muted on bgColor-muted 13.14:1 7:1
fgColor-default vs. bgColor-danger-muted on bgColor-default 17.16:1 7:1
fgColor-default vs. bgColor-danger-muted on bgColor-muted 14.45:1 7:1
fgColor-default vs. bgColor-closed-muted on bgColor-default 17.16:1 7:1
fgColor-default vs. bgColor-closed-muted on bgColor-muted 14.45:1 7:1
fgColor-default vs. bgColor-attention-muted on bgColor-default 14.93:1 7:1
fgColor-default vs. bgColor-attention-muted on bgColor-muted 12.48:1 7:1
fgColor-default vs. bgColor-severe-muted on bgColor-default 17.23:1 7:1
fgColor-default vs. bgColor-severe-muted on bgColor-muted 14.52:1 7:1
fgColor-default vs. bgColor-done-muted on bgColor-default 17.22:1 7:1
fgColor-default vs. bgColor-done-muted on bgColor-muted 14.55:1 7:1
fgColor-default vs. bgColor-sponsors-muted on bgColor-default 17.24:1 7:1
fgColor-default vs. bgColor-sponsors-muted on bgColor-muted 14.72:1 7:1
fgColor-neutral vs. bgColor-default 11.12:1 7:1
fgColor-neutral vs. bgColor-muted 9.69:1 7:1
fgColor-neutral vs. bgColor-inset 11.66:1 7:1
fgColor-accent vs. bgColor-default 9.34:1 7:1
fgColor-accent vs. bgColor-muted 8.15:1 7:1
fgColor-accent vs. bgColor-inset 9.8:1 7:1
fgColor-success vs. bgColor-default 10.18:1 7:1
fgColor-success vs. bgColor-muted 8.88:1 7:1
fgColor-success vs. bgColor-inset 10.68:1 7:1
fgColor-open vs. bgColor-default 10.18:1 7:1
fgColor-open vs. bgColor-muted 8.88:1 7:1
fgColor-open vs. bgColor-inset 10.68:1 7:1
fgColor-danger vs. bgColor-default 9.22:1 7:1
fgColor-danger vs. bgColor-muted 8.04:1 7:1
fgColor-danger vs. bgColor-inset 9.68:1 7:1
fgColor-closed vs. bgColor-default 9.22:1 7:1
fgColor-closed vs. bgColor-muted 8.04:1 7:1
fgColor-closed vs. bgColor-inset 9.68:1 7:1
fgColor-attention vs. bgColor-default 10.73:1 7:1
fgColor-attention vs. bgColor-muted 9.36:1 7:1
fgColor-attention vs. bgColor-inset 11.26:1 7:1
fgColor-severe vs. bgColor-default 9.2:1 7:1
fgColor-severe vs. bgColor-muted 8.02:1 7:1
fgColor-severe vs. bgColor-inset 9.65:1 7:1
fgColor-done vs. bgColor-default 9.2:1 7:1
fgColor-done vs. bgColor-muted 8.02:1 7:1
fgColor-done vs. bgColor-inset 9.65:1 7:1
fgColor-upsell vs. bgColor-default 9.2:1 7:1
fgColor-upsell vs. bgColor-muted 8.02:1 7:1
fgColor-upsell vs. bgColor-inset 9.65:1 7:1
fgColor-sponsors vs. bgColor-default 9.21:1 7:1
fgColor-sponsors vs. bgColor-muted 8.03:1 7:1
fgColor-sponsors vs. bgColor-inset 9.66:1 7:1
fgColor-neutral vs. bgColor-neutral-muted on bgColor-default 10.1:1 7:1
fgColor-neutral vs. bgColor-neutral-muted on bgColor-muted 8.6:1 7:1
fgColor-accent vs. bgColor-accent-muted on bgColor-default 8.29:1 7:1
fgColor-accent vs. bgColor-accent-muted on bgColor-muted 7.02:1 7:1
fgColor-success vs. bgColor-success-muted on bgColor-default 8.39:1 7:1
fgColor-success vs. bgColor-success-muted on bgColor-muted 7.02:1 7:1
fgColor-open vs. bgColor-open-muted on bgColor-default 8.39:1 7:1
fgColor-open vs. bgColor-open-muted on bgColor-muted 7.02:1 7:1
fgColor-danger vs. bgColor-danger-muted on bgColor-default 8.31:1 7:1
fgColor-danger vs. bgColor-danger-muted on bgColor-muted 7:1 7:1
fgColor-closed vs. bgColor-closed-muted on bgColor-default 8.31:1 7:1
fgColor-closed vs. bgColor-closed-muted on bgColor-muted 7:1 7:1
fgColor-attention vs. bgColor-attention-muted on bgColor-default 8.41:1 7:1
fgColor-attention vs. bgColor-attention-muted on bgColor-muted 7.03:1 7:1
fgColor-severe vs. bgColor-severe-muted on bgColor-default 8.32:1 7:1
fgColor-severe vs. bgColor-severe-muted on bgColor-muted 7.01:1 7:1
fgColor-done vs. bgColor-done-muted on bgColor-default 8.32:1 7:1
fgColor-done vs. bgColor-done-muted on bgColor-muted 7.03:1 7:1
fgColor-upsell vs. bgColor-upsell-muted on bgColor-default 8.32:1 7:1
fgColor-upsell vs. bgColor-upsell-muted on bgColor-muted 7.03:1 7:1
fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-default 8.34:1 7:1
fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-muted 7.12:1 7:1
fgColor-onEmphasis vs. bgColor-neutral-emphasis 8.04:1 7:1
fgColor-onEmphasis vs. bgColor-accent-emphasis 8.2:1 7:1
fgColor-onEmphasis vs. bgColor-success-emphasis 8.62:1 7:1
fgColor-onEmphasis vs. bgColor-open-emphasis 8.62:1 7:1
fgColor-onEmphasis vs. bgColor-danger-emphasis 8.06:1 7:1
fgColor-onEmphasis vs. bgColor-closed-emphasis 8.06:1 7:1
fgColor-onEmphasis vs. bgColor-attention-emphasis 9.67:1 7:1
fgColor-onEmphasis vs. bgColor-severe-emphasis 7.98:1 7:1
fgColor-onEmphasis vs. bgColor-done-emphasis 8:1 7:1
fgColor-onEmphasis vs. bgColor-upsell-emphasis 8:1 7:1
fgColor-onEmphasis vs. bgColor-sponsors-emphasis 8.02:1 7:1
control-borderColor-emphasis vs. bgColor-default 8.04:1 4.5:1
control-borderColor-emphasis vs. bgColor-muted 7.01: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 7.44:1 7:1
fgColor-onEmphasis vs. display-indigo-bgColor-emphasis 7.55:1 7:1
fgColor-onEmphasis vs. display-blue-bgColor-emphasis 7.25:1 7:1
fgColor-onEmphasis vs. display-cyan-bgColor-emphasis 7.48:1 7:1
fgColor-onEmphasis vs. display-teal-bgColor-emphasis 7.31:1 7:1
fgColor-onEmphasis vs. display-pine-bgColor-emphasis 7.44:1 7:1
fgColor-onEmphasis vs. display-green-bgColor-emphasis 7.3:1 7:1
fgColor-onEmphasis vs. display-lime-bgColor-emphasis 7.43:1 7:1
fgColor-onEmphasis vs. display-olive-bgColor-emphasis 7.47:1 7:1
fgColor-onEmphasis vs. display-lemon-bgColor-emphasis 7.25:1 7:1
fgColor-onEmphasis vs. display-yellow-bgColor-emphasis 7.29:1 7:1
fgColor-onEmphasis vs. display-orange-bgColor-emphasis 7.33:1 7:1
fgColor-onEmphasis vs. display-red-bgColor-emphasis 7.49:1 7:1
fgColor-onEmphasis vs. display-coral-bgColor-emphasis 7.26:1 7:1
fgColor-onEmphasis vs. display-pink-bgColor-emphasis 7.27:1 7:1
fgColor-onEmphasis vs. display-plum-bgColor-emphasis 7.46:1 7:1
fgColor-onEmphasis vs. display-purple-bgColor-emphasis 7.26:1 7:1
fgColor-onEmphasis vs. display-brown-bgColor-emphasis 7.29:1 7:1
fgColor-onEmphasis vs. display-auburn-bgColor-emphasis 7.39:1 7:1
bgColor-default vs. display-gray-borderColor-emphasis 7.44:1 4.5:1
bgColor-default vs. display-indigo-borderColor-emphasis 7.55:1 4.5:1
bgColor-default vs. display-blue-borderColor-emphasis 7.25:1 4.5:1
bgColor-default vs. display-cyan-borderColor-emphasis 7.48:1 4.5:1
bgColor-default vs. display-teal-borderColor-emphasis 7.31:1 4.5:1
bgColor-default vs. display-pine-borderColor-emphasis 7.44:1 4.5:1
bgColor-default vs. display-green-borderColor-emphasis 7.3:1 4.5:1
bgColor-default vs. display-lime-borderColor-emphasis 7.43:1 4.5:1
bgColor-default vs. display-olive-borderColor-emphasis 7.47:1 4.5:1
bgColor-default vs. display-lemon-borderColor-emphasis 7.25:1 4.5:1
bgColor-default vs. display-yellow-borderColor-emphasis 7.29:1 4.5:1
bgColor-default vs. display-orange-borderColor-emphasis 7.33:1 4.5:1
bgColor-default vs. display-red-borderColor-emphasis 7.49:1 4.5:1
bgColor-default vs. display-coral-borderColor-emphasis 7.26:1 4.5:1
bgColor-default vs. display-pink-borderColor-emphasis 7.27:1 4.5:1
bgColor-default vs. display-plum-borderColor-emphasis 7.46:1 4.5:1
bgColor-default vs. display-purple-borderColor-emphasis 7.26:1 4.5:1
bgColor-default vs. display-brown-borderColor-emphasis 7.29:1 4.5:1
bgColor-default vs. display-auburn-borderColor-emphasis 7.39:1 4.5:1
bgColor-muted vs. display-gray-borderColor-emphasis 6.49:1 4.5:1
bgColor-muted vs. display-indigo-borderColor-emphasis 6.58:1 4.5:1
bgColor-muted vs. display-blue-borderColor-emphasis 6.32:1 4.5:1
bgColor-muted vs. display-cyan-borderColor-emphasis 6.52:1 4.5:1
bgColor-muted vs. display-teal-borderColor-emphasis 6.37:1 4.5:1
bgColor-muted vs. display-pine-borderColor-emphasis 6.48:1 4.5:1
bgColor-muted vs. display-green-borderColor-emphasis 6.37:1 4.5:1
bgColor-muted vs. display-lime-borderColor-emphasis 6.48:1 4.5:1
bgColor-muted vs. display-olive-borderColor-emphasis 6.51:1 4.5:1
bgColor-muted vs. display-lemon-borderColor-emphasis 6.32:1 4.5:1
bgColor-muted vs. display-yellow-borderColor-emphasis 6.35:1 4.5:1
bgColor-muted vs. display-orange-borderColor-emphasis 6.39:1 4.5:1
bgColor-muted vs. display-red-borderColor-emphasis 6.53:1 4.5:1
bgColor-muted vs. display-coral-borderColor-emphasis 6.33:1 4.5:1
bgColor-muted vs. display-pink-borderColor-emphasis 6.34:1 4.5:1
bgColor-muted vs. display-plum-borderColor-emphasis 6.5:1 4.5:1
bgColor-muted vs. display-purple-borderColor-emphasis 6.33:1 4.5:1
bgColor-muted vs. display-brown-borderColor-emphasis 6.36:1 4.5:1
bgColor-muted vs. display-auburn-borderColor-emphasis 6.44: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] avatar Jul 25 '24 00:07 github-actions[bot]

Design Token Diff

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-colorblind.css	2024-07-25 19:15:58.947564377 +0000
@@ -428,9 +428,12 @@
 --label-coral-fgColor-rest: #f7794b;
 --label-coral-fgColor-hover: #fa8c61;
 --label-coral-fgColor-active: #fdaa86;
+  --tooltip-bgColor: #6e7681;
+  --tooltip-fgColor: #ffffff;
 --fgColor-default: #e6edf3;
 --fgColor-muted: #8d96a0;
 --fgColor-onEmphasis: #ffffff;
+  --fgColor-onInverse: #010409;
 --fgColor-white: #ffffff;
 --fgColor-black: #010409;
 --fgColor-disabled: #6e7681;
@@ -992,9 +995,12 @@
   --label-coral-fgColor-rest: #f7794b;
   --label-coral-fgColor-hover: #fa8c61;
   --label-coral-fgColor-active: #fdaa86;
+    --tooltip-bgColor: #6e7681;
+    --tooltip-fgColor: #ffffff;
   --fgColor-default: #e6edf3;
   --fgColor-muted: #8d96a0;
   --fgColor-onEmphasis: #ffffff;
+    --fgColor-onInverse: #010409;
   --fgColor-white: #ffffff;
   --fgColor-black: #010409;
   --fgColor-disabled: #6e7681;

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-dimmed.css	2024-07-25 19:15:57.611552204 +0000
@@ -428,9 +428,12 @@
 --label-coral-fgColor-rest: #f7794b;
 --label-coral-fgColor-hover: #fa8c61;
 --label-coral-fgColor-active: #fdaa86;
+  --tooltip-bgColor: #636e7b;
+  --tooltip-fgColor: #cdd9e5;
 --fgColor-default: #c5d1de;
 --fgColor-muted: #778491;
 --fgColor-onEmphasis: #cdd9e5;
+  --fgColor-onInverse: #1c2128;
 --fgColor-white: #cdd9e5;
 --fgColor-black: #1c2128;
 --fgColor-disabled: #636e7b;
@@ -992,9 +995,12 @@
   --label-coral-fgColor-rest: #f7794b;
   --label-coral-fgColor-hover: #fa8c61;
   --label-coral-fgColor-active: #fdaa86;
+    --tooltip-bgColor: #636e7b;
+    --tooltip-fgColor: #cdd9e5;
   --fgColor-default: #c5d1de;
   --fgColor-muted: #778491;
   --fgColor-onEmphasis: #cdd9e5;
+    --fgColor-onInverse: #1c2128;
   --fgColor-white: #cdd9e5;
   --fgColor-black: #1c2128;
   --fgColor-disabled: #636e7b;

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-high-contrast.css	2024-07-25 19:15:59.603570354 +0000
@@ -206,7 +206,7 @@
 --controlTrack-bgColor-disabled: #9ea7b3;
 --controlTrack-fgColor-rest: #fbfcfd;
 --controlTrack-fgColor-disabled: #0a0c10;
-  --controlTrack-borderColor-rest: #00000000;
+  --controlTrack-borderColor-rest: #9ea7b3;
 --controlTrack-borderColor-disabled: #9ea7b3;
 --controlKnob-bgColor-rest: #010409;
 --controlKnob-bgColor-disabled: #3d424db3;
@@ -428,9 +428,12 @@
 --label-coral-fgColor-rest: #f7794b;
 --label-coral-fgColor-hover: #fa8c61;
 --label-coral-fgColor-active: #fdaa86;
+  --tooltip-bgColor: #ffffff;
+  --tooltip-fgColor: #010409;
 --fgColor-default: #fbfcfd;
 --fgColor-muted: #f0f3f6;
 --fgColor-onEmphasis: #0a0c10;
+  --fgColor-onInverse: #010409;
 --fgColor-white: #ffffff;
 --fgColor-black: #010409;
 --fgColor-disabled: #9ea7b3;
@@ -770,7 +773,7 @@
   --controlTrack-bgColor-disabled: #9ea7b3;
   --controlTrack-fgColor-rest: #fbfcfd;
   --controlTrack-fgColor-disabled: #0a0c10;
-    --controlTrack-borderColor-rest: #00000000;
+    --controlTrack-borderColor-rest: #9ea7b3;
   --controlTrack-borderColor-disabled: #9ea7b3;
   --controlKnob-bgColor-rest: #010409;
   --controlKnob-bgColor-disabled: #3d424db3;
@@ -992,9 +995,12 @@
   --label-coral-fgColor-rest: #f7794b;
   --label-coral-fgColor-hover: #fa8c61;
   --label-coral-fgColor-active: #fdaa86;
+    --tooltip-bgColor: #ffffff;
+    --tooltip-fgColor: #010409;
   --fgColor-default: #fbfcfd;
   --fgColor-muted: #f0f3f6;
   --fgColor-onEmphasis: #0a0c10;
+    --fgColor-onInverse: #010409;
   --fgColor-white: #ffffff;
   --fgColor-black: #010409;
   --fgColor-disabled: #9ea7b3;

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-tritanopia.css	2024-07-25 19:15:58.275558255 +0000
@@ -428,9 +428,12 @@
 --label-coral-fgColor-rest: #f7794b;
 --label-coral-fgColor-hover: #fa8c61;
 --label-coral-fgColor-active: #fdaa86;
+  --tooltip-bgColor: #6e7681;
+  --tooltip-fgColor: #ffffff;
 --fgColor-default: #e6edf3;
 --fgColor-muted: #8d96a0;
 --fgColor-onEmphasis: #ffffff;
+  --fgColor-onInverse: #010409;
 --fgColor-white: #ffffff;
 --fgColor-black: #010409;
 --fgColor-disabled: #6e7681;
@@ -992,9 +995,12 @@
   --label-coral-fgColor-rest: #f7794b;
   --label-coral-fgColor-hover: #fa8c61;
   --label-coral-fgColor-active: #fdaa86;
+    --tooltip-bgColor: #6e7681;
+    --tooltip-fgColor: #ffffff;
   --fgColor-default: #e6edf3;
   --fgColor-muted: #8d96a0;
   --fgColor-onEmphasis: #ffffff;
+    --fgColor-onInverse: #010409;
   --fgColor-white: #ffffff;
   --fgColor-black: #010409;
   --fgColor-disabled: #6e7681;

/css/functional/themes/dark.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark.css	2024-07-25 19:15:56.919545912 +0000
@@ -428,9 +428,12 @@
 --label-coral-fgColor-rest: #f7794b;
 --label-coral-fgColor-hover: #fa8c61;
 --label-coral-fgColor-active: #fdaa86;
+  --tooltip-bgColor: #6e7681;
+  --tooltip-fgColor: #ffffff;
 --fgColor-default: #e6edf3;
 --fgColor-muted: #8d96a0;
 --fgColor-onEmphasis: #ffffff;
+  --fgColor-onInverse: #010409;
 --fgColor-white: #ffffff;
 --fgColor-black: #010409;
 --fgColor-disabled: #6e7681;
@@ -992,9 +995,12 @@
   --label-coral-fgColor-rest: #f7794b;
   --label-coral-fgColor-hover: #fa8c61;
   --label-coral-fgColor-active: #fdaa86;
+    --tooltip-bgColor: #6e7681;
+    --tooltip-fgColor: #ffffff;
   --fgColor-default: #e6edf3;
   --fgColor-muted: #8d96a0;
   --fgColor-onEmphasis: #ffffff;
+    --fgColor-onInverse: #010409;
   --fgColor-white: #ffffff;
   --fgColor-black: #010409;
   --fgColor-disabled: #6e7681;

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-colorblind.css	2024-07-25 19:15:55.259530822 +0000
@@ -429,9 +429,12 @@
 --label-coral-fgColor-rest: #ba2e12;
 --label-coral-fgColor-hover: #9b2712;
 --label-coral-fgColor-active: #7e2011;
+  --tooltip-bgColor: #24292f;
+  --tooltip-fgColor: #ffffff;
 --fgColor-default: #1f2328;
 --fgColor-muted: #636c76;
 --fgColor-onEmphasis: #ffffff;
+  --fgColor-onInverse: #ffffff;
 --fgColor-white: #ffffff;
 --fgColor-black: #1f2328;
 --fgColor-disabled: #8c959f;
@@ -993,9 +996,12 @@
   --label-coral-fgColor-rest: #ba2e12;
   --label-coral-fgColor-hover: #9b2712;
   --label-coral-fgColor-active: #7e2011;
+    --tooltip-bgColor: #24292f;
+    --tooltip-fgColor: #ffffff;
   --fgColor-default: #1f2328;
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;
+    --fgColor-onInverse: #ffffff;
   --fgColor-white: #ffffff;
   --fgColor-black: #1f2328;
   --fgColor-disabled: #8c959f;

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-high-contrast.css	2024-07-25 19:15:56.063538131 +0000
@@ -206,7 +206,7 @@
 --controlTrack-bgColor-disabled: #66707b;
 --controlTrack-fgColor-rest: #010409;
 --controlTrack-fgColor-disabled: #ffffff;
-  --controlTrack-borderColor-rest: #ffffff00;
+  --controlTrack-borderColor-rest: #66707b;
 --controlTrack-borderColor-disabled: #66707b;
 --controlKnob-bgColor-rest: #ffffff;
 --controlKnob-bgColor-disabled: #ced5dcb3;
@@ -429,9 +429,12 @@
 --label-coral-fgColor-rest: #ba2e12;
 --label-coral-fgColor-hover: #9b2712;
 --label-coral-fgColor-active: #7e2011;
+  --tooltip-bgColor: #0e1116;
+  --tooltip-fgColor: #ffffff;
 --fgColor-default: #010409;
 --fgColor-muted: #0e1116;
 --fgColor-onEmphasis: #ffffff;
+  --fgColor-onInverse: #ffffff;
 --fgColor-white: #ffffff;
 --fgColor-black: #010409;
 --fgColor-disabled: #66707b;
@@ -770,7 +773,7 @@
   --controlTrack-bgColor-disabled: #66707b;
   --controlTrack-fgColor-rest: #010409;
   --controlTrack-fgColor-disabled: #ffffff;
-    --controlTrack-borderColor-rest: #ffffff00;
+    --controlTrack-borderColor-rest: #66707b;
   --controlTrack-borderColor-disabled: #66707b;
   --controlKnob-bgColor-rest: #ffffff;
   --controlKnob-bgColor-disabled: #ced5dcb3;
@@ -993,9 +996,12 @@
   --label-coral-fgColor-rest: #ba2e12;
   --label-coral-fgColor-hover: #9b2712;
   --label-coral-fgColor-active: #7e2011;
+    --tooltip-bgColor: #0e1116;
+    --tooltip-fgColor: #ffffff;
   --fgColor-default: #010409;
   --fgColor-muted: #0e1116;
   --fgColor-onEmphasis: #ffffff;
+    --fgColor-onInverse: #ffffff;
   --fgColor-white: #ffffff;
   --fgColor-black: #010409;
   --fgColor-disabled: #66707b;

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-tritanopia.css	2024-07-25 19:15:54.599524823 +0000
@@ -429,9 +429,12 @@
 --label-coral-fgColor-rest: #ba2e12;
 --label-coral-fgColor-hover: #9b2712;
 --label-coral-fgColor-active: #7e2011;
+  --tooltip-bgColor: #24292f;
+  --tooltip-fgColor: #ffffff;
 --fgColor-default: #1f2328;
 --fgColor-muted: #636c76;
 --fgColor-onEmphasis: #ffffff;
+  --fgColor-onInverse: #ffffff;
 --fgColor-white: #ffffff;
 --fgColor-black: #1f2328;
 --fgColor-disabled: #8c959f;
@@ -993,9 +996,12 @@
   --label-coral-fgColor-rest: #ba2e12;
   --label-coral-fgColor-hover: #9b2712;
   --label-coral-fgColor-active: #7e2011;
+    --tooltip-bgColor: #24292f;
+    --tooltip-fgColor: #ffffff;
   --fgColor-default: #1f2328;
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;
+    --fgColor-onInverse: #ffffff;
   --fgColor-white: #ffffff;
   --fgColor-black: #1f2328;
   --fgColor-disabled: #8c959f;

/css/functional/themes/light.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light.css	2024-07-25 19:15:53.683516497 +0000
@@ -429,9 +429,12 @@
 --label-coral-fgColor-rest: #ba2e12;
 --label-coral-fgColor-hover: #9b2712;
 --label-coral-fgColor-active: #7e2011;
+  --tooltip-bgColor: #24292f;
+  --tooltip-fgColor: #ffffff;
 --fgColor-default: #1f2328;
 --fgColor-muted: #636c76;
 --fgColor-onEmphasis: #ffffff;
+  --fgColor-onInverse: #ffffff;
 --fgColor-white: #ffffff;
 --fgColor-black: #1f2328;
 --fgColor-disabled: #8c959f;
@@ -993,9 +996,12 @@
   --label-coral-fgColor-rest: #ba2e12;
   --label-coral-fgColor-hover: #9b2712;
   --label-coral-fgColor-active: #7e2011;
+    --tooltip-bgColor: #24292f;
+    --tooltip-fgColor: #ffffff;
   --fgColor-default: #1f2328;
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;
+    --fgColor-onInverse: #ffffff;
   --fgColor-white: #ffffff;
   --fgColor-black: #1f2328;
   --fgColor-disabled: #8c959f;

github-actions[bot] avatar Jul 25 '24 00:07 github-actions[bot]