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 20d12f746..1d20f1148 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 @@ -57,10 +57,12 @@ export class UUICardBlockTypeElement extends UUICardElement { return html` `; } @@ -69,6 +71,7 @@ export class UUICardBlockTypeElement extends UUICardElement { return html` - ${this.name}${this.description} + ${this.name} + ${this.description} `; } @@ -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 index 1643a8bf2..4a78aa4e8 100644 --- 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 index f1e61443f..02925c4cc 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` //
Headline H5
//
//

-// 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. //

//

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 <p> element.

- 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).

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,