Theme Editor color picker breaks liquid files in the assets folder when choosing branding colors

Issue

If a user chooses a dynamic source for the color picker in the Theme Editor, such as Brand > Primary Color 1, any .liquid files in the assets folder that rely on the setting will output {{ shop.brand.colors.primary[0].background }} instead of the css color.

Expected Behaviour

If the file theme/assets/test.css.liquid has the following

.some-class {
    background-color: {{ settings.theme_color }}; /* set as Brand > Primary Color 1 */
}

it should become

.some-class {
    background-color: #112233; /* set as Brand > Primary Color 1 */
}

Actual

Instead it does this

.some-class {
    background-color: {{ shop.brand.colors.primary[0].background }}; /* set as Brand > Primary Color 1 */
}

Steps to Replicate

1. Create a color picker in the theme's settings, such as

{
  "type": "color",
  "id": "theme_color",
  "label": "Theme Color",
  "default": "#000000"
}

2. Choose a dynamic color source, such as Brand > Primary Color 1
   
3. Create a test.css.liquid file in the assets folder of the theme

.some-class {
    background-color: {{ settings.theme_color }};
}

4. Add the css file to the theme to get the link to the generated file, such as

{{ 'test.css' | asset_url | stylesheet_tag }}

5. View the file and it will show {{ shop.brand.colors.primary[0].background }} instead of the css color, such as #112233

.some-class {
    background-color: {{ shop.brand.colors.primary[0].background }};
}

Start with the Theme Editor dynamic color setting and the theme/assets/test.css.liquid reproduction described in the issue. Trace how settings.theme_color is rendered when its source is Brand > Primary Color 1, then verify the generated asset through {{ 'test.css' | asset_url | stylesheet_tag }}. Done means the asset contains the resolved CSS color, such as #112233, rather than the shop.brand.colors expression.