Use Colors.primary in components and change primary color to violet30

[ethanshar]

Description

Use Colors.primary in all of our components instead of Colors.blue30
Change primary to violet30
(This change might affect private lib snapshots)

Changelog

Update our default primary color to Colors.violet30

[M-i-k-e-l]

1. Some types have changes from string to any (see the .d files).
   I've started by trying to solve the specific issue in themeManager (see below), but I don't think it's the way to go.
   I've also tried to change the type in colors.ts, but it did not work.
   Do we want to ignore this or try to solve it?

Under theme = {:
Colors.primary as string
backgroundColor: Colors.primary as string
In the getters:
get primaryColor(): string {
get CTABackgroundColor(): string {

2. Some places that might have been missed (I was not sure if all of these should really be primary):
   Screens: ChipsInputScreen ColorPickerScreen IncubatorTextFieldScreen LoadingScreen
   PanDismissibleScreen PanResponderScreen PickerScreen (violet -> green) SliderScreen TouchableOpacityScreen HighlightOverlayViewScreen
   Components: SelectableComponent ActionBar Hint WheelPicker PickerDialog (Android\iOS) TabBar+TabBarItem (TabController)
   Docs: pages

[ethanshar]

If we only referring to the ThemeManager them object so I don't mind it too much.
It's not very much in use and maybe one day we'll remove it completely or replace it with something more solid.

Yea, In some example screens I didn't change blue30 cause it wasn't really relevant.
Did you find somewhere specific you think should also be changed?

[M-i-k-e-l]

1. No, it's actually a few more: Avatar, Button, Card, tabController/TabBarItem and style/componentsColors (?)
2. It was written after the screens, there are a few:

Components:
SelectableComponent
ActionBar
Hint
WheelPicker
PickerDialog (Android\iOS)
TabBar+TabBarItem (TabController)

Docs:
pages

[ethanshar]

1. Fixed. the primary color typing was not exported correctly and was missing.

SelectableComponent - We are removing this component in v6 I ignored it to avoid conflicts
ActionBar - Fixed
Hint - I fixed it in a separate PR on Hint
WheelPicker - Fixed
PickerDialog (Android\iOS) - Fixed
TabBar+TabBarItem (TabController) - I ignored Incubator/TabController because we plan to remove it in v6

Docs:
pages - It's less relevant there it's just an example

[matextrem]

@ethanshar How can I override primary color for WheelPicker?

[M-i-k-e-l]

Hi @matextrem,
Assuming you are referring to the Incubator.WheelPicker then you can change the activeTextColor.
For a global solution look at the Colors and ThemeManager docs.

[matextrem]

Hey @M-i-k-e-l, thanks for your quick reply! Sorry for the confusion, I was talking about Picker when using useWheelPicker prop

https://wix.github.io/react-native-ui-lib/docs/components/form/Picker/Picker

I wanted to know how to change that violet color.

[M-i-k-e-l]

Using the following should still work:

ThemeManager.setComponentTheme('Incubator.WheelPicker', () => {
  return {
    activeTextColor: 'red'
  };
});

Let me know if that did the trick.

[matextrem]

@M-i-k-e-l That did the trick! Thanks you so much for the help.