This is a slimmed down version of #54541 and just contains the theme package.

What?

Introduces a theme package that aims to standardise how we name, generate and use the css variables that make up the foundation of an admin theme.

Why?

This is a big part of the admin redesign work as it lays the groundwork for tokens in future.

To reference #53612

The current Gutenberg colour system has been great for the editor, however we are starting to see the limitations while designing for a dark surface (e.g. site editor). If we want to lean heavily into customisation, and support themes including dark, we will need to extend the system and take a more programmatic approach. One of the biggest gaps in our current system is a limited bottom end of the scale. e.g. for component backgrounds, states etc

How?

A naming convention

You can see how this looks here

A theme object
The theme object is the central part of the theme and all variables are built from it. It should be familiar to anyone who has used other frameworks like Tailwind or Theme-UI or even theme.json of WP themes. It looks a little something like:

// theme object
export const defaultTheme = {
	shadows: {
		sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
		md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
		lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
	},
	spacing: {
		1: '8px',
		2: '12px',
		3: '16px',
		4: '24px',
		5: '32px',
		6: '48px',
	},
	borderRadius: {
		sm: '2px',
		md: '4px',
		lg: '6px',
	},
	fonts: {
		body: 'system-ui, sans-serif',
		heading: 'system-ui, sans-serif',
	},
	fontSizes: {
		xs: '12px',
		sm: '13px',
		md: '15px',
		lg: '18px',
		xl: '22px',
	},
	fontWeights: {
		normal: '400',
		medium: '500',
		bold: '700',
	},
	lineHeights: {
		normal: '1.5',
		heading: '1.25',
	},
	colors: generateColors( {} ),
};

Color generation
To make WordPress customisable in an accessible and aesthetically pleasing way we need to be clever with the way we generate colours. In this example we take a single color prop that acts as your accent along with whether you want darkMode enabled or not as well as a fun prop. Treating dark mode like a mode vs a theme is important as it allows platforms to white-label WordPress but still support light/dark. The fun prop just increases saturation in the neutral scale.

Colour generation in this PR offers us a simple starting point but we should eventually look at more complex ways of generating colours like what was explored in the try/theming-test branch that rotates hues and adjusts saturation as you go up/down the scale.

Default CSS
The package should also include an importable CSS file that includes defaults. Ideally this file is built automatically any time the color generator is changed (started that work here)

Theme provider
This also includes a very lightweight theme provider that is used to generate theme variables which are included in a CSS class added to document head.

Testing Instructions

1. Open packages/edit-site/src/components/app/index.js and adjust theme values on line 46.
2. Open site editor and see changes reflected