Fix: remove bold from ref name (#973)

* remove bold from ref name

* adjust sizes and apperance for ref node

* correct fonts on cards

---------

Co-authored-by: Niels Lyngsø <niels.lyngso@gmail.com>

Author: madsrasmussen

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>
     `;
   }
@@ -219,8 +219,8 @@ export class UUICardMediaElement extends UUICardElement {
         opacity: 0.96;
       }
 
-      #name {
-        font-weight: 700;
+      #detail {
+        opacity: 0.6;
       }
 
       :host(

packages/uui-ref-node/lib/uui-ref-node.element.ts

@@ -104,7 +104,7 @@ export class UUIRefNodeElement extends UUIRefElement {
 
   #renderContent() {
     return html`
-      <span id="content">
+      <span id="content" class="uui-text">
         <span id="icon">
           <slot name="icon" @slotchange=${this.#onSlotIconChange}></slot>
           ${this._iconSlotHasContent === false
@@ -122,6 +122,7 @@ export class UUIRefNodeElement extends UUIRefElement {
   #renderLink() {
     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)}
@@ -140,6 +141,7 @@ export class UUIRefNodeElement extends UUIRefElement {
       <button
         type="button"
         id="open-part"
+        class="uui-text"
         tabindex="0"
         @click=${this.handleOpenClick}
         @keydown=${this.handleOpenKeydown}
@@ -190,12 +192,11 @@ export class UUIRefNodeElement extends UUIRefElement {
         cursor: pointer;
         display: flex;
         flex-grow: 1;
-        padding: calc(var(--uui-size-2));
+        padding: calc(var(--uui-size-3));
       }
 
       #icon {
         font-size: 1.2em;
-        margin-left: var(--uui-size-2);
         margin-right: var(--uui-size-1);
         display: flex;
         align-items: center;
@@ -211,12 +212,8 @@ export class UUIRefNodeElement extends UUIRefElement {
         padding-left: var(--uui-size-2);
       }
 
-      #name {
-        font-weight: 700;
-      }
-
       #detail {
-        font-size: var(--uui-type-small-size);
+        opacity: 0.6;
       }
 
       :host([selectable]) #open-part {