kirbydesign · jakobe · Dec 10, 2024 · Dec 6, 2024 · Dec 6, 2024 · Dec 6, 2024
diff --git a/apps/cookbook/src/app/examples/accordion-example/examples/card-list.ts b/apps/cookbook/src/app/examples/accordion-example/examples/card-list.ts
@@ -9,12 +9,12 @@ const config = {
       <kirby-list [items]="itemsFullList.slice(0,4)">
         <kirby-item *kirbyListItemTemplate="let item">
           <kirby-label>
-            <h3>{{item.title}}</h3>
-            <p subtitle>{{item.subTitle}}</p>
+            <p class="kirby-item-title">{{item.title}}</p>
+            <p class="kirby-item-subtitle">{{item.subTitle}}</p>
           </kirby-label>
           <kirby-label slot="end">
             <data [value]="item.amount">{{item.amount}}</data>
-            <data [value]="item.detail" detail>{{item.detail}}</data>
+            <data [value]="item.detail" class="kirby-item-detail">{{item.detail}}</data>
           </kirby-label>
         </kirby-item>
       </kirby-list>
@@ -23,12 +23,12 @@ const config = {
       <kirby-list [items]="itemsFullList.slice(4,7)">
         <kirby-item *kirbyListItemTemplate="let item">
           <kirby-label>
-            <h3>{{item.title}}</h3>
-            <p subtitle>{{item.subTitle}}</p>
+            <p class="kirby-item-title">{{item.title}}</p>
+            <p class="kirby-item-subtitle">{{item.subTitle}}</p>
           </kirby-label>
           <kirby-label slot="end">
             <data [value]="item.amount">{{item.amount}}</data>
-            <data [value]="item.detail" detail>{{item.detail}}</data>
+            <data [value]="item.detail" class="kirby-item-detail">{{item.detail}}</data>
           </kirby-label>
         </kirby-item>
       </kirby-list>

diff --git a/apps/cookbook/src/app/examples/accordion-example/examples/list.ts b/apps/cookbook/src/app/examples/accordion-example/examples/list.ts
@@ -8,12 +8,12 @@ const config = {
     <kirby-list [items]="itemsFullList.slice(0,4)">
       <kirby-item *kirbyListItemTemplate="let item">
         <kirby-label>
-          <h3>{{item.title}}</h3>
-          <p subtitle>{{item.subTitle}}</p>
+          <p class="kirby-item-title">{{item.title}}</p>
+          <p class="kirby-item-subtitle">{{item.subTitle}}</p>
         </kirby-label>
         <kirby-label slot="end">
           <data [value]="item.amount">{{item.amount}}</data>
-          <data [value]="item.detail" detail>{{item.detail}}</data>
+          <data [value]="item.detail" class="kirby-item-detail">{{item.detail}}</data>
         </kirby-label>
       </kirby-item>
     </kirby-list>
@@ -22,12 +22,12 @@ const config = {
     <kirby-list [items]="itemsFullList.slice(4,7)">
       <kirby-item *kirbyListItemTemplate="let item">
         <kirby-label>
-          <h3>{{item.title}}</h3>
-          <p subtitle>{{item.subTitle}}</p>
+          <p class="kirby-item-title">{{item.title}}</p>
+          <p class="kirby-item-subtitle">{{item.subTitle}}</p>
         </kirby-label>
         <kirby-label slot="end">
           <data [value]="item.amount">{{item.amount}}</data>
-          <data [value]="item.detail" detail>{{item.detail}}</data>
+          <data [value]="item.detail" class="kirby-item-detail">{{item.detail}}</data>
         </kirby-label>
       </kirby-item>
     </kirby-list>

diff --git a/apps/cookbook/src/app/examples/card-example/examples/disclosure.ts b/apps/cookbook/src/app/examples/card-example/examples/disclosure.ts
@@ -6,7 +6,7 @@ const config = {
   template: `<kirby-card [hasPadding]="true" (click)="noop()">
   <kirby-card-header [hasPadding]="false">
     <kirby-item [disclosure]="'arrow-more'">
-      <h3 class="kirby-text-bold">Item disclosure in header</h3>
+      <p class="kirby-text-normal-bold">Item disclosure in header</p>
     </kirby-item>
   </kirby-card-header>
 

diff --git a/apps/cookbook/src/app/examples/dropdown-example/examples/custom-item-template.ts b/apps/cookbook/src/app/examples/dropdown-example/examples/custom-item-template.ts
@@ -15,12 +15,12 @@ const config = {
   >
     <kirby-icon *ngIf="selected" name="checkmark-selected" slot="start"></kirby-icon>
     <kirby-label>
-      <h3>{{ item.title }}</h3>
-      <p detail>{{ item.subtitle }}</p>
+      <p class="kirby-item-title">{{ item.title }}</p>
+      <p class="kirby-item-detail">{{ item.subtitle }}</p>
     </kirby-label>
     <kirby-label slot="end">
       <data>Value</data>
-      <data detail>{{ item.value }}</data>
+      <data class="kirby-item-detail">{{ item.value }}</data>
     </kirby-label>
   </kirby-item>
 </kirby-dropdown>

diff --git a/apps/cookbook/src/app/examples/fonts-example/fonts-example.component.html b/apps/cookbook/src/app/examples/fonts-example/fonts-example.component.html
@@ -1,8 +1,21 @@
+<h1 class="kirby-text-display-1">Display 1</h1>
+<h2 class="kirby-text-display-2">Display 2</h2>
+<h3 class="kirby-text-display-3">Display 3</h3>
+
 <h1>Heading 1</h1>
 <h2>Heading 2</h2>
+<h3>Heading 3</h3>
+<h4>Heading 4</h4>
+<!-- Paragraphs that are visually the same as headings: -->
+<p class="kirby-text-xlarge">kirby-text-xlarge (Heading 1)</p>
+<p class="kirby-text-large">kirby-text-large (Heading 2)</p>
+<p class="kirby-text-medium">kirby-text-medium (Heading 3)</p>
+<p class="kirby-text-normal-bold">kirby-text-normal-bold (Heading 4)</p>
 
-<p class="kirby-text-large">Kirby-text-large</p>
-
-<p class="kirby-text-xsmall">xsmall text</p>
+<p class="kirby-text-bold">Bold text (kirby-text-bold)</p>
+<p>p - Paragraph (default body font)</p>
 
-<p class="kirby-text-xxsmall">xxsmall text</p>
+<p class="kirby-text-small">kirby-text-small</p>
+<p class="kirby-text-small-light">kirby-text-small-light</p>
+<p class="kirby-text-xsmall">kirby-text-xsmall</p>
+<p class="kirby-text-xxsmall">kirby-text-xxsmall</p>
@@ -0,0 +1,14 @@
+@use '@kirbydesign/core/src/scss/utils';
+
+:host {
+  display: block;
+  height: 100%;
+  overflow-x: hidden;
+  background: utils.get-color('background-color');
+  padding: utils.size('s');
+  box-sizing: border-box;
+
+  @include utils.media('>=medium') {
+    padding: utils.size('l');
+  }
+}
diff --git a/apps/cookbook/src/app/examples/fonts-example/fonts-example.component.ts b/apps/cookbook/src/app/examples/fonts-example/fonts-example.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'cookbook-fonts-example',
+  styleUrls: ['./fonts-example.component.scss'],
   templateUrl: './fonts-example.component.html',
 })
 export class FontsExampleComponent {}
diff --git a/apps/cookbook/src/app/examples/item-example/examples/attachment.ts b/apps/cookbook/src/app/examples/item-example/examples/attachment.ts
@@ -6,7 +6,7 @@ const config = {
   <kirby-avatar slot="start" size="xs">
     <kirby-icon name="camera"></kirby-icon>
   </kirby-avatar>
-  <h3>Attach image</h3>
+  <p class="kirby-item-title">Attach image</p>
 </kirby-item>`,
 };
 

diff --git a/apps/cookbook/src/app/examples/item-example/examples/avatar/date.ts b/apps/cookbook/src/app/examples/item-example/examples/avatar/date.ts
@@ -7,8 +7,8 @@ const config = {
     <kirby-icon name="moneybag"></kirby-icon>
   </kirby-avatar>
   <kirby-label>
-    <h3>Title</h3>
-    <time detail>10.04.2020</time>
+    <p class="kirby-item-title">Title</p>
+    <time class="kirby-item-detail">10.04.2020</time>
   </kirby-label>
   <data slot="end" value="-849.00">-849,00</data>
 </kirby-item>`,

diff --git a/apps/cookbook/src/app/examples/item-example/examples/avatar/default.ts b/apps/cookbook/src/app/examples/item-example/examples/avatar/default.ts
@@ -6,7 +6,7 @@ const config = {
   <kirby-avatar overlay="true" slot="start">
     <kirby-icon name="moneybag"></kirby-icon>
   </kirby-avatar>
-  <h3>Title</h3>
+  <p class="kirby-item-title">Title</p>
   <data slot="end" value="-849.00">-849,00</data>
 </kirby-item>`,
 };

diff --git a/apps/cookbook/src/app/examples/item-example/examples/avatar/flagged-three-lines.ts b/apps/cookbook/src/app/examples/item-example/examples/avatar/flagged-three-lines.ts
@@ -11,9 +11,9 @@ const config = {
     <kirby-icon name="moneybag"></kirby-icon>
   </kirby-avatar>
   <kirby-label>
-    <h3>Jake The Snake Insurance</h3>
-    <p subtitle>Basic Insurance</p>
-    <p detail>Account - Budget Account</p>
+    <p class="kirby-item-title">Jake The Snake Insurance</p>
+    <p class="kirby-item-subtitle">Basic Insurance</p>
+    <p class="kirby-item-detail">Account - Budget Account</p>
   </kirby-label>
   <data slot="end" class="kirby-text-bold" value="value">Value</data>
 </kirby-item>`,

diff --git a/apps/cookbook/src/app/examples/item-example/examples/avatar/flagged.ts b/apps/cookbook/src/app/examples/item-example/examples/avatar/flagged.ts
@@ -14,8 +14,8 @@ const config = {
     </kirby-badge>
   </kirby-avatar>
   <kirby-label>
-    <h3>Lorem ipsum quam notem andamus gepulowitzh onga bonga bimmelon sid est insula</h3>
-    <p detail>Phone, Internet, Streaming services og other</p>
+    <p class="kirby-item-title">Lorem ipsum quam notem andamus gepulowitzh onga bonga bimmelon sid est insula</p>
+    <p class="kirby-item-detail">Phone, Internet, Streaming services og other</p>
   </kirby-label>
   <kirby-flag slot="end" themeColor="success">
     <data value="300.00">EUR 300,00</data>

diff --git a/apps/cookbook/src/app/examples/item-example/examples/button.ts b/apps/cookbook/src/app/examples/item-example/examples/button.ts
@@ -4,8 +4,8 @@ const config = {
   selector: 'cookbook-item-example-button',
   template: `<kirby-item>
   <kirby-label>
-    <h3>Title</h3>
-    <p detail>Detail</p>
+    <p class="kirby-item-title">Title</p>
+    <p class="kirby-item-detail">Detail</p>
   </kirby-label>
   <button slot="end" kirby-button size="sm">Small Button</button>
 </kirby-item>`,

diff --git a/apps/cookbook/src/app/examples/item-example/examples/card.ts b/apps/cookbook/src/app/examples/item-example/examples/card.ts
@@ -4,7 +4,7 @@ const config = {
   selector: 'cookbook-item-example-card',
   template: `<kirby-card>
   <kirby-item selectable="true">
-    <h3>Title</h3>
+    <p class="kirby-item-title">Title</p>
     <kirby-toggle slot="end"></kirby-toggle>
   </kirby-item>
 </kirby-card>`,

diff --git a/apps/cookbook/src/app/examples/item-example/examples/disclosure-animation.ts b/apps/cookbook/src/app/examples/item-example/examples/disclosure-animation.ts
@@ -6,7 +6,7 @@ const config = {
   template: `<kirby-card [hasPadding]="true" (click)="isExpanded = !isExpanded">
   <kirby-card-header [hasPadding]="false">
     <kirby-item disclosure="arrow-down" [rotateIcon]="isExpanded">
-      <h3 class="kirby-text-bold">Disclosure animation example</h3>
+      <p class="kirby-text-normal-bold">Disclosure animation example</p>
     </kirby-item>
   </kirby-card-header>
 

diff --git a/apps/cookbook/src/app/examples/item-example/examples/disclosure.ts b/apps/cookbook/src/app/examples/item-example/examples/disclosure.ts
@@ -6,7 +6,7 @@ const config = {
     <kirby-avatar overlay="true" slot="start">
         <kirby-icon name="moneybag"></kirby-icon>
     </kirby-avatar>
-  <h3>Title</h3>
+  <p class="kirby-item-title">Title</p>
     <kirby-flag slot="end" themeColor="success">
         <data value="60.0">60</data>
     </kirby-flag>

diff --git a/apps/cookbook/src/app/examples/item-example/examples/fab-menu.ts b/apps/cookbook/src/app/examples/item-example/examples/fab-menu.ts
@@ -4,7 +4,7 @@ const config = {
   selector: 'cookbook-item-example-fab-menu',
   template: `<kirby-item>
   <kirby-avatar slot="start" imageSrc="/assets/images/woman.png"></kirby-avatar>
-  <h3>Line Maria Sørensen</h3>
+  <p class="kirby-item-title">Line Maria Sørensen</p>
 </kirby-item>`,
 };
 

diff --git a/apps/cookbook/src/app/examples/item-example/examples/flagged.ts b/apps/cookbook/src/app/examples/item-example/examples/flagged.ts
@@ -8,8 +8,8 @@ const config = {
     <kirby-badge themeColor="warning" size="sm"></kirby-badge>
   </div>
   <kirby-label>
-    <h3 class="kirby-text-bold">Title</h3>
-    <p detail>Detail</p>
+    <p class="kirby-text-normal-bold">Title</p>
+    <p class="kirby-item-detail">Detail</p>
   </kirby-label>
   <kirby-flag slot="end" themeColor="success">
     <data value="60.0">60</data>

diff --git a/apps/cookbook/src/app/examples/item-example/examples/horizontal.ts b/apps/cookbook/src/app/examples/item-example/examples/horizontal.ts
@@ -10,8 +10,8 @@ const config = {
   </kirby-avatar>
   <kirby-label>
     <kirby-label direction="horizontal">
-      <h3>Lorem ipsum quam notem andamus gepulowitzh onga bonga bimmelon sid est insula</h3>
-      <time detail>20.12.2017</time>
+      <p class="kirby-item-title">Lorem ipsum quam notem andamus gepulowitzh onga bonga bimmelon sid est insula</p>
+      <time class="kirby-item-detail">20.12.2017</time>
     </kirby-label>
     <p>Die Marvin, your papers have arrived and you should be able to sign these within 1 week from today if you follow the instructions below.</p>
   </kirby-label>

diff --git a/apps/cookbook/src/app/examples/item-example/examples/input/default.ts b/apps/cookbook/src/app/examples/item-example/examples/input/default.ts
@@ -6,7 +6,7 @@ const config = {
   <kirby-avatar slot="start">
     <kirby-icon name="moneybag"></kirby-icon>
   </kirby-avatar>
-  <h3>Title</h3>
+  <p class="kirby-item-title">Title</p>
   <kirby-form-field slot="end">
     <input type="text" kirby-input value="Item with input" borderless="true"/>
   </kirby-form-field>

diff --git a/apps/cookbook/src/app/examples/item-example/examples/input/numeric.ts b/apps/cookbook/src/app/examples/item-example/examples/input/numeric.ts
@@ -6,7 +6,7 @@ const config = {
   <kirby-avatar slot="start">
     <kirby-icon name="moneybag"></kirby-icon>
   </kirby-avatar>
-  <h3>Title</h3>
+  <p class="kirby-item-title">Title</p>
   <kirby-form-field slot="end">
     <input type="number" kirby-input value="100.00" borderless="true"/>
   </kirby-form-field>

diff --git a/apps/cookbook/src/app/examples/item-example/examples/picker/avatar-selected.ts b/apps/cookbook/src/app/examples/item-example/examples/picker/avatar-selected.ts
@@ -6,7 +6,7 @@ const config = {
   <kirby-avatar overlay="true" slot="start">
     <kirby-icon name="moneybag"></kirby-icon>
   </kirby-avatar>
-  <h3>Title</h3>
+  <p class="kirby-item-title">Title</p>
   <kirby-icon slot="end" name="checkmark-selected"></kirby-icon>
 </kirby-item>`,
 };

diff --git a/apps/cookbook/src/app/examples/item-example/examples/picker/checkbox.ts b/apps/cookbook/src/app/examples/item-example/examples/picker/checkbox.ts
@@ -5,12 +5,12 @@ const config = {
   template: `<kirby-item selectable="true">
   <kirby-checkbox slot="start"></kirby-checkbox>
   <kirby-label>
-    <h3>Title</h3>
-    <p detail>Detail</p>
+    <p class="kirby-item-title">Title</p>
+    <p class="kirby-item-detail">Detail</p>
   </kirby-label>
   <kirby-label slot="end">
     <data>Value</data>
-    <data detail>Detail</data>
+    <data class="kirby-item-detail">Detail</data>
   </kirby-label>
 </kirby-item>`,
 };

diff --git a/apps/cookbook/src/app/examples/item-example/examples/picker/default-selected.ts b/apps/cookbook/src/app/examples/item-example/examples/picker/default-selected.ts
@@ -5,12 +5,12 @@ const config = {
   template: `<kirby-item selectable="true" selected="true">
   <kirby-icon name="checkmark-selected" slot="start"></kirby-icon>
   <kirby-label>
-    <h3>Title</h3>
-    <p detail>Detail</p>
+    <p class="kirby-item-title">Title</p>
+    <p class="kirby-item-detail">Detail</p>
   </kirby-label>
   <kirby-label slot="end">
     <data>Value</data>
-    <data detail>Detail</data>
+    <data class="kirby-item-detail">Detail</data>
   </kirby-label>
 </kirby-item>`,
 };

diff --git a/apps/cookbook/src/app/examples/item-example/examples/picker/default.ts b/apps/cookbook/src/app/examples/item-example/examples/picker/default.ts
@@ -4,12 +4,12 @@ const config = {
   selector: 'cookbook-item-example-picker-default',
   template: `<kirby-item selectable="true">
   <kirby-label>
-    <h3 class="kirby-text-bold">Title</h3>
-    <p detail>Detail</p>
+    <p class="kirby-text-normal-bold">Title</p>
+    <p class="kirby-item-detail">Detail</p>
   </kirby-label>
   <kirby-label slot="end">
     <data>Value</data>
-    <data detail>Detail</data>
+    <data class="kirby-item-detail">Detail</data>
   </kirby-label>
 </kirby-item>`,
 };

diff --git a/apps/cookbook/src/app/examples/item-example/examples/settings/settings-disabled.ts b/apps/cookbook/src/app/examples/item-example/examples/settings/settings-disabled.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 const config = {
   selector: 'cookbook-item-example-settings-disabled',
   template: `<kirby-item disabled>
-  <h3>Disabled</h3>
+  <p class="kirby-item-title">Disabled</p>
   <kirby-toggle slot="end"></kirby-toggle>
 </kirby-item>`,
 };

diff --git a/apps/cookbook/src/app/examples/item-example/examples/settings/settings.ts b/apps/cookbook/src/app/examples/item-example/examples/settings/settings.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 const config = {
   selector: 'cookbook-item-example-settings',
   template: `<kirby-item>
-  <h3>Title</h3>
+  <p class="kirby-item-title">Title</p>
   <kirby-toggle slot="end" checked="true"></kirby-toggle>
 </kirby-item>`,
 };

diff --git a/apps/cookbook/src/app/examples/item-example/examples/simple/default-md.ts b/apps/cookbook/src/app/examples/item-example/examples/simple/default-md.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 const config = {
   selector: 'cookbook-item-example-simple-md',
   template: `<kirby-item>
-  <h3>Medium (default)</h3>
+  <p class="kirby-item-title">Medium (default)</p>
 </kirby-item>`,
 };
 

diff --git a/apps/cookbook/src/app/examples/item-example/examples/simple/default-sm.ts b/apps/cookbook/src/app/examples/item-example/examples/simple/default-sm.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 const config = {
   selector: 'cookbook-item-example-simple-sm',
   template: `<kirby-item size="sm">
-  <h3>Small</h3>
+  <p class="kirby-item-title">Small</p>
 </kirby-item>`,
 };
 

diff --git a/apps/cookbook/src/app/examples/item-example/examples/simple/default-xs.ts b/apps/cookbook/src/app/examples/item-example/examples/simple/default-xs.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 const config = {
   selector: 'cookbook-item-example-simple-xs',
   template: `<kirby-item size="xs">
-  <h3>Extra small</h3>
+  <p class="kirby-item-title">Extra small</p>
 </kirby-item>`,
 };
 

diff --git a/apps/cookbook/src/app/examples/item-example/examples/simple/default.ts b/apps/cookbook/src/app/examples/item-example/examples/simple/default.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 const config = {
   selector: 'cookbook-item-example-simple',
   template: `<kirby-item>
-  <h3>Title</h3>
+  <p class="kirby-item-title">Title</p>
   <data slot="end">Value</data>
 </kirby-item>`,
 };

diff --git a/apps/cookbook/src/app/examples/item-example/examples/simple/long-title.ts b/apps/cookbook/src/app/examples/item-example/examples/simple/long-title.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 const config = {
   selector: 'cookbook-item-example-long-title',
   template: `<kirby-item>
-  <h3>Title that will be truncated because it has a very long text that cannot fit in the width of the container as it's way too long for that and this is why it will be truncated</h3>
+  <p class="kirby-item-title">Title that will be truncated because it has a very long text that cannot fit in the width of the container as it's way too long for that and this is why it will be truncated</p>
   <data slot="end">Value</data>
 </kirby-item>`,
 };