@kth/style 1.10.0 → 1.12.0-alpha.0

package/dist/cjs/accordion.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/esm/accordion.js

@@ -0,0 +1 @@
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kth/style",
-  "version": "1.10.0",
+  "version": "1.12.0-alpha.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "exports": {
@@ -19,9 +19,11 @@
     "clean": "rm -rf dist",
     "build": "npm run clean && npm run build:components",
     "build:components": "rollup -c",
+    "build:scss": "node --no-warnings=ExperimentalWarning --trace-uncaught ./build-all-scss.mjs",
     "dev": "rollup -cw",
-    "test": "npm run test:lint",
+    "test": "npm run test:lint && npm run stylelint",
     "test:lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "stylelint": "stylelint scss/**",
     "lerna:version": "lerna version --no-private --ignore-changes '**' --force-publish @kth/style"
   },
   "files": [
@@ -45,6 +47,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^3.21.4",
+    "sass": "^1.83.4",
+    "stylelint": "^16.14.1",
+    "stylelint-config-standard-scss": "^14.0.0",
     "svgo": "^3.0.2",
     "typescript": "^5.0.2",
     "vite": "^4.3.0"

package/scss/components/a11y-nav.scss

@@ -15,8 +15,7 @@
     border-width: calc(1rem / 16);
     border-color: var(--color-text);
     border-style: solid;
-
-    box-shadow: 0 2px 4px 0 rgb(33, 33, 33, 0.4);
+    box-shadow: 0 2px 4px 0 rgb(33  33 33 / 40%);
 
     // Visually hidden by default
     z-index: -1;

package/scss/components/accordion.scss

@@ -1,5 +1,5 @@
-@use "../tokens/spacing.scss";
-@use "../tokens/icons.scss";
+@use "../tokens/spacing";
+@use "../tokens/icons";
 
 @layer kth-style {
   .kth-accordion {
@@ -14,13 +14,16 @@
 
       &::before {
         @include icons.icon-caret-down;
+
         background-color: var(--color-tertiary);
         margin-block: spacing.$space-2;
       }
+
       &:hover {
         text-decoration: underline;
       }
     }
+
     // Safari requires extra code to hide the default ">" marker
     summary::-webkit-details-marker {
       display: none;

package/scss/components/alert.scss

@@ -1,6 +1,6 @@
-@use "../tokens/spacing.scss";
-@use "../tokens/icons.scss";
-@use "../tokens/typography.scss";
+@use "../tokens/spacing";
+@use "../tokens/icons";
+@use "../tokens/typography";
 @use "../tokens/colors";
 
 $border-inline: spacing.$space-2;
@@ -12,16 +12,14 @@ $padding-inline: calc(spacing.$space-12 - $border-inline);
     gap: spacing.$space-4 spacing.$space-8;
     grid-template-columns: auto 1fr;
     padding-inline: $padding-inline;
-    padding-block-start: spacing.$space-8;
-    padding-block-end: spacing.$space-16;
-
+    padding-block: spacing.$space-8 spacing.$space-16;
     border-block-start-width: spacing.$space-6;
     border-inline-width: $border-inline;
     border-block-end-width: $border-inline;
     border-style: solid;
     border-color: var(--color-text);
 
-    &:before {
+    &::before {
       background-color: var(--color-text);
       grid-column-start: 1;
       align-self: center;
@@ -57,6 +55,7 @@ $padding-inline: calc(spacing.$space-12 - $border-inline);
 
     > :is(h2, h3, h4) {
       @include typography.font-default;
+      
       font-weight: 600;
     }
 

package/scss/components/breadcrumbs.scss

@@ -1,10 +1,12 @@
 @use "../tokens/spacing";
-@use "../tokens/sizing.scss";
-@use "../utils/mixins.scss";
+@use "../tokens/sizing";
+@use "../utils/mixins";
 
 .kth-breadcrumbs {
   display: none;
+  
   @include mixins.container;
+  
   padding-block-start: spacing.$space-16;
 
   @media (min-width: sizing.$breakpoint-64) {

package/scss/components/button.scss

@@ -1,7 +1,7 @@
 @use "../tokens/spacing";
 @use "../tokens/icons";
 @use "../tokens/typography";
-@use "../tokens/colors.scss";
+@use "../tokens/colors";
 
 @layer kth-style {
   .kth-button {
@@ -12,7 +12,9 @@
     border: unset;
     border-radius: spacing.$space-20;
     background: none;
+
     @include typography.font-heading-xs;
+
     text-decoration: none;
 
     &:hover {
@@ -34,6 +36,10 @@
     }
   }
 
+  .kth-button.previous {
+    gap: spacing.$space-4;
+  }
+
   .kth-button.secondary,
   .kth-button.previous {
     border: 1px solid var(--color-secondary);
@@ -45,6 +51,10 @@
     }
   }
 
+  .kth-button.next {
+    gap: spacing.$space-4;
+  }
+
   .kth-button.success,
   .kth-button.next {
     background: var(--color-success);
@@ -69,6 +79,7 @@
     padding: spacing.$space-8 0;
     gap: spacing.$space-4;
     color: var(--color-tertiary);
+
     @include typography.font-default;
 
     &:hover:not(:disabled) {
@@ -78,29 +89,25 @@
 
   .kth-button.menu::before {
     @include icons.icon-menu;
+
     background-color: var(--color-tertiary);
   }
 
   .kth-button.back::before {
     @include icons.icon-arrow-back;
-    background-color: var(--color-tertiary);
-  }
 
-  .kth-button.previous {
-    gap: spacing.$space-4;
+    background-color: var(--color-tertiary);
   }
 
   .kth-button.previous::before {
     @include icons.icon-arrow-back-500;
-    background-color: var(--color-text);
-  }
 
-  .kth-button.next {
-    gap: spacing.$space-4;
+    background-color: var(--color-text);
   }
 
   .kth-button.next::after {
     @include icons.icon-arrow-forward-500;
+
     background-color: var(--color-on-primary);
   }
-}
+}

package/scss/components/content.scss

@@ -1,6 +1,6 @@
-@use "../tokens/sizing.scss";
-@use "../tokens/spacing.scss";
-@use "../utils/mixins.scss";
+@use "../tokens/sizing";
+@use "../tokens/spacing";
+@use "../utils/mixins";
 
 @layer kth-style {
   .kth-content {
@@ -9,6 +9,7 @@
 
   .kth-main-content {
     @include mixins.container;
+
     padding-block: spacing.$space-16;
     flex: 1;
 
@@ -18,6 +19,6 @@
   }
 }
 
-// TODO: investigate the possibility to expand this `.kth-content` class:
+// TODO: investigate the possibility to expand this `.kth-content`;TODO class:
 // - is it possible to move the breadcrumbs inside the `kth-content` element?
 //   is it a good idea to do it from

package/scss/components/details.scss

@@ -1,5 +1,5 @@
-@use "../tokens/spacing.scss";
-@use "../tokens/icons.scss";
+@use "../tokens/spacing";
+@use "../tokens/icons";
 
 /// When true, the file generates CSS code for the entire document
 ///
@@ -20,6 +20,7 @@ $border-width: spacing.$space-4;
 
     &::before {
       @include icons.icon-caret-right;
+
       background-color: var(--color-tertiary);
       margin-block: spacing.$space-2;
     }
@@ -38,7 +39,7 @@ $border-width: spacing.$space-4;
     rotate: 90deg;
   }
 
-  > div {
+  >div {
     border-inline-start: $border-width solid var(--color-tertiary);
     padding-inline-start: spacing.$space-16;
     padding-block: spacing.$space-8;

package/scss/components/footer.scss

@@ -1,8 +1,8 @@
-@use "../tokens/colors.scss";
-@use "../tokens/spacing.scss";
-@use "../utils/mixins.scss";
+@use "../tokens/colors";
+@use "../tokens/spacing";
+@use "../utils/mixins";
 @use "../tokens/typography";
-@use "../tokens/sizing.scss";
+@use "../tokens/sizing";
 
 @layer kth-style {
   .kth-footer.intranet {
@@ -23,6 +23,7 @@
 
     &__content {
       @include mixins.container;
+      
       padding-top: spacing.$space-32;
       padding-bottom: spacing.$space-32;
 
@@ -59,6 +60,7 @@
 
       h2 {
         @include typography.font-heading-s;
+        
         margin: 0 0 spacing.$space-8;
       }
 

package/scss/components/header.scss

@@ -1,15 +1,17 @@
-@use "../tokens/colors.scss";
-@use "../tokens/spacing.scss";
-@use "../tokens/sizing.scss";
-@use "../utils/mixins.scss";
+@use "../tokens/colors";
+@use "../tokens/spacing";
+@use "../tokens/sizing";
+@use "../utils/mixins";
 
 @layer kth-style {
   .kth-header.intranet {
     @include colors.theme-intranet;
   }
+
   .kth-header.external {
     @include colors.theme-inverse;
   }
+  
   .kth-header.student-web {
     @include colors.theme-student-web;
   }
@@ -22,12 +24,14 @@
 
     &__container {
       @include mixins.container;
+      
       display: flex;
       align-items: center;
     }
 
     &__tools {
-      @include mixins.horizontal-list();
+      @include mixins.horizontal-list;
+      
       flex-wrap: wrap;
       gap: 0 spacing.$space-16;
       justify-content: flex-end;

package/scss/components/icon-button.scss

@@ -1,6 +1,6 @@
 @use "../tokens/spacing";
 @use "../tokens/icons";
-@use "../tokens/colors.scss";
+@use "../tokens/colors";
 
 $icon-size: calc(#{spacing.$space-24} + 2 * var(--space-inner-icon));
 
@@ -21,6 +21,7 @@ $icon-size: calc(#{spacing.$space-24} + 2 * var(--space-inner-icon));
 
   .kth-icon-button.close::before {
     @include icons.icon-close;
+    
     width: 100%;
     height: 100%;
     background-color: var(--color-tertiary);

package/scss/components/input.scss

@@ -1,6 +1,6 @@
-@use "../tokens/spacing.scss";
-@use "../tokens/icons.scss";
-@use "../tokens/typography.scss";
+@use "../tokens/spacing";
+@use "../tokens/icons";
+@use "../tokens/typography";
 
 @layer kth-style {
   .kth-input {
@@ -17,18 +17,21 @@
 
     &__label {
       @include typography.font-heading-xs;
+      
       color: var(--color-text);
       padding: 0;
     }
 
     &__description {
       @include typography.font-default;
+      
       color: var(--color-text);
       margin-top: spacing.$space-4;
     }
 
     &__requirement {
       @include typography.font-default;
+      
       color: var(--color-text-muted);
       font-style: italic;
       margin-top: spacing.$space-4;
@@ -36,6 +39,7 @@
 
     &__error-text {
       @include typography.font-default;
+      
       color: var(--color-error);
       display: flex;
       align-items: center;
@@ -44,6 +48,7 @@
 
       &::before {
         @include icons.icon-warning-500;
+        
         background-color: var(--color-error);
       }
     }
@@ -77,6 +82,7 @@
 
           &::before {
             @include icons.icon-input-checkbox;
+            
             background-color: var(--color-on-primary);
             height: spacing.$space-24;
             width: spacing.$space-24;

package/scss/components/kpm.scss

@@ -1,7 +1,7 @@
-@use "../utils/mixins.scss";
-@use "../tokens/spacing.scss";
-@use "../tokens/colors.scss";
-@use "../tokens/sizing.scss";
+@use "../utils/mixins";
+@use "../tokens/spacing";
+@use "../tokens/colors";
+@use "../tokens/sizing";
 
 // This file contains the minimal CSS needed to avoid layout shifts and other
 // styling issues related to KPM being rendered before CSS is loaded
@@ -12,6 +12,7 @@
 
     &__container {
       @include mixins.container;
+      
       display: flex;
     }
 
@@ -22,8 +23,13 @@
   }
 
   .kth-entrances {
+    // When logged out, show "mobile" version only in small screens
+    // Styling for kpm and entrances when logged in is handled by KPM
+    display: none;
+
     > ul {
-      @include mixins.horizontal-list();
+      @include mixins.horizontal-list;
+      
       gap: spacing.$space-4;
     }
 
@@ -57,12 +63,6 @@
     }
   }
 
-  // When logged out, show "mobile" version only in small screens
-  // Styling for kpm and entrances when logged in is handled by KPM
-  .kth-entrances {
-    display: none;
-  }
-
   @media screen and (min-width: sizing.$breakpoint-30) {
     .kth-entrances {
       display: block;

package/scss/components/local-navigation.scss

@@ -1,8 +1,8 @@
-@use "../tokens/colors.scss";
-@use "../tokens/spacing.scss";
-@use "../utils/mixins.scss";
+@use "../tokens/colors";
+@use "../tokens/spacing";
+@use "../utils/mixins";
 @use "../tokens/typography";
-@use "../tokens/sizing.scss";
+@use "../tokens/sizing";
 @use "../tokens/icons";
 
 @layer kth-style {
@@ -10,8 +10,8 @@
   .kth-local-navigation--mobile {
     h2 {
       @include typography.font-heading-s;
-      margin-block-start: spacing.$space-12;
-      margin-block-end: spacing.$space-4;
+      
+      margin-block: spacing.$space-12 spacing.$space-4;
     }
 
     ul {
@@ -43,6 +43,7 @@
 
     a.expandable::after {
       @include icons.icon-caret-right;
+      
       background-color: var(--color-tertiary);
       align-self: center;
     }

package/scss/components/logotype.scss

@@ -1,5 +1,5 @@
-@use "../tokens/spacing.scss";
-@use "../tokens/sizing.scss";
+@use "../tokens/spacing";
+@use "../tokens/sizing";
 
 @layer kth-style {
   a.kth-logotype,
@@ -12,14 +12,14 @@
     padding: 0;
     margin-inline-end: spacing.$space-8;
 
-    @media (min-width: sizing.$breakpoint-40) {
-      margin-inline-end: spacing.$space-32;
-    }
-
     // Defensive measurement:
     // - We prevent logo from shrinking
     flex: 0 0 auto;
 
+    @media (min-width: sizing.$breakpoint-40) {
+      margin-inline-end: spacing.$space-32;
+    }
+
     > figure {
       block-size: 100%;
       inline-size: 100%;

package/scss/components/mega-menu.scss

@@ -1,11 +1,17 @@
-@use "../tokens/spacing.scss";
-@use "../utils/mixins.scss";
-@use "../tokens/sizing.scss";
+@use "../tokens/spacing";
+@use "../utils/mixins";
+@use "../tokens/sizing";
 
 @layer kth-style {
   nav.kth-mega-menu {
+    display: none;
+
+    @media (min-width: sizing.$breakpoint-64) {
+      display: block;
+    }
+
     > ul {
-      @include mixins.horizontal-list();
+      @include mixins.horizontal-list;
 
       // Defensive measurements:
       // - `flex-wrap: wrap` makes sure that all menus are displayed decently
@@ -15,14 +21,6 @@
     }
   }
 
-  nav.kth-mega-menu {
-    display: none;
-
-    @media (min-width: sizing.$breakpoint-64) {
-      display: block;
-    }
-  }
-
   nav.kth-mega-menu--collapsable {
     display: block;
 

package/scss/components/menu-item.scss

@@ -35,18 +35,25 @@
 
     &.dropdown::after {
       @include icons.icon-caret-down;
+
       background-color: var(--color-on-header, colors.$color-blue-marine);
     }
+
     &.search::before {
       @include icons.icon-search;
+
       background-color: var(--color-on-header, colors.$color-blue-marine);
     }
+
     &.language::before {
       @include icons.icon-language;
+
       background-color: var(--color-on-header, colors.$color-blue-marine);
     }
+
     &.menu::before {
       @include icons.icon-menu;
+
       background-color: var(--color-on-header, colors.$color-blue-marine);
     }
   }

package/scss/components/menu-panel.scss

@@ -34,6 +34,7 @@
 
       h2 {
         @include typography.font-heading-m;
+        
         margin-bottom: spacing.$space-4;
       }
     }
@@ -51,6 +52,7 @@
 
       h3 {
         @include typography.font-heading-s;
+        
         margin: 0 0 spacing.$space-8;
       }
 

package/scss/components/mobile-menu.scss

@@ -37,8 +37,26 @@
 
       h2 {
         @include typography.font-heading-m;
+
+        margin-bottom: spacing.$space-4;
+      }
+    }
+
+    &__cortina-content {
+      li:not(:last-child) {
+        margin-bottom: spacing.$space-16;
+      }
+
+      h3 {
+        @include typography.font-heading-s;
+
         margin-bottom: spacing.$space-4;
       }
+
+      .block:not(:first-child),
+      .col:not(:first-child) {
+        margin-top: spacing.$space-32;
+      }
     }
 
     &__content {
@@ -50,6 +68,7 @@
 
       .kth-mobile-menu__item {
         @include typography.font-heading-m;
+
         text-decoration: none;
         display: flex;
         align-items: center;
@@ -60,6 +79,7 @@
 
         &::after {
           @include icons.icon-caret-right-big;
+
           background-color: var(--color-on-header, colors.$color-blue-marine);
           margin-left: 0.75rem;
         }
@@ -78,22 +98,6 @@
       }
     }
 
-    &__cortina-content {
-      li:not(:last-child) {
-        margin-bottom: spacing.$space-16;
-      }
-
-      h3 {
-        @include typography.font-heading-s;
-        margin-bottom: spacing.$space-4;
-      }
-
-      .block:not(:first-child),
-      .col:not(:first-child) {
-        margin-top: spacing.$space-32;
-      }
-    }
-
     .block.columnSplitter.row {
       display: block;
     }

package/scss/components/search.scss

@@ -1,7 +1,7 @@
 @use "sass:math";
-@use "../tokens/spacing.scss";
-@use "../tokens/icons.scss";
-@use "../tokens/typography.scss";
+@use "../tokens/spacing";
+@use "../tokens/icons";
+@use "../tokens/typography";
 
 $secondary-border-width: math.div(1rem, 16);
 
@@ -13,6 +13,7 @@ $secondary-border-width: math.div(1rem, 16);
 
     > label {
       @include typography.font-heading-s;
+      
       display: block;
       margin-block: spacing.$space-4;
       grid-area: label;
@@ -30,6 +31,7 @@ $secondary-border-width: math.div(1rem, 16);
       color: var(--color-secondary);
       grid-area: input;
       background: transparent;
+      
       @include typography.font-default;
     }
 
@@ -38,7 +40,6 @@ $secondary-border-width: math.div(1rem, 16);
       border: none;
       height: calc(#{spacing.$space-24} + 2 * var(--space-inner-icon));
       width: calc(#{spacing.$space-24} + 2 * var(--space-inner-icon));
-
       padding-block: var(--space-inner-icon);
       grid-area: input;
       place-self: center end;
@@ -56,6 +57,7 @@ $secondary-border-width: math.div(1rem, 16);
 
     > button.loading::after {
       @include icons.icon-spinner;
+      
       content: "";
       display: block;
       margin: auto;

package/scss/components/table.scss

@@ -0,0 +1,68 @@
+@use "../tokens/spacing" as s;
+@use "../tokens/icons";
+
+@layer kth-style {
+  .kth-table {
+    overflow-x: scroll;
+
+    table {
+      border-collapse: collapse;
+    }
+
+    th,
+    td,
+    caption {
+      text-align: left;
+      overflow-wrap: normal;
+      padding: s.$space-4 s.$space-16;
+      vertical-align: top;
+
+      &.kth-table__cell--numeric {
+        text-align: end;
+        font-variant-numeric: tabular-nums;
+      }
+    }
+
+    tbody td,
+    tbody th,
+    tfoot th,
+    tfoot td {
+      border-block-start: 1px solid var(--color-border);
+    }
+
+    thead,
+    tfoot {
+      background: var(--color-background-alt);
+    }
+
+    .kth-table__column--sortable {
+      padding: 0;
+
+      button {
+        text-align: inherit;
+        border: none;
+        background: none;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        padding: s.$space-4 s.$space-16;
+      }
+
+      button::after {
+        vertical-align: middle;
+        background-color: var(--color-text);
+
+        @include icons.icon-sort-unsorted;
+      }
+
+      &[aria-sort="ascending"] button::after {
+        @include icons.icon-sort-asc;
+      }
+
+      &[aria-sort="descending"] button::after {
+        @include icons.icon-sort-desc;
+      }
+    }
+  }
+}

package/scss/components/translation-panel.scss

@@ -4,27 +4,29 @@
 @layer kth-style {
   .kth-translation {
     @include colors.theme-default;
+    
     left: spacing.$space-16;
     right: spacing.$space-16;
     width: auto;
     background-color: var(--color-background);
 
     // TODO: tokenize this shadow
-    box-shadow: 0 0.125rem 0.5rem 0 rgb(0 0 0 /0.15);
+    box-shadow: 0 0.125rem 0.5rem 0 rgb(0 0 0 / 15%);
     border: none;
     padding: spacing.$space-16 spacing.$space-16 spacing.$space-32
       spacing.$space-32;
 
     // Let the dialog take up the remaining space
-    @media (min-width: calc(22.5rem + spacing.$space-16 * 2)) {
+    @media (width >= calc(22.5rem + spacing.$space-16 * 2)) {
       width: 22.5rem;
       left: auto;
+      
       // TODO: this formula should be a token
       right: clamp(spacing.$space-16, calc(100vw / 30), spacing.$space-32);
     }
 
     // TODO: tokenize the breakpoint
-    @media (min-width: 82rem) {
+    @media (width >= 82rem) {
       // TODO: tokenize formula
       // Remaining space to the right from the header's max-width + the heading's padding
       right: calc((100vw - 82rem) / 2 + spacing.$space-32);

package/scss/tokens/colors.scss

@@ -1,8 +1,7 @@
 // Gray-scale
 $color-white: #fcfcfc;
 $color-black: #212121;
-$color-black-opacity10: rgb(33 33 33 / 0.1);
-
+$color-black-opacity10: rgb(33 33 33 / 10%);
 $color-gray-lightest: #f2f2f2;
 $color-gray-lighter: #ededed;
 $color-gray-light: #e6e6e6;
@@ -25,7 +24,6 @@ $color-red-light: #fad6d6;
 $color-red: #c7321d;
 $color-red-dark: #bf2c17;
 $color-red-darker: #962312;
-
 $color-green-light: #d8ffe7;
 $color-green: #3d784a;
 $color-green-dark: #366f43;

package/scss/tokens/icons-raw.scss

@@ -23,8 +23,9 @@ $icon-new-window: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w
 $icon-pdf: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%231C1B1F%22%20d%3D%22M7.356%2010.452h.904v-1.5h.596a.875.875%200%200%200%20.644-.26.875.875%200%200%200%20.26-.644v-.596a.875.875%200%200%200-.26-.644.875.875%200%200%200-.644-.26h-1.5v3.904Zm.904-2.404v-.596h.596v.596H8.26Zm2.016%202.404h1.467a.875.875%200%200%200%20.645-.26.875.875%200%200%200%20.26-.644V7.452a.875.875%200%200%200-.26-.644.875.875%200%200%200-.645-.26h-1.467v3.904Zm.903-.904V7.452h.564v2.096h-.564Zm2.064.904h.905v-1.5h1.16v-.904h-1.16v-.596h1.16v-.904h-2.065v3.904Zm-6.695%204.131c-.375%200-.692-.13-.951-.388a1.294%201.294%200%200%201-.389-.952V3.756c0-.375.13-.692.389-.95.259-.26.576-.39.951-.39h9.487c.375%200%20.692.13.951.39.26.258.389.575.389.95v9.487c0%20.376-.13.693-.389.952s-.576.388-.95.388H6.547Zm0-1.083h9.487a.245.245%200%200%200%20.177-.08.245.245%200%200%200%20.08-.177V3.756a.245.245%200%200%200-.08-.176.245.245%200%200%200-.177-.08H6.548a.245.245%200%200%200-.176.08.245.245%200%200%200-.08.176v9.487c0%20.065.026.123.08.177.053.053.112.08.176.08Zm-2.583%203.667c-.375%200-.692-.13-.951-.389a1.294%201.294%200%200%201-.389-.951V5.257h1.083v10.57c0%20.064.027.123.08.176.054.054.113.08.177.08h10.57v1.084H3.965Z%22%2F%3E%3C%2Fsvg%3E");
 $icon-schedule: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%231C1B1F%22%20d%3D%22m12.936%2013.398.774-.775-3.168-3.168V5H9.458v4.92l3.478%203.478ZM10%2017.582a7.385%207.385%200%200%201-2.945-.592%207.656%207.656%200%200%201-2.417-1.63%207.646%207.646%200%200%201-1.63-2.418%207.408%207.408%200%200%201-.592-2.951%207.522%207.522%200%200%201%202.221-5.363%207.734%207.734%200%200%201%202.419-1.62%207.408%207.408%200%200%201%202.951-.592c1.047%200%202.031.199%202.953.597a7.652%207.652%200%200%201%202.406%201.62%207.657%207.657%200%200%201%201.62%202.408c.397.922.596%201.908.596%202.957a7.386%207.386%200%200%201-.592%202.945%207.745%207.745%200%200%201-1.619%202.417%207.513%207.513%200%200%201-5.37%202.222Zm.009-1.083c1.798%200%203.33-.635%204.594-1.906%201.264-1.271%201.896-2.806%201.896-4.604s-.632-3.33-1.896-4.594C13.339%204.132%2011.808%203.5%2010.01%203.5c-1.798%200-3.333.632-4.604%201.896C4.136%206.661%203.5%208.192%203.5%209.99c0%201.798.635%203.333%201.906%204.604%201.271%201.27%202.806%201.906%204.604%201.906Z%22%2F%3E%3C%2Fsvg%3E");
 $icon-search: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22m15.89%2016.647-4.964-4.963a4.96%204.96%200%200%201-1.37.735c-.498.174-1.01.26-1.54.26-1.3%200-2.404-.454-3.314-1.364C3.792%2010.405%203.337%209.3%203.337%208S3.792%205.598%204.7%204.687c.91-.911%202.015-1.366%203.314-1.366s2.403.455%203.314%201.365c.911.91%201.366%202.015%201.366%203.315%200%20.545-.089%201.066-.268%201.563a4.993%204.993%200%200%201-.727%201.346l4.963%204.963-.774.774Zm-7.874-5.05c1.004%200%201.855-.35%202.551-1.046.697-.696%201.045-1.547%201.045-2.551%200-1.004-.348-1.855-1.045-2.551-.696-.697-1.547-1.045-2.551-1.045-1.004%200-1.855.348-2.551%201.045C4.768%206.145%204.42%206.996%204.42%208c0%201.004.348%201.855%201.045%202.551.696.697%201.547%201.045%202.551%201.045Z%22%2F%3E%3C%2Fsvg%3E");
-$icon-sort-asc: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M15.833%2014.167h2.5L15%2017.5l-3.333-3.333h2.5V2.5h1.666v11.667Zm-14.166%200H10v1.666H1.667v-1.666ZM5%204.167v1.666H1.667V4.167H5Zm-3.333%205H7.5v1.666H1.667V9.167Z%22%2F%3E%3C%2Fsvg%3E");
-$icon-sort-desc: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M15.833%205.833h2.5L15%202.5l-3.333%203.333h2.5V17.5h1.666V5.833ZM1.667%2014.167H10v1.666H1.667v-1.666ZM5%204.167v1.666H1.667V4.167H5Zm-3.333%205H7.5v1.666H1.667V9.167Z%22%2F%3E%3C%2Fsvg%3E");
+$icon-sort-asc: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22m10.274%208%204.274%204.274H6L10.274%208Z%22%2F%3E%3C%2Fsvg%3E");
+$icon-sort-desc: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M10.274%2012.274%206%208h8.548l-4.274%204.274Z%22%2F%3E%3C%2Fsvg%3E");
+$icon-sort-unsorted: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22m10.274%204%204.274%204.274H6L10.274%204ZM10.274%2015.274%206%2011h8.548l-4.274%204.274Z%22%2F%3E%3C%2Fsvg%3E");
 $icon-spinner: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M17%2010a7%207%200%201%200-7%207v-1.75A5.25%205.25%200%201%201%2015.25%2010H17Z%22%2F%3E%3C%2Fsvg%3E");
 $icon-star-off: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M7.333%2014.896%2010%2013.312l2.688%201.584-.709-3%202.313-1.98-3.063-.27L10%206.792%208.77%209.646l-3.062.27%202.334%201.98-.709%203ZM5.063%2018l1.312-5.542L2%208.73l5.75-.5L10%203l2.25%205.25%205.75.48-4.375%203.728L14.938%2018%2010%2015.062%205.062%2018Z%22%2F%3E%3C%2Fsvg%3E");
 $icon-star-on: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22m5.063%2018%201.312-5.542L2%208.73l5.75-.5L10%203l2.25%205.25%205.75.48-4.375%203.728L14.938%2018%2010%2015.062%205.062%2018Z%22%2F%3E%3C%2Fsvg%3E");

package/scss/tokens/icons.scss

@@ -10,15 +10,14 @@
 @mixin with-icon($icon, $size: 1.25rem) {
   // We use this variable to avoid sending the same data twice to the users
   --icon: #{$icon};
+  
   content: "";
   display: inline-block;
   width: $size;
   min-width: $size;
   height: $size;
-  -webkit-mask-image: var(--icon);
   mask-image: var(--icon);
   mask-size: cover;
-  -webkit-mask-size: cover;
 }
 
 @mixin icon-input-checkbox {
@@ -39,6 +38,7 @@
 
 @mixin icon-caret-down {
   @include with-icon(raw.$icon-caret-right);
+  
   rotate: 90deg;
 }
 
@@ -56,11 +56,13 @@
 
 @mixin icon-arrow-back {
   @include with-icon(raw.$icon-arrow-forward);
+  
   rotate: 180deg;
 }
 
 @mixin icon-arrow-back-500 {
   @include with-icon(raw.$icon-arrow-forward-500);
+  
   rotate: 180deg;
 }
 
@@ -94,6 +96,7 @@
 
 @mixin icon-spinner {
   @include with-icon(raw.$icon-spinner);
+  
   animation: spin 750ms infinite linear;
 }
 
@@ -123,4 +126,16 @@
 
 @mixin icon-pdf {
   @include with-icon(raw.$icon-pdf);
-}
+}
+
+@mixin icon-sort-unsorted {
+  @include with-icon(raw.$icon-sort-unsorted);
+}
+
+@mixin icon-sort-asc {
+  @include with-icon(raw.$icon-sort-asc);
+}
+
+@mixin icon-sort-desc {
+  @include with-icon(raw.$icon-sort-desc);
+}

package/scss/tokens/spacing.scss

@@ -1,5 +1,6 @@
 @use "sass:list";
 @use "sass:map";
+
 /// Design Tokens for spacing
 
 $space-0: 0;

package/scss/tokens/typography.scss

@@ -1,6 +1,6 @@
 @use "sass:list";
 
-$font-figtree: Figtree, sans-serif;
+$font-figtree: Figtree, sans-serif; /* stylelint-disable-line value-keyword-case */
 $breakpoint-fluid-typography: 48rem;
 $font-bold: 600;
 

