chore(merge): fc3f4b6 #1757
chore(merge): fc3f4b6 #1757
Conversation
c21f67b
to
4ef9b9a
Compare
f718249
to
2d5a8db
Compare
2d5a8db
to
5ee422d
Compare
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
81c73bd
to
795a5f9
Compare
795a5f9
to
fd5a983
Compare
| @@ -135,7 +135,7 @@ hr { | |||
| font-style: $headings-font-style; | |||
| font-weight: $headings-font-weight; | |||
| line-height: $headings-line-height; | |||
| color: $headings-color; | |||
| color: var(--#{$prefix}heading-color, inherit); | |||
There was a problem hiding this comment.
[Bootstrap side] Couldn't we initialize this variable to inherit instead of null? Bs side ?
There was a problem hiding this comment.
See twbs/bootstrap#37904.
| @@ -336,11 +336,11 @@ sup { top: -.5em; } | |||
| // Links | |||
|
|
|||
| a { | |||
| color: var(--#{$prefix}link-color); | |||
| color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1)); | |||
There was a problem hiding this comment.
[Bootstrap side] Same question for link-opacity, BS side
There was a problem hiding this comment.
See twbs/bootstrap#37904.
| @@ -163,6 +163,11 @@ $utilities: map-merge( | |||
| ), | |||
| values: $utilities-border-colors | |||
| ), | |||
| "subtle-border-color": ( | |||
| property: border-color, | |||
| class: border, | |||
There was a problem hiding this comment.
[Bootstrap side] No opacity as in "border-color" same for text-color.
Why not merge both maps ?
There was a problem hiding this comment.
Comes from the fact that this map is hexa code and the one above is rgb. Rethinking of this, I wonder if should propose it or not 🤷
| @@ -36,6 +69,17 @@ $utilities-text: ( | |||
| "body": to-rgb($body-color), | |||
| ) !default; | |||
| $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default; | |||
|
|
|||
| $utilities-text-emphasis-colors: ( | |||
| "primary-emphasis": var(--#{$prefix}primary-text), | |||
There was a problem hiding this comment.
[Bootstrap side] Why no emphasis inside the variable name ? Bs side, change variables, variables-dark, doc, maps, root
There was a problem hiding this comment.
See twbs/bootstrap#37907.
|
Kudos, SonarCloud Quality Gate passed!
|
This PR integrates the first huge colors mode commit from Bootstrap: twbs/bootstrap@fc3f4b6.
Live preview
How to test this PR
Approach
Let me try to summarize the changes and what I've done...
.bundlewatch.config.jsonscss/_accordion.scssscss/_alert.scssscss/_carousel.scssscss/_close.scssscss/_dropdown.scssscss/_list-group.scss—bs-list-group-action-hover-bgwhich uses$list-group-hover-bgadded in _variables.scss and set background-color to use this custom propscss/_maps.scss: exact same changes as Bootstrap. All these maps are used to create utilities and we want the same in Boosted.scss/_mixins.scss: integrated as isscss/_navbar.scssscss/_pagination.scssscss/_reboot.scss: reintroduced everything as isscss/_root.scss--*-darkwith--*-invertedin the dark variant selectorscss/_utilities.scssscss/_utilities.scssto avoid Sass compilation errors when colors where defined with CSS varsbody-secondary,body-tertiaryandbody-emphasisfor text colors as isbody-secondary,body-tertiaryandbody-emphasisfor text colors as is + removedbodyandwhitewhich are already generated from$utilities-bg-colorssubtle-background-color$utilities-text-emphasis-colorsas isscss_variables_dark.scss$form-*and$accordion-*vars since we won't need to handle these specificities without dark mode in Boostedscss/_variables.scss${color}-textbut by respecting the text colors already existing in Boosted (so no colors for danger, warning, etc.)${color}-bg-subtlebut replaced all the values by the same as non-subtle values${color}-border-subtlebut replaced all the values by the same as non-subtle values$enable-dark-modeand$color-mode-typehave been introduced$enable-dark-modeshould befalseby default + explanation of why in the description of this PR + check thatdist/*generated files are not impacted (not growing)$*-darkvariables have been renamed to$*-invertedfor dark variant.$body-colorand$body-bghave been moved (kept the same values)$body-emphasisand$emphasis-colorintroduced as is$body-tertiary-colorand$body-tertiary-bgas is$body-secondary-bgchanges its value to$gray-300because used by disabled form controls which had this value$text-mutednow has—bs-secondary-coloras value so it means that$body-secondary-colormust take the old value of$text-muted->$gray-700$box-shadow*staynull$input-bgcan use—bs-form-control-bgsince it’s defined by—bs-body-bgand that$input-bgwas previously defined by$body-bgwhich hasn’t changed in this PR$input-disabled-bgcan use—bs-form-control-disabled-bgbecause it depends on$body-secondary-bgvalue which now takes the same value as$input-disabled-bgbefore$input-border-colornow uses—bs-color-translucentas other components with non-black borders. That’s why we don’t use—bs-border-colorwhich is black in Boosted by default$input-placeholder-colorcan safely by transformed to—bs-secondary-colorwhich depends on$body-secondary-colorwhich is$gray-700$form-range-thumb-disabled-bgmust remain$gray-500. Could$gray-500define—bs-tertiary-bg?$gray-500would deserve a custom property for disabled-colour ; maybe $gray-500 could be —bs-tertiary-bg -> $body-tertiary-colorscss/bootstrap-grid.scss: reintroduced as isscss/bootstrap-reboot.scss: reintroduced as isscss/bootstrap-utilities.scss: reintroduced as isscss/bootstrap.scss: reintroduced as isscss/forms/_form-check.scssscss/forms/_form-select.scssIntroduced exactly the same modification except the
@if $enable-dark-modepart at the endscss/mixins/_alert.scss: integrated as isscss/mixins/_color-mode.scssscss/mixins/_forms.scss--#{$prefix}form-select-bg-icon: #{escape-svg($icon)};and remove of background-imagescss/mixins/_list-group.scss: same modificationsite/assets/js/color-modes/index.jssite/assets/scss/_ads.scsssite/assets/scss/_brand.scss.bd-brand-itemin Boosted docssite/assets/scss/_buttons.scss.btn-bd-lightwasn’t defined anywhere, I’ve removed its usage fromsite/layouts/_default/docs.htmlsite/assets/scss/_callouts.scss: Introduced the same architecture and changed some colors so that there's no regression on light mode and so that it works a bit more on dark modesite/assets/scss/_clipboard-js.scsscolor: var(--bs-body-color);background: transparentand removedbg-transparentfrom the markup for consistency and easy maintenance with Bootstrapcolor: var(--bs-link-hover-color);instead ofcolor: var(--bs-link-color);since it is probably an error in Bootstrap. Otherwise, it won't work in our case. (see Docs: fix.btn-clipboardand.btn-editlink hover color twbs/bootstrap#37823)site/assets/scss/_component-examples.scss.bd-example-row [class^="col"], +.bd-example-cols [class^="col"] > *, .bd-example-cssgrid [class*="grid"] > * {selectorsite/assets/scss/_content.scss: introduced most of it as is + some Boosted mod or removed stuff[data-bs-theme="blue”]bd-summary-linksince not useful ingetting-started/introduction.mdpagesite/assets/scss/_footer.scsssite/assets/scss/_masthead.scss: integrated mostly as issite/assets/scss/_navbar.scss: Mostly handled the changes by adding Boosted mods since we use our Orange navbar componentsite/assets/scss/_sidebar.scss: gathered mostly the same modificationssite/assets/scss/_syntax.scsssite/assets/scss/_toc.scss: integrated the.bd-toc-collapsesince the other modification is based on a block which doesn’t exist in Boostedsite/assets/scss/_variables.scss: Integrated the structure, removed$dropdown-active-iconand mostly Boosted moded elements unused in Boostedsite/content/docs/5.2/about/brand.mdsite/content/docs/5.2/components/accordion.mdsite/content/docs/5.2/components/alerts.md: integrated as issite/content/docs/5.2/components/carousel.mdsite/content/docs/5.2/components/close-button.mdsite/content/docs/5.2/components/dropdowns.mdsite/content/docs/5.2/components/list-group.md: integrated as is except message to change $theme-colors to $background-colors used by Boosted contrary to Bootstrapsite/content/docs/5.2/components/modal.md: integrated as issite/content/docs/5.2/components/navbar.mdNo need to change
.bg-lightto.bg-body-tertiarysince we didn’t use.bg-lightin the first placeNo need to add a warning callout about the depreciation of
.navbar-darksince it will still be effective in Boostedsite/content/docs/5.2/components/offcanvas.md: integrated as issite/content/docs/5.2/components/scrollspy.mdsite/content/docs/5.2/components/toasts.md: integrated as issite/content/docs/5.2/content/reboot.mdBy checking the values, added some Boosted mods in scss/_variables.scss for $spacer and $headings-margin-bottom
Integrated the content as is except for the
margin-bottomvalue mentioned in the Headings description which is slightly different by default in Boostedsite/content/docs/5.2/content/tables.mdsite/content/docs/5.2/customize/color-modes.mdsite/content/docs/5.2/customize/color.mdsite/content/docs/5.2/customize/css-variables.md: introduced as issite/content/docs/5.2/customize/options.mdsite/content/docs/5.2/customize/sass.md_variables-dark.scssis optional in Bootstrap/Boosted_variables-dark.scssis not necessary for now. But does it matter? If the bundle size doesn’t change, that’s not really an issue isn’t it?site/content/docs/5.2/forms/form-control.md: introduced as issite/content/docs/5.2/getting-started/introduction.md.bd-summary-linkis useless and doesn’t need to be integrated insite/assets/scss/_content.scsssite/content/docs/5.2/helpers/stacks.md: integrated as is; changed all.bg-lightto.bg-body-tertiarysite/content/docs/5.2/helpers/stretched-link.md: integrated as issite/content/docs/5.2/helpers/vertical-rule.md: replaced .bg-light with .bg-tertiary.bg-tertiary+ border for consistencysite/content/docs/5.2/layout/columns.md: introduced exactly as issite/content/docs/5.2/layout/gutters.md: introduced exactly as issite/content/docs/5.2/migration.mdsite/content/docs/5.2/utilities/background.md:.bg-body-secondaryand.bg-body-tertiary.bg-body-secondaryand.bg-body-tertiaryare allowed. Otherwise either change their color or don't display them and mention them in the callout.bg-lighthas been changed into.bg-body-tertiaryrather everywhere in the docs!site/content/docs/5.2/utilities/borders.mdInstead of diplaying the renderings, made the choice to display an info callout. Otherwise developers won’t know which utility to use
site/content/docs/5.2/utilities/colors.md.text-body-emphasis,.text-body-secondaryand.text-body-tertiary.text-body-emphasis,.text-body-secondaryand.text-body-tertiaryare compliant with ODS. Otherwise, we need no to display them in the list.text-mutedshould have the same color as.text-secondary. Let's see with other commits after.text-{{name}}-emphasiselements, displayed an info callout to say that these classes have the same rendering as normal ones.text-mutedsite/content/docs/5.2/utilities/overflow.mdsite/content/docs/5.2/utilities/position.md: integrated the content almost as is, tweaking some tiny things so that it could correspond to our brandsite/content/docs/5.2/utilities/shadows.md: integrated the new bgs as issite/content/docs/5.2/utilities/sizing.md.bd-example-flexsite/content/docs/5.2/utilities/spacing.md.bd-example-cssgridsite/content/docs/5.2/utilities/text.md: changed.bg-lightto.bg-body-secondarysite/data/sidebar.ymlsite/data/theme-colors.ymlsite/layouts/_default/baseof.htmlsite/layouts/_default/docs.html: integrated the change of.text-*utility but didn’t need to changelink-darkwhich wasn’t theresite/layouts/partials/docs-navbar.html{{ if eq. Layout "docs" }}like to display or not the selector. Same thing for the script insite/layouts/partials/docs-versions.html+$enable-dark-mode: true+ npm specific command optionCompletely adapted this new dropdown so that it uses the same structure as our version dropdown (particularly an
<a>instead of a<button>)Removed the vertical/horizontal separator
site/layouts/partials/docs-versions.html: integrated as issite/layouts/partials/footer.htmlsite/layouts/partials/header.htmlsite/layouts/partials/home/masthead.html.lh-1is already set with the title in Boostedsite/layouts/partials/icons.htmlIntroduced the 3 icons from Bootstrap as is but we might need to use Solaris icons in the future when the dark mode will be implemented
site/layouts/shortcodes/added-in.htmlsite/layouts/shortcodes/callout-deprecated-dark-variants.html.*-darkfor now for our dark variantssite/layouts/shortcodes/deprecated-in.htmlsite/layouts/shortcodes/example.html: just removed the comment in our code because we already removed.bg-lightin the past