[BootstrapAdminUi] Backport generic admin CSS fixes from Sylius

src/BootstrapAdminUi/assets/styles/_body.scss

@@ -10,6 +10,7 @@
 * {
     --tblr-breadcrumb-item-active-color: var(--tblr-gray-500);
     --tblr-breadcrumb-divider-color: var(--tblr-gray-300);
+    --tblr-breadcrumb-link-color: var(--tblr-body-color);
     --tblr-blue-rgb: 17, 81, 141;
     --tblr-green-rgb: 0, 97, 16;
     --tblr-pagination-border-width: 0;
@@ -18,7 +19,6 @@
 @include color-mode(light) {
     --tblr-body-color: #212529;
     --tblr-code-color: #36393B;
-    --tblr-breadcrumb-link-color: #212529;
 
     body {
         --bs-body-bg: #{$body-bg};
@@ -32,16 +32,32 @@
 }
 
 @include color-mode(dark) {
-    --tblr-body-bg: #0F1623;
-    --tblr-bg-surface: #1E2433;
+    --tblr-body-bg: #{$dark-body-bg};
+    --tblr-body-bg-rgb: #{red($dark-body-bg)}, #{green($dark-body-bg)}, #{blue($dark-body-bg)};
+    --tblr-bg-surface: #{$dark-bg-surface};
+    --tblr-bg-surface-tertiary: #{$dark-body-bg};
 
-    .btn {
+    .btn:where(:not([class*="btn-ghost"])) {
         --tblr-btn-border-color: var(--tblr-border-color);
     }
 
-    .form-control,
-    .form-select,
-    .form-check-input {
+    .btn-ghost-dark {
+        --tblr-btn-color: var(--tblr-body-color);
+        --tblr-btn-disabled-color: var(--tblr-body-color);
+    }
+
+    .btn-secondary {
+        --tblr-btn-bg: var(--tblr-bg-surface);
+        --tblr-btn-border-color: var(--tblr-border-color);
+        --tblr-btn-hover-bg: var(--tblr-border-color);
+        --tblr-btn-color: var(--tblr-body-color);
+        --tblr-btn-hover-color: var(--tblr-body-color);
+    }
+
+    .form-control:where(:not(.is-invalid):not(.is-valid):not(:focus)),
+    .form-select:where(:not(.is-invalid):not(.is-valid):not(:focus)),
+    .form-check-input:where(:not(.is-invalid):not(.is-valid):not(:focus)),
+    .input-group-text {
         border-color: var(--tblr-border-color);
     }
 
@@ -54,16 +70,10 @@
     [data-theme-switch="dark"] {
         display: none;
     }
-}
 
-@font-face {
-    font-family: 'Inter';
-    src: url('../fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype-variations');
-    font-weight: 1 999;
-}
-
-body {
-    font-feature-settings: "cv03", "cv04", "cv11";
+    .empty-img img {
+        filter: invert(0.9) hue-rotate(180deg);
+    }
 }
 
 a {
@@ -94,6 +104,10 @@ a.link-reset {
     }
 }
 
+.breadcrumb-item {
+    @include text-truncate-ellipsis(min(300px, 30vw));
+}
+
 .breadcrumb-item a {
     text-decoration: none;
 

src/BootstrapAdminUi/assets/styles/_fonts.scss

@@ -0,0 +1,35 @@
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+:root {
+    font-feature-settings: "cv03", "cv04", "cv11";
+}
+
+@supports (font-variation-settings: normal) {
+    :root {
+        font-family: "InterVariable", "Arial", sans-serif;
+        font-optical-sizing: auto;
+    }
+}
+
+@font-face {
+    font-family: InterVariable;
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url("../fonts/InterVariable.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: InterVariable;
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: optional;
+    src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
+}

src/BootstrapAdminUi/assets/styles/_form.scss

@@ -59,6 +59,12 @@ textarea.form-control {
     min-height: 44px;
 }
 
+input[type="file"].form-control {
+    &::file-selector-button {
+        min-height: 44px;
+    }
+}
+
 .form-control:focus {
     box-shadow: none;
 }

src/BootstrapAdminUi/assets/styles/_modal.scss

@@ -0,0 +1,13 @@
+/*!
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+.modal-backdrop {
+    --tblr-backdrop-bg: #000;
+    --tblr-backdrop-opacity: 0.75;
+}

src/BootstrapAdminUi/assets/styles/_tom-select.scss

@@ -18,13 +18,28 @@
     box-shadow: var(--tblr-box-shadow-input);
 
     input {
-        color: var(--tblr-body-color) !important;
+        color: var(--tblr-body-color);
     }
 }
 
 @include color-mode(dark) {
-    .ts-control .item {
+    .ts-wrapper.multi .ts-control > div:where(:not(.active)) {
         color: var(--tblr-body-color);
+        background: var(--tblr-border-color);
+    }
+
+    .ts-wrapper.multi.disabled .ts-control > div {
+        color: var(--tblr-secondary-color);
+        background: var(--tblr-bg-surface-secondary);
+    }
+
+    .ts-wrapper.plugin-remove_button .item .remove,
+    .ts-wrapper.plugin-remove_button.disabled .item .remove {
+        border-inline-start-color: var(--tblr-bg-surface-secondary);
+    }
+
+    .ts-wrapper.plugin-remove_button:not(.disabled) .item .remove:hover {
+        background: rgba(255, 255, 255, 0.1);
     }
 }
 
@@ -35,7 +50,7 @@
 
 .ts-dropdown, .ts-dropdown.form-control, .ts-dropdown.form-select {
     padding: 5px;
-    background: var(--tblr-bg-surface) !important;
+    background: var(--tblr-bg-surface);
     border: 1px solid var(--tblr-border-color);
     border-radius: 0.175rem;
     box-shadow: 0 2px 5px rgba(var(--tblr-body-color-rgb), 0.075);

src/BootstrapAdminUi/assets/styles/_variables.scss

@@ -71,10 +71,14 @@ $btn-border-color: $input-border-color;
 $pagination-active-color: inherit;
 $pagination-active-bg: $gray-200;
 
-$font-family-sans-serif: 'Inter', serif;
+$font-family-sans-serif: 'InterVariable', 'Arial', sans-serif;
 
 $h1-font-size: 1.6rem;
 $h1-line-height: 2.1rem;
 
 // Page
 $page-title-font-size: var(--#{$prefix}font-size-h1);
+
+// Dark mode
+$dark-body-bg: #0F1623 !default;
+$dark-bg-surface: #1E2433 !default;

src/BootstrapAdminUi/assets/styles/main.scss

@@ -8,6 +8,7 @@
  */
 
 @import "variables";
+@import "mixins/text-truncate";
 
 @import "@tabler/core/scss/tabler.scss";
 
@@ -18,8 +19,10 @@
 @import "datatable";
 @import "filters";
 @import "flashes";
+@import "fonts";
 @import "form";
 @import "loader";
+@import "modal";
 @import "navbar";
 @import "icons";
 @import "sidebar";

src/BootstrapAdminUi/assets/styles/mixins/_text-truncate.scss

@@ -0,0 +1,35 @@
+/*!
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+@mixin text-truncate-ellipsis($max-width: null) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    @if $max-width {
+        max-width: $max-width;
+    }
+}
+
+@mixin text-truncate-flex($max-width: null) {
+    display: flex;
+    min-width: 0;
+
+    @if $max-width {
+        max-width: $max-width;
+    }
+}
+
+@mixin text-truncate-flex-child {
+    min-width: 0;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

src/BootstrapAdminUi/public/manifest.json

@@ -4,8 +4,9 @@
   "bundles/SyliusBootstrapAdminUi/symfony_ux.css": "./symfony_ux.css",
   "bundles/SyliusBootstrapAdminUi/symfony_ux.js": "./symfony_ux.js",
   "bundles/SyliusBootstrapAdminUi/fonts/fa-solid-900.svg": "./fonts/fa-solid-900.7a8b4f130182d19a2d7c67d80c090397.svg",
-  "bundles/SyliusBootstrapAdminUi/fonts/Inter-VariableFont_slnt,wght.ttf": "./fonts/Inter-VariableFont_slnt,wght.853e0197.ttf",
   "bundles/SyliusBootstrapAdminUi/fonts/fa-brands-400.svg": "./fonts/fa-brands-400.2f517e09eb2ca6650ff5bec5a95157ab.svg",
+  "bundles/SyliusBootstrapAdminUi/fonts/InterVariable-Italic.woff2": "./fonts/InterVariable-Italic.01dcbad1.woff2",
+  "bundles/SyliusBootstrapAdminUi/fonts/InterVariable.woff2": "./fonts/InterVariable.c504db5c.woff2",
   "bundles/SyliusBootstrapAdminUi/fonts/fa-solid-900.eot": "./fonts/fa-solid-900.9bbb245e67a133f6e486d8d2545e14a5.eot",
   "bundles/SyliusBootstrapAdminUi/fonts/fa-solid-900.ttf": "./fonts/fa-solid-900.be9ee23c0c6390141475d519c2c5fb8f.ttf",
   "bundles/SyliusBootstrapAdminUi/fonts/fa-regular-400.svg": "./fonts/fa-regular-400.4689f52cc96215721344e51e5831eec1.svg",