feat: Add theming support to input components

[anicholls]

🚀 Feature Proposal

The framework for theming recently got merged (#272). We need to add support for it within our components. As a first step, we should use the theme object color values within every component. We can look at breakpoints as the followup.

Implementation

Simply extend the Themeable interface, and use the theme prop provided to our custom styled function to style things

import {styled, Themeable} from '@workday/canvas-kit-labs-react-core';

export interface MyComponentProps extends Themeable, React.HTMLAttributes<HTMLDivElement> {
  // Props
}

// ...

const Container = styled('div')<MyComponentProps>(
  ({theme}) => ({
    background: theme.palette.primary.main
  })
);

// ...

Note: We're going to start with just strong colors (focus outline, blue, red, green, yellow, etc.). We will tackle backgrounds, default borders, etc. in a future update.

Components

• Checkbox (feat(checkbox): Add theming support #456)
• Color Picker (feat(text-input): Add theming to Text Input #411)
• Radio (feat(radio): Add theming support #457)
• Select (Add theming support to Select #570)
• Switch (feat(switch): Add theming support #465)
• TextArea (feat(text-area): Add theming support #459)
• TextInput (feat(text-input): Add theming to Text Input #411)

[anicholls]

Seems like #416 is required to remove the docs page for our theming and visual stories

[jpante]

See #570 for final themed component