Open leomp12 opened 3 years ago
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
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
@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:
See https://github.com/ecomplus/storefront/commits/master/%40ecomplus/storefront-twbs/scss
É imprescindível manter essas alterações durante esse refactor para Bootstrap 5.
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.
Is your feature request related to a problem? Please describe.
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.
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.