diff --git a/lib/design-lint/rules/color.ts b/lib/design-lint/rules/color.ts index b19694c21..5858904b9 100644 --- a/lib/design-lint/rules/color.ts +++ b/lib/design-lint/rules/color.ts @@ -12,7 +12,6 @@ import { mergedRules } from '../context'; import { firstFamily, GENERIC_FAMILIES, isTokenRule, pxOf, resolveVars, splitTop, type CssDecl, type MergedRule, type Tokens } from '../css'; import type { Reporter } from '../report'; import { trunc } from '../report'; -import { twGroup } from '../tailwind'; const COLOR_FN = /#[0-9a-fA-F]{3,8}\b|oklch\([^)]*\)|rgba?\([^)]*\)|hsla?\([^)]*\)/g; @@ -94,15 +93,6 @@ function check2(ctx: LintContext, r: Reporter): void { if (banned) r.report('purple-blue-gradient', rule.file, d.line, `${banned} gradient on ${rule.selector}`, { fix: 'one anchor hue; drop the gradient' }); } } - for (const it of twGroup(ctx).items) { - const { stops, gradientText } = it.info; - if (!stops.length || (!gradientText && stops.length < 2)) continue; - const hues = stops.map((s) => s.hue).filter((h): h is number => h != null); - const banned = bannedGradient(hues, ctx.twTokens ?? ctx.tokens); - const list = stops.map((s) => s.value).join(' '); - if (banned) r.report('purple-blue-gradient', it.file, it.line, `${banned} gradient${gradientText ? ' text' : ''} (${list}) on <${it.tag}>`); - else if (gradientText) r.report('gradient-text', it.file, it.line, `gradient text (${list}) on <${it.tag}>`); - } } // sloplint check7 (gates 7a, 7b) diff --git a/test/design-lint-color.test.ts b/test/design-lint-color.test.ts index 2556055dc..6a788a701 100644 --- a/test/design-lint-color.test.ts +++ b/test/design-lint-color.test.ts @@ -168,30 +168,7 @@ describe('design-lint colour: literal-outside-tokens (48, blocks)', () => { }); }); -describe('design-lint colour: Tailwind gradients through the parsed class strings', () => { - test('a purple-to-blue stop pair blocks, a one-hue gradient text asks, and no items means no findings', () => { - const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'design-lint-color-tw-')); - fs.writeFileSync(path.join(dir, 'tokens.css'), TOKENS); - const ctx = buildContext(dir, [path.join(dir, 'tokens.css')], [], { cwd: dir }); - const info = { classes: [], bg: null, text: null, sizePx: null, trackingEm: null, upper: false, smallCaps: false, mono: false, variants: new Set() }; - const items: TwItem[] = [ - { file: path.join(dir, 'Hero.tsx'), line: 4, idx: 2, tag: 'div', info: { ...info, gradientText: false, stops: [{ kind: 'palette', hue: 293, value: 'from-purple-500' }, { kind: 'palette', hue: 260, value: 'to-blue-500' }] } }, - { file: path.join(dir, 'Hero.tsx'), line: 9, idx: 5, tag: 'span', info: { ...info, gradientText: true, stops: [{ kind: 'palette', hue: 70, value: 'from-amber-400' }, { kind: 'palette', hue: 50, value: 'to-orange-600' }] } }, - { file: path.join(dir, 'Hero.tsx'), line: 12, idx: 7, tag: 'p', info: { ...info, gradientText: false, stops: [{ kind: 'palette', hue: 293, value: 'bg-purple-500' }] } }, - ]; - ctx.cache.tw = { items, variants: new Set() }; - const r = new Reporter('component', dir); - runColor(ctx, r); - expect(r.findings.filter((f) => f.rule === 'purple-blue-gradient' || f.rule === 'gradient-text').map((f) => [f.rule, f.grade, f.line, f.evidence])).toEqual([ - ['purple-blue-gradient', 'blocks', 4, 'purple-to-blue gradient (from-purple-500 to-blue-500) on
'], - ['gradient-text', 'ask', 9, 'gradient text (from-amber-400 to-orange-600) on '], - ]); - const empty = buildContext(dir, [path.join(dir, 'tokens.css')], [], { cwd: dir }); - const r2 = new Reporter('component', dir); - runColor(empty, r2); - expect(r2.findings).toEqual([]); - }); -}); +// The Tailwind forms of 2a/2b are the component family's (rules/component.ts, test/design-lint-tailwind.test.ts). describe('design-lint colour: fixtures', () => { const MINE = new Set(['purple-blue-gradient', 'gradient-text', 'pure-black-white', 'absolute-surface-token', 'zero-chroma-neutrals', 'accent-footprint', 'glow-wash', 'cream-palette', 'framework-palette', 'literal-outside-tokens']);