Skip to content

Commit

Permalink
chore(design system): Fix large font-sizes inconsistencies #28724 (#2…
Browse files Browse the repository at this point in the history 
…9611)

### Proposed Changes
* Replaced `lmd` with `md`
* Replaced `lg` with `lmd`
* Replaced `xl` with `lg`
* Replaced `xxl` with `xl`
* Replaced `xxxl` with `xxl`
* Corrected font-size in `dot-apps`
* Adjusted font-size for "show archive" label in templates and
containers portlets
* Updated `.cw-rule` font-size for rules portlet

### Additional Info
This PR fixes #28724. The previous pull request failed QA due to some
inconsistencies.

This PR includes missing replacements, specifically for font sizes
`$font-size-lmd`, `lg`, `xl`, `xxl`, and `xxxl`. The extensive changes
to files are due to these replacements. *Care was taken to avoid
modifying font sizes that were corrected in the previous PR*.

The replacement process followed this order to avoid collisions: `lmd`
to `md`, `lg` to `lmd`, `xl` to `lg`, `xxl` to `xl`, and `xxxl` to
`xxl`. Additionally, missing font size properties were added to portlets
where they were previously omitted, including in `dot-apps`, templates,
and containers portlets.

### Screenshots
Original (Header)            |  Updated
:-------------------------:|:-------------------------:
<img width="1728" alt="image"
src="https://github.com/user-attachments/assets/0bf2a535-f56f-4aac-b9c9-9195d1fda0ff">|<img
width="1722" alt="image"
src="https://github.com/user-attachments/assets/9c8056be-cbc5-4958-a915-492eaafe8aeb">
Original (show archive)|Updated
<img width="1728" alt="image"
src="https://github.com/user-attachments/assets/7750403f-51a8-4ca5-863d-a6e5ae02ea0b">|<img
width="1724" alt="image"
src="https://github.com/user-attachments/assets/7c9fb459-c2c8-4f67-9aaa-cdae981f7036">
Original  (apps cards)|Updated
<img width="1728" alt="image"
src="https://github.com/user-attachments/assets/37528738-fdff-498e-ac52-31e0051aa693">|<img
width="1728" alt="image"
src="https://github.com/user-attachments/assets/f5c78cb7-3fa6-4886-a416-50d719cf1dc4">
Original (apps detail)|Updated
<img width="1728" alt="image"
src="https://github.com/user-attachments/assets/e914e4ed-83f9-4231-bfd1-59767b58c9fa">|<img
width="1728" alt="image"
src="https://github.com/user-attachments/assets/ad921103-1706-410f-aa3b-a0dd78d420d0">
Original (apps form)|Updated
<img width="1728" alt="image"
src="https://github.com/user-attachments/assets/fe06dd42-0c44-4f8b-aa96-a8cbfd7d1c4f">|<img
width="1728" alt="image"
src="https://github.com/user-attachments/assets/74bfee34-e918-47cf-8630-21bf69ce4a6b">
Original (rules "evaluate")|Updated
<img width="1728" alt="image"
src="https://github.com/user-attachments/assets/a3fbf28c-6cf3-4c50-8bb8-dadf2dd8f9ec">|<img
width="1728" alt="image"
src="https://github.com/user-attachments/assets/c1d5ef38-e17e-46d2-a747-231ee4b192a5">
Original (overlaypanel titles)|Updated
<img width="1728" alt="image"
src="https://github.com/user-attachments/assets/640fb071-db51-45ed-acfd-3c444ee929c4">|<img
width="1728" alt="image"
src="https://github.com/user-attachments/assets/fdd90a5f-9dbb-49f1-a6c9-78682cf93598">
  • Loading branch information
