[Badge]: improvements according to design

[DzmitryTrubchyk]

What was changed

• Smaller dot in 42 size
• Bigger dot in 18 size
• Smaller paddings in 18-24 sizes

Please, review carefully current design
Link to the design https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/UUI-Components?type=design&node-id=18507-300424&mode=design&t=EkHephVToQJqCOEk-4

[DzmitryTrubchyk]

Reviewed by design, all differences marked here https://docs.google.com/document/d/1C9vACbakOv4tPYQlDeT-btxIsMfU0p9ULAjhuyGV668/edit?usp=sharing

[NatalliaAlieva]

The list of additional improvements (updated):

1. Removing an extra "semitransparent" value in the "fill" property.

2. Removing of unnecessary value " square" in the property "shape".

3. In the 42 size badges, the dropdown icon is smaller than on the design (size 24 on the design).

4. In the 24 size badges, the dropdown icon is smaller than on the design (size 18 on the design).

5. On the Front in all themes in all Outline 24 size badges, the padding in the badge on the left is larger than on the Design. The padding between Indicator Dot and Caption is smaller than on the design.

6. On the Front in all themes in all Outline 36 size badges, the padding in the badge on the left is larger than on the Design. The padding between Indicator Dot and Caption is smaller than on the design.

7. For Neutral/Night300 Solid state color for ALL themes change:

• counter background color from 8% transparent to #FFFFFF
• counter border color from 40% transparent to #FFFFFF
• counter text color to #474A59(for Loveship Light, Promo, Electric) and '#272833' (for Loveship Dark theme).

Please also compare Neutral/Night300 Outline state and ensure alignment with Design for ALL themes.

8. For White Solid state color for Loveship Light theme change:

• counter background color from 8% transparent #303240 to 8% transparent #1D1E26
• counter border color from 40% transparent #303240 to 40% transparent #1D1E26

Please also compare White Solid state and ensure alignment with Design for Loveship Dark, Electric and Promo themes.

9. For White Outline state color for Loveship Light theme change:

• counter background color from #FFFFFF to 8% transparent #1D1E26
• counter border color from #CED0DB to 40% transparent #1D1E26

Please also compare White Outline state and ensure alignment with Design for Loveship Dark, Electric and Promo themes.

10. For Night100 Solid state color for Loveship Light theme change:

• counter background color from 8% transparent #303240 to 8% transparent #1D1E26
• counter border color from 40% transparent #303240 to 40% transparent #1D1E26

Please also compare Night100 Solid/Outline state and ensure alignment with Design for Loveship Dark, Electric and Promo themes.

11. For Night600 Outline state color for Loveship Light theme change badge background color from #f5f6fa to #EBEDF5

[vik753]

• We decided to leave a "semitransparent" prop because it is a skin-specific property.
• The "square" value of the "shape" property will be removed with all other deprecated properties as a separate issue.

[NatalliaAlieva]

The list of updated and new additional improvements:

1. On the Front in All themes in All fill type badges of sizes (18, 24, 30, 36, 42) the padding in the badge in front of the icon on the left is larger than on the design.

2. For Neutral/Night300 Solid state color for All themes change:

- counter text color to #474A59 (for Loveship Light, Promo, Electric).

3. For White Solid state color for Loveship Light theme change:

- counter background color from 8% transparent #474A59 to 8% transparent #1D1E26
- counter border color from 40% transparent #474A59 to 40% transparent #1D1E26

• badge background hover color from #E1E3EB to #F5F6FA

4. For White Outline state color for Loveship Light theme change:

- counter background color from 8% transparent #303240 to 8% transparent #1D1E26
- counter border color from 40% transparent #303240 to 40% transparent #1D1E26

• badge border normal and hover from #6C6F80 to #E1E3EB
• badge caption from#303240 to #474A59.

5. For Night100 Solid state color for Loveship Light theme change:

- counter background color from 8% transparent #474A59 to 8% transparent #1D1E26
- counter border color from 40% transparent #474A59 to 40% transparent #1D1E26

6. For Night600 Outline state color for Loveship Light theme change badge background color from #f5f6fa to #EBEDF5

7. For Neutral Outline state color for Promo theme change:

• badge border hover from #E1E3EB to #CED0DB

8. For White Outline state color for Promo theme change:

- counter background color from 8% transparent #303240 to 8% transparent #1D1E26
- counter border color from 40% transparent #303240 to 40% transparent #1D1E26

• badge background hover from #E1E3EB to #F5F6FA
• badge border normal and hover from #6C6F80 to #E1E3EB

9. For Night100 (grey10) Outline state color for Promo theme change:

• badge icon from ? to #474A59
• badge caption from #303240 to #474A59

10. For Neutral Outline state color for Electric theme change:

• badge border hover from to #CED0DB

11. For White Outline state color for Electric theme change:

- counter background color from 8% transparent #303240 to 8% transparent #1D1E26
- counter border color from 40% transparent #303240 to 40% transparent #1D1E26

• badge icon from ? to #474A59

12. For Night100 (grey10) Outline state color for Electric theme change:

• badge icon from ? to #474A59
• badge caption from #111111 to #474A59

[vik753]

Front ( @AlekseyManetov, @vik753 ) and Design ( @DzmitryTrubchyk ) decided that in all light themes, we will calculate --uui-count_indicator-bg and --uui-count_indicator-border variables based on --uui-badge-caption variable. Design issue
This is a correct example:
--uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent);
--uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent);

This applies to the above comment points:
3. For White Solid state color for Loveship Light.
4. For White Outline state color for Loveship Light.
5. For Night100 Solid state color for Loveship Light .
8. For White Outline state color for Promo.
11. For White Outline state color for Electric.

And in the solid and outline state for all themes: white, neutral, night 100, night600 use caption color variable for counter caption (except: dark theme outline and solid neutral, outline night300, night600; electric theme outline and solid neutral, outline night600; light theme outline neutral, night300 and night600; promo theme outline neutral, white, night300 and night60).

[NatalliaAlieva]

Released in 5.8.0 ver.