@g1cloud/open-bluesea-grid 1.0.0-alpha.2 → 1.0.0-alpha.4

package/dist/icons.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import './styles/tailwind.css';
+import './icons';
 export { default as BSGrid } from './component/BSGrid.vue';
 export { default as BSGridCell } from './component/BSGridCell.vue';
 export { default as BSGridCellCheckbox } from './component/BSGridCellCheckbox.vue';

package/dist/open-bluesea-grid.css

@@ -290,20 +290,24 @@
     visibility: visible;
   }
 
-  .fixed {
-    position: fixed;
+  .absolute {
+    position: absolute;
   }
 
-  .relative {
-    position: relative;
+  .fixed {
+    position: fixed;
   }
 
   .static {
     position: static;
   }
 
-  .mx-1\.5 {
-    margin-inline: calc(var(--spacing) * 1.5);
+  .m-1\.5 {
+    margin: calc(var(--spacing) * 1.5);
+  }
+
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * .5);
   }
 
   .mb-1 {
@@ -322,10 +326,6 @@
     display: none;
   }
 
-  .inline-flex {
-    display: inline-flex;
-  }
-
   .table {
     display: table;
   }
@@ -358,6 +358,10 @@
     cursor: pointer;
   }
 
+  .resize {
+    resize: both;
+  }
+
   .flex-col {
     flex-direction: column;
   }
@@ -366,39 +370,27 @@
     align-items: center;
   }
 
-  .items-start {
-    align-items: flex-start;
+  .justify-end {
+    justify-content: flex-end;
   }
 
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
 
-  .gap-8 {
-    gap: calc(var(--spacing) * 8);
-  }
-
-  .rounded-none {
-    border-radius: 0;
-  }
-
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
 
-  .pt-1 {
-    padding-top: calc(var(--spacing) * 1);
-  }
-
-  .pr-2 {
-    padding-right: calc(var(--spacing) * 2);
-  }
-
   .text-center {
     text-align: center;
   }
 
+  .text-left {
+    text-align: left;
+  }
+
   .text-right {
     text-align: right;
   }
@@ -420,6 +412,61 @@
   }
 }
 
