From 913b79ee4c7f19a77299b6c3179ad288b9702969 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Thu, 23 Jan 2025 11:29:14 +0100
Subject: [PATCH] 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
---
 .../lib/uui-card-block-type.element.ts               |  2 ++
 .../uui-card-media/lib/uui-card-media.element.ts     |  1 -
 packages/uui-card/lib/uui-card.element.ts            |  2 ++
 .../lib/uui-combobox-list-option.element.ts          |  5 +++--
 packages/uui-css/lib/custom-properties.story.ts      |  2 +-
 packages/uui-css/lib/custom-properties/sizes.css     |  4 ++--
 packages/uui-css/lib/guidelines.story.ts             |  2 +-
 packages/uui-css/lib/uui-font.css                    |  2 +-
 packages/uui-css/lib/uui-text.css                    | 12 ++++++------
 packages/uui-select/lib/uui-select.element.ts        |  2 +-
 packages/uui-tabs/lib/uui-tab.element.ts             |  2 +-
 11 files changed, 20 insertions(+), 16 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
index d516d672b..fa86d8bd2 100644
--- 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
@@ -59,6 +59,7 @@ 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}>
@@ -71,6 +72,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)}
diff --git a/packages/uui-card-media/lib/uui-card-media.element.ts b/packages/uui-card-media/lib/uui-card-media.element.ts
index 09afbed47..265401907 100644
--- a/packages/uui-card-media/lib/uui-card-media.element.ts
+++ b/packages/uui-card-media/lib/uui-card-media.element.ts
@@ -202,7 +202,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
index 04b893d71..d54f7b806 100644
--- 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
index c05c141f5..02aa69e02 100644
--- 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
index 0e51d5d48..2e8e4237a 100644
--- 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
index b1879c193..7ced79b44 100644
--- 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
index b3770cb01..44830791f 100644
--- 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
index 4adaddfd3..26d36c3fb 100644
--- 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
index caf025f2c..46cfc4640 100644
--- 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,14 +136,14 @@
 .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;
@@ -150,7 +151,6 @@
   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
index 6b269defe..74b0b97df 100644
--- 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
index 346f2973a..150528a80 100644
--- 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,