Removed space tokens #956

lukasoppermann · 2024-05-16T08:06:08Z

Summary

Caution

This can only be considered a minor change if we remove any use of --space tokens before we merge and release this.

This PR removes the --space tokens. They are deprecated and users should use --base-size tokens instead.

However, they are still in use:

GitHub
Primer (only 2 cases)
- Update Banner.tsx react#4598

Tasks

update styleLint plugin: https://github.com/primer/stylelint-config/blob/86cf24f5c1f3f51b5085a5808a5406bc04e47b68/__tests__/__fixtures__/good/example.module.css#L131 also to suggest base size for 2px and 6px
fix uses for GitHub

changeset-bot · 2024-05-16T08:06:12Z

🦋 Changeset detected

Latest commit: 7905f0b

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	Major

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 · 2024-05-16T08:07:02Z

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-selected	✅	13.76: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-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-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-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-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-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-selected	✅	11.2: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	✅	14.28:1	4.5:1
fgColor-default vs. bgColor-open-muted on bgColor-muted	✅	12.85: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	✅	13.65:1	4.5:1
fgColor-default vs. bgColor-closed-muted on bgColor-muted	✅	12.34: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-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-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-accent vs. bgColor-accent-muted on bgColor-default	✅	5.46: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.64:1	4.5:1
fgColor-open vs. bgColor-open-muted on bgColor-muted	✅	5.97: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	✅	4.81: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-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-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

github-actions · 2024-05-16T08:07:14Z

Design Token Diff

/css/functional/size/size.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/size/size.css	2024-06-21 19:39:44.445588247 +0000
@@ -40,12 +40,6 @@
 --controlStack-large-gap-auto: 0.5rem;
 --controlStack-large-gap-condensed: 0.5rem;
 --controlStack-large-gap-spacious: 0.75rem;
-  --space-xxsmall: 0.125rem;
-  --space-xsmall: 0.25rem;
-  --space-small: 0.375rem;
-  --space-medium: 0.5rem;
-  --space-large: 0.75rem;
-  --space-xlarge: 1rem;
 --spinner-strokeWidth-default: 0.125rem;
 --spinner-size-small: 1rem;
 --spinner-size-medium: 2rem;

/css/primitives.css

+++ /home/runner/work/primitives/primitives/dist/css/primitives.css	2024-06-21 19:39:44.741589597 +0000
@@ -108,12 +108,6 @@
 --controlStack-large-gap-auto: 0.5rem;
 --controlStack-large-gap-condensed: 0.5rem;
 --controlStack-large-gap-spacious: 0.75rem;
-  --space-xxsmall: 0.125rem;
-  --space-xsmall: 0.25rem;
-  --space-small: 0.375rem;
-  --space-medium: 0.5rem;
-  --space-large: 0.75rem;
-  --space-xlarge: 1rem;
 --spinner-strokeWidth-default: 0.125rem;
 --spinner-size-small: 1rem;
 --spinner-size-medium: 2rem;

lukasoppermann · 2024-06-12T06:56:12Z

@langermank I removed the use, do you think we can merge this with just a minor version bump?

.changeset/orange-jokes-dance.md

rm space tokens

5c5d9d8

lukasoppermann requested a review from langermank May 16, 2024 08:06

lukasoppermann requested review from a team as code owners May 16, 2024 08:06

lukasoppermann temporarily deployed to github-pages May 16, 2024 08:07 — with GitHub Actions Inactive

github-actions bot temporarily deployed to Preview (Storybook) May 16, 2024 08:08 Inactive

lukasoppermann mentioned this pull request May 16, 2024

Update Banner.tsx primer/react#4598

Merged

13 tasks

Merge branch 'main' into rm-space-tokens

f45fdf9

lukasoppermann temporarily deployed to github-pages May 17, 2024 11:57 — with GitHub Actions Inactive

github-actions bot temporarily deployed to Preview (Storybook) May 17, 2024 11:57 Inactive

Merge branch 'main' into rm-space-tokens

1c2e4b1

lukasoppermann temporarily deployed to github-pages June 10, 2024 09:45 — with GitHub Actions Inactive

github-actions bot temporarily deployed to Preview (Storybook) June 10, 2024 09:46 Inactive

Merge branch 'main' into rm-space-tokens

7085041

lukasoppermann temporarily deployed to github-pages June 12, 2024 06:57 — with GitHub Actions Inactive

github-actions bot temporarily deployed to Preview (Storybook) June 12, 2024 06:57 Inactive

lukasoppermann commented Jun 21, 2024

View reviewed changes

.changeset/orange-jokes-dance.md Outdated Show resolved Hide resolved

lukasoppermann added 2 commits June 21, 2024 21:38

Update .changeset/orange-jokes-dance.md

3e176b5

Merge branch 'main' into rm-space-tokens

7905f0b

github-actions bot temporarily deployed to Preview (Storybook) June 21, 2024 19:40 Inactive

lukasoppermann temporarily deployed to github-pages June 21, 2024 19:40 — with GitHub Actions Inactive

github-actions bot temporarily deployed to Preview (Storybook) June 21, 2024 19:40 Inactive

langermank added the major Breaking change label Jul 31, 2024

langermank approved these changes Jul 31, 2024

View reviewed changes

langermank merged commit 13f62d5 into main Jul 31, 2024
23 checks passed

langermank deleted the rm-space-tokens branch July 31, 2024 21:15

primer bot mentioned this pull request Jul 31, 2024

Release Tracking #1020

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Removed space tokens #956

Removed space tokens #956

lukasoppermann commented May 16, 2024 •

edited

Loading

changeset-bot bot commented May 16, 2024 •

edited

Loading

github-actions bot commented May 16, 2024 •

edited

Loading

github-actions bot commented May 16, 2024 •

edited

Loading

/css/functional/size/size.css

/css/primitives.css

lukasoppermann commented Jun 12, 2024

Removed space tokens #956

Removed space tokens #956

Conversation

lukasoppermann commented May 16, 2024 • edited Loading

Summary

Tasks

changeset-bot bot commented May 16, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented May 16, 2024 • edited Loading

Design Token Contrast Check

light: ✅ all checks passed

dark: ✅ all checks passed

github-actions bot commented May 16, 2024 • edited Loading

Design Token Diff

/css/functional/size/size.css

/css/primitives.css

lukasoppermann commented Jun 12, 2024

lukasoppermann commented May 16, 2024 •

edited

Loading

changeset-bot bot commented May 16, 2024 •

edited

Loading

github-actions bot commented May 16, 2024 •

edited

Loading

`light`: ✅ all checks passed

`dark`: ✅ all checks passed

github-actions bot commented May 16, 2024 •

edited

Loading