Merge branch 'v1/contrib' into feature/uui-copy

Author: nielslyngsoe

packages/uui-box/lib/uui-box.element.ts

@@ -131,6 +131,7 @@ export class UUIBoxElement extends LitElement {
 
       #header {
         display: flex;
+        align-items: center;
         column-gap: var(--uui-size-space-5);
         border-bottom: 1px solid var(--uui-color-divider-standalone);
         padding: var(

packages/uui-button/lib/uui-button.element.ts

@@ -293,9 +293,12 @@ export class UUIButtonElement extends UUIFormControlMixin(
 
       .label {
         line-height: normal; /** needed to reset 'a > span' */
-        display: block;
         transition: opacity 120ms;
+        display: flex;
+        gap: var(--uui-size-1);
+        align-items: center;
       }
+
       :host([state]:not([state=''])) .label {
         opacity: 0;
       }

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 {

packages/uui-card-content-node/lib/uui-card-content-node.element.ts

@@ -68,7 +68,7 @@ export class UUICardContentNodeElement extends UUICardElement {
 
   #renderContent() {
     return html`
-      <span id="content">
+      <span id="content" class="uui-text">
         <span id="item">
           <span id="icon">
             <slot name="icon" @slotchange=${this._onSlotIconChange}></slot>
@@ -167,7 +167,6 @@ export class UUICardContentNodeElement extends UUICardElement {
       #open-part {
         display: flex;
         position: relative;
-        font-weight: 700;
         align-items: center;
         cursor: pointer;
         flex-grow: 1;

packages/uui-card-media/lib/uui-card-media.element.ts

@@ -102,12 +102,12 @@ export class UUICardMediaElement extends UUICardElement {
 
   #renderContent() {
     return html`
-      <div id="content">
+      <div id="content" class="uui-text">
         <!--
         TODO: Implement info box when pop-out is ready
         -->
         <span id="name">${this.name}</span>
-        ${this.detail}<slot name="detail"></slot>
+        <small id="detail">${this.detail}<slot name="detail"></slot></small>
       </div>
     `;
   }
@@ -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;
@@ -219,8 +218,8 @@ export class UUICardMediaElement extends UUICardElement {
         opacity: 0.96;
       }
 
-      #name {
-        font-weight: 700;
+      #detail {
+        opacity: 0.6;
       }
 
       :host(

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;

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

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>

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

packages/uui-css/lib/guidelines.story.ts

@@ -116,7 +116,7 @@ export const Typography = () => html`
       class 'uui-lead' to a <p> 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>