Publish variables.json

[shawnbot]

This introduces a JSON payload containing information about all of the SCSS variables, their values, and references between them. On the docs side, there is a new Variables page that dumps all of this information. (Let's revisit this in another PR.)

/cc @BinaryMuse ❤️

[shawnbot]

JFYI, for some reason this deployed without a hitch when I ran now locally, but until my Zeit account issues are sorted I won't be able to see what's going wrong with the automatic deployments.

[simurai]

This is awesome.. 😍 No more hunting in /src. 🤗

Using a table might improve scannability. And add some spacing between each variable group?

[shawnbot]

Using a table might improve scannability.

Yeah, I agree. I had it as a table initially, but some of the long variable names made the distance between short names and their values value too big for my taste.

And add some spacing between each variable group?

There aren't any groupings yet, though we could group them by, say, whether they're a color or not.

I wonder if this would work better as more of a code-oriented view where we're inlining the source and "enhancing" the values with swatches? Like, maybe we actually show the source:

css/src/support/variables/color-system.scss

Lines 3 to 13 in 03f5ac4

	// -------- Grays --------
	$gray-000: #fafbfc !default;
	$gray-100: #f6f8fa !default;
	$gray-200: #e1e4e8 !default;
	$gray-300: #d1d5da !default;
	$gray-400: #959da5 !default;
	$gray-500: #6a737d !default;
	$gray-600: #586069 !default;
	$gray-700: #444d56 !default;
	$gray-800: #2f363d !default;
	$gray-900: #24292e !default; // body font color

css/src/support/variables/colors.scss

Lines 4 to 36 in 03f5ac4

	// State indicators.
	$status-pending: desaturate($yellow-700, 15%) !default;
	// Repository type colors
	// Should be able to deprecate these in future
	$repo-private-text: $black-fade-70 !default;
	$repo-private-bg: $yellow-000 !default;
	$repo-private-icon: transparentize($yellow-900, 0.5) !default;
	// Highlight used for things like search
	$highlight-yellow: rgba(255, 247, 140, 0.5);
	// Border colors
	$border-black-fade: $black-fade-15 !default;
	$border-white-fade: $white-fade-15 !default;
	$border-blue: $blue-500 !default;
	$border-blue-light: $blue-200 !default;
	$border-green: $green-400 !default;
	$border-green-light: desaturate($green-300, 40%) !default;
	$border-purple: $purple !default;
	$border-red: $red !default;
	$border-red-light: desaturate($red-300, 60%) !default;
	$border-yellow: desaturate($yellow-300, 60%) !default;
	$border-gray-dark: $gray-300 !default;
	$border-gray-darker: $gray-700 !default;
	$border-gray-light: lighten($gray-200, 3%) !default;
	$border-gray: $gray-200 !default;

...like this? (mocked up in the inspector)

[simurai]

Like, maybe we actually show the source:

Hmm.. interesting. It would solve the "grouping" since we already do that in src. Hex values and aliases could be written as comments.

$gray-500: #6a737d; // Aliases: $gray, $text-gray-light
$repo-private-bg: $yellow-000; // #fffdef 

[shawnbot]

Hex values and aliases could be written as comments.

And linked to the corresponding declaration! 🤓

[simurai]

LGTM! 👍

On the docs side, there is a new Variables page that dumps all of this information. (Let's revisit this in another PR.)

🍀 Luckily, this still seems to work: https://primer-css.primer.now.sh/css/support/variables

[BinaryMuse]

One comment, otherwise looks great

[BinaryMuse]

#925 contains the async/await change to this script and this change will need to be included there