fix: rename wrong CSS Variables names

Author: mrholek

docs/content/4.0/content/tables.md

@@ -212,10 +212,10 @@ Highlight a table row or cell by adding a `.table-active` class.
 
 For the accented tables ([striped rows](#striped-rows), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants):
 
-- We start by setting the background of a table cell with the `--coreui-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds.
-- Then we add a gradient on the table cells with `background-image: linear-gradient(var(--coreui-table-accent-bg), var(--coreui-table-accent-bg));` to layer on top of any specified `background-color`. Since `--coreui-table-accent-bg` is transparent by default, we have an invisible transparent linear gradient by default.
-- When either `.table-striped`, `.table-hover` or `.table-active` classes are added, the `--coreui-table-accent-bg` is set to a semitransparent color to colorize the background.
-- For each table variant, we generate a `--coreui-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color.
+- We start by setting the background of a table cell with the `--cui-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds.
+- Then we add a gradient on the table cells with `background-image: linear-gradient(var(--cui-table-accent-bg), var(--cui-table-accent-bg));` to layer on top of any specified `background-color`. Since `--cui-table-accent-bg` is transparent by default, we have an invisible transparent linear gradient by default.
+- When either `.table-striped`, `.table-hover` or `.table-active` classes are added, the `--cui-table-accent-bg` is set to a semitransparent color to colorize the background.
+- For each table variant, we generate a `--cui-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color.
 - Text and border colors are generated the same way, and their colors are inherited by default.
 
 Behind the scenes it looks like this:

docs/content/4.0/customize/css-variables.md

@@ -47,9 +47,9 @@ CSS variables offer similar flexibility to Sass's variables, but without the nee
 
 ```css
 body {
-  font: 1rem/1.5 var(--coreui-font-sans-serif);
+  font: 1rem/1.5 var(--cui-font-sans-serif);
 }
 a {
-  color: var(--coreui-blue);
+  color: var(--cui-blue);
 }
 ```

docs/content/4.0/migration.md

@@ -93,7 +93,7 @@ Badges were overhauled to better differentiate themselves from buttons and to be
 #### Breadcrumbs
 
 - Simplified the default appearance of breadcrumbs by removing `padding`, `background-color`, and `border-radius`.
-- Added new CSS custom property `--coreui-breadcrumb-divider` for easy customization without needing to recompile CSS.
+- Added new CSS custom property `--cui-breadcrumb-divider` for easy customization without needing to recompile CSS.
 
 #### Buttons
 

docs/content/4.0/utilities/colors.md

@@ -35,7 +35,7 @@ Sometimes contextual classes cannot be applied due to the specificity of another
 
 In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.
 
-Do you need a gradient in your custom CSS? Just add `background-image: var(--coreui-gradient);`.
+Do you need a gradient in your custom CSS? Just add `background-image: var(--cui-gradient);`.
 ### Variables
 
 Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables.

js/src/dropdown.js

@@ -296,7 +296,7 @@ class Dropdown extends BaseComponent {
     }
 
     // We need to trim the value because custom properties can also include spaces
-    const isEnd = getComputedStyle(this._menu).getPropertyValue('--coreui-position').trim() === 'end'
+    const isEnd = getComputedStyle(this._menu).getPropertyValue('--cui-position').trim() === 'end'
 
     if (parentDropdown.classList.contains(CLASS_NAME_DROPUP)) {
       return isEnd ? PLACEMENT_TOPEND : PLACEMENT_TOP