docs: update content

Author: mrholek

docs/content/components/popovers.md

@@ -42,9 +42,14 @@ One way to initialize all popovers on a page would be to select them by their `d
 const popoverTriggerList = document.querySelectorAll('[data-coreui-toggle="popover"]')
 const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new coreui.Popover(popoverTriggerEl))
 ```
-
 ### Live demo
 
+We use JavaScript similar to the snippet above to render the following live popover. Titles are set via `data-coreui-title` and body content is set via `data-coreui-content`.
+
+{{< callout warning >}}
+{{< partial "callouts/warning-data-bs-title-vs-title.md" >}}
+{{< /callout >}}
+
 {{< example >}}
 <button type="button" class="btn btn-lg btn-danger" data-coreui-toggle="popover" title="Popover title" data-coreui-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
 {{< /example >}}

docs/content/components/tooltips.md

@@ -31,7 +31,9 @@ Things to know when using the tooltip plugin:
 
 Got all that? Great, let's see how they work with some examples.
 
-## Example: Enable tooltips everywhere
+## Examples
+
+### Enable tooltips
 
 One way to initialize all tooltips on a page would be to select them by their `data-coreui-toggle` attribute:
 
@@ -40,7 +42,7 @@ const tooltipTriggerList = document.querySelectorAll('[data-coreui-toggle="toolt
 const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new coreui.Tooltip(tooltipTriggerEl))
 ```
 
-## Examples
+### Tooltips on links
 
 Hover over the links below to see tooltips:
 
@@ -49,6 +51,30 @@ Hover over the links below to see tooltips:
   </p>
 </div>
 
+{{< callout warning >}}
+{{< partial "callouts/warning-data-bs-title-vs-title.md" >}}
+{{< /callout >}}
+
+### Custom tooltips
+
+{{< added-in "4.2.0" >}}
+
+You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-coreui-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable.
+
+{{< scss-docs name="custom-tooltip" file="docs/assets/scss/_component-examples.scss" >}}
+
+
+{{< example class="tooltip-demo" stackblitz_add_js="true" >}}
+<button type="button" class="btn btn-secondary"
+        data-coreui-toggle="tooltip" data-coreui-placement="top"
+        data-coreui-custom-class="custom-tooltip"
+        data-coreui-title="This top tooltip is themed via CSS variables.">
+  Custom tooltip
+</button>
+{{< /example >}}
+
+### Directions
+
 Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using CoreUI in RTL.
 
 <div class="docs-example tooltip-demo">

docs/content/customize/color-modes.md

@@ -189,6 +189,54 @@ Here's a look at the JavaScript that powers it. Feel free to inspect our own doc
 {{< /js.inline >}}
 {{< /example >}}
 
+## Adding theme colors
+
+Adding a new color in `$theme-colors` is not enough for some of our components like [alerts]({{< docsref "/components/alerts" >}}) and [list groups]({{< docsref "/components/list-group" >}}). New colors must also be defined in `$theme-colors-text`, `$theme-colors-bg-subtle`, and `$theme-colors-border-subtle` for light theme; but also in `$theme-colors-text-dark`, `$theme-colors-bg-subtle-dark`, and `$theme-colors-border-subtle-dark` for dark theme.
+
+This is a manual process because Sass cannot generate its own Sass variables from an existing variable or map. In future versions of Bootstrap, we'll revisit this setup to reduce the duplication.
+
+```scss
+// Required
+@import "functions";
+@import "variables";
+@import "variables-dark";
+
+// Add a custom color to $theme-colors
+$custom-colors: (
+  "custom-color": #712cf9
+);
+$theme-colors: map-merge($theme-colors, $custom-colors);
+
+@import "maps";
+@import "mixins";
+@import "utilities";
+
+// Add a custom color to new theme maps
+
+// Light mode
+$custom-colors-text: ("custom-color": #712cf9);
+$custom-colors-bg-subtle: ("custom-color": #e1d2fe);
+$custom-colors-border-subtle: ("custom-color": #bfa1fc);
+
+$theme-colors-text: map-merge($theme-colors-text, $custom-colors-text);
+$theme-colors-bg-subtle: map-merge($theme-colors-bg-subtle, $custom-colors-bg-subtle);
+$theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colors-border-subtle);
+
+// Dark mode
+$custom-colors-text-dark: ("custom-color": #e1d2f2);
+$custom-colors-bg-subtle-dark: ("custom-color": #8951fa);
+$custom-colors-border-subtle-dark: ("custom-color": #e1d2f2);
+
+$theme-colors-text-dark: map-merge($theme-colors-text-dark, $custom-colors-text-dark);
+$theme-colors-bg-subtle-dark: map-merge($theme-colors-bg-subtle-dark, $custom-colors-bg-subtle-dark);
+$theme-colors-border-subtle-dark: map-merge($theme-colors-border-subtle-dark, $custom-colors-border-subtle-dark);
+
+// Remainder of Bootstrap imports
+@import "root";
+@import "reboot";
+// etc
+```
+
 ## CSS
 
 ### Variables

docs/content/getting-started/download.md

@@ -71,22 +71,6 @@ Install CoreUI in your Node.js powered apps with [the yarn package](https://yarn
 ```sh
 yarn add @coreui/coreui
 ```
-<!--
-### RubyGems
-
-Install CoreUI for Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/gemfile.html):
-
-```ruby
-gem 'bootstrap', '~> {{< param current_ruby_version >}}'
-```
-
-Alternatively, if you're not using Bundler, you can install the gem by running this command:
-
-```sh
-gem install bootstrap -v {{< param current_ruby_version >}}
-```
-
-[See the gem's README](https://github.com/twbs/bootstrap-rubygem/blob/master/README.md) for further details. -->
 
 ### Composer
 
@@ -95,15 +79,3 @@ You can also install and manage CoreUI's Sass and JavaScript using [Composer](ht
 ```sh
 composer require coreui/coreui:{{< param current_version >}}
 ```
-
-<!-- ### NuGet
-
-If you develop in .NET, you can also install and manage CoreUI for Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/coreui.sass/) and JavaScript using [NuGet](https://www.nuget.org/):
-
-```powershell
-Install-Package bootstrap
-```
-
-```powershell
-Install-Package coreui.sass
-``` -->

docs/content/getting-started/vite.md

@@ -76,8 +76,7 @@ With dependencies installed and our project folder ready for us to start coding,
    export default {
      root: path.resolve(__dirname, 'src'),
      server: {
-       port: 8080,
-       hot: true
+       port: 8080
      }
    }
    ```

docs/content/utilities/position.md

@@ -93,8 +93,8 @@ Here are some real life examples of these classes:
   Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
 </button>
 
-<div class="position-relative py-2 px-4 text-bg-dark border border-dark rounded-pill">
-  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
+<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill">
+  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--cui-secondary)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
 </div>
 
 <button type="button" class="btn btn-primary position-relative">