feat: add global CSS props for focus offset and color (#6782)

**Related Issue:** #3392 

## Summary

Adds the following global CSS props:

* `--calcite-ui-focus-color`
* `--calcite-ui-focus-offset-invert` – inverts the applied offset when
set to `1` or keeps as is when `0`

Author: jcfranco

calcite-preset.ts

@@ -1,6 +1,28 @@
 import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
 import plugin from "tailwindcss/plugin";
 
+/**
+ * This helper inverts a value based on a boolean CSS prop flag
+ *
+ * When the flag is 0, it will not be inverted. When 1, it will invert it (multiplied by -1)
+ *
+ * @param {string} value - the CSS value to invert
+ * @param {string} flagPropName - the boolean CSS prop (value must be 0 or 1)
+ */
+function invert(value: string, flagPropName: string): string {
+  return `calc(
+            ${value} *
+            calc(
+              1 -
+              2 * clamp(
+                0,
+                var(${flagPropName}),
+                1
+              )
+            )
+          )`;
+}
+
 export default {
   theme: {
     borderColor: ({ theme }): object => ({
@@ -233,23 +255,23 @@ export default {
           "outline-color": "transparent"
         },
         ".focus-normal": {
-          outline: "2px solid var(--calcite-ui-brand)"
+          outline: "2px solid var(--calcite-ui-focus-color)"
         },
         ".focus-outset": {
-          outline: "2px solid var(--calcite-ui-brand)",
-          "outline-offset": "2px"
+          outline: "2px solid var(--calcite-ui-focus-color)",
+          "outline-offset": invert("2px", "--calcite-ui-focus-offset-invert")
         },
         ".focus-inset": {
-          outline: "2px solid var(--calcite-ui-brand)",
-          "outline-offset": "-2px"
+          outline: "2px solid var(--calcite-ui-focus-color)",
+          "outline-offset": invert("-2px", "--calcite-ui-focus-offset-invert")
         },
         ".focus-outset-danger": {
           outline: "2px solid var(--calcite-ui-danger)",
-          "outline-offset": "2px"
+          "outline-offset": invert("2px", "--calcite-ui-focus-offset-invert")
         },
         ".focus-inset-danger": {
           outline: "2px solid var(--calcite-ui-danger)",
-          "outline-offset": "-2px"
+          "outline-offset": invert("-2px", "--calcite-ui-focus-offset-invert")
         },
         ".transition-default": {
           transition: "all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s"

src/assets/styles/global.scss

@@ -44,9 +44,11 @@
 
   --calcite-border-radius: 4px;
   --calcite-border-radius-base: 0;
-  --calcite-ui-opacity-disabled: 0.5;
   --calcite-panel-width-multiplier: 1;
+  --calcite-ui-focus-color: var(--calcite-ui-brand);
+  --calcite-ui-focus-offset-invert: 0; // should be 0 or 1
   --calcite-ui-icon-color: currentColor;
+  --calcite-ui-opacity-disabled: 0.5;
 
   @apply font-sans;
 }