Backgrounds and Borders documentation confusing

[alexstanbury]

💬 Question

I'm not sure what I am supposed to be doing after reading this documentation, the bold section specifically is not clear:

There are 11 shades of Basic color. In order to change backgrounds properly, each of them should be configured. To do this, we may get back to Eva Colors. Start with choosing the lightest shade of the background (usually, it is completely white in light themes) and move down accurately by picking darker shades. Paste each color into theme.json like in the example below.

{
  "color-basic-100": "#FFFFFF",
  "color-basic-200": "#F5F5F5",
  "color-basic-300": "#F5F5F5",
  "color-basic-400": "#D4D4D4",
  "color-basic-500": "#B3B3B3",
  "color-basic-600": "#808080",
  "color-basic-700": "#4A4A4A",
  "color-basic-800": "#383838",
  "color-basic-900": "#292929",
  "color-basic-1000": "#1F1F1F",
  "color-basic-1100": "#141414"
}

As far as I can tell, this is telling me to manually use the colour picker to pick 11 colours from white to black, gradually choosing darker shades as I go. Is that correct? Or am I supposed to be picking a colour like I did with the primary colour and then use those 9 colours in between white and black to make up the 11 for the basic? I think a bit more clarity in these instructions would definitely help!

UI Kitten and Eva version

@eva-design/eva 2.0.0-alpha.1 @ui-kitten/components ^5.0.0-alpha.1

[artyorsh]

Hi @alexstanbury. Thanks for posting this, you've really hit the mark with this question.

this is telling me to manually use the colour picker

The truth is that there are no tools to generate a white / black shades. I was looking for that myself during writing this guide and I've failed with that. So yes, unfortunately the only way to do this is by picking those colors manually. I've asked our design team to elaborate this issue to give you some hints and share the generic algorithm on working with basic palette.