Remove old theme variables

[colebemis]

Part of https://github.com/github/design-systems/issues/1219

Background

Now that all our components are using functional color variables imported from Primer Primitives, let's remove the old presentational variables from the theme object.

This will be a big breaking change for consumers that use color, background, border, and shadow system props (e.g. color="blue.5"), so let's write helpful migration guide for the release notes and potentially write a codemod to automate some of the migration process as much as possible.

Do this

• Remove the following variables from the theme object exported by theme-preval.js (Remove old theme variables #1115):
  • Colors in the colors key that aren't imported from Primer Primitives
  • Shadows in the shadows key that aren't imported from Primer Primitives
  • Component styles (e.g. buttons, pagination, etc.)
• Update code examples that reference presentional variables (e.g. green.2) in the docs to use functional variables (e.g. bg.success) (Update docs to use functional color variables #1111)
• Write a migration guide listing every theme key that was removed (e.g. colors.blue.5, buttons.primary.color, etc.) and suggest possible replacements. Note that replacements may vary based on how the variable is used. For example, color="gray.9" should be replaced with color="text.primary" but bg="gray.9" will have probably have a different replacement. We can put this migration in a changeset in the PR that removes old variables from the theme. Here's the migration guide for Primer CSS v16 as a reference.
• (maybe) Write a codemod to make it easier for consumers to migrate from presentation variables to functional variables in their app
• Update usages of old presentational variables in Memex to functional variables (potentially use the codemod)
  • This can be done in parallel with the work listed above because the functional variables already exist in the theme