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.
oslokommune · Sep 19, 2023 · 5704a99 · 5704a99
1 parent 26905c2
commit 5704a99
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 65 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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);