Primary color not showing in old Rosetta site

[t-hamano]

Related to https://meta.trac.wordpress.org/changeset/13571

The Rosetta site, including the support forums, has the new design in most locales, but in some cases where the old design is used, such as in the Japanese locale, the primary color is not displayed (See this issue for the redesign).

Old design

https://ja.wordpress.org/support/topic/%e3%83%88%e3%83%83%e3%83%97%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/?new-theme=0

New design

https://ja.wordpress.org/support/topic/%e3%83%88%e3%83%83%e3%83%97%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/?new-theme=0

After investigating the cause, it appears that the CSS variable for the color does not exist in the old design.

wordpress.org/wordpress.org/public_html/wp-content/plugins/support-forums/inc/class-blocks.php

Lines 69 to 71 in 6f76c56

	--wp-components-color-accent: var(--wp--custom--button--color--background);
	--wp-components-color-accent-darker-10: var(--wp--custom--button--hover--color--background);
	--wp-components-color-accent-darker-20: var(--wp--custom--button--hover--color--background);

These CSS variables are probably defined in the theme.json of a theme that is only applied in the new design, so they cannot be referenced in the old design.

https://github.com/WordPress/wporg-parent-2021/blob/65fbabca9f931a18bd6f786a1c08663bd6259b3a/source/wp-content/themes/wporg-parent-2021/theme.json#L162-L165

This issue will likely be resolved automatically once all locales are migrated to the new design, but we may need to hard-code colors or provide fallback colors in CSS variables.