Bootstrap 5

[leomp12]

Is your feature request related to a problem? Please describe.

1. Poor CSS vars support on base UI components + SaaS based theme = hard and costly runtime customization from CMS;
2. Lack support for CSS utils API;
3. No RTL support;
4. Old UI framework with unnecessary support for IE;
5. Deprecated Sass methods;

Describe the solution you'd like Update to Bootstrap 5.1.x without breaking change, must still supporting all (or almost) already used BS4 classes and current CSS vars names.

Take notes from https://getbootstrap.com/docs/5.0/migration/ , special attention to utilities renamed for RTL support.

Describe alternatives you've considered N/A

Additional context To support full utility API keeping performance thoughts, we must also implement PurgeCSS on build process.

[leomp12]

https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.1/migration.md#color-system

The shift-color() will either tint or shade a color depending on whether its weight parameter is positive or negative.

https://github.com/twbs/bootstrap/blob/main/scss/_functions.scss#L206-L218

[leomp12]

Seems to be impossible yet to tint/shade colors with CSS native functions while CSS Colors Level 4 not released 😞 It would be easy with [hwb](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb()) or color-mod, but...

rgba or hsla are not enough, changing the alpha most of the time doesn't result in what looks like a lighten/darken, so we may need some JS to set CSS vars with brand colors shades https://css-tricks.com/snippets/javascript/lighten-darken-color/

Something like:

:root {
  --primary-hover: var(--primary);
}

const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary');
const primaryHoverColor = LightenDarkenColor(primaryColor, -20);
document.documentElement.style.setProperty('--primary-hover', primaryHoverColor);

Update: it SHOULD still being done at compilation time (SCSS, when available) or SSR for better UX, also related to https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb

@sameoldcarlos @Suzei

[leomp12]

@sameoldcarlos acho que podemos voltar com isso aqui mas acredito que seria em outra PR porque esse branch https://github.com/ecomplus/storefront/pull/581 já está muito desatualizado.

A intenção principal aqui é poder remover jQuery do nosso bundle e, claro, atualizar a versão da lib do Bootstrap, mas é importante lembrar que não usamos o Bootstrap 4 as is, na verdade houveram várias edições para:

• Cortar alguns componentes e modifiers (reduzir bundle CSS);
• Utilizar CSS vars principalmente para cores (SCSS mixins customizados para suportar cores como CSS vars);

See https://github.com/ecomplus/storefront/commits/master/%40ecomplus/storefront-twbs/scss

É imprescindível manter essas alterações durante esse refactor para Bootstrap 5.

[leomp12]

Sempre evitar breaking changes e eu recomendo abrir um PR para cada SCSS (ou quase) em https://github.com/ecomplus/storefront/tree/master/%40ecomplus/storefront-twbs/scss para o branch refactor/bs5, depois ele será mesclado para o master quando todo o refactor estiver pronto.