Can’t override colour of Field Label component

[morgoe]

Type: minor

Describe the bug
The colour of a Field Label is set to #737373 no matter what the labelText theme variable is set to.

To Reproduce
Steps to reproduce the behavior:

1. Set the labelText variable to something obvious like 'red'.
2. Find a Field Label (like on the Checkout page)
3. Inspect element
4. See that there is color: 'red' followed by color: #737373 overriding that.

Expected behavior
If I set labelText: 'red' then I expect the label to be red. Or to have some other variable to set this.

Screenshots

Desktop (please complete the following information):

• OS: Mac
• Browser: Chrome
• Version: 70

[aldeed]

@morgoe I think this is an error with the Field theming docs. The field labels use labelText for everything EXCEPT color because color differs based on the validity of the field.

You can override color by adding this to your theme:

FieldLabel: {
  color_default: customDefaultColor,
  color_error: customErrorColor,
  color_focus: customFocusColor,
  color_success: customSuccessColor
}

Note that you'll probably want to have identical or similar colors for each input state, too:

Input: {
    borderColor_default: colors.black20,
    borderColor_error: colors.red,
    borderColor_focus: colors.teal,
    borderColor_success: colors.teal,
    color_default: colors.coolGrey500,
    color_disabled: colors.black25,
    color_error: colors.red,
    color_focus: colors.coolGrey500,
    color_success: colors.black55,
    iconColor_default: colors.black55,
    iconColor_disabled: colors.black25,
    iconColor_error: colors.red,
    iconColor_success: colors.forestGreen
}

I'll leave this issue open so that the info from this comment can be added to the theming docs for those components.

[machikoyasuda]

@morgoe Here's a running example of how to modify the color of FieldLabel in a CodeSandbox with Next.js and the component module running: https://codesandbox.io/s/716p3rxxv6

All the available component variables are in this file: https://github.com/reactioncommerce/reaction-component-library/blob/master/package/src/theme/defaultComponentTheme.js

And the typography variables are here: https://designsystem.reactioncommerce.com/#!/Theming%20Components and can the different Typography styles can be previewed https://designsystem.reactioncommerce.com/#!/Typography