wip(framework): apply css variables on custom element

[nnaydenow]

Move component CSS variables from :root to :host.

To enable the new solution, pass options.cssVarsSchema with either global or local in your package-script options.

For RTL/LTR handling, use:

:dir(rtl | ltr)

For content density, use style queries (with the built-in Firefox polyfill):

@container style(--_ui5-compact-size: initial) {
	:host {
		...
	}
}

instead of:

[data-ui5-compact-size],
.ui5-content-density-compact,
.sapUiSizeCompact {
	...
}

For migrated packages, getScopedVarName is no longer required when adding or modifying CSS variables via JavaScript.

To do

• Discuss nps option's name
• Discuss system css variables' names
• Retest everything. Cozy + Compact, Compact only

[ui5-webcomponents-bot]

🚀 Deployed on https://pr-12928--ui5-webcomponents-preview.netlify.app