CSS Utilities: hover

[francisrupert]

• Spun off from #381

Determine

• Should it be its own Utility category, i.e. fsa-hover-[target]--[color] or coupled with current, i.e. fsa-[target]-hover---[color]?
• What's the naming convention? Starting with assumption of above. Alternate can be something like fsa-bg:hover--[color].

Targets

• [x] Background
  • [x] Base
  • [x] RWD scopes
  • [x] Kitchen Sink
• [x] Border
  • [x] Base
  • [x] RWD scopes
  • [x] Kitchen Sink
• [x] Text Link
  • [x] Base
  • [x] RWD scopes
  • [x] Kitchen Sink
• [x] Underline
  • [x] Base
  • [x] RWD scopes
  • [x] Kitchen Sink
• [x] Text Descoped, in favor of link hover
  • [x] Base
  • [x] RWD scopes
  • [x] Kitchen Sink
• [x] Shadow
  • [x] Base
  • [x] RWD scopes
  • [x] Kitchen Sink

[francisrupert]

Namespace result

Slightly different than initially speculated in this issue's original post.

Orginal Idea

fsa-hover-[target]--[modifier][@BP], e.g. fsa-hover-bg--tertiary@m

Result

fsa-[target]:hover--[modifier][@BP], e.g. fsa-bg:hover--tertiary@m

Which can be read as "hovering this gives it a charcoal background color when viewport is wider than medium breakpoint"