package/scss/utils/prose.scss

@@ -15,14 +15,15 @@
 
   p {
     margin-block: s.$space-20;
+    
     // TODO: change this to `rem` and tokenize
     max-width: 60ch;
   }
 
   .lead {
     @include t.font-lead-fluid;
-    margin-block-start: s.$space-12;
-    margin-block-end: s.$space-16;
+
+    margin-block: s.$space-12 s.$space-16;
   }
 
   h1,
@@ -33,23 +34,19 @@
   }
 
   h1 {
-    margin-block-start: s.$space-32;
-    margin-block-end: s.$space-16;
+    margin-block: s.$space-32 s.$space-16;
   }
 
   h2 {
-    margin-block-start: s.$space-32;
-    margin-block-end: s.$space-16;
+    margin-block: s.$space-32 s.$space-16;
   }
 
   h3 {
-    margin-block-start: s.$space-32;
-    margin-block-end: s.$space-8;
+    margin-block: s.$space-32 s.$space-8;
   }
 
   h4 {
-    margin-block-start: s.$space-32;
-    margin-block-end: s.$space-4;
+    margin-block: s.$space-32 s.$space-4;
   }
 
   li {

package/scss/utils/reset.scss

@@ -15,7 +15,6 @@ $kpm-height: 2.5rem !default;
   *::before,
   *::after {
     box-sizing: border-box;
-    overflow-wrap: anywhere;
   }
 
   h1,
@@ -81,19 +80,19 @@ $kpm-height: 2.5rem !default;
 @if $generate-css {
   @layer kth-style {
     html {
-      -moz-text-size-adjust: none;
-      -webkit-text-size-adjust: none;
       text-size-adjust: none;
     }
 
     :root {
       @include colors.theme-default;
       @include spacing.theme-default;
+      
       font-family: typography.$font-figtree;
     }
 
     body {
       @include typography.font-default;
+      
       color: var(--color-text);
       background: var(--color-background);
       min-height: calc(100vh - $kpm-height);
@@ -101,6 +100,7 @@ $kpm-height: 2.5rem !default;
       margin-top: $kpm-height;
       display: flex;
       flex-direction: column;
+      overflow-wrap: anywhere;
     }
 
     @include reset;