gd-bs 6.4.2 → 6.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gd-bs",
-    "version": "6.4.2",
+    "version": "6.4.4",
     "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
     "main": "build/index.js",
     "typings": "src/index.d.ts",
@@ -36,13 +36,13 @@
         "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.2",
         "bootstrap-icons": "^1.11.1",
-        "core-js": "^3.33.2",
+        "core-js": "^3.33.3",
         "tippy.js": "^6.3.7"
     },
     "devDependencies": {
         "@babel/core": "^7.23.3",
         "@babel/preset-env": "^7.23.3",
-        "@types/node": "^18.18.9",
+        "@types/node": "^18.18.11",
         "autoprefixer": "^10.4.16",
         "babel-loader": "^9.1.3",
         "css-loader": "^6.8.1",
@@ -52,7 +52,7 @@
         "sass-loader": "^13.3.2",
         "style-loader": "^3.3.3",
         "terser-webpack-plugin": "^5.3.9",
-        "ts-loader": "^9.5.0",
+        "ts-loader": "^9.5.1",
         "typedoc": "^0.24.8",
         "typescript": "4.9.5",
         "webpack": "^5.89.0",

package/pnpm-lock.yaml

@@ -2,12 +2,12 @@ dependencies:
   '@popperjs/core': 2.11.8
   bootstrap: 5.3.2_@popperjs+core@2.11.8
   bootstrap-icons: 1.11.1
-  core-js: 3.33.2
+  core-js: 3.33.3
   tippy.js: 6.3.7
 devDependencies:
   '@babel/core': 7.23.3
   '@babel/preset-env': 7.23.3_@babel+core@7.23.3
-  '@types/node': 18.18.9
+  '@types/node': 18.18.11
   autoprefixer: 10.4.16
   babel-loader: 9.1.3_8d9fd6ebbdf323464e360929a56a208f
   css-loader: 6.8.1_webpack@5.89.0
@@ -17,7 +17,7 @@ devDependencies:
   sass-loader: 13.3.2_sass@1.69.5+webpack@5.89.0
   style-loader: 3.3.3_webpack@5.89.0
   terser-webpack-plugin: 5.3.9_webpack@5.89.0
-  ts-loader: 9.5.0_typescript@4.9.5+webpack@5.89.0
+  ts-loader: 9.5.1_typescript@4.9.5+webpack@5.89.0
   typedoc: 0.24.8_typescript@4.9.5
   typescript: 4.9.5
   webpack: 5.89.0_webpack-cli@5.1.4
@@ -1353,7 +1353,7 @@ packages:
   /@types/glob/5.0.30:
     dependencies:
       '@types/minimatch': 5.1.2
-      '@types/node': 18.18.9
+      '@types/node': 18.18.11
     dev: true
     resolution:
       integrity: sha1-ECZAnFYlqGiQdGAoCNCCsoZ7ilE=
@@ -1369,12 +1369,12 @@ packages:
     dev: true
     resolution:
       integrity: sha1-fyrX7FX5FEgvybHsS7GuYCjUYGY=
-  /@types/node/18.18.9:
+  /@types/node/18.18.11:
     dependencies:
       undici-types: 5.26.5
     dev: true
     resolution:
-      integrity: sha512-0f5klcuImLnG4Qreu9hPj/rEfFq6YRc5n2mAjSsH+ec/mJL+3voBH0+8T7o8RpFjH7ovc+TRsL/c7OYIQsPTfQ==
+      integrity: sha512-c1vku6qnTeujJneYH94/4aq73XrVcsJe35UPyAsSok1ijiKrkRzK+AxQPSpNMUnC03roWBBwJx/9I8V7lQoxmA==
   /@types/node/8.0.0:
     dev: true
     resolution:
@@ -1859,11 +1859,11 @@ packages:
     dev: true
     resolution:
       integrity: sha512-axfo+wxFVxnqf8RvxTzoAlzW4gRoacrHeoFlc9n0x50+7BEyZL/Rt3hicaED1/CEd7I6tPCPVUYcJwCMO5XUYw==
-  /core-js/3.33.2:
+  /core-js/3.33.3:
     dev: false
     requiresBuild: true
     resolution:
-      integrity: sha512-XeBzWI6QL3nJQiHmdzbAOiMYqjrb7hwU7A39Qhvd/POSa/t9E1AeZyEZx3fNvp/vtM8zXwhoL0FsiS0hD0pruQ==
+      integrity: sha512-lo0kOocUlLKmm6kv/FswQL8zbkH7mVsLJ/FULClOhv8WRVmKLVcs6XPNQAzstfeJTCHMyButEwG+z1kHxHoDZw==
   /cosmiconfig/8.3.6_typescript@4.9.5:
     dependencies:
       import-fresh: 3.3.0
@@ -2281,7 +2281,7 @@ packages:
       integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
   /jest-worker/27.5.1:
     dependencies:
-      '@types/node': 18.18.9
+      '@types/node': 18.18.11
       merge-stream: 2.0.0
       supports-color: 8.1.1
     dev: true
@@ -3039,7 +3039,7 @@ packages:
       node: '>=8.0'
     resolution:
       integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
-  /ts-loader/9.5.0_typescript@4.9.5+webpack@5.89.0:
+  /ts-loader/9.5.1_typescript@4.9.5+webpack@5.89.0:
     dependencies:
       chalk: 4.1.2
       enhanced-resolve: 5.15.0
@@ -3055,7 +3055,7 @@ packages:
       typescript: '*'
       webpack: ^5.0.0
     resolution:
-      integrity: sha512-LLlB/pkB4q9mW2yLdFMnK3dEHbrBjeZTYguaaIfusyojBgAGf5kF+O6KcWqiGzWqHk0LBsoolrp4VftEURhybg==
+      integrity: sha512-rNH3sK9kGZcH9dYzC7CewQm4NtxJTjSEVRJ2DyBZR7f8/wcta+iV44UPCXc5+nzDzivKtlzV6c9P4e+oFhDLYg==
   /typedoc/0.24.8_typescript@4.9.5:
     dependencies:
       lunr: 2.3.9
@@ -3270,12 +3270,12 @@ specifiers:
   '@babel/core': ^7.23.3
   '@babel/preset-env': ^7.23.3
   '@popperjs/core': ^2.11.8
-  '@types/node': ^18.18.9
+  '@types/node': ^18.18.11
   autoprefixer: ^10.4.16
   babel-loader: ^9.1.3
   bootstrap: ^5.3.2
   bootstrap-icons: ^1.11.1
-  core-js: ^3.33.2
+  core-js: ^3.33.3
   css-loader: ^6.8.1
   dts-bundle: ^0.7.3
   postcss-loader: ^7.3.3
@@ -3284,7 +3284,7 @@ specifiers:
   style-loader: ^3.3.3
   terser-webpack-plugin: ^5.3.9
   tippy.js: ^6.3.7
-  ts-loader: ^9.5.0
+  ts-loader: ^9.5.1
   typedoc: ^0.24.8
   typescript: 4.9.5
   webpack: ^5.89.0

package/src/styles/_custom.scss

@@ -31,14 +31,35 @@
         -webkit-mask: var(--bs-accordion-btn-active-icon);
         -webkit-mask-repeat: no-repeat;
     }
