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.
oslokommune · Sep 1, 2023 · c60a1e3 · c60a1e3
1 parent 3b84a1f
commit c60a1e3
Show file tree

Hide file tree

Showing 26 changed files with 145 additions and 233 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,14 +1,13 @@
 <template>
   <div
-    :class="{ tabList: true, 'tabList--isFilled': isFilled }"
+    :class="{ tabList: true }"
     role="tablist"
     :aria-label="ariaLabel"
     @keydown="updateFocus"
   >
     <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,40 +155,19 @@ 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);
 
       .tabList__icon {
         --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
@@ -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
@@ -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
@@ -141,17 +141,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/typography';
-
 .progress-form {
   @include bp('phablet-up') {
     display: flex;
   }
 
   .display-as {
     color: var(--color-grayscale-50);
-    font-weight: 500;
-    font-size: typography.$font-size-1;
   }
 
   &__left {