From 5704a99be776edd569b70f4a3bf69758199bddf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Wed, 7 Jun 2023 12:31:15 +0200
Subject: [PATCH] Go all in on Punkt

Include the whole Punkt CSS module. Remove some of our own unnecessary
resets and make some additional tweaks that became necessary after
loading all of Punkt.
---
 src/components/period/PeriodSelector.vue  |  4 +++
 src/styles/_reset.scss                    | 39 ++---------------------
 src/styles/main.scss                      | 23 +------------
 src/views/Admin/components/AdminItems.vue | 16 +++++++---
 src/views/Admin/components/AdminUsers.vue |  3 +-
 5 files changed, 20 insertions(+), 65 deletions(-)

diff --git a/src/components/period/PeriodSelector.vue b/src/components/period/PeriodSelector.vue
index 4be20f58a..eaf459842 100644
--- a/src/components/period/PeriodSelector.vue
+++ b/src/components/period/PeriodSelector.vue
@@ -153,6 +153,10 @@ export default {
         // Hide flatpickr arrow
         display: none;
       }
+
+      svg {
+        vertical-align: baseline;
+      }
     }
     &-input {
       display: none;
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index 8d48157fe..d11302762 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -85,50 +85,15 @@ audio,
 video {
   margin: 0;
   padding: 0;
-  font: inherit;
-  font-size: 100%;
-  vertical-align: baseline;
-  border: 0;
-}
-/* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-  display: block;
-}
-body {
-  line-height: 1;
 }
+
 ol,
 ul {
   list-style: none;
 }
-blockquote,
-q {
-  quotes: none;
-}
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: '';
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
+
 hr {
   margin: 1.5rem 0;
-  padding: 0;
   border: 0;
   border-top: 1px solid var(--color-primary);
 }
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 2845ab7fd..6d15b8959 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -5,28 +5,7 @@
 @use 'modal';
 @use 'tooltip';
 
-/*
- * Ultimately we'd like to import Punkt as a whole by doing:
- *
- *   @use '@oslokommune/punkt-css/dist/scss/pkt';
- *
- * Doing so now wreaks havoc with our existing styles, so it'll have
- * to be phased in piece by piece.
- */
-@use '@oslokommune/punkt-css/dist/scss/base/_colors';
-@use '@oslokommune/punkt-css/dist/scss/base/_typography';
-@use '@oslokommune/punkt-css/dist/scss/base/_grid';
-@use '@oslokommune/punkt-css/dist/scss/base/_spacing';
-@use '@oslokommune/punkt-css/dist/scss/base/_visibility';
-@use '@oslokommune/punkt-css/dist/scss/elements/_form';
-@use '@oslokommune/punkt-css/dist/scss/elements/_hr';
-@use '@oslokommune/punkt-css/dist/scss/elements/_button';
-@use '@oslokommune/punkt-css/dist/scss/elements/_checkbox-radio';
-@use '@oslokommune/punkt-css/dist/scss/components/_icon';
-@use '@oslokommune/punkt-css/dist/scss/components/_badge';
-@use '@oslokommune/punkt-css/dist/scss/components/_alert';
-@use '@oslokommune/punkt-css/dist/scss/components/_linkcard';
-@use '@oslokommune/punkt-css/dist/scss/components/_tag';
+@use '@oslokommune/punkt-css/dist/scss/pkt';
 
 @use 'forms';
 @use 'markdown';
diff --git a/src/views/Admin/components/AdminItems.vue b/src/views/Admin/components/AdminItems.vue
index c205917cf..fac6c8167 100644
--- a/src/views/Admin/components/AdminItems.vue
+++ b/src/views/Admin/components/AdminItems.vue
@@ -20,7 +20,10 @@
               :key="organization.id"
               class="col__row"
             >
-              <router-link class="col__link" :to="itemLink(organization.slug)">
+              <router-link
+                class="col__link pkt-txt-16-medium"
+                :to="itemLink(organization.slug)"
+              >
                 <pkt-icon class="icon" name="organization" />
                 <span class="col__text">{{ organization.name }}</span>
                 <pkt-icon v-if="organization.archived" class="icon" name="archive" />
@@ -53,7 +56,10 @@
           </div>
           <div class="col__body">
             <div v-for="department in filteredDeps" :key="department.id" class="col__row">
-              <router-link class="col__link" :to="itemLink(department.slug)">
+              <router-link
+                class="col__link pkt-txt-16-medium"
+                :to="itemLink(department.slug)"
+              >
                 <pkt-icon class="icon" name="district" />
                 <span class="col__text">{{ department.name }}</span>
                 <pkt-icon v-if="department.archived" class="icon" name="archive" />
@@ -85,7 +91,10 @@
           </div>
           <div class="col__body">
             <div v-for="product in filteredProds" :key="product.id" class="col__row">
-              <router-link class="col__link" :to="itemLink(product.slug)">
+              <router-link
+                class="col__link pkt-txt-16-medium"
+                :to="itemLink(product.slug)"
+              >
                 <pkt-icon class="icon" name="house-heart" />
                 <span class="col__text">{{ product.name }}</span>
                 <pkt-icon v-if="product.archived" class="icon" name="archive" />
@@ -280,7 +289,6 @@ export default {
   align-items: center;
   padding: 0.5rem 1rem;
   color: var(--color-text);
-  font-weight: 500;
   text-decoration: none;
   border-bottom: 2px solid var(--color-border);
 
diff --git a/src/views/Admin/components/AdminUsers.vue b/src/views/Admin/components/AdminUsers.vue
index 60a3e37fa..40cb1cc15 100644
--- a/src/views/Admin/components/AdminUsers.vue
+++ b/src/views/Admin/components/AdminUsers.vue
@@ -16,7 +16,7 @@
         <button
           v-for="user in filteredUsers"
           :key="user.id"
-          class="users__list-item"
+          class="users__list-item pkt-txt-14-medium"
           @click="selectedUser = user"
         >
           <pkt-icon class="icon" :name="isAdmin(user) ? 'cogwheel' : 'user'" />
@@ -153,7 +153,6 @@ export default {
   align-items: center;
   padding: 0.5rem 1rem;
   color: var(--color-text);
-  font-weight: 500;
   background: none;
   border: 0;
   border-bottom: 2px solid var(--color-border);