Theme-defined backgrounds

[halocline]

What does this PR do?

Closes #6291

• Allows a caller to specify a theme-defined background such as <Box background="gradient-1" ... /> or <Box background="image-3" ... />.
• Extends the background prop object to support background-clip.
• Extends the background prop object to support rotate, specified in degrees. Note: Implementation only supports rotation of linear-gradients at this time. Proper support for rotating images requires image resizing and repositioning and would need to be thought through from an API perspective.

Backgrounds may be a string, {dark, light} object, or BackgroundType object.

const myTheme = {
  global: {
    backgrounds: {
      'image-1': `url(https://images.unsplash.com/photo-1620497772559-b65fc1d1ccf7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80)`,
      'image-2': {
        dark: `url(https://images.unsplash.com/photo-1614292253389-bd2c1f89cd0e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80)`,
        light: `url(https://images.unsplash.com/photo-1603484477859-abe6a73f9366?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80)`,
      },
      'gradient-1': `linear-gradient(
        hsl(240deg 90% 55%) 0%,
        hsl(341deg 90% 55%) 50%,
        hsl(60deg 90% 55%) 100%)`,
    },
  },
};

Where should the reviewer start?

background.js

What testing has been done on this PR?

• Storybook
• Jest test suite
• New Jest tests --> in progress, getting an odd, difficult to trace error coming from Jest.

How should this be manually tested?

Storybook --> Use the Box/stories/TEMP.js story

Do Jest tests follow these best practices?

• screen is used for querying.
• The correct query is used. (Refer to this list of queries)
• userEvent is used in place of fireEvent.
• asFragment() is used for snapshot testing.

Any background context you want to provide?

What are the relevant issues?

#6291

Screenshots (if appropriate)

Do the grommet docs need to be updated?

Yes.

Should this PR be mentioned in the release notes?

Yes.

Is this change backwards compatible or is it a breaking change?

Backwards compatible.

[halocline]

Fix coming for the Jest tests.

[MikeKingdom]

Cool stuff

[MikeKingdom]

Looks great. It's a pretty cool feature.

[britt6612]

LGTM! not sure if you wanted to make a separate issue for the opacity?

[taysea]

Nice work on this, good additions.

[ericsoderberghp]

Just need to bump the bundle size: https://app.circleci.com/pipelines/github/grommet/grommet/12271/workflows/3aeb17bf-ef65-4658-b70e-03b3b3a54609/jobs/61755

[halocline]

Just need to bump the bundle size: https://app.circleci.com/pipelines/github/grommet/grommet/12271/workflows/3aeb17bf-ef65-4658-b70e-03b3b3a54609/jobs/61755

Done.