Skip to main content
Tight uses specialized CSS patterns in certain components to ensure consistent behavior. When customizing these components beyond what design tokens provide, you’ll need to match these patterns to maintain the intended functionality. This reference documents these patterns and explains how to work with them effectively.

​
Hover Styles

Tight uses a CSS selector for the hover pseudo-class that ensures consistent behavior across touch-based devices. Recommended approach: Modify the hover design tokens to customize hover styles. This is the simplest and most maintainable way to adjust hover colors and states. If design tokens aren’t sufficient: You may override the hover pseudo-class on a specific class directly for more granular control. Use the following selector pattern to ensure your rule takes precedence over the default: 
@media (hover: hover) and (pointer: fine) {
  &:hover {
    /* Your hover styles here */
  }
}
This ensures hover styles only apply on devices that support hovering, preventing issues on touch-based devices where interactions could otherwise trigger unintended hover states.