Add more .border-white-fade utilities

[simurai]

This PR adds a few new .border-white-fade utility classes to be used on dark backgrounds.

• Moves .border-white-fade from "marketing" to "core".
• Adds multiple .border-white-fade-xx utilities to "marketing".

✨ New in core

/cc @primer/ds-core

[shawnbot]

Ack. @simurai it looks like there's already a border-white-fade in marketing utilities:

css/src/marketing/utilities/borders.scss

Lines 7 to 9 in 368cf73

	.border-white-fade {
	border-color: $white-fade-15 !important;
	}

...which is actually not a blocker for this PR! I like that we're adding a color variable and that the declaration (syntax-wise) matches the other border utilities. So this is a good change on the whole.

I think we just need to move some things around so that it's part of the utilities bundle rather than marketing/utilities. As for whether or not this would be a breaking change — in the sense that we shouldn't break sites that import marketing or marketing/utilities bundles, or even @primer/css/marketing/utilities/borders.scss directly — we have some options:

1. We can move this (improved) .border-white-fade declaration into src/marketing/utilities/borders.scss, and move the import for it from src/marketing/utilities/index.scss to src/utilities/index.scss.

2. We can leave the files in this PR as-is, remove the import from src/marketing/utilities/index.scss, and empty out src/marketing/utilities/borders.scss so that importing it has no effect. In this case I think we'd want to queue up removing it entirely for the next major release.

Any thoughts or concerns, @jonrohan, @sophshep @gladwearefriends?

[simurai]

Option 1 feels a bit weird, importing from src/marketing/utilities/borders.scss into src/utilities/index.scss, so I pushed option 2.

But maybe we can also reconsider option 3? Have a border color scale like @jonrohan initially suggested:

.border-black-fade-15 { border-color: rgba($black, 0.15) !important; }
.border-black-fade-30 { border-color: rgba($black, 0.3) !important; }
.border-black-fade-50 { border-color: rgba($black, 0.5) !important; }
.border-black-fade-70 { border-color: rgba($black, 0.7) !important; }
.border-black-fade-85 { border-color: rgba($black, 0.85) !important; }

.border-white-fade-15 { border-color: rgba($white, 0.15) !important; }
.border-white-fade-30 { border-color: rgba($white, 0.3) !important; }
.border-white-fade-50 { border-color: rgba($white, 0.5) !important; }
.border-white-fade-70 { border-color: rgba($white, 0.7) !important; }
.border-white-fade-85 { border-color: rgba($white, 0.85) !important; }

For example the border under "Teams" on the https://github.com/pricing page gets overridden two times. Both with different opacity. Which probably means there is a need for more border color options.

Just not sure where to put them, core or only marketing? Maybe core? I only can think of the dark header, but there might be more places in the future.

[simurai]

Just not sure where to put them, core or only marketing?

Ok, after some debating this PR now:

• Moves .border-white-fade from "marketing" to "core".
• Adds multiple .border-white-fade-xx utilities to "marketing".

This should cover the immediate needs and we can always more more to core at a later point.

OBE

[shawnbot]

Okay @simurai, I took @jonrohan's request and moved the new classes to core as well. Let's see if we can get this wrapped up during our sync tonight/today!