Convert border utilities to CSS variables

- Updates the utilities mixin to check for specific CSS variable names via `css-variable`
- Bonus fix: we now prevent local variables for `0` value utilities (e.g., `.border-top-0` no longer sets `--bs-border-opacity: 1`
- Adds new `.border-opacity-*` classes
- Adds new root variables: `--bs-border-color`, `--bs-border-style`, `--bs-border-width`
- Documents the new variable changes

site/content/docs/5.1/utilities/api.md

@@ -18,6 +18,7 @@ The `$utilities` map contains all our utilities and is later merged with your cu
 | [`values`](#values) | **Required** | – | List of values, or a map if you don't want the class name to be the same as the value. If `null` is used as map key, `class` is not prepended to the class name. |
 | [`class`](#class) | Optional | null | Name of the generated class. If not provided and `property` is an array of strings, `class` will default to the first element of the `property` array. If not provided and `property` is a string, the `values` keys are used for the `class` names. |
 | [`css-var`](#css-variable-utilities) | Optional | `false` | Boolean to generate CSS variables instead of CSS rules. |
+| [`css-variable-name`](#css-variable-utilities) | Optional | null | Custom un-prefixed name for the CSS variable inside the ruleset. |
 | [`local-vars`](#local-css-variables) | Optional | null | Map of local CSS variables to generate in addition to the CSS rules. |
 | [`state`](#states) | Optional | null | List of pseudo-class variants (e.g., `:hover` or `:focus`) to generate. |
 | [`responsive`](#responsive) | Optional | `false` | Boolean indicating if responsive classes should be generated. |
@@ -158,12 +159,15 @@ Output:
 
 ### CSS variable utilities
 
-Set the `css-var` boolean option to `true` and the API will generate local CSS variables for the given selector instead of the usual `property: value` rules. Consider our `.text-opacity-*` utilities:
+Set the `css-var` boolean option to `true` and the API will generate local CSS variables for the given selector instead of the usual `property: value` rules. Add an optional `css-variable-name` to set a different CSS variable name than the class name.
+
+Consider our `.text-opacity-*` utilities. If we add the `css-variable-name` option, we'll get a custom output.
 
 ```scss
 $utilities: (
   "text-opacity": (
     css-var: true,
+    css-variable-name: text-alpha,
     class: text-opacity,
     values: (
       25: .25,
@@ -178,10 +182,10 @@ $utilities: (
 Output:
 
 ```css
-.text-opacity-25 { --bs-text-opacity: .25; }
-.text-opacity-50 { --bs-text-opacity: .5; }
-.text-opacity-75 { --bs-text-opacity: .75; }
-.text-opacity-100 { --bs-text-opacity: 1; }
+.text-opacity-25 { --bs-text-alpha: .25; }
+.text-opacity-50 { --bs-text-alpha: .5; }
+.text-opacity-75 { --bs-text-alpha: .75; }
+.text-opacity-100 { --bs-text-alpha: 1; }
 ```
 
 ### Local CSS variables