From b30f3f5bce66e0e8e55c7665ddeea23c483a1ae6 Mon Sep 17 00:00:00 2001
From: Guillem Arias Fauste <gariasf@proton.me>
Date: Mon, 4 May 2026 22:03:47 +0200
Subject: [PATCH] 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.
---
 .erb_lint.yml | 36 +++++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/.erb_lint.yml b/.erb_lint.yml
index 5b4eaa6b3..25e2184f9 100644
--- a/.erb_lint.yml
+++ b/.erb_lint.yml
@@ -6,4 +6,38 @@ linters:
     rubocop_config:
       Style/StringLiterals:
         Enabled: true
-        EnforcedStyle: double_quotes
\ No newline at end of file
+        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'
\ No newline at end of file