From 07c57db21bb6f3bae8e8eb7174a2c264ebf9b835 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jib=C3=A9=20Barth?= Date: Sat, 28 Mar 2026 13:47:23 +0100 Subject: [PATCH 1/5] Expose as ux bundle and asset mapper --- src/BootstrapAdminUi/assets/entrypoint.js | 8 ++++---- src/BootstrapAdminUi/{ => assets}/package.json | 17 ++++++++++++++++- src/BootstrapAdminUi/composer.json | 3 +++ .../Symfony/SyliusBootstrapAdminUiBundle.php | 9 +++++++++ .../shared/layout/javascripts.html.twig | 3 ++- .../shared/layout/stylesheets.html.twig | 1 - .../shared/layout/symfony_ux_scripts.html.twig | 2 +- .../shared/layout/symfony_ux_styles.html.twig | 2 +- 8 files changed, 36 insertions(+), 9 deletions(-) rename src/BootstrapAdminUi/{ => assets}/package.json (74%) diff --git a/src/BootstrapAdminUi/assets/entrypoint.js b/src/BootstrapAdminUi/assets/entrypoint.js index a22fb511..a526931a 100644 --- a/src/BootstrapAdminUi/assets/entrypoint.js +++ b/src/BootstrapAdminUi/assets/entrypoint.js @@ -9,8 +9,8 @@ import './styles/main.scss'; -import './scripts/bulk-delete'; -import './scripts/check-all'; -import './scripts/menu-search'; +import './scripts/bulk-delete.js'; +import './scripts/check-all.js'; +import './scripts/menu-search.js'; -import './scripts/bootstrap'; +import './scripts/bootstrap.js'; diff --git a/src/BootstrapAdminUi/package.json b/src/BootstrapAdminUi/assets/package.json similarity index 74% rename from src/BootstrapAdminUi/package.json rename to src/BootstrapAdminUi/assets/package.json index f746efc9..3166dbec 100644 --- a/src/BootstrapAdminUi/package.json +++ b/src/BootstrapAdminUi/assets/package.json @@ -1,4 +1,19 @@ { + "name": "@sylius/bootstrap-admin-ui", + "symfony": { + "controllers": { + "theme-switcher": { + "main": "controllers/theme-switcher-controller.js", + "webpackMode": "lazy", + "fetch": "lazy", + "enabled": true + } + }, + "importmap": { + "@sylius/bootstrap-admin-ui/entrypoint": "entrypoint:%PACKAGE%/entrypoint.js", + "bootstrap": "^5.3.0" + } + }, "devDependencies": { "@babel/core": "^7.17.0", "@babel/preset-env": "^7.25.8", @@ -39,4 +54,4 @@ "watch": "encore dev --watch", "build": "encore production" } -} +} \ No newline at end of file diff --git a/src/BootstrapAdminUi/composer.json b/src/BootstrapAdminUi/composer.json index f264af7e..a495caf4 100644 --- a/src/BootstrapAdminUi/composer.json +++ b/src/BootstrapAdminUi/composer.json @@ -2,6 +2,9 @@ "name": "sylius/bootstrap-admin-ui", "description": "Build your Bootstrap admin panels with Sylius and Symfony UX", "type": "library", + "keywords": [ + "symfony-ux" + ], "require": { "php": "^8.1", "pagerfanta/twig": "^4.6", diff --git a/src/BootstrapAdminUi/src/Symfony/SyliusBootstrapAdminUiBundle.php b/src/BootstrapAdminUi/src/Symfony/SyliusBootstrapAdminUiBundle.php index ff4fb436..d8eaa7d8 100644 --- a/src/BootstrapAdminUi/src/Symfony/SyliusBootstrapAdminUiBundle.php +++ b/src/BootstrapAdminUi/src/Symfony/SyliusBootstrapAdminUiBundle.php @@ -42,6 +42,15 @@ public function prependExtension(ContainerConfigurator $container, ContainerBuil $loader->load('services.php'); + $container->extension('framework', [ + 'asset_mapper' => [ + 'paths' => [ + __DIR__ . '/../../assets/' => '@sylius/bootstrap-admin-ui', + ], + ], + ]); + + if (!isset($bundles['SyliusAdminUiBundle'])) { return; } diff --git a/src/BootstrapAdminUi/templates/shared/layout/javascripts.html.twig b/src/BootstrapAdminUi/templates/shared/layout/javascripts.html.twig index 7498bcd8..f013e8b5 100644 --- a/src/BootstrapAdminUi/templates/shared/layout/javascripts.html.twig +++ b/src/BootstrapAdminUi/templates/shared/layout/javascripts.html.twig @@ -1 +1,2 @@ - + +{% block importmap %}{{ importmap('@sylius/bootstrap-admin-ui/entrypoint') }}{% endblock %} \ No newline at end of file diff --git a/src/BootstrapAdminUi/templates/shared/layout/stylesheets.html.twig b/src/BootstrapAdminUi/templates/shared/layout/stylesheets.html.twig index 449b014f..e69de29b 100644 --- a/src/BootstrapAdminUi/templates/shared/layout/stylesheets.html.twig +++ b/src/BootstrapAdminUi/templates/shared/layout/stylesheets.html.twig @@ -1 +0,0 @@ - diff --git a/src/BootstrapAdminUi/templates/shared/layout/symfony_ux_scripts.html.twig b/src/BootstrapAdminUi/templates/shared/layout/symfony_ux_scripts.html.twig index f5b70d74..5c0f3c41 100644 --- a/src/BootstrapAdminUi/templates/shared/layout/symfony_ux_scripts.html.twig +++ b/src/BootstrapAdminUi/templates/shared/layout/symfony_ux_scripts.html.twig @@ -1 +1 @@ - +{# #} diff --git a/src/BootstrapAdminUi/templates/shared/layout/symfony_ux_styles.html.twig b/src/BootstrapAdminUi/templates/shared/layout/symfony_ux_styles.html.twig index cc412806..814884a0 100644 --- a/src/BootstrapAdminUi/templates/shared/layout/symfony_ux_styles.html.twig +++ b/src/BootstrapAdminUi/templates/shared/layout/symfony_ux_styles.html.twig @@ -1 +1 @@ - +{# #} From d91ce5005782d0796c805983932580656a019d04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jib=C3=A9=20Barth?= Date: Sat, 28 Mar 2026 14:11:22 +0100 Subject: [PATCH 2/5] Drop sass --- src/BootstrapAdminUi/assets/entrypoint.js | 4 +- src/BootstrapAdminUi/assets/package.json | 20 ++++- .../assets/styles/_variables.scss | 80 ----------------- .../styles/{_accordion.scss => accordion.css} | 0 .../assets/styles/{_alert.scss => alert.css} | 0 .../assets/styles/{_body.scss => body.css} | 12 +-- .../styles/{_buttons.scss => buttons.css} | 0 .../styles/{_datatable.scss => datatable.css} | 0 .../styles/{_filters.scss => filters.css} | 90 +++++++++---------- .../styles/{_flashes.scss => flashes.css} | 0 .../assets/styles/{_form.scss => form.css} | 40 ++++++--- .../assets/styles/{_icons.scss => icons.css} | 0 .../styles/{_loader.scss => loader.css} | 0 src/BootstrapAdminUi/assets/styles/main.css | 24 +++++ src/BootstrapAdminUi/assets/styles/main.scss | 26 ------ .../styles/{_navbar.scss => navbar.css} | 6 +- .../styles/{_sidebar.scss => sidebar.css} | 13 +-- .../{_tom-select.scss => tom-select.css} | 12 +-- .../assets/styles/variables.css | 51 +++++++++++ 19 files changed, 184 insertions(+), 194 deletions(-) delete mode 100644 src/BootstrapAdminUi/assets/styles/_variables.scss rename src/BootstrapAdminUi/assets/styles/{_accordion.scss => accordion.css} (100%) rename src/BootstrapAdminUi/assets/styles/{_alert.scss => alert.css} (100%) rename src/BootstrapAdminUi/assets/styles/{_body.scss => body.css} (89%) rename src/BootstrapAdminUi/assets/styles/{_buttons.scss => buttons.css} (100%) rename src/BootstrapAdminUi/assets/styles/{_datatable.scss => datatable.css} (100%) rename src/BootstrapAdminUi/assets/styles/{_filters.scss => filters.css} (83%) rename src/BootstrapAdminUi/assets/styles/{_flashes.scss => flashes.css} (100%) rename src/BootstrapAdminUi/assets/styles/{_form.scss => form.css} (55%) rename src/BootstrapAdminUi/assets/styles/{_icons.scss => icons.css} (100%) rename src/BootstrapAdminUi/assets/styles/{_loader.scss => loader.css} (100%) create mode 100644 src/BootstrapAdminUi/assets/styles/main.css delete mode 100644 src/BootstrapAdminUi/assets/styles/main.scss rename src/BootstrapAdminUi/assets/styles/{_navbar.scss => navbar.css} (92%) rename src/BootstrapAdminUi/assets/styles/{_sidebar.scss => sidebar.css} (93%) rename src/BootstrapAdminUi/assets/styles/{_tom-select.scss => tom-select.css} (85%) create mode 100644 src/BootstrapAdminUi/assets/styles/variables.css diff --git a/src/BootstrapAdminUi/assets/entrypoint.js b/src/BootstrapAdminUi/assets/entrypoint.js index a526931a..78bed475 100644 --- a/src/BootstrapAdminUi/assets/entrypoint.js +++ b/src/BootstrapAdminUi/assets/entrypoint.js @@ -6,8 +6,10 @@ * For the full copyright and license information, please view the LICENSE * file that was distributed with this source code. */ +import "@tabler/core/dist/css/tabler.min.css" +import "tom-select/dist/css/tom-select.bootstrap5.css"; -import './styles/main.scss'; +import './styles/main.css'; import './scripts/bulk-delete.js'; import './scripts/check-all.js'; diff --git a/src/BootstrapAdminUi/assets/package.json b/src/BootstrapAdminUi/assets/package.json index 3166dbec..1998788d 100644 --- a/src/BootstrapAdminUi/assets/package.json +++ b/src/BootstrapAdminUi/assets/package.json @@ -11,7 +11,23 @@ }, "importmap": { "@sylius/bootstrap-admin-ui/entrypoint": "entrypoint:%PACKAGE%/entrypoint.js", - "bootstrap": "^5.3.0" + "bootstrap": "^5.3.0", + "bootstrap/dist/css/bootstrap.min.css": "^5.3.0", + "@fortawesome/fontawesome-free": "^5.8.1", + "@hotwired/stimulus": "^3.0.0", + "@popperjs/core": "^2.9.2", + "@tabler/core": "^1.4.0", + "@tabler/core/dist/css/tabler.min.css": "^1.4.0", + "apexcharts": "^3.41.0", + "basiclightbox": "^5.0.4", + "choices.js": "^10.2.0", + "codemirror": "^5.65.20", + "dirty-form": "^0.4.0", + "jquery": "^3.5.0", + "mark.js": "^8.11.1", + "slugify": "^1.4.0", + "tom-select": "^2.2.2", + "tom-select/dist/css/tom-select.bootstrap5.css": "^2.2.2" } }, "devDependencies": { @@ -35,8 +51,6 @@ "jquery": "^3.5.0", "mark.js": "^8.11.1", "postcss": "^8.2.10", - "sass": "~1.64.2", - "sass-loader": "~16.0.1", "slugify": "^1.4.0", "tom-select": "^2.2.2", "webpack": "^5.72", diff --git a/src/BootstrapAdminUi/assets/styles/_variables.scss b/src/BootstrapAdminUi/assets/styles/_variables.scss deleted file mode 100644 index 6c0990b1..00000000 --- a/src/BootstrapAdminUi/assets/styles/_variables.scss +++ /dev/null @@ -1,80 +0,0 @@ -/*! - * 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. - */ - -$prefix: "tblr-"; - -$assets-base: "/node_modules/@tabler/core/dist"; -$primary: #22B99A; - -$white: #fff !default; -$gray-100: #f8f9fa !default; -$gray-200: #e9ecef !default; -$gray-300: #dee2e6 !default; -$gray-400: #ced4da !default; -$gray-500: #adb5bd !default; -$gray-600: #6c757d !default; -$gray-700: #495057 !default; -$gray-800: #343a40 !default; -$gray-900: #212529 !default; -$black: #000 !default; - -$grid-breakpoints: ( - xs: 0, - sm: 768px, - md: 992px, - lg: 1200px, - xl: 1400px, - xxl: 2200px -); - -$container-max-widths: ( - sm: 720px, - md: 960px, - lg: 1140px, - xl: 1320px, - xxl: 1920px -); - -$body-color: $gray-900; - -$text-secondary: $gray-600; -$text-secondary-light: $gray-500; -$text-secondary-dark: $gray-700; - -$link-color: $body-color; -$link-decoration: underline; -$link-hover-color: $primary; -$link-hover-decoration: null; - -$disabled-color: $gray-600; -$form-secondary-color: $gray-600; - -$input-border-color: $gray-400; -$input-border-color-translucent: $gray-400; -$input-focus-border-color: $gray-600; - -$focus-ring-width: 0; -$focus-ring-color: $input-focus-border-color; -$focus-ring-blur: 0; -$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color; - -$input-btn-focus-width: $focus-ring-width; - -$btn-border-color: $input-border-color; - -$pagination-active-color: inherit; -$pagination-active-bg: $gray-200; - -$font-family-sans-serif: 'Inter', serif; - -$h1-font-size: 1.6rem; -$h1-line-height: 2.1rem; - -// Page -$page-title-font-size: var(--#{$prefix}font-size-h1); diff --git a/src/BootstrapAdminUi/assets/styles/_accordion.scss b/src/BootstrapAdminUi/assets/styles/accordion.css similarity index 100% rename from src/BootstrapAdminUi/assets/styles/_accordion.scss rename to src/BootstrapAdminUi/assets/styles/accordion.css diff --git a/src/BootstrapAdminUi/assets/styles/_alert.scss b/src/BootstrapAdminUi/assets/styles/alert.css similarity index 100% rename from src/BootstrapAdminUi/assets/styles/_alert.scss rename to src/BootstrapAdminUi/assets/styles/alert.css diff --git a/src/BootstrapAdminUi/assets/styles/_body.scss b/src/BootstrapAdminUi/assets/styles/body.css similarity index 89% rename from src/BootstrapAdminUi/assets/styles/_body.scss rename to src/BootstrapAdminUi/assets/styles/body.css index 4d2a1e4b..cd7ee3dc 100644 --- a/src/BootstrapAdminUi/assets/styles/_body.scss +++ b/src/BootstrapAdminUi/assets/styles/body.css @@ -15,15 +15,15 @@ --tblr-pagination-border-width: 0; } -@include color-mode(light) { +[data-bs-theme="light"] { --tblr-body-color: #212529; --tblr-code-color: #36393B; --tblr-breadcrumb-link-color: #212529; body { - --bs-body-bg: #{$body-bg}; - --bs-tertiary-bg: #{$body-bg}; - --bs-body-color: #{$body-color}; + --bs-body-bg: var(--tblr-body-bg); + --bs-tertiary-bg: var(--tblr-body-bg); + --bs-body-color: var(--tblr-body-color); } [data-theme-switch="light"] { @@ -31,7 +31,7 @@ } } -@include color-mode(dark) { +[data-bs-theme="dark"] { --tblr-body-bg: #0F1623; --tblr-bg-surface: #1E2433; @@ -98,7 +98,7 @@ a.link-reset { text-decoration: none; &:hover { - color: $primary + color: var(--tblr-primary); } } diff --git a/src/BootstrapAdminUi/assets/styles/_buttons.scss b/src/BootstrapAdminUi/assets/styles/buttons.css similarity index 100% rename from src/BootstrapAdminUi/assets/styles/_buttons.scss rename to src/BootstrapAdminUi/assets/styles/buttons.css diff --git a/src/BootstrapAdminUi/assets/styles/_datatable.scss b/src/BootstrapAdminUi/assets/styles/datatable.css similarity index 100% rename from src/BootstrapAdminUi/assets/styles/_datatable.scss rename to src/BootstrapAdminUi/assets/styles/datatable.css diff --git a/src/BootstrapAdminUi/assets/styles/_filters.scss b/src/BootstrapAdminUi/assets/styles/filters.css similarity index 83% rename from src/BootstrapAdminUi/assets/styles/_filters.scss rename to src/BootstrapAdminUi/assets/styles/filters.css index e15eda1e..afb5cad3 100644 --- a/src/BootstrapAdminUi/assets/styles/_filters.scss +++ b/src/BootstrapAdminUi/assets/styles/filters.css @@ -7,46 +7,6 @@ * file that was distributed with this source code. */ -@mixin sylius-filters__defaults { - @include media-breakpoint-up(md) { - display: flex; - align-items: end; - gap: .7rem; - } -} - -@mixin sylius-filters__connect { - - > * { - position: relative; - - &:not(:last-child)::after { - content: '-'; - position: absolute; - z-index: 1; - display: flex; - justify-content: center; - align-items: center; - border-radius: 3px; - background: var(--tblr-card-bg); - - @include media-breakpoint-down(md) { - bottom: -19px; - right: 0; - width: 30px; - height: 20px; - } - - @include media-breakpoint-up(md) { - bottom: 9px; - right: -12px; - width: 13px; - height: 38px; - } - } - } -} - .sylius-filters { display: flex; flex-wrap: wrap; @@ -99,12 +59,48 @@ } } -.sylius-filters__string { - @include sylius-filters__defaults; - @include sylius-filters__connect; +.sylius-filters__string, +.sylius-filters__date, +.sylius-filters__money { + @media (min-width: 768px) { + display: flex; + align-items: end; + gap: .7rem; + } + + > * { + position: relative; + + &:not(:last-child)::after { + content: '-'; + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + border-radius: 3px; + background: var(--tblr-card-bg); + @media (max-width: 767.98px) { + bottom: -19px; + right: 0; + width: 30px; + height: 20px; + } + + @media (min-width: 768px) { + bottom: 9px; + right: -12px; + width: 13px; + height: 38px; + } + } + } +} + +.sylius-filters__string { > *:has(select) { - @include media-breakpoint-up(md) { + @media (min-width: 768px) { width: 20%; min-width: 8rem; } @@ -120,9 +116,6 @@ } .sylius-filters__date { - @include sylius-filters__defaults; - @include sylius-filters__connect; - > * { flex-grow: 1; flex-shrink: 0; @@ -135,9 +128,6 @@ } .sylius-filters__money { - @include sylius-filters__defaults; - @include sylius-filters__connect; - > * { flex-grow: 1; flex-shrink: 0; diff --git a/src/BootstrapAdminUi/assets/styles/_flashes.scss b/src/BootstrapAdminUi/assets/styles/flashes.css similarity index 100% rename from src/BootstrapAdminUi/assets/styles/_flashes.scss rename to src/BootstrapAdminUi/assets/styles/flashes.css diff --git a/src/BootstrapAdminUi/assets/styles/_form.scss b/src/BootstrapAdminUi/assets/styles/form.css similarity index 55% rename from src/BootstrapAdminUi/assets/styles/_form.scss rename to src/BootstrapAdminUi/assets/styles/form.css index e5b65690..75d96d5f 100644 --- a/src/BootstrapAdminUi/assets/styles/_form.scss +++ b/src/BootstrapAdminUi/assets/styles/form.css @@ -13,22 +13,36 @@ textarea.form-control { } .tab-error { - @extend .float-end; - @extend .badge; - @extend .bg-danger; - @extend .rounded-pill; - @extend .text-white; + float: right; + display: inline-block; + padding: 0.35em 0.65em; + font-size: 0.75em; + font-weight: 700; + line-height: 1; + color: #fff; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 50rem; + background-color: var(--tblr-danger); } .accordion-error { - @extend .position-absolute; - @extend .top-50; - @extend .start-0; - @extend .translate-middle; - @extend .badge; - @extend .rounded-pill; - @extend .bg-danger; - @extend .text-white; + position: absolute; + top: 50%; + left: 0; + transform: translate(-50%, -50%); + display: inline-block; + padding: 0.35em 0.65em; + font-size: 0.75em; + font-weight: 700; + line-height: 1; + color: #fff; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 50rem; + background-color: var(--tblr-danger); } .accordion-item:has(.accordion-error), diff --git a/src/BootstrapAdminUi/assets/styles/_icons.scss b/src/BootstrapAdminUi/assets/styles/icons.css similarity index 100% rename from src/BootstrapAdminUi/assets/styles/_icons.scss rename to src/BootstrapAdminUi/assets/styles/icons.css diff --git a/src/BootstrapAdminUi/assets/styles/_loader.scss b/src/BootstrapAdminUi/assets/styles/loader.css similarity index 100% rename from src/BootstrapAdminUi/assets/styles/_loader.scss rename to src/BootstrapAdminUi/assets/styles/loader.css diff --git a/src/BootstrapAdminUi/assets/styles/main.css b/src/BootstrapAdminUi/assets/styles/main.css new file mode 100644 index 00000000..d3145543 --- /dev/null +++ b/src/BootstrapAdminUi/assets/styles/main.css @@ -0,0 +1,24 @@ +/*! + * 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. + */ + +@import "./variables.css"; + +@import "./body.css"; +@import "./buttons.css"; +@import "./accordion.css"; +@import "./alert.css"; +@import "./datatable.css"; +@import "./filters.css"; +@import "./flashes.css"; +@import "./form.css"; +@import "./loader.css"; +@import "./navbar.css"; +@import "./icons.css"; +@import "./sidebar.css"; +@import "./tom-select.css"; \ No newline at end of file diff --git a/src/BootstrapAdminUi/assets/styles/main.scss b/src/BootstrapAdminUi/assets/styles/main.scss deleted file mode 100644 index f8bab511..00000000 --- a/src/BootstrapAdminUi/assets/styles/main.scss +++ /dev/null @@ -1,26 +0,0 @@ -/*! - * 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. - */ - -@import "variables"; - -@import "@tabler/core/scss/tabler.scss"; - -@import "body"; -@import "buttons"; -@import "accordion"; -@import "alert"; -@import "datatable"; -@import "filters"; -@import "flashes"; -@import "form"; -@import "loader"; -@import "navbar"; -@import "icons"; -@import "sidebar"; -@import "tom-select"; diff --git a/src/BootstrapAdminUi/assets/styles/_navbar.scss b/src/BootstrapAdminUi/assets/styles/navbar.css similarity index 92% rename from src/BootstrapAdminUi/assets/styles/_navbar.scss rename to src/BootstrapAdminUi/assets/styles/navbar.css index 1c28dc57..0f0ba03f 100644 --- a/src/BootstrapAdminUi/assets/styles/_navbar.scss +++ b/src/BootstrapAdminUi/assets/styles/navbar.css @@ -7,10 +7,8 @@ * file that was distributed with this source code. */ -.sylius { - &.navbar-nav { - gap: 0.5rem; - } +.sylius.navbar-nav { + gap: 0.5rem; } .navbar input { diff --git a/src/BootstrapAdminUi/assets/styles/_sidebar.scss b/src/BootstrapAdminUi/assets/styles/sidebar.css similarity index 93% rename from src/BootstrapAdminUi/assets/styles/_sidebar.scss rename to src/BootstrapAdminUi/assets/styles/sidebar.css index 1c6f09e1..465c2494 100644 --- a/src/BootstrapAdminUi/assets/styles/_sidebar.scss +++ b/src/BootstrapAdminUi/assets/styles/sidebar.css @@ -30,10 +30,10 @@ padding-top: 0.3rem; padding-bottom: 0.3rem; background: transparent; - color: $gray-500; + color: var(--tblr-gray-500); &.active { - color: $primary; + color: var(--tblr-primary); } &:active { @@ -49,6 +49,7 @@ } .menu-search { + .btn, .form-control { border: 1px solid transparent; @@ -65,12 +66,12 @@ border-left: 0; } - > * { + >* { opacity: 0.5; } &:has(input[data-menu-search]:focus) { - > * { + >* { opacity: 0.8; } @@ -97,8 +98,8 @@ } } -@include color-mode(dark) { +[data-bs-theme="dark"] { .menu-search .form-control { border-color: transparent; } -} +} \ No newline at end of file diff --git a/src/BootstrapAdminUi/assets/styles/_tom-select.scss b/src/BootstrapAdminUi/assets/styles/tom-select.css similarity index 85% rename from src/BootstrapAdminUi/assets/styles/_tom-select.scss rename to src/BootstrapAdminUi/assets/styles/tom-select.css index dfcc2963..f7b9e976 100644 --- a/src/BootstrapAdminUi/assets/styles/_tom-select.scss +++ b/src/BootstrapAdminUi/assets/styles/tom-select.css @@ -7,7 +7,6 @@ * file that was distributed with this source code. */ -@import "tom-select/dist/css/tom-select.bootstrap5.css"; .ts-control { padding: 0.5625rem 2.3rem 0.5625rem 0.8rem; @@ -22,7 +21,7 @@ } } -@include color-mode(dark) { +[data-bs-theme="dark"] { .ts-control .item { color: var(--tblr-body-color); } @@ -33,7 +32,9 @@ box-shadow: 0 0 0 1px var(--tblr-focus-ring-color); } -.ts-dropdown, .ts-dropdown.form-control, .ts-dropdown.form-select { +.ts-dropdown, +.ts-dropdown.form-control, +.ts-dropdown.form-select { padding: 5px; background: var(--tblr-bg-surface) !important; border: 1px solid var(--tblr-border-color); @@ -51,11 +52,12 @@ } } -.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input { +.ts-wrapper.single .ts-control, +.ts-wrapper.single .ts-control input { cursor: unset; } .plugin-clear_button .clear-button { top: 14px !important; font-size: 24px; -} +} \ No newline at end of file diff --git a/src/BootstrapAdminUi/assets/styles/variables.css b/src/BootstrapAdminUi/assets/styles/variables.css new file mode 100644 index 00000000..62b70c1f --- /dev/null +++ b/src/BootstrapAdminUi/assets/styles/variables.css @@ -0,0 +1,51 @@ +/*! + * 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 { + --tblr-primary: #22B99A; + + --tblr-white: #fff; + --tblr-gray-100: #f8f9fa; + --tblr-gray-200: #e9ecef; + --tblr-gray-300: #dee2e6; + --tblr-gray-400: #ced4da; + --tblr-gray-500: #adb5bd; + --tblr-gray-600: #6c757d; + --tblr-gray-700: #495057; + --tblr-gray-800: #343a40; + --tblr-gray-900: #212529; + --tblr-black: #000; + + --tblr-body-color: var(--tblr-gray-900); + + --tblr-text-secondary: var(--tblr-gray-600); + --tblr-text-secondary-light: var(--tblr-gray-500); + --tblr-text-secondary-dark: var(--tblr-gray-700); + + --tblr-link-color: var(--tblr-body-color); + --tblr-link-decoration: underline; + --tblr-link-hover-color: var(--tblr-primary); + + --tblr-disabled-color: var(--tblr-gray-600); + --tblr-form-secondary-color: var(--tblr-gray-600); + + --tblr-input-border-color: var(--tblr-gray-400); + --tblr-input-focus-border-color: var(--tblr-gray-600); + + --tblr-btn-border-color: var(--tblr-input-border-color); + + --tblr-pagination-active-bg: var(--tblr-gray-200); + + --tblr-font-family-sans-serif: 'Inter', serif; + + --tblr-h1-font-size: 1.6rem; + --tblr-h1-line-height: 2.1rem; + + --tblr-page-title-font-size: var(--tblr-font-size-h1); +} From c1523cd0daeec1462b9caa3e495e39f5ecba74bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jib=C3=A9=20Barth?= Date: Sat, 28 Mar 2026 14:24:37 +0100 Subject: [PATCH 3/5] Enable stimulus --- src/BootstrapAdminUi/assets/controllers.json | 25 ------------------- src/BootstrapAdminUi/assets/entrypoint.js | 4 +++ src/BootstrapAdminUi/assets/package.json | 4 +-- src/BootstrapAdminUi/assets/symfony_ux.js | 17 ------------- .../navbar/items/theme_switcher.html.twig | 4 +-- 5 files changed, 8 insertions(+), 46 deletions(-) delete mode 100644 src/BootstrapAdminUi/assets/controllers.json delete mode 100644 src/BootstrapAdminUi/assets/symfony_ux.js diff --git a/src/BootstrapAdminUi/assets/controllers.json b/src/BootstrapAdminUi/assets/controllers.json deleted file mode 100644 index 12ca7b28..00000000 --- a/src/BootstrapAdminUi/assets/controllers.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "controllers": { - "@symfony/ux-autocomplete": { - "autocomplete": { - "enabled": true, - "fetch": "eager", - "autoimport": { - "tom-select/dist/css/tom-select.default.css": false, - "tom-select/dist/css/tom-select.bootstrap4.css": false, - "tom-select/dist/css/tom-select.bootstrap5.css": true - } - } - }, - "@symfony/ux-live-component": { - "live": { - "enabled": true, - "fetch": "eager", - "autoimport": { - "@symfony/ux-live-component/dist/live.min.css": true - } - } - } - }, - "entrypoints": [] -} diff --git a/src/BootstrapAdminUi/assets/entrypoint.js b/src/BootstrapAdminUi/assets/entrypoint.js index 78bed475..230ab5b0 100644 --- a/src/BootstrapAdminUi/assets/entrypoint.js +++ b/src/BootstrapAdminUi/assets/entrypoint.js @@ -16,3 +16,7 @@ import './scripts/check-all.js'; import './scripts/menu-search.js'; import './scripts/bootstrap.js'; + +import { startStimulusApp } from '@symfony/stimulus-bundle'; + +const app = startStimulusApp(); \ No newline at end of file diff --git a/src/BootstrapAdminUi/assets/package.json b/src/BootstrapAdminUi/assets/package.json index 1998788d..3e7ed6ac 100644 --- a/src/BootstrapAdminUi/assets/package.json +++ b/src/BootstrapAdminUi/assets/package.json @@ -4,8 +4,8 @@ "controllers": { "theme-switcher": { "main": "controllers/theme-switcher-controller.js", - "webpackMode": "lazy", - "fetch": "lazy", + "webpackMode": "eager", + "fetch": "eager", "enabled": true } }, diff --git a/src/BootstrapAdminUi/assets/symfony_ux.js b/src/BootstrapAdminUi/assets/symfony_ux.js deleted file mode 100644 index 718ff1ff..00000000 --- a/src/BootstrapAdminUi/assets/symfony_ux.js +++ /dev/null @@ -1,17 +0,0 @@ -/* - * 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. - */ - -import {startStimulusApp} from '@symfony/stimulus-bridge'; - -// Registers Stimulus controllers from controllers.json and in the controllers/ directory -export const symfony_ux = startStimulusApp(require.context( - '@symfony/stimulus-bridge/lazy-controller-loader!./controllers', - true, - /\.[jt]sx?$/ -)); diff --git a/src/BootstrapAdminUi/templates/shared/crud/common/navbar/items/theme_switcher.html.twig b/src/BootstrapAdminUi/templates/shared/crud/common/navbar/items/theme_switcher.html.twig index 66453bf8..fe90564c 100644 --- a/src/BootstrapAdminUi/templates/shared/crud/common/navbar/items/theme_switcher.html.twig +++ b/src/BootstrapAdminUi/templates/shared/crud/common/navbar/items/theme_switcher.html.twig @@ -1,5 +1,5 @@ -