From e231dd814d563967ae674ad92234399e0149996e Mon Sep 17 00:00:00 2001
From: Florent Torregrosa <florent.torregrosa@gmail.com>
Date: Fri, 17 Jan 2025 17:50:13 +0100
Subject: [PATCH] Issue #3499985 by mogtofu33, grimreaper, pdureau: Transversal
improvements.
- CKE5 styling
- classes update for text contrast
- Layout Builder CSS improvements
- Update maintenance page regarding changes in page.html.twig
---
assets/css/ckeditor5/ckeditor5-theme.css | 34 ++++++++++++++++++
assets/css/layout-builder/layout-builder.css | 3 +-
src/Element/ElementPreRenderLayoutBuilder.php | 3 +-
src/UiSkins.php | 4 +++
.../media/media--media-library.html.twig | 7 +++-
templates/system/maintenance-page.html.twig | 35 +++++++++++--------
templates/system/mark.html.twig | 2 +-
templates/system/page.html.twig | 26 +++++++-------
ui_suite_bootstrap.api.php | 4 +--
ui_suite_bootstrap.info.yml | 3 ++
ui_suite_bootstrap.theme | 4 ---
11 files changed, 86 insertions(+), 39 deletions(-)
create mode 100644 assets/css/ckeditor5/ckeditor5-theme.css
diff --git a/assets/css/ckeditor5/ckeditor5-theme.css b/assets/css/ckeditor5/ckeditor5-theme.css
new file mode 100644
index 00000000..368da4e8
--- /dev/null
+++ b/assets/css/ckeditor5/ckeditor5-theme.css
@@ -0,0 +1,34 @@
+/**
+ * CKEditor5 theme override, this can be enabled with the ui_skins module
+ * in this theme settings.
+ * @see https://ckeditor.com/docs/ckeditor5/latest/framework/deep-dive/ui/theme-customization.html
+ */
+[data-bs-theme="light"],
+[data-bs-theme="dark"] {
+ --ck-custom-background: var(--bs-body-bg);
+ --ck-custom-foreground: var(--bs-body-color);
+ --ck-custom-border: var(--bs-secondary-bg);
+ --ck-custom-white: var(--bs-body-color);
+ --ck-color-base-active: var(--bs-secondary-bg);
+ --ck-color-base-active-focus: var(--bs-secondary-bg);
+ --ck-color-base-background: var(--bs-body-bg);
+ --ck-color-base-foreground: var(--bs-secondary-bg);
+ --ck-color-panel-background: var(--bs-body-bg);
+ --ck-color-toolbar-background: var(--bs-body-bg);
+ --ck-color-text: var(--bs-body-color);
+ --ck-color-button-default-background: var(--bs-body-bg);
+ --ck-color-button-default-hover-background: var(--bs-secondary-bg);
+ --ck-color-button-default-active-background: var(--bs-tertiary-bg);
+ --ck-color-button-default-disabled-background: var(--bs-secondary-bg);
+ --ck-color-button-on-background: var(--bs-secondary-bg);
+ --ck-color-button-on-hover-background: var(--bs-secondary-bg);
+ --ck-color-dropdown-panel-background: var(--bs-body-bg);
+ --ck-color-dropdown-panel-border: var(--bs-body-color);
+ --ck-color-split-button-hover-background: var(--bs-secondary-bg);
+ --ck-color-input-background: var(--bs-body-bg);
+ --ck-color-input-text: var(--bs-body-color);
+ --ck-color-input-disabled-background: var(--bs-secondary-bg);
+ --ck-color-labeled-field-label-background: var(--bs-secondary-bg);
+ --ck-color-list-background: var(--bs-body-bg);
+ --ck-color-list-button-hover-background: var(--bs-secondary-bg);
+}
diff --git a/assets/css/layout-builder/layout-builder.css b/assets/css/layout-builder/layout-builder.css
index 0f9e7d89..0c1333a4 100644
--- a/assets/css/layout-builder/layout-builder.css
+++ b/assets/css/layout-builder/layout-builder.css
@@ -38,7 +38,6 @@
.layout-builder-block {
padding: 1.5em;
cursor: move;
- background-color: #fff;
}
.layout-builder-block [tabindex="-1"] {
@@ -77,7 +76,7 @@
.layout-builder__layout.is-layout-builder-highlighted::before,
.layout-builder__layout.is-layout-builder-highlighted,
.layout-builder-block.is-layout-builder-highlighted {
- border: 4px solid #000;
+ border: 4px solid var(--bs-emphasis-color);
}
.layout-builder__section-label {
diff --git a/src/Element/ElementPreRenderLayoutBuilder.php b/src/Element/ElementPreRenderLayoutBuilder.php
index 31ba9f11..aa1ceae5 100644
--- a/src/Element/ElementPreRenderLayoutBuilder.php
+++ b/src/Element/ElementPreRenderLayoutBuilder.php
@@ -34,7 +34,6 @@ class ElementPreRenderLayoutBuilder implements TrustedCallbackInterface {
'border',
'border-3',
'border-primary',
- 'bg-white',
'p-4',
'pb-2',
]);
@@ -98,7 +97,7 @@ class ElementPreRenderLayoutBuilder implements TrustedCallbackInterface {
if (isset($region->region_label)) {
/** @var \Drupal\ui_suite_bootstrap\Utility\Element $regionLabel */
$regionLabel = $region->region_label;
- $regionLabel->addClass('bg-light');
+ $regionLabel->addClass('text-bg-light');
}
// Add block.
diff --git a/src/UiSkins.php b/src/UiSkins.php
index f94a4b3f..ac3ec0cc 100644
--- a/src/UiSkins.php
+++ b/src/UiSkins.php
@@ -25,6 +25,10 @@ class UiSkins {
* The preprocessed variables.
*/
public function preprocessHtml(array &$variables): void {
+ if (!\interface_exists('\Drupal\ui_skins\UiSkinsInterface')) {
+ return;
+ }
+
$ui_skins_css_variables_settings = \theme_get_setting(UiSkinsInterface::CSS_VARIABLES_THEME_SETTING_KEY);
if (!\is_array($ui_skins_css_variables_settings)) {
return;
diff --git a/templates/media/media--media-library.html.twig b/templates/media/media--media-library.html.twig
index 5d6c631f..322ebfc6 100644
--- a/templates/media/media--media-library.html.twig
+++ b/templates/media/media--media-library.html.twig
@@ -40,7 +40,12 @@
#}
<article{{ attributes.addClass('card') }}>
{% if content %}
- <div{{ preview_attributes.addClass(['js-media-library-item-preview', 'card-img-top', 'text-center', 'bg-light', 'text-dark']) }}>
+ <div{{ preview_attributes.addClass([
+ 'js-media-library-item-preview',
+ 'card-img-top',
+ 'text-center',
+ 'text-bg-light',
+ ]) }}>
{{ content|without('name') }}
</div>
<div{{ metadata_attributes.addClass('card-body') }}>
diff --git a/templates/system/maintenance-page.html.twig b/templates/system/maintenance-page.html.twig
index f924d513..ad490e24 100644
--- a/templates/system/maintenance-page.html.twig
+++ b/templates/system/maintenance-page.html.twig
@@ -9,10 +9,21 @@
* @see template_preprocess_maintenance_page()
*/
#}
-{# Navbar #}
-{% block navbar %}
-<div class="{{ container }} bg-light">
- <nav class="navbar navbar-expand-lg">
+{% if container == 'container' %}
+ {% set header_gutter = 'gx-sm-4' %}
+{% elseif container == 'container-sm' %}
+ {% set header_gutter = 'gx-sm-4' %}
+{% elseif container == 'container-md' %}
+ {% set header_gutter = 'gx-md-4' %}
+{% elseif container == 'container-lg' %}
+ {% set header_gutter = 'gx-lg-4' %}
+{% elseif container == 'container-xl' %}
+ {% set header_gutter = 'gx-xl-4' %}
+{% elseif container == 'container-xxl' %}
+ {% set header_gutter = 'gx-xxl-4' %}
+{% endif %}
+<div class="{{ container }} gx-0 {{ header_gutter }} mb-3">
+ <nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<div>
{% if logo %}
@@ -31,21 +42,17 @@
</div>
</nav>
</div>
-{% endblock %}
{# Main #}
-<main role="main" class="{{ container }}">
+<div role="main" class="{{ container }}">
<div class="row">
- <section class="col col-12">
+ <div class="col col-12">
{% if title %}
<h1>{{ title }}</h1>
{% endif %}
- {# Content #}
- {% block content %}
- <a id="main-content"></a>
- {{ page.content }}
- {% endblock %}
- </section>
+ <a id="main-content"></a>
+ {{ page.content }}
+ </div>
</div>
-</main>
+</div>
diff --git a/templates/system/mark.html.twig b/templates/system/mark.html.twig
index 4b0a9b8a..d6f02401 100644
--- a/templates/system/mark.html.twig
+++ b/templates/system/mark.html.twig
@@ -19,7 +19,7 @@
'label': 'New'|t,
'attributes': {
'class': [
- 'text-bg-light',
+ 'text-bg-success',
],
},
}, with_context = false) }}
diff --git a/templates/system/page.html.twig b/templates/system/page.html.twig
index b13a1453..f21c8639 100644
--- a/templates/system/page.html.twig
+++ b/templates/system/page.html.twig
@@ -46,19 +46,19 @@
*/
#}
{% if page.navigation or page.navigation_collapsible %}
- {% if container == 'container' %}
- {% set header_gutter = 'gx-sm-4' %}
- {% elseif container == 'container-sm' %}
- {% set header_gutter = 'gx-sm-4' %}
- {% elseif container == 'container-md' %}
- {% set header_gutter = 'gx-md-4' %}
- {% elseif container == 'container-lg' %}
- {% set header_gutter = 'gx-lg-4' %}
- {% elseif container == 'container-xl' %}
- {% set header_gutter = 'gx-xl-4' %}
- {% elseif container == 'container-xxl' %}
- {% set header_gutter = 'gx-xxl-4' %}
- {% endif %}
+ {% if container == 'container' %}
+ {% set header_gutter = 'gx-sm-4' %}
+ {% elseif container == 'container-sm' %}
+ {% set header_gutter = 'gx-sm-4' %}
+ {% elseif container == 'container-md' %}
+ {% set header_gutter = 'gx-md-4' %}
+ {% elseif container == 'container-lg' %}
+ {% set header_gutter = 'gx-lg-4' %}
+ {% elseif container == 'container-xl' %}
+ {% set header_gutter = 'gx-xl-4' %}
+ {% elseif container == 'container-xxl' %}
+ {% set header_gutter = 'gx-xxl-4' %}
+ {% endif %}
<div class="{{ container }} gx-0 {{ header_gutter }} mb-3">
{{ include('ui_suite_bootstrap:navbar', {
attributes: {
diff --git a/ui_suite_bootstrap.api.php b/ui_suite_bootstrap.api.php
index 973e99ec..e805b742 100644
--- a/ui_suite_bootstrap.api.php
+++ b/ui_suite_bootstrap.api.php
@@ -22,7 +22,7 @@ declare(strict_types=1);
*
* @see \Drupal\ui_suite_bootstrap\Utility\Bootstrap::cssClassFromString()
*/
-function hook_ui_suite_bootstrap_colorize_text_alter(array &$texts) {
+function hook_ui_suite_bootstrap_colorize_text_alter(array &$texts): void {
// This matches the exact string: "My Unique Button Text".
// Note: the t() function in D8 returns a TranslatableMarkup object.
// It must be rendered to a string before it can be added as an array key.
@@ -48,7 +48,7 @@ function hook_ui_suite_bootstrap_colorize_text_alter(array &$texts) {
*
* @see \Drupal\ui_suite_bootstrap\Bootstrap::iconFromString()
*/
-function hook_ui_suite_bootstrap_iconize_text_alter(array &$texts) {
+function hook_ui_suite_bootstrap_iconize_text_alter(array &$texts): void {
// This matches the exact string: "My Unique Button Text".
// Note: the t() function in D8 returns a TranslatableMarkup object.
// It must be rendered to a string before it can be added as an array key.
diff --git a/ui_suite_bootstrap.info.yml b/ui_suite_bootstrap.info.yml
index 6df51bf3..13b276a5 100644
--- a/ui_suite_bootstrap.info.yml
+++ b/ui_suite_bootstrap.info.yml
@@ -28,6 +28,9 @@ libraries:
- ui_suite_bootstrap/component_placeholder
- ui_suite_bootstrap/form
+ckeditor5-stylesheets:
+ - assets/css/ckeditor5/ckeditor5-theme.css
+
libraries-override:
core/drupal.active-link:
js:
diff --git a/ui_suite_bootstrap.theme b/ui_suite_bootstrap.theme
index 88305f78..4f36bcb3 100644
--- a/ui_suite_bootstrap.theme
+++ b/ui_suite_bootstrap.theme
@@ -175,10 +175,6 @@ function ui_suite_bootstrap_preprocess_form_element(array &$variables): void {
* Implements hook_preprocess_HOOK() for 'html'.
*/
function ui_suite_bootstrap_preprocess_html(array &$variables): void {
- if (!\Drupal::moduleHandler()->moduleExists('ui_skins')) {
- return;
- }
-
/** @var \Drupal\ui_suite_bootstrap\UiSkins $instance */
$instance = \Drupal::service('class_resolver')
->getInstanceFromDefinition(UiSkins::class);
--
GitLab