@carbonorm/carbonreact 3.4.0 → 3.4.1

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@carbonorm/carbonreact",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "browser": "dist/index.umd.js",
   "module": "dist/index.esm.js",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",
   "type": "module",
   "dependencies": {
-    "@carbonorm/carbonnode": "^1.1.0",
+    "@carbonorm/carbonnode": "^1.2.4",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
@@ -81,6 +81,8 @@
   "files": [
     "compileValidSQL.tsx",
     "compileValidSQL.cjs",
+    "generateRestBindings.tsx",
+    "generateRestBindings.cjs",
     "dist",
     "src"
   ]

package/src/CarbonReact.tsx

@@ -9,6 +9,7 @@ import 'react-toastify/dist/ReactToastify.min.css';
 import BackendThrowable from 'components/Errors/BackendThrowable';
 import Nest from 'components/Nest/Nest';
 import {initialRestfulObjectsState, iRestfulObjectArrayTypes} from "variables/C6";
+import CarbonWebSocket from "./components/WebSocket/CarbonWebSocket";
 
 
 
@@ -33,6 +34,16 @@ export const initialCarbonReactState: iCarbonReactState & iRestfulObjectArrayTyp
     ...initialRestfulObjectsState,
 }
 
+// @link https://stackoverflow.com/questions/3710204/how-to-check-if-a-string-is-a-valid-json-string
+export function isJsonString(str) {
+    try {
+        JSON.parse(str);
+    } catch (e) {
+        return false;
+    }
+    return true;
+}
+
 const CarbonReact= class <P = {}, S = {}> extends Component<{
     children?: ReactNode | ReactNode[],
 } & P, S & iCarbonReactState> {
@@ -42,6 +53,9 @@ const CarbonReact= class <P = {}, S = {}> extends Component<{
     } & any, any & iCarbonReactState>;
 
     static lastLocation = window.location.pathname;
+    static websocketUrl = (window.location.protocol === 'https:' ? 'wss://' : 'ws://') + window.location.host + ':8888/ws';
+    static websocketTimeoutSeconds : number = 250;
+    static websocketHeartbeatSeconds : number = 250;
 
     // @link https://github.com/welldone-software/why-did-you-render
     // noinspection JSUnusedGlobalSymbols
@@ -71,8 +85,6 @@ const CarbonReact= class <P = {}, S = {}> extends Component<{
         return CarbonReact.instance.state;
     }
 
-    websocketTimeout = 5000;
-
     shouldComponentUpdate(
         nextProps: Readonly<any>,
         nextState: Readonly<iCarbonReactState>,
@@ -117,6 +129,7 @@ const CarbonReact= class <P = {}, S = {}> extends Component<{
 
         return <BrowserRouter>
             <GlobalHistory/>
+            <CarbonWebSocket />
             {this.props.children}
             <ToastContainer/>
         </BrowserRouter>;

package/src/api/hoc/useEffectOnce.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from 'react';
+
+// @link https://dev.to/ag-grid/react-18-avoiding-use-effect-getting-called-twice-4i9e
+export const useEffectOnce = (effect: () => void | (() => void)) => {
+    const effectFn = useRef<() => void | (() => void)>(effect);
+    const destroyFn = useRef<void | (() => void)>();
+    const effectCalled = useRef(false);
+    const rendered = useRef(false);
+    const [, setVal] = useState<number>(0);
+
+    if (effectCalled.current) {
+        rendered.current = true;
+    }
+
+    useEffect(() => {
+        if (!effectCalled.current) {
+            destroyFn.current = effectFn.current();
+            effectCalled.current = true;
+        }
+
+        setVal(val => val + 1);
+
+        return () => {
+            if (!rendered.current) {
+                return;
+            }
+
+            if (destroyFn.current) {
+                destroyFn.current();
+            }
+        };
+    }, []);
+}

package/src/components/Alert/Alert.tsx

@@ -18,16 +18,6 @@ export interface iAlertButtonOptions {
     color: "default" | "primary" | "secondary" | "inherit" | "danger" | "info" | "success" | "warning" | undefined,
 }
 
-export function addAlert(props: iAlert) {
-
-    CarbonReact.instance.setState(previousState => ({
-        alertsWaiting: previousState.alertsWaiting.length === 0
-            ? [props]
-            : [...previousState.alertsWaiting, props]
-    }))
-
-}
-
 export interface iAlert {
     title: string,
     text: string,
@@ -38,11 +28,20 @@ export interface iAlert {
     then?: (value: string | undefined) => void,
     timeout?: number,
     footerText?: string,
-
     intercept?: boolean,
     backendThrowable?: { [key: string]: any },
 }
 
+export function addAlert(props: iAlert) {
+
+    CarbonReact.instance.setState(previousState => ({
+        alertsWaiting: previousState.alertsWaiting.length === 0
+            ? [props]
+            : [...previousState.alertsWaiting, props]
+    }))
+
+}
+
 export default function Alert() {
 
     const {alertsWaiting, backendThrowable} = CarbonReact.instance.state
@@ -73,7 +72,7 @@ export default function Alert() {
             title: "Oh no! An issue occurred!",
             text: backendThrowable?.['DropInGaming\\PHP\\Errors\\DropException'] ?? 'An unknown issue occurred. Please try again.',
             timeout: 0,
-            footerText: hideExpandInformation ? '' : 'These alert footer options are only shown to admins and in development environments. Click "Expand" to see more details.',
+            footerText: hideExpandInformation ? '' : 'These alert footer options are only shown in development environments. Click "Expand" to see more details.',
             buttons: buttons,
             // backendThrowable has its own custom component that can be expanded (called in the Bootstrap component)
             // our then function will be called when the user clicks on the button providing the option to expand or close

package/src/components/WebSocket/CarbonWebSocket.tsx

@@ -0,0 +1,181 @@
+import CarbonReact, {isJsonString} from "CarbonReact";
+import {addAlert} from "../Alert/Alert";
+import {useEffectOnce} from "../../api/hoc/useEffectOnce";
+import {tC6Tables} from "@carbonorm/carbonnode";
+
+
+/**
+ * @function connect
+ * This function establishes a connection with the websocket and also ensures constant reconnection if connection closes
+ **/
+export function initiateWebsocket({TABLES = undefined}: {TABLES?: tC6Tables} = {}) {
+
+    const {websocket} = CarbonReact.instance.state;
+
+    if (!("WebSocket" in window)) {
+
+        // todo - store that this has been shown in the state
+        addAlert({
+            title: 'Browser does not support websockets, live updates will fail. You may need to refresh the page to see the newest content.',
+            text: 'Please use a modern browser.',
+            icon: 'warning',
+        })
+
+    }
+
+    if (false === (undefined === websocket || null === websocket)) {
+
+        return;
+
+    }
+
+
+    let connectInterval;
+
+    const connection = new WebSocket(CarbonReact.websocketUrl);
+
+    console.log("Connecting websocket url", CarbonReact.websocketUrl);
+
+    CarbonReact.instance.setState({
+        websocket: connection
+    }, () => {
+
+        connection.onopen = () => {
+
+            console.log('WebSocket Client Connected To :: ' + CarbonReact.websocketUrl);
+
+            clearTimeout(connectInterval); // clear Interval on open of websocket connection
+
+            function heartbeat() {
+
+                const {websocket} = CarbonReact.instance.state;
+
+                if (!websocket) return;
+
+                if (websocket.readyState !== 1) return;
+
+                websocket.send("ping");
+
+                setTimeout(heartbeat, CarbonReact.websocketHeartbeatSeconds * 1000);
+
+            }
+
+            heartbeat();
+
+        };
+
+        connection.onmessage = (message: MessageEvent<string> ) => {
+
+            const parsedData = isJsonString(message?.data) ? JSON.parse(message?.data) : message?.data;
+
+            CarbonReact.instance.setState((prevState: Readonly<any>) => ({
+                websocketEvents: prevState.websocketEvents.concat(message),
+                websocketData: prevState.websocketData.concat(parsedData), // JSON.parse no good - base64?
+            }));
+
+            console.log('going to impl TABLES', TABLES)
+
+            /*if (undefined !== TABLES) {
+
+                TABLES.
+
+
+            }*/
+
+        };
+
+        window.addEventListener("focus", () => initiateWebsocket());
+
+        // websocket onclose event listener
+        connection.addEventListener('close', event => {
+
+            let reason;
+
+            console.log(
+                `Socket is closed.`,
+                event.reason, event);
+
+            const retry = () => {
+
+                const retrySeconds = Math.min(5000, (CarbonReact.websocketTimeoutSeconds + CarbonReact.websocketTimeoutSeconds) * 1000)
+
+                CarbonReact.websocketTimeoutSeconds = retrySeconds;
+
+                console.log(`WebSocket reconnect will be attempted in ${retrySeconds} second(s).`)
+
+                connectInterval = setTimeout(() => initiateWebsocket(), retrySeconds);
+
+            }
+
+            // See https://www.rfc-editor.org/rfc/rfc6455#section-7.4.1
+            switch (event.code) {
+                case 1000:
+                    reason = "Normal closure, meaning that the purpose for which the connection was established has been fulfilled.";
+                    break;
+                case 1001:
+                    retry(); //call check function after timeout
+                    reason = "An endpoint is \"going away\", such as a server going down or a browser having navigated away from a page.";
+                    break;
+                case 1002:
+                    reason = "An endpoint is terminating the connection due to a protocol error";
+                    break;
+                case 1003:
+                    reason = "An endpoint is terminating the connection because it has received a type of data it cannot accept (e.g., an endpoint that understands only text data MAY send this if it receives a binary message).";
+                    break;
+                case 1004:
+                    reason = "Reserved. The specific meaning might be defined in the future.";
+                    break;
+                case 1005:
+                    reason = "No status code was actually present.";
+                    break;
+                case 1006:
+                    retry();
+                    reason = "The connection was closed abnormally, e.g., without sending or receiving a close control frame";
+                    break;
+                case 1007:
+                    reason = "An endpoint is terminating the connection because it has received data within a message that was not consistent with the type of the message (e.g., non-UTF-8 [https://www.rfc-editor.org/rfc/rfc3629] data within a text message).";
+                    break;
+                case 1008:
+                    reason = "An endpoint is terminating the connection because it has received a message that \"violates its policy\". This reason is given either if there is no other suitable reason, or if there is a need to hide specific details about the policy.";
+                    break;
+                case 1009:
+                    reason = "An endpoint is terminating the connection because it has received a message that is too big for it to process.";
+                    break;
+                case 1010:
+                    reason = "An endpoint (client) is terminating the connection because it has expected the server to negotiate one or more extension, but the server didn't return them in the response message of the WebSocket handshake. <br /> Specifically, the extensions that are needed are: " + event.reason;
+                    break;
+                case 1011:
+                    reason = "A server is terminating the connection because it encountered an un expected condition that prevented it from fulfilling the request.";
+                    break;
+                case 1015:
+                    reason = "The connection was closed due to a failure to perform a TLS handshake (e.g., the server certificate can't be verified).";
+                    break;
+                default:
+                    reason = "Unknown reason";
+            }
+
+            console.log("The connection was closed for reason: " + reason);
+
+        });
+
+        // websocket onerror event listener
+        connection.addEventListener('websocket error', (e: Event) => {
+            console.error("Socket encountered error: ", e, JSON.stringify(e));
+            connection.close();
+        });
+
+    });
+
+}
+
+export default function () {
+
+    useEffectOnce(() => {
+
+        initiateWebsocket()
+
+    })
+
+    return null
+
+}

package/src/index.ts

@@ -4,6 +4,7 @@
 
 export { default as CarbonReact } from "./CarbonReact";
 export * from "./CarbonReact";
+export * from "./api/hoc/useEffectOnce";
 export { default as Alert } from "./components/Alert/Alert";
 export * from "./components/Alert/Alert";
 export { default as AccessDenied } from "./components/Errors/AccessDenied";
@@ -20,6 +21,8 @@ export { default as Nest } from "./components/Nest/Nest";
 export * from "./components/Nest/Nest";
 export { default as Popup } from "./components/Popup/Popup";
 export * from "./components/Popup/Popup";
+export { default as CarbonWebSocket } from "./components/WebSocket/CarbonWebSocket";
+export * from "./components/WebSocket/CarbonWebSocket";
 export * from "./hoc/GlobalHistory";
 export * from "./hoc/KeysMatching";
 export { default as addValidSQL } from "./hoc/addValidSQL";

package/src/variables/bootstrap.module.css

@@ -12,7 +12,7 @@
   **/
 /* override the !default vars with the values we set above */
 /*!
- * Bootstrap  v5.3.1 (https://getbootstrap.com/)
+ * Bootstrap  v5.3.2 (https://getbootstrap.com/)
  * Copyright 2011-2023 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
@@ -111,6 +111,7 @@
   --bs-link-hover-color: #0a58ca;
   --bs-link-hover-color-rgb: 10, 88, 202;
   --bs-code-color: #d63384;
+  --bs-highlight-color: #212529;
   --bs-highlight-bg: #fff3cd;
   --bs-border-width: 1px;
   --bs-border-style: solid;
@@ -182,6 +183,8 @@
   --bs-link-color-rgb: 110, 168, 254;
   --bs-link-hover-color-rgb: 139, 185, 254;
   --bs-code-color: #e685b5;
+  --bs-highlight-color: #dee2e6;
+  --bs-highlight-bg: #664d03;
   --bs-border-color: #495057;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
   --bs-form-valid-color: #75b798;
@@ -335,6 +338,7 @@ small, .small {
 
 mark, .mark {
   padding: 0.1875em;
+  color: var(--bs-highlight-color);
   background-color: var(--bs-highlight-bg);
 }
 
@@ -836,7 +840,7 @@ progress {
 
 .row-cols-3 > * {
   flex: 0 0 auto;
-  width: 33.3333333333%;
+  width: 33.33333333%;
 }
 
 .row-cols-4 > * {
@@ -851,7 +855,7 @@ progress {
 
 .row-cols-6 > * {
   flex: 0 0 auto;
-  width: 16.6666666667%;
+  width: 16.66666667%;
 }
 
 .col-auto {
@@ -1041,7 +1045,7 @@ progress {
   }
   .row-cols-xs-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-xs-4 > * {
     flex: 0 0 auto;
@@ -1053,7 +1057,7 @@ progress {
   }
   .row-cols-xs-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-xs-auto {
     flex: 0 0 auto;
@@ -1210,7 +1214,7 @@ progress {
   }
   .row-cols-sm-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-sm-4 > * {
     flex: 0 0 auto;
@@ -1222,7 +1226,7 @@ progress {
   }
   .row-cols-sm-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-sm-auto {
     flex: 0 0 auto;
@@ -1379,7 +1383,7 @@ progress {
   }
   .row-cols-md-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-md-4 > * {
     flex: 0 0 auto;
@@ -1391,7 +1395,7 @@ progress {
   }
   .row-cols-md-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-md-auto {
     flex: 0 0 auto;
@@ -1548,7 +1552,7 @@ progress {
   }
   .row-cols-lg-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-lg-4 > * {
     flex: 0 0 auto;
@@ -1560,7 +1564,7 @@ progress {
   }
   .row-cols-lg-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-lg-auto {
     flex: 0 0 auto;
@@ -1717,7 +1721,7 @@ progress {
   }
   .row-cols-xl-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-xl-4 > * {
     flex: 0 0 auto;
@@ -1729,7 +1733,7 @@ progress {
   }
   .row-cols-xl-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-xl-auto {
     flex: 0 0 auto;
@@ -1886,7 +1890,7 @@ progress {
   }
   .row-cols-xxl-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-xxl-4 > * {
     flex: 0 0 auto;
@@ -1898,7 +1902,7 @@ progress {
   }
   .row-cols-xxl-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-xxl-auto {
     flex: 0 0 auto;
@@ -2042,16 +2046,16 @@ progress {
   --bs-table-bg-type: initial;
   --bs-table-color-state: initial;
   --bs-table-bg-state: initial;
-  --bs-table-color: var(--bs-body-color);
+  --bs-table-color: var(--bs-emphasis-color);
   --bs-table-bg: var(--bs-body-bg);
   --bs-table-border-color: var(--bs-border-color);
   --bs-table-accent-bg: transparent;
-  --bs-table-striped-color: var(--bs-body-color);
-  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
-  --bs-table-active-color: var(--bs-body-color);
-  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
-  --bs-table-hover-color: var(--bs-body-color);
-  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
+  --bs-table-striped-color: var(--bs-emphasis-color);
+  --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
+  --bs-table-active-color: var(--bs-emphasis-color);
+  --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
+  --bs-table-hover-color: var(--bs-emphasis-color);
+  --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
   width: 100%;
   margin-bottom: 1rem;
   vertical-align: top;
@@ -2120,7 +2124,7 @@ progress {
 .table-primary {
   --bs-table-color: #000;
   --bs-table-bg: #cfe2ff;
-  --bs-table-border-color: #bacbe6;
+  --bs-table-border-color: #a6b5cc;
   --bs-table-striped-bg: #c5d7f2;
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #bacbe6;
@@ -2134,7 +2138,7 @@ progress {
 .table-secondary {
   --bs-table-color: #000;
   --bs-table-bg: #e2e3e5;
-  --bs-table-border-color: #cbccce;
+  --bs-table-border-color: #b5b6b7;
   --bs-table-striped-bg: #d7d8da;
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #cbccce;
@@ -2148,7 +2152,7 @@ progress {
 .table-success {
   --bs-table-color: #000;
   --bs-table-bg: #d1e7dd;
-  --bs-table-border-color: #bcd0c7;
+  --bs-table-border-color: #a7b9b1;
   --bs-table-striped-bg: #c7dbd2;
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #bcd0c7;
@@ -2162,7 +2166,7 @@ progress {
 .table-info {
   --bs-table-color: #000;
   --bs-table-bg: #cff4fc;
-  --bs-table-border-color: #badce3;
+  --bs-table-border-color: #a6c3ca;
   --bs-table-striped-bg: #c5e8ef;
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #badce3;
@@ -2176,7 +2180,7 @@ progress {
 .table-warning {
   --bs-table-color: #000;
   --bs-table-bg: #fff3cd;
-  --bs-table-border-color: #e6dbb9;
+  --bs-table-border-color: #ccc2a4;
   --bs-table-striped-bg: #f2e7c3;
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #e6dbb9;
@@ -2190,7 +2194,7 @@ progress {
 .table-danger {
   --bs-table-color: #000;
   --bs-table-bg: #f8d7da;
-  --bs-table-border-color: #dfc2c4;
+  --bs-table-border-color: #c6acae;
   --bs-table-striped-bg: #eccccf;
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #dfc2c4;
@@ -2204,7 +2208,7 @@ progress {
 .table-light {
   --bs-table-color: #000;
   --bs-table-bg: #f8f9fa;
-  --bs-table-border-color: #dfe0e1;
+  --bs-table-border-color: #c6c7c8;
   --bs-table-striped-bg: #ecedee;
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #dfe0e1;
@@ -2218,7 +2222,7 @@ progress {
 .table-dark {
   --bs-table-color: #fff;
   --bs-table-bg: #212529;
-  --bs-table-border-color: #373b3e;
+  --bs-table-border-color: #4d5154;
   --bs-table-striped-bg: #2c3034;
   --bs-table-striped-color: #fff;
   --bs-table-active-bg: #373b3e;
@@ -2534,6 +2538,7 @@ textarea.form-control-lg {
 
 .form-check-input {
   --bs-form-check-bg: var(--bs-body-bg);
+  flex-shrink: 0;
   width: 1em;
   height: 1em;
   margin-top: 0.25em;
@@ -2681,7 +2686,7 @@ textarea.form-control-lg {
   height: 0.5rem;
   color: transparent;
   cursor: pointer;
-  background-color: var(--bs-tertiary-bg);
+  background-color: var(--bs-secondary-bg);
   border-color: transparent;
   border-radius: 1rem;
 }
@@ -2707,7 +2712,7 @@ textarea.form-control-lg {
   height: 0.5rem;
   color: transparent;
   cursor: pointer;
-  background-color: var(--bs-tertiary-bg);
+  background-color: var(--bs-secondary-bg);
   border-color: transparent;
   border-radius: 1rem;
 }
@@ -3543,7 +3548,7 @@ textarea.form-control-lg {
   --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
   --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
   --bs-dropdown-divider-margin-y: 0.5rem;
-  --bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  --bs-dropdown-box-shadow: var(--bs-box-shadow);
   --bs-dropdown-link-color: var(--bs-body-color);
   --bs-dropdown-link-hover-color: var(--bs-body-color);
   --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
@@ -5670,7 +5675,7 @@ textarea.form-control-lg {
   --bs-modal-border-color: var(--bs-border-color-translucent);
   --bs-modal-border-width: var(--bs-border-width);
   --bs-modal-border-radius: var(--bs-border-radius-lg);
-  --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  --bs-modal-box-shadow: var(--bs-box-shadow-sm);
   --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
   --bs-modal-header-padding-x: 1rem;
   --bs-modal-header-padding-y: 1rem;
@@ -5811,7 +5816,7 @@ textarea.form-control-lg {
 @media (min-width: 576px) {
   .modal {
     --bs-modal-margin: 1.75rem;
-    --bs-modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+    --bs-modal-box-shadow: var(--bs-box-shadow);
   }
   .modal-dialog {
     max-width: var(--bs-modal-width);
@@ -6083,7 +6088,7 @@ textarea.form-control-lg {
   --bs-popover-border-color: var(--bs-border-color-translucent);
   --bs-popover-border-radius: var(--bs-border-radius-lg);
   --bs-popover-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
-  --bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  --bs-popover-box-shadow: var(--bs-box-shadow);
   --bs-popover-header-padding-x: 1rem;
   --bs-popover-header-padding-y: 0.5rem;
   --bs-popover-header-font-size: 1rem;
@@ -6517,7 +6522,7 @@ textarea.form-control-lg {
   --bs-offcanvas-bg: var(--bs-body-bg);
   --bs-offcanvas-border-width: var(--bs-border-width);
   --bs-offcanvas-border-color: var(--bs-border-color-translucent);
-  --bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  --bs-offcanvas-box-shadow: var(--bs-box-shadow-sm);
   --bs-offcanvas-transition: transform 0.3s ease-in-out;
   --bs-offcanvas-title-line-height: 1.5;
 }
@@ -7646,15 +7651,15 @@ textarea.form-control-lg {
 }
 
 .shadow {
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+  box-shadow: var(--bs-box-shadow) !important;
 }
 
 .shadow-sm {
-  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+  box-shadow: var(--bs-box-shadow-sm) !important;
 }
 
 .shadow-lg {
-  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
+  box-shadow: var(--bs-box-shadow-lg) !important;
 }
 
 .shadow-none {