Internal issue 3106 - Helper text within Hero's do not have the correct colour.

[ticket-sync[bot]]

Helper text does not meet WCAG AA/AAA contrast levels within a <IcHero> component using default themes

<IcHero heading="Example">
        <IcTextField slot="interaction" helperText="This is an input" label="Input" />
      </IcHero>

Acceptance Criteria: The colour of the helper text should be compliant to WCAG contrast levels.

[ad9242]

discussed whether to fix as part of https://github.com/mi6/ic-ui-kit/issues/3680, but decided to keep this as a separate ticket

[GCHQ-Developer-847]

The colour of the label is also wrong so that needs fixing as part of this ticket as well.

The current issues with the contrast of the label and helper text are when you have a light-themed text field on a dark brand colour, and a dark-themed text field on a light brand colour:

(StackBlitz with dark blue theme colour, StackBlitz with light grey theme colour)

The aim with this ticket is to always display the white label and helper text when the text field is on a dark brand colour, and always display the black / grey label and helper text on a light brand colour.

So the text colour depends only on the brand, and not the theme. (The colour of the actual input field should still be allowed to change depending on the theme colour, just like on a top nav)

[GCHQ-Developer-847]

This ticket will probably involve overriding these tokens on a text field when it's in a hero:

--ic-input-label-text-color: var(--ic-text-field-label);
--ic-input-label-helper-text-color: var(--ic-text-field-subtitle);

Please check other input components (i.e. which have a label and helper text), such as select, checkbox, radio etc. and do the same fix for those / make sure they are correct