UUI icon indicating copy to clipboard operation
UUI copied to clipboard
verified publisher icon epam

[Badge]: improvements according to design

Open DzmitryTrubchyk opened this issue 1 year ago • 5 comments

What was changed

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

image

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 avatar Apr 05 '24 08:04 DzmitryTrubchyk

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

DzmitryTrubchyk avatar Apr 15 '24 09:04 DzmitryTrubchyk

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.

  1. 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.

  1. 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.

  1. 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.

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

NatalliaAlieva avatar Apr 16 '24 11:04 NatalliaAlieva

  • 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.

vik753 avatar Apr 17 '24 14:04 vik753

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.
Screenshot 2024-05-23 at 15 05 26
  1. For Neutral/Night300 Solid state color for All themes change:

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

  1. 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~~

Screenshot 2024-05-23 at 21 28 38
  • badge background hover color from #E1E3EB to #F5F6FA
  1. 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.
  1. 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~~

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

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

  • badge border hover from #E1E3EB to #CED0DB
  1. 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
  1. For Night100 (grey10) Outline state color for Promo theme change:
  • badge icon from ? to #474A59
  • badge caption from #303240 to #474A59
  1. For Neutral Outline state color for Electric theme change:
  • badge border hover from to #CED0DB
  1. 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
  1. For Night100 (grey10) Outline state color for Electric theme change:
  • badge icon from ? to #474A59
  • badge caption from #111111 to #474A59

NatalliaAlieva avatar May 22 '24 13:05 NatalliaAlieva

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).

vik753 avatar May 24 '24 14:05 vik753

Released in 5.8.0 ver.

NatalliaAlieva avatar Jun 06 '24 15:06 NatalliaAlieva