+    .bg-danger {
+        background-color: var(--sp-error-icon, #a80000) !important;
+    }
+    .bg-dark {
+        background-color: var(--sp-neutral-dark, #201f1e) !important;
+    }
+    .bg-info {
+        background-color: var(--sp-accent, #8764b8) !important;
+    }
+    .bg-light {
+        background-color: var(--sp-neutral-lighter, #f3f2f1) !important;
+    }
     .bg-primary {
         background-color: var(--sp-theme-primary, #0078d4) !important;
     }
-    /* Create a reusable 'SharePoint Blue' background color */
+    .bg-secondary {
+        background-color: var(--sp-info-icon, #605e5c) !important;
+    }
+    /* Create a reusable 'SharePoint' background color */
     .bg-sharepoint {
-        background-color: var(--sp-theme-primary, #0078d4) !important;
+        background-color: var(--sp-theme-dark, #005a9e) !important;
+    }
+    .bg-success {
+        background-color: var(--sp-success-icon, #107c10) !important;
+    }
+    .bg-warning {
+        background-color: var(--sp-severe-warning-icon, #d83b01) !important;
     }
-    .bg-white {
+    .bg-white, .bg-body {
         background-color: var(--sp-white, #ffffff) !important;
     }
     /* Fix breadcrumb alignment */
@@ -58,7 +79,6 @@
     /* Color match breadcrumb active links */
     .breadcrumb-item>a:active {
         color: var(--sp-primary-text, #333333);
-        font-weight: 500;
         text-decoration: underline;
     }
     /* Fix breadcrumb alignment */
@@ -80,7 +100,7 @@
     .btn:focus-visible {
         background-color: var(--sp-neutral-dark, #201f1e);
         border-color: var(--sp-neutral-dark, #201f1e);
-        color: var(--sp-neutral-lighter-alt, #faf9f8);
+        color: var(--sp-neutral-lighter, #f3f2f1);
     }
     /** Button Icon - Custom class */
     .btn-icon {
@@ -106,16 +126,16 @@
         --bs-btn-disabled-border-color: var(--sp-error-icon, #a80000);
     }
     .btn-outline-light {
-        --bs-btn-color: var(--sp-neutral-lighter-alt, #faf9f8);
-        --bs-btn-border-color: var(--sp-neutral-lighter-alt, #faf9f8);
+        --bs-btn-color: var(--sp-neutral-lighter, #f3f2f1);
+        --bs-btn-border-color: var(--sp-neutral-lighter, #f3f2f1);
         --bs-btn-hover-color: var(--sp-black, #000000);
-        --bs-btn-hover-bg: var(--sp-neutral-lighter-alt, #faf9f8);
-        --bs-btn-hover-border-color: var(--sp-neutral-lighter-alt, #faf9f8);
+        --bs-btn-hover-bg: var(--sp-neutral-lighter, #f3f2f1);
+        --bs-btn-hover-border-color: var(--sp-neutral-lighter, #f3f2f1);
         --bs-btn-active-color: var(--sp-black, #000000);
-        --bs-btn-active-bg: var(--sp-neutral-lighter-alt, #faf9f8);
-        --bs-btn-active-border-color: var(--sp-neutral-lighter-alt, #faf9f8);
-        --bs-btn-disabled-color: var(--sp-neutral-lighter-alt, #faf9f8);
-        --bs-btn-disabled-border-color: var(--sp-neutral-lighter-alt, #faf9f8);
+        --bs-btn-active-bg: var(--sp-neutral-lighter, #f3f2f1);
+        --bs-btn-active-border-color: var(--sp-neutral-lighter, #f3f2f1);
+        --bs-btn-disabled-color: var(--sp-neutral-lighter, #f3f2f1);
+        --bs-btn-disabled-border-color: var(--sp-neutral-lighter, #f3f2f1);
     }
     .btn-outline-primary {
         --bs-btn-color: var(--sp-theme-primary, #0078d4);
@@ -130,16 +150,16 @@
         --bs-btn-disabled-border-color: var(--sp-theme-primary, #0078d4);
     }
     .btn-outline-secondary {
-        --bs-btn-color: var(--sp-neutral-secondary, #605e5c);
-        --bs-btn-border-color: var(--sp-neutral-secondary, #605e5c);
+        --bs-btn-color: var(--sp-info-icon, #605e5c);
+        --bs-btn-border-color: var(--sp-info-icon, #605e5c);
         --bs-btn-hover-color: var(--sp-white, #ffffff);
-        --bs-btn-hover-bg: var(--sp-neutral-secondary, #605e5c);
-        --bs-btn-hover-border-color: var(--sp-neutral-secondary, #605e5c);
+        --bs-btn-hover-bg: var(--sp-info-icon, #605e5c);
+        --bs-btn-hover-border-color: var(--sp-info-icon, #605e5c);
         --bs-btn-active-color: var(--sp-white, #ffffff);
-        --bs-btn-active-bg: var(--sp-neutral-secondary, #605e5c);
-        --bs-btn-active-border-color: var(--sp-neutral-secondary, #605e5c);
-        --bs-btn-disabled-color: var(--sp-neutral-secondary, #605e5c);
-        --bs-btn-disabled-border-color: var(--sp-neutral-secondary, #605e5c);
+        --bs-btn-active-bg: var(--sp-info-icon, #605e5c);
+        --bs-btn-active-border-color: var(--sp-info-icon, #605e5c);
+        --bs-btn-disabled-color: var(--sp-info-icon, #605e5c);
+        --bs-btn-disabled-border-color: var(--sp-info-icon, #605e5c);
     }
     .btn-outline-success {
         --bs-btn-color: var(--sp-success-icon, #107c10);
@@ -169,8 +189,8 @@
     }
     .btn-secondary {
         --bs-btn-color: var(--sp-white, #ffffff);
-        --bs-btn-bg: var(--sp-neutral-secondary, #605e5c);
-        --bs-btn-border-color: var(--sp-neutral-secondary, #605e5c);
+        --bs-btn-bg: var(--sp-info-icon, #605e5c);
+        --bs-btn-border-color: var(--sp-info-icon, #605e5c);
         --bs-btn-hover-color: var(--sp-white, #ffffff);
         --bs-btn-hover-bg: var(--sp-neutral-primary, #323130);
         --bs-btn-hover-border-color: var(--sp-neutral-primary-alt, #3b3a39);
@@ -178,46 +198,12 @@
         --bs-btn-active-bg: var(--sp-neutral-primary-alt, #3b3a39);
         --bs-btn-active-border-color: var(--sp-neutral-secondary-alt, #8a8886);
         --bs-btn-disabled-color: var(--sp-white, #ffffff);
-        --bs-btn-disabled-bg: var(--sp-neutral-secondary, #605e5c);
-        --bs-btn-disabled-border-color: var(--sp-neutral-secondary, #605e5c);
-    }
-    .btn-primary, .btn-primary:disabled, .btn-primary.disabled {
-        background-color: var(--sp-theme-primary, #0078d4);
-        border-color: var(--sp-theme-primary, #0078d4);
-        color: var(--sp-white, #ffffff);
-    }
-    /* Color match the primary button hover */
-    .btn-primary:hover {
-        background-color: var(--sp-theme-darker, #004578);
-        border-color: var(--sp-theme-darker, #004578);
-    }
-    /* Color match primary outline button */
-    .btn-outline-primary, .btn-outline-primary:disabled, .btn-outline-primary.disabled {
-        border-color: var(--sp-theme-primary, #0078d4);
-        color: var(--sp-theme-primary, #0078d4);
-    }
-    /* Color match primary outline button hover */
-    .btn-outline-primary:hover {
-        background-color: var(--sp-theme-primary, #0078d4);
-        border-color: var(--sp-theme-primary, #0078d4);
-        color: var(--sp-white, #ffffff);
-    }
-    .btn-outline-light {
-        --bs-btn-color: var(--sp-neutral-lighter-alt, #faf9f8);
-        --bs-btn-border-color: var(--sp-neutral-lighter-alt, #faf9f8);
-        --bs-btn-hover-color: var(--sp-black, #000000);
-        --bs-btn-hover-bg: var(--sp-neutral-lighter-alt, #faf9f8);
-        --bs-btn-hover-border-color: var(--sp-neutral-lighter-alt, #faf9f8);
-        --bs-btn-active-color: var(--sp-black, #000000);
-        --bs-btn-active-bg: var(--sp-neutral-lighter-alt, #faf9f8);
+        --bs-btn-disabled-bg: var(--sp-info-icon, #605e5c);
+        --bs-btn-disabled-border-color: var(--sp-info-icon, #605e5c);
     }
     /* Fix color for outline light focus */
     .btn-outline-light:focus {
-        color: var(--sp-neutral-lighter-alt, #faf9f8);
-    }
-    .btn-outline-light:hover {
-        background-color: var(--sp-neutral-lighter-alt, #faf9f8);
-        border-color: var(--sp-neutral-lighter-alt, #faf9f8);
+        color: var(--sp-neutral-lighter, #f3f2f1);
     }
     /* Fix color for outline light active */
     .btn-outline-light:active, .btn-outline-light:hover {
@@ -226,47 +212,23 @@
             fill: var(--sp-black, #000000);
         }
     }
-    .btn-outline-secondary {
-        --bs-btn-color: var(--sp-neutral-secondary, #605e5c);
-        --bs-btn-border-color: var(--sp-neutral-secondary, #605e5c);
-        --bs-btn-hover-color: var(--sp-white, #ffffff);
-        --bs-btn-hover-bg: var(--sp-neutral-secondary, #605e5c);
-        --bs-btn-hover-border-color: var(--sp-neutral-secondary, #605e5c);
-        --bs-btn-active-color: var(--sp-white, #ffffff);
-        --bs-btn-active-bg: var(--sp-neutral-secondary, #605e5c);
-        --bs-btn-active-border-color: var(--sp-neutral-secondary, #605e5c);
-        --bs-btn-disabled-color: var(--sp-neutral-secondary, #605e5c);
-        --bs-btn-disabled-border-color: var(--sp-neutral-secondary, #605e5c);
-    }
-    .btn-check:checked+.btn, :not(.btn-check)+.btn:active, .btn:first-child:active, .btn.active, .btn.show {
-        background-color: var(--sp-theme-dark, #005a9e);
-        border-color: var(--sp-theme-dark, #005a9e);
-        color: var(--sp-primary-button-text, #ffffff);
-    }
     /* Color match primary outline button focus */
     .btn-check:focus+.bs .btn-outline-primary, .btn-outline-primary:focus {
         box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 25%);
     }
-    /* Color match primary outline button active */
-    .btn-check:checked+.bs .btn-outline-primary, .btn-check:active+.bs .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
-        background-color: var(--sp-theme-darker, #004578);
-        border-color: var(--sp-theme-darker, #004578);
-    }
     /* Color match the primary button focus */
     .btn-check:focus+.btn-primary, .btn-primary:focus {
         background-color: var(--sp-theme-darker, #004578);
         border-color: var(--sp-theme-darker, #004578);
         box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 25%);
     }
-    /* Color match the primary button active */
-    .btn-check:checked+.btn-primary, .btn-check:active+.btn-primary, .btn-primary:active, .btn-primary.active, .show>.btn-primary.dropdown-toggle {
-        background-color: var(--sp-theme-light, #c7e0f4);
-        border-color: var(--sp-theme-light, #c7e0f4);
-    }
     /* Color match the shadow on active */
     .btn-check:checked+.btn-primary:focus, .btn-check:active+.btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show>.btn-primary.dropdown-toggle:focus {
         box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 25%);
     }
+    .card {
+        --bs-card-border-color: var(--bs-border-color);
+    }
     .carousel-caption {
         color: var(--sp-neutral-dark, #201f1e) !important;
     }
@@ -289,7 +251,7 @@
         display: inherit;
     }
     /* Show checkboxes & toggles as buttons */
-    .form-check .form-check-input {
+    .form-check .form-check-input, .form-select:hover {
         cursor: pointer;
     }
     /* Adjust checkbox size */
@@ -314,10 +276,8 @@
         background-color: var(--sp-theme-primary, #0078d4);
         border-color: var(--sp-theme-primary, #0078d4);
     }
-    /* Color match form elements */
-    .form-control {
-        border-color: var(--sp-neutral-secondary, #605e5c);
-        border-radius: var(--bs-border-radius, 0.375rem);
+    .form-control:hover, .form-select:hover {
+        border-color: var(--sp-theme-tertiary, #71afe5);
     }
     /* Color match disabled form elements */
     .form-control:disabled, .form-control[readonly] {
@@ -326,7 +286,7 @@
         color: var(--sp-neutral-tertiary, #a19f9d);
     }
     .form-control::placeholder {
-        color: var(--sp-neutral-secondary, #605e5c);
+        color: var(--sp-info-icon, #605e5c);
     }
     .form-range::-webkit-slider-thumb {
         background-color: var(--sp-theme-primary, #0078d4);
@@ -334,12 +294,7 @@
     /* Bootstrap Icon: Custom - caret-up-fill + caret-down-fill */
     .form-select {
         background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 16 25.333' fill='%23605e5c' width='1em' height='1em'><path d='M0.34 8.03C-0.44 8.92 0.2 10.32 1.38 10.32C2.71 10.32 13.3 10.32 14.62 10.32C15.38 10.32 16 9.7 16 8.94C16 8.61 15.88 8.28 15.66 8.03C15 7.28 9.7 1.23 9.04 0.47C8.54 -0.1 7.67 -0.16 7.09 0.34C7.05 0.38 7 0.43 6.96 0.47C6.96 0.47 1.01 7.28 0.34 8.03Z'/><path d='M0.34 17.3C-0.44 16.41 0.2 15.01 1.38 15.01C2.71 15.01 13.3 15.01 14.62 15.01C15.38 15.01 16 15.63 16 16.39C16 16.73 15.88 17.05 15.66 17.3C15 18.06 9.7 24.11 9.04 24.86C8.54 25.43 7.67 25.49 7.09 24.99C7.05 24.95 7 24.91 6.96 24.86C6.96 24.86 1.01 18.06 0.34 17.3Z'/></svg>");
-        border: 1px solid var(--sp-neutral-secondary, #605e5c);
-    }
-    /* Set cursor on hover */
-    .form-select:hover {
-        border-color: var(--sp-theme-light, #c7e0f4);
-        cursor: pointer;
+        border-color: var(--sp-info-icon, #605e5c);
     }
     /* Color match form-select active */
     .form-select:active, .form-select:focus {
@@ -351,16 +306,17 @@
         background-size: 8px 10px;
         padding-right: 1.65rem;
     }
-    .form-switch .form-check-input {
-        height: 1.25em;
-    }
-    /* Color match the toggle on focus */
-    .form-switch .form-check-input:focus {
-        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%232b88d8'/%3e%3c/svg%3e");
-    }
-    /* Update toggle to white after checked */
-    .form-switch .form-check-input:checked {
-        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
+    /* Color match the toggle */
+    .form-switch {
+        .form-check-input {
+            height: 1.25em;
+        }
+        .form-check-input:focus:not(:checked):not(.dark) {
+            --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238a8886'/%3e%3c/svg%3e");
+        }
+        .form-check-input.dark, .form-check-input.dark:focus, .form-check-input.dark:checked {
+            --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23faf9f8'/%3e%3c/svg%3e");
+        }
     }
     button.btn-close.invert, :not(.btn-group).invert, .btn-group.invert::after, img.invert {
         filter: invert(1);
@@ -372,10 +328,10 @@
         -webkit-line-clamp: 1;
     }
     /* Color match the active list group item */
-    .list-group-item.active {
+    .list-group {
         --bs-list-group-active-color: var(--sp-white, #ffffff);
-        background-color: var(--sp-theme-primary, #0078d4);
-        border-color: var(--sp-theme-primary, #0078d4);
+        --bs-list-group-active-bg: var(--sp-theme-primary, #0078d4);
+        --bs-list-group-active-border-color: var(--sp-theme-primary, #0078d4);
     }
     .modal-content {
         color: var(--sp-neutral-dark, #201f1e);
@@ -428,8 +384,8 @@
     }
     /* Color match nav-tabs hover to secondary color */
     .nav-tabs .nav-link:hover {
-        background-color: var(--sp-neutral-secondary, #605e5c);
-        border-color: var(--sp-neutral-secondary, #605e5c);
+        background-color: var(--sp-info-icon, #605e5c);
+        border-color: var(--sp-info-icon, #605e5c);
         color: var(--sp-primary-button-text, #ffffff);
     }
     /* Color match nav-tabs active to SharePoint */
@@ -439,8 +395,12 @@
         color: var(--sp-primary-button-text, #ffffff);
     }
     .navbar {
-        --bs-navbar-brand-color: var(--sp-primary-button-text, #ffffff);
         --bs-navbar-color: var(--sp-primary-button-text, #ffffff);
+        --bs-navbar-hover-color: var(--sp-theme-darker, #004578);
+        --bs-navbar-disabled-color: var(--sp-neutral-tertiary, #a19f9d);
+        --bs-navbar-active-color: var(--sp-theme-light, #c7e0f4);
+        --bs-navbar-brand-color: var(--sp-primary-button-text, #ffffff);
+        --bs-navbar-brand-hover-color: var(--sp-theme-darker, #004578);
     }
     /* Properly align the navbar brand text */
     .navbar-brand {
@@ -488,21 +448,21 @@
     .offcanvas-top.offcanvas-size-full, .offcanvas-bottom.offcanvas-size-full { height: 100vh; }
     /* Color match the pagination link color to 'SharePoint Blue' */
     .page-link {
-        border-color: var(--sp-neutral-secondary, #605e5c);
+        border-color: var(--sp-info-icon, #605e5c);
         color: var(--sp-theme-primary, #0078d4);
         font-size: 13px;
     }
     /* Color match the pagination disabled border colors */
     .page-item.disabled .page-link {
         background-color: var(--sp-white, #ffffff);
-        border-color: var(--sp-neutral-secondary, #605e5c);
-        color: var(--sp-neutral-secondary, #605e5c);
+        border-color: var(--sp-info-icon, #605e5c);
+        color: var(--sp-info-icon, #605e5c);
         pointer-events: none;
     }
     /* Color match the pagination active link colors */
     .page-item.active .page-link {
-        background-color: var(--sp-neutral-secondary, #605e5c);
-        border-color: var(--sp-neutral-secondary, #605e5c);
+        background-color: var(--sp-info-icon, #605e5c);
+        border-color: var(--sp-info-icon, #605e5c);
         color: var(--sp-primary-button-text, #ffffff);
         z-index: inherit;
     }
@@ -514,7 +474,7 @@
     .page-link:hover {
         color: var(--sp-primary-text, #333333);
         background-color: var(--sp-neutral-quaternary, #d2d0ce);
-        border-color: var(--sp-neutral-secondary, #605e5c);
+        border-color: var(--sp-info-icon, #605e5c);
     }
     /* Color match for SharePoint */
     .page-link:focus, .form-control:focus, .form-check-input:focus {
@@ -594,7 +554,7 @@
         color: var(--sp-accent, #8764b8) !important;
     }
     .text-light {
-        color: var(--sp-neutral-lighter-alt, #faf9f8) !important;
+        color: var(--sp-neutral-lighter, #f3f2f1) !important;
     }
     .text-muted {
         color: var(--sp-neutral-secondary-alt, #8a8886) !important;
@@ -603,7 +563,7 @@
         color: var(--sp-theme-primary, #0078d4) !important;
     }
     .text-secondary {
-        color: var(--sp-neutral-secondary, #605e5c) !important;
+        color: var(--sp-info-icon, #605e5c) !important;
     }
     .text-success {
         color: var(--sp-success-icon, #107c10) !important;

package/src/styles/_dataTables.scss

@@ -1,20 +1,15 @@
 /* Center the dataTables_info element properly */
-
 div.dataTables_wrapper div.dataTables_info {
     padding-top: 0.9rem;
 }
 
-
 /* Add proper width for dataTables_length select */
-
 div.dataTables_wrapper div.dataTables_length select {
     width: 3.75rem;
 }
 
 /* Be sure to escape any characters, such as # to %23 when specifying hex color values in background-image */
-
 /* DataTables sorting with Bootstrap Icons */
-
 table.dataTable thead .sorting,
 table.dataTable thead .sorting_asc,
 table.dataTable thead .sorting_desc,
@@ -38,27 +33,21 @@ table.dataTable thead .sorting_desc_disabled:after {
 }
 
 /* Bootstrap Icon: caret-up */
-
 table.dataTable thead .sorting {
     background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23605e5c' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M3.204 11L8 5.519 12.796 11H3.204zm-.753-.659l4.796-5.48a1 1 0 0 1 1.506 0l4.796 5.48c.566.647.106 1.659-.753 1.659H3.204a1 1 0 0 1-.753-1.659z'/></svg>");
 }
 
-
 /* Bootstrap Icon: caret-up-fill */
-
 table.dataTable thead .sorting_asc {
     background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23605e5c' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/></svg>");
 }
 
-
 /* Bootstrap Icon: caret-down-fill */
-
 table.dataTable thead .sorting_desc {
     background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23605e5c' 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>");
 }
 
 /* Color match colReorder line */
-
 div.DTCR_pointer {
-    background-color: var(--sp-theme-accent, #0078d4);
+    background-color: var(--sp-theme-primary, #0078d4);
 }