Improvement: Set Font size 14, as we do in Backoffice (#995)

* change base font size to 14px * fix card font sizes * general font size * just inherit * make more room in combo box list options
umbraco · Jan 23, 2025 · 9ef7f28 · 9ef7f28
1 parent e71ed10
commit 9ef7f28
Show file tree

Hide file tree

Showing 11 changed files with 25 additions and 20 deletions.
diff --git a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
@@ -57,10 +57,12 @@ export class UUICardBlockTypeElement extends UUICardElement {
     return html`
       <button
         id="open-part"
+        class="uui-text"
         tabindex=${this.disabled ? (nothing as any) : '0'}
         @click=${this.handleOpenClick}
         @keydown=${this.handleOpenKeydown}>
-        <strong>${this.name}</strong><small>${this.description}</small>
+        <span id="name">${this.name}</span>
+        <small>${this.description}</small>
       </button>
     `;
   }
@@ -69,6 +71,7 @@ export class UUICardBlockTypeElement extends UUICardElement {
     return html`
       <a
         id="open-part"
+        class="uui-text"
         tabindex=${this.disabled ? (nothing as any) : '0'}
         href=${ifDefined(!this.disabled ? this.href : undefined)}
         target=${ifDefined(this.target || undefined)}
@@ -78,7 +81,8 @@ export class UUICardBlockTypeElement extends UUICardElement {
               this.target === '_blank' ? 'noopener noreferrer' : undefined,
             ),
         )}>
-        <strong>${this.name}</strong><small>${this.description}</small>
+        <span id="name">${this.name}</span>
+        <small>${this.description}</small>
       </a>
     `;
   }
@@ -121,12 +125,11 @@ export class UUICardBlockTypeElement extends UUICardElement {
         border-top: 1px solid var(--uui-color-divider);
         border-radius: 0 0 var(--uui-border-radius) var(--uui-border-radius);
         font-family: inherit;
-        font-size: var(--uui-type-small-size);
         box-sizing: border-box;
         padding: var(--uui-size-2) var(--uui-size-4);
         display: flex;
         flex-direction: column;
-        line-height: var(--uui-size-6);
+        line-height: normal;
       }
 
       :host([disabled]) #open-part {

diff --git a/packages/uui-card-media/lib/uui-card-media.element.ts b/packages/uui-card-media/lib/uui-card-media.element.ts
@@ -200,7 +200,6 @@ export class UUICardMediaElement extends UUICardElement {
         width: 100%;
         align-items: center;
         font-family: inherit;
-        font-size: var(--uui-type-small-size);
         box-sizing: border-box;
         text-align: left;
         word-break: break-word;

diff --git a/packages/uui-card/lib/uui-card.element.ts b/packages/uui-card/lib/uui-card.element.ts
@@ -3,6 +3,7 @@ import {
   SelectOnlyMixin,
 } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
@@ -87,6 +88,7 @@ export class UUICardElement extends SelectOnlyMixin(
   }
 
   static styles = [
+    UUITextStyles,
     css`
       :host {
         position: relative;

diff --git a/packages/uui-combobox-list/lib/uui-combobox-list-option.element.ts b/packages/uui-combobox-list/lib/uui-combobox-list-option.element.ts
@@ -85,11 +85,12 @@ export class UUIComboboxListOptionElement extends SelectableMixin(
       :host {
         position: relative;
         cursor: pointer;
-        margin: 0 4px;
+        margin: 1px var(--uui-size-2);
         border-radius: var(--uui-border-radius);
         outline: 2px solid transparent;
         outline-offset: -2px;
-        padding-left: 4px;
+        padding: var(--uui-size-1);
+        padding-left: var(--uui-size-2);
       }
 
       :host(:first-child) {

diff --git a/packages/uui-css/lib/custom-properties.story.ts b/packages/uui-css/lib/custom-properties.story.ts
@@ -488,7 +488,7 @@ export const Sizing = () => html`
 //     <h5>Headline H5</h5>
 //     <br />
 //     <p>
-//       The default font-size is 15px, for a nice reading experience this conforms
+//       The default font-size is 14px, for a nice reading experience this conforms
 //       well with a line-height of 24px, which is our base-unit times 4.
 //     </p>
 //     <p>

diff --git a/packages/uui-css/lib/custom-properties/sizes.css b/packages/uui-css/lib/custom-properties/sizes.css
@@ -53,8 +53,8 @@
   --uui-border-radius: var(--uui-size-1);
 
   /** Typography */
-  --uui-type-default-size: var(--uui-size-5);
-  --uui-type-small-size: var(--uui-size-4);
+  --uui-type-default-size: 14px;
+  --uui-type-small-size: 12px;
   --uui-type-h1-size: 60px; /*--uui-size-20*/
   --uui-type-h2-size: 42px; /*--uui-size-14*/
   --uui-type-h3-size: 30px; /*--uui-size-10*/

diff --git a/packages/uui-css/lib/guidelines.story.ts b/packages/uui-css/lib/guidelines.story.ts
@@ -116,7 +116,7 @@ export const Typography = () => html`
       class 'uui-lead' to a &#60;p&#62; element.
     </p>
     <p>
-      The default font-size is 15px, for a nice reading experience this conforms
+      The default font-size is 14px, for a nice reading experience this conforms
       well with a line-height of 24px, (base-unit * 4).
     </p>
 

diff --git a/packages/uui-css/lib/uui-font.css b/packages/uui-css/lib/uui-font.css
@@ -2,7 +2,7 @@
 
 .uui-font {
   font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-size: 15px;
+  font-size: 14px;
   line-height: calc(var(--uui-size-2) * 4);
   -webkit-font-smoothing: antialiased;
 }
diff --git a/packages/uui-css/lib/uui-text.css b/packages/uui-css/lib/uui-text.css
@@ -12,8 +12,8 @@
 .uui-ol,
 .uui-text {
   font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-size: 15px;
-  line-height: calc(var(--uui-size-2) * 4);
+  font-size: 14px;
+  line-height: 21px;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -114,6 +114,7 @@
 .uui-p-lead,
 .uui-text p.uui-lead {
   font-size: var(--uui-size-6);
+  line-height: var(--uui-size-8);
 }
 
 .uui-a,
@@ -135,22 +136,21 @@
 .uui-text small {
   display: inline-block;
   font-size: var(--uui-type-small-size);
-  line-height: calc(var(--uui-size-2) * 3);
-  margin-bottom: var(--uui-size-layout-1);
+  line-height: 18px;
 }
 
 .uui-quoteblock,
 .uui-text blockquote {
   float: right;
-  font-size: 15px;
+  font-size: 14px;
+  line-height: inherit;
   font-weight: 700;
   font-style: italic;
   margin-top: 0;
   margin-bottom: var(--uui-size-layout-1);
   margin-right: -0.035em;
   max-width: 16em;
   quotes: '“' '”' '‘' '’';
-  line-height: inherit;
 }
 
 .uui-quoteblock:before,

diff --git a/packages/uui-select/lib/uui-select.element.ts b/packages/uui-select/lib/uui-select.element.ts
@@ -280,7 +280,7 @@ export class UUISelectElement extends UUIFormControlMixin(LitElement, '') {
       #native {
         display: inline-block;
         font-family: inherit;
-        font-size: var(--uui-select-font-size, var(--uui-size-5));
+        font-size: var(--uui-select-font-size, inherit);
         height: var(--uui-select-height, var(--uui-size-11));
         padding: var(--uui-select-padding-y, var(--uui-size-1))
           var(--uui-select-padding-x, var(--uui-size-2));

diff --git a/packages/uui-tabs/lib/uui-tab.element.ts b/packages/uui-tabs/lib/uui-tab.element.ts
@@ -182,7 +182,7 @@ export class UUITabElement extends ActiveMixin(LabelMixin('', LitElement)) {
         right: auto;
         border-radius: var(--uui-border-radius) var(--uui-border-radius) 0 0;
         height: 0px;
-        width: calc(100% - 15px);
+        width: calc(100% - 14px);
         bottom: 0;
         transition:
           opacity linear 120ms,