Extend Uikit Themer tooling for related gravity-ui packages

[helenjer]

Objective

Uikit Themer does not provide customizations for related Gravity libraries (e.g., illustrations, navigation). Users need to set the CSS API for each additional library themselves using inconsistent README files and may choose non-optimal visual variants.

Solution Proposal

Add a list of options (checkboxes) under the Component preview on https://gravity-ui.com/themer for including themed pieces of CSS variables for selected packages in the Export theme result. The CSS variables should be filled based on the --g-color-private-brand-*** colors.

In particular, we need to define for:

1. @gravity-ui/illustrations
   How to match each of https://github.com/gravity-ui/illustrations/blob/6ef878711242fad116b5885a65b204fe66066a6b/styles/styles.scss#L3 СSS variables

--gil-color-object-base 
…
 --gil-color-object-danger

with the relevant --g-color-private-brand-*** to add them in the exported theme.

2. @gravity-ui/navigation
   How to fill the CSS API in https://github.com/gravity-ui/navigation/blob/deb12e1073b048ac0870b1e14446d096c0e55bcd/src/components/AsideHeader/README.md#css-api
   based on brand colors.
   i.e. --gn-aside-header-item-icon-color: var(--g-color-base-brand); ....

3)... other packages (which ones?)

Definition of done

Users can easily customize themes of related Gravity UI packages, keeping them in sync with the base Uikit branding.

[helenjer]

@ykamendrovskiy Please, help with correct colors matching:

1. @gravity-ui/illustrations
   https://github.com/gravity-ui/illustrations?tab=readme-ov-file#preparation
   CSS colors from file: https://github.com/gravity-ui/illustrations/blob/6ef878711242fad116b5885a65b204fe66066a6b/styles/styles.scss#L3 with Themer brand colors:

g-root_theme_light,
.g-root_theme_light-hc {
    --gil-color-object-base:  --g-color-private-brand-???  // base light theme: var(--g-color-private-yellow-550-solid);
    --gil-color-object-accent-heavy: ???  //var(--g-color-private-orange-650-solid);
    --gil-color-object-hightlight: ???  //var(--g-color-private-yellow-350-solid);
    --gil-color-shadow-over-object: ???  //var(--g-color-private-yellow-650-solid);
    --gil-color-background-lines: ???  //var(--g-color-private-black-450-solid);
    --gil-color-background-shapes: ???  //var(--g-color-private-black-50-solid);
    --gil-color-object-accent-light: ???  //var(--g-color-private-white-1000-solid);
    --gil-color-object-danger: ???  // var(--g-color-private-red-550-solid);

}

.g-root_theme_dark,
.g-root_theme_dark-hc { 
 ...: ???
}

2. @gravity-ui/navigation
   The same with navigations colors from: https://github.com/gravity-ui/navigation/blob/deb12e1073b048ac0870b1e14446d096c0e55bcd/src/components/AsideHeader/README.md#css-api
   based on brand colors.

--gn-aside-header-item-icon-color: --g-...-brand-??? // e.g. var(--g-color-base-brand); 
....

[SeqviriouM]

@amje @korvin89 What do you think? Are we waiting for @ykamendrovskiy feedback?

[ykamendrovskiy]

we'l need both the mappings and additional customization form for these cases in the Themer. I believe we could start with the latter option. Btw the Asideheader will have an update with extended list of variables to enable more powerful customization

@helenjer

[helenjer]

discussed, that the next step is designing an updated UI for Themer with support for customization of navigation and illustrations (@ykamendrovskiy helps)

[SeqviriouM]

@helenjer @ykamendrovskiy did you manage to finish the next step?

[ykamendrovskiy]

@helenjer @ykamendrovskiy did you manage to finish the next step?

in progress. I think we can close this particular ticket, as we work on the issue in our internal task tracker
@SeqviriouM