Add "outline-none" and "shadow-outline" utilities

[reinink]

This is an alternative to #490, and implements what I suggested in #56 (comment).

1. This adds new outline module, which includes a single outline-none utility.
2. This adds a new default shadow utility, called shadow-outline. Since box-shadows are more useful than outlines in CSS (mostly because they respect border-radius), it makes more sense to use them than real CSS outlines.
3. This enables the focus variant for shadows and outlines by default.
4. This removes the default tabindex="-1" outline style from Preflight.

Closes #56
Closes #385
Closes #427

[joshmanders]

Ship it!

[DCzajkowski]

What do you think about naming them outline-none and outline-shadow respectively? It'd be more consistent in my opinion.

[adamwathan]

What do you think about naming them outline-none and outline-shadow respectively? It'd be more consistent in my opinion.

All box shadow utilities have to start with shadow-; you can only specify the modifier name in the config and I think it would be misleading to call it outline-shadow because it sounds like it's setting the outline CSS property when it's actually setting box-shadow.

[adamwathan]

Bootstrap uses outline: 0 for theirs, not sure if it really matters but when there are multiple ways to do things I think it's a good idea to use precedent from a huge project with tons of users. Saves a couple bits in the compiled CSS too I guess.

[reinink]

Yep, okay, will update.

[DCzajkowski]

@adamwathan Yeah, true. It would be nice to have all outline-related classes with the outline- prefix, but there is no good way of doing that. But it should be outline-none for consistency.
There is shadow-none, appearance-none, select-none, resize-none, pointer-events-none, border-none, leading-none, pin-none, float-none and only one no-underline.

[adamwathan]

@DCzajkowski Yeah I don't really mind calling it outline-none or outline-0 (which is more accurate since that's how it's actually implemented). I prefer no-outline personally because I don't have to remember "is it none or 0?" (I mess this up constantly with rounded-none already) but I can appreciate that it feels more consistent, and sets us up better down the road if we ever decided it was valuable to add a real customizable outline module. The consistency argument is a little tough still though, because it would be very hard to convince me to change no-underline to decoration-none for example, heh.

@reinink What do you think about removing the tabindex outline styles from preflight mentioned in #427 as part of this PR? I figure it's more flexible to make that behavior opt-in by writing <div class="no-outline" tabindex="-1"> than to force it on everyone.

[adamwathan]

Also as part of this PR, we might want to consider enabling the focus variant for the shadows module by default.

Also wondering, if you apply outline: none to a non-focus selector, does that trump the user agent focus styles in all browsers? I know it does in Chrome for sure, but might we need to actually disable outline on focus instead of with no pseudo-class?

.no-outline {
  outline: none;
}

// vs.

.focus\:no-outline:focus {
  outline: none;
}

[reinink]

Also as part of this PR, we might want to consider enabling the focus variant for the shadows module by default.

Yup, totally.

I know it does in Chrome for sure, but might we need to actually disable outline on focus instead of with no pseudo-class?

I've never done it that way before.

[reinink]

Okay, updated:

1. Renamed "no-outline" to "outline-none" instead
2. Enabled focus variants for shadows by default
3. Enabled focus variants for outlines by default
4. Removed default tabindex="-1" outline style in Preflight