@valentinogiardino
valentinogiardino authored Aug 16, 2024
1 parent adab97d commit 8f7cae3
Show file tree
Hide file tree
Showing 91 changed files with 123 additions and 118 deletions.
2 changes: 1 addition & 1 deletion core-web/apps/dotcdn/src/app/app.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ h1 {

.dot-cdn__tab-content-label {
margin: 0;
font-size: $font-size-lg;
font-size: $font-size-lmd;
}

.dot-cdn__tab-content__row:first-child {
Expand Down
4 changes: 2 additions & 2 deletions ...tail/dot-apps-configuration-detail-form/dot-apps-configuration-detail-form.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@

input,
textarea {
font-size: $font-size-lg;
font-size: $font-size-lmd;
width: 100%;
}

Expand All @@ -52,7 +52,7 @@
}

p-checkbox label {
font-size: $font-size-lg;
font-size: $font-size-lmd;
}

p-checkbox.required label:before,
Expand Down
3 changes: 2 additions & 1 deletion ...tlets/dot-apps/dot-apps-configuration-detail/dot-apps-configuration-detail.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
color: $black;
display: flex;
justify-content: space-between;
font-size: $font-size-lg;
font-size: $font-size-lmd;
font-weight: $font-weight-semi-bold;
padding: $spacing-3;

Expand All @@ -49,4 +49,5 @@
flex-direction: column;
overflow-y: auto;
width: 100%;
font-size: $font-size-md;
}
6 changes: 3 additions & 3 deletions ...tlets/dot-apps/dot-apps-configuration-header/dot-apps-configuration-header.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,15 @@
color: $black;
cursor: pointer;
display: inline-block;
font-size: $font-size-xxl;
font-size: $font-size-xl;
font-weight: bold;
margin: 0;
}

.dot-apps-configuration__service-key {
color: $color-palette-gray-700;
display: inline-block;
font-size: $font-size-lg;
font-size: $font-size-lmd;
margin-left: $spacing-3;
display: flex;
align-items: center;
Expand Down Expand Up @@ -71,7 +71,7 @@
.dot-apps-configuration__description__link_show-more {
background-color: $white;
cursor: pointer;
font-size: $font-size-lg;
font-size: $font-size-lmd;
padding-left: $spacing-1;
position: absolute;
bottom: 0;
Expand Down
5 changes: 3 additions & 2 deletions ...ui/src/app/portlets/dot-apps/dot-apps-configuration/dot-apps-configuration.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,12 @@
}

.dot-apps-configuration__add-configurations-title {
font-size: $font-size-xxl;
font-size: $font-size-xl;
font-weight: bold;
}

.dot-apps-configuration__add-configurations-description {
font-size: $font-size-lg;
font-size: $font-size-lmd;
margin-bottom: $spacing-9;
margin-top: $spacing-4;
}
Expand All @@ -54,4 +54,5 @@
box-shadow: $shadow-m;
overflow-y: auto;
width: 100%;
font-size: $font-size-md;
}
2 changes: 1 addition & 1 deletion ...cms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-card/dot-apps-card.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ p-avatar {
color: $black;
display: block;
flex: 1;
font-size: $font-size-lg;
font-size: $font-size-lmd;
font-weight: bold;
text-overflow: ellipsis;
transition: color $basic-speed ease;
Expand Down
1 change: 1 addition & 0 deletions core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-list.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,4 +59,5 @@
background-color: $white;
box-shadow: $shadow-m;
padding-top: $spacing-4;
font-size: $font-size-md;
}
2 changes: 1 addition & 1 deletion ...ui/src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,6 @@ dot-portlet-base {
display: flex;
justify-content: center;
font-size: $spacing-9;
font-size: $font-size-xxl;
font-size: $font-size-xl;
}
}
2 changes: 1 addition & 1 deletion ...ps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,6 @@ dot-content-type-selector {
.listing-datatable__empty {
display: flex;
justify-content: center;
font-size: $font-size-xxl;
font-size: $font-size-xl;
margin-top: $spacing-4;
}
2 changes: 1 addition & 1 deletion ...ers/dot-container-create/dot-container-properties/dot-container-properties.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
.dot-container-properties__title-text {
display: inline-block;
padding-right: $spacing-2;
font-size: $font-size-lg;
font-size: $font-size-lmd;
}

.dot-container-properties__max-contents-input {
Expand Down
2 changes: 1 addition & 1 deletion ...pp/portlets/dot-edit-page/components/dot-edit-page-info/dot-edit-page-info.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,6 @@ h2 {
margin: 0 $spacing-3 0 0;
align-self: center;
color: $font-color-base;
font-size: $font-size-xxl;
font-size: $font-size-xl;
font-weight: normal;
}
2 changes: 1 addition & 1 deletion ...tlets/dot-edit-page/content/components/dot-whats-changed/dot-whats-changed.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,6 @@
.whats-changed__empty-state {
text-align: center;
margin-top: $spacing-9;
font-size: $font-size-xxl;
font-size: $font-size-xl;
}
}
2 changes: 1 addition & 1 deletion ...dot-edit-page/seo/components/dot-edit-page-info-seo/dot-edit-page-info-seo.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,6 @@ h2 {
margin: 0 $spacing-3 0 0;
align-self: center;
color: $font-color-base;
font-size: $font-size-xxl;
font-size: $font-size-xl;
font-weight: normal;
}
2 changes: 1 addition & 1 deletion ...c/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-favorite-panel.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@

i.pi {
color: $color-palette-primary;
font-size: $font-size-xxl;
font-size: $font-size-xl;
margin-bottom: $spacing-3;
}
}
Expand Down
14 changes: 7 additions & 7 deletions core-web/apps/dotcms-ui/src/app/portlets/dot-starter/dot-starter.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ $number-link-icon-size: 2.28rem;

