From 42f5c518ca60991d829f564972c0d83af1c9eeca Mon Sep 17 00:00:00 2001 From: Valentino Giardino <77643678+valentinogiardino@users.noreply.github.com> Date: Wed, 21 Aug 2024 16:11:22 -0300 Subject: [PATCH] chore(design system): Fix block editor and dotai font sizes inconsistencies #28724 (#29684) ### Proposed Changes * Replace `font-size: $dot-editor-size` with `font-size: $font-size-md`. * Remove font-size definitions for `textarea`, `select`, `button`, and `input` elements in `dotai.css`, allowing them to inherit font-size from `dotcms.css`. ### Additional Information Adjustments to font-size within ProseMirror will be handled in a separate ticket if needed. ### Screenshots Original (words counter and reading time) | Updated :-------------------------:|:-------------------------: ![image](https://github.com/user-attachments/assets/20c9362a-13ad-4f80-9238-bcc4912936a1)|![image](https://github.com/user-attachments/assets/b0e864d6-72b6-47b6-9545-badb2b5741e7) Original (dotai) | Updated ![image](https://github.com/user-attachments/assets/cbcce6fe-8210-4596-9556-243372b343a0)|![image](https://github.com/user-attachments/assets/596a7a7e-7c2e-4743-916d-c028d02bcfa2) This PR fixes #28724 --- .../dot-editor-count-bar.component.scss | 2 +- .../bubble-link-form/bubble-link-form.component.scss | 4 ++-- .../components/suggestions/suggestions.component.scss | 2 +- core-web/libs/dotcms-scss/jsp/scss/dotcms.scss | 1 + .../dot-asset-card/dot-asset-card.component.scss | 2 +- .../src/main/webapp/html/css/dijit-dotcms/dotcms.css | 11 ++++++----- .../src/main/webapp/html/portlet/ext/dotai/dotai.css | 5 ----- 7 files changed, 12 insertions(+), 15 deletions(-) diff --git a/core-web/libs/block-editor/src/lib/components/dot-editor-count-bar/dot-editor-count-bar.component.scss b/core-web/libs/block-editor/src/lib/components/dot-editor-count-bar/dot-editor-count-bar.component.scss index 5b6bdce8b16f..6772dd4da96d 100644 --- a/core-web/libs/block-editor/src/lib/components/dot-editor-count-bar/dot-editor-count-bar.component.scss +++ b/core-web/libs/block-editor/src/lib/components/dot-editor-count-bar/dot-editor-count-bar.component.scss @@ -7,7 +7,7 @@ color: $color-palette-gray-500; margin-top: 1rem; gap: 0.65rem; - font-size: $dot-editor-size; + font-size: $font-size-md; .error-message { color: $error; diff --git a/core-web/libs/block-editor/src/lib/extensions/bubble-link-form/bubble-link-form.component.scss b/core-web/libs/block-editor/src/lib/extensions/bubble-link-form/bubble-link-form.component.scss index 010bac910415..bd7f94c166dd 100644 --- a/core-web/libs/block-editor/src/lib/extensions/bubble-link-form/bubble-link-form.component.scss +++ b/core-web/libs/block-editor/src/lib/extensions/bubble-link-form/bubble-link-form.component.scss @@ -38,7 +38,7 @@ .url-container { cursor: pointer; white-space: nowrap; - font-size: $dot-editor-size; + font-size: $font-size-md; width: 100%; word-wrap: normal; display: flex; @@ -52,7 +52,7 @@ display: flex; gap: 0.2 * $dot-editor-size; min-width: 100%; - font-size: $dot-editor-size; + font-size: $font-size-md; .checkbox-container { cursor: pointer; diff --git a/core-web/libs/block-editor/src/lib/shared/components/suggestions/suggestions.component.scss b/core-web/libs/block-editor/src/lib/shared/components/suggestions/suggestions.component.scss index 99fcf541e0b6..3470ed5c6572 100644 --- a/core-web/libs/block-editor/src/lib/shared/components/suggestions/suggestions.component.scss +++ b/core-web/libs/block-editor/src/lib/shared/components/suggestions/suggestions.component.scss @@ -11,7 +11,7 @@ h3 { text-transform: uppercase; - font-size: $dot-editor-size; + font-size: $font-size-md; margin: (0.5 * $dot-editor-size) $dot-editor-size; color: #999999; } diff --git a/core-web/libs/dotcms-scss/jsp/scss/dotcms.scss b/core-web/libs/dotcms-scss/jsp/scss/dotcms.scss index 414f14b6014a..dc4488c237a9 100644 --- a/core-web/libs/dotcms-scss/jsp/scss/dotcms.scss +++ b/core-web/libs/dotcms-scss/jsp/scss/dotcms.scss @@ -77,6 +77,7 @@ legend, input, button, textarea, +select, p, blockquote, th, diff --git a/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.scss b/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.scss index c17788c3ee61..aa8fcfebf904 100644 --- a/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.scss +++ b/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.scss @@ -47,7 +47,7 @@ .p-card-title { flex-grow: 1; h2 { - font-size: $dot-editor-size; + font-size: $font-size-md; line-height: 140%; margin: 0; overflow: hidden; diff --git a/dotCMS/src/main/webapp/html/css/dijit-dotcms/dotcms.css b/dotCMS/src/main/webapp/html/css/dijit-dotcms/dotcms.css index 32d5cde13d9b..348fa4439a37 100644 --- a/dotCMS/src/main/webapp/html/css/dijit-dotcms/dotcms.css +++ b/dotCMS/src/main/webapp/html/css/dijit-dotcms/dotcms.css @@ -3844,7 +3844,7 @@ color: #ffffff; line-height: 2.5rem; margin: 0; - font-size: 1.25rem; + font-size: 1rem; } .dijitDropDownActionButton .dijitButtonNode { height: 2.5rem; @@ -8829,7 +8829,7 @@ Styles for commons fields along the backend .lineDividerTitle { color: #6c7389; - font-size: 1.5rem; + font-size: 1.25rem; border-bottom: 1px solid #d1d4db; padding-bottom: 1rem; margin: 3rem 0 1.5rem; @@ -9358,7 +9358,7 @@ dd .buttonCaption { } .calendar-events .portlet-toolbar__info { flex: 1 0 auto; - font-size: 1.25rem; + font-size: 1rem; justify-content: center; } @@ -10141,7 +10141,7 @@ a.category_higlighted, a.tag_higlighted { .nameText { align-self: center; - font-size: 1.25rem; + font-size: 1rem; font-weight: normal; } @@ -10259,7 +10259,7 @@ a.category_higlighted, a.tag_higlighted { } .fullUserName { - font-size: 1.25rem; + font-size: 1rem; font-weight: bold; margin-bottom: 0.5rem; padding-bottom: 0; @@ -11234,6 +11234,7 @@ legend, input, button, textarea, +select, p, blockquote, th, diff --git a/dotCMS/src/main/webapp/html/portlet/ext/dotai/dotai.css b/dotCMS/src/main/webapp/html/portlet/ext/dotai/dotai.css index 245725df00e0..328cc019c88e 100644 --- a/dotCMS/src/main/webapp/html/portlet/ext/dotai/dotai.css +++ b/dotCMS/src/main/webapp/html/portlet/ext/dotai/dotai.css @@ -281,7 +281,6 @@ input[type="text"] { - font-size: 1rem; padding: 10px; margin-top: -10px; border-color: var(--color-palette-primary-op-20); @@ -298,7 +297,6 @@ input[type="text"]:focus { } input[type="number"] { - font-size: 1rem; padding: 10px; min-width: 100px; margin-top: -10px; @@ -337,7 +335,6 @@ input[type="radio"]:hover { } textarea { - font-size: 1rem; padding: 10px; margin-top: -10px; border-color: var(--color-palette-primary-op-20); @@ -353,7 +350,6 @@ textarea:focus { } select { - font-size: 1rem; padding: 10px; margin-top: -10px; border-color: var(--color-palette-primary-op-20); @@ -370,7 +366,6 @@ select:focus { } .button { - font-size: 1rem; padding: 20px 40px; border: 1px solid #9D9D9D; border-radius: .25em;