104 lines
3.0 KiB
YAML
104 lines
3.0 KiB
YAML
id: button-outline-text-foreground-contrast
|
|
language: tsx
|
|
files:
|
|
- src/**/*.tsx
|
|
message: "Outline button with text-foreground class causes invisible text. The outline variant has a transparent background, making text-foreground color blend with the background and become unreadable. Use text-primary or another contrasting color instead."
|
|
rule:
|
|
kind: jsx_element
|
|
has:
|
|
kind: jsx_opening_element
|
|
all:
|
|
- has:
|
|
field: name
|
|
regex: "^Button$"
|
|
- has:
|
|
kind: jsx_attribute
|
|
all:
|
|
- has:
|
|
kind: property_identifier
|
|
regex: "^variant$"
|
|
- has:
|
|
kind: string
|
|
has:
|
|
kind: string_fragment
|
|
regex: "^outline$"
|
|
- has:
|
|
kind: jsx_attribute
|
|
all:
|
|
- has:
|
|
kind: property_identifier
|
|
regex: "^className$"
|
|
- has:
|
|
kind: string
|
|
has:
|
|
kind: string_fragment
|
|
regex: "(^|\\s)text-foreground(\\s|$)"
|
|
---
|
|
id: button-default-text-primary-contrast
|
|
language: tsx
|
|
files:
|
|
- src/**/*.tsx
|
|
message: "Default button with text-primary class causes poor contrast. The default variant has a primary-colored background, making text-primary color blend with the background and become hard to read. Remove the text-primary class or specify a different variant like 'outline' or 'ghost'."
|
|
rule:
|
|
kind: jsx_element
|
|
has:
|
|
kind: jsx_opening_element
|
|
all:
|
|
- has:
|
|
field: name
|
|
regex: "^Button$"
|
|
- has:
|
|
kind: jsx_attribute
|
|
all:
|
|
- has:
|
|
kind: property_identifier
|
|
regex: "^className$"
|
|
- has:
|
|
kind: string
|
|
has:
|
|
kind: string_fragment
|
|
regex: "(^|\\s)text-primary(\\s|$)"
|
|
- not:
|
|
has:
|
|
kind: jsx_attribute
|
|
has:
|
|
kind: property_identifier
|
|
regex: "^variant$"
|
|
|
|
---
|
|
id: button-outline-white-gray-contrast
|
|
language: tsx
|
|
files:
|
|
- src/**/*.tsx
|
|
message: "Outline button with white/gray text color has poor contrast. Remove the text color class and use the default button text color."
|
|
rule:
|
|
kind: jsx_element
|
|
has:
|
|
kind: jsx_opening_element
|
|
all:
|
|
- has:
|
|
field: name
|
|
regex: "^Button$"
|
|
- has:
|
|
kind: jsx_attribute
|
|
all:
|
|
- has:
|
|
kind: property_identifier
|
|
regex: "^variant$"
|
|
- has:
|
|
kind: string
|
|
has:
|
|
kind: string_fragment
|
|
regex: "^outline$"
|
|
- has:
|
|
kind: jsx_attribute
|
|
all:
|
|
- has:
|
|
kind: property_identifier
|
|
regex: "^className$"
|
|
- has:
|
|
kind: string
|
|
has:
|
|
kind: string_fragment
|
|
regex: "(^|\\s)text-(white|gray)(-[0-9]+)?(\\s|$)"
|