Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Error: fb-[color] is not a valid css color

ANSWERED

I'm trying to create settings to select colors for my clock-face, but it seems the "FitBit Named Colors" are not recognized in the Studio css implementation:

 

2018-05-30 06_14_40-index.jsx - Overlapse.png

 

I'm using the 'Moment' SDK example project as my model for the settings page, but am attempting to use the fb-[color] namespace:

 

const colorSet = [
  {color: "fb-aqua"},
  {color: "fb-black"},
  {color: "fb-blue"},
  {color: "fb-cerulean"},
  {color: "fb-cyan"},
  {color: "fb-dark-gray"},
  {color: "fb-extra-dark-gray"},
  {color: "fb-green"},
  {color: "fb-green-press"},
  {color: "fb-indigo"},
  {color: "fb-lavender"},
  {color: "fb-light-gray"},
  {color: "fb-lime"},
  {color: "fb-magenta"},
  {color: "fb-mint"},
  {color: "fb-orange"},
  {color: "fb-peach"},
  {color: "fb-pink"},
  {color: "fb-plum"},
  {color: "fb-purple"},
  {color: "fb-red"},
  {color: "fb-slate"},
  {color: "fb-slate-press"},
  {color: "fb-violet"},
  {color: "fb-white"},
  {color: "fb-yellow"},
  {color: "fb-yellow-press"},     
];

If I replace the fb-[color] names with traditional css color names or hex values I have no errors and my companion app renders (at least in the simulator). With even one FB named color in the list, the page fails to render at all (just blank white sim window).

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions

Sorry, the fb named colors aren't supported in the settings api. I will pass this feedback onto the team responsible.

View best answer in original post

Best Answer
3 REPLIES 3

Sorry, the fb named colors aren't supported in the settings api. I will pass this feedback onto the team responsible.

Best Answer

Good to know, thanks!

Best Answer
0 Votes

I also discovered this same issue today. Providing support for the named colors will make it easier for people to adhere to the Visual Guidelines.

Best Answer
0 Votes