Add Diffstat component

[simurai]

This adds the .diffstat component to Primer CSS.

✨ Docs Preview

Simple	With more details

TODO

• Add styles from dotcom
• Add documentation
• Maybe tweak colors to not use darken()

TODO on dotcom

• Rename and refactor https://github.com/github/github/pull/127113
• Remove diffstat.scss

/cc @primer/ds-core

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/primer/primer-css/azbv71e7c
🌍 Preview: https://primer-css-git-diffstat.primer.now.sh

[simurai]

Maybe tweak colors to not use darken()

Here how it would look if we replaced darken($green-400, 5%);.

$green-400	darken($green-400, 5%);	$green-500
hsl(134, 62%, 51%)	hsl(134, 62%, 46%)	hsl(134, 61%, 41%)
#34d058	#2cbe4e	#28a745

Hmm.. $green-500 would have more contrast compared to the background, but $green-400 would have more contrast compared to the red blocks. Like it's easier to see the difference between green/red with $green-400.

Edit: At our meeting we decided to keep darken($green-400, 5%); for now. At some point we can consider adding a new variable like .green-diff or similar.

[shawnbot]

@simurai if we name the variable for this $bg-<anything>, then it'll pass the new stylelint rules because they just want any variable that begins with bg-.

[shawnbot]

My suggestion is to create two new variables for these colors: $bg-diffstat-added: darken($green-400, 5%) and $bg-diffstat-deleted: $red-600. Currently, if we were to run this through our new stylelint rules we'd have primer/colors violations for both values, since neither is a $bg- variable.

[shawnbot]

@simurai FYI I moved the new $bg-diffstat-* variable declarations to colors.scss and flagged them with !default per existing conventions. I think this is good to go!

[simurai]

FYI I moved the new $bg-diffstat-* variable declarations to colors.scss and flagged them with !default per existing conventions.

Was wondering if we should organize variables per component or property. 👍 Good for now.