feat(erb-lint): add DeprecatedClasses cop for raw gray utility classes (#1656)

Activates the built-in erb_lint DeprecatedClasses linter to flag raw
text-gray-N, bg-gray-N, border-gray-N, text-white, and bg-white
classes in <%= class="..." %> attributes, with suggestions pointing
at the design-system tokens.

Three rule_set entries cover the foreground, background, and border
families respectively, each with a tailored suggestion message
listing the closest semantic alternatives. The shared addendum
points at the token JSON and the design-system stylesheet for
deeper context.

Note: the cop only inspects literal HTML class attributes. Ruby
string assignments (class: "...") inside ERB tags are not scanned.
A custom Rubocop cop targeting those would close the gap; tracked
as future work.
This commit is contained in:
Guillem Arias Fauste
2026-05-04 22:03:47 +02:00
committed by GitHub
parent 0d32bb70ec
commit b30f3f5bce

View File

@@ -6,4 +6,38 @@ linters:
rubocop_config:
Style/StringLiterals:
Enabled: true
EnforcedStyle: double_quotes
EnforcedStyle: double_quotes
DeprecatedClasses:
enabled: true
addendum: "Design tokens live in design/tokens/sure.tokens.json; semantic utilities are documented in app/assets/tailwind/sure-design-system.css."
rule_set:
- suggestion: "Use text-primary, text-secondary, text-subdued, text-inverse, text-link, or a semantic color token (text-success, text-warning, text-destructive)."
deprecated:
- 'text-gray-50'
- 'text-gray-100'
- 'text-gray-200'
- 'text-gray-500'
- 'text-gray-600'
- 'text-gray-700'
- 'text-gray-800'
- 'text-gray-900'
- 'text-white'
- suggestion: "Use bg-container, bg-container-inset, bg-surface, bg-surface-inset, bg-inverse, button-bg-primary, button-bg-secondary, or one of their hover variants."
deprecated:
- 'bg-gray-50'
- 'bg-gray-100'
- 'bg-gray-200'
- 'bg-gray-500'
- 'bg-gray-600'
- 'bg-gray-700'
- 'bg-gray-800'
- 'bg-gray-900'
- 'bg-white'
- suggestion: "Use border-primary, border-secondary, border-tertiary, border-subdued, border-inverse, or border-destructive."
deprecated:
- 'border-gray-200'
- 'border-gray-300'
- 'border-gray-500'
- 'border-gray-700'
- 'border-gray-900'
- 'border-white'