theming - product attribute markup classes should include the "product attribute type"

For better theming purposes, for theming the "purchased entity" section of the "add-to-cart" area of a product entity display, the HTML markup for commerce product attributes needs to include the "product attribute type" so that such elements can be themed individually on a "product attribute type" basis. The current markup does not include this information.

Using actual the markup from a test product entity as an example, shown below, it seems like the - fieldset - element might be the best place to include both the "product attribute type" machine name and the machine name of the specific element within the product variation within the fieldset element's CSS classes. Currently, the CSS classes for the fieldset element HTML markup is :

<fieldset class="fieldgroup form-composite required js-form-item form-item js-form-wrapper form-wrapper"> </>

which doesn't include any commerce entity identification at all. Both the product attribute type machine name and identification of the specific attribute set (although the fieldset element ID includes the specific identity of the individual product attribute set).

At any further into the markup hierarchy (see below), it is too late to identify the - product attribute type - to which the inner elements belong, because the markup has already reached specific components, such as the - legend - element in the example below, which provides the label/title for the product attribute radio button set. The example below implements example clothing sizes.

(actual example markup for a radio button set for product size with element XS S M L XL)

					<fieldset data-drupal-selector="edit-purchased-entity-0-attributes-attribute-prod-attr-size" id="edit-purchased-entity-0-attributes-attribute-prod-attr-size--wrapper" class="fieldgroup form-composite required js-form-item form-item js-form-wrapper form-wrapper" required="required" aria-required="true">
						<legend>
							<span class="fieldset-legend js-form-required form-required">Size</span>
						</legend>
						<div class="fieldset-wrapper">
							<div id="edit-purchased-entity-0-attributes-attribute-prod-attr-size" class="form-radios">
								<div class="js-form-item form-item js-form-type-radio form-type-radio js-form-item-purchased-entity-0-attributes-attribute-prod-attr-size form-item-purchased-entity-0-attributes-attribute-prod-attr-size">
									<input data-drupal-selector="edit-purchased-entity-0-attributes-attribute-prod-attr-size-3" type="radio" id="edit-purchased-entity-0-attributes-attribute-prod-attr-size-3" name="purchased_entity[0][attributes][attribute_prod_attr_size]" value="3" checked="checked" class="form-radio" />
									<label for="edit-purchased-entity-0-attributes-attribute-prod-attr-size-3" class="option">XS</label>
								</div>
								<div class="js-form-item form-item js-form-type-radio form-type-radio js-form-item-purchased-entity-0-attributes-attribute-prod-attr-size form-item-purchased-entity-0-attributes-attribute-prod-attr-size">
									<input data-drupal-selector="edit-purchased-entity-0-attributes-attribute-prod-attr-size-4" type="radio" id="edit-purchased-entity-0-attributes-attribute-prod-attr-size-4" name="purchased_entity[0][attributes][attribute_prod_attr_size]" value="4" class="form-radio" />
									<label for="edit-purchased-entity-0-attributes-attribute-prod-attr-size-4" class="option">S</label>
								</div>
								<div class="js-form-item form-item js-form-type-radio form-type-radio js-form-item-purchased-entity-0-attributes-attribute-prod-attr-size form-item-purchased-entity-0-attributes-attribute-prod-attr-size">
									<input data-drupal-selector="edit-purchased-entity-0-attributes-attribute-prod-attr-size-5" type="radio" id="edit-purchased-entity-0-attributes-attribute-prod-attr-size-5" name="purchased_entity[0][attributes][attribute_prod_attr_size]" value="5" class="form-radio" />
									<label for="edit-purchased-entity-0-attributes-attribute-prod-attr-size-5" class="option">M</label>
								</div>
								<div class="js-form-item form-item js-form-type-radio form-type-radio js-form-item-purchased-entity-0-attributes-attribute-prod-attr-size form-item-purchased-entity-0-attributes-attribute-prod-attr-size">
									<input data-drupal-selector="edit-purchased-entity-0-attributes-attribute-prod-attr-size-6" type="radio" id="edit-purchased-entity-0-attributes-attribute-prod-attr-size-6" name="purchased_entity[0][attributes][attribute_prod_attr_size]" value="6" class="form-radio" />
									<label for="edit-purchased-entity-0-attributes-attribute-prod-attr-size-6" class="option">L</label>
								</div>
								<div class="js-form-item form-item js-form-type-radio form-type-radio js-form-item-purchased-entity-0-attributes-attribute-prod-attr-size form-item-purchased-entity-0-attributes-attribute-prod-attr-size">
									<input data-drupal-selector="edit-purchased-entity-0-attributes-attribute-prod-attr-size-7" type="radio" id="edit-purchased-entity-0-attributes-attribute-prod-attr-size-7" name="purchased_entity[0][attributes][attribute_prod_attr_size]" value="7" class="form-radio" />
									<label for="edit-purchased-entity-0-attributes-attribute-prod-attr-size-7" class="option">XL</label>
								</div>
							</div>
						</div>
					</fieldset>

(enlarged image of markup for easier reading)

----

With the currently available markup, it is possible to theme radio button sets within product display add-to-cart area, the available classes do not identify the current context based on - product attribute type - so that each - product attribute type - option set can be styled individually.

(actual selectors extracted from the real-life example HTML markup above)

.commerce-order-item-add-to-cart-form
{
}

.commerce-order-item-add-to-cart-form .form-item legend
{
}

.commerce-order-item-add-to-cart-form .fieldset-legend.form-required
{
}

.commerce-order-item-add-to-cart-form .fieldset-legend.form-required:after
{
}

.commerce-order-item-add-to-cart-form .fieldset-wrapper
{
}

.commerce-order-item-add-to-cart-form .fieldset-wrapper .form-radios
{
}

.commerce-order-item-add-to-cart-form .fieldset-wrapper .form-radios .form-type-radio
{
}

.commerce-order-item-add-to-cart-form .fieldset-wrapper .form-radios .form-radio
{
}

.commerce-order-item-add-to-cart-form .fieldset-wrapper .form-radios .form-type-radio .option
{
}

.commerce-order-item-add-to-cart-form .fieldset-wrapper .form-radios .form-radio:active + .option
{
}

.commerce-order-item-add-to-cart-form .fieldset-wrapper .form-radios .form-radio:hover + .option
{
}


.commerce-order-item-add-to-cart-form .fieldset-wrapper .form-radios .form-radio:checked + .option
{
}

Below is an image of styling performed on the radio button set using the markup above, but it would apply to EVERY radio button set within the add-to-cart form/area, rather than to a radio button set for a specific - product attribute type - entity. If the product attribute type machine name were available it would fix this problem.

Alternatively, is there some way within the DC 2.x Admin GUI to add more information that would produce more specific HTML markup and CSS classes? However, it just seems like putting the - product attribute type - machine name in the fieldset would provide every sitebuilding with the precise information needed for optimal product attribute set element theming.

Submitting bug reports to help make Drupal 8 Commerce the best it might be.