.dot-starter-title {
color: $black;
font-size: $font-size-xl;
font-size: $font-size-lg;
margin: $spacing-5 $spacing-3 $spacing-1;
}

Expand Down Expand Up @@ -107,7 +107,7 @@ $number-link-icon-size: 2.28rem;

h4 {
color: $black;
font-size: $font-size-lg;
font-size: $font-size-lmd;
font-weight: $font-weight-semi-bold;
margin: 0;
}
Expand All @@ -123,13 +123,13 @@ $number-link-icon-size: 2.28rem;

i {
color: $color-palette-gray-500;
font-size: $font-size-xl;
font-size: $font-size-lg;
margin-right: $spacing-3;
}
}

.dot-starter-top-main__title {
font-size: $font-size-lg;
font-size: $font-size-lmd;
font-weight: $font-weight-semi-bold;
margin: 0;
border-bottom: 1px solid $color-palette-gray-300;
Expand Down Expand Up @@ -166,7 +166,7 @@ $number-link-icon-size: 2.28rem;

h4 {
color: $black;
font-size: $font-size-lg;
font-size: $font-size-lmd;
margin: 0;
}
p {
Expand All @@ -180,7 +180,7 @@ $number-link-icon-size: 2.28rem;

h4 {
color: $color-palette-primary;
font-size: $font-size-lg;
font-size: $font-size-lmd;
font-weight: 500;
margin: 0;
padding-bottom: $spacing-1;
Expand Down Expand Up @@ -228,7 +228,7 @@ $number-link-icon-size: 2.28rem;

h4 {
color: $black;
font-size: $font-size-lg;
font-size: $font-size-lmd;
margin: 0;
}
p {
Expand Down
4 changes: 2 additions & 2 deletions ...-edit/components/dot-convert-wysiwyg-to-block/dot-convert-wysiwyg-to-block.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@
}

h3 {
font-size: $font-size-xl;
font-size: $font-size-lg;
margin: $spacing-2 0;
}

h4 {
font-size: $font-size-lg;
font-size: $font-size-lmd;
margin: $spacing-2 0;
}

Expand Down
2 changes: 1 addition & 1 deletion .../components/fields/content-type-fields-add-row/content-type-fields-add-row.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ $row-height: 70px;
position: relative;

.dot-add-rows-columns-list__title {
font-size: $font-size-lg;
font-size: $font-size-lmd;
}

p-button {
Expand Down
4 changes: 2 additions & 2 deletions ...tlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ $top-height: ($toolbar-height + $tabview-nav-height + $dot-secondary-toolbar-mai
}

.content-type__title {
font-size: $font-size-lg;
font-size: $font-size-lmd;
display: flex;
flex-flow: column wrap;

Expand Down Expand Up @@ -145,7 +145,7 @@ $top-height: ($toolbar-height + $tabview-nav-height + $dot-secondary-toolbar-mai
}

.content-type__dot-separator {
font-size: $font-size-xl;
font-size: $font-size-lg;
margin: 0 4px;
vertical-align: middle;
}
Expand Down
4 changes: 2 additions & 2 deletions .../src/app/view/components/_common/dot-bulk-information/dot-bulk-information.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

.bulk-information__success-message {
color: $color-palette-gray-700;
font-size: $font-size-lg;
font-size: $font-size-lmd;
text-align: center;
padding-top: $spacing-3;
padding-bottom: $spacing-5;
Expand Down Expand Up @@ -40,7 +40,7 @@
}
h5 {
padding-bottom: $spacing-1;
font-size: $font-size-lg;
font-size: $font-size-lmd;
}
padding: $spacing-3;
box-shadow: $shadow-xs;
Expand Down
2 changes: 1 addition & 1 deletion .../dotcms-ui/src/app/view/components/_common/dot-empty-state/dot-empty-state.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
}

h3 {
font-size: $font-size-xl;
font-size: $font-size-lg;
margin: $spacing-3 0 $spacing-2 0;
font-weight: $font-weight-semi-bold;
}
Expand Down
2 changes: 1 addition & 1 deletion ...mponents/_common/dot-generate-secure-password/dot-generate-secure-password.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
border: 0;
background-color: transparent;
color: $black;
font-size: $font-size-xl;
font-size: $font-size-lg;
font-weight: bold;
text-align: center;
}
Expand Down
6 changes: 3 additions & 3 deletions .../src/app/view/components/_common/dot-md-icon-selector/dot-md-icon-selector.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ dot-material-icon-picker {
}

.dot-material-icon__preview {
font-size: $font-size-xl;
font-size: $font-size-lg;
}

.dot-material-icon__button {
Expand All @@ -43,7 +43,7 @@ dot-material-icon-picker {
justify-content: center;

mwc-icon {
font-size: $font-size-xl;
font-size: $font-size-lg;
width: $field-height-md;
}
}
Expand All @@ -69,7 +69,7 @@ dot-material-icon-picker {
}

mwc-icon {
font-size: $font-size-lg;
font-size: $font-size-lmd;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion ...cms-ui/src/app/view/components/_common/dot-site-selector/dot-site-selector.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@import "mixins";

.site-selector__title {
font-size: $font-size-lg;
font-size: $font-size-lmd;
}

.site-selector__modal {
Expand Down
6 changes: 3 additions & 3 deletions core-web/apps/dotcms-ui/src/app/view/components/dot-crumbtrail/dot-crumbtrail.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@
:host ::ng-deep .p-breadcrumb {
ul li {
&:first-child {
font-size: $font-size-lg;
font-size: $font-size-lmd;
a span.p-menuitem-text {
color: $black;
font-size: $font-size-lg;
font-size: $font-size-lmd;
font-weight: $font-weight-regular-bold;
}
}

.p-menuitem-link[href] {
.p-menuitem-text {
font-size: $font-size-lg;
font-size: $font-size-lmd;
}
}

Expand Down
2 changes: 1 addition & 1 deletion ...layout-designer/components/dot-edit-layout-sidebar/dot-edit-layout-sidebar.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ h6 {
align-items: center;
background-color: $color-palette-gray-200;
display: flex;
font-size: $font-size-lg;
font-size: $font-size-lmd;
font-weight: normal;
height: 48px;
margin: 0;
Expand Down
2 changes: 1 addition & 1 deletion ...ot-edit-layout-designer/components/dot-layout-designer/dot-layout-designer.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
color: $color-palette-gray-700;
display: flex;
flex-shrink: 0;
font-size: $font-size-xxl;
font-size: $font-size-xl;
justify-content: center;
}

Expand Down
Loading

0 comments on commit 8f7cae3

Please sign in to comment.