Claro's libraries don't enforce the variables.css dependency

Problem/Motivation

The gin_toolbar module references the claro/claro.drupal.dialog library to handle the dialog styling.

However adding this dependency without the css/base/variables.css defined in claro/global-styling results in an inconsistent UI, because its claro/claro.jquery.ui dependency still references variables which are only defined in that file.

Steps to reproduce

1. Install gin_toolbar
2. Using a non-claro front end theme, add an element which uses an autocomplete form element (e.g. webform).

/core/themes/claro/css/components/jquery.ui/theme.css will be loaded, but the autocomplete styles will be broken because the variables within the following rules fail to resolve:

.ui-autocomplete {
    color: var(--jui-dropdown-fg-color);
    border: var(--input-border-size) solid var(--jui-dropdown-border-color);
    border-top: 0;
    border-radius: 0 0 var(--input-border-radius-size) var(--input-border-radius-size);
    background: var(--jui-dropdown-bg-color);
    box-shadow: 0 0.125rem 0.25rem var(--jui-dropdown-shadow-color);
}

Proposed resolution

The css/base/variables.css should be exposed as its own library definition, then have all the libraries which rely on it include it as a dependency.

That way individual components can be used without the global styles.

Remaining tasks

Provide MR

User interface changes

N/A

Introduced terminology

N/A

API changes

N/A

Data model changes

N/A

Release notes snippet

TBD