+@layer bluesea-grid-base {
+  :root {
+    --bs-grid-cell-padding: 8px;
+    --bs-grid-border-color: var(--bs-gray-200);
+    --bs-grid-border-radius: 0;
+    --bs-grid-border-width-x: 0;
+    --bs-grid-border-width-y: 1px;
+    --bs-grid-bg: var(--bs-gray-100);
+    --bs-grid-shadow: 0 1px 8px #00000008, 0 1px 4px #00000008;
+    --bs-grid-header-bg: var(--bs-gray-100);
+    --bs-grid-header-text: var(--bs-body-text);
+    --bs-grid-header-weight: 400;
+    --bs-grid-header-border-color: var(--bs-gray-200);
+    --bs-grid-header-filter-bg: #eaf1fe;
+    --bs-grid-header-min-height: 36.5px;
+    --bs-grid-row-odd-bg: var(--bs-body-bg);
+    --bs-grid-row-even-bg: var(--bs-gray-100);
+    --bs-grid-row-hover-bg: var(--bs-gray-200);
+    --bs-grid-row-selected-bg: #def;
+    --bs-grid-cell-text: var(--bs-body-text);
+    --bs-grid-cell-border-color: transparent;
+    --bs-grid-func-cell-min-width: 32px;
+    --bs-grid-serial-cell-min-width: 40px;
+    --bs-grid-edit-cell-min-width: 33px;
+    --bs-grid-checkbox-color: var(--bs-color-text-light);
+    --bs-grid-checkbox-checked-color: var(--bs-color-text);
+    --bs-grid-scroll-shadow: linear-gradient(90deg, #0000000d 0%, #0000 100%);
+    --bs-grid-scroll-shadow-dark: linear-gradient(90deg, #ffffff1a 0%, #fff0 100%);
+    --bs-grid-header-scroll-shadow: 0 1px 4px #00000012;
+    --bs-grid-control-text: var(--bs-gray-400);
+    --bs-grid-control-gap: 8px;
+    --bs-date-range-filter-bg: var(--bs-body-bg);
+    --bs-date-range-filter-border: var(--bs-border);
+    --bs-date-range-filter-border-radius: var(--bs-border-radius);
+    --bs-date-range-preset-bg: var(--bs-gray-200);
+    --bs-date-range-preset-active-bg: #000;
+    --bs-date-range-preset-active-text: var(--bs-white);
+    --bs-date-range-preset-border-radius: .25rem;
+    --bs-text-filter-bg: var(--bs-body-bg);
+    --bs-text-filter-border: var(--bs-border);
+    --bs-text-filter-border-radius: var(--bs-border-radius);
+    --bs-grid-lookup-bg: transparent;
+    --bs-grid-lookup-border: var(--bs-border);
+    --bs-grid-lookup-shadow: 2px 2px 8px #0000001a;
+    --bs-grid-setting-item-bg: var(--bs-body-bg);
+    --bs-grid-setting-item-border: var(--bs-border-light);
+    --bs-grid-setting-item-hover-bg: var(--bs-color-hover);
+  }
+
+  [data-theme="dark"] {
+    --bs-grid-header-filter-bg: var(--bs-primary-400);
+    --bs-grid-scroll-shadow: var(--bs-grid-scroll-shadow-dark);
+  }
+}
+
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false
@@ -532,32 +579,30 @@
   top: 0;
   right: 0;
   bottom: -500px;
-}.sort-icon[data-v-fbb8ef01] {
+}.sort-icon[data-v-37a577b0] {
   line-height: 1;
 }
-.sort-icon.descending[data-v-fbb8ef01] {
+.sort-icon.descending[data-v-37a577b0] {
   transform: rotate(180deg);
-}.checked .font-icon {
-  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 48;
+}.checked .bs-icon {
   color: var(--primary);
-}.checked .font-icon[data-v-0211159f] {
-  font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 48;
+}.checked .bs-icon[data-v-704bd1b5] {
   color: var(--primary);
 }
-.disabled[data-v-0211159f] {
-  color: var(--gray-400);
-}.drag-handle > .font-icon {
+.disabled[data-v-704bd1b5] {
+  color: var(--bs-gray-400);
+}
+.drag-handle {
+  text-align: center;
+}
+.drag-handle > .bs-icon {
   font-size: 1.8em;
   margin-left: -2px;
   cursor: grab;
   user-select: none;
+&:active {
+    cursor: grabbing;
 }
-.drag-handle > .font-icon:active {
-  cursor: grabbing;
-}:root {
-  --grid-cell-padding: 8px;
-  --grid-row-odd-color: var(--body-bg);
-  --grid-row-even-color: var(--gray-100);
 }
 .bs-grid {
   position: relative;
@@ -567,61 +612,86 @@
 .bs-grid > .table-wrap {
   overflow: auto;
   flex-grow: 1;
-  background-color: var(--gray-100);
-  border-top: 1px solid var(--gray-200);
-  border-bottom: 1px solid var(--gray-200);
+  background-color: var(--bs-grid-bg);
+  border-top: var(--bs-grid-border-width-y) solid var(--bs-grid-border-color);
+  border-bottom: var(--bs-grid-border-width-y) solid var(--bs-grid-border-color);
+  border-left: var(--bs-grid-border-width-x) solid var(--bs-grid-border-color);
+  border-right: var(--bs-grid-border-width-x) solid var(--bs-grid-border-color);
+  border-radius: var(--bs-grid-border-radius);
 }
 .bs-grid > .table-wrap > table {
   flex-grow: 1;
   table-layout: fixed;
   border-collapse: collapse;
-  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03), 0 1px 4px rgba(0, 0, 0, 0.03);
+  box-shadow: var(--bs-grid-shadow);
 }
 .bs-grid > .table-wrap > table > thead > tr > td,
 .bs-grid > .table-wrap > table > thead > tr > th,
 .bs-grid > .table-wrap > table tbody > tr > td,
 .bs-grid > .table-wrap > table tbody > tr > th {
-  vertical-align: middle;
+  height: 1px;
 }
 .bs-grid > .table-wrap > table > thead > tr > td > div,
 .bs-grid > .table-wrap > table > thead > tr > th > div,
 .bs-grid > .table-wrap > table tbody > tr > td > div,
 .bs-grid > .table-wrap > table tbody > tr > th > div {
-  padding: var(--grid-cell-padding);
+  padding: var(--bs-grid-cell-padding);
   overflow: hidden;
   min-height: 1em;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: start;
 }
 .bs-grid > .table-wrap > table > thead > tr > td > div > a,
 .bs-grid > .table-wrap > table > thead > tr > th > div > a,
 .bs-grid > .table-wrap > table tbody > tr > td > div > a,
 .bs-grid > .table-wrap > table tbody > tr > th > div > a {
-  color: var(--body-text) !important;
+  color: var(--bs-grid-cell-text) !important;
+}
+.bs-grid > .table-wrap > table > thead > tr > td.text-center > div,
+.bs-grid > .table-wrap > table > thead > tr > th.text-center > div,
+.bs-grid > .table-wrap > table tbody > tr > td.text-center > div,
+.bs-grid > .table-wrap > table tbody > tr > th.text-center > div {
+  justify-content: center;
+}
+.bs-grid > .table-wrap > table > thead > tr > td.text-right > div,
+.bs-grid > .table-wrap > table > thead > tr > th.text-right > div,
+.bs-grid > .table-wrap > table tbody > tr > td.text-right > div,
+.bs-grid > .table-wrap > table tbody > tr > th.text-right > div {
+  justify-content: end;
+}
+.bs-grid > .table-wrap > table > thead > tr > td.text-left > div,
+.bs-grid > .table-wrap > table > thead > tr > th.text-left > div,
+.bs-grid > .table-wrap > table tbody > tr > td.text-left > div,
+.bs-grid > .table-wrap > table tbody > tr > th.text-left > div {
+  justify-content: start;
 }
 .bs-grid > .table-wrap > table > thead > tr > td.editing > div,
 .bs-grid > .table-wrap > table tbody > tr > td.editing > div {
   overflow: visible;
 }
 .bs-grid > .table-wrap > table > thead > tr.header-row > .func-cell {
-  min-width: 32px;
-  line-height: 1;
+  min-width: var(--bs-grid-func-cell-min-width);
 }
 .bs-grid > .table-wrap > table > thead > tr.header-row > .func-cell > div {
-  border-right: 1px solid var(--gray-200);
+  border-right: 1px solid var(--bs-grid-header-border-color);
 }
 .bs-grid > .table-wrap > table > thead > tr.header-row > .func-cell:last-child > div {
   border-right: 0 none;
 }
 .bs-grid > .table-wrap > table > thead > tr.header-row > .func-cell.checkbox {
-  color: var(--color-text-light);
+  color: var(--bs-grid-checkbox-color);
 }
 .bs-grid > .table-wrap > table > thead > tr.header-row > .func-cell.checkbox.checked {
-  color: var(--color-text);
+  color: var(--bs-grid-checkbox-checked-color);
 }
 .bs-grid > .table-wrap > table > thead > tr.header-row > .func-cell.serial-no {
-  min-width: 40px;
+  min-width: var(--bs-grid-serial-cell-min-width);
 }
 .bs-grid > .table-wrap > table > thead > tr.header-row > .func-cell.edit-icon {
-  min-width: 33px;
+  min-width: var(--bs-grid-edit-cell-min-width);
 }
 .bs-grid > .table-wrap > table > thead > tr.header-row:has(.has-filter) th > div {
   height: 50px;
@@ -632,21 +702,23 @@
   z-index: 1;
   white-space: nowrap;
   vertical-align: middle;
-  background-color: var(--gray-100);
+  background-color: var(--bs-grid-header-bg);
+  color: var(--bs-grid-header-text);
+  font-weight: var(--bs-grid-header-weight);
 }
 .bs-grid > .table-wrap > table > thead > tr.header-row > th:has(.bs-select,
 .bs-multi-select,
 .bs-tree-select,
 .bs-tree-multi-select):not(:has(.empty)) {
-  background-color: var(--primary-100);
+  background-color: var(--bs-grid-header-filter-bg);
 }
 .bs-grid > .table-wrap > table > thead > tr.header-row > th:last-child > div {
   border-right-color: transparent;
 }
 .bs-grid > .table-wrap > table > thead > tr.header-row > th > div {
-  border-right: 1px solid var(--gray-200);
-  border-bottom: 1px solid var(--gray-200);
-  min-height: 36.5px;
+  border-right: 1px solid var(--bs-grid-header-border-color);
+  border-bottom: 1px solid var(--bs-grid-header-border-color);
+  min-height: var(--bs-grid-header-min-height);
   text-align: left;
   display: flex;
   flex-direction: column;
@@ -688,55 +760,52 @@
   position: relative;
 }
 .bs-grid > .table-wrap > table > tbody > tr.data-row > td > div {
-  border-right: 1px solid transparent;
+  border-right: 1px solid var(--bs-grid-cell-border-color);
 }
 .bs-grid > .table-wrap > table > tbody > tr.data-row:nth-child(odd) > td {
-  background-color: var(--grid-row-odd-color);
+  background-color: var(--bs-grid-row-odd-bg);
 }
 .bs-grid > .table-wrap > table > tbody > tr.data-row:nth-child(odd) > td > div {
-  border-color: var(--grid-row-odd-color);
+  border-color: var(--bs-grid-row-odd-bg);
 }
 .bs-grid > .table-wrap > table > tbody > tr.data-row:nth-child(even) > td {
-  background-color: var(--grid-row-even-color);
+  background-color: var(--bs-grid-row-even-bg);
 }
 .bs-grid > .table-wrap > table > tbody > tr.data-row:nth-child(even) > td > div {
-  border-color: var(--grid-row-even-color);
-}
-.bs-grid > .table-wrap > table > tbody > tr > td.func-cell {
-  line-height: 1;
+  border-color: var(--bs-grid-row-even-bg);
 }
 .bs-grid > .table-wrap > table > tbody > tr > td.func-cell.serial-no {
   text-align: right;
 }
 .bs-grid > .table-wrap > table > tbody > tr > td.func-cell.checkbox {
-  color: var(--color-text-light);
+  color: var(--bs-grid-checkbox-color);
 }
 .bs-grid > .table-wrap > table > tbody > tr > td.func-cell.checkbox.checked {
-  color: var(--color-text);
+  color: var(--bs-grid-checkbox-checked-color);
 }
 .bs-grid > .table-wrap > table > tbody > tr.data-row:hover > td {
-  background-color: var(--gray-200);
+  background-color: var(--bs-grid-row-hover-bg);
 }
 .bs-grid > .table-wrap > table > tbody > tr.data-row:hover > td > div {
-  border-right-color: var(--gray-200);
+  border-right-color: var(--bs-grid-row-hover-bg);
 }
 .bs-grid > .table-wrap > table > tbody > tr.data-row:hover > td:first-child > div {
-  border-right-color: var(--gray-200);
+  border-right-color: var(--bs-grid-row-hover-bg);
 }
 .bs-grid > .table-wrap > table > tbody > tr.data-row:hover > td:last-child > div {
-  border-right-color: var(--gray-200);
+  border-right-color: var(--bs-grid-row-hover-bg);
 }
 .bs-grid > .table-wrap > table > tbody > tr.data-row.selected > td {
-  background-color: var(--primary-200);
+  background-color: var(--bs-grid-row-selected-bg);
 }
 .bs-grid > .table-wrap > table > tbody > tr.data-row.selected > td > div {
-  border-right-color: var(--primary-200);
+  border-right-color: var(--bs-grid-row-selected-bg);
 }
 .bs-grid > .table-wrap > table > tbody > tr.data-row.selected:hover td:first-child > div {
-  border-right-color: var(--primary-200) !important;
+  border-right-color: var(--bs-grid-row-selected-bg) !important;
 }
 .bs-grid > .table-wrap > table > tbody > tr.data-row.selected:hover td:last-child > div {
-  border-right-color: var(--primary-200) !important;
+  border-right-color: var(--bs-grid-row-selected-bg) !important;
 }
 .bs-grid.h-scrolled .header-row .fixed:after,
 .bs-grid.h-scrolled .data-row .fixed:after {
@@ -747,21 +816,16 @@
   width: 8px;
   height: 100%;
   content: "";
-  background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
+  background: var(--bs-grid-scroll-shadow);
 }
 .bs-grid.v-scrolled .header-row > th > div {
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
-}
-[data-theme=dark] .bs-grid.h-scrolled .header-row .fixed:after,
-[data-theme=dark] .bs-grid.h-scrolled .data-row .fixed:after {
-  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
+  box-shadow: var(--bs-grid-header-scroll-shadow);
 }
 [data-theme=dark] .bs-grid > .table-wrap > table > thead > tr.header-row > th:has(.bs-select,
 .bs-multi-select,
 .bs-tree-select,
 .bs-tree-multi-select):not(:has(.empty)) {
-  background-color: var(--primary-400);
-  color: var(--dark);
+  color: var(--bs-gray-700);
 }
 [data-theme=dark] .bs-grid > .table-wrap > table > thead > tr.header-row > th:has(.bs-select,
 .bs-multi-select,
@@ -779,111 +843,121 @@
 .bs-multi-select,
 .bs-tree-select,
 .bs-tree-multi-select):not(:has(.empty)) .bs-tree-multi-select {
-  color: var(--dark);
+  color: var(--bs-gray-700);
 }
 .bs-grid.with-border > .table-wrap > table > tbody > tr {
-  border-bottom: 1px solid var(--gray-200);
+  border-bottom: 1px solid var(--bs-grid-border-color);
 }
 .bs-grid.with-border > .table-wrap > table > tbody > tr.data-row:nth-child(even):not(:hover) > td {
-  background-color: var(--grid-row-odd-color);
+  background-color: var(--bs-grid-row-odd-bg);
 }
 .bs-grid.with-border > .table-wrap > table > tbody > tr.data-row:nth-child(even):not(:hover) > td > div {
-  border-color: var(--grid-row-odd-color);
+  border-color: var(--bs-grid-row-odd-bg);
 }
 .bs-grid > .table-wrap > table > tbody > tr.data-row:hover > .bs-grid-merged-cell {
-  background-color: var(--grid-row-odd-color);
+  background-color: var(--bs-grid-row-odd-bg);
 }.bs-grid-control {
   display: flex;
   align-items: center;
-  color: var(--gray);
+  color: var(--bs-grid-control-text);
 }
 .bs-grid-control > div {
-  padding-right: 8px;
+  padding-right: var(--bs-grid-control-gap);
 }
 .bs-grid-control .bs-select.page-length {
   min-width: auto;
+  background-color: transparent;
 }
 .bs-grid-control .bs-select.page-length .selected {
   height: 18px;
   border: 0;
   padding: 0;
   border-radius: 0;
-}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
+  background-color: transparent;
+}
 .bs-text-filter {
+  position: relative;
+  display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
   width: 300px;
   min-width: 100px;
-  display: inline-flex;
-  position: relative;
 }
 .bs-text-filter .input-wrap {
-  border-radius: var(--radius-sm, .25rem);
-  border: 1px solid var(--border);
-  align-items: flex-start;
   width: 100%;
+  align-items: flex-start;
   display: flex;
+  border: 1px solid var(--bs-text-filter-border);
+  border-radius: var(--bs-text-filter-border-radius);
+  background-color: var(--bs-text-filter-bg);
 }
 .bs-text-filter .textarea-wrap {
-  border-radius: var(--radius-sm, .25rem);
-  border: 1px solid var(--border);
-  align-items: flex-start;
   width: 100%;
-  height: 72px;
+  align-items: flex-start;
   display: flex;
-}
-.bs-text-filter .filter-mode-btn {
-  min-width: 1.2em;
-  padding: 2px;
+  border: 1px solid var(--bs-text-filter-border);
+  border-radius: var(--bs-text-filter-border-radius);
+  background-color: var(--bs-text-filter-bg);
+  height: 72px;
 }
 .bs-text-filter .textarea-wrap textarea {
   resize: none;
 }
 .bs-text-filter .filter-caption {
-  margin-top: calc(var(--spacing, .25rem) * 2);
-  color: var(--gray-400);
-  font-size: .923em;
+  margin-top: 0.5rem;
+  font-size: 0.923em;
+  color: var(--bs-gray-400);
 }
 .bs-text-filter .filter-caption > span {
-  margin-right: calc(var(--spacing, .25rem) * 1);
+  margin-right: 0.25rem;
 }
-.bs-text-filter .filter-caption > span:not(:last-child):after {
+.bs-text-filter .filter-caption > span:not(:last-child)::after {
   content: ",";
 }
-.bs-text-filter .input-wrap input, .bs-text-filter .textarea-wrap textarea {
+.bs-text-filter .input-wrap input,
+.bs-text-filter .textarea-wrap textarea {
   flex-grow: 1;
-  height: 100%;
   padding: 4px;
+  height: 100%;
 }
-.bs-text-filter.modified .input-wrap, .bs-text-filter.modified .textarea-wrap {
+.bs-text-filter.modified .input-wrap,
+.bs-text-filter.modified .textarea-wrap {
   border-color: var(--primary) !important;
 }
-.bs-text-filter.modified .input-wrap input, .bs-text-filter.modified .input-wrap textarea, .bs-text-filter.modified .textarea-wrap input, .bs-text-filter.modified .textarea-wrap textarea {
+.bs-text-filter.modified .input-wrap input,
+.bs-text-filter.modified .input-wrap textarea,
+.bs-text-filter.modified .textarea-wrap input,
+.bs-text-filter.modified .textarea-wrap textarea {
   color: var(--primary) !important;
 }
-.bs-text-filter.error .input-wrap, .bs-text-filter.error .textarea-wrap {
-  border-color: var(--danger) !important;
+.bs-text-filter.error .input-wrap,
+.bs-text-filter.error .textarea-wrap {
+  border-color: var(--bs-color-error) !important;
 }
-.bs-text-filter.error .input-wrap input, .bs-text-filter.error .input-wrap textarea, .bs-text-filter.error .textarea-wrap input, .bs-text-filter.error .textarea-wrap textarea {
-  color: var(--danger) !important;
+.bs-text-filter.error .input-wrap input,
+.bs-text-filter.error .input-wrap textarea,
+.bs-text-filter.error .textarea-wrap input,
+.bs-text-filter.error .textarea-wrap textarea {
+  color: var(--bs-color-error) !important;
 }
-/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
+
 .bs-date-range-filter .input-area {
-  border-radius: var(--radius-sm, .25rem);
   width: 100%;
-  padding-right: calc(var(--spacing, .25rem) * 2);
-  border: 1px solid var(--border);
-  align-items: center;
   display: flex;
+  align-items: center;
+  padding-right: 0.5rem;
+  border: 1px solid var(--bs-date-range-filter-border);
+  border-radius: var(--bs-date-range-filter-border-radius);
+  background-color: var(--bs-date-range-filter-bg);
 }
-.bs-date-range-filter .input-area .font-icon {
-  margin-inline: calc(var(--spacing, .25rem) * 1.5);
-  font-size: var(--text-sm, .875rem);
-  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));
+.bs-date-range-filter .input-area .bs-icon {
+  margin: 0 0.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 .bs-date-range-filter .input-area input {
-  padding-right: calc(var(--spacing, .25rem) * 0);
   border-radius: 0;
+  padding-right: 0;
   width: 9em;
 }
 .date-filters .bs-clickable {
@@ -901,6 +975,6 @@
 }.bs-grid-lookup {
   display: flex;
   gap: 16px;
-  background-color: var(--body-bg);
+  background-color: var(--bs-grid-lookup-bg);
   line-height: 1;
 }