From c60a1e36af17df6ea59ad01194f191f734fca61d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Fri, 25 Aug 2023 13:56:56 +0200
Subject: [PATCH] Get rid of the typography module

Get rid of the typography style module. Use Punkt text classes and
mixins directly instead, which also ensures more correct usage of line
height and letter spacing according to Punkt. The remains of the
module are split into two new `titles` and `markdown` modules.
---
 src/components/IndicatorTooltip.vue           |  8 +-
 src/components/KpiWidgetGroup.vue             | 17 ++--
 .../Navigation/SiteMenuDropdown.vue           |  8 +-
 .../Navigation/UserMenuDropdown.vue           | 14 +--
 .../header/OrganizationSelector.vue           |  6 +-
 .../Navigation/header/OrganizationTree.vue    |  7 +-
 src/components/ProgressUpdateAPIExample.vue   |  4 +-
 src/components/TabList.vue                    | 51 ++---------
 src/components/modals/EditGoalsModal.vue      |  5 +-
 src/components/modals/KPIProgressModal.vue    |  2 +-
 src/components/modals/ProgressModal.vue       |  4 -
 src/components/widgets/PeriodTrendTag.vue     | 13 ++-
 .../widgets/WidgetKpiCard/WidgetKpiCard.vue   | 12 +--
 .../widgets/WidgetKpiProgressStats.vue        |  8 +-
 src/styles/_forms.scss                        | 10 +--
 src/styles/_markdown.scss                     | 35 ++++++++
 src/styles/_titles.scss                       | 16 ++++
 src/styles/_tooltip.scss                      |  6 +-
 src/styles/_vSelect.scss                      |  8 +-
 src/styles/main.scss                          |  6 ++
 src/styles/typography.scss                    | 89 -------------------
 src/views/Help.vue                            | 10 +++
 src/views/Item/ItemAbout.vue                  |  2 -
 src/views/ItemAdmin/ItemAdminKPI.vue          |  4 +-
 src/views/KeyResultHome.vue                   | 21 +++--
 src/views/ObjectiveHome.vue                   | 12 ++-
 26 files changed, 145 insertions(+), 233 deletions(-)
 create mode 100644 src/styles/_markdown.scss
 create mode 100644 src/styles/_titles.scss
 delete mode 100644 src/styles/typography.scss

diff --git a/src/components/IndicatorTooltip.vue b/src/components/IndicatorTooltip.vue
index e4e9b5f75..03e6bee86 100644
--- a/src/components/IndicatorTooltip.vue
+++ b/src/components/IndicatorTooltip.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="tooltip">
     <div class="date">{{ formattedDate }}</div>
-    <div class="value">{{ formattedValue }}</div>
+    <div class="value pkt-txt-20">{{ formattedValue }}</div>
     <div v-if="comment">{{ comment }}</div>
   </div>
 </template>
