@ouestfrance/sipa-bms-ui 8.37.1 → 8.38.0

package/dist/sipa-bms-ui.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");.bms-button {
+@charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");.bms-button {
   font-size: 1em;
   --button-padding: 0.5em;
   box-sizing: border-box;
@@ -358,8 +358,9 @@
   --bms-button-disabled-background-color: transparent;
   --bms-button-disabled-border-color: transparent;
   --bms-button-disabled-text-color: var(--bms-disabled-color);
-}.toggle-icon[data-v-454a2f72] {
-  --icon-color: var(--bms-grey-100);
+}.toggle-icon[data-v-a7ed1829] {
+  /* Default icon: align with field labels (--bms-font-color) */
+  --icon-color: var(--bms-font-color);
   --underline-color: transparent;
   background: none;
   border: none;
@@ -373,14 +374,14 @@
   height: 34px;
   padding: 7px 0;
 }
-.toggle-icon[data-v-454a2f72] svg {
+.toggle-icon[data-v-a7ed1829] svg {
   color: var(--icon-color);
   transition: color 0.2s;
   width: 20px;
   height: 20px;
   display: block;
 }
-.toggle-icon[data-v-454a2f72]::after {
+.toggle-icon[data-v-a7ed1829]::after {
   content: "";
   position: absolute;
   bottom: 3px;
@@ -391,36 +392,36 @@
   background-color: var(--underline-color);
   transition: background-color 0.2s;
 }
-.toggle-icon[data-v-454a2f72]:hover:not(.disabled), .toggle-icon._hover[data-v-454a2f72]:not(.disabled) {
+.toggle-icon[data-v-a7ed1829]:hover:not(.disabled), .toggle-icon._hover[data-v-a7ed1829]:not(.disabled) {
   --icon-color: light-dark(var(--bms-grey-140), var(--bms-grey-25));
   --underline-color: light-dark(var(--bms-grey-140), var(--bms-grey-25));
 }
-.toggle-icon.active[data-v-454a2f72] {
+.toggle-icon.active[data-v-a7ed1829] {
   --icon-color: var(--bms-main-100);
   --underline-color: var(--bms-main-100);
 }
-.toggle-icon.active[data-v-454a2f72]:hover:not(.disabled), .toggle-icon.active._hover[data-v-454a2f72]:not(.disabled) {
+.toggle-icon.active[data-v-a7ed1829]:hover:not(.disabled), .toggle-icon.active._hover[data-v-a7ed1829]:not(.disabled) {
   --icon-color: light-dark(var(--bms-main-140), var(--bms-main-75));
   --underline-color: light-dark(var(--bms-main-140), var(--bms-main-75));
 }
-.toggle-icon.disabled[data-v-454a2f72] {
-  --icon-color: var(--bms-grey-50);
+.toggle-icon.disabled[data-v-a7ed1829] {
+  --icon-color: light-dark(var(--bms-grey-50), var(--bms-grey-75));
   cursor: default;
   pointer-events: none;
 }
-.toggle-icon.disabled.active[data-v-454a2f72] {
-  --underline-color: var(--bms-grey-50);
+.toggle-icon.disabled.active[data-v-a7ed1829] {
+  --underline-color: light-dark(var(--bms-grey-50), var(--bms-grey-75));
 }
-.toggle-icon.small[data-v-454a2f72] {
+.toggle-icon.small[data-v-a7ed1829] {
   width: 24px;
   height: 24px;
   padding: 0.25em 0;
 }
-.toggle-icon.small[data-v-454a2f72] svg {
+.toggle-icon.small[data-v-a7ed1829] svg {
   width: 1em;
   height: 1em;
 }
-.toggle-icon.small[data-v-454a2f72]::after {
+.toggle-icon.small[data-v-a7ed1829]::after {
   height: 1.5px;
   bottom: -2px;
   left: 50%;
@@ -1276,44 +1277,46 @@ input[type=radio][data-v-c0c9efa3]:checked::before {
 .switch-wrapper.disabled[data-v-6de1a5c6] {
   --switch-background-color: var(--bms-grey-25);
   --switch-color: var(--bms-grey-50);
-}.input-toggle[data-v-ff0d1a1d] {
-  --label-color: var(--bms-grey-100);
+}
+.input-toggle[data-v-d84b1655] {
+  /* Align with FieldComponent label (--field-label-color → --bms-font-color) */
+  --label-color: var(--bms-font-color);
   --cursor: pointer;
   font-weight: var(--field-label-font-weight);
   display: flex;
   align-items: center;
   gap: 0.5em;
 }
-.input-toggle__label-group[data-v-ff0d1a1d] {
+.input-toggle__label-group[data-v-d84b1655] {
   display: flex;
   align-items: center;
 }
-.input-toggle.overflow[data-v-ff0d1a1d] {
+.input-toggle.overflow[data-v-d84b1655] {
   width: 100%;
 }
-.input-toggle.overflow .input-toggle__label-group[data-v-ff0d1a1d] {
+.input-toggle.overflow .input-toggle__label-group[data-v-d84b1655] {
   flex: 1;
   min-width: 0;
 }
-.input-toggle.overflow .input-switch-info[data-v-ff0d1a1d] {
+.input-toggle.overflow .input-switch-info[data-v-d84b1655] {
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
   word-break: break-all;
   text-overflow: ellipsis;
 }
-.input-toggle .input-switch-info[data-v-ff0d1a1d] {
+.input-toggle .input-switch-info[data-v-d84b1655] {
   color: var(--label-color);
   transition: 0.2s;
 }
-.input-toggle.isOn[data-v-ff0d1a1d] {
+.input-toggle.isOn[data-v-d84b1655] {
   --label-color: var(--bms-main-100);
 }
-.input-toggle.disabled[data-v-ff0d1a1d] {
-  --label-color: var(--bms-grey-50);
+.input-toggle.disabled[data-v-d84b1655] {
+  --label-color: light-dark(var(--bms-grey-50), var(--bms-grey-75));
   --cursor: default;
 }
-.input-toggle[data-v-ff0d1a1d]:hover {
+.input-toggle[data-v-d84b1655]:hover {
   cursor: var(--cursor);
 }.tag[data-v-e5e0c8c0] {
   --tag-border-color: var(--bms-main-100);
@@ -1665,11 +1668,8 @@ input[type=radio][data-v-c0c9efa3]:checked::before {
 }
 .page[data-v-31057778] .header .actions .add-button {
   text-align: end;
-}.card[data-v-4a124ead] {
-  --summary-card-background-color: light-dark(
-    rgba(255, 255, 255, 0.5),
-    rgba(0, 0, 0, 0.5)
-  );
+}.card[data-v-64676bba] {
+  --summary-card-background-color: var(--bms-card-default-glass-background);
   --summary-card-color: var(--bms-font-color);
   --card-margin: 2px;
   border: 1px solid var(--bms-border-color);
@@ -1677,31 +1677,31 @@ input[type=radio][data-v-c0c9efa3]:checked::before {
   position: relative;
   overflow: hidden;
 }
-.card.card--information[data-v-4a124ead] {
+.card.card--information[data-v-64676bba] {
   --summary-card-color: var(--bms-white);
   --summary-card-background-color: var(--bms-main-100);
 }
-.card.card--success[data-v-4a124ead] {
+.card.card--success[data-v-64676bba] {
   --summary-card-color: var(--bms-white);
   --summary-card-background-color: var(--bms-success-color);
 }
-.card.card--warning[data-v-4a124ead] {
+.card.card--warning[data-v-64676bba] {
   --summary-card-color: var(--bms-white);
   --summary-card-background-color: var(--bms-warning-color);
 }
-.card.card--danger[data-v-4a124ead] {
+.card.card--danger[data-v-64676bba] {
   --summary-card-color: var(--bms-white);
   --summary-card-background-color: var(--bms-danger-color);
 }
-.card[data-v-4a124ead] {
+.card[data-v-64676bba] {
   --card-content-border-radius: var(--bms-border-radius-large);
 }
-.card .hasAction[data-v-4a124ead] {
+.card .hasAction[data-v-64676bba] {
   --card-content-border-radius: var(--bms-border-radius-large)
     var(--bms-border-radius-large) 0 0;
   cursor: pointer;
 }
-.card__body[data-v-4a124ead] {
+.card__body[data-v-64676bba] {
   position: relative;
   min-height: 50px;
   min-width: 50px;
@@ -1712,18 +1712,18 @@ input[type=radio][data-v-c0c9efa3]:checked::before {
   justify-content: space-between;
   flex-direction: column;
 }
-.card__body__content[data-v-4a124ead] {
+.card__body__content[data-v-64676bba] {
   height: 100%;
   border-radius: var(--card-content-border-radius);
   background-color: var(--summary-card-background-color);
   backdrop-filter: blur(40px);
   color: var(--summary-card-color);
 }
-.card__body__content__link[data-v-4a124ead] {
+.card__body__content__link[data-v-64676bba] {
   color: var(--summary-card-color);
   text-decoration: none;
 }
-.card__body__action[data-v-4a124ead] {
+.card__body__action[data-v-64676bba] {
   border-top: 1px solid var(--bms-border-color);
   border-radius: 0 0 var(--bms-border-radius-large) var(--bms-border-radius-large);
   background-color: var(--bms-white);
@@ -1731,7 +1731,7 @@ input[type=radio][data-v-c0c9efa3]:checked::before {
   padding: 0.5em;
   cursor: pointer;
 }
-.card .blob[data-v-4a124ead] {
+.card .blob[data-v-64676bba] {
   transform: translate(10px, 10px);
   width: 60%;
   height: 60%;
@@ -2651,13 +2651,13 @@ nav .additional[data-v-8b4752b4] {
 .bms-table__row__cell--child-element__icon[data-v-c01ccc48] {
   display: flex;
   margin-right: 1em;
-}.bms-table[data-v-e3356948] {
+}.bms-table[data-v-2b029949] {
   --table-cell-padding: 1em;
   --table-cell-radius: var(--bms-border-radius-large);
   --dynamic-border-height: 2px;
   --table-border: 1px solid var(--bms-border-color);
 }
-.bms-table__loader[data-v-e3356948] {
+.bms-table__loader[data-v-2b029949] {
   position: absolute;
   background: color-mix(in srgb, var(--bms-white) 72%, transparent);
   inset: 0;
@@ -2667,119 +2667,126 @@ nav .additional[data-v-8b4752b4] {
   font-size: 3em;
   z-index: 10;
 }
-.bms-table__actions[data-v-e3356948] {
+.bms-table__actions[data-v-2b029949] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 1em;
 }
-.bms-table__actions--small[data-v-e3356948] {
+.bms-table__actions--small[data-v-2b029949] {
   margin-bottom: 0.5em;
 }
-.bms-table__actions__saved-filters[data-v-e3356948] {
+.bms-table__actions__saved-filters[data-v-2b029949] {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 1em;
 }
-.bms-table__actions__search[data-v-e3356948] {
+.bms-table__actions__search[data-v-2b029949] {
   display: flex;
   align-items: center;
   gap: 1em;
 }
-.bms-table__actions__custom[data-v-e3356948] {
+.bms-table__actions__custom[data-v-2b029949] {
   display: flex;
   gap: 1em;
 }
-.bms-table__actions__custom[data-v-e3356948]:empty {
+.bms-table__actions__custom[data-v-2b029949]:empty {
   display: none;
 }
-.bms-table__selected[data-v-e3356948] {
+.bms-table__selected[data-v-2b029949] {
   margin-bottom: 1em;
 }
-.bms-table__selected .select-mode-all[data-v-e3356948] {
+.bms-table__selected .select-mode-all[data-v-2b029949] {
   cursor: pointer;
   color: var(--bms-main-100);
 }
-.bms-table__cell__checkbox[data-v-e3356948] {
+.bms-table__cell__checkbox[data-v-2b029949] {
   width: 4em;
 }
-.bms-table__cell--action[data-v-e3356948] {
+.bms-table__cell--action[data-v-2b029949] {
   display: flex;
   justify-content: end;
 }
-.bms-table__cell--empty[data-v-e3356948] {
+.bms-table__cell--empty[data-v-2b029949] {
   height: 360px;
 }
-.bms-table__table[data-v-e3356948] {
+.bms-table__table[data-v-2b029949] {
   width: 100%;
   border-spacing: 0 var(--dynamic-border-height);
   border-radius: var(--bms-border-radius-large);
   border: var(--table-border);
   position: relative;
 }
-.bms-table__table-wrapper[data-v-e3356948] {
+.bms-table__table-wrapper[data-v-2b029949] {
   position: relative;
 }
-.bms-table__table thead[data-v-e3356948] {
+.bms-table__table thead[data-v-2b029949] {
   position: sticky;
   z-index: 2;
   top: var(--header-height, 0);
 }
-.bms-table__table--dense[data-v-e3356948] {
+.bms-table__table--dense[data-v-2b029949] {
   --table-cell-padding: 0.5em 1em;
 }
-.bms-table__table[data-v-e3356948] tr td {
+.bms-table__table[data-v-2b029949] tr td {
   padding: var(--table-cell-padding);
 }
-.bms-table__table th[data-v-e3356948] {
+.bms-table__table th[data-v-2b029949] {
   --header-content-sort-icon-color: var(--bms-grey-25);
   --header-content-justify: start;
   width: var(--table-cell-width, auto);
   padding: var(--table-cell-padding);
 }
-.bms-table__table th.sortable[data-v-e3356948]:hover {
-  --header-content-sort-icon-color: var(--bms-grey-100);
+.bms-table__table th.sortable[data-v-2b029949]:hover {
+  --header-content-sort-icon-color: light-dark(
+    var(--bms-grey-100),
+    var(--bms-font-color)
+  );
   cursor: pointer;
 }
-.bms-table__table th.u-text-align-start[data-v-e3356948] {
+.bms-table__table th.u-text-align-start[data-v-2b029949] {
   --header-content-justify: start;
 }
-.bms-table__table th.u-text-align-center[data-v-e3356948] {
+.bms-table__table th.u-text-align-center[data-v-2b029949] {
   --header-content-justify: center;
 }
-.bms-table__table th.u-text-align-end[data-v-e3356948] {
+.bms-table__table th.u-text-align-end[data-v-2b029949] {
   --header-content-justify: end;
 }
-.bms-table__table th.sorted[data-v-e3356948] {
-  --header-content-sort-icon-color: var(--bms-grey-100);
+.bms-table__table th.sorted[data-v-2b029949] {
+  --header-content-sort-icon-color: light-dark(
+    var(--bms-grey-100),
+    var(--bms-font-color)
+  );
 }
-.bms-table__table th .header-content[data-v-e3356948] {
+.bms-table__table th .header-content[data-v-2b029949] {
   display: flex;
   align-items: center;
   justify-content: var(--header-content-justify);
   gap: 0.5em;
 }
-.bms-table__table th .header-content-sort[data-v-e3356948] {
+.bms-table__table th .header-content-sort[data-v-2b029949] {
+  flex-shrink: 0;
   color: var(--header-content-sort-icon-color);
 }
-.bms-table__table th .header-content-helper[data-v-e3356948] {
+.bms-table__table th .header-content-helper[data-v-2b029949] {
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  color: var(--bms-grey-100);
+  color: light-dark(var(--bms-grey-100), var(--bms-font-color));
 }
-.bms-table__footer[data-v-e3356948] {
+.bms-table__footer[data-v-2b029949] {
   padding-top: 16px;
 }
-.bms-table .blob[data-v-e3356948] {
+.bms-table .blob[data-v-2b029949] {
   visibility: hidden;
   --table-blob-height: 80px;
 }
-.bms-table .blob.small[data-v-e3356948], .bms-table .blob.dense[data-v-e3356948] {
+.bms-table .blob.small[data-v-2b029949], .bms-table .blob.dense[data-v-2b029949] {
   --table-blob-height: 50px;
 }
-.bms-table .blob[data-v-e3356948] {
+.bms-table .blob[data-v-2b029949] {
   width: 200px;
   height: var(--table-blob-height);
   background-color: var(--bms-main-50);
@@ -2788,29 +2795,29 @@ nav .additional[data-v-8b4752b4] {
   z-index: -5;
   filter: blur(20px);
 }
-[data-v-e3356948] table {
+[data-v-2b029949] table {
   padding: 0 var(--dynamic-border-height);
 }
-[data-v-e3356948] table th:first-child {
+[data-v-2b029949] table th:first-child {
   border-top-left-radius: var(--table-cell-radius);
 }
-[data-v-e3356948] table th:last-child {
+[data-v-2b029949] table th:last-child {
   border-top-right-radius: var(--table-cell-radius);
 }
-[data-v-e3356948] table tr:last-child td:first-child {
+[data-v-2b029949] table tr:last-child td:first-child {
   border-bottom-left-radius: var(--table-cell-radius);
 }
-[data-v-e3356948] table tr:last-child td:last-child {
+[data-v-2b029949] table tr:last-child td:last-child {
   border-bottom-right-radius: var(--table-cell-radius);
 }
-[data-v-e3356948] table th {
+[data-v-2b029949] table th {
   background-color: var(--bms-white);
 }
-[data-v-e3356948] table tbody {
+[data-v-2b029949] table tbody {
   overflow: hidden;
   background: var(--bms-white);
 }
-[data-v-e3356948] table tbody tr {
+[data-v-2b029949] table tbody tr {
   position: relative;
 }.filter-button-container[data-v-36a9eb9a] {
   position: relative;
@@ -3223,6 +3230,11 @@ section {
   --bms-red-10: #f9eaeb;
   --bms-white: light-dark(#fcfcfc, #222831);
   --bms-background-color: light-dark(#f8fafd, #151d28);
+  /* Dark: 50% overlay on --bms-background-color matches --bms-white (e.g. BmsTable cells) */
+  --bms-card-default-glass-background: light-dark(
+    rgba(255, 255, 255, 0.5),
+    rgba(47, 51, 58, 0.5)
+  );
   --bms-border-color: light-dark(var(--bms-grey-10), var(--bms-grey-100));
   --bms-border-radius: 4px;
   --bms-border-radius-large: 8px;

package/dist/sipa-bms-ui.es.js

@@ -584,7 +584,7 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const BmsToggleIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1r, [["__scopeId", "data-v-454a2f72"]]);
+const BmsToggleIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1r, [["__scopeId", "data-v-a7ed1829"]]);
 
 /**
  * @license lucide-vue-next v1.0.0 - ISC
@@ -70869,7 +70869,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BmsInputToggle = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-ff0d1a1d"]]);
+const BmsInputToggle = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-d84b1655"]]);
 
 const _hoisted_1$K = {
   key: 0,
@@ -89249,7 +89249,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BmsCard = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-4a124ead"]]);
+const BmsCard = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-64676bba"]]);
 
 const _hoisted_1$C = { class: "floating-window__header__title" };
 const _hoisted_2$o = { class: "floating-window__header__buttons" };
@@ -98669,7 +98669,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UiBmsTable = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-e3356948"]]);
+const UiBmsTable = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-2b029949"]]);
 
 const _hoisted_1$a = { class: "filter-button-container" };
 const _hoisted_2$8 = {

package/dist/sipa-bms-ui.umd.js

@@ -587,7 +587,7 @@
     return target;
   };
 
-  const BmsToggleIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1r, [["__scopeId", "data-v-454a2f72"]]);
+  const BmsToggleIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1r, [["__scopeId", "data-v-a7ed1829"]]);
 
   /**
    * @license lucide-vue-next v1.0.0 - ISC
@@ -70872,7 +70872,7 @@
     }
   });
 
-  const BmsInputToggle = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-ff0d1a1d"]]);
+  const BmsInputToggle = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-d84b1655"]]);
 
   const _hoisted_1$K = {
     key: 0,
@@ -89252,7 +89252,7 @@
     }
   });
 
-  const BmsCard = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-4a124ead"]]);
+  const BmsCard = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-64676bba"]]);
 
   const _hoisted_1$C = { class: "floating-window__header__title" };
   const _hoisted_2$o = { class: "floating-window__header__buttons" };
@@ -98672,7 +98672,7 @@
     }
   });
 
-  const UiBmsTable = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-e3356948"]]);
+  const UiBmsTable = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-2b029949"]]);
 
   const _hoisted_1$a = { class: "filter-button-container" };
   const _hoisted_2$8 = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.37.1",
+  "version": "8.38.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {

package/src/assets/scss/global-variables.scss

@@ -42,6 +42,11 @@
 
     --bms-white: light-dark(#fcfcfc, #222831);
     --bms-background-color: light-dark(#f8fafd, #151d28);
+    /* Dark: 50% overlay on --bms-background-color matches --bms-white (e.g. BmsTable cells) */
+    --bms-card-default-glass-background: light-dark(
+      rgba(255, 255, 255, 0.5),
+      rgba(47, 51, 58, 0.5)
+    );
     --bms-border-color: light-dark(var(--bms-grey-10), var(--bms-grey-100));
     --bms-border-radius: 4px;
     --bms-border-radius-large: 8px;

package/src/components/button/BmsToggleIcon.vue

@@ -38,7 +38,8 @@ const handleClick = (event: MouseEvent) => {
 
 <style lang="scss" scoped>
 .toggle-icon {
-  --icon-color: var(--bms-grey-100);
+  /* Default icon: align with field labels (--bms-font-color) */
+  --icon-color: var(--bms-font-color);
   --underline-color: transparent;
 
   background: none;
@@ -92,13 +93,13 @@ const handleClick = (event: MouseEvent) => {
   }
 
   &.disabled {
-    --icon-color: var(--bms-grey-50);
+    --icon-color: light-dark(var(--bms-grey-50), var(--bms-grey-75));
     cursor: default;
     pointer-events: none;
   }
 
   &.disabled.active {
-    --underline-color: var(--bms-grey-50);
+    --underline-color: light-dark(var(--bms-grey-50), var(--bms-grey-75));
   }
 
   &.small {

package/src/components/form/BmsInputToggle.vue

@@ -48,7 +48,8 @@ defineEmits<{
 
 <style lang="scss" scoped>
 .input-toggle {
-  --label-color: var(--bms-grey-100);
+  /* Align with FieldComponent label (--field-label-color → --bms-font-color) */
+  --label-color: var(--bms-font-color);
   --cursor: pointer;
 
   font-weight: var(--field-label-font-weight);
@@ -86,7 +87,7 @@ defineEmits<{
   }
 
   &.disabled {
-    --label-color: var(--bms-grey-50);
+    --label-color: light-dark(var(--bms-grey-50), var(--bms-grey-75));
     --cursor: default;
   }
 

package/src/components/layout/BmsCard.vue

@@ -58,10 +58,7 @@ window.addEventListener('mousemove', onMouseMove);
 
 <style lang="scss" scoped>
 .card {
-  --summary-card-background-color: light-dark(
-    rgba(255, 255, 255, 0.5),
-    rgba(0, 0, 0, 0.5)
-  );
+  --summary-card-background-color: var(--bms-card-default-glass-background);
   --summary-card-color: var(--bms-font-color);
   --card-margin: 2px;
   border: 1px solid var(--bms-border-color);

package/src/components/table/UiBmsTable.vue

@@ -512,7 +512,10 @@ onMounted(() => {
       padding: var(--table-cell-padding);
 
       &.sortable:hover {
-        --header-content-sort-icon-color: var(--bms-grey-100);
+        --header-content-sort-icon-color: light-dark(
+          var(--bms-grey-100),
+          var(--bms-font-color)
+        );
         cursor: pointer;
       }
 
@@ -529,7 +532,10 @@ onMounted(() => {
       }
 
       &.sorted {
-        --header-content-sort-icon-color: var(--bms-grey-100);
+        --header-content-sort-icon-color: light-dark(
+          var(--bms-grey-100),
+          var(--bms-font-color)
+        );
       }
 
       .header-content {
@@ -539,6 +545,7 @@ onMounted(() => {
         gap: 0.5em;
 
         &-sort {
+          flex-shrink: 0;
           color: var(--header-content-sort-icon-color);
         }
 
@@ -546,7 +553,7 @@ onMounted(() => {
           display: flex;
           align-items: center;
           flex-shrink: 0;
-          color: var(--bms-grey-100);
+          color: light-dark(var(--bms-grey-100), var(--bms-font-color));
         }
       }
     }