Control component tint automatic calculatioins in cosmic theme

[maria-komarova]

The color is defined in the Design system as @small_widget_container. It depends on the background of the surface where the widget is placed. Widgets that use this color include standard buttons, text inputs, segmented controls. The steps are:

1. Take the color of the surface where the widget is placed and check lightness value.
2. Use lightness of the surface color and add or subtract 5 steps in lightness. To find out whether to add or subtract - check the lightness of @bg_color:

• If lightness is 65 or lighter, use darker colors for smaller widgets.
• If lightness is 64.9 to 51.1, use lighter colors.
• If lightness is 51.1 to 40.1, use darker colors.
• If lightness is 40 and darker, use lighter colors.

3. Take the color input (what we call neutral tint right now or pure black for default modes), use the calculated lightness value from the previous steps.
4. Adjust the chroma value to 0.03 if the color input has a higher value.
5. Use the resulting color as the widget background.

The text in the widget should use the text color variable of the respective surface the widget is placed on. Same with divider colors.