@@ -48,8 +48,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/typography';
-
 .tooltip {
   > div {
     max-width: 200px;
@@ -61,9 +59,5 @@ export default {
   .date {
     font-weight: 400;
   }
-
-  .value {
-    font-size: typography.$font-size-4;
-  }
 }
 </style>
diff --git a/src/components/KpiWidgetGroup.vue b/src/components/KpiWidgetGroup.vue
index a7cbb1745..8e3a2a700 100644
--- a/src/components/KpiWidgetGroup.vue
+++ b/src/components/KpiWidgetGroup.vue
@@ -3,10 +3,15 @@
     <div class="kpi-widget-group__title">
       <h2 class="pkt-txt-16">{{ title }}</h2>
       <template v-if="!compact">
-        <span v-if="selectedPeriod.startDate && selectedPeriod.endDate">
+        <span
+          v-if="selectedPeriod.startDate && selectedPeriod.endDate"
+          class="pkt-txt-14"
+        >
           {{ $t('general.period') }}: {{ periodDates(selectedPeriod) }}
         </span>
-        <span v-else>{{ $t('general.period') }}: {{ selectedPeriod.label }}</span>
+        <span v-else class="pkt-txt-14"
+          >{{ $t('general.period') }}: {{ selectedPeriod.label }}
+        </span>
         <pkt-button
           v-if="!rendering && kpis.length"
           size="small"
@@ -134,7 +139,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/typography';
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
 .kpi-widget-group {
   display: flex;
@@ -152,10 +157,6 @@ export default {
     h2 {
       flex-grow: 1;
     }
-
-    span {
-      font-size: typography.$font-size-1;
-    }
   }
 
   &__kpis {
@@ -211,7 +212,7 @@ export default {
     margin-bottom: 1rem;
 
     .kpi-widget-group__title h2 {
-      font-size: typography.$font-size-1;
+      @include get-text('pkt-txt-14');
     }
   }
 }
diff --git a/src/components/Navigation/SiteMenuDropdown.vue b/src/components/Navigation/SiteMenuDropdown.vue
index f6baedef7..a56d77f54 100644
--- a/src/components/Navigation/SiteMenuDropdown.vue
+++ b/src/components/Navigation/SiteMenuDropdown.vue
@@ -23,7 +23,7 @@
       </template>
     </nav>
 
-    <div class="site-menu-dropdown__footer">
+    <div class="site-menu-dropdown__footer pkt-txt-12-medium">
       <img
         alt="Oslo kommune logo"
         src="@oslokommune/punkt-assets/dist/logos/oslologo.svg"
@@ -93,19 +93,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/typography';
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
 $-dropdown-max-height: calc(100vh - 3.5rem);
 
 .site-menu-dropdown {
+  @include get-text('pkt-txt-16-medium');
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
   width: 100vw;
   height: $-dropdown-max-height;
   padding: 1rem;
-  font-weight: 500;
-  font-size: typography.$font-size-2;
   line-height: 2;
 
   @include bp('phablet-up') {
@@ -147,7 +146,6 @@ $-dropdown-max-height: calc(100vh - 3.5rem);
     justify-content: space-between;
     margin-top: auto;
     padding-top: 1rem;
-    font-size: typography.$font-size-0;
     opacity: 0.25;
 
     img {
diff --git a/src/components/Navigation/UserMenuDropdown.vue b/src/components/Navigation/UserMenuDropdown.vue
index e30729efc..56a87d645 100644
--- a/src/components/Navigation/UserMenuDropdown.vue
+++ b/src/components/Navigation/UserMenuDropdown.vue
@@ -3,7 +3,7 @@
     <div class="user-menu-dropdown__header">
       <div class="user-profile">
         <h1 class="title-2">{{ user.displayName }}</h1>
-        <ul class="user-profile__access">
+        <ul class="user-profile__access pkt-txt-12-medium">
           <template v-if="user.superAdmin">
             <li v-tooltip.bottom="$t('user.hasSuperAdmin')">
               {{ $t('user.superAdmin') }}
@@ -37,8 +37,8 @@
 
         <ul v-if="products.length > 0" class="user-products__list">
           <li v-for="product in products" :key="product.id">
-            <h3 class="title-4">{{ product.department.name }}</h3>
-            <span class="products-list__name">{{ product.name }}</span>
+            <h3 class="pkt-txt-14-medium">{{ product.department.name }}</h3>
+            <span>{{ product.name }}</span>
           </li>
         </ul>
       </div>
@@ -195,8 +195,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/typography';
-
 $-dropdown-max-height: calc(100vh - 3.5rem);
 
 .user-menu-dropdown {
@@ -269,8 +267,6 @@ $-dropdown-max-height: calc(100vh - 3.5rem);
   &__access {
     display: flex;
     gap: 0.2rem;
-    font-weight: 500;
-    font-size: typography.$font-size-0;
 
     li:not(:last-of-type):after {
       content: '/';
@@ -289,10 +285,6 @@ $-dropdown-max-height: calc(100vh - 3.5rem);
     li {
       margin-bottom: 1.25rem;
     }
-
-    &__name {
-      font-size: typography.$font-size-1;
-    }
   }
 }
 </style>
diff --git a/src/components/Navigation/header/OrganizationSelector.vue b/src/components/Navigation/header/OrganizationSelector.vue
index 0333cc4d8..95f69258b 100644
--- a/src/components/Navigation/header/OrganizationSelector.vue
+++ b/src/components/Navigation/header/OrganizationSelector.vue
@@ -26,7 +26,7 @@
           :checked="org.id === orgId"
           @change="onChange"
         />
-        <label class="pkt-form-label" :for="org.id">
+        <label class="pkt-form-label pkt-txt-14" :for="org.id">
           {{ org.name }}
         </label>
       </div>
@@ -69,8 +69,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/typography';
-
 .organization-selector {
   &__toggle {
     justify-content: space-between;
@@ -91,7 +89,7 @@ export default {
     }
 
     .pkt-form-label {
-      font-size: typography.$font-size-1;
+      margin: 0.25rem 0;
     }
   }
 
diff --git a/src/components/Navigation/header/OrganizationTree.vue b/src/components/Navigation/header/OrganizationTree.vue
index a46657be1..58692b094 100644
--- a/src/components/Navigation/header/OrganizationTree.vue
+++ b/src/components/Navigation/header/OrganizationTree.vue
@@ -40,7 +40,7 @@
               <li
                 v-for="prod in dept.children"
                 :key="prod.id"
-                class="organization-tree__item organization-tree__item--product"
+                class="organization-tree__item organization-tree__item--product pkt-txt-14-light"
               >
                 <router-link
                   :to="{ name: 'ItemHome', params: { slug: prod.slug } }"
@@ -93,8 +93,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/typography';
-
 .organization-tree {
   margin: 1rem 0 0 1rem;
 
@@ -117,8 +115,7 @@ export default {
     }
 
     &--product {
-      font-weight: 300;
-      font-size: typography.$font-size-1;
+      margin: 0.25rem 0;
     }
   }
 
diff --git a/src/components/ProgressUpdateAPIExample.vue b/src/components/ProgressUpdateAPIExample.vue
index 26ab46213..21324163d 100644
--- a/src/components/ProgressUpdateAPIExample.vue
+++ b/src/components/ProgressUpdateAPIExample.vue
@@ -55,10 +55,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/typography';
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
 ::v-deep textarea {
+  @include get-text('pkt-txt-14');
   margin: 0;
-  font-size: typography.$font-size-1;
 }
 </style>
diff --git a/src/components/TabList.vue b/src/components/TabList.vue
index 7aad357ad..1a6dd64a5 100644
--- a/src/components/TabList.vue
+++ b/src/components/TabList.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="{ tabList: true, 'tabList--isFilled': isFilled }"
+    :class="{ tabList: true }"
     role="tablist"
     :aria-label="ariaLabel"
     @keydown="updateFocus"
@@ -8,7 +8,6 @@
     <div
       :class="{
         tabList__container: true,
-        'tabList__container--isFilled': isFilled,
       }"
     >
       <button
@@ -26,8 +25,6 @@
         :class="{
           tabList__button: true,
           'tabList__button--isActive': isActiveTab(index),
-          'tabList__button--isFilled': isFilled,
-          'tabList__button--isOutlined': !isFilled,
         }"
         :aria-selected="isActiveTab(index)"
         :aria-controls="tabIds.tabPanel(index)"
@@ -66,11 +63,6 @@ export default {
       type: Object,
       required: true,
     },
-    isFilled: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
   },
 
   data() {
@@ -130,6 +122,7 @@ export default {
 <style lang="scss" scoped>
 .tabList {
   position: relative;
+  margin-bottom: 1.5rem;
   overflow-x: auto;
 
   &::-webkit-slider-runnable-track {
@@ -149,17 +142,10 @@ export default {
     background-color: var(--color-grayscale-70);
   }
 
-  &--isFilled {
-    margin-bottom: 1.5rem;
-  }
-
   &__container {
     display: flex;
     margin-bottom: 0.25rem;
-
-    &--isFilled {
-      border-bottom: 0.125rem solid var(--color-primary);
-    }
+    border-bottom: 0.125rem solid var(--color-primary);
   }
 
   &__button {
@@ -169,16 +155,12 @@ export default {
     padding: 0.7rem 1rem;
     font-weight: 500;
     white-space: nowrap;
+    text-decoration: none;
+    background-color: var(--color-grayscale-10);
+    border: 0;
+    cursor: pointer;
 
-    &--isFilled {
-      margin-right: 0.5rem;
-      text-decoration: none;
-      background-color: var(--color-grayscale-10);
-      border: 0;
-      cursor: pointer;
-    }
-
-    &--isFilled#{&}--isActive {
+    &#{&}--isActive {
       color: var(--color-text-secondary);
       background-color: var(--color-primary);
 
@@ -186,23 +168,6 @@ export default {
         --fg-color: var(--color-white);
       }
     }
-
-    &--isOutlined {
-      color: var(--color-grayscale-50);
-      font-size: var(--font-size-1);
-      background: transparent;
-      border: none;
-
-      &:hover {
-        color: var(--color-text);
-        background: var(--color-gray-light);
-      }
-    }
-
-    &--isOutlined#{&}--isActive {
-      color: var(--color-text);
-      border-bottom: 0.25rem solid var(--color-secondary-light);
-    }
   }
 
   &__icon {
diff --git a/src/components/modals/EditGoalsModal.vue b/src/components/modals/EditGoalsModal.vue
index 275953eaa..1d4693bd8 100644
--- a/src/components/modals/EditGoalsModal.vue
+++ b/src/components/modals/EditGoalsModal.vue
@@ -58,7 +58,7 @@
             rules="required"
           >
             <template #sub>
-              <span v-if="value" class="display-as">
+              <span v-if="value" class="display-as pkt-txt-14-medium">
                 {{ $t('general.displayedAs') }}
                 {{ formatKPIValue(kpi, typePercentage ? value / 100 : value) }}
               </span>
@@ -273,7 +273,6 @@ export default {
 
 <style lang="scss" scoped>
 @use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/breakpoints' as *;
-@use '@/styles/typography';
 
 ::v-deep .modal {
   overflow-y: visible;
@@ -291,8 +290,6 @@ export default {
 
   .display-as {
     color: var(--color-grayscale-50);
-    font-weight: 500;
-    font-size: typography.$font-size-1;
   }
 
   &__left {
diff --git a/src/components/modals/KPIProgressModal.vue b/src/components/modals/KPIProgressModal.vue
index 779617edc..ed738a6e0 100644
--- a/src/components/modals/KPIProgressModal.vue
+++ b/src/components/modals/KPIProgressModal.vue
@@ -19,7 +19,7 @@
             @input="(value) => (updatedValue = value)"
           >
             <template #sub>
-              <span v-if="updatedValue" class="display-as">
+              <span v-if="updatedValue" class="display-as pkt-txt-14-medium">
                 {{ $t('general.displayedAs') }}
                 {{ formatKPIValue(kpi, displayValue) }}
               </span>
diff --git a/src/components/modals/ProgressModal.vue b/src/components/modals/ProgressModal.vue
index fe9517e7a..59486449b 100644
--- a/src/components/modals/ProgressModal.vue
+++ b/src/components/modals/ProgressModal.vue
@@ -141,8 +141,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/typography';
-
 .progress-form {
   @include bp('phablet-up') {
     display: flex;
@@ -150,8 +148,6 @@ export default {
 
   .display-as {
     color: var(--color-grayscale-50);
-    font-weight: 500;
-    font-size: typography.$font-size-1;
   }
 
   &__left {
diff --git a/src/components/widgets/PeriodTrendTag.vue b/src/components/widgets/PeriodTrendTag.vue
index b8a4b190c..540f75c24 100644
--- a/src/components/widgets/PeriodTrendTag.vue
+++ b/src/components/widgets/PeriodTrendTag.vue
@@ -7,7 +7,7 @@
       <span class="period-trend-tag__value">
         {{ formatKPIValue(kpi, firstProgressRecord.value) }}
       </span>
-      <span class="period-trend-tag__date">
+      <span class="period-trend-tag__date pkt-txt-14">
         {{ formatDate(firstProgressRecord.timestamp) }}
       </span>
     </div>
@@ -24,7 +24,7 @@
       <span class="period-trend-tag__value">
         {{ formatKPIValue(kpi, latestProgressRecord.value) }}
       </span>
-      <span v-if="!compact" class="period-trend-tag__date">
+      <span v-if="!compact" class="period-trend-tag__date pkt-txt-14">
         {{ formatDate(latestProgressRecord.timestamp) }}
       </span>
     </div>
@@ -117,7 +117,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/typography';
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
 .period-trend-tag {
   display: flex;
@@ -130,13 +130,13 @@ export default {
   white-space: nowrap;
 
   @include bp('phablet-up') {
-    font-size: typography.$font-size-5;
+    @include get-text('pkt-txt-24');
   }
 
   &__value-wrapper {
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
+    gap: 0.375rem;
     text-align: center;
   }
 
@@ -146,7 +146,6 @@ export default {
 
   &__date {
     color: var(--color-grayscale-40);
-    font-size: typography.$font-size-1;
   }
 
   &__trend {
@@ -193,8 +192,8 @@ export default {
   }
 
   &--compact {
+    @include get-text('pkt-txt-18');
     justify-content: flex-start;
-    font-size: typography.$font-size-3;
 
     .period-trend-tag__trend {
       order: 1;
diff --git a/src/components/widgets/WidgetKpiCard/WidgetKpiCard.vue b/src/components/widgets/WidgetKpiCard/WidgetKpiCard.vue
index c97dd564b..0e3f32473 100644
--- a/src/components/widgets/WidgetKpiCard/WidgetKpiCard.vue
+++ b/src/components/widgets/WidgetKpiCard/WidgetKpiCard.vue
@@ -12,7 +12,7 @@
           :progress="progress"
           :compact="compact"
         />
-        <span v-else-if="!isProgressLoading" class="no-data">
+        <span v-else-if="!isProgressLoading" class="no-data pkt-txt-14">
           {{ $t(`kpi.${progressIsFiltered ? 'noDataFiltered' : 'noData'}`) }}
         </span>
       </div>
@@ -24,7 +24,7 @@
           :start-value="kpi.startValue"
           :compact="compact"
         />
-        <span v-else-if="progress.length === 1" class="no-data">{{
+        <span v-else-if="progress.length === 1" class="no-data pkt-txt-12">{{
           $t('kpi.noGraph')
         }}</span>
       </div>
@@ -134,8 +134,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/typography';
-
 .kpi-card-widget {
   gap: 0.75rem;
   margin: 0;
@@ -159,10 +157,6 @@ export default {
     align-self: center;
     min-width: 8rem;
     max-width: 50%;
-
-    .no-data {
-      font-size: typography.$font-size-0;
-    }
   }
 
   .no-data {
@@ -214,8 +208,6 @@ export default {
 
 .no-data {
   color: var(--color-grayscale-40);
-  font-weight: 400;
-  font-size: typography.$font-size-1;
   font-style: italic;
 }
 </style>
diff --git a/src/components/widgets/WidgetKpiProgressStats.vue b/src/components/widgets/WidgetKpiProgressStats.vue
index 00c46a770..7e9a4d38e 100644
--- a/src/components/widgets/WidgetKpiProgressStats.vue
+++ b/src/components/widgets/WidgetKpiProgressStats.vue
@@ -15,7 +15,7 @@
           </template>
         </span>
         <div>
-          <span class="progressStatistics__value">
+          <span class="progressStatistics__value pkt-txt-20-medium">
             {{ formattedKpiValue }}
           </span>
         </div>
@@ -30,7 +30,7 @@
           }}
         </span>
         <div>
-          <span class="progressStatistics__value">
+          <span class="progressStatistics__value pkt-txt-20-medium">
             {{ formatKPIValue(kpi, goal.value) }}
             <span v-if="isGoalReached" class="check-icon">
               <pkt-icon name="check-medium" />
@@ -135,8 +135,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/typography';
-
 .progressStatistics {
   display: grid;
   gap: 2rem;
@@ -161,8 +159,6 @@ export default {
     display: flex;
     gap: 0.5rem;
     align-items: center;
-    font-weight: 500;
-    font-size: typography.$font-size-4;
 
     .check-icon {
       width: 1.25rem;
diff --git a/src/styles/_forms.scss b/src/styles/_forms.scss
index 9ebedbe5d..637a1675d 100644
--- a/src/styles/_forms.scss
+++ b/src/styles/_forms.scss
@@ -1,5 +1,5 @@
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 @use 'range-slider' as *;
-@use 'typography';
 
 /*
   Some Punkt elements, e.g. inputs, check- and radio-buttons, are still marked
@@ -43,11 +43,9 @@
 
   .pkt-badge {
     // Align badges, used to indicate optional form fields, with Figma design.
+    @include get-text('pkt-txt-14-light');
     height: auto;
     padding: 0.125rem 0.5rem;
-    font-weight: 300;
-    font-size: typography.$font-size-1;
-    line-height: 1.375rem; // 22px
   }
 }
 
@@ -139,15 +137,15 @@
   margin: 1.5rem 0;
 
   &__list {
-    font-size: typography.$font-size-1;
+    @include get-text('pkt-txt-14-light');
     list-style: square;
 
     > li {
       margin: 0 1.5rem;
 
       > span:first-child {
+        @include get-text('pkt-txt-14-medium');
         margin-right: 0.5rem;
-        font-weight: 500;
       }
     }
   }
diff --git a/src/styles/_markdown.scss b/src/styles/_markdown.scss
new file mode 100644
index 000000000..3a3515819
--- /dev/null
+++ b/src/styles/_markdown.scss
@@ -0,0 +1,35 @@
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
+
+.md {
+  h1 {
+    @include get-text('pkt-txt-24-medium');
+    margin-bottom: 1.5rem;
+  }
+
+  h2 {
+    @include get-text('pkt-txt-24-medium');
+    margin-top: 2rem;
+  }
+
+  h3 {
+    @include get-text('pkt-txt-18-medium');
+    margin-top: 2rem;
+  }
+
+  h4 {
+    @include get-text('pkt-txt-14-medium');
+    margin-bottom: 0.5rem;
+  }
+
+  ul {
+    margin: 1em 0;
+    padding-left: 2em;
+    list-style-type: disc;
+  }
+
+  ol {
+    margin: 1em 0;
+    padding-left: 2em;
+    list-style-type: decimal;
+  }
+}
diff --git a/src/styles/_titles.scss b/src/styles/_titles.scss
new file mode 100644
index 000000000..c58887c64
--- /dev/null
+++ b/src/styles/_titles.scss
@@ -0,0 +1,16 @@
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
+
+.title-1 {
+  @include get-text('pkt-txt-24-medium');
+  margin-bottom: 1.5rem;
+}
+
+.title-2 {
+  @include get-text('pkt-txt-18-medium');
+  margin-bottom: 0.5rem;
+}
+
+.title-3 {
+  @include get-text('pkt-txt-16-medium');
+  margin-bottom: 0.5rem;
+}
diff --git a/src/styles/_tooltip.scss b/src/styles/_tooltip.scss
index 3ca8688d8..caeb07ed1 100644
--- a/src/styles/_tooltip.scss
+++ b/src/styles/_tooltip.scss
@@ -1,4 +1,4 @@
-@use '@/styles/typography';
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
 .tooltip {
   z-index: 10000;
@@ -6,12 +6,10 @@
   pointer-events: none;
 
   .tooltip-inner {
+    @include get-text('pkt-txt-14-medium');
     max-width: 14rem;
     padding: 1em;
     color: var(--color-text-secondary);
-    font-weight: 500;
-    font-size: typography.$font-size-1;
-    line-height: 1.225rem;
     background: var(--color-primary);
   }
 
diff --git a/src/styles/_vSelect.scss b/src/styles/_vSelect.scss
index 9b75865d4..19405650a 100644
--- a/src/styles/_vSelect.scss
+++ b/src/styles/_vSelect.scss
@@ -3,11 +3,12 @@
 //  https://punkt.oslo.kommune.no/3.1/komponenter/select/
 //  https://vue-select.org/guide/css.html#available-css-variables-3-18
 
-@use 'typography';
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
+
 @import 'vue-select/dist/vue-select';
 
 :root {
-  --vs-font-size: typography.$font-size-2;
+  --vs-font-size: 16px;
   --vs-border-color: var(--color-blue-dark);
   --vs-border-width: 2px;
   --vs-border-radius: 0;
@@ -75,11 +76,10 @@
   &.vs--multiple {
     .vs__selected {
       // Style inspired by the Punkt badge/label.
+      @include get-text('pkt-txt-14-medium');
       height: 2.125rem; // 34px
       margin: 4px 4px 0 ;
       padding: 0.25rem 0.5rem;
-      font-weight: 500;
-      font-size: typography.$font-size-1;
       background-color: var(--color-beige-light);
       border: 0;
 
diff --git a/src/styles/main.scss b/src/styles/main.scss
index f4eaea7f9..2845ab7fd 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -29,6 +29,8 @@
 @use '@oslokommune/punkt-css/dist/scss/components/_tag';
 
 @use 'forms';
+@use 'markdown';
+@use 'titles';
 @use 'vSelect';
 
 @function hexToRGB($hex) {
@@ -52,6 +54,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+p + p {
+  margin-top: 1em;
+}
+
 *,
 *::before,
 *::after {
diff --git a/src/styles/typography.scss b/src/styles/typography.scss
deleted file mode 100644
index f8ea4206a..000000000
--- a/src/styles/typography.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-@use "sass:map";
-@use "@oslokommune/punkt-css/dist/scss/abstracts/variables";
-
-$font-size-0: map.get(variables.$font-size, "size-12");
-$font-size-1: map.get(variables.$font-size, "size-14");
-$font-size-2: map.get(variables.$font-size, "size-16");
-$font-size-3: map.get(variables.$font-size, "size-18");
-$font-size-4: map.get(variables.$font-size, "size-20");
-$font-size-5: map.get(variables.$font-size, "size-24");
-$font-size-6: map.get(variables.$font-size, "size-30");
-$font-size-7: map.get(variables.$font-size, "size-54");
-
-.md h1,
-.title-1 {
-  margin-bottom: 1.5rem;
-  font-weight: 500;
-  font-size: $font-size-5;
-}
-
-.md h2,
-.title-2 {
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  font-size: $font-size-3;
-}
-
-.md h3,
-.title-3 {
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  font-size: $font-size-2;
-}
-
-.md h4,
-.title-4 {
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  font-size: $font-size-1;
-}
-
-.md {
-  h2 {
-    margin-top: 2rem;
-    margin-bottom: 0.5rem;
-    font-size: 1.5rem;
-  }
-
-  h3 {
-    margin-top: 2rem;
-    margin-bottom: 0.5rem;
-    font-size: 1.15rem;
-  }
-
-  ul {
-    margin: 1em 0;
-    padding-left: 2em;
-    list-style-type: disc;
-  }
-
-  .table {
-    margin-bottom: 2rem;
-  }
-
-  ol {
-    margin: 1em 0;
-    padding-left: 2em;
-    list-style-type: decimal;
-  }
-}
-
-.title-label {
-  color: var(--color-grayscale-40);
-  font-size: 1rem;
-  line-height: 2.5rem;
-}
-
-code {
-  padding: 0 0.3em;
-  font-size: $font-size-1;
-  font-family: 'Monaco', monospace;
-  line-height: 100%;
-  letter-spacing: -0.05em;
-  word-break: normal;
-  background-color: var(--color-grayscale-10);
-}
-
-p + p {
-  margin-top: 1em;
-}
diff --git a/src/views/Help.vue b/src/views/Help.vue
index 2b8e291d7..0c2d34b3e 100644
--- a/src/views/Help.vue
+++ b/src/views/Help.vue
@@ -68,6 +68,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
+
 aside,
 main {
   line-height: 1.2;
@@ -87,4 +89,12 @@ main {
 .md :first-child {
   margin-top: 0;
 }
+
+::v-deep code {
+  @include get-text('pkt-txt-14');
+  padding: 0 0.3em;
+  font-family: 'Monaco', monospace;
+  word-break: normal;
+  background-color: var(--color-grayscale-10);
+}
 </style>
diff --git a/src/views/Item/ItemAbout.vue b/src/views/Item/ItemAbout.vue
index ba4015fbf..5ac69d839 100644
--- a/src/views/Item/ItemAbout.vue
+++ b/src/views/Item/ItemAbout.vue
@@ -160,8 +160,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/typography';
-
 .main {
   padding: 2rem;
 }
diff --git a/src/views/ItemAdmin/ItemAdminKPI.vue b/src/views/ItemAdmin/ItemAdminKPI.vue
index 302138f1d..c18461283 100644
--- a/src/views/ItemAdmin/ItemAdminKPI.vue
+++ b/src/views/ItemAdmin/ItemAdminKPI.vue
@@ -213,7 +213,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/typography';
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
 .card {
   padding: 0;
@@ -283,7 +283,7 @@ export default {
 
 .collapse--collapsed {
   .kpi__footer {
-    font-size: typography.$font-size-0;
+    @include get-text('pkt-txt-12-light');
 
     &--success {
       display: none;
diff --git a/src/views/KeyResultHome.vue b/src/views/KeyResultHome.vue
index 67d4e46ab..0e3fa9a76 100644
--- a/src/views/KeyResultHome.vue
+++ b/src/views/KeyResultHome.vue
@@ -2,7 +2,7 @@
   <page-layout v-if="activeKeyResult">
     <template #default>
       <header>
-        <span class="title-label">{{ $t('general.keyResult') }}</span>
+        <span class="title-label pkt-txt-16-light">{{ $t('general.keyResult') }}</span>
         <div class="keyResult__heading">
           <h2 class="title-1">{{ activeKeyResult.name }}</h2>
           <div class="keyResult__edit">
@@ -37,10 +37,10 @@
         >
           <div class="key-result-summary__progress-inner">
             <div class="key-result-progression">
-              <span class="key-result-progression__current">
+              <span class="key-result-progression__current pkt-txt-24-bold">
                 {{ progressDetails.formattedTotalCompletedTasks }}
               </span>
-              <span class="key-result-progression__target">
+              <span class="key-result-progression__target pkt-txt-12-light">
                 {{
                   $t('progress.remainingOf', {
                     progress: progressDetails.formattedTotalNumberOfTasks,
@@ -302,7 +302,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/typography';
+header {
+  display: flex;
+  flex-direction: column;
+}
+
+.title-label {
+  margin-bottom: 0.5rem;
+  color: var(--color-grayscale-40);
+}
 
 .pkt-alert {
   margin-bottom: 1rem;
@@ -367,16 +375,13 @@ export default {
   align-items: flex-start;
 
   &__current {
-    padding: 1rem 2rem;
-    font-weight: 700;
-    font-size: typography.$font-size-5;
+    padding: 0.75rem 2rem;
     background-color: var(--color-gray);
   }
 
   &__target {
     margin-left: 2.5rem;
     padding: 0.5rem 0.5rem;
-    font-size: typography.$font-size-0;
   }
 }
 
diff --git a/src/views/ObjectiveHome.vue b/src/views/ObjectiveHome.vue
index 084de0981..ca5548588 100644
--- a/src/views/ObjectiveHome.vue
+++ b/src/views/ObjectiveHome.vue
@@ -2,7 +2,7 @@
   <page-layout v-if="activeObjective">
     <template #default>
       <header>
-        <span class="title-label">
+        <span class="title-label pkt-txt-16-light">
           {{ $t('general.objective') }}
         </span>
 
@@ -173,6 +173,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+header {
+  display: flex;
+  flex-direction: column;
+}
+
+.title-label {
+  margin-bottom: 0.5rem;
+  color: var(--color-grayscale-40);
+}
+
 .objective__heading {
   display: flex;
   flex-direction: row;